/* RxDrop - a neon pharmacy after hours. */

:root {
  --bg: #070b18;
  --bg-glow: #16205a;
  --panel: rgba(18, 26, 56, 0.78);
  --panel-edge: rgba(139, 214, 255, 0.28);
  --ink: #e8f1ff;
  --ink-dim: #8ba0c8;
  --accent: #37b6ff;
  --accent-warm: #ffd23f;
  --danger: #ff4b4b;
  --radius: 14px;
  --font: 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'Courier New', monospace;

  /* Set per era from script; these are the pharmaceutical era's. */
  --era-accent: #8bd6ff;
  --era-back-1: #141d3a;
  --era-back-2: #0a0d1c;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  /* This is a game you drag a finger across, not a document. Without these, a
     swipe starts a text selection and a held finger raises the copy/paste
     callout, both of which fight the controls on a touch screen. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  /* Stops a downward swipe on the bottle turning into pull-to-refresh. */
  overscroll-behavior: none;
  background:
    radial-gradient(circle at 20% 12%, rgba(55, 182, 255, 0.14), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(255, 75, 145, 0.12), transparent 48%),
    linear-gradient(180deg, var(--era-back-1) 0%, var(--era-back-2) 62%, #04060f 100%);
  background-attachment: fixed;
  transition: background-color 0.6s ease;
  overflow-x: hidden;
}

/* Faint scanlines for a CRT feel. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  z-index: 5;
}

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: calc(18px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right))
    calc(18px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left));
}

/* ---- masthead ---------------------------------------------------------- */

.masthead {
  text-align: center;
}

.logo {
  margin: 0;
  font-size: clamp(2.1rem, 6vw, 3.2rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
}

.logo-rx {
  color: var(--danger);
  text-shadow: 0 0 18px rgba(255, 75, 75, 0.55);
}

.logo-drop {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(55, 182, 255, 0.55);
}

.tagline {
  margin: 4px 0 0;
  color: var(--ink-dim);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

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

.stage {
  display: grid;
  grid-template-columns: minmax(140px, 170px) minmax(240px, 420px) minmax(140px, 170px);
  gap: 16px;
  align-items: stretch;
  width: 100%;
  max-width: 820px;
  flex: 1 1 auto;
  min-height: 0;
}

.panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  align-content: start;
}

.panel--right {
  justify-content: flex-start;
}

.readout {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.readout--split {
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}

.readout__label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.readout__value {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-variant-numeric: tabular-nums;
  color: var(--accent-warm);
  text-shadow: 0 0 12px rgba(255, 210, 63, 0.35);
}

.readout__value--muted {
  color: var(--ink-dim);
  font-size: 1.05rem;
  text-shadow: none;
}

.readout__value--big {
  font-size: 2rem;
  color: #7dff9d;
  text-shadow: 0 0 14px rgba(125, 255, 157, 0.4);
}

.next canvas {
  width: 100%;
  height: 56px;
  display: block;
  margin-top: 4px;
  border-radius: 10px;
  background: rgba(4, 8, 22, 0.65);
  border: 1px solid rgba(139, 214, 255, 0.16);
}

.virus-bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(4, 8, 22, 0.7);
  border: 1px solid rgba(139, 214, 255, 0.16);
  overflow: hidden;
}

.virus-bar__fill {
  height: 100%;
  width: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #7dff9d, #ffd23f, #ff4b4b);
  transition: width 0.35s ease;
}

.tally {
  width: 100%;
  height: 66px;
  display: block;
}

.seed {
  margin: auto 0 0;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-dim);
  word-break: break-all;
}

/* ---- playfield --------------------------------------------------------- */

.fields {
  position: relative;
  display: flex;
  gap: 10px;
  min-height: 0;
  height: 100%;
}

.playfield {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  min-width: 0;
  min-height: 420px;
}

.playfield[hidden] {
  display: none;
}

/* The canvases flex into whatever height the field row has, so two bottles
   side by side always come out the same size. */
.playfield > canvas {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: block;
  touch-action: none;
}

.overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Scrolls rather than clips. This is the difference between a tall card and
     an unplayable game: a tester on an iPhone could not see the Start button at
     all, because the card was 662px inside a 547px overlay and the overflow had
     nowhere to go. A card may be too tall - it may never be unreachable. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px;
  background: rgba(4, 7, 18, 0.82);
  backdrop-filter: blur(3px);
  border-radius: var(--radius);
  z-index: 3;
}

.overlay[hidden] {
  display: none;
}

.card {
  width: min(100%, 340px);
  /* Never taller than the overlay it sits in; the overlay scrolls instead. */
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(28, 38, 78, 0.95), rgba(12, 18, 42, 0.95));
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  animation: card-in 0.22s ease-out;
}

.card[hidden] {
  display: none;
}

@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.card__title {
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
}

.card__body {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink-dim);
}

.card__best {
  margin: -4px 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-warm);
  text-shadow: 0 0 14px rgba(255, 210, 63, 0.5);
}

.card__best[hidden] {
  display: none;
}

.card__hint {
  margin: 4px 0 0;
  font-size: 0.72rem;
  line-height: 1.9;
  color: var(--ink-dim);
}

kbd {
  display: inline-block;
  min-width: 1.5em;
  padding: 1px 5px;
  margin: 0 1px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-bottom-width: 2px;
  border-radius: 5px;
}

/* ---- versus ------------------------------------------------------------ */

.vs-hud {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: rgba(8, 14, 34, 0.75);
  border: 1px solid var(--panel-edge);
  border-radius: 8px;
}

.vs-hud[hidden] {
  display: none;
}

.vs-hud__name {
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.vs-hud__count {
  color: #7dff9d;
}

.vs-hud__incoming {
  margin-left: auto;
  color: var(--danger);
  font-weight: 700;
}

.vs-hud__incoming:empty::before {
  content: '';
}

.vs-hud.is-hit {
  animation: hit 0.3s ease;
}

@keyframes hit {
  50% {
    background: rgba(255, 75, 75, 0.35);
  }
}

/* ---- resistance meter --------------------------------------------------- */

.meter[hidden] {
  display: none;
}

.meter__track {
  height: 8px;
  margin-top: 4px;
  border-radius: 99px;
  background: rgba(4, 8, 22, 0.7);
  border: 1px solid rgba(139, 214, 255, 0.16);
  overflow: hidden;
}

.meter__fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, #7dff9d, #ffd23f, #ff4b4b);
  transition: width 0.3s ease;
}

/* ---- title extras ------------------------------------------------------- */

.tunables {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tunables[hidden] {
  display: none;
}

.segmented--wide {
  width: 100%;
}

.segmented--wide button {
  flex: 1 1 0;
}

.switch {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.switch__track {
  flex: 0 0 auto;
  width: 40px;
  height: 22px;
  padding: 3px;
  border-radius: 99px;
  background: rgba(4, 8, 22, 0.8);
  border: 1px solid rgba(139, 214, 255, 0.3);
  transition: background 0.15s ease;
}

.switch__thumb {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--ink-dim);
  transition: transform 0.15s ease, background 0.15s ease;
}

.switch input:checked + .switch__track {
  background: rgba(55, 182, 255, 0.35);
}

.switch input:checked + .switch__track .switch__thumb {
  transform: translateX(18px);
  background: var(--accent-warm);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.switch__text strong {
  display: block;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.switch__text small {
  display: block;
  font-size: 0.7rem;
  color: var(--ink-dim);
}

.daily-note {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--accent-warm);
}

.daily-note[hidden] {
  display: none;
}

.share {
  margin: 0;
  padding: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--ink);
  background: rgba(4, 8, 22, 0.7);
  border: 1px solid rgba(139, 214, 255, 0.2);
  border-radius: 8px;
}

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

.button {
  appearance: none;
  /* 44px is the smallest thing a thumb reliably hits. The primary button on the
     smallest phone was measuring 37px once the card tightened up, which is the
     sort of thing that turns "I could not find Play" into "I found Play and it
     did not seem to do anything". */
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(139, 214, 255, 0.35);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.button:hover {
  background: rgba(139, 214, 255, 0.16);
}

.button:active {
  transform: translateY(1px);
}

.button:focus-visible {
  outline: 2px solid var(--accent-warm);
  outline-offset: 2px;
}

.button--primary {
  background: linear-gradient(180deg, #37b6ff, #1d6fd0);
  border-color: #8bd6ff;
  box-shadow: 0 6px 22px rgba(55, 182, 255, 0.35);
}

.button--primary:hover {
  background: linear-gradient(180deg, #5cc6ff, #2a80e0);
}

.button--ghost {
  font-size: 0.7rem;
  padding: 8px 10px;
}

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

.chooser__label {
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.chooser__step {
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(139, 214, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
}

.chooser__step:hover {
  background: rgba(139, 214, 255, 0.2);
}

.chooser__value {
  min-width: 2.2ch;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--accent-warm);
  text-align: center;
}

.segmented {
  display: flex;
  gap: 4px;
  padding: 3px;
  background: rgba(4, 8, 22, 0.6);
  border: 1px solid rgba(139, 214, 255, 0.2);
  border-radius: 10px;
}

.segmented button {
  padding: 6px 10px;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.segmented button.is-selected {
  color: #06101f;
  background: var(--accent);
}

/* ---- touch pad --------------------------------------------------------- */

.touchpad {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.touchpad__wide {
  grid-column: 1 / -1;
}

.touchpad button[hidden] {
  display: none;
}

#light-button.is-pressed,
#light-button.is-lit {
  color: #1b1405;
  background: linear-gradient(180deg, #ffe27a, #f0c33c);
  border-color: #ffd666;
}

#light-button.is-spent {
  opacity: 0.45;
}

/* The lamp resting between sessions. Dimmed and unpressable, and the label
   counts down - a control that silently does nothing reads as broken. */
#light-button.is-resting {
  opacity: 0.5;
  color: var(--ink);
  background: var(--panel);
  border-color: var(--panel-edge);
  font-variant-numeric: tabular-nums;
}

.touchpad button {
  touch-action: manipulation;
  padding: 16px 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 12px;
  touch-action: manipulation;
  user-select: none;
  cursor: pointer;
}

.touchpad button.is-pressed {
  background: rgba(139, 214, 255, 0.25);
  transform: translateY(1px);
}

.colophon {
  max-width: 640px;
  text-align: center;
  font-size: 0.7rem;
  line-height: 1.6;
  color: rgba(139, 160, 200, 0.75);
}

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

body.is-versus .stage {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
}

body.is-versus .panel,
body.is-versus .touchpad {
  display: none;
}

/* Without the side panels the row has no other content to size it, so give
   the two bottles an explicit share of the viewport. */
body.is-versus .fields {
  height: min(74vh, 820px);
}

body.is-versus .playfield {
  min-height: 0;
  height: 100%;
}

/* ---- responsive -------------------------------------------------------- */

/* ---- the apothecary panel ------------------------------------------------ */

.apothecary {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 6px 10px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--era-accent) 16%, transparent), transparent 68%),
    rgba(4, 8, 22, 0.5);
  border: 1px solid color-mix(in srgb, var(--era-accent) 24%, transparent);
}

.apothecary canvas {
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1 / 1;
  height: auto;
  display: block;
}

.apothecary__era {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--era-accent);
  text-align: center;
  line-height: 1.15;
}

.apothecary__period {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--ink-dim);
  letter-spacing: 0.04em;
}

/* ---- the physician's note ------------------------------------------------ */

.note {
  margin: 4px 0 2px;
  padding: 12px 14px;
  text-align: left;
  border-left: 3px solid var(--era-accent);
  border-radius: 0 10px 10px 0;
  background: rgba(4, 8, 22, 0.55);
}

.note__era {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--era-accent);
}

.note__text {
  margin: 6px 0 8px;
  font-size: 0.94rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
}

.note__place {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-style: normal;
  color: var(--ink-dim);
}

/* Two bottles leave no room for a portrait; the era still reads in the glass. */
body.is-versus .apothecary {
  display: none;
}

.colophon__link {
  margin-left: 10px;
  color: var(--era-accent);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.colophon__link:hover,
.colophon__link:focus-visible {
  color: var(--ink);
}

@media (max-width: 720px) {
  /* One screen, no scrolling: the panels and the touchpad take what they need
     and the bottle takes everything else. Every rule in here exists to keep
     the bottle big - it is the thing you are actually looking at. */
  .app {
    height: 100dvh;
    gap: 6px;
    padding: calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right))
      calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
    overflow: hidden;
  }

  .logo {
    font-size: 1.35rem;
    letter-spacing: 0.08em;
  }

  /* Two half-width columns made everything wrap, which is what ate the bottle.
     Full-width strips fit four readouts on one line instead of one. */
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      'left'
      'right'
      'board';
    max-width: 520px;
    gap: 5px;
  }

  .panel--left {
    grid-area: left;
  }

  .panel--right {
    grid-area: right;
  }

  /*
   * Nothing in the panels means anything before you have played: SCORE 0,
   * TOP 0, an empty NEXT and a disabled PAUSE. On a phone that is most of the
   * first screen, and it is a fair share of why a tester's first reaction to
   * opening this was "wtf is this". They arrive when the game does.
   */
  body:not(.is-playing) .panel--left,
  body:not(.is-playing) .panel--right {
    display: none;
  }

  .fields {
    grid-area: board;
    /* A floor, but one the grid can win against. `50vh` flat was a lower bound
       with no matching upper bound: switch enough modifiers on and the panels
       grew past what was left, and because .app is `overflow: hidden` the
       excess did not scroll - the bottle was drawn straight over the touchpad.
       Same shape of bug as the landscape clipping before it. The panels are
       kept small enough below that this floor is affordable. */
    min-height: 0;
    flex: 1 1 auto;
  }

  /* The panels may not eat the screen. Between them they get at most this
     much, and the bottle gets the rest - which is the invariant the browser
     suite checks by asserting the bottle never reaches the touchpad. */
  .panel--left,
  .panel--right {
    max-height: 26vh;
    overflow-y: auto;
  }

  /* In the HUD the icon is enough: you chose these on the title screen a
     moment ago, and the name is still on the chip's title for anyone who
     wants it. Five named chips wrap to three rows and cost the bottle more
     than they are worth. */
  .mods--hud .mods__name {
    display: none;
  }

  .mods--hud .mods__chip {
    padding: 0.2rem 0.3rem;
  }

  .mods--hud .mods__icon {
    width: 1.15em;
    height: 1.15em;
  }

  .meter__hint {
    display: none;
  }

  /* On a phone the app already fills the viewport, so versus should use all
     the height it is given rather than a fixed share of it. */
  body.is-versus .fields {
    height: 100%;
  }

  .playfield {
    min-height: 0;
  }

  .panel {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    gap: 4px 10px;
    padding: 6px 8px;
  }

  .readout__label {
    font-size: 0.56rem;
  }

  .readout__value {
    font-size: 0.98rem;
  }

  .readout__value--big {
    font-size: 1.25rem;
  }

  /* The physician becomes a chip beside the era name rather than a portrait. */
  .apothecary {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    padding: 2px 9px 2px 3px;
    border-radius: 999px;
  }

  .apothecary canvas {
    width: 30px;
    max-width: 30px;
  }

  .apothecary__era {
    font-size: 0.55rem;
    text-align: left;
    letter-spacing: 0.04em;
  }

  .apothecary__period {
    display: none;
  }

  .next {
    flex: 1 1 84px;
  }

  .next canvas {
    height: 30px;
    margin-top: 2px;
  }

  /* Give the bars a real basis - as bare flex items they collapse to a sliver
     and read as a stray mark next to the count. */
  .virus-bar {
    flex: 1 1 60px;
    height: 6px;
    align-self: center;
  }

  .meter {
    flex: 1 1 110px;
  }

  .tally {
    display: none;
  }

  .touchpad {
    gap: 6px;
  }

  .touchpad button {
    padding: 10px 0;
  }

  .card {
    padding: 14px;
    gap: 9px;
  }

  .tagline,
  .colophon,
  .seed {
    display: none;
  }
}

/* Narrow phones: the status strip has to stay one line, so the buttons give
   up padding before the bar gives up its row. */
@media (max-width: 400px) {
  .button--ghost {
    padding: 6px 9px;
    font-size: 0.62rem;
  }

  .panel {
    gap: 4px 7px;
  }

  .apothecary__era {
    font-size: 0.5rem;
  }
}

/* A phone in landscape is WIDER than the phone breakpoint and far shorter than
   a desktop, so it used to fall through to the desktop layout and scroll. The
   three-column grid is right for that shape - it just has to fit one screen. */
@media (max-height: 600px) and (pointer: coarse) {
  .app {
    height: 100dvh;
    overflow: hidden;
    gap: 5px;
    padding: calc(4px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right))
      calc(4px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left));
  }

  .masthead,
  .tagline,
  .colophon,
  .virus-bar,
  .tally,
  .seed {
    display: none;
  }

  .stage {
    max-width: 100%;
    gap: 8px;
  }

  /* The desktop floor is taller than a landscape phone, so without this the
     bottle is forced past the viewport and the app clips its bottom off. */
  .playfield {
    min-height: 0;
  }

  .panel {
    padding: 4px 7px;
    gap: 3px 10px;
  }

  .readout__label {
    font-size: 0.55rem;
  }

  .readout__value {
    font-size: 0.95rem;
  }

  .apothecary {
    padding: 3px 4px 5px;
  }

  .apothecary canvas {
    max-width: 44px;
  }

  .apothecary__era {
    font-size: 0.55rem;
  }

  .apothecary__period {
    display: none;
  }

  .next canvas {
    height: 26px;
  }

  .button--ghost {
    padding: 5px 8px;
    font-size: 0.6rem;
  }

  .touchpad {
    gap: 5px;
  }

  .touchpad button {
    padding: 6px 0;
    font-size: 0.92rem;
  }
}

@media (pointer: coarse), (max-width: 720px) {
  .touchpad {
    display: grid;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }

  .virus-bar__fill {
    transition: none;
  }
}

/* The seed is the one thing worth copying out of the page by hand. */
.seed {
  -webkit-user-select: text;
  user-select: text;
}

/* ---- the modifier picker ------------------------------------------------ */

.chooser--stack {
  flex-direction: column;
  align-items: stretch;
  gap: 0.45rem;
}

.mods {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.mods__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.34rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(139, 160, 200, 0.32);
  background: rgba(18, 24, 40, 0.55);
  color: #b7c6e4;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.mods__chip:hover {
  border-color: rgba(139, 160, 200, 0.6);
  color: #e6edfb;
}

.mods__chip.is-on {
  background: color-mix(in srgb, var(--accent, #8bd6ff) 26%, transparent);
  border-color: var(--accent, #8bd6ff);
  color: #f2f7ff;
}

.mods__icon {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.mods__note {
  color: #8ba0c8;
  font-size: 0.76rem;
  line-height: 1.4;
}

.meter__fill--light {
  background: linear-gradient(90deg, #ffd666, #fff3c4);
}

.meter.is-spent .meter__fill--light {
  background: linear-gradient(90deg, #6b5b2a, #8a7433);
}

.meter.is-lit .meter__track {
  box-shadow: 0 0 0 1px rgba(255, 214, 102, 0.55);
}

.meter.is-resting .meter__fill--light {
  background: linear-gradient(90deg, #4b5570, #6a748e);
}

.meter__hint {
  color: #8ba0c8;
  font-size: 0.7rem;
}

.mods--hud .mods__chip {
  padding: 0.2rem 0.45rem;
  font-size: 0.72rem;
}

/* ---- the physician's formulary ------------------------------------------ */

/* The formulary's own layer: a reading panel, not a card in the bottle. */
.sheet {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(4, 7, 18, 0.86);
  backdrop-filter: blur(4px);
}

.sheet[hidden] {
  display: none;
}

.sheet__card {
  width: min(100%, 42rem);
  max-height: min(88vh, 52rem);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  text-align: center;
  background: linear-gradient(180deg, rgba(28, 38, 78, 0.97), rgba(12, 18, 42, 0.97));
  border: 1px solid var(--panel-edge);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.6);
  animation: card-in 0.22s ease-out;
}

.pill-count {
  margin-left: 0.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: rgba(139, 160, 200, 0.18);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.notebook {
  display: grid;
  gap: 0.6rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  margin: 0.6rem 0 1rem;
  padding-right: 0.3rem;
  text-align: left;
}

.notebook__entry {
  padding: 0.6rem 0.75rem;
  border-radius: 0.6rem;
  border: 1px solid rgba(139, 160, 200, 0.22);
  background: rgba(12, 17, 30, 0.5);
}

.notebook__entry.is-blank {
  border-style: dashed;
  border-color: rgba(139, 160, 200, 0.16);
  background: transparent;
  min-height: 2.6rem;
}

.notebook__title {
  margin: 0;
  font-size: 0.95rem;
  color: var(--accent, #8bd6ff);
}

.notebook__entry.is-blank .notebook__title {
  color: rgba(139, 160, 200, 0.45);
  font-style: italic;
  font-weight: 400;
}

.notebook__what {
  margin: 0.2rem 0 0.5rem;
  color: #b7c6e4;
  font-size: 0.82rem;
}

.notebook__what:empty {
  display: none;
}

.notebook__note {
  margin: 0 0 0.45rem;
  padding-left: 0.6rem;
  border-left: 2px solid rgba(139, 160, 200, 0.3);
  color: #d5e0f4;
  font-size: 0.84rem;
  line-height: 1.45;
}

.notebook__who {
  display: block;
  color: #8ba0c8;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.notebook__more {
  margin: 0;
  color: rgba(139, 160, 200, 0.6);
  font-size: 0.74rem;
  font-style: italic;
}

/* ---- the discovery toast ------------------------------------------------ */

/* The attribute has to beat the class, or a display rule below leaves a
   "hidden" element on screen. Same reason .overlay[hidden] exists. */
.toast[hidden] {
  display: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.95rem;
  border-radius: 0.6rem;
  border: 1px solid var(--accent, #8bd6ff);
  background: rgba(10, 15, 27, 0.92);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  animation: toast-in 220ms ease-out;
}

.toast__label {
  color: #8ba0c8;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.toast__text {
  color: #f2f7ff;
  font-size: 0.92rem;
}

@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 0.5rem); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
}


/* ---- the title card's disclosures --------------------------------------- */

/*
 * Play is the first control on the screen and everything else is folded away
 * behind these. Two testers opened the game cold: one could not find the start
 * button at all, the other said "wtf is this". Twelve controls before any sign
 * of what the game is will do that.
 */
.fold {
  width: 100%;
  text-align: left;
  border: 1px solid var(--panel-edge);
  border-radius: 10px;
  background: rgba(12, 17, 30, 0.4);
}

.fold__summary {
  padding: 8px 12px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.fold__summary::-webkit-details-marker {
  display: none;
}

.fold__summary::after {
  content: '+';
  color: #8ba0c8;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1;
}

.fold[open] > .fold__summary::after {
  content: '\2212';
}

.fold__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 12px 12px;
}

.how__goal,
.how__more {
  margin: 0;
  color: #c6d3ec;
  font-size: 0.84rem;
  line-height: 1.5;
}

.how__goal strong {
  color: var(--ink);
}

.how__diagram {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: rgba(6, 10, 20, 0.55);
}

.how__caption {
  margin: 0;
  color: #8ba0c8;
  font-size: 0.74rem;
  line-height: 1.4;
}

.how__keys {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 10px;
  margin: 0;
  font-size: 0.82rem;
}

.how__keys dt {
  color: #8ba0c8;
  white-space: nowrap;
}

.how__keys dd {
  margin: 0;
  color: var(--ink);
}