: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{font:inherit}
a{color:var(--orange)}
.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);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;font-weight:900;color:var(--orange);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}
.streak{display:flex;flex-direction:column;align-items:center;padding:3px 8px;border:1px solid var(--line);border-radius:12px;min-width:56px}
.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:#e8964f;box-shadow:0 0 8px #e8964f;margin-right:6px;vertical-align:middle}
.stage{position:relative;width:100%;aspect-ratio:5/3;max-height:72vh;margin:0 auto;border-radius:10px;overflow:hidden;background:#e8dfcd;touch-action:none;user-select:none;-webkit-user-select:none}
canvas{display:block;width:100%;height:100%;cursor:pointer;outline:none;image-rendering:pixelated;image-rendering:crisp-edges}
canvas:focus-visible{outline:3px solid var(--orange);outline-offset:-3px}
.overlay{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:safe center;overflow-y:auto;text-align:center;padding:24px;background:rgba(245,237,222,.92);backdrop-filter:blur(2px)}
[data-theme="night"] .overlay{background:rgba(32,33,36,.9)}
[data-theme="night"] .stage{background:#202124}
.overlay[hidden]{display:none}
.overlay h1{font-size:clamp(28px,6vw,50px);line-height:.95;margin:0 0 14px;letter-spacing:-1.5px}
.overlay h1 em{color:var(--orange);font-style:normal}
.overlay h2{font-size:clamp(34px,8vw,52px);margin:0 0 8px}
.overlay p{font-size:16px;line-height:1.45;max-width:440px;margin:0 0 12px}
.mode-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.mode-button{min-width:150px}
.mode-button small{display:block;font-size:11px;font-weight:700;opacity:.8}
.mode-button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.hint{font-size:13px!important;color:var(--muted);margin-top:10px!important}
.over-meta{color:var(--muted)}
.kicker{display:block;font-size:11px;font-weight:900;letter-spacing:2px;color:var(--orange);margin-bottom:10px}
.button-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.centered{justify-content:center}
.primary,.secondary{border-radius:14px;padding:13px 18px;font-weight:900;cursor:pointer;border:1px solid var(--orange)}
.primary{background:var(--orange);color:#fff;box-shadow:0 8px 20px rgba(198,107,39,.25)}
[data-theme="night"] .primary{color:#1b130c}
.secondary{background:var(--paper);color:var(--brown);border-color:var(--line)}
.link-button{text-decoration:none;display:inline-block}
.primary:focus-visible,.secondary:focus-visible,.icon-button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.share-status{min-height:1.4em;color:var(--green);font-weight:700}
.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}.stage{aspect-ratio:3/2}.console-label{font-size:8px;margin-bottom:6px}
  .overlay{padding:12px}.overlay p{font-size:14px}.overlay h1{margin-bottom:8px}.mode-button{min-width:130px;padding:10px 12px}.kicker{margin-bottom:6px}.hint{display:none}
  .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}
}
@media (max-width:560px) and (max-height:900px){.overlay h2{font-size:30px}.over-meta{font-size:14px!important}}
@media (max-width:560px){[data-over-screen] .kicker{display:none}[data-over-screen] h2{font-size:28px;margin-bottom:4px}[data-over-screen] p{margin-bottom:6px}[data-over-screen] .button-row{gap:6px;margin-top:2px}[data-over-screen] .primary,[data-over-screen] .secondary{padding:9px 12px;font-size:14px}.share-status{min-height:0;margin:0!important}}
/* 03/10: contraste AA nos botões e links do dia; tela final cabe em paisagem baixa */
:root:not([data-theme="night"]) .primary{background:#9c4f18;border-color:#9c4f18}
:root:not([data-theme="night"]) .about a,:root:not([data-theme="night"]) .site-footer a{color:#9c4f18}
:root:not([data-theme="night"]) .overlay h1 em{color:#9c4f18}
@media (max-height:460px){.overlay{padding:8px}.overlay h1{font-size:26px;margin-bottom:6px}.overlay h2{font-size:24px;margin:0 0 2px}.overlay p{font-size:13px;margin:0 0 4px}.kicker{display:none}.button-row{gap:6px;margin-top:2px}.primary,.secondary{padding:7px 10px;font-size:13px}.mode-button{min-width:120px}.hint{display:none}.share-status{min-height:0;margin:0!important}}
/* 03/10: tela final com medalha, marcos e pódio */
.result-grid{display:grid;grid-template-columns:auto auto minmax(170px,220px);gap:10px 14px;align-items:stretch;justify-content:center;margin:2px 0 10px;width:100%;max-width:600px}
.result-medal,.result-stats,.podium{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.result-medal{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:92px}
.result-medal canvas{width:52px;height:60px;cursor:default;image-rendering:pixelated}
.result-medal canvas[hidden]{display:none}
.result-medal small,.result-stats dt,.podium h3{font-size:9px;font-weight:900;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)}
.result-medal strong{font-size:14px;line-height:1.15;margin-top:2px}
.result-medal.no-medal strong{color:var(--muted);font-weight:700}
.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:0;text-align:left;align-content:center}
.result-stats div{min-width:0}
.result-stats dd{margin:0;font-size:17px;font-weight:900}
.podium{text-align:left}
.podium h3{margin:0 0 4px}
.podium ol{list-style:none;margin:0;padding:0}
.podium li{display:flex;gap:6px;align-items:baseline;padding:2px 4px;border-radius:6px;font-size:14px}
.podium li .pos{font-weight:900;color:var(--orange);min-width:22px}
.podium li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.podium li.is-you{background:rgba(198,107,39,.16);outline:1px solid var(--orange)}
:root:not([data-theme="night"]) .podium li .pos{color:#9c4f18}
.overlay .record-gap{color:var(--muted);font-weight:700;margin-bottom:8px}
.overlay .record-gap:empty,.overlay .final-message:empty,.record-status:empty{display:none}
.record-form{width:100%;max-width:440px;margin:0 0 8px;padding:10px;border:2px solid var(--orange);border-radius:12px;background:var(--paper)}
.record-form[hidden],.record-input[hidden]{display:none}
.overlay .record-form p{margin:0 0 8px;font-weight:700}
.record-input{display:flex;gap:8px}
.record-input input{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--cream);color:var(--ink);font:inherit;font-size:16px}
.record-input input:focus-visible{outline:3px solid var(--orange);outline-offset:1px}
.record-input .primary{padding:10px 14px}
.record-note{display:block;margin-top:6px;font-size:11px;color:var(--muted)}
.overlay .record-form .record-status{margin:8px 0 0;color:var(--green)}
[data-over-screen].is-record .kicker{display:block!important}
/* a tela final cresce em vez de esmagar o conteúdo */
.stage.is-over{aspect-ratio:auto;max-height:none}
.stage.is-over [data-canvas]{position:absolute;inset:0}
.stage.is-over [data-over-screen]{position:relative;inset:auto;aspect-ratio:5/3;overflow:visible}
@media (max-width:560px){
  .stage.is-over [data-over-screen]{aspect-ratio:4/3}
  .result-grid{grid-template-columns:auto 1fr;gap:6px;margin-bottom:6px}
  .podium{grid-column:1/-1}
  .result-medal{min-width:76px;padding:6px}
  .result-medal canvas{width:39px;height:45px}
  .result-stats{padding:6px 8px;gap:4px 10px}
  .result-stats dd{font-size:15px}
  .podium li{font-size:13px;padding:1px 4px}
  .podium{padding:6px 8px}
  .record-input .primary{padding:9px 10px;font-size:13px}
}
@media (max-height:460px){
  .result-grid{gap:6px;margin-bottom:4px}
  .result-medal,.result-stats,.podium{padding:5px 8px}
  .result-medal canvas{width:33px;height:38px}
  .result-stats dd{font-size:14px}
  .podium li{font-size:12px;padding:0 4px}
  .record-form{padding:6px;margin-bottom:4px}
  .overlay .record-form p{margin-bottom:4px}
  .record-input input,.record-input .primary{padding:7px 10px}
  .record-note{display:none}
}
.record-input[hidden]~.record-note{display:none}
/* 03/10: ranking mensal (top 20) + recordes de todos os tempos */
.overlay .rank-link-row{margin:0 0 8px;font-size:14px;font-weight:700}
.rank-link-row a{color:var(--orange)}
:root:not([data-theme="night"]) .rank-link-row a{color:#9c4f18}
.podium li.is-empty,.rank-box li.is-empty{color:var(--muted);font-size:14px;padding:4px}
.ranking{max-width:720px;margin:26px auto 0;padding:18px;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.ranking h2{font-size:22px;margin:0 0 10px}
.rank-tabs{display:flex;gap:8px;margin-bottom:12px}
.rank-tabs button{border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:12px;padding:8px 14px;font-weight:900;cursor:pointer}
.rank-tabs button[aria-selected="true"]{background:var(--orange);border-color:var(--orange);color:#fff}
:root:not([data-theme="night"]) .rank-tabs button[aria-selected="true"]{background:#9c4f18;border-color:#9c4f18}
[data-theme="night"] .rank-tabs button[aria-selected="true"]{color:#1b130c}
.rank-tabs button:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.rank-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px;align-items:start}
.rank-box h3{font-size:11px;font-weight:900;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.rank-box ol{list-style:none;margin:0;padding:0}
.rank-box li{display:flex;gap:8px;align-items:baseline;padding:5px 8px;border-radius:8px;font-size:15px}
.rank-box li:nth-child(odd){background:var(--cream)}
.rank-box li .pos{font-weight:900;color:var(--orange);min-width:28px}
:root:not([data-theme="night"]) .rank-box li .pos{color:#9c4f18}
.rank-box li .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank-box li.is-you{background:rgba(198,107,39,.18);outline:1px solid var(--orange)}
.rank-alltime li:first-child{font-size:17px}
.rank-history{font-size:14px;color:var(--muted);margin:8px 0 0}
.rank-note{font-size:13px;color:var(--muted);margin:12px 0 0}
.rank-note[hidden],.rank-history[hidden]{display:none}
@media (max-width:560px){.ranking{padding:12px;border-radius:14px}.rank-cols{grid-template-columns:1fr}.rank-box li{font-size:14px;padding:4px 6px}}
@media (max-height:460px){.overlay .rank-link-row{font-size:12px;margin-bottom:4px}}