:root { --bg:#14111f; --panel:#221c36; --line:#3b3158; --text:#ece8f7; --muted:#9a90b8; --accent:#2dd4bf; --p1:#2dd4bf; --p2:#fb923c; --board:#2a2145; --board2:#1b1530; color-scheme:dark; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--text); font-family:"Trebuchet MS","Gill Sans",system-ui,sans-serif; }
main { max-width:640px; margin:0 auto; padding:12px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.home { align-self:flex-start; color:var(--accent); text-decoration:none; }
h1 { margin:0; font-size:1.5rem; letter-spacing:.04em; }
button { font:inherit; color:inherit; background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 14px; cursor:pointer; }
button.on, button:hover:not(:disabled) { border-color:var(--accent); }
button:disabled { opacity:.5; cursor:default; }
button.link { background:none; border:0; color:var(--muted); text-decoration:underline; padding:0 4px; }
.bar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; color:var(--muted); }
.dot { display:inline-block; width:.9em; height:.9em; border-radius:50%; vertical-align:-1px; box-shadow:inset 0 0 0 3px rgba(0,0,0,.25); }
.p1 { --c:var(--p1); } .p2 { --c:var(--p2); }
.dot.p1 { background:var(--p1); } .dot.p2 { background:var(--p2); }
#status { margin:0; font-weight:700; min-height:1.4em; }
.frame { --s:min(76px, calc((100vw - 40px) / 7)); position:relative; width:calc(var(--s) * 7); padding:0; }
#cols { position:absolute; inset:0; display:grid; grid-template-columns:repeat(7, 1fr); z-index:2; }
.col { background:none; border:0; border-radius:0; padding:0; cursor:pointer; }
.col:disabled { cursor:default; }
.col.hover { background:linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,0)); }
#board { display:grid; grid-template-columns:repeat(7, var(--s)); grid-auto-rows:var(--s); background:linear-gradient(160deg, var(--board), var(--board2)); border-radius:18px; overflow:hidden; border:2px solid var(--line); }
.slot { position:relative; }
.slot::before { content:""; position:absolute; inset:9%; border-radius:50%; background:rgba(0,0,0,.4); box-shadow:inset 0 4px 8px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.1); }
.slot.p1::before, .slot.p2::before {
  border-radius:50%; background:radial-gradient(circle at 30% 24%, rgba(255,255,255,.58), transparent 32%), radial-gradient(circle at 50% 44%, var(--c) 55%, rgba(0,0,0,.28) 100%);
  box-shadow:0 0 0 2px rgba(255,255,255,.2), inset 0 -5px 0 rgba(0,0,0,.2), 0 3px 7px rgba(0,0,0,.28);
}
.slot.drop::before { animation:fall calc(.14s + var(--fall) * .055s) cubic-bezier(.45,0,.9,.5) both, settle .28s .18s ease-out; }
@keyframes fall { from { transform:translateY(calc(var(--fall) * -100% - 100%)); } to { transform:none; } }
@keyframes settle { 40% { transform:scale(1.07, .92); } }
.slot.win::before { animation:glow .8s ease-in-out infinite alternate; }
@keyframes glow { from { box-shadow:0 0 0 2px #fff, 0 0 4px var(--c); } to { box-shadow:0 0 0 3px #fff, 0 0 16px var(--c); } }
.score { margin:0; color:var(--muted); }
.score b { color:var(--text); }
.help { margin:0; color:var(--muted); font-size:.8rem; }
@media (prefers-reduced-motion: reduce) { .slot.drop::before, .slot.win::before { animation:none; } }

/* Make the playfield read like the blue tabletop board on its cover. */
main { --p1:#ef5d50; --p2:#f7c63c; --board:#2185d4; --board2:#146eb9; }
#board { border:5px solid #1264af; border-radius:20px; box-shadow:0 12px 24px rgba(19,69,117,.23), inset 0 2px 0 rgba(255,255,255,.3); }
.slot::before { background:#103f71; box-shadow:inset 0 4px 10px rgba(5,36,76,.6), 0 1px 0 rgba(255,255,255,.25); }
.slot.p1::before, .slot.p2::before { box-shadow:inset 0 3px 2px rgba(255,255,255,.4), inset 0 -6px 0 rgba(75,43,32,.18), 0 3px 7px rgba(5,37,79,.25); }

/* Title, intro and status follow the portal theme so they stay readable on the light panel. */
main > h1, main > #status { color:var(--inner-text); }
main > .portal-intro { color:var(--inner-muted); }