/* Kanata forum — design system
   Night-sky palette lifted from the Kanata art: deep navy, moonlight blue, a little gold. */

:root {
  --bg-0: #040817;
  --bg-1: #070d26;
  --bg-2: #0b1435;
  --panel: rgba(13, 22, 62, 0.72);
  --panel-solid: #0d1740;
  --panel-2: rgba(20, 33, 88, 0.55);
  --line: rgba(146, 176, 255, 0.14);
  --line-strong: rgba(146, 176, 255, 0.30);
  --text: #e8eeff;
  --text-2: #b4c0ea;
  --muted: #7d8ab8;
  --accent: #7fa6ff;
  --accent-2: #b9cdff;
  --accent-deep: #3d6cff;
  --glow: rgba(127, 166, 255, 0.35);
  --gold: #e9c97c;
  --gold-2: #b9954c;
  --ok: #6fe3a5;
  --warn: #ffcf6b;
  --bad: #ff7b8a;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --font-ui: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Cinzel", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --nav-h: 64px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font: 15px/1.6 var(--font-ui);
  color: var(--text);
  background: var(--bg-0);
  overflow-x: hidden;
}
body::before {
  /* fixed night sky */
  content: "";
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(61, 108, 255, 0.28), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(30, 60, 160, 0.25), transparent 60%),
    linear-gradient(180deg, #060b22 0%, var(--bg-0) 60%, #03060f 100%);
}
body::after {
  /* stars */
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 28% 42%, #dfe8ff 60%, transparent 61%),
    radial-gradient(1px 1px at 41% 9%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 63% 27%, #cfe0ff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 77% 12%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 88% 38%, #dfe8ff 60%, transparent 61%),
    radial-gradient(1px 1px at 8% 66%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 52% 71%, #cfe0ff 60%, transparent 61%),
    radial-gradient(1.5px 1.5px at 93% 80%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 35% 88%, #dfe8ff 60%, transparent 61%),
    radial-gradient(1px 1px at 70% 55%, #fff 60%, transparent 61%),
    radial-gradient(1px 1px at 20% 95%, #fff 60%, transparent 61%);
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #fff; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.2; font-weight: 700; }
h1 { font-family: var(--font-display); font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem); letter-spacing: .02em; }
h2 { font-family: var(--font-display); font-size: clamp(1.15rem, 1rem + .8vw, 1.5rem); letter-spacing: .02em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
img { max-width: 100%; }
code, pre { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: .92em; }
pre { background: rgba(0, 0, 0, .35); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; overflow: auto; }
code { background: rgba(0, 0, 0, .3); padding: .1em .35em; border-radius: 5px; }
pre code { background: none; padding: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
::selection { background: rgba(127, 166, 255, .35); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

.container { width: min(1200px, calc(100% - 32px)); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: .86rem; }
.tiny { font-size: .78rem; }
.strong { font-weight: 700; }
.gold { color: var(--gold); }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.mt { margin-top: 20px; }
.mb { margin-bottom: 20px; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--nav-h);
  background: rgba(5, 9, 28, .78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}
.nav__inner { height: 100%; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; flex-shrink: 0; white-space: nowrap; align-items: center; gap: 10px; color: #fff; font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: .04em; }
.brand__logo { width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong), 0 0 18px var(--glow); }
.nav__links { display: flex; gap: 4px; margin-left: 8px; }
.nav__links a, .nav__links button {
  padding: 8px 12px; border-radius: 9px; color: var(--text-2); font-weight: 600; font-size: .93rem;
  background: none; border: 0; cursor: pointer; font-family: inherit;
}
.nav__links a:hover, .nav__links a.active { color: #fff; background: rgba(127, 166, 255, .12); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.nav .nav__toggle { display: none; }
.icon-btn {
  position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px;
  color: var(--text-2); background: rgba(127, 166, 255, .08); border: 1px solid var(--line); cursor: pointer;
}
.icon-btn:hover { color: #fff; background: rgba(127, 166, 255, .16); }
.icon-btn svg { width: 18px; height: 18px; }
.pill {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center;
}
.online-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.online-dot.off { background: var(--muted); box-shadow: none; }

/* dropdown */
.menu { position: relative; }
.menu__panel {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; padding: 6px;
  background: #0b1236; border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow);
  display: none; z-index: 60;
}
.menu.open .menu__panel { display: block; }
.menu__panel a, .menu__panel button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: 8px; color: var(--text-2);
  background: none; border: 0; cursor: pointer; font: inherit; text-align: left;
}
.menu__panel a:hover, .menu__panel button:hover { background: rgba(127, 166, 255, .12); color: #fff; }
.menu__sep { height: 1px; background: var(--line); margin: 6px 4px; }
.menu__head { padding: 8px 10px 4px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: rgba(127, 166, 255, .10); color: #fff; font: 600 .93rem var(--font-ui); cursor: pointer;
  transition: transform .12s ease, background .12s ease, box-shadow .12s ease;
  white-space: nowrap;
}
.btn:hover { background: rgba(127, 166, 255, .18); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.primary { background: linear-gradient(180deg, #5f8dff, #3a63e6); border-color: #6f97ff; box-shadow: 0 6px 18px rgba(61, 108, 255, .35); }
.btn.primary:hover { background: linear-gradient(180deg, #6f9aff, #4670f0); }
.btn.gold { background: linear-gradient(180deg, #f0d48a, #c9a256); border-color: #f4dc9a; color: #2a1d05; box-shadow: 0 6px 18px rgba(233, 201, 124, .25); }
.btn.gold:hover { background: linear-gradient(180deg, #f6dd9c, #d3ad64); }
.btn.danger { background: rgba(255, 123, 138, .12); border-color: rgba(255, 123, 138, .4); color: #ffb3bb; }
.btn.danger:hover { background: rgba(255, 123, 138, .22); }
.btn.ghost { background: transparent; }
.btn.sm { padding: 6px 11px; font-size: .84rem; border-radius: 8px; }
.btn.xs { padding: 3px 8px; font-size: .78rem; border-radius: 7px; }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }
.btn svg { width: 16px; height: 16px; }
.discord { background: #5865f2; border-color: #7581ff; }
.discord:hover { background: #6773ff; }

/* ---------- surfaces ---------- */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.panel__head {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(127, 166, 255, .08), transparent);
  border-radius: var(--radius) var(--radius) 0 0;
}
.panel__head h2, .panel__head h3 { margin: 0; }
.panel__body { padding: 16px; }
.panel__foot { padding: 12px 16px; border-top: 1px solid var(--line); }
.card { padding: 16px; }
.section-title {
  display: flex; align-items: center; gap: 12px; margin: 26px 0 12px;
  font-family: var(--font-display); font-size: 1.1rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2);
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }
.section-title .star { color: var(--gold); }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.layout.wide { grid-template-columns: minmax(0, 1fr) 360px; }
.sidebar { position: sticky; top: calc(var(--nav-h) + 16px); display: flex; flex-direction: column; gap: 16px; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; border-radius: 22px; border: 1px solid var(--line-strong);
  min-height: 300px; display: grid; align-items: end; margin-top: 20px;
  box-shadow: var(--shadow), 0 0 80px rgba(61, 108, 255, .18);
}
.hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center 30%; animation: drift 40s ease-in-out infinite alternate; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4, 8, 23, .15) 0%, rgba(4, 8, 23, .6) 55%, rgba(4, 8, 23, .94) 100%); }
.hero__emblem { position: relative; display: grid; place-items: center; }
.hero__emblem::before { content: ""; position: absolute; left: 50%; top: 50%; width: 420px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(127, 166, 255, .32), rgba(127, 166, 255, 0) 65%); transform: translate(-50%, -50%); animation: pulse 6s ease-in-out infinite; }
.hero__content { position: relative; padding: 36px 32px 28px; display: grid; gap: 14px; max-width: 720px; }
.hero--center { align-items: center; min-height: 460px; }
.hero--center .hero__content { justify-items: center; text-align: center; max-width: none; padding: 44px 24px 36px; gap: 12px; margin-inline: auto; }
.hero__logo { position: relative; width: 160px; height: 160px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(233, 201, 124, .35), 0 0 48px rgba(127, 166, 255, .55); animation: float 6s ease-in-out infinite; }
.hero__kicker { color: var(--gold); font-size: .8rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 800; }
.hero h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); margin: 0; text-shadow: 0 2px 24px rgba(127, 166, 255, .45); }
.hero p, .hero__tagline { color: var(--text-2); font-size: 1.1rem; margin: 0; max-width: 60ch; }
.hero__tagline { font-family: var(--font-display); letter-spacing: .06em; color: var(--accent-2); }
.hero__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; justify-content: center; }
.hero__meta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; color: var(--muted); font-size: .86rem; margin-top: 6px; }
.hero__meta b { color: var(--text); }

@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes pulse { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } }
@keyframes drift { from { transform: scale(1.02) translateY(0); } to { transform: scale(1.08) translateY(-10px); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes twinkle { 0%, 100% { opacity: .55; } 50% { opacity: .9; } }
body::after { animation: twinkle 7s ease-in-out infinite; }
main.container { animation: fadeUp .35s ease-out; }
.reveal { animation: fadeUp .5s ease-out both; }
.reveal:nth-of-type(2) { animation-delay: .06s; }
.reveal:nth-of-type(3) { animation-delay: .12s; }
.stat { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.stat:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 10px 24px rgba(0, 0, 0, .3); }
.nav__links a { position: relative; }
.nav__links a.active::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--accent-deep), var(--accent-2)); box-shadow: 0 0 10px var(--glow); }
.to-top { position: fixed; right: 18px; bottom: 84px; z-index: 70; opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }

/* online now */
.online-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 14px 16px; }
.online-card { display: grid; justify-items: center; align-content: start; align-items: start; gap: 4px; color: var(--text-2); text-align: center; transition: transform .15s ease; }
.online-card:hover { transform: translateY(-3px); color: #fff; }
.online-card__name { font-weight: 800; color: #fff; font-size: .9rem; }

/* character page */
.char-hero { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: 24px; align-items: center; padding: 22px; }
.equip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.equip { display: flex; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(4, 8, 23, .45); border: 1px solid var(--line); }
.equip__icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: rgba(127, 166, 255, .08); flex: none; }
.equip__icon img { image-rendering: pixelated; max-width: 32px; max-height: 32px; }
.equip__slot { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.equip__name { font-weight: 700; font-size: .9rem; color: var(--text); }
.guild-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 120px 120px; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.guild-row:first-child { border-top: 0; }
.guild-row:hover { background: rgba(127, 166, 255, .05); }

/* stats */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.stat { padding: 14px 16px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--line); }
.stat__label { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }
.stat__value { font-family: var(--font-display); font-size: 1.6rem; color: #fff; margin-top: 2px; }
.stat__value.ok { color: var(--ok); }

/* ---------- forum lists ---------- */
.board-cat { margin-top: 18px; }
.board-row {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) 120px 260px; gap: 14px; align-items: center;
  padding: 14px 16px; border-top: 1px solid var(--line);
}
.board-row:first-child { border-top: 0; }
.board-row:hover { background: rgba(127, 166, 255, .05); }
.board-row__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem;
  background: linear-gradient(180deg, rgba(127, 166, 255, .22), rgba(61, 108, 255, .12)); border: 1px solid var(--line-strong);
}
.board-row__title { font-weight: 800; font-size: 1.02rem; color: #fff; }
.board-row__desc { color: var(--text-2); font-size: .9rem; }
.board-row__subs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.board-row__subs a { font-size: .8rem; padding: 2px 8px; border-radius: 999px; background: rgba(127, 166, 255, .1); border: 1px solid var(--line); color: var(--text-2); }
.board-row__counts { display: grid; gap: 2px; font-size: .86rem; color: var(--muted); text-align: right; }
.board-row__counts b { color: var(--text); }
.board-row__last { display: flex; gap: 10px; align-items: center; min-width: 0; font-size: .88rem; }
.board-row__last .truncate { display: block; }

.thread-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) 110px 200px; gap: 12px; align-items: center;
  padding: 12px 16px; border-top: 1px solid var(--line);
}
.thread-row:first-child { border-top: 0; }
.thread-row:hover { background: rgba(127, 166, 255, .05); }
.thread-row.unread .thread-row__title { color: #fff; }
.thread-row.unread .thread-row__title::before { content: "●"; color: var(--accent); font-size: .6rem; margin-right: 6px; vertical-align: middle; }
.thread-row__title { font-weight: 700; color: var(--text-2); }
.thread-row__meta { font-size: .84rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
/* The dot belongs to the item after it, so a wrapped line never ends on a stray separator. */
.thread-row__meta > * + *::before { content: "·"; margin-right: 8px; opacity: .55; }
.thread-row__counts { display: grid; gap: 2px; font-size: .84rem; color: var(--muted); text-align: right; }
.thread-row__counts b { color: var(--text); font-weight: 700; }
.thread-row__last { font-size: .84rem; min-width: 0; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; border: 1px solid; }
.tag.pin { color: var(--gold); border-color: rgba(233, 201, 124, .5); background: rgba(233, 201, 124, .1); }
.tag.lock { color: var(--muted); border-color: var(--line-strong); }
.tag.new { color: var(--ok); border-color: rgba(111, 227, 165, .5); background: rgba(111, 227, 165, .08); }

/* ---------- posts ---------- */
.post { display: grid; grid-template-columns: 216px minmax(0, 1fr); border-top: 1px solid var(--line); }
.post:first-child { border-top: 0; }
.post.op { background: rgba(127, 166, 255, .04); }
/* align-content/align-items are not decoration here. A grid item stretches to its row, and this
   grid is itself stretched to the height of the post beside it, so on a long post the free space
   was shared out across the five rows: the role badge grew from 22px to 55px and the whole column
   "stretched to the end of the post". Below 760px the same stretch made the badge 73x85 with a
   999px radius - the circle reported on phones. Both are this one rule. */
.post__author { padding: 18px 12px; border-right: 1px solid var(--line); display: grid; gap: 8px; justify-items: center; align-content: start; align-items: start; text-align: center; }
.post__body { padding: 16px 20px; min-width: 0; }
.post__head { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: .84rem; margin-bottom: 10px; }
.post__head a { color: var(--muted); }
.post__content { font-size: .98rem; word-wrap: break-word; overflow-wrap: anywhere; }
.post__content img { max-width: 100%; border-radius: 8px; }
.post__content blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: rgba(127, 166, 255, .07); border-radius: 0 8px 8px 0; color: var(--text-2); }
.post__content table { border-collapse: collapse; margin: 10px 0; }
.post__content td, .post__content th { border: 1px solid var(--line-strong); padding: 6px 10px; }
.post__content a[href^="/u/"] { color: var(--gold); font-weight: 700; }
.post__content .spoiler { border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; margin: 8px 0; background: rgba(0, 0, 0, .25); }
.post__content .spoiler.hidden-content > :not(.spoiler__toggle) { display: none; }
.post__content .spoiler > .spoiler__toggle { display: inline-block; margin-bottom: 4px; padding: 2px 10px; border-radius: 6px; border: 1px solid var(--line-strong); background: rgba(127, 166, 255, .12); color: var(--accent-2); font: 700 .8rem var(--font-ui); cursor: pointer; }
.post__content details { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.post__content summary { cursor: pointer; color: var(--accent-2); font-weight: 700; }
.post__foot { display: flex; gap: 8px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.post__foot .spacer { flex: 1; }
.post__sig { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--line); color: var(--muted); font-size: .86rem; }
.post__edited { color: var(--muted); font-size: .8rem; font-style: italic; }

/* author card / character card */
.author-name { font-weight: 800; color: #fff; font-size: 1rem; }
.author-name a { color: #fff; }
.role-badge { display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor; }
.author-stats { font-size: .8rem; color: var(--muted); display: grid; gap: 1px; }
.author-stats b { color: var(--text-2); font-weight: 600; }

.sprite-box {
  position: relative; display: grid; place-items: end center; width: 128px; height: 144px; margin-inline: auto;
  border-radius: 14px; overflow: hidden;
  background:
    radial-gradient(60px 18px at 50% 94%, rgba(127, 166, 255, .35), transparent 70%),
    linear-gradient(180deg, rgba(20, 33, 88, .3), rgba(6, 12, 40, .8));
  border: 1px solid var(--line);
}
.sprite-box img.sprite { display: block; width: 128px; height: 144px; image-rendering: pixelated; image-rendering: crisp-edges; transition: transform .25s ease; }
.sprite-box.lg { width: 256px; height: 288px; border-radius: 18px; }
.sprite-box.lg img.sprite { width: 256px; height: 288px; }
.sprite-box::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 14px; height: 7px; border-radius: 50%; background: rgba(0, 0, 0, .5); filter: blur(3px); pointer-events: none; }
.sprite-box.lg::after { bottom: 28px; height: 12px; }
.sprite-box:hover img.sprite { transform: translateY(-3px); }
/* 42 = the 40px sprite + 1px of border each side. At 40px the border-box left a 38px content box,
   img{max-width:100%} capped the width at 38 while the height stayed 40, and every head crop was
   quietly squashed to 0.95x. Keep these in step with SpriteMath.HeadFrame. */
.sprite-mini { width: 42px; height: 42px; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: rgba(6, 12, 40, .8); border: 1px solid var(--line); flex: none; }
.sprite-mini img { display: block; width: 40px; height: 40px; image-rendering: pixelated; }

.char-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; transition: transform .15s ease, box-shadow .15s ease; }
.char-card:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0, 0, 0, .4), 0 0 0 1px var(--line-strong); }
.char-card__name { font-weight: 800; color: #fff; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.char-card__meta { display: grid; grid-template-columns: auto auto; gap: 2px 14px; font-size: .86rem; color: var(--muted); }
.char-card__meta b { color: var(--text-2); font-weight: 600; }
.job-chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: rgba(127, 166, 255, .12); border: 1px solid var(--line-strong); color: var(--accent-2); font-size: .76rem; font-weight: 700; }

/* ---------- forms ---------- */
.form { display: grid; gap: 14px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .84rem; font-weight: 700; color: var(--text-2); }
.field .hint { font-size: .8rem; color: var(--muted); }
.input, textarea.input, select.input {
  width: 100%; padding: 10px 12px; border-radius: 10px; color: #fff; font: inherit;
  background: rgba(4, 8, 23, .6); border: 1px solid var(--line-strong);
  transition: border-color .12s, box-shadow .12s;
}
.input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(127, 166, 255, .2); }
textarea.input { min-height: 160px; resize: vertical; line-height: 1.5; }
.input.mono { font-family: ui-monospace, Consolas, monospace; }
.check { display: flex; align-items: center; gap: 8px; font-size: .9rem; }
.check input { width: 16px; height: 16px; accent-color: var(--accent-deep); }
.alert { padding: 10px 14px; border-radius: 10px; border: 1px solid; font-size: .92rem; }
.alert.bad { color: #ffc4cb; border-color: rgba(255, 123, 138, .45); background: rgba(255, 123, 138, .1); }
.alert.ok { color: #c9ffe3; border-color: rgba(111, 227, 165, .45); background: rgba(111, 227, 165, .1); }
.alert.info { color: var(--accent-2); border-color: var(--line-strong); background: rgba(127, 166, 255, .08); }
.field-error { color: #ffb3bb; font-size: .82rem; }
.auth-box { max-width: 440px; margin: 40px auto; }
.auth-box .panel__body { padding: 24px; }
.auth-box .brand { justify-content: center; margin-bottom: 8px; font-size: 1.6rem; }

/* editor */
.editor__bar { display: flex; gap: 4px; flex-wrap: wrap; padding: 6px; border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 10px 10px 0 0; background: rgba(4, 8, 23, .5); }
.editor__bar button { padding: 4px 9px; border-radius: 6px; border: 1px solid transparent; background: none; color: var(--text-2); cursor: pointer; font: 700 .8rem var(--font-ui); }
.editor__bar button:hover { background: rgba(127, 166, 255, .14); color: #fff; }
.editor textarea.input { border-radius: 0 0 10px 10px; }
.editor__preview { margin-top: 8px; padding: 12px 14px; border: 1px dashed var(--line-strong); border-radius: 10px; min-height: 60px; }
.editor__preview:empty { display: none; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line-strong); }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: rgba(127, 166, 255, .04); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.rank { font-family: var(--font-display); font-weight: 700; color: var(--muted); }
.rank.r1 { color: var(--gold); }
.rank.r2 { color: #d9dfff; }
.rank.r3 { color: #d29a6c; }

/* ---------- pagination / tabs / breadcrumbs ---------- */
.pagination { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pagination a, .pagination span { padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); font-size: .86rem; color: var(--text-2); }
.pagination a:hover { background: rgba(127, 166, 255, .12); color: #fff; }
.pagination .current { background: var(--accent-deep); border-color: var(--accent); color: #fff; font-weight: 800; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; flex-wrap: wrap; }
.tabs a { padding: 8px 14px; border-radius: 9px 9px 0 0; color: var(--muted); font-weight: 700; font-size: .9rem; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a.active, .tabs a:hover { color: #fff; border-bottom-color: var(--accent); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .86rem; color: var(--muted); margin: 18px 0 12px; }
.crumbs a { color: var(--text-2); }
.crumbs span.sep { opacity: .5; }

/* ---------- chat ---------- */
.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 460px; }
.chat.tall { height: calc(100vh - var(--nav-h) - 80px); min-height: 480px; }
.chat__log { overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; scrollbar-width: thin; }
.chat__msg { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 6px; border-radius: 8px; font-size: .9rem; animation: rise .18s ease-out; }
.chat__msg:hover { background: rgba(127, 166, 255, .05); }
.chat__msg .who { font-weight: 800; color: #fff; }
.chat__msg .who.game { color: var(--gold); }
.chat__msg .src { font-size: .68rem; padding: 0 5px; border-radius: 4px; border: 1px solid var(--line-strong); color: var(--muted); margin-left: 4px; vertical-align: middle; text-transform: uppercase; letter-spacing: .05em; }
.chat__msg .src.game { color: var(--gold); border-color: rgba(233, 201, 124, .45); }
.chat__msg .when { color: var(--muted); font-size: .74rem; margin-left: 6px; }
.chat__msg .text { color: var(--text-2); word-break: break-word; }
.chat__msg .text.sys { color: var(--muted); font-style: italic; }
.chat__msg .del { margin-left: 6px; font-size: .74rem; color: var(--bad); cursor: pointer; background: none; border: 0; opacity: 0; }
.chat__msg:hover .del { opacity: 1; }
.chat__avatar { width: 32px; height: 32px; border-radius: 8px; background: rgba(6, 12, 40, .8); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.chat__avatar img { display: block; width: 30px; height: 30px; image-rendering: pixelated; }

/* Writer-chosen text size and face. These are the whole vocabulary: [size=] and [font=] resolve
   to one of these class names or render as literal text, so a post can never carry arbitrary CSS
   and no thread can be blown apart by a font-size nobody bounded. */
.fs-tiny { font-size: .78rem; }
.fs-small { font-size: .9rem; }
.fs-big { font-size: 1.25rem; }
.fs-huge { font-size: 1.6rem; line-height: 1.25; }
.ff-sans { font-family: Inter, "Segoe UI", system-ui, sans-serif; }
.ff-serif { font-family: Georgia, "Times New Roman", serif; }
.ff-mono { font-family: "JetBrains Mono", Consolas, monospace; }
.ff-round { font-family: "Comic Sans MS", "Segoe UI", sans-serif; }
.ff-pixel { font-family: "Courier New", monospace; letter-spacing: .02em; }

/* Raw mode hides the buttons and the preview; the textarea and its value are untouched, which is
   what stops a mode switch from ever rewriting what someone wrote. */
.editor--raw .editor__bar > :not([data-editor-mode]):not(.grow):not(.editor__hint) { display: none; }
.editor--raw .editor__preview { display: none; }
.chat__input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat__input .input { flex: 1; }
.chat__status { font-size: .76rem; color: var(--muted); display: flex; gap: 10px; align-items: center; }

/* ---------- notifications / misc ---------- */
.notif { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); }
.notif:first-child { border-top: 0; }
.notif.unread { background: rgba(127, 166, 255, .06); }
.empty { padding: 36px 16px; text-align: center; color: var(--muted); }
.empty .big { font-size: 2rem; margin-bottom: 8px; }
.toast-host { position: fixed; right: 16px; bottom: 16px; display: grid; gap: 8px; z-index: 80; }
.toast { padding: 10px 14px; border-radius: 10px; background: #0b1236; border: 1px solid var(--line-strong); box-shadow: var(--shadow); font-size: .9rem; animation: rise .2s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.kbd { font: .78rem ui-monospace, monospace; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line-strong); background: rgba(0, 0, 0, .3); }
.divider-star { text-align: center; color: var(--gold); letter-spacing: .6em; margin: 22px 0; opacity: .8; }

/* admin */
.admin-nav { display: grid; gap: 4px; }
.admin-nav a { padding: 9px 12px; border-radius: 9px; color: var(--text-2); font-weight: 600; }
.admin-nav a.active, .admin-nav a:hover { background: rgba(127, 166, 255, .12); color: #fff; }
.inline-form { display: inline; }
.sortable-handle { cursor: grab; color: var(--muted); }

.footer { margin: 60px 0 30px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .84rem; }
.footer__inner { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.footer a { color: var(--text-2); }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .layout, .layout.wide { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .nav__links, .nav__right .hide-sm { display: none; }
  .hero--center { min-height: 380px; }
  .char-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .guild-row { grid-template-columns: 44px minmax(0, 1fr); }
  .guild-row > :nth-child(n+3) { display: none; }
  .nav .nav__toggle { display: inline-grid; }
  .brand { font-size: 1.15rem; }
  .nav__right { gap: 6px; }
  .nav.open .nav__links { display: flex; position: absolute; left: 0; right: 0; top: var(--nav-h); flex-direction: column; padding: 10px 16px; background: #070d26; border-bottom: 1px solid var(--line-strong); }
  .board-row { grid-template-columns: 44px minmax(0, 1fr); }
  .board-row__counts, .board-row__last { display: none; }
  .thread-row { grid-template-columns: 36px minmax(0, 1fr); }
  .thread-row__counts, .thread-row__last { display: none; }
  .post { grid-template-columns: 1fr; }
  .post__author { grid-template-columns: 128px minmax(0, 1fr); justify-items: start; text-align: left; border-right: 0; border-bottom: 1px solid var(--line); padding: 12px 16px; }
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .hero__content { padding: 24px 18px 20px; }
  .char-card { grid-template-columns: 128px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- prefixes, polls, messages, badges, staff, channels ---------- */
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: var(--accent-deep); color: #fff; border-radius: 8px; font-weight: 700; }
.skip:focus { left: 8px; }
.alert.warn { color: #ffe3a6; border-color: rgba(255, 207, 107, .45); background: rgba(255, 207, 107, .1); }
.linkish { background: none; border: 0; padding: 0; color: var(--muted); cursor: pointer; font: inherit; font-size: .84rem; }
.linkish:hover { color: #fff; }
.post__head .linkish { margin-left: auto; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.chip { --chip: var(--accent); display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-strong); font-size: .8rem; font-weight: 700; color: var(--text-2); background: rgba(127, 166, 255, .06); transition: border-color .12s, color .12s, background .12s; }
.chip:hover { color: #fff; border-color: var(--chip); }
.chip.active { color: #fff; background: color-mix(in srgb, var(--chip) 28%, transparent); border-color: var(--chip); }
.tag.prefix { --chip: var(--accent); color: var(--chip); border-color: color-mix(in srgb, var(--chip) 60%, transparent); background: color-mix(in srgb, var(--chip) 14%, transparent); }
.poll .panel__head h3 { font-family: var(--font-ui); }
.poll__row { margin: 10px 0; }
.poll__label { display: flex; gap: 10px; align-items: baseline; font-size: .92rem; }
.poll__label span:first-child { flex: 1; color: var(--text); }
.poll__label b { color: #fff; min-width: 3.5ch; text-align: right; font-variant-numeric: tabular-nums; }
.poll__bar { height: 10px; border-radius: 999px; background: rgba(4, 8, 23, .6); border: 1px solid var(--line); overflow: hidden; margin-top: 4px; }
.poll__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-deep), var(--accent)); box-shadow: 0 0 12px var(--glow); transform-origin: left; animation: grow .8s ease-out; }
.poll__row.mine .poll__bar span { background: linear-gradient(90deg, #c9a256, var(--gold)); }
.poll__row.mine .poll__label span:first-child { color: var(--gold); font-weight: 700; }
.poll__form { display: grid; gap: 8px; }
.poll__option { padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; transition: background .12s, border-color .12s; }
.poll__option:hover { background: rgba(127, 166, 255, .08); border-color: var(--line-strong); }
.poll-maker { border: 1px dashed var(--line-strong); border-radius: 10px; padding: 10px 14px; }
.poll-maker summary { cursor: pointer; font-weight: 700; color: var(--accent-2); }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.convo__subject { font-weight: 700; color: var(--text-2); display: block; }
.notif.unread .convo__subject { color: #fff; }
.notif.unread .convo__subject::before { content: "●"; color: var(--accent); font-size: .6rem; margin-right: 6px; vertical-align: middle; }
.msgs { padding: 14px; display: grid; gap: 14px; }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: start; }
.msg.mine { grid-template-columns: minmax(0, 1fr) 36px; }
.msg.mine .sprite-mini { order: 2; }
.msg__bubble { padding: 10px 14px; border-radius: 14px; background: rgba(127, 166, 255, .08); border: 1px solid var(--line); max-width: min(80%, 720px); animation: rise .18s ease-out; }
.msg.mine .msg__bubble { background: rgba(61, 108, 255, .18); border-color: rgba(127, 166, 255, .3); justify-self: end; }
.msg__head { display: flex; gap: 10px; align-items: baseline; font-size: .8rem; color: var(--muted); margin-bottom: 4px; }
.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(233, 201, 124, .08); font-size: .8rem; font-weight: 700; color: var(--text-2); cursor: help; transition: border-color .12s, color .12s; }
.badge:hover { border-color: var(--gold); color: #fff; }
.staff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
/* Same stretch as .post__author: cards in a row equalise height, so a short blurb let its
   neighbour inflate this card and turn its role badge into an oval. */
.staff-card { padding: 16px; display: grid; justify-items: center; align-content: start; align-items: start; text-align: center; gap: 6px; }
.channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.channel { padding: 10px 12px; }
.channel__bar { height: 6px; border-radius: 999px; background: rgba(4, 8, 23, .6); overflow: hidden; margin-top: 6px; }
.channel__bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--accent)); border-radius: 999px; transform-origin: left; animation: grow .8s ease-out; }
.play .post__content ol { padding-left: 22px; }
.play .post__content li { margin: 6px 0; }
@media (max-width: 760px) {
  .msg__bubble { max-width: 100%; }
  .post__head .linkish { display: none; }
}

/* ---------- vote and downloads ---------- */
.vote__link { display: flex; gap: 8px; align-items: center; }
.vote__link input { font-size: .86rem; }
.vote__steps { margin: 0; padding-left: 22px; color: var(--text-2); }
.vote__steps li { margin: 6px 0; }
.downloads { display: grid; gap: 12px; }
.download { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 16px; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.download:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: 0 14px 34px rgba(0, 0, 0, .4); }
.download__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 1.3rem; background: linear-gradient(180deg, rgba(127, 166, 255, .22), rgba(61, 108, 255, .12)); border: 1px solid var(--line-strong); }
.download__name { font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.download.gold-edge .download__icon { background: linear-gradient(180deg, rgba(233, 201, 124, .28), rgba(185, 149, 76, .14)); border-color: rgba(233, 201, 124, .5); }

/* ---------- rich text: pickers, colours, boxes ---------- */
.editor__sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--line); }
.editor__bar .grow { flex: 1; }
.pop { position: relative; display: inline-flex; }
.pop__panel {
  position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; width: 288px; max-height: 320px; overflow-y: auto;
  padding: 8px; border-radius: 12px; background: #0b1236; border: 1px solid var(--line-strong); box-shadow: var(--shadow);
}
.pop__panel--up { top: auto; bottom: calc(100% + 6px); }
.pop__head { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 6px 4px 4px; }
.pop__item { display: block; width: 100%; text-align: left; padding: 7px 10px; border: 0; border-radius: 8px; background: none; color: var(--text-2); font: 600 .88rem var(--font-ui); cursor: pointer; }
.pop__item:hover { background: rgba(127, 166, 255, .14); color: #fff; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; }
.emoji { border: 0; background: none; cursor: pointer; font-size: 1.15rem; line-height: 1; padding: 5px; border-radius: 8px; }
.emoji:hover { background: rgba(127, 166, 255, .18); transform: scale(1.15); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.swatch { height: 30px; border-radius: 8px; border: 1px solid var(--line-strong); cursor: pointer; }
.swatch:hover { transform: scale(1.06); box-shadow: 0 0 0 2px var(--line-strong); }

.post__content .center { text-align: center; }
.post__content .note, .post__content .warn, .post__content .ok, .post__content .quote {
  border: 1px solid var(--line-strong); border-left-width: 3px; border-radius: 10px; padding: 10px 14px; margin: 10px 0;
}
.post__content .note { border-left-color: var(--accent); background: rgba(127, 166, 255, .08); }
.post__content .warn { border-left-color: var(--warn); background: rgba(255, 207, 107, .08); }
.post__content .ok { border-left-color: var(--ok); background: rgba(111, 227, 165, .08); }
.post__content .quote { border-left-color: var(--gold); background: rgba(233, 201, 124, .07); font-style: italic; }
.post__content .note > :last-child, .post__content .warn > :last-child, .post__content .ok > :last-child, .post__content .quote > :last-child { margin-bottom: 0; }
.post__content img { max-height: 420px; width: auto; }
.post__content hr { margin: 16px 0; }

.chat__img { max-width: 100%; max-height: 130px; width: auto; border-radius: 8px; margin-top: 4px; display: block; border: 1px solid var(--line); }
.chat__msg .text.big { font-size: 1.7rem; line-height: 1.25; }
.chat__input .pop__panel { width: 264px; }
@media (max-width: 760px) {
  /* A popover hangs off the button that opens it, and on a phone that button can be anywhere along a
     toolbar that has wrapped onto six rows - so a fixed-width panel anchored to it walks straight off
     the screen. Measured at 375px before this rule: size +4px, font +37px, box +68px past the right
     edge, and it got worse every time the toolbar gained a button. Anchor the panel to the bar rather
     than to the button and let it span the bar, so it cannot leave the screen wherever the trigger
     happened to wrap to. body has overflow-x: hidden, so an escape here is not a scrollbar - the
     panel is simply cut off, which is why it was reported as "can't see them fully when opened". */
  .editor__bar, .chat__input { position: relative; }
  .editor__bar .pop, .chat__input .pop { position: static; }
  .editor__bar .pop__panel, .chat__input .pop__panel {
    left: 6px; right: 6px; width: auto; max-width: none;
    max-height: min(320px, 50vh); overflow-y: auto;
  }
  /* Backstop for any popover added later that is not in one of those two bars. */
  .pop__panel { max-width: calc(100vw - 16px); }
  .emoji-grid { grid-template-columns: repeat(7, 1fr); }
}

/* ---------- top bar: search and Discord as icons ---------- */
.nav__search {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  padding: 8px; border-radius: 12px; background: #0b1236;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow);
}
.nav__search .input { width: clamp(180px, 60vw, 280px); padding: 8px 12px; }
@media (max-width: 760px) {
  /* The field is anchored right:0 to a 36px icon button that sits mid-bar, so it grew leftwards and
     hung 74px off the left edge of a 375px screen - the "search bar" in the report. Pin it across the
     viewport under the sticky bar instead of hanging it off the icon. */
  .nav__search { position: fixed; top: calc(var(--nav-h) + 8px); left: 8px; right: 8px; width: auto; }
  .nav__search .input { width: 100%; }
}
.discord-btn svg { width: 20px; height: 20px; }
.discord-btn:hover { color: #fff; background: rgba(88, 101, 242, .28); border-color: #5865f2; }

/* On a phone the icons and the menu button need the room the wordmark takes. */
@media (max-width: 560px) {
  .brand span { display: none; }
  .brand__logo { width: 34px; height: 34px; }
  .nav__right { gap: 4px; }
  .nav__inner { gap: 10px; }
  .icon-btn { width: 34px; height: 34px; }
  .icon-btn svg { width: 17px; height: 17px; }
}

/* Both columns of a two-column page start on the same line. */
.layout > div > .section-title:first-child,
.layout > aside > .section-title:first-child { margin-top: 0; }
.hero--center { min-height: 420px; }

/* On a phone the board name takes its own line, without a separator leading it. */
@media (max-width: 560px) {
  .thread-row__meta > a { flex-basis: 100%; }
  .thread-row__meta > a::before { content: none; }
}

/* ---------- floating chat dock ---------- */
.chat-dock {
  position: fixed; right: 18px; bottom: 18px; z-index: 74;
  --dock-w: 360px; --dock-h: 460px;
  display: flex; flex-direction: column; align-items: flex-end;
}
.chat-dock.dragging { user-select: none; }
.chat-dock__btn {
  position: relative; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line-strong); color: var(--text-2);
  background: linear-gradient(180deg, #17225f, #0b1336);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5); cursor: grab;
  touch-action: none; transition: color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.chat-dock__btn:hover { color: #fff; border-color: var(--accent); transform: translateY(-1px); }
.chat-dock__btn:active { cursor: grabbing; }
.chat-dock.dragging .chat-dock__btn { cursor: grabbing; transform: none; }
.chat-dock__btn svg { width: 23px; height: 23px; }
.chat-dock.open .chat-dock__btn {
  color: #fff; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(127, 166, 255, .16), 0 10px 26px rgba(0, 0, 0, .5);
}
.chat-dock__panel {
  position: absolute; right: 0; bottom: 62px;
  width: min(var(--dock-w), calc(100vw - 28px));
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .55));
  animation: rise .16s ease-out;
}
.chat-dock__panel .chat {
  height: min(var(--dock-h), calc(100vh - var(--nav-h) - 120px));
  background: #0b1338;
}
.chat-dock__panel .panel__head { padding: 10px 12px; }
.chat-dock__panel .panel__head h3 { font-size: 1rem; }
.chat-dock__close { width: 28px; height: 28px; margin-left: auto; }
.chat-dock__close svg { width: 15px; height: 15px; }
.chat-dock__grip {
  position: absolute; left: -6px; top: -6px; width: 20px; height: 20px; padding: 0;
  border-radius: 7px; cursor: nwse-resize; touch-action: none;
  border: 1px solid var(--line-strong); background: #101a49;
  background-image: linear-gradient(135deg, transparent 38%, var(--line-strong) 38%, var(--line-strong) 46%, transparent 46%,
                                             transparent 58%, var(--line-strong) 58%, var(--line-strong) 66%, transparent 66%);
  opacity: 0; transition: opacity .15s;
}
.chat-dock__panel:hover .chat-dock__grip, .chat-dock__grip:focus-visible { opacity: 1; }

/* on a phone the panel takes the width it needs and the grip goes away */
@media (max-width: 620px) {
  .chat-dock__panel { position: fixed; left: 10px; right: 10px; bottom: 82px; width: auto; }
  .chat-dock__panel .chat { height: min(var(--dock-h), calc(100vh - var(--nav-h) - 130px)); }
  .chat-dock__grip { display: none; }
}

/* Home page: the hero is the whole page, filling the space between the top bar and the footer. */
body.home { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; }
body.home > main { flex: 1 0 auto; display: flex; flex-direction: column; }
body.home .hero { flex: 1 0 auto; }
body.home .footer { margin-top: 20px; }

/* The chat bubble lives in the bottom-right corner: keep the footer links out from under it.
   The padding only kicks in when the page is too narrow for the bubble to fit beside the content. */
.footer__inner { padding-right: max(0px, calc(90px - (100vw - min(1200px, 100vw - 32px)) / 2)); }

/* The bubble is a link underneath: a press-and-move must not become a link drag or a text selection. */
.chat-dock__btn { -webkit-user-select: none; user-select: none; -webkit-user-drag: none; }
.chat-dock__btn svg { pointer-events: none; }

/* ---------- pages with a side menu (settings, admin) ---------- */
/* The menu sits beside the content on wide screens and becomes a wrapping row of tabs above it on narrow ones.
   The columns live here rather than in inline styles: an inline style beats the phone rule, which is how a
   240px menu column once pushed the settings form off a 375px screen. */
.layout.side-menu { grid-template-columns: 240px minmax(0, 1fr); }
.layout.side-menu.slim { grid-template-columns: 220px minmax(0, 1fr); }
@media (max-width: 1000px) {
  .layout.side-menu, .layout.side-menu.slim { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .side-menu .admin-nav { display: flex; flex-wrap: wrap; gap: 6px; }
  .side-menu .admin-nav a { padding: 7px 12px; font-size: .9rem; }
}

/* ---------- stat boxes and character cards keep everything inside the card on small screens ---------- */
.stats.three { grid-template-columns: repeat(3, minmax(110px, 1fr)); }
.char-card__name { flex-wrap: wrap; row-gap: 4px; min-width: 0; }
.char-card__meta { grid-template-columns: auto minmax(0, 1fr); }
.char-card__meta b { overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .stats.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat__label { font-size: .68rem; letter-spacing: .05em; }
  .stat__value { font-size: 1.35rem; }
}

/* the open chat can be moved by its title bar where it travels with the bubble */
@media (min-width: 621px) {
  .chat-dock__panel .panel__head { cursor: move; -webkit-user-select: none; user-select: none; touch-action: none; }
}


/* ---------- admin fact lists ---------- */
/* A label/value pair list for the admin panels. The value column is the flexible one so a long ban
   reason wraps inside the panel instead of widening it, and below 420px the pairs stack rather than
   trying to squeeze a label and a value onto one phone-width line. */
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 10px 0 0; font-size: .86rem; align-items: baseline; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .kv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .kv dt { margin-top: 8px; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
}

/* Equipment tooltips on /c/{name}. The card became a <details>, so these rules move the flex row onto
   its <summary> and hide the disclosure triangle; everything else about .equip still applies. */
details.equip { display: block; padding: 0; overflow: hidden; }
details.equip > summary { display: flex; gap: 10px; align-items: center; padding: 8px 10px; cursor: pointer; list-style: none; }
details.equip > summary::-webkit-details-marker { display: none; }
details.equip > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
details.equip[open] > summary { background: rgba(127, 166, 255, .07); }
.equip__text { min-width: 0; flex: 1 1 auto; }
details.equip .equip__slot, details.equip .equip__name { display: block; }
.equip__more { flex: none; color: var(--muted); font-size: .72rem; transition: transform .15s ease; }
details.equip[open] .equip__more { transform: rotate(180deg); }
.equip__tip { border-top: 1px solid var(--line); padding: 8px 10px 10px; }
.equip__tip-head { display: flex; align-items: center; gap: 8px; }
.equip__tip-icon { image-rendering: pixelated; max-width: 24px; max-height: 24px; }
.equip__tip-name { font-weight: 700; font-size: .88rem; color: var(--gold); }
.equip__tip-note { color: var(--muted); font-size: .72rem; margin-bottom: 4px; }
.equip__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 14px; margin: 6px 0 0; }
.equip__stat { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; }
.equip__stat dt { color: var(--muted); }
.equip__stat dd { margin: 0; font-weight: 600; color: var(--text); }

/* Enhancement stars, potential and nebulite inside an equipment tooltip. Each is its own band so the
   three of them stay told apart when an item has all three. */
.equip__star { margin-top: 6px; font-size: .82rem; color: var(--gold); letter-spacing: .06em; overflow-wrap: anywhere; }
.equip__star .muted { letter-spacing: normal; font-size: .72rem; }
.equip__pot, .equip__neb { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
.equip__pot-grade { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent-2); }
.equip__pot-line { font-size: .8rem; color: var(--text); overflow-wrap: anywhere; }