/* Ludus of Rome.
   Red wall, limestone slab, bone paper, bronze rule, iron bar, blood warning. */

:root {
  --red:        #6E1E1A;
  --red-deep:   #48130F;
  --red-lit:    #7E2620;
  --iron:       #25231F;
  --iron-lit:   #37342D;
  --iron-edge:  #4A463C;
  --stone:      #C7BCA7;
  --stone-dim:  #B0A48E;
  --stone-deep: #8E836E;
  --bone:       #E9DFC7;
  --bone-dim:   #D8CCB0;
  --bronze:     #A97B3F;
  --bronze-lit: #CE9E5B;
  --blood:      #8C1A12;
  --amber:      #E2A34C;
  --olive:      #6B734C;
  --ink:        #241F19;
  --ink-soft:   #4A4238;

  --forum: "Forum", "Times New Roman", serif;
  --prose: "Spectral", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --rail-h: 46px;
  --nav-w: 188px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--red-deep);
  color: var(--bone);
  font-family: var(--prose);
  font-size: 15.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

/* ------------------------------------------------------------------ wall */

.wall {
  position: fixed;
  inset: 0;
  background-color: var(--red);
  background-image:
    /* plaster mottling */
    radial-gradient(ellipse 60% 45% at 18% 12%, rgba(255, 226, 190, 0.075), transparent 70%),
    radial-gradient(ellipse 50% 40% at 82% 78%, rgba(0, 0, 0, 0.20), transparent 72%),
    radial-gradient(ellipse 40% 30% at 60% 20%, rgba(255, 200, 150, 0.045), transparent 70%),
    radial-gradient(ellipse 70% 50% at 30% 92%, rgba(0, 0, 0, 0.16), transparent 75%),
    /* fine grain */
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
  background-blend-mode: normal, normal, normal, normal, overlay;
  z-index: 0;
}
/* Torchlight drifting across the room. Slow, non-rhythmic, never a pulse. */
.wall::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle 45% at 22% 8%, rgba(226, 163, 76, 0.16), transparent 68%),
              radial-gradient(circle 38% at 78% 88%, rgba(226, 163, 76, 0.09), transparent 70%);
  animation: torch 11s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes torch {
  0%   { opacity: 0.62; transform: translate3d(0, 0, 0) scale(1); }
  34%  { opacity: 0.9;  transform: translate3d(1.5%, -1%, 0) scale(1.04); }
  61%  { opacity: 0.7;  transform: translate3d(-1%, 1%, 0) scale(1.01); }
  100% { opacity: 0.96; transform: translate3d(0.5%, 0.5%, 0) scale(1.05); }
}

/* Arena and combat: the only dark, non-red views. */
.app.dark .wall {
  background-color: #17140F;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 120%, rgba(226, 163, 76, 0.22), transparent 70%),
    radial-gradient(ellipse 45% 35% at 12% 6%, rgba(226, 163, 76, 0.13), transparent 72%),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.2'/%3E%3C/svg%3E");
}
.app.dark .wall::after { opacity: 0.7; }

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

.app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  grid-template-rows: var(--rail-h) 1fr;
  grid-template-columns: var(--nav-w) 1fr;
  grid-template-areas:
    "strip strip"
    "nav   main";
}

/* --------------------------------------------------------- abacus rail */

.strip {
  grid-area: strip;
  display: flex;
  align-items: center;
  gap: 0;
  background: linear-gradient(180deg, #2C2A24, #1D1B17);
  border-bottom: 1px solid var(--bronze);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.55);
  padding: 0 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.strip::-webkit-scrollbar { display: none; }

.strip .brand {
  font-family: var(--forum);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bronze-lit);
  padding-right: 14px;
  white-space: nowrap;
  flex: 0 0 auto;
  text-shadow: 0 1px 0 #000;
}

.stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
  padding: 0 12px;
  border-left: 1px solid #4A463C;
  height: 100%;
  flex: 0 0 auto;
  white-space: nowrap;
}
.stat .k {
  font-family: var(--forum);
  font-size: 10px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #8E8776;
}
.stat .v {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--stone);
}
.stat .v.gold { color: var(--bronze-lit); }
.stat .v.bad  { color: #D9705F; }
.stat .v.good { color: #9BA36E; }
.stat .sub {
  font-family: var(--mono);
  font-size: 10px;
  color: #7C7566;
  font-variant-numeric: tabular-nums;
}
.strip .spacer { flex: 1 1 auto; min-width: 8px; }

/* The sound switch. Iron plate, bronze when it is on, never a bright icon. */
.strip .sound {
  flex: 0 0 auto;
  width: 28px;
  height: 24px;
  margin-left: 6px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #16140F;
  border: 1px solid #4A463C;
  border-radius: 2px;
  cursor: pointer;
}
.strip .sound svg { width: 17px; height: 17px; display: block; }
.strip .sound svg path { fill: none; stroke: #6E6656; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.strip .sound svg path:first-child { fill: #6E6656; stroke: none; }
.strip .sound.on { border-color: var(--bronze); }
.strip .sound.on svg path { stroke: var(--bronze-lit); }
.strip .sound.on svg path:first-child { fill: var(--bronze-lit); }
.strip .sound:hover { border-color: var(--bronze-lit); }

/* The save control. It is a readout and a button in one: the word is what the
   save is doing this second, and pressing it flushes the save now. Iron when
   it is idle, green when it just landed, red when it did not. */
.strip .save {
  flex: 0 0 auto;
  height: 24px;
  margin-left: 6px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #16140F;
  border: 1px solid #4A463C;
  border-radius: 2px;
  color: #8C8272;
  font-family: var(--forum);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
.strip .save .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6E6656;
  flex: 0 0 auto;
}
.strip .save:hover { border-color: var(--bronze-lit); color: #B7AC98; }
.strip .save.ok { border-color: var(--bronze); color: var(--bronze-lit); }
.strip .save.ok .dot { background: var(--bronze-lit); }
.strip .save.bad { border-color: #8C3A2E; color: #D9705F; }
.strip .save.bad .dot { background: #D9705F; }

/* ----------------------------------------------------------------- nav */

.nav {
  grid-area: nav;
  background: linear-gradient(180deg, #2A2822, #1E1C18 60%, #191713);
  border-right: 1px solid #443F35;
  box-shadow: inset -1px 0 0 rgba(169, 123, 63, 0.28), 3px 0 14px rgba(0, 0, 0, 0.4);
  padding: 8px 0;
  overflow-y: auto;
  overflow-x: hidden;
}
.nav::-webkit-scrollbar { width: 6px; }
.nav::-webkit-scrollbar-thumb { background: #3B382F; }

.nav button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-left: 3px solid transparent;
  color: #9A9284;
  font-family: var(--forum);
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  text-align: left;
  transition: color 120ms linear, background 120ms linear;
}
.nav button .num {
  font-family: var(--mono);
  font-size: 10px;
  color: #5E584C;
  min-width: 12px;
  font-variant-numeric: tabular-nums;
}
.nav button:hover { color: var(--bone); background: rgba(255, 255, 255, 0.035); }
.nav button.on {
  color: var(--bone);
  border-left-color: var(--bronze-lit);
  background: linear-gradient(90deg, rgba(169, 123, 63, 0.30), rgba(169, 123, 63, 0.05) 70%, transparent);
  text-shadow: 0 1px 0 #000;
}
.nav button.on .num { color: var(--bronze-lit); }
.nav button .pip {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber);
}
.nav .nav-hint {
  padding: 10px 14px 4px;
  font-family: var(--prose);
  font-size: 11px;
  line-height: 1.4;
  color: #6E6759;
  font-style: italic;
  border-top: 1px solid #332F28;
  margin-top: 8px;
}

/* ---------------------------------------------------------------- main */

.main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 18px 40px;
  scrollbar-width: thin;
}
.main::-webkit-scrollbar { width: 9px; }
.main::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); }
.main::-webkit-scrollbar-thumb { background: #6B211C; border: 1px solid #4A1A16; }

/* A wide monitor should not be a red field with the game in one corner of it.
   The block is centred and given most of the window; what is left over is the
   page's own margin, not a third of the screen going spare. */
/* 1680 rather than 1560: at 1920 the block was sitting at 81% of the window
   with a hand's width of red on either side, and the brief asks for about 85%.
   The cap is still there because an unbroken 2400px line of prose is worse
   than a margin. */
.screen { animation: fade 120ms ease-out; max-width: 1680px; margin: 0 auto; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------------------------- headings */

.screen > h1, .h-wall {
  font-family: var(--forum);
  font-size: 27px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone);
  margin: 2px 0 4px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 0 22px rgba(226, 163, 76, 0.13);
}
.screen > .lede {
  color: #E0CFB4;
  font-size: 15.5px;
  max-width: 74ch;
  margin: 0 0 14px;
  font-style: italic;
  opacity: 0.9;
}
h2.sec {
  font-family: var(--forum);
  font-size: 15px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--bronze-lit);
  margin: 20px 0 9px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(169, 123, 63, 0.45);
  font-weight: 400;
}
h2.sec:first-child { margin-top: 4px; }

/* ---------------------------------------------------------------- slab */

.slab {
  background: var(--stone);
  color: var(--ink);
  border: 1px solid #9C9078;
  border-top: 2px solid var(--bronze);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  padding: 14px 15px;
  position: relative;
}
.slab h3 {
  font-family: var(--forum);
  font-size: 13.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #4A3B22;
  margin: 0 0 10px;
  font-weight: 400;
}
.slab h3 + .sub { margin-top: -7px; }

.grid { display: grid; gap: 12px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.g-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }

/* -------------------------------------------------------------- paper */

.paper {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid #B6A98C;
  border-left: 3px solid var(--bronze);
  box-shadow: 0 5px 16px rgba(0, 0, 0, 0.42);
  padding: 14px 16px;
  position: relative;
}
.paper h3 {
  font-family: var(--forum);
  font-size: 13.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: #4A3B22;
  margin: 0 0 8px;
  font-weight: 400;
}
.paper .prose { font-family: var(--prose); font-size: 14.5px; line-height: 1.62; color: #33291D; }
.paper .prose + .prose { margin-top: 8px; }
.paper .prose em { color: #5A4A32; }

/* The ruled ledger look. */
.ledger-lines {
  background-image: repeating-linear-gradient(180deg, transparent 0 25px, rgba(110, 90, 60, 0.16) 25px 26px);
  background-position: 0 6px;
}

/* ------------------------------------------------------------- numbers */

.mono, .num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.num { font-size: 14px; color: var(--ink); }
.num.big { font-size: 28px; font-weight: 600; letter-spacing: -0.01em; }
.num.huge { font-size: 40px; font-weight: 600; line-height: 1; }
.num.pos { color: #4E5A2E; }
.num.neg { color: var(--blood); }
.num.dim { color: var(--stone-deep); }
.num.warn { color: #8A5A16; }

.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; border-bottom: 1px dotted rgba(80, 65, 45, 0.28); }
.kv:last-child { border-bottom: 0; }
.kv .k { font-family: var(--forum); font-size: 12px; letter-spacing: 0.13em; text-transform: uppercase; color: #6B5B3E; }
.kv .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; }

/* ------------------------------------------------------------- gauges */

.gauge {
  /* Emitted as a span, so it must be told to be a block: an inline box
     ignores height, and the fill inside it grows to the line box instead. */
  display: block;
  position: relative;
  height: 9px;
  background: #2A2722;
  border: 1px solid #4C473C;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6);
}
.gauge > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(180deg, #8A7F68, #5F5849);
  transition: width 400ms cubic-bezier(0.33, 1, 0.68, 1);
}
.gauge.hp > i  { background: linear-gradient(180deg, #A6412F, #7B1F14); }
.gauge.hp.ok > i { background: linear-gradient(180deg, #7E8A55, #57613A); }
.gauge.st > i  { background: linear-gradient(180deg, #C79A4E, #96702F); }
.gauge.mor > i { background: linear-gradient(180deg, #8E9A64, #646E42); }
.gauge.loy > i { background: linear-gradient(180deg, #A98A54, #7A6234); }
.gauge.tr  > i { background: linear-gradient(180deg, #A97B3F, #7A5528); }

.gauge-row { display: grid; grid-template-columns: 34px 1fr 42px; align-items: center; gap: 8px; margin: 5px 0; }
.gauge-row .lab { font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.13em; color: #6B5B3E; text-transform: uppercase; }
.gauge-row .val { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; text-align: right; color: #3B3227; font-weight: 500; }

/* Vertical gauge, for the arena. Iron with a bronze cap. */
.vgauge {
  position: relative;
  width: 22px;
  height: 168px;
  background: #17140F;
  border: 1px solid #4C473C;
  border-top: 2px solid var(--bronze);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.vgauge > i { display: block; width: 100%; height: var(--p, 0%); transition: height 400ms cubic-bezier(0.33, 1, 0.68, 1); }
.vgauge.hp > i { background: linear-gradient(90deg, #6E1A10, #B2432E, #6E1A10); }
.vgauge.st > i { background: linear-gradient(90deg, #7A5520, #C79A4E, #7A5520); }
.vgauge .cap {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--bronze), var(--bronze-lit), var(--bronze));
}
.vgauge-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vgauge-wrap .gl { font-family: var(--forum); font-size: 10.5px; letter-spacing: 0.16em; color: #8B8270; text-transform: uppercase; }
.vgauge-wrap .gv { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--stone); font-weight: 600; }

/* ------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  font-family: var(--forum);
  font-size: 12.5px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  border: 1px solid #4A463C;
  background: linear-gradient(180deg, #33302A, #232019);
  color: var(--stone);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.07) inset, 0 2px 5px rgba(0, 0, 0, 0.4);
  transition: none;
  min-height: 34px;
  user-select: none;
}
.btn:hover:not(:disabled) { background: linear-gradient(180deg, #3E3A32, #2A2620); color: var(--bone); border-color: #5E584A; }
.btn:active:not(:disabled) { background: #1C1A15; }
.btn:disabled { opacity: 0.42; cursor: not-allowed; }

.btn.bronze {
  border-color: #8A6432;
  background: linear-gradient(180deg, #4A3A21, #33281A);
  color: var(--bronze-lit);
  box-shadow: 0 1px 0 rgba(255, 220, 160, 0.12) inset, 0 2px 8px rgba(0, 0, 0, 0.45);
}
.btn.bronze:hover:not(:disabled) { background: linear-gradient(180deg, #5C4828, #3E3020); color: #E4BD7E; border-color: var(--bronze-lit); }
.btn.danger { border-color: #6E241C; color: #D98B7C; }
.btn.danger:hover:not(:disabled) { background: linear-gradient(180deg, #4A1F19, #331512); color: #EDA495; border-color: var(--blood); }
.btn.sm { padding: 6px 11px; font-size: 11.5px; min-height: 30px; }
.btn.block { width: 100%; }
.btn.on { border-color: var(--bronze-lit); color: var(--bone); background: linear-gradient(180deg, #57431F, #3A2D19); }

.btn-row { display: flex; flex-wrap: wrap; gap: 7px; }
.btn-col { display: flex; flex-direction: column; gap: 7px; }

/* --------------------------------------------------------- the big bar */

.daybar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #8A6432;
  border-top: 2px solid var(--bronze-lit);
  background: linear-gradient(180deg, #4A3A21, #2C2318);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 220, 160, 0.1);
  cursor: pointer;
  text-align: left;
  color: var(--bone);
}
.daybar:hover { background: linear-gradient(180deg, #5C4828, #363019); }
.daybar:disabled { opacity: 0.5; cursor: default; }
.daybar .db-label { font-family: var(--forum); font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze-lit); }
.daybar .db-sub { font-family: var(--mono); font-size: 12px; color: #B8A882; font-variant-numeric: tabular-nums; }
.daybar .db-right { margin-left: auto; text-align: right; }
.daybar .db-cost { font-family: var(--mono); font-size: 12px; color: #D0A886; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------- medallion/bust */

.medallion {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #9C9080, #5E564A 62%, #3A342B);
  border: 2px solid var(--bronze);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #2A2620;
  overflow: hidden;
  flex: 0 0 auto;
}
.medallion svg { width: 100%; height: 100%; display: block; }
.medallion img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.55) contrast(1.07) brightness(0.97); }
.medallion.lg { width: 96px; height: 96px; }
.medallion.xl { width: 124px; height: 124px; }
.medallion.dead { filter: grayscale(1) brightness(0.5); border-color: #4A463C; }
.medallion .ring {
  position: absolute; inset: 0; border-radius: 50%;
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* --------------------------------------------------------------- roster */

.roll { display: flex; flex-direction: column; gap: 8px; }

.row-man {
  display: grid;
  /* The first track is the medallion's own width. A 46px track holding a 56px
     disc pushed the disc over the name, and every man on the roll wore his
     portrait across the first letter of his own name. */
  grid-template-columns: 56px minmax(0, 1.35fr) minmax(0, 1.5fr) auto;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  background: var(--stone);
  border: 1px solid #9C9078;
  border-left: 3px solid #8A7F68;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}
.row-man:hover { background: #D2C8B4; border-left-color: var(--bronze); }
.row-man.on { border-left-color: var(--bronze-lit); background: #D8CFBB; }
.row-man.hurt { border-left-color: var(--blood); }
.row-man.gone { opacity: 0.5; }
.row-man .nm { font-family: var(--forum); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: #2E251A; line-height: 1.15; }
.row-man .cl { font-family: var(--prose); font-size: 13.5px; color: #6B5B3E; font-style: italic; }
.row-man .meta { font-family: var(--mono); font-size: 11px; color: #584C39; font-variant-numeric: tabular-nums; }
/* Direct children only. The fatigue gauge carries the class "st" for its fill
   colour, so a descendant selector turned the gauge itself into a two column
   grid and then stretched it across the whole row, 61px tall. */
.row-man > .st { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 12px; }
.row-man > .right { text-align: right; }

/* Little class pictogram, engraved. */
.glyph {
  width: 22px; height: 22px;
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
}
.glyph svg { width: 100%; height: 100%; display: block; fill: none; stroke: #4A3B22; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.glyph.light svg { stroke: var(--bronze); }
.glyph.big { width: 34px; height: 34px; }
.glyph.sm { width: 16px; height: 16px; }

/* Reading the chronicle by kind. A chip is a shelf, not a filter dialogue:
   one tap, and the count is on the chip so an empty one never has to be
   opened to find out. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font: inherit; font-size: 12.5px; letter-spacing: .04em; cursor: pointer;
  padding: 5px 10px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.22); background: rgba(255,255,255,.35);
  color: var(--ink);
}
.chip:hover { border-color: var(--bronze); color: var(--bronze); }
.chip.on { background: var(--bronze); border-color: var(--bronze); color: #F4EEDF; }
.chip.on .dim { color: rgba(244,238,223,.7); }
.chip .dim { font-size: 11px; }

/* His record against each style. A row that has never met the one opposite it
   says so, because "never met" is a fact about him too. */
.vs { margin-top: 8px; }
.vr {
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(0,0,0,.07);
  font-size: 12.5px; color: var(--ink);
}
.vr:last-child { border-bottom: 0; }
.vr .vn { display: flex; align-items: center; gap: 6px; }
.vr .vv { font-variant-numeric: tabular-nums; color: var(--ink); }
.vr.self { color: var(--bronze); }
.vr.self .vv { display: flex; align-items: center; }
.vr.unmet { color: #8A7F68; font-style: italic; }
.vr.unmet .vv { color: #8A7F68; font-style: italic; }

/* ---------------------------------------------------------------- tags */

.tag {
  display: inline-block;
  padding: 2px 8px 3px;
  font-family: var(--forum);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  border: 1px solid #8A6432;
  background: linear-gradient(180deg, rgba(169, 123, 63, 0.24), rgba(169, 123, 63, 0.08));
  color: #5C4423;
  margin: 2px 4px 2px 0;
  cursor: help;
}
.tag.good { border-color: #5E6B38; color: #46521F; background: linear-gradient(180deg, rgba(107, 115, 76, 0.25), rgba(107, 115, 76, 0.08)); }
.tag.bad  { border-color: #8C1A12; color: #7A1A12; background: linear-gradient(180deg, rgba(140, 26, 18, 0.16), rgba(140, 26, 18, 0.05)); }
.tag.mixed { border-color: #7A6A38; color: #6B5313; }
.tag.plain { border-color: #9C9078; color: #584C39; background: rgba(0, 0, 0, 0.04); cursor: default; }

/* Dark-surface tag (on the wall, not on stone). */
.tag.on-wall { color: var(--bronze-lit); border-color: #6E5630; background: rgba(169, 123, 63, 0.14); }

/* --------------------------------------------------------------- table */

table.ledger {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
table.ledger th {
  font-family: var(--forum);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B5B3E;
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid #A99E88;
  font-weight: 400;
}
table.ledger td { padding: 5px 8px; border-bottom: 1px dotted rgba(80, 65, 45, 0.26); color: #33291D; }
table.ledger tr:last-child td { border-bottom: 0; }
table.ledger td.r, table.ledger th.r { text-align: right; }
table.ledger td.pos { color: #4E5A2E; }
table.ledger td.neg { color: var(--blood); }
table.ledger tr.win td { background: rgba(107, 115, 76, 0.13); }
table.ledger tr.loss td { background: rgba(140, 26, 18, 0.09); }
table.ledger tr.dead td { background: rgba(20, 18, 15, 0.14); color: #4A4238; }
/* A row in the record that is a door into the man's own page. The whole row is
   the target, because a career is one thing and a name in a table is a small
   thing to have to hit on a phone. */
.goals .g-note {
  font-family: var(--prose); font-size: 13px; font-style: italic; color: #6B5B3E;
  padding: 2px 0 8px; border-bottom: 1px solid #CBC0A4; margin-bottom: 8px;
}
table.ledger tr.row-link { cursor: pointer; }
table.ledger tr.row-link:hover td { background: rgba(226, 163, 76, 0.22); }
.book-card { cursor: pointer; }
.book-card:hover { background: #D8CFBB; border-color: var(--bronze-lit); border-top-color: var(--bronze-lit); }
.book-card .go {
  display: block; margin-top: 4px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; color: #7A5528;
}

/* Dark-surface table. */
.on-iron { color: var(--stone); }
.on-iron th { color: #8E8776; border-bottom-color: #4A463C; }
.on-iron td { color: var(--stone); border-bottom-color: rgba(255, 255, 255, 0.07); }

/* -------------------------------------------------------------- market */

.counter {
  background: linear-gradient(180deg, #2E2B25, #1F1D18);
  border: 1px solid #443F35;
  border-top: 2px solid var(--bronze);
  padding: 14px;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, 0.5);
}
.dossier {
  background: var(--bone);
  border: 1px solid #B6A98C;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--ink);
}
.dossier .top { display: flex; gap: 10px; align-items: flex-start; }
.dossier .who { min-width: 0; flex: 1; }
.dossier .nm { font-family: var(--forum); font-size: 17px; letter-spacing: 0.07em; text-transform: uppercase; color: #2E251A; line-height: 1.1; }
.dossier .sub { font-family: var(--prose); font-size: 12.5px; color: #6B5B3E; font-style: italic; }
.dossier .body { font-family: var(--prose); font-size: 12.8px; line-height: 1.55; color: #3E3427; }
.dossier .price { font-family: var(--mono); font-size: 19px; font-weight: 600; color: #7A5528; font-variant-numeric: tabular-nums; }
.dossier .foot { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 4px; }

.statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px 12px; }
.statgrid .s { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dotted rgba(80, 65, 45, 0.24); padding: 2px 0; }
.statgrid .s .k { font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.1em; color: #6B5B3E; }
.statgrid .s .v { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; color: #2E251A; }

/* --------------------------------------------------------------- arena */

.placard {
  background: linear-gradient(180deg, #2A2722, #1C1A15);
  border: 1px solid #443F35;
  border-left: 3px solid var(--iron-edge);
  padding: 12px 14px;
  color: var(--stone);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}
.placard:hover { border-left-color: var(--bronze); }
.placard.hot { border-left-color: var(--blood); }
.placard .vs { display: flex; align-items: center; gap: 12px; }
.placard .vs .mid { font-family: var(--forum); font-size: 11px; letter-spacing: 0.2em; color: var(--bronze); }
.placard .nm { font-family: var(--forum); font-size: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bone); }
.placard .sub { font-family: var(--prose); font-size: 12.5px; color: #A99E88; font-style: italic; }
.placard .purse { font-family: var(--mono); font-size: 19px; font-weight: 600; color: var(--bronze-lit); font-variant-numeric: tabular-nums; }

.diff { display: inline-flex; gap: 2px; }
.diff i { width: 7px; height: 7px; background: #4A463C; display: block; transform: rotate(45deg); }
.diff i.on { background: var(--amber); }

/* The sand. */
.arena-floor {
  /* Two men and their gauges do not need a thousand pixels of sand between
     them, so on a wide screen the arena is a bowl, not a plain. */
  max-width: 940px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse 62% 70% at 50% 58%, rgba(226, 163, 76, 0.20), transparent 72%),
    radial-gradient(ellipse 100% 50% at 50% 108%, rgba(0, 0, 0, 0.55), transparent 70%),
    linear-gradient(180deg, #241F17, #14110C);
  border: 1px solid #3E382C;
  border-top: 2px solid var(--bronze);
  box-shadow: inset 0 6px 30px rgba(0, 0, 0, 0.75);
  padding: 18px 14px;
  position: relative;
  overflow: hidden;
}
/* The sand, rendered. The stage is the room the bout happens in and the two
   panels under it are the readout of what is happening in that room, so it
   takes the top of the bowl and the panels keep the bottom of it.

   The heights are set here and the canvas is fitted to whatever it is given,
   which is the whole arrangement: the renderer never assumes a shape, so a
   phone in one hand and a laptop in the other get the same arena framed for
   the window each of them actually has. */
.fx-stage {
  position: relative;
  height: max(150px, 34vh);
  /* Out to the bowl's own edges: the sand is not an inset panel, it is the
     top of the room. */
  margin: -18px -14px 10px;
  overflow: hidden;
  background: #120E09;
  border-bottom: 1px solid #3E382C;
}
/* How much of the screen the room is given. A phone upright can spare the
   least and a wide window the most, and a phone on its side can spare almost
   nothing: on a 390-tall window the sand is a band across the top and the
   panels below it are the bout, which is the same trade the rest of that
   breakpoint already makes. Each height matches the bowl's own padding at the
   same width, so the picture always runs to the edges of the room. */
@media (max-width: 900px) { .fx-stage { height: max(150px, 34vh); margin: -12px -8px 9px; } }
@media (min-width: 901px) { .fx-stage { height: max(220px, 34vh); } }
.fx-canvas { display: block; width: 100%; height: 100%; }
/* A man's name and his health, over his head on the sand. Text, not a picture
   of text: it stays sharp at every size the stage is given, and it is placed
   from the man's position so it can be held inside the frame. The font size and
   the bar height are set from the stage by arena3d.js. */
.fx-plate {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  pointer-events: none;
  display: block;
  max-width: 48%;
  padding: 3px 6px 5px;
  background: rgba(14, 11, 7, 0.74);
  border: 1px solid #6B5B3E;
  font-family: Forum, Georgia, serif;
  font-size: var(--fx-fs, 15px);
  line-height: 1.05;
  white-space: nowrap;
  will-change: transform;
}
.fx-plate.mine { border-color: #B08A4A; }
.fx-plate-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.07em;
  font-weight: 600;
  text-align: center;
  color: #E8DFC9;
}
/* Gold for the school's own man, so "which of these two is mine" is answered
   before anybody reads a word. */
.fx-plate.mine .fx-plate-name { color: #F0C878; }
.fx-plate.dead .fx-plate-name { color: #B4402E; }
.fx-plate-bar {
  display: block;
  margin-top: 3px;
  height: var(--fx-bar, 7px);
  background: #2A2118;
  border: 1px solid rgba(107, 91, 62, 0.85);
}
.fx-plate-bar i { display: block; height: 100%; width: 100%; background: #7C8A46; }
/* The training yard, at the top of the Ludus screen. It is a picture of the
   school a person has, drawn from the roster: which men are on the sand, what
   each of them is training as, and the colour they fight in. Nothing on it is
   a control and nothing on it can be lost. */
.fx-yard {
  position: relative;
  /* Measured against the window rather than fixed, because this is a picture
     and a picture that is a band on one screen and a hero on another is two
     different pictures. It is the opening of the game: the school, at work,
     before a word of the roster. */
  height: max(150px, 34vh);
  margin: 0 0 16px;
  overflow: hidden;
  background: #1B1A22;
  border: 1px solid #3E382C;
}
@media (max-width: 620px) { .fx-yard { margin-bottom: 12px; } }
/* The same yard, framed twice more: a roll call over the roster and one man
   alone on his own page. Both are sized against the window for the same
   reason the band above is. */
.fx-roll,
.fx-portrait {
  position: relative;
  height: max(150px, 34vh);
  margin: 4px 0 16px;
  overflow: hidden;
  background: #1B1A22;
  border: 1px solid #3E382C;
}
.fx-portrait { margin-bottom: 14px; }
/* Where the sand is rendered, there is no second crowd to suggest behind the
   panels: the stands are in the picture. */
.arena-floor.has-stage .crowd { display: none; }

/* The crowd, suggested and never drawn. */
.arena-floor .crowd {
  position: absolute; top: 0; left: 0; right: 0; height: 46px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent);
  pointer-events: none;
}
.fighters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  position: relative;
  z-index: 1;
}
.fighter { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; }
.fighter .fname { font-family: var(--forum); font-size: 16.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bone); }
.fighter .fsub { font-family: var(--prose); font-size: 12px; color: #A99E88; font-style: italic; }
.fighter .gauges { display: flex; gap: 10px; }
.fighter.right { flex-direction: column; }
@media (min-width: 901px) {
  .fighter .medallion.lg { width: 116px; height: 116px; }
}

.flash { position: absolute; inset: 0; background: var(--amber); opacity: 0; pointer-events: none; z-index: 3; }
.flash.go { animation: flash 260ms ease-out; }
@keyframes flash { 0% { opacity: 0.26; } 100% { opacity: 0; } }

/* The fight, laid out. One column by default, which on a phone reads: the sand,
   the play-by-play, then the controls. That order is the source order, so a
   phone gets it for nothing. Where the window is wide there is room beside the
   sand, so the record stands next to it and the controls return underneath. */
.fx-wrap { display: block; }
.fx-right .commentary { margin-top: 0; }

/* ------------------------------------------------------------ the stances

   The one control that changes the fight rather than the view of it, so it
   sits above the playback machinery and reads as a row of calls a lanista is
   making, not as another set of buttons. The hint under it is always there:
   the tradeoff is the choice, and a choice whose cost is hidden is a coin
   toss. */
.stances { margin-bottom: 12px; }
.stances .srow { display: flex; flex-wrap: wrap; gap: 8px; }
.stances .stance {
  font-family: var(--forum);
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #E8DFC9;
  background: #3A2E22;
  border: 1px solid #6B5B3E;
  border-bottom-width: 3px;
  padding: 10px 16px;
  min-height: 40px;
  cursor: pointer;
}
.stances .stance:hover { background: #4A3B2A; }
.stances .stance.on {
  color: #241C12;
  background: var(--amber);
  border-color: #B9863A;
  border-bottom-color: #8A5A16;
  font-weight: 700;
}
.stances .shint {
  font-family: var(--prose);
  font-size: 14px;
  line-height: 1.5;
  color: #E0D6C0;
  background: rgba(0, 0, 0, 0.22);
  border-left: 3px solid var(--amber);
  padding: 8px 12px;
  margin-top: 9px;
}
.stances .shint strong { font-family: var(--forum); letter-spacing: 0.1em; text-transform: uppercase; font-size: 12.5px; }
@media (max-width: 560px) {
  .stances .stance { flex: 1 1 calc(50% - 8px); padding: 11px 8px; font-size: 11.5px; letter-spacing: 0.08em; }
  .stances .shint { font-size: 13.5px; }
}

/* A laptop gets the side-by-side too. In one column the play-by-play starts
   below the fold on a 900-tall window, and the log is the one thing on this
   screen a person has to be reading while it happens. The band above the nav
   breakpoint counts: 901 to 979 is a resized browser window, and in one column
   there the record began 93px past the bottom of an 800-tall window. */
@media (min-width: 901px) {
  .fx-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  /* The record is on the right of the sand and the controls go back under it,
     which is where the source order put them before the phone needed them
     moved. */
  .fx-left { grid-column: 1; grid-row: 1; }
  .fx-right { grid-column: 2; grid-row: 1 / span 2; }
  .fx-controls { grid-column: 1; grid-row: 2; }
  .fx-right > h2.sec { margin-top: 0; }
  /* A fixed height rather than a maximum: the page of the record stands beside
     the sand for the whole bout instead of shrinking to whatever has been
     written on it so far. The figure covers the strip, the title and the
     space the heading above it takes, so the whole of it stays on screen. */
  .fx-right .commentary { height: calc(100vh - 240px); max-height: none; }
}

@media (min-width: 901px) and (max-width: 1200px) {
  /* Two columns at this width leave the sand narrow, and the busts are what
     give way, before the names, the gauges or the exchange counter. */
  .fighter .medallion.lg { width: 88px; height: 88px; }
}

.commentary {
  background: var(--bone);
  border: 1px solid #B6A98C;
  border-top: 2px solid var(--bronze);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  padding: 12px 14px;
  max-height: 320px;
  overflow-y: auto;
  font-family: var(--prose);
  font-size: 15.5px;
  line-height: 1.6;
  color: #33291D;
}
.commentary .line { padding: 3px 0 3px 12px; border-left: 2px solid transparent; animation: fade 200ms ease-out; }
.commentary .line.hit   { border-left-color: #8A7F68; }
.commentary .line.heavy { border-left-color: #7A5528; color: #2A2118; font-weight: 600; }
.commentary .line.crit  { border-left-color: var(--amber); background: rgba(226, 163, 76, 0.13); font-weight: 600; }
.commentary .line.wound { border-left-color: var(--blood); color: #6E1A12; }
.commentary .line.death { border-left-color: var(--blood); color: #5C130D; font-weight: 600; background: rgba(140, 26, 18, 0.10); }
.commentary .line.spared,
.commentary .line.victory { border-left-color: #5E6B38; }
.commentary .line.miss, .commentary .line.dodge { color: #6B5B3E; font-style: italic; }
.commentary .line.crowd, .commentary .line.taunt { color: #7A6A48; font-style: italic; font-size: 14.5px; }
.commentary .line.surrender { border-left-color: #7A6A38; }
.commentary .line.judged { border-left-color: #8A7F68; font-style: italic; }
.commentary .line.open { font-family: var(--forum); letter-spacing: 0.06em; text-transform: uppercase; font-size: 12.5px; color: #6B5B3E; }
.commentary .line.betweenRounds { color: #6B5B3E; font-style: italic; font-size: 14.5px; }

/* The shout, and the scoreboard. A beat is not prose: it is the line the eye
   lands on when the log is moving, so it is set in the display face, spaced
   out, and given a rule across it. The HP callouts sit under the beat in the
   monospaced face so a number can be found without reading a sentence. */
.commentary .line.beat {
  font-family: var(--forum);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12.5px;
  font-weight: 600;
  color: #2A2118;
  background: linear-gradient(90deg, rgba(226, 163, 76, 0.24), rgba(226, 163, 76, 0));
  border-left-color: var(--amber);
  padding: 5px 0 5px 12px;
  margin: 3px 0 1px;
}
/* The three weights of the log. An exchange is compact and can be skimmed;
   the line that matters is set large with a rule across it so the eye stops
   on the way past; the shout is the one thing on this screen set in the
   display face at size. Before this every line was 15.5px and the four things
   worth reading in a fight were the same size as the twenty that were not. */
.commentary .line.big {
  font-size: 16.5px;
  line-height: 1.5;
  padding: 8px 0 8px 14px;
  margin: 5px 0;
  border-left-width: 3px;
  border-top: 1px solid rgba(140, 26, 18, 0.18);
  border-bottom: 1px solid rgba(140, 26, 18, 0.18);
  font-weight: 600;
}
.commentary .line.huge {
  font-family: var(--forum);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: #1F180F;
  padding: 13px 14px;
  margin: 11px 0;
  border-left-width: 4px;
  border-top: 1px solid rgba(140, 26, 18, 0.24);
  border-bottom: 1px solid rgba(140, 26, 18, 0.24);
  background: linear-gradient(90deg, rgba(226, 163, 76, 0.22), rgba(226, 163, 76, 0.04));
}

.commentary .line.hp {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: #6B5B3E;
  padding: 1px 0 1px 12px;
  border-left-color: transparent;
}

/* Slips of paper for a bet. */
.slip {
  background: var(--bone);
  border: 1px solid #B6A98C;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  padding: 12px 14px;
  color: var(--ink);
}
.slip .odds { font-family: var(--mono); font-size: 24px; font-weight: 600; color: #7A5528; font-variant-numeric: tabular-nums; }

input.field, select.field {
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  background: #1C1A15;
  border: 1px solid #4A463C;
  border-top-color: #14120F;
  color: var(--stone);
  padding: 7px 9px;
  width: 100%;
  min-height: 34px;
}
input.field:focus, select.field:focus { outline: 1px solid var(--bronze); border-color: var(--bronze); }
select.field { font-family: var(--forum); font-size: 13px; letter-spacing: 0.06em; }
label.lab {
  display: block;
  font-family: var(--forum);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8E8776;
  margin-bottom: 4px;
}

/* -------------------------------------------------------- cost / risk */

.riskline {
  display: flex;
  /* This line is the one thing on every panel that grows with the data, and a
     fixed row of four of them is wider than a phone. Unwrapped, its min-content
     width pushed the whole dossier past the right edge of the screen. */
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 10px;
  padding-top: 7px;
  border-top: 1px solid rgba(80, 65, 45, 0.35);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #584C39;
  text-align: right;
}
.riskline .r { display: inline-flex; gap: 6px; align-items: baseline; }
.riskline .rk { font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6B5B3E; }
.riskline .rv { font-weight: 600; }
.riskline .rv.danger { color: var(--blood); }
.riskline .rv.warn { color: #8A5A16; }
.riskline .rv.safe { color: #4E5A2E; }
.riskline.on-dark { border-top-color: rgba(255, 255, 255, 0.12); color: #9A9284; }
.riskline.on-dark .rk { color: #8E8776; }
.riskline.on-dark .rv.danger { color: #E0806E; }
.riskline.on-dark .rv.warn { color: var(--amber); }
.riskline.on-dark .rv.safe { color: #A3AC76; }

/* The day's running cost and its stores, directly under the day bar and made
   of the same iron. They used to be set straight onto the red wall, which is
   the one place on the page figures are not supposed to live: at that size and
   colour they faded into the wall. The rule above them belongs to a panel, so
   it is dropped here and the bronze edge does its job instead. */
.daymeta {
  margin-top: 8px;
  padding: 8px 12px 8px 11px;
  background: linear-gradient(180deg, #23211C, #1A1814);
  border-left: 2px solid var(--bronze);
}
.daymeta .riskline { margin-top: 0; padding-top: 0; border-top: 0; }
.daymeta .riskline .rk { color: #9A9284; }
.daymeta .riskline .rv { color: var(--stone); }
.daymeta .riskline .rv.warn { color: var(--bronze-lit); }
.daymeta .riskline .rv.danger { color: #D9705F; }

/* A screen whose every action is refused says why once, at the top. Iron bar,
   bronze rule, bone text: the same language as every other bar in the school,
   with the reason in the blood colour because it is a loss. */
.warnbar {
  margin-top: 12px;
  padding: 9px 12px 9px 11px;
  border-left: 2px solid var(--bronze);
  background: var(--iron);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.45;
}

/* ------------------------------------------------------------ messages */

.toasts {
  position: fixed;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  max-width: min(560px, 92vw);
}
.toast {
  background: linear-gradient(180deg, #33302A, #201E19);
  border: 1px solid var(--bronze);
  border-left: 3px solid var(--bronze-lit);
  color: var(--bone);
  font-family: var(--prose);
  font-size: 13.5px;
  padding: 9px 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
  animation: fade 140ms ease-out;
}
.toast.bad { border-left-color: var(--blood); }
.toast.good { border-left-color: #7E8A55; }

/* --------------------------------------------------------------- modal */

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(12, 8, 6, 0.7);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fade 140ms ease-out;
}
.modal {
  background: var(--stone);
  border: 1px solid #9C9078;
  border-top: 3px solid var(--bronze);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.7);
  color: var(--ink);
  max-width: 560px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 18px 20px;
}
.modal.wide { max-width: 760px; }
.modal h2 {
  font-family: var(--forum);
  font-size: 18px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #2E251A;
  margin: 0 0 10px;
  font-weight: 400;
}
.modal .prose { font-family: var(--prose); font-size: 14.5px; line-height: 1.6; color: #33291D; }
.modal .choices { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.modal .choice {
  text-align: left;
  padding: 10px 13px;
  border: 1px solid #9C9078;
  border-left: 3px solid var(--bronze);
  background: var(--bone);
  cursor: pointer;
  font-family: var(--prose);
  font-size: 14px;
  color: #2E251A;
}
.modal .choice:hover { background: #F2EADA; border-left-color: var(--bronze-lit); }
.modal .choice:disabled { opacity: 0.5; cursor: not-allowed; }
.modal .choice .hint { display: block; font-family: var(--mono); font-size: 11px; color: #6B5B3E; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- notice */

.notices { display: flex; flex-direction: column; gap: 10px; }
.notice {
  background: var(--bone);
  border: 1px solid #B6A98C;
  border-left: 3px solid var(--bronze);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  padding: 12px 15px;
  color: var(--ink);
}
.notice .nh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.notice .kind {
  font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone); background: #6B5B3E; padding: 2px 7px;
}
.notice .t { font-family: var(--forum); font-size: 15px; letter-spacing: 0.09em; text-transform: uppercase; color: #2E251A; }
.notice .d { font-family: var(--prose); font-size: 14.5px; line-height: 1.5; color: #4A3B22; margin-top: 5px; }
.notice .day { font-family: var(--mono); font-size: 11px; color: #6B5B3E; }

/* A quiet day, said properly. The blank page was the emptiest thing in the
   game: it told a person nothing had happened and then gave them nowhere to
   look. What follows it on the screen is what they came for. */
.quietday { border-left: 3px solid #6B5B3E; }
.quietday .qt { font-family: var(--forum); font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase; color: #2E251A; margin-bottom: 6px; }
.quietday .prose { font-family: var(--prose); font-size: 14.5px; line-height: 1.55; color: #4A3B22; }

/* Decisions with dates on them, read out of the same queue the day advance
   walks. A promise three weeks old is worth seeing before it comes due. */
.duelist { display: flex; flex-direction: column; margin-top: 9px; }
.duelist .due {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: baseline;
  padding: 7px 0; border-top: 1px dotted rgba(80, 65, 45, 0.26);
  font-family: var(--prose); font-size: 13.5px; color: #4A3B22;
}
.duelist .due .when { font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6B5B3E; }
.duelist .due.bad .when { color: var(--blood); }
.duelist .due.good .when { color: #4E5A2E; }

.watch { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.watch .w {
  background: var(--bone); border: 1px solid #B6A98C; border-left: 3px solid #6B5B3E;
  padding: 10px 12px; color: var(--ink);
}
.watch .w.bad { border-left-color: var(--blood); }
.watch .w.warn { border-left-color: #8A5A16; }
.watch .w.good { border-left-color: #4E5A2E; }
.watch .wt { font-family: var(--forum); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #2E251A; }
.watch .wd { font-family: var(--prose); font-size: 13.5px; line-height: 1.5; color: #4A3B22; margin-top: 4px; }

/* The short list of men a lanista would actually be thinking about. */
.attn { display: flex; flex-direction: column; }
.attn .a {
  display: grid; grid-template-columns: minmax(90px, 1fr) auto auto; gap: 6px 14px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px dotted rgba(80, 65, 45, 0.26);
}
.attn .a:last-child { border-bottom: 0; }
.attn .an { font-family: var(--forum); font-size: 15px; letter-spacing: 0.06em; text-transform: uppercase; color: #2E251A; }
.attn .ao { font-family: var(--mono); font-size: 12px; color: #6B5B3E; }
.attn .at { display: flex; flex-wrap: wrap; gap: 5px; justify-content: flex-end; }
.attn .tag {
  font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; border: 1px solid #B6A98C; color: #6B5B3E;
}
.attn .tag.bad { border-color: #B07A72; color: var(--blood); }
.attn .tag.warn { border-color: #C0A268; color: #8A5A16; }
.attn .tag.good { border-color: #9AA47E; color: #4E5A2E; }
.attn .none, .attn .more { font-family: var(--prose); font-size: 14px; color: #4A3B22; }
.attn .more { margin-top: 8px; font-style: italic; }
@media (max-width: 640px) {
  .attn .a { grid-template-columns: 1fr; gap: 4px; }
  .attn .at { justify-content: flex-start; }
}

/* ---------------------------------------------------------- the book

   Debt is the one part of the game that can go wrong while a person is not
   looking at it, so it is the one part that is allowed to shout. The panel
   keeps the paper the rest of the game uses and changes only its edge and its
   head: a school in trouble should recognise its own page, not a warning
   dialog on top of it. */

.debt-panel { border-left: 3px solid var(--bronze); }
.debt-panel.due { border-left-color: #C08A2A; }
.debt-panel.late { border-left-color: var(--blood); background: linear-gradient(180deg, rgba(140, 26, 18, 0.13), transparent 60%); }
.debt-panel.bankrupt { border-left-color: #4A3B22; }
.debt-panel .dp-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.debt-panel .dp-k {
  font-family: var(--forum); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: #4A3B22;
}
.debt-panel.late .dp-k { color: var(--blood); }
.debt-panel .dp-day { font-family: var(--mono); font-size: 11px; color: #6B5B3E; }
.debt-panel .dp-rows { display: flex; flex-direction: column; }
.debt-panel .dp-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 0; border-bottom: 1px dotted rgba(80, 65, 45, 0.26);
  font-family: var(--prose); font-size: 14px; color: #33291D;
}
.debt-panel .dp-row .k { font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #6B5B3E; }
.debt-panel .dp-row .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.debt-panel .dp-row .v.big { font-size: 17px; }
.debt-panel .dp-row .v.warn { color: #8A5A16; }
.debt-panel .dp-row .v.bad { color: var(--blood); }
.debt-panel .dp-foot {
  font-family: var(--prose); font-size: 13.5px; line-height: 1.5; color: #4A3B22; margin-top: 9px;
}
.debt-panel.late .dp-foot { color: #6E1A12; }

/* One open note. It is a notice in shape because it is a thing that wants
   answering, and a term card in substance because every figure on it is one a
   person has to agree to before the button does anything. */
.note { border-left: 3px solid var(--bronze); margin-bottom: 12px; }
.note.due { border-left-color: #C08A2A; }
.note.late { border-left-color: var(--blood); }
.note .nh { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.note .nh .kind {
  font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone); background: #6B5B3E; padding: 2px 7px;
}
.note.late .nh .kind { background: var(--blood); }
.note .nh .day { font-family: var(--mono); font-size: 11px; color: #6B5B3E; }
.note .dt { font-family: var(--prose); font-size: 14px; line-height: 1.55; color: #4A3B22; margin: 8px 0 0; }

.termcard { margin-bottom: 12px; }
.termcard .num { font-size: 21px; }
.termcard.blocked { opacity: 0.72; border-left: 3px solid #8A7F69; }

/* The pip on the rail, red when the men have started calling. Same pip, one
   more reason to look at it. */
.nav button .pip.hot { color: #E0806E; }

/* --------------------------------------------------------- chronicle */

.chronicle { display: flex; flex-direction: column; }
.chronicle .c {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dotted rgba(80, 65, 45, 0.26);
  font-family: var(--prose);
  font-size: 13.5px;
  color: #33291D;
}
.chronicle .c .d { font-family: var(--mono); font-size: 11px; color: #6B5B3E; font-variant-numeric: tabular-nums; padding-top: 2px; }
.chronicle .c.bad { color: #6E1A12; }
.chronicle .c.good { color: #46521F; }

/* ------------------------------------------- one man's book and history */

/* The name he was sold under, and the day he left, on the wall beside his
   own name. It is not the lede: it survives the widths where the lede is
   dropped, because it is the only place the original name is written. */
.idline {
  font-family: var(--forum);
  font-size: 12px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--bronze-lit);
  opacity: 0.86;
  margin: 0 0 14px;
}

.book { margin-top: 7px; }
.book .bk {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px dotted rgba(80, 65, 45, 0.28);
}
.book .bk:last-child { border-bottom: 0; }
.book .bk-k {
  font-family: var(--forum);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #6B5B3E;
}
.book .bk-v {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
.book .bk-v.pos { color: #4E5A2E; }
.book .bk-v.neg { color: var(--blood); }
.book .bk-v .dim { color: #8A7F68; font-size: 11px; }

/* What he is to the other men. The kind of tie is the heading and the man is
   the name under it, because "Rival" is what the lanista needs to see first. */
/* What a man is carrying, in one line, above the rack of things he could be. */
.kitline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 11px;
  padding-top: 11px;
  border-top: 1px solid rgba(80, 65, 45, 0.28);
}
.kitline .ks { display: flex; flex-direction: column; gap: 2px; }
.kitline .kk {
  font-family: var(--forum);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6B5B3E;
}
.kitline .kv { font-family: var(--mono); font-size: 12px; color: var(--ink); }
.kitline .ks.bare .kv { color: #8A7F68; font-family: var(--prose); font-style: italic; }
.kitline .kv .dim { color: #8A7F68; }

.tielist { display: flex; flex-direction: column; gap: 9px; }
.tie { border-left: 3px solid #8A7F68; padding-left: 10px; }
.tie.friend, .tie.partner, .tie.mentor, .tie.student { border-left-color: #4E5A2E; }
.tie.rival, .tie.enemy { border-left-color: var(--blood); }
.tie.respect, .tie.fears { border-left-color: var(--bronze); }
.tie .tl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tie .tk {
  font-family: var(--forum);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #4A3B22;
}
.tie .tw { font-family: var(--mono); font-size: 12.5px; color: #33291D; text-align: right; }
.tie .tt { font-family: var(--prose); font-size: 12.5px; line-height: 1.45; color: #4A3B22; margin-top: 2px; }

/* His own history, newest first: the day in the margin, the entry against it. */
.history { display: flex; flex-direction: column; }
.history .he {
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dotted rgba(80, 65, 45, 0.26);
  font-family: var(--prose);
  font-size: 13.5px;
  line-height: 1.5;
  color: #33291D;
}
.history .he:last-child { border-bottom: 0; }
.history .he .hd {
  font-family: var(--mono);
  font-size: 11px;
  color: #6B5B3E;
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
  white-space: nowrap;
}
.history .he.bad .ht { color: #6E1A12; }
.history .he.good .ht { color: #46521F; }

/* ---------------------------------------------------------- plinths */

.plinth {
  background: linear-gradient(180deg, #CFC5B1, #B5AA94);
  border: 1px solid #9C9078;
  border-top: 2px solid var(--bronze);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  padding: 13px 14px;
  color: var(--ink);
  position: relative;
}
.plinth .carve {
  font-family: var(--mono);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: #4A3B22;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45), 0 -1px 0 rgba(0, 0, 0, 0.28);
}
.plinth .dn { font-family: var(--forum); font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; color: #2E251A; margin-bottom: 3px; font-weight: 400; }
/* The name of the thing that is standing there, which is what the level
   actually bought: a shed that became stone cells. */
.plinth .lvname { font-family: var(--prose); font-size: 15px; font-style: italic; color: #5A4A2C; margin-bottom: 5px; }
.plinth .lvname .dim { font-style: normal; font-family: var(--mono); color: #7A6E58; }
.plinth .dt { font-family: var(--prose); font-size: 13.5px; color: #4A3B22; line-height: 1.5; margin: 7px 0; }
/* What the next purchase would put here, on its own sheet of paper. */
.plinth .nx { background: rgba(255, 255, 255, 0.34); border-left: 3px solid var(--bronze); padding: 8px 10px; margin: 9px 0; }
.plinth .nx .small { font-size: 13px; line-height: 1.5; }
.plinth.maxed { border-top-color: var(--olive); }
.plinth .lvl { display: flex; gap: 3px; margin: 7px 0; }
.plinth .lvl i { flex: 1; height: 6px; background: #A0957F; border: 1px solid #8A7F68; }
.plinth .lvl i.on { background: linear-gradient(180deg, var(--bronze-lit), var(--bronze)); border-color: #7A5528; }

/* ------------------------------------------------------------ helpers */

.muted { color: #8E8776; }
.prose { font-family: var(--prose); }
.small { font-size: 12px; }
.tiny { font-size: 12.5px; }
.center { text-align: center; }
.right { text-align: right; }
.mt { margin-top: 12px; }
.mt-s { margin-top: 7px; }
.mb { margin-bottom: 12px; }
.nowrap { white-space: nowrap; }
.flex { display: flex; }
.between { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.wrap { flex-wrap: wrap; }
.gap { gap: 9px; }
.sep { height: 1px; background: rgba(169, 123, 63, 0.3); margin: 13px 0; }
.on-stone { color: var(--ink); }
.empty { font-family: var(--prose); font-style: italic; color: #6B5B3E; padding: 10px 0; }
.scroll-x { overflow-x: auto; }
/* A table kept as a table scrolls sideways rather than squeezing its columns
   into unreadable slivers: width:100% would compress instead of overflow. */
.scroll-x > table.ledger { width: auto; min-width: 100%; }
.scroll-x > table.ledger th, .scroll-x > table.ledger td { white-space: nowrap; }

/* --------------------------------------------------------------- boot */

.boot {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  z-index: 200;
  background: var(--red-deep);
  text-align: center;
  padding: 24px;
}
.boot h1 {
  font-family: var(--forum);
  font-size: 32px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--bronze-lit);
  margin: 0;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
.boot .sub { font-family: var(--prose); font-style: italic; color: #D8C6A8; max-width: 46ch; }
.boot .err { color: #D98B7C; font-family: var(--mono); font-size: 12px; max-width: 60ch; }

/* ============================================== first week / rudis / wall */

/* The first-week list. It sits above the school's own numbers on the Ludus
   screen while the school is young, and it is deliberately quiet: a bone
   panel with a bronze rule, the same paper the record is kept on, because it
   is a note the school left itself rather than an instruction from outside. */
.guide {
  background: var(--bone);
  color: var(--ink);
  border: 1px solid #B6A98C;
  border-left: 3px solid var(--bronze);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.36);
  padding: 12px 14px;
  margin: 0 0 12px;
}
.guide .g-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-bottom: 1px solid rgba(169, 123, 63, 0.4);
  padding-bottom: 7px; margin-bottom: 8px;
}
.guide .g-title {
  font-family: var(--forum); font-size: 13px; letter-spacing: 0.17em;
  text-transform: uppercase; color: #4A3B22;
}
.guide .g-count { font-family: var(--mono); font-size: 11px; color: #6B5B3E; }
.guide .g-list { list-style: none; margin: 0; padding: 0; }
.guide .g-list li {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 4px 0; font-size: 13.5px; color: #4A4238;
}
.guide .g-list li .tick {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px;
  border: 1px solid #A2937A; background: #F2EADA;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--olive); line-height: 1;
}
.guide .g-list li.done { color: #8A8069; }
.guide .g-list li.done .g-lab { text-decoration: line-through; text-decoration-color: #B3A98F; }
.guide .g-list li.done .tick { border-color: var(--olive); background: #E4E4CE; }
.guide .g-list li.now .tick { border-color: var(--bronze); box-shadow: 0 0 0 2px rgba(169, 123, 63, 0.22); }
.guide .g-list li.now .g-lab { color: var(--ink); font-weight: 600; }
.guide .g-lab { display: block; }
.guide .g-line {
  display: block; font-family: var(--prose); font-size: 12.5px; line-height: 1.5;
  color: #6B5B3E; margin-top: 2px;
}
.guide .g-foot {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(169, 123, 63, 0.3);
}

/* The end of his service. Two arms side by side on a wide screen and stacked
   on a narrow one, each with what it pays and what it costs. */
.ret-card { border-left-color: var(--blood); }
.ret-card > .prose { font-family: var(--prose); font-size: 14.5px; line-height: 1.62; color: #33291D; }
.ret-arm { border: 1px solid #C0B396; background: #F3EBD9; padding: 12px 13px; }
.ret-arm h3 {
  font-family: var(--forum); font-size: 12.5px; letter-spacing: 0.16em;
  text-transform: uppercase; margin: 0 0 8px; font-weight: 400;
}
.ret-arm.go { border-top: 2px solid var(--bronze); }
.ret-arm.go h3 { color: #4A3B22; }
.ret-arm.keep { border-top: 2px solid var(--stone-deep); }
.ret-arm.keep h3 { color: #5A5346; }
.ret-arm ul { margin: 0; padding-left: 17px; font-size: 13px; line-height: 1.58; color: #3C362C; }
.ret-arm li + li { margin-top: 4px; }
.ret-arm .ret-cost {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid #CBC0A4;
  font-family: var(--mono); font-size: 11px; color: #7A5528;
}

/* The wall. A permanent slab, one per man, marked by which door he left by. */
.hall-grid { align-items: stretch; }
.slab.hall-card { border-top: 2px solid var(--bronze); }
.slab.hall-card.fallen { border-top-color: var(--blood); }
.hall-card .h-kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #7A5528;
}
.slab.hall-card.fallen .h-kind { color: var(--blood); }
.hall-card .h-name {
  font-family: var(--forum); font-size: 16px; letter-spacing: 0.06em;
  color: var(--ink); margin-top: 5px;
}
.hall-card .h-came { font-family: var(--prose); font-size: 11.5px; color: #7A6E58; letter-spacing: 0; }
.hall-card .h-cls {
  font-family: var(--prose); font-size: 12px; color: #6B5B3E; margin-top: 1px;
}
.hall-card .h-epi {
  font-family: var(--prose); font-style: italic; font-size: 13px;
  line-height: 1.55; color: #4A3B22; margin-top: 8px;
  padding-left: 9px; border-left: 2px solid rgba(169, 123, 63, 0.45);
}
.hall-card .h-book, .hall-card .h-served {
  font-family: var(--mono); font-size: 11px; color: #6B5B3E; margin-top: 8px;
}
.hall-card .h-served { margin-top: 3px; color: #8A8069; }
.paper.hall-card .h-name { font-size: 18px; }
.paper.hall-card.fallen { border-left-color: var(--blood); }
.paper.hall-card .h-book { margin-top: 11px; }
/* The wall before there is anything on it. It says what the wall is for, so a
   lanista who has never lost a man or freed one knows the room exists. */
.slab.hall-card.empty-card { border-top-style: dashed; opacity: 0.85; }
.hall-card.empty-card .h-kind { color: #8A8069; }

/* What the school and the man on the card already are to each other. */
.placard .h-line {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em;
  color: #C9A276; margin-top: 4px; line-height: 1.45;
}
.placard .h-line.rival { color: #E0806E; }

/* ================================================ the living world */

/* The shape of a day. Five steps, none of them a button: it exists to say what
   the day is made of and what is actually waiting in it, so a lanista never
   has to wonder where they are in it. Whatever is waiting is lit. */
.day-strip {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: 16px; border: 2px solid var(--iron);
  background: linear-gradient(180deg, #2E2B25, #23211C);
}
.day-strip .ds-step {
  flex: 1 1 120px; min-width: 104px; padding: 9px 12px;
  border-right: 1px solid var(--iron-edge);
  border-left: 3px solid transparent;
}
.day-strip .ds-step:last-child { border-right: 0; }
.day-strip .ds-step.on {
  border-left-color: var(--bronze-lit);
  background: linear-gradient(180deg, #3A3226, #2A241B);
}
.day-strip .ds-k {
  font-family: var(--forum); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8C8474;
}
.day-strip .ds-step.on .ds-k { color: var(--bronze-lit); }
.day-strip .ds-v {
  font-family: var(--mono); font-size: 11px; line-height: 1.35;
  color: #B3AA95; margin-top: 4px;
}
.day-strip .ds-step.on .ds-v { color: var(--bone); }

/* A day that is not like the others. It is announced from the moment it is
   set, because a day nobody could see coming is only a surprise, and a day on
   the wall for a week is something to plan around. */
.special-day {
  margin-top: 16px; padding: 12px 15px 13px;
  border: 2px solid var(--bronze); border-left-width: 5px;
  background: linear-gradient(180deg, rgba(169, 123, 63, 0.16), rgba(169, 123, 63, 0.05));
}
.special-day .sd-k {
  font-family: var(--forum); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--bronze-lit);
}
.special-day .sd-n {
  font-family: var(--forum); font-size: 19px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--bone); margin-top: 3px;
}
.special-day .sd-t {
  font-family: var(--prose); font-size: 13.5px; line-height: 1.6;
  color: #D6CBB2; margin-top: 6px;
}
.special-day.today {
  border-color: var(--amber); border-left-color: var(--amber);
  background: linear-gradient(180deg, rgba(226, 163, 76, 0.2), rgba(226, 163, 76, 0.06));
}
.special-day.today .sd-k { color: var(--amber); }

/* The one place on a big day's card where the day itself is staked. It has to
   read as different from the Proving Ground tag beside it, which is the other
   kind of bout the board marks. */
.tag.on-wall.province {
  color: var(--amber); border-color: var(--amber);
  background: rgba(226, 163, 76, 0.18); letter-spacing: 0.1em;
}
/* And the same words at the top of the fight, above the two men, where the
   man walking out would see them. */
.screen > .lede.champ-lede {
  color: var(--amber);
  border-left: 3px solid var(--amber); padding-left: 10px;
}

/* Word from outside the wall. It is not a task and it is not a reward; it is
   the province carrying on, which is the whole point of hearing it. */
.dispatches { padding: 12px 14px; }
/* The row is the same row wherever a dispatch is read: in the panel on the
   school's screen and in the report of the day that has just closed. It used
   to be styled only inside the panel, so in the report the desk label ran
   straight into the sentence with no gap at all. */
.dsp { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid rgba(60, 50, 34, 0.14); }
.dsp:first-child { border-top: 0; }
.dsp .k {
  flex: 0 0 96px; font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8A8069; padding-top: 2px;
}
.dsp .t { flex: 1 1 auto; font-family: var(--prose); font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.dsp.arena .k { color: var(--bronze); }
.dsp.market .k { color: var(--olive); }
.dsp.rival .k { color: #7A3B33; }
.dsp.rome .k { color: #5B5646; }
/* A rumour is a thing somebody said, and it is set as one: the same shape as
   the desks it arrives beside, in the colour of a man talking rather than of a
   desk reporting. */
.dsp.rumour .k { color: #6B5B3E; }

/* What the school is reaching for. Read off the school, never ticked by hand,
   so it cannot drift out of step with what actually happened. */
.goals { padding: 12px 14px; margin-top: 14px; }
.goals .g-head {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  color: #6B5B3E; margin-bottom: 7px;
}
.goals .g-item { padding: 6px 0; border-top: 1px solid rgba(60, 50, 34, 0.14); }
.goals .g-item:first-of-type { border-top: 0; }
.goals .g-l { font-family: var(--forum); font-size: 13px; letter-spacing: 0.05em; color: var(--ink); }
.goals .g-t { font-family: var(--prose); font-size: 12.5px; line-height: 1.5; color: #6B6350; margin-top: 2px; }
.goals .g-item.all .g-l { color: #5C6B3E; }

/* What a man is like, as opposed to what he is good at. */
.persona {
  margin-top: 9px; padding: 7px 10px; border-left: 3px solid var(--bronze);
  background: rgba(169, 123, 63, 0.08);
}
.persona .p-n {
  font-family: var(--forum); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6E5630;
}
.persona .p-l {
  display: block; font-family: var(--prose); font-style: italic;
  font-size: 12.5px; line-height: 1.5; color: #544A36; margin-top: 2px;
}
.pchip {
  display: inline-block; margin-left: 7px; padding: 0 5px;
  font-family: var(--forum); font-size: 9.5px; letter-spacing: 0.13em;
  text-transform: uppercase; color: #6E5630;
  border: 1px solid rgba(169, 123, 63, 0.5); border-radius: 2px;
  vertical-align: 1px;
}

/* What the day that has just closed brought. It is put on the school's own
   wall rather than thrown at the corner of the screen, and it can be taken
   down for nothing. */
.day-report { padding: 13px 15px; margin-top: 16px; border-left: 4px solid var(--amber); }
.day-report .dr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.day-report .dr-day {
  font-family: var(--forum); font-size: 14px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #6E5630;
}
.day-report .dr-special {
  font-family: var(--prose); font-size: 13.5px; line-height: 1.6;
  color: #4A3B22; margin-top: 8px;
  padding-left: 9px; border-left: 2px solid rgba(226, 163, 76, 0.6);
}
.day-report .dr-list { margin: 9px 0 0; padding-left: 17px; }
.day-report .dr-list li {
  font-family: var(--prose); font-size: 13px; line-height: 1.62; color: var(--ink-soft);
  margin-bottom: 3px;
}
.day-report .dr-goal {
  margin-top: 9px; padding: 6px 9px; font-family: var(--prose); font-size: 13px;
  color: #4E5B33; background: rgba(107, 115, 76, 0.13);
  border-left: 3px solid var(--olive);
}
.day-report .dr-news { margin-top: 11px; }
.day-report .dr-news .dsp { margin-top: 4px; }
.day-report .dr-foot {
  margin-top: 9px; font-family: var(--mono); font-size: 11px; color: #6B5B3E;
}

/* The other houses. A school's own record says what it did; this says what it
   did it against, and it is the only part of the ledger that moves while the
   lanista is asleep. */
.prov-list { margin-top: 8px; }
.prov-row {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 0;
  border-top: 1px solid rgba(60, 50, 34, 0.14);
}
.prov-row:first-child { border-top: 0; }
.prov-row .pr {
  flex: 0 0 18px; font-family: var(--mono); font-size: 11px; color: #8A8069;
}
.prov-row .pn {
  flex: 1 1 auto; font-family: var(--forum); font-size: 13px;
  letter-spacing: 0.03em; color: var(--ink);
}
.prov-row .pn .po {
  display: block; font-family: var(--prose); font-size: 11.5px; color: #8A8069;
  letter-spacing: 0; margin-top: 1px;
}
.prov-row .ps {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: #6B5B3E;
}
.prov-row .pv {
  flex: 0 0 auto; font-family: var(--mono); font-size: 11px; color: #8A8069;
  min-width: 84px; text-align: right;
}
.prov-row.rival { border-left: 3px solid var(--blood); padding-left: 8px; }
.prov-row.rival .pv { color: var(--blood); }

/* ================================================================ wide */

/* What a monitor has that a phone does not is room, and the pages that lean
   hardest on long lists should use it. Four cards across a building row, two
   lists of records side by side, a market that lays its wares out rather than
   stacking them. Everything below this line is the same page, given more. */
@media (min-width: 1300px) {
  .main { padding: 18px 26px 44px; }
  .grid.wide-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid.wide-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The shop's rack, in two columns rather than one eight-column table
     stretched the width of the room. Above this width a cell is allowed to
     wrap: "Murmillo, Secutor" on two lines is shorter than the gap it was
     sitting in, and the price comes back within reading distance of the item
     it belongs to. */
  .rack-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .rack-cols > .slab { margin-top: 0; }
  .rack-cols .scroll-x > table.ledger th, .rack-cols .scroll-x > table.ledger td { white-space: normal; }
  /* The two ledger columns have room to sit as a column pair rather than a
     stack, and the chronicle reads better beside what it is recording. */
  .grid.wide-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: start; }
}

/* ============================================================== narrow */

/* The rail, wherever it cannot hold its content on one line.
   It carries a brand, seven readouts and the sound switch, and that is about
   930px of it. Below 940 it used to be a single nowrap line with the scrollbar
   hidden, so the Ludus tier was cut mid-word and the sound switch sat off the
   right edge with nothing on screen to say either was there. It wraps into two
   rows instead, and the rail is made tall enough to hold them. */
@media (max-width: 940px) {
  :root { --rail-h: 56px; }
  .strip {
    flex-wrap: wrap;
    overflow-x: hidden;
    row-gap: 1px;
  }
  /* height:100% is what makes one line exactly the height of the rail. On a
     rail that wraps, it makes each line the height of the rail twice over. */
  .stat { height: auto; }
  /* A spacer that grows inside a wrapping flex container takes a line of its
     own, which would push the sound switch onto a third one. The switch holds
     the right end of its line itself instead. */
  .strip .spacer { display: none; }
  .strip .sound { margin-left: auto; }
}

/* Phone portrait and short landscape: the iron plate goes under the thumb. */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-rows: var(--rail-h) 1fr auto;
    grid-template-areas:
      "strip"
      "main"
      "nav";
  }
  .nav {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    border-right: 0;
    border-top: 1px solid var(--bronze);
    box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.5);
    padding: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav button {
    /* width:auto matters: flex-basis:auto reads the base rule's width:100%,
       which would make every button the width of the screen and hide the
       other eight sections behind a scroll nobody knows is there. */
    flex: 0 0 auto;
    width: auto;
    flex-direction: column;
    gap: 2px;
    padding: 7px 11px 8px;
    border-left: 0;
    border-top: 3px solid transparent;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    min-width: 58px;
    justify-content: center;
    min-height: 50px;
  }
  .nav button.on {
    border-left-color: transparent;
    border-top-color: var(--bronze-lit);
    background: linear-gradient(180deg, rgba(169, 123, 63, 0.28), transparent);
  }
  .nav button .num { display: none; }
  .nav button .pip { margin-left: 0; }
  .nav .nav-hint { display: none; }

  /* A thumb, not a mouse. The shop carries thirty of these and the market's
     buy and haggle sit one on top of the other: at 28px they are a miss
     waiting to happen on the screen this page is most often opened on. */
  .btn { min-height: 42px; }
  .btn.sm { min-height: 40px; padding: 7px 12px; }
  /* The sound switch is the smallest control on the page and it lives in the
     rail, on every screen. */
  .strip .sound { width: 40px; height: 30px; }
  /* The save control sits beside it and takes a word, not an icon, so it is
     given a thumb's height and its own line of breathing room. */
  .strip .save { height: 30px; padding: 0 10px; font-size: 10px; }

  .main { padding: 12px 12px 26px; }
  /* A grid or flex item is given an automatic min-content floor, so one run of
     text that cannot wrap is enough to push a whole screen wider than the
     phone it is on and give the page a sideways scroll nobody asked for. The
     market's dossier heading did exactly that at 390px. Everything inside a
     grid is allowed to shrink here, and the things that must not shrink (a
     table, a gauge) are wrapped in a scroller of their own. */
  .grid > *, .between > * { min-width: 0; }
  .between { flex-wrap: wrap; }
  .screen > h1, .h-wall { font-size: 21px; letter-spacing: 0.12em; }
  h2.sec { font-size: 13px; }
  .g2, .g3, .g-2-1, .g-1-2, .g-3-2 { grid-template-columns: 1fr; }
  /* Four small readouts: two rows of two on a phone, one row of four as soon
     as the window can hold them. */
  .g4 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .statgrid { grid-template-columns: repeat(2, 1fr); }
  .row-man { grid-template-columns: 52px minmax(0, 1fr) 60px; gap: 9px; }
  .row-man .medallion { width: 48px; height: 48px; }
  /* The gauges take the whole second row. An auto-placed item after a
     full-width one is pushed past it onto a third row, so the class mark
     and the man's standing were landing under the bars on the left. Placed
     back where they belong, opposite the name. */
  .row-man > .right { grid-row: 1; grid-column: 3; }
  .row-man > .st { grid-column: 1 / -1; grid-row: 2; margin-top: 4px; }
  /* The sand is the centrepiece and it has to fit the window it is handed. Two
     men stay either side of the gauge column and never stack into one column
     taller than the phone: narrower, shorter, the bars running across. */
  .arena-floor { padding: 12px 8px; }
  .arena-floor .crowd { height: 30px; }
  .fighters { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
  .fighter { gap: 5px; }
  .fighter .medallion.lg { width: 66px; height: 66px; }
  .fighter .fname { font-size: 11.5px; letter-spacing: 0.05em; line-height: 1.2; }
  .fighter .fsub { font-size: 10.5px; line-height: 1.25; }
  .fighter .gauges { flex-direction: column; gap: 6px; width: 100%; }
  .vgauge-wrap { flex: 0 0 auto; width: 100%; gap: 3px; }
  .vgauge-wrap .gl { font-size: 9.5px; letter-spacing: 0.1em; }
  .vgauge-wrap .gv { font-size: 12px; }
  .vgauge { height: 13px; width: 100%; border-top: 1px solid #4C473C; }
  .vgauge > i { width: var(--p, 0%); height: 100%; transition: width 400ms cubic-bezier(0.33, 1, 0.68, 1); }
  .vgauge .cap { display: none; }
  .fx-center { font-size: 10px; }
  .fx-center .mono { font-size: 10px !important; }
  .commentary { max-height: 220px; font-size: 14px; }

  /* The shop's tables carry seven columns and a phone cannot hold them. Each
     row becomes its own card, and every cell says what it is. */
  .rack, .rack tbody, .rack tr, .rack td { display: block; width: auto; }
  .rack thead { display: none; }
  .rack tr { padding: 10px 0; border-bottom: 1px solid rgba(169, 158, 136, 0.6); }
  .rack tr:last-child { border-bottom: 0; padding-bottom: 2px; }
  .rack td { border: 0; padding: 1px 0; }
  .rack td[data-l]::before {
    content: attr(data-l);
    display: inline-block;
    min-width: 76px;
    padding-right: 8px;
    text-align: left;
    font-family: var(--forum);
    font-size: 9.5px;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: #6B5B3E;
  }
  .rack td[data-l="Item"] { font-size: 14px; }
  .rack td[data-l="Item"]::before { display: none; }
  /* table.ledger td.r is more specific than .rack td.r, so it has to be named
     in full: right aligned, the label rode up against its own value. */
  table.ledger.rack td.r { text-align: left; }
  .rack td:last-child { padding-top: 8px; }

  .modal { padding: 15px; }
  .toasts { bottom: 68px; }
}

/* A phone held sideways is the one window this page never actually laid out
   for. Everything below 900px answers the narrow phone, so at 844x390 the
   school's screen stayed a single column: 1841px of page scrolled through a
   301px window, with the Send Who gauges drawn as 700px-long bars that say
   nothing a 40px bar would not. There is room here for the columns the wide
   layout uses, and a short window is exactly where stacking costs most: every
   panel that goes side by side is a screenful the player does not scroll.
   This is the same fault the first update set out to fix at the wide end; it
   was still there at the short-wide end. */
/* No box at all by default, so the arena screen's source order is its layout
   everywhere except where the rule below turns it into columns. */
.arena-cols { display: contents; }

@media (min-width: 620px) and (max-height: 520px) {
  .main { padding: 8px 12px 16px; }
  .arena-cols {
    display: grid;
    grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
    gap: 12px; align-items: start;
  }
  .arena-cols > .slab { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  .arena-cols > h2.sec { grid-column: 2; grid-row: 1; margin-top: 4px; }
  .arena-cols > .grid { grid-column: 2; grid-row: 2; }
  .g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Two, not three: the market's man cards are the widest thing in a grid on
     this page and three of them across a 490px column wrapped the names onto
     two lines and ran the medallion into the text. The columns are worth
     having; they are not worth this much. */
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .g-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .g-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .statgrid { grid-template-columns: repeat(3, 1fr); }
  /* The shop is the longest screen in the game, and a short window is where
     that costs the most: one rack of items down a 301px window measured
     twelve thousand pixels, which is forty screens of scrolling for one
     purchase. Two racks across and two items across inside each, which is
     what the wide layout already does for the same reason. */
  .rack-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .rack-cols > .slab { margin-top: 0; }
  .rack tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
  /* The first-week guide is a list of four things and it was the whole of the
     first screen on a short window, with the school itself below it. */
  .guide .g-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  /* The air comes out before anything is hidden: on a short window the
     margins are the difference between a panel and a scroll. */
  .slab { padding: 10px 12px; }
  h2.sec { margin: 11px 0 6px; padding-bottom: 3px; }
  .guide { padding: 10px 12px; margin-bottom: 8px; }
  .guide .g-list li { padding: 2px 0; }
  .screen > h1 { margin-bottom: 2px; }
  /* The record still has to be readable while the bout runs, so it keeps a
     height rather than being cut to whatever is written so far. */
  .commentary { max-height: 210px; }
}

@media (max-width: 560px) {
  /* A narrow screen gets a two-row rail rather than a rail cut off at the
     right edge, and a nav that wraps rather than one that scrolls sideways
     past sections the player cannot see. Everything stays reachable.
     Three lines rather than two, because the sound switch is a thumb's size
     here and does not fit on the second one. 76px is what those three lines
     measure at their worst, and align-content is left alone: centred lines
     that overflow a fixed rail push the first one off the top of it, which is
     how the school's name went missing above the gold. */
  :root { --rail-h: 76px; }
  .app { grid-template-rows: var(--rail-h) 1fr auto; }
  .strip {
    flex-wrap: wrap;
    overflow-x: hidden;
    row-gap: 1px;
    padding: 0 8px;
  }
  .stat { height: auto; padding: 0 8px; }
  .strip .spacer { display: none; }

  .nav { flex-wrap: wrap; }
  .nav button {
    flex: 1 1 19%;
    min-width: 0;
    padding: 6px 3px 7px;
    font-size: 9.5px;
    letter-spacing: 0.03em;
    min-height: 44px;
  }
  .stat { padding: 0 8px; }
  .stat .k { font-size: 9px; letter-spacing: 0.12em; }
  .stat .v { font-size: 13px; }
  .strip .brand { font-size: 12px; letter-spacing: 0.1em; padding-right: 9px; }
  .screen > h1, .h-wall { font-size: 18px; }
  .num.big { font-size: 22px; }
  .num.huge { font-size: 30px; }
  .dossier .nm { font-size: 15px; }
  .statgrid { grid-template-columns: 1fr 1fr; }

  /* The day is five steps and a phone will not take five across, so they run
     three and two rather than scrolling sideways past the end of the day. */
  .day-strip .ds-step { flex: 1 1 31%; min-width: 0; padding: 8px 9px; }
  .day-strip .ds-step:nth-child(3n) { border-right: 0; }
  .day-strip .ds-v { font-size: 10.5px; }
  .special-day .sd-n { font-size: 16px; }
  .special-day .sd-t { font-size: 12.5px; }
  /* A dispatch's kind is a label above its line here, not a column beside it,
     because a column at this width leaves the sentence three words wide. */
  .dsp { display: block; }
  .dsp .k { display: block; flex: none; padding-top: 0; margin-bottom: 2px; }
  .prov-row { flex-wrap: wrap; }
  .prov-row .pv { min-width: 0; text-align: left; }
  .day-report .dr-head { flex-wrap: wrap; }
}

/* A small phone held upright, 320x568 and its neighbours. The sand and the two
   men fill the whole screen here and the play-by-play began a hair past the
   bottom of it. The floor is tightened rather than cut down: the medallion the
   room is built around keeps its place, the veil over the top of the sand goes
   because that is where the two names are, and the air around them shrinks.
   The landscape block below overrides this one for a short wide window. */
@media (max-width: 900px) and (max-height: 640px) {
  .arena-floor { padding: 8px; }
  .arena-floor .crowd { display: none; }
  .fighter .medallion.lg { width: 54px; height: 54px; }
}

/* A very short window (a phone on its side) still has to fit. */
@media (max-height: 460px) and (max-width: 900px) {
  :root { --rail-h: 38px; }
  /* A phone on its side is wide but short: tighten the rail so all seven
     readouts sit on one line without a sideways scroll. The brand is what
     gives way for that, and on a short window it is the least of what the
     rail is for. */
  .strip { padding: 0 6px; }
  .strip .brand { display: none; }
  /* The rail is 38px here: the switch has to fit inside it. */
  .strip .sound { width: 34px; height: 28px; }
  /* And the save word has to fit beside it without pushing the last readout
     off the end of a short wide window. */
  .strip .save { height: 26px; padding: 0 7px; font-size: 9px; letter-spacing: 0.1em; }
  .strip .brand { font-size: 12px; letter-spacing: 0.1em; padding-right: 9px; }
  .stat { padding: 0 8px; gap: 5px; }
  .stat .k { font-size: 9px; letter-spacing: 0.11em; }
  .stat .v { font-size: 13px; }
  .main { padding-top: 6px; }
  /* On its side the window is short, so the sand gives up its air first and
     keeps the two men, the bars and the exchange counter in one look. */
  .screen > h1 { font-size: 19px; margin: 0 0 2px; letter-spacing: 0.11em; }
  .screen > .lede { font-size: 12.5px; margin-bottom: 7px; }
  .arena-floor { padding: 7px 8px 9px; }
  /* No crowd veil here: it lies over the top of the sand, and on a short
     window that is exactly where the two names are. */
  .arena-floor .crowd { display: none; }
  .fighter .medallion.lg { width: 52px; height: 52px; }
  .fighter .fsub { display: none; }
  .screen > .lede { display: none; }
  .fx-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
  .fx-right > h2.sec { margin-top: 0; }
  .fx-right .commentary { max-height: calc(100vh - 150px); }
  .boot h1 { font-size: 24px; }
}

/* A phone on its side and narrow as well. Even tightened and without the
   brand the rail needs 604px on one line, so below that it takes the second
   row and the height to hold it. */
@media (max-height: 460px) and (max-width: 619px) {
  :root { --rail-h: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .wall::after { animation: none; }
  .gauge > i, .vgauge > i { transition: none; }
  .screen, .commentary .line { animation: none; }
}

/* The nav slot is a pass-through so the plate itself sits in the grid. */
#navslot { display: contents; }