:root{--ink:#26313a;--cream:#f9f5e4;--gold:#f5bc45;--green:#5e9d59;--red:#d85757;--panel:#f3e6c1}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#1d2730;color:var(--ink);font-family:"Malgun Gothic",system-ui,sans-serif;display:grid;place-items:center;padding:22px}.game-shell{width:min(1040px,100%);background:var(--cream);border:5px solid #111a20;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px #0008}header{height:88px;display:flex;align-items:center;justify-content:space-between;padding:14px 26px;background:#f8e9b8;border-bottom:4px solid #26313a}h1,h2,p{margin:0}.eyebrow{font-size:10px;font-weight:900;letter-spacing:3px;color:#96701f}h1{font-size:25px}.stats{display:flex;gap:10px}.stage-tools{display:flex;gap:5px}.stats span{background:#26313a;color:white;border:3px solid #10171c;border-radius:10px;padding:9px 13px;font-size:11px;letter-spacing:1px}.stats b{color:#ffd45c;font-size:16px;margin-left:7px}.stats #skipButton{border:3px solid #10171c;border-radius:10px;background:#d9913d;color:#fff;padding:0 10px;font-weight:900;cursor:pointer}.stats #skipButton:hover{background:#eba84f}.battlefield{height:440px;position:relative;overflow:hidden;background:linear-gradient(#8cc8df 0 48%,#86aa59 48% 100%)}.battlefield:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff3 1px,transparent 1px),linear-gradient(#fff2 1px,transparent 1px);background-size:16px 16px;opacity:.12;pointer-events:none}.mountain{position:absolute;width:400px;height:190px;background:#6e8f8a;clip-path:polygon(50% 0,100% 100%,0 100%);top:38px}.m1{right:-20px}.m2{right:270px;transform:scale(.7);opacity:.7}.lane{position:absolute;left:0;right:0;bottom:70px;height:116px;background:#caa96b;border-block:5px solid #79613f;transform:skewY(-1deg)}.lane:after{content:"";position:absolute;inset:17px 0;border-block:3px dashed #a17e48}.castle{position:absolute;z-index:4;left:14px;bottom:94px;width:90px;height:136px;border:5px solid #25313a;background:#7d8890;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;font-size:14px;box-shadow:inset 0 0 0 8px #a9afb1}.castle:before{content:"";position:absolute;top:-25px;width:100%;height:30px;background:linear-gradient(90deg,#7d8890 0 22%,transparent 22% 38%,#7d8890 38% 62%,transparent 62% 78%,#7d8890 78%);border-top:5px solid #25313a}.castle span{color:#ff7979;font-size:25px}.heroes,.enemies,.projectiles{position:absolute;inset:0;z-index:5;pointer-events:none}.hero{position:absolute;bottom:127px;width:74px;height:74px;background-image:url("assets/heroes-concept.png");background-size:500% 100%;background-repeat:no-repeat;filter:drop-shadow(0 4px 1px #0004);transform:translateX(-50%);image-rendering:auto}.hero.attacking{animation:bop .2s ease}.hero .level{position:absolute;left:50%;bottom:-18px;transform:translateX(-50%);background:#26313a;color:white;border:2px solid #fff;border-radius:9px;padding:1px 6px;font-size:9px;white-space:nowrap}.enemy{position:absolute;bottom:128px;width:58px;height:70px;transform:translateX(-50%);font-size:48px;display:grid;place-items:center;filter:drop-shadow(0 3px 1px #0005)}.enemy .hp{position:absolute;top:-7px;width:52px;height:6px;background:#492a2a;border:1px solid #1b2024}.enemy .hp i{height:100%;display:block;background:#e75c54}.projectile{position:absolute;width:9px;height:9px;border-radius:50%;background:#ffd35a;box-shadow:0 0 8px #fff;transition:transform .18s linear}.heal{position:absolute;color:#6ef29d;font-weight:900;font-size:18px;animation:floatUp .7s forwards}.wave-panel{position:absolute;z-index:7;right:16px;top:15px;width:170px;background:#25313ad9;color:#fff;border:3px solid #fff8;border-radius:10px;padding:8px 11px;font-size:11px}.wave-panel>div{height:7px;margin-top:5px;background:#111;border-radius:4px;overflow:hidden}.wave-panel i{display:block;height:100%;width:0;background:#f0b743;transition:width .2s}.banner{position:absolute;z-index:20;left:50%;top:42%;transform:translate(-50%,-50%) scale(0);background:#26313ae8;color:#ffd45c;border:4px solid #fff;padding:14px 34px;font-size:24px;font-weight:900;border-radius:12px}.banner.show{animation:banner 1.2s ease}.controls{padding:18px 22px 24px;background:#f8e9b8;border-top:4px solid #26313a}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:12px}.section-title h2{font-size:18px}.section-title p{font-size:11px;color:#6d624d}.section-title button{border:3px solid #26313a;background:#fff8df;border-radius:9px;padding:7px 12px;font-weight:900;cursor:pointer}.hero-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.card{border:3px solid #26313a;border-radius:11px;background:#fffdf1;padding:10px;display:grid;grid-template-columns:42px 1fr;gap:8px;align-items:center}.portrait{width:42px;height:42px;background-image:url("assets/heroes-concept.png");background-size:500% 100%;background-repeat:no-repeat}.card h3{font-size:13px;margin:0}.card p{font-size:9px;color:#766c58;margin:2px 0 6px}.card button{width:100%;border:0;background:#e1a638;color:#fff;border-radius:6px;padding:5px;font-size:10px;font-weight:900;cursor:pointer}.card button:disabled{background:#aaa}@keyframes bop{50%{transform:translateX(-50%) scale(1.12)}}@keyframes floatUp{to{transform:translateY(-28px);opacity:0}}@keyframes banner{0%{transform:translate(-50%,-50%) scale(0)}20%,75%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(0)}}@media(max-width:760px){body{padding:0}.game-shell{border:0;border-radius:0}.battlefield{height:380px}.hero{width:58px;height:58px}.hero-cards{grid-template-columns:1fr 1fr}.stats{gap:4px}.stats span{padding:7px}.castle{transform:scale(.8);transform-origin:left bottom}}
.display-zoom-controls{position:fixed;z-index:7000;right:14px;top:14px;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #76828a;border-radius:10px;background:#101820e8;box-shadow:0 4px 14px #0008}.display-zoom-controls button{height:30px;min-width:30px;padding:0 8px;border:1px solid #89949a;border-radius:6px;background:#27343d;color:#fff4d2;font:900 15px/1 system-ui,sans-serif;cursor:pointer}.display-zoom-controls button:nth-child(2){min-width:58px;font-size:11px}.display-zoom-controls button:hover{filter:brightness(1.18)}@media(max-width:700px){.display-zoom-controls{display:none}}
.hero{bottom:139px;width:48px;height:48px;filter:drop-shadow(0 3px 1px #0004)}.hero.entering{animation:summon .45s ease}.hero .level{bottom:-16px;padding:1px 5px;font-size:8px}@keyframes summon{0%{transform:translateX(-50%) translateY(-35px) scale(.2);opacity:0}70%{transform:translateX(-50%) scale(1.15)}100%{transform:translateX(-50%) scale(1);opacity:1}}@media(max-width:760px){.hero{width:42px;height:42px}}
.battlefield{background-image:url("assets/battle-background.png");background-size:cover;background-position:center}.mountain,.lane{display:none}.castle{top:14px;bottom:auto;left:16px;width:76px;height:54px;border-width:3px;border-radius:9px;background:#26313add;box-shadow:none;z-index:8}.castle:before{display:none}.castle span{font-size:18px}.hero{background-image:none;overflow:visible}.hero-sprite{display:block;width:100%;height:100%;object-fit:contain}.portrait{background-image:none;display:grid;place-items:center;overflow:hidden}.portrait .hero-sprite{width:42px;height:42px}.enemy{width:48px;height:48px;font-size:0;bottom:139px}.enemy-sprite{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 1px #0005)}.enemy .hp{top:-8px;width:44px}
.enemy{overflow:visible}.enemy-sprite{position:absolute;left:50%;bottom:0;width:auto;height:48px;max-width:none;transform:translateX(-50%);object-fit:initial}.enemy .hp{left:50%;transform:translateX(-50%)}
.battlefield{background-image:url("assets/battle-background-v2.png");background-size:100% 100%;background-position:center}.hero,.enemy{bottom:105px}
.unit-hp{position:absolute;left:50%;top:-8px;transform:translateX(-50%);width:42px;height:5px;background:#3b2525;border:1px solid #1b2024}.unit-hp i{display:block;width:100%;height:100%;background:#59c86b;transition:width .15s}.hero.hit{animation:heroHit .18s ease}.hero.defeated{animation:defeat .35s forwards}@keyframes heroHit{50%{filter:brightness(1.8) saturate(.4)}}@keyframes defeat{to{transform:translateX(-50%) rotate(-25deg) scale(.35);opacity:0}}
.hero,.enemy{width:58px;height:58px}.enemy-sprite{height:58px}.hero .unit-hp,.enemy .hp{width:52px}
.hero-cards{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}.card{appearance:none;min-height:78px;padding:8px 6px;display:flex;flex-direction:column;justify-content:center;gap:4px;cursor:pointer;font:inherit;color:var(--ink);touch-action:manipulation}.card:hover:not(:disabled){background:#fff4c8;transform:translateY(-1px)}.card:disabled{opacity:.48;cursor:not-allowed}.card .portrait{width:48px;height:48px}.card .portrait .hero-sprite{width:48px;height:48px}.card .price{display:block;color:#a46908;font-size:12px;font-weight:900;line-height:1}
.control-buttons{display:flex;gap:7px}.stats #autoButton.active{background:#5e9d59;color:white;border-color:#365f34}
.hero.attacking{animation:heroAttackSway .32s ease}.enemy.attacking{animation:enemyAttackSway .32s ease}.hero.hit,.enemy.hit{animation:hitShake .25s ease}.projectile{transition:transform .24s linear}@keyframes heroAttackSway{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(calc(-50% - 5px)) rotate(-7deg)}60%{transform:translateX(calc(-50% + 9px)) rotate(8deg)}}@keyframes enemyAttackSway{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(calc(-50% + 5px)) rotate(7deg)}60%{transform:translateX(calc(-50% - 9px)) rotate(-8deg)}}@keyframes hitShake{0%,100%{transform:translateX(-50%);filter:none}25%{transform:translateX(calc(-50% - 6px));filter:brightness(1.9) saturate(.35)}50%{transform:translateX(calc(-50% + 6px));filter:brightness(1.6) saturate(.55)}75%{transform:translateX(calc(-50% - 3px));filter:brightness(1.3)}}
.hero.attacking:has(.hero-sprite[src*="/warrior-new1201-v1137.png"]),.hero.attacking:has(.hero-sprite[src*="/shield-guard-new1201-v1137.png"]),.hero.attacking:has(.hero-sprite[src*="/paladin.png"]){animation:meleeHeroAttack .22s ease-out}@keyframes meleeHeroAttack{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(calc(-50% - 3px)) rotate(-5deg)}58%{transform:translateX(calc(-50% + 12px)) rotate(9deg)}78%{transform:translateX(calc(-50% + 7px)) rotate(4deg)}}
.card{position:relative}.summon-cooldown{display:none;position:absolute;left:50%;top:33px;transform:translate(-50%,-50%);z-index:3;min-width:34px;padding:5px 4px;border-radius:12px;background:#172129dc;color:white;font-size:11px;font-weight:900}.summon-cooldown.show{display:block}.card:disabled .portrait{filter:grayscale(.55) brightness(.78)}
.enemy-archer .enemy-sprite,.enemy-mage .enemy-sprite{width:58px;height:58px;object-fit:contain}.enemy.elite{width:90px;height:90px;filter:drop-shadow(0 0 7px #ffd45c) drop-shadow(0 5px 2px #0007)}.enemy.elite .enemy-sprite{height:90px;width:auto;max-width:108px;object-fit:contain}.enemy.elite .hp{top:-14px;width:78px;height:8px;border:2px solid #e6b84c}.enemy-projectile{box-shadow:0 0 9px currentColor}

/* Portrait mobile game shell */
body{padding:10px}.game-shell{width:min(460px,100%);height:min(920px,calc(100dvh - 20px));display:flex;flex-direction:column;border-width:4px;border-radius:18px}header{height:68px;flex:0 0 68px;padding:9px 13px;border-bottom-width:3px}h1{font-size:18px}.eyebrow{font-size:8px;letter-spacing:2px}.stats{gap:5px}.stats span{padding:7px 8px;border-width:2px;font-size:8px}.stats b{font-size:13px;margin-left:3px}.stats #skipButton{padding:0 7px;border-width:2px;font-size:10px}.battlefield{height:auto;flex:0 0 46%;min-height:300px}.castle{transform:scale(.82);transform-origin:left top}.wave-panel{width:135px;right:10px;top:10px}.controls{flex:1;min-height:0;padding:16px;background:#f8e9b8;overflow-y:auto;border-top-width:3px}.mobile-panel{display:none;height:100%}.mobile-panel.active{display:block}.section-title{margin-bottom:12px}.section-title h2,.battle-menu-head h2{font-size:19px}.panel-kicker{font-size:8px;font-weight:900;letter-spacing:2px;color:#a47422}.battle-menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.control-buttons button{border:2px solid #26313a;background:#fff8df;border-radius:9px;padding:7px 9px;font-weight:900;cursor:pointer}.idle-note{margin-top:12px;padding:10px;border-radius:8px;background:#26313a;color:#fff3ca;font-size:10px;text-align:center}.hero-cards{grid-template-columns:repeat(5,1fr);gap:6px}.card{min-height:82px;padding:7px 3px}.card .portrait,.card .portrait .hero-sprite{width:45px;height:45px}.equipment-empty{height:calc(100% - 45px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#766c58;text-align:center}.equipment-empty>span{font-size:40px}.equipment-empty strong{margin-top:7px;color:#26313a;font-size:17px}.equipment-empty p{margin:5px 0 12px;font-size:11px}.equipment-empty button{border:0;border-radius:8px;padding:8px 18px;background:#d8ccb0;color:#82765c;font-weight:900}.bottom-nav{flex:0 0 72px;display:grid;grid-template-columns:repeat(3,1fr);background:#202c34;border-top:3px solid #10171c}.bottom-nav button{border:0;border-right:1px solid #ffffff1a;background:transparent;color:#b8c0c4;font-family:inherit;font-weight:900;cursor:pointer}.bottom-nav button:last-child{border-right:0}.bottom-nav button span{display:block;margin-bottom:3px;font-size:19px}.bottom-nav button.active{background:#364852;color:#ffd45c;box-shadow:inset 0 4px #ffd45c}
@media(max-width:480px){body{padding:0}.game-shell{width:100%;height:100dvh;border:0;border-radius:0}.battlefield{flex-basis:45%;min-height:280px}.hero-cards{grid-template-columns:repeat(5,1fr)}.card{min-width:0}.stats #skipButton{font-size:9px}}
.deployment-count{font-size:13px}.deployment-count b{color:#b37516}.deployment-wallet{padding:5px 9px;border:2px solid #26313a;border-radius:8px;background:#26313a;color:#fff;font-size:9px;letter-spacing:.5px}.deployment-wallet b{margin-left:5px;color:#ffd45c;font-size:14px}.mobile-panel[data-panel="battle"] .hero-cards{display:flex;grid-template-columns:none;gap:7px;margin-top:8px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px;scrollbar-width:thin}.mobile-panel[data-panel="battle"] .card{flex:0 0 66px;width:66px;min-height:82px;height:82px;padding:5px 4px;border-radius:10px;background:linear-gradient(145deg,#fffef6,#f8edcc);box-shadow:inset 0 0 0 2px #fff9dc,0 2px 0 #9d8658;justify-content:center}.mobile-panel[data-panel="battle"] .card:before{content:"◆";position:absolute;left:5px;top:3px;color:#c28b25;font-size:8px}.mobile-panel[data-panel="battle"] .card .portrait{width:48px;height:48px;display:grid;place-items:center;margin:auto}.mobile-panel[data-panel="battle"] .card .portrait .hero-sprite{width:46px;height:46px}.mobile-panel[data-panel="battle"] .card .price{position:absolute;left:0;right:0;bottom:5px;margin:0;font-size:10px}.card.locked .portrait{visibility:hidden}.card.locked .price{visibility:hidden}.card.locked .summon-cooldown.lock-only{display:block;width:22px;min-width:22px;height:17px;top:43px;padding:0;border:3px solid #5f625f;border-radius:4px;background:#b7b2a2}.card.locked .summon-cooldown.lock-only:before{content:"";position:absolute;left:3px;top:-13px;width:10px;height:12px;border:3px solid #5f625f;border-bottom:0;border-radius:8px 8px 0 0}.hero-collection{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:18px}.collection-slot{min-width:0;padding:7px 3px;border:2px solid #b9a269;border-radius:10px;background:#fff9e3;text-align:center}.collection-portrait{height:48px;display:grid;place-items:center}.collection-portrait img{width:48px;height:48px;object-fit:contain}.collection-slot span{display:block;margin-top:4px;font-size:9px;font-weight:900}.collection-slot.locked .collection-portrait{filter:grayscale(1) brightness(.3);opacity:.55}.collection-slot.locked span{color:#8c816c}.collection-slot.owned{border-color:#d9a737;box-shadow:inset 0 0 0 2px #ffe595}.gacha-box{margin-top:18px;padding:16px;border:2px solid #c1a35e;border-radius:12px;background:#fff8da;text-align:center}.gacha-box>p{font-size:12px}.gacha-box>p strong{color:#bd7916;font-size:18px}.gacha-box>button{display:block;width:100%;margin:10px 0 7px;padding:12px;border:2px solid #26313a;border-radius:9px;background:#d9913d;color:#fff;font:900 14px inherit;cursor:pointer}.gacha-box>button:disabled{background:#aaa;cursor:not-allowed}.gacha-box small{color:#7f735d;font-size:9px}
header .stage-tools{align-items:stretch}.stats .stage-tools>button{border:2px solid #10171c;border-radius:8px;padding:0 6px;background:#fff8df;color:#26313a;font-family:inherit;font-size:9px;font-weight:900;cursor:pointer}.stats .stage-tools>#skipButton{background:#d9913d;color:#fff}.stats .stage-tools>#autoButton.active{background:#5e9d59;color:#fff}.stats .stage-tools>#speedButton{white-space:nowrap}
/* 세로 전장용 유닛 스케일 */
.hero,.enemy{width:50px;height:50px}.hero-sprite{width:50px;height:50px}.enemy-sprite{height:50px}.hero .unit-hp,.enemy .hp{width:44px}.enemy-archer .enemy-sprite,.enemy-mage .enemy-sprite{width:50px;height:50px}.enemy.elite{width:76px;height:76px}.enemy.elite .enemy-sprite{height:76px;max-width:92px}.enemy.elite .hp{top:-13px;width:66px;height:7px}
.hero.legendary{width:58px;height:58px;filter:drop-shadow(0 0 5px #ffd84c) drop-shadow(0 4px 1px #0006)}.hero.legendary .hero-sprite{width:58px;height:58px}.hero.legendary .unit-hp{width:52px;border-color:#d99b20}.card.rarity-legendary,.collection-slot.rarity-legendary{border-color:#d89a17;background:linear-gradient(145deg,#fffde9,#f4d477);box-shadow:inset 0 0 0 2px #fff4a8,0 0 7px #efbd3d}.card.rarity-legendary:before{content:"★";color:#c77d00}.card.rarity-legendary .price{color:#a25900}.collection-slot.rarity-legendary span{color:#9b5c00}.hero-collection{grid-template-columns:repeat(6,1fr)}
.hero .unit-hp,.hero.legendary .unit-hp,.enemy .hp,.enemy.elite .hp{top:-6px;width:36px;height:3px;border:1px solid #1b2024;box-shadow:none}
.hero,.enemy,.hero.legendary,.enemy.elite{filter:none}.hero-sprite{filter:drop-shadow(0 3px 1px #0004)}.hero.legendary .hero-sprite{filter:drop-shadow(0 0 5px #ffd84c) drop-shadow(0 4px 1px #0006)}.enemy.elite .enemy-sprite{filter:drop-shadow(0 3px 1px #0005)}
.enemy.enemy-archer:not(.elite) .enemy-sprite,.enemy.enemy-mage:not(.elite) .enemy-sprite{width:64px;height:64px}
/* 전투 화면과 배치 슬롯을 합쳐 전체 콘텐츠의 약 절반으로 제한 */
.battlefield{flex-basis:calc(50% - 181px);min-height:174px}.mobile-panel[data-panel="battle"] .battle-menu-head{min-height:34px}
.mobile-panel[data-panel="battle"] .hero-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;width:100%;margin-top:8px;padding:2px 0 6px;overflow:visible;scrollbar-width:none}.mobile-panel[data-panel="battle"] .hero-cards::-webkit-scrollbar{display:none}.mobile-panel[data-panel="battle"] .card{width:100%;min-width:0;max-width:none;flex:none}
.stats .stage-tools>#resetButton{background:#9b5550;color:#fff}
.stats .stage-tools>#musicButton.active{border-color:#715a25;background:#e8bc51;color:#241a08}
.equipment-heroes{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}.equipment-heroes button{min-width:0;height:49px;padding:2px;border:2px solid #b9a269;border-radius:9px;background:#fff9e3;cursor:pointer}.equipment-heroes button.selected{border-color:#26313a;background:#ffe596;box-shadow:inset 0 0 0 2px #e0aa35}.equipment-heroes img{width:42px;height:42px;object-fit:contain}.equipped-slots{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.equipped-slots div{position:relative;min-height:62px;padding:8px 8px 8px 54px;border:2px solid #806e4c;border-radius:9px;background:#fffdf1}.equipped-slots div.rare{border-color:#4f8fc3;background:#edf7ff}.equipped-slots div.epic{border-color:#8c54c7;background:#f5ebff}.equipped-slots div.locked{border-color:#aaa08c;background:#d8d1c2;color:#716b61}.equipped-slots span,.equipped-slots b{display:block}.equipped-slots span{font-size:9px;color:#877657}.equipped-slots b{margin-top:3px;font-size:10px}.slot-lock{position:absolute;left:18px;top:17px;font-size:20px}.inventory-title{margin:12px 0 6px;font-size:10px;font-weight:900;color:#8f671d}.equipment-inventory{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.equipment-item{min-width:0;min-height:78px;padding:5px 3px;border:2px solid #9c8b68;border-radius:9px;background:#fffdf1;color:#26313a;font-family:inherit;cursor:pointer}.equipment-item>b,.equipment-item>small{display:block}.equipment-item>b{margin-top:1px;font-size:9px}.equipment-item>small{margin-top:3px;font-size:8px;color:#806d4c}.equipment-item.rare{border-color:#4f8fc3;background:#edf7ff}.equipment-item.epic{border-color:#8c54c7;background:#f5ebff}.equipment-icon{display:block;width:38px;height:38px;margin:0 auto;object-fit:contain}.equipped-slots .equipment-icon{position:absolute;left:8px;top:10px}.inventory-empty{grid-column:1/-1;padding:18px 8px;border:2px dashed #b9a269;border-radius:9px;color:#8b7b5d;font-size:10px;text-align:center}
.game-shell.equipment-mode .battlefield{display:none}.game-shell.equipment-mode .controls{flex:1}.game-shell.equipment-mode .mobile-panel[data-panel="equipment"]{overflow-y:auto}.equipped-slots{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}.equipped-slots div{min-width:0;min-height:82px;padding:43px 3px 4px;text-align:center}.equipped-slots .equipment-icon{left:50%;top:4px;transform:translateX(-50%);width:38px;height:38px}.equipped-slots span{white-space:nowrap;font-size:8px}.equipped-slots b{font-size:8px;line-height:1.15}.slot-lock{left:50%;top:13px;transform:translateX(-50%);font-size:18px}.equipment-inventory{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.equipment-item{min-height:62px;padding:3px 2px}.equipment-item .equipment-icon{width:39px;height:39px}.equipment-item>small{margin-top:1px;font-size:8px;white-space:nowrap}.inventory-empty{grid-column:1/-1}
@media(max-width:480px){.battlefield{flex-basis:calc(50% - 181px);min-height:174px}}
.equipped-slots div{min-height:70px;padding-top:45px}
.equipped-slots div.empty{border-color:#aaa18f;background:#ddd8cd;color:#8f8778}.equipped-slots div.empty .equipment-icon{filter:grayscale(1);opacity:.32}.equipped-slots div.empty b{color:#8f8778;font-weight:700}
.equipment-item.incompatible{filter:grayscale(.9);opacity:.42}
.equipment-item .weapon-bow{transform:rotate(-45deg) scale(.78)}.equipped-slots .weapon-bow{transform:translateX(-50%) rotate(-45deg) scale(.78)}.inventory-toolbar{display:flex;align-items:center;justify-content:space-between;margin:10px 0 6px}.inventory-toolbar .inventory-title{margin:0}.inventory-toolbar>div{display:flex;gap:5px}.inventory-toolbar button{padding:4px 7px;border:2px solid #786843;border-radius:7px;background:#fff8df;color:#574a34;font:900 9px inherit;cursor:pointer}.inventory-toolbar button.active{background:#b86455;color:#fff}.inventory-toolbar button:disabled{opacity:.4;cursor:not-allowed}.equipment-item.selling{border-color:#b86455;background:#fff0e8}.equipment-item.selling small{color:#a14335;font-weight:900}
.equipment-heroes{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:8px}.equipment-heroes button{height:56px;background:#d9d1bd;border-color:#81745b}.equipment-heroes button.selected{background:#e8c66c;border-color:#f4d879;box-shadow:inset 0 0 0 2px #4b3b22,0 0 7px #d19d35}.equipment-heroes img{width:48px;height:48px}.hero-status{padding:9px;border:2px solid #4c4234;border-radius:10px;background:linear-gradient(145deg,#252a2d,#15191b);color:#eee1c2;box-shadow:inset 0 0 0 2px #776044}.profile-identity{display:grid;grid-template-columns:66px 1fr auto;gap:8px;align-items:center}.profile-identity>img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 3px 1px #0008)}.profile-identity small,.profile-identity strong,.profile-identity span{display:block}.profile-identity small{color:#d2a94e;font-size:8px}.profile-identity strong{margin:2px 0;font-size:17px;color:#fff3d0}.profile-identity span{max-width:190px;color:#aaa18f;font-size:8px}.profile-identity>b{align-self:start;padding:5px 7px;border:1px solid #9c7b37;border-radius:6px;background:#332918;color:#f0c75b;font-size:9px;white-space:nowrap}.profile-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:7px}.profile-stats div{padding:5px 3px;border:1px solid #51493d;background:#202427;text-align:center}.profile-stats span,.profile-stats b{display:block}.profile-stats span{font-size:7px;color:#9d9585}.profile-stats b{margin-top:2px;font-size:11px;color:#f2e5c7}
.hero-roster{display:grid;grid-template-columns:25px minmax(0,1fr) 25px;gap:4px;align-items:stretch;margin-bottom:8px}.hero-roster>button{border:2px solid #66583e;border-radius:8px;background:#2b2e2e;color:#e5bd59;font:900 24px/1 system-ui;cursor:pointer}.hero-roster>button:disabled{color:#777064;background:#c6bead;border-color:#a69d8b;cursor:default}.equipment-heroes{display:grid;grid-template-rows:repeat(2,54px);grid-auto-flow:column;grid-auto-columns:calc((100% - 25px)/6);grid-template-columns:none;gap:5px;margin:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}.equipment-heroes::-webkit-scrollbar{display:none}.equipment-heroes button{width:100%;min-width:0;height:54px;scroll-snap-align:start}.equipment-heroes img{width:45px;height:45px}
.hero-roster{align-items:center}.hero-roster>button{height:38px;align-self:center;border-radius:19px}.equipment-heroes{grid-template-rows:repeat(2,48px)}.equipment-heroes button{height:48px}.equipment-heroes img{width:40px;height:40px}.hero-status{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:8px;min-height:178px;padding:8px}.hero-loadout{position:relative;min-width:0;border:1px solid #51493d;background:radial-gradient(circle at center,#34383a,#191d1f 70%);overflow:hidden}.loadout-hero{position:absolute;z-index:1;left:50%;top:50%;width:90px;height:90px;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 5px 2px #0009)}.hero-loadout .equipped-slots{position:absolute;z-index:2;inset:8px;display:grid;grid-template-columns:59px 59px;grid-template-rows:68px 68px;justify-content:space-between;align-content:space-between;gap:0;margin:0}.hero-loadout .equipped-slots>div{min-width:0;min-height:0;height:68px;padding:40px 2px 2px;border-radius:7px}.hero-loadout .equipped-slots .equipment-icon{top:3px;width:36px;height:36px}.hero-loadout .slot-lock{top:10px}.hero-loadout .equipped-slots b{font-size:7px}.hero-info{min-width:0;display:flex;flex-direction:column}.hero-info .profile-identity{display:block}.hero-info .profile-identity>div{min-width:0}.hero-info .profile-identity>b{display:inline-block;margin-top:7px}.hero-info .profile-stats{grid-template-columns:1fr 1fr;gap:4px;margin-top:8px}.hero-info .profile-stats div{padding:6px 2px}.hero-info .profile-identity span{max-width:none;line-height:1.3}
.equipment-heroes{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;grid-auto-rows:48px;gap:5px;max-height:101px;margin:8px 0 0;padding-right:2px;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y proximity;scrollbar-width:thin}.equipment-heroes button{width:100%;height:48px;scroll-snap-align:start}.equipment-heroes img{width:40px;height:40px}
.equipment-heroes{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:82px;gap:6px;max-height:170px;padding:2px 0 6px;scrollbar-width:none}.equipment-heroes::-webkit-scrollbar{display:none}.equipment-heroes button{position:relative;width:100%;height:82px;min-height:82px;padding:5px 4px;border:3px solid #26313a;border-radius:10px;background:linear-gradient(#fff8dd,#e8d3a1);box-shadow:inset 0 0 0 2px #b99451,0 3px 0 #5c4930;overflow:hidden}.equipment-heroes img{display:block;width:48px;height:48px;margin:auto;object-fit:contain}.equipment-heroes button.selected{border-color:#f1c951;background:linear-gradient(#fff4b8,#e4b94c);box-shadow:inset 0 0 0 2px #5a431d,0 3px 0 #5c4930,0 0 8px #e5b63b}.equipment-heroes button.locked{cursor:default;background:linear-gradient(#b9b5aa,#8d8980);border-color:#4d4b47;box-shadow:inset 0 0 0 2px #77736b,0 3px 0 #3f3c37}.equipment-heroes button.locked img{filter:grayscale(1) brightness(.3);opacity:.55}.equipment-heroes .hero-lock{position:absolute;z-index:2;inset:0;display:grid;place-items:center;font-size:22px;filter:drop-shadow(0 2px 1px #0008)}
.equipment-heroes{max-height:none;overflow:visible}.equipment-heroes button{display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,#fffef6,#f8edcc);box-shadow:inset 0 0 0 2px #fff9dc,0 2px 0 #9d8658}.equipment-heroes button .portrait{width:48px;height:48px;display:grid;place-items:center;margin:auto}.equipment-heroes button .portrait .hero-sprite{width:46px;height:46px;object-fit:contain}.equipment-heroes button.locked .portrait{filter:grayscale(1) brightness(.3);opacity:.55}.equipment-heroes button.locked .portrait img{filter:none;opacity:1}
.equipment-heroes button{border:0;background:#eee3c7;box-shadow:none}.equipment-heroes button.selected{border:0;background:#e5c260;box-shadow:none}.equipment-heroes button.locked{border:0;background:#aaa69c;box-shadow:none}
.equipment-heroes button{border:2px solid #26313a}.equipment-heroes button.selected{border:2px solid #d29a25}.equipment-heroes button.locked{border:2px solid #5d5a53}.equipment-heroes button[title*="성기사"]{border-color:#d89a17}
.equipment-heroes button,.equipment-heroes button.locked{background:#f8edcc;border-color:#26313a}.equipment-heroes button.selected{background:#f4d477;border-color:#d29a25}.equipment-heroes button.locked .portrait{filter:grayscale(.55) brightness(.8);opacity:.72}.equipment-heroes .hero-lock{inset:auto;top:5px;right:5px;width:20px;height:20px;display:grid;place-items:center;border-radius:50%;background:#26313a;color:#fff7dc;font-size:11px;line-height:1;filter:none}.equipment-heroes button[title*="성기사"]{border-color:#d89a17}
.profile-traits{display:grid;grid-template-columns:30px 1fr;gap:5px;align-items:start;margin-top:6px;padding-top:6px;border-top:1px solid #51493d}.profile-traits>span{padding-top:3px;color:#a69c8a;font-size:8px;font-weight:900}.profile-traits>div{display:flex;flex-wrap:wrap;gap:4px}.profile-traits b{padding:3px 5px;border:1px solid #8c713c;border-radius:5px;background:#332a1c;color:#e8c86f;font-size:8px;line-height:1;white-space:nowrap}
.hero-loadout .equipped-slots{inset:10px;grid-template-columns:48px 48px;grid-template-rows:48px 48px}.hero-loadout .equipped-slots>div{width:48px;height:48px;padding:0;border-radius:7px}.hero-loadout .equipped-slots .equipment-icon{top:6px;width:34px;height:34px}.hero-loadout .equipped-slots b{display:none}.hero-loadout .slot-lock{top:12px;font-size:18px}.locked-hero-preview .loadout-hero{filter:grayscale(.75) brightness(.6);opacity:.65}.profile-lock{position:absolute;z-index:3;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff1c7;text-shadow:0 2px 2px #000}.profile-lock span{font-size:29px}.profile-lock b{margin-top:3px;padding:2px 7px;border-radius:4px;background:#171b1dcc;font-size:11px;letter-spacing:2px}
.hero-loadout .equipped-slots>div.locked{border-color:#8b8d89;background:#666865}.slot-lock,.hero-lock,.profile-lock span{font-size:0;color:transparent;background:transparent}.slot-lock:before,.hero-lock:before,.profile-lock span:before{content:"";position:absolute;left:50%;top:1px;width:10px;height:10px;transform:translateX(-50%);border:3px solid #a8aaa6;border-bottom:0;border-radius:7px 7px 0 0}.slot-lock:after,.hero-lock:after,.profile-lock span:after{content:"";position:absolute;left:50%;bottom:1px;width:16px;height:12px;transform:translateX(-50%);border-radius:2px;background:#a8aaa6}.hero-loadout .slot-lock{left:50%;top:50%;width:18px;height:22px;transform:translate(-50%,-50%)}.equipment-heroes .hero-lock{top:5px;right:5px;width:18px;height:22px;border-radius:0}.profile-lock span{position:relative;width:22px;height:27px}.profile-lock span:before{width:13px;height:13px;border-width:4px}.profile-lock span:after{width:21px;height:15px}.profile-lock{color:#aaa;text-shadow:none}.profile-lock b{color:#b8bab6;background:#202426dd}
.hero-loadout .slot-lock,.equipment-heroes .hero-lock,.profile-lock span{font-size:0!important;line-height:0;color:transparent!important;text-shadow:none!important}
.slot-lock:after,.profile-lock span:after{background:radial-gradient(circle at 50% 42%,#60625f 0 2px,transparent 2.4px),linear-gradient(90deg,transparent 0 44%,#60625f 44% 56%,transparent 56%) center 72%/100% 7px no-repeat,#a8aaa6}.equipment-heroes .hero-lock{top:4px;right:4px;width:25px;height:25px;border:1px solid #727672;border-radius:50%;background:#3f4648;box-shadow:0 1px 2px #0005}.equipment-heroes .hero-lock:before{top:4px;width:8px;height:8px;border-width:2px;border-color:#c2c5c0;border-bottom:0}.equipment-heroes .hero-lock:after{bottom:4px;width:13px;height:10px;background:radial-gradient(circle at 50% 40%,#4b4f4d 0 1.5px,transparent 1.8px),linear-gradient(90deg,transparent 0 45%,#4b4f4d 45% 55%,transparent 55%) center 72%/100% 5px no-repeat,#c2c5c0;box-shadow:0 1px 0 #202525}.profile-lock span:after{background:radial-gradient(circle at 50% 42%,#555855 0 2.5px,transparent 3px),linear-gradient(90deg,transparent 0 44%,#555855 44% 56%,transparent 56%) center 72%/100% 8px no-repeat,#b8bbb6}
.locked-hero-preview .loadout-hero{top:38%}.locked-hero-preview .profile-lock{inset:auto 0 11px;flex-direction:row;gap:7px;height:30px}.locked-hero-preview .profile-lock b{margin:0;padding:4px 8px}.locked-hero-preview .profile-lock span{flex:0 0 22px}
.locked-hero-preview .loadout-hero{top:50%;width:90px;height:90px}
.hero-info .profile-identity span{display:none}
.mobile-panel[data-panel="equipment"] .section-title{align-items:center;margin-bottom:7px}.mobile-panel[data-panel="equipment"] .panel-kicker{font-size:10px;letter-spacing:2.5px}.mobile-panel[data-panel="equipment"] .hero-status{min-height:205px}.hero-info .profile-identity strong{font-size:19px}.hero-info .profile-stats{gap:6px;margin-top:11px}.hero-info .profile-stats div{padding:8px 3px}.hero-info .profile-stats span{font-size:8px}.hero-info .profile-stats b{margin-top:3px;font-size:13px}.hero-info .profile-traits{grid-template-columns:35px 1fr;gap:6px;margin-top:9px;padding-top:9px}.hero-info .profile-traits>span{padding-top:5px;font-size:9px}.hero-info .profile-traits>div{gap:5px}.hero-info .profile-traits b{padding:5px 7px;border-radius:6px;font-size:10px}
.equipment-notice-dot{position:absolute;z-index:5;top:-4px;right:-4px;width:12px;height:12px;border:2px solid #fff3d5;border-radius:50%;background:#e3413d;box-shadow:0 1px 3px #0008;pointer-events:none}
.equipment-actions{display:grid;grid-template-columns:92px 1fr;gap:7px;margin-top:10px}.equipment-actions .equip-confirm{margin-top:0}.equip-unequip{padding:10px 6px;border:2px solid #897767;border-radius:8px;background:#6b5e55;color:#f1e5d3;font:900 11px inherit;cursor:pointer}.equip-unequip:disabled{border-color:#4d4e4c;background:#343838;color:#737573;cursor:not-allowed}
.game-shell.summon-mode .battlefield{display:none}.game-shell.summon-mode .controls{flex:1;padding:12px}.game-shell.summon-mode .mobile-panel[data-panel="summon"]{height:100%;display:flex;flex-direction:column;overflow:hidden}.summon-banner{flex:0 0 116px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #7d5c26;border-radius:12px;background:#2a3135;color:#fff2c8;text-align:center;box-shadow:inset 0 0 0 2px #aa8240}.summon-banner p{color:#e5b84f;font-size:9px;font-weight:900;letter-spacing:3px}.summon-banner h2{margin:5px 0 3px;font-size:23px}.summon-banner span{color:#bdb5a3;font-size:9px}.mobile-panel[data-panel="summon"] .hero-collection{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(105px,1fr));align-items:center;gap:4px 6px;margin:7px 0;padding:5px 3px}.summon-card{position:relative;min-width:0;width:100%;max-width:72px;height:112px;justify-self:center;border:2px solid #493d2d;border-radius:9px;background:#f3e7c5;text-align:center;box-shadow:0 3px 0 #6e5b3c;overflow:hidden}.summon-card:nth-child(1),.summon-card:nth-child(6){transform:translateY(7px) rotate(-4deg)}.summon-card:nth-child(2),.summon-card:nth-child(9){transform:translateY(-4px) rotate(2deg)}.summon-card:nth-child(3),.summon-card:nth-child(8){transform:translateY(4px) rotate(-1deg)}.summon-card:nth-child(4),.summon-card:nth-child(7){transform:translateY(-6px) rotate(3deg)}.summon-card:nth-child(5),.summon-card:nth-child(10){transform:translateY(6px) rotate(4deg)}.summon-card.card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;border-color:#8b682b;background:#303b42;color:#dcb454;box-shadow:inset 0 0 0 3px #46535a,0 3px 0 #131b20}.summon-card.card-back:before{content:"";position:absolute;inset:6px;border:1px solid #a78545;border-radius:5px}.summon-card.card-back i{font-size:27px;font-style:normal}.summon-card.card-back b{margin-top:5px;font-size:8px;letter-spacing:2px}.summon-card.revealed{display:flex;flex-direction:column;align-items:center;justify-content:center}.summon-card .collection-portrait{height:63px}.summon-card .collection-portrait img{width:60px;height:60px}.summon-card small{color:#8c7344;font-size:8px;font-weight:900}.summon-card>b{font-size:10px}.summon-card em{position:absolute;right:3px;top:3px;padding:2px 3px;border-radius:3px;background:#df493f;color:#fff;font:900 7px inherit}.summon-card.rarity-legendary{border-color:#d99a18;background:#f5df84;box-shadow:0 0 9px #e8b632,0 3px 0 #9a6811}.mobile-panel[data-panel="summon"] .gacha-box{flex:0 0 auto;margin:0;padding:10px 12px}.mobile-panel[data-panel="summon"] .gacha-box>button{margin:7px 0 4px;padding:11px}.mobile-panel[data-panel="summon"] .gacha-box small{font-size:8px}
.mobile-panel[data-panel="summon"] .hero-collection{gap:0;margin:4px 0;padding:7px 1px}.summon-card{max-width:76px;height:116px;border-radius:10px;box-shadow:0 5px 0 #6e5b3c,0 8px 13px #18202755;transform-origin:50% 88%}.summon-card:nth-child(1){z-index:1;transform:translate(6px,15px) rotate(-10deg)}.summon-card:nth-child(2){z-index:2;transform:translate(3px,4px) rotate(-5deg)}.summon-card:nth-child(3){z-index:3;transform:translateY(-2px)}.summon-card:nth-child(4){z-index:2;transform:translate(-3px,4px) rotate(5deg)}.summon-card:nth-child(5){z-index:1;transform:translate(-6px,15px) rotate(10deg)}.summon-card:nth-child(6){z-index:1;transform:translate(6px,11px) rotate(-8deg)}.summon-card:nth-child(7){z-index:2;transform:translate(3px,1px) rotate(-4deg)}.summon-card:nth-child(8){z-index:3;transform:translateY(-4px)}.summon-card:nth-child(9){z-index:2;transform:translate(-3px,1px) rotate(4deg)}.summon-card:nth-child(10){z-index:1;transform:translate(-6px,11px) rotate(8deg)}.summon-card em{z-index:4;left:-14px;right:auto;top:7px;width:48px;padding:3px 0;border:1px solid #ffd08a;border-radius:0;background:#d83f39;color:#fff8da;font:900 8px/1 inherit;letter-spacing:.8px;text-align:center;transform:rotate(-38deg);box-shadow:0 1px 2px #0006}.summon-card.new-hero{box-shadow:0 0 0 2px #e05248,0 5px 0 #8e332e,0 8px 13px #18202766}.summon-card.rarity-legendary.new-hero{box-shadow:0 0 0 2px #fff0a4,0 0 12px #e8b632,0 5px 0 #9a6811}
.mobile-panel[data-panel="summon"] .hero-collection{grid-template-rows:repeat(2,minmax(0,1fr));align-items:stretch;gap:7px;margin:7px 0;padding:0}.mobile-panel[data-panel="summon"] .summon-card{width:100%;max-width:none;height:100%;min-height:112px;max-height:none;transform:none!important;z-index:auto;border-radius:9px}.summon-card .collection-portrait{height:68px}.summon-card .collection-portrait img{width:64px;height:64px}
.mobile-panel[data-panel="summon"] .hero-collection{align-items:center;gap:4px 0;padding:5px 0}.mobile-panel[data-panel="summon"] .summon-card{width:72px;max-width:72px;height:118px;min-height:118px;max-height:118px}.mobile-panel[data-panel="summon"] .summon-card:nth-child(1){transform:translateY(9px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(2){transform:translateY(-3px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(3){transform:translateY(-10px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(4){transform:translateY(-3px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(5){transform:translateY(9px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(6){transform:translateY(-7px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(7){transform:translateY(4px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(8){transform:translateY(10px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(9){transform:translateY(4px)!important}.mobile-panel[data-panel="summon"] .summon-card:nth-child(10){transform:translateY(-7px)!important}
.summon-card.new-hero{overflow:visible;box-shadow:0 5px 0 #6e5b3c,0 8px 13px #18202755}.summon-card.new-hero em{left:50%;right:auto;top:-10px;width:38px;padding:3px 0;border:2px solid #fff0c8;border-radius:9px;background:#d9453f;color:#fff;font:900 8px/1 inherit;letter-spacing:.6px;transform:translateX(-50%);box-shadow:0 2px 3px #0005}.summon-card.rarity-legendary.new-hero{box-shadow:0 0 9px #e8b632,0 3px 0 #9a6811}
.summon-card.revealed{--reveal-delay:0ms;isolation:isolate}.summon-card.revealed:nth-child(1){--reveal-delay:0ms}.summon-card.revealed:nth-child(2){--reveal-delay:55ms}.summon-card.revealed:nth-child(3){--reveal-delay:110ms}.summon-card.revealed:nth-child(4){--reveal-delay:165ms}.summon-card.revealed:nth-child(5){--reveal-delay:220ms}.summon-card.revealed:nth-child(6){--reveal-delay:275ms}.summon-card.revealed:nth-child(7){--reveal-delay:330ms}.summon-card.revealed:nth-child(8){--reveal-delay:385ms}.summon-card.revealed:nth-child(9){--reveal-delay:440ms}.summon-card.revealed:nth-child(10){--reveal-delay:495ms}.summon-card.revealed:before{content:"✦";position:absolute;z-index:8;inset:-2px;border:2px solid #8b682b;border-radius:9px;background:#303b42;color:#dcb454;display:grid;place-items:center;font-size:27px;backface-visibility:hidden;transform-origin:center;animation:summonCardFlip .34s ease-in both;animation-delay:var(--reveal-delay)}.summon-card.revealed>*{animation:summonResultShow .18s ease-out both;animation-delay:calc(var(--reveal-delay) + 230ms)}@keyframes summonCardFlip{0%,18%{transform:perspective(300px) rotateY(0);opacity:1}72%{transform:perspective(300px) rotateY(88deg);opacity:1}73%,100%{transform:perspective(300px) rotateY(90deg);opacity:0;visibility:hidden}}@keyframes summonResultShow{0%{opacity:0}100%{opacity:1}}
.mobile-panel[data-panel="summon"] .summon-card{box-shadow:0 2px 5px #18202745}.mobile-panel[data-panel="summon"] .summon-card.card-back{box-shadow:inset 0 0 0 2px #46535a,0 2px 5px #131b2055}.mobile-panel[data-panel="summon"] .summon-card.new-hero{box-shadow:0 2px 5px #18202745}.mobile-panel[data-panel="summon"] .summon-card.rarity-legendary,.mobile-panel[data-panel="summon"] .summon-card.rarity-legendary.new-hero{box-shadow:0 0 7px #e8b63299,0 2px 4px #5e461f55}
.summon-card.new-hero em{top:-10px;width:24px;padding:3px 0;border-radius:10px;font-family:Arial,sans-serif;font-size:11px;font-style:normal;font-weight:1000;line-height:1;letter-spacing:0;transform:translateX(-50%)}
.mobile-panel[data-panel="summon"] .hero-collection.single-result{grid-template-columns:1fr;grid-template-rows:1fr;place-items:center}.mobile-panel[data-panel="summon"] .hero-collection.single-result .summon-card{width:92px;max-width:92px;height:146px;min-height:146px;transform:none!important}.mobile-panel[data-panel="summon"] .hero-collection.single-result .collection-portrait{height:88px}.mobile-panel[data-panel="summon"] .hero-collection.single-result .collection-portrait img{width:82px;height:82px}.summon-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.mobile-panel[data-panel="summon"] .summon-actions button{min-width:0;padding:11px 5px;border:2px solid #26313a;border-radius:9px;background:#d9913d;color:#fff;font:900 11px inherit;cursor:pointer}.mobile-panel[data-panel="summon"] .summon-actions button b{color:#fff3b5}.mobile-panel[data-panel="summon"] .summon-actions button:disabled{background:#777;color:#bbb;cursor:not-allowed}
.hero-growth{margin-top:9px;padding-top:8px;border-top:1px solid #51493d}.growth-head,.fragment-head{display:flex;align-items:center;justify-content:space-between;gap:5px}.growth-head>span,.fragment-head>span{color:#a69c8a;font-size:8px;font-weight:900}.growth-head>strong{display:flex;gap:1px;color:#625b4f;font-size:12px;line-height:1}.growth-head>strong i{font-style:normal}.growth-head>strong i.filled{color:#f1c34e;text-shadow:0 0 4px #d99424}.growth-head>b,.fragment-head>b{color:#f0d28a;font-size:9px}.fragment-head{margin-top:8px}.fragment-bar{height:6px;margin-top:4px;border:1px solid #574d3e;border-radius:4px;background:#171b1d;overflow:hidden}.fragment-bar i{display:block;height:100%;background:#d49a35}.star-milestones{display:flex;gap:4px;margin-top:7px}.star-milestones span{flex:1;padding:4px 2px;border:1px solid #4e4b43;border-radius:4px;background:#292d2e;color:#6f6d66;font-size:7px;text-align:center}.star-milestones span.active{border-color:#9b7835;background:#3b3020;color:#e9c66e}.locked-growth-message{padding:8px;border:1px solid #55534d;border-radius:6px;background:#222627;text-align:center}.locked-growth-message b,.locked-growth-message span{display:block}.locked-growth-message b{color:#c7c5bd;font-size:10px}.locked-growth-message span{margin-top:3px;color:#85847e;font-size:7px}
.mobile-panel[data-panel="equipment"] .hero-status{min-height:238px}.hero-loadout:not(.locked-hero-preview) .loadout-hero{top:34%}.hero-loadout .equipped-slots{inset:auto;left:50%;top:10px;width:174px;height:112px;transform:translateX(-50%);grid-template-columns:48px 48px;grid-template-rows:48px 48px;justify-content:space-between;align-content:space-between}.hero-loadout>.hero-growth{position:absolute;z-index:4;left:8px;right:8px;bottom:7px;margin:0;padding:7px;border:1px solid #51493d;border-radius:7px;background:#1d2224dd}.hero-loadout>.hero-growth .fragment-head{margin-top:5px}.hero-loadout>.hero-growth .star-milestones{margin-top:5px}.hero-loadout>.hero-growth .star-milestones span{padding:3px 2px}.hero-info>.hero-growth{margin-top:9px}
.hero-loadout>.hero-growth{padding:0 2px;border:0;border-radius:0;background:transparent}.hero-info .profile-traits{margin-top:10px;padding-top:0;border-top:0}.locked-hero-preview .loadout-hero{top:42%}.locked-hero-preview .profile-lock{inset:9px 0 auto;flex-direction:row;gap:7px;height:28px}.locked-hero-preview>.hero-growth{bottom:13px}.locked-growth-message{padding:0;border:0;border-radius:0;background:transparent}.locked-growth-message b{color:#d7d3c9}.locked-growth-message span{margin-top:4px}.hero-loadout>.hero-growth .growth-head>strong{font-size:13px}.hero-loadout>.hero-growth .fragment-bar{height:7px}
.hero-loadout .loadout-hero,.hero-loadout:not(.locked-hero-preview) .loadout-hero,.locked-hero-preview .loadout-hero{top:42%;width:90px;height:90px}.hero-loadout .equipped-slots{top:20px;width:182px;height:108px}.star-next-effect{display:flex;align-items:center;gap:5px;margin-top:6px;color:#77746c}.star-next-effect span{flex:0 0 auto;padding:3px 5px;border:1px solid #55534d;border-radius:4px;font-size:7px}.star-next-effect b{min-width:0;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.star-next-effect.active{color:#e9c66e}.star-next-effect.active span{border-color:#9b7835;background:#3b3020}.locked-growth-message span{color:#85847e;font-size:8px}
.hero-loadout .equipped-slots{top:46px}.hero-loadout .loadout-hero.warrior-profile{width:82px;height:82px}.hero-info>.star-next-effect{display:grid;grid-template-columns:35px minmax(0,1fr);gap:6px;align-items:center;margin-top:8px}.hero-info>.star-next-effect span{padding:0;border:0;border-radius:0;background:transparent;color:#a69c8a;font-size:9px;font-weight:900}.hero-info>.star-next-effect b{justify-self:start;max-width:100%;padding:5px 7px;border:1px solid #55534d;border-radius:6px;background:#292d2e;color:#77746c;font-size:10px;line-height:1}.hero-info>.star-next-effect.active b{border-color:#8c713c;background:#332a1c;color:#e8c86f}
.bottom-nav button{position:relative}.bottom-nav button.has-notice:after{content:"";position:absolute;top:8px;right:calc(50% - 24px);width:11px;height:11px;border:2px solid #202c34;border-radius:50%;background:#e3413d;box-shadow:0 1px 3px #0008}
.bottom-nav button.content-locked{filter:grayscale(.8);opacity:.48}
.equipped-slots [data-equipment-slot]{cursor:pointer;transition:transform .12s,filter .12s}.equipped-slots [data-equipment-slot]:hover{filter:brightness(1.12)}.equipment-modal[hidden]{display:none}.equipment-modal{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:14px;background:#0a0d0fca}.equipment-dialog{width:min(430px,100%);max-height:min(720px,92dvh);display:flex;flex-direction:column;padding:12px;border:3px solid #8e7445;border-radius:14px;background:#202528;color:#eee1c2;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327}.equipment-dialog>header{height:auto;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 0 9px;border:0;border-bottom:1px solid #5d503b;background:none}.equipment-dialog>header p{font-size:7px;letter-spacing:2px;color:#c69a46}.equipment-dialog>header h2{margin-top:2px;font-size:17px}.equipment-dialog>header button{width:31px;height:31px;border:1px solid #776546;border-radius:50%;background:#15191b;color:#e7d5ae;font-size:21px;cursor:pointer}.equipment-comparison{display:grid;grid-template-columns:1fr 20px 1fr;gap:5px;align-items:center;margin-top:10px}.equipment-comparison>i{text-align:center;color:#d3a746;font-style:normal;font-size:18px}.compare-card{min-width:0;min-height:96px;padding:6px;border:2px solid #72644d;border-radius:9px;background:#2a2f31;text-align:center}.compare-card>span,.compare-card>b{display:block}.compare-card>span{font-size:8px;color:#aaa08d}.compare-card>.equipment-icon{width:49px;height:49px}.compare-card>b{font-size:9px;color:#f1dfb9}.compare-card.rare{border-color:#4f8fc3;background:#23333e}.compare-card.epic{border-color:#8c54c7;background:#30243b}.compare-card.empty .equipment-icon{filter:grayscale(1);opacity:.3}.modal-list-title{margin:12px 0 6px;font-size:9px;color:#cbb17b}.modal-equipment-list{min-height:76px;max-height:265px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-content:start;gap:5px;overflow-y:auto}.modal-equipment-list .equipment-item{min-height:69px;background:#eee8d8}.modal-equipment-list .equipment-item.selected{border-color:#ffd567;box-shadow:inset 0 0 0 2px #604a1f,0 0 7px #e8b83d;transform:translateY(-1px)}.modal-equipment-list .inventory-empty{color:#a89e8a;border-color:#665b49}.equip-confirm{flex:0 0 auto;width:100%;margin-top:10px;padding:10px;border:2px solid #b28a3e;border-radius:8px;background:#c28a30;color:#fff7de;font:900 12px inherit;cursor:pointer}.equip-confirm:disabled{border-color:#56534c;background:#3b3e3e;color:#888;cursor:not-allowed}
.star-up-modal{position:fixed;z-index:1100;inset:0;display:grid;place-items:center;padding:18px;background:#12191fd9}.star-up-modal[hidden]{display:none}.star-up-dialog{width:min(360px,100%);padding:20px 16px 16px;border:3px solid #e4b94f;border-radius:14px;background:#242b30;color:#fff4d0;text-align:center;box-shadow:0 18px 45px #000b,inset 0 0 0 2px #6c5730}.star-up-dialog>p{color:#d8b65f;font-size:8px;font-weight:900;letter-spacing:2px}.star-up-dialog>h2{margin:4px 0 14px;color:#ffd75e;font-size:24px}.star-up-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(82px,1fr));gap:8px}.star-up-hero{padding:8px 4px;border:1px solid #655c4c;border-radius:9px;background:#171c1f}.star-up-hero img{display:block;width:62px;height:62px;margin:auto;object-fit:contain}.star-up-hero b,.star-up-hero span{display:block}.star-up-hero b{margin-top:3px;font-size:11px}.star-up-hero span{margin-top:4px;color:#ffd75e;font-size:15px;font-weight:900;letter-spacing:1px}.star-up-dialog>button{width:100%;margin-top:14px;padding:10px;border:2px solid #7b5a1d;border-radius:8px;background:#d69a32;color:#fff8dd;font:900 12px inherit;cursor:pointer}
.projectile{width:26px;height:26px;border-radius:0;background-color:transparent;background-image:url("assets/effects/projectiles-v2.png");background-size:300% 300%;background-repeat:no-repeat;image-rendering:pixelated;box-shadow:none;transition:transform .24s linear}.projectile-arrow{background-position:0 0}.projectile-bolt{background-position:50% 0}.projectile-arcane{background-position:100% 0}.projectile-fire{background-position:0 50%}.projectile-heal-single{background-position:50% 50%}.projectile-heal-group{background-position:100% 50%}.projectile-holy{background-position:0 100%}.projectile-enemy-arrow{background-position:50% 100%}.projectile-enemy-magic{background-position:100% 100%}
.melee-effect{position:absolute;display:block;background-image:url("assets/effects/melee-flashes-v1.png");background-size:200% 100%;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none;transform-origin:50% 50%}.melee-slash{width:64px;height:64px;background-position:left center;filter:drop-shadow(0 0 2px #dcecff);animation:meleeFlash .12s linear forwards}.holy-slash{width:74px;height:74px;background-position:right center;filter:drop-shadow(0 0 4px #ffe06c);animation:holyFlash .15s linear forwards}@keyframes meleeFlash{0%{transform:scale(.94);opacity:0}18%,62%{transform:scale(1);opacity:1}100%{transform:scale(1.02);opacity:0}}@keyframes holyFlash{0%{transform:scale(.95);opacity:0}15%,66%{transform:scale(1);opacity:1}100%{transform:scale(1.02);opacity:0}}
.boss-melee-slash{width:76px;height:76px;background-position:left center;filter:drop-shadow(0 0 3px #dcecff);animation:bossMeleeFlash .13s linear forwards}@keyframes bossMeleeFlash{0%{transform:scaleX(-1) scale(.92);opacity:0}18%,62%{transform:scaleX(-1) scale(1);opacity:1}100%{transform:scaleX(-1) scale(1.02);opacity:0}}
.enemy.midboss.attacking{animation:bossMeleeAttack .22s ease-out}.enemy.midboss.attacking:after{content:"";position:absolute;z-index:2;right:34px;bottom:1px;width:76px;height:76px;background-image:url("assets/effects/melee-flashes-v1.png");background-size:200% 100%;background-position:left center;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 0 3px #dcecff);pointer-events:none;animation:bossMeleeFlash .13s linear forwards}@keyframes bossMeleeAttack{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(calc(-50% + 3px)) rotate(5deg)}58%{transform:translateX(calc(-50% - 12px)) rotate(-9deg)}78%{transform:translateX(calc(-50% - 7px)) rotate(-4deg)}}
.damage-number{position:absolute;z-index:900;min-width:28px;transform:translateX(-50%);color:#fff;font:900 12px/1 "Malgun Gothic",system-ui,sans-serif;text-align:center;letter-spacing:.2px;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111;pointer-events:none;animation:damageFloat .48s ease-out forwards}@keyframes damageFloat{0%{transform:translate(-50%,3px) scale(.82);opacity:0}18%{transform:translate(-50%,0) scale(1.08);opacity:1}72%{transform:translate(-50%,-7px) scale(1);opacity:1}100%{transform:translate(-50%,-12px) scale(.96);opacity:0}}
.banner{white-space:nowrap}.banner.show.persistent{transform:translate(-50%,-50%) scale(1);animation:none}
.idle-chest{position:absolute;z-index:18;left:14px;bottom:12px;width:58px;height:52px;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 3px 1px #0006);transition:transform .15s}.idle-chest:hover{transform:translateY(-2px)}.chest-lid,.chest-body{position:absolute;left:7px;right:7px;border:3px solid #3b2717;background:#c9852f}.chest-lid{top:7px;height:17px;border-radius:9px 9px 2px 2px;box-shadow:inset 0 4px #f2b84c}.chest-body{top:23px;height:24px;border-radius:2px 2px 7px 7px;box-shadow:inset 0 -5px #89511f}.chest-body:after{content:"";position:absolute;left:50%;top:-5px;width:10px;height:14px;transform:translateX(-50%);border:2px solid #563718;border-radius:2px;background:#ffd45c}.idle-chest b{position:absolute;right:-3px;top:-1px;min-width:28px;padding:3px 5px;border:2px solid #fff;border-radius:9px;background:#d74b3f;color:#fff;font-size:8px;line-height:1;white-space:nowrap}.idle-chest.ready{animation:chestPulse 1.2s ease-in-out infinite}@keyframes chestPulse{50%{filter:drop-shadow(0 0 7px #ffd45c);transform:translateY(-2px)}}
.idle-reward-modal{position:fixed;z-index:1200;inset:0;display:grid;place-items:center;padding:18px;background:#10171dcc;opacity:1;transition:opacity .2s ease}.idle-reward-modal.opening,.idle-reward-modal.closing{opacity:0}.idle-reward-modal[hidden]{display:none}.idle-reward-dialog{width:min(390px,100%);max-height:82dvh;padding:18px 15px 14px;border:3px solid #d8a13c;border-radius:15px;background:#242c31;color:#fff4d2;text-align:center;box-shadow:0 18px 50px #000b,inset 0 0 0 2px #5f4827;transform:translateY(0) scale(1);transition:transform .2s ease}.idle-reward-modal.opening .idle-reward-dialog,.idle-reward-modal.closing .idle-reward-dialog{transform:translateY(8px) scale(.98)}.idle-reward-dialog>p{color:#dba949;font-size:8px;font-weight:900;letter-spacing:2px}.idle-reward-dialog>h2{margin:3px 0 11px;font-size:23px}.idle-time{padding:9px;border-radius:8px;background:#171d21;color:#c9b891;font-size:11px}.idle-time b{margin-left:6px;color:#ffd45c;font-size:15px}.idle-summary{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin:8px 0}.idle-summary span{padding:8px;border:1px solid #66563a;border-radius:8px;background:#30383b;font-size:10px}.idle-summary b{display:block;margin-top:2px;color:#ffd45c;font-size:15px}.idle-item-list{max-height:230px;display:grid;grid-template-columns:repeat(4,1fr);gap:6px;overflow-y:auto}.idle-loot{min-width:0;padding:6px 3px;border:2px solid #81745c;border-radius:8px;background:#ede7d8;color:#2c3032}.idle-loot.rare{border-color:#4d94cf;background:#deeff9}.idle-loot.epic{border-color:#8b59ca;background:#ece0fa}.idle-loot img{width:38px;height:38px}.idle-loot b,.idle-loot small{display:block}.idle-loot b{font-size:8px}.idle-loot small{font-size:7px;color:#685e4c}.idle-empty{grid-column:1/-1;padding:22px;color:#9e947e;font-size:10px}.idle-reward-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:7px;margin-top:12px}.idle-reward-actions button{padding:10px;border:2px solid #6e5a36;border-radius:8px;background:#3a4144;color:#ddd0b2;font-weight:900;cursor:pointer}.idle-reward-actions #claimIdleReward{border-color:#a87425;background:#d4932d;color:#fff8df}.idle-reward-actions #claimIdleReward:disabled{border-color:#555;background:#555;color:#999;cursor:not-allowed}
.idle-chest b{top:auto;bottom:-3px}
.hero-info .profile-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.hero-info .profile-stats div{min-width:0;padding:6px 1px}.hero-info .profile-stats span{white-space:nowrap;font-size:7px}.hero-info .profile-stats b{font-size:11px}.hero-info .profile-stats .trait-stat{border-color:#8c713c;background:#332a1c}.hero-info .profile-stats .trait-stat b{color:#e8c86f}.profile-fixed-rules{display:flex;align-items:center;flex-wrap:wrap;gap:4px;margin-top:6px;color:#8f897d;font-size:7px}.profile-fixed-rules>span{margin-right:auto}.profile-fixed-rules b{padding:2px 4px;border:1px solid #484743;border-radius:4px;color:#aaa49a;font-size:7px;white-space:nowrap}.damage-number.critical{color:#ffd65a;font-size:15px;text-shadow:-1px -1px 0 #4a2700,1px -1px 0 #4a2700,-1px 1px 0 #4a2700,1px 1px 0 #4a2700}
.equipment-item.uncommon,.equipped-slots div.uncommon,.idle-loot.uncommon,.compare-card.uncommon{border-color:#55a962;background:#e7f6e7}.equipment-item.legendary,.equipped-slots div.legendary,.idle-loot.legendary,.compare-card.legendary{border-color:#d98720;background:#fff0cf;box-shadow:inset 0 0 0 1px #ffd271,0 0 6px #e6a33f88}.equipment-item.legendary>b,.idle-loot.legendary b{color:#a9540b}
.equipment-item>em,.idle-loot>em,.compare-card>small{display:block;margin-top:3px;color:#665b49;font-size:6px;font-style:normal;line-height:1.35}.modal-equipment-list .equipment-item{min-height:78px}.compare-card{min-height:118px}.compare-card>small{color:#cfc2a7}.idle-loot>em{color:#6f634d}
.mobile-panel[data-panel="equipment"] .hero-status{min-height:320px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}.hero-loadout .equipped-slots{top:34px;width:196px;height:174px;grid-template-columns:48px 48px;grid-template-rows:repeat(3,48px);align-content:space-between}.hero-loadout .loadout-hero,.hero-loadout:not(.locked-hero-preview) .loadout-hero{top:38%;width:86px;height:86px}.hero-info .profile-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.hero-info .profile-stats div{padding:9px 2px}.hero-info .profile-stats span{font-size:8px}.hero-info .profile-stats b{margin-top:3px;font-size:13px}.profile-fixed-rules{margin-top:10px;gap:6px}.profile-fixed-rules>span{width:100%;margin:0 0 2px}.profile-fixed-rules b{padding:4px 6px;font-size:8px}.hero-info>.star-next-effect{margin-top:10px}.hero-loadout>.hero-growth{bottom:8px}
.hero-loadout .equipped-slots,.locked-hero-preview .equipped-slots{top:42px;height:166px}.hero-loadout .loadout-hero,.hero-loadout:not(.locked-hero-preview) .loadout-hero,.locked-hero-preview .loadout-hero{top:45%;width:86px;height:86px}.locked-hero-preview .profile-lock{padding-top:18px}
.bottom-nav{grid-template-columns:repeat(5,1fr)}.bottom-nav button{min-width:0;padding:4px 1px;font-size:9px}.bottom-nav button span{font-size:17px}.game-shell:is(.event-mode,.quest-mode) .battlefield,.game-shell.bag-mode .battlefield{display:none}.game-shell:is(.event-mode,.quest-mode) .controls,.game-shell.bag-mode .controls{flex:1;padding:12px}.utility-panel.active{height:100%;display:flex;flex-direction:column}.utility-banner{flex:0 0 116px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #755d33;border-radius:12px;background:#2a3135;color:#fff2c8;text-align:center;box-shadow:inset 0 0 0 2px #8f7548}.utility-banner p{color:#e5b84f;font-size:9px;font-weight:900;letter-spacing:3px}.utility-banner h2{margin:5px 0 3px;font-size:23px}.utility-banner span{color:#bdb5a3;font-size:9px}.event-banner{background:#343047}.bag-banner{background:#29383b}.utility-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#84785f;text-align:center}.utility-empty>span{font-size:38px;color:#c49a43}.utility-empty strong{margin-top:8px;color:#26313a;font-size:17px}.utility-empty p{max-width:260px;margin-top:7px;font-size:10px;line-height:1.55}
.bag-head{display:flex;align-items:end;justify-content:space-between;padding:4px 3px 10px}.bag-head p{color:#a47422;font-size:8px;font-weight:900;letter-spacing:2px}.bag-head h2{margin-top:2px;color:#26313a;font-size:22px}.bag-head>span{padding-bottom:2px;color:#8b7b5e;font-size:9px}.bag-tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:2px solid #95835e}.bag-tabs button{position:relative;padding:11px 4px;border:0;background:#e3d19d;color:#817252;font:900 12px inherit;cursor:pointer}.bag-tabs button:after{content:"";position:absolute;left:18%;right:18%;bottom:-2px;height:3px;background:transparent}.bag-tabs button.active{background:#fff6d9;color:#26313a}.bag-tabs button.active:after{background:#d49b32}.bag-pages{flex:1;min-height:0;background:#fff6d9}.bag-page{display:none;height:100%;padding:10px}.bag-page.active{display:flex}.bag-page .utility-empty{width:100%;border:2px dashed #c2ae7e;border-radius:10px;background:#fffaf0}
.mobile-panel[data-panel="bag"] .bag-title{align-items:center;margin:0 3px 9px}.mobile-panel[data-panel="bag"] .bag-title .panel-kicker{font-size:10px;letter-spacing:2.5px}.mobile-panel[data-panel="bag"] .bag-title>p{color:#8b7b5e;font-size:9px}
.bag-tabs{gap:7px;padding:0 3px 9px;border-bottom:0;background:transparent}.bag-tabs button{padding:10px 4px;border:2px solid #b9a269;border-radius:9px;background:#fff9e3;color:#786b50;box-shadow:inset 0 0 0 1px #fff4ce}.bag-tabs button:after{display:none}.bag-tabs button.active{border-color:#d4a236;background:#ffe596;color:#26313a;box-shadow:inset 0 0 0 2px #fff2b8}.bag-pages{border:2px solid #b9a269;border-radius:10px;overflow:hidden}
.bag-pages{border:0;border-radius:0;background:transparent;overflow-y:auto}.bag-page{padding:3px;background:transparent}.bag-page.active{display:block}.bag-inventory-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-content:start}.bag-slot{position:relative;aspect-ratio:1;border:2px solid #a99a79;border-radius:8px;background:#e6ddc7;box-shadow:inset 0 0 0 2px #f3ecd9}.bag-slot.filled{cursor:pointer}.bag-slot.uncommon{border-color:#55a962}.bag-slot.rare{border-color:#4f8fc3}.bag-slot.epic{border-color:#8c54c7}.bag-slot.legendary{border-color:#d98720;box-shadow:inset 0 0 0 2px #ffe7a6}.bag-slot .equipment-icon{position:absolute;left:50%;top:50%;width:78%;height:78%;transform:translate(-50%,-50%);object-fit:contain}.bag-slot .weapon-bow{transform:translate(-50%,-50%) rotate(-45deg) scale(.78)}
.modal-equipment-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.modal-equipment-list .bag-slot{width:100%;min-height:0}.modal-equipment-list .bag-slot.selected{border-color:#ffd567;box-shadow:inset 0 0 0 2px #604a1f,0 0 8px #e8b83d;transform:translateY(-1px)}
.bag-slot.selected{border-color:#d65a4d;box-shadow:inset 0 0 0 2px #fff0ba,0 0 0 2px #d65a4d}.bag-toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding:8px 3px 0;border-top:1px solid #c8b889}.bag-toolbar>strong{color:#655b48;font-size:11px}.bag-toolbar>strong b{color:#bd7916;font-size:15px}.bag-toolbar>div{display:flex;gap:6px}.bag-toolbar button{padding:7px 10px;border:2px solid #786843;border-radius:8px;background:#fff8df;color:#574a34;font:900 9px inherit;cursor:pointer}.bag-toolbar button:last-child{border-color:#995349;background:#b86455;color:#fff}.bag-toolbar button:disabled{opacity:.4;cursor:not-allowed}
.bag-pages{scrollbar-width:none;-ms-overflow-style:none}.bag-pages::-webkit-scrollbar{display:none;width:0;height:0}
.bag-pages{cursor:grab;user-select:none}.bag-pages.dragging{cursor:grabbing}.bag-pages img{pointer-events:none;-webkit-user-drag:none}
.equipment-icon.weapon-bow{transform:rotate(-45deg) scale(.78)}.equipped-slots .equipment-icon.weapon-bow{transform:translateX(-50%) rotate(-45deg) scale(.78)}.bag-slot .equipment-icon.weapon-bow{transform:translate(-50%,-50%) rotate(-45deg) scale(.78)}
.bag-detail-modal{position:fixed;z-index:1300;inset:0;display:grid;place-items:center;padding:18px;background:#0a0d0fca}.bag-detail-modal[hidden]{display:none}.bag-detail-dialog{width:min(350px,100%);padding:13px;border:3px solid #8e7445;border-radius:14px;background:#202528;color:#eee1c2;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327}.bag-detail-dialog>header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #5d503b}.bag-detail-dialog>header p{color:#c69a46;font-size:8px;font-weight:900;letter-spacing:2px}.bag-detail-dialog>header h2{margin-top:3px;font-size:18px}.bag-detail-dialog>header button{width:31px;height:31px;border:1px solid #776546;border-radius:50%;background:#15191b;color:#e7d5ae;font-size:21px;cursor:pointer}.bag-detail-main{display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:center;margin-top:12px;padding:10px;border:1px solid #5d503b;border-radius:9px;background:#2a2f31}.bag-detail-main>div:first-child{height:76px;display:grid;place-items:center;border:2px solid #76684f;border-radius:9px;background:#eee8d8}.bag-detail-main .equipment-icon{width:64px;height:64px}.bag-detail-main span,.bag-detail-main strong{display:block}.bag-detail-main span{color:#aaa08d;font-size:9px}.bag-detail-main strong{margin-top:6px;color:#f1dfb9;font-size:13px}.bag-detail-options{display:grid;gap:6px;margin-top:10px}.bag-detail-options div{display:flex;align-items:center;justify-content:space-between;padding:8px 9px;border:1px solid #514b40;border-radius:7px;background:#292e30;color:#bdb29d;font-size:9px}.bag-detail-options div b{color:#e9c66e;font-size:11px}.bag-detail-options .no-option{justify-content:center;color:#777}
.bag-detail-dialog>header{width:auto;height:auto;min-height:0;flex:0 0 auto;padding:0 0 10px;border:0;border-bottom:1px solid #5d503b;background:transparent;color:#eee1c2}.bag-detail-dialog>header h2{color:#fff2cf}
.bag-detail-sell{width:100%;margin-top:12px;padding:10px;border:2px solid #8f4439;border-radius:8px;background:#a65345;color:#fff4df;font:900 12px inherit;cursor:pointer}
.bulk-sell-modal{position:fixed;z-index:1350;inset:0;display:grid;place-items:center;padding:18px;background:#0a0d0fca}.bulk-sell-modal[hidden]{display:none}.bulk-sell-dialog{width:min(350px,100%);padding:13px;border:3px solid #8e7445;border-radius:14px;background:#202528;color:#eee1c2;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327}.bulk-sell-dialog>header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #5d503b}.bulk-sell-dialog>header p{color:#c69a46;font-size:8px;font-weight:900;letter-spacing:2px}.bulk-sell-dialog>header h2{margin-top:3px;color:#fff2cf;font-size:18px}.bulk-sell-dialog>header button{width:31px;height:31px;border:1px solid #776546;border-radius:50%;background:#15191b;color:#e7d5ae;font-size:21px;cursor:pointer}.bulk-sell-guide{margin:12px 0 8px;color:#bdb29d;font-size:10px}.bulk-rarity-options{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.bulk-rarity-options button{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 4px;border:2px solid #5f5b52;border-radius:8px;background:#292e30;color:#8d897f;font:900 11px inherit;cursor:pointer}.bulk-rarity-options button i{width:13px;height:13px;border:2px solid #777168;border-radius:3px;background:#1e2224}.bulk-rarity-options button.selected{color:#fff2cf}.bulk-rarity-options button.common.selected{border-color:#aaa28e}.bulk-rarity-options button.uncommon.selected{border-color:#65a36f;background:#24372a}.bulk-rarity-options button.rare.selected{border-color:#5598ca;background:#23333e}.bulk-rarity-options button.selected i{border-color:#d8b65f;background:#d8b65f;box-shadow:inset 0 0 0 3px #292e30}.bulk-sell-summary{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:10px}.bulk-sell-summary span{padding:9px;border:1px solid #514b40;border-radius:7px;background:#292e30;color:#aaa08d;font-size:9px;text-align:center}.bulk-sell-summary b{display:block;margin-top:3px;color:#e9c66e;font-size:13px}.bulk-sell-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:7px;margin-top:11px}.bulk-sell-actions button{padding:10px;border:2px solid #625a4a;border-radius:8px;background:#3a4144;color:#ddd0b2;font:900 11px inherit;cursor:pointer}.bulk-sell-actions #confirmBulkSell{border-color:#8f4439;background:#a65345;color:#fff4df}.bulk-sell-actions #confirmBulkSell:disabled{border-color:#555;background:#555;color:#999;cursor:not-allowed}
.equipment-dialog>header,.bag-detail-dialog>header,.bulk-sell-dialog>header{width:auto;height:auto;min-height:0;flex:0 0 auto;padding:0 0 10px;border:0;border-bottom:1px solid #5d503b;background:#202528;color:#eee1c2}.equipment-dialog>header h2,.bag-detail-dialog>header h2,.bulk-sell-dialog>header h2{color:#fff2cf}
.bulk-rarity-options{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.bulk-rarity-options button{gap:4px;padding:10px 2px;font-size:9px}.bulk-rarity-options button i{width:11px;height:11px}.bulk-rarity-options button.epic.selected{border-color:#945dca;background:#30243b}.bulk-rarity-options button.legendary.selected{border-color:#c2933f;background:#3b3020}
.bulk-rarity-options button{display:block;padding:11px 2px;opacity:.48}.bulk-rarity-options button.selected{opacity:1}.bulk-rarity-options button i{display:none}
.panel-header{height:34px;display:flex;align-items:center;justify-content:space-between;margin:0 0 8px;padding:0 3px 7px;border-bottom:1px solid #c4af7d}.panel-header p{color:#8d681d;font-size:10px;font-weight:1000;letter-spacing:2.5px;line-height:1}.premium-wallet{display:flex;align-items:center;gap:4px;min-width:58px;justify-content:flex-end;color:#26313a;font-size:11px;font-weight:1000}.premium-wallet i{color:#40aee8;font-size:14px;font-style:normal;filter:drop-shadow(0 1px 0 #19668e)}.premium-wallet b{color:#26313a;font-size:12px}.panel-sub-info{margin:-3px 3px 6px;color:#8b7b5e;font-size:9px;text-align:right}.mobile-panel[data-panel="battle"] .battle-menu-head{min-height:28px}.game-shell.summon-mode .mobile-panel[data-panel="summon"] .panel-header{flex:0 0 34px}.game-shell.summon-mode .summon-banner{flex-basis:84px}.game-shell:is(.event-mode,.quest-mode) .mobile-panel[data-panel="event"] .panel-header,.game-shell.bag-mode .mobile-panel[data-panel="bag"] .panel-header,.game-shell.equipment-mode .mobile-panel[data-panel="equipment"] .panel-header{position:sticky;z-index:5;top:0;background:#f8e9b8}.mobile-panel[data-panel="equipment"] .hero-status{margin-top:0}
.mobile-panel[data-panel="event"]{min-height:0;overflow:hidden}.event-feature{position:relative;flex:0 0 43%;min-height:250px;overflow:hidden;display:flex;align-items:flex-end;padding:22px;border-radius:14px;background:linear-gradient(145deg,#263d50 0%,#3d3151 55%,#7f4e48 100%);color:#fff3d2;box-shadow:inset 0 0 0 2px #9d7c48}.event-feature:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 78% 35%,#ffd36955 0 8%,transparent 9%),radial-gradient(circle at 74% 40%,#fff1b822 0 23%,transparent 24%);pointer-events:none}.event-feature-copy{position:relative;z-index:2;max-width:72%}.event-feature small{color:#edc15c;font-size:8px;font-weight:1000;letter-spacing:2.5px}.event-feature h2{margin:7px 0 5px;font-size:23px;line-height:1.15}.event-feature p{max-width:225px;color:#ddd1b9;font-size:9px;line-height:1.5}.event-feature button{margin-top:13px;padding:7px 13px;border:1px solid #e1b651;border-radius:6px;background:#d39a38;color:#fff8e5;font:1000 9px inherit;cursor:pointer}.event-feature-mark{position:absolute;right:25px;top:50%;transform:translateY(-50%);color:#ffd568;font-size:72px;line-height:1;text-shadow:0 5px 0 #1c243188}.event-list-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:13px 2px 8px;color:#4e4432}.event-list-head strong{font-size:11px}.event-list-head span{font-size:8px;color:#96845f}.event-card-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}.event-card-scroll::-webkit-scrollbar{display:none}.event-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:1px 1px 12px}.event-card{position:relative;min-width:0;aspect-ratio:.82;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 3px;border:2px solid #aa9871;border-radius:9px;background:#e8dec4;color:#504735;font-family:inherit;cursor:pointer;box-shadow:none}.event-card i{display:grid;place-items:center;width:42px;height:42px;margin-bottom:7px;border-radius:8px;background:#2e3940;color:#edbf55;font-size:22px;font-style:normal}.event-card strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.event-card span{margin-top:4px;color:#a06d27;font-size:7px;font-weight:1000}.event-card.selected{box-shadow:none}.event-card:nth-child(2n) i{background:#493c51}.event-card:nth-child(3n) i{background:#4a3b33}.event-card:last-child{filter:grayscale(.6);opacity:.65}
.controls,.game-shell.summon-mode .controls,.game-shell:is(.event-mode,.quest-mode) .controls,.game-shell.equipment-mode .controls,.game-shell.bag-mode .controls{padding:12px}.mobile-panel[data-panel="equipment"]{scrollbar-width:none}.mobile-panel[data-panel="equipment"]::-webkit-scrollbar{display:none}
.panel-header{margin-bottom:8px;padding-bottom:0;border-bottom:0}.panel-header+*{margin-top:0}.panel-sub-info{margin:0 3px 6px}.mobile-panel[data-panel="bag"] .bag-tabs{margin-top:0}.utility-banner,.summon-banner,.battle-menu-head,.hero-status,.bag-tabs{scroll-margin-top:0}
.battle-deck-heading{display:flex;align-items:center;gap:7px}.battle-deck-heading button{display:grid;place-items:center;width:27px;height:27px;padding:0;border:1px solid #a98945;border-radius:6px;background:#fff4cd;cursor:pointer}.battle-deck-heading button img{display:block;width:17px;height:17px}.deck-empty{display:flex;align-items:center;justify-content:center;background:#ede1ba!important;color:#b9a979!important;border-style:dashed!important}.deck-empty span{font-size:25px;font-weight:700}.deck-edit-modal[hidden]{display:none}.deck-edit-modal{position:fixed;z-index:1600;inset:0;display:flex;align-items:center;justify-content:center;padding:16px;background:#080b0dcc}.deck-edit-dialog{width:min(410px,100%);max-height:min(720px,92dvh);overflow:hidden;border:3px solid #8e7747;border-radius:17px;background:#1f2529;color:#f6edcf;box-shadow:0 14px 38px #0009;padding:15px}.deck-edit-dialog>header{display:flex;align-items:center;justify-content:space-between;padding-bottom:11px;border-bottom:1px solid #665b43}.deck-edit-dialog>header p{margin:0 0 4px;color:#d5ad50;font-size:8px;font-weight:1000;letter-spacing:2px}.deck-edit-dialog>header h2{margin:0;font-size:20px}.deck-edit-dialog>header button{width:38px;height:38px;border:1px solid #806b3d;border-radius:50%;background:transparent;color:#f6edcf;font-size:24px;cursor:pointer}.deck-edit-guide{margin:12px 0 8px;color:#c7bd9e;font-size:10px}.deck-selected,.deck-roster{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.deck-selected{padding:8px;border-radius:9px;background:#151a1d}.deck-hero,.deck-selected-empty{position:relative;min-width:0;aspect-ratio:.78;border:1px solid #665f4e;border-radius:7px;background:#30373b;color:#e9dfc1;font-family:inherit;overflow:hidden;cursor:pointer}.deck-hero img{display:block;width:100%;height:68%;object-fit:contain;image-rendering:pixelated}.deck-hero span,.deck-selected-empty span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:8px;font-weight:900}.deck-hero.selected{border-color:#e5ba4d;box-shadow:inset 0 0 0 1px #e5ba4d}.deck-hero>b{position:absolute;top:3px;left:3px;display:grid;place-items:center;width:15px;height:15px;border-radius:50%;background:#d29a37;color:#fff;font-size:8px}.deck-selected-empty{cursor:default;color:#706b5e}.deck-selected-empty b{display:block;font-size:24px;line-height:1}.deck-roster-title{margin:14px 0 7px;color:#d5ad50;font-size:10px;font-weight:1000}.deck-roster{max-height:250px;overflow-y:auto;padding:2px;scrollbar-width:none}.deck-roster::-webkit-scrollbar{display:none}.deck-roster .deck-hero{aspect-ratio:.88}.deck-hero.locked{filter:grayscale(1);opacity:.43;cursor:default}.deck-lock{position:absolute;top:5px;right:5px;color:#d8d4c9;font-style:normal;font-size:11px}.deck-edit-actions{display:grid;grid-template-columns:1fr 1.6fr;gap:8px;margin-top:14px}.deck-edit-actions button{min-height:43px;border:1px solid #776744;border-radius:8px;background:#343a3d;color:#e9dfc1;font-family:inherit;font-weight:1000;cursor:pointer}.deck-edit-actions #applyDeckButton{background:#c69335;color:#fff}.deck-edit-actions #applyDeckButton:disabled{opacity:.35;cursor:default}.deck-hero.legendary{border-color:#d49a28;background:#3e3525}
.deck-edit-modal{opacity:1;transition:opacity .2s ease}.deck-edit-modal.opening,.deck-edit-modal.closing{opacity:0}.deck-edit-dialog{transform:translateY(0) scale(1);transition:transform .2s ease}.deck-edit-modal.opening .deck-edit-dialog,.deck-edit-modal.closing .deck-edit-dialog{transform:translateY(8px) scale(.985)}
.panel-header{height:24px;margin-bottom:6px;padding:0 2px}.panel-header p{font-size:9px;letter-spacing:2px}.premium-wallet{min-width:52px;gap:3px}.premium-wallet i{font-size:12px}.premium-wallet b{font-size:11px}.game-shell.summon-mode .mobile-panel[data-panel="summon"] .panel-header{flex-basis:24px}.game-shell.summon-mode .summon-banner{flex-basis:80px}
.panel-header p,.premium-wallet,.premium-wallet i,.premium-wallet b{height:14px;line-height:14px}.panel-header p{font-size:10px}.premium-wallet{align-items:center}.premium-wallet i,.premium-wallet b{display:block}
.battle-page-header{flex:0 0 45px;padding:12px 12px 6px;border-top:3px solid #26313a;background:#f8e9b8}.battle-page-header .panel-header{height:24px;margin:0;padding:0 2px}.game-shell.summon-mode .battle-page-header,.game-shell:is(.event-mode,.quest-mode) .battle-page-header,.game-shell.equipment-mode .battle-page-header,.game-shell.bag-mode .battle-page-header{display:none}.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .controls{padding-top:6px;border-radius:0}
.game-shell>header{border-bottom-color:#e6d5a9}.controls,.battle-page-header{border-top-color:#e6d5a9}
.premium-wallet{gap:8px}.growth-coin-wallet,.diamond-wallet{display:flex;align-items:center;gap:3px;height:14px;line-height:14px}.growth-coin-wallet img{width:17px;height:17px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 1px 0 #8c5c17)}.growth-coin-wallet b{color:#8d5c10;font-size:11px}.diamond-wallet i,.diamond-wallet b{height:14px;line-height:14px}
.summon-ticket-wallet{gap:0}.summon-ticket-wallet img{display:block;width:30px;height:30px;margin-right:-7px;object-fit:contain;image-rendering:pixelated;transform:rotate(-58deg);filter:drop-shadow(1px 2px 1px #4b321766)}.summon-ticket-wallet b{color:#26313a;font-size:11px}.mobile-panel[data-panel="summon"] .summon-actions button{display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;line-height:1}.summon-actions button b{display:inline-flex;align-items:center;justify-content:center;gap:4px;margin:0;vertical-align:middle}.summon-cost-icon{width:30px;height:30px;flex:0 0 30px;object-fit:contain;image-rendering:pixelated;transform:rotate(-58deg);filter:drop-shadow(1px 2px 1px #4b321766)}
.mobile-panel[data-panel="summon"] .gacha-box{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.summon-banner h2{margin:0 0 7px;line-height:1.1;text-align:center}.summon-banner em{margin:0;padding:0;background:transparent;color:#e9c66e;font-size:8px;font-style:normal;font-weight:900;line-height:1.2;letter-spacing:.15px;text-align:center}.summon-guarantee{display:flex;align-items:center;justify-content:center;margin:0 3px 6px;color:#7d6d50}.summon-guarantee strong{color:#6f6045;font-size:11px;white-space:nowrap}.summon-guarantee strong b{margin:0 3px;color:#d18e1f;font-size:16px;line-height:1}
.premium-wallet i{position:relative;flex:0 0 16px;width:16px;height:14px;font-size:0;filter:drop-shadow(0 1px 0 #0d4d70);clip-path:polygon(25% 0,75% 0,75% 7%,88% 7%,88% 21%,100% 21%,100% 57%,88% 57%,88% 71%,75% 71%,75% 79%,63% 79%,63% 93%,56% 93%,56% 100%,44% 100%,44% 93%,37% 93%,37% 79%,25% 79%,25% 71%,12% 71%,12% 57%,0 57%,0 21%,12% 21%,12% 7%,25% 7%);background:linear-gradient(135deg,#d8f8ff 0 18%,#67d5ff 18% 46%,#1c9ee2 46% 70%,#0870b5 70% 100%)}.premium-wallet i:before{content:"";position:absolute;left:4px;top:2px;width:4px;height:3px;background:#fff}.premium-wallet i:after{content:"";position:absolute;right:3px;bottom:3px;width:4px;height:4px;background:#075f9c}
.idle-item-list{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;align-content:start;padding:3px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;touch-action:pan-y}.idle-item-list::-webkit-scrollbar{display:none;width:0;height:0}.idle-item-list .bag-slot{width:100%;min-width:0}.idle-item-list.dragging{cursor:grabbing;user-select:none}.idle-empty{grid-column:1/-1}
.equipment-dialog .compare-card>small{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 5px;margin-top:5px;font-size:8px;line-height:1.2}.equipment-dialog .compare-card>small i{display:block;min-width:0;padding:2px 1px;border-radius:3px;background:#ffffff0a;color:inherit;font-style:normal;white-space:nowrap}.equipment-dialog .compare-card{min-height:118px}
.equipment-dialog .compare-card>small i:only-child,.equipment-dialog .compare-card>small i:last-child:nth-child(odd){grid-column:1/-1;width:calc(50% - 2.5px);justify-self:center}
.equipment-dialog .compare-card{padding:7px}.compare-item-main{display:grid;grid-template-columns:56px minmax(0,1fr);gap:7px;align-items:center;margin-top:5px;text-align:left}.compare-item-main>div:first-child{height:56px;display:grid;place-items:center;border:2px solid #76684f;border-radius:7px;background:#eee8d8}.compare-item-main .equipment-icon{width:48px;height:48px;object-fit:contain}.compare-item-main .weapon-bow{transform:rotate(-45deg) scale(.78)}.compare-item-main>div:last-child{min-width:0}.compare-item-main small,.compare-item-main b{display:block}.compare-item-main small{color:#aaa08d;font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.compare-item-main b{margin-top:4px;color:#fff0c9;font-size:8px;line-height:1.25}.equipment-dialog .compare-card>.compare-options{margin-top:6px}.equipment-dialog .compare-card.empty .compare-item-main>div:first-child{filter:grayscale(1);opacity:.45}
.equipment-dialog .compare-card,.equipment-dialog .compare-card.common{background:#2a2f31;color:#eee1c2}.equipment-dialog .compare-card.uncommon{background:#24372a}.equipment-dialog .compare-card.rare{background:#23333e}.equipment-dialog .compare-card.epic{background:#30243b}.equipment-dialog .compare-card.legendary{background:#3b3020;box-shadow:inset 0 0 0 1px #6f5425}.equipment-dialog .compare-card>span{color:#bdb39f}.equipment-dialog .compare-card>b{color:#fff0c9}.equipment-dialog .compare-card>small{color:#d4cab5}.equipment-dialog .compare-card.empty{background:#2a2f31}
.equipment-dialog .compare-card{min-height:152px}.compare-item-main{grid-template-columns:72px minmax(0,1fr);gap:9px;min-height:108px}.compare-item-main>div:first-child{height:82px}.compare-item-main .equipment-icon{width:68px;height:68px}.compare-item-info{min-width:0;text-align:left}.compare-item-info>small:first-child{font-size:8px}.compare-item-info>b{margin-top:4px;font-size:9px}.compare-item-info .compare-options{display:grid;grid-template-columns:1fr;gap:2px;margin-top:7px;color:#d4cab5;font-size:7px;line-height:1.15}.compare-item-info .compare-options i{display:block;min-width:0;padding:2px 3px;border-radius:2px;background:#ffffff0a;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equipment-comparison{grid-template-columns:1fr;grid-template-rows:auto 16px auto;gap:3px}.equipment-comparison>i{height:16px;line-height:16px;transform:rotate(90deg)}.equipment-dialog .compare-card{width:100%;min-height:124px}.compare-item-main{grid-template-columns:76px minmax(0,1fr);min-height:86px;margin-top:3px}.compare-item-main>div:first-child{height:76px}.compare-item-main .equipment-icon{width:64px;height:64px}.compare-item-info .compare-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:3px 5px;font-size:8px}.modal-equipment-list{max-height:150px}
.equipment-comparison>i{transform:none;font-size:0}.equipment-comparison>i:before{content:"↓";font-size:18px}
.equipment-dialog .compare-card>span{font-size:9px}.compare-item-info>small:first-child{font-size:9px}.compare-item-info>b{font-size:11px}.compare-item-info .compare-options{font-size:9px;line-height:1.2}.compare-item-info .compare-options i{padding:3px 4px}
.hero-slot-notice{position:absolute;z-index:6;top:4px;right:4px;width:12px;height:12px;border:2px solid #fff3d5;border-radius:50%;background:#e3413d;box-shadow:0 1px 3px #0008;pointer-events:none}
.mobile-panel[data-panel="equipment"] .hero-status{min-height:300px}.hero-info .profile-identity span{display:none}.hero-info .profile-identity{min-height:0}.hero-info .profile-identity>b{margin-top:5px}.hero-loadout .equipped-slots,.locked-hero-preview .equipped-slots{top:48px}.hero-loadout .loadout-hero,.hero-loadout:not(.locked-hero-preview) .loadout-hero,.locked-hero-preview .loadout-hero{top:45%}.mobile-panel[data-panel="equipment"] .equipment-heroes{margin-top:6px}
.hero-info .profile-identity{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center}.hero-info .profile-identity>b{display:block;margin:0;align-self:center}.hero-info .profile-identity>div{min-width:0}
.auto-equip-button{position:absolute;z-index:6;left:50%;top:calc(45% + 48px);width:88px;height:25px;transform:translateX(-50%);border:2px solid #8f7138;border-radius:6px;background:#3a3121;color:#f2cf75;font:900 9px inherit;box-shadow:0 2px 3px #0007;cursor:pointer}.auto-equip-button:hover{filter:brightness(1.12)}
.loadout-actions{position:absolute;z-index:6;left:50%;top:calc(45% + 46px);width:72px;display:grid;gap:3px;transform:translateX(-50%)}.loadout-actions button,.loadout-actions .auto-equip-button{position:static;left:auto;top:auto;width:72px;height:22px;transform:none;border:2px solid #8f7138;border-radius:5px;background:#3a3121;color:#f2cf75;font:900 8px inherit;box-shadow:0 1px 2px #0007;cursor:pointer}.loadout-actions .unequip-all-button{border-color:#6f6759;background:#303437;color:#cfc7b7}.loadout-actions button:hover{filter:brightness(1.12)}
.loadout-actions button,.loadout-actions .auto-equip-button{height:27px;display:flex;align-items:center;justify-content:center;padding:0 3px;font-size:9px;line-height:1}
.hero-art-preview-button{position:absolute;z-index:8;right:14px;top:14px;width:27px;height:27px;padding:0;border:0;background:transparent;box-shadow:none;color:transparent;cursor:pointer}.hero-art-preview-button:before{content:"";position:absolute;left:3px;top:2px;width:13px;height:13px;border:2px solid #f6df96;border-radius:50%;box-shadow:0 1px 2px #000,0 0 3px #d8a83f}.hero-art-preview-button:after{content:"";position:absolute;left:16px;top:16px;width:9px;height:2px;transform:rotate(45deg);transform-origin:left center;border-radius:2px;background:#f6df96;box-shadow:0 1px 2px #000,0 0 2px #d8a83f}.hero-art-preview-button:hover{filter:brightness(1.2)}
.hero-loadout .equipped-slots,.locked-hero-preview .equipped-slots{left:8px;right:18px;width:auto;transform:none}
.hero-loadout .loadout-hero,.hero-loadout:not(.locked-hero-preview) .loadout-hero,.locked-hero-preview .loadout-hero{left:calc(50% - 5px)}
.hero-loadout .loadout-actions{left:calc(50% - 5px)}
.summon-card.equipment-result{background:#eee8d7}.summon-card.equipment-result.uncommon{border-color:#65a66b;background:#e2f0df}.summon-card.equipment-result.rare{border-color:#4e88c7;background:#deebf5}.summon-card.equipment-result.epic{border-color:#9161bd;background:#ece1f5}.summon-card.equipment-result.legendary{border-color:#d8951a;background:#f7e3a5;box-shadow:0 0 7px #e8b63299,0 2px 4px #5e461f55}.summon-equipment-icon{width:64px;height:68px;display:grid;place-items:center}.summon-equipment-icon .equipment-icon{width:54px;height:54px;object-fit:contain;image-rendering:pixelated}.single-result .summon-equipment-icon{width:82px;height:88px}.single-result .summon-equipment-icon .equipment-icon{width:72px;height:72px}.summon-card.equipment-result>b{font-size:10px}
.deck-edit-dialog>header{width:auto!important;height:auto!important;min-height:0!important;padding:0 0 11px!important;border:0!important;border-bottom:1px solid #665b43!important;background:#1f2529!important;color:#f6edcf!important}.deck-edit-dialog>header h2{color:#fff2cf!important}.deck-edit-dialog>header button{background:#15191b!important}.deck-edit-dialog,.deck-selected,.deck-roster,.deck-hero,.deck-selected-empty{color:#f6edcf}.deck-hero,.deck-hero:disabled,.deck-selected-empty,.deck-selected-empty:disabled{background:#30373b!important}.deck-selected{background:#151a1d!important}
.mobile-panel[data-panel="battle"] .deck-empty{border-color:#b9a979!important;cursor:pointer;opacity:1}.mobile-panel[data-panel="battle"] .deck-empty:hover{border-color:#b9a979!important;background:#f4e7bb!important;color:#8f6d2d!important}
.mobile-panel[data-panel="battle"] .card:before{display:none!important}.mobile-panel[data-panel="battle"] .summon-cooldown{left:4px;top:4px;transform:none;min-width:34px;padding:5px 4px;border-radius:12px;background:#172129e8;font-size:11px;line-height:normal;text-align:center}
.battlefield .castle{left:9px;top:9px;width:53px;height:32px;transform:none;border-width:2px;border-radius:7px;flex-direction:row;gap:4px;font-size:10px}.battlefield .castle span{font-size:14px;line-height:1}.battlefield .castle b{font-size:11px}.battlefield .wave-panel{right:9px;top:9px;width:104px;padding:4px;border-width:2px;border-radius:7px;background:#25313ad9}.battlefield .wave-panel>div{position:relative;height:16px;margin:0;background:#111;border-radius:4px;overflow:hidden}.battlefield .wave-panel i{position:absolute;inset:0 auto 0 0}.battlefield .wave-panel span{position:absolute;z-index:1;inset:0;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:900;text-shadow:0 1px #000}
.battlefield .wave-panel{right:12px;top:auto;bottom:13px;width:118px;padding:0;border:0;border-radius:0;background:transparent}.battlefield .wave-panel>div{height:8px;overflow:visible;border:2px solid #26313a;border-radius:6px;background:#172129}.battlefield .wave-panel i{border-radius:4px;background:#e5b83f}.battlefield .wave-panel span{inset:auto 2px 5px auto;display:block;color:#fff;font-size:10px;line-height:1;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
.idle-chest b{right:-5px;top:auto;bottom:3px;min-width:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font:900 13px/1 "Malgun Gothic",system-ui,sans-serif;letter-spacing:.2px;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}.idle-chest.ready{animation:none;filter:drop-shadow(0 0 7px #ffd45c) drop-shadow(0 3px 1px #0006)}.idle-chest.ready .chest-lid,.idle-chest.ready .chest-body{animation:chestPartsPulse 1.2s ease-in-out infinite}@keyframes chestPartsPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.battlefield{background-image:url("assets/battle-background-wide-dirt-v4.png")}
.battlefield[data-region="0"]{background-image:url("assets/battlefields/wind-garden-v1.png")}
.battlefield[data-region="1"]{background-image:url("assets/battlefields/mist-forest-v1.png")}
.battlefield[data-tutorial="true"]{background-image:url("assets/battlefields/tutorial-slime-meadow-v1.png");box-shadow:inset 0 0 55px #7ce8cd22}
.heal-number{position:absolute;z-index:901;min-width:28px;transform:translateX(-50%);color:#68f29a;font:900 12px/1 "Malgun Gothic",system-ui,sans-serif;text-align:center;letter-spacing:.2px;-webkit-text-stroke:2px #102419;paint-order:stroke fill;text-shadow:-1px -1px 0 #102419,1px -1px 0 #102419,-1px 1px 0 #102419,1px 1px 0 #102419;pointer-events:none;animation:healBodyFloat .52s ease-out forwards}.heal-number.critical{color:#b8ff74;font-size:15px}@keyframes healBodyFloat{0%{transform:translate(-50%,2px) scale(.82);opacity:0}18%{transform:translate(-50%,0) scale(1.08);opacity:1}75%{transform:translate(-50%,-4px) scale(1);opacity:1}100%{transform:translate(-50%,-7px) scale(.96);opacity:0}}
.battle-location{position:absolute;z-index:19;right:10px;top:8px;display:flex;align-items:center;gap:4px;color:#fff;font:900 11px/1 "Malgun Gothic",system-ui,sans-serif;white-space:nowrap;text-shadow:-1px -1px 0 #172129,1px -1px 0 #172129,-1px 1px 0 #172129,1px 1px 0 #172129}.battle-location b{color:#ffd45c}.battle-location button{display:grid;place-items:center;width:30px;height:30px;padding:0;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 2px 1px #0007)}.battle-location button img{display:block;width:30px;height:30px;object-fit:contain;image-rendering:pixelated}.world-map-modal[hidden]{display:none}.world-map-modal{position:fixed;z-index:1650;inset:0;display:grid;place-items:center;padding:16px;background:#080b0dcc}.world-map-dialog{width:min(410px,100%);height:min(620px,82dvh);padding:15px;border:3px solid #8e7747;border-radius:17px;background:#1f2529;color:#f6edcf;box-shadow:0 14px 38px #0009}.world-map-dialog>header{display:flex;align-items:center;justify-content:space-between;width:auto;height:auto;min-height:0;padding:0 0 11px;border:0;border-bottom:1px solid #665b43;background:#1f2529;color:#f6edcf}.world-map-dialog>header p{margin:0 0 4px;color:#d5ad50;font-size:8px;font-weight:1000;letter-spacing:2px}.world-map-dialog>header h2{margin:0;color:#fff2cf;font-size:20px}.world-map-dialog>header button{width:38px;height:38px;border:1px solid #806b3d;border-radius:50%;background:#15191b;color:#f6edcf;font-size:24px;cursor:pointer}.world-map-content{height:calc(100% - 60px)}
.battle-location{-webkit-text-stroke:2px #172129;paint-order:stroke fill}
.battle-location.stage-updated{animation:locationStagePulse .9s ease-out}.battle-location.stage-updated span{color:#fff4b0}.battle-location.stage-updated b{color:#ffd45c}@keyframes locationStagePulse{0%{transform:scale(1)}35%{transform:scale(1.12);filter:drop-shadow(0 0 6px #ffd45c)}100%{transform:scale(1)}}
.action-toast{position:fixed;z-index:3000;max-width:min(260px,80vw);padding:7px 11px;border:1px solid #d5ad50;border-radius:8px;background:#1f2529f2;color:#fff2cf;font:900 11px/1.25 "Malgun Gothic",system-ui,sans-serif;white-space:nowrap;box-shadow:0 4px 12px #0008;pointer-events:none;opacity:0;transform:translate(-50%,-100%) translateY(5px);transition:opacity .16s,transform .16s}.action-toast.show{opacity:1;transform:translate(-50%,-100%) translateY(0)}
.mobile-panel[data-panel="summon"] .summon-actions button.is-disabled{background:#777;color:#bbb;cursor:pointer}
.banner{left:0;right:0;top:48px;padding:6px 12px;border:0;border-radius:0;background:#172129a8;color:#fff;font-size:11px;line-height:1.2;text-align:center;opacity:0;transform:translateY(-4px);pointer-events:none}.banner.show{animation:battleNotice 1.25s ease}.banner.show.persistent{opacity:1;transform:translateY(0);animation:none}@keyframes battleNotice{0%{opacity:0;transform:translateY(-4px)}15%,78%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-2px)}}
.battlefield .wave-panel.rebuilding{display:none}
.enemy.midboss{width:82px;height:82px;filter:none}.enemy.midboss .enemy-sprite{width:82px;height:82px;max-width:none;object-fit:contain;filter:drop-shadow(0 4px 1px #0006)}.enemy.midboss .hp{top:-7px;width:54px;height:4px;border:1px solid #1b2024}.enemy.midboss.hit .enemy-sprite{filter:brightness(1.7) drop-shadow(0 4px 1px #0006)}
.enemy.elite .hp,.enemy.midboss .hp{top:2px;width:36px;height:3px;border:1px solid #1b2024;box-shadow:none}
.enemy.enemy-windSoldier:not(.elite),.enemy.enemy-windArcher:not(.elite),.enemy.enemy-windMage:not(.elite){width:42px;height:42px}
.enemy.enemy-windSoldier:not(.elite) .enemy-sprite,.enemy.enemy-windArcher:not(.elite) .enemy-sprite,.enemy.enemy-windMage:not(.elite) .enemy-sprite{width:42px;height:42px;object-fit:contain}
.enemy.enemy-windMage:not(.elite),.enemy.enemy-windMage:not(.elite) .enemy-sprite{width:52px;height:52px}
.enemy.enemy-windSoldier.elite,.enemy.enemy-windArcher.elite,.enemy.enemy-windMage.elite{width:58px;height:58px}
.enemy.enemy-windSoldier.elite .enemy-sprite,.enemy.enemy-windArcher.elite .enemy-sprite,.enemy.enemy-windMage.elite .enemy-sprite{width:58px;height:58px;max-width:58px;object-fit:contain}
.enemy.enemy-tutorialSlime,.enemy.enemy-tutorialSlime .enemy-sprite{width:34px;height:34px}
.enemy.enemy-tutorialSlime .enemy-sprite{object-fit:contain}
.enemy.enemy-tutorialSlime .hp{top:-7px;width:34px;height:4px}
.projectile-wind-seed{background-position:50% 50%;filter:hue-rotate(18deg) saturate(.9) drop-shadow(0 0 2px #d9ff8c)}
.projectile-wind-magic{background-position:100% 100%;filter:hue-rotate(78deg) saturate(.85) brightness(1.25) drop-shadow(0 0 2px #9ff5ff)}
.enemy.enemy-windSoldier.attacking:after{content:"";position:absolute;z-index:2;right:6px;bottom:-6px;width:56px;height:56px;background-image:url("assets/effects/melee-flashes-v1.png");background-size:200% 100%;background-position:left center;background-repeat:no-repeat;image-rendering:pixelated;filter:drop-shadow(0 0 2px #dcecff);pointer-events:none;animation:bossMeleeFlash .13s linear forwards}
.mobile-panel[data-panel="battle"].active{display:flex;flex-direction:column}
.battle-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%;margin-top:10px;padding:1px 1px 3px}
.battle-shortcuts button{position:relative;min-width:0;width:100%;aspect-ratio:1;overflow:hidden;padding:0;border:2px solid #807354;border-radius:9px;background:#202a32;color:#fff4d3;font-family:inherit;cursor:pointer;box-shadow:none}
.battle-shortcuts button:after{content:"";position:absolute;inset:46% 0 0;background:linear-gradient(transparent,#111923eb);pointer-events:none}
.battle-shortcuts button img{display:block;width:100%;height:100%;margin:0;padding:7px;object-fit:contain;image-rendering:auto;filter:none;transition:transform .14s ease,filter .14s ease}
.battle-shortcuts button span{position:absolute;z-index:2;left:4px;right:4px;bottom:7px;font-size:10px;font-weight:1000;line-height:1;text-align:center;text-shadow:0 1px 2px #000,0 0 3px #000}
.battle-shortcuts button:hover,.battle-shortcuts button:focus-visible{border-color:#d3a84e}
.battle-shortcuts button:hover img,.battle-shortcuts button:focus-visible img{transform:scale(1.05);filter:brightness(1.1)}

#quickWorldMapButton{background-image:linear-gradient(180deg,transparent 62%,#0b0d125c 82%,#0b0d12a3 100%),url("assets/ui/quick-menu/world-map-table-v5.png");background-position:center;background-size:cover;background-repeat:no-repeat;text-align:left}
#quickWorldMapButton:after{display:none}
#quickWorldMapButton small,#quickWorldMapButton strong{position:absolute;z-index:2;left:9px;right:9px;text-shadow:0 1px 2px #000,0 0 3px #000}
#quickWorldMapButton small{bottom:31px;color:#ffe182;font-size:7px;font-weight:1000;line-height:1;letter-spacing:1px}
#quickWorldMapButton strong{bottom:11px;color:#fff8df;font-size:15px;line-height:1.1}
#quickQuestButton{background-image:url("assets/ui/quick-menu/quest-board-v1.png");background-position:center;background-size:cover;background-repeat:no-repeat;text-align:left}
#quickQuestButton:after{display:none}
#quickQuestButton.has-notice:before{content:"";position:absolute;z-index:5;top:6px;right:6px;width:12px;height:12px;border:2px solid #fff3d5;border-radius:50%;background:#e3413d;box-shadow:0 1px 3px #0008;pointer-events:none}
#quickQuestButton small,#quickQuestButton strong{position:absolute;z-index:2;left:9px;right:9px;text-shadow:0 1px 2px #000,0 0 3px #000}
#quickQuestButton small{bottom:31px;color:#e7c56e;font-size:7px;font-weight:1000;line-height:1;letter-spacing:1.2px}
#quickQuestButton strong{bottom:11px;color:#fff5d7;font-size:15px;line-height:1.1}
.quest-modal[hidden]{display:none}.quest-modal{position:fixed;z-index:1720;inset:0;display:grid;place-items:center;padding:16px;background:#080b0dd4;opacity:1;transition:opacity .2s ease}.quest-modal.opening,.quest-modal.closing{opacity:0}.quest-dialog{width:min(420px,100%);height:min(680px,88dvh);display:flex;flex-direction:column;padding:15px;border:3px solid #907746;border-radius:17px;background:#20272b;color:#f7edcf;box-shadow:0 16px 46px #000b,inset 0 0 0 2px #403729;transform:translateY(0) scale(1);transition:transform .2s ease}.quest-modal.opening .quest-dialog,.quest-modal.closing .quest-dialog{transform:translateY(9px) scale(.985)}.quest-dialog>header{display:flex;align-items:center;justify-content:space-between;width:auto;height:auto;min-height:0;padding:0 0 11px;border:0;border-bottom:1px solid #645941;background:#20272b;color:#f7edcf}.quest-dialog>header p{margin:0 0 3px;color:#d8af50;font-size:8px;font-weight:1000;letter-spacing:2px}.quest-dialog>header h2{margin:0;color:#fff2cf;font-size:21px}.quest-dialog>header button{width:36px;height:36px;border:1px solid #806b3d;border-radius:50%;background:#15191b;color:#f6edcf;font:400 24px/1 inherit;cursor:pointer}.quest-tabs{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:5px;margin:11px 0}.quest-tabs button{min-height:37px;border:1px solid #565044;border-radius:7px;background:#2c3336;color:#958e7e;font:900 9px inherit}.quest-tabs button.active{border-color:#c99c3e;background:#47391f;color:#ffe193}.quest-tabs button small{display:block;margin-top:2px;color:#6f6b63;font-size:6px}.quest-progress-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;padding:10px 11px;border:1px solid #6f5c36;border-radius:9px;background:linear-gradient(135deg,#3c311e,#292e2f)}.quest-progress-head small,.quest-progress-head strong{display:block}.quest-progress-head small{color:#cda64f;font-size:7px;font-weight:1000;letter-spacing:1.5px}.quest-progress-head strong{margin-top:3px;color:#fff1c7;font-size:13px}.quest-progress-head>span{padding:5px 7px;border-radius:5px;background:#151a1d;color:#e6bf5c;font-size:9px;font-weight:1000}.quest-list{min-height:0;display:grid;gap:7px;overflow-y:auto;padding:1px 2px 8px;scrollbar-width:none}.quest-list::-webkit-scrollbar{display:none}.quest-row{position:relative;display:grid;grid-template-columns:33px minmax(0,1fr) auto;gap:9px;align-items:center;min-height:61px;padding:8px 9px;border:1px solid #504b40;border-radius:9px;background:#292f32;color:#eee4c9}.quest-row-index{display:grid;place-items:center;width:31px;height:31px;border:1px solid #665d49;border-radius:50%;background:#1b2023;color:#a69d87;font-size:9px;font-weight:1000}.quest-row-copy{min-width:0}.quest-row-copy b,.quest-row-copy span{display:block}.quest-row-copy b{color:#f2e8cb;font-size:11px}.quest-row-copy span{margin-top:4px;color:#a9a18f;font-size:8px;line-height:1.35}.quest-row-reward{max-width:82px;color:#d9b45a;font-size:8px;font-weight:1000;text-align:right}.quest-row.current{border-color:#d5aa4b;background:linear-gradient(135deg,#3c3425,#292f32);box-shadow:inset 3px 0 #f0c65d,0 0 8px #d6a64022}.quest-row.current .quest-row-index{border-color:#ebc35e;background:#d19b35;color:#1d170c}.quest-row.current:after{content:'진행 중';position:absolute;top:5px;right:7px;color:#ffe27b;font-size:6px;font-weight:1000;letter-spacing:.5px}.quest-row.current .quest-row-reward{padding-top:13px}.quest-row.complete{opacity:.55}.quest-row.complete .quest-row-index{border-color:#5c9470;background:#315e43;color:#d8ffe2}.quest-row.complete .quest-row-index:before{content:'✓';font-size:13px}.quest-row.complete .quest-row-index span{display:none}.quest-row.locked .quest-row-reward{color:#777267}
#quickDungeonButton{background-image:url("assets/ui/quick-menu/dungeon-gate-v1.png");background-position:center;background-size:cover;background-repeat:no-repeat;text-align:left}
#quickDungeonButton:after{display:none}
#quickDungeonButton small,#quickDungeonButton strong{position:absolute;z-index:2;left:9px;right:9px;text-shadow:0 1px 2px #000,0 0 3px #000}
#quickDungeonButton small{bottom:31px;color:#9edfff;font-size:7px;font-weight:1000;line-height:1;letter-spacing:1.2px}
#quickDungeonButton strong{bottom:11px;color:#f1f8ff;font-size:15px;line-height:1.1}
.game-shell.tutorial-pending .battle-shortcuts,.game-shell:has(.battlefield[data-tutorial="true"]) .battle-shortcuts{display:none}
.heroes,.enemies{z-index:auto}
.idle-chest{z-index:950}
.battle-location i{font-style:normal}.world-map-content{position:relative;overflow-y:auto;overflow-x:hidden;padding:0;border:1px solid #4f493c;border-radius:11px;background:#151a1d;box-shadow:inset 0 0 24px #0008;scrollbar-width:none;overscroll-behavior:contain}.world-map-content::-webkit-scrollbar{display:none}.world-region-path{position:relative;width:100%;height:664px;background:url('assets/maps/world-map-regions-v1.png') center/100% 100% no-repeat;image-rendering:auto}.world-region{position:absolute;left:0;width:100%;height:72px;padding:0;border:0;background:transparent;color:#fff;font-family:inherit;cursor:pointer;filter:drop-shadow(0 2px 1px #000b)}.world-region img{display:none;position:absolute;z-index:3;left:50%;top:0;width:50px;height:50px;transform:translate(-50%,-64%);object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 1px #0008)}.world-region span{position:absolute;z-index:2;top:50%;min-width:108px;padding:5px 7px;transform:translate(-50%,-8px);border:1px solid #d6bc75;border-radius:7px;background:#172129df;text-align:center;box-shadow:0 2px 5px #0008}.world-region:nth-child(odd) span{left:20%}.world-region:nth-child(even) span{left:80%}.world-region span b,.world-region span small{display:block;white-space:nowrap;text-shadow:0 1px 1px #000}.world-region span b{font-size:10px}.world-region span small{margin-top:2px;color:#e2c66f;font-size:5px;letter-spacing:1px}.world-region>em{position:absolute;z-index:4;left:57%;top:8px;padding:2px 4px;border:1px solid #d2b45f;border-radius:4px;background:#182127e8;color:#ffe088;font-size:7px;font-style:normal;white-space:nowrap}.world-region.active img{display:block}.world-region.active:after{content:"";position:absolute;z-index:1;left:50%;top:50%;width:58px;height:25px;transform:translate(-50%,-42%);border:2px solid #ffe06a;border-radius:50%;box-shadow:0 0 9px #ffd447}.world-region.active span{border-color:#ffe06a;background:#3b2d18e8}.world-region.wind{top:84%}.world-region.mist{top:63%}.world-region.canyon{top:44%}.world-region.frost{top:29%}.world-region.desert{top:15%}.world-region.fortress{top:3%}
.world-region img{top:-12%;transform:translate(-50%,-50%)}.world-region.active:after{display:none}
.world-map-content{cursor:grab;user-select:none;touch-action:pan-y}.world-map-content.dragging{cursor:grabbing}.world-map-content img{pointer-events:none;-webkit-user-drag:none}
.world-region-path{height:790px;background-image:url('assets/maps/world-map-regions-v2.png')}.world-region.wind{top:81%}.world-region.mist{top:63%}.world-region.canyon{top:45%}.world-region.frost{top:32%}.world-region.desert{top:21%}.world-region.fortress{top:10%}
.world-map-dialog{height:min(700px,90dvh)}.world-map-content{height:calc(100% - 119px)}.world-region{touch-action:pan-y}.world-region img{top:50%}.world-region.fortress{top:0;height:15.5%}.world-region.desert{top:15.5%;height:11%}.world-region.frost{top:26.5%;height:12%}.world-region.canyon{top:38.5%;height:15.5%}.world-region.mist{top:54%;height:18%}.world-region.wind{top:72%;height:28%}.world-region.wind img,.world-region.wind span{top:32%}.world-region.wind>em{top:25%}.world-region.selected{background:linear-gradient(90deg,transparent 5%,#f4cc5720 50%,transparent 95%)}.world-region.selected span{border-color:#ffe06a;background:#3b2d18e8;box-shadow:0 0 8px #e8ba4c88}.world-map-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;height:59px;padding:9px 2px 0}.world-map-actions>div{min-width:0}.world-map-actions small,.world-map-actions strong{display:block}.world-map-actions small{color:#b9ad90;font-size:7px}.world-map-actions strong{margin-top:3px;color:#fff0c8;font-size:11px;white-space:nowrap}.world-map-actions button{min-width:112px;height:43px;border:2px solid #5e461e;border-radius:8px;background:#d39a37;color:#282015;font:1000 12px inherit;cursor:pointer}.world-map-actions button:disabled{border-color:#53504a;background:#393e40;color:#8f8d84;cursor:default}
.world-map-dialog{height:min(700px,90dvh)}.world-map-content{height:calc(100% - 119px)}.world-region{touch-action:pan-y}.world-region img{top:50%;transform:translate(-50%,-86%)}.world-region.fortress{top:0;height:15.5%}.world-region.desert{top:15.5%;height:11%}.world-region.frost{top:26.5%;height:12%}.world-region.canyon{top:38.5%;height:15.5%}.world-region.mist{top:54%;height:18%}.world-region.wind{top:72%;height:28%}.world-region.wind img,.world-region.wind span{top:32%}.world-region.wind>em{top:25%}.world-region.active:not(.selected) img{display:none}.world-region.selected img{display:block}.world-region.selected{background:transparent}.world-region.selected span{border-color:#d6bc75;background:#172129df;box-shadow:0 2px 5px #0008}.world-map-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;height:59px;padding:9px 2px 0}.world-map-actions>div{min-width:0}.world-map-actions small,.world-map-actions strong{display:block}.world-map-actions small{color:#b9ad90;font-size:7px}.world-map-actions strong{margin-top:3px;color:#fff0c8;font-size:11px;white-space:nowrap}.world-map-actions button{min-width:112px;height:43px;border:2px solid #5e461e;border-radius:8px;background:#d39a37;color:#282015;font:1000 12px inherit;cursor:pointer}.world-map-actions button:disabled{border-color:#53504a;background:#393e40;color:#8f8d84;cursor:default}
.world-region:focus,.world-region:focus-visible{outline:none}
.world-region.fortress img{top:79%}.world-region.desert img{top:50%}.world-region.frost img{top:63%}.world-region.canyon img{top:48%}.world-region.mist img{top:39%}.world-region.wind img{top:25%}
.world-region img{margin-top:4px}
.world-region>em{left:57%;right:auto;top:50%;padding:4px 7px;transform:translateY(-50%);border-width:2px;border-radius:6px;font-size:9px;line-height:1}.world-region:nth-child(even)>em{left:auto;right:57%}.world-region.wind>em{top:32%}
.world-region.fortress>em{top:79%}.world-region.desert>em{top:50%}.world-region.frost>em{top:63%}.world-region.canyon>em{top:48%}.world-region.mist>em{top:39%}.world-region.wind>em{top:25%}
.world-travel[hidden]{display:none}.world-travel{position:fixed;z-index:1750;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#101820f2;color:#fff1c8;opacity:0;transition:opacity .2s ease;pointer-events:all}.world-travel.active{opacity:1}.world-travel.arrived{opacity:0;transition-duration:.3s}.world-travel-route{display:grid;grid-template-columns:minmax(72px,1fr) 36px 54px 36px minmax(72px,1fr);align-items:center;width:min(370px,88%);gap:5px}.world-travel-route span,.world-travel-route strong{font-size:11px;text-align:center;text-shadow:0 2px 2px #000}.world-travel-route strong{color:#ffd55d}.world-travel-route i{height:2px;background:repeating-linear-gradient(90deg,#d9b85d 0 5px,transparent 5px 9px);animation:travelRoad .35s linear infinite}.world-travel-route img{width:54px;height:54px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 3px 2px #0008);animation:travelCompass .7s ease-in-out infinite}.world-travel>p{margin-top:14px;color:#d6c9aa;font-size:9px;font-weight:900;letter-spacing:2px;animation:travelPulse .7s ease-in-out infinite}@keyframes travelCompass{50%{transform:translateY(-4px) rotate(18deg)}}@keyframes travelRoad{to{background-position:9px 0}}@keyframes travelPulse{50%{opacity:.45}}
.event-card-scroll{cursor:grab;user-select:none;touch-action:pan-y}.event-card-scroll.dragging{cursor:grabbing}
.event-feature{background:linear-gradient(90deg,#172237f2 0%,#172237c9 38%,#17223722 67%,transparent 100%),url("assets/events/open-celebration-ticket-v1.png") center/cover no-repeat}.event-reward{display:flex;align-items:center;gap:7px;margin-top:10px;color:#ffd86a}.event-reward img{width:25px;height:25px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 2px 1px #0008)}.event-reward strong{font-size:13px}.event-feature-mark{top:18px;right:19px;transform:none;font-size:32px;color:#fff3bc;-webkit-text-stroke:2px #8b5a17;paint-order:stroke fill}.event-card i img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}.event-feature button:disabled{border-color:#777;background:#5b5e5f;color:#aaa;cursor:default}
.event-feature{align-items:flex-start;padding:17px 18px}.event-feature-copy{height:100%;max-width:61%;display:flex;flex-direction:column;align-items:flex-start}.event-title-art{display:block;width:215px;max-width:100%;height:auto;margin:4px 0 2px;object-fit:contain}.event-text-title{display:none}.event-feature p{font-size:9px;line-height:1.45;text-shadow:0 1px 2px #000}.event-reward{margin-top:auto}.event-feature-copy>button{width:178px;height:49px;margin-top:7px;padding:0 22px 3px;border:0;background:transparent url("assets/events/open-reward-button-v1.png") center/100% 100% no-repeat;color:#512b0d;font:1000 12px/1 inherit;text-shadow:0 1px #ffeaa1;filter:drop-shadow(0 3px 2px #0008)}.event-feature-copy>button:disabled{border:0;background:transparent url("assets/events/open-reward-button-v1.png") center/100% 100% no-repeat;color:#645845;filter:grayscale(1) brightness(.72);opacity:.8}.event-feature:not([data-event-index="0"]) .event-title-art{display:none}.event-feature:not([data-event-index="0"]) .event-text-title{display:block;margin:7px 0 5px}
.event-feature-copy{align-items:center;text-align:center}.event-feature-copy small{line-height:1}.event-title-art{margin:0;width:210px}.event-feature-copy p{margin-top:-1px;line-height:1.35}.event-reward{justify-content:center;margin-top:6px}.event-feature-copy>button{margin-top:4px}.event-feature:not([data-event-index="0"]) .event-text-title{margin:3px 0 2px}
.event-reward{align-self:center;justify-content:center;margin-top:auto;text-align:center}.event-feature-copy>button{align-self:center;margin-top:7px}
.event-feature{padding:31px 18px 14px}.event-feature-copy small{letter-spacing:3px}.event-title-art{margin-top:-2px}.event-feature-copy p{margin-top:-4px;white-space:nowrap}
.event-feature[data-event-index="0"] .event-feature-copy small{position:relative;top:14px}.event-feature[data-event-index="0"] .event-feature-copy p{position:relative;top:-6px}
.event-feature[data-event-index="0"] .event-reward,.event-feature[data-event-index="0"] .event-feature-copy>button{position:relative;top:-10px}
.event-feature-copy>button{color:#251104;text-shadow:0 1px #ffe78a}
.event-card.open-event-card,.event-card.open-event-card.selected{aspect-ratio:.82;justify-content:flex-end;align-items:flex-start;padding:10px 7px;border-color:#efc55d;background-image:linear-gradient(180deg,transparent 20%,#111a2866 52%,#101620f2 100%),url("assets/events/open-event-card-bg-v1.png");background-position:center,center top;background-size:100% 100%,150% auto;background-repeat:no-repeat;color:#fff0c7;text-align:left;box-shadow:none}.event-card.open-event-card:before{display:none}.event-card.open-event-card i{display:block;width:auto;height:auto;margin:0 0 auto;padding:0;border-radius:0;background:none!important;color:#ffd66b;font-size:7px;font-style:normal;font-weight:1000;letter-spacing:1.2px}.event-card.open-event-card strong{position:relative;max-width:100%;color:#fff4d5;font-size:12px;line-height:1.25;white-space:normal;text-shadow:0 1px 1px #000}.event-card.open-event-card span{position:relative;margin-top:4px;color:#ffd66b;font-size:9px;line-height:1.2;text-shadow:0 1px 1px #000}
.event-card .event-new-badge{position:absolute;z-index:5;top:8px;right:7px;display:grid;place-items:center;width:25px;height:18px;padding:0;border:2px solid #fff0c8;border-radius:10px;background:#d9453f;color:#fff;font-family:Arial,sans-serif;font-size:11px;font-style:normal;font-weight:1000;line-height:1;letter-spacing:0;box-shadow:0 2px 3px #0005;pointer-events:none}
.event-card.paladin-event-card,.event-card.paladin-event-card.selected{justify-content:flex-end;align-items:flex-start;padding:10px 7px;border-color:#b99b58;background-image:linear-gradient(180deg,transparent 12%,#111a2855 48%,#101620f2 100%),url("assets/events/paladin-limited-banner-v4.png");background-position:center,72% center;background-size:100% 100%,auto 100%;background-repeat:no-repeat;color:#fff0c7;text-align:left;box-shadow:none}.event-card.paladin-event-card i{display:block;width:auto;height:auto;margin:0 0 auto;padding:0;border-radius:0;background:none!important;color:#f2d887;font-size:7px;font-style:normal;font-weight:1000;letter-spacing:1.2px}.event-card.paladin-event-card strong{position:relative;max-width:100%;color:#fff8df;font-size:11px;line-height:1.2;white-space:normal;text-shadow:0 1px 2px #000}.event-card.paladin-event-card span{position:relative;margin-top:4px;color:#e6c970;font-size:8px;line-height:1.2;text-shadow:0 1px 2px #000}
.event-reward[hidden]{display:none}
.event-feature[data-event-index="1"]{align-items:stretch;padding:18px 18px 15px}.event-feature[data-event-index="1"]:before{background:linear-gradient(90deg,#d9b34b22,transparent 30%)}.event-feature[data-event-index="1"] .event-feature-copy{width:52%;max-width:52%;height:100%;padding:10px 0 7px 12px;border-left:2px solid #d8b65d;align-items:flex-start;text-align:left}.event-feature[data-event-index="1"] .event-feature-copy small{margin:0;color:#f3d67d;font-size:7px;letter-spacing:2px;line-height:1.2}.event-feature[data-event-index="1"] .event-text-title{margin:11px 0 5px;color:#fff7df;font-size:21px;line-height:1.12;text-shadow:0 2px 2px #000}.event-feature[data-event-index="1"] .event-feature-copy p{max-width:170px;margin:0;color:#d9d6cf;font-size:9px;line-height:1.45;text-align:left;white-space:normal}.event-feature[data-event-index="1"] .event-feature-copy>button{align-self:flex-start;width:145px;height:36px;margin-top:auto;padding:0 12px 1px;border:1px solid #f0d27b;border-radius:4px;background:linear-gradient(180deg,#e0bc61,#aa792c);color:#172235;font:1000 10px/1 inherit;text-shadow:0 1px #f8df9e;filter:drop-shadow(0 3px 2px #0007)}
.event-feature[data-event-index="1"]{display:block;padding:0}.event-feature[data-event-index="1"]:before{background:linear-gradient(90deg,#0b1424cc 0%,#0b142477 42%,transparent 67%)}.event-feature[data-event-index="1"] .event-feature-copy{position:static;display:block;width:auto;max-width:none;height:auto;padding:0;border:0;text-align:left}.event-feature[data-event-index="1"] .event-feature-copy small{position:absolute;left:20px;top:19px;margin:0;padding-left:9px;border-left:3px solid #d8b65d;color:#f3d67d;font-size:7px;letter-spacing:2px;line-height:1.2}.event-feature[data-event-index="1"] .event-text-title{position:absolute;left:20px;top:42px;width:225px;margin:0;color:#fff7df;font-size:24px;line-height:1.08;text-shadow:0 2px 2px #000}.event-feature[data-event-index="1"] .event-feature-copy p{position:absolute;left:21px;top:76px;width:180px;max-width:180px;margin:0;color:#d9d6cf;font-size:9px;line-height:1.45;text-align:left;white-space:normal}.event-feature[data-event-index="1"] .event-feature-copy>button{position:absolute;left:20px;bottom:17px;width:172px;height:39px;margin:0;padding:0 12px 1px;border:1px solid #f0d27b;border-radius:4px;background:linear-gradient(180deg,#e0bc61,#aa792c);color:#172235;font:1000 11px/1 inherit;text-shadow:0 1px #f8df9e;filter:drop-shadow(0 3px 2px #0007)}
.event-feature[data-event-index="0"]{display:block;padding:0}.event-feature[data-event-index="0"]:before{background:linear-gradient(90deg,#0b1424cc 0%,#0b142477 42%,transparent 67%)}.event-feature[data-event-index="0"] .event-feature-copy{position:static;display:block;width:auto;max-width:none;height:auto;padding:0;border:0;text-align:left}.event-feature[data-event-index="0"] .event-feature-copy small{position:absolute;left:20px;top:19px;margin:0;padding-left:9px;border-left:3px solid #d8b65d;color:#f3d67d;font-size:7px;letter-spacing:2px;line-height:1.2}.event-feature[data-event-index="0"] .event-text-title{position:absolute;left:20px;top:42px;display:block;width:225px;margin:0;color:#fff7df;font-size:24px;line-height:1.08;text-shadow:0 2px 2px #000}.event-feature[data-event-index="0"] .event-feature-copy p{position:absolute;left:21px;top:76px;width:180px;max-width:180px;margin:0;color:#d9d6cf;font-size:9px;line-height:1.45;text-align:left;white-space:normal}.event-feature[data-event-index="0"] .event-reward{position:absolute;left:21px;top:auto;bottom:63px;margin:0;color:#f3d67d;text-align:left}.event-feature[data-event-index="0"] .event-reward strong{font-size:11px}.event-feature[data-event-index="0"] .event-feature-copy>button{position:absolute;left:20px;top:auto;bottom:17px;width:172px;height:39px;margin:0;padding:0 12px 1px;border:1px solid #f0d27b;border-radius:4px;background:linear-gradient(180deg,#e0bc61,#aa792c);color:#172235;font:1000 11px/1 inherit;text-shadow:0 1px #f8df9e;filter:drop-shadow(0 3px 2px #0007)}.event-feature[data-event-index="0"] .event-feature-copy>button:disabled{border:1px solid #777;background:#5b5e5f;color:#aaa;filter:none;opacity:.85}
.event-feature:is([data-event-index="0"],[data-event-index="1"]) .event-feature-copy>button:not(:disabled){border-color:#ffe7a0;background:linear-gradient(180deg,#ffdf73 0%,#f0b632 52%,#ce8617 100%);color:#160d03;text-shadow:none;box-shadow:inset 0 1px #fff3ba}
.event-reward-modal{position:fixed;z-index:1000;inset:0;display:grid;place-items:center;padding:22px;background:#0c1218cc}.event-reward-modal[hidden]{display:none}.event-reward-modal>section{width:min(330px,90vw);padding:22px 24px 20px;border:2px solid #9e7b3e;border-radius:14px;background:#20272b;color:#fff2cb;text-align:center;box-shadow:inset 0 0 0 2px #493d28,0 12px 28px #000b}.event-reward-modal small{display:block;color:#e7bd58;font-size:8px;font-weight:1000;letter-spacing:3px}.event-reward-modal h2{margin:6px 0 14px;font-size:22px}.event-reward-modal img{display:block;width:62px;height:62px;margin:0 auto 8px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 4px 3px #0008)}.event-reward-modal strong{display:block;color:#ffd65c;font-size:17px}.event-reward-modal p{margin:6px 0 16px;color:#cfc6b3;font-size:9px}.event-reward-modal button{width:100%;height:42px;border:1px solid #ffe7a0;border-radius:6px;background:linear-gradient(180deg,#ffdf73,#d58f1c);color:#160d03;font:1000 12px/1 inherit;cursor:pointer;box-shadow:inset 0 1px #fff3ba}
.event-reward-modal img{width:84px;height:84px;margin:2px auto 12px;transform:none;image-rendering:auto;filter:drop-shadow(3px 5px 3px #0009)}
.event-card.standard-summon-card,.event-card.standard-summon-card.selected{justify-content:flex-end;align-items:flex-start;padding:10px 7px;border-color:#8ca690;background-image:linear-gradient(180deg,transparent 10%,#111a2844 45%,#101620f2 100%),url("assets/events/standard-summon-heroes-v3.png");background-position:center,78% center;background-size:100% 100%,auto 100%;background-repeat:no-repeat;color:#fff0c7;text-align:left;box-shadow:none}.event-card.standard-summon-card i{display:block;width:auto;height:auto;margin:0 0 auto;padding:0;border-radius:0;background:none!important;color:#9ed9c7;font-size:7px;font-style:normal;font-weight:1000;letter-spacing:1px}.event-card.standard-summon-card strong{position:relative;max-width:100%;color:#f3fff8;font-size:11px;line-height:1.2;white-space:normal;text-shadow:0 1px 2px #000}.event-card.standard-summon-card span{position:relative;margin-top:4px;color:#9ed9c7;font-size:8px;line-height:1.2;text-shadow:0 1px 2px #000}.event-feature[data-event-index="2"]{display:block;padding:0}.event-feature[data-event-index="2"]:before{background:linear-gradient(90deg,#0b1424dd 0%,#0b142488 43%,transparent 68%)}.event-feature[data-event-index="2"] .event-feature-copy{position:static;display:block;width:auto;max-width:none;height:auto;padding:0;border:0;text-align:left}.event-feature[data-event-index="2"] .event-feature-copy small{position:absolute;left:20px;top:19px;margin:0;padding-left:9px;border-left:3px solid #78bda9;color:#a9e3d3;font-size:7px;letter-spacing:2px;line-height:1.2}.event-feature[data-event-index="2"] .event-text-title{position:absolute;left:20px;top:42px;display:block;width:225px;margin:0;color:#f5fff9;font-size:24px;line-height:1.08;text-shadow:0 2px 2px #000}.event-feature[data-event-index="2"] .event-feature-copy p{position:absolute;left:21px;top:76px;width:180px;max-width:180px;margin:0;color:#d5dfda;font-size:9px;line-height:1.45;text-align:left;white-space:normal}.event-feature[data-event-index="2"] .event-feature-copy>button{position:absolute;left:20px;top:auto;bottom:17px;width:172px;height:39px;margin:0;padding:0 12px 1px;border:1px solid #bce8da;border-radius:4px;background:linear-gradient(180deg,#a8ddcb,#529985);color:#10231e;font:1000 11px/1 inherit;text-shadow:none;filter:drop-shadow(0 3px 2px #0007);box-shadow:inset 0 1px #e3fff7}
.summon-carousel{position:relative;flex:0 0 104px;padding:0 0 17px}.game-shell.summon-mode .summon-carousel .summon-banner{height:80px;min-height:80px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:10px 38% 10px 34px;border:2px solid #75613b;border-radius:11px;background-position:center;background-size:cover;color:#fff6d9;text-align:left;box-shadow:none;transition:opacity .14s ease}.summon-carousel .summon-banner small{margin:0 0 3px;color:#e7c762;font-size:6px;font-weight:1000;letter-spacing:1.5px;text-shadow:0 1px 2px #000}.summon-carousel .summon-banner h2{margin:0 0 4px;color:#fff7df;font-size:16px;line-height:1.1;text-align:left;text-shadow:0 1px 2px #000}.summon-carousel .summon-banner em{color:#e6dcc2;font-size:7px;line-height:1.2;text-align:left;text-shadow:0 1px 2px #000}.summon-carousel-arrow{position:absolute;z-index:3;top:23px;width:25px;height:35px;padding:0;border:0;background:transparent;color:#fff;font:1000 29px/1 Arial,sans-serif;text-shadow:0 1px 2px #000,0 0 3px #000;cursor:pointer}.summon-carousel-arrow.prev{left:7px}.summon-carousel-arrow.next{right:7px}.summon-carousel-dots{position:absolute;left:0;right:0;bottom:4px;display:flex;align-items:center;justify-content:center;gap:6px;height:9px}.summon-carousel-dots button{width:6px;height:6px;padding:0;border:0;border-radius:50%;background:#b9aa86;cursor:pointer}.summon-carousel-dots button.active{width:8px;height:8px;background:#3a4449}.summon-banner.limited{background-image:linear-gradient(90deg,#111a28ee 0%,#111a28b8 42%,transparent 70%),url("assets/events/paladin-limited-banner-v4.png");background-position:64% 20%}.summon-banner.standard{background-image:linear-gradient(90deg,#0b1424ee 0%,#0b1424b8 42%,transparent 70%),url("assets/events/standard-summon-heroes-v3.png");background-position:72% center}
.game-shell.summon-mode .summon-carousel .summon-banner.limited{background-position:64% 20%}.game-shell.summon-mode .summon-carousel .summon-banner.standard{background-position:72% center}
.summon-guarantee[hidden]{display:flex;visibility:hidden}
.summon-card.revealed:before{display:none}.summon-card.revealed>.summon-card-cover{position:absolute;z-index:8;inset:-2px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid #8b682b;border-radius:9px;background:#303b42;color:#dcb454;box-shadow:inset 0 0 0 2px #46535a;backface-visibility:hidden;transform-origin:center;animation:summonCardFlip .34s ease-in both;animation-delay:var(--reveal-delay)}.summon-card-cover:before{content:"";position:absolute;inset:6px;border:1px solid #a78545;border-radius:5px}.summon-card-cover i{font-size:27px;font-style:normal;line-height:1}.summon-card-cover b{margin-top:5px;font-size:8px;line-height:1;letter-spacing:2px}.summon-card.revealed>*:not(.summon-card-cover){animation:summonResultShow .18s ease-out both;animation-delay:calc(var(--reveal-delay) + 230ms)}
.bottom-nav button.bag-max:after{content:"MAX";position:absolute;top:5px;right:calc(50% - 31px);display:grid;place-items:center;width:28px;height:18px;padding:0;border:2px solid #fff0c8;border-radius:10px;background:#d9453f;color:#fff;font-family:Arial,sans-serif;font-size:8px;font-weight:1000;line-height:1;letter-spacing:.2px;box-shadow:0 2px 3px #0005;pointer-events:none}

.title-screen{position:fixed;z-index:5000;left:50%;top:50%;width:min(460px,calc(100vw - 20px));height:min(920px,calc(100dvh - 20px));display:grid;place-items:center;overflow:hidden;border:4px solid #111a20;border-radius:18px;background:#080d1d;box-shadow:0 18px 50px #0008;opacity:1;cursor:pointer;transform:translate(-50%,-50%);transition:opacity .65s ease,transform .65s ease;animation:titleScreenEnter 1.2s ease-out}
.title-screen>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;image-rendering:auto;pointer-events:none}
.title-start{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;width:min(220px,64vw);padding:8px 12px;color:#fff0c7;font-family:inherit;text-align:center;text-shadow:-1px -1px 0 #11182a,1px -1px 0 #11182a,-1px 1px 0 #11182a,1px 1px 0 #11182a,0 2px 2px #000;pointer-events:none}
.title-start b{font-size:clamp(14px,3.3vw,20px);font-weight:800;line-height:1;letter-spacing:3px;animation:titleStartPulse 1.15s ease-in-out infinite}
.title-start span{font-size:clamp(9px,2.6vw,14px);font-weight:900;letter-spacing:1px}
.title-screen.leaving{opacity:0;transform:translate(-50%,-50%) scale(1.025);pointer-events:none;animation:none}
.title-screen[hidden]{display:none}
.game-shell{transition:opacity .65s ease,filter .65s ease,transform .65s ease}
.title-active .game-shell{opacity:0;filter:blur(5px);transform:scale(.985)}
@keyframes titleScreenEnter{from{opacity:0}to{opacity:1}}
@keyframes titleStartPulse{50%{opacity:.42;transform:scale(.97)}}
@media(max-width:480px){.title-screen{width:100vw;height:100dvh;border:0;border-radius:0}}

.game-shell{position:relative}
.tutorial-guide{position:absolute;z-index:4100;inset:0;pointer-events:none}
.tutorial-guide[hidden]{display:none}
.tutorial-guide:before{content:"";position:absolute;inset:0;background:#081018b8;pointer-events:none}
.tutorial-guide .tutorial-card,.tutorial-guide .tutorial-guide-hero{opacity:1;transition:opacity .2s ease,transform .2s ease}
.tutorial-guide.popup-closing .tutorial-card,.tutorial-guide.popup-closing .tutorial-guide-hero{opacity:0;transform:translateY(8px)}
.tutorial-card{position:absolute;z-index:4300;left:0;right:0;bottom:82px;min-height:132px;padding:17px 17px 29px 170px;border-top:2px solid #d3ab52;border-bottom:2px solid #d3ab52;background:#171e22f7;color:#fff4d1;box-shadow:0 8px 22px #000b;pointer-events:auto;cursor:pointer}
.tutorial-guide[data-action="target"] .tutorial-card{cursor:default}
.tutorial-guide-hero{position:absolute;z-index:4400;left:-72px;bottom:82px;width:230px;height:218px;object-fit:contain;object-position:left bottom;image-rendering:auto;filter:drop-shadow(0 5px 3px #000b);pointer-events:none}
.tutorial-guide-hero{filter:none}.tutorial-guide[data-placement="bottom"] .tutorial-guide-hero{bottom:84px}
.tutorial-guide[data-placement="bottom"]:after{content:"";position:absolute;z-index:4500;left:0;right:0;bottom:82px;height:2px;background:#d3ab52;pointer-events:none}
.tutorial-guide[data-placement="bottom"]:after{display:none}
.tutorial-guide[data-placement="top"] .tutorial-card{top:108px;bottom:auto}
.tutorial-guide[data-placement="top"] .tutorial-guide-hero{top:20px;bottom:auto}
.tutorial-guide[data-placement="modal"]:before{background:transparent}
.tutorial-guide[data-placement="modal"] .tutorial-card{top:62px;bottom:auto}
.tutorial-guide[data-placement="modal"] .tutorial-guide-hero{top:-26px;bottom:auto}
body:has(.tutorial-guide[data-placement="modal"]:not([hidden])) .deck-edit-dialog{max-height:min(720px,92dvh);transform:none}
.tutorial-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}
.tutorial-head small{color:#bcb29d;font-size:8px;font-weight:900;letter-spacing:1px}.tutorial-head small b{color:#f3cb64;font-size:11px}
.tutorial-head button{padding:2px 4px;border:0;background:transparent;color:#aaa28f;font:800 9px/1 inherit;cursor:pointer}
.tutorial-card>strong{display:block;font-size:15px}.tutorial-card>strong:before{content:'“';margin-right:2px;color:#f3cb64}.tutorial-card>strong:after{content:'”';margin-left:2px;color:#f3cb64}
.tutorial-card>p{margin:7px 0 8px;color:#e4dcc9;font-size:10px;line-height:1.55;word-break:keep-all}
.tutorial-continue{position:absolute;right:17px;bottom:8px;display:block;color:#9e9788;font-size:8px;line-height:1;text-align:right;animation:tutorialContinue 1.2s ease-in-out infinite}
.tutorial-continue{bottom:10px}
.tutorial-guide[data-dialogue="true"] .tutorial-card>strong{display:none}.tutorial-guide[data-dialogue="true"] .tutorial-head{display:block;margin-bottom:7px}.tutorial-guide[data-dialogue="true"] .tutorial-head small{font-size:0;letter-spacing:0}.tutorial-guide[data-dialogue="true"] .tutorial-head small b{font-size:12px;letter-spacing:.2px}.tutorial-guide[data-dialogue="true"] .tutorial-card>p{margin:0;color:#fff5dc;font-size:13px;line-height:1.55;font-weight:700}
@keyframes tutorialContinue{50%{opacity:.45}}
.quest-tabs{grid-template-columns:repeat(3,1fr)}
.quest-tabs button small,.quest-progress-head,.quest-row-index,.quest-row-reward,.quest-row.current:after{display:none}
.quest-list{flex:1;min-height:0;align-content:start;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y;cursor:grab;-webkit-overflow-scrolling:touch}.quest-list.dragging{cursor:grabbing;user-select:none}
.quest-list::-webkit-scrollbar{display:none}
.quest-row{grid-template-columns:minmax(0,1fr) 45px;gap:10px;min-height:66px;padding:9px 10px 9px 12px}
.quest-row-copy b{display:flex;align-items:center;gap:5px;font-size:11px}.quest-row-copy span{margin-top:5px;font-size:9.5px;line-height:1.45}.quest-complete-badge{flex:0 0 auto;padding:3px 4px;border:1px solid #70a67e;border-radius:4px;background:#315e43;color:#d9ffe3;font-size:7px;font-style:normal;line-height:1}
.quest-reward-slot{position:relative;display:grid;place-items:center;width:43px;height:43px;border:2px solid #6c614c;border-radius:8px;background:linear-gradient(145deg,#3a4041,#202527);box-shadow:inset 0 0 0 2px #171b1d,inset 0 1px #ffffff12}
.quest-reward-slot:before{content:'';width:17px;height:17px;border:1px dashed #80745e;border-radius:4px;opacity:.55}
.quest-reward-slot:has(.quest-diamond):before{display:none}
.quest-reward-slot .quest-diamond{min-width:0;gap:0;width:16px;height:14px;margin:0;padding:0}
.quest-reward-slot .quest-diamond i{width:16px;height:14px;transform:none}
.quest-reward-slot b{position:absolute;right:3px;bottom:2px;padding:1px 3px;border-radius:5px;background:#10171dcc;color:#e9f8ff;font-size:8px;line-height:1}
.quest-row-copy .quest-heading-text{min-width:0;margin:0;color:inherit;font:inherit;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quest-row-copy .quest-unlock{flex:0 0 auto;display:block;margin:0 0 0 auto;color:#d2aa52;font-size:7px;font-weight:900;letter-spacing:.3px;white-space:nowrap}
.quest-row-copy .quest-unlock{font-size:11px;font-style:normal;letter-spacing:0}
.quest-row.reward-ready .quest-reward-slot{cursor:pointer;animation:questRewardReady 1.25s ease-in-out infinite}
.quest-dialog:has(.quest-reward-slot.tutorial-target) .quest-reward-slot:not(.tutorial-target){filter:grayscale(.8) brightness(.28)!important;opacity:.3!important;animation:none!important}.quest-dialog:has(.quest-reward-slot.tutorial-target) .quest-row:has(.quest-reward-slot.tutorial-target){position:relative;z-index:3;opacity:1}.quest-dialog .quest-reward-slot.tutorial-target{z-index:4301!important;outline:2px solid #ffe071!important;outline-offset:2px;filter:brightness(1.35)!important;animation:questTutorialRewardFocus .75s ease-in-out infinite!important;transform-origin:center}
@keyframes questTutorialRewardFocus{0%,100%{box-shadow:inset 0 0 0 1px #2b1d08,0 0 8px 2px #ffc83f99}50%{box-shadow:inset 0 0 0 1px #fff0a8,0 0 18px 6px #ffd34ed9}}
.quest-reward-slot.claimed{filter:grayscale(.7);opacity:.5}
@keyframes questRewardReady{50%{border-color:#72d2ff;box-shadow:inset 0 0 0 2px #132a36,0 0 9px #55c8ff88}}
.quest-reward-modal{position:fixed;z-index:1900;inset:0;display:grid;place-items:center;padding:22px;background:#0c1218cc;opacity:1;transition:opacity .2s ease}
.quest-reward-modal[hidden]{display:none}.quest-reward-modal.opening,.quest-reward-modal.closing{opacity:0}
.quest-reward-modal>section{width:min(310px,88vw);padding:22px 24px 20px;border:2px solid #638da4;border-radius:14px;background:#20272b;color:#fff2cb;text-align:center;box-shadow:inset 0 0 0 2px #263f4c,0 12px 28px #000b;transform:translateY(0) scale(1);transition:transform .2s ease}
.quest-reward-modal.opening>section,.quest-reward-modal.closing>section{transform:translateY(8px) scale(.985)}
.quest-reward-modal small{display:block;color:#72cfff;font-size:8px;font-weight:1000;letter-spacing:3px}.quest-reward-modal h2{margin:6px 0 16px;font-size:22px}
.quest-reward-popup-list{display:flex;justify-content:center;gap:10px;min-height:88px;margin:0 auto 10px}
.quest-reward-item{display:flex;flex-direction:column;align-items:center;gap:6px}.quest-reward-item>strong{color:#dcefff;font-size:11px}
.quest-reward-item-slot{position:relative;display:grid;place-items:center;width:68px;height:68px;border:2px solid #72bfe5;border-radius:10px;background:linear-gradient(145deg,#274453,#18272f);box-shadow:inset 0 0 0 2px #101a1f,0 4px 9px #0007}
.quest-reward-popup-icon{display:grid;place-items:center;min-width:0;width:16px;height:14px;margin:0;padding:0}.quest-reward-popup-icon i{width:16px;height:14px;transform:scale(2.45)}
.quest-reward-item-slot>b{position:absolute;right:4px;bottom:4px;min-width:22px;padding:2px 4px;border:1px solid #5f899f;border-radius:6px;background:#0d171dcc;color:#f1fbff;font-size:10px;line-height:1;text-align:center}
.quest-reward-modal p{margin:6px 0 16px;color:#cfc6b3;font-size:9px}
.quest-reward-modal button{width:100%;height:42px;border:1px solid #bdeaff;border-radius:6px;background:linear-gradient(180deg,#8edcff,#3098cf);color:#07151d;font:1000 12px/1 inherit;cursor:pointer;box-shadow:inset 0 1px #e9faff}
.quest-row.current .quest-reward-slot{border-color:#d2a849;box-shadow:inset 0 0 0 2px #241c0e,0 0 6px #d5aa4b55}
.quest-row.current{box-shadow:0 0 8px #d6a64022}
.quest-row.complete{opacity:.72}.quest-row.complete .quest-reward-slot{border-color:#607766}.quest-row.locked .quest-reward-slot{filter:grayscale(1);opacity:.65}
.tutorial-target{z-index:4200!important;outline:2px solid #ffd65a!important;outline-offset:-2px;filter:brightness(1.1)!important;pointer-events:auto!important}
.game-shell.summon-mode:has(#progressionGuide:not([hidden])) #heroCollection{position:relative;z-index:4200}
.game-shell.summon-mode #heroCollection.tutorial-target{outline:none!important;filter:none!important}
.event-reward-modal{z-index:4200}
.progression-guide[data-placement="modal"]:before{background:#08101870}
.progression-guide[data-popup="true"]:before{background:transparent}
.progression-guide[data-popup="true"]{z-index:4400}
.progression-guide[data-placement="modal"] .tutorial-card{top:78px}
.progression-guide[data-placement="modal"] .tutorial-guide-hero{top:-10px}
.progression-guide .tutorial-card,.progression-guide .tutorial-guide-hero{transition:opacity .2s ease,transform .2s ease}
.progression-guide[data-story="true"] .tutorial-card{min-height:132px;padding-top:17px;padding-bottom:29px}
.progression-guide[data-story="true"] .tutorial-card>strong{display:none}
.progression-guide[data-story="true"] .tutorial-head{display:block;margin-bottom:7px}
.progression-guide[data-story="true"] .tutorial-head small{font-size:0;letter-spacing:0}
.progression-guide[data-story="true"] .tutorial-head small b{font-size:12px;letter-spacing:.2px}
.progression-guide[data-story="true"] .tutorial-card>p{margin:0;color:#fff5dc;font-size:13px;line-height:1.55;font-weight:700}
.progression-guide[data-story="true"] .tutorial-continue{position:absolute;right:17px;bottom:8px}
.progression-choices{display:flex;gap:9px;margin-top:8px}.progression-choices[hidden]{display:none}
.progression-guide[data-story="true"] .progression-choices{position:fixed;left:50%;top:50%;z-index:4600;display:flex;flex-direction:column;width:min(520px,76vw);margin:0;gap:10px;transform:translate(-50%,-50%);pointer-events:auto}
.progression-choices button{flex:1;min-height:40px;padding:8px 12px;border:1px solid #d3ab52;border-radius:7px;background:linear-gradient(#3b3528,#211f1a);color:#fff1c7;font:800 11px/1.3 inherit;box-shadow:inset 0 1px #fff2,0 5px 14px #0009;cursor:pointer}
.hero-cards:has(.tutorial-target){position:relative;z-index:4200}.hero-cards:has(.tutorial-target)>.card:not(.tutorial-target){filter:brightness(.2)!important}
.mobile-panel.tutorial-target{position:relative}
.battle-deck-heading:has(.tutorial-target){position:relative;z-index:4200}
.hero-loadout:has(.equipped-slots .tutorial-target){overflow:visible}.equipped-slots:has(.tutorial-target){z-index:4200!important}.equipped-slots:has(.tutorial-target)>div:not(.tutorial-target){filter:brightness(.2)!important}.equipped-slots [data-equipment-slot].tutorial-target{position:relative;z-index:4201}
#battlefield.tutorial-target{outline-offset:-3px}
.idle-chest.tutorial-target{border-radius:12px}
.equipment-heroes button.owned{background:linear-gradient(145deg,#fffef6,#f8edcc);border-color:#26313a}.equipment-heroes button.locked{background:#aaa69c;border-color:#5f625f;box-shadow:none}.equipment-heroes button.locked .portrait{filter:grayscale(.55) brightness(.78);opacity:.72}.equipment-heroes .hero-lock{display:none!important}
.equipment-heroes button,.equipment-heroes button.owned,.equipment-heroes button.locked{height:82px;padding:5px 4px;border:3px solid #26313a;border-radius:10px;background:linear-gradient(145deg,#fffef6,#f8edcc);box-shadow:inset 0 0 0 2px #fff9dc,0 2px 0 #9d8658}.equipment-heroes button.locked{opacity:.48}.equipment-heroes button.locked .portrait{filter:grayscale(.55) brightness(.78);opacity:1}.equipment-heroes button.selected{border:3px solid #d29a25;border-radius:10px;background:linear-gradient(145deg,#fff4b8,#e4b94c);box-shadow:inset 0 0 0 2px #fff3bd,0 2px 0 #9d8658}
.event-card.reinforcement-event-card,.event-card.reinforcement-event-card.selected{justify-content:flex-end;align-items:flex-start;padding:10px 7px;border-color:#d6b45d;background-image:linear-gradient(180deg,transparent 10%,#101a2744 48%,#101620f2 100%),url("assets/events/standard-summon-heroes-v3.png");background-position:center,66% center;background-size:100% 100%,auto 100%;background-repeat:no-repeat;color:#fff4d2;text-align:left}.event-card.reinforcement-event-card i{display:block;width:auto;height:auto;margin:0 0 auto;padding:0;border-radius:0;background:none!important;color:#ffe08a;font-size:7px;font-weight:1000;letter-spacing:1.1px}.event-card.reinforcement-event-card strong{color:#fff8e4;font-size:11px;line-height:1.2;text-shadow:0 1px 2px #000}.event-card.reinforcement-event-card span{color:#ffd86f;font-size:9px;text-shadow:0 1px 2px #000}
.event-card.reinforcement-event-card{display:none}
.event-feature[data-event-index="2"],.event-feature[data-event-index="2"].tutorial-target{outline:none!important;box-shadow:inset 0 0 0 2px #9d7c48;filter:none!important}
.world-travel{z-index:5000}
.equipment-modal:has(.tutorial-target){z-index:4300}
.bag-slot.dev-ticket-pack img{position:absolute;left:50%;top:46%;width:68%;height:68%;transform:translate(-50%,-50%);object-fit:contain;image-rendering:pixelated}.bag-slot.dev-ticket-pack b{position:absolute;left:3px;right:3px;bottom:3px;color:#fff4cf;font-size:9px;text-align:center;text-shadow:0 1px 2px #000,0 0 3px #000}.dev-ticket-detail-icon{display:block;width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.hero-acquisition-modal[hidden]{display:none}.hero-acquisition-modal{position:fixed;z-index:4900;inset:0;display:grid;place-items:center;padding:20px;background:#090b12e8;opacity:1;cursor:pointer;animation:heroAcquisitionFade .25s ease-out}.hero-acquisition-dialog{position:relative;width:min(326px,78vw);color:#fff6df;text-align:center;filter:drop-shadow(0 18px 28px #000c);animation:heroAcquisitionRise .45s cubic-bezier(.2,.85,.25,1.08)}.hero-acquisition-dialog>img{position:relative;z-index:2;display:block;width:100%;aspect-ratio:326/600;object-fit:cover;border:3px solid #f0bc58;border-radius:18px;box-shadow:0 0 0 1px #fff2b7,0 0 22px #e7aa4866}.hero-acquisition-light{position:absolute;z-index:1;left:50%;top:34%;width:145%;aspect-ratio:1;transform:translate(-50%,-50%);background:repeating-conic-gradient(from 0deg,#f8d17b00 0 8deg,#f8d17b24 9deg 11deg);border-radius:50%;animation:heroAcquisitionSpin 14s linear infinite}.hero-acquisition-dialog>small{display:block;margin-top:15px;color:#d8b15f;font-size:8px;font-weight:1000;letter-spacing:2.5px}.hero-acquisition-dialog>h2{margin:3px 0 9px;color:#ffc95d;font-size:29px;line-height:1;text-shadow:0 2px 2px #000}.hero-acquisition-dialog>p{min-height:43px;color:#fff8e8;font-size:13px;font-weight:800;line-height:1.65;text-shadow:0 2px 2px #000}.hero-acquisition-dialog>span{display:block;margin-top:10px;color:#b9b09e;font-size:8px;font-weight:900;letter-spacing:1px;animation:travelPulse .8s ease-in-out infinite}@keyframes heroAcquisitionFade{from{opacity:0}}@keyframes heroAcquisitionRise{from{opacity:0;transform:translateY(24px) scale(.92)}}@keyframes heroAcquisitionSpin{to{transform:translate(-50%,-50%) rotate(1turn)}}
.deck-empty.recruit-notice:after,.deck-selected-empty.recruit-notice:after{content:"";position:absolute;z-index:6;top:4px;right:4px;width:11px;height:11px;border:2px solid #fff3d5;border-radius:50%;background:#e3413d;box-shadow:0 1px 3px #0008;animation:recruitNoticePulse 1s ease-in-out infinite}.deck-empty.recruit-notice{border-color:#d39e3d!important;box-shadow:inset 0 0 0 1px #f2c45c66}.deck-selected-empty.recruit-notice{border-color:#d39e3d!important;background:#3a3325!important}@keyframes recruitNoticePulse{50%{transform:scale(1.18);filter:brightness(1.2)}}
.deck-roster .deck-hero.recruit-notice:after{content:"";position:absolute;z-index:6;top:4px;right:4px;width:11px;height:11px;border:2px solid #fff3d5;border-radius:50%;background:#e3413d;box-shadow:0 1px 3px #0008;animation:recruitNoticePulse 1s ease-in-out infinite}.deck-roster .deck-hero.recruit-notice{border-color:#d39e3d;box-shadow:inset 0 0 0 1px #f2c45c66}
.mobile-panel[data-panel="summon"] .summon-actions button{height:46px;padding:5px!important}
.elite-battle-hud[hidden],.elite-arrival[hidden]{display:none}.elite-battle-hud{position:absolute;z-index:120;left:50%;top:11px;width:min(270px,64%);transform:translateX(-50%);padding:7px 10px 8px;border:1px solid #e1b14d;border-radius:8px;background:#111820eb;color:#fff;box-shadow:inset 0 0 0 1px #fff1,0 4px 12px #000a;pointer-events:none}.elite-battle-hud>div{display:flex;align-items:center;justify-content:center;gap:9px}.elite-battle-hud small{color:#ffca50;font-size:8px;font-weight:1000;letter-spacing:2px}.elite-battle-hud b{font-size:10px;letter-spacing:.2px}.elite-battle-hud>span{display:block;height:8px;margin-top:5px;overflow:hidden;border:1px solid #dfb052;border-radius:5px;background:#291714}.elite-battle-hud>span i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#aa292a,#ec5234 65%,#ffb64e);box-shadow:inset 0 1px #fff5;transition:width .1s linear}.enemy.elite .hp{display:none}.enemy.elite-awaiting{opacity:0!important}
.elite-arrival{position:absolute;z-index:150;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 55%,#692820c9 0,#241519e8 37%,#070c13f5 78%);color:#fff;overflow:hidden;pointer-events:none;animation:eliteArrivalIn .18s ease-out}.elite-arrival:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,#fff4c899 49%,transparent 58%);transform:translateX(-120%);animation:eliteWarningSweep .55s .18s ease-out both}.elite-arrival small,.elite-arrival strong,.elite-arrival img{position:relative;z-index:1}.elite-arrival small{color:#ffd05d;font-size:11px;font-weight:1000;letter-spacing:5px;text-shadow:0 2px 5px #000}.elite-arrival strong{margin-top:5px;font-size:17px;letter-spacing:-.3px;text-shadow:0 2px 4px #000,0 0 14px #ff5b35}.elite-arrival img{width:124px;height:112px;margin-top:9px;object-fit:contain;filter:drop-shadow(0 6px 3px #0008) drop-shadow(0 0 12px #ffb14f88);animation:eliteEnemyReveal .48s cubic-bezier(.12,.72,.2,1.16) both}.elite-arrival.closing{opacity:0;transition:opacity .2s ease}@keyframes eliteArrivalIn{from{opacity:0}}@keyframes eliteEnemyReveal{from{opacity:0;transform:scale(.35) translateY(12px)}70%{transform:scale(1.08) translateY(0)}to{opacity:1;transform:scale(1)}}@keyframes eliteWarningSweep{to{transform:translateX(120%)}}
.elite-battle-hud{left:auto;right:10px;top:35px;width:min(420px,calc(100% - 20px));transform:none;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:right;animation:eliteHudReveal .9s cubic-bezier(.16,.72,.2,1)}.elite-battle-hud>span{height:16px;margin:0;border:2px solid #211b18;border-radius:4px;background:#34201d;box-shadow:0 2px 4px #0008,inset 0 0 0 1px #ead08a55}.elite-battle-hud>span i{background:linear-gradient(180deg,#ff7752 0,#d13e32 52%,#8e211f 100%);box-shadow:inset 0 2px #ffc6a977,inset 0 -2px #5d1111}.elite-battle-hud>div{justify-content:flex-end;gap:7px;margin-top:4px;padding-right:2px}.elite-battle-hud small{font-size:7px;letter-spacing:1.5px}.elite-battle-hud b{font-size:10px;text-shadow:-1px -1px #111,1px 1px #111}@keyframes eliteHudReveal{from{opacity:0;transform:translateY(-8px)}55%{filter:brightness(1.7)}to{opacity:1;transform:translateY(0);filter:none}}
.elite-battle-hud{left:50%;right:auto;top:27px;width:170px;transform:translateX(-50%);padding:0;background:transparent;text-align:center;animation:eliteHudRevealCentered .9s cubic-bezier(.16,.72,.2,1)}.elite-battle-hud>small{position:absolute;z-index:2;left:50%;top:-10px;display:block;padding:1px 4px;transform:translateX(-50%);border:1px solid #51421e;border-radius:3px;background:#c8ab39;color:#fff37a;font-size:7px;font-weight:1000;line-height:1;letter-spacing:.5px;-webkit-text-stroke:1px #55420c;paint-order:stroke fill;text-shadow:0 1px #171008}.elite-battle-hud>span{display:block;width:100%;height:10px;margin:0;border:2px solid #42382a;border-radius:3px;background:#32251e;box-shadow:0 1px 2px #000b,inset 0 0 0 1px #ffe7a45c}.elite-battle-hud>b{display:block;margin-top:3px;color:#fff;font:900 12px/1 "Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-align:center;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}.elite-battle-hud>span i{border-radius:1px}@keyframes eliteHudRevealCentered{from{opacity:0;transform:translate(-50%,-8px)}55%{filter:brightness(1.7)}to{opacity:1;transform:translate(-50%,0);filter:none}}
.elite-battle-hud{top:17px}.elite-battle-hud>small{top:-13px;padding:0;border:0;border-radius:0;background:transparent;color:#ffe05a;font:900 12px/1 "Malgun Gothic",system-ui,sans-serif;letter-spacing:0;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
.elite-battle-hud{width:148px}.elite-battle-hud>small{left:auto;right:calc(100% + 7px);top:50%;transform:translateY(-50%);white-space:nowrap}.elite-battle-hud>b{display:none}
.elite-battle-hud>span{background:#3a1d1d;box-shadow:none}.elite-battle-hud>span i{background:#c83b3b;box-shadow:none}
.elite-battle-hud>span{height:8px}
.elite-battle-hud>small{left:50%;right:auto;top:calc(100% + 3px);transform:translateX(-50%);color:#fff}
.banner.clear{border-color:#d9fff0;background:#25866f;color:#f4fff9;box-shadow:inset 0 0 0 2px #75d6b7,0 5px 16px #073c32aa;text-shadow:0 2px 1px #0a493d}
.banner.clear{border-color:#25866f;background:#25866f;box-shadow:none}
.banner.clear{border-color:#25866fa8;background:#25866fa8}
.banner.clear{border-color:#12664fa8;background:#12664fa8}
.elite-battle-hud>small{top:calc(100% + 1px)}
.enemy.midboss .hp{display:none}
/* Updated artwork only; deployment-era battlefield UI remains unchanged. */
.growth-coin-wallet img{content:url("assets/ui/gold-currency.png");image-rendering:auto;filter:none}
.premium-wallet .diamond-wallet i{width:18px;height:18px;flex:0 0 18px;clip-path:none;background:transparent url("assets/ui/diamond.png") center/contain no-repeat;-webkit-mask:none;mask:none;filter:none}
.premium-wallet .diamond-wallet i:before,.premium-wallet .diamond-wallet i:after{display:none}
.summon-ticket-wallet img,.summon-cost-icon{content:url("assets/ui/summon-ticket-1019.png");image-rendering:auto;transform:none;filter:none}
.mobile-panel[data-panel="battle"] .deployment-wallet:before{content:"";width:20px;height:20px;display:inline-block;background:url("assets/ui/summon-silver-currency.png") center/contain no-repeat;color:transparent;font-size:0;text-shadow:none}
.battlefield[data-region="0"]{background-image:url("assets/battlefields/wind-garden-reference-v3.png");background-size:110% 110%;background-position:center}

/* Reinstated compact battle layout from immediately before the release-UI restore. */
.battle-header-wallet{display:none}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>header{height:72px;flex:0 0 72px;justify-content:flex-start;gap:8px;padding:6px 12px;border-bottom:0}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>header>div:first-child{display:none}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>header .stats{flex:1;min-width:0}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .stage-tools{width:auto;gap:5px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .stage-tools>button{width:26px;height:26px;min-width:0;flex:0 0 26px;display:flex;align-items:center;justify-content:center;padding:0;gap:0;border:1.5px solid #6e86a0;border-radius:50%;background:#eef4e5;color:#294761;font:900 0/1 "Malgun Gothic",sans-serif;white-space:nowrap;box-shadow:inset 0 1px #fff,0 1px 2px #26313a22}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .stage-tools>button:before{content:"";flex:0 0 13px;width:13px;height:13px;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #skipButton{background:#f8e4a7;color:#305578;border-color:#b7954f;font-size:0}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #resetButton{background:#ddd0f4;border-color:#8a78b5}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #skipButton:before{-webkit-mask-image:url("assets/ui/casual-skip.svg");mask-image:url("assets/ui/casual-skip.svg")}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #musicButton:before{-webkit-mask-image:url("assets/ui/casual-music.svg");mask-image:url("assets/ui/casual-music.svg")}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #resetButton:before{-webkit-mask-image:url("assets/ui/casual-reset.svg");mask-image:url("assets/ui/casual-reset.svg")}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #autoButton:before,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #speedButton:before{display:none}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .stats #autoButton,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .stats #speedButton{font-size:10px;letter-spacing:-.5px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet{display:flex;flex:0 0 auto;gap:8px;min-width:0}
.battle-header-wallet .growth-coin-wallet,.battle-header-wallet .diamond-wallet{display:flex;align-items:center;gap:3px;min-width:40px;height:30px;padding:0 4px;border-radius:0;background:transparent}
.battle-header-wallet .growth-coin-wallet img{width:20px;height:20px}.battle-header-wallet b{font-size:13px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-page-header{display:none}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>.battlefield{width:calc(100% - 14px);height:auto;min-height:0;flex:0 0 294px;align-self:center;border-radius:13px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>.controls{padding:9px 12px 12px;border-top:0}
.battlefield .battle-location{left:50%;right:auto;top:9px;width:154px;height:43px;justify-content:center;padding:0 12px;transform:translateX(-50%);border:2px solid #b99b57;border-radius:9px;background:#29425d;box-shadow:inset 0 0 0 2px #49647e,0 2px 3px #17212977;text-align:center}
.battlefield .battle-location:before,.battlefield .battle-location:after{content:"";position:absolute;top:50%;width:8px;height:8px;transform:translateY(-50%) rotate(45deg);background:#29425d;border:2px solid #b99b57}.battlefield .battle-location:before{left:-6px}.battlefield .battle-location:after{right:-6px}
.battlefield .battle-location button{display:none}.battlefield .battle-location span,.battlefield .battle-location i,.battlefield .battle-location b{font-size:12px}
.battlefield .wave-panel{left:50%;right:auto;top:60px;bottom:auto;width:104px;transform:translateX(-50%)}
.battlefield .wave-panel>div{height:6px;border:2px solid #567590;border-radius:5px;background:#29445f;overflow:visible}.battlefield .wave-panel i{border-radius:3px;background:#d9a83e}.battlefield .wave-panel span{left:50%;right:auto;top:11px;bottom:auto;transform:translateX(-50%);color:#fff;font-size:10px;white-space:nowrap}
.battlefield .castle{left:8px;top:8px;width:56px;height:34px;border:0;border-radius:9px;background:#263d56e8;box-shadow:0 2px 3px #17212966}.battlefield .idle-chest{left:13px;bottom:12px}
.mobile-panel[data-panel="battle"] .battle-menu-head{min-height:34px;align-items:center}.mobile-panel[data-panel="battle"] .battle-deck-heading:before{content:"";width:26px;height:26px;background:#385b7d;-webkit-mask:url("assets/ui/casual-helmet.svg") center/contain no-repeat;mask:url("assets/ui/casual-helmet.svg") center/contain no-repeat}.mobile-panel[data-panel="battle"] .deployment-count{font-size:14px;color:#263f59}.mobile-panel[data-panel="battle"] .deployment-count b{color:#263f59}.mobile-panel[data-panel="battle"] .battle-deck-heading button{width:28px;height:28px;margin-left:3px;border:2px solid #7b91a4;border-radius:7px;background:#fff8df}
.mobile-panel[data-panel="battle"] .deployment-wallet{height:30px;display:flex;align-items:center;gap:5px;padding:0 11px;border:0;border-radius:9px;background:#29425d;color:#fff;font-size:12px}.mobile-panel[data-panel="battle"] .deployment-wallet b{margin:0;color:#ffd45c;font-size:13px}
.mobile-panel[data-panel="battle"] .hero-cards{display:flex;gap:6px;margin-top:6px;padding:2px 0 6px;overflow:visible}.mobile-panel[data-panel="battle"] .hero-cards>.card{flex:1 1 0;width:auto;min-width:0;height:82px;min-height:82px}

/* Restore only the deployment-era battlefield stage and progress HUD. */
.battlefield .battle-location{left:auto;right:10px;top:8px;width:auto;height:auto;justify-content:flex-start;padding:0;transform:none;border:0;border-radius:0;background:transparent;box-shadow:none;text-align:left}
.battlefield .battle-location:before,.battlefield .battle-location:after{display:none}
.battlefield .battle-location button{display:grid}.battlefield .battle-location span,.battlefield .battle-location i,.battlefield .battle-location b{font-size:11px}
.battlefield .wave-panel{left:auto;right:12px;top:auto;bottom:13px;width:118px;padding:0;transform:none;border:0;border-radius:0;background:transparent}
.battlefield .wave-panel>div{position:relative;height:8px;margin:0;overflow:visible;border:2px solid #26313a;border-radius:6px;background:#172129}
.battlefield .wave-panel i{position:absolute;inset:0 auto 0 0;border-radius:4px;background:#e5b83f}
.battlefield .wave-panel span{position:absolute;z-index:1;left:auto;right:2px;top:auto;bottom:5px;display:block;transform:none;color:#fff;font-size:10px;line-height:1;white-space:nowrap;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
.battlefield .castle{left:9px;top:9px;width:53px;height:32px;transform:none;border:2px solid #fff8;border-radius:7px;flex-direction:row;gap:4px;background:#26313add;box-shadow:none;font-size:10px}
.battlefield .castle span{font-size:14px;line-height:1}.battlefield .castle b{font-size:11px}
.battlefield .castle{border:0}
.battlefield .idle-chest{background:transparent url("assets/ui/idle-treasure-chest-casual.png") center/contain no-repeat}
.battlefield .idle-chest .chest-lid,.battlefield .idle-chest .chest-body{display:none}
.battlefield .idle-chest.ready:before,.battlefield .idle-chest.ready:after{content:"";position:absolute;z-index:2;width:9px;height:9px;background:#fff2a3;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 3px #ffc83d);opacity:0;pointer-events:none;animation:chestCasualSparkle 2.2s ease-in-out infinite}
.battlefield .idle-chest.ready:before{right:1px;top:2px}
.battlefield .idle-chest.ready:after{left:2px;top:19px;width:6px;height:6px;animation-delay:1.05s}
@keyframes chestCasualSparkle{0%,18%,100%{opacity:0;transform:scale(.35) rotate(0)}7%{opacity:1;transform:scale(1) rotate(18deg)}12%{opacity:.65;transform:scale(.72) rotate(32deg)}}
.battlefield .idle-chest.ready:before,.battlefield .idle-chest.ready:after{display:none}
.battlefield .idle-chest .chest-sparkle{display:none}
.battlefield .idle-chest.ready .chest-sparkle{position:absolute;z-index:2;display:block;width:13px;height:13px;background:#fff2a3;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 4px #ffc83d);opacity:0;pointer-events:none;animation:chestCasualSparkle 2.35s ease-in-out infinite}
.battlefield .idle-chest.ready .chest-sparkle:nth-of-type(1){right:-2px;top:-1px}
.battlefield .idle-chest.ready .chest-sparkle:nth-of-type(2){left:-3px;top:16px;width:10px;height:10px;animation-delay:.78s}
.battlefield .idle-chest.ready .chest-sparkle:nth-of-type(3){right:5px;bottom:4px;width:8px;height:8px;animation-delay:1.5s}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode){background:var(--cream)}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>header{padding-left:12px;padding-right:12px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>.battlefield{width:calc(100% - 24px)}
.battle-header-wallet .growth-coin-wallet b{color:#26313a}
.mobile-panel[data-panel="battle"] .battle-shortcuts button{border:0}
.enemy-foot-range-guide{display:none}
.battlefield.show-enemy-foot-range .enemy-foot-range-guide{position:absolute;z-index:30;inset:0;display:block;pointer-events:none;background:linear-gradient(to top,transparent 14%,#ffdc5424 14% calc(29% + 6px),transparent calc(29% + 6px))}
.enemy-foot-range-guide>i{position:absolute;left:0;right:0;height:0;border-top:2px dashed #ffef72;filter:drop-shadow(0 1px 1px #5a3200)}
.enemy-foot-range-guide>i.range-upper{bottom:calc(29% + 6px)}.enemy-foot-range-guide>i.range-lower{bottom:14%}
.enemy-foot-range-guide>i b{position:absolute;right:7px;bottom:3px;padding:2px 4px;border-radius:3px;background:#33230fd9;color:#fff4a3;font:900 8px/1 "Malgun Gothic",sans-serif;font-style:normal;text-shadow:0 1px #000}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #laneGuideButton{font-size:13px;line-height:1}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #laneGuideButton:before{display:none}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) #laneGuideButton.active{border-color:#b7954f;background:#f8e4a7;color:#8a5d12}
.game-shell.summon-mode #laneGuideButton,.game-shell:is(.event-mode,.quest-mode) #laneGuideButton,.game-shell.equipment-mode #laneGuideButton,.game-shell.bag-mode #laneGuideButton{display:none}
.battlefield .battle-location button{display:grid}
.battlefield .battle-location button img{image-rendering:auto;filter:none}
.world-travel-route img{image-rendering:auto}
.battlefield .battle-location button,.battlefield .battle-location button img,.world-travel-route img{filter:none}
.growth-coin-wallet img,.diamond-wallet i,.summon-ticket-wallet img,.summon-cost-icon{filter:none}
.mobile-panel[data-panel="battle"] .deployment-wallet:before{filter:none}
.battlefield .battle-location button img{width:24px;height:24px}
.battlefield .battle-location{-webkit-text-stroke:2px #172129}
.battle-bottom-tools{display:none}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>.battle-bottom-tools{display:flex;flex:0 0 42px;align-items:center;justify-content:center;gap:12px;padding:4px 12px 8px;background:var(--cream)}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-bottom-tools #autoButton,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-bottom-tools #speedButton,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-bottom-tools #laneGuideButton{font-size:10px}
.mobile-panel[data-panel="battle"] .deployment-wallet>span{color:#fff;font-size:12px}
.mobile-panel[data-panel="battle"] .card .price{display:flex;align-items:center;justify-content:center;gap:2px}
.mobile-panel[data-panel="battle"] .card .price img{display:block;width:12px;height:12px;object-fit:contain;image-rendering:auto;filter:none}
.mobile-panel[data-panel="battle"] .card .price{left:auto;right:5px;bottom:5px;width:auto;font-size:13px}
.mobile-panel[data-panel="battle"] .card .price{font-size:15px}
.mobile-panel[data-panel="battle"] .card .price img{width:15px;height:15px}
.mobile-panel[data-panel="battle"] .battle-deck-heading:before{display:none}
.battle-header-shortcuts{display:none}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-shortcuts{order:-1;display:flex;align-items:center;gap:12px;flex:0 0 auto}
.battle-header-shortcuts button{position:relative;display:grid;place-items:center;width:48px;height:48px;padding:0;border:0;background:transparent;cursor:pointer}
.battle-header-shortcuts img{display:block;width:46px;height:46px;object-fit:contain;filter:none}
.battle-header-shortcuts button span{position:absolute;right:-5px;bottom:1px;color:#fff;font:900 13px/1 "Malgun Gothic",system-ui,sans-serif;letter-spacing:.2px;white-space:nowrap;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet{gap:12px;padding:0;background:transparent}
.battle-header-wallet .growth-coin-wallet,.battle-header-wallet .diamond-wallet{position:relative;min-width:70px;height:34px;justify-content:flex-end;gap:0;padding:0 11px 0 35px;border-radius:17px;background:#29425d}
.battle-header-wallet .growth-coin-wallet img,.battle-header-wallet .diamond-wallet i{position:absolute;z-index:1;left:-3px;top:50%;width:36px;height:36px;flex-basis:36px;transform:translateY(-50%)}
.battle-header-wallet b,.battle-header-wallet .growth-coin-wallet b{height:34px;line-height:34px;color:#fff;font-size:18px;font-weight:900}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>header{padding-left:22px;padding-right:22px}
.battle-header-wallet .growth-coin-wallet,.battle-header-wallet .diamond-wallet{height:36px;gap:5px;padding:0 3px}
.battle-header-wallet .growth-coin-wallet img,.battle-header-wallet .diamond-wallet i{width:26px;height:26px;flex-basis:26px}
.battle-header-wallet b,.battle-header-wallet .growth-coin-wallet b{height:26px;line-height:26px;font-size:16px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet{gap:12px;padding:0;background:transparent}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .growth-coin-wallet,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .diamond-wallet{position:relative;min-width:70px;height:34px;justify-content:flex-end;gap:0;padding:0 11px 0 35px;border-radius:17px;background:#29425d}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .growth-coin-wallet img,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .diamond-wallet i{position:absolute;z-index:1;left:-3px;top:50%;width:36px;height:36px;flex-basis:36px;transform:translateY(-50%)}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet b,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .growth-coin-wallet b{height:34px;line-height:34px;color:#fff;font-size:18px;font-weight:900}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet{gap:13px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .growth-coin-wallet,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .diamond-wallet{min-width:68px;height:30px;padding:0 10px 0 34px;border-radius:15px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .growth-coin-wallet img,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .diamond-wallet i{left:-3px;width:36px;height:36px;flex-basis:36px}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet b,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .growth-coin-wallet b{height:30px;line-height:30px}
.mobile-panel[data-panel="battle"] .battle-menu-head{margin-left:10px;margin-right:10px}
.mobile-panel[data-panel="battle"] .deployment-wallet{border-radius:15px}
.mobile-panel[data-panel="battle"] .battle-deck-heading button{border-color:#b9a269;background:#fff4cd}
.battle-adventure-heading{display:flex;align-items:baseline;gap:6px;margin:12px 10px 0;color:#263f59}
.battle-adventure-heading strong{font-size:14px;font-weight:900}
.battle-adventure-heading small{color:#a99a78;font-size:9px;font-weight:800;letter-spacing:1px}
.battle-adventure-heading+.battle-shortcuts{margin-top:6px}
.game-shell.tutorial-pending .battle-adventure-heading,.game-shell:has(.battlefield[data-tutorial="true"]) .battle-adventure-heading{display:none}
.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .growth-coin-wallet img,.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode) .battle-header-wallet .diamond-wallet i{left:-6px}
.game-shell>header{height:80px;flex:0 0 80px;justify-content:flex-start;gap:8px;padding:6px 22px;border-bottom:0}
.game-shell>header>div:first-child{display:none}
.game-shell>header .stats{flex:1;min-width:0}
.game-shell .battle-header-shortcuts{order:-1;display:flex;align-items:center;gap:12px;flex:0 0 auto}
.game-shell .battle-header-wallet{display:flex;flex:0 0 auto;gap:13px;padding:0;background:transparent}
.game-shell .battle-header-wallet .growth-coin-wallet,.game-shell .battle-header-wallet .diamond-wallet{position:relative;min-width:68px;height:30px;justify-content:flex-end;gap:0;padding:0 10px 0 34px;border-radius:15px;background:#29425d}
.game-shell .battle-header-wallet .growth-coin-wallet img,.game-shell .battle-header-wallet .diamond-wallet i{position:absolute;z-index:1;left:-6px;top:50%;width:36px;height:36px;flex-basis:36px;transform:translateY(-50%)}
.game-shell .battle-header-wallet b,.game-shell .battle-header-wallet .growth-coin-wallet b{height:30px;line-height:30px;color:#fff;font-size:18px;font-weight:900}
.mobile-panel[data-panel="event"] .panel-header .premium-wallet,.mobile-panel[data-panel="equipment"] .panel-header .premium-wallet,.mobile-panel[data-panel="bag"] .panel-header .premium-wallet{display:none}
.mobile-panel[data-panel="event"]>.panel-header,.mobile-panel[data-panel="equipment"]>.panel-header,.mobile-panel[data-panel="bag"]>.panel-header{display:none}
.mobile-panel[data-panel="summon"]>.panel-header{height:24px;justify-content:flex-end;margin:0 0 6px;padding:0 2px;border:0}
.mobile-panel[data-panel="summon"]>.panel-header>p{display:none}
.game-shell:is(.event-mode,.quest-mode) .controls,.game-shell.summon-mode .controls,.game-shell.equipment-mode .controls,.game-shell.bag-mode .controls{padding-top:0;border-top:0}
.header-summon-ticket-wallet{display:none}
.game-shell.summon-mode .header-summon-ticket-wallet{position:relative;display:flex;align-items:center;justify-content:flex-end;min-width:68px;height:30px;padding:0 10px 0 34px;border-radius:15px;background:#29425d}
.game-shell.summon-mode .header-summon-ticket-wallet img{position:absolute;z-index:1;left:-6px;top:50%;width:36px;height:36px;object-fit:contain;transform:translateY(-50%);filter:none}
.game-shell.summon-mode .header-summon-ticket-wallet b{height:30px;line-height:30px;color:#fff;font-size:18px;font-weight:900}
.game-shell.summon-mode .mobile-panel[data-panel="summon"]>.panel-header{display:none}
.game-shell>header{height:80px!important;flex-basis:80px!important}
.bottom-nav button{font-size:14px}
.bottom-nav button span{width:28px;height:28px;margin:0 auto 5px;background:currentColor;font-size:0;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.bottom-nav [data-tab="event"] span{-webkit-mask-image:url("assets/ui/nav-event-calendar.svg");mask-image:url("assets/ui/nav-event-calendar.svg")}
.bottom-nav [data-tab="summon"] span{-webkit-mask-image:url("assets/ui/nav-summon-star.svg");mask-image:url("assets/ui/nav-summon-star.svg")}
.bottom-nav [data-tab="battle"] span{-webkit-mask-image:url("assets/ui/nav-battle-swords.svg");mask-image:url("assets/ui/nav-battle-swords.svg")}
.bottom-nav [data-tab="equipment"] span{-webkit-mask-image:url("assets/ui/nav-hero-helmet.svg");mask-image:url("assets/ui/nav-hero-helmet.svg")}
.bottom-nav [data-tab="bag"] span{-webkit-mask-image:url("assets/ui/nav-bag-briefcase.svg");mask-image:url("assets/ui/nav-bag-briefcase.svg")}
.bottom-nav button span{background-color:transparent;background-position:center;background-size:contain;background-repeat:no-repeat;-webkit-mask:none;mask:none}
.bottom-nav [data-tab="event"] span{background-image:url("assets/ui/nav-event-user.png")}
.bottom-nav [data-tab="summon"] span{background-image:url("assets/ui/nav-summon-user.png")}
.bottom-nav [data-tab="battle"] span{background-image:url("assets/ui/nav-battle-user.png")}
.bottom-nav [data-tab="equipment"] span{background-image:url("assets/ui/nav-hero-user.png")}
.bottom-nav [data-tab="bag"] span{background-image:url("assets/ui/nav-bag-user.png")}
.bottom-nav [data-tab] span{-webkit-mask-image:none;mask-image:none}
.bottom-nav button span{margin-bottom:2px}
.bottom-nav button:not(.active) span{filter:grayscale(1) brightness(1.15);opacity:.82}
.bottom-nav button.active span{filter:none;opacity:1}
.bottom-nav{height:80px;flex:0 0 80px}
.bottom-nav button.active{box-shadow:inset 0 2px #ffd45c}
.game-shell.summon-mode .header-summon-ticket-wallet{order:0}
.game-shell.summon-mode .growth-coin-wallet{order:1}
.game-shell.summon-mode .diamond-wallet{order:2}
.mobile-panel[data-panel="battle"] .hero-cards>.card,
#equipmentHeroes button{
  box-shadow:none!important;
}
.event-card-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  padding:1px 1px 12px;
}
.event-card,
.event-card.open-event-card,
.event-card.paladin-event-card,
.event-card.standard-summon-card{
  aspect-ratio:1!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  padding:0 9px 11px!important;
  border-radius:9px;
  text-align:left!important;
}
.event-card i,
.event-card.open-event-card i,
.event-card.paladin-event-card i,
.event-card.standard-summon-card i{
  position:absolute!important;
  z-index:2;
  left:9px;
  right:9px;
  bottom:31px;
  display:block!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border-radius:0!important;
  background:none!important;
  color:#ffe182!important;
  font-size:7px!important;
  font-style:normal;
  font-weight:1000!important;
  line-height:1!important;
  letter-spacing:1px!important;
  text-shadow:0 1px 2px #000,0 0 3px #000;
}
.event-card strong,
.event-card.open-event-card strong,
.event-card.paladin-event-card strong,
.event-card.standard-summon-card strong{
  position:absolute!important;
  z-index:2;
  left:9px;
  right:9px;
  bottom:11px;
  max-width:none!important;
  color:#fff8df!important;
  font-size:15px!important;
  font-weight:1000;
  line-height:1.1!important;
  white-space:nowrap!important;
  text-shadow:0 1px 2px #000,0 0 3px #000!important;
}
.event-card>span{display:none!important}
.event-card.open-event-card{background-position:center,center -20px!important}
.event-card.standard-summon-card{background-position:center,calc(78% - 6px) calc(50% - 20px)!important}
.event-card.open-event-card,
.event-card.standard-summon-card{
  border:0!important;
}
.mobile-panel[data-panel="equipment"].active{
  display:flex;
  flex-direction:column;
}
.mobile-panel[data-panel="equipment"] .hero-status{
  flex:0 0 305px;
  width:100%;
  height:305px;
  min-height:305px;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:8px;
}
.mobile-panel[data-panel="equipment"] .hero-status>.hero-loadout,
.mobile-panel[data-panel="equipment"] .hero-status>.hero-info{
  min-height:0;
  height:100%;
}
.mobile-panel[data-panel="equipment"] .hero-status>.hero-info{
  overflow:hidden;
}
.hero-loadout .hero-art-preview-button{
  left:12px;
  right:auto;
  top:12px;
}
.hero-loadout .equipped-slots,
.locked-hero-preview .equipped-slots{
  left:10px;
  right:10px;
  top:62px;
  width:auto;
  height:154px;
  grid-template-columns:42px 42px;
  grid-template-rows:repeat(3,42px);
  row-gap:14px;
  transform:none;
}
.hero-loadout .equipped-slots>div{
  width:42px;
  height:42px;
}
.hero-loadout .equipped-slots .equipment-icon{
  top:4px;
  width:28px;
  height:28px;
}
.hero-loadout .loadout-hero,
.hero-loadout:not(.locked-hero-preview) .loadout-hero,
.locked-hero-preview .loadout-hero{
  left:50%;
  top:46%;
  width:86px;
  height:86px;
}
.hero-loadout>.hero-growth{
  left:10px;
  right:10px;
  bottom:63px;
}
.hero-loadout .loadout-actions{
  left:50%;
  top:auto;
  bottom:12px;
  width:calc(100% - 38px);
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  transform:translateX(-50%);
}
.hero-loadout .loadout-actions button,
.hero-loadout .loadout-actions .auto-equip-button{
  width:100%;
  height:30px;
  font-size:10px;
}
.hero-info .profile-identity{
  position:relative;
  display:block;
  height:92px;
}
.hero-info .profile-identity>div{
  position:absolute;
  left:8px;
  right:0;
  top:10px;
}
.hero-info .profile-identity small{
  position:relative;
  left:2px;
  top:-2px;
  font-size:10px;
  line-height:1;
}
.hero-info .profile-identity strong{
  margin:3px 0 9px;
  font-size:24px;
  line-height:1;
}
.hero-info .profile-identity .hero-profile-level{
  position:absolute;
  right:8px;
  top:25px;
  display:flex;
  align-items:baseline;
  gap:2px;
  color:#aaa18f;
  font-size:14px;
  font-weight:800;
  line-height:1;
}
.hero-info .profile-identity .hero-profile-level em{
  color:#e7bd53;
  font-style:normal;
}
.hero-info .profile-identity .hero-profile-level i{
  color:#aaa18f;
  font-style:normal;
}
.hero-loadout .loadout-hero,
.hero-loadout:not(.locked-hero-preview) .loadout-hero,
.locked-hero-preview .loadout-hero{
  top:calc(45% + 18px);
  width:94px;
  height:94px;
}
.hero-loadout:not(.locked-hero-preview) .loadout-hero{
  filter:none;
}
.hero-info .profile-identity>b{
  position:absolute;
  left:0;
  right:0;
  top:62px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  height:30px;
  margin:0;
  padding:0 10px;
  border-radius:6px;
  font-size:10px;
}
.hero-info .profile-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(3,minmax(24px,auto));
  grid-auto-flow:column;
  gap:0 10px!important;
  margin-top:8px;
}
.hero-info .profile-stats div,
.hero-info .profile-stats .trait-stat{
  min-height:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:2px 8px;
  border:0;
  background:transparent;
  text-align:left;
}
.hero-info .profile-stats span{
  color:#aaa49a;
  font-size:9px;
}
.hero-info .profile-stats b,
.hero-info .profile-stats .trait-stat b{
  margin:0;
  color:#f2e5c7;
  font-size:13px;
}
.profile-fixed-rules{
  margin-top:5px;
  gap:4px;
}
.hero-info>.star-next-effect{
  margin-top:5px;
}
.mobile-panel[data-panel="equipment"] .equipment-heroes{
  flex:0 0 auto;
  grid-auto-rows:72px;
  gap:6px;
  margin-top:8px;
  padding:0;
}
.mobile-panel[data-panel="equipment"] .equipment-heroes button,
.mobile-panel[data-panel="equipment"] .equipment-heroes button.owned,
.mobile-panel[data-panel="equipment"] .equipment-heroes button.locked{
  height:72px;
  min-height:72px;
}
.hero-loadout>.hero-growth .growth-head{
  justify-content:center;
}
.hero-loadout>.hero-growth .growth-head>span,
.hero-loadout>.hero-growth .growth-head>b,
.hero-loadout>.hero-growth .fragment-head,
.hero-loadout>.hero-growth .fragment-bar{
  display:none;
}
.hero-info .profile-fixed-rules,
.hero-info>.star-next-effect{
  display:none;
}
.mobile-panel[data-panel="equipment"] .hero-status{
  border:0;
  box-shadow:none;
}
.mobile-panel[data-panel="equipment"] .hero-loadout{
  isolation:isolate;
  border:0;
  border-radius:10px;
  background:#191d1f;
}
.mobile-panel[data-panel="equipment"] .hero-loadout:before{
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:url("assets/ui/hero-profile-hall-v1.png") center/cover no-repeat;
  opacity:.8;
  pointer-events:none;
}
.bottom-nav button.has-notice:after,
.equipment-notice-dot,
.hero-slot-notice,
#quickQuestButton.has-notice:before,
.deck-empty.recruit-notice:after,
.deck-selected-empty.recruit-notice:after,
.deck-roster .deck-hero.recruit-notice:after{
  box-sizing:border-box!important;
  width:12px!important;
  min-width:12px!important;
  max-width:12px!important;
  height:12px!important;
  min-height:12px!important;
  max-height:12px!important;
  border:2px solid #fff3d5!important;
  border-radius:50%;
  background:#e3413d;
  box-shadow:0 1px 3px #0008;
  transform:none!important;
  animation:none!important;
}
.hero-loadout>.hero-growth .growth-head>strong{
  display:flex;
  gap:0;
}
.hero-loadout>.hero-growth .growth-head>strong i{
  display:block;
  width:22px;
  height:22px;
  flex:0 0 22px;
  background:url("assets/ui/star-empty-casual.png") center/contain no-repeat;
  color:transparent;
  font-size:0;
  text-shadow:none;
}
.hero-loadout>.hero-growth .growth-head>strong i.filled{
  background-image:url("assets/ui/star-filled-casual.png");
  color:transparent;
  text-shadow:none;
}
.hero-loadout>.hero-growth .growth-head>strong i+i{
  margin-left:-2px;
}
.hero-loadout .loadout-actions:has(>button:only-child){
  width:82px;
  grid-template-columns:1fr;
}
.hero-loadout .loadout-actions button,
.hero-loadout .loadout-actions .auto-equip-button{
  font-size:11px;
}
@keyframes equipmentSlotShake{
  0%,100%{transform:translateY(0)}
  25%{transform:translateY(-2px)}
  50%{transform:translateY(2px)}
  75%{transform:translateY(-1px)}
}
.hero-loadout .equipped-slots>div.equipment-slot-shake{
  animation:equipmentSlotShake 280ms ease-out both;
}
.hero-info .profile-stats .trait-stat{
  grid-column:1/-1;
  grid-row:4;
  margin-top:3px;
  border-top:1px solid #51493d;
}
.hero-info .profile-stats .trait-stat span{
  color:#e7bd53;
  font-weight:900;
  text-shadow:0 0 4px #b47c2455;
}
.hero-loadout .hero-art-preview-button{
  left:12px;
  right:auto;
  top:12px;
  width:28px;
  height:28px;
  border:2px solid #a98b50;
  border-radius:6px;
  background:#292820e8 url("assets/ui/hero-preview-magnifier.png") center/18px 18px no-repeat;
  box-shadow:inset 0 0 0 2px #4d402b,0 2px 3px #0008;
}
.hero-loadout .hero-art-preview-button:before{
  display:none;
  left:6px;
  top:5px;
  width:10px;
  height:10px;
  border:2px solid #f1dda0;
  border-radius:50%;
  box-shadow:0 1px 1px #000,0 0 3px #c99d47;
}
.hero-loadout .hero-art-preview-button:after{
  display:none;
  left:15px;
  top:16px;
  width:7px;
  height:2px;
  border-radius:2px;
  background:#f1dda0;
  box-shadow:0 1px 1px #000,0 0 2px #c99d47;
}
.hero-status:has(.locked-hero-preview) .hero-info .profile-stats,
.hero-status:has(.locked-hero-preview) .hero-info .profile-fixed-rules,
.hero-status:has(.locked-hero-preview) .hero-info>.star-next-effect,
.hero-status:has(.locked-hero-preview) .hero-profile-level,
.hero-status .locked-hero-preview>.hero-growth{
  display:none!important;
}
.locked-hero-preview .profile-lock{
  inset:auto 0 16px;
  height:62px;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.locked-hero-preview .profile-lock span{
  flex:0 0 30px;
  width:30px;
  height:30px;
  background:url("assets/ui/hero-locked-padlock.png") center/contain no-repeat;
  filter:drop-shadow(0 2px 1px #0006);
}
.locked-hero-preview .profile-lock span:before,
.locked-hero-preview .profile-lock span:after{
  display:none;
}
.locked-hero-preview .profile-lock b{
  margin:0;
  min-width:56px;
  height:24px;
  display:grid;
  place-items:center;
  padding:0 12px;
  border-radius:999px;
  line-height:1;
  text-align:center;
}
#closeEquipmentModal,
#closeBagDetail,
#closeBulkSell,
#closeDeckEdit,
#closeWorldMap,
#closeQuestModal{
  box-sizing:border-box;
  width:32px!important;
  min-width:32px;
  height:32px!important;
  min-height:32px;
  display:grid;
  place-items:center;
  padding:0!important;
  border:0!important;
  border-radius:50%!important;
  background:#15191b url("assets/ui/modal-close-x.png") center/16px 16px no-repeat!important;
  color:transparent!important;
  font-size:0!important;
  cursor:pointer;
}
#closeHeroLevelModal{box-sizing:border-box;width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:#15191b url("assets/ui/modal-close-x.png") center/16px no-repeat;color:transparent;font-size:0;cursor:pointer}
.hero-level-modal{position:fixed;z-index:90;inset:0;display:grid;place-items:center;background:#111827b8;padding:14px}.hero-level-modal[hidden]{display:none}
.hero-level-dialog{box-sizing:border-box;width:min(430px,100%);padding:18px;border:2px solid #8f7138;border-radius:16px;background:#f7e9ae;color:#27313a;box-shadow:0 14px 45px #0008}.hero-level-dialog header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.hero-level-dialog header p{margin:0;color:#a87824;font-size:9px;font-weight:900;letter-spacing:1.3px}.hero-level-dialog header h2{margin:2px 0 0;font-size:22px}.hero-level-summary{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;background:#202529;color:#fff}.hero-level-summary img{width:72px;height:72px;object-fit:contain}.hero-level-summary div{display:grid;gap:2px}.hero-level-summary small{color:#e6c66f;font-weight:900}.hero-level-summary strong{font-size:25px}.hero-level-summary span{color:#bdc4c8;font-size:11px}.hero-exp-head{display:flex;justify-content:space-between;margin:15px 2px 5px;font-size:12px;font-weight:900}.hero-exp-bar{height:12px;overflow:hidden;border:2px solid #766848;border-radius:999px;background:#d4c99e}.hero-exp-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e4aa31,#ffe27b);transition:width .2s}.hero-material-heading{margin:16px 0 8px;font-size:13px;font-weight:900}.hero-exp-materials{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.hero-exp-material{position:relative;min-height:82px;padding:7px 3px;border:2px solid #aa9a6c;border-radius:10px;background:#fff8dd;color:#393424;font-weight:900;cursor:pointer}.hero-exp-material.selected{border-color:#d69b2a;background:#ffe8８a;box-shadow:0 0 0 2px #fff4c8 inset}.hero-exp-material i{display:grid;place-items:center;width:38px;height:38px;margin:auto;border-radius:7px;background:linear-gradient(145deg,#f0cf63,#a87524);color:#fff;font-style:normal;font-size:20px}.hero-exp-material span,.hero-exp-material b{display:block;font-size:10px}.hero-exp-material em{position:absolute;right:5px;top:5px;min-width:18px;padding:2px 4px;border-radius:10px;background:#29333b;color:#fff;font:900 9px/1 sans-serif}.hero-auto-material{width:100%;height:30px;margin-top:9px;border:1px solid #9b8756;border-radius:7px;background:#fff8df;color:#66542c;font-weight:900}.hero-level-cost{min-height:42px;display:flex;align-items:center;justify-content:center;gap:9px;margin:12px 0 8px;padding:7px;border-radius:8px;background:#ded1a4;font-size:11px;font-weight:900}.hero-level-cost span{display:inline-flex;align-items:center;gap:4px}.hero-level-cost i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#d79b27;color:#fff;font-style:normal}.hero-level-confirm{width:100%;height:42px;border:2px solid #8e641c;border-radius:9px;background:linear-gradient(#ffd967,#d99b27);color:#51370d;font-size:15px;font-weight:1000;cursor:pointer}.hero-level-confirm:disabled{filter:grayscale(.7);opacity:.6}
.hero-exp-material.selected{background:#ffe88a}
.hero-exp-material>img{display:block;width:48px;height:48px;margin:0 auto 1px;object-fit:contain}.hero-exp-material>small{display:block;color:#a26412;font-size:9px}.bag-slot.bag-material{overflow:hidden;background:#fff2c6}.bag-slot.bag-material img{position:absolute;left:50%;top:43%;width:82%;height:82%;transform:translate(-50%,-50%);object-fit:contain}.bag-slot.bag-material span{position:absolute;z-index:2;left:3px;bottom:3px;color:#5d461e;font-size:8px;font-weight:1000;text-shadow:0 1px #fff}.bag-slot.bag-material b{position:absolute;z-index:3;right:3px;bottom:3px;min-width:22px;padding:2px 4px;border-radius:999px;background:#252c32e8;color:#fff;font-size:8px;text-align:center}
.hero-level-cost .growth-cost-item img{width:31px;height:31px;object-fit:contain}.hero-level-cost .growth-cost-item{gap:2px}.hero-level-cost:has(.growth-cost-item){flex-wrap:wrap}
.bag-slot.bag-material span{display:none}
.bag-slot.bag-material{box-shadow:inset 0 0 0 2px #f3ecd9;background:#e6ddc7}
.bag-slot.bag-material:nth-child(2),.bag-slot.bag-material:nth-child(5){border-color:#4f8fc3;background:#dcebf4;box-shadow:inset 0 0 0 2px #edf8ff}
.bag-slot.bag-material:nth-child(3),.bag-slot.bag-material:nth-child(6){border-color:#8c54c7;background:#eadcf3;box-shadow:inset 0 0 0 2px #f8efff}
.bag-slot.bag-material:nth-child(7){border-color:#d98720;background:#f5df9d;box-shadow:inset 0 0 0 2px #fff0b8}
.bag-slot.bag-material:nth-child(8){border-color:#b93632;background:#ecd0c3;box-shadow:inset 0 0 0 2px #ffe9d8}
.bag-slot.bag-material b{right:3px;bottom:2px;min-width:0;padding:0;border-radius:0;background:transparent;color:#fff;font:900 12px/1 "Malgun Gothic",system-ui,sans-serif;letter-spacing:.2px;text-align:right;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
.bag-slot.bag-material img{top:50%;width:86%;height:86%}
#bagMiscGrid .bag-slot.filled>b{position:absolute;z-index:4;left:auto;right:3px;bottom:2px;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:#fff;font:900 12px/1 "Malgun Gothic",system-ui,sans-serif;letter-spacing:.2px;text-align:right;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
.hero-level-modal{z-index:1720;padding:14px;background:#0a0d0fca}
.hero-level-dialog{width:min(430px,100%);padding:12px;border:3px solid #8e7445;border-radius:14px;background:#202528;color:#eee1c2;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327}
.hero-level-dialog>header{height:auto;display:flex;align-items:center;justify-content:space-between;margin:0;padding:0 0 9px;border-bottom:1px solid #5d503b;background:#202528}
.hero-level-dialog>header p{margin:0;color:#c69a46;font-size:7px;font-weight:900;letter-spacing:2px}
.hero-level-dialog>header h2{margin:2px 0 0;color:#fff2cf;font-size:17px}
.hero-level-summary{margin-top:10px;padding:9px;border:1px solid #5d503b;border-radius:9px;background:#2a2f31;color:#eee1c2}
.hero-level-summary img{width:68px;height:68px}
.hero-level-summary small{color:#c69a46;font-size:9px}.hero-level-summary strong{color:#fff2cf;font-size:22px}.hero-level-summary span{color:#aaa08d;font-size:9px}
.hero-exp-head{margin:12px 2px 5px;color:#cbb17b;font-size:9px}.hero-exp-head b{color:#eee1c2}
.hero-exp-bar{height:10px;border:1px solid #665b49;background:#15191b}.hero-exp-bar i{background:linear-gradient(90deg,#b67824,#f0c85e)}
.hero-material-heading{margin:13px 0 6px;color:#cbb17b;font-size:9px}
.hero-exp-material{min-height:91px;padding:6px 3px;border:2px solid #72644d;border-radius:8px;background:#2a2f31;color:#eee1c2}
.hero-exp-material:nth-child(2){border-color:#4f8fc3;background:#23333e}.hero-exp-material:nth-child(3){border-color:#8c54c7;background:#30243b}
.hero-exp-material.selected{border-color:#e5ba4d;background:#47391f;box-shadow:inset 0 0 0 1px #e5ba4d,0 0 7px #e8b83d55}
.hero-exp-material em{right:4px;top:4px;background:#15191b;color:#fff0c9}.hero-exp-material span{color:#f1dfb9}.hero-exp-material b{color:#aaa08d}
.hero-auto-material{height:31px;margin-top:8px;border:1px solid #776744;border-radius:7px;background:#343a3d;color:#e9dfc1;font-size:10px;cursor:pointer}
.hero-level-cost{min-height:39px;margin:9px 0 8px;padding:6px;border:1px solid #514b40;border-radius:7px;background:#292e30;color:#d4cab5;font-size:9px}.hero-level-cost i{width:21px;height:21px;background:#c28a30;color:#fff7de}
.hero-level-confirm{height:39px;border:2px solid #b28a3e;border-radius:8px;background:#c28a30;color:#fff7de;font:900 12px inherit}.hero-level-confirm:disabled{border-color:#56534c;background:#3b3e3e;color:#888}
.hero-level-summary{display:grid;grid-template-columns:68px minmax(0,1fr);gap:11px;background:linear-gradient(110deg,#292f32,#202528);border:0;border-left:2px solid #a77b34;border-radius:4px;padding:9px 10px}
.hero-level-summary>div{display:block;min-width:0}.hero-level-summary .hero-exp-head{display:flex;margin:7px 0 3px;color:#8f897d;font-size:7px}.hero-level-summary .hero-exp-head b{margin-left:auto;color:#cfc4ad;font-size:8px}.hero-level-summary .hero-exp-bar{width:100%;height:7px;border:0;border-radius:999px;background:#121719;box-shadow:inset 0 1px 2px #0008}.hero-level-summary .hero-exp-bar i{border-radius:inherit;box-shadow:0 0 5px #e8b83d66}
.hero-exp-materials{margin-top:12px;gap:16px;padding:2px 18px}.hero-exp-material{min-height:72px;padding:0;border:0;border-radius:8px;background:transparent;box-shadow:none}.hero-exp-material:nth-child(2),.hero-exp-material:nth-child(3){border:0;background:transparent}.hero-exp-material>img{width:64px;height:64px;margin:auto;transition:transform .14s,filter .14s}.hero-exp-material em{top:auto;right:1px;bottom:0;min-width:34px;padding:2px 4px;border:0;border-radius:999px;background:#15191be8;color:#fff;font:900 9px/1 "Malgun Gothic",sans-serif;text-align:center}.hero-exp-material span,.hero-exp-material b,.hero-exp-material small{display:none}.hero-exp-material.selected,.hero-exp-material.selected:nth-child(2),.hero-exp-material.selected:nth-child(3){border:0;background:radial-gradient(circle,#d8a84238 0,transparent 67%);box-shadow:none}.hero-exp-material.selected>img{transform:translateY(-2px) scale(1.06);filter:drop-shadow(0 3px 4px #0008) drop-shadow(0 0 4px #e8b83d88)}
.hero-auto-material{width:auto;min-width:82px;height:25px;display:block;margin:7px auto 0;border:0;border-bottom:1px solid #8d7445;border-radius:0;background:transparent;color:#cbb17b}
.hero-level-cost{min-height:26px;margin:7px 0 6px;padding:3px;border:0;border-radius:0;background:transparent;color:#bdb29d}.hero-level-cost span+span{padding-left:10px;border-left:1px solid #514b40}
.hero-level-summary{background:#2a2f31;border:1px solid #5d503b;border-left:1px solid #5d503b;border-radius:9px;padding:9px}
.hero-exp-materials{gap:8px;padding:0;margin-top:11px}.hero-exp-material,.hero-exp-material:nth-child(2),.hero-exp-material:nth-child(3){min-height:78px;padding:4px;border:2px solid #72644d;border-radius:9px;background:#2a2f31;box-shadow:inset 0 0 0 1px #3c3327}.hero-exp-material:nth-child(2){border-color:#4f8fc3;background:#23333e}.hero-exp-material:nth-child(3){border-color:#8c54c7;background:#30243b}.hero-exp-material.selected,.hero-exp-material.selected:nth-child(2),.hero-exp-material.selected:nth-child(3){border:2px solid #e5ba4d;background:#47391f;box-shadow:inset 0 0 0 1px #e5ba4d,0 0 7px #e8b83d55}.hero-exp-material>img{width:66px;height:66px}.hero-exp-material em{right:3px;bottom:3px}
.hero-auto-material{width:100%;height:31px;margin:8px 0 7px;border:1px solid #776744;border-radius:7px;background:#343a3d;color:#e9dfc1}
.hero-level-cost[hidden]{display:none}.hero-level-confirm{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px}.hero-level-confirm .confirm-gold{display:inline-flex;align-items:center;gap:3px;padding-left:0;border-left:0}.hero-level-confirm .confirm-gold img{width:22px;height:22px;object-fit:contain}.hero-level-confirm:disabled .confirm-gold img{filter:grayscale(1)}
.hero-level-summary{align-items:start}.hero-level-summary>div{box-sizing:border-box;height:68px;display:flex;flex-direction:column}.hero-level-summary #heroLevelName{display:block;margin-bottom:4px}.hero-level-summary #heroLevelLimit{display:none}.hero-level-summary .hero-exp-head{margin-top:auto}.hero-level-summary .hero-exp-bar{box-sizing:border-box;flex:0 0 7px;height:7px;margin-bottom:0}
.hero-exp-materials{grid-template-columns:repeat(3,92px);justify-content:center;align-items:stretch;gap:12px}.hero-exp-material,.hero-exp-material:nth-child(2),.hero-exp-material:nth-child(3){width:92px;height:92px;min-height:0;aspect-ratio:1}.hero-exp-material>img{width:82%;height:82%}
.hero-material-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:9px}.hero-material-actions .hero-auto-material,.hero-material-actions .hero-reset-material{width:100%;height:31px;margin:0;border:1px solid #776744;border-radius:7px;background:#343a3d;color:#e9dfc1;font:900 10px inherit;cursor:pointer}.hero-material-actions .hero-reset-material{background:#292e30;color:#aaa08d}.hero-level-confirm{margin-top:15px}
.hero-level-summary{position:relative}.hero-level-summary .hero-exp-head{position:absolute;left:89px;right:10px;bottom:18px;margin:0}.hero-level-summary .hero-exp-bar{position:absolute;left:89px;right:10px;bottom:9px;width:auto;margin:0}
.hero-level-stat-preview{display:grid;gap:5px;margin-top:15px;padding:15px 20px;border-radius:7px;background:#111517}.hero-level-stat-preview>div{display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;color:#99907e;font-size:11px}.hero-level-stat-preview b{color:#fff0c9;font-size:17px;text-align:center}.hero-level-stat-preview em{color:#efb735;font-style:normal;font-size:15px;font-weight:900;text-align:right}.hero-level-stat-preview i{color:#9ee82c;font-style:normal;font-size:10px}
.hero-level-progress{margin:20px auto 0;width:76%}.hero-level-progress-head{display:flex;align-items:end;justify-content:space-between}.hero-level-progress-head>strong{color:#fff3cf;font-size:27px;line-height:1}.hero-level-progress-head>strong em{color:#edb23a;font-style:normal;font-size:18px}.hero-level-progress-head>b{color:#d4cab5;font-size:11px}.hero-level-progress-head>b small{color:#918a7d;font-size:7px}.hero-level-progress .hero-exp-bar{position:static;width:100%;height:8px;margin-top:7px;border:0;background:#111517}.hero-level-progress .hero-exp-bar i{border-radius:999px;background:linear-gradient(90deg,#bd8529,#e7ca55)}
.hero-exp-materials{grid-template-columns:repeat(3,64px);gap:17px;margin-top:25px;padding:0;justify-content:center}.hero-exp-material,.hero-exp-material:nth-child(2),.hero-exp-material:nth-child(3){box-sizing:border-box;width:64px;height:64px;aspect-ratio:1;padding:2px;border-radius:8px}.hero-exp-material>img{width:100%;height:100%}.hero-exp-material em{right:-2px;bottom:-1px;min-width:0;padding:0;background:transparent;color:#fff;font:900 10px/1 "Malgun Gothic",sans-serif;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
.hero-material-actions{grid-template-columns:82px minmax(145px,1fr) 82px;align-items:center;gap:11px;margin:26px 9px 0}.hero-material-actions .hero-auto-material,.hero-material-actions .hero-reset-material{height:33px;border:1px solid #756744;border-radius:7px;background:#373a38;color:#eee1c2;font-size:10px}.hero-material-stepper{height:40px;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;border-radius:999px;background:#111517}.hero-material-stepper button{width:34px;height:34px;place-self:center;padding:0;border:1px solid #8e7445;border-radius:50%;background:#333027;color:#eee1c2;font-size:22px;line-height:1;cursor:pointer}.hero-material-stepper b{color:#fff0c9;font-size:21px;text-align:center}.hero-level-dialog>.hero-level-confirm{height:42px;margin-top:34px;border-color:#6a604c;background:#343737}.hero-level-dialog>.hero-level-confirm:not(:disabled){border-color:#b28a3e;background:#c28a30}
.hero-exp-materials .bag-slot.hero-exp-material{width:64px;height:64px;aspect-ratio:1;border:2px solid #a99a79;border-radius:8px;background:#e6ddc7;box-shadow:inset 0 0 0 2px #f3ecd9}.hero-exp-materials .bag-slot.hero-exp-material.rare{border-color:#4f8fc3;background:#e6ddc7;box-shadow:inset 0 0 0 2px #f3ecd9}.hero-exp-materials .bag-slot.hero-exp-material.epic{border-color:#8c54c7;background:#e6ddc7;box-shadow:inset 0 0 0 2px #f3ecd9}.hero-exp-materials .bag-slot.hero-exp-material.selected{border-color:#e5ba4d;box-shadow:inset 0 0 0 2px #fff0b8,0 0 7px #e8b83d88}
.hero-exp-materials .bag-slot.hero-exp-material.selected,.hero-exp-materials .bag-slot.hero-exp-material.rare.selected,.hero-exp-materials .bag-slot.hero-exp-material.epic.selected{background:#e6ddc7}
.hero-material-stepper #heroMaterialMinus,.hero-material-stepper #heroMaterialPlus{background-color:#333027;background-position:center;background-repeat:no-repeat;color:transparent;font-size:0}.hero-material-stepper #heroMaterialMinus{background-image:url("assets/ui/material-minus.png");background-size:17px auto}.hero-material-stepper #heroMaterialPlus{background-image:url("assets/ui/material-plus.png");background-size:18px 18px}
.hero-exp-materials .hero-exp-material.selected>img{transform:translateY(-2px) scale(1.06);filter:none}.hero-exp-materials .hero-exp-material em{right:4px;bottom:4px}
.hero-level-stat-preview i{display:inline-block;width:10px;height:10px;margin-left:2px;background:#a9ef38;vertical-align:-1px;font-size:0;-webkit-mask:url("assets/ui/stat-up-arrow.png") center/contain no-repeat;mask:url("assets/ui/stat-up-arrow.png") center/contain no-repeat;filter:drop-shadow(0 1px 1px #0008)}
.hero-level-stat-preview em{min-height:20px;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;line-height:20px}.hero-level-stat-preview em i{flex:0 0 10px;display:block;margin:0;vertical-align:middle;line-height:1}
.hero-level-stat-preview>div{position:relative;grid-template-columns:1fr 70px 1fr}.hero-level-stat-preview b,.hero-level-stat-preview em{font-size:17px;font-weight:900;line-height:20px}.hero-level-stat-preview b{text-align:center}.hero-level-stat-preview em{justify-content:flex-end;text-align:right}.hero-level-stat-preview .stat-flow-arrow{position:absolute;left:calc(70% - 7px);top:50%;display:block;width:14px;height:14px;transform:translateY(-50%);background:#9b927e;font-size:0;-webkit-mask:url("assets/ui/stat-flow-arrow.png") center/contain no-repeat;mask:url("assets/ui/stat-flow-arrow.png") center/contain no-repeat;filter:none}.hero-level-stat-preview em .stat-up-icon{flex:0 0 14px;width:14px;height:14px;margin:0;transform:translateY(1px);background:#a9ef38;-webkit-mask:url("assets/ui/stat-up-arrow.png") center/contain no-repeat;mask:url("assets/ui/stat-up-arrow.png") center/contain no-repeat;filter:drop-shadow(0 1px 1px #0008)}
.hero-level-dialog{isolation:isolate}.hero-level-dialog:after{content:"";position:absolute;z-index:20;inset:0;border-radius:inherit;background:#fff8d8;opacity:0;pointer-events:none;mix-blend-mode:screen}.hero-level-dialog.level-up-celebrate:after{animation:heroLevelFlash .42s ease-out both}.hero-level-celebration{position:absolute;z-index:21;inset:-24px;pointer-events:none}.hero-level-celebration i{position:absolute;width:17px;height:17px;opacity:0;background:#fff2a3;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);filter:drop-shadow(0 0 5px #ffc83d)}.hero-level-celebration i:nth-child(1){left:2%;top:8%}.hero-level-celebration i:nth-child(2){right:1%;top:13%}.hero-level-celebration i:nth-child(3){left:-1%;top:38%}.hero-level-celebration i:nth-child(4){right:-2%;top:43%}.hero-level-celebration i:nth-child(5){left:3%;bottom:20%}.hero-level-celebration i:nth-child(6){right:2%;bottom:16%}.hero-level-celebration i:nth-child(7){left:24%;bottom:0}.hero-level-celebration i:nth-child(8){right:23%;top:0}.hero-level-dialog.level-up-celebrate .hero-level-celebration i{animation:heroLevelSparkle .75s ease-out both}.hero-level-dialog.level-up-celebrate .hero-level-celebration i:nth-child(2),.hero-level-dialog.level-up-celebrate .hero-level-celebration i:nth-child(5){animation-delay:.08s}.hero-level-dialog.level-up-celebrate .hero-level-celebration i:nth-child(3),.hero-level-dialog.level-up-celebrate .hero-level-celebration i:nth-child(7){animation-delay:.16s}.hero-level-dialog.level-up-celebrate .hero-level-celebration i:nth-child(4),.hero-level-dialog.level-up-celebrate .hero-level-celebration i:nth-child(8){animation-delay:.23s}@keyframes heroLevelFlash{0%,100%{opacity:0}24%{opacity:.62}55%{opacity:.18}}@keyframes heroLevelSparkle{0%{opacity:0;transform:scale(.15) rotate(0)}38%{opacity:1;transform:scale(1.15) rotate(45deg)}100%{opacity:0;transform:scale(.25) rotate(95deg)}}
.hero-info .hero-upgrade-actions{
  position:absolute;
  left:19px;
  right:19px;
  bottom:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
}
.hero-info{position:relative}
.hero-info .hero-upgrade-actions button{
  min-width:0;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 3px;
  border:2px solid #8f7138;
  border-radius:5px;
  background:#3a3121;
  color:#f2cf75;
  font:900 11px/1 inherit;
  cursor:pointer;
}
.hero-info .hero-upgrade-actions .star-upgrade-button{position:relative}
.hero-info .hero-upgrade-actions .star-upgrade-button.has-notice:after{content:"";position:absolute;z-index:2;top:-5px;right:-5px;width:10px;height:10px;border:2px solid #fff3d5;border-radius:50%;background:#e3413d;box-shadow:0 1px 3px #0008;pointer-events:none}
.hero-info .hero-upgrade-actions .level-up-button{
  border-color:#f2cf75;
  background:#c58d31;
  color:#fff7dc;
}
.hero-level-dialog{position:relative}
.hero-level-dialog>.hero-level-confirm:not(:disabled){border-color:#f2cf75;box-shadow:none}.hero-level-dialog>.hero-level-confirm:disabled{border-color:#56534c;box-shadow:none}
.hero-level-dialog .hero-material-actions .hero-reset-material,.hero-level-dialog .hero-material-actions .hero-auto-material{display:flex;align-items:center;justify-content:center;padding:0 6px;font-family:inherit;font-size:10px;font-weight:900;line-height:1;text-align:center}.hero-level-dialog>.hero-level-confirm{align-items:center;justify-content:center;line-height:1;text-align:center}.hero-level-dialog .hero-material-stepper button{background-position:center;background-repeat:no-repeat}
.hero-info .hero-upgrade-actions .level-up-button:disabled{border-color:#56534c;background:#3b3e3e;color:#888;box-shadow:none;cursor:not-allowed}.hero-level-dialog.breakthrough-mode .hero-level-progress,.hero-level-dialog.breakthrough-mode .hero-material-actions{display:none}.hero-level-dialog.breakthrough-mode .hero-exp-materials{position:relative;display:flex;align-items:center;justify-content:center;gap:18px;min-height:110px;margin-top:18px;padding-top:36px}.hero-level-dialog.breakthrough-mode .hero-exp-materials:before{content:"필요한 재료";position:absolute;left:0;right:0;top:0;color:#d8b466;font-size:18px;font-weight:900;text-align:center}.hero-level-dialog .hero-breakthrough-material{position:relative;box-sizing:border-box;width:76px;height:76px;border:2px solid #4f8fc3;border-radius:9px;background:#e6ddc7;box-shadow:inset 0 0 0 2px #f3ecd9}.hero-level-dialog .hero-breakthrough-material img{width:100%;height:100%;object-fit:contain}.hero-level-dialog .hero-breakthrough-material b{position:absolute;z-index:2;right:4px;bottom:3px;color:#fff;font:900 12px/1 "Malgun Gothic",sans-serif;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}.hero-level-dialog .hero-breakthrough-material.common{border-color:#a99a79}.hero-level-dialog .hero-breakthrough-material.rare{border-color:#4f8fc3}.hero-level-dialog .hero-breakthrough-material.epic{border-color:#8c54c7}.hero-level-dialog .hero-breakthrough-material.legendary{border-color:#d9a737}.hero-level-dialog.breakthrough-mode>.hero-level-confirm{margin-top:18px}.hero-level-dialog.breakthrough-mode>.hero-level-confirm:not(:disabled){border-color:#f2cf75;background:#c58d31;color:#fff7dc}.hero-level-dialog.breakthrough-mode>.hero-level-confirm:disabled{border-color:#56534c;background:#3b3e3e;color:#888}
.hero-star-modal[hidden]{display:none}.hero-star-modal{position:fixed;z-index:1725;inset:0;display:grid;place-items:center;padding:14px;background:#0a0d0fca}.hero-star-dialog{position:relative;isolation:isolate;width:min(430px,100%);padding:12px;border:3px solid #8e7445;border-radius:14px;background:#202528;color:#eee1c2;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327}.hero-star-dialog:after{content:"";position:absolute;z-index:20;inset:0;border-radius:inherit;background:#fff8d8;opacity:0;pointer-events:none;mix-blend-mode:screen}.hero-star-dialog.level-up-celebrate:after{animation:heroLevelFlash .42s ease-out both}.hero-star-dialog.level-up-celebrate .hero-level-celebration i{animation:heroLevelSparkle .75s ease-out both}.hero-star-dialog>header{display:flex;align-items:center;justify-content:space-between;padding-bottom:9px;border-bottom:1px solid #5d503b}.hero-star-dialog>header p{margin:0;color:#c69a46;font-size:7px;font-weight:900;letter-spacing:2px}.hero-star-dialog>header h2{margin:2px 0 0;color:#fff2cf;font-size:17px}.hero-star-dialog>header button{width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#15191b url("assets/ui/modal-close-x.png") center/16px 16px no-repeat;color:transparent;font-size:0}.hero-star-stat-preview{display:grid;gap:5px;margin-top:15px;padding:15px 20px;border-radius:7px;background:#111517}.hero-star-stat-preview>div{position:relative;display:grid;grid-template-columns:1fr 70px 1fr;align-items:center;color:#99907e;font-size:11px}.hero-star-stat-preview b,.hero-star-stat-preview em{font-size:17px;font-weight:900;line-height:20px}.hero-star-stat-preview b{color:#fff0c9;text-align:center}.hero-star-stat-preview em{min-height:20px;display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;color:#efb735;font-style:normal;text-align:right}.hero-star-stat-preview .stat-flow-arrow{position:absolute;left:calc(70% - 7px);top:50%;width:14px;height:14px;transform:translateY(-50%);background:#9b927e;-webkit-mask:url("assets/ui/stat-flow-arrow.png") center/contain no-repeat;mask:url("assets/ui/stat-flow-arrow.png") center/contain no-repeat}.hero-star-stat-preview .stat-up-icon{width:14px;height:14px;transform:translateY(1px);background:#a9ef38;-webkit-mask:url("assets/ui/stat-up-arrow.png") center/contain no-repeat;mask:url("assets/ui/stat-up-arrow.png") center/contain no-repeat}.hero-star-rank{display:grid;grid-template-columns:1fr 24px 1fr;align-items:center;margin:20px 24px 0}.hero-star-rank>div{text-align:center}.hero-star-rank small{display:block;margin-bottom:7px;color:#a9a08f;font-size:9px;font-weight:900}.hero-star-rank span{display:flex;justify-content:center;gap:1px}.hero-star-rank img{width:22px;height:22px;object-fit:contain}.star-rank-arrow{width:15px;height:15px;place-self:end center;margin-bottom:3px;background:#b7aa8d;-webkit-mask:url("assets/ui/stat-flow-arrow.png") center/contain no-repeat;mask:url("assets/ui/stat-flow-arrow.png") center/contain no-repeat}.hero-star-materials{min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:14px}.hero-star-materials h3{margin:0 0 12px;color:#d8b466;font-size:15px}.hero-star-materials>strong{color:#9d9586;font-size:13px}.hero-fragment-slot{position:relative;width:70px;height:70px;border:2px solid #d9a737;border-radius:9px;background:#e6ddc7;box-shadow:inset 0 0 0 2px #f3ecd9}.hero-fragment-slot img{width:100%;height:100%;object-fit:contain}.hero-fragment-slot b{position:absolute;right:4px;bottom:3px;color:#fff;font:900 11px/1 inherit;-webkit-text-stroke:2px #111;paint-order:stroke fill}.hero-star-confirm{width:100%;height:42px;display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;border:2px solid #f2cf75;border-radius:8px;background:#c58d31;color:#fff7dc;font:1000 15px/1 inherit}.hero-star-confirm .confirm-gold{display:inline-flex;align-items:center;gap:3px}.hero-star-confirm .confirm-gold img{width:22px;height:22px}.hero-star-confirm:disabled{border-color:#56534c;background:#3b3e3e;color:#888}.hero-star-confirm:disabled img{filter:grayscale(1)}
.hero-star-dialog>header{box-sizing:border-box;width:auto;height:auto;margin:0;padding:0 0 9px;background:#202528}.hero-star-dialog>header button{display:grid;place-items:center;background:#15191b url("assets/ui/modal-close-x.png") center/16px no-repeat;cursor:pointer}
.hero-star-rank{display:flex;align-items:center;justify-content:center;margin:24px 24px 0}.hero-star-rank .star-rank-track{display:flex;align-items:center;justify-content:center;gap:3px}.hero-star-rank .star-rank-track img{width:34px;height:34px;object-fit:contain;transform-origin:center}.hero-star-rank .star-rank-track .next-star{animation:nextStarTwinkle 1.15s ease-in-out infinite}@keyframes nextStarTwinkle{0%,100%{transform:scale(1);filter:brightness(1) drop-shadow(0 0 1px #ffc83d55)}35%{transform:scale(1.13);filter:brightness(1.3) drop-shadow(0 0 7px #ffe169)}62%{transform:scale(1.04);filter:brightness(1.08) drop-shadow(0 0 3px #ffc83d)}}.hero-star-confirm{font-family:inherit;font-size:15px;font-weight:1000;line-height:1;text-align:center}
.hero-star-rank{flex-direction:column;gap:12px}.hero-star-trait-preview{width:100%;display:grid;grid-template-columns:64px 54px minmax(0,1fr);align-items:center;padding:8px 10px;border:1px solid #514b40;border-radius:7px;background:#292e30;color:#8f887b}.hero-star-trait-preview span{color:#d8b466;font-size:10px;font-weight:900}.hero-star-trait-preview small{font-size:8px;font-weight:900;text-align:center}.hero-star-trait-preview b{font-size:10px;text-align:right}.hero-star-trait-preview.will-unlock{border-color:#967735;background:#332b1d;color:#f1cd70;box-shadow:0 0 7px #d6a63c33}.hero-star-trait-preview.active{border-color:#8c713c;color:#e8c86f}
.hero-info .profile-stats .trait-stat.trait-locked{border-color:#4b4b47;background:#292c2d}.hero-info .profile-stats .trait-stat.trait-locked span,.hero-info .profile-stats .trait-stat.trait-locked b{color:#77756f}.hero-star-stat-preview .hero-star-effect-row{margin-top:5px;padding-top:8px;border-top:1px solid #514b40}.hero-star-stat-preview .hero-star-effect-row>span{display:flex;align-items:center;gap:5px;color:#d8b466;font-weight:900}.hero-star-effect-row .event-new-badge{position:static;flex:0 0 auto;width:19px;height:14px;border-width:1px;border-radius:8px;font-size:8px}.hero-star-effect-row.new-unlock>em{color:#f0c85e}.hero-star-rank{margin-top:20px}.hero-star-materials{margin-top:10px}
.hero-info .profile-stats .trait-stat,.hero-info .profile-stats .trait-stat.trait-locked{margin-top:5px;padding:6px 8px;border:1px solid #51493d;border-radius:7px;background:#292d2e}.hero-info .profile-stats .trait-stat.trait-locked{border-color:#4b4b47;background:#292c2d}.hero-info .profile-stats .trait-stat>b{display:flex;align-items:center;justify-content:flex-end;gap:7px}.hero-info .profile-stats .trait-stat>b small{color:#8f887b;font-size:7px;font-weight:900;white-space:nowrap}.hero-info .profile-stats .trait-stat.trait-locked>b{gap:6px}.hero-info .profile-stats .trait-stat .trait-stage-main{color:#8d8980;font-size:9px;font-weight:900;white-space:nowrap}.hero-info .profile-stats .trait-stat.trait-locked>b small{padding-left:6px;border-left:1px solid #4b4b47;color:#6f6d68}
.hero-info .profile-stats .trait-stat+.hero-trait-bonus{grid-column:1/-1;margin-top:3px;padding:4px 8px;border-radius:6px;background:#30291e;color:#d8b466;font-size:8px;font-weight:900}
.hero-info .profile-stats .hero-trait-bonus{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:5px 8px;border:1px solid #51493d;border-radius:7px}.hero-info .profile-stats .hero-trait-bonus span{font-size:8px;font-weight:900;white-space:nowrap}.hero-info .profile-stats .hero-trait-bonus b{font-size:8px;text-align:right}.hero-info .profile-stats .hero-trait-bonus.locked{background:#292c2d;color:#77756f}.hero-info .profile-stats .hero-trait-bonus.locked span,.hero-info .profile-stats .hero-trait-bonus.locked b{color:#77756f}.hero-info .profile-stats .hero-trait-bonus.active{border-color:#8c713c;background:#332a1c}.hero-info .profile-stats .hero-trait-bonus.active span,.hero-info .profile-stats .hero-trait-bonus.active b{color:#e8c86f}.paladin-five-star-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:9px 24px 0;padding:7px 10px;border:1px solid #514b40;border-radius:7px;background:#292c2d;color:#77756f}.paladin-five-star-preview span{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:900;white-space:nowrap}.paladin-five-star-preview b{font-size:8px;text-align:right}.paladin-five-star-preview .event-new-badge{position:static;width:19px;height:14px;border-width:1px;font-size:8px}.paladin-five-star-preview.will-unlock,.paladin-five-star-preview.active{border-color:#8c713c;background:#332a1c;color:#e8c86f}.paladin-five-star-preview.will-unlock{box-shadow:0 0 7px #d6a63c33}
.hero-info .profile-stats .trait-stat.has-bonus{display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 8px}.hero-info .profile-stats .trait-stat.has-bonus>span{align-self:center}.hero-info .profile-stats .trait-stat.has-bonus>b{justify-self:end}.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus{grid-column:1/-1;width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:5px;padding:5px 0 0;border:0;border-top:1px solid #51493d;border-radius:0;background:transparent}.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus span{font-size:8px;font-weight:900;white-space:nowrap}.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus b{margin:0;font-size:8px;text-align:right}.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.locked span,.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.locked b{color:#77756f}.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.active span,.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.active b{color:#e8c86f}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus{margin-top:4px;padding:0;border:0}.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus span,.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus b{font-size:9px;font-weight:900}

/* Compact the six primary stats and balance space around the trait box. */
.hero-info .profile-stats{
  grid-template-rows:repeat(3,21px);
  margin-top:6px;
}
.hero-info .profile-stats>div:not(.trait-stat){
  min-height:21px;
  padding-top:1px;
  padding-bottom:1px;
}
.hero-info .profile-stats .trait-stat,
.hero-info .profile-stats .trait-stat.trait-locked{
  min-height:0;
  margin-top:15px;
  margin-bottom:0;
  padding-top:6px;
  padding-bottom:6px;
}
.hero-info .profile-stats .trait-stat:not(.has-bonus){
  margin-top:26px;
}

/* Trait area uses the original simple divider instead of a card. */
.hero-info .profile-stats .trait-stat,
.hero-info .profile-stats .trait-stat.trait-locked{
  padding-left:8px;
  padding-right:8px;
  border:0;
  border-top:1px solid #51493d;
  border-radius:0;
  background:transparent;
}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.locked,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.active{
  border:0;
  border-radius:0;
  background:transparent;
}

/* Restore the original stat rhythm and continue it into the trait row. */
.hero-info .profile-stats{
  grid-template-rows:repeat(3,minmax(22px,auto));
  margin-top:8px;
}
.hero-info .profile-stats>div:not(.trait-stat){
  min-height:22px;
  padding:2px 8px;
}
.hero-info .profile-stats .trait-stat,
.hero-info .profile-stats .trait-stat.trait-locked,
.hero-info .profile-stats .trait-stat:not(.has-bonus){
  position:relative;
  min-height:33px;
  margin:4px 0 0;
  padding:10px 8px 2px;
  border-top:0;
}
.hero-info .profile-stats .trait-stat:before{
  content:"";
  position:absolute;
  left:8px;
  right:8px;
  top:0;
  height:1px;
  background:#51493d;
}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus{
  margin-top:6px;
}

/* Grow only the breakthrough popup by opening space above its final action. */
.hero-level-dialog.breakthrough-mode>.hero-level-confirm{
  margin-top:0;
}
.hero-level-dialog.breakthrough-mode .hero-exp-materials{
  box-sizing:border-box;
  min-height:166px;
  margin-top:0;
  padding-top:62px;
  align-items:flex-start;
}
.hero-level-dialog.breakthrough-mode .hero-exp-materials:before{
  top:26px;
}

/* One-line traits share the paladin's first trait-row baseline. */
.hero-info .profile-stats .trait-stat:not(.has-bonus){
  align-items:flex-start;
}
.hero-info .profile-stats .trait-stat:not(.has-bonus)>span,
.hero-info .profile-stats .trait-stat:not(.has-bonus)>b{
  margin-top:0;
}

.hero-star-stat-preview .hero-star-effect-row>span{
  gap:5px;
  color:#99907e;
  font-size:11px;
  font-weight:400;
}
.hero-star-effect-row .summon-new-badge{
  position:static;
  flex:0 0 auto;
  box-sizing:border-box;
  width:18px;
  height:13px;
  min-height:13px;
  display:inline-grid;
  place-items:center;
  align-content:center;
  justify-content:center;
  gap:0;
  padding:0;
  border:1px solid #fff0c8;
  border-radius:7px;
  background:#d9453f;
  color:#fff;
  font-family:Arial,sans-serif;
  font-size:0;
  font-style:normal;
  font-weight:1000;
  line-height:1;
  letter-spacing:0;
  text-indent:0;
  text-align:center;
  vertical-align:middle;
  transform:none;
  box-shadow:0 2px 3px #0005;
}
.hero-star-effect-row .summon-new-badge:before{
  content:"N";
  display:block;
  color:#fff;
  font:1000 8px/1 Arial,sans-serif;
  transform:none;
}

.hero-star-stat-preview .hero-star-effect-row{
  min-height:0;
  margin-top:5px;
  padding:15px 0 0;
  align-items:center;
  border-top:1px solid #514b40;
}
.hero-star-stat-preview .hero-star-effect-row.new-unlock>span{
  color:#f0c85e;
  font-weight:900;
  text-shadow:0 0 5px #d99c3266;
}
.hero-star-stat-preview .hero-star-effect-row.new-unlock>em{
  grid-column:3;
  color:#f0c85e;
}
.hero-star-stat-preview .hero-star-effect-row>span,
.hero-star-stat-preview .hero-star-effect-row>b,
.hero-star-stat-preview .hero-star-effect-row>em{
  transform:none;
}

.hero-star-rank .star-rank-comparison{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
}
.hero-star-rank .star-rank-track{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1px;
}
.hero-star-rank .star-rank-track img{
  width:22px;
  height:22px;
}
.hero-star-rank .star-rank-arrow{
  flex:0 0 14px;
  width:14px;
  height:14px;
  margin:0;
  place-self:auto;
  background:#b7aa8d;
}
.bag-misc-grid .hero-fragment-item img,
#bagMiscGrid .hero-fragment-item img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.hero-info .profile-stats .trait-stat.has-bonus>span,
.hero-info .profile-stats .trait-stat.has-bonus>b,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus>span,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus>b{
  align-self:center;
}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus>b{
  justify-self:end;
  margin:0;
  line-height:1.35;
  white-space:nowrap;
  text-align:right;
}

/* Keep paladin trait spacing identical before and after a star unlock. */
.hero-info .profile-stats .trait-stat.has-bonus{
  grid-template-rows:16px auto;
  row-gap:8px;
}
.hero-info .profile-stats .trait-stat.has-bonus>span,
.hero-info .profile-stats .trait-stat.has-bonus>b{
  box-sizing:border-box;
  min-height:16px;
  height:16px;
  display:flex;
  align-items:center;
}
.hero-info .profile-stats .trait-stat.has-bonus>b{
  justify-content:flex-end;
}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.locked,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.active{
  margin-top:0;
}

/* Paladin uses the same 22px row rhythm as every regular hero trait. */
.hero-info .profile-stats .trait-stat.has-bonus{
  min-height:50px;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:16px 16px;
  row-gap:6px;
  padding:10px 8px 2px;
}
.hero-info .profile-stats .trait-stat.has-bonus>span,
.hero-info .profile-stats .trait-stat.has-bonus>b,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus{
  height:16px;
  min-height:16px;
  line-height:16px;
}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus{
  grid-column:1/-1;
  grid-template-columns:auto minmax(0,1fr);
  padding:0;
}

/* Align every hero's trait label/value to the paladin's first-row baseline. */
.hero-info .profile-stats .trait-stat:not(.has-bonus){
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:16px;
  column-gap:8px;
  align-items:center;
}
.hero-info .profile-stats .trait-stat:not(.has-bonus)>b{
  justify-self:end;
}
.hero-info .profile-stats .trait-stat>span,
.hero-info .profile-stats .trait-stat>b{
  box-sizing:border-box;
  height:16px;
  min-height:16px;
  display:flex;
  align-items:center;
  margin:0;
  line-height:16px;
}
.hero-info .profile-stats .trait-stat>b{
  justify-content:flex-end;
  text-align:right;
}

.hero-star-stat-preview .hero-star-effect-row.paladin-five-star-preview{
  grid-template-columns:max-content minmax(0,1fr);
  column-gap:12px;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.hero-star-stat-preview .hero-star-effect-row.paladin-five-star-preview>em{
  grid-column:2;
  justify-self:end;
  width:auto;
  max-width:none;
  color:#efb735;
  font-size:11px;
  font-weight:900;
  line-height:16px;
  white-space:nowrap;
}

/* Smooth, responsive entrance shared by the game's standard popups. */
.equipment-modal:not([hidden]),
.bag-detail-modal:not([hidden]),
.bulk-sell-modal:not([hidden]),
.star-up-modal:not([hidden]),
.deck-edit-modal:not([hidden]),
.world-map-modal:not([hidden]),
.quest-modal:not([hidden]),
.quest-reward-modal:not([hidden]),
.event-reward-modal:not([hidden]),
.hero-level-modal:not([hidden]),
.hero-star-modal:not([hidden]){
  animation:popupBackdropIn 160ms ease-out both;
}
.equipment-modal:not([hidden])>[role="dialog"],
.bag-detail-modal:not([hidden])>[role="dialog"],
.bulk-sell-modal:not([hidden])>[role="dialog"],
.star-up-modal:not([hidden])>[role="dialog"],
.deck-edit-modal:not([hidden])>[role="dialog"],
.world-map-modal:not([hidden])>[role="dialog"],
.quest-modal:not([hidden])>[role="dialog"],
.quest-reward-modal:not([hidden])>[role="dialog"],
.event-reward-modal:not([hidden])>[role="dialog"],
.hero-level-modal:not([hidden])>[role="dialog"],
.hero-star-modal:not([hidden])>[role="dialog"]{
  transform-origin:center;
  animation:popupDialogIn 200ms cubic-bezier(.2,.75,.25,1) both;
}
@keyframes popupBackdropIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes popupDialogIn{
  from{opacity:.35;transform:translateY(7px) scale(.975)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@media(prefers-reduced-motion:reduce){
  [class$="-modal"]>[role="dialog"]{animation-duration:1ms!important}
}

/* Bag equipment details shared by the two side-by-side comparison cards. */
.equipment-dialog{width:min(620px,100%);overflow-y:auto}
.equipment-comparison{grid-template-columns:minmax(0,1fr) 16px minmax(0,1fr);grid-template-rows:auto;gap:6px;align-items:stretch}
.equipment-comparison>i{align-self:center;height:auto;line-height:1;font-size:18px}
.equipment-comparison>i:before{content:none}
.equipment-dialog .compare-card{min-height:0;padding:10px;text-align:left}
.equipment-dialog .compare-card>span{color:#cbb17b;font-size:10px;font-weight:900}
.compare-detail-heading{min-height:61px;margin-top:8px;padding-bottom:8px;border-bottom:1px solid #5d503b}
.compare-detail-heading p{color:#c69a46;font-size:8px;font-weight:900;letter-spacing:1px}
.compare-detail-heading h3{margin:4px 0 0;color:#fff2cf;font-size:14px;line-height:1.4;overflow-wrap:anywhere}
.compare-card .bag-detail-main{grid-template-columns:58px minmax(0,1fr);gap:8px;padding:8px;margin-top:10px}
.compare-card .bag-detail-main>div:first-child{height:58px}
.compare-card .bag-detail-main .equipment-icon{width:50px;height:50px}
.compare-card .bag-detail-main strong{font-size:12px;overflow-wrap:anywhere}
.compare-card .bag-detail-options div{gap:4px;padding:8px 6px}
.compare-card .bag-detail-options div span{min-width:0;overflow-wrap:anywhere}
.compare-card .bag-detail-options div b{flex-shrink:0}
.equipment-dialog>header,.equipment-comparison,.modal-list-title,.equipment-actions{flex-shrink:0}
@media(max-width:480px){

}
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action:disabled{background:#7c7466!important;border-color:#5d5548!important;color:#e4e1da!important;opacity:1}
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action:disabled>span{color:#e4e1da!important;font-size:14px;font-weight:1000;-webkit-text-stroke:.3px #e4e1da}
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action:disabled>.dungeon-entry-count{background:#a69a83;color:#554a38!important;-webkit-text-stroke:.25px #554a38}
@media(max-width:480px){
  .equipment-comparison{gap:4px;grid-template-columns:minmax(0,1fr) 12px minmax(0,1fr)}
  .equipment-dialog .compare-card{padding:7px}
  .compare-card .bag-detail-main{grid-template-columns:minmax(0,1fr);gap:6px;padding:6px}
  .compare-card .bag-detail-main>div:first-child{width:64px;height:64px;justify-self:center}
  .compare-card .bag-detail-main>div:last-child{min-height:39px;text-align:center}
  .compare-detail-heading h3{font-size:12px}
  .compare-card .bag-detail-options div{padding:7px 4px;font-size:9px}
  .compare-card .bag-detail-options div b{font-size:10px}
}
/* Match the bag detail title, with the comparison label on the right. */
.equipment-dialog .compare-detail-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
  min-height:0;
  margin:0;
  padding:0 0 10px;
  border-bottom:1px solid #5d503b;
}
.compare-detail-heading>div{min-width:0}
.equipment-dialog .compare-detail-heading p{
  margin:0;
  color:#c69a46;
  font-size:8px;
  font-weight:900;
  letter-spacing:2px;
}
.equipment-dialog .compare-detail-heading h3{
  margin:3px 0 0;
  color:#fff2cf;
  font-size:18px;
  line-height:1.2;
  overflow-wrap:anywhere;
}
.compare-status-label{
  flex:0 0 auto;
  padding:4px 6px;
  border:1px solid #776546;
  border-radius:7px;
  background:#15191b;
  color:#e7d5ae;
  font-size:9px;
  font-weight:900;
  line-height:1.2;
  white-space:nowrap;
}
/* Larger comparison labels and a flat equipment detail background. */
.compare-status-label{
  font-size:11px;
  border:0;
}
.compare-card .bag-detail-main{
  border:0;
  background:#212528;
}
.equipment-dialog .compare-detail-heading p{padding-left:3px}

/* Equipment rarity is indicated by the comparison border only. */
.equipment-dialog .compare-card,
.equipment-dialog .compare-card.common,
.equipment-dialog .compare-card.uncommon,
.equipment-dialog .compare-card.rare,
.equipment-dialog .compare-card.epic,
.equipment-dialog .compare-card.legendary{
  background:#2a2f31;
}
/* Plain, evenly spaced equipment comparison stats. */
.compare-card .bag-detail-options{
  gap:6px;
  margin-top:10px;
}
.compare-card .bag-detail-options div{
  min-height:16px;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  line-height:16px;
}
.compare-card .bag-detail-options div span,
.compare-card .bag-detail-options div b{
  line-height:16px;
}
/* Balance the equipment name and rarity text. */
.equipment-dialog .compare-detail-heading h3{font-size:16px}
.equipment-dialog .compare-detail-heading p{font-size:10px}

/* Align option text with the inset equipment content. */
.compare-card .bag-detail-options{padding-inline:8px}

/* Use the existing stat comparison arrow image. */
.equipment-comparison>i{display:grid;place-items:center;font-size:0}
.equipment-comparison>i>img{display:block;width:100%;height:24px;object-fit:contain;filter:drop-shadow(0 1px 1px #0008)}

/* Compact the two-column equipment comparison popup. */
.equipment-dialog{width:min(540px,100%)}

/* Match battlefield section typography and compact equipment choices. */
.equipment-dialog .modal-list-title{
  margin:12px 10px 6px;
  font-size:14px;
  font-weight:900;
  line-height:normal;
}
.equipment-dialog .modal-equipment-list{
  grid-template-columns:repeat(auto-fill,58px);
  gap:6px;
  padding:2px;
  min-height:62px;
  flex-shrink:0;
}
.equipment-dialog .modal-equipment-list .bag-slot{
  width:58px;
  height:58px;
  min-height:0;
}
.equipment-dialog .modal-equipment-list .inventory-empty{grid-column:1/-1}
/* Align the equipment list edges with its section title. */
.equipment-dialog .modal-equipment-list{margin-inline:10px;padding:2px 0}

/* Readable comparison stats and centered empty-state guidance. */
.compare-card .bag-detail-options div{font-size:11px}
.compare-card .bag-detail-options div b{font-size:12px}
.equipment-dialog .compare-card{display:flex;flex-direction:column}
.compare-card .bag-detail-options:has(>.no-option){
  flex:1;
  min-height:38px;
  align-content:center;
}
.compare-card .bag-detail-options .no-option{
  justify-content:center;
  text-align:center;
  font-size:11px;
  color:#aaa08d;
}
/* Consistent readable stat labels across equipment and growth popups. */
.compare-card .bag-detail-options div,
.compare-card .bag-detail-options .no-option,
.hero-level-stat-preview>div>span,
.hero-star-stat-preview>div>span,
.hero-star-stat-preview .hero-star-effect-row>span{
  font-size:12px;
}
/* Match hero profile stat labels to the growth and equipment views. */
.hero-info .profile-stats>div>span,
.hero-info .profile-stats .trait-stat>span{
  font-size:12px;
}
.hero-info .profile-stats>div>b,
.hero-info .profile-stats .trait-stat>b{
  font-size:13px;
}
/* Include the paladin's nested unique-effect row in profile typography. */
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus>span{font-size:12px}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus>b{
  font-size:13px;
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:18px;
}
.hero-info .profile-stats .trait-stat.has-bonus{
  grid-template-rows:16px auto;
}
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus{
  height:auto;
  min-height:18px;
  line-height:18px;
}
/* Match unique-effect labels to ordinary stat labels, retaining their colors. */
.hero-info .profile-stats .trait-stat>span,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus>span{
  font-weight:400;
  text-shadow:none;
}
/* Uniform profile labels, smaller than the numeric values. */
.hero-info .profile-stats>div>span,
.hero-info .profile-stats .trait-stat>span,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus>span{
  font-family:inherit;
  font-size:11px;
  font-weight:400;
  letter-spacing:normal;
  text-shadow:none;
  line-height:16px;
}
.hero-info .profile-stats>div>b,
.hero-info .profile-stats .trait-stat>b,
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus>b{
  font-size:13px;
}
/* Match the five-star unlock hint to the two-star hint. */
.hero-info .profile-stats .trait-stat.has-bonus>.hero-trait-bonus.locked>b{font-size:9px;font-weight:900;color:#8d8980;line-height:16px;text-shadow:none}

/* Fit eight 58px slots with seven 6px gaps within the 510px content width. */
.equipment-dialog .modal-equipment-list{margin-inline:2px}

/* Give the comparison cards more space below the popup title. */
.equipment-dialog .equipment-comparison{margin-top:18px}

/* Slim the comparison cards without changing the eight-slot inventory row. */
.equipment-dialog .equipment-comparison{margin-inline:16px}

/* Compact popup sized for seven equipment choices per row. */
.equipment-dialog{width:min(480px,100%)}
.equipment-dialog .equipment-comparison{margin-inline:0}

/* Separate equipment popup content into comfortable vertical groups. */
.equipment-dialog .equipment-comparison{margin-top:22px}
.equipment-dialog .compare-detail-heading{padding-bottom:12px}
.compare-card .bag-detail-main{margin-top:14px}
.compare-card .bag-detail-options{margin-top:16px;margin-bottom:6px}
.equipment-dialog .modal-list-title{margin-top:22px;margin-bottom:10px}
.equipment-dialog .equipment-actions{margin-top:18px}
.equipment-dialog .equipment-actions .equip-confirm,
.equipment-dialog .equipment-actions .equip-unequip{margin-top:0}
/* Consistent vertical groups in level, star and breakthrough dialogs. */

.hero-level-stat-preview,.hero-star-stat-preview{
  margin-top:22px;
  padding-block:18px;
  gap:7px;
}
.hero-level-progress{margin-top:22px}
.hero-level-dialog:not(.breakthrough-mode) .hero-exp-materials{margin-top:22px}
.hero-level-dialog .hero-material-actions{margin-top:18px}
.hero-level-dialog:not(.breakthrough-mode)>.hero-level-confirm{margin-top:22px}
.hero-star-rank{margin-top:22px}
.hero-star-materials{
  min-height:0;
  margin-top:22px;
}
.hero-star-materials h3{margin-bottom:12px}
.hero-star-confirm{margin-top:22px}
.hero-level-dialog.breakthrough-mode .hero-exp-materials{
  min-height:0;
  margin-top:22px;
  padding-top:36px;
  padding-bottom:0;
}
.hero-level-dialog.breakthrough-mode .hero-exp-materials:before{top:0}
.hero-level-dialog.breakthrough-mode>.hero-level-confirm{margin-top:22px}
/* Secondary upgrade actions stay aligned at the bottom of both cards. */
.compare-upgrade-action{margin-top:auto;padding-top:14px}
.compare-upgrade-button{
  display:block;width:100%;height:32px;
  border:1px solid #8e7445;border-radius:7px;
  background:#373a38;color:#efddb7;
  font-family:inherit;font-size:12px;font-weight:900;
  cursor:pointer;
}
.compare-upgrade-button:hover{background:#45483f}
.compare-upgrade-button:focus-visible{outline:2px solid #ffd567;outline-offset:2px}
/* Distinct active upgrade action, separate from the gold equip action. */
.compare-upgrade-button{
  border-color:#63b9b0;
  background:#28796f;
  color:#f0fffa;
  box-shadow:inset 0 1px 0 #ffffff26;
}
.compare-upgrade-button:hover{background:#318d81}
/* Reserve all four option rows so changing equipment never resizes the cards. */
.compare-card .bag-detail-options,
.compare-card .bag-detail-options:has(>.no-option){
  flex:0 0 82px;
  height:82px;
  min-height:82px;
  grid-template-rows:repeat(4,16px);
  gap:6px;
  align-content:start;
}
.compare-card .bag-detail-options .no-option{
  grid-row:1;
  align-self:start;
  line-height:16px;
}
/* Bag detail uses the comparison-card presentation at its original width. */
.bag-detail-dialog{width:min(350px,100%)}
.bag-detail-dialog>header{padding-bottom:12px}
.bag-detail-dialog>header p{font-size:10px;padding-left:3px;letter-spacing:2px}
.bag-detail-dialog>header h2{font-size:16px;line-height:1.2}
.bag-detail-dialog .bag-detail-main{
  grid-template-columns:58px minmax(0,1fr);
  gap:8px;margin-top:14px;padding:8px;
  border:0;background:#212528;
}
.bag-detail-dialog .bag-detail-main>div:first-child{height:58px}
.bag-detail-dialog .bag-detail-main .equipment-icon{width:50px;height:50px}
.bag-detail-dialog .bag-detail-main strong{font-size:12px}
.bag-detail-dialog .bag-detail-options{
  height:82px;min-height:82px;
  grid-template-rows:repeat(4,16px);gap:6px;
  align-content:start;margin:16px 0 6px;padding-inline:8px;
}
.bag-detail-dialog .bag-detail-options div{
  min-height:16px;padding:0;border:0;border-radius:0;
  background:transparent;box-shadow:none;
  font-size:12px;line-height:16px;
}
.bag-detail-dialog .bag-detail-options div b{font-size:12px;line-height:16px}
.bag-detail-dialog .bag-detail-options .no-option{
  grid-row:1;align-self:start;color:#aaa08d;text-align:center;
}
.bag-detail-dialog .bag-detail-sell{margin-top:18px}
.bag-detail-dialog .bag-detail-main{background:#2b2f31}

/* Material descriptions use natural wrapping rather than equipment stat rows. */
.bag-detail-dialog.misc-detail .bag-detail-options{
  display:block;
  height:auto;
  min-height:82px;
  margin:16px 0 6px;
  padding:0 8px;
}
.bag-item-description{
  margin:0;
  color:#bdb29d;
  font-size:12px;
  line-height:1.8;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:keep-all;
}
.bag-material[role="button"]{cursor:pointer}
.bag-material[role="button"]:focus-visible{outline:2px solid #ffd567;outline-offset:2px}
.equipment-upgrade-modal[hidden]{display:none}
.equipment-upgrade-modal{position:fixed;inset:0;z-index:1900;display:grid;place-items:center;padding:14px;background:#0a0d0fca;animation:popupBackdropIn 160ms ease-out both}
.equipment-upgrade-dialog{width:min(430px,100%);padding:14px;border:3px solid #8e7445;border-radius:14px;background:#202528;color:#eee1c2;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327;animation:popupDialogIn 200ms ease-out both}
.equipment-upgrade-dialog>header{display:flex;align-items:center;justify-content:space-between;height:auto;width:auto;padding:0 0 12px;border:0;border-bottom:1px solid #5d503b;background:transparent}
.equipment-upgrade-dialog>header p{font-size:7px;color:#c69a46;letter-spacing:2px}
.equipment-upgrade-dialog>header h2{font-size:17px;color:#fff2cf;margin-top:2px}
.equipment-upgrade-dialog>header button{width:31px;height:31px;border:0;border-radius:50%;background:#15191b;color:#e7d5ae;font-size:22px;cursor:pointer}
.equipment-upgrade-summary{display:flex;gap:14px;align-items:center;margin-top:18px}
.equipment-upgrade-icon{display:grid;place-items:center;width:72px;height:72px;flex-shrink:0;border:2px solid #a99a79;border-radius:9px;background:#eee8d8}
.equipment-upgrade-icon .equipment-icon{width:64px;height:64px}
.equipment-upgrade-icon.uncommon{border-color:#55a962}.equipment-upgrade-icon.rare{border-color:#4f8fc3}.equipment-upgrade-icon.epic{border-color:#8c54c7}.equipment-upgrade-icon.legendary{border-color:#d98720}
.equipment-upgrade-summary small{color:#c69a46;font-size:10px}
.equipment-upgrade-summary h3{margin:4px 0;font-size:16px}
.equipment-upgrade-summary b{font-size:16px;color:#efb735}
.equipment-upgrade-summary b span{font-size:10px;color:#aaa08d;margin-left:8px}
.equipment-upgrade-stats{margin-top:18px;padding:12px 16px}
.equipment-upgrade-progress{margin-top:18px}
.equipment-upgrade-progress>div:first-child{display:flex;justify-content:space-between;font-size:11px;gap:8px}
.equipment-upgrade-progress span{color:#aaa08d}
.equipment-upgrade-bar{height:8px;background:#111517;border-radius:4px;margin-top:8px;overflow:hidden}
.equipment-upgrade-bar i{display:block;height:100%;background:#5bbba4}
.equipment-stone-heading{margin-top:20px;font-size:14px;font-weight:900}
.equipment-stone-heading small{font-size:10px;font-weight:400;color:#aaa08d;margin-left:8px}
.equipment-stone-list{display:flex;justify-content:center;gap:20px;margin-top:12px}
.equipment-stone-list>div{width:76px;text-align:center}
.equipment-stone-choice{position:relative;width:64px;height:64px;padding:0;border:2px solid #8e7445;border-radius:8px;background:#2b2f31;cursor:pointer}
.equipment-stone-choice img{width:100%;height:100%;object-fit:contain}
.equipment-stone-choice>b{position:absolute;right:2px;bottom:2px;color:#fff;font-size:11px;text-shadow:0 1px 3px #000,-1px -1px #000}
.equipment-stone-choice.selected{border-color:#67d0b9;box-shadow:0 0 0 1px #67d0b9}
.equipment-stone-list>div>span,.equipment-stone-list small{display:block;font-size:10px;margin-top:5px}
.equipment-stone-list small{font-size:9px;color:#aaa08d}
.equipment-stone-step{display:flex;align-items:center;justify-content:space-between;margin-top:7px;font-size:11px}
.equipment-stone-step button{width:23px;height:23px;border:1px solid #756744;border-radius:5px;background:#373a38;color:#eee1c2;cursor:pointer}
.equipment-upgrade-tools{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.equipment-upgrade-tools button{padding:7px 12px;border:1px solid #756744;border-radius:7px;background:#373a38;color:#eee1c2;cursor:pointer}
.equipment-selected-count{font-size:11px;color:#aaa08d}
.equipment-upgrade-confirm{width:100%;height:42px;margin-top:18px;border:2px solid #63b9b0;border-radius:8px;background:#28796f;color:#f0fffa;font:900 14px "Malgun Gothic",sans-serif;cursor:pointer}
.equipment-upgrade-dialog button:disabled{opacity:.45;cursor:default}
.equipment-upgrade-dialog button:focus-visible{outline:2px solid #ffd567;outline-offset:2px}
@media(max-height:700px){
.equipment-upgrade-dialog{padding:10px}
.equipment-upgrade-summary,.equipment-upgrade-stats,.equipment-upgrade-progress,.equipment-stone-heading{margin-top:10px}
.equipment-upgrade-tools,.equipment-upgrade-confirm{margin-top:10px}
.equipment-upgrade-stats{padding-block:8px}
}
/* Reuse the hero level-up material control row. */
.equipment-upgrade-tools.hero-material-actions{
  display:grid;grid-template-columns:82px minmax(0,1fr) 82px;
  gap:11px;margin:18px 9px 0;
}
.equipment-upgrade-tools .hero-material-stepper button{
  width:34px;height:34px;padding:0;border-radius:50%;
  background:#333027 center/18px 18px no-repeat;
  color:transparent;font-size:0;
}
.equipment-upgrade-tools [data-upgrade-minus]{background-image:url("assets/ui/material-minus.png");background-size:17px auto}
.equipment-upgrade-tools [data-upgrade-plus]{background-image:url("assets/ui/material-plus.png")}
.equipment-upgrade-tools .hero-material-stepper b{font-size:21px;color:#fff0c9}
.equipment-upgrade-tools>button{height:33px;padding:0 6px;font-family:inherit;font-size:10px;font-weight:900}
/* Apply icon images above the shared stepper background rule. */
.equipment-upgrade-tools .hero-material-stepper button[data-upgrade-minus]{
  background-image:url("assets/ui/material-minus.png");
  background-size:17px auto;
}
.equipment-upgrade-tools .hero-material-stepper button[data-upgrade-plus]{
  background-image:url("assets/ui/material-plus.png");
  background-size:18px 18px;
}
/* Share the hero level-up flash and staggered sparkles on equipment success. */
.equipment-upgrade-dialog{position:relative;isolation:isolate}
.equipment-upgrade-dialog:after{
  content:"";position:absolute;z-index:20;inset:0;border-radius:inherit;
  background:#fff8d8;opacity:0;pointer-events:none;mix-blend-mode:screen;
}
.equipment-upgrade-dialog.level-up-celebrate:after{animation:heroLevelFlash .42s ease-out both}
.equipment-upgrade-dialog.level-up-celebrate .hero-level-celebration i{animation:heroLevelSparkle .75s ease-out both}
.equipment-upgrade-dialog.level-up-celebrate .hero-level-celebration i:nth-child(2),
.equipment-upgrade-dialog.level-up-celebrate .hero-level-celebration i:nth-child(5){animation-delay:.08s}
.equipment-upgrade-dialog.level-up-celebrate .hero-level-celebration i:nth-child(3),
.equipment-upgrade-dialog.level-up-celebrate .hero-level-celebration i:nth-child(7){animation-delay:.16s}
.equipment-upgrade-dialog.level-up-celebrate .hero-level-celebration i:nth-child(4),
.equipment-upgrade-dialog.level-up-celebrate .hero-level-celebration i:nth-child(8){animation-delay:.23s}
@media(prefers-reduced-motion:reduce){
.equipment-upgrade-dialog.level-up-celebrate:after,
.equipment-upgrade-dialog.level-up-celebrate .hero-level-celebration i{animation:none}
}
/* Standard close icon and shared inventory count typography. */
.equipment-upgrade-dialog>header button[data-upgrade-close]{
  width:32px;height:32px;padding:0;border:0;border-radius:50%;
  background:#15191b url("assets/ui/modal-close-x.png") center/16px 16px no-repeat;
  color:transparent;font-size:0;
}
.equipment-level-host{position:relative}
.equipment-level-host>.equipment-enhance-badge{
  position:absolute;z-index:3;right:3px;bottom:2px;
  display:block;min-width:0;margin:0;padding:0;border:0;border-radius:0;
  background:transparent;color:#fff;
  font:900 12px/1 "Malgun Gothic",system-ui,sans-serif;
  letter-spacing:.2px;text-align:right;pointer-events:none;
  -webkit-text-stroke:2px #111;paint-order:stroke fill;
  text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111;
}
/* Keep the bar node and animate its width like hero experience. */
.equipment-upgrade-bar i{transition:width .2s}
@media(prefers-reduced-motion:reduce){.equipment-upgrade-bar i{transition:none}}

.equipment-upgrade-confirm{display:flex;align-items:center;justify-content:center;gap:12px}
.equipment-upgrade-confirm .confirm-gold{display:inline-flex;align-items:center;gap:3px}
.equipment-upgrade-confirm .confirm-gold img{width:22px;height:22px;object-fit:contain}
/* Hero level-up follows the approved equipment upgrade layout. */
.hero-level-dialog.equipment-style-level{padding:14px}
.hero-level-dialog.equipment-style-level>header{padding-bottom:12px}
.hero-upgrade-summary[hidden],.hero-book-heading[hidden]{display:none}
.equipment-style-level .hero-level-stat-preview{margin-top:18px;padding:12px 16px;gap:7px}
.equipment-style-level .hero-level-progress{width:100%;margin:18px 0 0}
.equipment-style-level .hero-level-progress-head{align-items:center}
.equipment-style-level .hero-level-progress-head>strong{font-size:11px;color:#eee1c2}
.equipment-style-level .hero-level-progress-head>b{font-size:11px;font-weight:400;color:#aaa08d}
.equipment-style-level .hero-level-progress-head>b small{display:none}
.equipment-style-level .hero-exp-bar{margin-top:8px}
.equipment-style-level .hero-exp-bar i{background:#5bbba4}
.equipment-style-level .hero-book-heading{margin-top:20px}
.hero-level-dialog.equipment-style-level .hero-exp-materials{
 display:flex;justify-content:center;gap:20px;margin:12px 0 0;padding:0;
}
.hero-level-dialog.equipment-style-level .hero-exp-materials[hidden]{display:none}
.hero-book-choice{width:76px;text-align:center}
.hero-book-choice>span,.hero-book-choice>small{display:block;font-size:10px;margin-top:5px}
.hero-book-choice>small{font-size:9px;color:#aaa08d}
.equipment-style-level .hero-book-choice .hero-exp-material{display:block;position:relative;margin:0 auto;width:64px;height:64px;min-height:0;padding:0}
.equipment-style-level .hero-book-choice .hero-exp-material img{width:100%;height:100%;object-fit:contain}
.equipment-style-level .hero-book-choice .hero-exp-material em{
 right:2px;bottom:2px;min-width:0;padding:0;background:none;border:0;
 font-size:11px;color:#fff;text-shadow:0 1px 3px #000,-1px -1px #000;
}
.hero-level-dialog.equipment-style-level .hero-material-actions{margin:18px 9px 0;grid-template-columns:82px minmax(0,1fr) 82px;gap:11px}
.equipment-style-level .hero-material-actions[hidden]{display:none}
.hero-level-dialog.equipment-style-level>.hero-level-confirm{
 display:flex;align-items:center;justify-content:center;gap:12px;
 height:42px;margin-top:18px;border:2px solid #63b9b0;
 background:#28796f;color:#f0fffa;font-size:14px;
}
.hero-level-dialog.equipment-style-level>.hero-level-confirm:disabled{filter:none;opacity:.45}
.hero-level-dialog.equipment-style-level>.hero-level-confirm .confirm-gold{display:inline-flex;align-items:center;gap:3px}
.hero-level-dialog.equipment-style-level>.hero-level-confirm .confirm-gold img{width:22px;height:22px;object-fit:contain}
@media(max-height:700px){
.hero-level-dialog.equipment-style-level{padding:10px}
.equipment-style-level .hero-upgrade-summary,.equipment-style-level .hero-level-stat-preview,.equipment-style-level .hero-level-progress,.equipment-style-level .hero-book-heading{margin-top:10px}
.hero-level-dialog.equipment-style-level .hero-material-actions,.hero-level-dialog.equipment-style-level>.hero-level-confirm{margin-top:10px}
.equipment-style-level .hero-level-stat-preview{padding-block:8px}
}
/* Match star growth to equipment growth without altering its unique effects. */
.hero-star-dialog.equipment-style-star{padding:14px}
.hero-star-dialog.equipment-style-star>header{padding-bottom:12px}
.equipment-style-star .hero-star-stat-preview{margin-top:18px;padding:12px 16px;gap:7px}
.equipment-style-star .hero-star-rank{margin:18px 0 0}
.equipment-style-star .hero-star-materials{margin-top:20px;min-height:0}
.equipment-style-star .hero-star-materials h3{align-self:stretch;margin:0 0 12px;font-size:14px;font-weight:900;color:#eee1c2;text-align:left}
.equipment-style-star .hero-fragment-slot{width:64px;height:64px}
.equipment-style-star .hero-star-confirm{
 height:42px;margin-top:18px;gap:12px;
 border-color:#63b9b0;background:#28796f;color:#f0fffa;font-size:14px;
}
.equipment-style-star .hero-star-confirm:disabled{border-color:#63b9b0;background:#28796f;color:#f0fffa;opacity:.45}
.equipment-style-star .hero-star-confirm:disabled img{filter:none}
.equipment-style-star .hero-star-confirm .confirm-gold{gap:3px}
.equipment-style-star .hero-star-confirm .confirm-gold img{width:22px;height:22px}
@media(max-height:700px){
.hero-star-dialog.equipment-style-star{padding:10px}
.equipment-style-star .hero-star-summary,.equipment-style-star .hero-star-stat-preview,
.equipment-style-star .hero-star-rank,.equipment-style-star .hero-star-materials,
.equipment-style-star .hero-star-confirm{margin-top:10px}
.equipment-style-star .hero-star-stat-preview{padding-block:8px}
}
/* Keep the star progression beside the hero portrait, aligned with the name. */
.equipment-style-star .hero-star-summary>div:last-child{min-width:0;flex:1}
.equipment-style-star .hero-star-summary .hero-star-rank{
  margin:6px 0 0;align-items:flex-start;justify-content:flex-start;
}
.equipment-style-star .hero-star-summary .star-rank-comparison,
.equipment-style-star .hero-star-summary .star-rank-track{
  justify-content:flex-start;
}
/* Material icons and quantities identify the group without a heading. */
.equipment-upgrade-dialog .equipment-stone-heading,
.hero-level-dialog .hero-book-heading,
.equipment-style-star .hero-star-materials h3{display:none}
.equipment-upgrade-dialog .equipment-stone-list{margin-top:20px}
.hero-level-dialog.equipment-style-level .hero-exp-materials{margin-top:20px}
.equipment-style-star .hero-star-materials{margin-top:20px}
/* Breakthrough: portrait, stat preview, materials, and the shared action. */
.hero-level-dialog.breakthrough-mode{padding:14px}
.hero-level-dialog.breakthrough-mode>header{padding-bottom:12px}
.hero-level-dialog.breakthrough-mode .hero-level-stat-preview{margin-top:18px;padding:12px 16px;gap:7px}
.hero-level-dialog.breakthrough-mode .hero-exp-materials{
  min-height:0;margin-top:20px;padding:0;
  align-items:center;justify-content:center;gap:20px;
}
.hero-level-dialog.breakthrough-mode .hero-exp-materials:before{display:none}
.hero-level-dialog.breakthrough-mode .hero-breakthrough-material{width:64px;height:64px}
.hero-level-dialog.breakthrough-mode>.hero-level-confirm{
  display:flex;align-items:center;justify-content:center;gap:12px;
  height:42px;margin-top:18px;border:2px solid #63b9b0;
  background:#28796f;color:#f0fffa;font-size:14px;
}
.hero-level-dialog.breakthrough-mode>.hero-level-confirm:disabled{
  border-color:#63b9b0;background:#28796f;color:#f0fffa;filter:none;opacity:.45;
}
.hero-level-dialog.breakthrough-mode .confirm-gold{display:inline-flex;align-items:center;gap:3px}
.hero-level-dialog.breakthrough-mode .confirm-gold img{width:22px;height:22px;object-fit:contain}
@media(max-height:700px){
.hero-level-dialog.breakthrough-mode{padding:10px}
.hero-level-dialog.breakthrough-mode .hero-upgrade-summary,
.hero-level-dialog.breakthrough-mode .hero-level-stat-preview,
.hero-level-dialog.breakthrough-mode .hero-exp-materials,
.hero-level-dialog.breakthrough-mode>.hero-level-confirm{margin-top:10px}
.hero-level-dialog.breakthrough-mode .hero-level-stat-preview{padding-block:8px}
}
.dungeon-modal[hidden]{display:none}
.dungeon-modal{position:fixed;inset:0;z-index:1800;display:grid;place-items:center;padding:14px;background:#0a0d0fca;animation:popupBackdropIn 160ms ease-out both}
.dungeon-dialog{width:min(430px,100%);padding:14px;border:3px solid #8e7445;border-radius:14px;background:#202528;color:#eee1c2;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327;animation:popupDialogIn 200ms ease-out both}
.dungeon-dialog>header{display:flex;align-items:center;justify-content:space-between;width:auto;height:auto;margin:0;padding:0 0 12px;border:0;border-bottom:1px solid #5d503b;background:transparent}
.dungeon-dialog>header p{font-size:7px;letter-spacing:2px;color:#c69a46}
.dungeon-dialog>header h2{font-size:17px;color:#fff2cf;margin-top:2px}
.dungeon-close{width:32px;height:32px;padding:0;border:0;border-radius:50%;background:#15191b url("assets/ui/modal-close-x.png") center/16px 16px no-repeat;cursor:pointer}
.dungeon-group{margin-top:20px}
.dungeon-group h3{margin:0 0 10px 4px;font-size:14px;color:#eee1c2}
.dungeon-entries{display:grid;gap:9px}
.dungeon-entry{display:flex;align-items:center;gap:12px;width:100%;padding:11px;border:1px solid #565448;border-radius:10px;background:#2b2f31;color:#eee1c2;text-align:left;font-family:inherit;cursor:pointer}
.dungeon-entry:hover{border-color:#63b9b0;background:#303b3b}
.dungeon-entry.weekly{border-color:#8b724c;background:#332f2b}
.dungeon-entry-icon{display:grid;place-items:center;flex:0 0 54px;height:54px;border-radius:9px;background:#212528}
.dungeon-entry-icon img{width:48px;height:48px;object-fit:contain}
.dungeon-entry-copy{flex:1;min-width:0}
.dungeon-entry-copy strong{display:block;font-size:14px}
.dungeon-entry-copy small{display:block;margin-top:5px;color:#b0a897;font-size:11px;line-height:1.5;word-break:keep-all}
.dungeon-arrow{width:12px;height:18px;object-fit:contain;opacity:.65}
.dungeon-preview{text-align:center;margin:22px 0}
.dungeon-preview>img{width:82px;height:82px;object-fit:contain}
.dungeon-preview>small{display:block;color:#c69a46;font-size:10px;margin-top:12px}
.dungeon-preview>h3{font-size:18px;margin:6px 0 10px}
.dungeon-preview>p{color:#b0a897;font-size:12px;line-height:1.7}
.dungeon-preparing{padding:16px;background:#171c1f;border-radius:9px;text-align:center;font-size:13px;color:#d8c69c}
.dungeon-preparing span{display:block;margin-top:7px;color:#a69e90;font-size:11px}
.dungeon-back{width:100%;height:42px;margin-top:18px;border:2px solid #63b9b0;border-radius:8px;background:#28796f;color:#f0fffa;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer}
.dungeon-dialog button:focus-visible{outline:2px solid #ffd567;outline-offset:2px}
@media(max-height:650px){.dungeon-group{margin-top:12px}.dungeon-entry{padding:7px}.dungeon-entry-icon{height:42px;flex-basis:42px}.dungeon-entry-icon img{width:38px;height:38px}.dungeon-entries{gap:6px}}
.dungeon-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:18px;padding:4px;border-radius:9px;background:#15191b}
.dungeon-tabs button{height:36px;border:1px solid transparent;border-radius:7px;background:transparent;color:#aaa08d;font-family:inherit;font-size:14px;font-weight:900;cursor:pointer}
.dungeon-tabs button[aria-selected=true]{background:#28796f;border-color:#63b9b0;color:#f0fffa}

/* Reserve three dungeon rows for both tabs. */
.dungeon-content:has(.dungeon-tabs) .dungeon-entries{min-height:264px;grid-auto-rows:82px;align-content:start}
@media(max-height:650px){.dungeon-content:has(.dungeon-tabs) .dungeon-entries{min-height:207px;grid-auto-rows:65px}}

.battlefield.dungeon-flow{background-image:url("assets/battlefields/mist-forest-v1.png")!important;background-size:cover!important;background-position:center!important}
.battlefield.dungeon-flow>*:not(.dungeon-stage){visibility:hidden}
.dungeon-stage[hidden]{display:none}
.dungeon-stage{position:absolute;inset:0;z-index:100}
.dungeon-stage-head{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;padding:10px;background:#142328de;border:1px solid #6ba394;border-radius:9px;color:#fff2cf}
.dungeon-stage-head small,.dungeon-stage-head strong{display:block}.dungeon-stage-head small{font-size:9px;color:#94c3b4;margin-bottom:4px}.dungeon-stage-head strong{font-size:14px}
.dungeon-stage button,.dungeon-enter,.dungeon-retry{padding:8px 14px;border:1px solid #63b9b0;border-radius:7px;background:#28796f;color:#f0fffa;font:900 12px "Malgun Gothic",sans-serif;cursor:pointer}
.dungeon-enter,.dungeon-retry{width:100%;height:42px;margin-top:18px}
.dungeon-list-return{display:block;width:100%;margin-top:10px;padding:10px;border:1px solid #776546;border-radius:7px;background:#2b2f31;color:#eee1c2;cursor:pointer}
.dungeon-demo-hero,.dungeon-demo-enemy{position:absolute;top:45%;width:90px;height:100px;object-fit:contain;filter:drop-shadow(0 5px 3px #0006)}
.dungeon-demo-hero{left:15%}.dungeon-demo-enemy{right:13%}
.dungeon-enemy-health{position:absolute;right:10%;top:34%;width:110px;color:#fff;font-size:11px;text-align:center}
.dungeon-enemy-health>div{height:7px;background:#211a1a;border-radius:4px;margin-top:5px;overflow:hidden}.dungeon-enemy-health i{display:block;height:100%;background:#e57558;transition:width .2s}
.dungeon-stage-controls{position:absolute;bottom:15px;left:0;right:0;text-align:center}
.dungeon-stage-controls span{display:block;font-size:10px;color:#fff;text-shadow:0 1px 2px #000;margin-bottom:8px}
.dungeon-hit{animation:dungeonHit .25s ease-out}
@keyframes dungeonHit{50%{transform:translateX(8px);filter:brightness(2)}}
.dungeon-flow-mode .battle-shortcuts,.dungeon-flow-mode .battle-deck-heading,.dungeon-flow-mode .hero-cards{pointer-events:none;opacity:.45}

/* Dungeon occupies one game-sized screen and keeps only battle + deployment UI. */
.dungeon-screen[hidden]{display:none}
.dungeon-screen-header{display:flex;align-items:center;justify-content:space-between;width:auto;height:auto;padding:10px 13px;border:0;border-bottom:3px solid #26313a;background:#f8e9b8}
.dungeon-screen-header small,.dungeon-screen-header strong{display:block}.dungeon-screen-header small{color:#96701f;font-size:8px;font-weight:900;letter-spacing:2px}.dungeon-screen-header strong{margin-top:3px;font-size:16px}
.dungeon-screen-header button{height:34px;padding:0 13px;border:2px solid #26313a;border-radius:8px;background:#fff8df;color:#26313a;font:900 11px "Malgun Gothic",sans-serif;cursor:pointer}
.dungeon-battle-view{position:relative;overflow:hidden;background:url("assets/battlefields/mist-forest-v1.png") center/cover no-repeat;border-bottom:4px solid #26313a}
.dungeon-battle-view:after{content:"";position:absolute;left:0;right:0;bottom:18%;height:28%;background:#6d765d55;border-block:2px solid #46504455;transform:skewY(-1deg)}
.dungeon-full-hero,.dungeon-full-enemy{position:absolute;z-index:2;bottom:19%;width:92px;height:104px;object-fit:contain;filter:drop-shadow(0 5px 3px #0007)}.dungeon-full-hero{left:13%}.dungeon-full-enemy{right:12%}
.dungeon-battle-status{position:absolute;z-index:3;top:16px;left:50%;width:150px;transform:translateX(-50%);color:#fff;font:900 11px "Malgun Gothic",sans-serif;text-align:center;text-shadow:0 2px 2px #000}
.dungeon-battle-status>div{height:8px;margin-top:6px;overflow:hidden;border:1px solid #1b2024;border-radius:5px;background:#211a1a}.dungeon-battle-status i{display:block;height:100%;background:#e57558;transition:width .2s}
.dungeon-wave-label{position:absolute;z-index:3;right:10px;bottom:10px;padding:6px 8px;border-radius:7px;background:#172129cc;color:#fff;font-size:10px}.dungeon-wave-label b{color:#ffd45c}
.dungeon-deployment{padding:11px 12px 12px;background:#f8e9b8}
.dungeon-deployment-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:13px}.dungeon-deployment-head strong{font-size:14px;color:#263f59}.dungeon-deployment-head span{padding:5px 8px;border-radius:7px;background:#26313a;color:#fff;font-size:9px}.dungeon-deployment-head span b{color:#ffd45c;font-size:12px}
.dungeon-deck-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.dungeon-deck-card{min-width:0;height:75px;display:grid;grid-template-rows:43px auto auto;place-items:center;padding:3px;border:2px solid #26313a;border-radius:9px;background:#fffdf1;color:#26313a;font-family:inherit;cursor:pointer}.dungeon-deck-card img{width:43px;height:43px;object-fit:contain}.dungeon-deck-card strong{max-width:100%;overflow:hidden;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.dungeon-deck-card small{color:#a06f18;font-size:8px}.dungeon-deck-card.empty{display:grid;place-items:center;border-style:dashed;background:#ede1ba;color:#b9a979}.dungeon-deck-card.empty span{font-size:24px}.dungeon-deck-card.summoned{animation:dungeonCardTap .25s ease}
.dungeon-screen-actions{display:grid;grid-template-columns:1fr 1.35fr;gap:8px;padding:10px 12px;border-top:3px solid #26313a;background:#f8e9b8}.dungeon-screen-actions button{border:2px solid #26313a;border-radius:8px;font:900 12px "Malgun Gothic",sans-serif;cursor:pointer}.dungeon-select-action{background:#fff8df;color:#26313a}.dungeon-attack-action{border-color:#326d65!important;background:#28796f;color:#f0fffa}
@keyframes dungeonCardTap{50%{transform:translateY(-4px) scale(1.05)}}
@media(max-width:480px){.dungeon-screen{border:0;border-radius:0}}

/* The dungeon popup reuses the real battlefield and deployment UI unchanged. */

.dungeon-screen>.dungeon-battlefield{display:block;width:100%;height:100%;min-height:0;flex:none;border-bottom:4px solid #26313a;background-image:url("assets/battlefields/mist-forest-v1.png")!important;background-position:center!important;background-size:cover!important}
.dungeon-screen>.dungeon-battlefield>*{visibility:visible}
.dungeon-screen .dungeon-deployment-panel{display:block!important;min-height:0;padding:12px 12px 10px;background:#f8e9b8}
.dungeon-screen .dungeon-deployment-panel .battle-menu-head{display:flex}
.dungeon-screen .dungeon-deployment-panel .hero-cards{display:grid;pointer-events:none}
.dungeon-overlay-title{position:absolute;z-index:80;left:12px;top:10px;padding:7px 9px;border-radius:8px;background:#172129cc;color:#fff}.dungeon-overlay-title small,.dungeon-overlay-title strong{display:block}.dungeon-overlay-title small{font-size:8px;color:#b7ded1;letter-spacing:1px}.dungeon-overlay-title strong{margin-top:3px;font-size:13px}
.dungeon-overlay-exit{position:absolute;z-index:81;right:12px;top:12px;height:31px;padding:0 11px;border:2px solid #fff8;border-radius:7px;background:#172129cc;color:#fff;font:900 10px "Malgun Gothic",sans-serif;cursor:pointer}
.dungeon-screen .dungeon-battle-status{top:62px}
.dungeon-screen .dungeon-full-hero,.dungeon-screen .dungeon-full-enemy{bottom:22%}
.dungeon-screen-actions{padding:9px 12px;border-top:3px solid #26313a}

/* Exact battle proportions: the real battlefield and real battle panel are moved here. */




.dungeon-header-title{display:none}
.dungeon-header-exit{display:none}





.dungeon-header-tabs{display:flex;flex:0 0 auto;gap:4px;padding:3px;border-radius:9px;background:#26313a}
.dungeon-header-tabs button{width:42px;height:30px;padding:0;border:0;border-radius:7px;background:transparent;color:#aeb7bb;font:900 11px "Malgun Gothic",sans-serif;cursor:pointer}
.dungeon-header-tabs button[aria-selected="true"]{background:#28796f;color:#f0fffa;box-shadow:inset 0 0 0 1px #63b9b0}





.dungeon-screen>#battlefield{align-self:center;justify-self:center;width:calc(100% - 24px);height:294px;min-height:294px;flex:none;border-radius:13px}
.dungeon-screen>.dungeon-deployment-panel{height:auto;min-height:0;overflow:hidden;padding:9px 12px 12px}
.dungeon-screen>.dungeon-deployment-panel .battle-menu-head{margin-top:0}
.dungeon-screen>.dungeon-deployment-panel .battle-adventure-heading,
.dungeon-screen>.dungeon-deployment-panel .battle-shortcuts{display:none!important}
.dungeon-screen>.dungeon-deployment-panel .dungeon-inline-picker .battle-adventure-heading{display:flex!important}
.dungeon-screen>.dungeon-deployment-panel .hero-cards{pointer-events:auto}
.dungeon-screen>.dungeon-deployment-panel .hero-cards .card{pointer-events:auto}
.dungeon-screen>#battlefield .idle-chest,
.dungeon-screen>#battlefield .battle-location{display:none}
body:has(.dungeon-screen:not([hidden])) .deck-edit-modal{z-index:1900}
.dungeon-screen-actions .dungeon-attack-action:disabled{opacity:.72;cursor:default}
.dungeon-objective{position:absolute;z-index:82;left:50%;top:12px;min-width:190px;transform:translateX(-50%);padding:7px 11px;border:2px solid #ffffff8c;border-radius:9px;background:#172129df;color:#fff;text-align:center;pointer-events:none}
.dungeon-objective strong,.dungeon-objective span{display:block}.dungeon-objective strong{font-size:12px;color:#ffd45c}.dungeon-objective span{margin-top:3px;font-size:8px;color:#dcebe5}
.enemy.dungeon-guarded{left:78%!important;filter:drop-shadow(0 0 8px #70d9ff) drop-shadow(0 3px 1px #0005)}
.dungeon-boss-lock{position:absolute;left:50%;top:-25px;transform:translateX(-50%);padding:3px 6px;border:1px solid #9de7ff;border-radius:6px;background:#234c66;color:#e8fbff;font-size:8px;white-space:nowrap}
.world-travel.dungeon-return{z-index:6000;background:#101820}
.dungeon-screen.dungeon-selection-mode{grid-template-rows:80px minmax(0,1fr);background:#f8e9b8}
.dungeon-selection-header{display:flex;align-items:center;justify-content:space-between;width:100%;height:80px;padding:10px 16px;border-bottom:0;background:#f8e9b8}
.dungeon-selection-close{width:34px;height:34px;padding:0;border:0;border-radius:50%;background:#26313a url("assets/ui/modal-close-x.png") center/16px 16px no-repeat;cursor:pointer}
.dungeon-selection-content{display:flex;align-items:flex-start;padding:16px 12px;background:#f8e9b8}
.dungeon-selection-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%;margin:0;padding:0}
.dungeon-selection-slots .dungeon-selection-card{position:relative;width:100%;aspect-ratio:1;overflow:hidden;padding:0;border:0;border-radius:9px;background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;text-align:left;cursor:pointer}
.dungeon-selection-slots .dungeon-selection-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#111923ed);pointer-events:none}
.dungeon-selection-card:nth-child(1){background-image:url("assets/ui/quick-menu/world-map-table-v5.png")}
.dungeon-selection-card:nth-child(2){background-image:url("assets/ui/quick-menu/quest-board-v1.png")}
.dungeon-selection-card:nth-child(3){background-image:url("assets/ui/quick-menu/dungeon-gate-v1.png")}
.dungeon-selection-card small,.dungeon-selection-card strong{position:absolute;z-index:2;left:9px;right:9px;text-shadow:0 1px 2px #000,0 0 3px #000}
.dungeon-selection-card small{bottom:31px;color:#ffe182;font-size:7px;font-weight:1000;letter-spacing:1px}
.dungeon-selection-card strong{bottom:11px;color:#fff8df;font-size:15px;line-height:1.1}
.dungeon-selection-card:focus-visible{outline:2px solid #B99555;outline-offset:-2px}
.dungeon-inline-picker{margin-top:8px}
.dungeon-inline-picker .battle-adventure-heading{margin-top:0}
.dungeon-inline-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;margin-top:6px}
.dungeon-inline-slots .dungeon-selection-card{position:relative;width:100%;height:98px;overflow:hidden;padding:0;border:0;border-radius:9px;background-position:center;background-size:cover;background-repeat:no-repeat;color:#fff;text-align:left;cursor:pointer}
.dungeon-inline-slots .dungeon-selection-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,#111923ed);pointer-events:none}
.dungeon-inline-slots .dungeon-selection-card small,.dungeon-inline-slots .dungeon-selection-card strong{position:absolute;z-index:2;left:9px;right:9px;text-shadow:0 1px 2px #000,0 0 3px #000}
.dungeon-inline-slots .dungeon-selection-card small{bottom:29px;color:#ffe182;font-size:7px;font-weight:1000;letter-spacing:1px}
.dungeon-inline-slots .dungeon-selection-card strong{bottom:9px;color:#fff8df;font-size:14px;line-height:1.1}
.dungeon-inline-slots .dungeon-selection-card.active{box-shadow:inset 0 0 0 2px #E8BD62}
.dungeon-inline-slots .dungeon-selection-card.weekly{grid-column:1/-1;height:98px;background-image:url("assets/ui/quick-menu/dungeon-gate-v1.png");background-position:center 46%}
.dungeon-inline-slots .dungeon-selection-card.weekly:after{inset:20% 0 0}
.dungeon-screen>#battlefield[data-dungeon="gold"]{background-image:url("assets/battlefields/gold-dungeon.png")!important;background-position:center 67%!important;background-size:cover!important}
.dungeon-screen>#battlefield[data-dungeon="gold"]:before{content:"";position:absolute;z-index:300;inset:0;background:url("assets/battlefields/gold-dungeon-foreground.png?v=1") center/100% 100% no-repeat;pointer-events:none}
.dungeon-screen>#battlefield[data-dungeon="gold"] .dungeon-objective{z-index:320}
.dungeon-screen>#battlefield[data-dungeon="gold"] .dungeon-overlay-exit{z-index:321}
.dungeon-screen>#battlefield[data-dungeon="exp"]{background-image:url("assets/battlefields/exp-dungeon.png")!important;background-position:center 66%!important;background-size:cover!important}
.dungeon-screen>#battlefield[data-dungeon="stone"]{background-image:url("assets/battlefields/stone-dungeon.png")!important;background-position:center 65%!important;background-size:cover!important}
.dungeon-screen>#battlefield[data-dungeon="stone"]:before{content:"";position:absolute;z-index:300;inset:0;background:url("assets/battlefields/stone-dungeon-foreground.png?v=1") center/100% 100% no-repeat;pointer-events:none}
.dungeon-screen>#battlefield[data-dungeon="stone"] .dungeon-objective{z-index:320}
.dungeon-screen>#battlefield[data-dungeon="stone"] .dungeon-overlay-exit{z-index:321}
.dungeon-screen>#battlefield[data-dungeon="exp"]:before{content:"";position:absolute;z-index:300;inset:0;background:url("assets/battlefields/exp-dungeon-foreground.png?v=2") center/100% 100% no-repeat;pointer-events:none}
.dungeon-screen>#battlefield[data-dungeon="exp"] .dungeon-objective{z-index:320}
.dungeon-screen>#battlefield[data-dungeon="exp"] .dungeon-overlay-exit{z-index:321}
.dungeon-inline-slots .dungeon-card-1{background-image:url("assets/battlefields/gold-dungeon.png")}
.dungeon-inline-slots .dungeon-card-2{background-image:url("assets/battlefields/exp-dungeon.png")}
.dungeon-inline-slots .dungeon-card-3{background-image:url("assets/battlefields/stone-dungeon.png")}
.dungeon-screen,

.dungeon-screen>#battlefield.dungeon-battlefield{border:0!important;box-shadow:none!important}
.dungeon-screen>#battlefield.dungeon-briefing-mode>*:not(.dungeon-briefing){visibility:hidden!important}
.dungeon-briefing{position:absolute;z-index:350;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px 24px 20px;background:transparent;color:#fff;visibility:visible!important}
.dungeon-briefing-copy{width:100%;max-width:none}
.dungeon-briefing-copy>small{display:block;margin-bottom:4px;color:#f0c75e;font-size:9px;font-weight:1000;letter-spacing:1.5px}
.dungeon-briefing-copy h2{margin:0;color:#fff8df;font-size:22px;font-weight:1000;line-height:1.1;text-shadow:0 2px 2px #0008}
.dungeon-briefing-copy p{width:50%;max-width:50%;margin:5px 0 0;color:#9da6a1;font-size:10px;font-weight:700;line-height:1.55;word-break:keep-all;overflow-wrap:normal;text-shadow:0 1px 2px #0009}
.dungeon-briefing-rewards{display:flex;align-items:center;gap:12px;margin-top:15px}
.dungeon-briefing-rewards>b{flex:0 0 auto;padding-left:3px;color:#fff0c4;font-size:11px;font-weight:1000}
.dungeon-briefing-rewards ul{display:flex;align-items:center;gap:7px;margin:0;padding:0;list-style:none}
.dungeon-briefing-rewards li{display:flex;align-items:center;gap:5px;min-height:39px;padding:4px 9px 4px 5px;border:1px solid #c6ae6f80;border-radius:8px;background:#17232ddd;box-shadow:inset 0 1px #ffffff1f}
.dungeon-briefing-rewards li>span{display:grid;width:29px;height:29px;place-items:center;border-radius:6px;background:#f5ecd7}
.dungeon-briefing-rewards img{width:25px;height:25px;object-fit:contain}
.dungeon-briefing-rewards strong{color:#fff9e7;font-size:10px;font-weight:900;white-space:nowrap}
.dungeon-briefing-rewards li>small{color:#f1c85f;font-size:9px;font-weight:1000}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldGuard,.enemy-expGuard,.enemy-stoneGuard) .enemy-sprite{width:40px;height:40px;object-fit:contain}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldCarrier,.enemy-expCarrier,.enemy-stoneCarrier) .enemy-sprite{width:42px;height:42px;object-fit:contain}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldQueen,.enemy-expDungeonBoss,.enemy-stoneDungeonBoss){width:114px;height:114px}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldQueen,.enemy-expDungeonBoss,.enemy-stoneDungeonBoss) .enemy-sprite{z-index:1;width:114px;height:114px;max-width:none;object-fit:contain;filter:drop-shadow(0 3px 1px #0004)}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldQueen,.enemy-expDungeonBoss,.enemy-stoneDungeonBoss):not(.attacking) .enemy-sprite{animation:goldQueenIdle 1.9s cubic-bezier(.37,0,.63,1) infinite;transform-origin:50% 100%;will-change:transform}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldQueen,.enemy-expDungeonBoss,.enemy-stoneDungeonBoss):before{content:none}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldQueen,.enemy-expDungeonBoss,.enemy-stoneDungeonBoss).dungeon-guarded{filter:none}
.dungeon-screen>#battlefield[data-dungeon="gold"] .elite-battle-hud>small{left:auto;right:0;top:calc(100% + 2px);transform:none;text-align:right}
.dungeon-screen>#battlefield[data-dungeon="gold"] .elite-battle-hud>small.dungeon-protected-label{color:#ffd45c}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldGuard,.enemy-expGuard,.enemy-stoneGuard):not(.attacking) .enemy-sprite{animation:goldGuardWalk var(--gold-walk-duration,.58s) ease-in-out var(--gold-walk-delay,0s) infinite}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldCarrier,.enemy-expCarrier,.enemy-stoneCarrier):not(.attacking) .enemy-sprite{animation:goldCarrierWalk var(--gold-walk-duration,.58s) ease-in-out var(--gold-walk-delay,0s) infinite}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldGuard,.enemy-expGuard,.enemy-stoneGuard):before,
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldCarrier,.enemy-expCarrier,.enemy-stoneCarrier):before{content:"";position:absolute;z-index:-1;left:50%;bottom:1px;width:30px;height:7px;transform:translateX(-50%);border-radius:50%;background:#17212955;animation:goldMobShadow .42s ease-in-out infinite;pointer-events:none}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldGuard,.enemy-expGuard,.enemy-stoneGuard):before{animation-duration:var(--gold-walk-duration,.58s);animation-delay:var(--gold-walk-delay,0s)}
.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldCarrier,.enemy-expCarrier,.enemy-stoneCarrier):before{width:34px;animation-duration:var(--gold-walk-duration,.58s);animation-delay:var(--gold-walk-delay,0s)}
@keyframes goldGuardWalk{0%,100%{transform:translateX(-50%) translateY(0) rotate(calc(var(--gold-walk-tilt,2deg)*-1)) scale(1)}25%,75%{transform:translateX(-50%) translateY(var(--gold-walk-lift,-3px)) rotate(var(--gold-walk-tilt,2deg)) scale(.97,1.04)}50%{transform:translateX(-50%) translateY(0) rotate(calc(var(--gold-walk-tilt,2deg)*-.5)) scale(1.04,.96)}}
@keyframes goldCarrierWalk{0%,100%{transform:translateX(-50%) translateY(0) rotate(calc(var(--gold-walk-tilt,1.5deg)*-1)) scale(1)}25%{transform:translateX(-50%) translateY(var(--gold-walk-lift,-2px)) rotate(var(--gold-walk-tilt,1.5deg)) scale(.98,1.02)}50%{transform:translateX(-50%) translateY(0) rotate(var(--gold-walk-tilt,2deg)) scale(1.03,.97)}75%{transform:translateX(-50%) translateY(var(--gold-walk-lift,-2px)) rotate(calc(var(--gold-walk-tilt,1.5deg)*-.65)) scale(.98,1.02)}}
@keyframes goldQueenIdle{0%,100%{transform:translateX(-50%) rotate(-.22deg) scale(1)}50%{transform:translateX(-50%) rotate(.22deg) scale(1.006,.992)}}
@keyframes goldMobShadow{0%,100%{transform:translateX(-50%) scaleX(1);opacity:.55}25%,75%{transform:translateX(-50%) scaleX(.78);opacity:.35}50%{transform:translateX(-50%) scaleX(1.06);opacity:.58}}
@media(prefers-reduced-motion:reduce){.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldGuard,.enemy-expGuard,.enemy-stoneGuard) .enemy-sprite,.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldCarrier,.enemy-expCarrier,.enemy-stoneCarrier) .enemy-sprite,.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldQueen,.enemy-expDungeonBoss,.enemy-stoneDungeonBoss) .enemy-sprite,.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldGuard,.enemy-expGuard,.enemy-stoneGuard):before,.dungeon-screen>#battlefield:is([data-dungeon="gold"],[data-dungeon="exp"],[data-dungeon="stone"]) :is(.enemy-goldCarrier,.enemy-expCarrier,.enemy-stoneCarrier):before{animation:none}}
.battlefield>.heroes,.battlefield>.enemies,.battlefield>.projectiles{display:contents}
.hero:has(.hero-sprite[src*="/warrior-new1201-v1137.png"]) .hero-sprite{width:46px;height:46px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.18s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
@keyframes warriorGroundedIdle{0%,100%{transform:rotate(-1.8deg) scale(1)}42%{transform:rotate(2.1deg) scale(1.016,.976)}58%{transform:rotate(1.55deg) scale(1.012,.982)}}
.hero:has(.hero-sprite[src*="/shield-guard-new1201-v1137.png"]) .hero-sprite{width:46px;height:46px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.42s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
@keyframes shieldGuardGroundedIdle{0%,100%{transform:rotate(-1.25deg) scale(1)}44%{transform:rotate(1.45deg) scale(1.012,.982)}60%{transform:rotate(1deg) scale(1.008,.987)}}
.hero:has(.hero-sprite[src*="/archer-new1201-v1137.png"]) .hero-sprite{width:43px;height:43px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.08s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
@keyframes archerGroundedIdle{0%,100%{transform:rotate(-1.5deg) scale(1)}45%{transform:rotate(1.75deg) scale(1.014,.979)}62%{transform:rotate(1.15deg) scale(1.01,.985)}}
.hero:has(.hero-sprite[src*="/hunter-new1201-v1137.png"]) .hero-sprite{width:41px;height:41px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.34s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
@keyframes crossbowGroundedIdle{0%,100%{transform:rotate(-1.05deg) scale(1)}46%{transform:rotate(1.2deg) scale(1.012,.981)}63%{transform:rotate(.8deg) scale(1.008,.987)}}
.hero:has(.hero-sprite[src*="/arcane-sniper-new1201-v1137.png"]) .hero-sprite{width:42px;height:42px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.52s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
@keyframes arcaneGroundedIdle{0%,100%{transform:rotate(-1.15deg) scale(1)}45%{transform:rotate(1.3deg) scale(1.01,.984)}64%{transform:rotate(.8deg) scale(1.007,.989)}}
.hero:has(.hero-sprite[src*="/elemental-mage-new1201-v1137.png"]) .hero-sprite{width:42px;height:42px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.16s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
@keyframes elementalGroundedIdle{0%,100%{transform:rotate(-1.45deg) scale(1)}43%{transform:rotate(1.65deg) scale(1.014,.978)}61%{transform:rotate(1.05deg) scale(1.009,.985)}}
.hero:has(.hero-sprite[src*="/focused-priest-new1201-v1137.png"]) .hero-sprite{width:46px;height:46px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.38s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
@keyframes priestGroundedIdle{0%,100%{transform:rotate(-1.05deg) scale(1)}45%{transform:rotate(1.2deg) scale(1.011,.982)}63%{transform:rotate(.75deg) scale(1.007,.988)}}
.hero:has(.hero-sprite[src*="/group-saint-new1201-v1137.png"]) .hero-sprite{width:44px;height:44px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.56s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
@keyframes saintGroundedIdle{0%,100%{transform:rotate(-.9deg) scale(1)}46%{transform:rotate(1.05deg) scale(1.009,.985)}64%{transform:rotate(.65deg) scale(1.006,.99)}}
.hero:has(.hero-sprite[src*="/paladin.png"]) .hero-sprite{width:62px;height:62px;animation:heroRandomGroundedIdle var(--hero-idle-duration,1.62s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%;will-change:transform}
.hero.legendary:has(.hero-sprite[src*="/paladin.png"]) .hero-sprite{filter:drop-shadow(0 3px 1px #0004)}
@keyframes paladinGroundedIdle{0%,100%{transform:rotate(-1.1deg) scale(1)}46%{transform:rotate(1.3deg) scale(1.011,.983)}64%{transform:rotate(.8deg) scale(1.007,.989)}}
@keyframes heroRandomGroundedIdle{0%,100%{transform:rotate(var(--hero-idle-left,-1deg)) scale(1)}45%{transform:rotate(var(--hero-idle-right,1.1deg)) scale(var(--hero-idle-scale-x,1.012),var(--hero-idle-scale-y,.98))}63%{transform:rotate(var(--hero-idle-settle,.7deg)) scale(1.007,.988)}}
@media(prefers-reduced-motion:reduce){.hero:has(.hero-sprite[src*="/warrior-new1201-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/shield-guard-new1201-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/archer-new1201-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/hunter-new1201-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/arcane-sniper-new1201-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/elemental-mage-new1201-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/focused-priest-new1201-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/group-saint-new1201-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/paladin.png"]) .hero-sprite{animation:none}}
.hero-loadout .loadout-hero,.hero-loadout:not(.locked-hero-preview) .loadout-hero,.locked-hero-preview .loadout-hero{top:auto;bottom:calc(34% + 10px);transform:translateX(-50%)}
.hero-loadout .loadout-hero[src*="/warrior-new1201-v1137.png"],.hero-loadout .loadout-hero[src*="/shield-guard-new1201-v1137.png"],.hero-loadout .loadout-hero[src*="/focused-priest-new1201-v1137.png"]{width:70px;height:70px}
.hero-loadout .loadout-hero[src*="/archer-new1201-v1137.png"]{width:65px;height:65px}
.hero-loadout .loadout-hero[src*="/hunter-new1201-v1137.png"]{width:62px;height:62px}
.hero-loadout .loadout-hero[src*="/arcane-sniper-new1201-v1137.png"],.hero-loadout .loadout-hero[src*="/elemental-mage-new1201-v1137.png"]{width:64px;height:64px}
.hero-loadout .loadout-hero[src*="/group-saint-new1201-v1137.png"]{width:67px;height:67px}
.hero-loadout .loadout-hero[src*="/paladin.png"]{width:94px;height:94px}
.card .portrait,.equipment-heroes button .portrait{display:flex;align-items:flex-end;justify-content:center}
.card .portrait .hero-sprite,.equipment-heroes .portrait .hero-sprite{flex:0 0 auto;transform:translateY(-2px)}
.card .portrait:has(.hero-sprite[src*="/paladin.png"]),.equipment-heroes .portrait:has(.hero-sprite[src*="/paladin.png"]){overflow:visible}
.card .portrait .hero-sprite[src*="/paladin.png"],.equipment-heroes .portrait .hero-sprite[src*="/paladin.png"]{width:57px!important;height:57px!important;transform:translate(-1px,-11px);filter:drop-shadow(0 2px 1px #0003)}
.dungeon-screen-actions{grid-template-columns:1fr;align-items:center;gap:9px;height:72px;padding:11px 12px;border-top:0;background:#f8e9b8!important;box-shadow:none}
.dungeon-screen-actions button{height:46px;border-width:2px!important;border-style:solid!important;border-radius:9px;box-shadow:inset 0 1px #ffffff99,0 2px 0 #8aa39b;font-size:12px}

/* Keep the selected deck distinct from the add-only roster. */
.deck-selected .deck-hero.selected{border-color:#e5ba4d;box-shadow:inset 0 0 0 1px #e5ba4d}
.deck-roster .deck-hero.selected,.deck-roster .deck-hero.selected:disabled{border-color:#665f4e!important;background:#30373b!important;box-shadow:none!important;filter:grayscale(.8) brightness(.55);opacity:.38;cursor:default}
.deck-edit-dialog .deck-hero img[src*="/paladin.png"]{transform:scale(1.04);transform-origin:50% 100%}
.dungeon-start-action{border-color:#1f5a54!important;background:#3f8c82;color:#f5fffc}
.dungeon-exit-action{border-color:#687d76!important;background:#f7fbf2;color:#394a45}
.dungeon-start-action:disabled{opacity:.72;cursor:default}
.dungeon-start-action{position:relative;isolation:isolate;overflow:hidden;gap:9px}
.dungeon-start-action>span,.dungeon-start-action>.dungeon-entry-count{position:relative;z-index:1}
.dungeon-start-action.is-running:before{content:"";position:absolute;inset:0;pointer-events:none;background:#c6ffb0;opacity:.24;-webkit-mask:url("assets/ui/dungeon-wide-arrow.svg") 0 center/78px 88px repeat-x;mask:url("assets/ui/dungeon-wide-arrow.svg") 0 center/78px 88px repeat-x;animation:dungeonActionFlow 1.8s linear infinite}
@keyframes dungeonActionFlow{to{-webkit-mask-position:78px center;mask-position:78px center}}
@media(prefers-reduced-motion:reduce){.dungeon-start-action.is-running:before{animation:none}}
.dungeon-start-action .dungeon-entry-count{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:24px;padding:0 9px;border:0;border-radius:999px;background:#624833;color:#fff!important;font-size:12px;font-weight:1000;line-height:1;-webkit-text-stroke:.25px #fff}

/* Shared highlight for primary, full-width and modal action buttons. */
:is(
 .mobile-panel[data-panel="summon"] .summon-actions button,
 .event-feature button,
 .equip-confirm,
 .equip-unequip,
 .idle-reward-actions button,
 .bulk-sell-actions button,
 .deck-edit-actions button,
 .hero-level-confirm,
 .hero-star-confirm,
 .equipment-upgrade-confirm,
 .dungeon-screen-actions button
){display:flex;align-items:center;justify-content:center;height:44px;min-height:44px;padding:0 12px;background-image:none!important;font-family:"Malgun Gothic",system-ui,sans-serif!important;font-size:12px!important;font-weight:900!important;line-height:1!important;text-align:center;text-decoration:none!important;text-shadow:none!important;box-shadow:inset 0 2px 0 #ffffff80,0 2px 0 #00000025!important}
:is(
 .mobile-panel[data-panel="summon"] .summon-actions button,
 .equip-confirm,
 .equip-unequip,
 .idle-reward-actions button,
 .bulk-sell-actions button,
 .deck-edit-actions button,
 .hero-level-confirm,
 .hero-star-confirm,
 .equipment-upgrade-confirm,
 .dungeon-screen-actions button
):disabled{box-shadow:inset 0 2px 0 #ffffff2e,inset 0 9px 12px #ffffff0d!important}

:is(
 .mobile-panel[data-panel="summon"] .summon-actions button,
 .event-feature button,
 .equip-confirm,
 .idle-reward-actions #claimIdleReward,
 .deck-edit-actions #applyDeckButton,
 .hero-level-confirm,
 .hero-star-confirm,
 .equipment-upgrade-confirm,
 .dungeon-start-action
){border:2px solid #765019!important;border-radius:9px!important;background:#c58d31!important;color:#fff7dc!important}

:is(
 .mobile-panel[data-panel="summon"] .summon-actions button,
 .event-feature button,
 .equip-confirm,
 .idle-reward-actions #claimIdleReward,
 .deck-edit-actions #applyDeckButton,
 .hero-level-confirm,
 .hero-star-confirm,
 .equipment-upgrade-confirm,
 .dungeon-start-action
),
:is(
 .mobile-panel[data-panel="summon"] .summon-actions button,
 .event-feature button,
 .equip-confirm,
 .idle-reward-actions #claimIdleReward,
 .deck-edit-actions #applyDeckButton,
 .hero-level-confirm,
 .hero-star-confirm,
 .equipment-upgrade-confirm,
 .dungeon-start-action
) *{color:#fff7dc!important;text-decoration:none!important;text-shadow:none!important}

:is(
 .equip-unequip,
 .idle-reward-actions button:not(#claimIdleReward),
 .deck-edit-actions button:not(#applyDeckButton),
 .dungeon-exit-action
){border:2px solid #68756f!important;background:#3a4144!important;color:#f2eee2!important}

.bulk-sell-actions #confirmBulkSell{border:2px solid #7f3d35!important;background:#a65345!important;color:#fff4df!important}

:is(
 .mobile-panel[data-panel="summon"] .summon-actions button,
 .event-feature button,
 .equip-confirm,
 .equip-unequip,
 .idle-reward-actions button,
 .bulk-sell-actions button,
 .deck-edit-actions button,
 .hero-level-confirm,
 .hero-star-confirm,
 .equipment-upgrade-confirm,
 .dungeon-screen-actions button
):disabled{border-color:#4c5051!important;background:#5d6263!important;color:#aeb1af!important;opacity:.65;box-shadow:inset 0 2px 0 #ffffff24!important}
:is(
 .mobile-panel[data-panel="summon"] .summon-actions button,
 .event-feature button,
 .equip-confirm,
 .equip-unequip,
 .idle-reward-actions button,
 .bulk-sell-actions button,
 .deck-edit-actions button,
 .hero-level-confirm,
 .hero-star-confirm,
 .equipment-upgrade-confirm,
 .dungeon-screen-actions button
):disabled *{color:#aeb1af!important}
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action:not(:disabled){border-color:#765019!important;background:#e2b230!important;color:#29425d!important}
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action:not(:disabled)>span{color:#624833!important;font-size:14px;font-weight:1000;-webkit-text-stroke:.3px #624833}
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action:not(:disabled)>.dungeon-entry-count{color:#fff!important;font-size:12px;font-weight:1000;-webkit-text-stroke:.25px #fff}
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action.is-running:not(:disabled){background:#449b55!important;border-color:#245b32!important}
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action.is-running:not(:disabled)>span{color:#fff!important;-webkit-text-stroke:.3px #fff}
@media(max-width:480px){

}

.dungeon-stop-modal[hidden]{display:none}
.dungeon-stop-modal{position:fixed;inset:0;z-index:5000;display:grid;place-items:center;padding:18px;background:#0a0d0fca}
.dungeon-stop-modal>section{width:min(360px,100%);padding:22px 16px 16px;border:3px solid #8e7445;border-radius:14px;background:#202528;color:#eee1c2;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327;text-align:center}
.dungeon-stop-modal:not([hidden]){animation:popupBackdropIn 160ms ease-out both}
.dungeon-stop-modal:not([hidden])>[role="dialog"]{transform-origin:center;animation:popupDialogIn 200ms cubic-bezier(.2,.75,.25,1) both}
.dungeon-stop-modal h2{margin:0;color:#fff2cf;font-size:18px;font-weight:900}
.dungeon-stop-modal p{margin:14px 0 24px;color:#bdb29d;font-size:12px;line-height:1.6;font-weight:700}
.dungeon-stop-modal section>div{display:flex;gap:10px}
.dungeon-stop-modal button{display:flex;align-items:center;justify-content:center;flex:1;height:44px;padding:0 12px;border:2px solid #68756f;border-radius:9px;background:#3a4144;color:#f2eee2;font:900 12px/1 "Malgun Gothic",sans-serif;text-shadow:none;box-shadow:inset 0 2px #ffffff80,0 2px 0 #00000025;cursor:pointer}
.dungeon-stop-modal [data-stop-confirm]{background:#c58d31;border-color:#765019;color:#fff7dc}
.dungeon-stop-modal button{font-size:14px}
.dungeon-stop-modal [data-stop-cancel]{box-shadow:inset 0 2px #ffffff30,0 2px 0 #00000025}
.dungeon-screen #heroCards[inert] .card{opacity:.48;cursor:not-allowed}
.dungeon-screen #heroCards[inert] .card .portrait{filter:grayscale(.55) brightness(.78)}
.dungeon-briefing{justify-content:flex-start;padding:16px}
.dungeon-briefing-rewards{margin-top:auto;padding-top:12px;flex-direction:column;align-items:flex-start;gap:8px}
.dungeon-briefing-rewards ul{display:grid;width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:5px;border-radius:8px;background:#17232d88}
.dungeon-briefing-rewards li{min-width:0;gap:7px;padding:5px;min-height:50px;border:0;background:transparent;box-shadow:none}
.dungeon-briefing-rewards .dungeon-reward-gold{grid-column:1/-1}
.dungeon-briefing-rewards li>span{flex:0 0 38px;width:38px;height:38px;background:transparent}
.dungeon-briefing-rewards img{width:34px;height:34px}
.dungeon-reward-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:4px}
.dungeon-reward-copy>strong{white-space:normal;word-break:keep-all;line-height:1.3}
.dungeon-reward-copy>small{color:#f1c85f;font-size:12px;font-weight:900;line-height:1}
.dungeon-briefing-copy h2{display:flex;align-items:baseline;gap:9px}
.dungeon-level-label{font-style:normal;font-size:16px;font-weight:900;color:#e4cc92;white-space:nowrap}
.dungeon-level-stepper{width:150px;height:36px;margin-top:10px;grid-template-columns:38px 1fr 38px;transform:scale(.729);transform-origin:left top}
.dungeon-briefing-copy>small{padding-left:3px}
.dungeon-boss-illustration{position:absolute;z-index:1;right:0;bottom:0;height:100%;width:auto;max-width:none;object-fit:contain;object-position:center bottom;pointer-events:none;animation:dungeonIllustrationEnter .3s cubic-bezier(.16,1,.3,1) both,dungeonIllustrationFloat 3.6s ease-in-out infinite}
@keyframes dungeonIllustrationFloat{0%,100%{translate:0 0}50%{translate:0 8px}}
@keyframes dungeonIllustrationEnter{from{opacity:0;transform:translateX(100px)}to{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.dungeon-boss-illustration{animation:none}}
.dungeon-briefing{background:linear-gradient(90deg,#101c26e8 0%,#172632c7 54%,#17263242 100%)}
.dungeon-briefing-copy,.dungeon-briefing-rewards{position:relative;z-index:2}
.dungeon-level-stepper b{font-size:14px}
.dungeon-level-stepper button{width:28px;height:28px;font-size:0;background-position:center;background-repeat:no-repeat;background-size:14px}
.dungeon-level-stepper [data-dungeon-level="-1"]{background-image:url("assets/ui/material-minus.png")}
.dungeon-level-stepper [data-dungeon-level="1"]{background-image:url("assets/ui/material-plus.png")}
.dungeon-level-stepper button:disabled{opacity:.35;cursor:default}
.dungeon-reward-heading{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:7px}
.dungeon-reward-heading>b{padding-left:3px;color:#fff0c4;font-size:11px;font-weight:1000}
.dungeon-reward-level-control{position:relative;flex:none;width:109.35px;height:26.244px}
.dungeon-reward-level-control .dungeon-level-stepper{position:absolute;top:0;left:0;margin:0}
.dungeon-briefing.dungeon-briefing-out>*{visibility:hidden!important}
.dungeon-briefing.dungeon-briefing-out{animation:dungeonBriefingFadeOut 450ms ease-in-out forwards;pointer-events:none}
@keyframes dungeonBriefingFadeOut{from{opacity:1}to{opacity:0}}
.dungeon-screen .enemy.dungeon-boss-enter{animation:dungeonBossEnter .5s cubic-bezier(.16,1,.3,1) both}
@keyframes dungeonBossEnter{from{opacity:0;translate:60px 0}to{opacity:1;translate:0 0}}
.dungeon-start-banner{position:absolute;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none;animation:dungeonStartPop 1.15s both}
.dungeon-start-banner img{position:relative;top:-32px;z-index:1;display:block;width:43.4%;max-width:224px;height:auto;filter:drop-shadow(0 5px 4px #0005);animation:dungeonStartShine .3s .2s both}
.dungeon-start-sparks{position:absolute;inset:-32px 0 32px;pointer-events:none}
.dungeon-start-sparks i{position:absolute;left:50%;top:50%;width:var(--spark-size);height:var(--spark-size);opacity:0;background:#fff3b0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:dungeonStartSpark var(--spark-duration,.5s) var(--spark-delay) ease-out both}
@keyframes dungeonStartShine{0%,100%{filter:brightness(1) drop-shadow(0 5px 4px #0005)}30%{filter:brightness(1.55) drop-shadow(0 0 14px #ffe28a) drop-shadow(0 0 25px #ffbf4777)}}
@keyframes dungeonStartSpark{0%{opacity:0;transform:translate(-50%,-50%) scale(.25)}18%{opacity:1}55%{opacity:1;transform:translate(calc(-50% + var(--spark-x)*.85),calc(-50% + var(--spark-y)*.85)) scale(1.2) rotate(15deg)}100%{opacity:0;transform:translate(calc(-50% + var(--spark-x)),calc(-50% + var(--spark-y))) scale(.5) rotate(var(--spark-turn,40deg))}}
@media(prefers-reduced-motion:reduce){.dungeon-start-sparks{display:none}.dungeon-start-banner img{animation:none}}
@keyframes dungeonStartPop{0%{opacity:0;transform:scale(.45)}18%{opacity:1;transform:scale(1.12);animation-timing-function:ease-out}30%{transform:scale(.96)}42%,72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
@media(prefers-reduced-motion:reduce){.dungeon-start-banner{animation:none}}
@media(prefers-reduced-motion:reduce){.dungeon-screen .enemy.dungeon-boss-enter{animation:none}}
@media(prefers-reduced-motion:reduce){.dungeon-briefing.dungeon-briefing-out{animation-duration:1ms}}
.dungeon-failure-overlay{position:absolute;inset:0;z-index:2000;overflow:hidden;display:grid;place-items:center;background:#0b0c10c9;animation:popupBackdropIn .4s ease-out both;transition:opacity .35s ease}
.dungeon-failure-overlay.leaving{opacity:0}
.dungeon-failure-overlay.retry-fade{animation:dungeonBriefingFadeOut 450ms ease-in-out forwards!important;pointer-events:none}
.dungeon-failure-overlay.retry-fade>*{visibility:hidden!important}
.dungeon-failure-overlay.settled,.dungeon-failure-overlay.settled>img,.dungeon-failure-overlay.settled .dungeon-failure-red,.dungeon-failure-overlay.settled .dungeon-failure-copy{animation:none;opacity:1;transform:none}
.dungeon-failure-overlay>img{position:relative;top:-32px;z-index:2;width:43.4%;max-width:224px;height:auto;filter:drop-shadow(0 8px 12px #0008);animation:dungeonFailedDrop .55s .08s both}
.dungeon-failure-red{display:none}
.dungeon-screen>#battlefield .dungeon-failed-unit,.dungeon-screen>#battlefield .dungeon-failed-unit *{animation:none!important;transition:none!important;pointer-events:none!important}
.dungeon-failure-copy{position:absolute;z-index:2;left:16px;right:16px;bottom:12%;text-align:center;animation:dungeonFailedCopy .4s .85s both;word-break:keep-all}
.dungeon-failure-copy strong{color:#eeddd4;font-size:17px;font-weight:900}
.dungeon-failure-copy p{margin-top:4px;color:#b6aaa5;font-size:12px;font-weight:700}
@keyframes dungeonFailedDrop{0%{opacity:0;transform:translateY(-190px) scale(.98);animation-timing-function:cubic-bezier(.65,0,1,.45)}12%{opacity:1;transform:translateY(-185px);animation-timing-function:cubic-bezier(.65,0,1,.45)}52%{opacity:1;transform:translateY(12px) scale(1.1,.86);animation-timing-function:cubic-bezier(0,.7,.3,1)}68%{transform:translateY(-9px) scale(.98,1.03);animation-timing-function:ease-in}82%{transform:translateY(3px) scale(1.02,.98);animation-timing-function:ease-out}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes dungeonFailedRed{from{opacity:0;transform:translateY(-45%)}to{opacity:1;transform:translateY(0)}}
@keyframes dungeonFailedCopy{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.dungeon-failure-overlay,.dungeon-failure-overlay>img,.dungeon-failure-red,.dungeon-failure-copy{animation-duration:1ms;animation-delay:0s}}

#battlefield .castle.heart-hit{animation:heartBoxHit .38s ease-out}
@keyframes heartBoxHit{0%{translate:0 0;rotate:0deg}18%{translate:-4px 0;rotate:-3deg;background-color:#cb4242;box-shadow:0 0 13px #ff555599,inset 0 0 8px #ffaaaacc}36%{translate:4px 0;rotate:3deg;background-color:#b63838}54%{translate:-3px 0;rotate:-2deg}72%{translate:2px 0;rotate:1deg}100%{translate:0 0;rotate:0deg}}
.dungeon-screen>#battlefield .enemy.dungeon-guarded:not(.attacking) .enemy-sprite{animation:dungeonGuardedBreath 1.8s ease-in-out infinite!important;transform-origin:50% 100%}
@keyframes dungeonGuardedBreath{0%,100%{transform:translateX(-50%) scale(1) rotate(-.35deg)}50%{transform:translateX(-50%) scale(1.016,.974) rotate(.35deg)}}
@media(prefers-reduced-motion:reduce){.dungeon-screen>#battlefield .enemy.dungeon-guarded:not(.attacking) .enemy-sprite{animation:none!important}}
@media(prefers-reduced-motion:reduce){#battlefield .castle.heart-hit{animation-name:heartBoxFlash}@keyframes heartBoxFlash{50%{background-color:#cb4242;box-shadow:0 0 10px #ff555580}}}
#battlefield .elite-battle-hud>small{left:50%;right:auto;top:-15px;transform:translateX(-50%);text-align:center;font-size:11px;color:#fff0cc}
#eliteBattleHud .dungeon-boss-protection{position:absolute;top:calc(100% + 3px);right:0;color:#ffd45c;font:900 10px/1 "Malgun Gothic",sans-serif;text-shadow:0 1px 2px #000}
#eliteBattleHud .dungeon-boss-protection[hidden]{display:none}
#battlefield .elite-battle-hud>small,
.dungeon-screen>#battlefield[data-dungeon] .elite-battle-hud>small{left:auto;right:0;top:calc(100% + 3px);transform:none;text-align:right;font:900 10px/1 "Malgun Gothic",system-ui,sans-serif;letter-spacing:0;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
#eliteBattleHud .dungeon-boss-protection{left:0;right:auto;top:calc(100% + 3px);text-align:left;font:900 10px/1 "Malgun Gothic",system-ui,sans-serif;letter-spacing:0;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:-1px -1px 0 #111,1px -1px 0 #111,-1px 1px 0 #111,1px 1px 0 #111}
#battlefield .elite-battle-hud.failed-hud{animation:none}
#battlefield .adventure-failed-unit,#battlefield .adventure-failed-unit *{animation:none!important;transition:none!important;pointer-events:none!important}

.stage-start-cue{position:absolute;inset:0;z-index:1000;display:grid;place-items:center;pointer-events:none;animation:stageStartCue .5s both}.stage-start-cue img{width:34%;max-width:175px;height:auto;position:relative;top:-32px;filter:drop-shadow(0 3px 3px #0005)}.stage-start-cue.special{animation-duration:.8s}.stage-start-cue.special img{width:43.4%;max-width:224px}@keyframes stageStartCue{0%{opacity:0;scale:.65}25%{opacity:1;scale:1.06}45%,70%{opacity:1;scale:1}100%{opacity:0;scale:1.04}}@media(prefers-reduced-motion:reduce){.stage-start-cue{animation-name:stageStartFade}@keyframes stageStartFade{0%,100%{opacity:0}25%,70%{opacity:1}}}

.stage-start-cue{inset:auto 0 auto 0;transform:translateY(-50%)}.stage-start-cue img{top:0}

.dungeon-selection-card[data-dungeon-choice="exp"],.dungeon-selection-card[data-selection-dungeon="exp"]{background-image:url("assets/ui/dungeon-exp-slot.png?v=326")}
.dungeon-selection-card[data-dungeon-choice="exp"]:after,.dungeon-selection-card[data-selection-dungeon="exp"]:after{content:none}

.dungeon-selection-card[data-dungeon-choice="stone"],.dungeon-selection-card[data-selection-dungeon="stone"]{background-image:url("assets/ui/dungeon-stone-slot.png?v=326")}
.dungeon-selection-card[data-dungeon-choice="stone"]:after,.dungeon-selection-card[data-selection-dungeon="stone"]:after{content:none}

.dungeon-selection-card[data-dungeon-choice="gold"],.dungeon-selection-card[data-selection-dungeon="gold"]{background-image:url("assets/ui/dungeon-gold-slot.png?v=326")}
.dungeon-selection-card[data-dungeon-choice="gold"]:after,.dungeon-selection-card[data-selection-dungeon="gold"]:after{content:none}

.dungeon-inline-slots .dungeon-selection-card.active:focus-visible{outline-color:#E8BD62}

/* Press feedback on adventure and dungeon controls. */
.battle-shortcuts button,.dungeon-selection-card,.dungeon-start-action{scale:1;transform-origin:center;transition:scale .15s ease-out}
@media(prefers-reduced-motion:reduce){.battle-shortcuts button,.dungeon-selection-card,.dungeon-start-action{transition:none}}

/* Unified press feedback; individual scale preserves positioning transforms. */
button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],.equipped-slots [data-equipment-slot]{scale:1;transition:scale .15s ease-out!important;transform-origin:center}
button:not(:disabled):not([aria-disabled="true"]):not([inert] *):active,[role="button"]:not([aria-disabled="true"]):not([inert] *):active,input[type="button"]:not(:disabled):active,input[type="submit"]:not(:disabled):active,input[type="reset"]:not(:disabled):active,.equipped-slots [data-equipment-slot]:not([aria-disabled="true"]):active{scale:.97!important;transition-duration:.08s!important}
.battle-shortcuts button:not(:disabled):active,.dungeon-selection-card:not(:disabled):active,.card:not(:disabled):active,.deck-hero:not(:disabled):active,.equipped-slots [data-equipment-slot]:active{scale:.98!important}
button:disabled,[aria-disabled="true"],[inert] button{scale:1!important}
@media(prefers-reduced-motion:reduce){button,[role="button"],input[type="button"],input[type="submit"],input[type="reset"],.equipped-slots [data-equipment-slot]{transition:none!important}}

button:is(.card,.deck-hero,.dungeon-selection-card):not(:disabled):not([aria-disabled="true"]):not([inert] *):active,.battle-shortcuts button:not(:disabled):not([aria-disabled="true"]):not([inert] *):active{scale:.98!important}

.event-card-grid .event-card{border:0!important;box-shadow:none!important;outline:none}
.event-card-grid .event-card.selected{box-shadow:inset 0 0 0 2px #E8BD62!important}
.event-card-grid .event-card:focus-visible{outline:2px solid #B99555;outline-offset:-2px}
.event-card-grid .event-card.selected:focus-visible{outline-color:#E8BD62}

/* Keep battle effects within the battlefield, below modal dialogs. */
#battlefield{isolation:isolate}
#autoDeckButton{box-shadow:inset 0 1px 0 #ffffff30,0 2px 0 #00000025!important}

.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action:not(:disabled):not(.is-running){background:linear-gradient(180deg,#ffdf73,#d58f1c)!important}

.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-start-action:not(:disabled):not(.is-running)>.dungeon-entry-count{background:#856348}

/* Shared primary palette based on dungeon start, with explicit disabled colors. */
:root :is(#heroLevelConfirm,#heroStarConfirm,.mobile-panel[data-panel="summon"] .summon-actions button,.event-feature button,.event-reward-modal button,.equip-confirm,.idle-reward-actions #claimIdleReward,.deck-edit-actions #applyDeckButton,.hero-level-confirm,.hero-star-confirm,.equipment-upgrade-confirm,.dungeon-start-action):not(:disabled):not([aria-disabled="true"]):not(.is-running){background:linear-gradient(180deg,#ffdf73,#d58f1c)!important;border-color:#765019!important;color:#624833!important;filter:none!important;opacity:1}
:root :is(#heroLevelConfirm,#heroStarConfirm,.mobile-panel[data-panel="summon"] .summon-actions button,.event-feature button,.event-reward-modal button,.equip-confirm,.idle-reward-actions #claimIdleReward,.deck-edit-actions #applyDeckButton,.hero-level-confirm,.hero-star-confirm,.equipment-upgrade-confirm,.dungeon-start-action):not(:disabled):not([aria-disabled="true"]):not(.is-running) :is(span,b,strong,small):not(.dungeon-entry-count){color:#624833!important;text-shadow:none!important;-webkit-text-stroke:0}
:root .dungeon-start-action:not(:disabled):not(.is-running)>.dungeon-entry-count{background:#856348!important;color:#fff!important;-webkit-text-stroke:.25px #fff}
:root :is(#heroLevelConfirm,#heroStarConfirm,.mobile-panel[data-panel="summon"] .summon-actions button,.event-feature button,.event-reward-modal button,.equip-confirm,.idle-reward-actions #claimIdleReward,.deck-edit-actions #applyDeckButton,.hero-level-confirm,.hero-star-confirm,.equipment-upgrade-confirm,.dungeon-start-action,.equip-unequip,.idle-reward-actions button,.bulk-sell-actions button,.deck-edit-actions button,.dungeon-screen-actions button,.hero-info .hero-upgrade-actions button):is(:disabled,[aria-disabled="true"]){background:#686B6D!important;background-image:none!important;border-color:#484C4F!important;color:#E1E2E3!important;opacity:1!important;filter:none!important;text-shadow:none!important;-webkit-text-stroke:0!important;box-shadow:inset 0 1px 0 #ffffff24,0 2px 0 #00000025!important;cursor:default}
:root :is(#heroLevelConfirm,#heroStarConfirm,.mobile-panel[data-panel="summon"] .summon-actions button,.event-feature button,.event-reward-modal button,.equip-confirm,.idle-reward-actions #claimIdleReward,.deck-edit-actions #applyDeckButton,.hero-level-confirm,.hero-star-confirm,.equipment-upgrade-confirm,.dungeon-start-action,.equip-unequip,.idle-reward-actions button,.bulk-sell-actions button,.deck-edit-actions button,.dungeon-screen-actions button,.hero-info .hero-upgrade-actions button):is(:disabled,[aria-disabled="true"]) :is(span,b,strong,small){color:#E1E2E3!important;text-shadow:none!important;-webkit-text-stroke:0!important}
:root :is(#heroLevelConfirm,#heroStarConfirm,.mobile-panel[data-panel="summon"] .summon-actions button,.event-feature button,.event-reward-modal button,.equip-confirm,.idle-reward-actions #claimIdleReward,.deck-edit-actions #applyDeckButton,.hero-level-confirm,.hero-star-confirm,.equipment-upgrade-confirm,.dungeon-start-action,.equip-unequip,.idle-reward-actions button,.bulk-sell-actions button,.deck-edit-actions button,.dungeon-screen-actions button,.hero-info .hero-upgrade-actions button):is(:disabled,[aria-disabled="true"]) img{filter:grayscale(1);opacity:.7}
:root .dungeon-start-action:disabled>.dungeon-entry-count{background:#505456!important;color:#E1E2E3!important}

:root #equipUnequipButton:not(:disabled){box-shadow:inset 0 1px 0 #ffffff30,0 2px 0 #00000025!important}
:root #equipConfirmButton{font-size:14px!important;font-weight:1000!important}
:root #equipConfirmButton:not(:disabled){color:#624833!important;-webkit-text-stroke:.3px #624833!important}

.options-shape{display:grid;place-items:center;width:46px;height:46px;border:2px solid #8d7447;border-radius:12px;background:#343b3d;color:#f2d17c;font:normal 32px/1 sans-serif}.audio-options-modal{z-index:4800}.audio-options-modal .deck-edit-dialog{width:min(360px,100%);padding:20px}.audio-option-row{margin-top:20px;padding:14px;border:1px solid #514a3f;border-radius:9px;background:#292f32}.audio-option-heading{display:flex;justify-content:space-between;align-items:center;font-size:15px}.audio-option-heading button{width:62px;height:30px;border:1px solid #777;border-radius:8px;background:#686b6d;color:#e1e2e3;font-weight:900;box-shadow:inset 0 1px #ffffff30}.audio-option-heading button[aria-pressed="true"]{background:linear-gradient(#ffdf73,#d58f1c);border-color:#765019;color:#624833}.audio-volume{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12px;color:#d3cbb7}.audio-volume input{width:100%;min-width:0;accent-color:#e8bd62;cursor:pointer}.audio-volume output{min-width:45px;text-align:right;color:#fff2cf;font-weight:900}.audio-volume label{white-space:nowrap}

/* Expanded menu concept: decorative icons only, no navigation bindings. */
.menu-concept-legacy{display:none!important}
.menu-concept-heading{position:relative;margin-top:10px!important}
.menu-concept-hamburger{margin-left:auto;display:flex;flex-direction:column;gap:3px;padding:4px}
.menu-concept-hamburger span{display:block;width:17px;height:2px;border-radius:2px;background:#765537}
.menu-concept-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 4px;padding:10px 2px 8px}
.menu-concept-item{min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;color:#624833;font-size:11px;font-weight:800;line-height:1.2}
.menu-concept-item img{width:52px;height:52px;max-width:100%;object-fit:contain;display:block}
.dungeon-screen .menu-concept-grid,.dungeon-screen .menu-concept-heading{display:none!important}

.menu-concept-icon-box{width:62px;height:62px;max-width:100%;aspect-ratio:1;display:grid;place-items:center;border:1px solid #c4ae83;border-radius:12px;background:#f5e7c8;box-shadow:inset 0 1px 0 #fff8e7;box-sizing:border-box}
.menu-concept-icon-box img{width:50px;height:50px;max-width:88%;object-fit:contain}
.menu-concept-item{gap:5px}

/* One shared menu surface, with development controls in the heading. */
.menu-concept-heading{display:flex;align-items:center;min-height:30px;gap:5px}
.menu-concept-heading .battle-bottom-tools{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:4px;padding:0;background:none}
.menu-concept-heading .battle-bottom-tools button{width:23px;height:23px;min-width:0;padding:0;border:1px solid #b5a17e;border-radius:5px;background:#ebdcbb;color:#624833;font:700 9px/1 inherit;cursor:pointer}
.menu-concept-heading .battle-bottom-tools #musicButton{font-size:0}
.menu-concept-heading .battle-bottom-tools #musicButton:after{content:'♫';font-size:13px}
.menu-concept-grid{background:#78644716;border:0;border-radius:12px;margin-top:6px;padding:12px 8px;gap:10px 4px}
.menu-concept-icon-box{border:0;background:none;box-shadow:none;border-radius:0}

.menu-concept-grid{grid-template-columns:repeat(5,minmax(0,1fr));background:#d5bd91;gap:12px 4px;padding:14px 8px;border:0}
.menu-concept-icon-box{width:54px;height:54px}
.menu-concept-icon-box img{width:48px;height:48px;max-width:94%}
.menu-concept-item{color:#533e2c}

.menu-concept-grid{background:#e6d29d}
.menu-concept-icon-box{width:60px;height:60px}
.menu-concept-icon-box img{width:56px;height:56px;max-width:100%}

.menu-concept-item{gap:0}

.menu-concept-item{position:relative;padding-bottom:0}
.menu-concept-item>span{position:absolute;left:0;right:0;bottom:1px;z-index:1;text-align:center;color:#fff;font-size:11px;font-weight:900;line-height:1.3;-webkit-text-stroke:2px #493626;paint-order:stroke fill;text-shadow:0 1px 1px #493626;pointer-events:none}

.menu-concept-item>span{bottom:-12px;font-size:13px;-webkit-text-stroke:3px #493626}

/* Reserve label space within each row and breathing room above navigation. */
.menu-concept-grid{flex-shrink:0;row-gap:18px;padding:16px 8px 20px;margin-bottom:18px;align-content:start}
.menu-concept-item{padding-bottom:12px}
.menu-concept-item>span{bottom:0}

.menu-concept-item>span{left:50%;right:auto;bottom:12px;width:60px;max-width:100%;transform:translateX(-50%);text-align:right}

/* Keep the shared menu clear of the bottom navigation. */
.mobile-panel[data-panel="battle"]:has(.menu-concept-grid){height:auto;min-height:100%;padding-bottom:24px}
.menu-concept-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:60px;column-gap:8px;row-gap:18px;padding:16px 10px 20px;margin-bottom:0;align-items:start;align-content:start}
.menu-concept-item{height:60px;padding-bottom:0}
.menu-concept-item>span{bottom:0}

/* Only the menu grid scrolls; the battle panel and navigation stay fixed. */
.controls:has(>.mobile-panel[data-panel="battle"].active){overflow:hidden}
.mobile-panel[data-panel="battle"].active:has(.menu-concept-grid){height:100%;min-height:0;overflow:hidden;padding-bottom:24px}
.mobile-panel[data-panel="battle"]>.battle-menu-head,.mobile-panel[data-panel="battle"]>.hero-cards,.mobile-panel[data-panel="battle"]>.menu-concept-heading{flex-shrink:0}
.mobile-panel[data-panel="battle"]>.menu-concept-grid{flex:1 1 0;min-height:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.menu-concept-grid::-webkit-scrollbar{display:none;width:0;height:0}

/* Floating development tools, independent of the icon grid. */
.menu-concept-surface{--tools-right:8px;--tools-bottom:8px;position:relative;flex:1 1 0;min-height:0;margin-top:6px;background:#e6d29d;border-radius:12px;overflow:hidden}
.menu-concept-surface>.menu-concept-grid{height:100%;min-height:0;margin:0;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;padding-bottom:44px}
.menu-concept-surface>.battle-bottom-tools{position:absolute;right:var(--tools-right);bottom:var(--tools-bottom);z-index:3;display:flex;gap:4px;padding:3px;border-radius:6px;background:#e6d29de8;transform:none}
.menu-concept-surface>.battle-bottom-tools button{width:23px;height:23px;min-width:0;padding:0;border:1px solid #b5a17e;border-radius:5px;background:#ebdcbb;color:#624833;font-family:inherit;font-size:9px;font-weight:700;cursor:pointer}
.menu-concept-surface #musicButton{font-size:0}
.menu-concept-surface #musicButton:after{content:'♫';font-size:13px}
.dungeon-screen .menu-concept-surface{display:none!important}

/* Match the battle deployment heading and five-column roster. */
.mobile-panel[data-panel="equipment"] .hero-status{flex-basis:294px;height:294px;min-height:294px}
.hero-roster-heading{display:flex;align-items:center;flex:0 0 34px;min-height:34px;margin:9px 10px 0;gap:6px;color:#263f59;font-size:14px;font-weight:900}
.hero-roster-heading:before{content:'';width:26px;height:26px;flex-shrink:0;background:#385b7d;-webkit-mask:url('assets/ui/casual-helmet.svg') center/contain no-repeat;mask:url('assets/ui/casual-helmet.svg') center/contain no-repeat}
.mobile-panel[data-panel="equipment"] .equipment-heroes{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:82px;gap:6px;margin-top:6px;padding:2px 0 6px}
.mobile-panel[data-panel="equipment"] .equipment-heroes button{height:82px;min-height:82px}

.mobile-panel[data-panel="equipment"] .equipment-heroes button.owned,.mobile-panel[data-panel="equipment"] .equipment-heroes button.locked{height:82px;min-height:82px}

.hero-roster-heading:before{content:none}
.hero-roster-heading strong,.hero-roster-heading b,.hero-roster-heading span{font-size:14px;font-weight:900;color:#263f59}

.bottom-nav button[hidden]{display:none!important}
.bottom-nav [data-main-action="dungeon"] span{background-image:url('assets/ui/nav-dungeon-user.png')}
.bottom-nav [data-main-action="shop"] span{background-image:url('assets/ui/nav-shop-user.png')}
.menu-concept-item[role="button"]{cursor:pointer}

.game-shell.shop-mode .battlefield{display:none}.game-shell.shop-mode .controls{flex:1}

.battle-header-shortcuts{display:none!important}
.dungeon-header-exit{display:none!important}
.game-shell>header .dungeon-header-title{display:block;flex:1;min-width:0;margin:0}
.game-shell>header .dungeon-header-title small,.game-shell>header .dungeon-header-title strong{display:block;white-space:nowrap}
.game-shell>header .dungeon-header-title small{color:#96701f;font-size:8px;font-weight:900;letter-spacing:2px}
.game-shell>header .dungeon-header-title strong{margin-top:3px;color:#26313a;font-size:18px}


/* Dungeon occupies the same shell instead of a separate centered popup. */
main.game-shell{position:relative}


/* Shared main content corner radius, matching the battlefield. */
:root{--main-content-radius:13px}
#battlefield,#heroStatus,.mobile-panel[data-panel="equipment"] .hero-loadout,.summon-banner,.event-feature{border-radius:var(--main-content-radius)!important}
.dungeon-briefing{border-radius:var(--main-content-radius)}

/* Action rows reserve their own height; navigation paints above page content. */

.dungeon-screen>.dungeon-screen-actions{height:auto;min-height:72px;grid-auto-rows:46px;position:relative;z-index:1}
.dungeon-screen>.dungeon-deployment-panel{min-height:0;overflow-y:auto;scrollbar-width:none}
.dungeon-screen>.dungeon-deployment-panel::-webkit-scrollbar{display:none}
.game-shell>.bottom-nav{position:relative;z-index:30;isolation:isolate;background:#202c34}

/* Compact shared header. */
.game-shell>header{height:60px!important;min-height:60px;flex-basis:60px!important}

/* Shared currency scale and header geometry across battle and dungeon. */
main.game-shell>header{height:60px!important;min-height:60px!important;flex:0 0 60px!important;padding:6px 22px!important;align-items:center}
.game-shell>header .battle-header-wallet{scale:.9;transform-origin:right center}

/* Dungeon is content in the main shell. Header and navigation never move. */
main.game-shell:has(>.dungeon-screen:not([hidden]))>.controls{display:none}
.dungeon-screen{display:grid;flex:1 1 0;min-height:0;width:100%;grid-template-rows:294px minmax(0,1fr) auto;overflow:hidden;background:#f8e9b8;color:inherit}
.dungeon-screen[hidden]{display:none}

/* Inline page title: Korean first, English alongside. */
.game-shell>header .dungeon-header-title{display:flex;align-items:center;gap:7px}
.game-shell>header .dungeon-header-title strong{order:0;margin:0;line-height:1.2}
.game-shell>header .dungeon-header-title small{order:1;line-height:1.2;letter-spacing:1px}

.game-shell>header .dungeon-header-title small{font-size:20px;font-weight:800;line-height:1;letter-spacing:.5px;color:#ddd0ad}

/* Match section headings and keep menu-to-navigation spacing independent of header height. */
.mobile-panel[data-panel="battle"]>.menu-concept-heading{min-height:18px;height:18px;align-items:baseline;gap:6px;margin:8px 10px 0!important}
.controls:has(>.mobile-panel[data-panel="battle"].active){padding-bottom:12px}
.mobile-panel[data-panel="battle"].active:has(.menu-concept-grid){padding-bottom:0}
.mobile-panel[data-panel="battle"]>.menu-concept-surface{flex:1 1 0;min-height:0;margin-top:6px;margin-bottom:0}

/* Shared action spacing immediately above main navigation. */
:root{--main-action-bottom-gap:18px;--main-action-height:46px;--main-action-side-gap:12px}
.dungeon-screen>.dungeon-screen-actions{min-height:0;padding:12px var(--main-action-side-gap) var(--main-action-bottom-gap);grid-auto-rows:var(--main-action-height)}
.game-shell.summon-mode>.controls{padding-right:var(--main-action-side-gap);padding-left:var(--main-action-side-gap);padding-bottom:var(--main-action-bottom-gap)}
.mobile-panel[data-panel="summon"] .gacha-box{padding:0;margin:0;flex-shrink:0}
.mobile-panel[data-panel="summon"] .summon-actions{margin-bottom:0;gap:9px}
.mobile-panel[data-panel="summon"] .summon-actions button{height:var(--main-action-height);margin-bottom:0}

.dungeon-screen>.dungeon-deployment-panel{padding-bottom:12px}

.mobile-panel[data-panel="shop"]>.shop-test-tools{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:16px 0;padding:12px;background:#e6d29d;border-radius:10px;transform:none}
.shop-test-tools button{min-width:40px;height:32px;padding:0 8px;border:1px solid #b5a17e;border-radius:6px;background:#ebdcbb;color:#624833;font-family:inherit;font-size:11px;font-weight:700;cursor:pointer}
.menu-concept-surface>.menu-concept-grid{padding-bottom:20px}

/* Main-menu concept from supplied reference. */
main.game-shell:not(.summon-mode):not(.equipment-mode):not(:is(.event-mode,.quest-mode)):not(.bag-mode):not(.shop-mode):not(:has(>.dungeon-screen:not([hidden]))){background:var(--cream)}
main.game-shell:has(>.controls>.mobile-panel[data-panel="battle"].active):not(:has(>.dungeon-screen:not([hidden])))>header{background:var(--cream)}
.controls:has(>.mobile-panel[data-panel="battle"].active){background:var(--cream);padding-bottom:0}
.mobile-panel[data-panel="battle"]>.menu-concept-heading{display:none!important}
.main-event-banner-placeholder{flex:0 0 84px;margin:12px 2px 24px;border:1px solid #fff;border-radius:13px;background:#1b2028}
.mobile-panel[data-panel="battle"]>.menu-concept-surface{margin:0 3px;min-height:0;background:#f8e8cb;border-radius:20px 20px 0 0;box-shadow:0 -1px 7px #79643b33;overflow:visible;isolation:isolate}
.menu-concept-surface>.menu-concept-grid{background:transparent;border-radius:20px 20px 0 0;padding:16px 8px 20px}
.menu-concept-surface:before,.menu-concept-surface:after{content:'';position:absolute;bottom:0;width:126px;height:95px;background-position:bottom;background-repeat:no-repeat;background-size:contain;z-index:5;pointer-events:none}
.menu-concept-surface:before{left:0;background-image:url('assets/ui/main-leaves-l.png')}
.menu-concept-surface:after{right:0;background-image:url('assets/ui/main-leaves-r.png')}
.dungeon-screen .main-event-banner-placeholder{display:none}
.bottom-nav{background:#222c34!important;border-top-color:#10151a}
.bottom-nav button.active{background:#3a4752;box-shadow:inset 0 2px #f3d263;color:#f3d263}

main.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>.controls:has(>.mobile-panel[data-panel="battle"].active){padding-bottom:0;background:var(--cream)}

/* Leaves sit above the menu surface, outside its clipping/scroll containers. */
.menu-concept-surface:before,.menu-concept-surface:after{content:none}
.main-menu-leaves{position:absolute;left:0;right:0;bottom:80px;height:95px;z-index:25;pointer-events:none;display:none}
main.game-shell:has(>.controls>.mobile-panel[data-panel="battle"].active):not(:has(>.dungeon-screen:not([hidden])))>.main-menu-leaves:not(.dungeon-menu-leaves):not(.page-menu-leaves){display:block}
.main-menu-leaves img{position:absolute;bottom:0;width:126px;height:95px;object-fit:contain;object-position:bottom}
.main-menu-leaf-left{left:0}.main-menu-leaf-right{right:0}

.mobile-panel[data-panel="battle"]>.menu-concept-surface{background:#eee5cf}

.main-event-banner-placeholder.main-event-carousel{position:relative;flex:0 0 100px;padding:0 0 16px;margin:12px 2px 16px;border:0;background:transparent}
.main-event-carousel .summon-banner{height:84px;min-height:84px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:10px 30% 10px 34px;border:1px solid #fff;border-radius:13px;background-position:center;background-size:cover;text-align:left;box-shadow:none;cursor:pointer;overflow:hidden}
.main-event-carousel .summon-banner em{display:block;max-width:100%;max-height:22px;overflow:hidden;font-style:normal}
.main-event-carousel .summon-carousel-arrow{top:24px}

.main-event-carousel .summon-banner small{font-size:8px}
.main-event-carousel .summon-banner h2{font-size:19px}
.main-event-carousel .summon-banner em{font-size:10px;line-height:1.3;max-height:26px}

/* Reference menu: five items, then four centered beneath. */
.menu-concept-surface>.menu-concept-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-template-rows:repeat(2,80px);grid-auto-rows:80px;column-gap:0;row-gap:16px;align-content:space-evenly;padding:14px 12px 20px}
.menu-concept-grid>.menu-concept-item{grid-column:span 2;height:80px;padding:0;display:flex;align-items:center;justify-content:flex-start}
.menu-concept-grid>.menu-concept-item:nth-child(6){grid-column:2/span 2}
.menu-concept-grid .menu-concept-icon-box{width:60px;height:60px;flex:0 0 60px}
.menu-concept-grid .menu-concept-icon-box img{width:56px;height:56px}
.menu-concept-grid .menu-concept-item>span{position:static;transform:none;width:100%;max-width:none;text-align:center;color:#624833;font-size:12px;font-weight:800;line-height:18px;-webkit-text-stroke:0;text-shadow:none;margin-top:2px}

.menu-concept-grid .menu-concept-icon-box img{filter:drop-shadow(0 2px 2px #49362630)}

.menu-concept-surface>.menu-concept-grid{grid-template-columns:repeat(10,minmax(0,1fr));padding-left:28px;padding-right:28px;row-gap:10px;align-content:center}

.main-event-banner-placeholder.main-event-carousel{margin-top:19px;margin-bottom:9px}

/* Shared red dots for the visible menu icons. */
.menu-concept-item .menu-concept-icon-box{position:relative;overflow:visible}
.menu-concept-item.has-notice .menu-concept-icon-box:after{
 content:"";position:absolute;z-index:6;top:2px;right:0;
 box-sizing:border-box;width:12px;height:12px;border:2px solid #fff3d5;
 border-radius:50%;background:#e3413d;box-shadow:0 1px 3px #0008;pointer-events:none;
}

/* Replays naturally whenever the battle-only leaf layer becomes visible. */
.main-menu-leaves img{animation:mainMenuLeavesEnter .48s cubic-bezier(.16,1,.3,1) both}
.main-menu-leaf-left{--leaf-enter-x:-130px}
.main-menu-leaf-right{--leaf-enter-x:130px}
@keyframes mainMenuLeavesEnter{
 from{transform:translateX(var(--leaf-enter-x))}
 to{transform:translateX(0)}
}
@media(prefers-reduced-motion:reduce){.main-menu-leaves img{animation:none}}

main.game-shell:has(>.dungeon-screen:not([hidden]))>.dungeon-menu-leaves{display:block}

main.game-shell:has(>.controls>.mobile-panel[data-panel="equipment"].active):not(:has(>.dungeon-screen:not([hidden])))>.equipment-menu-leaves{display:block}

main.game-shell:has(>.controls>.mobile-panel[data-panel="summon"].active):not(:has(>.dungeon-screen:not([hidden])))>.summon-menu-leaves{display:block}

main.game-shell:has(>.controls>.mobile-panel[data-panel="shop"].active):not(:has(>.dungeon-screen:not([hidden])))>.shop-menu-leaves{display:block}

/* Match the dungeon action label size. */
.mobile-panel[data-panel="summon"] .summon-actions button{font-size:14px;font-weight:1000}
.mobile-panel[data-panel="summon"] .summon-actions button b{font-size:12px}

.resource-result .dungeon-dialog{display:flex;flex-direction:column;max-height:calc(100dvh - 32px)}
.resource-result .dungeon-content{display:flex;flex-direction:column;min-height:260px;overflow:auto}
.resource-result-title{text-align:center;font-size:16px;font-weight:900;margin:20px 0}
.resource-result-rewards{padding:16px;border-radius:12px;background:#151c20}
.resource-result-rewards h3{font-size:13px;color:#e7cc8e;text-align:center;margin:0 0 14px}
.resource-result-rewards>div{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}
.resource-result-item{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:86px}
.resource-result-item img{width:54px;height:54px;object-fit:contain;padding:5px;background:#fff0cc;border-radius:9px}
.resource-result-item strong{font-size:11px}
.resource-result-item b{font-size:20px;color:#ffdc79}
.resource-result-note{text-align:center;color:#b7b1a2;font-size:11px;margin:14px 0 20px}
.resource-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:auto;padding-top:10px}
.resource-result-actions button{height:46px;border:2px solid #765019;border-radius:9px;background:#4b5358;color:#fff2cf;font-size:14px;font-weight:900;cursor:pointer}
.resource-result-actions [data-result-retry]{background:linear-gradient(#ffdf73,#d58f1c);color:#624833}
.resource-result-actions [data-result-retry]:disabled{background:#686b6d;color:#c6c7c8;border-color:#484c4f;cursor:default}

.resource-result-actions [data-result-confirm]{border-color:#303a40}

/* Center reward names between the icon and quantity. */
.resource-result-item{display:grid;grid-template-rows:54px 28px 24px;justify-items:center;align-items:center;gap:0}
.resource-result-item strong{display:flex;align-items:center;justify-content:center;align-self:stretch;line-height:16px;text-align:center}
.resource-result-item b{line-height:24px}

.dungeon-screen>.dungeon-screen-actions:has(.dungeon-entry-wallet-row){grid-template-rows:34px;row-gap:10px}
.dungeon-entry-wallet-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;min-width:0}
.dungeon-entry-wallet-row>strong{font-size:13px;color:#624833}
.dungeon-entry-wallet{display:flex;align-items:center;width:94px;height:34px;border-radius:18px;background:#30425c;padding:3px;color:#fff}




.dungeon-refill-body{text-align:center;padding:22px 0 8px;font-size:13px;line-height:1.7}.dungeon-refill-body>strong{font-size:17px}.dungeon-refill-body b{color:#ffdc79}.dungeon-refill-body small{color:#b7b1a2;font-size:11px}.dungeon-refill-limit{padding:10px;background:#151c20;border-radius:9px}.resource-result-actions [data-refill-cancel]{border-color:#303a40}

.dungeon-entry-wallet-row{justify-content:center}







/* Reuse the reward level stepper, omitting only its minus column. */
.dungeon-screen .dungeon-screen-actions .dungeon-entry-wallet{
 display:grid;grid-template-columns:74px 38px;width:112px;height:36px;
 margin:0;padding:0;transform:none;zoom:.729;border-radius:999px;background:#111517;
}
.dungeon-entry-wallet b,.dungeon-entry-wallet b>span{font-size:14px;color:#fff0c9;line-height:1}
.dungeon-screen .dungeon-screen-actions .dungeon-entry-wallet [data-dungeon-refill]{
 width:28px!important;height:28px!important;min-height:28px!important;max-height:28px!important;
 padding:0!important;place-self:center;border:1px solid #8e7445!important;border-radius:50%!important;
 background:#333027 url("assets/ui/material-plus.png") center/14px 14px no-repeat!important;
 color:transparent;font-size:0;box-shadow:none;line-height:1;
}

/* Entry count matches the deployment currency capsule. */
.dungeon-screen .dungeon-screen-actions .dungeon-entry-wallet{
 display:flex;align-items:center;gap:5px;width:auto;min-width:86px;height:30px;
 padding:0 3px 0 11px;zoom:1;transform:none;border:0;border-radius:15px;
 background:#29425d;color:#fff;
}
.dungeon-entry-wallet b{flex:1;margin:0;font-size:13px;color:#ffd45c;white-space:nowrap}
.dungeon-entry-wallet b>span{font-size:12px;color:#fff}
.dungeon-screen .dungeon-screen-actions .dungeon-entry-wallet [data-dungeon-refill]{
 flex:0 0 24px;width:24px!important;height:24px!important;min-height:24px!important;max-height:24px!important;
 border:0!important;border-radius:50%!important;background:#dfe3e5!important;box-shadow:none;
 color:#39434a;font:900 20px/1 Arial,sans-serif;display:grid;place-items:center;
}
.dungeon-entry-wallet [data-dungeon-refill]:before,.dungeon-entry-wallet [data-dungeon-refill]:after{content:none}
.dungeon-screen .dungeon-screen-actions .dungeon-entry-wallet [data-dungeon-refill]{font-size:20px!important;line-height:1!important}

.dungeon-screen .dungeon-screen-actions .dungeon-entry-wallet [data-dungeon-refill]{background:#8fc966 url("assets/ui/material-plus.png") center/14px 14px no-repeat!important;color:transparent!important;font-size:0!important}

.dungeon-screen .dungeon-screen-actions .dungeon-entry-wallet [data-dungeon-refill]{background:#35734a url("assets/ui/material-plus.png") center/14px 14px no-repeat!important;border:0!important;outline:none;box-shadow:none!important;filter:none!important}

.dungeon-refill-modal .dungeon-dialog{padding:16px}
.dungeon-refill-modal .dungeon-refill-body{display:flex;flex-direction:column;align-items:center;padding:18px 0 0;line-height:1.5}
.dungeon-refill-body>strong{font-size:19px}
.dungeon-refill-body>p{margin:6px 0 0;font-size:13px}
.dungeon-refill-diamond{position:relative;flex-shrink:0;width:64px;height:64px;margin:14px 0 12px;border-radius:10px;background:#fff2cc}
.dungeon-refill-diamond img{display:block;width:100%;height:100%;padding:7px;object-fit:contain}
.dungeon-refill-body .dungeon-refill-diamond>b{position:absolute;right:4px;bottom:3px;color:#fff;font:900 12px/1 "Malgun Gothic",sans-serif;-webkit-text-stroke:2px #111;paint-order:stroke fill;text-shadow:0 1px 1px #111}
.dungeon-refill-body>.dungeon-refill-limit{margin:0;padding:0;background:none;border-radius:0;font-size:14px}
.dungeon-refill-modal .resource-result-actions{margin-top:14px;padding-top:0;gap:10px}

/* Keep the refill control visible while combat disables charging. */
.dungeon-screen:has(#battlefield) .dungeon-screen-actions .dungeon-entry-wallet [data-dungeon-refill]:disabled{display:grid!important;visibility:visible!important;opacity:1!important;background:#686b6d url("assets/ui/material-plus.png") center/14px 14px no-repeat!important;border:0!important;box-shadow:none!important;filter:none!important;cursor:default}

.dungeon-start-group{position:relative;height:46px;min-width:0}
.dungeon-start-group>[data-dungeon-start]{width:100%;height:46px!important;padding-right:105px!important}
.dungeon-screen .dungeon-screen-actions .dungeon-start-group>.dungeon-entry-wallet{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:3;margin:0}
.dungeon-modal>.dungeon-dialog{max-height:calc(100dvh - 28px);overflow-y:auto;scrollbar-width:none}
.dungeon-modal>.dungeon-dialog::-webkit-scrollbar{display:none}

.dungeon-start-group{display:flex;align-items:center;justify-content:center;gap:10px}
.dungeon-start-group>[data-dungeon-start]{position:absolute;inset:0;padding:0!important}
.dungeon-start-group>[data-dungeon-start]>span{visibility:hidden}
.dungeon-start-group:before{content:attr(data-action-label);position:relative;z-index:2;pointer-events:none;color:#624833;font-size:14px;font-weight:1000}
.dungeon-start-group:has(>[data-dungeon-start]:disabled):before{color:#e1e2e3}
.dungeon-start-group:has(>[data-dungeon-start].is-running):before{color:#fff}
.dungeon-screen .dungeon-screen-actions .dungeon-start-group>.dungeon-entry-wallet{position:relative;right:auto;top:auto;transform:none;flex:0 0 auto}

.dungeon-start-group:before{flex:0 0 84px;width:84px;text-align:center;line-height:18px}

.dungeon-refill-modal .dungeon-refill-body{padding-top:18px}.dungeon-refill-diamond{margin:4px 0 14px}.dungeon-refill-body>.dungeon-refill-description{margin:0 0 12px}.dungeon-refill-body .dungeon-refill-diamond>b{font-size:11px}

.dungeon-refill-modal .dungeon-refill-body{padding-top:30px;padding-bottom:10px}.dungeon-refill-modal .dungeon-refill-diamond{margin:4px 0 22px}.dungeon-refill-modal .dungeon-refill-body>.dungeon-refill-description{font-size:15px;line-height:1.65;margin:0 0 18px}.dungeon-refill-modal .dungeon-refill-body>.dungeon-refill-limit{font-size:15px;line-height:1.6}.dungeon-refill-modal .resource-result-actions{margin-top:20px}

/* Stop confirmation uses the same buttons as the refill dialog. */
.dungeon-stop-modal section>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.dungeon-stop-modal button{height:46px;border:2px solid #303a40;border-radius:9px;background:#4b5358;color:#fff2cf;font-size:14px;font-weight:900;box-shadow:none;text-shadow:none}
.dungeon-stop-modal [data-stop-cancel]{box-shadow:none}
.dungeon-stop-modal [data-stop-confirm]{border-color:#765019;background:linear-gradient(#ffdf73,#d58f1c);color:#624833}

.dungeon-screen .dungeon-screen-actions .dungeon-start-group>.dungeon-entry-wallet{pointer-events:none;min-width:58px;padding:0 10px;gap:0}

/* Shop layout study: replace the scene and product artwork when supplied. */
.game-shell.shop-mode>.controls{display:flex;flex:1 1 0;min-height:0;padding:0!important;overflow:hidden}
.game-shell.shop-mode .mobile-panel[data-panel="shop"].active{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;padding:0;overflow:hidden}
.shop-scene{position:relative;flex:0 0 218px;margin:0 12px;overflow:hidden;border-radius:13px 13px 0 0;background:radial-gradient(ellipse at 20% 30%,#bb8641,#65432e 60%,#342722);isolation:isolate}
.shop-scene:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 53px,#35251dbb 54px 61px);opacity:.5}
.shop-placeholder-art{position:absolute;left:8px;bottom:10px;width:190px;height:180px;object-fit:contain;filter:drop-shadow(0 5px 5px #1b100a80)}
.shop-scene-sign{position:absolute;right:16px;top:22px;width:48%;padding:17px 8px;display:flex;flex-direction:column;align-items:center;gap:9px;border:5px solid #93653c;border-radius:7px;background:#342923;color:#f7e5b9;text-align:center}
.shop-scene-sign small{font-size:8px;letter-spacing:2px;color:#d8b16d}.shop-scene-sign strong{font-size:17px}.shop-scene-sign span{font-size:10px;line-height:1.6}
.shop-scene-counter{position:absolute;left:0;right:0;bottom:0;height:30px;background:linear-gradient(#c59358,#956438);border-top:3px solid #e6b776}
.shop-category-tabs{position:relative;z-index:2;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;margin:-28px 20px 0;flex:0 0 38px}
.shop-category-tabs button{min-width:0;border:0;border-radius:11px 11px 0 0;background:#503f3b;color:#e8d9c3;font:900 13px "Malgun Gothic",sans-serif;cursor:pointer}
.shop-category-tabs button[aria-selected="true"]{background:#f9dc7a;color:#624833}
.shop-product-scroll{min-height:0;flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:14px 20px 28px;background:repeating-linear-gradient(0deg,#a77850 0px,#bd8a58 164px,#d4a774 167px,#69472e 170px,#cf9e68 175px,#ad7c50 180px)}
.shop-product-scroll::-webkit-scrollbar{display:none}
.shop-product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 12px}
.shop-product-card{min-width:0;height:170px;padding:9px 6px 7px;display:flex;flex-direction:column;align-items:stretch;border:1px solid #fff9df;border-radius:15px;background:linear-gradient(135deg,#fff9e8,#eae0c1);box-shadow:inset 0 0 0 2px #ffffff55,0 2px 4px #51391e30}
.shop-product-card h3{margin:0;text-align:center;font-size:14px;line-height:20px;color:#29425d}
.shop-product-art{flex:1;min-height:0;display:grid;place-items:center}.shop-product-art img{width:72px;height:72px;object-fit:contain;filter:drop-shadow(0 3px 5px #5489ae44)}
.shop-product-buy{height:34px;flex-shrink:0;min-width:0;border:1px solid #a87d26;border-radius:11px;background:linear-gradient(#ffe77d,#efb73d);box-shadow:inset 0 1px #fff4bd,0 2px 1px #62483340;color:#39332a;font:900 16px "Malgun Gothic",sans-serif;cursor:pointer}
.shop-tools-drawer{margin-top:24px;color:#fff0ca;font-size:12px}.shop-tools-drawer summary{cursor:pointer}.shop-tools-drawer .shop-test-tools{margin:8px 0}
.game-shell.shop-mode>.shop-menu-leaves{z-index:25;bottom:80px}
@media(max-height:740px){.shop-scene{flex-basis:174px}.shop-placeholder-art{height:145px;width:155px}.shop-scene-sign{top:12px;padding:12px 6px}}

/* Supplied shop scene: text sits inside the painted chalkboard. */
.game-shell.shop-mode .shop-scene{flex:0 0 auto;aspect-ratio:974/452;background:url("assets/ui/shop-scene-v408.png") center/100% 100% no-repeat}
.shop-scene:before,.shop-scene-counter,.shop-placeholder-art{display:none}
.shop-scene .shop-scene-sign{left:56%;right:auto;top:12%;width:32%;height:30%;padding:0;border:0;border-radius:0;background:transparent;justify-content:center;gap:6px;color:#fff0cc;text-shadow:0 2px 2px #21140d}
.shop-scene-sign small{font-size:7px;letter-spacing:1.8px;color:#d9bb79}
.shop-scene-sign strong{font-size:16px;line-height:1.2}
.shop-scene-sign span{font-size:9px;line-height:1.5;word-break:keep-all}

.shop-product-scroll{background:#b88350 url("assets/ui/shop-floor-v382.png") center top/100% auto repeat-y;background-attachment:local}

/* Tabs overlay the illustration edge without adding a strip above the floor. */
.shop-category-tabs{margin-top:-38px;flex-basis:38px}

.shop-category-tabs button{background:#49362b;color:#dbc5a3;border:1px solid #785638;border-bottom:0;box-shadow:inset 0 1px 0 #ffffff0c;text-shadow:0 1px 1px #21150e}
.shop-category-tabs button[aria-selected="true"]{background:linear-gradient(180deg,#fff0be,#e9c980);color:#533b25;border-color:#d5ac63;box-shadow:inset 0 1px 0 #fff8df;text-shadow:none}
.shop-category-tabs button:hover:not([aria-selected="true"]){background:#604532;color:#fff0ce}
.shop-category-tabs button:focus-visible{outline:2px solid #ffe3a0;outline-offset:-3px}

.shop-diamond-grid{gap:12px 8px}
.shop-diamond-card{height:190px;padding:9px 6px 7px}
.shop-diamond-card h3{font-size:14px;letter-spacing:-.5px;white-space:nowrap}
.shop-diamond-card .shop-product-art{position:relative;overflow:hidden}
.shop-diamond-card .shop-product-art>img{position:absolute;width:116%;height:auto;max-width:none;left:50%;bottom:-24px;transform:translateX(-50%);filter:drop-shadow(0 2px 3px #5489ae33)}
.shop-product-total{height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center;gap:3px;margin:0 3px 5px;border-radius:12px;background:#fff9e580;color:#30425c;font-size:12px;font-weight:900;white-space:nowrap}
.shop-product-total:empty{background:transparent}
.shop-product-total img{width:17px;height:17px;object-fit:contain}
.shop-diamond-card .shop-product-buy{font-size:17px;letter-spacing:-.6px}

.shop-diamond-card .shop-product-art>img{width:100%;bottom:-20px}

.shop-diamond-card .shop-product-art>img{width:90%;bottom:-18px}

.shop-diamond-card .shop-product-art>img{width:81%;bottom:-16px}

.shop-product-scroll{padding-top:24px}
.shop-product-card{box-shadow:inset 0 0 0 2px #ffffff55,0 4px 7px #4a2d2640,0 1px 2px #4a2d2630}

.shop-product-total{background:transparent;border-radius:0}
.shop-product-card{background:#fff9e5}

.shop-product-card{border:0;box-shadow:0 4px 7px #4a2d2640,0 1px 2px #4a2d2630}

.shop-product-card .shop-product-buy{margin-left:5px;margin-right:5px;margin-bottom:6px}

.shop-product-card{border-radius:12px}
.shop-product-card .shop-product-buy{border-radius:8px}

.shop-icon-sparkles{position:absolute;inset:0;pointer-events:none}
.shop-icon-sparkles i{position:absolute;opacity:0;background:#fff7cf;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:shopIconTwinkle 2.35s ease-in-out infinite}
@keyframes shopIconTwinkle{0%,12%,48%,100%{opacity:0;transform:scale(.45)}26%{opacity:.85;transform:scale(1)}36%{opacity:.35;transform:scale(.75)}}
@media(prefers-reduced-motion:reduce){.shop-icon-sparkles i{animation:none;opacity:.45}}

.shop-icon-sparkles i{clip-path:none;background:transparent;filter:drop-shadow(0 0 3px #d9695caa)}
.shop-icon-sparkles i:before{content:"";position:absolute;inset:0;background:#fff2db;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}

.shop-icon-sparkles i{filter:drop-shadow(0 0 4px #d9695ccc)}
@keyframes shopIconTwinkle{0%,12%,48%,100%{opacity:0;transform:scale(.45)}26%{opacity:.85;transform:scale(1)}36%{opacity:.35;transform:scale(.75)}}

.shop-icon-sparkles i:before{animation:shopStarTurn 2.35s linear infinite;animation-delay:inherit}
@keyframes shopStarTurn{0%,12%{transform:rotate(0deg)}12%{animation-timing-function:cubic-bezier(.12,.72,.2,1)}48%,100%{transform:rotate(135deg)}}
@media(prefers-reduced-motion:reduce){.shop-icon-sparkles i:before{animation:none}}

.shop-product-scroll{overflow-y:auto;touch-action:pan-y;padding-bottom:40px}
.shop-diamond-card{height:190px}
.shop-product-buy{transition:transform .12s ease-out,filter .12s ease-out}
.shop-product-buy:active{transform:scale(.96);filter:brightness(.94)}
.shop-purchase-body{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 0 6px;text-align:center}
.shop-purchase-body>img{width:150px;height:125px;object-fit:contain}
.shop-purchase-body>strong{font-size:18px;color:#fff0cc}
.shop-purchase-body>p{margin:0;font-size:14px}
.shop-purchase-body>b{font-size:20px;color:#ffdc79}
.shop-purchase-body>small{font-size:11px;color:#bdb29d;line-height:1.5;margin-top:4px}
.shop-purchase-modal [data-purchase-cancel]{border-color:#303a40}
@media(prefers-reduced-motion:reduce){.shop-product-buy{transition:none}}

.shop-purchase-body{gap:5px;padding-top:10px}
.shop-purchase-art{position:relative;width:200px;height:126px;overflow:hidden;margin-bottom:0}
.shop-purchase-art>img{position:absolute;width:200px;height:200px;max-width:none;left:0;bottom:-40px;object-fit:contain}
.shop-purchase-body>strong{line-height:24px}
.shop-purchase-body>p{line-height:21px}
.shop-purchase-body>b{margin-top:5px}
.shop-purchase-body>small{margin-top:8px}

.shop-purchase-body>b{display:flex;align-items:center;justify-content:center;min-width:136px;padding:7px 22px;margin-top:9px;border-radius:999px;background:#11191f;color:#ffdc79;line-height:24px}

.shop-purchase-art{width:180px;height:114px}
.shop-purchase-art>img{width:180px;height:180px;bottom:-36px}
.shop-purchase-body>b{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:164px;min-height:46px;padding:10px 28px;text-align:center;font-size:20px;line-height:26px;font-variant-numeric:tabular-nums}

.shop-purchase-art{width:162px;height:103px;margin-bottom:6px}
.shop-purchase-art>img{width:162px;height:162px;bottom:-32px}

.shop-purchase-art{width:146px;height:103px;margin-top:6px;margin-bottom:10px}
.shop-purchase-art>img{width:146px;height:146px;bottom:-29px}
.shop-purchase-body{padding-top:14px;padding-bottom:10px}
.shop-purchase-body>b{margin-top:12px}
.shop-purchase-modal .resource-result-actions{margin-top:10px}

/* Shop entrance: replay when its panel becomes visible. */
.game-shell.shop-mode .mobile-panel[data-panel="shop"].active .shop-scene-sign{animation:shopSceneEnter .46s cubic-bezier(.16,1,.3,1) both}
.game-shell.shop-mode .mobile-panel[data-panel="shop"].active .shop-category-tabs{animation:shopTabsEnter .38s .07s cubic-bezier(.16,1,.3,1) both}
.game-shell.shop-mode .mobile-panel[data-panel="shop"].active .shop-product-card{animation:shopCardEnter .42s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.1s + var(--shop-enter-order,0)*.035s)}
@keyframes shopSceneEnter{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes shopTabsEnter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes shopCardEnter{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
 .game-shell.shop-mode .mobile-panel[data-panel="shop"].active :is(.shop-scene,.shop-category-tabs,.shop-product-card){animation:none}
}

@media(prefers-reduced-motion:reduce){.game-shell.shop-mode .mobile-panel[data-panel="shop"].active .shop-scene-sign{animation:none}}

.shop-scene .shop-scene-sign{left:56%;top:12%;width:31.5%;height:31%;gap:6px}

.shop-category-tabs button:not([aria-selected="true"]){background:rgba(54,37,28,.72);color:#f0dfbc;border-color:rgba(157,117,72,.45);box-shadow:none;text-shadow:0 1px 2px #21150e}
.shop-category-tabs button:hover:not([aria-selected="true"]){background:rgba(76,51,34,.86);color:#fff0ce}

.shop-category-tabs button:not([aria-selected="true"]){align-self:end;height:calc(100% - 4px);background:#49362b;color:#dbc5a3;border-color:#785638;box-shadow:inset 0 1px 0 #ffffff0c;text-shadow:0 1px 1px #21150e}
.shop-category-tabs button:hover:not([aria-selected="true"]){background:#604532;color:#fff0ce}

.shop-icon-sparkles i:before{background:#fff}

/* Layered title: reference composition uses a 1080 x 1920 canvas. */
.title-screen{background:#fff;animation:none}
.title-composition{position:absolute;inset:0;overflow:hidden;container-type:size;pointer-events:none}
.title-composition>img,.title-touch{position:absolute;left:50%;transform:translateX(-50%)}
.title-composition .title-background{inset:0;width:100%;height:100%;object-fit:cover;transform:none;animation:titleFocusReveal 2.2s ease-out both,titleBackgroundSettle 3s cubic-bezier(.2,.65,.3,1) both}
.title-composition .title-logo{top:58.6%;width:90.74%;height:auto;animation:titleMarkReveal .85s 1.65s ease-out both}
.title-composition .title-subtitle{top:76.45%;width:76.85%;height:auto;animation:titleMarkReveal .7s 2.05s ease-out both}
.title-touch{top:91.55%;width:47%;animation:titleMarkReveal .7s 2.5s ease-out both}
.title-touch img{display:block;width:100%;height:auto;animation:titleTouchBreath 2.4s 3.2s ease-in-out infinite}
.title-white-reveal{position:absolute;inset:0;background:#fff;pointer-events:none;animation:titleWhiteReveal 1.9s ease-in-out both}
@keyframes titleWhiteReveal{0%,12%{opacity:1}100%{opacity:0}}
@keyframes titleFocusReveal{0%,12%{filter:blur(15px)}100%{filter:blur(0)}}
@keyframes titleMarkReveal{from{opacity:0}to{opacity:1}}
@keyframes titleTouchBreath{0%,100%{opacity:1}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.title-composition .title-background,.title-composition .title-logo,.title-composition .title-subtitle,.title-touch,.title-touch img{animation:none}.title-white-reveal{animation:none;opacity:0}}

@keyframes titleBackgroundSettle{from{transform:scale(1.10)}to{transform:scale(1)}}

#openingStory{position:fixed;z-index:6000;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 20px));height:min(920px,calc(100dvh - 20px));overflow:hidden;border:4px solid #111a20;border-radius:18px;background:#000;container-type:size;animation:openingFadeIn .8s ease both;transition:opacity .65s ease}
#openingStory[hidden]{display:none}
#openingStory.closing{animation:none;opacity:0;pointer-events:none}
#openingStory .opening-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:opacity .8s ease}
#openingStory .palace{opacity:0}
#openingStory .serina{opacity:1}
#openingStory[data-scene="palace"] .palace{opacity:1;animation:openingPalaceRise 8s linear both}
#openingStory[data-scene="palace"] .serina{opacity:0}
:root{--character-dialogue-veil-color:#16233d;--character-dialogue-veil-opacity:.9}
.character-dialogue-veil{position:absolute;inset:0;background:var(--character-dialogue-veil-color);opacity:var(--character-dialogue-veil-opacity);mask:url('assets/onboarding/veil.png') center/100% 100% no-repeat;-webkit-mask:url('assets/onboarding/veil.png') center/100% 100% no-repeat;pointer-events:none;transition:background .8s,opacity .8s}
#openingStory[data-scene="palace"] .opening-veil{background:#000;opacity:1}
.opening-copy{position:absolute;left:10%;right:7%;top:80%;color:#e3e3e5;font-size:4.4cqw;line-height:1.55;letter-spacing:.07em}
.opening-copy h2{position:relative;margin:0 0 2.5cqh;color:#ffc653;font-size:5.3cqw;line-height:1.1;font-weight:600;letter-spacing:.12em}
.opening-copy h2:before{content:'';position:absolute;left:-3cqw;top:0;height:100%;width:2px;background:#ffc653}
.opening-copy h2 small{font-size:2cqw;letter-spacing:.7em;margin-left:1cqw;color:#b88a2c}
.opening-lines p{margin:0}
#openingStory[data-scene="palace"] h2{display:none}
#openingStory[data-scene="palace"] .opening-lines p{margin-bottom:1.3cqh;animation:openingFadeIn .9s both}
#openingStory[data-scene="palace"] .opening-lines p:nth-child(1){animation-delay:.5s}
#openingStory[data-scene="palace"] .opening-lines p:nth-child(2){animation-delay:2.4s}
#openingStory[data-scene="palace"] .opening-lines p:nth-child(3){animation-delay:4.4s}
.opening-footer{position:absolute;left:10%;right:4%;bottom:2.7%;height:3%;display:flex;align-items:center;gap:2.3cqw}
.opening-footer>span{height:1px;background:#aaa9a3;opacity:.6;flex:1}
#openingStory .opening-next{background:none;border:0;box-shadow:none;padding:0;width:8cqw;height:8cqw;min-height:32px;min-width:32px;display:grid;place-items:center;border-radius:4px;cursor:pointer}
.opening-next img{width:100%;height:100%;object-fit:contain;opacity:.6}
.opening-choices{position:absolute;left:7.7%;right:6.8%;top:43.4%;display:grid;gap:1.5cqh}
#openingStory .opening-choices button{width:100%;aspect-ratio:940/130;background:url('assets/onboarding/choice.png') center/100% 100% no-repeat;border:0;box-shadow:none;border-radius:0;color:#e3e3e5;text-align:left;padding:0 12% 0 8.5%;font-size:4cqw;font-weight:400;letter-spacing:.04em;cursor:pointer;transition:filter .15s,transform .15s}
#openingStory .opening-choices button:hover{filter:brightness(1.12)}
#openingStory .opening-choices button:active{transform:scale(.98)}
#openingStory button:focus-visible{outline:2px solid #ffe0a0;outline-offset:2px}
#openingStory [hidden]{display:none!important}
@keyframes openingFadeIn{from{opacity:0}to{opacity:1}}
@keyframes openingPalaceRise{from{transform:translateY(0)}to{transform:translateY(-3%)}}
@media(max-width:480px){#openingStory{width:100vw;height:100dvh;border:0;border-radius:0}}
@media(prefers-reduced-motion:reduce){#openingStory,#openingStory .opening-art,#openingStory .opening-lines p{animation:none!important;transition:none}}

/* The title is a cinematic surface, not a bouncing UI button. */
#titleScreen,#titleScreen:active{scale:1!important;transition:opacity .8s ease!important}
#titleScreen.leaving{transform:translate(-50%,-50%)}
#openingStory{animation-duration:1.1s}

/* Typography matched to the supplied 1080px-wide story mockups. */
#openingStory .opening-copy{font-size:3.7cqw;line-height:1.5;letter-spacing:.1em;font-weight:400}
#openingStory .opening-copy h2{font-size:4.8cqw;letter-spacing:.12em;margin-bottom:2.1cqh}
#openingStory .opening-copy h2 small{font-size:1.85cqw;letter-spacing:.65em}
#openingStory[data-scene="palace"] .opening-copy{font-size:4.1cqw;line-height:1.45;letter-spacing:.1em}
#openingStory[data-scene="palace"] .opening-lines p{margin-bottom:1cqh}
#openingStory .opening-choices button{font-size:3.7cqw;letter-spacing:.1em;line-height:1.5}

/* Tighten only the palace prologue sentence spacing. */
#openingStory[data-scene="palace"] .opening-lines p{margin-bottom:.35cqh}

.opening-scene-fade{position:absolute;inset:0;z-index:10;background:#000;opacity:0;pointer-events:none}
#openingStory.resetting-location .opening-art,#openingStory.resetting-location .opening-veil{transition:none!important}

#openingStory .opening-skip{position:absolute;right:4.5%;top:80%;width:5cqw;height:5cqw;min-width:30px;min-height:30px;padding:0;background:none;border:0;box-shadow:none;cursor:pointer}
.opening-skip img{width:100%;height:100%;object-fit:contain;opacity:.8}
#openingStory .opening-copy{right:10%;cursor:pointer}
#openingStory .opening-copy h2{padding-right:6cqw}
#openingStory .opening-footer{left:7%;right:5%;gap:3cqw}
#openingStory .opening-next{width:5cqw;height:5cqw}
.opening-advance-arrow{display:block;width:3cqw;height:3cqw;background:#d4d5d9;mask:url('assets/ui/stat-up-arrow.png') center/contain no-repeat;-webkit-mask:url('assets/ui/stat-up-arrow.png') center/contain no-repeat;transform:rotate(180deg);opacity:0}
#openingStory.awaiting-input .opening-advance-arrow{opacity:1;animation:openingArrowBob 1s ease-in-out infinite}
#openingStory[data-scene="palace"] .opening-lines p{animation:none}
#openingStory[data-scene="palace"] .opening-skip{top:75%}
@keyframes openingArrowBob{0%,100%{translate:0 -2px}50%{translate:0 3px}}
@media(prefers-reduced-motion:reduce){#openingStory.awaiting-input .opening-advance-arrow{animation:none}}

#openingStory[data-scene="palace"] .opening-skip{display:none}

/* Reveal the continuation cue as one quiet group after the text completes. */
#openingStory .opening-footer{opacity:0;translate:0 4px;transition:opacity .55s ease,translate .55s ease;pointer-events:none}
#openingStory.awaiting-input .opening-footer{opacity:1;translate:0 0;pointer-events:auto}
#openingStory .opening-advance-arrow{background:#aaa9a3}
#openingStory.awaiting-input .opening-advance-arrow{opacity:.6}
@media(prefers-reduced-motion:reduce){#openingStory .opening-footer{transition:none;translate:0 0}}

/* A brief focus pull when arriving at Serina, then light UI entrances. */
#openingStory.dialogue-entrance .serina{animation:dialogueFocusIn .75s ease-out both}
#openingStory.dialogue-entrance .opening-copy h2{animation:dialogueUiIn .4s .25s ease-out both}
#openingStory.dialogue-entrance .opening-skip{animation:dialogueUiIn .4s .35s ease-out both}
#openingStory.dialogue-entrance .opening-lines{animation:dialogueUiIn .4s .4s ease-out both}
#openingStory[data-scene="choices"] .opening-choices button{animation:dialogueUiIn .35s ease-out both}
#openingStory[data-scene="choices"] .opening-choices button:nth-child(2){animation-delay:.1s}
@keyframes dialogueFocusIn{from{filter:blur(8px)}to{filter:blur(0)}}
@keyframes dialogueUiIn{from{opacity:0;translate:0 5px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#openingStory.dialogue-entrance .serina,#openingStory.dialogue-entrance .opening-copy h2,#openingStory.dialogue-entrance .opening-skip,#openingStory.dialogue-entrance .opening-lines,#openingStory .opening-choices button{animation:none!important}}

.opening-skip-confirm{position:absolute;inset:0;z-index:30;background:#0009;display:grid;place-items:center;padding:5cqw}
.opening-skip-confirm>section{width:100%;padding:6cqw 4cqw 4cqw;background:#202629;border:2px solid #8e8057;border-radius:14px;box-shadow:0 10px 35px #0008;color:#f6edcf;text-align:center;animation:dialogueUiIn .2s ease-out}
#openingStory .opening-skip-confirm h2{font-size:4.5cqw;line-height:1.4;margin:0 0 3cqw}
.opening-skip-confirm p{font-size:3.6cqw;line-height:1.6;color:#d8d3c5;margin:0 0 6cqw}
.opening-skip-confirm section>div{display:flex;gap:3cqw}
#openingStory .opening-skip-confirm button{flex:1;min-height:44px;padding:2.5cqw 1cqw;border-radius:10px;font-size:4cqw;font-weight:700;border:2px solid #5b6469;background:#485157;color:#f6edcf;cursor:pointer}
#openingStory .opening-skip-confirm [data-skip-accept]{background:linear-gradient(#f6dd77,#ce982c);border-color:#a7802e;color:#59411f}

/* Skip capsule: 120 x 60 on the 1080px reference canvas. */
#openingStory .opening-skip{top:2.2%;right:2.5%;width:11.111cqw;height:5.556cqw;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:999px;background:#16233d;box-shadow:none}
#openingStory .opening-skip img{display:block;width:5cqw;height:5cqw;object-fit:contain;opacity:1}
#openingStory[data-scene="palace"] .opening-skip{display:none}

/* Supplied sprites use the same canvas proportions as the normal warrior. */
.hero:has(.hero-sprite[src*="/paladin-v919-v1137.png"]),.hero:has(.hero-sprite[src*="/serina-v1128-new1201-v1137.png"]){width:46px;height:46px}
.hero:has(.hero-sprite[src*="/paladin-v919-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/serina-v1128-new1201-v1137.png"]) .hero-sprite{width:46px;height:46px;filter:drop-shadow(0 3px 1px #0004);animation:heroRandomGroundedIdle var(--hero-idle-duration,1.3s) ease-in-out var(--hero-idle-delay,0s) infinite;transform-origin:50% 100%}
.hero-loadout .loadout-hero[src*="/paladin-v919-v1137.png"],.hero-loadout .loadout-hero[src*="/serina-v1128-new1201-v1137.png"]{width:70px;height:70px}
@media(prefers-reduced-motion:reduce){.hero:has(.hero-sprite[src*="/paladin-v919-v1137.png"]) .hero-sprite,.hero:has(.hero-sprite[src*="/serina-v1128-new1201-v1137.png"]) .hero-sprite{animation:none}}

/* Match the 300px hero canvases to the existing 256px sprite scale. */
img[src*="assets/normalized/serina-v1128-new1201-v1137.png"],img[src*="assets/normalized/paladin-v919-v1137.png"]{scale:1.2;transform-origin:50% 100%}

/* Keep scaled plumes inside the card while avoiding the portrait crop. */
.card .portrait:has(img[src*="/paladin-v919-v1137.png"]),.equipment-heroes .portrait:has(img[src*="/paladin-v919-v1137.png"]){overflow:visible}
.card .portrait img[src*="/paladin-v919-v1137.png"],.equipment-heroes .portrait img[src*="/paladin-v919-v1137.png"]{transform:translateY(2px)}

/* Independent translation keeps 120% scaled portraits centered on the pedestal. */
.hero-loadout .loadout-hero[src*="/serina-v1128-new1201-v1137.png"],.hero-loadout .loadout-hero[src*="/paladin-v919-v1137.png"]{left:50%;transform:none;translate:-50% 0}

/* Shared foot baseline for both 120% hero sprites in roster/deployment slots. */
.card .portrait:has(img[src*="/serina-v1128-new1201-v1137.png"]),.equipment-heroes .portrait:has(img[src*="/serina-v1128-new1201-v1137.png"]){overflow:visible}
.card .portrait img[src*="/serina-v1128-new1201-v1137.png"],.equipment-heroes .portrait img[src*="/serina-v1128-new1201-v1137.png"]{transform:translateY(2px)}

/* Match the profile's bottom-anchored scaling in both hero slot surfaces. */
.card .portrait:has(img[src*="/serina-v1128-new1201-v1137.png"]),.card .portrait:has(img[src*="/paladin-v919-v1137.png"]),.equipment-heroes .portrait:has(img[src*="/serina-v1128-new1201-v1137.png"]),.equipment-heroes .portrait:has(img[src*="/paladin-v919-v1137.png"]){display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.card .portrait img[src*="/serina-v1128-new1201-v1137.png"],.card .portrait img[src*="/paladin-v919-v1137.png"],.equipment-heroes .portrait img[src*="/serina-v1128-new1201-v1137.png"],.equipment-heroes .portrait img[src*="/paladin-v919-v1137.png"]{transform:none;translate:none;transform-origin:50% 100%;margin:0;scale:1.2}

#deploymentTutorial{position:fixed;inset:0;z-index:5900;animation:openingFadeIn .35s ease;pointer-events:none}
#deploymentTutorial.ending{opacity:0;transition:opacity .35s}
.deployment-focus{position:absolute;border-radius:12px;box-shadow:0 0 0 200vmax #000b;pointer-events:auto;transition:box-shadow .35s}
.deployment-guide{position:absolute;object-fit:contain;object-position:left bottom;animation:deploymentGuideIn .45s ease-out;pointer-events:none}
.deployment-bubble{position:absolute;box-sizing:border-box;background:#fffdf1;color:#30394f;border-radius:15px;padding:12px 16px;box-shadow:0 3px 8px #0003;pointer-events:auto;font-size:clamp(11px,calc(var(--guide-width)*.0225),14.4px);line-height:1.4}
.deployment-bubble strong{display:flex;align-items:center;gap:6px;font-size:inherit}.deployment-bubble strong img{width:14px;height:14px;object-fit:contain}
.deployment-bubble p{white-space:pre-line;margin:5px 15px 2px 0;min-height:2.8em;letter-spacing:.02em}
.deployment-next{position:absolute;right:12px;bottom:12px;width:8px;height:8px;background:#646464;mask:url('assets/ui/stat-up-arrow.png') center/contain no-repeat;transform:rotate(180deg);opacity:0}
#deploymentTutorial.text-ready[data-mode="explain"] .deployment-next{opacity:1;animation:openingArrowBob 1s infinite}
#deploymentTutorial[data-mode="action"] .deployment-guide{display:none}
#deploymentTutorial[data-mode="action"] .deployment-focus{pointer-events:none;border:2px solid #efb631;box-sizing:border-box}
#deploymentTutorial[data-mode="action"] .deployment-bubble{pointer-events:none}
#deploymentTutorial.observing{opacity:0;transition:opacity .25s}
.deployment-tutorial-target{position:relative;z-index:5901;outline:2px solid #f4bd47;outline-offset:2px}
@keyframes deploymentGuideIn{from{opacity:0;translate:-50px 0}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){#deploymentTutorial,.deployment-guide,.deployment-next{animation:none!important}}
.deployment-bubble p span{display:inline-block;white-space:pre;animation:deploymentLetterIn .12s ease-out both}
@keyframes deploymentLetterIn{from{opacity:0;transform:translateX(4px)}to{opacity:1;transform:translateX(0)}}

.game-shell .header-battle-tools{display:flex;align-items:center;justify-content:flex-end;gap:5px;flex:0 0 30px;padding:3px 12px 0;background:var(--cream);position:relative;z-index:3}
.game-shell .header-battle-tools button{display:flex!important;align-items:center;justify-content:center;position:static!important;width:auto!important;height:23px!important;min-width:30px;min-height:0;margin:0!important;padding:2px 8px!important;border:1px solid #a69a77;border-radius:6px;background:#eee1bd;color:#384047;font:700 10px/1.2 inherit;box-shadow:none}
.game-shell .header-battle-tools button.active{background:#38464e;color:#fff4cd}
.game-shell .header-battle-tools button:before{display:none!important}

/* Temporary controls overlay the existing title area without taking layout space. */
.game-shell{position:relative}
.game-shell .header-battle-tools{position:absolute;top:0;left:0;right:0;height:27px;min-height:0;padding:2px 10px;background:transparent;z-index:30;pointer-events:none}
.game-shell .header-battle-tools button{pointer-events:auto;font-family:inherit;font-size:10px;line-height:1.2}
.game-shell .header-battle-tools{justify-content:flex-start}

/* Programmatic choice focus should not flash a second border for touch/mouse. */
#openingStory:not(.keyboard-navigation) button:focus-visible{outline:none}

/* Clip the side entrance to the battlefield; reveal dialogue only afterwards. */
.deployment-art-clip{position:absolute;overflow:hidden;border-radius:12px;pointer-events:none}
.deployment-art-clip .deployment-guide{left:0;top:auto;bottom:0;width:auto;max-width:none;height:auto;animation:none;object-position:left bottom}
#deploymentTutorial[data-mode="action"] .deployment-art-clip{display:none}

/* Quest reward cue, applied to the tutorial outline without moving the slot. */
.deployment-tutorial-target{outline:none}
#deploymentTutorial[data-mode="action"] .deployment-focus{border:0}
#deploymentTutorial[data-mode="action"] .deployment-focus:after{content:'';position:absolute;inset:-2px;border:2px solid #ffe071;border-radius:12px;pointer-events:none;animation:questTutorialRewardFocus .75s ease-in-out infinite;transform-origin:center}
@media(prefers-reduced-motion:reduce){#deploymentTutorial[data-mode="action"] .deployment-focus:after{animation:none;box-shadow:0 0 8px 2px #ffc83f99}}

/* Reuse the quest emphasis for the battlefield during Serina's explanation. */
#deploymentTutorial[data-mode="explain"] .deployment-focus:after{content:'';position:absolute;inset:0;border:2px solid #ffe071;border-radius:12px;pointer-events:none;animation:deploymentBattleOutline .75s ease-in-out infinite}
@keyframes deploymentBattleOutline{0%,100%{box-shadow:inset 0 0 0 1px #2b1d08,0 0 8px 2px #ffc83f99;border-color:#ffd65a}50%{box-shadow:inset 0 0 0 1px #fff0a8,0 0 18px 6px #ffd34ed9;border-color:#fff0a8}}
@media(prefers-reduced-motion:reduce){#deploymentTutorial[data-mode="explain"] .deployment-focus:after{animation:none}}

/* Raise only the outline; keep the dimming shadow behind the artwork. */
#deploymentTutorial .deployment-focus{z-index:auto}
#deploymentTutorial .deployment-focus:after{z-index:20}

.deployment-choices{position:absolute;display:grid;gap:8px;pointer-events:auto;z-index:21}
#deploymentTutorial.choosing .deployment-bubble{display:none}
.deployment-choices button{width:100%;aspect-ratio:940/130;background:url('assets/onboarding/choice.png') center/100% 100% no-repeat;border:0;box-shadow:none;border-radius:0;color:#e3e3e5;text-align:left;padding:0 12% 0 8.5%;font-size:calc(var(--guide-width)*.032);font-weight:400;letter-spacing:.1em;line-height:1.5;cursor:pointer;animation:dialogueUiIn .35s ease-out both}
.deployment-choices button:nth-child(2){animation-delay:.1s}
.deployment-choices button:hover{filter:brightness(1.12)}
.deployment-choices button:focus:not(:focus-visible){outline:none}
@media(prefers-reduced-motion:reduce){.deployment-choices button{animation:none}}

#deploymentTutorial.soldier-report .deployment-art-clip{visibility:hidden}

.deployment-soldier-call{position:absolute;height:auto;display:none;pointer-events:none;transform-origin:bottom center;filter:drop-shadow(0 2px 2px #0004)}
#deploymentTutorial.soldier-report .deployment-soldier-call{display:block;animation:soldierCallPulse .85s ease-out infinite}
@keyframes soldierCallPulse{0%{transform:translateY(3px) scale(.92) rotate(-5deg)}20%{transform:translateY(-3px) scale(1.07) rotate(3deg)}40%{transform:translateY(0) scale(1) rotate(-2deg)}65%,100%{transform:translateY(0) scale(1) rotate(0)}}
@media(prefers-reduced-motion:reduce){#deploymentTutorial.soldier-report .deployment-soldier-call{animation:none}}

/* Match the standard dungeon confirmation typography and spacing. */
#openingStory .opening-skip-confirm{padding:18px;font-family:"Malgun Gothic",system-ui,sans-serif}
#openingStory .opening-skip-confirm>section{width:min(360px,100%);padding:22px 16px 16px}
#openingStory .opening-skip-confirm h2{font-size:18px;font-weight:900;line-height:1.4;margin:0;letter-spacing:normal}
#openingStory .opening-skip-confirm p{font-size:12px;font-weight:700;line-height:1.6;margin:14px 0 24px;letter-spacing:normal}
#openingStory .opening-skip-confirm section>div{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
#openingStory .opening-skip-confirm button{height:46px;min-height:46px;padding:0 12px;font-family:"Malgun Gothic",system-ui,sans-serif;font-size:14px;font-weight:900;line-height:1;letter-spacing:normal}

/* Double-hit numbers stamp in place; ordinary damage keeps damageFloat. */
.damage-number.combo-hit{animation:damageDoubleStamp .54s linear forwards;transform-origin:50% 50%}
@keyframes damageDoubleStamp{0%{transform:translateX(-50%) scale(1.95);opacity:0}8%{transform:translateX(-50%) scale(1.6);opacity:1}23%{transform:translateX(-50%) scale(.9);opacity:1}34%{transform:translateX(-50%) scale(1.06);opacity:1}46%,78%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.damage-number.combo-hit{animation:damageStampReduced .54s linear forwards}@keyframes damageStampReduced{0%,78%{opacity:1}100%{opacity:0}}}

img[src*="/eria-v1128-new1201-v1137.png"]{scale:1.2;transform-origin:50% 100%}
.hero:has(.hero-sprite[src*="/eria-v1128-new1201-v1137.png"]){width:46px;height:46px}
.hero .hero-sprite[src*="/eria-v1128-new1201-v1137.png"]{width:46px;height:46px}
.hero-loadout .loadout-hero[src*="/eria-v1128-new1201-v1137.png"]{width:70px;height:70px;left:50%;transform:none;translate:-50% 0}
.card .portrait:has(img[src*="/eria-v1128-new1201-v1137.png"]),.equipment-heroes .portrait:has(img[src*="/eria-v1128-new1201-v1137.png"]){display:flex;align-items:flex-end;justify-content:center;overflow:visible}
.card .portrait img[src*="/eria-v1128-new1201-v1137.png"],.equipment-heroes .portrait img[src*="/eria-v1128-new1201-v1137.png"]{transform:none;translate:none;margin:0}

/* Critical damage uses a larger stamp while ordinary hits keep their original float. */
.damage-number.critical{font-size:20px;animation:damageCriticalStamp .54s linear forwards;transform-origin:50% 50%}
@keyframes damageCriticalStamp{0%{transform:translateX(-50%) scale(2.05);opacity:0}8%{transform:translateX(-50%) scale(1.7);opacity:1}23%{transform:translateX(-50%) scale(.92);opacity:1}34%{transform:translateX(-50%) scale(1.1);opacity:1}46%,72%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.damage-number.critical{animation:damageStampReduced .54s linear forwards}}

.eria-summon-reveal{position:fixed;inset:0;z-index:6500;background:#0b1926;display:grid;place-items:center;overflow:hidden;pointer-events:all}
.eria-summon-reveal img{position:absolute;object-fit:contain}.eria-summon-light{width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#fff9cc,#99e5c966,transparent 68%);animation:eriaLight 2.6s ease-in-out both}
.eria-summon-bow{width:200px;height:260px;filter:brightness(0);animation:eriaBow 2.6s ease both}
.eria-summon-hero{width:260px;height:260px;animation:eriaHero 2.6s ease both}
.eria-summon-reveal strong{position:absolute;top:calc(50% + 150px);color:#ffe7a5;font-size:22px;animation:eriaName 2.6s ease both}
@keyframes eriaLight{0%{scale:.1;opacity:0}35%{scale:1;opacity:1}65%{scale:2;opacity:1}100%{scale:1.3;opacity:1}}
@keyframes eriaBow{0%,15%{opacity:0;scale:.7}35%,48%{opacity:1;scale:1}65%,100%{opacity:0;scale:1.15}}
@keyframes eriaHero{0%,48%{opacity:0;filter:brightness(0);scale:.9}58%{opacity:1;filter:brightness(0);scale:1}78%,100%{opacity:1;filter:brightness(1);scale:1}}
@keyframes eriaName{0%,70%{opacity:0;translate:0 8px}85%,100%{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.eria-summon-reveal *{animation:none!important}.eria-summon-bow{display:none}}

#deploymentTutorial.summon-guidance .deployment-art-clip{display:none}
#deploymentTutorial.summon-guidance[data-mode="explain"] .deployment-focus{inset:0!important;width:100%!important;height:100%!important;border-radius:0;background:#0009;box-shadow:none;pointer-events:none}
#deploymentTutorial.summon-guidance[data-mode="explain"] .deployment-focus:after{display:none}
.eria-introduction{position:fixed;z-index:6500;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 20px));height:min(920px,calc(100dvh - 20px));overflow:hidden;border:4px solid #111a20;border-radius:18px;container-type:size;background:transparent;cursor:pointer}
.eria-intro-art{position:absolute;width:100%;height:100%;object-fit:fill;visibility:hidden}

.eria-introduction .opening-copy{top:80%;font-size:3.7cqw;line-height:1.5;opacity:0}
.eria-introduction .opening-copy h2{font-size:5.1cqw}
.eria-introduction .opening-lines p{white-space:pre-line}
.eria-introduction .opening-footer{opacity:0}.eria-introduction .opening-advance-arrow{width:3cqw;height:3cqw;opacity:.6}
.eria-introduction.ready .opening-copy,.eria-introduction.ready .opening-footer{opacity:1;transition:opacity .35s}
.eria-intro-white{position:absolute;inset:0;background:white;pointer-events:none}
@media(max-width:480px){.eria-introduction{width:100vw;height:100dvh;border:0;border-radius:0}}

/* Trial: Eria tutorial keeps the target outline fixed and pulses only its glow. */
#deploymentTutorial[data-recruit="eria"][data-mode="action"] .deployment-focus:after{transform:none;border-color:#ffe071;animation:eriaTargetGlow .75s ease-in-out infinite}
@keyframes eriaTargetGlow{0%,100%{box-shadow:inset 0 0 0 1px #2b1d08,0 0 8px 2px #ffc83f99}50%{box-shadow:inset 0 0 0 1px #fff0a8,0 0 18px 6px #ffd34ed9}}
@media(prefers-reduced-motion:reduce){#deploymentTutorial[data-recruit="eria"][data-mode="action"] .deployment-focus:after{animation:none}}

/* Shared stationary glow for all tutorial action targets. */
.tutorial-target{animation:questTutorialRewardFocus .75s ease-in-out infinite!important}
.game-shell.summon-mode #heroCollection.tutorial-target{animation:none!important}
@media(prefers-reduced-motion:reduce){.tutorial-target,.quest-dialog .quest-reward-slot.tutorial-target{animation:none!important}}

/* Soft outline light for dialogue character cutouts. */
.deployment-art-clip .deployment-guide{filter:drop-shadow(0 1px 2px #10182722) drop-shadow(0 3px 4px #10182733)}

/* Paired battlefield conversation. */
#deploymentTutorial[data-recruit="eria"].duet .deployment-guide{transition:filter .25s}
#deploymentTutorial[data-recruit="eria"] .deployment-art-clip .eria-partner{left:auto;right:0;object-position:right bottom}
#deploymentTutorial[data-recruit="eria"] .eria-partner[hidden]{display:none}
#deploymentTutorial[data-recruit="eria"].duet[data-speaker="에리아"] .deployment-guide:not(.eria-partner),
#deploymentTutorial[data-recruit="eria"].duet[data-speaker="세리나"] .eria-partner{filter:brightness(.85) drop-shadow(0 3px 4px #10182733)}

#deploymentTutorial[data-recruit="eria"] .deployment-guide[hidden]{display:none!important}

/* 1080 x 1920 artwork on a uniformly scaled 540 x 960 logical canvas. */
html{background:#101820;overflow:hidden}
body{padding:0!important;margin:0;min-height:0!important;overflow:hidden;display:grid;place-items:center}
main.game-shell,.title-screen,#openingStory,.eria-introduction{width:540px!important;height:960px!important;min-width:540px;max-width:540px;min-height:960px;max-height:960px;box-sizing:border-box;border:0!important;border-radius:0!important}
main.game-shell{flex-shrink:0}

/* Keep horizontal scale; absorb short screens through layout, not image stretching. */
main.game-shell,.title-screen,#openingStory,.eria-introduction{height:var(--game-height,960px)!important;min-height:var(--game-height,960px);max-height:var(--game-height,960px)}
main.game-shell>#battlefield{height:clamp(244px,calc(var(--game-height,960px) * .30625),330px)!important;min-height:0!important;flex:0 0 clamp(244px,calc(var(--game-height,960px) * .30625),330px)!important}
main.game-shell>.controls{min-height:0}
#openingStory .serina,.eria-intro-art{object-fit:cover!important}

/* Capital scene: width-scaled scenery, fixed foreground/deck, flexible combat space. */
main.game-shell{--scene-height:calc(var(--game-height,960px) - 466px)}
main.game-shell>#battlefield{height:var(--scene-height)!important;flex:0 0 var(--scene-height)!important;isolation:isolate}
main.game-shell>#battlefield:is([data-region="0"],[data-tutorial="true"]){background-image:url('assets/battlefields/capital-background-541.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat}
.battle-foreground{position:absolute;inset:auto 0 0;height:auto;aspect-ratio:1080/385;background:url('assets/battlefields/capital-foreground-541.png') center bottom/100% auto no-repeat;z-index:350;pointer-events:none}
#battlefield:not([data-region="0"]):not([data-tutorial="true"])>.battle-foreground{display:none}
main.game-shell>.controls:has(>[data-panel="battle"].active){flex:0 0 326px!important;height:326px;padding:0 12px!important;overflow:visible}
main.game-shell>.controls>[data-panel="battle"].active{height:326px!important;min-height:0;overflow:visible}
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head{position:absolute;z-index:400;left:26px;right:26px;top:calc(60px + var(--scene-height) - 138px);height:34px;margin:0!important;padding:0!important}
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head .battle-deck-heading{background:#34455e;border-radius:24px;padding:3px 10px;color:#fff0b5}
main.game-shell>.controls>[data-panel="battle"]>.hero-cards{position:absolute;z-index:400;left:26px;right:26px;top:calc(60px + var(--scene-height) - 98px);height:84px!important;margin:0!important;gap:6px}
main.game-shell>.controls>[data-panel="battle"]>.hero-cards>.card{height:84px!important;min-height:0!important}
main.game-shell>.controls>[data-panel="battle"]>.main-event-carousel{flex:0 0 100px!important;height:100px;margin:24px 2px 10px!important}
main.game-shell>.controls>[data-panel="battle"]>.menu-concept-surface{flex:0 0 192px!important;height:192px;min-height:0}
main.game-shell>.controls>[data-panel="battle"]>.menu-concept-surface>.menu-concept-grid{height:192px;grid-template-rows:repeat(2,80px);row-gap:6px;padding:10px 28px 10px;align-content:center}
main.game-shell>#battlefield>.idle-chest{bottom:154px!important}
main.game-shell>#battlefield>.wave-panel{bottom:154px!important}

main.game-shell>.controls>[data-panel="battle"]>.hero-cards{width:auto!important;padding:0!important}
main.game-shell>.controls>[data-panel="battle"] .deployment-count,main.game-shell>.controls>[data-panel="battle"] .deployment-count b{color:#fff0b5}
main.game-shell>#battlefield>.wave-panel,main.game-shell>#battlefield>.idle-chest{z-index:360}

/* Deployment edit icon inherits the label color without a button box. */
main.game-shell .battle-deck-heading #editDeckButton{width:30px;height:30px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit}
main.game-shell .battle-deck-heading #editDeckButton img{display:none}
main.game-shell .battle-deck-heading #editDeckButton:after{content:"";display:block;width:24px;height:24px;background:currentColor;mask:url('assets/ui/deck-settings-simple.svg') center/contain no-repeat;-webkit-mask:url('assets/ui/deck-settings-simple.svg') center/contain no-repeat}

/* Keep cooldown labels opaque while dimming the slot artwork to 60%. */
#heroCards .card:disabled{opacity:1;background:linear-gradient(145deg,#fffef699,#f8edcc99);border-color:#26313a99;box-shadow:inset 0 0 0 2px #fff9dc99,0 2px 0 #9d865899}
#heroCards .card:disabled>*:not(.summon-cooldown){opacity:.6}
#heroCards .card:disabled>.summon-cooldown{opacity:1;background:#172129}
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head{left:90px;justify-content:space-between;gap:10px}
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head .battle-deck-heading{height:30px;padding:0 11px;border-radius:15px;background:#29425d;gap:5px;color:#fff}
main.game-shell>.controls>[data-panel="battle"] .deployment-count{font-size:12px;color:#fff}
main.game-shell>.controls>[data-panel="battle"] .deployment-count b{font-size:13px;color:#ffd45c}
main.game-shell>.controls>[data-panel="battle"] .battle-deck-heading #editDeckButton{width:22px;height:26px;margin-left:3px}
main.game-shell>.controls>[data-panel="battle"] .battle-deck-heading #editDeckButton:after{width:20px;height:20px}
main.game-shell>#battlefield>.idle-chest{bottom:107px!important}
/* Align the deck settings icon against the right inset of its pill. */
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head .battle-deck-heading{min-width:104px;padding-right:6px;gap:10px}
main.game-shell>.controls>[data-panel="battle"] .battle-deck-heading #editDeckButton{margin-left:auto;flex:0 0 22px}
/* Preserve the gear position while tightening the label and clearing the chest. */
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head{left:98px}
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head .battle-deck-heading{min-width:96px;gap:5px}

/* Place the region title beside the gate HP badge. */
main.game-shell>#battlefield>.battle-location{left:72px;right:auto;top:9px;height:32px;display:flex;align-items:center;gap:0}
main.game-shell>#battlefield>.battle-location #worldMapButton{display:none}
main.game-shell>#battlefield>.battle-location span,main.game-shell>#battlefield>.battle-location i,main.game-shell>#battlefield>.battle-location b{font-size:14px;line-height:1.2}
/* Top-right wave progress, aligned with the region title row. */
main.game-shell>#battlefield>.wave-panel{left:auto;right:12px;top:21px;bottom:auto!important;width:118px;height:26px;transform:none}
main.game-shell>#battlefield>.wave-panel #waveText{left:0;right:0;top:11px;bottom:auto;transform:none;text-align:center;font-size:11px;line-height:14px}

main.game-shell>#battlefield>.wave-panel #waveText{left:50%;right:auto;top:50%;bottom:auto;transform:translate(-50%,-50%);text-align:center;line-height:1}
main.game-shell>#battlefield>.wave-panel>div{background:#29425d;border-color:#29425d}
main.game-shell>#battlefield>.wave-panel #waveBar{background:#ffda68}
/* Adventure effects center on the scene above the fixed foreground/deck. */
main.game-shell>#battlefield{--battle-effect-center:calc((100% - 184px) / 2)}
main.game-shell>#battlefield>.dungeon-start-banner{bottom:184px}
main.game-shell>#battlefield>.dungeon-start-banner>img{top:0}
main.game-shell>#battlefield>.dungeon-start-banner>.dungeon-start-sparks{inset:0}
main.game-shell>#battlefield>.dungeon-failure-overlay>img{position:absolute;left:50%;top:var(--battle-effect-center);translate:-50% -50%}
main.game-shell>#battlefield>.dungeon-failure-overlay>.dungeon-failure-copy{top:calc(var(--battle-effect-center) + 65px);bottom:auto}
/* Keep defeat copy just above the deployment/currency row. */
main.game-shell>#battlefield>.dungeon-failure-overlay>img{top:calc(100% - 245px)}
main.game-shell>#battlefield>.dungeon-failure-overlay>.dungeon-failure-copy{top:calc(100% - 190px);bottom:auto}
/* Defeat artwork stays centered; only the supporting copy sits lower. */
main.game-shell>#battlefield>.dungeon-failure-overlay>img{top:var(--battle-effect-center)}
/* Lift the battlefield stacking context over the external deck HUD during defeat. */
main.game-shell>#battlefield:has(>.dungeon-failure-overlay){z-index:500}
/* Fade over the existing deck instead of lifting the opaque scenery over it. */
main.game-shell>#battlefield:has(>.dungeon-failure-overlay){z-index:auto;isolation:auto}
main.game-shell>#battlefield>.wave-panel.rebuilding{display:block}
/* Damage-size preview: ordinary and double-hit numbers at 20px. */
.damage-number{font-size:20px}
/* Raise defeat supporting text slightly and brighten its second line. */
main.game-shell>#battlefield>.dungeon-failure-overlay>.dungeon-failure-copy{top:calc(100% - 200px)}
main.game-shell>#battlefield>.dungeon-failure-overlay .dungeon-failure-copy p{color:#fff}
/* Readable damage text with a stronger outline. */
.damage-number{font-size:15px;-webkit-text-stroke:2.5px #111}
.damage-number.critical{font-size:20px}

/* Compact glossy boss health bar matching the supplied reference. */
main.game-shell>#battlefield>.elite-battle-hud{left:50%;right:auto;top:56px;transform:translateX(-50%);width:210px;height:17px;padding:2px;border:2px solid #182336;border-radius:10px;background:linear-gradient(#718298,#34435c);box-shadow:0 1px 1px #ffffff80;}
main.game-shell>#battlefield>.elite-battle-hud>small,main.game-shell>#battlefield>.elite-battle-hud>em,main.game-shell>#battlefield>.elite-battle-hud>b{display:none}
main.game-shell>#battlefield>.elite-battle-hud>span{display:block;width:100%;height:100%;overflow:hidden;border:0;border-radius:6px;background:linear-gradient(#10192b,#202c41);box-shadow:inset 0 1px 3px #0009}
main.game-shell>#battlefield>.elite-battle-hud>span i{display:block;height:100%;border-radius:5px;background:linear-gradient(180deg,#ffadb1 0%,#ff5e70 23%,#f32848 54%,#ee4050 85%,#ff6670 100%);box-shadow:inset 0 1px 1px #ffe6e8,inset 0 -1px 1px #b81535}
/* 30px at 1080-wide output: flat navy frame, no black outline or specular shine. */
main.game-shell>#battlefield>.elite-battle-hud{height:15px;border:0;padding:2px;background:#29425d;box-shadow:none}
main.game-shell>#battlefield>.elite-battle-hud>span{background:#182438;box-shadow:none}
main.game-shell>#battlefield>.elite-battle-hud>span i{background:linear-gradient(180deg,#f33a50,#e52c43);box-shadow:none}
/* Slim boss bar with restrained red sheen and a soft outer glow. */
main.game-shell>#battlefield>.elite-battle-hud{height:12px;padding:2px;background:#425c78;box-shadow:0 0 4px #a9c7e52b}
main.game-shell>#battlefield>.elite-battle-hud>span i{background:linear-gradient(180deg,#f97782 0%,#f34b60 28%,#e9324c 72%,#df2b43 100%);box-shadow:inset 0 1px 0 #ffffff26}
/* Pin the inner track to equal top/bottom frame insets. */
main.game-shell>#battlefield>.elite-battle-hud>span{position:absolute;inset:2px;width:auto;height:auto;margin:0;padding:0;box-sizing:border-box;border-radius:6px}
main.game-shell>#battlefield>.elite-battle-hud>span i{position:absolute;left:0;top:0;bottom:0;height:auto;margin:0;border:0;box-sizing:border-box}
/* Boss label above and name below the centered health bar. */
main.game-shell>#battlefield>.elite-battle-hud>em.dungeon-boss-protection{display:block;position:absolute;left:50%;right:auto;top:auto;bottom:calc(100% + 5px);transform:translateX(-50%);margin:0;padding:0;border:0;background:transparent;white-space:nowrap;color:#ffe3a0;font:900 10px/1.2 "Malgun Gothic",system-ui,sans-serif;letter-spacing:1px;text-align:center;text-shadow:0 1px 2px #101827}
main.game-shell>#battlefield>.elite-battle-hud>small{display:block;position:absolute;left:50%;right:auto;top:calc(100% + 5px);bottom:auto;transform:translateX(-50%);margin:0;padding:0;border:0;background:transparent;white-space:nowrap;color:#fff0cc;font:900 11px/1.2 "Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-align:center;-webkit-text-stroke:2px #172129;paint-order:stroke fill}
main.game-shell>#battlefield>.elite-battle-hud>em.dungeon-boss-protection{bottom:calc(100% + 6px)}
main.game-shell>#battlefield>.elite-battle-hud>small{top:calc(100% + 6px)}
main.game-shell>#battlefield>.elite-battle-hud>small{top:calc(100% + 2px);font-size:14px;line-height:1.2;-webkit-text-stroke:2px #172129;paint-order:stroke fill}
main.game-shell>#battlefield>.elite-battle-hud>em.dungeon-boss-protection{bottom:calc(100% + 2px);-webkit-text-stroke:2px #172129;paint-order:stroke fill}
main.game-shell>#battlefield .boss-position-preview{width:114px;height:114px}
main.game-shell>#battlefield .boss-position-preview .enemy-sprite{width:114px;height:114px;max-width:none;object-fit:contain;filter:drop-shadow(0 3px 1px #0004);animation:goldQueenIdle 1.9s cubic-bezier(.37,0,.63,1) infinite;transform-origin:50% 100%}
main.game-shell>#battlefield .boss-position-preview:before{content:none}
main.game-shell>#battlefield .boss-position-preview>.hp{display:none}
main.game-shell>#battlefield>.elite-battle-hud{top:56px}

/* Boss HUD enters without a brightness flash. */
.elite-battle-hud{animation:eliteHudRevealCentered .5s cubic-bezier(.16,.72,.2,1)}
@keyframes eliteHudRevealCentered{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
/* Matching labels beneath opposite ends of the boss health bar. */
main.game-shell>#battlefield>.elite-battle-hud>em.dungeon-boss-protection{left:0;right:auto;top:calc(100% + 2px);bottom:auto;transform:none;font-size:12px;line-height:1.2;letter-spacing:0;text-align:left}
main.game-shell>#battlefield>.elite-battle-hud>small{left:auto;right:0;top:calc(100% + 2px);bottom:auto;transform:none;font-size:12px;line-height:1.2;letter-spacing:0;text-align:right}
main.game-shell>#battlefield>.elite-battle-hud>em.dungeon-boss-protection{left:6px}
main.game-shell>#battlefield>.elite-battle-hud>small{right:6px}
/* Faster travel bounce, grounded at the feet; stationary idle remains unchanged. */
#heroes .hero.is-moving .hero-sprite{transform-origin:50% 100%;animation:heroTravelBounce .62s ease-in-out infinite}
@keyframes heroTravelBounce{0%,100%{transform:rotate(-2deg) scale(1.025,.955)}25%{transform:rotate(0deg) scale(.99,1.025)}50%{transform:rotate(2deg) scale(1.025,.955)}75%{transform:rotate(0deg) scale(.99,1.025)}}
@media(prefers-reduced-motion:reduce){#heroes .hero.is-moving .hero-sprite{animation:none}}


/* Match the resting breath to the approved travel rhythm, with feet grounded. */
#heroes .hero:not(.is-moving) .hero-sprite{transform-origin:50% 100%;animation:heroRestBreath .62s ease-in-out var(--hero-idle-delay,0s) infinite}
@keyframes heroRestBreath{0%,100%{transform:rotate(-.6deg) scale(1.025,.955)}50%{transform:rotate(.6deg) scale(.99,1.025)}}
@media(prefers-reduced-motion:reduce){#heroes .hero:not(.is-moving) .hero-sprite{animation:none}}
/* During tutorial combat, invisible dialogue must not intercept deployment taps. */
#deploymentTutorial.observing,#deploymentTutorial.observing *{pointer-events:none!important}

/* Action prompts have no next arrow; let text use the right-side space. */
#deploymentTutorial[data-mode="action"] .deployment-bubble p{margin-right:0}
/* Skill layout preview: equal HUD ends, five neutral circular placeholders. */
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head{left:26px;right:26px;display:grid;grid-template-columns:96px minmax(0,1fr) 96px;gap:10px;align-items:center}
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head .battle-deck-heading,
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head .deployment-wallet{box-sizing:border-box;width:96px;min-width:96px;height:30px;margin:0}
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head .deployment-wallet{justify-content:center}
.battle-skill-slots{display:flex;justify-content:center;align-items:center;gap:8px;min-width:0}
.battle-skill-slot{display:block;box-sizing:border-box;width:34px;height:34px;flex:0 0 34px;border:2px solid #f7e9b8;border-radius:50%;background:#29425d;box-shadow:0 1px 3px #0005}
main.game-shell>#battlefield>.idle-chest{bottom:135px!important;left:13px!important}

/* Compare a party-style skill column while preserving the symmetric bottom HUD. */
main.game-shell>.controls>[data-panel="battle"]>.battle-menu-head .deployment-wallet{grid-column:3}
#battlefield>.battle-skill-slots{position:absolute;z-index:401;left:15px;top:52px;display:flex;flex-direction:column;gap:6px;width:40px;pointer-events:none}
#battlefield>.battle-skill-slots>.battle-skill-slot{width:40px;height:40px;flex:0 0 40px}
#heroCards .card{touch-action:none}
#heroCards .card.skill-ready{box-shadow:0 0 9px #ffdc73,inset 0 0 0 2px #ffe89f}
.skill-charge{position:absolute;top:3px;left:50%;transform:translateX(-50%);padding:2px 5px;border-radius:8px;background:#29425d;color:#ffe28c;font-size:9px;white-space:nowrap;pointer-events:none}
.skill-charge[hidden]{display:none}
.skill-drag-aim{position:absolute;z-index:1000;width:42px;height:42px;border:2px solid #ffe28c;border-radius:50%;transform:translate(-50%,50%);box-shadow:0 0 15px #ffdb77;background:#ffe28c33;pointer-events:none}
.skill-drag-aim.invalid{border-color:#ed8888;box-shadow:none}
.skill-drag-hint{position:absolute;z-index:1000;top:50px;left:50%;transform:translateX(-50%);padding:8px 12px;border-radius:10px;background:#172539e8;color:#fff3cc;font-size:12px;white-space:nowrap;pointer-events:none}
.skill-protected:after{content:'';position:absolute;inset:-5px;border:2px solid #ffe19a;border-radius:50%;box-shadow:0 0 12px #ffe19a;pointer-events:none}
#heroCards .card.skill-ready{outline:2px solid #ffe071;outline-offset:0;animation:eriaTargetGlow .75s ease-in-out infinite;box-shadow:none}
#heroCards .card.skill-holding:after{content:'';position:absolute;left:8px;right:8px;bottom:5px;height:3px;border-radius:3px;background:#fff0a8;transform-origin:left;animation:skillHoldFill .4s linear forwards;pointer-events:none}
@keyframes skillHoldFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){#heroCards .card.skill-ready{animation:none;box-shadow:0 0 10px #ffd34e}}
/* Dedicated overlay prevents card disabled/cooldown rules from suppressing the tutorial glow. */
#heroCards .card{transition:translate .2s ease}
#heroCards .card.skill-mode{opacity:1!important;filter:none!important}
#heroCards .card.skill-mode .price,#heroCards .card.skill-mode .summon-cooldown{display:none!important}
#heroCards .card.skill-ready{translate:0 -4px;animation:none!important;outline:0;overflow:visible!important;z-index:2}
.skill-ready-outline{display:none;position:absolute;inset:-2px;border:2px solid #ffe071;border-radius:inherit;pointer-events:none;z-index:10}
#heroCards .skill-ready>.skill-ready-outline{display:block;animation:eriaTargetGlow .75s ease-in-out infinite}
#heroCards{overflow:visible!important}
@media(prefers-reduced-motion:reduce){#heroCards .card{transition:none}#heroCards .skill-ready>.skill-ready-outline{animation:none;box-shadow:0 0 10px 3px #ffd34e}}
/* Keep battlefield geometry stable while the title fades away. */
.title-active main.game-shell{transform:none}
main.game-shell{transition:opacity .8s ease,filter .8s ease}
/* Five fixed-size preview slots beneath the heart HUD. */
#battlefield>.skill-row-preview{position:absolute;left:9px;top:53px;z-index:401;display:flex;gap:7px}
#battlefield>.skill-row-preview>button{display:grid;place-items:center;box-sizing:border-box;width:40px;height:40px;padding:0;border:2px solid #d9e0e7;border-radius:50%;background:#29425d;box-shadow:0 2px 3px #0005,inset 0 0 0 2px #172b42;cursor:default}
#battlefield>.skill-row-preview>button>span{width:22px;height:22px;border-radius:50%;background:#ffffff09}
.battle-menu-head>.skill-row-preview{grid-column:2;display:flex;justify-content:center;align-items:center;gap:6px;min-width:0}
.battle-menu-head>.skill-row-preview>button{display:grid;place-items:center;box-sizing:border-box;width:40px;height:40px;flex:0 0 40px;padding:0;border:2px solid #d9e0e7;border-radius:50%;background:#29425d;box-shadow:0 2px 3px #0005,inset 0 0 0 2px #172b42;cursor:default}
.battle-menu-head>.skill-row-preview>button>span{width:22px;height:22px;border-radius:50%;background:#ffffff09}
/* Align circle bottoms with the 30px HUD pills above the summon cards. */
.battle-menu-head>.skill-row-preview{transform:translateY(-5px)}
.battle-menu-head>.skill-row-preview>button{position:relative;overflow:visible;transition:filter .2s,opacity .2s;cursor:pointer;touch-action:manipulation}
.battle-menu-head>.skill-row-preview>button>img{width:34px;height:34px;object-fit:contain;pointer-events:none}
.battle-menu-head>.skill-row-preview>button:disabled{opacity:.55;filter:grayscale(.65);cursor:default}
.battle-menu-head>.skill-row-preview>button.ready{opacity:1;filter:none;border-color:#ffe071}
.battle-menu-head>.skill-row-preview>button>.skill-button-glow{display:none;position:absolute;inset:-2px;width:auto;height:auto;border:2px solid #ffe071;border-radius:50%;background:none;pointer-events:none}
.battle-menu-head>.skill-row-preview>button.ready>.skill-button-glow{display:block;animation:eriaTargetGlow .75s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.battle-menu-head>.skill-row-preview>button.ready>.skill-button-glow{animation:none;box-shadow:0 0 10px #ffd34e}}
/* Clockwise cooldown ring; retain a clear icon and reserve glow for readiness. */
.battle-menu-head>.skill-row-preview>button[data-skill]:after{content:'';position:absolute;inset:-2px;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,#ffda68 0deg var(--skill-charge,0deg),#617084 var(--skill-charge,0deg) 360deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none}
.battle-menu-head>.skill-row-preview>button[data-skill]:disabled{opacity:1;filter:none}
.battle-menu-head>.skill-row-preview>button[data-skill]:disabled>img{opacity:.45;filter:grayscale(.65)}
.battle-menu-head>.skill-row-preview>button[data-skill].charging>img{opacity:.65;filter:grayscale(.3)}
.battle-menu-head>.skill-row-preview>button.ready>img{opacity:1;filter:none}
.battle-menu-head>.skill-row-preview>button>.skill-button-glow{z-index:2}
.battle-menu-head>.skill-row-preview>button[hidden]{display:none}
/* Critical-only burst uses the supplied alpha silhouette behind the existing 20px digits. */
.damage-number.critical{isolation:isolate;color:#fff7df;animation:damageCriticalImpact .54s linear forwards}
.damage-number.critical:before{content:'';position:absolute;z-index:-1;left:50%;top:50%;width:max(38px,calc(106% + 21px));height:38px;transform:translate(-50%,-50%);background:url('assets/effects/critical-burst-655.png') center/100% 100% no-repeat;mask:none;pointer-events:none}
.damage-number.critical{filter:none}
.damage-number.critical:before{filter:drop-shadow(0 0 2px #ff082466)}
@keyframes damageCriticalImpact{0%{transform:translateX(-50%) scale(2.7);opacity:0}6%{transform:translateX(-50%) scale(2.1);opacity:1}18%{transform:translateX(-50%) scale(.78);opacity:1}29%{transform:translateX(-50%) scale(1.16);opacity:1}42%,74%{transform:translateX(-50%) scale(1);opacity:1}100%{transform:translateX(-50%) scale(1);opacity:0}}
@media(prefers-reduced-motion:reduce){.damage-number.critical{animation:damageStampReduced .54s linear forwards}}




.skill-protected:after{animation:shieldReceive .24s ease-out both}
@keyframes shieldReceive{from{opacity:0;transform:scale(.65)}60%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.skill-protected:after{animation:none}}
/* Serina shield art: arrival pop followed by a soft pulsing outer glow. */
.skill-protected:after{content:'';position:absolute;inset:-9px;border:0;border-radius:0;background:url('assets/effects/serina-shield-637.png') center/contain no-repeat;box-shadow:none;pointer-events:none;animation:serinaShieldAppear .34s cubic-bezier(.16,1,.3,1) both,serinaShieldGlow 1.15s ease-in-out .34s infinite;transform-origin:50% 70%}
@keyframes serinaShieldAppear{0%{opacity:0;transform:scale(.45);filter:brightness(1.6) drop-shadow(0 0 9px #fff0a8)}65%{opacity:1;transform:scale(1.1);filter:brightness(1.2) drop-shadow(0 0 6px #ffe19a)}100%{opacity:1;transform:scale(1);filter:brightness(1) drop-shadow(0 0 3px #ffe19a88)}}
@keyframes serinaShieldGlow{0%,100%{filter:brightness(1) drop-shadow(0 0 3px #ffe19a88)}50%{filter:brightness(1.12) drop-shadow(0 0 7px #ffe8a8cc)}}
@media(prefers-reduced-motion:reduce){.skill-protected:after{animation:none;filter:drop-shadow(0 0 3px #ffe19a88)}}

/* Stronger shield rim glow plus distinct, staggered edge sparkles. */
@keyframes serinaShieldGlow{0%,100%{filter:brightness(1.12) drop-shadow(0 0 4px #ffe18dcc) drop-shadow(0 0 7px #ffd45a77)}50%{filter:brightness(1.45) drop-shadow(0 0 7px #fff1baff) drop-shadow(0 0 12px #ffdf7899)}}
.skill-protected:before{content:'';position:absolute;inset:-10px;z-index:2;pointer-events:none;background:radial-gradient(ellipse 2px 6px at 14% 30%,#fffce3 30%,transparent 75%),radial-gradient(ellipse 6px 2px at 14% 30%,#fffce3 30%,transparent 75%),radial-gradient(ellipse 2px 5px at 85% 65%,#fff6bd 30%,transparent 75%),radial-gradient(ellipse 5px 2px at 85% 65%,#fff6bd 30%,transparent 75%);filter:drop-shadow(0 0 3px #ffe480);animation:serinaShieldTwinkle 1.1s ease-in-out infinite}
@keyframes serinaShieldTwinkle{0%,100%{opacity:.15;transform:scale(.9)}30%{opacity:1;transform:scale(1.04)}55%{opacity:.25;transform:scale(.98)}78%{opacity:.9;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.skill-protected:before{animation:none;opacity:.65}.skill-protected:after{animation:none;filter:drop-shadow(0 0 5px #ffe19acc)}}
/* Match tutorial focus: steady shield art, pulsing glow opacity, no sparkles. */
.skill-protected:before{content:none;animation:none;background:none;filter:none}
@keyframes serinaShieldGlow{0%,100%{filter:drop-shadow(0 0 5px #ffe19a44) drop-shadow(0 0 10px #ffd45a22)}50%{filter:drop-shadow(0 0 5px #ffe19add) drop-shadow(0 0 10px #ffd45a99)}}
.skill-protected:after{animation:serinaShieldAppear .34s cubic-bezier(.16,1,.3,1) both,serinaShieldGlow .75s ease-in-out .34s infinite}
@media(prefers-reduced-motion:reduce){.skill-protected:after{animation:none;filter:drop-shadow(0 0 5px #ffe19a88)}}
/* Same gold and .75s pulse as the ready skill icon, following the shield silhouette. */
@keyframes serinaShieldGlow{0%,100%{filter:drop-shadow(0 0 8px #ffc83f99)}50%{filter:drop-shadow(0 0 18px #ffd34ed9)}}
.skill-protected:after{animation:serinaShieldAppear .34s cubic-bezier(.16,1,.3,1) both,serinaShieldGlow .75s ease-in-out .34s infinite}
@media(prefers-reduced-motion:reduce){.skill-protected:after{animation:none;filter:drop-shadow(0 0 8px #ffc83f99)}}
/* Keep original shield art steady; pulse a separate glow layer by opacity. */
.skill-protected:after{animation:serinaShieldAppear .34s cubic-bezier(.16,1,.3,1) both;filter:none}
.skill-protected:before{content:'';position:absolute;inset:-9px;z-index:auto;border:0;border-radius:0;pointer-events:none;background:url('assets/effects/serina-shield-637.png') center/contain no-repeat;transform:none;transform-origin:50% 70%;filter:drop-shadow(0 0 3px #fff0a8) drop-shadow(0 0 8px #ffc83f) drop-shadow(0 0 14px #ffd34e);animation:serinaShieldReadyFlash .75s ease-in-out .34s infinite;opacity:0}
@keyframes serinaShieldReadyFlash{0%,100%{opacity:0}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){.skill-protected:before{animation:none;opacity:.3}.skill-protected:after{animation:none;filter:none}}
/* Shield body breathes with the accepted glow pulse. */
.skill-protected:after{animation:serinaShieldAppear .34s cubic-bezier(.16,1,.3,1) both,serinaShieldBodyPulse .75s ease-in-out .34s infinite}
@keyframes serinaShieldBodyPulse{0%,100%{opacity:.55}50%{opacity:.85}}
@media(prefers-reduced-motion:reduce){.skill-protected:after{animation:none;opacity:.7;filter:none}}
.skill-protected.shield-ending:after{animation:serinaShieldExit .32s ease-out forwards}
.skill-protected.shield-ending:before{animation:serinaShieldGlowExit .32s ease-out forwards}
@keyframes serinaShieldExit{from{opacity:var(--shield-exit-body,.7);transform:scale(1)}to{opacity:0;transform:scale(1.16)}}
@keyframes serinaShieldGlowExit{from{opacity:var(--shield-exit-glow,.5);transform:scale(1)}to{opacity:0;transform:scale(1.23)}}
@media(prefers-reduced-motion:reduce){.skill-protected.shield-ending:before,.skill-protected.shield-ending:after{animation:shieldExitReduced .2s linear forwards}@keyframes shieldExitReduced{to{opacity:0}}}
/* Stronger shield visibility, slow rotation and a readable expanding fade. */
@keyframes serinaShieldBodyPulse{0%,100%{opacity:.75}50%{opacity:1}}
.skill-protected:after{animation:serinaShieldAppear .34s cubic-bezier(.16,1,.3,1) both,serinaShieldBodyPulse .75s ease-in-out .34s infinite,serinaShieldRotate 6s linear infinite}
.skill-protected:before{animation:serinaShieldReadyFlash .75s ease-in-out .34s infinite,serinaShieldRotate 6s linear infinite}
.skill-protected:before,.skill-protected:after{transform-origin:50% 50%}
@keyframes serinaShieldRotate{from{rotate:0deg}to{rotate:360deg}}
.skill-protected.shield-ending:after{animation:serinaShieldExit .6s ease-out forwards;rotate:var(--shield-exit-rotation,0deg)}
.skill-protected.shield-ending:before{animation:serinaShieldGlowExit .6s ease-out forwards;rotate:var(--shield-exit-rotation,0deg)}
@keyframes serinaShieldExit{0%{opacity:var(--shield-exit-body,.85);transform:scale(1)}35%{opacity:.7;transform:scale(1.18)}100%{opacity:0;transform:scale(1.5)}}
@keyframes serinaShieldGlowExit{0%{opacity:var(--shield-exit-glow,.5);transform:scale(1)}25%{opacity:.85;transform:scale(1.15)}100%{opacity:0;transform:scale(1.6)}}
@media(prefers-reduced-motion:reduce){.skill-protected:after{animation:none;opacity:.85;rotate:0deg}.skill-protected:before{animation:none;opacity:.3;rotate:0deg}.skill-protected.shield-ending:before,.skill-protected.shield-ending:after{animation:shieldExitReduced .2s linear forwards}}

/* Shield arrival: bounce out to 120%, flash filled, then settle at 100%. */
@keyframes serinaShieldAppear{0%{opacity:0;transform:scale(0);filter:brightness(1)}60%{opacity:1;transform:scale(1.2);filter:brightness(1.55) drop-shadow(0 0 8px #fff0a8)}100%{opacity:.75;transform:scale(1);filter:none}}
.skill-protected>.shield-arrival-flash{position:absolute;inset:-9px;border-radius:50%;background:#fffbd5;box-shadow:0 0 9px 3px #fff0a8,0 0 17px 5px #ffd34e99;pointer-events:none;z-index:3;transform-origin:center;animation:serinaShieldArrivalFlash .34s cubic-bezier(.16,1,.3,1) both}
@keyframes serinaShieldArrivalFlash{0%{opacity:0;transform:scale(0)}35%{opacity:0;transform:scale(.8)}60%{opacity:.95;transform:scale(1.2)}100%{opacity:0;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.skill-protected>.shield-arrival-flash{display:none}}
/* Serina skill cut-in: fixed diagonal frame with a separately drifting portrait. */
.skill-cutscene{position:absolute;inset:0;z-index:10000;overflow:hidden;background:#07101899;animation:skillCutShade 1s linear both;pointer-events:auto}
.skill-cutscene-panel{position:absolute;inset:0;will-change:transform;animation:skillCutSlide 1s linear both}
.skill-cutscene-window{position:absolute;inset:0;clip-path:polygon(0 0,57% 0,20% 100%,0 100%)}
.skill-cutscene-portrait{position:absolute;left:-2%;top:-3%;width:65%;height:106%;object-fit:cover;object-position:45% 40%;will-change:transform;animation:skillCutDepth 1s linear both}
.skill-cutscene-frame{position:absolute;left:calc(20% - 4px);top:0;width:42%;height:100%;object-fit:fill;clip-path:inset(0 1% 0 0)}
.skill-cutscene-playing{pointer-events:none}
@keyframes skillCutSlide{0%{transform:translate3d(-105%,0,0);animation-timing-function:cubic-bezier(.16,1,.3,1)}18%{transform:translate3d(0,0,0)}85%{transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.42,0,1,1)}100%{transform:translate3d(-105%,0,0)}}
@keyframes skillCutDepth{0%{transform:translate3d(-2%,0,0);animation-timing-function:cubic-bezier(.25,.1,.25,1)}100%{transform:translate3d(1%,0,0)}}
@keyframes skillCutShade{0%{background-color:#07101800;animation-timing-function:ease-out}18%{background-color:#07101899}85%{background-color:#07101899;animation-timing-function:ease-in-out}100%{background-color:#07101800}}
@media(prefers-reduced-motion:reduce){.skill-cutscene-panel,.skill-cutscene-portrait{animation:none}.skill-cutscene{animation:skillCutShade 1s linear both}}

/* Original critical type with tighter digit spacing, without an outline. */
.damage-number.critical{-webkit-text-stroke:0;text-shadow:none;font-family:"Malgun Gothic",system-ui,sans-serif;font-weight:900;letter-spacing:-.6px}

main.game-shell>#battlefield .hero,main.game-shell>#battlefield .enemy{scale:var(--combat-unit-scale,1);transform-origin:0% 100%}

@media(pointer:coarse) and (max-width:900px){#deploymentTutorial .deployment-bubble p{margin-right:0;line-height:1.4}#deploymentTutorial .deployment-next{right:5px;bottom:5px}}
/* Game taps must not create browser text selections or image drag previews. */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,[contenteditable]:not([contenteditable="false"]){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
img{-webkit-user-drag:none}

/* Individual replacement projectile artwork, with smooth scaling. */
.projectile{background-size:100% 100%;background-position:center;image-rendering:auto}
.projectile-arrow{background-image:url("assets/effects/projectile-01-674.png")}
.projectile-bolt{background-image:url("assets/effects/projectile-02-674.png")}
.projectile-arcane{background-image:url("assets/effects/projectile-03-674.png")}
.projectile-fire{background-image:url("assets/effects/projectile-04-674.png")}
.projectile-heal-single{background-image:url("assets/effects/projectile-05-674.png")}
.projectile-heal-group{background-image:url("assets/effects/projectile-06-674.png")}
.projectile-holy{background-image:url("assets/effects/projectile-07-674.png")}
.projectile-enemy-arrow{background-image:url("assets/effects/projectile-08-674.png")}
.projectile-enemy-magic{background-image:url("assets/effects/projectile-09-674.png")}
.projectile-wind-seed{background-image:url("assets/effects/projectile-05-674.png");background-position:center}
.projectile-wind-magic{background-image:url("assets/effects/projectile-09-674.png");background-position:center}


.eria-volley-arrow{width:36px;height:36px;z-index:360;transform-origin:50% 50%;filter:drop-shadow(0 0 2px #fff3b899)}

/* Skill name ribbon: clean ivory face and a slanted navy edge. */
.skill-cutscene-nameplate{position:absolute;left:0;top:70%;width:56%;padding:calc(var(--cut-width)*.018) calc(var(--cut-width)*.052) calc(var(--cut-width)*.02) calc(var(--cut-width)*.035);box-sizing:border-box;color:#17273d;isolation:isolate}
.skill-cutscene-nameplate::before,.skill-cutscene-nameplate::after{content:'';position:absolute;inset:0;clip-path:polygon(0 0,100% 0,89% 100%,0 100%);z-index:-1}
.skill-cutscene-nameplate::before{background:#17273d;transform:translate(4px,3px)}
.skill-cutscene-nameplate::after{background:linear-gradient(110deg,#fffdf5,#f2eee4)}
.skill-cutscene-namecopy{border-left:1px solid #24364d;padding-left:calc(var(--cut-width)*.025)}
.skill-cutscene-namecopy strong{display:block;white-space:nowrap;font-family:'Batang','Noto Serif KR',serif;font-style:italic;font-weight:700;font-size:calc(var(--cut-width)*.055);line-height:1.25;letter-spacing:-.045em;text-shadow:none;-webkit-text-stroke:0}
.skill-cutscene-namecopy small{display:block;margin-top:calc(var(--cut-width)*.006);font-family:Georgia,serif;font-style:italic;font-size:calc(var(--cut-width)*.016);letter-spacing:.20em;line-height:1.4;white-space:nowrap}

/* Name ribbon arrives after the portrait, then leaves on its own beat. */
.skill-cutscene-nameplate{animation:skillNameRibbon 1.1s linear both;will-change:transform,opacity}
.skill-cutscene-namecopy{animation:skillNameCopy 1s linear both}
@keyframes skillNameRibbon{
 0%,9.09%{opacity:0;transform:translateX(-110%)}
 9.09%{animation-timing-function:cubic-bezier(.16,1,.3,1)}
 28.18%{opacity:1;transform:translateX(7px);animation-timing-function:ease-out}
 37.27%{opacity:1;transform:translateX(0)}
 81.82%{opacity:1;transform:translateX(0);animation-timing-function:ease-in-out}
 100%{opacity:0;transform:translateX(0)}
}
@keyframes skillNameCopy{0%,18%{opacity:0;transform:translateX(-12px)}37%,79%{opacity:1;transform:translateX(0)}100%{opacity:1;transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.skill-cutscene-nameplate,.skill-cutscene-namecopy{animation:none}}

/* Extend the ribbon beyond the left edge through its arrival overshoot. */
.skill-cutscene-nameplate::before,.skill-cutscene-nameplate::after{left:-40px}

.title-age-notice{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;color:#30343a;text-align:center}
.title-age-notice strong{font-size:34px;font-weight:700;letter-spacing:.06em}
.title-age-notice p{margin-top:22px;font-size:17px;color:#666;line-height:1.7}
.title-age-notice span{position:absolute;bottom:16%;font-size:16px;letter-spacing:.08em;color:#888}
.title-screen.awaiting-intro .title-composition,.title-screen.awaiting-intro .title-white-reveal{visibility:hidden}
.title-screen.awaiting-intro .title-composition *,.title-screen.awaiting-intro .title-white-reveal{animation:none!important}

.company-intro img{width:36%;height:auto;object-fit:contain;opacity:0}
.company-intro img.logo-ready{animation:companyLogoReveal 1s 1s ease-in-out both}
@keyframes companyLogoReveal{from{opacity:0}to{opacity:1}}

/* Portrait skill tabs, anchored below the heart HUD. */
#battlefield>.skill-portrait-column{position:absolute;left:0;top:52px;z-index:450;display:flex;flex-direction:column;gap:6px;align-items:flex-start;pointer-events:auto}
#battlefield>.skill-portrait-column>button{position:relative;display:block;width:62px;height:46px;padding:2px 3px 2px 0;border:0;border-radius:0;background:#68788b;clip-path:polygon(0 0,89% 0,100% 25%,85% 100%,0 100%);overflow:hidden;cursor:pointer;touch-action:manipulation;transition:width .25s ease,background-color .2s;isolation:isolate}
#battlefield>.skill-portrait-column>button::before{content:'';position:absolute;inset:2px 2px 2px 0;background:#293a50;clip-path:polygon(0 0,88% 0,100% 24%,85% 100%,0 100%);z-index:-1}
#battlefield>.skill-portrait-column>button>img{width:80px;height:42px;max-width:none;object-fit:cover;object-position:58% center;display:block;pointer-events:none;opacity:.5;filter:grayscale(1);clip-path:polygon(0 0,88% 0,100% 24%,85% 100%,0 100%)}
#battlefield>.skill-portrait-column>button.ready{width:84px;background:#ffe18a}
#battlefield>.skill-portrait-column>button.ready::before{background:#ffe392}
#battlefield>.skill-portrait-column>button.ready>img{opacity:1;filter:none}
#battlefield>.skill-portrait-column>button.charging.deployed>img{opacity:.85;filter:grayscale(.35)}
#battlefield>.skill-portrait-column>button::after{content:'';position:absolute;top:2px;bottom:2px;right:0;width:var(--skill-unfilled,100%);background:#17283e88;pointer-events:none;transition:width .05s linear}
#battlefield>.skill-portrait-column>button.ready::after{display:none}
#battlefield>.skill-portrait-column .skill-button-glow{position:absolute;inset:0;pointer-events:none;opacity:0;box-shadow:inset 0 0 9px 3px #fff2a7;background:#fff0b522;z-index:2}
#battlefield>.skill-portrait-column>button.ready .skill-button-glow{animation:portraitSkillGlow .75s ease-in-out infinite}
#battlefield>.skill-portrait-column>button[hidden]{display:none}
@keyframes portraitSkillGlow{0%,100%{opacity:.15}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#battlefield>.skill-portrait-column>button{transition:none}#battlefield>.skill-portrait-column>button.ready .skill-button-glow{animation:none;opacity:.5}}

#battlefield>.skill-portrait-column{right:auto;bottom:auto;transform:none;justify-content:flex-start;width:auto}#battlefield>.skill-portrait-column>button{box-shadow:none;flex:0 0 46px}

/* Frame leads; portrait follows with a slower settling motion. */
#battlefield>.skill-portrait-column>button{transition:width .38s cubic-bezier(.16,1,.3,1),background-color .25s ease}
#battlefield>.skill-portrait-column>button>img{transform:translateX(-9px);transition:transform .52s cubic-bezier(.16,1,.3,1),opacity .3s ease,filter .3s ease;transition-delay:0s}
#battlefield>.skill-portrait-column>button.ready>img{transform:translateX(0);transition-delay:.08s}
#battlefield>.skill-portrait-column>button.ready .skill-button-glow{animation-delay:.3s}
@media(prefers-reduced-motion:reduce){#battlefield>.skill-portrait-column>button,#battlefield>.skill-portrait-column>button>img{transition:none}}

/* Keep the portrait anchored in both states; only the frame retracts. */
#battlefield>.skill-portrait-column>button>img{transform:translateX(0);transition:opacity .3s ease,filter .3s ease;transition-delay:0s}
#battlefield>.skill-portrait-column>button.ready>img{transition-delay:0s;animation:skillPortraitSettle .52s .08s cubic-bezier(.16,1,.3,1) backwards}
@keyframes skillPortraitSettle{from{transform:translateX(-5px)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){#battlefield>.skill-portrait-column>button.ready>img{animation:none}}

/* Continuous travel from the inactive position, with no keyframe reset. */
#battlefield>.skill-portrait-column>button>img{animation:none;transform:translateX(-5px);transition:transform .48s cubic-bezier(.22,.61,.36,1),opacity .3s ease,filter .3s ease;transition-delay:0s}
#battlefield>.skill-portrait-column>button.ready>img{animation:none;transform:translateX(0);transition-delay:.06s,0s,0s}
@media(prefers-reduced-motion:reduce){#battlefield>.skill-portrait-column>button>img{transition:none}}

/* Slide the complete portrait tab; keep its dimensions and crop unchanged. */
#battlefield>.skill-portrait-column>button{width:84px;transform:translateX(-22px);transition:transform .1s cubic-bezier(.42,0,1,1),background-color .3s ease}
#battlefield>.skill-portrait-column>button.ready{width:84px;transform:translateX(0)}
#battlefield>.skill-portrait-column>button>img,#battlefield>.skill-portrait-column>button.ready>img{transform:none;animation:none;transition:opacity .3s ease,filter .3s ease;transition-delay:0s}
@media(prefers-reduced-motion:reduce){#battlefield>.skill-portrait-column>button{transition:none}}

/* Override the global button press transition without losing its scale feedback. */
#battlefield>.skill-portrait-column>button{transition:transform .1s cubic-bezier(.42,0,1,1),background-color .3s ease,scale .15s ease-out!important}
@media(prefers-reduced-motion:reduce){#battlefield>.skill-portrait-column>button{transition:none!important}}

/* Right-align the chest and mirror only its artwork. */
main.game-shell>#battlefield>.idle-chest{left:auto!important;right:13px; background:none}
#idleChest>.chest-art{position:absolute;inset:0;background:url("assets/ui/idle-treasure-chest-casual.png") center/contain no-repeat;transform:scaleX(-1);pointer-events:none}

/* Evenly distribute skill portraits between the HP badge and deployment HUD. */
#battlefield>.skill-portrait-column{top:56px;bottom:auto;gap:8px;justify-content:flex-start}

/* Ready emphasis follows the portrait frame and its background, without a circular overlay. */
#battlefield>.skill-portrait-column>button>.skill-button-glow{display:none;animation:none}
#battlefield>.skill-portrait-column>button.ready{animation:portraitReadyOutline .75s ease-in-out infinite}
#battlefield>.skill-portrait-column>button.ready::before{animation:portraitReadyBackground .75s ease-in-out infinite}
@keyframes portraitReadyOutline{0%,100%{background-color:#dfb653}50%{background-color:#fff9dc}}
@keyframes portraitReadyBackground{0%,100%{background-color:#cda850}50%{background-color:#fff1b2}}
@media(prefers-reduced-motion:reduce){#battlefield>.skill-portrait-column>button.ready,#battlefield>.skill-portrait-column>button.ready::before{animation:none}}

/* Keep chest guidance anchored to its actual location on the right. */
main.game-shell>#battlefield>#idleChest.tutorial-target{z-index:4201}
.tutorial-guide[data-placement="chest"] .tutorial-card{top:var(--chest-dialogue-top);bottom:auto}
.tutorial-guide[data-placement="chest"] .tutorial-guide-hero{top:calc(var(--chest-dialogue-top) - 86px);bottom:auto}
.tutorial-guide[data-placement="chest"] .tutorial-card:after{content:'';position:absolute;top:100%;left:calc(var(--chest-pointer-x) - 10px);border:10px solid transparent;border-top-color:#d3ab52}

#serinaSkillTutorial{position:fixed;inset:0;z-index:5900;pointer-events:none}
.skill-tutorial-focus{position:absolute;border:2px solid #fff2ad;box-shadow:0 0 0 200vmax #071018aa,0 0 16px #ffde74;box-sizing:border-box}

#serinaSkillTutorial .skill-tutorial-bubble{pointer-events:auto;cursor:pointer;animation:openingFadeIn .3s ease}
#serinaSkillTutorial p{white-space:pre-line}
#serinaSkillTutorial[data-phase="dialogue"] .skill-tutorial-focus{border-color:transparent;box-shadow:0 0 0 200vmax #07101888}


/* Reuse the established guide portrait and speech bubble throughout the skill lesson. */
#serinaSkillTutorial .skill-tutorial-art{left:0;bottom:0;top:auto;object-fit:contain;object-position:left bottom;opacity:1;animation:none}
#serinaSkillTutorial .deployment-art-clip{animation:none}
#serinaSkillTutorial[data-phase="dialogue"] .deployment-next{opacity:1;animation:openingArrowBob 1s infinite}
#serinaSkillTutorial[data-phase="action"] .deployment-next{opacity:0}
@media(pointer:coarse) and (max-width:900px){#serinaSkillTutorial .deployment-bubble p{margin-right:0;line-height:1.4}}

/* Only the action step cuts a portrait-shaped opening in the dimmer. */
.skill-tutorial-shade{position:absolute;inset:0;background:#071018aa;pointer-events:none}
#serinaSkillTutorial .skill-tutorial-focus{box-shadow:none;border:0;pointer-events:none}
#serinaSkillTutorial[data-phase="dialogue"] .skill-tutorial-focus{display:none;box-shadow:none}
#serinaSkillTutorial[data-phase="action"] .skill-tutorial-focus{clip-path:polygon(0 0,89% 0,100% 25%,85% 100%,0 100%);box-shadow:inset 0 0 8px #fff2ad}

/* Dialogue stays unobscured; only the skill input step uses a spotlight. */
#serinaSkillTutorial[data-phase="dialogue"] .skill-tutorial-shade{opacity:0}
#serinaSkillTutorial[data-phase="action"] .deployment-art-clip{display:none}
#serinaSkillTutorial[data-phase="action"] .skill-tutorial-bubble{pointer-events:none}

/* Fade spotlight dimming without changing dialogue visibility. */
#serinaSkillTutorial .skill-tutorial-shade{transition:opacity .25s ease-in-out}
#serinaSkillTutorial[data-phase="action"] .skill-tutorial-shade{opacity:1}
.deployment-focus{transition:box-shadow .35s ease,background-color .25s ease-in-out}
@media(prefers-reduced-motion:reduce){#serinaSkillTutorial .skill-tutorial-shade,.deployment-focus{transition:none}}

/* Dialogue highlights the full battlefield, dimming only the surrounding UI. */
#serinaSkillTutorial[data-phase="dialogue"] .skill-tutorial-shade{opacity:1;animation:skillTutorialShadeIn .25s ease-in-out}
#serinaSkillTutorial[data-phase="dialogue"] .skill-tutorial-focus{display:block;border:2px solid #ffe071;border-radius:12px;animation:deploymentBattleOutline .75s ease-in-out infinite}
@keyframes skillTutorialShadeIn{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){#serinaSkillTutorial[data-phase="dialogue"] .skill-tutorial-focus,#serinaSkillTutorial[data-phase="dialogue"] .skill-tutorial-shade{animation:none}}

/* Reuse the original tutorial's rounded focus and outer shadow for dialogue. */
#serinaSkillTutorial[data-phase="dialogue"] .skill-tutorial-shade{display:none}
#serinaSkillTutorial[data-phase="action"] .skill-tutorial-shade{display:block}
#serinaSkillTutorial[data-phase="dialogue"] .deployment-focus{display:block;border:0;border-radius:12px;box-shadow:0 0 0 200vmax #000b;animation:none;pointer-events:none}
#serinaSkillTutorial[data-phase="dialogue"] .deployment-focus:after{content:'';position:absolute;inset:0;border:2px solid #ffe071;border-radius:12px;pointer-events:none;animation:deploymentBattleOutline .75s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#serinaSkillTutorial[data-phase="dialogue"] .deployment-focus:after{animation:none}}

#serinaSkillTutorial[data-phase="dialogue"]:not(.text-ready) .deployment-next{opacity:0;animation:none}

#serinaSkillTutorial .skill-tutorial-bubble{animation:none}

/* Prevent browser selection and touch highlight on all game surfaces, including the title. */
html,body,body *{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body input,body textarea,body [contenteditable]:not([contenteditable="false"]){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}
body img{-webkit-user-drag:none}

#battlefield>.skill-portrait-column>button:not(.ready),#battlefield>.skill-portrait-column>button:not(.ready)::before{animation:none}

/* Raise the outline only; keep the dimming shadow behind the portrait. */
#serinaSkillTutorial .deployment-focus{z-index:auto}
#serinaSkillTutorial .deployment-focus:after{z-index:20}

#chestTutorial{position:fixed;inset:0;z-index:6000;pointer-events:none}
#chestTutorial .deployment-focus{border-radius:12px;pointer-events:none;z-index:auto}
#chestTutorial .deployment-focus:after{content:'';position:absolute;inset:0;border:2px solid #ffe071;border-radius:12px;z-index:20;animation:deploymentBattleOutline .75s ease-in-out infinite;pointer-events:none}
#chestTutorial .deployment-bubble{pointer-events:none}
@media(prefers-reduced-motion:reduce){#chestTutorial .deployment-focus:after{animation:none}}

#chestTutorial.text-ready[data-mode="explain"] .deployment-next{opacity:1;animation:openingArrowBob 1s infinite}
@media(prefers-reduced-motion:reduce){#chestTutorial .deployment-next{animation:none!important}}

#chestTutorial[data-mode="action"] .deployment-art-clip{display:none}
#chestTutorial .deployment-guide{width:auto;max-width:none;animation:none}

/* Inventory-style idle rewards, with fixed controls and a scrollable slot tray. */
.idle-reward-dialog{display:flex;flex-direction:column;box-sizing:border-box;width:min(430px,100%);max-height:75dvh;border:3px solid #8e7445;background:#202528;box-shadow:0 15px 45px #000c,inset 0 0 0 2px #3c3327}
.idle-reward-dialog>p{display:none}
.idle-reward-dialog>h2{padding-bottom:10px;border-bottom:1px solid #5d503b;font-size:20px}
.idle-reward-dialog .idle-summary{display:flex;justify-content:center}
.idle-reward-dialog .idle-summary span{display:flex;align-items:center;gap:7px;padding:6px 16px;background:#151a1d;border:0}
.idle-summary img{width:25px;height:25px;object-fit:contain}.idle-summary b{margin:0;font-size:18px}
#idleItemList{flex:1 1 auto;min-height:0;height:190px;max-height:190px;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:min-content;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;-webkit-overflow-scrolling:touch;scrollbar-width:none;cursor:grab;background:#151a1d;border-radius:8px;padding:8px}
#idleItemList::-webkit-scrollbar{display:none}#idleItemList .bag-slot{aspect-ratio:1;height:auto;min-height:0}#idleItemList img{pointer-events:none} .idle-reward-actions{flex-shrink:0}

.idle-reward-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 10px;flex-shrink:0}
.idle-reward-stats .idle-time,.idle-reward-stats .idle-summary{display:flex;align-items:center;justify-content:center;min-width:0;margin:0;padding:8px 4px;border:1px solid #414746;border-radius:8px;background:#191f22}
.idle-reward-stats .idle-summary span{padding:0;background:transparent}
#idleItemList .bag-slot:not(.filled){background:#262d31;border-color:#394145;box-shadow:inset 0 1px 2px #0003}

#idleRewardModal #closeIdleReward{box-shadow:inset 0 1px 0 #ffffff0d,0 1px 1px #0003!important}
body:has(#chestTutorial[data-step="2"]) #idleRewardModal{z-index:6001;background:transparent;pointer-events:none}
body:has(#chestTutorial[data-step="2"]) #idleRewardModal .idle-reward-dialog{pointer-events:auto}



/* Keep the original tutorial outline and bubble above the reward dialog. */
#chestTutorial[data-step="2"]{z-index:6002}
#chestTutorial[data-step="2"] .deployment-focus{box-shadow:none}
#chestTutorial .deployment-bubble{z-index:30}
body:has(#chestTutorial[data-step="2"]) #idleRewardModal{background:#10171dcc}

/* Reward dialogue highlights no button until the action instruction begins. */
#chestTutorial[data-step="2"][data-instruction="false"] .deployment-focus:after{display:none}

#deploymentTutorial[data-lisette] .deployment-focus:after{z-index:20}
#deploymentTutorial[data-lisette] .deployment-guide{animation:none;max-width:none;transition:filter .45s}
#deploymentTutorial[data-lisette][data-reveal="silhouette"] .deployment-guide{filter:brightness(0);opacity:.88}
.lisette-name{position:absolute;right:7%;top:12%;color:#fff3d7;text-shadow:0 2px 6px #301424;display:flex;flex-direction:column;align-items:center;animation:openingFadeIn .5s}
.lisette-name[hidden]{display:none}.lisette-name small{font-size:16px;letter-spacing:4px}.lisette-name b{font-size:42px;letter-spacing:8px}.lisette-name em{font-size:12px;letter-spacing:6px}

#deploymentTutorial[data-lisette][data-reveal="silhouette"] .deployment-guide{filter:none;opacity:1}
#deploymentTutorial[data-lisette] .lisette-art-shade{filter:brightness(0)!important;mask-image:linear-gradient(to bottom,#000 0%,#000 18%,#000e 36%,#0007 64%,transparent 94%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 18%,#000e 36%,#0007 64%,transparent 94%);pointer-events:none}
#deploymentTutorial[data-lisette] .lisette-art-shade[hidden]{display:none}

.lisette-introduction{--character-dialogue-veil-color:#49152e;--character-dialogue-veil-opacity:.9}

.lisette-introduction .opening-copy>.lisette-epithet{position:absolute;left:0;bottom:100%;margin:0 0 1.2cqh;font-size:3cqw;line-height:1.4;letter-spacing:.16em}

main.game-shell>#battlefield .enemy-lisette.boss-position-preview,main.game-shell>#battlefield .enemy-lisette.boss-position-preview .enemy-sprite{width:96px;height:96px}
main.game-shell>#battlefield .enemy-lisette .enemy-sprite{scale:-1 1}

main.game-shell>#battlefield .enemy-lisette.boss-position-preview .enemy-sprite{animation:heroRestBreath .62s ease-in-out infinite;transform-origin:50% 100%;scale:-1 1}
@media(prefers-reduced-motion:reduce){main.game-shell>#battlefield .enemy-lisette.boss-position-preview .enemy-sprite{animation:none}}

.lisette-escape-smoke{position:absolute;width:0;height:0;z-index:550;pointer-events:none}.lisette-escape-smoke i{position:absolute;display:block;border-radius:50%;background:radial-gradient(circle at 42% 40%,#552333 0%,#32131f 48%,#190b12 65%,#190b1200 76%);filter:blur(2px);will-change:transform,opacity}
.lisette-chapter-transition{position:fixed;inset:0;z-index:6800;background:#111b22;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;color:#f7e6bc;pointer-events:all}.lisette-chapter-transition small{font-size:20px;letter-spacing:5px}.lisette-chapter-transition strong{font-size:34px;letter-spacing:6px}

#deploymentTutorial[data-lisette] .lisette-dialogue-ground{position:absolute;pointer-events:none;background:linear-gradient(to top,#000b 0%,#0008 32%,#0003 70%,#0000 100%);border-radius:0 0 12px 12px;animation:none;transition:none}

.lisette-boss-clear{position:absolute;inset:35% 0 auto;text-align:center;z-index:600;color:#ffe4aa;font:bold 36px Georgia,serif;letter-spacing:5px;text-shadow:0 3px 6px #35172a;pointer-events:none}



.garden-journey{background:#000;z-index:6700;--character-dialogue-veil-color:#16233d;--character-dialogue-veil-opacity:.9}.garden-journey .journey-art{position:absolute;top:0;left:-10%;width:120%;height:134%;object-fit:cover;object-position:50% 0;pointer-events:none}.garden-journey .opening-lines p{white-space:pre-line;animation:none;opacity:1}.garden-journey .opening-copy{opacity:1}.garden-journey .opening-footer{opacity:1}

.garden-area{z-index:6900;background:#000;color:#e2ead8;text-align:center;cursor:default;font-family:'Batang','Noto Serif KR',serif}.garden-area-heading{position:absolute;top:29%;left:8%;right:8%}.garden-area-kicker{display:flex;align-items:center;justify-content:center;gap:3cqw;font-family:Georgia,serif;font-size:3.5cqw;letter-spacing:.15em}.garden-area-kicker svg{width:20%;height:5cqw;color:#9ca98e}.garden-area-kicker svg:last-child{transform:scaleX(-1)}.garden-area h2{margin:3cqh 0 2cqh;font-family:'Batang','Noto Serif KR',serif;font-size:9cqw;font-weight:700;letter-spacing:-.045em;line-height:1.3;text-shadow:0 0 18px #b2d19028}.garden-area-rule{display:flex;align-items:center;gap:2cqw;color:#9ca98e;font-size:2cqw}.garden-area-rule:before,.garden-area-rule:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,#9ca98e)}.garden-area-rule:after{transform:scaleX(-1)}.garden-area-heading p{margin-top:2cqh;font-size:3.6cqw;line-height:1.8;letter-spacing:.04em;color:#bec7b7}.garden-area-next{position:absolute;left:25%;bottom:10%;width:50%;border:0;background:transparent;color:#e2ead8;font-family:Georgia,serif;font-size:4cqw;letter-spacing:.25em;padding:2cqh 0;cursor:pointer}.garden-area-next span{display:block;margin-top:1.2cqh;color:#89947f;font-size:2cqw;letter-spacing:.1em}.garden-area-next:disabled{opacity:.4}.garden-area-next:focus-visible{outline:1px solid #b8c7a9;outline-offset:4px}

.garden-area button.garden-area-next,.garden-area button.garden-area-next:active{scale:1!important;transform:none!important;translate:none!important;transition:none!important}

#gardenAreaNext,#gardenAreaNext:active,#gardenAreaNext:disabled{scale:1!important;transform:none!important;translate:none!important;transition:none!important;opacity:1;-webkit-tap-highlight-color:transparent}

/* Area card composition matches the supplied reference. */
.garden-area-heading{top:20.7%;left:14.5%;right:14.5%}
.garden-area-kicker{font-size:3.3cqw;letter-spacing:.16em;color:#e2ead8}
.garden-area h2{margin:1.2cqh 0 2.8cqh;font-size:9cqw;font-weight:400;letter-spacing:-.045em;text-shadow:none}
.garden-area-rule{gap:2cqw;font-size:1.8cqw;color:#929a82}
.garden-area-heading p{margin-top:2.5cqh;font-size:3.4cqw;line-height:1.9;letter-spacing:.09em;color:#d7dfcb}
.garden-area-next{bottom:14.4%;font-size:3.8cqw;font-weight:700;letter-spacing:.2em;padding:1.4cqh 0}

/* Enlarge battlefield units while preserving boss scale and ground anchors. */
main.game-shell>#battlefield .hero,main.game-shell>#battlefield .enemy:not(.midboss):not(.elite):not(.boss-position-preview){scale:calc(var(--combat-unit-scale,1)*1.1)}

#battlefield .enemy:is(.enemy-capitalSoldier,.enemy-capitalArcher){width:58px;height:58px}
#battlefield .enemy:is(.enemy-capitalSoldier,.enemy-capitalArcher) .enemy-sprite{left:0;bottom:0;width:58px;height:58px;max-width:none;object-fit:contain;transform:none;transform-origin:50% 100%;animation:heroRestBreath .62s ease-in-out infinite}
#battlefield .enemy:is(.enemy-capitalSoldier,.enemy-capitalArcher).is-moving .enemy-sprite{animation:heroTravelBounce .62s ease-in-out infinite}
#battlefield .enemy-capitalSoldier.attacking{animation:capitalMeleeAttack .22s ease-out}
#battlefield .enemy-capitalArcher.attacking{animation:enemyAttackSway .32s ease}
#battlefield .enemy:is(.enemy-capitalSoldier,.enemy-capitalArcher).hit{animation:hitShake .25s ease}
@keyframes capitalMeleeAttack{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(calc(-50% + 3px)) rotate(5deg)}58%{transform:translateX(calc(-50% - 12px)) rotate(-9deg)}78%{transform:translateX(calc(-50% - 7px)) rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){#battlefield .enemy:is(.enemy-capitalSoldier,.enemy-capitalArcher) .enemy-sprite{animation:none!important}}

#battlefield .enemy.enemy-capitalSoldier,#battlefield .enemy.enemy-capitalSoldier .enemy-sprite{width:46px;height:46px}
#battlefield .enemy.enemy-capitalArcher,#battlefield .enemy.enemy-capitalArcher .enemy-sprite{width:43px;height:43px}

/* Temporary controls sit over the top of the main banner. */
.game-shell .main-event-carousel>.header-battle-tools{position:absolute;top:0;left:0;right:0;z-index:5;height:27px;padding:2px 6px;pointer-events:none}
.lisette-entry-scene{background:#17080d;z-index:6600}
.lisette-entry-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;visibility:hidden}
.lisette-entry-title{position:absolute;left:-10%;top:calc(44% - 10px);width:120%;height:auto;opacity:0;pointer-events:none}
.lisette-entry-scene .title-touch{top:auto;bottom:4%;width:47%;padding:0;border:0;background:none;box-shadow:none;opacity:0;animation:none;cursor:pointer;outline:none}
.lisette-entry-scene .title-touch img{filter:brightness(0) invert(1)}
.lisette-entry-flash{position:absolute;inset:0;background:white;opacity:0;pointer-events:none}
/* Adventure recovery controls share the warm gold button palette. */
.adventure-grow-button,.growth-hunt-challenge{border:1px solid #ecd189;border-radius:10px;background:#b78a32;color:#fff8e7;font:700 14px 'Malgun Gothic',sans-serif;padding:12px 22px;box-shadow:0 3px 8px #0004;cursor:pointer}
.adventure-grow-button{position:absolute;left:50%;transform:translateX(-50%);bottom:30px;z-index:3;white-space:nowrap}
.growth-hunt-challenge{position:absolute;right:16px;bottom:180px;z-index:40;padding:9px 14px;font-size:12px}
.growth-hunt-challenge:disabled{background:#484640;border-color:#8b8066;color:#d0c9b8;cursor:default}
.growth-hunt-challenge[hidden]{display:none}
.adventure-grow-button:focus-visible,.growth-hunt-challenge:focus-visible{outline:2px solid #fff0a8;outline-offset:3px}
/* Recovery action sits in the center of the deployment HUD. */
main.game-shell>#battlefield>.dungeon-failure-overlay .adventure-grow-button{position:absolute;left:50%;bottom:155px;width:150px;max-width:44%;height:36px;padding:0 8px;display:flex;align-items:center;justify-content:center;background:#3a3121!important;border:1px solid #8f7138!important;border-radius:9px!important;box-shadow:none;transform:translateX(-50%)}
main.game-shell>#battlefield>.dungeon-failure-overlay .adventure-grow-button>span{color:#f2cf75!important;font-size:14px;font-weight:700;-webkit-text-stroke:0;text-shadow:none}
main.game-shell>#battlefield>.dungeon-failure-overlay:has(.adventure-grow-button)>.dungeon-failure-copy{top:auto;bottom:207px}


.adventure-retry-count{display:inline-block;min-width:3ch;text-align:left;font-variant-numeric:tabular-nums}
main.game-shell>#battlefield>.dungeon-failure-overlay .adventure-grow-button{animation:adventureRecoveryEnter .4s .85s both}
@keyframes adventureRecoveryEnter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){main.game-shell>#battlefield>.dungeon-failure-overlay .adventure-grow-button{animation:none}}
/* Challenge shares the recovery anchor and the dungeon running arrow treatment. */
main.game-shell>#battlefield>.growth-hunt-challenge{left:50%;right:auto;bottom:155px;width:150px;max-width:44%;height:36px;padding:0 8px;transform:translateX(-50%);z-index:10000;isolation:isolate;overflow:visible;border:2px solid #245b32;border-radius:9px;background:#449b55;color:#fff;font-size:14px;font-weight:700;box-shadow:none}
.growth-hunt-challenge::before{content:'';position:absolute;inset:0;border-radius:7px;z-index:-1;pointer-events:none;background:#c6ffb0;opacity:.24;-webkit-mask:url('assets/ui/dungeon-wide-arrow.svg') 0 center/78px 88px repeat-x;mask:url('assets/ui/dungeon-wide-arrow.svg') 0 center/78px 88px repeat-x;animation:dungeonActionFlow 1.8s linear infinite}
.growth-hunt-challenge::after{content:'';position:absolute;inset:-2px;border:2px solid #ffe071;border-radius:10px;pointer-events:none;animation:deploymentBattleOutline .75s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.growth-hunt-challenge::before,.growth-hunt-challenge::after{animation:none}}
/* Lift the battle result artwork while preserving copy and action placement. */
main.game-shell>#battlefield>.dungeon-start-banner>img{top:-25px}
main.game-shell>#battlefield>.dungeon-start-banner>.dungeon-start-sparks{top:-25px;bottom:25px}
main.game-shell>#battlefield>.dungeon-failure-overlay>img{top:calc(var(--battle-effect-center) - 25px)}
/* Keep battle notifications below the heart and stage HUD. */
main.game-shell>#battlefield>#banner{top:70px}
/* Summon feature uses the hero information scene's 1080 × 842 canvas. */
main.game-shell.summon-mode>.controls{padding:0!important;overflow-y:auto}
main.game-shell [data-panel="summon"]{padding:0}
.summon-lisette-feature{position:relative;width:100%;height:calc(842 * var(--hu));flex:0 0 auto;overflow:hidden;margin:0;border-bottom:6px solid #f2c789;background:#290b12 url('assets/ui/summon-lisette-bg-2290.png') center/100% 100% no-repeat}
.summon-lisette-title{position:absolute;left:0;bottom:calc(34 * var(--hu));width:58.52%;height:auto;pointer-events:none}
.summon-lisette-feature p{position:absolute;left:calc(40 * var(--hu));bottom:calc(64 * var(--hu));width:calc(592 * var(--hu));margin:0;color:#fff0c6;font-family:'Batang','Noto Serif KR',serif;font-size:calc(30 * var(--hu));font-weight:700;line-height:1.3;letter-spacing:.03em;text-align:center;white-space:nowrap;text-shadow:0 2px 4px #260407}
main.game-shell [data-panel="summon"]>.summon-carousel{margin-top:12px}
/* Three separate rounded fills stay beneath the supplied ornamental frame. */
.summon-art-tabs{position:relative;width:88.6%;aspect-ratio:957/125;margin:calc(20 * var(--hu)) auto calc(28 * var(--hu));flex:0 0 auto}
.summon-art-tab-fills{position:absolute;inset:16% 3.85% 19.2%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.summon-art-tab-fills button{position:relative;min-width:0;width:100%;height:100%;border:0;border-radius:999px;padding:0;display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--hu));background:url('assets/ui/summon-tab-base-1006.png') center/100% 100% no-repeat;color:#605b4d;font:400 calc(23.4 * var(--hu))/1 'Malgun Gothic',sans-serif;letter-spacing:.1em;overflow:hidden;cursor:pointer;box-shadow:none}
.summon-art-tab-fills button.selected{background-image:url('assets/ui/summon-tab-selected-1006.png');color:#fff7e2}
.summon-art-tab-fills button img{width:calc(26 * var(--hu));height:calc(26 * var(--hu));object-fit:contain;filter:grayscale(1);opacity:.65}
.summon-art-tab-fills button.selected img{filter:none;opacity:1}
.summon-art-tab-fills button:disabled{cursor:default}
.summon-art-tab-fills button:focus-visible{outline:2px solid #d6a842;outline-offset:-4px}
.summon-art-tab-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
main.game-shell [data-panel="summon"]>.summon-carousel{display:none}

.summon-art-tab-fills button{border-radius:calc(36 * var(--hu))}
/* Keep fills sealed beneath the frame; press only the label and icon. */
main.game-shell .summon-art-tabs .summon-art-tab-fills button,main.game-shell .summon-art-tabs .summon-art-tab-fills button:not(:disabled):not([aria-disabled="true"]):not([inert] *):active{scale:1!important;transform:none!important;translate:none!important}
.summon-art-tab-fills button>span,.summon-art-tab-fills button>img{transition:translate .12s ease}
.summon-art-tab-fills button:not(:disabled):active>span,.summon-art-tab-fills button:not(:disabled):active>img{translate:0 1px}
@media(prefers-reduced-motion:reduce){.summon-art-tab-fills button>span,.summon-art-tab-fills button>img{transition:none}}
/* Optical centering within the gold frame's inner opening. */
.summon-art-tab-fills button>span,.summon-art-tab-fills button>img{position:relative;top:calc(-2 * var(--hu))}
/* Supplied summon cards: a flat five-by-two layout with original reveal behavior. */
main.game-shell [data-panel="summon"] #heroCollection{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,auto);width:82.4%;height:auto;min-height:0;gap:calc(40 * var(--hu)) calc(40 * var(--hu));margin:calc(30 * var(--hu)) auto 0;padding:0;overflow:visible;align-items:start}
main.game-shell [data-panel="summon"] #heroCollection .summon-card{width:100%;max-width:none;height:auto;min-height:0;aspect-ratio:135/195;transform:none!important;translate:none!important;margin:0;padding:calc(12 * var(--hu)) calc(6 * var(--hu));border:0;border-radius:0;background:transparent url('assets/ui/summon-card-front-1011.png') center/100% 100% no-repeat;box-shadow:none}
main.game-shell [data-panel="summon"] #heroCollection .summon-card.card-back{background-image:url('assets/ui/summon-card-back-1011.png')}
#heroCollection .summon-card.card-back>*,#heroCollection .summon-card.card-back::before,#heroCollection .summon-card.card-back::after{display:none}
main.game-shell #heroCollection .summon-card.revealed>.summon-card-cover{inset:0;border:0;border-radius:0;background:transparent url('assets/ui/summon-card-back-1011.png') center/100% 100% no-repeat;box-shadow:none}
#heroCollection .summon-card-cover>*,#heroCollection .summon-card-cover::before{display:none}
main.game-shell [data-panel="summon"] #heroCollection.single-result{grid-template-columns:repeat(5,minmax(0,1fr));min-height:calc(420 * var(--hu))}
main.game-shell #heroCollection.single-result .summon-card{grid-column:3;align-self:center}
main.game-shell [data-panel="summon"]>.gacha-box{width:70%;margin:calc(30 * var(--hu)) auto calc(40 * var(--hu));padding:0;border:0;background:none}
main.game-shell [data-panel="summon"] .summon-actions{gap:calc(32 * var(--hu));margin-top:calc(18 * var(--hu))}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton){height:auto;aspect-ratio:362/108;border:0!important;border-radius:0!important;background:transparent url('assets/ui/summon-button-blue-1011.png') center/100% 100% no-repeat!important;box-shadow:none!important;color:#fff7dc!important;font-size:calc(30 * var(--hu));padding:0!important}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions #gachaButton{background-image:url('assets/ui/summon-button-gold-1011.png')!important;color:#624833!important}
main.game-shell [data-panel="summon"] #heroCollection{flex:0 0 auto;align-content:start}
/* Reference layout: guarantee at the banner's upper right, actions above navigation. */
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee{position:absolute;top:calc(24 * var(--hu));right:calc(28 * var(--hu));margin:0;padding:6px 10px;border:0;border-radius:8px;background:#250d18b3;color:#fff0c6;font-size:calc(22 * var(--hu));line-height:1.4;z-index:2}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee b{color:#ffdc79}
main.game-shell.summon-mode>.controls{display:flex;flex:1;min-height:0}
main.game-shell .mobile-panel[data-panel="summon"].active{display:flex;flex-direction:column;min-height:100%;width:100%}
main.game-shell [data-panel="summon"]>.gacha-box{flex:0 0 auto;margin-top:auto;margin-bottom:calc(42 * var(--hu));padding-top:calc(28 * var(--hu))}
main.game-shell [data-panel="summon"] .summon-actions{margin-top:0}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee strong{color:#fff0c6;font-size:inherit}
/* Decorative sigil follows the card grid center without affecting layout or input. */
main.game-shell [data-panel="summon"] #heroCollection{position:relative;isolation:isolate}

/* Share free vertical space equally above and below the complete card grid. */
main.game-shell [data-panel="summon"] #heroCollection{margin-top:auto;margin-bottom:auto}
main.game-shell [data-panel="summon"]>.summon-art-tabs{margin-bottom:0}
main.game-shell [data-panel="summon"]>.gacha-box{margin-top:0;padding-top:0}
/* Center against the horizontal frame edge (80.8%), excluding its lower ornament. */
main.game-shell [data-panel="summon"]>.summon-art-tabs{margin-bottom:calc(-24 * var(--hu))}
/* Ticket wallet matches the shared gold and diamond metrics. */
main.game-shell>header .battle-header-wallet .header-summon-ticket-wallet{width:calc(120 * var(--hu))!important;min-width:calc(120 * var(--hu))!important;height:calc(43 * var(--hu))!important;padding:0 calc(14 * var(--hu)) 0 calc(40 * var(--hu))!important;border-radius:calc(24 * var(--hu));background:#2c405e}
main.game-shell>header .battle-header-wallet .header-summon-ticket-wallet img{width:calc(52 * var(--hu))!important;height:calc(52 * var(--hu))!important;left:calc(-7 * var(--hu))!important;top:50%;transform:translateY(-50%);object-fit:contain;image-rendering:auto}
.summon-cost-icon,.summon-ticket-wallet img{transform:none;image-rendering:auto;filter:none}
/* Align tab labels and icons by their shared visual center. */
.summon-art-tab-fills button>span{display:flex;align-items:center;height:calc(28 * var(--hu));line-height:1;top:0}
.summon-art-tab-fills button>img{display:block;top:0}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton){font-size:calc(28 * var(--hu))!important;color:#fff!important}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton) :is(b,span,small){font-size:inherit!important;color:#fff!important}
/* Match the visible star center to the Korean glyphs, not just their line boxes. */
.summon-art-tab-fills button>img{top:calc(-2 * var(--hu))}
/* Emphasize only the selected tab icon without shifting the label. */
.summon-art-tab-fills button.selected>img{scale:1.3}

/* Slightly smaller hero portraits in summon results. */
#heroCollection .summon-card.hero-result .collection-portrait img{width:57.6px;height:57.6px}
/* Revealed equipment keeps its gold artwork with a rarity-colored outer rim. */
#heroCollection .equipment-result.common{--rarity-rgb:105 115 125}
#heroCollection .equipment-result.uncommon{--rarity-rgb:35 150 70}
#heroCollection .equipment-result.rare{--rarity-rgb:35 112 220}
#heroCollection .equipment-result.epic{--rarity-rgb:141 57 206}
#heroCollection .equipment-result.legendary{--rarity-rgb:218 148 16}
main.game-shell [data-panel="summon"] #heroCollection .summon-card.revealed.equipment-result{border-radius:calc(12 * var(--hu));animation:summonRarityRim .3s ease-out both;animation-delay:calc(var(--reveal-delay,0ms) + 230ms)}
@keyframes summonRarityRim{from{box-shadow:0 0 0 0 rgb(var(--rarity-rgb)/0)}to{box-shadow:inset 0 0 0 calc(5 * var(--hu)) rgb(var(--rarity-rgb)),0 0 calc(18 * var(--hu)) rgb(var(--rarity-rgb)/.24)}}
@media(prefers-reduced-motion:reduce){main.game-shell [data-panel="summon"] #heroCollection .summon-card.revealed.equipment-result{animation-duration:.01ms;animation-delay:0ms}}

/* Draw revealed card fronts directly, with the rarity rim inside the card. */
main.game-shell [data-panel="summon"] #heroCollection .summon-card.revealed{background:#faf6e5;border-radius:calc(12 * var(--hu));box-shadow:inset 0 0 0 calc(3 * var(--hu)) #b8ab8b}
/* Show the complete two-tone rarity front as soon as its cover flips. */
main.game-shell [data-panel="summon"] #heroCollection .summon-card.revealed.equipment-result{animation:none;background:linear-gradient(rgb(var(--rarity-rgb)/.16),rgb(var(--rarity-rgb)/.16)),#faf6e5;box-shadow:inset 0 0 0 calc(5 * var(--hu)) rgb(var(--rarity-rgb)),0 0 calc(18 * var(--hu)) rgb(var(--rarity-rgb)/.24)}
/* Flip the whole card, switching its face only at the narrow midpoint. */
main.game-shell [data-panel="summon"] #heroCollection .summon-card.revealed:is(.equipment-result,.hero-result){animation:summonWholeCardFlip .34s ease-in-out both;animation-delay:var(--reveal-delay,0ms)}
main.game-shell #heroCollection .summon-card.revealed>.summon-card-cover{animation:summonCoverSwitch .34s steps(1,end) both;animation-delay:var(--reveal-delay,0ms);transform:none}
main.game-shell #heroCollection .summon-card.revealed>:not(.summon-card-cover){animation:summonFrontSwitch .34s steps(1,end) both;animation-delay:var(--reveal-delay,0ms)}
@keyframes summonWholeCardFlip{0%{scale:1 1}50%{scale:.015 1}100%{scale:1 1}}
@keyframes summonCoverSwitch{0%{opacity:1;visibility:visible}50%,100%{opacity:0;visibility:hidden}}
@keyframes summonFrontSwitch{0%{opacity:0}50%,100%{opacity:1}}
@media(prefers-reduced-motion:reduce){main.game-shell [data-panel="summon"] #heroCollection .summon-card.revealed:is(.equipment-result,.hero-result),main.game-shell #heroCollection .summon-card.revealed>*{animation-duration:.01ms;animation-delay:0ms}}
/* Extend summon actions to the card grid; stretch only the artwork center. */
main.game-shell [data-panel="summon"]>.gacha-box{width:82.4%}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton){aspect-ratio:auto;height:calc(108 * var(--hu));border:calc(26 * var(--hu)) solid transparent!important;border-image-source:url('assets/ui/summon-button-blue-1011.png');border-image-slice:26 fill;border-image-width:1;border-image-repeat:stretch;background:none!important;box-sizing:border-box}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions #gachaButton{border-image-source:url('assets/ui/summon-button-gold-1011.png');background-image:none!important}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton){border-image:url('assets/ui/summon-button-blue-1011.png') 26 fill / 1 / 0 stretch!important}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions #gachaButton{border-image-source:url('assets/ui/summon-button-gold-1011.png')!important}
/* Keep action placement and draw buttons in front of the foliage. */
main.game-shell [data-panel="summon"]>.gacha-box{margin-bottom:calc(42 * var(--hu));position:relative;z-index:26}
/* Limited banner heading above the guarantee count. */
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee{text-align:right}
.summon-limited-heading{display:block;margin-bottom:calc(8 * var(--hu));font-size:calc(24 * var(--hu));font-weight:700;color:#fff0c6;white-space:nowrap}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee{display:flex;flex-direction:column;align-items:flex-end;gap:0}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee{background:none}
/* Clear hierarchy for the limited summon banner details. */
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee{gap:calc(8 * var(--hu));text-shadow:0 1px 3px #23070c}
main.game-shell .summon-limited-heading{margin:0;font-size:calc(30 * var(--hu));letter-spacing:.08em;color:#ffe1a0;font-weight:800}
main.game-shell .summon-open-notice{font-size:calc(22 * var(--hu));color:#fff1dc;font-weight:400;line-height:1.4}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee strong{font-size:calc(20 * var(--hu));font-weight:400;color:#dfcbbb}
/* Text-only limited banner composition inspired by the supplied reference. */
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee{top:calc(25 * var(--hu));right:calc(28 * var(--hu));width:calc(330 * var(--hu));padding:0;align-items:center;gap:0;text-align:center;color:#fff0ce;text-shadow:0 2px 4px #210a04,0 0 8px #b7763938}
.summon-limited-kicker{font:600 calc(19 * var(--hu))/1.5 Georgia,serif;letter-spacing:.25em;color:#dfc68d}
main.game-shell .summon-limited-heading{font-family:'Batang','Noto Serif KR',serif;font-size:calc(58 * var(--hu));font-weight:700;letter-spacing:.03em;line-height:1.3;color:#fff0d0}
main.game-shell .summon-open-notice{font-size:calc(24 * var(--hu));margin-top:calc(5 * var(--hu));color:#e5d8c5}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee strong{display:block;width:86%;position:relative;margin-top:calc(15 * var(--hu));padding-top:calc(14 * var(--hu));border-top:1px solid #c9a86588;font-weight:400;color:#f5e4bf}
.summon-pity-caption{display:block;font-size:calc(23 * var(--hu));line-height:1.3}
.summon-pity-number{display:block;font-family:'Batang',Georgia,serif;font-size:calc(43 * var(--hu));line-height:1.05}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee .summon-pity-number b{font:400 calc(88 * var(--hu))/1.05 Georgia,serif;color:#fff0cc;margin-right:calc(5 * var(--hu))}
.summon-guarantee strong::after{content:'─ ◇ ─';display:block;margin-top:calc(7 * var(--hu));font-size:calc(23 * var(--hu));line-height:1;color:#d5b772}
/* A translucent pill behind the opening condition, without the divider below. */
main.game-shell .summon-open-notice{padding:calc(6 * var(--hu)) calc(18 * var(--hu));border-radius:999px;background:rgba(25,10,14,.58)}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee strong{border-top:0}
/* Tighten guarantee copy and remove its lower ornament. */
.summon-pity-number{margin-top:calc(-8 * var(--hu) - 2px)}
.summon-guarantee strong::after{display:none}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee strong{margin-top:calc(15 * var(--hu) - 4px)}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee{right:calc(28 * var(--hu) - 6px)}
/* Lower only the three upper banner labels. */
.summon-guarantee>.summon-limited-kicker,.summon-guarantee>.summon-limited-heading,.summon-guarantee>.summon-open-notice{position:relative;top:3px}
/* A short staggered arrival when entering the summon screen. */
@keyframes summonPanelArrive{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes summonInfoArrive{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
@keyframes summonContentArrive{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
.summon-enter>.summon-lisette-feature{animation:none}
.summon-enter .summon-lisette-title{animation:summonPanelArrive .4s .08s ease-out both}
.summon-enter .summon-guarantee{animation:summonInfoArrive .4s .12s ease-out both}
.summon-page-enter>.summon-art-tabs{animation:summonContentArrive .32s .08s ease-out both}
.summon-page-enter>#heroCollection{animation:summonContentArrive .36s .14s ease-out both}
.summon-page-enter>.gacha-box{animation:summonContentArrive .36s .2s ease-out both}
@media(prefers-reduced-motion:reduce){.summon-enter>*,.summon-enter .summon-lisette-title,.summon-enter .summon-guarantee{animation:none!important}}
/* Rotate the summon sigil slowly around its own center. */
main.game-shell [data-panel="summon"] #heroCollection::before{transform-origin:50% 50%;animation:summonSigilRotate 90s linear infinite}
@keyframes summonSigilRotate{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(prefers-reduced-motion:reduce){main.game-shell [data-panel="summon"] #heroCollection::before{animation:none}}
/* Shared stretchable rail and undistorted selected-tab artwork. */
main.game-shell [data-panel="summon"]>.summon-art-tabs{width:82.4%;height:calc(97 * var(--hu));aspect-ratio:auto;margin-top:calc(32 * var(--hu));margin-bottom:0}
.summon-art-tabs::before{content:'';position:absolute;inset:0 0 auto;height:calc(82 * var(--hu));box-sizing:border-box;border-style:solid;border-color:transparent;border-width:0 calc(55 * var(--hu));border-image:url('assets/ui/summon-tab-bg-1066.png') 0 55 fill / 0 calc(55 * var(--hu)) / 0 stretch;pointer-events:none}
.summon-art-tab-frame{display:none}
.summon-art-tab-fills{inset:0;overflow:visible}
.summon-art-tab-fills button{height:calc(82 * var(--hu));border-radius:0;background:none;overflow:visible;isolation:isolate}
.summon-art-tab-fills button.selected{background:none}
.summon-art-tab-fills button.selected::before{content:'';position:absolute;z-index:-1;left:50%;top:0;width:calc(354 * var(--hu));height:calc(97 * var(--hu));transform:translateX(-50%);background:url('assets/ui/summon-tab-selected-1066.png') center/100% 100% no-repeat;pointer-events:none}
.summon-art-tab-fills{grid-template-columns:calc(354 * var(--hu)) minmax(0,1fr) minmax(0,1fr)}
/* Give all three tabs identical hit areas and shared content centers. */
.summon-art-tab-fills{grid-template-columns:repeat(3,minmax(0,1fr))}
.summon-art-tab-fills button.selected::before{width:100%;height:auto;aspect-ratio:354/97;top:50%;transform:translate(-50%,-42.27%)}
/* Fixed-size selected art: left edge, center, and right edge anchors. */
.summon-art-tab-fills{display:block}
.summon-art-tab-fills button{position:absolute;top:0;width:calc(354 * var(--hu));height:calc(82 * var(--hu))}
.summon-art-tab-fills button:nth-child(1){left:0}
.summon-art-tab-fills button:nth-child(2){left:calc(50% - 177 * var(--hu))}
.summon-art-tab-fills button:nth-child(3){right:0}
.summon-art-tab-fills button.selected{z-index:1}
.summon-art-tab-fills button.selected::before{left:0;top:0;width:100%;height:calc(97 * var(--hu));aspect-ratio:auto;transform:none}
/* Equal outer spacing, then center the cards between the rail and actions. */
main.game-shell [data-panel="summon"]>.summon-art-tabs{margin-top:calc(42 * var(--hu));margin-bottom:calc(-15 * var(--hu))}
main.game-shell [data-panel="summon"]>.gacha-box{margin-bottom:calc(42 * var(--hu))}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton){min-height:0}.summon-art-tab-fills button{min-height:0}
/* Subtle rail glow and divider between the two right-hand tabs. */
.summon-art-tabs::before{filter:none}
.summon-art-tabs::after{content:'';position:absolute;left:calc(75% - 88.5 * var(--hu));top:calc(30 * var(--hu));height:calc(22 * var(--hu));width:1px;background:rgba(115,113,108,.25);pointer-events:none;z-index:0}
.summon-art-tab-fills{z-index:1}
/* Show shop illustration edges without rounded clipping. */
.game-shell.shop-mode .shop-scene{border-radius:0;mask:none;-webkit-mask:none;clip-path:none}
.game-shell.shop-mode .shop-scene{margin-left:0;margin-right:0}
/* Result presentation: dark backdrop, staggered card opening and a brief flash. */
.summon-result-scene{position:fixed;inset:0;z-index:25000;background:rgba(0,0,0,.87);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;padding:24px;animation:summonResultShade .2s ease-out}
.summon-result-grid{width:min(88vw,480px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px 12px}
.summon-result-grid.single{width:130px;grid-template-columns:1fr}
.summon-result-entry{position:relative;min-width:0;aspect-ratio:135/195;animation:summonResultOpen .44s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--delay)}
.summon-result-scene .summon-card{width:100%;max-width:none;height:100%;min-height:0;margin:0;border:2px solid #cdb778;border-radius:8px;background:#faf6e5;box-shadow:0 0 16px #dfc48c30;transform:none!important;translate:none!important;animation:none!important;overflow:hidden;display:flex;align-items:center;justify-content:center}
.summon-result-scene .summon-card>*{animation:none!important}
.summon-result-scene .equipment-result{background:linear-gradient(rgb(var(--rarity-rgb)/.16),rgb(var(--rarity-rgb)/.16)),#faf6e5;border-color:rgb(var(--rarity-rgb));box-shadow:0 0 18px rgb(var(--rarity-rgb)/.3)}
.summon-result-scene .common{--rarity-rgb:105 115 125}.summon-result-scene .uncommon{--rarity-rgb:35 150 70}.summon-result-scene .rare{--rarity-rgb:35 112 220}.summon-result-scene .epic{--rarity-rgb:141 57 206}.summon-result-scene .legendary{--rarity-rgb:218 148 16}
.summon-result-scene .collection-portrait,.summon-result-scene .summon-equipment-icon{width:85%;height:auto}
.summon-result-scene .collection-portrait img,.summon-result-scene .equipment-icon{width:100%;max-width:85px;height:auto;object-fit:contain}
.summon-result-entry::after{content:'';position:absolute;inset:-3px;border-radius:9px;background:#fff8dd;box-shadow:0 0 30px #ffe3a1;pointer-events:none;animation:summonResultFlash .44s ease-out both;animation-delay:var(--delay)}
.summon-result-close{width:150px;min-height:42px;border:1px solid #bba16b;border-radius:8px;background:#342b1d;color:#ffedc4;font:700 15px 'Malgun Gothic',sans-serif;cursor:pointer}.summon-result-close:disabled{opacity:0;pointer-events:none}
@keyframes summonResultShade{from{opacity:0}to{opacity:1}}
@keyframes summonResultOpen{0%{opacity:0;transform:scaleX(.04) scaleY(.9)}45%{opacity:1;transform:scaleX(1.04) scaleY(1.04)}100%{opacity:1;transform:scale(1)}}
@keyframes summonResultFlash{0%{opacity:0}30%{opacity:.9}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.summon-result-scene,.summon-result-entry{animation:none}.summon-result-entry::after{display:none}}
/* Flash bridges the final card reveal into the dark result scene. */
.summon-result-transition-flash{position:fixed;inset:0;z-index:25001;background:#fff9eb;pointer-events:none;animation:summonResultTransitionFlash .38s ease-out both}
@keyframes summonResultTransitionFlash{0%{opacity:0}16%{opacity:.95}36%{opacity:.8}100%{opacity:0}}
/* Supplied artwork is exclusive to the result overlay. */
.summon-result-grid{position:relative;z-index:2;width:min(96vw,540px);gap:12px 0}
.summon-result-grid.single{width:min(42vw,180px)}
.summon-result-entry{aspect-ratio:229/305}
.summon-result-scene .summon-card{position:relative;border:0;border-radius:0;background:var(--result-art) center/100% 100% no-repeat;box-shadow:none;overflow:visible;isolation:isolate}
.summon-result-scene .summon-card .collection-portrait,.summon-result-scene .summon-card .summon-equipment-icon{position:relative;z-index:2;width:65%;height:auto}
.summon-result-scene .summon-card>.summon-result-rays{position:absolute;left:50%;top:50%;width:140%;height:auto;z-index:1;pointer-events:none;animation:resultRaysSpin 18s linear infinite!important;transform-origin:center;opacity:.8}
@keyframes resultRaysSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.summon-result-entry::after{inset:10% 12%;border-radius:8px}
.summon-result-magic{position:absolute;z-index:0;left:50%;top:75%;width:min(90vw,490px);transform:translate(-50%,-50%);pointer-events:none}
.summon-result-circle{position:relative;display:block;width:100%;height:auto;z-index:1}
.summon-result-magic-light{position:absolute;z-index:0;left:12%;bottom:40%;width:76%;height:auto;animation:resultMagicBreathe 3.6s ease-in-out infinite}
@keyframes resultMagicBreathe{0%,100%{opacity:.4}50%{opacity:.85}}
.summon-result-close{position:absolute;z-index:3;bottom:10%;width:min(42vw,206px);height:auto;aspect-ratio:414/116;min-height:0;border:0;border-radius:0;background:url('assets/ui/result-confirm-1080.png') center/100% 100% no-repeat;color:#fff;font-size:18px;box-shadow:none}
@media(prefers-reduced-motion:reduce){.summon-result-scene .summon-card>.summon-result-rays{animation:none!important;transform:translate(-50%,-50%)}.summon-result-magic-light{animation:none;opacity:.65}}
.summon-result-scene .summon-result-entry>.summon-card.revealed{border:0;border-radius:0;background:var(--result-art) center/100% 100% no-repeat;box-shadow:none}
/* Tighten result spacing while retaining card artwork size. */
.summon-result-grid:not(.single){width:min(88vw,480px);row-gap:4px}
.summon-result-grid:not(.single) .summon-result-entry{width:calc(100% + 10px);margin-left:-5px}
.summon-result-scene.closing{animation:summonResultFadeOut .28s ease-in both;pointer-events:none}
.summon-result-scene.closing .summon-result-close:disabled{opacity:1}
@keyframes summonResultFadeOut{from{opacity:1}to{opacity:0}}
/* Raise the result display while keeping confirmation on the summon action row. */
.summon-result-grid{top:-30px}
.summon-result-magic{top:calc(75% - 40px)}
/* Smaller, slightly raised hero portraits with their owned star count. */
.summon-result-scene .summon-card.hero-result .collection-portrait{width:58.5%;translate:0 -6px}
.summon-result-scene .summon-result-stars{position:absolute;z-index:3;left:12%;right:12%;bottom:16%;display:flex;justify-content:center;white-space:nowrap;font-size:clamp(9px,2.5vw,14px);line-height:1;color:#ffda57;text-shadow:0 1px 2px #50320f;letter-spacing:-1px}
.summon-result-scene .summon-result-stars{gap:0;align-items:center}
.summon-result-scene .summon-result-stars img{width:19%;max-width:18px;height:auto;object-fit:contain;filter:drop-shadow(0 1px 1px #50320f66)}
/* Space rows for labels and let the summoning circle bloom into view. */
.summon-result-grid:not(.single){row-gap:30px}
.summon-result-name{position:absolute;left:0;right:0;top:calc(100% - 3px);text-align:center;color:#fff0d5;font:700 12px/1.4 'Malgun Gothic',sans-serif;text-shadow:0 1px 3px #000;white-space:nowrap}
.summon-result-magic{animation:resultMagicEnter .65s .08s cubic-bezier(.16,1,.3,1) both}
@keyframes resultMagicEnter{from{opacity:0;transform:translate(-50%,-35%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.summon-result-magic{animation:none}}
/* Flash each card once, immediately after its opening completes. */
.summon-result-entry::after{background:#fff;box-shadow:0 0 22px #ffffffaa;animation:summonResultFlash .24s ease-out both;animation-delay:calc(var(--delay) + 440ms)}
@keyframes summonResultFlash{0%{opacity:0}15%{opacity:.95}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.summon-result-entry::after{display:none}}
.summon-result-entry{isolation:isolate}.summon-result-entry::after{z-index:10}
/* Start after the scene transition, with the flash at the opening beat. */
.summon-result-entry::after{animation-delay:calc(var(--delay) + 130ms)}
@keyframes resultMagicEnter{from{opacity:0}to{opacity:1}}
/* Rarity sparkles follow the visible card rim after every card has opened. */
.result-rim-sparkles{position:absolute;inset:10% 13%;z-index:5;pointer-events:none}
.result-rim-sparkles i{position:absolute;width:8px;height:8px;translate:-50% -50%;opacity:0;background:#fffbe4;clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%);filter:drop-shadow(0 0 3px #fff0a1)}
.cards-open .result-rim-sparkles i{animation:resultRimTwinkle 2.4s ease-in-out infinite;animation-delay:var(--spark-delay)}
@keyframes resultRimTwinkle{0%,65%,100%{opacity:0;scale:.35}25%{opacity:1;scale:1.25}42%{opacity:.4;scale:.8}}
@media(prefers-reduced-motion:reduce){.cards-open .result-rim-sparkles i{animation:none}}
/* Varied rim stars spin quickly, ease to a stop, then fade away. */
.result-rim-sparkles i{width:var(--spark-size,8px);height:var(--spark-size,8px)}
.cards-open .result-rim-sparkles i{animation:resultRimTwinkle var(--spark-duration,2.4s) linear infinite;animation-delay:var(--spark-delay)}
@keyframes resultRimTwinkle{0%{opacity:0;scale:.3;rotate:0deg;animation-timing-function:cubic-bezier(.16,1,.3,1)}12%{opacity:1;scale:1.2;rotate:calc(var(--spark-turn) * .6);animation-timing-function:ease-out}48%{opacity:.6;scale:.85;rotate:calc(var(--spark-turn) * .95);animation-timing-function:ease-out}70%,100%{opacity:0;scale:.3;rotate:var(--spark-turn)}}
@media(prefers-reduced-motion:reduce){.cards-open .result-rim-sparkles i{animation:none}}
/* Each card starts its own scattered rim sparkle sequence when it finishes opening. */
.result-rim-sparkles i{margin-left:var(--spark-offset-x,0px);margin-top:var(--spark-offset-y,0px)}
.summon-result-scene .result-rim-sparkles i{animation:resultRimTwinkle var(--spark-duration,2.4s) linear infinite;animation-delay:var(--spark-delay);animation-fill-mode:both}
@media(prefers-reduced-motion:reduce){.summon-result-scene .result-rim-sparkles i{animation:none}}
/* Result heading follows the top edge of the card group. */
.summon-result-heading{position:absolute;left:50%;transform:translate(-50%,-100%);z-index:3;width:min(78vw,420px);text-align:center;color:#f7e7bc;pointer-events:none;animation:summonResultShade .3s ease-out both}
.summon-result-heading>img{display:block;width:42%;max-width:160px;height:auto;margin:0 auto -3px}
.summon-result-heading h2{margin:0;font:400 clamp(22px,7.5vw,44px)/1.15 Georgia,'Times New Roman',serif;white-space:nowrap;letter-spacing:.015em;text-shadow:0 2px 3px #000,0 0 6px #b58b4940}
.summon-result-heading p{margin:8px 0 0;padding-top:7px;border-top:1px solid #d3c19b80;font:700 clamp(9px,2.2vw,12px)/1.5 'Batang','Noto Serif KR',serif;letter-spacing:.07em;color:#dccdaf;white-space:nowrap}
.summon-result-heading h2{display:inline-block}
.summon-result-heading{animation:none}
.summon-result-heading>img{animation:resultHeadingAppear .4s .1s both ease-out}
.summon-result-heading h2{animation:resultHeadingAppear .4s .17s both ease-out}
.summon-result-heading p{animation:resultHeadingAppear .4s .24s both ease-out}
@keyframes resultHeadingAppear{from{opacity:0;translate:0 7px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.summon-result-heading>*{animation:none!important}}
.summon-result-close.entering{animation:resultConfirmEnter .35s ease-out both}
@keyframes resultConfirmEnter{from{opacity:0;translate:0 9px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.summon-result-close.entering{animation:none}}
/* Hidden tutorial dimmers must not flash back above the summon sequence. */
#deploymentTutorial[hidden]{display:none!important}
/* Switch spotlight coverage atomically: never crossfade two dark masks. */
#deploymentTutorial[data-recruit="eria"] .deployment-focus{transition:none}
#deploymentTutorial[data-recruit="eria"].summon-guidance[data-mode="explain"] .deployment-focus{background:#000b}
/* General summon banner shares the limited banner dimensions and typography. */
.summon-general-copy,.summon-general-quote{display:none}
.summon-lisette-feature.is-general{background-image:url('assets/ui/summon-general-bg-1118.png')}
.summon-lisette-feature.is-general>.summon-lisette-title,.summon-lisette-feature.is-general>p,.summon-lisette-feature.is-general>.summon-guarantee{display:none!important}
.summon-lisette-feature.is-general>.summon-general-copy{display:flex;position:absolute;left:calc(24 * var(--hu));bottom:calc(48 * var(--hu));width:calc(400 * var(--hu));flex-direction:column;align-items:center;text-align:center;color:#172f59}
.summon-general-copy>img{width:72%;height:auto;margin-bottom:calc(-20 * var(--hu))}
.summon-general-copy>small{font:700 calc(20 * var(--hu))/1.4 Georgia,serif;letter-spacing:.3em}
.summon-general-copy>h2{margin:calc(6 * var(--hu)) 0 calc(18 * var(--hu));font:700 calc(86 * var(--hu))/1.15 'Batang','Noto Serif KR',serif;white-space:nowrap;letter-spacing:-.04em;text-shadow:0 2px 0 #faf7e9}
.summon-general-copy>.summon-open-notice{position:static;color:#fff1dc}
.summon-general-copy>strong{display:block;margin-top:calc(14 * var(--hu));font-weight:400;color:#263958}
.summon-general-copy .summon-pity-number b{font:400 calc(88 * var(--hu))/1.05 Georgia,serif;margin-right:calc(5 * var(--hu))}
.summon-lisette-feature.is-general>.summon-general-quote{display:block;position:absolute;right:calc(30 * var(--hu));top:calc(68 * var(--hu));white-space:pre-line;font:700 calc(27 * var(--hu))/1.55 'Batang','Noto Serif KR',serif;color:#24385e;text-shadow:0 1px 2px #fff9}
main.game-shell [data-panel="summon"] .summon-general-copy .summon-pity-number b{font:400 calc(88 * var(--hu))/1.05 Georgia,serif!important;margin-right:calc(5 * var(--hu))}.summon-general-copy .summon-pity-number{font-size:calc(43 * var(--hu))}
.summon-general-copy>small{position:relative;top:-11px}
.summon-general-copy>small{word-spacing:calc(24 * var(--hu))}
.summon-general-copy>img{filter:drop-shadow(0 0 3px rgba(35,26,17,.35))}
.summon-general-copy>h2{position:relative;top:-8px;text-shadow:none}
/* Slim blue availability pill tucked beneath the general summon title. */
main.game-shell .summon-general-copy>h2{margin-bottom:0}
main.game-shell .summon-general-copy>.summon-open-notice{margin-top:calc(-8 * var(--hu));padding:calc(2 * var(--hu)) calc(24 * var(--hu));line-height:1.25;background:rgba(31,58,111,.8);color:#f2f3ff}
main.game-shell .summon-general-copy>.summon-open-notice{width:calc(100% - 8 * var(--hu));box-sizing:border-box;text-align:center}
main.game-shell .summon-general-copy>.summon-open-notice{width:calc(354 * var(--hu))}
.summon-lisette-feature.is-general>.summon-general-quote{-webkit-text-stroke:0;text-shadow:none}
.summon-lisette-feature.is-general>.summon-general-quote{top:calc(68 * var(--hu))}
.general-enter>.summon-general-copy{animation:summonPanelArrive .4s ease-out both}
.general-enter>.summon-general-quote{animation:summonInfoArrive .32s ease-out both}
@media(prefers-reduced-motion:reduce){.general-enter>.summon-general-copy,.general-enter>.summon-general-quote{animation:none}}
/* Blur only the background art; copy stays crisp above it. */
.summon-lisette-feature{background-image:none;--summon-banner-art:url('assets/ui/summon-lisette-bg-2290.png')}
.summon-lisette-feature.is-general{background-image:none;--summon-banner-art:url('assets/ui/summon-general-bg-1118.png')}
.summon-lisette-feature::before{content:'';position:absolute;inset:0;background:var(--summon-banner-art) center/100% 100% no-repeat;pointer-events:none;z-index:0}
.summon-enter>.summon-lisette-feature:not(.is-general)::before,.summon-lisette-feature.general-enter::before{animation:summonBannerFocus .7s ease-out both}
@keyframes summonBannerFocus{from{filter:blur(8px)}to{filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.summon-lisette-feature::before{animation:none!important}}
/* Use distinct animation names so switching banners always restarts focus. */
.summon-lisette-feature.is-general.general-enter::before{animation-name:summonGeneralBannerFocus}
@keyframes summonGeneralBannerFocus{from{filter:blur(8px)}to{filter:blur(0)}}
/* A single fixed design canvas keeps the entire result composition in proportion. */
.summon-result-stage{position:absolute;left:50%;top:50%;width:540px;height:960px;transform:translate(-50%,-50%) scale(var(--result-scale,1));transform-origin:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
.summon-result-stage .summon-result-grid:not(.single){width:475.2px}
.summon-result-stage .summon-result-grid.single{width:180px}
.summon-result-stage .summon-result-magic{width:486px;top:680px}
.summon-result-stage .summon-result-close{width:206px}
.summon-result-stage .summon-result-heading h2{font-size:40.5px}
.summon-result-stage .summon-result-heading p{font-size:11.88px}
/* Preserve the supplied square canvas and anchor the characters at their feet. */
img[src*="/serina-v1128-new1201-v1137.png"],img[src*="/eria-v1128-new1201-v1137.png"],img[src*="/lisette-v1128-new1201-v1137.png"]{object-fit:contain;object-position:center bottom;transform-origin:50% 100%}
.enemy:is(.enemy-lisetteAxe,.enemy-lisetteCaster,.enemy-lisetteKnight) .enemy-sprite{width:72px;height:72px;max-width:none;object-fit:contain;object-position:center bottom;transform-origin:50% 100%}
.enemy.enemy-lisetteKnight .enemy-sprite{width:90px;height:90px}
main.game-shell>#battlefield .enemy-lisette.boss-position-preview,main.game-shell>#battlefield .enemy-lisette.boss-position-preview .enemy-sprite{width:110px;height:110px}
/* Softer breathing for the larger 400px character canvases. */
#heroes .hero:not(.is-moving) .hero-sprite:is([src*="/serina-v1128-new1201-v1137.png"],[src*="/eria-v1128-new1201-v1137.png"]),main.game-shell>#battlefield .enemy-lisette.boss-position-preview .enemy-sprite{animation-name:heroLargeArtBreath;animation-duration:.85s;transform-origin:50% 100%}
@keyframes heroLargeArtBreath{0%,100%{transform:rotate(-.35deg) scale(1.015,.973)}50%{transform:rotate(.35deg) scale(.994,1.015)}}
@media(prefers-reduced-motion:reduce){#heroes .hero:not(.is-moving) .hero-sprite:is([src*="/serina-v1128-new1201-v1137.png"],[src*="/eria-v1128-new1201-v1137.png"]),main.game-shell>#battlefield .enemy-lisette.boss-position-preview .enemy-sprite{animation:none}}

/* Lisette's summoned skeletons face the allied line and animate from their feet. */
#battlefield .enemy:is(.enemy-lisetteAxe,.enemy-lisetteCaster,.enemy-lisetteKnight) .enemy-sprite{left:50%;bottom:0;translate:-50% 0;scale:-1 1;transform-origin:50% 100%;animation:heroLargeArtBreath .85s ease-in-out infinite}
#battlefield .enemy:is(.enemy-lisetteAxe,.enemy-lisetteCaster,.enemy-lisetteKnight).is-moving .enemy-sprite{animation:heroTravelBounce .62s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){#battlefield .enemy:is(.enemy-lisetteAxe,.enemy-lisetteCaster,.enemy-lisetteKnight) .enemy-sprite{animation:none;transform:none}}
/* 400px masters use 125% of the previous 320px combat display size. */
#heroes .hero .hero-sprite:is([src*="/serina-v1128-new1201-v1137.png"],[src*="/eria-v1128-new1201-v1137.png"]){width:57.5px;height:57.5px;position:absolute;left:50%;bottom:0;translate:-50% 0;transform-origin:50% 100%}
main.game-shell>#battlefield .enemy-lisette.boss-position-preview,main.game-shell>#battlefield .enemy-lisette.boss-position-preview .enemy-sprite{width:137.5px;height:137.5px}
#battlefield .enemy:is(.enemy-lisetteAxe,.enemy-lisetteCaster) .enemy-sprite{width:90px;height:90px}
#battlefield .enemy.enemy-lisetteKnight .enemy-sprite{width:112.5px;height:112.5px}
/* Summoned skeletons retain their independently tuned combat sizes. */
#battlefield .enemy:is(.enemy-lisetteAxe,.enemy-lisetteCaster) .enemy-sprite{width:72px;height:72px}
#battlefield .enemy.enemy-lisetteKnight .enemy-sprite{width:90px;height:90px}
/* All supplied 400px masters share one combat canvas; their art defines relative size. */
#battlefield{--master-unit-size:79.2px}
#battlefield .hero:has(img[src*="-v1137.png"]),#battlefield .enemy:has(img[src*="-v1137.png"]){width:var(--master-unit-size)!important;height:var(--master-unit-size)!important;scale:1}
#battlefield :is(.hero,.enemy) img:is(.hero-sprite,.enemy-sprite)[src*="-v1137.png"]{position:absolute;left:50%!important;bottom:0;width:var(--master-unit-size)!important;height:var(--master-unit-size)!important;max-width:none!important;translate:-50% 0!important;object-fit:contain;object-position:center bottom;transform-origin:50% 100%;scale:1!important}
#battlefield .enemy:is(.enemy-lisette,.enemy-lisetteAxe,.enemy-lisetteCaster,.enemy-lisetteKnight) img[src*="-v1137.png"]{scale:-1 1!important}
#heroes .hero:not(.is-moving) .hero-sprite[src*="-v1137.png"]{animation:heroLargeArtBreath .85s ease-in-out var(--hero-idle-delay,0s) infinite}
img.hero-sprite[src*="-v1137.png"],img.loadout-hero[src*="-v1137.png"]{scale:1;object-position:center bottom}
@media(prefers-reduced-motion:reduce){#heroes .hero:not(.is-moving) .hero-sprite[src*="-v1137.png"]{animation:none}}
/* Shared 400px canvas sizing in hero slots, without per-hero magnification. */
main.game-shell :is(.card,.equipment-heroes button) .portrait{display:flex;align-items:flex-end;justify-content:center}
main.game-shell :is(.card,.equipment-heroes button) .portrait img.hero-sprite[src*="-v1137.png"]{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:contain;object-position:center bottom;scale:1!important;transform:none!important;translate:none!important;margin:0!important;transform-origin:50% 100%}
main.game-shell .hero-loadout img.loadout-hero[src*="-v1137.png"]{width:157.248px!important;height:157.248px!important;scale:1!important;object-fit:contain;object-position:center bottom;left:50%;translate:-50% 0!important;transform-origin:50% 100%;animation:heroLargeArtBreath .85s ease-in-out infinite}
/* Enlarge only the deployment-slot portraits, anchored at the bottom. */
main.game-shell .card.card .portrait img.hero-sprite[src*="-v1137.png"]{scale:1.584!important;transform-origin:50% 100%}



main.game-shell .card.card .portrait img.hero-sprite[src*="-v1137.png"]{translate:0 -2px!important}

main.game-shell .card.card .portrait img.hero-sprite[src*="-v1137.png"]{filter:drop-shadow(0 1px 1px #0004)}
.deck-edit-dialog .deck-hero img[src*="-v1137.png"]{scale:1.56!important;transform:none;transform-origin:50% 100%;object-position:center bottom}
.deck-edit-dialog .deck-selected{padding:2px;border:0;border-radius:0;background:transparent;box-shadow:none}
.deck-edit-dialog .deck-selected>:is(.deck-hero,.deck-selected-empty){aspect-ratio:.88}
.deck-edit-dialog{width:min(460px,100%)}
.deck-edit-dialog .deck-selected>:is(.deck-hero,.deck-selected-empty){background:linear-gradient(145deg,#fffef6,#f8edcc);color:#50432e}

/* Match the hero roster's regular slot fill; keep the existing selection outline. */
.deck-edit-dialog .deck-selected>:is(.deck-hero,.deck-selected-empty){background:linear-gradient(#fffdf1,#f6f0d9)!important}
.deck-edit-dialog .deck-hero img[src*="-v1137.png"]{translate:0 -4px}
/* Shared hero shadow across combat, deployment, roster, and summon portraits. */
img:is(.hero-sprite,.loadout-hero)[src*="assets/normalized/"],.collection-portrait img[src*="assets/normalized/"],.deck-hero img[src*="assets/normalized/"]{filter:drop-shadow(0 1px 1px #0004)!important}
main.game-shell #equipmentHeroes button .portrait img.hero-sprite[src*="-v1137.png"]{translate:0 -30px!important}






@media(prefers-reduced-motion:reduce){main.game-shell .hero-loadout img.loadout-hero[src*="-v1137.png"]{animation:none}}
main.game-shell .hero-loadout img.loadout-hero[src*="-v1137.png"]{animation:heroLargeArtBreath .85s ease-in-out infinite!important}
@media(prefers-reduced-motion:reduce){main.game-shell .hero-loadout img.loadout-hero[src*="-v1137.png"]{animation:none!important}}
/* Centering is applied once, inside the profile breathing transform. */
main.game-shell #heroStatus .hero-loadout img.loadout-hero[src*="-v1137.png"]{left:50%;translate:none!important;transform:translateX(-50%);transform-origin:50% 100%;animation:heroInfoCenteredBreath .85s ease-in-out infinite!important}
@keyframes heroInfoCenteredBreath{0%,100%{transform:translateX(-50%) rotate(-.35deg) scale(1.015,.973)}50%{transform:translateX(-50%) rotate(.35deg) scale(.994,1.015)}}
@media(prefers-reduced-motion:reduce){main.game-shell #heroStatus .hero-loadout img.loadout-hero[src*="-v1137.png"]{animation:none!important}}
/* Summon portraits share the new 400px canvas and a consistent foot baseline. */
#heroCollection .summon-card.hero-result .collection-portrait{position:absolute;left:0;bottom:18%;width:100%;height:auto;aspect-ratio:1;display:flex;align-items:flex-end;justify-content:center}
#heroCollection .summon-card.hero-result .collection-portrait img[src*="-v1137.png"]{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center bottom;scale:1!important;translate:none;transform:none}
.summon-result-scene .summon-card.hero-result .collection-portrait{position:absolute;left:0;bottom:25%;width:100%;height:auto;aspect-ratio:1;translate:none;display:flex;align-items:flex-end;justify-content:center}
.summon-result-scene .summon-card.hero-result .collection-portrait img[src*="-v1137.png"]{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center bottom;scale:1!important;translate:none;transform:none}
.summon-result-scene .summon-card.hero-result .collection-portrait{translate:0 -9px}
/* Main summon cards: larger portraits, raised independently of the result scene. */
#heroCollection .summon-card.hero-result .collection-portrait img[src*="-v1137.png"]{scale:1.2!important;translate:0 -6px;transform-origin:50% 100%}
.summon-result-scene .summon-card.hero-result .collection-portrait img[src*="-v1137.png"]{scale:.9!important;transform-origin:50% 100%}


/* HP bars follow visible artwork, excluding transparent canvas padding. */
#battlefield :is(.hero,.enemy):has(>img[src*="/arcane-sniper-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(43.25% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/archer-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(45.75% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/capital-skeleton-archer-848-v1137.png"])>:is(.unit-hp,.hp){top:calc(48% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/capital-skeleton-soldier-848-v1137.png"])>:is(.unit-hp,.hp){top:calc(45.25% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/elemental-mage-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(41% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/eria-v1128-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(36% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/exp-dungeon-carrier-v1137.png"])>:is(.unit-hp,.hp){top:calc(41.75% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/exp-dungeon-guard-v1137.png"])>:is(.unit-hp,.hp){top:calc(47.5% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/focused-priest-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(48.75% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/gold-dungeon-carrier-v1137.png"])>:is(.unit-hp,.hp){top:calc(42.5% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/gold-dungeon-guard-v1137.png"])>:is(.unit-hp,.hp){top:calc(55% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/group-saint-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(40% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/hunter-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(44% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/lisette-seated-1169-v1137.png"])>:is(.unit-hp,.hp){top:calc(44.25% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/lisette-summon-1-1128-v1137.png"])>:is(.unit-hp,.hp){top:calc(29.75% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/lisette-summon-2-1128-v1137.png"])>:is(.unit-hp,.hp){top:calc(39.75% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/lisette-summon-3-1128-v1137.png"])>:is(.unit-hp,.hp){top:calc(45.25% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/lisette-v1128-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(38% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/paladin-v919-v1137.png"])>:is(.unit-hp,.hp){top:calc(30% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/serina-v1128-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(36.75% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/shield-guard-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(41% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/stone-dungeon-carrier-v1137.png"])>:is(.unit-hp,.hp){top:calc(40% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/stone-dungeon-guard-v1137.png"])>:is(.unit-hp,.hp){top:calc(50.25% - 7px);left:50%;width:60%;transform:translateX(-50%)}
#battlefield :is(.hero,.enemy):has(>img[src*="/warrior-new1201-v1137.png"])>:is(.unit-hp,.hp){top:calc(42.25% - 7px);left:50%;width:60%;transform:translateX(-50%)}
/* One thickness for all overhead combat health bars. */
#battlefield :is(.hero,.enemy)>:is(.unit-hp,.hp){box-sizing:border-box;height:3px!important;min-height:3px;max-height:3px;padding:0;border:1px solid #1b2024!important;box-shadow:none}
#battlefield :is(.hero,.enemy)>:is(.unit-hp,.hp)>i{display:block;height:100%;margin:0;padding:0;border:0}
#battlefield :is(.hero,.enemy)>:is(.unit-hp,.hp){height:4px!important;min-height:4px;max-height:4px;width:50%!important}

#battlefield .enemy:is(.enemy-lisetteAxe,.enemy-lisetteKnight).attacking{animation:capitalMeleeAttack .22s ease-out}
/* Lisette's boss form alone is 20% larger than the shared combat canvas. */
#battlefield .enemy-lisette.boss-position-preview{--master-unit-size:114.048px}

/* Keep the shield body, glow, and arrival flash aligned with the character. */
#battlefield .skill-protected::before,#battlefield .skill-protected::after,#battlefield .skill-protected>.shield-arrival-flash{translate:0 10px}
#battlefield .hero.lisette-ally .hero-sprite{scale:1!important}
/* Overscan the journey dialogue veil to prevent fractional-zoom edge seams. */
.garden-journey>.character-dialogue-veil{inset:0 -2px -2px}
.summon-exclusive-info{display:none}
.summon-lisette-feature.is-exclusive::before{background-image:url('assets/ui/exclusive-reference-1187.png');background-size:100% 228.03%;background-position:center 9.276%;animation:exclusiveBannerFocus .7s ease-out both}
.summon-lisette-feature.is-exclusive>:not(.summon-exclusive-info){display:none!important}
.summon-lisette-feature.is-exclusive>.summon-exclusive-info{display:block;position:absolute;left:calc(42 * var(--hu));top:calc(22 * var(--hu));width:calc(322 * var(--hu));height:calc(285 * var(--hu));padding:calc(12 * var(--hu));background:#241215;color:#fff0cc}
.summon-exclusive-info small{font:700 calc(17 * var(--hu)) Georgia,serif;letter-spacing:.12em}
.summon-exclusive-info h2{font:700 calc(43 * var(--hu))/1.5 Batang,serif;white-space:nowrap}
.summon-exclusive-info span{display:inline-block;border-radius:99px;padding:calc(6 * var(--hu)) calc(12 * var(--hu));background:#0006;font-size:calc(22 * var(--hu))}
.summon-exclusive-info p{margin-top:calc(20 * var(--hu));font-size:calc(28 * var(--hu))}
@keyframes exclusiveBannerFocus{from{filter:blur(8px)}to{filter:blur(0)}}
@media(prefers-reduced-motion:reduce){.summon-lisette-feature.is-exclusive::before{animation:none}}
.summon-exclusive-title,.summon-exclusive-quote{display:none}
.summon-lisette-feature.is-exclusive::before{background-image:url('assets/ui/exclusive-bg-1188.png');background-size:100% 100%;background-position:center}
.summon-lisette-feature.is-exclusive>.summon-exclusive-info{left:calc(52 * var(--hu));top:calc(34 * var(--hu));width:calc(340 * var(--hu));height:auto;padding:0;background:none}
.summon-exclusive-info small{font-size:calc(18 * var(--hu));letter-spacing:.15em}
.summon-exclusive-info h2{font:700 calc(48 * var(--hu))/1.4 Batang,serif}
.summon-exclusive-info>span{font-size:calc(23 * var(--hu));padding:calc(5 * var(--hu)) calc(15 * var(--hu));background:rgba(25,10,14,.58)}
.summon-exclusive-info .exclusive-pity{margin:calc(14 * var(--hu)) 0 0 calc(8 * var(--hu))}
.exclusive-pity>span{display:block;background:none;padding:0;font:700 calc(23 * var(--hu))/1.3 Batang,serif}
.exclusive-pity strong{display:block;font:400 calc(43 * var(--hu))/1 Georgia,serif}
.exclusive-pity strong b{font:400 calc(88 * var(--hu))/1.05 Georgia,serif}
.summon-lisette-feature.is-exclusive>.summon-exclusive-title{display:block!important;position:absolute;right:calc(25 * var(--hu));bottom:calc(77 * var(--hu));width:68%;height:auto;pointer-events:none}
.summon-lisette-feature.is-exclusive>.summon-exclusive-quote{display:block!important;position:absolute;right:calc(38 * var(--hu));bottom:calc(44 * var(--hu));width:65%;text-align:center;color:#fff0cc;font:700 calc(30 * var(--hu))/1.5 Batang,'Noto Serif KR',serif;white-space:nowrap}
/* Keep banner focus animations distinct when switching among all three tabs. */
.summon-lisette-feature.is-exclusive::before{animation:exclusiveBannerFocus .7s ease-out both}
@media(prefers-reduced-motion:reduce){.summon-lisette-feature.is-exclusive::before{animation:none!important}}
.summon-enter>.summon-lisette-feature.is-exclusive::before{animation:exclusiveBannerFocus .7s ease-out both}
.summon-exclusive-info .exclusive-pity>span{font-family:'Malgun Gothic',system-ui,sans-serif;font-weight:400;line-height:1.1}
.summon-exclusive-info .exclusive-pity strong{margin-top:calc(-6 * var(--hu))}
.summon-exclusive-info>small{display:block;margin:0;font:600 calc(19 * var(--hu))/1.5 Georgia,serif;letter-spacing:.25em;color:#dfc68d}
.summon-exclusive-info>h2{margin-top:0;line-height:1.3}
.summon-exclusive-info>h2{margin-top:calc(8 * var(--hu))}
.summon-lisette-feature.is-exclusive>.summon-exclusive-info{top:calc(54 * var(--hu))}
/* Exclusive banner foreground entrance; replayed whenever its tab is selected. */
.summon-lisette-feature.is-exclusive>.summon-exclusive-info{animation:exclusiveInfoEnter .45s .08s ease-out both}
.summon-lisette-feature.is-exclusive>.summon-exclusive-title{animation:exclusiveTitleEnter .5s .16s ease-out both}
.summon-lisette-feature.is-exclusive>.summon-exclusive-quote{animation:exclusiveQuoteEnter .3s .25s ease-out both}
@keyframes exclusiveInfoEnter{from{opacity:0;translate:-12px 0}to{opacity:1;translate:0 0}}
@keyframes exclusiveTitleEnter{from{opacity:0;translate:14px 0}to{opacity:1;translate:0 0}}
@keyframes exclusiveQuoteEnter{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.summon-lisette-feature.is-exclusive>:is(.summon-exclusive-info,.summon-exclusive-title,.summon-exclusive-quote){animation:none!important}}
.summon-lisette-feature.is-exclusive>.summon-exclusive-quote{bottom:calc(54 * var(--hu))}

/* Face the return direction without flipping health bars or movement animation. */
#battlefield #heroes .hero.is-returning img.hero-sprite{scale:-1 1!important}

/* HP anchors measured from the replacement 400px artwork. */
#battlefield :is(.hero,.enemy):has(>img[src*="warrior-new1201-v1137.png"])>.hp{top:calc(40.25% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="shield-guard-new1201-v1137.png"])>.hp{top:calc(41% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="archer-new1201-v1137.png"])>.hp{top:calc(41.25% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="hunter-new1201-v1137.png"])>.hp{top:calc(38.75% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="arcane-sniper-new1201-v1137.png"])>.hp{top:calc(43.75% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="elemental-mage-new1201-v1137.png"])>.hp{top:calc(40% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="focused-priest-new1201-v1137.png"])>.hp{top:calc(42.25% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="group-saint-new1201-v1137.png"])>.hp{top:calc(41% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="serina-v1128-new1201-v1137.png"])>.hp{top:calc(37.25% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="eria-v1128-new1201-v1137.png"])>.hp{top:calc(36.75% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="lisette-v1128-new1201-v1137.png"])>.hp{top:calc(39.25% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="slime-green-1201-v1137.png"])>.hp{top:calc(72.75% - 10px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="slime-blue-1201-v1137.png"])>.hp{top:calc(72.75% - 10px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="slime-pink-1201-v1137.png"])>.hp{top:calc(72.75% - 10px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="goblin-soldier-1201-v1137.png"])>.hp{top:calc(52.75% - 7px)!important}
#battlefield :is(.hero,.enemy):has(>img[src*="goblin-shaman-1201-v1137.png"])>.hp{top:calc(50% - 7px)!important}

/* Slime hop: compress, stretch on takeoff, and squash on landing. */
#battlefield .enemy:is(.enemy-slimeGreen,.enemy-slimeBlue,.enemy-slimePink) img.enemy-sprite{
 transform-origin:50% 100%;animation:slimeElasticHop .86s linear infinite!important;
}
#battlefield .enemy.enemy-slimeBlue img.enemy-sprite{animation-duration:.7s!important;animation-delay:-.23s!important}
#battlefield .enemy.enemy-slimePink img.enemy-sprite{animation-duration:1.02s!important;animation-delay:-.51s!important}
@keyframes slimeElasticHop{
 0%,100%{transform:translateY(0) scale(1,1)}
 14%{transform:translateY(0) scale(1.2,.76)}
 28%{transform:translateY(-4px) scale(.82,1.23)}
 48%{transform:translateY(-9px) scale(.94,1.08)}
 64%{transform:translateY(-5px) scale(.9,1.13)}
 78%{transform:translateY(0) scale(1.25,.72)}
 90%{transform:translateY(0) scale(.96,1.06)}
}
@media(prefers-reduced-motion:reduce){#battlefield .enemy:is(.enemy-slimeGreen,.enemy-slimeBlue,.enemy-slimePink) img.enemy-sprite{animation:none!important;transform:none}}

/* Match the sprite hop timing without stretching the health bar. */
#battlefield .enemy:is(.enemy-slimeGreen,.enemy-slimeBlue,.enemy-slimePink)>.hp{animation:slimeHealthHop .86s linear infinite!important}
#battlefield .enemy.enemy-slimeBlue>.hp{animation-duration:.7s!important;animation-delay:-.23s!important}
#battlefield .enemy.enemy-slimePink>.hp{animation-duration:1.02s!important;animation-delay:-.51s!important}
@keyframes slimeHealthHop{
 0%,14%,78%,90%,100%{translate:0 0}
 28%{translate:0 -4px}
 48%{translate:0 -9px}
 64%{translate:0 -5px}
}
@media(prefers-reduced-motion:reduce){#battlefield .enemy:is(.enemy-slimeGreen,.enemy-slimeBlue,.enemy-slimePink)>.hp{animation:none!important;translate:none}}

/* Goblins breathe at rest and use the shared grounded walk while moving. */
#battlefield .enemy:is(.enemy-goblinSoldier,.enemy-goblinShaman) img.enemy-sprite{transform-origin:50% 100%;animation:heroLargeArtBreath 1.05s ease-in-out infinite}
#battlefield .enemy.enemy-goblinShaman img.enemy-sprite{animation-duration:1.2s}
#battlefield .enemy:is(.enemy-goblinSoldier,.enemy-goblinShaman).is-moving img.enemy-sprite{animation:heroTravelBounce .62s ease-in-out infinite}
#battlefield .enemy.enemy-goblinShaman.is-moving img.enemy-sprite{animation-duration:.72s}
@media(prefers-reduced-motion:reduce){#battlefield .enemy:is(.enemy-goblinSoldier,.enemy-goblinShaman) img.enemy-sprite{animation:none!important;transform:none}}

/* Stronger spring in the goblin soldier's moving stride. */
#battlefield .enemy.enemy-goblinSoldier.is-moving img.enemy-sprite{animation-name:goblinSoldierSpring}
@keyframes goblinSoldierSpring{
 0%,100%{transform:translateY(0) rotate(-2.5deg) scale(1.04,.93)}
 25%{transform:translateY(-2px) rotate(0deg) scale(.98,1.05)}
 50%{transform:translateY(0) rotate(2.5deg) scale(1.04,.93)}
 75%{transform:translateY(-2px) rotate(0deg) scale(.98,1.05)}
}

/* Keep slime spacing; raise other overhead HP bars slightly. */
#battlefield .enemy>.hp{margin-top:-9px!important}
#battlefield .enemy:is(.enemy-slimeGreen,.enemy-slimeBlue,.enemy-slimePink)>.hp{margin-top:-6px!important}

/* Enlarge portraits only in the hero roster. */
main.game-shell #equipmentHeroes button .portrait img.hero-sprite[src*="-v1137.png"]{scale:1.08!important;transform-origin:50% 100%}

.monster-melee-impact{position:absolute;width:48px;height:48px;object-fit:contain;pointer-events:none;translate:-50% -50%;animation:monsterMeleeImpact .2s linear both}
@keyframes monsterMeleeImpact{0%{filter:drop-shadow(0 0 2px var(--impact-glow-inner,#ffb08acc)) drop-shadow(0 0 5px var(--impact-glow-outer,#ff342b99));opacity:1;transform:scale(.55)}18%{filter:drop-shadow(0 0 2px var(--impact-glow-inner,#ffb08acc)) drop-shadow(0 0 5px var(--impact-glow-outer,#ff342b99));opacity:1;transform:scale(1.05)}38%{filter:drop-shadow(0 0 2px var(--impact-glow-inner,#ffb08acc)) drop-shadow(0 0 5px var(--impact-glow-outer,#ff342b99));opacity:1;transform:scale(1.1)}65%{filter:drop-shadow(0 0 2px var(--impact-glow-inner,#ffb08acc)) drop-shadow(0 0 5px var(--impact-glow-outer,#ff342b99));opacity:.65;transform:scale(1.16)}100%{filter:drop-shadow(0 0 2px var(--impact-glow-inner,#ffb08acc)) drop-shadow(0 0 5px var(--impact-glow-outer,#ff342b99));opacity:0;transform:scale(1.25)}}

/* Additional clearance for allied hero health bars. */
#battlefield .hero>:is(.unit-hp,.hp){margin-top:-9px!important}

.arrow-hit-impact{--impact-glow-inner:#ffe5a0cc;--impact-glow-outer:#ffb00099}

/* Warrior impact uses the critical stamp rhythm, without a weapon trail. */
.monster-melee-impact.warrior-hit-stamp{animation:warriorHitStamp .32s linear both;filter:drop-shadow(0 0 2px #ffb08acc) drop-shadow(0 0 5px #ff342b99)}
@keyframes warriorHitStamp{0%{transform:scale(2.8);opacity:.3}6%{transform:scale(2.35);opacity:1}18%{transform:scale(.72);opacity:1}28%{transform:scale(1.22);opacity:1}40%{transform:scale(.96);opacity:1}50%,78%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}

/* Tint the original impact silhouette with the critical background color. */
.damage-number.critical:before{background:#bd0000;mask:url('assets/effects/impact-burst-4-1228.png') center/100% 100% no-repeat;-webkit-mask:url('assets/effects/impact-burst-4-1228.png') center/100% 100% no-repeat;transform:translate(-50%,-50%) rotate(var(--critical-burst-angle,0deg)) scale(calc(var(--critical-burst-scale,1) * 1.2))}

.hero-hit-impact{position:absolute;width:34px;height:34px;object-fit:contain;pointer-events:none;translate:-50% -50%;filter:drop-shadow(0 0 2px #ff796044);animation:heroHitSpark .14s linear both}
@keyframes heroHitSpark{0%{opacity:.9;transform:scale(.7)}22%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}



main.game-shell>.skill-slot-overlay{position:absolute;left:0!important;right:0!important;bottom:auto!important;display:block!important;pointer-events:none!important;overflow:hidden;z-index:450}
main.game-shell>.skill-slot-overlay>button{position:absolute!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:none!important;clip-path:none!important;overflow:hidden!important;transform:translateY(105%)!important;opacity:0!important;pointer-events:none!important;animation:none!important;scale:1!important;transition:transform .3s ease,opacity .2s ease!important}
main.game-shell>.skill-slot-overlay>button.ready{transform:translateY(0)!important;opacity:1!important;pointer-events:auto!important}
main.game-shell>.skill-slot-overlay>button::before,main.game-shell>.skill-slot-overlay>button::after{display:none!important}
main.game-shell>.skill-slot-overlay>button>img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:fill!important;opacity:1!important;filter:none;clip-path:none!important;transform:none!important;animation:none!important;pointer-events:none!important}
main.game-shell>.skill-slot-overlay>button>.slot-skill-art{mask:url('assets/effects/skill-slot-mask-1286.png') center/100% 100% no-repeat;-webkit-mask:url('assets/effects/skill-slot-mask-1286.png') center/100% 100% no-repeat}
main.game-shell>.skill-slot-overlay>button>.slot-skill-frame{z-index:2}
.slot-skill-cooldown{position:absolute;inset:auto 3px 4px;text-align:center;background:#1a243bd9;color:white;font:bold 11px/1.6 sans-serif;border-radius:4px;pointer-events:none;z-index:5}
.slot-skill-cooldown[hidden]{display:none}
@media(prefers-reduced-motion:reduce){main.game-shell>.skill-slot-overlay>button{transition:none!important}}

main.game-shell>.skill-slot-overlay[hidden]{display:none!important}

/* Cooling skills remain tucked below the scene, showing a muted frame crest. */
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready){transform:translateY(calc(100% - var(--skill-art-overhang,0px) - var(--skill-peek,28px)))!important;opacity:1!important;filter:grayscale(1) brightness(.55)!important}
main.game-shell>.skill-slot-overlay>button.ready{filter:none!important}

main.game-shell>.skill-slot-overlay>button>.slot-skill-backplate{z-index:0}
main.game-shell>.skill-slot-overlay>button>.slot-skill-art{z-index:1}

/* Match the tutorial outline's .75s gold-to-cream pulse, on the frame alpha only. */
main.game-shell>.skill-slot-overlay>button.ready{overflow:visible!important}
main.game-shell>.skill-slot-overlay>button.ready>.slot-skill-frame{animation:none!important;filter:none}
main.game-shell>.skill-slot-overlay>button.ready::after{content:'';display:block!important;position:absolute;inset:0;z-index:3;pointer-events:none;mask:url('assets/effects/skill-slot-frame-1286.png') center/100% 100% no-repeat;-webkit-mask:url('assets/effects/skill-slot-frame-1286.png') center/100% 100% no-repeat;animation:skillFrameTutorialTint 1.8s ease-in-out infinite}
main.game-shell>.skill-slot-overlay>button.ready>.slot-skill-frame{animation:skillFrameTutorialGlow 1.8s ease-in-out infinite!important}
@keyframes skillFrameTutorialTint{0%,100%{background:#ffd65a;opacity:0}50%{background:#fff0a8;opacity:.7}}
@keyframes skillFrameTutorialGlow{0%,100%{filter:drop-shadow(0 0 2px #fff1b250) drop-shadow(0 0 6px #ffc83f50)}50%{filter:drop-shadow(0 0 2px #fff8d980) drop-shadow(0 0 11px #ffd34e73)}}
@media(prefers-reduced-motion:reduce){main.game-shell>.skill-slot-overlay>button.ready::after{animation:none;background:#ffd65a;opacity:.3}main.game-shell>.skill-slot-overlay>button.ready>.slot-skill-frame{animation:none!important;filter:drop-shadow(0 0 8px #ffc83f99)}}

/* Ready portraits overshoot their resting position slightly, like OutBack. */
main.game-shell>.skill-slot-overlay>button.ready{transition:transform .24s cubic-bezier(.25,.8,.3,1.22),opacity .15s ease!important}
@media(prefers-reduced-motion:reduce){main.game-shell>.skill-slot-overlay>button.ready{transition:none!important}}

/* The portrait settles just after its frame, following the earlier skill UI rhythm. */
main.game-shell>.skill-slot-overlay>button>.slot-skill-art{translate:0 14px;opacity:1!important;transition:translate .22s cubic-bezier(.25,.8,.3,1.12);transition-delay:0s}
main.game-shell>.skill-slot-overlay>button.ready>.slot-skill-art{translate:0 0;opacity:1!important;transition-delay:0s}
@media(prefers-reduced-motion:reduce){main.game-shell>.skill-slot-overlay>button>.slot-skill-art{translate:none;transition:none}}

/* Restore the original skill backing plate's gold color pulse. */
main.game-shell>.skill-slot-overlay>button.ready::before{content:'';display:block!important;position:absolute;inset:0;z-index:0;pointer-events:none;mask:url('assets/effects/skill-slot-mask-1286.png') center/100% 100% no-repeat;-webkit-mask:url('assets/effects/skill-slot-mask-1286.png') center/100% 100% no-repeat;animation:portraitReadyBackground 1.8s ease-in-out infinite}
main.game-shell>.skill-slot-overlay>button.ready>.slot-skill-backplate{visibility:hidden}
@media(prefers-reduced-motion:reduce){main.game-shell>.skill-slot-overlay>button.ready::before{animation:none;background-color:#fff1b2}}

/* Retract with the same soft OutBack settling used on entry. */
main.game-shell>.skill-slot-overlay>button:not(.ready){transition:transform .24s cubic-bezier(.25,.8,.3,1.22),opacity .15s ease!important}
@media(prefers-reduced-motion:reduce){main.game-shell>.skill-slot-overlay>button:not(.ready){transition:none!important}}

/* Keep cooldown crests readable with a dark halo and dimmed artwork. */
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready){overflow:visible!important;filter:grayscale(1) brightness(.6) drop-shadow(0 0 2px #080c1666)!important}
main.game-shell>.skill-slot-overlay>button:not(.ready)>.slot-skill-art{filter:brightness(.85)}

/* The remaining cooldown shade recedes to the right across the portrait silhouette. */
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready)::after{content:'';display:block!important;position:absolute;inset:0;z-index:4;pointer-events:none;background:#080c1666;mask:url('assets/effects/skill-slot-mask-1286.png') center/100% 100% no-repeat;-webkit-mask:url('assets/effects/skill-slot-mask-1286.png') center/100% 100% no-repeat;clip-path:inset(0 0 0 calc(100% - var(--skill-unfilled,100%)));animation:none;transition:clip-path .05s linear}

/* Reveal the original gold frame from left to right as the cooldown fills. */
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready){filter:drop-shadow(0 0 2px #080c1666)!important}
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready)>.slot-skill-frame{filter:grayscale(1) brightness(.6)}
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready)>.slot-skill-art,main.game-shell>.skill-slot-overlay>button.deployed:not(.ready)>.slot-skill-backplate{filter:grayscale(1) brightness(.51)}
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready)::after{background:url('assets/effects/skill-slot-frame-1286.png') center/100% 100% no-repeat;mask:none;-webkit-mask:none;clip-path:inset(0 var(--skill-unfilled,100%) 0 0)}

/* Clip the gold fill inside a separate glow layer so its halo remains visible. */
.slot-skill-charge-glow{display:none;position:absolute;inset:0;z-index:4;pointer-events:none;filter:drop-shadow(0 0 2px #ffe49bb3) drop-shadow(0 0 4px #ffbf3666)}
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready)>.slot-skill-charge-glow{display:block}
.slot-skill-charge-glow::before{content:'';position:absolute;inset:0;background:url('assets/effects/skill-slot-frame-1286.png') center/100% 100% no-repeat;clip-path:inset(0 var(--skill-unfilled,100%) 0 0);transition:clip-path .05s linear}
main.game-shell>.skill-slot-overlay>button.deployed:not(.ready)::after{display:none!important}


/* Let the backing pulse follow the frame with a short delay. */
main.game-shell>.skill-slot-overlay>button.ready::before{animation-delay:.15s}

/* Keep the ready backing plate a steady bright gold. */
main.game-shell>.skill-slot-overlay>button.ready::before{animation:none;background-color:#493326}

.lisette-summon-smoke i{background:radial-gradient(circle at 42% 40%,#9c405b 0%,#681e36 40%,#390e21 65%,#390e2100 78%)}

/* Ground shadows stay independent of sprite squash, jumps and attack motion. */
.unit-ground-shadows{position:absolute;inset:0;z-index:4;pointer-events:none}
.unit-ground-shadows>i{position:absolute;display:block;background:#000;opacity:.24;border-radius:50%;transform:translate(-50%,50%) scaleY(.28);transform-origin:center;filter:none}

/* Lighter outlines for battlefield location and boss HUD labels. */
main.game-shell #battlefield .battle-location,main.game-shell>#battlefield>.elite-battle-hud>small,main.game-shell>#battlefield>.elite-battle-hud>em,main.game-shell>#battlefield>.elite-battle-hud>b{-webkit-text-stroke-width:1px;text-shadow:none}

/* Damage numbers use their outline without an additional text shadow. */
.damage-number{text-shadow:none}

#deploymentAutoButton{position:absolute;left:12px;top:70px;z-index:460;border:2px solid #b68c37;border-radius:8px;padding:8px 12px;background:#fff0be;color:#493622;font:bold 12px sans-serif;cursor:pointer}

/* A darker brown backing distinguishes cooldown from ready. */
main.game-shell>.skill-slot-overlay>button:not(.ready)>.slot-skill-backplate{visibility:hidden}
main.game-shell>.skill-slot-overlay>button:not(.ready)::before{content:'';display:block!important;position:absolute;inset:0;z-index:0;pointer-events:none;background:#261a13;mask:url('assets/effects/skill-slot-mask-1286.png') center/100% 100% no-repeat;-webkit-mask:url('assets/effects/skill-slot-mask-1286.png') center/100% 100% no-repeat;animation:none}

#battlefield .hero.hero-falling{pointer-events:none;transform-origin:50% 100%;animation:none!important}
#battlefield .hero.hero-falling .hero-sprite{animation:none!important}
#battlefield .hero.hero-falling .unit-hp{visibility:hidden}

/* Hero-specific skill backing colors, with darker cooldown variants. */
main.game-shell>.skill-slot-overlay>button[data-skill="9"]{--skill-backing:#3c4b59;--skill-backing-dim:#172638}
main.game-shell>.skill-slot-overlay>button[data-skill="10"]{--skill-backing:#414f43;--skill-backing-dim:#1a2c20}
main.game-shell>.skill-slot-overlay>button[data-skill="11"]{--skill-backing:#594047;--skill-backing-dim:#35171e}
main.game-shell>.skill-slot-overlay>button.ready::before{background-color:var(--skill-backing,#493326)}
main.game-shell>.skill-slot-overlay>button:not(.ready)::before{background-color:var(--skill-backing-dim,#261a13)}

/* Keep the ready frame tint pulse without its outer glow. */
main.game-shell>.skill-slot-overlay>button.ready>.slot-skill-frame{animation:none!important;filter:none!important}

/* Glow from the filled silhouette, subtracting its interior. */
.slot-skill-outer-glow{display:none;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3}
main.game-shell>.skill-slot-overlay>button.ready>.slot-skill-outer-glow{display:block;animation:skillOuterOnlyPulse 1.8s ease-in-out infinite}
@keyframes skillOuterOnlyPulse{0%,100%{opacity:.45}50%{opacity:.9}}
@media(prefers-reduced-motion:reduce){main.game-shell>.skill-slot-overlay>button.ready>.slot-skill-outer-glow{animation:none;opacity:.4}}

/* Restore the gold backing pulse, slightly trailing the frame. */
main.game-shell>.skill-slot-overlay>button.ready::before{background-color:#cda850;animation:portraitReadyBackground 1.8s ease-in-out .15s infinite}
@media(prefers-reduced-motion:reduce){main.game-shell>.skill-slot-overlay>button.ready::before{animation:none;background-color:#fff1b2}}

/* Reference HUD: icon left, area name above a slim progress bar. */
main.game-shell #battlefield>.battle-auto-hud{position:absolute;left:auto;right:0;top:calc(40 * var(--hu));width:calc(300 * var(--hu));height:calc(68 * var(--hu));padding:0;border:0;border-radius:calc(36 * var(--hu)) 0 0 calc(36 * var(--hu));background:#29425d55;color:#fff;z-index:460;cursor:pointer;transition:background-color .2s}
main.game-shell #battlefield>.battle-auto-hud.auto-on{background:#43845bc9}
.battle-auto-icon{position:absolute;left:calc(10 * var(--hu));top:calc(10 * var(--hu));width:calc(48 * var(--hu));height:calc(48 * var(--hu));border-radius:50%;background:#29425d}
.battle-auto-icon:after{content:'';position:absolute;inset:22%;background:#a6a6a6;mask:url('assets/ui/auto-1331.png') center/contain no-repeat}
.auto-on .battle-auto-icon:after{background:#a5ffad}
main.game-shell #battlefield .battle-auto-hud>.battle-location{position:absolute;left:calc(70 * var(--hu));right:0;top:calc(8 * var(--hu));height:auto;display:block;margin:0;padding:0;font-size:calc(21 * var(--hu));line-height:1.2}
.battle-auto-hud .battle-location :is(span,i,b){font-size:inherit!important;line-height:inherit;font-style:normal}
.battle-auto-hud #worldMapButton{display:none}
main.game-shell #battlefield .battle-auto-hud>.wave-panel{position:absolute;left:calc(70 * var(--hu));right:calc(14 * var(--hu));top:calc(38 * var(--hu));bottom:auto!important;width:auto;height:calc(16 * var(--hu));transform:none;margin:0;padding:0;border:0;background:none}
main.game-shell #battlefield .battle-auto-hud>.wave-panel>div{position:relative;width:100%;height:100%;border:0;border-radius:99px;overflow:hidden;background:#29425d}
.battle-auto-hud #waveBar{display:block;height:100%;background:#ffda68;border-radius:99px}
.battle-auto-hud #waveText{display:none}

.battle-auto-icon:after{inset:auto;left:50%;top:50%;width:56%;height:56%;transform:translate(-50%,-50%)}

main.game-shell #battlefield .battle-auto-hud>.battle-location{-webkit-text-stroke-width:1.5px;paint-order:stroke fill;text-shadow:none}

/* More vertical breathing room; retain the label and progress bar sizes. */
main.game-shell #battlefield>.battle-auto-hud{height:calc(78.2 * var(--hu));border-radius:calc(40 * var(--hu)) 0 0 calc(40 * var(--hu))}
.battle-auto-hud>.battle-auto-icon{top:50%;transform:translateY(-50%)}
main.game-shell #battlefield .battle-auto-hud>.battle-location{top:calc(13.1 * var(--hu))}
main.game-shell #battlefield .battle-auto-hud>.wave-panel{top:calc(43.1 * var(--hu))}

/* Match the icon circle left inset to its vertical inset: (78.2 - 48) / 2. */
.battle-auto-hud>.battle-auto-icon{left:calc(15.1 * var(--hu))}

/* Auto mode breathes with a translucent green background wash only. */
main.game-shell #battlefield>.battle-auto-hud{isolation:isolate}
main.game-shell #battlefield>.battle-auto-hud.auto-on:before{content:'';position:absolute;inset:0;border-radius:inherit;background:#a2ffad;pointer-events:none;z-index:-1;animation:autoHudGreenPulse 1.8s ease-in-out infinite}
@keyframes autoHudGreenPulse{0%,100%{opacity:0}50%{opacity:.28}}
@media(prefers-reduced-motion:reduce){main.game-shell #battlefield>.battle-auto-hud.auto-on:before{animation:none;opacity:.12}}

/* An exterior-only outline marks active auto mode without changing its layout. */
main.game-shell #battlefield>.battle-auto-hud.auto-on{outline:2px solid #a5ffad;outline-offset:0;animation:autoHudOutlinePulse 1.8s ease-in-out infinite}
@keyframes autoHudOutlinePulse{0%,100%{outline-color:#8bdf9a}50%{outline-color:#d3ffcf}}
@media(prefers-reduced-motion:reduce){main.game-shell #battlefield>.battle-auto-hud.auto-on{animation:none}}

/* Highlight only the visible slot portrait; discard the legacy side-tab mask. */
#serinaSkillTutorial[data-phase="action"] .skill-tutorial-focus{clip-path:none;box-shadow:none;border:2px solid #ffe071;border-radius:0}

#serinaSkillTutorial[data-phase="action"] .skill-tutorial-focus{border:0;border-radius:12px;animation:none}
#serinaSkillTutorial[data-phase="action"] .skill-tutorial-focus:after{content:'';position:absolute;inset:-2px;border:2px solid #ffe071;border-radius:12px;pointer-events:none;animation:questTutorialRewardFocus .75s ease-in-out infinite;transform-origin:center;z-index:20}
@media(prefers-reduced-motion:reduce){#serinaSkillTutorial[data-phase="action"] .skill-tutorial-focus:after{animation:none;box-shadow:0 0 8px 2px #ffc83f99}}

/* Expose the summon slot during Eria's guided deployment, even if she is already present. */
body:has(#deploymentTutorial[data-recruit="eria"][data-step="26"]) .skill-slot-overlay>button[data-skill="10"]{visibility:hidden!important;pointer-events:none!important}

/* Hide detached skill overlays immediately outside the battle tab. */
main.game-shell:not(:has(.mobile-panel[data-panel="battle"].active))>.skill-slot-overlay,main.game-shell:has(>.dungeon-screen:not([hidden]))>.skill-slot-overlay{display:none!important}


/* One continuous inactive shop tab strip, with fine vertical separators. */
.shop-category-tabs{gap:0;isolation:isolate}
.shop-category-tabs::before{content:'';position:absolute;inset:4px 0 0;background:#49362b;border:1px solid #785638;border-bottom:0;border-radius:11px 11px 0 0;z-index:-1;pointer-events:none}
.shop-category-tabs button{position:relative}
.shop-category-tabs button:not([aria-selected="true"]){background:transparent;border:0;border-radius:0;box-shadow:none}
.shop-category-tabs button:not([aria-selected="true"])+button:not([aria-selected="true"])::before{content:'';position:absolute;left:0;top:26%;height:48%;width:1px;background:#dbc5a340;pointer-events:none}
.shop-category-tabs button[aria-selected="true"]{z-index:1}
.shop-category-tabs button:hover:not([aria-selected="true"]){background:#ffffff0a}

/* Soft dark outer glow replaces shop tab outlines. */
.shop-category-tabs::before{border:0;box-shadow:0 0 5px 1px #160e0926}
.shop-category-tabs button,.shop-category-tabs button[aria-selected="true"]{border:0;box-shadow:none}
.shop-category-tabs button[aria-selected="true"]{box-shadow:0 0 5px 1px #160e0926}

.shop-category-tabs button[aria-selected="true"]{background:#fff9e5}

.shop-category-tabs button{display:flex;align-items:center;justify-content:center;gap:4px;padding:0 3px;font-family:'Batang','Noto Serif KR',serif;font-weight:700;line-height:1.2;white-space:nowrap}
.shop-category-tabs button>img{display:none;width:18px;height:18px;object-fit:contain;flex:0 0 18px}
.shop-category-tabs button[aria-selected="true"]>img{display:block}

/* Center each label within its own active or inactive tab area. */
.shop-category-tabs button[aria-selected="true"]{padding-top:0}
.shop-category-tabs button>img{width:14px;height:14px;flex-basis:14px}

/* Preview gold art on the current adventure battlefield only. */
main.game-shell>#battlefield[data-art-preview="gold"]{background-image:url('assets/battlefields/gold-background-1365.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat}
main.game-shell>#battlefield[data-art-preview="gold"]>.battle-foreground{display:block;inset:auto 0 0;height:auto;aspect-ratio:1080/392;background:url('assets/battlefields/gold-foreground-1373.png') center bottom/100% auto no-repeat}


main.game-shell>#battlefield[data-art-preview="library"]{background-image:url('assets/battlefields/library-background-1375.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat}
main.game-shell>#battlefield[data-art-preview="library"]>.battle-foreground{display:block;inset:auto 0 0;height:auto;aspect-ratio:1080/354;background:url('assets/battlefields/library-foreground-1375.png') center bottom/100% auto no-repeat}

main.game-shell>#battlefield[data-art-preview="forge"]{background-image:url('assets/battlefields/forge-background-1377.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat}
main.game-shell>#battlefield[data-art-preview="forge"]>.battle-foreground{display:block;inset:auto 0 0;height:auto;aspect-ratio:1080/436;background:url('assets/battlefields/forge-foreground-1380.png') center bottom/100% auto no-repeat}

main.game-shell>#battlefield[data-art-preview="garden"]{background-image:url('assets/battlefields/garden-background-1381.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat}
main.game-shell>#battlefield[data-art-preview="garden"]>.battle-foreground{display:block;inset:auto 0 0;height:auto;aspect-ratio:1080/440;background:url('assets/battlefields/garden-foreground-1383.png') center bottom/100% auto no-repeat}

/* Garden is the second adventure region. */
main.game-shell>#battlefield[data-region="1"]:not([data-art-preview]):not([data-tutorial="true"]){background-image:url('assets/battlefields/garden-background-1381.png')!important;background-size:cover!important;background-position:center center!important;background-repeat:no-repeat}
main.game-shell>#battlefield[data-region="1"]:not([data-art-preview]):not([data-tutorial="true"])>.battle-foreground{display:block;inset:auto 0 0;height:auto;aspect-ratio:1080/440;background:url('assets/battlefields/garden-foreground-1383.png') center bottom/100% auto no-repeat}

/* Stronger melee wind-up and follow-through; retain existing timings and travel. */
.hero.attacking:has(.hero-sprite[src*="/warrior-new1201-v1137.png"]),.hero.attacking:has(.hero-sprite[src*="/shield-guard-new1201-v1137.png"]){animation-name:meleeHeroAttackStrong}
@keyframes meleeHeroAttackStrong{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(calc(-50% - 3px)) rotate(-10deg)}58%{transform:translateX(calc(-50% + 12px)) rotate(15deg)}78%{transform:translateX(calc(-50% + 7px)) rotate(7deg)}}
.hero.attacking:has(.hero-sprite[src*="/serina-v1128-new1201-v1137.png"]),.hero.attacking:has(.hero-sprite[src*="/paladin-v919-v1137.png"]){animation-name:meleeHeroSwayStrong}
@keyframes meleeHeroSwayStrong{0%,100%{transform:translateX(-50%) rotate(0)}25%{transform:translateX(calc(-50% - 5px)) rotate(-12deg)}60%{transform:translateX(calc(-50% + 9px)) rotate(14deg)}}

/* Melee attacks pivot around the bottom center of the hero. */
main.game-shell>#battlefield .hero.attacking:has(.hero-sprite:is([src*="/warrior-new1201-v1137.png"],[src*="/shield-guard-new1201-v1137.png"],[src*="/serina-v1128-new1201-v1137.png"],[src*="/paladin-v919-v1137.png"])){transform-origin:50% 100%}

/* Boss art fades over the unchanged capital layers. */
.capital-boss-backdrop{position:absolute;inset:0;z-index:0;pointer-events:none;background:url('assets/battlefields/capital-boss-background-1390.png') center/cover no-repeat;opacity:0;transition:opacity 1s ease-in-out}
.battle-foreground>.capital-boss-front{position:absolute;inset:0;pointer-events:none;background:url('assets/battlefields/capital-boss-foreground-1391.png') center bottom/100% 100% no-repeat;opacity:0;transition:opacity .8s .2s ease-in-out}
#battlefield[data-capital-boss="true"].boss-art-revealed>.capital-boss-backdrop,#battlefield[data-capital-boss="true"].boss-art-revealed>.battle-foreground>.capital-boss-front{opacity:1}
#battlefield:not([data-capital-boss="true"]) .capital-boss-backdrop,#battlefield:not([data-capital-boss="true"]) .capital-boss-front{display:none}
@media(prefers-reduced-motion:reduce){.capital-boss-backdrop,.battle-foreground>.capital-boss-front{transition:none}}

.dungeon-screen.renewal-selection:not([hidden]){display:block;background:#f9f5e4}.dungeon-screen.renewal-selection>:not(.dungeon-renewal){display:none!important}.dungeon-renewal{display:none}.renewal-selection>.dungeon-renewal{height:100%;display:flex;flex-direction:column;min-height:0;--du:var(--hu);color:#432c15}.dr-banner{position:relative;flex:0 0 auto;aspect-ratio:1080/510;background:url('assets/ui/dungeon-banner-1393.png') center/cover;border-bottom:calc(10 * var(--du)) solid #f2c789;font-family:Batang,'Noto Serif KR',serif}.dr-banner>small{position:absolute;left:4.6%;top:9%;font-size:calc(22 * var(--du))}.dr-banner h2{position:absolute;left:4%;top:15%;margin:0;font-size:calc(65 * var(--du));font-weight:700}.dr-person{position:absolute;left:4%;top:31%;width:38%;border-top:1px solid #745935;display:flex;align-items:center;justify-content:flex-end;gap:calc(8 * var(--du));padding-top:calc(6 * var(--du))}.dr-person img{position:absolute;width:calc(30 * var(--du));height:calc(36 * var(--du));left:calc(-14 * var(--du));top:calc(-18 * var(--du))}.dr-person span{font-size:calc(24 * var(--du))}.dr-person b{font-size:calc(48 * var(--du))}.dr-banner p{position:absolute;left:3.5%;top:51%;margin:0;white-space:pre-line;text-align:center;font-size:calc(30 * var(--du));line-height:1.4;font-weight:700}.dr-count{position:absolute;left:5%;bottom:9%;font-family:Batang,Georgia,serif;color:#30425c}.dr-count label{display:block;font-size:calc(23 * var(--du));color:#654528}.dr-count strong{font-size:calc(78 * var(--du));line-height:1}.dr-count>span{font-size:calc(45 * var(--du));margin-left:calc(12 * var(--du))}.dr-banner.no-character{background-image:linear-gradient(90deg,#fff9e5ee,#fff9e5bb),url('assets/ui/dungeon-banner-1393.png')}.dr-tabs{display:flex;margin:0 calc(50 * var(--du));height:calc(105 * var(--du));flex-shrink:0;border-bottom:calc(4 * var(--du)) solid #dedace}.dr-tabs button{position:relative;flex:1;border:0;background:none;font:400 calc(36 * var(--du)) Batang,serif;color:#684939}.dr-tabs button.selected{font-weight:700;color:#19334a}.dr-tabs button.selected:after{content:'';position:absolute;left:0;right:0;bottom:calc(-12 * var(--du));height:calc(24 * var(--du));background:url('assets/ui/dungeon-tab-1393.png') center/100% 100% no-repeat}.dr-list{flex:1;min-height:0;overflow:auto;scrollbar-width:none;padding:calc(30 * var(--du)) calc(50 * var(--du)) calc(24 * var(--du));display:flex;flex-direction:column;gap:calc(20 * var(--du))}.dr-card{position:relative;flex:0 0 calc(218 * var(--du));width:100%;border:0;border-radius:calc(22 * var(--du));overflow:hidden;padding:calc(30 * var(--du)) calc(42 * var(--du));text-align:left;color:white;background:linear-gradient(90deg,var(--card-color) 0%,var(--card-color) 30%,transparent 65%),var(--card-art) right center/calc(680 * var(--du)) calc(283 * var(--du)) no-repeat,var(--card-color);cursor:pointer}.dr-card.selected{box-shadow:inset 0 0 0 calc(3 * var(--du)) #e7bc6b}.dr-card>small{display:block;font:calc(22 * var(--du)) Arial,sans-serif}.dr-card>strong{display:block;font:calc(52 * var(--du))/1.3 Batang,serif;white-space:nowrap}.dr-card>div{display:flex;align-items:center;gap:calc(14 * var(--du));margin-top:calc(15 * var(--du))}.dr-card img{width:calc(54 * var(--du));height:calc(54 * var(--du));object-fit:contain}.dr-card div span{font-size:calc(23 * var(--du));font-weight:700;background:#16171966;border-radius:30px;padding:calc(7 * var(--du)) calc(14 * var(--du))}.dr-empty{text-align:center;padding:30px}.dungeon-renewal footer{flex:0 0 calc(174 * var(--du));display:flex;align-items:center;justify-content:center;background:#f9f5e4}.dr-enter{width:62%;aspect-ratio:565/122;border:0;background:url('assets/ui/dungeon-enter-1393.png') center/100% 100% no-repeat;color:white;font-size:calc(46 * var(--du));font-weight:900;cursor:pointer}.dr-enter:disabled{filter:grayscale(1);opacity:.5}

/* Match the banner divider ornament to its warm brown lettering. */
.dr-person{border-top:calc(4 * var(--du)) solid #745935}
.dr-person>img{visibility:hidden}
.dr-person::before{content:'';position:absolute;width:calc(30 * var(--du));height:calc(36 * var(--du));left:calc(-14 * var(--du));top:calc(-18 * var(--du));background:#745935;mask:url('assets/ui/header-mark-851.png') center/contain no-repeat;-webkit-mask:url('assets/ui/header-mark-851.png') center/contain no-repeat;pointer-events:none}

/* Reward capsule extends behind the icon, with shared text alignment. */
.dr-card>div{position:relative;isolation:isolate;width:calc(340 * var(--du));max-width:100%;height:calc(54 * var(--du));gap:calc(14 * var(--du));margin-top:calc(15 * var(--du));overflow:visible}
.dr-card>div::before{content:'';position:absolute;z-index:-1;left:calc(27 * var(--du));right:0;top:50%;height:calc(40 * var(--du));transform:translateY(-50%);border-radius:999px;background:#16171999;pointer-events:none}
.dr-card>div>img{position:relative;flex:0 0 calc(60 * var(--du));width:calc(60 * var(--du));height:calc(60 * var(--du));object-fit:contain}
.dr-card>div>span{background:none;border-radius:0;padding:0;white-space:nowrap;line-height:1.2;font-size:calc(23 * var(--du))}

/* Tab spacing follows the 1080px reference: banner edge 610, rule 685, card 715. */
.dr-tabs{height:calc(75 * var(--du));margin:0 calc(50 * var(--du));border-bottom:calc(4 * var(--du)) solid #dedace}
.dr-tabs button{display:flex;align-items:center;justify-content:center;padding:calc(8 * var(--du)) 0 0;font-family:'Malgun Gothic',system-ui,sans-serif;font-size:calc(36 * var(--du));line-height:1.2;letter-spacing:0}
.dr-tabs button.selected::after{left:calc(14 * var(--du));right:calc(14 * var(--du));bottom:calc(-12 * var(--du));height:calc(24 * var(--du))}
.dr-list{padding-top:calc(30 * var(--du))}

/* Shared 60px side insets in the 1080px dungeon layout. */
.dr-tabs{margin-left:calc(60 * var(--du));margin-right:calc(60 * var(--du))}
.dr-list{padding-left:calc(60 * var(--du));padding-right:calc(60 * var(--du))}

/* Inset the tab baseline without moving labels or cards. */
.dr-tabs{position:relative;border-bottom-color:transparent}
.dr-tabs::before{content:"";position:absolute;left:calc(14 * var(--du));right:calc(14 * var(--du));bottom:calc(-2 * var(--du));height:calc(4 * var(--du));background:#dedace;pointer-events:none}

/* Smaller dungeon tab labels. */
.dr-tabs button{font-size:calc(32 * var(--du))}

/* Individual reward icon sizes in the 1080px layout. */
.dr-card[data-choice="stone"]>div>img{flex-basis:calc(70 * var(--du));width:calc(70 * var(--du));height:calc(70 * var(--du))}
.dr-card[data-choice="gold"]>div>img{flex-basis:calc(54 * var(--du));width:calc(54 * var(--du));height:calc(54 * var(--du))}

/* Match dungeon card English labels to header English typography. */
.dr-card>small{font-family:"Malgun Gothic",system-ui,sans-serif;font-weight:800;letter-spacing:calc(2 * var(--du))}

/* Match dungeon names to the tab font family. */
.dr-card>strong{font-family:"Malgun Gothic",system-ui,sans-serif}

/* Smaller dungeon names with slightly inset English labels. */
.dr-card>strong{font-size:calc(46 * var(--du))}
.dr-card>small{padding-left:calc(6 * var(--du))}

/* Use the tab font for banner facility and role labels. */
.dr-banner>small,.dr-person>span{font-family:"Malgun Gothic",system-ui,sans-serif}

/* Improve small banner label contrast against the bright illustration. */
.dr-banner>small,.dr-person>span{font-weight:700;color:#392613;text-shadow:0 1px 2px #fff8eccc}
.dr-banner>small{font-size:calc(25 * var(--du))}
.dr-person>span{font-size:calc(27 * var(--du))}

/* Center the cross on the 4px top border. */
.dr-person::before{top:calc(-20 * var(--du))}

/* Larger banner cross, keeping its center aligned with the divider. */
.dr-person::before{width:calc(36 * var(--du));height:calc(43.2 * var(--du));left:calc(-17 * var(--du));top:calc(-23.6 * var(--du))}

/* Align the character name with the banner title and place its role after it. */
.dr-person{justify-content:flex-start;align-items:baseline}
.dr-person>b{order:0}
.dr-person>span{order:1}

/* Stack the role above the slightly inset character name. */
.dr-person{flex-direction:column;align-items:flex-start;gap:0;padding-left:calc(10 * var(--du))}
.dr-person>span{order:0;line-height:1.2}
.dr-person>b{order:1;line-height:1.2}

/* Keep name and role on one row, aligned at the top. */
.dr-person{flex-direction:row;align-items:flex-start;gap:calc(8 * var(--du))}
.dr-person>b{order:0}
.dr-person>span{order:1}

/* Unified banner text color. */
.dr-banner,.dr-banner h2,.dr-banner p,.dr-person>span,.dr-person>b,.dr-count,.dr-count label,.dr-count strong,.dr-count>span{color:#683a05}

/* Align the visible tops of the name and its English label. */
.dr-person>b,.dr-person>span{line-height:1}
.dr-person>span{padding-top:calc(3 * var(--du))}

/* Left-align banner dialogue. */
.dr-banner p{text-align:left}

/* Use the tab font family for the banner character name. */
.dr-person>b{font-family:"Malgun Gothic",system-ui,sans-serif}

/* Smaller, lighter banner character name. */
.dr-person>b{font-size:calc(42 * var(--du));font-weight:400}

/* Increase the character name row inset. */
.dr-person{padding-left:calc(20 * var(--du))}

/* Smaller banner character name with restored bold weight. */
.dr-person>b{font-size:calc(38 * var(--du));font-weight:700}

/* Swap the vertical placement of remaining entries and dialogue. */
.dr-count{top:51%;bottom:auto}
.dr-banner p{top:auto;bottom:9%}

/* Match remaining-entry typography to the character name font family. */
.dr-count,.dr-count label,.dr-count strong,.dr-count>span{font-family:"Malgun Gothic",system-ui,sans-serif}

/* Compact entry-count capsule following the supplied slot reference. */
.dr-card>div{width:calc(175 * var(--du));height:calc(60 * var(--du));gap:calc(14 * var(--du));margin-top:calc(20 * var(--du))}
.dr-card>div::before{left:calc(27 * var(--du));height:calc(50 * var(--du));background:#302321}
.dr-card>div>span{font-size:calc(23 * var(--du))}

/* Match slot titles to the banner title font family. */
.dr-card>strong{font-family:Batang,"Noto Serif KR",serif}

/* Subdued serif English labels keep the Korean dungeon title prominent. */
.dr-card>small{font-family:Georgia,"Times New Roman",serif;font-size:calc(20 * var(--du));font-weight:400;letter-spacing:calc(1.5 * var(--du));color:#cfbaa0}

/* Preserve source image transparency over each dungeon slot color. */
.dr-card{background:var(--card-art) right center/calc(680 * var(--du)) calc(283 * var(--du)) no-repeat,var(--card-color)}

/* Shift slot artwork down by 15 design pixels. */
.dr-card{background-position:right calc(50% + 15 * var(--du))}

/* Layered gold banner follows the supplied 1080 x 500 composition. */
.dr-banner-band,.dr-banner-character,.dr-facility{display:none}
.dr-banner:not(.no-character){background-image:url('assets/ui/dungeon-gold-background-1435.png');isolation:isolate;overflow:hidden}
.dr-banner:not(.no-character) .dr-banner-band{display:block;position:absolute;inset:35% 0 auto;height:28.6%;background:rgba(255,255,255,.5);z-index:0}
.dr-banner:not(.no-character) .dr-banner-character{display:block;position:absolute;right:0;top:0;height:100%;width:auto;z-index:1;pointer-events:none}
.dr-banner:not(.no-character) h2{left:4.45%;top:37.4%;font-size:calc(48 * var(--du));z-index:2}
.dr-banner:not(.no-character) .dr-facility{display:block;left:21.5%;top:43%;font-size:calc(22 * var(--du));font-weight:400;color:#683a05;text-shadow:none;z-index:2}
.dr-banner:not(.no-character) .dr-person{left:3%;top:49.8%;width:38%;padding:calc(12 * var(--du)) calc(12 * var(--du)) 0 0;flex-direction:row;justify-content:flex-end;align-items:baseline;gap:calc(10 * var(--du));border-top:calc(2 * var(--du)) solid #dfd6c8;z-index:2}
.dr-banner:not(.no-character) .dr-person::before{background:#dfd6c8;top:calc(-22.6 * var(--du))}
.dr-banner:not(.no-character) .dr-person>span{order:0;font-size:calc(22 * var(--du));padding:0;text-shadow:none}
.dr-banner:not(.no-character) .dr-person>b{order:1;font-family:Batang,'Noto Serif KR',serif;font-size:calc(44 * var(--du));font-weight:700}
.dr-banner:not(.no-character) p{left:4%;top:68%;bottom:auto;font-size:calc(30 * var(--du));line-height:1.4;z-index:2}
.dr-banner:not(.no-character) .dr-count{display:none}

.dr-banner:not(.no-character) h2{font-size:calc(44 * var(--du));letter-spacing:0}
.dr-banner:not(.no-character) .dr-facility{left:24%}

/* Match facility label typography to the vault keeper label. */
.dr-banner:not(.no-character) .dr-facility{font-family:"Malgun Gothic",system-ui,sans-serif;font-weight:700;font-size:calc(22 * var(--du));line-height:1}

/* Top-align the vault keeper label with the character name. */
.dr-banner:not(.no-character) .dr-person{align-items:flex-start}
.dr-banner:not(.no-character) .dr-person>span,.dr-banner:not(.no-character) .dr-person>b{line-height:1}

/* Smaller, lighter banner facility and role labels. */
.dr-banner:not(.no-character) .dr-facility,.dr-banner:not(.no-character) .dr-person>span{font-weight:500;font-size:calc(20 * var(--du))}

/* Bottom-align the role label with the character name. */
.dr-banner:not(.no-character) .dr-person{align-items:flex-end}

/* Extend the divider behind the character and give the banner band more room. */
.dr-banner:not(.no-character) .dr-banner-band{top:33%;height:32.6%}
.dr-banner:not(.no-character)::after{content:'';position:absolute;left:3%;right:0;top:49.8%;height:calc(2 * var(--du));background:#dfd6c8;z-index:0;pointer-events:none}
.dr-banner:not(.no-character) .dr-person{border-top-color:transparent}
.dr-banner:not(.no-character) p{font-size:calc(27 * var(--du))}

/* Center dialogue vertically between the white band bottom and banner bottom. */
.dr-banner:not(.no-character) p{top:calc(82.8% - 15 * var(--du));bottom:auto;transform:translateY(-50%)}

/* Remove the renewal-specific cream backing. */
.dungeon-screen.renewal-selection,.dungeon-renewal footer{background:transparent}

/* A closed dungeon must not occupy layout space in other menus. */
.dungeon-screen[hidden]{display:none!important}

/* Summon content uses the shared base color. */
main.game-shell.summon-mode>.controls{background-color:var(--cream)}

@media(prefers-reduced-motion:reduce){.summon-page-enter>.summon-art-tabs,.summon-page-enter>#heroCollection,.summon-page-enter>.gacha-box{animation:none!important}}

/* Enlarge the summon tab strip by ten percent around its center. */
main.game-shell [data-panel="summon"]>.summon-art-tabs{scale:1.1;transform-origin:center center}

/* Show the summon tab icon only on the selected tab. */
.summon-art-tab-fills button:not(.selected)>img{display:none}

/* Header cross in bright gold for the selected summon tab. */
.summon-tab-cross{display:none;flex:0 0 calc(26 * var(--hu));width:calc(26 * var(--hu));height:calc(32 * var(--hu));background:#ffe28a;mask:url("assets/ui/header-mark-851.png") center/contain no-repeat;-webkit-mask:url("assets/ui/header-mark-851.png") center/contain no-repeat;position:relative;top:calc(-2 * var(--hu))}
.summon-art-tab-fills button.selected>.summon-tab-cross{display:block}

/* Matching separator between the limited and general summon tabs. */
.summon-art-tab-fills::before{content:"";position:absolute;left:calc(25% + 88.5 * var(--hu));top:calc(30 * var(--hu));height:calc(22 * var(--hu));width:1px;background:rgba(115,113,108,.25);pointer-events:none;z-index:-1}

/* Swap the two surface colors only while the battle menu is active. */
main.game-shell:not(.summon-mode):not(.equipment-mode):not(:is(.event-mode,.quest-mode)):not(.bag-mode):not(.shop-mode):not(:has(>.dungeon-screen:not([hidden]))){background:#f3e8cf}
main.game-shell:not(.summon-mode):not(:is(.event-mode,.quest-mode)):not(.equipment-mode):not(.bag-mode)>.controls:has(>.mobile-panel[data-panel="battle"].active){background:#f3e8cf}
.mobile-panel[data-panel="battle"]>.menu-concept-surface{background:#f9f5e4}

/* Approved battle and heroes base tone. */
main.game-shell.equipment-mode,main.game-shell.equipment-mode>.controls{background-color:#f3e8cf}

/* Softer outer shadow around the menu surface. */
.mobile-panel[data-panel="battle"]>.menu-concept-surface{box-shadow:0 -1px 7px #79643b1a}

/* Left-aligned battle slot portraits and cooldowns in the cost position. */
main.game-shell #heroCards .card>.portrait{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;display:flex;align-items:flex-start;justify-content:flex-start;overflow:hidden}
main.game-shell #heroCards .card .portrait img.hero-sprite{width:84%!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:contain;object-position:left top;scale:1!important;transform:none!important;translate:none!important;margin:0!important;transform-origin:left top}
#heroCards .card:has(>.summon-cooldown.show:not(.lock-only))>.price{visibility:hidden}
main.game-shell #heroCards .card>.summon-cooldown:not(.lock-only){left:auto;top:auto;right:4px;bottom:3px;transform:none;min-width:0;padding:1px 4px;border-radius:5px;font-size:12px;line-height:1.2}

/* Original 400px sprite at 90% design scale, cropped from the left edge. */
main.game-shell #heroCards .card>.portrait{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;overflow:hidden!important;display:block!important}
main.game-shell #heroCards .card .portrait img.hero-sprite{position:absolute!important;width:calc(360 * var(--hu))!important;height:calc(360 * var(--hu))!important;left:calc(-110 * var(--hu))!important;top:calc(-145 * var(--hu))!important;scale:1!important;transform:none!important;translate:none!important}

/* Shared capsule footprint for summon cost and remaining cooldown. */
main.game-shell #heroCards .card>.price,main.game-shell #heroCards .card>.summon-cooldown:not(.lock-only){position:absolute;left:auto;top:auto;right:3px;bottom:3px;box-sizing:border-box;width:46px;height:22px;min-width:0;margin:0;padding:2px 5px;border-radius:999px;background:rgba(0,0,0,.8);color:#fff7e2;font-size:13px;font-weight:700;line-height:1;transform:none;z-index:4;text-align:center}
main.game-shell #heroCards .card>.price{display:flex;align-items:center;justify-content:center;gap:3px}
main.game-shell #heroCards .card>.price img{width:17px;height:17px;object-fit:contain}
main.game-shell #heroCards .card>.summon-cooldown.show:not(.lock-only){display:flex;align-items:center;justify-content:center}

/* Anchor the silver icon to the left edge of the cost capsule. */
main.game-shell #heroCards .card>.price{justify-content:flex-end;padding-left:19px;padding-right:6px}
main.game-shell #heroCards .card>.price img{position:absolute;left:3px;top:50%;transform:translateY(-50%);margin:0}

/* Dedicated 200px slot artwork: preserve aspect ratio and crop at the slot edge. */
main.game-shell #heroCards .card .portrait img.battle-slot-portrait{position:absolute;left:calc(-20 * var(--hu));top:0;width:113.4%!important;height:auto!important;max-width:none;max-height:none;object-fit:contain;object-position:left top;transform:none!important;translate:none!important;scale:1!important;margin:0;filter:none}

/* Slightly soften hero art even when summoning is available. */
main.game-shell #heroCards .card:not(:disabled)>.portrait{opacity:.9}

/* Raise the dungeon entrance button slightly within its footer. */
.dr-enter{translate:0 0}

/* Center the entrance button between the list clipping edge and bottom navigation. */
.dungeon-renewal footer{align-items:center;justify-content:center}

/* Entrance button at 90% size with centered, proportionally sized text. */
.dr-enter{width:50.22%;display:flex;align-items:center;justify-content:center;padding:0;line-height:1;font-size:calc(37.26 * var(--du));text-align:center}

/* Match tab typography and optically center the entrance label. */
.dr-enter{font-family:"Malgun Gothic",system-ui,sans-serif;font-weight:700}
.dr-enter>span{display:block;line-height:1;transform:translateY(calc(2 * var(--du)));pointer-events:none}

/* Dungeon entrance and selection transitions. */
@keyframes dungeonReveal{from{opacity:0;transform:translateY(calc(12 * var(--du)))}to{opacity:1;transform:translateY(0)}}
@keyframes dungeonBannerReveal{from{opacity:.35}to{opacity:1}}
.dr-entering>.dr-banner{animation:dungeonReveal .4s ease-out both}
.dr-entering>.dr-tabs{animation:dungeonReveal .32s .08s ease-out both}
.dr-entering>.dr-list{animation:dungeonReveal .38s .14s ease-out both}
.dr-entering>footer{animation:dungeonReveal .35s .22s ease-out both}
.dr-banner.dr-banner-changing{animation:dungeonBannerReveal .28s ease-out both}
.dr-list.dr-list-changing{animation:dungeonReveal .24s ease-out both}
.dr-card{transition:box-shadow .18s ease,filter .18s ease}
.dr-enter{transition:filter .15s ease}
.dr-enter:not(:disabled):active{filter:brightness(.9)}
@media(prefers-reduced-motion:reduce){.dr-entering>.dr-banner,.dr-entering>.dr-tabs,.dr-entering>.dr-list,.dr-entering>footer,.dr-banner.dr-banner-changing,.dr-list.dr-list-changing{animation:none!important}.dr-card,.dr-enter{transition:none}}

/* Keep the banner scenery still; animate its character and lettering separately. */
.dr-entering>.dr-banner,.dr-banner.dr-banner-changing{animation:none}
@keyframes dungeonCharacterArrive{from{opacity:0;translate:calc(30 * var(--du)) 0}to{opacity:1;translate:0 0}}
@keyframes dungeonTextArrive{from{opacity:0;translate:0 calc(8 * var(--du))}to{opacity:1;translate:0 0}}
.dr-banner-arriving>.dr-banner-character{animation:dungeonCharacterArrive .5s ease-out both}
.dr-banner-arriving>h2,.dr-banner-arriving>.dr-facility{animation:dungeonTextArrive .35s .12s ease-out both}
.dr-banner-arriving>.dr-person{animation:dungeonTextArrive .35s .22s ease-out both}
@media(prefers-reduced-motion:reduce){.dr-banner-arriving>.dr-banner-character,.dr-banner-arriving>h2,.dr-banner-arriving>.dr-facility,.dr-banner-arriving>.dr-person{animation:none!important}}
/* Enlarge the summon result title group while keeping its bottom anchor. */
.summon-result-stage .summon-result-heading{transform:translate(-50%,-100%) scale(1.2);transform-origin:50% 100%}
/* Summon page buttons: preserve decorative ends and stretch the middle. */
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton){border-width:0 calc(58 * var(--hu))!important;border-image:url('assets/ui/summon-blue-1910.png') 0 65 fill / 0 calc(58 * var(--hu)) / 0 stretch!important;background:none!important}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions #gachaButton{border-image-source:url('assets/ui/summon-gold-2091.png')!important}
.summon-result-stage .summon-result-close[hidden]{display:none!important}
.summon-result-repeat{position:absolute;top:805px;left:55px;width:430px;display:flex;gap:16px;opacity:0;pointer-events:none}
.summon-result-repeat.visible{opacity:1;pointer-events:auto;transition:opacity .2s}
.summon-result-repeat button{flex:1;min-width:0;height:58px;border:solid transparent;border-width:0 31px;border-image:url('assets/ui/summon-blue-1910.png') 0 65 fill / 0 31px / 0 stretch;background:none;box-shadow:none;color:#fff7dc;font:bold 16px/1.2 'Malgun Gothic',sans-serif;cursor:pointer}
.summon-result-repeat button[data-count="10"]{border-image-source:url('assets/ui/summon-gold-2091.png')}
.summon-result-repeat button:disabled{filter:grayscale(1);opacity:.5;cursor:default}
.summon-result-repeat button img{width:18px;height:18px;object-fit:contain;vertical-align:middle}
.summon-result-exit-hint{position:absolute;top:880px;left:0;width:100%;margin:0;text-align:center;color:#fff0cd;font:14px/1.4 'Malgun Gothic',sans-serif;opacity:0;pointer-events:none}
.summon-result-exit-hint.visible{opacity:1;transition:opacity .2s}

/* Match summon-page actions to the result actions at the same design scale. */
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions{width:calc(860 * var(--hu));max-width:none;gap:calc(32 * var(--hu));margin-left:auto;margin-right:auto}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton){flex:1;min-width:0;height:calc(116 * var(--hu));border-width:0 calc(62 * var(--hu))!important;border-image-width:0 calc(62 * var(--hu))!important;color:#fff7dc!important;font:bold calc(32 * var(--hu))/1.2 'Malgun Gothic',sans-serif!important}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions .summon-cost-icon{width:calc(36 * var(--hu));height:calc(36 * var(--hu));vertical-align:middle}
.summon-result-stage .summon-result-magic{top:700px}
.summon-result-exit-hint{transform:translateY(-50%)}

/* Compact label/cost spacing, slightly longer matching buttons. */
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions{width:calc(920 * var(--hu))}
.summon-result-repeat{left:40px;width:460px}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton),.summon-result-repeat button{display:flex!important;align-items:center!important;justify-content:center!important;column-gap:4px!important;white-space:nowrap}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions :is(#gachaSingleButton,#gachaButton) b,.summon-result-repeat button b{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:1px!important;margin:0!important;padding:0!important;min-width:0!important;width:auto!important;flex:0 0 auto!important}
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"] .summon-actions .summon-cost-icon,.summon-result-repeat button .summon-cost-icon{margin:0!important;padding:0!important}

/* Keep widened actions centered inside an equally wide parent. */
:root main.game-shell.summon-mode .mobile-panel[data-panel="summon"]>.gacha-box{width:calc(920 * var(--hu))}
.summon-result-repeat{top:801px}

/* Shared background blur for dimmed popup backdrops; popup contents stay sharp. */
:root{--popup-backdrop-blur:6px}
.equipment-modal,.star-up-modal,.idle-reward-modal,.bag-detail-modal,.bulk-sell-modal,.deck-edit-modal,.world-map-modal,.quest-modal,.event-reward-modal,.quest-reward-modal,.hero-acquisition-modal,.hero-level-modal,.hero-star-modal,.equipment-upgrade-modal,.dungeon-modal,.dungeon-stop-modal,.dungeon-failure-overlay,.summon-result-scene{backdrop-filter:blur(var(--popup-backdrop-blur));-webkit-backdrop-filter:blur(var(--popup-backdrop-blur))}







/* Match all entry labels to the mine's 70-unit icon + 14-unit gap. */
.dr-card>div>span{position:absolute;left:calc(84 * var(--du));right:calc(6 * var(--du));top:50%;transform:translateY(-50%);margin:0;padding:0;text-align:center;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}

.dr-card>div>span{translate:-10px 1px}

.dr-card>div>span{font-size:calc(26 * var(--du))}

.dr-card[data-choice="boss"]{background-image:url('assets/onboarding/lisette-introduction-781.png');background-position:right center}

.dr-card[data-choice="boss"]{background-image:url('assets/ui/weekly-lisette-slot-1880.png');background-size:100% auto;background-position:center center;background-repeat:no-repeat}

.dr-list{touch-action:pan-y;cursor:grab}.dr-list.is-dragging,.dr-list.is-dragging .dr-card{cursor:grabbing}

/* Clip scrolling cards inside the existing top/bottom list gutters. */
.dr-list{clip-path:inset(calc(30 * var(--du)) 0 calc(24 * var(--du)) 0);scroll-padding-top:calc(30 * var(--du));scroll-padding-bottom:calc(24 * var(--du))}

.dr-card>strong{position:relative;top:calc(6 * var(--du))}


.dr-card>strong .dr-boss-title-small{font-family:inherit!important;font-style:inherit;font-weight:inherit;font-size:.72em;letter-spacing:inherit}

.weekly-lisette-layers{display:none;position:absolute;inset:0;pointer-events:none}
.dr-banner.weekly-lisette{background:none!important}
.dr-banner.weekly-lisette .weekly-lisette-layers{display:block}
.weekly-lisette-layers>img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}
.weekly-lisette-layers>.weekly-lisette-logo{left:1.5%;top:14%;width:41.4%;height:auto}
.dr-banner.weekly-lisette>:is(h2,.dr-person,.dr-count,.dr-facility,.dr-banner-band,.dr-banner-character){display:none!important}
.dr-banner.weekly-lisette>p{z-index:2;left:3%;top:66%;width:40%;margin:0;color:#580812;text-align:center;font-family:Batang,'Noto Serif KR',serif;font-size:calc(28 * var(--du));font-weight:700;line-height:1.5;white-space:pre-line}

/* Replay layered Lisette entrance whenever the selected banner changes. */
.dr-banner.weekly-lisette{overflow:hidden}
.dr-banner.weekly-lisette.dr-banner-arriving .weekly-lisette-layers>img:nth-child(1){animation:none}
.dr-banner.weekly-lisette.dr-banner-arriving .weekly-lisette-layers>img:nth-child(2){animation:lisetteBannerPortrait .55s cubic-bezier(.16,1,.3,1) both}
.dr-banner.weekly-lisette.dr-banner-arriving .weekly-lisette-layers>img:nth-child(3){animation:none}
.dr-banner.weekly-lisette.dr-banner-arriving .weekly-lisette-logo{animation:lisetteBannerTitle .4s .12s ease-out both}
@keyframes lisetteBannerBackdrop{from{opacity:.3}to{opacity:1}}
@keyframes lisetteBannerPortrait{from{opacity:0;transform:translateX(4%)}to{opacity:1;transform:translateX(0)}}
@keyframes lisetteBannerPetals{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}
@keyframes lisetteBannerTitle{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.dr-banner.weekly-lisette.dr-banner-arriving .weekly-lisette-layers>img{animation:none}}

/* More dungeon slots below the fixed mask edge. */
.dungeon-renewal{position:relative}
.dr-more-indicator{position:absolute;left:50%;transform:translate(-50%,-50%);width:calc(112 * var(--du));height:calc(44 * var(--du));border-radius:999px;background:rgb(255 255 255 / 50%);display:flex;align-items:center;justify-content:center;z-index:5;pointer-events:none}
.dr-more-indicator[hidden]{display:none}
.dr-more-indicator img{width:calc(34 * var(--du));height:calc(34 * var(--du));transform:rotate(-90deg);object-fit:contain}

.dr-more-indicator{width:calc(88 * var(--du));height:calc(48 * var(--du));z-index:30}
.dr-more-indicator img{width:calc(40 * var(--du));height:calc(40 * var(--du))}

.dr-more-indicator img{transform:rotate(90deg);filter:brightness(0) invert(1) drop-shadow(0 0 1.5px #17202b99)}

/* Mirror the strengthened hero attack for goblins and weekly skeletons. */
#battlefield .enemy:is(.enemy-goblinSoldier,.enemy-goblinShaman,.enemy-weeklyLisetteSoldier,.enemy-weeklyLisetteMage).attacking{animation:weeklySummonAttackStrong .22s ease-out}
@keyframes weeklySummonAttackStrong{0%,100%{transform:translateX(-50%) rotate(0)}20%{transform:translateX(calc(-50% + 3px)) rotate(10deg)}58%{transform:translateX(calc(-50% - 12px)) rotate(-15deg)}78%{transform:translateX(calc(-50% - 7px)) rotate(-7deg)}}



/* Supplied alpha gradient, tinted to the dungeon background. */
.dr-bottom-fade{position:absolute;left:0;right:0;height:calc(100 * var(--du));transform:translateY(-100%);background:#f9f5e4;pointer-events:none;z-index:20;-webkit-mask:url("assets/ui/dungeon-bottom-gradient-2056.png") center/100% 100% no-repeat;mask:url("assets/ui/dungeon-bottom-gradient-2056.png") center/100% 100% no-repeat}

/* Extend the slot viewport 30 design units below its original lower edge. */
.dr-list{position:relative;z-index:1;margin-bottom:calc(-30 * var(--du))}
.dungeon-renewal .dr-enter{position:relative;z-index:25}

/* Lift the scroll cue independently of the lower mask edge. */
.dr-more-indicator{margin-top:calc(-20 * var(--du))}
/* Shared dungeon/event tab appearance for summon navigation. */
main.game-shell [data-panel="summon"]>.summon-art-tabs{width:calc(100% - 100 * var(--hu));height:calc(105 * var(--hu));margin:calc(30 * var(--hu)) auto 0;scale:1;border-bottom:calc(4 * var(--hu)) solid #dedace}
.summon-art-tabs::before,.summon-art-tabs::after,.summon-art-tab-fills::before,.summon-art-tab-fills button.selected::before{display:none}
.summon-art-tabs .summon-art-tab-fills{display:flex;inset:0}
.summon-art-tabs .summon-art-tab-fills button{position:relative;left:auto;right:auto;top:auto;flex:1;width:auto;height:100%;background:none;border:0;border-radius:0;color:#684939;font:400 calc(36 * var(--hu)) Batang,serif;letter-spacing:0}
.summon-art-tabs .summon-art-tab-fills button.selected{color:#19334a;font-weight:700}
.summon-art-tabs .summon-art-tab-fills .summon-tab-cross{display:none}
.summon-art-tabs .summon-art-tab-fills button.selected::after{content:'';position:absolute;left:0;right:0;bottom:calc(-12 * var(--hu));height:calc(24 * var(--hu));background:url('assets/ui/dungeon-tab-1393.png') center/100% 100% no-repeat;pointer-events:none}
/* Use the final dungeon tab dimensions, including inset rails. */
main.game-shell [data-panel="summon"]>.summon-art-tabs{width:calc(100% - 120 * var(--hu));height:calc(75 * var(--hu));border-bottom-color:transparent}
.summon-art-tabs .summon-art-tab-fills button{padding:calc(8 * var(--hu)) 0 0;font-family:'Malgun Gothic',system-ui,sans-serif;font-size:calc(32 * var(--hu));line-height:1.2}
.summon-art-tabs .summon-art-tab-fills button>span{height:auto;line-height:1.2}
.summon-art-tabs .summon-art-tab-fills button.selected::after{left:calc(14 * var(--hu));right:calc(14 * var(--hu))}
.summon-art-tabs::after{display:block;content:'';position:absolute;left:calc(14 * var(--hu));right:calc(14 * var(--hu));top:auto;bottom:calc(-2 * var(--hu));width:auto;height:calc(4 * var(--hu));background:#dedace;pointer-events:none;z-index:0}
/* Remove the former selected icon's space so labels center on the shared rail. */
.summon-art-tabs .summon-art-tab-fills button.selected>.summon-tab-cross{display:none}
.summon-art-tabs .summon-art-tab-fills button{gap:0;justify-content:center}
.summon-art-tabs .summon-art-tab-fills button>span{justify-content:center;text-align:center;margin:0}

/* Match the event header-to-tab spacing. */
main.game-shell [data-panel="summon"]>.summon-art-tabs{margin-top:calc(16 * var(--hu))}

/* Align the summon tab strip with the card grid edges. */
main.game-shell [data-panel="summon"]>.summon-art-tabs{width:82.4%}

/* Temporarily hide the summon card backdrop sigil. */
main.game-shell [data-panel="summon"] #heroCollection::before{display:none}


/* Shared notification-dot appearance. Keep each existing anchor and visibility rule. */
.bottom-nav button.has-notice::after,.equipment-notice-dot,.hero-slot-notice,#quickQuestButton.has-notice::before,.deck-empty.recruit-notice::after,.deck-selected-empty.recruit-notice::after,.deck-roster .deck-hero.recruit-notice::after,.hero-info .hero-upgrade-actions .star-upgrade-button.has-notice::after,.menu-concept-item.has-notice .menu-concept-icon-box::after,.quest-renewal .er-tabs .has-reward .quest-tab-label::after{box-sizing:border-box!important;width:8px!important;min-width:8px!important;max-width:8px!important;height:8px!important;min-height:8px!important;max-height:8px!important;border:0!important;border-radius:50%!important;background:#e3413d!important;box-shadow:0 1px 3px #0008!important;animation:none!important;filter:none!important;transform:none!important}

main.game-shell>header .battle-header-wallet b{position:relative;top:calc(-2 * var(--hu))}

/* Ines nameplate font preview. */
.dungeon-renewal .dr-banner[data-dungeon-id="gold"] h2,.dungeon-renewal .dr-banner[data-dungeon-id="gold"] .dr-facility,.dungeon-renewal .dr-banner[data-dungeon-id="gold"] .dr-person span,.dungeon-renewal .dr-banner[data-dungeon-id="gold"] .dr-person b{font-family:'Jalnan Gothic',sans-serif;font-weight:400}

/* Align the Ines role and name on a shared text baseline. */
.dungeon-renewal .dr-banner[data-dungeon-id="gold"] .dr-person{align-items:baseline}

/* Opaque tail and physical-pixel overlap prevent fractional clipping seams. */
.dr-bottom-fade{translate:0 2px;-webkit-mask:linear-gradient(to bottom,transparent 0%,#000 85%,#000 100%);mask:linear-gradient(to bottom,transparent 0%,#000 85%,#000 100%)}

/* Archive white-panel typography preview. */
@font-face{font-family:'Jalnan Gothic';src:url('assets/fonts/JalnanGothicTTF.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
.dungeon-renewal .dr-banner[data-dungeon-id="exp"] h2,.dungeon-renewal .dr-banner[data-dungeon-id="exp"] .dr-facility,.dungeon-renewal .dr-banner[data-dungeon-id="exp"] .dr-person span,.dungeon-renewal .dr-banner[data-dungeon-id="exp"] .dr-person b{font-family:'Jalnan Gothic',sans-serif;font-weight:400}
.dungeon-renewal .dr-banner[data-dungeon-id="exp"] .dr-person{align-items:baseline}

/* Shared daily-dungeon white-panel typography and name-row centering. */
.dungeon-renewal .dr-banner:is([data-dungeon-id="gold"],[data-dungeon-id="exp"],[data-dungeon-id="stone"]) h2,.dungeon-renewal .dr-banner:is([data-dungeon-id="gold"],[data-dungeon-id="exp"],[data-dungeon-id="stone"]) .dr-person b{font-family:'Jalnan Gothic',sans-serif;font-weight:400}
.dungeon-renewal .dr-banner:is([data-dungeon-id="gold"],[data-dungeon-id="exp"],[data-dungeon-id="stone"]) .dr-facility,.dungeon-renewal .dr-banner:is([data-dungeon-id="gold"],[data-dungeon-id="exp"],[data-dungeon-id="stone"]) .dr-person span{font-family:'Jalnan Gothic',sans-serif;font-weight:400}
.dungeon-renewal .dr-banner:is([data-dungeon-id="gold"],[data-dungeon-id="exp"],[data-dungeon-id="stone"]) .dr-person{top:57.7%;transform:translateY(-50%);padding-top:0;border-top:0;align-items:baseline}

/* Keep the divider ornament fixed independently of the animated name row. */
.dungeon-renewal .dr-banner:not(.no-character) .dr-person::before{content:none}
.dungeon-renewal .dr-banner:not(.no-character):not(.weekly-lisette)::before{content:'';position:absolute;left:3%;top:calc(49.8% + 1 * var(--du));width:calc(36 * var(--du));height:calc(43.2 * var(--du));transform:translate(-50%,-50%);background:#b69b70;mask:url('assets/ui/header-mark-851.png') center/contain no-repeat;-webkit-mask:url('assets/ui/header-mark-851.png') center/contain no-repeat;z-index:2;pointer-events:none}
.dungeon-renewal .dr-banner:not(.no-character)::after{background:#c3ae8b}

/* End daily-dungeon dividers around the middle of the illustration. */
.dungeon-renewal .dr-banner:is([data-dungeon-id="gold"],[data-dungeon-id="exp"],[data-dungeon-id="stone"])::after{right:25%}

/* Dungeon list titles share the renewed banner typography. */
.dungeon-renewal .dr-card>strong{font-family:'Jalnan Gothic',sans-serif;font-weight:400}
.dungeon-renewal .dr-card>small{font-family:'Jalnan Gothic',sans-serif;font-weight:400}

/* Align English labels with Korean slot titles. */
.dungeon-renewal .dr-card>small{padding-left:0}

/* Restore the distinctive dungeon slot title face. */
.dungeon-renewal .dr-card>strong{font-family:"Jalnan Gothic",sans-serif;font-weight:400}

/* Lower both dungeon slot title lines by two design units. */
.dungeon-renewal .dr-card>strong,.dungeon-renewal .dr-card>small{translate:0 calc(2 * var(--du))}

/* Match dungeon banner dialogue to the shared display font. */
.dungeon-renewal .dr-banner>p{font-family:"Jalnan Gothic",sans-serif;font-weight:400}

/* Dungeon selection controls use the same typeface as its banner. */
@font-face{font-family:'Gmarket Sans';src:url('assets/fonts/GmarketSansTTFMedium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gmarket Sans';src:url('assets/fonts/GmarketSansTTFBold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}
.dungeon-renewal .dr-tabs button{font-family:'Gmarket Sans',sans-serif;font-weight:700}
.dungeon-renewal .dr-enter,.dungeon-renewal .dr-enter>span{font-family:'Malgun Gothic',system-ui,sans-serif;font-weight:700}

/* Subdue unselected dungeon tabs while retaining bold active controls. */
.dungeon-renewal .dr-tabs button:not(.selected){font-weight:500;color:#968b80}

/* Center the current button typeface without the previous font offset. */
.dungeon-renewal .dr-enter{display:flex;align-items:center;justify-content:center;padding:0}
.dungeon-renewal .dr-enter>span{margin:0;line-height:1;transform:translateY(calc(2 * var(--du)))}

/* Shared event, quest and summon tab typography. */
main.game-shell :is(.event-renewal,.quest-renewal) .dr-tabs button,main.game-shell [data-panel="summon"] .summon-art-tab-fills button{font-family:'Gmarket Sans',sans-serif;font-weight:500;color:#968b80}
main.game-shell :is(.event-renewal,.quest-renewal) .dr-tabs button.selected,main.game-shell [data-panel="summon"] .summon-art-tab-fills button.selected{font-weight:700;color:#19334a}

/* Shop tabs follow the shared text-only tab typography. */
main.game-shell .shop-category-tabs button{font-family:'Gmarket Sans',sans-serif;font-weight:500;color:#e4d6be}
main.game-shell .shop-category-tabs button[aria-selected="true"]{font-weight:700;color:#19334a}

/* Give event and quest tabs more breathing room below their headers. */
main.game-shell :is(.event-renewal,.quest-renewal)>.er-tabs{margin-top:calc(16 * var(--du))}

/* Lower shop tab labels without moving the tab backgrounds. */
main.game-shell .shop-category-tabs button>span{display:inline-block;translate:0 calc(2 * var(--hu))}

/* Clean text on inactive shop tabs. */
main.game-shell .shop-category-tabs button:not([aria-selected="true"]){text-shadow:none}

/* Limited summon heading and guarantee caption typography. */
main.game-shell [data-panel="summon"] .summon-guarantee :is(.summon-limited-heading,.summon-limited-kicker,.summon-pity-caption){font-family:'Jalnan Gothic',sans-serif;font-weight:400}

/* Limited summon guarantee uses Gmarket Sans for caption and count. */
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee :is(.summon-pity-caption,.summon-pity-number,.summon-pity-number b){font-family:'Gmarket Sans',sans-serif;font-weight:500}

/* Separate the guarantee caption and count; keep banner text shadow-free. */
main.game-shell [data-panel="summon"] .summon-guarantee .summon-pity-number{margin-top:calc(10 * var(--hu))}
main.game-shell [data-panel="summon"] .summon-lisette-feature,main.game-shell [data-panel="summon"] .summon-lisette-feature *{text-shadow:none}

/* Align the limited summon count on a shared baseline. */
main.game-shell [data-panel="summon"] .summon-guarantee .summon-pity-number{display:flex;justify-content:center;align-items:baseline;line-height:1}
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee .summon-pity-number b{line-height:1}

/* Match weapon summon information to the limited hero summon. */
main.game-shell [data-panel="summon"] .summon-exclusive-info>:is(small,h2){font-family:'Jalnan Gothic',sans-serif;font-weight:400}
main.game-shell [data-panel="summon"] .summon-exclusive-info .exclusive-pity :is(span,strong,b){font-family:'Gmarket Sans',sans-serif;font-weight:500}
main.game-shell [data-panel="summon"] .summon-exclusive-info .exclusive-pity strong{margin-top:calc(10 * var(--hu));line-height:1}
main.game-shell [data-panel="summon"] .summon-exclusive-info .exclusive-pity strong b{line-height:1;margin-right:calc(5 * var(--hu))}

/* Align the unadorned weapon English heading with its Korean title. */
main.game-shell [data-panel="summon"] .summon-exclusive-info>small{padding-left:0;margin-left:0;text-align:left}

/* Match the limited information group top inset to weapon summon. */
main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-guarantee{top:calc(54 * var(--hu))}

/* Match weapon count spacing and baseline to limited summon. */
main.game-shell [data-panel="summon"] .summon-exclusive-info .exclusive-pity strong{display:flex;align-items:baseline}

/* Match limited English-to-Korean title spacing to weapon summon. */
main.game-shell [data-panel="summon"] .summon-guarantee>.summon-limited-heading{margin-top:calc(8 * var(--hu))}

/* Plain unlock notices with destination-specific alignment. */
main.game-shell [data-panel="summon"] .summon-guarantee>.summon-open-notice,main.game-shell [data-panel="summon"] .summon-exclusive-info>span{display:block;box-sizing:border-box;width:100%;padding:0;margin-top:calc(5 * var(--hu));border:0;border-radius:0;background:none;color:#e5d8c5;font-family:'Malgun Gothic',system-ui,sans-serif;font-size:calc(30 * var(--hu));font-weight:400;line-height:1.4;letter-spacing:normal;white-space:nowrap;text-align:center}
main.game-shell [data-panel="summon"] .summon-exclusive-info>span{text-align:left}

/* General summon typography matches limited and weapon banners. */
main.game-shell [data-panel="summon"] .summon-general-copy>:is(small,h2){font-family:'Jalnan Gothic',sans-serif;font-weight:400}
main.game-shell [data-panel="summon"] .summon-general-copy :is(.summon-pity-caption,.summon-pity-number){font-family:'Gmarket Sans',sans-serif;font-weight:500}
main.game-shell [data-panel="summon"] .summon-general-copy .summon-pity-number b{font-family:'Gmarket Sans',sans-serif!important;font-weight:500!important}

/* Give the general summon count the same caption spacing. */
main.game-shell [data-panel="summon"] .summon-general-copy .summon-pity-number{margin-top:calc(10 * var(--hu))}

/* Increase the general availability pill while preserving surrounding gaps. */
main.game-shell [data-panel="summon"] .summon-general-copy>.summon-open-notice{font-size:calc(26 * var(--hu));padding:calc(9 * var(--hu)) calc(24 * var(--hu));line-height:1.25}
main.game-shell [data-panel="summon"] .summon-lisette-feature.is-general>.summon-general-copy{bottom:calc(31.5 * var(--hu))}

/* Shared dialogue typography across all summon banners. */
main.game-shell [data-panel="summon"] .summon-lisette-feature>p,main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-general-quote,main.game-shell [data-panel="summon"] .summon-lisette-feature>.summon-exclusive-quote{font-family:'Jalnan Gothic',sans-serif;font-weight:400}



/* Hero roster heading and ownership count. */
main.game-shell [data-panel="equipment"] .hero-roster-heading>strong,main.game-shell [data-panel="equipment"] .hero-roster-heading>strong :is(b,span){font-family:'Gmarket Sans',sans-serif;font-weight:700}

/* Slightly larger, lower hero ownership heading. */
main.game-shell [data-panel="equipment"] .hero-roster-heading>strong,main.game-shell [data-panel="equipment"] .hero-roster-heading>strong :is(b,span){font-size:15px}
main.game-shell [data-panel="equipment"] .hero-roster-heading>strong{translate:0 2px}

/* Center the Korean-only chalkboard copy within the existing sign area. */
main.game-shell .shop-scene .shop-scene-sign{justify-content:center;align-items:center;padding:0;box-sizing:border-box;gap:6px;text-shadow:none}
main.game-shell .shop-scene-sign :is(strong,span){font-family:'Jalnan Gothic',sans-serif;font-weight:400;margin:0}

/* Lighter supporting copy on the shop chalkboard. */
main.game-shell .shop-scene-sign span{font-family:'Gmarket Sans',sans-serif;font-weight:500}

/* Larger concise shop sign subtitle. */
main.game-shell .shop-scene-sign span{font-size:14px}

/* Plain dungeon dividers aligned with the banner title. */
.dungeon-renewal .dr-banner:not(.no-character):not(.weekly-lisette)::before{content:none}
.dungeon-renewal .dr-person::before{content:none}
.dungeon-renewal .dr-person>img{display:none}
.dungeon-renewal .dr-banner:not(.no-character)::after{left:4.45%}




.ines-dialogue .deployment-bubble,.ines-dialogue .deployment-bubble p,.ines-dialogue .deployment-bubble p span{font-family:'Gmarket Sans',sans-serif;font-weight:700}