:root{color-scheme:dark;--bg:#070910;--panel:#0e131d;--line:#293245;--text:#f5f7fb;--muted:#8d98a9;--lime:#b8ff3a;--cyan:#37e6ff;--danger:#ff4268;--gold:#ffe263;font-family:Inter,"Pretendard","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}html,body{min-height:100%;margin:0;background:var(--bg);color:var(--text)}body{overflow-x:hidden;background:radial-gradient(circle at 50% 0,#182036 0,transparent 34rem),linear-gradient(#070910,#0c0912);touch-action:pan-y}button,a{font:inherit;color:inherit}.game-topbar{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(14px,3vw,36px);border-bottom:1px solid #242b39;background:rgba(7,9,16,.88);backdrop-filter:blur(15px);position:relative;z-index:10}.brand{text-decoration:none;font-weight:900;letter-spacing:.14em;font-size:.85rem}.brand span{display:inline-grid;place-items:center;background:var(--lime);color:#071008;border-radius:5px;padding:4px 6px;letter-spacing:-.03em;margin-right:8px}.top-actions{display:flex;gap:8px}.icon-action{border:1px solid #344056;background:#121927;border-radius:8px;padding:8px 12px;font-weight:800;font-size:.78rem}.icon-action:hover{border-color:var(--lime)}.icon-action.square{min-width:38px;padding:7px}
.game-page{width:min(1120px,100%);margin:auto;padding:clamp(12px,2.5vw,30px)}.game-card{border:1px solid #303a4d;background:#090d15;box-shadow:0 30px 90px #0009,0 0 0 1px #05070b;border-radius:14px;overflow:hidden;position:relative}.marquee{height:28px;display:flex;align-items:center;justify-content:center;gap:28px;overflow:hidden;white-space:nowrap;background:var(--lime);color:#071008;font:900 .7rem ui-monospace,monospace;letter-spacing:.17em}.marquee b{font-size:.55rem}.hud{min-height:72px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:8px clamp(12px,3vw,36px);background:linear-gradient(180deg,#121927,#0b101a);border-bottom:1px solid #2a3448;font-family:ui-monospace,"SFMono-Regular",Consolas,monospace}.hud>div{display:flex;flex-direction:column}.hud>div:last-child{text-align:right}.hud-center{text-align:center}.hud small{color:#7d899c;font-size:.66rem;letter-spacing:.18em;font-weight:800}.hud strong{font-size:clamp(1rem,2.5vw,1.55rem);letter-spacing:.05em;font-variant-numeric:tabular-nums}.hud-center strong{color:var(--lime)}.hud em{min-height:14px;font-style:normal;color:var(--danger);font-size:.58rem;font-weight:900;letter-spacing:.08em}
.canvas-wrap{position:relative;aspect-ratio:16/9;max-height:calc(100vh - 205px);margin:auto;overflow:hidden;background:#0b1020;isolation:isolate;touch-action:none}.canvas-wrap canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.overlay{position:absolute;inset:0;z-index:5;display:none;place-items:center;padding:22px;background:radial-gradient(circle at 50% 40%,rgba(13,23,39,.56),rgba(3,5,10,.92));overflow:auto}.overlay.visible{display:grid}.overlay-panel{text-align:center;max-width:560px;width:100%;margin:auto}.pixel-crown{color:var(--gold);font-size:2rem;filter:drop-shadow(0 0 10px #ffe26388)}.kicker{color:var(--cyan);font:900 .68rem ui-monospace,monospace;letter-spacing:.2em;margin:5px 0 12px}.start-panel h1,.result-panel h2,.ranking-panel h2{font:900 clamp(2.7rem,8vw,5.5rem)/.78 Impact,"Arial Black",sans-serif;letter-spacing:.015em;margin:0;text-shadow:4px 4px 0 #151c2b,7px 7px 0 #03060b}.start-panel h1 span{color:var(--lime)}.lead{margin:22px 0 16px;color:#d7dee9;font-weight:700}.record-box{display:grid;grid-template-columns:1fr auto;align-items:center;width:min(330px,100%);margin:0 auto 18px;padding:11px 14px;border:1px solid #344259;background:#0b111de6;text-align:left}.record-box small{color:#7d899b;font:800 .62rem ui-monospace,monospace;letter-spacing:.13em}.record-box strong{grid-row:1/3;grid-column:2;font:900 1.4rem ui-monospace,monospace;color:var(--gold)}.record-box span{font:.58rem ui-monospace,monospace;color:#66748a}.cta,.secondary{min-height:48px;border-radius:7px;padding:0 22px;border:0;font-weight:950;letter-spacing:.03em}.cta{background:var(--lime);color:#071008;box-shadow:0 5px 0 #608d10}.cta:active{transform:translateY(3px);box-shadow:0 2px 0 #608d10}.cta kbd{font:700 .63rem ui-monospace,monospace;margin-left:12px;padding:3px 6px;border:1px solid #355506;border-radius:4px;background:#d9ff96}.secondary{background:#172033;border:1px solid #3b4963}.controls{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:17px;color:#91a0b4;font-size:.72rem}.controls b{color:#fff;margin-right:6px}
.combo{position:absolute;right:4%;top:20%;color:var(--gold);font:900 clamp(1.5rem,4vw,2.6rem) Impact,sans-serif;transform:rotate(-4deg);text-shadow:3px 3px #602a35;pointer-events:none}.item-status{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);color:#d9f8ff;font:900 clamp(.55rem,1.4vw,.76rem) ui-monospace,monospace;letter-spacing:.08em;text-shadow:1px 2px #000;white-space:nowrap}.touch-hints{display:none;position:absolute;inset:auto 0 0;justify-content:space-between;padding:0 6% 20px;color:#fff6;font:900 .7rem ui-monospace,monospace;pointer-events:none}
.result-panel h2,.ranking-panel h2{font-size:clamp(2.4rem,7vw,4.7rem);line-height:.9}.new-record{margin:0 0 10px;color:var(--gold);font:900 clamp(1.2rem,4vw,2rem) ui-monospace,monospace;letter-spacing:.12em;animation:recordPulse .65s ease-in-out infinite alternate}.result-primary{margin:18px auto 14px}.result-primary small,.result-grid small{display:block;color:#8491a5;font:800 .61rem ui-monospace,monospace;letter-spacing:.14em}.result-primary strong{font:900 clamp(2rem,6vw,3.4rem) ui-monospace,monospace;color:var(--lime)}.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.result-grid div{border:1px solid #344057;background:#0c121ee8;padding:10px 5px}.result-grid b{display:block;margin-top:4px;font:900 clamp(.75rem,2vw,1rem) ui-monospace,monospace}.reward-result{min-height:20px;color:var(--gold);font-size:.72rem}.result-actions{display:flex;justify-content:center;gap:10px}.home-link{display:inline-block;margin-top:14px;color:#9aa7b9;font-size:.75rem}.home-link:hover{color:#fff}
.ranking-panel{position:relative;border:1px solid #39465c;border-radius:12px;background:#0a101bea;padding:24px;max-height:90%;box-shadow:0 24px 70px #000}.close{position:absolute;right:12px;top:10px;width:34px;height:34px;border:0;background:none;font-size:1.7rem;color:#9aa7b9}.ranking-tabs{display:flex;justify-content:center;margin:17px 0 10px}.ranking-tabs button{border:1px solid #313d52;background:#121928;color:#8996a8;padding:8px 15px;font-weight:850;font-size:.72rem}.ranking-tabs button:first-child{border-radius:7px 0 0 7px}.ranking-tabs button:last-child{border-radius:0 7px 7px 0}.ranking-tabs button.active{background:var(--lime);border-color:var(--lime);color:#081007}.ranking-list{list-style:none;margin:0;padding:0;max-height:265px;overflow:auto;text-align:left}.ranking-list li{display:grid;grid-template-columns:34px minmax(0,1fr) 88px 78px;align-items:center;gap:8px;border-bottom:1px solid #273144;padding:9px 5px;font:700 .75rem ui-monospace,monospace}.ranking-list li>b{color:#627089;text-align:center}.ranking-list li:first-child>b{color:var(--gold)}.ranking-list time{color:var(--cyan)}.ranking-list strong{text-align:right;color:var(--lime)}.ranking-list .ranking-empty{display:block;text-align:center;padding:34px;color:#8592a5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes recordPulse{to{transform:scale(1.08);filter:drop-shadow(0 0 10px #ffe263)}}
@media(pointer:coarse),(max-width:760px){.touch-hints{display:flex}.game-page{padding:8px}.game-card{border-radius:9px}.marquee{height:22px}.hud{min-height:58px}.canvas-wrap{max-height:none}.overlay{padding:4px;overflow:hidden}.pixel-crown{display:none}.kicker{font-size:.55rem;margin:0 0 4px}.start-panel h1{font-size:2.55rem;line-height:.76}.lead{font-size:.72rem;margin:7px 0 5px}.record-box{padding:4px 8px;margin-bottom:6px;max-width:270px}.record-box strong{font-size:.95rem}.cta,.secondary{min-height:34px;padding:0 14px;font-size:.72rem}.cta kbd{font-size:.5rem;margin-left:6px}.controls{gap:12px;margin-top:5px;font-size:.6rem}.result-panel h2{font-size:2rem}.new-record{font-size:.85rem;margin-bottom:3px}.result-primary{margin:5px auto}.result-primary strong{font-size:1.45rem}.result-grid{grid-template-columns:repeat(4,1fr);gap:3px}.result-grid div{padding:5px 2px}.result-grid small{font-size:.5rem}.result-grid b{font-size:.6rem}.reward-result{min-height:12px;margin:4px;font-size:.62rem}#resultScreen .home-link{position:absolute;right:8px;bottom:4px;margin:0;font-size:.6rem}.ranking-panel{padding:12px;max-height:100%}.ranking-panel h2{font-size:2rem}.ranking-tabs{margin:6px 0}.ranking-list{max-height:125px}.ranking-list li{grid-template-columns:24px minmax(0,1fr) 65px 58px;gap:4px;padding:5px 2px;font-size:.58rem}.game-topbar{height:54px}}
@media(max-height:680px) and (orientation:landscape){.game-topbar{height:44px}.game-page{padding:5px}.marquee{display:none}.hud{position:absolute;z-index:4;top:0;left:0;right:0;background:linear-gradient(#050912dd,transparent);border:0;min-height:58px;pointer-events:none}.canvas-wrap{max-height:calc(100vh - 56px)}.start-panel{transform:scale(.8)}.cta,.secondary{min-height:44px;padding:0 22px}.result-panel{transform:scale(.76)}.lead{margin:14px 0 10px}.controls{margin-top:12px}.ranking-panel{transform:scale(.86)}}
/* 터치 기기: 키보드 표시(SPACE)·PC 조작 안내는 숨긴다 */
@media(pointer:coarse){.cta kbd,.controls span:first-child{display:none}}
/* 휴대폰 세로: 시작 화면이 16:9 게임 칸 안에 들어가야 맨 아래 터치 조작 안내가 잘리지 않는다 — 장식 머리글을 숨긴다 */
@media(pointer:coarse) and (orientation:portrait){.start-panel .kicker{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}
/* 포인트 안내 (시작 화면) */
.reward-info{min-height:1.2em;max-width:330px;margin:-6px auto 12px;color:var(--gold);font-size:clamp(.6rem,1.6vw,.72rem)}
