:root{--bg-top: #0F2840;--bg-bottom: #1A3A5C;--accent: #C4A24D;--text-primary: #ffffff;--text-secondary: rgba(255,255,255,.7);--text-tertiary: rgba(255,255,255,.5);--base-color: #ffffff;--base-rgb: 255,255,255}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden}body{font-family:-apple-system,BlinkMacSystemFont,SF Pro Rounded,system-ui,sans-serif;background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));color:var(--text-primary);touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;touch-action:manipulation}#app{max-width:420px;margin:0 auto;height:100%;height:100dvh;display:flex;flex-direction:column;padding:env(safe-area-inset-top,8px) 12px env(safe-area-inset-bottom,4px);overflow:hidden;position:relative}.screen{display:none;flex-direction:column;flex:1;min-height:0}.screen.active{display:flex}.landing{align-items:center;justify-content:center;gap:12px;text-align:center}.landing-sun-wrap{position:relative;width:120px;height:120px;display:flex;align-items:center;justify-content:center}.landing-glow{display:none}.landing-rays{position:absolute;width:120px;height:120px}.landing-ray{position:absolute;top:50%;left:50%;width:2.5px;height:50px;background:linear-gradient(to bottom,color-mix(in srgb,var(--accent) 35%,transparent) 0%,transparent 60%);border-radius:1px;transform-origin:50% 100%;margin-left:-1.25px;margin-top:-50px}.landing-sun{width:60px;height:60px;border-radius:50%;position:relative;z-index:1;background:var(--accent);animation:sunPulse 2.5s ease-in-out infinite alternate}.landing-line{width:60%;height:1px;margin:8px 0;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 25%,transparent),transparent)}.landing-title{font-size:30px;font-weight:700;letter-spacing:-.3px}.landing-sub-title{font-size:15px;color:var(--text-secondary);margin-top:-4px}.landing-info{font-size:13px;color:var(--text-tertiary)}.landing-play{font-size:17px;font-weight:600;color:#fff;background:var(--accent);border-radius:100px;padding:13px 44px;transition:transform .12s;margin-top:8px}.landing-play:active{transform:scale(.96)}.landing-link{font-size:13px;font-weight:500;color:var(--text-tertiary);padding:4px 12px;transition:opacity .12s}.landing-link.dim{opacity:.6}.landing-link:active{opacity:.5}.landing-appstore{font-size:12px;color:var(--text-tertiary);opacity:.5;text-decoration:none;margin-top:4px}.landing-appstore:active{opacity:.3}.landing-version{position:absolute;bottom:12px;font-size:11px;color:var(--text-tertiary);opacity:.4}.game{gap:4px;padding:0 4px}.hdr{display:flex;align-items:center;justify-content:space-between;padding:4px 0;min-height:36px;flex-shrink:0}.hdr-left{display:flex;align-items:center;gap:8px}.hdr-title{font-size:18px;font-weight:700}.hdr-badge{font-size:9px;font-weight:700;color:#fff;background:#e85d3a;padding:2px 7px;border-radius:100px;letter-spacing:.4px}.hdr-badge:not(.hard){background:color-mix(in srgb,var(--text-secondary) 60%,transparent)}.hdr-badge.hide{display:none}.hdr-right{display:flex;align-items:center;gap:10px}.hdr-timer{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;font-family:SF Mono,ui-monospace,monospace;color:var(--text-tertiary)}.hdr-gear{font-size:18px;color:var(--text-secondary);padding:4px}.suns{display:flex;justify-content:center;gap:6px;flex-shrink:0;padding:2px 0}.sun{width:56px;height:44px;position:relative;overflow:hidden}.sun-orb{width:18px;height:18px;border-radius:50%;position:absolute;left:50%;opacity:0;transition:all .4s ease-out}.sun-line{position:absolute;bottom:5px;left:8px;right:8px;height:1px;background:rgba(var(--base-rgb),.12)}.sun[data-r=correct] .sun-orb{top:2px;background:#f5d84a;opacity:1;transform:translate(-50%) scale(1);box-shadow:0 0 10px #f5d84a80}.sun[data-r=hot] .sun-orb{top:10px;background:#e85d3a;opacity:.9;transform:translate(-50%) scale(.85);box-shadow:0 0 6px #e85d3a66}.sun[data-r=warm] .sun-orb{top:18px;background:#d4722a;opacity:.65;transform:translate(-50%) scale(.7);box-shadow:0 0 3px #d4722a33}.sun[data-r=cool] .sun-orb{top:24px;background:#5a7a9e;opacity:.4;transform:translate(-50%) scale(.55)}.sun[data-r=cold] .sun-orb{top:30px;background:#2a3a4e;opacity:.25;transform:translate(-50%) scale(.4)}.wheels{display:flex;justify-content:center;gap:6px;flex:1;min-height:0}.wcol{width:56px;position:relative;overflow:hidden;border-radius:12px;border:1.5px solid rgba(var(--base-rgb),.1);background:rgba(var(--base-rgb),.03);transition:border-color .15s,background .15s;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 18%,black 82%,transparent 100%)}.wcol.focused{border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:color-mix(in srgb,var(--accent) 5%,transparent)}.wcol.locked{border-color:#c4a24d;border-width:2px;background:#c4a24d14;-webkit-mask-image:none;mask-image:none}.wcol.compact{-webkit-mask-image:none;mask-image:none}.wtrack{position:absolute;left:0;right:0;transition:transform .18s ease-out}.wcol.dragging .wtrack{transition:none}.wletter{height:40px;display:flex;align-items:center;justify-content:center;font-weight:500;font-size:16px;color:var(--text-primary);pointer-events:none}.wletter.center{font-size:26px;font-weight:700}.wcol.locked .wletter.center{color:#c4a24d}.wcompact{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:100%;padding:6px 4px;overflow-y:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.wcompact::-webkit-scrollbar{display:none}.wcompact-btn{width:44px;min-height:26px;flex-shrink:0;border-radius:8px;border:1px solid rgba(var(--base-rgb),.08);background:transparent;color:var(--text-primary);font-size:16px;font-weight:500;display:flex;align-items:center;justify-content:center;transition:all .1s}.wcompact-btn.sel{font-weight:700;font-size:20px;background:color-mix(in srgb,var(--accent) 12%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}.wcompact-btn:active{opacity:.7}.tiles{display:flex;justify-content:center;gap:6px;flex-shrink:0;padding:3px 0}.tile{width:56px;height:46px;border-radius:10px;border:1.5px solid rgba(var(--base-rgb),.1);background:rgba(var(--base-rgb),.04);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:rgba(var(--base-rgb),.65);transition:all .15s ease-out}.tile.focused{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}.tile.locked{border-color:#c4a24d;border-width:2px;background:#c4a24d1f;color:#c4a24d}.tile.empty{color:rgba(var(--base-rgb),.2)}.tile.shake{animation:shake .4s linear}.tile.pop{animation:pop .3s ease-out}@keyframes shake{0%,to{transform:translate(0)}12%{transform:translate(-6px)}37%{transform:translate(6px)}62%{transform:translate(-4px)}87%{transform:translate(2px)}}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.15)}to{transform:scale(1)}}.invalid{text-align:center;font-size:11px;font-weight:600;color:#e85d3a;min-height:16px;opacity:0;transition:opacity .2s;flex-shrink:0}.invalid.show{opacity:1}.clock{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0;padding:2px 0}.pips{display:flex;gap:4px}.pip{width:22px;height:14px;border-radius:3px;transition:background .15s}.clock-label{font-size:11px;font-weight:500;color:var(--text-tertiary)}.burn{display:flex;justify-content:center;padding:2px 0;flex-shrink:0}.burn.hide{display:none}.burn-btn{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#e85d3a;border:1px solid rgba(232,93,58,.3);border-radius:100px;padding:4px 12px;transition:opacity .12s}.burn-btn:disabled{opacity:.3;cursor:default}.burn-btn:active:not(:disabled){opacity:.7}.laststand{text-align:center;flex-shrink:0;min-height:16px}.laststand.hide{display:none}.laststand-text{font-size:11px;font-weight:600;color:#e85d3a;animation:pulse .8s ease-in-out infinite alternate}@keyframes pulse{0%{opacity:.6;transform:scale(1)}to{opacity:1;transform:scale(1.04)}}.kbd{display:flex;flex-direction:column;gap:5px;flex-shrink:0;padding:4px 0 12px}.kbd-row{display:flex;justify-content:center;gap:4px}.key{height:42px;border-radius:5px;border:1px solid rgba(var(--base-rgb),.05);background:rgba(var(--base-rgb),.1);color:var(--base-color);font-size:15px;font-weight:500;display:flex;align-items:center;justify-content:center;flex:1;max-width:36px;transition:background .08s,opacity .12s}.key:active{background:rgba(var(--base-rgb),.2)}.key.dead{opacity:.15;background:rgba(var(--base-rgb),.02)}.key.burned{background:#e85d3a26;opacity:.3}.key.action{flex:1.5;max-width:56px;font-size:11px;font-weight:700;letter-spacing:.4px}.key.enter-ok{background:color-mix(in srgb,var(--accent) 75%,transparent);color:#fff}.key.bksp{font-size:18px}.done-bar-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;padding:4px 12px 16px}.done-bar-wrap.hide{display:none}.done-bar{display:flex;justify-content:center;gap:8px}.done-copied{font-size:12px;color:var(--accent);min-height:16px}.done-bar-btn{font-size:13px;font-weight:600;padding:8px 16px;border-radius:100px;background:rgba(var(--base-rgb),.1);color:var(--text-secondary);transition:opacity .12s}.done-bar-btn.accent{background:var(--accent);color:#fff}.done-bar-btn:active{opacity:.7}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:100;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease-out}.overlay.hide{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.rcard{background:#000000e0;border-radius:20px;padding:24px 20px;width:100%;max-width:350px;max-height:85vh;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:14px;animation:slideUp .35s ease-out}@keyframes slideUp{0%{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}.rclose{align-self:flex-end;color:#fff6;font-size:22px;padding:0;line-height:1}.rtitle{font-size:36px;font-weight:700}.rtitle.win{background:linear-gradient(135deg,#c4a24d,#e8c43a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:titlePulse .6s ease-in-out 3 alternate}@keyframes titlePulse{0%{transform:scale(1)}to{transform:scale(1.04)}}.rtitle.lose{color:#ffffff80}.rword{display:flex;gap:5px}.rletter{width:38px;height:38px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700}.rletter.gold{background:#c4a24d26;color:#c4a24d}.rletter.dim{background:#ffffff0f;color:#ffffffb3}.rinfo{font-size:13px;font-weight:500;color:#ffffff8c}.rstats{display:flex;gap:18px;background:#ffffff0a;border-radius:12px;padding:12px 16px}.rstat{text-align:center}.rstat-val{font-size:20px;font-weight:700;color:#fff}.rstat-lbl{font-size:9px;font-weight:600;color:#fff6;text-transform:uppercase;letter-spacing:.3px}.rshare{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#fff;background:var(--accent);border-radius:100px;padding:11px 28px;transition:transform .12s}.rshare:active{transform:scale(.96)}.rcopied{font-size:12px;color:#fff6;min-height:18px}.rhard{width:100%;text-align:center;padding:16px 20px;border-top:1px solid rgba(255,255,255,.06);background:#ffffff08;border-radius:12px}.rhard-title{font-size:13px;font-weight:600;color:#ffffff8c;margin-bottom:6px}.rhard-desc{font-size:11px;color:#ffffff4d;margin-bottom:10px}.rhard-play{font-size:14px;font-weight:600;color:#fff;background:#e85d3a;border-radius:100px;padding:9px 24px}.rhard-play:active{transform:scale(.96)}.rhard-enable{font-size:12px;font-weight:600;color:#e85d3a;background:transparent;border:1.5px solid rgba(232,93,58,.35);border-radius:100px;padding:7px 20px}.rcollapsible{width:100%;background:#ffffff0d;border-radius:12px;overflow:hidden}.rc-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:12px 16px;font-size:14px;font-weight:600;color:#ffffff80}.rc-header:active{background:#ffffff08}.rc-chevron{font-size:16px;transform:rotate(0);transition:transform .25s;display:inline-block}.rc-chevron.open{transform:rotate(90deg)}.rc-body{padding:0 16px 12px}.rc-body.hide{display:none}.rc-bar-row{display:flex;align-items:center;gap:6px;margin-bottom:4px}.rc-bar-label{font-size:12px;font-weight:500;color:#ffffff80;width:20px;text-align:right;font-family:ui-monospace,monospace}.rc-bar{height:14px;border-radius:3px;min-width:4px;transition:width .3s}.rc-bar-count{font-size:11px;font-weight:500;color:#fff6}.rpractice-result{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0}.rpractice-label{font-size:14px;font-weight:600;color:#ffffff80}.rpractice-new{font-size:16px;font-weight:600;color:#fff;background:var(--accent);border-radius:100px;padding:11px 28px}.rpractice-new:active{transform:scale(.96)}.rpractice-switch{font-size:13px;font-weight:500;color:#ffffff80}.rpractice-switch:active{opacity:.6}.rpractice-exit{font-size:14px;font-weight:500;color:#fff6;margin-top:4px}.rpractice-exit:active{opacity:.5}.rpractice{width:100%;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}.rpractice-btn{font-size:14px;font-weight:600;color:#fff9;border:1px solid rgba(255,255,255,.2);border-radius:100px;padding:8px 20px}.rpractice-btn:active{opacity:.6}.rpractice-desc{font-size:12px;color:#ffffff4d}.rappstore{font-size:12px;color:#ffffff59;text-decoration:none}.rappstore:active{opacity:.5}.practice-choice-card{background:#000000eb;border-radius:20px;padding:28px 24px;width:100%;max-width:300px;display:flex;flex-direction:column;align-items:center;gap:12px;animation:slideUp .3s ease-out}.practice-choice-title{font-size:18px;font-weight:700;color:#fff;margin-bottom:4px}.practice-choice-btn{width:100%;font-size:15px;font-weight:600;color:#fff;background:var(--accent);border-radius:100px;padding:12px 24px;text-align:center}.practice-choice-btn.hard{background:#e85d3a}.practice-choice-btn:active{transform:scale(.97)}.practice-choice-cancel{font-size:13px;font-weight:500;color:#fff6;margin-top:4px}.scard{background:#000000eb;border-radius:20px;padding:20px;width:100%;max-width:350px;max-height:85vh;overflow-y:auto;animation:slideUp .3s ease-out}.shdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.stitle{font-size:18px;font-weight:700;color:#fff}.sclose{color:#fff6;font-size:20px}.ssec{margin-bottom:16px}.slbl{font-size:11px;font-weight:600;color:#ffffff59;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}.srow{display:flex;justify-content:space-between;align-items:center;padding:8px 0}.srow-label{font-size:14px;font-weight:500;color:#ffffffbf}.toggle{width:44px;height:26px;border-radius:13px;background:#ffffff1f;position:relative;transition:background .2s;flex-shrink:0}.toggle.on{background:var(--accent)}.toggle-knob{width:20px;height:20px;border-radius:10px;background:#fff;position:absolute;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 3px #0003}.toggle.on .toggle-knob{left:21px}.tgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.tswatch{aspect-ratio:1;border-radius:8px;border:2px solid transparent;position:relative;transition:border-color .12s}.tswatch.active{border-color:var(--accent)}.tswatch-name{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:7px;font-weight:600;color:#fff9;letter-spacing:.3px}.slink{display:block;text-align:center;font-size:12px;color:var(--text-tertiary);padding:6px;margin-top:8px}.sver{text-align:center;font-size:10px;color:#fff3;margin-top:4px}.tut-card{background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));border-radius:20px;padding:24px 20px;width:100%;max-width:380px;max-height:90vh;overflow-y:auto;display:flex;flex-direction:column;align-items:center;gap:16px;animation:slideUp .35s ease-out}.tut-card.hardintro{border:1px solid rgba(232,93,58,.2)}.tut-dots{display:flex;gap:6px}.tut-dot{width:8px;height:8px;border-radius:4px;background:rgba(var(--base-rgb),.2)}.tut-dot.active{background:var(--accent)}.tut-content{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;width:100%}.tut-icon{font-size:50px}.tut-title{font-size:24px;font-weight:700;color:var(--text-primary)}.tut-subtitle{font-size:16px;font-weight:600;color:var(--text-primary)}.tut-text{font-size:14px;line-height:1.5;color:var(--text-secondary);padding:0 12px}.tut-next{font-size:17px;font-weight:600;color:#fff;background:var(--accent);border-radius:100px;padding:14px 0;width:80%}.tut-next.hardintro-btn{background:#e85d3a}.tut-next:active{transform:scale(.97)}.tut-skip{font-size:13px;font-weight:500;color:var(--text-tertiary)}.tut-divider{width:60%;height:1px;background:rgba(var(--base-rgb),.1)}.tut-ring{margin:8px auto}.tut-ring-letter{position:absolute;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:500;color:rgba(var(--base-rgb),.3);background:rgba(var(--base-rgb),.06);transform:translate(-50%,-50%)}.tut-ring-letter.endpoint{width:24px;height:24px;font-size:11px;font-weight:700;color:var(--base-color);background:#d4722a4d;border:1.5px solid rgba(212,114,42,.5)}.tut-ring-letter.onpath{background:#d4722a26;color:rgba(var(--base-rgb),.7)}.tut-ring-letter.guess{width:24px;height:24px;font-size:11px;font-weight:700;color:var(--base-color);background:#5a7a9e4d;border:1.5px solid rgba(90,122,158,.5)}.tut-ring-letter.survivor{width:24px;height:24px;font-size:11px;font-weight:700;color:var(--base-color);background:#5a7a9e40;border:1.5px solid rgba(90,122,158,.5);box-shadow:0 0 6px #5a7a9e33}.tut-ring-letter.faded{opacity:.15;background:rgba(var(--base-rgb),.02)}.tut-ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:30px;font-weight:700;color:#d4722ae6;text-align:center;line-height:1.1}.tut-ring-center.survivor-center{color:#5a7a9ee6}.tut-example{font-size:15px;font-weight:500;color:var(--text-secondary)}.tut-suns-row{display:flex;align-items:flex-end;justify-content:center;gap:4px;height:80px;position:relative;padding-bottom:8px}.tut-sun-stage{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;max-width:52px}.tut-sun-orb{border-radius:50%;flex-shrink:0}.tut-sun-label{font-size:9px;font-weight:600}.tut-horizon-line{position:absolute;bottom:6px;left:10%;right:10%;height:1px;background:rgba(var(--base-rgb),.08)}.tut-arrow{font-size:11px;color:var(--text-tertiary);opacity:.6}.tut-pips-row{display:flex;gap:4px;justify-content:center}.tut-pip{width:20px;height:14px;border-radius:3px}.tut-tips{display:flex;flex-direction:column;gap:6px;text-align:left;width:100%;padding:0 20px}.tut-tip{font-size:13px;color:var(--text-secondary)}.hi-rows{display:flex;flex-direction:column;gap:12px;width:100%;padding:0 16px;text-align:left}.hi-row{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--text-secondary)}.hi-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}.toast{position:fixed;top:50px;left:50%;transform:translate(-50%);background:#000000d9;color:#fff;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:500;z-index:200;pointer-events:none;animation:toastIn .2s ease-out}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-8px)}to{opacity:1;transform:translate(-50%) translateY(0)}}@media(max-height:680px){.sun{height:36px}.tile{height:40px}.key{height:38px}.wletter{height:36px}.pip{height:12px;width:20px}}@media(max-height:580px){.suns{display:none}.tile{height:36px;font-size:18px}.key{height:34px;font-size:13px}}@media(max-width:350px){.wcol,.tile,.sun{width:48px}.key{max-width:30px;font-size:13px}}.rcard::-webkit-scrollbar,.scard::-webkit-scrollbar,.tut-card::-webkit-scrollbar{width:3px}.rcard::-webkit-scrollbar-thumb,.scard::-webkit-scrollbar-thumb,.tut-card::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:2px}@keyframes sunPulse{0%{transform:scale(1);box-shadow:0 0 40px #f5d84a59}to{transform:scale(1.08);box-shadow:0 0 55px #f5d84a73}}