/* ==========================================================================
   BLOCKHAVEN -- THE CRATE VAULT (the market page, templates/market.html).

   A 2008 block-game catalogue: Verdana, hard 2px bevels, buttons that press
   in, and TF2-style grade colours.  Every section is built from the same
   five pieces, so the page reads as one machine rather than a collage:

     window     .vt-win + .vt-titlebar   a framed panel with a lit title bar
     slot       .vt-slot                 a sunken cell things sit in
     plate      .vt .mk-btn              a price plate you press
     lamp       .vt-chip                 a little status light
     LCD        .vt-lcd                  digits behind dark glass

   The live event's own colours arrive inline on #market as --ev-accent,
   --ev-deep, --ev-glow and --ev-ink (the readable ink on the accent), so the
   next event re-tints the whole page by itself -- Halloween is orange with
   black frames, Christmas mint on navy.

   Linked from market.html only.  Every rule is scoped under .vt (the
   #market root) except the buy dialog's two new classes (.buy-count,
   .buy-short) and the auto-dark fixes at the end, so the inventory, the
   reveal card and the dialogs keep market.css.  Nothing here touches a
   .theme-* selector: those stay with market.css and the holiday work.
   Every keyframe is prefixed vt-.  Everything that moves stops for
   prefers-reduced-motion (market.css already stops .mk *).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  --vt-panel: #f6ecd8;
  --vt-panel-2: #ecdcbc;
  --vt-ink: #3b2a17;
  --vt-ink-soft: #6e5636;
  --vt-line: #8a6a3c;
  --vt-frame: #2a1a0a;
  --vt-hi: rgba(255, 255, 255, .8);
  --vt-lo: rgba(90, 55, 20, .45);
  --vt-slot: #e4d3b1;
  --vt-wood: #b98a52;
  --vt-wood-edge: #7a4f22;
  --vt-shadow: rgba(60, 35, 10, .25);
  --vt-tip-bg: #141019;
  /* plates, brass and how much a grade colour is darkened to read as text */
  --vt-plate-a: #fff7e6;
  --vt-plate-b: #e3c891;
  --vt-plate-ink: #2a1a0a;
  --vt-brass-a: #ecd08a;
  --vt-brass-b: #b88a34;
  --vt-gmix: 62%;
}
:root[data-theme="dark"] {
  --vt-panel: #18120e;
  --vt-panel-2: #221a13;
  --vt-ink: #f3e5c8;
  --vt-ink-soft: #bfae8e;
  --vt-line: #050403;
  --vt-frame: #000;
  --vt-hi: rgba(255, 255, 255, .10);
  --vt-lo: rgba(0, 0, 0, .65);
  --vt-slot: #0e0a07;
  --vt-wood: #4a3422;
  --vt-wood-edge: #2a1c12;
  --vt-shadow: rgba(0, 0, 0, .5);
  --vt-plate-a: #4d3c2a;
  --vt-plate-b: #2b2016;
  --vt-plate-ink: #f3e5c8;
  --vt-brass-a: #8a6a2c;
  --vt-brass-b: #4e3812;
  --vt-gmix: 100%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --vt-panel: #18120e;
    --vt-panel-2: #221a13;
    --vt-ink: #f3e5c8;
    --vt-ink-soft: #bfae8e;
    --vt-line: #050403;
    --vt-frame: #000;
    --vt-hi: rgba(255, 255, 255, .10);
    --vt-lo: rgba(0, 0, 0, .65);
    --vt-slot: #0e0a07;
    --vt-wood: #4a3422;
    --vt-wood-edge: #2a1c12;
    --vt-shadow: rgba(0, 0, 0, .5);
    --vt-plate-a: #4d3c2a;
    --vt-plate-b: #2b2016;
    --vt-plate-ink: #f3e5c8;
    --vt-brass-a: #8a6a2c;
    --vt-brass-b: #4e3812;
    --vt-gmix: 100%;
  }
}

/* --------------------------------------------------------------- basics */
.vt { font-family: Verdana, Tahoma, sans-serif; color: var(--vt-ink); }
.vt .vt-i { width: 16px; height: 16px; flex: none; fill: currentColor; shape-rendering: crispEdges;
  vertical-align: -3px; }
.vt .vt-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.vt #console, .vt #hall, .vt #stash-bar, .vt #aisles, .vt #odds, .vt #spotlight, .vt .vt-shelf,
.vt .vt-wing { scroll-margin-top: 56px; }
.vt .g-common { --g: #9fb0c2; } .vt .g-uncommon { --g: #4fc46e; } .vt .g-rare { --g: #3d8bfd; }
.vt .g-legendary { --g: #f2a93b; } .vt .g-mythic { --g: #ff4d6d; }
.vt .coin { flex: none; }

/* =========================================================== primitives */
/* -- window */
.vt .vt-win, .vt .panel.vt-win {
  position: relative; margin: 0 0 12px; padding: 0;
  border: 2px solid var(--vt-frame); border-radius: 3px;
  background: var(--vt-panel); color: var(--vt-ink);
  box-shadow: inset 2px 2px 0 var(--vt-hi), inset -2px -2px 0 var(--vt-lo), 0 3px 0 var(--vt-shadow);
}
.vt .vt-win-body { padding: 10px; }
.vt .vt-titlebar {
  position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
  margin: 0; padding: 7px 34px 6px 10px; min-height: 30px;
  font: bold 12px/1.25 Verdana, Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase;
  color: var(--ev-ink);
  background: var(--ev-accent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ev-accent) 72%, #fff) 0,
              var(--ev-accent) 46%, color-mix(in srgb, var(--ev-accent) 82%, #000) 100%);
  border-bottom: 2px solid var(--vt-frame);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%, 0 4px);
}
.vt .vt-titlebar small { font-size: 10px; font-weight: normal; letter-spacing: 0; text-transform: none; opacity: .8; }
.vt .vt-titlebar a { margin-left: auto; font-size: 10px; letter-spacing: 0; text-transform: none; color: inherit;
  text-decoration: underline; }
.vt .vt-titlebar .vt-i { --vt-i2: var(--ev-accent); }
/* Halloween: a cobweb in the corner of every title bar, in the bar's own ink */
.vt[data-holiday="halloween"] .vt-titlebar::after {
  content: ""; position: absolute; right: 0; top: 0; width: 30px; height: 30px; pointer-events: none;
  background: currentColor; opacity: .45;
  -webkit-mask: no-repeat right top / 30px 30px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M30 0L2 28M30 0L14 30M30 0L0 13M30 0L28 30M30 0L0 2'/%3E%3Cpath d='M23 0q-1 6 7 7M17 0q-2 12 13 13M10 0q-3 19 20 21M4 0q-4 26 26 28'/%3E%3C/g%3E%3C/svg%3E");
          mask: no-repeat right top / 30px 30px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M30 0L2 28M30 0L14 30M30 0L0 13M30 0L28 30M30 0L0 2'/%3E%3Cpath d='M23 0q-1 6 7 7M17 0q-2 12 13 13M10 0q-3 19 20 21M4 0q-4 26 26 28'/%3E%3C/g%3E%3C/svg%3E");
}

/* -- slot */
.vt .vt-slot {
  background: var(--vt-slot); border-radius: 2px;
  box-shadow: inset 2px 2px 0 var(--vt-lo), inset -2px -2px 0 var(--vt-hi);
  outline: 2px solid var(--g, transparent); outline-offset: -2px;
}

/* -- plate (the restyle stops at #market: the inventory, the reveal card
      and the dialogs keep market.css's buttons) */
.vt .mk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; margin: 0 0 3px; padding: 6px 11px;
  border: 2px solid var(--vt-frame); border-radius: 3px;
  font: bold 12px/1.1 Verdana, Tahoma, sans-serif; letter-spacing: .5px; text-transform: uppercase;
  color: var(--vt-plate-ink); background: var(--vt-plate-b);
  background: linear-gradient(var(--vt-plate-a), var(--vt-plate-b));
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .55), inset -2px -2px 0 rgba(0, 0, 0, .25), 0 3px 0 var(--vt-frame);
  transition: transform .06s, box-shadow .06s, filter .12s;
  text-shadow: none;
}
.vt .mk-btn:hover { transform: translateY(-1px); filter: brightness(1.07); text-decoration: none;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .55), inset -2px -2px 0 rgba(0, 0, 0, .25), 0 4px 0 var(--vt-frame); }
.vt .mk-btn:active { transform: translateY(3px); filter: none;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .25), 0 0 0 var(--vt-frame); }
.vt .mk-btn:focus-visible { outline: 2px solid var(--ev-glow); outline-offset: 2px; }
.vt .mk-btn em {
  display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px 2px; border-radius: 2px;
  font: bold 12px/1 "Courier New", ui-monospace, monospace; font-style: normal; letter-spacing: 0;
  font-variant-numeric: tabular-nums; text-transform: none; white-space: nowrap;
  color: #ffd98a; background: #120c08;
  box-shadow: inset 1px 1px 0 #000, inset -1px -1px 0 rgba(255, 255, 255, .14);
}
.vt .mk-btn em .coin { width: 11px; height: 11px; }
.vt .mk-btn.hot {
  color: var(--ev-ink); border-color: var(--vt-frame);
  background: var(--ev-accent);
  background: linear-gradient(color-mix(in srgb, var(--ev-accent) 60%, #fff), var(--ev-accent) 48%,
              color-mix(in srgb, var(--ev-accent) 76%, #000));
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .5), inset -2px -2px 0 rgba(0, 0, 0, .28), 0 3px 0 var(--vt-frame),
              0 0 18px color-mix(in srgb, var(--ev-accent) 40%, transparent);
}
.vt .mk-btn.hot:active { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .3), 0 0 0 var(--vt-frame); }
.vt .mk-btn.ghost { color: #f3e5c8; background: rgba(0, 0, 0, .38); border-color: rgba(255, 255, 255, .42);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .08), 0 3px 0 rgba(0, 0, 0, .6); }
.vt .mk-btn.small { min-height: 28px; padding: 4px 8px; font-size: 10.5px; }
.vt .mk-btn.small em { font-size: 11px; padding: 2px 4px; }
.vt .mk-btn.tiny { min-height: 26px; padding: 3px 6px; font-size: 10px; letter-spacing: .3px; }
.vt .mk-btn.tiny em { font-size: 11px; padding: 2px 4px; }
.vt .mk-btn.locked { border-style: dashed; opacity: .85; }
.vt .mk-btn.open:not(.hidden) { animation: mk-throb 1.8s ease-in-out infinite; }
.vt .mk-link { color: var(--vt-ink-soft); text-decoration: underline; font: bold 10.5px Verdana, Tahoma, sans-serif; }
.vt .mk-link:hover { color: var(--vt-ink); }
.vt #mk-wallet.bump { animation: mk-bump .5s cubic-bezier(.3, 1.6, .5, 1); }

/* -- lamp */
.vt .vt-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px 1px;
  border: 1px solid var(--vt-frame); border-radius: 2px;
  font: bold 9px/1.35 Verdana, Tahoma, sans-serif; font-style: normal; letter-spacing: 1px; text-transform: uppercase;
  white-space: nowrap; text-decoration: none; color: #000; background: #e8dcc0;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45);
}
.vt .vt-chip.live { color: var(--ev-ink); background: var(--ev-accent); }
.vt .vt-chip.live::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor;
  animation: vt-pulse 1.2s steps(2) infinite; }
.vt .vt-chip.arc, .vt .vt-chip.archive { color: #3b2a17; background: #e8dcc0; }
.vt a.vt-chip.arc:hover { background: #fff3d6; text-decoration: none; }
.vt .vt-chip.sealed { color: var(--accent, var(--ev-accent)); background: rgba(0, 0, 0, .55);
  border: 1px dashed var(--accent, var(--ev-accent)); box-shadow: none; }
.vt .vt-chip.always { color: #000; background: #f2c230; }
.vt .vt-chip.start { color: #000; background: #3fb950; }
.vt .vt-chip.new { color: #fff; background: #3d8bfd; }
.vt .vt-chip.soon { color: var(--vt-ink); background: transparent; border-style: dashed; box-shadow: none; }
@keyframes vt-pulse { 0% { opacity: 1; } 100% { opacity: .2; } }

/* -- LCD */
.vt .vt-lcd { display: inline-flex; align-items: stretch; gap: 3px; margin: 0 0 10px; padding: 3px;
  background: #000; border: 2px solid #000; border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 3px 0 rgba(0, 0, 0, .5); }
.vt .vt-lcd > small { display: flex; align-items: center; padding: 0 6px; font: bold 9px/1.1 Verdana, sans-serif;
  letter-spacing: 1px; color: var(--ev-accent); background: #0b0710; writing-mode: vertical-rl;
  transform: rotate(180deg); }
.vt .mk-countdown.vt-lcd div { min-width: 50px; padding: 5px 4px 3px; text-align: center; border: 0; border-radius: 0;
  background: #0b0710; box-shadow: inset 0 0 0 1px #2a1d33, inset 0 8px 12px rgba(255, 255, 255, .03); }
.vt .vt-lcd b { display: block; font: bold 26px/1 "Courier New", ui-monospace, monospace; letter-spacing: 1px;
  font-variant-numeric: tabular-nums; color: var(--ev-accent);
  text-shadow: 0 0 8px color-mix(in srgb, var(--ev-accent) 70%, transparent); }
.vt .vt-lcd span { display: block; margin-top: 2px; font: bold 8px Verdana, sans-serif; letter-spacing: 1px;
  color: color-mix(in srgb, var(--ev-accent) 55%, #fff); opacity: .75; }
.vt.vt-last .vt-lcd b { color: #ff4d2d; text-shadow: 0 0 10px #ff4d2d; animation: vt-blink 1s steps(2) infinite; }
.vt.vt-last .vt-lcd > small { color: #ff4d2d; }
@keyframes vt-blink { 0% { opacity: 1; } 100% { opacity: .35; } }

/* -- bulbs: the marquee strip across the top of the console */
.vt .vt-bulbs { grid-area: bulbs; height: 24px; border-bottom: 2px solid #000;
  background:
    radial-gradient(circle, #fff6d6 0 1px, var(--ev-accent) 2px 3px, transparent 4px) 0 50% / 16px 16px repeat-x,
    radial-gradient(circle, color-mix(in srgb, var(--ev-accent) 30%, #000) 0 3px, transparent 4px) 0 50% / 8px 16px repeat-x,
    #0b0710;
  animation: vt-chase .8s steps(2) infinite; }
.vt.vt-last .vt-bulbs { animation-duration: .36s;
  background:
    radial-gradient(circle, #fff 0 1px, #ff4d2d 2px 3px, transparent 4px) 0 50% / 16px 16px repeat-x,
    radial-gradient(circle, #3a0d06 0 3px, transparent 4px) 0 50% / 8px 16px repeat-x, #0b0710; }
@keyframes vt-chase { from { background-position: 0 50%, 0 50%, 0 0; } to { background-position: 16px 50%, 0 50%, 0 0; } }

/* =============================================================== toolbar */
.vt .vt-bar {
  position: sticky; top: var(--vt-stick, 0px); z-index: 40;
  display: flex; align-items: center; gap: 8px; height: 44px; margin: 0 0 10px; padding: 0 5px 0 3px;
  background: var(--vt-panel); border: 2px solid var(--vt-frame); border-radius: 3px;
  box-shadow: inset 2px 2px 0 var(--vt-hi), inset -2px -2px 0 var(--vt-lo), 0 3px 0 var(--vt-shadow);
}
.vt .vt-bar-scroll { display: flex; align-items: center; gap: 3px; flex: 1 1 auto; min-width: 0; height: 100%;
  padding: 0 14px 0 2px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
          mask-image: linear-gradient(90deg, #000 90%, transparent); }
.vt .vt-bar-scroll::-webkit-scrollbar { display: none; }
.vt .vt-tool { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 9px;
  font: bold 11px Verdana, Tahoma, sans-serif; letter-spacing: .5px; text-transform: uppercase; white-space: nowrap;
  color: var(--vt-ink); text-decoration: none; border: 2px solid transparent; border-radius: 3px; }
.vt .vt-tool:hover { text-decoration: none; background: var(--vt-panel-2); border-color: var(--vt-line); }
.vt .vt-tool.on { background: var(--vt-slot); border-color: var(--vt-frame);
  box-shadow: inset 2px 2px 0 var(--vt-lo), inset -1px -1px 0 var(--vt-hi); }
.vt .vt-tool.ev { color: var(--ev-ink); border-color: var(--vt-frame);
  background: var(--ev-accent);
  background: linear-gradient(color-mix(in srgb, var(--ev-accent) 65%, #fff), var(--ev-accent) 50%,
              color-mix(in srgb, var(--ev-accent) 82%, #000));
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .45), inset -2px -2px 0 rgba(0, 0, 0, .25); }
.vt .vt-tool.ev.on { box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .3); }
.vt .vt-tool.ev b { padding: 2px 4px 1px; font: bold 11px/1 "Courier New", ui-monospace, monospace; letter-spacing: 0;
  color: var(--ev-accent); background: #0b0710; }
.vt .vt-coins { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 10px;
  color: #ffd98a; background: #0b0710; border: 2px solid var(--vt-frame); border-radius: 2px;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .7), inset -1px -1px 0 rgba(255, 255, 255, .12); }
.vt .vt-coins b { display: inline-block; font: bold 16px/1 "Courier New", ui-monospace, monospace;
  font-variant-numeric: tabular-nums; }
.vt .vt-bar > .mk-btn { margin: 0; flex: none; }

/* ========================================================= event console */
.vt .vt-console {
  position: relative; display: grid; isolation: isolate; overflow: hidden;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  grid-template-areas: "bulbs bulbs" "screen head" "screen act" "chase chase";
  grid-template-rows: auto auto 1fr auto;
  column-gap: 18px; min-height: 0; margin: 0 0 12px; padding: 0 0 12px;
  color: #f3e5c8; border: 2px solid #000; border-radius: 4px;
  background: #120c14;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ev-deep) 78%, #000) 0, #0b0710 100%);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .07), inset -2px -2px 0 rgba(0, 0, 0, .6),
              0 3px 0 var(--vt-shadow), 0 10px 26px rgba(0, 0, 0, .3);
}
/* slots and plates inside the console sit on its dark cabinet */
.vt .vt-console .vt-slot { --vt-slot: #07050a; --vt-lo: rgba(0, 0, 0, .85); --vt-hi: rgba(255, 255, 255, .12); }

.vt .vt-screen {
  grid-area: screen; position: relative; isolation: isolate; overflow: hidden;
  margin: 12px 0 0 12px; min-height: 352px;
  border: 2px solid #000; border-radius: 3px;
  background:
    radial-gradient(ellipse 70% 40% at 50% 82%, color-mix(in srgb, var(--ev-accent) 26%, transparent), transparent 70%),
    linear-gradient(180deg, #06040b 0%, color-mix(in srgb, var(--ev-deep) 85%, #000) 55%,
                    color-mix(in srgb, var(--ev-accent) 18%, var(--ev-deep)) 100%);
  box-shadow: 0 0 0 4px var(--vt-wood), 0 0 0 6px #000, inset 0 0 40px rgba(0, 0, 0, .7);
}
.vt[data-holiday="halloween"] .vt-screen {
  background: linear-gradient(180deg, #07040f 0%, #170b2a 42%, #3a1640 74%, #8a3a1c 100%); }
.vt .vt-screen .mk-sky { z-index: 0; }
.vt .vt-screen .mk-moon { width: 84px; height: 84px; right: 8%; top: 7%; }
.vt .vt-screen .mk-moon i:nth-child(1) { left: 18px; top: 20px; width: 16px; height: 16px; }
.vt .vt-screen .mk-moon i:nth-child(2) { left: 50px; top: 42px; width: 10px; height: 10px; }
.vt .vt-screen .mk-moon i:nth-child(3) { left: 30px; top: 58px; width: 8px; height: 8px; }
.vt .vt-screen .mk-graves { height: 90px; }
/* the sky leans away from the pointer (store.js sets --px / --py, -1..1);
   ``translate`` composes with the layers' own transform animations */
.vt .vt-screen .mk-moon { translate: calc(var(--px, 0) * -10px) calc(var(--py, 0) * -6px); }
.vt .vt-screen .mk-bats { position: absolute; inset: 0; translate: calc(var(--px, 0) * -7px) calc(var(--py, 0) * -4px); }
.vt .vt-screen .mk-fog { translate: calc(var(--px, 0) * -4px) 0; }
.vt .vt-screen .mk-graves, .vt .vt-screen .mk-lanterns { translate: calc(var(--px, 0) * -2px) 0; }
.vt .vt-screen .mk-stars { translate: calc(var(--px, 0) * -3px) calc(var(--py, 0) * -2px); }
.vt .vt-screen .mk-hero-stage { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center;
  justify-content: center; }
.vt .vt-screen .mk-hero-crate { width: min(300px, 82%); margin-top: -18px; }
.vt .vt-screen .mk-pedestal { bottom: 40px; width: 230px; height: 40px;
  background: radial-gradient(ellipse, color-mix(in srgb, var(--ev-glow) 55%, transparent),
              color-mix(in srgb, var(--ev-deep) 40%, transparent) 55%, transparent 72%); }
.vt .vt-screen .mk-unusual-tease { bottom: 10px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
  border-radius: 2px; border: 1px solid rgba(199, 139, 255, .7); background: rgba(20, 6, 40, .85); }

.vt .vt-deck-head { grid-area: head; position: relative; z-index: 2; padding: 14px 14px 0 0; }
.vt .vt-kicker { margin: 0 0 6px; font: bold 10.5px/1.4 Verdana, Tahoma, sans-serif; letter-spacing: 2px;
  text-transform: uppercase; color: color-mix(in srgb, var(--ev-accent) 60%, #fff); }
.vt .vt-kick-live { padding: 1px 6px; color: var(--ev-ink); background: var(--ev-accent); letter-spacing: 1px; }
.vt .vt-console .mk-title { margin: 2px 0 8px; font: bold 32px/1.04 Verdana, Tahoma, sans-serif; letter-spacing: 0;
  text-transform: uppercase; color: color-mix(in srgb, var(--ev-accent) 28%, #fff);
  text-shadow: 3px 3px 0 #000, 0 0 22px color-mix(in srgb, var(--ev-accent) 55%, transparent); }
.vt .vt-console .mk-title::after { left: 3px; }
.vt .vt-console .mk-blurb { max-width: none; margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #d8cab0; }
.vt .vt-over-note { display: none; margin: 0 0 8px; padding: 6px 8px; font-size: 11.5px; color: #f3e5c8;
  background: rgba(0, 0, 0, .45); border: 1px dashed var(--ev-accent); }
.vt .vt-over-note a { color: var(--ev-accent); font-weight: bold; }
.vt.vt-over .vt-lcd { display: none; }
.vt.vt-over .vt-over-note { display: block; }
.vt .vt-next { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 10px;
  font: bold 11px Verdana, Tahoma, sans-serif; letter-spacing: 1px; text-transform: uppercase; text-decoration: none;
  color: #f3e5c8; background: rgba(0, 0, 0, .5); border: 2px solid #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.vt .vt-next:hover { color: #fff; text-decoration: none; background: rgba(0, 0, 0, .7); }

.vt .vt-deck-act { grid-area: act; position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px;
  align-self: end; padding: 6px 14px 0 0; }
.vt .vt-act-row { display: flex; align-items: stretch; gap: 10px; }
.vt .vt-loadout { display: flex; gap: 6px; flex: none; }
.vt .vt-load { position: relative; display: grid; grid-template-rows: 1fr auto; justify-items: center; width: 66px;
  padding: 4px 3px 4px; }
.vt .vt-load canvas { width: 40px; height: 40px; }
.vt .vt-load small { font: bold 8px Verdana, sans-serif; letter-spacing: 1px; color: #bfae8e; }
.vt .vt-load b { position: absolute; right: 4px; top: 3px; min-width: 18px; padding: 1px 3px; text-align: center;
  font: bold 14px/1 "Courier New", ui-monospace, monospace; color: var(--ev-accent); background: #000; }
.vt .vt-load b.pop, .vt [data-ready].pop { animation: mk-bump .5s; }
.vt .vt-arcade-slot { display: flex; flex-direction: column; justify-content: center; gap: 4px; flex: 1 1 auto; min-width: 0; }
.vt .vt-arcade { width: 100%; min-height: 56px; margin: 0 0 3px; padding: 8px 14px; justify-content: space-between;
  font-size: 16px; letter-spacing: 1px; }
.vt .vt-arcade em { font-size: 15px; padding: 4px 7px 3px; }
.vt .vt-arcade em b { font: inherit; }
.vt .vt-arcade-note { font-size: 10.5px; color: #cdbd9e; }
.vt .vt-arcade-note .coin { width: 11px; height: 11px; vertical-align: -1px; }
/* exactly one arcade button (and its note) shows: the one the player needs */
.vt [data-need] .vt-arcade, .vt [data-need] .vt-arcade-note { display: none; }
.vt [data-need="buy"] .vt-arcade.buy, .vt [data-need="open"] .vt-arcade.go,
.vt [data-need="key"] .vt-arcade.needkey, .vt [data-need="crate"] .vt-arcade.needcrate,
.vt [data-need="signin"] a.vt-arcade { display: inline-flex; }
.vt [data-need="buy"] .vt-arcade-note.buy, .vt [data-need="open"] .vt-arcade-note.go,
.vt [data-need="key"] .vt-arcade-note.needkey, .vt [data-need="crate"] .vt-arcade-note.needcrate,
.vt [data-need="signin"] .vt-arcade-note.signin { display: block; }
.vt [data-need="signin"] a.vt-arcade { justify-content: center; }
.vt .vt-carts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vt .vt-carts .mk-btn { min-height: 44px; justify-content: space-between; padding: 6px 8px 6px 10px; }
.vt .vt-carts-note { margin-top: -4px; font-size: 10.5px; color: #bfae8e; }
.vt .vt-carts-note .coin { width: 11px; height: 11px; vertical-align: -1px; }
.vt .vt-honest { margin: 0; font-size: 10.5px; line-height: 1.45; color: #a99a80; }
.vt .vt-console .vt-inspect { align-self: flex-start; min-height: 30px; padding: 4px 10px; font-size: 10.5px; }

.vt .vt-console .mk-chase { grid-area: chase; display: block; margin: 12px 12px 0; padding: 6px 8px 8px;
  background: rgba(0, 0, 0, .45); border: 2px solid #000; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .5); }
.vt .vt-label { display: block; margin: 0 0 5px; font: bold 9px Verdana, sans-serif; letter-spacing: 1.5px;
  text-transform: uppercase; color: #bfae8e; }
.vt .vt-chase-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(40px, 1fr); gap: 4px;
  overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; }
.vt .mk-chase-item { width: auto; height: auto; aspect-ratio: 1; min-width: 0; padding: 2px; border: 0; border-radius: 2px;
  background: #07050a; cursor: pointer;
  box-shadow: inset 0 -3px 0 var(--g, #9fb0c2), inset 0 0 0 1px rgba(255, 255, 255, .09); }
.vt .mk-chase-item:hover { transform: translateY(-3px); background: #1b1322;
  box-shadow: inset 0 -3px 0 var(--g, #9fb0c2), 0 0 0 2px var(--g, #9fb0c2); }
.vt .mk-chase-item:focus-visible { outline: 2px solid var(--ev-glow); outline-offset: 1px; }

/* -- the ghost (Halloween) */
.vt .vt-boo { position: absolute; left: calc(50% - 158px); bottom: 34px; z-index: 3; width: 40px; height: 45px;
  padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; transform-origin: 50% 100%;
  filter: drop-shadow(0 0 8px rgba(210, 200, 255, .55)); animation: vt-peek 14s ease-in-out infinite; }
.vt .vt-boo svg { display: block; width: 100%; height: 100%; animation: vt-bob 3.2s ease-in-out infinite; }
.vt .vt-boo .vt-eyes { transition: transform .12s; }
.vt .vt-boo:focus-visible { outline: 2px solid var(--ev-glow); outline-offset: 2px; }
.vt .vt-boo.vt-hop { animation: vt-hop .6s cubic-bezier(.3, 1.6, .5, 1); }
.vt .vt-boo.vt-spin { animation: vt-spin 1.1s ease-in-out; }
.vt .vt-boo.vt-duck { animation: vt-duck .3s ease-out forwards; }
.vt .vt-boo-says { position: absolute; left: calc(50% - 176px); bottom: 88px; z-index: 4; max-width: 190px;
  padding: 5px 8px; font: bold 10.5px/1.35 Verdana, sans-serif; color: #1a0f24; background: #f4f1ff;
  border: 2px solid #000; border-radius: 2px; box-shadow: 2px 2px 0 #000; pointer-events: none;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; }
.vt .vt-boo-says::after { content: ""; position: absolute; left: 20px; bottom: -8px; border: 4px solid transparent;
  border-top-color: #000; }
.vt .vt-boo-says.on { opacity: 1; transform: none; }
@keyframes vt-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes vt-peek { 0%, 62%, 100% { transform: none; } 68% { transform: translate(6px, 26px) scale(.9); }
  80% { transform: translate(6px, 26px) scale(.9); } 86% { transform: translate(0, -8px) rotate(-8deg); }
  92% { transform: rotate(5deg); } }
@keyframes vt-hop { 0% { transform: none; } 35% { transform: translateY(-22px) scale(1.06, .94); }
  60% { transform: translateY(0) scale(.94, 1.06); } 100% { transform: none; } }
@keyframes vt-spin { 0% { transform: none; } 100% { transform: rotateY(720deg) translateY(-6px); } }
@keyframes vt-duck { to { transform: translateY(18px) scale(1.05, .8); } }

/* ============================================================== drop log */
.vt .mk-drops { margin: 0 0 12px; padding: 5px 8px; border: 2px solid var(--vt-frame); border-radius: 3px;
  color: #f3e5c8; background: #0b0710; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6), 0 3px 0 var(--vt-shadow); }
.vt .mk-drops-tag { border: 1px solid #000; border-radius: 2px; color: var(--ev-ink); background: var(--ev-accent); }
.vt .mk-drops-tag .mk-live-dot { background: var(--ev-ink); box-shadow: none; animation: vt-pulse 1.2s steps(2) infinite; }
.vt .mk-drop { border-radius: 2px; border: 1px solid #2e2438; border-left: 4px solid var(--g, #9fb0c2);
  background: #1a1420; color: #e8dcc0; }
.vt .mk-drop i { color: var(--g, inherit); filter: none; }
.vt .mk-drop small { color: #9a8a70; }
.vt .mk-drop.unusual i { color: #d6a8ff; }
.vt .mk-drop.empty { border-left-color: #6e5636; color: #bfae8e; }
.vt .mk-drops-count { color: #bfae8e; }
.vt .mk-drops-count b { color: #f3e5c8; }
.vt .vt-unu-n { color: #c98bff; }
.vt .mk-side .vt-unu-n { color: var(--unusual-ink, #7a34c4); }

/* ============================================================== key ring */
.vt .vt-ring { display: block; }
.vt .vt-ring-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; padding: 8px; }
.vt .vt-ringrow { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 8px; row-gap: 2px;
  align-items: center; padding: 4px 6px 4px 4px; border: 2px solid var(--vt-line); border-left: 5px solid var(--accent);
  border-radius: 2px; background: var(--vt-panel-2); }
.vt .vt-ringrow.empty:not(.pinned) { display: none; }
.vt .vt-ringrow.vt-in { animation: vt-dropin .5s cubic-bezier(.2, 1.4, .4, 1); }
.vt .vt-ringslot { grid-row: 1 / span 3; width: 46px; height: 46px; display: grid; place-items: center; }
.vt .vt-ringslot canvas { width: 40px; height: 40px; }
.vt .vt-ringtxt { grid-column: 2; grid-row: 1 / span 3; min-width: 0; }
.vt .vt-ringtxt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 11px; color: var(--vt-ink); }
.vt .vt-ringtxt span { display: flex; align-items: center; gap: 4px; margin-top: 2px; color: var(--vt-ink-soft); }
.vt .vt-ringtxt .vt-i { width: 14px; height: 14px; }
.vt .vt-ringtxt i { min-width: 14px; margin-right: 4px; font: bold 13px/1 "Courier New", ui-monospace, monospace;
  font-style: normal; color: var(--vt-ink); }
.vt .vt-ringtxt i.pop { animation: mk-bump .5s; display: inline-block; }
.vt .vt-ringrow > .mk-btn, .vt .vt-ringrow > .vt-shoplink { grid-column: 3; margin: 0; }
.vt .vt-ringrow > .mk-btn { min-height: 26px; }
.vt .vt-ringrow:not(.vt-need-key) .vt-getkey, .vt .vt-ringrow:not(.vt-need-crate) .vt-getcrate,
.vt .vt-ringrow:not(.empty) .vt-shoplink { display: none; }
.vt .vt-shoplink { font-size: 10px; font-weight: bold; white-space: nowrap; color: var(--vt-ink-soft); }
@keyframes vt-dropin { from { transform: translateY(-10px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }

/* ============================================================ crate hall */
.vt .vt-wings { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px;
  padding: 8px 8px 0; background: var(--vt-panel-2); border-bottom: 2px solid var(--vt-frame); }
.vt .vt-wing-tab { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 3px; min-width: 0; padding: 7px 4px 6px; text-align: center; text-decoration: none;
  font: bold 10px/1.15 Verdana, Tahoma, sans-serif; letter-spacing: .3px; text-transform: uppercase; color: #2a1a0a;
  background: linear-gradient(var(--vt-brass-a), var(--vt-brass-b)); border: 2px solid var(--vt-frame);
  border-bottom: 0; border-radius: 3px 3px 0 0;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .4), inset -2px 0 0 rgba(0, 0, 0, .22); }
:root[data-theme="dark"] .vt .vt-wing-tab { color: #f3e5c8; }
.vt .vt-wing-tab:hover { text-decoration: none; filter: brightness(1.08); }
.vt .vt-wing-tab .vt-i { width: 24px; height: 24px; --vt-i2: #000; }
.vt .vt-wing-tab b { display: block; max-width: 100%; overflow-wrap: anywhere; }
.vt .vt-wing-tab small { position: absolute; right: 3px; top: 3px; min-width: 14px; padding: 1px 2px;
  font: bold 10px/1 "Courier New", ui-monospace, monospace; color: #ffd98a; background: #120c08; border-radius: 1px; }
.vt .vt-wing-tab .vt-chip { font-size: 8px; padding: 1px 4px 0; letter-spacing: .5px; }
.vt .vt-wing-tab[aria-selected="true"] { z-index: 1; margin-bottom: -2px; padding-bottom: 8px; color: var(--acc-ink, #140800);
  background: var(--accent);
  background: linear-gradient(color-mix(in srgb, var(--accent) 62%, #fff), var(--accent) 55%);
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .5), inset -2px 0 0 rgba(0, 0, 0, .18),
              0 -3px 12px color-mix(in srgb, var(--accent) 45%, transparent); }
.vt .vt-wing-tab:focus-visible { outline: 2px solid var(--ev-glow); outline-offset: -4px; }

.vt .vt-wing { padding: 10px; }
.vt .vt-wing-head { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 10px;
  margin: 0 0 10px; padding: 8px; background: var(--vt-panel-2); border: 2px solid var(--vt-line); border-radius: 2px; }
.vt .vt-wing-icon { display: grid; place-items: center; width: 52px; height: 52px; color: var(--accent); }
.vt .vt-wing-icon .vt-i { width: 32px; height: 32px; filter: drop-shadow(1px 1px 0 #000); }
.vt .vt-wing-head b { font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.vt .vt-wing-head span { font-size: 11px; color: var(--vt-ink-soft); }
.vt .vt-wing-head p { margin: 3px 0 0; font-size: 11px; color: var(--vt-ink-soft); }
.vt .vt-meter { position: relative; display: block; min-width: 170px; padding: 5px 8px; text-align: center;
  font: bold 10px Verdana, sans-serif; color: var(--vt-ink); border: 2px solid var(--vt-frame);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 70%, transparent) var(--p, 0%), var(--vt-slot) var(--p, 0%));
  box-shadow: inset 2px 2px 0 var(--vt-lo); }

/* -- a shelf: year plaque | crate on its plank | the details | key on its hook */
.vt .vt-shelf { position: relative; display: grid;
  grid-template-columns: 92px 150px minmax(0, 1fr) 90px;
  grid-template-areas: "plaque art info hook" "loot loot loot loot";
  column-gap: 12px; margin: 0 0 12px; padding: 10px;
  background: var(--vt-panel); border: 2px solid var(--vt-frame); border-radius: 3px;
  box-shadow: inset 2px 2px 0 var(--vt-hi), inset -2px -2px 0 var(--vt-lo), 0 3px 0 var(--vt-shadow); }
.vt .vt-shelf > * { min-width: 0; }
.vt .vt-shelf[data-state="live"] { box-shadow: inset 2px 2px 0 var(--vt-hi), inset -2px -2px 0 var(--vt-lo),
  0 3px 0 var(--vt-shadow), 0 0 0 2px var(--ev-accent); }
.vt .vt-plaque { grid-area: plaque; align-self: start; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 9px 4px 8px; text-align: center; color: #2a1a0a;
  background: linear-gradient(var(--vt-brass-a), var(--vt-brass-b)); border: 2px solid var(--vt-frame); border-radius: 2px;
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .45), inset -2px -2px 0 rgba(0, 0, 0, .25), 0 2px 0 var(--vt-shadow); }
:root[data-theme="dark"] .vt .vt-plaque { color: #f3e5c8; }
.vt .vt-plaque b { font: bold 12px/1.2 Verdana, sans-serif; letter-spacing: .5px; text-transform: uppercase; }
.vt .vt-plaque .vt-chip { white-space: normal; text-align: center; justify-content: center; }
.vt .vt-shelf .mk-show-art { grid-area: art; align-self: start; height: 150px; border-radius: 2px;
  border: 2px solid var(--vt-frame); border-bottom: 10px solid var(--vt-wood);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 0 var(--vt-wood-edge), 0 4px 0 var(--vt-shadow);
  transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .35s cubic-bezier(.2, .9, .3, 1.2); }
.vt .vt-shelf .mk-show-art.tilting { transition: transform .06s linear; }
.vt .vt-shelf .mk-show-art canvas { inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); }
.vt .vt-shelf .mk-show-art:hover canvas { transform: scale(1.06) rotate(-2deg); }
.vt .vt-shelf .mk-owned, .vt .vt-hook .mk-owned { position: absolute; right: 4px; top: 4px; z-index: 2; }
.vt .mk-owned { border-radius: 2px; border: 1px solid #000; font: bold 10px/1.3 "Courier New", ui-monospace, monospace;
  padding: 1px 4px; background: #2f7a38; color: #fff; }
.vt .vt-hook { grid-area: hook; position: relative; align-self: start; height: 118px; padding-top: 18px;
  display: flex; justify-content: center; border-bottom: 10px solid var(--vt-wood); border-radius: 2px;
  background: var(--vt-slot); box-shadow: inset 2px 2px 0 var(--vt-lo), inset -2px -2px 0 var(--vt-hi), 0 2px 0 var(--vt-wood-edge); }
.vt .vt-hook::before { content: ""; position: absolute; left: 50%; top: 6px; width: 8px; height: 8px; margin-left: -4px;
  background: #8a8f98; border: 2px solid #1b1e22; border-radius: 50%; }
.vt .vt-hook canvas { width: 76px; height: 76px; transform-origin: 50% 0; transform: rotate(-8deg);
  transition: transform .5s cubic-bezier(.3, 1.8, .5, 1); }
.vt .vt-hook:hover canvas { transform: rotate(6deg); }
.vt .vt-info { grid-area: info; display: flex; flex-direction: column; gap: 5px; }
.vt .vt-shelf-title { font: bold 15px/1.15 Verdana, Tahoma, sans-serif; text-transform: uppercase; color: var(--vt-ink); }
.vt .vt-shelf-sub { font-size: 10.5px; color: var(--vt-ink-soft); }
.vt .vt-tolive, .vt .vt-archive-note { margin: 0; font-size: 10.5px; }
.vt .vt-tolive { align-self: flex-start; font-weight: bold; color: var(--vt-ink); }
.vt .vt-archive-note { padding: 3px 6px; color: var(--vt-ink-soft); background: var(--vt-panel-2);
  border-left: 3px solid var(--vt-line); }
.vt .mk-oddsbar { height: 12px; margin: 2px 0 0; border-radius: 0; border: 2px solid var(--vt-frame);
  background: var(--vt-slot); box-shadow: none; }
.vt .mk-oddskey { gap: 2px 8px; margin: 0; font-size: 9.5px; color: var(--vt-ink-soft); }
.vt .mk-oddskey b { border-radius: 0; border: 1px solid rgba(0, 0, 0, .5); }
.vt .vt-unu { margin: 0; font-size: 10.5px; color: var(--vt-ink-soft); }
.vt .vt-plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 3px; }
.vt .vt-plates > .mk-btn { justify-content: space-between; margin: 0 0 3px; }
.vt .vt-kit { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; gap: 8px; padding: 3px 4px 3px 3px; overflow: visible;
  background: var(--vt-panel-2); border: 2px solid var(--vt-line); border-radius: 2px; box-shadow: none; }
.vt .vt-kit::before { content: none; }
.vt .vt-kit .mk-btn { margin: 0 0 3px; min-width: 112px; justify-content: space-between; }
.vt .vt-kit-art { position: relative; display: block; width: 44px; height: 44px; }
.vt .vt-kit-art canvas { width: 44px; height: 44px; }
.vt .vt-kit-art i { position: absolute; right: -2px; bottom: -2px; padding: 0 3px; font: bold 11px/1.3 "Courier New", monospace;
  font-style: normal; color: #ffd98a; background: #120c08; }
.vt .vt-kit-txt { min-width: 0; }
.vt .vt-kit-txt b { font-size: 11px; color: var(--vt-ink); margin-right: 4px; }
.vt .vt-kit-txt small { display: block; font-size: 10px; color: var(--vt-ink-soft); }
.vt .vt-kit-txt .coin { width: 10px; height: 10px; vertical-align: -1px; }
.vt .vt-info > .vt-inspect { align-self: flex-start; }

/* -- the loot drawer */
.vt .vt-loot { grid-area: loot; margin-top: 10px; border: 2px solid var(--vt-frame); border-radius: 2px;
  background: var(--vt-slot); box-shadow: inset 2px 2px 0 var(--vt-lo); }
.vt .vt-loot > summary { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; list-style: none;
  font: bold 10.5px Verdana, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: #fff3dc;
  background: linear-gradient(var(--vt-wood), var(--vt-wood-edge)); text-shadow: 1px 1px 0 rgba(0, 0, 0, .5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25); }
.vt .vt-loot > summary::-webkit-details-marker { display: none; }
.vt .vt-loot > summary::before { content: ""; width: 0; height: 0; border: 5px solid transparent;
  border-left: 7px solid currentColor; border-right: 0; transition: transform .15s; }
.vt .vt-loot[open] > summary::before { transform: rotate(90deg); }
.vt .vt-loot > summary:focus-visible { outline: 2px solid var(--ev-glow); outline-offset: -2px; }
.vt .vt-pieces { list-style: none; margin: 0; padding: 8px; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 6px; }
.vt .vt-piece { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 4px 4px 6px; text-align: center; background: var(--vt-panel); border: 2px solid var(--vt-frame);
  border-bottom: 4px solid var(--g); border-radius: 2px; box-shadow: inset 1px 1px 0 var(--vt-hi); }
.vt .vt-piece canvas { width: 72px; height: 72px; border-radius: 2px;
  background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--g) 30%, transparent), transparent 70%); }
.vt .vt-name { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font: bold 10.5px/1.25 Verdana, Tahoma, sans-serif; color: var(--vt-ink); }
.vt .vt-piece .vt-name { color: var(--vt-ink); color: color-mix(in srgb, var(--g) var(--vt-gmix), #000); }
.vt .vt-piece small { font-size: 9px; color: var(--vt-ink-soft); }
.vt .vt-piece .mk-btn { margin: 3px 0 0; width: 100%; justify-content: space-between; }
.vt .vt-piece .mk-owned { position: absolute; left: 4px; top: 4px; }
.vt .vt-price { margin-top: 4px; display: inline-flex; align-items: center; gap: 3px;
  font: bold 12px "Courier New", ui-monospace, monospace; color: var(--vt-ink); }
.vt .vt-lock { width: 100%; margin-top: 3px; padding: 4px 4px; cursor: pointer;
  font: bold 9.5px Verdana, sans-serif; letter-spacing: .3px; text-transform: uppercase; color: var(--vt-ink-soft);
  background: repeating-linear-gradient(-45deg, var(--vt-panel-2) 0 6px, transparent 6px 12px);
  border: 2px dashed var(--vt-line); border-radius: 2px; }
.vt .vt-lock:hover { color: var(--vt-ink); border-color: var(--vt-frame); }
.vt .vt-lock:focus-visible { outline: 2px solid var(--ev-glow); outline-offset: 1px; }

/* -- a sealed shelf: powered down, nothing to buy or peek at */
.vt .vt-shelf.sealed { grid-template-columns: 92px 150px minmax(0, 1fr); grid-template-areas: "plaque art info";
  border-style: dashed;
  background: repeating-linear-gradient(-45deg, var(--vt-panel) 0 10px, var(--vt-panel-2) 10px 20px); }
.vt .sealed .vt-plaque { filter: grayscale(.6) brightness(.85); }
.vt .sealed .vt-silhouette { grid-area: art; position: relative; display: grid; place-items: center; height: 150px;
  overflow: hidden; --vt-slot: #07050a; }
.vt .sealed .vt-silhouette canvas { width: 128px; height: 128px; filter: brightness(0) drop-shadow(0 0 6px var(--accent)); }
.vt .sealed .vt-silhouette::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px);
  animation: vt-static 3.2s steps(3) infinite; }
.vt .vt-padlock { position: absolute; right: 8px; bottom: 8px; z-index: 1; width: 26px; height: 26px; color: var(--accent);
  filter: drop-shadow(1px 1px 0 #000); }
.vt .sealed .vt-info { justify-content: center; }
.vt .sealed .vt-info p { margin: 0; font-size: 11px; color: var(--vt-ink-soft); }
@keyframes vt-static { 0% { opacity: .5; transform: translateY(0); } 50% { opacity: .9; transform: translateY(1px); }
  100% { opacity: .6; transform: translateY(2px); } }

/* ========================================================= inspect bench */
.vt .mk-spot-body { padding: 10px; }
.vt .mk-spot-stage { border-radius: 2px; border: 2px solid var(--vt-frame);
  box-shadow: inset 0 0 40px rgba(178, 107, 255, .35), 0 3px 0 var(--vt-shadow); }
.vt .mk-spot-fx { border-radius: 2px; }
.vt .mk-spot-pick { border-radius: 2px; border: 2px solid var(--vt-line); background: var(--vt-panel-2); color: var(--vt-ink);
  box-shadow: inset 1px 1px 0 var(--vt-hi); }
.vt .mk-spot-pick canvas { background: var(--vt-slot); border-radius: 2px; }
.vt .mk-spot-pick.on { border-color: var(--vt-frame); background: var(--vt-slot);
  box-shadow: inset 2px 2px 0 var(--vt-lo), 0 0 0 2px var(--ev-accent); transform: none; }
.vt .mk-spot-copy b { color: var(--vt-ink); }
.vt .mk-spot-copy p { color: var(--vt-ink-soft); }

/* ======================================================== supply shelves */
.vt .mk-tabs { gap: 4px; margin: 0 0 10px; }
.vt .mk-tabs a { gap: 5px; padding: 5px 8px 4px; border-radius: 3px; border: 2px solid var(--vt-frame);
  font: bold 10px Verdana, Tahoma, sans-serif; letter-spacing: .4px; text-transform: uppercase;
  color: var(--vt-plate-ink); background: linear-gradient(var(--vt-plate-a), var(--vt-plate-b));
  box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .45), inset -2px -2px 0 rgba(0, 0, 0, .2), 0 2px 0 var(--vt-frame); }
.vt .mk-tabs a::before { content: none; }
.vt .mk-tabs a:hover { transform: translateY(-1px); background: linear-gradient(var(--vt-plate-a), var(--vt-plate-b)); }
.vt .mk-tabs a.on, .vt .mk-tabs a.ic-pumpkin.on { color: var(--ev-ink); border-color: var(--vt-frame); transform: translateY(2px);
  background: var(--ev-accent); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .3), 0 0 0 var(--vt-frame); }
.vt .mk-tabs a.ic-pumpkin { border-color: var(--vt-frame); }
.vt .mk-filter input[type=search], .vt .mk-filter select { border: 2px solid var(--vt-frame); border-radius: 2px;
  box-shadow: inset 2px 2px 0 var(--vt-lo); }
.vt .mk-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.vt .mk-card.vt-slotcard { display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 5px 5px 4px;
  border: 2px solid var(--vt-frame); border-bottom: 4px solid var(--rc); border-radius: 3px; background: var(--vt-panel);
  box-shadow: inset 2px 2px 0 var(--vt-hi), 0 3px 0 var(--vt-shadow); }
.vt .mk-card.vt-slotcard:hover { box-shadow: inset 2px 2px 0 var(--vt-hi), 0 3px 0 var(--vt-shadow), 0 0 0 2px var(--rc); }
.vt .vt-slotcard.stash { box-shadow: inset 2px 2px 0 var(--vt-hi), 0 3px 0 var(--vt-shadow), 0 0 0 1px var(--rc); }
.vt .vt-slotcard .mk-card-art { margin-bottom: 3px; border-radius: 2px;
  background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--rc) 30%, var(--vt-slot)), var(--vt-slot) 72%);
  box-shadow: inset 2px 2px 0 var(--vt-lo), inset -2px -2px 0 var(--vt-hi); }
.vt .vt-slotcard .mk-card-art canvas { padding: 6px; }
.vt .vt-slotcard .mk-card-art .mk-owned { right: 4px; top: 4px; }
.vt .vt-slotcard > .vt-chip { position: absolute; z-index: 3; left: 3px; top: 3px; }
.vt .vt-slotcard > small { font-size: 9.5px; color: var(--vt-ink-soft); text-transform: capitalize; }
.vt .vt-slotcard > .mk-btn { margin-top: auto; justify-content: space-between; }
.vt .vt-slotcard > .vt-name { margin-top: 1px; }
.vt .vt-more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 180px;
  padding: 10px; text-align: center; text-decoration: none; color: var(--vt-ink);
  border: 2px dashed var(--vt-line); border-radius: 3px; background: var(--vt-panel-2); }
.vt .vt-more:hover { text-decoration: none; border-color: var(--vt-frame); background: var(--vt-slot); }
.vt .vt-more .vt-i { width: 32px; height: 32px; color: var(--ev-accent); filter: drop-shadow(1px 1px 0 #000); }
.vt .vt-more b { font-size: 12px; text-transform: uppercase; }
.vt .vt-more small { font-size: 10px; color: var(--vt-ink-soft); }
/* the Event Armory: past events' weapons, under a sign of their own */
.vt .vt-aisle-sign { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 6px 8px;
  border: 2px solid var(--vt-frame); border-radius: 3px; color: var(--vt-ink); background: var(--vt-panel-2);
  box-shadow: inset 2px 2px 0 var(--vt-hi), 0 3px 0 var(--vt-shadow); }
.vt .vt-aisle-sign:first-child { margin-top: 0; }
.vt .vt-aisle-sign .vt-i, .vt .vt-armory-card .vt-i { color: var(--ev-accent); --vt-i2: #000; filter: drop-shadow(1px 1px 0 #000); }
.vt .vt-aisle-sign .vt-i { width: 28px; height: 28px; }
.vt .vt-aisle-sign b { display: block; font-size: 12px; letter-spacing: .5px; text-transform: uppercase; }
.vt .vt-aisle-sign small { display: block; font-size: 10px; color: var(--vt-ink-soft); }
.vt .vt-slotcard > small.vt-from { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: none; }
.vt .vt-armory-card small { text-transform: none; }

/* ================================================================== side */
.vt .mk-side .vt-win-body { font-size: 11px; }
.vt .mk-side .vt-titlebar { font-size: 11px; padding-right: 28px; }
.vt .mk-odds { border-bottom: 2px dotted var(--vt-line); }
.vt .mk-odds:last-of-type { border-bottom: 0; }
.vt .vt-foot { margin: 6px 0 0; color: var(--vt-ink-soft); }
.vt .vt-steps { margin: 0; padding: 10px 10px 10px 30px; }
.vt .vt-steps li { margin: 0 0 6px; }
.vt .vt-steps li::marker { font: bold 12px "Courier New", monospace; color: var(--vt-ink); }
.vt .vt-steps .coin { width: 11px; height: 11px; vertical-align: -1px; }
.vt .mk-grades span { color: var(--vt-ink); }
.vt .mk-grades i { border-radius: 0; border: 1px solid #000; }
.vt .vt-fx > summary { cursor: pointer; list-style: none; }
.vt .vt-fx > summary::-webkit-details-marker { display: none; }
.vt .vt-fx > summary::before { content: ""; width: 0; height: 0; border: 5px solid transparent;
  border-left: 7px solid currentColor; border-right: 0; transition: transform .15s; }
.vt .vt-fx[open] > summary::before { transform: rotate(90deg); }
.vt .vt-fx .pill { border-radius: 2px; }

/* ======================================================= mobile buy bar */
.vt .vt-buybar { position: fixed; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; align-items: center; gap: 8px; padding: 5px 6px 4px 5px;
  color: #f3e5c8; background: #0b0710; border: 2px solid #000; border-radius: 4px;
  box-shadow: 0 0 0 2px var(--ev-accent), inset 2px 2px 0 rgba(255, 255, 255, .1), 0 8px 22px rgba(0, 0, 0, .55);
  transform: translateY(calc(100% + 30px)); transition: transform .25s ease; }
.vt .vt-buybar[hidden] { display: none; }
.vt .vt-buybar.on { transform: none; }
.vt .vt-buybar > canvas { width: 44px; height: 44px; flex: none; }
.vt .vt-bb-txt { flex: 1 1 auto; min-width: 0; }
.vt .vt-bb-txt b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px;
  text-transform: uppercase; }
.vt .vt-bb-txt small { color: var(--ev-accent); font-weight: bold; }
.vt .vt-buybar .vt-arcade-slot { flex: 0 0 auto; }
.vt .vt-buybar .vt-arcade { width: auto; min-height: 48px; padding: 6px 10px; font-size: 12px; gap: 8px; }
.vt .vt-buybar .vt-arcade em { font-size: 12px; }
body.has-dock .vt .vt-buybar { right: 84px; }
body.cs-open .vt .vt-buybar, body.key-mode .vt .vt-buybar { display: none; }
body:has(.modal-scrim) .vt .vt-buybar { visibility: hidden; }
body.vt-buybar-on #site-toasts { bottom: 86px; }
/* the messages dock rides up above the buy bar instead of covering its button */
body.vt-buybar-on #msg-dock { bottom: 84px; }
@media (min-width: 761px) { .vt .vt-buybar { display: none !important; } }

/* ============================================================= tooltip */
.vt #vt-tip { position: fixed; left: 0; top: 0; z-index: 870; max-width: 240px; padding: 6px 8px 7px; pointer-events: none;
  font: 11px/1.4 Verdana, Tahoma, sans-serif; color: #e8dcc0; background: var(--vt-tip-bg);
  border: 1px solid #000; box-shadow: inset 0 0 0 1px #c9a227, 0 4px 12px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity .12s; }
.vt #vt-tip.on { opacity: 1; }
.vt #vt-tip b { display: block; font-size: 12px; color: var(--g, #f3e5c8); }
.vt #vt-tip i { display: block; font-style: normal; color: #a99a80; }
.vt #vt-tip em { display: block; font-style: normal; color: #d6a8ff; }
.vt #vt-tip span { display: block; }

/* ========================================== the buy dialog's counter */
.buy-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.buy-count > span:first-child { font-size: 11px; font-weight: bold; margin-right: 2px; }
.buy-count button { min-width: 32px; height: 32px; padding: 0 6px; cursor: pointer;
  font: bold 13px Verdana, Tahoma, sans-serif; color: var(--btn-ink); background: var(--btn);
  border: 2px solid var(--btn-edge); border-radius: 3px;
  box-shadow: inset 2px 2px 0 var(--btn-gloss), inset -2px -2px 0 rgba(0, 0, 0, .15), 0 2px 0 var(--btn-edge); }
.buy-count button:active { transform: translateY(2px); box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .2); }
.buy-count output { min-width: 34px; padding: 3px 4px; text-align: center; font: bold 22px/1 "Courier New", ui-monospace, monospace;
  color: #ffd98a; background: #120c08; border: 2px solid #000; border-radius: 2px; }
.buy-presets { display: inline-flex; gap: 4px; }
.buy-presets button { min-width: 34px; height: 26px; font-size: 11px; }
.buy-presets button[aria-pressed="true"] { color: #140800; background: #ffb347; border-color: #8a4a00;
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .25); }
.buy-short { color: var(--bad-ink); }
.buy-short[hidden] { display: none; }

/* ===================================== auto-dark (market.css only does
   data-theme="dark"; an "auto" page in a dark OS needs these too) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mk-card-art {
    background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--rc) 30%, #24303d), #141c25 75%); }
  :root:not([data-theme="light"]) .buy-art { background: radial-gradient(circle at 50% 60%, #6a5520, #2a200a 75%); }
  :root:not([data-theme="light"]) .vt .vt-wing-tab, :root:not([data-theme="light"]) .vt .vt-plaque { color: #f3e5c8; }
}

/* =============================================================== phones */
@media (max-width: 760px) {
  .vt .vt-bar { height: 42px; margin-bottom: 8px; }
  .vt .vt-tool { padding: 0 7px; font-size: 10px; }
  .vt .vt-coins b { font-size: 14px; }
  .vt .vt-console { grid-template-columns: minmax(0, 1fr); column-gap: 0;
    grid-template-areas: "bulbs" "head" "screen" "act" "chase"; grid-template-rows: auto; }
  .vt .vt-deck-head { padding: 10px 12px 0; }
  .vt .vt-console .mk-title { font-size: 26px; }
  .vt .vt-console .mk-blurb { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .vt .vt-lcd { margin-bottom: 4px; }
  .vt .mk-countdown.vt-lcd div { min-width: 44px; }
  .vt .vt-lcd b { font-size: 22px; }
  .vt .vt-screen { margin: 4px 12px 0; min-height: 240px; height: 240px; }
  .vt .vt-screen .mk-hero-crate { width: 220px; margin-top: -10px; }
  .vt .vt-screen .mk-pedestal { bottom: 30px; width: 190px; }
  .vt .vt-screen .mk-graves { height: 64px; }
  .vt .vt-screen .mk-moon { width: 60px; height: 60px; }
  .vt .vt-boo { left: calc(50% - 128px); bottom: 26px; width: 34px; height: 38px; }
  .vt .vt-boo-says { left: 8px; bottom: 74px; }
  .vt .vt-deck-act { padding: 10px 12px 0; }
  .vt .vt-act-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt .vt-loadout { display: contents; }
  .vt .vt-load { width: auto; grid-template-columns: 40px 1fr; grid-template-rows: auto; align-items: center;
    justify-items: start; column-gap: 6px; }
  .vt .vt-load canvas { grid-row: 1 / span 2; }
  .vt .vt-load b { position: static; justify-self: start; }
  .vt .vt-arcade-slot { grid-column: 1 / -1; }
  .vt .vt-arcade { min-height: 56px; font-size: 15px; }
  .vt .vt-carts .mk-btn { flex-direction: column; justify-content: center; gap: 4px; min-height: 48px; padding: 5px 4px; }
  .vt .vt-console .mk-chase { margin: 10px 12px 0; }
  .vt .vt-chase-rail { grid-auto-columns: 64px; scroll-snap-type: x mandatory; }
  .vt .mk-chase-item { scroll-snap-align: start; }
  .vt .mk-drops { flex-wrap: nowrap; }
  .vt .mk-drops-count { display: none; }
  .vt .vt-ring-rows { display: grid; grid-auto-flow: column; grid-auto-columns: 230px; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; }
  .vt .vt-ringrow { scroll-snap-align: start; }
  .vt .vt-wings { grid-auto-columns: 92px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent);
    padding-right: 24px; }
  .vt .vt-wing-tab { scroll-snap-align: start; }
  .vt .vt-wing { padding: 8px; }
  .vt .vt-wing-head { grid-template-columns: 44px minmax(0, 1fr); }
  .vt .vt-wing-icon { width: 44px; height: 44px; }
  .vt .vt-meter { grid-column: 1 / -1; min-width: 0; }
  /* every named area has to be a rectangle or the whole declaration is
     dropped (and the shelf falls back to the four desktop columns) */
  .vt .vt-shelf { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "plaque plaque" "art info" "loot loot";
    column-gap: 10px; row-gap: 8px; padding: 8px; }
  .vt .vt-shelf .mk-show-art { height: 110px; }
  .vt .vt-plaque { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-self: start; padding: 5px 6px; }
  .vt .vt-hook { display: none; }
  .vt .vt-plates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt .vt-kit { grid-template-columns: 36px minmax(0, 1fr); }
  .vt .vt-kit .mk-btn { grid-column: 1 / -1; }
  .vt .vt-kit-art, .vt .vt-kit-art canvas { width: 36px; height: 36px; }
  .vt .vt-pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; gap: 5px; }
  .vt .vt-piece canvas { width: 60px; height: 60px; }
  .vt .vt-shelf.sealed { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "art plaque" "art info"; }
  .vt .sealed .vt-silhouette { height: 110px; }
  .vt .sealed .vt-silhouette canvas { width: 96px; height: 96px; }
  .vt .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .vt .mk-spot-body { grid-template-columns: minmax(0, 1fr); }
  .vt .mk-tabs { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 4px; }
  .vt .mk-tabs a { flex: none; }
}
@media (max-width: 380px) {
  .vt .mk-grid, .vt .vt-pieces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt .vt-console .mk-title { font-size: 22px; }
}

/* ======================================================= reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vt .vt-buybar { transition: none; }
  .vt .vt-boo, .vt .vt-boo svg { animation: none !important; }
  .vt .vt-screen .mk-sky * { translate: none !important; }
}