@font-face {
  font-family: 'Lilita One';
  src: url(fonts/lilita-one.woff2) format('woff2');
  font-display: swap;
}
:root {
  --display: 'Lilita One', system-ui, sans-serif;
  --bg: #1c1410;
  --panel: #2c2018;
  --panel-2: #36281e;
  --panel-edge: #4a3424;
  --text: #f4e6d0;
  --muted: #b89c80;
  --accent: #ffcf4a;
  --danger: #ff6a4a;
  --good: #9ee05a;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%;
  background: radial-gradient(ellipse at 50% 0%, #3a281c 0%, var(--bg) 70%);
  background-color: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { opacity: .45; cursor: default; }
.muted { color: var(--muted); }
small { font-size: 12px; }
.ico { width: 22px; height: 22px; vertical-align: middle; }
.ico.big { width: 40px; height: 40px; flex: none; }

.app {
  height: 100%;
  max-width: 560px; margin: 0 auto;
}
.screen {
  height: 100%;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 10px);
}

/* ---- Hub: drawn with Pixi, see gfx.js ---------------------------------- */
#hub, #balance { padding: 0; }
#stage { position: relative; width: 100%; height: 100%; overflow: hidden; touch-action: none; }
#stage canvas { display: block; }
.stage-error { margin: 0; padding: 40px 24px; text-align: center; color: var(--muted); }
.manual-btn {
  font-size: 22px; width: 44px; height: 44px; border-radius: 12px;
  background: var(--panel); border: 2px solid var(--panel-edge);
}
.manual-btn.small { width: 40px; height: auto; font-size: 18px; flex: none; }
.manual-btn .ico { width: 26px; height: 26px; }
.card button, .mg-btn {
  width: 100%; padding: 14px; font-size: 19px; font-weight: 800;
  color: #2a1a0a; background: linear-gradient(#ffe27a, #e8a820);
  border: 0; border-radius: 14px; box-shadow: 0 4px 0 #8a5a00;
}
.card button:active, .mg-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a5a00; }

.toast {
  position: fixed; left: 50%; top: calc(env(safe-area-inset-top) + 56px); transform: translateX(-50%);
  padding: 10px 16px; border-radius: 12px; background: #3d2d1a; border: 2px solid var(--accent);
  font-weight: 800; opacity: 0; pointer-events: none; z-index: 25; white-space: nowrap;
}
.toast.show { animation: toast 1.8s ease; }
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, -10px); } 12%, 75% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---- Dive ------------------------------------------------------------- */
.hud { display: flex; gap: 8px; align-items: stretch; }
.turns {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 64px; padding: 6px 8px;
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 14px;
}
.turns .label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
#turns { font-size: 30px; font-weight: 800; color: var(--accent); line-height: 1.05; }
.turns.low #turns { color: var(--danger); }
.tally {
  flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px 4px;
  padding: 8px 6px 6px; background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 14px;
}
.tally-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 3px; font-weight: 700; font-size: 14px; }
.tally-item img { width: 22px; height: 22px; }
.tally-item .gain, .card li .gain {
  font-size: 11px; font-weight: 800; color: #1c2a0a; background: var(--good);
  border-radius: 8px; padding: 0 4px; line-height: 15px;
}
.tally-item .gain { position: absolute; top: -8px; right: -4px; }
.tally-item .gain:empty, .card li .gain:empty { display: none; }
.tally-item .gain.pop { animation: pop .35s ease; }
@keyframes pop { 0% { transform: scale(1.8); } 100% { transform: scale(1); } }
#chain-info {
  min-height: 30px; line-height: 1.3; padding: 6px 4px; text-align: center; font-weight: 700; font-size: 16px; color: var(--muted);
}
#chain-info.ok { color: var(--accent); }
#chain-info.notes { font-size: 12px; font-weight: 600; }
.board-wrap {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center;
}
#board {
  touch-action: none;
  background: linear-gradient(#2a1d14, #1a120c);
  border: 3px solid #5a4030; border-radius: 12px;
  box-shadow: inset 0 0 30px rgba(0,0,0,.6), 0 6px 20px rgba(0,0,0,.5);
}
.toolbar { display: flex; gap: 6px; overflow-x: auto; padding-top: 8px; }
.tool-btn {
  flex: 1 0 auto; min-width: 74px; position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px;
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 12px;
}
.tool-btn .ico { width: 30px; height: 30px; }
.tool-btn .tname { font-size: 11px; font-weight: 700; white-space: nowrap; }
.tool-btn .tcount { position: absolute; top: -6px; right: -2px; font-size: 11px; font-weight: 800; background: var(--accent); color: #2a1a0a; border-radius: 8px; padding: 0 5px; }
.tool-btn.aiming { border-color: var(--accent); box-shadow: 0 0 12px rgba(255, 207, 74, .5); }

.results {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10;
  background: rgba(10, 6, 4, .78); padding: 16px;
  animation: fade .3s ease;
}
.card {
  width: 100%; max-width: 340px; padding: 20px;
  background: var(--panel); border: 3px solid var(--panel-edge); border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.card h1 { margin: 0 0 12px; text-align: center; color: var(--accent); font-size: 28px; }
.card ul { list-style: none; margin: 0 0 12px; padding: 0; }
.card li {
  display: flex; align-items: center; gap: 10px; padding: 6px 4px;
  border-bottom: 1px solid rgba(255,255,255,.07); font-size: 17px;
}
.card li img { width: 32px; height: 32px; }
.card li .name { flex: 1; }
.card li .qty { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }
.card li .gain { font-size: 14px; padding: 1px 6px; }
#results-extra { font-size: 13px; text-align: center; margin: 0 0 12px; }
#results-extra:empty { display: none; }
@keyframes fade { from { opacity: 0; } }

/* ---- Overlays --------------------------------------------------------- */
.overlay {
  position: fixed; inset: 0; z-index: 30; display: flex; justify-content: center;
  background: rgba(10, 6, 4, .85); animation: fade .2s ease;
}

/* Mini games */
.mg { align-items: center; padding: 16px; }
.mg-card {
  width: 100%; max-width: 380px; padding: 18px; position: relative;
  background: var(--panel); border: 3px solid var(--panel-edge); border-radius: 20px;
}
.mg-card h2 { margin: 0 0 4px; color: var(--accent); font-size: 20px; text-align: center; }
.mg-help { margin: 0 0 14px; color: var(--muted); font-size: 13px; text-align: center; }
.mg-btn { touch-action: none; }
.mg-btn.held { transform: translateY(2px); box-shadow: 0 2px 0 #8a5a00; filter: brightness(1.15); }
.heat-wrap { display: flex; gap: 16px; justify-content: center; margin-bottom: 16px; }
.gauge {
  position: relative; width: 56px; height: 240px; border-radius: 28px; overflow: hidden;
  background: linear-gradient(to top, #2a3a6a, #3a2a2a 35%, #8a3a14 65%, #ff6a2a 90%, #fff0a0);
  border: 3px solid #111;
}
.gauge .band {
  position: absolute; left: 0; right: 0;
  background: rgba(255, 240, 160, .35); border-top: 2px solid #fff3b0; border-bottom: 2px solid #fff3b0;
  box-shadow: 0 0 14px rgba(255, 230, 120, .6) inset;
}
.gauge .needle {
  position: absolute; left: -4px; right: -4px; height: 6px; margin-bottom: -3px;
  background: #fff; border: 2px solid #111; border-radius: 3px;
}
.gauge .needle.good { background: var(--good); }
.gauge .needle.hot { background: #ffb070; }
.gauge .needle.cold { background: #7a9ae0; }
.gauge .melt-line { position: absolute; left: 0; right: 0; height: 0; margin-bottom: -2px; border-top: 4px dashed var(--danger); }
.heat-side { display: flex; flex-direction: column; gap: 8px; justify-content: space-between; }
.mg-stat { display: flex; flex-direction: column; background: var(--panel-2); border-radius: 10px; padding: 5px 12px; }
.mg-stat span { font-size: 11px; color: var(--muted); text-transform: uppercase; }
.mg-stat b { font-size: 22px; font-variant-numeric: tabular-nums; }
.mg-stat.paused b { color: var(--danger); animation: blink .8s steps(2, start) infinite; }
.mg-stat.mg-coal { flex-direction: row; align-items: center; gap: 6px; padding-left: 4px; }
.mg-coal img { width: 38px; height: 38px; flex: none; }
.mg-coal div { display: flex; flex-direction: column; }
.mg-lump { position: fixed; width: 22px; height: 22px; z-index: 40; pointer-events: none; }
@keyframes blink { to { visibility: hidden; } }
.mg-bar { height: 12px; margin: 0 0 8px; border-radius: 6px; background: var(--panel-2); border: 2px solid #111; overflow: hidden; }
.mg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #e8a820, #ffe27a); }
.mg-status { min-height: 19px; margin: 0 0 10px; text-align: center; font-size: 14px; font-weight: 800; color: var(--muted); }
.mg-status.good { color: var(--good); }
.mg-status.hot { color: #ffb070; }
.mg-status.bad { color: var(--danger); }
.mg-btn.empty { filter: grayscale(1) brightness(.7); }
.furnace-mouth {
  width: 100px; height: 64px; border-radius: 50px 50px 6px 6px;
  background: radial-gradient(ellipse at 50% 80%, #fff0a0, #ff8a2a 40%, #a02a0a 75%, #2a0a00);
  border: 4px solid #3a3a40;
}
#mg-mill { display: block; box-sizing: content-box; border-radius: 10px; border: 3px solid #111; background: #120a06; touch-action: none; }
/* The mill takes the whole screen, and its bed the full width. */
.mg.full { padding: 0; align-items: stretch; }
.mg-card.mill-screen {
  max-width: none; height: 100%; display: flex; flex-direction: column; border: 0; border-radius: 0;
  padding: calc(env(safe-area-inset-top) + 8px) 6px calc(env(safe-area-inset-bottom) + 10px);
  background:
    radial-gradient(circle at 14px 14px, rgba(255, 255, 255, .05) 2px, transparent 3px) 0 0 / 56px 56px,
    linear-gradient(#2c1e14, #140c08);
}
.mill-board { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center; margin-bottom: 10px; }
.mill-screen .mg-btn { padding: 18px; font-size: 22px; }
.mill-screen .mg-result { border-radius: 0; background: rgba(14, 9, 6, .9); }
.mg-result {
  position: absolute; inset: 0; border-radius: 17px; padding: 20px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;
  background: rgba(44, 32, 24, .96); animation: fade .25s ease;
}
.mg-result h3 { margin: 0; font-size: 30px; color: var(--accent); }
.mg-result p { margin: 8px 0 20px; }
/* Results as pictures: in, arrow, out, and a bonus badge. */
.fx { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 18px 0 24px; }
.fx-side { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fx-item { display: flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; background: var(--panel-2); border: 2px solid var(--panel-edge); border-radius: 14px; }
.fx-item img { width: 42px; height: 42px; }
.fx-item b { font-family: var(--display); font-weight: 400; font-size: 22px; }
.fx-arrow { width: 46px; height: 46px; flex: none; }
.fx-side.out .fx-item { border-color: var(--accent); box-shadow: 0 0 22px rgba(255, 207, 74, .35); animation: pop .45s .25s both cubic-bezier(.2, 1.6, .4, 1); }
.fx-side.out .fx-item img { width: 60px; height: 60px; }
.fx-side.out .fx-item b { font-size: 30px; color: var(--accent); }
.fx-side.out.bad .fx-item { border-color: var(--danger); box-shadow: none; }
.fx-side.out.bad .fx-item b { color: var(--text); }
.fx-badge { position: absolute; top: -34px; right: -26px; width: 66px; height: 66px; display: grid; place-items: center; animation: stamp .4s .6s both cubic-bezier(.2, 1.6, .4, 1); }
.fx-badge img { position: absolute; inset: 0; width: 100%; height: 100%; }
.fx-badge span { position: relative; font-family: var(--display); font-size: 22px; color: #2a1a0a; }
/* A part in the making: a ring fills around a ghost of the item, and a
   maxed-out bonus gets a full ring with a check. */
.gain-ring {
  --p: 0; --fill: var(--accent); --track: rgba(255, 255, 255, .2);
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--fill) calc(var(--p) * 100%), var(--track) 0);
}
.gain-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--panel-2); }
.gain-ring img { position: relative; width: 66%; height: 66%; opacity: .55; filter: grayscale(.3); }
.gain-ring.max { box-shadow: 0 0 16px rgba(255, 207, 74, .65); }
.gain-ring.max img { width: 56%; height: 56%; opacity: 1; filter: none; }
.fx-side.out .gain-ring { animation: pop .45s .85s both cubic-bezier(.2, 1.6, .4, 1); }
.mg-stat.mg-gain { flex-direction: row; align-items: center; gap: 8px; padding-left: 5px; }
.mg-gain .gain-ring { width: 40px; height: 40px; }
.mg-gain .gain-ring::before { inset: 4px; }
.mg-gain div { display: flex; flex-direction: column; }
.mg-gain b { transform-origin: left center; }
/* The furnace's ring goes round once for every part poured: fire orange while
   it cooks, and lit gold-white in the sweet spot, where it fills faster and
   does a quick little dance. */
.mg-gain .gain-ring { --fill: #f08a2c; }
.mg-gain .gain-ring.rush {
  --fill: #fff2b0;
  box-shadow: 0 0 0 2px #ffcf4a, 0 0 14px 3px rgba(255, 214, 90, .85);
  animation: giddy .34s linear infinite;
}
.mg-gain .gain-ring.rush img { opacity: 1; filter: none; }
.mg-gain .gain-ring.max { --fill: var(--accent); }
@keyframes giddy {
  0%, 50%, 100% { transform: none; }
  25% { transform: translateY(-3px) rotate(-8deg) scale(1.12); }
  75% { transform: translateY(-3px) rotate(8deg) scale(1.12); }
}
/* The pixel styles hop in two frames, a pixel of art at a time. */
@keyframes hop { 50% { transform: translateY(-4px); } }
@keyframes hop3 { 50% { transform: translateY(-3px); } }
@keyframes pop { from { transform: scale(.3); opacity: 0; } }
@keyframes stamp { from { transform: scale(2.2) rotate(-30deg); opacity: 0; } to { transform: rotate(12deg); } }

/* Manual */
.mpanel {
  width: 100%; max-width: 560px; height: 100%; display: flex; flex-direction: column;
  background: var(--bg);
  padding: calc(env(safe-area-inset-top) + 10px) 10px calc(env(safe-area-inset-bottom) + 6px);
}
.mhead { display: flex; align-items: center; justify-content: space-between; }
.mhead h2 { margin: 0; color: var(--accent); font-size: 22px; }
.mhead h2 .ico { width: 28px; height: 28px; vertical-align: -5px; }
.mclose { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; background: var(--panel); border: 2px solid var(--panel-edge); }
.mtabs { display: flex; gap: 4px; overflow-x: auto; padding: 10px 0 6px; flex: none; }
.mtabs button {
  flex: none; padding: 7px 11px; font-size: 13px; font-weight: 700;
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 10px; color: var(--muted);
}
.mtabs button.on { color: var(--accent); border-color: var(--accent); }
.msearch {
  flex: none; margin-bottom: 6px; padding: 10px 12px; font-size: 16px; color: var(--text);
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 10px; -webkit-user-select: text; user-select: text;
}
.mbody { flex: 1; overflow-y: auto; padding: 0 2px 30px; -webkit-user-select: text; user-select: text; }
.mbody p, .mbody li { font-size: 14.5px; line-height: 1.5; }
.mguide h3, .mgroup { color: var(--accent); margin: 18px 0 6px; font-size: 17px; }
.mguide ul, .mguide ol { padding-left: 20px; margin: 0; }
.mguide li { margin-bottom: 4px; }
.mentry { background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; scroll-margin-top: 4px; }
.mentry.flash { animation: flash 1.2s ease; }
@keyframes flash { 0%, 40% { border-color: var(--accent); box-shadow: 0 0 16px rgba(255, 207, 74, .5); } }
.mentry header { display: flex; align-items: center; gap: 10px; }
.mentry h4 { margin: 0; font-size: 17px; }
.mentry header small { color: var(--muted); }
.mentry > p { margin: 8px 0 0; }
.mrow { margin: 6px 0 0; padding-left: 66px; text-indent: -66px; }
.mlabel { display: inline-block; width: 66px; text-indent: 0; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); }
.mrow .mlink { text-indent: 0; }
.mlink {
  display: inline-flex; align-items: center; gap: 3px; margin: 1px 2px; padding: 1px 7px 1px 3px;
  background: var(--panel-2); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.mlink .ico { width: 18px; height: 18px; }
.mtier { margin-top: 8px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,.07); font-size: 14px; }
.mtier div { margin-top: 4px; }
.mtable { border-collapse: collapse; width: 100%; margin-top: 8px; font-size: 14px; }
.mtable th, .mtable td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255,255,255,.07); }
.mtable.recipes td:nth-child(2) { color: var(--muted); width: 16px; }

/* Game font for headings, big numbers, and buttons. */
.card h1, .card button, .mg-btn, .mg-card h2, .mg-result h3, .mhead h2, .mgroup, #turns, .toast {
  font-family: var(--display); font-weight: 400; letter-spacing: .02em;
}

/* ---- Pixel styles (see style.js) -----------------------------------------
   The same screens in pixel art: a pixel font, palette colours, square-stepped
   corners, hard-edged shading, and pictures scaled up without smoothing. */
@font-face {
  font-family: 'Jersey 10';
  src: url(fonts/jersey-10.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'VT323';
  src: url(fonts/vt323.woff2) format('woff2');
  font-display: swap;
}
html.px {
  /* Jersey 10 for headings and numbers, VT323 (an old terminal's) for reading.
     Both draw small, so every size is scaled to the x-height of the classic text. */
  font-size-adjust: 0.52;
  --display: 'Jersey 10', system-ui, sans-serif;
  --bg: #1c130d;
  --panel: #2d2016;
  --panel-2: #37281b;
  --panel-edge: #523d28;
  --text: #ece4d6;
  --muted: #b49a7c;
  --accent: #f0cc4a;
  --danger: #ee5a3c;
  --good: #8ccf4a;
  /* A step cut from each corner, a pixel of art (2px) a step. */
  --notch: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
}
html.px body {
  font-family: VT323, ui-monospace, monospace; font-weight: 400;
  /* Soot, dithered. */
  background: repeating-conic-gradient(#1c130d 0 25%, #241911 0 50%) 0 0 / 4px 4px;
}
html.px img, html.px canvas { image-rendering: pixelated; }
html.px * { font-weight: 400 !important; }
html.px button { font-family: VT323, ui-monospace, monospace; }
html.px .card h1, html.px .card button, html.px .mg-btn, html.px .mg-card h2, html.px .mg-result h3, html.px .mhead h2, html.px .mgroup,
html.px #turns, html.px .toast, html.px .fx-item b, html.px .fx-badge span, html.px .mentry h4, html.px .mguide h3,
html.px .tally-item, html.px .mg-stat b, html.px .card li .qty { font-family: var(--display); letter-spacing: .03em; }

/* Panels and buttons: square, with stepped corners and a hard edge. */
html.px .manual-btn, html.px .turns, html.px .tally, html.px .tool-btn, html.px .card, html.px .mg-card, html.px .mg-stat,
html.px .mg-bar, html.px .fx-item, html.px .mclose, html.px .mtabs button, html.px .msearch, html.px .mentry, html.px .toast,
html.px .card button, html.px .mg-btn, html.px #board, html.px #mg-mill, html.px .mlink {
  border-radius: 0; clip-path: var(--notch);
}
html.px .tally-item .gain, html.px .card li .gain, html.px .tool-btn .tcount { border-radius: 0; }
html.px .card, html.px .mg-card { box-shadow: none; border-width: 4px; }
html.px .card button, html.px .mg-btn {
  color: #241911;
  background: linear-gradient(#ffe98a 0 30%, #f0cc4a 30% 70%, #c99a2e 70%);
  box-shadow: inset 0 -4px 0 #9a7624;
}
html.px .card button:active, html.px .mg-btn:active, html.px .mg-btn.held { transform: translateY(2px); box-shadow: inset 0 -2px 0 #9a7624; }
html.px .mg-btn.held { filter: brightness(1.1); }
html.px .toast { background: #2d2016; border: 2px solid var(--accent); }
html.px .tool-btn.aiming { box-shadow: none; background: #433121; }

/* The dive board is drawn small and blown up (dive.js); this is its frame. */
html.px #board { background: #1c130d; border: 4px solid #523d28; box-shadow: none; }
html.px #mg-mill { border: 4px solid #0b0705; background: #140d09; }

/* The furnace: a banded heat gauge and a stepped fire. */
html.px .gauge {
  border-radius: 0; border: 4px solid #0b0705; clip-path: var(--notch);
  background: linear-gradient(to top, #24386c 0 12%, #2e1d3a 12% 30%, #6e2a16 30% 50%, #bd5a26 50% 68%, #dc7a34 68% 84%, #f0cc4a 84% 94%, #fff6d0 94%);
}
html.px .gauge .band { background: rgba(255, 246, 208, .3); border-color: #fff6d0; box-shadow: none; }
html.px .gauge .needle { border-radius: 0; border-color: #0b0705; }
html.px .gauge .melt-line { border-top-style: solid; }
html.px .furnace-mouth {
  border-radius: 0; border: 4px solid #333236; clip-path: polygon(16px 0, calc(100% - 16px) 0, calc(100% - 16px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 8px, calc(100% - 4px) 8px, calc(100% - 4px) 16px, 100% 16px, 100% 100%, 0 100%, 0 16px, 4px 16px, 4px 8px, 8px 8px, 8px 4px, 16px 4px);
  background: radial-gradient(ellipse at 50% 85%, #fff6d0 0 14%, #f0cc4a 14% 28%, #f0a050 28% 44%, #bd5a26 44% 62%, #6e2a16 62% 80%, #241911 80%);
}
html.px .mg-bar i { background: repeating-linear-gradient(90deg, #f0cc4a 0 6px, #c99a2e 6px 8px); }
html.px .mg-card.mill-screen {
  clip-path: none;
  background: repeating-conic-gradient(#241911 0 25%, #2d2016 0 50%) 0 0 / 4px 4px;
}
html.px .mg-result { border-radius: 0; background: rgba(28, 19, 13, .95); }
html.px .gain-ring, html.px .gain-ring::before { border-radius: 0; }
html.px .mg-gain .gain-ring { --fill: #dc7a34; }
html.px .mg-gain .gain-ring.rush { --fill: #fff6d0; box-shadow: 0 0 0 2px #0b0705, 0 0 0 4px #f0cc4a; animation: hop .18s steps(1) infinite; }
html.px .overlay { background: rgba(11, 7, 5, .88); }
html.px .mpanel { background: repeating-conic-gradient(#1c130d 0 25%, #241911 0 50%) 0 0 / 4px 4px; }

/* ---- Neon (see style.js) ----------------------------------------------------
   The mine after dark: deep indigo glass, lit edges, and lettering that glows
   like tube signs. The drawings and scenes are restyled in style.js; this is
   the page around them. */
html.neon {
  --bg: #060714;
  --panel: #10142e;
  --panel-2: #181d3a;
  --panel-edge: #2c3464;
  --text: #eaf6ff;
  --muted: #8b96c9;
  --accent: #ffd24a;
  --danger: #ff5a7a;
  --good: #54ff9c;
}
html.neon body {
  background:
    radial-gradient(circle at 18% 22%, rgba(90, 140, 255, .09) 0 2px, transparent 3px) 0 0 / 240px 220px,
    radial-gradient(circle at 72% 64%, rgba(255, 90, 224, .08) 0 2px, transparent 3px) 0 0 / 260px 240px,
    radial-gradient(ellipse at 50% -10%, #151b4a 0%, var(--bg) 62%);
  background-color: var(--bg);
}
html.neon .turns, html.neon .tally, html.neon .tool-btn, html.neon .card, html.neon .mg-card, html.neon .mg-stat,
html.neon .fx-item, html.neon .manual-btn, html.neon .mclose, html.neon .mtabs button, html.neon .msearch, html.neon .mentry {
  background: linear-gradient(#161b40, #0b0e24);
  border-color: var(--panel-edge);
  box-shadow: 0 0 0 1px rgba(90, 140, 255, .10), 0 0 18px rgba(60, 100, 255, .10);
}
html.neon .toast { background: #10142e; box-shadow: 0 0 18px rgba(255, 210, 74, .25); }
html.neon .card h1, html.neon .mhead h2, html.neon .mg-card h2, html.neon .mg-result h3, html.neon #turns,
html.neon .toast, html.neon .mgroup, html.neon .mguide h3, html.neon #chain-info.ok { text-shadow: 0 0 14px currentColor; }
html.neon .mtabs button.on { box-shadow: 0 0 14px rgba(255, 210, 74, .3), inset 0 0 0 1px rgba(255, 210, 74, .25); }
html.neon .card button, html.neon .mg-btn {
  color: #2a1a00;
  background: linear-gradient(#ffe9a0, #ffb300);
  box-shadow: 0 4px 0 #6e4600, 0 0 22px rgba(255, 190, 60, .35);
}
html.neon .card button:active, html.neon .mg-btn:active, html.neon .mg-btn.held {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #6e4600, 0 0 22px rgba(255, 190, 60, .45);
}
html.neon #board {
  background: linear-gradient(#0b0e26, #060818);
  border: 3px solid #2c3a7a;
  box-shadow: inset 0 0 36px rgba(0, 0, 0, .7), 0 0 26px rgba(70, 120, 255, .16);
}
html.neon .tool-btn.aiming { border-color: var(--accent); box-shadow: 0 0 16px rgba(255, 210, 74, .45); }
html.neon .results { background: rgba(3, 4, 14, .82); }
html.neon .overlay { background: rgba(3, 4, 14, .88); }
html.neon .mpanel { background: var(--bg); }
html.neon .card li { border-bottom-color: rgba(140, 170, 255, .12); }
html.neon .mg-bar { background: #0b0e24; border-color: #05060f; }
html.neon .mg-bar i { background: linear-gradient(90deg, #ffb300, #ffe9a0); box-shadow: 0 0 10px rgba(255, 190, 60, .6); }
html.neon .mg-gain .gain-ring { --fill: #ff8a3a; --track: rgba(120, 140, 255, .2); box-shadow: 0 0 10px rgba(255, 138, 58, .4); }
html.neon .mg-gain .gain-ring.rush { --fill: #fff; box-shadow: 0 0 0 2px #ffd24a, 0 0 12px 3px rgba(255, 210, 74, .95), 0 0 30px rgba(255, 236, 160, .6); }
html.neon .mg-gain .gain-ring.max { box-shadow: 0 0 16px rgba(255, 210, 74, .7); }
html.neon #mg-mill { border: 3px solid #2c3a7a; background: #060816; box-shadow: 0 0 26px rgba(70, 120, 255, .14); }
html.neon .mg-card.mill-screen { background: radial-gradient(ellipse at 50% 0%, #131a3e 0%, #060714 70%); box-shadow: none; }
html.neon .mg-result { background: rgba(8, 10, 30, .95); }
html.neon .furnace-mouth { border-color: #2c3464; }
html.neon .gauge { border-color: #05060f; }
html.neon .mlink { background: var(--panel-2); }
html.neon .fx-side.out .fx-item { box-shadow: 0 0 24px rgba(255, 210, 74, .4); }
html.neon .fx-side.out.bad .fx-item { box-shadow: none; }

/* ---- Blueprint (see style.js and blueprint.js) --------------------------------
   A drafting office: vellum paper, india ink, red pencil, and hand lettering.
   The drawings themselves are a second art set in blueprint.js/drafting.js. */
@font-face {
  font-family: 'Architects Daughter';
  src: url(fonts/architects-daughter.woff2) format('woff2');
  font-display: swap;
}
html.draft {
  --display: 'Architects Daughter', 'Segoe Print', cursive;
  --bg: #efe7d0;
  --panel: #faf4e2;
  --panel-2: #f0e6cc;
  --panel-edge: #b8a988;
  --text: #2a3450;
  --muted: #7c87a4;
  --accent: #2d5fb0;
  --danger: #c23b2a;
  --good: #3e8a4e;
}
html.draft body {
  font-family: 'Architects Daughter', 'Segoe Print', cursive;
  background:
    linear-gradient(rgba(45, 95, 176, .07) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(45, 95, 176, .07) 1px, transparent 1px) 0 0 / 26px 100%,
    linear-gradient(#f2ecd8, #e5dabc);
  background-color: var(--bg);
}
html.draft .turns, html.draft .tally, html.draft .tool-btn, html.draft .card, html.draft .mg-card, html.draft .mg-stat,
html.draft .fx-item, html.draft .manual-btn, html.draft .mclose, html.draft .mtabs button, html.draft .msearch, html.draft .mentry {
  background: #fdf9ec;
  border-color: #2a3450;
  box-shadow: 2px 3px 0 rgba(58, 44, 24, .14);
}
html.draft .toast { background: #fdf9ec; border-color: var(--danger); color: var(--danger); box-shadow: 2px 3px 0 rgba(58, 44, 24, .18); }
html.draft .mtabs button.on { border-color: var(--danger); color: var(--danger); }
html.draft .card button, html.draft .mg-btn {
  color: #b43a2c;
  background: linear-gradient(#fdf4da, #f2e2bc);
  border: 2.5px solid #b43a2c;
  border-radius: 10px;
  box-shadow: 0 4px 0 #b43a2c;
}
html.draft .card button:active, html.draft .mg-btn:active, html.draft .mg-btn.held {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #b43a2c;
}
html.draft .mg-btn.held { filter: brightness(1.04); }
html.draft #board {
  background: #f4edd9;
  border: 3px solid #2a3450;
  border-radius: 8px;
  box-shadow: 4px 5px 0 rgba(58, 44, 24, .16);
}
html.draft .tool-btn.aiming { border-color: var(--danger); box-shadow: 2px 3px 0 rgba(58, 44, 24, .14), 0 0 0 2px rgba(194, 59, 42, .35); }
html.draft .results { background: rgba(58, 44, 24, .42); }
html.draft .overlay { background: rgba(58, 44, 24, .5); }
html.draft .mpanel {
  background:
    linear-gradient(rgba(45, 95, 176, .07) 1px, transparent 1px) 0 0 / 100% 26px,
    linear-gradient(90deg, rgba(45, 95, 176, .07) 1px, transparent 1px) 0 0 / 26px 100%,
    #f0e8d2;
}
html.draft .card li { border-bottom-color: rgba(42, 52, 80, .15); }
html.draft .mg-bar { background: #e4d8ba; border-color: #2a3450; }
html.draft .mg-bar i { background: repeating-linear-gradient(90deg, #c23b2a 0 9px, #d95a44 9px 12px); }
html.draft #mg-mill { border: 3px solid #2a3450; background: #f2ead6; border-radius: 8px; box-shadow: 4px 5px 0 rgba(58, 44, 24, .16); }
html.draft .mg-card.mill-screen {
  background:
    linear-gradient(rgba(45, 95, 176, .06) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(45, 95, 176, .06) 1px, transparent 1px) 0 0 / 24px 100%,
    #ece2c8;
  box-shadow: none;
}
html.draft .mg-result { background: rgba(253, 249, 236, .97); }
html.draft .gauge { border-color: #2a3450; }
html.draft .furnace-mouth { border-color: #2a3450; }
html.draft .mlink { background: var(--panel-2); }
html.draft .fx-side.out .fx-item { border-color: var(--danger); box-shadow: 2px 3px 0 rgba(58, 44, 24, .14); }
html.draft .gain-ring { --fill: var(--danger); --track: rgba(42, 52, 80, .18); }
html.draft .gain-ring.max { box-shadow: 0 0 0 2px rgba(194, 59, 42, .4); }
/* Blueprint's furnace ring: inked in blue while it cooks, then red pencil
   inside a stroke of highlighter in the sweet spot. */
html.draft .mg-gain .gain-ring { --fill: var(--accent); }
html.draft .mg-gain .gain-ring.rush { --fill: var(--danger); box-shadow: 0 0 0 5px rgba(255, 226, 60, .85); }
html.draft .mg-gain .gain-ring.max { --fill: var(--danger); }

/* CRT: scanlines and a darkened edge over everything, like an old pit monitor. */
html.crt body::after {
  content: ''; position: fixed; inset: 0; z-index: 1000; pointer-events: none;
  background:
    repeating-linear-gradient(rgba(0, 0, 0, .22) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0, 0, 0, .55) 100%);
}

/* ---- Sprite style (see sprite.js) ------------------------------------------
   The pixel styles' bones (fonts, stepped corners, pictures scaled up square)
   with three screen pixels to a pixel of art, and the hand-drawn art's paints. */
html.sprite {
  --bg: #1b1311;
  --panel: #2c2019;
  --panel-2: #3e2e22;
  --panel-edge: #5c4432;
  --text: #f2e2c4;
  --muted: #b5905e;
  --accent: #ffd74b;
  --danger: #ff8f6b;
  --good: #7fd24c;
  --notch: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
}
html.sprite body, html.sprite .mg-card.mill-screen, html.sprite .mpanel {
  background: repeating-conic-gradient(#1b1311 0 25%, #221812 0 50%) 0 0 / 6px 6px;
}
html.sprite .card, html.sprite .mg-card, html.sprite .manual-btn, html.sprite .turns, html.sprite .tally, html.sprite .tool-btn,
html.sprite .mclose, html.sprite .mtabs button, html.sprite .msearch, html.sprite .mentry, html.sprite .mg-stat, html.sprite .fx-item { border-width: 3px; }
html.sprite .card button, html.sprite .mg-btn {
  color: #1b1311;
  background: linear-gradient(#fff3a8 0 30%, #ffd74b 30% 70%, #e59d20 70%);
  box-shadow: inset 0 -5px 0 #9c5f12;
}
html.sprite .card button:active, html.sprite .mg-btn:active, html.sprite .mg-btn.held { transform: translateY(3px); box-shadow: inset 0 -2px 0 #9c5f12; }
html.sprite .toast { background: #2c2019; border-width: 3px; }
html.sprite .tool-btn.aiming { background: #5c4432; }
html.sprite #board { background: #1b1311; border: 3px solid #5c4432; }
html.sprite #mg-mill { border: 3px solid #140d16; background: #1b1311; }
html.sprite .gauge {
  border: 3px solid #140d16;
  background: linear-gradient(to top, #1d3892 0 12%, #2b173c 12% 30%, #7d1e18 30% 50%, #a8431b 50% 68%, #ea7a3a 68% 84%, #ffd74b 84% 94%, #fff3a8 94%);
}
html.sprite .gauge .band { background: rgba(255, 243, 168, .3); border-color: #fff3a8; }
html.sprite .furnace-mouth {
  border-color: #434a58;
  background: radial-gradient(ellipse at 50% 85%, #fff3a8 0 14%, #ffd74b 14% 28%, #ea7a3a 28% 44%, #a8431b 44% 62%, #7d1e18 62% 80%, #2c2019 80%);
}
html.sprite .mg-bar i { background: repeating-linear-gradient(90deg, #ffd74b 0 6px, #e59d20 6px 9px); }
html.sprite .mg-gain .gain-ring { --fill: #ea7a3a; }
html.sprite .mg-gain .gain-ring.rush { --fill: #fff3a8; box-shadow: 0 0 0 3px #140d16, 0 0 0 6px #ffd74b; animation-name: hop3; }
html.junk .mg-gain .gain-ring.rush, html.valley .mg-gain .gain-ring.rush { animation-name: hop; }
html.sprite .mg-result { background: rgba(27, 19, 17, .95); }
html.sprite .overlay { background: rgba(20, 13, 22, .88); }

/* ---- Cavern style (see cave-art.js and the other cave-* files) ---------------
   The Sprite style's bones, painted for a cave: purple-blue rock, brass, lava. */
html.cave {
  --bg: #110c1e;
  --panel: #1c1530;
  --panel-2: #2a2244;
  --panel-edge: #403660;
  --text: #eef0f8;
  --muted: #9ea8c8;
  --accent: #ffd650;
  --danger: #ff8f86;
  --good: #66e0a0;
}
html.cave body, html.cave .mg-card.mill-screen, html.cave .mpanel {
  background: repeating-conic-gradient(#110c1e 0 25%, #171127 0 50%) 0 0 / 6px 6px;
}
html.cave .card button, html.cave .mg-btn {
  color: #110c1e;
  background: linear-gradient(#fff4b4 0 30%, #ffd650 30% 70%, #e2a030 70%);
  box-shadow: inset 0 -5px 0 #9a6420;
}
html.cave .card button:active, html.cave .mg-btn:active, html.cave .mg-btn.held { box-shadow: inset 0 -2px 0 #9a6420; }
html.cave .toast { background: #1c1530; }
html.cave .tool-btn.aiming { background: #403660; }
html.cave #board { background: #110c1e; border-color: #403660; }
html.cave #mg-mill { border-color: #0e0a1a; background: #1a1430; }
html.cave .gauge, html.cave .furnace-mouth { display: none; }
html.cave .mg-scene { display: flex; justify-content: center; margin: 0 0 10px; }
html.cave .mg-scene canvas { border: 3px solid #0e0a1a; clip-path: var(--notch); image-rendering: pixelated; max-width: 100%; }
html.cave .heat-wrap { justify-content: center; margin-bottom: 10px; }
html.cave .heat-side { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.cave .mg-bar i { background: repeating-linear-gradient(90deg, #ffd650 0 6px, #e2a030 6px 9px); }
html.cave .mg-result { background: rgba(17, 12, 30, .95); }
html.cave .overlay { background: rgba(14, 10, 26, .9); }

/* ---- Scrapyard style (see the junk-* files) -----------------------------------
   Two screen pixels to a pixel of art, and the junkyard's faded paints. */
html.junk {
  --bg: #201b16;
  --panel: #2c2620;
  --panel-2: #3a332b;
  --panel-edge: #55493d;
  --text: #ece4cf;
  --muted: #a39a8c;
  --accent: #e8c85a;
  --danger: #d98a7a;
  --good: #8fa85c;
  --notch: polygon(0 4px, 2px 4px, 2px 2px, 4px 2px, 4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px,
    100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%,
    4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px));
}
html.junk body, html.junk .mg-card.mill-screen, html.junk .mpanel {
  background: repeating-conic-gradient(#201b16 0 25%, #261f1a 0 50%) 0 0 / 4px 4px;
}
html.junk .card, html.junk .mg-card, html.junk .manual-btn, html.junk .turns, html.junk .tally, html.junk .tool-btn,
html.junk .mclose, html.junk .mtabs button, html.junk .msearch, html.junk .mentry, html.junk .mg-stat, html.junk .fx-item { border-width: 2px; }
html.junk .card button, html.junk .mg-btn {
  color: #201b16;
  background: linear-gradient(#f6e8a8 0 30%, #e8c85a 30% 70%, #c89a3a 70%);
  box-shadow: inset 0 -4px 0 #8a6a2a;
}
html.junk .card button:active, html.junk .mg-btn:active, html.junk .mg-btn.held { transform: translateY(2px); box-shadow: inset 0 -2px 0 #8a6a2a; }
html.junk .toast { background: #2c2620; border-width: 2px; }
html.junk .tool-btn.aiming { background: #55493d; }
html.junk #board { background: #201b16; border: 3px solid #55493d; }
html.junk #mg-mill { border: 3px solid #1a1612; background: #2c2823; }
html.junk .gauge, html.junk .furnace-mouth { display: none; }
html.junk .mg-scene { display: flex; justify-content: center; margin: 0 0 10px; }
html.junk .mg-scene canvas { border: 2px solid #1a1612; clip-path: var(--notch); image-rendering: pixelated; max-width: 100%; }
html.junk .heat-wrap { justify-content: center; margin-bottom: 10px; }
html.junk .heat-side { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.junk .mg-bar i { background: repeating-linear-gradient(90deg, #e8c85a 0 4px, #c89a3a 4px 6px); }
html.junk .mg-result { background: rgba(32, 27, 22, .95); }
html.junk .overlay { background: rgba(26, 22, 18, .9); }

/* ---- Hollow style (see style.js and the hollow-* files) ------------------------
   Ink and bone: near-black panels, pale capitals, a double rule round every
   card, and a cold glow in place of warm brass. */
@font-face {
  font-family: 'Cinzel';
  src: url(fonts/cinzel.woff2) format('woff2');
  font-weight: 400 900;
  font-display: swap;
}
html.hollow {
  --display: Cinzel, 'Times New Roman', serif;
  --bg: #090b14;
  --panel: #11141f;
  --panel-2: #191d2b;
  --panel-edge: #cfc9b8;
  --text: #e8e4d8;
  --muted: #9aa0b4;
  --accent: #cfe8ff;
  --danger: #e06a5a;
  --good: #9ad8a6;
}
html.hollow body {
  font-family: Georgia, 'Times New Roman', serif;
  background: radial-gradient(ellipse at 50% 0%, #161b2c 0%, var(--bg) 70%);
  background-color: var(--bg);
}
html.hollow h1, html.hollow h2, html.hollow h3, html.hollow .card button, html.hollow .mg-btn, html.hollow .mtabs button,
html.hollow .turns .label, html.hollow #turns, html.hollow .mg-stat span, html.hollow .mgroup, html.hollow .fx-badge span {
  font-family: Cinzel, 'Times New Roman', serif; letter-spacing: .06em;
}
html.hollow .card, html.hollow .mg-card, html.hollow .manual-btn, html.hollow .turns, html.hollow .tally, html.hollow .tool-btn,
html.hollow .mclose, html.hollow .mtabs button, html.hollow .msearch, html.hollow .mentry, html.hollow .mg-stat, html.hollow .fx-item {
  background: linear-gradient(#161a26, #0b0d15);
  border: 1px solid var(--panel-edge);
  box-shadow: inset 0 0 0 3px #0b0d15, inset 0 0 0 4px rgba(207, 201, 184, .35), 0 6px 24px rgba(0, 0, 0, .5);
  border-radius: 6px;
}
html.hollow .card h1, html.hollow .mhead h2, html.hollow .mg-card h2, html.hollow .mg-result h3 {
  color: var(--text); text-shadow: 0 0 18px rgba(207, 232, 255, .35);
}
html.hollow .card button, html.hollow .mg-btn {
  color: #0a0b12;
  background: linear-gradient(#f4f0e6, #cfc8b6);
  border: 1px solid #3a3f52;
  box-shadow: 0 4px 0 #2a2e3c, 0 0 22px rgba(207, 232, 255, .18);
  border-radius: 6px;
}
html.hollow .card button:active, html.hollow .mg-btn:active, html.hollow .mg-btn.held {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #2a2e3c, 0 0 22px rgba(207, 232, 255, .28);
}
html.hollow .toast { background: #11141f; border: 1px solid var(--panel-edge); border-radius: 6px; font-family: Cinzel, serif; }
html.hollow #board {
  background: linear-gradient(#0e1119, #070910);
  border: 2px solid #cfc9b8;
  box-shadow: inset 0 0 0 3px #090b14, inset 0 0 0 4px rgba(207, 201, 184, .3), inset 0 0 48px rgba(0, 0, 0, .8);
  border-radius: 6px;
}
html.hollow .tool-btn.aiming { border-color: var(--accent); box-shadow: 0 0 16px rgba(207, 232, 255, .45); }
html.hollow .results { background: rgba(4, 5, 12, .84); }
html.hollow .overlay { background: rgba(4, 5, 12, .9); }
html.hollow .mpanel { background: var(--bg); }
html.hollow .card li { border-bottom-color: rgba(207, 201, 184, .14); }
html.hollow .mg-bar { background: #0b0d15; border: 1px solid #3a3f52; border-radius: 4px; }
html.hollow .mg-bar i { background: linear-gradient(90deg, #9ab4d8, #e8f2ff); box-shadow: 0 0 12px rgba(207, 232, 255, .6); }
html.hollow #mg-mill { border: 2px solid #cfc9b8; background: #090b14; border-radius: 6px; box-shadow: inset 0 0 0 3px #090b14, inset 0 0 0 4px rgba(207, 201, 184, .3); }
html.hollow .mg-card.mill-screen { background: radial-gradient(ellipse at 50% 0%, #141a2a 0%, #090b14 70%); box-shadow: none; border: 0; }
html.hollow .mg-result { background: rgba(9, 11, 20, .96); }
html.hollow .gauge, html.hollow .furnace-mouth { display: none; }
html.hollow .mg-scene { display: flex; justify-content: center; margin: 0 0 10px; }
html.hollow .mg-scene canvas { border: 1px solid #cfc9b8; border-radius: 6px; box-shadow: inset 0 0 0 3px #090b14, inset 0 0 0 4px rgba(207, 201, 184, .3); max-width: 100%; }
html.hollow .heat-wrap { justify-content: center; margin-bottom: 10px; }
html.hollow .heat-side { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.hollow .mg-gain .gain-ring { --fill: #cfc9b8; --track: rgba(207, 201, 184, .16); }
html.hollow .mg-gain .gain-ring.rush { --fill: #fff; box-shadow: 0 0 0 1px #e8e4d8, 0 0 12px 3px rgba(207, 232, 255, .85), 0 0 28px rgba(207, 232, 255, .45); }
html.hollow .mlink { background: var(--panel-2); border: 1px solid rgba(207, 201, 184, .35); }
html.hollow .mtabs button.on { background: #e8e4d8; color: #0a0b12; }
html.hollow .fx-side.out .fx-item { box-shadow: 0 0 24px rgba(207, 232, 255, .4); }
html.hollow .fx-side.out.bad .fx-item { box-shadow: none; }

/* ---- Valley style (see the valley-* files) --------------------------------------
   A farm in summer: parchment menus in wooden frames with an orange rule inside,
   brown lettering in one chunky pixel face, and gold buttons. */
@font-face {
  font-family: 'Pixelify Sans';
  src: url(fonts/pixelify-sans.woff2) format('woff2');
  font-weight: 400 700;
  font-display: swap;
}
html.valley {
  --display: 'Pixelify Sans', system-ui, sans-serif;
  --bg: #5e3a1a;
  --panel: #ffd9a0;
  --panel-2: #f5c98a;
  --panel-edge: #5b2d0d;
  --text: #5e2d0a;
  --muted: #9a6a3a;
  --accent: #b14e05;
  --danger: #c0392b;
  --good: #3f8f32;
  --notch: polygon(0 6px, 3px 6px, 3px 3px, 6px 3px, 6px 0, calc(100% - 6px) 0, calc(100% - 6px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 6px, 100% 6px,
    100% calc(100% - 6px), calc(100% - 3px) calc(100% - 6px), calc(100% - 3px) calc(100% - 3px), calc(100% - 6px) calc(100% - 3px), calc(100% - 6px) 100%,
    6px 100%, 6px calc(100% - 3px), 3px calc(100% - 3px), 3px calc(100% - 6px), 0 calc(100% - 6px));
}
html.valley body, html.valley button, html.valley .mpanel { font-family: 'Pixelify Sans', system-ui, sans-serif; }
html.valley body, html.valley .mg-card.mill-screen, html.valley .mpanel {
  background: repeating-linear-gradient(180deg, #6b4426 0 21px, #5e3a1a 21px 24px), #5e3a1a;
}
html.valley .card, html.valley .mg-card, html.valley .manual-btn, html.valley .turns, html.valley .tally, html.valley .tool-btn,
html.valley .mclose, html.valley .mtabs button, html.valley .msearch, html.valley .mentry, html.valley .mg-stat, html.valley .fx-item {
  background: #ffd9a0;
  border: 3px solid #5b2d0d;
  box-shadow: inset 0 0 0 3px #f5c98a, inset 0 0 0 5px #b14e05;
  color: var(--text);
}
html.valley .card h1, html.valley .mhead h2, html.valley .mg-card h2, html.valley .mg-result h3, html.valley .mgroup, html.valley .mguide h3 { color: #5e2d0a; text-shadow: none; }
html.valley .card button, html.valley .mg-btn {
  color: #5e2d0a;
  background: linear-gradient(#fff1a8 0 30%, #ffd84a 30% 70%, #f0b040 70%);
  border: 3px solid #5b2d0d;
  box-shadow: inset 0 -5px 0 #c98a1a;
}
html.valley .card button:active, html.valley .mg-btn:active, html.valley .mg-btn.held { transform: translateY(3px); box-shadow: inset 0 -2px 0 #c98a1a; }
html.valley .toast { background: #ffd9a0; color: #5e2d0a; border: 3px solid #5b2d0d; }
html.valley .tool-btn.aiming { background: #ffe08a; }
html.valley #board { background: #4f5966; border: 4px solid #5b2d0d; box-shadow: inset 0 0 0 3px #a86c37; }
html.valley #mg-mill { border: 4px solid #5b2d0d; background: #c9894b; box-shadow: inset 0 0 0 3px #a86c37; }
html.valley .gauge, html.valley .furnace-mouth { display: none; }
html.valley .mg-scene { display: flex; justify-content: center; margin: 0 0 10px; }
html.valley .mg-scene canvas { border: 3px solid #5b2d0d; box-shadow: inset 0 0 0 3px #a86c37; clip-path: var(--notch); image-rendering: pixelated; max-width: 100%; }
html.valley .heat-wrap { justify-content: center; margin-bottom: 10px; }
html.valley .heat-side { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.valley .mg-gain .gain-ring { --fill: #d9701a; --track: rgba(94, 45, 10, .18); }
html.valley .mg-gain .gain-ring.rush { --fill: #ffc21a; box-shadow: 0 0 0 3px #5b2d0d, 0 0 0 6px #ffe27a; }
html.valley .mg-bar { background: #a86c37; border: 2px solid #5b2d0d; }
html.valley .mg-bar i { background: repeating-linear-gradient(90deg, #5fb543 0 6px, #3f8f32 6px 9px); }
html.valley .mg-result { background: rgba(94, 58, 26, .94); }
html.valley .overlay { background: rgba(59, 36, 18, .86); }
html.valley .results { background: rgba(59, 36, 18, .8); }
html.valley .card li { border-bottom-color: rgba(91, 45, 13, .25); }
html.valley .mtabs button.on { background: #ffe08a; }
html.valley .mlink { background: #f5c98a; border: 2px solid #b14e05; color: #5e2d0a; }
html.valley .mg-stat b, html.valley #turns, html.valley .tally-item { color: #5e2d0a; }
html.valley .muted { color: #9a6a3a; }

/* ---- Deepworks style (see style.js and the works-* files) ------------------------
   A pithead at night: plates of dark steel with chamfered corners, stencilled
   amber headings lit like signage, hazard stripes, and the cold green glow of
   the shaft for all-clear. */
@font-face {
  font-family: 'Big Shoulders Stencil';
  src: url(fonts/big-shoulders-stencil.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url(fonts/barlow-semi-condensed-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  src: url(fonts/barlow-semi-condensed-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
html.works {
  --display: 'Big Shoulders Stencil', 'Barlow Semi Condensed', sans-serif;
  --bg: #0c0d0f;
  --panel: #17191c;
  --panel-2: #202327;
  --panel-edge: #3d4248;
  --text: #ebe5d6;
  --muted: #9aa0a6;
  --accent: #ffb21e;
  --danger: #ff5a48;
  --good: #4fe0b0;
  --hazard: repeating-linear-gradient(-45deg, #f2b20e 0 8px, #111214 8px 16px);
  /* A 45° cut off each corner, like plate off the shear. */
  --cut: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  --cut-sm: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
}
html.works body {
  font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 500;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 150, 40, .12) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(60, 220, 190, .08) 0%, transparent 50%),
    var(--bg);
}
html.works button { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 700; }
html.works .card h1, html.works .card button, html.works .mg-btn, html.works .mg-card h2, html.works .mg-result h3, html.works .mhead h2,
html.works .mgroup, html.works .mguide h3, html.works #turns, html.works .toast, html.works .fx-item b, html.works .fx-badge span {
  font-family: 'Big Shoulders Stencil', 'Barlow Semi Condensed', sans-serif; font-weight: 800; letter-spacing: .06em;
}
html.works .card h1, html.works .mhead h2, html.works .mg-card h2, html.works .mg-result h3, html.works .mgroup, html.works .mguide h3 {
  color: var(--accent); text-transform: uppercase; text-shadow: 0 0 14px rgba(255, 170, 30, .35);
}
html.works .card, html.works .mg-card, html.works .manual-btn, html.works .turns, html.works .tally, html.works .tool-btn,
html.works .mclose, html.works .mtabs button, html.works .msearch, html.works .mentry, html.works .mg-stat, html.works .fx-item {
  background: linear-gradient(#25282c, #17191c);
  border: 2px solid #4d535a; border-radius: 0; clip-path: var(--cut-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -2px 0 rgba(0, 0, 0, .35);
}
html.works .card, html.works .mg-card { clip-path: var(--cut); }
html.works .card button, html.works .mg-btn {
  color: #17110a; text-transform: uppercase;
  background: linear-gradient(#ffd36a, #f5a91a 55%, #d9870c);
  border: 0; border-radius: 0; clip-path: var(--cut-sm);
  box-shadow: inset 0 -4px 0 #8a5004, inset 0 2px 0 rgba(255, 255, 255, .35);
}
html.works .card button:active, html.works .mg-btn:active, html.works .mg-btn.held {
  transform: translateY(2px); box-shadow: inset 0 -2px 0 #8a5004, inset 0 2px 0 rgba(255, 255, 255, .25);
}
html.works .mg-btn.held { filter: brightness(1.12); }
html.works .toast {
  background: #121315; border: 2px solid var(--accent); border-radius: 0; clip-path: var(--cut-sm);
  color: var(--accent); text-transform: uppercase; box-shadow: 0 0 18px rgba(255, 170, 30, .25);
}

/* The dive: a control desk over the shaft. A nixie-tube turn counter, the tally
   on a steel plate, and the board framed in hazard tape. */
html.works .turns { background: linear-gradient(#0d0e10, #050607); min-width: 70px; }
html.works .turns .label { font-weight: 700; letter-spacing: .18em; font-size: 10px; color: #8a9096; }
html.works #turns { color: #ffb21e; font-size: 34px; text-shadow: 0 0 10px rgba(255, 150, 20, .8), 0 0 22px rgba(255, 120, 10, .45); }
html.works .turns.low #turns { color: #ff5a48; text-shadow: 0 0 10px rgba(255, 70, 50, .85), 0 0 22px rgba(255, 50, 30, .5); animation: blink .9s steps(2, start) infinite; }
html.works .tally-item { font-weight: 700; font-variant-numeric: tabular-nums; }
html.works .tally-item .gain, html.works .card li .gain, html.works .tool-btn .tcount {
  color: #04140f; background: #4fe0b0; border-radius: 0; clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}
html.works #chain-info { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 14px; }
html.works #chain-info.ok { color: var(--accent); text-shadow: 0 0 12px rgba(255, 170, 30, .45); }
html.works #chain-info.notes { font-size: 11.5px; letter-spacing: .03em; color: #8fd8c4; text-transform: none; }
html.works #board {
  box-sizing: content-box; background: #15171a;
  border: 7px solid #f2b20e; border-image: repeating-linear-gradient(-45deg, #f2b20e 0 9px, #111214 9px 18px) 7;
  border-radius: 0; clip-path: var(--cut);
  box-shadow: none; filter: drop-shadow(0 0 18px rgba(60, 220, 190, .12));
}
html.works .tool-btn .tname { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; font-size: 10.5px; }
html.works .tool-btn.aiming { border-color: var(--accent); background: linear-gradient(#3a2e14, #1d1a12); box-shadow: inset 0 0 14px rgba(255, 170, 30, .35); }
html.works .results { background: rgba(5, 6, 8, .82); }
html.works .card { position: relative; padding-top: 26px; }
html.works .card::before, html.works .mg-card::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: 4px; height: 6px; background: var(--hazard);
}
html.works .card li { border-bottom-color: rgba(255, 255, 255, .07); font-weight: 500; }
html.works .card li .qty { font-weight: 700; }
html.works .overlay { background: rgba(5, 6, 8, .9); }

/* The mini games: the furnace's control panel (works-games.js draws the
   viewport, the pyrometer, and the nixie readout) and the mill floor. */
html.works .mg-card { padding-top: 22px; }
html.works .mg-help { color: #8a9096; }
html.works .gauge, html.works .furnace-mouth { display: none; }
html.works .mg-scene { display: flex; justify-content: center; margin: 0 0 10px; }
html.works .mg-scene canvas { max-width: 100%; clip-path: var(--cut-sm); border: 2px solid #4d535a; background: #0b0c0e; }
html.works .heat-wrap { justify-content: center; margin-bottom: 10px; }
html.works .heat-side { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.works .mg-stat span { font-weight: 700; letter-spacing: .12em; font-size: 10px; }
html.works .mg-stat b { font-family: 'Big Shoulders Stencil', sans-serif; font-weight: 800; letter-spacing: .04em; color: #ffc23a; text-shadow: 0 0 10px rgba(255, 150, 20, .45); }
html.works .mg-stat.paused b { color: var(--danger); }
html.works .mg-bar { background: #0b0c0e; border: 1px solid #4d535a; border-radius: 0; height: 12px; }
html.works .mg-bar i { background: repeating-linear-gradient(-45deg, #ffc23a 0 6px, #e8920f 6px 12px); box-shadow: 0 0 12px rgba(255, 160, 30, .5); }
html.works .mg-status { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
html.works .gain-ring { --fill: var(--accent); --track: rgba(255, 255, 255, .14); }
html.works .mg-gain .gain-ring.rush { --fill: #fff4d6; box-shadow: 0 0 0 2px #ffb21e, 0 0 14px 3px rgba(255, 170, 30, .85); }
html.works .gain-ring.max { box-shadow: 0 0 16px rgba(255, 170, 30, .6); }
html.works #mg-mill { border: 2px solid #4d535a; border-radius: 0; background: #0d0e10; clip-path: var(--cut-sm); }
html.works .mg-card.mill-screen {
  clip-path: none; border: 0; box-shadow: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 150, 40, .1), transparent 60%),
    linear-gradient(#111214, #070809);
}
html.works .mg-card.mill-screen::before { display: none; }
html.works .mg-result { background: rgba(11, 12, 14, .96); border-radius: 0; }
html.works .fx-item { padding: 5px 12px 5px 6px; }
html.works .fx-item b { color: var(--text); }
html.works .fx-side.out .fx-item { border-color: var(--accent); box-shadow: inset 0 0 18px rgba(255, 170, 30, .25); }
html.works .fx-side.out .fx-item b { color: var(--accent); }
html.works .fx-side.out.bad .fx-item { border-color: var(--danger); box-shadow: none; }
html.works .fx-badge span { color: #17110a; }

/* The manual: a binder of steel plates. */
html.works .mpanel { background: var(--bg); }
html.works .mclose { font-weight: 700; }
html.works .mtabs button { color: #9aa0a6; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
html.works .mtabs button.on { color: #17110a; background: linear-gradient(#ffd36a, #e8920f); border-color: #5a3200; }
html.works .msearch { font-weight: 500; }
html.works .mentry h4 { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 700; font-size: 17px; letter-spacing: .02em; }
html.works .mentry.flash { animation: flash 1.2s ease; }
html.works .mlabel { letter-spacing: .1em; }
html.works .mlink { background: #24272c; border-radius: 0; clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px); }
html.works .mtier, html.works .mtable th, html.works .mtable td { border-color: rgba(255, 255, 255, .07); }
html.works .manual-btn { border-radius: 0; }

/* ---- Fathom style (see style.js and the fathom-* files) --------------------------
   A station on the floor of a trench: navy glass in brass bezels, rivets, round
   portholes, headings in Righteous, every number read off an instrument in
   Share Tech Mono, and the sonar's green for all-clear. */
@font-face {
  font-family: 'Righteous';
  src: url(fonts/righteous.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Share Tech Mono';
  src: url(fonts/share-tech-mono.woff2) format('woff2');
  font-display: swap;
}
html.fathom {
  --display: 'Righteous', 'Barlow Semi Condensed', sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --bg: #03080d;
  --panel: #0c1d27;
  --panel-2: #12293a;
  --panel-edge: #2a4a5c;
  --text: #e4f1ef;
  --muted: #8aa3aa;
  --accent: #f2c46a;
  --danger: #ff6b5b;
  --good: #52f0b8;
  --brass: #c9a04e;
  --glass: linear-gradient(#12303f, #0a1a26 60%, #07131c);
  /* A rivet at either end of a bar. */
  --rivets: radial-gradient(circle at 9px 50%, #f6dc96 0 2.2px, #4a3010 2.4px, transparent 3.2px),
    radial-gradient(circle at calc(100% - 9px) 50%, #f6dc96 0 2.2px, #4a3010 2.4px, transparent 3.2px);
}
html.fathom body {
  font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 500;
  background:
    radial-gradient(ellipse at 50% -15%, rgba(255, 226, 170, .1) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 125%, rgba(60, 220, 200, .12) 0%, transparent 55%),
    var(--bg);
}
html.fathom button { font-family: 'Barlow Semi Condensed', system-ui, sans-serif; font-weight: 700; }
html.fathom .card h1, html.fathom .card button, html.fathom .mg-btn, html.fathom .mg-card h2, html.fathom .mg-result h3, html.fathom .mhead h2,
html.fathom .mgroup, html.fathom .mguide h3, html.fathom .toast, html.fathom .fx-item b, html.fathom .fx-badge span {
  font-family: 'Righteous', 'Barlow Semi Condensed', sans-serif; font-weight: 400; letter-spacing: .03em;
}
html.fathom .card h1, html.fathom .mhead h2, html.fathom .mg-card h2, html.fathom .mg-result h3, html.fathom .mgroup, html.fathom .mguide h3 {
  color: var(--accent); text-shadow: 0 2px 0 #02080d, 0 0 14px rgba(242, 196, 106, .25);
}
html.fathom .card, html.fathom .mg-card, html.fathom .manual-btn, html.fathom .turns, html.fathom .tally, html.fathom .tool-btn,
html.fathom .mclose, html.fathom .mtabs button, html.fathom .msearch, html.fathom .mentry, html.fathom .mg-stat, html.fathom .fx-item {
  background: var(--glass);
  border: 2px solid var(--brass); border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .55), inset 0 10px 18px rgba(255, 255, 255, .03), 0 4px 0 rgba(0, 0, 0, .35);
}
html.fathom .card, html.fathom .mg-card { border-width: 3px; border-radius: 20px; }
html.fathom .card button, html.fathom .mg-btn {
  color: #1e1204;
  background: var(--rivets), linear-gradient(#ffe9ad, #eab85c 55%, #b17b2c);
  border: 2px solid #6a4512; border-radius: 999px;
  box-shadow: inset 0 -4px 0 rgba(90, 52, 8, .7), inset 0 2px 0 rgba(255, 255, 255, .45), 0 3px 0 #02080d;
}
html.fathom .card button:active, html.fathom .mg-btn:active, html.fathom .mg-btn.held {
  transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(90, 52, 8, .7), inset 0 2px 0 rgba(255, 255, 255, .3), 0 1px 0 #02080d;
}
html.fathom .mg-btn.held { filter: brightness(1.1); }
html.fathom .toast {
  background: #071520; border: 2px solid var(--brass); border-radius: 999px;
  color: var(--accent); box-shadow: 0 0 0 1px #000, 0 0 22px rgba(82, 240, 184, .18);
}

/* The dive: the submersible's instrument desk. The turns on a sonar-green
   readout, the haul on a brass-rimmed panel, and the board seen through a
   porthole-thick brass frame. */
html.fathom .turns { background: linear-gradient(#04121b, #020a10); min-width: 70px; }
html.fathom .turns .label { font-family: var(--mono); letter-spacing: .14em; font-size: 10px; color: #6f8f96; text-transform: uppercase; }
html.fathom #turns {
  font-family: var(--mono); font-weight: 400; color: #52f0b8; font-size: 34px; letter-spacing: 0;
  text-shadow: 0 0 10px rgba(82, 240, 184, .75), 0 0 22px rgba(82, 240, 184, .35);
}
html.fathom .turns.low #turns { color: #ff6b5b; text-shadow: 0 0 10px rgba(255, 90, 70, .85), 0 0 22px rgba(255, 60, 40, .45); animation: blink .9s steps(2, start) infinite; }
html.fathom .tally-item { font-family: var(--mono); font-variant-numeric: tabular-nums; }
html.fathom .tally-item .gain, html.fathom .card li .gain, html.fathom .tool-btn .tcount {
  color: #032016; background: #52f0b8; font-family: var(--mono); box-shadow: 0 0 8px rgba(82, 240, 184, .5);
}
html.fathom #chain-info { font-family: 'Righteous', sans-serif; letter-spacing: .04em; font-size: 14px; }
html.fathom #chain-info.ok { color: var(--good); text-shadow: 0 0 12px rgba(82, 240, 184, .5); }
html.fathom #chain-info.notes { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: .02em; color: #9fd8cc; }
html.fathom #board {
  box-sizing: content-box; background: #0b1418;
  border: 6px solid #b8893a; border-radius: 16px;
  box-shadow: 0 0 0 2px #2a1a06, inset 0 0 0 1px rgba(255, 240, 200, .35), 0 0 28px rgba(82, 240, 184, .14), 0 8px 24px rgba(0, 0, 0, .6);
}
html.fathom .tool-btn .tname { font-weight: 700; letter-spacing: .02em; font-size: 11px; }
html.fathom .tool-btn.aiming { border-color: var(--good); background: linear-gradient(#0e3a33, #08201d); box-shadow: inset 0 0 14px rgba(82, 240, 184, .35), 0 0 12px rgba(82, 240, 184, .3); }
html.fathom .results { background: rgba(1, 6, 10, .84); }
html.fathom .card { position: relative; padding-top: 24px; }
html.fathom .card::before, html.fathom .mg-card::before {
  content: ''; position: absolute; left: 22px; right: 22px; top: 7px; height: 6px; border-radius: 3px;
  background: var(--rivets), linear-gradient(#e8c06a, #8a6224);
}
html.fathom .card li { border-bottom-color: rgba(82, 240, 184, .1); font-weight: 500; }
html.fathom .card li .qty { font-family: var(--mono); }
html.fathom .overlay { background: rgba(1, 6, 10, .92); }

/* The mini games: the vent furnace's gauge panel and the press bay
   (fathom-games.js draws them). */
html.fathom .mg-card { padding-top: 24px; }
html.fathom .mg-help { color: #8aa3aa; }
html.fathom .gauge, html.fathom .furnace-mouth { display: none; }
html.fathom .mg-scene { display: flex; justify-content: center; margin: 0 0 10px; }
html.fathom .mg-scene canvas { max-width: 100%; border: 3px solid var(--brass); border-radius: 16px; background: #03080d; box-shadow: 0 0 0 1px #000, 0 0 18px rgba(82, 240, 184, .12); }
html.fathom .heat-wrap { justify-content: center; margin-bottom: 10px; }
html.fathom .heat-side { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.fathom .mg-stat span { font-family: var(--mono); letter-spacing: .1em; font-size: 10px; text-transform: uppercase; }
html.fathom .mg-stat b { font-family: var(--mono); font-weight: 400; color: #52f0b8; text-shadow: 0 0 10px rgba(82, 240, 184, .45); }
html.fathom .mg-stat.paused b { color: var(--danger); }
html.fathom .mg-bar { background: #020a10; border: 2px solid #8a6a32; border-radius: 999px; height: 12px; }
html.fathom .mg-bar i { background: linear-gradient(90deg, #2fc795, #92f8d2); box-shadow: 0 0 12px rgba(82, 240, 184, .55); border-radius: 999px; }
html.fathom .mg-status { font-family: 'Righteous', sans-serif; letter-spacing: .03em; font-size: 13.5px; }
html.fathom .gain-ring { --fill: var(--good); --track: rgba(255, 255, 255, .12); }
html.fathom .mg-gain .gain-ring.rush { --fill: #fff1c4; box-shadow: 0 0 0 2px var(--brass), 0 0 14px 3px rgba(242, 196, 106, .85); }
html.fathom .gain-ring.max { box-shadow: 0 0 16px rgba(82, 240, 184, .6); }
html.fathom #mg-mill { border: 3px solid var(--brass); border-radius: 16px; background: #03080d; }
html.fathom .mg-card.mill-screen {
  border: 0; box-shadow: none;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 226, 170, .08), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(60, 220, 200, .1), transparent 60%),
    linear-gradient(#06121b, #02070b);
}
html.fathom .mg-card.mill-screen::before { display: none; }
html.fathom .mg-result { background: rgba(6, 18, 27, .97); border-radius: 18px; border: 2px solid var(--brass); }
html.fathom .fx-item { padding: 5px 12px 5px 6px; }
html.fathom .fx-item b { color: var(--text); }
html.fathom .fx-side.out .fx-item { border-color: var(--good); box-shadow: inset 0 0 18px rgba(82, 240, 184, .22); }
html.fathom .fx-side.out .fx-item b { color: var(--good); }
html.fathom .fx-side.out.bad .fx-item { border-color: var(--danger); box-shadow: none; }
html.fathom .fx-badge span { color: #1e1204; }

/* The manual: a ship's log in a brass binding. */
html.fathom .mpanel { background: var(--bg); }
html.fathom .mclose { font-weight: 700; border-radius: 999px; }
html.fathom .mtabs button { color: #8aa3aa; letter-spacing: .03em; font-size: 12.5px; border-radius: 999px; }
html.fathom .mtabs button.on { color: #1e1204; background: linear-gradient(#ffe9ad, #d9a441); border-color: #6a4512; }
html.fathom .msearch { font-weight: 500; border-radius: 999px; }
html.fathom .mentry h4 { font-family: 'Righteous', sans-serif; font-weight: 400; font-size: 17px; letter-spacing: .02em; color: var(--text); }
html.fathom .mentry.flash { animation: flash 1.2s ease; }
html.fathom .mlabel { font-family: var(--mono); letter-spacing: .08em; }
html.fathom .mlink { background: #12293a; border-radius: 999px; }
html.fathom .mtier, html.fathom .mtable th, html.fathom .mtable td { border-color: rgba(82, 240, 184, .1); }
html.fathom .mtable td { font-family: var(--mono); }

/* ---- The Styles page (styles.html) ------------------------------------------------
   The other side of the balance page: which styles the palette button cycles
   through, and the redesign kit. Plain DOM in the colours and fonts of the style
   in use, read from the variables every style block sets. */
html.doc, html.doc body { height: auto; min-height: 100%; overscroll-behavior: auto; -webkit-user-select: text; user-select: text; }
body.ss {
  padding: calc(env(safe-area-inset-top) + 12px) max(14px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 92px) max(14px, env(safe-area-inset-left));
  font-size: 15px; line-height: 1.5;
}
.ss-wrap { max-width: 1100px; margin: 0 auto; display: grid; gap: 30px; }
.ss h1, .ss h2, .ss h3, .ss h4 { font-family: var(--display); margin: 0; line-height: 1.15; text-wrap: balance; font-weight: normal; }
.ss h1 { font-size: 30px; color: var(--accent); }
.ss h2 { font-size: 25px; color: var(--accent); }
.ss h3 { font-size: 21px; color: var(--text); }
.ss h4 { font-size: 18px; color: var(--text); }
.ss p { margin: 0; }
.ss-top { display: flex; align-items: center; gap: 16px; }
.ss-sec { display: grid; gap: 14px; min-width: 0; }
.ss-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 14px; }
.ss-note { color: var(--muted); max-width: 72ch; }
.ss-status { color: var(--accent); font-weight: 700; font-size: 14px; }
.ss-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 9px 15px;
  border-radius: 12px; border: 2px solid var(--panel-edge); background: var(--panel-2); color: var(--text);
  font-weight: 700; font-size: 15px; text-decoration: none; white-space: nowrap;
}
.ss-btn span[aria-hidden] { font-size: 22px; line-height: 0.6; }
.ss-gold { background: var(--accent); color: var(--bg); border-color: var(--accent); }
.ss-btn:disabled { opacity: .4; }
.ss :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Each style, with its colours, a way to play in it, and its switch. */
.ss-styles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.ss-style {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 12px; padding: 12px;
  background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 14px;
}
.ss-swatch { display: grid; grid-template-columns: repeat(2, 16px); gap: 3px; align-content: start; padding-top: 3px; }
.ss-swatch i { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); }
.ss-style-text { display: grid; gap: 3px; min-width: 0; }
.ss-style-text p { color: var(--muted); font-size: 13.5px; }
.ss-here {
  display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 7px; border-radius: 999px;
  background: var(--good); color: var(--bg); font-family: system-ui, sans-serif; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.ss-style-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ss-style.off .ss-swatch, .ss-style.off .ss-style-text { opacity: .5; }
.ss-switch { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; position: relative; }
.ss-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ss-switch span {
  position: relative; width: 50px; height: 28px; border-radius: 14px; flex: none;
  background: var(--panel-2); border: 2px solid var(--panel-edge); transition: background .15s, border-color .15s;
}
.ss-switch span::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--muted); transition: transform .15s, background .15s;
}
.ss-switch input:checked + span { background: var(--good); border-color: var(--good); }
.ss-switch input:checked + span::after { transform: translateX(22px); background: var(--bg); }
.ss-switch input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.ss-switch input:disabled + span { opacity: .55; }
.ss-switch b { min-width: 2.2em; }

/* The redesign kit. */
.ss-card { background: var(--panel); border: 2px solid var(--panel-edge); border-radius: 14px; padding: 14px; min-width: 0; }
.ss-builder { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
@media (max-width: 820px) { .ss-builder { grid-template-columns: minmax(0, 1fr); } }
.ss-form { display: grid; gap: 14px; scroll-margin-top: 12px; }
.ss-field { display: grid; gap: 7px; border: 0; margin: 0; padding: 0; min-width: 0; }
.ss-field > label, .ss-field > legend { font-weight: 700; padding: 0; margin-bottom: 2px; }
.ss textarea {
  width: 100%; min-height: 92px; resize: vertical; padding: 10px 12px; border-radius: 10px;
  border: 2px solid var(--panel-edge); background: var(--panel-2); color: var(--text); font: inherit; font-size: 14px;
}
.ss textarea#theme { min-height: 128px; }
.ss-choice {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: start; padding: 10px 12px; cursor: pointer;
  border: 2px solid var(--panel-edge); border-radius: 10px; background: var(--panel-2);
}
.ss-choice input { margin: 4px 0 0; accent-color: var(--accent); }
.ss-choice span { grid-column: 2; color: var(--muted); font-size: 13px; }
.ss-choice:has(input:checked) { border-color: var(--accent); }
.ss-tick { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.ss-tick input { margin-top: 4px; accent-color: var(--accent); }
.ss-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ss-copied { color: var(--accent); font-weight: 700; }
.ss-preview { padding: 0; overflow: hidden; display: grid; }
.ss-preview-head {
  display: flex; justify-content: space-between; gap: 10px; padding: 11px 14px; border-bottom: 2px solid var(--panel-edge);
  color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.ss #prompt {
  margin: 0; padding: 14px 16px 18px; max-height: 70vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: 12.5px/1.6 ui-monospace, Menlo, Consolas, monospace; color: var(--text); background: var(--panel-2);
}
.ss #prompt b { color: var(--accent); }
.ss-filters, .ss-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ss-chip {
  min-height: 38px; padding: 7px 12px; border-radius: 999px; border: 2px solid var(--panel-edge);
  background: var(--panel-2); color: var(--text); font-size: 13.5px; font-weight: 600;
}
.ss-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.ss-ideas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.ss-idea { display: grid; gap: 8px; align-content: start; }
.ss-idea.used { border-color: var(--accent); }
.ss-idea-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ss-pick { background: var(--accent); color: var(--bg); padding: 2px 7px; border-radius: 5px; }
.ss-idea > p { font-size: 14px; }
.ss-idea dl { margin: 0; display: grid; gap: 3px; }
.ss-idea dt { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ss-idea dd { margin: 0; font-size: 13.5px; }
.ss-idea .ss-btn { justify-self: start; margin-top: 4px; }
.ss-idea summary { cursor: pointer; color: var(--accent); font-size: 13.5px; font-weight: 700; min-height: 32px; display: flex; align-items: center; gap: 6px; }
.ss-idea summary::-webkit-details-marker { display: none; }
.ss-idea summary::before { content: '▸'; }
.ss-idea details[open] summary::before { content: '▾'; }
/* The Valley's text is brown for its parchment, so the page is parchment too. */
html.valley.doc, html.valley.doc body.ss { background: #f6dba8; }
.ss-mixer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .ss-mixer { grid-template-columns: minmax(0, 1fr); } }
.ss-mixer h4 { margin-bottom: 10px; }
.ss-mix { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

/* The tabs along the bottom: Balance and Styles. */
.ss-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px;
  padding: 8px max(10px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 8px) max(10px, env(safe-area-inset-left));
  background: var(--bg); border-top: 2px solid var(--panel-edge);
}
.ss-tab {
  display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 11px;
  background: var(--panel); border: 2px solid var(--panel-edge); color: var(--text); text-decoration: none;
  font-family: var(--display); font-size: 17px;
}
.ss-tab.on { background: var(--panel-2); border-color: var(--accent); color: var(--accent); }
.ss-tab img { width: 24px; height: 24px; }
.ss-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-tab img:not([src]) { visibility: hidden; }

/* ---- The Ideas page (ideas.html) ----------------------------------------------------- */
.id-new { gap: 10px; }
.id-new > label { font-weight: 700; }
.id-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.id-idea { display: grid; gap: 8px; }
.id-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; }
.id-meta { color: var(--muted); font-size: 12.5px; }
.id-waiting { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--bg); font-weight: 700; font-size: 11px; }
.id-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.id-armed { border-color: var(--danger) !important; color: var(--danger) !important; }
.id-idea.done .id-text { opacity: .6; text-decoration: line-through; text-decoration-thickness: 1px; }
.id-setting { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.id-setting > div { display: grid; gap: 6px; min-width: 0; flex: 1 1 260px; }

/* ---- The idea tab and its note (ideas.js), on every page -------------------------------
   A tab on the edge of the screen with a lightbulb on it, dragged wherever it's
   least in the way, and the sheet for jotting the idea down. */
.idea-tab {
  position: fixed; left: 0; z-index: 45; width: 34px; height: 50px; padding: 0 0 0 2px;
  display: grid; place-items: center; cursor: grab; touch-action: none;
  background: var(--panel-2); border: 2px solid var(--accent); border-left: 0; border-radius: 0 14px 14px 0;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35); opacity: .88; transition: opacity .15s, transform .15s;
  -webkit-user-select: none; user-select: none;
}
.idea-tab.right { left: auto; right: 0; padding: 0 2px 0 0; border-left: 2px solid var(--accent); border-right: 0; border-radius: 14px 0 0 14px; }
.idea-tab img { width: 24px; height: 24px; pointer-events: none; }
.idea-tab:hover, .idea-tab:focus-visible, .idea-tab.dragging { opacity: 1; }
.idea-tab.dragging { cursor: grabbing; transform: scale(1.08); }
.idea-tab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.idea-sheet {
  position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: flex-start;
  padding: calc(env(safe-area-inset-top) + 14px) 12px 12px; background: rgba(0, 0, 0, .55);
  animation: fade .15s ease;
}
.idea-card {
  width: min(100%, 460px); display: grid; gap: 10px; padding: 16px;
  background: var(--panel); color: var(--text); border: 2px solid var(--accent); border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.idea-card h2 { margin: 0; font-family: var(--display); font-weight: normal; font-size: 22px; color: var(--accent); }
.idea-card textarea {
  width: 100%; min-height: 120px; resize: vertical; padding: 10px 12px; border-radius: 10px;
  border: 2px solid var(--panel-edge); background: var(--panel-2); color: var(--text); font: inherit; font-size: 16px;
  -webkit-user-select: text; user-select: text;
}
.idea-card textarea:focus { outline: none; border-color: var(--accent); }
.idea-where { margin: 0; color: var(--muted); font-size: 13px; }
.idea-actions { display: flex; justify-content: flex-end; gap: 10px; }
.idea-actions button {
  min-height: 44px; padding: 9px 16px; border-radius: 12px; font-weight: 700; font-size: 15px;
  border: 2px solid var(--panel-edge); background: var(--panel-2); color: var(--text);
}
.idea-actions .idea-save { background: var(--accent); border-color: var(--accent); color: var(--bg); }
/* The Valley's accent and background are both dark browns, so its lettering on
   accent-coloured things is cream instead. */
html.valley .ss-gold, html.valley .idea-actions .idea-save, html.valley .ss-chip[aria-pressed="true"],
html.valley .ss-pick, html.valley .id-waiting, html.valley .ss-here { color: #fff6dc; }

/* ---- Prospector style (see style.js and the belt-* files) -------------------------
   A prospector's claim in the belt: white spacecraft enamel in black edges, an
   orange stripe and chevron, screws, mission patches for round buttons, headings
   in a wide space-age face (Michroma), everything small in a condensed one
   (Saira Semi Condensed), and readouts lit warm in black windows. */
@font-face {
  font-family: 'Michroma';
  src: url(fonts/michroma.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  src: url(fonts/saira-semi-condensed-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Saira Semi Condensed';
  src: url(fonts/saira-semi-condensed-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
html.belt {
  --display: 'Michroma', 'Saira Semi Condensed', sans-serif;
  --sans: 'Saira Semi Condensed', system-ui, sans-serif;
  --bg: #0a0816;
  --panel: #f3f0e9;
  --panel-2: #e4e0d7;
  --panel-edge: #1c1929;
  --text: #1c1929;
  --muted: #6b667a;
  --accent: #e0560e;
  --danger: #d5362a;
  --good: #139a72;
  --ink: #120f1d;
  --orange: #f26b1d;
  --enamel: linear-gradient(#fdfcf8, #f2efe8 62%, #e6e2d9);
  --readout: #ffe2b8;
  /* The orange stripe with its chevron, for the tops of cards. */
  --stripe: linear-gradient(90deg, var(--orange) 0 calc(100% - 22px), transparent calc(100% - 22px));
  /* A cross-head screw at either end of a bar. */
  --screws: radial-gradient(circle at 9px 50%, #f4f2ee 0 2.4px, #120f1d 2.6px 3.3px, transparent 3.5px),
    radial-gradient(circle at calc(100% - 9px) 50%, #f4f2ee 0 2.4px, #120f1d 2.6px 3.3px, transparent 3.5px);
}
html.belt body {
  font-family: var(--sans); font-weight: 500;
  color: #f1eef8;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .7) 0 1px, transparent 1.6px) 0 0 / 140px 160px,
    radial-gradient(circle at 63% 71%, rgba(220, 230, 255, .55) 0 .8px, transparent 1.4px) 0 0 / 110px 130px,
    radial-gradient(circle at 81% 37%, rgba(255, 228, 200, .6) 0 1px, transparent 1.6px) 0 0 / 190px 170px,
    radial-gradient(ellipse at 92% -6%, rgba(255, 200, 140, .22), transparent 42%),
    radial-gradient(ellipse at 4% 18%, rgba(70, 150, 190, .14), transparent 46%),
    linear-gradient(162deg, #191433 0%, #0d0a20 48%, #07060f 100%);
  background-color: var(--bg);
}
html.belt button { font-family: var(--sans); font-weight: 700; }
html.belt .card h1, html.belt .card button, html.belt .mg-btn, html.belt .mg-card h2, html.belt .mg-result h3, html.belt .mhead h2,
html.belt .mgroup, html.belt .mguide h3, html.belt #turns, html.belt .fx-item b, html.belt .fx-badge span {
  font-family: var(--display); font-weight: 400; letter-spacing: .04em;
}
/* Panels: enamel in a black edge, dark lettering. */
html.belt .card, html.belt .mg-card, html.belt .tally, html.belt .tool-btn, html.belt .mtabs button, html.belt .msearch,
html.belt .mentry, html.belt .mg-stat, html.belt .fx-item, html.belt .mclose {
  color: var(--text); background: var(--enamel);
  border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: inset 0 -3px 0 rgba(18, 15, 29, .08), 0 3px 0 rgba(0, 0, 0, .45);
}
html.belt .card, html.belt .mg-card { border-width: 3px; border-radius: 18px; position: relative; padding-top: 30px; }
html.belt .card::before, html.belt .mg-card::before {
  content: ''; position: absolute; left: 16px; right: 16px; top: 13px; height: 6px;
  background: var(--stripe);
  clip-path: polygon(0 0, calc(100% - 22px) 0, calc(100% - 16px) 50%, calc(100% - 22px) 100%, 0 100%);
}
html.belt .card::after, html.belt .mg-card::after {
  content: ''; position: absolute; right: 16px; top: 13px; width: 14px; height: 6px; background: var(--ink);
  clip-path: polygon(0 0, 40% 0, 100% 50%, 40% 100%, 0 100%, 60% 50%);
}
html.belt .card h1, html.belt .mg-card h2, html.belt .mg-result h3, html.belt .mhead h2, html.belt .mgroup, html.belt .mguide h3 { color: var(--accent); }
/* The main buttons: lit orange caps in a black bezel. */
html.belt .card button, html.belt .mg-btn {
  color: var(--ink); background: var(--screws), linear-gradient(#ffb47a, #f37a24 45%, #dd5b10);
  border: 3px solid var(--ink); border-radius: 12px; font-size: 17px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .38), inset 0 -3px 0 rgba(120, 40, 0, .3), 0 4px 0 var(--ink);
}
html.belt .card button:active, html.belt .mg-btn:active, html.belt .mg-btn.held {
  transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(120, 40, 0, .3), 0 1px 0 var(--ink);
}
html.belt .mg-btn.held { filter: brightness(1.08); }
html.belt .toast {
  background: #120f1d; color: #fdfbf6; border: 2px solid var(--orange); border-radius: 10px;
  font-family: var(--sans); font-weight: 700; letter-spacing: .03em;
  box-shadow: 0 0 0 1px #000, 0 6px 18px rgba(0, 0, 0, .5);
}

/* The dive: the cockpit's panel. Turns on a lit readout in a black window, the
   haul on a strip of enamel, and the board seen through the viewport's bezel. */
html.belt .turns {
  background: radial-gradient(ellipse at 50% 120%, rgba(255, 140, 60, .18), transparent 70%), linear-gradient(#16131f, #0a0812);
  border: 3px solid #f3f0e9; border-radius: 12px; min-width: 72px;
  box-shadow: 0 0 0 2px var(--ink), inset 0 0 12px rgba(0, 0, 0, .8);
}
html.belt .turns .label { font-family: var(--sans); font-weight: 700; letter-spacing: .2em; font-size: 9.5px; color: #8a84a6; }
html.belt #turns { color: var(--readout); font-size: 26px; text-shadow: 0 0 8px rgba(255, 150, 70, .85), 0 0 20px rgba(255, 110, 40, .45); }
html.belt .turns.low #turns { color: #ff6a4a; text-shadow: 0 0 10px rgba(255, 70, 50, .9); animation: blink .9s steps(2, start) infinite; }
html.belt .tally { padding: 8px 6px 6px; }
html.belt .tally-item { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
html.belt .tally-item .gain, html.belt .card li .gain, html.belt .tool-btn .tcount {
  color: #fff; background: var(--orange); border: 1.5px solid var(--ink); font-weight: 700;
}
html.belt .manual-btn {
  border-radius: 50%; width: 44px; height: 44px;
  background: radial-gradient(circle at 50% 45%, #2e2760, #15112e 70%);
  border: 4px solid #f3f0e9; box-shadow: 0 0 0 1.5px var(--ink), 0 3px 0 rgba(0, 0, 0, .5);
  outline: 1.5px dashed var(--orange); outline-offset: -8px;
}
html.belt .manual-btn.small { width: 44px; height: 44px; align-self: center; }
html.belt .manual-btn .ico { width: 22px; height: 22px; }
html.belt #chain-info { font-weight: 700; letter-spacing: .06em; font-size: 14px; text-transform: uppercase; color: #e8e4f0; }
html.belt #chain-info.ok { color: #ff9a4a; text-shadow: 0 0 12px rgba(255, 120, 40, .45); }
html.belt #chain-info.notes { font-size: 12px; letter-spacing: .03em; text-transform: none; color: #c8c0e0; }
html.belt #board {
  box-sizing: content-box; background: #1a1520;
  border: 8px solid #efebe3; border-radius: 18px;
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--orange), 0 0 0 7px var(--ink), 0 12px 32px rgba(0, 0, 0, .65);
}
html.belt .board-wrap { padding: 8px 0; }
html.belt .tool-btn { border-radius: 10px; }
html.belt .tool-btn .tname { font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; color: var(--text); }
html.belt .tool-btn.aiming { border-color: var(--orange); background: linear-gradient(#fff3e6, #ffd2ae); box-shadow: 0 0 0 2px var(--orange), 0 0 16px rgba(255, 120, 40, .5); }
html.belt .results { background: rgba(5, 4, 12, .82); }
html.belt .card li { border-bottom-color: rgba(18, 15, 29, .1); font-weight: 500; }
html.belt .card li .qty { font-family: var(--display); font-size: 14px; }
html.belt #results-extra { color: var(--muted); }
html.belt .overlay { background: rgba(5, 4, 12, .9); }
html.belt .stage-error { color: #c8c0e0; }

/* The mini games: the solar furnace's console and the stacking bay
   (belt-games.js draws them). */
html.belt .mg-help { color: var(--muted); }
html.belt .gauge, html.belt .furnace-mouth { display: none; }
html.belt .mg-scene { display: flex; justify-content: center; margin: 0 0 10px; }
html.belt .mg-scene canvas { max-width: 100%; border: 6px solid var(--ink); border-radius: 14px; background: #07060f; box-shadow: 0 0 0 2px #cfc9bd; }
html.belt .heat-wrap { justify-content: center; margin-bottom: 10px; }
html.belt .heat-side { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.belt .mg-stat { border-radius: 10px; }
html.belt .mg-stat span { font-weight: 700; letter-spacing: .14em; font-size: 9.5px; text-transform: uppercase; color: var(--muted); }
html.belt .mg-stat b { font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--text); }
html.belt .mg-stat.paused b { color: var(--danger); }
html.belt .mg-bar { background: #120f1d; border: 2px solid var(--ink); border-radius: 6px; height: 12px; }
html.belt .mg-bar i { background: repeating-linear-gradient(-45deg, #ff9a4a 0 7px, #f26b1d 7px 14px); box-shadow: 0 0 10px rgba(255, 120, 40, .5); }
html.belt .mg-status { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 13px; }
html.belt .mg-status.good { color: var(--good); }
html.belt .mg-status.hot { color: #d9701a; }
html.belt .gain-ring { --fill: var(--orange); --track: rgba(18, 15, 29, .14); }
html.belt .gain-ring::before { background: #f6f3ee; }
html.belt .mg-gain .gain-ring.rush { --fill: #ffb000; box-shadow: 0 0 0 2px var(--ink), 0 0 12px 4px rgba(255, 176, 0, .9); }
html.belt .mg-gain .gain-ring.rush::before { background: #fff3c2; }
html.belt .gain-ring.max { box-shadow: 0 0 14px rgba(255, 120, 40, .55); }
html.belt #mg-mill { border: 6px solid #efebe3; border-radius: 14px; background: #07060f; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--orange), 0 0 0 6px var(--ink); }
html.belt .mg-card.mill-screen {
  border: 0; box-shadow: none; color: #f1eef8;
  background:
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .6) 0 1px, transparent 1.6px) 0 0 / 140px 160px,
    radial-gradient(circle at 63% 71%, rgba(220, 230, 255, .5) 0 .8px, transparent 1.4px) 0 0 / 110px 130px,
    radial-gradient(ellipse at 92% -6%, rgba(255, 200, 140, .2), transparent 42%),
    linear-gradient(162deg, #191433 0%, #0d0a20 48%, #07060f 100%);
}
html.belt .mg-card.mill-screen::before, html.belt .mg-card.mill-screen::after { display: none; }
html.belt .mill-screen .mg-btn { font-size: 20px; }
html.belt .mg-result { background: rgba(246, 243, 238, .97); color: var(--text); border-radius: 15px; }
html.belt .mill-screen .mg-result { background: rgba(246, 243, 238, .97); }
html.belt .fx-item { padding: 5px 12px 5px 6px; }
html.belt .fx-item b { color: var(--text); font-size: 18px; }
html.belt .fx-side.out .fx-item { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange), 0 0 18px rgba(255, 120, 40, .35); }
html.belt .fx-side.out .fx-item b { color: var(--accent); font-size: 24px; }
html.belt .fx-side.out.bad .fx-item { border-color: var(--danger); box-shadow: none; }
html.belt .fx-badge span { color: var(--ink); font-size: 18px; }

/* The manual: the flight data file, white pages in a binder with orange tabs. */
html.belt .mpanel { background: linear-gradient(#f6f3ee, #ebe7df); color: var(--text); }
html.belt .mhead h2 { font-size: 19px; }
html.belt .mclose { border-radius: 50%; font-weight: 700; }
html.belt .mtabs button { color: var(--muted); border-radius: 8px; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; box-shadow: none; }
html.belt .mtabs button.on { color: var(--ink); background: linear-gradient(#ffb47a, #f37a24); border-color: var(--ink); }
html.belt .msearch { border-radius: 10px; font-weight: 500; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .12); }
html.belt .mbody { color: var(--text); }
html.belt .mentry { box-shadow: 0 2px 0 rgba(18, 15, 29, .25); }
html.belt .mentry h4 { font-family: var(--sans); font-weight: 700; font-size: 17px; letter-spacing: .02em; }
html.belt .mentry.flash { animation: flash 1.2s ease; }
html.belt .mlabel { letter-spacing: .1em; color: var(--muted); }
html.belt .mlink { background: #e4e0d7; border: 1px solid #c9c3d2; color: var(--text); }
html.belt .mtier, html.belt .mtable th, html.belt .mtable td { border-color: rgba(18, 15, 29, .12); }
html.belt .mtable td { font-variant-numeric: tabular-nums; }

/* The Styles and Ideas pages: white enamel like the sheets, so the dark lettering
   reads; the tabs along the bottom stay on the dark of space. Lettering on
   accent-coloured things is the dark of space, which reads on the orange. */
html.belt.doc, html.belt.doc body.ss { background: linear-gradient(#f3f0e9, #e6e2d9) fixed; color: var(--text); }
html.belt .ss-style, html.belt .ss-card { box-shadow: 0 3px 0 rgba(18, 15, 29, .2); }
html.belt .ss-btn, html.belt .ss-chip, html.belt .ss-tab { font-weight: 700; }
html.belt .ss-gold, html.belt .ss-tab.on { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35); }
html.belt .ss-tab { font-size: 14px; }
html.belt .idea-tab { background: var(--enamel); border-color: var(--orange); }
/* ---- Pulp Comic style (see style.js and the pulp-* files) --------------------------
   A four-colour adventure comic on newsprint: white paper panels with heavy ink
   borders and hard black shadows, yellow caption boxes, speech balloons, Ben-Day
   dots, lettering in Bangers, and reading in Comic Neue. */
@font-face {
  font-family: 'Bangers';
  src: url(fonts/bangers.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Comic Neue';
  src: url(fonts/comic-neue-400.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Comic Neue';
  src: url(fonts/comic-neue-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
html.pulp {
  --display: 'Bangers', 'Comic Neue', system-ui, sans-serif;
  --ink: #16110d;
  --paper: #f4e9cb;
  --white: #fffaf0;
  --bg: #f3e6c4;
  --panel: #fffaf0;
  --panel-2: #f7ecd2;
  --panel-edge: #16110d;
  --text: #16110d;
  --muted: #6e5c4a;
  --accent: #1f5fd6;
  --danger: #e0201c;
  --good: #14904a;
  --yellow: #ffe600;
  --red: #e8261c;
  /* A printer's screen of dots, for tints. */
  --dots-yellow: radial-gradient(circle, #ffd200 32%, transparent 36%) 0 0 / 6px 6px;
  --dots-blue: radial-gradient(circle, #8cc4ff 30%, transparent 34%) 0 0 / 6px 6px;
  --dots-red: radial-gradient(circle, #ff8a70 30%, transparent 34%) 0 0 / 6px 6px;
  --shadow: 4px 4px 0 var(--ink);
}
html.pulp body {
  font-family: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif; font-weight: 700;
  background: radial-gradient(circle, rgba(31, 95, 214, .07) 30%, transparent 34%) 0 0 / 7px 7px, var(--bg);
}
html.pulp button { font-family: 'Comic Neue', 'Comic Sans MS', system-ui, sans-serif; font-weight: 700; }
html.pulp .card h1, html.pulp .card button, html.pulp .mg-btn, html.pulp .mg-card h2, html.pulp .mg-result h3, html.pulp .mhead h2,
html.pulp .mgroup, html.pulp .mguide h3, html.pulp #turns, html.pulp .toast {
  font-family: 'Bangers', 'Comic Neue', sans-serif; font-weight: 400; letter-spacing: .05em;
}
/* The toast is a speech balloon: it wraps when the line is long, its tail is an
   inked wedge off its lower left, and the whole of it, tail and all, sits on one
   hard shadow. It pops in from the tail, as if someone below had spoken. */
html.pulp .toast {
  background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 28px / 24px;
  padding: 8px 20px 7px; font-size: 19px; line-height: 1.12; text-align: center;
  white-space: normal; overflow-wrap: break-word; width: max-content; max-width: min(380px, calc(100vw - 44px));
  box-shadow: none; filter: drop-shadow(4px 4px 0 var(--ink));
  transform-origin: 38px 100%;
}
html.pulp .toast::before, html.pulp .toast::after {
  content: ''; position: absolute; left: 26px; width: 28px; height: 22px;
}
html.pulp .toast::before { top: 100%; background: var(--ink); clip-path: polygon(0 0, 28px 0, 4px 22px); }
html.pulp .toast::after { top: calc(100% - 1px); background: #fff; clip-path: polygon(2.9px 0, 24.6px 0, 6px 17.1px); }
html.pulp .toast.show { animation: pulp-toast 2s ease; }
@keyframes pulp-toast {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(.55) rotate(-5deg); }
  9% { opacity: 1; transform: translate(-50%, 0) scale(1.07) rotate(1.5deg); }
  15%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(.98) rotate(-1deg); }
}
/* What an overlay lays over the page: a wash of ink with a coarse screen of
   dots in it, so the page behind drops back as if printed in shadow. */
html.pulp .overlay {
  background: radial-gradient(circle, rgba(22, 17, 13, .5) 28%, transparent 32%) 0 0 / 7px 7px, rgba(30, 22, 16, .62);
}
html.pulp .card button, html.pulp .mg-btn {
  color: var(--ink); background: var(--dots-yellow), var(--yellow);
  border: 3px solid var(--ink); border-radius: 8px; box-shadow: var(--shadow); font-size: 22px;
}
html.pulp .card button:active, html.pulp .mg-btn:active, html.pulp .mg-btn.held { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
html.pulp .card, html.pulp .mg-card, html.pulp .manual-btn, html.pulp .turns, html.pulp .tally, html.pulp .tool-btn,
html.pulp .mclose, html.pulp .mtabs button, html.pulp .msearch, html.pulp .mentry, html.pulp .mg-stat, html.pulp .fx-item {
  background: var(--white); border: 2.5px solid var(--ink); border-radius: 4px; color: var(--ink);
}

/* ---- Pulp Comic: the dive and its results ---- */
/* The dive is a page of the comic: the turns and the haul in caption boxes, the
   manual a cover badge, the board a panel cut through the earth (dive.js and
   pulp-art.js draw inside it), the tools little panels that press in when
   they're aimed, and the haul a splash panel. */
html.pulp {
  --burst: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64' preserveAspectRatio='none'%3E%3Cpolygon transform='translate(3 3)' points='50.0,5.0 58.1,13.6 72.7,8.1 72.3,18.4 87.4,18.8 81.6,26.9 98.7,32.0 83.3,37.4 91.3,46.5 72.5,45.7 73.1,56.4 58.3,50.9 50.0,58.7 41.9,50.4 27.9,55.3 25.2,47.1 8.3,46.6 16.6,37.4 2.1,32.0 19.4,27.0 11.2,18.4 26.2,17.5 26.3,7.0 41.0,11.6' fill='%2316110d'/%3E%3Cpolygon points='50.0,5.0 58.1,13.6 72.7,8.1 72.3,18.4 87.4,18.8 81.6,26.9 98.7,32.0 83.3,37.4 91.3,46.5 72.5,45.7 73.1,56.4 58.3,50.9 50.0,58.7 41.9,50.4 27.9,55.3 25.2,47.1 8.3,46.6 16.6,37.4 2.1,32.0 19.4,27.0 11.2,18.4 26.2,17.5 26.3,7.0 41.0,11.6' fill='%23ffe600' stroke='%2316110d' stroke-width='2.2' stroke-linejoin='miter' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
html.pulp #dive .hud { gap: 9px; padding: 0 3px 3px 0; }
html.pulp #dive .turns {
  min-width: 66px; padding: 4px 8px 3px; gap: 0;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink);
}
html.pulp #dive .turns .label {
  font-family: 'Bangers', sans-serif; font-size: 14px; letter-spacing: .1em; color: var(--ink); line-height: 1;
}
html.pulp #turns { font-size: 36px; color: var(--ink); line-height: .95; letter-spacing: .02em; }
html.pulp .turns.low { background: var(--dots-red), #fff4e0; }
html.pulp .turns.low #turns { color: var(--red); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; animation: pulp-jitter .5s steps(2, end) infinite; }
@keyframes pulp-jitter { 0% { transform: translate(-1px, 0) rotate(-3deg); } 100% { transform: translate(1px, -1px) rotate(3deg); } }
html.pulp #dive .tally {
  padding: 7px 6px 5px; gap: 7px 3px;
  background: #fffaf0; border: 3px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink);
}
html.pulp .tally-item { font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 16px; letter-spacing: .03em; gap: 2px; }
html.pulp .tally-item img { width: 24px; height: 24px; }
/* What this dive has brought up so far: a little starburst on each ore. */
html.pulp .tally-item .gain, html.pulp .results .card li .gain {
  font-family: 'Bangers', sans-serif; font-weight: 400; color: var(--ink); letter-spacing: .02em;
  background: var(--burst) center / 100% 100% no-repeat; border-radius: 0;
}
html.pulp .tally-item .gain { top: -17px; right: -10px; font-size: 11.5px; line-height: 1; padding: 5px 7px 6px 6px; transform: rotate(-8deg); z-index: 1; }
html.pulp .tally-item .gain.pop { animation: pulp-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes pulp-pop { 0% { transform: rotate(-8deg) scale(2.1); } 100% { transform: rotate(-8deg) scale(1); } }
/* The manual: a round cover badge, yellow with a ring of red dots. */
html.pulp #dive .manual-btn {
  width: 48px; height: 48px; align-self: center; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, var(--yellow) 0 54%, transparent 55%), var(--dots-red), var(--yellow);
  border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
html.pulp #dive .manual-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
html.pulp #dive .manual-btn .ico { width: 28px; height: 28px; }
/* A narrow phone: the heads-up row a little tighter, so the badge fits. */
@media (max-width: 400px) {
  html.pulp #dive .hud { gap: 7px; }
  html.pulp #dive .turns { min-width: 58px; padding: 4px 6px 3px; }
  html.pulp #turns { font-size: 33px; }
  html.pulp #dive .tally { padding: 7px 4px 5px; gap: 7px 1px; }
  html.pulp .tally-item { font-size: 14.5px; letter-spacing: .01em; }
  html.pulp .tally-item img { width: 21px; height: 21px; }
  html.pulp #dive .manual-btn { width: 44px; height: 44px; }
  html.pulp #dive .manual-btn .ico { width: 26px; height: 26px; }
}
/* The line over the board: dive notes in a caption, a tool's prompt shouted.
   It keeps one height whatever it says (56px with its margins), so the board
   doesn't jump under the finger when the notes clear on the first touch. */
html.pulp #chain-info {
  min-height: 56px; margin: 0 auto; padding: 0 4px; color: var(--ink);
  font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: .05em; line-height: 1.1;
}
html.pulp #chain-info:not(:empty) {
  display: flex; align-items: center; justify-content: center;
  width: fit-content; max-width: 100%; min-height: 44px; margin: 6px auto;
}
html.pulp #chain-info.notes:not(:empty) {
  padding: 3px 10px 2px; font-family: 'Comic Neue', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .01em;
  line-height: 1.28; background: var(--yellow); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
html.pulp #chain-info.ok:not(:empty) {
  padding: 3px 14px 1px; color: var(--ink);
  background: #fff; border: 3px solid var(--ink); border-radius: 22px; box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1.5deg);
}
html.pulp #chain-info.ok:not(:empty)::before { content: '\2605'; color: var(--red); margin-right: .4em; }
@media (max-width: 374px) {
  html.pulp #chain-info { font-size: 16.5px; letter-spacing: .03em; }
  html.pulp #chain-info.notes:not(:empty) { font-size: 10.5px; padding: 3px 8px 2px; }
}
/* The board: a panel, inked heavy, on a hard shadow. Its border is outside
   its drawing area (content-box), which dive.js allows for. */
html.pulp #board {
  box-sizing: content-box; background: var(--paper);
  border: 4px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 var(--ink);
}
/* The tools: little comic panels on hard shadows; the one being aimed is
   pressed into its shadow, yellow, ringed in red, and says so. */
html.pulp .toolbar { gap: 8px; padding: 13px 6px 6px 0; }
html.pulp .tool-btn {
  flex: 1 1 0; min-width: 64px; padding: 5px 4px 5px; gap: 1px; justify-content: center;
  background: #fffaf0;
  border: 3px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink);
  transition: transform .06s, box-shadow .06s;
}
html.pulp .tool-btn::after {
  content: ''; position: absolute; left: 3px; right: 3px; bottom: 3px; height: 38%;
  background: var(--dots-blue); opacity: .55; pointer-events: none;
}
html.pulp .tool-btn .ico { width: 32px; height: 32px; position: relative; z-index: 1; }
html.pulp .tool-btn .tname {
  position: relative; z-index: 1; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: .04em;
  white-space: normal; text-align: center; line-height: 1;
}
html.pulp .tool-btn .tcount {
  z-index: 2; top: -11px; right: -9px; min-width: 24px; padding: 3px 5px 2px; line-height: 1;
  font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 14px; color: #fff;
  background: var(--red); border: 2.5px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
}
html.pulp .tool-btn:active:not(:disabled) { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
html.pulp .tool-btn.aiming {
  background: var(--yellow); border-color: var(--ink);
  transform: translate(4px, 4px); box-shadow: 0 0 0 3px var(--red), 0 0 0 5px var(--ink);
}
html.pulp .tool-btn.aiming::after { background: var(--dots-red); opacity: .6; }
html.pulp .tool-btn.aiming::before {
  content: 'Aim!'; position: absolute; z-index: 2; top: -13px; left: -8px; padding: 2px 6px 1px;
  font-family: 'Bangers', sans-serif; font-size: 13px; letter-spacing: .06em; line-height: 1.1; color: #fff;
  background: var(--red); border: 2.5px solid var(--ink); transform: rotate(-8deg);
  animation: pulp-throb .6s ease-in-out infinite alternate;
}
@keyframes pulp-throb { to { transform: rotate(-8deg) scale(1.14); } }
/* The haul: a splash panel. THE HAUL! lettered big over a sunburst, the ores
   in inked rows, what this dive brought up on starbursts, and a caption
   hanging off the corner. */
html.pulp .results {
  background: radial-gradient(circle, rgba(22, 17, 13, .32) 30%, transparent 34%) 0 0 / 6px 6px, rgba(22, 17, 13, .42);
}
html.pulp .results .card {
  --band: 88px;
  position: relative; max-width: 350px; padding: 16px 18px 30px;
  background: repeating-conic-gradient(from 0deg at 50% calc(var(--band) / 2), #ffe98a 0 7.5deg, #fffaf0 7.5deg 15deg) top / 100% var(--band) no-repeat, #fffaf0;
  border: 4px solid var(--ink); border-radius: 0; box-shadow: 8px 8px 0 var(--ink);
  animation: pulp-splash .42s cubic-bezier(.25, 1.6, .45, 1) both;
}
@keyframes pulp-splash { from { transform: scale(.55) rotate(-6deg); opacity: 0; } }
html.pulp .results .card::before {
  content: ''; position: absolute; left: 0; right: 0; top: var(--band); border-top: 3px solid var(--ink);
}
html.pulp .results .card h1 {
  margin: 4px 0 26px; font-size: 50px; line-height: 1; letter-spacing: .04em; color: var(--yellow);
  -webkit-text-stroke: 2.5px var(--ink); paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--red), 5px 5px 0 var(--ink);
  transform: rotate(-4deg);
}
html.pulp .results .card ul { margin: 0 0 10px; }
html.pulp .results .card li { gap: 10px; padding: 5px 2px; border-bottom: 2px solid var(--ink); font-size: 16px; }
html.pulp .results .card li:last-child { border-bottom: 0; }
html.pulp .results .card li img { width: 34px; height: 34px; }
html.pulp .results .card li .name { font-family: 'Comic Neue', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: 14.5px; }
html.pulp .results .card li .gain { font-size: 17px; line-height: 1; padding: 9px 12px 9px 10px; transform: rotate(-5deg); }
html.pulp .results .card li:nth-child(even) .gain { transform: rotate(4deg); }
html.pulp .results .card li .qty { font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 21px; letter-spacing: .03em; min-width: 40px; }
html.pulp #results-extra { color: var(--ink); font-style: italic; font-weight: 400; font-size: 13px; margin: 0 0 12px; }
html.pulp .results .card button { font-size: 24px; padding: 11px 14px 9px; }
html.pulp .results .card::after {
  content: 'To be continued\2026'; position: absolute; right: -12px; bottom: -17px; padding: 4px 11px 3px;
  font-family: 'Bangers', sans-serif; font-size: 17px; letter-spacing: .06em; color: var(--ink);
  background: var(--yellow); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-2deg);
}
/* A short screen: the splash a little tighter, so it all fits. */
@media (max-height: 700px) {
  html.pulp .results .card { --band: 74px; padding: 12px 16px 28px; }
  html.pulp .results .card h1 { font-size: 42px; margin: 2px 0 20px; }
  html.pulp .results .card li { padding: 3px 2px; }
  html.pulp .results .card li img { width: 30px; height: 30px; }
  html.pulp .results .card button { padding: 9px 14px 7px; }
}

/* ---- Pulp Comic: mini games ---- */
/* The furnace and the mill as panels of the comic (pulp-games.js draws their
   canvases): the page dimmed under a screen of ink dots, the card a panel with
   a heavy border and a hard shadow, its title a caption box pinned over the
   corner, the readouts little captions, the status a speech balloon, and the
   result a splash on a sunburst. */
html.pulp .overlay.mg {
  background: radial-gradient(circle, rgba(22, 17, 13, .5) 1.3px, transparent 1.8px) 0 0 / 5px 5px, rgba(22, 17, 13, .58);
}
html.pulp .mg-card {
  max-width: 392px; padding: 24px 14px 16px; background: var(--white);
  border: 3.5px solid var(--ink); border-radius: 2px; box-shadow: 7px 7px 0 var(--ink);
}
html.pulp .mg-card h2 {
  position: absolute; left: 10px; top: -15px; max-width: calc(100% - 22px); margin: 0; padding: 4px 11px 2px;
  font-size: 19px; line-height: 1.1; text-align: left; color: var(--ink);
  background: var(--yellow); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.2deg);
}
html.pulp .mg-help {
  margin: 0 0 10px; padding: 5px 9px; font-size: 12.5px; line-height: 1.3; font-weight: 700; text-align: left; color: var(--ink);
  background: #fff3b4; border: 2px solid var(--ink);
}
html.pulp .gauge, html.pulp .furnace-mouth { display: none; }
html.pulp .mg-scene { display: block; margin: 0 5px 12px 0; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); background: var(--paper); line-height: 0; }
html.pulp .mg-scene canvas { display: block; max-width: 100%; height: auto !important; }
html.pulp .heat-wrap { justify-content: center; margin: 0 4px 12px 0; }
html.pulp .heat-side { flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: center; }
html.pulp .mg-stat { padding: 3px 9px 2px; border-radius: 2px; box-shadow: 3px 3px 0 var(--ink); }
html.pulp .mg-stat span { font-family: 'Bangers', 'Comic Neue', sans-serif; font-size: 12.5px; letter-spacing: .07em; color: var(--ink); text-transform: uppercase; }
html.pulp .mg-stat b { font-family: 'Bangers', 'Comic Neue', sans-serif; font-weight: 400; font-size: 25px; line-height: 1.05; letter-spacing: .03em; color: var(--accent); }
html.pulp .mg-stat.paused b { color: var(--danger); }
html.pulp .mg-coal img { width: 32px; height: 32px; }
html.pulp .mg-lump { filter: drop-shadow(2px 2px 0 var(--ink)); }
html.pulp .gain-ring { --fill: var(--red); --track: rgba(22, 17, 13, .12); box-shadow: 0 0 0 2px var(--ink); }
html.pulp .gain-ring::before { background: var(--white); box-shadow: 0 0 0 2px var(--ink); }
html.pulp .gain-ring.max { --fill: var(--good); box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); }
html.pulp .mg-gain .gain-ring.rush { --fill: var(--yellow); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--yellow), 0 0 0 6px var(--ink); }
html.pulp .mg-gain .gain-ring { width: 36px; height: 36px; }
html.pulp .mg-bar { height: 15px; margin: 0 4px 14px 0; border: 2.5px solid var(--ink); border-radius: 0; background: var(--white); box-shadow: 3px 3px 0 var(--ink); }
html.pulp .mg-bar i { background: radial-gradient(circle, #ffd23a 30%, transparent 35%) 0 0 / 5px 5px, var(--red); box-shadow: 2px 0 0 var(--ink); }
/* What's happening, in a speech balloon whose tail points up at the furnace. */
html.pulp .mg-status {
  position: relative; width: fit-content; max-width: 100%; min-height: 0; margin: 0 auto 14px; padding: 4px 15px 3px;
  font-size: 14.5px; line-height: 1.25; color: var(--ink); background: #fff; border: 2.5px solid var(--ink); border-radius: 999px;
}
html.pulp .mg-status::after {
  content: ''; position: absolute; left: 22px; top: -9px; width: 11px; height: 11px; background: inherit;
  border-left: 2.5px solid var(--ink); border-top: 2.5px solid var(--ink); transform: skewX(-24deg) rotate(30deg);
}
html.pulp .mg-status:empty { visibility: hidden; }
html.pulp .mg-status.good { color: var(--good); }
html.pulp .mg-status.hot { color: #d2400a; }
html.pulp .mg-status.bad { color: var(--danger); background: var(--yellow); font-family: 'Bangers', 'Comic Neue', sans-serif; font-weight: 400; font-size: 16.5px; letter-spacing: .04em; }
html.pulp .mg-btn { margin-right: 4px; width: calc(100% - 4px); }
html.pulp .mg-btn.held { background: var(--dots-red), #ff6a3a; filter: none; }
/* The mill: the whole screen a page, the bed a panel on it. */
html.pulp .mg-card.mill-screen {
  max-width: none; border: 0; border-radius: 0; box-shadow: none;
  padding: calc(env(safe-area-inset-top) + 8px) 7px calc(env(safe-area-inset-bottom) + 12px) 5px;
  background: radial-gradient(circle, rgba(31, 95, 214, .12) 30%, transparent 34%) 0 0 / 7px 7px, var(--bg);
}
html.pulp .mill-board { flex-direction: column; align-items: center; justify-content: flex-end; margin-bottom: 14px; }
html.pulp #mg-mill { flex: none; border: 3px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 5px 5px 0 var(--ink); }
/* A caption over the bed's corner, where the screen's tall enough for one. */
@media (max-aspect-ratio: 1/2) {
  html.pulp .mill-board::before {
    content: 'Meanwhile, down at the mill…'; align-self: flex-start; margin: 0 0 10px 4px;
    padding: 4px 12px 2px; font-family: 'Bangers', 'Comic Neue', sans-serif; font-size: 19px; letter-spacing: .05em; color: var(--ink);
    background: var(--yellow); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.5deg);
  }
}
html.pulp .mill-screen .mg-btn {
  padding: 13px; font-size: 32px; letter-spacing: .08em; color: var(--yellow); background: var(--dots-red), #e8261c;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink), 2px 2px 0 var(--ink), 3px 4px 0 var(--ink);
}
/* The result: a splash on a sunburst, under a caption. A fire that went out
   gets a cold, grey one. */
html.pulp .mg-result, html.pulp .mill-screen .mg-result {
  z-index: 2; border-radius: 0; padding: 46px 16px 20px;
  background:
    radial-gradient(circle, rgba(255, 128, 0, .34) 26%, transparent 30%) 0 0 / 6px 6px,
    repeating-conic-gradient(from -3deg at 50% 36%, #ffe600 0 8deg, #fff4b0 8deg 16deg);
  animation: pulp-splash .3s cubic-bezier(.2, 1.4, .4, 1) both;
}
html.pulp .mg-card:has(> .mg-result) > h2 { visibility: hidden; }
html.pulp .mg-result::before {
  content: 'Moments later…'; position: absolute; left: 6px; top: -19px; padding: 4px 11px 2px;
  font-family: 'Bangers', 'Comic Neue', sans-serif; font-size: 16px; letter-spacing: .05em; color: var(--ink);
  background: #fff; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transform: rotate(-1.5deg);
}
html.pulp .mill-screen .mg-result::before { left: 10px; top: calc(env(safe-area-inset-top) + 12px); }
html.pulp .mg-result h3 {
  font-size: 46px; line-height: 1.05; letter-spacing: .04em; color: var(--yellow); -webkit-text-stroke: 1.5px #e8261c;
  text-shadow: -3px -3px 0 var(--ink), 3px -3px 0 var(--ink), -3px 3px 0 var(--ink), 3px 3px 0 var(--ink), 0 -3.5px 0 var(--ink), 0 3.5px 0 var(--ink),
    -3.5px 0 0 var(--ink), 3.5px 0 0 var(--ink), 7px 7px 0 var(--ink);
  transform: rotate(-4deg); animation: pulp-pow .45s .08s cubic-bezier(.2, 1.6, .4, 1) both;
}
html.pulp .mg-result:has(.fx-side.bad) {
  background:
    radial-gradient(circle, rgba(22, 17, 13, .2) 26%, transparent 30%) 0 0 / 6px 6px,
    repeating-conic-gradient(from -3deg at 50% 36%, #a9cbe0 0 8deg, #dfeaf0 8deg 16deg);
}
html.pulp .mg-result:has(.fx-side.bad) h3 { color: #fff; -webkit-text-stroke: 1.5px #1f5fd6; transform: rotate(3deg); }
html.pulp .fx { margin: 22px 0 26px; gap: 12px; }
html.pulp .fx-item { padding: 4px 11px 4px 5px; border-radius: 2px; box-shadow: 3px 3px 0 var(--ink); }
html.pulp .fx-item b { font-family: 'Bangers', 'Comic Neue', sans-serif; font-size: 25px; color: var(--ink); }
html.pulp .fx-arrow { filter: drop-shadow(2px 2px 0 var(--ink)); }
html.pulp .fx-side.out .fx-item { border: 3.5px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
html.pulp .fx-side.out .fx-item b { font-size: 34px; color: var(--accent); }
html.pulp .fx-side.out.bad .fx-item { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); background: #eef3f6; }
html.pulp .fx-side.out.bad .fx-item b { color: var(--ink); }
html.pulp .fx-badge span { font-family: 'Bangers', 'Comic Neue', sans-serif; color: var(--ink); }
html.pulp .mg-result .mg-btn { max-width: 300px; }
@keyframes pulp-splash { from { opacity: 0; transform: scale(.96); } }
@keyframes pulp-pow { from { transform: scale(2.4) rotate(-14deg); opacity: 0; } }

/* ---- Pulp Comic: the manual ---- */
/* The comic's back pages: an encyclopedia on newsprint. A red masthead with
   the title lettered in yellow, the tabs as caption boxes, the search as a
   speech balloon, and every entry a panel of its own (paper, a heavy ink
   border, a hard shadow, and its kind in a caption box in the corner). Headings
   in Bangers, reading in Comic Neue. */
html.pulp .mpanel {
  background:
    radial-gradient(circle, rgba(31, 95, 214, .08) 28%, transparent 32%) 0 0 / 7px 7px,
    linear-gradient(90deg, rgba(120, 90, 40, .07), transparent 12px, transparent calc(100% - 12px), rgba(120, 90, 40, .07)),
    #f4e9cb;
  padding-left: 12px; padding-right: 12px;
}
@media (min-width: 580px) {
  html.pulp .mpanel { border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); box-shadow: 6px 0 0 var(--ink); }
}

/* The masthead. */
html.pulp .mhead {
  position: relative; flex: none; flex-wrap: wrap; margin: 2px 6px 0 0; padding: 6px 8px 0 10px;
  background: radial-gradient(circle, #b5080e 26%, transparent 30%) 0 0 / 6px 6px, #e8261c;
  border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink);
}
html.pulp .mhead h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 31px; line-height: 1; color: #ffe600; letter-spacing: .05em; padding-top: 3px;
  text-shadow: -1.5px -1.5px 0 var(--ink), 1.5px -1.5px 0 var(--ink), -1.5px 1.5px 0 var(--ink), 1.5px 1.5px 0 var(--ink),
    0 -2px 0 var(--ink), 0 2px 0 var(--ink), -2px 0 0 var(--ink), 2px 0 0 var(--ink), 4px 4px 0 var(--ink);
  transform: rotate(-1.5deg); transform-origin: left center;
}
html.pulp .mhead h2 .ico {
  width: 40px; height: 40px; padding: 4px; vertical-align: 0; border-radius: 50%; flex: none;
  background: var(--dots-yellow), #fff3a8; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transform: rotate(1.5deg);
}
/* The strapline under the title, a strip of yellow along the masthead's foot. */
html.pulp .mhead::after {
  content: 'Deep Dig Adventures \2022  The back pages'; flex-basis: calc(100% + 18px); margin: 7px -8px 0 -10px; padding: 3px 10px 2px;
  font: 400 13px/1.2 'Bangers', sans-serif; letter-spacing: .12em; color: var(--ink);
  background: #ffe600; border-top: 2.5px solid var(--ink);
}
/* The close button: a cover badge with an inked cross. */
html.pulp .mclose {
  position: relative; width: 46px; height: 46px; margin: -2px -4px 0 6px; padding: 0; flex: none;
  border-radius: 50%; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  background: radial-gradient(circle, #ffe600 58%, transparent 59%), radial-gradient(circle, #ff5a20 30%, transparent 34%) 0 0 / 5px 5px, #ffe600;
  color: transparent; font-size: 0;
}
html.pulp .mclose::before, html.pulp .mclose::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 22px; height: 5px; margin: -2.5px 0 0 -11px;
  background: var(--ink); border-radius: 3px; transform: rotate(45deg);
}
html.pulp .mclose::after { transform: rotate(-45deg); }
html.pulp .mclose:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* The tabs: caption boxes, the open one yellow and tilted out of line. */
html.pulp .mtabs { gap: 5px; padding: 14px 6px 10px 1px; }
html.pulp .mtabs button {
  flex: 1 0 auto; padding: 7px 6px 5px; border-radius: 0; box-shadow: 3px 3px 0 var(--ink);
  font: 400 14.5px/1.1 'Bangers', sans-serif; letter-spacing: .05em; color: var(--ink);
}
@media (min-width: 380px) { html.pulp .mtabs button { font-size: 16px; padding-left: 8px; padding-right: 8px; } }
html.pulp .mtabs button.on {
  background: var(--dots-yellow), var(--yellow); border-width: 3px; box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-2deg) translateY(-1px);
}
html.pulp .mtabs button:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }

/* The search: a speech balloon, its tail and hard shadow drawn into the
   background so they stretch with it, and a magnifying glass inside. */
html.pulp .msearch {
  -webkit-appearance: none; appearance: none; flex: none; width: 100%;
  height: 62px; margin: 0 0 2px; padding: 0 24px 20px 46px; border: 0; border-radius: 0; outline: none;
  font: 700 17px 'Comic Neue', 'Comic Sans MS', sans-serif; color: var(--ink);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.6' fill='%23fff3a8' stroke='%2316110d' stroke-width='2.6'/%3E%3Cpath d='M12.3 12.3L17.6 17.6' stroke='%2316110d' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") 17px 12px / 20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 62' preserveAspectRatio='none'%3E%3Cg fill='%2316110d'%3E%3Crect x='6' y='6' width='390' height='40' rx='22'/%3E%3Cpath d='M48 44L40 62L78 44Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%2316110d' stroke-width='6' stroke-linejoin='round'%3E%3Crect vector-effect='non-scaling-stroke' x='2' y='2' width='390' height='40' rx='22'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M44 40L36 58L74 40Z'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Crect x='2' y='2' width='390' height='40' rx='22'/%3E%3Cpath d='M44 40L36 58L74 40Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
html.pulp .msearch:focus {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.6' fill='%23ffffff' stroke='%2316110d' stroke-width='2.6'/%3E%3Cpath d='M12.3 12.3L17.6 17.6' stroke='%2316110d' stroke-width='3.6' stroke-linecap='round'/%3E%3C/svg%3E") 17px 12px / 20px 20px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 62' preserveAspectRatio='none'%3E%3Cg fill='%2316110d'%3E%3Crect x='6' y='6' width='390' height='40' rx='22'/%3E%3Cpath d='M48 44L40 62L78 44Z'/%3E%3C/g%3E%3Cg fill='none' stroke='%2316110d' stroke-width='6' stroke-linejoin='round'%3E%3Crect vector-effect='non-scaling-stroke' x='2' y='2' width='390' height='40' rx='22'/%3E%3Cpath vector-effect='non-scaling-stroke' d='M44 40L36 58L74 40Z'/%3E%3C/g%3E%3Cg fill='%23fff6b8'%3E%3Crect x='2' y='2' width='390' height='40' rx='22'/%3E%3Cpath d='M44 40L36 58L74 40Z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
html.pulp .msearch::placeholder { font: 400 19px 'Bangers', sans-serif; letter-spacing: .07em; color: #8a7660; opacity: 1; }
html.pulp .msearch::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* Reading. */
html.pulp .mbody { padding: 6px 8px 40px 1px; }
html.pulp .mbody p, html.pulp .mbody li { font-size: 15.5px; line-height: 1.5; font-weight: 400; }
html.pulp .mbody b { font-weight: 700; }
html.pulp .mbody .muted { color: var(--muted); }
html.pulp .mguide > p { margin: 8px 0; }
/* Section headings: caption boxes pasted on a little askew. */
html.pulp .mguide h3, html.pulp .mgroup {
  display: table; margin: 24px 0 12px; padding: 4px 12px 2px;
  font-size: 21px; line-height: 1.1; color: var(--ink); letter-spacing: .05em;
  background: var(--yellow); border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
  transform: rotate(-1.2deg); transform-origin: left center;
}
html.pulp .mguide h3:first-child, html.pulp .mbody > .mgroup:first-child { margin-top: 8px; }
html.pulp .mguide h3:nth-of-type(even), html.pulp .mgroup:nth-of-type(even) { transform: rotate(.8deg); }
/* Bullets are red diamonds, inked; numbered steps sit in yellow badges. */
html.pulp .mguide ul, html.pulp .mguide ol { list-style: none; margin: 0; }
html.pulp .mguide ul { padding-left: 22px; }
html.pulp .mguide ol { padding-left: 34px; counter-reset: step; }
html.pulp .mguide li { position: relative; margin-bottom: 7px; }
html.pulp .mguide ul > li::before {
  content: ''; position: absolute; left: -18px; top: .5em; width: 7px; height: 7px;
  background: var(--red); border: 2px solid var(--ink); transform: rotate(45deg);
}
html.pulp .mguide ol > li { counter-increment: step; }
html.pulp .mguide ol > li::before {
  content: counter(step); position: absolute; left: -34px; top: 0; width: 25px; height: 25px; box-sizing: border-box;
  font: 400 16px/22px 'Bangers', sans-serif; text-align: center; color: var(--ink);
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; box-shadow: 2px 2px 0 var(--ink);
}
/* Tables are panels too, with a yellow head row. */
html.pulp .mtable {
  width: calc(100% - 5px); margin: 12px 0 4px; border-collapse: separate; border-spacing: 0;
  background: #fffaf0; border: 2.5px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); font-size: 14.5px;
}
html.pulp .mtable th {
  font: 400 16px/1.2 'Bangers', sans-serif; letter-spacing: .06em; color: var(--ink);
  background: var(--dots-yellow), #fff3a8; border-bottom: 2.5px solid var(--ink);
}
html.pulp .mtable th, html.pulp .mtable td { padding: 5px 8px; }
html.pulp .mtable td { border-bottom: 1.5px dashed rgba(22, 17, 13, .28); font-weight: 700; }
html.pulp .mtable tr:last-child td { border-bottom: 0; }
/* Recipes: what goes in, an arrow, what comes out. The columns are fixed so a
   long name wraps inside its link instead of pushing the table off the page. */
html.pulp .mtable.recipes { table-layout: fixed; }
html.pulp .mtable.recipes td { padding: 5px 3px 5px 6px; }
html.pulp .mtable.recipes td:nth-child(1) { width: 50%; }
html.pulp .mtable.recipes td:nth-child(2) { width: 18px; padding: 0; font: 700 18px sans-serif; color: var(--red); text-align: center; }
html.pulp .mtable.recipes td:nth-child(3) { text-align: right; }
html.pulp .mtable.recipes .mlink { white-space: normal; max-width: 100%; margin-right: 2px; text-align: left; }
html.pulp .mtable.recipes tr:nth-child(even) td { background: radial-gradient(circle, rgba(58, 160, 255, .2) 28%, transparent 32%) 0 0 / 5px 5px; }

/* Entries: comic panels. */
html.pulp .mentry {
  position: relative; margin: 0 6px 20px 0; padding: 30px 14px 14px; scroll-margin-top: 10px;
  border: 3px solid var(--ink); border-radius: 0; box-shadow: 5px 5px 0 var(--ink); background: #fffaf0;
}
html.pulp .mentry header { gap: 12px; }
html.pulp .mentry header .ico.big {
  width: 52px; height: 52px; padding: 6px; border-radius: 50%;
  background: var(--dots-yellow), #fff3a8; border: 2.5px solid var(--ink); box-shadow: 2px 2px 0 var(--ink);
}
html.pulp .mentry h4 { font: 400 24px/1.05 'Bangers', sans-serif; letter-spacing: .04em; color: var(--ink); }
/* The kind of thing it is, in a caption box over the panel's top-left corner. */
html.pulp .mentry header small {
  position: absolute; left: -3px; top: -3px; padding: 3px 10px 1px;
  font: 400 14px/1.1 'Bangers', sans-serif; letter-spacing: .08em; color: var(--ink);
  background: var(--yellow); border: 3px solid var(--ink);
}
html.pulp .mentry > p { margin: 10px 0 0; }
html.pulp .mrow { margin: 8px 0 0; padding-left: 70px; text-indent: -70px; }
html.pulp .mlabel {
  width: 70px; font: 400 14px/1 'Bangers', sans-serif; letter-spacing: .07em; text-transform: uppercase; color: var(--accent);
}
html.pulp .mtier { margin-top: 10px; padding-top: 8px; border-top: 2px dashed rgba(22, 17, 13, .3); font-size: 15px; font-weight: 400; }
html.pulp .mtier b { font-weight: 700; }
html.pulp .mtier div { margin-top: 6px; }
/* Links: little captions on hard shadows, pressed in when tapped. */
html.pulp .mlink {
  gap: 4px; margin: 3px 5px 3px 0; padding: 2px 9px 2px 4px; vertical-align: middle;
  font-size: 13.5px; font-weight: 700; line-height: 1.35; color: var(--ink);
  background: #fff; border: 2px solid var(--ink); border-radius: 12px 12px 12px 3px; box-shadow: 2px 2px 0 var(--ink);
}
html.pulp .mlink b { font: 400 15px/1 'Bangers', sans-serif; letter-spacing: .04em; color: var(--accent); }
html.pulp .mlink .ico { width: 20px; height: 20px; }
html.pulp .mlink:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
/* An entry jumped to flashes yellow, as if it had just been lettered in. */
html.pulp .mentry.flash { animation: pulp-flash 1.5s ease; }
@keyframes pulp-flash {
  0%, 35% { background-color: #fff3a0; box-shadow: 8px 8px 0 var(--red); transform: rotate(-.6deg) scale(1.012); }
}

/* ---- Pulp Comic: the Styles and Ideas pages, and the idea tab ---- */
/* Each card a panel on the page (square, a heavy ink rule, a hard shadow), the
   chosen things in the comic's yellow, and the tab a little caption stuck to
   the page's edge. */
html.pulp .ss-style, html.pulp .ss-card, html.pulp .idea-card {
  border: 3px solid var(--ink); border-radius: 0; box-shadow: 5px 5px 0 var(--ink); background: var(--white);
}
html.pulp .ss-btn, html.pulp .ss-chip, html.pulp .ss-tab, html.pulp .idea-actions button {
  border: 2.5px solid var(--ink); border-radius: 6px; box-shadow: 3px 3px 0 var(--ink);
  background: var(--white); color: var(--ink); font-family: var(--display); font-weight: normal; letter-spacing: .04em;
}
html.pulp .ss-btn:active, html.pulp .ss-chip:active, html.pulp .ss-tab:active, html.pulp .idea-actions button:active {
  transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink);
}
html.pulp .ss-gold, html.pulp .ss-chip[aria-pressed="true"], html.pulp .ss-tab.on, html.pulp .idea-actions .idea-save {
  background: var(--yellow); border-color: var(--ink); color: var(--ink);
}
html.pulp .ss-btn:disabled { box-shadow: none; }
html.pulp .idea-card h2 { color: var(--ink); letter-spacing: .04em; }
html.pulp .idea-card textarea { border: 2.5px solid var(--ink); border-radius: 0; background: #fff; }
html.pulp .idea-card textarea:focus { border-color: var(--accent); }
html.pulp .idea-sheet { background: rgba(22, 17, 13, .35); }
html.pulp .idea-tab {
  background: var(--yellow); border: 2.5px solid var(--ink); border-left: 0; border-radius: 0 8px 8px 0;
  box-shadow: 3px 3px 0 var(--ink); opacity: 1;
}
html.pulp .idea-tab.right { border-left: 2.5px solid var(--ink); border-right: 0; border-radius: 8px 0 0 8px; }

/* ---- Combine style (see style.js and the combine-* files) ------------------------------
   A state mining combine as a constructivist poster: aged cream paper, foxed and
   sooty; ink black rules and bands; poster red for what matters; square corners
   and hard shadows straight down; Anton block capitals for headings, numbers and
   stamps; Jost for reading. Numbers are rubber-stamped: red, framed, a little
   askew, and worn where the stamp didn't bite (the --wear mask). */
@font-face {
  font-family: 'Anton';
  src: url(fonts/anton.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url(fonts/jost-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Jost';
  src: url(fonts/jost-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
html.combine {
  --display: 'Anton', 'Jost', system-ui, sans-serif;
  --sans: 'Jost', system-ui, sans-serif;
  --bg: #ece3cb;
  --panel: #f6efdc;
  --panel-2: #e9dfc6;
  --panel-edge: #1b1814;
  --text: #1b1814;
  --muted: #6b6156;
  --accent: #c8241b;
  --danger: #d9620c;
  --good: #2e7d4f;
  --ink: #1b1814;
  --red: #c8241b;
  --red-deep: #8e1810;
  --paper: #ece3cb;
  --paper-hi: #f6efdc;
  --soot: #3b3632;
  /* The paper: a fine grain, broad stains of damp and age, and soot at the edges. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .23  0 0 0 0 .14  0 0 0 1.25 -.5'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
  --stain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='560'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .36  0 0 0 0 .17  0 0 0 1.5 -.7'/%3E%3C/filter%3E%3Crect width='560' height='560' filter='url(%23s)'/%3E%3C/svg%3E");
  --soot-edge: radial-gradient(ellipse at 50% 45%, transparent 58%, rgba(40, 32, 22, .2) 100%);
  --paper-bg: var(--grain), var(--stain), var(--soot-edge), var(--paper);
  --paper-card: var(--grain), var(--stain), var(--paper-hi);
  /* Where a rubber stamp didn't bite: an alpha mask, mostly solid, speckled. */
  --wear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='70'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.5' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -9 6.4'/%3E%3C/filter%3E%3Crect width='140' height='70' filter='url(%23w)'/%3E%3C/svg%3E");
  --drop: 0 4px 0 var(--ink);
}
html.combine body {
  font-family: var(--sans); font-weight: 500; color: var(--text);
  background: var(--paper-bg); background-color: var(--paper);
}
html.combine button { font-family: var(--sans); font-weight: 700; }
html.combine .card h1, html.combine .card button, html.combine .mg-btn, html.combine .mg-card h2, html.combine .mg-result h3, html.combine .mhead h2,
html.combine .mgroup, html.combine .mguide h3, html.combine #turns, html.combine .toast, html.combine .fx-item b, html.combine .fx-badge span {
  font-family: var(--display); font-weight: 400; letter-spacing: .04em;
}
html.combine .stage-error { color: var(--muted); }
/* The stamp's worn ink. */
html.combine #turns, html.combine .results .card::before, html.combine .mg-result h3 {
  -webkit-mask-image: var(--wear); mask-image: var(--wear);
  -webkit-mask-size: 70px 35px; mask-size: 70px 35px;
}
/* Boxes on the poster: paper, an ink rule, square, a hard shadow straight down. */
html.combine .card, html.combine .mg-card, html.combine .turns, html.combine .tally, html.combine .tool-btn,
html.combine .mtabs button, html.combine .msearch, html.combine .mentry, html.combine .mg-stat, html.combine .fx-item {
  color: var(--text); background: var(--paper-card);
  border: 2.5px solid var(--ink); border-radius: 0; box-shadow: var(--drop);
}
/* The main buttons: red slabs with paper capitals, an ink wedge cut into their left end. */
html.combine .card button, html.combine .mg-btn {
  color: var(--paper-hi); font-size: 21px; letter-spacing: .06em; text-transform: uppercase;
  background: linear-gradient(115deg, var(--ink) 0 18px, transparent 18.5px), var(--red);
  border: 2.5px solid var(--ink); border-radius: 0; box-shadow: 0 5px 0 var(--ink);
}
html.combine .card button:active, html.combine .mg-btn:active, html.combine .mg-btn.held {
  transform: translateY(3px); box-shadow: 0 2px 0 var(--ink);
}
html.combine .mg-btn.held { background: linear-gradient(115deg, var(--ink) 0 18px, transparent 18.5px), #e0352a; filter: none; }
/* The toast: a red slip pasted across the top, paper capitals stamped on it. */
html.combine .toast {
  padding: 8px 18px 7px; border-radius: 0; color: var(--paper-hi); background: var(--red);
  border: 2.5px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  font-size: 18px; letter-spacing: .07em; text-transform: uppercase;
  white-space: normal; width: max-content; max-width: min(380px, calc(100vw - 40px)); text-align: center; line-height: 1.15;
}
html.combine .toast.show { animation: combine-toast 1.9s ease; }
@keyframes combine-toast {
  0% { opacity: 0; transform: translate(-50%, -6px) scale(1.35) rotate(-4deg); }
  8% { opacity: 1; transform: translate(-50%, 0) scale(.97) rotate(-1.5deg); }
  13%, 78% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-1.5deg); }
  100% { opacity: 0; transform: translate(-50%, -4px) rotate(-1.5deg); }
}
html.combine .overlay { background: rgba(27, 24, 20, .82); }

/* ---- Combine: the dive and its results ---- */
/* The dive is the shift: the turns stamped in red on a paper slip, the haul on
   a strip ruled in ink, the manual a roundel, and the board framed in an ink
   rule with red corners, its border outside the drawing (dive.js allows for it). */
html.combine #dive .hud { gap: 8px; padding-bottom: 4px; }
html.combine #dive .turns { min-width: 68px; padding: 2px 6px 4px; gap: 0; justify-content: flex-start; }
html.combine .turns .label {
  align-self: stretch; margin: 0 -6px 2px; padding: 2px 0 1px; text-align: center;
  font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .16em; color: var(--paper-hi); background: var(--ink);
}
html.combine #turns {
  font-size: 32px; line-height: 1; color: var(--red); padding: 1px 5px 0;
  border: 2.5px solid var(--red); transform: rotate(-4deg); margin-top: 2px;
}
html.combine .turns.low #turns { animation: combine-thump .9s ease-in-out infinite; }
@keyframes combine-thump { 0%, 60% { transform: rotate(-4deg) scale(1); } 70% { transform: rotate(-7deg) scale(1.18); } 100% { transform: rotate(-4deg) scale(1); } }
html.combine #dive .tally { padding: 7px 5px 5px; gap: 7px 3px; }
html.combine .tally-item { font-family: var(--display); font-weight: 400; font-size: 15.5px; letter-spacing: .03em; gap: 2px; font-variant-numeric: tabular-nums; }
html.combine .tally-item img { width: 24px; height: 24px; }
/* What this shift has brought up: a little red stamp on each ore. */
html.combine .tally-item .gain, html.combine .card li .gain, html.combine .tool-btn .tcount {
  font-family: var(--display); font-weight: 400; letter-spacing: .03em; color: var(--paper-hi);
  background: var(--red); border-radius: 0; box-shadow: none;
}
html.combine .tally-item .gain { top: -10px; right: -7px; font-size: 11.5px; line-height: 14px; padding: 0 4px; transform: rotate(-6deg); z-index: 1; }
html.combine .tally-item .gain.pop { animation: combine-stamp .32s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes combine-stamp { 0% { transform: rotate(-14deg) scale(2.2); opacity: 0; } 100% { transform: rotate(-6deg) scale(1); opacity: 1; } }
/* The manual: a roundel, ink ringed in red with a paper face, on a hard shadow. */
html.combine .manual-btn {
  width: 46px; height: 46px; padding: 0; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle, var(--paper-hi) 0 58%, var(--red) 59% 75%, var(--ink) 76%);
  border: 0; box-shadow: 0 3px 0 #000;
}
html.combine .manual-btn.small { width: 46px; height: 46px; align-self: center; }
html.combine .manual-btn .ico { width: 25px; height: 25px; }
html.combine .manual-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #000; }
/* The line over the board: notes in small type on a paper strip; a tool's prompt in red capitals. */
html.combine #chain-info {
  min-height: 34px; color: var(--ink); font-family: var(--display); font-weight: 400;
  font-size: 17px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.15;
}
html.combine #chain-info.ok { color: var(--red); }
html.combine #chain-info.notes { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: .02em; text-transform: none; color: var(--soot); }
html.combine #board {
  box-sizing: content-box; border: 8px solid transparent; border-radius: 0;
  background:
    linear-gradient(var(--paper), var(--paper)) padding-box,
    linear-gradient(135deg, var(--red) 0 34px, transparent 34.5px) border-box,
    linear-gradient(-45deg, var(--red) 0 34px, transparent 34.5px) border-box,
    linear-gradient(var(--ink), var(--ink)) border-box;
  box-shadow: 0 6px 0 rgba(27, 24, 20, .45);
}
html.combine .board-wrap { padding: 4px 0 8px; }
/* The tools: paper slabs on hard shadows; the one being aimed is red, pressed in. */
html.combine .toolbar { gap: 7px; padding: 10px 0 6px; }
html.combine .tool-btn { flex: 1 1 0; min-width: 64px; min-height: 58px; padding: 5px 4px; gap: 1px; justify-content: center; }
html.combine .tool-btn .ico { width: 30px; height: 30px; }
html.combine .tool-btn .tname { font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; white-space: normal; text-align: center; line-height: 1.1; }
html.combine .tool-btn .tcount { top: -9px; right: -6px; min-width: 20px; padding: 1px 5px; font-size: 13px; line-height: 15px; text-align: center; transform: rotate(5deg); }
html.combine .tool-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
html.combine .tool-btn.aiming {
  color: var(--paper-hi); background: var(--red); border-color: var(--ink);
  transform: translateY(3px); box-shadow: 0 1px 0 var(--ink), 0 0 0 3px var(--paper), 0 0 0 5.5px var(--ink);
}
html.combine .tool-btn.aiming .tcount { background: var(--ink); }
/* The haul: a shift report. Its title an ink block, the ores ruled off like a
   ledger, what the shift brought up stamped red, and ACCEPTED stamped in the
   corner. */
html.combine .results { background: rgba(27, 24, 20, .72); }
html.combine .results .card {
  position: relative; max-width: 350px; padding: 18px 18px 20px;
  border-width: 3px; box-shadow: 0 8px 0 var(--ink);
  animation: combine-paste .36s cubic-bezier(.25, 1.5, .45, 1) both;
}
@keyframes combine-paste { from { transform: scale(1.12) rotate(2deg); opacity: 0; } }
html.combine .results .card h1 {
  display: table; margin: 0 0 6px; padding: 5px 16px 3px; text-align: left;
  font-size: 25px; line-height: 1.05; letter-spacing: .07em; text-transform: uppercase;
  color: var(--paper-hi); background: var(--ink); box-shadow: 6px 0 0 var(--red);
}
html.combine .results .card::before {
  content: 'Accepted'; position: absolute; top: 18px; right: 14px; padding: 2px 7px 0;
  font-family: var(--display); font-size: 16px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.1;
  color: var(--red); border: 3px double var(--red); transform: rotate(-9deg);
  animation: combine-slam .3s .45s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes combine-slam { from { transform: rotate(-20deg) scale(2.4); opacity: 0; } to { transform: rotate(-9deg) scale(1); opacity: 1; } }
html.combine .results .card::after {
  content: 'Combine N\00ba  7 \00b7  bunker tally'; display: block; position: absolute; left: 18px; top: 54px;
  font-family: var(--sans); font-weight: 700; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
html.combine .results .card ul { margin: 22px 0 12px; border-top: 2.5px solid var(--ink); }
html.combine .card li { gap: 10px; padding: 5px 2px; border-bottom: 1px solid rgba(27, 24, 20, .28); font-size: 16px; }
html.combine .results .card li:last-child { border-bottom: 2.5px solid var(--ink); }
html.combine .card li img { width: 32px; height: 32px; }
html.combine .card li .name { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 14px; }
html.combine .card li .gain { font-size: 16px; line-height: 1; padding: 4px 7px 3px; transform: rotate(-5deg); }
html.combine .card li:nth-child(even) .gain { transform: rotate(4deg); }
html.combine .card li .qty { font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .03em; min-width: 42px; }
html.combine #results-extra { color: var(--muted); font-size: 13px; }
html.combine .results .card button { font-size: 21px; padding: 12px 14px 10px; }
@media (max-height: 700px) {
  html.combine .results .card { padding: 14px 16px 16px; }
  html.combine .results .card h1 { font-size: 23px; }
  html.combine .results .card::after { top: 48px; }
  html.combine .results .card ul { margin-top: 18px; }
  html.combine .card li { padding: 3px 2px; }
  html.combine .card li img { width: 28px; height: 28px; }
}

/* ---- Combine: mini games ---- */
/* The furnace's control board and the rolling mill (combine-games.js draws
   their canvases), each a sheet of the plan: paper, an ink frame, the title on
   an ink band with a red rule under it, the readouts ruled boxes, and the
   result stamped. */
html.combine .mg-card { max-width: 392px; padding: 0 14px 16px; border-width: 3px; box-shadow: 0 7px 0 var(--ink); }
html.combine .mg-card h2 {
  margin: 0 -14px 12px; padding: 9px 14px 6px; text-align: left;
  font-size: 19px; line-height: 1.1; letter-spacing: .07em; text-transform: uppercase;
  color: var(--paper-hi); background: var(--ink); border-bottom: 4px solid var(--red);
}
html.combine .mg-help { margin: 0 0 10px; font-size: 13px; line-height: 1.35; text-align: left; color: var(--soot); }
html.combine .gauge, html.combine .furnace-mouth { display: none; }
html.combine .mg-scene { display: flex; justify-content: center; margin: 0 0 12px; }
html.combine .mg-scene canvas { display: block; max-width: 100%; height: auto !important; border: 3px solid var(--ink); background: var(--paper); box-shadow: var(--drop); }
html.combine .heat-wrap { justify-content: center; margin-bottom: 12px; }
html.combine .heat-side { flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: center; }
html.combine .mg-stat { padding: 3px 10px 3px; box-shadow: 0 3px 0 var(--ink); }
html.combine .mg-stat span { font-family: var(--sans); font-weight: 700; font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
html.combine .mg-stat b { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.1; letter-spacing: .03em; color: var(--ink); }
html.combine .mg-stat.paused b { color: var(--red); }
html.combine .mg-coal img { width: 32px; height: 32px; }
html.combine .mg-bar { height: 14px; margin: 0 0 12px; border: 2.5px solid var(--ink); border-radius: 0; background: var(--paper-hi); }
html.combine .mg-bar i { background: repeating-linear-gradient(-45deg, var(--red) 0 7px, var(--red-deep) 7px 10px); }
html.combine .mg-status { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .06em; text-transform: uppercase; color: var(--soot); }
html.combine .mg-status.good { color: var(--good); }
html.combine .mg-status.hot { color: var(--danger); }
html.combine .mg-status.bad { color: var(--red); }
html.combine .gain-ring { --fill: var(--red); --track: rgba(27, 24, 20, .14); box-shadow: 0 0 0 2px var(--ink); }
html.combine .gain-ring::before { background: var(--paper-hi); box-shadow: 0 0 0 2px var(--ink); }
html.combine .gain-ring.max { --fill: var(--good); box-shadow: 0 0 0 2px var(--ink); }
html.combine .mg-gain .gain-ring.rush { --fill: #f0b419; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--red), 0 0 0 6px var(--ink); }
html.combine .mg-gain .gain-ring { width: 38px; height: 38px; }
/* The mill: the whole screen a sheet of the plan, the bed framed on it. */
html.combine .mg-card.mill-screen {
  max-width: none; border: 0; box-shadow: none; background: var(--paper-bg);
  padding: calc(env(safe-area-inset-top) + 8px) 6px calc(env(safe-area-inset-bottom) + 12px);
}
html.combine #mg-mill { border: 4px solid var(--ink); border-radius: 0; background: var(--paper); box-shadow: 0 6px 0 rgba(27, 24, 20, .45); }
html.combine .mill-screen .mg-btn { padding: 15px; font-size: 26px; letter-spacing: .12em; }
/* The result: a sheet laid over, its verdict rubber-stamped across it. */
html.combine .mg-result, html.combine .mill-screen .mg-result {
  z-index: 2; border-radius: 0; color: var(--text); background: var(--paper-card);
  animation: combine-paste .3s cubic-bezier(.25, 1.5, .45, 1) both;
}
html.combine .mg-result h3 {
  padding: 4px 14px 2px; font-size: 32px; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase;
  color: var(--red); border: 4px double var(--red); transform: rotate(-5deg);
  animation: combine-slam-h .34s .1s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes combine-slam-h { from { transform: rotate(-16deg) scale(2.3); opacity: 0; } to { transform: rotate(-5deg) scale(1); opacity: 1; } }
html.combine .mg-result:has(.fx-side.bad) h3 { color: var(--soot); border-color: var(--soot); transform: rotate(4deg); }
html.combine .fx { gap: 12px; }
html.combine .fx-item { padding: 4px 11px 4px 5px; box-shadow: 0 3px 0 var(--ink); }
html.combine .fx-item b { font-size: 23px; color: var(--ink); }
html.combine .fx-side.out .fx-item { border: 3px solid var(--red); box-shadow: 0 5px 0 var(--ink); }
html.combine .fx-side.out .fx-item b { font-size: 31px; color: var(--red); }
html.combine .fx-side.out.bad .fx-item { border-color: var(--ink); background: var(--panel-2); }
html.combine .fx-side.out.bad .fx-item b { color: var(--ink); }
html.combine .fx-badge span { color: var(--ink); }
html.combine .mg-result .mg-btn { max-width: 300px; }

/* ---- Combine: the manual ---- */
/* The combine's handbook: paper pages, the masthead an ink band with a red
   rule, the tabs ruled boxes (the open one red), sections headed with a red
   bar, and every entry a ruled box. */
html.combine .mpanel { background: var(--paper-bg); color: var(--text); }
@media (min-width: 580px) { html.combine .mpanel { border-left: 3px solid var(--ink); border-right: 3px solid var(--ink); } }
html.combine .mhead {
  flex: none; margin: 0 -10px; padding: 6px 10px 6px 14px;
  background: var(--ink); border-bottom: 4px solid var(--red);
}
html.combine .mhead h2 { display: flex; align-items: center; gap: 10px; font-size: 25px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-hi); }
html.combine .mhead h2 .ico {
  width: 36px; height: 36px; padding: 4px; border-radius: 50%; flex: none; vertical-align: 0;
  background: radial-gradient(circle, var(--paper-hi) 0 60%, var(--red) 61%);
}
html.combine .mclose {
  width: 44px; height: 44px; flex: none; border-radius: 0; font-size: 20px; font-weight: 700;
  color: var(--paper-hi); background: var(--red); border: 2.5px solid var(--paper-hi); box-shadow: none;
}
html.combine .mclose:active { transform: translateY(2px); }
html.combine .mtabs { gap: 6px; padding: 12px 0 9px; }
html.combine .mtabs button {
  flex: 1 0 auto; padding: 8px 7px 6px; box-shadow: 0 3px 0 var(--ink);
  font: 400 13px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}
@media (min-width: 420px) { html.combine .mtabs button { font-size: 14.5px; padding-left: 9px; padding-right: 9px; } }
html.combine .mtabs button.on { color: var(--paper-hi); background: var(--red); transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
html.combine .msearch { padding: 11px 12px; font: 500 16px var(--sans); box-shadow: inset 0 2px 0 rgba(27, 24, 20, .12); }
html.combine .msearch::placeholder { color: var(--muted); }
html.combine .msearch:focus { outline: 3px solid var(--red); outline-offset: 1px; }
html.combine .mbody { color: var(--text); padding-top: 4px; }
html.combine .mbody p, html.combine .mbody li { font-size: 15px; line-height: 1.5; }
html.combine .mbody b { font-weight: 700; }
html.combine .mguide h3, html.combine .mgroup {
  margin: 22px 0 10px; padding: 3px 0 2px 10px; font-size: 20px; line-height: 1.15; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); border-left: 10px solid var(--red); border-bottom: 2.5px solid var(--ink);
}
html.combine .mguide h3:first-child, html.combine .mbody > .mgroup:first-child { margin-top: 6px; }
html.combine .mguide ul { list-style: none; padding-left: 20px; }
html.combine .mguide ul > li { position: relative; }
html.combine .mguide ul > li::before { content: ''; position: absolute; left: -16px; top: .55em; width: 8px; height: 8px; background: var(--red); }
html.combine .mguide ol { padding-left: 24px; }
html.combine .mguide ol > li::marker { font-family: var(--display); color: var(--red); }
html.combine .mentry { padding: 10px 12px 12px; margin-bottom: 12px; box-shadow: 0 3px 0 var(--ink); }
html.combine .mentry header .ico.big { width: 46px; height: 46px; }
html.combine .mentry h4 { font: 400 20px/1.1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--ink); }
html.combine .mentry header small {
  display: inline-block; margin-top: 3px; padding: 1px 6px; font-weight: 700; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--paper-hi); background: var(--ink);
}
html.combine .mentry.flash { animation: combine-flash 1.4s ease; }
@keyframes combine-flash { 0%, 40% { border-color: var(--red); box-shadow: 0 3px 0 var(--ink), 0 0 0 4px var(--red); } }
html.combine .mlabel { font-family: var(--sans); font-weight: 700; letter-spacing: .1em; color: var(--red); }
html.combine .mlink {
  gap: 4px; margin: 2px 4px 2px 0; padding: 1px 8px 1px 3px; border-radius: 0; vertical-align: middle;
  font-weight: 700; color: var(--ink); background: var(--paper-hi); border: 1.5px solid var(--ink);
}
html.combine .mlink b { font-family: var(--display); font-weight: 400; color: var(--red); letter-spacing: .03em; }
html.combine .mlink:active { background: #f3d9c4; }
html.combine .mtier { border-top: 1.5px dashed rgba(27, 24, 20, .35); }
html.combine .mtable { border-collapse: collapse; border: 2px solid var(--ink); background: var(--paper-hi); }
html.combine .mtable th { font: 400 14px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--paper-hi); background: var(--ink); }
html.combine .mtable th, html.combine .mtable td { border-bottom: 1px solid rgba(27, 24, 20, .25); }
html.combine .mtable td { font-weight: 500; }
html.combine .mtable.recipes { table-layout: fixed; }
html.combine .mtable.recipes td:nth-child(1) { width: 50%; }
html.combine .mtable.recipes td:nth-child(2) { width: 18px; padding: 0; color: var(--red); font-weight: 700; text-align: center; }
html.combine .mtable.recipes td:nth-child(3) { text-align: right; }
html.combine .mtable.recipes .mlink { white-space: normal; max-width: 100%; text-align: left; }

/* ---- Combine: the Styles and Ideas pages, and the idea tab ---- */
/* Ruled boxes on the poster's paper; what's chosen is poster red with paper
   lettering; the tabs along the bottom sit on an ink band with a red rule. */
html.combine.doc, html.combine.doc body.ss { background: var(--paper-bg); background-color: var(--paper); color: var(--text); }
html.combine .ss h1 { font-size: 34px; letter-spacing: .05em; text-transform: uppercase; color: var(--red); }
html.combine .ss h2 { font-size: 26px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); border-bottom: 3px solid var(--ink); box-shadow: 0 3px 0 var(--red); padding-bottom: 2px; }
html.combine .ss-head h2 { flex: 1 1 auto; }
html.combine .ss h3, html.combine .ss h4 { letter-spacing: .04em; text-transform: uppercase; }
html.combine .ss-style, html.combine .ss-card, html.combine .idea-card {
  background: var(--paper-card); border: 2.5px solid var(--ink); border-radius: 0; box-shadow: var(--drop);
}
html.combine .ss-btn, html.combine .ss-chip, html.combine .ss-tab, html.combine .idea-actions button {
  border: 2.5px solid var(--ink); border-radius: 0; box-shadow: 0 3px 0 var(--ink);
  background: var(--paper-hi); color: var(--ink);
}
html.combine .ss-btn, html.combine .idea-actions button { font-family: var(--display); font-weight: 400; letter-spacing: .07em; text-transform: uppercase; font-size: 15.5px; }
html.combine .ss-btn:active, html.combine .ss-chip:active, html.combine .ss-tab:active, html.combine .idea-actions button:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
html.combine .ss-gold, html.combine .ss-chip[aria-pressed="true"], html.combine .ss-tab.on, html.combine .idea-actions .idea-save {
  background: var(--red); border-color: var(--ink); color: var(--paper-hi);
}
html.combine .ss-btn:disabled { box-shadow: none; }
html.combine .ss-swatch i { border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
html.combine .ss-here { border-radius: 0; font-family: var(--sans); color: var(--paper-hi); }
html.combine .ss-pick, html.combine .id-waiting { border-radius: 0; color: var(--paper-hi); }
html.combine .ss-switch span { border-radius: 0; background: var(--paper-hi); border-color: var(--ink); }
html.combine .ss-switch span::after { border-radius: 0; background: var(--ink); }
html.combine .ss-switch input:checked + span { background: var(--good); border-color: var(--ink); }
html.combine .ss-switch input:checked + span::after { background: var(--paper-hi); }
html.combine .ss textarea, html.combine .idea-card textarea { border: 2.5px solid var(--ink); border-radius: 0; background: var(--paper-hi); }
html.combine .ss-choice { border: 2px solid var(--ink); border-radius: 0; background: var(--paper-hi); }
html.combine .ss-choice:has(input:checked) { border-color: var(--red); box-shadow: inset 6px 0 0 var(--red); }
html.combine .ss #prompt { background: var(--paper-hi); border-top: 2px solid var(--ink); }
html.combine .ss-preview-head { border-bottom-color: var(--ink); }
html.combine .ss-nav { background: var(--ink); border-top: 4px solid var(--red); }
html.combine .ss-tab { font-size: 18px; letter-spacing: .07em; text-transform: uppercase; box-shadow: none; }
html.combine .ss-tab.on { border-color: var(--paper-hi); }
html.combine .idea-card h2 { color: var(--ink); letter-spacing: .06em; text-transform: uppercase; }
html.combine .idea-card textarea:focus { border-color: var(--red); }
html.combine .idea-sheet { background: rgba(27, 24, 20, .5); }
html.combine .idea-tab {
  background: var(--ink); border: 0; border-right: 5px solid var(--red); border-radius: 0;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .35); opacity: .92;
}
html.combine .idea-tab.right { border-right: 0; border-left: 5px solid var(--red); border-radius: 0; }
html.combine .idea-tab img { filter: drop-shadow(0 0 1px var(--paper-hi)); }

/* ---- Whiteout style (see style.js and the polar-* files) ------------------------------
   An ice-drilling station in a blizzard: frosted glass in soot-black rubber
   gaskets, grimy steel strips, embossed label tape, the station's orange for
   what matters, and rime grown in from the corners. */
@font-face {
  font-family: 'Overpass';
  src: url(fonts/overpass-600.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Overpass';
  src: url(fonts/overpass-800.woff2) format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Overpass Mono';
  src: url(fonts/overpass-mono-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
/* Whiteout mini games (the furnace panel and the press): see polar-games.js. */
html.polar {
  --rime-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg stroke='%23fff' stroke-linecap='round' fill='none'%3E%3Cpath d='M0 0L58 22M14 5L20 -4M14 5L12 16M28 11L36 2M28 11L26 24M42 16L48 8M42 16L42 26M0 0L30 52M8 14L-1 18M8 14L18 12M15 26L5 31M15 26L26 22M22 38L14 44M22 38L31 33M0 0L10 70M3 20L-3 26M3 20L11 24M6 40L0 46M6 40L13 42' stroke-width='1.3' opacity='.9'/%3E%3Cpath d='M0 0L76 8M0 0L52 40M0 0L22 64M0 0L4 84' stroke-width='.7' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --rime-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cg transform='translate(90 0) scale(-1 1)' stroke='%23fff' stroke-linecap='round' fill='none'%3E%3Cpath d='M0 0L58 22M14 5L20 -4M14 5L12 16M28 11L36 2M28 11L26 24M42 16L48 8M42 16L42 26M0 0L30 52M8 14L-1 18M8 14L18 12M15 26L5 31M15 26L26 22M22 38L14 44M22 38L31 33M0 0L10 70M3 20L-3 26M3 20L11 24M6 40L0 46M6 40L13 42' stroke-width='1.3' opacity='.9'/%3E%3Cpath d='M0 0L76 8M0 0L52 40M0 0L22 64M0 0L4 84' stroke-width='.7' opacity='.55'/%3E%3C/g%3E%3C/svg%3E");
  --icicles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='9'%3E%3Cpath d='M0 0H72V2.5H66L64 7L62 2.5H52L50.5 5.5L49 2.5H38L36 8.5L34 2.5H24L22.5 5L21 2.5H11L9 7.5L7 2.5H0Z' fill='%23eef3f6'/%3E%3C/svg%3E");
  --gasket: #16191d;
  --rubber: linear-gradient(#f58a4c, #dc5c1e 55%, #b44412);
  --frost-glass: linear-gradient(#f3f7f9, #e4ecf0 55%, #d5e0e6);
  --steel-strip: radial-gradient(circle at 12px 22px, #c9d0d6 0 2px, #3a4249 2.4px, transparent 3px), radial-gradient(circle at calc(100% - 12px) 22px, #c9d0d6 0 2px, #3a4249 2.4px, transparent 3px), linear-gradient(#5a636b, #3a4249 60%, #2a3036);
}
html.polar .overlay { background: rgba(9, 14, 19, .86); }
/* A pane of frosted glass in a thick rubber gasket, a grimy steel strip
   across its head with the title taped on, rime in the glass's corners. */
html.polar .mg-card {
  background: var(--rime-l) 0 44px / 90px 90px no-repeat, var(--rime-r) 100% 44px / 90px 90px no-repeat, var(--frost-glass);
  border: 6px solid var(--gasket); border-radius: 20px; padding: 56px 14px 14px; color: var(--text);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
html.polar .mg-card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 44px;
  background: var(--steel-strip); border-radius: 14px 14px 0 0; border-bottom: 3px solid #d4561e;
}
html.polar .mg-card h2 {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%) rotate(-1deg); z-index: 1;
  max-width: calc(100% - 36px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin: 0; padding: 4px 14px 3px; background: #1c1f22; color: #f4f6f4;
  font-family: var(--mono); font-weight: 700; font-size: min(16px, 3.9vw); letter-spacing: .1em; text-transform: uppercase;
  text-shadow: 0 1.5px 0 #000; box-shadow: 1px 2px 0 rgba(0, 0, 0, .45);
  clip-path: polygon(0 0, 100% 0, calc(100% - 4px) 50%, 100% 100%, 0 100%, 3px 50%);
}
html.polar .mg-help { color: #4a5660; font-size: 13px; line-height: 1.35; margin-bottom: 10px; }
html.polar .gauge, html.polar .furnace-mouth { display: none; }
html.polar .mg-scene { display: flex; justify-content: center; margin: 0 0 10px; }
html.polar .mg-scene canvas { max-width: 100%; height: auto !important; border-radius: 12px; box-shadow: 0 0 0 3px var(--gasket), 0 4px 0 3px rgba(0, 0, 0, .35); background: #262c31; }
html.polar .heat-wrap { justify-content: center; margin-bottom: 10px; }
html.polar .heat-side { flex-direction: row; flex-wrap: wrap; gap: 6px; justify-content: center; }
html.polar .mg-stat {
  background: linear-gradient(#fbfdfe, #e2eaef); border: 2.5px solid var(--gasket); border-radius: 10px;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .25), inset 0 1px 0 #fff; padding: 4px 10px;
}
html.polar .mg-stat span { font-family: var(--mono); font-weight: 700; letter-spacing: .1em; font-size: 10px; color: var(--muted); }
html.polar .mg-stat b { font-family: var(--mono); font-weight: 700; font-size: 20px; color: var(--text); }
html.polar .mg-stat.paused b { color: var(--danger); }
html.polar .mg-coal img { width: 34px; height: 34px; }
html.polar .mg-bar { height: 14px; background: #262c31; border: 3px solid var(--gasket); border-radius: 999px; box-shadow: inset 0 2px 3px rgba(0, 0, 0, .5); }
html.polar .mg-bar i {
  border-radius: 999px;
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .14) 0 6px, transparent 6px 12px), linear-gradient(#f58a4c, #dc5c1e 60%, #b44412);
  box-shadow: 0 0 10px rgba(255, 120, 40, .55);
}
html.polar .mg-status { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: .01em; color: var(--muted); }
html.polar .mg-status.good { color: var(--good); }
html.polar .mg-status.hot { color: #c84c16; }
html.polar .mg-status.bad { color: var(--danger); }
/* Glove-sized buttons: a rubber cap in a black gasket, rime crusted on top. */
html.polar .mg-btn {
  font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: .01em; color: #1a0d05;
  background: var(--icicles) 16px 0 / 72px 9px no-repeat, var(--rubber);
  border: 4px solid var(--gasket); border-radius: 16px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), inset 0 -4px 0 rgba(0, 0, 0, .2), 0 5px 0 #0b0d10;
}
html.polar .mg-btn:active, html.polar .mg-btn.held {
  transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .2), inset 0 -2px 0 rgba(0, 0, 0, .2), 0 2px 0 #0b0d10;
}
html.polar .mg-btn.held { filter: brightness(1.08) saturate(1.1); }
html.polar .mg-btn:disabled { opacity: .55; }
html.polar .mg-btn.empty { filter: grayscale(1) brightness(.85); }
html.polar .gain-ring { --fill: var(--accent); --track: rgba(16, 20, 24, .14); }
html.polar .gain-ring::before { background: #eef3f6; }
html.polar .mg-gain .gain-ring.rush { --fill: #ff8a3c; box-shadow: 0 0 0 2px var(--gasket), 0 0 14px 3px rgba(255, 130, 50, .75); }
html.polar .gain-ring.max { box-shadow: 0 0 14px rgba(35, 147, 90, .6); }
/* The mill: the whole screen is the gallery's grimy steel, the bed set in a gasket. */
html.polar #mg-mill { border: 5px solid var(--gasket); border-radius: 12px; background: #1a1e22; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 0 rgba(0, 0, 0, .4); }
html.polar .mg-card.mill-screen {
  border: 0; border-radius: 0; box-shadow: none;
  background:
    radial-gradient(circle at 14px 14px, #8a949c 0 2px, #262c31 2.6px, transparent 3.2px) 0 0 / 64px 64px,
    radial-gradient(ellipse at 50% 0%, rgba(255, 140, 60, .12), transparent 60%),
    linear-gradient(#3a4249, #23292f 55%, #16191d);
}
html.polar .mg-card.mill-screen::before { display: none; }
html.polar .mill-screen .mg-btn { padding: 18px; font-size: 22px; }
/* How it went: frosted glass, the verdict on tape. */
html.polar .mg-result { background: var(--rime-l) 0 0 / 90px 90px no-repeat, var(--rime-r) 100% 0 / 90px 90px no-repeat, rgba(234, 241, 245, .97); border-radius: 14px; color: var(--text); }
html.polar .mill-screen .mg-result { border-radius: 0; background: var(--rime-l) 0 0 / 120px 120px no-repeat, var(--rime-r) 100% 0 / 120px 120px no-repeat, rgba(234, 241, 245, .97); }
html.polar .mg-result h3 {
  display: inline-block; margin: 0; padding: 5px 16px 4px; transform: rotate(-1.5deg);
  background: #1c1f22; color: #f4f6f4; font-family: var(--mono); font-weight: 700; font-size: 24px; letter-spacing: .08em; text-transform: uppercase;
  text-shadow: 0 2px 0 #000; box-shadow: 2px 3px 0 rgba(0, 0, 0, .35);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%, 4px 50%);
}
html.polar .mg-result p { color: var(--muted); }
html.polar .fx-item { background: linear-gradient(#fbfdfe, #e2eaef); border: 2.5px solid var(--gasket); border-radius: 10px; box-shadow: 0 3px 0 rgba(0, 0, 0, .2); }
html.polar .fx-item b { font-family: var(--mono); font-weight: 700; color: var(--text); }
html.polar .fx-side.out .fx-item { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(220, 92, 30, .22), 0 0 18px rgba(255, 140, 60, .35); }
html.polar .fx-side.out .fx-item b { color: var(--accent); }
html.polar .fx-side.out.bad .fx-item { border-color: var(--danger); box-shadow: none; }
html.polar .fx-side.out.bad .fx-item b { color: var(--text); }
html.polar .fx-badge span { font-family: var(--display); font-weight: 800; color: #1a0d05; }

/* (end of the Whiteout mini games) */

html.polar {
  --display: 'Overpass', system-ui, sans-serif;
  --sans: 'Overpass', system-ui, sans-serif;
  --mono: 'Overpass Mono', ui-monospace, monospace;
  --bg: #23292f;
  --panel: #e9f0f4;
  --panel-2: #d8e2e8;
  --panel-edge: #16191d;
  --text: #141a1f;
  --muted: #56636e;
  --accent: #c84c16;
  --danger: #c8322a;
  --good: #23935a;
  --ink: #101418;
  --snow: #eef3f6;
  --steel: #3a4249;
  --tape: #1c1f22;
}
html.polar body { font-family: var(--sans); font-weight: 600; background: var(--bg); }

/* Whiteout: the dive, results, the manual, toasts, the idea tab, and the Styles
   and Ideas pages. */
html.polar {
  /* Grimy steel: a plate lit from above, with soot and oil worked into it. */
  --grime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .05' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1  0 0 0 0 .09  0 0 0 0 .07  0 0 0 1.6 -.75'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --plate: var(--grime), linear-gradient(#59626b, #3c444b 55%, #2b3137);
  /* Frosted glass: pale and a little blue, brighter at the top. */
  --glass: linear-gradient(#f7fafb, #e8eff3 55%, #d9e3e9);
  /* Rime grown in from a corner: feathery white fronds. */
  --rime: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M0 0L40 14M14 5L18 -2M24 8L30 2M30 10L32 18M0 0L30 34M10 11L18 8M18 20L26 18M18 20L16 28M0 0L10 44M4 16L12 14M6 28L14 30M8 36L2 40' stroke-width='1.6' opacity='.95'/%3E%3C/svg%3E");
  --gasket-ring: 0 0 0 3px #16191d; /* the gasket as a ring round a panel (--gasket is its colour) */
  --rubber: linear-gradient(#f58a4c, #dc5c1e 55%, #b44412);
  --rubber-steel: linear-gradient(#f4f7f9, #dbe3e8 55%, #bcc8d0);
  /* A strip of tape's notched end, cut with scissors. */
  --tape-cut: polygon(0 0, 100% 0, calc(100% - 5px) 50%, 100% 100%, 0 100%, 4px 50%);
}
/* The dive and the hub's page behind: dark grimy steel. */
html.polar body { background: var(--grime), radial-gradient(ellipse at 50% 0%, #3a434b, #23292f 55%, #171b1f); background-color: var(--bg); }
html.polar button { font-family: var(--sans); font-weight: 800; }
html.polar .card h1, html.polar .card button, html.polar .mhead h2, html.polar .mgroup, html.polar .mguide h3, html.polar #turns, html.polar .toast {
  font-family: var(--display); font-weight: 800; letter-spacing: .02em;
}

/* The HUD: the turns on a steel plate with a taped label, the haul on a pane
   of frosted glass, the manual a glove knob. */
html.polar #dive .hud { gap: 8px; }
html.polar .turns {
  min-width: 70px; padding: 3px 8px 5px; gap: 2px;
  background: var(--plate); border: 0; border-radius: 10px; box-shadow: var(--gasket-ring), inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 0 3px #0b0d10;
}
html.polar .turns .label {
  padding: 1px 7px 0; font: 700 10px/1.5 var(--mono); letter-spacing: .14em; color: #f4f6f4; background: var(--tape);
  text-shadow: 1px 1px 0 #000; clip-path: var(--tape-cut);
}
html.polar #turns { font-size: 31px; line-height: 1.05; color: #fff; text-shadow: 0 2px 0 #0b0d10; font-variant-numeric: tabular-nums; }
html.polar .turns.low #turns { color: #ff8a5a; text-shadow: 0 0 10px rgba(255, 90, 40, .8), 0 2px 0 #0b0d10; animation: blink .9s steps(2, start) infinite; }
html.polar .tally {
  background: var(--rime) left top / 46px 46px no-repeat, var(--glass); border: 0; border-radius: 10px;
  box-shadow: var(--gasket-ring), inset 0 2px 0 rgba(255, 255, 255, .9), 0 4px 0 3px #0b0d10;
}
html.polar .tally-item { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
html.polar .tally-item .gain, html.polar .card li .gain, html.polar .tool-btn .tcount {
  font: 700 10.5px/15px var(--mono); letter-spacing: .04em; color: #fff; background: #c84c16;
  border-radius: 2px; padding: 0 6px 0 5px; text-shadow: 1px 1px 0 rgba(0, 0, 0, .6); clip-path: var(--tape-cut);
}
html.polar .manual-btn, html.polar .mclose {
  width: 44px; height: 44px; border-radius: 50%; border: 0; color: var(--text);
  background: radial-gradient(circle at 45% 40%, #fff 0, #e2e9ee 40%, #b8c5ce 63%, transparent 64%),
    repeating-conic-gradient(#1a1d21 0 7deg, #3a4148 7deg 15deg);
  box-shadow: 0 0 0 1.5px #0b0d10, 0 3px 0 #050607;
}
html.polar .manual-btn.small { width: 46px; height: 46px; align-self: center; }
html.polar .manual-btn .ico { width: 22px; height: 22px; }
html.polar .manual-btn:active, html.polar .mclose:active { transform: translateY(2px); box-shadow: 0 0 0 1.5px #0b0d10, 0 1px 0 #050607; }
html.polar #chain-info { color: #dfe7ec; font-weight: 800; letter-spacing: .03em; text-shadow: 0 1px 0 #000; }
html.polar #chain-info.ok { color: #ff9a5a; }
html.polar #chain-info.notes { font-weight: 600; font-size: 12.5px; color: #c9d4db; }
/* The board: the borehole camera's view of the wall, through a grimy steel
   frame bolted round it with a gasket inside. Its border is outside the
   drawing area (content-box), which dive.js allows for. */
html.polar #board {
  box-sizing: content-box; border: 9px solid transparent; border-radius: 14px;
  background: linear-gradient(#2c4f6a, #2c4f6a) padding-box, var(--plate) border-box;
  box-shadow: 0 0 0 2px #0b0d10, inset 0 0 0 2px #0b0d10, 0 0 0 4px #4a525a, 0 0 0 6px #0b0d10, 0 14px 30px rgba(0, 0, 0, .55);
}
html.polar .board-wrap { padding: 10px 0; }
html.polar .tool-btn {
  color: var(--text); background: var(--rubber-steel); border: 0; border-radius: 12px;
  box-shadow: var(--gasket-ring), inset 0 2px 0 rgba(255, 255, 255, .7), 0 4px 0 3px #0b0d10;
}
html.polar .tool-btn .tname { font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
html.polar .tool-btn.aiming { background: var(--rubber); color: #1a0d05; box-shadow: var(--gasket-ring), 0 0 18px 4px rgba(255, 110, 40, .55), 0 4px 0 3px #0b0d10; }

/* The results: the drill log, a pane of frosted glass in its gasket with a
   steel strip across the top and the title taped on it. */
html.polar .results { background: rgba(8, 14, 20, .8); }
html.polar .card {
  position: relative; padding: 62px 18px 18px; color: var(--text);
  background: var(--rime) left 52px / 54px 54px no-repeat, var(--glass);
  border: 0; border-radius: 18px; box-shadow: 0 0 0 5px #16191d, 0 12px 40px rgba(0, 0, 0, .6);
}
html.polar .card::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 50px; border-radius: 16px 16px 0 0;
  background: radial-gradient(circle at 14px 50%, #9aa4ad 0 2.6px, #16191d 2.8px 3.4px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 14px) 50%, #9aa4ad 0 2.6px, #16191d 2.8px 3.4px, transparent 3.6px), var(--plate);
  border-bottom: 3px solid #16191d;
}
html.polar .card h1 {
  position: absolute; left: 50%; top: 9px; transform: translateX(-50%) rotate(-1.2deg); margin: 0; white-space: nowrap;
  padding: 3px 18px 1px 14px; font: 700 21px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase;
  color: #f4f6f4; background: var(--tape); text-shadow: 1.5px 1.5px 0 #000; clip-path: var(--tape-cut);
}
html.polar .card li { border-bottom: 1.5px dashed rgba(20, 26, 31, .22); font-weight: 600; }
html.polar .card li .name { font-weight: 800; }
html.polar .card li .qty { font-family: var(--mono); font-weight: 700; }
html.polar #results-extra { color: var(--muted); }
/* The big buttons: orange rubber caps in a black gasket, rime on the gasket. */
html.polar .card button {
  position: relative; min-height: 50px; font-size: 18px; text-transform: uppercase; letter-spacing: .04em; color: #1a0d05;
  background: linear-gradient(90deg, transparent 18px, rgba(255, 255, 255, .95) 18px 66px, transparent 66px) 0 0 / 100% 3px no-repeat, var(--rubber);
  border: 3px solid #16191d; border-radius: 14px;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, .3), inset 0 -3px 0 rgba(90, 30, 0, .3), 0 5px 0 #0b0d10;
}
html.polar .card button:active { transform: translateY(3px); box-shadow: inset 0 3px 0 rgba(255, 255, 255, .25), 0 2px 0 #0b0d10; }
html.polar .overlay { background: rgba(8, 14, 20, .88); }
html.polar .stage-error { color: #c9d4db; }
/* Toasts: a strip of embossed label tape. */
html.polar .toast {
  font: 700 14px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: #f4f6f4; background: var(--tape); border: 0; border-radius: 0; padding: 9px 22px 8px;
  text-shadow: 1.5px 1.5px 0 #000; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 7px 50%);
  box-shadow: none;
}

/* The manual: the station's logbook. Frosted pages, the masthead a steel strip
   with the title taped on, tabs as rubber keys, entries as panes in gaskets,
   and sections headed on tape. */
html.polar .mpanel { background: var(--rime) right 72px / 60px 60px no-repeat, var(--glass); color: var(--text); }
@media (min-width: 580px) { html.polar .mpanel { box-shadow: 0 0 0 4px #16191d; } }
html.polar .mhead { flex: none; margin: -10px -10px 0; padding: 8px 12px; background: var(--plate); border-bottom: 3px solid #16191d; }
html.polar .mhead h2 {
  display: flex; align-items: center; gap: 8px; padding: 3px 14px 2px 6px; font: 700 18px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #f4f6f4; background: var(--tape); text-shadow: 1.5px 1.5px 0 #000; clip-path: var(--tape-cut); transform: rotate(-.8deg);
}
html.polar .mhead h2 .ico { width: 26px; height: 26px; vertical-align: 0; }
html.polar .mclose { font-size: 18px; font-weight: 800; flex: none; }
html.polar .mtabs { gap: 6px; padding: 12px 2px 9px; }
html.polar .mtabs button {
  padding: 8px 11px 6px; font: 800 13px/1.1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--text);
  background: var(--rubber-steel); border: 2px solid #16191d; border-radius: 10px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 #0b0d10;
}
html.polar .mtabs button.on { color: #1a0d05; background: var(--rubber); transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 1px 0 #0b0d10; }
html.polar .msearch { font: 600 16px var(--sans); background: #fbfdfe; border: 2px solid #16191d; border-radius: 10px; box-shadow: inset 0 2px 3px rgba(20, 26, 31, .15); }
html.polar .msearch:focus { outline: 3px solid var(--accent); outline-offset: 1px; }
html.polar .mbody { color: var(--text); }
html.polar .mbody p, html.polar .mbody li { font-weight: 600; }
html.polar .mbody b { font-weight: 800; }
html.polar .mguide h3, html.polar .mgroup {
  display: table; margin: 22px 0 10px; padding: 3px 16px 1px 9px; font: 700 15px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #f4f6f4; background: var(--tape); text-shadow: 1.5px 1.5px 0 #000; clip-path: var(--tape-cut);
}
html.polar .mguide h3:first-child, html.polar .mbody > .mgroup:first-child { margin-top: 6px; }
html.polar .mguide ol { padding-left: 28px; }
html.polar .mguide ol > li::marker { font-family: var(--mono); font-weight: 700; color: var(--accent); }
html.polar .mguide ul > li::marker { color: var(--accent); }
html.polar .mentry {
  background: #f8fbfc; border: 0; border-radius: 12px; padding: 10px 12px 12px; margin-bottom: 12px;
  box-shadow: 0 0 0 2.5px #16191d, 0 3px 0 2.5px rgba(11, 13, 16, .35);
}
html.polar .mentry h4 { font-weight: 800; font-size: 17.5px; }
html.polar .mentry header small { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
html.polar .mentry.flash { animation: polar-flash 1.4s ease; }
@keyframes polar-flash { 0%, 40% { box-shadow: 0 0 0 2.5px #16191d, 0 0 0 6px var(--accent); } }
html.polar .mlabel { font-family: var(--mono); font-weight: 700; letter-spacing: .08em; color: var(--muted); }
html.polar .mlink { font-weight: 700; background: #e1e9ee; border: 1.5px solid #8c9ca8; border-radius: 6px; color: var(--text); }
html.polar .mlink:active { background: #ffd9c2; }
html.polar .mtier { border-top: 1.5px dashed rgba(20, 26, 31, .25); }
html.polar .mtable th { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #f4f6f4; background: #2b3137; }
html.polar .mtable th, html.polar .mtable td { border-bottom: 1px solid rgba(20, 26, 31, .15); }

/* The Styles and Ideas pages: frosted glass, so the dark lettering reads, with
   rime in the corners; panes in gaskets, rubber buttons, and the tabs along
   the bottom on a strip of grimy steel. */
html.polar.doc, html.polar.doc body.ss {
  background: var(--rime) left top / 90px 90px no-repeat, linear-gradient(#eef3f6, #dbe4ea) fixed;
  background-color: #e4ebf0; color: var(--text);
}
html.polar .ss h1, html.polar .ss h2, html.polar .ss h3, html.polar .ss h4 { font-weight: 800; }
html.polar .ss h1 {
  display: inline-block; padding: 4px 18px 2px 12px; font: 700 22px/1.35 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: #f4f6f4; background: var(--tape); text-shadow: 1.5px 1.5px 0 #000; clip-path: var(--tape-cut); transform: rotate(-1deg);
}
html.polar .ss h2 { color: var(--text); border-bottom: 3px solid #16191d; box-shadow: 0 3px 0 var(--accent); padding-bottom: 3px; }
html.polar .ss-head h2 { flex: 1 1 auto; }
html.polar .ss-style, html.polar .ss-card, html.polar .idea-card {
  background: #f8fbfc; border: 0; border-radius: 12px; box-shadow: 0 0 0 2.5px #16191d, 0 4px 0 2.5px rgba(11, 13, 16, .3);
}
html.polar .ss-btn, html.polar .ss-chip, html.polar .ss-tab, html.polar .idea-actions button {
  font-family: var(--sans); font-weight: 800; color: var(--text); background: var(--rubber-steel);
  border: 2.5px solid #16191d; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .7), 0 3px 0 #0b0d10;
}
html.polar .ss-btn:active, html.polar .ss-chip:active, html.polar .ss-tab:active, html.polar .idea-actions button:active { transform: translateY(2px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .5), 0 1px 0 #0b0d10; }
html.polar .ss-gold, html.polar .ss-chip[aria-pressed="true"], html.polar .idea-actions .idea-save {
  color: #1a0d05; background: var(--rubber); border-color: #16191d;
}
html.polar .ss-btn:disabled { box-shadow: none; }
html.polar .ss-here, html.polar .ss-pick, html.polar .id-waiting {
  font-family: var(--mono); font-weight: 700; letter-spacing: .1em; color: #f4f6f4; border-radius: 0; clip-path: var(--tape-cut); padding-right: 10px;
}
html.polar .ss-here { background: var(--good); }
html.polar .ss-pick, html.polar .id-waiting { background: var(--accent); }
html.polar .ss-swatch i { border-radius: 3px; box-shadow: inset 0 0 0 1.5px #16191d; }
html.polar .ss-switch span { background: #cfd9e0; border-color: #16191d; }
html.polar .ss-switch span::after { background: #fff; box-shadow: 0 0 0 1.5px #16191d; }
html.polar .ss-switch input:checked + span { background: #46c47c; border-color: #16191d; }
html.polar .ss-switch input:checked + span::after { background: #fff; }
html.polar .ss textarea, html.polar .idea-card textarea { background: #fbfdfe; border: 2px solid #16191d; }
html.polar .ss-choice { background: #fbfdfe; border: 2px solid #8c9ca8; }
html.polar .ss-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 5px 0 0 var(--accent); }
html.polar .ss #prompt { background: #eef3f6; border-top: 2px solid #16191d; }
html.polar .ss-preview-head { border-bottom-color: #16191d; font-family: var(--mono); }
html.polar .ss-nav { background: var(--plate); border-top: 3px solid #16191d; }
html.polar .ss-tab { font-size: 16px; text-transform: uppercase; letter-spacing: .04em; }
html.polar .ss-tab.on { color: #1a0d05; background: var(--rubber); }
html.polar .idea-card h2 { font-weight: 800; color: var(--text); }
html.polar .idea-card textarea:focus { border-color: var(--accent); }
html.polar .idea-sheet { background: rgba(8, 14, 20, .55); }
/* The idea tab: frosted glass in a gasket, a strip of orange paint on its edge. */
html.polar .idea-tab { background: var(--glass); border: 2.5px solid #16191d; border-left: 0; border-right: 5px solid var(--accent); opacity: .94; }
html.polar .idea-tab.right { border-right: 0; border-left: 5px solid var(--accent); }
/* ---- Deco Tower style (see style.js and the deco-* files) ------------------------------
   The mining company's Art Deco tower on a smoky dusk: soot-black lacquer and
   stone, gold leaf ruled round everything in a double line, corners cut in
   deco steps, ivory lettering, verdigris for all-clear and oxblood for trouble;
   Limelight for headings and numbers that matter, Oswald for reading. */
@font-face {
  font-family: 'Limelight';
  src: url(fonts/limelight.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url(fonts/oswald-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Oswald';
  src: url(fonts/oswald-600.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
}
html.deco {
  --display: 'Limelight', 'Oswald', Georgia, serif;
  --sans: 'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --bg: #0e0d0c;
  --panel: #1a1714;
  --panel-2: #24201c;
  --panel-edge: #c9a052;
  --text: #ece0c4;
  --muted: #a39684;
  --accent: #e8bf5c;
  --danger: #e6654c;
  --good: #6fd3a8;
  --gold: #d6a84a;
  --gold-hi: #f7dc8a;
  --gold-lo: #8c6526;
  --lacquer: #1a1714;
  --soot: #0e0d0c;
  --verdi: #3f8a74;
  --oxblood: #9c2f24;
}
html.deco body {
  font-family: var(--sans); font-weight: 500; color: var(--text);
  background: #0e0d0c;
}
html.deco button { font-family: var(--sans); font-weight: 600; }

/* -- Deco Tower: the dive (the HUD, the board's frame, the chain readout, the toolbar, results) -- */
/* The cage's control panel: the turns on a gold-ruled lacquer plate, the haul
   along a lacquer strip, the board framed in a double rule of gold like a
   picture in the lobby, and the haul's ledger under a fan of gold rays. Small
   frames carry a gold block in each corner, as a deco picture frame does. */
html.deco {
  --gilt: linear-gradient(#f7e3a0, #fff6d8 16%, #e8c470 38%, #c4943c 62%, #8c6526 86%, #b8873a);
  --block: linear-gradient(var(--gold), var(--gold));
  --corners:
    var(--block) 3px 3px / 5px 5px no-repeat, var(--block) calc(100% - 3px) 3px / 5px 5px no-repeat,
    var(--block) 3px calc(100% - 3px) / 5px 5px no-repeat, var(--block) calc(100% - 3px) calc(100% - 3px) / 5px 5px no-repeat;
  --lacquer-bg: linear-gradient(#25211d, #15120f);
  --ruled: inset 0 0 0 2px #0c0a08, inset 0 0 0 3px rgba(214, 168, 74, .4);
}
html.deco #dive {
  background:
    radial-gradient(ellipse at 50% -10%, rgba(255, 176, 96, .12), transparent 55%),
    radial-gradient(ellipse at 50% 115%, rgba(255, 140, 60, .10), transparent 55%),
    #0e0d0c;
}
html.deco .turns, html.deco .tally, html.deco .tool-btn {
  background: var(--corners), var(--lacquer-bg);
  border: 1.5px solid var(--gold); border-radius: 0;
  box-shadow: var(--ruled), 0 3px 0 rgba(0, 0, 0, .55);
}
html.deco .turns { min-width: 70px; }
html.deco .turns .label { font-family: var(--sans); font-weight: 600; font-size: 11px; letter-spacing: .18em; color: var(--gold); }
html.deco #turns {
  font-family: var(--display); font-weight: 400; font-size: 31px; color: var(--gold-hi);
  text-shadow: 0 2px 0 #0a0807, 0 0 14px rgba(255, 200, 110, .35);
}
html.deco .turns.low #turns { color: #ff7a5c; text-shadow: 0 2px 0 #0a0807, 0 0 14px rgba(255, 90, 60, .6); animation: blink .9s steps(2, start) infinite; }
html.deco .tally-item { font-family: var(--sans); font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; color: var(--text); }
html.deco .tally-item .gain, html.deco .card li .gain, html.deco .tool-btn .tcount {
  font-family: var(--sans); font-weight: 600; color: #06140f; background: linear-gradient(#8fe6c2, #4fb48e);
  border-radius: 0; box-shadow: 0 0 0 1px #0a0807;
}
html.deco #chain-info { font-family: var(--display); font-weight: 400; font-size: 15px; letter-spacing: .04em; color: var(--muted); }
html.deco #chain-info.ok { color: var(--gold-hi); text-shadow: 0 0 12px rgba(255, 200, 110, .4); }
html.deco #chain-info.notes { font-family: var(--sans); font-weight: 500; font-size: 13px; letter-spacing: .03em; color: #d8c6a0; }
html.deco #board {
  box-sizing: content-box; background: #17130f;
  border: 6px solid #c4943c; border-radius: 0;
  border-image: linear-gradient(135deg, #f7e3a0, #c4943c 30%, #6e4c18 52%, #e8c470 74%, #8c6526) 1;
  box-shadow: 0 0 0 2px #0a0807, 0 0 0 4px rgba(214, 168, 74, .55), 0 0 0 6px #0a0807, 0 10px 28px rgba(0, 0, 0, .7), 0 0 40px rgba(255, 170, 80, .1);
}
html.deco .tool-btn .tname { font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: .03em; color: var(--text); }
html.deco .tool-btn.aiming {
  border-color: var(--gold-hi); background: var(--corners), linear-gradient(#3a301f, #1c160f);
  box-shadow: var(--ruled), 0 0 14px rgba(255, 200, 110, .45);
}
html.deco .manual-btn {
  width: 46px; height: 46px; align-self: center; flex: none;
  border-radius: 50%; border: 2px solid #3a2608;
  background: radial-gradient(circle, #24201c 58%, transparent 60%), var(--gilt);
  box-shadow: 0 3px 0 #050403;
}
html.deco .results { background: rgba(8, 6, 5, .86); }
html.deco .card {
  position: relative; margin-top: 30px; padding: 24px 20px 20px;
  background: var(--corners), radial-gradient(ellipse at 50% 0%, rgba(255, 190, 110, .1), transparent 60%), linear-gradient(#211d19, #14110e);
  border: 2px solid var(--gold); border-radius: 0;
  box-shadow: inset 0 0 0 4px #0c0a08, inset 0 0 0 5px rgba(214, 168, 74, .5), 0 14px 40px rgba(0, 0, 0, .7);
}
/* A fan of gold rays rising from behind the card's top edge. */
html.deco .card::before {
  content: ''; position: absolute; left: 50%; top: -34px; width: 150px; height: 68px; transform: translateX(-50%);
  background: repeating-conic-gradient(from 270deg at 50% 100%, rgba(232, 191, 92, .75) 0deg 5deg, transparent 5deg 12deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 0, #000 70%, transparent 71%);
  mask-image: radial-gradient(ellipse at 50% 100%, #000 0, #000 70%, transparent 71%);
  pointer-events: none;
}
html.deco .card::after {
  content: ''; position: absolute; left: 50%; top: -12px; width: 40px; height: 22px; transform: translateX(-50%);
  border-radius: 40px 40px 0 0; background: var(--gilt); box-shadow: 0 0 0 2px #0a0807;
}
html.deco .card h1 {
  font-family: var(--display); font-weight: 400; font-size: 27px; letter-spacing: .04em; color: var(--gold-hi);
  text-shadow: 0 2px 0 #0a0807, 0 0 16px rgba(255, 200, 110, .3);
  padding-bottom: 10px; border-bottom: 1.5px solid rgba(214, 168, 74, .7);
}
html.deco .card li { border-bottom: 1px solid rgba(214, 168, 74, .16); font-family: var(--sans); font-weight: 500; font-size: 17px; }
html.deco .card li .qty { font-family: var(--display); color: var(--gold-hi); min-width: 3ch; text-align: right; }
html.deco .card .muted { font-family: var(--sans); color: var(--muted); }
html.deco .card button {
  font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .04em; color: #1c1306;
  background: var(--gilt); border: 2px solid #3a2608; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 243, 200, .6), inset 0 -3px 0 rgba(90, 60, 10, .45), 0 4px 0 #050403;
}
html.deco .card button:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 243, 200, .5), 0 2px 0 #050403; }


/* -- Deco Tower: the mini games (the overlay, its card, gauge, stats, buttons, and results) -- */
/* The furnace and the mill (deco-games.js draws their scenes): a lacquer card
   in a stepped double rule of gold, its heading in gold leaf over a double
   rule, the readouts on lacquer plaques, the pump a polished gold bar that
   glows while it's held, the progress a gold bar in a lacquer track, and the
   result a plaque that lands with its verdict lettered in gold under a fan. */
html.deco .overlay.mg {
  background: radial-gradient(ellipse at 50% 30%, rgba(176, 102, 44, .16), transparent 60%), rgba(6, 5, 4, .9);
}
html.deco .mg-card {
  max-width: 396px; padding: 16px 16px 16px; color: var(--text);
  border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--deco-card) 16 fill / 16px stretch;
  box-shadow: none; filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .65));
}
html.deco .mg-card h2 {
  margin: 0 0 6px; text-align: left; font: 400 21px/1.15 var(--display); letter-spacing: .02em;
  background: var(--deco-leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000);
}
html.deco .mg-card h2::after {
  content: ''; display: block; height: 15px; margin-top: 5px;
  border: solid transparent; border-width: 0 8px; border-image: var(--deco-rule) 0 8 fill / 0 8px stretch;
}
html.deco .mg-help { margin: 0 0 10px; text-align: left; font: 500 13.5px/1.4 var(--sans); color: var(--muted); }
html.deco .gauge, html.deco .furnace-mouth { display: none; }
html.deco .mg-scene { display: flex; justify-content: center; margin: 0 0 12px; }
html.deco .mg-scene canvas {
  display: block; max-width: 100%; height: auto !important;
  border: 2px solid #c9a052; box-shadow: 0 0 0 2px #0a0807, 0 0 0 3px rgba(214, 168, 74, .5), 0 8px 18px rgba(0, 0, 0, .55);
}
html.deco .heat-wrap { justify-content: center; margin-bottom: 12px; }
html.deco .heat-side { flex-direction: row; flex-wrap: wrap; gap: 8px; justify-content: center; }
html.deco .mg-stat {
  padding: 5px 12px 4px; border: 2px solid transparent; border-radius: 0; background: none;
  border-image: var(--deco-btn) 10 fill / 10px stretch;
}
html.deco .mg-stat span { font: 600 10px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
html.deco .mg-stat b { font: 400 22px/1.1 var(--display); letter-spacing: .02em; color: var(--text); }
html.deco .mg-stat.paused b { color: var(--danger); }
html.deco .mg-coal img { width: 32px; height: 32px; }
html.deco .mg-bar {
  height: 12px; margin: 0 0 10px; border-radius: 0; overflow: hidden;
  background: #0c0b09; border: 1.5px solid #c9a052; box-shadow: 0 0 0 1px #0a0807, inset 0 2px 4px rgba(0, 0, 0, .7);
}
html.deco .mg-bar i { background: linear-gradient(#fff6d8, #f3d488 30%, #c4943c 70%, #8c6526); box-shadow: 0 0 10px rgba(255, 200, 110, .45); }
html.deco .mg-status { font: 400 15.5px/1.25 var(--display); letter-spacing: .03em; color: var(--muted); }
html.deco .mg-status.good { color: var(--good); text-shadow: 0 0 12px rgba(111, 211, 168, .45); }
html.deco .mg-status.hot { color: #ffb070; }
html.deco .mg-status.bad { color: var(--danger); }
html.deco .mg-btn {
  font: 400 19px/1.2 var(--display); letter-spacing: .04em; color: #1c1306;
  background: var(--gilt); border: 2px solid #3a2608; border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 243, 200, .6), inset 0 -3px 0 rgba(90, 60, 10, .45), 0 4px 0 #050403;
}
html.deco .mg-btn:active, html.deco .mg-btn.held {
  transform: translateY(2px);
  box-shadow: inset 0 0 0 1px rgba(255, 243, 200, .5), inset 0 2px 8px rgba(90, 40, 0, .35), 0 2px 0 #050403, 0 0 22px rgba(255, 170, 70, .55);
}
html.deco .mg-btn.held { filter: brightness(1.08) saturate(1.1); }
html.deco .mg-btn.empty { filter: grayscale(1) brightness(.6); }
html.deco .gain-ring { --fill: var(--gold-hi); --track: rgba(214, 168, 74, .16); box-shadow: 0 0 0 1.5px #0a0807; }
html.deco .gain-ring::before { background: #15120f; box-shadow: 0 0 0 1.5px rgba(214, 168, 74, .6); }
html.deco .gain-ring.max { --fill: var(--good); box-shadow: 0 0 12px rgba(111, 211, 168, .55); }
html.deco .mg-gain .gain-ring.rush { --fill: #fff6d8; box-shadow: 0 0 0 2px #c9a052, 0 0 16px 3px rgba(255, 200, 110, .8); }
html.deco .mg-gain .gain-ring { width: 38px; height: 38px; }
/* The mill: the whole screen the night the tower goes up, the bed framed in gold. */
html.deco .mg-card.mill-screen {
  max-width: none; border: 0; border-image: none; filter: none;
  background: radial-gradient(ellipse at 50% 0%, rgba(176, 102, 44, .18), transparent 60%), #0e0d0c;
  padding: calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 12px);
}
html.deco #mg-mill {
  border: 2px solid #c9a052; border-radius: 0;
  box-shadow: 0 0 0 2px #0a0807, 0 0 0 3px rgba(214, 168, 74, .5), 0 10px 24px rgba(0, 0, 0, .65);
}
html.deco .mill-screen .mg-btn { padding: 15px; font-size: 24px; letter-spacing: .1em; }
/* The result: a plaque laid over, its verdict in gold leaf under a fan of rays. */
html.deco .mg-result, html.deco .mill-screen .mg-result {
  z-index: 2; border-radius: 0; color: var(--text);
  background: radial-gradient(ellipse at 50% 18%, rgba(255, 190, 110, .14), transparent 55%), rgba(14, 12, 10, .96);
  animation: deco-plaque .32s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes deco-plaque { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
html.deco .mg-result h3 {
  position: relative; padding-top: 26px; font: 400 32px/1.1 var(--display); letter-spacing: .03em;
  background: var(--deco-leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000);
}
html.deco .mg-result h3::before {
  content: ''; position: absolute; left: 50%; top: -36px; width: 150px; height: 60px; transform: translateX(-50%);
  background: repeating-conic-gradient(from 270deg at 50% 100%, rgba(232, 191, 92, .7) 0deg 5deg, transparent 5deg 12deg);
  -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 0, #000 70%, transparent 71%);
  mask-image: radial-gradient(ellipse at 50% 100%, #000 0, #000 70%, transparent 71%);
}
html.deco .mg-result:has(.fx-side.bad) h3 { background: none; color: var(--danger); filter: none; }
html.deco .mg-result:has(.fx-side.bad) h3::before { opacity: .25; }
html.deco .fx { gap: 12px; }
html.deco .fx-item {
  padding: 5px 12px 5px 6px; border: 2px solid transparent; border-radius: 0; background: none;
  border-image: var(--deco-btn) 10 fill / 10px stretch;
}
html.deco .fx-item b { font: 400 22px/1.1 var(--display); color: var(--text); }
html.deco .fx-side.out .fx-item { border-image-source: var(--deco-card-lit); border-image-slice: 16 fill; border-image-width: 16px; padding: 8px 14px 8px 8px; }
html.deco .fx-side.out .fx-item b { font-size: 30px; color: var(--gold-hi); text-shadow: 0 0 12px rgba(255, 200, 110, .35); }
html.deco .fx-side.out.bad .fx-item { border-image-source: var(--deco-btn); }
html.deco .fx-side.out.bad .fx-item b { color: var(--muted); text-shadow: none; }
html.deco .fx-badge span { font-family: var(--display); color: var(--gold-hi); }
html.deco .mg-result .mg-btn { max-width: 300px; }


/* -- Deco Tower: the manual, toasts, the idea tab, and the Styles and Ideas pages -- */
/* Black lacquer in gold. Every frame here is drawn as a border image, a little
   SVG cut nine ways (the --deco-* frames), so the gold rule and the hairline
   inside it follow the stepped corners round, which clip-path and borders
   can't: cards in a double rule, buttons, tabs and chips in a single rule with
   a hairline (LOOKS.steel in gfx.js), the main buttons a polished gold bar on a
   bronze lip (LOOKS.gold), switches in verdigris, "are you sure" in oxblood, and
   wells to write in. Headings in Limelight, the big ones lettered in gold leaf
   with a sunburst behind them, and a double rule with stepped ends under each;
   reading in Oswald. */
html.deco {
  --deco-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%23231e1a'/%3E%3Cstop offset='0.500' stop-color='%231a1714'/%3E%3Cstop offset='1.000' stop-color='%23141210'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 8L4 8L4 4L8 4L8 0L40 0L40 4L44 4L44 8L48 8L48 40L44 40L44 44L40 44L40 48L8 48L8 44L4 44L4 40L0 40Z' fill='%23c9a052'/%3E%3Cpath d='M2 10L6 10L6 6L10 6L10 2L38 2L38 6L42 6L42 10L46 10L46 38L42 38L42 42L38 42L38 46L10 46L10 42L6 42L6 38L2 38Z' fill='url(%23f)'/%3E%3Cpath d='M5.5 13.5L9.5 13.5L9.5 9.5L13.5 9.5L13.5 5.5L34.5 5.5L34.5 9.5L38.5 9.5L38.5 13.5L42.5 13.5L42.5 34.5L38.5 34.5L38.5 38.5L34.5 38.5L34.5 42.5L13.5 42.5L13.5 38.5L9.5 38.5L9.5 34.5L5.5 34.5Z' fill='none' stroke='%23d6a84a' stroke-opacity='0.5' stroke-width='1'/%3E%3C/svg%3E");
  --deco-card-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%2330281f'/%3E%3Cstop offset='0.500' stop-color='%23231d18'/%3E%3Cstop offset='1.000' stop-color='%231a1612'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 8L4 8L4 4L8 4L8 0L40 0L40 4L44 4L44 8L48 8L48 40L44 40L44 44L40 44L40 48L8 48L8 44L4 44L4 40L0 40Z' fill='%23f3d488'/%3E%3Cpath d='M2 10L6 10L6 6L10 6L10 2L38 2L38 6L42 6L42 10L46 10L46 38L42 38L42 42L38 42L38 46L10 46L10 42L6 42L6 38L2 38Z' fill='url(%23f)'/%3E%3Cpath d='M5.5 13.5L9.5 13.5L9.5 9.5L13.5 9.5L13.5 5.5L34.5 5.5L34.5 9.5L38.5 9.5L38.5 13.5L42.5 13.5L42.5 34.5L38.5 34.5L38.5 38.5L34.5 38.5L34.5 42.5L13.5 42.5L13.5 38.5L9.5 38.5L9.5 34.5L5.5 34.5Z' fill='none' stroke='%23e8bf5c' stroke-opacity='0.9' stroke-width='1'/%3E%3C/svg%3E");
  --deco-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%232e2924'/%3E%3Cstop offset='0.500' stop-color='%231a1714'/%3E%3Cstop offset='1.000' stop-color='%2312100e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6L3 6L3 3L6 3L6 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L6 32L6 29L3 29L3 26L0 26Z' fill='%23b8903e'/%3E%3Cpath d='M2 8L5 8L5 5L8 5L8 2L24 2L24 5L27 5L27 8L30 8L30 24L27 24L27 27L24 27L24 30L8 30L8 27L5 27L5 24L2 24Z' fill='url(%23f)'/%3E%3Cpath d='M4.5 8L8 8L8 4.5L24 4.5L24 8L27.5 8L27.5 24L24 24L24 27.5L8 27.5L8 24L4.5 24Z' fill='none' stroke='%23d6a84a' stroke-opacity='0.45' stroke-width='1'/%3E%3C/svg%3E");
  --deco-btn-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%233a3024'/%3E%3Cstop offset='0.500' stop-color='%232a231c'/%3E%3Cstop offset='1.000' stop-color='%23201b16'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6L3 6L3 3L6 3L6 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L6 32L6 29L3 29L3 26L0 26Z' fill='%23f3d488'/%3E%3Cpath d='M2 8L5 8L5 5L8 5L8 2L24 2L24 5L27 5L27 8L30 8L30 24L27 24L27 27L24 27L24 30L8 30L8 27L5 27L5 24L2 24Z' fill='url(%23f)'/%3E%3Cpath d='M4.5 8L8 8L8 4.5L24 4.5L24 8L27.5 8L27.5 24L24 24L24 27.5L8 27.5L8 24L4.5 24Z' fill='none' stroke='%23e8bf5c' stroke-opacity='0.85' stroke-width='1'/%3E%3C/svg%3E");
  --deco-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%23f3d488'/%3E%3Cstop offset='0.200' stop-color='%23fff6d8'/%3E%3Cstop offset='0.400' stop-color='%23f3d488'/%3E%3Cstop offset='0.600' stop-color='%23c4943c'/%3E%3Cstop offset='0.800' stop-color='%236e4c18'/%3E%3Cstop offset='1.000' stop-color='%23c4943c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6L3 6L3 3L6 3L6 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L6 32L6 29L3 29L3 26L0 26Z' fill='%233a2608'/%3E%3Cpath d='M2 8L5 8L5 5L8 5L8 2L24 2L24 5L27 5L27 8L30 8L30 24L27 24L27 27L24 27L24 30L8 30L8 27L5 27L5 24L2 24Z' fill='url(%23f)'/%3E%3Cpath d='M3.5 7L7 7L7 3.5L25 3.5L25 7L28.5 7L28.5 25L25 25L25 28.5L7 28.5L7 25L3.5 25Z' fill='none' stroke='%23fff3c8' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E");
  --deco-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%23b4473a'/%3E%3Cstop offset='0.500' stop-color='%238e2c22'/%3E%3Cstop offset='1.000' stop-color='%236e1f18'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6L3 6L3 3L6 3L6 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L6 32L6 29L3 29L3 26L0 26Z' fill='%23d2a24a'/%3E%3Cpath d='M2 8L5 8L5 5L8 5L8 2L24 2L24 5L27 5L27 8L30 8L30 24L27 24L27 27L24 27L24 30L8 30L8 27L5 27L5 24L2 24Z' fill='url(%23f)'/%3E%3Cpath d='M4.5 8L8 8L8 4.5L24 4.5L24 8L27.5 8L27.5 24L24 24L24 27.5L8 27.5L8 24L4.5 24Z' fill='none' stroke='%23ffd9a0' stroke-opacity='0.4' stroke-width='1'/%3E%3C/svg%3E");
  --deco-verdi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%236cc8a2'/%3E%3Cstop offset='0.500' stop-color='%233f9a7c'/%3E%3Cstop offset='1.000' stop-color='%232c7560'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 6L3 6L3 3L6 3L6 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L6 32L6 29L3 29L3 26L0 26Z' fill='%230c2a20'/%3E%3Cpath d='M2 8L5 8L5 5L8 5L8 2L24 2L24 5L27 5L27 8L30 8L30 24L27 24L27 27L24 27L24 30L8 30L8 27L5 27L5 24L2 24Z' fill='url(%23f)'/%3E%3Cpath d='M4.5 8L8 8L8 4.5L24 4.5L24 8L27.5 8L27.5 24L24 24L24 27.5L8 27.5L8 24L4.5 24Z' fill='none' stroke='%23d8fff0' stroke-opacity='0.35' stroke-width='1'/%3E%3C/svg%3E");
  --deco-well: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M0 6L3 6L3 3L6 3L6 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L6 32L6 29L3 29L3 26L0 26Z' fill='%23a8823c'/%3E%3Cpath d='M1.5 7.5L4.5 7.5L4.5 4.5L7.5 4.5L7.5 1.5L24.5 1.5L24.5 4.5L27.5 4.5L27.5 7.5L30.5 7.5L30.5 24.5L27.5 24.5L27.5 27.5L24.5 27.5L24.5 30.5L7.5 30.5L7.5 27.5L4.5 27.5L4.5 24.5L1.5 24.5Z' fill='%230c0b09'/%3E%3C/svg%3E");
  --deco-well-lit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M0 6L3 6L3 3L6 3L6 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L6 32L6 29L3 29L3 26L0 26Z' fill='%23f3d488'/%3E%3Cpath d='M2 8L5 8L5 5L8 5L8 2L24 2L24 5L27 5L27 8L30 8L30 24L27 24L27 27L24 27L24 30L8 30L8 27L5 27L5 24L2 24Z' fill='%230c0b09'/%3E%3Cpath d='M4.5 8L8 8L8 4.5L24 4.5L24 8L27.5 8L27.5 24L24 24L24 27.5L8 27.5L8 24L4.5 24Z' fill='none' stroke='%23e8bf5c' stroke-opacity='0.35' stroke-width='1'/%3E%3C/svg%3E");
  --deco-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M0 3L3 3L3 0L13 0L13 3L16 3L16 13L13 13L13 16L3 16L3 13L0 13Z' fill='%239a7a3a'/%3E%3Cpath d='M1 4L4 4L4 1L12 1L12 4L15 4L15 12L12 12L12 15L4 15L4 12L1 12Z' fill='%2324201b'/%3E%3C/svg%3E");
  --deco-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%232e2924'/%3E%3Cstop offset='0.500' stop-color='%231a1714'/%3E%3Cstop offset='1.000' stop-color='%2312100e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg%3E%3Cpath d='M-2 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L-2 32Z' fill='%23d6a84a'/%3E%3Cpath d='M-2 2L24 2L24 5L27 5L27 8L30 8L30 24L27 24L27 27L24 27L24 30L-2 30Z' fill='url(%23f)'/%3E%3Cpath d='M-2 4.5L24 4.5L24 8L27.5 8L27.5 24L24 24L24 27.5L-2 27.5Z' fill='none' stroke='%23d6a84a' stroke-opacity='0.5' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  --deco-tab-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0.000' stop-color='%232e2924'/%3E%3Cstop offset='0.500' stop-color='%231a1714'/%3E%3Cstop offset='1.000' stop-color='%2312100e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(32 0) scale(-1 1)'%3E%3Cpath d='M-2 0L26 0L26 3L29 3L29 6L32 6L32 26L29 26L29 29L26 29L26 32L-2 32Z' fill='%23d6a84a'/%3E%3Cpath d='M-2 2L24 2L24 5L27 5L27 8L30 8L30 24L27 24L27 27L24 27L24 30L-2 30Z' fill='url(%23f)'/%3E%3Cpath d='M-2 4.5L24 4.5L24 8L27.5 8L27.5 24L24 24L24 27.5L-2 27.5Z' fill='none' stroke='%23d6a84a' stroke-opacity='0.5' stroke-width='1'/%3E%3C/g%3E%3C/svg%3E");
  /* A double rule, 2px over 1px, between stepped brackets (like the one under a sheet's title). */
  --deco-rule: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='15' viewBox='0 0 40 15'%3E%3Cg fill='%23d6a84a'%3E%3Cpath d='M0 1L4 1L4 3L8 3L8 12L4 12L4 14L0 14Z'/%3E%3Cpath d='M8 5L32 5L32 7L8 7ZM8 9L32 9L32 10L8 10Z'/%3E%3Cpath d='M0 1L4 1L4 3L8 3L8 12L4 12L4 14L0 14Z' transform='translate(40 0) scale(-1 1)'/%3E%3C/g%3E%3C/svg%3E");
  /* A little gold lozenge, stepped. */
  --deco-gem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M4 0h2v2h2v2h2v2h-2v2h-2v2h-2v-2h-2v-2h-2v-2h2v-2h2z' fill='%23e8bf5c'/%3E%3C/svg%3E");
  /* For things clipped rather than framed: corners cut in two steps of 4px, or one of 3px. */
  --deco-steps: polygon(0 8px, 4px 8px, 4px 4px, 8px 4px, 8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px), calc(100% - 8px) 100%,
    8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px));
  --deco-steps-sm: polygon(0 3px, 3px 3px, 3px 0, calc(100% - 3px) 0, calc(100% - 3px) 3px, 100% 3px, 100% calc(100% - 3px), calc(100% - 3px) calc(100% - 3px),
    calc(100% - 3px) 100%, 3px 100%, 3px calc(100% - 3px), 0 calc(100% - 3px));
  /* Gold leaf on lettering, lit from above, and a gold coin. */
  --deco-leaf: linear-gradient(#fff6d8 6%, #f3d488 32%, #d6a84a 58%, #a87a2e 84%, #c99a46);
  --deco-coin: linear-gradient(#fff6d8, #f3d488 28%, #c4943c 62%, #6e4c18);
  /* A medallion (the hub's round buttons): a lacquer face with a fine gold rule
     inside its edge, in a gold ring cut into rays like a sunburst. */
  --deco-medal: radial-gradient(circle closest-side, #24201c 0 60%, rgba(214, 168, 74, .85) 61% 63.5%, #1c1814 64.5% 69%, #1a1206 70% 73%, transparent 74%),
    repeating-conic-gradient(rgba(90, 60, 16, .72) 0 5deg, transparent 5deg 15deg), var(--deco-coin);
  /* A fan of rays, for behind headings (mask it to fade it out). */
  --deco-fan: repeating-conic-gradient(from -90deg at 50% 100%, rgba(232, 191, 92, .2) 0 2.6deg, transparent 2.6deg 7.5deg);
}

/* The toast: a plaque of lacquer in a lit double rule, gold lettering with a
   stepped lozenge either side, dropped in from above; a band of light runs
   across the gold as it lands, like the gilt on the tower. */
html.deco .toast {
  top: calc(env(safe-area-inset-top) + 58px);
  padding: 10px 32px 11px; border: 2px solid transparent; border-radius: 0; background: none;
  border-image: var(--deco-card-lit) 16 fill / 16px stretch;
  color: var(--gold-hi); font-size: 18px; letter-spacing: .03em; line-height: 1.2; text-align: center;
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(255, 196, 106, .3);
  white-space: normal; overflow-wrap: break-word; width: max-content; max-width: min(380px, calc(100vw - 32px));
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
}
html.deco .toast::before {
  content: ''; position: absolute; inset: 0 11px; pointer-events: none;
  background: var(--deco-gem) left 50% / 10px 10px no-repeat, var(--deco-gem) right 50% / 10px 10px no-repeat;
}
html.deco .toast::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; clip-path: var(--deco-steps); mix-blend-mode: overlay;
  background: linear-gradient(105deg, transparent 43%, rgba(255, 248, 225, .95) 50%, transparent 57%) 120% 0 / 300% 100% no-repeat;
}
html.deco .toast.show { animation: deco-toast 2s ease; }
html.deco .toast.show::after { animation: deco-sheen 1.1s .18s ease-in-out both; }
@keyframes deco-toast {
  0% { opacity: 0; transform: translate(-50%, -14px); }
  10%, 80% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -5px); }
}
@keyframes deco-sheen { from { background-position: 120% 0; } to { background-position: -20% 0; } }

/* ---- Deco Tower: the manual ---- */
/* The company's handbook, bound in black lacquer: a masthead with the book in a
   medallion and a sunburst behind it, the title in gold leaf over a double
   rule; the tabs little plaques, the open one a gold bar; every entry a framed
   card, its picture in a ring of gold; headings ruled off, bullets stepped
   lozenges, and the steps numbered on little framed plates. */
html.deco #manual { background: rgba(6, 5, 4, .92); }
html.deco .mpanel {
  background: radial-gradient(120% 220px at 30% 0, rgba(176, 102, 44, .14), transparent), linear-gradient(#15120f, var(--soot) 260px);
  color: var(--text); padding-left: 12px; padding-right: 12px;
}
@media (min-width: 580px) {
  html.deco .mpanel { border-left: 5px double rgba(214, 168, 74, .65); border-right: 5px double rgba(214, 168, 74, .65); }
}
html.deco .mhead { position: relative; isolation: isolate; flex: none; gap: 10px; padding: 2px 0 20px; }
html.deco .mhead::before {
  content: ''; position: absolute; z-index: -1; inset: -12px -12px 6px -12px; pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 35px 37px, rgba(232, 191, 92, .17) 0 3deg, transparent 3deg 10deg);
  -webkit-mask-image: radial-gradient(circle 170px at 35px 37px, transparent 25px, #000 28px, rgba(0, 0, 0, .5) 90px, transparent 165px);
  mask-image: radial-gradient(circle 170px at 35px 37px, transparent 25px, #000 28px, rgba(0, 0, 0, .5) 90px, transparent 165px);
}
html.deco .mhead::after, html.deco .ss-top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 15px;
  border: solid transparent; border-width: 0 8px; border-image: var(--deco-rule) 0 8 fill / 0 8px stretch;
}
html.deco .mhead h2 {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  font-size: 27px; line-height: 1.1; letter-spacing: .02em;
  background: var(--deco-leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000);
}
html.deco .mhead h2 .ico {
  width: 46px; height: 46px; padding: 10px; flex: none; vertical-align: 0; border-radius: 50%;
  background: var(--deco-medal); box-shadow: 0 0 0 1px #1a1206;
}
/* The close button: a medallion with an ivory cross. */
html.deco .mclose {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: var(--deco-medal); box-shadow: 0 0 0 1px #1a1206, 0 3px 0 1px #030202;
  color: transparent; font-size: 0;
}
html.deco .mclose::before, html.deco .mclose::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 2.5px; margin: -1.25px 0 0 -7.5px;
  background: var(--text); border-radius: 1px; transform: rotate(45deg); box-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}
html.deco .mclose::after { transform: rotate(-45deg); }
html.deco .mclose:active { transform: translateY(2px); box-shadow: 0 0 0 1px #1a1206, 0 1px 0 1px #030202; }
/* The tabs: plaques in a gold rim, the open one a gold bar. */
html.deco .mtabs { gap: 6px; padding: 14px 0 10px; }
html.deco .mtabs button {
  flex: 1 0 auto; min-height: 44px; padding: 6px 8px;
  border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--deco-btn) 10 fill / 10px stretch;
  font: 600 13px/1.1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: #c9bba0;
}
html.deco .mtabs button.on { color: #1c1306; border-image-source: var(--deco-gold); filter: drop-shadow(0 3px 0 #2a1c06); }
html.deco .mtabs button:active { transform: translateY(1px); }
/* The search: a well, a gold glass in it. */
html.deco .msearch {
  -webkit-appearance: none; appearance: none; flex: none; width: 100%; height: 48px; margin: 0 0 8px;
  padding: 0 12px 0 32px; border: 6px solid transparent; border-radius: 0; outline: none;
  border-image: var(--deco-well) 10 / 10px stretch;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.5' fill='none' stroke='%23d6a84a' stroke-width='2.2'/%3E%3Cpath d='M12.2 12.2L17.5 17.5' stroke='%23d6a84a' stroke-width='3' stroke-linecap='square'/%3E%3C/svg%3E") 5px 50% / 18px 18px no-repeat, #0c0b09;
  background-clip: padding-box; font: 500 16px var(--sans); letter-spacing: .02em; color: var(--text);
}
html.deco .msearch:focus { border-image-source: var(--deco-well-lit); }
html.deco .msearch::placeholder { color: #7d7262; opacity: 1; }
html.deco .msearch::-webkit-search-cancel-button { filter: sepia(1) saturate(3) hue-rotate(-10deg); }
/* Reading. */
html.deco .mbody { padding: 4px 2px 36px; color: var(--text); scrollbar-color: #6e4c18 transparent; scrollbar-width: thin; }
html.deco .mbody p, html.deco .mbody li { font-size: 15.5px; line-height: 1.55; }
html.deco .mbody b { font-weight: 600; color: #f6ead0; }
html.deco .mbody .muted { color: var(--muted); }
html.deco .mguide > p { margin: 8px 0; }
html.deco .mguide h3, html.deco .mgroup {
  margin: 26px 0 10px; font: 400 21px/1.15 var(--display); letter-spacing: .02em; color: var(--accent);
}
html.deco .mguide h3:first-child, html.deco .mbody > .mgroup:first-child { margin-top: 6px; }
html.deco .mguide h3::after, html.deco .mgroup::after, html.deco .ss h2::after, html.deco .idea-card h2::after {
  content: ''; display: block; height: 15px; margin-top: 5px;
  border: solid transparent; border-width: 0 8px; border-image: var(--deco-rule) 0 8 fill / 0 8px stretch;
}
html.deco .mguide ul, html.deco .mguide ol { list-style: none; margin: 0; }
html.deco .mguide ul { padding-left: 22px; }
html.deco .mguide ol { padding-left: 36px; counter-reset: step; }
html.deco .mguide li { position: relative; margin-bottom: 7px; }
html.deco .mguide ul > li::before {
  content: ''; position: absolute; left: -19px; top: .5em; width: 10px; height: 10px; background: var(--deco-gem) center / 10px 10px no-repeat;
}
html.deco .mguide ol > li { counter-increment: step; }
html.deco .mguide ol > li::before {
  content: counter(step); position: absolute; left: -36px; top: 0; width: 26px; height: 26px; box-sizing: border-box;
  border: 1px solid transparent; border-image: var(--deco-link) 5 fill / 5px stretch;
  font: 400 15px/24px var(--display); text-align: center; color: var(--accent);
}
/* Tables: framed, the head row in gold capitals, rows ruled in gold hairlines. */
html.deco .mtable {
  width: 100%; margin: 12px 0 4px; padding: 6px 8px 8px; border-collapse: separate; border-spacing: 0;
  border: 2px solid transparent; border-image: var(--deco-card) 16 fill / 16px stretch; font-size: 14.5px;
}
html.deco .mtable th {
  font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
  border-bottom: 3px double rgba(214, 168, 74, .6);
}
html.deco .mtable th, html.deco .mtable td { padding: 6px 7px; }
html.deco .mtable td { border-bottom: 1px solid rgba(214, 168, 74, .16); }
html.deco .mtable tr:last-child td { border-bottom: 0; }
/* Recipes: what goes in, an arrow, what comes out, the columns fixed so a long
   name wraps inside its link instead of pushing the table off the page. */
html.deco .mtable.recipes { table-layout: fixed; }
html.deco .mtable.recipes td { padding: 6px 3px 6px 5px; }
html.deco .mtable.recipes td:nth-child(1) { width: 50%; }
html.deco .mtable.recipes td:nth-child(2) { width: 18px; padding: 0; color: var(--gold); font-weight: 600; text-align: center; }
html.deco .mtable.recipes td:nth-child(3) { text-align: right; }
html.deco .mtable.recipes .mlink { white-space: normal; max-width: 100%; text-align: left; }
/* Entries: framed cards. */
html.deco .mentry {
  margin-bottom: 12px; padding: 14px 16px 15px; scroll-margin-top: 6px;
  border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--deco-card) 16 fill / 16px stretch;
}
html.deco .mentry header { gap: 14px; }
html.deco .mentry header .ico.big {
  width: 50px; height: 50px; padding: 7px; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #312a24, #15120f 72%);
  box-shadow: 0 0 0 1.5px #c9a052, 0 0 0 4px #0e0d0c, 0 0 0 5px rgba(214, 168, 74, .5);
  margin: 3px 2px 3px 3px;
}
html.deco .mentry h4 { font: 400 20px/1.1 var(--display); letter-spacing: .02em; color: var(--text); }
html.deco .mentry header small {
  display: inline-block; margin-top: 4px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
}
html.deco .mentry > p { margin: 10px 0 0; }
html.deco .mrow { margin: 7px 0 0; padding-left: 72px; text-indent: -72px; }
html.deco .mlabel { width: 72px; font: 600 11.5px/1.2 var(--sans); letter-spacing: .14em; color: #b8903e; }
html.deco .mlink {
  gap: 4px; margin: 2px 4px 2px 0; padding: 2px 8px 2px 4px; vertical-align: middle;
  border: 1px solid transparent; border-radius: 0; background: none; border-image: var(--deco-link) 5 fill / 5px stretch;
  color: var(--text); font-size: 13.5px; font-weight: 500; line-height: 1.35;
}
html.deco .mlink b { font: 400 14px/1 var(--display); color: var(--accent); }
html.deco .mlink .ico { width: 20px; height: 20px; }
html.deco .mlink:active { filter: brightness(1.35); }
html.deco .mtier { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(214, 168, 74, .25); font-size: 15px; }
html.deco .mtier b { color: var(--gold-hi); font-weight: 600; }
/* An entry jumped to lights up, its rule brightening for a moment. */
html.deco .mentry.flash { animation: deco-flash 1.5s ease; }
@keyframes deco-flash {
  0%, 45% { border-image-source: var(--deco-card-lit); filter: drop-shadow(0 0 10px rgba(247, 220, 138, .45)); }
}

/* ---- Deco Tower: the Styles and Ideas pages, and the idea tab ---- */
/* The tower's office floor at dusk: soot black under a smoky amber glow, the
   stone fluted faintly, a vignette of soot round the edges. The page title in
   gold leaf on a sunburst over a double rule; the tabs along the bottom on a
   lacquer band under a double gold rule. */
html.deco.doc {
  background: radial-gradient(160% 440px at 50% 0, rgba(176, 102, 44, .2), rgba(74, 44, 34, .1) 55%, transparent),
    linear-gradient(#181412, var(--soot) 520px) var(--soot);
}
html.deco.doc body.ss { background: transparent; }
html.deco.doc body.ss::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 42%, transparent 52%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(0, 0, 0, .16) 21px 23px, rgba(255, 236, 200, .022) 23px 24px, transparent 24px 46px);
}
html.deco.doc ::selection { background: rgba(214, 168, 74, .42); color: #fff6d8; }
html.deco .ss h1 {
  font-size: 34px; letter-spacing: .02em;
  background: var(--deco-leaf); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000);
}
html.deco .ss-top { position: relative; isolation: isolate; gap: 14px; padding: 4px 0 24px; }
html.deco .ss-top::before {
  content: ''; position: absolute; z-index: -1; left: 0; bottom: 8px; width: min(100%, 440px); height: 190px; pointer-events: none;
  background: var(--deco-fan);
  -webkit-mask-image: radial-gradient(circle 230px at 50% 100%, transparent 22px, #000 30px, rgba(0, 0, 0, .5) 110px, transparent 225px);
  mask-image: radial-gradient(circle 230px at 50% 100%, transparent 22px, #000 30px, rgba(0, 0, 0, .5) 110px, transparent 225px);
}
html.deco .ss h2 { font-size: 25px; letter-spacing: .02em; color: var(--accent); }
html.deco .ss-head h2 { flex: 1 1 auto; }
html.deco .ss h3, html.deco .ss h4 { letter-spacing: .015em; }
html.deco .ss-head h3 { flex: 1 1 auto; padding-bottom: 7px; color: var(--accent); border-bottom: 3px double rgba(214, 168, 74, .55); }
html.deco .ss-note { color: var(--muted); }
html.deco .ss-status { font-weight: 600; letter-spacing: .02em; }
/* Cards in a double rule; the one in use lit. */
html.deco .ss-style, html.deco .ss-card, html.deco .idea-card {
  border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--deco-card) 16 fill / 16px stretch;
}
html.deco .ss-style { padding: 14px; }
html.deco .ss-card { padding: 16px; }
html.deco .ss-idea.used { border-image-source: var(--deco-card-lit); }
/* Buttons, tabs, and chips: lacquer in a gold rim; the main ones a gold bar. */
html.deco .ss-btn, html.deco .idea-actions button, html.deco .ss-chip, html.deco .ss-tab {
  border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--deco-btn) 10 fill / 10px stretch; color: var(--text);
}
html.deco .ss-btn, html.deco .idea-actions button {
  padding: 9px 17px 8px; font-family: var(--display); font-weight: normal; font-size: 16px; letter-spacing: .03em;
}
html.deco .ss-btn span[aria-hidden] { font-family: var(--sans); font-weight: 500; font-size: 24px; line-height: .6; margin-top: -2px; }
html.deco .ss-btn:active:not(:disabled), html.deco .idea-actions button:active, html.deco .ss-chip:active { transform: translateY(1px); border-image-source: var(--deco-btn-lit); }
html.deco .ss-btn:disabled { opacity: .38; filter: none; }
html.deco .ss-gold, html.deco .idea-actions .idea-save, html.deco .ss-chip[aria-pressed="true"] {
  border-image-source: var(--deco-gold); color: #1c1306; filter: drop-shadow(0 3px 0 #2a1c06);
}
html.deco .ss-gold:active:not(:disabled), html.deco .idea-actions .idea-save:active, html.deco .ss-chip[aria-pressed="true"]:active {
  transform: translateY(2px); border-image-source: var(--deco-gold); filter: drop-shadow(0 1px 0 #2a1c06);
}
html.deco .ss-chip { min-height: 44px; padding: 8px 14px; font: 500 14px var(--sans); letter-spacing: .03em; }
html.deco .ss-chip[aria-pressed="true"] { font-weight: 600; }
html.deco .ss-copied { font-weight: 600; letter-spacing: .03em; }
/* Each style's card: its colours in gold-ringed squares, the one playing badged in verdigris. */
html.deco .ss-swatch { gap: 5px; grid-template-columns: repeat(2, 16px); padding-top: 5px; }
html.deco .ss-swatch i { border-radius: 0; box-shadow: 0 0 0 1px #0a0908, 0 0 0 2px rgba(214, 168, 74, .7); }
html.deco .ss-style-text p { font-size: 14px; }
html.deco .ss-here, html.deco .ss-pick, html.deco .id-waiting {
  border-radius: 0; clip-path: var(--deco-steps-sm); padding: 2px 8px 1px;
  font: 600 11px/1.45 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
html.deco .ss-here { background: linear-gradient(#86dcb8, #3f9a7c); color: #061611; }
html.deco .ss-pick { background: linear-gradient(#fff6d8, #f3d488 35%, #c4943c 80%); color: #1c1306; }
html.deco .id-waiting { background: linear-gradient(#ffe2a4, #e8a84a); color: #2a1a06; }
/* The switch: a lacquer slot in a gold rim with a gold coin in it; on, the slot is verdigris. */
html.deco .ss-switch span { width: 54px; height: 30px; border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--deco-btn) 10 fill / 10px stretch; }
html.deco .ss-switch span::after {
  top: 3px; left: 3px; width: 20px; height: 20px;
  background: radial-gradient(circle at 50% 32%, #fff6d8, #f3d488 30%, #c4943c 66%, #6e4c18);
  box-shadow: 0 0 0 1px #1a1206, 0 2px 0 rgba(0, 0, 0, .55);
}
html.deco .ss-switch input:checked + span { background: none; border-color: transparent; border-image-source: var(--deco-verdi); }
html.deco .ss-switch input:checked + span::after { transform: translateX(24px); background: radial-gradient(circle at 50% 32%, #fff6d8, #f3d488 30%, #c4943c 66%, #6e4c18); }
html.deco .ss-switch b { font-weight: 600; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
html.deco .ss-switch input:checked ~ b { color: var(--good); }
/* The redesign kit: wells to write in, choices on plaques, the prompt on the card's lacquer. */
html.deco .ss textarea, html.deco .idea-card textarea {
  padding: 11px 13px; border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--deco-well) 10 fill / 10px stretch;
  color: var(--text); font-size: 15px; line-height: 1.45;
}
html.deco .ss textarea:focus, html.deco .idea-card textarea:focus { outline: none; border-image-source: var(--deco-well-lit); }
html.deco .ss textarea::placeholder, html.deco .idea-card textarea::placeholder { color: #7d7262; }
html.deco .ss-field > label, html.deco .ss-field > legend { font: 600 13px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
html.deco .ss-choice { padding: 11px 14px; border: 2px solid transparent; border-radius: 0; background: none; border-image: var(--deco-btn) 10 fill / 10px stretch; }
html.deco .ss-choice b { font-weight: 600; letter-spacing: .02em; }
html.deco .ss-choice span { font-size: 13.5px; }
html.deco .ss-choice:has(input:checked) { border-image-source: var(--deco-btn-lit); }
html.deco .ss-choice:has(input:checked) b { color: var(--accent); }
html.deco .ss-choice input, html.deco .ss-tick input { accent-color: var(--gold); }
html.deco .ss-preview { padding: 0; }
html.deco .ss-preview-head {
  margin: 0 7px; padding: 14px 10px 10px; border-bottom: 3px double rgba(214, 168, 74, .6);
  color: var(--gold); font-weight: 600; letter-spacing: .16em;
}
html.deco .ss #prompt { margin: 0 7px 7px; padding: 14px 10px 16px; background: transparent; color: #e4d8bc; scrollbar-color: #6e4c18 transparent; scrollbar-width: thin; }
html.deco .ss #prompt b { color: var(--accent); }
/* Ideas to try: the group in small gold capitals, picks on a gold tab, the details folding out behind a gold chevron. */
html.deco .ss-idea-top { color: #b8903e; font-weight: 600; letter-spacing: .14em; font-size: 11.5px; }
html.deco .ss-idea > p, html.deco .ss-idea dd { font-size: 14px; }
html.deco .ss-idea dt { color: #b8903e; font-weight: 600; letter-spacing: .14em; font-size: 11.5px; }
html.deco .ss-idea summary { min-height: 44px; color: var(--accent); font-weight: 600; letter-spacing: .02em; gap: 10px; }
html.deco .ss-idea summary::before, html.deco .ss-idea details[open] summary::before {
  content: ''; width: 7px; height: 7px; margin-left: 2px; border: solid var(--gold); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s;
}
html.deco .ss-idea details[open] summary::before { transform: translateY(-2px) rotate(45deg); }
/* The tabs along the bottom: on a lacquer band under a double gold rule. */
html.deco .ss-nav {
  padding-top: 11px; border-top: 2px solid var(--gold);
  background: linear-gradient(var(--gold), var(--gold)) 0 3px / 100% 1px no-repeat, linear-gradient(#1d1915, #0a0908);
  box-shadow: 0 -12px 28px rgba(0, 0, 0, .6);
}
html.deco .ss-tab { font-size: 16px; letter-spacing: .03em; }
html.deco .ss-tab.on { border-image-source: var(--deco-btn-lit); color: var(--accent); }
html.deco a.ss-tab:active { transform: translateY(1px); border-image-source: var(--deco-btn-lit); }
/* The Ideas page. */
html.deco .id-new > label { font-family: var(--display); font-weight: normal; font-size: 21px; letter-spacing: .02em; color: var(--accent); }
html.deco .id-text { font-size: 16px; line-height: 1.5; }
html.deco .id-meta { font-size: 13px; letter-spacing: .02em; }
html.deco .id-armed { border-image-source: var(--deco-red) !important; color: #fff0e0 !important; }
html.deco .id-idea.done .id-text { opacity: .55; text-decoration-color: var(--gold); }

/* The idea tab: a lacquer tab on the edge of the screen in a gold rule, the
   lightbulb glowing on it; its sheet a framed card with the title ruled off. */
html.deco .idea-tab {
  width: 36px; padding: 0 2px 0 0; border: 2px solid transparent; border-left: 0; border-radius: 0; background: none;
  border-image: var(--deco-tab) 10 10 10 0 fill / 10px 10px 10px 0 stretch;
  box-shadow: none; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .55)); opacity: .94;
}
html.deco .idea-tab.right {
  padding: 0 0 0 2px; border: 2px solid transparent; border-right: 0; border-radius: 0;
  border-image: var(--deco-tab-r) 10 0 10 10 fill / 10px 0 10px 10px stretch;
}
html.deco .idea-tab img { filter: drop-shadow(0 0 4px rgba(255, 196, 106, .6)); }
html.deco .idea-sheet { background: rgba(6, 5, 4, .64); }
html.deco .idea-card { gap: 12px; padding: 18px 18px 16px; filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6)); }
html.deco .idea-card h2 { font-size: 23px; letter-spacing: .02em; color: var(--accent); }
html.deco .idea-where { font-size: 13px; letter-spacing: .02em; }

/* ---- Polar Night style (see style.js and the frost-* files) -----------------------------
   A deep-ice drill camp in a polar blizzard at night: blue-black frosted glass in
   frames of international-orange steel, frost grown into the corners, Dymo tape
   labels (white letters embossed on black tape), sodium amber and aurora green.
   Teko for headings and numbers, IBM Plex Sans Condensed for reading, and Special
   Elite (a worn typewriter) for the station log. */
@font-face {
  font-family: 'Teko';
  src: url(fonts/teko-600.woff2) format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  src: url(fonts/plex-sans-condensed-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Sans Condensed';
  src: url(fonts/plex-sans-condensed-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Special Elite';
  src: url(fonts/special-elite.woff2) format('woff2');
  font-display: swap;
}
html.frost {
  --display: 'Teko', 'IBM Plex Sans Condensed', system-ui, sans-serif;
  --sans: 'IBM Plex Sans Condensed', system-ui, sans-serif;
  --log: 'Special Elite', 'Courier New', monospace;
  --bg: #070b12;
  --panel: #0f1720;
  --panel-2: #16212c;
  --panel-edge: #2c3a48;
  --text: #eef4f8;
  --muted: #93a6b6;
  --accent: #ff7a2e;
  --danger: #ff5a4a;
  --good: #6cf29a;
  --orange: #ff5a1f;
  --orange-deep: #b8360c;
  --ice: #8fe3ff;
  --sodium: #ffb44a;
  --tape: #161718;
  --ink: #05080c;
  --paper: #e6ecef;
  /* The station's paint and glass: international-orange steel, blue-black glass,
     gunmetal, and the rubber keys (the same colours as LOOKS in gfx.js). */
  --steel-o: linear-gradient(#ff7a3a, #e8501a 55%, #b8360c);
  --glass: linear-gradient(#17222d, #0e161e 60%, #091017);
  --gun: linear-gradient(#4a5661, #343e48 55%, #252d35);
  --key-o: linear-gradient(#ff9a5c, #ff6a2a 55%, #e0480f);
  --key-g: linear-gradient(#a8f8c4, #5ee893 55%, #2fbf6a);
  --gloss: linear-gradient(rgba(255, 255, 255, .2), rgba(255, 255, 255, .06) 36%, transparent 38%);
  /* Frost grown into a corner (the same ice ferns frost-kit.js grows), one picture a corner. */
  --frost-tl: url(frost-tl.png);
  --frost-tr: url(frost-tr.png);
  --frost-bl: url(frost-bl.png);
  --frost-br: url(frost-br.png);
  /* A bolt head, and one in each corner of a frame. */
  --bolt: radial-gradient(circle closest-side, #dfe5ea 0 34%, #7d8891 46%, #1a0904 62%, transparent 74%);
  --bolts: var(--bolt) 0 0 / 7px 7px no-repeat border-box, var(--bolt) 100% 0 / 7px 7px no-repeat border-box,
    var(--bolt) 0 100% / 7px 7px no-repeat border-box, var(--bolt) 100% 100% / 7px 7px no-repeat border-box;
  /* Rime: a crust of tiny ice crystals along a top edge. */
  --rime: radial-gradient(circle at 50% 30%, rgba(234, 246, 255, .9) 0 .7px, transparent 1.2px) 0 0 / 4px 3px repeat-x border-box,
    radial-gradient(circle at 35% 15%, rgba(234, 246, 255, .75) 0 1.1px, transparent 1.7px) 2px 0 / 9px 4px repeat-x border-box;
  /* Dymo tape: black plastic with a gloss along its top, the letters pressed up out of it. */
  --tape-face: linear-gradient(rgba(255, 255, 255, .16), rgba(255, 255, 255, .04) 34%, transparent 52%, rgba(0, 0, 0, .32));
  --emboss: 0 1px 0 rgba(0, 0, 0, .95), 0 -1px 0 rgba(255, 255, 255, .13);
  --lit: 0 0 10px rgba(255, 180, 74, .55), 0 0 22px rgba(255, 140, 40, .25);
}
html.frost body {
  font-family: var(--sans); font-weight: 500;
  /* The polar night: the aurora's glow along the top, a little sodium from the
     floods below, and frost grown into the screen's corners. */
  background:
    var(--frost-tl) 0 0 / 150px no-repeat, var(--frost-tr) 100% 0 / 150px no-repeat,
    var(--frost-bl) 0 100% / 150px no-repeat, var(--frost-br) 100% 100% / 150px no-repeat,
    radial-gradient(ellipse 90% 40% at 50% -6%, rgba(108, 242, 154, .1), transparent 70%),
    radial-gradient(ellipse 70% 30% at 70% -4%, rgba(42, 216, 200, .07), transparent 70%),
    radial-gradient(ellipse 90% 35% at 50% 108%, rgba(255, 180, 74, .08), transparent 70%),
    linear-gradient(#0b1424, #070b12 45%, #05080f);
  background-color: var(--bg);
}
html.frost button { font-family: var(--sans); font-weight: 700; }
html.frost .stage-error { color: var(--muted); font-family: var(--log); }
html.frost .card h1, html.frost .card button, html.frost .mg-btn, html.frost .mg-card h2, html.frost .mg-result h3, html.frost .mhead h2,
html.frost .mgroup, html.frost .mguide h3, html.frost #turns, html.frost .toast, html.frost .fx-item b, html.frost .fx-badge span {
  font-family: var(--display); font-weight: 600; letter-spacing: .04em;
}
html.frost .overlay { background: rgba(2, 5, 10, .86); }

/* ---- Polar Night: what's shared ---- */
/* Dymo tape: white capitals embossed on black plastic, the ends cut square. */
html.frost .card h1, html.frost .mg-card h2, html.frost .mg-result h3, html.frost .mgroup, html.frost .mtabs button, html.frost .idea-card h2,
html.frost .ss h1, html.frost .turns .label, html.frost .mentry header small, html.frost .tool-btn .tcount, html.frost .tally-item .gain,
html.frost .ss-chip, html.frost .ss-here, html.frost .ss-pick, html.frost .id-waiting, html.frost .toast, html.frost .tool-btn .tname {
  font-family: var(--display); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; line-height: 1;
  color: #f4f4ef; background: var(--tape-face), var(--tape); text-shadow: var(--emboss);
  border: 0; border-radius: 1px; box-shadow: 1px 2px 0 rgba(0, 0, 0, .5);
}
/* Panels: blue-black glass in a bolted frame of orange steel, frost grown into
   the top corners and rime along the frame's top (like panelBg in gfx.js). */
html.frost .card, html.frost .mg-card, html.frost .idea-card, html.frost .ss-card {
  border: 6px solid transparent; border-radius: 10px;
  background:
    var(--frost-tl) 0 0 / var(--fc, 110px) no-repeat padding-box, var(--frost-tr) 100% 0 / var(--fc, 110px) no-repeat padding-box,
    var(--glass) padding-box, var(--rime), var(--bolts), var(--steel-o) border-box;
  box-shadow: 0 0 0 1.5px var(--ink), inset 0 0 0 1.5px var(--ink), inset 0 3px 12px rgba(0, 0, 0, .55), 0 7px 0 rgba(0, 0, 0, .5), 0 14px 34px rgba(0, 0, 0, .5);
}
/* Rubber keys: international orange for the main button, set in a dark rim on
   a deep lip, glossy along the top, rime on the upper edge. */
html.frost .card button, html.frost .mg-btn, html.frost .ss-gold, html.frost .idea-actions .idea-save {
  color: #1a0904; text-shadow: 0 1px 0 rgba(255, 210, 180, .35);
  background: var(--rime), var(--gloss), var(--key-o);
  border: 2px solid #2a0e04; border-radius: 9px;
  box-shadow: 0 5px 0 #4a1606, 0 7px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html.frost .card button, html.frost .mg-btn {
  padding: 13px 14px 9px; font-size: 27px; line-height: 1; letter-spacing: .07em; text-transform: uppercase;
}
html.frost .card button:active, html.frost .mg-btn:active, html.frost .mg-btn.held {
  transform: translateY(3px); box-shadow: 0 2px 0 #4a1606, 0 3px 6px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html.frost .mg-btn.held { filter: brightness(1.1); }
html.frost .mg-btn.empty { filter: grayscale(.9) brightness(.7); }

/* ---- Polar Night: the dive ---- */
/* The drill's instrument strips: orange-framed dark glass, the turns lit
   sodium amber in Teko under a strip of Dymo tape, the haul with its icons,
   what this dive has added on green tape, and the manual a gauge. */
html.frost #dive .hud { gap: 7px; padding-top: 2px; }
html.frost #dive .turns, html.frost #dive .tally {
  position: relative; border: 5px solid transparent; border-radius: 6px;
  background: var(--frost-tl) 0 0 / 44px no-repeat padding-box, var(--glass) padding-box, var(--rime), var(--bolts), var(--steel-o) border-box;
  box-shadow: 0 0 0 1.5px var(--ink), inset 0 0 0 1.5px #000, inset 0 2px 10px rgba(0, 0, 0, .6), 0 4px 0 rgba(0, 0, 0, .5);
}
html.frost #dive .turns { min-width: 68px; padding: 17px 6px 2px; justify-content: center; }
html.frost .turns .label {
  position: absolute; top: 1px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  padding: 3px 6px 1px; font-size: 13px; letter-spacing: .14em; color: #f4f4ef;
}
html.frost #turns {
  font-size: 44px; line-height: .86; padding-top: 4px; letter-spacing: .02em;
  color: var(--sodium); text-shadow: var(--lit); font-variant-numeric: tabular-nums;
}
html.frost .turns.low #turns { color: #ff5a4a; text-shadow: 0 0 10px rgba(255, 70, 50, .8), 0 0 22px rgba(255, 40, 20, .4); animation: blink .9s steps(2, start) infinite; }
html.frost #dive .tally { padding: 6px 4px 4px; gap: 6px 2px; }
html.frost .tally-item { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1; gap: 3px; color: var(--text); font-variant-numeric: tabular-nums; }
html.frost .tally-item .total { padding-top: 4px; }
html.frost .tally-item img { width: 23px; height: 23px; }
html.frost .tally-item .gain {
  top: -9px; right: -6px; z-index: 1; padding: 3px 4px 0; font-size: 13px; letter-spacing: .06em; line-height: 1;
  background: var(--tape-face), #1e7a3e; transform: rotate(-4deg);
}
html.frost .tally-item .gain.pop { animation: frost-punch .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes frost-punch { from { transform: rotate(-12deg) scale(1.9); } to { transform: rotate(-4deg) scale(1); } }
/* The manual: a gauge, a pale dial in a steel bezel, its scale round the rim
   and a red mark at the top right (like the hub's gauge buttons). */
html.frost .manual-btn {
  position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #f2f6f8 0 60%, transparent 61%),
    conic-gradient(from 135deg, #dfe6eb 0 90deg, transparent 0),
    conic-gradient(from 18deg, #e0401a 0 70deg, transparent 0),
    repeating-conic-gradient(from 224deg, #2a333c 0 2.4deg, transparent 2.4deg 27deg),
    linear-gradient(#f2f6f8, #d4dde4);
  box-shadow: 0 0 0 1px #1a2128, 0 0 0 4px #6a7681, 0 -1.5px 0 4px #aab4bd, 0 0 0 5.5px var(--ink), 0 4px 0 5.5px #020305;
  margin: 6px 6px 8px 4px;
}
html.frost .manual-btn.small { width: 40px; height: 40px; align-self: center; }
html.frost .manual-btn .ico { width: 22px; height: 22px; position: relative; }
html.frost .manual-btn:active { transform: translateY(2px); }
/* The line over the board: the dive's notes typed into the log, a tool's prompt in lit capitals. */
html.frost #chain-info {
  min-height: 34px; padding: 7px 4px 4px; font-family: var(--display); font-weight: 600; font-size: 21px; line-height: 1.05;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
html.frost #chain-info.ok { color: var(--sodium); text-shadow: 0 0 12px rgba(255, 180, 74, .45); }
html.frost #chain-info.notes { font-family: var(--log); font-weight: 400; font-size: 12.5px; letter-spacing: 0; text-transform: none; line-height: 1.4; color: #a9bccb; }
/* The board is the borehole camera's monitor: a heavy steel bezel 12px wide
   all round (outside the drawing, box-sizing: content-box), bolted, with an
   orange lip round the picture and an orange rim outside; frost crept in at
   its corners, REC and the camera along the top, and a running timecode along
   the bottom. The wrap is a one-cell grid the size of the board, so the frost
   and the readouts can lie over it (they let touches through). */
html.frost .board-wrap { display: grid; grid-template: max-content / max-content; place-content: center; place-items: stretch; margin: 3px 0 4px; }
html.frost #board {
  grid-area: 1 / 1; box-sizing: content-box;
  border: 12px solid transparent; border-radius: 9px;
  background:
    linear-gradient(#0b1219, #0b1219) padding-box,
    linear-gradient(#ff5a1f, #ff5a1f) 10.5px 10.5px / calc(100% - 21px) calc(100% - 21px) no-repeat border-box,
    var(--bolt) 1px 1px / 10px 10px no-repeat border-box, var(--bolt) calc(100% - 1px) 1px / 10px 10px no-repeat border-box,
    var(--bolt) 1px calc(100% - 1px) / 10px 10px no-repeat border-box, var(--bolt) calc(100% - 1px) calc(100% - 1px) / 10px 10px no-repeat border-box,
    var(--rime),
    linear-gradient(90deg, rgba(255, 255, 255, .06), transparent 14% 86%, rgba(0, 0, 0, .25)) border-box,
    linear-gradient(#5e6a75, #3a444e 22%, #252d35 70%, #1a2027) border-box;
  box-shadow: 0 0 0 2.5px #ff5a1f, 0 0 0 4px var(--ink), inset 0 0 0 1px rgba(0, 0, 0, .7), 0 10px 26px rgba(0, 0, 0, .6);
}
html.frost .board-wrap::before, html.frost .board-wrap::after { grid-area: 1 / 1; z-index: 1; pointer-events: none; text-shadow: 0 0 3px #05080c, 0 1px 1px #05080c; }
html.frost .board-wrap::before {
  content: 'REC'; align-self: start; justify-self: start; z-index: 2;
  height: 12px; margin-left: 13px; padding-left: 12px;
  font: 600 13px/13px var(--display); letter-spacing: .16em; color: #c3d2dd;
  background: radial-gradient(circle at 4.5px 5.5px, #ff3b2a 0 3px, rgba(255, 59, 42, .35) 3.6px, transparent 5px) no-repeat;
  animation: frost-rec 1.4s steps(1) infinite;
}
@keyframes frost-rec { 50% { background-position: -30px 0; } }
html.frost .board-wrap::after {
  content: 'CAM\00a0' '2\00a0\00a0' counter(frost-min, decimal-leading-zero) ':' counter(frost-sec, decimal-leading-zero);
  counter-reset: frost-min var(--frost-min) frost-sec var(--frost-sec);
  animation: frost-sec 60s steps(60) infinite, frost-min 3600s steps(60) infinite;
  padding: 0 15px; text-align: right; white-space: nowrap; overflow: hidden;
  font: 600 13px/13px var(--display); letter-spacing: .16em; color: #c3d2dd;
  border-radius: 9px;
  background:
    var(--frost-tl) 0 0 / 76px no-repeat, var(--frost-tr) 100% 0 / 76px no-repeat,
    var(--frost-bl) 0 100% / 84px no-repeat, var(--frost-br) 100% 100% / 84px no-repeat,
    radial-gradient(ellipse at 50% 45%, transparent 64%, rgba(2, 6, 10, .38) 100%) 12px 12px / calc(100% - 24px) calc(100% - 24px) no-repeat;
}
@property --frost-sec { syntax: '<integer>'; inherits: false; initial-value: 0; }
@property --frost-min { syntax: '<integer>'; inherits: false; initial-value: 0; }
@keyframes frost-sec { from { --frost-sec: 0; } to { --frost-sec: 60; } }
@keyframes frost-min { from { --frost-min: 0; } to { --frost-min: 60; } }
/* The tools: gunmetal rubber keys, each named on a strip of Dymo tape; the one
   being aimed lit orange and pressed in. */
html.frost .toolbar { gap: 7px; padding: 12px 1px 4px; }
html.frost .tool-btn {
  flex: 1 1 0; min-width: 66px; min-height: 62px; padding: 6px 4px 6px; gap: 4px; justify-content: center;
  color: var(--text); background: var(--rime), var(--gloss), var(--gun);
  border: 2px solid #0b0f13; border-radius: 9px;
  box-shadow: 0 5px 0 #080b0e, 0 7px 12px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .14);
}
html.frost .tool-btn .ico { width: 30px; height: 30px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
html.frost .tool-btn .tname {
  padding: 3px 4px 1px; font-size: 12.5px; letter-spacing: .07em; white-space: normal; text-align: center; line-height: .95;
  max-width: 100%; transform: rotate(-1deg);
}
html.frost .tool-btn .tcount {
  top: -9px; right: -5px; padding: 3px 5px 1px; font-size: 14px; letter-spacing: .04em;
  background: var(--tape-face), #d9481a; transform: rotate(4deg);
}
html.frost .tool-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 2px 0 #080b0e, inset 0 1px 0 rgba(255, 255, 255, .14); }
html.frost .tool-btn.aiming {
  background: var(--rime), var(--gloss), var(--key-o); border-color: #2a0e04; transform: translateY(3px);
  box-shadow: 0 2px 0 #4a1606, 0 0 0 3px rgba(255, 180, 74, .35), 0 0 18px rgba(255, 140, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html.frost .tool-btn.aiming .tcount { background: var(--tape-face), var(--tape); }

/* ---- Polar Night: the Core Log ---- */
/* The haul is logged on a sheet typed in Special Elite, clipped to a clipboard
   of cold steel: its heading a strip of Dymo tape stuck on the clip, each ore a
   ruled row, what this dive added typed in the ribbon's red, frost grown into
   the board's corners. */
html.frost .results { background: rgba(2, 5, 10, .8); }
html.frost .results .card {
  position: relative; z-index: 0; max-width: 350px; margin-top: 14px; padding: 30px 12px 14px;
  border: 0; border-radius: 12px;
  background:
    var(--frost-tl) 0 0 / 120px no-repeat, var(--frost-br) 100% 100% / 120px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #75828d, #56626e 30%, #424d57 65%, #343e48);
  box-shadow: 0 0 0 1.5px var(--ink), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 0 rgba(0, 0, 0, .35),
    0 9px 0 rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .6);
  animation: frost-clip .35s cubic-bezier(.25, 1.4, .45, 1) both;
}
@keyframes frost-clip { from { transform: translateY(26px); opacity: 0; } }
/* The clip, riveted to the board. */
html.frost .results .card::before {
  content: ''; position: absolute; z-index: -1; top: -14px; left: 50%; width: 176px; height: 46px; transform: translateX(-50%);
  border-radius: 10px 10px 6px 6px;
  background:
    radial-gradient(circle at 12px 50%, #e8edf0 0 2.2px, #3a444e 2.8px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 12px) 50%, #e8edf0 0 2.2px, #3a444e 2.8px, transparent 3.4px),
    var(--rime), linear-gradient(#d3dbe1, #9aa6b0 40%, #6a7681 75%, #4b5661);
  box-shadow: 0 0 0 1.5px var(--ink), inset 0 1px 0 #fff, 0 4px 0 rgba(0, 0, 0, .4);
}
html.frost .results .card h1 {
  display: table; position: relative; margin: -24px auto 16px; padding: 5px 13px 1px;
  font-size: 26px; letter-spacing: .14em; transform: rotate(-1.5deg);
}
/* The log sheet: cold white paper, ruled in blue with a red margin, typed. */
html.frost .results .card ul {
  position: relative; margin: 0 0 10px; padding: 28px 10px 6px 30px; border-radius: 2px;
  font-family: var(--log); color: #1d2228;
  background:
    linear-gradient(90deg, transparent 23px, rgba(179, 32, 26, .55) 23px 24.5px, transparent 24.5px),
    radial-gradient(ellipse at 90% 8%, rgba(120, 150, 170, .12), transparent 45%),
    linear-gradient(#eef2f4, #e2e9ed);
  box-shadow: 0 0 0 1px rgba(5, 8, 12, .55), 0 3px 0 rgba(0, 0, 0, .35);
}
/* The sheet's printed column heads, the dive's under the red figures. */
html.frost .results .card ul::before, html.frost .results .card ul::after {
  position: absolute; top: 9px; font-size: 10.5px; line-height: 13px; letter-spacing: .06em; color: #5b6670; white-space: pre;
}
html.frost .results .card ul::before {
  content: 'SAMPLE'; left: 30px; right: 10px; padding-bottom: 2px; border-bottom: 1.5px solid rgba(29, 34, 40, .6);
}
html.frost .results .card ul::after { content: '+DIVE  STORE'; right: 10px; }
html.frost .card li { gap: 8px; padding: 3px 0 2px; border-bottom: 1px solid rgba(60, 110, 170, .3); font-size: 15px; line-height: 1.2; }
html.frost .card li img { width: 26px; height: 26px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .25)); }
html.frost .card li .name { letter-spacing: -.01em; }
html.frost .card li .gain { min-width: 38px; padding: 0; text-align: right; font-size: 15px; font-weight: 400; color: #b3201a; background: none; border-radius: 0; }
html.frost .card li .qty { min-width: 46px; font-weight: 400; font-size: 15px; }
html.frost #results-extra { margin: 0 2px 12px; color: #e6ecef; font-family: var(--log); font-size: 12.5px; text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
@media (max-height: 700px) {
  html.frost .results .card { padding-top: 26px; padding-bottom: 12px; }
  html.frost .results .card h1 { margin-bottom: 12px; font-size: 24px; }
  html.frost .card li { padding: 1px 0; }
  html.frost .card li img { width: 23px; height: 23px; }
  html.frost .card button { padding-top: 11px; padding-bottom: 7px; }
}

/* ---- Polar Night: the mini games ---- */
/* The furnace's and the mill's controls on a panel of orange steel and glass:
   the title on Dymo tape, readouts in little instrument windows lit sodium, the
   progress a glass tube, the result a pane laid over with its verdict punched
   on tape. (The scene canvas is drawn by the frost mini games.) */
html.frost .mg-card { max-width: 384px; padding: 12px 12px 16px; }
html.frost .mg-card h2 { display: table; margin: 0 auto 10px; padding: 5px 12px 1px; font-size: 23px; transform: rotate(-1deg); }
html.frost .mg-help { margin: 0 2px 12px; font-size: 13px; line-height: 1.4; color: #a9bccb; }
html.frost .mg-card:has(.mg-scene) .gauge, html.frost .mg-card:has(.mg-scene) .furnace-mouth { display: none; }
html.frost .mg-card:has(.mg-scene) .heat-side { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 7px; }
html.frost .mg-card:has(.mg-scene) .heat-wrap { margin-bottom: 12px; }
html.frost .mg-scene { display: flex; justify-content: center; margin: 4px 0 14px; }
html.frost .mg-scene canvas {
  display: block; max-width: 100%; border-radius: 6px; background: #0b1219;
  box-shadow: 0 0 0 3px #2a333c, 0 0 0 5px #ff5a1f, 0 0 0 6.5px var(--ink), 0 6px 14px rgba(0, 0, 0, .5);
}
html.frost .mg-stat {
  padding: 4px 11px 3px; border: 2px solid #3a4a59; border-radius: 6px;
  background: var(--frost-tl) 0 0 / 30px no-repeat, var(--glass);
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, .6), 0 2px 0 rgba(0, 0, 0, .4);
}
html.frost .mg-stat span { font-family: var(--display); font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .12em; color: var(--muted); padding-top: 2px; }
html.frost .mg-stat b { font-family: var(--display); font-weight: 600; font-size: 28px; line-height: .95; letter-spacing: .03em; color: var(--sodium); text-shadow: var(--lit); }
html.frost .mg-stat.paused b { color: var(--danger); text-shadow: 0 0 10px rgba(255, 70, 50, .7); }
html.frost .mg-coal img { width: 34px; height: 34px; }
/* The classic gauge, when there's no scene: a thermometer in a steel tube. */
html.frost .gauge {
  border: 3px solid #252d35; border-radius: 10px;
  background: linear-gradient(to top, #10283e, #2c6a96 22%, #4a1c0c 48%, #c8400f 70%, #ff8a4a 86%, #ffe0a0);
  box-shadow: 0 0 0 2px #ff5a1f, 0 0 0 3.5px var(--ink), inset 0 0 12px rgba(0, 0, 0, .5);
}
html.frost .gauge .band { background: rgba(255, 224, 160, .25); border-color: #ffe0a0; }
html.frost .gauge .needle { border-color: var(--ink); border-radius: 2px; }
html.frost .gauge .needle.good { background: var(--good); }
html.frost .furnace-mouth { border: 4px solid #36404a; box-shadow: 0 0 0 2px var(--ink), 0 0 26px rgba(255, 140, 40, .45); }
html.frost .mg-bar { height: 14px; margin: 0 0 10px; border: 2px solid #3a4a59; border-radius: 7px; background: linear-gradient(#05080c, #0e161e); box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); }
html.frost .mg-bar i { border-radius: 5px; background: linear-gradient(rgba(255, 255, 255, .35), transparent 45%), linear-gradient(90deg, #c8400f, #ff8a4a 70%, #ffb44a); box-shadow: 0 0 12px rgba(255, 140, 40, .55); }
html.frost .mg-status { min-height: 22px; margin: 0 0 10px; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.1; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
html.frost .mg-status.good { color: var(--good); text-shadow: 0 0 10px rgba(108, 242, 154, .4); }
html.frost .mg-status.hot { color: var(--sodium); }
html.frost .mg-status.bad { color: var(--danger); }
html.frost .gain-ring { --fill: var(--accent); --track: rgba(255, 255, 255, .12); }
html.frost .gain-ring::before { background: #0e161e; }
html.frost .mg-gain .gain-ring { --fill: #ff7a2e; }
html.frost .mg-gain .gain-ring.rush { --fill: #ffe0a0; box-shadow: 0 0 0 2px var(--sodium), 0 0 14px 3px rgba(255, 180, 74, .8); }
html.frost .gain-ring.max, html.frost .mg-gain .gain-ring.max { --fill: var(--good); box-shadow: 0 0 14px rgba(108, 242, 154, .55); }
html.frost .mg-gain .gain-ring { width: 40px; height: 40px; }
/* The mill takes the whole screen: the night behind, frost in its corners, the bed in a steel bezel. */
html.frost .mg-card.mill-screen {
  max-width: none; border: 0; border-radius: 0; box-shadow: none;
  padding: calc(env(safe-area-inset-top) + 8px) 8px calc(env(safe-area-inset-bottom) + 12px);
  background:
    var(--frost-tl) 0 0 / 150px no-repeat, var(--frost-tr) 100% 0 / 150px no-repeat,
    var(--frost-bl) 0 100% / 150px no-repeat, var(--frost-br) 100% 100% / 150px no-repeat,
    radial-gradient(ellipse 90% 40% at 50% -6%, rgba(108, 242, 154, .08), transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(255, 150, 60, .1), transparent 70%),
    linear-gradient(#0b1424, #070b12 50%, #05080f);
}
html.frost #mg-mill {
  border: 6px solid #2a333c; border-radius: 8px; background: #0b1219;
  box-shadow: 0 0 0 2px #ff5a1f, 0 0 0 3.5px var(--ink), 0 8px 22px rgba(0, 0, 0, .6);
}
html.frost .mill-screen .mg-btn { padding: 16px 14px 11px; font-size: 32px; letter-spacing: .12em; }
html.frost .mg-result {
  border-radius: 4px; color: var(--text);
  background: var(--frost-tl) 0 0 / 110px no-repeat, var(--frost-br) 100% 100% / 110px no-repeat, rgba(9, 15, 21, .97);
  animation: fade .25s ease;
}
html.frost .mill-screen .mg-result { border-radius: 0; background: var(--frost-tl) 0 0 / 150px no-repeat, var(--frost-br) 100% 100% / 150px no-repeat, rgba(7, 11, 18, .95); }
html.frost .mg-result h3 {
  padding: 7px 16px 2px; font-size: 32px; letter-spacing: .12em; transform: rotate(-2deg);
  animation: frost-punch-h .4s .05s cubic-bezier(.3, 1.6, .5, 1) both;
}
@keyframes frost-punch-h { from { transform: rotate(-9deg) scale(1.8); opacity: 0; } to { transform: rotate(-2deg) scale(1); opacity: 1; } }
html.frost .mg-result:has(.fx-side.bad) h3 { background: var(--tape-face), #b3201a; }
html.frost .mg-result p { color: var(--muted); }
html.frost .mg-result .mg-btn { max-width: 300px; }
html.frost .fx { gap: 12px; }
html.frost .fx-item {
  padding: 4px 11px 4px 5px; border: 2px solid #3a4a59; border-radius: 6px;
  background: var(--frost-tl) 0 0 / 34px no-repeat, var(--glass); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5), 0 2px 0 rgba(0, 0, 0, .4);
}
html.frost .fx-item b { font-size: 27px; line-height: 1; padding-top: 4px; color: var(--text); }
html.frost .fx-side.out .fx-item { border-color: #ff5a1f; box-shadow: 0 0 0 1.5px var(--ink), 0 0 20px rgba(255, 140, 40, .35), inset 0 2px 8px rgba(0, 0, 0, .5); }
html.frost .fx-side.out .fx-item b { font-size: 36px; color: var(--sodium); text-shadow: var(--lit); }
html.frost .fx-side.out.bad .fx-item { border-color: var(--danger); box-shadow: none; }
html.frost .fx-side.out.bad .fx-item b { color: var(--text); text-shadow: none; }
html.frost .fx-badge span { color: #1a0904; padding-top: 4px; }

/* ---- Polar Night: the manual ---- */
/* The station's field manual: dark glass in an orange steel frame, its pages
   typed in Special Elite under Teko headings, the tabs and the groups strips of
   Dymo tape (the open tab orange), the entries index cards of glass. */
html.frost .mpanel {
  border: 5px solid transparent;
  background:
    var(--frost-tl) 0 0 / 140px no-repeat padding-box, var(--frost-tr) 100% 0 / 140px no-repeat padding-box,
    var(--frost-bl) 0 100% / 76px no-repeat padding-box, var(--frost-br) 100% 100% / 76px no-repeat padding-box,
    var(--glass) padding-box, var(--rime), var(--bolts), var(--steel-o) border-box;
  box-shadow: inset 0 0 0 1.5px var(--ink), 0 0 0 1.5px var(--ink);
  padding: calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 4px);
}
html.frost .mhead { padding: 4px 0 2px 14px; }
html.frost .mhead h2 {
  display: flex; align-items: center; gap: 9px; padding: 6px 14px 2px 0; font-size: 25px; letter-spacing: .13em; line-height: 1; text-transform: uppercase;
  color: #f4f4ef; background: var(--tape-face), var(--tape); text-shadow: var(--emboss); box-shadow: 1px 2px 0 rgba(0, 0, 0, .5); transform: rotate(-1deg);
}
/* The book on a riveted steel tag at the tape's end, like the rig's labels. */
html.frost .mhead h2 .ico {
  width: 38px; height: 38px; padding: 5px; margin: -9px 0 -7px -14px; flex: none; vertical-align: 0; border-radius: 5px;
  background: radial-gradient(circle at 5px 5px, #dfe5ea 0 1.2px, transparent 1.8px), radial-gradient(circle at calc(100% - 5px) calc(100% - 5px), #dfe5ea 0 1.2px, transparent 1.8px),
    linear-gradient(#8a96a0, #56626e 55%, #3a444e);
  box-shadow: 0 0 0 1.5px var(--ink), inset 0 1px 0 rgba(255, 255, 255, .4), 1px 2px 0 rgba(0, 0, 0, .5);
}
html.frost .mclose {
  width: 44px; height: 44px; flex: none; font-size: 19px; color: var(--text);
  background: var(--rime), var(--gloss), var(--gun); border: 2px solid #0b0f13; border-radius: 9px;
  box-shadow: 0 4px 0 #080b0e, inset 0 1px 0 rgba(255, 255, 255, .14);
}
html.frost .mclose:active { transform: translateY(2px); box-shadow: 0 2px 0 #080b0e; }
html.frost .mtabs { gap: 8px; padding: 14px 4px 10px; }
html.frost .mtabs button { padding: 6px 9px 2px; font-size: 18px; letter-spacing: .1em; transform: rotate(-1.2deg); }
html.frost .mtabs button:nth-child(even) { transform: rotate(.9deg); }
html.frost .mtabs button.on { background: var(--tape-face), #d9481a; color: #fff; transform: rotate(-1.2deg) translateY(-1px); box-shadow: 1px 3px 0 rgba(0, 0, 0, .55), 0 0 14px rgba(255, 110, 40, .35); }
html.frost .msearch {
  padding: 10px 12px; font: 500 16px var(--sans); color: var(--text);
  background: linear-gradient(#05080c, #0e161e); border: 2px solid #3a4a59; border-radius: 7px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}
html.frost .msearch::placeholder { color: #6f8191; }
html.frost .msearch:focus { outline: none; border-color: var(--accent); }
html.frost .mbody { padding: 2px 4px 30px; font-family: var(--log); color: #dfe8ee; }
html.frost .mbody p, html.frost .mbody li { font-size: 14px; line-height: 1.55; }
html.frost .mbody b { font-weight: 400; color: var(--sodium); }
html.frost .mguide h3 {
  margin: 22px 0 8px; padding-bottom: 3px; font-size: 27px; line-height: 1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent); border-bottom: 1.5px dashed rgba(143, 227, 255, .25);
}
html.frost .mguide h3:first-child, html.frost .mbody > .mgroup:first-child { margin-top: 8px; }
html.frost .mgroup { display: table; margin: 22px 0 10px; padding: 5px 11px 1px; font-size: 20px; transform: rotate(-1deg); }
html.frost .mguide ol > li::marker { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--accent); }
html.frost .mguide ul > li::marker { color: var(--accent); }
html.frost .mentry {
  padding: 10px 12px 12px; margin-bottom: 10px; border: 1.5px solid #34444f; border-radius: 6px;
  background: var(--frost-tr) 100% 0 / 60px no-repeat, linear-gradient(#141e28, #0c131a);
  box-shadow: inset 3px 0 0 #ff5a1f, 0 3px 0 rgba(0, 0, 0, .45);
}
html.frost .mentry header .ico.big { width: 42px; height: 42px; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
html.frost .mentry h4 { font: 600 23px/1 var(--display); letter-spacing: .04em; color: var(--text); padding-top: 3px; }
html.frost .mentry header small { display: inline-block; margin-top: 3px; padding: 3px 6px 0; font-size: 12.5px; letter-spacing: .12em; color: #f4f4ef; }
html.frost .mentry.flash { animation: frost-flash 1.4s ease; }
@keyframes frost-flash { 0%, 40% { border-color: var(--accent); box-shadow: inset 3px 0 0 #ff5a1f, 0 0 0 2px var(--accent), 0 0 18px rgba(255, 110, 40, .45); } }
html.frost .mrow { margin-top: 7px; }
html.frost .mlabel { font: 600 14px/1 var(--display); letter-spacing: .12em; color: var(--ice); }
html.frost .mlink {
  gap: 4px; margin: 2px 4px 2px 0; padding: 1px 8px 1px 3px; border-radius: 4px; vertical-align: middle;
  font: 500 13px var(--sans); color: var(--text); background: linear-gradient(#26313b, #1a232c); border: 1px solid #3e4e5c;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
html.frost .mlink b { font: 600 16px/1 var(--display); color: var(--sodium); padding-top: 2px; }
html.frost .mlink:active { background: #33414d; }
html.frost .mtier { border-top: 1.5px dashed rgba(143, 227, 255, .2); }
html.frost .mtier b { color: var(--text); }
html.frost .mtable { border: 1.5px solid #34444f; background: rgba(5, 8, 12, .35); }
html.frost .mtable th { font: 600 15px/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--ice); background: rgba(143, 227, 255, .06); }
html.frost .mtable th, html.frost .mtable td { border-bottom: 1px dashed rgba(143, 227, 255, .16); }
html.frost .mtable.recipes td:nth-child(2) { color: var(--accent); }
html.frost .mbody > p.muted { color: var(--muted); }

/* ---- Polar Night: toasts, the idea tab and its sheet ---- */
/* A toast is punched on Dymo tape and fed out of the labeller a letter at a time. */
html.frost .toast {
  top: calc(env(safe-area-inset-top) + 62px); padding: 7px 16px 3px; font-size: 22px; letter-spacing: .13em;
  white-space: normal; width: max-content; max-width: min(380px, calc(100vw - 32px)); text-align: center; line-height: 1.05;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .7);
}
html.frost .toast.show { animation: frost-tape 2.1s ease; }
@keyframes frost-tape {
  0% { opacity: 1; clip-path: inset(0 100% 0 0); transform: translate(-50%, 0) rotate(-1.2deg); animation-timing-function: steps(9, end); }
  20% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(-50%, 0) rotate(-1.2deg); }
  80% { opacity: 1; clip-path: inset(0 0 0 0); transform: translate(-50%, 0) rotate(-1.2deg); }
  100% { opacity: 0; clip-path: inset(0 0 0 0); transform: translate(-50%, -6px) rotate(-1.2deg); }
}
/* The idea tab: an orange steel tab rimed with frost, the bulb in a glass window. */
html.frost .idea-tab {
  width: 36px; height: 52px; border: 1.5px solid #1a0904; border-left: 0; border-radius: 0 9px 9px 0; opacity: .94;
  background: var(--rime), var(--frost-tl) 0 0 / 30px no-repeat, linear-gradient(90deg, #b8360c, #ff7a3a 45%, #e8501a);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .2);
}
html.frost .idea-tab.right {
  border-left: 1.5px solid #1a0904; border-right: 0; border-radius: 9px 0 0 9px;
  background: var(--rime), var(--frost-tr) 100% 0 / 30px no-repeat, linear-gradient(270deg, #b8360c, #ff7a3a 45%, #e8501a);
}
html.frost .idea-tab img {
  width: 26px; height: 26px; padding: 2px; border-radius: 50%;
  background: radial-gradient(circle, #1c2a37, #091017); box-shadow: 0 0 0 1.5px #1a0904, inset 0 1px 4px rgba(0, 0, 0, .9);
}
html.frost .idea-sheet { background: rgba(2, 5, 10, .62); }
html.frost .idea-card { gap: 12px; padding: 14px; }
html.frost .idea-card h2 { justify-self: start; padding: 5px 12px 1px; font-size: 22px; transform: rotate(-1deg); }
html.frost .idea-card textarea, html.frost .ss textarea {
  border: 2px solid #3a4a59; border-radius: 7px; color: var(--text);
  background: linear-gradient(#05080c, #0e161e); box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
}
html.frost .idea-card textarea, html.frost .id-new textarea { font-family: var(--log); font-size: 16px; line-height: 1.45; }
html.frost .idea-card textarea:focus, html.frost .ss textarea:focus { outline: none; border-color: var(--accent); }
html.frost .idea-card textarea::placeholder, html.frost .ss textarea::placeholder { color: #6f8191; }
html.frost .idea-where { color: var(--muted); }
/* The keys on the sheets and pages: gunmetal rubber, orange for the main one. */
html.frost .idea-actions button, html.frost .ss-btn, html.frost .ss-tab {
  font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text); background: var(--rime), var(--gloss), var(--gun);
  border: 2px solid #0b0f13; border-radius: 9px;
  box-shadow: 0 4px 0 #080b0e, 0 6px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .14);
}
html.frost .idea-actions button, html.frost .ss-btn { padding-top: 12px; padding-bottom: 7px; }
html.frost .idea-actions button:active, html.frost .ss-btn:active, html.frost .ss-tab:active { transform: translateY(2px); box-shadow: 0 2px 0 #080b0e, inset 0 1px 0 rgba(255, 255, 255, .14); }
html.frost .ss-gold, html.frost .idea-actions .idea-save {
  color: #1a0904; background: var(--rime), var(--gloss), var(--key-o); border-color: #2a0e04;
  box-shadow: 0 4px 0 #4a1606, 0 6px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
html.frost .ss-gold:active, html.frost .idea-actions .idea-save:active { box-shadow: 0 2px 0 #4a1606, inset 0 1px 0 rgba(255, 255, 255, .35); }
html.frost .ss-btn:disabled { box-shadow: 0 2px 0 #080b0e; }

/* ---- Polar Night: the Styles and Ideas pages ---- */
/* The night with the aurora over it; cards of glass in steel (the working ones
   framed in orange), headings in Teko, the page's name on Dymo tape, filter
   chips on tape (the picked one orange), green rubber switches, and the tabs
   along the bottom rubber keys on a steel strip. */
html.frost.doc { background: var(--bg); }
html.frost.doc body.ss {
  background:
    var(--frost-tl) 0 0 / 170px no-repeat, var(--frost-tr) 100% 0 / 170px no-repeat,
    radial-gradient(ellipse 100% 380px at 50% -60px, rgba(108, 242, 154, .12), transparent 70%),
    radial-gradient(ellipse 60% 260px at 80% -40px, rgba(154, 106, 255, .08), transparent 70%),
    linear-gradient(#0b1424, var(--bg) 520px);
  background-color: var(--bg);
}
html.frost .ss { font-size: 15px; }
html.frost .ss h1 { padding: 7px 14px 2px; font-size: 32px; letter-spacing: .14em; transform: rotate(-1.5deg); }
html.frost .ss h2 { font-size: 32px; line-height: 1; letter-spacing: .05em; text-transform: uppercase; color: var(--accent); padding-top: 4px; }
html.frost .ss-head h2 { flex: 1 1 auto; border-bottom: 2px solid var(--panel-edge); box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }
html.frost .ss h3 { font-size: 25px; letter-spacing: .05em; text-transform: uppercase; padding-top: 3px; }
html.frost .ss h4 { font-size: 21px; letter-spacing: .05em; text-transform: uppercase; padding-top: 2px; }
html.frost .ss-status, html.frost .ss-copied { color: var(--sodium); }
html.frost .ss-btn span[aria-hidden] { font-family: var(--sans); font-size: 24px; margin-top: -4px; }
html.frost .ss-style {
  border: 2px solid #34444f; border-radius: 8px;
  background: var(--frost-tl) 0 0 / 64px no-repeat, linear-gradient(#141e28, #0c131a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 3px 0 rgba(0, 0, 0, .45);
}
html.frost .ss-style-text b, html.frost .ss-style-text h3 { font-family: var(--display); }
html.frost .ss-swatch i { border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .06); }
html.frost .ss-card { --fc: 84px; padding: 14px; }
html.frost .ss-preview { --fc: 56px; padding: 0; }
/* The ideas in the lists are cards of glass in steel, like the styles. */
html.frost .ss-card.ss-idea, html.frost .ss-card.id-idea {
  border: 2px solid #34444f; border-radius: 8px;
  background: var(--frost-tr) 100% 0 / 64px no-repeat, linear-gradient(#141e28, #0c131a);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 3px 0 rgba(0, 0, 0, .45);
}
html.frost .ss-card.ss-idea.used { border-color: var(--accent); box-shadow: inset 4px 0 0 #ff5a1f, 0 3px 0 rgba(0, 0, 0, .45), 0 0 14px rgba(255, 110, 40, .25); }
html.frost .ss-preview-head { font: 600 16px/1 var(--display); letter-spacing: .12em; border-bottom: 2px solid #34444f; padding: 12px 14px 8px; }
html.frost .ss #prompt { background: rgba(5, 8, 12, .55); color: #d6e2ea; }
html.frost .ss #prompt b { color: var(--sodium); }
html.frost .ss-field > label:not(.ss-choice), html.frost .ss-field > legend, html.frost .id-new > label { font: 600 20px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--text); padding-top: 3px; }
/* Lettering that lies over the frost in a card's corner gets a dark halo. */
html.frost .ss-card :is(h3, h4, label, legend, .ss-idea-top, .ss-preview-head), html.frost .idea-card .idea-where, html.frost .mg-help {
  text-shadow: 0 1px 1px rgba(0, 0, 0, .9), 0 0 6px rgba(5, 8, 12, .95);
}
html.frost .ss-choice { border: 2px solid #34444f; border-radius: 7px; background: linear-gradient(#141e28, #0c131a); }
html.frost .ss-choice b { font-weight: 700; }
html.frost .ss-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 4px 0 0 #ff5a1f, 0 0 12px rgba(255, 110, 40, .2); }
html.frost .ss-tick input, html.frost .ss-choice input { accent-color: #ff6a2a; }
html.frost .ss-chip { min-height: 36px; padding: 8px 11px 4px; font-size: 17px; letter-spacing: .1em; }
html.frost .ss-chip:nth-child(3n + 1) { transform: rotate(-1deg); }
html.frost .ss-chip:nth-child(3n + 2) { transform: rotate(.8deg); }
html.frost .ss-chip[aria-pressed="true"] { color: #fff; background: var(--tape-face), #d9481a; box-shadow: 1px 2px 0 rgba(0, 0, 0, .5), 0 0 12px rgba(255, 110, 40, .3); }
html.frost .ss-here { margin-left: 6px; padding: 3px 7px 1px; font-size: 13px; vertical-align: 2px; background: var(--tape-face), #1e7a3e; }
html.frost .ss-pick { padding: 3px 7px 1px; font-size: 13px; background: var(--tape-face), #d9481a; }
html.frost .id-waiting { padding: 3px 7px 1px; font-size: 13px; color: #1a1406; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); background: var(--tape-face), #f2c230; }
html.frost .ss-idea-top, html.frost .ss-idea dt { font: 600 14px/1 var(--display); letter-spacing: .12em; color: var(--ice); }
html.frost .ss-idea summary { color: var(--accent); }
/* The switch: green rubber when it's on, a square steel knob. */
html.frost .ss-switch span { width: 52px; height: 28px; border-radius: 7px; background: #0c141b; border: 2px solid #2e3d4c; box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7); }
html.frost .ss-switch span::after { width: 20px; height: 20px; border-radius: 4px; background: linear-gradient(#9aa6b0, #56626e); box-shadow: 0 0 0 1.5px var(--ink), inset 0 1px 0 rgba(255, 255, 255, .4); }
html.frost .ss-switch input:checked + span { background: var(--gloss), var(--key-g); border-color: #0b3a1e; box-shadow: 0 0 10px rgba(108, 242, 154, .3); }
html.frost .ss-switch input:checked + span::after { transform: translateX(24px); background: linear-gradient(#9aa6b0, #56626e); }
html.frost .ss-switch b { font: 600 19px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; padding-top: 3px; }
html.frost .ss-nav {
  background: var(--rime), linear-gradient(#2a333c, #161c22 40%, #0e1318);
  border-top: 3px solid #ff5a1f; box-shadow: 0 -1.5px 0 var(--ink), 0 -8px 20px rgba(0, 0, 0, .4);
}
html.frost .ss-tab { gap: 7px; font-size: 20px; letter-spacing: .05em; padding-top: 4px; }
@media (max-width: 400px) { html.frost .ss-tab { gap: 5px; font-size: 18.5px; letter-spacing: .03em; } }
html.frost .ss-tab img { margin-top: -4px; }
html.frost .ss-tab.on { color: #1a0904; background: var(--rime), var(--gloss), var(--key-o); border-color: #2a0e04; box-shadow: 0 4px 0 #4a1606, inset 0 1px 0 rgba(255, 255, 255, .35); }
html.frost .id-text { font-family: var(--log); font-size: 15.5px; line-height: 1.45; }
html.frost .id-meta { font-size: 13px; }
html.frost .id-idea.done .id-text { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  html.frost .board-wrap::before { animation: none; }
  html.frost .toast.show { animation: fade 2s ease reverse; }
  html.frost .results .card, html.frost .mg-result h3, html.frost .tally-item .gain.pop { animation: none; }
}

/* ---- Kombinat style (see style.js and the plan-* files) ----------------------------
   A state mining combine as its own constructivist propaganda poster: bone
   poster paper gone grey with soot, black and signal red laid on it in hard
   flat shapes, square corners everywhere, big condensed block capitals (Anton)
   and a narrow sans for reading (PT Sans Narrow), and every count rubber-
   stamped in red or black. The sections below are kept apart so each can be
   worked on alone: base, dive, games, screens. Anton is declared with the
   Combine's fonts above. */
@font-face {
  font-family: 'PT Sans Narrow';
  src: url(fonts/pt-sans-narrow-400.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'PT Sans Narrow';
  src: url(fonts/pt-sans-narrow-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* [plan:base] -------------------------------------------------------------------- */
html.plan {
  /* 'Plan Signs' (below, with the toast) lends Anton a × and − you can see. */
  --display: 'Plan Signs', 'Anton', 'PT Sans Narrow', Impact, sans-serif;
  --read: 'PT Sans Narrow', 'Arial Narrow', system-ui, sans-serif;
  --bg: #17130f;
  --panel: #ebe2cd;
  --panel-2: #ddd2b8;
  --panel-edge: #17130f;
  --text: #17130f;
  --muted: #6b6255;
  --accent: #d1261b;
  --danger: #d1261b;
  --good: #2f8a4e;
  --ink: #17130f;
  --soot: #2a241f;
  --bone: #ebe2cd;
  --paper: #f3ecdc;
  --red: #d1261b;
  --red-dark: #8f150e;
  --concrete: #8a8274;
}
html.plan body {
  font-family: var(--read); font-weight: 400;
  color: #ebe2cd;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(209, 38, 27, .10) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 120%, rgba(0, 0, 0, .55) 0%, transparent 60%),
    var(--bg);
}
html.plan button { font-family: var(--read); font-weight: 700; }
/* [/plan:base] */

/* [plan:dive] -------------------------------------------------------------------- */
/* The dive screen: the HUD, the board's frame, the toolbar (plan-art.js draws the board). */
/* The turns are a block of red stamped on the page with the numeral knocked
   out of it, and a rule inside like a stamp's; the tally a strip of bone
   paper ruled into boxes, a count stamped in each and what this dive brought
   up stamped over its corner in red; the line over the board an order in red
   when a tool is waiting, or the dive's notes typed small; the board the coal
   face, framed heavy in black inside a bone rule (dive.js lays red photo
   corners over it); and the tools slabs of bone ruled in black, red when one
   is aimed. Its border is outside its drawing area (content-box), which
   dive.js allows for. */
html.plan #dive .hud { gap: 8px; align-items: stretch; }
html.plan #dive .turns {
  min-width: 70px; padding: 6px 8px 5px; gap: 1px;
  background: var(--red); color: var(--bone);
  border: 0; border-radius: 0;
  box-shadow: inset 0 0 0 3px var(--red), inset 0 0 0 4.5px var(--bone);
  transform: rotate(-2deg);
  -webkit-mask-image: var(--plan-ink); mask-image: var(--plan-ink);
}
html.plan #dive .turns .label {
  font-family: var(--display); font-size: 12px; letter-spacing: .16em; line-height: 1; color: var(--bone);
}
html.plan #turns {
  font-family: var(--display); font-weight: 400; font-size: 40px; line-height: .98; letter-spacing: .02em;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
/* Low: the block goes over to bone with the numeral red, and thumps. */
html.plan #dive .turns.low {
  background: var(--bone); box-shadow: inset 0 0 0 3px var(--bone), inset 0 0 0 4.5px var(--red);
  -webkit-mask-image: none; mask-image: none;
}
html.plan #dive .turns.low .label { color: var(--red); }
html.plan #dive .turns.low #turns { color: var(--red); animation: plan-thump .9s ease-in-out infinite; }
@keyframes plan-thump { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.16); } 80% { transform: scale(.96); } }
/* The ink of a rubber stamp never takes evenly: a mask of speckle. */
html.plan {
  --plan-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.6 2.35'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)'/%3E%3C/svg%3E");
}
html.plan #dive .tally {
  grid-template-columns: repeat(4, 1fr); gap: 0; padding: 2px;
  background: var(--bone); border: 0; border-radius: 0;
}
html.plan #dive .tally-item {
  gap: 3px; padding: 4px 2px 3px; min-width: 0;
  font-family: var(--display); font-weight: 400; font-size: 17px; line-height: 1; letter-spacing: .02em; color: var(--ink);
  border-right: 1px solid rgba(23, 19, 15, .3); border-bottom: 1px solid rgba(23, 19, 15, .3);
  font-variant-numeric: tabular-nums;
}
html.plan #dive .tally-item:nth-child(4n) { border-right: 0; }
html.plan #dive .tally-item:nth-child(n+5) { border-bottom: 0; }
html.plan #dive .tally-item img { width: 24px; height: 24px; flex: none; }
/* The strip's last box carries its heading. */
html.plan #dive .tally::after {
  content: 'Tally'; display: grid; place-items: center;
  font-family: var(--display); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--red);
}
/* What this dive has brought up: a little red stamp over the box's corner. */
html.plan #dive .tally-item .gain {
  top: -9px; right: -5px; z-index: 1; padding: 2px 3px 1px;
  font-family: var(--display); font-weight: 400; font-size: 11.5px; line-height: 1; letter-spacing: .03em;
  color: var(--red); background: var(--paper);
  border: 1.5px solid var(--red); border-radius: 0; outline: 1px solid var(--red); outline-offset: 1px;
  transform: rotate(-8deg);
}
html.plan #dive .tally-item .gain.pop { animation: plan-stamp .3s cubic-bezier(.55, 0, .8, .4) both; }
@keyframes plan-stamp {
  0% { transform: rotate(-26deg) scale(2.3); opacity: 0; }
  62% { transform: rotate(-8deg) scale(.9); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); }
}
html.plan #dive .manual-btn {
  width: 44px; padding: 0; display: grid; place-items: center;
  background: var(--ink); border: 2px solid var(--bone); border-radius: 0;
}
html.plan #dive .manual-btn .ico { width: 28px; height: 28px; }
html.plan #dive .manual-btn:active { background: var(--red); }
/* The line over the board keeps one height, so the board doesn't jump under
   the finger when the notes clear on the first touch. */
html.plan #chain-info {
  height: 48px; min-height: 0; margin: 6px 0 2px; padding: 0 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1.1; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bone);
}
/* The notes keep clear of the idea tab, which waits beside them on a small
   phone, and to three lines (a long loadout trails off). */
html.plan #chain-info.notes {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-line-clamp: 3; line-clamp: 3;
  padding: 0 26px;
  font-family: var(--read); font-weight: 700; font-size: 12.5px; line-height: 1.22; letter-spacing: .01em;
  text-transform: none; color: #b5ab98;
}
html.plan #chain-info.ok:not(:empty) {
  width: fit-content; max-width: 100%; margin: 6px auto 2px; padding: 0 14px;
  background: linear-gradient(transparent 5px, var(--red) 5px calc(100% - 5px), transparent calc(100% - 5px));
}
html.plan #board {
  box-sizing: content-box; background: #120f0c;
  border: 5px solid var(--ink); border-radius: 0;
  box-shadow: 0 0 0 2.5px var(--bone);
}
/* Behind the board, a band of red runs down the poster on the slant (with a
   black rule along it), showing wherever the board leaves room. */
html.plan #dive .board-wrap { position: relative; z-index: 0; }
html.plan #dive .board-wrap::before {
  content: ''; position: absolute; z-index: -1; inset: -6px -10px; pointer-events: none;
  background: linear-gradient(to bottom right, transparent calc(50% - 40px), var(--ink) calc(50% - 40px) calc(50% - 33px),
    var(--red) calc(50% - 33px) calc(50% + 22px), transparent calc(50% + 22px));
}
html.plan .toolbar { gap: 7px; padding: 12px 1px 1px; }
html.plan .tool-btn {
  flex: 1 1 0; min-width: 60px; min-height: 60px; padding: 5px 3px 4px; gap: 2px; justify-content: center;
  background: var(--bone); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 0;
  box-shadow: inset 0 0 0 2px var(--bone), inset 0 0 0 3px var(--ink);
}
html.plan .tool-btn .ico { width: 32px; height: 32px; }
html.plan .tool-btn .tname {
  font-family: var(--display); font-weight: 400; font-size: 12px; line-height: 1.05; letter-spacing: .06em;
  text-transform: uppercase; white-space: normal; text-align: center;
}
html.plan .tool-btn .tcount {
  top: -8px; right: -6px; padding: 2px 5px 1px; border-radius: 0;
  font-family: var(--display); font-weight: 400; font-size: 12px; line-height: 1;
  color: var(--bone); background: var(--ink); border: 1.5px solid var(--bone);
}
html.plan .tool-btn:active:not(:disabled) { background: var(--paper-dk, #d6cbb2); transform: translateY(1px); }
html.plan .tool-btn.aiming {
  color: var(--bone); background: var(--red); border-color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px var(--bone);
}
html.plan .tool-btn.aiming::before {
  content: 'Aim'; position: absolute; z-index: 2; top: -9px; left: -5px; padding: 2px 5px 1px;
  font-family: var(--display); font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); background: var(--paper); border: 1.5px solid var(--red); transform: rotate(-6deg);
}
@media (max-width: 380px) {
  html.plan #dive .hud { gap: 6px; }
  html.plan #dive .turns { min-width: 60px; padding: 5px 5px 4px; }
  html.plan #turns { font-size: 34px; }
  html.plan #dive .tally-item { font-size: 15px; gap: 2px; }
  html.plan #dive .tally-item img { width: 21px; height: 21px; }
  html.plan #dive .manual-btn { width: 40px; }
  html.plan #chain-info.notes { font-size: 11.5px; }
  html.plan .tool-btn .tname { font-size: 11px; letter-spacing: .04em; }
}
/* [/plan:dive] */

/* [plan:games] ------------------------------------------------------------------- */
/* The mini game overlays (plan-games.js draws the furnace panel and the shear).
   The furnace's card is a sheet of the poster: bone paper gone grey with soot,
   a heavy black rule and a hard shadow, its title on a black band over a red
   rule, the readouts boxed in black rules with their numbers in block
   capitals, progress a red bar, and the button a red slab. The mill is the
   whole screen, a poster with the bed on it. Verdicts and counts are stamped
   in an ink that never took evenly. */
html.plan {
  /* Ink that never took evenly: a mask for anything rubber-stamped. */
  --mg-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='90'%3E%3Cfilter id='i' x='0' y='0' width='1' height='1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -3.6 2.95'/%3E%3C/filter%3E%3Crect width='180' height='90' filter='url(%23i)'/%3E%3C/svg%3E");
  /* The poster's paper: a sparse grain of soot specks. */
  --mg-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .075 0 0 0 0 .06 0 0 0 1.5 -.8'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23g)'/%3E%3C/svg%3E");
  --mg-paper: radial-gradient(ellipse at 50% 38%, transparent 52%, rgba(40, 32, 26, .2) 100%),
    linear-gradient(transparent 70%, rgba(40, 32, 26, .1)), var(--mg-grain), var(--bone);
}
html.plan #minigame.mg { padding: 12px; background: rgba(14, 11, 9, .9); }
html.plan .mg-card {
  max-width: 400px; padding: 0 14px 14px; color: var(--ink);
  background: var(--mg-paper);
  border: 3px solid var(--ink); border-radius: 0; box-shadow: 7px 7px 0 rgba(0, 0, 0, .55);
}
html.plan .mg-card h2 {
  margin: 0 -14px 10px; padding: 9px 14px 6px; text-align: left; line-height: 1.1;
  font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .05em; text-transform: uppercase;
  color: var(--bone); background: var(--ink); border-bottom: 5px solid var(--red);
}
html.plan .mg-help { margin: 0 0 10px; font-size: 14.5px; line-height: 1.22; color: #4a4238; text-align: left; }
html.plan .gauge, html.plan .furnace-mouth { display: none; }
html.plan .mg-scene { display: block; margin: 0 0 10px; line-height: 0; border: 2px solid var(--ink); background: var(--bone); }
html.plan .mg-scene canvas { display: block; max-width: 100%; height: auto !important; }
html.plan .heat-wrap { margin: 0 0 10px; }
html.plan .heat-side { flex: 1; flex-direction: row; gap: 6px; }
html.plan .mg-stat {
  flex: 1 1 0; min-width: 0; padding: 4px 8px 3px; justify-content: center;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 0;
}
html.plan .mg-stat span { font-family: var(--read); font-weight: 700; font-size: 11px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
html.plan .mg-stat b {
  font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.1; letter-spacing: .03em; color: var(--ink);
  -webkit-mask-image: var(--mg-ink); mask-image: var(--mg-ink);
}
html.plan .mg-stat.paused b { color: var(--red); }
html.plan .mg-stat.mg-coal, html.plan .mg-stat.mg-gain { gap: 5px; padding-left: 4px; }
html.plan .mg-coal img { width: 32px; height: 32px; }
html.plan .gain-ring { --fill: var(--red); --track: rgba(23, 19, 15, .16); box-shadow: 0 0 0 1.5px var(--ink); }
html.plan .gain-ring::before { background: var(--paper); box-shadow: 0 0 0 1.5px var(--ink); }
html.plan .gain-ring.max { --fill: var(--red); box-shadow: 0 0 0 1.5px var(--ink); }
/* In the sweet spot the ring runs red-hot inside a double rule, and dances. */
html.plan .mg-gain .gain-ring { --fill: var(--red); }
html.plan .mg-gain .gain-ring.rush { --fill: #ff6a2a; box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 4px var(--red), 0 0 0 5.5px var(--ink); }
html.plan .mg-gain .gain-ring { width: 34px; height: 34px; }
html.plan .mg-bar { height: 14px; margin: 0 0 8px; border: 2px solid var(--ink); border-radius: 0; background: var(--paper); }
html.plan .mg-bar i { background: repeating-linear-gradient(-45deg, var(--red) 0 7px, var(--red-dark) 7px 10px); }
html.plan .mg-status {
  min-height: 24px; margin: 0 0 10px; padding: 2px 8px; line-height: 20px;
  font-family: var(--read); font-weight: 700; font-size: 15px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink);
}
html.plan .mg-status.good { color: var(--good); }
html.plan .mg-status.hot { color: var(--red); }
html.plan .mg-status.bad { color: var(--bone); background: var(--red); }
html.plan .mg-btn {
  padding: 13px; font-family: var(--display); font-weight: 400; font-size: 22px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--bone); background: var(--red); border: 0; border-radius: 0; box-shadow: 5px 5px 0 var(--ink);
}
html.plan .mg-btn:active, html.plan .mg-btn.held {
  transform: translate(3px, 3px); box-shadow: 2px 2px 0 var(--ink); filter: none;
  background: repeating-linear-gradient(90deg, transparent 0 18px, rgba(23, 19, 15, .16) 18px 26px) 0 0 / 26px 100%, var(--red-dark);
  animation: plan-march .35s linear infinite;
}
@keyframes plan-march { to { background-position: 26px 0, 0 0; } }
html.plan .mg-btn.empty { color: var(--ink); background: var(--concrete); filter: none; }
html.plan .mg-btn:disabled { opacity: .55; }
html.plan .mg-lump { filter: drop-shadow(2px 2px 0 rgba(23, 19, 15, .7)); }

/* The mill: the whole screen a poster, the bed pasted on it, and where there's
   room above it a masthead (the bed takes the full width up to about this
   aspect, and the masthead needs about 105px over it). */
html.plan .mg-card.mill-screen {
  max-width: none; border: 0; box-shadow: none;
  padding: calc(env(safe-area-inset-top) + 8px) 6px calc(env(safe-area-inset-bottom) + 10px);
  background: var(--mg-paper);
}
html.plan #mg-mill { border: 3px solid var(--ink); border-radius: 0; background: var(--bone); box-shadow: 5px 5px 0 rgba(23, 19, 15, .75); }
@media (max-aspect-ratio: 10/21) {
  html.plan .mill-board { flex-direction: column; align-items: center; justify-content: flex-end; }
  html.plan .mill-board::before, html.plan .mill-board::after { order: -1; align-self: stretch; margin: 0 4px; }
  html.plan .mill-board::before {
    content: 'Rolling mill'; padding: 0 0 4px;
    font-family: var(--display); font-size: min(12.5vw, 56px); line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--ink);
    border-bottom: 8px solid var(--red);
  }
  html.plan .mill-board::after {
    content: 'Shear true \2014  stack to the top'; margin-top: 6px; margin-bottom: 14px;
    font-family: var(--read); font-weight: 700; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
  }
}
html.plan .mill-screen .mg-btn { padding: 15px; font-size: 30px; }

/* The result: the verdict stamped across the sheet, what went in and what came
   out in boxes, the bonus stamped on in red. */
html.plan .mg-result, html.plan .mill-screen .mg-result {
  border-radius: 0; padding: 20px 16px; color: var(--ink); background: var(--mg-paper);
}
html.plan .mg-result h3 {
  margin: 0; padding: 6px 16px 4px; font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1.05;
  letter-spacing: .05em; text-transform: uppercase; color: var(--red); text-wrap: balance;
  border: 4px solid currentColor; box-shadow: inset 0 0 0 3px var(--bone), inset 0 0 0 5px currentColor;
  -webkit-mask-image: var(--mg-ink); mask-image: var(--mg-ink);
  transform: rotate(-4deg); animation: plan-stamp .34s .05s both cubic-bezier(.3, 1.6, .5, 1);
}
html.plan .mill-screen .mg-result h3 { font-size: 44px; padding: 8px 20px 6px; }
html.plan .mg-result:has(.fx-side.bad) h3 { color: var(--ink); transform: rotate(3deg); }
@keyframes plan-stamp { from { transform: scale(2.1) rotate(-12deg); opacity: 0; } 55% { opacity: 1; } }
html.plan .fx { margin: 22px 0 26px; }
html.plan .fx-item { padding: 4px 10px 4px 5px; background: var(--paper); border: 2px solid var(--ink); border-radius: 0; }
html.plan .fx-item b {
  font-family: var(--display); font-size: 22px; color: var(--ink);
  -webkit-mask-image: var(--mg-ink); mask-image: var(--mg-ink);
}
html.plan .fx-side.out .fx-item { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
html.plan .fx-side.out .fx-item b { font-size: 32px; color: var(--red); }
html.plan .fx-side.out.bad .fx-item { box-shadow: 3px 3px 0 var(--ink); background: var(--panel-2); }
html.plan .fx-side.out.bad .fx-item b { color: var(--ink); }
/* The arrow between them a red poster arrow, or a black cross if the fire
   went out: the picture pushed out of its box, the box cut to the shape. */
html.plan .fx-arrow {
  width: 40px; height: 40px; object-fit: none; object-position: 200px 0; background: var(--red);
  clip-path: polygon(0 36%, 52% 36%, 52% 12%, 100% 50%, 52% 88%, 52% 64%, 0 64%);
}
html.plan .fx:has(.fx-side.bad) .fx-arrow {
  width: 34px; height: 34px; background: var(--ink);
  clip-path: polygon(18% 0, 50% 32%, 82% 0, 100% 18%, 68% 50%, 100% 82%, 82% 100%, 50% 68%, 18% 100%, 0 82%, 32% 50%, 0 18%);
}
html.plan .fx-badge { top: -30px; right: -30px; width: auto; height: auto; }
html.plan .fx-badge img { display: none; }
html.plan .fx-badge span {
  padding: 2px 8px 0; font-family: var(--display); color: var(--red); background: var(--bone);
  border: 3px solid currentColor; box-shadow: inset 0 0 0 2px var(--bone), inset 0 0 0 3.5px currentColor;
  -webkit-mask-image: var(--mg-ink); mask-image: var(--mg-ink);
}
html.plan .fx-side.out .gain-ring { box-shadow: 0 0 0 2px var(--ink); }
html.plan .mg-result .mg-btn { max-width: 300px; }
/* [/plan:games] */

/* [plan:screens] ----------------------------------------------------------------- */
/* Results, overlays, the manual, toasts, the Styles and Ideas pages, the idea tab.
   Every page here is the combine's own printed matter: bone poster paper with
   a little tooth and soot in it, heavy black rules, black bands lettered in
   paper white with a red wedge cut into their right end (as the sheets on the
   hub have), signal red for what matters, square corners, and rubber stamps
   whose ink never took evenly (--ink-take masks them). */
html.plan {
  /* The paper's tooth and a little soot mottled through it, laid over bone. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .09 0 0 0 0 .075 0 0 0 0 .06 .55 0 0 0 -.22'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.014' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .13 0 0 0 0 .1 .42 0 0 0 -.17'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23b)'/%3E%3Crect width='240' height='240' filter='url(%23a)'/%3E%3C/svg%3E");
  /* Where a rubber stamp's ink took: blotchy, thin in patches, specked. A mask. */
  --ink-take: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='80'%3E%3Cfilter id='s' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09 .14' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 -3.4 0 0 0 2.78'/%3E%3C/filter%3E%3Crect width='150' height='80' filter='url(%23s)'/%3E%3C/svg%3E");
  /* A hard shadow down and to the right: a cutting pasted on. */
  --hard: 4px 4px 0 var(--ink);
}
/* A stamp's ink, for anything stamped: masked so it takes unevenly. */
html.plan .results .card li .gain, html.plan .results .card::after, html.plan .mentry header small, html.plan .ss-here,
html.plan .ss-pick, html.plan .id-waiting, html.plan .id-idea.done::after {
  -webkit-mask: var(--ink-take) 0 0 / 150px 80px; mask: var(--ink-take) 0 0 / 150px 80px;
}
@keyframes plan-slam {
  0% { opacity: 0; transform: scale(1.9) rotate(calc(var(--r, -4deg) - 9deg)); }
  55% { opacity: 1; transform: scale(.94) rotate(var(--r, -4deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--r, -4deg)); }
}

/* ---- The shift's report: a printed form, the counts stamped in ---- */
html.plan .results { background: rgba(13, 10, 8, .84); padding: 14px; }
html.plan .results .card {
  position: relative; max-width: 344px; padding: 0 16px 18px; color: var(--ink);
  background: var(--grain), var(--bone);
  border: 3px solid var(--ink); border-radius: 0; box-shadow: 7px 7px 0 var(--red);
  animation: plan-drop .28s cubic-bezier(.2, 1.25, .45, 1) both;
}
@keyframes plan-drop { from { opacity: 0; transform: translateY(-18px) rotate(-1.5deg); } }
/* The title band: paper white on black, a red wedge at its end, a red rule under. */
html.plan .results .card h1 {
  position: relative; margin: 0 -16px; padding: 13px 70px 10px 16px;
  font-size: 30px; line-height: 1; text-align: left; text-transform: uppercase; letter-spacing: .05em;
  color: var(--paper); background: var(--ink); border-bottom: 4px solid var(--red);
}
html.plan .results .card h1::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 66px;
  background: var(--red); clip-path: polygon(48% 0, 100% 0, 100% 100%, 0 100%);
}
/* The form's columns: what this shift raised, and what's in store now. */
html.plan .results .card ul { position: relative; margin: 0; padding-top: 28px; border-bottom: 4px double var(--ink); }
html.plan .results .card ul::before, html.plan .results .card ul::after {
  position: absolute; top: 9px; font: 700 11px/1 var(--read); letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
html.plan .results .card ul::before { content: 'Raised'; right: 66px; width: 62px; text-align: center; }
html.plan .results .card ul::after { content: 'In store'; right: 2px; }
html.plan .results .card li {
  gap: 10px; min-height: 42px; padding: 4px 2px; font-size: 16px;
  border-top: 1px solid rgba(23, 19, 15, .3); border-bottom: 0;
}
html.plan .results .card li:first-child { border-top: 2px solid var(--ink); }
html.plan .results .card li img { width: 30px; height: 30px; }
html.plan .results .card li .name { font: 700 15px/1.1 var(--read); letter-spacing: .05em; text-transform: uppercase; }
html.plan .results .card li .qty {
  width: 56px; min-width: 0; font: 400 21px/1 var(--display); letter-spacing: .02em; color: var(--ink);
}
/* Each count raised, stamped in red in a double rule, a little askew, one
   after another as the form comes up. A blank where nothing was raised. */
html.plan .results .card li .gain {
  --r: -4deg; display: inline-block; min-width: 48px; margin: 0 7px; padding: 1px 5px 0;
  font: 400 19px/1.15 var(--display); letter-spacing: .03em; text-align: center; color: var(--red);
  background: none; border: 3px double var(--red); border-radius: 0;
  transform: rotate(var(--r)); animation: plan-slam .3s .3s cubic-bezier(.3, 1.4, .5, 1) both;
}
html.plan .results .card li:nth-child(even) .gain { --r: 3deg; -webkit-mask-position: 37px 21px; mask-position: 37px 21px; }
html.plan .results .card li:nth-child(3n) .gain { --r: -1.5deg; -webkit-mask-position: 81px 43px; mask-position: 81px 43px; }
html.plan .results .card li:nth-child(2) .gain { animation-delay: .38s; }
html.plan .results .card li:nth-child(3) .gain { animation-delay: .46s; }
html.plan .results .card li:nth-child(4) .gain { animation-delay: .54s; }
html.plan .results .card li:nth-child(5) .gain { animation-delay: .62s; }
html.plan .results .card li:nth-child(6) .gain { animation-delay: .7s; }
html.plan .results .card li:nth-child(7) .gain { animation-delay: .78s; }
html.plan .results .card li .gain:empty { display: inline-block; border-color: transparent; color: var(--muted); animation: none; transform: none; }
html.plan .results .card li .gain:empty::before { content: '\2014'; }
/* The footnote, and room beside it for the form's stamp. */
html.plan #results-extra, html.plan #results-extra:empty {
  display: block; min-height: 44px; margin: 0; padding: 10px 112px 8px 0; text-align: left;
  font: italic 400 14px/1.3 var(--read); color: var(--muted);
}
html.plan .results .card::after {
  --r: -9deg; content: 'Tallied'; position: absolute; right: 18px; bottom: 82px; padding: 3px 9px 1px;
  font: 400 21px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--red);
  border: 4px double var(--red); transform: rotate(var(--r));
  animation: plan-slam .34s 1s cubic-bezier(.3, 1.4, .5, 1) both;
}
/* Back to the rig: a red slab with a black wedge cut into its corner. */
html.plan .results .card button {
  position: relative; padding: 13px 14px 11px; font-size: 21px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--paper); background: var(--red); border: 3px solid var(--ink); border-radius: 0; box-shadow: 0 5px 0 var(--ink);
}
html.plan .results .card button::after {
  content: ''; position: absolute; right: -1px; top: -1px; width: 22px; height: 22px; background: var(--ink);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
html.plan .results .card button:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
@media (max-height: 680px) {
  html.plan .results .card h1 { padding-top: 10px; padding-bottom: 8px; font-size: 27px; }
  html.plan .results .card li { min-height: 38px; padding: 2px 2px; }
  html.plan .results .card li img { width: 27px; height: 27px; }
  html.plan #results-extra, html.plan #results-extra:empty { min-height: 40px; padding-top: 8px; }
  html.plan .results .card::after { bottom: 78px; font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  html.plan .results .card, html.plan .results .card li .gain, html.plan .results .card::after { animation: none; }
}

/* ---- Overlays, and the line shown if the graphics can't start ---- */
html.plan .overlay { background: rgba(13, 10, 8, .9); }
html.plan .stage-error { color: #b3aa98; }

/* ---- The manual: the combine's handbook, bound along its left edge ---- */
html.plan .mpanel {
  position: relative; color: var(--ink);
  background: var(--grain), var(--bone);
  padding: 0 12px calc(env(safe-area-inset-bottom) + 6px) 24px;
}
/* The binding: black cloth tape with a red thread stitched through it. */
html.plan .mpanel::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 13px; z-index: 1; pointer-events: none;
  background:
    repeating-linear-gradient(transparent 0 9px, var(--ink) 9px 15px) 5px 0 / 3px 100% no-repeat,
    linear-gradient(var(--red), var(--red)) 5px 0 / 3px 100% no-repeat,
    linear-gradient(90deg, transparent 12px, rgba(0, 0, 0, .35) 12px), var(--ink);
}
@media (min-width: 580px) {
  html.plan .mpanel { border-right: 3px solid var(--ink); box-shadow: 8px 0 0 var(--red); }
}
/* The title band, across the top under the notch, the close disc on its red wedge. */
html.plan .mhead {
  position: relative; flex: none; margin: 0 -12px 0 -11px;
  padding: calc(env(safe-area-inset-top) + 8px) 12px 8px 13px;
  background: var(--ink); border-bottom: 4px solid var(--red);
}
html.plan .mhead::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 92px;
  background: var(--red); clip-path: polygon(44% 0, 100% 0, 100% 100%, 0 100%);
}
html.plan .mhead h2 {
  display: flex; align-items: center; gap: 11px;
  font-size: 25px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: var(--paper);
}
html.plan .mhead h2 .ico { width: 32px; height: 32px; vertical-align: 0; }
html.plan .mclose {
  position: relative; z-index: 1; width: 44px; height: 44px; flex: none; padding: 0;
  color: transparent; font-size: 0; border: 0; border-radius: 50%; filter: drop-shadow(2px 3px 0 #000);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Ccircle cx='22' cy='22' r='22' fill='%2317130f'/%3E%3Ccircle cx='22' cy='22' r='19' fill='%23ebe2cd'/%3E%3Cpath d='M6 23A16 16 0 0 1 27.9 7.1' fill='none' stroke='%23d1261b' stroke-width='4.4'/%3E%3Cpath d='M15.5 15.5L28.5 28.5M28.5 15.5L15.5 28.5' stroke='%2317130f' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
html.plan .mclose:active { transform: translate(2px, 2px); filter: none; }
/* The tabs: index tabs standing on a heavy rule, the open one red. */
html.plan .mtabs { gap: 3px; padding: 12px 0 0; margin: 0 -12px 10px 0; padding-right: 12px; border-bottom: 3px solid var(--ink); }
html.plan .mtabs button {
  flex: 1 0 auto; padding: 9px 7px 6px; border-radius: 0; border: 2px solid var(--ink); border-bottom: 0;
  font: 400 13.5px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); background: var(--paper);
}
html.plan .mtabs button.on { color: var(--paper); background: var(--red); padding-top: 11px; margin-top: -2px; }
html.plan .mtabs button:active:not(.on) { background: var(--ink); color: var(--paper); }
html.plan .msearch {
  margin: 0 0 8px; padding: 11px 12px 9px 40px; font: 400 17px var(--read); color: var(--ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5.4' fill='none' stroke='%2317130f' stroke-width='2.6'/%3E%3Cpath d='M12 12L17.5 17.5' stroke='%23d1261b' stroke-width='3.4'/%3E%3C/svg%3E") 12px 50% / 19px 19px no-repeat, var(--paper);
  border: 2px solid var(--ink); border-radius: 0; box-shadow: inset 0 3px 0 rgba(23, 19, 15, .1);
}
html.plan .msearch::placeholder { font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; font-size: 15px; color: #8a8274; opacity: 1; }
html.plan .msearch:focus { outline: none; border-color: var(--red); box-shadow: inset 0 3px 0 rgba(23, 19, 15, .1), 3px 3px 0 var(--red); }
html.plan .msearch::-webkit-search-cancel-button { filter: grayscale(1) brightness(.3); }
/* Reading. */
html.plan .mbody { padding: 2px 6px 40px 0; color: var(--ink); counter-reset: sec; }
html.plan .mbody p, html.plan .mbody li { font-size: 16px; line-height: 1.45; }
html.plan .mbody b { font-weight: 700; }
html.plan .mguide > p { margin: 8px 0; }
/* Sections: black bars lettered in paper white, numbered in a red block. */
html.plan .mguide h3, html.plan .mgroup {
  counter-increment: sec; display: flex; align-items: center; gap: 11px; min-height: 36px;
  margin: 24px 0 10px; padding: 6px 12px 5px 0;
  font-size: 18px; line-height: 1.1; letter-spacing: .07em; text-transform: uppercase; color: var(--paper); background: var(--ink);
}
html.plan .mguide h3::before, html.plan .mgroup::before {
  content: counter(sec, decimal-leading-zero); align-self: stretch; display: grid; place-items: center;
  min-width: 40px; margin: -6px 0 -5px; padding: 0 6px; color: var(--paper); background: var(--red); letter-spacing: .02em;
}
html.plan .mguide h3:first-child, html.plan .mbody > .mgroup:first-child { margin-top: 6px; }
/* Bullets are red arrowheads; numbered steps sit in black blocks. */
html.plan .mguide ul, html.plan .mguide ol { list-style: none; margin: 0; }
html.plan .mguide ul { padding-left: 20px; }
html.plan .mguide ol { padding-left: 36px; counter-reset: step; }
html.plan .mguide li { position: relative; margin-bottom: 7px; }
html.plan .mguide ul > li::before {
  content: ''; position: absolute; left: -17px; top: .42em; width: 9px; height: 11px;
  background: var(--red); clip-path: polygon(0 0, 100% 50%, 0 100%);
}
html.plan .mguide ol > li { counter-increment: step; }
html.plan .mguide ol > li::before {
  content: counter(step); position: absolute; left: -36px; top: 1px; width: 25px; height: 25px; display: grid; place-items: center;
  font: 400 16px/1 var(--display); color: var(--paper); background: var(--ink); box-shadow: 2px 2px 0 var(--red);
}
/* Tables ruled in ink, with a black head row. */
html.plan .mtable {
  width: calc(100% - 3px); margin: 12px 0 6px; border-collapse: collapse; font-size: 15px;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink);
}
html.plan .mtable th {
  font: 400 13.5px/1.2 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--paper); background: var(--ink);
}
html.plan .mtable th, html.plan .mtable td { padding: 5px 8px; border-bottom: 1px solid rgba(23, 19, 15, .28); }
html.plan .mtable th + th, html.plan .mtable td + td { border-left: 1px solid rgba(23, 19, 15, .28); }
html.plan .mtable tr:last-child td { border-bottom: 0; }
html.plan .mguide .mtable td:last-child { font: 400 17px/1 var(--display); letter-spacing: .03em; }
/* Recipes: what goes in, an arrow, what comes out, in fixed columns so a long
   name wraps inside its link rather than pushing the table off the page. */
html.plan .mtable.recipes { table-layout: fixed; }
html.plan .mtable.recipes td { padding: 5px 4px 5px 6px; }
html.plan .mtable.recipes td + td { border-left: 0; }
html.plan .mtable.recipes td:nth-child(1) { width: 54%; }
html.plan .mtable.recipes td:nth-child(2) { width: 20px; padding: 0; font: 700 19px var(--read); color: var(--red); text-align: center; }
html.plan .mtable.recipes td:nth-child(3) { text-align: right; }
html.plan .mtable.recipes .mlink { white-space: normal; max-width: 100%; text-align: left; }
/* Entries: slips of fresh paper ruled in ink, the kind stamped under the name. */
html.plan .mentry {
  position: relative; margin: 0 4px 14px 0; padding: 11px 12px 12px; scroll-margin-top: 8px; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink);
}
html.plan .mentry header { gap: 12px; padding-bottom: 9px; border-bottom: 2px solid var(--ink); }
html.plan .mentry header .ico.big { width: 44px; height: 44px; }
html.plan .mentry h4 { font: 400 20px/1.05 var(--display); letter-spacing: .05em; text-transform: uppercase; }
html.plan .mentry header small {
  --r: -2.5deg; display: inline-block; margin-top: 5px; padding: 2px 6px 1px;
  font: 400 12.5px/1.2 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--red);
  border: 2px solid var(--red); transform: rotate(var(--r));
}
html.plan .mentry > p { margin: 9px 0 0; }
html.plan .mrow { margin: 8px 0 0; padding-left: 72px; text-indent: -72px; font-size: 15.5px; }
html.plan .mlabel { width: 72px; font: 400 12.5px/1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
html.plan .mtier { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(23, 19, 15, .35); font-size: 15.5px; }
html.plan .mtier div { margin-top: 5px; }
/* Links: tags ruled in ink, the count in red block figures; inverted when pressed. */
html.plan .mlink {
  gap: 4px; margin: 2px 4px 2px 0; padding: 1px 8px 1px 3px; vertical-align: middle;
  font: 700 14px/1.5 var(--read); color: var(--ink); background: var(--bone); border: 1.5px solid var(--ink); border-radius: 0;
}
html.plan .mlink b { font: 400 15px/1 var(--display); letter-spacing: .03em; color: var(--red); }
html.plan .mlink .ico { width: 20px; height: 20px; }
html.plan .mlink:active { color: var(--paper); background: var(--ink); }
html.plan .mentry.flash { animation: plan-flash 1.5s ease; }
@keyframes plan-flash {
  0%, 35% { border-color: var(--red); background-color: #f8dfd4; box-shadow: 0 0 0 2px var(--red), 7px 7px 0 var(--red); }
}

/* ---- The toast: a black bar lettered in paper white, a red wedge at its end,
   slammed down like a stamp onto a red block knocked out of register ---- */
/* Anton draws its × and − small, so those two come from the narrow sans. */
@font-face {
  font-family: 'Plan Signs';
  src: url(fonts/pt-sans-narrow-700.woff2) format('woff2');
  unicode-range: U+00D7, U+2212;
  font-display: swap;
}
html.plan .toast {
  top: calc(env(safe-area-inset-top) + 58px); padding: 9px 34px 8px 16px; font-family: 'Plan Signs', var(--display);
  font-size: 17px; line-height: 1.15; letter-spacing: .07em; text-transform: uppercase; text-align: center;
  color: var(--paper); background: var(--ink); border: 0; border-radius: 0; box-shadow: 5px 5px 0 var(--red);
  white-space: normal; overflow-wrap: break-word; width: max-content; max-width: min(400px, calc(100vw - 40px));
}
html.plan .toast::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 20px;
  background: var(--red); clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
html.plan .toast.show { animation: plan-toast 2s ease; }
@keyframes plan-toast {
  0% { opacity: 0; transform: translate(-50%, -4px) scale(1.3) rotate(-5deg); }
  9% { opacity: 1; transform: translate(-50%, 0) scale(.97) rotate(-1deg); }
  14%, 80% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(-1deg); }
  100% { opacity: 0; transform: translate(-50%, 0) scale(1) rotate(-1deg); }
}

/* ---- The idea tab and its note ---- */
html.plan .idea-tab {
  background: var(--ink); border: 2px solid var(--red); border-left: 0; border-radius: 0;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .35); opacity: .94;
}
html.plan .idea-tab.right { border-left: 2px solid var(--red); border-right: 0; border-radius: 0; }
html.plan .idea-sheet { background: rgba(13, 10, 8, .62); }
html.plan .idea-card {
  position: relative; gap: 12px; padding: 0 16px 16px; color: var(--ink);
  background: var(--grain), var(--bone); border: 3px solid var(--ink); border-radius: 0; box-shadow: 6px 6px 0 var(--red);
}
html.plan .idea-card h2 {
  position: relative; margin: 0 -16px; padding: 11px 70px 9px 16px;
  font-size: 24px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); border-bottom: 4px solid var(--red);
}
html.plan .idea-card h2::after {
  content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 62px;
  background: var(--red); clip-path: polygon(48% 0, 100% 0, 100% 100%, 0 100%);
}
/* The note goes on ruled paper, the rules scrolling with the words. */
html.plan .idea-card textarea, html.plan .ss textarea {
  padding: 9px 12px; font: 400 17px/28px var(--read); color: var(--ink); border-radius: 0; border: 2px solid var(--ink);
  background: repeating-linear-gradient(transparent 0 27px, rgba(23, 19, 15, .2) 27px 28px) 0 9px / 100% 28px local, var(--paper);
}
html.plan .idea-card textarea:focus, html.plan .ss textarea:focus { outline: none; border-color: var(--red); box-shadow: 3px 3px 0 var(--red); }
html.plan .idea-card textarea::placeholder, html.plan .ss textarea::placeholder { color: #8a8274; }
html.plan .idea-where { font-size: 14px; color: var(--muted); }
html.plan .idea-actions { gap: 12px; }
html.plan .idea-actions button {
  padding: 10px 18px 8px; font: 400 16px/1 var(--display); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 0; box-shadow: var(--hard);
}
html.plan .idea-actions .idea-save { color: var(--paper); background: var(--red); border-color: var(--ink); }
html.plan .idea-actions button:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }

/* ---- The Styles and Ideas pages: printed on the poster's paper ---- */
html.plan.doc, html.plan.doc body.ss { background: var(--grain), var(--bone); color: var(--ink); }
html.plan body.ss { font-size: 16px; }
html.plan .ss :focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }
/* The page's head: the balance page's masthead, a black band right across the
   top under a red rule, the name in paper-white capitals. (The band is a
   border image set out past the sides, which paints without scrolling.) */
html.plan .ss-top {
  gap: 16px; margin-top: calc(-1 * (env(safe-area-inset-top) + 12px)); padding: calc(env(safe-area-inset-top) + 6px) 0 9px;
  border-image: linear-gradient(var(--ink) calc(100% - 3px), var(--red) 0) fill 0 / 0 / 0 100vmax;
}
html.plan .ss h1 { font-size: 25px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); }
html.plan .ss h2, html.plan .ss h3, html.plan .ss h4 { color: var(--ink); text-transform: uppercase; }
html.plan .ss h2 { display: flex; align-items: center; gap: 10px; font-size: 26px; letter-spacing: .05em; }
html.plan .ss h2::before { content: ''; flex: none; width: 15px; height: 15px; background: var(--red); }
html.plan .ss h3 { font-size: 21px; letter-spacing: .05em; }
html.plan .ss h4 { font-size: 18px; letter-spacing: .06em; }
html.plan .ss-head { padding-bottom: 6px; border-bottom: 4px solid var(--ink); }
html.plan .ss-head:has(h3) { border-bottom-width: 2px; }
html.plan .ss-note { color: var(--muted); }
html.plan .ss-status, html.plan .ss-copied { color: var(--red); font-weight: 700; }
/* Buttons: paper slabs ruled in ink on a hard shadow; the main ones red. */
html.plan .ss-btn {
  padding: 10px 15px 8px; font: 400 15.5px/1 var(--display); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 0; box-shadow: 3px 3px 0 var(--ink);
}
html.plan .ss-btn span[aria-hidden] { font: 700 24px/.6 var(--read); margin-top: -2px; }
html.plan .ss-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
html.plan .ss-gold { color: var(--paper); background: var(--red); border-color: var(--ink); }
html.plan .ss-btn:disabled { opacity: .45; box-shadow: none; }
html.plan .ss-top .ss-btn { min-height: 40px; padding: 8px 14px 6px; box-shadow: none; }
/* Each style a slip of fresh paper, its colours in square chips. */
html.plan .ss-style, html.plan .ss-card {
  color: var(--ink); background: var(--paper); border: 2px solid var(--ink); border-radius: 0; box-shadow: var(--hard);
}
html.plan .ss-swatch { grid-template-columns: repeat(2, 17px); gap: 3px; padding-top: 4px; }
html.plan .ss-swatch i { width: 17px; height: 17px; border-radius: 0; box-shadow: inset 0 0 0 1.5px var(--ink); }
html.plan .ss-style-text p { font-size: 14.5px; color: var(--muted); }
html.plan .ss-style h3 { font-size: 22px; }
/* Stamped: the style in play, the picks, an idea waiting to send. */
html.plan .ss-here, html.plan .ss-pick, html.plan .id-waiting {
  display: inline-block; padding: 2px 7px 1px; border-radius: 0;
  font: 400 13px/1.15 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--red); background: none; border: 3px double var(--red); transform: rotate(-4deg);
}
html.plan .ss-here { margin-left: 8px; vertical-align: 3px; }
/* The switches: a square slot, its block red and over to the right when on. */
html.plan .ss-switch span { width: 54px; height: 28px; border-radius: 0; background: var(--bone); border: 2px solid var(--ink); }
html.plan .ss-switch span::after { top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 0; background: var(--concrete); }
html.plan .ss-switch input:checked + span { background: var(--ink); border-color: var(--ink); }
html.plan .ss-switch input:checked + span::after { transform: translateX(26px); background: var(--red); }
html.plan .ss-switch input:focus-visible + span { outline-color: var(--red); }
html.plan .ss-switch b { font: 400 15px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; }
/* The redesign kit. */
html.plan .ss-field > label:not(.ss-choice), html.plan .ss-field > legend, html.plan .id-new > label {
  font: 400 15px/1.2 var(--display); letter-spacing: .08em; text-transform: uppercase;
}
html.plan .ss textarea { font-size: 16px; }
html.plan .ss-choice { border-radius: 0; border: 2px solid var(--ink); background: var(--bone); }
html.plan .ss-choice b { font: 400 15px/1.3 var(--display); letter-spacing: .06em; text-transform: uppercase; }
html.plan .ss-choice span { font-size: 14px; color: var(--muted); }
html.plan .ss-choice:has(input:checked) { border-color: var(--red); background: #f6dfd3; box-shadow: inset 6px 0 0 var(--red); }
html.plan .ss-choice input, html.plan .ss-tick input { accent-color: var(--red); }
html.plan .ss-tick { font-size: 15px; }
html.plan .ss-preview-head { color: var(--paper); background: var(--ink); border-bottom: 3px solid var(--red); font: 400 13px/1.2 var(--display); letter-spacing: .14em; }
html.plan .ss #prompt { color: var(--ink); background: var(--bone); font-size: 12.5px; }
html.plan .ss #prompt b { color: var(--red); }
/* Chips: square tags; the chosen ones inverted, black lettered white. */
html.plan .ss-chip {
  min-height: 40px; padding: 8px 12px 7px; border-radius: 0; border: 2px solid var(--ink);
  font: 700 15px/1.1 var(--read); letter-spacing: .02em; color: var(--ink); background: var(--paper);
}
html.plan .ss-chip[aria-pressed="true"] { color: var(--paper); background: var(--ink); border-color: var(--ink); box-shadow: 3px 3px 0 var(--red); }
html.plan .ss-idea.used { border-color: var(--red); box-shadow: 4px 4px 0 var(--red); }
html.plan .ss-idea-top { color: var(--muted); font: 700 12px/1.2 var(--read); letter-spacing: .14em; }
html.plan .ss-pick { font-size: 12px; transform: rotate(5deg); }
html.plan .ss-idea > p { font-size: 15px; }
html.plan .ss-idea dt { color: var(--red); font: 400 12.5px/1.2 var(--display); letter-spacing: .12em; }
html.plan .ss-idea dd { font-size: 14.5px; }
html.plan .ss-idea summary { color: var(--red); font: 400 14px/1.2 var(--display); letter-spacing: .07em; text-transform: uppercase; }
html.plan .ss-idea summary::before {
  content: ''; width: 8px; height: 10px; background: var(--red); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .15s;
}
html.plan .ss-idea details[open] summary::before { content: ''; transform: rotate(90deg); }
/* The tabs along the bottom: a black band under a red rule, the tab you're on
   red; drawn the same on the balance page, so the band holds still. */
html.plan .ss-nav { padding-top: 5px; background: var(--ink); border-top: 3px solid var(--red); }
html.plan .ss-tab {
  border-radius: 0; border: 2px solid var(--paper); color: var(--ink); background: var(--bone);
  font-size: 16px; letter-spacing: .06em; text-transform: uppercase;
}
html.plan .ss-tab.on { color: var(--paper); background: var(--red); border: 3px solid var(--paper); }

/* ---- The Ideas page ---- */
html.plan .id-text { font-size: 17px; line-height: 1.4; }
html.plan .id-meta { font-size: 13.5px; color: var(--muted); }
html.plan .id-waiting { margin-left: 6px; font-size: 11px; vertical-align: 1px; }
/* Delete, armed: ruled and lettered in red, on a red shadow. */
html.plan .ss-btn.id-armed { box-shadow: 3px 3px 0 var(--red); }
html.plan .id-idea { position: relative; }
html.plan .id-idea.done { background: var(--bone); box-shadow: 2px 2px 0 var(--ink); }
html.plan .id-idea.done .id-text { opacity: .55; text-decoration-thickness: 2px; }
/* An idea ticked off is stamped DONE, beside its buttons. */
html.plan .id-idea.done::after {
  --r: -8deg; content: 'Done'; position: absolute; right: 16px; bottom: 14px; padding: 3px 10px 1px; pointer-events: none;
  font: 400 22px/1.15 var(--display); letter-spacing: .12em; text-transform: uppercase; color: var(--red);
  border: 4px double var(--red); transform: rotate(var(--r)); mix-blend-mode: multiply;
}
/* [/plan:screens] */

/* ---- Regolith ------------------------------------------------------------------------
   A Mars colony printed out of the red dust as a voxel diorama. Its interface
   is printed blocks: basalt-dark slabs seen a little from above and to the
   left, their tops lit the colour of sunlit dust and their right sides in
   shade, inked round, with a hologram strip in the printer's cyan for titles;
   safety orange for what matters, a mint lamp for all-clear. Bungee (blocky
   capitals) for headings, Chakra Petch (a squared technical sans) to read. */
@font-face {
  font-family: 'Bungee';
  src: url(fonts/bungee.woff2) format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url(fonts/chakra-petch-500.woff2) format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Chakra Petch';
  src: url(fonts/chakra-petch-700.woff2) format('woff2');
  font-weight: 700;
  font-display: swap;
}
html.mars {
  --display: 'Bungee', 'Chakra Petch', sans-serif;
  --sans: 'Chakra Petch', system-ui, sans-serif;
  --bg: #160d0b;
  --panel: #2a1c18;
  --panel-2: #3a2722;
  --panel-edge: #6a4434;
  --text: #f8ebde;
  --muted: #c09a88;
  --accent: #ff8a3a;
  --good: #7ef0a4;
  --holo: #52f2ea;
}
html.mars body { background: #160d0b; }

/* [mars:screens] ----------------------------------------------------------------- */
/* Every DOM screen but the mini games and the board's frame: the dive's HUD and
   tools, the haul report, the field terminal (the manual), toasts, the idea tab
   and its sheet, and the Styles and Ideas pages. Everything is a printed block
   like the hub's (block() in mars-kit.js): a front face, a lit top and a shaded
   right side each --blk-e deep, receding up and to the right, inked round, on a
   hard shadow cast down and to the right by the low sun; headings sit on strips
   of hologram glass in the printer's cyan, and what's new prints in, layer by
   layer, under a glowing print head. */
html.mars {
  --ink: #0d0706;
  --danger: #ff5a4a;
  --holo-hi: #c8fffb;
  --holo-ink: #dffffb;
  --orange-hi: #ffc08a;
  --orange-lo: #b04a14;
  --mint-lo: #1f8a52;
  --well: #120b09;
  --seam: #4e3830;
  /* The block faces (the same colours as LOOKS and panelBg in gfx.js): basalt
     slabs for panels (their tops lit the colour of sunlit dust), basalt keys,
     steel buttons, safety orange for the main action, the printer's cyan for
     what's picked, and mint for all-clear. */
  --slab-face: #231714;
  --slab-top: #b8603a;
  --slab-side: #120b09;
  --key-face: #2a1c18;
  --key-top: #6a4636;
  --key-side: #120b09;
  --steel-face: #3e2b25;
  --steel-top: #6e4a3a;
  --steel-side: #1e1411;
  --gold-face: #ff8a3a;
  --gold-top: #ffc08a;
  --gold-side: #b04a14;
  --lit-face: #163a3a;
  --lit-top: #52f2ea;
  --lit-side: #0b2222;
  /* Hologram glass: faint cyan scan lines (an image, for any background). */
  --scan: repeating-linear-gradient(rgba(82, 242, 234, .06) 0 1px, transparent 1px 3px);
  /* The printer's mark: a little cyan cube (an image). */
  --cube: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M7 .8L13.2 4.4L7 8L.8 4.4Z' fill='%23c8fffb'/%3E%3Cpath d='M.8 4.4L7 8L7 15.2L.8 11.6Z' fill='%2352f2ea'/%3E%3Cpath d='M7 8L13.2 4.4L13.2 11.6L7 15.2Z' fill='%231f9f9a'/%3E%3Cpath d='M7 .8L13.2 4.4L13.2 11.6L7 15.2L.8 11.6L.8 4.4ZM.8 4.4L7 8L13.2 4.4M7 8L7 15.2' fill='none' stroke='%230d0706' stroke-width='1' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* The coins the round buttons are (coin() in mars-kit.js, 40 px across, set in
     a 46 px box with the face's centre at 21, 25), plain and with a cross. */
  --coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 46 46'%3E%3Cpath d='M34,0.8L34,5.6L39,5.6L39,10.4L44,10.4L44,15.2L44,20L44,24.8L44,29.6L39,29.6L39,34.4L34,34.4L34,39.2L14,39.2L14,34.4L9,34.4L9,29.6L4,29.6L4,24.8L4,20L4,15.2L4,10.4L9,10.4L9,5.6L14,5.6L14,0.8Z' fill='%237a5242'/%3E%3Cpath d='M33,1.8L33,6.6L38,6.6L38,11.4L43,11.4L43,16.2L43,21L43,25.8L43,30.6L38,30.6L38,35.4L33,35.4L33,40.2L13,40.2L13,35.4L8,35.4L8,30.6L3,30.6L3,25.8L3,21L3,16.2L3,11.4L8,11.4L8,6.6L13,6.6L13,1.8Z' fill='%231a110e'/%3E%3Cpath d='M32,2.8L32,7.6L37,7.6L37,12.4L42,12.4L42,17.2L42,22L42,26.8L42,31.6L37,31.6L37,36.4L32,36.4L32,41.2L12,41.2L12,36.4L7,36.4L7,31.6L2,31.6L2,26.8L2,22L2,17.2L2,12.4L7,12.4L7,7.6L12,7.6L12,2.8Z' fill='%231a110e'/%3E%3Cpath d='M31,3.8L31,8.6L36,8.6L36,13.4L41,13.4L41,18.2L41,23L41,27.8L41,32.6L36,32.6L36,37.4L31,37.4L31,42.2L11,42.2L11,37.4L6,37.4L6,32.6L1,32.6L1,27.8L1,23L1,18.2L1,13.4L6,13.4L6,8.6L11,8.6L11,3.8Z' fill='%231a110e'/%3E%3Cpath d='M34,0.8L34,5.6L39,5.6L39,10.4L44,10.4L44,15.2L44,20L44,24.8L44,29.6L39,29.6L39,34.4L34,34.4L34,39.2L14,39.2L14,34.4L9,34.4L9,29.6L4,29.6L4,24.8L4,20L4,15.2L4,10.4L9,10.4L9,5.6L14,5.6L14,0.8Z' fill='none' stroke='%230d0706' stroke-width='1.4'/%3E%3Cpath d='M30,4.8L30,9.6L35,9.6L35,14.4L40,14.4L40,19.2L40,24L40,28.8L40,33.6L35,33.6L35,38.4L30,38.4L30,43.2L10,43.2L10,38.4L5,38.4L5,33.6L0,33.6L0,28.8L0,24L0,19.2L0,14.4L5,14.4L5,9.6L10,9.6L10,4.8Z' fill='%233e2b25' stroke='%230d0706' stroke-width='1.6'/%3E%3Cpath d='M30,9.2L30,14.13L35,14.13L35,19.07L35,24L35,28.93L35,33.87L30,33.87L30,38.8L10,38.8L10,33.87L5,33.87L5,28.93L5,24L5,19.07L5,14.13L10,14.13L10,9.2Z' fill='none' stroke='%2352f2ea' stroke-opacity='.55' stroke-width='1.2'/%3E%3C/svg%3E");
  --coin-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 46 46'%3E%3Cpath d='M34,0.8L34,5.6L39,5.6L39,10.4L44,10.4L44,15.2L44,20L44,24.8L44,29.6L39,29.6L39,34.4L34,34.4L34,39.2L14,39.2L14,34.4L9,34.4L9,29.6L4,29.6L4,24.8L4,20L4,15.2L4,10.4L9,10.4L9,5.6L14,5.6L14,0.8Z' fill='%237a5242'/%3E%3Cpath d='M33,1.8L33,6.6L38,6.6L38,11.4L43,11.4L43,16.2L43,21L43,25.8L43,30.6L38,30.6L38,35.4L33,35.4L33,40.2L13,40.2L13,35.4L8,35.4L8,30.6L3,30.6L3,25.8L3,21L3,16.2L3,11.4L8,11.4L8,6.6L13,6.6L13,1.8Z' fill='%231a110e'/%3E%3Cpath d='M32,2.8L32,7.6L37,7.6L37,12.4L42,12.4L42,17.2L42,22L42,26.8L42,31.6L37,31.6L37,36.4L32,36.4L32,41.2L12,41.2L12,36.4L7,36.4L7,31.6L2,31.6L2,26.8L2,22L2,17.2L2,12.4L7,12.4L7,7.6L12,7.6L12,2.8Z' fill='%231a110e'/%3E%3Cpath d='M31,3.8L31,8.6L36,8.6L36,13.4L41,13.4L41,18.2L41,23L41,27.8L41,32.6L36,32.6L36,37.4L31,37.4L31,42.2L11,42.2L11,37.4L6,37.4L6,32.6L1,32.6L1,27.8L1,23L1,18.2L1,13.4L6,13.4L6,8.6L11,8.6L11,3.8Z' fill='%231a110e'/%3E%3Cpath d='M34,0.8L34,5.6L39,5.6L39,10.4L44,10.4L44,15.2L44,20L44,24.8L44,29.6L39,29.6L39,34.4L34,34.4L34,39.2L14,39.2L14,34.4L9,34.4L9,29.6L4,29.6L4,24.8L4,20L4,15.2L4,10.4L9,10.4L9,5.6L14,5.6L14,0.8Z' fill='none' stroke='%230d0706' stroke-width='1.4'/%3E%3Cpath d='M30,4.8L30,9.6L35,9.6L35,14.4L40,14.4L40,19.2L40,24L40,28.8L40,33.6L35,33.6L35,38.4L30,38.4L30,43.2L10,43.2L10,38.4L5,38.4L5,33.6L0,33.6L0,28.8L0,24L0,19.2L0,14.4L5,14.4L5,9.6L10,9.6L10,4.8Z' fill='%233e2b25' stroke='%230d0706' stroke-width='1.6'/%3E%3Cpath d='M30,9.2L30,14.13L35,14.13L35,19.07L35,24L35,28.93L35,33.87L30,33.87L30,38.8L10,38.8L10,33.87L5,33.87L5,28.93L5,24L5,19.07L5,14.13L10,14.13L10,9.2Z' fill='none' stroke='%2352f2ea' stroke-opacity='.55' stroke-width='1.2'/%3E%3Cpath d='M14,18L26,30M26,18L14,30' stroke='%230d0706' stroke-width='5.4' stroke-linecap='square'/%3E%3Cpath d='M14,18L26,30M26,18L14,30' stroke='%23f8ebde' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E");
  /* The low sun's hard shadow, down and to the right. */
  --drop: drop-shadow(3px 5px 0 rgba(0, 0, 0, .5));
  --drop-sm: drop-shadow(2px 3px 0 rgba(0, 0, 0, .45));
}
html.mars body, html.mars button { font-family: var(--sans); }
html.mars body { font-weight: 500; }
html.mars button { font-weight: 700; }
html.mars .stage-error { color: var(--muted); }

/* ---- The printed block ---- */
/* Painted in its own box, so the corners it cuts off are see-through: from the
   top, the ink round its cut corners, the edge between its top and side, its
   outline, its front face's top and right edges with a glint along the top,
   the lit top and the shaded side, then the face (and any texture on it, in
   --blk-tex). The face is the box less --blk-e off its top and right, so a
   block's padding takes those in. */
html.mars #dive .turns, html.mars #dive .tally, html.mars .tool-btn, html.mars .results .card, html.mars .results .card button,
html.mars .mtabs button, html.mars .mentry, html.mars .toast, html.mars .idea-tab, html.mars .idea-card, html.mars .idea-actions button,
html.mars .ss-btn, html.mars .ss-style, html.mars .ss-card, html.mars .ss-chip, html.mars .ss-tab {
  --blk-e: 5px;
  --blk-face: var(--key-face);
  --blk-top: var(--key-top);
  --blk-side: var(--key-side);
  --blk-ink: var(--ink);
  --blk-tex: linear-gradient(transparent, transparent);
  border: 0; border-radius: 0; box-shadow: none;
  background:
    linear-gradient(to bottom right, transparent 50%, var(--blk-ink) 50% calc(50% + 1.5px), transparent calc(50% + 1.5px)) 0 0 / var(--blk-e) var(--blk-e) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1.5px), var(--blk-ink) calc(50% - 1.5px) 50%, transparent 50%) 100% 100% / var(--blk-e) var(--blk-e) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .6px), var(--blk-ink) calc(50% - .6px) calc(50% + .6px), transparent calc(50% + .6px)) 100% 0 / var(--blk-e) var(--blk-e) no-repeat,
    linear-gradient(var(--blk-ink), var(--blk-ink)) var(--blk-e) 0 / 100% 1.5px no-repeat,
    linear-gradient(var(--blk-ink), var(--blk-ink)) 100% 0 / 1.5px calc(100% - var(--blk-e)) no-repeat,
    linear-gradient(var(--blk-ink), var(--blk-ink)) 0 100% / calc(100% - var(--blk-e)) 1.5px no-repeat,
    linear-gradient(var(--blk-ink), var(--blk-ink)) 0 var(--blk-e) / 1.5px 100% no-repeat,
    linear-gradient(var(--blk-ink), var(--blk-ink)) 0 var(--blk-e) / calc(100% - var(--blk-e)) 1px no-repeat,
    linear-gradient(var(--blk-ink), var(--blk-ink)) right var(--blk-e) top var(--blk-e) / 1px 100% no-repeat,
    linear-gradient(rgba(255, 255, 255, .13), rgba(255, 255, 255, .13)) 1.5px calc(var(--blk-e) + 1px) / calc(100% - var(--blk-e) - 3px) 1px no-repeat,
    linear-gradient(to bottom right, transparent 50%, var(--blk-top) 50%) 0 0 / var(--blk-e) var(--blk-e) no-repeat,
    linear-gradient(to bottom right, var(--blk-top) 50%, var(--blk-side) 50%) 100% 0 / var(--blk-e) var(--blk-e) no-repeat,
    linear-gradient(to bottom right, var(--blk-side) 50%, transparent 50%) 100% 100% / var(--blk-e) var(--blk-e) no-repeat,
    linear-gradient(var(--blk-top), var(--blk-top)) var(--blk-e) 0 / calc(100% - 2 * var(--blk-e)) var(--blk-e) no-repeat,
    linear-gradient(var(--blk-side), var(--blk-side)) 100% var(--blk-e) / var(--blk-e) calc(100% - 2 * var(--blk-e)) no-repeat,
    var(--blk-tex) 0 var(--blk-e) / calc(100% - var(--blk-e)) calc(100% - var(--blk-e)) no-repeat,
    linear-gradient(var(--blk-face), var(--blk-face)) 0 var(--blk-e) / calc(100% - var(--blk-e)) calc(100% - var(--blk-e)) no-repeat;
}
/* The looks a block comes in. */
html.mars .results .card, html.mars .idea-card {
  --blk-e: 7px; --blk-face: var(--slab-face); --blk-top: var(--slab-top); --blk-side: var(--slab-side);
}
html.mars .tool-btn, html.mars .ss-btn, html.mars .idea-actions button, html.mars .ss-tab {
  --blk-face: var(--steel-face); --blk-top: var(--steel-top); --blk-side: var(--steel-side);
}
html.mars .results .card button, html.mars .ss-btn.ss-gold, html.mars .idea-actions .idea-save {
  --blk-face: var(--gold-face); --blk-top: var(--gold-top); --blk-side: var(--gold-side);
  color: #1a0904;
}
html.mars .tool-btn.aiming, html.mars .mtabs button.on, html.mars .ss-tab.on, html.mars .ss-chip[aria-pressed="true"] {
  --blk-face: var(--lit-face); --blk-top: var(--lit-top); --blk-side: var(--lit-side);
  --blk-tex: repeating-linear-gradient(rgba(82, 242, 234, .1) 0 1px, transparent 1px 3px);
  color: var(--holo-ink);
}

/* Printing: a thing is laid down layer by layer from its foot up, a clip
   rising with it, and the print head (a line of cyan light, ::after on what's
   printed) riding the top of what's down so far. The clip opens past the box
   once it's done, for the shadow. */
@keyframes mars-print {
  0% { clip-path: inset(100% -14px 0 -14px); }
  99.9% { clip-path: inset(0 -14px 0 -14px); }
  100% { clip-path: inset(-14px); }
}
@keyframes mars-head {
  0% { top: 100%; opacity: 1; }
  99.9% { top: 0; opacity: 1; }
  100% { top: 0; opacity: 0; }
}

/* ---- The dive: the turns, the tally, the line over the board, the tools ---- */
/* The turns are orange numerals extruded like the blocks on a basalt key, under
   a cyan label; the tally a slab of the silos' counts with what this dive has
   brought up printed on in mint cubes, its last cell naming it; the line over
   the board the dive's notes, or a tool's order on hologram glass; the manual a
   coin like the hub's; and the tools steel keys, lit cyan when one's aimed. */
html.mars #dive .hud { gap: 7px; align-items: stretch; }
html.mars #dive .turns {
  min-width: 68px; padding: 9px 9px 4px 4px; gap: 1px;
  filter: var(--drop-sm);
}
html.mars #dive .turns .label {
  font: 700 10.5px/1 var(--sans); letter-spacing: .16em; color: var(--holo);
  padding-bottom: 3px; border-bottom: 1px solid rgba(82, 242, 234, .45);
}
html.mars #turns {
  font-family: var(--display); font-size: 30px; line-height: 1.08; letter-spacing: .02em; padding-top: 3px;
  color: var(--accent); font-variant-numeric: tabular-nums;
  text-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--orange-lo), 3px -3px 0 var(--ink);
}
/* Low: the key goes over to a hot red, and the numerals pulse. */
html.mars #dive .turns.low { --blk-face: #3a1612; --blk-top: #8a2a20; --blk-side: #1a0806; }
html.mars #dive .turns.low .label { color: #ff9a8a; border-color: rgba(255, 90, 74, .5); }
html.mars #dive .turns.low #turns {
  color: var(--danger); text-shadow: 1px -1px 0 #8a1a12, 2px -2px 0 #8a1a12, 3px -3px 0 var(--ink);
  animation: mars-low 1s ease-in-out infinite;
}
@keyframes mars-low { 50% { color: #ffb4a8; transform: scale(1.08); } }
html.mars #dive .tally { padding: 10px 9px 5px 4px; gap: 5px 1px; filter: var(--drop-sm); }
html.mars #dive .tally-item {
  min-width: 0; gap: 3px; font: 700 15px/1 var(--sans); color: var(--text); font-variant-numeric: tabular-nums;
}
html.mars #dive .tally-item img { width: 22px; height: 22px; flex: none; }
html.mars #dive .tally::after {
  content: 'In silo'; display: grid; place-items: center;
  font: 700 9.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--holo);
}
/* What this dive has brought up: a little mint cube, extruded, printed on. */
html.mars .tally-item .gain {
  top: -9px; right: -5px; z-index: 1; padding: 2px 3px 1px; border-radius: 0;
  font: 400 10px/1 var(--display); letter-spacing: .02em; color: #06210f; background: var(--good);
  border: 1px solid var(--ink); box-shadow: 1px -1px 0 var(--mint-lo), 2px -2px 0 var(--mint-lo), 2.5px -2.5px 0 var(--ink);
}
html.mars .tally-item .gain.pop { animation: mars-print .28s steps(4, end) both; }
/* The manual: a coin, the book on its face. */
html.mars #dive .manual-btn {
  width: 46px; height: 46px; flex: none; align-self: center; padding: 4px 4px 0 0;
  display: grid; place-items: center; border: 0; border-radius: 0;
  background: var(--coin) center / 100% 100% no-repeat; filter: var(--drop-sm);
}
html.mars #dive .manual-btn .ico { width: 22px; height: 22px; }
html.mars #dive .manual-btn:active { transform: translate(1px, 2px); filter: none; }
/* The line over the board keeps one height, so the board doesn't jump when
   the notes clear on the first touch. */
html.mars #chain-info {
  height: 48px; min-height: 0; margin: 6px 0 2px; padding: 0 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font: 700 14px/1.15 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* The notes keep to three lines, clear of the idea tab beside them. */
html.mars #chain-info.notes {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-pack: center; -webkit-line-clamp: 3; line-clamp: 3;
  padding: 0 30px; font: 500 12.5px/1.26 var(--sans); letter-spacing: .01em; text-transform: none; color: #b89282;
}
/* A tool's order, on a strip of hologram glass between brackets of light. */
html.mars #chain-info.ok:not(:empty) {
  width: fit-content; max-width: 100%; height: 38px; margin: 11px auto 7px; padding: 0 16px;
  color: var(--holo-ink); text-shadow: 0 0 8px rgba(82, 242, 234, .7);
  background: var(--scan), linear-gradient(rgba(82, 242, 234, .12), rgba(82, 242, 234, .12));
  box-shadow: inset 3px 0 0 var(--holo), inset -3px 0 0 var(--holo), inset 0 -1px 0 rgba(82, 242, 234, .5);
}
html.mars .toolbar { gap: 6px; padding: 10px 1px 7px; }
html.mars .tool-btn {
  flex: 1 1 0; min-width: 62px; min-height: 64px; padding: 8px 8px 5px 3px; gap: 3px; justify-content: center;
  color: var(--text); filter: var(--drop-sm);
}
html.mars .tool-btn .ico { width: 30px; height: 30px; }
html.mars .tool-btn .tname {
  font: 700 11px/1.05 var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: normal; text-align: center;
}
/* How many: a safety-orange cube in the corner. */
html.mars .tool-btn .tcount {
  top: -7px; right: -3px; padding: 3px 4px 1px; border-radius: 0;
  font: 400 10.5px/1 var(--display); color: #1a0904; background: var(--accent);
  border: 1px solid var(--ink); box-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--orange-lo), 2.5px -2.5px 0 var(--ink);
}
html.mars .tool-btn:active:not(:disabled) { transform: translate(1px, 2px); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .45)); }
html.mars .tool-btn:disabled { opacity: .45; filter: none; }
/* Aimed: the key lit cyan, glowing, an AIM tag on its corner. */
html.mars .tool-btn.aiming { filter: drop-shadow(0 0 7px rgba(82, 242, 234, .6)) var(--drop-sm); }
html.mars .tool-btn.aiming::before {
  content: 'Aim'; position: absolute; z-index: 2; top: -7px; left: -3px; padding: 3px 4px 1px;
  font: 400 10px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--holo); border: 1px solid var(--ink);
}
html.mars .tool-btn.aiming .tcount { background: var(--holo-hi); box-shadow: 1px -1px 0 #1f9f9a, 2px -2px 0 #1f9f9a, 2.5px -2.5px 0 var(--ink); }
@media (max-width: 380px) {
  html.mars #dive .hud { gap: 5px; }
  html.mars #dive .turns { min-width: 60px; padding-right: 7px; padding-left: 2px; }
  html.mars #turns { font-size: 26px; }
  html.mars #dive .tally { padding-right: 7px; padding-left: 3px; }
  html.mars #dive .tally-item { font-size: 13.5px; gap: 2px; }
  html.mars #dive .tally-item img { width: 19px; height: 19px; }
  html.mars #dive .tally::after { font-size: 8.5px; letter-spacing: .1em; }
  html.mars #chain-info.notes { font-size: 11.5px; }
  html.mars .tool-btn .tname { font-size: 10px; letter-spacing: .02em; }
}

/* ---- The haul report ---- */
/* The colony's report on the dive: a basalt slab printed up from its foot, its
   title on hologram glass, each ore a row printed in after the last (what was
   mined, in a mint cube, and what's in the silo now), and the way back a
   safety-orange block. */
html.mars .results { background: rgba(10, 5, 4, .82); padding: 14px; }
html.mars .results .card {
  position: relative; max-width: 352px; padding: 8.5px 8.5px 16px 1.5px; color: var(--text);
  filter: var(--drop);
  animation: mars-print .34s steps(8, end) both;
}
html.mars .results .card::after, html.mars .results .card li::after, html.mars .idea-card::after, html.mars .toast::after {
  content: ''; position: absolute; z-index: 3; left: -6px; right: -6px; top: 0; height: 2px; pointer-events: none; opacity: 0;
  background: var(--holo-hi); box-shadow: 0 0 6px 1px rgba(82, 242, 234, .9), 0 0 16px 2px rgba(82, 242, 234, .45);
}
html.mars .results .card::after { animation: mars-head .34s steps(8, end) both; }
/* The title on hologram glass, the printer's mark before it. */
html.mars .results .card h1 {
  position: relative; display: flex; align-items: center; gap: 0 .32em; margin: 0 0 2px; padding: 12px 14px 10px 40px;
  font-size: 22px; line-height: 1; text-align: left; letter-spacing: .03em; color: var(--accent);
  text-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--ink);
  background: var(--scan), linear-gradient(90deg, rgba(82, 242, 234, .16), rgba(82, 242, 234, .05));
  border-bottom: 2px solid rgba(82, 242, 234, .6);
}
html.mars .results .card h1::before {
  content: ''; position: absolute; left: 14px; top: 50%; width: 16px; height: 18px; margin-top: -9px;
  background: var(--cube) center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(82, 242, 234, .6));
}
html.mars .results .card h1::after { content: 'report'; color: var(--text); text-shadow: 1px -1px 0 #6a4636, 2px -2px 0 var(--ink); }
/* The columns: what this dive mined, and what's in the silo now. */
html.mars .results .card ul { position: relative; margin: 0 12px 0 14px; padding-top: 24px; }
html.mars .results .card ul::before, html.mars .results .card ul::after {
  position: absolute; top: 8px; font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--holo);
}
html.mars .results .card ul::before { content: 'Mined'; right: 62px; width: 50px; text-align: center; }
html.mars .results .card ul::after { content: 'In silo'; right: 6px; }
/* Each row a recess in the slab, printed in after the one before. */
html.mars .results .card li {
  position: relative; gap: 9px; min-height: 40px; margin-bottom: 4px; padding: 3px 6px 3px 5px;
  font-size: 15px; border: 0; background: var(--well);
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .55), inset 0 -1px 0 rgba(255, 255, 255, .05), inset 1px 0 0 rgba(0, 0, 0, .4);
  animation: mars-print .3s steps(5, end) both; animation-delay: var(--at, .3s);
}
html.mars .results .card li::after { left: -3px; right: -3px; animation: mars-head .3s steps(5, end) both; animation-delay: var(--at, .3s); }
html.mars .results .card li:nth-child(2) { --at: .37s; }
html.mars .results .card li:nth-child(3) { --at: .44s; }
html.mars .results .card li:nth-child(4) { --at: .51s; }
html.mars .results .card li:nth-child(5) { --at: .58s; }
html.mars .results .card li:nth-child(6) { --at: .65s; }
html.mars .results .card li:nth-child(7) { --at: .72s; }
html.mars .results .card li img { width: 28px; height: 28px; }
html.mars .results .card li .name { font: 700 13.5px/1.15 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
html.mars .results .card li .qty { min-width: 48px; font: 400 15px/1 var(--display); letter-spacing: .02em; color: var(--text); }
/* Mined: a mint cube, extruded; a dash where nothing was. */
html.mars .results .card li .gain {
  display: inline-block; min-width: 46px; margin-right: 4px; padding: 4px 4px 2px; border-radius: 0; text-align: center;
  font: 400 13px/1 var(--display); color: #06210f; background: var(--good);
  border: 1.5px solid var(--ink); box-shadow: 1px -1px 0 var(--mint-lo), 2px -2px 0 var(--mint-lo), 3px -3px 0 var(--ink);
}
html.mars .results .card li .gain:empty { display: inline-block; color: #6a4e42; background: none; border-color: transparent; box-shadow: none; }
html.mars .results .card li .gain:empty::before { content: '\2014'; }
html.mars #results-extra { margin: 10px 14px 0; font: 500 12.5px/1.35 var(--sans); color: var(--muted); }
html.mars #results-extra:empty { display: none; }
/* Back to the rig: a block of safety orange, printed in last. */
html.mars .results .card button {
  width: calc(100% - 26px); margin: 14px 12px 0 14px; padding: 16px 20px 10px 14px;
  font-family: var(--display); font-weight: 400; font-size: 18px; letter-spacing: .04em; filter: var(--drop-sm);
  animation: mars-print .26s .8s steps(4, end) both;
}
html.mars .results .card button:active { transform: translate(1px, 2px); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .45)); }
@media (max-height: 680px) {
  html.mars .results .card h1 { padding-top: 10px; padding-bottom: 8px; font-size: 20px; }
  html.mars .results .card ul { padding-top: 22px; }
  html.mars .results .card li { min-height: 35px; margin-bottom: 3px; padding-top: 2px; padding-bottom: 2px; }
  html.mars .results .card li img { width: 25px; height: 25px; }
  html.mars .results .card button { margin-top: 10px; padding-top: 14px; padding-bottom: 8px; }
}

/* ---- The field terminal (the manual) ---- */
/* The colony's field terminal: a basalt screen ruled faintly in cubes, its
   head on hologram glass with the close coin, the tabs printed keys (the open
   one lit cyan), and each page scanned in from the top under the print head.
   Sections are strips of glass with the printer's mark, steps numbered on
   orange cubes, and entries printed basalt cards. */
@property --mars-scan { syntax: '<percentage>'; inherits: false; initial-value: 110%; }
html.mars #manual { background: rgba(10, 5, 4, .9); }
html.mars .mpanel {
  position: relative; color: var(--text);
  padding: 0 12px calc(env(safe-area-inset-bottom) + 6px);
  background:
    linear-gradient(rgba(248, 235, 222, .022) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(90deg, rgba(248, 235, 222, .022) 1px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(ellipse 120% 50% at 50% 0%, rgba(82, 242, 234, .06), transparent 70%),
    linear-gradient(#1d1310, var(--bg) 40%, #110a08);
}
@media (min-width: 580px) {
  html.mars .mpanel { box-shadow: -1.5px 0 0 var(--ink), 1.5px 0 0 var(--ink), 7px 0 0 var(--slab-side), 8.5px 0 0 var(--ink); }
}
html.mars .mhead {
  flex: none; margin: 0 -12px; padding: calc(env(safe-area-inset-top) + 8px) 12px 8px 14px;
  background: var(--scan), linear-gradient(rgba(82, 242, 234, .1), rgba(82, 242, 234, .04));
  border-bottom: 2px solid rgba(82, 242, 234, .6); box-shadow: 0 1.5px 0 var(--ink);
}
html.mars .mhead h2 {
  display: grid; grid-template-columns: auto 1fr; column-gap: 11px; align-items: center;
  font-size: 19px; line-height: 1.1; letter-spacing: .03em; color: var(--accent);
  text-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--ink);
}
html.mars .mhead h2 .ico {
  grid-row: 1 / span 2; width: 38px; height: 38px; padding: 5px; vertical-align: 0;
  background: rgba(82, 242, 234, .1); box-shadow: inset 0 0 0 1px rgba(82, 242, 234, .55), 0 0 10px rgba(82, 242, 234, .2);
}
html.mars .mhead h2::after {
  content: 'Colony field terminal'; font: 700 10px/1.2 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--holo); text-shadow: none;
}
html.mars .mclose {
  width: 46px; height: 46px; flex: none; padding: 0; font-size: 0; color: transparent;
  border: 0; border-radius: 0; background: var(--coin-x) center / 100% 100% no-repeat; filter: var(--drop-sm);
}
html.mars .mclose:active { transform: translate(1px, 2px); filter: none; }
/* The tabs: printed keys in a row, the page you're on lit. */
html.mars .mtabs { gap: 6px; padding: 12px 1px 9px; }
html.mars .mtabs button {
  flex: none; padding: 12px 12px 6px 8px; min-height: 44px;
  font: 700 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
html.mars .mtabs button:active:not(.on) { --blk-face: var(--steel-face); color: var(--text); }
html.mars .msearch {
  margin: 0 0 8px; padding: 11px 12px 10px 38px; font: 500 16px var(--sans); color: var(--text);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 3h9v9H3z' fill='none' stroke='%2352f2ea' stroke-width='2.4'/%3E%3Cpath d='M12 12l5 5' stroke='%23ff8a3a' stroke-width='3.4'/%3E%3C/svg%3E") 12px 50% / 17px 17px no-repeat, var(--scan), var(--well);
  border: 1.5px solid var(--seam); border-radius: 0; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .6);
}
html.mars .msearch::placeholder { font: 700 14px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #7e6256; opacity: 1; }
html.mars .msearch:focus { outline: none; border-color: var(--holo); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .6), 0 0 10px rgba(82, 242, 234, .3); }
/* The page, scanned in from the top whenever it's drawn: a cover the size of
   the page's window (a size container, so 100cqh is its height), stuck to the
   top as it scrolls, with the print head along its top edge and the terminal's
   dark below it, runs down and off. */
html.mars .mbody { padding: 2px 4px 34px 2px; color: var(--text); container-type: size; }
html.mars .mbody::before {
  content: ''; display: block; position: sticky; z-index: 4; top: 0; pointer-events: none;
  height: calc(100cqh + 36px); margin: -2px -4px calc(-100cqh - 34px) -2px;
  background: linear-gradient(transparent calc(var(--mars-scan) - 22px), rgba(82, 242, 234, .14) calc(var(--mars-scan) - 3px),
    var(--holo-hi) calc(var(--mars-scan) - 2px), var(--holo) var(--mars-scan), var(--bg) var(--mars-scan));
  animation: mars-scan .5s steps(12, end) both;
}
@keyframes mars-scan { from { --mars-scan: 0%; } to { --mars-scan: 110%; } }
html.mars .mbody p, html.mars .mbody li { font-size: 15px; line-height: 1.5; }
html.mars .mbody b { font-weight: 700; color: var(--orange-hi); }
html.mars .mguide > p { margin: 8px 0; }
html.mars .mguide h3, html.mars .mgroup {
  display: flex; align-items: center; gap: 10px; min-height: 36px; margin: 24px 0 10px; padding: 8px 10px 6px 10px;
  font-family: var(--display); font-weight: 400; font-size: 16px; line-height: 1.1; letter-spacing: .03em; color: var(--accent);
  text-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--ink);
  background: var(--scan), linear-gradient(90deg, rgba(82, 242, 234, .15), rgba(82, 242, 234, .03) 75%, transparent);
  border-bottom: 2px solid rgba(82, 242, 234, .55); box-shadow: inset 3px 0 0 var(--holo);
}
html.mars .mguide h3::before, html.mars .mgroup::before {
  content: ''; flex: none; width: 14px; height: 16px; background: var(--cube) center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(82, 242, 234, .6));
}
html.mars .mguide h3:first-child, html.mars .mbody > .mgroup:first-child { margin-top: 6px; }
/* Bullets are little cyan cubes; numbered steps sit on orange ones. */
html.mars .mguide ul, html.mars .mguide ol { list-style: none; margin: 0; }
html.mars .mguide ul { padding-left: 20px; }
html.mars .mguide ol { padding-left: 34px; counter-reset: step; }
html.mars .mguide li { position: relative; margin-bottom: 7px; }
html.mars .mguide ul > li::before {
  content: ''; position: absolute; left: -18px; top: .38em; width: 9px; height: 10px;
  background: var(--cube) center / contain no-repeat;
}
html.mars .mguide ol > li { counter-increment: step; }
html.mars .mguide ol > li::before {
  content: counter(step); position: absolute; left: -33px; top: 2px; width: 22px; height: 22px; padding-top: 2px;
  display: grid; place-items: center; font: 400 12px/1 var(--display); color: #1a0904; background: var(--accent);
  border: 1.5px solid var(--ink); box-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--orange-lo), 3px -3px 0 var(--ink);
}
/* Tables are readouts in a recess, the head row on cyan glass. */
html.mars .mtable {
  width: calc(100% - 2px); margin: 12px 0 6px; font-size: 14.5px;
  background: var(--well); border: 1.5px solid var(--seam); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .55);
}
html.mars .mtable th {
  font: 700 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--holo);
  background: var(--scan), rgba(82, 242, 234, .08); border-bottom: 1.5px solid rgba(82, 242, 234, .45);
}
html.mars .mtable th, html.mars .mtable td { padding: 5px 8px; }
html.mars .mtable td { border-bottom: 1px solid rgba(248, 235, 222, .07); }
html.mars .mtable tr:last-child td { border-bottom: 0; }
html.mars .mguide .mtable td:last-child { font: 400 14px/1 var(--display); color: var(--text); }
/* Recipes in fixed columns, so a long name wraps inside its chip. */
html.mars .mtable.recipes { table-layout: fixed; }
html.mars .mtable.recipes td { padding: 5px 4px 5px 6px; }
html.mars .mtable.recipes td:nth-child(1) { width: 54%; }
html.mars .mtable.recipes td:nth-child(2) { width: 20px; padding: 0; font: 700 18px var(--sans); color: var(--holo); text-align: center; }
html.mars .mtable.recipes td:nth-child(3) { text-align: right; }
html.mars .mtable.recipes .mlink { white-space: normal; max-width: 100%; text-align: left; }
/* Entries: printed basalt cards, the picture on a plinth of cyan glass, the
   kind on a cyan tag. */
html.mars .mentry { margin: 0 0 12px; padding: 14px 16px 13px 12px; scroll-margin-top: 8px; filter: var(--drop-sm); }
html.mars .mentry header { gap: 12px; padding-bottom: 9px; border-bottom: 1px solid rgba(82, 242, 234, .22); }
html.mars .mentry header .ico.big {
  width: 48px; height: 48px; padding: 4px;
  background: var(--scan), rgba(82, 242, 234, .08); box-shadow: inset 0 0 0 1px rgba(82, 242, 234, .5);
}
html.mars .mentry h4 { font: 400 15px/1.15 var(--display); letter-spacing: .02em; color: var(--text); text-shadow: 1px -1px 0 var(--ink); }
html.mars .mentry header small {
  display: inline-block; margin-top: 5px; padding: 3px 6px 2px;
  font: 700 10.5px/1.1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--holo);
  background: rgba(82, 242, 234, .08); box-shadow: inset 0 0 0 1px rgba(82, 242, 234, .55);
}
html.mars .mentry > p { margin: 9px 0 0; }
html.mars .mrow { margin: 8px 0 0; padding-left: 68px; text-indent: -68px; font-size: 14.5px; }
html.mars .mlabel { width: 68px; font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--holo); }
html.mars .mtier { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(82, 242, 234, .3); font-size: 14.5px; }
html.mars .mtier div { margin-top: 5px; }
html.mars .mtier b { color: var(--text); }
/* Links: little printed chips, lit along the top, the count in orange blocks. */
html.mars .mlink {
  gap: 4px; margin: 2px 4px 2px 0; padding: 2px 8px 1px 3px; vertical-align: middle;
  font: 700 13px/1.5 var(--sans); color: var(--text); background: var(--steel-face);
  border: 1px solid var(--ink); border-radius: 0; box-shadow: inset 0 2px 0 var(--steel-top), 1px 1px 0 rgba(0, 0, 0, .4);
}
html.mars .mlink b { font: 400 12.5px/1 var(--display); color: var(--accent); }
html.mars .mlink .ico { width: 20px; height: 20px; }
html.mars .mlink:active { background: var(--lit-face); box-shadow: inset 0 2px 0 var(--lit-top); }
html.mars .mbody > p.muted { color: var(--muted); }
/* Jumped to: the card flares cyan, like a hologram coming on. */
html.mars .mentry.flash { animation: mars-flash 1.4s ease; }
@keyframes mars-flash {
  0%, 35% { filter: drop-shadow(0 0 2px var(--holo)) drop-shadow(0 0 9px rgba(82, 242, 234, .7)) var(--drop-sm); }
}

/* ---- Toasts ---- */
/* A slab of basalt printed in under the head, the printer's mark at its left,
   lettered in block capitals; then it fades. */
html.mars .toast {
  top: calc(env(safe-area-inset-top) + 60px); padding: 13px 19px 8px 36px;
  font-size: 13.5px; line-height: 1.25; letter-spacing: .03em; text-align: center; color: var(--text);
  white-space: normal; overflow-wrap: break-word; width: max-content; max-width: min(400px, calc(100vw - 32px));
  filter: var(--drop);
}
html.mars .toast::before {
  content: ''; position: absolute; left: 12px; top: calc(50% + 2.5px); width: 14px; height: 16px; margin-top: -8px;
  background: var(--cube) center / contain no-repeat;
}
html.mars .toast.show { animation: mars-toast 2s linear; }
html.mars .toast.show::after { animation: mars-toast-head 2s linear; }
@keyframes mars-toast {
  0% { opacity: 1; transform: translate(-50%, 0); clip-path: inset(100% -14px 0 -14px); animation-timing-function: steps(5, end); }
  12% { opacity: 1; transform: translate(-50%, 0); clip-path: inset(0 -14px 0 -14px); }
  12.1%, 82% { opacity: 1; transform: translate(-50%, 0); clip-path: inset(-14px); }
  100% { opacity: 0; transform: translate(-50%, 0); clip-path: inset(-14px); }
}
@keyframes mars-toast-head {
  0% { top: 100%; opacity: 1; animation-timing-function: steps(5, end); }
  12% { top: 0; opacity: 1; }
  12.1%, 100% { top: 0; opacity: 0; }
}

/* ---- The idea tab and its sheet ---- */
/* The tab is a little printed key on the screen's edge, the bulb behind cyan
   glass; the sheet a basalt slab printed in, its title on glass, the note in a
   recess, the buttons printed blocks. */
html.mars .idea-tab, html.mars .idea-tab.right {
  width: 38px; height: 50px; padding: 4px 4px 0 0; opacity: .95; filter: var(--drop-sm);
  --blk-e: 4px; --blk-top: #8a5440;
}
html.mars .idea-tab img {
  width: 26px; height: 26px; padding: 2px;
  background: rgba(82, 242, 234, .12); box-shadow: inset 0 0 0 1px rgba(82, 242, 234, .6);
}
html.mars .idea-tab:focus-visible { outline: 2px solid var(--holo); outline-offset: 2px; }
html.mars .idea-sheet { background: rgba(10, 5, 4, .6); }
html.mars .idea-card {
  position: relative; gap: 12px; padding: 8.5px 22px 18px 15.5px; color: var(--text);
  filter: var(--drop); animation: mars-print .26s steps(6, end) both;
}
html.mars .idea-card::after { animation: mars-head .26s steps(6, end) both; }
html.mars .idea-sheet .idea-card h2 {
  position: relative; margin: 0 -14px; padding: 12px 14px 9px 40px;
  font-size: 19px; line-height: 1.1; letter-spacing: .03em; color: var(--accent);
  text-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--ink);
  background: var(--scan), linear-gradient(90deg, rgba(82, 242, 234, .16), rgba(82, 242, 234, .05));
  border-bottom: 2px solid rgba(82, 242, 234, .6);
}
html.mars .idea-sheet .idea-card h2::before {
  content: ''; position: absolute; left: 14px; top: 50%; width: 16px; height: 18px; margin-top: -9px;
  background: var(--cube) center / contain no-repeat; filter: drop-shadow(0 0 4px rgba(82, 242, 234, .6));
}
html.mars .idea-card textarea, html.mars .ss textarea {
  padding: 10px 12px; font: 500 16px/1.45 var(--sans); color: var(--text);
  background: var(--scan), var(--well); border: 1.5px solid var(--seam); border-radius: 0; box-shadow: inset 0 2px 0 rgba(0, 0, 0, .6);
}
html.mars .idea-card textarea:focus, html.mars .ss textarea:focus { outline: none; border-color: var(--holo); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .6), 0 0 10px rgba(82, 242, 234, .3); }
html.mars .idea-card textarea::placeholder, html.mars .ss textarea::placeholder { color: #7e6256; }
html.mars .idea-where { font-size: 12.5px; color: var(--muted); }
html.mars .idea-actions { gap: 12px; }
html.mars .idea-actions button, html.mars .ss-btn {
  min-height: 46px; padding: 13px 18px 8px 13px;
  font: 400 13.5px/1 var(--display); letter-spacing: .03em; color: var(--text); filter: var(--drop-sm);
}
html.mars .idea-actions button:active, html.mars .ss-btn:active:not(:disabled) { transform: translate(1px, 2px); filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, .45)); }

/* ---- The Styles and Ideas pages ---- */
/* Under a butterscotch dusk on a page ruled in cubes like the printer's bed:
   cards are printed basalt keys, buttons steel and orange blocks, headings
   block capitals on hologram rules, switches a slot with a cube that lights
   mint, and the tabs along the bottom printed keys on a slab (drawn the same on
   the balance page, so the strip holds still between them). */
html.mars.doc { background: var(--bg); }
html.mars.doc body.ss {
  background:
    radial-gradient(ellipse 130% 360px at 50% -90px, rgba(242, 200, 154, .3), rgba(201, 138, 106, .14) 48%, transparent 76%),
    linear-gradient(rgba(248, 235, 222, .025) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgba(248, 235, 222, .025) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
}
html.mars body.ss { font-size: 15px; }
html.mars .ss :focus-visible { outline: 2px solid var(--holo); outline-offset: 3px; }
html.mars .ss-top { gap: 14px; }
html.mars .ss h1 { font-size: 24px; letter-spacing: .03em; color: var(--accent); text-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--orange-lo), 3px -3px 0 var(--ink); }
html.mars .ss h2 { display: flex; align-items: center; gap: 10px; font-size: 20px; letter-spacing: .03em; color: var(--accent); text-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--ink); }
html.mars .ss h2::before {
  content: ''; flex: none; width: 16px; height: 18px; background: var(--cube) center / contain no-repeat;
  filter: drop-shadow(0 0 4px rgba(82, 242, 234, .55));
}
html.mars .ss h3 { font-size: 16px; letter-spacing: .02em; color: var(--text); }
html.mars .ss h4 { font-size: 14px; letter-spacing: .02em; color: var(--text); }
html.mars .ss-head { padding-bottom: 7px; border-bottom: 2px solid rgba(82, 242, 234, .5); box-shadow: 0 1.5px 0 var(--ink); }
html.mars .ss-head:has(h3) { border-bottom-width: 1px; box-shadow: none; }
html.mars .ss-note { color: var(--muted); }
html.mars .ss-status, html.mars .ss-copied { color: var(--holo); font-weight: 700; }
html.mars .ss-btn span[aria-hidden] { font: 700 22px/.6 var(--sans); margin-top: -2px; }
html.mars .ss-btn:disabled { opacity: .4; filter: none; }
html.mars .ss-top .ss-btn { min-height: 44px; }
html.mars .ss-style, html.mars .ss-card { --blk-e: 6px; padding: 17px 18px 13px 12px; color: var(--text); filter: var(--drop-sm); }
html.mars .ss-preview { padding: 6px 6px 0 0; }
html.mars .ss-swatch { grid-template-columns: repeat(2, 16px); gap: 3px; padding-top: 4px; }
html.mars .ss-swatch i { width: 16px; height: 16px; border-radius: 0; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .22), inset -2px 0 0 rgba(0, 0, 0, .25), 0 0 0 1px var(--ink); }
html.mars .ss-style-text p { font-size: 13.5px; color: var(--muted); }
/* The style in play: a mint tag, extruded. */
html.mars .ss-here, html.mars .ss-pick, html.mars .id-waiting {
  display: inline-block; padding: 3px 6px 2px; border-radius: 0;
  font: 700 10.5px/1.1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: #06210f; background: var(--good); border: 1px solid var(--ink);
  box-shadow: 1px -1px 0 var(--mint-lo), 2px -2px 0 var(--mint-lo), 2.5px -2.5px 0 var(--ink);
}
html.mars .ss-here { margin-left: 6px; vertical-align: 3px; }
html.mars .ss-pick, html.mars .id-waiting { color: #1a0904; background: var(--accent); box-shadow: 1px -1px 0 var(--orange-lo), 2px -2px 0 var(--orange-lo), 2.5px -2.5px 0 var(--ink); }
/* The switch: a slot in the slab with a cube in it, lit mint and over to the
   right when it's on. */
html.mars .ss-switch span {
  width: 54px; height: 28px; border-radius: 0; background: var(--well);
  border: 1.5px solid var(--seam); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .6);
}
html.mars .ss-switch span::after {
  top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 0;
  background: #7a665c; box-shadow: inset 0 3px 0 #a89286, inset -3px 0 0 #4e3e36, 0 0 0 1px var(--ink);
}
html.mars .ss-switch input:checked + span { background: #0e2a1c; border-color: var(--mint-lo); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .5), 0 0 10px rgba(126, 240, 164, .25); }
html.mars .ss-switch input:checked + span::after { transform: translateX(26px); background: var(--good); box-shadow: inset 0 3px 0 #b8ffd4, inset -3px 0 0 var(--mint-lo), 0 0 0 1px var(--ink); }
html.mars .ss-switch input:focus-visible + span { outline: 2px solid var(--holo); outline-offset: 2px; }
html.mars .ss-switch b { font: 400 13px/1 var(--display); letter-spacing: .03em; }
/* The redesign kit. */
html.mars .ss-field > label:not(.ss-choice), html.mars .ss-field > legend, html.mars .id-new > label {
  font: 400 14px/1.2 var(--display); letter-spacing: .03em; color: var(--text);
}
html.mars .ss textarea { font-size: 15px; }
html.mars .ss-choice { padding: 10px 12px; border-radius: 0; border: 1.5px solid var(--seam); background: var(--well); box-shadow: inset 0 2px 0 rgba(0, 0, 0, .45); }
html.mars .ss-choice b { font: 400 13px/1.35 var(--display); letter-spacing: .02em; }
html.mars .ss-choice span { font-size: 13.5px; color: var(--muted); }
html.mars .ss-choice:has(input:checked) { border-color: var(--holo); background: var(--scan), #10201f; box-shadow: inset 4px 0 0 var(--holo), 0 0 10px rgba(82, 242, 234, .2); }
html.mars .ss-choice input, html.mars .ss-tick input { accent-color: var(--holo); }
html.mars .ss-preview-head {
  font: 700 11px/1.2 var(--sans); letter-spacing: .16em; color: var(--holo);
  background: var(--scan), rgba(82, 242, 234, .08); border-bottom: 2px solid rgba(82, 242, 234, .5);
}
html.mars .ss #prompt { color: #e8dcd0; background: var(--scan), var(--well); font-size: 12.5px; }
html.mars .ss #prompt b { color: var(--holo); }
/* Chips: little printed keys; the chosen ones lit cyan. */
html.mars .ss-chip {
  --blk-e: 4px; min-height: 44px; padding: 11px 13px 6px 9px;
  font: 700 13.5px/1.1 var(--sans); letter-spacing: .02em; color: var(--text);
}
html.mars .ss-idea.used { --blk-ink: var(--holo); filter: drop-shadow(0 0 8px rgba(82, 242, 234, .35)) var(--drop-sm); }
html.mars .ss-idea-top { color: var(--holo); font: 700 11px/1.2 var(--sans); letter-spacing: .14em; }
html.mars .ss-idea > p { font-size: 14.5px; }
html.mars .ss-idea dt { color: var(--holo); font: 700 10.5px/1.2 var(--sans); letter-spacing: .14em; }
html.mars .ss-idea dd { font-size: 14px; }
html.mars .ss-idea summary { color: var(--accent); font: 700 13.5px/1.2 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
html.mars .ss-idea summary::before {
  content: ''; width: 7px; height: 10px; background: var(--holo); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .15s;
}
html.mars .ss-idea details[open] summary::before { content: ''; transform: rotate(90deg); }
/* The tabs along the bottom: printed keys on a basalt slab with a rule of
   cyan along its top, the page you're on lit. */
html.mars .ss-nav {
  gap: 7px; padding-top: 9px;
  background: var(--scan), linear-gradient(var(--key-face), #1a1210);
  border-top: 2px solid rgba(82, 242, 234, .7); box-shadow: 0 -1.5px 0 var(--ink), 0 -8px 18px rgba(0, 0, 0, .45);
}
html.mars .ss-tab { --blk-e: 4px; padding: 4px 4px 0 0; font-size: 14px; letter-spacing: .03em; color: var(--text); filter: var(--drop-sm); }
html.mars .ss-tab:active { transform: translate(1px, 2px); }
@media (max-width: 400px) { html.mars .ss-tab { gap: 6px; font-size: 12.5px; letter-spacing: .01em; } }

/* ---- The Ideas page ---- */
html.mars .id-text { font-size: 16px; line-height: 1.45; }
html.mars .id-meta { font-size: 12.5px; color: var(--muted); }
html.mars .id-waiting { margin-left: 6px; vertical-align: 1px; }
/* Delete, armed: the block goes hot red. */
html.mars .ss-btn.id-armed { --blk-face: #3a1612; --blk-top: #8a2a20; --blk-side: #1a0806; }
html.mars .id-idea { position: relative; }
/* Ticked off: the card cools, the text struck through, a mint DONE tag on it. */
html.mars .id-idea.done { --blk-face: #1e1512; --blk-top: #4a3228; }
html.mars .id-idea.done .id-text { opacity: .55; text-decoration-thickness: 2px; text-decoration-color: var(--muted); }
html.mars .id-idea.done::after {
  content: 'Done'; position: absolute; right: 22px; bottom: 18px; padding: 3px 6px 2px; pointer-events: none;
  font: 700 10.5px/1.1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: #06210f; background: var(--good); border: 1px solid var(--ink);
  box-shadow: 1px -1px 0 var(--mint-lo), 2px -2px 0 var(--mint-lo), 2.5px -2.5px 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  html.mars .results .card, html.mars .results .card li, html.mars .results .card button, html.mars .idea-card,
  html.mars .tally-item .gain.pop, html.mars .mbody::before, html.mars #dive .turns.low #turns { animation: none; }
  html.mars .results .card::after, html.mars .results .card li::after, html.mars .idea-card::after, html.mars .toast::after { display: none; }
  html.mars .toast.show { animation: mars-toast-still 2s linear; }
}
@keyframes mars-toast-still {
  0%, 82% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, 0); }
}
/* [/mars:screens] */

/* Regolith: the mini games */
/* The overlay foundry.js builds (mars-games.js draws its two canvases), as the
   colony's printed blocks and hologram glass. The furnace's card is a basalt
   block seen a little from above and to the right, its top lit and its right
   side in shade, every face inked round (the extrusion is the ::before, an L
   cut by clip-path round the face). Its title sits on a strip of cyan
   hologram; the readouts are small printed blocks with their numbers in
   Bungee; progress is a row of hot cubes; the button is a block of safety
   orange that sinks into its socket while held. The ring is square, like
   everything printed here: orange as it fills, cyan-white and dancing in the
   sweet spot, mint when the pour is maxed. The mill takes the whole screen,
   its bed a block of its own, with a masthead over it where there's room. */
html.mars #minigame.mg {
  background: repeating-linear-gradient(rgba(82, 242, 234, .025) 0 1px, transparent 1px 4px), rgba(18, 10, 8, .9);
}
html.mars #minigame .mg-card {
  max-width: 392px; padding: 12px 14px 16px; color: var(--text);
  background: linear-gradient(rgba(255, 255, 255, .035), transparent 40%), #251a16;
  border: 2px solid #0d0706; border-radius: 0; box-shadow: none;
}
html.mars #minigame :is(.mg-card:not(.mill-screen), .mg-stat, .mg-btn, .fx-item)::before {
  content: ''; position: absolute; pointer-events: none;
  left: -2px; bottom: -2px; top: -9px; right: -9px;
  clip-path: polygon(0 7px, 7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, calc(100% - 7px) 7px);
  background:
    linear-gradient(to bottom right, #5e4338 calc(50% - .8px), #0d0706 0 calc(50% + .8px), #120a08 0) right top / 7px 7px no-repeat,
    linear-gradient(#120a08, #120a08) right bottom / 7px calc(100% - 7px) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1.1px), #0d0706 0 calc(50% + 1.1px), transparent 0) left top / 7px 7px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1.1px), #0d0706 0 calc(50% + 1.1px), transparent 0) right bottom / 7px 7px no-repeat,
    linear-gradient(#0d0706, #0d0706) left top / 100% 2px no-repeat,
    linear-gradient(#0d0706, #0d0706) right top / 2px 100% no-repeat,
    linear-gradient(90deg, #5e4338, #4a342c);
}
/* The smaller blocks stand 4 px proud. */
html.mars #minigame :is(.mg-stat, .fx-item)::before {
  left: -1.5px; bottom: -1.5px; top: -5.5px; right: -5.5px;
  clip-path: polygon(0 4px, 4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, calc(100% - 4px) 4px);
  background:
    linear-gradient(to bottom right, #4e3830 calc(50% - .6px), #0d0706 0 calc(50% + .6px), #120a08 0) right top / 4px 4px no-repeat,
    linear-gradient(#120a08, #120a08) right bottom / 4px calc(100% - 4px) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .9px), #0d0706 0 calc(50% + .9px), transparent 0) left top / 4px 4px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .9px), #0d0706 0 calc(50% + .9px), transparent 0) right bottom / 4px 4px no-repeat,
    linear-gradient(#0d0706, #0d0706) left top / 100% 1.5px no-repeat,
    linear-gradient(#0d0706, #0d0706) right top / 1.5px 100% no-repeat,
    #4e3830;
}
html.mars #minigame .mg-card h2 {
  margin: 0 0 8px; padding: 6px 10px 4px; text-align: left; line-height: 1.12;
  font-family: var(--display); font-weight: 400; font-size: 17px; letter-spacing: .03em; text-transform: uppercase;
  color: #c8fffb; text-shadow: 0 0 8px rgba(82, 242, 234, .75);
  background:
    repeating-linear-gradient(rgba(82, 242, 234, .12) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, rgba(82, 242, 234, .2), rgba(82, 242, 234, .05) 70%, transparent);
  border-top: 1.5px solid var(--holo); border-bottom: 1px solid rgba(82, 242, 234, .35);
  animation: mars-holo 2.6s steps(1) infinite;
}
@keyframes mars-holo { 0%, 100% { opacity: 1; } 91% { opacity: .82; } 93% { opacity: 1; } 95% { opacity: .9; } }
html.mars #minigame .mg-help { margin: 0 0 10px; font-family: var(--sans); font-weight: 500; font-size: 13px; line-height: 1.32; color: var(--muted); text-align: left; }
html.mars #minigame .gauge, html.mars #minigame .furnace-mouth { display: none; }
html.mars #minigame .mg-scene { display: flex; justify-content: center; margin: 0 0 14px; line-height: 0; }
html.mars #minigame .mg-scene canvas {
  display: block; max-width: 100%; height: auto; border: 2px solid #0d0706; background: #c98a6a;
  box-shadow: 1px 1px 0 #5e4338, 0 0 0 1px rgba(82, 242, 234, .18);
}
html.mars #minigame .heat-wrap { margin: 0 0 12px; }
html.mars #minigame .heat-side { flex: 1; flex-direction: row; gap: 10px; padding-right: 6px; }
html.mars #minigame .mg-stat {
  position: relative; flex: 1 1 0; min-width: 0; justify-content: center; padding: 4px 7px 3px;
  background: linear-gradient(rgba(255, 255, 255, .04), transparent 50%), #1c1311;
  border: 1.5px solid #0d0706; border-radius: 0;
}
html.mars #minigame .mg-stat span { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: .12em; line-height: 1.2; color: var(--muted); white-space: nowrap; }
html.mars #minigame .mg-stat b { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.15; letter-spacing: .02em; color: var(--text); }
html.mars #minigame .mg-stat.paused b { color: #ff5a4a; }
html.mars #minigame .mg-stat.mg-coal, html.mars #minigame .mg-stat.mg-gain { gap: 5px; padding-left: 4px; }
html.mars #minigame .mg-coal img { width: 30px; height: 30px; }
html.mars #minigame .gain-ring {
  --fill: #ff8a3a; --track: rgba(82, 242, 234, .16);
  border-radius: 0; box-shadow: 0 0 0 1.5px #0d0706;
}
html.mars #minigame .gain-ring::before { inset: 4px; border-radius: 0; background: #1a1210; box-shadow: 0 0 0 1px #0d0706; }
html.mars #minigame .mg-gain .gain-ring { width: 34px; height: 34px; }
html.mars #minigame .mg-gain .gain-ring.rush {
  --fill: #c8fffb;
  box-shadow: 0 0 0 1.5px #0d0706, 0 0 0 3.5px var(--holo), 0 0 14px 3px rgba(82, 242, 234, .7);
}
html.mars #minigame .gain-ring.max { --fill: #7ef0a4; box-shadow: 0 0 0 1.5px #0d0706, 0 0 12px rgba(126, 240, 164, .6); }
html.mars #minigame .mg-bar {
  height: 14px; margin: 0 0 8px; border: 2px solid #0d0706; border-radius: 0;
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(82, 242, 234, .14) 10px 11px), #1a1210;
}
html.mars #minigame .mg-bar i {
  background:
    linear-gradient(rgba(255, 226, 190, .75) 0 2px, transparent 2px calc(100% - 2px), rgba(90, 24, 6, .5) calc(100% - 2px)),
    repeating-linear-gradient(90deg, #ff8a3a 0 9px, #8a3210 9px 11px);
  box-shadow: 0 0 10px rgba(255, 138, 58, .5);
}
html.mars #minigame .mg-status {
  min-height: 20px; margin: 0 0 10px; font-family: var(--sans); font-weight: 700; font-size: 13.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
html.mars #minigame .mg-status.good { color: #7ef0a4; text-shadow: 0 0 10px rgba(126, 240, 164, .45); }
html.mars #minigame .mg-status.hot { color: #ff8a3a; }
html.mars #minigame .mg-status.bad { color: #ff5a4a; }
/* The button: a block of safety orange, inked, that sinks 4 px into its socket. */
html.mars #minigame .mg-btn {
  position: relative; width: calc(100% - 7px); padding: 13px 12px 11px; margin-top: 7px;
  font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
  color: #1a0904; background: linear-gradient(#ff9e5a, #ff8a3a 55%, #f27a2c);
  border: 2px solid #0d0706; border-radius: 0; box-shadow: inset 0 2px 0 rgba(255, 236, 214, .45);
  transition: transform .05s;
}
html.mars #minigame .mg-btn::before {
  background:
    linear-gradient(to bottom right, #ffc490 calc(50% - .8px), #0d0706 0 calc(50% + .8px), #9a3a0c 0) right top / 7px 7px no-repeat,
    linear-gradient(#9a3a0c, #9a3a0c) right bottom / 7px calc(100% - 7px) no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1.1px), #0d0706 0 calc(50% + 1.1px), transparent 0) left top / 7px 7px no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - 1.1px), #0d0706 0 calc(50% + 1.1px), transparent 0) right bottom / 7px 7px no-repeat,
    linear-gradient(#0d0706, #0d0706) left top / 100% 2px no-repeat,
    linear-gradient(#0d0706, #0d0706) right top / 2px 100% no-repeat,
    #ffc490;
}
html.mars #minigame .mg-btn:active, html.mars #minigame .mg-btn.held {
  transform: translate(4px, -4px); box-shadow: inset 0 2px 0 rgba(255, 236, 214, .3), inset 0 0 14px rgba(120, 30, 0, .35); filter: none;
}
html.mars #minigame :is(.mg-btn:active, .mg-btn.held)::before {
  top: -5px; right: -5px;
  clip-path: polygon(0 3px, 3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, calc(100% - 3px) 3px);
  background:
    linear-gradient(to bottom right, #ffc490 calc(50% - .6px), #0d0706 0 calc(50% + .6px), #9a3a0c 0) right top / 3px 3px no-repeat,
    linear-gradient(#9a3a0c, #9a3a0c) right bottom / 3px calc(100% - 3px) no-repeat,
    linear-gradient(#0d0706, #0d0706) left top / 100% 1.5px no-repeat,
    linear-gradient(#0d0706, #0d0706) right top / 1.5px 100% no-repeat,
    #ffc490;
}
html.mars #minigame .mg-btn.empty { color: var(--muted); background: #4e3830; filter: none; }
html.mars #minigame .mg-btn.empty::before { filter: grayscale(1) brightness(.6); }
html.mars #minigame .mg-btn:disabled { opacity: .5; }
html.mars .mg-lump { filter: drop-shadow(1px 2px 0 rgba(13, 7, 6, .6)); }

/* The mill: the whole screen dark, the bed a block standing 5 px proud. */
html.mars #minigame .mg-card.mill-screen {
  max-width: none; border: 0;
  padding: calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 12px) 6px;
  background:
    radial-gradient(ellipse 130% 45% at 50% -5%, rgba(201, 138, 106, .2), transparent 70%),
    repeating-linear-gradient(rgba(82, 242, 234, .03) 0 1px, transparent 1px 4px),
    #160d0b;
}
html.mars #minigame #mg-mill {
  border: 2px solid #0d0706; border-radius: 0; background: #120a08;
  box-shadow: 1px -1px 0 #4e3830, 2px -2px 0 #4e3830, 3px -3px 0 #4e3830, 4px -4px 0 #4e3830, 5px -5px 0 #4e3830, 5px -5px 0 1.5px #0d0706;
}
html.mars #minigame .mill-screen .mg-btn { padding: 15px 12px 13px; font-size: 24px; }
@media (max-aspect-ratio: 10/21) {
  html.mars #minigame .mill-board { flex-direction: column; align-items: center; justify-content: flex-end; }
  html.mars #minigame .mill-board::before, html.mars #minigame .mill-board::after { order: -1; align-self: stretch; margin: 0 4px; }
  html.mars #minigame .mill-board::before {
    content: 'Print bay'; padding: 8px 10px 4px;
    font-family: var(--display); font-size: min(10vw, 44px); line-height: 1; letter-spacing: .03em; text-transform: uppercase;
    color: #c8fffb; text-shadow: 0 0 10px rgba(82, 242, 234, .7);
    background: repeating-linear-gradient(rgba(82, 242, 234, .12) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(82, 242, 234, .2), transparent);
    border-top: 2px solid var(--holo);
  }
  html.mars #minigame .mill-board::after {
    content: 'Shear true \2014  print it to the top'; margin-top: 6px; margin-bottom: 16px; padding: 0 10px;
    font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  }
}

/* The result: a pane of dark glass over the card, the verdict in printed block
   letters (orange, or red when the fire went out), what went in and what came
   out on small blocks. */
html.mars #minigame .mg-result, html.mars #minigame .mill-screen .mg-result {
  border-radius: 0; color: var(--text);
  background: repeating-linear-gradient(rgba(82, 242, 234, .035) 0 1px, transparent 1px 4px), rgba(22, 14, 12, .97);
}
html.mars #minigame .mg-result h3 {
  margin: 0; font-family: var(--display); font-weight: 400; font-size: 29px; line-height: 1.1; letter-spacing: .03em; text-transform: uppercase;
  color: #ff8a3a; text-wrap: balance;
  text-shadow: -1px 0 0 #0d0706, 0 1px 0 #0d0706, 1px -1px 0 #9a3a0c, 2px -2px 0 #9a3a0c, 3px -3px 0 #9a3a0c, 4px -4px 0 #0d0706;
  animation: mars-print .45s .05s steps(6) both;
}
@keyframes mars-print { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(-20% -10% -10% -10%); } }
html.mars #minigame .mg-result:has(.fx-side.bad) h3 { color: #ff5a4a; text-shadow: -1px 0 0 #0d0706, 0 1px 0 #0d0706, 1px -1px 0 #7a1a12, 2px -2px 0 #7a1a12, 3px -3px 0 #7a1a12, 4px -4px 0 #0d0706; }
html.mars #minigame .mg-result .mg-btn { max-width: 300px; }
html.mars #minigame .fx { gap: 12px; }
html.mars #minigame .fx-item {
  position: relative; padding: 4px 11px 4px 5px;
  background: linear-gradient(rgba(255, 255, 255, .05), transparent 50%), #1c1311; border: 1.5px solid #0d0706; border-radius: 0;
}
html.mars #minigame .fx-item b { font-family: var(--display); font-weight: 400; font-size: 19px; color: var(--text); }
html.mars #minigame .fx-side.out .fx-item { background: linear-gradient(rgba(82, 242, 234, .1), transparent 60%), #2a1d19; box-shadow: 0 0 18px rgba(82, 242, 234, .22); }
html.mars #minigame .fx-side.out .fx-item b { font-size: 26px; color: #ff8a3a; }
html.mars #minigame .fx-side.out.bad .fx-item { box-shadow: none; }
html.mars #minigame .fx-side.out.bad .fx-item b { color: var(--text); }
html.mars #minigame .fx-badge span { color: #1a0904; }

/* Regolith: the dive board */
/* The cut face sits in a printed frame: a slab of basalt 10px wide all round
   (outside the drawing, box-sizing: content-box), seen a little from above
   and to the left like every block in the style, so its top is lit, its left
   catches some light, and its right and foot fall into shade, mitred at the
   corners, with cube seams pressed into it every 10px. It's inked round,
   ruled just outside in the printer's cyan, and set on a hard shadow cast
   down and to the right by the low sun. */
html.mars #board {
  box-sizing: content-box;
  border: 10px solid;
  border-radius: 0;
  border-color: rgba(255, 196, 160, .3) rgba(8, 3, 2, .5) rgba(8, 3, 2, .66) rgba(255, 196, 160, .1);
  background:
    linear-gradient(#1c120f, #1c120f) padding-box,
    repeating-linear-gradient(90deg, rgba(8, 3, 2, .45) 0 1px, transparent 1px 10px) border-box,
    repeating-linear-gradient(0deg, rgba(8, 3, 2, .45) 0 1px, transparent 1px 10px) border-box,
    linear-gradient(135deg, #6a4030, #4a2c22 40%, #2e1d18) border-box;
  box-shadow: 0 0 0 2px #0d0706, 0 0 0 3.5px rgba(82, 242, 234, .5), 0 0 16px 3px rgba(82, 242, 234, .12), 8px 10px 0 2px rgba(8, 3, 2, .55);
}
/* Room round the frame for its cyan rule, and for the shadow down and to the
   right (dive.js sizes the board inside this padding). */
html.mars #dive .board-wrap { padding: 4px 10px 12px 4px; }