@import url('https://fonts.googleapis.com/css2?family=Jua&family=Noto+Sans+KR:wght@500;700;900&display=swap');
:root{--ink:#382918;--blue:#214c89;--deep:#102b5c;--cream:#fff8df;--gold:#ffd34e;--pink:#ff82a9;--glass:rgba(255,255,255,.88)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:#0e2956;font-family:'Noto Sans KR',sans-serif;color:var(--ink);overscroll-behavior:none}
button{font:inherit;color:inherit;cursor:pointer;border:0}button:disabled{cursor:default}.hidden{display:none!important}
#app{max-width:720px;min-height:100dvh;margin:auto;position:relative;overflow:hidden;background:#f5e8bd;box-shadow:0 0 50px #061630}
.screen{display:none;min-height:100dvh;position:relative}.screen.active{display:flex;flex-direction:column}
.glass{background:var(--glass);border:2px solid rgba(255,255,255,.82);box-shadow:0 7px 20px rgba(56,41,24,.16);backdrop-filter:blur(8px)}
.eyebrow{margin:0;color:#97631b;font-weight:900;letter-spacing:.04em}.primary-btn,.secondary-btn,.danger-btn{min-height:54px;border-radius:18px;padding:12px 24px;font-weight:900;font-size:1.05rem;box-shadow:0 6px 0 rgba(64,40,19,.28);transition:.12s transform}.primary-btn:active,.secondary-btn:active,.danger-btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(64,40,19,.28)}
.primary-btn{background:linear-gradient(#ffd85c,#ffb936);color:#603a0a;border:2px solid #fff2a3}.secondary-btn{background:#fff;color:#684c27;border:2px solid #e7cf98}.danger-btn{background:#ef6f76;color:#fff}.text-btn{background:none;text-decoration:underline;font-weight:800;color:#70532d}.round-btn{width:44px;height:44px;border-radius:50%;background:#fff8df;border:2px solid #e7cc8c;font-size:1.4rem;font-weight:900;box-shadow:0 4px 0 #c4a866}

.start-screen{justify-content:flex-start;align-items:center;text-align:center;padding:7dvh 22px 26px;background:linear-gradient(rgba(255,250,220,.14),rgba(27,71,123,.18)),url('./assets/game/chapter-1.jpg') center/cover}.start-screen:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%,rgba(17,48,94,.6));pointer-events:none}.start-copy,.start-heroes,.start-screen>button,.start-tip{position:relative;z-index:2}.start-copy{background:rgba(255,250,226,.82);padding:15px 20px 18px;border-radius:30px;border:3px solid rgba(255,255,255,.8);box-shadow:0 12px 28px rgba(68,45,12,.18)}.start-copy h1{font-family:'Jua',sans-serif;font-size:clamp(2.8rem,11vw,4.8rem);line-height:.9;margin:10px 0 14px;color:#274f88;text-shadow:0 3px #fff}.start-copy h1 strong{color:#f06483;text-shadow:0 4px #fff,0 6px #e7b33a}.lead{font-weight:800;line-height:1.65;margin:0;font-size:.95rem}.start-heroes{height:min(39dvh,340px);width:100%;margin-top:-12px}.sprite{background-repeat:no-repeat;flex:none}.sprite.daedan{background-image:url('./assets/game/daedan-sheet.png');background-size:200% 200%;background-position:0 0}.sprite.daedan.magic{background-position:100% 0}.sprite.daedan.cheer{background-position:0 100%}.sprite.daedan.help{background-position:100% 100%}.sprite.raon{background-image:url('./assets/game/raon-sheet.png');background-size:200% 200%;background-position:0 0}.sprite.raon.magic{background-position:0 100%}.start-heroes .raon{position:absolute;width:min(49vw,270px);aspect-ratio:3/4;left:3%;bottom:-1%;filter:drop-shadow(0 8px 7px rgba(0,0,0,.2))}.start-heroes .daedan{position:absolute;width:min(48vw,260px);aspect-ratio:1;right:3%;bottom:2%;filter:drop-shadow(0 8px 7px rgba(0,0,0,.2))}.start-screen>.primary-btn{width:min(410px,90%);margin-top:-15px}.start-screen>.text-btn{margin-top:16px;color:#fff}.start-tip{margin-top:18px;color:#fff;font-size:.73rem;font-weight:700;text-shadow:0 2px 4px #15335e}.start-sky i{position:absolute;width:8px;height:8px;background:#fff5a7;clip-path:polygon(50% 0,61% 36%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 36%);animation:twinkle 2s infinite}.start-sky i:nth-child(1){left:8%;top:13%}.start-sky i:nth-child(2){right:10%;top:8%;animation-delay:.4s}.start-sky i:nth-child(3){right:5%;top:40%;animation-delay:.8s}.start-sky i:nth-child(4){left:14%;top:50%;animation-delay:1.2s}.start-sky i:nth-child(5){left:52%;top:3%;animation-delay:1.5s}@keyframes twinkle{50%{transform:scale(2) rotate(30deg);opacity:.45}}

.map-screen{padding:14px 14px 40px;background:linear-gradient(rgba(255,247,210,.76),rgba(242,220,159,.86)),url('./assets/game/chapter-1.jpg') center/cover fixed;overflow:auto}.topbar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:20px;position:sticky;top:10px;z-index:5}.topbar>div:nth-child(2){flex:1}.topbar small,.battle-header small{display:block;color:#8b6938;font-weight:800;font-size:.7rem}.topbar h2{font-family:'Jua';margin:0;color:#31527e}.star-chip{background:#234c87;color:#fff;border-radius:20px;padding:8px 12px;font-size:1.05rem;white-space:nowrap}.star-chip:first-letter{color:#ffdb4e}.map-intro{margin:16px 0 12px;border-radius:24px;padding:10px 15px;display:flex;align-items:center;min-height:100px}.map-intro .sprite{width:88px;height:88px}.map-intro b{color:#31527e;font-size:1.05rem}.map-intro p{margin:5px 0 0;font-size:.83rem;line-height:1.5}.chapter-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:14px}.chapter-tabs button{border-radius:15px;padding:9px 4px;background:rgba(255,255,255,.7);font-size:.75rem;font-weight:900;border:2px solid transparent}.chapter-tabs button.active{background:#2b548b;color:#fff;border-color:#a6d5ff}.chapter-tabs button.locked{opacity:.55}.stage-map{display:flex;flex-direction:column;gap:11px}.stage-node{width:92%;min-height:100px;border-radius:26px;padding:10px 15px;display:flex;align-items:center;text-align:left;background:rgba(255,255,255,.9);border:3px solid #fff;box-shadow:0 7px 0 #d4b86e;position:relative}.stage-node:nth-child(even){align-self:flex-end}.stage-node.current{outline:4px solid rgba(255,207,49,.6);animation:pulse 1.5s infinite}.stage-node.locked{filter:saturate(.4);opacity:.72}.stage-node img{width:78px;height:78px;object-fit:cover;border-radius:19px;margin-right:13px}.stage-node>div{flex:1}.stage-node small{font-weight:900;color:#a77729}.stage-node h3{font-family:'Jua';font-size:1.17rem;margin:2px 0;color:#31527e}.stage-node p{font-size:.74rem;margin:0;line-height:1.4}.stage-status{font-size:1.35rem;margin-left:6px}.stage-stars{display:block;color:#e9af15;font-size:.95rem;letter-spacing:-2px}@keyframes pulse{50%{transform:scale(1.02)}}

.story-screen{justify-content:flex-end;background:#456b8c;overflow:hidden}.story-backdrop{position:absolute;inset:0;background:center/cover}.story-backdrop:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(10,30,56,.78))}.story-sprite{position:absolute;width:min(82vw,500px);aspect-ratio:1;left:50%;bottom:20%;transform:translateX(-50%);filter:drop-shadow(0 10px 9px rgba(0,0,0,.25))}.story-sprite.raon{aspect-ratio:3/4;width:min(68vw,410px)}.story-sprite.friend{background-size:contain;background-position:center}.dialogue{position:relative;margin:20px;border-radius:27px;padding:23px;z-index:2}.dialogue>b{display:inline-block;background:#29548e;color:#fff;padding:5px 14px;border-radius:12px;margin-top:-40px}.dialogue p{min-height:54px;font-weight:800;line-height:1.65}.dialogue .primary-btn{width:100%}

.game-screen{background:radial-gradient(circle at 50% 10%,#4f82bc,#142e59 62%,#0a1b3b);padding:8px 10px max(10px,env(safe-area-inset-bottom));color:#fff}.battle-header{display:flex;align-items:center;gap:9px;border-radius:19px;padding:7px 9px;color:var(--ink)}.battle-title{flex:1;min-width:0}.battle-title b{display:block;color:#31527e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.moves{text-align:center;background:#294e83;color:#fff;border-radius:13px;padding:5px 9px;min-width:65px}.moves small{color:#d9e8ff}.moves b{font-size:1.25rem}.battle-scene{height:82px;margin:7px 0;border-radius:18px;padding:5px 10px;display:flex;align-items:center;color:var(--ink)}.hero-unit{width:82px;height:72px;position:relative}.hero-unit .sprite{width:72px;height:72px}.hero-unit span{position:absolute;bottom:0;left:0;background:#2a5389;color:#fff;border-radius:10px;padding:2px 7px;font-size:.66rem;font-weight:900}.enemy-card{flex:1;padding-left:7px}.enemy-name{display:flex;gap:7px;align-items:center;color:#653d75}.enemy-name span{font-size:1.5rem}.hp-track{height:15px;border-radius:20px;background:#d5d9e4;overflow:hidden;margin:5px 0;border:2px solid #fff}.hp-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffe55b,#ff7e9e);transition:width .35s}.enemy-card small{color:#74644d}.game-layout{display:flex;justify-content:center;gap:8px;min-height:0;flex:1}.board-wrap{position:relative;height:min(61dvh,720px);aspect-ratio:1/2}.board-wrap canvas{display:block;width:100%;height:100%;border-radius:20px;border:4px solid #ffe9a1;background:rgba(8,23,50,.9);box-shadow:0 0 0 3px #9a6d25,0 12px 24px rgba(0,0,0,.35)}.side-panel{width:76px;display:flex;flex-direction:column;align-items:center;gap:8px}.next-box,.score-box{width:100%;border-radius:16px;text-align:center;color:var(--ink);padding:6px}.next-box small,.score-box small{display:block;font-size:.67rem;font-weight:900;color:#72522d}.next-box canvas{width:58px;height:70px}.score-box b{display:block;color:#31527e;font-size:.9rem;overflow:hidden}.score-box strong{color:#e8567b;font-size:1.5rem}.chain-banner{position:absolute;z-index:4;left:50%;top:42%;transform:translate(-50%,-50%) scale(0);font-family:'Jua';font-size:2.2rem;color:#fff75a;text-shadow:0 4px #ef4776,0 0 14px #fff;white-space:nowrap;pointer-events:none}.chain-banner.show{animation:chainPop .8s}@keyframes chainPop{25%{transform:translate(-50%,-50%) scale(1.25)}65%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-65%) scale(.85);opacity:0}}.board-overlay{position:absolute;inset:4px;background:rgba(8,25,55,.88);z-index:8;border-radius:17px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.board-overlay b{font-size:1.4rem}.touch-controls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}.touch-controls button{height:49px;border-radius:15px;background:linear-gradient(#fff,#cfe1ff);color:#294c7d;font-size:1.35rem;font-weight:900;box-shadow:0 4px 0 #7490ba;touch-action:none}.touch-controls button:active{transform:translateY(3px);box-shadow:0 1px 0 #7490ba}.touch-controls .rotate{background:linear-gradient(#fff4a9,#ffc952);color:#80520b}.touch-controls .drop{font-size:.85rem;background:linear-gradient(#ffb1c6,#ff729c);color:#fff}

.result-screen{align-items:center;text-align:center;padding:5dvh 22px 28px;background:radial-gradient(circle,#fffbe1 0,#ffe69d 40%,#9ccfea 100%);overflow:auto}.result-glow{position:absolute;width:380px;height:380px;background:repeating-conic-gradient(rgba(255,255,255,.65) 0 8deg,transparent 8deg 20deg);border-radius:50%;animation:spin 18s linear infinite}.result-screen>.sprite{width:min(55vw,290px);aspect-ratio:1;z-index:1;filter:drop-shadow(0 10px 8px rgba(80,48,12,.18))}@keyframes spin{to{transform:rotate(360deg)}}.result-screen>.eyebrow,.result-screen h2,.result-screen>p,.result-stats,.reward-card,.result-screen>button{position:relative;z-index:2}.result-screen h2{font-family:'Jua';font-size:2.25rem;color:#2e5689;margin:5px 0}.result-screen>p:not(.eyebrow){font-weight:800;line-height:1.55}.result-stats{width:min(470px,100%);display:grid;grid-template-columns:repeat(3,1fr);border-radius:22px;padding:13px 6px;margin:8px 0}.result-stats div+div{border-left:1px solid #dac695}.result-stats small{display:block;font-size:.7rem;color:#896b3c;font-weight:800}.result-stats b{font-size:1.2rem;color:#31527e}.reward-card{width:min(470px,100%);display:flex;align-items:center;text-align:left;border-radius:22px;padding:9px;margin:6px 0 16px}.reward-card img{width:70px;height:70px;object-fit:contain;margin-right:13px}.reward-card small{display:block;color:#977128}.reward-card b{color:#31527e}.result-screen>button{width:min(470px,100%);margin:5px}.modal{position:fixed;z-index:20;inset:0;background:rgba(8,24,49,.75);display:flex;align-items:center;justify-content:center;padding:22px}.modal-card{border-radius:26px;padding:25px;text-align:center;width:min(420px,100%)}.modal-card button{display:block;width:100%;margin-top:10px}

.chapter-tabs{margin-bottom:10px}.chapter-guide{border-radius:18px;padding:10px 14px;margin-bottom:11px;color:#604820;font-size:.77rem;line-height:1.5}.chapter-guide b{color:#31527e}.endless-card{width:100%;display:flex;align-items:center;text-align:left;gap:12px;border-radius:23px;padding:12px 15px;margin:0 0 17px;background:linear-gradient(135deg,#263e80,#714da1);color:#fff;border:3px solid #d8c8ff;box-shadow:0 7px 0 #392a66}.endless-card>div{flex:1}.endless-card small{color:#e6dfff;font-weight:800}.endless-card h3{font-family:'Jua';font-size:1.3rem;margin:1px 0}.endless-card p{font-size:.72rem;margin:0 0 4px;opacity:.9}.endless-card b{font-size:.76rem;color:#ffe56b}.endless-icon{font-family:'Jua';font-size:2.8rem;color:#ffe76b}.stage-rules{display:flex!important;gap:4px;margin-top:5px;color:#31527e!important;font-size:.66rem!important;letter-spacing:0!important}.stage-rules i{font-style:normal;background:#e6f0ff;border-radius:8px;padding:2px 5px}.board-wrap canvas{touch-action:none}.gesture-tip{text-align:center;margin:7px 0 0;color:#dbe9ff;font-size:.65rem;font-weight:700}.touch-controls{grid-template-columns:1fr 1fr 1.08fr 1.08fr}.touch-controls .rotate{margin-left:8px}.hero-unit .sprite.raon{width:54px;height:72px;margin-left:9px}.result-screen>.sprite.raon{width:min(43vw,220px);aspect-ratio:3/4}.start-heroes .raon{width:min(56vw,300px);left:0}.start-heroes .daedan{width:min(40vw,220px);right:4%}
.game-screen{background-size:cover!important;background-position:center!important;position:relative}.battle-header,.battle-scene{background:rgba(255,249,222,.9)}.board-wrap canvas{border-color:var(--world-accent,#ffe9a1);box-shadow:0 0 0 3px rgba(102,72,29,.72),0 12px 24px rgba(0,0,0,.35)}.enemy-name{align-items:center}.enemy-name img{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 4px 3px rgba(45,28,35,.24));margin-right:4px}.enemy-name>div{min-width:0;flex:1}.enemy-name small{display:block;color:#98734c;font-size:.62rem;font-weight:900}.enemy-name b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.enemy-hit{animation:enemyHit .45s}.enemy-attack{animation:enemyAttack .55s}.enemy-flash:after{content:"";position:absolute;inset:0;background:rgba(127,38,127,.17);z-index:7;pointer-events:none;animation:flashOut .55s forwards}.magic-overlay{position:absolute;z-index:12;width:min(62vw,340px);aspect-ratio:1;left:50%;top:18%;transform:translate(-50%,-50%) scale(.2);opacity:0;background:center/cover no-repeat;border-radius:50%;mix-blend-mode:screen;pointer-events:none}.magic-overlay.show{animation:magicBurst .65s ease-out}.magic-overlay.show.shot{animation:magicShot .62s ease-out}.magic-overlay.show.finish{width:min(86vw,520px);animation:magicFinish .9s ease-out}.combat-message{position:absolute;z-index:14;top:115px;left:50%;transform:translateX(-50%) translateY(-8px);background:rgba(66,39,84,.91);color:#fff7ae;border:2px solid #ffd65a;border-radius:18px;padding:7px 16px;font-family:'Jua';font-size:.92rem;white-space:nowrap;opacity:0;pointer-events:none}.combat-message.show{animation:messagePop 1.15s}.boss-node{background:linear-gradient(135deg,rgba(255,248,220,.96),rgba(238,219,255,.96));border-color:#ffe68a}.boss-node img{filter:drop-shadow(0 4px 4px rgba(71,33,91,.25))}
@keyframes enemyHit{30%{transform:translateX(9px) rotate(6deg);filter:brightness(2)}60%{transform:translateX(-6px) rotate(-4deg)}}@keyframes enemyAttack{35%{transform:scale(1.18) translateX(-5px);filter:drop-shadow(0 0 12px #9654d7)}70%{transform:scale(.94)}}@keyframes flashOut{to{opacity:0}}@keyframes magicBurst{20%{opacity:.95;transform:translate(-50%,-50%) scale(.35) rotate(-8deg)}58%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(4deg)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.35)}}@keyframes magicShot{0%{opacity:0;left:18%;transform:translate(-50%,-50%) scale(.28)}35%{opacity:1}100%{opacity:0;left:76%;transform:translate(-50%,-50%) scale(.78)}}@keyframes magicFinish{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}@keyframes messagePop{15%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.08)}72%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(-8px)}}
@media(min-width:760px){#app{min-height:920px}.screen{min-height:920px}.game-screen{padding-inline:45px}.board-wrap{height:650px}.side-panel{width:96px}.touch-controls{max-width:520px;width:100%;align-self:center}.start-screen{padding-top:55px}}
@media(max-height:720px){.start-screen{padding-top:18px}.start-copy h1{font-size:2.65rem}.start-heroes{height:265px}.battle-scene{height:68px}.hero-unit,.hero-unit .sprite{height:58px;width:58px}.board-wrap{height:min(58dvh,590px)}.touch-controls button{height:42px}.result-screen>.sprite{width:170px}.result-screen{padding-top:15px}}