/* =============================================================================
 * The Iron Realms board.
 *
 * Built to XenForo's SHAPE, in the game's own colours — because what makes a
 * forum feel like a forum is structure, not a skin: a node list whose every
 * row ends in "Latest: <thread> by <member>", a thread list with sticky rows
 * pinned above the rest and a last-post column on the right, and — the single
 * most recognisable thing on the internet — the author card running down the
 * left of every post, carrying who this person is and what they have earned.
 *
 * Vanilla CSS, no framework, no build step: this file ships as-is to a static
 * host and must keep working when the game's bundler is nowhere in sight.
 * ========================================================================== */

:root {
  --f-bg: #0d1117;
  --f-panel: #151b26;
  --f-panel-2: #1b2331;
  --f-row: #131923;
  --f-row-alt: #161d29;
  --f-line: #29344a;
  --f-gold: #e3c168;
  --f-gold-bright: #f6e2a0;
  --f-gold-dim: #9c7f3e;
  --f-text: #e6ebf3;
  --f-muted: #8d9bb2;
  --f-link: #8fb8e8;
  --f-danger: #e0685f;
  --f-good: #6fbe8f;
  --f-display: "Cinzel", "Iowan Old Style", Palatino, Georgia, serif;
  --f-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 50% -10%, #1b2436 0%, rgba(13,17,23,0) 60%),
    linear-gradient(180deg, #0b0f15 0%, var(--f-bg) 100%);
  color: var(--f-text);
  font: 15px/1.5 var(--f-ui);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: var(--f-link); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 14px 64px; }

/* ── Masthead ──────────────────────────────────────────────────────────── */
.f-head {
  border-bottom: 1px solid var(--f-line);
  background: linear-gradient(180deg, rgba(227,193,104,0.08), rgba(0,0,0,0.25));
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.f-head-in {
  max-width: 1100px; margin: 0 auto; padding: 12px 14px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.f-brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-display); font-size: 20px; font-weight: 700;
  color: var(--f-gold-bright); text-decoration: none; letter-spacing: 0.4px;
}
.f-brand:hover { text-decoration: none; filter: brightness(1.1); }
.f-nav { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; align-items: center; }
.f-nav a, .f-nav button {
  font: 600 13.5px/1 var(--f-ui); color: var(--f-text);
  padding: 9px 13px; border-radius: 8px; border: 1px solid transparent;
  background: none; cursor: pointer; text-decoration: none;
}
.f-nav a:hover, .f-nav button:hover { background: rgba(255,255,255,0.06); border-color: var(--f-line); text-decoration: none; }
.f-nav a.on { background: rgba(227,193,104,0.16); border-color: var(--f-gold-dim); color: var(--f-gold-bright); }

/* Search sits in the masthead, as on every board. */
.f-search { display: flex; gap: 6px; align-items: center; }
.f-search input {
  width: 190px; max-width: 42vw; font: inherit; font-size: 13.5px;
  padding: 8px 11px; border-radius: 999px;
  background: rgba(0,0,0,0.35); border: 1px solid var(--f-line); color: var(--f-text);
}
.f-search input:focus { outline: none; border-color: var(--f-gold-dim); }

/* ── Breadcrumbs ───────────────────────────────────────────────────────── */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 16px 0 12px; font-size: 13px; color: var(--f-muted);
}
.crumbs a { color: var(--f-muted); }
.crumbs a:hover { color: var(--f-gold); }
.crumbs .sep { opacity: 0.5; }

/* ── Panels ────────────────────────────────────────────────────────────── */
.panel {
  background: var(--f-panel);
  border: 1px solid var(--f-line);
  border-radius: var(--f-radius);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.3);
}
.panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 15px;
  background: linear-gradient(180deg, rgba(227,193,104,0.12), rgba(0,0,0,0.2));
  border-bottom: 1px solid var(--f-line);
  font-family: var(--f-display); font-size: 15px; font-weight: 700;
  color: var(--f-gold-bright); letter-spacing: 0.3px;
}
.panel-head .count { margin-left: auto; font: 400 12px var(--f-ui); color: var(--f-muted); letter-spacing: 0; }

/* ── The node list (board index) ───────────────────────────────────────── */
.node {
  display: grid;
  grid-template-columns: 42px 1fr 128px minmax(0, 250px);
  gap: 14px; align-items: center;
  padding: 14px 15px;
  border-bottom: 1px solid rgba(41,52,74,0.6);
}
.node:last-child { border-bottom: 0; }
.node:hover { background: var(--f-row-alt); }
.node-ico { font-size: 24px; text-align: center; line-height: 1; }
.node-name { font-weight: 700; font-size: 15.5px; color: var(--f-text); }
.node-name:hover { color: var(--f-gold-bright); text-decoration: none; }
.node-blurb { font-size: 13px; color: var(--f-muted); margin-top: 2px; }
.node-stats { font-size: 12.5px; color: var(--f-muted); text-align: right; line-height: 1.7; }
.node-stats b { color: var(--f-text); font-variant-numeric: tabular-nums; }
.node-latest { font-size: 12.5px; color: var(--f-muted); min-width: 0; }
.node-latest .t {
  display: block; color: var(--f-link); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node-latest .m { display: block; margin-top: 2px; }
.official .node-name::after {
  content: "OFFICIAL"; margin-left: 8px; font: 700 9.5px/1 var(--f-ui);
  letter-spacing: 0.8px; color: #1a1408; background: var(--f-gold);
  padding: 3px 6px; border-radius: 4px; vertical-align: middle;
}

/* ── The thread list ───────────────────────────────────────────────────── */
.thread {
  display: grid;
  grid-template-columns: 40px 1fr 116px minmax(0, 210px);
  gap: 14px; align-items: center;
  padding: 12px 15px;
  border-bottom: 1px solid rgba(41,52,74,0.6);
}
.thread:last-child { border-bottom: 0; }
.thread:nth-child(even) { background: var(--f-row-alt); }
.thread:hover { background: rgba(227,193,104,0.05); }
.thread.sticky { background: rgba(227,193,104,0.07); box-shadow: inset 3px 0 0 var(--f-gold-dim); }
.thread-title { font-weight: 700; font-size: 15px; color: var(--f-text); }
.thread-title:hover { color: var(--f-gold-bright); text-decoration: none; }
.thread-meta { font-size: 12.5px; color: var(--f-muted); margin-top: 3px; }
.tag {
  display: inline-block; font: 700 9.5px/1 var(--f-ui); letter-spacing: 0.7px;
  padding: 3px 6px; border-radius: 4px; margin-right: 6px; vertical-align: middle;
}
.tag.pin { background: var(--f-gold); color: #1a1408; }
.tag.lock { background: #3a4257; color: #cfd8e8; }

/* ── The avatar ────────────────────────────────────────────────────────────
   No uploads, no CDN, no moderation queue for images: an avatar is generated
   from the member's name, so every member has a distinct one from their first
   post and nothing can ever be uploaded that needs taking down. */
.av {
  width: 40px; height: 40px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 700 16px/1 var(--f-display); color: #0e1218;
  border: 1px solid rgba(0,0,0,0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  flex: 0 0 auto; text-transform: uppercase; user-select: none;
}
.av.lg { width: 88px; height: 88px; border-radius: 12px; font-size: 34px; }
.av.sm { width: 28px; height: 28px; border-radius: 6px; font-size: 12px; }

/* ── A post ────────────────────────────────────────────────────────────────
   THE forum layout: identity down the left, words on the right. */
.post {
  display: grid; grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--f-line);
}
.post:last-child { border-bottom: 0; }
.post:target .post-body { box-shadow: inset 0 0 0 2px var(--f-gold-dim); }
.post-side {
  padding: 16px 14px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.16));
  border-right: 1px solid var(--f-line);
}
.post-side .av { margin: 0 auto 9px; }
.post-author { font-weight: 700; font-size: 14.5px; color: var(--f-gold-bright); word-break: break-word; }
.post-rank {
  font-size: 11.5px; color: var(--f-muted); font-style: italic; margin-top: 1px;
}
.post-figs {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 11.5px; color: var(--f-muted); line-height: 1.7;
}
.post-figs b { color: var(--f-text); font-variant-numeric: tabular-nums; }
.post-main { min-width: 0; display: flex; flex-direction: column; }
.post-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid rgba(41,52,74,0.5);
  font-size: 12.5px; color: var(--f-muted);
}
.post-head .permalink { margin-left: auto; color: var(--f-muted); font-variant-numeric: tabular-nums; }
.post-body { padding: 16px; font-size: 15px; line-height: 1.62; flex: 1; overflow-wrap: anywhere; }
.post-body p { margin: 0 0 12px; }
.post-body p:last-child { margin-bottom: 0; }

/* A quote block — the attribution bar is what makes a reply legible. */
.quote {
  margin: 0 0 12px; border-left: 3px solid var(--f-gold-dim);
  background: rgba(0,0,0,0.28); border-radius: 0 8px 8px 0;
  padding: 10px 13px; font-size: 14px; color: #c9d3e3;
}
.quote .qh {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--f-gold); margin-bottom: 5px;
}

.post-sig {
  margin: 0 16px 14px; padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 12.5px; font-style: italic; color: var(--f-muted);
}
.post-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 9px 16px; border-top: 1px solid rgba(41,52,74,0.5);
  background: rgba(0,0,0,0.14);
}
.post-foot .spacer { margin-left: auto; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  font: 600 13px/1 var(--f-ui); cursor: pointer;
  padding: 9px 14px; border-radius: 8px; min-height: 38px;
  border: 1px solid var(--f-line); background: var(--f-panel-2); color: var(--f-text);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.btn:hover:not(:disabled) { border-color: var(--f-gold-dim); background: #232c3d; text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.primary {
  background: linear-gradient(180deg, var(--f-gold-bright), var(--f-gold-dim));
  color: #1a1408; border-color: var(--f-gold); font-weight: 700;
}
.btn.sm { padding: 6px 10px; min-height: 32px; font-size: 12px; }
.btn.liked { background: rgba(227,193,104,0.18); border-color: var(--f-gold); color: var(--f-gold-bright); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--f-muted); }
.field input, .field textarea, .field select {
  font: inherit; font-size: 15px; color: var(--f-text);
  background: rgba(0,0,0,0.32); border: 1px solid var(--f-line);
  border-radius: 8px; padding: 10px 12px; width: 100%;
}
.field textarea { min-height: 150px; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--f-gold-dim);
  box-shadow: 0 0 0 3px rgba(227,193,104,0.12);
}
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.notice {
  padding: 11px 14px; border-radius: 8px; font-size: 13.5px; margin-bottom: 14px;
  background: rgba(227,193,104,0.09); border: 1px solid rgba(227,193,104,0.3); color: #f0e2be;
}
.notice.bad { background: rgba(224,104,95,0.12); border-color: rgba(224,104,95,0.4); color: #f3c9c5; }
.notice.good { background: rgba(111,190,143,0.12); border-color: rgba(111,190,143,0.4); color: #c7ecd7; }

.empty { padding: 40px 16px; text-align: center; color: var(--f-muted); }
.muted { color: var(--f-muted); }
.small { font-size: 12.5px; }

/* ── Pagination ────────────────────────────────────────────────────────── */
.pager { display: flex; gap: 6px; justify-content: center; align-items: center; flex-wrap: wrap; margin: 16px 0; }
.pager button {
  font: 600 13px/1 var(--f-ui); min-width: 38px; min-height: 38px; padding: 0 11px;
  border-radius: 8px; border: 1px solid var(--f-line);
  background: var(--f-panel-2); color: var(--f-text); cursor: pointer;
}
.pager button:hover:not(:disabled):not(.on) { border-color: var(--f-gold-dim); }
.pager button.on { background: var(--f-gold); border-color: var(--f-gold); color: #1a1408; font-weight: 800; }
.pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Board statistics ──────────────────────────────────────────────────── */
.stats { display: flex; flex-wrap: wrap; gap: 10px 30px; padding: 14px 15px; }
.stat { font-size: 13px; color: var(--f-muted); }
.stat b { display: block; font-size: 19px; font-weight: 800; color: var(--f-gold-bright); font-variant-numeric: tabular-nums; }

/* ── Member roll ───────────────────────────────────────────────────────── */
.members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 15px; }
.member {
  display: flex; align-items: center; gap: 10px; padding: 10px;
  background: var(--f-row); border: 1px solid var(--f-line); border-radius: 8px;
}
.member:hover { border-color: var(--f-gold-dim); text-decoration: none; }
.member-name { font-weight: 700; font-size: 14px; color: var(--f-text); }
.member-sub { font-size: 11.5px; color: var(--f-muted); }

/* ── Unread, watching, alerts ──────────────────────────────────────────────
 *
 * The three marks that turn a wall of posts into a board you come back to:
 * what moved since you looked, what you asked to hear about, and what someone
 * said to you while you were away. All three are computed server-side from
 * your read marks, so they agree across every device you sign in from — a
 * browser-local "seen" flag never could. */
.thread.unread .thread-title { color: var(--f-gold-bright); font-weight: 700; }
.thread.unread { border-left: 3px solid var(--f-gold); }
.tag.watch { background: rgba(126, 200, 255, 0.14); border-color: rgba(126, 200, 255, 0.4); color: #a8d8ff; }

.bell { position: relative; text-decoration: none; font-size: 17px; line-height: 1; padding: 2px; }
.bell-count {
  position: absolute; top: -5px; right: -9px; min-width: 16px; padding: 0 4px;
  border-radius: 999px; background: #b03a30; color: #fff;
  font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}

.alert {
  display: flex; gap: 11px; align-items: center; padding: 12px 15px;
  border-bottom: 1px solid rgba(255,255,255,0.06); text-decoration: none; color: inherit;
}
.alert:last-child { border-bottom: 0; }
.alert:hover { background: rgba(255,255,255,0.03); }
/* Unseen ones carry the gold edge; once the page marks them read they lose it
 * on the NEXT visit, not this one — you should see what was waiting. */
.alert.fresh { border-left: 3px solid var(--f-gold); background: rgba(227,193,104,0.05); }
.alert em { color: var(--f-gold); font-style: normal; }

/* ── Standing in the realm ─────────────────────────────────────────────────
 *
 * The banner line sits ABOVE the posting rank and is the only one in gold,
 * because it is the one that states standing. A board that showed a post
 * count alone had an alliance's Warden reading as "Smallfolk" beneath their
 * own sworn sword — the count was never wrong, it was just the only thing
 * speaking. */
.member-banner,
.post-banner {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--f-gold); margin: 2px 0 1px;
}
.member-rank-badge {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  background: rgba(227, 170, 63, 0.14); border: 1px solid rgba(227, 170, 63, 0.35);
  color: var(--f-gold-bright); font-size: 10px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
}

/* ── Profile ───────────────────────────────────────────────────────────── */
.profile-top { display: flex; gap: 16px; align-items: center; padding: 18px; flex-wrap: wrap; }
.profile-name { font-family: var(--f-display); font-size: 25px; font-weight: 700; color: var(--f-gold-bright); }
.profile-rank { color: var(--f-muted); font-style: italic; margin-top: 2px; }
.profile-figs { display: flex; gap: 26px; margin-top: 10px; flex-wrap: wrap; }

/* ── Phones ────────────────────────────────────────────────────────────────
   The desktop grid columns collapse rather than squeeze: a four-column row at
   380px is unreadable in every direction. The last-post column folds into the
   title block, and the post's identity column becomes a header strip. */
@media (max-width: 860px) {
  .node, .thread { grid-template-columns: 36px 1fr; gap: 10px; }
  .node-stats, .thread .node-stats { display: none; }
  .node-latest, .thread .node-latest {
    grid-column: 2 / -1; padding-top: 4px;
    border-top: 1px dashed rgba(41,52,74,0.8); margin-top: 6px;
  }
  .post { grid-template-columns: 1fr; }
  .post-side {
    display: flex; align-items: center; gap: 10px; text-align: left;
    padding: 10px 14px; border-right: 0; border-bottom: 1px solid var(--f-line);
  }
  .post-side .av { margin: 0; width: 34px; height: 34px; font-size: 14px; }
  .post-figs {
    margin: 0 0 0 auto; padding: 0; border: 0; text-align: right;
    font-size: 11px; line-height: 1.4;
  }
  .f-search input { width: 100%; max-width: none; }
  .f-nav { width: 100%; margin-left: 0; }
}
@media (max-width: 520px) {
  .post-figs { display: none; } /* the card's numbers lose to the words here */
}