:root{--cream:#eee5d6;--paper:#f5edde;--ink:#3d2417;--brown:#56331f;--muted:#7a5d4b;--orange:#c66b27;--line:#e8c99f;--green:#3f7a4c;--shadow:0 18px 50px rgba(76,43,20,.13)}
[data-theme="night"]{--cream:#0f1520;--paper:#171f2c;--ink:#f5e2c4;--brown:#f0c896;--muted:#bba68a;--orange:#e8964f;--line:#2e3a4b;--green:#7fc58e;--shadow:0 18px 50px rgba(0,0,0,.35)}
*{box-sizing:border-box}
html{background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}
body{margin:0;min-height:100vh;background:var(--cream)}
button,a,input{font:inherit}
a{color:var(--orange)}
:root:not([data-theme="night"]) a{color:#9c4f18}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--paper);padding:8px 12px;border-radius:10px;z-index:20}
.skip-link:focus{left:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.topbar{min-height:72px;padding:10px max(14px,calc((100vw - 900px)/2));display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);background:var(--paper)}
.brand{color:var(--ink)!important;text-decoration:none;display:flex;align-items:center;gap:10px;min-width:0}
.brand-mark{width:44px;height:44px;border:2px solid var(--brown);border-radius:50%;display:grid;place-items:center;font-size:22px;flex:none}
.brand b{font-size:19px;display:block;white-space:nowrap}
.brand small{font-weight:800;letter-spacing:2px;font-size:8px;color:var(--muted)}
.top-actions{display:flex;gap:6px;align-items:center}
.icon-button{width:40px;height:40px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;cursor:pointer}
.icon-button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.streak{display:flex;flex-direction:column;align-items:center;padding:3px 8px;border:1px solid var(--line);border-radius:12px;min-width:62px}
.streak small{font-size:8px;font-weight:900;letter-spacing:1.3px;color:var(--muted)}
.streak strong{font-size:16px}
main{width:min(900px,calc(100% - 24px));margin:0 auto;padding:16px 0 10px}
.console{width:min(100%,820px);margin:0 auto;padding:14px;border-radius:22px;background:linear-gradient(#3a3a3a,#1e1e1e);box-shadow:var(--shadow),inset 0 2px 0 rgba(255,255,255,.08)}
.console-label{display:flex;justify-content:space-between;align-items:center;color:#d6d6d6;font-size:10px;font-weight:900;letter-spacing:2.5px;margin:2px 4px 10px}
.console-label i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#5fd17a;box-shadow:0 0 8px #5fd17a;margin-right:6px;vertical-align:middle}
.stage{position:relative;width:100%;aspect-ratio:8/5;margin:0 auto;border-radius:10px;overflow:hidden;background:#141414;touch-action:manipulation;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100%;height:100%;object-fit:contain;cursor:pointer;outline:none;image-rendering:pixelated;image-rendering:crisp-edges}
canvas:focus-visible{outline:3px solid #ffd166;outline-offset:-3px}

/* telas sobre o campo, no estilo fliperama */
.overlay{--go-text:#f3e5cd;--go-dim:#c4ad92;--go-yel:#ffd166;--go-org:#f08a3c;position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:8px;overflow-y:auto;text-align:center;padding:16px;color:var(--go-text);
  background:radial-gradient(ellipse at 50% 30%,rgba(70,40,20,.5),transparent 70%),repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 3px),rgba(22,16,12,.86);font-family:"Trebuchet MS",Arial,Helvetica,sans-serif}
.overlay[hidden]{display:none}
.overlay--soft{background:rgba(22,16,12,.72)}
.overlay h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.overlay .px-text{display:block;margin:0 auto;max-width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.overlay .kicker{font-size:10px;font-weight:900;letter-spacing:3px;color:var(--go-dim)}
.overlay .sub{margin:0;font-size:15px;max-width:480px}
.st-title{display:flex;flex-direction:column;align-items:center;gap:4px;animation:go-drop .5s steps(6) both}
.mode-row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.arcade-btn{display:inline-flex;flex-direction:column;align-items:center;gap:3px;min-width:170px;padding:12px 16px 10px;border:0;border-radius:0;text-transform:uppercase;letter-spacing:1.2px;font-size:13px;font-weight:900;cursor:pointer;transition:transform .06s,filter .1s;color:#1c0e05}
.arcade-btn small{font-size:10px;letter-spacing:.5px;font-weight:800;text-transform:none;opacity:.85}
.arcade-btn--org{background:var(--go-org);box-shadow:inset -4px -4px 0 #a64c12,inset 4px 4px 0 #ffb27a,0 0 0 3px #0c0806,0 5px 0 3px #0c0806}
.arcade-btn--blue{background:#3fa3b5;color:#06171b;box-shadow:inset -4px -4px 0 #20707f,inset 4px 4px 0 #8fd8e4,0 0 0 3px #0c0806,0 5px 0 3px #0c0806}
.arcade-btn--green{background:#4fbf6b;color:#06180b;box-shadow:inset -4px -4px 0 #2b7d41,inset 4px 4px 0 #9be8ad,0 0 0 3px #0c0806,0 5px 0 3px #0c0806}
.arcade-btn--dark{background:#3b2b20;color:var(--go-text);box-shadow:inset -4px -4px 0 #24190f,inset 4px 4px 0 #5a4333,0 0 0 3px #0c0806,0 5px 0 3px #0c0806}
.arcade-btn.small{min-width:0;padding:8px 14px;font-size:11px}
.arcade-btn:hover{filter:brightness(1.1)}
.arcade-btn:active{transform:translateY(4px);box-shadow:inset 4px 4px 0 rgba(0,0,0,.3),0 0 0 3px #0c0806,0 1px 0 3px #0c0806}
.arcade-btn:focus-visible{outline:3px solid var(--go-yel);outline-offset:5px}
.arcade-btn:disabled{opacity:.55;cursor:default}
.field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--go-dim);text-transform:uppercase;letter-spacing:1px}
.field input,.join-row input{background:#0e0a07;color:var(--go-yel);border:3px solid #4b3324;border-radius:0;padding:9px 12px;font-weight:900;font-size:17px;letter-spacing:2px;text-align:center;min-width:0}
.field input:focus,.join-row input:focus{outline:none;border-color:var(--go-org)}
.field input::placeholder,.join-row input::placeholder{color:#7d6a57;letter-spacing:1px}
.join-row{display:flex;gap:10px;align-items:stretch;margin-top:6px}
.join-row input{width:130px;text-transform:uppercase}
.join-row .arcade-btn{min-width:110px}
.status{margin:0;font-size:14px;min-height:1.3em;color:var(--go-yel);max-width:520px}
.status.big{font-size:17px}
.room-link{margin:0;font-size:12px;color:var(--go-dim);word-break:break-all}
.final-names{margin:0;font-weight:900;letter-spacing:1px;text-transform:uppercase;color:var(--go-dim)}
.final-text{margin:0;font-size:15px}
.go-banner{animation:go-drop .45s steps(6) both}
@keyframes go-drop{from{transform:translateY(-24px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.st-title,.go-banner{animation:none}}

.about{max-width:720px;margin:30px auto 10px;line-height:1.6;font-size:16px}
.about h2{font-size:22px;margin:24px 0 8px}
.site-footer{width:min(900px,calc(100% - 24px));margin:24px auto 0;padding:20px 0 32px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;color:var(--muted);font-size:14px}

@media (max-width:560px){
  .console{padding:8px;border-radius:16px}.console-label{font-size:8px;margin-bottom:6px}
  .stage{aspect-ratio:1/1}
  .brand b{font-size:15px}.brand small{display:none}.brand-mark{width:36px;height:36px;font-size:18px}
  .streak{display:none}.icon-button{width:36px;height:36px}
  .overlay{padding:10px;gap:6px}.overlay .sub,.overlay .kicker{display:none}
  .arcade-btn{min-width:150px;padding:10px 12px 9px;font-size:12px}
}

/* escolha da seleção */
.team-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;width:min(100%,640px)}
.team-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 6px;border:0;border-radius:0;cursor:pointer;background:#2a1e16;color:#f3e5cd;font-weight:900;font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  box-shadow:inset 0 -5px 0 var(--kit),inset 0 -6px 0 var(--kit2),0 0 0 3px #0c0806;transition:transform .06s,filter .1s}
.team-btn .team-badge{width:54px;height:54px;image-rendering:pixelated}
.team-btn .team-flag{width:24px;height:16px;image-rendering:pixelated;box-shadow:0 0 0 2px #0c0806;margin-top:-2px}
.team-btn small{font-size:9px;font-weight:700;opacity:.75;letter-spacing:0;text-transform:none;margin-top:-2px}
.team-btn:hover{filter:brightness(1.15);transform:translateY(-2px)}
.team-btn:focus-visible,.team-btn[aria-pressed="true"]{outline:3px solid #ffd166;outline-offset:3px}
@media (max-width:560px){.team-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.team-btn{font-size:8px;padding:5px 2px 6px;gap:2px}.team-btn .team-badge{width:32px;height:32px}.team-btn .team-flag{width:16px;height:11px}.team-btn small{display:none}}

/* celular deitado: o campo cabe inteiro na altura da tela */
@media (orientation:landscape) and (max-height:520px){
  .topbar{min-height:48px;padding-top:4px;padding-bottom:4px}.brand-mark{width:32px;height:32px;font-size:16px}.brand small{display:none}
  .streak{display:none}.icon-button{width:34px;height:34px}
  main{padding-top:6px}
  .console{padding:6px;border-radius:14px}.console-label{display:none}
  .stage{max-height:calc(100svh - 70px);aspect-ratio:auto;height:calc(100svh - 70px)}
  .overlay{padding:8px;gap:5px}.overlay .sub,.overlay .kicker{display:none}
  .arcade-btn{padding:8px 12px 7px;font-size:11px;min-width:140px}
  .team-btn .team-badge{width:30px;height:30px}.team-btn{font-size:8px;padding:4px 2px 5px;gap:2px}.team-grid{gap:6px}.team-btn .team-flag{width:16px;height:11px}.team-btn small{display:none}
}

/* Copa Salsicha: botão dourado e chaveamento */
.arcade-btn--gold{background:#f2c230;color:#1c0e05;box-shadow:inset -4px -4px 0 #b88a12,inset 4px 4px 0 #fff0a0,0 0 0 3px #0c0806,0 5px 0 3px #0c0806}
.bracket{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:min(100%,640px);align-items:center}
.bk-col{display:flex;flex-direction:column;justify-content:space-around;gap:8px;height:100%}
.bk-col h3{margin:0;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--go-dim)}
.bk-match{background:#2a1e16;box-shadow:0 0 0 2px #0c0806;padding:3px 4px;display:flex;flex-direction:column;gap:2px}
.bk-match.next{box-shadow:0 0 0 2px #ffd166}
.bk-team{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:800;color:#f3e5cd;min-height:16px;text-align:left}
.bk-team span{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-team b{color:#ffd166;font-size:12px}
.bk-team.lost{opacity:.45}
.bk-team.me span{color:#ffd166}
.bk-flag{width:18px;height:12px;image-rendering:pixelated;box-shadow:0 0 0 1px #0c0806;flex:none}
@media (max-width:560px){.bracket{gap:5px}.bk-team{font-size:9px;gap:3px}.bk-flag{width:13px;height:9px}.bk-match{padding:2px 3px}.bk-col{gap:4px}.mode-row .arcade-btn{min-width:130px}}
@media (orientation:landscape) and (max-height:520px){.bk-team{font-size:9px;min-height:12px}.bk-col{gap:3px}.bk-col h3{display:none}}

/* conquistas e bônus */
.bonus-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,680px);text-align:left}
.bonus{display:flex;align-items:center;gap:8px;background:#2a1e16;box-shadow:0 0 0 2px #0c0806;padding:6px 8px;opacity:.7}
.bonus.on{opacity:1;box-shadow:0 0 0 2px #ffd166}
.bonus-ic{font-size:22px;flex:none;width:28px;text-align:center}
.bonus div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bonus b{font-size:13px;color:#ffd166;text-transform:uppercase;letter-spacing:.5px}
.bonus small{font-size:11px;color:#e8d8c0;line-height:1.3}
.bonus-btn{flex:none;border:0;background:#f08a3c;color:#1c0e05;font-weight:900;font-size:11px;padding:6px 8px;cursor:pointer;box-shadow:0 0 0 2px #0c0806;text-transform:uppercase}
.bonus-btn[aria-pressed="true"]{background:#5fd17a}
.bonus-btn:focus-visible{outline:3px solid #ffd166;outline-offset:2px}
@media (max-width:560px){.bonus-list{grid-template-columns:1fr;gap:5px}.bonus{padding:4px 6px}.bonus small{font-size:10px}.bonus-ic{font-size:18px;width:22px}}

.icon-button.off{opacity:.45;text-decoration:line-through}

/* Controles e instruções fora do canvas: alvos de toque e texto legíveis. */
.match-tools{width:min(100%,820px);margin:12px auto;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.match-tools[hidden]{display:none}
.match-menu{width:auto;min-height:44px;height:auto;padding:10px 14px;font-weight:700}
.match-tools p{flex-basis:100%;margin:0;line-height:1.5;font-size:14px;color:var(--ink)}
.match-tools .kick-feedback{font-weight:700;border-left:3px solid var(--orange);padding-left:10px}
.kick-feedback:empty{display:none}
[data-pause]{z-index:5}
[data-pause] h2{margin:0;color:#ffd166}
[data-pause] p{max-width:430px;line-height:1.5;margin:4px 0 10px}

.team-preview{display:flex;align-items:center;justify-content:center;gap:12px;min-height:52px;font-size:15px;font-weight:700}
.team-preview .team-badge{width:52px;height:52px;flex:none}
.scene-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:min(100%,630px)}
.scene-card{border:2px solid #6e5944;background:#241a13;color:#fff3c4;padding:5px;cursor:pointer;min-height:48px;font-weight:700}
.scene-card canvas{width:100%;height:auto;aspect-ratio:8/5;pointer-events:none}
.scene-card span{display:block;padding:6px 2px;font-size:13px}
.scene-card[aria-pressed="true"],.scene-card:focus-visible{outline:3px solid #ffd166;outline-offset:1px}
[data-scenes] h2{margin:0;font-size:18px}
[data-menu] [data-cpu]{min-height:54px}
@media(max-width:560px){
  .team-preview{font-size:13px;gap:8px}.team-preview .team-badge{width:44px;height:44px}
  .team-grid{gap:7px}.team-btn{font-size:9px;letter-spacing:0;min-height:60px}
  [data-teams]{justify-content:flex-start}
  [data-team-confirm]{position:sticky;bottom:0;z-index:1}
  .scene-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  [data-scenes]{justify-content:flex-start}
}

/* Menu: partida rápida em primeiro plano, demais modos juntos abaixo. */
.menu-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,610px);gap:14px}
.menu-modes .arcade-btn{min-width:0;padding:10px 8px;font-size:12px;letter-spacing:.7px}
.menu-modes .menu-primary{grid-column:1/-1;justify-self:center;min-width:260px;font-size:16px;padding:12px 24px}
.match-tools .defense-hint{background:var(--paper);padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-weight:700}
@media(max-width:560px){
  .menu-modes{gap:12px 8px}.menu-modes .arcade-btn{font-size:10px;padding:9px 5px;letter-spacing:0}
  .menu-modes .arcade-btn small{font-size:9px}.menu-modes .menu-primary{min-width:220px;font-size:14px}
}
@media(orientation:landscape) and (max-height:520px){
  .menu-modes{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
  .menu-modes .menu-primary{grid-column:auto;min-width:0;font-size:12px;padding:9px 8px}
}

@media(max-width:560px){
  [data-menu] .st-title{gap:2px}
  [data-menu] .st-title .px-text{max-height:44px;width:auto;max-width:100%}
  [data-menu]{gap:7px}
}
/* Liga e resultados: controles acessíveis, tabela compacta e rolagem em telas baixas. */
.league-panel{gap:10px;justify-content:flex-start!important;padding:18px!important;overflow:auto}
.league-panel h2{margin:0;font-size:22px;color:#ffd166}.league-panel .sub{max-width:570px;margin:0}
.league-table-wrap{width:min(100%,560px);overflow:auto;flex-shrink:0}.league-table{border-collapse:collapse;width:100%;font-size:14px;color:#fff3c4;background:#15242b}
.league-table caption{caption-side:bottom;text-align:left;padding:8px 0;font-size:11px;line-height:1.4;color:#dfd5bb}
.league-table th,.league-table td{padding:8px 7px;border-bottom:1px solid #52615f;text-align:center;white-space:nowrap}.league-table td:nth-child(2),.league-table th:nth-child(2){text-align:left}.league-table .league-me{background:#315f4d;font-weight:700}.league-table abbr{text-decoration:none}
.league-fixtures{list-style:none;padding:0;margin:0;font-size:13px;line-height:1.65}.league-panel [data-league-status]{margin:0;font-weight:700;color:#ffd166}.league-panel [data-league-save]{font-size:12px;margin:0}
.victory-portrait{display:block;width:min(100%,400px);height:auto;max-height:100px;object-fit:contain;flex-shrink:0}
[data-over]{overflow:auto;justify-content:flex-start!important;padding-block:16px!important;gap:10px!important}[data-over] .go-banner canvas{max-height:48px;width:auto;max-width:100%}[data-over] .go-score canvas{max-height:48px;width:auto;max-width:100%}
[data-over] button,.league-panel button{min-height:44px}[data-menu] .menu-modes{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:560px){.league-panel{padding:12px!important}.league-table th,.league-table td{padding:7px 4px;font-size:12px}.victory-portrait{max-height:76px}[data-menu] .menu-modes .arcade-btn{min-height:48px}}
@media(orientation:landscape) and (max-height:520px){.victory-portrait{max-height:52px}[data-over]{gap:6px!important}[data-menu] .st-title{display:none}[data-menu] .menu-modes{grid-template-columns:repeat(3,minmax(0,1fr))}[data-menu] .menu-modes .menu-primary{grid-column:auto}}
.cine-skip{position:absolute;right:8px;top:8px;z-index:8;min-height:44px;padding:8px 12px;border:1px solid #c8ac6c;border-radius:8px;background:#14242fed;color:#fff3c4;font-weight:700;cursor:pointer}.cine-skip:focus-visible{outline:3px solid #ffd166;outline-offset:2px}.cine-skip[hidden]{display:none}
.league-panel>.mode-row{position:sticky;bottom:-18px;background:#15242bf5;width:100%;justify-content:center;padding:10px;flex-shrink:0;z-index:2}.league-panel>.mode-row button{min-height:44px}
@media(max-width:560px){.league-panel>.mode-row{bottom:-12px}}
[data-over][data-outcome="win"]{background:radial-gradient(ellipse at 50% 10%,#386343ed,#101b27f2 75%)}[data-over][data-outcome="draw"]{background:radial-gradient(ellipse at 50% 10%,#365064ed,#101b27f2 75%)}[data-over][data-outcome="lose"]{background:radial-gradient(ellipse at 50% 10%,#544133ed,#101b27f2 75%)}