/* Home page: the live world as a scoreboard, built for a large desktop screen (index.html + js/home.js).
   Builds on css/landing.css (nav, footer, --lp-* variables). The page uses the full width of the screen;
   every group is a table with real columns, and every body row has the same height. No cards, no
   gradients, no glow. */

:root {
  --live: #2ecc71;
  --danger: #e5604f;
  --warn: #e7b93c;
  --line: #2c2c2c;
  --panel: #141414;
  --band: #1c1c1c;
  --row-h: 60px;
  --page-w: 1760px;
}

/* the navigation lines up with the page */
.nav-inner { max-width: var(--page-w); }
.wrap { width: min(var(--page-w), calc(100% - 64px)); margin: 0 auto; }

.gold { color: var(--lp-gold); }
.muted, .dm { color: var(--lp-muted); }
.tick, .count, td, th { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--lp-gold); outline-offset: 2px; }

/* ===== the map card, with the live status inside it ===== */
.home-head { padding: 28px 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.live-pill { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: 6px; font-size: 19px; font-weight: 600; color: var(--lp-muted); }
.live-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--lp-muted); flex: none; }
.live-pill[data-state="live"] { color: var(--lp-text); }
.live-pill[data-state="live"] .live-dot { background: var(--live); }
.live-pill[data-state="delayed"], .live-pill[data-state="waiting"] { color: var(--warn); }
.live-pill[data-state="delayed"] .live-dot, .live-pill[data-state="waiting"] .live-dot { background: var(--warn); }
.live-pill[data-state="offline"] { color: var(--danger); }
.live-pill[data-state="offline"] .live-dot { background: var(--danger); }

.mapband { display: flex; gap: 36px; align-items: center; padding: 20px 28px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; }
/* the whole world map, uncropped: the four zoom-1 tiles side by side in a square */
.world { flex: none; position: relative; display: block; width: 240px; height: 240px; overflow: hidden; border: 1px solid var(--line); border-radius: 2px; background: #0a0a0a; }
.world-grid { position: absolute; left: 0; top: 0; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
.world-grid img { display: block; width: 100%; height: auto; }
.mapband-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.mapband-main h2 { font-family: var(--lp-font); font-size: 30px; font-weight: 600; line-height: 1.25; color: var(--lp-text); }
.mapband-main p { font-size: 19px; line-height: 1.5; color: var(--lp-muted); }
.btn-open { flex: none; min-width: 300px; padding: 22px 56px; text-align: center; font-size: 22px; font-weight: 600; color: #111; background: var(--lp-gold); border-radius: 3px; white-space: nowrap; }
.btn-open:hover { color: #111; background: #f5c76d; }

/* ===== tabs ===== */
.tabs { display: flex; position: sticky; top: 56px; z-index: 5; background: var(--panel); border: 1px solid var(--line); border-bottom: none; border-radius: 4px 4px 0 0; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: 1 1 0; min-width: 120px; padding: 18px 24px; font: inherit; font-size: 19px; color: var(--lp-muted); background: none; border: none; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--lp-text); background: #191919; }
.tab[aria-selected="true"] { color: var(--lp-text); font-weight: 600; border-bottom-color: var(--lp-gold); }
.tab[data-live="true"]::after { content: ""; display: inline-block; width: 8px; height: 8px; margin-left: 9px; vertical-align: 3px; border-radius: 50%; background: var(--danger); }

/* ===== panels, groups, tables ===== */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 0 0 4px 4px; }
.panel[hidden] { display: none; }

.gh { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 0 24px; background: var(--band); border-top: 1px solid var(--line); }
.group:first-child .gh { border-top: none; }
.gh h2 { font-family: var(--lp-font); font-size: 15px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--lp-text); line-height: 1; }
.gh .more { font: inherit; font-size: 16px; color: var(--lp-gold); background: none; border: none; cursor: pointer; padding: 0; }
.gh .more:hover { color: #f5c76d; }

.tbl { width: 100%; overflow-x: auto; }
.grid { width: 100%; min-width: 980px; border-collapse: collapse; table-layout: fixed; }
.grid th { height: 42px; padding: 0 24px; text-align: left; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #8a8a8a; background: #101010; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.grid td { height: var(--row-h); padding: 0 24px; font-size: 18px; line-height: 1.35; color: var(--lp-text); border-bottom: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid tbody tr:last-child td { border-bottom: none; }
.grid .r, .grid th.r { text-align: right; }
.grid tr[data-href], .grid tr[data-death], .grid tr[data-more] { cursor: pointer; }
.grid tbody tr:hover td { background: #1a1a1a; }
.grid tr.quiet td { color: var(--lp-muted); }
.grid tr.accent td:first-child { box-shadow: inset 4px 0 0 var(--c); }
.grid td a { color: inherit; border-bottom: 1px solid #555; }
.grid td a:hover { color: var(--lp-gold); border-bottom-color: var(--lp-gold); }
.grid td small, .grid td .dm { font-size: 15px; }
.grid td b { font-weight: 600; }
.grid .st { font-size: 14px; font-weight: 700; letter-spacing: 0.05em; color: var(--lp-muted); }
.grid .st[data-tone="ok"], .grid .st[data-tone="up"] { color: var(--live); }
.grid .st[data-tone="soon"] { color: var(--warn); }
.grid .st[data-tone="live"], .grid .st[data-tone="down"] { color: var(--danger); }
.grid .num { font-size: 20px; font-weight: 600; }
.grid .when { color: var(--lp-muted); font-size: 16px; }
.dot { display: inline-block; width: 11px; height: 11px; margin-right: 10px; border-radius: 50%; background: var(--c, var(--lp-muted)); vertical-align: -1px; }
.kill-clan { font-size: 15px; color: var(--c, var(--lp-muted)); }

.bag td { height: auto; padding: 12px 24px 14px 160px; background: #101010; white-space: normal; font-size: 16px; color: var(--lp-muted); line-height: 1.7; }
.bag ul { list-style: none; columns: 3; column-gap: 32px; }
.bag li { break-inside: avoid; }

.bar { display: inline-block; width: 100%; max-width: 220px; height: 8px; background: #262626; border-radius: 1px; vertical-align: middle; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--c, var(--lp-gold)); }

.meter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; min-height: var(--row-h); padding: 0 24px; border-top: 1px solid var(--line); font-size: 18px; }
.segbar { display: flex; width: 100%; height: 12px; background: #262626; border-radius: 1px; overflow: hidden; }
.segbar span { display: block; height: 100%; }
.meter .bar { max-width: none; height: 12px; }

.star { cursor: pointer; color: var(--lp-muted); font-size: 22px; line-height: 1; background: none; border: none; padding: 4px 8px; }
.star.on { color: var(--lp-gold); }
.badge { padding: 2px 10px; font-size: 14px; color: var(--lp-muted); border: 1px solid var(--line); border-radius: 3px; }

.note { padding: 24px; font-size: 18px; color: var(--lp-muted); }
.error-note { padding: 24px; font-size: 18px; color: var(--danger); }

/* ===== controls ===== */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 24px; border-bottom: 1px solid var(--line); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg-btn { padding: 9px 20px; font: inherit; font-size: 16px; color: var(--lp-muted); background: none; border: none; border-right: 1px solid var(--line); cursor: pointer; }
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { color: var(--lp-text); }
.seg-btn.active { color: #111; background: var(--lp-gold); font-weight: 600; }
.field { min-height: 42px; padding: 0 14px; font: inherit; font-size: 16px; color: var(--lp-text); background: #0f0f0f; border: 1px solid var(--line); border-radius: 3px; }
input.field { flex: 1 1 280px; max-width: 420px; }
.field::placeholder { color: #777; }

.bell { padding: 9px 18px; font: inherit; font-size: 16px; color: var(--lp-muted); background: none; border: 1px solid var(--line); border-radius: 3px; cursor: pointer; }
.bell:hover { color: var(--lp-text); }
.bell[aria-pressed="true"] { color: #111; background: var(--lp-gold); border-color: var(--lp-gold); }
.bell[hidden] { display: none; }
.alert-buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.alert-hint { padding: 12px 24px; font-size: 16px; color: var(--warn); border-bottom: 1px solid var(--line); }
.alert-prefs { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 14px 24px; font-size: 16px; border-bottom: 1px solid var(--line); background: #101010; }
.alert-prefs[hidden], .alert-hint[hidden] { display: none; }
.alert-prefs label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.alert-prefs small { flex-basis: 100%; color: var(--lp-muted); }

.footnote { padding: 14px 24px; font-size: 15px; color: var(--lp-muted); border-top: 1px solid var(--line); }
.community { margin: 28px 0 40px; font-size: 16px; color: var(--lp-muted); text-align: center; }

/* ===== smaller screens: the tables scroll sideways instead of squeezing ===== */
@media (max-width: 1200px) {
  .wrap { width: calc(100% - 32px); }
  .mapband { flex-direction: column; align-items: stretch; }
  .world { align-self: center; }
  .btn-open { min-width: 0; width: 100%; }
}