:root{font-family:'Noto Sans KR',sans-serif;color:#172820;background:#f5f1e7;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,a,input{touch-action:manipulation}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #ee613d;outline-offset:4px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}header{max-width:1420px;margin:auto;padding:24px 42px;border-bottom:1px solid #c9cabc;display:flex;justify-content:space-between;align-items:center}.brand{font-size:22px;font-weight:800;letter-spacing:-1px}.brand b{background:#e34f32;color:#fff;padding:3px 7px;display:inline-block;transform:rotate(-3deg)}.brand span{display:block;font-size:10px;letter-spacing:4px;margin-top:8px}.header-right{display:flex;align-items:center;gap:25px;font-size:12px}.header-right button,#home,#pause,#again{border:1px solid #b5baad;background:transparent;border-radius:30px;padding:10px 17px}main{max-width:1420px;margin:auto;padding:35px 42px}.intro{display:flex;align-items:end;justify-content:space-between;margin-bottom:36px}.eyebrow{font-size:12px;font-weight:800;letter-spacing:1px}.intro h1{font-family:'Black Han Sans',sans-serif;font-size:clamp(48px,6vw,84px);font-weight:400;line-height:1.08;letter-spacing:-4px;margin:20px 0 0}.intro em{font-style:normal;color:#df4f32}.intro p{line-height:1.9;font-size:15px}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.game-card{text-align:left;border:1px solid #c9cabc;border-radius:20px;background:#fffcf4;overflow:hidden;padding:0;transition:transform .2s,box-shadow .2s}.game-card:hover{transform:translateY(-7px);box-shadow:0 14px 0 #17282012}.card-art{height:290px;position:relative;overflow:hidden;background:#4a6447}.card-art>img{width:100%;height:100%;object-fit:cover;filter:brightness(.7)}.card-art:after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 55%,#15251c80)}.number{position:absolute;top:15px;left:20px;font-size:46px;color:#fff8;font-family:Georgia}.genre{position:absolute;top:24px;right:14px;background:#f8f2dc;color:#172820;padding:7px 11px;border-radius:20px;font-size:10px;font-weight:800}.hero-sprite{position:absolute;width:245px;height:245px;bottom:-2px;left:50%;transform:translateX(-50%);background-image:url('/assets/characters-v7b.webp');background-size:300% 300%;z-index:1;filter:drop-shadow(0 12px 6px #0005)}.sprite-one{background-position:50% 0}.sprite-two{background-position:50% 50%}.sprite-three{background-position:100% 100%}.card-copy{padding:23px}.card-copy small{font-size:11px;color:#777b67}.card-copy h2{font-size:23px;margin:8px 0 12px;letter-spacing:-1px}.card-copy h2 span{float:right;color:#dd4e33}.card-copy p{font-size:13px;line-height:1.8;color:#62695a;margin:0 0 22px}.card-copy footer{border-top:1px solid #d7d8cc;padding-top:17px;display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:10px}.card-copy footer b{font-size:12px}.lobby-bottom{display:flex;justify-content:space-between;margin-top:28px;font-size:12px;color:#63705f}.site-footer{max-width:1336px;margin:20px auto;padding:24px 0;border-top:1px solid #c9cabc;font-size:11px;letter-spacing:2px}.site-footer span{float:right;letter-spacing:0}#play{max-width:1120px;padding-top:20px}.play-top{display:flex;align-items:center;justify-content:space-between;text-align:center;gap:12px}.play-top small{font-size:10px;color:#69705d}.play-top h1{font-size:24px;letter-spacing:-1px;margin:3px 0}.hud{display:flex;justify-content:space-between;align-items:center;padding:20px 10px 13px}.hud div:last-child{text-align:right}.hud small{display:block;font-size:10px;color:#6c755e}.hud strong{font-size:28px;font-weight:800}.hud-center{text-align:center}.hud-center strong{font-size:17px}.stage{position:relative;border:5px solid #172820;border-radius:18px;overflow:hidden;background:#14291f}canvas{width:100%;display:block;aspect-ratio:5/3;touch-action:none}.overlay{position:absolute;inset:0;background:#0b1d22a8;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);padding:14px}.modal{background:#fffbef;border:1px solid #ffffff80;padding:28px;border-radius:18px;max-width:490px;width:100%;text-align:center;box-shadow:0 12px 40px #0004}.modal h2{font-size:30px;letter-spacing:-1.5px;margin:9px 0 12px}.modal p{font-size:13px;line-height:1.8;white-space:pre-line;margin:0 0 14px;color:#52624f}fieldset{border:0;padding:0;margin:12px 0;display:flex;justify-content:center;gap:14px;font-size:12px}legend{width:100%;font-size:10px;color:#798273;margin-bottom:8px}input{accent-color:#de4e30}.primary{background:#e25232;color:white;border:0;padding:14px 28px;border-radius:9px;font-weight:800;margin-top:8px;width:100%;box-shadow:0 4px 0 #a63019}.controls{display:flex;justify-content:center;gap:12px;margin:14px 0 0}.controls button{user-select:none;-webkit-user-select:none;touch-action:none;border:0;border-bottom:5px solid #244035;border-radius:12px;background:#456454;color:#fff;padding:17px 25px;min-width:100px;font-weight:800;font-size:17px}.controls button:active,.controls button.held{transform:translateY(3px);border-bottom-width:2px;background:#e45331}.controls button span{display:block;font-size:10px;font-weight:400;opacity:.75;margin-top:2px}.controls button:disabled{opacity:.45}.tip{text-align:center;font-size:12px;line-height:1.7;color:#6a735f;margin:13px 0}.record{display:flex;justify-content:space-between;font-size:10px;color:#78816d;margin-top:18px}#best{color:#284b39;font-weight:800}#again{font-size:11px;margin-top:14px}body.playing .site-footer{display:none}
@media(max-width:850px){header{padding:18px 22px}main{padding:28px 22px}.game-grid{gap:12px}.card-art{height:215px}.hero-sprite{width:210px;height:210px}.card-copy{padding:18px 14px}.card-copy h2{font-size:18px}.card-copy footer span{display:none}.intro p{font-size:12px}.site-footer{margin:20px 22px}.header-right>span{display:none}}
@media(max-width:620px){.intro{align-items:start}.intro h1{font-size:48px;letter-spacing:-2px}.intro p{max-width:145px;margin-top:32px}.eyebrow{font-size:10px}.game-grid{grid-template-columns:1fr}.card-art{height:250px}.hero-sprite{height:260px;width:260px}.card-copy h2{font-size:24px}.card-copy footer span{display:block}.lobby-bottom{font-size:10px;gap:16px}.brand{font-size:19px}.header-right button{font-size:11px;padding:8px 10px}#play{padding:14px 8px}.play-top h1{font-size:17px}#home,#pause{padding:8px;font-size:10px}.stage{border-width:3px;border-radius:12px}canvas{aspect-ratio:5/4;object-fit:fill}.modal{padding:16px 13px}.modal h2{font-size:23px;margin:5px 0}.modal p{font-size:11px;line-height:1.6;margin-bottom:8px}fieldset{font-size:10px;margin:8px 0;gap:9px}legend{margin-bottom:4px}.primary{padding:10px}.hud{padding:13px 7px}.hud strong{font-size:24px}.hud-center strong{font-size:12px}.controls{gap:7px}.controls button{min-width:0;flex:1;padding:15px 7px;font-size:14px}.tip{padding:0 10px;font-size:10px}.site-footer span{font-size:10px;letter-spacing:0}.record{padding:0 7px}.overlay{padding:8px}#settings{margin-top:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
body.playing header{padding-top:10px;padding-bottom:10px}body.playing .brand span{display:none}body.playing #play{max-width:min(1120px,calc((100svh - 265px)*1.667));min-width:min(100%,620px);padding:12px 12px 0}.playing .play-top h1{font-size:20px}.playing .hud{padding:10px 7px}.playing .hud strong{font-size:23px}.playing .hud-center strong{font-size:15px}.playing .controls{margin-top:10px}.playing .controls button{padding:10px 20px}.playing .tip{margin:8px 0}.playing .record{margin-top:8px}.playing .modal{padding:22px}.playing .modal h2{font-size:26px}
@media(max-width:620px){body.playing #play{padding:12px 8px 0;max-width:100%}.playing .play-top h1{font-size:16px}.playing .hud-center strong{font-size:11px}.playing .controls button{padding:14px 6px}.playing .modal{padding:14px 10px}.playing .modal h2{font-size:23px}}
@media(max-width:360px){.stage canvas{min-height:350px;aspect-ratio:auto}.playing .modal{padding:17px 10px}.playing .modal h2{font-size:22px}}
.quest{grid-column:1/-1;display:grid;grid-template-columns:1fr 1.5fr;background:#192f38;color:#f3e8c8;border-color:#658179}.quest .card-art{height:240px}.quest .card-copy{display:flex;flex-direction:column;justify-content:center;padding:30px}.quest .card-copy small{color:#e7bd77}.quest .card-copy h2{font-size:32px}.quest .card-copy p{color:#bccdc6}.quest .card-copy footer{border-color:#647c7666}.quest .genre{background:#ecc377}.quest .hero-sprite{width:250px;height:250px}.quest .card-copy footer b{color:#f6cc7b}@media(max-width:620px){.quest{grid-template-columns:1fr}.quest .card-art{height:240px}.quest .card-copy{padding:23px}.quest .card-copy h2{font-size:27px}}
.quest .hero-sprite{background-image:url('/assets/hok-hero-v8.webp');background-size:400% 300%;background-position:0 0}

/* Campaign navigation stays outside the action screen and remains reachable on phones. */
#route-map{display:flex;gap:6px;margin:16px 0 8px;overflow:auto;padding:3px 2px 7px;scrollbar-width:thin}#route-map button{flex:1;min-width:115px;border:1px solid #afbdac;border-radius:12px;background:#fffaf0;padding:10px;font-size:11px;font-weight:800}#route-map button[aria-current=true]{background:#254c3d;color:#fff4cd;border-color:#254c3d}#route-map button:disabled{opacity:.45;cursor:not-allowed}.mission{margin:3px 4px 9px;font-size:12px;color:#47614d;line-height:1.6}.controls button[data-action=dash]{background:#247c71;flex:.6}.controls button[data-action=thrust]{flex:1}.playing .stage{min-height:320px}.overlay{overflow:auto}.modal{max-height:100%;overflow:auto}canvas{aspect-ratio:5/3!important;object-fit:contain!important;min-height:0!important}.playing .stage:has(.overlay:not([hidden])){min-height:390px}.playing #play{max-width:min(1000px,calc((100svh - 335px)*1.667));min-width:min(100%,580px)}.playing .hud{padding-top:4px}
@media(max-width:620px){#route-map{margin-top:10px}#route-map button{min-width:96px;font-size:10px}.mission{font-size:11px}.playing .stage{min-height:0}.playing .stage:has(.overlay:not([hidden])){min-height:390px}.playing .stage:has(.overlay[hidden]) canvas{min-height:280px!important;object-fit:contain!important}.playing .controls{position:sticky;bottom:8px;z-index:3;background:#f5f1e7e8;padding:5px;border-radius:14px}.playing .controls button{min-height:62px}.playing .tip{font-size:11px}.playing .record{padding-bottom:15px}.playing .modal h2{font-size:22px}}

.controls button[data-action=guard]{background:#315e7a;color:#fff}.controls button[data-action=guard].held{background:#75c9e8}.playing .controls button{touch-action:none}@media(max-width:620px){.controls button[data-action=guard],.controls button[data-action=leftwind],.controls button[data-action=rightwind],.controls button[data-action=sun]{padding:12px 3px;font-size:15px}.controls button span{font-size:9px}}

@media(max-width:650px) and (orientation:portrait){.playing .stage:has(.overlay[hidden]) canvas{min-height:0!important}}
/* Mobile 10: readable instructions and a separate thumb dock. */
body:not([data-phase=playing]) #controls,body:not([data-phase=playing]) #play-coach{display:none}
#play-coach{background:#203e35;color:#fff7dc;border-radius:12px;padding:12px 16px;margin:10px 0;min-height:70px}#coach-cue{display:block;font-size:16px;line-height:1.5}#coach-detail{font-size:13px;color:#d5e3c8;margin-top:3px}#heat-panel{margin-top:8px}#heat-value{font-size:12px;margin-bottom:7px}.heat-track{position:relative;height:13px;border-radius:9px;background:linear-gradient(to right,#91cddd 0 40%,#82bd70 40% 88%,#f08269 88%);margin:0 7px}.heat-track #heat-pin{position:absolute;top:-4px;height:21px;width:7px;background:#fff;border:2px solid #273b31;border-radius:5px;transform:translateX(-50%)}.progress-track{height:5px;margin-top:9px;background:#ffffff26;border-radius:4px;overflow:hidden}#progress-fill{display:block;height:100%;background:#ffe096}#controls button.recommended{outline:3px solid #d69522;outline-offset:3px}#controls button{transition:background .1s,transform .1s}
@media(max-width:650px) and (orientation:portrait){
 body.playing{padding-bottom:calc(135px + env(safe-area-inset-bottom));overscroll-behavior:none}body.playing>header{display:none}body.playing main{padding:10px 10px 0}.playing #play{min-width:0;max-width:100%}.play-top{margin:0 0 8px;gap:8px}.play-top h1{font-size:17px;margin:2px 0}.play-top p{display:none}#home,#pause{padding:9px;font-size:11px;min-height:44px}.hud{margin:6px 0;padding:9px 12px}.hud strong{font-size:16px}.hud small{font-size:10px}
 body[data-phase=playing] #route-map,body[data-phase=paused] #route-map,body[data-phase=playing] #mission,body[data-phase=paused] #mission,#tip,.record{display:none}
 .playing .stage{border-radius:14px}.playing .stage canvas{width:100%;height:auto!important;min-height:0!important;aspect-ratio:6/5!important;object-fit:contain!important}body[data-mode=rhythm] .stage canvas{aspect-ratio:5/3!important}
 #play-coach{padding:10px 12px;margin:8px 0;min-height:68px}#coach-cue{font-size:15px}#coach-detail{font-size:12px}
 #controls{position:fixed;z-index:8;left:0;right:0;bottom:0;margin:0;display:flex;align-items:end;justify-content:space-between;gap:12px;padding:14px 18px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(transparent,#f5f1e7 15%);border:0;box-sizing:border-box}
 #controls button{flex:none;width:94px;min-height:82px;border-radius:24px;padding:12px 6px;font-size:17px;line-height:1.2;touch-action:none}#controls button span{font-size:11px;line-height:1.5;display:block;margin-top:6px}#controls [data-action=thrust],#controls [data-action=sun]{background:#df7440;color:#fff8e8;border-color:#a6552c;min-height:96px;width:116px;font-weight:800}#controls [data-action=guard]{width:74px;min-height:74px;font-size:16px}#controls [data-action=clear]{width:90px;font-size:15px}body[data-mode=rhythm] #controls{gap:8px}body[data-mode=rhythm] #controls button{flex:1;width:auto;min-width:0;min-height:82px}
 .overlay{overflow:auto}.overlay .modal{max-height:100%;overflow:auto;padding:15px}.modal h2{font-size:23px}.modal p{font-size:12px;line-height:1.6}
} 
@media(max-width:350px) and (orientation:portrait){#controls{gap:7px;padding-left:12px;padding-right:12px}#controls [data-action=sun]{width:102px}#controls [data-action=clear]{width:84px}#controls [data-action=guard]{width:70px}#coach-cue{font-size:13px}.play-top h1{font-size:15px}}
@media(orientation:landscape) and (max-height:600px){#play-coach{position:fixed;top:4px;left:28%;right:28%;z-index:3;min-height:0;padding:5px 9px;margin:0;background:#203e35e8;pointer-events:none}#coach-cue{font-size:12px}#coach-detail{font-size:10px}#heat-panel{margin-top:4px}#heat-value{display:none}.progress-track{margin-top:4px}#controls{z-index:5}#controls button{min-height:54px;min-width:64px}#controls button span{font-size:10px}}
@media(orientation:landscape) and (max-height:600px){
 body.playing{height:100svh;overflow:hidden}.playing>header,.playing .site-footer,.playing #route-map,.playing #mission,.playing .hud,.playing #tip,.playing .record{display:none}.playing main{padding:0;margin:0}.playing #play{max-width:100%;min-width:0}.playing .play-top{height:0;margin:0}.playing .play-top>div{display:none}.playing #home,.playing #pause{position:fixed;top:8px;z-index:9;padding:8px;min-height:44px;font-size:11px;background:#f5f1e7ed}.playing #home{left:10px}.playing #pause{right:10px}
 .playing .stage,.playing .stage:has(.overlay:not([hidden])){position:fixed;left:50%;top:0;transform:translateX(-50%);height:100svh;width:calc(100svh * 1.667);max-width:100vw;min-height:0!important;border-radius:0;border:0}.playing .stage canvas{width:100%;height:100%!important;min-height:0!important;object-fit:contain!important}.playing .modal{padding:12px 20px;max-height:96svh}.playing .modal h2{font-size:22px;margin:6px}.playing .modal p{font-size:11px;line-height:1.4;margin:7px}.playing .modal fieldset{padding:5px;margin:5px}
 #controls{position:fixed;left:12px;right:12px;bottom:12px;display:flex;justify-content:space-between;align-items:end;margin:0;padding:0;background:none;pointer-events:none;border:0}#controls button{pointer-events:auto;flex:none;width:102px;min-height:80px;border-radius:22px;font-size:17px;padding:9px;touch-action:none}#controls button span{font-size:10px;display:block;margin-top:5px}
 body[data-mode=weather] #controls{height:156px}body[data-mode=weather] #controls button{position:absolute;width:90px;min-height:66px}body[data-mode=weather] #controls [data-action=clear]{left:0;top:0}body[data-mode=weather] #controls [data-action=guard]{left:0;bottom:0}body[data-mode=weather] #controls [data-action=sun]{right:0;bottom:0;width:102px;min-height:86px;background:#df7440;color:#fff}
 body[data-mode=rhythm] #controls{left:34%;right:10%;gap:7px}body[data-mode=rhythm] #controls button{flex:1;width:auto;min-width:0;min-height:53px}
}