@font-face{font-family:Kingdom;src:url('shell-assets/neodgm.ttf') format('truetype');font-display:swap}
:root{--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px)}
:root{color-scheme:dark;font-family:Kingdom,'Malgun Gothic',sans-serif;background:#081c22;color:#f5edce}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;height:100dvh}
button{font:inherit;cursor:pointer}button:focus-visible,canvas:focus-visible{outline:3px solid #f1c675;outline-offset:5px}button:disabled{cursor:wait}button[hidden],[hidden]{display:none!important}
.game-stage{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;background:#081c22;overflow:hidden}
#canvas{display:block;max-width:100%;max-height:100%;touch-action:none;outline:none;image-rendering:pixelated}
.welcome{position:absolute;inset:0;z-index:10;background:#081c22;overflow:hidden;transition:opacity .45s ease}
.welcome.is-leaving{opacity:0;pointer-events:none}.landscape{position:absolute;inset:0 0 0 30%;background:url('shell-assets/kingdom.png') 62% center/cover no-repeat;image-rendering:pixelated}
.welcome-shade{position:absolute;inset:0;background:linear-gradient(90deg,#081c22 0%,rgba(8,28,34,.98) 25%,rgba(8,28,34,.90) 38%,rgba(8,28,34,.25) 60%,rgba(8,28,34,.06)),linear-gradient(0deg,rgba(8,28,34,.8),transparent 30%)}
.intro{position:absolute;z-index:1;top:50%;left:7%;width:500px;transform:translateY(-50%)}
.eyebrow{display:flex;gap:12px;align-items:center;color:#96b4ae;font-size:12px;letter-spacing:1.8px;margin-bottom:24px;white-space:nowrap}
.pixel-mark{width:10px;height:10px;background:#e7be70;box-shadow:4px -4px 0 #e7be70,8px 0 0 #e7be70,0 6px 0 #9b773f,8px 6px 0 #9b773f}
h1{font-size:clamp(48px,6.2vw,86px);line-height:1.01;font-weight:400;letter-spacing:-1px;margin:0;color:#fff7df;text-shadow:4px 4px 0 rgba(0,0,0,.25)}h1 span{color:#e9c17d}
.korean-title{font-size:24px;color:#becdc3;letter-spacing:2px;margin:21px 0 0}.gold-rule{width:42px;height:3px;background:#c9a364;margin:26px 0}
.description{font-size:18px;line-height:1.75;color:#b9cbc4;margin:0 0 30px}.start-area{width:320px;min-height:100px}
#start{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:58px;border:1px solid #f1d69b;border-bottom:4px solid #93713f;padding:13px 23px;background:#e8bf76;color:#172b2d;font-size:23px;box-shadow:5px 5px 0 rgba(0,0,0,.25);transition:background .15s,transform .15s}
#start:hover{background:#f6d18c;transform:translateY(-2px)}#start:active{transform:translateY(1px)}#start span{font-size:29px}.start-note{font-size:13px;color:#89a59f;margin:15px 0 0;text-align:center}.intro-bottom{display:flex;gap:14px;align-items:center;color:#78978f;font-size:13px;margin-top:27px}.dot{color:#c6a569}
.art-caption{position:absolute;right:5%;bottom:5%;margin:0;text-align:right;color:#c5d6c3;text-shadow:1px 2px 2px #062224;font-size:14px;line-height:1.8}.art-caption span{font-size:11px;letter-spacing:3px;color:#e4c37e}
.loading{padding:8px 0}.loading-caption{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:#d6d9bf;min-height:38px;line-height:1.5}#status{max-width:275px}#load-percent{white-space:nowrap;color:#e7bf78}progress{appearance:none;width:100%;height:8px;border:0;background:#1e3b3e}progress::-webkit-progress-bar{background:#1e3b3e}progress::-webkit-progress-value{background:#e8bf76;transition:width .2s}progress::-moz-progress-bar{background:#e8bf76}progress:not([value]){animation:breathe 1s ease infinite alternate}.welcome.has-error .loading-caption{color:#ffc0a7}.welcome.has-error #start{margin-top:18px}
.fullscreen{position:fixed;right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:5;display:flex;align-items:center;gap:7px;min-height:34px;padding:6px 10px;border:1px solid #526b64;background:rgba(8,28,34,.86);color:#bed0c7;font-size:12px;opacity:.7}.fullscreen:hover,.fullscreen:focus-visible{opacity:1}.fullscreen span{font-size:20px;line-height:1}.orientation-hint{display:none;position:fixed;z-index:20;bottom:max(18px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);border:1px solid #446760;background:rgba(8,28,34,.95);padding:12px 15px;color:#cfdbcc;font-size:13px;line-height:1.5;text-align:center}.orientation-hint span{color:#e7bf78;font-size:18px;margin-right:5px}.no-script{position:fixed;z-index:50;inset:0;background:#081c22;display:grid;place-content:center;padding:30px;text-align:center}
.orientation-hint button{border:0;background:transparent;color:#d5ddcb;font-size:22px;line-height:1;padding:0 0 0 12px;min-width:32px;min-height:24px}
.fullscreen{bottom:max(4px,env(safe-area-inset-bottom));min-height:22px;height:22px;padding:2px 6px;gap:4px;font-size:10px;width:90px;white-space:nowrap;justify-content:center;opacity:.55}.fullscreen span{font-size:14px}
@keyframes breathe{to{opacity:.45}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media(max-height:700px) and (min-width:801px){.intro{left:6%}.eyebrow{margin-bottom:16px}h1{font-size:66px}.korean-title{font-size:20px;margin-top:15px}.gold-rule{margin:18px 0}.description{font-size:16px;line-height:1.55;margin-bottom:22px}.intro-bottom{margin-top:15px}}
@media(max-width:800px){.intro{left:7%;width:86%}.eyebrow{font-size:10px;letter-spacing:1px}.landscape{inset:0;background-position:60% center}.welcome-shade{background:linear-gradient(90deg,rgba(8,28,34,.96),rgba(8,28,34,.7) 65%,rgba(8,28,34,.4)),linear-gradient(0deg,#081c22,transparent 60%)}h1{font-size:clamp(49px,11vw,76px)}.art-caption{display:none}.description{font-size:17px}.intro-bottom{font-size:12px;gap:9px}.start-area{max-width:100%}}
@media(orientation:portrait) and (max-width:850px){.orientation-hint{display:block}.intro{transform:translateY(-53%)}.fullscreen{bottom:75px}.intro-bottom{margin-top:22px}}
@media(max-height:480px) and (orientation:landscape){.intro{top:50%;left:6%;width:50%}.eyebrow{font-size:9px;margin-bottom:12px}.pixel-mark{transform:scale(.8)}h1{font-size:43px}.korean-title{font-size:17px;margin-top:12px}.gold-rule{margin:14px 0}.description{display:none}.start-area{width:270px;min-height:80px}#start{min-height:46px;font-size:20px;padding:8px 18px}.start-note{font-size:11px;margin-top:10px}.intro-bottom{margin-top:12px;font-size:11px}.landscape{inset:0 0 0 22%}.welcome-shade{background:linear-gradient(90deg,#081c22,rgba(8,28,34,.90) 38%,rgba(8,28,34,.2) 75%)}.loading-caption{font-size:12px;min-height:30px}}
@media(max-width:1099px),(max-height:639px),(pointer:coarse){.fullscreen{display:none!important}}
