:root{
  --bg:#BFE6A8;
  --ink:#24452E;
  --muted:#4F7A5B;
  --accent:#E5484D;
  --green:#22C55E;
  --green-d:#15803D;
  --paper:#FFFFFF;
  --font:"Baloo 2", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--bg)}
body{margin:0;color:var(--ink);font:17px/1.3 var(--font);padding-inline:10px;padding-block:8px 10px;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
.app{max-width:760px;margin-inline:auto;width:100%;height:calc(100vh - 18px);height:calc(100dvh - 18px);min-height:470px;display:grid;grid-template-rows:auto auto 1fr auto;grid-template-columns:minmax(0,1fr);gap:6px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:46px}
.back{color:var(--ink);text-decoration:none;font-weight:700;font-size:17px;white-space:nowrap;opacity:.75}
.back:hover{opacity:1}
.title{margin:0;font-weight:800;font-size:clamp(1.3rem,4.4vw,2rem);white-space:nowrap;line-height:1}
.title span{color:var(--accent)}
.bar-actions{display:flex;gap:8px;align-items:center}
.icon-btn{width:44px;height:44px;border-radius:13px;border:0;background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 3px 0 rgba(0,0,0,.12)}
.icon-btn span{display:grid;place-items:center}
.icon-btn span[hidden]{display:none}
.icon-btn svg{width:22px;height:22px}
button{font:inherit;cursor:pointer}
.btn{border:0;border-radius:12px;background:#fff;color:var(--ink);font-weight:800;padding:9px 18px;box-shadow:0 3px 0 rgba(0,0,0,.14)}
.btn:active{translate:0 3px;box-shadow:none}
.btn.small{padding:7px 14px;font-size:16px}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 4px 0 var(--green-d)}
.btn.light{background:#EAF3E4;color:var(--ink);box-shadow:0 4px 0 #C4D8BA}
.btn.big{font-size:1.2rem;padding:11px 26px;width:100%}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.players{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:5px}
.pl{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.6);border-radius:999px;padding:2px 12px 2px 3px;font-weight:800;font-size:15px;border:3px solid transparent}
.pl .av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:16px}
.pl.on{border-color:var(--accent);background:#fff}

.stage{position:relative;min-height:0;border-radius:18px;overflow:hidden;background:#9AD27E}
canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.status{margin:0;text-align:center;font-weight:800;font-size:17px;min-height:1.3em}

.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(36,69,46,.55);overflow-y:auto}
.overlay[hidden]{display:none}
.sheet{width:100%;max-width:500px;background:#fff;color:var(--ink);border-radius:22px;padding:20px 22px;display:grid;gap:12px;box-shadow:0 20px 50px rgba(0,0,0,.3)}
.sheet.center{text-align:center;justify-items:center;max-width:380px}
h2{margin:0;text-align:center;font-weight:800;font-size:2rem;line-height:1.1}
.help{margin:0;font-size:14.5px;color:var(--muted);line-height:1.5}
.help b{color:var(--ink)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
legend{font-size:14px;font-weight:800;color:var(--muted);margin-bottom:4px;padding:0}
.rows{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px}
.p-row{display:flex;gap:6px;align-items:center;min-width:0}
.p-row .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-size:17px;flex:none}
.p-row input{min-width:0;flex:1;font:700 1rem var(--font);color:var(--ink);padding:5px 9px;border-radius:10px;border:3px solid #E2EBDD;background:#F7FBF5}
.p-row input:focus{border-color:var(--green);outline:none}
.toggle{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;font-size:15px}
.toggle input{width:20px;height:20px;accent-color:var(--ink);flex:none}
.seg{display:flex;border:3px solid #E2EBDD;border-radius:12px;overflow:hidden}
.seg label{position:relative;cursor:pointer;flex:1;min-width:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:block;padding:6px 6px;font-size:15px;font-weight:700;color:var(--muted);text-align:center}
.seg.wide span{font-size:1.05rem}
.seg label + label span{border-left:2px solid #E2EBDD}
.seg input:checked + span{background:var(--ink);color:#fff}
.seg input:focus-visible + span{outline:3px solid var(--accent);outline-offset:-3px}
.trophy{font-size:58px;line-height:1}
.end-title{margin:0;font-weight:800;font-size:1.9rem;text-wrap:balance}
.lead{margin:0;color:var(--muted);font-weight:700}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

@media (max-width:640px){
  .back-tx{display:none}
  .back{font-size:22px}
  .seg span{font-size:13px}
}