/* ============================================================
   MyOhara — shared arcade design system
   Ported from design/drafts/a3-arcade-coins.html (the approved
   look). Holds design tokens plus every reusable piece: base
   typography, the starfield/CRT overlay, nav and footer (including
   the sub-720px phone nav menu), button variants, pixel-corner
   panels and the holographic foil overlay (.neon-hover/.neon-always),
   badges/tags, tables, the auth-page card shell/inputs/labels/
   error+success messages and the 8-bit strength meter, the hero's
   grid floor/sun/marquee/glitch headline, the section power-on,
   the coin burst + "+100" popup, the motion toggle, and the
   reduced-motion overrides.

   Page-only styles (page content, section layout specific to one
   page) stay in a small <style> in that page.
   ============================================================ */

:root {
  --bg: #07060d;
  --bg-panel: #110d1e;
  --bg-panel-2: #171029;
  --green: #39ff7a;
  --blue: #4d8dff;
  --teal: #1de9c6;
  --red: #ff4d4d;
  --yellow: #ffd23f;
  --text: #f4f1ff;
  --muted: #b8b0d9;
  --font-pixel: "Press Start 2P", cursive;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --border-w: 4px;
  --gutter: 16px;
}

/* Registers --angle as a real animatable angle for the rotating neon
   borders below. Browsers that skip this rule just ignore it, the
   custom property stays unregistered, and the conic-gradient border
   renders as a static (non-rotating) gradient instead — the required
   fallback, with no extra CSS needed. */
@property --angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }

a { color: inherit; }

ul { padding-left: 1.2em; }

/* Full-page starfield — three fixed, very low-contrast layers drifting
   at different speeds for a cheap parallax. Sits behind everything. */
.stars {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.stars-1 {
  opacity: .5;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(244,241,255,.4), transparent 60%),
    radial-gradient(1px 1px at 120px 90px, rgba(244,241,255,.35), transparent 60%),
    radial-gradient(1px 1px at 70px 150px, rgba(244,241,255,.3), transparent 60%),
    radial-gradient(1px 1px at 180px 40px, rgba(244,241,255,.3), transparent 60%);
  background-size: 220px 220px;
  animation: stars-drift-1 110s linear infinite;
}

.stars-2 {
  opacity: .35;
  background-image:
    radial-gradient(1px 1px at 40px 200px, rgba(244,241,255,.3), transparent 60%),
    radial-gradient(1px 1px at 220px 60px, rgba(244,241,255,.3), transparent 60%),
    radial-gradient(1px 1px at 150px 260px, rgba(244,241,255,.25), transparent 60%);
  background-size: 320px 320px;
  animation: stars-drift-2 160s linear infinite;
}

.stars-3 {
  opacity: .22;
  background-image:
    radial-gradient(1px 1px at 90px 90px, rgba(244,241,255,.25), transparent 60%),
    radial-gradient(1px 1px at 300px 240px, rgba(244,241,255,.2), transparent 60%),
    radial-gradient(1px 1px at 200px 40px, rgba(244,241,255,.2), transparent 60%);
  background-size: 400px 400px;
  animation: stars-drift-3 220s linear infinite;
}

@keyframes stars-drift-1 { from { background-position: 0 0; } to { background-position: -220px 220px; } }
@keyframes stars-drift-2 { from { background-position: 0 0; } to { background-position: 320px 160px; } }
@keyframes stars-drift-3 { from { background-position: 0 0; } to { background-position: -200px 400px; } }

/* CRT scanline overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(244, 241, 255, 0.05) 0,
    rgba(244, 241, 255, 0.05) 1px,
    transparent 1px,
    transparent 3px
  );
  z-index: 999;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 3px;
}

.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* The hidden attribute always wins, even on elements whose class sets a display (.btn,
   flex/grid fields) */
[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

h1, h2, h3 {
  font-family: var(--font-pixel);
  line-height: 1.5;
  margin: 0 0 .8em;
}

h1 { color: var(--green); text-shadow: 0 0 6px rgba(57,255,122,.8), 0 0 16px rgba(57,255,122,.45); }
h2 { color: var(--green); text-shadow: 0 0 5px rgba(57,255,122,.7), 0 0 14px rgba(57,255,122,.4); font-size: clamp(1rem, 4vw, 1.4rem); }
h3 { color: var(--yellow); text-shadow: 0 0 4px rgba(255,210,63,.6); font-size: clamp(.7rem, 3vw, .9rem); }

.mono-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* pixel stepped-corner shape, reused everywhere */
.pixel-corners {
  clip-path: polygon(
    0 10px, 5px 10px, 5px 5px, 10px 5px, 10px 0,
    calc(100% - 10px) 0, calc(100% - 10px) 5px, calc(100% - 5px) 5px, calc(100% - 5px) 10px, 100% 10px,
    100% calc(100% - 10px), calc(100% - 5px) calc(100% - 10px), calc(100% - 5px) calc(100% - 5px), calc(100% - 10px) calc(100% - 5px), calc(100% - 10px) 100%,
    10px 100%, 10px calc(100% - 5px), 5px calc(100% - 5px), 5px calc(100% - 10px), 0 calc(100% - 10px)
  );
}

/* Shared rotation for every conic-gradient neon border below */
@keyframes spin-angle {
  to { --angle: 360deg; }
}

/* Holographic foil — a trading-card holo effect layered on top of a
   pixel-corner panel, in place of the old rotating rainbow border. The
   panel keeps its own solid border-color at rest (set where the panel
   itself is styled) undisturbed; this only adds two pointer-events:none
   overlays — ::before for the iridescent foil bands, ::after for the
   glitter speckle + soft glare — clipped to the panel's pixel-corner
   shape for free by the panel's own clip-path. --mx/--my (0%-100%,
   registered below so they can be smoothly animated) say where the
   "light" is hitting the foil: arcade.js writes them from the pointer,
   and .neon-always drifts them on its own via holo-drift when nothing
   is tracking it. Add .neon-hover for foil that only appears on
   hover/focus-within (desktop, fine pointer), or .neon-always for a
   faint ambient foil that's always on. .holo is a plain alias for
   .neon-hover, for markup that reads better with that name. */
@property --mx {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

@property --my {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 50%;
}

.neon-hover, .neon-always, .holo {
  position: relative;
}

.neon-hover::before, .neon-hover::after,
.neon-always::before, .neon-always::after,
.holo::before, .holo::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}

/* Iridescent foil bands — site palette hues only (green/teal/blue/
   yellow), lightened toward white like real card foil; nothing outside
   that set. background-position reads --mx/--my, so the bands shift
   with the viewing angle. */
.neon-hover::before, .neon-always::before, .holo::before {
  background-image: repeating-linear-gradient(115deg,
    transparent 0 6%,
    rgba(168,255,203,.85) 6% 11%,
    rgba(157,245,230,.85) 11% 16%,
    rgba(169,198,255,.85) 16% 21%,
    rgba(255,233,163,.85) 21% 26%,
    transparent 26% 32%
  );
  background-size: 260% 260%;
  background-position: var(--mx) var(--my);
  mix-blend-mode: soft-light;
}

/* Fine glitter speckle plus a soft white glare, both tracking the
   pointer via the same --mx/--my. */
.neon-hover::after, .neon-always::after, .holo::after {
  background-image:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.6), transparent 45%),
    radial-gradient(circle, rgba(255,255,255,.9) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.6) 0 1px, transparent 1.5px);
  background-size: 100% 100%, 46px 46px, 68px 68px, 34px 34px;
  background-position:
    0 0,
    calc(var(--mx) * .3) calc(var(--my) * .3),
    calc(100% - var(--mx) * .2) calc(var(--my) * .25),
    calc(var(--mx) * .15) calc(100% - var(--my) * .2);
  mix-blend-mode: soft-light;
}

/* .neon-always: a faint ambient foil at rest — visible with no
   hover/JS involved — drifting very slowly on its own via holo-drift.
   Hovering (desktop, fine pointer, below) hands it over to the
   pointer-tracked --mx/--my instead. */
.neon-always::before { opacity: .45; }
.neon-always::after { opacity: .22; }

.neon-always {
  animation: holo-drift 10s ease-in-out infinite;
}

@keyframes holo-drift {
  0%   { --mx: 18%; --my: 22%; }
  25%  { --mx: 82%; --my: 32%; }
  50%  { --mx: 84%; --my: 78%; }
  75%  { --mx: 20%; --my: 82%; }
  100% { --mx: 18%; --my: 22%; }
}

/* Hover/focus intensifies the foil and, for .neon-always, hands its
   position over to the JS-driven --mx/--my (arcade.js also adds
   .holo-tracking so the same override applies while the pointer is
   held rather than just mid-transition). Scoped to devices that can
   actually hover with a precise pointer — touch keeps .neon-hover
   plain and .neon-always to its ambient drift only. */
@media (hover: hover) and (pointer: fine) {
  .neon-hover:hover::before, .neon-hover:focus-within::before,
  .neon-always:hover::before, .neon-always:focus-within::before,
  .holo:hover::before, .holo:focus-within::before {
    opacity: .8;
  }

  .neon-hover:hover::after, .neon-hover:focus-within::after,
  .neon-always:hover::after, .neon-always:focus-within::after,
  .holo:hover::after, .holo:focus-within::after {
    opacity: .5;
  }

  .neon-always:hover, .neon-always:focus-within, .neon-always.holo-tracking {
    animation: none;
  }
}

.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  font-family: var(--font-pixel);
  text-decoration: none;
  text-align: center;
  padding: .9em 1.1em;
  border: var(--border-w) solid transparent;
  font-size: .7rem;
  line-height: 1.4;
  box-shadow: 4px 4px 0 rgba(0,0,0,.4);
  transform: translateY(0);
}

.btn:active {
  transform: translateY(3px);
  box-shadow: 1px 1px 0 rgba(0,0,0,.4);
}

/* pixel shine sweep on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.55) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}

.btn:hover::after {
  animation: btn-shine .8s ease;
}

@keyframes btn-shine {
  from { transform: translateX(-120%); }
  to { transform: translateX(120%); }
}

.btn-line2 { font-size: .55em; opacity: .85; }

.btn-yellow {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--bg);
}

.btn-teal-outline {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}

.btn-yellow:hover, .btn-teal-outline:hover { filter: brightness(1.15); }

/* "Attract mode" for the most prominent CTAs: a soft breathing glow plus
   a small hop roughly every 4s, so the button reads as alive before
   anyone touches it. Hovering pauses the hop — the hover lift below
   takes over — but leaves the glow breathing. !important keeps the
   lift/press reliable even while the idle animation is mid-frame. */
.btn-attract {
  animation: attract-glow 2.4s ease-in-out infinite, attract-hop 4s ease-in-out infinite;
}

@keyframes attract-glow {
  0%, 100% { box-shadow: 4px 4px 0 rgba(0,0,0,.4), 0 0 6px rgba(255,210,63,.5); }
  50% { box-shadow: 4px 4px 0 rgba(0,0,0,.4), 0 0 16px rgba(255,210,63,.9); }
}

@keyframes attract-hop {
  0%, 92%, 100% { transform: translateY(0); }
  96% { transform: translateY(-4px); }
}

.btn-attract:hover, .btn-attract:focus-visible {
  animation-play-state: running, paused;
  transform: translateY(-3px) !important;
}

.btn-attract:active {
  transform: translateY(3px) !important;
}

/* Colour-cycle: the pixel shine above already fires on hover; add a
   colour-cycling neon border on top, using the same conic-gradient/
   background-origin trick as the panel borders above. */
.btn-yellow.btn-cycle:hover, .btn-yellow.btn-cycle:focus-visible {
  border-color: transparent;
  background:
    linear-gradient(var(--yellow), var(--yellow)) padding-box,
    conic-gradient(from var(--angle), var(--green), var(--teal), var(--blue), var(--yellow), var(--red), var(--green)) border-box;
  animation: spin-angle 1.2s linear infinite;
}

.btn-teal-outline.btn-cycle:hover, .btn-teal-outline.btn-cycle:focus-visible {
  border-color: transparent;
  background:
    linear-gradient(transparent, transparent) padding-box,
    conic-gradient(from var(--angle), var(--green), var(--teal), var(--blue), var(--yellow), var(--red), var(--green)) border-box;
  animation: spin-angle 1.2s linear infinite;
}

/* NAV */
.nav {
  border-bottom: var(--border-w) solid var(--green);
  background: var(--bg-panel);
  position: sticky;
  top: 0;
  z-index: 10;
}

.nav-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: .85rem var(--gutter);
}

.logo {
  font-family: var(--font-pixel);
  font-size: clamp(.7rem, 3vw, .95rem);
  color: var(--text);
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
}

.logo-coin { image-rendering: pixelated; flex: none; }

.logo:hover .logo-coin,
.logo:focus-visible .logo-coin {
  animation: logo-coin-flip 600ms ease;
}

@keyframes logo-coin-flip {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(-1); }
}

/* Wordmark: the coin is the O in "MyOhara" (screen readers get the plain
   name from a .visually-hidden copy) */
.logo-word { display: inline-flex; align-items: center; }
a.logo { text-decoration: none; }
.logo .logo-o { width: 1.12em; height: 1.12em; margin: 0 .08em; }

.beta-tag {
  font-size: .5em;
  background: var(--red);
  color: var(--bg);
  padding: .35em .5em;
  border: 2px solid var(--red);
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-family: var(--font-pixel);
  font-size: .6rem;
  text-decoration: none;
  color: var(--muted);
  padding: .3em 0;
}

.nav-links a:hover { color: var(--teal); }

.nav-cta { padding: .55em .8em; font-size: .55rem; }

/* Nav Sign in — a small outlined button with a ▶ cursor that bounces
   left and right beside the label on hover/focus. */
.nav-signin { flex-direction: row; gap: .4em; }

.signin-arrow { display: inline-block; }

.nav-signin:hover .signin-arrow,
.nav-signin:focus-visible .signin-arrow {
  animation: signin-bounce .6s ease-in-out infinite;
}

@keyframes signin-bounce {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

/* PHONE NAV MENU — below 720px the links and Sign in/Sign up buttons
   collapse behind a MENU button. arcade.js wires up any [data-nav-toggle]
   / [data-nav-menu] pair and adds nav-js to <html> once it runs; .nav-menu
   stays `display: contents` (a no-op wrapper) everywhere else, so without
   JS — or at 720px and wider — the nav renders exactly as it does today. */
.nav-toggle {
  display: none;
  flex: none;
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--teal);
  background: transparent;
  border: 3px solid var(--teal);
  padding: .5em .6em;
  cursor: pointer;
}

.nav-toggle:hover { color: var(--bg); background: var(--teal); }

.nav-menu { display: contents; }

@media (max-width: 719px) {
  html.nav-js .nav-toggle { display: inline-block; }

  html.nav-js .nav-menu {
    display: none;
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg-panel-2);
    border: var(--border-w) solid var(--teal);
    border-top: none;
    padding: .5rem;
  }

  html.nav-js .nav-menu.nav-open {
    display: block;
    transform-origin: top;
    animation: nav-menu-pop .18s ease-out both;
  }

  html.nav-js .nav-menu .nav-links {
    flex-direction: column;
    gap: 0;
  }

  html.nav-js .nav-menu .nav-links li { width: 100%; }

  /* Every row — the four plain links and the two .btn auth links — gets
     the same tap-target size and a shared ▶ cursor slot on the left. */
  html.nav-js .nav-menu .nav-links a,
  html.nav-js .nav-menu > .btn {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: .6em 1em .6em 1.8em;
    font-size: .65rem;
    text-align: left;
    box-shadow: none;
  }

  html.nav-js .nav-menu > .btn { margin-top: .5rem; }

  /* The desktop signin-bounce arrow is replaced by the shared cursor below. */
  html.nav-js .nav-menu .nav-signin .signin-arrow { display: none; }

  html.nav-js .nav-menu .nav-links a::before,
  html.nav-js .nav-menu > .btn::before {
    content: "▶";
    position: absolute;
    left: .6em;
    color: var(--teal);
    opacity: 0;
  }

  html.nav-js .nav-menu .nav-links a:hover::before,
  html.nav-js .nav-menu .nav-links a:focus-visible::before,
  html.nav-js .nav-menu > .btn:hover::before,
  html.nav-js .nav-menu > .btn:focus-visible::before {
    opacity: 1;
    animation: blink 1s steps(1, end) infinite;
  }
}

@keyframes nav-menu-pop {
  from { transform: scaleY(.05); }
  to { transform: scaleY(1); }
}

/* SECTION LAYOUT SCAFFOLDING */
section { padding: 3rem var(--gutter); }

.section-inner { max-width: 1080px; margin: 0 auto; }

.section-sub { color: var(--muted); max-width: 640px; margin: 0 auto 1.5rem; }

/* BADGES + TAGS */
.badge {
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--teal);
  border: 3px solid var(--teal);
  background: var(--bg-panel-2);
  padding: .6em .7em;
}

.new-tag {
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--red);
  text-shadow: 0 0 4px rgba(255,77,77,.6);
  margin-left: .5em;
  animation: blink 1s steps(1, end) infinite;
}

.sample-tag {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: 1px;
  color: var(--bg);
  background: var(--yellow);
  padding: .25em .5em;
}

.tag-comingsoon {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--bg);
  background: var(--red);
  border: 3px solid var(--red);
  padding: .5em .6em;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* TABLES */
table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .8rem;
}

th, td {
  text-align: left;
  padding: .5rem .35rem;
  border-bottom: 1px solid rgba(244,241,255,.15);
  overflow-wrap: break-word;
}

th {
  font-weight: 700;
  letter-spacing: .5px;
  color: var(--teal);
  text-transform: uppercase;
  font-size: .7rem;
}

td.price, td.change { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* phones: drop the rank and market columns so item names get the room */
@media (max-width: 600px) {
  th:nth-child(1), td:nth-child(1), th:nth-child(3), td:nth-child(3) { display: none; }
  th:nth-child(2), td:nth-child(2) { width: 50%; }
}

.down { color: var(--green); }
.up { color: var(--red); }

/* AUTH SHELL — the centred sign-in/up/reset card shared by login.html,
   signup.html, forgot-password.html and verify-email.html. Page-only
   flourishes around it (a short grid floor, per-page copy, cross-links)
   stay in the page's own <style>. */
.auth-body { display: flex; flex-direction: column; min-height: 100vh; }

.auth-main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem var(--gutter) 3rem;
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-panel-2);
  border: var(--border-w) solid var(--teal);
  padding: 2rem 1.75rem;
}

.auth-card .btn { width: 100%; }

.card-header { text-align: center; margin-bottom: 1.5rem; }

.card-header h1 { font-size: clamp(.8rem, 4.5vw, 1.05rem); }

.card-header p {
  margin: 0;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .9rem;
  line-height: 1.6;
}

.card-icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 1rem;
  border: 3px solid currentColor;
  background: var(--bg-panel);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

/* FORM FIELDS — pixel-bordered inputs and pixel-font labels shared by
   every auth form. */
.field { margin-bottom: 1.1rem; }

.field label {
  display: block;
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--teal);
  margin-bottom: .6rem;
  letter-spacing: .5px;
}

.field .label-optional {
  font-family: var(--font-mono);
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: 0;
  margin-left: .4em;
}

.field input {
  display: block;
  width: 100%;
  background: var(--bg);
  border: 3px solid var(--muted);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 1rem;
  padding: .8em .85em;
  outline: none;
}

.field input:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(29,233,198,.3), 0 0 10px rgba(29,233,198,.55);
}

.field input::placeholder { color: var(--muted); opacity: .55; }

/* ERROR / SUCCESS MESSAGES */
.error-msg, .success-msg {
  display: none;
  align-items: flex-start;
  gap: .5em;
  font-family: var(--font-mono);
  font-size: .82rem;
  line-height: 1.5;
  padding: .8em .9em;
  border: 2px solid;
  margin-bottom: 1.1rem;
}

.error-msg.visible, .success-msg.visible { display: flex; }

.error-msg { color: var(--red); border-color: var(--red); background: rgba(255,77,77,.08); }
.error-msg::before { content: "\2716"; flex: none; }

.success-msg { color: var(--green); border-color: var(--green); background: rgba(57,255,122,.08); }
.success-msg::before { content: "\2713"; flex: none; }

/* 8-BIT STRENGTH METER — 4 segments (one per level above empty), filling
   red -> yellow -> blue -> green. Same width/color values the script
   already sets on #strengthFill; the ::after divider overlay just carves
   the continuous fill into blocks. */
.strength-bar {
  position: relative;
  height: 14px;
  background: var(--bg);
  border: 2px solid var(--muted);
  margin-top: .6rem;
  overflow: hidden;
}

.strength-fill {
  position: absolute;
  inset: 0;
  width: 0%;
  transition: width .3s, background .3s;
}

.strength-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(to right, transparent 0 calc(25% - 3px), var(--bg) calc(25% - 3px) 25%);
}

.strength-label {
  display: block;
  font-family: var(--font-pixel);
  font-size: .55rem;
  margin-top: .5rem;
  color: var(--muted);
}

/* HERO — grid floor, sun, marquee lights and glitch headline. Page
   content around them (HUD, sub-copy, actions, mock search) stays in
   the page's own <style>. */
.hero {
  position: relative;
  overflow: hidden;
}

/* Synthwave grid floor — behind the hero only. Two line layers scrolled
   via background-position, masked so it fades out toward the horizon. */
.hero-grid {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 55%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(29,233,198,.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,141,255,.65) 1px, transparent 1px);
  background-size: 100% 42px, 42px 100%;
  transform: perspective(280px) rotateX(62deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, black 0%, black 40%, transparent 95%);
          mask-image: linear-gradient(to top, black 0%, black 40%, transparent 95%);
  animation: grid-scroll 3s linear infinite;
}

@keyframes grid-scroll {
  from { background-position: 0 0, 0 0; }
  to { background-position: 0 42px, 0 0; }
}

/* Striped sunset sun, sitting at the horizon (the top edge of the grid),
   behind the headline in the stacking order. */
.hero-sun {
  position: absolute;
  top: 46%;
  left: 50%;
  width: clamp(90px, 20vw, 140px);
  height: clamp(90px, 20vw, 140px);
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(180deg, var(--yellow) 0%, var(--yellow) 35%, var(--red) 100%);
  -webkit-mask-image: repeating-linear-gradient(to bottom, black 0 4px, transparent 4px 9px);
          mask-image: repeating-linear-gradient(to bottom, black 0 4px, transparent 4px 9px);
  animation: sun-pulse 5s ease-in-out infinite;
}

@keyframes sun-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .85; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}

/* Light overall scrim, sits above the grid/sun but below the content. */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(7,6,13,.3);
}

.hero-content { position: relative; z-index: 2; }

.hero.hero-offscreen .hero-grid,
.hero.hero-offscreen .hero-sun {
  animation-play-state: paused;
}

.hero-marquee {
  position: relative;
  border: var(--border-w) solid var(--green);
  background: var(--bg-panel);
  padding: 1.5rem 1rem;
  max-width: 640px;
  margin: 0 auto 1.25rem;
}

.hero-marquee h1 {
  margin: 0;
  font-size: clamp(1rem, 6vw, 1.9rem);
  overflow-wrap: break-word;
  animation: headline-glitch 7s ease-in-out infinite;
}

@keyframes headline-glitch {
  0%, 96%, 100% {
    text-shadow: 0 0 6px rgba(57,255,122,.8), 0 0 16px rgba(57,255,122,.45);
  }
  97% {
    text-shadow: -2px 0 rgba(57,255,122,.85), 2px 0 rgba(77,141,255,.85);
  }
  98.5% {
    text-shadow: 2px 0 rgba(57,255,122,.85), -2px 0 rgba(77,141,255,.85);
  }
}

/* Chasing marquee lights around the hero sign */
.marquee-lights {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.marquee-lights rect {
  fill: none;
  stroke-width: 3;
}

.marquee-lights .lights-a {
  stroke: var(--teal);
  stroke-dasharray: 5 9;
  animation: marquee-chase 1.4s linear infinite;
}

.marquee-lights .lights-b {
  stroke: var(--green);
  stroke-dasharray: 5 9;
  stroke-dashoffset: 7;
  animation: marquee-chase 1.4s linear infinite reverse;
}

@keyframes marquee-chase {
  to { stroke-dashoffset: -28; }
}

.hero.hero-offscreen .marquee-lights rect {
  animation-play-state: paused;
}

/* MOTION TOGGLE */
.motion-toggle {
  font: inherit;
  background: none;
  border: 2px solid var(--yellow);
  color: var(--yellow);
  padding: .3em .5em;
  cursor: pointer;
}

.motion-toggle:hover { color: var(--bg); background: var(--yellow); }

/* HUD STRIP — 1UP, MOTION, MUSIC and CREDITS ride along in the sticky top bar
   (left of the centred wordmark, or a second row when the screen is too
   narrow: see CENTRED HEADER), so they stay in reach however far down a
   page you scroll. arcade-audio.js drops the MUSIC toggle and song controls
   into [data-music-slot]. The dashboard and admin page keep their own
   one-row top bar with the same controls. */
.hud-chip { color: var(--yellow); text-shadow: 0 0 4px rgba(255,210,63,.6); }

.nav-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .4rem .9rem;
  padding: .4rem var(--gutter) .5rem;
  border-top: 1px dashed rgba(57,255,122,.25);
  font-family: var(--font-pixel);
  font-size: .55rem;
}

.nav-hud-music { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.nav-hud-music #music-toggle,
.nav-hud-music #music-controls { margin-left: 0; }

/* Anchor links (#tracker, #shop…) land below the two-row sticky bar */
html { scroll-padding-top: 7rem; }

/* CENTRED HEADER (the public pages: header.nav.nav-center) — one row with
   the HUD strip on the left, the wordmark dead centre and the links on the
   right. The outer columns split the leftover width equally, which is what
   keeps the wordmark centred. Narrower screens stack it (see the media
   queries below). arcade.js adds hud-docked to <html> when the HUD is moved
   out of the bar, so a row left empty closes up. */
.nav-center .nav-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "hud logo menu";
  align-items: center;
  gap: .6rem 1.25rem;
}
.nav-center .logo { grid-area: logo; justify-self: center; margin: 0; }
.nav-center .nav-toggle { grid-area: menu; justify-self: end; }
.nav-center .nav-inner > .nav-hud {
  grid-area: hud;
  justify-self: start;
  justify-content: flex-start;
  padding: 0;
  border-top: 0;
}

@media (min-width: 720px) {
  .nav-center .nav-menu {
    grid-area: menu;
    justify-self: end;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem 1rem;
  }
}

/* The HUD is ~650px wide in the pixel font. Below 1600px the two decorative
   chips (1UP, CREDITS) step aside, which keeps it beside the wordmark down
   to 1240px. */
@media (max-width: 1599px) {
  .nav-center .nav-inner > .nav-hud .hud-chip { display: none; }
}

/* 1000–1239px: the wordmark gets the top row to itself; the HUD (left) and
   the links (right) share the row under it */
@media (max-width: 1239px) {
  .nav-center .nav-inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo logo logo" "hud . menu";
  }
}

/* 720–999px: three centred rows — wordmark, links, HUD */
@media (min-width: 720px) and (max-width: 999px) {
  .nav-center .nav-inner { grid-template-areas: "logo logo logo" "menu menu menu" "hud hud hud"; }
  .nav-center .nav-menu { justify-self: center; justify-content: center; }
  .nav-center .nav-inner > .nav-hud { justify-self: center; justify-content: center; }
  html.hud-docked .nav-center .nav-inner { grid-template-areas: "logo logo logo" "menu menu menu"; }
}

/* Phones: the wordmark with ☰ MENU beside it, the compact HUD underneath */
@media (max-width: 719px) {
  .nav-center .nav-inner {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-areas: ". logo menu" "hud hud hud";
    column-gap: .5rem;
  }
  .nav-center .nav-inner > .nav-hud {
    justify-self: stretch;
    justify-content: space-between;
    padding-top: .4rem;
    border-top: 1px dashed rgba(57,255,122,.25);
  }
  html.hud-docked .nav-center .nav-inner { grid-template-areas: ". logo menu"; }
  /* Without arcade.js the menu isn't collapsible: show it as a centred row */
  html:not(.nav-js) .nav-center .nav-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem 1rem;
    grid-column: 1 / -1;
  }
}

/* HUD PLACEMENT (arcade.js) — HUD ▾ moves the same .nav-hud element out of
   the top bar into a fixed dock: a bottom bar, a left/right side panel, or
   a panel that pops out of the draggable COIN DROP coin. */
.hud-pos-menu {
  position: fixed;
  z-index: 40;
  display: flex;
  flex-direction: column;
  min-width: 10.5rem;
  padding: .35rem;
  background: var(--bg-panel-2);
  border: 3px solid var(--teal);
  box-shadow: 0 8px 24px rgba(0,0,0,.6);
  font-family: var(--font-pixel);
  font-size: .5rem;
}
.hud-pos-menu[hidden] { display: none; }
.hud-pos-title { color: var(--muted); padding: .5em .7em .7em; }
.hud-pos-menu button {
  font: inherit;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  padding: .7em;
  cursor: pointer;
}
.hud-pos-menu button::before { content: "▶ "; color: var(--yellow); }
.hud-pos-menu button[aria-checked="false"]::before { visibility: hidden; }
.hud-pos-menu button:hover,
.hud-pos-menu button:focus-visible { background: var(--teal); color: var(--bg); outline: none; }
.hud-pos-menu button:hover::before,
.hud-pos-menu button:focus-visible::before { color: var(--bg); }

.nav-hud.hud-dock {
  position: fixed;
  z-index: 30;
  background: var(--bg-panel);
  border: 3px solid var(--green);
  box-shadow: 0 0 12px rgba(57,255,122,.25), 0 8px 24px rgba(0,0,0,.55);
}
.nav-hud.hud-dock-bottom { left: 0; right: 0; bottom: 0; border-width: 3px 0 0; }

.nav-hud.hud-dock-left,
.nav-hud.hud-dock-right,
.nav-hud.hud-dock-coin {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: .5rem;
  padding: .6rem;
  width: max-content;
  max-width: min(12.5rem, calc(100vw - 4.5rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  text-align: center;
}
.nav-hud.hud-dock-left { left: 0; top: 50%; transform: translateY(-50%); border-left-width: 0; }
.nav-hud.hud-dock-right { right: 0; top: 50%; transform: translateY(-50%); border-right-width: 0; }
.hud-dock-left .nav-hud-music,
.hud-dock-right .nav-hud-music,
.hud-dock-coin .nav-hud-music { flex-direction: column; align-items: stretch; gap: .4rem; }
.hud-dock-left #music-controls,
.hud-dock-right #music-controls,
.hud-dock-coin #music-controls { justify-content: center; }

.nav-hud.hud-dock-coin { display: none; }
.nav-hud.hud-dock-coin.hud-open { display: flex; animation: hud-pop .16s ease-out both; }
@keyframes hud-pop {
  from { opacity: 0; transform: scale(.6); }
  to { opacity: 1; transform: scale(1); }
}

.hud-coin {
  position: fixed;
  z-index: 31;
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: var(--bg-panel);
  border: 3px solid var(--yellow);
  box-shadow: 0 0 10px rgba(255,210,63,.45), 0 4px 12px rgba(0,0,0,.5);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
html.hud-coin-mode .hud-coin { display: inline-flex; }
.hud-coin img { width: 30px; height: 30px; pointer-events: none; }
.hud-coin:hover img,
.hud-coin[aria-expanded="true"] img { animation: coin-spin 1.2s linear infinite; }
.hud-coin.hud-coin-dragging { cursor: grabbing; box-shadow: 0 0 18px rgba(255,210,63,.85), 0 6px 16px rgba(0,0,0,.6); }
.hud-coin:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

@media (max-width: 719px) {
  .nav-hud {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: .4rem;
    padding: .3rem var(--gutter) .4rem;
    font-size: .45rem;
  }
  .nav-hud .hud-chip { display: none; }
  .nav-hud #motion-toggle { flex: none; }
  .nav-hud-music { flex-wrap: nowrap; min-width: 0; }
  .nav-hud-music #music-controls { flex-wrap: nowrap; gap: 2px; min-width: 0; }
  .nav-hud-music #music-controls > .music-mini-btn:first-child,
  .nav-hud-music #music-repeat { display: none; }
  .nav-hud-music .music-song-name { width: 6em; }
}

/* Spinning pixel coin — pure CSS scaleX flip, no rAF. Shared so any page
   can show an "insert coin" style prompt. */
.coin {
  display: inline-block;
  width: .8em;
  height: .8em;
  background: var(--yellow);
  box-shadow: inset 0 0 0 2px var(--bg);
  animation: coin-spin 1.6s linear infinite;
}

@keyframes coin-spin {
  0%, 100% { transform: scaleX(1); }
  50% { transform: scaleX(.15); }
}

/* FOOTER */
footer {
  padding: 2.5rem var(--gutter) 3rem;
  text-align: center;
  color: var(--muted);
  font-size: .9rem;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.footer-nav a { text-decoration: underline; }

.footer-markets a { color: var(--teal); }

.footer-legal { max-width: 640px; margin: 1rem auto 0; font-size: .8rem; }

/* Section power-on — content is always visible by default, so link
   previews, printing and full-page screenshots see every section, not
   just what has scrolled into view. The .in-view class, added once by
   IntersectionObserver the first time a section enters the viewport,
   replays this as a quick flash on content that is already there. */
.js section.in-view {
  animation: section-poweron .35s ease-out both;
}

@keyframes section-poweron {
  0% { opacity: 0; transform: scaleY(.02); filter: brightness(3); }
  60% { opacity: 1; transform: scaleY(1.01); filter: brightness(1.4); }
  100% { opacity: 1; transform: scaleY(1); filter: brightness(1); }
}

/* Coin burst — spawned by arcade.js on every .btn click. Fixed,
   pointer-events: none, aria-hidden, drawn entirely in CSS. Each coin's
   flight is driven by three custom properties JS sets per instance:
   --dx/--dy (where it ends up) and --spin (how long its flight takes,
   so coins don't all move in lockstep). No rAF loop — one CSS animation
   drives the whole thing, removed on animationend. */
.burst-coin {
  position: fixed;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  pointer-events: none;
  z-index: 1000;
  background: var(--yellow);
  box-shadow: inset 0 0 0 2px #9c7a12, inset 2px 2px 0 rgba(255,255,255,.7);
  animation: coin-burst var(--spin, 650ms) cubic-bezier(.25,.7,.5,1) forwards;
}

@keyframes coin-burst {
  0%   { transform: translate(0, 0) scaleX(1); opacity: 1; }
  20%  { transform: translate(calc(var(--dx) * .3), calc(var(--dy) * .5)) scaleX(-1); }
  45%  { transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .75)) scaleX(1); }
  70%  { transform: translate(calc(var(--dx) * .85), calc(var(--dy) * .6)) scaleX(-1); }
  100% { transform: translate(var(--dx), calc(var(--dy) + 70px)) scaleX(1); opacity: 0; }
}

/* "+100" score popup — purely decorative, no running total is kept
   anywhere. Every click shows the same fixed amount. */
.score-popup {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 1000;
  font-family: var(--font-pixel);
  font-size: .7rem;
  color: var(--green);
  text-shadow: 0 0 4px rgba(57,255,122,.7);
  animation: score-popup-rise .7s ease-out forwards;
}

@keyframes score-popup-rise {
  0% { transform: translate(-50%, -50%) translateY(0); opacity: 1; }
  100% { transform: translate(-50%, -50%) translateY(-40px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Motion toggle — mirrors the reduced-motion override above so
   "MOTION: OFF" stops every animation, including the reveal effect. */
html.motion-off *, html.motion-off *::before, html.motion-off *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

/* ============================================================
   DASHBOARD — reusable pieces for any signed-in page: the
   "SELECT STAGE" rail/tab strip, the price and quest panels
   (BEST PRICE NOW / ACCEPT QUEST), verdict badges, 8-bit toggle
   switches and alert cards. Page-specific layout (search results,
   watchlist cards, forms) stays in that page's own <style>.
   ============================================================ */

/* STAGE RAIL — a vertical pixel-tab menu on desktop, a horizontal
   scrollable strip under the top bar below 720px. */
.dash-layout { display: flex; min-height: calc(100vh - 1px); }

.dash-stage-rail {
  width: 210px;
  flex: none;
  background: var(--bg-panel);
  border-right: var(--border-w) solid var(--green);
  padding: 1.5rem 0;
}

.dash-stage-label {
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--muted);
  letter-spacing: .06em;
  padding: 0 1.1rem 1rem;
}

.stage-tab {
  display: flex;
  align-items: center;
  gap: .5em;
  width: 100%;
  font: inherit;
  font-family: var(--font-pixel);
  font-size: .6rem;
  color: var(--muted);
  background: none;
  border: none;
  padding: .9em 1.1rem;
  text-align: left;
  cursor: pointer;
}

.stage-tab:hover { color: var(--text); }

.stage-tab .stage-cursor {
  color: var(--yellow);
  width: 1em;
  flex: none;
  opacity: 0;
}

.stage-tab.active {
  color: var(--teal);
  background: var(--bg-panel-2);
}

.stage-tab.active .stage-cursor {
  opacity: 1;
  animation: blink 1s steps(1, end) infinite;
}

.dash-main { flex: 1; min-width: 0; padding: 2rem var(--gutter) 4rem; }

@media (max-width: 719px) {
  .dash-layout { flex-direction: column; }
  .dash-stage-rail {
    width: 100%;
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-right: none;
    border-bottom: var(--border-w) solid var(--green);
    padding: .5rem .25rem;
  }
  .dash-stage-label { display: none; }
  .stage-tab { flex: none; white-space: nowrap; padding: .7em 1em; }
  .dash-main { padding: 1.25rem var(--gutter) 4rem; }
}

/* HUD status chip — "● ONLINE" / "● OFFLINE" */
.hud-status {
  display: flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--muted);
  padding: 1rem 1.1rem 0;
}

.hud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.hud-dot.ok { background: var(--green); box-shadow: 0 0 6px rgba(57,255,122,.8); }
.hud-dot.err { background: var(--red); box-shadow: 0 0 6px rgba(255,77,77,.8); }
.hud-dot.loading { background: var(--yellow); animation: hud-dot-pulse 1s infinite; }

@keyframes hud-dot-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ITEM VIEW — the two-panel BEST PRICE NOW / ACCEPT QUEST layout,
   shared by the search page and an opened watchlist card. */
.item-view {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.25rem;
  margin: 1.25rem 0;
  align-items: start;
}

@media (max-width: 719px) {
  .item-view { grid-template-columns: 1fr; }
}

.item-view-loading, .item-view-muted {
  font-family: var(--font-mono);
  color: var(--muted);
  padding: 1em 0;
  font-size: .9rem;
}

/* BEST PRICE NOW panel */
.bp-panel {
  position: relative;
  border: var(--border-w) solid var(--green);
  background: var(--bg-panel-2);
  padding: 1.25rem;
}

.bp-live {
  font-family: var(--font-pixel);
  font-size: .55rem;
  color: var(--red);
  text-shadow: 0 0 4px rgba(255,77,77,.6);
  animation: blink 1s steps(1, end) infinite;
  margin-bottom: .6em;
}

.bp-panel-title {
  font-family: var(--font-pixel);
  font-size: .65rem;
  color: var(--yellow);
  text-shadow: 0 0 4px rgba(255,210,63,.6);
  margin-bottom: .8em;
}

.bp-tabs {
  display: flex;
  width: fit-content;
  border: 2px solid var(--muted);
  margin-bottom: .9em;
}

.bp-tab {
  font: inherit;
  font-family: var(--font-pixel);
  font-size: .6rem;
  padding: .6em 1em;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
}

.bp-tab.active { background: var(--teal); color: var(--bg); }

.bp-label {
  font-family: var(--font-mono);
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .8em;
}

.bp-winner-store {
  font-family: var(--font-pixel);
  font-size: .7rem;
  color: var(--text);
  margin-bottom: .4em;
}

.bp-winner-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--green);
  line-height: 1.2;
}

.bp-asof-link {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  margin: .4em 0;
}

.bp-asof-plain {
  display: block;
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
  margin: .4em 0;
}

.bp-disclaimer {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
  border: 1px dashed var(--muted);
  padding: .6em .8em;
  margin-bottom: .6em;
}

.bp-none {
  font-family: var(--font-mono);
  color: var(--muted);
  padding: .75em 0;
}

.verdict-badge {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: .55rem;
  padding: .5em .7em;
  margin: .7em 0;
  border: 2px solid;
}

.verdict-badge.record_low { color: var(--bg); background: var(--yellow); border-color: var(--yellow); animation: blink 1s steps(1, end) infinite; }
.verdict-badge.below { color: var(--green); border-color: var(--green); background: rgba(57,255,122,.1); }
.verdict-badge.fair { color: var(--teal); border-color: var(--teal); background: rgba(29,233,198,.1); }
.verdict-badge.above { color: var(--red); border-color: var(--red); background: rgba(255,77,77,.1); }

.bp-window-toggle { display: flex; gap: .4rem; margin: .8em 0 .6em; }

.bp-window-toggle button {
  font: inherit;
  font-family: var(--font-pixel);
  font-size: .5rem;
  padding: .45em .7em;
  background: var(--bg);
  border: 2px solid var(--muted);
  color: var(--muted);
  cursor: pointer;
}

.bp-window-toggle button.active { border-color: var(--teal); color: var(--teal); }

.bp-figures {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem 1rem;
  margin-bottom: .8em;
  font-family: var(--font-mono);
}

.bp-figure-label { font-size: .65rem; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.bp-figure-val { font-size: 1.05rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

.bp-source-note { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin-top: 1em; }

/* ACCEPT QUEST? · eBay Marketplace panel — the quest-log dialog
   style from design/drafts/c-8bit.html, ported to the arcade
   tokens/fonts. The "?" is coin-yellow with a soft glow, and its
   leading icon bobs gently (stopped by the motion-off override
   above, which already zeroes every animation duration). */
.quest-panel {
  border: var(--border-w) solid var(--yellow);
  background: var(--bg-panel-2);
  padding: 1.25rem;
}

.quest-title {
  display: flex;
  align-items: center;
  gap: .35em;
  font-family: var(--font-pixel);
  font-size: .75rem;
  color: var(--text);
  margin-bottom: .3em;
}

.quest-icon, .quest-mark {
  color: var(--yellow);
  text-shadow: 0 0 6px rgba(255,210,63,.8);
}

.quest-icon {
  display: inline-block;
  animation: quest-bob 2.2s ease-in-out infinite;
}

@keyframes quest-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.quest-sub {
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--muted);
  margin-bottom: 1em;
}

.quest-row { padding: .9em 0; border-bottom: 2px dashed var(--muted); }
.quest-row:last-child { border-bottom: none; }
.quest-row-title { font-size: .95rem; color: var(--text); }
.quest-row-meta { font-family: var(--font-mono); font-size: .75rem; color: var(--muted); margin: .35em 0; }
.quest-row-price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: .5em;
}

.quest-empty { font-family: var(--font-mono); color: var(--muted); padding: .75em 0; }

/* 8-BIT TOGGLE SWITCH — used by alert cards (enable/disable). */
.pixel-switch {
  position: relative;
  display: inline-flex;
  width: 50px;
  height: 26px;
  flex: none;
  cursor: pointer;
}

.pixel-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.pixel-switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg);
  border: 2px solid var(--muted);
}

.pixel-switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--muted);
  transition: transform .15s, background .15s;
}

.pixel-switch input:checked + .pixel-switch-track { border-color: var(--green); }
.pixel-switch input:checked + .pixel-switch-track .pixel-switch-thumb {
  transform: translateX(22px);
  background: var(--green);
}

/* ALERT CARDS */
.alert-card {
  border: var(--border-w) solid var(--teal);
  background: var(--bg-panel-2);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.alert-card-info { flex: 1; min-width: 220px; }

.alert-card-query {
  font-family: var(--font-pixel);
  font-size: .68rem;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert-card-condition { font-family: var(--font-mono); font-size: .85rem; color: var(--muted); margin-top: .4em; }

.alert-card-via { display: flex; gap: .5rem; margin-top: .5em; }

.alert-via-pill {
  font-family: var(--font-mono);
  font-size: .7rem;
  padding: .2em .6em;
  border: 1px solid var(--muted);
  color: var(--muted);
}

.alert-via-pill.active { border-color: var(--teal); color: var(--teal); }

.alert-triggered { font-family: var(--font-mono); font-size: .72rem; color: var(--muted); white-space: nowrap; }

.alert-edit-row {
  width: 100%;
  border-top: 2px dashed var(--muted);
  margin-top: .75rem;
  padding-top: .9rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}