.is-battle{background:#173642}.is-battle .app-shell{display:block;padding:0}.is-battle .sidebar,.is-battle .topbar{display:none}.is-battle .main{padding:0;max-width:none}.is-battle #main>.view-enter{animation:none}.game-battle{min-height:100dvh;color:#f2ead9;font-family:Nunito,Manrope,sans-serif;background:linear-gradient(#14313dec,#14313df5),url('/assets/lobby-v2.webp') center/cover fixed;padding:0 24px 16px;overflow:hidden}.battle-top{height:72px;display:flex;align-items:center;justify-content:space-between;max-width:1260px;margin:auto}.round-button{border:2px solid #547581;background:#254957;border-radius:15px;width:42px;height:42px;display:grid;place-items:center;color:#dfeced;box-shadow:0 3px #0b2632}.round-button:hover{background:#365f6c}.battle-mode{text-align:center}.battle-mode b{font-size:17px;font-weight:900;display:block}.battle-mode span{font-size:9px;color:#93b4be;letter-spacing:2px}.battle-scene{max-width:1120px;display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(200px,1fr);gap:38px;margin:0 auto;align-items:center}.arena-column{width:min(37vw,calc((100dvh - 260px)/2));min-width:250px}.board-rim{border:5px solid #60736a;background:#263f42;border-radius:15px;padding:5px;box-shadow:0 6px 0 #122b31,0 0 0 2px #152e33}.arena-board{position:relative;aspect-ratio:1/2;border-radius:6px;background:#668a7c url('/assets/arena-forest.webp') center/100% 100%;isolation:isolate}.arena-cells{position:absolute;inset:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(10,1fr);border-radius:6px;overflow:hidden}.arena-cell{border:1px solid #e5efda26;background:#2a403414;position:relative;padding:0;min-width:0;min-height:0;display:grid;place-items:center;transition:background .16s,box-shadow .16s}.arena-cell:nth-child(n+21):nth-child(-n+25){border-bottom:2px dashed #f0e5b38c}.arena-cell:hover{background:#dce0b825}.arena-cell.reachable{background:#72d8e466;border:2px solid #a2e6dd}.arena-cell.targetable{background:#e4726288;border:2px solid #ffd4a9}.arena-cell.selected{background:#f8d78845;box-shadow:inset 0 0 0 2px #fbe4a5}.summon-mark{width:80%;height:80%;border:3px dashed #edd395;border-radius:50%;display:grid;place-items:center;color:#ffe3a8;background:#67593d70;box-shadow:0 2px 0 #183c34}.summon-mark[hidden]{display:none}.summon-mark b{font-size:24px;font-weight:900}.summon-mark i{position:absolute;width:45%;height:45%;border:1px solid #ecd6a455;border-radius:50%}.arena-units{position:absolute;inset:0;pointer-events:none;z-index:2}.unit-piece{position:absolute;width:20%;height:10%;display:grid;place-items:center;transition:left .38s cubic-bezier(.2,.75,.25,1),top .38s cubic-bezier(.2,.75,.25,1);will-change:left,top;z-index:3}.unit-circle{width:86%;aspect-ratio:1;position:relative;border:3px solid var(--rarity);border-radius:50%;background:#d6ccaa;box-shadow:0 4px 0 #203d3dc9,0 0 0 1px #1a343c}.unit-art{position:absolute;inset:2px;border-radius:50%;background-size:300% 200%;background-repeat:no-repeat}.unit-piece.enemy .unit-circle{box-shadow:0 4px 0 #713a44,0 0 0 2px #e5a59b}.unit-piece.chosen{z-index:5}.unit-piece.chosen .unit-circle{outline:3px solid #fff1b3;outline-offset:3px}.unit-piece.spent .unit-art{filter:saturate(.5) brightness(.75)}.unit-level{position:absolute;left:-5px;top:-5px;border-radius:8px;min-width:18px;height:18px;display:grid;place-items:center;background:#1c4753;border:2px solid #d8cead;color:#fff;font-size:9px;font-weight:900}.unit-health{position:absolute;left:0;right:0;height:7px;bottom:-5px;border:2px solid #233b38;background:#233b38;border-radius:6px;overflow:hidden}.unit-health i{height:100%;display:block;background:#91c95e;transition:width .3s}.unit-piece.enemy .unit-health i{background:#e68c79}.unit-piece.spawning .unit-circle{animation:cartoon-summon .55s cubic-bezier(.2,.8,.3,1)}.unit-piece.dying .unit-circle{animation:cartoon-death .4s ease-in forwards}.combatant{height:45px;display:flex;align-items:center;gap:10px;padding:3px 4px}.combatant-avatar{height:32px;width:32px;background-size:300% 200%;border:2px solid #9cb79d;border-radius:10px;flex-shrink:0}.enemy-combatant .combatant-avatar{border-color:#d99e98}.combatant b{display:block;font-size:11px;max-width:200px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.combatant small{display:block;font-size:7px;letter-spacing:1px;color:#adc3bd}.army-count{margin-left:auto;background:#294b55;border:1px solid #78979c;border-radius:8px;padding:1px 9px;font-size:14px;font-weight:900}.enemy-combatant .army-count{background:#603f48;border-color:#b38380}.battle-info,.battle-orders{padding:0 10px}.turn-banner{border:2px solid #527787;border-radius:18px;background:#284c59;padding:20px;text-align:center;box-shadow:0 5px 0 #0f2b35;max-width:240px;margin:auto}.turn-banner>span{font-size:16px;font-weight:900;color:#f1d692;display:block}.turn-banner strong{font-family:Nunito,sans-serif;font-size:35px;display:block;margin:5px 0;font-weight:900}.turn-banner small{display:block;font-size:11px;color:#b4cace}.action-pips{display:flex;justify-content:center;gap:6px;margin:8px 0}.action-pips i{height:12px;width:28px;background:#193b48;border:2px solid #587988;border-radius:5px}.action-pips i.filled{background:#e4bb6d;border-color:#f6dd9c}.selected-hero{text-align:center;margin:26px 0 0}.selected-hero>div{width:90px;height:106px;background-size:300% 200%;border-radius:18px;border:3px solid #7496a1;margin:0 auto 13px}.selected-hero h2{font-size:18px;font-weight:900}.selected-hero p{font-size:12px;color:#aec6cb;line-height:1.7;margin:12px auto;max-width:230px}.battle-tips{font-size:11px;color:#93b2bc;max-width:220px;margin:25px auto 0}.battle-tips b{color:#cfdfde}.battle-tips p{margin-top:8px}.battle-orders h3{font-size:17px;font-weight:900;margin:0 0 18px}.order-buttons{display:flex;flex-wrap:wrap;gap:11px}.game-btn{padding:13px 16px;font-family:Nunito,sans-serif;font-size:13px;font-weight:900;display:flex;justify-content:center;align-items:center;gap:9px;background:#3b6473;color:#e8efea;border:2px solid #6b9098;border-radius:12px;box-shadow:0 4px 0 #173640;transition:transform .12s,background .15s;flex:1}.game-btn:hover:not(:disabled){background:#507984}.game-btn:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #173640}.game-btn.primary{background:#e3bb70;color:#3b3b2b;border-color:#f2d791;box-shadow:0 4px 0 #8b723f}.game-btn.primary:hover:not(:disabled){background:#efd091}.game-btn.chosen{border-color:#f1dfab;background:#3f7582}.game-btn[hidden]{display:none}.game-btn:disabled{opacity:.45}.game-btn svg{width:17px;height:17px}#end-button,#deploy-button,#result-button,#auto-button{width:100%;flex-basis:100%}#order-hint{color:#b2cace;font-size:12px;line-height:1.7;margin:20px 0 0;min-height:45px}.battle-history{margin-top:28px;padding-top:20px;border-top:2px solid #315361}.battle-history h3{font-size:12px;margin-bottom:12px;color:#a4c2cb}.battle-history p{font-size:10px;color:#88a8b4;line-height:1.8;padding-bottom:8px}.battle-hand{max-width:650px;margin:12px auto 0}.hand-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;padding:0 5px}.hand-label b{font-size:12px;font-weight:900}.hand-label span{font-size:10px;color:#a8bdc1}.hand-cards{display:flex;gap:10px;justify-content:center}.hand-card{height:125px;max-width:110px;width:20%;border:3px solid color-mix(in srgb,var(--rarity) 65%,#2b414b);border-radius:12px;background:#254654;position:relative;overflow:hidden;padding:0;box-shadow:0 5px 0 #0d2934;transition:transform .2s,border .2s}.hand-art{position:absolute;inset:0 0 28px;background-size:300% 200%}.hand-name{position:absolute;bottom:12px;left:2px;right:2px;font-size:8px;font-weight:900;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#f4ecdb}.hand-role{position:absolute;bottom:1px;left:0;right:0;font-size:7px;line-height:1.4;color:#aac2cb}.hand-card.selected{transform:translateY(-5px);border-color:#f2dda1}.hand-card:hover:not(:disabled){transform:translateY(-8px)}.hand-used{display:none}.hand-card.used .hand-used{display:block;position:absolute;inset:0;background:#18363bdd;place-content:center;font-size:9px;color:#c0d1c9}.turn-announcement{position:absolute;top:42%;left:-20%;right:-20%;background:#e5bd74;color:#3b402f;text-align:center;padding:14px;border:3px solid #f2d998;border-radius:14px;box-shadow:0 5px 0 #5f563c80;font-size:24px;font-weight:900;z-index:10;pointer-events:none;opacity:0;transform:scale(.85)}.turn-announcement.show{animation:turn-swipe 1.6s both}.is-enemy-turn .turn-banner>span{color:#e6ad9f}.is-enemy-turn .turn-banner{border-color:#8b7479}.battle-fx{font-family:Nunito,sans-serif;color:#fff0d0;text-shadow:-2px -2px #684331,2px -2px #684331,-2px 2px #684331,2px 2px #684331;font-size:24px}.projectile{background:#efce8b;box-shadow:none;width:14px;height:7px;border:2px solid #fff0be;border-radius:3px}.impact-ring{border:4px solid #e6c294;box-shadow:none}.unit-hit .unit-circle{animation:cartoon-hit .35s}
@keyframes cartoon-summon{0%{transform:translateY(-22px) scale(.2);opacity:0}65%{transform:translateY(3px) scale(1.16,.87);opacity:1}100%{transform:none;opacity:1}}@keyframes cartoon-death{0%{transform:scale(1)}35%{transform:scale(1.15,.8)}100%{transform:translateY(12px) scale(.1);opacity:0}}@keyframes cartoon-hit{25%{transform:translate(-5px,1px) rotate(-7deg)}65%{transform:translate(4px,-2px) rotate(5deg)}100%{transform:none}}@keyframes turn-swipe{0%{opacity:0;transform:translateX(-25px) scale(.9)}15%,70%{opacity:1;transform:none}100%{opacity:0;transform:translateX(25px) scale(.95)}}
@media(min-height:950px) and (min-width:900px){.arena-column{width:min(36vw,350px)}.battle-hand{margin-top:16px}.hand-card{height:140px}}
@media(max-width:1000px){.battle-scene{gap:15px;grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr)}.battle-orders,.battle-info{padding:0}.arena-column{min-width:220px}.turn-banner{padding:15px}.game-btn{padding:11px;font-size:11px}.selected-hero h2{font-size:15px}.battle-tips{font-size:10px}.game-battle{padding-left:15px;padding-right:15px}.battle-history p{font-size:9px}}
@media(max-width:700px){.game-battle{height:100dvh;min-height:0;padding:0 8px max(8px,env(safe-area-inset-bottom));display:flex;flex-direction:column;background-attachment:scroll}.battle-top{height:47px;min-height:47px;width:100%;padding:0 5px}.round-button{height:31px;width:31px;border-radius:10px}.round-button svg{height:15px;width:15px}.battle-mode b{font-size:12px}.battle-mode span{font-size:6px;letter-spacing:1px}.battle-scene{display:flex;flex-direction:column;gap:0;flex:1;min-height:0;position:relative;width:100%}.battle-info{position:absolute;top:0;left:4px;right:4px;z-index:8;pointer-events:none}.turn-banner{max-width:none;margin:0;background:none;border:0;border-radius:0;padding:0;box-shadow:none;display:flex;align-items:center;gap:8px;justify-content:center}.turn-banner>span{font-size:10px}.turn-banner strong{font-size:15px;margin:0}.turn-banner small{font-size:8px}.action-pips{gap:3px;margin:0}.action-pips i{width:12px;height:8px;border-width:1px;border-radius:3px}.selected-hero,.battle-tips{display:none}.arena-column{min-width:0;width:min(100%,calc((100dvh - 254px)/2));margin:20px auto 0;flex-shrink:0}.combatant{height:26px;gap:6px;padding:2px 4px}.combatant-avatar{height:23px;width:23px;border-radius:7px;border-width:1px}.combatant b{font-size:9px;max-width:200px}.combatant small{font-size:5px;letter-spacing:.7px}.army-count{font-size:10px;padding:0 6px;border-radius:5px}.board-rim{border-width:3px;border-radius:10px;padding:3px}.arena-board{border-radius:4px}.unit-circle{border-width:2px}.unit-art{inset:1px}.unit-level{height:13px;min-width:13px;font-size:7px;border-width:1px;border-radius:5px;left:-3px;top:-3px}.unit-health{height:5px;border-width:1px;bottom:-3px}.summon-mark{border-width:2px}.summon-mark b{font-size:18px}.battle-orders{width:100%;max-width:390px;margin:8px auto 0;padding:0 5px}.battle-orders>h3,.battle-history,#order-hint{display:none}.order-buttons{flex-wrap:nowrap;gap:7px}.game-btn{height:34px;padding:5px 7px;font-size:10px;border-width:1.5px;border-radius:9px;gap:5px;box-shadow:0 3px 0 #173640;min-width:0}.game-btn svg{height:13px;width:13px}#end-button{width:auto;flex-basis:auto;flex:1.5;font-size:9px}#deploy-button,#auto-button,#result-button{width:auto;flex-basis:auto}.battle-hand{width:100%;max-width:370px;margin:8px auto 0;flex-shrink:0}.hand-label{margin-bottom:5px}.hand-label b{font-size:9px}.hand-label span{font-size:8px}.hand-cards{gap:6px}.hand-card{height:76px;border-width:2px;border-radius:9px}.hand-art{bottom:21px}.hand-name{font-size:6px;bottom:10px}.hand-role{font-size:6px}.hand-card.selected{transform:translateY(-3px)}.hand-card:hover:not(:disabled){transform:translateY(-3px)}.turn-announcement{font-size:16px;border-width:2px;padding:10px;border-radius:10px}.battle-fx{font-size:19px}}
@media(max-width:700px) and (max-height:690px){.arena-column{width:calc((100dvh - 223px)/2)}.battle-top{height:39px;min-height:39px}.hand-card{height:61px}.hand-label{display:none}.battle-hand{margin-top:6px}.game-btn{height:30px;font-size:9px}.combatant{height:24px}.arena-column{margin-top:18px}.battle-orders{margin-top:6px}.hand-name{font-size:5.5px}}
@media(prefers-reduced-motion:reduce){.unit-piece{transition:none}.unit-piece.spawning .unit-circle,.unit-piece.dying .unit-circle,.turn-announcement.show{animation:none}.unit-piece.dying{display:none}}