:root{--bg: #04060a;--bg2: #09131f;--panel: rgba(7, 11, 18, .92);--panel-2: rgba(10, 15, 24, .96);--text: #f7fbff;--muted: rgba(214, 231, 255, .7);--line: rgba(97, 252, 255, .28);--cyan: #00e5ff;--green: #39ff14;--pink: #ff2d6f;--amber: #ffab00;--yellow: #fff36d;--shadow: rgba(0, 0, 0, .55);--theme-primary: #00e5ff;--theme-secondary: #fff36d;--theme-danger: #ff2d6f;--theme-grid: rgba(97, 252, 255, .28);--theme-bg-a: #04060a;--theme-bg-b: #09131f;--pixel: "Press Start 2P", monospace;--body: "Noto Sans KR", system-ui, sans-serif;--radius: 18px;--radius-sm: 8px}*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;color:var(--text);background:radial-gradient(circle at 18% 16%,color-mix(in srgb,var(--theme-primary) 24%,transparent),transparent 0 24%),radial-gradient(circle at 84% 18%,color-mix(in srgb,var(--theme-danger) 16%,transparent),transparent 0 22%),radial-gradient(circle at 50% 100%,rgba(57,255,20,.08),transparent 0 28%),linear-gradient(180deg,#020306,var(--theme-bg-b) 58%,var(--theme-bg-a) 100%);font-family:var(--body)}[hidden]{display:none!important}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(180deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),linear-gradient(90deg,rgba(255,0,128,.03),transparent 22%,transparent 78%,rgba(0,229,255,.03));mix-blend-mode:screen;opacity:.45}.app{min-height:100dvh;display:flex;flex-direction:column;gap:14px;padding:14px;position:relative}.topbar,.panel,.overlay-card{background:linear-gradient(180deg,#0b101bfa,#060a10f0);border:2px solid color-mix(in srgb,var(--theme-primary) 24%,transparent);box-shadow:0 0 0 1px #ffffff08 inset,0 16px 40px var(--shadow),0 0 18px color-mix(in srgb,var(--theme-primary) 12%,transparent)}.topbar{display:grid;grid-template-columns:1fr;gap:12px;align-items:center;padding:14px;border-radius:var(--radius);position:relative;overflow:hidden}.app.layout-overlay-hud .topbar{position:absolute;top:var(--overlay-top, 24px);left:var(--overlay-left, 24px);width:var(--overlay-width, calc(100% - 48px) );height:var(--overlay-height, 120px);z-index:12;display:block;padding:0;background:transparent;border:0;box-shadow:none;pointer-events:none}.app.layout-overlay-hud .topbar:after{display:none}.app.layout-overlay-hud .brand,.app.layout-overlay-hud .brand .subtitle{display:none}.app.layout-overlay-hud .hud{position:absolute;inset:0 auto auto 0;width:100%;min-height:56px;display:block;pointer-events:none}.app.layout-overlay-hud .controls{position:absolute;top:0;right:0;display:block;pointer-events:auto;width:40px;height:40px}.app.layout-overlay-hud .side,.app.layout-overlay-hud.overlay-hud-hidden .topbar,.app.layout-overlay-hud .controls #btnRestart,.app.layout-overlay-hud .controls #btnSound{display:none}.app.layout-overlay-hud .controls #btnPause{position:absolute;top:var(--hud-top, 8px);right:8px;min-width:40px;min-height:40px;padding:0;border-radius:999px;background:#03070c85}.app.layout-overlay-hud .controls #btnPause .btn-glyph{font-size:12px}.app.layout-overlay-hud .hud-item{position:absolute;min-width:0;padding:6px 8px;background:#03070c85;border-width:1px;border-radius:999px;box-shadow:0 8px 20px #00000038}.app.layout-overlay-hud .hud-item:nth-child(3){display:none}.app.layout-overlay-hud .hud-item:nth-child(1){top:var(--hud-top, 8px);left:8px;width:fit-content;max-width:calc(42% - 16px)}.app.layout-overlay-hud .hud-item:nth-child(2){top:var(--hud-top, 8px);left:50%;transform:translate(-50%);min-width:88px;max-width:calc(36% - 16px);text-align:center}.app.layout-overlay-hud .hud-item:nth-child(4){top:var(--hud-top, 8px);right:52px;width:fit-content}.app.layout-overlay-hud .hud-item:nth-child(4) .hearts{margin-top:0}.app.layout-overlay-hud .hud-label{display:none}.app.layout-overlay-hud .hud-value{margin-top:0}.app.layout-overlay-hud #uiStage{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.app.layout-overlay-hud #uiPercent{font-size:14px;white-space:nowrap}.app.layout-overlay-hud .timerbar{margin-top:0;height:8px}.app.layout-overlay-hud .heart{transform:scale(.85);transform-origin:center}.app.layout-overlay-hud .controls,.app.layout-overlay-hud .hud-item{pointer-events:auto}.topbar:after,.panel:after,.overlay-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 22%,transparent 78%,rgba(0,229,255,.04))}.brand,.hud,.controls,.panel>*{position:relative;z-index:1}.brand .title,.brand .subtitle,.hud-label,.hud-value,.btn,.panel-title,.overlay-title,.kbd,.next-stage{font-family:var(--pixel)}.brand .title{font-size:20px;line-height:1.2;color:var(--theme-secondary);text-shadow:0 0 10px color-mix(in srgb,var(--theme-secondary) 40%,transparent),2px 2px 0 rgba(0,0,0,.6)}.brand .subtitle{margin-top:6px;font-size:9px;line-height:1.65;color:var(--muted);text-shadow:0 0 8px color-mix(in srgb,var(--theme-primary) 24%,transparent)}.hud{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch}.hud-item{padding:10px 11px 11px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent 30%),linear-gradient(180deg,#04060cdb,#010408f0);border:1px solid color-mix(in srgb,var(--theme-primary) 26%,transparent);border-radius:var(--radius-sm);box-shadow:0 0 0 1px #ffffff05 inset}.hud-label{font-size:9px;line-height:1.4;color:#cdecffc7}.hud-value{margin-top:8px;font-size:12px;line-height:1.5;color:var(--text);text-shadow:0 0 10px color-mix(in srgb,var(--theme-primary) 22%,transparent)}.timerbar{height:12px;margin-top:10px;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,#ffffff0f,#0000003d),#02050a;border:1px solid color-mix(in srgb,var(--theme-primary) 18%,transparent)}.timerbar-fill{height:100%;width:100%;transform-origin:left center;transform:scaleX(0);background:repeating-linear-gradient(90deg,#fff3 0,#fff3 9px,#fff0 9px,#fff0 12px),linear-gradient(90deg,var(--green),var(--theme-secondary) 58%,var(--theme-danger));box-shadow:0 0 14px color-mix(in srgb,var(--theme-primary) 28%,transparent)}.hearts{display:flex;gap:10px;margin-top:10px}.heart{position:relative;width:18px;height:16px}.heart:before,.heart:after{content:"";position:absolute;width:6px;height:6px;background:var(--theme-danger);box-shadow:6px 0 var(--theme-danger),12px 0 var(--theme-danger),0 6px var(--theme-danger),6px 6px var(--theme-danger),12px 6px var(--theme-danger),3px 12px var(--theme-danger),9px 12px var(--theme-danger)}.heart:after{display:none}.heart.off{opacity:.28;filter:saturate(0)}.controls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.controls.compact{grid-template-columns:repeat(4,minmax(44px,1fr))}.btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 12px;border:1px solid color-mix(in srgb,var(--theme-primary) 30%,transparent);background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 45%),linear-gradient(180deg,#0c131df2,#050a11fa);color:var(--text);border-radius:6px;font-size:10px;line-height:1.45;cursor:pointer;transition:transform .08s ease,border-color .12s ease,box-shadow .12s ease,background .12s ease;-webkit-user-select:none;user-select:none;text-transform:uppercase;position:relative;white-space:nowrap;overflow:hidden}.btn:hover{border-color:color-mix(in srgb,var(--theme-secondary) 56%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--theme-secondary) 14%,transparent)}.btn:active{transform:translateY(1px) scale(.985)}.btn.primary,.next-stage{border-color:color-mix(in srgb,var(--theme-secondary) 60%,transparent);box-shadow:0 0 18px color-mix(in srgb,var(--theme-secondary) 18%,transparent)}.btn-glyph{color:var(--theme-primary);text-shadow:0 0 10px color-mix(in srgb,var(--theme-primary) 35%,transparent)}.btn-label{display:inline-block;overflow:hidden;text-overflow:ellipsis}.controls.compact .btn-label,.app.layout-overlay-hud .btn-label{display:none}.controls.compact .btn,.app.layout-overlay-hud .controls .btn{padding-inline:8px}.main{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}.frame{position:relative;display:flex;align-items:center;justify-content:center;border-radius:24px;overflow:hidden;border:2px solid color-mix(in srgb,var(--theme-primary) 28%,transparent);background:radial-gradient(circle at 50% 18%,#ffffff14,#00000038 52%,#0006);box-shadow:0 0 0 2px #00000057 inset,0 34px 90px var(--shadow),0 0 22px color-mix(in srgb,var(--theme-primary) 12%,transparent);isolation:isolate;touch-action:none}.frame:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(180deg,#ffffff0a 0,#ffffff0a 1px,#0000 1px,#0000 5px);opacity:.34;mix-blend-mode:screen}.frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.05),transparent 44%),radial-gradient(circle at 50% 50%,transparent 54%,rgba(0,0,0,.48) 100%);box-shadow:inset 0 0 40px #0000007a,inset 0 0 110px #00000057;animation:frameNoise 2.2s steps(2) infinite}@keyframes frameNoise{0%{transform:translate(0)}25%{transform:translate(.6px,-.4px)}50%{transform:translate(-.7px,.5px)}to{transform:translate(0)}}canvas{display:block;width:100%;height:auto;position:relative;z-index:1;touch-action:none}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:#030508cc;z-index:6}.overlay[hidden]{display:none}.overlay-card{position:relative;width:min(520px,calc(100% - 28px));padding:20px;border-radius:16px}.overlay-title{font-size:20px;line-height:1.45;color:var(--theme-secondary);text-shadow:0 0 10px color-mix(in srgb,var(--theme-secondary) 32%,transparent)}.overlay-body,.overlay-hint,.help-grid,.future-body,.record-row{font-size:14px;line-height:1.65;color:var(--muted)}.overlay-body{margin-top:12px;white-space:pre-line}.overlay-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}.overlay-choices[hidden]{display:none}.overlay-actions{display:flex;gap:10px;margin-top:16px;justify-content:center}.category-card{--category-accent: var(--theme-secondary);display:grid;gap:8px;min-height:170px;padding:16px 14px;text-align:left;border-radius:14px;border:1px solid color-mix(in srgb,var(--category-accent) 44%,transparent);background:linear-gradient(180deg,color-mix(in srgb,var(--category-accent) 16%,rgba(255,255,255,.04)),transparent 34%),linear-gradient(180deg,#070b12f5,#03070cfa);color:var(--text);box-shadow:0 0 0 1px #ffffff0a inset,0 0 24px color-mix(in srgb,var(--category-accent) 16%,transparent),0 18px 34px #00000047;cursor:pointer;transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.category-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--category-accent) 72%,transparent);box-shadow:0 0 0 1px #ffffff0d inset,0 0 32px color-mix(in srgb,var(--category-accent) 24%,transparent),0 22px 40px #00000057}.category-card-label{font-family:var(--pixel);font-size:15px;line-height:1.55;color:color-mix(in srgb,var(--category-accent) 82%,white);text-shadow:0 0 12px color-mix(in srgb,var(--category-accent) 28%,transparent)}.category-card-tagline{font-size:10px;line-height:1.5;color:#d6ecffbd;letter-spacing:.08em}.category-card-flavor{font-size:13px;line-height:1.7;color:var(--muted)}.overlay-hint{margin-top:14px;text-align:center}.btn-start{min-width:min(320px,100%);min-height:64px;padding:18px 28px;border-width:2px;font-size:14px;line-height:1.4;background:linear-gradient(180deg,color-mix(in srgb,var(--theme-secondary) 18%,rgba(255,255,255,.06)),transparent 30%),linear-gradient(180deg,color-mix(in srgb,var(--theme-primary) 24%,rgba(12,19,29,.95)),#050a11fa);box-shadow:0 0 0 1px #ffffff0f inset,0 0 28px color-mix(in srgb,var(--theme-secondary) 22%,transparent),0 14px 36px #00000061}.btn-start:hover{box-shadow:0 0 0 1px #ffffff14 inset,0 0 36px color-mix(in srgb,var(--theme-secondary) 28%,transparent),0 18px 44px #0000006b}.next-stage{position:absolute;bottom:14px;left:50%;transform:translate(-50%);z-index:8;padding:10px 16px;border-radius:6px;background:linear-gradient(180deg,color-mix(in srgb,var(--theme-secondary) 16%,transparent),color-mix(in srgb,var(--theme-primary) 14%,transparent));font-size:10px;opacity:0;pointer-events:none;transition:opacity .35s ease,transform .35s ease}.next-stage.show{opacity:1;pointer-events:auto;transform:translate(-50%) scale(1.02)}.side{display:grid;gap:14px}.panel{position:relative;padding:14px;border-radius:var(--radius);overflow:hidden}.panel[open]{padding-bottom:14px}.panel-title{display:flex;align-items:center;justify-content:space-between;font-size:11px;line-height:1.6;color:var(--theme-secondary);margin-bottom:12px;cursor:pointer;list-style:none}.panel-title::-webkit-details-marker{display:none}.panel-title:after{content:"+";color:var(--theme-primary)}.panel[open]>.panel-title:after{content:"-"}.status-panel{display:grid;gap:12px}.status-chip{display:inline-flex;align-items:center;justify-content:center;width:fit-content;max-width:100%;padding:8px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-primary) 34%,transparent);background:color-mix(in srgb,var(--theme-primary) 12%,transparent);color:var(--text);font-family:var(--pixel);font-size:10px;line-height:1.5;box-shadow:0 0 14px color-mix(in srgb,var(--theme-primary) 14%,transparent)}.status-chip[data-state=danger]{border-color:color-mix(in srgb,var(--theme-danger) 42%,transparent);background:color-mix(in srgb,var(--theme-danger) 14%,transparent);box-shadow:0 0 16px color-mix(in srgb,var(--theme-danger) 18%,transparent)}.status-chip[data-state=tracing]{border-color:color-mix(in srgb,var(--theme-secondary) 42%,transparent);background:color-mix(in srgb,var(--theme-secondary) 12%,transparent)}.status-grid{display:grid;gap:10px}.status-row{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px dashed color-mix(in srgb,var(--theme-primary) 18%,transparent);font-size:14px;line-height:1.65;color:var(--muted)}.status-row strong{color:var(--text);font-family:var(--pixel);font-size:10px;line-height:1.6;text-align:right;text-shadow:0 0 10px color-mix(in srgb,var(--theme-primary) 22%,transparent)}.stage-chip{display:inline-flex;align-items:center;width:fit-content;max-width:100%;margin-bottom:12px;padding:8px 10px;border-radius:999px;border:1px solid color-mix(in srgb,var(--theme-primary) 34%,transparent);background:color-mix(in srgb,var(--theme-primary) 10%,transparent);color:var(--text);font-family:var(--pixel);font-size:10px;line-height:1.5;box-shadow:0 0 14px color-mix(in srgb,var(--theme-primary) 14%,transparent)}.help-grid{display:grid;gap:8px}.kbd{display:inline-block;padding:4px 7px;border-radius:4px;border:1px solid color-mix(in srgb,var(--theme-primary) 36%,transparent);background:color-mix(in srgb,var(--theme-primary) 8%,transparent);color:var(--text);font-size:10px;line-height:1.4}.record-grid{display:grid;gap:10px}.record-row{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px dashed color-mix(in srgb,var(--theme-primary) 18%,transparent)}.record-row strong{color:var(--text);font-family:var(--pixel);font-size:10px;line-height:1.6;text-shadow:0 0 10px color-mix(in srgb,var(--theme-primary) 22%,transparent)}@media(max-width:760px){.overlay-choices{grid-template-columns:1fr}.category-card{min-height:124px}.overlay-actions{flex-direction:column}}@media(max-width:980px){.app{min-height:100dvh;padding:10px}.topbar,.side{gap:10px}.panel{padding:12px}.panel:not([open]){padding-bottom:12px}}@media(min-width:981px){.topbar{grid-template-columns:1.1fr 1.6fr 1.2fr}.hud{grid-template-columns:repeat(4,minmax(0,1fr))}.main{grid-template-columns:1fr 340px}}@media(max-width:1200px){.controls .btn-label{display:none}.controls .btn{padding-inline:8px}}