.battle-layout-shell{width:min(100%,720px);margin-inline:auto;touch-action:none;user-select:none;-webkit-user-select:none}.battle-layout-direction{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;color:var(--muted,#8493b5);font-size:11px}.battle-layout-direction i{flex:1;margin:0 10px;border-top:1px solid rgba(53,215,255,.28);text-align:center;color:#35d7ff;font-style:normal;line-height:0}.battle-layout-board{--cols:6;--rows:5;position:relative;width:100%;aspect-ratio:6/5;overflow:hidden;border:1px solid rgba(53,215,255,.38);border-radius:14px;background:linear-gradient(rgba(53,215,255,.035),rgba(124,92,255,.05)),#050b18;box-shadow:inset 0 0 35px rgba(53,215,255,.05),0 12px 30px rgba(0,0,0,.25);touch-action:none}.battle-layout-board[data-drop=valid]{border-color:#4de8b4}.battle-layout-board[data-drop=invalid]{border-color:#ff6b8a}.battle-layout-cell{position:absolute;left:calc(var(--cx)*100%/var(--cols));top:calc(var(--cy)*100%/var(--rows));width:calc(100%/var(--cols));height:calc(100%/var(--rows));border-right:1px solid rgba(53,215,255,.12);border-bottom:1px solid rgba(53,215,255,.12);pointer-events:none}.battle-layout-unit{border:1px solid rgba(124,92,255,.55);border-radius:10px;color:#f3f5ff;background:linear-gradient(145deg,rgba(124,92,255,.35),rgba(53,215,255,.13));box-shadow:inset 0 0 18px rgba(53,215,255,.06);touch-action:none;cursor:grab}.battle-layout-unit:active{cursor:grabbing}.battle-layout-unit.on-board{position:absolute;z-index:2;left:calc(var(--x)*100%/var(--cols) + 3px);top:calc(var(--y)*100%/var(--rows) + 3px);width:calc(var(--w)*100%/var(--cols) - 6px);height:calc(var(--h)*100%/var(--rows) - 6px);display:grid;place-items:center;align-content:end;overflow:hidden;padding:4px}.battle-layout-unit img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);object-fit:contain;pointer-events:none}.battle-layout-unit span,.battle-layout-unit small{position:relative;z-index:2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 5px #000}.battle-layout-unit span{font-size:11px;font-weight:700}.battle-layout-unit small{font-size:10px;color:#9edfff}.battle-layout-unit.dragging{opacity:.28}.battle-layout-roster{min-height:82px;display:flex;gap:8px;overflow-x:auto;margin-top:8px;padding:9px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(4,9,20,.5);overscroll-behavior-x:contain}.battle-layout-unit.in-roster{position:relative;flex:0 0 74px;height:64px;display:grid;place-items:end center;padding:5px;overflow:hidden}.battle-layout-empty{width:100%;margin:auto;text-align:center;color:var(--muted,#8493b5);font-size:11px}.battle-layout-ghost{position:fixed;z-index:99999;transform:translate(-50%,-120%);pointer-events:none;padding:7px 11px;border:1px solid #35d7ff;border-radius:9px;color:#fff;background:#101a2e;box-shadow:0 8px 26px #000;font-size:12px}.layout-roster-title{display:block;margin-top:12px;font-size:12px}
@media(max-width:520px){.battle-layout-board{border-radius:10px}.battle-layout-unit.on-board{left:calc(var(--x)*100%/var(--cols) + 2px);top:calc(var(--y)*100%/var(--rows) + 2px);width:calc(var(--w)*100%/var(--cols) - 4px);height:calc(var(--h)*100%/var(--rows) - 4px);border-radius:7px}.battle-layout-unit span{font-size:10px}.battle-layout-unit small{font-size:9px}.battle-layout-roster{min-height:70px;padding:6px}.battle-layout-unit.in-roster{flex-basis:62px;height:54px}}

/* 03_Game formation interaction states */
.battle-layout-cell.melee,.battle-layout-cell.ranged{background:transparent}
.battle-layout-cell.valid{z-index:1;background:rgba(53,215,255,.14);border:1px solid rgba(53,215,255,.8)}
.battle-layout-cell.invalid{z-index:1;background:rgba(255,107,138,.1);border:1px dashed rgba(255,107,138,.8)}
.battle-layout-cell.hover{box-shadow:inset 0 0 13px rgba(124,92,255,.32)}
.battle-layout-cell.active{border-color:rgba(53,215,255,.35)}
.battle-layout-unit.selected{box-shadow:0 0 0 2px rgba(124,92,255,.65),inset 0 0 18px rgba(53,215,255,.08)}
.battle-layout-roster{border-style:dashed;border-color:transparent;transition:border-color .16s,background .16s}
.battle-layout-roster.drop-active,.roster-zone.drop-active{border-color:rgba(255,107,138,.75);background:rgba(255,107,138,.1)}
.battle-layout-unit.in-roster{flex-basis:132px;height:56px;place-items:end start;padding:8px 10px;text-align:left}
.battle-layout-unit.in-roster.on-field{border-color:rgba(53,215,255,.5);background:linear-gradient(145deg,rgba(53,215,255,.2),rgba(124,92,255,.12))}
.battle-layout-unit.in-roster.on-field::after{content:'✓';position:absolute;right:7px;top:5px;z-index:3;color:#4de8b4;font-size:11px;font-weight:800}
.battle-layout-unit.locked::before{content:'◆';position:absolute;left:7px;top:5px;z-index:3;color:#ffd66b;font-size:8px;text-shadow:0 0 7px rgba(255,214,107,.8)}
.battle-layout-ghost{display:flex;align-items:center;gap:7px;padding:8px 12px}
.battle-layout-ghost span{color:#9edfff;font-size:9px}
.layout-board-wrap{position:sticky;top:0;z-index:5;padding:8px 4px 6px;border-radius:14px;background:rgba(7,12,28,.92);backdrop-filter:blur(6px)}
.layout-enemy-dir{justify-content:center;gap:6px}
.layout-enemy-dir>span{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid rgba(255,107,138,.65)}
.layout-enemy-dir em{margin-left:4px}