:root{--bg-color: #070712;--neon-cyan: #00f0ff;--neon-pink: #ff007f;--neon-purple: #9d00ff;--neon-gold: #ffb800;--neon-green: #00ff66;--neon-red: #ff2255;--hud-bg: rgba(15, 12, 35, .75);--hud-border: rgba(0, 240, 255, .4);--font-main: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif;--font-display: "Chakra Petch", "Be Vietnam Pro", sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}html,body{width:100vw;height:100vh;overflow:hidden;background-color:var(--bg-color);font-family:var(--font-main);color:#fff;display:flex;align-items:center;justify-content:center}#app{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#1b1238,#080612)}#game-container{position:relative;width:min(100vw,calc(100vh * 16 / 9));height:min(100vh,56.25vw);aspect-ratio:16 / 9;background:#000;overflow:hidden;box-shadow:0 0 50px #00f0ff40,0 0 100px #ff007f26;border:1px solid rgba(255,255,255,.1);border-radius:8px}#game-canvas{position:absolute;top:0;left:0;width:100%;height:100%;display:block}#hud-overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column}#top-bar{display:flex;justify-content:space-between;align-items:center;padding:24px 36px;width:100%}.hud-stat-box{background:var(--hud-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--hud-border);border-radius:12px;padding:10px 24px;display:flex;align-items:baseline;gap:12px;box-shadow:0 8px 32px #0006,inset 0 0 12px #00f0ff1a}.hud-label{font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:2px;color:#8fa0c0}.hud-value{font-family:var(--font-display);font-size:32px;font-weight:900;color:#fff;text-shadow:0 0 10px rgba(0,240,255,.8)}#combo-box{border-color:#ff007f66}#combo-value{color:#ff007f;text-shadow:0 0 14px rgba(255,0,127,.8);transition:transform .08s ease-out}#combo-value.pop{transform:scale(1.35)}.hud-badge{font-family:var(--font-mono);font-size:14px;font-weight:800;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));color:#fff;padding:2px 8px;border-radius:6px}#word-container{position:absolute;top:58%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;z-index:10}#word-target{font-family:var(--font-display);font-size:58px;font-weight:900;letter-spacing:12px;padding:20px 30px 10px;border-radius:16px;background:#0a081ab3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid rgba(255,255,255,.15);box-shadow:0 10px 40px #0009;transition:border-color .15s,box-shadow .15s,transform .08s ease-out}#word-typed{color:var(--neon-cyan);text-shadow:0 0 20px var(--neon-cyan),0 0 40px rgba(0,240,255,.6)}#word-remaining{color:#ffffff59}.word-badge{display:flex;gap:8px;justify-content:center;align-items:center;margin-bottom:4px}.mod-pill{font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:2px;padding:4px 14px;border-radius:20px;text-transform:uppercase}.mod-finish{background:linear-gradient(135deg,gold,#ff007f);color:#000;font-weight:900;box-shadow:0 0 20px #ffd700cc;animation:pulse-finish .4s infinite alternate}@keyframes pulse-finish{0%{transform:scale(.98)}to{transform:scale(1.05)}}.mod-reverse{background:#ff143cd9;color:#fff;border:1px solid #ff0055;box-shadow:0 0 15px #f059;animation:pulse-reverse .5s infinite alternate}@keyframes pulse-reverse{0%{filter:brightness(1)}to{filter:brightness(1.3)}}.mod-bomb{background:#ff4500e6;color:#fff;border:1px solid #ffaa00;box-shadow:0 0 16px #ff4500b3;animation:pulse-bomb .35s infinite alternate}@keyframes pulse-bomb{0%{transform:scale(1)}to{transform:scale(1.04)}}.mod-ghost{background:#8a2be2bf;color:#e0d0ff;border:1px solid #00f0ff}.mod-ghost.active{background:#00f0ff40;border-color:#ff007f;color:#fff;animation:pulse-ghost .6s infinite alternate}@keyframes pulse-ghost{0%{opacity:.8}to{opacity:1}}.word-letter{display:inline-block;color:#ffffff59;transition:color .1s,text-shadow .1s,transform .1s;position:relative}.word-letter.typed{color:var(--neon-cyan);text-shadow:0 0 20px var(--neon-cyan),0 0 35px rgba(0,240,255,.7);transform:scale(1.05)}.word-letter.target{color:#fff;border-bottom:3px solid var(--neon-cyan)}.word-letter.target-reverse{color:#f46;border-bottom:3px solid #ff0055}.word-letter.reverse-letter:not(.typed){color:#f57;text-shadow:0 0 10px rgba(255,0,85,.5)}.word-letter.bomb-letter{color:#f30;background:#ff320033;border-radius:8px;padding:0 4px;box-shadow:0 0 12px #ff320099;animation:shake-bomb-char .8s infinite alternate}.bomb-icon{position:absolute;bottom:100%;left:50%;margin-left:-6px;margin-bottom:-8px;transform:translate(-50%);font-size:20px;line-height:1.2;letter-spacing:0;pointer-events:none;z-index:2}@keyframes shake-bomb-char{0%{transform:translateY(0)}50%{transform:translateY(-3px)}to{transform:translateY(0)}}#word-target.bomb-explode{animation:bomb-flash .4s ease-out}@keyframes bomb-flash{0%{transform:scale(1.15);box-shadow:0 0 60px red;border-color:red;background:#b40000cc}50%{transform:scale(.95);box-shadow:0 0 30px #f009;border-color:red;background:#b4000073}to{transform:scale(1);box-shadow:0 10px 40px #0009;border-color:#ffffff26;background:#0a081ab3}}.level-value{color:#00f0ff;text-shadow:0 0 10px rgba(0,240,255,.5)}.crazy-level-badge{color:#ff007f!important;text-shadow:0 0 15px rgba(255,0,127,.8)!important;animation:pulse-crazy .5s infinite alternate}@keyframes pulse-crazy{0%{transform:scale(1)}to{transform:scale(1.08)}}.finish-move-badge{background:linear-gradient(135deg,gold,#ff007f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:900!important;filter:drop-shadow(0 0 12px rgba(255,215,0,.9));animation:pulse-finish-hud .4s infinite alternate}@keyframes pulse-finish-hud{0%{transform:scale(1)}to{transform:scale(1.12)}}#word-prompt{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--neon-gold);letter-spacing:4px;text-shadow:0 0 12px var(--neon-gold);animation:flash-prompt .35s infinite alternate}@keyframes flash-prompt{0%{opacity:.7}to{opacity:1}}#judgement-display{position:absolute;top:76%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;pointer-events:none}#judgement-text{font-family:var(--font-display);font-size:52px;font-weight:900;letter-spacing:6px;opacity:0;transform:scale(.6);transition:all .15s cubic-bezier(.175,.885,.32,1.275)}#judgement-text.show{opacity:1;transform:scale(1.15)}#judgement-delta{font-family:var(--font-mono);font-size:16px;font-weight:800;color:#fff;opacity:0;margin-top:4px}#judgement-delta.show{opacity:.9}.judgement-perfect{color:#0ff;text-shadow:0 0 25px #00ffff,0 0 50px rgba(0,255,255,.8)}.judgement-great{color:#ff00ea;text-shadow:0 0 25px #ff00ea,0 0 50px rgba(255,0,234,.8)}.judgement-good{color:#0f6;text-shadow:0 0 20px #00ff66}.judgement-miss{color:#f25;text-shadow:0 0 20px #ff2255}#debug-overlay{position:absolute;bottom:12px;left:12px;background:#000000d9;border:1px solid rgba(0,240,255,.4);padding:10px 14px;border-radius:6px;font-family:var(--font-mono);font-size:12px;line-height:1.5;color:#00f0ff;pointer-events:none}.screen-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#080612e0;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;pointer-events:auto;z-index:50;transition:opacity .3s ease}.hidden{display:none!important}.menu-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:28px;max-width:780px}.logo-glow{font-family:var(--font-display);font-size:68px;font-weight:900;letter-spacing:8px;background:linear-gradient(135deg,#00f0ff,#ff007f,gold);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px rgba(0,240,255,.6));animation:logo-glow 2s ease-in-out infinite alternate}@keyframes logo-glow{0%{filter:drop-shadow(0 0 25px rgba(0,240,255,.5))}to{filter:drop-shadow(0 0 45px rgba(255,0,127,.7))}}.subtitle{font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:4px;color:#a8b4cc}.instructions-card{display:flex;align-items:center;justify-content:space-around;gap:16px;background:#14102dcc;border:1px solid rgba(0,240,255,.3);padding:22px 30px;border-radius:16px;box-shadow:0 12px 36px #00000080;width:100%}.instruction-step{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:180px}.step-num{width:38px;height:38px;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple));color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:900;font-size:18px}.step-txt{font-size:14px;line-height:1.4;color:#e0e5ff}.instruction-arrow{color:var(--neon-pink);font-size:24px;font-weight:900}.cta-pulse{font-family:var(--font-display);font-size:26px;font-weight:900;letter-spacing:4px;color:#fff;text-shadow:0 0 15px var(--neon-cyan),0 0 30px var(--neon-cyan);animation:pulse-cta 1.2s infinite ease-in-out}.cta-pulse kbd{background:#1e1b3d;border:2px solid var(--neon-cyan);box-shadow:0 0 12px #00f0ff66;padding:4px 14px;border-radius:8px;color:var(--neon-cyan)}@keyframes pulse-cta{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.06);opacity:.85}}#countdown-number{font-family:var(--font-display);font-size:140px;font-weight:900;color:#fff;text-shadow:0 0 40px var(--neon-pink),0 0 80px var(--neon-cyan);animation:countdown-pop .9s cubic-bezier(.175,.885,.32,1.275) infinite}@keyframes countdown-pop{0%{transform:scale(.4);opacity:0}50%{transform:scale(1.2);opacity:1}to{transform:scale(1);opacity:.9}}.result-card{display:flex;flex-direction:column;align-items:center;gap:20px;background:#120e28e6;border:2px solid var(--neon-purple);padding:32px 50px;border-radius:20px;box-shadow:0 0 60px #9d00ff66,inset 0 0 20px #00f0ff1a;min-width:480px}.result-title{font-family:var(--font-display);font-size:34px;font-weight:900;letter-spacing:4px;color:#fff;text-shadow:0 0 20px var(--neon-cyan)}.rank-circle{width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,gold 30%,#f80);color:#000;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:56px;font-weight:900;box-shadow:0 0 35px gold}.result-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 30px;width:100%;margin:10px 0}.res-item{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:15px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:6px}.res-label{color:#8fa0c0}.res-val{font-weight:800;color:#fff}.perfect-color{color:var(--neon-cyan)}.great-color{color:var(--neon-pink)}.good-color{color:var(--neon-green)}.miss-color{color:var(--neon-red)}.arcade-btn{font-family:var(--font-display);font-size:18px;font-weight:900;letter-spacing:2px;padding:14px 36px;border-radius:12px;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-pink));color:#fff;border:none;cursor:pointer;box-shadow:0 0 25px #00f0ff80;transition:transform .15s,box-shadow .15s}.arcade-btn:hover{transform:scale(1.05);box-shadow:0 0 35px #ff007fb3}.menu-actions{display:flex;flex-direction:column;align-items:center;gap:16px}.guide-toggle-btn{background:#ffffff14;border:1px solid rgba(0,240,255,.4);color:#00f0ff;font-family:var(--font-main);font-weight:700;font-size:15px;padding:8px 22px;border-radius:20px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all .2s ease}.guide-toggle-btn:hover{background:#00f0ff26;border-color:#00f0ff;box-shadow:0 0 15px #00f0ff66;transform:translateY(-2px)}.intro-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#0e0a20f0;border:2px solid var(--neon-cyan);box-shadow:0 0 60px #00f0ff4d,inset 0 0 25px #ff007f26;border-radius:24px;padding:32px 42px;max-width:980px;max-height:calc(100% - 32px);overflow-y:auto;gap:16px;animation:intro-pop .3s cubic-bezier(.175,.885,.32,1.275)}@keyframes intro-pop{0%{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}.intro-badge{font-family:var(--font-display);font-size:12px;font-weight:900;letter-spacing:3px;padding:4px 16px;border-radius:20px;background:linear-gradient(135deg,var(--neon-pink),var(--neon-purple));color:#fff;box-shadow:0 0 15px #ff007f80}.intro-title{font-family:var(--font-display);font-size:32px;font-weight:900;letter-spacing:3px;background:linear-gradient(135deg,#00f0ff,#fff,#ff007f);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 20px rgba(0,240,255,.6))}.intro-desc{font-size:15px;line-height:1.6;color:#c4d0ea;max-width:800px}.intro-steps-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;width:100%;margin:8px 0}.intro-step-box.full-width{grid-column:span 2;border-color:#ff007f66;background:#1e0f32bf}.intro-step-box{background:#161130b3;border:1px solid rgba(0,240,255,.25);border-radius:14px;padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 8px 24px #0006;transition:transform .2s,border-color .2s}.intro-step-box:hover{transform:translateY(-4px);border-color:var(--neon-cyan);box-shadow:0 12px 30px #00f0ff40}.intro-step-icon{font-size:32px;margin-bottom:2px}.intro-step-heading{font-family:var(--font-display);font-size:13px;font-weight:900;letter-spacing:1px;color:var(--neon-gold)}.intro-step-text{font-size:13px;line-height:1.45;color:#d1d8ec;text-align:left}.intro-step-text kbd{background:#1b1638;border:1px solid var(--neon-cyan);color:var(--neon-cyan);padding:2px 6px;border-radius:4px;font-family:var(--font-mono);font-size:12px;font-weight:700}.intro-footer{margin-top:6px}.intro-close-btn{font-family:var(--font-main);font-size:13px;font-weight:700;letter-spacing:.5px;padding:7px 22px;border-radius:18px;background:#ffffff0f;border:1px solid rgba(255,255,255,.18);color:#9fb0d4;cursor:pointer;transition:background .2s,border-color .2s,color .2s}.intro-close-btn:hover{background:#ffffff1f;border-color:#ffffff61;color:#fff}.close-hint{font-size:11px;font-weight:600;opacity:.6}#unikey-screen{z-index:60}.unikey-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#180c0cf5;border:2px solid #ffb020;box-shadow:0 0 60px #ffb02059,inset 0 0 25px #ff500026;border-radius:24px;padding:34px 44px;max-width:620px;gap:14px;animation:intro-pop .3s cubic-bezier(.175,.885,.32,1.275)}.unikey-icon{font-size:52px;line-height:1;filter:drop-shadow(0 0 18px rgba(255,176,32,.7))}.unikey-title{font-family:var(--font-display);font-size:28px;font-weight:900;letter-spacing:2px;color:#ffb020;text-shadow:0 0 22px rgba(255,176,32,.6)}.unikey-desc{font-size:15px;line-height:1.65;color:#e4d8c4}.unikey-desc strong{color:#fff}.unikey-hint{font-size:14px;line-height:1.6;color:#c9d6ee;background:#ffffff0f;border:1px solid rgba(255,176,32,.35);border-radius:14px;padding:12px 18px}.unikey-hint-key{display:inline-block;font-family:var(--font-display);font-size:12px;font-weight:900;padding:3px 9px;margin:0 2px;border-radius:6px;background:#ffffff1f;border:1px solid rgba(255,255,255,.3);color:#fff}.unikey-once{font-size:12px;color:#ffffff73;font-style:italic}#lives-box{border-color:#f256}#lives-display{display:flex;gap:4px;font-size:20px;filter:drop-shadow(0 0 8px rgba(255,34,85,.6))}.life-heart{transition:transform .2s,filter .2s,opacity .2s;display:inline-block}.life-heart.active{opacity:1;transform:scale(1)}.life-heart.empty{opacity:.2;filter:grayscale(1);transform:scale(.85)}.hud-subbadge{font-family:var(--font-mono);font-size:12px;font-weight:800;background:#ffd70033;border:1px solid rgba(255,215,0,.5);color:var(--neon-gold);padding:2px 6px;border-radius:6px}#hud-controls{display:flex;gap:8px;align-items:center}.hud-ctrl-btn{width:44px;height:44px;border-radius:12px;background:var(--hud-bg);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--hud-border);color:#fff;font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 16px #0006;transition:transform .15s,border-color .15s,box-shadow .15s;pointer-events:auto}.hud-ctrl-btn:hover{transform:scale(1.08);border-color:var(--neon-cyan);box-shadow:0 0 15px #00f0ff80}.hud-ctrl-btn.danger{border-color:#f256;color:var(--neon-red)}.hud-ctrl-btn.danger:hover{border-color:var(--neon-red);box-shadow:0 0 15px #f259}.menu-record-box{background:#ffb8001f;border:1px solid rgba(255,184,0,.4);padding:8px 24px;border-radius:20px;font-family:var(--font-display);font-size:16px;color:gold;letter-spacing:2px;text-shadow:0 0 10px rgba(255,215,0,.5);display:flex;align-items:center;gap:10px}.menu-record-box strong{font-family:var(--font-mono);font-size:20px;font-weight:900;color:#fff}.start-cta-btn{font-size:22px;padding:16px 54px;letter-spacing:3px;box-shadow:0 0 35px #00f0ff99;animation:pulse-btn 1.4s infinite ease-in-out}@keyframes pulse-btn{0%,to{transform:scale(1);box-shadow:0 0 30px #00f0ff80}50%{transform:scale(1.04);box-shadow:0 0 45px #ff007fb3}}.pause-card{display:flex;flex-direction:column;align-items:center;gap:20px;background:#0e0a20f2;border:2px solid var(--neon-cyan);padding:36px 54px;border-radius:24px;box-shadow:0 0 60px #00f0ff66,inset 0 0 20px #00f0ff1a;min-width:440px;text-align:center;animation:intro-pop .25s ease-out}.pause-icon{font-size:48px}.pause-title{font-family:var(--font-display);font-size:34px;font-weight:900;letter-spacing:4px;color:#fff;text-shadow:0 0 20px var(--neon-cyan)}.pause-sub{color:#8fa0c0;font-size:15px}.pause-stats{display:flex;gap:30px;font-family:var(--font-mono);font-size:16px;font-weight:800;background:#ffffff0d;padding:10px 24px;border-radius:12px;border:1px solid rgba(255,255,255,.1)}.pause-stats span{color:var(--neon-cyan)}.pause-actions{display:flex;flex-direction:column;gap:12px;width:100%;margin-top:10px}.pause-primary-btn{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-pink))}.pause-secondary-btn{background:#ffffff1f;border:1px solid rgba(255,255,255,.3)}.pause-danger-btn{background:linear-gradient(135deg,#f25,#902);border:1px solid #ff2255;box-shadow:0 0 20px #f256}.high-score-banner{background:linear-gradient(135deg,gold,#f80);color:#000;font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:3px;padding:6px 24px;border-radius:20px;box-shadow:0 0 25px gold;animation:banner-pop .8s infinite alternate}@keyframes banner-pop{0%{transform:scale(1)}to{transform:scale(1.08)}}.game-over-title{color:#f25!important;text-shadow:0 0 25px #ff2255!important}.difficulty-picker{display:flex;flex-direction:column;align-items:center;gap:10px;background:#14102d99;border:1px solid rgba(0,240,255,.25);padding:14px 28px;border-radius:16px;width:100%}.diff-title{font-family:var(--font-display);font-size:13px;font-weight:800;letter-spacing:2px;color:#8fa0c0}.diff-buttons{display:flex;gap:12px}.diff-btn{font-family:var(--font-display);font-size:14px;font-weight:800;letter-spacing:1px;padding:8px 18px;border-radius:10px;background:#ffffff14;border:1px solid rgba(255,255,255,.2);color:#c4d0ea;cursor:pointer;transition:all .2s ease}.diff-btn:hover{background:#00f0ff26;border-color:var(--neon-cyan);color:#fff;transform:translateY(-2px)}.diff-btn.active{background:linear-gradient(135deg,var(--neon-cyan),var(--neon-pink));color:#fff;border-color:transparent;box-shadow:0 0 18px #00f0ff80}.diff-desc{font-family:var(--font-main);font-size:13px;color:var(--neon-gold)}.res-diff-picker{margin-top:14px;margin-bottom:6px;padding:10px 18px}.result-actions{display:flex;gap:12px;width:100%;margin-top:10px}.replay-primary-btn{flex:1.8;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-pink));color:#fff}.replay-secondary-btn{flex:1.2;background:#ffffff1a;border:1px solid rgba(255,255,255,.25);color:#c4d0ea;font-size:14px}.replay-secondary-btn:hover{background:#00f0ff33;border-color:var(--neon-cyan);color:#fff}.demo-box{gap:12px}.demo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;width:100%}.demo-case{background:#0a081ab8;border:1px solid rgba(0,240,255,.22);border-radius:12px;padding:10px 8px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;min-height:178px}.demo-case.demo-reverse{border-color:#ff005559}.demo-case.demo-bomb{border-color:#ff450059}.demo-case.demo-ghost{border-color:#8a2be273}.demo-head{font-family:var(--font-display);font-size:12px;font-weight:900;letter-spacing:1.5px;color:#fff;display:flex;align-items:center;gap:6px}.demo-num{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:linear-gradient(135deg,var(--neon-cyan),var(--neon-purple));color:#06021a;font-size:11px;font-weight:900}.demo-pill-row{min-height:20px;display:flex;align-items:center}.demo-pill-row .mod-pill{font-size:9px;letter-spacing:1px;padding:3px 9px}.mod-plain{background:#00f0ff29;border:1px solid rgba(0,240,255,.45);color:var(--neon-cyan)}.demo-word{font-family:var(--font-display);font-size:24px;font-weight:900;letter-spacing:4px;line-height:1.15;padding:16px 10px 6px;border-radius:10px;background:#060412d9;border:2px solid rgba(255,255,255,.12);transition:border-color .15s,box-shadow .15s,transform .1s;white-space:nowrap}.demo-word .word-letter.typed{text-shadow:0 0 10px var(--neon-cyan);transform:none}.demo-word .word-letter.target,.demo-word .word-letter.target-reverse{border-bottom-width:2px}.demo-word .word-letter.bomb-letter{padding:0 2px;letter-spacing:0}.demo-word .bomb-icon{font-size:14px;margin-left:-2px;margin-bottom:-5px}.demo-word .word-letter.bomb-alert{animation:demo-bomb-alert .35s infinite alternate}@keyframes demo-bomb-alert{0%{box-shadow:0 0 8px #ff320080}to{box-shadow:0 0 22px #ff5a00;transform:translateY(-3px)}}.demo-word.danger{border-color:#f059;box-shadow:0 0 16px #ff005559}.demo-word.ready{border-color:var(--neon-gold);box-shadow:0 0 20px #ffb8008c}.demo-word.hit{border-color:var(--neon-green);box-shadow:0 0 26px #0f69;animation:demo-hit-pop .3s ease-out}@keyframes demo-hit-pop{0%{transform:scale(1.12)}to{transform:scale(1)}}.demo-keys{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;min-height:20px}.demo-key{font-family:var(--font-mono);font-size:10px;font-weight:800;min-width:17px;padding:2px 4px;border-radius:4px;background:#14102c;border:1px solid rgba(255,255,255,.18);color:#fff6;text-align:center;transition:all .12s ease-out}.demo-key.done{background:#00f0ff2e;border-color:var(--neon-cyan);color:var(--neon-cyan)}.demo-key.now{background:var(--neon-cyan);border-color:#fff;color:#06021a;transform:translateY(-2px) scale(1.12);box-shadow:0 0 10px var(--neon-cyan)}.demo-key.space{min-width:46px;letter-spacing:1px}.demo-key.space.now{background:var(--neon-gold);box-shadow:0 0 12px var(--neon-gold)}.demo-key.space.done{background:#0f63;border-color:var(--neon-green);color:var(--neon-green)}.demo-key.skip{background:#ff32001f;border-color:#ff450099;color:#f74;text-decoration:line-through}.demo-key.skip.now{background:#ff320080;border-color:#f30;color:#fff;transform:none;box-shadow:0 0 12px #ff4500e6;animation:demo-bomb-alert .35s infinite alternate}.demo-status{font-family:var(--font-display);font-size:10px;font-weight:800;letter-spacing:.5px;color:#9fb0d4;text-align:center;min-height:14px;line-height:1.3}.demo-status kbd{font-size:9px;padding:1px 4px}.demo-status.phase-memorize{color:var(--neon-gold)}.demo-status.phase-skip{color:#f63}.demo-status.phase-ready{color:var(--neon-gold)}.demo-perfect{color:var(--neon-green);text-shadow:0 0 12px rgba(0,255,102,.8);font-size:12px}.demo-hint{font-size:10.5px;line-height:1.35;color:#93a2c4;text-align:center;margin-top:auto}.demo-hint kbd{background:#1b1638;border:1px solid rgba(0,240,255,.5);color:var(--neon-cyan);padding:0 4px;border-radius:3px;font-family:var(--font-mono);font-size:9px}.demo-extra{font-size:12px;text-align:center;width:100%}