:root {
  --escuro: #0a1410;
  --painel: rgba(10, 22, 17, .92);
  --linha: rgba(220, 255, 232, .14);
  --texto-claro: #f4f7f2;
  --texto-fraco: #a9bdb0;
  --grama: #2f8536;
  --limao: #c8f24a;
  --laranja: #ff8a2a;
  --titulo: 'Anton', Impact, sans-serif;
  --condensada: 'Bebas Neue', 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --texto: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { font-family: var(--texto); font-weight: 600; color: var(--texto-claro); background: var(--escuro); -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
#cena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#carregando { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; background: radial-gradient(ellipse at 50% 60%, #14402a, #08140f 72%); }
#carregando b { font: 400 30px var(--condensada); letter-spacing: .18em; color: var(--texto-fraco); text-transform: uppercase; }

/* ─── HUD ────────────────────────────────────────────────────────────────────── */
#hud { position: fixed; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .25s; }
body.jogando #hud { opacity: 1; }
.topo { position: absolute; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 4px; }
#placar { display: flex; align-items: center; gap: 8px; background: var(--painel); border: 1px solid var(--linha); border-radius: 12px; padding: 6px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
#placar i { width: 10px; height: 20px; border-radius: 3px; display: block; }
#placar b { font: 400 22px var(--condensada); letter-spacing: .08em; }
#placar u { font: 400 30px/1 var(--titulo); text-decoration: none; min-width: 22px; text-align: center; }
#placar s { opacity: .45; text-decoration: none; }
#placar.piscando { animation: pisca .4s steps(2) 6; }
@keyframes pisca { 50% { background: rgba(200, 242, 74, .35); } }
.tempo { display: flex; align-items: baseline; gap: 8px; background: rgba(8,16,12,.7); border-radius: 9px; padding: 2px 10px; }
.tempo span { font: 400 20px var(--condensada); letter-spacing: .1em; }
.tempo small { font-size: 11px; color: var(--texto-fraco); letter-spacing: .08em; text-transform: uppercase; }

#radar { position: absolute; left: max(14px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); border-radius: 10px; border: 1px solid var(--linha); box-shadow: 0 8px 24px rgba(0,0,0,.5); }
body.toque #radar { width: 120px; height: 78px; }

#forca { position: absolute; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: 190px; height: 10px; background: rgba(8,16,12,.7); border: 1px solid var(--linha); border-radius: 6px; overflow: hidden; }
#forca i { display: block; height: 100%; width: calc(var(--v, 0) * 100%); background: linear-gradient(90deg, var(--limao), var(--laranja)); transition: width .06s linear; }
#forca[data-tipo="passe"] i { background: linear-gradient(90deg, #8fe3ff, #3aa8ff); }

#aviso { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); text-align: center; text-shadow: 0 4px 22px rgba(0,0,0,.8); animation: entra .25s ease-out; }
#aviso b { display: block; font: 400 clamp(46px, 9vw, 104px)/0.95 var(--titulo); letter-spacing: .02em; color: #fff; }
#aviso small { display: block; font: 600 15px var(--texto); letter-spacing: .22em; text-transform: uppercase; color: var(--limao); }
@keyframes entra { from { transform: translateX(-50%) scale(.82); opacity: 0; } }

.dica-teclas { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 11.5px; color: rgba(244,247,242,.38); letter-spacing: .04em; white-space: nowrap; }
body.toque .dica-teclas { display: none; }
#bt-pausa { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); width: 42px; height: 42px; border: 0; border-radius: 12px; background: rgba(8,16,12,.6); color: #fff; font: 700 15px var(--texto); pointer-events: auto; display: none; }
body.toque #bt-pausa { display: block; }
.so-toque { display: none; }

/* ─── Telas ──────────────────────────────────────────────────────────────────── */
.tela { position: fixed; inset: 0; z-index: 10; display: grid; align-content: center; justify-items: center; gap: 14px; padding: max(24px, env(safe-area-inset-top)) 20px; overflow-y: auto; background: linear-gradient(105deg, rgba(6,14,10,.94) 0%, rgba(6,14,10,.78) 46%, rgba(6,14,10,.25) 100%); }
.tela.modal { background: rgba(4,10,7,.7); backdrop-filter: blur(6px); }
.cartao { background: var(--painel); border: 1px solid var(--linha); border-radius: 18px; padding: 22px; max-width: 560px; width: min(560px, 94vw); display: grid; gap: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
h1, h2 { margin: 0; }
h2 { font: 400 34px var(--condensada); letter-spacing: .06em; text-transform: uppercase; }
.marca { font: 600 12px var(--texto); letter-spacing: .38em; color: var(--texto-fraco); }
.logo { font: 400 clamp(72px, 15vw, 150px)/0.82 var(--titulo); letter-spacing: -.01em; background: linear-gradient(180deg, #fff 30%, var(--limao) 75%, var(--grama)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 26px rgba(0,0,0,.5)); }
.logo span { color: transparent; background: linear-gradient(180deg, var(--laranja), #ff3a3a); -webkit-background-clip: text; background-clip: text; }
.sub { margin: 0; max-width: 520px; text-align: center; color: var(--texto-fraco); font-size: 15px; }
.botoes { display: grid; gap: 8px; justify-items: center; width: min(420px, 92vw); }
.botoes button { width: 100%; border: 1px solid var(--linha); background: rgba(255,255,255,.06); border-radius: 12px; padding: 11px 16px; font: 400 20px var(--condensada); letter-spacing: .1em; text-transform: uppercase; }
.botoes button:hover { background: rgba(255,255,255,.12); }
.botoes .grande { border: 0; background: linear-gradient(90deg, var(--limao), var(--laranja)); color: #14200f; padding: 14px 18px; display: grid; gap: 1px; }
.botoes .grande b { font: 400 26px var(--condensada); letter-spacing: .12em; }
.botoes .grande small { font: 600 11.5px var(--texto); letter-spacing: .06em; text-transform: none; opacity: .75; }

.times { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; width: min(760px, 94vw); max-height: 42vh; overflow-y: auto; padding: 2px; }
.time { display: grid; justify-items: center; gap: 3px; padding: 9px 6px; border-radius: 12px; border: 1px solid var(--linha); background: rgba(255,255,255,.05); }
.time.escolhido { border-color: var(--limao); background: rgba(200,242,74,.14); }
.time b { font: 600 12px var(--texto); text-align: center; line-height: 1.15; }
.time small { font: 400 13px var(--condensada); letter-spacing: .14em; color: var(--texto-fraco); }
.camisa { width: 30px; height: 30px; border-radius: 6px; background: var(--p); box-shadow: inset 0 -9px 0 var(--c, #222); display: block; }
.camisa[data-padrao="listras-v"] { background: repeating-linear-gradient(90deg, var(--p) 0 5px, var(--s) 5px 10px); }
.camisa[data-padrao="faixas-h"] { background: linear-gradient(180deg, var(--p) 45%, var(--s) 45% 62%, var(--p) 62%); }
.camisa[data-padrao="faixas-v"] { background: linear-gradient(90deg, var(--p) 40%, var(--s) 40% 60%, var(--p) 60%); }
.rival { display: flex; align-items: center; gap: 10px; }
.rival > span { font: 600 12px var(--texto); letter-spacing: .2em; text-transform: uppercase; color: var(--texto-fraco); }
#bt-rival { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--linha); border-radius: 12px; padding: 7px 12px; }
#bt-rival small { color: var(--texto-fraco); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }

.op-linha { display: flex; align-items: center; gap: 12px; justify-content: space-between; width: min(420px, 92vw); }
.op-linha > span { font: 600 12.5px var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fraco); }
.segmento { display: flex; gap: 4px; background: rgba(0,0,0,.35); padding: 3px; border-radius: 10px; }
.segmento button { border: 0; background: transparent; border-radius: 8px; padding: 6px 11px; font: 400 15px var(--condensada); letter-spacing: .08em; }
.segmento button.escolhido { background: linear-gradient(90deg, var(--limao), var(--laranja)); color: #14200f; }

.placar-fim { display: flex; align-items: center; justify-content: center; gap: 12px; }
.placar-fim b { font: 400 58px/1 var(--titulo); }
.placar-fim span { font: 400 24px var(--condensada); letter-spacing: .1em; color: var(--texto-fraco); }
.placar-fim s { text-decoration: none; opacity: .4; }
.stats { display: grid; gap: 5px; }
.stats div { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 5px 8px; border-radius: 8px; background: rgba(255,255,255,.04); }
.stats div b:first-child { text-align: right; }
.stats div span { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-fraco); }
.ajuda { margin: 0; padding-left: 18px; display: grid; gap: 7px; font-size: 14.5px; color: var(--texto-fraco); }
.ajuda b { color: var(--texto-claro); }

@media (max-width: 720px) {
  .times { max-height: 34vh; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
  .topo { top: max(8px, env(safe-area-inset-top)); }
}

.campo { display: grid; gap: 4px; }
.campo span { font: 600 11.5px var(--texto); letter-spacing: .16em; text-transform: uppercase; color: var(--texto-fraco); }
.campo input, .entrar-sala input { background: rgba(0,0,0,.35); border: 1px solid var(--linha); border-radius: 10px; padding: 10px 12px; font: 600 16px var(--texto); color: var(--texto-claro); width: 100%; }
.entrar-sala { display: flex; gap: 8px; }
.entrar-sala input { text-transform: uppercase; letter-spacing: .3em; text-align: center; }
.entrar-sala button { border: 1px solid var(--linha); background: rgba(255,255,255,.06); border-radius: 10px; padding: 0 18px; font: 400 18px var(--condensada); letter-spacing: .1em; }
.status { min-height: 20px; font-size: 13.5px; color: var(--limao); text-align: center; }
.status.erro { color: #ff8a8a; }