/* Rogue Market
   "Nilgarf Night": warm near-black stone, candlelight, aged silver.

   Deliberately not a dashboard. No navy, no teal, no gradient glows, no
   uniformly rounded cards. Panels read as iron-framed plaques on stone;
   gains and losses use patina and oxblood rather than the usual green/red,
   because the palette should belong to Gaia and not to a trading terminal. */

:root {
  /* Ground */
  --ink:       #0e0c0a;
  --stone:     #16130f;
  --panel:     #1d1915;
  --panel-2:   #241f1a;
  --panel-3:   #2c2620;

  /* Iron rules */
  --iron:      #3b332a;
  --iron-soft: #272119;

  /* Text, warm rather than blue-white */
  --parch:     #e8dcc4;
  --parch-dim: #a3947c;
  --dim:       #6f6353;

  /* Light and metal */
  --amber:     #c8a15a;
  --amber-hi:  #e3bd77;
  --silver:    #b9bec7;

  /* Fortune */
  --gain:      #7d9e63;
  --gain-wash: rgba(125, 158, 99, 0.12);
  --loss:      #b04a44;
  --loss-wash: rgba(176, 74, 68, 0.12);
  --seal:      #7d2430;

  /* Vellum, used sparingly for document-like surfaces */
  --vellum:     #e6dabf;
  --vellum-2:   #dccdad;
  --vellum-ink: #2a2118;
  --vellum-rule:#b8a681;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body:    "EB Garamond", Georgia, "Times New Roman", serif;

  --edge: 2px;
}

* { box-sizing: border-box; }

html {
  scrollbar-color: var(--iron) var(--ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--stone);
  color: var(--parch);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Grain and vignette instead of gradient glow. Both are inert overlays. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: radial-gradient(ellipse 150% 120% at 50% 30%,
              transparent 58%, rgba(0, 0, 0, 0.20) 100%);
}

a { color: inherit; text-decoration: none; }

/* Figures line up in columns and stay legible while prices tick. */
.num {
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0.01em;
}

.display { font-family: var(--display); }

/* Small engraved label, used for every field name on the site. */
.label {
  font-family: var(--display);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ---------- Silver ---------- */

.coin {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  vertical-align: -0.09em;
  margin-right: 0.34em;
  flex: none;
}

.coin.lg { width: 1em; height: 1em; vertical-align: -0.11em; }

/* ---------- Layout ---------- */

.wrap {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 28px 90px;
}

/* ---------- Header ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(180deg, #191510 0%, #14110d 100%);
  border-bottom: 1px solid var(--iron);
  box-shadow: 0 1px 0 rgba(200, 161, 90, 0.09), 0 6px 22px rgba(0, 0, 0, 0.5);
}

.topbar-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 28px;
  height: 66px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--parch);
}

.brand img { width: 26px; height: 26px; }

.nav { display: flex; gap: 26px; }

.nav a {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--parch-dim);
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}

.nav a:hover { color: var(--parch); }
.nav a.active { color: var(--amber); border-bottom-color: var(--amber); }

@keyframes flicker {
  0%, 100% { opacity: 1; }
  45%      { opacity: 0.55; }
  70%      { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Page heading ---------- */

.page-head { padding: 46px 0 30px; }

.page-title {
  margin: 0;
  font-family: var(--display);
  font-size: 33px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--parch);
}

/* Rule with a centred lozenge, standing in for the old underline. */
.rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 15px 0 13px;
  color: var(--iron);
}

.rule::before,
.rule::after {
  content: "";
  height: 1px;
  background: linear-gradient(90deg, #514637 0%, #514637 62%, transparent 100%);
  flex: 1;
}

.rule i {
  width: 6px;
  height: 6px;
  background: var(--amber);
  transform: rotate(45deg);
  flex: none;
  opacity: 0.85;
}

.rule.left::before { display: none; }

.page-sub {
  margin: 0;
  color: var(--parch-dim);
  font-size: 16px;
  font-style: italic;
  max-width: 62ch;
}

/* ---------- Plaques ---------- */

.plaque {
  background: var(--panel);
  border: 1px solid var(--iron);
  border-radius: var(--edge);
  box-shadow:
    inset 0 1px 0 rgba(232, 220, 196, 0.035),
    0 2px 0 rgba(0, 0, 0, 0.35);
  position: relative;
}

/* Four corner rivets, drawn rather than imported. */
.riveted {
  background-image:
    radial-gradient(circle, rgba(232,220,196,0.16) 0.5px, transparent 1.6px),
    radial-gradient(circle, rgba(232,220,196,0.16) 0.5px, transparent 1.6px),
    radial-gradient(circle, rgba(232,220,196,0.16) 0.5px, transparent 1.6px),
    radial-gradient(circle, rgba(232,220,196,0.16) 0.5px, transparent 1.6px);
  background-size: 5px 5px;
  background-repeat: no-repeat;
  background-position: 7px 7px, calc(100% - 7px) 7px, 7px calc(100% - 7px), calc(100% - 7px) calc(100% - 7px);
}

.plaque-head {
  padding: 14px 20px 13px;
  border-bottom: 1px solid var(--iron-soft);
  display: flex;
  align-items: center;
  gap: 11px;
}

.plaque-title {
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--parch-dim);
}

/* ---------- Ledger strip ---------- */

.ledger {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  background: var(--panel);
  border: 1px solid var(--iron);
  border-radius: var(--edge);
  overflow: hidden;
  margin-bottom: 30px;
  box-shadow: inset 0 1px 0 rgba(232, 220, 196, 0.035);
}

.ledger-cell {
  padding: 17px 20px 15px;
  border-right: 1px solid var(--iron-soft);
}

.ledger-cell:last-child { border-right: none; }

.ledger-value {
  font-family: var(--display);
  font-size: 23px;
  font-weight: 600;
  margin-top: 7px;
  display: flex;
  align-items: center;
  color: var(--parch);
}

.ledger-note {
  font-size: 13.5px;
  font-style: italic;
  color: var(--dim);
  margin-top: 3px;
}

/* ---------- Notice ---------- */

.notice-banner {
  display: flex;
  gap: 16px;
  padding: 17px 21px;
  margin-bottom: 26px;
  background: linear-gradient(180deg, rgba(200,161,90,0.07), rgba(200,161,90,0.03));
  border: 1px solid rgba(200, 161, 90, 0.28);
  border-left: 3px solid var(--amber);
  border-radius: var(--edge);
}

.notice-title {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-hi);
  margin-bottom: 5px;
}

.notice-body { font-size: 15.5px; color: var(--parch-dim); }

/* ---------- Rising and falling ---------- */

.movers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 32px;
}

@media (max-width: 820px) { .movers { grid-template-columns: 1fr; } }

.mover {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--iron-soft);
  transition: background 0.15s;
}

.mover:last-child { border-bottom: none; }
.mover:hover { background: var(--panel-2); }

.mover-rank {
  width: 17px;
  font-style: italic;
  font-size: 14px;
  color: var(--dim);
}

.mover-name { flex: 1; font-size: 16px; }

.mover-price {
  color: var(--parch-dim);
  font-size: 15px;
  display: flex;
  align-items: center;
}

.mover-change {
  min-width: 78px;
  text-align: right;
  font-family: var(--display);
  font-weight: 600;
  font-size: 14.5px;
}

/* ---------- Controls ---------- */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  align-items: center;
  margin-bottom: 22px;
}

.search { position: relative; flex: 1; min-width: 210px; max-width: 330px; }

.search input {
  width: 100%;
  padding: 10px 14px 10px 36px;
  background: var(--ink);
  border: 1px solid var(--iron);
  border-radius: var(--edge);
  color: var(--parch);
  font-family: var(--body);
  font-size: 16px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.search input:focus {
  border-color: var(--amber);
  box-shadow: 0 0 0 1px rgba(200, 161, 90, 0.25);
}

.search input::placeholder { color: var(--dim); font-style: italic; }

.search-icon {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--dim);
  display: flex;
  pointer-events: none;
}

/* Engraved tab group, replacing the old pill toggles. */
.tabs {
  display: flex;
  background: var(--ink);
  border: 1px solid var(--iron);
  border-radius: var(--edge);
  overflow: hidden;
}

.tab {
  padding: 9px 16px;
  border: none;
  border-right: 1px solid var(--iron-soft);
  background: transparent;
  color: var(--parch-dim);
  cursor: pointer;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background 0.16s, color 0.16s;
}

.tab:last-child { border-right: none; }
.tab:hover { color: var(--parch); background: var(--panel-2); }

.tab.active {
  color: var(--ink);
  background: var(--amber);
  text-shadow: none;
}

select.control {
  padding: 10px 13px;
  background: var(--ink);
  border: 1px solid var(--iron);
  border-radius: var(--edge);
  color: var(--parch);
  font-family: var(--body);
  font-size: 15.5px;
  cursor: pointer;
  outline: none;
}

select.control:focus { border-color: var(--amber); }

.tally {
  margin-left: auto;
  color: var(--dim);
  font-size: 14.5px;
  font-style: italic;
}

/* ---------- Goods ---------- */

.goods {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 17px;
}

.good {
  display: block;
  position: relative;
  background: var(--panel);
  border: 1px solid var(--iron);
  border-radius: var(--edge);
  padding: 19px 20px 14px;
  cursor: pointer;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(232, 220, 196, 0.03);
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}

.good:hover {
  border-color: #55483a;
  background: var(--panel-2);
  transform: translateY(-1px);
}

/* Fortune marked on the top edge. */
.good::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--iron);
}

.good.gain::before { background: var(--gain); }
.good.loss::before { background: var(--loss); }

.good-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 15px;
}

.good-name {
  flex: 1;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.02em;
  min-height: 2.64em;
  color: var(--parch);
}

.kind {
  font-family: var(--display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--iron);
  padding: 3px 7px;
  border-radius: 1px;
  white-space: nowrap;
}

.good-price {
  font-family: var(--display);
  font-size: 27px;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: var(--parch);
  line-height: 1.1;
}

.per-unit {
  font-family: var(--body);
  font-size: 12.5px;
  font-style: italic;
  color: var(--dim);
  margin-left: 8px;
  letter-spacing: 0;
}

.good-change { display: flex; gap: 18px; margin-top: 9px; font-size: 15px; }
.good-change .k { color: var(--dim); font-style: italic; margin-right: 6px; }

.good-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--iron-soft);
  font-size: 13.5px;
  color: var(--dim);
  font-style: italic;
}

.spark { display: block; width: 100%; height: 36px; margin-top: 12px; }

.good.untraded { opacity: 0.44; }

.good.untraded .good-price {
  font-family: var(--body);
  font-size: 16px;
  font-style: italic;
  color: var(--dim);
}

/* ---------- Fortune ---------- */

.gain { color: var(--gain); }
.loss { color: var(--loss); }
.even { color: var(--parch-dim); }

.mark {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 1px;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 600;
}

.mark.gain { background: var(--gain-wash); border: 1px solid rgba(125,158,99,0.3); }
.mark.loss { background: var(--loss-wash); border: 1px solid rgba(176,74,68,0.3); }
.mark.even { background: var(--panel-3); border: 1px solid var(--iron); }

/* ---------- Single good ---------- */

.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--parch-dim);
  font-size: 15px;
  font-style: italic;
  margin-bottom: 20px;
  transition: color 0.16s;
}

.back:hover { color: var(--amber); }

.good-banner {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 26px;
  margin-bottom: 26px;
}

.good-banner h1 {
  margin: 0 0 10px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.title-row { display: flex; align-items: center; gap: 14px; }

.headline-price {
  font-family: var(--display);
  font-size: 46px;
  font-weight: 700;
  line-height: 1;
  display: flex;
  align-items: center;
  color: var(--parch);
}

.headline-meta {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-top: 13px;
  font-size: 15px;
  flex-wrap: wrap;
}

.aside {
  font-size: 14.5px;
  font-style: italic;
  color: var(--amber);
  background: rgba(200, 161, 90, 0.07);
  border: 1px solid rgba(200, 161, 90, 0.24);
  padding: 9px 14px;
  border-radius: var(--edge);
  max-width: 34ch;
}

.aside.link { color: var(--parch-dim); }
.aside.link:hover { color: var(--amber); border-color: rgba(200,161,90,0.45); }

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(146px, 1fr));
  background: var(--panel);
  border: 1px solid var(--iron);
  border-radius: var(--edge);
  overflow: hidden;
  margin-bottom: 24px;
}

.tile { padding: 15px 18px; border-right: 1px solid var(--iron-soft); }
.tile:last-child { border-right: none; }

.tile-value {
  font-family: var(--display);
  font-size: 17.5px;
  font-weight: 600;
  margin-top: 6px;
  display: flex;
  align-items: center;
}

/* ---------- Chart ---------- */

.chart-plaque { margin-bottom: 26px; }

.chart-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--iron-soft);
}

.overlays { display: flex; gap: 18px; margin-left: auto; }

.overlay-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--parch-dim);
  cursor: pointer;
  user-select: none;
}

.overlay-toggle input { accent-color: var(--amber); cursor: pointer; margin: 0; }
.overlay-toggle .swatch { width: 13px; height: 2px; flex: none; }

.chart-well {
  position: relative;
  height: 442px;
  background: #1a1611;
  border-top: 1px solid rgba(0, 0, 0, 0.4);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.35);
}

#chart { position: absolute; inset: 0; }

.reading {
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 4;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: rgba(14, 12, 10, 0.9);
  border: 1px solid var(--iron);
  border-radius: var(--edge);
  font-size: 14px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}

.reading.shown { opacity: 1; }
.reading .k { color: var(--dim); margin-right: 5px; font-style: italic; }

.chart-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--dim);
  font-style: italic;
  font-size: 16px;
  padding: 24px;
}

/* ---------- Register of traders ---------- */

.register {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 24px;
  align-items: start;
}

@media (max-width: 980px) { .register { grid-template-columns: 1fr; } }

.lookup { display: flex; gap: 12px; margin-bottom: 22px; }
.lookup .search { max-width: none; }

.btn {
  padding: 10px 24px;
  background: linear-gradient(180deg, var(--amber-hi), var(--amber));
  color: #1a1408;
  border: 1px solid #8f7038;
  border-radius: var(--edge);
  font-family: var(--display);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.16s;
}

.btn:hover { filter: brightness(1.09); }

/* The writ: a document laid on the table, so it reads as vellum. */
.writ {
  max-width: 545px;
  margin: 0 auto;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.35), transparent 60%),
    linear-gradient(160deg, var(--vellum) 0%, var(--vellum-2) 100%);
  border: 1px solid #8c7a58;
  border-radius: var(--edge);
  padding: 32px 30px 28px;
  text-align: center;
  color: var(--vellum-ink);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.5);
  position: relative;
}

.writ::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--vellum-rule);
  opacity: 0.5;
  pointer-events: none;
  border-radius: 1px;
}

/* Wax seal carrying the grade. */
.seal {
  width: 96px;
  height: 96px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 250, 240, 0.94);
  box-shadow:
    inset 0 3px 7px rgba(255, 255, 255, 0.22),
    inset 0 -4px 9px rgba(0, 0, 0, 0.34),
    0 3px 9px rgba(0, 0, 0, 0.35);
}

.writ-score {
  margin-top: 12px;
  font-family: var(--display);
  font-size: 37px;
  font-weight: 700;
  line-height: 1;
}

.writ-standing {
  font-size: 16px;
  font-style: italic;
  color: #5c4c38;
  margin-top: 6px;
}

.writ-id {
  font-size: 13.5px;
  color: #7a6a4f;
  margin-top: 9px;
  letter-spacing: 0.04em;
}

.judgement {
  margin-top: 20px;
  padding: 13px 17px;
  border-radius: 1px;
  font-size: 15.5px;
  text-align: left;
  border: 1px solid var(--vellum-rule);
  background: rgba(255, 255, 255, 0.28);
}

.judgement.good { border-color: #6d8a5a; background: rgba(109, 138, 90, 0.14); }
.judgement.ill  { border-color: #9c4a44; background: rgba(156, 74, 68, 0.13); }
.judgement.warn { border-color: #ad8340; background: rgba(173, 131, 64, 0.14); }

.spread {
  display: flex;
  height: 27px;
  margin: 17px 20px 0;
  border: 1px solid var(--iron);
  border-radius: 1px;
  overflow: hidden;
  background: var(--ink);
}

.spread-part { transition: opacity 0.16s; }
.spread-part:hover { opacity: 0.78; }

.spread-key {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  padding: 13px 20px 18px;
  font-size: 13.5px;
  color: var(--parch-dim);
}

.spread-key span { display: inline-flex; align-items: center; gap: 6px; }
.spread-key i { width: 9px; height: 9px; display: inline-block; }

.name-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--iron-soft);
  cursor: pointer;
  transition: background 0.14s;
}

.name-row:last-child { border-bottom: none; }
.name-row:hover { background: var(--panel-2); }
.name-rank { width: 19px; font-style: italic; font-size: 13.5px; color: var(--dim); flex: none; }

/* Who the trader is: the name people know, then the handle, then the ID. */
.name-who { flex: 1; min-width: 0; }

.name-display {
  font-family: var(--display);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--parch);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-display.unnamed {
  font-family: var(--body);
  font-weight: 400;
  color: var(--parch-dim);
  letter-spacing: 0.02em;
}

.name-handle {
  font-size: 13px;
  font-style: italic;
  color: var(--parch-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.name-uid {
  font-size: 11.5px;
  color: var(--dim);
  letter-spacing: 0.03em;
  margin-top: 1px;
}

/* Name on the writ, sitting between the seal and the score. */
.writ-name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  color: var(--vellum-ink);
  line-height: 1.25;
  margin-bottom: 2px;
}

.writ-name.unnamed {
  font-family: var(--body);
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: #6d5c44;
}

.writ-handle {
  font-size: 15px;
  font-style: italic;
  color: #6d5c44;
  margin-bottom: 10px;
}

.grade-chip {
  padding: 3px 9px;
  border-radius: 1px;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 250, 240, 0.95);
  min-width: 44px;
  text-align: center;
}

.name-score {
  min-width: 54px;
  text-align: right;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
}

table.scale { width: 100%; border-collapse: collapse; font-size: 15.5px; }
table.scale td { padding: 9px 20px; border-bottom: 1px solid var(--iron-soft); }
table.scale tr:last-child td { border-bottom: none; }
table.scale td:last-child { text-align: right; color: var(--parch-dim); font-style: italic; }

/* ---------- States ---------- */

.empty, .loading {
  padding: 62px 24px;
  text-align: center;
  color: var(--dim);
  font-style: italic;
  font-size: 16px;
}

/* A silver piece turning while we wait. */
.spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 14px;
  animation: turn 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

@keyframes turn {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.warning {
  padding: 15px 19px;
  border-radius: var(--edge);
  border: 1px solid rgba(176, 74, 68, 0.42);
  border-left: 3px solid var(--loss);
  background: var(--loss-wash);
  color: #d68a85;
  font-size: 15.5px;
  margin-bottom: 20px;
}

/* ---------- Ticker tape ---------- */

/* A running price tape under the header. The track holds two identical copies
   of the list and slides exactly half its width, so the loop is seamless.
   Duration is set in JS from the measured width, which keeps the scroll at a
   constant speed no matter how many goods are listed. */

.tape {
  overflow: hidden;
  background: linear-gradient(180deg, rgba(200, 161, 90, 0.07), rgba(200, 161, 90, 0.025));
  border-bottom: 1px solid var(--iron);
  box-shadow: inset 0 1px 0 rgba(232, 220, 196, 0.03);
  height: 44px;
  position: relative;
}

.tape:empty { display: none; }

/* Entries fade in and out at the ends. Masking the window rather than laying a
   coloured gradient over it means the fade cannot mismatch the tinted strip
   behind it, and the border below still runs the full width. */
.tape-window {
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0,
                      #000 66px, #000 calc(100% - 66px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0,
              #000 66px, #000 calc(100% - 66px), transparent 100%);
}

.tape-track {
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  animation: tape-run linear infinite;
}

@keyframes tape-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Let someone stop it to read an entry. */
.tape:hover .tape-track { animation-play-state: paused; }

.tape-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 17px;
  white-space: nowrap;
  transition: background 0.15s;
}

.tape-item:hover { background: rgba(200, 161, 90, 0.09); }

.tape-name {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--parch-dim);
}

.tape-price {
  display: flex;
  align-items: center;
  font-size: 14.5px;
  color: var(--parch);
}

.tape-move { font-family: var(--display); font-size: 13px; font-weight: 600; }

/* Drawn lozenge between entries, matching the rule ornament. */
.tape-sep {
  width: 4px;
  height: 4px;
  background: var(--iron);
  transform: rotate(45deg);
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Standing still the tape cannot show everything, so let it be scrolled by
     hand instead. The window, not the strip, is the scrolling element. */
  .tape-track { animation: none; }
  .tape-window { overflow-x: auto; }
}

.foot {
  margin-top: 64px;
  padding-top: 30px;
  border-top: 1px solid var(--iron);
}

.foot-top {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.foot-about { max-width: 46ch; }

.foot-mark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--parch-dim);
  margin-bottom: 10px;
}

.foot-mark img { width: 17px; height: 17px; opacity: 0.75; }

.foot-about p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--dim);
}

.foot-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: auto;
}

.foot-links a {
  font-size: 14.5px;
  color: var(--parch-dim);
  transition: color 0.16s;
}

.foot-links a:hover { color: var(--amber); }

.foot-bottom {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--iron-soft);
  font-size: 13px;
  color: var(--dim);
}

@media (max-width: 620px) {
  .foot-top { gap: 28px; }
  .foot-links { margin-left: 0; }
}