/* Tokens de cor e tipografia, elementos base, formulários e opções.
   As cores dos dois partidos vêm do cenário (scenarios/<cenário>/theme.css). */
:root{
  --casing:#ece6d8; --screen:#fbf9f3; --ink:#17191e; --muted:#5a5a55; --line:#cfc7b4;
  --key:#17191e; --key-ink:#ffffff;
  --gold:#f5c400;
  --warn:#c25e0c; --danger:#b3261e;
  --urna:#3a3b38; --urna-edge:#26272a; --lcd:#e9eee4; --lcd-ink:#17191e; --lcd-muted:#4a4f47;
  --night:#10223a; --night-ink:#ffffff; --night-muted:#b8c4d6; --night-track:#26385a;
  --confirma:#1e8f4e; --corrige:#e8731a; --slot-line:#b9b09a; --ok:#1d64a8;
  --sky:#d5e2ea; --sun:#f2b866; --bld:#ffffff; --bld-line:#8c8678; --soffit:#eef0f0; --glass:#6d8796; --glass-hi:#c9d8e0; --plaza:#e3dccb; --pool:#b9cad3; --far:#b9c3c6;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --casing:#1b1c1e; --screen:#26272a; --ink:#eeede8; --muted:#a9a79f; --line:#3f4044;
    --key:#eeede8; --key-ink:#1d1e20;
    --gold:#ffd43b;
    --warn:#ff9a45; --danger:#ff7a6e;
    --urna:#0f1011; --urna-edge:#000; --lcd:#25302a; --lcd-ink:#e6eee0; --lcd-muted:#a9b8a6;
    --night:#0b1626; --slot-line:#56575c; --ok:#6cb2f2;
    --sky:#0b1a33; --sun:#e98a4b; --bld:#f1f0ea; --bld-line:#8e939b; --soffit:#d9dbdc; --glass:#1c2b3a; --glass-hi:#f0c46a; --plaza:#1e1f22; --pool:#0e1f33; --far:#22314a;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --casing:#1b1c1e; --screen:#26272a; --ink:#eeede8; --muted:#a9a79f; --line:#3f4044;
  --key:#eeede8; --key-ink:#1d1e20;
  --gold:#ffd43b;
  --warn:#ff9a45; --danger:#ff7a6e;
  --urna:#0f1011; --urna-edge:#000; --lcd:#25302a; --lcd-ink:#e6eee0; --lcd-muted:#a9b8a6;
  --night:#0b1626; --slot-line:#56575c; --ok:#6cb2f2;
  --sky:#0b1a33; --sun:#e98a4b; --bld:#f1f0ea; --bld-line:#8e939b; --soffit:#d9dbdc; --glass:#1c2b3a; --glass-hi:#f0c46a; --plaza:#1e1f22; --pool:#0e1f33; --far:#22314a;
  color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--casing);color:var(--ink);font:16px/1.5 "Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-text-size-adjust:100%}
#app{max-width:560px;margin:0 auto;padding:16px 16px 32px}
h1,h2,h3{font-family:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;font-weight:800;line-height:1.05;margin:0}
h1{font-size:clamp(3rem,15vw,4.6rem);letter-spacing:-.01em}
h2{font-size:1.7rem}
h3{font-size:1.25rem}
p{margin:.5rem 0}
small,.small{font-size:.85rem;color:var(--muted)}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.hero{padding:20px 0 18px}
.hero .vs{margin:0 0 18px}
.hero p{color:var(--muted);max-width:34ch}

.screen{background:var(--screen);border:1px solid var(--line);border-radius:14px;padding:18px;margin:0 0 14px}
.screen > h2 + p{margin-top:.35rem}
.lead{color:var(--muted);margin:.15rem 0 .2rem;font-weight:500}

.key{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;background:var(--key);color:var(--key-ink);border:0;border-radius:10px;padding:.8rem 1.1rem;font-weight:700;min-height:48px;box-shadow:0 3px 0 rgba(0,0,0,.35);transition:transform .06s}
.key:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.35)}
.key[disabled]{opacity:.35;cursor:not-allowed}
.key.wide{width:100%;font-size:1.1rem;min-height:56px}
.plain{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;background:var(--screen);border:1.5px solid color-mix(in srgb,var(--ink) 32%,var(--line));border-radius:10px;padding:.7rem 1rem;min-height:44px;font-weight:600;box-shadow:0 2px 0 var(--line);transition:transform .06s,border-color .12s,background .12s}
.plain:hover{border-color:var(--ink)}
.plain:active{transform:translateY(2px);box-shadow:0 0 0 var(--line)}
.plain[disabled]{opacity:.4;cursor:not-allowed;box-shadow:none}
.plain[disabled]:hover{border-color:color-mix(in srgb,var(--ink) 32%,var(--line))}
/* Voltar ao início */
.plain.nav::before{content:"‹";font-size:1.35rem;line-height:1;margin-top:-2px}
/* Ações que encerram a mesa ou a partida: vermelho de alerta; o segundo toque confirma */
.plain.danger{color:var(--danger);border-color:var(--danger);background:color-mix(in srgb,var(--danger) 9%,var(--screen));box-shadow:0 2px 0 color-mix(in srgb,var(--danger) 45%,transparent)}
.plain.danger:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 16%,var(--screen))}
.plain.danger.armed{background:var(--danger);color:#fff;animation:armed .9s ease-in-out infinite alternate}
@keyframes armed{to{box-shadow:0 0 0 4px color-mix(in srgb,var(--danger) 30%,transparent)}}
/* Ajuda e tutorial */
.plain.help{color:var(--ok);border-color:var(--ok);background:color-mix(in srgb,var(--ok) 9%,var(--screen));box-shadow:0 2px 0 color-mix(in srgb,var(--ok) 40%,transparent)}
.plain.help::before{content:"?";display:inline-grid;place-items:center;width:1.45em;height:1.45em;border-radius:50%;background:var(--ok);color:var(--screen);font:800 .85em "Barlow Condensed",sans-serif}
.stack{display:grid;gap:10px}
.mt{margin-top:14px}

.row{display:flex;gap:8px}
input[type=text]{flex:1;min-width:0;font:inherit;color:var(--ink);background:var(--casing);border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;min-height:48px}
.names{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:6px}
.names li{display:flex;justify-content:space-between;align-items:center;padding:.45rem .2rem .45rem .7rem;border-bottom:1px solid var(--line)}
.names li:last-child{border-bottom:0}
.x{background:none;border:0;font-size:1.5rem;line-height:1;width:40px;height:40px;color:var(--muted)}

.opt{display:block;width:100%;text-align:left;background:none;border:2px solid var(--line);border-radius:12px;padding:.8rem 1rem}
.opt b{display:block;font-size:1.05rem}
.opt span{color:var(--muted);font-size:.92rem}
.opt.on{border-color:var(--ink)}