/* pcaha-live
   Visual language borrowed from a community-rink scoreboard: a dark steel
   housing with amber numerals, and a red goal light that only burns when a
   game is actually live. Everything else stays quiet so the score reads first.
   Built mobile-first: every decision made at 375px, then allowed to breathe. */

:root {
  --ice:    #F2F6F8;  /* pale rink ice, page background */
  --board:  #10161C;  /* scoreboard housing */
  --steel:  #5A6B78;  /* boards and secondary text */
  --accent:  #FFB000;  /* incandescent scoreboard numerals */
  --lamp:   #E23A3A;  /* goal light */
  --line:   #D4E0E7;  /* hairlines */
  --ink:    #0C1217;

  --surface: #FFFFFF;
  --text: var(--ink);
  --muted: var(--steel);

  --pad: 16px;              /* the phone gutter, used everywhere */
  --radius: 10px;
  --tap: 44px;              /* minimum tap target */

  --display: "Oswald", system-ui, sans-serif;
  --body: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* Light and dark for every theme are generated into themes.css. */

* { box-sizing: border-box; }

/* Form controls do not inherit the page font; without this they fall back to
   the platform default and the bar ends up mixing three faces. */
input, button, select, textarea { font-family: inherit; }

/* The default colour for any link nothing else styles.
   It has to name :link and :visited, because the user agent styles those and
   a bare `a` loses to them -- leaving unstyled links browser-blue, and purple
   once visited. But wrapping them in :where() keeps the rule at zero
   specificity, so a single class like .brand still wins. Without that, this
   rule beat every class-styled link in the app and painted the wordmark, the
   back arrow and the menu items with the page accent. */
a:where(:link, :visited) { color: var(--accent); }
a:hover { text-decoration: underline; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ice);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;               /* no sideways scroll at any width */
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- sticky filter bar ---------- */

.bar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bar);
  color: var(--bar-text);
  padding: calc(env(safe-area-inset-top) + 7px) var(--pad) 7px;
  border-bottom: 3px solid var(--accent-bright);
}

/* One row: brand, freshness, favourites, account. Everything that can shrink
   does, so it never wraps onto a second line and eats vertical space that the
   game cards need. */
.bar__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

/* Everything except the wordmark sits in one tight group on the right. It
   used to be spread across the bar by a flexing stamp, which looked absurd
   on a wide screen. */
.bar__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand {
  flex: none;
  color: var(--bar-text);
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bar-text);
  text-decoration: none;
}
.brand span { color: var(--accent-bright); margin-left: 5px; }

.stamp {
  flex: none;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 11px;
  line-height: 1.2;
  color: var(--bar-dim);
}
.stamp[data-stale="true"] { color: var(--accent-bright); }

.bar__filters {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin-top: 7px;
}

.field { display: block; }

.field__label {
  display: block;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bar-dim);
  margin-bottom: 2px;
}

/* Native selects on purpose: they give real phone pickers, which beat any
   custom dropdown when you are one-handed in a cold rink. */
.field select, .field select option {
  /* option is rendered natively and falls back to Arial without this. */
  font-family: var(--body);
}
.field select {
  width: 100%;
  min-height: 36px;
  /* Tight right padding so "Integrated" is not clipped by the arrow. */
  padding: 0 4px 0 9px;
  font-size: 15px;                  /* 16px stops iOS zooming on focus */
  color: var(--bar-text);
  background: var(--bar-field);
  border: 1px solid var(--bar-edge);
  border-radius: var(--radius);
}

.datenav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.datenav__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 34px;
  font-size: 24px;
  line-height: 1;
  color: var(--accent-bright);
  text-decoration: none;
  border-radius: var(--radius);
}
.datenav__arrow:active { background: var(--bar-field); }

.datenav__label {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.datenav__label b { color: var(--accent-bright); font-weight: 500; }

/* ---------- game list ---------- */

main { padding: var(--pad); max-width: 560px; margin: 0 auto; }

.games { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }

.game {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px 12px;
}

.game--live { border-color: var(--lamp); }
.game--cancelled { opacity: 0.6; }

.game__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--ice);
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.pill--live { background: var(--lamp); border-color: var(--lamp); color: #FFF; }
.pill--final { background: var(--board); border-color: var(--board); color: var(--on-board); }

/* The goal light. The one piece of motion on the page, and it only burns
   while a game is actually being played. */
.lamp {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 0 0 0 rgba(255,255,255,0.8);
  animation: lamp 1.6s ease-out infinite;
}
@keyframes lamp {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
  70%  { box-shadow: 0 0 0 7px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

.game__tag {
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  letter-spacing: 0.02em;
}
.game__tag b { font-weight: 600; color: var(--text); }
/* Female games carry the same division and tier as the integrated stream, so
   they need a mark of their own when both are shown together. */
.fem {
  display: inline-block;
  margin-left: 2px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--steel);
  color: #FFF;
  font-size: 10px;
  font-weight: 600;
}

/* ---------- the scoreboard ---------- */

.board {
  background: var(--board);
  border-radius: 8px;
  padding: 10px 12px;
}

.board__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}
.board__row + .board__row { border-top: 1px solid var(--board-edge); }

.board__team {
  flex: 1;
  min-width: 0;                     /* lets long club names wrap, not overflow */
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.25;
  color: var(--board-text);
}

.crest {
  width: 26px; height: 26px;
  flex: none;
  object-fit: contain;
  border-radius: 4px;
  background: var(--board-edge);
}

/* The largest thing on the page, by design: readable at arm's length. */
.board__score {
  flex: none;
  min-width: 1.1em;
  font-family: var(--display);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  text-align: right;
  /* The numerals belong to the scoreboard, which each theme colours itself. */
  color: var(--on-board);
}

/* ---------- location + action ---------- */

.game__where {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
}
/* Where a live game is up to, inside the pill: "Live 10:35 2nd". A finished
   game needs no such detail -- FINAL says everything. */
.at {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
}

.game__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}

.mono { font-family: var(--mono); font-size: 11px; color: var(--muted); }

.sheet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: var(--radius);
  background: var(--ice);
  border: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}
.sheet:active { background: var(--line); }

.empty {
  margin: 40px 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* ---------- quality floor ---------- */

a:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .lamp { animation: none; }
  * { transition: none !important; }
}

@media (min-width: 600px) {
  .bar__filters { grid-template-columns: 1fr 1fr 1fr; }
  .board__score { font-size: 46px; }
}

/* ---------- game sheet ----------
   Spordle's own report is a letter-size print layout that overflows a phone by
   ~158px. Same information, rebuilt as rows that wrap. */

.bar--sheet { padding-bottom: 10px; }
.back {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-right: 10px;
  color: var(--accent-bright);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}
.sheetno { color: var(--bar-dim); font-size: 12px; }

.sheet-main { padding: var(--pad); max-width: 560px; margin: 0 auto; }

.board--sheet { padding: 12px 14px; }
.board--sheet .board__team span { display: block; }
.side {
  display: block;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bar-dim);
}

.sheet-meta {
  margin: 10px 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
}
.sheet-meta b { color: var(--accent); }

/* Line score: the one table worth keeping, because periods are genuinely a
   grid. Sized so three periods plus a total fit inside 375px. */
.linescore {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
  font-size: 13px;
}
.linescore th, .linescore td {
  padding: 7px 4px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.linescore thead th {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.linescore th[scope="row"] {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  max-width: 45%;
}
.linescore .tot { font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }

.block { margin-bottom: 20px; }
.block h2 {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.h2side {
  font-family: var(--body);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* Home and away, read as jerseys do: home dark, road light. Spordle's own
   team colours are unusable here -- only a third of teams set one and the
   values are free text like "White with red & black trim" -- and colour is
   never the only signal, since every row still names its team. */
.key {
  float: right;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: none;
}
.key i { margin: 0 3px 0 8px; }

.key__home, .key__away {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  vertical-align: baseline;
}
.key__home { background: var(--ink); border: 1px solid var(--ink); }
.key__away { background: transparent; border: 1px solid var(--steel); }

.linescore th[scope="row"] i,
.block h2 i { margin-right: 6px; }

.plays { list-style: none; margin: 0; padding: 0; }
.play {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 10px;
  align-items: start;
  padding: 9px 10px 9px 12px;
  border-top: 1px solid var(--line);
  border-left: 4px solid transparent;
  font-size: 13.5px;
}
.play--home {
  border-left-color: var(--ink);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.play--away {
  border-left-color: var(--steel);
  background: transparent;
}
.play__when {
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  text-transform: uppercase;
}
.play__who { min-width: 0; }
.play__who b { font-weight: 600; }
.assists { display: block; font-size: 12px; color: var(--muted); }
/* The team sits above the scorer rather than in a third column: a squeezed
   82px column wrapped "RIDGE MEADOWS A4-RED" onto three lines. */
.play__team {
  display: block;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
.note {
  display: inline-block;
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--on-board);
  color: var(--board);
  font-size: 10px;
  font-weight: 700;
}

.roster { list-style: none; margin: 0; padding: 0; }
.player {
  display: grid;
  grid-template-columns: 26px 26px 1fr auto;
  gap: 8px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
}
.player__num { text-align: right; color: var(--muted); }
.player__pos {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}
.player__name { min-width: 0; }
.letter {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
}
.ap {
  display: inline-block;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--steel);
  color: #FFF;
  font-size: 10px;
  font-weight: 600;
}

/* The starting goalie, as the official sheet marks them ("... * AP / S"). */
.badges { display: inline-flex; gap: 4px; align-items: center; }
.starter {
  display: inline-block;
  min-width: 17px;
  padding: 0 4px;
  border-radius: 3px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}

.player--staff { color: var(--muted); }
.role {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.none { margin: 0; font-size: 13px; color: var(--muted); }

.sheet--wide { width: 100%; margin-bottom: 8px; }

/* ---------- favourites, profiles, team pages ---------- */

.starlink, .star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  min-height: 38px;
  font-size: 20px;
  line-height: 1;
  color: var(--bar-dim);
  background: none;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  font-family: var(--body);
}
.starlink.star--on, .star--on { color: var(--accent-bright); }

/* On a team page the star is a labelled control, not a bare glyph. */
.star {
  gap: 6px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius);
  border: 1px solid var(--bar-edge);
  color: var(--bar-text);
  background: var(--bar-field);
  min-width: 0;
}
.star--on { border-color: var(--accent); color: var(--accent); }
.favform { margin: 0; }

.today {
  margin-left: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-bright);
  color: var(--accent-bright);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.favchip {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--bar-dim);
}
.favchip a { color: var(--accent-bright); }

/* Team-page rows carry a date AND a time, so they need more room than the
   game sheet's bare period/clock, which wraps "3:45 PM" onto three lines. */
.plays--dated .play { grid-template-columns: 64px 1fr; }
.plays--dated .play__when { font-size: 10.5px; }

.favlist { list-style: none; margin: 0; padding: 0; }

.favrow {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.favrow:last-child { border-bottom: 1px solid var(--line); }

.favrow__crest {
  width: 32px; height: 32px;
  object-fit: contain;
  border-radius: 5px;
  background: var(--board);
}
.favrow__blank {
  width: 32px; height: 32px;
  border-radius: 5px;
  background: var(--line);
}
.favrow__name {
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
  text-decoration: none;
}
.favrow__name:hover { text-decoration: underline; }

.favrow .star { min-height: 38px; padding: 0 11px; }

.favmore {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.teamlink:link, .teamlink:visited { color: inherit; text-decoration: none; }
.teamlink:hover, .teamlink:focus-visible { text-decoration: underline; }

.teamhead {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--pad) var(--pad) 0;
}
.teamhead .sheet-meta { margin: 10px 0 0; }

.listhead {
  max-width: 560px;
  margin: 20px auto 8px;
  padding: 0 var(--pad);
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.teamname {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 6px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.15;
}
.crest--lg { width: 40px; height: 40px; }

.outcome {
  display: inline-block;
  min-width: 19px;
  margin-right: 4px;
  padding: 0 4px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #FFF;
}
.outcome--w { background: #1F7A4C; }
.outcome--l { background: #9B2C2C; }
.outcome--t { background: var(--steel); }

/* Gate + profile forms */
.gate { padding: 48px var(--pad); max-width: 380px; margin: 0 auto; }
.brand--gate {
  display: block;
  margin-bottom: 20px;
  font-size: 26px;
  color: var(--text);
  text-align: center;
}
.gate__form .field, .profileform .field { margin-bottom: 12px; }
.gate__error { color: var(--lamp); font-size: 13px; margin: 0 0 12px; }
.gate__intro { margin-bottom: 18px; line-height: 1.5; }

/* Six characters, spaced out and large: this gets typed from a phone screen
   while looking at another app. */
.codebox {
  font-family: var(--mono);
  font-size: 24px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  min-height: 52px;
}
.gate__sent {
  padding: 14px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.signout {
  background: none;
  border: 0;
  color: var(--bar-dim);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  padding: 10px 0;
  text-align: right;
}

/* Match every text-ish input, not a hand-listed few: the email field was
   type="email" and so picked up neither the width nor the colours. */
.field input {
  width: 100%;
  min-height: var(--tap);
  padding: 0 10px;
  font-family: var(--body);
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.gate .field__label { color: var(--muted); }

.profileform select {
  width: 100%;
  min-height: var(--tap);
  padding: 0 10px;
  font-size: 16px;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.profileform .field__label { color: var(--muted); }

button.sheet { cursor: pointer; font-family: var(--body); }

/* ---------- theme picker ---------- */

.themes { display: grid; gap: 8px; }

.theme {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "sw name" "sw blurb";
  gap: 0 10px;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 9px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--body);
  cursor: pointer;
}
.theme--on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.theme i {
  grid-area: sw;
  width: 22px; height: 22px;
  border-radius: 5px;
  /* A swatch on a pale card needs an edge, or white reads as nothing. */
  border: 1px solid var(--line);
}
.theme__name { grid-area: name; font-size: 14px; font-weight: 600; }
.theme__blurb { grid-area: blurb; font-size: 11.5px; color: var(--muted); }

/* ---------- theme picker ---------- */

.themes { display: grid; gap: 8px; }

.theme {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "sw name" "sw blurb";
  gap: 0 10px;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 9px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--body);
  cursor: pointer;
}
.theme--on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.theme i {
  grid-area: sw;
  width: 22px; height: 22px;
  border-radius: 5px;
  /* A swatch on a pale card needs an edge, or white reads as nothing. */
  border: 1px solid var(--line);
}
.theme__name { grid-area: name; font-size: 14px; font-weight: 600; }
.theme__blurb { grid-area: blurb; font-size: 11.5px; color: var(--muted); }

/* ---------- the bar's right-hand side ----------
   Email is plain text, not a control: nothing to open, nothing to mis-tap.
   The only affordance is a circle showing the current accent; tapping it
   offers the other colours as circles, and the sign-out. */

/* Same family as the stamp beside it: the bar had a wordmark face, a mono
   face and a body face all within 200px, which read as a ransom note. */
.who {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 11px;
  color: var(--bar-dim);
}

.bar__right { flex: none; display: flex; align-items: center; gap: 2px; }

.pal { position: relative; }

.pal__dot {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 4px 0 2px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
  cursor: pointer;
  list-style: none;
}
/* Both of these are needed: hiding only the WebKit marker leaves a triangle
   in other engines, which read as a second caret next to the name. */
.pal__dot::-webkit-details-marker { display: none; }
.pal__dot::marker { content: ""; }
.pal[open] .pal__dot { box-shadow: 0 0 0 2px var(--accent-bright); }

.pal__panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  padding: 12px;
  background: var(--bar-field);
  border: 1px solid var(--bar-edge);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.pal__dots { display: flex; gap: 10px; margin-bottom: 10px; }





.pal__out {
  width: 100%;
  min-height: 34px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--bar-edge);
  color: var(--board-text);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.pal__in {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.acct__in {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 8px;
  color: var(--accent-bright);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

/* ---------- theme picker ---------- */

.themes { display: grid; gap: 8px; }

.theme {
  display: grid;
  grid-template-columns: 22px 1fr;
  grid-template-areas: "sw name" "sw blurb";
  gap: 0 10px;
  align-items: center;
  width: 100%;
  min-height: var(--tap);
  padding: 9px 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--body);
  cursor: pointer;
}
.theme--on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.theme i {
  grid-area: sw;
  width: 22px; height: 22px;
  border-radius: 5px;
  /* A swatch on a pale card needs an edge, or white reads as nothing. */
  border: 1px solid var(--line);
}
.theme__name { grid-area: name; font-size: 14px; font-weight: 600; }
.theme__blurb { grid-area: blurb; font-size: 11.5px; color: var(--muted); }

/* ---------- account menu in the bar ---------- */

.bar__right { flex: none; display: flex; align-items: center; gap: 0; }

.acct { position: relative; }
.acct__who {
  display: flex;
  align-items: center;
  gap: 3px;
  min-height: 38px;
  padding: 0 2px 0 6px;
  color: var(--bar-dim);
  font-family: var(--mono);
  font-size: 11px;
  cursor: pointer;
  list-style: none;
}
.acct__who::-webkit-details-marker { display: none; }
.acct__who::marker { content: ""; }
.acct summary { list-style: none; }
.acct__email {
  /* Addresses are long and the bar is 390px wide. */
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct[open] .acct__who { color: var(--accent); }
.acct__caret { font-size: 9px; }

.acct__panel {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  width: min(74vw, 300px);
  padding: 12px;
  background: var(--bar-field);
  border: 1px solid var(--bar-edge);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
.acct__label {
  margin: 0 0 7px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bar-dim);
}
.acct__themes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  border-radius: 999px;
  background: var(--bar);
  border: 1px solid var(--bar-edge);
  color: var(--board-text);
  font-family: var(--body);
  font-size: 12px;
  cursor: pointer;
}
.chip i {
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
}
.chip--on { border-color: var(--accent); color: var(--accent); }

.acct__out {
  width: 100%;
  min-height: 38px;
  border-radius: var(--radius);
  background: transparent;
  border: 1px solid var(--bar-edge);
  color: var(--board-text);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.acct__out:active { background: var(--bar); }

.pal__in {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.acct__in {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 8px;
  color: var(--accent);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}




/* ---------- one menu, on every page ----------
   Replaces a star and a colour dot sitting loose in the bar. Everything that
   is not a game -- colour, favourites, who you are -- lives behind this. */

.backarrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 38px;
  margin-left: -8px;
  font-size: 26px;
  line-height: 1;
  color: var(--accent-bright);
  text-decoration: none;
}

.barnote {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--bar-dim);
  white-space: nowrap;
}

.menu { position: relative; flex: none; }

.menu__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: -6px;
  cursor: pointer;
  list-style: none;
}
/* Both are needed: hiding only the WebKit marker leaves a triangle in other
   engines, which reads as a stray caret beside the menu. */
.menu__button::-webkit-details-marker { display: none; }
.menu__button::marker { content: ""; }

/* Three bars, drawn rather than typed, so they line up at any size. */
.menu__bars,
.menu__bars::before,
.menu__bars::after {
  display: block;
  width: 19px;
  height: 2px;
  border-radius: 2px;
  background: var(--bar-text);
  content: "";
}
.menu__bars { position: relative; }
.menu__bars::before { position: absolute; top: -6px; }
.menu__bars::after  { position: absolute; top: 6px; }
.menu[open] .menu__bars { background: var(--accent-bright); }
.menu[open] .menu__bars::before { background: var(--accent-bright); }
.menu[open] .menu__bars::after  { background: var(--accent-bright); }

.menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  width: min(86vw, 320px);
  padding: 13px;
  background: var(--bar-field);
  border: 1px solid var(--bar-edge);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.menu__label {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bar-dim);
}

/* A palette is three colours together, so the swatch shows three. A single
   dot could not tell Gold Bar from Steeltown. */
.menu__palettes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-height: 44vh;
  overflow-y: auto;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bar-edge);
}

.pal {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--bar-text);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.pal:hover { background: var(--bar-edge); }
.pal--on { border-color: var(--accent-bright); }

.pal__chip {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: linear-gradient(135deg,
      var(--a) 0 34%, var(--b) 34% 67%, var(--c) 67% 100%);
}

.menu__item {
  display: block;
  padding: 9px 0;
  color: var(--bar-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.menu__item:hover { color: var(--accent-bright); text-decoration: none; }

.menu__who {
  margin: 10px 0 8px;
  padding-top: 11px;
  border-top: 1px solid var(--bar-edge);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--bar-dim);
  overflow-wrap: anywhere;
}

.menu__out {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--bar-edge);
  color: var(--bar-text);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.menu__in { margin-top: 11px; border-color: var(--accent-bright); color: var(--accent-bright); }