/* ---------------------------------------------------------------------------------------------------------------
   Ruby skin. Loaded on top of style.css, so it only says what is different. Every colour here was read off the
   Game Boy Advance game's own framebuffer rather than guessed:

     title plate   #f71810 #ce1810 #ad1810 #bd1810 #7b1810 over pebbled rock, silhouette outline #7b186b
     logo          #fff329 yellow sitting on a blue outline
     gold band     #fffba5 #fffb6b #dedb5a #bdba4a #9c9a39 #7b7931 #5a5921 #393810   (the intro's horizon strip)
     message box   #fffbff fill, #d6d3ce bevel, #52516b frame, #293031 text, #b5b2a5 shadow
     cursor        a red rounded rectangle drawn around the row you are on. That is the whole interaction language.
     forest        #081808 #103800 #185100 #215900 #296100 #317100 #397900 #428a00 #4a9200 #529a00 #5aaa00
     overworld     #6ba263 grass, #a5e35a highlight, #638a63 shade, #c6e3ff sky

   Nothing here changes a behaviour. Panels are message boxes, the rail is the menu that slides in from the side,
   and anything chosen gets the red cursor drawn around it.
   --------------------------------------------------------------------------------------------------------------- */
/* The three pixel faces, served from this site rather than fetched from Google: the page must not wait on anybody
   else's server to draw, and a visitor's address is nobody's business but ours. Latin subsets, about 40 KB in all,
   in public/fonts/ with the SIL Open Font License each one ships under. */
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/pressstart2p-latin.woff2) format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/silkscreen-400-latin.woff2) format("woff2"); }
@font-face { font-family: "Silkscreen"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/silkscreen-700-latin.woff2) format("woff2"); }
@font-face { font-family: "Pixelify Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/pixelifysans-latin.woff2) format("woff2"); }

:root {
  /* the palette, straight off the cartridge */
  --ruby: #f71810; --ruby-lt: #ff3021; --ruby-mid: #ce1810; --ruby-dk: #7b1810; --ruby-ink: #3a0805;
  --gold-1: #fffba5; --gold-2: #fffb6b; --gold-3: #dedb5a; --gold-4: #bdba4a; --gold-5: #9c9a39; --gold-6: #7b7931; --gold-7: #5a5921; --gold-8: #393810;
  --violet: #7b186b; --logo-yellow: #fff329; --logo-blue: #2848b8; --forest: #317100; --leaf: #5aaa00; --grass: #6ba263; --sky: #c6e3ff;
  --box: #fffbff; --bevel: #d6d3ce; --frame: #52516b; --frame-2: #736984; --drop: rgba(20, 6, 4, .55);

  /* style.css's own names, re-pointed */
  --bg: #5a0f0a; --panel: var(--box); --panel-2: #efe9ee; --panel-3: #ded3de;
  --line: #b5b2a5; --line-2: var(--frame-2);
  --text: #293031; --muted: #52516b; --faint: #736984;
  --volt: var(--ruby); --volt-dk: var(--ruby-mid); --volt-ink: #fffbff;
  --cyan: #4a496b; --ember: var(--ruby-lt); --amber: #947129; --red: #ad1810; --good: var(--forest); --slate: var(--frame-2);
  --foil: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 26%, var(--gold-3) 48%, var(--gold-5) 72%, var(--gold-7) 100%);

  --pixel: "Press Start 2P", "Silkscreen", monospace;
  --sans: "Pixelify Sans", "Trebuchet MS", system-ui, sans-serif;
  --mono: "Silkscreen", "JetBrains Mono", ui-monospace, monospace;
  --rail: 248px; --r: 10px;
}

/* the pebbled rock the title screen is painted on */
body {
  font: 400 16px/1.62 var(--sans);
  color: #fffbff;
  background:
    radial-gradient(circle at 30% 32%, rgba(255, 58, 40, .40) 0 5px, transparent 6px) 0 0 / 28px 28px,
    radial-gradient(circle at 72% 68%, rgba(123, 24, 16, .55) 0 6px, transparent 7px) 14px 9px / 28px 28px,
    radial-gradient(circle at 48% 84%, rgba(206, 24, 16, .35) 0 4px, transparent 5px) 7px 20px / 28px 28px,
    linear-gradient(180deg, #8c1a10 0%, #6b120b 44%, #4a0c08 100%) fixed;
}
body::before { background:
  radial-gradient(130% 80% at 50% -14%, rgba(255, 140, 110, .22), transparent 64%),
  repeating-linear-gradient(0deg, rgba(0, 0, 0, .11) 0 2px, transparent 2px 4px); }
a:hover { color: var(--gold-2); }
::selection { background: var(--ruby); color: #fffbff; }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; border-radius: 4px; }
code, .mono, .num { font-family: var(--mono); font-size: .95em; letter-spacing: .02em; }

/* ---------- the message box: one shape, used for every panel on the site ---------- */
.panel, .figures, .infopanel, .fixedrow, .step, .prose > section, .flow, .checks, .dex, .tablewrap,
.railstatus, .note, .locknote, .empty, .ac, .pull, .gradechips, .inputrow, .toast, .plate, .tape .tick, pre.out {
  background: var(--box);
  border: 3px solid var(--frame);
  border-radius: var(--r);
  box-shadow: inset 0 0 0 2px var(--bevel), 4px 4px 0 var(--drop);
  color: var(--text);
}
.panel h3, .label, .step > header h3, .fieldlabel, .field > label, th, .infopanel .k, .fixedrow span, .figures span {
  font-family: var(--pixel); letter-spacing: 0; text-transform: uppercase; color: var(--frame); }
.panel h3, .label, .fieldlabel, .field > label, .infopanel .k, .fixedrow span, .figures span { font-size: 8.5px; line-height: 1.7; }
th { font-size: 8px; background: var(--panel-2); color: var(--frame); }
.figures b, .infopanel .v, .fixedrow b, .bignum, .dexbtn .n, .flow .orb, td.n, .kv .v, .slab-grade b { font-family: var(--mono); letter-spacing: 0; color: var(--text); }
.muted { color: var(--muted); }

/* ---------- the rail: the menu that slides in from the side of the screen ---------- */
.rail {
  background: var(--box); backdrop-filter: none; padding: 14px 12px;
  border: 3px solid var(--frame); border-left: 0; border-radius: 0 var(--r) var(--r) 0;
  box-shadow: inset 0 0 0 2px var(--bevel), 4px 0 0 var(--drop); height: 100vh; gap: 16px;
}
.brand { gap: 9px; padding: 6px 4px 2px; }
.brand .mark { width: 26px; height: 34px; border-radius: 4px; background: linear-gradient(180deg, var(--ruby-lt), var(--ruby-mid) 52%, var(--ruby-dk)); box-shadow: inset 0 0 0 2px #fffbff, 0 0 0 2px var(--ruby-ink); }
.brand .mark::before { inset: 6px 5px; border-radius: 2px; background: var(--box); }
.brand .mark::after { width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 0; background: var(--ruby); box-shadow: 0 0 0 2px var(--ruby-ink); }
.wordmark {
  font: 400 15px/1 var(--pixel); color: var(--logo-yellow); letter-spacing: 0; -webkit-text-stroke: 0;
  text-shadow:
    -2px 0 var(--logo-blue), 2px 0 var(--logo-blue), 0 -2px var(--logo-blue), 0 2px var(--logo-blue),
    -2px -2px var(--logo-blue), 2px -2px var(--logo-blue), -2px 2px var(--logo-blue), 2px 2px var(--logo-blue),
    0 4px #101a4a;
}
.railnav { gap: 0; }
.tab { font: 400 9.5px/1.5 var(--pixel); color: var(--text); padding: 10px; border: 3px solid transparent; border-radius: 8px; gap: 9px; text-transform: uppercase; }
.tab i { font: 400 8px var(--mono); color: var(--frame-2); }
.tab:hover, .tab.on { background: var(--box); border-color: var(--ruby); color: var(--text); }
.tab.on i, .tab:hover i { color: var(--ruby); }
.railstatus { box-shadow: inset 0 0 0 2px var(--bevel); background: var(--panel-2); padding: 10px; font-size: 12px; }
.statline { color: var(--text); } .statline.dim { color: var(--muted); }
.livedot { border-radius: 0; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--ruby-ink); }
.livedot.ok { background: var(--leaf); box-shadow: 0 0 0 2px #103800; animation: none; }
.livedot.warn { background: var(--gold-3); box-shadow: 0 0 0 2px var(--gold-8); }

/* ---------- buttons: pressable, with the shadow they cast underneath ---------- */
.btn, .walletpill {
  font: 400 9.5px/1.5 var(--pixel); letter-spacing: 0; text-transform: uppercase; padding: 13px 15px;
  border: 3px solid var(--frame); border-radius: 8px; background: var(--box); color: var(--text);
  box-shadow: inset 0 0 0 2px var(--bevel), 3px 3px 0 var(--drop); transition: none;
}
.btn:hover, .walletpill:hover { border-color: var(--ruby); color: var(--text); }
.btn:active, .walletpill:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px var(--bevel); }
.btn:disabled { opacity: .5; }
.btn.primary { background: var(--ruby); border-color: var(--ruby-ink); color: #fffbff; text-shadow: 0 2px 0 var(--ruby-dk); box-shadow: inset 0 0 0 2px #ff7a6b, 3px 3px 0 var(--drop); }
.btn.primary:hover { background: var(--ruby-lt); color: #fffbff; }
.btn.warnb { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 40%, var(--gold-4)); border-color: var(--gold-8); color: #3a3410; }
.btn.info { background: #dfe9ff; border-color: var(--logo-blue); color: #14235e; }
.btn.sm { font-size: 8px; padding: 10px 11px; }
.walletpill { font-size: 9px; }
.walletpill.on { background: linear-gradient(180deg, #a5e35a, #529a00 55%, #317100); border-color: #103800; color: #fffbff; text-shadow: 0 2px 0 #103800; }

/* the theme's switch. Above the boot screen too, so it can be turned off before a note is played */
.soundbtn { position: fixed; right: 14px; bottom: 14px; z-index: 260; padding: 9px 11px; cursor: pointer;
  font: 400 7.5px/1.4 var(--pixel); letter-spacing: 0; color: var(--text); background: var(--box);
  border: 3px solid var(--frame); border-radius: 8px; box-shadow: inset 0 0 0 2px var(--bevel), 3px 3px 0 var(--drop); }
.soundbtn:hover { border-color: var(--ruby); }
.soundbtn:active { transform: translate(3px, 3px); box-shadow: inset 0 0 0 2px var(--bevel); }
.soundbtn.off { color: var(--frame-2); background: var(--panel-2); }

/* ---------- headings sit out on the rock, so they are lit from the front ---------- */
.eyebrow {
  display: inline-flex; font: 400 8px/1.6 var(--pixel); letter-spacing: 0; color: var(--gold-8); text-transform: uppercase;
  background: var(--foil); border: 2px solid var(--gold-8); border-radius: 5px; padding: 6px 9px; margin-bottom: 12px;
  box-shadow: 2px 2px 0 var(--drop);
}
.eyebrow::after { display: none; }
.pagetitle { font: 400 clamp(17px, 3.2vw, 32px)/1.3 var(--pixel); letter-spacing: 0; color: #fffbff; text-shadow: 3px 3px 0 var(--ruby-ink), 6px 6px 0 rgba(0, 0, 0, .25); }
.pagetitle span { font-family: var(--mono); font-size: .52em; color: var(--gold-2); text-shadow: 2px 2px 0 var(--ruby-ink); margin-left: .5em; }
.lead, .blurb { color: #ffd3b5; font-size: 16px; text-shadow: 2px 2px 0 rgba(58, 8, 5, .8); }
.lead b, .blurb b { color: var(--gold-2); }
.sub2 { font: 400 12px/1.5 var(--pixel); letter-spacing: 0; color: #fffbff; text-shadow: 2px 2px 0 var(--ruby-ink); margin-top: 40px; }
.sub2::after { height: 7px; border-radius: 4px; background: var(--foil); box-shadow: 0 2px 0 var(--gold-8); }
.resultline { color: #ffc394; font-family: var(--mono); text-shadow: 1px 1px 0 var(--ruby-ink); }
.empty { color: var(--muted); border-style: solid; }

/* ---------- the cursor. Anything chosen gets the red box drawn around it ---------- */
.dexbtn:hover, .acrow:hover, .acrow.on, .pick:hover, .pick[aria-pressed=true], .gchip:hover, .gchip[aria-pressed=true], .pull:hover {
  background: var(--box); color: var(--text); box-shadow: inset 0 0 0 3px var(--ruby); border-radius: 8px; transform: none;
}
.dexbtn:hover .go { color: var(--ruby); transform: none; }
.acrow:hover em, .acrow.on em, .pick[aria-pressed=true] small, .gchip[aria-pressed=true] small { color: var(--ruby); }
.gchip[aria-pressed=true] { background: var(--box); color: var(--text); }
.pull:hover { box-shadow: inset 0 0 0 3px var(--ruby), 4px 4px 0 var(--drop); }

/* ---------- the dex list ---------- */
.dex { padding: 0; }
.dex > li + li { border-top: 2px solid var(--bevel); }
.dexhead { background: var(--panel-2); font: 400 7.5px var(--pixel); letter-spacing: 0; color: var(--frame); }
.dexbtn { color: var(--text); }
.dexname { font: 400 12px/1.4 var(--pixel); letter-spacing: 0; }
.dexsub, .dexno { font-family: var(--mono); color: var(--muted); }
.dexbtn .n { font: 400 12px var(--mono); }
.dexbtn .n small { font: 400 7px var(--pixel); color: var(--frame-2); letter-spacing: 0; }
.chip { border: 2px solid var(--frame-2); border-radius: 6px; background: var(--panel-2); font-family: var(--mono); font-size: 11px; }
.chip .dot, .plate-foot .dot, .pick .dot { border-radius: 0; box-shadow: 0 0 0 2px var(--ruby-ink); }
.thumb { border-radius: 4px; border: 3px solid var(--frame); box-shadow: inset 0 0 0 2px var(--bevel); }
.thumb span { font-family: var(--pixel); font-size: 14px; }
.go { font-family: var(--mono); color: var(--frame-2); }

/* ---------- the coin plate ---------- */
.plate { padding: 0; overflow: hidden; }
/* an empty plate is a card back, not a black hole: the coin's own initial on a hatch in the coin's own colour.
   Sized against the plate itself, because a percentage in a font-size would be read against the text, not the box. */
.plate-art { border-radius: 0; box-shadow: inset 0 0 0 2px var(--bevel); container-type: inline-size;
  background: repeating-linear-gradient(45deg,
    color-mix(in srgb, var(--hue, #f71810) 26%, #fffbff) 0 11px,
    color-mix(in srgb, var(--hue, #f71810) 42%, #fffbff) 11px 22px); }
.plate-art.any { background: repeating-linear-gradient(45deg, #ffe9c6 0 11px, #ffd3b5 11px 22px); }
.plate-mono { font-family: var(--pixel); font-size: 30cqw; color: #fffbff; opacity: 1; text-shadow: 4px 4px 0 rgba(41, 48, 49, .3); }
.plate-tag { border-radius: 4px; border: 2px solid var(--ruby-ink); background: var(--ruby); color: #fffbff; backdrop-filter: none; font: 400 7px var(--pixel); letter-spacing: 0; padding: 5px 7px; }
.plate-foot { background: var(--box); border-radius: 0; border-top: 2px solid var(--bevel); }
.plate-foot strong { font: 400 10px var(--pixel); letter-spacing: 0; }
.plate-foot em { font-family: var(--mono); color: var(--muted); }

/* ---------- the hero: the title screen, with the horizon band across the top ---------- */
.hero-copy {
  border: 3px solid var(--ruby-ink); border-radius: 12px; padding: 26px 24px;
  background:
    radial-gradient(circle at 26% 30%, rgba(255, 58, 40, .45) 0 5px, transparent 6px) 0 0 / 26px 26px,
    radial-gradient(circle at 70% 72%, rgba(123, 24, 16, .5) 0 6px, transparent 7px) 13px 8px / 26px 26px,
    linear-gradient(180deg, var(--ruby) 0%, var(--ruby-mid) 46%, var(--ruby-dk) 100%);
  box-shadow: inset 0 0 0 2px #ff7a6b, 5px 5px 0 var(--drop);
}
.hero-copy::before { height: 9px; background: var(--foil); opacity: 1; box-shadow: 0 2px 0 var(--gold-8); }
.hero-copy h2 { font: 400 clamp(13px, 2vw, 19px)/1.5 var(--pixel); letter-spacing: 0; color: #fffbff; text-shadow: 3px 3px 0 var(--ruby-ink); }
.hero-copy h2 em { color: var(--gold-2); font-style: normal; }
.hero-copy p { color: #ffd3b5; }
.figures > div { background: var(--box); }
.figures b { font-size: clamp(18px, 2.4vw, 26px); }

/* ---------- forms ---------- */
.inputrow { border-radius: 8px; }
.inputrow:focus-within { border-color: var(--ruby); box-shadow: inset 0 0 0 2px var(--ruby), 4px 4px 0 var(--drop); }
.inputrow input, .inputrow textarea { color: var(--text); font: 400 15px var(--sans); }
.inputrow input::placeholder, .inputrow textarea::placeholder { color: var(--frame-2); }
select.unit, .sortlab select { background: var(--panel-2); color: var(--text); border-left: 3px solid var(--frame); font: 400 9px var(--pixel); letter-spacing: 0; }
.sortlab { border: 3px solid var(--frame); border-radius: 8px; background: var(--box); color: var(--frame); font: 400 8px var(--pixel); letter-spacing: 0; box-shadow: inset 0 0 0 2px var(--bevel), 3px 3px 0 var(--drop); }
.sortlab > span { background: var(--box); }
.searchrow .btn { border-radius: 0 8px 8px 0; margin-left: -3px; }
.searchrow .inputrow { border-radius: 8px 0 0 8px; }
.pick { border: 3px solid var(--frame); border-radius: 8px; background: var(--box); color: var(--text); font: 400 8.5px/1.5 var(--pixel); letter-spacing: 0; padding: 11px 9px; align-items: center; gap: 7px; overflow: hidden; flex-wrap: wrap; }
.pick small { font: 400 6.5px var(--pixel); color: var(--frame-2); letter-spacing: 0; flex: none; }
.gradechips { padding: 0; overflow: hidden; }
.gchip { border-left: 2px solid var(--bevel); color: var(--muted); font: 400 11px var(--mono); padding: 12px 6px; }
.gchip small { font: 400 6.5px var(--pixel); color: var(--frame-2); letter-spacing: 0; }
.field small { color: var(--muted); } .field small b { color: var(--text); }
input[type=file] { color: var(--muted); font: 400 13px var(--sans); }
input[type=file]::file-selector-button { font: 400 8px var(--pixel); letter-spacing: 0; border: 3px solid var(--frame); border-radius: 8px; background: var(--box); color: var(--text); box-shadow: inset 0 0 0 2px var(--bevel), 2px 2px 0 var(--drop); padding: 10px 11px; }
.err { color: var(--red); font-family: var(--mono); }
.launchform > .err { color: var(--gold-2); text-shadow: 2px 2px 0 rgba(58, 8, 5, .8); } /* it sits on the rock, not in a message box */
.ac { padding: 5px; border-radius: 8px; box-shadow: inset 0 0 0 2px var(--bevel), 5px 5px 0 var(--drop); }
.acrow { color: var(--text); font: 400 14px var(--sans); border-radius: 6px; }
.acrow em { font-family: var(--mono); color: var(--frame-2); }
.locknote { border-style: solid; color: var(--muted); font-size: 13.5px; } .locknote b { color: var(--text); }
.fixedrow > div { background: var(--box); }
.step > header i { font: 400 9px var(--pixel); color: var(--ruby); letter-spacing: 0; }
.step > header h3 { font: 400 11px/1.5 var(--pixel); letter-spacing: 0; color: var(--text); text-transform: none; }
.step > header small { color: var(--muted); font-family: var(--mono); font-size: 11px; }

/* ---------- a box that is saying something gets the little red arrow ---------- */
.note { position: relative; padding: 14px 34px 14px 16px; border-left: 3px solid var(--frame); color: var(--text); font-size: 14.5px; }
.note::after { content: ""; position: absolute; right: 12px; bottom: 10px; width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--ruby); animation: nudge .85s steps(2, end) infinite; }
@keyframes nudge { 50% { transform: translateY(3px); } }
.note.warn { box-shadow: inset 0 0 0 2px var(--gold-3), 4px 4px 0 var(--drop); }
.note.bad { box-shadow: inset 0 0 0 2px #ff9a8c, 4px 4px 0 var(--drop); }
.note.good { box-shadow: inset 0 0 0 2px #a5e35a, 4px 4px 0 var(--drop); }
.note a { color: var(--ruby-mid); font-weight: 700; }
.toast { border-radius: 8px; color: var(--text); background: var(--box); font: 400 11px/1.6 var(--pixel); letter-spacing: 0; padding: 14px 16px; box-shadow: inset 0 0 0 2px var(--bevel), 5px 5px 0 var(--drop); }

/* ---------- tables, feed, mechanics ---------- */
td { border-top: 2px solid var(--bevel); }
tr.next td { background: #ffe9e6; } tr.next td:first-child { box-shadow: inset 4px 0 0 var(--ruby); }
.nexttag { border-radius: 4px; background: var(--ruby); color: #fffbff; font: 400 7px var(--pixel); letter-spacing: 0; padding: 4px 6px; }
.kv > div { border-top: 2px solid var(--bevel); } .kv .k { color: var(--muted); }
.swatch { border-radius: 0; box-shadow: 0 0 0 2px var(--ruby-ink); }
/* The fee bar can carry four parts (holders, vault, burn, reserve) and the skin's accent red is only one of them.
   Re-pointing the four names inside the bar and its key gives each part its own colour without touching the markup,
   which sets them inline from these same variables. */
.feebar, .kv { --volt: #f71810; --cyan: #2848b8; --ember: #bdba4a; --slate: #317100; }
.feebar { border-radius: 4px; background: var(--panel-3); height: 12px; box-shadow: inset 0 0 0 2px var(--frame); padding: 2px; }
.feebar i { border-radius: 0; }
.stream { border-radius: 4px; height: 12px; background: var(--panel-3); border: 2px solid var(--frame); }
.stream i { border-radius: 0; background: linear-gradient(180deg, #a5e35a, var(--forest)); box-shadow: none; }
.streamcap { font-family: var(--mono); color: var(--muted); }
.flow { padding: 0; }
.flow li { background: var(--box); }
.flow li::before { font: 400 9px var(--pixel); color: var(--ruby); letter-spacing: 0; }
.flow .cn { font: 400 10px/1.5 var(--pixel); letter-spacing: 0; }
.flow .cd { color: var(--muted); font-size: 13.5px; }
.prose h3 { font: 400 11px/1.5 var(--pixel); letter-spacing: 0; color: var(--text); }
.prose li { color: var(--muted); } .prose li b { color: var(--text); }
.prose li::before { border-radius: 0; background: var(--ruby); transform: none; width: 7px; height: 7px; box-shadow: 0 0 0 2px var(--ruby-ink); }
.tape .tick { border-radius: 6px; font-family: var(--mono); color: var(--muted); box-shadow: inset 0 0 0 2px var(--bevel), 3px 3px 0 var(--drop); }
.tape .tick b { color: var(--ruby-mid); } .tape .tick i { border-radius: 0; background: var(--leaf); box-shadow: 0 0 0 2px #103800; }

/* ---------- pulls: a graded slab, in a box, with the card's name under it ---------- */
.pull { border-radius: var(--r); }
.pull figure { padding: 9px 9px 0; }
.slab { border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 4px 0 rgba(0, 0, 0, .35); }
.slab-brand { font: 400 8px var(--pixel); letter-spacing: 0; }
.slab-title { font: 400 9px/1.25 var(--sans); }
.slab-grade b { font-size: 13px; } .slab-grade em { font: 400 6px var(--pixel); letter-spacing: 0; }
.slab-foot { font: 400 6.5px var(--pixel); letter-spacing: 0; color: #55585e; }
.slab-win { border-radius: 0; }
.slab-ghost { font-family: var(--pixel); font-size: clamp(20px, 4.4vw, 34px); }
.pull .cap { color: var(--muted); }
.pull .cap b { color: var(--text); font: 400 10px/1.4 var(--pixel); letter-spacing: 0; }
.pull .cap .price { font: 400 12px var(--mono); color: var(--ruby-mid); }
.certline { border-radius: 4px; background: rgba(41, 48, 49, .85); backdrop-filter: none; font-family: var(--mono); color: #fffbff; }
.gradebadge { border-radius: 4px; border: 2px solid var(--ruby-ink); background: var(--ruby); color: #fffbff; font-family: var(--mono); }

/* ---------- the operator's console ---------- */
.checks li { border-top: 2px solid var(--bevel); }
.checks .mark { font-family: var(--mono); }
.checks li.ok .mark { color: var(--forest); } .checks li.bad .mark { color: var(--red); }
.checks .detail { font-family: var(--mono); color: var(--muted); font-size: 11.5px; }
.checks .fix { border-radius: 6px; background: #fff6d8; border: 2px solid var(--gold-5); color: #4a3a10; }
pre.out { background: #101808; border: 3px solid var(--gold-8); color: #a5e35a; font: 400 11.5px/1.6 var(--mono); box-shadow: inset 0 0 0 2px #296100, 4px 4px 0 var(--drop); }

/* ---------- the footer, down on the rock ---------- */
.foot { border-top: 0; color: #d6a896; font-size: 12.5px; text-shadow: 1px 1px 0 rgba(58, 8, 5, .9); }
.foot strong { color: var(--gold-2); } .foot code { color: #ffc394; }
.foot::before { content: ""; display: block; height: 7px; border-radius: 4px; background: var(--foil); box-shadow: 0 2px 0 var(--gold-8); margin-bottom: 16px; }

/* ---------- small screens: the rail lies down on top, the menu sits along the bottom ---------- */
@media (max-width: 860px) {
  .rail { border: 0; border-bottom: 3px solid var(--frame); border-radius: 0; box-shadow: 0 4px 0 var(--drop); height: auto; background: var(--box); padding: 9px 12px; }
  .railstatus { box-shadow: none; background: none; }
  .railnav { background: var(--box); border-top: 3px solid var(--frame); border-radius: 0; backdrop-filter: none; box-shadow: 0 -4px 0 var(--drop); padding: 5px 5px calc(5px + env(safe-area-inset-bottom)); }
  .tab { font-size: 7.5px; padding: 8px 2px; border-width: 2px; } .tab i { font-size: 7px; }
  .pagetitle { font-size: clamp(15px, 5.4vw, 22px); }
  .sub2 { font-size: 10px; }
  .soundbtn { right: 10px; bottom: calc(68px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .note::after { animation: none; } }