:root{--hud-font: "Sarabun", "Thonburi", "Noto Sans Thai", sans-serif;--ink: #efe9dc;--ink-dim: #6f6a7d;--hit: #ffd166;--done: #9ae66e;--miss: #ff5d5d;--attack: #7cc4ff;--defense: #ff9e64;--panel: rgba(20, 16, 34, .92)}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:#0e0b18;overflow:hidden;font-family:var(--hud-font)}#app{position:fixed;top:0;right:0;bottom:0;left:0}#app canvas{image-rendering:pixelated}#typing-hud{position:fixed;pointer-events:none;display:none;z-index:10}#typing-hud.visible{display:block}.hud-inner{position:absolute;left:50%;bottom:7%;transform:translate(-50%);min-width:320px;max-width:86%;padding:14px 26px 12px;background:var(--panel);border:2px solid var(--attack);border-radius:10px;text-align:center;transition:border-color .12s}.hud-inner.defense{border-color:var(--defense)}.hud-cast{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--attack);margin-bottom:2px;min-height:19px}.hud-inner.defense .hud-cast{color:var(--defense)}.hud-prompt{font-size:34px;line-height:1.55;font-weight:700;color:var(--ink-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-prompt .g{transition:color 60ms}.hud-prompt .g.done{color:var(--done)}.hud-prompt .g.partial{color:var(--hit)}.hud-prompt .g.active{color:var(--ink);text-decoration:underline;text-decoration-color:var(--hit);text-decoration-thickness:3px;text-underline-offset:7px}.hud-prompt .g.pending{color:var(--ink-dim)}.hud-inner.miss-flash .hud-prompt{animation:missflash .16s}@keyframes missflash{0%{color:var(--miss);text-shadow:0 0 12px var(--miss)}to{text-shadow:none}}.hud-timebar{height:7px;margin-top:10px;background:#2a2440;border-radius:4px;overflow:hidden}.hud-timefill{height:100%;width:100%;background:var(--attack);border-radius:4px}.hud-inner.defense .hud-timefill{background:var(--defense)}.hud-inner.defense .hud-timefill.low{background:var(--miss)}.hud-combo{position:absolute;right:10px;top:-14px;font-size:17px;font-weight:700;color:var(--hit);text-shadow:0 0 8px rgba(255,209,102,.6);min-width:46px}#hint-banner{position:fixed;top:6%;left:50%;transform:translate(-50%);padding:10px 22px;background:var(--panel);color:var(--ink);border:2px solid var(--hit);border-radius:8px;font-size:17px;z-index:20;pointer-events:none}#typing-hud.lesson-mode .hud-inner{bottom:52%}#typing-hud.lesson-mode .hud-timebar{display:none}#keyboard-hud{position:fixed;pointer-events:none;display:none;z-index:9}#keyboard-hud.visible{display:block}.kb-wrap{position:absolute;left:50%;bottom:3%;transform:translate(-50%);background:var(--panel);border:2px solid #3a3458;border-radius:12px;padding:10px 14px 8px}.kb-row{display:flex;gap:4px;justify-content:center;margin-top:4px}.kb-row:first-child{margin-top:0}.kb-key{position:relative;width:38px;height:38px;border-radius:6px;background:#241f38;border:1px solid #3a3458;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:16px}.kb-key .shift-char{position:absolute;top:1px;right:4px;font-size:9px;color:var(--ink-dim)}.kb-key.kb-space{width:230px}.kb-key.kb-shift{width:64px;font-size:14px;color:var(--ink-dim)}.kb-key.home:after{content:"";position:absolute;bottom:3px;width:10px;height:2px;border-radius:2px;background:#efe9dc59}.kb-key{box-shadow:inset 0 -3px #78788c59}.kb-key.f-L4{box-shadow:inset 0 -3px #e07a9a}.kb-key.f-L3{box-shadow:inset 0 -3px #e0a06a}.kb-key.f-L2{box-shadow:inset 0 -3px #e0d06a}.kb-key.f-L1{box-shadow:inset 0 -3px #8fd08a}.kb-key.f-R1{box-shadow:inset 0 -3px #6ac8c0}.kb-key.f-R2{box-shadow:inset 0 -3px #6aa0e0}.kb-key.f-R3{box-shadow:inset 0 -3px #9a8ae0}.kb-key.f-R4{box-shadow:inset 0 -3px #d08ae0}.kb-key.f-T{box-shadow:inset 0 -3px #8a8a9a}.kb-key.expect{background:#3d3160;border-color:var(--hit);color:#fff;box-shadow:0 0 12px #ffd1668c}.kb-key.pressed{background:#4a4180}.kb-key.pressed-bad{background:#5c2440;border-color:var(--miss)}.kb-finger{margin-top:8px;text-align:center;font-size:15px;color:var(--hit);min-height:19px}#dialogue-box{position:fixed;pointer-events:none;display:none;z-index:15}#dialogue-box.visible{display:block}.dlg-panel{position:absolute;left:50%;bottom:4%;transform:translate(-50%);width:78%;min-height:84px;background:var(--panel);border:2px solid #4a4468;border-radius:10px;padding:12px 18px 14px}.dlg-name{display:inline-block;margin:-24px 0 6px -6px;padding:2px 12px;background:#3d3160;border:2px solid var(--hit);border-radius:8px;color:var(--hit);font-size:15px;font-weight:700}.dlg-name:empty{display:none}.dlg-text{color:var(--ink);font-size:19px;line-height:1.6;min-height:30px;white-space:pre-wrap}.dlg-more{position:absolute;right:14px;bottom:6px;color:var(--hit);animation:dlgblink .9s infinite;visibility:hidden}.dlg-panel.done .dlg-more{visibility:visible}@keyframes dlgblink{50%{opacity:.15}}#skill-bar{position:fixed;pointer-events:none;display:none;z-index:11}#skill-bar.visible{display:block}.skill-wrap{position:absolute;left:50%;bottom:6%;transform:translate(-50%);text-align:center}.skill-label{font-size:15px;color:var(--ink-dim);margin-bottom:8px}.skill-row{display:flex;gap:10px;justify-content:center}.skill-slot{min-width:150px;padding:10px 14px;background:var(--panel);border:2px solid #3a3458;border-radius:10px;color:var(--ink);display:flex;align-items:center;gap:8px;font-size:17px}.skill-slot.selected{border-color:var(--hit);box-shadow:0 0 14px #ffd16673;background:#2c2547}.skill-key{width:22px;height:22px;border-radius:5px;background:#3a3458;color:var(--hit);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}.skill-band{color:var(--hit);font-size:11px;letter-spacing:2px}.kb-hands{position:absolute;left:0;top:0;pointer-events:none;z-index:1}.kb-finger{position:relative;z-index:2}.kb-finger-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:7px;vertical-align:baseline}