.rboard { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); grid-template-rows:repeat(8, minmax(0, 1fr)); gap:3px; width:min(480px, 100%); aspect-ratio:1; padding:8px; border-radius:16px; background:#0b3b46; box-shadow:inset 0 0 0 2px #d1a24f, 0 10px 20px rgba(0,0,0,.28); box-sizing:border-box; }
.sq { position:relative; display:grid; place-items:center; padding:0; border:0; border-radius:6px; background:linear-gradient(145deg, #12606f, #0d4a58); cursor:default; min-width:0; }
.sq.ok { cursor:pointer; } .sq.ok:hover { background:linear-gradient(145deg, #1a7a8c, #12606f); }
.sq.ok.hints::after { content:''; width:22%; aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.42); }
.sq:focus-visible { outline:3px solid #fde68a; outline-offset:-2px; }
.disc { width:78%; aspect-ratio:1; border-radius:50%; box-shadow:0 3px 5px rgba(0,0,0,.45), inset 0 -3px 0 rgba(0,0,0,.2); transition:background .25s ease, transform .25s ease; animation:rvPop .22s ease; }
.disc.a { background:radial-gradient(circle at 35% 30%, #fde68a, #f59e0b 60%, #b45309); }
.disc.i { background:radial-gradient(circle at 35% 30%, #c4b5fd, #6d28d9 60%, #3b1a85); }
.sq.last { box-shadow:inset 0 0 0 3px #fde68a; }
@keyframes rvPop { from { transform:scale(.4); } }
.chip.amber b { color:#f59e0b; } .chip.indigo b { color:#a78bfa; }
.bar button { min-height:44px; }
#levels button.on, #sides button.on { background:var(--accent); color:var(--accent-ink,#06202e); }