:root{font-family:system-ui,-apple-system,"Noto Sans KR",sans-serif;color:#23425a;background:#eaf8ff}
*{box-sizing:border-box}
body{margin:0;overflow:hidden}
.game-shell{position:relative;width:100vw;height:100svh;min-height:420px;overflow:hidden;background:#dff5ff}
canvas{display:block;width:100%;height:100%;touch-action:none}
.hud{position:absolute;top:max(16px,env(safe-area-inset-top));left:20px;right:20px;display:flex;align-items:flex-start;gap:14px;pointer-events:none}
.level-card,.mission-card{border:2px solid #82b8d2;border-radius:18px;background:#fffdf2ed;box-shadow:0 5px 0 #9dbed0;padding:10px 14px;backdrop-filter:blur(5px)}
.level-card{width:245px;display:grid;grid-template-columns:auto 1fr;gap:2px 9px;align-items:center}.label{font-size:10px;font-weight:900;letter-spacing:.12em;color:#1683b7}.level-card strong{font-size:28px;line-height:1}.xp-track{grid-column:1/-1;height:10px;border:1px solid #86bad0;border-radius:20px;overflow:hidden;background:#d8eaf1}.xp-track i{display:block;width:0;height:100%;background:linear-gradient(90deg,#36bbed,#62ddb4);transition:width .2s}.level-card span:last-child{font-size:11px;color:#486579;text-align:right}
.mission-card{display:grid;gap:2px;min-width:235px}.mission-card span{font-size:11px;color:#2585ad}.mission-card strong{font-size:14px}.mission-card b{font-size:12px;color:#b36d00}
.top-controls{margin-left:auto;display:flex;gap:8px;pointer-events:auto}.pause{width:46px;height:46px;border:2px solid #82b8d2;border-radius:15px;background:#fffdf2ed;color:#28506b;box-shadow:0 4px 0 #9dbed0;font-size:18px;font-weight:900;cursor:pointer}
.health{position:absolute;bottom:max(79px,calc(env(safe-area-inset-bottom) + 64px));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:8px 15px;border:2px solid #82b8d2;border-radius:30px;background:#fffdf2ed;box-shadow:0 4px 0 #9dbed0;font-size:13px;font-weight:800;min-width:min(410px,88vw)}.health>div{flex:1;height:18px;overflow:hidden;border-radius:20px;background:#d8e5e8}.health i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff6075,#ff9b68);transition:width .15s}.health strong{font-size:12px;min-width:66px}
.skill-list{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;min-width:220px;justify-content:space-between;border:2px solid #48a7d2;border-radius:16px;background:linear-gradient(135deg,#62c7ed,#7d91ea);box-shadow:0 5px 0 #5483a8;color:#fff;padding:12px 16px;font-weight:900;cursor:pointer}.skill-list b{border-radius:999px;background:#fffdeedb;padding:5px 9px;font-size:11px;color:#31556b}
.enemy-guide-button{position:absolute;right:20px;bottom:max(16px,env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:center;gap:7px;min-width:118px;border:2px solid #61ad8c;border-radius:16px;background:linear-gradient(135deg,#fff8cf,#a8e8cf);box-shadow:0 5px 0 #6d9e8b;color:#285b4a;padding:12px 14px;font-weight:1000;cursor:pointer}.enemy-guide-button span{font-size:18px}
.boss-hud{position:absolute;z-index:7;top:max(112px,calc(env(safe-area-inset-top) + 96px));left:50%;width:min(560px,76vw);transform:translateX(-50%);padding:8px 12px;border:2px solid #ffbd73;border-radius:18px;background:#2a1023e8;box-shadow:0 8px 24px #03071399;text-align:center}.boss-hud span{display:block;margin-bottom:5px;color:#ffe7bd;font-size:12px;font-weight:1000;letter-spacing:.08em}.boss-hud div{height:13px;overflow:hidden;border-radius:999px;background:#090b18}.boss-hud i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#ff554f,#ffad47);transition:width .12s}.boss-alert{position:absolute;z-index:9;top:30%;left:50%;transform:translate(-50%,-50%);width:min(520px,88vw);padding:17px 22px;border:2px solid #ffd36a;border-radius:18px;background:#591d30e8;box-shadow:0 12px 35px #050813cc;color:#fff4c8;text-align:center;font-size:clamp(17px,3vw,27px);font-weight:1000;animation:boss-pop .7s ease both}.hidden{display:none!important}@keyframes boss-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.75)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}100%{transform:translate(-50%,-50%) scale(1)}}
.buff-status{position:absolute;z-index:8;top:max(112px,calc(env(safe-area-inset-top) + 96px));right:20px;padding:9px 13px;border:2px solid #5fb9d7;border-radius:14px;background:#fffdf2ed;box-shadow:0 5px 18px #668ca744;color:#23617f;font-size:12px;font-weight:1000}
.joystick{display:none;position:absolute;z-index:8;width:122px;height:122px;border:3px solid #77b9d5dd;border-radius:50%;background:radial-gradient(circle,#ffffffb8 0 30%,#bde9f2c9 31% 100%);box-shadow:inset 0 0 0 9px #ffffff55,0 8px 25px #4e7d9766;touch-action:none;user-select:none;-webkit-user-select:none}.joystick::after{content:"이동";position:absolute;inset:auto 0 14px;text-align:center;font-size:10px;font-weight:900;letter-spacing:.12em;color:#397493aa}.joystick-knob{position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:50%;background:linear-gradient(145deg,#6bd2f4,#637fe0);box-shadow:0 5px 13px #527a9166,inset 0 3px 5px #ffffff99;pointer-events:none;transition:transform .05s linear}
.hint{position:absolute;bottom:24px;left:20px;border:2px solid #92bdd0;border-radius:11px;background:#fffdf2e8;padding:8px 13px;color:#35566d;font-size:12px}
.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:#b5dcec99;padding:24px}.overlay.hidden{display:none}.modal{position:relative;width:min(570px,100%);border:2px solid #7bbbd5;border-radius:24px;background:linear-gradient(150deg,#fffdf5,#eaf8ff);padding:28px;box-shadow:0 22px 65px #527b9066;text-align:center;color:#23425a}.eyebrow{margin:0;color:#1588b7;font-weight:900;font-size:13px;letter-spacing:.12em}.modal h1{margin:7px 0 23px;font-size:25px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.choice{border:1px solid #8cc7e5;border-radius:16px;background:#fff;color:#173247;padding:17px 12px;text-align:left;cursor:pointer;transition:transform .15s}.choice:hover{transform:translateY(-4px);background:#fff8d6}.choice strong{display:block;font-size:17px}.choice span{display:block;margin-top:8px;font-size:12px;color:#557083;line-height:1.45}
.modal-close{position:absolute;right:14px;top:12px;width:36px;height:36px;border:0;border-radius:11px;background:#d6eaf2;color:#31556b;font-size:25px;cursor:pointer}.skill-items{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;text-align:left}.skill-item{display:flex;gap:12px;align-items:center;border:1px solid #b7d5e1;border-radius:15px;background:#fff;padding:13px}.skill-item>span{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#70c6e6;font-size:22px}.skill-item strong{display:block}.skill-item small{display:block;margin-top:3px;color:#5d7788}.skill-empty{grid-column:1/-1;color:#648092;text-align:center;padding:25px}
.skill-modal{width:min(780px,100%);max-height:min(88svh,820px);overflow:auto}.skill-modal>h1{margin-bottom:13px}.skill-tabs{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin:0 0 14px;border-radius:15px;background:#dceff5;padding:5px}.skill-tabs button{border:0;border-radius:11px;background:transparent;padding:10px;color:#638093;font-weight:900;cursor:pointer}.skill-tabs button.active{background:#fff;box-shadow:0 3px 8px #5f829333;color:#147fa9}.skill-guide-items{text-align:left}.skill-guide-group+ .skill-guide-group{margin-top:19px}.skill-guide-group h2{margin:0 0 9px;color:#254c64;font-size:17px}.skill-guide-group h2 small{display:inline;margin-left:8px;color:#7390a0;font-size:10px;font-weight:700}.skill-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.skill-guide-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:10px;align-items:center;border:1px solid #c4d8df;border-radius:15px;background:#f8fbfc;padding:10px;opacity:.82}.skill-guide-card.owned{border-color:#72bcd6;background:#fff;box-shadow:0 3px 0 #cee4ec;opacity:1}.skill-guide-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:13px;background:linear-gradient(145deg,#e3f8ff,#fff3cd);font-size:25px}.skill-guide-copy{min-width:0}.skill-guide-copy>div{display:flex;align-items:center;justify-content:space-between;gap:7px}.skill-guide-copy strong{color:#294b61;font-size:14px}.skill-guide-copy em{flex:0 0 auto;border-radius:999px;background:#e6f0f3;padding:3px 6px;color:#6c8491;font-size:8px;font-style:normal;font-weight:1000}.skill-guide-card.owned em{background:#d9f4e6;color:#2d8060}.skill-guide-copy p{margin:3px 0 6px;color:#67808f;font-size:10px;line-height:1.35}.skill-guide-copy small{display:flex;flex-wrap:wrap;gap:4px}.skill-guide-copy small b{border-radius:999px;background:#e7f4f8;padding:3px 6px;color:#34708b;font-size:8px}
.enemy-guide-modal{width:min(760px,100%);max-height:min(86svh,800px);overflow:auto;text-align:left}.enemy-guide-modal>h1,.enemy-guide-modal>.eyebrow,.enemy-guide-note,.enemy-boss-growth{text-align:center}.enemy-guide-modal>h1{margin-bottom:5px}.enemy-guide-note{margin:0 22px 10px;color:#58778b;font-size:12px;font-weight:800}.enemy-growth-table{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:0 0 9px}.enemy-growth-table span{border:1px solid #afd2df;border-radius:10px;background:#fff;padding:6px 3px;color:#608094;text-align:center;font-size:9px;font-weight:800}.enemy-growth-table b{display:block;margin-top:2px;color:#1685ad;font-size:11px}.enemy-boss-growth{margin:0 12px 16px;border-radius:10px;background:#fff0d9;padding:7px 10px;color:#8b5a2d;font-size:10px;font-weight:900}.enemy-guide-items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.enemy-guide-card{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px;align-items:center;border:1px solid #a9cfdd;border-radius:17px;background:#fff;padding:11px;box-shadow:0 4px 0 #c4dce5}.enemy-guide-card.boss{grid-column:1/-1;border-color:#f0b369;background:linear-gradient(135deg,#fff9e2,#ffe9df)}.enemy-guide-portrait{width:88px;height:88px;border:2px solid #8fc4d7;border-radius:15px;background-color:#e8f8ff;background-image:url("assets/enemy-sprite-sheet-v1.png");background-repeat:no-repeat;background-size:300% 200%;background-position:var(--enemy-x) var(--enemy-y);box-shadow:inset 0 0 0 4px #ffffff88}.enemy-guide-card.boss .enemy-guide-portrait{border-color:#e8a95c}.enemy-guide-copy{min-width:0}.enemy-guide-copy>strong{display:block;color:#24485f;font-size:17px}.enemy-guide-copy p{margin:4px 0 7px;color:#5d7788;font-size:11px;line-height:1.4}.enemy-guide-stats{display:flex;flex-wrap:wrap;gap:5px}.enemy-guide-stats span{border-radius:999px;background:#e7f4f8;padding:4px 7px;color:#527184;font-size:10px;font-weight:800}.enemy-guide-stats b{color:#244c63}.enemy-guide-copy small{display:block;margin-top:7px;color:#1685ad;font-size:10px;font-weight:1000}
.result-modal{text-align:center}.result-time{display:block;margin:13px 0 18px;color:#168ab9;font-size:42px}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.result-grid span{padding:12px 7px;border:1px solid #b8d6e2;border-radius:14px;background:#fff;color:#587587;font-size:12px;font-weight:800}.result-grid b{display:block;margin-top:4px;color:#23425a;font-size:21px}.retry{width:100%;margin-top:18px;border:0;border-radius:15px;padding:14px;background:linear-gradient(135deg,#3bc2ed,#7b8ce8);box-shadow:0 5px 0 #5680a4;color:#fff;font-size:16px;font-weight:1000;cursor:pointer}
.level-up-overlay{align-items:center;background:radial-gradient(circle at 50% 34%,#fff5bd88 0 15%,#8ccfe7aa 42%,#315575cc 100%);backdrop-filter:blur(4px)}.level-up-overlay::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#ffffff5c 48%,transparent 65%);transform:translateX(-120%);pointer-events:none}.level-up-active::before{animation:level-sweep .85s ease-out}.level-up-modal{width:min(620px,100%);overflow:visible;border:3px solid #fff;outline:3px solid #4aa8d0;background:linear-gradient(155deg,#fffef8,#edfaff 60%,#fff6d2);box-shadow:0 26px 70px #17394f88,0 0 0 8px #9ee8ff38;padding:27px 30px 30px}.level-up-active .level-up-modal{animation:level-modal-in .5s cubic-bezier(.18,.89,.3,1.28) both}.level-up-modal .eyebrow{display:inline-block;margin-top:-48px;border:3px solid #fff;border-radius:999px;background:linear-gradient(135deg,#22aee5,#6a7fe5);box-shadow:0 6px 0 #387da7;padding:9px 24px;color:#fff;font-size:14px;letter-spacing:.1em}.level-up-modal .eyebrow b{font-size:21px}.level-up-modal h1{margin:15px 0 3px;color:#204d6b;font-size:30px;text-shadow:0 2px #fff}.level-up-sub{margin:0 0 18px;color:#618095;font-size:12px;font-weight:800}.level-up-modal .choices{display:grid;grid-template-columns:1fr;gap:11px}.level-up-modal .choice{position:relative;display:grid;grid-template-columns:68px 1fr auto;gap:14px;align-items:center;min-height:94px;overflow:hidden;border:2px solid #8bc8df;border-radius:18px;background:linear-gradient(110deg,#fff 0 72%,#e7f6fb 72%);box-shadow:0 7px 0 #a5c9d8;color:#23445b;padding:12px 16px 14px 13px;text-align:left;opacity:0;transform:translateY(34px) scale(.94);animation:choice-deal .42s cubic-bezier(.18,.89,.32,1.18) forwards;animation-delay:calc(.15s + var(--choice-index) * .11s)}.level-up-modal .choice::before{content:"";position:absolute;inset:0 auto 0 0;width:7px;background:#38bce8}.level-up-modal .choice:nth-child(2)::before{background:#8d74e8}.level-up-modal .choice:nth-child(3)::before{background:#f3ad42}.choice-icon{display:grid;place-items:center;width:62px;height:62px;border:2px solid #8dd0e6;border-radius:16px;background:linear-gradient(145deg,#dff8ff,#fff);box-shadow:inset 0 0 0 4px #ffffffaa,0 4px 10px #5791aa33;font-size:31px}.choice-copy{display:block;min-width:0}.choice-copy em{display:block;margin-bottom:2px;color:#1898c5;font-size:10px;font-style:normal;font-weight:1000;letter-spacing:.09em}.choice-copy strong{display:block;color:#24475f;font-size:18px}.choice-copy small{display:block;margin-top:5px;color:#5b7789;font-size:12px;font-weight:700;line-height:1.35}.choice-pick{border-radius:999px;background:#d8eef6;padding:7px 10px;color:#39708b;font-size:10px;font-weight:1000}.level-up-modal .choice .choice-icon{display:grid;margin:0;color:inherit;font-size:31px}.level-up-modal .choice .choice-copy{display:block;margin:0;color:inherit;font-size:inherit}.level-up-modal .choice .choice-pick{display:inline-block;margin:0;color:#39708b;font-size:10px}.level-up-modal .choice:hover{transform:translateY(-3px);border-color:#2fb7e6;background:linear-gradient(110deg,#fffdeb 0 72%,#ddf5ff 72%);box-shadow:0 9px 0 #79b6ce}.level-up-modal .choice.selected{z-index:2;border-color:#ffbc3d;background:linear-gradient(110deg,#fff9cf,#fff 72%,#ffe5a1 72%);box-shadow:0 0 0 5px #ffd86b66,0 11px 25px #597f9255;animation:choice-selected .43s ease both}.level-up-modal .choice.dismissed{pointer-events:none;animation:choice-dismiss .3s ease forwards}.level-up-modal .choice:disabled{cursor:default}.level-flare{position:absolute;z-index:-1;inset:-70px;pointer-events:none}.level-flare i{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;background:#fff5a8;box-shadow:0 0 18px 6px #fff6a5}.level-flare i:nth-child(1){transform:translate(-275px,-150px)}.level-flare i:nth-child(2){transform:translate(265px,-70px)}.level-flare i:nth-child(3){transform:translate(235px,180px)}.level-up-active .level-flare i{animation:level-spark 1.1s ease-in-out infinite alternate}.level-up-active .level-flare i:nth-child(2){animation-delay:.25s}.level-up-active .level-flare i:nth-child(3){animation-delay:.5s}@keyframes level-modal-in{0%{opacity:0;transform:translateY(35px) scale(.82)}65%{opacity:1;transform:translateY(-5px) scale(1.025)}100%{transform:none}}@keyframes choice-deal{to{opacity:1;transform:none}}@keyframes choice-selected{0%{opacity:1;transform:none}45%{opacity:1;transform:scale(1.045)}100%{opacity:1;transform:scale(1.02)}}@keyframes choice-dismiss{to{opacity:0;transform:translateX(38px) scale(.95)}}@keyframes level-sweep{to{transform:translateX(120%)}}@keyframes level-spark{to{opacity:.45;box-shadow:0 0 28px 12px #fff6a5}}
@media(max-width:700px),(pointer:coarse){
  .game-shell{min-height:100svh}
  .hud{top:max(9px,env(safe-area-inset-top));left:9px;right:9px;gap:6px}.level-card{width:128px;padding:7px 9px;border-radius:14px}.level-card strong{font-size:22px}.mission-card{display:grid;min-width:0;width:104px;padding:7px 9px;border-radius:14px}.mission-card span{display:none}.mission-card strong{font-size:14px}.mission-card b{font-size:9px;white-space:nowrap}.top-controls{gap:6px}.pause{width:40px;height:40px;border-radius:13px}
  .hint{display:none}.joystick{display:block;left:max(18px,env(safe-area-inset-left));bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))}
  .health{bottom:max(155px,calc(env(safe-area-inset-bottom) + 147px));width:calc(100% - 24px);min-width:0;padding:7px 11px;gap:7px}.health>span{font-size:11px}.health>div{height:15px}.health strong{font-size:11px;min-width:58px}
  .boss-hud{top:max(64px,calc(env(safe-area-inset-top) + 54px));width:calc(100% - 92px);padding:6px 9px}.boss-hud span{font-size:10px}.boss-hud div{height:10px}
  .buff-status{top:max(64px,calc(env(safe-area-inset-top) + 54px));right:9px;padding:7px 9px;font-size:10px}
  .skill-list{left:auto;right:max(16px,env(safe-area-inset-right));bottom:max(26px,calc(env(safe-area-inset-bottom) + 18px));transform:none;min-width:0;width:132px;min-height:72px;flex-direction:column;justify-content:center;gap:5px;padding:9px 10px;border-radius:20px}.skill-list span{font-size:13px}.skill-list b{font-size:10px}
  .enemy-guide-button{right:max(16px,env(safe-area-inset-right));bottom:max(111px,calc(env(safe-area-inset-bottom) + 103px));min-width:132px;height:40px;padding:7px 10px;border-radius:15px;font-size:12px}.enemy-guide-button span{font-size:15px}
  .overlay{align-items:end;padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.modal{width:100%;max-height:78svh;overflow:auto;border-radius:23px 23px 15px 15px;padding:22px 16px 16px}.modal h1{margin-bottom:16px;font-size:21px}.choices,.skill-items,.skill-guide-grid{grid-template-columns:1fr}.choice{padding:14px}.choice strong{font-size:15px}.skill-item{padding:10px}.skill-modal{max-height:90svh}.skill-tabs{margin-bottom:10px}.skill-tabs button{padding:9px 6px;font-size:12px}.skill-guide-group+ .skill-guide-group{margin-top:15px}.skill-guide-group h2{font-size:15px}.skill-guide-group h2 small{display:block;margin:2px 0 0;font-size:9px}.skill-guide-card{grid-template-columns:44px minmax(0,1fr);padding:9px}.skill-guide-icon{width:44px;height:44px;font-size:22px}.level-up-overlay{align-items:center;padding:12px}.level-up-modal{max-height:calc(100svh - 24px);overflow:auto;border-radius:24px;padding:23px 13px 15px}.level-up-modal .eyebrow{margin-top:-38px;padding:7px 18px}.level-up-modal h1{margin:13px 0 2px;font-size:24px}.level-up-sub{margin-bottom:11px;font-size:10px}.level-up-modal .choices{gap:8px}.level-up-modal .choice{grid-template-columns:54px 1fr auto;gap:10px;min-height:80px;border-radius:15px;padding:9px 10px 11px 9px}.choice-icon{width:50px;height:50px;border-radius:13px;font-size:25px}.choice-copy strong{font-size:15px}.choice-copy small{margin-top:3px;font-size:10px}.choice-pick{padding:6px 8px;font-size:9px}.level-flare{display:none}
  .enemy-guide-modal{max-height:90svh}.enemy-guide-items{grid-template-columns:1fr}.enemy-guide-card.boss{grid-column:auto}.enemy-guide-card{grid-template-columns:76px minmax(0,1fr);gap:9px;padding:9px}.enemy-guide-portrait{width:76px;height:76px}.enemy-guide-note{margin:0 2px 8px;font-size:9px}.enemy-growth-table{grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:7px}.enemy-growth-table span{padding:4px 2px;font-size:8px}.enemy-growth-table b{font-size:9px}.enemy-boss-growth{margin:0 2px 11px;padding:6px 7px;font-size:9px}.enemy-guide-copy>strong{font-size:15px}.enemy-guide-copy p{font-size:10px}.enemy-guide-stats span{font-size:9px;padding:3px 6px}
}
@media(max-width:700px) and (max-height:610px){.joystick{width:100px;height:100px}.joystick-knob{width:44px;height:44px}.health{bottom:124px}.skill-list{width:118px;min-height:62px}}