/* arcade.css — the cabinet skin. Loads AFTER site.css and deliberately overrides it.
 *
 * Colton, round 3: "the panels and ui are flat rectangles, they should feel like arcade
 * cabinets." A cabinet reads as a cabinet because of four things, and not one of them is
 * a border:
 *   1. a bevel — the top edge catches the room light, the bottom edge goes black;
 *   2. a laminate — the surface is never one flat colour;
 *   3. screws — where two panels actually meet;
 *   4. screens set BELOW the bezel, not painted on top of it.
 * Everything in this file is one of those four.
 */

:root {
  --hi: rgba(240,232,208,.15);      /* the lamp hitting a top edge */
  --hi-soft: rgba(240,232,208,.08);
  --seam: rgba(0,0,0,.55);          /* the dark line where two panels meet */
  --plate: linear-gradient(180deg, #1b241d 0%, #151d18 48%, #0f1613 100%);
  /* Two very low-contrast weaves. Enough that the eye reads texture instead of a filled
     rectangle; not enough for anyone to notice a pattern. */
  --laminate:
    repeating-linear-gradient(112deg, rgba(255,255,255,.015) 0 3px, transparent 3px 8px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 4px);
  --screw:
    radial-gradient(circle, #4a5147 0 32%, #171c17 34% 46%, rgba(0,0,0,.55) 48% 58%, transparent 60%);
}

/* ── the instruction cabinet ──────────────────────────────────────────── */
.cab {
  position: relative; margin-top: 32px; border: 0; border-radius: 7px;
  background: var(--laminate), var(--plate);
  box-shadow:
    inset 0 1px 0 var(--hi),
    inset 0 0 0 1px var(--seam),
    inset 0 -3px 0 rgba(0,0,0,.62),         /* the lip underneath */
    inset 4px 0 8px -5px rgba(0,0,0,.7),
    inset -4px 0 8px -5px rgba(0,0,0,.7),
    0 26px 52px -20px rgba(0,0,0,.9);       /* it stands off the wall */
}
.cab::before {                               /* four screws, one per corner */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 3;
  background-image: var(--screw), var(--screw), var(--screw), var(--screw);
  background-size: 15px 15px;
  background-position: 9px 9px, right 9px top 9px, 9px bottom 9px, right 9px bottom 9px;
  background-repeat: no-repeat;
}
/* the marquee strip: a lit header panel, not a coloured bar */
.cab .cab-head {
  position: relative; z-index: 2;
  padding: 15px 46px; border: 0; border-radius: 6px 6px 0 0;
  background:
    linear-gradient(180deg, rgba(242,169,59,.14), rgba(242,169,59,.03) 58%, transparent),
    repeating-linear-gradient(135deg, #202b22 0 10px, #1a241d 10px 20px);
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.22),
    inset 0 -1px 0 rgba(0,0,0,.6);
  font: 800 15.5px/1.35 var(--type); letter-spacing: .14em;
  text-transform: uppercase; color: #ffca79;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 16px rgba(242,169,59,.45);
}
ol.steps { padding: 26px 24px 28px; }
ol.steps li { padding: 0 0 26px 66px; }
ol.steps li:last-child { padding-bottom: 6px; }
ol.steps li::before {                        /* a lit numeral recessed into the panel */
  width: 44px; height: 44px; top: -3px; border: 0; border-radius: 4px;
  background: linear-gradient(180deg, #0d1410, #121a14);
  color: #b6e084; font: 800 19px/1 var(--type);
  text-shadow: 0 0 12px rgba(120,163,85,.75);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.85),
    inset 0 0 0 1px rgba(120,163,85,.5),
    0 1px 0 var(--hi-soft);
}

/* ── plain cards: control-panel plates bolted to the cabinet ──────────── */
.plain-card {
  position: relative; border: 0; border-radius: 5px; padding: 24px 24px 26px;
  background: var(--laminate), linear-gradient(180deg, #1a231d, #121a15);
  border-left: 3px solid var(--bill);
  box-shadow:
    inset 0 1px 0 var(--hi),
    inset 0 0 0 1px var(--seam),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 16px 32px -16px rgba(0,0,0,.85);
  transition: transform .18s ease, box-shadow .18s ease;
}
.plain-card:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(240,232,208,.22),
    inset 0 0 0 1px var(--seam),
    inset 0 -2px 0 rgba(0,0,0,.55),
    0 22px 42px -16px rgba(0,0,0,.92);
}
.plain-card h3 { text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 14px rgba(242,169,59,.28); }

/* ── the wall: cameo cards in real frames ─────────────────────────────── */
.pin {
  border: 0; border-radius: 3px; background: #14120b;
  box-shadow:
    inset 0 0 0 1px rgba(240,232,208,.18),
    inset 0 1px 0 rgba(240,232,208,.1),
    0 18px 34px -16px rgba(0,0,0,.9);
  transition: box-shadow .2s ease;
}
.pin:hover {
  box-shadow:
    inset 0 0 0 1px rgba(240,232,208,.32),
    0 24px 44px -16px rgba(0,0,0,.95);
}
.pin .no { border-radius: 3px; box-shadow: 0 4px 12px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.4); }

/* ── the contract slot: cream paper set INTO the cabinet ──────────────── */
.ca-box {
  position: relative; border-radius: 4px;
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.35),
    0 0 0 3px #0c120f,
    0 0 0 4px rgba(240,232,208,.15),
    0 14px 28px -14px rgba(0,0,0,.85);
}
.ca-box button, .ca-copy {
  border-radius: 3px;
  box-shadow: 0 3px 0 rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
  transition: transform .1s ease, box-shadow .1s ease;
}
.ca-box button:active, .ca-copy:active {
  transform: translateY(3px);
  box-shadow: 0 0 0 rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.14);
}

/* ── the drive-in screen: glass below the bezel ───────────────────────── */
.screen {
  border: 0; border-radius: 10px/14px;
  box-shadow:
    inset 0 0 0 2px #0a0f0c,
    inset 0 0 0 5px #1e2620,
    inset 0 0 0 6px rgba(240,232,208,.16),
    inset 0 10px 34px rgba(0,0,0,.8),
    inset 0 -8px 26px rgba(0,0,0,.7),
    0 24px 48px -20px rgba(0,0,0,.9);
}
.screen::before {                            /* the sheen sitting on the glass */
  content: ""; position: absolute; inset: 6px; border-radius: 8px/12px;
  pointer-events: none; z-index: 2;
  background: linear-gradient(196deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.02) 22%, transparent 46%);
}

/* ── buttons you can actually press ───────────────────────────────────── */
.btn { border-radius: 4px; position: relative; }
.btn-primary {
  background: linear-gradient(180deg, #ffc65f 0%, #f2a93b 48%, #dd9426 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 4px 0 #8c5b13,
    0 14px 26px -12px rgba(242,169,59,.6);
}
.btn-primary:hover {
  background: linear-gradient(180deg, #ffd27c, #f7b44c 48%, #e29c2b);
  transform: translateY(-1px);
}
.btn-primary:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 #8c5b13;
}
.btn-ghost {
  background: var(--laminate), linear-gradient(180deg, #1e2822, #141c17);
  border: 2px solid rgba(234,223,196,.42);
  box-shadow: inset 0 1px 0 var(--hi), 0 4px 0 rgba(0,0,0,.55), 0 12px 24px -14px rgba(0,0,0,.9);
}
.btn-ghost:hover {
  border-color: var(--cream);
  background: var(--laminate), linear-gradient(180deg, #243029, #18201a);
}
.btn-ghost:active {
  transform: translateY(3px);
  box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 rgba(0,0,0,.55);
}
.menu-btn { box-shadow: inset 0 1px 0 var(--hi), 0 3px 0 rgba(0,0,0,.5); }
.menu-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 var(--hi), 0 1px 0 rgba(0,0,0,.5); }

/* ── the swap shell is a cabinet too ──────────────────────────────────── */
.swap-shell {
  border: 0; border-radius: 7px; position: relative;
  background: var(--laminate), var(--plate);
  box-shadow:
    inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--seam),
    inset 0 -3px 0 rgba(0,0,0,.62), 0 26px 52px -20px rgba(0,0,0,.9);
}
.swap-head {
  border: 0; border-radius: 6px 6px 0 0; padding: 14px 20px;
  background:
    linear-gradient(180deg, rgba(242,169,59,.14), rgba(242,169,59,.03) 58%, transparent),
    repeating-linear-gradient(135deg, #202b22 0 10px, #1a241d 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255,222,160,.22), inset 0 -1px 0 rgba(0,0,0,.6);
  color: #ffc165; text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 16px rgba(242,169,59,.45);
}

/* ── the contract-address vs recovery-phrase panel (buy.html) ─────────
   Colour does the teaching here before anyone reads a word: green plate =
   public and safe to paste, red plate = secret and never leaves paper. */
.two-up {
  display: grid; gap: 1px; padding: 1px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  background: rgba(240,232,208,.12);
}
.tu { padding: 22px 22px 24px; background: #101813; }
.tu h3 { margin: 0; font: 800 20.5px/1.3 var(--type); color: #f6eed6; }
.tu p { margin: 10px 0 0; font-size: 17.5px; line-height: 1.62; color: #e2d9c1; }
.tu-tag {
  margin: 0 0 10px !important; font: 800 15px/1 var(--type) !important;
  letter-spacing: .16em; text-transform: uppercase;
}
.tu-ok { box-shadow: inset 4px 0 0 var(--bill); }
.tu-ok .tu-tag { color: #9ecb6e !important; }
.tu-no { box-shadow: inset 4px 0 0 var(--red); background: #150f0d; }
.tu-no .tu-tag { color: #f0806a !important; }
.tu-no h3 { color: #ffd9cf; }
.tu-no b { color: #ffb9a8; }

/* a row of real destination links, sized like buttons so a thumb can hit them */
.links-row { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 13px !important; }
.lnk {
  display: inline-flex; align-items: center; min-height: 44px; padding: 9px 15px;
  border-radius: 4px; font: 700 16px/1.2 var(--type); color: #ffc165;
  background: linear-gradient(180deg, #1c2620, #131a16);
  box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px rgba(242,169,59,.34),
    0 3px 0 rgba(0,0,0,.55);
  text-decoration: none; transition: transform .1s ease, box-shadow .1s ease;
}
.lnk:hover { color: #ffc165; box-shadow: inset 0 1px 0 var(--hi), inset 0 0 0 1px rgba(242,169,59,.7), 0 3px 0 rgba(0,0,0,.55); }
.lnk:active { transform: translateY(3px); box-shadow: inset 0 0 0 1px rgba(242,169,59,.7); }

/* ══════════════════════════════════════════════════════════════════════
   THE BOARD — the live $20 ticker (ticker.js).
   Built as the cabinet's own CRT readout: a recessed glass panel with the
   numbers glowing behind it. The values are whatever DexScreener says they
   are. If they are small, the board shows them small.
   ══════════════════════════════════════════════════════════════════════ */
.board {
  position: relative; margin-top: 30px; border-radius: 8px;
  background: var(--laminate), var(--plate);
  box-shadow:
    inset 0 1px 0 var(--hi), inset 0 0 0 1px var(--seam),
    inset 0 -3px 0 rgba(0,0,0,.62), 0 26px 52px -20px rgba(0,0,0,.9);
}
.board::before {                             /* screws again — same machine */
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; z-index: 4;
  background-image: var(--screw), var(--screw), var(--screw), var(--screw);
  background-size: 15px 15px;
  background-position: 9px 9px, right 9px top 9px, 9px bottom 9px, right 9px bottom 9px;
  background-repeat: no-repeat;
}
.board-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0; padding: 14px 46px; border-radius: 7px 7px 0 0;
  background:
    linear-gradient(180deg, rgba(242,169,59,.14), rgba(242,169,59,.03) 58%, transparent),
    repeating-linear-gradient(135deg, #202b22 0 10px, #1a241d 10px 20px);
  box-shadow: inset 0 1px 0 rgba(255,222,160,.22), inset 0 -1px 0 rgba(0,0,0,.6);
  font: 800 15.5px/1.35 var(--type); letter-spacing: .14em;
  text-transform: uppercase; color: #ffca79;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 16px rgba(242,169,59,.45);
}
.board-live { display: inline-flex; align-items: center; gap: 7px; margin-left: auto;
  font-size: 14px; letter-spacing: .14em; color: #9ecb6e; text-shadow: 0 1px 2px rgba(0,0,0,.85); }
.board-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #78a355;
  box-shadow: 0 0 9px #9ecb6e; animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
[data-state="down"] .board-dot { background: var(--red); box-shadow: 0 0 9px var(--red); animation: none; }
[data-state="down"] .board-live { color: #e2917f; }

/* the glass */
.board-glass {
  position: relative; margin: 16px; padding: 22px 20px; border-radius: 6px;
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(120,163,85,.1), transparent 62%),
    linear-gradient(180deg, #0a1009, #070c07);
  box-shadow:
    inset 0 0 0 1px rgba(0,0,0,.85),
    inset 0 0 0 3px #1c241d,
    inset 0 0 0 4px rgba(240,232,208,.12),
    inset 0 8px 26px rgba(0,0,0,.85);
}
.board-glass::after {                        /* CRT scanlines, on the glass only */
  content: ""; position: absolute; inset: 4px; border-radius: 4px; pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px),
    linear-gradient(198deg, rgba(255,255,255,.055) 0%, transparent 34%);
}
.board-price {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.board-price .v {
  font: 700 clamp(32px, 6vw, 52px)/1 var(--mono); color: #b9e88a; letter-spacing: -.01em;
  text-shadow: 0 0 22px rgba(158,203,110,.5), 0 2px 0 rgba(0,0,0,.8);
  transition: color .3s ease;
}
.board-price .c { font: 700 19px/1 var(--mono); }
.board-lbl {
  margin: 0 0 10px; font: 800 15px/1 var(--type); letter-spacing: .18em;
  text-transform: uppercase; color: var(--smoke);
}
/* the grid of everything else */
.board-grid {
  display: grid; gap: 1px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  background: rgba(240,232,208,.1);
  border: 1px solid rgba(240,232,208,.1);
}
.board-grid > div { background: #080d08; padding: 13px 14px; }
.board-grid dt {
  margin: 0 0 6px; font: 800 15px/1 var(--type); letter-spacing: .1em;
  text-transform: uppercase; color: var(--smoke);
}
.board-grid dd { margin: 0; font: 700 19px/1.25 var(--mono); color: #f6eed6; word-break: break-word; }
.board-grid dd.up, .board-price .c.up { color: #8fdc63; }
.board-grid dd.down, .board-price .c.down { color: #f0705a; }
/* an empty window is not a direction — it stays neutral and smaller */
.board-grid dd.flat, .board-price .c.flat { color: var(--smoke); font-size: 15px; }
.board-foot {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  margin: 0; padding: 0 20px 18px; font-size: 15px; color: var(--smoke);
}
.board-foot a { color: var(--amber); }
.board-note { margin: 0; padding: 0 20px 18px; font-size: 16px; color: #ffc165; }
[data-state="live"] .board-note { display: none; }

/* a value that just moved */
@keyframes tickUp   { 0% { color: #d4ffa8; text-shadow: 0 0 34px rgba(143,220,99,.9); } 100% {} }
@keyframes tickDown { 0% { color: #ffb4a4; text-shadow: 0 0 34px rgba(240,112,90,.9); } 100% {} }
.tick-up   { animation: tickUp .7s ease-out; }
.tick-down { animation: tickDown .7s ease-out; }

/* the compact strip that rides in the hero */
.board.board-mini { margin-top: 24px; max-width: 440px; }
.board.board-mini .board-glass { margin: 12px; padding: 16px; }
.board.board-mini .board-price .v { font-size: clamp(26px, 5vw, 34px); }
.board.board-mini .board-grid { margin-top: 14px; grid-template-columns: repeat(2, 1fr); }

@media (max-width: 720px) {
  ol.steps li { padding-left: 58px; }
  .cab .cab-head, .board-head { padding-left: 20px; padding-right: 20px; }
  .cab::before, .board::before { display: none; }   /* screws are noise at this size */
}
@media (prefers-reduced-motion: reduce) {
  .plain-card:hover, .btn:hover, .btn:active { transform: none; }
  .board-dot { animation: none; }
  .tick-up, .tick-down { animation: none; }
}

/* ── tap targets ──────────────────────────────────────────────────────────
   WCAG 2.2 AA 2.5.8 exempts links sitting INSIDE a sentence — their height is
   set by the surrounding line-height and padding them out would wreck the
   prose. Every link that is NOT inline in a sentence gets a real 44px target. */
.skip { min-height: 44px; display: inline-flex; align-items: center; }
.foot li a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 0; }
.pin .by a, .pin .src a { display: inline-flex; align-items: center; min-height: 44px; }
.board-foot a { display: inline-flex; align-items: center; min-height: 44px; }
.board-foot { padding-bottom: 12px; }

/* ══════════════════════════════════════════════════════════════════════
   THE TOP BAR — round 4.
   Colton: "the taskbar at the top looks very plain with just those little
   texts clicking to each page, we can do better than that by a lot."
   So it becomes the cabinet's control panel: a backlit marquee strip, the
   brand as a lit badge, and the nav as real illuminated buttons with the
   current page switched ON.
   ══════════════════════════════════════════════════════════════════════ */
body.page .top, body.home.solid-nav .top::after {
  background:
    linear-gradient(180deg, rgba(242,169,59,.07), rgba(0,0,0,0) 46%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #16201b 0%, #101814 100%);
  border-bottom: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.16),
    inset 0 -1px 0 rgba(0,0,0,.8),
    0 1px 0 rgba(242,169,59,.22),          /* the lit strip under the marquee */
    0 10px 26px -12px rgba(0,0,0,.9);
}
body.page .top { height: 76px; gap: 24px; }

/* the brand as a stamped badge */
.brand {
  gap: 13px; padding: 7px 14px 7px 10px; border-radius: 5px;
  background: linear-gradient(180deg, #1d2721, #131b16);
  box-shadow:
    inset 0 1px 0 rgba(240,232,208,.16),
    inset 0 0 0 1px rgba(0,0,0,.6),
    0 2px 0 rgba(0,0,0,.6);
  transition: box-shadow .16s ease;
}
.brand:hover {
  box-shadow:
    inset 0 1px 0 rgba(240,232,208,.24),
    inset 0 0 0 1px rgba(242,169,59,.45),
    0 2px 0 rgba(0,0,0,.6);
}
.brand-name { color: #f6eed6; }
.cell { border-color: #c9d2bd; box-shadow: inset 0 0 8px rgba(0,0,0,.7); }

/* the nav as lit cabinet buttons */
body.page .links { gap: 8px; }
body.page .links a {
  position: relative; padding: 11px 16px; border-radius: 5px; border-bottom: 0;
  font: 700 16px/1 var(--type); letter-spacing: .01em; color: #cfd8c6;
  background: linear-gradient(180deg, #19221d, #111815);
  box-shadow:
    inset 0 1px 0 rgba(240,232,208,.1),
    inset 0 0 0 1px rgba(0,0,0,.55),
    0 2px 0 rgba(0,0,0,.6);
  transition: color .16s ease, box-shadow .16s ease, background .16s ease, transform .1s ease;
}
body.page .links a:hover {
  color: #ffd489; background: linear-gradient(180deg, #24302a, #16201b);
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.2),
    inset 0 0 0 1px rgba(242,169,59,.5),
    0 2px 0 rgba(0,0,0,.6),
    0 0 18px -4px rgba(242,169,59,.45);
}
body.page .links a:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(242,169,59,.5); }

/* the page you are on is the one that is switched ON */
body.page .links a[aria-current="page"] {
  color: #1d1406;
  background: linear-gradient(180deg, #ffc65f, #eda233);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 2px 0 #8c5b13,
    0 0 22px -5px rgba(242,169,59,.75);
  text-shadow: none;
}
body.page .links a[aria-current="page"]:hover { color: #1d1406; background: linear-gradient(180deg, #ffd27c, #f5ad3c); }

/* the mobile menu button matches the nav buttons */
body.page .menu-btn {
  border: 0; border-radius: 5px; padding: 0 18px; min-height: 46px;
  font: 800 16px/1 var(--type); letter-spacing: .06em; text-transform: uppercase;
  color: #ffd489; background: linear-gradient(180deg, #24302a, #16201b);
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.18),
    inset 0 0 0 1px rgba(242,169,59,.4),
    0 3px 0 rgba(0,0,0,.65);
}
body.page.menu-open .menu-btn { color: #1d1406; background: linear-gradient(180deg, #ffc65f, #eda233); }

@media (max-width: 979px), (max-aspect-ratio: 19/20) {
  body.page .top { height: 68px; }
  body.page.menu-open .links {
    top: 68px; gap: 8px; padding: 12px 16px 18px;
    background: linear-gradient(180deg, #16201b, #0e1512);
    border-bottom: 0;
    box-shadow: inset 0 1px 0 rgba(242,169,59,.22), 0 18px 30px -14px rgba(0,0,0,.95);
  }
  body.page.menu-open .links a {
    font-size: 17px; padding: 14px 16px; border-bottom: 0;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   PANELS, round 4 — figure and ground.
   Colton: "the panel boxes dont look great they could look much better."
   The real fault was not the bevel, it was VALUE. Every panel sat within a
   few percent of the page behind it, so no amount of edge detail could make
   it read as an object sitting in a room. Fix: drop the room, lift the
   furniture, and let the marquee above spill a little amber onto each top
   edge — which is also the colour-theory answer, warm light on cool ground.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --room: #0a1210;          /* the wall, pushed DOWN */
  --panel-hi: #232f27;      /* the panel, pushed UP */
  --panel-lo: #161f1a;
  --plate: linear-gradient(180deg, var(--panel-hi) 0%, #1b241e 46%, var(--panel-lo) 100%);
}
body.page {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(242,169,59,.10), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    var(--room);
}

/* the amber spill from the marquee onto whatever is directly beneath it */
.cab, .board, .swap-shell, .plain-card, .screen {
  --spill: linear-gradient(180deg, rgba(255,190,96,.07) 0%, rgba(255,190,96,.02) 14%, transparent 34%);
}
.cab, .board, .swap-shell {
  background: var(--spill), var(--laminate), var(--plate);
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.2),       /* warm top edge, not white */
    inset 0 0 0 1px rgba(0,0,0,.6),
    inset 0 -3px 0 rgba(0,0,0,.72),
    inset 5px 0 10px -6px rgba(0,0,0,.75),
    inset -5px 0 10px -6px rgba(0,0,0,.75),
    0 30px 60px -22px rgba(0,0,0,.95);
}
.plain-card {
  background: var(--spill), var(--laminate),
    linear-gradient(180deg, #212c25, #161f1a);
  border-left: 3px solid #6f9a4c;
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.17),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 -2px 0 rgba(0,0,0,.6),
    0 18px 36px -16px rgba(0,0,0,.9);
}
.plain-card:hover {
  transform: translateY(-2px);
  border-left-color: #8fc067;
  box-shadow:
    inset 0 1px 0 rgba(255,222,160,.26),
    inset 0 0 0 1px rgba(0,0,0,.55),
    inset 0 -2px 0 rgba(0,0,0,.6),
    0 26px 46px -16px rgba(0,0,0,.95);
}
/* the cards on the wall lift off the darker room too */
.pin { background: #191710; }
.two-up { background: rgba(240,232,208,.14); }
.tu { background: #16201a; }
.tu-no { background: #1d1310; }
.board-grid { background: rgba(240,232,208,.13); }
.board-grid > div { background: #0a110a; }

/* a hairline of light along the very top of each cabinet, like a machine under a marquee */
.cab::after, .board::after, .swap-shell::after {
  content: ""; position: absolute; left: 12%; right: 12%; top: 0; height: 1px;
  pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, transparent, rgba(255,201,110,.6), transparent);
}

/* spacing rhythm: panels breathe more than they did */
.cab { margin-top: 34px; }
ol.steps { padding: 28px 26px 30px; }
ol.steps li { padding: 0 0 28px 68px; }
.plain-grid { gap: 20px; margin-top: 30px; }
section.block { padding: clamp(40px, 5.5vw, 70px) 0 0; }

/* ══════════════════════════════════════════════════════════════════════
   ROUND 5 — "the white text on that green is still tough to read."
   The ratios already passed AA, so the fault was not contrast, it was HUE.
   Warm cream sitting on a SATURATED green is the muddiest pairing on the
   colour wheel for small text: the two are near-complementary, so the eye
   gets edge vibration instead of a clean figure/ground read.
   The fix is colour theory, not more shadow — pull the saturation out of
   every surface that carries body text, and spend the green where it
   belongs: on accents, spines, numerals and rules, never under a paragraph.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* near-neutral, barely green — reads as "dark room", not "green panel" */
  --panel-hi: #23262a;
  --panel-lo: #15181b;
  --plate: linear-gradient(180deg, var(--panel-hi) 0%, #1b1f22 46%, var(--panel-lo) 100%);
  --room: #0b0d0f;
  /* text on those surfaces goes brighter and cooler-neutral so it sits ON the
     panel instead of blending into its hue */
  --ink-hi: #f7f3ea;      /* headings inside panels */
  --ink-body: #e9e4d8;    /* paragraphs inside panels */
}

.plain-card {
  background: var(--spill), var(--laminate), linear-gradient(180deg, #22262a, #15181b);
  border-left: 3px solid #7fb054;
}
.plain-card p { color: var(--ink-body); }
.plain-card h3 { color: #ffc978; }

ol.steps p { color: var(--ink-body); }
ol.steps b { color: var(--ink-hi); }

.tu { background: #17191c; }
.tu p { color: var(--ink-body); }
.tu h3 { color: var(--ink-hi); }
.tu-no { background: #1f1614; }
.tu-no h3 { color: #ffdccf; }

.pin { background: #16151a; }
.pin blockquote { color: var(--ink-hi); }

.board-grid > div { background: #0c0e10; }
.board-glass {
  background:
    radial-gradient(120% 140% at 50% -20%, rgba(150,196,108,.07), transparent 62%),
    linear-gradient(180deg, #0a0c0a, #070807);
}
.screen { background: radial-gradient(90% 120% at 50% 0%, #1e262a, #0b0d0f 70%); }
.screen .sub { color: var(--ink-body); }

/* the page body copy gets the same treatment */
.block .lede, .marquee p { color: #ece6d8; }
.street-copy p { color: #f3eee0; }

/* green now earns its keep as an ACCENT only */
.block h2 .num { color: #8fc45f; }
.foot h3, .marquee .kicker { color: #9fd06f; }
.pin .by { color: #9fd06f; }
ol.steps li::before { color: #bce88c; box-shadow:
  inset 0 2px 5px rgba(0,0,0,.85), inset 0 0 0 1px rgba(143,196,95,.55), 0 1px 0 var(--hi-soft); }