:root { --ink:#091537; --cream:#fffaf0; --gold:#ffd34e; }
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; }
body { font-family:Arial, Helvetica, sans-serif; background:#071334; color:white; }
button { font:inherit; }
.game-shell { min-height:100vh; overflow:hidden; position:relative; background:radial-gradient(circle at 50% 8%,#293887 0,#101c52 38%,#071332 72%); display:flex; flex-direction:column; }
.game-shell:before { content:""; position:absolute; inset:0; opacity:.17; background-image:linear-gradient(90deg,transparent 49.8%,#fff 50%,transparent 50.2%),linear-gradient(0deg,transparent 49.8%,#fff 50%,transparent 50.2%); background-size:80px 80px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
.spotlight { position:absolute; top:-20%; width:16%; height:105%; background:linear-gradient(to bottom,rgba(255,255,255,.2),transparent 70%); filter:blur(12px); transform:rotate(18deg); transform-origin:top; }
.spotlight-one { left:12%; }.spotlight-two { right:10%; transform:rotate(-18deg); }
.topbar { width:min(1400px,100%); margin:auto auto 0; padding:22px 38px; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.brand { display:flex; gap:12px; align-items:center; }.brand-dot { width:43px;height:43px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#101c52;font-size:22px;font-weight:1000;box-shadow:0 0 25px #ffcf4899; }.brand b { display:block; font-weight:1000;letter-spacing:.08em;font-size:17px; }.brand small { display:block;color:#aab6e6;margin-top:3px; }
.sound-button { border:1px solid #ffffff2f;background:#ffffff12;color:white;border-radius:999px;padding:10px 14px;cursor:pointer; }.sound-button span { display:inline-grid;place-items:center;background:#fff;color:#0a1740;border-radius:50%;width:23px;height:23px;margin-left:6px;font-weight:bold; }
.stage { width:min(1450px,100%); min-height:690px; margin:auto; padding:0 28px; display:grid; grid-template-columns:minmax(230px,1fr) minmax(430px,600px) minmax(230px,1fr); align-items:end; position:relative; z-index:1; }
.character-card { position:relative;height:650px;display:flex;align-items:flex-end;justify-content:center; }.host img { width:min(500px,128%);height:640px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 28px 25px #0009); }.speech { position:absolute;z-index:3;top:22px;right:-60px;background:white;color:var(--ink);padding:18px 24px;border-radius:22px 22px 22px 5px;box-shadow:0 14px 35px #0004;max-width:285px;transform:rotate(-2deg); }.speech:after { content:"";position:absolute;left:2px;bottom:-16px;border:12px solid transparent;border-left-color:#fff;transform:rotate(-28deg); }.speech span,.player-name span { display:block;color:#7655c8;font-size:11px;font-weight:900;letter-spacing:.14em;margin-bottom:6px; }.speech strong { font-size:21px;line-height:1.1; }
.game-center { align-self:center;text-align:center;position:relative;padding-top:20px; }.round-label { display:inline-block;background:#ffffff13;border:1px solid #ffffff2c;padding:8px 16px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.17em;color:#e6e9ff;margin-bottom:12px; }
.wheel-wrap { position:relative;width:min(50vw,510px);aspect-ratio:1;margin:0 auto 18px;filter:drop-shadow(0 28px 35px #0009); }.wheel-rim { width:100%;height:100%;border-radius:50%;padding:18px;background:repeating-conic-gradient(#ffd34e 0 4deg,#fff3b6 4deg 7deg,#cf8614 7deg 10deg);box-shadow:inset 0 0 0 6px #ffe58d,inset 0 0 0 12px #a45d0b,0 0 0 6px #fff4ad; }.wheel { width:100%;height:100%;border-radius:50%;position:relative;transition:transform 2.8s cubic-bezier(.1,.72,.06,1);background:conic-gradient(from -90deg,#ff3f8f 0 20%,#a855f7 20% 40%,#20a4f3 40% 60%,#ffb000 60% 80%,#48c774 80% 100%);box-shadow:inset 0 0 0 3px #fff9; }
.wheel:after { content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -90deg,transparent 0 71.3deg,#fff 71.3deg 72deg);opacity:.8; }
.pointer { position:absolute;z-index:5;left:50%;top:-20px;transform:translateX(-50%);width:64px;height:76px;background:linear-gradient(#ff5b47,#c91629);clip-path:polygon(50% 100%,0 25%,12% 8%,50% 0,88% 8%,100% 25%);filter:drop-shadow(0 5px 3px #0008); }.pointer i { position:absolute;width:16px;height:16px;border-radius:50%;background:#ffd75a;top:14px;left:24px;box-shadow:0 0 10px #fff; }
.wheel-label { position:absolute;z-index:2;width:92px;min-height:88px;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:white;text-shadow:0 2px 5px #0009; }.wheel-label span { position:absolute;top:-5px;right:2px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#08143b;color:#fff;font-size:11px;font-weight:900;border:2px solid #ffffffaa; }.wheel-label b { display:block;font-size:32px;line-height:1; }.wheel-label small { display:block;margin-top:4px;padding:4px 7px;border-radius:7px;background:#071438c9;color:#fff;font-weight:900;text-transform:uppercase;font-size:9px;letter-spacing:.03em;white-space:nowrap; }.wheel-label-0 { left:69.5%;top:23.5%; }.wheel-label-1 { left:81.5%;top:60%; }.wheel-label-2 { left:50%;top:82%; }.wheel-label-3 { left:18.5%;top:60%; }.wheel-label-4 { left:30.5%;top:23.5%; }.wheel-label.won { opacity:.45;filter:grayscale(.5); }
.wheel-center { position:absolute;z-index:3;inset:35%;border-radius:50%;display:grid;place-content:center;background:radial-gradient(circle at 35% 30%,#fff8bd,#ffc824 55%,#bd6908);color:#281440;font-size:20px;font-weight:1000;box-shadow:0 0 0 7px #fff5b5,0 10px 20px #0007;text-shadow:0 1px #fff; }.wheel-center small { display:block;font-size:8px;letter-spacing:.11em;text-transform:uppercase;margin-top:2px; }
.spin-button { width:min(360px,80%);border:0;border-radius:18px;background:linear-gradient(#79f246,#27ad21);color:white;font-size:25px;font-weight:1000;letter-spacing:.07em;padding:16px 22px;box-shadow:0 7px 0 #147711,0 13px 25px #0008,inset 0 2px #d8ffc8;cursor:pointer;text-shadow:0 2px 2px #185a16;transition:.18s; }.spin-button:not(:disabled):hover { transform:translateY(-2px);filter:brightness(1.08); }.spin-button:not(:disabled):active { transform:translateY(5px);box-shadow:0 2px 0 #147711; }.spin-button:disabled { filter:saturate(.4);cursor:not-allowed; }.spin-button i { float:right;font-style:normal; }.hint { color:#919dc9;font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-top:15px; }
.player { flex-direction:column;justify-content:flex-end;align-items:center;gap:5px; }.player-figure { width:min(425px,122%);height:585px;object-fit:contain;object-position:bottom;filter:drop-shadow(0 28px 25px #0009); }.player-name { background:white;color:var(--ink);padding:10px 30px;border-radius:15px;text-align:center;margin-top:-62px;z-index:2;box-shadow:0 8px 20px #0005; }.player-name span { margin:0; }.player-name strong { font-size:25px; }.progress-dots { display:flex;gap:7px;margin-top:12px;z-index:2; }.progress-dots i { font-style:normal;width:31px;height:31px;border-radius:50%;display:grid;place-items:center;border:1px solid #ffffff35;color:#8591c0;font-size:12px;font-weight:bold; }.progress-dots i.next { color:#101d4e;background:var(--gold);border-color:white;box-shadow:0 0 16px #ffd34e99; }.progress-dots i.done { background:#3fd565;color:#071334;border-color:#aaffbd; }
footer { position:relative;z-index:2;text-align:center;padding:15px;background:#050e2b99;border-top:1px solid #ffffff15;color:#aab6e6;font-size:12px;letter-spacing:.14em;text-transform:uppercase; }footer span { color:#ffd34e;margin:0 14px; }
.modal-backdrop { position:fixed;z-index:30;inset:0;background:#050b24d9;backdrop-filter:blur(12px);display:grid;place-items:center;padding:18px;animation:fade .3s both; }.prize-modal { position:relative;width:min(660px,95vw);max-height:92vh;overflow:auto;background:linear-gradient(145deg,#fffdf8,#f0eaff);color:#111a3e;border-radius:30px;padding:30px;text-align:center;box-shadow:0 35px 80px #000a,0 0 0 2px #ffffff99;animation:pop .45s cubic-bezier(.2,.9,.2,1.2) both; }.close { position:absolute;right:16px;top:14px;width:38px;height:38px;border-radius:50%;border:0;background:#141d45;color:white;font-size:26px;cursor:pointer; }.prize-kicker { display:inline-block;color:#7858c8;background:#ece5ff;border-radius:999px;padding:8px 13px;font-size:10px;font-weight:900;letter-spacing:.13em; }.prize-modal h2 { margin:12px 0 22px;font-size:clamp(27px,5vw,42px);letter-spacing:-.04em; }.continue { margin-top:22px;border:0;border-radius:14px;padding:14px 22px;background:#101c4c;color:white;font-weight:900;font-size:12px;letter-spacing:.08em;cursor:pointer; }
.song-card { display:grid;grid-template-columns:90px 1fr;gap:14px;text-align:left;align-items:center; }.record { width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:repeating-radial-gradient(circle,#16172a 0 8px,#313348 9px 11px);animation:record 4s linear infinite; }.record span { width:35px;height:35px;border-radius:50%;background:#ff3f8f;display:grid;place-items:center;color:white;font-size:20px; }.song-card p { margin:6px 0;color:#6e748c;font-size:13px; }.song-card iframe { grid-column:1/-1;border:0;border-radius:16px;width:100%;aspect-ratio:16/9;background:#111; }.play-song { grid-column:1/-1;min-height:120px;border:0;border-radius:18px;background:linear-gradient(135deg,#ff3f8f,#8e4bdb);color:white;font-size:18px;font-weight:1000;letter-spacing:.06em;cursor:pointer;box-shadow:0 10px 25px #8e4bdb55; }.play-song span { display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#fff;color:#b640ba;margin-right:10px; }.song-fallback { grid-column:1/-1;text-align:center;color:#7155b5;font-size:12px;font-weight:bold; }
.postcard { display:grid;grid-template-columns:46% 1fr;overflow:hidden;border-radius:20px;background:#10182e;color:white;min-height:350px;text-align:left; }.postcard img { width:100%;height:100%;object-fit:cover; }.postcard div { padding:38px 26px;display:flex;flex-direction:column;justify-content:center; }.postcard span { color:#ffd34e;font-size:11px;letter-spacing:.17em;font-weight:bold; }.postcard p { font-family:Georgia,serif;font-size:25px;line-height:1.2; }.postcard b { color:#e2bee9;font-size:14px; }
.memory { display:flex;align-items:center;justify-content:center;gap:24px;padding:6px; }.memory>p { max-width:210px;font-family:Georgia,serif;font-size:23px;line-height:1.25;text-align:left; }.polaroid { width:390px;background:white;padding:10px 10px 24px;box-shadow:0 12px 30px #17172f44;transform:rotate(-2deg); }.polaroid img { width:100%;height:230px;object-fit:cover; }.polaroid span { display:block;font-family:Georgia,serif;font-size:14px;margin-top:14px; }
.cake-scene { position:relative;min-height:390px;overflow:hidden;border-radius:20px;background:#0b1231; }.cake-scene img { width:100%;height:390px;object-fit:cover;object-position:center; }.cake-scene:after { content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#080d28dd); }.cake-scene p { position:absolute;z-index:2;bottom:18px;left:0;right:0;margin:0;color:white;text-shadow:0 2px 5px #000;font-family:Georgia,serif;font-size:23px; }.cake-glow { position:absolute;inset:0;box-shadow:inset 0 0 45px #ffdd75;animation:pulse 1.2s infinite alternate; }
.final-prize { position:relative;height:410px;overflow:hidden;border-radius:20px;background:#050719; }.final-prize>img { width:100%;height:100%;object-fit:cover;animation:fireworkZoom 3s ease-in-out infinite alternate; }.final-prize:after { content:"";position:absolute;inset:0;background:linear-gradient(transparent 38%,#020413e8); }.final-copy { position:absolute;z-index:2;left:20px;right:20px;bottom:20px;color:white;text-shadow:0 2px 5px #000; }.final-prize h3 { font-size:37px;margin:0; }.final-prize p { max-width:440px;margin:8px auto;font-family:Georgia,serif;font-size:20px;line-height:1.3; }.fireworks { position:absolute;inset:0;overflow:hidden;pointer-events:none; }.fireworks i { position:absolute;width:8px;height:8px;border-radius:50%;left:50%;top:50%;background:hsl(calc(var(--i)*35),90%,60%);animation:fire 1.7s infinite; }.fireworks i:nth-child(1){--i:1;--x:37vw;--y:32vh}.fireworks i:nth-child(2){--i:2;--x:-42vw;--y:-29vh}.fireworks i:nth-child(3){--i:3;--x:44vw;--y:-35vh}.fireworks i:nth-child(4){--i:4;--x:-36vw;--y:38vh}.fireworks i:nth-child(5){--i:5;--x:20vw;--y:-45vh}.fireworks i:nth-child(6){--i:6;--x:-23vw;--y:-39vh}.fireworks i:nth-child(n+7){--x:30vw;--y:35vh;animation-delay:.7s}
@keyframes fade{from{opacity:0}}@keyframes pop{from{opacity:0;transform:scale(.78) translateY(25px)}}@keyframes record{to{transform:rotate(360deg)}}@keyframes pulse{to{filter:brightness(1.2)}}@keyframes fireworkZoom{to{transform:scale(1.08);filter:saturate(1.25)}}@keyframes fire{0%{transform:translate(0,0);opacity:0}20%{opacity:1}100%{transform:translate(var(--x),var(--y));opacity:0}}
@media(max-width:980px){.stage{grid-template-columns:1fr;align-items:center;padding:0 16px}.game-center{order:1}.host{order:2;height:315px;position:absolute;left:-6px;bottom:14px;pointer-events:none}.host img{height:315px;width:235px}.speech{display:none}.player{order:3;height:305px;position:absolute;right:2px;bottom:18px}.player-figure{width:190px;height:285px}.player-name{padding:7px 18px;margin-top:-58px}.player-name strong{font-size:19px}.progress-dots{display:none}.wheel-wrap{width:min(74vw,500px)}.topbar{padding:16px}.brand small{display:none}.stage{min-height:720px;padding-bottom:250px}.game-center{padding-top:10px}}
@media(max-width:560px){.brand b{font-size:13px}.sound-button{font-size:0}.sound-button span{font-size:14px;margin:0}.wheel-wrap{width:min(88vw,430px)}.wheel-rim{padding:13px}.wheel-label{height:41%;width:60px}.wheel-label b{font-size:23px}.wheel-label small{font-size:7px}.wheel-label span{width:18px;height:18px;font-size:8px;margin-top:8px}.wheel-center{font-size:15px}.spin-button{font-size:20px}.host{left:-25px}.player{right:4px}.postcard{grid-template-columns:1fr}.postcard img{height:290px}.postcard div{padding:22px}.memory{flex-direction:column}.memory>p{text-align:center}.prize-modal{padding:25px 18px}.song-card{grid-template-columns:70px 1fr}.record{width:65px;height:65px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}.wheel{transition-duration:.01ms!important}}

.hidden { display:none !important; }
.offline-note { color:#aab6e6;font-size:11px;text-align:center;margin:8px 0 0; }
.song-offline { grid-column:1/-1;text-align:center;background:#f6efff;border-radius:16px;padding:22px; }
.song-offline p { color:#606985;margin:8px 0 18px; }
.play-offline { border:0;border-radius:14px;background:linear-gradient(135deg,#ff3f8f,#8e4bdb);color:white;padding:15px 22px;font-weight:900;cursor:pointer; }