/* ============================================================
   The Conatus Game.
   An arcade cabinet on the Ethics. The surrounding page keeps
   the site serifs; the board itself is pixelated 8-bit chrome.
   ============================================================ */

/* The board is the page. The shared collection hero is a two-column
   380px block (compass, title, line art) and it pushes the cabinet
   below the fold on a 15-inch laptop. This page keeps a short title
   under the nav and gives the rest of the screen to the game.
   Specificity has to beat `.page:not(#page-home) .hero.illustrated-hero`. */
#page-conatus.page .hero.illustrated-hero {
  display: block;
  min-height: 0;
  padding: 2rem 1.25rem 1.1rem;
  text-align: center;
}

/* The shared charter heading is left-aligned; centre it over the cabinet. */
#page-conatus .hero .illustrated-heading,
#page-conatus .hero .charter-heading,
#page-conatus .hero h1 {
  text-align: center;
}

#page-conatus.page .hero .crest-wrap,
#page-conatus .hero .charter-rule,
#page-conatus .hero .subtitle,
#page-conatus .hero .tagline,
#page-conatus .collection-hero-art {
  display: none;
}

#page-conatus .hero h1,
#page-conatus .illustrated-hero h1 {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  letter-spacing: 0.06em;
}

#page-conatus .section {
  padding: 0 1.5rem 2.5rem;
}

#page-conatus .cg-intro {
  display: none;
}

#conatus-game {
  --cg-px: 4px;
  --cg-night: #07061a;
  --cg-panel: #120e28;
  --cg-ink: #fff4d6;
  --cg-dim: #9aa0c8;
  --cg-gold: #f4d35e;
  --cg-cyan: #5ef0d0;
  --cg-pink: #ff7ab6;
  --cg-line: var(--cg-px) solid var(--cg-gold);
  /* The cabinet may be wider than the reading column: the board is the point of
     the page, and it is drawn at a size that can be read. The prose below keeps
     its own measure. */
  max-width: min(1560px, 100%);
  margin: 0.35rem auto 0;
  color: var(--ink-soft);
  overflow-x: clip;
}

/* The site's section is 1240px for prose. The board is given more room than that
   on a large screen, and the prose inside this page is capped separately. */
#page-conatus .section {
  max-width: min(1560px, 100%);
}

.cg-intro,
.cg-legend,
.cg-notes {
  max-width: 1040px;
  margin-inline: auto;
}

.cg-intro {
  font-family: var(--serif-body);
  font-size: var(--t-read);
  line-height: 1.65;
  color: var(--ink);
  max-width: 68ch;
}

.cg-frame {
  margin: 1.75rem auto 0;
  /* Room for the 16px ring, which the game's overflow clip would cut. */
  max-width: calc(100% - 34px);
  padding: clamp(0.75rem, 2vw, 1.25rem);
  border: var(--cg-line);
  outline: var(--cg-px) solid #07061a;
  outline-offset: var(--cg-px);
  box-shadow:
    0 0 0 12px #1a1238,
    0 0 0 16px var(--cg-gold),
    0 18px 0 rgba(0, 0, 0, 0.45),
    0 0 48px rgba(94, 240, 208, 0.12);
  background:
    repeating-linear-gradient(
      90deg,
      #140e2c 0 8px,
      #120c28 8px 16px
    );
  image-rendering: pixelated;
}

/* ---------- HUD ---------- */
.cg-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.4rem;
  padding: 0.35rem 0.35rem 0.85rem;
  border-bottom: var(--cg-px) solid var(--cg-gold);
  background: rgba(7, 6, 26, 0.72);
}

.cg-stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cg-dim);
}

.cg-stat strong {
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--cg-gold);
  text-transform: none;
  font-variant-numeric: tabular-nums;
}

.cg-pips {
  display: inline-flex;
  gap: 0.28rem;
  transform: translateY(1px);
}

.cg-pip {
  display: block;
  width: 12px;
  height: 12px;
  border: 0;
  transform: none;
  background: var(--cg-gold);
  box-shadow: 2px 2px 0 #8a6a12;
}

.cg-pip-off {
  background: #2a2448;
  box-shadow: 2px 2px 0 #120c24;
}

.cg-pip-burning {
  background: var(--cg-cyan);
  box-shadow: 2px 2px 0 #1a7a6a;
}

/* ---------- The field ---------- */
.cg-stage {
  position: relative;
  margin: 0.85rem 0 0;
  border: var(--cg-px) solid var(--cg-cyan);
  background: var(--cg-night);
  overflow: hidden;
  box-shadow: inset 0 0 0 4px #07061a;
}

.cg-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.18) 0 1px,
    transparent 1px 3px
  );
}

#conatus-game #cg-canvas {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  aspect-ratio: 900 / 620;
  touch-action: none;
  cursor: crosshair;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.cg-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(0.85rem, 3vw, 2rem);
  overflow-y: auto;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(7, 6, 26, 0.92) 0 2px,
      rgba(12, 10, 36, 0.92) 2px 4px
    );
  text-align: center;
  z-index: 3;
}

.cg-overlay[hidden] {
  display: none;
}

.cg-panel {
  max-width: 34rem;
  margin: 0 auto;
  padding: 1.25rem 1.1rem 1.4rem;
  border: var(--cg-px) solid var(--cg-gold);
  box-shadow: 8px 8px 0 #07061a;
  background: var(--cg-panel);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  color: var(--cg-ink);
}

.cg-panel-kicker,
.cg-panel-score span,
.cg-when {
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cg-cyan);
}

.cg-panel h2 {
  margin: 0.45rem 0 0.75rem;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cg-gold);
  text-wrap: balance;
}

.cg-panel p {
  margin: 0.5rem 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--cg-ink);
}

.cg-panel-keys {
  list-style: none;
  margin: 1rem 0;
  padding: 0;
  font-size: 0.82rem;
  line-height: 1.9;
  color: var(--cg-dim);
}

.cg-panel kbd {
  display: inline-block;
  min-width: 1.5rem;
  padding: 0.1rem 0.35rem;
  margin-right: 0.25rem;
  border: 2px solid var(--cg-gold);
  border-radius: 0;
  background: #07061a;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.75rem;
  color: var(--cg-gold);
  box-shadow: 2px 2px 0 #8a6a12;
}

.cg-panel-score {
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--cg-ink);
}

.cg-panel-score span {
  display: block;
  margin-top: 0.2rem;
}

.cg-panel-tier {
  font-style: normal;
  color: var(--cg-cyan);
}

.cg-panel-tally {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.1rem;
  list-style: none;
  margin: 1rem 0 0.5rem;
  padding: 0;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cg-dim);
}

.cg-panel-best {
  color: var(--cg-gold);
}

.cg-panel-pips {
  font-size: 0.82rem;
  color: var(--cg-dim);
}

.cg-begin {
  margin-top: 1.1rem;
  border-radius: 0 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: 4px 4px 0 #07061a;
}

.cg-begin:active {
  transform: scale(0.96);
}

/* ---------- Event line ---------- */
.cg-message {
  min-height: 3.1rem;
  margin: 0.85rem 0 0;
  padding: 0.85rem 0.35rem 0;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--cg-dim);
  border-top: var(--cg-px) solid var(--cg-gold);
  background: rgba(7, 6, 26, 0.55);
}

.cg-message[data-tone="good"] { color: var(--cg-cyan); }
.cg-message[data-tone="gold"] { color: var(--cg-gold); }
.cg-message[data-tone="bad"] { color: #ff8b82; }

.cg-pulse {
  animation: cg-fade 240ms steps(4, end);
}

@keyframes cg-fade {
  from { opacity: 0.25; }
  to { opacity: 1; }
}

/* ---------- Controls ---------- */
.cg-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  margin-top: 1.1rem;
}

.cg-dpad {
  display: grid;
  grid-template-columns: repeat(2, 3.4rem);
  grid-template-rows: 3rem;
  gap: 0.35rem;
}

.cg-key {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 3px solid var(--cg-gold);
  border-radius: 0;
  background: #1a1238;
  color: var(--cg-gold);
  font-size: 1rem;
  line-height: 1;
  touch-action: none;
  cursor: pointer;
  box-shadow: 3px 3px 0 #07061a;
  transition: background 120ms steps(2, end), color 120ms steps(2, end);
}

.cg-key:hover,
.cg-key:focus-visible {
  background: var(--cg-gold);
  color: #07061a;
  outline: 2px solid var(--cg-cyan);
  outline-offset: 2px;
}

.cg-key:active {
  transform: scale(0.96);
  box-shadow: 1px 1px 0 #07061a;
}

.cg-left { grid-area: 1 / 1 / 2 / 2; }
.cg-right { grid-area: 1 / 2 / 2 / 3; }

.cg-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cg-action {
  padding: 0.65rem 0.95rem;
  border: 3px solid var(--cg-gold);
  border-radius: 0;
  background: #1a1238;
  color: var(--cg-gold);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 3px 3px 0 #07061a;
  transition: background 120ms steps(2, end), color 120ms steps(2, end);
}

.cg-action:hover,
.cg-action:focus-visible {
  background: var(--cg-gold);
  color: #07061a;
  outline: 2px solid var(--cg-cyan);
  outline-offset: 2px;
}

.cg-action:active {
  transform: scale(0.96);
}

.cg-action span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--cg-cyan);
}

.cg-action:hover span,
.cg-action:focus-visible span {
  color: #07061a;
}

.cg-hint {
  margin: 0.9rem 0 0;
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.75rem;
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cg-dim);
}

.cg-hint-hand {
  display: none;
}

/* ---------- Legend ---------- */
.cg-legend {
  margin-top: 2rem;
}

.cg-legend-title {
  margin: 1.5rem 0 0.75rem;
  padding-bottom: 0.4rem;
  border-bottom: var(--cg-px) solid var(--cg-gold);
  font-family: ui-monospace, "Cascadia Mono", "Courier New", monospace;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cg-gold);
}

.cg-legend-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 0.9rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cg-legend-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.cg-swatch {
  flex: 0 0 auto;
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0;
  border: 2px solid #fff4d6;
  box-shadow: 3px 3px 0 #07061a;
}

.cg-legend-good .cg-swatch {
  border-radius: 0;
}

.cg-swatch-inadequate { background: #8aa4b4; }
.cg-swatch-fear { background: #b48cff; }
.cg-swatch-hope { background: #7ec8f0; }
.cg-swatch-envy { background: #7dcc6a; }
.cg-swatch-hatred { background: #ef5d55; }
.cg-swatch-pride { background: #c47cff; }
.cg-swatch-superstition { background: #e0c35a; }
.cg-swatch-despair { background: #6a6280; }

.cg-swatch-adequate { background: #e8f4ff; }
.cg-swatch-common { background: #5ef0d0; }
.cg-swatch-intuition { background: #ffe45c; }
.cg-swatch-joy { background: #ff7ab6; }

.cg-legend-copy {
  display: block;
  font-family: var(--serif-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.cg-legend-copy strong {
  font-weight: 400;
  color: var(--parchment);
}

.cg-when {
  display: block;
  margin: 0.1rem 0 0.25rem;
}

.cg-legend-copy em {
  display: block;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink-faint);
}

/* ---------- Prose below the board ---------- */
.cg-notes {
  margin-top: 2.25rem;
  padding-top: 1.5rem;
  border-top: var(--cg-line);
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 68ch;
}

.cg-notes h2 {
  font-family: var(--serif-display);
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

.cg-notes a {
  color: var(--parchment);
  text-decoration-color: var(--gold);
  text-underline-offset: 0.2em;
}

.cg-notes a:hover {
  color: var(--gold-bright);
}

.cg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Narrow screens: a real phone cabinet ---------- */
/* Short screens: the script adds cg-compact when the viewport is under
   900px tall, and caps the frame width so the whole cabinet fits. The
   chrome around the board tightens to leave the board as much height
   as possible. */
.cg-compact .cg-intro {
  display: none;
}

@media (max-height: 1100px) {
  #page-conatus .cg-intro {
    display: none;
  }
}

.cg-compact .cg-frame {
  margin-top: 0.35rem;
  padding: 0.6rem;
}

.cg-compact .cg-hud {
  gap: 0.3rem 1rem;
  padding: 0.2rem 0.3rem 0.5rem;
}

.cg-compact .cg-stat {
  font-size: 0.7rem;
}

.cg-compact .cg-stat strong {
  font-size: 1.05rem;
}

.cg-compact .cg-pip {
  width: 12px;
  height: 12px;
}

/* Knowledge and bondage flow in with the other stats instead of each
   taking a row of their own. */
.cg-compact .cg-degree-stat,
.cg-compact .cg-bondage-stat {
  flex-basis: auto;
}

/* The bondage list takes whatever is left of its row and clips, so a
   run of lodged passions never adds a row to the HUD mid-game. */
.cg-compact .cg-bondage-stat {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 0.5rem;
  /* With a zero basis it always claims the end of the first row, even when
     only its label's width is left there; this makes it wrap instead. */
  min-width: 7rem;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.cg-compact #cg-bondage {
  flex: 1 1 0;
  flex-wrap: nowrap;
  gap: 0.6rem;
  margin: 0;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  font-size: 0.72rem;
  text-transform: none;
  letter-spacing: 0;
}

.cg-compact #cg-bondage li {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cg-compact #cg-bondage meter {
  display: inline-block;
  vertical-align: middle;
  width: 2.4rem;
  height: 0.35rem;
  margin-left: 0.3rem;
}

.cg-compact .cg-stage {
  margin-top: 0.5rem;
}

/* When a panel runs longer than the board, its button stays in reach
   while the text above it scrolls. */
.cg-compact .cg-begin {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

/* The event line always holds exactly two lines, so neither a long
   sentence nor a short one changes the height of the cabinet. */
.cg-compact .cg-message {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  box-sizing: content-box;
  height: 2.7em;
  min-height: 0;
  margin-top: 0.5rem;
  padding: 0.5rem 0.3rem 0;
  font-size: 0.76rem;
  line-height: 1.35;
}

.cg-compact .cg-controls {
  margin-top: 0.6rem;
  gap: 0.6rem 1rem;
}

/* On a short desktop the event line sits between the pad and the
   action keys, one row of chrome instead of two under the board. */
@media (min-width: 701px) {
  .cg-compact .cg-frame {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 1rem;
  }

  .cg-compact .cg-hud,
  .cg-compact .cg-stage {
    grid-column: 1 / -1;
  }

  .cg-compact .cg-controls {
    display: contents;
  }

  .cg-compact .cg-message {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0.6rem;
    padding: 0 0.25rem;
    border-top: 0;
    background: none;
  }

  .cg-compact .cg-dpad {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0.6rem;
  }

  .cg-compact .cg-actions {
    grid-column: 3;
    grid-row: 3;
    margin-top: 0.6rem;
    flex-wrap: nowrap;
  }
}

/* A short desktop window leaves the board under 400px tall: the panels
   tighten so Begin sits below the text instead of over it. */
@media (min-width: 701px) and (max-height: 820px) {
  .cg-compact .cg-overlay {
    padding: 0.6rem;
  }

  .cg-compact .cg-panel {
    max-width: 40rem;
    padding: 0.7rem 1rem 0.8rem;
  }

  .cg-compact .cg-panel h2 {
    margin: 0.2rem 0 0.4rem;
    font-size: 1.3rem;
  }

  .cg-compact .cg-panel p,
  .cg-compact .cg-panel-keys {
    margin: 0.3rem 0;
    font-size: 0.85rem;
    line-height: 1.4;
  }

  .cg-compact .cg-panel-tally {
    margin: 0.5rem 0 0.3rem;
  }

  .cg-compact .cg-begin {
    margin-top: 0.5rem;
  }
}

.cg-compact .cg-dpad {
  grid-template-columns: repeat(2, 2.8rem);
  grid-template-rows: 2.4rem;
}

.cg-compact .cg-key {
  min-width: 40px;
  min-height: 38px;
  font-size: 0.85rem;
}

.cg-compact .cg-action {
  padding: 0.45rem 0.75rem;
  font-size: 0.66rem;
}

.cg-compact .cg-action span {
  display: none;
}

.cg-compact .cg-hint {
  display: none;
}

@media (max-width: 700px) {
  /* On a phone the board is the width of the screen: the section padding is
     reduced to the ring's width and nothing else is taken from the board. */
  #page-conatus .section {
    padding-inline: 0.4rem;
  }

  #conatus-game {
    margin-top: 1rem;
    margin-inline: 0;
    max-width: none;
  }

  .cg-intro {
    font-size: 1.05rem;
    max-width: none;
  }

  .cg-frame {
    max-width: none;
    padding: 0.4rem;
    outline-width: 2px;
    outline-offset: 2px;
    box-shadow:
      0 0 0 4px #1a1238,
      0 0 0 6px var(--cg-gold),
      0 10px 0 rgba(0, 0, 0, 0.4);
  }

  .cg-hud {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem 0.55rem;
    padding: 0.25rem 0.2rem 0.65rem;
  }

  .cg-stat {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    flex-wrap: wrap;
  }

  .cg-stat strong {
    font-size: 0.95rem;
  }

  .cg-stage {
    margin-top: 0.55rem;
  }

  #conatus-game #cg-canvas {
    aspect-ratio: 420 / 640;
  }

  .cg-overlay {
    padding: 0.55rem;
    align-items: stretch;
  }

  .cg-panel {
    max-width: none;
    padding: 0.75rem 0.7rem 0.9rem;
    box-shadow: 4px 4px 0 #07061a;
  }

  .cg-panel h2 {
    font-size: 1.05rem;
    margin: 0.3rem 0 0.5rem;
  }

  .cg-panel p,
  .cg-panel-keys {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .cg-panel-pips {
    font-size: 0.72rem;
  }

  .cg-begin {
    width: 100%;
    min-height: 48px;
    margin-top: 0.75rem;
  }

  .cg-message {
    min-height: 2.4rem;
    margin-top: 0.55rem;
    padding: 0.55rem 0.2rem 0;
    font-size: 0.78rem;
  }

  .cg-controls {
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.75rem;
    margin-top: 0.75rem;
  }

  .cg-dpad,
  .cg-compact .cg-dpad {
    grid-template-columns: repeat(2, 4.4rem);
    grid-template-rows: 3.6rem;
    gap: 0.4rem;
  }

  .cg-key,
  .cg-compact .cg-key {
    min-width: 48px;
    min-height: 48px;
    font-size: 1rem;
  }

  /* A short phone: three stats to a row, the pad and the three actions
     side by side on one line beneath the board. Every row of chrome
     saved is a row the board gets back. */
  .cg-compact .cg-frame {
    padding: 0.45rem;
  }

  /* Five fixed rows on a six-column grid. Every stat has its place, so
     the HUD's height does not change with the width of the frame or
     with what is on the field, and the board can be sized once. */
  .cg-compact .cg-hud {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.2rem 0.4rem;
    padding: 0.1rem 0.15rem 0.35rem;
  }

  .cg-compact .cg-stat {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.1rem 0.3rem;
    min-width: 0;
    font-size: 0.5rem;
    letter-spacing: 0.08em;
  }

  .cg-compact .cg-stat strong {
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .cg-compact .cg-hud > :nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
  .cg-compact .cg-hud > :nth-child(2) { grid-column: 3 / 5; grid-row: 1; }
  .cg-compact .cg-hud > :nth-child(4) { grid-column: 5 / 7; grid-row: 1; }
  .cg-compact .cg-hud > :nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .cg-compact .cg-power-stat { grid-column: 1 / -1; grid-row: 3; }
  .cg-compact .cg-degree-stat { grid-column: 1 / -1; grid-row: 4; }
  .cg-compact .cg-hud > :nth-child(8) { grid-column: 1 / 5; grid-row: 5; }
  .cg-compact .cg-bondage-stat { grid-column: 5 / -1; grid-row: 5; }

  /* Lodged passions also hang as beads on Spinoza's yoke, so the HUD's
     list can go without its label here and name the first passion. */
  .cg-compact .cg-bondage-stat > span {
    display: none;
  }

  .cg-compact #cg-bondage li {
    display: block;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .cg-compact #cg-bondage li:nth-child(n + 2) {
    display: none;
  }

  .cg-compact #cg-bondage meter {
    display: none;
  }

  .cg-compact #cg-degree {
    font-size: 0.7rem;
  }

  .cg-compact #cg-power {
    flex: 1 1 auto;
    width: auto;
    min-width: 3rem;
    height: 0.55rem;
  }

  .cg-compact .cg-pips {
    gap: 0.2rem;
  }

  .cg-compact .cg-bondage-stat {
    font-size: 0.5rem;
    min-height: 1rem;
  }

  .cg-compact .cg-stage {
    margin-top: 0.4rem;
  }

  /* Panels on a small board: tighter type, so Begin is usually in
     view without scrolling the panel. */
  .cg-compact .cg-overlay {
    padding: 0.4rem;
  }

  .cg-compact .cg-panel {
    padding: 0.55rem 0.6rem 0.6rem;
  }

  .cg-compact .cg-panel h2 {
    margin: 0.2rem 0 0.35rem;
    font-size: 0.95rem;
  }

  .cg-compact .cg-panel p,
  .cg-compact .cg-panel-keys {
    margin: 0.3rem 0;
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .cg-compact .cg-panel-score {
    font-size: 1.3rem;
  }

  .cg-compact .cg-panel-tally {
    margin: 0.5rem 0 0.3rem;
    gap: 0.2rem 0.8rem;
    font-size: 0.62rem;
  }

  .cg-compact .cg-begin {
    min-height: 44px;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .cg-compact .cg-message {
    height: 2.6em;
    margin-top: 0.4rem;
    padding: 0.4rem 0.2rem 0;
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .cg-compact .cg-controls {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.5rem;
    margin-top: 0.5rem;
  }

  .cg-compact .cg-dpad {
    flex: 0 0 auto;
    grid-template-columns: repeat(2, 2.75rem);
    grid-template-rows: auto;
    gap: 0.3rem;
    margin: 0;
  }

  .cg-compact .cg-key {
    min-width: 44px;
    min-height: 44px;
    height: 100%;
    font-size: 0.9rem;
  }

  .cg-compact .cg-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }

  .cg-compact .cg-action {
    min-height: 44px;
    padding: 0.35rem 0.2rem;
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .cg-actions {
    flex: 1 1 8rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .cg-action {
    min-height: 48px;
    text-align: center;
  }

  .cg-hint-desk {
    display: none;
  }

  .cg-hint-hand {
    display: block;
  }

  .cg-legend-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .cg-hud {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cg-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .cg-dpad {
    justify-self: center;
    align-self: center;
    margin: 0 auto;
  }

  .cg-actions {
    width: 100%;
    grid-template-columns: 1fr 1fr;
  }

  .cg-action:first-child {
    grid-column: 1 / -1;
  }

  .cg-compact .cg-action:first-child {
    grid-column: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-pulse,
  .cg-key,
  .cg-action,
  .cg-begin {
    animation: none;
    transition: none;
  }
}

/* The ascent keeps the cabinet and changes its light with each Part. */
#conatus-game { --cg-accent: #5ef0d0; }
.cg-stage { border-color: var(--cg-accent); }
#cg-power { display: inline-block; width: 7rem; height: 0.7rem; background: #2a2448; }
#cg-power-fill { display: block; width: 100%; height: 100%; background: var(--cg-gold); }
.cg-degree-stat, .cg-bondage-stat { flex-basis: 100%; }
.cg-bondage-stat { color: var(--cg-dim); font: 0.75rem ui-monospace, monospace; }
#cg-bondage { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; margin: 0.3rem 0; padding: 0; min-height: 1.2rem; }
#cg-bondage li { color: var(--cg-ink); }
#cg-bondage meter { display: block; width: 100%; height: 0.3rem; }
.cg-gate, .cg-gate h2 { font-family: var(--serif-body); letter-spacing: normal; text-transform: none; }
.cg-gate h2 { font-family: var(--serif-display); }
.cg-gate a { color: var(--cg-accent); text-decoration: underline; }
#cg-reason[aria-pressed="true"] {
  background: var(--cg-cyan);
  border-color: var(--cg-cyan);
  color: #07061a;
  box-shadow: 3px 3px 0 #1a7a6a, 0 0 18px rgba(94, 240, 208, 0.5);
}
@media (max-width: 700px) {
  .cg-degree-stat, .cg-bondage-stat, .cg-power-stat { grid-column: 1 / -1; }
  .cg-gate { align-self: center; }
}

/* The cabinet is wide enough for the whole HUD on one line, so the Part, the degree
   and the bondage list sit in the row with everything else rather than each taking a
   line of their own. */
#conatus-game:not(.cg-compact) .cg-degree-stat,
#conatus-game:not(.cg-compact) .cg-bondage-stat {
  flex-basis: auto;
}

/* The compact HUD is read on a phone, at arm's length. Its labels were set for a
   screenshot rather than for a person, so they are sized to be read here. */
@media (max-width: 700px) {
  .cg-compact .cg-stat,
  .cg-compact .cg-bondage-stat {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }

  .cg-compact .cg-stat strong {
    font-size: 1.05rem;
  }

  .cg-compact #cg-degree {
    font-size: 0.78rem;
  }
}