.formation-grid-container{width:100%;max-width:100%;margin:0 auto}.battlefield-layout{display:flex;justify-content:center;align-items:stretch}.grid-area{display:flex;flex-direction:column;gap:1rem;align-items:center;justify-content:center}.line-indicators{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;max-width:100%}.line-indicator{display:flex;align-items:center;justify-content:center;width:140px}.line-icon{width:48px!important;max-width:48px}.formation-grid{display:grid;gap:8px;grid-template-columns:repeat(var(--grid-cols, 1),1fr);grid-template-rows:repeat(var(--grid-rows, 3),1fr)}.grid-cell{position:relative;background:#2b323b4d;border:2px solid #2b323b;aspect-ratio:1;transition:all .2s ease;width:140px;height:140px}.grid-cell:hover{border-color:#ebed63;background:#ebed631a}.formation-grid[data-static=true] .grid-cell:hover{border-color:#2b323b;background:#2b323b4d;cursor:default}.grid-cell.drag-over{border-color:#4ade80;background:#4ade8033}.grid-cell.occupied{background:#60a5fa1a}.grid-cell[data-line="0"]{border-left:4px solid #3b82f6}.grid-cell[data-line="1"]{border-left:4px solid #22c55e}.grid-cell[data-line="2"]{border-left:4px solid #ef4444}.cell-content{width:100%;height:100%;display:flex;align-items:center;justify-content:center;position:relative;z-index:2}.add-unit-button{font-size:2rem;color:#2b323b;font-weight:700;transition:color .2s ease}.grid-cell:hover .add-unit-button{color:#ebed63}.placed-unit{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:4px;overflow:hidden}.placed-unit.dragging{opacity:.5}.unit-image{object-fit:cover;transition:transform .2s ease}.unit-name{font-size:.6rem;color:#fff;text-align:center;line-height:1;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;position:absolute;bottom:0;left:0;right:0;background:#000000e6;padding:2px 4px}.grid-controls{display:flex;gap:1rem;justify-content:center;margin-top:1rem}.control-btn{background-color:transparent;border:2px solid #2b323b;color:#fff;font-weight:700;padding:.75rem 1.25rem;cursor:pointer;transition:all .2s ease}.control-btn:hover{background-color:#2b323b;border-color:#ebed63;color:#ebed63}.entity-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;z-index:1000;align-items:center;justify-content:center;padding:2rem}.popup-content{background:#14181d;width:100%;max-width:1000px;max-height:90vh;overflow:hidden;display:flex;flex-direction:column}.popup-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;background:#0d1116}.popup-header h2{margin:0;color:#fff}.close-btn{background:none;border:none;font-size:2rem;cursor:pointer;color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.close-btn:hover{background-color:#ffffff1a}.popup-search{background-color:transparent;border:2px solid #272a2f;margin:2rem;margin-bottom:0;margin-right:2.8rem;padding:.5rem 1rem;font-size:1.2rem;color:#fff;transition:.15s linear}.popup-search:focus{outline:none;background-color:#272a2f}.entities-grid{padding:2rem;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem;overflow-y:auto;max-height:70vh}.entity-option{border:2px solid #0D1116;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:1rem;background:#14181d;overflow:hidden;padding:0}.entity-option:hover{border-color:#ebed63;transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.entity-img-wrapper{overflow:hidden;width:120px;height:100%}.entity-option-image{width:80px;height:100px;object-fit:cover;flex-shrink:0}.entity-option-info{flex:1;padding:.5rem}.entity-option-name{font-weight:600;color:#fff;margin-bottom:.5rem;line-height:1.3}@media (max-width: 768px){.grid-area{gap:.5rem}.line-indicator{width:80px}.line-label{font-size:.8rem}.grid-cell{width:80px;height:80px}.entities-grid{grid-template-columns:1fr;padding:1rem}}