@font-face{font-family:Jua;src:url('../assets/Jua-game.woff2') format('woff2');font-display:swap}
:root{--ink:#49342e;--cream:#fff9e9;--yellow:#ffe17e;--orange:#ef9951}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#8acfe6;font-family:Jua,sans-serif;color:var(--ink)}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:4px solid #fff;outline-offset:4px}button:active{transform:translateY(3px)}[hidden]{display:none!important}#game{position:relative;width:100%;height:100%;height:100dvh;overflow:hidden;touch-action:none;user-select:none}#scene{display:block;width:100%;height:100%}.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:max(36px,env(safe-area-inset-top)) 20px max(27px,env(safe-area-inset-bottom));pointer-events:none}.screen button{pointer-events:auto}.intro-heading{text-align:center;filter:drop-shadow(0 3px 0 #ffffff65)}.chapter-tag{display:inline-block;font-size:15px;letter-spacing:1.5px;background:#fff9e9ed;border:2px solid var(--ink);border-radius:99px;padding:8px 18px;box-shadow:0 3px 0 #49342e1f}.intro-heading h1{font-size:clamp(70px,9vw,112px);line-height:1.05;letter-spacing:-5px;margin:11px 0 5px;color:#fff9e9;-webkit-text-stroke:2.5px var(--ink);paint-order:stroke fill;text-shadow:0 7px 0 var(--ink);transform:rotate(-4deg);position:relative}.intro-heading h1 span{color:#ffe17e}.intro-heading h1 i{font-size:27px;position:absolute;right:-26px;top:4px;-webkit-text-stroke:0;transform:rotate(22deg);font-style:normal;text-shadow:none}.intro-heading p{margin:14px 0;font-size:17px}.intro-bottom{width:min(340px,88vw);text-align:center}.dog-tag{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:15px;font-size:12px;color:#49342e}.dog-tag b{font-size:26px}.dog-tag span:last-child{border-left:1px solid #49342e60;padding-left:10px}.primary-button{display:block;width:100%;padding:17px 20px;background:#ffe17e;border:3px solid var(--ink);border-radius:19px;box-shadow:0 6px 0 var(--ink),inset 0 3px 0 #fff6c0;font-size:25px;transition:transform .1s}.primary-button span{font-size:19px;margin-left:12px}.instructions{display:flex;gap:18px;justify-content:center;font-size:15px;margin-top:21px}.gesture-hint{font-size:11px;margin:9px 0 0;color:#765844}.corner-note{position:absolute;left:25px;bottom:27px;font-size:13px}.corner-note span{margin-left:10px;font-size:22px}#hud{position:absolute;inset:0;pointer-events:none;color:var(--cream);text-shadow:0 2px 0 var(--ink),1px 0 var(--ink),-1px 0 var(--ink)}.top-left{position:absolute;left:max(22px,env(safe-area-inset-left));top:max(20px,env(safe-area-inset-top))}.stat{background:#49342e85;border:2px solid #fff6dfb0;border-radius:14px;box-shadow:0 3px 0 #49342e40;display:flex;align-items:center;gap:13px;padding:7px 15px;font-size:29px}.coin-icon{display:inline-flex;align-items:center;justify-content:center;color:#c47a26;background:#ffdb59;width:31px;height:31px;border:3px solid var(--ink);border-radius:50%;font-size:18px;text-shadow:none;box-shadow:inset 0 0 0 2px #fff29c}.score{font-size:17px;margin:9px 3px}.score b{margin-left:5px}#hearts{color:#ff9197;font-size:26px;letter-spacing:4px;-webkit-text-stroke:1.5px #593a35;paint-order:stroke fill}.journey{position:absolute;top:max(23px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:min(35vw,400px)}.journey-label{font-size:12px;display:flex;justify-content:space-between;margin:0 5px 7px;color:#49342e;text-shadow:0 1px #fff}.progress-track{height:15px;border:3px solid var(--ink);background:#fff9e9cc;border-radius:10px;position:relative;box-shadow:0 2px 0 #ffffff60}.progress-track:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 2px),#49342e33 calc(20% - 2px),#49342e33 20%);border-radius:8px}#progress{width:0%;height:100%;background:#ffe17e;border-radius:7px}#paw-progress{position:absolute;top:-7px;left:0%;color:#ef9951;font-size:23px;line-height:22px;-webkit-text-stroke:2px var(--ink);transform:translateX(-50%);z-index:1}.top-right{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));text-align:right}.timer{justify-content:center;font-size:25px}.stage{font-size:12px;letter-spacing:1px;margin:9px 2px}.circle-button{border:2px solid var(--ink);border-radius:50%;background:#fff9e9d9;color:var(--ink);width:40px;height:40px;font-size:22px;box-shadow:0 3px 0 #49342e40;position:relative;pointer-events:auto}#pause{font-size:18px}.sound-button{position:absolute;right:max(22px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));z-index:12}#mute-mark{position:absolute;inset:6px;font-size:25px;color:#df7662}.bottom-hud{position:absolute;width:min(340px,54vw);bottom:max(28px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%)}.boost-caption{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:0 3px 7px}.boost-caption span:last-child{font-size:11px}.boost-track{height:19px;border:3px solid var(--ink);border-radius:10px;background:#fff9e9c9;box-shadow:0 3px 0 #49342e22}#boost-fill{height:100%;width:0;background:#7fdbcf;border-radius:8px;transition:width .1s}#stage-banner{position:absolute;top:25%;left:0;width:100%;text-align:center;font-size:clamp(27px,4vw,43px);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;transition:opacity .4s}#stage-banner small{display:block;font-size:15px;margin-top:8px;-webkit-text-stroke:0}#toast{position:absolute;left:50%;top:20%;transform:translateX(-50%);background:#fff9e9ed;color:var(--ink);border:2px solid var(--ink);border-radius:40px;padding:10px 23px;font-size:23px;white-space:nowrap;text-shadow:none;opacity:0;transition:opacity .15s}.popup{position:absolute;font-size:23px;color:#ffe17e;text-shadow:0 2px #49342e;-webkit-text-stroke:1px var(--ink);paint-order:stroke fill;pointer-events:none}.dimmed{justify-content:center;background:#49342e32;pointer-events:auto}.result-card{width:min(380px,88vw);text-align:center;border:3px solid var(--ink);border-radius:28px;background:#fff9e9f7;padding:27px 25px 18px;box-shadow:0 9px 0 #49342e60}.result-card .chapter-tag{font-size:12px;padding:6px 13px;box-shadow:none;border-color:#49342e30;background:#faeccd}.result-card h2{font-size:32px;line-height:1.15;margin:16px -5px 10px}.result-card p{font-size:13px;line-height:1.7;margin:0 0 16px;color:#7b6150}.stars{color:#ffcb48;-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;font-size:44px;letter-spacing:5px;margin-top:18px}.stars .empty{color:#dfd1b9}.result-stats{display:flex;justify-content:space-around;border-top:2px dashed #49342e30;border-bottom:2px dashed #49342e30;padding:15px 0;margin:20px 0}.result-stats span{display:block;font-size:12px;color:#7b6150}.result-stats b{display:block;font-size:29px;margin-top:8px}.result-card .primary-button{font-size:21px;padding:13px 8px}.text-button{background:none;border:0;font-size:13px;padding:18px 20px 0;color:#7b6150}.loading-screen{position:absolute;inset:0;background:#8acfe6;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:20}.loading-paw{font-size:60px;animation:load-bob 1s ease-in-out infinite}.loading-screen h2{font-size:25px;margin:20px}.loading-screen p{font-size:13px}.load-track{height:14px;width:230px;border:2px solid var(--ink);border-radius:10px;background:#fff9e9}#load-progress{height:100%;width:0;background:#ffe17e;border-radius:10px}#reload{background:#ffe17e;border:2px solid var(--ink);border-radius:12px;padding:10px 20px}.loading-screen.failed .loading-paw{animation:none}#speed-lines{position:absolute;inset:-10%;background:repeating-conic-gradient(from 7deg at 50% 55%,transparent 0deg 14deg,#fff8d677 14.1deg 14.6deg,transparent 14.8deg 28deg);mask-image:radial-gradient(ellipse,transparent 32%,#000 75%);opacity:0;pointer-events:none;transition:opacity .2s}#speed-lines.active{opacity:.8;animation:streak .55s linear infinite}#flash{position:absolute;inset:0;background:#f8796b;opacity:0;pointer-events:none}#debug{position:absolute;bottom:8px;left:8px;font:11px monospace;background:#49342ec0;color:#fff;padding:4px 7px;pointer-events:none;z-index:10}#touch-controls{position:absolute;bottom:82px;left:18px;right:18px;display:none;justify-content:space-between;pointer-events:none}#touch-controls button{width:42px;height:42px;border:2px solid #49342e55;border-radius:14px;background:#fff9e980;color:#49342e;font-size:28px;pointer-events:auto}@keyframes load-bob{50%{transform:translateY(-10px) rotate(10deg)}}@keyframes streak{50%{transform:scale(1.035)}}
@media(max-width:600px){.screen{padding-top:max(49px,calc(env(safe-area-inset-top) + 24px));padding-bottom:max(35px,calc(env(safe-area-inset-bottom) + 18px))}.intro-heading h1{font-size:83px}.chapter-tag{font-size:12px;padding:7px 15px}.intro-heading p{font-size:14px}.corner-note{display:none}.top-left{left:14px;top:max(17px,env(safe-area-inset-top))}.stat{padding:6px 11px;font-size:26px;gap:8px;border-radius:12px}.coin-icon{width:26px;height:26px;font-size:14px}.score{font-size:14px;margin-top:8px}#hearts{font-size:23px}.top-right{right:14px;top:max(17px,env(safe-area-inset-top))}.timer{font-size:22px}.journey{top:max(125px,calc(env(safe-area-inset-top) + 112px));width:61vw}.journey-label{font-size:11px}.progress-track{height:13px}.bottom-hud{width:60vw;bottom:max(27px,env(safe-area-inset-bottom))}.boost-caption{font-size:12px}.boost-caption span:last-child{font-size:9px}.sound-button{right:15px;bottom:max(25px,env(safe-area-inset-bottom))}#stage-banner{top:25%;font-size:29px}#toast{top:23%;font-size:20px}#touch-controls:not([hidden]){display:flex}}
@media(max-height:520px) and (min-width:600px){.screen{padding:14px 20px}.intro-heading{position:absolute;left:7%;top:12%;text-align:left}.intro-heading h1{font-size:75px}.intro-heading p{font-size:13px}.intro-bottom{position:absolute;right:5%;bottom:15%;width:260px}.dog-tag{margin-bottom:9px}.instructions{margin-top:16px;gap:13px;font-size:13px}.primary-button{font-size:23px;padding:13px}.journey{width:33vw}.top-left,.top-right{top:12px}.stat{font-size:24px}.bottom-hud{bottom:17px;width:260px}.result-card{padding:13px 23px 9px;width:340px}.stars{font-size:30px;margin-top:8px}.result-card h2{font-size:26px;margin:9px 0}.result-card p{margin-bottom:7px}.result-stats{padding:8px 0;margin:10px 0}.result-stats b{font-size:22px;margin-top:4px}.result-card .primary-button{font-size:19px;padding:10px}.text-button{padding-top:12px}#touch-controls:not([hidden]){display:flex;left:22px;right:78px;bottom:18px;gap:7px;width:200px}#stage-banner{top:26%}}
@media(prefers-reduced-motion:reduce){.loading-paw,#speed-lines.active{animation:none}button{transition:none}}
/* 2차 모바일 HUD: 모든 안내는 CSS 13px 이상, 플레이 공간은 스와이프만 사용한다. */
#hud{text-shadow:0 2px 0 var(--ink),2px 0 var(--ink),-2px 0 var(--ink),0 -1px var(--ink)}
.coin-stat{gap:9px;padding:8px 13px}.coin-stat .score{margin:0 0 0 4px;padding-left:12px;border-left:1px solid #fff9e970;font-size:14px;line-height:1.1}.coin-stat .score b{display:block;font-size:25px;margin:3px 0 0}#coins{font-size:30px}#hearts{margin-top:8px}
.journey-label{font-size:14px;color:var(--cream);text-shadow:0 2px var(--ink),1px 0 var(--ink),-1px 0 var(--ink)}.stage,.boost-caption,.boost-caption span:last-child,.gesture-hint,.dog-tag,.chapter-tag,.result-card .chapter-tag,.result-stats span{font-size:13px}.boost-caption{font-size:15px}.gesture-hint{color:var(--cream);text-shadow:0 1px var(--ink),1px 0 var(--ink),-1px 0 var(--ink)}
.bottom-hud{width:min(370px,64vw);bottom:max(29px,calc(env(safe-area-inset-bottom) + 20px))}.boost-track{height:22px}.popup{font-size:30px;-webkit-text-stroke:2px var(--ink);text-shadow:0 3px var(--ink);white-space:nowrap}
#swipe-guide{position:absolute;top:37%;left:50%;transform:translateX(-50%);padding:17px 20px;text-align:center;color:var(--cream);background:#49342eda;border:2px solid #fff9e9cf;border-radius:20px;pointer-events:none;white-space:nowrap;box-shadow:0 4px 0 #49342e55}#swipe-guide b{display:block;font-size:23px}#swipe-guide span{display:block;font-size:13px;margin-top:8px}
@media(max-width:600px){.top-left{left:12px;top:max(14px,calc(env(safe-area-inset-top) + 8px))}.top-right{right:12px;top:max(14px,calc(env(safe-area-inset-top) + 8px))}.coin-stat{gap:7px;padding:7px 9px}.coin-stat .score{padding-left:9px;font-size:13px}.coin-stat .score b{font-size:24px}#coins{font-size:27px}.journey{top:max(119px,calc(env(safe-area-inset-top) + 107px));width:69vw}.journey-label{font-size:13px;margin-bottom:7px}.stage{font-size:13px;letter-spacing:0}.progress-track{height:16px}.bottom-hud{width:70vw;left:44%;bottom:max(29px,calc(env(safe-area-inset-bottom) + 20px))}.boost-caption{font-size:14px}.boost-caption span:last-child{font-size:13px}.chapter-tag,.gesture-hint,.dog-tag{font-size:13px}#toast{font-size:21px;top:24%}.intro-heading p{font-size:15px}.sound-button{width:36px;height:36px;right:13px;bottom:max(25px,calc(env(safe-area-inset-bottom) + 18px))}}
@media(max-height:520px) and (min-width:600px){.journey{width:32vw}.coin-stat .score b{font-size:22px}.bottom-hud{bottom:16px}.journey-label{font-size:13px}.boost-caption{font-size:14px}.boost-caption span:last-child{font-size:13px}#swipe-guide{top:35%}.gesture-hint{font-size:13px}}
.intro-heading p{color:var(--cream);text-shadow:0 2px var(--ink),2px 0 var(--ink),-2px 0 var(--ink),0 -1px var(--ink)}

/* 점수판 */
.board-link{display:inline-block;margin-top:12px;background:#fff9e9e6;border:2px solid var(--ink);border-radius:99px;padding:7px 16px;font-size:14px;color:var(--ink);box-shadow:0 3px 0 #49342e30}
.board-link span:not(:empty){margin-left:6px;color:#b0682c}
.save-form{display:flex;gap:8px;margin:0 0 14px}
.save-form input{flex:1;min-width:0;font:inherit;font-size:17px;padding:10px 12px;border:2px solid #49342e60;border-radius:14px;background:#fff;color:var(--ink);font-family:Jua,system-ui,sans-serif}
.save-form input:focus{outline:none;border-color:var(--ink)}
.save-form button{font:inherit;font-size:16px;padding:0 14px;border:2px solid var(--ink);border-radius:14px;background:#bdebd7;color:var(--ink);box-shadow:0 3px 0 var(--ink);white-space:nowrap}
.save-form button:disabled{opacity:.5}
.save-result{font-size:16px!important;color:var(--ink)!important;margin:0 0 8px!important}
.board-list{list-style:none;margin:16px 0;padding:0;text-align:left}
.board-list li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;font-size:16px}
.board-list li:nth-child(odd){background:#49342e0a}
.board-list li.mine{background:#ffe17e66}
.board-list li.now{background:#ffe17e;box-shadow:inset 0 0 0 2px var(--ink)}
.board-list .rank{width:28px;text-align:center;font-size:15px;color:#7b6150}
.board-list .who{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:Jua,system-ui,sans-serif}
.board-list b{font-size:17px}
.board-list.mini{margin:0 0 14px}
.board-list.mini li{padding:5px 10px;font-size:14px}
.board-card .board-list{max-height:min(52vh,430px);overflow-y:auto}
.board-empty{margin:24px 0!important}
.text-row{display:flex;justify-content:center;gap:6px}
@media(max-height:520px) and (min-width:600px){.save-form{margin-bottom:6px}.board-list.mini{display:none}.board-card .board-list{max-height:52vh;margin:8px 0}.board-list li{padding:4px 10px}}
@media(max-height:520px) and (min-width:600px){#result-description{display:none}.result-stats{margin:6px 0}}
#timer{pointer-events:auto;cursor:default;-webkit-tap-highlight-color:transparent}
/* 낮은 세로 화면(홈피 iframe 등): 시작·결과 화면 군더더기를 줄인다 */
@media(max-height:700px) and (max-width:600px){.intro-heading p,.dog-tag,.instructions,.corner-note{display:none}.intro-heading h1{font-size:62px}.gesture-hint{margin-top:10px}#result-description{display:none}.result-card{padding:18px 20px 12px}.result-card h2{font-size:26px;margin:8px 0 6px}.stars{margin-top:4px}.result-stats{padding:10px 0;margin:10px 0}.result-stats b{font-size:24px;margin-top:4px}.board-list.mini{display:none}#result-screen~.sound-button,body:has(#result-screen:not([hidden])) .sound-button{display:none}}