:root{--bg-top: #8fd0ff;--bg-bottom: #2a6fc0}html,body{margin: 0;height: 100%;overflow: hidden;background: radial-gradient(ellipse at 50% 35%,var(--bg-top) 0%,#4f9be6 45%,var(--bg-bottom) 100%);font-family: "Segoe UI",system-ui,sans-serif}canvas{display: block}header{position: fixed;top: 20px;left: 0;right: 0;display: flex;flex-direction: column;align-items: center;gap: 10px;pointer-events: none;z-index: 2}#timer{min-width: 4.2em;padding: 6px 22px;border-radius: 18px;text-align: center;font-size: clamp(30px,5vw,46px);font-weight: 800;font-variant-numeric: tabular-nums;letter-spacing: 0.04em;color: #fff;background: linear-gradient(180deg,#a66bff 0%,#7b3fe4 55%,#5b23b8 100%);border: 2px solid rgba(235,215,255,0.85);box-shadow: 0 0 0 4px rgba(170,120,255,0.25),0 0 26px rgba(160,90,255,0.55),0 8px 18px rgba(30,0,80,0.35),inset 0 2px 6px rgba(255,255,255,0.45),inset 0 -6px 12px rgba(40,0,100,0.35);text-shadow: 0 2px 6px rgba(40,0,100,0.5)}#phase{display: flex;align-items: center;gap: 8px;padding: 5px 16px;border-radius: 999px;font-size: clamp(13px,2vw,16px);font-weight: 700;letter-spacing: 0.14em;text-transform: uppercase;color: #fff;background: rgba(60,20,130,0.45);border: 1px solid rgba(220,200,255,0.5);box-shadow: 0 4px 12px rgba(20,0,70,0.25)}#phase::before{content: "";width: 9px;height: 9px;border-radius: 50%;background: #4cff8f;box-shadow: 0 0 10px #4cff8f;animation: blink 1.2s ease-in-out infinite}#phase.pause::before{background: #ffc94c;box-shadow: 0 0 10px #ffc94c}@keyframes blink{50%{opacity: 0.3}}#round-id{position: fixed;top: 16px;left: 16px;z-index: 3;padding: 8px 14px;border-radius: 14px;color: #fff;background: rgba(60,20,130,0.45);border: 1px solid rgba(220,200,255,0.55);box-shadow: 0 6px 16px rgba(20,0,70,0.3),inset 0 1px 3px rgba(255,255,255,0.25);backdrop-filter: blur(6px);-webkit-backdrop-filter: blur(6px);pointer-events: none}#round-id small{display: block;font-size: 11px;font-weight: 700;letter-spacing: 0.16em;opacity: 0.8}#round-id b{font-size: clamp(15px,1.8vw,22px);font-weight: 800;font-variant-numeric: tabular-nums;letter-spacing: 0.06em}h1{margin: 0;text-align: center;color: #fff;font-size: clamp(28px,5vw,52px);font-weight: 800;letter-spacing: 0.08em;text-shadow: 0 4px 18px rgba(0,40,100,0.45);pointer-events: none}@media (max-width: 640px){header{top: 74px}h1{font-size: 26px;letter-spacing: 0.05em}}#slots{position: fixed;inset: 0;pointer-events: none}.slot{position: absolute;width: var(--size);height: var(--size);margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);border-radius: 50%;display: grid;place-items: center;background: radial-gradient(circle at 35% 28%,rgba(255,255,255,0.55) 0%,rgba(255,255,255,0) 45%),radial-gradient(circle at 50% 60%,rgba(20,70,150,0.35) 0%,rgba(10,40,100,0.55) 100%);border: 2px solid rgba(255,255,255,0.75);box-shadow: 0 0 0 3px rgba(120,190,255,0.25),0 6px 14px rgba(0,30,80,0.35),inset 0 -4px 10px rgba(0,20,60,0.35),inset 0 2px 6px rgba(255,255,255,0.35);backdrop-filter: blur(4px);-webkit-backdrop-filter: blur(4px);color: rgba(255,255,255,0.9);font-weight: 700;font-size: calc(var(--size) * 0.36);text-shadow: 0 1px 3px rgba(0,30,80,0.6);opacity: 0;transform: scale(0.4);animation: slot-in 0.5s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay: calc(var(--i) * 35ms + 300ms)}.slot .mult{position: absolute;top: 100%;left: 0;padding: 1px 6px;border-radius: 999px;white-space: nowrap;font-size: calc(var(--size) * 0.26);font-weight: 800;line-height: 1.25;color: #fff;background: rgba(20,40,110,0.55);text-shadow: none}.slot .mult:empty{display: none}.slot.gold .mult{color: #3a2600;background: linear-gradient(180deg,#ffe08a,#e0ac2f)}.slot.gold{background: radial-gradient(circle at 35% 28%,rgba(255,255,240,0.85) 0%,rgba(255,255,255,0) 45%),radial-gradient(circle at 50% 60%,#f6d36b 0%,#d4a12a 55%,#9c6f12 100%);border-color: #fff3c4;box-shadow: 0 0 0 3px rgba(255,210,90,0.35),0 0 16px rgba(255,200,60,0.55),0 6px 14px rgba(0,30,80,0.35),inset 0 -4px 10px rgba(110,70,0,0.45),inset 0 2px 6px rgba(255,255,255,0.6);color: #fff;text-shadow: 0 1px 3px rgba(110,70,0,0.8)}.slot.red{background: radial-gradient(circle at 35% 28%,rgba(255,235,235,0.8) 0%,rgba(255,255,255,0) 45%),radial-gradient(circle at 50% 60%,#f0564f 0%,#c81e2a 55%,#7c0a14 100%);border-color: #ffd0d0;box-shadow: 0 0 0 3px rgba(255,80,80,0.35),0 0 18px rgba(255,50,50,0.6),0 6px 14px rgba(0,30,80,0.35),inset 0 -4px 10px rgba(90,0,10,0.45),inset 0 2px 6px rgba(255,255,255,0.5);color: #fff;text-shadow: 0 1px 3px rgba(90,0,10,0.8)}.slot.red .mult{display: flex;flex-direction: column;align-items: center;padding: 2px 7px;border-radius: 10px}.slot .mult .bonus{margin-top: 1px;padding: 0 6px;border-radius: 999px;color: #fff;background: linear-gradient(180deg,#ff5a52,#c81e2a);box-shadow: 0 0 8px rgba(255,60,60,0.7)}.slot .ball{position: absolute;inset: -2px;border-radius: 50%;display: grid;place-items: center;background: radial-gradient(circle at 32% 26%,rgba(255,255,255,0.8) 0%,rgba(255,255,255,0) 32%),radial-gradient(circle at 50% 50%,var(--c) 50%,color-mix(in srgb,var(--c) 55%,#000) 100%);box-shadow: 0 5px 12px rgba(0,20,60,0.45),inset 0 -3px 6px rgba(0,0,0,0.3);animation: ball-in 0.35s cubic-bezier(.2,1.6,.4,1)}.slot .ball span{width: 64%;height: 64%;border-radius: 50%;display: grid;place-items: center;background: #fff;color: #111;font-size: calc(var(--size) * 0.32);font-weight: 900;text-shadow: none;box-shadow: inset 0 1px 3px rgba(0,0,0,0.25)}.slot .ball span.underline{text-decoration: underline}.slot .ball.win{z-index: 2;animation: ball-win-spin 1.6s cubic-bezier(.45,0,.55,1) infinite,ball-win-glow 0.8s ease-in-out infinite alternate}.slot .ball.win span{background: radial-gradient(circle at 50% 40%,#fffbe6,#ffe08a)}@keyframes ball-win-spin{0%{transform: scale(1) rotate(0)}50%{transform: scale(1.18) rotate(180deg)}100%{transform: scale(1) rotate(360deg)}}@keyframes ball-win-glow{from{box-shadow: 0 0 6px 2px rgba(255,220,90,0.6),inset 0 -3px 6px rgba(0,0,0,0.3)}to{box-shadow: 0 0 22px 9px rgba(255,210,60,0.95),inset 0 -3px 6px rgba(0,0,0,0.3)}}.slot .ball.drop{animation: ball-drop 1.4s cubic-bezier(.5,0,.9,.6) forwards}@keyframes ball-in{from{transform: scale(0.6)}to{transform: scale(1)}}@keyframes ball-drop{0%{transform: translateY(0) rotate(0)}15%{transform: translateY(-14px) rotate(-20deg)}100%{transform: translateY(120vh) rotate(280deg)}}@keyframes slot-in{to{opacity: 1;transform: scale(1)}}