/* HubCW - modern-retro theme
   Modern layout & type (Inter), retro game accents (Pixelify Sans, pixel hard-shadows, sprites). */

/* ---------- tokens ---------- */
:root {
  --bg: #f6f2e9;
  --bg-2: #efe8d9;
  --card: #ffffff;
  --card-2: #fbf8f2;
  --ink: #1c2240;
  --ink-2: #4b5373;
  --ink-3: #8a90a8;
  --line: #e6dfcf;
  --line-2: #d6ccb6;
  --hard: #1c2240;
  --accent: #ff7a1a;
  --accent-2: #ff9a45;
  --accent-ink: #b24600;
  --accent-soft: #fff0e1;
  --blue: #3d7bfd;
  --blue-ink: #1f4fc4;
  --blue-soft: #e7efff;
  --green: #18a76c;
  --green-ink: #0d7a4d;
  --green-soft: #e1f6ec;
  --red: #e5484d;
  --red-ink: #b42328;
  --red-soft: #fdecec;
  --gold: #e8b021;
  --gold-ink: #8f6500;
  --gold-soft: #fff4d6;
  --violet: #8b5cf6;
  --tip: #141a30;
  --sky-1: #7cc6ff;
  --sky-2: #cfeeff;
  --grass-1: #6cc34a;
  --grass-2: #4a9a2c;
  --dirt: #a8743f;
  --shadow: 0 1px 2px rgba(28, 34, 64, .05), 0 6px 20px rgba(28, 34, 64, .06);
  --shadow-lg: 0 2px 4px rgba(28, 34, 64, .06), 0 18px 40px rgba(28, 34, 64, .10);
  --dots: rgba(28, 34, 64, .055);
  --radius: 16px;
  --radius-sm: 10px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pixel: "Pixelify Sans", "Press Start 2P", ui-monospace, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #0d1121; --bg-2: #151b31; --card: #161d35; --card-2: #1a223d;
  --ink: #eceff9; --ink-2: #aab1cd; --ink-3: #737c9e;
  --line: #262f4f; --line-2: #34406a; --hard: #05070f;
  --accent: #ff8a33; --accent-2: #ffa55e; --accent-ink: #ffb27a; --accent-soft: #34200f;
  --blue: #5b8fff; --blue-ink: #9dbbff; --blue-soft: #172447;
  --green: #2bc282; --green-ink: #6fe0ae; --green-soft: #0f2e22;
  --red: #f0646a; --red-ink: #ff9ca0; --red-soft: #3a1619;
  --gold-ink: #f2c94c; --gold-soft: #3a2c0c; --tip: #0a0e1d;
  --sky-1: #1d2d63; --sky-2: #3a4f8f; --grass-1: #3f8a2c; --grass-2: #2c6a1c; --dirt: #6e4a26;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 44px rgba(0, 0, 0, .35);
  --dots: rgba(255, 255, 255, .04);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1121; --bg-2: #151b31; --card: #161d35; --card-2: #1a223d;
    --ink: #eceff9; --ink-2: #aab1cd; --ink-3: #737c9e;
    --line: #262f4f; --line-2: #34406a; --hard: #05070f;
    --accent: #ff8a33; --accent-2: #ffa55e; --accent-ink: #ffb27a; --accent-soft: #34200f;
    --blue: #5b8fff; --blue-ink: #9dbbff; --blue-soft: #172447;
    --green: #2bc282; --green-ink: #6fe0ae; --green-soft: #0f2e22;
    --red: #f0646a; --red-ink: #ff9ca0; --red-soft: #3a1619;
    --gold-ink: #f2c94c; --gold-soft: #3a2c0c; --tip: #0a0e1d;
    --sky-1: #1d2d63; --sky-2: #3a4f8f; --grass-1: #3f8a2c; --grass-2: #2c6a1c; --dirt: #6e4a26;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 44px rgba(0, 0, 0, .35);
    --dots: rgba(255, 255, 255, .04);
    color-scheme: dark;
  }
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 14.5px/1.6 var(--font);
  color: var(--ink);
  background-color: var(--bg);
  background-image: radial-gradient(var(--dots) 1.2px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: var(--accent-ink); }
h1, h2, h3 { font-family: var(--pixel); font-weight: 600; color: var(--ink); margin: 0 0 10px; line-height: 1.2; letter-spacing: .2px; }
h1 { font-size: 28px; }
h2 { font-size: 21px; }
h3 { font-size: 16px; }
p { margin: 0 0 10px; }
small, .muted { color: var(--ink-3); }
small { font-size: 12.5px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }
.center { text-align: center; }
.ta-r { text-align: right; }
.nowrap { white-space: nowrap; }
img.ico { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
img.ico.sm { width: 22px; height: 22px; }
img.ico.lg { width: 52px; height: 52px; }
img.mobimg { image-rendering: pixelated; max-width: 100%; vertical-align: middle; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; border-radius: 6px; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ---------- top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--line);
}
/* the frost is a layer of its own: on .topbar itself, the account menu's blur (inside it) couldn't see the page */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--card) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}
.topbar .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--ink); flex: none; }
.brand:hover { color: var(--ink); }
.brand svg { width: 32px; height: 32px; filter: drop-shadow(2px 2px 0 var(--hard)); }
.brand .name { font-family: var(--pixel); font-weight: 700; font-size: 25px; letter-spacing: .5px; }
.brand .name b { color: var(--accent); font-weight: 700; }
.mainnav { flex: none; display: flex; gap: 2px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.mainnav::-webkit-scrollbar { display: none; }
.mainnav a {
  color: var(--ink-2); font-weight: 600; font-size: 14px; padding: 7px 12px; border-radius: 10px; white-space: nowrap;
}
.mainnav a:hover { background: var(--bg-2); color: var(--ink); }
.mainnav a.on { background: var(--accent-soft); color: var(--accent-ink); }
/* the search box sits on the right and gives up width first, so the nav links never get cut off */
.searchbox { position: relative; flex: 0 1 260px; min-width: 0; margin-left: auto; }
.searchbox input {
  width: 220px; padding: 8px 12px 8px 34px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--bg);
  font: inherit; font-size: 13.5px; color: var(--ink);
}
.searchbox input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px var(--accent-soft); }
.searchbox svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-3); }
.iconbtn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px;
  border-radius: 10px; color: var(--ink-2); background: transparent; border: 0; cursor: pointer; flex: none;
}
.iconbtn:hover { background: var(--bg-2); color: var(--ink); }
.iconbtn svg { width: 19px; height: 19px; }
.iconbtn .dot {
  position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; border: 2px solid var(--card);
}
.theme-dark-icon { display: none; }
:root[data-theme="dark"] .theme-dark-icon { display: block; }
:root[data-theme="dark"] .theme-light-icon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-dark-icon { display: block; }
  :root:not([data-theme="light"]) .theme-light-icon { display: none; }
}
.usermenu { position: relative; }
.usermenu summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 12px; }
.usermenu summary::-webkit-details-marker { display: none; }
.usermenu summary:hover { background: var(--bg-2); }
.usermenu .av {
  width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(var(--sky-2), var(--card)); border: 1.5px solid var(--line-2);
  display: flex; align-items: flex-end; justify-content: center; overflow: hidden;
}
.usermenu .av img { max-width: 30px; max-height: 30px; image-rendering: pixelated; }
.usermenu .un { font-weight: 700; font-size: 13.5px; color: var(--ink); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu .caret { width: 14px; height: 14px; margin-left: -3px; color: var(--ink-3); flex: none; transition: transform .15s; }
.usermenu[open] .caret { transform: rotate(180deg); }
/* Sell, the icon buttons and the account menu: one tight group */
.tb-actions { display: flex; align-items: center; gap: 4px; flex: none; }
.tb-actions .sellbtn { margin-right: 6px; }
.tb-actions .usermenu { margin-left: 4px; }
.usermenu .menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 230px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60;
}
.usermenu .menu .hd { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.usermenu .menu a, .usermenu .menu button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; color: var(--ink); font: inherit; font-size: 14px;
  background: none; border: 0; cursor: pointer;
}
.usermenu .menu a:hover, .usermenu .menu button:hover { background: var(--bg-2); color: var(--ink); }
.usermenu .menu .sep { height: 1px; background: var(--line); margin: 6px 0; }

.subnav { border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--card) 60%, transparent); }
.subnav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; }
.subnav a { font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.subnav a:hover { background: var(--bg-2); color: var(--ink); }
.subnav a.on { background: var(--ink); color: var(--card); }
.subnav .sn-live { display: inline-block; min-width: 18px; margin-left: 3px; padding: 0 5px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; } /* Live shops open now */
.subnav .sp { flex: 1; }

/* ---------- layout ---------- */
#body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 26px; padding-bottom: 40px; }
#body.three, #body.rail { grid-template-columns: minmax(0, 1fr) 320px; }
.main > .box, .side > .box, .main > .cols2, .main > .statbox { margin-bottom: 20px; }
.side { min-width: 0; }

/* ---------- hero (home) ---------- */
.home-top { padding-top: 24px; }
.hero {
  position: relative; overflow: hidden; border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--hard) 14%, transparent); box-shadow: var(--shadow-lg);
  background: radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.55), transparent 60%), linear-gradient(180deg, var(--sky-1), var(--sky-2) 92%);
  padding: 34px 40px 66px; color: #0f1733;
  display: flex; align-items: center; gap: 36px;
}
.hero-main { flex: 1; min-width: 0; position: relative; z-index: 2; }
:root[data-theme="dark"] .hero { color: #fff; background-image: radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.07), transparent 60%), linear-gradient(180deg, var(--sky-1), var(--sky-2) 92%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { color: #fff; background-image: radial-gradient(120% 90% at 85% 0%, rgba(255,255,255,.07), transparent 60%), linear-gradient(180deg, var(--sky-1), var(--sky-2) 92%); } }
.hero .cloud { position: absolute; z-index: 0; background: #fff; opacity: .75; border-radius: 4px; box-shadow: 16px -10px 0 -2px #fff, 34px 0 0 0 #fff, -14px 2px 0 -3px #fff; height: 16px; width: 54px; }
:root[data-theme="dark"] .hero .cloud { opacity: .1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero .cloud { opacity: .1; } }
.hero .c1 { top: 22px; right: 34%; animation: drift 60s linear infinite; }
.hero .c2 { top: 34px; right: 6%; transform: scale(1.3); animation: drift 90s linear infinite reverse; }
.hero .c3 { top: 14px; left: 56%; transform: scale(.8); }
@keyframes drift { 0%, 100% { translate: 0 0; } 50% { translate: -60px 0; } }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 650; letter-spacing: .01em;
  background: rgba(255,255,255,.72); color: #0f1733; padding: 5px 12px 5px 10px; border-radius: 999px;
  border: 1px solid rgba(15,23,51,.12); margin-bottom: 14px; backdrop-filter: blur(6px);
}
.hero .eyebrow i { width: 8px; height: 8px; border-radius: 50%; background: #18a76c; box-shadow: 0 0 0 3px rgba(24,167,108,.25); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(24,167,108,0); } }
.hero h1 { font-size: clamp(26px, 3.3vw, 38px); margin: 0 0 8px; color: inherit; letter-spacing: .3px; }
.hero h1 em { font-style: normal; color: var(--accent-ink); }
:root[data-theme="dark"] .hero h1 em { color: var(--accent-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 em { color: var(--accent-2); } }
.hero .lead { font-size: 15.5px; max-width: 560px; opacity: .8; margin-bottom: 20px; }
.hero-search {
  position: relative; display: flex; align-items: center; gap: 8px; max-width: 620px; padding: 6px 6px 6px 44px;
  background: var(--card); border: 1px solid color-mix(in srgb, var(--hard) 16%, transparent); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(15,23,51,.06), 0 10px 28px rgba(15,23,51,.12); transition: box-shadow .15s, border-color .15s;
}
.hero-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent), 0 10px 28px rgba(15,23,51,.12); }
.hero-search > svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px; color: var(--ink-3); pointer-events: none; }
.hero-search input[type=search] {
  flex: 1; min-width: 0; font: inherit; font-size: 15.5px; padding: 9px 4px; border: 0; border-radius: 0;
  background: transparent; color: var(--ink); box-shadow: none;
}
.hero-search input[type=search]:focus { outline: none; box-shadow: none; }
.hero-search .btn { padding: 11px 22px; font-size: 14.5px; border: 0; border-radius: 10px; box-shadow: none; }
.hero-search .btn:hover { transform: none; box-shadow: none; filter: brightness(1.06); }
.hero-search .btn:active { transform: translateY(1px); box-shadow: none; }
.hero .chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 0; }
.hero .chips > span { font-size: 12.5px; font-weight: 600; opacity: .65; margin-right: 2px; }
.hero .chips a { font-size: 12.5px; font-weight: 600; background: rgba(255,255,255,.6); color: #0f1733; border: 1px solid rgba(15,23,51,.12); padding: 4px 11px; border-radius: 999px; transition: background .12s, border-color .12s; }
.hero .chips a:hover { background: #fff; border-color: rgba(15,23,51,.3); }
:root[data-theme="dark"] .hero .chips a, :root[data-theme="dark"] .hero .eyebrow { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.16); }
:root[data-theme="dark"] .hero .chips a:hover { background: rgba(255,255,255,.18); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero .chips a, :root:not([data-theme="light"]) .hero .eyebrow { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.16); }
  :root:not([data-theme="light"]) .hero .chips a:hover { background: rgba(255,255,255,.18); }
}
.hero .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: var(--dirt);
  background-image: linear-gradient(var(--grass-1) 0 7px, var(--grass-2) 7px 10px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 8px, transparent 8px 16px); }
.hero .ground::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--grass-1) 0 6px, transparent 6px 12px, var(--grass-1) 12px 15px, transparent 15px 22px); }
.hero .walker { position: absolute; bottom: 20px; left: -90px; image-rendering: pixelated; animation: walk 34s linear infinite; z-index: 1; }
.hero .walker img { transform: scaleX(-1); max-height: 38px; display: block; }
.hero .walker.w2 { animation-duration: 51s; animation-delay: -18s; }
.hero .walker.w3 { animation-duration: 44s; animation-delay: -33s; }
@keyframes walk { from { left: -90px; } to { left: 105%; } }
.hero-stats {
  position: relative; z-index: 2; flex: none; display: grid; grid-template-columns: repeat(3, auto);
  background: color-mix(in srgb, var(--card) 88%, transparent); border: 1px solid color-mix(in srgb, var(--hard) 12%, transparent);
  border-radius: 16px; box-shadow: var(--shadow); backdrop-filter: blur(8px); overflow: hidden;
}
.hero-stats .stat { display: block; padding: 16px 22px; text-align: center; color: var(--ink); transition: background .12s; }
.hero-stats .stat + .stat { border-left: 1px solid var(--line); }
.hero-stats .stat:hover { background: var(--card-2); color: var(--ink); }
.hero-stats .stat b { display: block; font: 800 26px/1.1 var(--font); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.hero-stats .stat span { display: block; margin-top: 4px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; white-space: nowrap; }

/* feature shortcuts under the hero */
.features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.feature {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--radius); min-width: 0;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink);
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.feature:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.feature .fi { width: 42px; height: 42px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.feature .fi svg { width: 21px; height: 21px; }
.feature .fi.orange { background: var(--accent-soft); color: var(--accent-ink); }
.feature .fi.green { background: var(--green-soft); color: var(--green-ink); }
.feature .fi.blue { background: var(--blue-soft); color: var(--blue-ink); }
.feature .fi.violet { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); }
.feature .ft { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.feature .ft b { font-weight: 700; font-size: 14.5px; }
.feature .ft small { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) { .feature .ft small { display: none; } .feature .ft b { font-size: 13.5px; } }

/* ---------- cards ("box") ---------- */
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }
.box-h {
  display: flex; align-items: center; gap: 10px; padding: 14px 18px;
  font-family: var(--pixel); font-weight: 600; font-size: 16.5px; color: var(--ink); border-bottom: 1px solid var(--line);
}
.box-h::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--blue); box-shadow: 2px 2px 0 var(--hard); flex: none; margin-right: -2px; }
.box-h > :last-child:not(:first-child) { margin-left: auto; }
.box-h.orange::before { background: var(--accent); }
.box-h.green::before { background: var(--green); }
.box-h.gray::before { background: var(--ink-3); }
.box-h.red::before { background: var(--red); }
.box-h a { font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--ink-3); }
.box-h a:hover { color: var(--accent-ink); }
.box-h span[style] { font-family: var(--font); color: var(--ink-3); }
.box-h .btn, .box-h .btn:hover { color: var(--t); } /* beats .box-h a; keeps gray buttons dark-on-light */
.box-b { padding: 16px 18px; }
.box-b.flush { padding: 0; }
.box-f { padding: 10px 18px; border-top: 1px solid var(--line); background: var(--card-2); border-radius: 0 0 var(--radius) var(--radius); font-size: 12.5px; color: var(--ink-3); }

/* ---------- tables ---------- */
table.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
table.grid th {
  text-align: left; padding: 10px 14px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-3); border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--card-2);
}
table.grid tr:first-child th:first-child { border-top-left-radius: var(--radius); }
table.grid tr:first-child th:last-child { border-top-right-radius: var(--radius); }
.box-h + .box-b.flush table.grid tr:first-child th, .filters + .box-b.flush table.grid tr:first-child th { border-radius: 0; }
table.grid th a { color: var(--ink-3); }
table.grid td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid tr:last-child td { border-bottom: 0; }
table.grid tr:hover td { background: var(--card-2); }
table.grid td.ic { width: 52px; text-align: center; padding-right: 0; }
table.grid td.num, table.grid th.num { text-align: right; white-space: nowrap; }
table.grid td b a, table.grid td a b { font-weight: 650; }
table.grid td > a > b { color: var(--ink); }
table.grid td > a:hover > b { color: var(--accent-ink); }
table.kv { border-collapse: collapse; width: 100%; }
table.kv th { text-align: left; color: var(--ink-3); font-weight: 500; padding: 5px 12px 5px 0; width: 42%; white-space: nowrap; font-size: 13.5px; }
table.kv td { padding: 5px 0; font-weight: 600; }

/* ---------- forms ---------- */
input[type=text], input[type=password], input[type=email], input[type=number], input[type=search], select, textarea {
  font: inherit; font-size: 14px; padding: 9px 12px; border: 1.5px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); max-width: 100%; transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
textarea { width: 100%; min-height: 130px; resize: vertical; line-height: 1.5; }
input[type=radio], input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; vertical-align: -2px; }
label { font-weight: 600; color: var(--ink); font-size: 13.5px; }
.field { margin-bottom: 14px; }
.field label { display: block; margin-bottom: 5px; }
.field .hint { font-size: 12.5px; color: var(--ink-3); font-weight: 400; margin-top: 4px; }
.row { display: flex; gap: 14px; flex-wrap: wrap; }
.row > .field { flex: 1 1 170px; }

/* ---------- buttons: modern shape, retro pixel shadow ---------- */
.btn {
  --b: var(--accent); --t: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 650 14px/1 var(--font); color: var(--t);
  background: var(--b); border: 2px solid var(--hard); border-radius: 10px; padding: 9px 16px; cursor: pointer;
  box-shadow: 3px 3px 0 var(--hard); transition: transform .08s, box-shadow .08s, filter .15s; white-space: nowrap;
}
.btn:hover { color: var(--t); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--hard); filter: brightness(1.04); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hard); }
.btn.blue { --b: var(--blue); }
.btn.green { --b: var(--green); }
.btn.red { --b: var(--red); }
.btn.gray { --b: var(--card); --t: var(--ink); }
.btn.ghost { --b: transparent; --t: var(--ink); border-color: transparent; box-shadow: none; }
.btn.ghost:hover { background: var(--bg-2); box-shadow: none; transform: none; }
.btn.sm { font-size: 12.5px; padding: 6px 11px; border-radius: 8px; box-shadow: 2px 2px 0 var(--hard); }
.btn.sm:hover { box-shadow: 3px 3px 0 var(--hard); }
.btn.ghost.sm, .btn.ghost.sm:hover { box-shadow: none; }
.btn.big { font-size: 16px; padding: 13px 22px; border-radius: 12px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--blue-ink); font: inherit; cursor: pointer; }
.linkbtn:hover { color: var(--accent-ink); }
form.inline { display: inline; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ---------- flash ---------- */
.flash { display: flex; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 18px; border-radius: 12px; font-weight: 600; border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); }
.flash::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.flash.ok { background: var(--green-soft); color: var(--green-ink); }
.flash.ok::before { background: var(--green); }
.flash.error { background: var(--red-soft); color: var(--red-ink); }
.flash.error::before { background: var(--red); }

/* ---------- small bits ---------- */
.kind { display: inline-block; font-family: var(--pixel); font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 6px; letter-spacing: .3px; vertical-align: 1px; text-transform: lowercase; }
.kind.sell { background: var(--green-soft); color: var(--green-ink); }
.kind.buy { background: var(--blue-soft); color: var(--blue-ink); }
.kind.sold { background: var(--bg-2); color: var(--ink-2); }
.kind.closed { background: var(--red-soft); color: var(--red-ink); }
.kind.exp { background: var(--gold-soft); color: var(--gold-ink); }
.kind.pend { background: var(--accent-soft); color: var(--accent-ink); }
.meso { white-space: nowrap; font-weight: 700; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.meso::before {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 5px; vertical-align: -1px; border-radius: 3px;
  background: linear-gradient(135deg, #fff2a8, var(--gold) 55%, #a87900); box-shadow: 1px 1px 0 #6b4f00;
}
.rep { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 0 6px; border-radius: 6px; vertical-align: 1px; font-variant-numeric: tabular-nums; }
.rep.pos { color: var(--green-ink); background: var(--green-soft); }
.rep.neg { color: var(--red-ink); background: var(--red-soft); }
.rep.zero { color: var(--ink-3); background: var(--bg-2); }
.ulink { font-weight: 650; color: var(--ink); }
.ulink:hover { color: var(--accent-ink); }
.ulink.admin { color: var(--violet); }
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); vertical-align: 1px; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 8px; background: var(--bg-2); border-radius: 6px; color: var(--ink-2); }
.statdiff { font-size: 12px; font-weight: 700; color: var(--green-ink); }
.pager { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; margin: 4px 0 20px; font-size: 13.5px; }
.pager b { margin-right: 6px; color: var(--ink-2); font-weight: 600; }
.pager a, .pager span { min-width: 34px; text-align: center; padding: 5px 10px; border-radius: 9px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); font-weight: 600; }
.pager a:hover { border-color: var(--ink); }
.pager span.cur { background: var(--ink); color: var(--card); border-color: var(--ink); }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.tabs a:not(.btn) { padding: 7px 14px; border-radius: 999px; font-weight: 650; font-size: 14px; color: var(--ink-2); background: var(--card); border: 1.5px solid var(--line); }
.tabs a:not(.btn):hover { border-color: var(--ink-3); color: var(--ink); }
.tabs a.on:not(.btn) { background: var(--ink); color: var(--card); border-color: var(--ink); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chips a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.chips a:hover { border-color: var(--ink-3); color: var(--ink); }
.chips a.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.chips a small { color: inherit; opacity: .7; font-size: 12px; }
.filters { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.filters .f { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.filters .f label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.filters input[type=text], .filters select { padding: 7px 10px; font-size: 13.5px; }
.filters input[type=text] { width: 96px; }
.filters input.q { width: 210px; }
.empty { padding: 34px 18px; text-align: center; color: var(--ink-3); }
.notice { background: var(--accent-soft); border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent); padding: 11px 14px; border-radius: 12px; margin-bottom: 18px; font-size: 13.5px; color: var(--ink); }
blockquote { margin: 8px 0; padding: 8px 12px; background: var(--bg-2); border-left: 4px solid var(--blue); border-radius: 0 10px 10px 0; }
blockquote cite { display: block; font-style: normal; font-weight: 700; font-size: 12.5px; color: var(--ink-3); margin-bottom: 3px; }
details.spoiler { background: var(--bg-2); border: 1.5px dashed var(--line-2); padding: 6px 10px; border-radius: 10px; }
a.ilink { font-weight: 600; }
a.ilink img { width: 20px; height: 20px; vertical-align: -5px; image-rendering: pixelated; margin-right: 3px; }
.bar { height: 8px; background: var(--bg-2); border-radius: 3px; overflow: hidden; min-width: 60px; }
.bar > i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--accent) 0 6px, var(--accent-2) 6px 8px); }
.crumbs { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; }
.crumbs a { color: var(--ink-2); font-weight: 600; }

/* ---------- MapleStory-style item tooltip (mirrors the in-game Classic World tooltip) ---------- */
.mstip {
  background: linear-gradient(180deg, rgba(58, 68, 108, .96), rgba(40, 48, 82, .96)); color: #fff;
  border: 1px solid #c3cae0; outline: 1px solid #1a2038; border-radius: 6px; padding: 10px 12px 12px; min-width: 260px; max-width: 320px;
  font: 13px/1.5 var(--font); box-shadow: 4px 4px 0 var(--hard), var(--shadow-lg); flex: none;
}
.mstip .nm { display: flex; align-items: baseline; gap: 6px; font-weight: 700; font-size: 16px; line-height: 1.25; color: #fff; margin-bottom: 8px; }
.mstip .nm::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #6cc4ff; box-shadow: 0 0 4px #6cc4ff; transform: translateY(-2px); }
.mstip .nm.scrolled { color: #ffb341; }
.mstip .top { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.mstip .top .ic {
  width: 84px; height: 84px; flex: none; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #e9edf4, #c3cad8); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.mstip .top .ic img { image-rendering: pixelated; width: 64px; height: 64px; object-fit: contain; }
.mstip .req { font: 600 11.5px/1.5 var(--font); letter-spacing: .3px; color: #c4cbe0; font-variant-numeric: tabular-nums; }
.mstip.eq .req { color: #7d859f; }
.mstip.eq .req .on { color: #fff; }
.mstip .jobs { display: flex; gap: 2px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.55); }
.mstip .jobs span {
  flex: 1 1 auto; text-align: center; font: 500 10px/1 var(--pixel); letter-spacing: .2px; padding: 3px 2px;
  color: #8c92a6; background: rgba(10, 14, 30, .55); border: 1px solid #5d6580; border-radius: 2px;
}
.mstip .jobs span.ok { color: #ff9a2e; }
.mstip .line { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mstip.eq .line { position: relative; padding-left: 12px; }
.mstip.eq .line::before { content: ""; position: absolute; left: 1px; top: .62em; width: 5px; height: 5px; background: #ff8a1c; transform: rotate(45deg); }
.mstip .line b { font-weight: 700; }
.mstip .line .plus { color: #8ff07a; font-weight: 700; }
.mstip .line .minus { color: #ff8585; font-weight: 700; }
.mstip .desc { margin-top: 8px; color: #fff; white-space: pre-line; }
.mstip .meta { margin-top: 6px; color: #ffaa1c; }
.mstip .src { margin-top: 10px; padding-top: 6px; border-top: 1px dashed rgba(255,255,255,.25); font-size: 11.5px; color: rgba(255,255,255,.55); }
.mstip .src .plus { color: #8ff07a; font-weight: 700; }

/* ---------- home rail ---------- */
.news-item { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.news-item:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.news-item h3 { margin-bottom: 3px; font-size: 17px; }
.news-item h3 a { color: var(--ink); }
.news-item h3 a:hover { color: var(--accent-ink); }
.join h3 { font-size: 18px; margin-bottom: 6px; }
.join p { font-size: 13.5px; color: var(--ink-2); }
.join .actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* compact list in the rail (recent sales) */
ul.mini { list-style: none; margin: 0; padding: 6px 0; }
ul.mini a { display: flex; align-items: center; gap: 10px; padding: 7px 16px; color: var(--ink); transition: background .1s; }
ul.mini a:hover { background: var(--card-2); color: var(--ink); }
ul.mini .mi-ic { width: 34px; height: 34px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line); }
ul.mini .mi-ic img.ico { width: 26px; height: 26px; }
ul.mini .mi-ic svg { width: 16px; height: 16px; color: var(--ink-3); }
ul.mini .mi-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
ul.mini .mi-t b { font-weight: 650; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
ul.mini .mi-t small { font-size: 11.5px; }
ul.mini .meso { font-size: 13.5px; }
.live { display: inline-block; color: #fff; background: var(--green); padding: 1px 7px; border-radius: 5px; font-family: var(--pixel); font-size: 12px; letter-spacing: .4px; }
/* Grand Launch countdown (home rail, hubcw.js initCountdown) */
.countdown { margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--line); }
.cd-cap { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.cd-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.cd-tile { display: flex; flex-direction: column; align-items: center; padding: 8px 0 6px; border-radius: var(--radius-sm); background: var(--green-soft); box-shadow: 2px 2px 0 var(--hard); }
.cd-tile b { font-family: var(--pixel); font-weight: 600; font-size: 24px; line-height: 1.1; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.cd-tile small { font-size: 11px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; }
.countdown.done .cd-tiles { display: block; }
.cd-done { font-family: var(--pixel); font-size: 17px; font-weight: 600; color: var(--green-ink); }
.daily { display: flex; gap: 14px; align-items: center; }
.daily .ic { width: 64px; height: 64px; border-radius: 14px; background: var(--card-2); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; }

/* ---------- forum ---------- */
.post { display: grid; grid-template-columns: 170px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 16px; background: var(--card); box-shadow: var(--shadow); overflow: hidden; }
.post .who { background: var(--card-2); border-right: 1px solid var(--line); padding: 16px 12px; text-align: center; font-size: 12.5px; }
.post .who img { max-height: 72px; image-rendering: pixelated; margin-bottom: 6px; }
.post .body { padding: 14px 18px; display: flex; flex-direction: column; min-width: 0; }
.post .body .meta { font-size: 12.5px; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.post .body .text { flex: 1; overflow-wrap: anywhere; }
.post .sig { margin-top: 14px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.5px; color: var(--ink-3); max-height: 90px; overflow: hidden; }
.bbbar { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 6px; }
.bbbar button { font: 600 12.5px var(--font); padding: 4px 9px; border: 1.5px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: 7px; cursor: pointer; }
.bbbar button:hover { border-color: var(--ink); }

/* ---------- autocomplete / listing form ---------- */
.ac { position: relative; }
.ac-list { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% - 14px); background: var(--card); border: 1px solid var(--line); border-radius: 12px; max-height: 340px; overflow-y: auto; box-shadow: var(--shadow-lg); padding: 4px; }
.ac-list div { padding: 7px 9px; cursor: pointer; display: flex; gap: 9px; align-items: center; border-radius: 8px; }
.ac-list div.on, .ac-list div:hover { background: var(--accent-soft); }
.ac-list img { width: 26px; height: 26px; image-rendering: pixelated; object-fit: contain; }
.picked { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: var(--accent-soft); border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 12px; margin-top: 4px; }
.statgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.statgrid .field { margin: 0; }
.statgrid input { width: 100%; }
.statgrid label { font-size: 12px; }
#listing-form > .box-h:not(:first-of-type) { border-top: 1px solid var(--line); }

/* ---------- database ---------- */
.mobcard { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.mobcard .pic {
  min-width: 150px; min-height: 120px; display: flex; align-items: flex-end; justify-content: center; padding: 12px 12px 22px; position: relative;
  background: linear-gradient(var(--sky-1), var(--sky-2)); border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); border-radius: 14px; overflow: hidden;
}
.mobcard .pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(var(--grass-1) 0 6px, var(--dirt) 6px); border-top: 2px solid var(--hard); }
.mobcard .pic img { position: relative; z-index: 1; }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.cats a { display: block; padding: 14px 16px; border: 1.5px solid var(--line); background: var(--card-2); border-radius: 12px; font-weight: 700; color: var(--ink); font-family: var(--pixel); font-size: 15.5px; transition: transform .1s, box-shadow .1s, border-color .1s; }
.cats a:hover { border-color: var(--hard); box-shadow: 3px 3px 0 var(--hard); transform: translate(-1px, -1px); color: var(--ink); }
.cats a small { display: block; font-family: var(--font); font-weight: 500; font-size: 12.5px; margin-top: 2px; }
.skill { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.skill:last-child { border-bottom: 0; }
.skill img { width: 36px; height: 36px; image-rendering: pixelated; flex: none; border-radius: 8px; background: var(--card-2); padding: 2px; border: 1px solid var(--line); }
.skill details { font-size: 13px; margin-top: 6px; }
.skill summary { cursor: pointer; color: var(--blue-ink); font-weight: 600; }
.skill ol { margin: 6px 0; padding-left: 24px; max-height: 280px; overflow-y: auto; color: var(--ink-2); }
/* ---------- Price Check quote (2026-10-26, restyled 2026-10-27, chart redrawn 2026-10-29): header, chart (drawn by
   hubcw.js initQuote: each sale a dot, the typical price line and band), key stats, order book, trade tape. --qc is
   the chart's colour (HubCW orange); it tints the card, the active range tab, the chart and the range bar. ---------- */
.quote { --qc: var(--accent); --qc-ink: var(--accent-ink); --qc-soft: var(--accent-soft);
  background: var(--card) linear-gradient(180deg, color-mix(in srgb, var(--qc) 5%, var(--card)), var(--card) 340px) no-repeat; }
.quote .box-b { padding: 24px 26px 22px; }
.q-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; }
.q-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.q-icon { flex: none; width: 60px; height: 60px; display: grid; place-items: center; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(28, 34, 64, .05), 0 8px 18px -8px rgba(28, 34, 64, .22); }
.q-icon img { max-width: 44px; max-height: 44px; image-rendering: pixelated; }
.q-name { margin: 0; font: 800 26px/1.15 var(--font); letter-spacing: -.7px; color: var(--ink); }
.q-sub { margin-top: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-3); }
.q-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.q-quote { margin-top: 24px; }
.q-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.q-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; margin-top: 6px; }
.q-price { font: 800 50px/1 var(--font); letter-spacing: -2.2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.q-unit { margin-left: -6px; font-size: 16px; font-weight: 700; color: var(--ink-3); }
/* cheaper is cool blue, pricier warm orange: neither is good or bad, it depends if you're buying or selling */
.q-chg { align-self: center; padding: 6px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; cursor: help; }
.q-chg.cheaper { color: var(--blue-ink); background: var(--blue-soft); }
.q-chg.pricier { color: var(--accent-ink); background: var(--accent-soft); }
.q-chg.same { color: var(--ink-2); background: var(--bg-2); }
.q-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; margin: 24px 0 10px; }
.q-seg { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent); }
.q-seg button { padding: 7px 14px; border: 0; border-radius: 999px; background: none; font: 700 12.5px/1 var(--font); letter-spacing: .02em; color: var(--ink-3); cursor: pointer; transition: color .15s, background-color .15s, box-shadow .15s; }
.q-seg button:hover:not(:disabled) { color: var(--ink); }
.q-seg button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgba(28, 34, 64, .10); }
[data-q-range] button[aria-pressed="true"] { background: var(--qc-soft); color: var(--qc-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--qc) 30%, transparent); }
.q-seg button:disabled { opacity: .4; cursor: default; }
.q-chart { --q-dot-a: .5; --q-band-a: .13; position: relative; height: 320px; cursor: crosshair; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
/* on the dark card faint orange turns brown: stronger dots and band */
:root[data-theme="dark"] .q-chart { --q-dot-a: .8; --q-band-a: .17; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .q-chart { --q-dot-a: .8; --q-band-a: .17; } }
.q-svg { display: block; overflow: visible; }
.q-grid { stroke: var(--line); stroke-dasharray: 2 4; }
.q-grid.q-floor { stroke: var(--line-2); stroke-dasharray: none; }
.q-ax { font: 500 11px var(--font); fill: var(--ink-3); font-variant-numeric: tabular-nums; }
.q-band { fill: var(--qc); opacity: var(--q-band-a); }
.q-dot { fill: var(--qc); fill-opacity: var(--q-dot-a); stroke: var(--card); stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: opacity .15s, fill-opacity .15s; }
/* the rare far-off sales, pinned to the top or bottom edge */
.q-dot.off { fill: var(--card); fill-opacity: 1; stroke: var(--qc); stroke-width: 1.5; }
.q-halo { fill: none; stroke: var(--card); stroke-width: 7; stroke-linejoin: round; stroke-linecap: round; opacity: .9; }
.q-ln { fill: none; stroke: var(--qc); stroke-width: 2.75; stroke-linejoin: round; stroke-linecap: round; }
.q-end { fill: var(--qc); stroke: var(--card); stroke-width: 2.5; }
.q-chart.hover .q-dot { opacity: .3; }
.q-chart.hover .q-dot.on { opacity: 1; fill-opacity: .85; }
.q-hov { display: none; pointer-events: none; }
.q-chart.hover .q-hov { display: inline; }
.q-hx { stroke: var(--ink-3); stroke-dasharray: 3 4; opacity: .7; }
.q-mk { fill: var(--qc); stroke: var(--card); stroke-width: 3; }
.q-ring { fill: none; stroke: var(--qc); stroke-width: 2; }
.q-tip { position: absolute; top: 0; left: 0; z-index: 2; padding: 9px 13px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 12px 28px -12px rgba(28, 34, 64, .35); white-space: nowrap; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .12s; }
.q-chart.hover .q-tip { opacity: 1; visibility: visible; }
.q-tip small { display: block; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.q-tip b { display: block; margin-top: 3px; font-size: 21px; font-weight: 800; letter-spacing: -.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.q-tip b span { font-size: 12px; font-weight: 700; letter-spacing: 0; color: var(--ink-3); }
.q-tip em, .q-tip p { display: flex; align-items: center; gap: 7px; font-size: 12px; font-style: normal; font-weight: 600; color: var(--ink-2); }
.q-tip p { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.q-tip p[hidden] { display: none; }
.q-anim .q-ln, .q-anim .q-halo { stroke-dasharray: 1; stroke-dashoffset: 1; animation: q-draw 1s cubic-bezier(.3, .7, .2, 1) .15s forwards; }
.q-anim .q-band { animation: q-fade .8s ease-out .2s backwards; }
.q-anim .q-end { animation: q-fade .4s ease-out 1s backwards; }
.q-anim .q-dot { animation: q-pop .45s cubic-bezier(.2, .8, .3, 1.3) backwards; }
@keyframes q-draw { to { stroke-dashoffset: 0; } }
@keyframes q-fade { from { opacity: 0; } }
@keyframes q-pop { from { opacity: 0; transform: scale(.2); } }
.q-key { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.q-key span { display: inline-flex; align-items: center; gap: 7px; cursor: help; }
.quote.q-few .q-k-bandi { display: none; }
.q-key i, .q-tip i { flex: none; }
.q-k-dot { width: 8px; height: 8px; border-radius: 50%; background: color-mix(in srgb, var(--qc) 55%, transparent); }
.q-k-ln { width: 16px; height: 3px; border-radius: 2px; background: var(--qc); }
.q-k-band { width: 14px; height: 10px; border-radius: 3px; background: color-mix(in srgb, var(--qc) 18%, transparent); }
/* key stats: a hairline grid of tiles (the gaps show the --line background) */
.q-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 22px 0 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
.q-stats > div { min-width: 0; padding: 13px 16px 14px; background: var(--card); }
.q-stats dt { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.q-stats dd { margin: 6px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.q-stats dd small { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--ink-3); }
/* 90-day low to high: the typical range shaded, a dot at the price now */
.q-rng { position: relative; display: block; height: 4px; margin: 10px 5px 2px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 9%, transparent); }
.q-rng b { position: absolute; top: 0; bottom: 0; left: var(--a); width: max(4px, calc(var(--b) - var(--a))); border-radius: 99px; background: var(--qc); opacity: .4; }
.q-rng i { position: absolute; top: 50%; left: var(--p); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--qc); box-shadow: 0 0 0 2.5px var(--card); }
.q-foot { margin: 16px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-3); }
.q-foot b { color: var(--ink-2); }
.q-row { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.main > .q-row { margin-bottom: 20px; }
.q-row > .box { margin: 0; }
/* Buy or sell now: what's for sale (cheapest first) next to what buyers want (best offer first) */
.book { display: grid; grid-template-columns: 1fr 1fr; }
.book-side + .book-side { border-left: 1px solid var(--line); }
.book-h { display: flex; align-items: baseline; gap: 8px; padding: 11px 16px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; font-weight: 800; color: var(--ink); }
.book-h small { font-size: 12px; font-weight: 600; color: var(--ink-3); }
.book-r { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 16px; border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent); font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; transition: background-color .12s; }
.book-r:last-child { border-bottom: 0; }
.book-r:hover { color: var(--ink); background: var(--card-2); }
.book-r .q { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.book-fm { padding: 2px 7px; border-radius: 6px; background: var(--bg-2); font-size: 11px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.book-empty { margin: 0; padding: 14px 16px; font-size: 13px; color: var(--ink-3); }
/* Day by day: each day's cheapest to dearest sale on one scale, the dot at the median (like a weather app's highs and lows) */
.d-rng-h { width: 46%; }
.d-rng { display: flex; align-items: center; gap: 10px; }
.d-rng small { flex: none; width: 46px; font-size: 12px; font-weight: 600; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.d-rng small:first-child { text-align: right; }
.d-bar { position: relative; flex: 1; min-width: 60px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 7%, transparent); }
.d-bar b { position: absolute; top: 0; bottom: 0; left: var(--a); width: max(6px, calc(var(--b) - var(--a))); border-radius: 99px; background: color-mix(in srgb, var(--accent) 40%, transparent); }
.d-bar i { position: absolute; top: 50%; left: var(--m); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--card); }
@media (max-width: 900px) {
  .q-row { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .quote .box-b { padding: 18px 16px 16px; }
  .q-icon { width: 52px; height: 52px; border-radius: 15px; }
  .q-icon img { max-width: 40px; max-height: 40px; }
  .q-name { font-size: 21px; letter-spacing: -.5px; }
  .q-quote { margin-top: 18px; }
  .q-price { font-size: 40px; letter-spacing: -1.6px; }
  .q-bar { margin-top: 18px; }
  .q-seg button { padding: 7px 11px; }
  .q-chart { height: 240px; }
  .q-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-stats > div { padding: 11px 13px 12px; }
  .q-stats dd { font-size: 16px; }
  .q-acts { width: 100%; }
  .q-acts .btn { flex: 1; }
  .book-r, .book-h { padding-left: 12px; padding-right: 12px; }
  table.grid.q-days th, table.grid.q-days td { padding-left: 8px; padding-right: 8px; }
  .d-rng small { display: none; }
  .d-bar { min-width: 40px; }
}
@media (max-width: 560px) {
  .book { grid-template-columns: 1fr; }
  .book-side + .book-side { border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .q-anim .q-ln, .q-anim .q-halo, .q-anim .q-band, .q-anim .q-end, .q-anim .q-dot { animation: none; stroke-dashoffset: 0; }
}
.bignum { font-family: var(--pixel); font-size: 22px; font-weight: 600; color: var(--ink); line-height: 1.2; }
.bignum .meso { font-family: var(--font); font-size: 19px; }
.statbox { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.statbox > div { border: 1px solid var(--line); background: var(--card-2); border-radius: 12px; padding: 10px 14px; }
.statbox small { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; margin-bottom: 2px; }
.sim-log { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 12.5px; background: var(--tip); color: #cfe3ff; padding: 10px 12px; height: 170px; overflow-y: auto; border-radius: 12px; border: 2px solid var(--hard); }
.sim-log .s { color: #8ff07a; }
.sim-log .f { color: #ff8585; }

/* ---------- footer ---------- */
.footer { position: relative; margin-top: 56px; background: var(--card-2); border-top: 0; }
.footer .ground { position: absolute; left: 0; right: 0; top: -22px; height: 22px; background: var(--dirt);
  background-image: linear-gradient(var(--grass-1) 0 7px, var(--grass-2) 7px 10px, transparent 10px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.07) 0 8px, transparent 8px 16px);
  border-bottom: 3px solid var(--hard); }
.footer .ground::before { content: ""; position: absolute; left: 0; right: 0; top: -5px; height: 5px;
  background: repeating-linear-gradient(90deg, var(--grass-1) 0 6px, transparent 6px 12px, var(--grass-1) 12px 15px, transparent 15px 22px); }
.footer .walker { position: absolute; top: -60px; left: -80px; animation: walk 70s linear infinite; image-rendering: pixelated; }
.footer .walker img { transform: scaleX(-1); max-height: 40px; display: block; }
.footer > .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 48px; padding-bottom: 44px; font-size: 14px; color: var(--ink-2); }
.footer .f-about p { margin: 12px 0 18px; max-width: 300px; line-height: 1.6; }
.footer .f-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.footer .f-about .f-contact { margin: 18px 0 0; font-size: 13px; color: var(--ink-3); }
.footer .f-contact a { color: var(--ink-2); font-weight: 600; }
.footer .f-contact a:hover { color: var(--accent-ink); }
.footer h4 { display: flex; align-items: center; gap: 8px; font-family: var(--pixel); font-weight: 600; font-size: 15px; margin: 2px 0 16px; color: var(--ink); }
.footer h4::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--accent); box-shadow: 2px 2px 0 var(--hard); flex: none; }
.footer .f-db h4::before { background: var(--blue); }
.footer .f-help h4::before { background: var(--green); }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer nav a { color: var(--ink-2); font-weight: 500; display: inline-flex; align-items: center; transition: color .12s; }
.footer nav a::before { content: "\25B8"; color: var(--accent); font-size: 11px; width: 0; overflow: hidden; opacity: 0; transition: width .12s, opacity .12s, margin .12s; }
.footer nav a:hover { color: var(--ink); }
.footer nav a:hover::before { width: 10px; margin-right: 4px; opacity: 1; }
.footer .fine { border-top: 1px solid var(--line); background: var(--bg-2); }
.footer .fine .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 16px; padding-bottom: 16px; font-size: 12.5px; color: var(--ink-3); }
.footer .fine p { margin: 0; line-height: 1.5; }
.footer .f-legal { flex: none; display: flex; gap: 18px; }
.footer .f-legal a { color: var(--ink-2); font-weight: 600; }
.footer .f-legal a::before { display: none; }
.footer .f-legal a:hover { color: var(--accent-ink); }

/* ---------- responsive ---------- */
@media (max-width: 1020px) {
  #body.three, #body.rail { grid-template-columns: minmax(0, 1fr); }
  .footer > .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
  .footer > .wrap > :first-child { grid-column: 1 / -1; }
  .hero { flex-direction: column; align-items: stretch; gap: 22px; }
  .hero-stats { align-self: flex-start; }
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .wrap { padding: 0 14px; }
  .topbar .wrap { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 6px; gap: 6px 10px; }
  .mainnav { order: 3; width: 100%; margin: 0 -6px; }
  .usermenu .un { display: none; }
  .home-top { padding-top: 14px; }
  .hero { padding: 22px 18px 54px; border-radius: 18px; gap: 18px; }
  .hero .eyebrow { font-size: 11.5px; margin-bottom: 10px; }
  .hero .lead { font-size: 14.5px; margin-bottom: 14px; }
  .hero-search { padding-left: 38px; }
  .hero-search > svg { left: 13px; }
  .hero-search .btn { padding: 10px 14px; }
  .hero-stats { align-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero-stats .stat { padding: 10px 4px; }
  .hero-stats .stat b { font-size: 19px; }
  .hero-stats .stat span { font-size: 10px; letter-spacing: .03em; }
  .features { gap: 10px; margin-top: 12px; }
  .feature { padding: 12px; gap: 10px; }
  .feature .fi { width: 36px; height: 36px; border-radius: 10px; }
  /* one scrolling row of chips instead of three wrapped rows */
  .hero .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -18px; margin-right: -18px; padding: 0 18px 2px; }
  .hero .chips > span { display: none; }
  .hero .chips::-webkit-scrollbar { display: none; }
  .hero .chips a { flex: none; }
  .cols2 { grid-template-columns: 1fr; }
  .post { grid-template-columns: 1fr; }
  .post .who { border-right: 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 14px; }
  .post .who img { max-height: 40px; margin: 0; }
  table.grid .hide-m { display: none; }
  table.grid td, table.grid th { padding-left: 10px; padding-right: 10px; }
  .filters input.q { width: 100%; }
  .footer > .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding-top: 36px; padding-bottom: 32px; }
  .footer > .wrap > :first-child { grid-column: 1 / -1; }
  .footer .f-about p { max-width: none; }
  .footer .fine .wrap { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
  .mstip { max-width: 100%; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .walker, .footer .walker, .hero .cloud, .hero .eyebrow i { animation: none; }
  .hero .walker { left: 12%; } .hero .walker.w2 { left: 45%; } .hero .walker.w3 { display: none; }
  .footer .walker { left: 8%; }
}

/* ---------- fixes: readable numbers, layering, filter widths ---------- */
/* Pixel font for labels only; numbers & user-written titles use Inter so 5/S and 8/B never get confused */
.bignum, .mstip .nm, .t-user { font-family: var(--font); font-weight: 800; letter-spacing: -.2px; }
.mstip .nm { font-size: 15px; font-weight: 700; }
h1.t-user { font-size: 26px; }
.searchbox input[type=search] { padding-left: 34px; }
.filters span input[type=text] { width: 72px !important; }

/* ---------- listing screenshots ---------- */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.shot { position: relative; height: 136px; border-radius: 12px; overflow: hidden; border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); background: var(--tip); }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot:first-child::after { content: "cover"; position: absolute; left: 8px; bottom: 8px; font-family: var(--pixel); font-size: 11.5px; padding: 1px 7px; border-radius: 5px; background: var(--accent); color: #fff; }
.shot-x { position: absolute; top: 6px; right: 6px; width: 28px; height: 28px; border-radius: 8px; border: 2px solid var(--hard); background: var(--card); color: var(--ink); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: 2px 2px 0 var(--hard); }
.shot-x:hover { background: var(--red); color: #fff; }
.shot.loading img { opacity: .45; filter: blur(1px); }
.shot.loading::before { content: ""; position: absolute; inset: 0; margin: auto; width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; animation: spin .8s linear infinite; z-index: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.dropzone { height: 136px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; padding: 12px;
  border: 2px dashed var(--line-2); border-radius: 12px; background: var(--card-2); color: var(--ink-2); cursor: pointer; transition: border-color .15s, background .15s; font-weight: 500; }
.dropzone svg { width: 30px; height: 30px; color: var(--accent); margin-bottom: 2px; }
.dropzone b { font-family: var(--pixel); font-weight: 600; font-size: 15px; color: var(--ink); }
.dropzone small { font-size: 12px; line-height: 1.5; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.full { display: none; }
kbd { font: 600 11px var(--font); padding: 1px 5px; border: 1.5px solid var(--line-2); border-bottom-width: 3px; border-radius: 5px; background: var(--card); color: var(--ink); }
#shot-msg.err { color: var(--red-ink); font-weight: 600; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 18px; }
.gal { display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); background: var(--tip); transition: transform .1s, box-shadow .1s; }
.gal:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--hard); }
.gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot-tag { display: inline-flex; align-items: center; gap: 3px; vertical-align: 1px; }
.shot-tag svg { width: 13px; height: 13px; }
dialog.lightbox { padding: 0; border: 0; background: transparent; max-width: 96vw; max-height: 94vh; overflow: visible; }
dialog.lightbox::backdrop { background: rgba(8, 11, 24, .86); }
dialog.lightbox img { display: block; max-width: 96vw; max-height: 86vh; border-radius: 12px; border: 2px solid var(--hard); box-shadow: 6px 6px 0 rgba(0,0,0,.5); image-rendering: auto; background: var(--tip); }
dialog.lightbox .lb-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; color: #fff; font-weight: 600; }
dialog.lightbox .lb-bar .btn { --b: var(--card); --t: var(--ink); }

/* ---------- screenshot auto-detect ---------- */
.detect { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); background: var(--green-soft); color: var(--ink); font-size: 13.5px; }
.detect.warn { background: var(--gold-soft); }
.detect .hd { font-family: var(--pixel); font-weight: 600; font-size: 15px; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.detect .hd::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--green); box-shadow: 1px 1px 0 var(--hard); }
.detect.warn .hd::before { background: var(--gold); }
.detect .chips { margin: 6px 0 4px; gap: 6px; }
.detect .chips span { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 7px; background: var(--card); border: 1.5px solid var(--line-2); font-variant-numeric: tabular-nums; }
.detect .btn { margin-top: 6px; }
.statgrid input.autofilled { border-color: var(--green); box-shadow: 0 0 0 4px var(--green-soft); transition: box-shadow 1.5s; }
.shot.reading::after { content: "reading stats…"; position: absolute; left: 8px; bottom: 8px; font-family: var(--pixel); font-size: 11.5px; padding: 1px 7px; border-radius: 5px; background: var(--blue); color: #fff; z-index: 2; }

/* ---------- learned Classic stats ---------- */
.tag.cw { background: var(--green-soft); color: var(--green-ink); font-family: var(--pixel); font-size: 11px; }
/* counts in card headers must stay readable (pixel digits 2/8, 5/S look alike) */
.box-h small { font-family: var(--font); font-weight: 600; font-size: 12.5px; color: var(--ink-3); }

/* ---------- easier listing form ---------- */
.sell-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.sell-head h1 { margin: 0; }
.sellform .when-buy { display: none; }
.sellform.is-buy .when-sell { display: none; }
.sellform.is-buy .when-buy { display: inline; }
.sellform .step { margin-bottom: 20px; }
.stepno { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 9px; border-radius: 7px; background: var(--ink); color: var(--card); font-style: normal; font-family: var(--font); font-weight: 800; font-size: 13px; }
.sellform .box-h::before { display: none; }
.seg { display: inline-flex; gap: 2px; padding: 4px; background: var(--bg-2); border: 1.5px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 8px 16px; border-radius: 9px; font-weight: 650; font-size: 14px; color: var(--ink-2); transition: background .12s, color .12s; }
.seg label:hover span { color: var(--ink); }
.seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: 2px 2px 0 var(--hard); outline: 1.5px solid var(--hard); }
.seg input:focus-visible + span { outline: 3px solid var(--accent-2); }
.seg-sm span { padding: 6px 12px; font-size: 13px; }
/* screenshot drop zone: big call-to-action until something is added */
.shots .dz-big { display: none; }
.shots.empty { grid-template-columns: 1fr; }
.shots.empty .dropzone { height: 200px; gap: 8px; border-width: 2.5px; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.shots.empty .dropzone svg { width: 42px; height: 42px; }
.shots.empty .dropzone b.dz-big { display: block; font-size: 20px; }
.shots.empty .dropzone small.dz-big { display: block; font-size: 13.5px; }
.shots.empty .dz-small { display: none; }
.or-search { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.or-search #item-search { width: 100%; }
.or-search .field { margin-bottom: 0; }
#cat-field { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
#cat-field select { max-width: 260px; }
.statgrid .extra { display: none; }
.statgrid.all .extra { display: block; }
input.bigin { width: 100%; font-size: 21px; font-weight: 700; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.pricetips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.pricetips > small { width: 100%; }
.pricetips .tip { display: grid; text-align: left; gap: 0; padding: 7px 12px; border-radius: 10px; border: 1.5px solid var(--line-2); background: var(--card); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .1s, transform .1s, box-shadow .1s; }
.pricetips .tip:hover { border-color: var(--hard); box-shadow: 2px 2px 0 var(--hard); transform: translate(-1px, -1px); }
.pricetips .tip span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); font-weight: 700; }
.pricetips .tip b { font-size: 16px; color: var(--gold-ink); font-variant-numeric: tabular-nums; }
.pricetips .tip small { font-size: 11.5px; }
details.more { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 12px; }
details.more summary { cursor: pointer; font-weight: 650; color: var(--ink); margin-bottom: 4px; list-style-position: inside; }
details.more summary small { font-weight: 500; margin-left: 6px; }
details.more[open] summary { margin-bottom: 14px; }
details.more .row .field input { width: 100%; }
.sell-submit { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 10px;
  background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); }
.sell-submit small { color: var(--ink-3); }
/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 100; transform: translate(-50%, 160%); opacity: 0; transition: transform .25s, opacity .25s;
  background: var(--ink); color: var(--card); padding: 12px 18px; border-radius: 12px; font-weight: 600; box-shadow: 4px 4px 0 var(--hard), var(--shadow-lg); max-width: calc(100vw - 32px); }
.toast.show { transform: translate(-50%, 0); opacity: 1; }
.toast.err { background: var(--red); color: #fff; }
/* paste-anywhere hint */
.paste-hint { margin: 14px 0 0; font-size: 14px; opacity: .9; position: relative; z-index: 2; }
.paste-hint kbd { color: #0f1733; }
.contact { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.contact .who { font-size: 13px; color: var(--ink-2); margin-right: auto; }
.contact .who b { color: var(--ink); font-size: 15px; }
.pend-note { margin: 10px 0 0; }
.trade-note { margin: 10px 0 0; }
.trade-note .actions { margin-top: 8px; }
.trade-picks { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trade-picks > span { font-size: 12px; color: var(--ink-3); }
.trade-picks .btn small { font-weight: 500; opacity: .7; }
.ctrades { color: var(--green-ink); font-weight: 650; white-space: nowrap; }
.pstat .ctrades { font-size: 11.5px; }
.detect + .hint, .shots + .detect[hidden] + .hint { margin-top: 10px; }

/* touch devices have no Ctrl+V / snipping tool: show tap wording instead */
.touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .kb-only { display: none !important; }
  .touch-only { display: inline; }
}
@media (max-width: 760px) {
  .sell-submit { bottom: 8px; padding: 10px; gap: 8px; }
  .sell-submit .btn { flex: 1; }
  .sell-submit small { display: none; }
  .shots.empty .dropzone { height: 170px; }
  .sell-head h1 { font-size: 24px; }
}

/* "Where to find you": CC (channel) + RM (FM room) */
.ccrm { display: flex; align-items: center; gap: 8px; }
.ccrm span { font-family: var(--pixel); font-weight: 600; color: var(--ink-2); }
.ccrm input { width: 76px; text-align: center; font-weight: 700; }

/* game text (quest/NPC dialogue markup, see GameData::rich) */
.gt-b { color: var(--blue-ink); font-weight: 600; }
.gt-r { color: var(--red-ink); font-weight: 600; }
.gt-g { color: var(--green-ink); font-weight: 600; }
.gt-d { color: #8b5cf6; font-weight: 600; }
.gt-c { color: #d9822b; font-weight: 600; }
.gt-e { font-weight: 700; }
img.gi { height: 22px; vertical-align: middle; image-rendering: pixelated; }
.speech { margin-top: 8px; display: grid; gap: 6px; }
.speech p { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--blue-soft); color: var(--ink); font-size: 13.5px; }
.speech hr { border: 0; border-top: 1px dashed var(--ink-3); margin: 4px 0; }

/* map pictures (rendered from the client by tools/cwdata/render_maps.py) */
.mapgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 14px; }
.mapcard { display: flex; flex-direction: column; border: 1.5px solid var(--line); background: var(--card-2); border-radius: 12px; overflow: hidden; color: var(--ink); transition: transform .1s, box-shadow .1s, border-color .1s; }
.mapcard:hover { border-color: var(--hard); box-shadow: 3px 3px 0 var(--hard); transform: translate(-1px, -1px); color: var(--ink); }
.mapcard .mapshot { display: block; aspect-ratio: 16 / 9; background: linear-gradient(var(--sky-1), var(--sky-2)); }
.mapcard .mapshot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mapcard .nm { padding: 8px 10px 2px; font-family: var(--pixel); font-weight: 600; font-size: 14.5px; }
.mapcard .meta { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 2px 10px 9px; color: var(--ink-3); }
.mapcard .mobs { display: flex; gap: 4px; align-items: flex-end; height: 30px; }
.mapcard .mobs img { max-height: 30px; max-width: 40px; object-fit: contain; image-rendering: pixelated; }
.mapview { background: #000; border-top: 1px solid var(--line); overflow: hidden; }
.mapview img { display: block; width: 100%; height: auto; }
.mapview.tall { display: flex; justify-content: center; max-height: 80vh; overflow-y: auto; }
.mapview.tall img { width: auto; max-width: 100%; height: auto; }

/* world map (Map/WorldMap): picture + markers positioned in % of the picture */
.worldmap { background: #bfe3f6; border-top: 1px solid var(--line); padding: 10px; }
.wm-inner { position: relative; margin: 0 auto; }
.wm-inner > img { display: block; width: 100%; height: auto; border-radius: 10px; }
.wspot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3); background: var(--green); z-index: 1; transition: transform .1s; }
.wspot.t0 { background: var(--accent); width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.wspot.t2 { background: var(--violet); width: 18px; height: 18px; margin: -9px 0 0 -9px; }
.wspot.off { background: #9aa0b4; }
.wspot > span { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; background: var(--tip); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; pointer-events: none; }
.wspot:hover, .wspot:focus-visible { transform: scale(1.3); z-index: 3; }
.wspot:hover > span, .wspot:focus-visible > span, .wspot.here > span { display: block; }
.wspot.here { z-index: 4; animation: wpulse 1.4s ease-in-out infinite; }
@keyframes wpulse { 0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 0 rgba(255, 122, 26, .7); } 50% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 12px rgba(255, 122, 26, 0); } }
@media (prefers-reduced-motion: reduce) { .wspot.here { animation: none; } }
.wm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: -1px; background: var(--green); }
.wm-legend i:first-child { margin-left: 0; }
.wm-legend i.t0 { background: var(--accent); } .wm-legend i.t2 { background: var(--violet); } .wm-legend i.off { background: #9aa0b4; }
tr.hl td { background: var(--accent-soft); }

/* ---------- item alerts ---------- */
.alertbox { margin-top: 12px; padding: 10px 12px; border: 1.5px dashed var(--line-2); border-radius: 12px; background: var(--card-2); font-size: 14px; }
.alertbox-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.alertbox-h svg { width: 16px; height: 16px; color: var(--accent-ink); flex: none; }
.alert-on { margin-top: 6px; }
.alert-on .tag.on { background: var(--green-soft); color: var(--green); }
.alertform { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 4px; }
.alertform select { flex: 1 1 190px; min-width: 0; }
.alertform input[type=text] { flex: 0 1 120px; min-width: 90px; }

/* ---------- small screens: wide tables scroll inside their card, hero counters fit ---------- */
@media (max-width: 760px) {
  .box-b.flush, .box-b:has(> table.grid) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .mstip .jobs { display: flex; flex-wrap: wrap; row-gap: 2px; }
}

/* map page: markers on the rendered picture (positions in % of the picture) */
.mv-inner { position: relative; }
.mapview.tall { display: block; }
.mapview.tall .mv-inner { max-width: 640px; margin: 0 auto; }
.mapview.tall img { width: 100%; }
.mk { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5), 0 2px 5px rgba(0, 0, 0, .35); z-index: 2; transition: transform .1s; }
.mk.exit { background: var(--blue); }
.mk.exit::after { content: ""; position: absolute; inset: 4px 4px 4px 5px; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(45deg) scale(.7); }
.mk.exit.hidden { background: rgba(61, 123, 253, .35); border-style: dashed; }
.mk.npc { background: var(--gold); width: 14px; height: 14px; margin: -26px 0 0 -7px; }
.mk > span { display: none; position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); white-space: nowrap; background: var(--tip); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; pointer-events: none; }
.mk:hover, .mk:focus-visible { transform: scale(1.3); z-index: 4; }
.mk:hover > span, .mk:focus-visible > span { display: block; }
.mv-legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin: 0 4px 0 8px; vertical-align: -1px; background: var(--blue); border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.mv-legend i:first-child { margin-left: 0; }
.mv-legend i.hidden { background: rgba(61, 123, 253, .35); }
.mv-legend i.npc { background: var(--gold); }
@media (max-width: 640px) { .mk.npc { display: none; } .mk { width: 14px; height: 14px; margin: -7px 0 0 -7px; } }
.mapgrid.small { grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); }
.mapgrid.small .nm { font-size: 13px; }
.mapcard.off { opacity: .7; }
.wm-mobs { display: flex; gap: 4px; align-items: flex-end; height: 32px; }
.wm-mobs img { max-height: 32px; max-width: 40px; object-fit: contain; image-rendering: pixelated; }

/* ---------- ease of use (2026-10) ---------- */
/* aliases used by several templates (trend / above-median colours) */
:root { --ok: var(--green-ink); --bad: var(--red-ink); }

/* top bar: universal search, "/" hint, search button on small screens, Sell button */
.searchbox input { width: 100%; }
.searchbox .slash { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .8; }
.searchbox input:focus ~ .slash, .searchbox input:not(:placeholder-shown) ~ .slash { display: none; }
#search-toggle { display: none; }
.sellbtn { flex: none; }
.menu-theme { display: none !important; }
/* account name: avatar only below 1200px */
@media (max-width: 1199px) {
  .usermenu .un, .usermenu .caret { display: none; }
}
/* below 1080px the search box becomes a button (a full-width row when open); signed in, dark mode moves into the
   account menu */
@media (max-width: 1080px) {
  .searchbox { display: none; }
  .tb-actions { margin-left: auto; }
  .topbar:has(.usermenu) #theme-toggle { display: none; }
  .menu-theme { display: block !important; }
  #search-toggle { display: inline-flex; }
  #search-toggle[aria-expanded="true"] { background: var(--accent-soft); color: var(--accent-ink); }
  .topbar .wrap { flex-wrap: wrap; height: auto; min-height: 64px; }
  .topbar.searching .searchbox { display: block; order: 10; flex: 1 1 100%; margin: 0 0 10px; }
  .topbar.searching .searchbox input { width: 100%; font-size: 16px; padding-top: 10px; padding-bottom: 10px; }
}
@media (min-width: 761px) and (max-width: 1080px) {
  .mainnav { flex: 1 1 0; min-width: 0; }  /* nav scrolls instead of pushing the buttons onto a new row */
}
@media (min-width: 761px) and (max-width: 860px) {
  .mainnav { mask-image: linear-gradient(90deg, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); }
}
@media (max-width: 760px) {
  .topbar .wrap { min-height: 0; }
  .topbar.searching .searchbox { order: 2; margin: 2px 0 4px; }
}
@media (max-width: 480px) {
  .topbar .wrap { gap: 6px 4px; }
  .brand .name { font-size: 21px; }
  .brand svg { width: 28px; height: 28px; }
  .iconbtn { width: 36px; height: 36px; }
  .usermenu summary { padding: 2px; }
}
/* logged out, the first row holds logo + search + theme + Log in + Sign up: keep it on one line */
@media (max-width: 400px) {
  .topbar .wrap { gap: 6px 2px; }
  .tb-actions { gap: 2px; }
  .brand { gap: 6px; }
  .brand .name { font-size: 19px; }
  .brand svg { width: 26px; height: 26px; }
  .iconbtn { width: 34px; height: 34px; }
  .topbar .btn.sm { padding: 6px 8px; }
  .topbar .btn.ghost.sm { padding: 6px 6px; }
}
@media (max-width: 350px) {
  .topbar:not(:has(.usermenu)) .brand .name { display: none; }
}

/* instant search suggestions (hubcw.js positions the panel under its input) */
.sugg {
  position: fixed; z-index: 90; background: var(--card); border: 1.5px solid var(--hard); border-radius: 14px;
  box-shadow: 4px 4px 0 var(--hard), var(--shadow-lg); padding: 6px; overflow-y: auto; overscroll-behavior: contain; color: var(--ink);
}
.sugg .sg-h { padding: 8px 10px 3px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.sugg a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--ink); min-height: 42px; }
.sugg a:hover, .sugg a.on { background: var(--accent-soft); color: var(--ink); }
.sugg .sg-ic { width: 32px; height: 32px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--card-2); border: 1px solid var(--line); overflow: hidden; }
.sugg .sg-ic img { max-width: 28px; max-height: 28px; image-rendering: pixelated; }
.sugg .sg-ic svg { width: 16px; height: 16px; color: var(--ink-3); }
.sugg .sg-t { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sugg .sg-t b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg .sg-t small { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sugg mark { background: none; color: var(--accent-ink); font-weight: 800; }
.sugg .sale { color: var(--green-ink); font-weight: 700; }
.sugg .sg-p { margin-left: auto; padding-left: 8px; flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.3; }
.sugg .sg-p b { font-weight: 750; font-variant-numeric: tabular-nums; }
.sugg .sg-p small { font-size: 11px; color: var(--ink-3); }
.sugg .sg-all { position: sticky; bottom: -6px; margin: 4px -6px -6px; padding: 10px 16px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; background: var(--card-2); font-weight: 600; color: var(--blue-ink); min-height: 0; }
.sugg .sg-none { padding: 12px 10px; color: var(--ink-3); font-size: 13.5px; }

/* big search rows (database, price check) */
.bigsearch { display: flex; gap: 8px; }
.bigsearch input { flex: 1; min-width: 0; font-size: 15.5px; padding: 11px 14px; }

/* market: one-row category chips on phones, compact filters */
.filters .range { display: inline-flex; align-items: center; gap: 5px; color: var(--ink-3); }
.filters .range input[type=text] { width: 68px !important; }
.filters input.q { width: 230px; }
.filters .f-go { flex-direction: row; align-items: center; gap: 10px; }
.filters .clear { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.filters .clear:hover { color: var(--red-ink); }
.filters .adv-toggle { display: none; }
.empty .btn { margin-top: 12px; }
@media (max-width: 760px) {
  .chips-scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -14px; margin-right: -14px; padding: 2px 14px 4px; }
  .chips-scroll::-webkit-scrollbar { display: none; }
  .chips-scroll a { flex: none; }
  .filters { padding: 12px 14px; gap: 10px; }
  .filters .f-q { flex: 1 1 100%; }
  .filters .f-q input.q { width: 100%; }
  .filters .f:not(.f-q):not(.f-go) { flex: 1 1 140px; }
  .filters .f select { width: 100%; }
  .filters .f-go { flex: 1 1 100%; }
  .filters.collapsible .adv-toggle { display: inline-flex; }
  .filters.collapsible:not(.adv-open) .adv { display: none; }
  .filters .adv-toggle[aria-expanded="true"] { --b: var(--ink); --t: var(--card); }
  /* 16px stops iOS zooming into fields */
  input[type=text], input[type=search], input[type=email], input[type=password], input[type=number], select, textarea { font-size: 16px; }
}

/* ---------- home: compact hero, trending prices, buy-request strip ---------- */
.cta-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 20px;
  padding: 12px 16px; border-radius: var(--radius); border: 1.5px dashed color-mix(in srgb, var(--blue) 45%, transparent);
  background: var(--blue-soft); font-size: 14px; color: var(--ink-2);
}
.cta-strip b { color: var(--ink); }
.pricecards { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; }
.pricecard {
  display: flex; flex-direction: column; gap: 4px; padding: 10px 12px 9px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--card-2); color: var(--ink); transition: transform .1s, box-shadow .1s, border-color .1s; min-width: 0;
}
.pricecard:hover { color: var(--ink); border-color: var(--hard); box-shadow: 3px 3px 0 var(--hard); transform: translate(-1px, -1px); }
.pricecard .pc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pricecard .pc-top img.ico { width: 26px; height: 26px; flex: none; }
.pricecard .pc-top b { font-weight: 650; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pricecard .pc-mid { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.pricecard .pc-mid .meso { font-size: 17px; }
.pc-trend { font-size: 11.5px; font-weight: 700; padding: 1px 6px; border-radius: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* pricier is warm orange, cheaper cool blue (as on the price page): neither is good or bad, it depends if you're buying or selling */
.pc-trend.up { color: var(--accent-ink); background: var(--accent-soft); }
.pc-trend.down { color: var(--blue-ink); background: var(--blue-soft); }
.pc-trend.flat { color: var(--ink-2); background: var(--bg-2); }
.pricecard .spark { width: 100%; height: 26px; display: block; overflow: visible; }
.pricecard .spark polyline, table.grid .spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
table.grid .spark { width: 84px; height: 22px; display: block; overflow: visible; }
.pricecard small { font-size: 11.5px; }
@media (max-width: 760px) {
  .pricecards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pricecard .pc-mid .meso { font-size: 15px; }
}
.box-h a { white-space: nowrap; }
@media (max-width: 760px) {
  .box-h { padding: 12px 14px; font-size: 15px; }
  .box-h > span small { display: none; }
}

/* ---------- market: page header, listing rows, filter chips ---------- */
.mkt-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin: 2px 0 16px; }
.mkt-head h1 { font-size: 28px; margin: 0 0 2px; }
.mkt-head p { margin: 0; color: var(--ink-3); font-size: 13.5px; font-weight: 500; }
.box > .filters:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.activef { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 10px 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.activef > span { color: var(--ink-3); font-weight: 600; margin-right: 2px; }
.activef a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--accent-soft);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent-ink); font-weight: 650; }
.activef a i { font-style: normal; width: 17px; height: 17px; line-height: 15px; text-align: center; border-radius: 50%; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.activef a:hover { border-color: var(--accent); }
.activef a:hover i { background: var(--accent); color: #fff; }

.lrow { position: relative; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center;
  padding: 12px 18px; border-bottom: 1px solid var(--line); transition: background .1s; }
.lrows .lrow:last-child { border-bottom: 0; }
.lrow:hover { background: var(--card-2); }
.lr-ic { width: 50px; height: 50px; border-radius: 12px; background: var(--card-2); border: 1.5px solid var(--line); display: flex; align-items: center; justify-content: center; transition: border-color .1s, box-shadow .1s; }
.lrow:hover .lr-ic { border-color: var(--hard); box-shadow: 2px 2px 0 var(--hard); }
.lr-ic img.ico { width: 36px; height: 36px; }
.lr-main { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lr-title { display: flex; align-items: center; gap: 7px; min-width: 0; line-height: 1.3; }
.lr-link { font-weight: 700; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lr-link::after { content: ""; position: absolute; inset: 0; } /* whole row is clickable */
.lr-link:hover, .lrow:hover .lr-link { color: var(--accent-ink); }
.lr-qty { font-weight: 700; font-size: 13px; color: var(--ink-2); flex: none; }
.lr-stats { display: flex; flex-wrap: wrap; gap: 4px; }
.lr-stats span { font-size: 11.5px; font-weight: 600; color: var(--ink-2); background: var(--bg-2); padding: 1px 7px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.lr-stats span b { color: var(--green-ink); font-weight: 700; }
.lr-stats span.slots { background: var(--blue-soft); color: var(--blue-ink); }
.lr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; font-size: 12.5px; color: var(--ink-3); }
.lr-user, .lr-meta a { position: relative; z-index: 1; } /* above the row link */
.lr-user { display: inline-flex; align-items: center; gap: 6px; }
.lr-user .ulink { font-size: 13px; }
.lr-ch { font-weight: 600; color: var(--ink-2); }
.lr-shots { display: inline-flex; align-items: center; gap: 3px; }
.lr-shots svg { width: 13px; height: 13px; }
.lr-price { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.lr-price .meso { font-size: 17px; }
.lr-price .meso::before { width: 12px; height: 12px; }
.lr-price small { font-size: 11.5px; font-weight: 600; }
.lrow.done { opacity: .62; }
.lrow.done:hover { opacity: 1; }
.lrows-empty { padding: 30px 18px 34px; text-align: center; color: var(--ink-3); }
.lrows-empty img { image-rendering: pixelated; max-height: 48px; display: block; margin: 0 auto 8px; }
.lrows-empty p { margin: 0 0 12px; }
@media (max-width: 760px) {
  .mkt-head h1 { font-size: 23px; }
  .mkt-head { align-items: center; margin-bottom: 12px; }
  .mkt-head > div:first-child { flex: 1 1 0; min-width: 150px; }
  .mkt-head .actions { flex: none; }
  .mkt-head .actions .btn { padding: 8px 12px; font-size: 13px; }
  .lrow { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 4px 10px; padding: 11px 14px; align-items: start; }
  .lr-ic { width: 42px; height: 42px; border-radius: 10px; }
  .lr-ic img.ico { width: 30px; height: 30px; }
  .lr-link { font-size: 14.5px; white-space: normal; }
  .lr-title { flex-wrap: wrap; row-gap: 3px; } /* a long title takes the line, its qty and deal badge go under it */
  .lr-price .meso { font-size: 15px; }
  .lr-price small { font-size: 11px; }
  .activef { padding: 8px 14px; }
}
@media (max-width: 480px) {
  .topbar .btn.sm { padding: 6px 9px; }
}

/* Price by stat roll (price check): +/- chips against a clean item's base stats */
.roll-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 1px 7px; margin: 1px 2px 1px 0; border-radius: 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.roll-chip.up { background: var(--green-soft); color: var(--green-ink); }
.roll-chip.down { background: var(--red-soft); color: var(--red-ink); }
.roll-chip.base { background: var(--bg-2); color: var(--ink-2); }
.roll-chip.scrolled { background: var(--blue-soft); color: var(--blue-ink); }
.roll-none { font-size: 12px; color: var(--ink-3); font-style: italic; }
.roll-intro { margin: 0; padding: 10px 14px; }
.box-b:not(.flush) > .roll-intro { padding: 0 0 8px; }
.roll-pct { display: block; font-weight: 700; color: var(--ink-3); }
.roll-pct.up { color: var(--green-ink); }
.roll-pct.down { color: var(--red-ink); }
table.grid.rolls tr.unknown td, table.grid.rolls tr.scrolled td { background: var(--card-2); }
@media (max-width: 640px) { table.grid.rolls .hide-sm { display: none; } table.grid.rolls td, table.grid.rolls th { padding: 9px 8px; } }

/* ---------- game database: live filters, jump chips, sortable headers, phone layout ---------- */
.show-m { display: none; }
.jumpbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 18px 14px; }
.jumpbar > span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; margin-right: 4px; }
.jumpbar a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: var(--card-2); border: 1.5px solid var(--line);
  color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap; }
.jumpbar a:hover { border-color: var(--ink-3); color: var(--ink); }
.jumpbar a small { color: var(--ink-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.jumpto { scroll-margin-top: 82px; }
.filters .f-go .btn.gray { color: var(--ink); }
table.grid th a.sorth { color: inherit; display: inline-flex; align-items: center; gap: 3px; }
table.grid th a.sorth:hover, table.grid th a.sorth.on { color: var(--ink); }
table.grid th[aria-sort] a.sorth::after { content: "\2191"; font-size: 12px; color: var(--accent-ink); }
table.grid th[aria-sort="descending"] a.sorth::after { content: "\2193"; }
table.rowlink tr:has(a[href]) td { cursor: pointer; }
.cats.iconic a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.cats.iconic a > span:last-child { min-width: 0; }
.cats .ci { flex: none; width: 44px; height: 44px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cats .ci img { max-width: 36px; max-height: 36px; object-fit: contain; image-rendering: pixelated; }
.cats .ci img.ico { width: 32px; height: 32px; }
button.totop {
  position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; border-radius: 12px; border: 2px solid var(--hard);
  background: var(--card); color: var(--ink); box-shadow: 3px 3px 0 var(--hard); cursor: pointer;
}
button.totop svg { width: 20px; height: 20px; }
button.totop:hover { background: var(--accent); color: #fff; }
@media (max-width: 760px) {
  .show-m { display: block; margin-top: 2px; }
  table.grid td.num small.show-m { white-space: normal; } /* a note under a number may wrap, the number itself doesn't */
  table.tiers th, table.tiers td { padding-left: 8px; padding-right: 8px; } /* scroll tiers: five columns on a phone */
  .box-h { flex-wrap: wrap; row-gap: 2px; }
  /* one sideways-scrolling row of chips */
  .jumpbar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 14px 12px; }
  .jumpbar::-webkit-scrollbar { display: none; }
  .jumpbar a, .jumpbar > span { flex: none; }
  .jumpto { scroll-margin-top: 112px; }
  .filters .f.f-lv { flex: 0 1 110px; }
  .filters .f-go .btn { flex: none; }
  table.grid td.ic { width: 44px; }
  table.grid td.ic img.ico { width: 28px; height: 28px; }
  .cats { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cats a, .cats.iconic a { padding: 10px; gap: 9px; font-size: 14px; }
  .cats a small { font-size: 11.5px; }
  .cats .ci { width: 36px; height: 36px; border-radius: 8px; }
  .cats .ci img { max-width: 30px; max-height: 30px; }
  .cats .ci img.ico { width: 26px; height: 26px; }
  /* two map cards per row instead of one tall card */
  .mapgrid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mapcard .nm { font-size: 13px; padding: 7px 8px 2px; }
  .mapcard .meta { flex-wrap: wrap; padding: 2px 8px 8px; gap: 2px 6px; }
  .mapcard .mobs { height: 24px; }
  .mapcard .mobs img { max-height: 24px; max-width: 30px; }
  /* hint that the section tabs scroll sideways */
  .subnav .wrap.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  button.totop { right: 12px; width: 42px; height: 42px; }
}
@media (max-width: 760px) {
  table.rowlink td { padding-top: 9px; padding-bottom: 9px; }
}

/* ---------- item & quest detail pages ---------- */
/* label column only as wide as its labels, so values sit next to them on wide screens */
.mobcard table.kv th { width: 1%; padding-right: 28px; }
.qsum { margin-top: 12px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.qsum > div, .pricebox > div { padding: 8px 12px; }
.qwhere { display: block; margin-top: 1px; }
.mapchip { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 1px 9px 1px 7px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 12.5px; font-weight: 600; line-height: 1.6; vertical-align: 1px; }
.mapchip::before { content: ""; width: 12px; height: 12px; flex: none; background: currentColor; opacity: .75;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat;
  --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
a.mapchip:hover { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent-ink); }
.qnav { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; font-size: 13.5px; }
.qnav a { font-weight: 600; color: var(--ink-2); min-width: 0; display: flex; align-items: center; gap: 6px; }
.qnav a:hover { color: var(--accent-ink); }
.qnav a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qnav a i { font-style: normal; font-size: 20px; line-height: 1; flex: none; }
.qnav .qn-next { justify-content: flex-end; text-align: right; }
.qnav .qn-pos { display: block; text-align: center; color: var(--ink); font-weight: 700; }
.qnav .qn-pos small { display: block; font-weight: 500; color: var(--ink-3); font-size: 11.5px; }
.qcols { align-items: start; }
.qcols > .box { margin-bottom: 0; }
table.qline tr.cur td { background: var(--accent-soft); }
table.qline td.qstep { width: 34px; color: var(--ink-3); font-weight: 700; text-align: center; padding-right: 0; }
.jobpick { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px 18px 2px; }
.jobpick > span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; margin-right: 4px; }
.jobpick button { font: inherit; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  background: var(--card-2); border: 1.5px solid var(--line); color: var(--ink-2); }
.jobpick button:hover { border-color: var(--ink-3); color: var(--ink); }
.jobpick button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.rgroup + .rgroup { border-top: 1px solid var(--line); }
.rg-h { padding: 12px 18px 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); font-weight: 700; }
.rg-h small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; padding: 8px 18px 16px; }
.ritem { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--card-2); color: var(--ink); min-width: 0; font-size: 13.5px; line-height: 1.3; }
a.ritem:hover { border-color: var(--hard); box-shadow: 2px 2px 0 var(--hard); transform: translate(-1px, -1px); color: var(--ink); }
.ritem img.ico { flex: none; }
.ritem > span { min-width: 0; }
.ritem b { font-weight: 650; }
.ritem small { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }
@media (max-width: 760px) {
  .mobcard { gap: 14px; }
  .mobcard table.kv th { padding-right: 16px; }
  .pricebox { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pricebox > div { padding: 7px 9px; }
  .pricebox small { font-size: 10.5px; letter-spacing: .03em; }
  .pricebox b { font-size: 13.5px; }
  .qsum { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
  .qnav { gap: 8px; font-size: 13px; padding: 10px 12px; }
  .qnav a span { display: none; }
  .qnav a { padding: 4px 6px; }
  .qnav .qn-prev::after { content: "Prev"; }
  .qnav .qn-next::before { content: "Next"; }
  .qcols > .box + .box { margin-top: 0; }
  .jobpick { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px 14px 2px; }
  .jobpick::-webkit-scrollbar { display: none; }
  .jobpick > * { flex: none; }
  .rg-h { padding: 10px 14px 0; }
  .rgrid { padding: 8px 14px 14px; gap: 6px; }
  table.grid th { white-space: normal; }
}

/* ---------- jobs overview ---------- */
.jpath { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; counter-reset: jp; }
.jpath li { position: relative; flex: 1; min-width: 0; padding: 10px 12px 10px 14px; background: var(--card-2); border: 1.5px solid var(--line); border-radius: 12px; display: flex; flex-direction: column; }
.jpath li + li { margin-left: 22px; }
.jpath li + li::before { content: ""; position: absolute; left: -18px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: var(--ink-3); clip-path: polygon(0 20%, 55% 20%, 55% 0, 100% 50%, 55% 100%, 55% 80%, 0 80%); }
.jpath b { font-family: var(--pixel); font-weight: 600; font-size: 16px; line-height: 1.2; }
.jpath small { font-size: 12px; }
.jpath .jp-lv { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: var(--green-ink); background: var(--green-soft); padding: 0 7px; border-radius: 6px; margin-bottom: 4px; }
.jpath li.soon { border-style: dashed; background: transparent; opacity: .7; }
.jpath li.soon .jp-lv { color: var(--ink-3); background: var(--bg-2); }

.main > .jcards { margin-bottom: 20px; }
.jcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.jcard { --jc: var(--blue); --jc-soft: var(--blue-soft); display: flex; flex-direction: column; overflow: hidden; border-top: 4px solid var(--jc); }
.jcard.jc-red { --jc: var(--red); --jc-soft: var(--red-soft); }
.jcard.jc-green { --jc: var(--green); --jc-soft: var(--green-soft); }
.jcard.jc-violet { --jc: var(--violet); --jc-soft: color-mix(in srgb, var(--violet) 14%, var(--card)); }
.jc-top { display: flex; align-items: center; gap: 14px; padding: 16px 18px 14px;
  background: linear-gradient(180deg, var(--jc-soft), transparent); }
.jc-ico { flex: none; width: 54px; height: 54px; display: grid; place-items: center; background: var(--card); border: 2px solid var(--hard); border-radius: 12px; box-shadow: 3px 3px 0 var(--jc); }
.jc-ico img { width: 32px; height: 32px; image-rendering: pixelated; transform: scale(1.25); }
.jc-title { flex: 1; min-width: 0; }
.jc-title h2 { margin: 0 0 2px; font-size: 23px; }
.jc-title h2 a { color: var(--ink); }
.jc-title h2 a:hover { color: var(--jc); }
.jc-title small { display: block; color: var(--ink-2); }
.jc-stat { flex: none; text-align: center; min-width: 52px; padding: 4px 8px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--line); line-height: 1.2; }
.jc-stat b { display: block; font-family: var(--pixel); font-size: 17px; color: var(--jc); }
.jc-stat small { font-size: 11px; font-weight: 600; }
.jc-lbl { display: block; font-size: 11px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin-bottom: 2px; }
.jc-adv { display: flex; align-items: center; gap: 12px; margin: 0 18px; padding: 10px 0 12px; border-bottom: 1px dashed var(--line-2); font-size: 13.5px; }
.jc-npc { flex: none; width: 48px; height: 56px; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.jc-npc img { max-height: 56px; max-width: 64px; image-rendering: pixelated; }
.jc-body { flex: 1; padding: 12px 18px 14px; }
.jc-branches { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.jc-br { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2); color: var(--ink);
  transition: transform .1s, box-shadow .1s, border-color .1s; }
.jc-br:hover { color: var(--ink); border-color: var(--hard); box-shadow: 3px 3px 0 var(--jc); transform: translate(-1px, -1px); }
.jc-br img { flex: none; width: 32px; height: 32px; image-rendering: pixelated; border-radius: 8px; background: var(--card); border: 1px solid var(--line); padding: 1px; }
.jc-br span { min-width: 0; }
.jc-br b { display: block; font-family: var(--pixel); font-weight: 600; font-size: 15px; line-height: 1.25; }
.jc-br small { display: block; font-size: 12px; }
.jc-next { font-size: 12.5px; color: var(--ink-3); margin: -4px 0 0 18px; }
.jc-foot { display: flex; justify-content: space-between; padding: 10px 18px; border-top: 1px solid var(--line); background: var(--card-2); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.jc-foot:hover { color: var(--jc); }
.jc-foot span { transition: transform .1s; }
.jc-foot:hover span { transform: translateX(3px); }

.jc-skills { display: flex; flex-wrap: wrap; gap: 8px; }
.jc-skills a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card-2); color: var(--ink); font-weight: 600; font-size: 13px; }
.jc-skills a:hover { border-color: var(--hard); color: var(--ink); }
.jc-skills img { width: 26px; height: 26px; image-rendering: pixelated; }
.jsteps { margin: 0; padding: 0; list-style: none; counter-reset: js; }
.jsteps li { counter-increment: js; position: relative; padding: 0 0 10px 36px; font-size: 13.5px; }
.jsteps li:last-child { padding-bottom: 0; }
.jsteps li::before { content: counter(js); position: absolute; left: 0; top: 0; width: 24px; height: 24px; display: grid; place-items: center;
  font-family: var(--pixel); font-size: 13px; color: #fff; background: var(--accent); border-radius: 7px; box-shadow: 2px 2px 0 var(--hard); }
.jsteps li:not(:last-child)::after { content: ""; position: absolute; left: 11px; top: 28px; bottom: 2px; border-left: 2px dotted var(--line-2); }

@media (max-width: 900px) {
  .jcards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .jpath { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .jpath li + li { margin-left: 0; }
  .jpath li + li::before { display: none; }
  .jc-top { padding: 14px 14px 12px; gap: 12px; }
  .jc-adv { margin: 0 14px; }
  .jc-body { padding: 12px 14px; }
  .jc-foot { padding: 10px 14px; }
  .jc-ico { width: 46px; height: 46px; }
  .jc-title h2 { font-size: 20px; }
}

/* crafting recipes */
.recipes .rc-out { display: inline-flex; align-items: center; gap: 6px; margin-right: 8px; }
.mats { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.mat { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 2px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); color: var(--ink); font-size: 12.5px; white-space: nowrap; }
.mat:hover { border-color: var(--hard); color: var(--ink); }
.mat.on { border-color: var(--accent); background: var(--accent-soft, var(--bg-2)); }
.mat .ico { width: 22px; height: 22px; }
.mat b { font-weight: 700; color: var(--ink-2); }
.mat.opt { border-style: dashed; background: transparent; color: var(--ink-2); }
.mat.opt small { color: var(--ink-3); font-size: 11px; }
.cr-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.cr-tools a { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card-2); color: var(--ink); font-size: 13px; }
.cr-tools a:hover { border-color: var(--hard); color: var(--ink); }
.cr-tools small { display: block; font-size: 11px; color: var(--ink-3); line-height: 1.1; }
.cr-mats { display: flex; flex-wrap: wrap; gap: 6px; }

/* town citizenship (/db/citizenship) */
.tbadge { width: 22px; height: 22px; image-rendering: pixelated; vertical-align: middle; }
.tgrades { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 8px; margin-top: 12px; }
.tgrades div { text-align: center; padding: 8px 4px 6px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2); }
.tgrades .tbadge { display: block; width: 32px; height: 32px; margin: 0 auto 4px; }
.tgrades small { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.main > h2.tsec { margin: 28px 0 12px; scroll-margin-top: 80px; }

/* quest ETC guide (/db/quest-etc) */
.qe-head h1 { font-size: 24px; margin-bottom: 12px; }
.qe-head p { line-height: 1.6; }
.qe-head .qe-answer { font-size: 15px; margin: 0 0 10px; }
.qe-head .mats { margin-bottom: 14px; }
.qe-head .jumpbar { border-top: 1px solid var(--line); }
.qe-it { display: inline-flex; align-items: center; gap: 6px; }
.qe-tbl td { vertical-align: top; }
.qe-tbl td.num b { font-size: 15px; font-variant-numeric: tabular-nums; }
.qe-for div + div { margin-top: 3px; }
.qe-for, .qe-src { font-size: 13px; line-height: 1.45; }
.qe-tbl small.show-m { margin-top: 3px; }
.qe-more p { margin: 0 0 6px; }
.qe-more .mats + p { margin-top: 12px; }
@media (max-width: 760px) {
  .qe-head h1 { font-size: 20px; }
}
.trew a { display: inline-block; margin-right: 2px; }
.trew .ico { width: 28px; height: 28px; }
.statbox .sb-main { background: var(--green-soft); border-color: transparent; }
.statbox .sb-main .pc-trend { vertical-align: 3px; }
.statbox .sb-sub { display: block; font-size: 11.5px; color: var(--ink-2); margin-top: 1px; }
.statbox .sb-range { display: block; font-weight: 700; font-size: 15px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.lr-price .lr-mkt { font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.lr-price .lr-mkt.good { color: var(--green-ink); }
.lr-price .lr-mkt.bad { color: var(--red-ink); }
/* deal badge (with_market()) and the Market's "Deals only" toggle */
.kind.deal { flex: none; background: var(--green-ink); color: var(--card); }
.btn.deal-btn { --b: var(--green-soft); --t: var(--green-ink); }
.btn.deal-btn.on { --b: var(--green); --t: #fff; }
.deal-btn b { font-variant-numeric: tabular-nums; }

/* database search results: compact link cards, several per row */
.hit-jump a small { color: var(--ink-3); font-weight: 600; }
.hits-note { margin: 0; padding: 10px 18px 0; font-size: 13.5px; color: var(--ink-3); }
.hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px; padding: 10px; }
.hits > a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 10px; color: var(--ink); min-width: 0; }
.hits > a:hover { background: var(--bg-2); color: var(--ink); }
.hits .hi { width: 38px; height: 38px; flex: none; display: grid; place-items: center; overflow: hidden; }
.hits .hi img.mobimg { max-width: 38px; max-height: 38px; object-fit: contain; }
.hits .hi.pin, .hits .hi.book { border-radius: 9px; background: var(--bg-2); color: var(--ink-3); }
.hits .hi.pin::before, .hits .hi.book::before { content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.hits .hi.pin { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
.hits .hi.book { --glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z'/%3E%3Cpath d='M5 17a3 3 0 0 1 3-3h11'/%3E%3C/svg%3E"); }
.hits .ht { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.hits .ht b, .hits .ht small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hits .ht small { color: var(--ink-3); font-size: 12.5px; }
@media (max-width: 560px) { .hits { grid-template-columns: 1fr; padding: 6px; } }

/* item page: price box extras and the gear comparison */
.pricebox .spark { width: 100%; height: 22px; display: block; margin-top: 4px; overflow: visible; }
.pricebox .spark polyline { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pricebox em { display: block; font-style: normal; font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.pricenote { margin: 6px 0 0; font-size: 12.5px; }
.pricenote .up, table.compare small.up { color: var(--green-ink); }
.pricenote .down, table.compare small.down { color: var(--red-ink); }
table.compare small.up, table.compare small.down { font-weight: 700; font-size: 11.5px; }
table.compare tr.me td { background: var(--accent-soft); }

/* ---------- messenger (/messages) ---------- */
#body.chat-layout { padding-top: 16px; padding-bottom: 16px; }
.chat {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); height: calc(100vh - 96px); height: calc(100dvh - 96px); min-height: 440px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden;
}
.chat-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); }
.chat-side-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px 4px 18px; }
.snd-btn { width: 34px; height: 34px; }
.snd-btn[hidden] { display: none; }
.snd-btn[aria-pressed="false"] { color: var(--ink-3); }
.snd-btn[aria-pressed="true"] .s-off, .snd-btn[aria-pressed="false"] .s-on { display: none; }
.chat-side-h h1 { font-size: 24px; margin: 0; }
.chat-search { position: relative; padding: 8px 12px 10px; }
.chat-search svg { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-3); pointer-events: none; }
.chat-search input {
  width: 100%; padding: 9px 14px 9px 36px; border-radius: 999px; border: 1.5px solid transparent; background: var(--bg-2);
  font: inherit; font-size: 14px; color: var(--ink);
}
.chat-search input:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px var(--accent-soft); }
.chat-list, .chat-people { padding: 0 8px 8px; }
.chat-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.chat-people { border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.chat-people .sg-h { padding: 4px 10px 2px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.chat-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink); }
.chat-item:hover { background: var(--bg-2); color: var(--ink); }
.chat-item.on { background: var(--accent-soft); }
.chat-item[hidden] { display: none; }
.ci-b { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.ci-b b { font-weight: 600; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-s { display: flex; color: var(--ink-3); font-size: 13px; min-width: 0; }
.ci-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ci-w { flex: none; white-space: pre; }
.chat-item.unread b, .chat-item.unread .ci-s { font-weight: 700; color: var(--ink); }
.ci-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); flex: none; }
.chat-none { padding: 14px 12px; color: var(--ink-3); font-size: 13.5px; }

.chat-av { position: relative; flex: none; width: 48px; height: 48px; }
.chat-av > span {
  display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 100%; border-radius: 50%; overflow: hidden;
  background: linear-gradient(var(--sky-2), var(--card)); border: 1.5px solid var(--line-2);
}
.chat-av img { max-width: 82%; max-height: 82%; image-rendering: pixelated; }
.chat-av img.sys { align-self: center; max-width: 64%; image-rendering: auto; }
.chat-av img.ch { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.chat-av.on::after {
  content: ""; position: absolute; right: 0; bottom: 1px; width: 13px; height: 13px; border-radius: 50%; background: var(--green); border: 2.5px solid var(--card);
}
.chat-av.sm { width: 28px; height: 28px; }
.chat-av.sm > span { border-width: 1px; }
.chat-av.lg { width: 84px; height: 84px; }

.chat-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-thread { position: relative; flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); }
.chat-head .chat-av { width: 42px; height: 42px; }
.chat-head .who { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.chat-head .who a, .chat-head .who b { color: var(--ink); font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-head .who small.on { color: var(--green-ink); }
.chat-back { display: none; }
.chat-menu { position: relative; }
.chat-menu summary { list-style: none; }
.chat-menu summary::-webkit-details-marker { display: none; }
.chat-menu .menu {
  position: absolute; right: 0; top: calc(100% + 6px); width: 230px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 20;
}
.chat-menu .menu a, .chat-menu .menu button {
  display: block; width: 100%; text-align: left; padding: 8px 10px; border-radius: 9px; color: var(--ink); font: inherit; font-size: 14px;
  background: none; border: 0; cursor: pointer;
}
.chat-menu .menu a:hover, .chat-menu .menu button:hover { background: var(--bg-2); }
.chat-menu .menu .danger { color: var(--red-ink); }
.chat-menu .menu .sep { height: 1px; background: var(--line); margin: 6px 0; }

.chat-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px 8px; display: flex; flex-direction: column; }
.chat-scroll > :first-child { margin-top: auto; }
.chat-older { text-align: center; margin-bottom: 10px; }
.chat-hello { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 20px 10px 28px; }
.chat-hello b { font-size: 17px; margin-top: 6px; }
.chat-hello p { max-width: 340px; color: var(--ink-3); font-size: 13px; margin: 6px 0 0; }
.chat-hello[hidden], .chat-older[hidden] { display: none; }
.chat-msgs { display: flex; flex-direction: column; }
.chat-time { text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ink-3); margin: 16px 0 8px; }
.msg { display: flex; align-items: flex-end; gap: 8px; margin-top: 2px; }
.msg:not(.jp) { margin-top: 8px; }
.msg.me { justify-content: flex-end; }
.msg .bubble {
  max-width: min(72%, 560px); padding: 8px 13px; border-radius: 18px; background: color-mix(in srgb, var(--ink) 9%, var(--card)); color: var(--ink);
  line-height: 1.42; overflow-wrap: anywhere;
}
.msg.me .bubble { background: var(--accent); color: #fff; }
/* a message's photos (and text) stack in .mbody; the typing dots keep a bare .bubble */
.mbody { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; max-width: min(72%, 560px); }
.msg.me .mbody { align-items: flex-end; }
.mbody > .bubble { max-width: 100%; }
.chat-imgs { display: grid; gap: 3px; width: 240px; max-width: 100%; }
.chat-imgs.n2, .chat-imgs.n4 { grid-template-columns: 1fr 1fr; }
.chat-imgs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.chat-imgs a { display: block; min-width: 0; border-radius: 14px; overflow: hidden; background: var(--bg-2); line-height: 0; }
.chat-imgs img { display: block; width: 100%; height: auto; max-height: 320px; object-fit: cover; }
.chat-imgs:not(.n1) img { aspect-ratio: 1; height: 100%; }
.msg.them.jp .chat-imgs a:first-child { border-top-left-radius: 5px; }
.msg.me.jp .chat-imgs a:first-child { border-top-right-radius: 5px; }
.msg.me .bubble a { color: #fff; text-decoration: underline; }
.msg.me .bubble .ilink { color: #fff; }
.msg .bubble blockquote { margin: 4px 0; }
.msg .bubble .subj { font-weight: 700; }
.msg.them.jp .bubble { border-top-left-radius: 5px; }
.msg.them.jn .bubble { border-bottom-left-radius: 5px; }
.msg.me.jp .bubble { border-top-right-radius: 5px; }
.msg.me.jn .bubble { border-bottom-right-radius: 5px; }
.msg.them.jn > .chat-av { visibility: hidden; }
.msg.big .bubble { background: none; padding: 0 2px; font-size: 38px; line-height: 1.15; }
.msg.pending .bubble { opacity: .55; }
.msg.pending .bubble, .msg.failed .bubble { white-space: pre-wrap; }
.msg.failed .bubble { background: var(--red); }
.msg-err { text-align: right; font-size: 12px; color: var(--red-ink); margin: 2px 4px 0; }
.msg.hl .bubble { box-shadow: 0 0 0 3px var(--gold); }
/* reactions and replies: 🙂 and ↩ beside a message on hover (🙂 nearest the bubble), the chip on the bubble's corner, the emoji bar */
.mbody { position: relative; }
.msg.reacted { margin-bottom: 15px; }
.msg-acts { flex: none; align-self: center; display: flex; opacity: 0; }
.msg.me .msg-acts { order: -1; flex-direction: row-reverse; }
.react-btn, .reply-btn {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: none;
  color: var(--ink-3); cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.react-btn svg { width: 19px; height: 19px; }
.reply-btn svg { width: 17px; height: 17px; }
.react-btn:hover, .reply-btn:hover { background: var(--bg-2); color: var(--ink-2); }
.msg:hover .msg-acts, .msg.picking .msg-acts, .msg-acts:focus-within { opacity: 1; }
.chat-thread:not([data-react]) .msg-acts, .msg.pending .msg-acts, .msg.failed .msg-acts { display: none; }
@media (hover: none) {
  .msg-acts { display: none; }
  .chat-thread[data-react] .mbody { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
}
.react-chip {
  position: absolute; right: 6px; bottom: -15px; z-index: 1; display: flex; align-items: center; padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow); color: var(--ink-2);
  font: inherit; font-size: 13px; line-height: 19px; white-space: nowrap; cursor: pointer;
}
.react-chip span { margin-left: 3px; font-size: 11.5px; font-weight: 600; }
.chat-thread:not([data-react]) .react-chip { cursor: default; }
.msg.big .react-chip { bottom: -13px; }
.react-pick {
  position: fixed; z-index: 95; display: flex; gap: 2px; padding: 5px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-lg);
}
.react-pick[hidden] { display: none; }
.react-pick button {
  width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  font-size: 25px; line-height: 40px; transition: transform .12s ease;
}
.react-pick button:hover, .react-pick button:focus-visible { transform: scale(1.25) translateY(-3px); }
.react-pick button.on { background: var(--accent-soft); }
.react-pick button.re { position: relative; margin-left: 5px; color: var(--ink-2); display: flex; align-items: center; justify-content: center; }
.react-pick button.re::before { content: ""; position: absolute; left: -4px; top: 9px; bottom: 9px; width: 1px; background: var(--line); }
.react-pick button.re svg { width: 21px; height: 21px; }
@media (prefers-reduced-motion: reduce) { .react-pick button { transition: none; } .react-pick button:hover { transform: none; } }
.seen-mark { display: flex; justify-content: flex-end; font-size: 11.5px; color: var(--ink-3); margin: 3px 4px 0; }
.chat-av.xs { width: 15px; height: 15px; }
.chat-av.xs > span { border-width: 1px; }
.chat-typing { margin-top: 8px; }
.chat-typing[hidden] { display: none; }
.chat-typing .bubble { display: flex; gap: 4px; padding: 12px 14px; }
.chat-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); animation: chatdot 1.2s infinite ease-in-out; }
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-typing i { animation: none; } }
.chat-newpill {
  position: absolute; left: 50%; bottom: 74px; transform: translateX(-50%); z-index: 5; border: 0; border-radius: 999px; cursor: pointer;
  padding: 7px 14px; background: var(--ink); color: var(--card); font: inherit; font-size: 13px; font-weight: 600; box-shadow: var(--shadow-lg);
}
.chat-newpill[hidden] { display: none; }

.chat-compose { display: flex; align-items: flex-end; gap: 6px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-compose textarea {
  flex: 1; resize: none; min-height: 40px; max-height: 150px; padding: 9px 16px; border: 1.5px solid transparent; border-radius: 20px;
  background: var(--bg-2); color: var(--ink); font: inherit; font-size: 14.5px; line-height: 1.4;
}
.chat-compose textarea:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 4px var(--accent-soft); }
.chat-send {
  flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%;
  background: none; color: var(--accent); cursor: pointer;
}
.chat-send:hover { background: var(--accent-soft); }
.chat-send svg { width: 23px; height: 23px; }
.chat-send .i-like { display: none; font-size: 24px; line-height: 1; }
.chat-compose.empty .i-like { display: block; }
.chat-compose.empty .i-send { display: none; }
.chat-compose { flex-wrap: wrap; }
.chat-shots { flex: 1 1 100%; display: flex; gap: 8px; padding: 2px 2px 6px; overflow-x: auto; }
.chat-shots[hidden] { display: none; }
.chat-shot { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--line); }
.chat-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.chat-shot.up img { opacity: .45; }
.chat-shot.up::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%;
  border: 2.5px solid var(--accent); border-right-color: transparent; animation: chatspin .8s linear infinite;
}
@keyframes chatspin { to { transform: rotate(360deg); } }
.chat-shot button {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(8, 11, 24, .7); color: #fff; font-size: 14px; line-height: 20px;
}
.chat-shot-err { flex: 1 1 100%; font-size: 12.5px; color: var(--red-ink); padding: 0 4px 6px; }
.chat-attach {
  flex: none; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--accent); cursor: pointer;
}
.chat-attach:hover { background: var(--accent-soft); }
.chat-attach svg { width: 23px; height: 23px; }
.chat-attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chat-attach .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chat-attach:focus-within { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.chat-compose.waiting .chat-send { opacity: .5; }
.chat-thread.dragging .chat-scroll { outline: 3px dashed var(--accent); outline-offset: -8px; border-radius: 12px; }
.pop .chat-attach { width: 34px; height: 36px; }
.pop .chat-attach svg { width: 21px; height: 21px; }
.pop .chat-shot { width: 52px; height: 52px; }
.chat-locked { padding: 14px 18px; text-align: center; color: var(--ink-3); font-size: 13.5px; border-top: 1px solid var(--line); background: var(--card-2); }
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--ink-3); }
.chat-empty svg { width: 64px; height: 64px; color: var(--accent); margin-bottom: 10px; }

/* a reply's quote: who replied to whom, then the start of that message (click: scroll to it) */
.msg-quote { display: flex; flex-direction: column; align-items: flex-start; max-width: 100%; margin-top: 4px; color: var(--ink-3); }
.msg.me .msg-quote { align-items: flex-end; }
.msg-quote small { display: flex; align-items: center; gap: 4px; padding: 0 4px 3px; font-size: 11.5px; }
.msg-quote small i { font-style: normal; }
.msg-quote svg { flex: none; width: 12px; height: 12px; }
.msg-quote .qb {
  max-width: 100%; padding: 7px 12px 17px; margin-bottom: -14px; border-radius: 16px; background: color-mix(in srgb, var(--ink) 5%, var(--card));
  color: var(--ink-2); font-size: 13px; line-height: 1.35;
}
.msg-quote .qb > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.msg-quote .qb.gone { font-style: italic; color: var(--ink-3); }
a.msg-quote:hover .qb { background: color-mix(in srgb, var(--ink) 9%, var(--card)); }
.msg-quote + .chat-imgs { position: relative; }
.msg.hl .chat-imgs, .msg.hl .chat-card { box-shadow: 0 0 0 3px var(--gold); border-radius: 14px; }
.msg .bubble, .msg .chat-imgs { transition: box-shadow .3s; }
/* a hubcw.com/market/N link in a message: the listing as a card under it */
.chat-card {
  display: flex; align-items: center; gap: 10px; width: 260px; max-width: 100%; padding: 8px 12px 8px 8px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(28, 34, 64, .06);
}
.chat-card:hover { border-color: var(--accent); color: var(--ink); }
.cc-ic { flex: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-2); }
.cc-ic img { max-width: 36px; max-height: 36px; image-rendering: pixelated; }
.cc-b { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.3; }
.cc-b b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-b b small { color: var(--ink-3); font-weight: 600; }
.cc-p { font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc-p small { font-size: 11.5px; }
.cc-m { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; color: var(--ink-3); }
.cc-m .kind { flex: none; font-size: 11px; padding: 0 6px; }
.cc-m > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-card.done .cc-ic img { filter: grayscale(1); opacity: .7; }
.chat-card.done .meso { color: var(--ink-3); }
/* the message box: "Replying to ..." over it, the 🙂 emoji button inside it */
.chat-replying { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; padding: 0 2px 8px 6px; text-align: left; }
.chat-replying[hidden] { display: none; }
.chat-replying > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.chat-replying small { font-size: 12.5px; color: var(--ink-2); }
.chat-replying small b { color: var(--ink); }
.chat-replying span { font-size: 12.5px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-replying button {
  flex: none; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: var(--bg-2); color: var(--ink-2);
  font-size: 17px; line-height: 26px; cursor: pointer;
}
.chat-replying button:hover { color: var(--ink); background: var(--line); }
.chat-field { flex: 1; min-width: 0; position: relative; display: flex; }
.chat-emoji {
  position: absolute; right: 4px; bottom: 4px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: none; color: var(--accent); cursor: pointer;
}
.chat-emoji[hidden] { display: none; }
.chat-emoji svg { width: 21px; height: 21px; }
.chat-emoji:hover, .chat-emoji[aria-expanded="true"] { background: var(--accent-soft); }
.chat-field:has(.chat-emoji:not([hidden])) textarea { padding-right: 40px; }
.emoji-pick {
  position: fixed; z-index: 95; display: grid; grid-template-columns: repeat(8, 34px); gap: 2px; padding: 8px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-lg);
}
.emoji-pick[hidden] { display: none; }
.emoji-pick button {
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; cursor: pointer; font-size: 22px; line-height: 34px;
}
.emoji-pick button:hover, .emoji-pick button:focus-visible { background: var(--bg-2); }
/* thin scrollbars in the chat panes */
.chat-scroll, .chat-list, .chat-shots { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 20%, transparent) transparent; }

@media (max-width: 760px) {
  #body.chat-layout { padding: 0; }
  #body.chat-layout .flash { margin: 8px 12px; }
  .chat { grid-template-columns: minmax(0, 1fr); border-radius: 0; border-left: 0; border-right: 0; min-height: 0; box-shadow: none; }
  .chat.has-thread .chat-side { display: none; }
  .chat:not(.has-thread) .chat-main { display: none; }
  .chat-side { border-right: 0; }
  .chat-back { display: inline-flex; margin-left: -6px; }
  .chat-head { padding-left: 8px; }
  .msg .bubble, .mbody { max-width: 80%; }
  .mbody > .bubble { max-width: 100%; }
  .chat-compose textarea { font-size: 16px; } /* no iOS zoom on focus */
  body:has(#chat) .footer { display: none; }
}
body:has(#chat) .totop { display: none; }

/* ---------- pop-up chat windows (the dock, on every page but /messages; desktop only) ---------- */
.dock-wins {
  position: fixed; right: 88px; bottom: 0; z-index: 70; display: flex; align-items: flex-end; gap: 12px; pointer-events: none;
}
.pop {
  pointer-events: auto; width: 330px; height: 460px; max-height: calc(100vh - 84px); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-bottom: 0; border-radius: 14px 14px 0 0; box-shadow: var(--shadow-lg);
  overflow: hidden; color: var(--ink);
}
.pop.min { display: none; }
.pop-wait { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 13px; }
.pop .chat-head { gap: 8px; padding: 6px 4px 6px 10px; cursor: pointer; }
.pop .chat-head .chat-av { width: 34px; height: 34px; }
.pop .chat-head .who b { font-size: 14px; }
.pop .chat-head .who small { font-size: 11.5px; }
.pop.flash .chat-head { background: var(--accent-soft); }
.pop-btns { display: flex; flex: none; }
.pop-btns .iconbtn { width: 30px; height: 30px; color: var(--accent); }
.pop-btns .iconbtn svg { width: 17px; height: 17px; }
.pop .chat-scroll { padding: 10px 10px 6px; }
.pop .msg { gap: 6px; }
.pop .msg .bubble { max-width: 76%; padding: 7px 11px; font-size: 14px; }
.pop .mbody { max-width: 76%; }
.pop .mbody > .bubble { max-width: 100%; }
.pop .chat-imgs { width: 200px; }
.pop .msg.big .bubble { font-size: 32px; padding: 0 2px; }
.pop .chat-hello { padding: 8px 6px 14px; }
.pop .chat-hello b { font-size: 15px; }
.pop .chat-av.lg { width: 60px; height: 60px; }
.pop .chat-compose { padding: 8px; }
.pop .chat-compose textarea { min-height: 36px; padding: 7px 13px; font-size: 14px; }
.pop .chat-send { width: 36px; height: 36px; }
.pop .chat-newpill { bottom: 62px; }
.pop .chat-locked { padding: 10px 12px; font-size: 12.5px; }
.pop .chat-card { width: 224px; }
.pop .chat-emoji { width: 28px; height: 28px; }
.pop .chat-emoji svg { width: 19px; height: 19px; }
.pop .chat-field:has(.chat-emoji:not([hidden])) textarea { padding-right: 36px; }
/* the name in a pop-up's header opens the conversation menu */
.who-menu { flex: 1; min-width: 0; }
.pop .who-menu > summary { cursor: pointer; margin-left: -5px; padding: 1px 5px; border-radius: 8px; }
.pop .who-menu > summary:hover, .who-menu[open] > summary { background: var(--bg-2); }
.who-menu .wn { display: flex; align-items: center; gap: 2px; min-width: 0; }
.who-menu .wn b { min-width: 0; }
.who-menu .wn svg { flex: none; width: 14px; height: 14px; color: var(--accent); }
.pop .who-menu .menu { left: 0; right: auto; top: calc(100% + 4px); width: 220px; cursor: default; }
.dock-heads { position: fixed; right: 20px; bottom: 20px; z-index: 70; display: flex; flex-direction: column-reverse; gap: 12px; }
.dock-head { position: relative; }
.dh-open { display: block; width: 52px; height: 52px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: var(--shadow-lg); }
.dh-open .chat-av { width: 52px; height: 52px; }
.dh-n {
  position: absolute; top: -3px; right: -3px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--accent);
  color: #fff; font-size: 11px; font-weight: 700; line-height: 16px; text-align: center; border: 2px solid var(--card); pointer-events: none;
}
.dh-n[hidden] { display: none; }
.dh-x {
  position: absolute; top: -6px; left: -6px; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; display: none; cursor: pointer;
  background: var(--card); color: var(--ink-2); font-size: 16px; line-height: 22px; box-shadow: var(--shadow);
}
.dock-head:hover .dh-x, .dock-head:focus-within .dh-x { display: block; }
body:has(.chat-dock.busy) button.totop { display: none; }

.chat-drop {
  position: fixed; z-index: 80; width: 360px; max-height: min(580px, calc(100vh - 90px)); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); color: var(--ink);
}
.chat-drop[hidden] { display: none; }
.chat-drop-h { display: flex; align-items: center; gap: 4px; padding: 12px 16px 0; }
.chat-drop-h h2 { flex: 1; }
.chat-drop-h h2 { margin: 0; font-size: 21px; }
.chat-drop-h a { font-size: 13px; font-weight: 600; }
.chat-drop .chat-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.chat-drop .chat-av { width: 44px; height: 44px; }
@media (max-width: 760px) { .chat-dock, .chat-drop { display: none !important; } }
/* the account, Messages and Notifications drop-downs: frosted glass like the top bar (chat windows stay solid).
   Only where the blur works and the visitor hasn't asked for less transparency: see-through without it is hard to read */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .usermenu .menu, .chat-drop {
    background: color-mix(in srgb, var(--card) 88%, transparent);
    backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .usermenu .menu, .chat-drop { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
/* notifications: the bell's drop-down (templates/_notes.html) and /notifications (templates/notifications.html) */
.notes-drop { width: 380px; }
.notes-list { padding-top: 8px; }
.note-item { display: flex; align-items: flex-start; gap: 12px; padding: 8px 10px; border-radius: 12px; color: var(--ink); }
a.note-item:hover { background: var(--bg-2); color: var(--ink); }
.note-item.unread { background: var(--accent-soft); }
.note-item .ci-b b { white-space: normal; font-size: 14px; }
.note-s { color: var(--ink-2); font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.note-w { color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.note-item.unread .note-w { color: var(--accent-ink); font-weight: 700; }
.note-item .ci-dot { align-self: center; }
.note-av { position: relative; flex: none; display: flex; align-self: flex-start; }
.note-av .chat-av { display: block; width: 44px; height: 44px; }
.note-av > i {
  position: absolute; right: -5px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--card); box-shadow: 0 1px 3px rgba(28, 34, 64, .25); font-size: 12px; font-style: normal; line-height: 1;
}
.notes-page .box-h h1 { margin: 0; font: inherit; }
.note-card { display: flex; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.note-card:last-of-type { border-bottom: 0; }
.note-card.unread { background: var(--accent-soft); }
.note-b { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.note-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.note-t > a, .note-t > span { font-weight: 700; color: var(--ink); }
.note-t > a:hover { color: var(--accent-ink); }
.note-t small { color: var(--ink-3); font-size: 12.5px; }
.note-body { margin-top: 3px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.notes-page .chat-none { padding: 18px; }
.notes-more { padding: 12px 18px; border-top: 1px solid var(--line); text-align: center; }
@media (max-width: 760px) { .note-card { padding: 12px 14px; gap: 12px; } .note-av .chat-av { width: 40px; height: 40px; } }
/* crafting profit at market prices (recipe tables) */
.profit-cell { white-space: nowrap; cursor: help; }
.profit-cell small { display: block; font-size: 11.5px; }
.profit.up { color: var(--green-ink); }
.profit.down { color: var(--red-ink); }

/* ---------- character avatars ---------- */
img.charimg { image-rendering: pixelated; vertical-align: middle; }
.av-edit { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 22px; align-items: start; }
.av-card {
  position: sticky; top: 84px; display: grid; gap: 12px; padding: 14px; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
.av-card .av-stage { height: 270px; align-items: flex-end; padding-bottom: 14px; --feet: 38px; }
.av-card .btn { width: 100%; }
.av-card-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.av-card-links form { display: inline; }
.av-main, .av-steps { display: grid; gap: 20px; min-width: 0; }
.av-stage {
  width: 100%; display: flex; justify-content: center; position: relative; overflow: hidden; padding-top: 4px;
  background: linear-gradient(var(--sky-1), var(--sky-2)); border: 2px solid var(--hard); box-shadow: 3px 3px 0 var(--hard); border-radius: 14px;
}
.av-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; background: linear-gradient(var(--grass-1) 0 8px, var(--dirt) 8px); border-top: 2px solid var(--hard); }
.av-stage img { position: relative; z-index: 1; image-rendering: pixelated; margin-bottom: 0; }
.av-howto { list-style: none; counter-reset: st; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; }
.av-howto li { counter-increment: st; position: relative; padding-left: 32px; }
.av-howto li::before {
  content: counter(st, lower-alpha); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--bg-2); color: var(--ink-2); font-size: 12px; font-weight: 700;
}
.av-howto code { font-size: 12.5px; background: var(--bg-2); padding: 1px 5px; border-radius: 5px; }
.av-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.av-items .av-item, .av-sugg button {
  display: flex; margin: 0; font-weight: 400; align-items: center; gap: 8px; padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card-2); cursor: pointer;
}
.av-item:has(input:not(:checked)) { opacity: .5; }
.av-item img, .av-sugg img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; flex: none; }
.av-item span, .av-sugg span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.av-item small, .av-sugg small { color: var(--ink-3); }
.av-sugg { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; margin-top: 8px; }
.av-sugg button { font: inherit; color: var(--ink); text-align: left; }
.av-sugg button:hover { border-color: var(--accent); }
@media (max-width: 860px) {
  .av-edit { grid-template-columns: minmax(0, 1fr); }
  .av-card { position: static; grid-template-columns: 120px minmax(0, 1fr); text-align: left; align-items: center; }
  .av-card .av-stage { grid-row: span 3; height: 150px; padding-bottom: 10px; --feet: 16px; }
  .av-card .av-stage img { max-height: 120px; width: auto; }
  .av-card-links { justify-content: flex-start; }
}

/* ---------- log in / sign up: sky scene beside the form ---------- */
.main:has(> .auth) > .flash { max-width: 1000px; margin-left: auto; margin-right: auto; }
.auth {
  max-width: 1000px; margin: 6px auto 10px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  background: var(--card); border: 1px solid color-mix(in srgb, var(--hard) 14%, transparent); border-radius: 22px; box-shadow: var(--shadow-lg); overflow: hidden;
}
.auth.slim { max-width: 860px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.auth .hero { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0; border: 0; border-radius: 0; box-shadow: none; padding: 36px 34px 92px; }
.auth .hero h1 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 10px; }
.auth .hero .lead { font-size: 15px; margin-bottom: 22px; }
.auth .hero .eyebrow { align-self: flex-start; }
.auth .hero h1, .auth .hero .lead, .auth .hero .eyebrow { position: relative; z-index: 2; }
.auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; position: relative; z-index: 2; }
.auth-perks li { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 1.35; }
.auth-perks li > span { display: flex; flex-direction: column; }
.auth-perks b { font-weight: 700; }
.auth-perks small { opacity: .75; font-size: 12.5px; color: inherit; }
.auth-perks .pi {
  width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.75); border: 1px solid rgba(15,23,51,.12); color: var(--accent-ink);
}
.auth-perks .pi svg { width: 18px; height: 18px; }
:root[data-theme="dark"] .auth-perks .pi { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: var(--accent-2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth-perks .pi { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); color: var(--accent-2); } }

.auth-form { padding: 30px 38px 28px; display: flex; flex-direction: column; justify-content: center; }
.auth-form h2 { font-size: 24px; margin: 0 0 4px; }
.auth-form .sub { margin: 0 0 18px; color: var(--ink-3); font-size: 14px; }
.auth-form .sub a { font-weight: 650; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password], .auth-form select { width: 100%; padding: 10px 12px; font-size: 14.5px; }
.auth-form .row { gap: 12px; }
.auth-form .pw-hint { font-size: 12.5px; color: var(--ink-3); margin: -8px 0 16px; }
.auth-form .row > .field { flex-basis: 150px; }
.auth-form .field label { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 8px; }
.auth-form .field label .lh { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.form-sec { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.form-sec::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.form-sec .tag { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.form-sec + .field, .form-sec + .row { margin-top: 0; }
.field + .form-sec, .row + .form-sec { margin-top: 8px; }
.pw { position: relative; }
.pw input { width: 100%; padding-right: 62px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding: 4px 8px; border: 0; border-radius: 7px;
  background: none; color: var(--ink-3); font: 600 12.5px var(--font); cursor: pointer;
}
.pw-toggle:hover { background: var(--bg-2); color: var(--ink); }
.pw-toggle[hidden] { display: none; }
.auth-agree {
  display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
  background: var(--card-2); border: 1px solid var(--line); font-weight: 400; font-size: 13.5px; line-height: 1.5; cursor: pointer;
}
.auth-agree input { margin-top: 2px; flex: none; }
.auth-agree small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
/* sign-up "Add your character": the optional IGN and job, folded into a dashed row until opened */
.auth-extra { margin: 0 0 14px; border: 1.5px dashed var(--line-2); border-radius: 12px; }
.auth-extra[open] { border-style: solid; border-color: var(--line); background: var(--card-2); }
.auth-extra summary { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 650; font-size: 13.5px; color: var(--ink-2); }
.auth-extra summary::-webkit-details-marker { display: none; }
.auth-extra summary:hover { color: var(--ink); }
.auth-extra:not([open]) summary:hover { background: var(--card-2); }
.auth-extra summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.auth-extra summary small { margin-left: auto; font-size: 12.5px; font-weight: 400; color: var(--ink-3); }
.ax-plus { position: relative; width: 20px; height: 20px; flex: none; border-radius: 6px; background: var(--accent-soft); }
.ax-plus::before, .ax-plus::after { content: ""; position: absolute; left: 6px; top: 9px; width: 8px; height: 2px; border-radius: 1px; background: var(--accent-ink); transition: transform .15s; }
.ax-plus::after { transform: rotate(90deg); }
.auth-extra[open] .ax-plus::after { transform: rotate(0); }
.auth-extra > .row, .auth-extra > .field { padding: 2px 14px 0; }
.auth-form .btn.big { width: 100%; }
.turnstile.shown { margin: 0 0 14px; } /* interaction-only (hubcw.js): Cloudflare shows its 65px box only when it needs a click */
.ts-hint { margin: -6px 0 14px; color: var(--ink-2); }
.auth-foot { margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-3); text-align: center; }
/* Continue with Google / Discord (templates/_sso_buttons.html): each one's own logo on the site's white card button */
.sso { display: grid; gap: 10px; }
.sso-btn { gap: 10px; }
.sso-ic { width: 20px; height: 20px; flex: none; }
.sso-btn.sso-discord .sso-ic { color: #5865f2; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 16px 0 14px; font-size: 12.5px; color: var(--ink-3); }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-foot a { font-weight: 650; }
@media (max-width: 860px) {
  .auth, .auth.slim { grid-template-columns: 1fr; max-width: 560px; }
  .auth .hero { padding: 24px 22px 62px; }
  .auth .hero .lead { margin-bottom: 0; }
  .auth .hero .eyebrow, .auth-perks { display: none; }
  .auth-form { padding: 24px 22px 22px; }
}
@media (max-width: 560px) { .auth-extra summary small { flex-basis: 100%; margin: 0; padding-left: 28px; } }
@media (max-width: 480px) { .auth .hero .lead { display: none; } .auth .hero h1 { margin: 0; } }

/* ---------------------------------------------------------------- Discord bot (/discord-bot, promos elsewhere) */
.btn.dc-btn { --b: #5865f2; }
.dc-intro .lead { font-size: 15.5px; margin-top: 0; }
.dc-intro .muted { margin-bottom: 0; }
.dc-demo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.dc-demo .box { margin: 0; }
.dc-faq h3 { margin: 14px 0 4px; font-size: 15px; }
.dc-faq h3:first-child { margin-top: 0; }
.dc-faq p { margin: 0; }
/* a Discord message as Discord draws it (dark theme in both site themes: it's a picture of another app) */
.dc-msg { margin: 12px 0 0; padding: 12px 14px 14px; border-radius: 10px; background: #313338; color: #dbdee1; font-size: 13.5px; line-height: 1.4; }
.dc-cmd { font-size: 12px; color: #949ba4; margin-bottom: 6px; }
.dc-slash { color: #c9cdfb; background: rgba(88, 101, 242, .3); border-radius: 3px; padding: 0 3px; font-weight: 600; }
.dc-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.dc-head b { color: #f2f3f5; font-weight: 600; }
.dc-av { width: 28px; height: 28px; border-radius: 50%; background: #fff3e4; display: flex; align-items: center; justify-content: center; flex: none; }
.dc-av svg { width: 18px; height: 18px; }
.dc-app { background: #5865f2; color: #fff; font-size: 10px; font-weight: 700; padding: 1px 4px; border-radius: 3px; }
.dc-embed { display: flex; gap: 12px; margin-left: 36px; padding: 10px 12px 12px; border-radius: 4px; background: #2b2d31; border-left: 4px solid var(--green); }
.dc-body { flex: 1; min-width: 0; }
.dc-thumb { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; flex: none; }
.dc-embed a { color: #00a8fc; }
.dc-title { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.dc-desc { margin: 0 0 8px; font-size: 13px; }
.dc-fields { display: flex; flex-wrap: wrap; gap: 8px 0; }
.dc-field { flex: 1 1 100%; min-width: 0; font-size: 13px; padding-right: 10px; overflow-wrap: anywhere; }
.dc-field.inline { flex: 0 0 33.33%; }
.dc-field b { display: block; color: #f2f3f5; font-weight: 600; margin-bottom: 1px; }
.dc-field span b { display: inline; }
.dc-foot { margin-top: 8px; font-size: 11.5px; color: #949ba4; }
.dc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0 36px; }
.dc-btns a { background: #4e5058; color: #fff; border-radius: 3px; padding: 4px 12px; font-size: 13px; font-weight: 500; }
.dc-btns a:hover { background: #6d6f78; color: #fff; }
/* "also in Discord" promos: a strip under the home features, a line on price pages */
.dc-promo {
  display: flex; align-items: center; gap: 12px; margin-top: 14px; padding: 12px 16px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); color: var(--ink);
}
.dc-promo .fi { width: 36px; height: 36px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #5865f2; color: #fff; }
.dc-promo .fi svg { width: 19px; height: 19px; }
.dc-promo p { margin: 0; flex: 1; min-width: 0; }
.dc-promo .btn { flex: none; }
.dc-line { margin: 10px 0 0; font-size: 12.5px; color: var(--ink-3); }
@media (max-width: 860px) { .dc-demo { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .dc-field.inline { flex-basis: 50%; }
  .dc-embed, .dc-btns { margin-left: 0; }
  .dc-promo { flex-wrap: wrap; }
  .dc-promo p { flex-basis: calc(100% - 48px); }
}

/* ---------- settings: profile card + section nav beside the forms ---------- */
.set-head { margin-bottom: 18px; }
.set-head h1 { margin-bottom: 4px; }
.set-head p { margin: 0; color: var(--ink-3); }
.settings { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 22px; align-items: start; }
.set-side { position: sticky; top: 84px; display: grid; gap: 14px; }
.set-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: grid; gap: 12px; text-align: center; }
.set-card .av-stage { height: 150px; align-items: flex-end; padding-bottom: 20px; --feet: 32px; }
.set-card .av-stage img { max-height: 112px; max-width: 80%; object-fit: contain; }
.set-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.set-who b { font-family: var(--pixel); font-size: 19px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.set-who small { color: var(--ink-3); font-size: 13px; }
.set-card .btn { justify-self: center; }
.set-nav { display: grid; gap: 2px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.set-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--ink-2); font-weight: 600; font-size: 14px; }
.set-nav a:hover { background: var(--bg-2); color: var(--ink); }
.set-nav svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.set-main { min-width: 0; display: grid; gap: 20px; }
.set-box { scroll-margin-top: 84px; }
.set-main .form-sec { scroll-margin-top: 84px; }
.set-h { padding: 18px 20px 0; }
.set-h h2 { font-size: 19px; margin: 0 0 3px; }
.set-h p { margin: 0; color: var(--ink-3); font-size: 13.5px; }
.set-box .box-b { padding: 18px 20px 6px; }
.set-box input[type=text], .set-box input[type=email], .set-box input[type=password], .set-box input[type=number], .set-box select { width: 100%; }
.set-box .row > .field.set-lvl { flex: 0 1 110px; }
.set-box .row > .field.set-half { flex: 0 1 calc(50% - 7px); }
.set-f {
  display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line);
  background: var(--card-2); border-radius: 0 0 var(--radius) var(--radius); font-size: 13px; color: var(--ink-3);
}
.set-f span { margin-right: auto; }
.set-h.solo { padding-bottom: 16px; } /* a section with nothing between its heading and its footer */
.set-box .sso-list { display: grid; gap: 10px; padding-bottom: 18px; }
.sso-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; }
.sso-logo { width: 38px; height: 38px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-2); }
.sso-logo.sso-discord { background: #5865f2; color: #fff; }
.sso-what { flex: 1; min-width: 0; }
.sso-what b, .sso-what small { display: block; }
.sso-what small, .sso-need { color: var(--ink-3); font-size: 12.5px; }
.sso-need { max-width: 190px; text-align: right; }
.av-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; margin-bottom: 18px; }
.av-choice { display: flex; gap: 14px; align-items: center; padding: 12px; border: 1.5px solid var(--line); border-radius: 14px; background: var(--card-2); min-width: 0; }
.av-choice.on { border-color: var(--accent); background: var(--accent-soft); }
.av-thumb {
  width: 84px; height: 96px; flex: none; display: flex; align-items: flex-end; justify-content: center; position: relative; overflow: hidden; padding-bottom: 12px;
  background: linear-gradient(var(--sky-1), var(--sky-2)); border: 2px solid var(--hard); border-radius: 12px; box-shadow: 2px 2px 0 var(--hard);
}
.av-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(var(--grass-1) 0 5px, var(--dirt) 5px); border-top: 2px solid var(--hard); }
.av-thumb img { position: relative; z-index: 1; max-width: 76px; max-height: 72px; object-fit: contain; image-rendering: pixelated; }
.av-empty { position: relative; z-index: 1; margin-bottom: 14px; font: 700 30px var(--pixel); color: rgba(15,23,51,.35); }
.av-txt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-width: 0; flex: 1; }
.av-txt b { font-size: 14.5px; }
.av-txt .tag { margin-left: 4px; background: var(--accent); color: #fff; font-size: 11px; vertical-align: 1px; }
.av-txt small { color: var(--ink-3); font-size: 12.5px; line-height: 1.4; }
.av-txt select { width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 860px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .set-side { position: static; }
  .set-card { grid-template-columns: 90px minmax(0, 1fr); text-align: left; align-items: center; }
  .set-card .av-stage { height: 104px; padding-bottom: 16px; --feet: 24px; }
  .set-card .av-stage img { max-height: 76px; }
  .set-card .btn { grid-column: 1 / -1; justify-self: stretch; }
  .set-nav { display: flex; overflow-x: auto; scrollbar-width: none; }
  .set-nav a { white-space: nowrap; padding: 7px 10px; }
  .av-choices { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  .set-box .row > .field.set-half { flex-basis: 100%; }
  .set-f { flex-direction: column; align-items: stretch; text-align: center; }
  .set-f span { margin: 0; }
}

/* ---------- character avatar page ---------- */
.set-head .back { display: inline-block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); }
.set-head .back:hover { color: var(--accent-ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; background: var(--bg-2); color: var(--ink-2); }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .7; }
.pill.ok { background: var(--green-soft); color: var(--green-ink); }
.pill.warn { background: var(--accent-soft); color: var(--accent-ink); }
.step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-right: 10px; vertical-align: 2px;
  border-radius: 7px; background: var(--accent); color: #fff; font: 700 13.5px var(--font); box-shadow: 2px 2px 0 var(--hard);
}
.set-box .set-h h2 + p { margin-top: 2px; }
.dropzone {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--line-2); border-radius: 14px; background: var(--card-2); color: var(--ink-2); font-weight: 400; transition: border-color .15s, background .15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone.has { border-style: solid; border-color: var(--green); background: var(--green-soft); }
.dropzone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.dropzone:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.dropzone svg { width: 26px; height: 26px; color: var(--ink-3); margin-bottom: 4px; }
.dropzone b { font-size: 14.5px; color: var(--ink); }
.dropzone small { font-size: 12.5px; color: var(--ink-3); }
.av-look { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0 14px; }
.av-add { position: relative; }
.av-add svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ink-3); pointer-events: none; }
.set-box .av-add input { width: 100%; padding-left: 36px; }
.av-sugg { margin-bottom: 4px; }
.av-items { margin-bottom: 14px; }
.av-none { grid-column: 1 / -1; margin: 0; padding: 16px; text-align: center; border: 1.5px dashed var(--line-2); border-radius: 12px; }
.av-item { transition: opacity .12s, border-color .12s; }
.av-item:has(input:checked) { border-color: var(--line-2); background: var(--card); }
@media (max-width: 480px) {
  .av-look { grid-template-columns: minmax(0, 1fr); }
  .step-n { width: 22px; height: 22px; font-size: 13px; margin-right: 8px; }
}

/* ---------- member profile: sky banner, stat tiles, feedback ---------- */
.prof-top { padding-top: 24px; }
.hero.prof-hero { align-items: flex-end; gap: 26px; padding: 30px 34px 66px; min-height: 230px; }
.prof-av { position: relative; z-index: 2; flex: none; align-self: flex-end; margin-bottom: -44px; display: flex; align-items: flex-end; }
.prof-av img.charimg { width: 144px; height: 168px; margin-bottom: -16px; }
.prof-av img.mobimg { width: auto; height: auto; min-height: 96px; max-height: 140px; max-width: 200px; image-rendering: pixelated; }
.prof-id { position: relative; z-index: 2; flex: 1; min-width: 0; align-self: center; }
.prof-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.prof-tags:empty { display: none; }
.prof-hero .eyebrow { margin-bottom: 10px; }
.prof-hero .eyebrow.gm { color: var(--violet); }
.prof-hero .eyebrow.banned { color: var(--red-ink); }
.prof-hero h1 { font-size: clamp(28px, 4vw, 42px); margin: 0 0 6px; overflow-wrap: anywhere; }
.prof-hero .lead { margin: 0; font-size: 15px; }
.prof-actions { position: relative; z-index: 2; flex: none; align-self: center; display: flex; gap: 8px; }
.prof-stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.pstat {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; min-width: 0; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
}
a.pstat { transition: border-color .12s, transform .12s; }
a.pstat:hover { color: var(--ink); border-color: var(--line-2); transform: translateY(-2px); }
.pstat b { font: 800 24px/1.1 var(--font); letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pstat b.sm { font-size: 18px; line-height: 1.45; letter-spacing: 0; font-weight: 700; }
.pstat b.pos { color: var(--green-ink); }
.pstat b.neg { color: var(--red-ink); }
.pstat span { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: .07em; font-weight: 650; }
.pfame { position: relative; }
.pfame:has(.fame-btns) { padding-right: 48px; }
.fame-btns { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 4px; }
.fame-btns button {
  width: 28px; height: 24px; padding: 0; display: grid; place-items: center; font: 700 11px/1 var(--font); color: var(--ink-2);
  background: var(--card-2); border: 1.5px solid var(--line-2); border-radius: 7px; cursor: pointer; transition: color .12s, background .12s, border-color .12s;
}
.fame-btns .up:hover:not(:disabled) { color: var(--green-ink); background: var(--green-soft); border-color: var(--green); }
.fame-btns .down:hover:not(:disabled) { color: var(--red-ink); background: var(--red-soft); border-color: var(--red); }
.fame-btns button:disabled { opacity: .4; cursor: not-allowed; }
.fame-wait { font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.repbar { display: flex; height: 5px; border-radius: 3px; overflow: hidden; background: var(--bg-2); margin-top: 4px; }
.repbar i { display: block; }
.repbar .p { background: var(--green); }
.repbar .n { background: var(--ink-3); opacity: .4; }
.repbar .x { background: var(--red); }
.box-h .count { font: 700 11.5px/1 var(--font); padding: 3px 7px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); vertical-align: 2px; margin-left: 4px; }
.fb-sum { display: flex; gap: 4px; flex-wrap: wrap; font-family: var(--font); }
.fb-form { display: grid; gap: 10px; padding: 14px; margin-bottom: 16px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--line); }
.fb-score { display: flex; gap: 6px; flex-wrap: wrap; }
.fb-score label { position: relative; cursor: pointer; }
.fb-score input { position: absolute; opacity: 0; pointer-events: none; }
.fb-score span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--line-2); background: var(--card); font-size: 13px; font-weight: 650; color: var(--ink-2); }
.fb-score input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.fb-score .pos input:checked + span { background: var(--green-soft); border-color: var(--green); color: var(--green-ink); }
.fb-score .zero input:checked + span { background: var(--bg-2); border-color: var(--ink-3); color: var(--ink); }
.fb-score .neg input:checked + span { background: var(--red-soft); border-color: var(--red); color: var(--red-ink); }
.fb-form select { justify-self: start; max-width: 100%; }
.fb-row { display: flex; gap: 8px; }
.fb-row input { flex: 1; min-width: 0; }
.fb-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--card-2); color: var(--ink-3); font-size: 13px; }
.fb-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fb-item:last-child { border-bottom: 0; padding-bottom: 0; }
.fb-item:first-child, .fb-form + .fb-item, .fb-note + .fb-item { padding-top: 0; }
.fb-av { --feet: 4px; width: 40px; height: 40px; flex: none; border-radius: 10px; background: linear-gradient(var(--sky-1), var(--sky-2)); border: 1.5px solid var(--line-2); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.fb-av img { max-width: 36px; max-height: 36px; }
.fb-body { min-width: 0; }
.fb-meta small { color: var(--ink-3); }
.fb-body p { margin: 3px 0 0; overflow-wrap: anywhere; }
.fb-reply { margin-top: 8px; padding: 8px 12px; border-left: 3px solid var(--line-2); border-radius: 0 10px 10px 0; background: var(--card-2); font-size: 13px; }
.fb-reply small { color: var(--ink-3); }
.fb-reply p { margin: 2px 0 0; }
.fb-reply-form { margin-top: 6px; font-size: 13px; }
.fb-reply-form summary { cursor: pointer; color: var(--ink-3); }
.fb-reply-form form { margin-top: 6px; }
.fb-none { margin: 0; padding: 18px 0 6px; text-align: center; color: var(--ink-3); }
.prof-bio { overflow-wrap: anywhere; }
.prof-bio p:last-child { margin-bottom: 0; }
.prof-dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 14px; }
.prof-dl dt { color: var(--ink-3); }
.prof-dl dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
@media (max-width: 1020px) {
  .hero.prof-hero { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 18px 22px; }
  .prof-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .prof-top { padding-top: 14px; }
  .hero.prof-hero { padding: 22px 18px 54px; min-height: 0; }
  .prof-av { position: absolute; right: 14px; bottom: 22px; margin: 0; }
  .prof-av img.charimg { width: 96px; height: 112px; margin-bottom: -10px; }
  .prof-av img.mobimg { min-height: 64px; max-height: 90px; max-width: 100px; }
  .prof-id, .prof-actions { flex-basis: 100%; max-width: calc(100% - 108px); }
  .prof-hero .lead { font-size: 13.5px; }
  .prof-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pstat { padding: 12px 14px; }
}

/* weekly giveaway (templates/giveaway.html) */
.ga-prize { font-size: 17px; margin: 0 0 6px; }
.ga-prize b { color: var(--accent-ink); }
.ga-hash { word-break: break-all; font-size: 12px; }
.ga-won { font-size: 14.5px; }
.ga-won input[type=text] { width: 150px; }
.ga-rules ul { margin: 0 0 12px; padding-left: 20px; }
.ga-rules li { margin-bottom: 6px; }
.ga-rules details { margin-top: 8px; }
.ga-rules summary { cursor: pointer; font-weight: 600; }
.ga-invite input[type=text] { flex: 1 1 260px; min-width: 0; font-size: 13.5px; }
.ga-side .ga-prize { font-size: 15px; margin-bottom: 4px; }

/* ---------- members directory: card grid ---------- */
.mem-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.mem-head h1 { margin-bottom: 4px; }
.mem-head p { margin: 0; color: var(--ink-3); }
.mem-head p b { color: var(--ink); }
.mem-search { position: relative; flex: 0 1 320px; }
.mem-search svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--ink-3); pointer-events: none; }
.mem-search input[type=search] { width: 100%; padding: 10px 14px 10px 38px; border-radius: 12px; }
.mem-sort a.clear { margin-left: auto; color: var(--ink-3); border-style: dashed; }
.mem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-bottom: 20px; }
.mem {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.mem:hover { color: var(--ink); transform: translateY(-3px); border-color: var(--line-2); box-shadow: var(--shadow-lg); }
.mem-stage {
  position: relative; height: 120px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; --feet: 16px;
  background: linear-gradient(var(--sky-1), var(--sky-2));
}
.mem-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: linear-gradient(var(--grass-1) 0 5px, var(--grass-2) 5px 7px, var(--dirt) 7px); }
.mem-stage img { position: relative; z-index: 1; image-rendering: pixelated; }
.mem-stage img.mobimg { width: auto; height: auto; min-height: 56px; max-height: 86px; max-width: 150px; }
.mem-stage img.charimg { width: 96px; height: 112px; margin-bottom: -10px; }
.mem:hover .mem-stage img { animation: mem-hop .35s ease-out; }
@keyframes mem-hop { 40% { transform: translateY(-8px); } }
.mem-on { position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(255,255,255,.75); }
.mem-txt { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 0; min-width: 0; }
.mem-txt b { font-family: var(--pixel); font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-txt b.admin { color: var(--violet); }
.mem-txt small { color: var(--ink-3); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mem-foot { display: flex; align-items: center; gap: 6px; padding: 10px 14px 12px; margin-top: auto; }
.mem-foot .joined { margin-left: auto; color: var(--ink-3); font-size: 12px; white-space: nowrap; }
.tag.gm { background: color-mix(in srgb, var(--violet) 14%, transparent); color: var(--violet); font-size: 11px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .mem:hover .mem-stage img { animation: none; } }
@media (max-width: 640px) {
  .mem-search { flex-basis: 100%; }
  .mem-sort { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mem-sort a { white-space: nowrap; }
  .mem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mem-stage { height: 100px; }
  .mem-stage img.charimg { width: 82px; height: 96px; }
  .mem-stage img.mobimg { min-height: 44px; max-height: 66px; }
  .mem-txt { padding: 10px 12px 0; }
  .mem-foot { padding: 8px 12px 10px; }
  .mem-foot .joined { display: none; }
}

/* ---------- member backgrounds (users.bg, SCENES in src/helpers.php) ----------
   Each scene is a 1600x480 window of a Classic World town drawn from the client (maple_extract/render_scenes.py), with
   the street 34px above its bottom edge. Boxes draw it at 3/4 size (1200x360, street 25.5px up) and set --feet to how
   high their avatar's feet stand, so the street lines up under them. --scene-top fills any sky above the picture.
   Scenes look the same in light and dark mode; the profile banner gets a dark scrim and white text on all of them. */
.scene-henesys { --scene: url(../scenes/henesys.webp?v=1); --scene-thumb: url(../scenes/henesys.thumb.webp?v=1); --scene-top: #839f94; }
.scene-ellinia { --scene: url(../scenes/ellinia.webp?v=1); --scene-thumb: url(../scenes/ellinia.thumb.webp?v=1); --scene-top: #5c8549; }
.scene-perion { --scene: url(../scenes/perion.webp?v=1); --scene-thumb: url(../scenes/perion.thumb.webp?v=1); --scene-top: #c0a78c; }
.scene-kerning { --scene: url(../scenes/kerning.webp?v=1); --scene-thumb: url(../scenes/kerning.thumb.webp?v=1); --scene-top: #8a6a56; }
.scene-sleepywood { --scene: url(../scenes/sleepywood.webp?v=1); --scene-thumb: url(../scenes/sleepywood.thumb.webp?v=1); --scene-top: #433d17; }
.scene-lith { --scene: url(../scenes/lith.webp?v=1); --scene-thumb: url(../scenes/lith.thumb.webp?v=1); --scene-top: #b7bdba; }
.scene-amherst { --scene: url(../scenes/amherst.webp?v=1); --scene-thumb: url(../scenes/amherst.thumb.webp?v=1); --scene-top: #8eb6c0; }
.scene-southperry { --scene: url(../scenes/southperry.webp?v=1); --scene-thumb: url(../scenes/southperry.thumb.webp?v=1); --scene-top: #4974c9; }
.scene-florina { --scene: url(../scenes/florina.webp?v=1); --scene-thumb: url(../scenes/florina.thumb.webp?v=1); --scene-top: #66899c; }
.av-stage.scene, .mem-stage.scene, .fb-av.scene, :root .hero.scene {
  background: var(--scene-top) var(--scene) no-repeat center bottom calc(var(--feet, 16px) - 25.5px) / auto 360px; }
.av-stage.scene::after, .mem-stage.scene::after { content: none; }
/* :root raises these to the weight of the site theme's .hero rules; coming later, they win */
:root .hero.scene { --feet: 24px; color: #fff; isolation: isolate; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
:root .hero.scene::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(8,12,28,.7), rgba(8,12,28,.35) 55%, rgba(8,12,28,.08)); }
.hero.scene .ground, .hero.scene .cloud { display: none; }
:root .hero.scene .eyebrow { background: rgba(8,12,28,.45); border-color: rgba(255,255,255,.2); text-shadow: none; }
:root .hero.scene .eyebrow:not(.gm):not(.banned) { color: #fff; }
:root .hero.scene .lead { opacity: .92; }
/* settings: the picker */
.scene-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.scene-opt { position: relative; display: flex; flex-direction: column; gap: 5px; cursor: pointer; min-width: 0; }
.scene-opt input { position: absolute; opacity: 0; pointer-events: none; }
.scene-sw { position: relative; display: block; height: 56px; border-radius: 10px; overflow: hidden; border: 1.5px solid var(--line-2);
  background: linear-gradient(var(--sky-1), var(--sky-2)); transition: transform .12s; }
.scene-sw.scene { background: var(--scene-top) var(--scene-thumb) center bottom / cover no-repeat; }
.scene-sw.scene::after { content: none; }
.scene-sw::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(var(--grass-1) 0 4px, var(--grass-2) 4px 5px, var(--dirt) 5px); }
.scene-opt small { font-size: 12px; font-weight: 600; color: var(--ink-3); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scene-opt:hover .scene-sw { transform: translateY(-2px); }
.scene-opt input:checked + .scene-sw { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent); }
.scene-opt input:checked ~ small { color: var(--ink); }
.scene-opt input:focus-visible + .scene-sw { outline: 3px solid var(--accent); outline-offset: 2px; }
.scene-hint { margin: 8px 0 18px; }
@media (prefers-reduced-motion: reduce) { .scene-opt:hover .scene-sw { transform: none; } }
@media (max-width: 640px) { .scene-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }

/* ---------- market browse: sky banner with search, category tiles ---------- */
.hero.mkt-hero { padding: 28px 34px 62px; margin-bottom: 14px; }
.mkt-hero h1 { font-size: clamp(26px, 3vw, 34px); }
.mkt-hero .lead { margin-bottom: 16px; max-width: 680px; }
.mkt-hero .lead b { font-weight: 700; }
.mkt-hero .lead kbd { font-size: 11px; }
.mkt-hero .hero-search input[type=search] { font-size: 15px; }
.mkt-hero-act { position: relative; z-index: 2; flex: none; display: flex; flex-direction: column; gap: 8px; align-self: center; }
.mkt-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.mkt-cats a {
  display: flex; align-items: center; gap: 8px; min-width: 0; padding: 7px 10px 7px 7px; border-radius: 12px;
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink-2); font-size: 13.5px; font-weight: 600;
  transition: border-color .12s, background .12s, color .12s;
}
.mkt-cats a > span:not(.ci) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-cats a:hover { border-color: var(--line-2); color: var(--ink); }
.mkt-cats a.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.mkt-cats .ci { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--card-2); border: 1px solid var(--line); }
.mkt-cats a.on .ci { background: var(--card); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.mkt-cats .ci img { max-width: 24px; max-height: 24px; image-rendering: pixelated; }
.mkt-cats .ci svg { width: 16px; height: 16px; color: var(--ink-3); }
.mkt-cats a.on .ci svg { color: var(--accent-ink); }
.mkt-cats small { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 11.5px; font-weight: 700; }
.mkt-cats a.on small { background: var(--card); color: var(--accent-ink); }
@media (max-width: 1020px) {
  .hero.mkt-hero { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px; }
  .mkt-hero .hero-main { flex: 1 1 100%; }
  .mkt-hero-act { flex-direction: row; align-self: auto; }
  .mkt-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero.mkt-hero { padding: 20px 16px 50px; }
  .mkt-hero .lead { font-size: 13.5px; margin-bottom: 12px; }
  .mkt-hero .hero-search .btn { display: none; }
  .mkt-hero .hero-search { padding-right: 6px; }
  .mkt-hero .hero-search input[type=search] { font-size: 16px; }
  .mkt-hero-act, .mkt-hero-act .btn { flex: 1 1 auto; }
  .mkt-cats { display: flex; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 14px; padding: 2px 14px 4px; }
  .mkt-cats::-webkit-scrollbar { display: none; }
  .mkt-cats a { flex: none; }
}

/* ---------- price check index: sky banner with search, rising/falling movers ---------- */
.pc-form { margin-bottom: 18px; }
.hero.pc-hero { padding: 30px 36px 64px; }
.pc-hero h1 { font-size: clamp(28px, 3.4vw, 40px); }
.pc-hero .lead { margin-bottom: 16px; }
.pc-hero .hero-search input[type=search] { font-size: 15.5px; }
.pc-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.pc-filters select {
  padding: 6px 30px 6px 12px; font-size: 13px; font-weight: 600; border-radius: 999px;
  background-color: rgba(255,255,255,.72); border-color: rgba(15,23,51,.14); color: #0f1733;
}
.pc-filters a.clear { font-size: 13px; font-weight: 650; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.pc-discord { margin-left: auto; font-size: 12.5px; opacity: .75; }
.pc-discord code { font-size: 12px; }
:root[data-theme="dark"] .pc-filters select { background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pc-filters select { background-color: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); color: #fff; } }
.movers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.mv-list { display: grid; }
.mv { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--ink); border-bottom: 1px solid var(--line); min-width: 0; }
.mv:last-child { border-bottom: 0; border-radius: 0 0 var(--radius) var(--radius); }
.mv:hover { background: var(--card-2); color: var(--ink); }
.mv-ic { width: 36px; height: 36px; flex: none; display: flex; align-items: center; justify-content: center; }
.mv-name { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mv-name b { font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv-name small { font-size: 12px; }
.mv-num { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
@media (max-width: 760px) {
  .hero.pc-hero { padding: 22px 16px 52px; }
  .pc-hero .eyebrow { font-size: 11px; }
  .pc-hero .hero-search .btn { padding: 10px 12px; }
  .pc-hero .hero-search input[type=search] { font-size: 16px; }
  .pc-filters label { flex: 1 1 140px; min-width: 0; }
  .pc-filters select { width: 100%; }
  .pc-discord { display: none; }
  .movers { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .movers .box { margin-bottom: 16px; }
}

/* ---------- database overview: sky banner + roomier tiles ---------- */
.hero.db-hero { margin-bottom: 20px; padding: 30px 36px 66px; }
.db-hero h1 { font-size: clamp(28px, 3.3vw, 38px); }
.db-hero .hero-search .btn.green { background: var(--green); }
.db-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.db-stats .stat + .stat { border-left: 0; }
.db-stats .stat:nth-child(even) { border-left: 1px solid var(--line); }
.db-stats .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
.db-stats .stat { padding: 14px 24px; }
.cats.db-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.cats.db-tiles a { padding: 12px; gap: 12px; background: var(--card); font-size: 14.5px; }
.cats.db-tiles a > span:last-child { line-height: 1.25; }
.cats.db-tiles a small { margin-top: 3px; }
.cats.db-tiles .ci { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(var(--sky-1), var(--sky-2)); border-color: color-mix(in srgb, var(--hard) 16%, transparent); }
.cats.db-tiles a:hover .ci img { animation: mem-hop .35s ease-out; }
@media (prefers-reduced-motion: reduce) { .cats.db-tiles a:hover .ci img { animation: none; } }
@media (max-width: 1020px) {
  .cats.db-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .db-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .db-stats .stat:nth-child(n+3) { border-top: 0; }
  .db-stats .stat + .stat { border-left: 1px solid var(--line); }
}
@media (max-width: 760px) {
  .hero.db-hero { padding: 22px 16px 54px; }
  .db-hero .eyebrow { font-size: 11px; }
  .db-hero .hero-search .btn { padding: 10px 12px; }
  .db-hero .hero-search input[type=search] { font-size: 16px; }
  .db-stats .stat { padding: 10px 6px; }
  .db-stats .stat b { font-size: 19px; }
  .db-stats .stat span { font-size: 10px; letter-spacing: .03em; white-space: normal; }
  .cats.db-tiles { grid-template-columns: 1fr 1fr; }
  .cats.db-tiles .ci { width: 40px; height: 40px; }
}

/* ---------- phones (2026-10-14): bottom tab bar, one-row top bar, no input zoom, bigger tap targets ---------- */
/* viewport-fit=cover lets the page run under the notch / home bar, so keep content inside the safe area */
.wrap { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.tabbar { display: none; }
@media (max-width: 760px) {
  .wrap { padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); }
  /* the tab bar replaces the scrolling nav row (Members moved to the footer) and the top-bar Sell button */
  .topbar .mainnav, .topbar .sellbtn { display: none; }
  .topbar .wrap { padding-top: 8px; padding-bottom: 8px; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    background: color-mix(in srgb, var(--card) 90%, transparent);
    backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid var(--line); box-shadow: 0 -4px 18px rgba(28, 34, 64, .06);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 58px; min-width: 0;
    color: var(--ink-3); font-size: 11px; font-weight: 650; letter-spacing: .01em; -webkit-tap-highlight-color: transparent;
  }
  .tabbar a span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a svg { width: 23px; height: 23px; }
  .tabbar a:hover { color: var(--ink); }
  .tabbar a.on { color: var(--accent-ink); }
  .tabbar a.on svg { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 35%, transparent)); }
  .tabbar a.on span { font-weight: 750; }
  .tabbar .tb-sell { color: var(--ink); }
  .tabbar .tb-sell i {
    display: flex; align-items: center; justify-content: center; width: 42px; height: 30px; border-radius: 10px;
    background: var(--accent); color: #fff; border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard);
  }
  .tabbar .tb-sell i svg { width: 17px; height: 17px; }
  .tabbar .tb-sell:active i { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--hard); }
  /* room under the footer for the bar; lift floating bits above it */
  body:has(> .tabbar) .footer .fine { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  body:has(> .tabbar) button.totop { bottom: calc(58px + 14px + env(safe-area-inset-bottom)); }
  body:has(> .tabbar) .toast { bottom: calc(58px + 16px + env(safe-area-inset-bottom)); }
  /* while typing, give the keyboard the space */
  body:has(:is(input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea):focus) > .tabbar { display: none; }
  /* table headings may wrap so the name column gets the width instead of "MEDIAN SOLD" */
  table.grid th, table.grid th.num { white-space: normal; }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tabbar { box-shadow: 0 -4px 18px rgba(0, 0, 0, .3); } }
:root[data-theme="dark"] .tabbar { box-shadow: 0 -4px 18px rgba(0, 0, 0, .3); }
/* iOS zooms the page into any field under 16px on focus */
@media (max-width: 760px), (pointer: coarse) {
  input[type=text]:not(.bigin), input[type=password], input[type=email], input[type=number]:not(.bigin), input[type=search],
  input[type=url], input[type=tel], select, textarea { font-size: 16px !important; }
}
/* fingers, not mouse pointers */
@media (pointer: coarse) {
  .btn.sm { min-height: 36px; padding-left: 13px; padding-right: 13px; }
  .pager a, .pager span { min-height: 38px; min-width: 38px; display: inline-flex; align-items: center; justify-content: center; }
  table.grid th a.sorth { padding: 9px 0; margin: -9px 0; }
  .footer ul { gap: 0; }
  .footer nav a { padding: 5px 0; }
}
/* phones: each crafting recipe becomes a card - what it makes + level on top, materials full width below */
@media (max-width: 760px) {
  table.grid.recipes, table.grid.recipes > tbody { display: block; }
  table.grid.recipes tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
  table.grid.recipes tr:last-child { border-bottom: 0; }
  table.grid.recipes tr:has(> th) { display: none; }
  table.grid.recipes td { border-bottom: 0; }
  table.grid.recipes td.hide-m { display: none; }
  table.grid.recipes td.rc-lv { padding-bottom: 0; align-self: start; color: var(--ink-3); font-size: 12.5px; }
  table.grid.recipes td.rc-lv::before { content: "Lv. "; }
  table.grid.recipes td:first-child { padding-bottom: 6px; }
  table.grid.recipes td.rc-mats { grid-column: 1 / -1; padding-top: 0; }
  table.grid.recipes td.empty { grid-column: 1 / -1; }
}

/* ---------- /guide: how to use HubCW (templates/guide.html) ---------- */
.hero.guide-hero { padding: 30px 36px 64px; margin-bottom: 20px; }
.guide-hero .lead { margin-bottom: 16px; }
.guide-hero .actions .btn.gray { --b: rgba(255,255,255,.8); --t: #0f1733; }
.guide-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; list-style: none; }
.guide-chips a {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--card);
  border: 1.5px solid var(--line); color: var(--ink-2); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.guide-chips a:hover { border-color: var(--line-2); color: var(--ink); }
.guide-chips i, .guide-toc i {
  font: 700 11px/1 var(--font); font-style: normal; width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--bg-2); color: var(--ink-2);
}
.guide-toc { position: sticky; top: 84px; }
.guide-toc ol { list-style: none; margin: 0; padding: 6px 0; }
.guide-toc a { display: flex; align-items: center; gap: 10px; padding: 7px 18px; color: var(--ink-2); font-size: 13.5px; font-weight: 600; }
.guide-toc a:hover { background: var(--bg-2); color: var(--ink); }
.guide-sec { scroll-margin-top: 80px; }
.guide-sec .box-b > :first-child { margin-top: 0; }
.guide-sec .box-b > :last-child { margin-bottom: 0; }
.guide-sec h3 { font-size: 15px; margin: 22px 0 8px; }
.guide-sec p, .guide-sec li { line-height: 1.6; }
.guide-sec .ui { font-weight: 650; color: var(--ink); white-space: nowrap; }
.steps { list-style: none; counter-reset: step; margin: 10px 0 16px; padding: 0; display: grid; gap: 12px; }
.steps > li { counter-increment: step; position: relative; padding-left: 40px; min-height: 28px; }
.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: -1px; width: 28px; height: 28px; display: flex; align-items: center;
  justify-content: center; border-radius: 8px; background: var(--accent); color: #fff; font: 600 14px/1 var(--pixel);
  box-shadow: 2px 2px 0 var(--hard);
}
.steps > li > b:first-child { display: block; color: var(--ink); }
.g-tip {
  display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; padding: 11px 14px; border-radius: 12px;
  background: var(--blue-soft); border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent); font-size: 13.5px; line-height: 1.55;
}
.g-tip.warn { background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold-ink) 35%, transparent); }
.g-tip > b:first-child { flex: none; color: var(--blue-ink); }
.g-tip.warn > b:first-child { color: var(--gold-ink); }
.g-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 16px; }
.g-cards > div { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); font-size: 13.5px; line-height: 1.55; }
.g-cards > div > b:first-child { display: block; margin-bottom: 2px; color: var(--ink); font-size: 14px; }
.guide-sec table.grid td:first-child { white-space: nowrap; }
.guide-faq h3:first-child { margin-top: 0; }
.guide-faq p { margin: 0 0 6px; }
@media (min-width: 1021px) { .guide-chips { display: none; } }
@media (max-width: 1020px) { .guide-toc { display: none; } }
@media (max-width: 760px) {
  .hero.guide-hero { padding: 20px 16px 50px; }
  .g-cards { grid-template-columns: minmax(0, 1fr); }
  .guide-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -14px 16px; padding: 2px 14px 4px; }
  .guide-chips::-webkit-scrollbar { display: none; }
  .guide-sec table.grid td:first-child { white-space: normal; }
}

/* ---------- home hero: the stats and a CW Companion card in a right-hand column (templates/index.html) ---------- */
.hero-side { position: relative; z-index: 2; flex: none; width: 412px; display: flex; flex-direction: column; gap: 12px; }
.hero-side .hero-stats { align-self: stretch; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-app { display: flex; flex-direction: column; gap: 11px; padding: 15px 16px; border-radius: 16px; color: var(--ink);
  background: radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%), color-mix(in srgb, var(--card) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--hard) 12%, transparent); box-shadow: var(--shadow); backdrop-filter: blur(8px);
  transition: transform .12s, box-shadow .12s, border-color .12s; }
.hero-app:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in srgb, var(--hard) 24%, transparent); }
.ha-head { display: flex; align-items: center; gap: 14px; }
.ha-head > img { flex: none; width: 46px; height: 46px; border-radius: 12px; box-shadow: 0 3px 10px rgba(178, 70, 0, .3); }
.ha-text { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ha-top { display: flex; align-items: center; gap: 8px; }
.ha-top b { font: 750 16px/1.2 var(--font); letter-spacing: -.1px; }
.ha-top em { font: 700 10px/1 var(--font); font-style: normal; text-transform: uppercase; letter-spacing: .08em; color: #fff;
  background: var(--accent); padding: 4px 7px; border-radius: 999px; }
.ha-sub { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
/* the app's dark price panel, in miniature; dark in both themes like the real overlay */
.ha-panel { display: flex; flex-direction: column; padding: 2px 10px; border-radius: 10px; color: #e8ebf5; background: #181c2c;
  border: 1px solid #0c0f1c; box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 16px rgba(15,23,51,.16); }
:root[data-theme="dark"] .ha-panel { background: #0e1222; border-color: rgba(255,255,255,.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ha-panel { background: #0e1222; border-color: rgba(255,255,255,.08); } }
.ha-row { display: flex; align-items: center; gap: 9px; padding: 4px 0; font-size: 12.5px; line-height: 1.2; }
.ha-row + .ha-row { border-top: 1px solid rgba(255,255,255,.07); }
.ha-row img { flex: none; width: 24px; height: 24px; object-fit: contain; }
.ha-nm { flex: 1; min-width: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ha-p { color: #8d94ad; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.ha-row i { flex: none; min-width: 84px; text-align: center; font: 700 10.5px/1 var(--font); font-style: normal; padding: 4px 8px; border-radius: 999px; border: 1px solid; }
.ha-row .cheap { color: #6be0a3; background: rgba(31,157,87,.16); border-color: rgba(31,157,87,.55); }
.ha-row .fair { color: #c4c8d6; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.ha-row .pricey { color: #ff9ca0; background: rgba(217,63,69,.16); border-color: rgba(217,63,69,.6); }
.ha-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ha-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.ha-meta svg { width: 13px; height: 13px; color: #0a7bd6; }
:root[data-theme="dark"] .ha-meta svg { color: #4aa8f0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ha-meta svg { color: #4aa8f0; } }
.hero-app:hover .ha-go { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--hard); filter: brightness(1.04); }
@media (max-width: 1020px) { .hero-side { width: auto; max-width: 460px; align-self: flex-start; } }
@media (max-width: 760px) {
  .hero-side { max-width: none; align-self: stretch; gap: 10px; }
  .hero-app { gap: 10px; padding: 14px; }
  .ha-head { gap: 12px; }
  .ha-head > img { width: 42px; height: 42px; border-radius: 11px; }
  .ha-row.fair-row { display: none; }
}
@media (max-width: 420px) { .ha-p { display: none; } }
@media (max-width: 380px) { .ha-panel { padding: 2px 8px; } .ha-row { gap: 7px; } .ha-row i { min-width: 0; padding: 4px 7px; } .ha-row i span { display: none; } }

/* ---------- admin panel (templates/admin/*, 2026-10-16) ---------- */
.adm-nav a { display: inline-flex; align-items: center; gap: 5px; }
.adm-badge { font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 999px; background: var(--red); color: #fff; }
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.adm-head h1 { margin: 0; }
.adm-head h1 small, h1 > small.muted { font-family: var(--font); font-size: 15px; font-weight: 600; }
.adm-find input { width: 300px; max-width: 100%; }
.adm-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 20px; }
.adm-todo a { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--blue); color: var(--ink); font-weight: 600; box-shadow: var(--shadow); }
.adm-todo a b { font-size: 18px; font-family: var(--pixel); }
.adm-todo a span { margin-left: auto; font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.adm-todo a:hover span { color: var(--accent-ink); }
.adm-todo a.red { border-left-color: var(--red); }
.adm-todo a.orange { border-left-color: var(--accent); }
.adm-todo.clear p { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--green-soft); color: var(--green-ink); font-weight: 600; }
.adm-stats { margin-bottom: 20px; }
.statbox .adm-sub { display: block; font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.statbox .adm-bad { background: var(--red-soft); border-color: transparent; }
.statbox .adm-good { background: var(--green-soft); border-color: transparent; }
.adm-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.adm-cols > div > .box + .box { margin-top: 20px; }
.adm-spark { display: flex; flex-direction: column; gap: 14px; }
.adm-spark-row { display: flex; align-items: flex-end; gap: 14px; }
.adm-spark-l { width: 112px; flex: none; }
.adm-spark-l b { display: block; font-family: var(--pixel); font-size: 20px; line-height: 1.1; }
.adm-spark-l small { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.adm-bars { flex: 1; display: flex; align-items: flex-end; gap: 3px; height: 42px; border-bottom: 1px solid var(--line); }
.adm-bars i { flex: 1; height: max(2px, var(--h)); background: color-mix(in srgb, var(--blue) 70%, transparent); border-radius: 3px 3px 0 0; }
.adm-bars i.today { background: var(--accent); }
.adm-bars i:hover { filter: brightness(1.15); }
.adm-spark-axis { display: flex; justify-content: space-between; margin: -8px 0 0 126px; font-size: 11.5px; color: var(--ink-3); }
.adm-cwc-nums { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.adm-cwc-nums .adm-spark-l { width: auto; flex: 1 1 84px; }
.adm-cwc-ver { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.adm-cwc-ver li { display: grid; grid-template-columns: 112px minmax(0, 1fr) 40px; align-items: center; gap: 14px; font-size: 13px; font-weight: 600; }
.adm-cwc-ver li small { color: var(--green); font-size: 11px; font-weight: 700; }
.adm-cwc-ver i { height: 10px; width: max(2px, var(--w)); background: color-mix(in srgb, var(--blue) 70%, transparent); border-radius: 3px; }
.adm-cwc-ver li.latest i { background: var(--green); }
.adm-cwc-ver b { text-align: right; font-variant-numeric: tabular-nums; }
.adm-cwc-note { margin: 14px 0 0; font-size: 12px; color: var(--ink-3); }
.adm-ga-prize { display: flex; align-items: center; gap: 8px; font-size: 16px; margin-bottom: 4px; }
.adm-feed { list-style: none; margin: 0; padding: 0; }
.adm-feed li { display: flex; gap: 12px; padding: 9px 18px; border-bottom: 1px solid var(--line); font-size: 14px; }
.adm-feed li:last-child { border-bottom: 0; }
.adm-feed li.empty { color: var(--ink-3); justify-content: center; padding: 18px; }
.adm-feed-t { flex: none; width: 82px; font-size: 12.5px; color: var(--ink-3); padding-top: 1px; }
.adm-feed-x { min-width: 0; overflow-wrap: anywhere; }
.adm-note { background: var(--gold-soft); color: var(--ink); padding: 0 4px; border-radius: 4px; }
.adm-who { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.adm-who small { display: block; font-size: 12px; }
.adm-av { position: relative; flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--bg-2); overflow: hidden; }
.adm-av img { max-width: 34px; max-height: 34px; image-rendering: pixelated; }
.adm-av .mem-on { top: 2px; right: 2px; width: 8px; height: 8px; box-shadow: 0 0 0 2px var(--card); }
.adm-g { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 0 5px; border-radius: 4px; background: var(--blue-soft); color: var(--blue-ink); vertical-align: 1px; }
.adm-g.adm-d { background: #5865f2; color: #fff; }
table.grid tr.adm-banned td { opacity: .6; }
.adm-member-head { display: flex; gap: 18px; align-items: center; margin-bottom: 16px; }
.adm-member-head h1 { margin-bottom: 4px; }
.adm-member-head p { margin: 0 0 8px; }
.adm-member-av { position: relative; flex: none; width: 120px; height: 120px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; border-radius: 14px; overflow: hidden; border: 2px solid var(--hard); background: linear-gradient(var(--sky-1), var(--sky-2)); }
.adm-member-av::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: linear-gradient(var(--grass-1) 0 5px, var(--grass-2) 5px 7px, var(--dirt) 7px); }
.adm-member-av img { position: relative; z-index: 1; image-rendering: pixelated; max-height: 96px; width: auto; }
.adm-member-head.banned .adm-member-av { filter: grayscale(1); }
table.adm-facts th { width: 150px; text-align: left; text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 600; color: var(--ink-3); background: transparent; border-bottom: 1px solid var(--line); padding: 10px 14px; vertical-align: top; }
table.adm-facts tr:last-child th { border-bottom: 0; }
.adm-actions form + form { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); }
.actions .grow, .adm-actions .grow { flex: 1; min-width: 180px; }
td.adm-row-acts { text-align: right; white-space: nowrap; }
td.adm-row-acts .actions { justify-content: flex-end; flex-wrap: wrap; white-space: normal; }
td.adm-row-acts form.inline + form.inline { margin-left: 4px; }
.adm-radio { display: block; font-weight: 500; margin: 6px 0; }
.adm-errors td:first-child { width: 90px; white-space: nowrap; vertical-align: top; }
.adm-errors code { font-size: 12.5px; overflow-wrap: anywhere; }
.adm-errors details summary { cursor: pointer; font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.adm-errors pre { margin: 6px 0 0; padding: 8px 10px; max-height: 260px; overflow: auto; font-size: 11.5px; background: var(--bg-2); border-radius: 8px; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .adm-cols { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .adm-find, .adm-find input { width: 100%; }
  .adm-spark-l { width: 84px; }
  .adm-spark-axis { margin-left: 98px; }
  .adm-feed li { padding: 9px 12px; gap: 8px; }
  .adm-feed-t { width: 62px; }
  .adm-member-av { width: 84px; height: 96px; }
  .adm-member-av img { max-height: 72px; }
  table.adm-facts th { width: 110px; }
  td.adm-row-acts { white-space: normal; }
  td.adm-row-acts form.inline { display: inline-block; margin: 2px 0; }
}
.adm-cols .field > input[type=text], .adm-cols .field > textarea { width: 100%; }
.adm-errors tr.adm-seen td { opacity: .6; }
.adm-reasons { margin: 0; padding: 0; list-style: none; }
.adm-reasons li + li { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
@media (max-width: 760px) {
  table.grid td.adm-row-acts { width: 1%; padding-left: 4px; }
  td.adm-row-acts form.inline { display: block; margin: 0 0 6px; }
  td.adm-row-acts form.inline + form.inline { margin-left: 0; }
  td.adm-row-acts .btn.sm { width: 100%; }
  td.adm-row-acts .actions { flex-direction: column; align-items: stretch; gap: 6px; }
  table.adm-listings td.ic { width: 34px; padding-left: 8px; }
}
/* admin: member IPs (src/user_ips.php) */
.adm-ip { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; overflow-wrap: anywhere; }
.adm-cc { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 0 4px; border-radius: 4px; background: var(--bg-2); color: var(--ink-2); vertical-align: 1px; letter-spacing: .02em; }
.adm-where { display: block; font-size: 12px; }
.adm-isp { display: block; }
.adm-also { display: block; font-size: 12px; margin-top: 2px; color: var(--red-ink); }
.adm-alts small { display: block; margin-top: 2px; font-size: 12px; }
.adm-ipcell { min-width: 150px; max-width: 230px; }
.adm-ipcell .kind { display: inline-block; margin-top: 3px; }
.adm-ips td.num small { display: block; white-space: nowrap; }

/* ---------- languages (2026-10-20, src/i18n.php): the top bar's globe menu, the footer list, the suggestion bar ---------- */
.langmenu { position: relative; flex: none; }
.langmenu summary { list-style: none; }
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu[open] summary { background: var(--bg-2); color: var(--ink); }
.langmenu .menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 150px; background: var(--card); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px; z-index: 60;
}
.langmenu .menu a { display: block; padding: 8px 12px; border-radius: 9px; color: var(--ink); font-size: 14px; white-space: nowrap; }
.langmenu .menu a:hover { background: var(--bg-2); color: var(--ink); }
.langmenu .menu a.on { font-weight: 700; color: var(--accent-ink); }
.langmenu .menu a.on::after { content: " ✓"; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .langmenu .menu { background: color-mix(in srgb, var(--card) 88%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
}
@media (prefers-reduced-transparency: reduce) {
  .langmenu .menu { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.usermenu .menu .menu-langs { display: flex; flex-wrap: wrap; gap: 2px; padding: 2px 4px; }
.usermenu .menu .menu-langs a { width: auto; padding: 5px 7px; font-size: 13px; color: var(--ink-2); }
.usermenu .menu .menu-langs a.on { color: var(--accent-ink); font-weight: 700; }
.footer .f-langs { display: flex; flex-wrap: wrap; gap: 4px 14px; flex: none; }
.footer .f-langs a { color: var(--ink-2); font-weight: 600; }
.footer .f-langs a.on { color: var(--accent-ink); }
.langhint { background: color-mix(in srgb, var(--accent) 12%, var(--card)); border-bottom: 1px solid var(--line); font-size: 14px; }
.langhint .wrap { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.langhint span { flex: 1; color: var(--ink); }
.langhint-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--ink-3); cursor: pointer; padding: 0 4px; }
.langhint-x:hover { color: var(--ink); }
/* CJK text: Inter and Pixelify Sans have no CJK glyphs, so the system's CJK fonts come right after them (the pixel
   font's monospace fallback would be used otherwise), and Korean wraps between words */
:root[lang="ko"] { --font: "Inter", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  --pixel: "Pixelify Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif; }
:root[lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }
:root[lang="zh-CN"] { --font: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --pixel: "Pixelify Sans", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; }
:root[lang="ja"] { --font: "Inter", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif;
  --pixel: "Pixelify Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", system-ui, sans-serif; }
/* ---------- /cw-update: Classic World patch notes (templates/cw_update.html, data/cw_updates.json) ---------- */
.cwu > .box { margin-bottom: 20px; }
.cwu { scroll-margin-top: 80px; }
.cwu .box, .cwu-mc { scroll-margin-top: 124px; } /* clear the top bar and the section bar */
.cwu-top { margin: 2px 0 18px; }
.cwu-top h1 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 6px; }
.cwu-top h1 small { font-family: var(--font); font-size: 13px; font-weight: 600; color: var(--ink-3); }
.cwu-top p { max-width: 900px; margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.cwu-top .chips { margin: 12px 0 0; }
/* the patch banner: sky, the new map fading in on the right, new monsters walking the ground */
.hero.cwu-hero { align-items: flex-start; min-height: 290px; margin-bottom: 16px; padding: 28px 36px 64px; }
.cwu-hero .cwu-art { position: absolute; top: 0; right: 0; bottom: 22px; z-index: 0; width: 54%; height: calc(100% - 22px); object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 22%, #000 55%); mask-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .35) 22%, #000 55%); }
.cwu-hero .hero-main { max-width: 640px; }
.cwu-hero .eyebrow .sep { opacity: .45; }
.cwu-hero h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 10px; color: inherit; letter-spacing: .2px; }
.cwu-hero .lead { max-width: none; margin: 0 0 8px; font-size: 15px; line-height: 1.6; opacity: .88; }
.cwu-hero .cwu-since { margin: 0; font-size: 12.5px; opacity: .7; }
/* the numbers: one row of what was added, one of what changed */
.cwu-sum { padding: 4px 18px; }
.cwu-grp { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 0; }
.cwu-grp + .cwu-grp { border-top: 1px dashed var(--line); }
.cwu-grp-h { display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-2); }
.cwu-grp-h::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); box-shadow: 1.5px 1.5px 0 var(--hard); }
.cwu-grp.new .cwu-grp-h::before { background: var(--green); }
.cwu-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(128px, 100%), 1fr)); gap: 10px; }
.cwu-stats a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2);
  color: var(--ink-3); font-size: 12.5px; font-weight: 600; line-height: 1.35; transition: transform .1s, box-shadow .1s, border-color .1s; }
.cwu-stats a b { font-family: var(--pixel); font-size: 22px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.cwu-stats a.new { background: color-mix(in srgb, var(--green-soft) 55%, var(--card)); border-color: color-mix(in srgb, var(--green) 22%, var(--line)); }
.cwu-stats a.new b { color: var(--green-ink); }
.cwu-stats a.gone { background: color-mix(in srgb, var(--red-soft) 55%, var(--card)); border-color: color-mix(in srgb, var(--red) 22%, var(--line)); }
.cwu-stats a.gone b { color: var(--red-ink); }
.cwu-stats a:hover { border-color: var(--hard); box-shadow: 3px 3px 0 var(--hard); transform: translate(-1px, -1px); color: var(--ink-2); }
/* the section bar: hubcw.js pins it under the top bar (sets top) and shows it once the numbers have scrolled away */
.cwu-nav { position: fixed; left: 0; right: 0; top: 64px; z-index: 44; border-bottom: 1px solid var(--line); box-shadow: 0 6px 16px rgba(15, 23, 51, .06);
  opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .15s, transform .15s, visibility .15s; }
.cwu-nav::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); }
.cwu-nav.on { opacity: 1; visibility: visible; transform: none; }
.cwu-nav .wrap { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-top: 7px; padding-bottom: 7px; }
.cwu-nav .wrap::-webkit-scrollbar { display: none; }
/* fade the ends while there are more sections off to that side */
.cwu-nav .wrap.more-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.cwu-nav .wrap.more-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.cwu-nav .wrap.more-l.more-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }
.cwu-nav a { flex: none; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.cwu-nav a small { font-size: 11.5px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.cwu-nav a:hover { background: var(--bg-2); color: var(--ink); }
.cwu-nav a.on { background: var(--ink); color: var(--card); }
.cwu-nav a.on small { color: inherit; opacity: .7; }
@media (prefers-reduced-motion: reduce) { .cwu-nav { transition: none; } }
.cwu-line { display: flex; align-items: baseline; gap: 8px; padding: 12px 18px 10px; border-top: 1px solid var(--line); background: var(--card-2);
  font-family: var(--pixel); font-weight: 600; font-size: 15px; }
.box-h + .cwu-line { border-top: 0; }
.cwu-line small { font-family: var(--font); font-size: 12px; color: var(--ink-3); }
.cwu-items { margin: 0; padding-top: 12px; padding-bottom: 14px; }
.cwu-ch { margin: 0; padding: 0; list-style: none; font-size: 13.5px; }
.cwu-ch li + li { margin-top: 3px; }
.cwu-ch .lbl { color: var(--ink-2); }
.cwu-ch .lbl::after { content: ":"; }
.cwu-ch .arr { color: var(--ink-3); }
.cwu .from { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--red) 60%, transparent); }
.cwu .to { color: var(--green-ink); font-weight: 650; }
.cwu-icons { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 2px; }
.cwu-n { display: inline-block; min-width: 30px; padding: 3px 6px; border-radius: 8px; background: var(--bg-2); font-weight: 700; color: var(--ink-2); }
details.cwu-more > summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none;
  font-family: var(--pixel); font-weight: 600; font-size: 16px; }
details.cwu-more > summary::-webkit-details-marker { display: none; }
details.cwu-more > summary::before { content: "\25B8"; color: var(--ink-3); font-size: 13px; transition: transform .15s; }
details.cwu-more[open] > summary::before { transform: rotate(90deg); }
details.cwu-more > summary small { font-family: var(--font); font-size: 12.5px; color: var(--ink-3); }
details.cwu-more[open] > summary { border-bottom: 1px solid var(--line); }
.cwu-list { font-size: 13.5px; line-height: 1.7; margin: 0 0 12px; }
.cwu table.grid .cwu-c { width: 50%; min-width: 200px; }
/* new quests: one table per quest line, lined up as one (the column heads show once, under the first line) */
.cwu-quests table.grid { table-layout: fixed; }
.cwu-quests table.grid tr > :nth-child(2) { width: 64px; }
.cwu-quests table.grid tr > :nth-child(3) { width: 22%; }
.cwu-quests table.grid tr > :nth-child(4) { width: 15%; }
.cwu-quests table.grid tr > :nth-child(5), .cwu-quests table.grid tr > :nth-child(6) { width: 96px; }
.cwu-quests .box-b ~ .box-b tr:has(> th) { display: none; }
/* new NPCs */
.cwu-npcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; }
.cwu-npc { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 14px 10px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2); }
.cwu-npc .pic { flex: none; display: flex; align-items: flex-end; justify-content: center; width: 56px; height: 60px; }
.cwu-npc .pic img { max-width: 56px; }
.cwu-npc small { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.45; }
@media (max-width: 760px) {
  .hero.cwu-hero { min-height: 0; padding: 128px 16px 56px; }
  .cwu-hero .cwu-art { width: 100%; height: 170px; bottom: auto;
    -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent); mask-image: linear-gradient(180deg, #000 45%, transparent); }
  .cwu-hero .eyebrow { font-size: 11.5px; }
  .cwu-hero h2 { font-size: 20px; }
  .cwu-hero .lead { font-size: 14px; }
  .cwu-sum { padding: 2px 14px; }
  .cwu-grp { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cwu-stats { grid-template-columns: repeat(auto-fill, minmax(min(100px, 100%), 1fr)); gap: 8px; }
  .cwu-stats a { padding: 8px 10px; font-size: 12px; }
  .cwu-stats a b { font-size: 19px; }
  .cwu-quests table.grid tr > :nth-child(2) { width: 44px; }
  .cwu-quests table.grid tr > :nth-child(5) { width: 76px; }
}

/* ---------- /guides: the guide list and the guides (templates/guides/, src/guides.php) ---------- */
.gl-builds { display: grid; gap: 12px; }
.gl-build { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--card-2); color: var(--ink); transition: transform .1s, box-shadow .1s, border-color .1s; }
.gl-build:hover { border-color: var(--hard); box-shadow: 3px 3px 0 var(--hard); transform: translate(-1px, -1px); color: var(--ink); }
.gl-build .ci { flex: none; width: 48px; height: 48px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--line);
  display: flex; align-items: center; justify-content: center; }
.gl-build .ci img { image-rendering: pixelated; }
.gl-txt { display: grid; gap: 3px; min-width: 0; }
.gl-txt b { font: 600 17px/1.25 var(--pixel); }
.gl-txt > span { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.gl-txt small { color: var(--ink-3); font-size: 12.5px; font-weight: 600; }
.gl-more { margin: -6px 2px 20px; font-size: 13.5px; }
/* the list page: jump chips in the banner, the "every guide has" row, one .jcard per class, then "More help" */
.gl-jump a { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.gl-jump img { width: 20px; height: 20px; image-rendering: pixelated; margin: -2px 0 -2px -4px; }
.gl-intro .box-b > p { margin: 0 0 12px; }
.gl-has { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.gl-has > span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.gl-has ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.gl-has li { padding: 4px 11px 4px 9px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card-2); font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.gl-has li::before { content: "\2713"; margin-right: 6px; color: var(--green); font-weight: 800; }
.gl-fam, #mechanics, #more { scroll-margin-top: 80px; }
.gl-fam .gl-builds { gap: 10px; }
.gl-fam .gl-build { padding: 12px 14px; gap: 12px; background: var(--card-2); }
.gl-fam .gl-build:hover { box-shadow: 3px 3px 0 var(--jc); }
.gl-fam .gl-build .ci { width: 44px; height: 44px; }
.gl-fam .gl-txt b { font-size: 16px; }
.gl-fam .gl-txt > span { font-size: 13.5px; line-height: 1.45; }
.gl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px 18px; }
.gl-col-h { margin: 0 0 8px; font: 600 15px/1.2 var(--pixel); color: var(--ink-2); }
.gl-links.cats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.gl-links.cats a small { line-height: 1.4; }
/* "More guides" at the foot of each guide (templates/guides/_others.html) */
.gl-others .box-b { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-others a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--card-2); color: var(--ink); font-weight: 600; font-size: 13px; }
.gl-others a:hover { border-color: var(--hard); color: var(--ink); }
.gl-others a.kin { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--accent-soft); }
.gl-others a img { width: 26px; height: 26px; image-rendering: pixelated; }
.gl-others a.all { padding-left: 12px; color: var(--ink-2); }

/* the Ice/Lightning guide: sky banner with the Lv. 70 skill window, the planner, charts and matchups */
.hero.il-hero { align-items: flex-start; }
.il-budget { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.il-budget > div { background: rgba(255,255,255,.7); border: 1px solid rgba(15,23,51,.12); border-radius: 12px; padding: 8px 14px; min-width: 120px; }
.il-budget b { display: block; font: 600 24px/1.1 var(--pixel); color: #0f1733; }
.il-budget span { display: block; font-size: 12px; font-weight: 600; color: #3b4466; }
.il-window { position: relative; z-index: 2; flex: none; width: 300px; background: var(--card); color: var(--ink); border: 1.5px solid var(--hard);
  border-radius: 14px; box-shadow: 4px 4px 0 var(--hard); padding: 12px; display: grid; gap: 6px; }
.il-window-h { font: 600 15px/1.2 var(--pixel); }
.il-window-job { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--ink-3); margin-top: 4px; }
.il-window-rows { display: grid; gap: 4px; }
.il-wrow { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; font-weight: 600;
  padding: 3px 8px 3px 4px; border-radius: 8px; background: var(--card-2); }
.il-wrow .il-ico { width: 26px; height: 26px; }
.il-wrow span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.il-wrow b { font: 600 13px/1 var(--pixel); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.il-wrow.max b { color: var(--accent-ink); }
.il-wrow.zero { opacity: .45; }
.il-ico { width: 32px; height: 32px; image-rendering: pixelated; flex: none; }

.il-planner { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 18px; margin-top: 12px; }
.il-p-side { display: grid; gap: 12px; align-content: start; }
.il-p-lv { display: flex; align-items: baseline; gap: 10px; }
.il-p-lv b { font: 600 46px/1 var(--pixel); font-variant-numeric: tabular-nums; }
.il-p-lv span { font-weight: 700; color: var(--ink-2); }
.il-p-range { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.il-p-range input { width: 100%; accent-color: var(--accent); }
.il-p-range .btn { width: 34px; justify-content: center; padding-left: 0; padding-right: 0; }
.il-p-jumps { display: flex; flex-wrap: wrap; gap: 5px; }
.il-p-jumps button { font: 600 12px/1 var(--font); padding: 5px 9px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--card-2);
  color: var(--ink-2); cursor: pointer; }
.il-p-jumps button:hover, .il-p-jumps button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); }
.il-p-field { display: grid; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.il-p-field select { width: 100%; }
.il-p-callout { margin: 0; flex-direction: column; gap: 4px; }
.il-p-skills { display: grid; gap: 14px; align-content: start; min-width: 0; }
.il-p-book { display: grid; gap: 3px; }
.il-p-bh { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.il-p-bh b { color: var(--ink-2); }
.il-p-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) 54px; gap: 10px; align-items: center; padding: 4px 8px 4px 4px; border-radius: 10px; }
.il-p-row .nm { font-size: 13.5px; font-weight: 600; min-width: 0; }
.il-p-row .nm i { font-style: normal; color: var(--accent-ink); font-weight: 800; }
.il-p-row .bar { display: block; height: 6px; margin-top: 4px; background: var(--bg-2); border-radius: 999px; overflow: hidden; }
.il-p-row .bar span { display: block; height: 100%; background: var(--blue); border-radius: 999px; }
.il-p-row > b { font: 600 14px/1 var(--pixel); text-align: right; font-variant-numeric: tabular-nums; }
.il-p-row.on { background: var(--accent-soft); }
.il-p-row.zero { opacity: .45; }
.il-p-book.locked { opacity: .5; }

/* position: the scroll box clips the .sr-only text of its price cells, which would otherwise widen phone pages */
.il-table { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; margin: 12px 0 16px; }
.il-table table.grid td { padding: 8px 12px; vertical-align: top; }
.il-table table.grid td small { line-height: 1.5; }
.il-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; margin: 12px 0; }
.il-two .il-table { margin: 0; }
.il-chart { margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); min-width: 0; }
.il-chart figcaption { font-size: 13px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; line-height: 1.45; }
.il-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.il-chart svg text { font: 500 12px var(--font); fill: var(--ink-3); }
.il-chart svg text.lb { font-weight: 700; fill: var(--ink-2); }
#math .il-notes { margin-top: 4px; }
.il-chart .gl { stroke: var(--line); stroke-width: 1; }
.il-chart .ref { stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.il-chart .b0 { fill: var(--blue); opacity: .45; }
.il-chart .b1, .il-chart .b2 { fill: var(--blue); }
.il-chart .b3 { fill: var(--accent); }
.il-chart polyline { fill: none; stroke-width: 2; stroke-linejoin: round; }
.il-chart .l1 { stroke: var(--blue); } .il-chart .dl1 { fill: var(--blue); }
.il-chart .l2 { stroke: var(--green); } .il-chart .dl2 { fill: var(--green); }
.il-chart .l3 { stroke: var(--red); } .il-chart .dl3 { fill: var(--red); }
.il-chart circle { stroke: var(--card-2); stroke-width: 2; }
.il-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 12px; color: var(--ink-2); }
.il-legend span { display: inline-flex; align-items: center; gap: 6px; }
.il-legend i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.il-legend i.l1 { background: var(--blue); } .il-legend i.l2 { background: var(--green); } .il-legend i.l3 { background: var(--red); }
.il-legend i.b2 { background: var(--blue); height: 10px; width: 10px; } .il-legend i.b3 { background: var(--accent); height: 10px; width: 10px; }
.il-legend i.ref { background: repeating-linear-gradient(90deg, var(--ink-2) 0 4px, transparent 4px 7px); }

.il-skills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.il-skill { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); display: grid; gap: 8px; align-content: start; min-width: 0; }
.il-skill-h { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.il-skill-h b { display: block; font-size: 14.5px; }
.il-skill-h small { color: var(--ink-3); font-size: 12px; }
.il-skill p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.il-v-max { background: var(--green-soft); color: var(--green-ink); }
.il-v-part { background: var(--gold-soft); color: var(--gold-ink); }
.il-v-skip { background: var(--bg-2); color: var(--ink-3); }
.il-facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 0; font-size: 12.5px; }
.il-facts dt { color: var(--ink-3); font-weight: 600; }
.il-facts dd { margin: 0; font-variant-numeric: tabular-nums; }

.il-els { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0; }
.il-el { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); min-width: 0; }
.il-el h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; margin: 0 0 8px; }
.il-el ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.il-el li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13.5px; line-height: 1.45; }
.il-el li > a { display: flex; justify-content: center; align-items: center; height: 40px; }
.il-el li img { max-width: 44px; max-height: 40px; image-rendering: pixelated; }
.il-good { background: var(--green-soft); color: var(--green-ink); }
.il-bad { background: var(--red-soft); color: var(--red-ink); }
.il-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
/* Budget and Pro builds: two cards, a gear grid (slot | Budget | Pro, stacked on phones) and the Magic total table */
.il-builds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 12px 0 18px; }
.il-build { padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); display: grid; gap: 10px; align-content: start; min-width: 0; }
.il-build-h { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.il-build-h b { font-size: 15px; color: var(--ink); }
.il-build dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: 13.5px; line-height: 1.55; }
.il-build dt { color: var(--ink-3); font-weight: 600; }
.il-build dd { margin: 0; color: var(--ink-2); }
.il-build .btn { justify-self: start; }
.il-gear { border: 1px solid var(--line); border-radius: 12px; margin: 12px 0 8px; overflow: hidden; }
.il-gear-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.6fr); gap: 12px; padding: 10px 12px; align-items: start; }
.il-gear-row + .il-gear-row { border-top: 1px solid var(--line); }
.il-gear-head { background: var(--bg-2); padding-top: 8px; padding-bottom: 8px; font-size: 13px; }
.il-gear-slot { font-size: 13.5px; padding-top: 4px; }
.il-gear-cell ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.il-gear-cell > small { display: block; padding-top: 4px; }
.il-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 4px; border: 1px solid var(--line); border-radius: 9px; background: var(--card-2); font-size: 12.5px; line-height: 1.35; max-width: 100%; }
.il-chip img.ico { width: 26px; height: 26px; flex: none; }
.il-chip .nm { min-width: 0; }
.il-chip .nm small { color: var(--ink-3); font-weight: 600; }
.il-chip .pr { flex: none; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.il-mtable td { white-space: nowrap; }
.guide-sec table.il-stable td:first-child { white-space: normal; min-width: 180px; }
.il-stable td.num { white-space: nowrap; }
.il-mbar { display: block; height: 6px; width: 100%; min-width: 90px; border-radius: 3px; background: var(--bg-2); margin: 3px 0 5px; overflow: hidden; }
.il-mbar span { display: block; height: 100%; border-radius: 3px; background: var(--gold-ink); opacity: .7; }
.il-mbar.pro span { background: var(--green); opacity: 1; }
/* Assassin guide: a level-table cell with one line per build, and the accuracy chart's dot legend */
.as-b { display: block; }
.as-b + .as-b { margin-top: 5px; }
.as-b .tag { margin-right: 2px; }
.il-legend i.as-dot { width: 9px; height: 9px; border-radius: 50%; }
.il-legend i.dl1 { background: var(--blue); } .il-legend i.dl2 { background: var(--green); } .il-legend i.dl3 { background: var(--red); }
/* Assassin guide: each build card's gear cost */
.as-cost { margin: 12px 0 10px; font-size: 13px; color: var(--ink-2); }
/* Where to train, in every class guide (templates/guides/_train.html): one row per level, its best monsters as cards */
.tr-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 4px; font-size: 13px; color: var(--ink-2); }
.tr-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tr-table .il-gear-row { grid-template-columns: 60px minmax(0, 1fr); }
.tr-table .il-gear-slot { padding-top: 10px; }
.tr-picks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tr-picks li { display: flex; gap: 8px; align-items: flex-start; min-width: 0; padding: 8px 10px 8px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-2); font-size: 13px; line-height: 1.45; }
.tr-picks li:first-child { border-color: var(--line-2); background: var(--card); }
.tr-picks li > div { min-width: 0; }
.tr-picks small { display: block; }
.tr-picks a.tr-mob { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.tr-picks a.tr-mob img.mobimg { max-width: 40px; max-height: 40px; object-fit: contain; }
.tr-casts { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 8px; margin: 3px 0 2px; font-size: 12.5px; }
.tr-casts > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tr-casts .tag { font-size: 11px; padding: 0 6px; }
.tr-casts small { display: inline; }
:root[data-theme="dark"] .il-budget > div { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
:root[data-theme="dark"] .il-budget b { color: #fff; }
:root[data-theme="dark"] .il-budget span { color: #c9d1ee; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .il-budget > div { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .il-budget b { color: #fff; }
  :root:not([data-theme="light"]) .il-budget span { color: #c9d1ee; }
}
@media (max-width: 1100px) {
  .hero.il-hero { flex-direction: column; align-items: stretch; }
  .il-window { width: auto; }
  .il-window-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .il-two { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .il-planner, .il-skills, .il-els, .il-builds { grid-template-columns: minmax(0, 1fr); }
  .il-gear-head { display: none; }
  .il-gear-row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .il-gear-cell::before { content: attr(data-build); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); margin-bottom: 4px; }
  .il-gear-slot { padding-top: 0; }
  .il-window-rows { grid-template-columns: minmax(0, 1fr); }
  .il-budget > div { min-width: 0; flex: 1 1 30%; }
  .il-budget b { font-size: 20px; }
  .tr-table .il-gear-row { grid-template-columns: minmax(0, 1fr); }
  .tr-table .il-gear-slot { padding-top: 0; }
  .tr-picks { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* HP washing guide (templates/guides/hp_washing.html): the verdict card, HP scroll table and per-class gear lists */
.hw-window .hw-verdict { font: 600 40px/1 var(--pixel); color: var(--red); margin: 2px 0 4px; }
.hw-window .il-wrow img.ico { width: 26px; height: 26px; }
.hw-window .il-wrow b { font-size: 12px; }
.hw-sex { margin-left: 2px; color: var(--blue-ink); font-weight: 700; }
.hw-sex.f { color: var(--red); }
.hw-hp { color: var(--green-ink); font-variant-numeric: tabular-nums; }
.hw-stable tr.hw-best td { background: var(--green-soft); }
.hw-stable td, .hw-stable th { padding-left: 10px; padding-right: 10px; }
.hw-stable td:first-child { white-space: nowrap; }
.hw-prices > span { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hw-prices small { display: inline-block; min-width: 52px; color: var(--ink-3); font-weight: 600; }
.hw-class { border: 1px solid var(--line); border-radius: 12px; margin: 10px 0; padding: 0 12px; background: var(--card); }
.hw-class > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 11px 2px; }
.hw-class > summary b { font: 600 16px/1.2 var(--pixel); color: var(--ink); }
.hw-class > summary span { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.hw-class .il-gear { margin: 0 0 8px; }
.hw-class > p { font-size: 13px; margin: 0 0 12px; }
.hw-gear .il-gear-row { grid-template-columns: 92px minmax(0, 1fr); }
.hw-gear .il-gear-cell::before { content: none; }
@media (max-width: 760px) {
  .hw-gear .il-gear-row { grid-template-columns: minmax(0, 1fr); }
  .hw-ctable tr:first-child { display: none; }
  .hw-ctable tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 12px; padding: 10px 12px; }
  .hw-ctable tr + tr { border-top: 1px solid var(--line); }
  .hw-ctable td { display: block; padding: 0 !important; border: 0; }
  .hw-ctable td:first-child, .hw-ctable td:last-child { grid-column: 1 / -1; }
  .hw-ctable td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
  .hw-stable tr { display: grid; grid-template-columns: minmax(0, 1fr) 70px 50px 76px; align-items: start; }
  .il-table table.hw-stable th { font-size: 10px; letter-spacing: 0; white-space: normal; padding-top: 8px; padding-bottom: 8px; }
  .hw-stable tr + tr { border-top: 1px solid var(--line); }
  .hw-stable td, .hw-stable th { border: 0; padding-left: 6px; padding-right: 6px; }
  .hw-stable th:last-child { display: none; }
  .hw-stable td:first-child { white-space: normal; }
  .hw-stable td.hw-prices { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 2px 14px; padding-top: 0; }
  .hw-prices small { min-width: 0; }
}

/* NPC potions guide (templates/guides/potions.html): price tables, deals, the Elixir calculator and the shop list */
.pot-table td, .pot-table th { padding-left: 10px; padding-right: 10px; }
.pot-table td:first-child { min-width: 150px; }
.pot-table tr.hw-best td { background: var(--green-soft); }
.pot-where { font-size: 13px; line-height: 1.5; min-width: 140px; }
.pot-cheaper, .pot-yes { color: var(--green-ink); font-weight: 700; }
.pot-deals { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px; }
.pot-deals li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 13.5px; }
.pot-deals .pr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pot-calc-in { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 12px 0 0; }
.pot-calc-in label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; }
.pot-calc-in input { width: 110px; font-size: 16px; }
.pot-shops { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 12px 0; }
.pot-shop { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; }
.pot-shop-h { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.pot-shop-h b { font: 600 15px/1.2 var(--pixel); }
.pot-shop-h small { color: var(--ink-3); font-weight: 600; }
.pot-shop ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.pot-shop li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; }
.pot-shop li b { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.pot-shop li.gated { opacity: .75; }
@media (max-width: 760px) {
  .pot-table tr:first-child { display: none; }
  .pot-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 12px; }
  .pot-table tr + tr { border-top: 1px solid var(--line); }
  .pot-table tr.hw-best { background: var(--green-soft); }
  table.grid.pot-table td, table.grid.pot-table td.num { display: block; padding: 0 !important; border: 0; text-align: left; min-width: 0; }
  .pot-table td:first-child, .pot-table td.pot-where { grid-column: 1 / -1; }
  .pot-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-3); }
  .pot-deals li { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .pot-deals li .pr { grid-column: 2; }
  .pot-deals li b { grid-column: 3; grid-row: 1; }
}
/* Leveling guide (templates/guides/leveling.html): one card per level band (maps | quests), the job cards, the best quest
   lines and the town boxes */
.lv-plan { white-space: nowrap; }
.lv-plan small { font-weight: 700; color: var(--ink-3); }
.lv-route { display: grid; gap: 14px; margin: 12px 0; }
.lv-band { border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2); scroll-margin-top: 80px; overflow: hidden; }
.lv-band-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 14px; border-bottom: 1.5px solid var(--line);
  background: var(--card); }
.lv-band-h > b { font: 600 17px/1.2 var(--pixel); margin-right: 4px; }
.lv-mile { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; border: 1.5px solid var(--line);
  background: var(--card-2); color: var(--ink-2); font-size: 12px; font-weight: 700; }
.lv-mile:hover { border-color: var(--hard); color: var(--ink); }
.lv-mile.hot { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: var(--accent-soft); color: var(--accent-ink); }
.lv-mile.boss { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); color: var(--red); }
.lv-band-b { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lv-col { padding: 10px 14px 12px; min-width: 0; }
.lv-col + .lv-col { border-left: 1.5px solid var(--line); }
.lv-col h4 { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
.lv-col h4 small { text-transform: none; letter-spacing: 0; font-weight: 600; }
.lv-col > p { margin: 0; font-size: 13.5px; }
.lv-maps, .lv-quests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lv-maps > li + li, .lv-quests > li + li { border-top: 1px dashed var(--line); padding-top: 10px; }
.lv-map-name a { font-weight: 700; }
.lv-mobs { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 5px 0 3px; align-items: center; }
.lv-mobs a { display: inline-flex; align-items: center; gap: 5px; color: var(--ink); font-size: 13px; font-weight: 600; }
.lv-mobs img { max-height: 30px; max-width: 44px; object-fit: contain; image-rendering: pixelated; }
.lv-mobs small { color: var(--ink-3); font-weight: 600; }
.lv-map-stat { display: block; color: var(--ink-2); font-size: 12.5px; }
.lv-boss-here { color: var(--red); font-weight: 700; }
.lv-quests > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; }
.lv-q-name { display: grid; gap: 2px; min-width: 0; }
.lv-q-name > a { font-weight: 700; }
.lv-q-name small { line-height: 1.4; }
.lv-q-exp { font: 600 13px/1.3 var(--pixel); color: var(--accent-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lv-grade { display: inline-flex; align-items: center; gap: 3px; width: fit-content; font-size: 11.5px; }
.lv-grade .tbadge { width: 16px; height: 16px; }
.lv-more { display: inline-block; margin-top: 8px; font-size: 12.5px; font-weight: 700; }
.lv-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 12px 0; }
.lv-job { --jc: var(--blue); border: 1.5px solid var(--line); border-top: 4px solid var(--jc); border-radius: 12px; background: var(--card-2); padding: 10px 14px 12px; min-width: 0; }
.lv-job.jc-red { --jc: var(--red); }
.lv-job.jc-green { --jc: var(--green); }
.lv-job.jc-violet { --jc: var(--violet); }
.lv-job-h { display: flex; align-items: center; gap: 8px; font: 600 17px/1.2 var(--pixel); }
.lv-job-h img { image-rendering: pixelated; }
.lv-job dl { margin: 8px 0 0; display: grid; gap: 2px; }
.lv-job dt { margin-top: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.lv-job dd { margin: 0; font-size: 13.5px; line-height: 1.5; }
.lv-best { list-style: none; counter-reset: lvb; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.lv-best > li { counter-increment: lvb; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start;
  padding: 10px 14px 10px 10px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2); }
.lv-best > li::before { content: counter(lvb); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-ink); font: 600 14px/1 var(--pixel); }
.lv-best-main { display: grid; gap: 6px; min-width: 0; }
.lv-best-num { display: grid; justify-items: end; gap: 2px; text-align: right; }
.lv-best-num b { font: 600 15px/1.2 var(--pixel); color: var(--accent-ink); white-space: nowrap; }
.lv-best-num small { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.lv-needs { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.lv-needs a { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.lv-needs img { max-height: 26px; max-width: 34px; object-fit: contain; image-rendering: pixelated; }
.lv-needs .ico { width: 24px; height: 24px; }
.lv-towns { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 12px 0; }
.lv-town { border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 10px 14px 12px; min-width: 0; }
.lv-town h3 { margin: 0 0 4px; font: 600 17px/1.2 var(--pixel); }
.lv-town > p { margin: 0 0 8px; font-size: 13.5px; }
.lv-town-pay { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 4px; }
.lv-town-pay li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: 13.5px; padding: 5px 9px;
  border-radius: 8px; background: var(--card); }
.lv-town-pay b { font-weight: 700; }
.lv-town-lines { width: 100%; font-size: 13px; }
.lv-town-lines .tbadge { width: 18px; height: 18px; }
.lv-classes { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.lv-classes a { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border: 1.5px solid var(--line); border-radius: 10px;
  background: var(--card-2); color: var(--ink); font-weight: 600; font-size: 13px; }
.lv-classes a:hover { border-color: var(--hard); color: var(--ink); }
.lv-classes img { width: 26px; height: 26px; image-rendering: pixelated; }
@media (max-width: 760px) {
  .lv-band-b { grid-template-columns: minmax(0, 1fr); }
  .lv-col + .lv-col { border-left: 0; border-top: 1.5px solid var(--line); }
  .lv-maps > li:nth-child(n+3) { display: none; } /* two maps a band is plenty on a phone */
  .lv-best > li { grid-template-columns: 26px minmax(0, 1fr); }
  .lv-best-num { grid-column: 2; justify-items: start; text-align: left; }
}

/* Bosses guide (templates/guides/bosses.html): the ladder, boss cards with their route in, the class × boss solo table */
.bs-mob { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 40px; vertical-align: middle; }
.bs-mob img { max-width: 44px; max-height: 40px; image-rendering: pixelated; }
.bs-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.bs-tags .tag { font-size: 11px; }
.bs-ladder td:first-child { white-space: normal; min-width: 190px; }
.bs-ladder tr.bs-off td { opacity: .7; }
.bs-ladder td:last-child { min-width: 150px; }
.bs-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin: 12px 0 0; }
.bs-card { border: 1px solid var(--line); border-radius: 12px; background: var(--card-2); padding: 10px 12px; font-size: 13.5px; scroll-margin-top: 80px; min-width: 0; }
.bs-card.off { border-style: dashed; }
.bs-card-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.bs-card-h > div { display: grid; gap: 1px; min-width: 0; }
.bs-card-h b { font: 600 16px/1.2 var(--pixel); }
.bs-card-h small { color: var(--ink-3); font-weight: 600; }
.bs-card p { margin: 6px 0; line-height: 1.5; }
.bs-also { color: var(--ink-2); font-size: 13px; }
.bs-route { list-style: none; margin: 6px 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12.5px; }
.bs-route > li { display: inline-flex; align-items: center; gap: 4px; }
.bs-route > li:not(:last-child)::after { content: "\2192"; margin: 0 5px; color: var(--ink-3); }
.bs-route > li > a, .bs-route > li > span, .bs-more summary { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-weight: 600; }
.bs-route > li.hid > a, .bs-route > li.hid > span { border-color: color-mix(in srgb, var(--gold-ink) 45%, var(--line)); background: var(--gold-soft); }
.bs-route > li > small { color: var(--gold-ink); font-weight: 700; font-size: 11px; }
.bs-more summary { cursor: pointer; list-style: none; color: var(--ink-2); }
.bs-more summary::-webkit-details-marker { display: none; }
.bs-more details[open] { flex-basis: 100%; }
.bs-more details[open] > .bs-route { margin: 6px 0 2px; }
/* quest page "How to do it" (src/quest_guides.php) */
a.tag.guide { background: var(--gold-soft); color: var(--gold-ink); }
a.tag.guide:hover { background: var(--accent-soft); color: var(--accent-ink); }
table.qqa th { text-align: left; }
table.qqa tr.cur td { background: var(--accent-soft); }
table.qqa td:last-child { width: 42%; }
.qtips { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.qroute + .qroute { border-top: 1px solid var(--line); }
.qr-h { font-weight: 700; }
.qr-h small { font-weight: 500; margin-left: 4px; }
.qhid { margin-top: 6px; font-size: 13.5px; }
.qmap { margin-top: 4px; }
.qmap summary { cursor: pointer; color: var(--accent-ink); font-weight: 600; font-size: 13px; }
.qmap .mapview { margin-top: 6px; max-width: 760px; border: 1px solid var(--line); border-radius: 8px; }
.qtip { margin: 0; }
.mk.on { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: #ff8a00; border-style: solid; animation: mk-pulse 1.6s ease-out infinite; }
@media (max-width: 640px) { .mk.on { width: 20px; height: 20px; margin: -10px 0 0 -10px; } }
@keyframes mk-pulse { 0% { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5), 0 0 0 0 rgba(255, 214, 0, .9); } 100% { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .5), 0 0 0 14px rgba(255, 214, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .mk.on { animation: none; } }
.bs-solo-wrap { max-width: 100%; }
table.grid.bs-solo { font-size: 13px; }
.bs-solo th { vertical-align: bottom; font-size: 11px; line-height: 1.25; text-align: center; min-width: 62px; padding: 6px 4px; }
.bs-solo th a { display: grid; justify-items: center; gap: 2px; color: var(--ink-2); }
.bs-solo th img { max-height: 30px; max-width: 40px; image-rendering: pixelated; }
.bs-solo th small { display: block; color: var(--ink-3); font-weight: 600; }
.bs-solo th span { display: block; max-width: 64px; white-space: normal; text-transform: none; letter-spacing: 0; font-weight: 700; }
.bs-solo th:first-child, .bs-solo td:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); text-align: left; }
.bs-solo td:first-child { min-width: 118px; }
.bs-solo td:first-child a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; line-height: 1.25; color: var(--ink); }
.bs-solo td:first-child img { image-rendering: pixelated; }
.il-table .bs-solo td { padding: 6px 6px; text-align: center; vertical-align: middle; }
.il-table .bs-solo td:first-child { text-align: left; padding-left: 10px; }
.bs-solo td b { font-variant-numeric: tabular-nums; }
.bs-solo td small { display: block; color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.bs-solo td.easy, .bs-legend i.easy { background: var(--green-soft); }
.bs-solo td.mid, .bs-legend i.mid { background: var(--gold-soft); }
.bs-solo td.hard, .bs-legend i.hard { background: var(--red-soft); }
.bs-solo td.best, .bs-legend i.best { box-shadow: inset 0 0 0 2px var(--accent); }
.bs-miss { color: var(--red-ink); font-weight: 800; margin-left: 1px; }
.bs-legend { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--ink-2); }
.bs-legend li { display: inline-flex; align-items: center; gap: 6px; }
.bs-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--line); }
.bs-ask { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin: 2px 0; }
.bs-ask > img { max-height: 26px; max-width: 32px; image-rendering: pixelated; }
.bs-quests td:nth-child(3), .bs-quests td:nth-child(4) { min-width: 170px; }
.bs-quests td:first-child { white-space: normal; min-width: 200px; }
.bs-items li { grid-template-columns: 22px minmax(0, 1fr) auto; }
@media (max-width: 760px) {
  .bs-cards { grid-template-columns: minmax(0, 1fr); }
  .bs-ladder td small { white-space: normal; }
  .bs-quests td:last-child { grid-column: 1 / -1; }
  .bs-ladder td:first-child, .bs-ladder td:last-child, .bs-quests td:first-child, .bs-quests td:nth-child(3), .bs-quests td:nth-child(4) { min-width: 0; }
}

/* Kerning City Party Quest (templates/guides/kpq.html): Lakelis on the town map, stage cards, puzzle checklists */
.kpq-window .il-ico { object-fit: contain; }
.kpq-town { margin: 8px 0 16px; }
.kpq-town .mapview { max-width: 760px; border: 1px solid var(--line); border-radius: 10px; }
.kpq-stage { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; margin: 4px 0 14px; scroll-margin-top: 80px; }
.kpq-stage + .kpq-stage { border-top: 1px dashed var(--line); padding-top: 16px; }
.kpq-stage > div > :first-child { margin-top: 0; }
.kpq-stage > div > :last-child { margin-bottom: 0; }
.kpq-shot { position: relative; display: block; overflow: hidden; border: 1.5px solid var(--line); border-radius: 10px; background: #000; }
.kpq-shot img { display: block; width: 100%; height: auto; }
.kpq-shot span { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(15, 23, 51, .72); color: #fff; font-size: 11.5px; font-weight: 700; }
.kpq-mobs { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.kpq-mobs li { display: flex; align-items: center; gap: 10px; }
.kpq-mobs img { flex: none; width: 44px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.kpq-mobs li > span { display: grid; font-size: 13.5px; line-height: 1.35; }
.kpq-mobs small { color: var(--ink-3); font-size: 12px; font-weight: 600; }
.kpq-quiz td:first-child { white-space: normal; }
.kpq-quiz .tag { margin-left: 4px; font-size: 10.5px; }
.kpq-tries { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.kpq-tries label { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); cursor: pointer; font-size: 13px; }
.kpq-tries input { margin: 0; accent-color: var(--accent); }
.kpq-tries b { font: 700 14px/1 var(--font); font-variant-numeric: tabular-nums; letter-spacing: .03em; white-space: nowrap; }
.kpq-tries small { margin-left: auto; color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.kpq-tries label:has(input:checked) { opacity: .5; }
.kpq-tries label:has(input:checked) b { text-decoration: line-through; }
/* the order switch: two radios (visually hidden, still focusable) ahead of the stages pick which list each stage shows */
.kpq-o { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kpq-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0 6px; }
.kpq-switch label { display: grid; gap: 2px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2); cursor: pointer; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.kpq-switch label b { color: var(--ink); font-size: 14px; }
.kpq-switch label:hover { border-color: var(--line-2); }
#kpq-o-walk:checked ~ .kpq-switch label[for="kpq-o-walk"], #kpq-o-count:checked ~ .kpq-switch label[for="kpq-o-count"] {
  border-color: var(--accent); background: var(--accent-soft); box-shadow: 2px 2px 0 var(--hard); }
#kpq-o-walk:focus-visible ~ .kpq-switch label[for="kpq-o-walk"], #kpq-o-count:focus-visible ~ .kpq-switch label[for="kpq-o-count"] { outline: 2px solid var(--accent); outline-offset: 2px; }
#kpq-o-walk:checked ~ .kpq-stage .kpq-tries.count, #kpq-o-count:checked ~ .kpq-stage .kpq-tries.walk { display: none; }
.kpq-hops { margin: 8px 0 0; font-size: 12.5px; }
#kpq-o-count:checked ~ .kpq-stage .kpq-hops { display: none; }
/* the platforms / barrels as numbered chips, one line per row */
.kpq-layout { margin: 8px 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kpq-layout > div { display: grid; gap: 4px; justify-items: center; }
.kpq-layout > div > div { display: flex; gap: 4px; }
.kpq-layout span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px;
  border: 1.5px solid var(--hard); background: var(--card); font-weight: 800; font-size: 14px; box-shadow: 1.5px 1.5px 0 var(--hard); }
.kpq-layout figcaption { font-size: 12.5px; color: var(--ink-3); font-weight: 600; }
.kpq-solo th img { display: block; margin: 0 auto 2px; }
.kpq-solo td:first-child img { vertical-align: middle; image-rendering: pixelated; }
.kpq-solo tr.kpq-party td { border-top: 2px solid var(--line-2); background: var(--card-2); }
.kpq-solo tr.kpq-party td:first-child { background: var(--card-2); white-space: normal; }
@media (max-width: 760px) {
  .kpq-stage { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .kpq-switch { grid-template-columns: minmax(0, 1fr); }
  .kpq-shot { max-width: 420px; }
}

/* Scrolling guide (templates/guides/scrolling.html): tier and whole-item tables, gear cards, price tables, class cards */
.sc-window .il-wrow b small { font: 600 11px/1 var(--font); }
.sc-risk { color: var(--red); }
.sc-ttable td, .sc-ttable th, .sc-rtable td, .sc-rtable th, .sc-ptable td, .sc-ptable th, .sc-ctable td, .sc-ctable th { padding-left: 10px; padding-right: 10px; }
.sc-ttable td:first-child { min-width: 150px; }
.sc-ptable td, .sc-ptable th { padding-left: 8px; padding-right: 8px; }
.guide-sec table.grid.sc-ptable td:first-child, .guide-sec table.grid.sc-ctable td:first-child { white-space: normal; width: 32%; }
.sc-ttable td.sc-buy, .sc-ptable td.sc-buy, .sc-rtable tr.sc-best td, .sc-ctable tr.sc-best td { background: var(--green-soft); }
.sc-ptable td.num { white-space: nowrap; }
.sc-gear { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 12px 0; }
.sc-gcard { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; }
.sc-gcard-w { grid-column: 1 / -1; }
.sc-gcard-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; margin-bottom: 6px; }
.sc-gcard-h b { min-width: 0; }
.sc-gcard-h b { font: 600 15px/1.2 var(--pixel); }
.sc-gcard-h b small { font: 600 12px/1.2 var(--font); color: var(--ink-3); }
.sc-gcard-h small { color: var(--ink-3); font-weight: 700; white-space: nowrap; }
.sc-gcard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; }
.sc-gcard-w ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 3px 12px; }
.sc-gcard li a { display: inline-flex; align-items: center; gap: 6px; }
.sc-more { margin: 4px 0 12px; }
.sc-more > summary { cursor: pointer; font-weight: 700; padding: 6px 0; }
.sc-classes { display: grid; gap: 12px; margin: 12px 0; }
.sc-class { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: 10px 12px; min-width: 0; }
.sc-class-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.sc-class-h b { font: 600 16px/1.2 var(--pixel); }
.sc-class-h small { margin-left: auto; color: var(--ink-3); font-weight: 700; }
.sc-class ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.sc-class ol > li > span { font-weight: 700; font-size: 13.5px; }
.sc-class > p { font-size: 13px; margin: 10px 0 0; color: var(--ink-2); }
.sc-chips { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 4px 6px; }
.sc-chips .il-chip { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; width: 100%; box-sizing: border-box; }
.sc-chips .il-chip .nm small { white-space: nowrap; }
.sc-chips .il-chip .pr { text-align: right; line-height: 1.2; }
.sc-quests { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; gap: 6px; font-size: 13.5px; }
.sc-quests li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.sc-qitems { display: inline-flex; flex-wrap: wrap; gap: 2px; }
@media (max-width: 760px) {
  .sc-ttable tr:first-child, .sc-rtable tr:first-child, .sc-ptable tr:first-child, .sc-ctable tr:first-child { display: none; }
  .sc-ttable tr, .sc-rtable tr, .sc-ptable tr, .sc-ctable tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 12px; }
  .sc-ttable tr + tr, .sc-rtable tr + tr, .sc-ptable tr + tr, .sc-ctable tr + tr { border-top: 1px solid var(--line); }
  .sc-rtable tr.sc-best, .sc-ctable tr.sc-best { background: var(--green-soft); }
  table.grid.sc-ttable td, table.grid.sc-rtable td, table.grid.sc-ptable td, table.grid.sc-ctable td,
  table.grid.sc-ttable td.num, table.grid.sc-rtable td.num, table.grid.sc-ptable td.num, table.grid.sc-ctable td.num { display: block; padding: 0 !important; border: 0; text-align: left; min-width: 0; }
  .sc-ttable tr, .sc-rtable tr { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sc-ttable td:first-child, .sc-ttable td:nth-child(2), .sc-rtable td:first-child, .sc-ptable td:first-child, .sc-ctable td:first-child { grid-column: 1 / -1; }
  .sc-ttable td.sc-buy, .sc-ptable td.sc-buy { border-radius: 6px; padding: 2px 6px !important; }
  .guide-sec table.grid.sc-ptable td:first-child, .guide-sec table.grid.sc-ctable td:first-child { width: auto; }
  .sc-ttable td[data-label]::before, .sc-rtable td[data-label]::before, .sc-ptable td[data-label]::before, .sc-ctable td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
}
/* Crafting guide (templates/guides/crafting.html): profession cards, the quest/level/refining tables, ores, the
   dependency grid and the catalyst list */
.cg-earn { color: var(--green-ink); font-weight: 700; }
.cg-loss { color: var(--red-ink); }
.cg-warn { color: var(--gold-ink); }
.cg-picks { display: grid; gap: 2px; margin: 4px 0; }
.cg-chips { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; vertical-align: middle; }
.cg-chips a { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink); }
.cg-chips a:hover { color: var(--accent-ink); }
.cg-chips b { font-weight: 700; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cg-cards { padding: 0 18px 18px; gap: 14px; }
.cg-cards .jcard { background: var(--card); border: 1.5px solid var(--line); border-top: 4px solid var(--jc); border-radius: 12px; }
.cg-cards .jc-title h2 { font-size: 19px; }
.cg-makes { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 2px 0 10px; font-size: 13px; }
.cg-makes:last-child { margin-bottom: 0; }
.cg-makes > span { padding: 1px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); }
.cg-makes > span.cg-job { border-color: var(--jc); background: var(--jc-soft); font-weight: 700; }
.cg-table td, .cg-table th { padding-left: 10px; padding-right: 10px; }
.cg-table td:first-child { min-width: 140px; }
.cg-learn td { min-width: 150px; font-size: 13.5px; line-height: 1.5; }
.cg-learn td:first-child { min-width: 110px; }
.cg-lvtab td:first-child { min-width: 0; width: 44px; }
.cg-earners td:nth-child(2) { min-width: 200px; }
.cg-refine tr.cg-win td { background: var(--green-soft); }
.cg-lvl { border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); margin: 0 0 8px; }
.cg-lvl > summary { cursor: pointer; padding: 9px 12px; display: flex; align-items: center; gap: 8px; list-style: none; }
.cg-lvl > summary::-webkit-details-marker { display: none; }
.cg-lvl > summary::after { content: "+"; margin-left: auto; font: 600 16px/1 var(--pixel); color: var(--ink-3); }
.cg-lvl[open] > summary::after { content: "\2212"; }
.cg-lvl[open] > summary { border-bottom: 1px solid var(--line); }
.cg-lvl .il-table { margin: 0; border: 0; }
.cg-ores { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.cg-ores li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 13.5px; }
.cg-ores li > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.cg-ores small { font-size: 12px; }
.cg-ores .pr, .cg-cats .pr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cg-hubs { list-style: none; margin: 8px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px; }
.cg-hubs li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 13.5px; }
.cg-hubs li b { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.cg-deps { width: auto; }
.cg-deps th, .cg-deps td { padding: 5px 7px; }
.cg-deps td.num { min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }
.cg-deps td.on { font-weight: 700; background: var(--accent-soft); }
.cg-deps td.self { color: var(--ink-3); background: var(--card-2); }
.cg-deps td:first-child { white-space: nowrap; }
.cg-cats { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 8px; }
.cg-cats li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 13.5px; }
.cg-cats p { margin: 2px 0; }
@media (max-width: 760px) {
  .cg-cards { padding: 0 12px 12px; }
  .cg-table tr:first-child { display: none; }
  .cg-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; padding: 10px 12px; }
  .cg-table tr + tr { border-top: 1px solid var(--line); }
  .cg-refine tr.cg-win { background: var(--green-soft); }
  table.grid.cg-table td, table.grid.cg-table td.num { display: block; padding: 0 !important; border: 0; text-align: left; min-width: 0; background: none; }
  .cg-table td:first-child, .cg-learn td, .cg-table td[colspan] { grid-column: 1 / -1; }
  .cg-table td[data-label]::before { content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--ink-3); }
  .cg-lvtab tr { grid-template-columns: 30px minmax(0, .8fr) minmax(0, 1.4fr) minmax(0, 1fr); }
  table.grid.cg-lvtab td:first-child { grid-column: 1; grid-row: 1 / span 2; width: auto; }
  .cg-lvtab td:nth-child(2), .cg-lvtab td[colspan] { grid-column: 2 / -1; }
  table.grid.cg-lvtab td, table.grid.cg-lvtab td.num { white-space: normal; font-size: 13px; }
  .cg-lvtab td[data-label]::before { font-size: 10px; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cg-deps th, .cg-deps td { padding: 4px 4px; }
  .cg-deps td.num { min-width: 26px; }
  .cg-deps td:first-child b { display: none; }
}
@media (max-width: 760px) {
  .cg-refine tr { grid-template-columns: minmax(0, 1fr) auto; }
  .cg-refine td:first-child { grid-column: 1; }
  table.grid.cg-refine td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; }
  .cg-refine td:nth-child(2) { grid-column: 1 / -1; }
  .cg-refine td:nth-child(2)::before, .cg-refine td:nth-child(5)::before { display: none !important; }
  table.grid.cg-refine td:nth-child(4) { text-align: right; }
  .cg-earners td:nth-child(2) { display: none !important; }
}
/* /cw-update changed maps: a card each, the before/after crops of the picture on top (public/static/gd/cwu/<date>/) */
.cwu-mcs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); grid-auto-flow: row dense; gap: 14px; border-top: 1px solid var(--line); }
.cwu-mc { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card-2); }
.cwu-mc.big { grid-column: 1 / -1; }
.cwu-mc-b { padding: 10px 14px 12px; }
.cwu-map-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 6px; font-size: 15px; }
.cwu-map-h b { font-family: var(--pixel); font-weight: 600; }
.cwu-big { align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: auto; padding: 0;
  border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-2); cursor: pointer; }
.cwu-big svg { width: 15px; height: 15px; }
.cwu-big:hover, .cwu-big[aria-pressed="true"] { border-color: var(--hard); color: var(--ink); box-shadow: 2px 2px 0 var(--hard); }
/* one frame, the after picture over the before one, cut where the slider is (--p, set by hubcw.js; half and half without it) */
.cwu-cmp { position: relative; width: 100%; max-height: 300px; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); user-select: none; -webkit-user-select: none; }
.cwu-mc.big .cwu-cmp { max-height: min(78vh, 760px); }
.cwu-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.cwu-cmp img.aft { clip-path: inset(0 0 0 var(--p, 50%)); }
.cwu-cmp::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--p, 50%); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(15, 23, 51, .3); pointer-events: none; }
.cwu-knob { position: absolute; z-index: 1; top: 50%; left: var(--p, 50%); width: 32px; height: 32px; margin: -16px 0 0 -16px; border-radius: 50%; pointer-events: none;
  background: var(--card); border: 2px solid var(--hard); box-shadow: 2px 2px 0 var(--hard); }
.cwu-knob::before { content: "\2039\2003\203A"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 800 15px/1 var(--font); color: var(--ink); }
.cwu-cmp.on { cursor: ew-resize; touch-action: pan-y; }
.cwu-cmp:focus-visible { outline-offset: -3px; }
.cwu-cmp:not(.on) .cwu-knob { display: none; }
.cwu-tag { position: absolute; z-index: 1; top: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff; background: rgba(15, 23, 51, .72); pointer-events: none; }
.cwu-tag.b { left: 8px; }
.cwu-tag.a { right: 8px; background: rgba(13, 122, 77, .88); }
/* a resized map: the two crops side by side */
.cwu-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px 10px 0; }
.cwu-ba figure { margin: 0; min-width: 0; }
.cwu-ba img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: contain; border-radius: 8px; border: 1.5px solid var(--line); background: var(--bg-2); }
.cwu-mc.big .cwu-ba img { max-height: min(70vh, 640px); }
.cwu-ba figcaption { margin-top: 4px; font-size: 12px; font-weight: 600; color: var(--ink-3); }
.cwu-ba figure + figure figcaption { color: var(--green-ink); }
.cwu-check { background: var(--green-soft); border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; }
.cwu-notes p { margin: 0; line-height: 1.6; }
.cwu-notes p + p { margin-top: 4px; }
.cwu-ch.cwu-sub { margin: 2px 0 6px 28px; font-size: 13px; }
.cwu-gfx { display: flex; flex-wrap: wrap; gap: 14px 22px; }
.cwu-gfx figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.cwu-gfx figure > span { display: flex; align-items: flex-end; gap: 8px; min-height: 36px; }
.cwu-gfx img { image-rendering: pixelated; max-height: 96px; }
.cwu-gfx .arr { color: var(--ink-3); align-self: center; }
.cwu-gfx figcaption { font-size: 12.5px; }

/* ---------- auctions (src/auctions.php) ---------- */
.kind.auc { background: color-mix(in srgb, var(--violet) 15%, transparent); color: var(--violet); }
.sellform .when-auction, .sellform .when-auction-block { display: none; }
.sellform.is-auction .when-auction { display: inline; }
.sellform.is-auction .when-auction-block { display: block; }
.sellform.is-auction .when-fixed, .sellform.is-buy .when-auction, .sellform.is-buy .when-auction-block, .sellform.is-buy .pt-auction { display: none; }
.auc-fields { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--violet) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--violet) 25%, var(--line)); }
.auc-fields > .hint { font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }
.auc-bid { margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, var(--violet) 7%, var(--card)); border: 1px solid color-mix(in srgb, var(--violet) 25%, var(--line)); }
.auc-bid .pend-note { margin: 0 0 10px; }
.auc-form { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; margin-bottom: 6px; }
.auc-form .field { margin: 0; flex: 1 1 170px; }
.auc-form .field:nth-child(3) { flex: 0 1 150px; }
.auc-form input { width: 100%; }
.auc-btns { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-end; padding-bottom: 20px; }
.auc-left { font-variant-numeric: tabular-nums; }
[data-ends].soon { color: var(--red-ink); }
.auc-bids tr.lead td { background: color-mix(in srgb, var(--violet) 8%, transparent); }
.auc-bids .kind { margin-left: 4px; }
.lr-price .lr-auc { color: var(--violet); white-space: nowrap; font-variant-numeric: tabular-nums; }
.auc-won { border-color: color-mix(in srgb, var(--violet) 55%, transparent); background: color-mix(in srgb, var(--violet) 8%, var(--card)); }
@media (max-width: 760px) {
  .auc-btns { padding-bottom: 0; width: 100%; }
  .auc-btns .btn { flex: 1 1 auto; }
}

/* ---------- listing page (2026-10-26): item + screenshots column, How to buy box, manage bar, folded Report ---------- */
.lv > .lv-side { flex: none; width: 300px; max-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.lv-side .mstip { min-width: 0; max-width: none; }
.lv-side .gallery { margin-top: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lv-side .gal:only-child { grid-column: 1 / -1; }
.lv-links { font-size: 13px; color: var(--ink-3); }
.lv > .lv-main { flex: 1; min-width: 260px; }
.ptype { display: inline-block; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 12px; font-weight: 600; vertical-align: 3px; white-space: nowrap; }
.buybox { margin-top: 14px; padding: 12px 16px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); }
.bb-h { font-weight: 800; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
.bb-row { display: flex; align-items: center; gap: 14px; padding: 10px 0; }
.bb-row + .bb-row { border-top: 1px dashed var(--line); }
.bb-btn { flex: none; min-width: 150px; }
.bb-btn form.inline { display: block; }
.bb-btn .btn { width: 100%; }
.bb-txt { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.bb-note { display: block; font-size: 13px; color: var(--ink-2); }
.bb-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--line); }
.bb-more .bb-txt { flex: 1 1 200px; font-size: 12.5px; color: var(--ink-3); }
.lv-manage > * + * { margin-top: 8px; }
.lv-manage > small { display: block; }
.lv-sold .lv-price { width: 130px; }
.lv-sold .lv-buyer { width: 240px; max-width: 100%; }
.lv-manage .btn:disabled { opacity: .6; cursor: default; transform: none; box-shadow: 2px 2px 0 var(--hard); filter: none; }
.lv-who { flex: 1; min-width: 200px; }
.lv-report { margin-top: 8px; }
.lv-report summary { display: inline-block; cursor: pointer; font-size: 12.5px; color: var(--ink-3); list-style: none; }
.lv-report summary::-webkit-details-marker { display: none; }
.lv-report summary::before { content: "\2691  "; }
.lv-report summary:hover, .lv-report[open] summary { color: var(--bad); }
.lv-report form { margin-top: 6px; max-width: 440px; }
@media (max-width: 760px) {
  /* phones: tooltip, then price + How to buy, then the screenshots */
  .lv > .lv-side { display: contents; }
  .lv-side .gallery, .lv-side .lv-links { order: 2; width: 100%; }
  .lv-sold .lv-price, .lv-sold .lv-buyer { flex: 1 1 140px; width: auto; }
  .lv-sold .btn { flex: 1 1 100%; }
}
@media (max-width: 520px) {
  .bb-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .bb-btn { min-width: 0; }
}
/* ---------- My Shop quick actions (2026-10-27, templates/market/mine.html, hubcw.js initQuickShop) ---------- */
.qa-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
.qa-bar > span { flex: 1 1 auto; }
.qa-bar b { color: var(--green-ink); }
table.qa-grid td.qa-acts { white-space: nowrap; text-align: right; }
.qa-acts > * + * { margin-left: 4px; }
.qa-acts .btn.ghost { padding-left: 9px; padding-right: 9px; letter-spacing: 1px; }
.qa-acts .btn[aria-expanded="true"] { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--hard); }
.qa-acts .btn.ghost[aria-expanded="true"] { background: var(--bg-2); box-shadow: none; }
.qa-wait { display: inline-block; font-size: 12.5px; color: var(--ink-3); padding: 0 6px; cursor: help; }
.qa-pen { display: inline-flex; vertical-align: -2px; margin-left: 3px; padding: 3px; color: var(--ink-3); border-radius: 6px; }
.qa-pen:hover, .qa-pen[aria-expanded="true"] { color: var(--accent-ink); background: var(--bg-2); }
table.grid tr.qa-drawer td, table.grid tr.qa-drawer:hover td { background: var(--card-2); padding-top: 10px; padding-bottom: 12px; }
tr.qa-open td { border-bottom-color: transparent; }
.qa-part { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; }
.qa-part + .qa-part { margin-top: 10px; }
.qa-drawer[data-part="sold"] .qa-part:not([data-qa-part="sold"]), .qa-drawer[data-part="more"] .qa-part[data-qa-part="sold"] { display: none; }
.qa-part .qa-price { width: 175px; }
.qa-part .qa-buyer { width: 300px; max-width: 100%; }
.qa-part > small { font-size: 12px; }
#my-listings.qa-busy .box-b { opacity: .55; pointer-events: none; transition: opacity .15s; }
#my-listings tr.qa-hit td { animation: qa-hit 1.6s ease-out; }
@keyframes qa-hit { from { background: var(--accent-soft); } }
.qa-ended { border-top: 1px solid var(--line); }
.qa-ended > summary { cursor: pointer; padding: 11px 14px; font-weight: 650; color: var(--ink-2); font-size: 14px; }
.qa-ended > summary:hover { color: var(--ink); }
.qa-ended[open] > summary { border-bottom: 1px solid var(--line); }
.qa-ended > summary .kind { margin-left: 4px; }
@media (max-width: 760px) {
  /* phones: each listing is a card (icon, title, price), its buttons on a line of their own underneath */
  table.qa-grid, table.qa-grid > tbody { display: block; }
  table.qa-grid tr { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; border-bottom: 1px solid var(--line); }
  table.qa-grid tr:last-child { border-bottom: 0; }
  table.qa-grid tr:has(> th) { display: none; }
  table.qa-grid td { border-bottom: 0; }
  table.qa-grid td.hide-m { display: none; }
  table.qa-grid td.ic { width: auto; padding-left: 10px; }
  table.qa-grid td.empty { grid-column: 1 / -1; }
  table.qa-grid td.qa-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; padding-top: 0; }
  .qa-acts > * + * { margin-left: 0; }
  table.qa-grid tr.qa-open { border-bottom: 0; }
  table.qa-grid tr.qa-drawer { display: block; }
  table.qa-grid tr.qa-drawer[hidden] { display: none; }
  table.qa-grid tr.qa-drawer > td { display: block; }
  .qa-part .qa-price, .qa-part .qa-buyer { flex: 1 1 140px; width: auto; }
  .qa-part > .btn { flex: 1 1 100%; }
}

/* ---------- listing page: the item page's info under the listing (2026-10-29) ---------- */
.iteminfo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 26px; align-items: start; }
.iteminfo table.kv th { width: 1%; padding-right: 28px; }
.iteminfo .pricebox { margin-top: 0 !important; }
@media (max-width: 760px) {
  .iteminfo { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .iteminfo table.kv th { padding-right: 16px; }
  #item-info .ii-name { display: none; } /* the listing title above names it */
}

/* ---------- top bar redesign (2026-10-31): tab-style links with drop-down menus, pill search, scroll shadow ----------
   .nd wraps a nav link and its .nd-menu (Market, Database, Guides). The menu opens on hover and keyboard focus;
   hubcw.js toggles .open for touch screens and sets the scroll shadow. Menus only exist from 1081px up, where the
   nav has room (below that it scrolls, and under 761px the tab bar replaces it). */
.topbar { transition: box-shadow .2s; }
.topbar.scrolled { box-shadow: 0 8px 28px rgba(28, 34, 64, .08); }
:root[data-theme="dark"] .topbar.scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .35); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar.scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .35); } }
.topbar .wrap { gap: 14px; }
.mainnav { gap: 0; align-self: stretch; }
.mainnav > a, .mainnav .nd > a {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 2px; height: 100%; min-height: 64px;
  padding: 0 11px; border-radius: 0; color: var(--ink-2); font-weight: 600; font-size: 14px; white-space: nowrap; transition: color .12s;
}
.mainnav > a::before, .mainnav .nd > a::before {
  content: ""; position: absolute; inset: 15px 1px; z-index: -1; border-radius: 10px; background: var(--bg-2); opacity: 0; transition: opacity .12s;
}
.mainnav > a:hover, .mainnav .nd:hover > a, .mainnav .nd:focus-within > a, .mainnav .nd.open > a { color: var(--ink); background: none; }
.mainnav > a:hover::before, .mainnav .nd:hover > a::before, .mainnav .nd:focus-within > a::before, .mainnav .nd.open > a::before { opacity: 1; }
.mainnav > a.on, .mainnav .nd > a.on { color: var(--ink); background: none; }
.mainnav > a::after, .mainnav .nd > a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
  transform: scaleX(0); transition: transform .18s;
}
.mainnav > a.on::after, .mainnav .nd > a.on::after { transform: scaleX(1); }
.nd { position: relative; display: flex; align-items: stretch; }
.nd-caret { width: 12px; height: 12px; margin: 1px 0 0 1px; opacity: .5; transition: transform .15s, opacity .15s; }
.nd:hover .nd-caret, .nd:focus-within .nd-caret, .nd.open .nd-caret { transform: rotate(180deg); opacity: 1; }
.nd-menu {
  position: absolute; top: calc(100% - 4px); left: 0; z-index: 60; width: 336px; padding: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility 0s linear .15s;
}
.nd:hover > .nd-menu, .nd:focus-within > .nd-menu, .nd.open > .nd-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.nd-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } /* the pointer crosses the gap without closing it */
.mainnav .nd-menu > a {
  display: flex; flex-direction: column; gap: 1px; min-height: 0; padding: 8px 10px; border-radius: 10px; color: var(--ink);
  font-weight: 500; font-size: 14px; line-height: 1.3; white-space: normal; transition: background .1s;
}
.mainnav .nd-menu > a:hover, .mainnav .nd-menu > a:focus-visible { background: var(--bg-2); color: var(--ink); outline: none; }
.mainnav .nd-menu > a b { display: flex; align-items: center; gap: 6px; font-weight: 650; }
.mainnav .nd-menu > a:hover b { color: var(--accent-ink); }
.mainnav .nd-menu > a small { font-size: 12px; color: var(--ink-3); line-height: 1.35; }
.nd-live { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; line-height: 17px; text-align: center; font-style: normal; }
.nd-foot {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap; margin: 6px -8px -8px; padding: 8px 10px;
  border-top: 1px solid var(--line); background: var(--card-2); border-radius: 0 0 15px 15px;
}
.mainnav .nd-foot a { min-height: 0; padding: 5px 8px; border-radius: 8px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.mainnav .nd-foot a:hover { background: var(--bg-2); color: var(--ink); }
.mainnav .nd-foot .btn, .mainnav .nd-foot .btn:hover { margin-left: auto; color: var(--t); font-size: 12.5px; padding: 6px 11px; }
.nd-wide .nd-menu { width: 540px; }
.nd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4px; }
.nd-grid .nd-span { grid-column: 1 / -1; }
.nd-guides { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; padding: 12px 12px 12px; }
.nd-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.nd-h { padding: 2px 8px 6px; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3); }
.mainnav .nd-col a { display: flex; align-items: center; gap: 8px; min-height: 0; padding: 6px 8px; border-radius: 8px; color: var(--ink); font-size: 13.5px; font-weight: 550; white-space: normal; }
.mainnav .nd-col a:hover { background: var(--bg-2); color: var(--accent-ink); }
.nd-col a img { width: 18px; height: 18px; flex: none; image-rendering: pixelated; }
.mainnav .nd-col .nd-all { margin-top: 4px; color: var(--blue-ink); font-weight: 650; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nd-menu { background: color-mix(in srgb, var(--card) 90%, transparent); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nd-menu { border-color: var(--line-2); } }
:root[data-theme="dark"] .nd-menu { border-color: var(--line-2); }
@media (prefers-reduced-transparency: reduce) { .nd-menu { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .nd-menu, .nd-caret, .mainnav > a::after, .mainnav .nd > a::after { transition: none; } }
@media (min-width: 1081px) { .mainnav { overflow: visible; } }
@media (max-width: 1239px) { .nd-caret { display: none; } }
@media (max-width: 1080px) { .nd-menu { display: none; } }
/* the search is a pill, and takes the width the nav leaves it */
.searchbox { flex: 0 1 300px; min-width: 150px; }
.searchbox input, .searchbox input[type=search] { width: 100%; padding: 9px 30px 9px 36px; border-radius: 999px; background: var(--bg-2); border-color: transparent; transition: background .12s, border-color .12s, box-shadow .12s; }
.searchbox input:hover { border-color: var(--line-2); }
.searchbox input:focus { background: var(--card); border-color: var(--accent); }
.searchbox svg { left: 13px; }
.searchbox .slash { right: 11px; }
.topbar.searching .searchbox input { border-radius: 12px; }
/* Sell: a drawn plus */
.sellbtn { gap: 5px; }
.sellbtn svg { width: 11px; height: 11px; }

/* ---------- home (2026-10-31): category chips with icons, feature cards with an arrow, Trending prices as a strip ---------- */
.hero .chips { gap: 5px; }
.hero .chips a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 5px; }
.hero .chips a img { width: 18px; height: 18px; image-rendering: pixelated; }
@media (min-width: 1021px) { .hero .chips a:nth-child(n+6) { display: none; } } /* five fit on one line beside the side column */
.feature { position: relative; padding: 15px 16px; }
.feature .ft b { font-size: 15px; }
.feature .ft small { white-space: normal; }
.feature .fa {
  position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--ink-2); background: var(--bg-2); opacity: 0; transform: translateX(-4px); transition: opacity .12s, transform .12s;
}
.feature:hover .fa { opacity: 1; transform: none; }
.feature .fa svg { width: 14px; height: 14px; }
.pulse { margin-top: 14px; }
.pulse .box-h > a:last-child { margin-left: 0; }
.pulse-nav { display: flex; gap: 4px; margin-left: auto; }
.pulse-nav button {
  width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0; transition: background .1s, opacity .1s;
}
.pulse-nav button:hover:not(:disabled) { background: var(--bg-2); color: var(--ink); }
.pulse-nav button:disabled { opacity: .3; cursor: default; }
.pulse-nav button svg { width: 14px; height: 14px; }
.pc-strip { display: flex; gap: 10px; padding: 14px 18px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 18px; scrollbar-width: none; scroll-behavior: smooth; }
.pc-strip::-webkit-scrollbar { display: none; }
.pc-strip:not(.at-end) { mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.pc-strip .pricecard { flex: 0 0 198px; scroll-snap-align: start; }
@media (max-width: 760px) {
  .feature .fa { display: none; }
  .pulse { margin-top: 12px; }
  .pulse-nav { display: none; }
  .pc-strip { gap: 8px; padding: 12px 14px 14px; scroll-padding: 0 14px; }
  .pc-strip .pricecard { flex-basis: 172px; }
}
@media (prefers-reduced-motion: reduce) { .pc-strip { scroll-behavior: auto; } }