/* ==========================================================================
   IEM ARCADE — folha de estilo unica
   Regra da casa: nenhum hex fora do :root. Se precisar de cor nova, cria token.
   ========================================================================== */
:root{
  --void:#07060D;
  --void-2:#0E0B1C;
  --void-3:#151032;
  --pink:#FF2E88;
  --pink-soft:#FF8FC6;
  --cyan:#25EFE4;
  --cyan-soft:#B4FFFA;
  --amber:#FFC53D;
  --amber-soft:#FFE08A;
  --ink:#FFFFFF;
  /* contraste subido de proposito: o texto de apoio estava ilegivel sobre o fundo */
  --ink-dim:rgba(255,255,255,.86);
  --ink-faint:rgba(255,255,255,.66);
  --bad:#FF5C6C;
  --ok:#3DFFAF;
  --radius:4px;
  --glow-pink:0 0 4px rgba(255,46,136,.9),0 0 14px rgba(255,46,136,.55),0 0 34px rgba(255,46,136,.28);
  --glow-cyan:0 0 4px rgba(37,239,228,.9),0 0 14px rgba(37,239,228,.5),0 0 34px rgba(37,239,228,.25);
  --glow-amber:0 0 4px rgba(255,197,61,.9),0 0 16px rgba(255,197,61,.45);
  --px:'Press Start 2P',ui-monospace,monospace;
  --sans:'Chakra Petch','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{
  font-family:var(--sans);color:var(--ink);background:var(--void);
  min-height:100svh;display:flex;flex-direction:column;overflow-x:hidden;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}

/* ---------- Fundo ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;background:
  radial-gradient(120% 80% at 50% 118%, rgba(255,46,136,.28), transparent 58%),
  radial-gradient(100% 70% at 50% 0%, rgba(37,239,228,.12), transparent 60%),
  linear-gradient(180deg,var(--void) 0%,var(--void-2) 52%,var(--void-3) 100%);
}
.bg::before{
  content:'';position:absolute;inset:0;opacity:.45;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 68% 12%, rgba(180,255,250,.85), transparent),
    radial-gradient(1.6px 1.6px at 34% 34%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.2px 1.2px at 88% 28%, rgba(255,143,198,.8), transparent),
    radial-gradient(1.3px 1.3px at 52% 8%, rgba(255,255,255,.75), transparent),
    radial-gradient(1.1px 1.1px at 22% 46%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 78% 42%, rgba(180,255,250,.7), transparent);
  animation:twinkle 5.5s steps(2,end) infinite;
}
@keyframes twinkle{0%,100%{opacity:.45}50%{opacity:.24}}
.bg .horizon{
  position:absolute;left:-50%;right:-50%;bottom:-14vh;height:62vh;opacity:.42;
  background-image:
    repeating-linear-gradient(90deg,transparent 0 3.4%,rgba(37,239,228,.34) 3.4% 3.55%),
    repeating-linear-gradient(0deg,transparent 0 5%,rgba(255,46,136,.30) 5% 5.35%);
  transform:perspective(46vh) rotateX(74deg);transform-origin:50% 0%;
  mask-image:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent 96%);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 62%,transparent 96%);
  animation:floor 5.5s linear infinite;
}
@media (min-width:900px){.bg .horizon{opacity:.26}}
@keyframes floor{from{background-position:0 0,0 0}to{background-position:0 0,0 -5.35%}}
.bg .sun{
  position:absolute;left:50%;bottom:38vh;width:min(340px,64vw);aspect-ratio:1;
  transform:translateX(-50%);border-radius:50%;opacity:.18;
  background:linear-gradient(180deg,var(--amber),var(--pink) 62%,transparent 63%);
  mask-image:repeating-linear-gradient(180deg,#000 0 74%,transparent 74% 78%,#000 78% 86%,transparent 86% 89%,#000 89% 94%,transparent 94% 96%,#000 96%);
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0 74%,transparent 74% 78%,#000 78% 86%,transparent 86% 89%,#000 89% 94%,transparent 94% 96%,#000 96%);
}

/* ---------- CRT ---------- */
.crt{position:fixed;inset:0;z-index:90;pointer-events:none}
.crt::before{content:'';position:absolute;inset:0;opacity:.38;mix-blend-mode:multiply;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,.3) 0 1px,transparent 1px 3px)}
.crt::after{content:'';position:absolute;inset:0;
  background:radial-gradient(130% 105% at 50% 50%, transparent 55%, rgba(0,0,0,.68) 100%)}
.crt .sweep{position:absolute;left:0;right:0;height:38vh;animation:sweep 7.5s linear infinite;
  background:linear-gradient(180deg,transparent,rgba(180,255,250,.05) 46%,rgba(255,255,255,.075) 50%,transparent)}
@keyframes sweep{from{top:-40vh}to{top:110vh}}

/* ---------- Tipografia ---------- */
.neon-pink{color:var(--pink-soft);text-shadow:var(--glow-pink)}
.neon-cyan{color:var(--cyan-soft);text-shadow:var(--glow-cyan)}
.neon-amber{color:var(--amber);text-shadow:var(--glow-amber)}
/* Press Start 2P nao tem glifo acentuado: texto do usuario NUNCA usa .px */
.user-txt{font-family:var(--sans) !important;font-weight:700;letter-spacing:.03em;display:block}
.blink{animation:blink 1.05s steps(1,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.12}}

/* ---------- Layout ---------- */
.shell{position:relative;z-index:10;flex:1;display:flex;flex-direction:column;width:100%}
.screen{flex:1;display:none;align-items:center;justify-content:center;
  padding:clamp(.8rem,3.4vw,2.2rem);
  /* folga no rodape: o botao de som e fixo no canto e estava cobrindo os CTAs */
  padding-bottom:calc(clamp(.8rem,3.4vw,2.2rem) + 4.6rem)}
.screen.on{display:flex;animation:screenIn .42s cubic-bezier(.2,.9,.3,1) both}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.985);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
#tela-caca,#tela-forca{align-items:flex-start}

.panel-arcade{
  position:relative;width:100%;max-width:600px;text-align:center;
  background:linear-gradient(180deg,rgba(21,16,50,.9),rgba(7,6,13,.96));
  border:2px solid rgba(37,239,228,.42);border-radius:var(--radius);
  padding:clamp(1.3rem,4.6vw,2.3rem);
  box-shadow:0 0 0 1px rgba(255,46,136,.2) inset,0 0 26px rgba(37,239,228,.18),0 24px 70px -24px #000;
}
.panel-arcade::before,.panel-arcade::after{content:'';position:absolute;width:10px;height:10px;border:2px solid var(--pink)}
.panel-arcade::before{top:-2px;left:-2px;border-right:0;border-bottom:0}
.panel-arcade::after{bottom:-2px;right:-2px;border-left:0;border-top:0}
.panel-arcade.largo{max-width:760px}

.logo-iem{display:block;width:min(190px,48vw);height:auto;aspect-ratio:680/273;object-fit:contain;margin:0 auto;
  filter:drop-shadow(0 0 12px rgba(37,239,228,.4))}
.rule-neon{width:100%;height:2px;margin:1.1rem 0;box-shadow:0 0 12px rgba(255,46,136,.6);
  background:linear-gradient(90deg,transparent,var(--pink),var(--cyan),transparent)}

.tag{display:inline-block;font-family:var(--px);font-size:.5rem;letter-spacing:.16em;margin-bottom:1.1rem;
  color:var(--cyan-soft);border:1px solid rgba(37,239,228,.5);padding:.5rem .8rem;text-shadow:var(--glow-cyan)}
h1.title{font-family:var(--px);font-size:clamp(1rem,4.6vw,1.6rem);line-height:1.5;margin-bottom:.9rem;
  color:var(--pink-soft);text-shadow:var(--glow-pink)}
h2.title-sm{font-family:var(--px);font-size:clamp(.68rem,2.9vw,.92rem);line-height:1.6;
  color:var(--cyan-soft);text-shadow:var(--glow-cyan)}
.lede{font-size:clamp(.98rem,2.7vw,1.1rem);line-height:1.75;color:var(--ink-dim);max-width:46ch;margin:0 auto}
.lede strong{color:var(--ink);font-weight:700}
.lede + .lede{margin-top:.85rem}

/* ---------- Campo ---------- */
.field{margin-top:1.7rem;text-align:left}
.mini-label{font-family:var(--px);font-size:.5rem;letter-spacing:.14em;color:var(--amber);
  text-shadow:var(--glow-amber);display:block;margin-bottom:.6rem;text-align:left}
input[type=text],input[type=password]{
  width:100%;padding:.95rem 1rem;font-family:var(--px);font-size:.72rem;line-height:1.6;
  color:var(--cyan-soft);background:rgba(7,6,13,.92);border:2px solid rgba(37,239,228,.42);
  border-radius:var(--radius);outline:none;text-shadow:0 0 8px rgba(37,239,228,.5);
  transition:border-color .18s,box-shadow .18s;
}
input::placeholder{color:rgba(255,255,255,.42);text-shadow:none}
input:focus{border-color:var(--cyan);box-shadow:var(--glow-cyan)}
input.err{border-color:var(--bad);box-shadow:0 0 14px rgba(255,92,108,.5);animation:shake .34s}
.hint{margin-top:.6rem;font-size:.9rem;line-height:1.5;color:var(--ink-faint);min-height:1.2rem}
.hint.err{color:var(--bad);font-weight:600}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ---------- Botoes ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6rem;width:100%;
  font-family:var(--px);font-size:.7rem;line-height:1.5;padding:1.05rem 1.2rem;cursor:pointer;
  border-radius:var(--radius);background:transparent;color:var(--cyan-soft);border:2px solid var(--cyan);
  text-shadow:var(--glow-cyan);box-shadow:var(--glow-cyan),inset 0 0 18px rgba(37,239,228,.12);
  transition:transform .14s,box-shadow .18s,background .18s;overflow:hidden;
}
.btn::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(180,255,250,.28),transparent)}
.btn:hover::after{animation:shine .7s ease}
@keyframes shine{to{transform:translateX(100%)}}
.btn:hover{background:rgba(37,239,228,.12);transform:translateY(-2px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.pink{color:var(--pink-soft);border-color:var(--pink);text-shadow:var(--glow-pink);
  box-shadow:var(--glow-pink),inset 0 0 18px rgba(255,46,136,.12)}
.btn.pink:hover{background:rgba(255,46,136,.14)}
.btn.ghost{border-color:rgba(255,255,255,.34);color:var(--ink-dim);text-shadow:none;box-shadow:none;font-size:.58rem}
.btn.ghost:hover{background:rgba(255,255,255,.09);color:var(--ink)}
.btn-row{margin-top:1.5rem;display:flex;flex-direction:column;gap:.75rem}

/* ---------- COMO JOGAR (destaque forte, pedido do Victor) ---------- */
.comojogar{
  margin-top:1.5rem;text-align:left;
  border:2px solid var(--amber);border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,197,61,.16),rgba(255,197,61,.06));
  box-shadow:0 0 18px rgba(255,197,61,.28),inset 0 0 30px rgba(255,197,61,.05);
  padding:clamp(1rem,3.4vw,1.4rem);
}
.comojogar > .cabeca{
  display:flex;align-items:center;gap:.6rem;margin-bottom:1rem;
  font-family:var(--px);font-size:.6rem;letter-spacing:.12em;
  color:var(--amber);text-shadow:var(--glow-amber);
}
.comojogar ol{list-style:none;counter-reset:passo;display:flex;flex-direction:column;gap:.85rem}
.comojogar ol li{
  counter-increment:passo;display:flex;gap:.8rem;align-items:flex-start;
  font-size:1.02rem;line-height:1.6;color:var(--ink);
}
.comojogar ol li::before{
  content:counter(passo);flex:none;width:1.7rem;height:1.7rem;margin-top:.1rem;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:.6rem;color:var(--void);
  background:var(--amber);border-radius:var(--radius);box-shadow:var(--glow-amber);
}
.comojogar ol li b{color:var(--amber-soft);font-weight:700}
.comojogar .aviso{
  margin-top:1rem;padding-top:.9rem;border-top:1px solid rgba(255,197,61,.35);
  font-size:.95rem;line-height:1.55;color:var(--ink-dim);
}
.comojogar .aviso b{color:var(--amber-soft)}

/* versao compacta que fica ao lado do tabuleiro */
.tip-box{
  margin-top:1.1rem;padding:.95rem 1rem;text-align:left;
  border:2px solid var(--amber);border-left-width:5px;border-radius:var(--radius);
  background:rgba(255,197,61,.13);
  font-size:.95rem;line-height:1.6;color:var(--ink);
}
.tip-box b{display:block;font-family:var(--px);font-size:.52rem;letter-spacing:.1em;
  color:var(--amber);text-shadow:var(--glow-amber);margin-bottom:.6rem}

/* ---------- SELECT ---------- */
.cartridges{display:grid;gap:.85rem;margin-top:1.6rem;text-align:left}
.cart{
  position:relative;display:flex;align-items:center;gap:.95rem;padding:1rem 1.1rem;cursor:pointer;width:100%;
  background:rgba(7,6,13,.75);border:2px solid rgba(255,255,255,.18);border-radius:var(--radius);
  transition:transform .16s,border-color .2s,box-shadow .2s;overflow:hidden;text-align:left;
  font-family:inherit;color:inherit;
}
.cart[data-state="open"]{border-color:var(--pink);box-shadow:var(--glow-pink)}
.cart[data-state="open"]:hover{transform:translateX(5px)}
.cart[data-state="done"]{border-color:var(--cyan);box-shadow:0 0 12px rgba(37,239,228,.35)}
.cart[data-state="locked"]{cursor:not-allowed;opacity:.55;filter:grayscale(.5)}
.cart .num{font-family:var(--px);font-size:1.05rem;flex:none;width:2.6rem;text-align:center}
.cart[data-state="open"] .num{color:var(--pink-soft);text-shadow:var(--glow-pink)}
.cart[data-state="done"] .num{color:var(--cyan-soft);text-shadow:var(--glow-cyan)}
.cart[data-state="locked"] .num{color:var(--ink-faint)}
.cart .meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:.35rem}
.cart .nm{display:block;font-family:var(--sans);font-weight:700;font-size:1rem;
  letter-spacing:.05em;line-height:1.35;color:var(--ink);text-transform:uppercase}
.cart .sb{display:block;font-size:.88rem;line-height:1.45;color:var(--ink-faint)}
.cart .sig{font-family:var(--px);font-size:.5rem;flex:none;letter-spacing:.1em}
.cart[data-state="open"] .sig{color:var(--pink-soft);text-shadow:var(--glow-pink)}
.cart[data-state="done"] .sig{color:var(--cyan-soft);text-shadow:var(--glow-cyan)}
.cart[data-state="locked"] .sig{color:var(--ink-faint)}
.cart[data-state="locked"]::after{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,transparent 0 9px,rgba(255,255,255,.05) 9px 18px)}

/* ---------- HUD ---------- */
.game-wrap{width:100%;max-width:1120px;margin:0 auto}
.hud{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding-bottom:1rem;border-bottom:2px solid rgba(255,46,136,.32);margin-bottom:1.3rem}
.hud .who{display:flex;align-items:center;gap:.8rem;min-width:0}
.hud .logo-mini{display:block;height:clamp(26px,6vw,34px);width:auto;aspect-ratio:680/273;object-fit:contain;flex:none;
  filter:drop-shadow(0 0 8px rgba(37,239,228,.4))}
.hud .p1{font-family:var(--px);font-size:.48rem;line-height:1.7;color:var(--ink-faint)}
.hud .p1 strong{display:block;font-family:var(--sans);font-weight:700;letter-spacing:.04em;
  color:var(--cyan-soft);font-size:1rem;text-shadow:var(--glow-cyan);margin-top:.3rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:42vw}
.stats{display:flex;gap:.6rem;align-items:stretch}
.stat{border:2px solid rgba(37,239,228,.34);border-radius:var(--radius);padding:.5rem .75rem;text-align:center;
  background:rgba(7,6,13,.7);min-width:84px}
.stat .k{display:block;font-family:var(--px);font-size:.4rem;letter-spacing:.1em;color:var(--amber);text-shadow:var(--glow-amber)}
.stat .v{display:block;font-family:var(--px);font-size:.78rem;margin-top:.45rem;color:var(--cyan-soft);
  text-shadow:var(--glow-cyan);font-variant-numeric:tabular-nums}
.stat.perigo{border-color:var(--bad);background:rgba(255,92,108,.16)}
.stat.perigo .v{color:var(--bad);text-shadow:0 0 12px rgba(255,92,108,.7)}

.icon-btn{
  flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:.8rem;cursor:pointer;border-radius:var(--radius);
  background:rgba(7,6,13,.7);border:2px solid rgba(255,197,61,.5);color:var(--amber);
  text-shadow:var(--glow-amber);transition:.16s;
}
.icon-btn:hover{background:rgba(255,197,61,.16);transform:translateY(-2px)}
.hud-tools{display:flex;gap:.5rem;align-items:center}

.layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:clamp(.9rem,2.6vw,1.8rem);align-items:start}
@media (max-width:900px){.layout{grid-template-columns:1fr}}

/* ---------- Caca-palavras ---------- */
.board-shell{
  width:100%;max-width:min(620px,72vh);margin:0 auto;padding:clamp(.45rem,1.5vw,.85rem);
  background:rgba(7,6,13,.86);border:2px solid rgba(37,239,228,.48);border-radius:var(--radius);
  box-shadow:0 0 22px rgba(37,239,228,.2),inset 0 0 40px rgba(37,239,228,.05);
}
@media (max-width:900px){.board-shell{max-width:540px}}
#grade{display:grid;gap:2px;touch-action:none;user-select:none;-webkit-user-select:none}
.cell{
  aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;cursor:pointer;
  font-family:var(--sans);font-weight:700;font-size:clamp(.78rem,2.2vw,1.15rem);
  color:var(--ink-dim);background:rgba(255,255,255,.07);border-radius:2px;
  transition:background .12s,color .12s,transform .12s,box-shadow .12s;
}
.cell:hover{background:rgba(37,239,228,.18);color:var(--ink)}
.cell.anchor{background:var(--pink);color:var(--void);transform:scale(1.06);box-shadow:var(--glow-pink);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1.06)}50%{transform:scale(1.14)}}
.cell.sel{background:rgba(255,46,136,.6);color:var(--ink)}
.cell.found{background:var(--cyan);color:var(--void);box-shadow:var(--glow-cyan);animation:pop .34s cubic-bezier(.2,1.5,.4,1)}
.cell.found.sel{background:var(--cyan)}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.34)}100%{transform:scale(1)}}
.cell.bad{background:var(--bad);color:var(--ink);animation:shake .26s}

.side{background:rgba(7,6,13,.8);border:2px solid rgba(255,46,136,.34);border-radius:var(--radius);padding:1.1rem}
.side h3{font-family:var(--px);font-size:.52rem;letter-spacing:.13em;color:var(--amber);
  text-shadow:var(--glow-amber);margin-bottom:.8rem}
.side h3.two{margin-top:1.3rem}
ul.words{list-style:none;display:flex;flex-direction:column;gap:.45rem}
@media (max-width:900px){ul.words{flex-direction:row;flex-wrap:wrap}}
ul.words li{display:flex;align-items:center;gap:.55rem;padding:.6rem .75rem;border-radius:var(--radius);
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  font-family:var(--sans);font-weight:700;font-size:.92rem;letter-spacing:.07em;
  color:var(--ink-dim);transition:.25s}
ul.words li .dot{width:8px;height:8px;flex:none;background:rgba(255,255,255,.4);transition:.25s}
ul.words li.ok{background:rgba(37,239,228,.18);border-color:var(--cyan);color:var(--cyan-soft);
  text-shadow:var(--glow-cyan);text-decoration:line-through}
ul.words li.ok .dot{background:var(--cyan);box-shadow:var(--glow-cyan)}

/* ---------- Forca ---------- */
.arena{
  display:grid;grid-template-columns:minmax(170px,220px) minmax(0,1fr);
  gap:clamp(1.2rem,4vw,2.2rem);align-items:center;
  background:rgba(7,6,13,.8);border:2px solid rgba(37,239,228,.4);
  border-radius:var(--radius);padding:clamp(1.1rem,3.4vw,1.9rem);
  box-shadow:0 0 22px rgba(37,239,228,.16);
}
@media (max-width:780px){.arena{grid-template-columns:1fr;gap:1.3rem;justify-items:center}}
.forca{width:100%;max-width:210px;height:auto;justify-self:center}
@media (max-width:780px){.forca{max-width:min(158px,44vw)}}
.forca .madeira{stroke:var(--cyan);stroke-width:6;stroke-linecap:round;fill:none;
  filter:drop-shadow(0 0 6px rgba(37,239,228,.75))}
.forca .corda{stroke:var(--ink-faint);stroke-width:4;stroke-linecap:round;fill:none}
.forca .boneco{
  stroke:var(--pink);stroke-width:6;stroke-linecap:round;fill:none;
  filter:drop-shadow(0 0 8px rgba(255,46,136,.9));
  opacity:0;transform:scale(.86);transform-origin:130px 110px;
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,1.3,.4,1);
}
.forca .boneco.on{opacity:1;transform:scale(1)}

.painel-forca{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.2rem}
.dica-forca{
  font-size:1rem;line-height:1.6;color:var(--ink);text-align:left;max-width:400px;
  border:2px solid var(--amber);border-left-width:5px;border-radius:var(--radius);
  background:rgba(255,197,61,.13);padding:.85rem 1rem;
}
.dica-forca b{display:block;font-family:var(--px);font-size:.5rem;letter-spacing:.1em;
  color:var(--amber);text-shadow:var(--glow-amber);margin-bottom:.5rem}
/* uma linha so, sempre: as letras encolhem conforme a palavra cresce.
   ECOSSISTEMA tem 11 letras e quebrava feio em 8+3 no celular. */
.palavra{display:flex;gap:clamp(.15rem,1.2vw,.5rem);flex-wrap:nowrap;
  justify-content:center;width:100%;max-width:560px}
.letra{
  flex:1 1 0;min-width:0;max-width:52px;
  aspect-ratio:5/6;height:auto;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:700;
  font-size:clamp(.85rem,4.2vw,1.9rem);
  color:var(--cyan-soft);border-bottom:3px solid rgba(37,239,228,.55);
  background:rgba(255,255,255,.07);border-radius:6px 6px 2px 2px;
}
/* palavra longa: reduz mais a fonte pra letra nao encostar na borda */
.palavra[data-n="10"] .letra,
.palavra[data-n="11"] .letra,
.palavra[data-n="12"] .letra{font-size:clamp(.75rem,3.4vw,1.6rem)}
.letra span{opacity:0;transform:translateY(6px);transition:.25s}
.letra.on{background:rgba(37,239,228,.2);border-bottom-color:var(--cyan);text-shadow:var(--glow-cyan)}
.letra.on span{opacity:1;transform:translateY(0)}
.letra.revelada{color:var(--bad);border-bottom-color:var(--bad);background:rgba(255,92,108,.16);
  text-shadow:0 0 12px rgba(255,92,108,.7)}
.teclado{display:flex;flex-wrap:wrap;gap:clamp(.25rem,1.1vw,.42rem);justify-content:center;max-width:540px}
.key{
  width:clamp(32px,7.9vw,42px);height:clamp(38px,9vw,46px);
  font-family:var(--sans);font-weight:700;font-size:clamp(.9rem,2.6vw,1.05rem);
  color:var(--void);background:var(--ink);border:none;border-radius:5px;cursor:pointer;transition:.15s;
}
.key:hover:not(:disabled){background:var(--cyan-soft);transform:translateY(-2px)}
.key:disabled{cursor:default;transform:none}
.key.acerto{background:var(--cyan);color:var(--void);box-shadow:var(--glow-cyan)}
.key.erro{background:rgba(255,255,255,.12);color:rgba(255,255,255,.42)}

/* ---------- Resultado ---------- */
.trophy{font-family:var(--px);font-size:clamp(1.05rem,4.8vw,1.6rem);color:var(--amber);
  text-shadow:var(--glow-amber);animation:blink 1.4s steps(1,end) infinite;margin-bottom:1rem}
.trophy.falhou{color:var(--bad);text-shadow:0 0 12px rgba(255,92,108,.8);animation:none}
.result-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.6rem;margin-top:1.5rem}
@media (max-width:520px){.result-grid{grid-template-columns:1fr 1fr}}
.aviso-proximo{
  margin-top:1.5rem;padding:1.15rem 1rem;text-align:left;
  border:2px dashed var(--cyan);border-radius:var(--radius);background:rgba(37,239,228,.1);
}
.aviso-proximo .k{display:block;font-family:var(--px);font-size:.5rem;letter-spacing:.12em;
  color:var(--cyan-soft);text-shadow:var(--glow-cyan);margin-bottom:.7rem}
.aviso-proximo p{font-size:1rem;line-height:1.6;color:var(--ink)}
.aviso-proximo p + p{margin-top:.6rem}
.aviso-proximo b{color:var(--cyan-soft)}
.chips{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center}
.chips span{font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.05em;
  padding:.45rem .7rem;border-radius:var(--radius);
  border:1px solid var(--cyan);color:var(--cyan-soft);background:rgba(37,239,228,.12)}

/* ---------- Ranking ---------- */
.rank{margin-top:1.4rem;text-align:left;display:flex;flex-direction:column;gap:.4rem}
.rank .linha{
  display:flex;align-items:center;gap:.8rem;padding:.7rem .85rem;border-radius:var(--radius);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
}
.rank .linha.eu{border-color:var(--amber);background:rgba(255,197,61,.16);box-shadow:0 0 14px rgba(255,197,61,.28)}
.rank .pos{font-family:var(--px);font-size:.62rem;color:var(--amber);text-shadow:var(--glow-amber);
  flex:none;width:2.4rem;text-align:right}
.rank .nome{flex:1;min-width:0;font-weight:700;font-size:.98rem;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank .val{font-family:var(--px);font-size:.5rem;color:var(--cyan-soft);text-shadow:var(--glow-cyan);flex:none}
.rank-vazio{font-size:.95rem;color:var(--ink-faint);padding:.8rem 0}

footer{position:relative;z-index:10;text-align:center;padding:1.2rem 1rem 1.6rem;
  font-family:var(--px);font-size:.45rem;line-height:1.9;color:var(--ink-faint)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Som ---------- */
.som{position:fixed;right:.9rem;bottom:.9rem;z-index:95;
  width:46px;height:46px;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;
  background:rgba(7,6,13,.9);border:2px solid var(--cyan);color:var(--cyan-soft);
  box-shadow:var(--glow-cyan);transition:.16s}
.som:hover{transform:scale(1.08)}
.som[data-mudo="1"]{border-color:rgba(255,255,255,.3);color:var(--ink-faint);box-shadow:none}

/* ---------- Toast ---------- */
.toast{position:fixed;left:50%;bottom:1.2rem;transform:translateX(-50%) translateY(140%);
  z-index:99;width:max-content;max-width:min(460px,92vw);padding:.9rem 1.1rem;border-radius:var(--radius);
  background:rgba(7,6,13,.97);border:2px solid var(--amber);color:var(--ink);
  font-size:.95rem;line-height:1.5;box-shadow:0 0 20px rgba(255,197,61,.4);
  /* sem isso a caixa vazia aparecia espiando na borda de baixo */
  visibility:hidden;opacity:0;pointer-events:none;
  transition:transform .3s cubic-bezier(.2,1.2,.3,1),opacity .25s,visibility .25s}
.toast.on{transform:translateX(-50%) translateY(0);visibility:visible;opacity:1}
.toast.ruim{border-color:var(--bad);box-shadow:0 0 20px rgba(255,92,108,.4)}

/* ---------- Acessibilidade ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .crt .sweep,.bg::before,.bg .horizon{display:none}
  .screen.on{animation:none}
}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}

/* ---------- Barra de progresso do hub ---------- */
.progresso-wrap{margin-top:1.4rem;display:flex;flex-direction:column;gap:.5rem;align-items:center}
.progresso-barra-fundo{width:100%;height:10px;border:2px solid rgba(37,239,228,.45);
  border-radius:var(--radius);background:rgba(7,6,13,.8);overflow:hidden}
.progresso-barra{height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--pink));
  box-shadow:var(--glow-cyan);transition:width .5s cubic-bezier(.2,1,.3,1)}
.progresso-txt{font-family:var(--px);font-size:.5rem;letter-spacing:.1em;
  color:var(--amber);text-shadow:var(--glow-amber)}

/* ---------- Titulo de secao do placar ---------- */
.rank-titulo{font-family:var(--px);font-size:.5rem;letter-spacing:.12em;margin-top:1.6rem;
  color:var(--cyan-soft);text-shadow:var(--glow-cyan);text-align:left}

/* ---------- Selo "?" do bloco COMO JOGAR ---------- */
.comojogar > .cabeca > span:first-child{
  flex:none;width:1.6rem;height:1.6rem;display:flex;align-items:center;justify-content:center;
  background:var(--amber);color:var(--void);border-radius:var(--radius);box-shadow:var(--glow-amber)}

/* --------------------------------------------------------------------------
   Press Start 2P nao tem acento nem simbolo (o, ., ~). Todo rotulo que
   precisa desses caracteres usa a sans em caixa alta espacada: mantem a
   cara de rotulo de arcade sem cair no fallback no meio da palavra.
   -------------------------------------------------------------------------- */
.aviso-proximo .k,
.rank-titulo,
.rank .pos,
.rank .val,
.stat .v.ordinal{
  font-family:var(--sans) !important;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.aviso-proximo .k{font-size:.82rem}
.rank-titulo{font-size:.85rem}
.rank .pos{font-size:1rem}
.rank .val{font-size:.82rem;letter-spacing:.04em;text-transform:none}
.stat .v.ordinal{font-size:1.1rem;letter-spacing:.02em}

/* o botao de som e fixo no canto: o rodape nao pode passar por baixo dele */
footer{padding-right:4.2rem;padding-left:1rem}