:root { color-scheme: dark; --ink:#eff4ff; --muted:#aebbd3; --panel:#141b30; --cell:#202a45; --accent:#7f8cff; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; min-height:100vh; display:grid; place-items:center; padding:clamp(16px,4vw,48px); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--ink); background:radial-gradient(circle at 15% 8%,#25315d 0,transparent 31rem),radial-gradient(circle at 86% 92%,#3a2257 0,transparent 33rem),#090d18; }
.game-shell { width:min(100%,760px); }
.game-card { padding:clamp(20px,4vw,36px); border:1px solid #ffffff14; border-radius:28px; background:linear-gradient(145deg,#18213bdf,#10172ad9); box-shadow:0 28px 80px #00000075, inset 0 1px #ffffff12; backdrop-filter:blur(16px); }
.game-header { display:flex; gap:18px; justify-content:space-between; align-items:flex-start; }
.header-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; gap:9px; }
.eyebrow { margin:0 0 7px; color:#9aa9ff; font-size:.72rem; font-weight:750; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2rem,6vw,3.2rem); letter-spacing:-.06em; line-height:.9; }
.guide { margin:14px 0 0; max-width:490px; color:var(--muted); line-height:1.5; font-size:.93rem; }
button { font:inherit; cursor:pointer; }
.new-game { flex:0 0 auto; border:1px solid #9ba6ff75; border-radius:12px; padding:11px 15px; color:white; font-weight:700; background:linear-gradient(135deg,#6877ef,#9b62d8); box-shadow:0 8px 20px #5258c344; transition:transform .18s,filter .18s; }
.new-game:hover { filter:brightness(1.12); transform:translateY(-1px); }
.undo-move { border:1px solid #8695bd75; border-radius:12px; padding:11px 15px; color:#e4eafe; font-weight:700; background:#222d4a; transition:transform .18s,filter .18s,opacity .18s; }
.undo-move:hover:not(:disabled) { filter:brightness(1.15); transform:translateY(-1px); }
.undo-move:disabled { cursor:not-allowed; opacity:.42; }
.new-game:focus-visible,.cell:focus-visible { outline:3px solid #d5d8ff; outline-offset:3px; }
.game-info { display:flex; gap:12px; margin:26px 0 18px; }
.score-box,.next-box { min-height:68px; border:1px solid #ffffff0e; border-radius:16px; background:#0b1020a6; padding:12px 16px; }
.score-box { min-width:108px; display:flex; flex-direction:column; justify-content:center; }
.score-box span,.next-box>span { display:block; color:var(--muted); font-size:.72rem; font-weight:650; text-transform:uppercase; letter-spacing:.08em; }
.score-box strong { margin-top:2px; font-size:1.6rem; line-height:1; }
.next-box { flex:1; }
.next-balls { display:flex; gap:9px; margin-top:9px; }
.preview-ball { position:relative; flex:0 0 20px; width:20px; height:20px; left:auto; top:auto; }
.board-wrap { position:relative; width:82%; max-width:560px; margin:0 auto; }
.board { width:100%; aspect-ratio:1; display:grid; grid-template-columns:repeat(9,1fr); gap:clamp(3px,.7vw,6px); padding:clamp(6px,1.2vw,10px); border:1px solid #8397ca2e; border-radius:19px; background:linear-gradient(140deg,#0a1022,#101a33); box-shadow:inset 0 1px #ffffff0b; }
.cell { position:relative; min-width:0; padding:0; border:1px solid #ffffff0b; border-radius:clamp(5px,1.3vw,10px); background:linear-gradient(145deg,#27334f,#18223c); aspect-ratio:1; transition:background .15s,transform .15s; }
.cell:hover:not(:disabled) { background:#2d3a5b; }
.cell.selected { border-color:#c8cdff; background:#35436b; box-shadow:inset 0 0 0 2px #9da8ff75; }
.cell.reachable::after { content:""; position:absolute; width:21%; aspect-ratio:1; border-radius:50%; background:#bdc7ff50; left:39.5%; top:39.5%; }
.ball,.moving-ball { position:absolute; z-index:1; width:72%; height:72%; left:14%; top:14%; border-radius:50%; background:radial-gradient(circle at 30% 24%,#fff 0 3%,var(--shine) 4%,transparent 23%),radial-gradient(circle at 34% 29%,var(--light),var(--color) 48%,var(--dark) 100%); box-shadow:inset -10px -12px 13px #00000045,inset 5px 5px 8px #ffffff3d,0 4px 9px #0000009c; }
.next-balls .preview-ball { position:relative; flex:0 0 20px; width:20px; height:20px; left:auto; top:auto; }
.cell.selected .ball { animation:pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { transform:scale(1.09); box-shadow:inset -10px -12px 13px #00000045,inset 5px 5px 8px #ffffff3d,0 0 0 5px #aab3ff3b,0 5px 10px #0000009c; } }
.moving-ball { position:absolute; z-index:5; pointer-events:none; transition:left .1s linear,top .1s linear; }
.game-over { position:absolute; inset:0; z-index:8; display:grid; place-items:center; padding:18px; border-radius:19px; background:#050812a8; backdrop-filter:blur(4px); }
#game-over-modal[hidden] { display:none; }
.game-over-panel { width:min(100%,310px); padding:26px; text-align:center; border:1px solid #b6c1ff43; border-radius:20px; background:#17213df5; box-shadow:0 20px 45px #000; }
.game-over-panel p { margin:0; font-size:1.55rem; font-weight:800; }.game-over-panel strong { display:block; margin:8px 0 20px; color:#bfc8e5; }
@media (max-width:520px) { .game-card { border-radius:20px; }.game-header { flex-direction:column; }.header-actions { justify-content:flex-start; }.new-game { align-self:flex-start; }.game-info { flex-wrap:wrap; margin-top:20px; }.score-box { flex:1; }.next-box { flex-basis:100%; }.score-box,.next-box { padding:10px 12px; }.board-wrap { width:100%; }.board { border-radius:15px; } }