/* The live page (/live): the drawn map (land and water from the game's mask, the grid, places, live markers), and the
   panels beside it. Built on the site tokens (site.css). The map is SVG in world units; .lv-k elements keep a screen
   size whatever the zoom, through --k (world units per screen pixel) set on the svg by public/js/live.js. */
.lv {
    --sea-deep: oklch(0.165 0.02 230);
    --sea: oklch(0.215 0.03 225);
    --land: oklch(0.285 0.028 108);
    --land-hi: oklch(0.33 0.032 108);
    --water: oklch(0.36 0.05 220);
    --boss: var(--ember);
    --site: var(--blight);
    --chain: var(--gold);
    --event: oklch(0.78 0.09 220);
    width: min(100% - 32px, 1480px); margin: 0 auto; padding: 28px 0 72px; display: grid; gap: 20px;
}
.lv > * { min-width: 0; }

/* The top: a huge title, when it last heard from the game, and two numbers. */
.lv-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: end; }
.lv-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; color: var(--ink-3); font: 700 .8rem/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; }
.lv-beacon { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--blight); box-shadow: 0 0 12px var(--blight); }
.lv-beacon::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid var(--blight); animation: lv-ping 2.4s var(--ease-out) infinite; }
.lv-beacon.is-off { background: var(--ink-3); box-shadow: none; }
.lv-beacon.is-off::after { display: none; }
@keyframes lv-ping { from { transform: scale(.6); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
.lv-title { margin: 0; color: var(--ink); font: 400 clamp(3.4rem, 11vw, 7.5rem)/.84 var(--font-display); text-transform: uppercase; letter-spacing: .005em; }
.lv-title em { font-style: normal; color: var(--blight); text-shadow: 0 0 34px oklch(0.87 0.2 128 / .35); }
.lv-lede { margin: 14px 0 0; max-width: 62ch; color: var(--ink-2); }
.lv-stats { display: flex; gap: 10px; margin: 0; }
.lv-stat { min-width: 132px; padding: 14px 18px 12px; border: 1px solid var(--line-soft); border-radius: 6px; background: linear-gradient(160deg, var(--panel-2), var(--bg-deep)); }
.lv-stat dt { color: var(--ink-3); font: 700 .74rem/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; }
.lv-stat dd { margin: 8px 0 0; color: var(--gold); font: 400 2.6rem/1 var(--font-display); font-variant-numeric: tabular-nums; }
.lv-stat dd small { margin-left: 6px; color: var(--ink-3); font: 700 .9rem/1 var(--font-label); letter-spacing: .08em; }
.lv-stat__off { color: var(--ink-3); font-size: 1.9rem; }

.lv-offline { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 16px; border: 1px solid oklch(0.68 0.18 40 / .5); border-radius: 6px; background: oklch(0.68 0.18 40 / .1); color: var(--ink); }
.lv-offline .icon { color: var(--ember); }

/* Map left, panels right, the feed under the map. On a phone: map, panels, feed. */
.lv-body { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); grid-template-areas: "map side" "feed side"; gap: 20px 24px; align-items: start; }
.lv-body > * { min-width: 0; }
.lv-mapbox { grid-area: map; display: grid; gap: 10px; }
.lv-side { grid-area: side; display: grid; gap: 14px; }
.lv-feed { grid-area: feed; }

.lv-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line-soft); border-radius: 999px; background: var(--panel); color: var(--ink-3); font: 600 .88rem/1 var(--font-label); letter-spacing: .05em; }
.lv-toggle i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .4; }
.lv-toggle[aria-pressed="true"] { color: var(--ink); border-color: var(--line); }
.lv-toggle[aria-pressed="true"] i { opacity: 1; }
.lv-toggle--bosses i { background: var(--boss); }
.lv-toggle--sites i { background: var(--site); }
.lv-toggle--chain i { background: var(--chain); transform: rotate(45deg); border-radius: 1px; }
.lv-toggle--events i { background: var(--event); }
.lv-toggle--mon i { width: 6px; height: 6px; background: var(--ink-2); }
.lv-toggle--grid i { border-radius: 1px; background: none; box-shadow: inset 0 0 0 1px var(--ink-2); }

.lv-map { position: relative; overflow: hidden; width: 100%; min-width: 0; aspect-ratio: 1; background: var(--sea-deep); touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; }
.lv-map.is-dragging { cursor: grabbing; }
.lv-map__msg { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: var(--ink-3); text-align: center; z-index: 1; }
.lv-map__note { margin: 0; color: var(--ink-3); font-size: .85rem; }
.lv-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lv-zoom { position: absolute; right: 10px; top: 10px; z-index: 3; display: grid; gap: 4px; }
.lv-zoom button { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 4px; background: oklch(0.12 0.01 95 / .85); color: var(--ink); font: 400 1.4rem/1 var(--font-body); }
.lv-zoom button:hover { border-color: var(--line-strong); }
.lv-zoom .icon { width: 18px; height: 18px; }

/* The drawn map. */
.lv-sea-deep { fill: var(--sea-deep); }
.lv-sea { fill: var(--sea); }
.lv-land { fill: var(--land); stroke: oklch(0.8 0.135 78 / .5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lv-water { fill: var(--water); }
.lv-gridlines { fill: none; stroke: oklch(0.95 0.012 95 / .1); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lv-cells text { fill: oklch(0.95 0.012 95 / .32); font: 600 22px/1 var(--font-label); letter-spacing: .04em; opacity: 0; transition: opacity .2s; }
.lv-svg.is-near .lv-cells text { opacity: 1; }
.lv-ruler text { fill: oklch(0.95 0.012 95 / .55); font: 700 10px/1 var(--font-label); letter-spacing: .06em; }
.lv-svg.is-near .lv-ruler { display: none; }
.lv-svg.is-tight .lv-ruler [data-odd] { display: none; }
.lv-k { transform: translate(var(--x), var(--y)) scale(var(--k, 1)); }
.lv-mon circle { fill: var(--ink-2); stroke: var(--bg-deep); stroke-width: 1.5; }
.lv-mon text { fill: var(--ink-2); stroke: oklch(0.12 0.01 95 / .9); stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; font: 600 11px/1 var(--font-label); letter-spacing: .06em; text-transform: uppercase; }
.lv-mon--m text { fill: var(--ink); font-weight: 700; }
.lv-svg.is-far .lv-mon text { display: none; }
.lv-svg.is-far .lv-mon:hover text { display: inline; }
[data-off~="mon"] .lv-mons, [data-off~="grid"] .lv-gridlines, [data-off~="grid"] .lv-cells, [data-off~="grid"] .lv-ruler,
[data-off~="bosses"] .lv-layer--bosses, [data-off~="sites"] .lv-layer--sites, [data-off~="chain"] .lv-layer--chain, [data-off~="events"] .lv-layer--events { display: none; }

/* Markers: a disc with the type's icon; bosses carry a health bar, sites their tier. */
.lv-mk { cursor: pointer; }
.lv-mk__disc { stroke: oklch(0.1 0.01 95); stroke-width: 2; }
.lv-mk__ico { color: oklch(0.14 0.02 95); pointer-events: none; }
.lv-mk--bosses .lv-mk__disc { fill: var(--boss); }
.lv-mk--sites .lv-mk__disc { fill: var(--site); }
.lv-mk--chain .lv-mk__disc { fill: var(--chain); }
.lv-mk--events .lv-mk__disc { fill: var(--event); }
.lv-mk__ring { fill: none; stroke-width: 1.5; animation: lv-ring 2.2s var(--ease-out) infinite; transform-box: fill-box; transform-origin: center; }
.lv-mk--chain .lv-mk__ring, .lv-mk--bosses .lv-mk__ring { stroke: currentColor; }
.lv-mk--chain { color: var(--chain); }
.lv-mk--bosses { color: var(--boss); }
@keyframes lv-ring { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.lv-mk__bar { fill: oklch(0.1 0.01 95 / .85); }
.lv-mk__hp { fill: var(--danger); }
.lv-mk__tag { fill: var(--ink); stroke: oklch(0.1 0.01 95 / .95); stroke-width: 3px; paint-order: stroke; font: 700 10px/1 var(--font-label); letter-spacing: .05em; }
.lv-mk.is-focus .lv-mk__disc { stroke: var(--ink); stroke-width: 3; }

/* Panels. */
.lv-panel { padding: 16px 18px; border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel); }
.lv-panel__title { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: var(--ink); font: 700 .86rem/1 var(--font-label); letter-spacing: .18em; text-transform: uppercase; }
.lv-panel__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line), transparent); }
.lv-empty { margin: 0; color: var(--ink-3); font-size: .92rem; }

.lv-blight { position: relative; overflow: hidden; border-color: oklch(0.87 0.2 128 / .35); background: radial-gradient(120% 90% at 100% 0%, oklch(0.87 0.2 128 / .14), transparent 60%), var(--panel); }
.lv-blight__name { margin: 0; color: var(--blight); font: 400 clamp(2rem, 3.4vw, 2.7rem)/.95 var(--font-display); text-transform: uppercase; overflow-wrap: anywhere; }
.lv-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 12px 0 0; }
.lv-facts dt { color: var(--ink-3); font: 700 .72rem/1 var(--font-label); letter-spacing: .14em; text-transform: uppercase; }
.lv-facts dd { margin: 4px 0 0; color: var(--ink); font: 600 1.05rem/1.1 var(--font-label); font-variant-numeric: tabular-nums; }

.lv-group { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 6px; color: var(--ink-3); font: 700 .74rem/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; }
.lv-group:first-child { margin-top: 0; }
.lv-group small { color: var(--ink-2); font-size: .74rem; }
.lv-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lv-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: 4px; text-align: left; transition: background .15s; }
.lv-item:not(:disabled):hover { background: oklch(1 0 0 / .04); }
.lv-item:disabled { cursor: default; }
.lv-item__ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: oklch(0.14 0.02 95); }
.lv-item__ico .icon { width: 16px; height: 16px; }
.lv-item--bosses .lv-item__ico { background: var(--boss); }
.lv-item--sites .lv-item__ico { background: var(--site); }
.lv-item--chain .lv-item__ico { background: var(--chain); }
.lv-item--events .lv-item__ico { background: var(--event); }
.lv-item__main { display: grid; gap: 3px; min-width: 0; }
.lv-item__name { overflow: hidden; color: var(--ink); font: 600 1rem/1.1 var(--font-label); letter-spacing: .02em; text-overflow: ellipsis; white-space: nowrap; }
.lv-item__meta { color: var(--ink-3); font-size: .8rem; }
.lv-item__meta:empty { display: none; }
.lv-item__grid { padding: 4px 7px; border: 1px solid var(--line-soft); border-radius: 3px; color: var(--ink-2); font: 700 .8rem/1 var(--font-label); letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.lv-hp { display: block; height: 4px; border-radius: 99px; background: var(--bg-deep); overflow: hidden; }
.lv-hp i { display: block; height: 100%; background: linear-gradient(90deg, var(--danger), var(--ember)); }

.lv-hordes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lv-hordes li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 4px; background: oklch(0 0 0 / .25); color: var(--ink); font: 600 1rem/1.1 var(--font-label); }
.lv-hordes b { color: var(--blight); font: 400 1.2rem/1 var(--font-display); letter-spacing: .03em; }

.lv-tx__line { margin: 0 0 10px; color: var(--ink-2); font-size: .92rem; }
.lv-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.lv-slot { display: grid; gap: 4px; padding: 10px; border: 1px dashed var(--line-soft); border-radius: 4px; }
.lv-slot__part { color: var(--ink-2); font: 700 .9rem/1.1 var(--font-label); letter-spacing: .04em; overflow-wrap: anywhere; }
.lv-slot__state { color: var(--ink-3); font-size: .78rem; }
.lv-slot.is-got { border-style: solid; border-color: oklch(0.8 0.135 78 / .6); background: oklch(0.8 0.135 78 / .08); }
.lv-slot.is-got .lv-slot__part { color: var(--gold); }
.lv-slot.is-awake { border-style: solid; border-color: var(--ember); }
.lv-slot.is-awake .lv-slot__state { color: var(--ember); }

.lv-moments { display: grid; margin: 0; padding: 0; list-style: none; }
.lv-moment { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.lv-moment:first-child { border-top: 0; padding-top: 0; }
.lv-moment time { color: var(--ink-3); font: 600 .8rem/1.2 var(--font-label); letter-spacing: .05em; }
.lv-moment__text { color: var(--ink); overflow-wrap: anywhere; }
.lv-moment--chain .lv-moment__text, .lv-moment--world .lv-moment__text { color: var(--gold); }
.lv-moment--boss .lv-moment__text { color: oklch(0.86 0.1 45); }
.lv-moment__grid { color: var(--ink-3); font: 700 .78rem/1 var(--font-label); letter-spacing: .06em; }

@media (max-width: 999px) {
    .lv-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "map" "side" "feed"; }
    .lv-side { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
}
@media (max-width: 640px) {
    .lv { width: min(100% - 32px, 1480px); padding-top: 18px; }
    .lv-top { grid-template-columns: minmax(0, 1fr); }
    .lv-stats { width: 100%; }
    .lv-stat { flex: 1; min-width: 0; }
    .lv-moment { grid-template-columns: minmax(0, 1fr) auto; }
    .lv-moment time { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .lv-beacon::after, .lv-mk__ring { animation: none; }
}