.cw-case { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 8px auto 0; border-radius: 34px; overflow: hidden; background: radial-gradient(circle at 50% 44%, #40505a 0 5%, #26343d 65%, #17242c 100%); border: 10px solid #8b6232; box-shadow: inset 0 0 0 3px #d5ae65, inset 0 0 45px #071016, 0 18px 42px rgba(20,30,30,.25); }
.cw-case::after { content:''; position:absolute; inset:12px; border:1px solid rgba(255,224,155,.35); border-radius:22px; pointer-events:none; }
.cw-board,.cw-links { position:absolute; inset:0; width:100%; height:100%; }
.cw-links line { stroke:#101a20; stroke-width:5; stroke-linecap:round; }
.cw-gear { --size:26%; position:absolute; left:calc(var(--x)*1%); top:calc(var(--y)*1%); width:var(--size); aspect-ratio:1; translate:-50% -50%; border:0; padding:0; border-radius:50%; background:transparent; cursor:pointer; color:#3b2914; }
.cw-teeth { position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(#bc8a3e 0 7deg,#5f411f 7deg 12deg); rotate:var(--turn); transition:rotate .3s cubic-bezier(.2,.8,.2,1); filter:drop-shadow(0 6px 5px rgba(0,0,0,.45)); }
.cw-teeth::after { content:''; position:absolute; inset:9%; border-radius:50%; background:radial-gradient(circle at 35% 28%,#f0d58d,#b37a31 57%,#6d451d); box-shadow:inset 0 0 0 4px #5a3918,inset 0 0 0 7px rgba(255,230,160,.25); }
.cw-dial { position:absolute; inset:25%; border-radius:50%; background:#f7edcf; box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 0 0 2px #7b5528; transform:rotate(var(--turn)); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
.cw-dial i { position:absolute; left:50%; top:17%; width:3px; height:34%; border-radius:2px; background:#342716; transform-origin:50% 100%; translate:-50% 0; }
.cw-dial b { position:absolute; top:2%; left:50%; translate:-50% 0; font-size:clamp(8px,2vw,12px); }
.cw-dial span { position:absolute; inset:44%; border-radius:50%; background:#8b5d27; }
.cw-gear.aligned .cw-dial { box-shadow:0 0 0 4px #ffd96a,0 0 24px #ffd65b,inset 0 0 0 2px #7b5528; }
.cw-gear.hint { animation:cw-hint .8s ease-in-out 3; }
.cw-gear:focus-visible { outline:4px solid #7fd8ff; outline-offset:4px; }
@keyframes cw-hint { 50% { filter:drop-shadow(0 0 18px #fff27a); transform:scale(1.08); } }
@media (max-width:520px){.cw-case{border-width:7px}.cw-gear{--size:28%}}
@media (prefers-reduced-motion:reduce){.cw-teeth,.cw-dial{transition:none}.cw-gear.hint{animation:none;outline:4px solid #fff27a}}