:root{color-scheme:dark;--navy:#07152f;--ink:#0c1a38;--blue:#2567ff;--cyan:#37d6e8;--peach:#ff9b73;--yellow:#ffd76a;--magenta:#ff4e9b;--paper:#fff8df}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:#030917;font-family:system-ui,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif}button,a{font:inherit}button{cursor:pointer}.game-shell{display:grid;width:100%;height:100dvh;place-items:center;padding:0;background:radial-gradient(circle at 50% 35%,#173669,#050b1c 65%)}.stage{position:relative;width:min(100%,calc(100dvh * .5625),430px);aspect-ratio:9/16;max-height:100dvh;overflow:hidden;background:var(--navy);box-shadow:0 0 0 2px #1d3f76,0 0 0 5px #030a19,0 22px 70px #000b;isolation:isolate}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none;-webkit-user-select:none;user-select:none}.hud{position:absolute;z-index:6;inset:0 0 auto;pointer-events:none;padding:calc(11px + env(safe-area-inset-top,0px)) 12px 0;color:white;text-shadow:2px 2px 0 #07152f}.hud-top{display:grid;grid-template-columns:64px 1fr 43px;gap:7px;align-items:start}.hud-tile,.hud-score{border:3px solid #09172f;outline:2px solid #e6c46d;background:#142c57e8;box-shadow:3px 4px 0 #061229;padding:5px 8px}.hud-tile span,.hud-score span{display:block;color:#7ce5ef;font:800 8px/1 monospace;letter-spacing:.14em}.hud-tile strong{display:block;margin-top:3px;font:900 25px/.95 ui-monospace,monospace}.hud-score{text-align:right}.hud-score strong{display:block;margin-top:3px;font:900 20px/1 ui-monospace,monospace;letter-spacing:.04em}.pixel-icon-button{pointer-events:auto;display:grid;width:43px;height:43px;place-items:center;border:3px solid #09172f;outline:2px solid #e6c46d;background:#142c57;color:#fff8d0;box-shadow:3px 4px 0 #061229;font-weight:950;font-size:20px}.pixel-icon-button:active{transform:translate(2px,2px);box-shadow:1px 2px 0 #061229}.view-meter{margin-top:11px;padding:6px 8px;border:2px solid #07152f;background:#0e234be8;box-shadow:2px 3px 0 #07152f}.view-meter>div:first-child{display:flex;justify-content:space-between;align-items:center;font-size:10px;font-weight:900}.view-meter strong{font-family:ui-monospace,monospace}.meter-track{height:9px;margin-top:4px;border:2px solid #07152f;background:#30143c}.meter-track i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff4e9b,#ffbf5e,#55f0d0);transform-origin:left;transition:transform .1s linear}.combo{position:absolute;right:12px;top:111px;min-width:58px;padding:4px 8px;border:2px solid #07152f;background:#ff4e9be8;color:white;text-align:center;font:950 18px/1 ui-monospace,monospace;transform:scale(.88);transition:transform .12s}.combo.is-hot{transform:scale(1.12)}.event-alert{position:absolute;z-index:9;top:42%;left:50%;width:calc(100% - 36px);transform:translate(-50%,-50%);border:4px solid #07152f;outline:3px solid #f0c65f;background:#fff5d5;color:#07152f;box-shadow:7px 7px 0 #07152f;padding:12px 14px;text-align:center;animation:eventIn .22s steps(3) both}.event-alert span{display:block;color:#e12c68;font:950 10px/1 ui-monospace,monospace;letter-spacing:.18em}.event-alert strong{display:block;margin-top:6px;font-size:23px;letter-spacing:-.04em}.tutorial-callout{position:absolute;z-index:8;left:50%;bottom:23%;width:max-content;max-width:calc(100% - 32px);transform:translateX(-50%);border:3px solid #07152f;outline:2px solid #f2cc6d;background:#fff8df;color:#07152f;box-shadow:5px 5px 0 #07152f;padding:10px 14px;text-align:center;pointer-events:none;animation:tutorialPulse .72s steps(2) infinite}.tutorial-callout strong,.tutorial-callout span{display:block}.tutorial-callout strong{font-size:15px}.tutorial-callout span{margin-top:3px;color:#d3296b;font-size:11px;font-weight:900}.countdown{position:absolute;z-index:12;inset:0;display:grid;place-items:center;background:#07152f35;color:#fff7c7;text-shadow:5px 5px 0 #07152f;font:950 100px/1 ui-monospace,monospace;animation:countPop .42s steps(3)}.title-screen{position:absolute;z-index:10;inset:0;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;background:url('assets/han-river-window.webp') center/cover no-repeat;color:white}.title-shade{position:absolute;inset:0;background:linear-gradient(#07152f18 20%,#07152f22 43%,#06142fdd 76%,#06142fff)}.title-copy{position:relative;margin:auto 18px 16px;text-align:center;filter:drop-shadow(4px 5px 0 #07152f);animation:titleRise .95s steps(7) .2s both}.title-kicker{display:inline-block;padding:5px 8px;border:2px solid #07152f;background:#37d6e8;color:#07152f;font:950 9px/1 ui-monospace,monospace;letter-spacing:.1em}.title-copy h1{margin:8px 0 6px;font-size:clamp(48px,14vw,64px);line-height:.88;letter-spacing:-.09em}.title-copy h1 span,.title-copy h1 b{display:block}.title-copy h1 span{color:#fff5c3;-webkit-text-stroke:2px #07152f}.title-copy h1 b{margin-top:8px;color:#ff689f;-webkit-text-stroke:2px #07152f;animation:titleGlint .34s steps(2) 1.25s 2}.title-copy p{margin:13px 0 0;font-size:13px;font-weight:900}.title-actions{position:relative;padding:0 18px calc(18px + env(safe-area-inset-bottom,0px));opacity:0;animation:actionsIn .3s steps(3) 1.75s forwards}.title-actions p{margin:11px 0 0;color:#aebfd8;text-align:center;font-size:9px;line-height:1.45}.pixel-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;border:3px solid #07152f;outline:2px solid #f0cc76;box-shadow:5px 5px 0 #07152f;padding:10px 14px;color:#07152f;font-weight:950;text-decoration:none}.pixel-button.primary{background:#ffcc63}.pixel-button.secondary{background:#60dfe7}.pixel-button:active{transform:translate(3px,3px);box-shadow:2px 2px 0 #07152f}.pixel-button:focus-visible,.pixel-icon-button:focus-visible,.lab-link:focus-visible{outline:4px solid white;outline-offset:3px}.pause-screen{position:absolute;z-index:20;inset:0;place-content:center;background:#06132feb;color:#fff;text-align:center}.pause-screen:not([hidden]){display:grid}.pause-screen span{color:#65e3e8;font-size:12px;font-weight:900}.pause-screen strong{display:block;margin:7px 0;color:#ffcf68;text-shadow:4px 4px 0 #101c3c;font:950 90px/1 ui-monospace,monospace}.pause-screen p{margin:0;font-size:13px}.result-screen{position:absolute;z-index:15;inset:0;overflow:auto;background:linear-gradient(#07152fa8,#07152ff5),url('assets/han-river-window.webp') center/cover no-repeat;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(18px + env(safe-area-inset-bottom,0px));color:white}.result-screen:not([hidden]){display:grid;align-items:center}.result-card{border:4px solid #09162e;outline:3px solid #f0cc76;background:#101f42ed;box-shadow:8px 8px 0 #050d20;padding:18px;text-align:center}.result-label{color:#6ce3eb;font:900 10px/1 ui-monospace,monospace;letter-spacing:.1em}.grade-badge{display:grid;width:86px;height:86px;margin:13px auto 10px;place-items:center;border:5px solid #07152f;outline:3px solid #ffd465;background:#ff4f98;color:#fff7c8;box-shadow:6px 6px 0 #061126;font:950 60px/1 ui-monospace,monospace;animation:gradeIn .5s steps(5)}.result-card h1{margin:0;font-size:26px;letter-spacing:-.05em}.result-score{display:block;margin:8px 0 0;color:#ffd86c;font:950 33px/1 ui-monospace,monospace}.result-card>p{min-height:17px;margin:8px 0 14px;color:#ff83af;font-size:12px;font-weight:900}.result-card dl{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:0}.result-card dl div{border:2px solid #2f4c7e;background:#091934;padding:9px}.result-card dt{color:#89a7d2;font-size:9px}.result-card dd{margin:4px 0 0;color:white;font:900 18px/1 ui-monospace,monospace}.event-history{display:flex;justify-content:center;flex-wrap:wrap;gap:5px;margin:11px 0}.event-history span{border:1px solid #406395;background:#132c58;padding:4px 6px;color:#bfeff2;font-size:9px}.result-actions{display:grid;gap:9px;margin-top:12px}.lab-link{display:inline-block;padding:8px;color:#bdcbe0;font-size:12px;font-weight:800;text-underline-offset:4px}.rotate-notice{display:none;position:absolute;z-index:30;inset:0;place-items:center;background:#07152f;color:white;font-weight:900}.stage.is-shaking{animation:shake .17s steps(3)}[hidden]{display:none!important}@keyframes titleRise{from{opacity:0;transform:translateY(80px)}to{opacity:1;transform:translateY(0)}}@keyframes titleGlint{50%{filter:brightness(1.8);transform:translateY(-2px)}}@keyframes actionsIn{to{opacity:1}}@keyframes tutorialPulse{50%{transform:translateX(-50%) scale(1.035)}}@keyframes countPop{from{transform:scale(.55)}to{transform:scale(1)}}@keyframes eventIn{from{opacity:0;transform:translate(-50%,-40%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes gradeIn{from{transform:scale(.35) rotate(-10deg)}to{transform:scale(1) rotate(0)}}@keyframes shake{25%{transform:translate(3px,-2px)}50%{transform:translate(-3px,2px)}75%{transform:translate(2px,1px)}}@media(orientation:landscape) and (max-height:520px){.rotate-notice{display:grid}}@media(min-width:700px){.stage{border-radius:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.stage.is-shaking{animation:none}}

.intro-screen{position:absolute;z-index:14;inset:0;display:flex;align-items:flex-end;background:#010103;color:white;padding:0 18px calc(54px + env(safe-area-inset-bottom,0px))}
.intro-screen::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,#ffffff00 0 3px,#638cff08 3px 4px);pointer-events:none}
.intro-screen:not([hidden]){display:flex}
.intro-dialog{position:relative;width:100%;min-height:150px;border:4px solid #05070e;outline:3px solid #d9dce8;background:#11131df2;box-shadow:7px 7px 0 #000;padding:27px 18px 16px;animation:dialogIn .2s steps(3)}
.intro-speaker{position:absolute;top:-18px;left:13px;min-width:54px;border:3px solid #05070e;outline:2px solid #d9dce8;background:#3d62b4;padding:5px 10px;text-align:center;font-size:12px;font-weight:950}
.intro-dialog p{min-height:56px;margin:0;padding-right:2px;color:#f6f2e9;font-size:18px;font-weight:850;line-height:1.5;letter-spacing:-.035em;word-break:keep-all;animation:lineIn .24s steps(4)}
.intro-next{display:flex;align-items:center;justify-content:flex-end;gap:7px;width:100%;border:0;background:transparent;color:#8cdbe2;padding:9px 0 0;font-size:12px;font-weight:900}
.intro-next span{animation:arrowBlink .75s steps(2) infinite}
.intro-next:focus-visible{outline:4px solid white;outline-offset:3px}
.intro-screen.is-alert .intro-dialog{outline-color:#ff5b82;animation:introAlarm .24s steps(3) 2}
.intro-screen.is-alert .intro-speaker{background:#d63867}
.intro-screen.is-alert .intro-dialog p{color:#ffd5df;font-size:22px}
@keyframes dialogIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes lineIn{from{opacity:0}to{opacity:1}}
@keyframes arrowBlink{50%{opacity:.2}}
@keyframes introAlarm{25%{transform:translateX(4px)}50%{transform:translateX(-4px)}75%{transform:translateX(2px)}}
.tutorial-callout{top:29%;bottom:auto}
.ending-copy{margin:12px 0 4px;border:2px solid #50709e;background:#07152f;padding:10px 9px;color:#f8f3e7;text-align:left;box-shadow:3px 3px 0 #050b1c}
.ending-copy p{margin:0;font-size:13px;font-weight:850;line-height:1.45;word-break:keep-all}
.ending-copy p+p{margin-top:3px;color:#ffcc70}
.ending-copy[data-tier="high"]{border-color:#68e2d4}
.ending-copy[data-tier="middle"]{border-color:#ffd06a}
.ending-copy[data-tier="low"]{border-color:#ff648e}