html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: transparent; }
#scoreboard { position: fixed; z-index: 3; top: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 6px 10px; max-width: 300px; padding: 7px 10px; border: 1px solid #ffffff66; border-radius: 6px; color: white; background: #111827dd; font: 600 13px/18px system-ui, sans-serif; box-shadow: 0 2px 8px #0008; }
#scoreboard[hidden] { display: none; }
#scoreboard span + span { padding-left: 10px; border-left: 1px solid #ffffff44; }
#scoreboard strong { font-variant-numeric: tabular-nums; }
#scoreboard .shadow-score strong { color: #c4b5fd; }
#scoreboard .light-score strong { color: #fde68a; }
#scoreboard .round-state { flex-basis: 100%; padding: 5px 0 0; border-top: 1px solid #ffffff33; border-left: 0; color: #e0f2fe; font-size: 11px; }
#scoreboard .event-state { flex-basis: 100%; padding: 3px 0 0; border-left: 0; color: #fef08a; font-size: 11px; }
.damage-cell { position: absolute; z-index: 0; background: black; transition: opacity 650ms ease-out; }
.objective { position: absolute; z-index: 1; box-sizing: border-box; border: 3px solid #fef08a; border-radius: 8px; background: repeating-linear-gradient(135deg, #fef08a20 0 8px, #38bdf820 8px 16px); box-shadow: inset 0 0 18px #fef08a44, 0 0 12px #38bdf888; pointer-events: none; }
.objective.secondary { border-color: #67e8f9; background: repeating-linear-gradient(45deg, #67e8f920 0 8px, #c4b5fd20 8px 16px); }
.objective-position { position: absolute; top: -3px; left: 0; transform: translateY(-100%); padding: 2px 5px; border: 1px solid #fef08a; border-radius: 3px; color: #111827; background: #fef08a; font: 700 11px/16px system-ui, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; box-shadow: 0 1px 5px #0009; }
.objective.secondary .objective-position { border-color: #67e8f9; background: #67e8f9; }
.objective[data-top-edge="true"] .objective-position { top: 1px; left: 1px; transform: none; }
.effect-cell { position: absolute; z-index: 1; box-sizing: border-box; pointer-events: none; }
.effect-damage { background: #ef444477; border: 3px solid #fecaca; animation: damage-pulse 700ms ease-out both; }
.effect-repair { background: #22c55e55; border: 3px solid #bbf7d0; animation: repair-pulse 700ms ease-out both; }
.effect-recovery { background: #67e8f966; animation: recovery-fade 750ms ease-out both; }
.reset-wave { position: fixed; z-index: 1; inset: 12%; border: 8px solid #f8fafc; border-radius: 50%; pointer-events: none; animation: reset-wave 850ms ease-out both; }
.character { position: absolute; z-index: 2; box-sizing: border-box; background: var(--player-color, #7c3aed); border: 2px solid var(--player-border, #ddd6fe); border-radius: 5px; transition: left var(--move-duration, 400ms) linear, top var(--move-duration, 400ms) linear, border-color 120ms ease, box-shadow 120ms ease; animation: player-enter 180ms ease-out both; }
.character[hidden] { display: none; }
.character[data-status="ready"] { box-shadow: 0 0 0 1px #ffffffcc, 0 0 8px var(--player-border, #ddd6fe); }
.character[data-status="cooldown"] { border-color: #fbbf24; border-style: dashed; box-shadow: none; }
.character.leaving { animation: player-exit 180ms ease-in both; pointer-events: none; }
.character.became-ready::after { content: ''; position: absolute; inset: -6px; border: 2px solid var(--player-border, #ddd6fe); border-radius: 8px; pointer-events: none; animation: ready-pulse 650ms ease-out both; }
.sprite { display: block; width: 100%; height: 100%; image-rendering: pixelated; user-select: none; }
.character[data-team="sombra"] .sprite { filter: drop-shadow(0 0 2px #c4b5fd); }
.character[data-team="luz"] .sprite { filter: brightness(1.12) drop-shadow(0 0 2px #fde68a); }
.team-mark { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 13px; height: 13px; border: 1px solid var(--player-border); border-radius: 2px; color: var(--player-text); background: var(--player-label); font: 9px/1 system-ui, sans-serif; }
.character[data-last-action="damage"] .team-mark { color: white; background: #b91c1c; border-color: #fecaca; }
.character[data-last-action="repair"] .team-mark { color: white; background: #15803d; border-color: #bbf7d0; }
.name { position: absolute; left: 0; display: flex; box-sizing: border-box; padding: 2px 4px; border: 1px solid var(--player-border, #ddd6fe); border-radius: 3px; color: var(--player-text, white); background: var(--player-label, #4c1d95); font: 600 13px/18px system-ui, sans-serif; white-space: nowrap; overflow: hidden; }
.player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.player-position { flex: none; margin-left: .35em; font-variant-numeric: tabular-nums; }
@keyframes player-enter { from { opacity: 0; transform: scale(.65); } to { opacity: 1; transform: scale(1); } }
@keyframes player-exit { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(.65); } }
@keyframes damage-pulse { from { opacity: 1; transform: scale(.55); } to { opacity: 0; transform: scale(1.35); } }
@keyframes repair-pulse { from { opacity: 1; transform: scale(1.35); } to { opacity: 0; transform: scale(.45); } }
@keyframes recovery-fade { from { opacity: .7; } to { opacity: 0; } }
@keyframes reset-wave { from { opacity: .9; transform: scale(.08); } to { opacity: 0; transform: scale(1.25); } }
@keyframes ready-pulse { from { opacity: 1; transform: scale(.7); } to { opacity: 0; transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) {
  .character, .damage-cell { animation: none; transition-duration: 0ms; }
  .effect-cell, .reset-wave, .character.became-ready::after { display: none; }
}