/* Sleep Stops Play — the bedside wireless.
   Dark always. Near-black warm brown, one amber glow, dim cream text.
   No pure white anywhere. Motion is a slow breathe and a needle
   quiver, both removed under prefers-reduced-motion. */

:root {
  --night: #171310;        /* the room */
  --bakelite: #241c15;     /* the set's body */
  --bakelite-edge: #33271c;
  --panel: #1d1712;
  --cream: #d8cbb4;        /* dim cream, never white */
  --cream-dim: #9a8d78;
  --amber: #e8a13c;        /* valve glow, the only accent */
  --amber-deep: #b06f1e;
  --box-grey: #3a3a3d;     /* ident boxes */
  --stripe-blue: #3d6db5;
  --stripe-maroon: #7c2d3c;
  --stripe-gold: #c8952f;
  color-scheme: dark;
}

* { box-sizing: border-box; }

/* [hidden] must beat any display we set later. Twice in this rebuild a
   component shipped visible because a `display: flex` further down the
   sheet outranked the attribute: the menu, then the "View all" button
   on an empty card. One rule, once, at the top. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--night);
  color: var(--cream);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.5;
}

body {
  min-height: 100vh;
  padding: calc(20px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right))
           calc(28px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}

main { width: 100%; display: flex; flex-direction: column; align-items: center; }

a { color: var(--amber); text-decoration-color: var(--amber-deep); }

/* ---- the ident ------------------------------------------------------- */

.masthead { text-align: center; margin: 8px 0 22px; }

.ident {
  display: inline-flex;
  gap: 7px;
  transform: skewX(-12deg);
}

.ident-box {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: var(--box-grey);
  padding: 6px 12px 8px;
  box-shadow: 0 2px 0 rgba(0,0,0,.4);
}

.ident-box-2 { transform: translateY(4px); }
.ident-box-3 { transform: translateY(8px); }

.ident-letter {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: #e9e4da; /* warm ivory, never pure */
  padding-right: 3px;
}

.ident-stripe { width: 100%; height: 4px; margin-top: 5px; }
.stripe-blue { background: var(--stripe-blue); }
.stripe-maroon { background: var(--stripe-maroon); }
.stripe-gold { background: var(--stripe-gold); }

.wordmark {
  margin: 18px 0 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .42em;
  text-indent: .42em; /* balances the letterspaced centring */
  color: var(--cream);
}

.tagline {
  margin: 8px 0 0;
  color: var(--cream-dim);
  font-style: italic;
  font-size: 15px;
}

.fixture {
  margin: 6px auto 0;
  max-width: 440px;
  color: var(--cream-dim);
  font-size: 13px;
  letter-spacing: 0.02em;
  opacity: 0.85;
}

/* ---- the wireless ---------------------------------------------------- */

.wireless { width: 100%; max-width: 430px; text-align: center; }

.set {
  background: linear-gradient(175deg, var(--bakelite-edge), var(--bakelite) 30%);
  border: 1px solid #40332593;
  border-radius: 22px 22px 14px 14px;
  padding: 18px 18px 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(232,161,60,.08);
}

.set-top { display: flex; gap: 12px; align-items: stretch; }

/* the dial */
.dial { flex: 1 1 auto; }

.dial-glass {
  position: relative;
  height: 96px;
  background: radial-gradient(120% 90% at 50% 10%, #2b2115, #1b140d 70%);
  border: 1px solid #4a3a26;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 22px rgba(232,161,60,.16);
}

.playing .dial-glass { animation: breathe 6s ease-in-out infinite; }

@keyframes breathe {
  0%, 100% { box-shadow: inset 0 0 22px rgba(232,161,60,.16); }
  50%      { box-shadow: inset 0 0 30px rgba(232,161,60,.30); }
}

.dial-band {
  position: absolute;
  top: 7px; left: 0; right: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--amber);
  opacity: .9;
}

.dial-scale {
  position: absolute;
  top: 30px; left: 10px; right: 10px;
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--cream-dim);
}

.dial-ticks {
  position: absolute;
  top: 50px; left: 10px; right: 10px; height: 12px;
  background: repeating-linear-gradient(
    to right,
    #6a5638 0, #6a5638 1px,
    transparent 1px, transparent 9px
  );
  opacity: .75;
}

.dial-needle {
  position: absolute;
  top: 24px; bottom: 10px;
  left: 64%;
  width: 2px;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(232,161,60,.8);
}

.playing .dial-needle { animation: quiver 1.1s ease-in-out infinite; }

@keyframes quiver {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-1.5px); }
  70%      { transform: translateX(1.5px); }
}

@media (prefers-reduced-motion: reduce) {
  .playing .dial-glass, .playing .dial-needle, .live-dot { animation: none !important; }
}

/* the dot-matrix day counter */
.matrix-wrap { display: flex; align-items: stretch; }

.matrix {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-width: 86px;
  padding: 10px 12px;
  background: #120d09;
  border: 1px solid #3c2f1f;
  border-radius: 10px;
  background-image: radial-gradient(rgba(232,161,60,.05) 1px, transparent 1px);
  background-size: 4px 4px;
}

.matrix-label {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .3em;
  text-indent: .3em;
  color: var(--cream-dim);
}

.matrix-digits {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 30px;
  font-weight: 700;
  color: var(--amber);
  text-shadow: 0 0 10px rgba(232,161,60,.55);
}

/* the controls row */
.set-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.grille {
  flex: 1 1 auto;
  height: 52px;
  border-radius: 8px;
  background: repeating-linear-gradient(
    to right,
    var(--panel) 0, var(--panel) 4px,
    #14100c 4px, #14100c 8px
  );
  border: 1px solid #362a1c;
}

.knob {
  flex: 0 0 auto;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 2px solid var(--amber-deep);
  background: radial-gradient(circle at 34% 30%, #46372a, #241c15 68%);
  box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 16px rgba(232,161,60,.22);
  cursor: pointer;
  padding: 0;
  touch-action: manipulation;
}

.knob:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

.playing .knob { box-shadow: 0 6px 14px rgba(0,0,0,.55), 0 0 24px rgba(232,161,60,.45); }

.knob-face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

.knob-icon { width: 30px; height: 30px; fill: var(--amber); }
.icon-pause { display: none; }
.playing .icon-play { display: none; }
.playing .icon-pause { display: block; }

.set-status {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--cream-dim);
  min-height: 1.3em;
}

.set-status.error { color: #c98961; }

/* listeners line */
.listeners {
  margin: 18px 0 4px;
  font-size: 14px;
  color: var(--cream-dim);
}

.live-dot {
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(232,161,60,.8);
  animation: dotpulse 3s ease-in-out infinite;
  vertical-align: 1px;
}

@keyframes dotpulse {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

.local-plays { font-size: 12px; }

.listen-links { font-size: 13px; color: var(--cream-dim); margin: 4px 0 0; }


/* ======================================================================
   THE COMPACT STACK (2026-09-07)

   The page used to run the wireless, then a wide gap, then a rail of
   "coming soon" panels with generous padding, and the pigeonhole hidden
   inside one of them. On a phone that was four screens of scrolling
   before anything you could do. Everything below is one column of
   tight, equal cards: set, send, pigeonhole, archive, vote, sponsor.

   Card padding, row height and gap are the only rhythm here. Resist
   adding a second scale.
   ====================================================================== */

:root {
  --card-bg: #1a140f;
  --card-line: #33271c;
  --row-bg: #14100c;
  --gap: 12px;
  --pad: 15px;
}

/* ---- the menu --------------------------------------------------------- */

.masthead { position: relative; }

.menu-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 44px;
  height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.menu-bar {
  display: block;
  width: 21px;
  height: 2px;
  background: var(--amber);
  border-radius: 2px;
  transition: transform .18s cubic-bezier(.22,1,.36,1), opacity .18s;
}

.menu-btn[aria-expanded="true"] .menu-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-bar:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-btn:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 8px; }

.menu {
  position: absolute;
  top: 46px;
  right: 0;
  z-index: 20;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0,0,0,.55);
  text-align: left;
}

.menu-item {
  min-height: 46px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--card-line);
  color: var(--cream);
  font-family: inherit;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}

.menu-item:last-child { border-bottom: 0; }
.menu-item:hover, .menu-item:focus-visible { background: #221a12; color: var(--amber); outline: none; }

/* ---- layout ----------------------------------------------------------- */

main {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* The set keeps its own shape; it is the one object on the page that is
   pretending to be a physical thing. */
.set { width: 100%; text-align: center; }

.matrix {
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 14px;
}

.matrix-lamp {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px rgba(232,161,60,.85);
  flex: none;
}

.playing .matrix-lamp { animation: dotpulse 3s ease-in-out infinite; }

.matrix-onair { font-size: 17px; letter-spacing: .1em; }

.set-status { margin: 10px 0 0; }

.set-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid #322718;
  font-size: 12.5px;
  color: var(--cream-dim);
}

.set-foot-sep { width: 1px; height: 12px; background: #3c2f1f; }

/* ---- cards ------------------------------------------------------------ */

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-line);
  border-radius: 12px;
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.card-title {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--amber);
}

.card-sub { margin: -2px 0 0; font-size: 14px; color: var(--cream-dim); }

.card-more {
  margin-left: auto;
  background: none;
  border: 0;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 0 0 8px;
  color: var(--cream-dim);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}

.card-more:hover, .card-more:focus-visible { color: var(--amber); outline: none; }

.pill {
  margin-left: auto;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-indent: .16em;
  padding: 4px 8px;
  border: 1px solid #4a3a26;
  border-radius: 999px;
  color: var(--cream-dim);
  white-space: nowrap;
}

.pill-open {
  color: #7fd48a;
  border-color: #3c6b44;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pill-open::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #7fd48a;
  box-shadow: 0 0 7px rgba(127,212,138,.7);
}

.card-empty { margin: 0; font-size: 14px; color: var(--cream-dim); font-style: italic; }

/* ---- the send form ---------------------------------------------------- */

/* Text inputs are styled globally, not inside .studio-form: the sponsor
   page uses the same controls, and scoping them to the home page's form
   left that page with bare native boxes (found on screenshot, 2026-09-07). */
input[type="text"], input[type="url"], input[type="email"] {
  min-height: 46px;
  padding: 0 13px;
  background: var(--row-bg);
  border: 1px solid #3c2f1f;
  border-radius: 9px;
  color: var(--cream);
  font-family: inherit;
  font-size: 15px;
  min-width: 0;
  width: 100%;
}

input::placeholder { color: #8a7d6b; }

input[type="text"]:focus, input[type="url"]:focus, input[type="email"]:focus {
  outline: none;
  border-color: var(--amber-deep);
  box-shadow: 0 0 0 2px rgba(232,161,60,.15);
}

/* The honeypot. Positioned off-screen rather than display:none, which
   some bots know to skip. A person never reaches it: no label, no tab
   stop, hidden from the accessibility tree. */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.studio-form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.studio-form button.amber { grid-column: 1 / -1; min-height: 46px; }

@media (min-width: 430px) {
  .studio-form { grid-template-columns: 1fr 1fr auto; }
  .studio-form button.amber { grid-column: auto; padding: 0 18px; }
}

.amber {
  background: linear-gradient(180deg, #efb055, var(--amber-deep));
  border: 0;
  border-radius: 9px;
  color: #2a1c08;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 0 16px;
  min-height: 46px;
}

.amber:hover { filter: brightness(1.06); }
.amber:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.amber:disabled { opacity: .55; cursor: default; }

.studio-note { margin: 0; min-height: 1.2em; color: var(--cream-dim); font-size: 13.5px; }

/* ---- rows ------------------------------------------------------------- */

.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.rows li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "who when" "msg when";
  column-gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-top: 1px solid #241c14;
}

.rows li:first-child { border-top: 0; padding-top: 2px; }

.q-from {
  grid-area: who;
  color: var(--cream);
  font-weight: 700;
  font-size: 14.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-msg {
  grid-area: msg;
  color: var(--cream-dim);
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.q-when {
  grid-area: when;
  justify-self: end;
  color: var(--amber);
  font-size: 12.5px;
  white-space: nowrap;
}

.q-when.is-waiting { color: var(--cream-dim); }
.q-when.is-exact { color: var(--amber); font-weight: 600; }
.q-when.is-now { color: #7fd48a; font-weight: 600; }
.q-when.is-closed { color: var(--cream-dim); font-style: italic; }

.q-actions { grid-area: when; justify-self: end; display: flex; align-items: center; gap: 2px; }

.q-act {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 40px;
  padding: 0 6px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--cream-dim);
  font-family: inherit;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.q-act svg { width: 16px; height: 16px; fill: none; stroke: var(--amber); stroke-width: 1.6; flex: none; }
.q-act:hover, .q-act:focus-visible { background: #221a12; color: var(--cream); outline: none; }

.q-act-sep { width: 1px; height: 15px; background: #3c2f1f; flex: none; }

/* The sender's own row: a thing they hold, not a position they occupy. */
.rows li.is-mine { background: #201811; border-radius: 9px; padding-left: 11px; padding-right: 11px; margin: 2px 0; border-top-color: transparent; }
.rows li.is-mine + li { border-top-color: transparent; }

.q-mine-tag {
  grid-area: who;
  justify-self: end;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--night);
  background: var(--amber);
  border-radius: 3px;
  padding: 2px 5px;
}

/* Progress runs along the foot of your own row and only ever grows. */
.q-progress {
  position: absolute;
  left: 11px;
  right: 11px;
  bottom: 3px;
  height: 2px;
  border-radius: 2px;
  background: var(--amber);
  opacity: .5;
  width: 0;
  transition: width .8s cubic-bezier(.22,1,.36,1);
}

/* ---- the vote, not yet ------------------------------------------------- */

.card-soon { opacity: .82; }
.faux-vote { display: flex; flex-direction: column; gap: 7px; }

.vote-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  background: var(--row-bg);
  border: 1px solid #2e2418;
  border-radius: 9px;
  overflow: hidden;
}

.vote-row input { accent-color: var(--amber); flex: none; }
.vote-text { position: relative; z-index: 1; font-size: 14px; color: var(--cream-dim); }

/* No vote bars. They showed 62/27/11 for a vote nobody has cast, and a
   station whose whole discipline is never inventing a number should not
   invent one in a preview either. */

/* ---- the sponsor panel ------------------------------------------------- */

.sponsor-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  overflow: hidden;
  padding: 16px 16px 16px 4px;
  background: radial-gradient(120% 140% at 18% 0%, #2a2013, var(--card-bg) 62%);
  border: 1px solid #4a3a26;
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s cubic-bezier(.22,1,.36,1);
}

.sponsor-card:hover, .sponsor-card:focus-visible {
  border-color: var(--amber-deep);
  outline: none;
  transform: translateY(-1px);
}

.floodlight { width: 96px; height: 120px; flex: none; margin: -6px 0 -6px -6px; }

.sponsor-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.sponsor-kicker {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--amber);
}

.sponsor-line {
  margin: 0;
  font-family: Georgia, serif;
  font-size: 19px;
  line-height: 1.25;
  color: var(--cream);
  text-wrap: balance;
}

.sponsor-cta { font-size: 14px; color: var(--amber); }

/* ---- footer ------------------------------------------------------------ */

.disclosure {
  width: 100%;
  max-width: 460px;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid #241c14;
  text-align: center;
}

/* The disclosure is the legal guardrail on using real players' names in
   a fiction. It may be quiet; it may not be hard to read. #6f6455 came
   out at 3.19:1 against the night, under the 4.5 it needs. */
.disclosure p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--cream-dim);
}

.disclosure-mark {
  margin-top: 10px !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* ---- motion ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .q-progress, .menu-bar, .sponsor-card { transition: none; }
  .playing .dial-glass, .playing .dial-needle, .playing .matrix-lamp { animation: none; }
}

/* Only on genuinely narrow sets. At 390px, the commonest phone width,
   the labels stay: a bare upload arrow is not obviously "share", and
   that ambiguity costs more than sixty pixels of message preview. */
@media (max-width: 349px) {
  .q-act-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .q-act { padding: 0 8px; }
  .q-act-sep { display: none; }
}

@media (max-width: 360px) {
  :root { --pad: 13px; --gap: 10px; }
  .sponsor-line { font-size: 17px; }
  .floodlight { width: 78px; height: 98px; }
}

/* THE BOARD: dim print below the set (Amendment 4), in the same
   dot-matrix idiom as the ON AIR chip. It steps once a block, so it
   never draws the eye at three in the morning. */
.board {
  margin: 14px auto 0;
  max-width: 340px;
  padding: 12px 14px;
  text-align: left;
  background: #120d09;
  border: 1px solid #3c2f1f;
  border-radius: 10px;
  background-image: radial-gradient(rgba(232,161,60,.05) 1px, transparent 1px);
  background-size: 4px 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  line-height: 1.5;
}

.board-meta {
  font-size: 10px;
  letter-spacing: .28em;
  text-indent: .28em;
  color: var(--cream-dim);
  text-transform: uppercase;
}

.board-score {
  font-size: 21px;
  font-weight: 700;
  color: var(--amber);
  text-shadow: 0 0 10px rgba(232,161,60,.45);
  letter-spacing: .02em;
}

.board-bats {
  font-size: 13px;
  color: var(--cream);
}

.board-lead {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--cream-dim);
  text-transform: uppercase;
}

@media (max-width: 380px) {
  .board-score { font-size: 19px; }
  .board-bats { font-size: 12px; }
}

/* ---- the fault book -------------------------------------------------
   An engineer's plate screwed to the corner of the room, not part of
   the set. It must stay legible and tappable when the set itself has
   gone dark, so it takes none of the set's state classes. */

.fault-btn {
  position: fixed;
  right: calc(12px + env(safe-area-inset-right));
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border: 1px solid #4a3a26;
  border-radius: 999px;
  background: rgba(29,23,18,.92);
  color: var(--cream-dim);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.fault-btn:hover, .fault-btn:focus-visible {
  color: var(--amber);
  border-color: var(--amber-deep);
  outline: none;
}

.fault-btn-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7c2d3c;
  box-shadow: 0 0 6px rgba(124,45,60,.9);
}

.fault-panel {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(9,7,5,.72);
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.fault-sheet {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  border: 1px solid #40332593;
  border-radius: 18px;
  background: linear-gradient(175deg, var(--bakelite-edge), var(--bakelite) 34%);
  box-shadow: 0 18px 44px rgba(0,0,0,.6);
}

.fault-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.fault-title {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--amber);
}

.fault-close {
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 26px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.fault-close:hover, .fault-close:focus-visible { color: var(--amber); outline: none; }

/* The captured moment, shown back before anything is sent. The listener
   has to be able to see that the page got the right second, or they
   will go on writing the time down by hand. */
.fault-moment {
  margin: 0;
  white-space: pre-line;
  padding: 9px 11px;
  border-left: 2px solid var(--amber-deep);
  background: rgba(0,0,0,.22);
  font-size: 13px;
  line-height: 1.45;
  color: var(--cream);
}

.fault-ask { margin: 2px 0 0; font-size: 14px; color: var(--cream-dim); }

.fault-kinds { display: grid; gap: 8px; }

.fault-kind {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 11px 13px;
  min-height: 54px;
  border: 1px solid #4a3a26;
  border-radius: 11px;
  background: rgba(0,0,0,.18);
  color: var(--cream);
  font-family: inherit;
  cursor: pointer;
}

.fault-kind b { font-size: 15px; font-weight: 400; }
.fault-kind span { font-size: 12px; color: var(--cream-dim); }

.fault-kind:hover, .fault-kind:focus-visible { border-color: var(--amber-deep); outline: none; }

.fault-kind[aria-pressed="true"] {
  border-color: var(--amber);
  background: #2a1f10;
  box-shadow: inset 0 0 14px rgba(232,161,60,.12);
}
.fault-kind[aria-pressed="true"] b { color: var(--amber); }

.fault-note {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #4a3a26;
  border-radius: 10px;
  background: rgba(0,0,0,.24);
  color: var(--cream);
  font-family: inherit;
  font-size: 15px;
  resize: vertical;
}
.fault-note:focus-visible { outline: none; border-color: var(--amber-deep); }
.fault-note::placeholder { color: #6f6455; }

.fault-send { min-height: 46px; }

.fault-status { margin: 0; font-size: 13px; color: var(--cream-dim); min-height: 18px; }
.fault-status.error { color: #d08a6a; }

@media (min-width: 560px) {
  .fault-panel { align-items: center; }
  .fault-kinds { grid-template-columns: 1fr 1fr; }
}