.cur { font:800 2rem ui-monospace, Menlo, monospace; letter-spacing:.15em; min-height:1.4em; color:#fbbf24; }
.wheel { position:relative; width:min(320px, 84vw); aspect-ratio:1; } .tile { position:absolute; left:50%; top:50%; width:20%; aspect-ratio:1; padding:0; border-radius:50%; font:800 1.4rem system-ui; transform:translate(-50%, -50%) translate(calc(var(--x, 0) * 38vw * 0.62), calc(var(--y, 0) * 38vw * 0.62)); }
@media (min-width:640px) { .tile { transform:translate(-50%, -50%) translate(calc(var(--x, 0) * 124px), calc(var(--y, 0) * 124px)); } }
.wheel .tile { border:2px solid var(--line); box-shadow:0 6px 13px rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.14); }
.wheel .tile:hover { border-color:var(--accent); }
.tile.center { background:radial-gradient(circle at 35% 28%,#ffeaa0,#fbbf24 70%,#d28b0d); color:#2a1b02; border:0; }
.found { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; max-width:640px; } .found span { background:#17223a; border:1px solid var(--line); border-radius:8px; padding:2px 10px; } .found .nine { background:#14532d; border-color:#4ade80; }

.wheel .tile:not(.center) { color:#4c3724; border-color:#d7b987; background:radial-gradient(circle at 32% 24%,#fff7df,#e7c894 72%,#bb8b56); box-shadow:0 5px 10px rgba(60,38,17,.22), inset 0 2px 0 rgba(255,255,255,.75); }
.wheel .tile:hover { border-color:#8d6b31; }