@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Noto+Sans+KR:wght@400;600;700;900&display=swap');
:root{--ink:#0b0e13;--panel:#171c25;--gold:#f2b84b;--orange:#db6a31;--blue:#4eb6ff;--red:#ef5968;--text:#f6f0df}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#080b10;color:var(--text);font-family:'Noto Sans KR',sans-serif}button{font:inherit;color:inherit;cursor:pointer}#app,.screen{width:100%;height:100%;position:relative}.screen{display:none}.screen.active{display:flex}#menu{background:radial-gradient(circle at 70% 35%,#46301f 0,#191719 28%,#090c10 65%);overflow:hidden}.menu-card{z-index:2;width:min(500px,90vw);margin:auto 0 auto max(7vw)}.eyebrow{color:var(--gold);font-weight:900;letter-spacing:.22em;font-size:13px}.menu-card h1{font-family:'Black Han Sans',sans-serif;font-size:clamp(58px,8vw,112px);line-height:.86;margin:18px 0 26px;text-shadow:0 6px 0 #000}.menu-card h1 span{color:var(--gold)}.lead{color:#c7c3b8;line-height:1.8}.stage-picker{display:flex;align-items:center;background:#131820;border:1px solid #3e4652;border-radius:8px;margin:28px 0 14px;width:390px;max-width:100%;height:82px}.stage-picker button{width:55px;height:100%;border:0;background:transparent;font-size:38px;color:#7f8996}.stage-picker div{flex:1;text-align:center;display:grid}.stage-picker small{color:#808995}.stage-picker strong{font-size:23px;color:var(--gold)}.stage-picker span{font-size:12px}.primary,.ghost{border:0;border-radius:5px;font-weight:900;letter-spacing:.06em}.primary{height:54px;background:linear-gradient(135deg,#d88937,#b74d24);box-shadow:0 5px 0 #6c2a17;width:390px;max-width:100%;font-size:17px}.primary:hover{filter:brightness(1.12)}.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #6c2a17}.ghost{display:block;width:390px;max-width:100%;margin-top:13px;height:42px;background:#171c23;border:1px solid #3d4652;color:#aeb5bd}.progress-note{font-size:12px;color:#747c86;margin-top:20px}.menu-art{position:absolute;inset:0 0 0 42%;pointer-events:none}.moon{position:absolute;width:48vw;height:48vw;max-width:660px;max-height:660px;border-radius:50%;top:4%;left:12%;background:radial-gradient(circle at 35% 30%,#f6d77d,#e08435 38%,#7d2b1e 72%);box-shadow:0 0 80px #c4592888}.moon:after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 60% 20%,#0003 0 4%,transparent 5%),radial-gradient(circle at 25% 58%,#0002 0 9%,transparent 10%)}.hero-silhouette{position:absolute;left:18%;top:25%;font-size:min(32vw,430px);filter:grayscale(1) brightness(.04);transform:scaleX(-1);text-shadow:0 8px 10px #000}.hud{height:68px;background:#111722;border-bottom:2px solid #454c54;display:flex;align-items:center;padding:8px 18px;gap:25px}.base-stat{display:flex;align-items:center;gap:10px;flex:1;font-size:13px;font-weight:700}.base-stat.enemy{justify-content:flex-end}.bar{height:12px;background:#282d34;border:1px solid #4d5661;width:min(30vw,360px);overflow:hidden}.bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#3fb4e6,#6be0ff);transition:width .25s}.enemy .bar i{background:linear-gradient(90deg,#ef8d4b,#d84747)}.stage-title{text-align:center;min-width:100px}.stage-title small{display:block;color:var(--gold);font-weight:900}.stage-title strong{font-variant-numeric:tabular-nums}.controls{height:104px;background:linear-gradient(#171d27,#0d1118);border-top:2px solid #4a5159;display:flex;align-items:center;padding:10px 18px;gap:18px}.energy{display:flex;align-items:center;gap:10px;min-width:180px}.energy>span{font-size:28px;color:#6ed7ff}.energy small{display:block;color:#8c96a3}.energy strong{font-size:22px}.energy-bar{position:absolute;bottom:0;left:0;width:100%;height:3px;background:#111}.energy-bar i{display:block;width:40%;height:100%;background:#4fc9ff}.summons{display:flex;justify-content:center;gap:8px;flex:1;height:78px}.summons button{position:relative;display:grid;grid-template-columns:50px 1fr;grid-template-rows:1fr 1fr;width:130px;background:#212832;border:1px solid #46515e;border-radius:6px;text-align:left;padding:8px}.summons button:hover:not(:disabled){border-color:var(--gold);transform:translateY(-2px)}.summons button:disabled{filter:grayscale(1);opacity:.42;cursor:not-allowed}.unit-icon{grid-row:1/3;font-size:32px;align-self:center;color:#e7aa46}.unit-icon.magic{color:#b16eff}.unit-icon.shield{color:#85a5bd}.summons b{align-self:end}.summons small{color:#75d7ff}.round{width:52px;height:52px;border-radius:50%;background:#222a35;border:2px solid #657080;font-weight:900}.charge-wrap{position:absolute;left:50%;transform:translateX(-50%);bottom:115px;width:180px;height:8px;background:#151a21;border:1px solid #5f6873;display:none}.charge-wrap span{position:absolute;top:-18px;width:100%;text-align:center;font-size:9px;letter-spacing:.2em;color:#a7afb7}.charge-wrap div{height:100%;width:0;background:linear-gradient(90deg,#f5cb4a,#ef563b)}canvas{display:block;width:100%;height:calc(100% - 172px);cursor:crosshair;background:#1b2228}.mobile-move{display:none;position:absolute;bottom:118px;left:12px;gap:8px}.mobile-move button{width:58px;height:58px;border-radius:50%;background:#111a;color:#fff;border:1px solid #889}.overlay{position:fixed;z-index:10;inset:0;background:#05070bd9;display:grid;place-items:center;backdrop-filter:blur(6px)}.overlay.hidden{display:none}.modal-card{width:min(440px,90vw);padding:38px;text-align:center;background:linear-gradient(145deg,#252c36,#11151c);border:1px solid #69727d;border-radius:10px;box-shadow:0 30px 100px #000}.modal-card>p:first-child{font-size:12px;letter-spacing:.22em;color:var(--gold);font-weight:900}.modal-card h2{font-family:'Black Han Sans';font-size:48px;margin:8px}.modal-card .primary,.modal-card .ghost{width:100%}.stars{font-size:35px;color:var(--gold);margin:14px}.help-grid{display:grid;gap:12px;margin:20px 0}.help-grid div{display:grid;grid-template-columns:70px 1fr;text-align:left;align-items:center;background:#11161d;padding:12px}.help-grid div>:first-child{grid-row:1/3;text-align:center;font-size:25px}.help-grid span{font-size:12px;color:#89929d}.help-grid kbd{display:inline-block}.help-grid div:first-child kbd:nth-child(2){position:absolute;margin-left:30px}.mouse{color:#e19949}#toast{position:fixed;top:85px;left:50%;transform:translate(-50%,-20px);background:#0b1018dd;border:1px solid #576171;padding:10px 20px;border-radius:4px;opacity:0;transition:.25s;pointer-events:none;z-index:20;font-weight:700}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:760px){.menu-card{margin:auto;padding:22px}.menu-art{opacity:.4;inset:0}.menu-card h1{font-size:57px}.hud{height:78px;padding:6px;gap:5px}.base-stat{display:grid;gap:2px}.enemy{justify-items:end}.bar{width:29vw}.controls{height:118px;padding:8px;align-items:flex-start}.energy{min-width:74px}.energy-bar{display:none}.summons{gap:3px}.summons button{width:60px;height:92px;display:flex;flex-direction:column;text-align:center;align-items:center;padding:4px}.unit-icon{font-size:25px}.summons b{font-size:11px}.round{width:42px;height:42px}.mobile-move{display:flex}.charge-wrap{bottom:126px}canvas{height:calc(100% - 196px)}}

/* Game HUD, battlefield, and controls must stack vertically. */
#game.active{flex-direction:column}