:root{
  --bg:#0d1220;
  --bg-2:#141b2e;
  --panel:rgba(255,255,255,.05);
  --panel-line:rgba(255,255,255,.10);
  --ink:#eef2ff;
  --ink-dim:#98a3c0;
  --board:#1b56d6;
  --board-2:#1240a8;
  --hole:#0a0f1c;
  --p1:#ff4d5e;
  --p1-2:#c81f34;
  --p2:#f5c518;
  --p2-2:#c99500;
  --accent:#5b8cff;
  --radius:18px;
  --shadow:0 18px 48px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: light){
  :root{
    --bg:#eef1f8;
    --bg-2:#ffffff;
    --panel:rgba(15,23,42,.04);
    --panel-line:rgba(15,23,42,.10);
    --ink:#101828;
    --ink-dim:#5b6478;
    --hole:#e7ecf7;
    --shadow:0 18px 40px rgba(16,24,40,.14);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100dvh;
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 600px at 15% -10%, rgba(91,140,255,.20), transparent 60%),
    radial-gradient(900px 500px at 95% 0%, rgba(245,197,24,.12), transparent 55%),
    var(--bg);
  display:flex;flex-direction:column;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- header ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px clamp(14px,4vw,32px);
  max-width:1000px;width:100%;margin:0 auto;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.02em}
.brand-name{font-size:1.05rem}
.brand-dots{display:grid;grid-template-columns:1fr 1fr;gap:3px}
.brand-dots i{width:9px;height:9px;border-radius:50%;display:block}
.brand-dots i:nth-child(1){background:var(--p1)}
.brand-dots i:nth-child(2){background:var(--p2)}
.brand-dots i:nth-child(3){background:var(--p2)}
.brand-dots i:nth-child(4){background:var(--p1)}

.ghost-btn{
  background:var(--panel);border:1px solid var(--panel-line);color:var(--ink-dim);
  padding:8px 14px;border-radius:999px;font:inherit;font-size:.85rem;cursor:pointer;
  transition:color .15s, border-color .15s;
}
.ghost-btn:hover{color:var(--ink);border-color:var(--accent)}

/* ---------- layout ---------- */
.wrap{
  flex:1;width:100%;max-width:1000px;margin:0 auto;
  padding:0 clamp(14px,4vw,32px) 28px;
  display:grid;gap:16px;
}
@media (min-width:900px){
  .wrap{grid-template-columns:300px 1fr;align-items:start}
  .stage{grid-row:1 / span 2;grid-column:2}
  .panel{grid-column:1}
}

.panel{
  background:var(--panel);border:1px solid var(--panel-line);
  border-radius:var(--radius);padding:16px;
  backdrop-filter:blur(8px);
}

/* ---------- controls ---------- */
.controls{display:grid;gap:16px}
.control-label{
  display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.10em;
  color:var(--ink-dim);margin-bottom:8px;font-weight:600;
}
.segmented{
  display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;
  background:rgba(0,0,0,.18);border-radius:12px;padding:4px;
}
@media (prefers-color-scheme:light){ .segmented{background:rgba(15,23,42,.05)} }
.seg{
  font:inherit;font-size:.9rem;font-weight:600;
  border:0;background:transparent;color:var(--ink-dim);
  padding:9px 6px;border-radius:9px;cursor:pointer;
  transition:background .15s,color .15s;white-space:nowrap;
}
.seg:hover{color:var(--ink)}
.seg.on{background:var(--accent);color:#fff;box-shadow:0 4px 14px rgba(91,140,255,.35)}
#diffGroup{transition:opacity .2s}
#diffGroup.off{opacity:.35;pointer-events:none}

/* ---------- status ---------- */
.stage{display:grid;gap:14px;justify-items:center}
.status{
  display:flex;align-items:center;gap:10px;
  font-size:1.05rem;font-weight:600;min-height:32px;text-align:center;
}
.status-disc{
  width:20px;height:20px;border-radius:50%;flex:none;
  box-shadow:inset 0 -2px 4px rgba(0,0,0,.35);
}
.status-disc[data-p="1"]{background:linear-gradient(160deg,var(--p1),var(--p1-2))}
.status-disc[data-p="2"]{background:linear-gradient(160deg,var(--p2),var(--p2-2))}
.status-disc[data-p="0"]{background:var(--ink-dim);opacity:.5}
.status.win{animation:pop .45s ease}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.06)}100%{transform:scale(1)}}

/* ---------- board ---------- */
.board-shell{position:relative;width:100%;max-width:560px}
.ghost-row{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:clamp(5px,1.4vw,10px);padding:0 clamp(6px,1.6vw,12px);
  height:clamp(18px,4.5vw,26px);margin-bottom:4px;
}
.ghost-cell{border-radius:50%;opacity:0;transition:opacity .15s;align-self:end;aspect-ratio:1;width:100%}
.ghost-cell.show{opacity:.45}
.ghost-cell[data-p="1"]{background:var(--p1)}
.ghost-cell[data-p="2"]{background:var(--p2)}

.board{
  display:grid;grid-template-columns:repeat(7,1fr);
  gap:clamp(5px,1.4vw,10px);
  padding:clamp(6px,1.6vw,12px);
  background:linear-gradient(170deg,var(--board),var(--board-2));
  border-radius:clamp(12px,3vw,20px);
  box-shadow:var(--shadow), inset 0 2px 0 rgba(255,255,255,.18);
  touch-action:manipulation;
}
.cell{
  aspect-ratio:1;border-radius:50%;
  background:var(--hole);
  box-shadow:inset 0 3px 7px rgba(0,0,0,.6), inset 0 -2px 3px rgba(255,255,255,.06);
  position:relative;overflow:hidden;cursor:pointer;border:0;padding:0;
}
.board.locked .cell{cursor:default}
.disc{
  position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.30);
  animation:drop .34s cubic-bezier(.42,1.4,.55,1) both;
}
.disc[data-p="1"]{background:radial-gradient(circle at 34% 28%, #ff8a94, var(--p1) 45%, var(--p1-2))}
.disc[data-p="2"]{background:radial-gradient(circle at 34% 28%, #ffe488, var(--p2) 45%, var(--p2-2))}
@keyframes drop{ from{transform:translateY(var(--from,-560px))} to{transform:translateY(0)} }

.board.decided .disc{opacity:.34;transition:opacity .3s}
.board.decided .disc.win{opacity:1;animation:glow 1.1s ease-in-out infinite alternate}
@keyframes glow{
  from{box-shadow:inset 0 -4px 8px rgba(0,0,0,.35), 0 0 0 0 rgba(255,255,255,.55)}
  to{box-shadow:inset 0 -4px 8px rgba(0,0,0,.35), 0 0 0 7px rgba(255,255,255,0)}
}
@media (prefers-reduced-motion:reduce){
  .disc{animation:none}
  .board.decided .disc.win{animation:none;outline:3px solid #fff}
}

.cell:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* ---------- actions ---------- */
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{
  font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;
  padding:11px 22px;border-radius:12px;
  background:var(--panel);border:1px solid var(--panel-line);color:var(--ink);
  transition:transform .1s, border-color .15s, opacity .15s;
}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:default;border-color:var(--panel-line)}
.btn-primary{background:var(--accent);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(91,140,255,.35)}

/* ---------- scoreboard ---------- */
.scoreboard{display:flex;align-items:center;justify-content:space-between;gap:10px}
.score{display:flex;align-items:center;gap:8px;font-size:.9rem;min-width:0}
.score-name{color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.score-num{font-weight:700;font-size:1.15rem;font-variant-numeric:tabular-nums}
.score-disc{width:14px;height:14px;border-radius:50%;flex:none}
.score[data-p="1"] .score-disc{background:linear-gradient(160deg,var(--p1),var(--p1-2))}
.score[data-p="2"] .score-disc{background:linear-gradient(160deg,var(--p2),var(--p2-2))}
.score-draw{flex-direction:column;gap:0;text-align:center}
.score-draw .score-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em}

/* ---------- footer ---------- */
.foot{
  text-align:center;color:var(--ink-dim);font-size:.85rem;
  padding:0 20px 30px;max-width:560px;margin:0 auto;
}
.foot p{margin:0}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(4,8,18,.72);
  display:flex;align-items:center;justify-content:center;padding:20px;z-index:50;
  backdrop-filter:blur(4px);
}
.modal[hidden]{display:none}
.modal-card{
  background:var(--bg-2);border:1px solid var(--panel-line);
  border-radius:var(--radius);padding:24px;max-width:420px;width:100%;
  box-shadow:var(--shadow);
}
.modal-card h2{margin:0 0 14px;font-size:1.25rem}
.modal-card ol{margin:0 0 14px;padding-left:20px;line-height:1.65;color:var(--ink-dim)}
.modal-card ol strong{color:var(--ink)}
.tip{font-size:.88rem;color:var(--ink-dim);background:var(--panel);padding:11px 13px;border-radius:10px;margin:0 0 18px}
#closeRules{width:100%}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--bg-2);border:1px solid var(--panel-line);color:var(--ink);
  padding:11px 18px;border-radius:999px;font-size:.9rem;font-weight:600;
  box-shadow:var(--shadow);z-index:60;
}
.toast[hidden]{display:none}