:root{--bg1: #e8a6c3;--bg2: #a7d7f3;--bg3: #a8e6bf;--ink: #171722;--muted: rgba(23, 23, 34, .76);--card: rgba(255, 255, 255, .72);--stroke: rgba(255, 255, 255, .72);--shadow: 0 22px 60px rgba(18, 10, 30, .18);--shadow2: 0 12px 28px rgba(18, 10, 30, .16);--accent1: #ff5fae;--accent2: #42dfff;--accent3: #78ffb0}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";color:var(--ink);background:radial-gradient(1200px 700px at 15% 10%,rgba(255,111,177,.35),transparent 60%),radial-gradient(1000px 800px at 85% 20%,rgba(111,246,255,.28),transparent 60%),radial-gradient(900px 700px at 50% 95%,rgba(166,255,181,.22),transparent 65%),linear-gradient(120deg,#f0a9c8,#c9e9ff,#c9f2d2);overflow-x:hidden;overscroll-behavior:none}.page{min-height:100vh;position:relative}.bg{position:fixed;inset:0;pointer-events:none;overflow:hidden}.blob{position:absolute;width:520px;height:520px;border-radius:999px;filter:blur(36px);opacity:.55;transform:translateZ(0);animation:float 10s ease-in-out infinite}.blob-a{left:-120px;top:-120px;background:radial-gradient(circle at 30% 30%,var(--accent1),transparent 60%),radial-gradient(circle at 70% 70%,rgba(255,255,255,.5),transparent 60%)}.blob-b{right:-180px;top:12%;width:560px;height:560px;background:radial-gradient(circle at 35% 35%,var(--accent2),transparent 62%),radial-gradient(circle at 70% 70%,rgba(255,255,255,.45),transparent 60%);animation-duration:12s}.blob-c{left:18%;bottom:-220px;width:620px;height:620px;background:radial-gradient(circle at 35% 35%,var(--accent3),transparent 62%),radial-gradient(circle at 70% 70%,rgba(255,255,255,.45),transparent 60%);animation-duration:14s}.grain{position:absolute;inset:0;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");background-size:260px 260px;mix-blend-mode:multiply}@keyframes float{0%,to{transform:translate(0) scale(1)}50%{transform:translate(18px,-14px) scale(1.03)}}.hearts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}.heart{position:absolute;top:-12vh;font-size:var(--size);opacity:var(--alpha);-webkit-user-select:none;-moz-user-select:none;user-select:none;transform:translateZ(0);will-change:transform,opacity;filter:drop-shadow(0 10px 18px rgba(34,18,50,.12));animation:heartRain var(--dur) linear infinite;animation-delay:var(--delay);mix-blend-mode:screen}@keyframes heartRain{0%{transform:translate3d(0,-12vh,0) rotate(0) scale(.95);opacity:0}8%{opacity:var(--alpha)}to{transform:translate3d(var(--drift),112vh,0) rotate(var(--spin)) scale(1.05);opacity:0}}.topbar{position:relative;z-index:2;display:flex;justify-content:center;padding:22px 16px 8px}.pill{display:flex;gap:10px;align-items:center;padding:10px 14px;border-radius:999px;box-shadow:var(--shadow2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:600;letter-spacing:.2px;background:#ffffffc2;border:1px solid rgba(255,255,255,.74);color:#171722d1}.dot{width:10px;height:10px;border-radius:999px;background:linear-gradient(135deg,var(--accent1),var(--accent2));box-shadow:0 0 0 4px #ffffff8c}.stage{position:relative;z-index:2;min-height:calc(100vh - 72px);display:grid;place-items:center;padding:22px 16px 44px}.phase-explain{padding-top:5px}.phase-verify .actions,.phase-letter .actions,.phase-explain .actions{padding-top:14px}.phase-roulette{display:flex;justify-content:center;align-items:flex-start;height:calc(100vh - 72px);overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;padding:22px 16px 44px;scrollbar-width:thin;scrollbar-color:rgba(23,23,34,.45) rgba(255,255,255,.25)}.phase-roulette .cardMotion{margin:0 auto}.phase-roulette::-webkit-scrollbar{width:10px}.phase-roulette::-webkit-scrollbar-track{background:#ffffff47;border-radius:999px}.phase-roulette::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#ff5faed9,#42dfffbf);border-radius:999px;border:2px solid rgba(255,255,255,.35)}.phase-roulette::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#ff5faef2,#42dfffe6)}.cardMotion{width:min(860px,92vw)}.card{width:100%;border-radius:26px;padding:26px 26px 22px;box-shadow:var(--shadow);background:var(--card);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1)}.badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:#ffffffa6;border:1px solid rgba(255,255,255,.65);font-weight:700;letter-spacing:.2px;color:#2a2a34cc}.title{margin:16px 0 6px;font-size:clamp(26px,3.2vw,40px);line-height:1.06;letter-spacing:-.6px}.title-accent{background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}.subtitle{margin:0 0 14px;color:var(--muted);font-size:15.5px}.divider{height:1px;width:100%;background:linear-gradient(90deg,transparent,rgba(42,42,52,.1),transparent);margin:14px 0}.lyric{margin:0 0 14px;padding:14px 16px;border-radius:18px;color:#2a2a34d1;box-shadow:0 10px 20px #2212320f;font-style:italic;background:#ffffffc7;border:1px solid rgba(255,255,255,.78)}.body{margin:0 0 18px;color:#2a2a34c7;font-size:15.5px;line-height:1.65}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;cursor:pointer;padding:12px 16px;border-radius:16px;font-weight:800;letter-spacing:.2px;display:inline-flex;align-items:center;gap:10px;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease,background .18s ease,opacity .18s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.58;cursor:not-allowed;filter:grayscale(.15)}.primary{color:#fffffff5;background:linear-gradient(135deg,#ff5faeeb,#42dfffe0);box-shadow:0 16px 30px #ff5fae38}.primary .btn-svg{color:#777676}.primary:hover{filter:brightness(1.03);box-shadow:0 16px 30px #ff7eb338}.ghost{color:#171722d1;background:#ffffffb3;border:1px solid rgba(255,255,255,.76)}.ghost:hover{filter:brightness(1.03)}.btn-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:999px;background:#ffffff52;border:1px solid rgba(255,255,255,.4);box-shadow:0 10px 18px #22123214}.btn-svg{width:14px;height:14px;color:#2a2a34e6;transition:transform .18s ease}.btn:hover .btn-svg{transform:translate(1px)}.form{margin-top:10px}.label{display:block;font-weight:800;color:#2a2a34cc;margin-bottom:8px}.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.input{flex:1 1 260px;min-width:220px;padding:13px 14px;border-radius:16px;border:1px solid rgba(255,255,255,.75);background:#ffffffb3;outline:none;font-size:16px;font-weight:800;letter-spacing:.6px;box-shadow:0 10px 20px #2212320f}.input:focus{box-shadow:0 0 0 6px #6ff6ff2e,0 14px 28px #2212321a}.error{margin:10px 0 0;color:#b42c5af2;font-weight:800}.hint{margin-top:10px;color:#2a2a349e;font-size:13.5px}.inputRow{border-radius:18px;transition:transform .14s ease,box-shadow .14s ease}.inputRow.typing{animation:typePulse .18s ease}@keyframes typePulse{0%{transform:scale(1)}55%{transform:scale(1.01)}to{transform:scale(1)}}.shake{animation:shake .52s ease both}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-6px)}80%{transform:translate(6px)}}.letterBox{padding:16px;border-radius:20px;background:#ffffffa3;border:1px solid rgba(255,255,255,.72);box-shadow:0 10px 20px #2212320f}.letterP{margin:0 0 12px;color:#2a2a34c7;font-size:15.5px;line-height:1.7}.letterP:last-child{margin-bottom:0}.steps{margin:14px 0;display:grid;gap:10px}.step{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:18px;background:#ffffffa3;border:1px solid rgba(255,255,255,.72);box-shadow:0 10px 20px #2212320f}.stepNum{width:34px;height:34px;border-radius:999px;display:grid;place-items:center;font-weight:950;color:#2a2a34e0;background:linear-gradient(135deg,#ff6fb18c,#6ff6ff73);border:1px solid rgba(255,255,255,.55)}.stepText{display:grid;gap:4px}.stepTitle{font-weight:950;letter-spacing:-.2px;color:#2a2a34e0}.stepDesc{color:#2a2a34b8;font-size:14.5px;line-height:1.5}.explainPreview{margin-top:12px;padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.72);background:#ffffffa3;display:grid;gap:10px}.previewWheelSoft{height:160px;border-radius:18px;border:1px dashed rgba(42,42,52,.18);display:grid;place-items:center;font-weight:950;color:#2a2a348c;background:#ffffff59}.previewPrizesSoft{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.prizeCardSoft{height:72px;border-radius:16px;background:radial-gradient(18px 18px at 25% 35%,rgba(255,111,177,.25),transparent 60%),radial-gradient(18px 18px at 75% 65%,rgba(111,246,255,.22),transparent 60%),#ffffff85;border:1px solid rgba(255,255,255,.64)}.prizeCardSoft.used{filter:grayscale(1) brightness(.92);opacity:.55}.miniHint{color:#2a2a349e;font-size:13.5px}.previewBox{margin-top:14px;padding:14px;border-radius:20px;border:1px solid rgba(255,255,255,.72);background:#ffffffa3;display:grid;gap:12px}.previewWheel{height:220px;border-radius:18px;border:1px dashed rgba(42,42,52,.18);display:grid;place-items:center;font-weight:900;color:#2a2a348c}.previewPrizes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.miniCard{height:78px;border-radius:16px;background:#ffffff8c;border:1px solid rgba(255,255,255,.7)}@media(max-width:520px){.previewPrizesSoft,.previewPrizes{grid-template-columns:repeat(2,minmax(0,1fr))}}.rouletteShell{margin-top:10px}.rouletteViewport{position:relative;overflow:hidden;border-radius:22px;padding:16px;background:#ffffffa3;border:1px solid rgba(255,255,255,.72);box-shadow:0 14px 28px #22123214}.rouletteTrack{display:flex;gap:12px;transform:translateZ(0);will-change:transform}.rouletteTrack.spinning{transition:transform 4.9s cubic-bezier(.12,.82,.12,.99)}.rouletteItem{width:160px;flex:0 0 auto;border-radius:18px;overflow:hidden;background:#ffffffc7;border:1px solid rgba(255,255,255,.8);box-shadow:0 10px 18px #2212320f}.rouletteItemImg{width:100%;height:100px;-o-object-fit:cover;object-fit:cover;display:block}.rouletteItemMeta{padding:10px 12px 12px;display:grid;gap:4px}.rouletteItemTitle{font-weight:950;letter-spacing:.2px}.rouletteItemSub{font-size:12.5px;color:#2a2a34b3}.rouletteItem.used{filter:grayscale(1) brightness(.95);opacity:.55}.rouletteMarker{position:absolute;left:50%;top:8px;transform:translate(-50%);width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;border-top:14px solid rgba(23,23,34,.78);filter:drop-shadow(0 8px 14px rgba(0,0,0,.16));z-index:3}.rouletteCenterLine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translate(-50%);background:linear-gradient(to bottom,#fff0,#2a2a342e,#fff0);z-index:2;pointer-events:none}.rouletteFade{position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}.rouletteFadeLeft{left:0;background:linear-gradient(to right,#ffffff8c,#fff0)}.rouletteFadeRight{right:0;background:linear-gradient(to left,#ffffff8c,#fff0)}.rouletteActions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}.rouletteInfo{margin-left:auto;padding:10px 12px;border-radius:16px;background:#ffffffa3;border:1px solid rgba(255,255,255,.72);color:#2a2a34bf;font-weight:700}.historyBox{margin-top:12px;padding:12px;border-radius:20px;background:#ffffffa3;border:1px solid rgba(255,255,255,.72)}.historyTitle{font-weight:950;color:#2a2a34cc;margin-bottom:10px}.historyList{display:flex;gap:8px;flex-wrap:wrap}.historyChip{display:inline-flex;gap:8px;align-items:center;padding:8px 10px;border-radius:999px;background:#ffffffb8;border:1px solid rgba(255,255,255,.78);font-weight:900;color:#2a2a34c7}.historyIdx{opacity:.65;font-weight:900}.historyTag{font-weight:1000}.prizeSection{margin-top:14px}.prizeSectionHeader{display:grid;gap:4px;margin-bottom:10px}.prizeSectionTitle{font-size:15.5px;font-weight:1000;letter-spacing:-.2px;color:#171722eb}.prizeSectionSub{font-size:13.5px;color:#171722b3;font-weight:750}.prizeGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.prizeCard{position:relative;border-radius:22px;overflow:hidden;background:#ffffffc7;border:1px solid rgba(255,255,255,.8);box-shadow:0 16px 30px #120a1e1a,inset 0 1px #ffffff8c;transform:translateZ(0);transition:transform .18s ease,box-shadow .18s ease,filter .18s ease,opacity .18s ease}.prizeCard:after{content:"";position:absolute;inset:0;border-radius:22px;pointer-events:none;box-shadow:inset 0 0 0 1px #17172212,inset 0 0 0 2px #ffffff59;opacity:.9}.prizeCard:hover{transform:translateY(-2px);box-shadow:0 20px 44px #120a1e24,inset 0 1px #ffffff8c}.prizeImgWrap{position:relative}.prizeImgWrap:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,#0000,#0000001a);pointer-events:none}.prizeImg{width:100%;height:112px;-o-object-fit:cover;object-fit:cover;display:block;filter:contrast(1.03) saturate(1.02);transform:translateZ(0)}.prizeMeta{padding:12px 13px 14px;display:grid;gap:6px}.prizeTag{display:inline-flex;width:-moz-fit-content;width:fit-content;align-items:center;gap:8px;padding:7px 10px;border-radius:999px;background:#ffffffb8;border:1px solid rgba(255,255,255,.82);box-shadow:0 10px 20px #120a1e0f;font-weight:1000;letter-spacing:.2px;color:#171722e0}.prizeTitle{font-size:14.25px;font-weight:950;letter-spacing:-.2px;color:#171722db;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.prizeUsedBadge,.prizeLastBadge{position:absolute;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:1000;letter-spacing:.2px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.prizeUsedBadge{left:10px;top:10px;background:#171722b8;border:1px solid rgba(255,255,255,.22);color:#ffffffeb;box-shadow:0 14px 28px #0000002e}.prizeLastBadge{right:10px;top:10px;background:#ffffffb3;border:1px solid rgba(255,255,255,.78);color:#171722e0;box-shadow:0 14px 28px #120a1e1f}.prizeCard.used{opacity:.62;filter:grayscale(.95) brightness(.95)}.prizeCard.used .prizeImg{filter:grayscale(1) contrast(.95) brightness(.92)}.prizeCard.used:before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(135deg,#1717220d 0px 10px,#ffffff0d 10px 20px);opacity:.55}.prizeCard.last{outline:2px solid rgba(66,223,255,.4);box-shadow:0 22px 60px #42dfff29,0 16px 30px #120a1e1f,inset 0 1px #ffffff8c}.prizeCard.last .prizeTag{background:linear-gradient(135deg,#42dfff42,#ff5fae2e)}@media(max-width:860px){.prizeGrid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:620px){.prizeGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.prizeImg{height:120px}}.resultOverlay{position:fixed;inset:0;z-index:2147483647;display:grid;place-items:center;padding:18px;background:#0a081247;-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}.resultModal{width:min(560px,92vw);border-radius:28px;padding:18px 18px 14px;background:#ffffffd6;border:1px solid rgba(255,255,255,.85);box-shadow:0 30px 90px #00000038;position:relative;overflow:hidden}.resultModal:after{content:"";position:absolute;inset:-2px;border-radius:30px;pointer-events:none;box-shadow:inset 0 0 0 1px #17172214,inset 0 0 0 2px #ffffff59;opacity:.9}.resultModalTop{text-align:center;padding:8px 10px 10px}.resultKicker{font-weight:1000;color:#171722c7;letter-spacing:.2px}.resultTagBig{margin-top:6px;font-size:52px;line-height:1;font-weight:1000;letter-spacing:-1px;background:linear-gradient(135deg,#ff5faef2,#42dfffeb);-webkit-background-clip:text;background-clip:text;color:transparent}.resultTitleNice{margin-top:8px;font-weight:950;color:#171722d9}.resultModalBody{margin-top:10px;display:grid;gap:10px;justify-items:center}.resultModalImg{width:100%;height:190px;-o-object-fit:cover;object-fit:cover;border-radius:22px;border:1px solid rgba(255,255,255,.82);box-shadow:0 18px 40px #120a1e24}.resultModalHint{text-align:center;font-size:13.5px;font-weight:800;color:#171722a8}.resultModalActions{display:flex;justify-content:center;padding-top:10px}.fireworks{position:absolute;inset:0;pointer-events:none}.fireRing{position:absolute;left:50%;top:92px;width:12px;height:12px;border-radius:999px;transform:translate(-50%);border:2px solid rgba(66,223,255,.55);animation:ringPop .9s ease-out forwards;opacity:0}.fireGlow{position:absolute;left:50%;top:92px;width:18px;height:18px;border-radius:999px;transform:translate(-50%);background:radial-gradient(circle,rgba(255,95,174,.32),rgba(66,223,255,.1),transparent 70%);filter:blur(2px);animation:glowPop 1s ease-out forwards;opacity:0}@keyframes ringPop{0%{opacity:0;transform:translate(-50%) scale(.4)}20%{opacity:1}to{opacity:0;transform:translate(-50%) scale(30)}}@keyframes glowPop{0%{opacity:0;transform:translate(-50%) scale(.6)}25%{opacity:1}to{opacity:0;transform:translate(-50%) scale(18)}}.spark{position:absolute;left:50%;top:92px;width:var(--size);height:var(--size);border-radius:999px;opacity:var(--alpha);transform:translate(-50%,-50%) rotate(var(--rot)) translateY(0);background:linear-gradient(135deg,#ff5faef2,#42dfffe6);box-shadow:0 12px 24px #0000001f;animation:sparkFly var(--dur) ease-out forwards;animation-delay:var(--delay)}@keyframes sparkFly{0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) translateY(0) scale(.7)}15%{opacity:var(--alpha)}to{opacity:0;transform:translate(-50%,-50%) rotate(var(--rot)) translateY(calc(var(--dist) * -1)) scale(1)}}@media(prefers-reduced-motion:reduce){.blob,.heart,.shake{animation:none!important}.btn,.input,.card{transition:none!important}.fireworks{display:none!important}}