/* roblox.estudiocrivy — scaffold visual, dados fictícios.
   Herda tokens.css do site principal. Register de marca: essa é a única das
   três que fala com público final, então pode ter mais presença. */

/* Google Fonts entrega "Encode Sans"/"JetBrains Mono"; o tokens.css do site
   pede as variantes "Variable" do fontsource. Sem os dois nomes na cadeia,
   cai tudo em system-ui. */
:root {
  --font-display: 'Encode Sans Variable', 'Encode Sans', system-ui, sans-serif;
  --font-body: 'Encode Sans Variable', 'Encode Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono Variable', 'JetBrains Mono', ui-monospace, monospace;
}

body { margin: 0; min-height: 100dvh; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }

/* ---- Topo ---- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.topbar-inner { display: flex; align-items: center; gap: var(--space-6); min-height: 64px; }
.marca {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg);
  letter-spacing: -0.02em; text-decoration: none; color: var(--color-text); white-space: nowrap;
}
.marca .ponto { color: var(--color-games); }
.marca small {
  display: block; font-family: var(--font-mono); font-size: 10px; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--color-text-muted);
}
.abas { display: flex; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }
.abas button {
  min-height: 44px; padding: var(--space-2) var(--space-4);
  background: none; border: none; border-radius: var(--radius-pill);
  color: var(--color-text-muted); font-size: var(--text-sm); cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.abas button:hover, .abas button:focus-visible { color: var(--color-text); background: var(--color-surface); }
.abas button[aria-selected="true"] { background: var(--color-surface-2); color: var(--color-text); font-weight: 600; }

.saldo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-games); border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-games);
  white-space: nowrap;
}

main { padding-bottom: var(--space-24); }
.painel { display: none; }
.painel[data-ativo] { display: block; }

.aviso-mock {
  display: flex; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); margin-block: var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-muted);
}
.aviso-mock b {
  color: var(--color-creators); font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .1em; align-self: center;
}

/* ---- Hero ---- */
.hero { position: relative; overflow: hidden; padding-block: var(--space-24) var(--space-16); }
.hero-brilho {
  position: absolute; inset-inline: 0; top: -160px; height: 420px;
  background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-games) 18%, transparent), transparent 68%);
  pointer-events: none;
}
.hero-inner { position: relative; display: grid; gap: var(--space-6); }
.hero h1 { font-size: var(--text-hero); max-width: 16ch; }
.hero h1 .verde { color: var(--color-games); }
.hero p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: var(--width-prosa); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); }

.btn {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius-pill);
  background: var(--color-games); color: #04220b;
  font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm);
  text-decoration: none; border: none; cursor: pointer; white-space: nowrap;
  transition: opacity var(--transition);
}
.btn:hover, .btn:focus-visible { opacity: .88; }
.btn.fantasma {
  background: none; color: var(--color-text); border: 1px solid var(--color-border-control);
}
.btn.fantasma:hover, .btn.fantasma:focus-visible { border-color: var(--color-games); color: var(--color-games); opacity: 1; }

/* ---- Jogos: destaque grande + secundários, não grade uniforme ---- */
.secao { padding-block: var(--space-16); }
.secao-topo {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); margin-bottom: var(--space-8);
}
.secao-topo h2 { font-size: var(--text-2xl); }
.secao-topo p { color: var(--color-text-muted); font-size: var(--text-sm); margin: var(--space-1) 0 0; }

.jogos { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.jogo {
  display: grid; align-content: end; gap: var(--space-2);
  min-height: 260px; padding: var(--space-6);
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background:
    linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--color-bg) 88%, transparent) 100%),
    color-mix(in srgb, var(--jc, var(--color-games)) 16%, var(--color-surface));
  text-decoration: none; color: inherit;
  transition: border-color var(--transition), translate var(--ease-out);
}
.jogo:hover, .jogo:focus-visible { border-color: var(--jc, var(--color-games)); translate: 0 -4px; }
.jogo.destaque { grid-column: 1 / -1; min-height: 340px; }
.jogo h3 { font-size: var(--text-xl); }
.jogo.destaque h3 { font-size: var(--text-2xl); }
.jogo p { color: var(--color-text-muted); font-size: var(--text-sm); max-width: 54ch; }
.jogo .meta {
  display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2);
  font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-muted);
}
.selo {
  justify-self: start;
  padding: 2px var(--space-3); border-radius: var(--radius-pill);
  border: 1px solid currentColor; color: var(--jc, var(--color-games));
  font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}

/* ---- Câmbio ---- */
.cambio-grade {
  display: grid; gap: var(--space-8);
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}
.caixa {
  padding: var(--space-6);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius);
}
.caixa h3 { font-size: var(--text-lg); margin-bottom: var(--space-4); }

.par {
  display: grid; grid-template-columns: 1fr auto; gap: var(--space-2) var(--space-4);
  align-items: center; padding-block: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.par:last-child { border-bottom: none; }
.par .moeda { display: grid; gap: 2px; }
.par .moeda strong { font-size: var(--text-sm); }
.par .moeda span { font-size: var(--text-xs); color: var(--color-text-muted); }
.par .cotacao { text-align: right; font-family: var(--font-mono); font-size: var(--text-sm); }
.par .cotacao small { display: block; color: var(--color-text-muted); font-size: var(--text-xs); }
.spread { color: var(--color-creators); }

/* minmax(0,1fr): o <select> tem largura mínima da opção mais longa
   ("Xarope — Torre de Panquecas"), e sem isso o grid estica pra acomodar em vez
   de deixar o campo encolher. */
.form-troca { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.campo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.campo input, .campo select { min-width: 0; max-width: 100%; }
.campo label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: .1em; color: var(--color-text-muted);
}
.campo input, .campo select {
  min-height: 48px; padding: var(--space-3) var(--space-4);
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--color-border-control); border-radius: var(--radius);
  font: inherit; font-size: var(--text-base);
}
.campo input:focus-visible, .campo select:focus-visible {
  outline: 2px solid var(--color-games); outline-offset: 2px;
}
.troca-resultado {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4); border-radius: var(--radius);
  background: var(--color-surface-2); font-family: var(--font-mono); font-size: var(--text-sm);
}
.troca-resultado strong { color: var(--color-games); }

.regra {
  display: grid; gap: var(--space-2); padding-top: var(--space-4);
  border-top: 2px solid var(--color-border);
}
.regra strong { font-size: var(--text-base); }
.regra p { color: var(--color-text-muted); font-size: var(--text-sm); margin: 0; }
.regras { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* ---- Extrato ---- */
.extrato { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.extrato thead th {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.extrato tbody td {
  padding: var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}
.extrato tbody tr:last-child td { border-bottom: none; }
.extrato .valor { font-family: var(--font-mono); white-space: nowrap; }
.extrato .num { text-align: right; }

.proc {
  display: inline-block;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  white-space: nowrap;
}
.proc.jogando  { color: var(--color-games); }
.proc.comprado { color: var(--color-creators); }

footer.rodape {
  border-top: 1px solid var(--color-border); padding-block: var(--space-12);
  color: var(--color-text-muted); font-size: var(--text-sm);
}

@media (max-width: 720px) {
  .topbar-inner { flex-wrap: wrap; padding-block: var(--space-3); min-height: auto; }
  .abas { order: 3; width: 100%; overflow-x: auto; }
  .hero { padding-block: var(--space-16) var(--space-12); }
}