/* Universal Paperclips — mobile layout.
   Look: graph-paper notebook, ballpoint-navy ink, chunky pressable buttons,
   highlighter yellow for "you can do this right now". Dark mode is a blueprint. */

:root {
  --paper: #F4F6FB;
  --grid: rgba(45, 80, 190, 0.075);
  --ink: #1C2A66;
  --ink-2: #4E5A86;
  --wire: #A3AED0;
  --card: #FFFFFF;
  --edge: #1C2A66;
  --drop: #1C2A66;
  --hi: #FFE141;
  --on-hi: #1C2A66;
  --fill: rgba(255, 225, 65, 0.45);
  --primary: #1C2A66;
  --on-primary: #FFFFFF;
  --primary-drop: #0B1647;
  --console: #1C2A66;
  --console-text: #DCE3FF;
  --red: #E0412B;
  --green: #17865A;
  --focus: #2F6BFF;
  --battle: #0E1A48;

  --radius: 16px;
  --dock-h: 88px;
  --top-h: 150px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1E52;
    --grid: rgba(170, 195, 255, 0.07);
    --ink: #EEF2FF;
    --ink-2: #AAB6DE;
    --wire: #4B5C9C;
    --card: #1A2D6F;
    --edge: #DCE3FF;
    --drop: #050C2B;
    --hi: #FFE141;
    --on-hi: #0F1E52;
    --fill: rgba(255, 225, 65, 0.22);
    --primary: #FFE141;
    --on-primary: #0F1E52;
    --primary-drop: #A68F12;
    --console: #07113A;
    --console-text: #C9D3FF;
    --red: #FF6A55;
    --green: #4CD39A;
    --focus: #8FB0FF;
    --battle: #070F30;
    color-scheme: dark;
  }
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

* {
  font-variation-settings: "CASL" var(--casl, 0), "MONO" var(--mono, 0);
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Recursive", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior-y: none;
}

b, strong { font-weight: 750; }
small { font-size: 0.8125rem; }

button, select, input { font: inherit; color: inherit; }

button {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}
button:disabled { cursor: default; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

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

/* Covers the page until the engine's first tick; it fades away instead of blinking off. */
#cover {
  position: fixed; inset: 0; z-index: 90;
  background: var(--paper);
  transition: opacity 0.45s ease;
  transition: opacity 0.45s ease, display 0.45s allow-discrete;
}
#cover[style*="display: none"] { opacity: 0; }

/* ---------- header ---------- */

.top {
  max-width: 560px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  border-bottom: 2.5px solid var(--edge);
}

.mini {
  position: fixed; top: 0; left: 0; right: 0; z-index: 25;
  max-width: 560px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 8px) 16px 9px;
  background: var(--paper);
  border-bottom: 2.5px solid var(--edge);
  transform: translateY(-110%);
  transition: transform 0.18s ease-out;
  cursor: pointer;
}
.mini.on { transform: none; }
.mini-row { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.mini-row b {
  --casl: 1;
  font-size: 22px; font-weight: 950; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mini-label { color: var(--ink-2); font-weight: 600; font-size: 0.875rem; }
.mini-side {
  margin-left: auto; white-space: nowrap;
  font-weight: 800; font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
.mini-msg {
  --mono: 1;
  margin-top: 6px; padding: 4px 10px;
  border-radius: 8px;
  background: var(--console); color: #FFFFFF;
  font-size: 0.75rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mini-msg .prompt { color: var(--hi); font-weight: 800; }

.count {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 12px;
  margin-bottom: 10px;
}
.count-meta, #prestigeDiv { grid-column: 1 / -1; }

.top-buttons { display: flex; gap: 8px; margin: -2px -4px 0 0; }
.icon-btn {
  position: relative;
  display: grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border-radius: 14px;
  border: 2px solid var(--wire);
  background: transparent;
  color: var(--ink-2); text-decoration: none;
}
.icon-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:active { background: var(--grid); }
.icon-btn .dot {
  position: absolute; top: -5px; right: -5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--hi); border: 2px solid var(--edge);
  animation: badge-pop 0.4s cubic-bezier(.3,1.7,.5,1) both;
}
.icon-btn .dot[hidden] { display: none; }

#prestigeDiv {
  justify-self: start;
  margin-top: 6px;
  font-size: 0.8125rem; font-weight: 750;
  padding: 2px 10px; border-radius: 999px;
  background: var(--hi); color: var(--on-hi);
}

.count-num {
  --casl: 1;
  font-weight: 950;
  font-size: 46px;
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  white-space: normal;
}

.count-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.count-label { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); }
.crunched { display: none; }

.count-side { font-size: 0.9375rem; font-weight: 600; color: var(--ink-2); text-align: right; }
.count-side b {
  --casl: 1;
  font-size: 1.125rem; font-weight: 900; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.count-side:has(b:empty) { display: none; }

/* The message log. Latest line shows; tap to see the last five. */
.console {
  --mono: 1;
  position: relative;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--console);
  color: var(--console-text);
  font-size: 0.8125rem; line-height: 1.35;
  cursor: pointer;
}
.console-old { display: none; opacity: 0.6; }
.console-old > div { padding-left: 1.2em; text-indent: -1.2em; }
.console-old > div::before { content: "\00B7  "; white-space: pre; }
.console.open .console-old { display: block; margin-bottom: 4px; }
.console.open .console-old:empty { display: none; }
.console-new {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  color: #FFFFFF;
}
.console.open .console-new { display: block; }
.console .prompt { color: var(--hi); font-weight: 800; }
/* Soft breathing cursor; it stays solid while a new message is typing out. */
.pulsate { color: var(--hi); animation: breathe 1.2s ease-in-out infinite; }
.console.typing .pulsate { animation: none; }
@keyframes breathe { 50% { opacity: 0.15; } }

/* ---------- main + sections ---------- */

main {
  max-width: 560px; margin: 0 auto;
  padding: 4px 16px calc(var(--dock-h) + env(safe-area-inset-bottom) + 28px);
}

.panel { display: none; }
.panel.on { display: block; }

.sec { padding: 18px 0 20px; border-top: 2px solid var(--edge); }
.sec.tight { padding: 8px 0 12px; border-top: 0; }
.sec.first { border-top: 0; }

h2, h3 {
  --casl: 1;
  position: relative; z-index: 0;
  display: table;
  margin: 0 0 10px;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
h2 { font-size: 21px; font-weight: 850; }
h3 { font-size: 18px; font-weight: 850; }

/* When a section unlocks, a highlighter stroke swipes under its heading, then fades. */
h2::after, h3::after {
  content: ""; position: absolute; z-index: -1;
  left: -5px; right: -5px; bottom: 0.06em; height: 0.46em;
  border-radius: 4px;
  background: var(--hi);
  transform: scaleX(0); transform-origin: left center;
  opacity: 0;
}
h2.marked::after, h3.marked::after { animation: marker 2.6s cubic-bezier(.3,.7,.3,1) both; }
@keyframes marker {
  0% { transform: scaleX(0); opacity: 1; }
  22% { transform: scaleX(1); opacity: 1; }
  70% { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}

/* Numbers already shown elsewhere (funds, unused clips are in the header), rows
   stuck at zero in a new stage, sections with nothing in them yet, and the
   first screen before the first paperclip. See ui.js. */
.dup, .ui-zero, .ui-empty, .ui-held { display: none !important; }

/* Parts of the game the engine hides (at big turning points and in the ending)
   fade away instead of blinking out. */
.ui-ready .fx {
  transition: opacity 0.7s ease, translate 0.7s ease;
  transition: opacity 0.7s ease, translate 0.7s ease, display 0.7s allow-discrete;
}
.ui-ready .fx[style*="display: none"] { opacity: 0; translate: 0 -8px; }

.sub-sec {
  margin-top: 18px; padding: 14px 14px 16px;
  border: 2px solid var(--edge); border-radius: var(--radius);
  background: var(--card);
}

.row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 5px 0;
}
.row > b, .row > span:last-child:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.row > b { font-weight: 750; }
.row.big > b { --casl: 1; font-size: 21px; font-weight: 900; }
.row.sub { padding-top: 0; font-size: 0.875rem; color: var(--ink-2); }
#creativityDiv .row.sub.growing { color: var(--ink); font-weight: 700; }
.row.loss > b { color: var(--red); }
.row.total { margin-top: 4px; border-top: 1.5px dashed var(--wire); padding-top: 8px; }

.note { margin: 6px 0; font-size: 0.875rem; color: var(--ink-2); }
.note b { color: var(--ink); }

.meter {
  height: 12px; margin: 2px 0 8px;
  border: 2px solid var(--edge); border-radius: 999px;
  overflow: hidden; background: var(--card);
}
.meter > i {
  display: block; height: 100%; width: 0;
  background: var(--ink);
  border-radius: 999px;
  transition: width 0.25s linear;
}
.meter.full > i { background: var(--hi); }
.meter.low > i { background: var(--red); }

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

.buy, .btn, .step, .chip-btn, .toggle, .projectButton, .make, .seg {
  border: 2.5px solid var(--edge);
  background: var(--card);
  color: var(--ink);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}

.buy, .btn, .step, .chip-btn, .toggle, .projectButton {
  box-shadow: 0 4px 0 var(--drop);
  transition: transform 0.06s, box-shadow 0.06s;
}
.buy:active:not(:disabled), .btn:active:not(:disabled), .step:active:not(:disabled),
.chip-btn:active:not(:disabled), .toggle:active, .projectButton:active:not(:disabled),
.is-held {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--drop);
}

.buy:disabled, .btn:disabled, .step:disabled, .chip-btn:disabled, .projectButton:disabled {
  background: transparent;
  border-style: dashed;
  border-color: var(--wire);
  box-shadow: none;
  color: var(--ink-2);
}

/* ---------- showing the way ----------
   What you can afford, never which thing to do:
   dashed = not yet, yellow filling up inside = getting closer, solid = you can buy it. */

@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }

/* A buy button you can't afford yet fills with yellow as you save up. */
.buy { transition: transform 0.06s, box-shadow 0.06s, --p 0.5s ease-out; }
.buy:disabled {
  background: linear-gradient(90deg, var(--fill) calc(var(--p) * 100%), transparent calc(var(--p) * 100%));
}


/* An unaffordable project shows one bar per thing it costs. Striped past the
   point your current memory or batteries can reach. */
.needs { display: none; }
.projectButton:disabled .needs {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 5px 10px;
  margin-top: 10px;
}
.needs > span { font-size: 0.75rem; font-weight: 700; color: var(--ink-2); }
.needs > i {
  position: relative; display: block;
  height: 10px;
  border: 1.5px solid var(--wire); border-radius: 999px;
  overflow: hidden;
}
.needs > i::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hi);
  transform: scaleX(var(--v, 0)); transform-origin: left;
  transition: transform 0.5s ease-out;
}
.needs > i.capped::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(var(--cap, 1) * 100%);
  background: repeating-linear-gradient(-45deg, var(--wire) 0 3px, transparent 3px 7px);
}


/* A thing you can buy: name + cost on the left, how many you have on the right. */
.buy {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name count" "cost count";
  align-items: center; column-gap: 12px;
  width: 100%; min-height: 66px;
  margin: 12px 0 4px; padding: 10px 16px;
  border-radius: var(--radius);
  text-align: left;
}
.buy-name { grid-area: name; font-size: 1.0625rem; font-weight: 800; line-height: 1.2; }
.buy-cost { grid-area: cost; font-size: 0.875rem; font-weight: 550; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.buy:disabled .buy-cost { color: var(--ink-2); }
.buy-count {
  --casl: 1;
  grid-area: count;
  display: flex; flex-direction: column; align-items: flex-end;
  font-size: 26px; font-weight: 950; line-height: 1;
  font-variant-numeric: tabular-nums;
  max-width: 11em; text-align: right; overflow-wrap: anywhere;
}
.buy-count small { --casl: 0; font-size: 0.6875rem; font-weight: 650; color: var(--ink-2); letter-spacing: 0.02em; margin-bottom: 3px; }
/* Where the "you just bought one" pop grows from. */
.buy-count { transform-origin: 100% 60%; }
.chip-num { transform-origin: 0 100%; display: inline-block; }

.btn {
  min-height: 48px; padding: 8px 16px;
  border-radius: 14px;
  font-weight: 750;
}
.btn.big { min-height: 56px; font-size: 1.0625rem; }

.btn.ghost {
  min-height: 44px;
  background: transparent; box-shadow: none;
  border-width: 2px; border-color: var(--ink-2); color: var(--ink-2);
  font-size: 0.9375rem;
}
.btn.ghost:disabled { border-color: var(--wire); }
.btn.ghost { transition: background-color 0.2s, border-color 0.2s, color 0.2s; }
.btn.ghost.armed {
  background: var(--red); border-color: var(--red); color: #FFFFFF;
  border-style: solid;
}

.buygroup { margin-bottom: 8px; }
.multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.scrap { display: flex; align-items: center; gap: 12px; margin: 6px 0 4px; }
.refund { font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 6px; }
.pair > div { min-width: 0; }

/* Processors / memory: buttons that add one; solid when there's trust to spend. */
.chip-btn {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  width: 100%; min-height: 88px; padding: 10px 14px;
  border-radius: var(--radius);
  text-align: left;
}
.chip-num { --casl: 1; font-size: 32px; font-weight: 950; line-height: 1; font-variant-numeric: tabular-nums; }
.chip-name { font-weight: 750; margin-top: 4px; }
.chip-plus {
  position: absolute; top: 8px; right: 10px;
  font-size: 0.8125rem; font-weight: 800;
  padding: 1px 8px; border-radius: 999px;
  border: 2px solid currentColor;
}
.chip-btn:disabled .chip-plus { border-style: dashed; opacity: 0.7; }

/* Price / probe steppers */
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 6px; }
.stepper-label { display: flex; flex-direction: column; font-weight: 650; }
.stepper-label small { color: var(--ink-2); font-weight: 550; }
.stepper-label small b { color: var(--ink); }
.stepper-ctrl { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.step {
  width: 52px; height: 52px; padding: 0;
  border-radius: 14px;
  font-size: 28px; font-weight: 800; line-height: 1;
}
.step-val {
  --casl: 1;
  min-width: 3.2ch; text-align: center;
  font-size: 22px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.stat {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1.5px dashed var(--wire);
}
.stat:last-child { border-bottom: 0; }
.stat-text { display: flex; flex-direction: column; min-width: 0; }
.stat-text b { font-size: 1rem; }
.stat-text small { color: var(--ink-2); line-height: 1.3; margin-top: 2px; }
.stat-text .stat-live { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.stat-text .stat-live:empty { display: none; }
.stat-text .stat-live.loss { color: var(--red); }

/* On/off switches (WireBuyer, AutoTourney) */
.toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 56px; margin: 12px 0 0; padding: 8px 12px 8px 16px;
  border-radius: var(--radius);
  font-weight: 800; text-align: left;
}
.toggle small { display: block; font-weight: 550; color: var(--ink-2); }
.pill {
  flex: 0 0 auto;
  min-width: 56px; padding: 6px 12px;
  border-radius: 999px; text-align: center;
  font-size: 0.875rem; font-weight: 850;
  background: transparent; color: var(--ink-2);
  border: 2px dashed var(--wire);
}
.pill.on { background: var(--ink); color: var(--paper); border: 2px solid var(--ink); }

/* Segmented control (investment risk) */
.seg {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 3px; border-radius: 999px; margin: 4px 0 14px;
}
.seg button {
  min-height: 44px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-weight: 750; font-size: 0.9375rem;
}
.seg button[aria-checked="true"] { background: var(--ink); color: var(--paper); }

/* Swarm work/think slider */
.slider-wrap {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0 4px; font-weight: 750;
}
.slider {
  -webkit-appearance: none; appearance: none;
  flex: 1 1 auto; height: 44px; margin: 0;
  background: transparent;
}
.slider::-webkit-slider-runnable-track {
  height: 14px; border-radius: 999px;
  background: var(--card); border: 2.5px solid var(--edge);
}
.slider::-moz-range-track {
  height: 14px; border-radius: 999px;
  background: var(--card); border: 2.5px solid var(--edge);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 34px; height: 34px; margin-top: -12.5px;
  border-radius: 50%;
  background: var(--hi); border: 3px solid var(--edge);
  box-shadow: 0 3px 0 var(--drop);
}
.slider::-moz-range-thumb {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--hi); border: 3px solid var(--edge);
}

.swarm-act { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 10px; }
.swarm-act > span { font-size: 0.875rem; color: var(--ink-2); }

/* Quantum computing */
.qchips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin: 6px 0 14px; }
.qChip {
  aspect-ratio: 1; border-radius: 6px;
  background: var(--ink);
}
/* In the ending the chips are dismantled one by one: they shrink away.
   (Only scale is animated; the engine drives their brightness directly.) */
.ui-ready .qChip {
  transition: scale 0.5s cubic-bezier(.5,0,.75,0);
  transition: scale 0.5s cubic-bezier(.5,0,.75,0), display 0.5s allow-discrete;
}
.ui-ready .qChip[style*="display: none"] { scale: 0; }
.qrow { display: flex; align-items: center; gap: 14px; }
.qrow .btn { flex: 0 0 55%; }
#qCompDisplay { --casl: 1; font-weight: 850; font-variant-numeric: tabular-nums; }

/* ---------- projects ---------- */

#projectListTop { display: flex; flex-direction: column; gap: 18px; padding-top: 10px; }

.projectButton {
  position: relative;
  display: block; width: 100%;
  padding: 14px 16px 15px 16px;
  border-radius: var(--radius);
  text-align: left;
  font-size: 0.9375rem; line-height: 1.35;
}
.projectButton > span:first-child { --casl: 1; font-size: 1.125rem; font-weight: 900; }
.projectButton .cost {
  display: inline-block; margin: 0 0 0 4px;
  font-weight: 750; font-size: 0.875rem; font-variant-numeric: tabular-nums;
}
.projectButton > div { height: 4px; }
/* A little paperclip holding each project card to the page. */
.projectButton::before {
  content: ""; position: absolute; top: -12px; right: 18px;
  width: 14px; height: 34px;
  background: var(--ink-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 34'%3E%3Cpath d='M9.5 8v17a2.5 2.5 0 0 1-5 0V5.5a3.5 3.5 0 0 1 7 0V27a4.5 4.5 0 0 1-9 0V10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 34'%3E%3Cpath d='M9.5 8v17a2.5 2.5 0 0 1-5 0V5.5a3.5 3.5 0 0 1 7 0V27a4.5 4.5 0 0 1-9 0V10' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.projectButton:not(:disabled)::before { background: var(--edge); }
/* Starting over is the one project that destroys something. */
.projectButton.danger { border-color: var(--red); box-shadow: 0 4px 0 var(--red); }
.projectButton.danger::before { background: var(--red); }

/* The engine flickers new projects by toggling visibility; keep them steady.
   ui.js gives them a proper entrance instead. */
.projectButton { visibility: visible !important; }

/* A new project drops onto the page, then its paperclip slides down and clips on. */
.projectButton.arriving { animation: card-drop 0.55s cubic-bezier(.2,.9,.3,1.15) var(--d, 0ms) both; }
.projectButton.arriving::before { animation: clip-on 0.45s cubic-bezier(.3,1.5,.5,1) calc(var(--d, 0ms) + 0.3s) both; }
@keyframes card-drop {
  from { opacity: 0; transform: translateY(-18px) rotate(-1.5deg); }
  to { opacity: 1; transform: none; }
}
@keyframes clip-on {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}

/* A finished project: stamped "Done", its clip comes off, and it folds away. */
.projectButton.leaving { pointer-events: none; }
.projectButton.leaving::before { animation: clip-off 0.4s ease-in 0.35s both; }
@keyframes clip-off { to { opacity: 0; transform: translateY(-14px) rotate(12deg); } }
.stamp {
  --casl: 1;
  position: absolute; right: 16px; top: 50%;
  padding: 2px 12px;
  border: 3px solid var(--red); border-radius: 10px;
  color: var(--red);
  font-size: 1.375rem; font-weight: 950; line-height: 1.2;
  background: color-mix(in srgb, var(--card) 70%, transparent);
  translate: 0 -50%;
  rotate: -9deg;
  animation: stamp 0.32s cubic-bezier(.3,1.6,.5,1) both;
}
@keyframes stamp {
  from { opacity: 0; scale: 1.9; }
  to { opacity: 1; scale: 1; }
}

.empty { margin: 14px 0 0; color: var(--ink-2); font-weight: 600; }
#projectListTop:not(:empty) + .empty { display: none; }

/* ---------- strategy ---------- */

.money { margin-bottom: 4px; }

table.stocks {
  width: 100%; margin-top: 16px;
  border-collapse: separate; border-spacing: 0;
  table-layout: fixed;
  font-size: 0.8125rem; font-variant-numeric: tabular-nums;
  border: 2px solid var(--edge); border-radius: 12px; overflow: hidden;
  background: var(--card);
}
.stocks th, .stocks td { padding: 7px 6px; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stocks th:first-child, .stocks td:first-child { text-align: left; padding-left: 10px; font-weight: 750; }
.stocks th { font-weight: 750; color: var(--ink-2); border-bottom: 2px solid var(--edge); }
.stocks tbody tr:nth-child(even) td { background: var(--grid); }
.stocks td.up { color: var(--green); font-weight: 700; }
.stocks td.down { color: var(--red); font-weight: 700; }

.tourney-actions { display: flex; flex-direction: column; }
#tourneyButton .buy { margin-top: 4px; }

/* Tournaments: the kind of game and its payoffs, then one list that is both
   the strategy picker and the scoreboard. */
.tgame {
  margin: 16px 0 12px; padding: 12px 14px 10px;
  border: 2px solid var(--edge); border-radius: var(--radius);
  background: var(--card);
}
.tgame[hidden] { display: none; }
.tgame-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tgame-head h3 { margin: 0 0 8px; }
.tgame-round { font-size: 0.8125rem; font-weight: 750; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tgrid { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums; }
.tgrid th { padding: 4px; font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); line-height: 1.2; }
.tgrid thead th { text-align: center; }
.tgrid tbody th { text-align: left; width: 34%; }
.tgrid th span { display: block; color: var(--ink); font-weight: 800; }
.tgrid thead td { border: 0; }
.tgrid td { height: 46px; text-align: center; border: 2px solid var(--edge); color: var(--ink-2); font-size: 0.9375rem; }
.tgrid td b { --casl: 1; font-size: 1.375rem; font-weight: 950; color: var(--ink); }
.tgrid-key { margin: 8px 0 0; font-size: 0.8125rem; color: var(--ink-2); }
.tgrid-key b { color: var(--ink); }

.strat-list { display: grid; gap: 8px; margin: 12px 0 4px; }
.strat {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  width: 100%; min-height: 56px; padding: 8px 12px 8px 14px;
  border: 2px solid var(--wire); border-radius: 14px;
  background: var(--card); color: var(--ink);
  text-align: left;
}
.strat[aria-checked="true"] { border-color: var(--edge); border-width: 3px; padding: 7px 11px 7px 13px; box-shadow: 0 3px 0 var(--drop); }
.strat.queued { border-style: dashed; border-color: var(--edge); }
.strat-bar {
  position: absolute; inset: 0 auto 0 0; z-index: -1;
  width: calc(var(--s, 0) * 100%);
  background: color-mix(in srgb, var(--wire) 30%, transparent);
  transition: width 0.3s linear;
}
.strat[aria-checked="true"] .strat-bar { background: var(--fill); }
@media (prefers-color-scheme: dark) {
  .strat[aria-checked="true"] .strat-bar { background: rgba(220, 227, 255, 0.2); }
}
.strat-text { display: flex; flex-direction: column; min-width: 0; }
.strat-text b { font-size: 0.9375rem; font-weight: 850; letter-spacing: 0.01em; }
.strat-text small { color: var(--ink-2); line-height: 1.3; }
.strat-score { display: flex; flex-direction: column; align-items: flex-end; font-variant-numeric: tabular-nums; }
.strat-score b { --casl: 1; font-size: 1.0625rem; font-weight: 900; }
.strat-score small { font-weight: 750; color: var(--ink-2); }
.tresult { min-height: 1.4em; margin: 10px 0 8px; font-weight: 750; }
.tresult:empty { margin: 4px 0; }
#btnRunTournament { width: 100%; margin-bottom: 14px; }

/* ---------- space ---------- */

.explored { margin: 0 0 10px; font-weight: 600; color: var(--ink-2); }
.explored b {
  --casl: 1; display: block;
  font-size: 26px; font-weight: 950; color: var(--ink);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; line-height: 1.1;
}

.battle canvas {
  display: block; width: 100%; height: auto;
  aspect-ratio: 310 / 150;
  background:
    radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 48% 78%, rgba(255,255,255,.4), transparent),
    radial-gradient(1.5px 1.5px at 83% 35%, rgba(255,255,255,.5), transparent),
    radial-gradient(1px 1px at 67% 12%, rgba(255,255,255,.35), transparent),
    radial-gradient(1px 1px at 28% 60%, rgba(255,255,255,.3), transparent),
    var(--battle);
  border: 2.5px solid var(--edge); border-radius: 12px;
}
.battle-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.battle-legend span { display: inline-flex; align-items: center; gap: 6px; }
.battle-legend i { width: 10px; height: 10px; border-radius: 50%; }
.battle-legend .you { background: #FFE141; box-shadow: 0 0 0 1.5px var(--edge); }
.battle-legend .them { background: #FF7A93; box-shadow: 0 0 0 1.5px var(--edge); }
.battle-info {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px;
  margin-top: 10px;
}
.battle-info small { color: var(--ink-2); }
#victoryDiv {
  display: flex; gap: 8px; align-items: baseline;
  transition: opacity 0.35s ease-out, translate 0.35s ease-out, visibility 0.35s;
}
#victoryDiv[style*="hidden"] { opacity: 0; translate: 0 6px; }
#battleResult { --casl: 1; font-weight: 950; font-size: 1.125rem; }
.honor-delta { font-weight: 700; color: var(--ink-2); }

/* ---------- the dock: make button + tabs ---------- */

.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  max-width: 560px; margin: 0 auto;
  padding: 10px 12px calc(env(safe-area-inset-bottom) + 6px);
  background: var(--paper);
  border-top: 2.5px solid var(--edge);
}

.make {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 62px;
  border-radius: 18px;
  border-color: var(--edge);
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 5px 0 var(--primary-drop);
  --casl: 1;
  font-size: 1.25rem; font-weight: 900;
  transition: transform 0.05s, box-shadow 0.05s;
}
.make svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.make:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--primary-drop); }
.make:disabled {
  background: transparent; color: var(--ink-2);
  border-style: dashed; border-color: var(--wire); box-shadow: none;
}
.make:disabled span::after {
  content: " \2014  out of wire";
  --casl: 0; font-weight: 650; font-size: 0.9375rem;
}

.tabbar {
  position: relative;
  display: grid; grid-template-columns: repeat(var(--tabs, 4), 1fr);
  gap: 4px; margin-top: 10px;
  animation: rise 0.4s cubic-bezier(.2,.8,.2,1) both;
}
.tabbar[hidden] { display: none; }
@keyframes rise { from { opacity: 0; translate: 0 12px; } }
.tabbar button {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: 54px; padding: 4px 2px 2px;
  border: 0; background: transparent; color: var(--ink-2);
  font-size: 0.75rem; font-weight: 700;
  transition: color 0.25s;
  animation: tab-pop 0.45s cubic-bezier(.3,1.5,.5,1) both;
}
.tabbar button[hidden] { display: none; }
@keyframes tab-pop { from { opacity: 0; scale: 0.6; } }
.tabbar svg {
  position: relative; z-index: 1;
  width: 52px; height: 30px; padding: 3px 13px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar svg .fill { fill: currentColor; stroke: none; }
.tabbar button[aria-selected="true"] { color: var(--ink); font-weight: 850; }
.tabbar button[aria-selected="true"] svg { color: var(--paper); }

/* The dark pill behind the current tab; ui.js slides it between tabs. */
.tab-pill {
  position: absolute; left: 0; top: 0; z-index: 0;
  width: 52px; height: 30px;
  border-radius: 999px;
  background: var(--ink);
  pointer-events: none;
}
.tab-pill.glide { transition: transform 0.38s cubic-bezier(.3,1.3,.5,1), width 0.3s, height 0.3s; }
.tabbar[hidden] .tab-pill { display: none; }

.badge {
  position: absolute; top: 0; left: calc(50% + 12px);
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px;
  background: var(--hi); color: var(--on-hi);
  border: 2px solid var(--edge);
  font-style: normal; font-size: 0.6875rem; font-weight: 900; line-height: 16px;
  text-align: center;
  display: none;
}
.badge.dot { display: block; animation: badge-pop 0.4s cubic-bezier(.3,1.7,.5,1) both; }
@keyframes badge-pop { from { scale: 0; } }
.badge.dot { min-width: 14px; width: 14px; height: 14px; padding: 0; top: 2px; left: calc(50% + 14px); }

/* ---------- hypnodrone event ----------
   A slowly turning spiral while the words arrive one at a time.
   Replaces the original's four-second black-and-white strobe. */

#hypnoDroneEventDiv {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #0B1647;
}
#hypnoDroneEventDiv.playing { animation: fade-in 0.6s ease-out both; }
#hypnoDroneEventDiv.leaving { animation: fade-out 0.7s ease-in both; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }

.hypno-spiral {
  position: absolute; left: 50%; top: 50%;
  width: 180vmax; height: 180vmax;
  margin: -90vmax 0 0 -90vmax;
}
.hypno-spiral path { fill: none; stroke: #1F2F72; stroke-width: 7; stroke-linecap: round; }
#hypnoDroneEventDiv.playing .hypno-spiral {
  animation: spin 9s linear infinite, zoom 4.6s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes zoom { from { scale: 1.5; } to { scale: 1; } }

.hypnoDrone {
  --casl: 1;
  position: relative; z-index: 1;
  margin: 0; padding: 24px;
  color: #FFFFFF; text-align: center;
  font-size: min(21vw, 150px); font-weight: 950; line-height: 0.95;
}
.hypnoDrone span { display: block; }
.hypnoDrone span:nth-child(n+3) { color: #FFE141; }
#hypnoDroneEventDiv.playing .hypnoDrone span { animation: word-in 0.8s cubic-bezier(.2,.8,.2,1) both; }
#hypnoDroneEventDiv.playing .hypnoDrone span:nth-child(1) { animation-delay: 0.35s; }
#hypnoDroneEventDiv.playing .hypnoDrone span:nth-child(2) { animation-delay: 0.95s; }
#hypnoDroneEventDiv.playing .hypnoDrone span:nth-child(3) { animation-delay: 1.5s; }
#hypnoDroneEventDiv.playing .hypnoDrone span:nth-child(4) { animation-delay: 1.9s; }
@keyframes word-in {
  from { opacity: 0; scale: 0.4; filter: blur(12px); }
  to { opacity: 1; scale: 1; filter: blur(0); }
}
#hypnoDroneEventDiv.leaving .hypnoDrone { animation: drift-away 0.7s ease-in both; }
@keyframes drift-away { to { scale: 1.15; filter: blur(8px); } }

/* ---------- a paperclip hopping up from the Make button ---------- */

.clip-fly {
  position: fixed; left: 0; top: 0; z-index: 35;
  width: 24px; height: 24px;
  fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round;
  pointer-events: none;
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Narrow phones: slightly smaller steppers so labels don't get squeezed. */
@media (max-width: 360px) {
  .step { width: 46px; height: 46px; font-size: 24px; }
  .stepper-ctrl { gap: 6px; }
  .step-val { font-size: 19px; }
}

/* Short phones: a slimmer dock so the game gets more room. */
@media (max-height: 700px) {
  .dock { padding-top: 8px; }
  .make { min-height: 52px; font-size: 1.125rem; border-radius: 16px; }
  .tabbar { margin-top: 6px; }
  .tabbar button { min-height: 46px; padding-top: 2px; }
  .tabbar svg { height: 26px; padding: 2px 13px; }
}

/* Wider screens: same single column, just centered. */
@media (min-width: 600px) {
  .mini, .dock { border-left: 2.5px solid var(--edge); border-right: 2.5px solid var(--edge); }
}


/* ---------- toasts ---------- */

.toasts {
  position: fixed; left: 0; right: 0; top: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: calc(env(safe-area-inset-top) + 10px) 12px 0;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 440px;
  padding: 10px 14px 10px 10px;
  border: 2.5px solid var(--edge); border-radius: 16px;
  background: var(--card); color: var(--ink);
  box-shadow: 0 4px 0 var(--drop), 0 10px 30px rgba(10, 20, 60, 0.18);
  animation: toast-in 0.45s cubic-bezier(.2,.9,.3,1.2) both;
  cursor: pointer;
  touch-action: none;   /* swipe up to dismiss (plus/fx.js) */
  user-select: none; -webkit-user-select: none;
}
.toast.out { animation: toast-out 0.3s ease-in both; }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-16px) scale(.96); } }
.toast-icon {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--hi); border: 2px solid var(--edge);
}
.toast-icon svg { width: 22px; height: 22px; fill: var(--on-hi); stroke: none; }
.toast-body { display: flex; flex-direction: column; min-width: 0; }
.toast-body b { --casl: 1; font-weight: 900; line-height: 1.2; }
.toast-body span { font-size: 0.875rem; color: var(--ink-2); line-height: 1.3; }
.toast.trophy .toast-icon { background: #FFD23F; }

/* ---------- menu sheet ---------- */

.sheet-open, .sheet-open body { overflow: hidden; }
.sheet-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(8, 14, 40, 0.45);
}
.sheet-backdrop[hidden], .sheet[hidden] { display: none; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
  display: flex; flex-direction: column;
  max-width: 560px; max-height: 88vh; max-height: 88dvh; margin: 0 auto;
  border: 2.5px solid var(--edge); border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: var(--paper);
  box-shadow: 0 -10px 40px rgba(8, 14, 40, 0.25);
}
.sheet-top { position: relative; flex: 0 0 40px; }
.sheet-head { flex: 0 0 auto; }
.sheet-grip { width: 44px; height: 5px; margin: 0 auto; position: relative; top: 8px; border-radius: 999px; background: var(--wire); }
.sheet-head { display: flex; align-items: center; padding: 4px 12px 10px; border-bottom: 2px solid var(--edge); }
.sheet-tabs { display: flex; flex-wrap: nowrap; gap: 4px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
.sheet-tabs::-webkit-scrollbar { display: none; }
.sheet-tab {
  position: relative; flex: 0 0 auto;
  min-height: 40px; padding: 6px 12px;
  border: 2px solid transparent; border-radius: 999px;
  background: transparent; color: var(--ink-2);
  font-weight: 750; font-size: 0.9375rem;
}
.sheet-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.sheet-tab .dot {
  position: absolute; top: 2px; right: 2px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--hi); border: 2px solid var(--edge);
}
.sheet-close {
  position: absolute; top: 2px; right: 8px;
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 12px;
  background: transparent; color: var(--ink-2);
}
.sheet-close svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.sheet-body {
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 14px 16px calc(env(safe-area-inset-bottom) + 24px);
  -webkit-user-select: text; user-select: text;
}
.sheet-h { --casl: 1; margin: 18px 0 8px; font-size: 1.125rem; font-weight: 900; }
.sheet-h:first-child { margin-top: 4px; }
.sheet-p { margin: 0 0 10px; color: var(--ink-2); font-size: 0.9375rem; }
.sheet-p a { color: inherit; font-weight: 700; }
.sheet-credit { margin-top: 28px; }
.sheet-fact {
  margin: 0 0 16px; padding: 10px 14px;
  border-left: 3px solid var(--edge);
  color: var(--ink); font-weight: 650; line-height: 1.4;
}

.news {
  margin-bottom: 14px; padding: 12px 14px 4px;
  border: 2px solid var(--wire); border-radius: var(--radius);
}
.news.fresh { border-color: var(--edge); background: var(--card); box-shadow: 0 3px 0 var(--drop); }
.news-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.news h3 { margin: 0; font-size: 1.0625rem; }
.news-date { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 700; color: var(--ink-2); }
.news.fresh .news-date { color: var(--on-hi); background: var(--hi); padding: 0 8px; border-radius: 999px; }
.news ul { margin: 8px 0 8px; padding-left: 20px; }
.news li { margin: 4px 0; line-height: 1.4; }

.stats { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; margin: 0; }
.stats dt { color: var(--ink-2); }
.stats dd { margin: 0; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

.setting {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 60px; margin: 0 0 10px; padding: 8px 12px 8px 16px;
  border: 2.5px solid var(--edge); border-radius: var(--radius);
  background: var(--card); box-shadow: 0 4px 0 var(--drop);
  text-align: left;
}
.setting-text { display: flex; flex-direction: column; }
.setting-text small { color: var(--ink-2); }
.btn.wide { width: 100%; margin: 6px 0; }
.games-link { display: flex; align-items: center; justify-content: center; margin: 0 0 16px; text-decoration: none; box-shadow: 0 4px 0 var(--drop); }
.code {
  width: 100%; margin: 6px 0;
  padding: 10px 12px;
  border: 2px solid var(--wire); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font: 0.75rem/1.4 ui-monospace, Menlo, monospace;
  resize: vertical;
}

/* ---------- trophy room ---------- */

.trophy-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 8px; }
.trophy-count b { --casl: 1; display: block; font-size: 1.5rem; font-weight: 950; line-height: 1.1; }
.trophy-count span { font-size: 0.8125rem; font-weight: 650; color: var(--ink-2); }
.trophy-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.trophy-item {
  display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 12px;
  padding: 8px 12px 8px 8px;
  border: 2px dashed var(--wire); border-radius: 14px;
  color: var(--ink-2);
}
.trophy-item.got { border: 2px solid var(--edge); background: var(--card); color: var(--ink); box-shadow: 0 3px 0 var(--drop); }
.trophy-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 2px dashed var(--wire); }
.trophy-icon svg { width: 22px; height: 22px; fill: var(--wire); }
.trophy-item.got .trophy-icon { background: #FFD23F; border: 2px solid var(--edge); }
.trophy-item.got .trophy-icon svg { fill: #1C2A66; }
.trophy-text { display: flex; flex-direction: column; min-width: 0; }
.trophy-text b { line-height: 1.2; }
.trophy-text span { font-size: 0.8125rem; line-height: 1.3; }

/* ---------- moments (intro, welcome back) ---------- */

.moment-back {
  position: fixed; inset: 0; z-index: 130;
  display: grid; place-items: center;
  padding: 24px 20px;
  background: rgba(8, 14, 40, 0.5);
  animation: fade-in 0.25s ease-out both;
}
.moment-back.out { animation: fade-out 0.25s ease-in both; }
.moment {
  width: 100%; max-width: 380px;
  padding: 24px 20px 20px;
  border: 2.5px solid var(--edge); border-radius: 24px;
  background: var(--paper);
  box-shadow: 0 6px 0 var(--drop), 0 20px 60px rgba(8, 14, 40, 0.35);
  text-align: center;
  animation: moment-in 0.5s cubic-bezier(.2,1.2,.4,1) both;
}
.moment-back.out .moment { animation: moment-out 0.25s ease-in both; }
@keyframes moment-in { from { opacity: 0; transform: translateY(24px) scale(.9); } }
@keyframes moment-out { to { opacity: 0; transform: scale(.95); } }
.moment-art { display: grid; place-items: center; margin-bottom: 8px; }
.moment-clip {
  width: 64px; height: 64px; padding: 10px;
  border: 2.5px solid var(--edge); border-radius: 20px;
  background: var(--hi);
  fill: none; stroke: #1C2A66; stroke-width: 2.4; stroke-linecap: round;
  rotate: -12deg;
  animation: wiggle 2.6s ease-in-out 0.5s infinite;
}
@keyframes wiggle { 0%, 70%, 100% { rotate: -12deg; } 80% { rotate: 8deg; } 90% { rotate: -16deg; } }
.moment-kicker { margin: 0 0 4px; font-weight: 800; color: var(--ink-2); }
.moment-title { --casl: 1; display: block; margin: 0 0 8px; font-size: 1.75rem; font-weight: 950; line-height: 1.1; }
.moment-text { margin: 0 0 12px; font-size: 1.0625rem; line-height: 1.45; }
.moment-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.moment-list li {
  padding: 8px 12px; border-radius: 12px;
  background: var(--fill); font-weight: 800;
}
.moment-go { margin-top: 6px; }

/* ---------- liftoff ---------- */

.liftoff {
  position: fixed; inset: 0; z-index: 130; overflow: hidden;
  background: linear-gradient(#050A24, #13235E 70%, #1E3A8A);
  animation: fade-in 0.5s ease-out both;
}
.liftoff.out { animation: fade-out 0.7s ease-in both; }
.liftoff .stars {
  position: absolute; inset: -20% 0 0;
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 20%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, #fff, transparent),
    radial-gradient(1px 1px at 85% 60%, #fff, transparent),
    radial-gradient(2px 2px at 60% 45%, #FFE141, transparent),
    radial-gradient(1px 1px at 10% 80%, #fff, transparent);
  background-size: 180px 180px;
  animation: stars-fall 4.2s linear both;
}
@keyframes stars-fall { to { translate: 0 30%; } }
.liftoff .planet {
  position: absolute; left: 50%; bottom: -70vw;
  width: 140vw; height: 140vw; margin-left: -70vw;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 20%, #9FD1FF, #3B7BD8 45%, #1C2A66 75%);
  box-shadow: 0 0 60px rgba(159, 209, 255, 0.6);
  animation: planet-drop 4.2s cubic-bezier(.5,0,.8,.4) both;
}
@keyframes planet-drop { to { translate: 0 60%; } }
.liftoff .rocket {
  position: absolute; left: 50%; bottom: 22%;
  width: 56px; margin-left: -28px;
  animation: rocket-up 4.2s cubic-bezier(.6,0,.4,1) both;
}
.liftoff .rocket svg { display: block; width: 56px; height: 56px; fill: none; stroke: #FFE141; stroke-width: 2.4; stroke-linecap: round; }
.liftoff .flame {
  display: block; width: 18px; height: 60px; margin: -6px auto 0;
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
  background: linear-gradient(#FFF6C7, #FFB020 40%, rgba(224, 65, 43, 0));
  animation: flicker 0.12s ease-in-out infinite alternate;
  transform-origin: top center;
}
@keyframes flicker { to { transform: scaleY(1.25) scaleX(0.85); } }
@keyframes rocket-up {
  0% { translate: 0 0; }
  15% { translate: 0 6px; }
  100% { translate: 0 -120vh; }
}
.liftoff-text {
  --casl: 1;
  position: absolute; left: 0; right: 0; top: 30%;
  margin: 0; text-align: center;
  color: #FFFFFF; font-size: min(14vw, 72px); font-weight: 950;
  animation: word-in 0.9s cubic-bezier(.2,.8,.2,1) 1.6s both;
}

/* ---------- the picture at the top of each stage (plus/scene.js) ---------- */

.scene { padding-top: 16px; }
.scene canvas {
  display: block; width: 100%; height: 176px;
  border: 2px solid var(--edge); border-radius: var(--radius);
}
.scene-caption { margin: 8px 2px 0; font-size: 0.875rem; color: var(--ink-2); line-height: 1.4; }
.scene-caption:empty { display: none; }

/* Make paperclip, once machines have taken over: a small button on the Clips tab. */
.make-slot { padding-top: 14px; }
.make-slot[hidden] { display: none; }
.make.compact {
  min-height: 52px;
  border-radius: 16px;
  background: var(--card); color: var(--ink);
  border-color: var(--edge);
  box-shadow: 0 4px 0 var(--drop);
  font-size: 1.0625rem;
}
.make.compact:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--drop); }
.make.compact:disabled { background: transparent; box-shadow: none; border-color: var(--wire); }
.make-slot + .sec { border-top: 0; }
.dock.empty { display: none; }

/* ---------- the multiverse ---------- */

#prestigeDiv { display: none !important; } /* replaced by the universe chip */
.universe-chip {
  grid-column: 1 / -1; justify-self: start;
  margin-top: 6px; padding: 2px 10px;
  border-radius: 999px;
  background: var(--ink); color: var(--paper);
  font-size: 0.8125rem; font-weight: 800;
}
.universe-chip[hidden] { display: none; }

.mv {
  position: fixed; inset: 0; z-index: 125;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 28px) 18px calc(env(safe-area-inset-bottom) + 28px);
  color: #EEF2FF;
  background:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.6), transparent),
    radial-gradient(2px 2px at 85% 60%, rgba(255,225,65,.8), transparent),
    linear-gradient(#050A24, #13235E);
  background-size: 190px 190px, 230px 230px, 170px 170px, 260px 260px, 100% 100%;
  background-attachment: fixed;
  animation: fade-in 0.5s ease-out both;
  --paper: #0F1E52; --ink: #EEF2FF; --ink-2: #AAB6DE; --card: #1A2D6F; --edge: #DCE3FF; --drop: #050C2B;
  --wire: #4B5C9C; --on-hi: #0F1E52; --fill: rgba(255, 225, 65, 0.22);
  --primary: #FFE141; --on-primary: #0F1E52; --primary-drop: #A68F12;
}
.mv-inner { max-width: 480px; margin: 0 auto; }
.mv-kicker { margin: 0 0 4px; font-weight: 800; color: #FFE141; }
.mv-title { --casl: 1; display: block; margin: 0 0 14px; font-size: 2.1rem; font-weight: 950; line-height: 1.05; }
.mv-text { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.5; color: #DCE3FF; }
.mv-credits { margin: 22px 0 18px; font-size: 0.875rem; color: #AAB6DE; }
.mv-stats { margin: 6px 0 18px; }
.mv-record {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: 0.8125rem; font-weight: 800; color: #0F1E52; background: #FFE141;
  vertical-align: 2px;
}
.mv-reward {
  display: flex; flex-direction: column; align-items: center;
  margin: 10px 0 22px; padding: 18px;
  border: 2.5px solid #FFE141; border-radius: 20px;
  background: rgba(255, 225, 65, 0.08);
}
.mv-reward b { --casl: 1; font-size: 3rem; font-weight: 950; color: #FFE141; line-height: 1; font-variant-numeric: tabular-nums; }
.mv-reward span { margin-top: 6px; font-weight: 700; color: #DCE3FF; text-align: center; }
.mv-go { margin-top: 18px; }
.mv-go:disabled { opacity: .5; }
.mv-dust { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; }
.mv-dust b, .sheet .mv-dust b { --casl: 1; font-size: 1.75rem; font-weight: 950; }
.mv-dust b::before { content: "\2726 "; color: #F4B400; }
.mv-dust span { font-weight: 700; color: var(--ink-2); }

.bp-list { display: grid; gap: 10px; }
.bp {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px;
  border: 2px solid var(--edge); border-radius: var(--radius);
  background: var(--card);
}
.bp.maxed { border-style: dashed; border-color: var(--wire); background: transparent; }
.bp-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bp-text b { --casl: 1; font-size: 1.0625rem; font-weight: 900; }
.bp-text > span { font-size: 0.875rem; color: var(--ink-2); line-height: 1.35; }
.bp-pips { display: flex; gap: 4px; margin-top: 4px; }
.bp-pips i { width: 16px; height: 8px; border-radius: 999px; border: 1.5px solid var(--wire); }
.bp-pips i.on { background: #FFE141; border-color: #FFE141; }
.bp-level { font-size: 0.875rem; font-weight: 800; color: var(--ink-2); white-space: nowrap; }
.bp-buy { width: auto; min-width: 84px; min-height: 48px; margin: 0; padding: 6px 14px; display: flex; justify-content: center; }
.bp-buy .buy-name { font-size: 1rem; }
.bp-buy:not(:disabled) { background: #FFE141; color: #0F1E52; }

.law-list { display: grid; gap: 10px; margin-bottom: 6px; }
.law {
  display: flex; flex-direction: column; gap: 4px;
  width: 100%; padding: 12px 14px;
  border: 2.5px solid var(--wire); border-radius: var(--radius);
  background: var(--card); color: var(--ink);
  text-align: left;
}
.law > span { color: var(--ink-2); font-size: 0.9375rem; line-height: 1.4; }
.law[aria-pressed="true"] { border-color: #FFE141; box-shadow: 0 0 0 3px rgba(255, 225, 65, 0.35); }
.law-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.law-top b { --casl: 1; font-size: 1.125rem; font-weight: 900; }
.law-bonus { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 800; color: #FFE141; }
.law-bonus.minus { color: #FF8F7D; }


/* Tapping something you can't afford yet: a bubble says what's missing. */
.projectButton:disabled, .buy:disabled, .chip-btn:disabled, [id^="btnRaiseProbe"]:disabled { pointer-events: none; }
.need-bubble {
  position: absolute; z-index: 140;
  display: flex; flex-direction: column; gap: 2px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 8px 12px; border-radius: 12px;
  background: var(--ink); color: var(--paper);
  font-weight: 800; font-size: 0.9375rem; line-height: 1.3;
  box-shadow: 0 4px 0 var(--drop);
  pointer-events: none;
  animation: bubble-in 0.22s cubic-bezier(.2,1.3,.4,1) both;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.need-bubble.out { opacity: 0; transform: translateY(-6px); }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .need-bubble { animation: none; } }