/* EtherNet - graphite, one gold voice, one pale-blue voice.
 *
 * The baseline is AlttprHelper's "ink and Triforce" (neutral graphite, warm
 * paper-white text, 1px hairlines, depth by tone instead of shadow) with the
 * stream overlay's type on top of it: Bricolage Grotesque for anything that is
 * a number or a name of something, Schibsted Grotesk for reading, IBM Plex
 * Mono for codes, Press Start 2P ONLY where the text is literally what the
 * game will draw.
 *
 * Two accents, each with one job:
 *   gold   the race: ready, GO, places, the primary action
 *   ether  anything that travels into a game: in-game lines, the link lamp
 * Radius is a scale (3 / 6 / 10 / pill), never one number.
 * Nothing animates at rest: this tab sits beside a game and a capture.
 */

@font-face { font-family: "Bricolage Grotesque"; font-weight: 600 700; font-display: swap;
  src: url(../fonts/BricolageGrotesque-600.woff2) format("woff2"); }
@font-face { font-family: "Schibsted Grotesk"; font-weight: 400 700; font-display: swap;
  src: url(../fonts/SchibstedGrotesk-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-display: swap;
  src: url(../fonts/IBMPlexMono-Regular.ttf) format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap;
  src: url(../fonts/IBMPlexMono-Medium.ttf) format("truetype"); }
@font-face { font-family: "Press Start 2P"; font-weight: 400; font-display: swap;
  src: url(../fonts/PressStart2P-Regular.ttf) format("truetype"); }

:root {
  --bg: #0E0E10;
  --well: #121215;
  --surface: #17171A;
  --raised: #1D1D21;
  --lift: #26262B;

  --hair: rgba(255, 255, 255, .075);
  --hair-top: rgba(255, 255, 255, .12);
  --hair-strong: rgba(255, 255, 255, .18);

  --ink: #F3F1EA;
  --ink2: #BDBBB3;
  --mute: #918F87;
  --faint: #5F5E59;

  --gold: #E6B143;
  --gold-hi: #F1C158;
  --gold-lo: #C9962F;
  --on-gold: #171512;
  --gold-wash: rgba(230, 177, 67, .09);
  --gold-line: rgba(230, 177, 67, .42);

  --ether: #9FD9E8;
  --ether-wash: rgba(159, 217, 232, .08);
  --ether-line: rgba(159, 217, 232, .38);

  --ok: #6FCF97;
  --bad: #E5928D;

  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;

  --display: "Bricolage Grotesque", "Schibsted Grotesk", "Segoe UI", sans-serif;
  --body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --pixel: "Press Start 2P", "IBM Plex Mono", monospace;

  --gutter: 16px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 400 15px/1.5 var(--body);
  font-feature-settings: "ss01";
}
/* One warm light from the upper right, and film grain so the flats are not
   dead. Both are fixed layers that never repaint. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(1100px 620px at 86% -12%, rgba(230, 177, 67, .07), transparent 62%),
    radial-gradient(900px 700px at -10% 110%, rgba(159, 217, 232, .035), transparent 60%);
}
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: var(--gold); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -.015em; margin: 0; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--r-sm); }

.label {
  font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute);
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- controls */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border: 1px solid var(--hair-strong); border-top-color: rgba(255, 255, 255, .24);
  border-radius: var(--r-md);
  background: var(--raised); color: var(--ink);
  font: 600 14px/1 var(--body); letter-spacing: .01em;
  cursor: pointer; user-select: none;
  transition: background .12s, border-color .12s, transform .06s;
}
a.btn { text-decoration: none; }
.btn:hover { background: var(--lift); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.btn.primary {
  background: linear-gradient(180deg, #EFBE52, #DFA93C); color: var(--on-gold);
  border-color: var(--gold-lo); border-top-color: #F6D687;
}
.btn.primary:hover { background: linear-gradient(180deg, #F5C75F, #E7B144); }
.btn.big { min-height: 52px; padding: 0 28px; font: 700 17px/1 var(--display); letter-spacing: 0; }
.btn.quiet { background: transparent; border-color: var(--hair); color: var(--ink2); }
.btn.quiet:hover { background: var(--raised); color: var(--ink); }
.btn.danger { color: var(--bad); }
.btn.danger.armed { background: rgba(229, 146, 141, .14); border-color: rgba(229, 146, 141, .5); }
.btn.small { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
.btn.on { border-color: var(--gold-line); background: var(--gold-wash); color: var(--gold-hi); }

.field {
  width: 100%; min-height: 42px; padding: 0 12px;
  background: var(--well); border: 1px solid var(--hair-strong); border-radius: var(--r-md);
  color: var(--ink);
}
.field::placeholder { color: var(--faint); }
.field:focus { outline: none; border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-wash); }
select.field { appearance: none; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--mute) 50%), linear-gradient(135deg, var(--mute) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px; background-repeat: no-repeat; }
.field.code { font: 500 20px/1 var(--mono); letter-spacing: .3em; text-transform: uppercase; text-align: center; }

.panel {
  background: linear-gradient(180deg, var(--raised), var(--surface));
  border: 1px solid var(--hair); border-top-color: var(--hair-top);
  border-radius: var(--r-lg);
}

/* -------------------------------------------------------- billogna bar */

/* One quiet line above everything: the way back to billogna.lol, and across
   to BombosSwap and QuakeCast (the other medallions), then CuccoStorm and
   the tracker (tracker.billogna.lol). People pages only - overlay.html is an
   OBS source and gets no chrome. On the room page the links open a new tab,
   so a stray click mid-race never leaves the room. */
.sitebar { background: var(--well); border-bottom: 1px solid var(--hair); }
.sitebar .sb-in {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1080px; margin: 0 auto; min-height: 34px; padding: 0 var(--gutter);
  font: 500 12.5px/1 var(--body);
}
.room .sitebar .sb-in { max-width: none; }
.sitebar a { color: var(--mute); text-decoration: none; padding: 6px 0; }
.sitebar a:hover, .sitebar a:focus-visible { color: var(--ink); }
.sitebar .sb-home b { color: var(--gold); font-weight: 600; margin-right: 6px; }
.sitebar .sb-sibs { display: flex; gap: 18px; }
@media (max-width: 540px) {
  .sitebar .sb-in { gap: 10px; font-size: 12px; }
  .sitebar .sb-sibs { gap: 10px; }
  /* With five apps the page you are on is already named by its brand right
     under the bar, so its link steps out and the other four plus the way
     home fit from 540 px down. Needs aria-current="page" on every page's
     self link. */
  .sitebar .sb-sibs [aria-current="page"] { display: none; }
}
@media (max-width: 420px) {
  /* ...and a size smaller and tighter under 420 px, so they still fit a
     360 px phone. */
  .sitebar .sb-in { gap: 8px; font-size: 11px; padding: 0 12px; }
  .sitebar .sb-sibs { gap: 6px; }
}
.sitebar .sb-sibs [aria-current="page"] { color: var(--ink2); box-shadow: inset 0 -1px var(--gold-line); }

/* ---------------------------------------------------------------- brand */

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
/* the Ether medallion, pixel for pixel (tools/make_mark.py). 32 px is exactly
   2x the sprite, so every pixel of it lands on whole screen pixels. */
.brand img { width: 32px; height: 32px; flex: none; image-rendering: pixelated; }
.brand .word { font: 700 20px/1 var(--display); letter-spacing: -.02em; }
.brand .word b { color: var(--gold); font-weight: 700; }

/* ------------------------------------------------------------ home page */

.home { max-width: 1080px; margin: 0 auto; padding: 28px var(--gutter) 64px; }
.home-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9vh; }
.home-top nav a { color: var(--ink2); font-size: 14px; margin-left: 20px; text-decoration: none; }
.home-top nav a:hover { color: var(--ink); }
.home-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 400px); gap: 56px; align-items: start; }
.home h1 { font-size: clamp(40px, 6.4vw, 78px); line-height: .98; letter-spacing: -.035em; }
.home h1 em { font-style: normal; color: var(--gold); }
.lede { margin-top: 24px; max-width: 34em; font-size: 18px; color: var(--ink2); }
.works { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.works .label { margin-right: 6px; }
.tag { padding: 4px 9px; border: 1px solid var(--hair-strong); border-radius: var(--r-sm);
  font: 500 12px/1.2 var(--mono); color: var(--ink2); }

.door { padding: 22px; }
.door + .door { margin-top: 14px; }
.door h2 { font-size: 19px; margin-bottom: 14px; }
.door .row { display: flex; gap: 8px; margin-top: 8px; }
.door .btn { width: 100%; margin-top: 12px; }
.door .hint { margin-top: 10px; font-size: 13px; color: var(--mute); }
.door .err { margin-top: 10px; font-size: 13.5px; color: var(--bad); }
.recent { margin-top: 14px; padding: 14px 22px; }
.recent-note { font-size: 13px; color: var(--mute); margin-bottom: 8px; }
.recent-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 12px; align-items: center;
  padding: 7px 0; border-top: 1px solid var(--hair); }
.recent-row:first-child { border-top: 0; }
.recent-row a { display: flex; justify-content: space-between; gap: 12px; min-width: 0; text-decoration: none;
  color: var(--ink2); font-size: 14px; }
.recent-row a:hover { color: var(--ink); }
.recent-row .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recent-state { font: 500 12px/1 var(--mono); color: var(--mute); white-space: nowrap; }
.recent-state.on { color: var(--ok); }
.recent-err { grid-column: 1 / -1; font-size: 13px; color: var(--bad); }

/* the operator page */
.op { max-width: 860px; }
.op .home-top { margin-bottom: 32px; }
.op .err { margin-top: 10px; font-size: 13.5px; color: var(--bad); }
.op-key { padding: 20px 22px; max-width: 460px; }
.op-key .row { display: flex; gap: 8px; margin-top: 8px; }
.op-key .field { flex: 1; min-width: 0; }
.op-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.op-head .row { display: flex; gap: 6px; }
.op-sum { font: 500 13px/1.3 var(--mono); color: var(--ink2); }
.op-empty { color: var(--mute); }
.op-room { padding: 16px 20px; margin-bottom: 10px; }
.op-room.live { border-color: var(--gold-line); }
.op-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.op-title { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.op-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-title .mono { color: var(--ink2); font-size: 13px; }
.op-facts { margin-top: 6px; font-size: 13px; color: var(--mute); }
.op-people { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; color: var(--ink2); }
.op-person::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%;
  background: var(--hair-strong); vertical-align: 1px; }
.op-person.on { color: var(--ink); }
.op-person.on::before { background: var(--ok); }
.op-person small { color: var(--mute); font-size: 12px; }
.op-foot { margin-top: 10px; display: flex; justify-content: flex-end; }

/* real captures: the room wide on the left, the two game shots stacked beside
   it. Game shots are pixel art and are scaled like it. */
.proof { margin-top: 11vh; }
.proof-head { display: grid; grid-template-columns: minmax(0, 15em) minmax(0, 1fr); gap: 24px; align-items: baseline;
  padding-bottom: 22px; border-bottom: 1px solid var(--hair-strong); margin-bottom: 26px; }
.proof-head h2 { font-size: 30px; letter-spacing: -.025em; }
.proof-head p { color: var(--ink2); max-width: 46em; }
.proof-grid { display: grid; grid-template-columns: minmax(0, 1.72fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.shot { margin: 0; }
.shot.site { grid-row: span 2; }
.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--hair-strong); border-radius: var(--r-md); background: #000; }
.shot.game img { image-rendering: pixelated; border-color: var(--ether-line); }
.shot figcaption { margin-top: 9px; font-size: 13.5px; line-height: 1.45; color: var(--mute); }

/* the how-it-goes ledger: numbered rows on hairlines, unequal on purpose */
.ledger { margin-top: 12vh; border-top: 1px solid var(--hair-strong); }
.ledger-row { display: grid; grid-template-columns: 92px minmax(0, 15em) minmax(0, 1fr); gap: 24px;
  padding: 26px 0; border-bottom: 1px solid var(--hair); align-items: baseline; }
.ledger-row .n { font: 700 44px/1 var(--display); color: var(--faint); font-variant-numeric: tabular-nums; }
.ledger-row h3 { font-size: 21px; }
.ledger-row p { color: var(--ink2); max-width: 40em; }
.ledger-row p + p { margin-top: 10px; }
.strip-demo { margin-top: 16px; }
.foot { margin-top: 48px; color: var(--mute); font-size: 13px; display: flex; gap: 18px; flex-wrap: wrap; }

/* ------------------------------------------------------- the HUD strip */

/* Twenty cells, the game's width. The text in here is exactly what the
   game will draw, so it is the one place the pixel face appears. */
.strip {
  display: inline-grid; grid-template-columns: repeat(20, 1fr); gap: 0;
  padding: 7px 8px; background: #08080A; border: 1px solid var(--ether-line); border-radius: var(--r-sm);
  font: 400 11px/1 var(--pixel); color: #F8F8F8; max-width: 100%;
}
.strip i { width: 13px; height: 13px; display: grid; place-items: center; font-style: normal; }
.strip.idle { border-color: var(--hair-strong); color: var(--faint); }

/* ------------------------------------------------------------ room page */

.bar {
  display: flex; align-items: center; gap: 18px; padding: 12px var(--gutter);
  border-bottom: 1px solid var(--hair); background: rgba(14, 14, 16, .86);
  position: sticky; top: 0; z-index: 5;
}
.bar-title { min-width: 0; flex: 1; display: flex; align-items: baseline; gap: 12px; }
.bar-title h1 { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-right { display: flex; align-items: center; gap: 8px; }
.code-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px;
  background: var(--well); border: 1px solid var(--hair-strong); border-radius: var(--r-md); cursor: pointer; }
.code-chip b { font: 500 15px/1 var(--mono); letter-spacing: .18em; color: var(--gold-hi); }
.code-chip span { font-size: 12.5px; color: var(--mute); }
.code-chip:hover span { color: var(--ink); }
.net-lamp { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.net-lamp.ok { background: var(--ok); }
.net-lamp.bad { background: var(--bad); }

.layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(330px, .85fr); gap: 18px;
  max-width: 1320px; margin: 0 auto; padding: 18px var(--gutter) 28px; align-items: start; }
.stage { display: grid; gap: 14px; min-width: 0; }

/* the clock card; the triforce sits half out of it on purpose */
.clock-card { position: relative; overflow: hidden; padding: 22px 26px 24px; }
.phase-line { display: flex; align-items: center; gap: 12px; }
.phase { font: 600 12px/1 var(--body); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.phase.live { color: var(--gold); }
.phase.over { color: var(--ok); }
.phase-note { font-size: 13px; color: var(--mute); }
.clock { margin: 8px 0 4px; font: 700 clamp(60px, 10.5vw, 136px)/.95 var(--display);
  letter-spacing: -.035em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.clock .tenths { font-size: .42em; color: var(--faint); letter-spacing: -.02em; margin-left: .06em; }
.clock.stopped { color: var(--gold-hi); }
.clock.stopped .tenths { color: var(--gold-lo); }
.clock.idle { color: var(--faint); }
.clock.count { color: var(--ink); }
.result { min-height: 24px; font-size: 16px; color: var(--ink2); }
.result b { color: var(--gold-hi); font-family: var(--display); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }
.actions .note { font-size: 13px; color: var(--mute); }

.tri-mark { position: absolute; right: -34px; top: -18px; width: 300px; height: 275px; pointer-events: none; }
.tri-mark polygon { fill: rgba(255, 255, 255, .022); stroke: var(--hair-top); stroke-width: .35; transition: fill .25s, stroke .25s; }
.tri-mark polygon.lit { fill: rgba(230, 177, 67, .16); stroke: var(--gold-line); }
.tri-mark.go polygon { fill: rgba(230, 177, 67, .34); stroke: var(--gold); animation: go-fade 1.6s ease-out forwards; }
@keyframes go-fade { 0% { fill: rgba(255, 244, 214, .85); } 100% { fill: rgba(255, 255, 255, .022); stroke: var(--hair-top); } }

.seed-line { display: flex; gap: 12px; align-items: baseline; padding: 11px 16px; font-size: 14px; }
.seed-line a, .seed-line span.v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* the board: a results sheet, not a card grid */
.board { padding: 6px 0 4px; }
.board-head { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 18px 10px; }
.board-head h2 { font-size: 16px; }
.row-p { display: grid; grid-template-columns: 44px 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center;
  padding: 10px 18px; border-top: 1px solid var(--hair); min-height: 54px; }
.row-p.me { background: linear-gradient(90deg, var(--gold-wash), transparent 55%); }
.row-p.off .name { color: var(--mute); }
.row-p .place { font: 700 24px/1 var(--display); color: var(--faint); font-variant-numeric: tabular-nums; }
.row-p.done .place { color: var(--gold-hi); }
.row-p .name { font: 600 16px/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-p .sub { font-size: 12px; color: var(--mute); margin-top: 2px; }
.row-p .when { font: 600 17px/1 var(--display); font-variant-numeric: tabular-nums; text-align: right; }
.row-p .state { font: 600 11px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; color: var(--mute); text-align: right; }
.row-p .state.ready { color: var(--gold); }
.row-p .state.racing { color: var(--ink2); }
.row-p .state.forfeit { color: var(--bad); }
.row-p .tools { display: flex; gap: 4px; }
.tri-s { width: 26px; height: 24px; }
.tri-s polygon { fill: transparent; stroke: var(--faint); stroke-width: 1.6; stroke-linejoin: round; }
.tri-s polygon.lit { fill: var(--gold); stroke: var(--gold); }
.tri-s.ghost polygon { stroke-dasharray: 2.5 2.5; }
.pill { display: inline-block; margin-left: 7px; padding: 2px 6px; border-radius: var(--r-sm); vertical-align: 1px;
  font: 600 10px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase;
  color: var(--mute); border: 1px solid var(--hair-strong); }
.pill.host { color: var(--gold); border-color: var(--gold-line); }
.pill.rt { color: var(--ink2); }
.icon-btn { width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-md);
  background: transparent; border: 1px solid transparent; color: var(--mute); cursor: pointer; }
.icon-btn:hover { color: var(--ether); border-color: var(--ether-line); background: var(--ether-wash); }
.icon-btn.kick:hover { color: var(--bad); border-color: rgba(229, 146, 141, .45); background: rgba(229, 146, 141, .08); }
.icon-btn svg { width: 15px; height: 15px; }
.watchers { padding: 10px 18px 12px; border-top: 1px solid var(--hair); font-size: 13px; color: var(--mute); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; padding: 10px 18px 12px; border-top: 1px solid var(--hair); font-size: 12px; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend svg { width: 15px; height: 14px; }

/* links: game, LiveSplit, racetime.gg */
.links { display: grid; }
.link { display: grid; grid-template-columns: 136px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 13px 18px; }
.link + .link { border-top: 1px solid var(--hair); }
.link .what { display: flex; align-items: center; gap: 9px; font: 600 12px/1 var(--body); letter-spacing: .13em; text-transform: uppercase; color: var(--ink2); }
.lamp { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex: none; }
.lamp.ok { background: var(--ether); box-shadow: 0 0 0 3px var(--ether-wash); }
.lamp.gold { background: var(--gold); box-shadow: 0 0 0 3px var(--gold-wash); }
.lamp.wait { background: transparent; border: 2px solid var(--mute); }
.link .say { font-size: 14px; color: var(--ink2); min-width: 0; }
.link .say small { display: block; font-size: 12.5px; color: var(--mute); margin-top: 2px; }
.link .do { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.link .do .field { min-height: 32px; width: auto; font-size: 13px; }
.link .inline-form { display: flex; gap: 6px; margin-top: 6px; }
.link .inline-form .field { min-height: 34px; font-size: 13.5px; }
.check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); cursor: pointer; }
.check input { accent-color: var(--gold); width: 15px; height: 15px; }

/* ----------------------------------------------------------------- chat */

.chat-panel { display: flex; flex-direction: column; height: calc(100vh - 98px); min-height: 440px; position: sticky; top: 80px; }
.chat-head { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; border-bottom: 1px solid var(--hair); }
.chat-head h2 { font-size: 16px; }
.chat-log { flex: 1; overflow-y: auto; padding: 10px 8px 12px 14px; scrollbar-width: thin; scrollbar-color: var(--lift) transparent; }
.msg { padding: 4px 8px 4px 10px; margin: 1px 0; border-left: 2px solid transparent; font-size: 14.5px; line-height: 1.42; overflow-wrap: anywhere; }
.msg .who { font-weight: 700; color: var(--ink); margin-right: 7px; }
.msg .who.me { color: var(--gold-hi); }
.msg .t { float: right; margin-left: 8px; font: 400 11px/1.9 var(--mono); color: var(--faint); }
.msg.system { color: var(--mute); font-size: 13px; }
.msg.go, .msg.over { border-left-color: var(--gold); color: var(--gold-hi); font-weight: 600; background: linear-gradient(90deg, var(--gold-wash), transparent 70%); }
.msg.finish { border-left-color: var(--ok); color: var(--ink); font-weight: 600; background: linear-gradient(90deg, rgba(111, 207, 151, .08), transparent 70%); }
.msg.forfeit { border-left-color: var(--bad); color: var(--ink2); background: linear-gradient(90deg, rgba(229, 146, 141, .07), transparent 70%); }
.msg.ingame { border-left-color: var(--ether); background: linear-gradient(90deg, var(--ether-wash), transparent 75%); padding-top: 6px; padding-bottom: 7px; }
.msg.ingame .route { display: block; font: 600 10.5px/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--ether); margin-bottom: 6px; }
.msg.ingame .px { font: 400 10.5px/1.5 var(--pixel); color: #F4F4F4; letter-spacing: .02em; }

.composer { border-top: 1px solid var(--hair); padding: 10px 12px 12px; display: grid; gap: 8px; }
.composer .to { display: flex; gap: 6px; align-items: center; }
.composer .to .field { min-height: 32px; font-size: 13px; }
.composer.game .to .field { border-color: var(--ether-line); color: var(--ether); }
.composer .line { display: flex; gap: 8px; }
.composer .line .field { min-height: 42px; }
.composer.game .line .field:focus { border-color: var(--ether-line); box-shadow: 0 0 0 3px var(--ether-wash); }
.composer .preview { display: grid; gap: 5px; font-size: 12px; color: var(--mute); }

/* ------------------------------------------------------ join + dialogs */

.cover { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: var(--gutter);
  background: rgba(10, 10, 12, .92); }
.cover .panel { width: min(430px, 100%); padding: 26px; }
.cover h2 { font-size: 24px; }
.cover .sub { margin: 6px 0 18px; color: var(--ink2); }
.cover .btn { width: 100%; margin-top: 10px; }
.cover .err { margin-top: 12px; color: var(--bad); font-size: 14px; }

dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; color: var(--ink);
  background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--r-lg); }
dialog::backdrop { background: rgba(8, 8, 10, .74); }
.dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px 14px; border-bottom: 1px solid var(--hair); }
.dlg-head h2 { font-size: 20px; }
.dlg-body { padding: 8px 22px 22px; overflow-y: auto; }
.dlg-body h3 { font: 600 11px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin: 20px 0 8px; }
.set { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 220px); gap: 14px; align-items: center; padding: 10px 0; border-top: 1px solid var(--hair); }
.set:first-of-type { border-top: 0; }
.set .k { font-size: 14.5px; }
.set .k small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 2px; }
.set.wide { grid-template-columns: 1fr; gap: 7px; }
.set-err { margin: 0 0 10px; font-size: 13.5px; color: var(--bad); }
.how { counter-reset: how; display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; }
.how li { counter-increment: how; display: grid; grid-template-columns: 34px 1fr; gap: 6px; padding: 13px 0; border-top: 1px solid var(--hair); color: var(--ink2); font-size: 14.5px; }
.how li:first-child { border-top: 0; }
.how li::before { content: counter(how); font: 700 20px/1.1 var(--display); color: var(--gold); }
.how b { color: var(--ink); }
.how table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13.5px; }
.how td { padding: 6px 8px 6px 0; border-top: 1px solid var(--hair); vertical-align: top; }
.how td:first-child { color: var(--ink); white-space: nowrap; width: 38%; }

.kit-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 0; border-top: 1px solid var(--hair); }
.kit-row .k { font-size: 13.5px; color: var(--ink2); }
.kit-row .k small { display: block; font: 400 11px/1.3 var(--mono); color: var(--mute); }
.kit-row .field { min-height: 32px; font: 400 12px/1 var(--mono); }

.toasts { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; display: grid; gap: 8px; width: min(440px, calc(100vw - 32px)); }
.toast { padding: 11px 14px; border-radius: var(--r-md); background: var(--lift); border: 1px solid var(--hair-strong); font-size: 14px;
  animation: toast-in .18s ease-out; }
.toast.bad { border-color: rgba(229, 146, 141, .5); }
.toast.ether { border-color: var(--ether-line); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

.banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 11px 16px; font-size: 14px;
  border-color: var(--gold-line); background: var(--gold-wash); }

/* --------------------------------------------------------------- narrow */

@media (max-width: 940px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .chat-panel { position: static; height: 460px; }
  .home-grid { grid-template-columns: minmax(0, 1fr); gap: 34px; }
  .proof-head, .proof-grid { grid-template-columns: minmax(0, 1fr); }
  .shot.site { grid-row: auto; }
  .home-top { margin-bottom: 40px; }
  .ledger-row { grid-template-columns: 52px minmax(0, 1fr); }
  .ledger-row .n { font-size: 32px; }
  .ledger-row > div:last-child { grid-column: 2; }
}
@media (max-width: 560px) {
  .bar { flex-wrap: wrap; gap: 10px; }
  .bar-title { order: 3; flex-basis: 100%; }
  .clock-card { padding: 18px 16px 20px; }
  .tri-mark { width: 200px; height: 183px; right: -40px; opacity: .7; }
  .row-p { grid-template-columns: 30px 26px minmax(0, 1fr) auto; padding: 10px 12px; }
  .row-p .tools { display: none; }
  .row-p .place { font-size: 19px; }
  .link { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .link .do { justify-content: flex-start; }
  .set { grid-template-columns: 1fr; gap: 6px; }
  .strip { font-size: 9px; padding: 6px; }
  .strip i { width: 11px; height: 12px; }
  .code-chip span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------- the Ether
   Once per open (js/intro.js; never on overlay.html, never for reduced
   motion). Bolts are SVG polylines drawn by the script: a wide faint ether
   stroke under a thin white one reads as glow without a blur filter, which
   matters on a page that sits beside a game. */
.ether-sky { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.ether-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ether-sky .flash { position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(120% 90% at 50% 0%, #EAFBFF, #9FD9E8 45%, rgba(159, 217, 232, .25) 100%); }
.ether-sky .flash.on { animation: ether-flash .28s ease-out; }
@keyframes ether-flash { 0% { opacity: var(--hit, .5); } 35% { opacity: calc(var(--hit, .5) * .25); }
  50% { opacity: calc(var(--hit, .5) * .7); } 100% { opacity: 0; } }
.ether-sky g { animation: ether-bolt .3s steps(1, end) forwards; }
@keyframes ether-bolt { 0% { opacity: 1; } 28% { opacity: .2; } 46% { opacity: 1; } 72% { opacity: .45; } 100% { opacity: 0; } }
.ether-sky .glow { fill: none; stroke: var(--ether); stroke-width: 9; stroke-linejoin: round; stroke-linecap: round; opacity: .3; }
.ether-sky .core { fill: none; stroke: #FFFFFF; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ether-sky .fork .glow { stroke-width: 5; opacity: .22; }
.ether-sky .fork .core { stroke-width: 1.1; }

.brand img.ether-charge { animation: ether-charge .95s ease-out; }
@keyframes ether-charge {
  0%   { transform: scale(1); filter: none; }
  38%  { transform: scale(1.45); filter: brightness(1.7) drop-shadow(0 0 10px #9FD9E8); }
  100% { transform: scale(1); filter: none; }
}
/* everything the last strike touched: the hairlines go live for a moment */
body.electrified .panel, body.electrified .btn, body.electrified .field,
body.electrified .tag, body.electrified .code-chip, body.electrified .ledger { animation: ether-zap .75s steps(1, end); }
@keyframes ether-zap {
  0%, 22%, 48% { border-color: var(--ether); box-shadow: 0 0 0 1px var(--ether-line), 0 0 22px rgba(159, 217, 232, .28); }
  11%, 34%, 66% { border-color: var(--hair-strong); box-shadow: none; }
  100% { box-shadow: none; }
}
body.electrified .clock, body.electrified .home h1 { animation: ether-type .75s steps(1, end); }
@keyframes ether-type {
  0%, 22%, 48% { text-shadow: 0 0 18px rgba(159, 217, 232, .75), 0 0 2px #EAFBFF; }
  11%, 34%, 66%, 100% { text-shadow: none; }
}