/* ===========================================================================
   [PIECE 14] HOLO — HUD, panels & readability.

   The look: a 1998 card-shop back room after closing. Black lacquer plates,
   one hot amber accent, one cold ice accent, and everything that holds a
   NUMBER is a physical object — a pinned rent notice, a manila price tag, a
   rubber stamp, a garage-sale sticker, a punch card. There is no neutral
   grey in this file and nothing is a rounded translucent card.

   THE ONE RULE OF THE LAYOUT: nothing is anchored to the viewport edge.
   Two other pieces drop black cinematic bars over the top and bottom of the
   screen; hud.js measures them every frame and publishes --sa-t / --sa-b.
   Every layer here insets to those, so no readout is ever guillotined.

   Typography (all of it ships with the OS — no webfonts, no CDN):
     --display  Haettenschweiler / Impact   card-show banner, hand-lettered sign
     --price    Impact                      the number on the sticker
     --stampf   Stencil                     rubber stamps: SHORT, NM, PAST DUE
     --slab     Rockwell                    price-guide headers
     --type     Courier New                 the ledger, the receipt, the voice
     --label    Bahnschrift / Franklin      small caps chrome
   --font and --mono are read by seventeen other pieces. They do not move.
   =========================================================================== */

:root {
  /* --- shared with every other piece: do not repurpose --- */
  --font: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --mono: "SF Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* --- HOLO display faces --- */
  --display: "Haettenschweiler", "Impact", "Arial Narrow", "Arial Black", sans-serif;
  --price: "Impact", "Haettenschweiler", "Arial Black", sans-serif;
  --stampf: "Stencil", "Rockwell", "Bookman Old Style", Georgia, serif;
  --slab: "Rockwell", "Bookman Old Style", Georgia, serif;
  --type: "Courier New", Courier, ui-monospace, monospace;
  --label: "Bahnschrift", "Franklin Gothic Medium", "Arial Narrow", sans-serif;

  /* --- the safe area inside whatever letterbox is currently painted.
         hud.js measures the real bars and overwrites these live. --- */
  --sa-t: 0px;
  --sa-b: 0px;

  /* --- ground: near-black, never grey --- */
  --black: #070505;
  --plate: #0b0807;
  --plate2: #130d0a;
  --paper: #12100f;
  --panel: rgba(13, 10, 9, .92);
  --line: rgba(247, 239, 223, .13);

  /* --- ink --- */
  --ink: #f7efdf;
  --ink-dim: rgba(247, 239, 223, .56);
  --ink-faint: rgba(247, 239, 223, .3);

  /* --- one warm accent, one cold accent --- */
  --hot: #ff7a2f;
  --hot2: #ffbb78;
  --gold: #ffd479;
  --cold: #6fd6ff;
  --cold2: #2a6f92;
  --green: #8fe08a;
  --red: #ff4a35;
  --blue: #7fc6ff;

  /* --- paper stock + the two inks a shop actually owns --- */
  --manila: #e8dbb7;
  --manila2: #cebd90;
  --mink: #2b1e10;
  --mink-dim: rgba(43, 30, 16, .58);
  --stampred: #9c2f19;
  --stampink: #1f4d6b;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #050404; color: var(--ink); font-family: var(--font); }
#app { position: fixed; inset: 0; }
#stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#ui-root { position: absolute; inset: 0; pointer-events: none; }
#ui-root button, #ui-root .shop-card, #ui-root .legacy-node,
#ui-root .tag, #ui-root .pin, #ui-root .strap, #ui-root .tags { pointer-events: auto; }

/* ---------------------------------------------------------------- boot --- */
#boot {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 16px;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(255, 138, 56, .13), transparent 70%),
    radial-gradient(circle at 50% 42%, #1b1210, #070505 72%);
  z-index: 50; transition: opacity .5s ease;
}
#boot.gone { opacity: 0; pointer-events: none; }
.boot-mark {
  position: relative; font: 400 78px/1 var(--display); letter-spacing: .2em; text-indent: .2em;
  text-align: center; color: #ffd7a2; text-transform: uppercase;
  text-shadow: 0 0 48px rgba(255, 122, 47, .45), 0 3px 0 rgba(120, 48, 8, .5);
}
.boot-mark::after {
  content: "back room · est. 1998"; display: block; margin-top: 10px;
  font: 400 11px/1 var(--type); letter-spacing: .5em; text-indent: .5em;
  color: rgba(255, 187, 120, .5); text-transform: uppercase;
}
.boot-bar { width: 300px; height: 5px; background: rgba(255, 210, 160, .1); overflow: hidden; justify-self: center; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff7a2f, #ffd479); transition: width .2s ease; }
.boot-msg { text-align: center; font: 400 11px/1 var(--type); letter-spacing: .26em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------------------------------------------------------------- hud ---- */
.hud { position: absolute; inset: 0; }

/* =========================================================================
   THE NOTICE — top-left. THE RENT.

   This is the only thing on screen that is allowed to be the biggest, and it
   is deliberately not chrome: it is a sheet off the same pad as the FINAL
   NOTICE letters lying on the desk, pinned to the corkboard, with the number
   he wants printed on it in red. Underneath it, one black plate with what is
   actually in the drawer — always smaller than the sheet above it, because
   that is the whole feeling of the game.

   It stands down entirely (.stood-down) whenever round.js has its own status
   plate up, so the same number never appears twice in two typefaces.
   ========================================================================= */
.rail {
  position: absolute; left: 18px; top: calc(var(--sa-t) + 18px); width: 244px;
  z-index: 12; pointer-events: none; transform-origin: 0 0;
  transition: opacity .3s ease, transform .3s cubic-bezier(.16, .86, .24, 1);
}
/* The cold open dims the whole room to point at one affordance. Rent is the
   one thing that is never allowed to go dim-grey behind a teaching scrim, so
   for the length of the tutorial — and only then — the notice sits over it. */
#ui-root.ob .rail { z-index: 902; }
.rail.pre, .rail.stood-down { opacity: 0; transform: translateY(-12px); }
/* other pieces take the screen; the rail gets out of the way, on its own terms */
body.bx-open .rail { opacity: .18; transition: opacity .3s ease; }
#ui-root.rip-live .rail { opacity: .14; filter: saturate(.4); transition: opacity .34s ease; }
#ui-root.rnd-cine .rail { opacity: .1; transition: opacity .3s ease; }

/* --- the sheet ---------------------------------------------------------- */
.rl-notice {
  position: relative; padding: 15px 15px 9px; color: var(--mink);
  transform: rotate(-1.5deg);
  background:
    repeating-linear-gradient(180deg, transparent 0 20px, rgba(40, 66, 105, .11) 20px 21px),
    linear-gradient(103deg, #f1e6c7 0%, #e3d4ac 44%, #cdbc90 100%);
  background-color: var(--manila);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 93% 100%, 0 100%);
  box-shadow: 0 3px 0 rgba(0, 0, 0, .38), 0 18px 34px rgba(0, 0, 0, .62);
}
/* the coffee ring nobody wiped off */
.rl-notice::after {
  content: ''; position: absolute; right: 12px; bottom: 24px; width: 54px; height: 54px;
  border-radius: 50%; border: 3px solid rgba(120, 74, 26, .13); pointer-events: none;
}
.rl-tack {
  position: absolute; top: -8px; left: 50%; width: 15px; height: 15px; margin-left: -7px;
  border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 34% 28%, #ff9c86 0 14%, #d13a1c 46%, #7c1c08 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .6), inset 0 -2px 3px rgba(0, 0, 0, .35);
}
.rl-head {
  display: block; padding-bottom: 4px; margin-bottom: 7px;
  font: 700 7.5px/1 var(--type); letter-spacing: .13em; text-transform: uppercase;
  color: rgba(43, 30, 16, .62);
  border-bottom: 1px solid rgba(43, 30, 16, .34);
  box-shadow: 0 2px 0 -1px rgba(43, 30, 16, .2);
}
.rl-lab {
  display: block; font: 400 10.5px/1 var(--stampf); letter-spacing: .19em;
  text-transform: uppercase; color: var(--stampred);
}
.rl-fig { display: flex; align-items: baseline; gap: 3px; margin: 1px 0 0 -2px; }
.rl-cur { font: 400 25px/1 var(--price); color: #a5361c; transform: translateY(-8px); }
.rl-rent {
  font: 400 55px/.84 var(--price); letter-spacing: -.015em; font-variant-numeric: tabular-nums;
  color: #8a1d09; text-shadow: 0 1px 0 rgba(255, 250, 232, .5), 0 -1px 0 rgba(80, 20, 6, .18);
}
.rl-notice.lasthour .rl-rent { animation: rent-thump 1.4s ease-in-out infinite; }
@keyframes rent-thump { 0%, 100% { transform: none; } 50% { transform: scale(1.035); } }

/* the rubber stamp: the only editorial on the sheet */
.rl-stamp {
  position: absolute; right: -12px; top: 46px; display: none; z-index: 3;
  padding: 4px 8px 3px; font: 400 14px/1 var(--stampf); letter-spacing: .07em;
  text-transform: uppercase; font-style: normal;
  color: var(--stampred); border: 2.5px solid rgba(156, 47, 25, .6); border-radius: 2px;
  transform: rotate(-12deg); background: rgba(236, 224, 190, .34);
}
.rl-notice.short .rl-stamp { display: block; animation: stamp-in .38s cubic-bezier(.2, 1.5, .5, 1) both; }
.rl-notice.covered .rl-stamp, .rl-notice.paid .rl-stamp {
  display: block; color: var(--stampink); border-color: rgba(31, 77, 107, .55);
  transform: rotate(8deg); animation: stamp-in-ok .38s cubic-bezier(.2, 1.5, .5, 1) both;
}
@keyframes stamp-in { 0% { transform: rotate(-12deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(-12deg) scale(1); opacity: .95; } }
@keyframes stamp-in-ok { 0% { transform: rotate(8deg) scale(2.2); opacity: 0; } 60% { opacity: 1; } 100% { transform: rotate(8deg) scale(1); opacity: .95; } }

.rl-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(43, 30, 16, .3);
  font: 700 7.5px/1 var(--type); letter-spacing: .16em; text-transform: uppercase;
  color: var(--mink-dim);
}
.rl-wk b { font: 400 15px/1 var(--price); letter-spacing: 0; color: #23180c; margin: 0 3px 0 4px; }
.rl-wk em { font-style: normal; opacity: .7; }
.rl-hrs { display: flex; align-items: center; gap: 6px; }
.rl-punch { display: flex; gap: 3px; }
/* hours are punched out of a card. A punched hole does not come back. */
.rl-punch i {
  width: 8px; height: 12px; border-radius: 1px;
  background: linear-gradient(180deg, #3a2916, #241809);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .22);
  transition: background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.rl-punch i.spent {
  background: rgba(28, 18, 8, .82); transform: scaleY(.88);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 246, 216, .34);
}
.rl-notice.lasthour .rl-foot { color: rgba(138, 29, 9, .82); }

/* --- the drawer: one black plate, smaller than the sheet above it -------- */
.rl-drawer {
  position: relative; display: flex; align-items: baseline; gap: 4px;
  margin: 13px 0 0 10px; padding: 8px 16px 8px 12px;
  background: linear-gradient(180deg, #110c0a, #060404);
  border-left: 3px solid var(--hot);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .66), inset 0 1px 0 rgba(255, 190, 120, .12);
}
.rl-drawer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(168deg, rgba(255, 210, 160, .085), transparent 44%);
}
.rl-dlab {
  position: absolute; top: -7px; left: 10px; padding: 0 5px;
  background: #070505; color: rgba(255, 187, 120, .74);
  font: 400 8px/1 var(--label); letter-spacing: .34em; text-transform: uppercase;
}
.rl-dcur { font: 400 20px/1 var(--price); color: var(--hot); transform: translateY(-2px); }
.rl-dnum {
  font: 400 34px/.9 var(--price); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  color: #ffeecf; text-shadow: 0 0 22px rgba(255, 168, 84, .34), 0 2px 0 rgba(90, 38, 6, .5);
}
/* the tab — a red slip clipped to the plate, only when you owe */
.rl-tab {
  display: none; align-items: baseline; gap: 5px; margin-left: 8px; padding: 3px 8px 2px;
  background: linear-gradient(180deg, #34100b, #1a0706); transform: rotate(-1.4deg);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .5);
}
.rl-drawer.owing .rl-tab { display: inline-flex; }
.rl-tab em { font: 400 8px/1 var(--stampf); letter-spacing: .18em; color: #ff8a76; font-style: normal; text-transform: uppercase; }
.rl-tab b { font: 400 14px/1 var(--price); color: #ffcfc6; font-variant-numeric: tabular-nums; }

/* the fuse — market heat only exists on screen once it is actually burning */
.rl-heat { display: none; align-items: center; gap: 8px; margin: 8px 0 0 14px; }
.rail.hot .rl-heat { display: flex; }
.rl-wick { display: flex; gap: 2.5px; }
.rl-wick i { width: 3px; height: 9px; background: rgba(247, 239, 223, .13); transform: skewX(-14deg); transition: background .35s ease, box-shadow .35s ease; }
.rl-wick i.on { background: var(--gold); box-shadow: 0 0 5px rgba(255, 212, 121, .6); }
.rl-wick i.burn { background: var(--red); box-shadow: 0 0 7px rgba(255, 74, 53, .7); }
.rl-heat em { font: 400 9px/1 var(--label); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-faint); font-style: normal; }

/* the roll — a number that changes gets hit */
.n-up { animation: n-up .42s cubic-bezier(.2, 1.4, .4, 1); }
.n-down { animation: n-down .42s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes n-up { 0% { transform: translateY(4px) scale(1.16); filter: brightness(1.9); } 100% { transform: none; filter: none; } }
@keyframes n-down { 0% { transform: translateY(-3px) scale(.9); filter: saturate(1.6) brightness(1.3); } 100% { transform: none; filter: none; } }

/* =========================================================================
   THE MONEY SLIP — render/juice.js throws the +$N. It is not our element,
   but it is our number, and bare type floating over the corkboard reads as a
   debug print. Two ids beat its own one-id rule, so it lands here as a
   manila sale slip with the same gold highlighter as every price tag.
   ========================================================================= */
#app #holo-fx .hfx-num {
  font-family: var(--price); font-weight: 400; letter-spacing: .01em;
  color: #1d1408; padding: .1em .28em .16em; text-shadow: 0 1px 0 rgba(255, 250, 232, .45);
  background:
    linear-gradient(transparent 54%, rgba(255, 200, 52, .72) 54%, rgba(255, 200, 52, .72) 90%, transparent 90%),
    linear-gradient(101deg, #f0e5c5 0%, #ddcda3 62%, #cbb98d 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - .2em), 94% 100%, 0 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .38), 0 10px 20px rgba(0, 0, 0, .55);
}
#app #holo-fx .hfx-bad {
  color: #7a1c07;
  background:
    linear-gradient(101deg, #f0dcc5 0%, #dcc2a1 62%, #c9ab8b 100%);
}
#app #holo-fx .hfx-big { color: #12100a; }
#app #holo-fx .hfx-info, #app #holo-fx .hfx-cool { color: #14303f; }
#app #holo-fx .hfx-num .hfx-tag {
  font-family: var(--label); font-weight: 400; font-size: .28em; letter-spacing: .26em;
  color: rgba(43, 30, 16, .62); opacity: 1; margin-top: .18em; text-shadow: none;
}

/* =========================================================================
   THE COUNTER — right column. A charm strap and a spike of price tags.
   ========================================================================= */
.hud-side {
  position: absolute; top: calc(var(--sa-t) + 16px); right: 16px; width: 328px;
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  pointer-events: none;
}

/* --- the strap ---------------------------------------------------------- */
.strap {
  position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 9px;
  background: linear-gradient(180deg, #1a1109 0%, #0b0705 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 180, 90, .15), 0 6px 18px rgba(0, 0, 0, .5);
}
.strap::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hot2); opacity: .5;
}
.strap-lab { font: 400 13px/1 var(--display); letter-spacing: .17em; text-transform: uppercase; color: var(--hot2); padding-left: 5px; }
.strap-n { margin-left: auto; font: 400 9.5px/1 var(--type); letter-spacing: .12em; color: var(--ink-faint); }
.strap-slots { display: flex; gap: 5px; }
.pin {
  position: relative; width: 27px; height: 27px; border-radius: 50%; display: grid; place-content: center;
  font-size: 14px; cursor: help;
  background: radial-gradient(circle at 34% 26%, #4a3319, #171007 72%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 196, 118, .55), 0 3px 6px rgba(0, 0, 0, .65);
  transition: transform .16s cubic-bezier(.2, 1.4, .4, 1);
}
.pin:hover { transform: translateY(-3px) scale(1.12); z-index: 5; }
.pin.r-rare { box-shadow: inset 0 0 0 1.5px rgba(111, 214, 255, .7), 0 3px 6px rgba(0, 0, 0, .65); }
.pin.r-legendary { box-shadow: inset 0 0 0 1.5px rgba(255, 226, 140, .95), 0 0 12px rgba(255, 200, 90, .35), 0 3px 6px rgba(0, 0, 0, .65); }
.pin.empty {
  width: 22px; height: 22px; align-self: center;
  background: radial-gradient(circle at 50% 46%, #100b06 0 58%, #1c1409 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 214, 160, .1);
}
.pin.empty:hover { transform: none; }
.pin.new { animation: pin-in .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes pin-in { 0% { transform: scale(0) rotate(-40deg); } 100% { transform: none; } }

.pin-pop {
  position: absolute; right: calc(100% + 12px); top: -8px; width: 236px; padding: 10px 12px 11px;
  background: linear-gradient(180deg, #100b08, #070504); border-left: 3px solid var(--hot2);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .7); text-align: left;
  opacity: 0; transform: translateX(8px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.pin:hover .pin-pop { opacity: 1; transform: none; }
.pin-pop b { display: block; font: 400 17px/1.05 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.pin-pop i { display: block; margin: 3px 0 6px; font: 400 8.5px/1 var(--type); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-faint); font-style: normal; }
.pin-pop span { display: block; font: 400 12px/1.42 var(--type); color: rgba(247, 239, 223, .84); }

/* --- the spike ---------------------------------------------------------- */
.spike { position: relative; pointer-events: auto; }
.spike-head {
  display: flex; align-items: baseline; gap: 8px; padding: 6px 11px 6px 10px;
  background: linear-gradient(180deg, #0b0908, #060404); border-left: 3px solid var(--cold);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
}
.spike-head .t { font: 400 13px/1 var(--display); letter-spacing: .17em; text-transform: uppercase; color: #a8e4ff; }
.spike-head .n { margin-left: auto; font: 400 9.5px/1 var(--type); letter-spacing: .1em; color: var(--ink-faint); text-transform: uppercase; }
.spike-head .n b { font-family: var(--price); font-size: 14px; font-weight: 400; color: var(--ink); letter-spacing: 0; }
.spike-head .v { font: 400 18px/1 var(--price); color: var(--gold); font-variant-numeric: tabular-nums; }

.tags {
  display: flex; flex-direction: column; gap: 5px; margin-top: 8px; padding: 3px 4px 5px 2px;
  max-height: min(46vh, 356px); overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: rgba(255, 187, 120, .35) transparent;
}
.tags::-webkit-scrollbar { width: 6px; }
.tags::-webkit-scrollbar-thumb { background: rgba(255, 187, 120, .32); }
.tags::-webkit-scrollbar-track { background: transparent; }

/* a loose card is a manila price tag with a punched hole and a stamp on it.
   the right edge is deliberately ragged — a hand-written stack, not a table. */
.tag {
  position: relative; display: grid; grid-template-columns: 11px 1fr auto auto; align-items: center;
  gap: 0 8px; padding: 5px 9px 6px 7px; color: var(--mink); cursor: default;
  margin-right: var(--rag, 0px);
  background: linear-gradient(102deg, #ece0be 0%, #ddcea4 58%, #cdbb8c 100%);
  background-color: var(--manila);
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .34), 0 7px 15px rgba(0, 0, 0, .46);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 9px 100%, 0 calc(100% - 9px));
  transition: transform .17s cubic-bezier(.2, 1.3, .4, 1), box-shadow .17s ease, filter .17s ease;
  animation: tag-in .34s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes tag-in { 0% { opacity: 0; transform: translateX(26px) rotate(6deg); } 100% { opacity: 1; transform: rotate(var(--rot, 0deg)); } }
.tag:hover { transform: rotate(0deg) translateX(-7px) scale(1.02); box-shadow: 0 3px 0 rgba(0, 0, 0, .34), 0 14px 26px rgba(0, 0, 0, .6); z-index: 6; }
.tag .hole {
  grid-row: 1 / 3; grid-column: 1; width: 9px; height: 9px; border-radius: 50%; background: #070505;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .9), 0 0 0 1px rgba(43, 30, 16, .22);
}
.tag .nm { grid-row: 1; grid-column: 2; font: 400 15px/1.02 var(--display); letter-spacing: .025em; text-transform: uppercase; color: #1d1408; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tag .sub {
  grid-row: 2; grid-column: 2 / -1; display: flex; align-items: center; gap: 6px;
  font: 700 8px/1.3 var(--type); letter-spacing: .1em; text-transform: uppercase; color: var(--mink-dim);
}
.tag .val {
  grid-row: 1; grid-column: 4; font: 400 20px/1 var(--price); color: #14100a; font-variant-numeric: tabular-nums;
  background: linear-gradient(transparent 56%, rgba(255, 206, 60, .62) 56%, rgba(255, 206, 60, .62) 94%, transparent 94%);
  padding: 0 2px;
}
.tag .stamp {
  grid-row: 1; grid-column: 3; justify-self: end;
  font: 400 10.5px/1 var(--stampf); letter-spacing: .05em; padding: 2px 4px 1px;
  color: var(--stampred); border: 1.5px solid rgba(156, 47, 25, .55); border-radius: 2px;
  transform: rotate(-5deg); opacity: .88;
}
.tag .stamp.s-gem { color: #1e6b3c; border-color: rgba(30, 107, 60, .55); }
.tag .stamp.s-slab { color: var(--stampink); border-color: rgba(31, 77, 107, .55); }
/* the foil sticker rides inside the tag: an overhanging one gets guillotined
   by the scroll box, and a clipped sticker looks like a bug, not a card */
.tag .flag {
  flex: 0 0 auto; margin-left: auto; padding: 2px 5px 1.5px;
  font: 400 8.5px/1 var(--label); letter-spacing: .13em; text-transform: uppercase;
  color: #170e1e; box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transform: rotate(-1.4deg);
}
.tag.fin-reverse .flag { background: linear-gradient(120deg, #dfe7f2, #a9bccf); }
.tag.fin-holo .flag { background: linear-gradient(120deg, #ff7ad9 0%, #7fd6ff 48%, #ffe27a 100%); }
.tag.fin-fullart .flag { background: linear-gradient(120deg, #ffd06a, #ff9a3c); }
.tag.fin-goldstar .flag { background: linear-gradient(120deg, #fff3b0, #ffcf3f 55%, #d79a12); box-shadow: 0 0 10px rgba(255, 207, 63, .55); }
.tag.first { box-shadow: 0 2px 0 rgba(0, 0, 0, .34), 0 7px 15px rgba(0, 0, 0, .46), inset 0 0 0 1.5px rgba(156, 47, 25, .32); }

/* the rest of the stock, face down in the box */
.tag-more {
  display: flex; justify-content: space-between; align-items: baseline;
  margin: 1px 26px 0 10px; padding: 4px 9px 5px; color: rgba(43, 30, 16, .8);
  background: linear-gradient(100deg, #cdbd94, #b7a67d); transform: rotate(.6deg);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 6px 12px rgba(0, 0, 0, .4);
  font: 700 8.5px/1 var(--type); letter-spacing: .16em; text-transform: uppercase;
}
.tag-more b { font: 400 14px/1 var(--price); letter-spacing: 0; color: #1d1408; }

.tag-acts { grid-column: 1 / -1; display: flex; gap: 5px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .18s ease, opacity .14s ease, margin .18s ease; }
.tag:hover .tag-acts { max-height: 30px; opacity: 1; margin-top: 6px; }
.tag-acts button {
  flex: 1 1 auto; font: 400 9.5px/1 var(--label); letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 6px; color: #f3e9d2; background: #1c1409; border: 0; cursor: pointer;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .35); transition: background .13s ease, transform .1s ease;
}
.tag-acts button:hover { background: var(--hot); color: #170c03; }
.tag-acts button:active { transform: translateY(2px); box-shadow: none; }
.tag-acts button.sell { background: #3a2408; }
.tag-acts button.sell:hover { background: var(--gold); color: #1a1104; }

/* Nothing on the counter: the header and the footer would be three strips of
   chrome around zero information, so the whole spike collapses to one note. */
.spike.empty .spike-head, .spike.empty .spike-foot { display: none; }
.spike.empty .tags { margin-top: 0; padding-top: 0; }
.counter-empty {
  position: relative; width: fit-content; max-width: 100%; margin-left: auto; margin-right: 14px;
  padding: 9px 13px 11px; color: #3a2a16;
  background: linear-gradient(100deg, #ddd0aa, #c6b585);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 90% 100%, 0 100%);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .3), 0 9px 18px rgba(0, 0, 0, .45);
  transform: rotate(-1.1deg);
}
.counter-empty b { display: block; font: 400 16px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: #22180b; }
.counter-empty span { display: block; margin-top: 4px; font: 400 10.5px/1.38 var(--type); color: rgba(43, 30, 16, .74); }

.spike-foot {
  display: flex; justify-content: space-between; align-items: baseline; margin-top: 7px; padding: 5px 11px 6px 10px;
  background: rgba(8, 6, 5, .88); box-shadow: inset 0 1px 0 rgba(255, 210, 160, .07);
  font: 700 9.5px/1 var(--type); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint);
}
.spike-foot b { font: 400 14px/1 var(--price); letter-spacing: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.spike-foot .net b { color: var(--gold); }

/* =========================================================================
   THE SLIP — bottom-centre. One decision at a time, inside the bottom bar.
   ========================================================================= */
.hud-panel {
  position: absolute; left: 50%; bottom: calc(var(--sa-b) + 20px); transform: translateX(-50%);
  max-width: min(900px, 94vw); padding: 14px 20px 16px; text-align: center;
  background: linear-gradient(180deg, #110c0a 0%, #090605 100%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(255, 184, 116, .12);
  transition: bottom .35s cubic-bezier(.16, .86, .24, 1);
}
.hud-panel::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: linear-gradient(90deg, var(--hot) 0%, #ffb066 42%, rgba(255, 176, 102, 0) 100%);
}
.hud-panel.bare { background: none; box-shadow: none; padding: 0; }
.hud-panel.bare::before { display: none; }
.hud-panel:empty { display: none; }
/* the desk slip is the packs themselves — no plate behind them */
.hud-panel.phase-desk { background: none; box-shadow: none; padding: 0; }
.hud-panel.phase-desk::before { display: none; }

.pk {
  font: 400 10.5px/1 var(--label); letter-spacing: .38em; text-transform: uppercase;
  color: rgba(255, 187, 120, .68); margin-bottom: 11px;
}
.hud-panel h2 { margin: 0 0 4px; font: 400 27px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.hud-panel p { margin: 0 0 12px; color: var(--ink-dim); font: 400 12.5px/1.45 var(--type); }
.row { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; align-items: center; }
.row.tight { margin-top: 11px; }

/* --- buttons: stickers and stamped text, never a rounded grey box -------- */
.btn {
  position: relative; font: 400 13px/1 var(--label); letter-spacing: .18em; text-transform: uppercase;
  padding: 10px 17px; color: var(--ink); background: #150e0a; border: 0; cursor: pointer;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .45); transition: transform .12s ease, background .14s ease, color .14s ease;
}
.btn:hover { background: #241609; color: var(--gold); }
.btn:active { transform: translateY(3px); box-shadow: none; }

.btn.primary {
  font: 400 25px/1 var(--display); letter-spacing: .07em; padding: 12px 28px 13px; color: #1c1105;
  background: linear-gradient(180deg, #ffd977 0%, #f5ab30 62%, #dd8d17 100%);
  box-shadow: 0 5px 0 #8a5410, 0 16px 30px rgba(0, 0, 0, .55);
  transform: rotate(-.7deg);
}
.btn.primary:hover { color: #1c1105; transform: rotate(-.7deg) translateY(-2px); box-shadow: 0 7px 0 #8a5410, 0 20px 34px rgba(0, 0, 0, .6); }
.btn.primary:active { transform: rotate(-.7deg) translateY(3px); box-shadow: 0 2px 0 #8a5410; }

.btn.ghost {
  background: transparent; color: rgba(247, 239, 223, .52); box-shadow: none;
  border: 1px dashed rgba(255, 205, 150, .32); font-size: 11px; letter-spacing: .22em;
}
.btn.ghost:hover { color: var(--hot2); border-color: rgba(255, 205, 150, .55); background: transparent; }
.btn.danger { color: #ff8a76; border-color: rgba(255, 74, 53, .4); }
/* not-affordable is a WARM dead colour, never a grey one */
.btn.disabled { opacity: .38; pointer-events: none; filter: brightness(.7) saturate(.7); }

/* --- pack products ------------------------------------------------------ */
/* A pack is a sealed foil wrapper with PRINTED ART on it: crimped top and
   bottom, a rosette of diffraction under the crimp, the set line, the name,
   and a garage-sale price sticker slapped on the corner. There is no empty
   rectangle anywhere in it — an unfilled panel reads as a failed load. */
.packs { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.btn.pack {
  --crimp: repeating-linear-gradient(90deg, rgba(0, 0, 0, .42) 0 3px, rgba(255, 255, 255, .17) 3px 6px);
  width: 208px; padding: 14px 12px 15px; text-align: left; overflow: visible;
  background:
    var(--crimp) top left / 100% 7px no-repeat,
    var(--crimp) bottom left / 100% 7px no-repeat,
    linear-gradient(155deg, var(--pa, #5a3f1c) 0%, var(--pb, #150d06) 100%);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .5), 0 14px 28px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .16);
  letter-spacing: 0; text-transform: none;
}
.btn.pack::after {  /* wrapper sheen */
  content: ''; position: absolute; inset: 7px 0; pointer-events: none;
  background: linear-gradient(114deg, rgba(255, 255, 255, .19) 0 16%, transparent 34% 62%, rgba(255, 255, 255, .1) 78%, transparent 92%);
}
.btn.pack:hover { transform: translateY(-3px); filter: brightness(1.14); }
.btn.pack:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .5); }

/* the printed art window */
.pk-art {
  position: relative; display: block; height: 60px; margin: 1px 0 9px; overflow: hidden;
  background:
    repeating-linear-gradient(112deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 8px),
    radial-gradient(ellipse 78% 130% at 26% 128%, rgba(255, 255, 255, .34), transparent 60%),
    conic-gradient(from 205deg at 72% 122%, #ff8ad2, #6fd6ff 26%, #ffe27a 52%, #ff9a4a 74%, #ff8ad2 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 240, 210, .3), inset 0 -18px 26px rgba(20, 8, 2, .55), 0 2px 6px rgba(0, 0, 0, .5);
}
/* the creature silhouette printed on the wrapper */
.pk-glyph {
  position: absolute; left: 50%; bottom: -3px; width: 62px; height: 54px; margin-left: -31px;
  background: rgba(24, 10, 3, .62);
  clip-path: polygon(50% 0%, 63% 22%, 88% 16%, 78% 42%, 100% 62%, 72% 66%, 66% 100%, 50% 78%, 34% 100%, 28% 66%, 0 62%, 22% 42%, 12% 16%, 37% 22%);
}
.pk-mark {
  position: absolute; left: 8px; top: 6px; text-decoration: none;
  font: 400 17px/1 var(--display); letter-spacing: .3em; text-transform: uppercase;
  color: rgba(28, 12, 2, .5); text-shadow: 0 1px 0 rgba(255, 255, 255, .3);
}
.pk-set { display: block; font: 400 8.5px/1 var(--label); letter-spacing: .28em; color: rgba(255, 246, 230, .68); text-transform: uppercase; }
.pk-nm { display: block; margin: 5px 0 5px; font: 400 22px/.95 var(--display); letter-spacing: .03em; text-transform: uppercase; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.pk-nm i { font: 400 11px/1 var(--label); font-style: normal; letter-spacing: .3em; display: block; color: rgba(255, 214, 160, .8); margin-bottom: 2px; }
.pk-sub { display: block; font: 400 9.5px/1.36 var(--type); letter-spacing: .03em; color: rgba(255, 246, 230, .66); text-transform: uppercase; }
.sticker {
  position: absolute; right: -10px; top: -12px; min-width: 48px; padding: 9px 6px 8px; text-align: center;
  background: radial-gradient(circle at 38% 30%, #fff0a0, #ffc93c 58%, #e29d16 100%);
  color: #2c1c04; font: 400 21px/1 var(--price); border-radius: 50% / 42%;
  transform: rotate(-10deg); box-shadow: 0 4px 10px rgba(0, 0, 0, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .5);
}
.btn.pack.cant { filter: brightness(.42) saturate(.5) sepia(.2); }
.btn.pack.cant .sticker { background: radial-gradient(circle at 38% 30%, #ffb1a1, #e2503a 62%, #a32d1c 100%); color: #2a0a05; filter: none; }
.btn.pack.cant:hover { filter: brightness(.42) saturate(.5) sepia(.2); transform: none; }

/* --- shop fallback (systems/shop.js normally owns this) ------------------ */
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-bottom: 13px; }
.shop-card {
  position: relative; padding: 13px 12px 14px; background: #0a0807; text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 184, 116, .16); transition: transform .13s ease, box-shadow .15s ease;
}
.shop-card:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--hot), 0 14px 26px rgba(0, 0, 0, .5); }
.shop-card.sold { opacity: .28; pointer-events: none; }
.sc-emoji { font-size: 21px; }
.sc-name { font: 400 18px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--hot2); margin: 5px 0 4px; }
.sc-text { font: 400 11.5px/1.42 var(--type); color: rgba(247, 239, 223, .8); min-height: 46px; }
.sc-cost { margin-top: 7px; font: 400 20px/1 var(--price); color: var(--gold); }
.shop-card.r-rare { box-shadow: inset 0 0 0 1px rgba(111, 214, 255, .45); }
.shop-card.r-legendary { box-shadow: inset 0 0 0 1px rgba(255, 226, 140, .7); }

/* =========================================================================
   THE VOICE — toasts as torn notes off the counter pad.
   ========================================================================= */
.hud-toasts {
  position: absolute; left: 50%; top: calc(var(--sa-t) + 118px); transform: translateX(-50%); z-index: 60;
  display: flex; flex-direction: column; gap: 7px; align-items: center; max-width: 46vw;
}
/* The game speaks on the shop's own notepad — same stock as the price tags,
   torn corner and all. A near-black plate on a near-black room reads as
   floating text; ink on paper reads as somebody telling you something. */
.toast {
  position: relative; padding: 8px 17px 9px 14px; text-align: left;
  background: linear-gradient(101deg, #ece0be 0%, #dcccA2 62%, #cebd91 100%);
  background-color: var(--manila); color: var(--mink);
  border-left: 4px solid var(--hot);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 11px 100%, 0 calc(100% - 11px));
  box-shadow: 0 3px 0 rgba(0, 0, 0, .32), 0 13px 26px rgba(0, 0, 0, .58);
  font: 400 13.5px/1.34 var(--type); letter-spacing: .005em;
  opacity: 0; transform: translateY(-14px) rotate(-.9deg); transition: opacity .26s ease, transform .32s cubic-bezier(.2, 1.35, .4, 1);
}
.toast.in { opacity: 1; transform: rotate(-.9deg); }
.toast:nth-child(even).in { transform: rotate(.7deg); }
.toast-good { border-left-color: #8a5a10; }
.toast-warn { border-left-color: #b8791a; }
.toast-bad { border-left-color: var(--stampred); color: #641708; font-weight: 700; }
.toast-story { border-left-color: var(--stampink); color: #22323c; font-style: italic; }

/* ------------------------------------------------------------- reduced --- */
@media (prefers-reduced-motion: reduce) {
  .tag, .pin.new, .rl-stamp { animation: none !important; }
  .n-up, .n-down, .rl-notice.lasthour .rl-rent { animation: none !important; }
}

@media (max-width: 1400px) {
  .rail { width: 226px; }
  .rl-rent { font-size: 48px; }
  .rl-dnum { font-size: 30px; }
}
@media (max-width: 1100px) {
  .hud-side { width: 264px; }
  .tag .nm { font-size: 13px; }
  .btn.pack { width: 178px; }
  .pk-art { height: 50px; }
}
@media (max-width: 900px) {
  .hud-panel { max-width: 94vw; }
  .shop-grid { grid-template-columns: 1fr 1fr; }
  .rail { width: 196px; }
  .rl-rent { font-size: 40px; }
}
@media (max-height: 760px) {
  .rl-rent { font-size: 44px; }
  .rl-notice { padding: 12px 13px 8px; }
  .pk-art { height: 48px; }
}