/* ═══ Game of Life — the board is one SVG (road, tiles, pawns) inside a pan/zoom camera ═══════════════════════ */
.board-wrapper:has(.life-wrapper) { padding: 0; align-items: stretch; overflow: hidden; }
.life-wrapper { padding: 10px; gap: 10px; overflow: hidden; }
.life-board-container { position: relative; flex: 1 1 0; min-height: 300px; padding: 0; overflow: hidden; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: #0e3d2c; }
.lf-view { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; }
.lf-view:active { cursor: grabbing; }
.lf-stage { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.lf-svg { width: 100%; height: 100%; display: block; }
.lf-road-edge { fill: none; stroke: #20283b; stroke-width: 24; stroke-linecap: round; stroke-linejoin: round; }
.lf-road-line { fill: none; stroke: rgba(255, 224, 130, .55); stroke-width: 2; stroke-dasharray: 6 8; stroke-linecap: round; stroke-linejoin: round; }
.lf-tile { cursor: default; }
.lf-label { font: 700 9px 'Jakarta', 'Vazirmatn', system-ui, sans-serif; fill: #1d2230; }
.lf-hl > rect:nth-of-type(1) { stroke-width: 3.2; animation: lf-pulse 1.2s ease-in-out infinite; }
@keyframes lf-pulse { 50% { stroke-width: 6; } }
.lf-pawn { transform-box: fill-box; transform-origin: center; }
.lf-pawn-turn .lf-pawn-body { animation: lf-turn 1.1s ease-in-out infinite; }
@keyframes lf-turn { 50% { stroke-width: 4.4; } }
.lf-pawn-me .lf-pawn-body { stroke: #ffe66d; }
.lf-pawn-retired { opacity: .45; }
.lf-zoom { position: absolute; inset-block-start: 10px; inset-inline-end: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 5; }
.lf-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(8, 11, 20, .82); color: #e8ecf7; cursor: pointer; backdrop-filter: blur(6px); }
.lf-btn:active { transform: scale(.94); }
@media (max-width: 1100px) {
  .life-wrapper { flex-direction: column; }
  .life-board-container { flex: 0 0 52dvh; min-height: 260px; }
  .life-inventory-container { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .lf-hl > rect:nth-of-type(1), .lf-pawn-turn .lf-pawn-body { animation: none; } }

.lf-spin-pop { animation: lf-pop 1.6s cubic-bezier(.23,1,.32,1) both; pointer-events: none; transform-box: fill-box; transform-origin: center; }
.lf-spin-n { font: 900 20px 'Jakarta', system-ui, sans-serif; fill: #3b2a00; }
@keyframes lf-pop { 0% { opacity: 0; scale: .4; translate: 0 8px; } 18% { opacity: 1; scale: 1.2; } 60% { opacity: 1; scale: 1; translate: 0 -6px; } 100% { opacity: 0; translate: 0 -22px; } }