/* DayZ Index — dark theme, matches original palette */
:root {
  --ink: #0a0a0b;
  --coal: #121214;
  --ash: #1c1c1f;
  --line: #2a2a2e;
  --blood: #e03131;
  --ember: #ff6b35;
  --bone: #e9e9ec;
  --fog: #8a8a92;
  --font-body: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, 'Liberation Mono', monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: var(--ember); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* header */
.site-head {
  position: sticky; top: 0; z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(10,10,11,.85);
  backdrop-filter: blur(8px);
}
.site-head nav { display: flex; align-items: center; gap: 28px; padding: 14px 20px; }
.brand { font-family: var(--font-display); font-weight: 700; font-size: 21px; letter-spacing: .8px; text-transform: uppercase; color: var(--bone); }
.brand:hover { text-decoration: none; }
.brand .accent { color: var(--ember); }
.brand .dim { color: var(--fog); font-weight: 500; }
.nav-links { display: flex; gap: 20px; flex: 1; }
.nav-link { color: var(--fog); font-size: 14px; }
.nav-link:hover, .nav-link.active { color: var(--ember); text-decoration: none; }
.nav-ext { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.nav-ext .ext { width: 10px; height: 10px; opacity: .7; }
.nav-user { display: flex; gap: 12px; align-items: center; font-size: 14px; }

/* footer */
.site-foot {
  margin-top: 80px; padding: 32px 20px; text-align: center;
  border-top: 1px solid var(--line); color: var(--fog); font-size: 12px;
}
.site-foot > div { margin-bottom: 6px; }
.site-foot .foot-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 10px; }
.site-foot .foot-links .sep { color: var(--line); }

/* buttons */
.btn {
  display: inline-block; border: 1px solid var(--ember); background: var(--ember);
  color: var(--ink); font-weight: 600; font-size: 15px; padding: 8px 18px 7px;
  border-radius: 2px; cursor: pointer; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 1.2px;
}
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--ember); }
.btn.ghost:hover { background: var(--ember); color: var(--ink); filter: none; }
.btn.sm { padding: 4px 12px 3px; font-size: 14px; }
button.btn { line-height: inherit; }
/* header sign-out is a POST form; let its button sit in the nav row like the old link */
.nav-out { display: contents; }
.btn.danger { border-color: var(--blood); background: var(--blood); color: var(--bone); }
.btn.danger.ghost { background: transparent; color: var(--blood); }

/* hero */
.hero { padding: 60px 0 36px; }
.hero h1 {
  font-family: var(--font-display); font-size: clamp(38px, 6vw, 64px);
  font-weight: 700; line-height: 1.02; letter-spacing: 1px; text-transform: uppercase;
}
.hero h1 .accent { color: var(--ember); }
.hero p { color: var(--fog); max-width: 560px; margin: 16px 0 0; font-size: 16px; }
.hero .cta { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }

/* stat band - readout strip */
.stats { display: flex; flex-wrap: wrap; gap: 12px 46px; margin: 34px 0; padding: 14px 2px 12px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 0; }
.stat .num { font-family: var(--font-mono); font-size: 21px; font-weight: 600; color: var(--bone); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stat .lbl { color: var(--fog); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }

/* sections + cards */
.section { margin: 44px 0; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 4px 14px; border-bottom: 1px solid var(--line); padding-bottom: 7px; }
.section-head h2 { font-family: var(--font-display); font-size: 21px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.section-head a { font-size: 13px; color: var(--fog); }
.section-head a:hover { color: var(--ember); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px,1fr)); gap: 14px; }
/* Fixed four-up. auto-fill would leave a lone trending server as one narrow card in a
   wide empty row; this keeps the row proportioned whatever the count. */
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.card {
  background: var(--coal); border: 1px solid var(--line); border-radius: 3px;
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s;
}
.card:hover { border-color: var(--ember); }
.card h3 { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.card h3 a { color: var(--bone); }
.card h3 a:hover { color: var(--ember); text-decoration: none; }
.card .meta { color: var(--fog); font-size: 13px; }
.card .cover {
  width: calc(100% + 32px); margin: -16px -16px 8px; height: 130px;
  object-fit: cover; border-radius: 3px 3px 0 0; background: var(--ash);
}
.card p.desc { color: var(--fog); font-size: 13px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* stars */
.stars { color: var(--line); font-size: 14px; letter-spacing: 1px; }
.stars .on { color: var(--ember); }
.stars .half { color: var(--ember); opacity: .55; }
.rating-line { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--fog); }

/* tables */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; color: var(--fog); font-size: 12px; text-transform: uppercase;
  letter-spacing: 1px; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.table td { padding: 12px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.table tr:hover td { background: var(--coal); }
.table a { color: var(--bone); font-weight: 500; }
.table a:hover { color: var(--ember); }
.table-scroll { overflow-x: auto; }

/* status dots */
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.dot.on { background: #4caf50; }
.dot.off { background: var(--blood); }

/* forms */
.form { max-width: 560px; display: flex; flex-direction: column; gap: 14px; }
.form label { font-size: 13px; color: var(--fog); display: block; margin-bottom: 4px; }
.form input[type=text], .form input[type=url], .form input[type=number], .form textarea, .form select {
  width: 100%; background: var(--ash); border: 1px solid var(--line); color: var(--bone);
  padding: 10px 12px; border-radius: 2px; font-family: var(--font-body); font-size: 14px;
}
.form input:focus, .form textarea:focus, .form select:focus { outline: none; border-color: var(--ember); }
.form textarea { min-height: 120px; resize: vertical; }
.form .row { display: flex; gap: 12px; }
.form .row > div { flex: 1; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks label {
  border: 1px solid var(--line); border-radius: 3px; padding: 5px 12px;
  cursor: pointer; color: var(--fog); font-size: 13px; margin: 0;
}
.checks input { display: none; }
.checks input:checked + span { color: var(--ember); }
.checks label:has(input:checked) { border-color: var(--ember); color: var(--ember); }

/* star input */
.star-input { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.star-input input { display: none; }
.star-input label { font-size: 26px; color: var(--line); cursor: pointer; margin: 0; }
.star-input label:hover, .star-input label:hover ~ label,
.star-input input:checked ~ label { color: var(--ember); }

/* page titles */
.page-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin: 36px 0 6px; overflow-wrap: anywhere; }
.page-sub { color: var(--fog); margin-bottom: 24px; }

/* review + forum items */
.item {
  background: var(--coal); border: 1px solid var(--line); border-radius: 3px;
  padding: 16px; margin-bottom: 12px;
}
.item .head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; font-size: 13px; color: var(--fog); flex-wrap: wrap; }
.item .head .who { color: var(--bone); font-weight: 600; }
.item .body p { margin-bottom: 8px; }
.item .body p:last-child { margin-bottom: 0; }
.item .actions { margin-top: 10px; display: flex; gap: 12px; font-size: 13px; flex-wrap: wrap; }
.badge {
  display: inline-block; border: 1px solid var(--line); border-radius: 2px;
  padding: 1px 7px; font-size: 11px; color: var(--fog); text-transform: uppercase; letter-spacing: .5px;
}
.badge.ember { border-color: var(--ember); color: var(--ember); }
.badge.blood { border-color: var(--blood); color: var(--blood); }
.badge.green { border-color: #4caf50; color: #4caf50; }
/* compact "modded" marker - small square dot, tooltip carries the word */
.mtag {
  display: inline-block; width: 8px; height: 8px; border-radius: 2px;
  background: var(--ember); vertical-align: baseline; margin-left: 6px; cursor: default;
}
/* suspect player count - small red warning glyph, tooltip carries the reason */
.stag {
  display: inline-block; margin-left: 6px; color: var(--blood);
  font-size: 12px; font-weight: 700; cursor: help; vertical-align: baseline;
}

/* ---- creator page: banners, accents, media ---- */
.cbanner {
  position: relative; min-height: 190px; border: 1px solid var(--line);
  border-radius: 3px; margin: 26px 0 0; overflow: hidden;
  background: var(--coal); display: flex; align-items: flex-end;
}
.cbanner__art { position: absolute; inset: 0; background-size: cover; background-position: center; }
.cbanner__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,.15) 0%, rgba(10,10,11,.55) 55%, rgba(10,10,11,.94) 100%);
}
.cbanner__inner { position: relative; padding: 18px 20px; width: 100%; display: flex; gap: 16px; align-items: flex-end; }
.cbanner__id { flex: 1; min-width: 0; }
.cbanner h1 { font-family: var(--font-display); font-size: clamp(22px, 3.6vw, 32px); font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin: 0; overflow-wrap: anywhere; }
.cbanner .tagline { color: var(--fog); font-size: 14px; margin-top: 3px; }
.cbanner .avatar.lg { border: 2px solid var(--acc, var(--ember)); box-shadow: 0 0 0 3px rgba(0,0,0,.45); }

/* CSS-only banner art, so nobody needs an image to look finished */
.bn-topo {
  background:
    repeating-radial-gradient(circle at 22% 120%, transparent 0 22px, rgba(255,255,255,.045) 22px 23px),
    repeating-radial-gradient(circle at 78% -20%, transparent 0 26px, rgba(255,255,255,.04) 26px 27px),
    linear-gradient(135deg, #101014, #17171c);
}
.bn-grid {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 34px),
    linear-gradient(160deg, #0e0e12, #16161b);
}
.bn-static {
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.055) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, #121216, #0c0c10);
}
.bn-ember { background: radial-gradient(120% 150% at 15% 110%, rgba(255,107,53,.42), transparent 60%), linear-gradient(140deg, #14100e, #0d0d10); }
.bn-frost { background: radial-gradient(120% 150% at 80% -10%, rgba(77,171,247,.35), transparent 60%), linear-gradient(140deg, #0d1116, #0c0c10); }
.bn-toxic { background: radial-gradient(110% 140% at 50% 130%, rgba(61,220,89,.30), transparent 62%), linear-gradient(140deg, #0d1410, #0b0b0f); }
.bn-blood { background: radial-gradient(120% 150% at 25% 120%, rgba(224,49,49,.38), transparent 60%), linear-gradient(140deg, #150e0f, #0c0c10); }
.bn-dusk  { background: linear-gradient(180deg, #1b1420 0%, #241a20 40%, #0d0d11 100%); }

/* accent themes scope to the creator page only */
.acc-ember  { --acc: #ff6b35; }
.acc-blood  { --acc: #e03131; }
.acc-frost  { --acc: #4dabf7; }
.acc-toxic  { --acc: #3ddc59; }
.acc-flare  { --acc: #fab005; }
.acc-violet { --acc: #b197fc; }
/* NOTE: the accented section-head bar that used to live here was removed 2026-08-25 -
   DESIGN.md bans left accent bars outright, and scoping it to .acc-scope had quietly
   kept the banned pattern alive on creator and claimed-server pages only. */
.acc-scope .stat .num { color: var(--acc); }
.acc-scope .card:hover { border-color: var(--acc); }
.acc-scope .btn { background: var(--acc); border-color: var(--acc); }
.acc-scope .btn.ghost { background: transparent; color: var(--acc); }
.acc-scope .btn.ghost:hover { background: var(--acc); color: var(--ink); }
.acc-scope .btn.danger { background: var(--blood); border-color: var(--blood); color: var(--bone); }
.acc-scope .btn.danger.ghost { background: transparent; color: var(--blood); }

/* media */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.media-grid img { width: 100%; height: 120px; object-fit: cover; border-radius: 3px; border: 1px solid var(--line); }
.media-grid a:hover img { border-color: var(--acc, var(--ember)); }
.clip {
  width: 100%; max-width: 720px; border-radius: 3px; border: 1px solid var(--line);
  background: #000; display: block;
}
.clip-note { color: var(--fog); font-size: 12px; margin-top: 6px; }
.preset-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.preset-pick label { position: relative; cursor: pointer; }
.preset-pick input { position: absolute; opacity: 0; }
.preset-pick span {
  display: block; width: 92px; height: 40px; border-radius: 3px;
  border: 2px solid var(--line); background-size: cover;
}
.preset-pick input:checked + span { border-color: var(--ember); }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches label { position: relative; cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatches span {
  display: block; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--line);
}
.swatches input:checked + span { border-color: var(--bone); transform: scale(1.12); }

/* ================= name cosmetics & trust ladder ================= */
.uname { font-weight: 700; color: var(--bone); }
/* solid colors - cores tuned for contrast on ink */
.u-c-ember { color: #ffb08a; }
.u-c-blood { color: #ff9d9d; }
.u-c-frost { color: #a8d8ff; }
.u-c-toxic { color: #9af0ab; }
.u-c-flare { color: #ffe08a; }
.u-c-shortwave { color: #9beef7; }
.u-c-irradiated { color: #d4c2ff; }
/* gradients */
.u-grad-dawn, .u-grad-killfeed, .u-grad-deadzone, .u-grad-coldfront, .u-grad-lastlight {
  background-clip: text; -webkit-background-clip: text; color: transparent;
}
.u-grad-dawn { background-image: linear-gradient(90deg,#ff6b35,#fab005); }
.u-grad-killfeed { background-image: linear-gradient(90deg,#e03131,#ff6b35); }
.u-grad-deadzone { background-image: linear-gradient(90deg,#3ddc59,#22d3ee); }
.u-grad-coldfront { background-image: linear-gradient(90deg,#4dabf7,#e9e9ec); }
.u-grad-lastlight { background-image: linear-gradient(90deg,#b197fc,#e03131);
  filter: drop-shadow(0 0 6px rgba(177,151,252,.55)); }
@supports not (background-clip: text) {
  .u-grad-dawn, .u-grad-killfeed, .u-grad-deadzone, .u-grad-coldfront, .u-grad-lastlight { color: #ffd8c2; background: none; }
}
/* neon: near-white core + layered glow */
.u-neon-ember      { color:#ffd8c2; text-shadow:0 0 1px #ffd8c2,0 0 6px #ff6b35,0 0 14px #ff6b35,0 0 26px rgba(255,107,53,.5); }
.u-neon-chemlight  { color:#d8ffde; text-shadow:0 0 1px #d8ffde,0 0 6px #3ddc59,0 0 14px #3ddc59,0 0 26px rgba(61,220,89,.5); }
.u-neon-frostline  { color:#dbf1ff; text-shadow:0 0 1px #dbf1ff,0 0 6px #4dabf7,0 0 14px #4dabf7,0 0 26px rgba(77,171,247,.5); }
.u-neon-nvg        { color:#eaffd6; text-shadow:0 0 1px #eaffd6,0 0 6px #8aff2b,0 0 14px #8aff2b,0 0 26px rgba(138,255,43,.5); }
.u-neon-flare      { color:#fff1c2; text-shadow:0 0 1px #fff1c2,0 0 6px #fab005,0 0 14px #fab005,0 0 26px rgba(250,176,5,.5); }
.u-neon-shortwave  { color:#c8fbff; text-shadow:0 0 1px #c8fbff,0 0 6px #22d3ee,0 0 14px #22d3ee,0 0 26px rgba(34,211,238,.5); }
.u-neon-irradiated { color:#ecdcff; text-shadow:0 0 1px #ecdcff,0 0 6px #b197fc,0 0 14px #b197fc,0 0 26px rgba(177,151,252,.5); }

/* tier pips - tiny rank tags after names */
.pip {
  display: inline-block; margin-left: 6px; padding: 1px 5px; border-radius: 3px;
  font-size: 9px; font-weight: 700; letter-spacing: .08em; vertical-align: 2px;
  border: 1px solid var(--line); color: var(--fog);
}
.pip-staff { border-color: #ff6b35; color: #ff6b35; }
.pip-survivor { border-color: #4d4d54; color: #8f8f97; }
.pip-scavenger { border-color: #6b6b52; color: #b9b98a; }
.pip-trader { border-color: #7a5a2e; color: #e0b36a; }
.pip-veteran { border-color: #7a3a1c; color: #ff8f5e; }
.pip-marksman { border-color: #7a2020; color: #ff7a7a; }
.pip-warlord { border-color: #55307a; color: #c9a8ff; }
.pip-legend { border-color: #b197fc; color: #e4d6ff; box-shadow: 0 0 8px rgba(177,151,252,.35); }

/* trust chip + tier progress */
.tchip {
  display: inline-block; padding: 3px 10px; border-radius: 3px; font-size: 11px;
  font-weight: 700; letter-spacing: .1em; border: 1px solid var(--line); color: var(--fog);
  font-variant-numeric: tabular-nums;
}
.tchip-trader, .tchip-veteran { border-color: #7a3a1c; color: #ff8f5e; }
.tchip-marksman, .tchip-warlord { border-color: #7a2020; color: #ff7a7a; }
.tchip-legend { border-color: #b197fc; color: #e4d6ff; }
.tprog { height: 7px; background: var(--ash); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; max-width: 380px; }
.tprog__bar { height: 100%; background: linear-gradient(90deg, #7a2e12, var(--ember)); border-radius: 999px; }
.tprog__lbl { color: var(--fog); font-size: 12.5px; margin-top: 6px; }

/* style picker on profile */
.stylegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.stylegrid label {
  position: relative; display: block; background: var(--ash); border: 1px solid var(--line);
  border-radius: 3px; padding: 12px 12px 9px; cursor: pointer; text-align: center;
  transition: border-color .15s;
}
.stylegrid label:hover { border-color: var(--ember); }
.stylegrid input { position: absolute; opacity: 0; }
.stylegrid input:checked + .sg-name { outline: none; }
.stylegrid label:has(input:checked) { border-color: var(--ember); box-shadow: 0 0 0 1px var(--ember); }
.stylegrid .sg-name { display: block; font-size: 15px; margin-bottom: 4px; }
.stylegrid .sg-req { display: block; color: var(--fog); font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; }
.stylegrid label.locked { opacity: .45; cursor: not-allowed; }
.stylegrid label.locked:hover { border-color: var(--line); }

/* ================= badges & avatar frames ================= */
.bdg {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 3px; margin: 0 4px 4px 0;
  border: 1px solid var(--line); color: var(--ember); background: var(--ash);
  vertical-align: middle; cursor: help; transition: transform .15s, border-color .15s;
}
.bdg:hover { border-color: var(--ember); }
.bdg-rare { color: #e4d6ff; border-color: #55307a; box-shadow: 0 0 8px rgba(177,151,252,.25); }
.bdg-sm { width: 22px; height: 22px; border-radius: 3px; margin: 0 0 0 6px; }
.bdg-sm svg { width: 14px; height: 14px; }
.badgecase { display: flex; flex-wrap: wrap; gap: 8px; }
.badgecase .bdg { width: 44px; height: 44px; }
.badgecase .bdg svg { width: 26px; height: 26px; }
.badgecase .locked { opacity: .28; color: var(--fog); box-shadow: none; }

.avw {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; padding: 3px; vertical-align: middle; position: relative;
  background: transparent;
}
.avw img { border-radius: 50%; display: block; background: var(--ash); object-fit: cover; }
.f-ring-ember { background: #ff6b35; }
.f-ring-blood { background: #e03131; }
.f-ring-frost { background: #4dabf7; }
.f-ring-toxic { background: #3ddc59; }
.f-coil-ember { background: conic-gradient(from 180deg, #ff6b35, #7a2e12, #ff6b35); }
.f-coil-chem { background: conic-gradient(from 180deg, #3ddc59, #0e4d1f, #3ddc59); }
.f-coil-frost { background: conic-gradient(from 180deg, #4dabf7, #10314d, #4dabf7); }
.f-coil-violet { background: conic-gradient(from 180deg, #b197fc, #38215e, #b197fc); }
.f-live-ember, .f-live-chem, .f-live-violet { background: none; }
.f-live-ember::before, .f-live-chem::before, .f-live-violet::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: ring-spin 7s linear infinite;
}
.f-live-ember::before { background: conic-gradient(from 180deg, #ff6b35, #7a2e12, #ff6b35); }
.f-live-chem::before { background: conic-gradient(from 180deg, #3ddc59, #0e4d1f, #3ddc59); }
.f-live-violet::before { background: conic-gradient(from 180deg, #b197fc, #38215e, #b197fc); box-shadow: 0 0 10px rgba(177,151,252,.4); }
.f-live-ember img, .f-live-chem img, .f-live-violet img { position: relative; z-index: 1; }
@keyframes ring-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .f-live-ember::before, .f-live-chem::before, .f-live-violet::before { animation: none; }
}
.framegrid { display: flex; flex-wrap: wrap; gap: 12px; }
.framegrid label { position: relative; cursor: pointer; text-align: center; }
.framegrid input { position: absolute; opacity: 0; }
.framegrid .fg-cap { display: block; color: var(--fog); font-size: 10px; margin-top: 4px; max-width: 74px; }
.framegrid label:has(input:checked) .avw { outline: 2px solid var(--ember); outline-offset: 2px; }
.framegrid label.locked { opacity: .4; cursor: not-allowed; }

/* ================= site-wide polish ================= */
.card, .item, .stat, .btn, .table tr, .nav-link { transition: border-color .15s ease, background .15s ease, color .15s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--ember); outline-offset: 2px;
}
/* live pulse on online dots */
.dot.on { position: relative; }
.dot.on::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(76,175,80,.5); animation: dotpulse 2.2s ease-out infinite;
}
@keyframes dotpulse { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
/* subtle scanline texture over the whole page */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
main, header.site-head, footer.site-foot { position: relative; z-index: 2; }
/* table headers stick on long lists */
.table-scroll { max-height: 72vh; overflow-y: auto; }
.table thead th, .table tr:first-child th { position: sticky; top: 0; background: var(--ink); z-index: 3; }
/* badge micro-interactions */
.badge { transition: border-color .15s, color .15s; }
.item:hover .badge, .card:hover .badge { border-color: var(--fog); }
/* empty states get the mark */
.empty { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .dot.on::after { animation: none; display: none; }
  * { transition-duration: .01ms !important; }
}

.flash {
  background: var(--ash); border: 1px solid var(--ember); color: var(--bone);
  border-radius: 2px; padding: 10px 14px; margin: 16px 0; font-size: 14px;
}

/* forum formatting: **bold**, `code`, ``` blocks, screenshot grids */
.item .body code, .codeblock {
  font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace;
  background: var(--ink); border: 1px solid var(--line); border-radius: 3px;
}
.item .body code { padding: 1px 6px; font-size: 13px; color: #ffd8a8; }
.codeblock {
  padding: 12px 14px; margin: 8px 0; font-size: 13px; line-height: 1.5;
  overflow-x: auto; white-space: pre; color: var(--bone);
}
.post-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.post-shots img {
  max-width: 220px; max-height: 150px; width: auto; height: auto;
  border: 1px solid var(--line); border-radius: 3px; object-fit: cover;
}
.post-shots a:hover img { border-color: var(--ember); }
/* hot-this-week strip on the forum index */
.hotrow { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; flex-wrap: wrap; }
.hotrow:last-child { border-bottom: none; }
.hotrow .n { font-family: var(--font-mono); color: var(--ember); font-size: 13px; min-width: 22px; }
.hotrow .meta { color: var(--fog); font-size: 12.5px; }
.empty {
  border: 1px solid var(--line); border-radius: 3px; color: var(--fog);
  text-align: center; padding: 44px 20px; font-size: 14px;
}
.avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--ash); vertical-align: middle; }
.avatar.lg { width: 64px; height: 64px; }

.pager { display: flex; gap: 8px; margin: 20px 0; flex-wrap: wrap; }
.pager a, .pager span {
  border: 1px solid var(--line); border-radius: 2px; padding: 5px 11px; font-size: 13px; color: var(--fog);
}
.pager a:hover { border-color: var(--ember); color: var(--ember); text-decoration: none; }
.pager .cur { border-color: var(--ember); color: var(--ember); }

.toolbar { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }
.toolbar form { display: flex; gap: 10px; flex: 1; min-width: 220px; flex-wrap: wrap; align-items: center; }
.toolbar input[type=text] {
  flex: 1; background: var(--ash); border: 1px solid var(--line); color: var(--bone);
  padding: 8px 12px; border-radius: 2px; font-size: 14px;
}
.toolbar select { background: var(--ash); border: 1px solid var(--line); color: var(--bone); padding: 8px; border-radius: 2px; }

@media (max-width: 640px) {
  .site-head nav { flex-wrap: wrap; gap: 10px 18px; }
  .nav-links { order: 3; width: 100%; flex-wrap: wrap; row-gap: 6px; }
  .nav-user { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
}

/* ---- mobile layout fixes ---- */
@media (max-width: 700px) {
  .hero { padding: 44px 0 32px; }
  .page-title { font-size: 25px; margin-top: 26px; }
  .stats { gap: 10px 26px; }
  .stat .num { font-size: 18px; }
  .section { margin: 32px 0; }

  /* toolbar: search input takes its own row, filters wrap below it */
  .toolbar form { min-width: 0; flex-basis: 100%; }
  .toolbar input[type=text] { flex: 1 1 100%; }
  .toolbar select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
  .toolbar form label { flex: 0 1 auto; }
  .toolbar > .btn { flex: 1 1 auto; text-align: center; }

  /* form rows stack instead of crushing 2-3 columns */
  .form .row { flex-wrap: wrap; }
  .form .row > div { flex: 1 1 100%; }

  /* iOS zooms the page when a focused field is under 16px */
  .form input[type=text], .form input[type=url], .form input[type=number],
  .form textarea, .form select, .toolbar input[type=text], .toolbar select { font-size: 16px; }

  .cbanner__inner { flex-wrap: wrap; gap: 10px 16px; padding: 14px 16px; }
  .item .head { gap: 8px 10px; }
  .site-foot { margin-top: 48px; }
}

/* ================= console motion system (2026-08-25) ================= */
/* Browser surfaces carry the design too: selection, scrollbar, caret. */
::selection { background: var(--ember); color: var(--ink); }
html { scrollbar-color: var(--ash) var(--ink); overflow-x: clip; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ash); border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--line); }
input, textarea, select { caret-color: var(--ember); }
h1, h2, h3 { text-wrap: balance; }

/* ---- custom reticle cursor (fine pointers only; JS gates it) ----
   Owner 2026-10-08: only the crosshair, never the system mouse (text fields too: the typing caret
   still shows); over anything clickable it turns 90 degrees and tightens into a plus around the dot. */
html.cursor-on, html.cursor-on * { cursor: none !important; }
.cur-dot, .cur-ring {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 200;
  opacity: 0; will-change: transform;
}
html.cursor-seen .cur-dot, html.cursor-seen .cur-ring { opacity: 1; }
.cur-dot { width: 4px; height: 4px; margin: -2px 0 0 -2px; background: var(--ember); box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); z-index: 201; }
.cur-ring { width: 36px; height: 36px; margin: -18px 0 0 -18px; }
.cur-x { position: absolute; inset: 0; transition: transform .28s cubic-bezier(.16,1,.3,1); }
.cur-ring i {
  position: absolute; background: var(--bone); opacity: .55;
  transition: transform .28s cubic-bezier(.16,1,.3,1), background .18s, opacity .18s;
}
.cur-ring i:nth-child(1) { left: 50%; top: 0;    width: 1px; height: 7px; margin-left: -.5px; }
.cur-ring i:nth-child(2) { top: 50%;  right: 0;  height: 1px; width: 7px; margin-top: -.5px; }
.cur-ring i:nth-child(3) { left: 50%; bottom: 0; width: 1px; height: 7px; margin-left: -.5px; }
.cur-ring i:nth-child(4) { top: 50%;  left: 0;   height: 1px; width: 7px; margin-top: -.5px; }
/* clickable: orange, turned 90 degrees, ticks tightened into a plus around the dot */
html.cursor-hot .cur-x { transform: rotate(90deg); }
html.cursor-hot .cur-ring i { background: var(--ember); opacity: 1; }
html.cursor-hot .cur-ring i:nth-child(1) { transform: translateY(9px); }
html.cursor-hot .cur-ring i:nth-child(2) { transform: translateX(-9px); }
html.cursor-hot .cur-ring i:nth-child(3) { transform: translateY(-9px); }
html.cursor-hot .cur-ring i:nth-child(4) { transform: translateX(9px); }
/* pressing: snap in (the plus squeezes when over something clickable) */
html.cursor-down .cur-ring i:nth-child(1) { transform: translateY(4px); }
html.cursor-down .cur-ring i:nth-child(2) { transform: translateX(-4px); }
html.cursor-down .cur-ring i:nth-child(3) { transform: translateY(-4px); }
html.cursor-down .cur-ring i:nth-child(4) { transform: translateX(4px); }
html.cursor-hot.cursor-down .cur-x { transform: rotate(90deg) scale(.75); }
html.cursor-hot.cursor-down .cur-ring i:nth-child(1) { transform: translateY(9px); }
html.cursor-hot.cursor-down .cur-ring i:nth-child(2) { transform: translateX(-9px); }
html.cursor-hot.cursor-down .cur-ring i:nth-child(3) { transform: translateY(-9px); }
html.cursor-hot.cursor-down .cur-ring i:nth-child(4) { transform: translateX(9px); }

/* ---- site-drawn dropdowns (site.js: only while the crosshair runs) ----
   A native select list is drawn by the browser above the page, where the crosshair cannot go. */
.dd { position: relative; display: inline-block; vertical-align: middle; max-width: 100%; }
.dd.dd-block { display: block; }
.dd.dd-block .dd-btn { width: 100%; }
.dd-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.dd-btn {
  position: relative; display: inline-flex; align-items: center; max-width: 100%;
  padding-right: 30px; text-align: left; line-height: 1.3; box-shadow: none; transform: none;
}
.dd-btn:hover { filter: brightness(1.15); }
.dd-btn:focus-visible { outline: 1px solid var(--ember); outline-offset: 1px; }
.dd-btn::after {
  content: ''; position: absolute; right: 11px; top: 50%; margin-top: -2px;
  border: 4px solid transparent; border-top-color: var(--fog); border-bottom: 0;
}
.dd-btn[aria-expanded="true"]::after { border-top-color: var(--ember); }
.dd-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dd-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 150; min-width: 100%;
  max-height: 300px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--ash); border: 1px solid var(--line); border-radius: 2px;
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, .8);
}
.dd.up .dd-list { top: auto; bottom: calc(100% + 4px); }
.dd-list li {
  padding: 7px 12px; color: var(--bone); white-space: nowrap; font-size: 14px; border-radius: 2px;
}
.dd-list li[aria-selected="true"] { color: var(--ember); }
.dd-list li.on { background: var(--ember); color: var(--ink); }

/* ---- animated brand mark (inline SVG in the header) ---- */
.mark { width: 21px; height: 21px; margin-right: 8px; vertical-align: -4px; }
.mark .compass { transform-origin: 50% 50%; transition: transform .5s cubic-bezier(.16,1,.3,1); }
.brand:hover .mark .compass { transform: rotate(90deg); }
.js .mark .ring { stroke-dasharray: 950; stroke-dashoffset: 950; }
.js .mark .tick { opacity: 0; }
.js .mark .zee  { stroke-dasharray: 540; stroke-dashoffset: 540; }
html.boot .mark .ring {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .7s cubic-bezier(.16,1,.3,1) .05s;
}
html.boot .mark .tick { opacity: 1; transition: opacity .3s ease .55s; }
html.boot .mark .zee {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset .55s cubic-bezier(.16,1,.3,1) .35s;
}

/* ---- header responds to scroll ---- */
.site-head { transition: background .25s ease; }
html.scrolled .site-head { background: rgba(10,10,11,.97); }

/* ---- homepage hero: the watchtower console ---- */
.hero-console {
  position: relative;
  width: 100vw; margin-left: calc(50% - 50vw);
  min-height: min(88vh, 860px);
  display: flex; flex-direction: column; justify-content: center;
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--ink); }
.hero-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 38%;
  opacity: .55; filter: saturate(.75);
}
/* fog mask: composites the photograph into the ink ground (image blending, not chrome) */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,.72) 0%, rgba(10,10,11,.25) 34%, rgba(10,10,11,.45) 68%, var(--ink) 98%),
    linear-gradient(90deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,0) 40%);
}
.hero-console .hero-grid {
  position: relative; z-index: 1;
  max-width: 1100px; width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
  gap: 48px; align-items: center;
  padding: 104px 20px 72px;
}
.hero-console h1 {
  font-family: var(--font-display); font-size: clamp(42px, 6.4vw, 74px);
  font-weight: 700; line-height: .98; letter-spacing: 1px; text-transform: uppercase;
}
.hero-console h1 .accent { color: var(--ember); }
.hero-console .sub { color: var(--fog); max-width: 520px; margin: 18px 0 0; font-size: 16px; }
.hero-console .cta { margin-top: 30px; display: flex; gap: 12px; flex-wrap: wrap; }
/* brand eyebrow above the h1: the two-word name in the hud's label voice, one line always;
   the middot and the tagline word sit in fog so the name leads. */
.hero-console .eyebrow {
  margin: 0 0 16px; font-family: var(--font-display); font-size: 15px; font-weight: 600;
  letter-spacing: 2px; text-transform: uppercase; color: var(--fog); white-space: nowrap;
}
.hero-console .eyebrow strong { color: var(--bone); font-weight: 600; }
.hero-console .eyebrow .sep { margin: 0 9px; }
/* entrance: copy rises once, radar boots. Default state is visible (no-JS safe);
   the .js class arms the hidden start, .boot releases it. */
.js:not(.boot) .hero-copy > * { opacity: 0; transform: translateY(14px); }
html.boot .hero-copy > * {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
html.boot .hero-copy > :nth-child(1) { transition-delay: .1s; }
html.boot .hero-copy > :nth-child(2) { transition-delay: .22s; }
html.boot .hero-copy > :nth-child(3) { transition-delay: .34s; }
html.boot .hero-copy > :nth-child(4) { transition-delay: .46s; } /* eyebrow, h1, sub, cta */
.js:not(.boot) .hero-radar { opacity: 0; }
html.boot .hero-radar { opacity: 1; transition: opacity .8s ease .45s; }

/* ---- radar scope ---- */
.hero-radar { display: flex; flex-direction: column; gap: 10px; justify-self: end; width: 100%; max-width: 400px; }
.radar-scope { position: relative; aspect-ratio: 1 / 1; }
#radar { display: block; width: 100%; height: 100%; }
.radar-scope .rc { position: absolute; width: 13px; height: 13px; border: 0 solid rgba(233,233,236,.4); }
.radar-scope .rc:nth-child(2) { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.radar-scope .rc:nth-child(3) { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.radar-scope .rc:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.radar-scope .rc:nth-child(5) { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.radar-clock {
  position: absolute; top: 8px; right: 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--fog);
  font-variant-numeric: tabular-nums;
}
.radar-hud {
  display: flex; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line); padding-top: 9px;
}
.radar-hud .cell { min-width: 0; }
.radar-hud .n {
  font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.radar-hud .lbl { color: var(--fog); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }
.radar-hud .cell.flag .n { color: var(--blood); }

/* ---- scroll reveals: one entrance style, sections rise once ---- */
.js .rv { opacity: 0; transform: translateY(16px); }
.js .rv.in {
  opacity: 1; transform: none;
  transition: opacity .55s cubic-bezier(.16,1,.3,1), transform .55s cubic-bezier(.16,1,.3,1);
}

@media (max-width: 900px) {
  .hero-console { min-height: 0; }
  .hero-console .hero-grid { grid-template-columns: 1fr; gap: 36px; padding: 72px 20px 48px; }
  .hero-radar { justify-self: center; max-width: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  .js .mark .ring, html.boot .mark .ring { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .mark .zee, html.boot .mark .zee { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .mark .tick { opacity: 1 !important; }
  .brand:hover .mark .compass { transform: none; }
  .js:not(.boot) .hero-copy > *, .js .rv { opacity: 1; transform: none; }
  .js:not(.boot) .hero-radar { opacity: 1; }
}

/* ================= creator dossier card ================= */
/* Pointer-driven 3D tilt (physics per ReactBits ProfileCard) rendered in this world's
   material: matte panel metal raked by one fixed lamp, not iridescent foil. Single-hue
   specular, hairline furniture, stencil type. Radius stays at the system's 3px. */
.dossier {
  --rx: 0deg; --ry: 0deg; --px: 50%; --py: 50%;
  --lx: 50%; --ly: 50%; --from-center: 0;
  perspective: 620px;
  width: 100%; max-width: 340px;
  flex: 0 0 auto;
}
.dossier-shell {
  position: relative;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.16,1,.3,1);
  background: var(--coal);
  border: 1px solid var(--line);
  border-radius: 3px;
  /* the panel casts toward the lamp, so the shadow leans opposite the tilt */
  box-shadow:
    calc((var(--ry) / 1deg) * -0.7px) calc((var(--rx) / 1deg) * 0.7px) 34px -12px rgba(0,0,0,.85);
}
.dossier.lit .dossier-shell { transition: none; }
.dossier-shell::before,
.dossier-shell::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 2px; }
/* fine scanline glass over the panel */
.dossier-shell::before {
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 3px);
  z-index: 3;
}
/* the raking specular: one narrow band of bone light, strongest near the pointer */
.dossier-shell::after {
  background: radial-gradient(120% 90% at var(--lx) var(--ly),
    rgba(233,233,236,.16) 0%, rgba(233,233,236,.05) 26%, transparent 58%);
  opacity: calc(.25 + var(--from-center) * .75);
  mix-blend-mode: screen;
  transition: opacity .3s ease;
  z-index: 4;
}
.dossier-inner { position: relative; z-index: 2; padding: 0; }
/* corner brackets: same console furniture as the radar scope */
.dossier-shell .dc { position: absolute; width: 12px; height: 12px; border: 0 solid rgba(233,233,236,.45); z-index: 5; }
.dossier-shell .dc:nth-of-type(1) { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
.dossier-shell .dc:nth-of-type(2) { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; }
.dossier-shell .dc:nth-of-type(3) { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; }
.dossier-shell .dc:nth-of-type(4) { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }

/* header strip: file designation + live status lamp */
.dsr-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 14px 10px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fog);
}
.dsr-top .id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsr-top .st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dsr-top .st i { width: 6px; height: 6px; border-radius: 50%; background: var(--fog); }
.dsr-top .st.on i { background: #4caf50; }
.dsr-top .st.wait i { background: var(--ember); }
.dsr-top .st.off i { background: var(--blood); }

/* portrait: the one element that lifts off the panel under tilt */
.dsr-portrait {
  position: relative; padding: 26px 14px 16px; text-align: center;
  transform: translateZ(26px);
}
.dsr-portrait .avw { width: 108px; height: 108px; }
.dsr-portrait .avw img { width: 102px; height: 102px; object-fit: cover; }
.dsr-portrait .noav {
  width: 102px; height: 102px; margin: 0 auto; border: 1px solid var(--line);
  background: var(--ash); display: grid; place-items: center;
  font-family: var(--font-display); font-size: 40px; color: var(--fog);
  text-transform: uppercase;
}
.dsr-name {
  font-family: var(--font-display); font-size: 25px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; margin-top: 13px;
  overflow-wrap: anywhere; line-height: 1.05;
}
.dsr-role { color: var(--fog); font-size: 12.5px; margin-top: 5px; overflow-wrap: anywhere; }
.dsr-tags { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; margin-top: 11px; }

/* readout grid: hairline-divided cells, mono figures */
.dsr-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line); transform: translateZ(14px);
}
.dsr-stats .cell { padding: 11px 8px 10px; text-align: center; border-left: 1px solid var(--line); }
.dsr-stats .cell:first-child { border-left: 0; }
.dsr-stats .n {
  font-family: var(--font-mono); font-size: 17px; font-weight: 600;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
.dsr-stats .n .of { color: var(--fog); font-size: 11px; }
.dsr-stats .lbl { color: var(--fog); font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; margin-top: 3px; }
.dsr-act { padding: 12px 14px 14px; border-top: 1px solid var(--line); display: flex; gap: 8px; flex-wrap: wrap; transform: translateZ(10px); }
/* nowrap keeps every control a uniform single-line height; tight rows wrap whole
   controls to the next line instead of wrapping a button's own label */
.dsr-act .btn { flex: 1; text-align: center; white-space: nowrap; padding-left: 12px; padding-right: 12px; }

/* creator header: dossier over the banner art, same composition as the homepage hero */
.chead { position: relative; margin: 26px 0 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.chead__art { position: absolute; inset: 0; background-size: cover; background-position: center; }
/* An owner's own photograph arrives at full brightness, unlike the CSS presets, so it gets
   an extra veil of its own - otherwise white text on a daylit screenshot is unreadable. */
.chead.has-photo .chead__art::after {
  content: ""; position: absolute; inset: 0; background: rgba(10,10,11,.42);
}
.chead.has-photo .chead__scrim {
  background:
    linear-gradient(90deg, rgba(10,10,11,.25) 0%, rgba(10,10,11,.48) 38%, rgba(10,10,11,.78) 100%),
    linear-gradient(180deg, rgba(10,10,11,.35) 0%, rgba(10,10,11,.25) 45%, rgba(10,10,11,.88) 100%);
}
.srv-desc { max-width: 72ch; }
/* The banner presets put their glow bottom-LEFT, and the dossier is an opaque panel that
   needs no protection, so the veil leans dark to the RIGHT where the bio text sits and
   stays thin on the left so a creator's chosen preset or art actually reads. */
.chead__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,10,11,.12) 0%, rgba(10,10,11,.30) 38%, rgba(10,10,11,.66) 100%),
    linear-gradient(180deg, rgba(10,10,11,.22) 0%, rgba(10,10,11,.10) 45%, rgba(10,10,11,.80) 100%);
}
.chead__grid {
  position: relative; display: flex; gap: 30px; align-items: center;
  padding: 30px; flex-wrap: wrap;
}
.chead__id { flex: 1 1 320px; min-width: 0; }
.chead__id h1 {
  font-family: var(--font-display); font-size: clamp(26px, 4vw, 40px); font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; margin: 0; overflow-wrap: anywhere;
}
.chead__id .tagline { color: var(--fog); font-size: 14px; margin-top: 8px; }
.chead__id .bio { color: var(--bone); font-size: 14px; margin-top: 14px; max-width: 62ch; }
.chead__id .linkrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

@media (max-width: 760px) {
  .chead__grid { padding: 20px; gap: 22px; justify-content: center; }
  .dossier { max-width: 100%; }
  .chead__id { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .dossier-shell { transform: none !important; transition: none !important; }
  .dsr-portrait, .dsr-stats, .dsr-act { transform: none !important; }
  .dossier-shell::after { opacity: .3 !important; }
}

/* ================= story pages (the spoofing exposé) ================= */
/* Scrubbed figures read --p (0..1 scroll progress) so the evidence assembles at the
   reader's own pace. Every figure is legible at --p:0 or with no JS at all. */
.story-hero { padding: 74px 0 26px; max-width: 780px; }
.story-h1 {
  font-family: var(--font-display); font-size: clamp(38px, 6.2vw, 68px);
  font-weight: 700; line-height: .99; letter-spacing: 1px; text-transform: uppercase;
}
.story-h1 .accent { color: var(--ember); }
.story-lede { color: var(--fog); font-size: 17px; margin-top: 20px; max-width: 62ch; }
.story { max-width: 66ch; margin: 54px 0; }
.story h2 {
  font-family: var(--font-display); font-size: 25px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 16px;
}
.story p { margin-bottom: 14px; }
.story p:last-of-type { margin-bottom: 0; }
.story-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
/* /workshop-crawler landing: badge row under the hero buttons, FAQ answers inside the story column */
.story-hero .tool-band__note { margin-top: 18px; }
.story .fmt .fmt-note { font-size: 14px; padding-top: 8px; }

.fig { margin: 52px 0; padding: 0; }
.fig-tight { margin: 34px 0; }
.fig figcaption {
  color: var(--fog); font-size: 13px; margin-top: 14px;
  border-top: 1px solid var(--line); padding-top: 10px; max-width: 68ch;
}

/* --- the ratio bars, drawn to scale --- */
.fig-bars { display: flex; flex-direction: column; gap: 16px; }
.bar { position: relative; height: 46px; border: 1px solid var(--line); background: var(--coal); }
.bar .bar-fill { position: absolute; inset: 0 auto 0 0; display: block; }
/* advertised: fills the full width as you scroll into it */
.bar-fake .bar-fill { width: calc(var(--p, 0) * 100%); background: rgba(224,49,49,.30); border-right: 1px solid var(--blood); }
/* real: the same scroll reveals how little there is */
.bar-real .bar-fill { width: calc(var(--p, 0) * var(--w, 1%)); background: var(--ember); }
.bar .bar-tag {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--fog);
  white-space: nowrap;
}
.bar .bar-tag .n {
  font-family: var(--font-mono); font-size: 17px; font-weight: 600; color: var(--bone);
  font-variant-numeric: tabular-nums; margin-right: 7px;
}
.bar-real .bar-tag { left: auto; right: 12px; }

/* --- packet diagram --- */
.dia { width: 100%; height: auto; display: block; }
.dia text { font-family: var(--font-body); font-size: 14px; text-anchor: middle; }
.dia .sm { font-size: 11.5px; text-transform: uppercase; letter-spacing: .1em; opacity: .7; }
.dia .hot { fill: var(--ember); }
.dia .wire { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 4; }
.dia .dia-boxes rect { fill: var(--coal); }
/* the reply crosses the wire right-to-left; it is honest until it passes the tool */
.dia .pkt rect { fill: var(--ink); stroke: var(--line); }
.dia .pkt .pkt-t { font-family: var(--font-mono); font-size: 12px; fill: var(--bone); }
/* travel stops short of each box so an arriving packet never sits on top of a label */
.dia .pkt { transform: translateX(calc(710px - var(--p, 0) * 130px)); }
.dia .pkt-fake {
  transform: translateX(calc(362px - max(0, (var(--p, 0) - .5)) * 2 * 124px));
  opacity: clamp(0, (var(--p, 0) - .5) * 20, 1);
}
.dia .pkt-fake rect { stroke: var(--blood); }
.dia .pkt-fake .pkt-t { fill: #ff9d9d; }
/* the honest packet is consumed by the tool at the halfway point */
.dia .pkt:not(.pkt-fake) { opacity: clamp(0, (.55 - var(--p, 0)) * 20, 1); }

/* --- the two replies, byte for byte --- */
.replies { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.reply { border: 1px solid var(--line); background: var(--coal); padding: 15px; }
.reply-h { margin-bottom: 12px; }
.reply .tag {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  border: 1px solid var(--line); padding: 2px 8px; color: var(--fog);
}
.reply .tag.ok { border-color: #4caf50; color: #4caf50; }
.reply .tag.bad { border-color: var(--blood); color: #ff9d9d; }
.bytes { display: flex; flex-wrap: wrap; gap: 6px; }
.by {
  font-family: var(--font-mono); font-size: 13px; color: var(--bone);
  border: 1px solid var(--line); padding: 6px 9px; background: var(--ink);
  display: inline-flex; align-items: baseline; gap: 7px;
}
.by i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--fog); }
/* the bot cell is the whole argument, so it arrives last and lit */
.by.hi { transition: border-color .3s ease, background .3s ease; }
.by.hi.ok { border-color: rgba(76,175,80, calc(var(--p, 0) * 1)); }
.by.hi.bad {
  border-color: rgba(224,49,49, calc(var(--p, 0) * 1));
  background: rgba(224,49,49, calc(var(--p, 0) * .16));
}
.by.hi.bad i, .by.hi.bad { color: #ff9d9d; }
.reply-n { color: var(--fog); font-size: 13px; margin-top: 11px; }

/* --- readout strip --- */
.readouts {
  display: flex; flex-wrap: wrap; gap: 14px 44px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 16px 2px;
}
.readouts .n {
  font-family: var(--font-mono); font-size: 25px; font-weight: 600; color: var(--bone);
  font-variant-numeric: tabular-nums;
}
.readouts .bad .n { color: var(--blood); }
.readouts .l { color: var(--fog); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 3px; }

@media (max-width: 700px) {
  .story-hero { padding: 48px 0 18px; }
  .story { margin: 40px 0; }
  .fig { margin: 38px 0; }
  .bar .bar-tag { font-size: 11px; }
  .bar .bar-tag .n { font-size: 15px; }
  .bar-real .bar-tag { right: 8px; }
  .readouts { gap: 12px 26px; }
  .readouts .n { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .bar .bar-fill, .dia .pkt { transition: none; }
}

/* ================= rich text, formatting help, galleries ================= */
/* Elements rich_text() can emit. Headings stay below the page's own h1/h2 so an owner
   cannot out-shout the page chrome from inside a description. */
.rt-h {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .6px;
  font-size: 18px; font-weight: 600; margin: 18px 0 8px; color: var(--bone);
}
.body h4.rt-h, .bio h4.rt-h { font-size: 15px; letter-spacing: .4px; }
.rt-hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.body ul, .body ol, .bio ul, .bio ol { margin: 0 0 12px 20px; }
.body li, .bio li { margin-bottom: 5px; }
.body blockquote, .bio blockquote {
  border-left: 2px solid var(--line); padding: 2px 0 2px 13px;
  margin: 0 0 12px; color: var(--fog);
}
.body del, .bio del { color: var(--fog); }
.body em, .bio em { color: var(--bone); }

/* formatting cheatsheet under any rich-text box */
.fmt { margin-top: 9px; border: 1px solid var(--line); border-radius: 3px; background: var(--ink); }
.fmt > summary {
  cursor: pointer; padding: 8px 12px; font-size: 12px; color: var(--fog);
  text-transform: uppercase; letter-spacing: .09em; list-style: none;
}
.fmt > summary::-webkit-details-marker { display: none; }
.fmt > summary::before { content: "+ "; color: var(--ember); }
.fmt[open] > summary::before { content: "- "; }
.fmt > summary:hover { color: var(--bone); }
.fmt-grid {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px;
  padding: 4px 12px 10px; align-items: center;
}
.fmt-grid code {
  font-family: var(--font-mono); font-size: 12px; color: #ffd8a8;
  background: var(--coal); border: 1px solid var(--line); border-radius: 2px; padding: 2px 7px;
  white-space: nowrap;
}
.fmt-grid span { color: var(--fog); font-size: 12.5px; }
.fmt-note { color: var(--fog); font-size: 12px; padding: 0 12px 10px; }
.hint { color: var(--fog); font-size: 12.5px; margin-top: 6px; }
.dim { color: var(--fog); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.urlrows { display: grid; gap: 7px; }
.assignrow { display: flex; gap: 7px; align-items: center; }
.assignrow input[type=text] {
  background: var(--ash); border: 1px solid var(--line); color: var(--bone);
  padding: 6px 9px; border-radius: 2px; font-size: 13px; min-width: 190px;
}

/* remote screenshot gallery */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.shots img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border: 1px solid var(--line); border-radius: 3px; background: var(--ash);
  transition: border-color .15s ease;
}
.shots a:hover img { border-color: var(--acc, var(--ember)); }
.shots-note { color: var(--fog); font-size: 12px; margin-top: 9px; }

/* server dossier: the player count is the portrait */
.dsr-count { padding: 22px 14px 15px; }
.dsr-count .big {
  font-family: var(--font-mono); font-size: 46px; font-weight: 600; line-height: 1;
  color: var(--bone); font-variant-numeric: tabular-nums;
}
.dsr-count .big .of { font-size: 21px; color: var(--fog); }
.dsr-stats .n .of { color: var(--fog); font-size: 11px; }
.dsr-stats .cell .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .fmt-grid { grid-template-columns: 1fr; gap: 3px 0; }
  .fmt-grid code { justify-self: start; }
  .fmt-grid span { margin-bottom: 7px; }
  .assignrow { flex-wrap: wrap; }
  .assignrow input[type=text] { min-width: 0; flex: 1 1 100%; }
}

/* ================= verification marks on reviews ================= */
/* Small, quiet, and only legible as a pair - the point is that a reader can tell at a
   glance the reviewer cleared the linked-accounts bar, not that the marks shout. */
.vset { display: inline-flex; align-items: center; gap: 3px; }
.vmark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; vertical-align: -3px; cursor: help;
  border: 1px solid var(--line); border-radius: 2px; background: var(--ink);
}
.vmark svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.vmark-discord svg { fill: currentColor; stroke: none; }
.vmark-steam { color: #7bb3d9; border-color: #33556b; }
.vmark-discord { color: #8b9be8; border-color: #3d4470; }
.vset .vmark { border-color: #3d6b47; }
.vset .vmark-steam, .vset .vmark-discord { color: #6fc27d; }
.vmark-none {
  width: auto; padding: 1px 6px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--fog); background: transparent;
}
/* the review head is a flex row already; keep the marks tight to the name */
.item .head .vset, .item .head .vmark { margin-left: 2px; }

/* landing-page lists: benefits and numbered procedure */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li {
  position: relative; padding: 0 0 0 26px; margin-bottom: 13px; color: var(--fog);
}
.ticks li strong { color: var(--bone); }
/* a drawn mark, not a unicode glyph standing in for an icon */
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 9px; height: 5px; border-left: 1.5px solid var(--ember);
  border-bottom: 1.5px solid var(--ember); transform: rotate(-45deg);
}
.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative;
  padding: 0 0 0 34px; margin-bottom: 13px; color: var(--fog);
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -1px;
  width: 21px; height: 21px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-mono); font-size: 11px; color: var(--ember);
}

/* identity source picker: each option previews the identity it would apply */
.idgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.idopt { position: relative; display: block; cursor: pointer; margin: 0; }
.idopt input { position: absolute; opacity: 0; pointer-events: none; }
.idopt-in {
  display: block; border: 1px solid var(--line); border-radius: 3px;
  background: var(--coal); padding: 12px 13px; height: 100%;
  transition: border-color .15s ease, background .15s ease;
}
.idopt:hover .idopt-in { border-color: var(--fog); }
.idopt input:checked + .idopt-in { border-color: var(--ember); background: var(--ash); }
.idopt.locked { cursor: not-allowed; opacity: .5; }
.idopt.locked:hover .idopt-in { border-color: var(--line); }
.idopt-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.idopt-name {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .7px; color: var(--bone);
}
.idopt input:checked + .idopt-in .idopt-name { color: var(--ember); }
.idopt-prev { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; min-width: 0; }
.idopt-prev img, .idopt-noav {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%;
  object-fit: cover; background: var(--ink); border: 1px solid var(--line);
}
.idopt-noav { display: grid; place-items: center; color: var(--fog); font-size: 15px; text-transform: uppercase; }
.idopt-pname {
  font-size: 13.5px; color: var(--bone); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.idopt-desc { display: block; color: var(--fog); font-size: 12px; line-height: 1.5; }

/* partly-linked reviewer notice, above the review form */
.notice-partial {
  border: 1px solid var(--line); border-left: 2px solid var(--ember);
  background: var(--ink); border-radius: 2px;
  padding: 10px 13px; margin-bottom: 14px;
  color: var(--fog); font-size: 13px; line-height: 1.55;
}
.notice-partial a { color: var(--ember); }

/* language switcher */
.langbox { display: inline-flex; }
.langbox select {
  background: var(--ash); border: 1px solid var(--line); color: var(--fog);
  border-radius: 2px; padding: 4px 6px; font-size: 12.5px;
}
.langbox select:hover { color: var(--bone); border-color: var(--ember); }

/* owner bar: the first thing an owner sees on a page they control. Sits above the hero
   because the settings form itself is far down the page, below content aimed at visitors,
   and an owner should never have to hunt for the one action they came to perform. */
.ownerbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  margin: 26px 0 -14px;
  padding: 11px 14px;
  border: 1px solid var(--ember); border-radius: 3px;
  background: linear-gradient(0deg, rgba(255,107,53,.06), rgba(255,107,53,.06)), var(--coal);
}
.ownerbar-txt { color: var(--fog); font-size: 13.5px; }
.ownerbar-txt strong { color: var(--bone); margin-right: 5px; }
.ownerbar-act { display: flex; gap: 8px; flex-wrap: wrap; }
/* the anchored section should not land flush against the sticky header */
#owner-settings { scroll-margin-top: 78px; }
@media (max-width: 700px) {
  .ownerbar { margin: 20px 0 -8px; }
  .ownerbar-act { width: 100%; }
  .ownerbar-act .btn { flex: 1 1 auto; text-align: center; }
}

/* ================= image lightbox ================= */
/* Gallery images expand in place rather than opening a tab. Same console furniture as
   the dossier and radar: ink backdrop, hairline panel, corner brackets, mono counter. */
.lb { position: fixed; inset: 0; z-index: 120; display: none; }
.lb.on { display: block; }
html.lb-open { overflow: hidden; }
.lb-back {
  position: absolute; inset: 0;
  background: rgba(10,10,11,.93);
  backdrop-filter: blur(3px);
}
.lb-panel {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  margin: 0; padding: 10px;
  width: fit-content; height: fit-content;
  background: var(--coal); border: 1px solid var(--line); border-radius: 3px;
}
/* The frame is the bracket anchor: an inline-block that shrink-wraps the rendered image
   EXACTLY, whatever its aspect ratio or the viewport caps resolve to. Anchoring brackets
   to the padded panel let them drift off small and portrait images. */
.lb-frame { position: relative; display: inline-block; line-height: 0; }
.lb-panel img {
  display: block; max-width: min(92vw - 22px, 1478px); max-height: calc(88vh - 22px);
  border: 1px solid var(--line); background: var(--ink);
  min-width: 120px; min-height: 80px;
  transition: opacity .18s ease;
}
.lb.lb-loading .lb-panel img { opacity: .25; }
/* the same corner brackets as the radar scope and dossier */
.lb-frame .lc { position: absolute; width: 15px; height: 15px; border: 0 solid rgba(233,233,236,.55); z-index: 1; }
.lb-frame .lc:nth-of-type(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.lb-frame .lc:nth-of-type(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.lb-frame .lc:nth-of-type(3) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.lb-frame .lc:nth-of-type(4) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.lb-count {
  position: absolute; top: 18px; left: 22px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  color: var(--fog); font-variant-numeric: tabular-nums;
}
.lb-x {
  position: absolute; top: 10px; right: 12px;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line); border-radius: 2px;
  color: var(--bone); font-size: 26px; line-height: 1; cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.lb-x:hover { border-color: var(--ember); color: var(--ember); }
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 64px; display: grid; place-items: center;
  background: rgba(18,18,20,.6); border: 1px solid var(--line); border-radius: 2px;
  cursor: pointer; transition: border-color .15s ease;
}
.lb-nav svg { width: 22px; height: 22px; fill: none; stroke: var(--bone); stroke-width: 1.8; }
.lb-nav:hover { border-color: var(--ember); }
.lb-nav:hover svg { stroke: var(--ember); }
.lb-prev { left: 14px; }
.lb-next { right: 14px; }
.lb.lb-single .lb-nav, .lb.lb-single .lb-count { display: none; }
.lb-x:focus-visible, .lb-nav:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; }
@media (max-width: 700px) {
  .lb-nav { width: 40px; height: 52px; }
  .lb-prev { left: 6px; } .lb-next { right: 6px; }
  .lb-panel { padding: 6px; }
  .lb-panel img { max-width: calc(92vw - 14px); max-height: calc(84vh - 14px); }
}
@media (prefers-reduced-motion: reduce) {
  .lb-panel img { transition: none; }
}

/* ================= media offline ================= */
/* Failed media swaps to an inline-SVG "MEDIA OFFLINE" panel (site.js) so a downed media
   host degrades to labeled panels instead of broken-image glyphs. Banner artwork divs
   cannot fire an error event, so site.js probes them and stamps via ::after instead. */
img.media-offline { object-fit: contain; background: var(--coal); }
.media-offline-bg { background: var(--coal); }
.media-offline-bg::after {
  content: attr(data-mo-text);
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px;
  color: var(--fog); background: rgba(10,10,11,.55);
  border: 1px solid var(--line); border-radius: 2px; padding: 3px 8px 2px;
}

/* live roster on claimed server pages (names from the server's own A2S reply) */
.roster { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.roster span {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--bone);
  background: var(--coal); border: 1px solid var(--line); border-radius: 2px;
  padding: 2px 8px; overflow-wrap: anywhere;
}

/* chart crosshair readout */
.pchart-tip {
  position: fixed; z-index: 60; display: none; pointer-events: none;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  color: var(--bone); background: var(--ink); border: 1px solid var(--line);
  border-radius: 2px; padding: 5px 9px; white-space: nowrap;
}
.pchart-tip b { color: var(--fog); font-weight: 400; font-size: 11px; }

/* server up/down votes: chevron+count chips in the dossier action row, sized to match
   the .btn row beside them, + net column on the servers list */
.votebar { display: flex; align-items: stretch; gap: 6px; }
/* the toolbar's generic form rule (flex:1, min-width 220px) must not inflate these */
.votebar form { display: flex; flex: 0 0 auto; min-width: 0; }
.vb {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 35px; padding: 0 11px;
  background: transparent; border: 1px solid var(--line); border-radius: 2px;
  color: var(--fog); cursor: pointer;
}
.vb span { font-family: var(--font-mono); font-size: 13px; color: var(--bone); line-height: 1; }
.vb svg { display: block; }
/* pin every control in the dossier action row to one exact height - the .btn box varies
   with context (anchor vs button, wrapped rows), which kept reintroducing misalignment */
.dsr-act .btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 35px; padding-top: 0; padding-bottom: 0;
}
.vb:hover { border-color: var(--ember); color: var(--ember); }
.vb.down:hover { border-color: var(--blood); color: var(--blood); }
.vb.on { border-color: var(--ember); color: var(--ember); }
.vb.on span { color: var(--ember); }
.vb.down.on { border-color: var(--blood); color: var(--blood); }
.vb.down.on span { color: var(--blood); }
.vb.static { cursor: default; }
.vb.static:hover { border-color: var(--line); color: var(--fog); }
.vnet { font-family: var(--font-mono); font-size: 13px; color: var(--fog); }
.vnet.pos { color: var(--bone); }
.vnet.neg { color: var(--blood); }

/* "Translated from Russian" line under member content the site translated */
.tr-note { margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; color: var(--fog); }

/* home: Workshop Crawler entry band - a separate DayZ Index tool on its own subdomain.
   Coal panel built like .card (16px padding, so its inner edge lines up with the cards
   above and the forum items below); copy left + one primary button right. It stacks
   under 900px with the button full width, so it never wraps to a half-width orphan. */
.tool-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 32px; background: var(--coal); border: 1px solid var(--line); border-radius: 3px;
  padding: 16px; transition: border-color .15s ease;
}
.tool-band:hover { border-color: var(--ember); }
.tool-band__copy { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.tool-band__lede { color: var(--bone); font-size: 15px; }
.tool-band__caps, .tool-band__note { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; color: var(--fog); font-size: 13px; }
.tool-band__label { margin-right: 2px; }
.tool-band__act { flex: 0 0 auto; }
@media (max-width: 900px) {
  .tool-band { flex-direction: column; align-items: stretch; }
  .tool-band__act .btn { display: block; width: 100%; text-align: center; }
}

/* home: Workshop Crawler numbers (inc/crawler-stats.php) - the stats the owner pinned
   public in the crawler (Settings > STATS ON THE SITE), in its order, under the band.
   Readout cells like .stats / .radar-hud: mono figure, small uppercase label. Each cell
   carries its own ember hairline on the left instead of grid dividers, so a wrapped
   last row never shows an empty divided slot; auto-fit stretches 3 to 6 cells across the
   row and the phone layout is a fixed two-up. */
.cw-glance {
  margin-top: 10px; padding: 14px 16px 16px;
  background: var(--coal); border: 1px solid var(--line); border-radius: 3px;
  transition: border-color .15s ease;
}
.cw-glance:hover { border-color: var(--ember); }
.cw-glance__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 14px; }
.cw-glance__head h3 {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 16px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--bone);
}
.cw-live { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); }
.cw-live::after {
  content: ""; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(255,107,53,.55); animation: dotpulse 2.2s ease-out infinite;
}
.cw-glance__when { font-family: var(--font-mono); font-size: 11px; letter-spacing: .5px; color: var(--fog); }
.cw-glance__more { margin-left: auto; font-size: 13px; }
.cw-glance__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px 18px; }
.cw-cell { min-width: 0; padding-left: 12px; border-left: 2px solid rgba(255,107,53,.4); }
.cw-cell .num {
  font-family: var(--font-mono); font-size: 21px; font-weight: 600; line-height: 1.25;
  color: var(--bone); font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.cw-cell .lbl {
  margin-top: 3px; color: var(--fog); font-size: 11px; line-height: 1.35;
  text-transform: uppercase; letter-spacing: 1px; overflow-wrap: break-word; hyphens: auto;
}
.cw-cell .sub { margin-top: 4px; color: var(--fog); font-size: 12px; line-height: 1.4; opacity: .85; overflow-wrap: break-word; }
@media (max-width: 520px) {
  .cw-glance__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
  .cw-cell { padding-left: 10px; }
  .cw-cell .num { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .cw-live::after { animation: none; display: none; }
}