/* Board, cell, panel styles — populated in Phase 4. */
.mode-card { cursor:pointer; width:330px; max-width:42vw; min-width:240px; padding:34px 24px; border-radius:28px; background:linear-gradient(180deg,#15294a,#0d1830); color:#fff; box-shadow:inset 0 2px 0 rgba(255,255,255,.08); transition:transform .15s, box-shadow .15s; }
.mode-card--cyan { border:3px solid #22d3ee; box-shadow:0 0 30px rgba(34,211,238,.3), inset 0 2px 0 rgba(255,255,255,.08); }
.mode-card--pink { border:3px solid #ff2d6f; background:linear-gradient(180deg,#3a1330,#1f0a1c); box-shadow:0 0 30px rgba(255,45,111,.3), inset 0 2px 0 rgba(255,255,255,.08); }
.mode-card--cyan:hover { transform:translateY(-6px); box-shadow:0 0 46px rgba(34,211,238,.6); }
.mode-card--pink:hover { transform:translateY(-6px); box-shadow:0 0 46px rgba(255,45,111,.6); }
.pill-btn { cursor:pointer; display:flex; align-items:center; gap:8px; padding:11px 20px; border-radius:999px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.04); color:rgba(255,255,255,.85); font-weight:800; font-size:14px; }
.pill-btn:hover { background:rgba(255,255,255,.1); }
.setup-label { font-size:12px; font-weight:900; color:rgba(255,255,255,.5); letter-spacing:1.5px; margin-bottom:8px; }
.top-btn { cursor:pointer; display:flex; align-items:center; gap:7px; height:42px; padding:0 18px; border-radius:999px; border:1.5px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; font-weight:800; font-size:14px; }
.top-btn--yellow { border:1.5px solid rgba(255,210,63,.5); background:rgba(255,210,63,.12); color:#ffd23f; }
.square-btn { cursor:pointer; padding:11px 20px; border-radius:12px; border:1.5px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; font-weight:800; font-size:14px; }
.square-btn:hover { background:rgba(255,255,255,.1); }
.set-row { display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:18px; background:rgba(255,255,255,.05); border:1.5px solid rgba(255,255,255,.1); }
.set-ico { font-size:26px; width:32px; text-align:center; }
.set-name { flex:none; width:140px; font-weight:800; font-size:16px; }
.set-val { flex:none; width:48px; text-align:right; font-family:'Fredoka',sans-serif; font-weight:700; font-size:20px; color:#ffd23f; }
.seg-btn { cursor:pointer; padding:9px 18px; border-radius:12px; border:2px solid rgba(255,255,255,.15); background:rgba(255,255,255,.03); color:#fff; font-weight:800; font-size:14px; }
.seg-btn--on { border-color:#ffd23f; background:rgba(255,210,63,.18); color:#ffd23f; }