*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;padding:12px;background:radial-gradient(ellipse at top,hsl(var(--h) 28% 23%),#101620 72%);color:#f5f7f9;font:16px/1.5 system-ui,sans-serif;min-height:100vh}main{max-width:480px;margin:0 auto;padding:14px;border:1px solid #ffffff30;border-radius:22px;background:#111925ed;box-shadow:0 20px 70px #0006}header{display:flex;justify-content:space-between;align-items:center;gap:8px}small{color:hsl(var(--h) 80% 76%);letter-spacing:.12em;font-size:12px}h1{font-size:clamp(25px,7vw,34px);line-height:1.1;margin:12px 0}p{margin:12px 0;overflow-wrap:anywhere}#info{padding:12px;border-left:3px solid hsl(var(--h) 75% 65%);background:#ffffff09;border-radius:8px;font-weight:600}#board{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:6px;margin:16px 0}.tile{display:flex;align-items:center;justify-content:center;min-height:48px;min-width:0;border:1px solid hsl(var(--h) 45% 45%);border-radius:var(--radius);background:linear-gradient(145deg,hsl(var(--h) 33% 29%),hsl(var(--h) 30% 16%));font-size:18px;text-align:center;overflow-wrap:anywhere;padding:3px;color:#fff;box-shadow:inset 0 2px #ffffff15}.tile.empty{background:#ffffff04;color:#8d9baa;border-style:dashed}.tile.filled{border-bottom:3px solid hsl(var(--h) 65% 57%)}button{font:inherit;min-height:48px;min-width:44px;padding:10px 12px;border:1px solid #ffffff40;border-radius:12px;color:#fff;background:hsl(var(--h) 30% 28%);cursor:pointer;touch-action:manipulation}button:hover{filter:brightness(1.15)}button:focus-visible{outline:3px solid #fff;outline-offset:2px}button:disabled{opacity:.65;cursor:default}#controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#controls button{overflow-wrap:anywhere}#status{font-weight:800;color:hsl(var(--h) 90% 78%)}#feedback{min-height:24px;font-size:14px;color:#edcf9d}#count,.foot{font-size:13px;color:#adbbc9}.foot{border-top:1px solid #ffffff25;padding-top:12px}details{margin-top:16px}summary{cursor:pointer;min-height:44px;padding:10px 0}a{color:#a9d9ff} @media(prefers-reduced-motion:no-preference){button{transition:filter .12s}}
/* Game-specific board materials and readable symbolic cues. */
.tile{border-radius:50%;min-height:62px;background:radial-gradient(circle at 35% 25%,#617589,#213544);font:700 21px Georgia,serif}#board{border-bottom:5px solid #aa9876;padding-bottom:10px}