:root{color:#2b2b3a;background:#fff7e6;font-family:system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 15% 20%,#ffd93d59,#0000 40%),radial-gradient(circle at 85% 15%,#4d96ff40,#0000 40%),radial-gradient(circle at 50% 90%,#ff6b6b40,#0000 45%),#fff7e6;min-height:100vh;margin:0}.app{flex-direction:column;align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:24px 16px 64px;display:flex}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.header h1{letter-spacing:-1px;text-shadow:2px 2px #ffd93d;margin:0;font-size:clamp(1.8rem,4vw,2.8rem)}.header .accent{color:#ff6b6b}.wheels{grid-template-columns:repeat(var(--wheel-count,2), minmax(240px, 1fr));gap:24px;width:100%;display:grid}@media (width<=700px){.wheels{grid-template-columns:1fr}}.wheel-column{background:#fff;border:4px solid #2b2b3a;border-radius:24px;flex-direction:column;align-items:center;gap:8px;padding:16px;display:flex;box-shadow:6px 6px #2b2b3a}.wheel-header{justify-content:space-between;align-items:center;gap:8px;width:100%;display:flex}.wheel-header h2{text-overflow:ellipsis;white-space:nowrap;margin:0;font-size:1.2rem;overflow:hidden}.wheel-actions{flex-shrink:0;gap:6px;display:flex}.wheel-canvas{width:100%;max-width:340px;position:relative}canvas.wheel{aspect-ratio:1;width:100%;display:block}.pointer{filter:drop-shadow(0 2px #0003);pointer-events:none;border-top:26px solid #2b2b3a;border-left:14px solid #0000;border-right:14px solid #0000;width:0;height:0;position:absolute;top:-6px;left:50%;transform:translate(-50%)}.hub{aspect-ratio:1;cursor:pointer;background:#fff;border:4px solid #2b2b3a;border-radius:50%;width:15%;transition:transform 80ms,box-shadow 80ms,background .15s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 3px #2b2b3a}.hub:hover:not(:disabled){background:#ffd93d;transform:translate(-50%,-50%)scale(1.08)}.hub:active:not(:disabled){transform:translate(-50%,calc(3px - 50%));box-shadow:0 0 #2b2b3a}.hub:disabled{cursor:not-allowed;opacity:.7}.wheel-status{color:#7a7a8c;margin:0;font-size:.85rem}.chip{color:#2b2b3a;cursor:pointer;background:#fff;border:3px solid #2b2b3a;border-radius:999px;padding:6px 14px;font-size:.85rem;font-weight:700;transition:transform 80ms,box-shadow 80ms;box-shadow:3px 3px #2b2b3a}.chip:hover:not(:disabled){transform:translate(1px,1px);box-shadow:2px 2px #2b2b3a}.chip:disabled{opacity:.5;cursor:not-allowed}.chip-primary{background:#ffd93d}.chip-danger{color:#fff;background:#ff6b6b}.respin{color:#4d96ff;cursor:pointer;background:0 0;border:none;font-size:.9rem;font-weight:700;text-decoration:underline}.respin:disabled{color:#b0b0c0;cursor:not-allowed;text-decoration:none}.setup-bar{flex-wrap:wrap;align-items:center;gap:12px;width:100%;display:flex}.setup-save-form{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.setup-save-form input{font:inherit;border:3px solid #2b2b3a;border-radius:999px;min-width:240px;padding:6px 14px;font-weight:600}.setup-chips{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.setup-chips li{align-items:stretch;display:flex}.setup-chip{border-right-width:0;border-radius:999px 0 0 999px;box-shadow:3px 3px #2b2b3a}.setup-delete{border-radius:0 999px 999px 0;padding:6px 10px}.controls{z-index:5;background:linear-gradient(#fff7e600,#fff7e6 30%);flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin:0 -16px;padding:12px 16px;display:flex;position:sticky;bottom:0}.spin-button{color:#fff;letter-spacing:2px;cursor:pointer;background:linear-gradient(#ff6b6b,#e84545);border:5px solid #2b2b3a;border-radius:999px;padding:14px 64px;font-size:clamp(1.4rem,3vw,2rem);font-weight:900;transition:transform 80ms,box-shadow 80ms;box-shadow:0 6px #2b2b3a}.spin-button:hover:not(:disabled){transform:translateY(2px);box-shadow:0 4px #2b2b3a}.spin-button:active:not(:disabled){transform:translateY(6px);box-shadow:0 0 #2b2b3a}.spin-button:disabled{filter:grayscale(.7);cursor:not-allowed}.combo{text-align:center;background:#fff;border:4px dashed #ff6b6b;border-radius:20px;padding:16px 28px;font-size:clamp(1.2rem,3vw,1.8rem);font-weight:800;animation:.35s cubic-bezier(.2,1.6,.4,1) pop}.combo-label{color:#7a7a8c;text-transform:uppercase;letter-spacing:1px;font-size:.85rem;font-weight:700;display:block}@keyframes pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.editor-backdrop{z-index:10;background:#2b2b3a8c;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.editor{background:#fff;border:4px solid #2b2b3a;border-radius:20px;flex-direction:column;gap:12px;width:min(420px,100%);padding:20px;display:flex;box-shadow:8px 8px #2b2b3a}.editor label{flex-direction:column;gap:6px;font-size:.9rem;font-weight:700;display:flex}.editor input,.editor textarea{font:inherit;resize:vertical;border:3px solid #2b2b3a;border-radius:12px;padding:10px;font-weight:500}.editor-buttons{justify-content:flex-end;gap:8px;display:flex}.editor-hint{color:#7a7a8c;margin:0;font-size:.8rem}
