/* Wordfall for Windows — Windows 95-era application skin.
 * C 1995 vibes: 16-colour palette, 2px bevels, Tahoma, no rounded corners,
 * no gradients, no blur. Everything is drawn with borders and hard shadows.
 */

:root {
  --face: #c0c0c0;
  --light: #dfdfdf;
  --white: #ffffff;
  --shadow: #808080;
  --dark: #000000;
  --navy: #000080;
  --teal: #008080;
  --ink: #000000;
  --disabled: #808080;
  --desktop: #008080;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--desktop);
}

body {
  font-family: "Microsoft Sans Serif", Tahoma, Arial, sans-serif;
  font-size: 11px;
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  cursor: default;
}

svg { display: block; }
u { text-underline-offset: 1px; }

/* ── Desktop ─────────────────────────────────────────────────────────────── */
.desktop {
  position: fixed;
  inset: 0;
  background: var(--desktop);
  overflow: hidden;
}

.desktop-icons {
  position: absolute;
  left: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  z-index: 1;
}

.desktop-icon {
  width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 2px;
}

.desktop-icon .icon32 {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.desktop-label {
  color: #fff;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  padding: 0 2px;
  text-shadow: 1px 1px 0 #000;
}

.desktop-icon.selected .desktop-label {
  background: var(--navy);
  outline: 1px dotted #fff;
  outline-offset: -1px;
}

/* ── Application window ──────────────────────────────────────────────────── */
.window {
  background: var(--face);
  border: 1px solid var(--dark);
  box-shadow: inset 1px 1px var(--light), inset -1px -1px var(--shadow);
  padding: 3px;
}

.app {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 200px));
  height: min(772px, calc(100vh - 92px));
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.app.dragging { cursor: default; }

.app.minimized,
.app.gone { display: none; }

.app.maximized {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: calc(100vh - 30px) !important;
  transform: none !important;
}

/* Phones (portrait or landscape): the window fills the screen like a
   maximized one, and the desktop icons get out of the way. */
@media (max-width: 720px), (max-height: 520px) {
  .desktop-icons { display: none; }
  .app {
    left: 0;
    top: 0;
    transform: none;
    width: 100vw;
    height: calc(100vh - 30px);
    height: calc(100dvh - 30px);
  }
}

/* ── Title bar ───────────────────────────────────────────────────────────── */
.title-bar {
  height: 18px;
  flex: 0 0 18px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0 2px;
}

.title-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  image-rendering: pixelated;
}

.title-text {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.title-buttons { display: flex; gap: 2px; }

.title-btn {
  width: 16px;
  height: 14px;
  background: var(--face);
  box-shadow:
    inset -1px -1px var(--dark),
    inset 1px 1px var(--white),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--light);
  display: flex;
  align-items: center;
  justify-content: center;
}

.title-btn:active {
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
}

.title-btn.min i { width: 6px; height: 2px; background: var(--dark); margin-top: 7px; }
.title-btn.max i { width: 9px; height: 8px; border: 1px solid var(--dark); border-top-width: 2px; }
.title-btn.close i { width: 10px; height: 10px; position: relative; }
.title-btn.close i::before,
.title-btn.close i::after {
  content: "";
  position: absolute;
  left: 4px;
  top: -1px;
  width: 2px;
  height: 12px;
  background: var(--dark);
  transform: rotate(45deg);
}
.title-btn.close i::after { transform: rotate(-45deg); }

/* ── Menu bar ────────────────────────────────────────────────────────────── */
.menu-bar {
  display: flex;
  align-items: stretch;
  height: 20px;
  flex: 0 0 20px;
  position: relative;
  z-index: 30;
  padding: 1px 0;
}

.menu-item { position: relative; }

.menu-label {
  display: block;
  padding: 3px 8px 2px;
  font-size: 11px;
  line-height: 14px;
}

.menu-item.open > .menu-label,
.menu-item:hover > .menu-label {
  background: var(--navy);
  color: #fff;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 176px;
  background: var(--face);
  border: 1px solid var(--dark);
  box-shadow:
    inset 1px 1px var(--light),
    inset -1px -1px var(--shadow),
    3px 3px 0 rgba(0, 0, 0, 0.24);
  padding: 2px;
  z-index: 40;
}

.menu-item.open .dropdown { display: block; }

.drop-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 3px 18px;
  font-size: 11px;
  white-space: nowrap;
}

.drop-item:hover { background: var(--navy); color: #fff; }

.drop-item.disabled {
  color: var(--disabled);
  text-shadow: 1px 1px 0 #fff;
}
.drop-item.disabled:hover { background: transparent; color: var(--disabled); }

.shortcut { opacity: 0.75; }

.drop-sep {
  height: 2px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--white);
  margin: 3px 2px;
}

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
.toolbar {
  height: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-top: 1px solid var(--white);
  border-bottom: 1px solid var(--shadow);
}

.tool-btn {
  width: 23px;
  height: 21px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  background: var(--face);
  box-shadow:
    inset -1px -1px var(--dark),
    inset 1px 1px var(--white),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--light);
}

.tool-btn:active,
.tool-btn.open {
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
}

.tool-btn svg { width: 16px; height: 16px; }
.tool-btn.off svg { opacity: 0.35; }

.tool-sep {
  width: 2px;
  height: 19px;
  margin: 0 3px;
  border-left: 1px solid var(--shadow);
  border-right: 1px solid var(--white);
}

.tool-field {
  flex: 1;
  min-width: 0;
  height: 19px;
  margin-left: 3px;
  padding: 2px 5px;
  background: var(--face);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

/* ── Signal strip (the dark band below the danger line) ──────────────────── */
.strip-hud {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;              /* matches CFG.groundPad / H (96 / 800) */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 100%);
  border-top: 1px solid rgba(120, 220, 255, 0.18);
  font-family: "Lucida Console", "Courier New", monospace;
  color: #e8f0ff;
  text-shadow: 0 0 6px rgba(0, 200, 255, 0.25);
}

.strip-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.strip-cell + .strip-cell {
  border-left: 1px solid rgba(120, 220, 255, 0.16);
  padding-left: 16px;
}

.strip-center { align-items: center; text-align: center; }
.strip-right { align-items: flex-end; text-align: right; }

.strip-label {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: #6fc7e8;
  opacity: 0.9;
}

.strip-value {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* A practice stage's name: smaller, wrapped on up to 3 lines instead of cut off. */
.strip-value.strip-name {
  font-size: 14px;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media (max-width: 720px) {
  .strip-value.strip-name { font-size: 11px; }
}

.strip-gold { color: #ffd75e; text-shadow: 0 0 8px rgba(255, 200, 60, 0.35); }

.strip-sub {
  font-size: 10px;
  color: #8496b0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* The completed-wave beat: the centre readout turns gold for a moment. */
.strip-hud.flash .strip-center .strip-value { color: #ffe066; }
.strip-hud.flash .strip-center .strip-sub { color: #ffd75e; }
.strip-hud.flash .strip-center .strip-label { color: #ffd75e; }

@media (max-width: 720px) {
  .strip-hud { padding: 0 10px; gap: 8px; }
  .strip-value { font-size: 17px; }
  .strip-sub { font-size: 9px; }
}

/* ── Main screen (title / menu) ──────────────────────────────────────────── */
.main-screen {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(0, 22, 46, 0.22) 0%, rgba(0, 2, 8, 0.66) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.42));
}

body.phase-menu .main-screen { display: flex; }
body.phase-menu .strip-hud { opacity: 0; }

.strip-hud { transition: opacity 0.16s steps(2, end); }

.main-panel {
  width: min(830px, 96%);
  max-height: 96%;
  display: flex;
  flex-direction: column;
  background: var(--face);
  border: 1px solid var(--dark);
  box-shadow:
    inset 1px 1px var(--light),
    inset -1px -1px var(--shadow),
    6px 6px 0 rgba(0, 0, 0, 0.35);
  padding: 3px;
  overflow: hidden;
}

.main-titlebar {
  height: 20px;
  flex: 0 0 20px;
  background: var(--navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 700;
}

.main-version { font-weight: 400; opacity: 0.8; font-size: 10px; }

.main-body {
  display: grid;
  grid-template-columns: 1.18fr 1fr;
  gap: 20px;
  padding: 18px 20px 12px;
  overflow: auto;
}

.main-hero { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.main-brand { display: flex; align-items: center; gap: 12px; }

.main-icon { width: 44px; height: 44px; flex: 0 0 44px; image-rendering: pixelated; }

.main-wordmark {
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 38px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 1px;
  color: var(--navy);
  text-shadow: 1px 1px 0 #ffffff, 2px 2px 0 var(--shadow);
}

.main-wordmark span { color: var(--teal); }

.main-tagline {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: 2.4px;
  color: #404040;
}

.main-blurb {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #202020;
}

.main-label {
  display: block;
  font-size: 9px;
  letter-spacing: 1.4px;
  color: var(--navy);
  font-weight: 700;
  margin-bottom: 4px;
}

.mode-row { display: flex; flex-wrap: wrap; gap: 5px; }

.mode-row .mode-btn { height: 23px; padding: 0 10px; font-size: 11px; }

.main-mode-note { margin: 5px 0 0; font-size: 10px; color: #404040; min-height: 28px; }

.main-start {
  margin-top: 2px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 12px;
  background: var(--face);
  border: none;
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
  box-shadow:
    inset -1px -1px var(--dark),
    inset 1px 1px var(--white),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--light);
}

.main-start:hover { background: #d4d0c8; }
.main-start:active {
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
}

.main-start:focus-visible { outline: 1px dotted var(--dark); outline-offset: -5px; }

.main-start-label { font-size: 18px; font-weight: 700; color: var(--navy); letter-spacing: 0.5px; }

.main-start-key {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 6px;
  color: var(--ink);
  background: #ffffcc;
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
}

.main-hint { margin: 0; font-size: 9px; color: #505050; }
.main-hint b { color: var(--navy); }

/* Optional seed: one field, so the seed printed on the result / pause screen is
   something the player can actually act on. */
.main-seed { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.main-seed .main-label { margin: 0; flex: 0 0 auto; }
.seed-input {
  width: 104px;
  height: 21px;
  padding: 0 4px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink);
  background: #ffffff;
  border: none;
  outline: none;
  box-shadow:
    inset 1px 1px var(--shadow),
    inset -1px -1px var(--white),
    inset 2px 2px var(--dark),
    inset -2px -2px var(--light);
}
.seed-input:focus { outline: 1px dotted var(--dark); outline-offset: -3px; }
.main-seed-note { font-size: 9px; color: #505050; }

.main-menu { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.main-item {
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 8px;
  background: var(--face);
  border: none;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  box-shadow:
    inset -1px -1px var(--dark),
    inset 1px 1px var(--white),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--light);
}

.main-item:hover { background: var(--navy); color: #ffffff; }
.main-item:hover .main-item-note { color: #c8d4ff; }
.main-item:active {
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
}

.main-item-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.main-item-note {
  font-size: 9px;
  font-weight: 400;
  color: #606060;
  white-space: nowrap;
}

.main-stats {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--white);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
}

.main-stat {
  padding: 5px 6px 4px;
  border-right: 1px solid #d8d8d8;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.main-stat:last-child { border-right: none; }
.main-stat span { font-size: 8px; letter-spacing: 0.8px; color: var(--navy); }
.main-stat b { font-size: 15px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; }

.main-footer {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 8px 3px;
  border-top: 1px solid var(--shadow);
  font-size: 9px;
  color: #404040;
}

@media (max-width: 760px) {
  .main-body { grid-template-columns: 1fr; gap: 12px; padding: 12px 14px 8px; }
  .main-wordmark { font-size: 30px; }
  .main-blurb { display: none; }
  .main-stats { margin-top: 4px; }
}

@media (max-height: 560px) {
  .main-blurb { display: none; }
  .main-body { padding: 10px 14px 8px; gap: 12px; }
  .main-start { height: 38px; }
  .main-item { height: 27px; flex-basis: 27px; }
}

/* ── Playfield ───────────────────────────────────────────────────────────── */
.client {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 2px 1px 1px;
  background: #000020;
  overflow: hidden;
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
}

#game {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #000020;
}

/* The IME focus sink: it has to be a real focusable field for WebView2/Chrome
   to route composition events, but it must never be visible or clickable. */
.ime-sink {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: 0;
  opacity: 0.01;
  background: transparent;
  color: transparent;
  pointer-events: none;
  z-index: -1;
  outline: none;
}

/* ── Status bar ──────────────────────────────────────────────────────────── */
.status-bar {
  display: flex;
  gap: 2px;
  height: 21px;
  flex: 0 0 21px;
  padding: 1px 1px 0;
}

.status-panel {
  background: var(--face);
  padding: 3px 5px 2px;
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
}

.status-panel.grow {
  flex: 1;
  min-width: 0;
}

/* One readout per fact: the signal strip already owns the run clock and the
   mode, so the status bar does not repeat them. (The elements stay in the DOM
   because tests and the internals still read them.) */
#statusTime,
#statusMode {
  display: none;
}

/* Practice stages have their own HUD: the strip carries time, progress and the
   stage name; the status line is one state panel; there is no deck to show. */
body.practice #statusCombo,
body.practice #statusScore,
body.practice #statusWave,
body.practice #statusLives,
body.practice #statusShields,
body.practice #statusHeat,
body.practice #statusPressure,
body.practice #deckField,
body.practice #toolbar .tool-sep {
  display: none;
}

/* ── Modal dialogs ───────────────────────────────────────────────────────── */
.modal-layer {
  position: absolute;
  inset: 0;
  display: none;
  z-index: 5;
}
.modal-layer.open { display: block; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.dialog {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--face);
  border: 1px solid var(--dark);
  box-shadow:
    inset 1px 1px var(--light),
    inset -1px -1px var(--shadow),
    5px 5px 0 rgba(0, 0, 0, 0.25);
  padding: 3px;
  z-index: 6;
  max-width: calc(100% - 24px);
  max-height: calc(100% - 24px);
  overflow: auto;
}

.dialog.show {
  display: block;
  animation: dialog-in 0.12s steps(2, end) both;
}

.dialog-title {
  height: 18px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 0 3px;
  font-weight: 700;
  font-size: 11px;
}

.dialog-body {
  padding: 10px 12px 6px;
  font-size: 11px;
  line-height: 1.5;
}

.dialog-body p { margin: 0 0 6px; }
.dialog-body p:last-child { margin-bottom: 0; }

.dialog-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 6px 12px 10px;
}

.btn {
  min-width: 75px;
  height: 23px;
  padding: 1px 8px 0;
  background: var(--face);
  border: none;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink);
  box-shadow:
    inset -1px -1px var(--dark),
    inset 1px 1px var(--white),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--light);
  position: relative;
}

.btn:active {
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
  padding: 2px 7px 0 9px;
}

.btn.default { outline: 1px solid var(--dark); outline-offset: 1px; }

.btn:focus-visible { outline: 1px dotted var(--dark); outline-offset: -4px; }

.btn[disabled] {
  color: var(--disabled);
  text-shadow: 1px 1px 0 #fff;
}

/* Welcome */
.dlg-welcome { width: 430px; }

.welcome-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 14px 6px;
}

.welcome-icon { width: 32px; height: 32px; flex: 0 0 32px; }

.welcome-head { font-weight: 700; font-size: 12px; margin-bottom: 5px; }

.welcome-best { margin-top: 8px; color: var(--navy); font-weight: 700; }

/* Draft */
.dlg-draft { width: 660px; }

.draft-meta { margin: 0 0 8px; }

.draft-log {
  margin: 0 0 8px;
  padding: 5px 0 0;
  border-top: 1px solid var(--shadow);
  color: #404040;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 10px;
  line-height: 1.4;
  min-height: 19px;
}

.draft-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.draft-card {
  position: relative;
  min-height: 150px;
  padding: 8px;
  background: var(--face);
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: inset 1px 1px var(--white), inset -1px -1px var(--shadow);
}

.draft-card:hover {
  outline: 1px dotted var(--dark);
  outline-offset: -3px;
}

.draft-card .badge {
  align-self: flex-start;
  padding: 1px 4px;
  background: var(--navy);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.draft-card.boon .badge { background: #008000; }
.draft-card.gambit .badge { background: #808000; }
.draft-card.hex .badge { background: #800080; }

.draft-card .rare {
  position: absolute;
  top: 8px;
  right: 8px;
  color: #800000;
  font-size: 9px;
  font-weight: 700;
}

.draft-card .draft-name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  padding-right: 24px;
}

.draft-card .draft-desc {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink);
}

.draft-card .draft-key {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 10px;
  color: #404040;
}

.draft-card:nth-child(1) { animation: card-rise 0.24s steps(4, end) 0s both; }
.draft-card:nth-child(2) { animation: card-rise 0.24s steps(4, end) 0.06s both; }
.draft-card:nth-child(3) { animation: card-rise 0.24s steps(4, end) 0.12s both; }

.draft-held {
  margin-top: 8px;
  font-size: 11px;
  color: #404040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.draft-note {
  margin-top: 4px;
  font-size: 10px;
  color: #404040;
}

/* Pause */
.dlg-pause { width: 400px; }

.pause-body {
  padding: 12px 14px 4px;
  font-size: 11px;
  line-height: 1.5;
}

.pause-seed {
  padding: 3px 6px;
  margin: 0 0 9px;
  background: var(--face);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pause-note {
  margin: 0;
  color: var(--ink);
}

/* Records */
.dlg-records { width: 340px; }

.records-table {
  width: 100%;
  margin: 0 0 6px;
  border-collapse: collapse;
  background: var(--white);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
}

.records-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--face);
  vertical-align: baseline;
}

.records-table tr:last-child td { border-bottom: none; }

.records-table .rec-val {
  padding-left: 24px;
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

/* Message dialogs */
.dlg-message { width: 400px; }

.big-score {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 4px;
}

.dawn-score { color: #806000; }

.stats {
  font-size: 11px;
  color: #000;
  margin-bottom: 4px;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.held-line {
  margin-top: 4px;
  font-size: 10px;
  color: #404040;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Controls */
.dlg-help { width: 470px; }

.key-table { border-collapse: collapse; margin: 0 0 6px; }
.key-table td { padding: 2px 10px 2px 0; vertical-align: top; }
.key-table .key { font-weight: 700; color: var(--navy); white-space: nowrap; }

.fine-print { font-size: 10px; color: #404040; }

/* About */
.dlg-help .about-body {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
}

.about-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.about-head { font-weight: 700; font-size: 13px; }
.about-ver { color: #404040; margin-bottom: 6px; }

/* Quit */
.dlg-quit { width: 330px; }
.quit-body { display: flex; gap: 14px; align-items: flex-start; padding: 14px 14px 6px; }
.quit-icon { width: 32px; height: 32px; flex: 0 0 32px; }
.quit-line { margin: 0 0 4px; }

/* ── Taskbar ─────────────────────────────────────────────────────────────── */
.taskbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30px;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  background: var(--face);
  border-top: 1px solid var(--light);
  box-shadow: 0 -1px 0 var(--shadow);
  z-index: 50;
}

.start-btn {
  height: 23px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 7px 0 3px;
  font-weight: 700;
  background: var(--face);
  box-shadow:
    inset -1px -1px var(--dark),
    inset 1px 1px var(--white),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--light);
}

.start-btn:active,
.start-btn.open {
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
  padding: 2px 6px 0 4px;
}

.start-btn .flag { width: 16px; height: 16px; }

.task-divider {
  width: 2px;
  height: 21px;
  border-left: 1px solid var(--shadow);
  border-right: 1px solid var(--white);
}

.task-btn {
  height: 23px;
  max-width: 260px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px 0 4px;
  background: var(--face);
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.task-btn.hidden { display: none; }

/* When the app window is minimised the taskbar button pops back out (raised). */
.task-btn.raised {
  box-shadow:
    inset -1px -1px var(--dark),
    inset 1px 1px var(--white),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--light);
}

.taskbar-spacer { flex: 1; }

.clock {
  height: 21px;
  padding: 3px 8px 0;
  font-size: 11px;
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
}

/* ── Start menu ──────────────────────────────────────────────────────────── */
.start-menu {
  position: fixed;
  left: 2px;
  bottom: 30px;
  width: 198px;
  display: none;
  background: var(--face);
  border: 1px solid var(--dark);
  box-shadow:
    inset 1px 1px var(--light),
    inset -1px -1px var(--shadow),
    4px 4px 0 rgba(0, 0, 0, 0.25);
  padding: 2px;
  z-index: 60;
}

.start-menu.open { display: flex; }

.start-banner {
  width: 22px;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
}

.start-items { flex: 1; display: flex; flex-direction: column; }

.start-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  font-size: 11px;
}

.start-item:hover { background: var(--navy); color: #fff; }

.start-sep {
  height: 2px;
  border-top: 1px solid var(--shadow);
  border-bottom: 1px solid var(--white);
  margin: 3px 2px;
}

/* Phone dialogs: button rows wrap instead of overflowing the dialog, long lines
   wrap instead of being ellipsised, and touch targets are finger-sized. */
@media (max-width: 720px) {
  .dialog-buttons { flex-wrap: wrap; padding: 6px 8px 10px; }
  .dialog-buttons .btn { flex: 1 1 auto; min-width: 64px; height: 32px; }
  .pause-seed { white-space: normal; }
  .strip-sub { letter-spacing: 0; white-space: normal; line-height: 1.2; }
  .strip-cell + .strip-cell { padding-left: 8px; }
  .draft-card { padding-bottom: 22px; }
  .draft-card .draft-desc { overflow-wrap: anywhere; }
}

/* A dialog taller than the screen scrolls, with its buttons pinned in view. */
@media (max-width: 720px), (max-height: 520px) {
  .dialog-buttons { position: sticky; bottom: 0; background: var(--face); }
}

/* Landscape phone (about 360px tall): drop the toolbar and taskbar, and trim the
   main screen and draft so Start Run, every menu item and the Skip button show. */
@media (max-height: 520px) {
  .toolbar, .taskbar { display: none; }
  .app { height: 100vh; height: 100dvh; }
  .main-body { gap: 10px; padding: 8px 12px 4px; }
  .main-hero { gap: 6px; }
  .main-wordmark { font-size: 26px; }
  .main-mode-note, .main-hint, .main-seed-note, .main-stats, .main-tagline { display: none; }
  .main-icon { width: 34px; height: 34px; }
  .draft-log, .draft-note, .draft-held { display: none; }
  .draft-card { min-height: 0; padding: 6px 8px 20px; }
}

/* Phone status bar: the five readouts that matter share the width evenly. */
@media (max-width: 720px) {
  #statusMain, #statusHeat, #statusPressure { display: none; }
  .status-bar .status-panel { flex: 1 1 0; padding: 3px 2px 2px; font-size: 10px; text-align: center; }
}

/* A modal dialog turns the menu bar and toolbar into an inert backdrop,
   Win95-style - but the title-bar buttons (minimize / maximize / close) stay
   live on purpose: locking them while a dialog is up is infuriating when you
   just want to minimise the window or quit. */
.app.modal-open .menu-bar,
.app.modal-open .toolbar {
  pointer-events: none;
}

.app.modal-open .menu-label {
  color: var(--disabled);
}

/* ── Native (WebView2) embedded mode ────────────────────────────────────── */
body.embedded { background: #000; }

body.embedded .desktop { padding: 0; background: #000; }

body.embedded .desktop-icons,
body.embedded .taskbar {
  display: none !important;
}

body.embedded .app {
  left: 0 !important;
  top: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  transform: none !important;
  border-width: 0 !important;
}

body.embedded .app.maximized {
  height: 100vh !important;
}

/* ── Animation ───────────────────────────────────────────────────────────── */
@keyframes dialog-in {
  from { opacity: 0.3; transform: translate(-50%, -52%); }
  to   { opacity: 1;   transform: translate(-50%, -50%); }
}

@keyframes card-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════════════════════
   v1.2 FX shell — overlay, phase juice, state classes.
   Contract: #app carries inline custom props --fx-combo (0..20),
   --fx-danger (0..1), --fx-heat (0..5), --fx-lives (0..3), --fx-wave (1..99);
   body toggles phase-menu/playing/paused/draft/dawn/gameover plus
   fx-combo-hot, fx-danger, fx-low-life, fx-light and transient fx-milestone.
   Only transform, opacity and box-shadow are animated. No blur, no modern
   gradients. The overlay sits above the canvas and below .modal-layer (5).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── FX overlay ──────────────────────────────────────────────────────────── */
.fx-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.12s steps(2, end);
}

.fx-glow,
.fx-vignette,
.fx-scanlines,
.fx-noise {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Gold edge from combo/heat, red edge from danger. Cheap: one static shadow. */
.fx-glow {
  box-shadow:
    inset 0 0 34px rgba(255, 255, 0, calc(var(--fx-combo, 0) * 0.014 + var(--fx-heat, 0) * 0.012)),
    inset 0 0 52px rgba(255, 0, 0, calc(var(--fx-danger, 0) * 0.22));
}

.fx-glow::after,
.fx-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}

#fxGlow::after {
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), inset 0 0 70px rgba(255, 255, 0, 0.5);
}

.fx-vignette {
  box-shadow:
    inset 0 0 64px rgba(0, 0, 0, 0.5),
    inset 0 0 12px rgba(0, 0, 0, 0.42);
}

/* CRT scanlines: one repeating 1px/1px pattern, moved with transform only. */
.fx-scanlines {
  top: -4px;
  height: calc(100% + 4px);
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0,
    rgba(0, 0, 0, 0) 1px,
    rgba(0, 0, 0, 0.14) 1px,
    rgba(0, 0, 0, 0.14) 2px
  );
  animation: fx-scan 4s steps(4, end) infinite;
  will-change: transform;
}

@keyframes fx-scan {
  from { transform: translateY(0); }
  to   { transform: translateY(4px); }
}

/* Signal fleck: inline 2x2 SVG checker, low opacity, opacity-steps flicker. */
.fx-noise {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2'%3E%3Crect width='1' height='1' fill='%23ffffff'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23ffffff'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 4px 4px;
  image-rendering: pixelated;
  opacity: 0.03;
  animation: fx-noise 0.8s steps(2, end) infinite;
}

@keyframes fx-noise {
  0%, 100% { opacity: 0.02; }
  50%      { opacity: 0.045; }
}

/* ── State: combo / danger / low life ───────────────────────────────────── */
.fx-combo-hot #fxGlow {
  box-shadow:
    inset 0 0 36px rgba(255, 255, 0, min(0.5, calc(0.05 + var(--fx-combo, 0) * 0.022 + var(--fx-heat, 0) * 0.01))),
    inset 0 0 60px rgba(255, 0, 0, calc(var(--fx-danger, 0) * 0.3));
}

.fx-danger #fxGlow {
  box-shadow:
    inset 0 0 30px rgba(255, 0, 0, min(0.5, calc(0.12 + var(--fx-danger, 0) * 0.3))),
    inset 0 0 70px rgba(255, 0, 0, calc(var(--fx-danger, 0) * 0.22));
}

.fx-danger .fx-vignette::after {
  box-shadow: inset 0 0 34px rgba(255, 0, 0, 0.55);
  opacity: 0.24;
}

.fx-low-life .fx-vignette::after {
  box-shadow: inset 0 0 40px rgba(255, 0, 0, 0.65);
  opacity: 0.32;
}

/* Slow red/black title-bar blink while one life is left. */
.title-bar { position: relative; }

.fx-low-life .title-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff0000;
  opacity: 0;
  pointer-events: none;
  animation: fx-title-alarm 1.6s steps(2, end) infinite;
}

@keyframes fx-title-alarm {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.8; }
}

/* ── Phase states ───────────────────────────────────────────────────────── */
.phase-paused .fx-overlay,
.phase-draft .fx-overlay { opacity: 0.85; }

.phase-dawn .fx-overlay { opacity: 0.9; }

.phase-gameover .fx-vignette::after {
  box-shadow: inset 0 0 42px rgba(255, 0, 0, 0.7), inset 0 0 10px rgba(255, 0, 0, 0.5);
  animation: fx-red-pulse 1.2s steps(2, end) infinite;
}

.phase-dawn .fx-vignette::after {
  box-shadow: inset 0 0 50px rgba(255, 255, 0, 0.45);
  animation: fx-gold-pulse 2.4s steps(2, end) infinite;
}

@keyframes fx-red-pulse {
  0%, 100% { opacity: 0.28; }
  50%      { opacity: 0.8; }
}

@keyframes fx-gold-pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.55; }
}

/* One-shot milestone flash. JS adds .fx-milestone to body for ~0.6s. */
.fx-milestone #fxGlow::after {
  animation: fx-milestone 0.6s steps(6, end) both;
}

@keyframes fx-milestone {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  100% { opacity: 0; }
}

/* A modal dialog dims the effects layer a touch (Win95 inert frame). */
#app.modal-open .fx-overlay { opacity: 0.72; }

/* ── Status bar ─────────────────────────────────────────────────────────── */
.status-bar .status-panel { min-width: 0; }

#statusCombo {
  flex: 0 1 auto;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.fx-combo-hot #statusCombo {
  font-weight: 700;
  color: #808000;
  animation: combo-pulse 0.9s steps(2, end) infinite;
}

.fx-danger #statusCombo { color: #ff0000; }

@keyframes combo-pulse {
  0%, 100% { box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white); }
  50%      { box-shadow: inset 1px 1px #808000, inset -1px -1px #ffff00; }
}

.status-panel.flash-score {
  animation: flash-score 0.3s steps(2, end) both;
}

@keyframes flash-score {
  0%   { box-shadow: inset 0 0 0 24px #ffffff; }
  100% { box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white); }
}

/* ── Draft card juice ───────────────────────────────────────────────────── */
.draft-card {
  --edge: transparent;
  box-shadow:
    inset 4px 0 0 var(--edge),
    inset 1px 1px var(--white),
    inset -1px -1px var(--shadow);
  transition: transform 0.08s steps(2, end);
}

.draft-card.boon   { --edge: #00a000; }
.draft-card.gambit { --edge: #808000; }
.draft-card.hex    { --edge: #800080; }

.draft-card:hover,
.draft-card:focus-visible {
  animation: none;
  transform: translateY(-2px);
  box-shadow:
    2px 2px 0 #000000,
    inset 4px 0 0 var(--edge),
    inset 1px 1px var(--white),
    inset -1px -1px var(--shadow);
}

/* Rarity gets a hard 1px double outline, stepped not smooth. */
.draft-card:has(.rare),
.draft-card.rare {
  outline: 1px solid #800080;
  outline-offset: -3px;
}

.draft-card:has(.rare)::after,
.draft-card.rare::after {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid #c000c0;
  pointer-events: none;
  animation: rare-blink 0.9s steps(2, end) infinite;
}

@keyframes rare-blink {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* UPGRADE / NEW chips the Lead may append inside a draft card. */
.draft-card .tag-new,
.draft-card .tag-up {
  align-self: flex-start;
  padding: 0 3px 1px;
  background: #ffff00;
  color: #000000;
  border: 1px solid #000000;
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
  letter-spacing: 0.5px;
}

.draft-card .tag-up { background: #008080; color: #ffffff; }

.draft-card.picked {
  outline: 2px solid #ffff00;
  outline-offset: -3px;
  animation: draft-picked 0.22s steps(3, end) both;
}

@keyframes draft-picked {
  0%   { transform: translateY(0); box-shadow: inset 0 0 0 3px #ffffff; }
  50%  { transform: translateY(-3px); }
  100% { transform: translateY(0); box-shadow: inset 0 0 0 3px #ffff00; }
}

/* ── Dialog polish ──────────────────────────────────────────────────────── */
.dialog-title { position: relative; overflow: hidden; }

.dialog.show .dialog-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #ffffff;
  opacity: 0.4;
  transform: scaleX(0);
  transform-origin: left center;
  animation: dialog-sweep 0.18s steps(4, end) both;
}

@keyframes dialog-sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Reduced-effects mode (.fx-light toggled by View > Effects) ─────────── */
.fx-light .fx-scanlines,
.fx-light .fx-noise { display: none; }

.fx-light #fxGlow { box-shadow: none; }

.fx-light .fx-vignette {
  box-shadow:
    inset 0 0 28px rgba(0, 0, 0, 0.38),
    inset 0 0 8px rgba(0, 0, 0, 0.3);
}

.fx-light #fxGlow::after,
.fx-light .fx-vignette::after { animation: none !important; }

/* ── Difficulty (welcome dialog) ────────────────────────────────────────── */
.welcome-mode {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0;
}

.welcome-mode-label {
  font-size: 10px;
  color: #404040;
  margin-right: 2px;
}

.mode-btn {
  min-width: 0;
  height: 20px;
  padding: 0 7px;
  font-size: 10px;
  white-space: nowrap;
  box-shadow:
    inset -1px -1px var(--dark),
    inset 1px 1px var(--white),
    inset -2px -2px var(--shadow),
    inset 2px 2px var(--light);
}

.mode-btn[aria-pressed="true"] {
  background: var(--navy);
  color: #ffffff;
  font-weight: 700;
  box-shadow:
    inset 1px 1px var(--dark),
    inset -1px -1px var(--white),
    inset 2px 2px var(--shadow),
    inset -2px -2px var(--light);
}

.welcome-mode-note {
  margin: 4px 0 0;
  font-size: 10px;
  color: #404040;
}

/* ── Splits dialog ──────────────────────────────────────────────────────── */
.dlg-splits { width: 376px; }

.splits-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 8px;
  background: var(--white);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
  font-variant-numeric: tabular-nums;
}

.splits-table th {
  padding: 3px 6px;
  background: var(--face);
  text-align: right;
  font-size: 10px;
  font-weight: 700;
  color: var(--navy);
  border-bottom: 1px solid var(--shadow);
}

.splits-table th:first-child { text-align: left; }

.splits-table td {
  padding: 2px 6px;
  font-size: 11px;
  text-align: right;
  border-bottom: 1px solid var(--face);
}

.splits-table td:first-child { text-align: left; font-weight: 700; }

.splits-table tr.done td { color: var(--ink); }
.splits-table tr.todo td { color: var(--disabled); }
.splits-table td.pb { color: var(--navy); font-weight: 700; }

/* ── Achievements dialog ────────────────────────────────────────────────── */
.dlg-achievements { width: 470px; }

.ach-head {
  margin: 0 0 8px;
  padding: 3px 6px;
  background: var(--face);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
  font-weight: 700;
  color: var(--navy);
}

.ach-list {
  max-height: 300px;
  overflow: auto;
  background: var(--white);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
  margin: 0 0 8px;
}

.ach-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 5px 7px;
  border-bottom: 1px solid var(--face);
}

.ach-row:last-child { border-bottom: none; }

.ach-mark {
  flex: 0 0 18px;
  height: 18px;
  margin-top: 1px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  line-height: 18px;
  color: var(--dark);
  background: var(--face);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
}

.ach-row.unlocked .ach-mark {
  background: var(--navy);
  color: #ffff00;
}

.ach-name { font-weight: 700; font-size: 11px; }
.ach-desc { font-size: 10px; color: #404040; line-height: 1.35; }
.ach-row.locked .ach-name { color: var(--disabled); }
.ach-when { font-size: 9px; color: var(--disabled); }

/* ── Achievement toasts ─────────────────────────────────────────────────── */
.toast-stack {
  position: absolute;
  right: 10px;
  bottom: calc(21px + 12% + 8px);   /* clear of the status bar and signal strip */
  z-index: 7;
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  pointer-events: none;
}

.toast {
  width: 270px;
  background: var(--face);
  border: 1px solid var(--dark);
  box-shadow:
    inset 1px 1px var(--light),
    inset -1px -1px var(--shadow),
    3px 3px 0 rgba(0, 0, 0, 0.28);
  animation: toast-in 0.18s steps(3, end) both;
}

.toast.out { animation: toast-out 0.2s steps(3, end) both; }

.toast-title {
  height: 16px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  padding: 0 4px;
}

.toast-body {
  display: flex;
  gap: 7px;
  padding: 6px 7px;
  font-size: 10px;
  line-height: 1.35;
}

.toast-mark {
  flex: 0 0 20px;
  height: 20px;
  background: var(--navy);
  color: #ffff00;
  font-weight: 700;
  text-align: center;
  line-height: 20px;
}

.toast-name { font-weight: 700; margin-bottom: 1px; }
.toast-desc { color: #404040; }

@keyframes toast-in {
  from { transform: translateX(28px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

@keyframes toast-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(28px); opacity: 0; }
}

/* ── Accessibility ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fx-scanlines,
  .fx-noise { animation: none !important; }

  .fx-noise { opacity: 0.02; }

  #fxGlow::after,
  .fx-vignette::after,
  .fx-low-life .title-bar::after,
  .fx-combo-hot #statusCombo,
  .status-panel.flash-score,
  .draft-card.picked,
  .draft-card:has(.rare)::after,
  .draft-card.rare::after,
  .dialog.show .dialog-title::after { animation: none !important; }

  .dialog.show { animation: none; }

  .toast, .toast.out { animation: none !important; }

  .draft-card:nth-child(n) { animation: none; }

  .fx-overlay,
  .draft-card { transition: none; }
}

/* ── Custom Stage ───────────────────────────────────────────────────────── */
/* A practice editor: one name field, one monospace textarea, a layout choice
   and two toggles. Sized so the whole dialog clears an 800px-tall window. */
.dlg-custom {
  width: 560px;
  max-height: calc(100% - 24px);
}

.dlg-custom .dialog-body { padding: 10px 12px 4px; }

.custom-field {
  display: flex;
  flex-direction: column;
  margin: 0 0 8px;
}

/* Same sunken single-line well as the seed field on the main screen. */
.custom-name {
  width: 100%;
  height: 21px;
  padding: 0 4px;
  font-family: inherit;
  font-size: 12px;
  color: var(--ink);
  background: var(--white);
  border: none;
  outline: none;
  box-shadow:
    inset 1px 1px var(--shadow),
    inset -1px -1px var(--white),
    inset 2px 2px var(--dark),
    inset -2px -2px var(--light);
}

.custom-name:focus { outline: 1px dotted var(--dark); outline-offset: -3px; }
.custom-name::placeholder { color: var(--disabled); }

.custom-text-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
}

.custom-text-head .main-label { margin-bottom: 3px; }

.custom-clean {
  min-width: 0;
  height: 19px;
  margin-bottom: 3px;
  padding: 0 7px 0;
  font-size: 10px;
}

.custom-head-btns { display: inline-flex; gap: 4px; }

.custom-text {
  display: block;
  width: 100%;
  height: 160px;
  min-height: 96px;
  max-height: 280px;
  margin: 0 0 8px;
  padding: 3px 5px;
  resize: vertical;
  font-family: "Lucida Console", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--white);
  border: none;
  outline: none;
  box-shadow:
    inset 1px 1px var(--shadow),
    inset -1px -1px var(--white),
    inset 2px 2px var(--dark),
    inset -2px -2px var(--light);
}

.custom-text:focus { outline: 1px dotted var(--dark); outline-offset: -3px; }
.custom-text::placeholder { color: var(--disabled); }

.custom-options {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 24px;
}

.custom-option {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.custom-option .main-label { margin-bottom: 3px; }

/* Checks sit on the same baseline as the LAYOUT buttons beside them. */
.custom-checks {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding-top: 15px;
}

.custom-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 15px;
  white-space: nowrap;
  cursor: pointer;
}

.custom-check input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  flex: 0 0 13px;
}

.custom-meta {
  margin: 8px 0 0;
  min-height: 15px;
  font-size: 10px;
  line-height: 15px;
  color: #404040;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Saved stages: flat Win95 list buttons inside a sunken well. */
.custom-saved {
  margin: 6px 0 0;
  max-height: 92px;
  overflow-y: auto;
  padding: 2px;
  background: var(--white);
  box-shadow: inset 1px 1px var(--shadow), inset -1px -1px var(--white);
}

.custom-saved:empty { display: none; }

.custom-saved-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 2px 5px;
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 11px;
  line-height: 15px;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.custom-saved-item + .custom-saved-item { margin-top: 1px; }

.custom-saved-item:hover,
.custom-saved-item.selected {
  background: var(--navy);
  color: var(--white);
}

.custom-saved-item.selected {
  outline: 1px dotted var(--white);
  outline-offset: -1px;
}

.custom-saved-empty {
  padding: 4px 5px;
  font-size: 10px;
  line-height: 15px;
  color: var(--disabled);
}

.dlg-custom .fine-print {
  margin: 8px 0 0;
  line-height: 1.35;
}

/* Disabled controls keep the Win95 etched-grey look. */
.custom-name[disabled],
.custom-text[disabled] {
  background: var(--face);
  color: var(--disabled);
}

#dlgCustom .mode-btn[disabled],
#dlgCustom .custom-check input[disabled] + span {
  color: var(--disabled);
  text-shadow: 1px 1px 0 var(--white);
}

#dlgCustom .mode-btn[disabled] { cursor: default; }

#dlgCustom .custom-saved-item[disabled] {
  color: var(--disabled);
  background: transparent;
  cursor: default;
}

/* Short windows: trim the editor so the dialog still clears the status bar. */
@media (max-height: 700px) {
  .dlg-custom { width: 520px; }
  .custom-text { height: 120px; min-height: 80px; }
  .custom-saved { max-height: 68px; }
}