*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;max-width:100%;height:100%;overflow:hidden;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#020617;color:#fff}
body{display:flex;align-items:center;justify-content:center}
.word-shower-app{width:min(100%,768px);height:100dvh;position:relative;overflow:hidden;background:radial-gradient(circle at 50% -10%,#3b0764 0%,#0f172a 48%,#020617 100%)}
.bgArt{position:absolute;inset:0;opacity:.88;filter:contrast(1.08) saturate(1.12)}
.bgArt.round1{background:radial-gradient(ellipse at 50% 38%,rgba(250,204,21,.16) 0%,transparent 20%),radial-gradient(ellipse at 38% 36%,rgba(56,189,248,.22) 0%,transparent 18%),radial-gradient(ellipse at 62% 36%,rgba(56,189,248,.22) 0%,transparent 18%),radial-gradient(ellipse at 34% 58%,rgba(251,113,133,.18) 0%,transparent 20%),radial-gradient(ellipse at 66% 58%,rgba(251,113,133,.18) 0%,transparent 20%),radial-gradient(ellipse at 50% 68%,rgba(168,85,247,.26) 0%,transparent 28%),conic-gradient(from 0deg at 50% 52%,transparent,rgba(255,255,255,.05),transparent,rgba(250,204,21,.06),transparent)}
.bgArt.round2{background:radial-gradient(ellipse at 50% 30%,rgba(56,189,248,.26) 0%,transparent 18%),radial-gradient(ellipse at 28% 48%,rgba(34,197,94,.20) 0%,transparent 22%),radial-gradient(ellipse at 72% 48%,rgba(34,197,94,.20) 0%,transparent 22%),radial-gradient(ellipse at 50% 64%,rgba(250,204,21,.22) 0%,transparent 28%),conic-gradient(from 120deg at 50% 52%,transparent,rgba(56,189,248,.12),transparent,rgba(255,255,255,.06),transparent)}
.bgArt.round3{background:radial-gradient(ellipse at 50% 36%,rgba(251,113,133,.30) 0%,transparent 18%),radial-gradient(ellipse at 30% 40%,rgba(250,204,21,.24) 0%,transparent 20%),radial-gradient(ellipse at 70% 40%,rgba(250,204,21,.24) 0%,transparent 20%),radial-gradient(ellipse at 50% 62%,rgba(147,51,234,.38) 0%,transparent 30%),conic-gradient(from 250deg at 50% 52%,transparent,rgba(251,113,133,.16),transparent,rgba(250,204,21,.10),transparent,rgba(56,189,248,.12),transparent);animation:bgPulse 1.6s ease-in-out infinite}
.bgArt:before,.bgArt:after{content:"";position:absolute;top:10%;bottom:8%;width:42%;border-radius:50%;background:radial-gradient(ellipse at 60% 45%,rgba(255,255,255,.18),transparent 13%),radial-gradient(ellipse at 55% 55%,rgba(15,23,42,.68),transparent 45%),radial-gradient(ellipse at 55% 50%,rgba(147,51,234,.32),transparent 64%)}
.bgArt:before{left:8%;transform:rotate(-14deg)}.bgArt:after{right:8%;transform:scaleX(-1) rotate(-14deg)}
@keyframes bgPulse{50%{filter:contrast(1.22) saturate(1.35) brightness(1.12)}}
.vignette{position:absolute;inset:0;background:radial-gradient(circle at 50% 46%,transparent 0%,rgba(2,6,23,.15) 44%,rgba(2,6,23,.72) 100%);pointer-events:none}
.header{position:absolute;left:0;right:0;top:0;height:62px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;z-index:5;text-shadow:0 2px 8px #000}
.backLink{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);font-size:30px;line-height:1}
.title{font-weight:1000;font-size:19px;letter-spacing:.04em}.status{font-size:12px;font-weight:900;text-align:right;line-height:1.45}
.stage{position:absolute;left:0;right:0;top:62px;bottom:112px;overflow:hidden;z-index:2}
.word{position:absolute;top:-54px;padding:20px 27px;border-radius:999px;min-width:108px;text-align:center;background:rgba(15,23,42,.74);border:1px solid rgba(255,255,255,.22);color:#fff7ed;font-weight:1000;font-size:clamp(27px,7.5vw,39px);box-shadow:0 10px 26px rgba(0,0,0,.38),0 0 22px rgba(56,189,248,.16);animation:fall linear forwards;white-space:nowrap;user-select:none;touch-action:none}
.word.hot{background:rgba(250,204,21,.22);box-shadow:0 0 24px rgba(250,204,21,.38),0 10px 26px rgba(0,0,0,.38)}.word.cold{background:rgba(56,189,248,.18)}
@keyframes fall{to{transform:translateY(calc(100dvh + 110px))}}
.footer{position:absolute;left:0;right:0;bottom:0;height:112px;padding:8px 12px 10px;z-index:6;background:linear-gradient(180deg,transparent,rgba(2,6,23,.86) 20%,rgba(2,6,23,.96))}
.guide{font-size:12px;line-height:1.35;color:rgba(255,247,237,.84);height:35px;text-align:center}.power{height:12px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;border:1px solid rgba(255,255,255,.14)}
.powerFill{height:100%;width:0%;background:linear-gradient(90deg,#38bdf8,#facc15,#fb7185);box-shadow:0 0 18px rgba(250,204,21,.55);transition:width .18s}.chips{margin-top:8px;display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.chip{font-size:11px;font-weight:900;padding:5px 8px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14)}
.ripple{position:absolute;border-radius:50%;pointer-events:none;border:2px solid rgba(255,255,255,.9);box-shadow:0 0 32px rgba(250,204,21,.7);animation:ripple .62s ease-out forwards;z-index:7}
@keyframes ripple{from{opacity:1;transform:translate(-50%,-50%) scale(.15)}to{opacity:0;transform:translate(-50%,-50%) scale(2.8)}}.flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--x) var(--y),rgba(250,204,21,.38),transparent 18%);opacity:0;z-index:4}.flash.show{animation:flash .38s ease-out}
@keyframes flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}.comboText{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);font-size:44px;font-weight:1000;text-shadow:0 0 26px rgba(255,255,255,.65),0 8px 24px #000;opacity:0;z-index:8}.comboText.show{animation:pop .55s ease-out}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.25)}}
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(2,6,23,.76);backdrop-filter:blur(10px);padding:18px}.overlay[hidden]{display:none}
.card{width:min(640px,94vw);border-radius:24px;padding:24px;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.22);box-shadow:0 26px 80px rgba(0,0,0,.55);max-height:92dvh;overflow:auto}.card h1{margin:0 0 10px;font-size:30px;line-height:1.15}.card p{font-size:14px;line-height:1.72;color:rgba(255,247,237,.9)}
.primary,.secondary{border:0;border-radius:999px;padding:14px 22px;margin:7px 4px;font-weight:1000;font-size:16px;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.primary{background:linear-gradient(90deg,#facc15,#fb7185);color:#111827}.secondary{background:rgba(255,255,255,.13);color:white;border:1px solid rgba(255,255,255,.22)}
.picked,.selectedList{font-size:12px;line-height:1.55;text-align:left;background:rgba(2,6,23,.36);border-radius:16px;padding:10px;margin-top:10px;max-height:130px;overflow:auto}
.swipeArea{position:relative;height:380px;margin:10px 0 4px;display:flex;align-items:center;justify-content:center;overflow:hidden}.swipeHint{display:flex;justify-content:space-between;font-size:12px;font-weight:1000;color:rgba(255,247,237,.8);margin:0 8px}
.swipeCard{position:absolute;width:min(360px,82vw);height:230px;border-radius:24px;display:flex;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(250,204,21,.18),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));border:1px solid rgba(255,255,255,.25);box-shadow:0 22px 64px rgba(0,0,0,.48);touch-action:none;user-select:none;transition:transform .12s,opacity .12s}.swipeWord{font-size:42px;font-weight:1000;text-shadow:0 0 22px rgba(250,204,21,.36),0 6px 18px #000}.swipeSub{position:absolute;bottom:18px;left:0;right:0;font-size:12px;color:rgba(255,247,237,.75);font-weight:900}
.badge{position:absolute;top:18px;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:1000;opacity:0;transition:.1s}.badge.keep{left:18px;background:rgba(56,189,248,.22);border:1px solid rgba(56,189,248,.55);color:#bae6fd}.badge.drop{right:18px;background:rgba(251,113,133,.22);border:1px solid rgba(251,113,133,.55);color:#fecdd3}
.card--result{text-align:left}.resultHead{text-align:center}.kicker{margin:0;color:#fde68a!important;font-weight:1000;letter-spacing:.12em}.saveStatus{font-size:12px!important;color:#cbd5e1!important;margin:.2rem 0 0!important}.resultGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.resultBlock{background:rgba(2,6,23,.34);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:12px}.resultBlock h2{margin:0 0 8px;font-size:15px}.maskItem{padding:9px 0;border-top:1px solid rgba(255,255,255,.1)}.maskItem:first-child{border-top:0}.maskName{font-weight:1000}.maskMeta{font-size:12px;color:#cbd5e1;margin-top:3px}.meterGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}.meterLabel{display:flex;justify-content:space-between;font-weight:1000;font-size:13px}.meter{height:14px;border-radius:999px;background:rgba(255,255,255,.13);overflow:hidden;border:1px solid rgba(255,255,255,.12)}.meter i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#22c55e,#facc15);border-radius:999px}.meter--curse i{background:linear-gradient(90deg,#38bdf8,#fb7185)}.reading{font-size:13px;line-height:1.7;color:#fff7ed;background:rgba(255,255,255,.08);border-radius:16px;padding:12px}.resultActions{text-align:center;margin-top:10px}
@media(max-width:620px){.resultGrid,.meterGrid{grid-template-columns:1fr}.card{padding:20px}.card h1{font-size:26px}.swipeArea{height:330px}.swipeCard{height:210px}.swipeWord{font-size:36px}}
@media(max-height:720px){.header{height:52px}.stage{top:52px;bottom:96px}.footer{height:96px}.guide{font-size:11px;height:30px}.card h1{font-size:26px}.chip{font-size:10px}.swipeArea{height:300px}.swipeCard{height:200px}}