:root{
  --ground:#F1EEFF;
  --ink:#231F3F;
  --muted:#6A6590;
  --paper:#FFFFFF;
  --line:rgba(35,31,63,.12);
  --board:#2B2350;
  --board-dark:#1C1738;
  --p0:#3D6BF2;
  --p0-dark:#2A4FC0;
  --p0-soft:#E3EAFE;
  --p1:#FF7A2F;
  --p1-dark:#D65A14;
  --p1-soft:#FFEADF;
  --win:#FFD23F;
  --font:"Fredoka", "Segoe UI Rounded", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{background:var(--ground)}
body{margin:0;color:var(--ink);font:16px/1.4 var(--font);padding-inline:16px;padding-block:10px 12px;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(ellipse 60% 40% at 50% 0%, #fff, transparent 70%), var(--ground)}
.app{max-width:900px;margin-inline:auto;height:calc(100vh - 22px);height:calc(100dvh - 22px);min-height:520px;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px}

.bar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.back{color:var(--muted);text-decoration:none;font-weight:500;font-size:15px}
.back:hover{color:var(--ink)}
.title{margin:0;font-weight:700;font-size:clamp(1.3rem,3.6vw,1.9rem)}
.bar-actions{display:flex;gap:8px;align-items:center}
.icon-btn{width:42px;height:42px;border-radius:12px;border:0;background:var(--paper);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 3px 0 var(--line)}
.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:14px;background:var(--paper);color:var(--ink);font-weight:600;padding:10px 18px;box-shadow:0 4px 0 var(--line);transition:transform .06s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn:disabled{opacity:.45;cursor:default}
.btn.small{padding:8px 14px;font-size:15px}
.btn.primary{background:var(--ink);color:#fff;box-shadow:0 4px 0 #0E0B20}
.btn.big{font-size:1.2rem;padding:12px 28px}
kbd{font:600 11px var(--font);padding:0 5px;border:1px solid rgba(255,255,255,.4);border-radius:4px;margin-left:6px}
:focus-visible{outline:3px solid var(--p0);outline-offset:3px}

.disc-mini{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)}
.p0 .disc-mini{background:var(--p0)}
.p1 .disc-mini{background:var(--p1)}

.players{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px}
.player{display:flex;align-items:center;gap:8px;background:var(--paper);border-radius:999px;padding:6px 14px;border:3px solid transparent;box-shadow:0 3px 0 var(--line);min-width:0;transition:border-color .2s, transform .2s}
.player.p1{justify-content:flex-end}
.player.active.p0{border-color:var(--p0);transform:translateY(-2px)}
.player.active.p1{border-color:var(--p1);transform:translateY(-2px)}
.player .av{font-size:22px;line-height:1}
.player .nm{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player .sc{font-size:1.6rem;line-height:1;font-variant-numeric:tabular-nums}
.p0 .sc{color:var(--p0)}
.p1 .sc{color:var(--p1)}
.status{margin:0;text-align:center;font-weight:600;font-size:1.05rem;min-width:9ch}

.board-wrap{min-height:0;display:grid;place-items:center}
.board{
  --cell:min(12vw, calc((100vh - 280px) / 7));
  --cell:min(12vw, calc((100dvh - 280px) / 7), 84px);
  display:grid;grid-template-columns:repeat(7, var(--cell));gap:0;
  background:var(--board);padding:calc(var(--cell) * .12);border-radius:calc(var(--cell) * .35);
  box-shadow:0 12px 0 var(--board-dark), 0 24px 40px rgba(35,31,63,.25);
  position:relative;
}
.col{display:grid;grid-template-rows:repeat(6, var(--cell));border:0;background:transparent;padding:0;position:relative;border-radius:calc(var(--cell) * .3)}
.col:hover:not(:disabled),.col.focus{background:rgba(255,255,255,.08)}
.col:disabled{cursor:default}
.col.hint{animation:hint 1s ease-in-out 3}
@keyframes hint{50%{background:rgba(255,210,63,.35)}}
.cell{position:relative;display:grid;place-items:center}
.hole{width:78%;height:78%;border-radius:50%;background:var(--ground);box-shadow:inset 0 5px 0 rgba(0,0,0,.18)}
.disc{position:absolute;width:78%;height:78%;border-radius:50%;box-shadow:inset 0 -6px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.25)}
.disc.d0{background:var(--p0)}
.disc.d1{background:var(--p1)}
.disc.drop{animation:drop var(--dur,.4s) cubic-bezier(.4,0,.9,.5) both}
@keyframes drop{0%{transform:translateY(calc(var(--rows) * -100% - 40%))}80%{transform:translateY(0)}90%{transform:translateY(-8%)}100%{transform:translateY(0)}}
.disc.win{animation:pulse .7s ease-in-out infinite;box-shadow:0 0 0 5px var(--win), inset 0 -6px 0 rgba(0,0,0,.2)}
@keyframes pulse{50%{transform:scale(.88)}}
.ghost{position:absolute;top:calc(var(--cell) * -1.02);left:50%;width:calc(var(--cell) * .62);height:calc(var(--cell) * .62);margin-left:calc(var(--cell) * -.31);border-radius:50%;opacity:0;pointer-events:none;transition:opacity .12s}
.col:hover:not(:disabled) .ghost,.col.focus .ghost{opacity:.9}
.ghost.g0{background:var(--p0)}
.ghost.g1{background:var(--p1)}

.actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.overlay{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding-inline:16px;padding-block:16px;background:rgba(35,31,63,.5);overflow-y:auto}
.overlay.light{background:rgba(241,238,255,.35)}
.overlay[hidden]{display:none}
.sheet{width:100%;max-width:520px;background:var(--paper);border-radius:24px;padding:20px 22px 22px;display:grid;gap:14px;box-shadow:0 20px 50px rgba(35,31,63,.3)}
.sheet.center{text-align:center;justify-items:center;max-width:420px}
.sheet h2{margin:0;font-size:1.5rem;font-weight:700;text-align:center}
fieldset{border:0;margin:0;padding:0;display:grid;gap:8px}
fieldset[hidden]{display:none}
legend{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;padding:0}
.choices{display:grid;gap:8px}
.choices.two{grid-template-columns:1fr 1fr}
.choices.three{grid-template-columns:repeat(3,1fr)}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:grid;gap:0;height:100%;padding:10px 12px;border-radius:14px;border:3px solid var(--line);background:#F8F7FD;text-align:center}
.choice b{font-size:1.05rem}
.choice small{color:var(--muted)}
.choice input:checked + span{border-color:var(--ink);background:#fff;box-shadow:0 3px 0 var(--ink)}
.choice input:focus-visible + span{outline:3px solid var(--p0);outline-offset:2px}
.name-row{display:flex;align-items:center;gap:10px}
.name-row input{flex:1;min-width:0;font:600 1.05rem var(--font);color:var(--ink);padding:9px 12px;border-radius:12px;border:3px solid var(--line);background:#F8F7FD}
.name-row input:disabled{color:var(--muted)}
.name-row.p0 input:focus{border-color:var(--p0);outline:none}
.name-row.p1 input:focus{border-color:var(--p1);outline:none}
.note{margin:0;color:var(--muted);font-size:14px}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.res-title{margin:0;font-size:clamp(1.8rem,6vw,2.4rem);font-weight:700;line-height:1.1;text-wrap:balance}
.res-sub{margin:0;color:var(--muted)}

#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
#confetti i{position:absolute;top:-20px;width:10px;height:6px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--dx), 110vh) rotate(var(--r))}}

@media (max-width:560px){
  .players{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "s s"}
  #p0{grid-area:a} #p1{grid-area:b} .status{grid-area:s}
  .player{padding:4px 10px}
  .player .av{display:none}
  .board{--cell:min(12.4vw, calc((100dvh - 300px) / 7))}
  .choices.two{grid-template-columns:1fr}
  .title{font-size:1.2rem}
}
@media (prefers-reduced-motion:reduce){
  .disc.drop,.disc.win,.col.hint{animation:none}
  .player,.btn{transition:none}
}