/* ops.css - the watch page (watch.html): a dark console. Blue side and Red side have one colour each everywhere
   on the page.
   The page has two views of a game (body.simple | body.detail) and a wall of all games (body.wall).
   DETAIL: one screen on a desktop (1280 px and wider, 760 px and taller): bar, seek row, game view + model
   panels, tabs; every panel scrolls inside itself. Narrower or shorter: the parts stack and the page scrolls.
   SIMPLE (the view the page opens in; its rules are at the end of this file): a top line, the game picture large,
   three cards beside it, health and moments under it, in larger type; the panels of the detail view are not
   shown. The wall: a grid of tiles, four across on a desktop, two on a tablet, one on a phone. */
:root {
  --bg: #05080b; --panel: #0a1016; --panel2: #0d151c; --line: #18252f; --line2: #263847;
  --ink: #d6e5ef; --muted: #7d94a5; --dim: #50677a;
  --acc: #39d9c2; --acc-soft: rgba(57,217,194,.14);
  --blue: #4da3ff; --red: #ff5f5f; --blue-soft: rgba(77,163,255,.16); --red-soft: rgba(255,95,95,.16);
  --amber: #ffb547; --good: #45d483; --bad: #ff5f5f;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  /* the names static/draw.js reads for the MAP tab (HOKDraw.readColors); own = Blue, foe = Red */
  --own: #4da3ff; --foe: #ff5f5f; --own-soft: #2c5e94; --foe-soft: #8f3a3a;
  --neutral: #b9c46a; --boss: #f0a43a; --health: #45d483; --grey: #4a5866; --ep: #7f8cff;
  --warn: #ffb547; --aggro: #ffd36b;
  --map-bg: #070b10; --map-ground: #16212b; --map-outline: #6f8798; --map-lane: #3a4d5d;
  --map-halo: rgba(4,8,12,.9); --map-camp: #b9c46a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 12px/1.45 var(--mono); min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; }
/* a desktop: one screen, never shorter than the panels need (a shorter window scrolls a little) */
@media (min-width: 1101px) { body { height: max(100vh, 1000px); } #grid { flex: 1 1 0; min-height: 0; } }
button, select, input { font: inherit; color: inherit; }
a { color: var(--acc); }
.grow { flex: 1 1 auto; }
.dim { color: var(--muted); }
.blue { color: var(--blue); } .red { color: var(--red); }
.tag { color: var(--acc); letter-spacing: .14em; font-weight: 700; font-size: 11px; white-space: nowrap; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 4px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------------------------------------------------------------- bar */
#bar { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line); background: var(--panel); min-width: 0; }
.brand { color: var(--acc); font-weight: 800; letter-spacing: .18em; font-size: 13px; white-space: nowrap; }
.brand i { color: var(--dim); font-style: normal; }
.match { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); padding-left: 6px; flex: 0 1 auto; }
.match b { font-weight: 700; }
.btn, .seg button, .mini, #speedSel { background: transparent; border: 1px solid var(--line2); color: var(--ink); padding: 3px 10px; cursor: pointer;
  letter-spacing: .08em; font-size: 11px; border-radius: 2px; white-space: nowrap; text-decoration: none; line-height: 16px; }
.btn:hover, .seg button:hover, .mini:hover { border-color: var(--acc); color: var(--acc); }
.btn.on, .seg button.on { border-color: var(--acc); color: #04110f; background: var(--acc); font-weight: 700; }
.btn:disabled, .seg button:disabled { opacity: .35; cursor: default; border-color: var(--line2); color: var(--ink); }
.seg { display: inline-flex; align-items: center; }
.seg button + button { margin-left: -1px; }
.seg .lbl { color: var(--muted); font-size: 11px; letter-spacing: .1em; margin-right: 6px; }
.seg button.blue.on { background: var(--blue); border-color: var(--blue); color: #041018; }
.seg button.red.on { background: var(--red); border-color: var(--red); color: #180404; }
.seg button.wide { min-width: 64px; }
.mini { padding: 1px 7px; font-size: 10px; }
#speedSel { padding: 3px 4px; background: var(--panel); }
#btnLive.on { background: var(--bad); border-color: var(--bad); color: #180404; }

#seekrow { display: flex; align-items: center; gap: 10px; padding: 4px 12px 5px; border-bottom: 1px solid var(--line); background: var(--panel); }
.clock { color: var(--ink); font-size: 15px; font-weight: 700; min-width: 132px; white-space: nowrap; }
.clock small { color: var(--muted); font-weight: 400; font-size: 11px; margin-left: 8px; }
.clockend { color: var(--muted); min-width: 150px; text-align: right; white-space: nowrap; }
#seekwrap { position: relative; flex: 1 1 auto; height: 22px; min-width: 60px; }
#ticks { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; }
#seek { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
#seek::-webkit-slider-runnable-track { height: 4px; background: var(--line2); border-radius: 2px; }
#seek::-webkit-slider-thumb { -webkit-appearance: none; width: 4px; height: 18px; margin-top: -7px; background: var(--acc); border-radius: 1px; box-shadow: 0 0 8px var(--acc); }
#seek::-moz-range-track { height: 4px; background: var(--line2); border-radius: 2px; }
#seek::-moz-range-thumb { width: 4px; height: 18px; background: var(--acc); border: 0; border-radius: 1px; }

/* ---------------------------------------------------------------- grid */
#grid { flex: 1 1 auto; min-height: 0; display: grid; gap: 8px; padding: 8px 12px 10px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); grid-template-rows: minmax(0, 2.16fr) minmax(0, 1fr); }
#colL { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#colR { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 5px; min-height: 0; min-width: 0; }
#bottom { grid-column: 1 / 3; grid-row: 2; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
@media (max-width: 1100px) {
  #grid { display: flex; flex-direction: column; }
  #stage { height: min(52vw, 520px); min-height: 260px; flex: none; }
  #colR .panel { flex: none; max-height: none; }
  #colR .pb { max-height: 420px; }
  #bottom { min-height: 460px; }
  #bar, #seekrow { flex-wrap: wrap; }
}

.box { border: 1px solid var(--acc); border-radius: 3px; background: var(--panel); display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0;
  box-shadow: 0 0 0 1px rgba(57,217,194,.08), inset 0 0 24px rgba(57,217,194,.04); }
.boxhead { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--line); min-width: 0; }
#viewNote { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
/* the mode line: what the mode is doing, and the recording buttons (the switch between the modes is in the bar) */
#modeLine { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-bottom: 1px solid var(--line); min-width: 0; white-space: nowrap; min-height: 26px; }
#modeSeg { flex: none; margin-left: 6px; }
#modeSeg button[data-mode="live"].on { background: var(--bad); border-color: var(--bad); color: #180404; }
#modePos { color: var(--ink); font-weight: 700; flex: none; }
/* a league game says what it is for after the mode's own words: on a phone, where one row cannot hold both, on a row of its own */
@media (max-width: 620px) { #modeLine.staged { flex-wrap: wrap; row-gap: 0; } #modeLine.staged #modeNote { flex: 1 1 100%; order: 5; white-space: normal; } }
#modeNote { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#recNav { display: inline-flex; gap: 4px; flex: none; }
#recNav .mini:disabled { opacity: .35; cursor: default; }
/* what the picture says when a mode has nothing to show */
#modeMsg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: min(460px, 86%); text-align: center; z-index: 2;
  background: rgba(4,8,12,.92); border: 1px solid var(--line2); border-radius: 3px; padding: 16px 20px; }
#modeMsgText { color: var(--ink); font-size: 13px; line-height: 1.5; }
#modeMsgBtn { margin-top: 12px; }
#stage { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; background: #070b10; border-radius: 0 0 3px 3px; }
#view { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#video { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; object-fit: contain; }
#killBanner { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(4,8,12,.88); border: 1px solid var(--line2);
  padding: 5px 14px; font-size: 13px; font-weight: 700; letter-spacing: .06em; white-space: nowrap; border-radius: 2px; pointer-events: none; }
#killBanner .x { color: var(--amber); margin: 0 10px; }
#viewMsg { position: absolute; left: 10px; bottom: 8px; color: var(--muted); background: rgba(4,8,12,.8); padding: 2px 8px; border-radius: 2px; pointer-events: none; }
#tip { position: absolute; background: rgba(4,8,12,.95); border: 1px solid var(--line2); padding: 4px 8px; pointer-events: none; z-index: 3; max-width: 260px; font-size: 11px; }

.status { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 5px 2px 2px; color: var(--muted); font-size: 11px; min-height: 22px; }
.status b { color: var(--ink); font-weight: 600; }
.status .k { letter-spacing: .08em; margin-right: 5px; }
.status .warn { color: var(--amber); }
#goalLine { padding: 2px 2px 0; min-height: 62px; }
#goalLine .g1 { display: flex; align-items: baseline; gap: 10px; }
#goalLine .k { color: var(--muted); letter-spacing: .14em; font-size: 12px; }
#goalLine .plan { color: var(--amber); font-size: 21px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; line-height: 26px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#goalLine .plan.raw { font-size: 14px; letter-spacing: .02em; text-transform: none; white-space: normal; }
#goalLine .g2 { color: var(--ink); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; }
#goalLine .g2 .l { color: var(--muted); letter-spacing: .12em; font-size: 10px; padding-top: 1px; }
#goalLine .g2 .v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------------------------------------------------------- panels */
.panel { border: 1px solid var(--line2); border-radius: 3px; background: var(--panel); display: flex; flex-direction: column; min-height: 46px; flex: 0 1 auto; min-width: 0; }
.panel.flex { flex: 1 1 120px; min-height: 104px; }
#pStrategy, #pJudg { flex-shrink: 0; }
#pAct { flex-shrink: 0; }
.ph { display: flex; align-items: center; gap: 8px; padding: 3px 8px; border-bottom: 1px solid var(--line); min-width: 0; flex: none; }
.ph .who { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ph .who b { color: var(--ink); font-weight: 600; }
.ph .dim { white-space: nowrap; }
.pb { padding: 5px 8px; overflow: auto; min-height: 0; flex: 1 1 auto; }
.empty { color: var(--muted); padding: 4px 0; }
.note { color: var(--amber); border-left: 2px solid var(--amber); padding: 1px 8px; margin: 0 0 6px; background: rgba(255,181,71,.07); }
.note.info { color: var(--muted); border-color: var(--line2); background: transparent; }
.fail { color: var(--bad); border: 1px solid var(--bad); padding: 3px 8px; margin: 0 0 6px; background: rgba(255,95,95,.08); }
.fail b { letter-spacing: .1em; }
pre, .txt { font: 12px/1.45 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; color: var(--ink); }
.lab { color: var(--muted); letter-spacing: .12em; font-size: 10px; margin: 6px 0 2px; display: flex; gap: 8px; align-items: baseline; }
.lab:first-child { margin-top: 0; }
.lab .src { letter-spacing: 0; color: var(--dim); }
.code { color: var(--dim); }
.kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1px 20px; align-items: baseline; }
.kv > div { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kv .l { color: var(--muted); letter-spacing: .1em; font-size: 10px; white-space: nowrap; margin-right: 10px; }
.badge { display: inline-block; border: 1px solid currentColor; padding: 0 7px; letter-spacing: .12em; font-weight: 700; font-size: 11px; text-transform: uppercase; border-radius: 2px; line-height: 16px; }
.plan-push { color: #ff7a59; } .plan-farm { color: #7bd65b; } .plan-trade { color: #ffb547; } .plan-defend { color: #59c8ff; }
.plan-retreat { color: #ff8ad1; } .plan-recall { color: #9db2c4; } .plan-other { color: var(--ink); }
.prog { display: inline-block; vertical-align: middle; width: 120px; height: 3px; background: var(--line2); margin: 0 8px; border-radius: 2px; overflow: hidden; }
.prog i { display: block; height: 100%; width: 0; background: var(--acc); }
.goalbox { margin-bottom: 4px; }
.goalbox .l { color: var(--muted); letter-spacing: .1em; font-size: 10px; margin: 0 8px 0 0; }
.goalbox .badge { margin-right: 14px; }
.reply { border: 1px solid var(--line); background: var(--panel2); padding: 3px 8px; color: #bfe9df; margin-top: 4px; }
.reply .rl { color: var(--muted); letter-spacing: .12em; font-size: 10px; margin-right: 10px; }
.reply .rl .src { letter-spacing: 0; color: var(--dim); }

/* judgments */
.q { display: flex; gap: 8px; align-items: baseline; margin-bottom: 5px; }
.qtag { border: 1px solid var(--acc); color: var(--acc); padding: 0 6px; letter-spacing: .12em; font-size: 10px; font-weight: 700; flex: none; line-height: 15px; }
.qtext { color: var(--ink); min-width: 0; cursor: pointer; }
.qtext.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qtext .src { color: var(--dim); }
.bars { display: grid; grid-template-columns: max-content minmax(60px, 1fr) max-content max-content; gap: 2px 10px; align-items: center; margin-bottom: 4px; line-height: 16px; }
.bars .on { color: var(--muted); white-space: nowrap; }
.bars .on i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 1px; vertical-align: baseline; }
.bars .bar { height: 7px; background: #111b23; position: relative; }
.bars .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #2b6f66; }
.bars .pc { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.bars .mk { color: var(--dim); font-size: 10px; letter-spacing: .08em; white-space: nowrap; }
.bars .chosen.on { color: #fff; font-weight: 700; }
.bars .chosen.bar i { background: var(--acc); box-shadow: 0 0 10px rgba(57,217,194,.7); }
.bars .chosen.pc { color: var(--acc); font-weight: 700; }
.bars .chosen.mk { color: var(--acc); }
.jmeta { color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 14px; align-items: center; }
.jmeta b { color: var(--ink); font-weight: 600; }
.chips { display: flex; align-items: center; gap: 2px; margin-top: 6px; flex-wrap: nowrap; overflow: hidden; }
.chips .cl { color: var(--muted); letter-spacing: .1em; font-size: 10px; margin-right: 8px; white-space: nowrap; }
.chips i { display: block; width: 11px; height: 13px; border-radius: 1px; flex: none; opacity: .85; }
.chips i.bad { background: transparent !important; outline: 1px solid var(--bad); outline-offset: -1px; }
.chips i.now { outline: 1.5px solid #fff; outline-offset: 1px; opacity: 1; }
.chips .nm { margin-left: 8px; color: var(--muted); white-space: nowrap; }

/* situation report */
.blk { margin-bottom: 6px; }
details { margin: 4px 0 0; }
details > summary { cursor: pointer; color: var(--muted); letter-spacing: .1em; font-size: 10px; list-style: none; padding: 2px 0; user-select: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: '+ '; color: var(--acc); }
details[open] > summary::before { content: '- '; }
details > summary .src { letter-spacing: 0; color: var(--dim); margin-left: 6px; }
.crit { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; padding: 2px 0 4px 12px; }
.crit .n { color: var(--ink); font-weight: 600; white-space: nowrap; }
.crit .n i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 1px; }
.crit .d { color: var(--muted); }
.inputs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px 16px; margin-bottom: 6px; }
.inputs div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px dotted var(--line); }
.inputs .l { color: var(--muted); }

/* action: one line under the other panels */
#pAct { min-height: 0; }
#pAct .ph { border-bottom: 0; flex-wrap: wrap; padding: 4px 8px; gap: 2px 14px; }
#actBody { display: contents; }
.act { display: contents; }
.act > span { white-space: nowrap; }
.act .l { color: var(--muted); letter-spacing: .1em; font-size: 10px; margin-right: 8px; }
.act b { font-weight: 700; }
.act .sk { display: inline-block; border: 1px solid currentColor; padding: 0 7px; font-weight: 700; border-radius: 2px; line-height: 16px; }

/* ---------------------------------------------------------------- bottom tabs */
#tabs { display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--line2); flex: none; }
#tabs button { background: transparent; border: 1px solid transparent; border-bottom: 0; color: var(--muted); padding: 3px 14px; letter-spacing: .14em; font-size: 11px; cursor: pointer; margin-bottom: -1px; }
#tabs button:hover { color: var(--acc); }
#tabs button.on { color: var(--acc); border-color: var(--line2); background: var(--panel); font-weight: 700; }
#tabNote { padding-right: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tab { flex: 1 1 auto; min-height: 0; display: flex; gap: 10px; padding-top: 8px; }
.colhead { color: var(--acc); letter-spacing: .14em; font-size: 11px; font-weight: 700; padding-bottom: 4px; flex: none; }
.colhead .dim { letter-spacing: 0; font-weight: 400; margin-left: 8px; }
#mapWrap { flex: none; height: 100%; aspect-ratio: 1 / 1; min-height: 0; border: 1px solid var(--line2); background: #070b10; position: relative; }
#map { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#board { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 6px; overflow: auto; }
#events, #ctxCalls { flex: 0 1 380px; min-width: 220px; display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); padding-left: 10px; }
#evList, #ctxList { list-style: none; margin: 0; padding: 0; overflow: auto; min-height: 0; flex: 1 1 auto; position: relative; }
#evList li, #ctxList li { padding: 1px 4px; cursor: pointer; display: flex; gap: 8px; align-items: baseline; border-left: 2px solid transparent; }
#evList li:hover, #ctxList li:hover { background: var(--panel2); }
#evList li.future, #ctxList li.future { opacity: .42; }
#evList li.now, #ctxList li.now { border-left-color: var(--acc); background: var(--acc-soft); }
#evList .t, #ctxList .t { color: var(--muted); flex: none; width: 40px; text-align: right; font-variant-numeric: tabular-nums; }
#ctxList .r { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#ctxList .badge { font-size: 10px; flex: none; min-width: 64px; text-align: center; }
.card { border: 1px solid var(--line2); background: var(--panel); padding: 6px 8px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 10px; align-items: start; }
.card.b1 { border-left: 3px solid var(--blue); } .card.b2 { border-left: 3px solid var(--red); }
.card .face { width: 52px; height: 52px; border-radius: 50%; border: 2px solid var(--line2); background: #111b23 center/cover no-repeat; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--muted); }
.card.b1 .face { border-color: var(--blue); } .card.b2 .face { border-color: var(--red); }
.card .face.dead { filter: grayscale(1) brightness(.6); }
.card .nm { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.card .nm b { font-size: 13px; }
.card .st { color: var(--muted); }
.card .hb { display: grid; grid-template-columns: 28px minmax(0, 1fr) max-content; gap: 2px 8px; align-items: center; margin-top: 3px; }
.card .hb .l { color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.card .hb .b { height: 6px; background: #111b23; }
.card .hb .b i { display: block; height: 100%; }
.card .hb .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.card .row2 { grid-column: 1 / 3; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; color: var(--muted); }
.card .row2 b { color: var(--ink); font-weight: 600; }
.sks { display: flex; gap: 4px; }
.skc { width: 30px; height: 30px; position: relative; border: 1px solid var(--line2); background: #111b23 center/cover no-repeat; font-size: 9px; color: var(--muted); display: flex; align-items: flex-end; justify-content: flex-start; }
.skc span { background: rgba(4,8,12,.8); padding: 0 2px; line-height: 11px; }
.skc .cd { position: absolute; inset: 0; background: rgba(4,8,12,.72); color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.skc.unk { opacity: .55; }
.its { display: flex; gap: 3px; }
.itc { width: 24px; height: 24px; border: 1px solid var(--line2); background: #111b23 center/cover no-repeat; }

/* context tab */
#ctxMain { flex: 1 1 auto; min-width: 0; overflow: auto; padding-right: 6px; }
#ctxMain .hd { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin-bottom: 4px; color: var(--muted); }
#ctxMain .hd b { color: var(--ink); }
#ctxMain details { border: 1px solid var(--line); background: var(--panel); margin: 0 0 4px; }
#ctxMain details > summary { padding: 3px 8px; font-size: 11px; color: var(--ink); letter-spacing: .1em; display: flex; gap: 10px; align-items: baseline; }
#ctxMain details > summary .sz { color: var(--muted); letter-spacing: 0; }
#ctxMain details > pre { padding: 4px 10px 8px 22px; border-top: 1px solid var(--line); }
#ctxMain details.rep > pre { color: #bfe9df; }

/* graph tab */
#graph { flex: 1 1 auto; min-width: 0; overflow: auto; display: flex; align-items: stretch; gap: 0; padding: 4px 2px 8px; }
.gn { border: 1px solid var(--line2); background: var(--panel); border-radius: 3px; padding: 6px 9px; min-width: 150px; flex: 1 1 0; display: flex; flex-direction: column; gap: 3px; min-height: 0; overflow: hidden; }
.gn.wide { flex: 1.5 1 0; min-width: 230px; }
.gn .gt { color: var(--muted); letter-spacing: .14em; font-size: 10px; font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.gn .gt .m { letter-spacing: 0; font-weight: 400; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.gn .gv { font-size: 14px; font-weight: 800; letter-spacing: .04em; overflow-wrap: anywhere; }
.gn .gs { color: var(--muted); overflow: hidden; }
.gn.lit { border-color: var(--acc); box-shadow: 0 0 12px rgba(57,217,194,.28), inset 0 0 18px rgba(57,217,194,.06); }
.gn.lit .gt { color: var(--acc); }
.gn.pulse { border-color: var(--amber); box-shadow: 0 0 14px rgba(255,181,71,.4); }
.gn.pulse .gt { color: var(--amber); }
.gn.off { opacity: .5; }
.ge { flex: none; width: 34px; display: flex; align-items: center; justify-content: center; position: relative; color: var(--line2); }
.ge::before { content: ''; position: absolute; left: 0; right: 7px; top: 50%; height: 2px; background: currentColor; }
.ge::after { content: ''; position: absolute; right: 0; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.ge.lit { color: var(--acc); filter: drop-shadow(0 0 4px rgba(57,217,194,.7)); }
.ge.pulse { color: var(--amber); }
.gopts { display: grid; grid-template-columns: max-content minmax(30px, 1fr) max-content; gap: 2px 8px; align-items: center; }
.gopts .n { color: var(--muted); white-space: nowrap; }
.gopts .b { height: 5px; background: #111b23; } .gopts .b i { display: block; height: 100%; background: #2b6f66; }
.gopts .p { color: var(--muted); text-align: right; }
.gopts .ch.n { color: #fff; font-weight: 700; } .gopts .ch.b i { background: var(--acc); } .gopts .ch.p { color: var(--acc); font-weight: 700; }

/* sync tab */
#syncMain { flex: 1 1 auto; min-width: 0; overflow: auto; padding-right: 6px; }
#syncEvents { flex: 0 1 420px; min-width: 240px; border-left: 1px solid var(--line); padding-left: 10px; overflow: auto; }
#syncMain .row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin-bottom: 6px; }
#syncMain input[type=text] { background: var(--panel2); border: 1px solid var(--line2); padding: 2px 8px; width: 96px; }
#syncMain input[type=text]:focus { outline: none; border-color: var(--acc); }
#syncMain table { border-collapse: collapse; margin: 2px 0 6px; }
#syncMain th, #syncMain td { text-align: right; padding: 1px 12px 1px 0; font-weight: 400; font-variant-numeric: tabular-nums; }
#syncMain th { color: var(--muted); letter-spacing: .08em; font-size: 10px; }
#syncMain td.c { text-align: left; }
#syncMain .big { font-size: 15px; font-weight: 700; }
#syncMain .ok { color: var(--good); } #syncMain .unsaved { color: var(--amber); }
#syncEvents ul { list-style: none; margin: 0; padding: 0; }
#syncEvents li { display: flex; gap: 8px; padding: 1px 4px; cursor: pointer; border-left: 2px solid transparent; }
#syncEvents li:hover { background: var(--panel2); }
#syncEvents li.past { opacity: .55; }
#syncEvents li.nowline { border-top: 1px dashed var(--acc); color: var(--acc); cursor: default; padding-top: 2px; margin-top: 2px; }
#syncEvents .t { color: var(--muted); width: 46px; text-align: right; flex: none; }
#syncEvents .dt { color: var(--dim); width: 58px; text-align: right; flex: none; }

/* ---------------------------------------------------------------- sessions drawer */
#drawer { position: fixed; right: 0; top: 0; bottom: 0; width: min(520px, 96vw); background: #080d12; border-left: 1px solid var(--acc); z-index: 20;
  display: flex; flex-direction: column; padding: 8px 10px; gap: 6px; box-shadow: -18px 0 40px rgba(0,0,0,.6); }
#drawer .dh { display: flex; align-items: center; gap: 10px; }
#sessSearch { background: var(--panel2); border: 1px solid var(--line2); padding: 5px 8px; width: 100%; }
#sessSearch:focus { outline: none; border-color: var(--acc); }
#sessList { overflow: auto; flex: 1 1 auto; min-height: 0; }
.sess { padding: 5px 8px; border: 1px solid var(--line); margin-bottom: 4px; cursor: pointer; background: var(--panel); }
.sess:hover { border-color: var(--acc); }
.sess.sel { border-color: var(--acc); background: var(--acc-soft); }
.sess .l1 { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.sess .l2, .sess .l3 { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess .l3 { color: var(--dim); }
.sess .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.sess .dot.live { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.sess .dot.finished { background: var(--good); }
.sess .dot.stalled, .sess .dot.exited { background: var(--amber); }
.sess .bd { border: 1px solid var(--line2); color: var(--muted); font-size: 10px; padding: 0 5px; letter-spacing: .06em; }
.sess .bd.full { border-color: var(--acc); color: var(--acc); }
.sechead { color: var(--muted); letter-spacing: .14em; font-size: 10px; margin: 6px 0 3px; }
/* the recordings in the drawer */
.sechead.rechead { display: flex; align-items: center; gap: 8px; color: var(--acc); }
.sechead.rechead .n { color: var(--muted); letter-spacing: .04em; }
.sechead.rechead .mini.on { border-color: var(--acc); color: #04110f; background: var(--acc); font-weight: 700; }
.sess .bd.pic { border-color: var(--amber); color: var(--amber); }
.sess .bd.now { border-color: var(--acc); color: #04110f; background: var(--acc); }
.sess.off { cursor: default; opacity: .5; }
.sess.off:hover { border-color: var(--line); }
.recmore { margin: 0 0 6px; }

/* ---------------------------------------------------------------- ABOUT: the page in plain words, over the picture */
#about { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); width: min(760px, 94vw); max-height: calc(100vh - 80px);
  background: #080d12; border: 1px solid var(--acc); border-radius: 3px; z-index: 21; display: flex; flex-direction: column;
  padding: 10px 14px; gap: 6px; box-shadow: 0 18px 60px rgba(0,0,0,.7); }
#about .dh { display: flex; align-items: center; gap: 10px; }
#about .abody { overflow: auto; font-size: 13px; line-height: 1.6; }
#about p { margin: 0 0 10px; }
#about b { color: var(--acc); font-weight: 700; }
.pubonly { display: none; }

/* ---------------------------------------------------------------- the public site (<html class="public">, set by
   server.py in public mode): the controls whose routes are not served there are not shown */
html.public #classicLink, html.public #tabs button[data-tab="sync"], html.public #tabSync { display: none !important; }
html.public .pubonly { display: inline; }

/* ---------------------------------------------------------------- the bare look (;bare=1), a screen left running:
   while nobody touches the page the controls around the picture and the pointer are gone */
body.bare.idle, body.bare.idle * { cursor: none !important; }
body.bare.idle #seekrow, body.bare.idle #bar > .btn, body.bare.idle #bar > .seg, body.bare.idle #speedSel,
body.bare.idle #viewBox > .boxhead, body.bare.idle #modeLine, body.bare.idle #wallHead { display: none !important; }

/* ---------------------------------------------------------------- a team game: one card per hero (#teamRow) */
#teamRow { padding: 6px 12px 0; flex: none; }
#teamCards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1100px) { #teamCards { grid-template-columns: minmax(0, 1fr); } }
.tcard { border: 1px solid var(--line2); border-radius: 3px; background: var(--panel); padding: 4px 8px 5px; cursor: pointer; min-width: 0;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 2px 14px; align-content: start; }
.tcard:hover { border-color: var(--acc); }
.tcard.sel { border-color: var(--acc); box-shadow: 0 0 0 1px rgba(57,217,194,.3), inset 0 0 22px rgba(57,217,194,.07); }
.tcard .l { color: var(--muted); letter-spacing: .12em; font-size: 10px; margin-right: 6px; flex: none; }
.tcard .th { grid-column: 1 / 3; display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; }
.tcard .th b { font-size: 13px; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; }
.tcard .th .face { width: 20px; height: 20px; border-radius: 50%; background: var(--panel2) center/cover no-repeat; border: 1px solid var(--line2); flex: none;
  font-size: 9px; line-height: 18px; text-align: center; color: var(--muted); }
.tcard .th .st { color: var(--ink); }
.tcard .th .st.dead { color: var(--bad); }
.tcard .selmark { color: var(--acc); font-size: 10px; letter-spacing: .12em; font-weight: 700; }
.tcard .pickme { font-size: 10px; }
.tcard .tp, .tcard .tj, .tcard .ta { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.tcard .tp { grid-column: 1 / 3; }
.tcard .tp .fo { overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.tcard .age { font-size: 10px; margin-left: auto; flex: none; }
.tcard .tleft { grid-column: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tcard .tj b { font-size: 14px; }
.tcard .tj .pc { color: var(--ink); }
.tcard .tl { font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tcard .ta .sk { font-weight: 700; }
.tcard .ta .ru { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tcard .ta b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tcard .tbars { grid-column: 2; display: grid; grid-template-columns: auto minmax(30px, 1fr) 34px; gap: 0 6px; align-items: center; align-content: start;
  font-size: 10.5px; line-height: 12.5px; min-width: 0; min-height: 100px; }
.tcard .tbars .on { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard .tbars .on i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 1px; }
.tcard .tbars .on.chosen { color: var(--ink); font-weight: 700; }
.tcard .tbars .bar { height: 5px; background: var(--line); border-radius: 1px; overflow: hidden; }
.tcard .tbars .bar i { display: block; height: 100%; background: var(--dim); }
.tcard .tbars .bar.chosen i { background: var(--acc); }
.tcard .tbars .pc { color: var(--muted); text-align: right; }
.tcard .tbars .pc.chosen { color: var(--acc); font-weight: 700; }
@media (max-width: 1100px) { .tcard { grid-template-columns: minmax(0, 1fr); } .tcard .tp, .tcard .th { grid-column: 1; } .tcard .tbars { grid-column: 1; min-height: 0; } }

/* ---------------------------------------------------------------- the two views: what each one leaves out */
body.detail #sTop, body.detail #sCards, body.detail #sUnder, body.detail #sTeam { display: none !important; }
body.simple #match, body.simple #btnSessions, body.simple #sideSeg, body.simple #btnBack, body.simple #btnFwd, body.simple #speedSel,
body.simple #btnLive, body.simple #classicLink, body.simple #teamRow, body.simple #colR, body.simple #bottom, body.simple #statusLine,
body.simple #goalLine, body.simple #viewBox > .boxhead, body.simple #clock, body.simple #clockEnd { display: none !important; }
body.wall #sTop, body.wall #seekrow, body.wall #grid, body.wall #teamRow, body.wall #match, body.wall #sideSeg, body.wall #btnSessions,
body.wall #btnBack, body.wall #btnPlay, body.wall #btnFwd, body.wall #speedSel, body.wall #btnLive, body.wall #classicLink, body.wall #viewSeg { display: none !important; }
#viewSeg { flex: none; }

/* ---------------------------------------------------------------- SIMPLE: a game for a visitor who knows nothing of
   the project. Larger type, a plain face for sentences, few numbers. */
body.simple, body.wall { --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
@media (min-width: 1101px) { body.simple, body.wall { height: auto; min-height: 100vh; } body.simple #grid { flex: none; } }
#sTop { display: grid; grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto minmax(0, 1fr) minmax(96px, auto); align-items: center; gap: 4px 18px;
  padding: 10px 16px 9px; background: var(--panel); border-bottom: 1px solid var(--line); font-family: var(--sans); }
#sState { justify-self: start; display: flex; flex-direction: column; gap: 1px; white-space: nowrap; }
#sState b { font: 800 12px/18px var(--mono); letter-spacing: .14em; padding: 1px 9px; border-radius: 3px; border: 1px solid var(--line2); color: var(--muted); align-self: flex-start; }
#sState b.live { background: var(--bad); border-color: var(--bad); color: #180404; }
#sState b.rec { border-color: var(--amber); color: var(--amber); }
#sState small { color: var(--muted); font-size: 11px; }
.sside { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.sside.blue { align-items: flex-end; text-align: right; } .sside.red { align-items: flex-start; }
.sside .nm { font-size: 22px; font-weight: 800; letter-spacing: .01em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sside .hero { color: var(--muted); font-size: 13px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sside.pick { cursor: pointer; } .sside.pick:hover .nm { text-decoration: underline; }
.sside .nm { border-bottom: 2px solid transparent; }
.sside.sel .nm { border-bottom-color: currentColor; }
#sScore { display: flex; align-items: baseline; gap: 10px; font: 800 34px/1 var(--mono); white-space: nowrap; }
#sScore i { color: var(--dim); font-style: normal; font-weight: 400; }
#sClock { justify-self: end; font: 700 24px/1 var(--mono); color: var(--ink); white-space: nowrap; }
/* the seek bar belongs to the picture in this view (ops.js puts it under it), with a play button of its own */
body.simple #seekrow { padding: 6px 10px; gap: 10px; border: 1px solid var(--acc); border-top: 0; border-radius: 0 0 3px 3px; background: var(--panel); }
body.simple #seekwrap { height: 28px; }
body.simple #seek::-webkit-slider-thumb { width: 10px; height: 22px; margin-top: -9px; border-radius: 2px; }
body.simple #seek::-moz-range-thumb { width: 10px; height: 22px; border-radius: 2px; }
body.simple #viewBox { border-radius: 3px 3px 0 0; flex: none; }
body.simple #stage { border-radius: 0; }
#sPlay { min-width: 68px; flex: none; }
#sSound { flex: none; white-space: nowrap; }
body.detail #sPlay, body.detail #sSound, body.simple #btnPlay { display: none !important; }
#sSide { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
#sSide .seg button { padding: 5px 12px; font: 700 13px/18px var(--sans); letter-spacing: 0; }
#recNav .mini { white-space: nowrap; }
body.simple #recNav .mini, body.simple #slowBtn { padding: 4px 12px; font-size: 12px; }
#slowBtn { flex: none; border-color: var(--amber); color: var(--amber); }
body.simple #grid { display: grid; gap: 12px; padding: 12px 16px 16px; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); grid-template-rows: auto auto; }
body.simple #colL { grid-column: 1; grid-row: 1; }
body.simple #sCards { grid-column: 2; grid-row: 1; }
body.simple #sUnder { grid-column: 1 / 3; grid-row: 2; }
body.simple #stage { flex: none; width: 100%; aspect-ratio: 16 / 9; height: auto; max-height: max(300px, calc(100vh - 356px)); min-height: 200px; }
body.simple #modeLine { font-family: var(--sans); font-size: 13px; padding: 5px 10px; }
body.simple #killBanner { font-size: 15px; }
#sCards { display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 0; font-family: var(--sans); }
.scard { border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); padding: 12px 16px 13px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
#sPick { flex: 1 1 auto; }
.scard .sch { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.scard .sch .t { font: 800 12px/1 var(--mono); letter-spacing: .16em; color: var(--acc); white-space: nowrap; }
.scard .sch .w { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scard .big { font: 800 38px/1.1 var(--mono); letter-spacing: .06em; overflow-wrap: anywhere; }
.scard .mid { font-size: 23px; font-weight: 700; line-height: 1.25; }
.scard .sent { font-size: 17px; line-height: 1.4; color: var(--ink); }
.scard .sub { font-size: 13px; color: var(--muted); }
.scard .snote { font-size: 14px; color: var(--muted); line-height: 1.4; }
.scard .reflex { font-size: 15px; line-height: 1.4; color: var(--amber); border-left: 3px solid var(--amber); padding: 2px 0 2px 10px; margin-top: 3px; }
.sbars { display: grid; grid-template-columns: max-content minmax(40px, 1fr) 46px; gap: 7px 12px; align-items: center; margin-top: 6px; font-size: 15px; }
.sbars .l { color: var(--muted); white-space: nowrap; }
.sbars .b { height: 12px; background: #111b23; border-radius: 3px; overflow: hidden; }
.sbars .b i { display: block; height: 100%; background: #2b6f66; border-radius: 3px; }
.sbars .p { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.sbars .ch.l { color: #fff; font-weight: 700; } .sbars .ch.b i { background: var(--acc); } .sbars .ch.p { color: var(--acc); font-weight: 700; }
#sUnder { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 12px; min-width: 0; font-family: var(--sans); }
#sHealth, #sFeed { border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); padding: 10px 16px 12px; min-width: 0; }
.shead { font: 800 12px/1 var(--mono); letter-spacing: .16em; color: var(--acc); margin-bottom: 9px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.shead span { font: 400 13px/1.2 var(--sans); letter-spacing: 0; color: var(--muted); }
.hrow { display: grid; grid-template-columns: minmax(120px, 30%) minmax(60px, 1fr) minmax(52px, max-content); gap: 12px; align-items: center; padding: 5px 0; font-size: 15px; }
.hrow .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.hrow .nm small { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: 6px; }
.hbar { height: 14px; background: #111b23; border-radius: 4px; overflow: hidden; }
.hbar i { display: block; height: 100%; border-radius: 4px; transition: width .25s linear; }
.blue .hbar i, .hbar.blue i { background: var(--blue); } .red .hbar i, .hbar.red i { background: var(--red); }
.hrow .pc { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hrow .pc.off { color: var(--muted); font-size: 13px; }
#sFeedList { list-style: none; margin: 0; padding: 0; font-size: 15px; }
#sFeedList li { display: flex; gap: 12px; padding: 4px 0; align-items: baseline; cursor: pointer; }
#sFeedList li:hover { color: #fff; }
#sFeedList li.none { color: var(--muted); cursor: default; }
#sFeedList .t { color: var(--muted); font: 13px var(--mono); flex: none; width: 40px; text-align: right; }
#sFeedList b.w { font: 800 13px/1 var(--mono); letter-spacing: .08em; }
@media (max-width: 1100px) {
  body.simple #grid { display: flex; flex-direction: column; }
  body.simple #stage { max-height: none; min-height: 0; }
  #sUnder { grid-template-columns: minmax(0, 1fr); }
  #sTop { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); padding: 8px 12px; gap: 6px 12px; }
  #sState { grid-column: 1 / 3; grid-row: 1; flex-direction: row; align-items: center; gap: 8px; }
  #sClock { grid-column: 3; grid-row: 1; font-size: 20px; }
  #sA { grid-column: 1; grid-row: 2; } #sScore { grid-column: 2; grid-row: 2; font-size: 28px; } #sB { grid-column: 3; grid-row: 2; }
  .sside .nm { font-size: 18px; }
  .scard .big { font-size: 32px; }
}
/* a phone: the first screen this page is seen on. The modes are one row of three large buttons under the name
   of the page; everything that can be tapped is at least 36 px high */
@media (max-width: 620px) {
  #bar { gap: 6px 8px; padding: 6px 8px; }
  #bar .grow { order: 1; }
  #viewSeg { order: 2; } #bar > .seg:not(#modeSeg):not(#viewSeg), #speedSel, #btnSessions, #btnLive, #classicLink { order: 3; }
  #btnAbout { order: 4; }
  #modeSeg { order: 9; margin-left: 0; flex: 1 1 100%; display: flex; }
  #modeSeg button { flex: 1 1 0; padding: 9px 4px; font-size: 12px; letter-spacing: .06em; }
  #bar .btn, #bar .seg button, #sPlay { padding: 8px 10px; line-height: 18px; letter-spacing: .04em; }
  #sSound { padding: 8px 10px; line-height: 18px; letter-spacing: .04em; }
  #match { flex: 1 1 100%; order: 10; }
  body.simple #seekwrap { height: 36px; }
  body.simple #seek::-webkit-slider-thumb { width: 14px; height: 28px; margin-top: -12px; }
  body.simple #seek::-moz-range-thumb { width: 14px; height: 28px; }
  body.simple #recNav .mini, body.simple #slowBtn { padding: 10px 12px; line-height: 16px; }
  #sSide .seg button { padding: 8px 14px; }
  #sFeedList li { padding: 7px 0; }
  body.simple #stage { min-height: 0; }
  body.simple #grid { padding: 8px; gap: 8px; }
  .sside .nm { font-size: 15px; } .sside .hero { font-size: 11px; }
  #sScore { font-size: 24px; gap: 6px; }
  .scard { padding: 10px 12px; } .scard .big { font-size: 28px; } .scard .mid { font-size: 19px; } .scard .sent { font-size: 15px; }
  .hrow { grid-template-columns: minmax(90px, 38%) minmax(40px, 1fr) max-content; gap: 8px; }
}

/* ---------------------------------------------------------------- ALL GAMES: the wall */
#wall { flex: 1 1 auto; padding: 10px 14px 16px; font-family: var(--sans); min-width: 0; }
#wallHead { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 0 2px 9px; font-size: 15px; }
#wallCount { font-weight: 700; }
#wallNote { font-size: 13px; }
#wallGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) { #wallGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { #wallGrid { grid-template-columns: minmax(0, 1fr); } #wall { padding: 8px 8px 14px; } }
.tile { display: flex; flex-direction: column; gap: 4px; min-width: 0; border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); padding: 7px 9px 8px;
  color: var(--ink); text-decoration: none; cursor: pointer; }
.tile:hover, .tile:focus-visible { border-color: var(--acc); outline: none; }
.tile.done { border-color: var(--line); }
.tile .t1 { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; white-space: nowrap; }
.tile .st { font: 800 10px/15px var(--mono); letter-spacing: .12em; padding: 0 6px; border-radius: 2px; border: 1px solid var(--line2); color: var(--muted); flex: none; }
.tile .st.live { background: var(--bad); border-color: var(--bad); color: #180404; }
.tile .tnote { color: var(--muted); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto; }
.tile .ck { font: 700 14px/1 var(--mono); flex: none; }
.tile .t2 { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; align-items: center; }
.tile .sd { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tile .sd.red { align-items: flex-end; text-align: right; }
.tile .sd b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .hbs { display: flex; gap: 3px; width: 100%; }
.tile .hbar { height: 6px; flex: 1 1 0; border-radius: 3px; }
.tile .hbar i { transition: none; border-radius: 3px; }
.tile .sc { font: 800 21px/1 var(--mono); white-space: nowrap; display: flex; gap: 5px; align-items: baseline; }
.tile .sc i { color: var(--dim); font-style: normal; font-weight: 400; }
.tile .tmap { position: relative; height: clamp(72px, calc((100vh - 150px) / 4 - 108px), 190px); background: #070b10; border-radius: 4px; overflow: hidden; }
@media (max-width: 1100px) { .tile .tmap { height: 76px; } }
.tile .tmap canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.tile .tres { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(4,8,12,.88); border: 1px solid var(--line2); border-radius: 3px;
  padding: 4px 12px; font-size: 14px; font-weight: 700; white-space: nowrap; max-width: 94%; overflow: hidden; text-overflow: ellipsis; }
.tile .twait { position: absolute; left: 8px; bottom: 6px; color: var(--muted); font-size: 12px; }
.tile .t4 { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.tile .t4 b { color: var(--ink); font-weight: 700; }
.tile .t4 b.w { font: 800 12px/1 var(--mono); letter-spacing: .08em; }
#wallEmpty { grid-column: 1 / -1; color: var(--muted); padding: 30px 4px; font-size: 15px; }
.scard .big.pick { font: 800 28px/1.15 var(--sans); letter-spacing: 0; }
@media (max-width: 620px) { .hrow .nm small { display: none; } }
/* the detail view's bar holds the mode switch and the view switch as well: below a very wide screen the line that
   says who plays whom gets a row of its own instead of being cut short */
@media (min-width: 621px) and (max-width: 1899px) { body.detail #bar { flex-wrap: wrap; row-gap: 4px; } body.detail #match { order: 20; flex: 1 1 100%; padding-left: 0; } }
/* whose Jev: the bars are one Jev weighing its options */
.scap { font-size: 13px; color: var(--muted); margin-top: 4px; }
.scap + .sbars { margin-top: 2px; }

/* ---------------------------------------------------------------- a team game in the simple view: nothing stands
   above the heroes. No plan card and no pick card of the page's own; three panels of the same size and weight,
   one per hero, side by side (stacked where there is no room), under one line that says how they relate. The
   column beside the picture holds the other side's health and the moments. */
body.simple.team #sCards { display: none !important; }
body.simple.team #sUnder { grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr); align-content: start; }
body.simple.team #sTeam { grid-column: 1 / 3; grid-row: 2; }
body.simple.team #stage { max-height: max(280px, calc(100vh - 540px)); }
#sTeam { min-width: 0; font-family: var(--sans); }
.tline { margin: 0 2px 10px; font-size: 16px; line-height: 1.45; color: var(--ink); }
.tline b { font-weight: 800; }
.tpanels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
.tpanels.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hpanel { border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); padding: 12px 14px 13px; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.hpanel .hph { display: grid; grid-template-columns: minmax(0, max-content) minmax(40px, 1fr) max-content; gap: 10px; align-items: center; }
.hpanel .hph b { font-size: 21px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hpanel .hph .pc { font-size: 15px; color: var(--ink); white-space: nowrap; } .hpanel .hph .pc.off { color: var(--muted); font-size: 13px; }
.hpanel .hcam { font-size: 12px; color: var(--muted); margin-top: -5px; }
.hpanel .hps { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--line); padding-top: 9px; min-width: 0; }
.hpanel .sch { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.hpanel .sch .t { font: 800 12px/1 var(--mono); letter-spacing: .16em; color: var(--acc); white-space: nowrap; }
.hpanel .sch .w { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.hpanel .big { font: 800 30px/1.1 var(--mono); letter-spacing: .06em; overflow-wrap: anywhere; }
.hpanel .big.pick { font: 800 22px/1.2 var(--sans); letter-spacing: 0; }
.hpanel .sent { font-size: 15px; line-height: 1.4; }
.hpanel .mid { font-size: 18px; font-weight: 700; line-height: 1.3; }
.hpanel .sub { font-size: 13px; color: var(--muted); }
.hpanel .snote { font-size: 14px; color: var(--muted); line-height: 1.4; }
.hpanel .reflex { font-size: 14px; line-height: 1.4; color: var(--amber); border-left: 3px solid var(--amber); padding: 2px 0 2px 10px; margin-top: 3px; }
.hpanel .sbars { font-size: 14px; gap: 5px 10px; }
@media (max-width: 1100px) { .tpanels, .tpanels.n2 { grid-template-columns: minmax(0, 1fr); } body.simple.team #stage { max-height: none; } }
/* the detail view of a team game: the line, and the hero cards as the selector of the panels below */
#teamNote { font: 13px/1.45 var(--sans); color: var(--ink); padding: 0 0 6px; }
#teamNote b { font-weight: 800; }
.ph .who b.blue, .ph .who b.red { font-weight: 700; }
#actWho { color: var(--muted); }
/* the detail view is one screen high on a desktop; the row that says who plays whom, and a team's line and cards,
   are part of that screen: it is a little taller for them, so that no panel is pushed over the one below it */
@media (min-width: 1101px) and (max-width: 1899px) { body.detail { height: max(100vh, 1026px); } }
@media (min-width: 1101px) { body.detail.team { height: max(100vh, 1160px); } }
/* a team with one planner: the team's plan is one card over the three Jev panels, as the planner is over the Jevs */
.tplan { border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); padding: 12px 16px 13px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.tplan .sch { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.tplan .sch .t { font: 800 12px/1 var(--mono); letter-spacing: .16em; color: var(--acc); white-space: nowrap; }
.tplan .sch .w { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tplan .sent { font-size: 20px; font-weight: 700; line-height: 1.35; }
.tplan .sub { font-size: 13px; color: var(--muted); }
.tplan .snote { font-size: 14px; color: var(--muted); line-height: 1.4; }
.tparts { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 5px 14px; align-items: baseline; margin-top: 5px; font-size: 15px; }
.tparts b { font-weight: 700; white-space: nowrap; }
.tparts b.w { font: 800 14px/1.2 var(--mono); letter-spacing: .08em; }
.hpanel .hps.part { gap: 5px; }
.hpanel .pw { display: flex; gap: 10px; align-items: baseline; font-size: 15px; line-height: 1.35; min-width: 0; }
.hpanel .pw b { font: 800 15px/1.2 var(--mono); letter-spacing: .08em; flex: none; }
@media (max-width: 620px) { .tparts { grid-template-columns: max-content minmax(0, 1fr); } .tparts span { grid-column: 1 / 3; margin-bottom: 4px; } .tplan .sent { font-size: 17px; } }

/* ---------------------------------------------------------------- the three layouts (?layout=a | b | c): other
   arrangements of the simple view, each with the picture first and largest. body.lay is set with any of them
   (ops.js: applyLayout); without it none of these parts is on the page and the simple view is as above.
   All three: one thin score strip in place of the top line; the three cards, the health and the moments only
   behind MORE DETAIL (body.lay-more). a "theatre": the picture as wide as the window allows, the plan and the
   pick as two lines on it. b "broadcast": the picture in the middle, a column of hero cards for each camp.
   c "game and commentary": the picture on the left, one column of plain sentences on the right. */
#lTop, #lSubs, #lLeft, #lRight, #lSay, #lMoreRow { display: none; }
body.lay #sTop, body.lay #viewSeg { display: none !important; }
body.lay:not(.lay-more) #sCards, body.lay:not(.lay-more) #sTeam, body.lay:not(.lay-more) #sUnder { display: none !important; }
body.lay { --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
/* the score strip: live or a recording, who plays whom, towers taken and gold, the kills, the clock */
body.lay #lTop { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto minmax(0, 1fr) auto; align-items: center; gap: 3px 18px;
  padding: 7px 16px; min-height: 46px; background: var(--panel); border-bottom: 1px solid var(--line); font-family: var(--sans); }
#lTop .wait { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
#lTop .st { font: 800 11px/18px var(--mono); letter-spacing: .14em; padding: 1px 8px; border-radius: 3px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
#lTop .st.live { background: var(--bad); border-color: var(--bad); color: #180404; }
#lTop .st.rec { border-color: var(--amber); color: var(--amber); }
#lTop .st:empty { visibility: hidden; }
#lTop .sd { min-width: 0; display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
#lTop .sd.blue { flex-direction: row-reverse; }
#lTop .sd b { font-size: 18px; font-weight: 800; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; border-bottom: 2px solid transparent; }
#lTop .sd small { color: var(--muted); font-size: 12px; flex: 0 2 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#lTop .sd.pick { cursor: pointer; } #lTop .sd.pick:hover b { text-decoration: underline; } #lTop .sd.sel b { border-bottom-color: currentColor; }
#lTop .stat { display: flex; gap: 14px; font: 600 14px/1 var(--mono); color: var(--ink); white-space: nowrap; }
#lTop .stat i { font: 400 11px/1 var(--sans); color: var(--muted); margin-right: 5px; }
#lTop .sc { display: flex; align-items: baseline; gap: 8px; font: 800 28px/1 var(--mono); white-space: nowrap; }
#lTop .sc i { color: var(--dim); font-style: normal; font-weight: 400; }
#lTop .ck { font: 700 18px/1 var(--mono); white-space: nowrap; min-width: 50px; text-align: right; }
/* the grid: the layout's own row, the buttons, then (MORE DETAIL) the simple view's cards across the page */
body.lay #grid { display: grid; grid-template-rows: auto; grid-auto-rows: auto; align-items: start; align-content: start; }
body.simple.lay #stage { max-height: calc(100vh - 236px); min-height: 0; }
body.lay #lMoreRow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; grid-column: 1 / -1; grid-row: 2; }
#lMoreRow .btn { padding: 5px 14px; }
body.simple.lay.lay-more #sCards { grid-column: 1 / -1; grid-row: 3; flex-direction: row; flex-wrap: wrap; width: 100%; }
body.simple.lay.lay-more #sCards .scard { flex: 1 1 260px; } body.simple.lay.lay-more #sSide { flex: 1 1 100%; }
body.simple.lay.lay-more #sTeam { grid-column: 1 / -1; grid-row: 3; width: 100%; }
body.simple.lay.lay-more #sUnder { grid-column: 1 / -1; grid-row: 4; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
body.bare.idle #lMoreRow { display: none !important; }
/* a narrower window: the strip in two rows, the names and the kills over the towers, the gold and the clock (the
   word RECORDING or LIVE is in the line over the picture and in the bar) */
@media (max-width: 1100px) { #lTop .sd small { display: none; } }
@media (max-width: 1000px) {
  body.lay #lTop { grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr); gap: 4px 10px; padding: 6px 10px; }
  #lTop .sd.blue { grid-column: 1; grid-row: 1; } #lTop .sc { grid-column: 2 / 4; grid-row: 1; justify-self: center; font-size: 24px; } #lTop .sd.red { grid-column: 4; grid-row: 1; }
  #lTop .stat.blue { grid-column: 1; grid-row: 2; justify-content: flex-end; } #lTop .st { display: none; }
  #lTop .ck { grid-column: 2 / 4; grid-row: 2; justify-self: center; font-size: 15px; min-width: 0; } #lTop .stat.red { grid-column: 4; grid-row: 2; }
  #lTop .stat { gap: 9px; font-size: 13px; min-width: 0; overflow: hidden; }
  #lTop .stat i { margin-right: 4px; }
}
@media (max-width: 760px) {
  #lTop .sd b { font-size: 15px; }
  body.simple.lay #stage { max-height: none; }
  body.simple.lay.lay-more #sUnder { grid-template-columns: minmax(0, 1fr); }
  #lMoreRow .btn { padding: 9px 14px; line-height: 18px; }
}

/* ---- a, theatre */
body.lay-a #grid { grid-template-columns: minmax(0, 1fr); justify-items: center; }
body.lay-a #colL { grid-column: 1; grid-row: 1; width: min(100%, max(560px, calc((100vh - 238px) * 16 / 9))); }
body.lay-a #lMoreRow, body.lay-a #sCards, body.lay-a #sTeam, body.lay-a #sUnder { max-width: 1320px; }
body.lay-a #viewBox { position: relative; }
body.lay-a #viewMsg { bottom: auto; top: 8px; }
body.lay-a #lSubs { display: flex; flex-direction: column; align-items: center; gap: 5px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 34px 20px 13px;
  background: linear-gradient(to bottom, rgba(4,8,12,0), rgba(4,8,12,.8) 46%, rgba(4,8,12,.9)); font-family: var(--sans); pointer-events: none; border-radius: 0; }
#lSubs:empty { display: none !important; }
#lSubs .sl { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 3px 14px; max-width: 100%; font-size: 19px; line-height: 1.3; color: #fff; text-shadow: 0 1px 3px #000, 0 0 8px rgba(0,0,0,.7); text-align: center; }
#lSubs .k { font: 800 11px/1 var(--mono); letter-spacing: .14em; color: var(--acc); white-space: nowrap; }
#lSubs .sl:first-child .k { color: var(--amber); }
#lSubs .k small { font: 400 12px/1 var(--sans); letter-spacing: 0; color: #a9bccb; margin-left: 7px; }
#lSubs b.w { font: 800 17px/1.2 var(--mono); letter-spacing: .08em; }
#lSubs .s { min-width: 0; }
#lSubs .chip { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; }
#lSubs .chip i { font-style: normal; font-weight: 700; } #lSubs .chip i::after { content: ":"; color: #a9bccb; font-weight: 400; }
#lSubs em, #lSayList em { font-style: normal; color: #a9bccb; font-size: .78em; margin-left: 2px; white-space: nowrap; }
@media (max-width: 760px) {
  body.lay-a #colL { width: 100%; }
  body.lay-a #lSubs { position: static; align-items: stretch; gap: 7px; padding: 9px 10px 10px; background: var(--panel); border-top: 1px solid var(--line); }
  #lSubs .sl { justify-content: flex-start; text-align: left; font-size: 16px; text-shadow: none; gap: 3px 10px; }
  #lSubs .k { flex: 1 1 100%; } #lSubs b.w { font-size: 15px; }
}

/* ---- b, broadcast */
body.lay-b #grid { grid-template-columns: minmax(210px, 1fr) minmax(0, 3.3fr) minmax(210px, 1fr); }
body.lay-b #lLeft { display: flex; grid-column: 1; grid-row: 1; } body.lay-b #colL { grid-column: 2; grid-row: 1; } body.lay-b #lRight { display: flex; grid-column: 3; grid-row: 1; }
#lLeft, #lRight { flex-direction: column; gap: 10px; min-width: 0; font-family: var(--sans); }
.lch { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lch b { font-size: 19px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lch span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.lnote { margin: -4px 0 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.lplan { border-left: 3px solid var(--amber); padding: 1px 0 2px 10px; margin-top: -2px; }
.lplan .k { font: 800 11px/1.4 var(--mono); letter-spacing: .14em; color: var(--amber); }
.lplan .k small { display: block; font: 400 12px/1.4 var(--sans); letter-spacing: 0; color: var(--muted); } .lplan .k small span { white-space: nowrap; }
.lplan p { margin: 3px 0 0; font-size: 15px; line-height: 1.4; }
.lcard { border: 1px solid var(--line2); border-radius: 6px; background: var(--panel); padding: 10px 12px 11px; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lcard[data-hero] { cursor: default; } .lcard.sel { border-color: var(--acc); }
.lcard .n { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 1px 8px; min-width: 0; }
.lcard .n b { font-size: 17px; font-weight: 800; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.lcard .n .pc { font-size: 13px; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lcard .n .pc.off { grid-column: 1 / -1; color: var(--muted); font-size: 12px; white-space: normal; }
.lcard .n .pc.off:empty { display: none; }
.lcard .hbar { height: 8px; display: block; }
.lcard .r { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.lcard .r .k { color: var(--muted); font-size: 12px; width: 50px; flex: none; white-space: nowrap; }
.lcard .r b.w { font: 800 15px/1.2 var(--mono); letter-spacing: .08em; }
.lcard .r b.pk { font-size: 15px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lcard p.s { margin: -4px 0 0 58px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.lcard .sure { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 8px; align-items: center; margin: -2px 0 0 58px; }
.lcard .sure .b { height: 6px; background: #111b23; border-radius: 3px; overflow: hidden; }
.lcard .sure .b i { display: block; height: 100%; background: var(--acc); border-radius: 3px; transition: width .2s linear; }
.lcard .sure .p { font: 12px var(--mono); color: var(--muted); text-align: right; }
@media (max-width: 1180px) {
  body.lay-b #grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  body.lay-b #colL { grid-column: 1 / -1; grid-row: 1; } body.lay-b #lLeft { grid-column: 1; grid-row: 2; } body.lay-b #lRight { grid-column: 2; grid-row: 2; }
  body.lay-b #lMoreRow { grid-row: 3; } body.simple.lay-b.lay-more #sCards, body.simple.lay-b.lay-more #sTeam { grid-row: 4; } body.simple.lay-b.lay-more #sUnder { grid-row: 5; }
}
@media (max-width: 620px) {
  .lch { flex-direction: column; gap: 0; } .lch b { font-size: 16px; max-width: 100%; }
  .lcard { padding: 8px 9px 9px; gap: 6px; } .lcard .n b { font-size: 15px; } .lcard .r { gap: 6px; flex-wrap: wrap; } .lcard .r .k { width: auto; }
  .lcard .r b.pk { white-space: normal; }
  .lcard .r b.pk, .lcard .r b.w { font-size: 14px; } .lcard p.s, .lcard .sure { margin-left: 0; } .lplan p { font-size: 14px; }
}

/* ---- c, game and commentary */
body.lay-c #grid { grid-template-columns: minmax(0, 2.15fr) minmax(300px, 1fr); }
body.lay-c #colL { grid-column: 1; grid-row: 1; }
body.lay-c #lSay { display: block; grid-column: 2; grid-row: 1; position: relative; align-self: stretch; min-width: 0; min-height: 300px; font-family: var(--sans); }
#lSay .in { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; overflow: hidden; }
#lSay .in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 44px; background: linear-gradient(to bottom, rgba(5,8,11,0), var(--bg)); pointer-events: none; }
#lChain { display: flex; align-items: flex-start; gap: 8px; flex: none; padding: 2px 0 11px; border-bottom: 1px solid var(--line2); }
#lChain .step { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0; }
#lChain .step b { font-size: 14px; font-weight: 800; line-height: 1.25; }
#lChain .s0 b { color: var(--amber); } #lChain .s1 b { color: var(--acc); } #lChain .s2 { flex: 0.6 1 0; }
#lChain small { font-size: 12px; color: var(--muted); line-height: 1.3; }
#lChain .ar { color: var(--dim); font-style: normal; flex: none; padding-top: 1px; }
#lNow { flex: none; padding: 9px 0 10px 11px; margin-top: 10px; border-left: 3px solid var(--amber); font-size: 16px; line-height: 1.4; }
#lNow:empty { display: none; }
#lNow .k { display: block; font: 800 11px/1.5 var(--mono); letter-spacing: .14em; color: var(--amber); }
#lNow b.w { font: 800 15px/1.2 var(--mono); letter-spacing: .08em; margin-right: 6px; }
#lNow .chip { display: inline-block; margin-right: 12px; white-space: nowrap; } #lNow .chip i { font-style: normal; font-weight: 700; margin-right: 5px; }
#lSayList { list-style: none; margin: 4px 0 0; padding: 0; flex: 1 1 auto; min-height: 0; font-size: 15px; line-height: 1.4; }
#lSayList em { margin-left: 9px; }
#lSayList li { display: flex; gap: 10px; padding: 7px 0; align-items: baseline; cursor: pointer; border-bottom: 1px solid var(--line); }
#lSayList li:hover { color: #fff; }
#lSayList li.new { font-size: 18px; padding: 10px 0 9px; }
#lSayList li.none { color: var(--muted); cursor: default; }
#lSayList .t { color: var(--muted); font: 12px var(--mono); flex: none; width: 36px; text-align: right; }
#lSayList .x { min-width: 0; overflow-wrap: anywhere; }
#lSayList .lw { font-weight: 800; } #lSayList li.pl .lw { color: var(--amber); } #lSayList li.jv .lw { color: var(--acc); }
#lSayList li.pl .lw span, #lSayList li.jv .lw span { font-weight: 700; }
#lSayList b.w { font: 800 .88em/1.2 var(--mono); letter-spacing: .08em; }
#lSayList li.ev .x { font-weight: 700; }
@media (max-width: 900px) {
  body.lay-c #grid { display: flex; flex-direction: column; align-items: stretch; }
  body.lay-c #lSay { min-height: 0; } #lSay .in { position: static; } #lSay .in::after { display: none; }
  #lSayList li:nth-child(n+9) { display: none; }
  #lSayList li.new { font-size: 16px; } #lChain .step b { font-size: 13px; }
}