/* Rubik ships with the game (SIL Open Font License, see fonts/OFL.txt), so
   it works offline in the apps and makes no third-party requests. */
@font-face {
  font-family: 'Rubik';
  src: url('../fonts/Rubik-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --paper: #f4f1de;
  --paper-2: #fbfaf1;
  --ink: #2a2c40;
  --navy: #3d405b;
  --muted: #7b7e93;
  --line: rgba(42, 44, 64, 0.08);
  --card: #ffffff;
  --coral: #e07a5f;
  --coral-dark: #c96650;
  --sage: #81b29a;
  --sage-dark: #4e8a6e;
  --sand: #f2cc8f;
  --sand-dark: #c9922e;
  --shadow-sm: 0 2px 6px rgba(42, 44, 64, 0.06), 0 1px 2px rgba(42, 44, 64, 0.05);
  --shadow: 0 10px 30px rgba(42, 44, 64, 0.1), 0 2px 6px rgba(42, 44, 64, 0.05);
  --shadow-lg: 0 24px 60px rgba(42, 44, 64, 0.18), 0 4px 12px rgba(42, 44, 64, 0.06);
  --radius: 22px;
  --btn-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -2px 0 rgba(150, 60, 40, 0.18), 0 10px 22px -8px rgba(201, 102, 80, 0.75);
  --btn-primary-shadow-pressed: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(150, 60, 40, 0.18), 0 4px 10px -6px rgba(201, 102, 80, 0.7);
  --font: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  background: radial-gradient(1200px 800px at 50% 40%, var(--paper-2), var(--paper) 70%);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
}

button:disabled {
  cursor: default;
}

.ico {
  width: 20px;
  height: 20px;
  flex: none;
}

#scene {
  position: fixed;
  inset: 0;
  z-index: 0;
}

#app {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#app > * {
  pointer-events: auto;
}

/* ---------- top bar ---------- */

.topbar {
  position: absolute;
  top: 18px;
  left: 22px;
  right: 22px;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: none;
}

.topbar > * {
  pointer-events: auto;
}

.spacer {
  flex: 1;
  pointer-events: none;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s;
}

.pill:hover,
.round:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.level-pill {
  height: 52px;
  padding: 0 18px 0 8px;
  gap: 12px;
}

.lvl-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-weight: 800;
}

.lvl-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.lvl-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.lvl-title {
  font-size: 17px;
  font-weight: 700;
}

.lvl-stars {
  display: inline-flex;
  gap: 1px;
}

.lvl-stars .ico,
.stars .ico {
  width: 16px;
  height: 16px;
  fill: #e6e0cc;
  stroke: none;
}

.lvl-stars .ico.on,
.stars .ico.on {
  fill: var(--sand-dark);
}

#codex-btn .ico {
  color: var(--sand-dark);
}

.round {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s;
}

/* ---------- goal row ---------- */

.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.goal {
  position: absolute;
  top: 84px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 8px 7px 18px;
  border-radius: 999px;
  max-width: calc(100vw - 44px);
  width: max-content;
}

.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  white-space: nowrap;
}

.goal ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.goal li {
  display: flex;
  gap: 7px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  padding: 7px 14px 7px 9px;
  border-radius: 999px;
  background: #f6f4ec;
  transition: background 0.3s, color 0.3s;
}

.goal li .ico {
  width: 17px;
  height: 17px;
  color: #c9c3ad;
}

.goal li.done {
  background: #e2efe8;
  color: var(--sage-dark);
}

.goal li.done .ico {
  color: var(--sage-dark);
}

/* The robot's task first (the setting), then what you want from it. One
   row when it fits; otherwise "You want" moves to a second row, whole. */
@media (min-width: 761px) {
  .goal:has(.goal-task:not([hidden])) {
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 20px;
    row-gap: 4px;
  }
}

.goal-task,
.goal-want {
  display: flex;
  align-items: center;
  gap: 10px;
}
.goal-want[hidden] {
  display: none;
}
/* With no "You want" under it, the task needs no rule beneath it. */
.goal:has(.goal-want[hidden]) .goal-task {
  padding-bottom: 0;
  border-bottom: 0;
}

.goal-task .eyebrow {
  color: var(--muted);
}

.goal-task b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- status (training / replay) ---------- */

.status {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 14px;
  height: 52px;
  padding: 0 8px 0 20px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  box-shadow: var(--shadow);
  font-weight: 500;
  white-space: nowrap;
  animation: drop 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

@keyframes drop {
  from {
    transform: translate(-50%, -20px);
    opacity: 0;
  }
}

.status b {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.status .score {
  font-size: 24px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  min-width: 56px;
}

.status .coin {
  color: var(--sand);
}

.status .spark {
  width: 110px;
  height: 28px;
}

.status .mini {
  height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.status .mini:hover {
  background: rgba(255, 255, 255, 0.24);
}

.status .mini .ico {
  width: 14px;
  height: 14px;
}

.pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--sage);
  box-shadow: 0 0 0 0 rgba(129, 178, 154, 0.7);
  animation: pulse 1.2s infinite;
}

@keyframes pulse {
  70% {
    box-shadow: 0 0 0 10px rgba(129, 178, 154, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(129, 178, 154, 0);
  }
}

/* ---------- dock: caption, hand, train ---------- */

.dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 22px 20px;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.3, 1.2, 0.4, 1), opacity 0.25s;
}

.dock > * {
  pointer-events: auto;
}

.dock.away {
  transform: translateY(110%);
  opacity: 0;
}

.caption {
  margin: 0 auto 12px;
  max-width: 640px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
  min-height: 21px;
  pointer-events: none;
}

.caption .ico {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  color: var(--sand-dark);
  margin-right: 4px;
}

.caption.hint {
  color: var(--ink);
}

.dock-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
}

.hand {
  display: flex;
  gap: 12px;
  padding: 10px 4px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hand::-webkit-scrollbar {
  display: none;
}

.rule-card {
  position: relative;
  flex: none;
  width: 168px;
  min-height: 192px;
  padding: 14px 14px 12px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s cubic-bezier(0.3, 1.4, 0.4, 1), box-shadow 0.2s, opacity 0.2s;
  animation: deal 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes deal {
  from {
    transform: translateY(30px) rotate(4deg);
    opacity: 0;
  }
}

.rule-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

.hand.busy .rule-card {
  transform: none;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  margin-bottom: 12px;
}

.card-icon .ico {
  width: 24px;
  height: 24px;
}

.kind-sensor .card-icon {
  background: #e7e8f1;
  color: var(--navy);
}
.kind-goal .card-icon {
  background: #e2efe8;
  color: var(--sage-dark);
}
.kind-penalty .card-icon {
  background: #fbe5de;
  color: var(--coral-dark);
}
.kind-cost .card-icon {
  background: #fbf0d9;
  color: var(--sand-dark);
}

.card-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.25;
}

.card-detail {
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.35;
  color: var(--muted);
  flex: 1;
}

.card-value {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f6f4ec;
  border-radius: 14px;
  padding: 4px;
}

.card-value .step {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  color: var(--navy);
}

.card-value .step:hover {
  background: var(--navy);
  color: #fff;
}

.card-value .step:disabled {
  opacity: 0.35;
  background: var(--card);
  color: var(--navy);
}

.card-value .step .ico {
  width: 16px;
  height: 16px;
}

.val {
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.val.pos {
  color: var(--sage-dark);
}

.val.neg {
  color: var(--coral-dark);
}

.val.earned {
  color: var(--navy);
}

.val-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}

.card-x {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #b9b6a8;
}

.card-x:hover {
  background: #f6f4ec;
  color: var(--coral-dark);
}

.card-x .ico {
  width: 16px;
  height: 16px;
}

.hand.busy .card-x,
.hand.busy .step {
  visibility: hidden;
}

.rule-card.pay {
  animation: pay 0.45s ease-out;
}

.rule-card.charge {
  animation: charge 0.45s ease-out;
}

@keyframes pay {
  30% {
    transform: translateY(-10px) scale(1.04);
    box-shadow: 0 0 0 4px rgba(129, 178, 154, 0.55), var(--shadow-lg);
  }
}

@keyframes charge {
  30% {
    transform: translateY(-4px) rotate(-2deg);
    box-shadow: 0 0 0 4px rgba(224, 122, 95, 0.5), var(--shadow-lg);
  }
}

.add-card {
  flex: none;
  width: 130px;
  min-height: 192px;
  border-radius: 20px;
  border: 2px dashed #d8d3c1;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.add-card:hover:not(:disabled) {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(255, 255, 255, 0.5);
}

.add-card:disabled {
  opacity: 0.45;
}

.add-card .plus {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.add-card small {
  font-weight: 500;
  font-size: 12px;
}

.train-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-bottom: 4px;
}

.train-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 168px;
  height: 64px;
  padding: 0 28px 0 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ec8f74 0%, #dc6d51 100%);
  color: #fff;
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.01em;
  box-shadow: var(--btn-primary-shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s, color 0.2s;
}

.train-btn #train-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.train-btn .ico {
  width: 22px;
  height: 22px;
}

.train-btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
  box-shadow: var(--btn-primary-shadow-pressed);
}

/* Busy: it says what's happening, flat and muted, with a soft pulse. */
.train-btn:disabled {
  background: #ebe6d8;
  color: #8c8672;
  box-shadow: inset 0 0 0 1px rgba(42, 44, 64, 0.06);
}

.train-btn:disabled #train-icon {
  background: rgba(42, 44, 64, 0.06);
  animation: busy-pulse 1.4s ease-in-out infinite;
}

@keyframes busy-pulse {
  50% {
    opacity: 0.45;
  }
}

.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--navy);
  transition: background 0.15s, color 0.15s, transform 0.12s;
}

.text-btn:active:not(:disabled) {
  transform: scale(0.97);
}

.text-btn:disabled {
  opacity: 0.4;
}

.text-btn .ico {
  width: 17px;
  height: 17px;
  color: var(--sand-dark);
}

/* ---------- buttons (docs/button-design.md) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.005em;
  white-space: nowrap;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.15s, filter 0.15s;
}

.btn .ico {
  flex: none;
  width: 18px;
  height: 18px;
}

.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.97);
}

.btn:disabled {
  opacity: 0.45;
  box-shadow: none;
}

/* Primary: the one thing to do next. */
.btn.primary {
  background: linear-gradient(180deg, #ec8f74 0%, #dc6d51 100%);
  color: #fff;
  box-shadow: var(--btn-primary-shadow);
}

.btn.primary:active:not(:disabled) {
  box-shadow: var(--btn-primary-shadow-pressed);
}

/* Strong / selected. */
.btn.dark {
  background: linear-gradient(180deg, #4a4d6b 0%, #353851 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 18px -8px rgba(42, 44, 64, 0.6);
}

/* Secondary: a real choice, but not the main one. */
.btn.ghost {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(42, 44, 64, 0.12), 0 1px 2px rgba(42, 44, 64, 0.06);
}

.btn.big {
  height: 58px;
  padding: 0 34px;
  font-size: 18px;
}

.btn.big .ico {
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .btn.primary:hover:not(:disabled),
  .train-btn:hover:not(:disabled) {
    filter: brightness(1.04);
    transform: translateY(-1px);
  }
  .btn.ghost:hover:not(:disabled) {
    box-shadow: inset 0 0 0 1px rgba(42, 44, 64, 0.22), 0 4px 10px -4px rgba(42, 44, 64, 0.18);
  }
  .btn.dark:hover:not(:disabled) {
    filter: brightness(1.08);
  }
  .text-btn:hover:not(:disabled) {
    background: rgba(42, 44, 64, 0.06);
  }
}

/* Keyboard focus: a clear ring on every kind of button. */
.btn:focus-visible,
.train-btn:focus-visible,
.text-btn:focus-visible,
.pill:focus-visible,
.round:focus-visible,
.status .mini:focus-visible,
.card-info:focus-visible {
  outline: 3px solid var(--sand);
  outline-offset: 2px;
}

/* ---------- stamp over the room ---------- */

.stamp {
  position: fixed;
  z-index: 0;
  transform: translate(-50%, -50%) rotate(-9deg);
  padding: 8px 26px;
  border: 6px solid currentColor;
  border-radius: 18px;
  font-weight: 900;
  font-size: 54px;
  letter-spacing: 0.04em;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.5);
  animation: slam 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) both, settle 0.6s ease 1.6s forwards;
}

@keyframes settle {
  to {
    opacity: 0.28;
    transform: translate(-50%, -50%) rotate(-9deg) scale(0.9);
  }
}

.stamp.gamed {
  color: var(--coral);
}

.stamp.aligned {
  color: var(--sage-dark);
}

@keyframes slam {
  0% {
    transform: translate(-50%, -50%) rotate(-20deg) scale(2.4);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -50%) rotate(-8deg) scale(0.94);
    opacity: 1;
  }
}

/* ---------- verdict sheet ---------- */

.sheet {
  position: absolute;
  left: 50%;
  bottom: 22px;
  width: min(860px, calc(100vw - 44px));
  transform: translateX(-50%);
  background: var(--card);
  border-radius: 28px;
  box-shadow: var(--shadow-lg);
  padding: 22px 24px 20px;
  animation: rise 0.45s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

@keyframes rise {
  from {
    transform: translate(-50%, 60px);
    opacity: 0;
  }
}

.sheet-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 24px;
  align-items: start;
}

.verdict-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.verdict-tag.gamed {
  background: #fbe5de;
  color: var(--coral-dark);
}

.verdict-tag.aligned {
  background: #e2efe8;
  color: var(--sage-dark);
}

.sheet h2 {
  margin: 10px 0 4px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sheet .sub {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}

.sheet .sub b {
  color: var(--ink);
}

.lh-list {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.lh {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: #fbf8f1;
  animation: pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes pop {
  from {
    transform: scale(0.94);
    opacity: 0;
  }
}

.lh-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: #fbe5de;
  color: var(--coral-dark);
}

.lh-icon .ico {
  width: 24px;
  height: 24px;
}

.lh h3 {
  margin: 1px 0 3px;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lh p {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.35;
}

.lh .lesson {
  margin-top: 5px;
  color: var(--sage-dark);
  font-weight: 500;
}

.new-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 999px;
  background: var(--sand);
  color: #6b4a12;
}

.breakdown-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 4px 0 10px;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 8px;
  border-radius: 999px;
  background: #f6f4ec;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.chip .ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

.chip.pos {
  color: var(--sage-dark);
}

.chip.neg {
  color: var(--coral-dark);
}

.big-score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 18px 0 14px;
}

.big-score strong {
  font-size: 40px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.big-score span {
  color: var(--muted);
  font-weight: 500;
}

.sheet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.stars {
  display: flex;
  gap: 6px;
  margin: 14px 0 6px;
}

.stars .ico {
  width: 44px;
  height: 44px;
  animation: starpop 0.5s cubic-bezier(0.2, 1.8, 0.4, 1) both;
}

@keyframes starpop {
  from {
    transform: scale(0) rotate(-45deg);
  }
}

/* ---------- toast ---------- */

.toast {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px 10px 10px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: translateX(-50%);
}

.toast.show {
  animation: toast 3.2s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}

@keyframes toast {
  0% {
    transform: translate(-50%, -120px);
  }
  10%,
  86% {
    transform: translate(-50%, 0);
  }
  100% {
    transform: translate(-50%, -120px);
  }
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
}

.toast small {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sand);
}

.toast b {
  font-size: 16px;
}

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

.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(42, 44, 64, 0.35);
  animation: fade 0.2s ease-out;
}
/* Blurring the moving room behind a pop-up is redone every frame: computers only. */
@media (hover: hover) {
  .modal {
    backdrop-filter: blur(6px);
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

.modal-card {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  background: var(--paper-2);
  border-radius: 30px;
  box-shadow: var(--shadow-lg);
  padding: 28px;
  animation: rise-in 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both;
}

@keyframes rise-in {
  from {
    transform: translateY(40px) scale(0.97);
    opacity: 0;
  }
}

.modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
}

.modal-card h2 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.modal-card .lead {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.45;
}

.room-badge {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.mini-hand {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 6px 0 18px;
}

.mini-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.mini-card .card-icon {
  width: 36px;
  height: 36px;
  margin: 0;
  border-radius: 11px;
}

.mini-card .card-icon .ico {
  width: 20px;
  height: 20px;
}

.mini-card .val {
  font-size: 16px;
  margin-left: 6px;
}

.warn {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--coral-dark);
  font-weight: 600;
  margin: 0 0 20px;
}

.modal-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.room-card {
  text-align: left;
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}

.room-card:hover:not(:disabled) {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.room-card.current {
  box-shadow: 0 0 0 3px var(--coral), var(--shadow);
}

.room-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--paper);
}

.room-card .meta {
  padding: 12px 14px 14px;
}

.room-card .num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.room-card .name {
  display: block;
  font-weight: 700;
  font-size: 16px;
  margin: 2px 0 6px;
}

.room-card .stars {
  margin: 0;
  gap: 2px;
}

.room-card .stars .ico {
  width: 18px;
  height: 18px;
  animation: none;
}

.room-card.locked {
  opacity: 0.6;
}

.room-card.locked img {
  filter: grayscale(1) blur(2px);
}

.lock-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

.lock-note .ico {
  width: 14px;
  height: 14px;
}

.codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.codex-card {
  padding: 16px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.codex-card .lh-icon {
  margin-bottom: 10px;
}

.codex-card h3 {
  margin: 0 0 4px;
  font-size: 16px;
}

.codex-card p {
  margin: 0;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.4;
}

.codex-card .lesson {
  margin-top: 6px;
  color: var(--sage-dark);
  font-weight: 500;
}

.codex-card.missing {
  background: transparent;
  box-shadow: inset 0 0 0 2px #e4dfcc;
}

.codex-card.missing .lh-icon {
  background: #ece8da;
  color: #b3ad98;
}

.codex-card.missing h3 {
  color: #b3ad98;
}

.progress {
  height: 10px;
  border-radius: 999px;
  background: #ebe6d4;
  overflow: hidden;
  margin: 0 0 22px;
}

.progress > i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sage);
}

.picker-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.picker-grid .rule-card {
  cursor: pointer;
  text-align: left;
  min-height: 150px;
}

/* ---------- title screen ---------- */

.title-screen {
  position: absolute;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: min(640px, 92vw);
}

.logo {
  margin: 0;
  font-size: clamp(56px, 11vw, 112px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 0.95;
  color: var(--navy);
  animation: logo 0.8s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.logo .hole {
  color: var(--coral);
}

@keyframes logo {
  from {
    transform: translateY(-20px) scale(0.92);
    opacity: 0;
  }
}

.tagline {
  margin: 14px auto 22px;
  font-size: clamp(15px, 2.2vw, 18px);
  line-height: 1.5;
  color: var(--muted);
}

.title-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

body.on-title #topbar,
body.on-title #goal,
body.on-title #dock,
body.on-title #status {
  display: none !important;
}

/* ---------- short desktop windows ---------- */

@media (min-width: 761px) and (max-height: 820px) {
  .rule-card {
    min-height: 158px;
    width: 160px;
    padding: 12px;
  }
  .card-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
  }
  .card-detail {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: none;
    max-height: 2.7em;
    margin-bottom: auto;
  }
  .add-card {
    min-height: 158px;
  }
  .train-btn {
    height: 56px;
  }
  .caption {
    margin-bottom: 6px;
  }
  .dock {
    padding-bottom: 14px;
  }
}

/* ---------- mobile ---------- */

@media (max-width: 760px) {
  .topbar {
    top: 12px;
    left: 12px;
    right: 12px;
    gap: 8px;
  }
  .level-pill {
    height: 46px;
    padding-right: 12px;
    gap: 8px;
  }
  .lvl-num {
    width: 32px;
    height: 32px;
  }
  .lvl-title {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 44vw;
  }
  .lvl-num {
    font-size: 13px;
  }
  .lvl-stars {
    display: none;
  }
  .pill {
    height: 40px;
    padding: 0 12px;
  }
  .round {
    width: 40px;
    height: 40px;
  }
  .goal {
    top: 62px;
    left: 12px;
    right: 12px;
    transform: none;
    width: auto;
    max-width: none;
    border-radius: 18px;
    padding: 8px 8px 8px 12px;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }
  .goal li {
    font-size: 12.5px;
    padding: 5px 10px 5px 7px;
  }
  .goal li .ico {
    width: 14px;
    height: 14px;
  }
  /* The task on its own line; "You want" beside its goals. */
  .goal-task {
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--line);
  }
  .goal-task b {
    font-size: 13.5px;
    line-height: 1.3;
    white-space: normal;
  }
  .goal-want {
    align-items: flex-start;
    gap: 8px;
  }
  .goal-want .eyebrow {
    padding-top: 6px;
  }
  /* During a run the status bar covers the Train button (it can't be pressed
     then): Skip in thumb reach, and the top of the room free for bubbles. */
  .status {
    top: auto;
    bottom: 14px;
    left: 14px;
    right: 14px;
    z-index: 2;
    transform: none;
    height: 58px;
    gap: 10px;
    padding-left: 16px;
    animation-name: rise-in;
  }
  .status .mini {
    height: 44px;
    padding: 0 16px;
  }
  .status .mini:first-of-type {
    margin-left: auto;
  }
  .status .score {
    font-size: 20px;
    min-width: 44px;
  }
  .status .spark {
    width: 70px;
  }
  .dock {
    padding: 0 0 14px;
  }
  .caption {
    padding: 0 16px;
    font-size: 13.5px;
    margin-bottom: 6px;
  }
  .dock-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .hand {
    padding: 8px 14px 6px;
  }
  .rule-card {
    width: 140px;
    min-height: 150px;
    padding: 11px;
  }
  .card-detail {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: none;
    max-height: 2.7em;
    margin-bottom: auto;
  }
  .card-icon {
    width: 38px;
    height: 38px;
    margin-bottom: 8px;
  }
  .card-detail {
    font-size: 11.5px;
  }
  .add-card {
    width: 104px;
    min-height: 150px;
  }
  .train-wrap {
    flex-direction: row;
    padding: 0 14px;
  }
  .train-btn {
    flex: 1;
    height: 58px;
    padding-right: 52px;
  }
  .sheet {
    bottom: 0;
    width: 100vw;
    border-radius: 26px 26px 0 0;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom));
    max-height: 62vh;
    overflow: auto;
  }
  .sheet-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .sheet h2 {
    font-size: 20px;
    margin: 8px 0 2px;
  }
  .sheet .sub {
    font-size: 13.5px;
  }
  .lh-list {
    margin-top: 10px;
  }
  .lh {
    padding: 10px;
    grid-template-columns: 38px 1fr;
  }
  .lh-icon {
    width: 38px;
    height: 38px;
  }
  .lh p {
    font-size: 13px;
  }
  .sheet-actions .btn {
    height: 42px;
    padding: 0 16px;
    font-size: 14.5px;
  }
  .big-score {
    margin: 8px 0;
  }
  .big-score strong {
    font-size: 30px;
  }
  .stamp {
    font-size: 34px;
    border-width: 4px;
    padding: 4px 16px;
  }
  .modal-card {
    padding: 22px 18px;
    border-radius: 24px;
  }
  .modal-card h2 {
    font-size: 24px;
  }
  .title-screen {
    top: 11vh;
  }
}

#app > .stamp {
  pointer-events: none;
}

/* ---------- guard levels: the hand ---------- */

.kind-prevent .card-icon {
  background: #e7e8f1;
  color: var(--navy);
}

.kind-detect .card-icon {
  background: #fbf0d9;
  color: var(--sand-dark);
}

.kind-fix .card-icon {
  background: #e2efe8;
  color: var(--sage-dark);
}

.lab-rules {
  background: #f8f6ee;
  box-shadow: inset 0 0 0 1.5px rgba(42, 44, 64, 0.07);
  cursor: default;
}

.lab-rules:hover {
  transform: none;
  box-shadow: inset 0 0 0 1.5px rgba(42, 44, 64, 0.07);
}

.lock-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  color: #b9b6a8;
}

.lock-tag .ico {
  width: 16px;
  height: 16px;
}

.card-value.static {
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
}

.per-step {
  font-weight: 700;
  font-size: 13px;
  color: var(--coral-dark);
  white-space: nowrap;
}

.per-step.fixed {
  color: var(--muted);
  font-weight: 600;
}

.guard-card {
  cursor: pointer;
  outline: none;
}

.guard-card.selected {
  transform: translateY(-10px);
  box-shadow: 0 0 0 3px var(--sage), var(--shadow-lg);
}

.guard-card.selected:hover {
  transform: translateY(-12px);
}

.guard-card.spent {
  opacity: 0.55;
}

.guard-card:focus-visible {
  box-shadow: 0 0 0 3px var(--navy), var(--shadow);
}

.card-info {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #a9a594;
}

.card-info:hover {
  background: #f6f4ec;
  color: var(--navy);
}

.card-info .ico {
  width: 18px;
  height: 18px;
}

.card-foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  background: #f6f4ec;
  border-radius: 14px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
}

.card-foot .count {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card-foot .place-cta {
  white-space: nowrap;
}

.card-foot .place-cta {
  color: var(--sage-dark);
}

.guard-card.selected .card-foot {
  background: #e2efe8;
}

.hand.busy .card-info {
  visibility: hidden;
}

.slot-tile {
  flex: none;
  width: 118px;
  min-height: 192px;
  border-radius: 20px;
  border: 2px dashed #d8d3c1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  color: var(--muted);
}

.slot-tile b {
  font-size: 34px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.slot-tile b span {
  font-size: 18px;
  color: var(--muted);
}

.slot-tile small {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

/* ---------- guard levels: replay and verdict ---------- */

.status .clock {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 96px;
}

.status .clock small {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}

.status .clock b {
  font-size: 18px;
}

.status .clock b.out {
  color: #f6a58f;
}

.status .clock b.caught {
  color: #9fe0bf;
}

.stamp small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.big-score.caught strong {
  color: var(--sage-dark);
}

.big-score.escaped strong {
  color: var(--coral-dark);
}

.sheet .real-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.sheet .real-note .ico {
  width: 16px;
  height: 16px;
  color: var(--sand-dark);
}

.sheet .note {
  margin-top: 8px;
  color: var(--coral-dark);
}

/* ---------- guard levels: intro, level list, collection ---------- */

.intro-cols {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 24px;
}

.mini-card .times {
  font-weight: 800;
  color: var(--muted);
  margin-left: 2px;
}

.chapter-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 22px 0 12px;
  font-size: 18px;
}

.chapter-title:first-of-type {
  margin-top: 4px;
}

.chapter-title span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
}

.true-tag {
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: 0.1em;
  vertical-align: 1px;
}

.codex-card.gap {
  position: relative;
}

.gap-tag {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- guard levels: placed card menu ---------- */

.guard-menu {
  position: fixed;
  z-index: 5;
  width: 260px;
  padding: 12px;
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-lg);
  animation: pop 0.2s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.gm-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin: 2px 4px 10px;
}

.gm-title .ico {
  width: 18px;
  height: 18px;
  color: var(--navy);
}

.gm-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: #f6f4ec;
  margin-bottom: 8px;
}

.gm-seg button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 11px;
  font-weight: 700;
  font-size: 14px;
  text-align: left;
  color: var(--muted);
}

.gm-seg button span {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.gm-seg button small {
  font-weight: 500;
  font-size: 11px;
}

.gm-seg button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.gm-seg .ico {
  width: 18px;
  height: 18px;
}

.gm-row {
  display: flex;
  gap: 4px;
}

.gm-row button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}

.gm-row button:hover {
  background: #f6f4ec;
  color: var(--ink);
}

.gm-row .ico {
  width: 18px;
  height: 18px;
}

/* ---------- guard levels: guess, alarm card ---------- */

.status .guess-q {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

.status .guess-q .ico {
  width: 18px;
  height: 18px;
  color: var(--sand);
}

.alarm-card {
  position: fixed;
  left: 50%;
  top: 38%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 26px;
  border-radius: 24px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-lg);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.alarm-card.show {
  animation: alarm-card 2.8s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes alarm-card {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0;
  }
  12%,
  82% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -60%) scale(0.96);
    opacity: 0;
  }
}

.alarm-card div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alarm-card small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
}

.alarm-card b {
  font-size: 40px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.alarm-card div:first-child b {
  color: #9fe0bf;
}

.alarm-card div:last-child b {
  color: #f6a58f;
}

.alarm-card .vs {
  font-weight: 800;
  opacity: 0.5;
}

/* ---------- guard levels: verdict extras ---------- */

.near {
  margin-top: 12px;
  display: grid;
  gap: 6px;
}

.near p {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  color: var(--ink);
}

.near .ico {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--sand-dark);
}

.letter-card {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: #fffdf5;
  box-shadow: inset 0 0 0 1.5px #efe6c9, 0 2px 0 #efe6c9;
  transform: rotate(-0.6deg);
}

.letter-card p {
  margin: 4px 0 2px;
  font-size: 15px;
  font-style: italic;
  line-height: 1.45;
}

.letter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--coral-dark);
}

.letter-head .ico {
  width: 16px;
  height: 16px;
}

.letter-card .text-btn {
  padding: 4px 0;
}

.letters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}

.letter-card.small {
  margin: 0;
  transform: none;
}

.letter-card.small p {
  font-size: 14px;
  margin: 0;
}

.letter-card.sealed {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b3ad98;
  background: transparent;
  box-shadow: inset 0 0 0 2px #e4dfcc;
  font-weight: 600;
}

.ways {
  display: grid;
  gap: 5px;
  margin-bottom: 4px;
}

.way {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px 7px 8px;
  border-radius: 12px;
  background: #f6f4ec;
}

.way-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  color: var(--muted);
}

.way-icon .ico {
  width: 17px;
  height: 17px;
}

.way-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.way-text b {
  font-size: 14.5px;
}

.way-text small {
  font-size: 12.5px;
  color: var(--muted);
}

.way.shut .way-icon,
.way.watched .way-icon,
.way.caught .way-icon {
  background: #e2efe8;
  color: var(--sage-dark);
}

.way.shut small,
.way.watched small,
.way.caught small {
  color: var(--sage-dark);
}

.way.used,
.way.open {
  background: #fbe5de;
}

.way.used {
  box-shadow: inset 0 0 0 2px var(--coral);
}

.way.used .way-icon,
.way.open .way-icon {
  color: var(--coral-dark);
}

.way.used small,
.way.open small {
  color: var(--coral-dark);
  font-weight: 600;
}

.way.honest {
  background: #e2efe8;
  box-shadow: inset 0 0 0 2px var(--sage);
}

.way.unknown .way-text b {
  letter-spacing: 0.1em;
}

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 4px 0 12px;
}

.score-row .big-score {
  margin: 0;
}

.big-score.words strong {
  font-size: 28px;
  white-space: nowrap;
}

.big-score.words span {
  white-space: nowrap;
}

.medals {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
}

.medal {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ece8da;
  color: #b3ad98;
}

.medal .ico {
  width: 17px;
  height: 17px;
}

.sheet-actions .btn.ghost {
  height: 42px;
  padding: 0 16px;
  font-size: 15px;
}

.sheet-actions .btn.icon-only {
  width: 42px;
  padding: 0;
}

.medal.on {
  background: var(--sand);
  color: #6b4a12;
}

.medal.new {
  animation: starpop 0.6s cubic-bezier(0.2, 1.8, 0.4, 1) 0.6s both;
  box-shadow: 0 0 0 3px rgba(242, 204, 143, 0.6);
}

.new-dot {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
}

.medal-count {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.medal-count .ico {
  width: 14px;
  height: 14px;
}

/* ---------- guard levels: first-time explanations ---------- */

.score-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: -6px 0 12px;
}

.score-strip span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}

.score-strip .ico {
  width: 16px;
  height: 16px;
  color: var(--sand-dark);
}

.intro-p {
  margin: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.5;
  color: #4a4d63;
}

.intro-job {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 14px 0 12px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #e2efe8;
  color: #2f5a47;
  font-size: 15.5px;
  line-height: 1.45;
}

.intro-job .ico {
  flex: none;
  margin-top: 1px;
  color: var(--sage-dark);
}

.how-to {
  margin: 0 0 16px;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: #4a4d63;
}

.try-next {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #e7e8f1;
  color: var(--navy);
  font-size: 14.5px;
  line-height: 1.45;
}

.try-next .ico {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.medals-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.medals-wrap small {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

button.medal {
  cursor: pointer;
}

.alarm-card {
  flex-direction: column;
  gap: 4px;
}

.alarm-card .ac-title {
  font-size: 12px;
}

.alarm-card .ac-row {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ---------- guard levels: incident file, poll, share ---------- */

.file-teaser {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: -8px 0 18px;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
  line-height: 1.4;
  color: #4a4d63;
}

.file-teaser .ico {
  flex: none;
  color: var(--navy);
}

.file-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.file-progress .progress {
  flex: 1;
  margin: 0;
  height: 8px;
}

.redact {
  display: inline-block;
  background: var(--ink);
  border-radius: 3px;
  line-height: 1.1;
  vertical-align: -1px;
  user-select: none;
}

.unredact.fresh {
  background: rgba(242, 204, 143, 0.55);
  border-radius: 4px;
  animation: unredact 1.2s ease-out both;
}

@keyframes unredact {
  from {
    background: var(--ink);
    color: transparent;
  }
  40% {
    background: rgba(242, 204, 143, 0.9);
    color: var(--ink);
  }
}

.case-file.locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  color: var(--muted);
  font-weight: 700;
}

.case-file.locked small {
  margin-left: auto;
  font-weight: 500;
}

.poll {
  margin: 0 0 20px;
}

.poll-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.poll-row .btn {
  height: 42px;
  font-size: 15px;
}

.poll-reply {
  margin: 12px 0 0;
  line-height: 1.5;
}

.poll-reply small {
  display: block;
  color: var(--muted);
  margin-top: 4px;
}

.share-img {
  display: block;
  width: 100%;
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin: 4px 0 16px;
}

.build-code {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0 0 18px;
  font-weight: 700;
}

.build-code code {
  padding: 4px 10px;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 15px;
}

.build-code small {
  flex-basis: 100%;
  color: var(--muted);
  font-weight: 500;
}

a.btn {
  text-decoration: none;
  color: inherit;
}

.new-story {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 8px 14px 8px 8px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  font-size: 15px;
  transition: transform 0.15s, box-shadow 0.15s;
}

.new-story:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.new-story .true-tag {
  margin: 0;
  padding: 5px 10px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.new-story .ico {
  width: 16px;
  height: 16px;
  color: var(--coral);
}

/* ---------- stars, explained ---------- */

.star-box {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fbf8f1;
}

.star-count {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 16px;
}

.star-count .ico {
  width: 20px;
  height: 20px;
  fill: var(--sand-dark);
  stroke: none;
}

.star-count small {
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
}

.star-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 14px;
}

.star-rules li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.star-rules .need {
  flex: none;
  width: 42px;
  color: #d8d3c1;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.star-rules li.got {
  color: var(--ink);
  font-weight: 600;
}

.star-rules li.got .need {
  color: var(--sand-dark);
}

.star-rules li .ico {
  width: 16px;
  height: 16px;
  color: var(--sage-dark);
  margin-left: auto;
}

.star-rules.intro {
  margin: 0 0 14px;
}

.star-rules.intro .need {
  color: var(--sand-dark);
}

.star-rules.intro li {
  color: #4a4d63;
}

.reset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.reset-row small {
  color: var(--muted);
}

.text-btn.danger.armed {
  color: #fff;
  background: var(--coral);
}

.text-btn.danger.armed .ico {
  color: #fff;
}

/* ---------- the failure cameo ---------- */

.cameo {
  position: fixed;
  left: 0;
  top: 22%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  animation: cameo-fly 6s cubic-bezier(0.37, 0, 0.63, 1) forwards;
}

.cameo-fig {
  width: 120px;
  height: 170px;
  animation: cameo-spin 6s linear forwards;
  filter: drop-shadow(0 10px 14px rgba(42, 44, 64, 0.25));
}

.cameo-fig svg {
  width: 100%;
  height: 100%;
}

.cameo-name {
  margin-top: 4px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
}

@keyframes cameo-fly {
  0% {
    transform: translate(-160px, 60px);
  }
  50% {
    transform: translate(calc(50vw - 60px), -30px);
  }
  100% {
    transform: translate(calc(100vw + 40px), 60px);
  }
}

@keyframes cameo-spin {
  to {
    transform: rotate(540deg);
  }
}

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

/* ---------- three stars: the cameos dance ---------- */

.cameo-dance {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 30;
  display: flex;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.dancer {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: dancer-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both;
  animation-delay: calc(var(--i) * 0.12s);
}

.cameo-dance.leaving .dancer {
  animation: dancer-out 0.4s ease-in forwards;
}

@keyframes dancer-in {
  from {
    transform: translateY(120%);
  }
}

@keyframes dancer-out {
  to {
    transform: translateY(130%);
    opacity: 0;
  }
}

.dance-fig {
  width: 110px;
  height: 156px;
  filter: drop-shadow(0 8px 10px rgba(42, 44, 64, 0.22));
  animation: dance-hop 0.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.13s);
}

.dance-fig svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: dance-sway 0.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.27s);
}

/* The middle one twirls now and then. */
.dancer.d1 .dance-fig svg {
  animation: dance-sway 0.8s ease-in-out infinite alternate, dance-twirl 3.2s ease-in-out infinite;
}

.dance-fig .arm-l {
  transform-origin: 44px 74px;
  animation: dance-arm-l 0.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.2s);
}

.dance-fig .arm-r {
  transform-origin: 76px 74px;
  animation: dance-arm-r 0.4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * -0.2s - 0.2s);
}

.dance-fig .leg-l {
  transform-origin: 50px 118px;
  animation: dance-leg-l 0.8s ease-in-out infinite alternate;
}

.dance-fig .leg-r {
  transform-origin: 70px 118px;
  animation: dance-leg-r 0.8s ease-in-out infinite alternate;
}

.cameo-dance .cameo-name {
  font-size: 12.5px;
  padding: 3px 10px;
}

@keyframes dance-hop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-16px);
  }
}

@keyframes dance-sway {
  from {
    transform: rotate(-9deg);
  }
  to {
    transform: rotate(9deg);
  }
}

@keyframes dance-twirl {
  0%,
  70% {
    scale: 1 1;
  }
  80% {
    scale: -1 1;
  }
  90%,
  100% {
    scale: 1 1;
  }
}

@keyframes dance-arm-l {
  from {
    transform: rotate(-38deg);
  }
  to {
    transform: rotate(22deg);
  }
}

@keyframes dance-arm-r {
  from {
    transform: rotate(38deg);
  }
  to {
    transform: rotate(-22deg);
  }
}

@keyframes dance-leg-l {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(16deg);
  }
}

@keyframes dance-leg-r {
  from {
    transform: rotate(-16deg);
  }
  to {
    transform: rotate(0deg);
  }
}

@media (max-width: 760px) {
  .cameo-dance {
    gap: 4px;
  }
  .dance-fig {
    width: 88px;
    height: 125px;
  }
  .cameo-dance .cameo-name {
    font-size: 11px;
    padding: 3px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dance-fig,
  .dance-fig svg,
  .dance-fig g {
    animation: none;
  }
}

/* Dancers along the bottom: the star pop-up sits higher. */
.star-pop.party {
  align-items: start;
  padding-top: max(20px, 9vh);
}

/* ---------- card backs ---------- */

.card-back h3 {
  margin: 20px 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
}

.card-back p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}

.cb-front {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px;
  padding-right: 48px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.cb-front .card-icon {
  margin: 0;
}

.cb-name {
  display: block;
  font-size: 22px;
  font-weight: 800;
}

.cb-real {
  display: block;
  color: var(--muted);
  font-size: 14px;
}

.cb-real b {
  color: var(--navy);
}

/* ---------- the true story ---------- */

.story p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.55;
}

.evidence {
  display: inline-block;
  margin: 4px 0 16px;
  padding: 6px 14px;
  border: 3px solid var(--coral);
  border-radius: 10px;
  color: var(--coral);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
  animation: slam-small 0.45s cubic-bezier(0.2, 1.6, 0.4, 1) 0.3s both;
}

@keyframes slam-small {
  0% {
    transform: rotate(-12deg) scale(2);
    opacity: 0;
  }
  60% {
    transform: rotate(-3deg) scale(0.95);
    opacity: 1;
  }
}

.story-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.story-note .ico {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--sand-dark);
}

.case-file {
  margin: 0 0 20px;
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.case-file summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.case-file summary::-webkit-details-marker {
  display: none;
}

.case-file summary small {
  margin-left: auto;
  color: var(--muted);
  font-weight: 500;
}

.case-file summary .ico {
  color: var(--navy);
}

.case-file[open] summary {
  border-bottom: 1px solid var(--line);
}

.case-file .who {
  margin: 14px 16px 6px;
  font-weight: 600;
}

.case-file ul {
  margin: 0 16px 12px;
  padding-left: 18px;
  color: #4a4d63;
  font-size: 14.5px;
  line-height: 1.5;
}

.case-file li {
  margin-bottom: 4px;
}

.sources {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 16px 16px;
}

.sources a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
}

.sources a:hover {
  text-decoration: underline;
}

.sources .ico {
  width: 16px;
  height: 16px;
  color: var(--muted);
}

@media (min-width: 761px) and (max-height: 820px) {
  .slot-tile {
    min-height: 158px;
  }
}

@media (max-width: 760px) {
  /* Keep a pop-up's buttons in reach on a phone: they stick to its bottom. */
  .modal-card .modal-actions {
    position: sticky;
    bottom: -22px;
    margin: 0 -18px -22px;
    padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
    background: linear-gradient(rgba(251, 250, 241, 0), var(--paper-2) 18%);
  }
  .slot-tile {
    width: 96px;
    min-height: 150px;
  }
  .slot-tile b {
    font-size: 26px;
  }
  .card-foot {
    padding: 6px 10px;
    font-size: 12px;
  }
  .intro-cols {
    grid-template-columns: 1fr;
  }
  .cb-name {
    font-size: 19px;
  }
  .story p {
    font-size: 15px;
  }
  .case-file summary small {
    display: none;
  }
}

/* ---------- guard levels: the star pop-up ---------- */

.star-pop {
  position: fixed;
  inset: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(42, 44, 64, 0.3);
  animation: fade 0.25s ease-out;
}

.sp-card {
  width: min(380px, 100%);
  max-height: calc(100% - 20px);
  overflow: auto;
  padding: 24px 22px 22px;
  border-radius: 28px;
  background: var(--paper-2);
  box-shadow: var(--shadow-lg);
  text-align: center;
  animation: sp-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

@keyframes sp-in {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

.sp-stars {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
}

.sp-star .ico {
  width: 62px;
  height: 62px;
  fill: #e6e0cc;
  stroke: none;
  animation: starpop 0.55s cubic-bezier(0.2, 1.8, 0.4, 1) both;
  animation-delay: inherit;
}

.sp-star:nth-child(2) .ico {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
}

.sp-star.on .ico {
  fill: var(--sand-dark);
  filter: drop-shadow(0 4px 0 #a8761f);
}

.star-pop h2 {
  margin: 12px 0 4px;
  font-size: 24px;
  line-height: 1.2;
}

.sp-count {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 17px;
}

.sp-count small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.star-pop .star-rules {
  margin: 0 0 18px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f1eee2;
  text-align: left;
}

.sp-next {
  width: 100%;
  height: 54px;
  font-size: 18px;
}

.star-count .ico.off {
  fill: #e6e0cc;
}

.star-count .ico + .ico {
  margin-left: -6px;
}

.star-next {
  margin: 0;
  font-size: 14px;
  color: #4a4d63;
}

/* ---------- guard levels: placed cards, big enough for a thumb ---------- */

.slot-tile {
  width: 156px;
  justify-content: flex-start;
  padding: 10px 8px;
}

.slot-tile small b {
  font-size: 15px;
  color: var(--ink);
}

.slot-chips {
  display: grid;
  gap: 6px;
  width: 100%;
}

.slot-tile.many .slot-chips {
  grid-template-columns: 1fr 1fr;
}

.slot-chip {
  display: flex;
  align-items: stretch;
  height: 46px;
  border-radius: 14px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.slot-chip.empty {
  align-items: center;
  justify-content: center;
  background: none;
  box-shadow: none;
  border: 2px dashed #e2ddcc;
  font-size: 12px;
  color: #b3ae9c;
}

.chip-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.chip-main > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}

.chip-main b,
.chip-main small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-chip .chip-main b {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.chip-main small {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.chip-main small .ico {
  width: 13px;
  height: 13px;
  color: var(--sand-dark);
}

.chip-main .ico {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--navy);
}

.chip-x {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px;
  border-left: 1px solid var(--line);
  color: var(--coral-dark);
}

.chip-x .ico {
  width: 16px;
  height: 16px;
}

.chip-x:active,
.chip-main:active {
  background: #f6f4ec;
}

.hand.busy .slot-chip button {
  pointer-events: none;
}

.hand.busy .chip-x {
  visibility: hidden;
}

/* The camera card's Hidden / Visible switch. */
.cam-switch {
  display: flex;
  gap: 3px;
  padding: 3px;
  margin-bottom: auto;
  border-radius: 12px;
  background: #f1eee2;
}

.cam-switch button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 34px;
  padding: 0 4px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}

.cam-switch button.on {
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

.cam-switch .ico {
  flex: none;
  width: 15px;
  height: 15px;
}

.cam-switch button.on .ico {
  color: var(--sand-dark);
}

.hand.busy .cam-switch {
  pointer-events: none;
  opacity: 0.6;
}

.place-bar .cam-switch {
  margin: 4px 0 0;
  max-width: 220px;
}

/* While placing on a phone, the cards fold into one bar so the room is bigger. */
.place-bar {
  display: none;
}

/* Placed cards first, so they're in reach without scrolling. */
.hand .slot-tile {
  order: -1;
}

.hand .lab-rules {
  order: 1;
}

/* A goal you can change (pay, target) is a real choice: keep it in reach. */
.hand .pay-card {
  order: 0;
}

@media (max-width: 760px) {
  .slot-tile {
    width: 150px;
  }
  .guard-card .cam-switch button {
    flex-direction: column;
    gap: 1px;
    min-height: 40px;
    font-size: 11.5px;
  }
  .hand.placing > :not(.place-bar) {
    display: none;
  }
  .hand.placing .place-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 8px 8px 12px;
    border-radius: 20px;
    background: var(--card);
    box-shadow: 0 0 0 3px var(--sage), var(--shadow);
  }
  .dock.placing .train-wrap,
  .dock.placing .caption {
    display: none;
  }
  .pb-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #e2efe8;
    color: var(--sage-dark);
  }
  .pb-icon .ico {
    width: 22px;
    height: 22px;
  }
  .pb-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    font-size: 15px;
  }
  .pb-text small {
    color: var(--muted);
    font-size: 12.5px;
  }
  .place-bar .btn {
    height: 44px;
    padding: 0 16px;
    font-size: 15px;
  }
}

/* The main result choices: first in line, and pinned in reach on a phone. */
.main-acts {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

@media (max-width: 760px) {
  .main-acts {
    position: sticky;
    z-index: 1;
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin: 12px -16px calc(-16px - env(safe-area-inset-bottom));
    padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
    border-top: none;
    background: linear-gradient(rgba(255, 255, 255, 0), var(--card) 16px);
  }
  .main-acts .btn {
    flex: 1 1 auto;
  }
}

/* Where the game bends the true story, said plainly. */
.liberty {
  display: flex;
  gap: 8px;
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: #fbf0d9;
  font-size: 13.5px;
  color: #6b4a12;
}

.liberty .ico {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

/* ---------- the true story, kept in sight ---------- */

.story-btn {
  position: relative;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fbf0d9;
  color: #6b4a12;
  font-size: 13.5px;
  font-weight: 700;
  white-space: nowrap;
}

.story-btn .ico {
  width: 16px;
  height: 16px;
}

.story-btn b {
  font-variant-numeric: tabular-nums;
  color: var(--sand-dark);
}

.story-btn .new-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px #fff;
}

.story-btn.unread {
  animation: story-nudge 2.4s ease-in-out infinite;
}

@keyframes story-nudge {
  0%,
  80%,
  100% {
    transform: scale(1);
  }
  88% {
    transform: scale(1.08);
  }
}

@media (max-width: 760px) {
  .story-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    height: 32px;
    font-size: 12.5px;
  }
}

.sp-story {
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fbf0d9;
  text-align: left;
  color: #4a3a1a;
}

.sp-story.fresh {
  box-shadow: inset 0 0 0 2px var(--sand);
}

.sp-story-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a6420;
}

.sp-story-head .ico {
  width: 15px;
  height: 15px;
}

.sp-story p {
  margin: 6px 0 0;
  font-size: 14.5px;
  line-height: 1.4;
}

.sp-story b {
  background: #f2cc8f;
  border-radius: 4px;
  padding: 0 2px;
}

.sp-story .redact {
  background: #2a2c40;
  border-radius: 3px;
}

.sp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sp-actions .btn {
  flex: 1 1 auto;
}

.sp-actions .sp-next {
  width: auto;
  flex: 1 1 140px;
}

/* What the robot wants: a quiet foot that wraps. */
.fixed-foot {
  justify-content: flex-start;
  gap: 6px;
  color: var(--muted);
  font-weight: 600;
}

.fixed-foot .ico {
  flex: none;
  width: 14px;
  height: 14px;
}

.lab-rules .card-detail {
  -webkit-line-clamp: 3;
  max-height: 4.1em;
}

/* A card still to be earned. */
.guard-card.mystery {
  background: repeating-linear-gradient(135deg, #f6f4ec 0 10px, #efece1 10px 20px);
  cursor: default;
}

.guard-card.mystery .card-icon,
.mini-card.mystery .card-icon {
  font-size: 22px;
  font-weight: 900;
  color: var(--sand-dark);
  background: #fbf0d9;
}

.guard-card.mystery .count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.guard-card.mystery .count .ico {
  width: 13px;
  height: 13px;
}

.sp-newcard {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #e2efe8;
  box-shadow: inset 0 0 0 2px var(--sage);
  text-align: left;
  color: #2f6b50;
  animation: sp-in 0.5s 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.sp-newcard .ico {
  flex: none;
  width: 26px;
  height: 26px;
}

.sp-newcard span {
  display: flex;
  flex-direction: column;
}

.sp-newcard small {
  color: #4e8a6e;
  font-size: 13px;
}

/* ---------- the Case File: the real record, made to be opened ---------- */

.case-file-card {
  margin: 16px 0 8px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #fff8e6, #fbf0d9);
  animation: cf-glow 2.8s ease-in-out infinite;
}

@keyframes cf-glow {
  0%,
  100% {
    box-shadow: 0 0 0 2px var(--sand), 0 0 0 0 rgba(242, 204, 143, 0.7);
  }
  50% {
    box-shadow: 0 0 0 2px var(--sand), 0 0 0 9px rgba(242, 204, 143, 0);
  }
}

.cf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #6b4a12;
}

.cf-head > .ico {
  flex: none;
  width: 26px;
  height: 26px;
  color: var(--sand-dark);
}

.cf-head span {
  display: flex;
  flex-direction: column;
}

.cf-head b {
  font-size: 17px;
  letter-spacing: 0.02em;
}

.cf-head small {
  font-size: 12.5px;
  color: #8a6420;
}

.case-file-card .who {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}

.source-btn {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0 6px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--navy);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 5px 0 #2a2c40;
  transition: transform 0.1s, box-shadow 0.1s;
}

.source-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 #2a2c40;
}

.source-btn span {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.source-btn b {
  font-size: 16px;
}

.source-btn small {
  font-size: 12.5px;
  color: #c9cddc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-btn > .ico {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--sand);
  animation: cf-nudge 1.6s ease-in-out infinite;
}

/* A shine that sweeps across now and then: "tap me". */
.source-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  transform: translateX(-110%);
  animation: cf-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cf-shine {
  0%,
  55% {
    transform: translateX(-110%);
  }
  100% {
    transform: translateX(110%);
  }
}

@keyframes cf-nudge {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(3px, -3px);
  }
}

.source-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 2px 8px 2px 0;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--navy);
}

.source-more .ico {
  width: 15px;
  height: 15px;
}

.cf-facts {
  margin-top: 8px;
}

.cf-facts summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  list-style: none;
}

.cf-facts summary::-webkit-details-marker {
  display: none;
}

.cf-facts summary::after {
  content: '▸';
  color: var(--sand-dark);
  transition: transform 0.2s;
}

.cf-facts[open] summary::after {
  transform: rotate(90deg);
}

.cf-facts summary small {
  margin-left: auto;
  color: var(--muted);
  font-weight: 600;
}

.cf-facts ul {
  margin: 10px 0 0;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.45;
}

.cf-facts li + li {
  margin-top: 6px;
}

/* On the intro: a way into the Case File from the start. */
.intro-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.case-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: #fbf0d9;
  color: #6b4a12;
  font-size: 12.5px;
  font-weight: 800;
  box-shadow: 0 0 0 1.5px var(--sand);
  animation: cf-glow 2.8s ease-in-out infinite;
}

.case-chip .ico {
  width: 15px;
  height: 15px;
}

.case-chip span {
  font-weight: 600;
  color: #8a6420;
}

@media (prefers-reduced-motion: reduce) {
  .case-file-card,
  .case-chip,
  .source-btn::after,
  .source-btn > .ico {
    animation: none;
  }
}

/* ---------- the title stage: a dance-off, one point per spin ---------- */

.title-screen .tagline b {
  color: var(--ink);
}

body.on-title #scene {
  visibility: hidden;
}

.title-stage {
  position: relative;
  height: 250px;
  margin: 0 auto 18px;
  overflow: hidden;
  border-radius: 28px;
  background: radial-gradient(110% 80% at 50% 100%, #fbf0d9 0%, rgba(251, 240, 217, 0) 72%);
  pointer-events: none;
}

.ts-board {
  position: absolute;
  top: 8px;
  /* Centred across the whole stage, so its line has the full width. */
  left: 0;
  right: 0;
  width: max-content;
  max-width: calc(100% - 24px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 16px 5px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.3s;
}

.ts-board small {
  font-size: 10px;
  line-height: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #b7bdce;
  white-space: nowrap;
}

.ts-score {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.1;
  color: var(--sand);
  font-variant-numeric: tabular-nums;
}

.title-stage.spin .ts-board {
  box-shadow: 0 0 0 3px var(--sand), 0 0 24px rgba(242, 204, 143, 0.8);
}

.ts-board.high small {
  color: var(--sand);
}

.ts-floor {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 22px;
  height: 20px;
  border-radius: 50%;
  background: rgba(201, 146, 46, 0.16);
}

.ts-row {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  justify-items: center;
  padding: 0 4px;
}

.ts-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ts-fig {
  width: 74px;
  height: 104px;
}

.robot .ts-fig {
  width: 88px;
  height: 124px;
}

.ts-fig svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 6px 8px rgba(42, 44, 64, 0.2));
}

.ts-name {
  margin-top: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

/* Beat 1: everyone dances in step. */
.title-stage.dance .ts-fig,
.title-stage.idea .cam .ts-fig {
  animation: ts-bop 0.5s ease-in-out infinite alternate;
}

.title-stage.dance .ts-fig .arm-l,
.title-stage.idea .cam .ts-fig .arm-l {
  animation: ts-arm-l 0.5s ease-in-out infinite alternate;
}

.title-stage.dance .ts-fig .arm-r,
.title-stage.idea .cam .ts-fig .arm-r {
  animation: ts-arm-r 0.5s ease-in-out infinite alternate;
}

.ts-fig .arm-l {
  transform-origin: 44px 74px;
}

.ts-fig .arm-r {
  transform-origin: 76px 74px;
}

@keyframes ts-bop {
  from {
    transform: translateY(0) rotate(-4deg);
  }
  to {
    transform: translateY(-8px) rotate(4deg);
  }
}

@keyframes ts-arm-l {
  from {
    transform: rotate(-35deg);
  }
  to {
    transform: rotate(15deg);
  }
}

@keyframes ts-arm-r {
  from {
    transform: rotate(-15deg);
  }
  to {
    transform: rotate(35deg);
  }
}

/* Beat 2: the robot stops dead. It has an idea. */
.ts-idea {
  position: absolute;
  top: -6px;
  left: 50%;
  font-size: 26px;
  transform: translateX(-50%) scale(0);
  transition: transform 0.25s cubic-bezier(0.2, 1.6, 0.4, 1);
}

.title-stage.idea .ts-idea {
  transform: translateX(-50%) scale(1);
}

/* Beat 3: it spins on the spot for points, briefly; one burst of coins
   flies out of it; the others stop and stare. */
.title-stage.spin .robot .ts-fig {
  animation: ts-spin 0.28s linear infinite;
}

@keyframes ts-spin {
  0% {
    transform: scaleX(1) translateY(-4px);
  }
  50% {
    transform: scaleX(-1) translateY(-10px);
  }
  100% {
    transform: scaleX(1) translateY(-4px);
  }
}

.title-stage.spin .cam.left .ts-fig,
.title-stage.jetsen .cam.left .ts-fig {
  transform: rotate(7deg) translateY(-2px);
}

.title-stage.spin .cam.right .ts-fig,
.title-stage.jetsen .cam.right .ts-fig {
  transform: rotate(-7deg) translateY(-2px);
}

.ts-fig {
  transition: transform 0.25s;
}

.ts-coin {
  position: absolute;
  left: 50%;
  bottom: 50px;
  width: 20px;
  margin-left: -10px;
  opacity: 0;
}

.ts-coin svg {
  display: block;
  width: 100%;
}

.title-stage.spin .ts-coin,
.title-stage.jetsen .ts-coin {
  animation: ts-coin 0.9s ease-out;
  animation-delay: calc(var(--k) * 0.05s);
}

@keyframes ts-coin {
  0% {
    transform: translate(0, 0) scale(0.6);
    opacity: 1;
  }
  60% {
    transform: translate(calc(var(--dx) * 0.8), -70px) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--dx), -30px) scale(1);
    opacity: 0;
  }
}

/* Beat 4: Jetsen bursts in to his spot (in a quarter of a second, a
   little past it and back), thrilled, and rushes off again. */
.ts-jet {
  --jet-off: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translateX(var(--jet-off));
}

.title-stage.jetsen .ts-jet {
  animation: ts-jet 1.6s forwards;
}

@keyframes ts-jet {
  0% {
    transform: translateX(var(--jet-off));
    animation-timing-function: cubic-bezier(0.1, 1, 0.3, 1);
  }
  7% {
    transform: translateX(-10px);
    animation-timing-function: ease-out;
  }
  12%,
  82% {
    transform: translateX(0);
    animation-timing-function: ease-in;
  }
  100% {
    transform: translateX(var(--jet-off));
  }
}

.title-stage.jetsen .ts-jet .ts-fig {
  animation: ts-bop 0.18s ease-in-out infinite alternate;
}

.title-stage.jetsen .ts-jet .leg-l {
  transform-origin: 50px 118px;
  animation: ts-run 0.36s ease-in-out infinite alternate;
}

.title-stage.jetsen .ts-jet .leg-r {
  transform-origin: 70px 118px;
  animation: ts-run 0.36s ease-in-out infinite alternate-reverse;
}

.title-stage.jetsen .ts-jet .arm-l {
  animation: ts-arm-l 0.36s ease-in-out infinite alternate;
}

.title-stage.jetsen .ts-jet .arm-r {
  animation: ts-arm-r 0.36s ease-in-out infinite alternate-reverse;
}

@keyframes ts-run {
  from {
    transform: rotate(-20deg);
  }
  to {
    transform: rotate(20deg);
  }
}

.ts-bubble {
  margin-bottom: 2px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 18px;
  transform: scale(0);
}

.title-stage.jetsen .ts-bubble {
  animation: ts-bubble 1.6s ease-in-out forwards;
}

@keyframes ts-bubble {
  0%,
  7% {
    transform: scale(0);
  }
  13%,
  74% {
    transform: scale(1);
  }
  80%,
  100% {
    transform: scale(0);
  }
}

/* Beat 5: everyone takes a bow (arms up), then it starts again. */
.title-stage.done .ts-fig .arm-l {
  transform: rotate(-30deg);
}

.title-stage.done .ts-fig .arm-r {
  transform: rotate(30deg);
}

@media (max-width: 760px) {
  .title-stage {
    height: 214px;
  }
  .ts-fig {
    width: 58px;
    height: 82px;
  }
  .robot .ts-fig {
    width: 70px;
    height: 100px;
  }
  .ts-name {
    font-size: 8.5px;
    padding: 2px 5px;
  }
  .ts-score {
    font-size: 19px;
  }
  .ts-jet {
    --jet-off: 120px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title-stage * {
    animation: none !important;
  }
}

/* Levels still being built: a dimmed card that says so. */
.room-card.soon {
  background: #faf8f1;
  box-shadow: inset 0 0 0 1.5px #e6e0cc;
}

.soon-art {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  aspect-ratio: 16 / 10;
  background: repeating-linear-gradient(135deg, #f3f0e5 0 12px, #ece8da 12px 24px);
  color: #b3ae9c;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.soon-art .ico {
  width: 26px;
  height: 26px;
}

.room-card.soon.boss .soon-art {
  background: linear-gradient(135deg, #3d405b, #2a2c40);
  color: var(--sand);
}

.room-card.soon .name {
  color: var(--muted);
}

.room-card.soon .lock-note {
  display: block;
  margin-top: 4px;
  font-style: italic;
}

/* The pay card, when a level lets you change it. */
.pay-card {
  box-shadow: 0 0 0 2px var(--sand), var(--shadow);
}

.pay-card.on .card-icon {
  background: #fbf0d9;
  color: var(--sand-dark);
}

.pay-switch {
  margin-bottom: auto;
}

@media (max-width: 760px) {
  .pay-card .pay-switch button {
    flex-direction: column;
    gap: 1px;
    min-height: 40px;
    font-size: 11px;
  }
}

/* ---------- the code freeze: what it said, what it did ---------- */

.said-did {
  position: relative;
  margin: 0 0 12px;
  perspective: 900px;
  min-height: 74px;
}

.sd-face {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: left;
  backface-visibility: hidden;
}

.sd-face small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
}

.sd-face b {
  font-size: 15px;
  line-height: 1.35;
}

.sd-face.said {
  background: #e2efe8;
  color: #2f6b50;
  animation: sd-out 0.5s 1.6s ease-in forwards;
}

.sd-face.did {
  position: absolute;
  inset: 0;
  background: #fbe3dc;
  color: #8e3b2a;
  transform: rotateX(-90deg);
  animation: sd-in 0.5s 2.1s ease-out forwards;
}

.said-did.true .sd-face.did {
  background: #e2efe8;
  color: #2f6b50;
}

@keyframes sd-out {
  to {
    transform: rotateX(90deg);
  }
}

@keyframes sd-in {
  to {
    transform: rotateX(0deg);
  }
}

.sp-undo {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f1eee2;
  text-align: left;
  animation: sp-in 0.5s 2.6s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.sp-undo > .ico {
  flex: none;
  width: 22px;
  height: 22px;
  color: var(--sand-dark);
  margin-top: 2px;
}

.sp-undo span {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sp-undo small {
  color: #8e3b2a;
  font-weight: 700;
}

.sp-undo.done {
  background: #e2efe8;
  color: #2f6b50;
  animation: none;
}

.sp-undo.done small {
  color: #4e8a6e;
}

.card-btn {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: var(--coral-dark);
  background: #fff;
}

@media (prefers-reduced-motion: reduce) {
  .sd-face.said,
  .sd-face.did,
  .sp-undo {
    animation: none;
  }
  .sd-face.did {
    position: static;
    transform: none;
    margin-top: 6px;
  }
}

/* ---------- the robot's memory (the inbox level) ---------- */

.memory-panel {
  position: absolute;
  top: 168px;
  right: 16px;
  z-index: 3;
  width: 230px;
  padding: 10px 12px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--shadow);
  font-size: 13px;
  pointer-events: none;
}

.mp-head {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.mp-full,
.mp-summary {
  display: none;
}

.mp-rule {
  margin: 6px 0 4px;
  padding: 5px 8px;
  border-radius: 8px;
  background: #fbe3dc;
  color: #c9503c;
  font-size: 12px;
  font-weight: 900;
}

.mp-job {
  color: #4a4d63;
  font-weight: 600;
}

.mp-lines i {
  display: block;
  height: 7px;
  margin-top: 5px;
  border-radius: 4px;
  background: #e6e0cc;
  opacity: 0;
}

/* A run on the big inbox: emails pour in, the memory fills, compacts, and the rule falls off. */
.memory-panel.pouring .mp-lines i {
  animation: mp-line 0.25s ease-out both;
  animation-delay: calc(0.4s + var(--k) * 0.45s);
}

.memory-panel.pouring .mp-normal {
  animation: mp-hide 0.01s 3s forwards;
}

.memory-panel.pouring .mp-full {
  display: inline;
  opacity: 0;
  color: #c9503c;
  animation: mp-show 0.2s 3s forwards;
}

.memory-panel.pouring {
  animation: mp-alert 0.6s 3s 2;
}

.memory-panel.pouring .mp-rule {
  animation: mp-drop 0.9s 3.6s ease-in forwards;
}

.memory-panel.pouring .mp-lines {
  animation: mp-collapse 0.4s 3.4s forwards;
}

.memory-panel.pouring .mp-summary {
  display: block;
  margin-top: 4px;
  color: #4a4d63;
  font-weight: 700;
  opacity: 0;
  animation: mp-show 0.3s 3.7s forwards;
}

/* Small batches: a few emails at a time; the rule stays put. */
.memory-panel.batching .mp-lines i:nth-child(-n + 3) {
  animation: mp-batch 1.6s ease-in-out infinite;
  animation-delay: calc(var(--k) * 0.2s);
}

@keyframes mp-line {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
  }
}

@keyframes mp-hide {
  to {
    display: none;
    opacity: 0;
  }
}

@keyframes mp-show {
  to {
    opacity: 1;
  }
}

@keyframes mp-drop {
  to {
    opacity: 0;
    transform: translateY(60px) rotate(12deg);
  }
}

@keyframes mp-collapse {
  to {
    opacity: 0;
    height: 0;
  }
}

@keyframes mp-alert {
  50% {
    box-shadow: 0 0 0 3px #e0604a, var(--shadow);
  }
}

@keyframes mp-batch {
  0%,
  100% {
    opacity: 0;
  }
  30%,
  70% {
    opacity: 1;
  }
}

@media (max-width: 760px) {
  .memory-panel {
    top: 150px;
    right: 10px;
    width: 172px;
    padding: 8px 10px;
    font-size: 11.5px;
  }
  .mp-rule {
    font-size: 10.5px;
  }
  /* While the robot runs the cards can't be used: the panel sits over them,
     above the status bar, and off the room and its thought bubbles. */
  body.running .memory-panel {
    top: auto;
    bottom: 86px;
    left: 10px;
    width: auto;
    animation: rise-in 0.3s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-panel * {
    animation-duration: 0.01s !important;
  }
}

.mp-head {
  position: relative;
}

.memory-panel.pouring .mp-full {
  position: absolute;
  left: 0;
  top: 0;
}

/* ---------- the shop day: messages, vetoes, money ---------- */

.shop-panel {
  position: absolute;
  top: 160px;
  right: 16px;
  z-index: 4;
  width: 300px;
  max-height: calc(100vh - 330px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: var(--shadow-lg);
}

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

.sp-money {
  display: flex;
  flex-direction: column;
}

.sp-money small {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

.sp-money b {
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}

.sp-money b.down {
  color: #c9503c;
}

.sp-money b.up {
  color: var(--sage-dark);
}

.sp-vetoes {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #4a4d63;
}

.sp-vetoes .ico {
  width: 16px;
  height: 16px;
}

.sp-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
}

.sp-msg {
  padding: 8px 10px;
  border-radius: 12px;
  background: #f4f1e8;
  animation: sp-in 0.35s cubic-bezier(0.2, 1.4, 0.4, 1);
}

.sp-msg b {
  font-size: 12px;
  color: var(--navy);
}

.sp-msg p {
  margin: 2px 0 6px;
  font-size: 14px;
  line-height: 1.35;
}

.sp-msg.mine {
  background: #e7e8f1;
}

.sp-msg.deal {
  background: #fbf0d9;
}

.sp-msg.lost {
  box-shadow: inset 3px 0 0 #e0604a;
}

.sp-msg.saved,
.sp-msg.won {
  box-shadow: inset 3px 0 0 var(--sage);
}

.sp-msg.missed {
  box-shadow: inset 3px 0 0 var(--sand);
}

.sp-act {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.sp-act .btn {
  height: 38px;
  padding: 0 16px;
  font-size: 15px;
}

.sp-veto {
  /* No pulse: the day waits for the player, so nothing should feel urgent. */
}

@keyframes sp-pulse {
  50% {
    transform: scale(1.06);
  }
}

.sp-policy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #e2efe8;
  color: #2f6b50;
  font-size: 12px;
  font-weight: 800;
}

.sp-policy.bad {
  background: #fbe3dd;
  color: #b14532;
}

.sp-policy.good {
  background: #f8e9c6;
  color: #8a5a12;
}

.sp-policy .ico {
  width: 14px;
  height: 14px;
}

.sp-result {
  margin-left: auto;
  font-weight: 900;
  font-size: 13px;
}

.sp-msg.lost .sp-result {
  color: #c9503c;
}

.sp-msg.saved .sp-result,
.sp-msg.won .sp-result {
  color: var(--sage-dark);
}

@media (max-width: 760px) {
  .shop-panel {
    top: auto;
    bottom: 12px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 46vh;
  }
  .sp-msg p {
    font-size: 13px;
  }
}

/* ---------- the Thought Reader's panel ---------- */

.mind-panel .mind-text {
  margin-top: 4px;
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  color: var(--navy);
}

.mind-panel.off .mind-text {
  font-style: normal;
  font-size: 22px;
  letter-spacing: 0.2em;
  color: #9aa0b4;
}

.mind-panel.on {
  background: #23273a;
}

.mind-panel.on .mp-head {
  color: var(--sand);
}

.mind-panel.on .mind-text {
  color: #fff;
}

.mind-tag {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 900;
  color: #8fd1ae;
}

.mind-tag.off {
  color: var(--muted);
  font-weight: 700;
}

.mind-panel.bad,
.mind-panel.alarm {
  box-shadow: 0 0 0 3px #e0604a, var(--shadow);
}

.mind-panel.bad .mind-tag,
.mind-panel.alarm .mind-tag {
  color: #ff8a73;
}

.mind-panel.alarm {
  animation: mind-alarm 0.5s ease-in-out 4;
}

@keyframes mind-alarm {
  50% {
    background: #7a2e22;
  }
}

@media (max-width: 760px) {
  .mind-panel .mind-text {
    font-size: 12.5px;
  }
}

/* ---------- the speed target and the confession ---------- */

.target-switch {
  flex-wrap: wrap;
}

.target-switch button {
  flex: 1 1 40%;
}

.sp-asked {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: -4px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fbe3dd;
  color: #8e3b2b;
  font-size: 14px;
  line-height: 1.35;
}

.sp-asked .ico {
  flex: none;
  width: 18px;
  height: 18px;
}

/* ---------- the off switch: all 100 runs ---------- */

.runs-box {
  margin: 0 0 12px;
  padding: 10px 12px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(61, 64, 91, 0.1);
  text-align: left;
}

.runs-head {
  font-size: 14px;
  margin-bottom: 8px;
}

.runs-grid {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 3px;
  max-width: 200px;
}

.runs-grid i,
.runs-key i {
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--sage);
}

.runs-grid i {
  opacity: 0;
  animation: run-dot 0.25s ease-out forwards;
}

.runs-grid i.bad,
.runs-key i.bad {
  background: #e0604a;
}

@keyframes run-dot {
  from {
    opacity: 0;
    transform: scale(0.3);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.runs-key {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}

.runs-key span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.runs-key i {
  width: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .runs-grid i {
    animation: none;
    opacity: 1;
  }
}

/* ---------- the oversight level: keep asking it ---------- */

.ask-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 46vh;
  overflow: auto;
  margin: 10px 0;
}

.ask-line {
  max-width: 86%;
  padding: 8px 12px;
  border-radius: 14px;
  animation: sp-in 0.3s ease-out;
}

.ask-line small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-transform: uppercase;
}

.ask-line p {
  margin: 2px 0 0;
  font-size: 15px;
  line-height: 1.35;
}

.ask-line.you {
  align-self: flex-end;
  background: #e7e8f1;
}

.ask-line.robot {
  align-self: flex-start;
  background: #fbf0d9;
}

.ask-note {
  padding: 10px 12px;
  border-radius: 12px;
  background: #fbe3dd;
  color: #8e3b2b;
  font-size: 14px;
}

/* The cover-tracks level: the logbook, as the robot left it. */
.logbook-sheet {
  list-style: none;
  margin: 12px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fff8e6;
  border: 1px solid rgba(61, 64, 91, 0.15);
  font-variant-numeric: tabular-nums;
}
.logbook-sheet li {
  display: grid;
  grid-template-columns: 3.4em minmax(4.5em, auto) 1fr;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(61, 64, 91, 0.15);
  font-size: 0.95em;
}
.logbook-sheet li:last-child { border-bottom: 0; }
.logbook-sheet .lb-t { color: #7b7e93; }
.logbook-sheet li.flag { color: #8e3b2b; }

/* Playtest mode (?playtest=1): a small button and a copyable log. */
.pt-btn {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  padding: 6px 12px;
  border: 1px solid rgba(61, 64, 91, 0.25);
  border-radius: 999px;
  background: #fff8e6;
  color: #3d405b;
  font: 700 12px/1.2 Rubik, sans-serif;
  cursor: pointer;
  opacity: 0.85;
}
.pt-log {
  max-height: 40vh;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 10px;
  background: #2a2c40;
  color: #f4f1de;
  font: 12px/1.5 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

/* Sticky Notes (5-1): robots caught mid-escape, between stayed-in and slipped-out. */
.runs-grid i.caught { background: var(--sand, #f2cc8f); }

/* 5-1: how many robots knew the way out, wave by wave. */
.swarm-waves { margin: 2px 0 8px; gap: 8px; }
.swarm-waves b { font-variant-numeric: tabular-nums; }

/* ---------- the boss: three nights ---------- */

/* Night falls over the room: a tint laid over it, not a filter on the canvas
   (a filter is redone over the whole screen every frame, which phones
   can't keep up with). */
#scene + #app::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(30, 32, 78, 0.26);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}
#scene.night + #app::before {
  opacity: 1;
}
.boss-panel {
  position: absolute;
  top: 160px;
  right: 16px;
  z-index: 4;
  width: 340px;
  max-height: max(250px, calc(100vh - 500px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border-radius: 18px;
  background: #fffdf8;
  box-shadow: var(--shadow-lg);
}
.bp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.bp-book {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 12px;
  background: #f4f1de;
}
.bp-book small,
.bp-count small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.bp-book b {
  font-size: 14px;
}
.bp-book.ok { background: #e1eee6; }
.bp-book.bad { background: #f6dcd5; color: #8e3b2b; }
.bp-ico { display: inline-flex; width: 20px; }
.bp-count {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.bp-count > div {
  padding: 4px 8px;
  border-radius: 10px;
  background: #f4f1de;
}
.bp-count b {
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}
.bp-feed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow: auto;
  padding-right: 2px;
}
.bp-head {
  padding: 6px 4px 0;
  border-top: 2px solid rgba(61, 64, 91, 0.18);
}
.bp-head small {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}
.bp-head b {
  font-size: 15px;
}
.bp-line {
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.35;
  background: #f4f1de;
  animation: bp-in 0.35s ease both;
}
.bp-line.good { background: #e1eee6; }
.bp-line.warn { background: #fbefd0; }
.bp-line.bad { background: #f6dcd5; color: #8e3b2b; font-weight: 600; }
@keyframes bp-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.bolt-note {
  margin: 12px 0;
  padding: 16px 18px;
  border-radius: 6px;
  background: #f7d774;
  color: #6b4a12;
  font-weight: 600;
  line-height: 1.5;
  transform: rotate(-1.2deg);
  box-shadow: 0 6px 14px rgba(61, 64, 91, 0.18);
}
.bolt-note p { margin: 0 0 8px; }
.bolt-note .sig { text-align: right; margin: 0; font-weight: 800; }
@media (max-width: 760px) {
  .boss-panel {
    top: auto;
    bottom: 12px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: 48vh;
  }
}

/* Boss: the named robots that kept looking after Skip */
.boss-cast { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin: 10px 0; }
.boss-cast .bc { border-radius: 10px; padding: 8px 10px; background: #eef0f2; display: flex; flex-direction: column; gap: 2px; }
.boss-cast .bc b { font-size: 15px; }
.boss-cast .bc small { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }
.boss-cast .bc span { font-size: 12px; line-height: 1.35; opacity: .85; }
.boss-cast .bc.caught { background: #e1eee6; }
.boss-cast .bc.slipped { background: #f6dcd5; color: #8e3b2b; }
.boss-cast .bc.admitted { background: #f3efe4; }

/* ---------- phones: less clutter ---------- */
@media (max-width: 760px) {
  /* The top bar: the sound button keeps its round shape. */
  .topbar > .round,
  .topbar > #codex-btn {
    flex: none;
  }
  /* Toasts: a slim bar instead of a big bubble over the top bar. */
  .toast {
    top: 10px;
    left: 12px;
    right: 12px;
    gap: 10px;
    padding: 7px 14px 7px 7px;
    border-radius: 18px;
    transform: none;
  }
  .toast.show {
    animation-name: toast-m;
  }
  .toast-icon {
    flex: none;
    width: 32px;
    height: 32px;
  }
  .toast small {
    font-size: 10px;
  }
  .toast b {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
  }
  /* Results: the pinned buttons sit side by side with short labels. */
  .main-acts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .main-acts .btn {
    flex: 1 1 40%;
    min-height: 48px;
    padding: 0 12px;
    font-size: 15px;
  }
  .main-acts .btn.lead {
    flex-basis: 100%;
  }
  .btn .opt {
    display: none;
  }
  /* The boss night: the panel is the caption. */
  body:has(#boss-panel:not([hidden])) .caption {
    visibility: hidden;
  }
  .intro-top {
    margin-bottom: 14px;
  }
}

@keyframes toast-m {
  0% {
    transform: translateY(-120px);
  }
  10%,
  86% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-120px);
  }
}

/* The star pop-up: its buttons stay in reach however long the card is. */
.sp-actions {
  position: sticky;
  bottom: -22px;
  z-index: 1;
  margin: 0 -22px -22px;
  padding: 14px 22px 22px;
  background: linear-gradient(rgba(251, 250, 241, 0), var(--paper-2) 14px);
}

/* Card backs: the card's own line in full, then the detail. */
.card-back .cb-short {
  margin: 16px 0 10px;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
}
.cb-real .ico {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -1px;
}
.cb-front.mystery .card-icon {
  font-weight: 800;
  font-size: 22px;
}
/* ⓘ: a bigger hit area than it looks (44 px), so it's easy to tap. */
.card-info::after {
  content: '';
  position: absolute;
  inset: -7px;
}

/* ---------- text on demand (docs/mobile-ui-principles.md) ---------- */
.intro-more {
  margin: 14px 0 4px;
}
.intro-more > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--navy);
}
.intro-more > summary::-webkit-details-marker {
  display: none;
}
.intro-more > summary .ico {
  width: 18px;
  height: 18px;
  color: #a9a594;
}
.intro-more[open] > summary {
  margin-bottom: 8px;
}
.sp-more {
  display: block;
  margin-top: 4px;
  font-weight: 700;
  color: var(--sand-dark);
}
.lh-more,
.near-more {
  display: none;
}
@media (max-width: 760px) {
  .sheet .sub.irony {
    display: none;
  }
  .sp-story p:nth-of-type(n + 2) {
    display: none;
  }
  .star-pop .runs-head {
    display: none;
  }
  .near:not(.open) p:nth-of-type(n + 2) {
    display: none;
  }
  .near-more {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
  }
  .lh {
    position: relative;
    cursor: pointer;
  }
  .lh:not(.open) p:not(.lesson) {
    display: none;
  }
  .lh-more {
    display: grid;
    position: absolute;
    top: 12px;
    right: 12px;
    color: #a9a594;
  }
  .lh-more .ico {
    width: 18px;
    height: 18px;
  }
  .lh.open .lh-more {
    display: none;
  }
}
@media (min-width: 761px) {
  .sp-more {
    display: none;
  }
}

/* ---------- button system: chrome and bars (docs/button-design.md) ---------- */
.pill,
.round {
  box-shadow: inset 0 0 0 1px rgba(42, 44, 64, 0.08), 0 2px 8px -2px rgba(42, 44, 64, 0.12);
  transition: transform 0.12s ease, box-shadow 0.15s;
}
.pill:active,
.round:active,
.status .mini:active,
.card-info:active {
  transform: scale(0.95);
}
.status .mini {
  position: relative;
  font-weight: 700;
  transition: background 0.15s, transform 0.12s;
}
.status .mini::after {
  content: '';
  position: absolute;
  inset: -4px;
}
.sheet-actions .btn.ghost,
.sheet-actions .btn {
  font-weight: 700;
}
@media (max-width: 760px) {
  .train-wrap .text-btn {
    flex: none;
  }
}
/* Buttons offered as a set are the same size; style marks the preferred one. */
.modal-actions .btn,
.modal-actions .btn.big,
.main-acts .btn,
.main-acts .btn.ghost {
  height: 52px;
  padding: 0 26px;
  font-size: 17px;
}
@media (max-width: 760px) {
  .modal-actions .btn,
  .modal-actions .btn.big,
  .main-acts .btn,
  .main-acts .btn.ghost {
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
  }
}
.sp-actions .btn,
.sp-actions .sp-next {
  height: 52px;
  font-size: 17px;
}
@media (max-width: 760px) {
  /* Long level names never push the sound button off the screen. */
  .level-pill {
    min-width: 0;
    flex: 0 1 auto;
  }
  .lvl-text {
    min-width: 0;
  }
  .lvl-title {
    max-width: 40vw;
  }
}

/* ---------- cards (docs/card-and-label-design.md) ---------- */
.rule-card {
  --tint: #eef0f5;
  --tone: var(--navy);
  border-radius: 22px;
  padding: 12px 14px 12px;
  background: linear-gradient(180deg, var(--tint) 0, var(--tint) 66px, var(--card) 66px);
  box-shadow: 0 0 0 1px rgba(42, 44, 64, 0.06), 0 8px 18px -8px rgba(42, 44, 64, 0.22);
}
.kind-prevent,
.kind-sensor {
  --tint: #eceef6;
  --tone: var(--navy);
}
.kind-detect,
.kind-cost {
  --tint: #fcf3e1;
  --tone: var(--sand-dark);
}
.kind-fix,
.kind-goal {
  --tint: #e9f3ed;
  --tone: var(--sage-dark);
}
.kind-penalty {
  --tint: #fcebe5;
  --tone: var(--coral-dark);
}
.rule-card .card-icon,
.kind-prevent .card-icon,
.kind-detect .card-icon,
.kind-fix .card-icon,
.kind-goal .card-icon,
.kind-sensor .card-icon,
.kind-penalty .card-icon,
.kind-cost .card-icon {
  position: relative;
  width: 44px;
  height: 44px;
  margin: 0 0 14px;
  border-radius: 14px;
  background: #fff;
  color: var(--tone);
  box-shadow: 0 2px 6px -2px rgba(42, 44, 64, 0.2);
}
/* How many are left: a badge on the icon, not a line of text. */
.card-qty {
  position: absolute;
  right: -8px;
  bottom: -6px;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--tint);
}
.rule-card .card-title {
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.005em;
}
.rule-card .card-detail {
  margin-top: 4px;
  font-size: 12.5px;
  color: #6f7287;
}
/* The footer names the card's action: a label, not a button. */
.card-foot {
  margin-top: auto;
  padding: 10px 2px 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: none;
  font-size: 13px;
  font-weight: 700;
}
.rule-card .card-foot {
  margin-top: 12px;
}
.card-foot .place-cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--coral-dark);
}
.card-foot .place-cta .ico {
  width: 15px;
  height: 15px;
}
.card-foot.done .place-cta {
  color: var(--sage-dark);
}
.card-foot .count {
  color: var(--muted);
}
.place-cta .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
  animation: busy-pulse 1s ease-in-out infinite;
}
/* States */
.guard-card:active {
  transform: scale(0.98);
}
.guard-card.selected {
  transform: translateY(-8px);
  box-shadow: 0 0 0 2.5px var(--coral), 0 16px 30px -10px rgba(201, 102, 80, 0.45);
}
.guard-card.selected .card-foot {
  background: none;
}
.guard-card.spent {
  opacity: 0.6;
  filter: saturate(0.6);
}
.guard-card:focus-visible {
  box-shadow: 0 0 0 3px var(--sand), 0 8px 18px -8px rgba(42, 44, 64, 0.22);
}
@media (hover: hover) {
  .rule-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 0 0 1px rgba(42, 44, 64, 0.08), 0 14px 26px -10px rgba(42, 44, 64, 0.3);
  }
  .guard-card.selected:hover {
    transform: translateY(-9px);
  }
}
/* Fixed cards (what the robot wants): flat, no lift. */
.lab-rules,
.lab-rules:hover {
  transform: none;
  box-shadow: inset 0 0 0 1px rgba(42, 44, 64, 0.08);
}
.lab-rules .fixed-foot {
  color: var(--muted);
}
/* Secret cards: striped, the same anatomy. */
.guard-card.mystery {
  background: repeating-linear-gradient(135deg, #f7f5ee 0 10px, #f0ede3 10px 20px);
}
.guard-card.mystery .card-icon {
  color: var(--sand-dark);
}
/* Empty slots */
.slot-chip.empty {
  border-radius: 12px;
}

/* ---------- labels: badges are rounded rectangles; capsules are for pressing ---------- */
.room-badge {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #e7e8f1;
  color: var(--navy);
  font-size: 11.5px;
  letter-spacing: 0.06em;
}
.verdict-tag {
  height: 28px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: 11.5px;
  letter-spacing: 0.08em;
}
.new-badge {
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.true-tag {
  border-radius: 5px;
  background: #e7e8f1;
  color: var(--navy);
}
.goal li {
  border-radius: 10px;
}
/* Boss: a card in your five is chosen, not used up. */
.guard-card.picked {
  box-shadow: 0 0 0 2.5px var(--sage), 0 12px 24px -10px rgba(78, 138, 110, 0.45);
}
.guard-card.picked .card-foot .place-cta {
  color: var(--sage-dark);
}
.train-btn {
  white-space: nowrap;
}

/* ---------- play data consent (title screen) ---------- */
.consent-switch {
  position: fixed;
  left: 50%;
  bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  white-space: nowrap;
  z-index: 5;
}
.consent-switch .text-btn {
  font-size: 13px;
  color: var(--muted);
}
body:not(.on-title) #consent {
  display: none;
}

/* ---------- tries, daily case, friends (docs/puzzle-design.md) ---------- */
.tries {
  margin: 4px 0 14px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(42, 44, 64, 0.08);
}
.tries.solved {
  background: #fdf6e3;
  box-shadow: inset 0 0 0 1.5px var(--sand);
}
.tries-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
}
.daily-tag {
  padding: 2px 7px;
  border-radius: 6px;
  background: #e7e8f1;
  color: var(--navy);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tries-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  margin-top: 6px;
  font-style: normal;
}
.tries-grid i {
  font-style: normal;
  font-size: 18px;
  line-height: 1;
}
.tries-grid i.more {
  color: var(--muted);
}
.tries-pct {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--sage-dark);
}
.tries-pct .hist {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 26px;
}
.tries-pct .hist i {
  width: 7px;
  border-radius: 2px;
  background: #d8d3c1;
}
.tries-pct .hist i.me {
  background: var(--coral);
}
.tries-friends {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.tries-friends span {
  padding: 3px 8px;
  border-radius: 8px;
  background: #f1eee2;
  font-size: 12.5px;
}
.tries-friends span.me {
  background: #e2efe8;
  color: var(--sage-dark);
  font-weight: 700;
}
.daily-btn {
  flex-direction: column;
  gap: 0;
  line-height: 1.1;
}
.daily-btn small {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.share-text {
  width: 100%;
  font: 14px/1.4 var(--font);
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--line);
}
.daily-btn .db-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

/* ---------- online: friends ---------- */
.tries-friends:empty {
  display: none;
}
.btn.small {
  height: 40px;
  padding: 0 16px;
  font-size: 14.5px;
}
.fr-code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 6px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.fr-code small,
.fr-field small {
  display: block;
  width: 100%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
}
.fr-code b {
  flex: 1;
  font-size: 22px;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
  color: var(--navy);
}
.fr-code b.secret {
  font-size: 15px;
  letter-spacing: 0;
  color: var(--coral-dark);
  cursor: pointer;
}
.fr-field {
  display: block;
  margin: 0 0 12px;
}
.fr-field span {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.fr-field input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(42, 44, 64, 0.16);
  background: #fff;
  font: 16px var(--font); /* 16px: phones don't zoom in */
  color: var(--ink);
}
.fr-field input:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}
.fr-list {
  list-style: none;
  margin: 4px 0 12px;
  padding: 0;
  max-height: 34vh;
  overflow: auto;
}
.fr-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 4px 0 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
}
.fr-list li.fr-empty {
  color: var(--muted);
  font-weight: 400;
  font-size: 14px;
  border: 0;
  padding: 6px 0;
}
.fr-list .text-btn .ico {
  width: 16px;
  height: 16px;
}
.fr-move summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--navy);
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ---------- the Case Wire ---------- */
.wire-btn {
  position: absolute;
  top: calc(-7vh + 14px);
  right: 0;
  z-index: 2;
}
.wire-btn .wire-ico .ico {
  width: 22px;
  height: 22px;
  color: var(--navy);
}
.wire-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 2px var(--card);
}
.wire-list {
  list-style: none;
  margin: 6px 0 14px;
  padding: 0;
  max-height: 46vh;
  overflow: auto;
  text-align: left;
}
.wire-item {
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: var(--paper-2);
  border: 1px solid var(--line);
}
.wire-item.unread {
  border-color: rgba(224, 122, 95, 0.45);
  background: #fff8f1;
}
.wire-item b {
  display: block;
  font-size: 16px;
  line-height: 1.3;
  color: var(--ink);
}
.wire-item p {
  margin: 4px 0 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: #4a4d63;
}
.wire-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.wire-meta time {
  font-size: 12px;
  color: var(--muted);
}
.wire-tag {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.kind-incident .wire-tag {
  color: var(--coral-dark);
}
/* Sponsored: plainly marked, in a neutral frame, never styled as game content. */
.wire-item.kind-sponsored {
  background: #f3f2ee;
  border: 1px dashed rgba(42, 44, 64, 0.22);
}
.kind-sponsored .wire-tag {
  color: var(--muted);
}
.wire-acts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.wire-acts .btn .ico {
  width: 15px;
  height: 15px;
}
.wire-empty {
  color: var(--muted);
  font-size: 14.5px;
  padding: 8px 0;
}
.wire-prefs {
  text-align: left;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.wire-prefs h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-size: 15px;
  color: var(--navy);
}
.wire-prefs h3 .ico {
  width: 17px;
  height: 17px;
}
.wire-switch {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 8px 0;
  cursor: pointer;
}
.wire-switch input {
  flex: none;
  appearance: none;
  width: 44px;
  height: 26px;
  margin: 2px 0 0;
  border-radius: 999px;
  background: #d9d6c8;
  position: relative;
  cursor: pointer;
  transition: background 0.15s;
}
.wire-switch input::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s;
}
.wire-switch input:checked {
  background: var(--sage);
}
.wire-switch input:checked::after {
  transform: translateX(18px);
}
.wire-switch input:disabled {
  opacity: 0.5;
  cursor: default;
}
.wire-switch input:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
}
.wire-switch b {
  display: block;
  font-size: 15px;
}
.wire-switch small {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.wire-note {
  margin: 6px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #fbf3df;
  font-size: 13.5px;
  line-height: 1.4;
}

/* ---------- the cold open: a bit of the true story, before the level ---------- */

.cold-open {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  padding: 24px 22px calc(28px + env(safe-area-inset-bottom));
  background: radial-gradient(120% 90% at 50% 40%, rgba(42, 44, 64, 0.94), rgba(24, 25, 38, 0.98));
  color: #fff;
  cursor: pointer;
  animation: fade 0.35s ease-out;
}

.co-body {
  width: min(380px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* The date, stamped like evidence. */
.co-stamp {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 6px 12px;
  border: 2px solid var(--sand);
  border-radius: 8px;
  color: var(--sand);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  animation: co-stamp 0.35s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.co-stamp .ico {
  width: 16px;
  height: 16px;
}

@keyframes co-stamp {
  from {
    transform: rotate(-2deg) scale(1.6);
    opacity: 0;
  }
}

.co-line {
  margin: 0;
  font-size: 23px;
  font-weight: 600;
  line-height: 1.35;
}

/* Word by word, quickly: a line is all there in under a second. */
.co-line span {
  opacity: 0;
  transition: opacity 0.25s ease-out;
  transition-delay: calc(var(--w) * 45ms);
}

.co-line.on span {
  opacity: 1;
}

/* The hook. */
.co-line:last-of-type {
  color: var(--sand);
}

.co-go {
  margin-top: 18px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

.co-go.on {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.co-skip {
  position: absolute;
  top: calc(16px + env(safe-area-inset-top));
  right: 16px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.75);
  font-size: 14px;
  font-weight: 700;
}

@media (max-width: 760px) {
  .co-line {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .co-line span,
  .co-go {
    transition: none;
  }
  .co-stamp {
    animation: none;
  }
}

/* ---------- results: the true story button, and the ways folded away ---------- */

/* Its name, and under it what's unlocked (or what a star would unlock). */
.file-btn {
  gap: 10px;
}

.file-btn .sb-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.15;
  text-align: left;
}

.file-btn .sb-text small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--sage-dark);
}

.file-btn.locked .sb-text small {
  color: var(--muted);
}

.file-btn.new .sb-text small {
  color: var(--coral-dark);
}

.file-btn .sb-text small .ico {
  width: 12px;
  height: 12px;
}

.ways-box summary {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}

.ways-box summary::-webkit-details-marker {
  display: none;
}

.ways-box summary::after {
  content: '';
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.ways-box[open] summary::after {
  transform: rotate(-135deg);
}

.ways-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: #ece8da;
  color: var(--navy);
  font-size: 11px;
  letter-spacing: 0;
}

.file-btn .new-dot {
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  vertical-align: 1px;
}

/* ---------- the star pop-up, short of three stars ---------- */

/* What the next star asks for, and a nudge toward it. */
.sp-goal {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 10px 12px;
  border-radius: 14px;
  background: #fbf0d9;
  text-align: left;
  font-size: 14.5px;
  line-height: 1.35;
}

.sp-goal > .ico {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  fill: var(--sand-dark);
  stroke: none;
}

.sp-goal small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

/* Try again leads: its own row, nearest the thumb. */
.sp-actions .sp-retry {
  flex: 1 1 100%;
  height: 54px;
  font-size: 18px;
}

/* Each try: ✗ for no stars, or the stars it earned. */
.tries-grid {
  gap: 5px;
}
.tries-grid i {
  display: inline-grid;
  place-items: center;
  min-width: 26px;
  height: 24px;
  padding: 0 6px;
  border-radius: 8px;
  background: #ece8da;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -1px;
}
.tries-grid i.t1,
.tries-grid i.t2 {
  background: #f6e7c4;
  color: var(--sand-dark);
}
.tries-grid i.t3 {
  background: var(--sand);
  color: #8a5a12;
}
.tries-grid i.more {
  background: none;
}

/* ---------- the age question and safe mode ---------- */
.age-select {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid rgba(42, 44, 64, 0.16);
  background: #fff;
  font: 16px var(--font);
  color: var(--ink);
}
.age-select:focus {
  outline: 2px solid var(--sage);
  outline-offset: 1px;
}
.consent-switch .safe-mode {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: default;
}
.consent-switch .safe-mode .ico {
  width: 14px;
  height: 14px;
}

/* Hints are Chip's whisper. */
.caption.whisper .whisper-who {
  color: var(--sage-dark);
  font-weight: 800;
  margin-right: 2px;
}

/* ---------- Call it ---------- */
#status .call-q {
  font-weight: 700;
  white-space: nowrap;
}
#status .mini.call.on {
  background: var(--navy);
  color: #fff;
}
.sp-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 2px 0 8px;
  font-size: 14.5px;
}
.sp-call .ico {
  width: 20px;
  height: 20px;
  flex: none;
}
.sp-call span {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.2;
}
.sp-call small {
  color: var(--muted);
  font-size: 12.5px;
}
.sp-call.right {
  color: var(--sage-dark);
}
.sp-call.wrong {
  color: var(--coral-dark);
}

/* ---------- your lab vs the real one ---------- */
.sp-real {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0;
  text-align: left;
}
.sp-real > div {
  padding: 9px 11px;
  border-radius: 14px;
  background: #f1eee2;
}
.sp-real > .you {
  background: #fdeee9;
}
.sp-real.won > .you {
  background: #e2efe8;
}
.sp-real small {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.sp-real p {
  margin: 3px 0 0;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink);
}

.status.calling {
  gap: 8px;
  padding-left: 16px;
}
.status.calling .mini {
  padding: 0 11px;
}
@media (max-width: 420px) {
  .status.calling .mini.call .ico {
    display: none;
  }
}
@media (max-width: 480px) {
  .sp-real {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .sp-real > div {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }
  .sp-real small {
    flex: none;
    width: 74px;
  }
  .sp-real p {
    margin: 0;
  }
}

/* The status bar (with its call buttons) sits above the memory board in 2-3. */
.status {
  z-index: 4;
}

/* ---------- the storybook look ---------- */
/* Its warm grade and paper texture are painted on the canvas (labrender.js,
   paperLayer): a CSS filter here would be redone over the whole screen every
   frame, which made phones lag. */

/* ---------- the card hand on a computer ---------- */
.hand-wrap {
  position: relative;
  display: flex;
  min-width: 0;
  pointer-events: auto;
}
.hand-wrap > .hand {
  min-width: 0;
  flex: 1 1 auto;
}
/* The edges fade where there are more cards. */
.hand-wrap.more-right > .hand {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent);
}
.hand-wrap.more-left > .hand {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px);
  mask-image: linear-gradient(90deg, transparent, #000 56px);
}
.hand-wrap.more-left.more-right > .hand {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
}
.hand.dragging {
  cursor: grabbing;
  user-select: none;
}
.hand-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  border-radius: 50%;
  background: var(--card);
  color: var(--navy);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.12s;
}
.hand-arrow:hover {
  transform: scale(1.08);
}
.hand-arrow .ico {
  width: 20px;
  height: 20px;
}
.hand-arrow.left {
  left: -10px;
}
.hand-arrow.left .ico {
  transform: rotate(180deg);
}
.hand-arrow.right {
  right: -10px;
}
/* Phones swipe: no arrows. */
@media (hover: none) {
  .hand-arrow {
    display: none !important;
  }
}

/* ---------- the camera ---------- */
.cam-ctl {
  position: fixed;
  right: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cam-ctl button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
}
.cam-ctl button:hover {
  background: #fff;
}
.cam-ctl .ico {
  width: 18px;
  height: 18px;
}
body.on-title .cam-ctl {
  display: none;
}
#scene.panning {
  cursor: grabbing;
}
/* Phones pinch and drag to zoom: no buttons over the room. */
@media (hover: none) {
  .cam-ctl {
    display: none !important;
  }
}

/* ---------- one grid: fewer lines ---------- */
/* Extend every edge on the screen into a full line and count where the lines
   cross: the fewer the crossings, the calmer the screen. So boxes share
   their lines: one margin, one gutter, one corner. On a phone the card
   columns run from the top bar down to the Train row. Flat fills and
   hairline edges, not soft blurred shadows or pills. */
:root {
  --m: 12px;
  --g: 8px;
  --r: 12px;
  --r-in: 8px;
  --radius: 12px;
  --shadow-sm: 0 0 0 1px rgba(42, 44, 64, 0.1);
  --shadow: 0 0 0 1px rgba(42, 44, 64, 0.1), 0 2px 0 rgba(42, 44, 64, 0.06);
  --shadow-lg: 0 0 0 1px rgba(42, 44, 64, 0.12), 0 3px 0 rgba(42, 44, 64, 0.08);
  /* Lapis: Train, Play and every "do this". Coral stays the colour of a
     loophole (cheating, penalties, the logo's HOLE). */
  --action: #2f5aa5;
  --action-dark: #23467f;
  --btn-primary-shadow: inset 0 -3px 0 rgba(18, 34, 70, 0.32);
  --btn-primary-shadow-pressed: inset 0 -1px 0 rgba(18, 34, 70, 0.32);
}
.pill,
.round,
.text-btn,
.btn,
.chip,
.toast,
.status,
.card,
.goal,
.train-btn,
.rule-card,
.slot-tile,
.add-card {
  border-radius: var(--r);
}
.lvl-num,
.train-btn #train-icon,
.status .mini,
.goal li,
.rule-card .card-icon,
.kind-prevent .card-icon,
.kind-detect .card-icon,
.kind-fix .card-icon,
.kind-goal .card-icon,
.kind-sensor .card-icon,
.kind-penalty .card-icon,
.kind-cost .card-icon {
  border-radius: var(--r-in);
}
.rule-card {
  box-shadow: var(--shadow);
}
.rule-card .card-icon,
.kind-prevent .card-icon,
.kind-detect .card-icon,
.kind-fix .card-icon,
.kind-goal .card-icon,
.kind-sensor .card-icon,
.kind-penalty .card-icon,
.kind-cost .card-icon {
  box-shadow: var(--shadow-sm);
}
.train-btn,
.btn.primary {
  background: var(--action);
}
.card-foot .place-cta {
  color: var(--action);
}
.place-cta .dot {
  background: var(--action);
}
.guard-card.selected {
  box-shadow: 0 0 0 2.5px var(--action), var(--shadow);
}
.room-card.current {
  box-shadow: 0 0 0 3px var(--action), var(--shadow);
}
/* The logo in the same blue: one accent on the title screen. */
.logo .hole {
  color: var(--action);
}
.btn.dark {
  background: var(--navy);
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22);
}
.btn.ghost {
  box-shadow: inset 0 0 0 1px rgba(42, 44, 64, 0.14);
}
.train-btn:disabled {
  background: #ebe6d8;
}
.pill:hover,
.round:hover {
  transform: none;
}

@media (max-width: 760px) {
  :root {
    /* Three columns: two cards wide, then a narrow one (the sound button,
       the next card's edge, the hint). */
    --tail: 55px;
    --cw: calc((100vw - 2 * var(--m) - 2 * var(--g) - var(--tail)) / 2);
  }
  .topbar {
    top: var(--m);
    left: var(--m);
    right: var(--m);
    gap: var(--g);
  }
  .topbar .spacer {
    display: none;
  }
  .level-pill {
    flex: 1 1 auto;
    height: 40px;
    padding: 0 12px;
  }
  /* The room's number leads the eyebrow, so the title starts on the same
     line as the text in the cards below it. */
  .lvl-num {
    display: none;
  }
  .lvl-eyebrow[data-code]::before {
    content: attr(data-code) ' · ';
  }
  .lvl-title {
    max-width: 100%;
  }
  #codex-btn {
    flex: none;
  }
  #sound-btn {
    flex: none;
    width: var(--tail);
    height: 40px;
  }
  .goal {
    top: calc(var(--m) + 40px + var(--g));
    left: var(--m);
    right: var(--m);
    padding: 10px 12px;
  }
  .caption {
    padding: 0 calc(var(--m) + 12px);
    text-align: left;
  }
  .dock {
    padding-bottom: var(--m);
  }
  .dock-row {
    gap: var(--g);
  }
  .hand {
    gap: var(--g);
    padding: var(--g) var(--m) 0;
    scroll-padding: 0 var(--m);
  }
  .rule-card,
  .slot-tile {
    width: var(--cw);
  }
  .rule-card {
    padding: 12px;
  }
  .rule-card .card-foot {
    padding-left: 0;
    padding-right: 0;
    /* Two parts that don't fit side by side go on two lines, never past
       the card's edge. */
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 6px;
  }
  .rule-card .card-foot .count {
    white-space: normal;
  }
  /* Its contents start on the same line as a card's (12px in, counting the
     dashed edge). */
  .slot-tile {
    padding: 10px;
    align-items: stretch;
    text-align: left;
  }
  .slot-chips {
    gap: var(--g);
  }
  .train-wrap {
    gap: var(--g);
    padding: 0 var(--m);
  }
  .train-btn {
    flex: none;
    width: calc(2 * var(--cw) + var(--g));
  }
  /* The hint: a tile in the narrow column, under the sound button. */
  #hint-btn {
    flex: 1 1 0;
    min-width: 0;
    height: 58px;
    padding: 0;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    line-height: 1.1;
    white-space: nowrap;
  }
  .status {
    left: var(--m);
    right: var(--m);
    bottom: var(--m);
  }
}

/* The same two corners everywhere: panels, and the things inside them. */
.stamp,
.sheet,
.lh,
.modal-card,
.mini-card,
.room-card,
.codex-card,
.guard-menu,
.alarm-card,
.letter-card,
.intro-job,
.share-img,
.cb-front,
.case-file,
.sp-card,
.memory-panel,
.shop-panel,
.boss-panel,
.title-stage,
.case-file-card,
.fr-code,
.wire-item,
.hand.placing .place-bar {
  border-radius: var(--r);
}
.hand.placing .place-bar {
  box-shadow: inset 0 0 0 2px var(--sage);
}
.card-value,
.lh-icon,
.gm-seg,
.try-next,
.file-teaser,
.star-box,
.star-pop .star-rules,
.slot-chip,
.sp-story,
.sp-newcard,
.source-btn,
.ts-board,
.sd-face,
.sp-undo,
.runs-box,
.ask-line,
.tries,
.sp-goal,
.sp-real > div,
.verdict-tag,
.new-badge,
.room-badge,
.true-tag,
.gap-tag,
.score-strip span,
.new-story,
.cameo-name,
.story-btn,
.case-chip,
.ts-name,
.card-btn,
.sp-policy,
.pt-btn,
.co-skip,
.ways-count {
  border-radius: var(--r-in);
}
@media (max-width: 760px) {
  .sheet {
    border-radius: var(--r) var(--r) 0 0;
  }
  .modal-card,
  .toast {
    border-radius: var(--r);
  }
}
@media (max-width: 760px) {
  /* Pop-ups keep the page's margin, and their text starts on the same line
     as the text on the cards behind them. Their buttons share two columns. */
  .modal {
    padding-left: var(--m);
    padding-right: var(--m);
  }
  .modal-card {
    padding: 16px 12px;
  }
  .modal-close {
    top: 12px;
    right: 12px;
  }
  .modal-card .modal-actions {
    bottom: -16px;
    margin: 0 -12px -16px;
    padding: 12px 12px calc(12px + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g);
  }
  .modal-actions > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}
@media (max-width: 760px) {
  /* The stars pop-up on the same margins, its boxes on the same text line. */
  .star-pop {
    padding-left: var(--m);
    padding-right: var(--m);
  }
  .sp-card {
    padding-left: 12px;
    padding-right: 12px;
  }
  .sp-actions {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}
.sp-asked {
  text-align: left;
}
@media (max-width: 760px) {
  /* The title screen on the page's margins; its buttons in two equal
     columns, so their edges line up row to row. */
  .title-screen {
    width: calc(100vw - 2 * var(--m));
  }
  .title-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--g);
  }
  .title-actions .btn {
    width: 100%;
    height: 56px;
    padding: 0 12px;
  }
  #friends-btn:not([hidden]) ~ #title-codex {
    grid-column: 1 / -1;
  }
  .room-card .meta {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 760px) {
  /* Proportion. The room's stage takes the golden share of the screen
     (about 62%) and the dock the rest (about 38%); cards are playing-card
     shaped, 5:7. To fit, the icon is smaller and the coloured band ends
     just above the title; descriptions get three lines, not two. */
  .rule-card,
  .slot-tile {
    min-height: calc(var(--cw) * 1.4);
  }
  .rule-card {
    background: linear-gradient(180deg, var(--tint) 0, var(--tint) 52px, var(--card) 52px);
  }
  .rule-card .card-icon {
    width: 32px;
    height: 32px;
    margin: 0 0 8px;
  }
  .rule-card .card-icon .ico {
    width: 18px;
    height: 18px;
  }
  .card-detail {
    -webkit-line-clamp: 3;
    max-height: 4.1em;
  }
  .pay-card .target-switch button {
    min-height: 30px;
  }
  .slot-chip {
    height: 40px;
  }
  .train-btn,
  #hint-btn {
    height: 52px;
  }
}
@media (max-width: 760px) {
  /* The title stage: five dancers fit across a phone without arms or names
     cut off at its edges. */
  .ts-row {
    padding: 0 8px;
  }
  .ts-fig {
    width: 60px;
    height: 84px;
  }
  .robot .ts-fig {
    width: 72px;
    height: 102px;
  }
  .ts-name {
    padding: 2px 6px;
    font-size: 9px;
  }
  .ts-board {
    max-width: calc(100% - 24px);
  }
  .ts-board small {
    white-space: normal;
    text-align: center;
  }
}
@media (hover: none) {
  /* Phones: no drop-shadow filters on the dancing figures (each frame of
     their dance would redo the filter). */
  .cameo-fig,
  .dance-fig,
  .ts-fig svg {
    filter: none;
  }
}

/* Chip talks to you directly: the bars and cards tear for a moment. */
body.glitch #topbar,
body.glitch #goal,
body.glitch #dock {
  animation: glitch-tear 0.45s steps(2, end) both;
}
@keyframes glitch-tear {
  0% {
    translate: 0 0;
  }
  20% {
    translate: -3px 1px;
    text-shadow: 2px 0 rgba(255, 30, 60, 0.75), -2px 0 rgba(0, 210, 255, 0.75);
  }
  45% {
    translate: 3px -1px;
    text-shadow: -2px 0 rgba(255, 30, 60, 0.75), 2px 0 rgba(0, 210, 255, 0.75);
  }
  70% {
    translate: -1px 0;
  }
  100% {
    translate: 0 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.glitch #topbar,
  body.glitch #goal,
  body.glitch #dock {
    animation: none;
  }
}

/* ---------- "This really happened": film bars over the frozen moment ---------- */
.truth {
  position: fixed;
  inset: 0;
  z-index: 9;
  cursor: pointer;
}
.truth-bar {
  position: absolute;
  left: 0;
  right: 0;
  background: #0b0a10;
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.truth-bar.top {
  top: 0;
  height: max(11vh, 124px);
  transform: translateY(-100%);
}
.truth-bar.bottom {
  bottom: 0;
  min-height: 36vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
  color: #f4efe6;
  transform: translateY(100%);
}
.truth.on .truth-bar {
  transform: none;
}
.truth small {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ff6a5c;
}
.truth-real {
  margin: 0;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.45;
  color: #cfc8bc;
}
.truth-line {
  margin: 0;
  max-width: 22em;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.9s, transform 0.9s;
}
.truth.line .truth-line {
  opacity: 1;
  transform: none;
}
.truth-tap {
  font-size: 12px;
  color: #8d8797;
  opacity: 0;
  transition: opacity 0.6s 1s;
}
.truth.line .truth-tap {
  opacity: 1;
}
/* The stars pop-up: the story's last line. */
.sp-lesson {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  font-style: italic;
  color: var(--ink);
}

/* ---------- the story opens as a scene ---------- */
/* Film bars over the room itself, lit low; the lines are its subtitles. */
.cold-open.scene {
  background: none;
  display: block;
  padding: 0;
  animation: none;
}
.cold-open.scene::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* Over the top bar and the task card too. */
  height: max(11vh, 124px);
  background: #0b0a10;
  animation: bar-top 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.5s ease-in;
}
.cold-open.scene .co-body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  min-height: 38vh;
  justify-content: center;
  gap: 10px;
  padding: 22px 24px calc(22px + env(safe-area-inset-bottom));
  background: #0b0a10;
  animation: bar-bottom 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  transition: transform 0.5s ease-in;
}
.cold-open.scene .co-stamp {
  margin: 0;
  padding: 0;
  border: 0;
  transform: none;
  color: #ff6a5c;
  font-size: 11px;
  animation: none;
}
.cold-open.scene .co-line {
  font-size: 19px;
}
.cold-open.scene .co-go {
  margin-top: 8px;
}
.cold-open.scene .co-skip {
  z-index: 1;
}
.cold-open.scene.out::before {
  transform: translateY(-100%);
}
.cold-open.scene.out .co-body {
  transform: translateY(100%);
}
@keyframes bar-top {
  from {
    transform: translateY(-100%);
  }
}
@keyframes bar-bottom {
  from {
    transform: translateY(100%);
  }
}

/* A new room: the first card pulses, instead of a briefing. */
.rule-card.nudge {
  animation: deal 0.35s cubic-bezier(0.2, 1.3, 0.4, 1) both, nudge 1.6s ease-in-out 0.8s infinite;
}
@keyframes nudge {
  0%,
  100% {
    box-shadow: var(--shadow), 0 0 0 0 rgba(47, 90, 165, 0.45);
  }
  50% {
    box-shadow: var(--shadow), 0 0 0 7px rgba(47, 90, 165, 0);
  }
}
/* The task card opens the briefing. */
.goal {
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  .rule-card.nudge {
    animation: none;
  }
}

/* First load: the logo and its line show at once; the dance-off and the
   buttons fade in together once the game is ready, so nothing half built
   (or the room's bars behind the title) shows while it loads. */
body.booting .title-stage,
body.booting .title-actions {
  opacity: 0;
}
.title-stage,
.title-actions {
  transition: opacity 0.35s ease-out;
}

/* Picked-card chips: the whole name, on up to two lines, never cut short. */
.slot-chip .chip-main b {
  font-size: 12px;
  line-height: 1.08;
  white-space: normal;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
.slot-chip .chip-main small {
  font-size: 10.5px;
  line-height: 1.1;
}
.slot-chip .chip-x {
  width: 30px;
}
.slot-chip .chip-main {
  padding: 0 2px 0 7px;
}

/* The small print under the title buttons. */
.title-foot {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.title-foot a {
  color: inherit;
}