/* The map "Where ants died" (docs/REPLAYS.md "The map of deaths"; web/death_map.js): the card of the match page and the smaller one of the Stats panel on the replay page. It uses the tokens of matches.css (the
   match page) and of the game page; the few that the two pages name differently have a fallback. The colors of the teams are the page's (--c-green, --c-red, --c-blue and --c-black, set by data-c on a mark, a square or a dot), never a color of this file. */
.dm { --dm-muted: var(--muted, #8fb3a6); --dm-gold: var(--gold, #f6d058); --dm-cream: var(--cream, #f4ece2); --dm-edge: var(--edge, #050a08); --dm-shadow: var(--shadow, #9d0d17); }
.dm .head .count { white-space: normal; text-align: right; }
.dm-body { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 22px 28px; align-items: start; }
.dm-mapcol { min-width: 0; }
.dm-ruler-top { position: relative; height: 18px; margin-left: 26px; }
.dm-ruler-top span, .dm-ruler-left span { position: absolute; font-size: 11px; color: var(--dm-muted); font-variant-numeric: tabular-nums; line-height: 1; }
.dm-ruler-top span { transform: translateX(-50%); top: 3px; }
.dm-mapwrap { display: grid; grid-template-columns: 26px minmax(0, 1fr); }
.dm-ruler-left { position: relative; }
.dm-ruler-left span { right: 5px; transform: translateY(-50%); }
.dm-stage { position: relative; width: 100%; aspect-ratio: var(--ar, 1); overflow: hidden; background: #050a08; border: 2px solid var(--dm-edge); border-radius: 3px; box-shadow: 0 0 0 1px #1c3a30; touch-action: pan-y; cursor: crosshair; }
.dm-stage.zoomed { touch-action: none; cursor: grab; }
.dm-stage:focus-visible { outline: 2px solid var(--dm-gold); outline-offset: 2px; }
.dm-world { position: absolute; left: 0; top: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.dm-world img.dm-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; filter: brightness(.62) saturate(.8); }
.dm.dots .dm-world img.dm-img { filter: brightness(.82) saturate(.9); }
.dm-world canvas, .dm-world svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.dm-world svg text { font-family: inherit; paint-order: stroke; stroke: #000; stroke-linejoin: round; fill: #fff7e0; font-variant-numeric: tabular-nums; font-weight: 600; }
.dm [data-c="Green"] { --c: var(--c-green); } .dm [data-c="Red"] { --c: var(--c-red); } .dm [data-c="Blue"] { --c: var(--c-blue); } .dm [data-c="Black"] { --c: var(--c-black); }
.dm .mk { display: inline-block; width: 12px; height: 12px; background: var(--c); flex: none; vertical-align: -1px; }
.dm .mk.circle { border-radius: 50%; } .dm .mk.square { border-radius: 2px; }
.dm .mk.triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); } .dm .mk.diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.dm .key { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-size: 14px; color: #c3d6cd; }
.dm .key li { display: inline-flex; align-items: center; gap: 8px; }
.dm .lab { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--dm-muted); }
.dm-world svg .mkp { fill: var(--c); stroke: #000; stroke-linejoin: round; }
.dm-world svg .mkq { fill: var(--c); stroke: #000; stroke-width: 0; }
.dm-world svg .cell { fill: var(--c); fill-opacity: .28; stroke: var(--c); }
.dm-world svg .sq { fill: var(--c); stroke: var(--c); }
.dm-world svg .ring-first { stroke: var(--dm-gold); } .dm-world svg .ring-last { stroke: var(--dm-cream); }
.dm-zoom { position: absolute; right: 8px; bottom: 8px; display: grid; gap: 6px; z-index: 5; }
.dm-zoom button { width: 36px; height: 36px; border-radius: 6px; border: 2px solid var(--dm-edge); background: var(--teal) var(--sheen); color: var(--dm-cream); font-size: 20px; line-height: 1; box-shadow: var(--bevel-sm), 2px 3px 0 var(--dm-shadow); cursor: pointer; }
.dm-zoom button.fit { font-size: 11px; letter-spacing: .04em; }
.dm-zoom .zl { text-align: center; font-size: 11px; color: var(--dm-cream); text-shadow: 0 0 3px #000, 0 0 3px #000; }
.dm-mini { position: absolute; left: 8px; top: 8px; width: 84px; z-index: 5; border: 2px solid var(--dm-edge); border-radius: 3px; background: #050a08; box-shadow: 0 0 0 1px #1c3a30; overflow: hidden; }
.dm-mini img { width: 100%; aspect-ratio: var(--ar, 1); object-fit: fill; filter: brightness(.7); }
.dm-mini i { position: absolute; border: 2px solid var(--dm-gold); box-shadow: 0 0 0 1px #000; }
.dm-tag { position: absolute; z-index: 4; transform: translate(0, -50%); display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; font-size: 12px; line-height: 1.35; white-space: nowrap; color: var(--dm-cream); background: rgba(7, 11, 15, .92); border: 1px solid var(--dm-gold); border-radius: 3px; pointer-events: none; }
.dm-tag.last { border-color: var(--dm-cream); border-style: dashed; }
.dm-tag b { font-weight: 500; letter-spacing: .08em; font-size: 10.5px; text-transform: uppercase; color: var(--dm-gold); }
.dm-tag.last b { color: var(--dm-cream); }
.dm-tt { position: absolute; z-index: 6; width: 232px; padding: 9px 12px 10px; background: var(--inset); color: var(--dm-cream); border: 3px solid var(--frame); border-color: var(--frame-hi) var(--frame-lo) var(--frame-lo) var(--frame-hi); border-radius: 4px; box-shadow: 0 0 0 2px var(--dm-edge), 3px 4px 0 2px var(--dm-shadow); font-size: 14px; line-height: 1.35; pointer-events: none; }
.dm-tt .t { display: flex; align-items: center; gap: 8px; font-size: 15px; margin-bottom: 4px; }
.dm-tt .r { display: grid; grid-template-columns: 74px 1fr; gap: 0 8px; color: #c3d6cd; }
.dm-tt .r span:nth-child(odd) { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--dm-muted); align-self: center; }
.dm-tt .r span:nth-child(even) { color: var(--dm-cream); }
.dm-tt .more { margin-top: 5px; padding-top: 5px; border-top: 1px solid #1c3a30; font-size: 13px; color: var(--dm-muted); }

.dm-side { display: grid; gap: 16px; min-width: 0; align-content: start; }
.dm-side .lab { display: block; margin-bottom: 6px; }
.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 13px 0 11px; font-size: 15px; color: var(--dm-cream); background: #0d171f; border: 1px solid #1c3a30; border-radius: 18px; cursor: pointer; }
.dm-chip b { font-weight: 500; color: var(--dm-muted); font-variant-numeric: tabular-nums; }
.dm-chip[aria-pressed="true"] { background: #12261f; border-color: var(--dm-gold); box-shadow: inset 0 0 0 1px var(--dm-gold); }
.dm-chip[aria-pressed="true"] b { color: var(--dm-cream); }
.dm-row { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; }
.dm-tog { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px 0 11px; font-size: 15px; color: #b7d0c6; background: #0d171f; border: 1px solid #1c3a30; border-radius: 6px; cursor: pointer; }
.dm-tog[aria-pressed="true"] { color: var(--dm-cream); border-color: var(--dm-gold); box-shadow: inset 0 0 0 1px var(--dm-gold); background: #12261f; }
.dm-tog .ring { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--dm-gold); flex: none; }
.dm-tog .ring.last { border: 2px dashed var(--dm-cream); }
.dm-tog .drop { width: 10px; height: 14px; flex: none; background: #5aa6e0; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform: rotate(0deg); }
.dm-legend .bar { height: 14px; border-radius: 3px; border: 1px solid #000; box-shadow: 0 0 0 1px #1c3a30; }
.dm-legend .ends { display: flex; justify-content: space-between; margin-top: 4px; font-size: 13px; color: #c3d6cd; }
.dm-legend .ends span:last-child { text-align: right; }
.dm-legend .key { margin: 0; }
.dm-facts { display: grid; gap: 10px; margin: 0; }
.dm-facts dt { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--dm-muted); }
.dm-facts dd { font-size: 15.5px; line-height: 1.35; margin: 0; }
.dm-hint { font-size: 14px; color: var(--dm-muted); line-height: 1.4; }
.dm-note { margin-top: 12px; padding: 9px 12px; font-size: 14.5px; line-height: 1.4; color: #e6d9a8; background: #1c1708; border: 1px solid #6b5a14; border-radius: 4px; }
.dm-note b { font-weight: 500; color: var(--dm-gold); }

/* compact (the replay page's Stats panel) */
.dm.compact { padding: 0; background: none; border: 0; box-shadow: none; margin-top: 14px; padding-top: 12px; border-top: 1px solid #1c3a30; border-radius: 0; }
.dm.compact h3 { font-size: 16px; font-weight: 500; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.dm.compact h3 span { font-size: 13px; color: var(--dm-muted); }
.dm.compact .dm-body { grid-template-columns: 236px minmax(0, 1fr); gap: 14px; }
.dm.compact .dm-chip { min-height: 28px; font-size: 13px; padding: 0 9px 0 8px; gap: 6px; }
.dm.compact .dm-chips { gap: 5px; }
.dm.compact .dm-side { gap: 10px; }
.dm.compact .dm-ruler-top { margin-left: 0; display: none; }
.dm.compact .dm-mapwrap { grid-template-columns: minmax(0, 1fr); }
.dm.compact .dm-ruler-left { display: none; }
.dm.compact .dm-tt { width: 200px; font-size: 13px; }
.dm.compact .dm-zoom button { width: 28px; height: 28px; font-size: 16px; }
.dm.compact .dm-legend .ends { font-size: 12px; }
.dm.compact .seg button { min-height: 32px; padding: 0 12px; font-size: 14px; }

@media (max-width: 960px) { .dm-body { grid-template-columns: minmax(0, 1fr); } .dm-mapcol { max-width: 620px; } }
@media (max-width: 720px) {
    .dm .head .count { text-align: left; }
    .dm-chip { min-height: 38px; font-size: 14.5px; padding: 0 11px 0 9px; gap: 7px; }
    .dm-chips { gap: 6px; }
    .dm-tt { width: 208px; font-size: 13.5px; }
    .dm-ruler-top { margin-left: 22px; } .dm-mapwrap { grid-template-columns: 22px minmax(0, 1fr); }
    .dm-mini { width: 64px; }
    .dm .seg { width: 100%; } .dm .seg button { flex: 1 1 0; }
    .dm-tog { flex: 1 1 calc(50% - 8px); justify-content: center; padding: 0 8px; }
    .dm.compact .dm-body { grid-template-columns: minmax(0, 1fr); }
}

.dm-tt.below { position: static; width: auto; margin-top: 12px; }
.dm-tt.below .r { grid-template-columns: 84px 1fr; }

/* the Heat / Dots switch, drawn here so that it looks the same on the replay page (the match page has it in matches.css as .seg) */
.dm .seg { display: inline-flex; border: 2px solid var(--dm-edge); border-radius: 8px; overflow: hidden; box-shadow: 2px 3px 0 var(--dm-shadow); flex: none; }
.dm .seg button { min-height: 40px; padding: 0 16px; background: #0d171f; border: 0; border-left: 1px solid #1c3a30; border-radius: 0; box-shadow: none; color: #b7d0c6; font: inherit; font-size: 15px; cursor: pointer; white-space: nowrap; }
.dm .seg button:first-child { border-left: 0; }
.dm .seg button[aria-pressed="true"] { background: var(--teal) var(--sheen); color: var(--dm-cream); box-shadow: var(--bevel-sm); }