/* =========================================================================
   Rust Removal: Museum Tycoon

   House style, lifted from hoodgrimoireproductions.com so the game reads as
   part of the studio rather than a bolted-on iframe: gold on near-black, a
   heavy condensed face for labels, a typewriter for body copy, 3px corners,
   thin gold-alpha hairlines, stone panels over a darkened wall.

   THE ONE LAYOUT RULE: the stage owns the middle of the screen and never
   scrolls. Everything else is chrome that shrinks around it. A scrubbing
   game where the page moves under your finger is not a scrubbing game.
   ========================================================================= */

:root {
  --bg:        #07070a;
  --bg-2:      #0c0c10;
  --stone:     #14141a;
  --stone-lt:  #1d1d25;

  --ink:       #e6dfd0;   /* aged parchment, not pure white */
  --ink-dim:   #a89c86;
  --ink-faint: #6f6553;

  --gold:      #d9a326;
  --gold-lt:   #f0c761;
  --gold-dim:  #8a6a2a;
  --edge:      rgba(217, 163, 38, 0.30);
  --edge-soft: rgba(217, 163, 38, 0.16);

  --green:     #6ee06a;
  --violet:    #9b6cff;
  --rust:      #b4561f;

  --display: "Franklin Gothic Medium", "Arial Narrow", Haettenschweiler,
             Impact, system-ui, sans-serif;
  --type:    "Courier New", Consolas, ui-monospace, monospace;

  --pad: clamp(10px, 3.2vw, 18px);
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--type);
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;      /* no pull-to-refresh mid-scrub */
}

/* The wall runs behind everything, darkened hard. Atmosphere, never
   competition for the small text sitting on top of it. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    linear-gradient(rgba(7,7,10,0.90), rgba(7,7,10,0.96)),
    url('../../assets/wall.jpg') center / cover no-repeat;
  z-index: -2;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 70% at 50% -10%, rgba(217,163,38,0.09), transparent 62%);
  z-index: -1;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
}

[hidden] { display: none !important; }

/* ---- Top bar ------------------------------------------------------------
   Money is the loudest thing on the page at all times. That is the whole
   pitch of an idle game and it should never require a screen change. */
.topbar {
  flex: none;
  display: grid;
  grid-template-columns: 2.4rem 1fr 2.4rem;
  align-items: center;
  gap: 0.5rem;
  padding: calc(0.7rem + env(safe-area-inset-top)) 0 0.7rem;
  border-bottom: 1px solid var(--edge-soft);
}

.purse { text-align: center; line-height: 1.15; }

.purse-amount {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.05rem, 4.6vw, 1.5rem);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--gold-lt);
  text-shadow: 0 0 18px rgba(217,163,38,0.30), 0 1px 2px #000;
}
.purse-amount.bump { animation: bump 0.26s var(--ease); }
@keyframes bump { 40% { transform: scale(1.11); } }

.purse-rate {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  color: var(--ink-faint);
}

.icon-btn {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--gold-dim);
  background: rgba(29,29,37,0.7);
  border: 1px solid var(--edge-soft);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.icon-btn:hover { color: var(--gold); border-color: var(--edge); }
.icon-btn[aria-pressed="false"] { color: var(--ink-faint); opacity: 0.6; }

/* ---- Screens ------------------------------------------------------------ */
.screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#screen-map, #screen-museum { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.masthead { text-align: center; padding: 1.4rem 0 1.1rem; }

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.5rem, 7vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(217,163,38,0.35), 0 2px 3px #000;
}
.wordmark.small { font-size: clamp(1.15rem, 5.4vw, 1.7rem); }
.wordmark .sub {
  display: block;
  font-family: var(--display);
  font-size: 0.40em;
  letter-spacing: 0.40em;
  color: var(--ink-dim);
  margin-top: 0.45em;
  text-shadow: none;
}

.tagline {
  margin: 0.9rem auto 0;
  max-width: 34rem;
  font-size: 0.74rem;
  line-height: 1.8;
  color: var(--ink-dim);
}

.section-label {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold-dim);
  text-align: center;
}

.rule {
  height: 1px;
  margin: 1.8rem 0 1.3rem;
  background: linear-gradient(90deg, transparent, var(--edge), transparent);
}

.credit {
  margin: 2rem 0 0.4rem;
  text-align: center;
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ---- Era tabs ----------------------------------------------------------- */
.tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  margin-bottom: 1rem;
}
.tab {
  /* min-width:0 is load-bearing. Grid items default to min-width:auto, so a
     long era name ("Mythic Treasury") sets a floor wider than its column and
     the whole page grows a horizontal scrollbar. */
  min-width: 0;
  overflow-wrap: anywhere;
  padding: 0.55rem 0.2rem;
  font-family: var(--display);
  font-size: clamp(0.52rem, 2.1vw, 0.64rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  background: rgba(20,20,26,0.85);
  border: 1px solid var(--edge-soft);
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.tab[aria-selected="true"] {
  color: var(--gold-lt);
  border-color: rgba(217,163,38,0.55);
  background: rgba(217,163,38,0.10);
}
.tab:disabled { opacity: 0.4; cursor: not-allowed; }

/* ---- Level plaques ------------------------------------------------------ */
.level-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
}

.plaque {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.4rem 0.55rem;
  background: linear-gradient(rgba(29,29,37,0.94), rgba(16,16,21,0.96));
  border: 1px solid rgba(217,163,38,0.22);
  border-radius: 3px;
  color: inherit;
  cursor: pointer;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 5px 16px rgba(0,0,0,0.5);
  transition: transform 0.16s var(--ease), border-color 0.16s, box-shadow 0.2s;
}
.plaque.open:hover, .plaque.open:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(217,163,38,0.75);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 10px 26px rgba(0,0,0,0.6),
              0 0 22px rgba(217,163,38,0.16);
  outline: none;
}
.plaque.locked { opacity: 0.42; cursor: not-allowed; }
.plaque.done { border-color: rgba(110,224,106,0.34); }

.plaque canvas { width: 46px; height: 46px; display: block; }

.plaque-no {
  font-family: var(--display);
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  color: var(--gold-dim);
}
.plaque-name {
  font-size: 0.56rem;
  line-height: 1.35;
  color: var(--ink-dim);
  min-height: 2.1em;
}
.plaque-tick {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  font-size: 0.6rem;
  color: var(--green);
}

.map-actions { display: flex; justify-content: center; margin-top: 1.4rem; }

/* ---- Buttons ------------------------------------------------------------ */
.btn {
  padding: 0.7rem 1.3rem;
  font-family: var(--display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid var(--edge);
  background: rgba(20,20,26,0.9);
  color: var(--gold-lt);
  cursor: pointer;
  transition: transform 0.14s var(--ease), border-color 0.15s, background 0.15s;
}
.btn:hover { border-color: rgba(217,163,38,0.7); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--gold); border-color: var(--gold-lt); color: #16130a; }
.btn-primary:hover { background: var(--gold-lt); }
.btn-ghost { background: transparent; color: var(--ink-dim); border-color: var(--edge-soft); }
.btn-ghost:hover { color: var(--ink); }

/* Rewarded-ad buttons wear the graffiti green so a paid-attention action is
   never mistaken for a plain one. */
.btn-ad { color: var(--green); border-color: rgba(110,224,106,0.45); background: rgba(110,224,106,0.09); }
.btn-ad:hover { border-color: rgba(110,224,106,0.85); }
.ad-flag {
  display: inline-block;
  margin-right: 0.45em;
  padding: 0.1em 0.4em;
  font-size: 0.8em;
  border: 1px solid currentColor;
  border-radius: 2px;
}

/* ---- The bench ---------------------------------------------------------- */
.bench-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 0 0.7rem;
}
.bench-era {
  display: block;
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bench-head h2 {
  margin: 0.2rem 0 0;
  font-family: var(--display);
  font-size: clamp(0.92rem, 4vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-lt);
}

.layer-pips { display: flex; gap: 0.3rem; }
.pip {
  width: 0.5rem;
  height: 1.5rem;
  border-radius: 2px;
  border: 1px solid var(--edge-soft);
  background: rgba(0,0,0,0.5);
  transition: background 0.3s, border-color 0.3s;
}
.pip.active { border-color: var(--gold); box-shadow: 0 0 10px rgba(217,163,38,0.4); }
.pip.done { background: rgba(110,224,106,0.5); border-color: rgba(110,224,106,0.6); }
.pip[data-layer="mud"].active        { background: #5a4126; }
.pip[data-layer="rust"].active       { background: var(--rust); }
.pip[data-layer="tarnish"].active    { background: #4a5054; }
.pip[data-layer="magic_seal"].active { background: var(--violet); }

/* The stage. touch-action:none is not styling — it is the fix for the page
   scrolling out from under a swipe. Do not remove it. */
.stage {
  position: relative;
  /* flex-grow must stay 0. With grow:1 the stage stretches to fill the
     column, the square is lost, and the toolbar is pushed off the bottom of
     a phone screen. Grow 0 / shrink 1 keeps it square and lets it give up
     height on short viewports; margin:auto centres what is left. */
  flex: 0 1 auto;
  min-height: 0;
  margin: auto;
  width: 100%;
  aspect-ratio: 1 / 1;
  /* max-height transfers through the aspect ratio, so a short viewport
     shrinks the width too and the square is preserved. */
  max-height: 100%;
  border: 1px solid var(--edge-soft);
  border-radius: 3px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(217,163,38,0.10), transparent 62%),
    linear-gradient(rgba(18,17,22,0.94), rgba(8,8,11,0.97));
  box-shadow: inset 0 0 70px rgba(0,0,0,0.7), 0 10px 34px rgba(0,0,0,0.6);
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: crosshair;
}
.stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;    /* the .stage element owns every pointer event */
}

.stage-hint {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(217,163,38,0.55);
  pointer-events: none;
  animation: pulse 1.9s ease-in-out infinite;
}
.stage-hint.wrong-tool { color: var(--rust); animation: shake 0.3s; letter-spacing: 0.2em; }
@keyframes pulse { 50% { opacity: 0.25; } }
@keyframes shake { 25% { transform: translateX(-54%); } 75% { transform: translateX(-46%); } }

/* ---- Progress ----------------------------------------------------------- */
.progress {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0 0.5rem;
}
.progress-bar {
  flex: 1 1 auto;
  height: 5px;
  border-radius: 2px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--edge-soft);
  overflow: hidden;
}
.progress-bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold-lt));
  transition: width 0.12s linear;
}
.progress-pct {
  flex: none;
  min-width: 3.2em;
  text-align: right;
  font-family: var(--display);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--gold-lt);
}

/* ---- Toolbar ------------------------------------------------------------ */
.toolbar {
  flex: none;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  padding-bottom: 0.6rem;
}
.tool {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  width: 4.6rem;
  padding: 0.5rem 0.2rem;
  background: rgba(20,20,26,0.9);
  border: 1px solid var(--edge-soft);
  border-radius: 3px;
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: 0.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.14s var(--ease);
}
.tool canvas { width: 26px; height: 26px; }
.tool[aria-pressed="true"] {
  color: var(--gold-lt);
  border-color: rgba(217,163,38,0.7);
  background: rgba(217,163,38,0.10);
  transform: translateY(-2px);
}
/* The tool that was just used in the wrong place. Red is reserved for this
   one meaning in the whole game. */
.tool.wrong {
  color: #e0554f !important;
  border-color: #e0554f !important;
  background: rgba(224, 85, 79, 0.14) !important;
  animation: tool-wrong 0.36s var(--ease);
}
@keyframes tool-wrong {
  20% { transform: translateX(-4px); }
  50% { transform: translateX(4px); }
  80% { transform: translateX(-2px); }
}

.tool.needed:not([aria-pressed="true"]) {
  border-color: rgba(110,224,106,0.5);
  color: var(--green);
  animation: nudge 1.6s ease-in-out infinite;
}
@keyframes nudge { 50% { transform: translateY(-3px); } }

.bench-actions { flex: none; display: flex; justify-content: center; padding-bottom: 0.3rem; }

/* =========================================================================
   THE BENCH: coat, dwell gauge, shelf, notebook, grade.

   The layout rule from the top of this file still governs: the stage owns
   the middle of the screen and never scrolls. Everything added here is
   chrome that has to shrink around it, which is why the shelf scrolls
   sideways rather than wrapping onto a second row — a second row of chips on
   a phone pushes the stage up and the square is lost.
   ========================================================================= */

.bench-actions { gap: 0.4rem; flex-wrap: wrap; }
.bench-actions .btn { padding: 0.5rem 0.85rem; font-size: 0.6rem; }

/* ---- The bath ----------------------------------------------------------- */

/* A flat wash in the chemical's colour over the whole stage rather than
   clipped to the relic: being submerged is the read we want, and a tint that
   follows the silhouette reads as a filter instead. It must never take a
   pointer event — while a chemical is on, scrubbing agitates it, and that
   gesture belongs to .stage. */
.stage-coat {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.30;
  background: radial-gradient(circle at 50% 45%,
              var(--coat, #5aa9d6) 0%,
              rgba(0,0,0,0) 78%);
  animation: coat-swell 3.4s ease-in-out infinite;
}
.stage-coat.burning {
  animation: coat-burn 0.55s ease-in-out infinite;
  opacity: 0.46;
}
@keyframes coat-swell { 50% { opacity: 0.42; } }
@keyframes coat-burn  { 50% { opacity: 0.66; filter: hue-rotate(-24deg); } }

/* ---- The dwell gauge ---------------------------------------------------- */

/* Inside the stage and low, so the eye never has to leave the relic to read
   the clock. */
.soak {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 6%;
  pointer-events: none;
}
.soak-track {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: rgba(0,0,0,0.72);
  border: 1px solid var(--edge-soft);
  overflow: hidden;
}
/* The safe window, drawn ONLY once the pairing is in the notebook. An
   untried chemical shows a bare track and you go on the hiss and the
   readout. That absence is the discovery mechanic, not an oversight. */
.soak-band {
  position: absolute;
  top: 0; bottom: 0;
  background: rgba(110,224,106,0.30);
  border-left: 1px solid rgba(110,224,106,0.85);
  border-right: 1px solid rgba(224,85,79,0.85);
}
.soak-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(217,163,38,0.5), var(--gold-lt));
  transition: width 0.1s linear;
}
.soak.is-ready   .soak-fill { background: linear-gradient(90deg, rgba(110,224,106,0.5), var(--green)); }
.soak.is-burning .soak-fill { background: linear-gradient(90deg, #8a2a1f, #e0554f); }
.soak.is-dead    .soak-fill { background: linear-gradient(90deg, #2e2e36, #55555f); }

.soak-read {
  margin-top: 0.45rem;
  text-align: center;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-lt);
  text-shadow: 0 1px 4px #000;
}
.soak.is-ready   .soak-read { color: var(--green); animation: pulse 0.7s ease-in-out infinite; }
.soak.is-burning .soak-read { color: #e0554f; animation: shake 0.24s infinite; }
.soak.is-dead    .soak-read { color: var(--ink-faint); animation: none; }

/* ---- The readout line --------------------------------------------------- */

/* Always present, never a modal. It carries which layer is up, how hard it
   is and what the bench thinks you should do next, which is what stands in
   for a tutorial. */
.bench-readout {
  flex: none;
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
  min-height: 1.7em;
}
.bench-readout b { color: var(--gold-lt); font-weight: normal; }
.bench-readout .warn { color: #e0554f; }
.bench-readout .good { color: var(--green); }

/* ---- The shelf ---------------------------------------------------------- */
.shelf-wrap { flex: none; margin-bottom: 0.55rem; overflow: hidden; }
.shelf {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding-bottom: 0.3rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.shelf::-webkit-scrollbar { display: none; }

.vial {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  min-width: 4.4rem;
  padding: 0.42rem 0.45rem 0.36rem;
  background: rgba(20,20,26,0.9);
  border: 1px solid var(--edge-soft);
  border-radius: 3px;
  color: var(--ink-faint);
  font-family: var(--display);
  font-size: 0.52rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.14s var(--ease);
}
.vial-swatch {
  width: 100%;
  height: 5px;
  border-radius: 3px;
  background: var(--vial, #888);
  opacity: 0.85;
}
.vial-cost { font-family: var(--type); font-size: 0.5rem; color: var(--ink-faint); letter-spacing: 0; }
.vial[aria-pressed="true"] {
  color: var(--gold-lt);
  border-color: rgba(217,163,38,0.7);
  background: rgba(217,163,38,0.10);
  transform: translateY(-2px);
}
.vial:disabled { opacity: 0.32; cursor: default; }

/* Three states worth telling apart at a glance, because the shelf is the
   only place the player's accumulated knowledge is visible while they are
   actually working: proven on this layer, proven useless on it, never
   tried. */
.vial.known-good { border-color: rgba(110,224,106,0.45); }
.vial.known-good .vial-cost { color: var(--green); }
.vial.known-dead { opacity: 0.45; }
.vial.untried .vial-cost::after { content: " ?"; color: var(--gold); }

/* ---- Buttons the bench adds --------------------------------------------- */
.btn-rinse {
  background: var(--green);
  border-color: #a7f0a4;
  color: #0a1a0a;
  animation: nudge 1.2s ease-in-out infinite;
}
.btn-rinse:hover { background: #a7f0a4; }
.btn-warn {
  color: #e0554f;
  border-color: rgba(224,85,79,0.55);
  background: rgba(224,85,79,0.10);
  animation: nudge 1.2s ease-in-out infinite;
}

/* ---- The grade ---------------------------------------------------------- */
.modal-wide { max-width: 30rem; }

.grade-badge {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  margin: 0 0 0.8rem;
}
.grade-letter {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--gold-lt);
  text-shadow: 0 0 18px rgba(217,163,38,0.45);
}
.grade-label {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.grade-badge[data-grade="S"] .grade-letter { color: #fff3d0; text-shadow: 0 0 26px rgba(240,199,97,0.9); }
.grade-badge[data-grade="B"] .grade-letter { color: var(--ink); text-shadow: none; }
.grade-badge[data-grade="C"] .grade-letter { color: var(--ink-dim); text-shadow: none; }
.grade-badge[data-grade="D"] .grade-letter { color: #e0554f; text-shadow: none; }

/* A single number teaches nothing. The breakdown is what tells a player
   which of their own decisions cost them the S. */
.grade-lines {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0.6rem 0.8rem;
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--edge-soft);
  border-radius: 3px;
  font-size: 0.62rem;
  line-height: 1.9;
  text-align: left;
}
.grade-lines li { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink-dim); }
.grade-lines li b { font-weight: normal; }
.grade-lines li.plus b { color: var(--green); }
.grade-lines li.minus b { color: #e0554f; }

/* ---- The oil rack ------------------------------------------------------- */
.oil-rack { display: grid; gap: 0.4rem; margin-bottom: 0.8rem; }
.oil-opt {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  background: rgba(20,20,26,0.9);
  border: 1px solid var(--edge-soft);
  border-radius: 3px;
  text-align: left;
  color: var(--ink-dim);
  font-family: var(--type);
  font-size: 0.64rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.oil-opt > span:first-child { align-self: stretch; border-radius: 3px; background: var(--oil, #888); }
.oil-opt[aria-pressed="true"] {
  border-color: rgba(217,163,38,0.7);
  background: rgba(217,163,38,0.10);
  color: var(--ink);
}
.oil-opt:disabled { opacity: 0.35; cursor: default; }
.oil-name { font-family: var(--display); letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.62rem; }
.oil-note { display: block; font-size: 0.56rem; color: var(--ink-faint); line-height: 1.6; margin-top: 0.15rem; }
.oil-fit { font-family: var(--display); font-size: 0.58rem; letter-spacing: 0.16em; }
.oil-fit.good { color: var(--green); }
.oil-fit.ok   { color: var(--gold-lt); }
.oil-fit.bad  { color: #e0554f; }
.modal-note { margin: 0 0 0.9rem; font-size: 0.6rem; color: var(--ink-faint); line-height: 1.7; min-height: 1.7em; }

/* ---- The notebook ------------------------------------------------------- */
.book { max-height: 46vh; overflow-y: auto; margin-bottom: 0.9rem; text-align: left; }
.book-chem {
  margin-bottom: 0.55rem;
  padding: 0.5rem 0.65rem;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--edge-soft);
  border-left: 3px solid var(--vial, var(--gold-dim));
  border-radius: 3px;
}
.book-chem h4 {
  margin: 0 0 0.15rem;
  font-family: var(--display);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.book-chem p { margin: 0 0 0.35rem; font-size: 0.58rem; line-height: 1.7; color: var(--ink-faint); }
.book-rows { display: grid; gap: 0.12rem; font-size: 0.58rem; }
.book-row { display: flex; justify-content: space-between; gap: 0.8rem; color: var(--ink-dim); }
.book-row b { font-weight: normal; }
.book-row.good b { color: var(--green); }
.book-row.dead b { color: var(--ink-faint); }
.book-empty { font-size: 0.62rem; color: var(--ink-faint); line-height: 1.8; }

/* The grade badge on a map plaque, so a relic worth re-cleaning says so
   from the map rather than only after you open it. */
.plaque-grade {
  position: absolute;
  top: 5px;
  left: 6px;
  font-family: var(--display);
  font-size: 0.62rem;
  color: var(--gold-lt);
  text-shadow: 0 1px 3px #000;
}
.plaque-grade[data-grade="S"] { color: #fff3d0; }
.plaque-grade[data-grade="D"] { color: #e0554f; }

/* ---- Museum ------------------------------------------------------------- */
.shop { display: grid; gap: 0.5rem; }

.upgrade {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 0.9rem;
  background: linear-gradient(rgba(29,29,37,0.94), rgba(16,16,21,0.96));
  border: 1px solid rgba(217,163,38,0.22);
  border-radius: 3px;
}
.upgrade h4 {
  margin: 0 0 0.25rem;
  font-family: var(--display);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.upgrade p { margin: 0; font-size: 0.62rem; line-height: 1.6; color: var(--ink-dim); }
.upgrade .lv { color: var(--ink-faint); letter-spacing: 0.14em; font-size: 0.58rem; }

.case-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.5rem;
  padding-bottom: 1.5rem;
}
.case {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.4rem 0.6rem;
  text-align: center;
  background:
    linear-gradient(rgba(34,26,18,0.9), rgba(14,11,9,0.96));
  border: 1px solid rgba(217,163,38,0.22);
  border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 5px 16px rgba(0,0,0,0.5);
}
.case canvas { width: 58px; height: 58px; }
.case-name { font-size: 0.58rem; line-height: 1.35; color: var(--ink-dim); }
.case-rate { font-family: var(--display); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--gold); }
.case[data-rarity="epic"]      { border-color: rgba(155,108,255,0.4); }
.case[data-rarity="legendary"] { border-color: rgba(217,163,38,0.6); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), 0 0 24px rgba(217,163,38,0.14); }

.empty-note {
  margin: 1.2rem auto 2rem;
  max-width: 26rem;
  text-align: center;
  font-size: 0.68rem;
  line-height: 1.8;
  color: var(--ink-faint);
}

/* ---- Modals ------------------------------------------------------------- */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(4,4,6,0.86);
  backdrop-filter: blur(3px);
  animation: fade 0.2s ease;
}
@keyframes fade { from { opacity: 0; } }

.modal {
  width: min(24rem, 100%);
  padding: 1.5rem 1.3rem 1.3rem;
  text-align: center;
  background:
    linear-gradient(rgba(29,29,37,0.96), rgba(12,12,16,0.98));
  border: 1px solid var(--edge);
  border-radius: 3px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: rise 0.26s var(--ease);
}
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }

.modal-kicker {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-size: 0.6rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold-dim);
}
.modal-title {
  margin: 0 0 0.9rem;
  font-family: var(--display);
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-lt);
  text-shadow: 0 0 22px rgba(217,163,38,0.3);
}
.modal-body { margin: 0 0 1.1rem; font-size: 0.72rem; line-height: 1.8; color: var(--ink-dim); }
.modal-relic { width: 150px; height: 150px; margin: 0 auto 0.9rem; display: block; }

.modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 0 0 1.2rem;
}
.modal-stats dt {
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.modal-stats dd {
  margin: 0.3rem 0 0;
  font-family: var(--display);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  color: var(--gold-lt);
}

.modal-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }

.ad-slate {
  display: grid;
  place-items: center;
  gap: 0.4rem;
  height: 8.5rem;
  margin-bottom: 1rem;
  border: 1px dashed rgba(217,163,38,0.3);
  border-radius: 3px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px);
}
.ad-slate-mark {
  font-family: var(--display);
  font-size: 1.6rem;
  letter-spacing: 0.3em;
  color: var(--gold-dim);
}
.ad-slate-note { font-size: 0.58rem; letter-spacing: 0.18em; color: var(--ink-faint); text-transform: uppercase; }

/* ---- Motion is decoration, not meaning ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Landscape phones: the stage would otherwise be taller than the
        viewport, so it gives up the aspect lock and centres instead. ------- */
@media (orientation: landscape) and (max-height: 560px) {
  .stage { aspect-ratio: auto; height: 100%; max-width: 100vh; }
  .masthead { padding: 0.8rem 0 0.6rem; }
}