/* FRS Games — identidade roxa + proporção áurea (φ = 1,618)
   Onde φ aparece:
   - espaçamento em Fibonacci (5, 8, 13, 21, 34, 55, 89 px)
   - escala de texto crescendo ×√φ (1,272) e altura de linha 1,618
   - colunas das páginas em 1 : 1,618
   - capas dos jogos em 1,618 : 1 e banner em 2,618 : 1 (φ²)
   - altura do cabeçalho 55 px, emblema 34 px, chanfro dos cantos 13 px */

:root {
  --phi: 1.618;

  --s1: 5px;  --s2: 8px;  --s3: 13px; --s4: 21px;
  --s5: 34px; --s6: 55px; --s7: 89px;

  --t0: 1rem;
  --t1: 1.272rem;
  --t2: 1.618rem;
  --t3: 2.058rem;
  --t4: 2.618rem;

  --bg: #07040f;
  --panel: #120c22;
  --panel-2: #1a1230;
  --line: #2e1f52;
  --line-hi: #5b34b5;
  --text: #ece9f7;
  --muted: #9c93b8;
  --accent: #8b3dff;
  --accent-hi: #b06bff;
  --silver: #f4f2fb;
  --ok: #36d6a0;
  --warn: #ffb347;
  --danger: #ff6b7a;
  --radius: var(--s3);
  --glow: 0 0 var(--s4) rgba(139, 61, 255, .35);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text);
  font: 400 var(--t0)/1.618 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background:
    radial-gradient(ellipse 80% 38% at 50% -6%, rgba(139, 61, 255, .30), transparent 70%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  display: flex; flex-direction: column;
}
a { color: var(--accent-hi); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.wrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s6); flex: 1; }

/* ---------- cabeçalho ---------- */
.top {
  background: linear-gradient(180deg, rgba(18, 12, 34, .96), rgba(10, 6, 20, .96));
  border-bottom: 1px solid var(--line-hi);
  box-shadow: 0 1px var(--s4) rgba(139, 61, 255, .25);
  position: sticky; top: 0; z-index: 10;
}
.top .inner {
  max-width: 1100px; margin: 0 auto; padding: 0 var(--s4);
  min-height: var(--s6);
  display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: var(--s2); color: var(--silver); }
.brand:hover { text-decoration: none; }
.emblem { height: var(--s5); width: auto; display: block; mix-blend-mode: screen; }
.brand-text {
  font-weight: 900; font-style: italic; text-transform: uppercase;
  font-size: var(--t1); letter-spacing: .04em; line-height: 1;
}
.brand-text b { color: var(--accent-hi); font-weight: 900; letter-spacing: .22em; margin-left: .35em; font-size: .78em; }
.top nav { margin-left: auto; display: flex; gap: var(--s4); align-items: center; flex-wrap: wrap; }
.top nav a { color: var(--muted); font-size: .95rem; }
.top nav a:hover { color: var(--silver); text-decoration: none; }
.linkbtn { background: none; border: 0; color: var(--muted); font: inherit; font-size: .95rem; cursor: pointer; padding: 0; }
.linkbtn:hover { color: var(--silver); }

/* ---------- tipografia ---------- */
h1 {
  font-size: var(--t2); margin: 0 0 var(--s2); line-height: 1.2;
  font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: .02em; color: var(--silver);
}
h2 { font-size: var(--t1); margin: var(--s5) 0 var(--s3); line-height: 1.272; font-weight: 800; font-style: italic; color: var(--silver); }
.lead { color: var(--muted); margin: 0 0 var(--s4); }
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.nt { margin-top: 0; }
.mt { margin-top: var(--s3); }

.flash { padding: var(--s3) var(--s3); border-radius: var(--s2); margin-bottom: var(--s3); border: 1px solid var(--line); background: var(--panel); }
.flash.ok { border-color: #1f6f55; background: #0c231c; }
.flash.error { border-color: #7a2b36; background: #2a1118; }

/* ---------- hero (banner em φ² : 1) ---------- */
.hero {
  position: relative; margin: 0 0 var(--s4); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line-hi); box-shadow: var(--glow);
  /* Faixa em φ² : 1 para os jogos aparecerem sem rolar. A capa é 16:9: o corte tira só a arte de cima e de
     baixo; logo, ícones das plataformas e slogan (do meio para baixo) ficam inteiros com o foco em 58%. */
  aspect-ratio: 2.618 / 1; max-height: 44vh;
}
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; }

.strip { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: 0 0 var(--s5); }
.strip div {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--s3);
  padding: var(--s3) var(--s4); font-size: .93rem; color: var(--muted);
}
.strip b { display: block; color: var(--silver); font-size: 1rem; }

/* ---------- filtros e formulários ---------- */
.filters { display: flex; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s4); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], select, textarea {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--s2);
  padding: var(--s3); font: inherit; width: 100%;
}
.filters input[type=text] { flex: 1 1 220px; width: auto; }
.filters select { width: auto; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-hi); outline-offset: 1px; border-color: var(--accent); }
label { display: block; font-size: .9rem; color: var(--muted); margin: 0 0 var(--s1); }
.field { margin-bottom: var(--s3); }
/* rótulo com botão redondo "?" de ajuda: a dica aparece ao passar o mouse, focar ou tocar */
.labelrow { display: flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s1); }
.labelrow label { margin: 0; }
.help { position: relative; display: inline-flex; }
.help-btn {
  width: 20px; height: 20px; padding: 0; border-radius: 50%; cursor: help;
  border: 1px solid var(--line-hi); background: var(--panel-2); color: var(--accent-hi);
  font: 700 .75rem/1 system-ui, sans-serif;
}
.help-btn:hover, .help-btn:focus-visible { background: var(--accent); color: #fff; }
.help-tip {
  position: absolute; left: -8px; bottom: calc(100% + var(--s2)); z-index: 5;
  width: max-content; max-width: 233px; padding: var(--s2) var(--s3);
  background: #05030c; border: 1px solid var(--line-hi); border-radius: var(--s2); box-shadow: var(--glow);
  color: var(--text); font-size: .82rem; line-height: 1.45;
  visibility: hidden; opacity: 0; transition: opacity .15s;
}
.help-tip strong, .help-tip span { display: block; }
.help-tip span::before { content: "• "; color: var(--accent-hi); }
.help:hover .help-tip, .help-btn:focus + .help-tip { visibility: visible; opacity: 1; }
.check { display: flex; gap: var(--s3); align-items: flex-start; color: var(--text); font-size: .95rem; }
.check input { margin-top: var(--s1); accent-color: var(--accent); }

.btn {
  display: inline-block; border: 0; border-radius: var(--s2); padding: var(--s3) var(--s4); font: inherit;
  font-weight: 800; letter-spacing: .03em; cursor: pointer; text-align: center; color: #fff;
  background: linear-gradient(135deg, #a24dff, #6a1fe0);
  box-shadow: 0 0 var(--s3) rgba(139, 61, 255, .45);
}
.btn:hover { filter: brightness(1.12); text-decoration: none; }
.btn.secondary { background: var(--panel-2); border: 1px solid var(--line-hi); color: var(--text); box-shadow: none; }
.btn.danger { background: #8a2f3b; box-shadow: none; }
.btn.good { background: linear-gradient(135deg, #25b98a, #1a8a68); box-shadow: none; }
.btn.small { padding: var(--s2) var(--s3); font-size: .875rem; }
.btn.block { width: 100%; }

/* ---------- vitrine ---------- */
.grid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(233px, 1fr)); }
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; color: var(--text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.card:hover { border-color: var(--accent); box-shadow: var(--glow); transform: translateY(-2px); text-decoration: none; }
.cover {
  aspect-ratio: 1.618 / 1; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
  font-size: var(--t3); font-weight: 900; font-style: italic; letter-spacing: .06em; color: rgba(255, 255, 255, .92);
}
.cover::before {
  content: ""; position: absolute; inset: 0; background: url("img/emblem-256.webp") center / 62% no-repeat;
  mix-blend-mode: screen; opacity: .16;
}
.cover span { position: relative; text-shadow: 0 0 var(--s4) rgba(0, 0, 0, .6); }
.hue-0 { background: linear-gradient(135deg, #6a2bff, #1b0f4d); }
.hue-1 { background: linear-gradient(135deg, #9b3dff, #2a0f52); }
.hue-2 { background: linear-gradient(135deg, #c23dff, #3a0f4d); }
.hue-3 { background: linear-gradient(135deg, #4a46ff, #130f4d); }
.hue-4 { background: linear-gradient(135deg, #8a2bd6, #220a40); }
.hue-5 { background: linear-gradient(135deg, #5a2bd6, #0f0a33); }
.card .body { padding: var(--s3) var(--s4) var(--s4); display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.card h3 { margin: 0; font-size: 1rem; line-height: 1.3; color: var(--silver); }
.price { font-size: var(--t1); font-weight: 900; color: var(--silver); margin-top: auto; text-shadow: 0 0 var(--s3) rgba(176, 107, 255, .65); }
.price.off { color: var(--muted); font-size: 1rem; font-weight: 600; text-shadow: none; }

.badges { display: flex; gap: var(--s2); flex-wrap: wrap; }
.badge { font-size: .75rem; padding: 3px var(--s2); border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); }
.badge.ok { color: var(--ok); border-color: #1f6f55; }
.badge.warn { color: var(--warn); border-color: #7a5a22; }
.badge.bad { color: var(--danger); border-color: #7a2b36; }

/* ---------- colunas em proporção áurea ---------- */
.split { display: grid; gap: var(--s5); grid-template-columns: 1fr; margin-top: var(--s4); }
@media (min-width: 800px) {
  .split.phi { grid-template-columns: 1fr 1.618fr; }     /* estreita | larga */
  .split.phi-r { grid-template-columns: 1.618fr 1fr; }   /* larga | estreita */
  .split.even { grid-template-columns: 1fr 1fr; }
}
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4) var(--s5) var(--s5); }
.panel.tight { padding: var(--s4); }
.cover.big { border-radius: var(--radius); font-size: var(--t4); border: 1px solid var(--line-hi); box-shadow: var(--glow); }
.price-big { font-size: var(--t3); font-weight: 900; color: var(--silver); margin: var(--s2) 0; text-shadow: 0 0 var(--s4) rgba(176, 107, 255, .7); }
.price-big.off { color: var(--muted); text-shadow: none; }
.note { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--s3); padding: var(--s3) var(--s4); font-size: .92rem; color: var(--muted); margin: var(--s3) 0; }

.timeline { list-style: none; padding: 0; margin: var(--s4) 0; display: grid; gap: 0; }
.timeline li { position: relative; padding: 0 0 var(--s4) var(--s5); color: var(--muted); }
.timeline li::before { content: ""; position: absolute; left: var(--s2); top: var(--s1); width: 14px; height: 14px; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--line-hi); }
.timeline li::after { content: ""; position: absolute; left: 14px; top: 21px; bottom: 0; width: 2px; background: var(--line); }
.timeline li:last-child::after { display: none; }
.timeline li.done { color: var(--text); }
.timeline li.done::before { background: var(--ok); border-color: var(--ok); }
.timeline li.now { color: var(--silver); font-weight: 700; }
.timeline li.now::before { background: var(--accent); border-color: var(--accent-hi); box-shadow: 0 0 0 4px rgba(139, 61, 255, .3); }

.keybox { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #05030c; border: 1px dashed var(--accent-hi); border-radius: var(--s3); padding: var(--s3) var(--s4); font-size: 1.1rem; word-break: break-all; user-select: all; color: var(--silver); }
.pixbox { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #05030c; border: 1px solid var(--line-hi); border-radius: var(--s3); padding: var(--s3); word-break: break-all; user-select: all; }

/* ---------- tabelas do painel ---------- */
table { width: 100%; border-collapse: collapse; font-size: .93rem; line-height: 1.4; }
th, td { text-align: left; padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .4px; }
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
tr.best td { background: rgba(139, 61, 255, .12); }
.tabs { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); }
.tabs a { padding: var(--s1) var(--s3); border-radius: 999px; background: var(--panel); border: 1px solid var(--line); color: var(--muted); font-size: .88rem; }
.tabs a.on { background: var(--accent); border-color: var(--accent-hi); color: #fff; text-decoration: none; }
.inline { display: inline; }
.row { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: end; }
.row > .field { flex: 1 1 160px; margin-bottom: 0; }

/* ---------- rodapé e login ---------- */
footer { border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; padding: var(--s4); text-align: center; background: rgba(7, 4, 15, .8); }
footer .emblem { height: var(--s4); display: inline-block; vertical-align: middle; margin-right: var(--s2); }
.center { max-width: 377px; margin: var(--s5) auto; }
.login-emblem { display: block; margin: 0 auto var(--s4); height: var(--s7); }
.split { margin-top: var(--s4); }

.center.wide { max-width: 521px; }
input[type=tel] { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--s2); padding: var(--s3); font: inherit; width: 100%; }
input[type=tel]:focus { outline: 2px solid var(--accent-hi); outline-offset: 1px; border-color: var(--accent); }
.top nav a.btn { color: #fff; }
.top nav a.btn:hover { color: #fff; }
.login-emblem {
  -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 62% at 50% 50%, #000 82%, transparent 100%);
}

/* ---------- página do jogo (layout 1,618 : 1 — coluna larga | coluna estreita) ---------- */
.cover.has-img::before { display: none; }
.cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.crumbs { color: var(--muted); margin-bottom: var(--s2); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-hi); }
.gtitle { margin-bottom: var(--s3); }
.main-col, .side-col { min-width: 0; }
.main-col > h2.uline:first-child { margin-top: 0; }

.stage { position: relative; aspect-ratio: 16 / 9; background: #05030c; border: 1px solid var(--line-hi); border-radius: var(--radius); overflow: hidden; box-shadow: var(--glow); }
.stage > div, .stage a, .stage img.main, .stage .cover { display: block; width: 100%; height: 100%; }
.stage [data-stage] { width: 100%; height: 100%; object-fit: contain; display: block; }
.stage [hidden] { display: none; }
.pane-vid .video { position: relative; width: 100%; height: 100%; }
.pane-vid .video .poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.pane-vid .video .play, .pane-vid .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video .play {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s3); cursor: pointer;
  color: var(--silver); font: inherit; font-weight: 700; background: transparent; padding: var(--s3); text-align: center;
}
.video .play:hover .tri-ring, .video .play:hover { color: #fff; }
.video .play .tri { width: 0; height: 0; border-left: 34px solid var(--accent-hi); border-top: 21px solid transparent; border-bottom: 21px solid transparent; flex: none; filter: drop-shadow(0 0 var(--s3) rgba(139, 61, 255, .8)); }

.stripwrap { display: flex; align-items: stretch; gap: var(--s2); margin-top: var(--s2); }
.strip-thumbs { display: flex; gap: var(--s2); overflow-x: auto; scroll-snap-type: x proximity; flex: 1; min-width: 0; padding-bottom: var(--s1); scrollbar-width: thin; scrollbar-color: var(--accent) var(--panel); }
.thumb { position: relative; flex: 0 0 144px; display: block; border: 2px solid transparent; border-radius: var(--s2); overflow: hidden; opacity: .72; scroll-snap-align: start; transition: opacity .15s, border-color .15s; background: #05030c; }
.thumb img, .thumb .blank { display: block; width: 100%; aspect-ratio: 1.618 / 1; object-fit: cover; }
.thumb .blank { background: linear-gradient(135deg, #2a0f52, #07040f); }
.thumb:hover, .thumb.on { opacity: 1; border-color: var(--accent-hi); }
.vthumb .tri { position: absolute; left: 50%; top: 50%; width: 0; height: 0; margin: -10px 0 0 -7px; border-left: 17px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; filter: drop-shadow(0 0 5px rgba(0, 0, 0, .8)); }
.vthumb::after { content: ""; position: absolute; inset: 0; background: rgba(139, 61, 255, .22); pointer-events: none; }
.arrow { flex: 0 0 34px; border: 1px solid var(--line-hi); background: var(--panel-2); color: var(--silver); border-radius: var(--s2); font-size: var(--t1); cursor: pointer; }
.arrow:hover { border-color: var(--accent-hi); box-shadow: var(--glow); }

.buybox { margin-top: var(--s4); }
.buyrow { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.pricebox { font-size: var(--t2); font-weight: 900; color: var(--silver); background: #05030c; border: 1px solid var(--line-hi); border-radius: var(--s2); padding: var(--s1) var(--s4); text-shadow: 0 0 var(--s3) rgba(176, 107, 255, .65); }
.pricebox.off { font-size: 1rem; font-weight: 600; color: var(--muted); text-shadow: none; }
h2.uline { border-bottom: 1px solid var(--line-hi); padding-bottom: var(--s2); background: none; }
.prose { white-space: pre-line; margin: 0 0 var(--s3); }

.reqs { display: grid; gap: var(--s4) var(--s5); grid-template-columns: repeat(auto-fit, minmax(233px, 1fr)); }
.req h3 { margin: 0 0 var(--s2); font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.req ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); font-size: .92rem; }
.req li { overflow-wrap: anywhere; }
.req li b { color: var(--silver); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; margin-right: var(--s1); }

.capsule { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-hi); box-shadow: var(--glow); }
.capsule img, .capsule .cover { display: block; width: 100%; aspect-ratio: 1.618 / 1; object-fit: cover; }
.short { margin: var(--s3) 0; font-size: .95rem; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s3); margin: var(--s3) 0; font-size: .85rem; }
.facts dt { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: .75rem; padding-top: 2px; }
.facts dd { margin: 0; color: var(--accent-hi); overflow-wrap: anywhere; }
.tagtitle { color: var(--muted); font-size: .8rem; margin: var(--s3) 0 var(--s2); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.tag { background: var(--panel-2); color: var(--accent-hi); border: 1px solid var(--line); border-radius: 3px; padding: 2px var(--s2); font-size: .8rem; }
.features { list-style: none; padding: 0; margin: var(--s4) 0 var(--s3); display: grid; gap: var(--s1); }
.features li { background: var(--panel); border-left: 3px solid var(--accent); padding: var(--s2) var(--s3); font-size: .88rem; color: var(--accent-hi); border-radius: 0 var(--s1) var(--s1) 0; }
.box { background: var(--panel); border: 1px solid var(--line); border-radius: var(--s3); padding: var(--s3) var(--s4); margin-top: var(--s3); }
table.langs { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.langs caption { text-align: left; color: var(--muted); padding-bottom: var(--s2); }
table.langs th, table.langs td { text-align: center; padding: var(--s1) var(--s1); border-bottom: 1px solid var(--line); font-weight: 400; color: var(--muted); }
table.langs th[scope=row] { text-align: left; color: var(--text); }
table.langs td { color: var(--accent-hi); font-weight: 700; }
.rating { display: grid; grid-template-columns: auto 1fr; gap: var(--s3); align-items: center; font-size: .9rem; }
.rating .full { grid-column: 1 / -1; margin: 0; }
.agebadge { width: var(--s6); height: var(--s6); display: flex; align-items: center; justify-content: center; font-size: var(--t1); font-weight: 900; border-radius: var(--s2); color: #fff; border: 2px solid rgba(255, 255, 255, .85); }
.age-L { background: #1c9a55; } .age-10 { background: #1e78d6; } .age-12 { background: #e6b800; color: #1a1400; }
.age-14 { background: #ee7f00; } .age-16 { background: #d8232a; } .age-18 { background: #111; }

/* admin */
.specs-form { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(233px, 1fr)); }
.specs-form fieldset { border: 1px solid var(--line); border-radius: var(--s3); padding: var(--s3) var(--s4) var(--s1); margin: 0; min-width: 0; }
.specs-form legend { color: var(--silver); font-weight: 700; padding: 0 var(--s2); }
.mediagrid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); }
.mitem img, .mitem .vtile { display: block; width: 100%; aspect-ratio: 1.618 / 1; object-fit: cover; border: 1px solid var(--line-hi); border-radius: var(--s2); }
.mitem .vtile { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--panel-2); color: var(--silver); font-weight: 700; }
.row-actions { display: flex; gap: var(--s3); }
input[type=file] { width: 100%; color: var(--muted); }

.checks { border: 1px solid var(--line); border-radius: var(--s3); padding: var(--s2) var(--s4) var(--s3); margin: 0 0 var(--s3); min-width: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fit, minmax(177px, 1fr)); }
.checks legend { color: var(--silver); font-weight: 700; padding: 0 var(--s2); }
table.langform td, table.langform th { padding: var(--s1) var(--s2); text-align: center; }
table.langform td:first-child { text-align: left; }

/* correções: o atributo height das <img> não pode vencer a proporção */
.thumb img, .mitem img, .capsule img { height: auto; }
.box { overflow-x: auto; }
table.langs th { text-transform: none; letter-spacing: 0; font-size: .75rem; }
@media (max-width: 480px) { .thumb { flex-basis: 89px; } .gtitle { font-size: var(--t1); } }

/* preço de referência (de/por) */
.price .old, .pricebox .old { color: var(--muted); text-decoration: line-through; font-weight: 600; font-size: .78em; margin-right: var(--s2); text-shadow: none; }
.offtag { display: inline-block; background: #1c9a55; color: #fff; font-size: .62em; font-weight: 800; padding: 1px var(--s2); border-radius: 3px; vertical-align: middle; text-shadow: none; margin-right: var(--s2); }
.pricebox .now { font-weight: 900; }
.refnote { margin: var(--s2) 0 0; }

.pixpay .qr { display: block; width: 233px; max-width: 100%; height: auto; background: #fff; padding: var(--s2); border-radius: var(--s2); margin: 0 0 var(--s3); }
.pixbox { overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }

.suggest { position: relative; flex: 1 1 220px; }
.suggest input { width: 100%; }
.suggest ul { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + var(--s1)); margin: 0; padding: var(--s1); list-style: none;
  background: var(--panel, #1a1426); border: 1px solid var(--line-hi); border-radius: var(--s3); box-shadow: var(--glow); }
.suggest li a { display: block; padding: var(--s2) var(--s3); border-radius: var(--s2); color: var(--text, #eee); text-decoration: none; }
.suggest li a:hover, .suggest li a:focus { background: rgba(155, 92, 255, .22); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s4); }
.chip { padding: var(--s1) var(--s3); border: 1px solid var(--line-hi); border-radius: 999px; color: var(--silver); text-decoration: none; font-size: .9rem; }
.chip.on, .chip:hover { background: rgba(155, 92, 255, .25); color: #fff; }
.note ul { margin: var(--s2) 0 0; padding-left: var(--s4); }
.discordlink { font-weight: 700; }
.statusbar { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin: 0 0 var(--s4); }

/* ================= acabamento: ícones, botões padronizados, detalhes ================= */
.ic { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
      flex: none; vertical-align: -.2em; margin-right: var(--s2); }
.btn .ic { margin-right: 0; }
.top nav a .ic, .linkbtn .ic, .discordlink .ic { margin-right: var(--s1); opacity: .85; }
.top nav a { display: inline-flex; align-items: center; }
.ic-li { list-style: none; position: relative; padding-left: var(--s5); }
.ic-li > .ic { position: absolute; left: 0; top: .2em; color: var(--accent-hi); margin: 0; }
.note ul { padding-left: 0; }
.timeline li .ic { margin: 0 var(--s2) 0 0; color: var(--accent-hi); }
.timeline li.done .ic { color: var(--ok); }
.empty { text-align: center; padding: var(--s6) var(--s4); border: 1px dashed var(--line-hi); border-radius: var(--radius); color: var(--silver); }
.empty .ic { width: 3rem; height: 3rem; margin: 0 0 var(--s3); color: var(--accent-hi); stroke-width: 1.4; }

/* botões: um tamanho só. Dentro de painéis, ficam empilhados com a mesma largura e a mesma altura. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 46px; padding: 0 var(--s4);
       line-height: 1.15; white-space: normal; transition: filter .15s, transform .15s, box-shadow .15s; }
.btn.small { min-height: 46px; padding: 0 var(--s4); font-size: 1rem; }
.btn:active { transform: translateY(1px); }
.panel .btn { width: 100%; }
.panel form.inline { display: grid; gap: var(--s3); margin: 0 0 var(--s3); }
.panel p > .btn, .panel form > .btn { margin-bottom: 0; }
td .btn, .tablewrap .btn, .statusbar .btn, .top nav .btn, .panel td .btn, .panel .row .btn, .panel .statusbar .btn { width: auto; min-height: 36px; padding: 0 var(--s3); font-size: .875rem; }
p.row .btn, .row > a.btn { flex: 1 1 150px; min-height: 46px; width: auto; font-size: 1rem; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]), select { min-height: 46px; }
textarea { min-height: 92px; }

/* detalhes */
::selection { background: rgba(155, 92, 255, .45); color: #fff; }
a.card, .btn, .chip, .top nav a { transition: border-color .15s, box-shadow .15s, transform .15s, filter .15s, background .15s; }
:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
html { scrollbar-color: #3a2a66 #07040f; }
.hero img { transition: transform .6s ease; }
.hero:hover img { transform: scale(1.015); }
.pricebox .now, .price { text-shadow: 0 0 var(--s4) rgba(155, 92, 255, .35); }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } .hero:hover img { transform: none; } }
.errorpage { text-align: center; padding: var(--s7, 55px) var(--s4); }
.errorpage .ic { width: 4rem; height: 4rem; color: var(--accent-hi); stroke-width: 1.3; margin: 0 0 var(--s3); }
.errorpage .code { font-size: 3.4rem; font-weight: 900; font-style: italic; color: var(--silver); line-height: 1; margin: 0; }
.errorpage .row { justify-content: center; max-width: 420px; margin: var(--s4) auto 0; }
.legal { margin-top: var(--s2); }
.legal a { color: var(--muted); text-decoration: underline; }
.doc { max-width: 760px; }
.doc h2 { margin-top: var(--s5); }
.doc .draft { border: 1px dashed var(--line-hi); border-radius: var(--s3); padding: var(--s3) var(--s4); color: var(--silver); }
.doc ul { padding-left: var(--s5); }

/* ---------- vitrine estilo loja: carrossel + seções ---------- */
.showcase { display: grid; grid-template-columns: 1.618fr 1fr; gap: var(--s3); margin: 0 0 var(--s5); }
.sc-main { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line-hi); background: #000; }
.sc-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s; display: block; color: inherit; text-decoration: none; }
.sc-slide.on { opacity: 1; visibility: visible; }
.sc-slide img, .sc-fallback { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-fallback { display: flex; align-items: center; justify-content: center; font-size: 4rem; font-weight: 800; color: var(--silver); }
.sc-info { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s6) var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s2); background: linear-gradient(transparent, rgba(8, 4, 16, .92)); }
.sc-title { font-size: 1.5rem; color: #fff; line-height: 1.2; }
.sc-tag { align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; }
.sc-promo { background: #1f8a4c; }
.sc-best { background: #b8860b; }
.sc-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 56px; border: 0; background: rgba(8, 4, 16, .55); color: #fff; font-size: 1.8rem; cursor: pointer; border-radius: 6px; }
.sc-nav:hover, .sc-nav:focus-visible { background: var(--accent); }
.sc-nav.prev { left: 8px; } .sc-nav.next { right: 8px; }
/* Lateral do carrossel: tem exatamente a altura da imagem principal. Os jogos que não cabem ficam escondidos
   para baixo e "entram" rolando, um de cada vez, enquanto o carrossel troca de jogo. */
.sc-side { position: relative; min-height: 0; overflow: hidden; border-radius: var(--radius); }
.sc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s2);
           position: absolute; left: 0; right: 0; top: 0; transition: transform .7s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
.sc-list li { flex: none; display: flex; height: 70px; }
.sc-side::before, .sc-side::after { content: ""; position: absolute; left: 0; right: 0; height: 28px; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .4s; }
.sc-side::before { top: 0; background: linear-gradient(var(--bg), transparent); }
.sc-side::after { bottom: 0; background: linear-gradient(transparent, var(--bg)); }
.sc-side.more-up::before, .sc-side.more-down::after { opacity: 1; }
.sc-thumb { flex: 1; display: flex; align-items: center; gap: var(--s3); text-align: left; padding: var(--s2) var(--s3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel, #170f26); color: var(--silver); cursor: pointer; font: inherit; }
.sc-thumb img, .sc-mini { width: 96px; height: 60px; object-fit: cover; border-radius: 4px; flex: none; display: block; }
.sc-thumb small { display: block; color: var(--muted, #9a90b0); font-size: .75rem; }
.sc-thumb:hover, .sc-thumb.on { border-color: var(--accent); box-shadow: var(--glow); }
.sec { margin: var(--s5) 0 var(--s3); }
@media (max-width: 760px) { .showcase { grid-template-columns: 1fr; } .sc-side { overflow: visible; } .sc-side::before, .sc-side::after { display: none; } .sc-list { position: static; flex-direction: row; overflow-x: auto; transform: none !important; } .sc-list li { flex: 0 0 70%; height: auto !important; } .sc-title { font-size: 1.15rem; } }
@media (prefers-reduced-motion: reduce) { .sc-slide, .sc-list { transition: none; } }
/* No celular a lista ao lado do carrossel some (setas e troca automática continuam): os jogos sobem na tela. */
@media (max-width: 600px) { .sc-list { display: none; } .showcase { margin-bottom: var(--s4); } .hero { margin-bottom: var(--s3); } }

/* ---------- barra de compra fixa (só no celular, página do jogo) ---------- */
.buybar { display: none; }
.buy-anchor { display: block; scroll-margin-top: 34vh; }   /* ao chegar pelo botão, os avisos continuam à vista */
@media (max-width: 799px) {
  .buybar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
    display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
    padding: var(--s2) var(--s4) calc(var(--s2) + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 6, 20, .96); border-top: 1px solid var(--line-hi);
    box-shadow: 0 -1px var(--s4) rgba(139, 61, 255, .25);
    transition: transform .25s ease;
  }
  .buybar.away { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
  .bb-price { display: flex; align-items: center; gap: var(--s2); font-size: var(--t1); color: var(--silver); }
  body:has(.buybar) footer { padding-bottom: var(--s7); }
}

.danger-text { color: var(--danger); }

/* ---------- financeiro ---------- */
.kpis { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); margin: var(--s4) 0; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--s4); display: flex; flex-direction: column; gap: var(--s1); }
.kpi span { color: var(--muted); font-size: .85rem; }
.kpi strong { font-size: var(--t2); color: var(--silver); line-height: 1.15; }
.kpi small { color: var(--muted); }
.pos { color: var(--ok); } .neg { color: var(--danger); }
.kpi strong.pos { color: var(--ok); } .kpi strong.neg { color: var(--danger); }
.chartbox { padding: var(--s4); }
.chart { width: 100%; height: auto; display: block; }
.chart .bar { fill: var(--accent); } .chart .bar:hover { fill: var(--accent-hi); } .chart .bar.zero { fill: var(--line); }
.chart .axis { stroke: var(--line-hi); stroke-width: 1; }
.chart .lbl { fill: var(--muted); font-size: 11px; }

.waitpay { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border: 1px solid var(--line-hi); border-radius: var(--radius); background: var(--panel-2); }
.waitpay p { margin: var(--s1) 0 0; }
.spinner { flex: none; width: 21px; height: 21px; margin-top: 2px; border: 3px solid var(--line-hi); border-top-color: var(--accent-hi); border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ================= fila: limite de pedidos ================= */
.queuepanel { margin: 0 0 var(--s4); }
.queuerow { display: flex; gap: var(--s4) var(--s5); flex-wrap: wrap; align-items: end; justify-content: space-between; }
.queuerow > div { flex: 1 1 280px; }
.queuerow form { flex: 0 1 auto; }
.queuenum { margin: 0 0 var(--s2); font-size: var(--t1); }
.queuenum .badge { font-size: .8rem; vertical-align: middle; }
.queuebar { display: block; width: 100%; height: var(--s3); border: 1px solid var(--line); border-radius: 999px; background: #05030c; overflow: hidden; appearance: none; -webkit-appearance: none; }
.queuebar::-webkit-progress-bar { background: #05030c; }
.queuebar::-webkit-progress-value { background: var(--ok); }
.queuebar::-moz-progress-bar { background: var(--ok); }
.queuebar.full::-webkit-progress-value { background: var(--danger); }
.queuebar.full::-moz-progress-bar { background: var(--danger); }
.queuefull { margin-top: var(--s3); }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: grayscale(.4); }

/* ================= key: caixinha "estou ciente" ================= */
.ackbox { background: var(--panel-2); border: 1px solid var(--line-hi); border-radius: var(--s3); padding: var(--s3) var(--s4); }

/* ================= anúncios dos cantos ================= */
.ads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; justify-content: center; gap: var(--s3);
       width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 var(--s4) var(--s5); }
.ad { position: relative; display: flex; flex-direction: column; gap: var(--s1); background: var(--panel); border: 1px solid var(--line);
      border-radius: var(--s3); overflow: hidden; color: var(--text); text-decoration: none; font-size: .85rem; line-height: 1.35; }
a.ad:hover { border-color: var(--line-hi); box-shadow: var(--glow); text-decoration: none; }
.ad img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: cover; }
.ad-tag { position: absolute; top: var(--s1); right: var(--s1); background: rgba(7, 4, 15, .8); color: var(--muted); font-size: .65rem;
          letter-spacing: .04em; text-transform: uppercase; padding: 1px var(--s2); border-radius: 999px; }
.ad-title { padding: var(--s2) var(--s3) 0; color: var(--silver); }
.ad-tag + .ad-title { padding-top: var(--s4); }
.ad img + .ad-body { padding-top: var(--s2); }
.ad-body { padding: 0 var(--s3); color: var(--muted); }
.ad > :last-child:not(img) { padding-bottom: var(--s3); }
.adgrid { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: var(--s4); }
.adpreview { max-width: 170px; }
@media (min-width: 700px) { .ads { grid-template-columns: repeat(4, minmax(0, 200px)); } }
/* tela larga: os anúncios saem da faixa e vão para os cantos, fora da coluna do conteúdo (1100px).
   Cada lado é um trilho fixo: o de cima gruda no topo, o de baixo no pé, e nunca se sobrepõem. */
.ads-rail { display: contents; }
@media (min-width: 1480px) {
  .ads { display: block; padding: 0; max-width: none; }
  .ads-rail { display: flex; flex-direction: column; gap: var(--s3); position: fixed; top: 96px; bottom: var(--s4); width: 164px; z-index: 5; pointer-events: none; }
  .ads-esq { left: max(var(--s2), calc(50% - 550px - 176px)); }
  .ads-dir { right: max(var(--s2), calc(50% - 550px - 176px)); }
  .ads-rail .ad { pointer-events: auto; flex: 0 1 auto; min-height: 0; max-height: calc(50% - var(--s2)); }
  .ads-rail .ad-esq-base, .ads-rail .ad-dir-base { margin-top: auto; }
  .ads-rail .ad img { flex: 1 1 auto; min-height: 0; max-height: none; }
  .ads-rail .ad-title, .ads-rail .ad-body { flex: none; }
}
/* formulário já enviado: o botão mostra que está trabalhando */
form[data-sent] button[type=submit] { opacity: .6; cursor: progress; }

pre { overflow: auto; background: #05030c; border: 1px solid var(--line); border-radius: var(--s2); padding: var(--s3); line-height: 1.4; }

/* ================= saldo, avaliações e lucro ================= */
.top nav a.balance { color: var(--ok); font-weight: 600; }
.top nav a.balance strong { color: var(--silver); }
.balbig { font-size: var(--t3); font-weight: 800; margin: var(--s2) 0; color: var(--silver); }
.pos { color: var(--ok); }
.neg { color: var(--danger); }
.usebal { margin-bottom: var(--s3); }
.starsline { color: #ffc547; letter-spacing: .08em; }
.ratingline { margin: calc(-1 * var(--s2)) 0 var(--s3); }
.ratingline a { color: var(--text); text-decoration: none; }
.reviews { list-style: none; padding: 0; margin: var(--s3) 0; display: grid; gap: var(--s3); }
.reviews li { background: var(--panel); border: 1px solid var(--line); border-radius: var(--s3); padding: var(--s3) var(--s4); }
.reviews li p { margin: var(--s2) 0 0; color: var(--muted); }
.rate { border: 0; padding: 0; margin: 0 0 var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.rate legend { padding: 0; margin-bottom: var(--s2); float: left; width: 100%; }
.rate-opt { cursor: pointer; }
.rate-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rate-opt span { display: inline-block; padding: var(--s2) var(--s3); border: 1px solid var(--line-hi); border-radius: 999px; color: var(--silver); }
.rate-opt input:checked + span { background: rgba(255, 197, 71, .18); border-color: #ffc547; color: #ffc547; }
.rate-opt input:focus-visible + span { outline: 2px solid var(--accent-hi); outline-offset: 2px; }
.top nav a.balance strong { margin-left: var(--s1); }

/* ================= paginação da vitrine ================= */
.pager { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; justify-content: center; margin: var(--s4) 0; }
.pager .pg { min-width: 40px; height: 40px; padding: 0 var(--s3); display: inline-flex; align-items: center; justify-content: center;
             border: 1px solid var(--line-hi); border-radius: 999px; color: var(--silver); text-decoration: none; background: var(--panel); }
a.pg:hover { background: rgba(155, 92, 255, .25); color: #fff; }
.pager .pg.on { background: var(--accent); border-color: var(--accent-hi); color: #fff; font-weight: 700; }
.pager .pg.gap { border-color: transparent; background: transparent; min-width: 0; padding: 0 var(--s1); }
.pager .pgcount { flex-basis: 100%; text-align: center; }