@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');
:root{font-family:'Noto Sans KR',system-ui,sans-serif;color:#e9f4ff;background:#07111d;font-synthesis:none}
*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer}#app{position:relative}#game{display:block;width:100%;height:100%;background:#07111d;touch-action:none}.hidden{display:none!important}
.vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 25%,rgba(2,7,15,.3) 72%,rgba(1,5,11,.75) 100%)}
.topbar{position:absolute;z-index:5;left:0;right:0;top:0;height:78px;display:flex;align-items:center;justify-content:space-between;padding:0 34px;background:linear-gradient(180deg,rgba(5,12,23,.9),rgba(5,12,23,0));pointer-events:none}.topbar>*{pointer-events:auto}.brand{display:flex;align-items:center;gap:12px}.brand-mark{height:38px;width:38px;display:grid;place-items:center;color:#a8efff;border:1px solid rgba(139,221,255,.43);transform:rotate(45deg);font-size:24px;box-shadow:0 0 24px rgba(43,185,255,.19),inset 0 0 15px rgba(46,166,224,.16)}.brand strong,.brand small{display:block;font-family:Cinzel,Georgia,serif;letter-spacing:.16em}.brand strong{font-size:17px;line-height:1}.brand small{font-size:9px;color:#83a8bb;margin-top:3px;letter-spacing:.47em}.world-label{position:absolute;left:50%;transform:translateX(-50%);font-size:11px;font-weight:600;letter-spacing:.17em;color:#adc6d7;display:flex;gap:10px;align-items:center}.diamond{height:6px;width:6px;transform:rotate(45deg);background:#75d9ff;box-shadow:0 0 12px #75d9ff}.top-actions{display:flex;align-items:center;gap:12px}.mode-badge{border:1px solid #32627a;background:rgba(13,37,56,.5);padding:7px 11px;font:700 9px Cinzel,serif;letter-spacing:.19em;color:#a5d8e9}.icon-button{border:1px solid rgba(149,206,233,.25);background:rgba(8,22,35,.65);color:#b7d5e8;width:35px;height:35px;font-size:17px}.icon-button:hover{border-color:#87e4ff;color:#fff}
.combat-hud{position:absolute;z-index:4;inset:0;pointer-events:none}.combat-hud button{pointer-events:auto}.quest-card{position:absolute;left:32px;top:105px;width:260px;border-left:2px solid #6dd8fa;padding:4px 0 0 15px;background:linear-gradient(90deg,rgba(3,14,26,.7),transparent);text-shadow:0 2px 8px #000}.eyebrow{color:#79c5df;font:700 10px Cinzel,serif;letter-spacing:.2em}.eyebrow span{color:#d7ad68}.quest-card h2{font-family:Cinzel,'Noto Sans KR',sans-serif;font-size:21px;margin:7px 0 5px;color:#f0fbff;letter-spacing:-.04em}.quest-card p{font-size:11px;color:#b9ceda;margin:0 0 12px;line-height:1.6}.quest-progress{width:185px;height:3px;background:#183448}.quest-progress div{width:0;height:100%;background:#7fdfff;box-shadow:0 0 9px #6fdcff}#questCount{font-size:10px;color:#91b2c3}.target-indicator{position:absolute;right:33px;top:105px;display:flex;align-items:center;gap:9px;color:#afc8d6;font-size:10px;letter-spacing:.08em}.target-dot{height:7px;width:7px;border:1px solid #93e4ff;border-radius:50%;box-shadow:0 0 10px #66d1ff}
.bottom-hud{position:absolute;left:0;right:0;bottom:22px;display:flex;align-items:end;justify-content:center;gap:20px;padding:0 22px}.resource-wrap{width:177px;display:flex;flex-direction:column;gap:9px;padding-bottom:10px}.resource{font-size:10px;color:#becfda}.resource>span{float:left}.resource strong{float:right;font:600 10px Cinzel,serif}.track{clear:both;position:relative;height:8px;background:#102332;border:1px solid #315367;box-shadow:inset 0 1px 4px #000}.track>div{height:100%;width:100%;transition:width .15s}.health .track>div{background:linear-gradient(90deg,#a92f3b,#f27475);box-shadow:0 0 10px #df5155}.mana .track>div{background:linear-gradient(90deg,#185bb2,#49caff);box-shadow:0 0 10px #45bcff}
.spellbar{display:flex;align-items:end;gap:5px;padding:10px;border:1px solid rgba(102,164,193,.37);background:linear-gradient(180deg,rgba(8,25,40,.9),rgba(3,12,22,.95));box-shadow:0 8px 35px #0009,0 0 30px #165a8130}.spell{position:relative;overflow:hidden;height:72px;width:68px;padding:0;background:radial-gradient(circle at 50% 15%,#235d7e,#0c2335 60%,#091523);border:1px solid #517b92;color:#e3faff;transition:transform .1s,border-color .1s}.spell:hover{transform:translateY(-4px);border-color:#a7edff;box-shadow:0 0 18px #56c5ff5c}.spell:active{transform:translateY(0)}.spell-art{display:block;font-size:31px;height:39px;line-height:39px;text-shadow:0 0 15px #6dd9ff,0 0 28px #3ba5fa}.spell-name{display:block;font-size:9px;white-space:nowrap;color:#c4e4f1}.spell kbd{position:absolute;right:3px;top:3px;padding:1px 3px;color:#a7d3e5;background:#07131dbb;font:600 8px Cinzel,serif}.spell .cooldown{position:absolute;bottom:0;left:0;right:0;background:#020b14d9;height:0;pointer-events:none}.spell.cooling .cooldown{border-top:1px solid #7ca6b9}.spell.insufficient{filter:grayscale(.8)}.fire-spell{background:radial-gradient(circle at 50% 10%,#803a24,#2e1e22 65%,#15171d);border-color:#936343}.fire-spell .spell-art{text-shadow:0 0 15px #ff9837,0 0 28px #ee472c;color:#ffd39e}.lightning-spell{background:radial-gradient(circle at 50% 10%,#553374,#222038 65%,#15151f);border-color:#735e9a}.lightning-spell .spell-art{text-shadow:0 0 15px #bca6ff,0 0 28px #6a65ff;color:#d6c6ff}
.resource-wrap.side{width:130px;flex-direction:row;align-items:center;gap:10px}.level-orb{width:42px;height:42px;border:1px solid #a6cbd7;transform:rotate(45deg);display:flex;flex-direction:column;align-items:center;justify-content:center;background:#102939;box-shadow:0 0 15px #4dc4f533}.level-orb>*{transform:rotate(-45deg)}.level-orb small{font:8px Cinzel,serif;color:#a7d8e8;margin-bottom:-4px;margin-left:-10px}.level-orb strong{font:600 20px Cinzel,serif;margin-left:10px}.xp-label{font:8px Cinzel,serif;letter-spacing:.07em;color:#aec8d4;flex:1}.xp-label .track{height:4px;margin-top:7px}.xp-label .track div{background:#d6b46b}.hint-line{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:10px;color:#8aa8b8;letter-spacing:.04em}.combo{position:absolute;top:32%;left:50%;transform:translateX(-50%);text-align:center;color:#d8f8ff;text-shadow:0 0 20px #56cfff}.combo b{display:block;font:800 65px Cinzel,serif;line-height:1}.combo span{font:700 10px Cinzel,serif;letter-spacing:.3em}.toast{position:absolute;z-index:20;top:90px;left:50%;transform:translateX(-50%);border:1px solid #5aacc6;background:#0a2336e8;box-shadow:0 10px 35px #0008;color:#e2f9ff;padding:11px 20px;font-size:12px;white-space:nowrap}
.overlay{position:absolute;z-index:10;inset:0;background:linear-gradient(90deg,rgba(3,11,22,.97) 0%,rgba(3,11,22,.95) 34%,rgba(3,11,22,.56) 61%,rgba(3,11,22,.26) 100%),radial-gradient(circle at 75% 45%,#123f6166,transparent 38%);display:flex;align-items:center}.menu-content{margin-left:clamp(38px,9vw,160px);width:min(560px,85vw);text-align:center;position:relative}.menu-kicker{display:flex;align-items:center;justify-content:center;gap:14px;font:700 10px Cinzel,serif;letter-spacing:.22em;color:#88c9dc}.kicker-line{height:1px;width:45px;background:#427187}.title-rune{font-size:46px;color:#c9f5ff;text-shadow:0 0 20px #71dcff,0 0 65px #3fafff;margin:20px auto 5px;animation:glow 3s ease-in-out infinite alternate}@keyframes glow{to{text-shadow:0 0 30px #dbfaff,0 0 95px #68d3ff}}h1{font:800 clamp(54px,6vw,88px) Cinzel,serif;letter-spacing:-.055em;color:#eefbff;line-height:1;margin:0;text-shadow:0 2px 0 #608ba1,0 12px 38px #000}h1 span{color:#8bddff}.title-sub{font-size:15px;letter-spacing:.6em;color:#c5dce6;margin:13px 0 0}.menu-intro{line-height:1.9;color:#a5bccb;font-size:14px;margin:32px 0}.menu-buttons{width:min(390px,100%);margin:auto}.primary-button{display:flex;align-items:center;gap:15px;width:100%;min-height:70px;text-align:left;background:linear-gradient(135deg,#d6f7ff,#7bcde8);border:1px solid #e7fbff;padding:12px 18px;color:#072335;box-shadow:0 0 27px #3cbefc3d,inset 0 1px #fff;transition:transform .15s,filter .15s}.primary-button:hover{transform:translateY(-2px);filter:brightness(1.1)}.button-icon{font-size:26px}.primary-button strong{display:block;font-size:16px;font-weight:800}.primary-button small{display:block;font-size:10px;color:#3c6a7e;margin-top:2px}.button-arrow{margin-left:auto;font-size:21px}.secondary-row{display:flex;gap:8px;margin-top:8px}.secondary-button{flex:1;height:52px;border:1px solid #47758c;background:rgba(12,36,53,.72);color:#caeaf6;font-weight:600;font-size:12px;display:flex;align-items:center;justify-content:center;gap:10px;transition:background .15s,border-color .15s}.secondary-button span:first-child{font-size:19px;color:#8de0fa}.secondary-button:hover{background:#153d55;border-color:#a0e6fc}.menu-foot{display:flex;justify-content:space-between;margin:43px auto 0;max-width:490px;color:#7898a8;font:600 9px Cinzel,serif;letter-spacing:.07em}.foot-feature span{color:#c99e61;margin-right:7px}.menu-side{position:absolute;right:37px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;display:flex;align-items:center;gap:12px;font:600 9px Cinzel,serif;letter-spacing:.19em;color:#94bacd}.side-rule{height:35px;width:1px;background:#6aa6be}
.modal-backdrop{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#030a13bc;backdrop-filter:blur(8px)}.modal{position:relative;width:min(430px,calc(100% - 32px));padding:31px 32px;background:linear-gradient(150deg,#133449,#091724 70%);border:1px solid #6babc4;box-shadow:0 25px 80px #000c,0 0 35px #3eabd73a;text-align:center}.modal:before,.modal:after{content:'';position:absolute;width:15px;height:15px;border-color:#c7ecf4}.modal:before{left:7px;top:7px;border-left:1px solid;border-top:1px solid}.modal:after{right:7px;bottom:7px;border-right:1px solid;border-bottom:1px solid}.modal-close{position:absolute;top:9px;right:12px;border:0;background:none;color:#b2d0df;font-size:25px}.modal-icon{font-size:35px;color:#a6ebff;text-shadow:0 0 20px #6acfff}.modal h2{font:700 25px Cinzel,'Noto Sans KR',serif;margin:10px 0;color:#edfaff}.modal p{font-size:13px;line-height:1.8;color:#bed2dd;margin:10px 0 20px}.modal-action{justify-content:center;min-height:48px;font-weight:800;font-size:13px}.invite-code{font:700 24px Cinzel,serif;letter-spacing:.15em;color:#d8f8ff;border:1px dashed #6ba9bd;padding:13px;margin-bottom:14px;user-select:all}.invite-link{font-size:11px;color:#8dbbce;word-break:break-all;margin-bottom:15px}
.mobile-controls{position:absolute;z-index:8;left:0;right:0;bottom:85px;pointer-events:none;justify-content:space-between;padding:0 22px}.joystick{pointer-events:auto;width:115px;height:115px;border-radius:50%;border:2px solid #80d5f077;background:#0c253d88;position:relative;touch-action:none}.joystick>div{width:46px;height:46px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;background:#9be8ff99;box-shadow:0 0 20px #58bffd}.mobile-spells{pointer-events:auto;display:grid;grid-template-columns:repeat(3,53px);gap:8px;align-self:end}.mobile-spells button{width:53px;height:53px;border:1px solid #7acde8;background:#0d314acc;color:#d4f6ff;font-size:28px;box-shadow:0 0 15px #3eaeec55}.mobile-spells button:nth-child(3){grid-row:1;grid-column:3}.mobile-spells button:nth-child(4){grid-row:2;grid-column:2}.mobile-spells button:nth-child(5){grid-row:2;grid-column:3}
@media(max-width:900px){.topbar{padding:0 18px}.world-label,.mode-badge,.resource-wrap.side{display:none}.quest-card{top:78px;left:16px;transform:scale(.85);transform-origin:left top}.bottom-hud{bottom:8px;gap:8px}.resource-wrap{width:110px}.spellbar{gap:3px;padding:5px}.spell{width:49px;height:58px}.spell-art{font-size:24px;height:32px;line-height:32px}.spell-name{font-size:7px}.hint-line{display:none}.menu-content{margin-left:4vw}.menu-side{display:none}}
@media(max-width:650px){.brand strong{font-size:13px}.brand small{font-size:7px}.brand-mark{width:29px;height:29px}.topbar{height:55px}.menu-content{width:calc(100% - 32px);margin:auto}.menu-kicker{font-size:8px}.menu-intro{font-size:12px}.menu-foot{font-size:7px}.resource-wrap{width:72px}.resource strong{font-size:8px}.resource>span{font-size:8px}.spellbar{position:absolute;bottom:0;left:50%;transform:translateX(-50%);opacity:.83}.spell{width:38px;height:48px}.spell-art{font-size:19px;height:28px;line-height:28px}.spell-name{display:none}.bottom-hud{bottom:4px;justify-content:space-between}.resource-wrap{align-self:end;margin-bottom:56px}.mobile-controls{display:flex!important}.quest-card{top:70px}.target-indicator{display:none}}