.map { display: grid; grid-template-columns: repeat(var(--map-columns), 1fr); width: min(100%, calc(var(--map-columns) * 48px)); margin-inline: auto; aspect-ratio: var(--map-columns) / var(--map-rows); overflow: visible; background: transparent; }
.tile { position: relative; display: grid; place-items: center; min-width: 0; min-height: 0; padding: 0; aspect-ratio: 1; border: 1px solid #263329; border-radius: 0; color: var(--tile-color); background: var(--tile-background); font-family: ui-monospace, monospace; font-size: clamp(.45rem, 1.35vw, .85rem); user-select: none; }
.tile:hover { z-index: 1; border-color: #6f8873; background: inherit; }
.tile:focus-visible { z-index: 2; outline: 2px solid var(--accent); outline-offset: -2px; }
.tile-symbol { position: relative; z-index: 1; }
.tile.is-selected { box-shadow: inset 0 0 0 2px #fff; }
.tile.is-player { box-shadow: inset 0 0 0 2px var(--accent); }
.tile.is-player[data-clone-label]::before { content: attr(data-clone-label); position: absolute; top: var(--clone-label-offset); left: calc(var(--clone-label-offset) + 1px); color: var(--accent); font-size: .55rem; font-weight: 700; line-height: 1; }
.tile.is-projected { box-shadow: inset 0 0 0 2px #58c9d1; }
.tile.is-queue-hovered { z-index: 1; outline: 2px solid #d9a9ff; outline-offset: -2px; }
.tile.is-selected.is-player { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--accent); }
.tile.is-selected.is-projected { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #58c9d1; }
.tile.is-player.is-projected { box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px #58c9d1; }
.tile.is-selected.is-player.is-projected { box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px var(--accent), inset 0 0 0 6px #58c9d1; }
.tile.is-hidden { color: transparent; border-color: transparent; background: transparent; box-shadow: none; }
.tile.is-hidden.is-queue-hovered { outline: none; }
.tile.is-hidden:hover { border-color: transparent; background: transparent; }
.tile.is-outside-viewport { display: none; }