/* ------------------------------------------------------------------
   Design intent: dark and cinematic like the game, but built like a
   modern product site. No 2015 Bootstrap gradients, no drop shadows on
   everything. Type does the work; the accent is used sparingly so the
   numbers stand out.
   ------------------------------------------------------------------ */
:root{
  --bg:#080b10; --bg-2:#0e131b; --panel:#141a24; --panel-2:#1a2230;
  --line:#212a39; --line-2:#2c3849;
  --text:#e7ecf3; --muted:#8b96a8; --dim:#5f6a7d;
  /* The palette follows the Lich King artwork: frost blue where this used
     to be gold. The --gold names are kept as aliases because 25 rules and
     several components still reference them. */
  --accent:#6cc7ec; --accent-2:#b9e9ff;
  --gold:var(--accent); --gold-2:var(--accent-2); --elite:#5aa9e6; --legend:#b47cf5;
  --ice:#7fd4f5;
  --horde:#c8433c; --alliance:#4a7fd4; --ok:#4bb96f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font:15px/1.6 ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
/* Fixed pseudo-element rather than background-attachment:fixed, which stutters
   badly on mobile. The art stays put while the page scrolls over it. */
body::before{content:"";position:fixed;inset:0;z-index:-3;
  background:url('img/hero2.jpg') center center/cover no-repeat}
/* The clip layer sits between the Lich art and the scrim, so it stays put
   while the page scrolls over it exactly like the artwork does. It used to be
   a child of the hero, which meant it scrolled away with the hero and was
   clipped to that band. */
.bgstage{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;
  opacity:1;transition:opacity .35s ease}
/* Home only. On the other tabs it fades out and leaves the Lich alone, which
   is the split that was asked for when the clip first went in. */
body:not([data-tab="home"]) .bgstage{opacity:0}
/* Without this the artwork fights every table of numbers on the site. */
body::after{content:"";position:fixed;inset:0;z-index:-1;
  /* Vertical now, not a 105deg wash off the left corner. The artwork's
     subject sits on the left, and the old angle crushed it. */
  background:linear-gradient(180deg,rgba(8,11,16,.46) 0%,rgba(8,11,16,.68) 40%,
    rgba(8,11,16,.84) 100%),
    radial-gradient(120% 80% at 50% 0%,transparent,rgba(8,11,16,.45))}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;line-height:1.2;font-weight:650;letter-spacing:-.01em}

/* ---------- chrome ---------- */
nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:6px;
  padding:0 22px;height:58px;background:rgba(11,12,15,.72);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.brand{margin-right:22px;font-weight:800;font-size:19px;letter-spacing:-.02em;
  display:flex;align-items:center;gap:1px}
.brand .sa{color:var(--text)}
.brand .wow{background:linear-gradient(180deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.brand em{font-style:normal;color:var(--gold)}
nav a.tab{padding:8px 13px;border-radius:8px;color:var(--muted);font-size:14px;
  font-weight:500;transition:color .12s,background .12s}
nav a.tab:hover{color:var(--text);background:var(--panel)}
nav a.tab.on{color:var(--gold);background:var(--panel-2)}
.live{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 3px rgba(75,185,111,.16)}

main{max-width:1180px;margin:0 auto;padding:28px 22px 70px}
section{display:none}
section.on{display:block}

/* ---------- store catalogue ----------
   Was a link to a separate page. The catalogue is only 43 items, which is far
   too small to justify sending someone somewhere else for it. */
.shopgrid{display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
.item{position:relative;display:flex;gap:12px;padding:13px;border-radius:12px;
  background:var(--card);border:1px solid var(--line);
  transition:border-color .14s,transform .14s}
.item:hover{border-color:rgba(108,199,236,.34);transform:translateY(-1px)}
.item .ico{flex:none;width:46px;height:46px;border-radius:9px;display:block;
  background:#0e1116;border:1px solid rgba(255,255,255,.09);object-fit:cover}
.item .it{min-width:0;flex:1}
.item .t{font-size:14px;font-weight:600;line-height:1.3}
.item .st{font-size:11.5px;color:#8b95a5;margin-top:1px}
.item .kind{display:inline-block;margin-top:7px;font-size:9.5px;
  letter-spacing:.06em;text-transform:uppercase;color:#8e99ab;
  border:1px solid rgba(255,255,255,.13);border-radius:4px;padding:1px 5px}
.item .pr{margin-top:9px;font-size:13px;font-weight:700;display:flex;
  align-items:baseline;gap:7px;flex-wrap:wrap}
.item .was{font-weight:500;font-size:11.5px;color:#78818f;
  text-decoration:line-through}
/* Currency carries its own colour so the price reads without a label being
   parsed: gold is gold, Elite is the site's gold-2, Legendary is purple. */
.cur1{color:#e8c15a}
.cur2{color:var(--gold-2)}
.cur3{color:#c084fc}
.item .new{position:absolute;top:9px;right:9px;font-size:9px;font-weight:700;
  letter-spacing:.07em;background:linear-gradient(180deg,var(--gold-2),var(--gold));
  color:#04222c;border-radius:4px;padding:2px 5px}
.item .off{position:absolute;top:9px;right:9px;font-size:9.5px;font-weight:700;
  background:#2f7d4f;color:#eafff1;border-radius:4px;padding:2px 5px}

/* ---------- most wanted ----------
   Badges are a bounty, so the number that matters to a reader is not the pile
   the target is sitting on but what killing them pays. The bounty is the
   emphasised figure and the pile is its subtitle. */
#board .card .body{overflow-x:auto}
.wnt{display:flex;align-items:center;gap:10px}
.wnt .por{flex:none;position:relative;width:28px;height:28px;display:block}
.wnt .por img{width:28px;height:28px;border-radius:7px;display:block;
  background:rgba(0,0,0,.35)}
.wnt .por img.cls{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;
  border-radius:4px;border:1px solid rgba(9,10,13,.9);background:#12151b}
.bounty{color:#7ee08a;font-weight:700}
.sub.nowrap{white-space:nowrap}
/* Only the bounty cell needs the room. Applying this to every .num cell pushed
   K/D off the right edge of the table. */
#boardRows td.bnt{min-width:134px}
#boardRows .wnt .sub{white-space:nowrap}
.risk{color:#e0797a}
.kd-good{color:#7ee08a}
.kd-bad{color:#8b95a5}
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:#42d17a;box-shadow:0 0 8px rgba(66,209,122,.8);margin-left:6px;
  vertical-align:middle}

/* ---------- who's online ----------
   A dense grid rather than a table: sixty names read as a crowd, sixty table
   rows read as a spreadsheet, and the point of the panel is the crowd. */
.card.wide{margin-bottom:14px}
.whos{display:grid;gap:8px;
  /* Widened from 178px: with the portrait added, race, class and zone were
     being cut mid-word in every single card. */
  grid-template-columns:repeat(auto-fill,minmax(228px,1fr))}
.who{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
  background:rgba(255,255,255,.028);border:1px solid rgba(255,255,255,.055)}
/* Race portrait with the class crest tucked into its corner, which is how the
   character select screen pairs them.

   The source art is 18px square in every FusionCMS template set, so any
   display size above that is an upscale. 28px is the compromise: small enough
   that the softening is not obvious, large enough to actually read a face at.
   Smooth scaling rather than pixelated, because these are painted portraits
   and not pixel art. */
.who .por{flex:none;position:relative;width:28px;height:28px;display:block}
.who .por img{width:28px;height:28px;border-radius:7px;display:block;
  background:rgba(0,0,0,.35)}
.who .por img.cls{position:absolute;right:-3px;bottom:-3px;
  width:14px;height:14px;border-radius:4px;
  border:1px solid rgba(9,10,13,.9);background:#12151b}
.who .who-t{min-width:0}
.who .nm{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.3}
.who .sub{font-size:11px;color:#98a2b2;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.35}
.who .sub b{color:var(--gold-2);font-weight:700}
.who .zn{font-size:10.5px;color:#727d90;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;line-height:1.35}
/* Faction is the fastest thing to read at a glance, so it is the left edge. */
.who.alliance{border-left:3px solid rgba(94,150,255,.55)}
.who.horde{border-left:3px solid rgba(214,78,72,.55)}
.whos-empty{grid-column:1/-1;color:#8b95a5;font-size:13px;padding:6px 2px}
/* The realm is described as running playerbots once, in the panel note. Tagging
   every individual row was noise, and the game itself does not distinguish them
   in /who either, so the panel now matches what a player actually sees. */
.whos-note{color:#8b95a5;font-size:12.5px;line-height:1.55;margin:0 0 12px;
  max-width:76ch}

/* ---------- hero ----------
   The art has Arthas hard right and empty darkness left, so the copy sits
   left and a scrim keeps it readable without washing the subject out. */
.bighero{position:relative;margin:-28px -22px 30px;padding:72px 22px 62px;
  min-height:430px;display:flex;align-items:center;overflow:hidden;
  border-bottom:1px solid var(--line)}
/* The logo clip that used to sit here has been removed. These rules are kept
   because the Lich artwork behind it still uses the same backdrop mechanics:
   a fixed page backdrop, not part of the hero, holding its place while the
   page scrolls.

   What failed the first time was the compositing, not the idea. Dropping
   opacity to .5 and blurring 16px greys the WHOLE frame out, including the
   black two thirds of it, so the fire went dull at exactly the same rate as
   everything else and the result was a smudge. Screen blending is the right
   tool: black contributes nothing at all, so the clip's dark background
   disappears completely and only the flame and the gold emblem add light to
   the page. That is what makes it sit in the page rather than on top of it.

   Sized off the viewport now rather than the hero band, capped at 620px so it
   stays near its native 480 and never needs heavy blur to hide the upscale,
   and feathered with a radial mask so it has no edge anywhere. */
.bgstage .bgvid{position:absolute;
  top:50%;left:50%;transform:translate(-50%,-50%);
  height:min(84vh,620px);aspect-ratio:1;width:auto;max-width:none;
  object-fit:cover;
  mix-blend-mode:screen;opacity:.72;
  filter:saturate(1.3) contrast(1.05) blur(1.5px);
  -webkit-mask-image:radial-gradient(closest-side circle at 50% 50%,#000 34%,rgba(0,0,0,.55) 62%,transparent 82%);
  mask-image:radial-gradient(closest-side circle at 50% 50%,#000 34%,rgba(0,0,0,.55) 62%,transparent 82%)}
/* The hero keeps a scrim of its own purely to hold the headline and paragraph,
   weighted left and clear on the right. The page scrim above handles the rest. */
.bighero::after{content:"";position:absolute;inset:0;z-index:1;
  /* Centred under the copy instead of weighted to the left, which is
     where the throne is. */
  background:radial-gradient(ellipse 62% 86% at 50% 52%,
    rgba(8,11,16,.80) 0%,rgba(8,11,16,.58) 46%,rgba(8,11,16,.16) 76%,
    rgba(8,11,16,0) 100%)}
.bighero .inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%}
/* Narrow: nothing is beside the copy any more, it is underneath it, so the
   clip cannot stay centred. Centred it put the wordmark straight through the
   paragraph. It retreats to the bottom-right corner and mostly off-canvas,
   which leaves it as an ember under the sparse end of the block. */
@media(max-width:880px){
  /* Nothing sits beside the copy on a narrow screen, it sits underneath it, so
     a centred clip put the wordmark straight through the paragraph. It retreats
     to the bottom-right corner and mostly off-canvas. */
  .bgstage .bgvid{top:auto;left:auto;bottom:-8%;right:-24%;transform:none;
    height:min(46vh,340px);opacity:.5}
  .bighero::after{background:linear-gradient(180deg,rgba(9,10,13,.55),
    rgba(9,10,13,.18) 40%,rgba(9,10,13,.42))}
}
.bighero .copy{max-width:660px;margin:0 auto;text-align:center}
.bighero h1{font-size:clamp(30px,4.4vw,50px);letter-spacing:-.03em;max-width:17ch;margin-inline:auto;
  text-shadow:0 2px 26px rgba(0,0,0,.75)}
.bighero h1 em{font-style:normal;
  background:linear-gradient(180deg,var(--gold-2),var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.bighero p{color:#c3ccd9;margin:14px auto 0;max-width:52ch;font-size:16px;
  text-shadow:0 1px 14px rgba(0,0,0,.75)}
.cta{display:flex;gap:11px;margin-top:24px;flex-wrap:wrap}
.cta a{padding:12px 22px;border-radius:10px;font-weight:600;font-size:14.5px;
  transition:transform .12s,box-shadow .12s}
.cta a.go{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#04222c;
  box-shadow:0 6px 22px rgba(108,199,236,.22)}
.cta a.go:hover{transform:translateY(-1px);box-shadow:0 9px 26px rgba(108,199,236,.32)}
.cta a.alt{border:1px solid rgba(255,255,255,.18);color:var(--text);
  background:rgba(255,255,255,.05);backdrop-filter:blur(6px)}
.cta a.alt:hover{border-color:var(--gold)}
.livepill{display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  padding:6px 13px;border-radius:30px;font-size:13px;color:#c3ccd9;
  background:rgba(11,12,15,.6);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(6px)}

/* Inner pages get the Lich King art, so the home page keeps the moving clip
   to itself and the rest of the site still feels like Northrend. */
.hero{position:relative;overflow:hidden;padding:40px 26px 34px;
  margin:-28px -22px 30px;border-bottom:1px solid var(--line)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.045),transparent 60%)}
.hero > *{position:relative;z-index:2}
.hero{max-width:none}
.hero h1{font-size:clamp(26px,3vw,38px);letter-spacing:-.025em;
  text-shadow:0 2px 20px rgba(0,0,0,.7)}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p{color:#c3ccd9;margin:11px 0 0;max-width:620px;font-size:15.5px;
  text-shadow:0 1px 12px rgba(0,0,0,.7)}

/* ---------- stat strip ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:11px;margin:24px 0 30px}
.stat{background:rgba(21,25,34,.58);backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(255,255,255,.09);border-radius:11px;padding:15px 16px;
  box-shadow:0 10px 28px rgba(0,0,0,.30)}
.stat .v{font-size:25px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .k{color:var(--muted);font-size:12px;margin-top:3px;letter-spacing:.02em}
.stat .note{color:var(--dim);font-size:11px;margin-top:5px}

/* ---------- generic panels ---------- */
.row{display:grid;gap:16px}
@media(min-width:900px){ .row.two{grid-template-columns:1fr 1fr} }
.card{background:rgba(21,25,34,.62);backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border:1px solid rgba(255,255,255,.09);border-radius:12px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 12px 34px rgba(0,0,0,.35)}
.stat{position:relative;overflow:hidden}
.stat::after{content:"";position:absolute;right:-22px;top:-22px;width:78px;height:78px;
  border-radius:50%;background:radial-gradient(circle,rgba(108,199,236,.10),transparent 70%)}
.card>header{padding:14px 17px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.card>header h3{font-size:14.5px}
.card>header .hint{color:var(--dim);font-size:12px}
.card .body{padding:6px 0}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-weight:600;font-size:11.5px;
  letter-spacing:.06em;text-transform:uppercase;padding:9px 17px}
td{padding:9px 17px;border-top:1px solid rgba(255,255,255,.07)}
tbody tr:hover{background:rgba(255,255,255,.045)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.rank{color:var(--dim);width:34px;font-variant-numeric:tabular-nums}
.rank.top{color:var(--gold);font-weight:700}
.name{font-weight:600}
.sub{color:var(--muted);font-size:12.5px}
.horde{color:var(--horde)} .alliance{color:var(--alliance)}
.gold{color:var(--gold)} .elite{color:var(--elite)} .legend{color:var(--legend)}

/* ---------- controls ---------- */
.seg{display:inline-flex;background:rgba(16,19,25,.62);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:3px;gap:2px}
.seg button{border:0;background:none;color:var(--muted);font:inherit;font-size:13px;
  padding:6px 13px;border-radius:6px;cursor:pointer}
.seg button.on{background:var(--panel-2);color:var(--gold)}
input[type=search]{background:rgba(21,25,34,.62);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.10);border-radius:9px;
  padding:11px 14px;color:var(--text);font:inherit;width:100%;max-width:400px}
input[type=search]:focus{outline:none;border-color:var(--gold)}

.badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;
  border:1px solid var(--line-2);color:var(--muted)}
.badge.boss{color:var(--legend);border-color:rgba(180,124,245,.4)}
.badge.elite{color:var(--elite);border-color:rgba(90,169,230,.4)}
.badge.normal{color:var(--muted)}

.empty{padding:34px;text-align:center;color:var(--dim)}
.foot{margin-top:34px;padding-top:18px;border-top:1px solid var(--line);
  color:var(--dim);font-size:12.5px}
.bar{height:4px;border-radius:3px;background:var(--line);overflow:hidden;margin-top:6px}
.bar i{display:block;height:100%;background:var(--gold)}

button.primary{background:var(--gold);color:#04222c;border:0;border-radius:9px;
  padding:11px 20px;font:inherit;font-weight:650;cursor:pointer}
button.primary:disabled{opacity:.55;cursor:default}
button.ghost{background:none;border:1px solid var(--line-2);color:var(--muted);
  border-radius:9px;padding:8px 15px;font:inherit;font-size:13px;cursor:pointer}
button.ghost:hover{color:var(--text);border-color:var(--gold)}
input[type=text],input[type=password]{background:var(--bg-2);border:1px solid var(--line);
  border-radius:9px;padding:11px 13px;color:var(--text);font:inherit}
input[type=text]:focus,input[type=password]:focus{outline:none;border-color:var(--gold)}
.flabel{display:block;margin:0 0 5px;color:var(--muted);font-size:12px}
.fhint{color:var(--dim);font-size:11.5px;margin:-9px 0 13px}
.fopt{color:var(--dim)}
#pane_create input[type=text],#pane_create input[type=email],#pane_create input[type=password],
#pane_signin input[type=text],#pane_signin input[type=password]{width:100%;margin-bottom:13px}
.ok{color:var(--ok);font-size:13px;margin-top:11px}
.err{color:#e2685f;font-size:13px;margin-top:11px;min-height:18px}
@media(max-width:640px){
  nav{padding:0 12px;gap:2px} .brand{margin-right:8px;font-size:15px}
  nav a.tab{padding:7px 9px;font-size:13px}
  main{padding:20px 13px 60px} .hero h1{font-size:27px}
  th,td{padding:8px 11px}
}

/* ================= forums and mail ================= */
.fx-crumbs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--dim);font-size:13px;margin-bottom:14px}
.fx-crumbs a{color:var(--muted);text-decoration:none}
.fx-crumbs a:hover{color:var(--gold-2)}
.fx-crumbs span.sep{opacity:.5}

.fx-cat{display:flex;align-items:center;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .15s}
.fx-cat:last-child{border-bottom:none}
.fx-cat:hover{background:rgba(108,199,236,.05)}
.fx-cat .ic{width:38px;height:38px;border-radius:10px;flex:none;display:grid;place-items:center;font-size:17px;background:rgba(108,199,236,.1);border:1px solid rgba(108,199,236,.24)}
.fx-cat .nm{font-weight:700;color:var(--text)}
.fx-cat .ds{color:var(--dim);font-size:13px;margin-top:2px}
.fx-cat .ct{margin-left:auto;text-align:right;color:var(--muted);font-size:12.5px;white-space:nowrap}
.fx-cat .ct b{display:block;color:var(--text);font-size:15px;font-weight:700}

.fx-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;transition:background .15s}
.fx-row:last-child{border-bottom:none}
.fx-row:hover{background:rgba(108,199,236,.05)}
.fx-row .ti{font-weight:600;color:var(--text)}
.fx-row .sub{color:var(--dim);font-size:12.5px;margin-top:3px}
.fx-row .rr{margin-left:auto;text-align:right;color:var(--muted);font-size:12.5px;white-space:nowrap}
.fx-tag{display:inline-block;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;font-weight:800;padding:2px 7px;border-radius:5px;vertical-align:middle;margin-right:7px}
.fx-tag.pin{background:rgba(108,199,236,.15);color:var(--gold-2);border:1px solid rgba(108,199,236,.35)}
.fx-tag.lock{background:rgba(200,67,60,.14);color:#e08a84;border:1px solid rgba(200,67,60,.35)}
.fx-tag.staff{background:rgba(90,169,230,.14);color:var(--elite);border:1px solid rgba(90,169,230,.35)}
.fx-tag.new{background:rgba(75,185,111,.14);color:var(--ok);border:1px solid rgba(75,185,111,.35)}

.fx-post{display:grid;grid-template-columns:172px 1fr;gap:0;border-bottom:1px solid var(--line)}
.fx-post:last-child{border-bottom:none}
.fx-post .who{padding:18px;background:rgba(255,255,255,.015);border-right:1px solid var(--line)}
.fx-post .who .av{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-weight:800;font-size:17px;color:#1a1206;background:linear-gradient(145deg,var(--gold-2),var(--gold));margin-bottom:9px}
.fx-post .who .nm{font-weight:700;font-size:14px;word-break:break-word}
.fx-post .who .meta{color:var(--dim);font-size:11.5px;margin-top:3px}
.fx-post .bd{padding:18px;min-width:0}
.fx-post .bd .txt{white-space:pre-wrap;word-wrap:break-word;line-height:1.7}
.fx-post .bd .foot{display:flex;gap:12px;align-items:center;margin-top:14px;color:var(--dim);font-size:12px}
.fx-post .bd .foot button{background:none;border:none;color:var(--dim);cursor:pointer;font:inherit;padding:0}
.fx-post .bd .foot button:hover{color:var(--gold-2)}
@media(max-width:700px){.fx-post{grid-template-columns:1fr}.fx-post .who{display:flex;align-items:center;gap:10px;border-right:none;border-bottom:1px solid var(--line);padding:12px 16px}.fx-post .who .av{margin:0;width:32px;height:32px;font-size:14px}}

.fx-form textarea{width:100%;min-height:130px;resize:vertical;background:#0c1016;border:1px solid var(--line-2);border-radius:10px;color:var(--text);padding:12px 14px;font:inherit;line-height:1.6}
.fx-form input[type=text]{width:100%;background:#0c1016;border:1px solid var(--line-2);border-radius:10px;color:var(--text);padding:11px 14px;font:inherit}
.fx-form textarea:focus,.fx-form input:focus{outline:none;border-color:var(--gold)}
.fx-form .flabel{display:block;color:var(--muted);font-size:12.5px;margin:0 0 6px;font-weight:600}
.fx-form .row{margin-bottom:14px}
.fx-note{color:var(--dim);font-size:12.5px}
.fx-err{color:#e08a84;font-size:13px;margin-top:10px;min-height:18px}
.fx-empty{padding:38px 20px;text-align:center;color:var(--dim)}

.fx-mailrow{display:flex;align-items:center;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s}
.fx-mailrow:last-child{border-bottom:none}
.fx-mailrow:hover{background:rgba(108,199,236,.05)}
.fx-mailrow.unread .su{font-weight:700;color:var(--text)}
.fx-mailrow .su{color:var(--muted)}
.fx-mailrow .wh{color:var(--dim);font-size:12.5px;margin-top:3px}
.fx-mailrow .dt{margin-left:auto;color:var(--dim);font-size:12.5px;white-space:nowrap}

.navbadge{display:inline-block;min-width:17px;height:17px;line-height:17px;padding:0 5px;border-radius:9px;background:var(--horde);color:#fff;font-size:10.5px;font-weight:800;text-align:center;margin-left:5px;vertical-align:middle}

/* An author rule that sets display (our .navmenu items and .navbadge both do)
   beats the browser's [hidden]{display:none}, so hidden elements kept painting.
   This puts the attribute back in charge. */
[hidden]{display:none !important}

/* ---- grouped nav menu ---- */
.navgroup{position:relative;display:inline-flex}
.tabbtn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 13px;border-radius:8px;
  color:var(--muted);font:500 14px inherit;font-family:inherit;background:none;border:none;
  cursor:pointer;transition:color .12s,background .12s;
}
.tabbtn:hover{color:var(--text);background:var(--panel)}
.tabbtn.on{color:var(--gold);background:var(--panel-2)}
.tabbtn .caret{font-size:10px;opacity:.7;transition:transform .15s}
.tabbtn[aria-expanded="true"] .caret{transform:rotate(180deg)}
.navmenu{
  position:absolute;top:calc(100% + 6px);left:0;min-width:184px;z-index:60;
  background:var(--panel);border:1px solid var(--line-2);border-radius:12px;padding:6px;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.75);display:flex;flex-direction:column;gap:2px;
}
.navmenu a.tab{padding:9px 12px;border-radius:8px;display:flex;align-items:center;justify-content:space-between}
@media(max-width:760px){
  .navmenu{position:fixed;left:10px;right:10px;top:64px;min-width:0}
}

/* ---- quick login ---- */
.navmenu.right{left:auto;right:0;min-width:252px}
#navAuth .who{display:flex;align-items:center;gap:8px}
#navAuth .avatar{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#1a1206;background:linear-gradient(145deg,var(--gold-2),var(--gold))}
.qlogin{padding:12px}
.qlogin label{display:block;color:var(--muted);font-size:12px;margin:0 0 5px;font-weight:600}
.qlogin input{width:100%;background:#0c1016;border:1px solid var(--line-2);border-radius:9px;
  color:var(--text);padding:9px 11px;font:inherit;margin-bottom:10px}
.qlogin input:focus{outline:none;border-color:var(--gold)}
.qlogin .err{color:#e08a84;font-size:12.5px;min-height:17px;margin-top:2px}
.qlogin .foot{border-top:1px solid var(--line);margin-top:10px;padding-top:10px;
  font-size:12.5px;color:var(--dim);text-align:center}
.qlogin .foot a{color:var(--gold-2);text-decoration:none}
@media(max-width:760px){.navmenu.right{left:10px;right:10px}}

/* The base stylesheet only styles button.primary and button.ghost, so every
   plain <button> in these sections fell back to the browser default. Give them
   the site's ghost look, without touching .primary or the text-style buttons
   in a post footer. */
#forums button:not(.primary), #mail button:not(.primary), #bugs button:not(.primary),
#support button:not(.primary), #vote button:not(.primary), #promo button:not(.primary),
#profile button:not(.primary), #admin button:not(.primary){
  background:none;border:1px solid var(--line-2);color:var(--muted);
  border-radius:9px;padding:8px 15px;font:inherit;font-size:13px;cursor:pointer;
  transition:color .12s,border-color .12s;
}
#forums button:not(.primary):hover, #mail button:not(.primary):hover,
#bugs button:not(.primary):hover, #support button:not(.primary):hover,
#vote button:not(.primary):hover, #promo button:not(.primary):hover,
#profile button:not(.primary):hover, #admin button:not(.primary):hover{
  color:var(--text);border-color:var(--gold);
}
/* These are meant to read as plain text, not buttons. */
#forums .fx-post .bd .foot button, #support .fx-post .bd .foot button,
#bugs .fx-post .bd .foot button, #mail .fx-post .bd .foot button{
  background:none;border:none;color:var(--dim);padding:0;font-size:12px;
}
#forums .fx-post .bd .foot button:hover, #support .fx-post .bd .foot button:hover,
#bugs .fx-post .bd .foot button:hover, #mail .fx-post .bd .foot button:hover{
  color:var(--gold-2);border:none;
}

/* ---- generated utility classes -------------------------------------
   These replace inline style= attributes so the CSP can drop
   style-src unsafe-inline. Generated, ordered by how often each was
   used. ------------------------------------------------------------ */
.u1{margin-top:16px}
.u2{min-width:0}
.u3{padding:20px}
.u4{margin-left:auto}
.u5{padding:18px}
.u6{display:flex;gap:10px;flex-wrap:wrap}
.u7{margin-bottom:16px}
.u8{margin-bottom:12px}
.u9{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.u10{margin-bottom:14px}
.u11{color:var(--gold-2)}
.u12{margin:0 0 6px}
.u13{color:var(--ok);margin-left:8px}
.u14{color:var(--muted);font-size:13px}
.u15{margin:-8px 0 14px}
.u16{margin-top:6px}
.u17{color:var(--ok)}
.u18{color:var(--ok);font-size:13px;min-height:18px}
.u19{flex:1}
.u20{margin:0 0 14px;font-size:16px}
.u21{margin-top:14px}
.u22{max-width:430px}
.u23{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.u24{display:flex;gap:6px;justify-content:center;margin-top:16px}
.u25{margin:0 0 10px}
.u26{cursor:pointer}
.u27{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.u28{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.u29{width:10px}
.u30{min-width:0;cursor:pointer}
.u31{padding:16px;display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.u32{flex:1;min-width:200px}
.u33{margin-bottom:16px;border-color:var(--gold)}
.u34{padding:14px 18px}
.u35{margin:22px 0 10px;font-size:16px}
.u36{display:flex;align-items:center;gap:12px}
.u37{max-width:520px}
.u38{text-transform:uppercase;letter-spacing:.08em;font-weight:700}
.u39{margin-top:12px}
.u40{flex:1;min-width:150px}
.u41{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;white-space:nowrap}
.u42{color:var(--dim);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-top:6px}
.u43{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.u44{display:flex;align-items:center;gap:8px}
.u45{display:flex;gap:8px;flex:1}
.u46{min-width:0;flex:1}
.u47{min-width:190px;display:flex;justify-content:flex-end}
.u48{font-family:ui-monospace,monospace;letter-spacing:.06em}
.u49{display:flex;gap:16px}
.u50{display:flex;gap:8px;margin-bottom:12px}
.u51{width:100%}
.u52{margin:-6px 0 10px}
.u53{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.u54{max-width:560px}
.u55{margin-bottom:14px;color:var(--gold-2)}
.u56{color:var(--dim)}
.u57{color:#5cff7c;text-decoration:none;font-weight:700;padding:6px 12px;border:1px solid rgba(92,255,124,.4);border-radius:999px;margin-left:6px;text-shadow:0 0 10px rgba(92,255,124,.45)}
.u58{display:flex;gap:10px;align-items:center;margin-bottom:4px}
.u59{border-radius:7px;border:1px solid var(--line)}
.u60{position:absolute;left:-9999px}
.u61{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.u62{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}

/* ---- classes replacing the last dynamic inline styles ---------------- */
.pill-open{color:#e0b352;border:1px solid #e0b35255;background:#e0b3521a}
.pill-answered{color:#5aa9e6;border:1px solid #5aa9e655;background:#5aa9e61a}
.pill-waiting{color:#8b96a8;border:1px solid #8b96a855;background:#8b96a81a}
.pill-closed{color:#5f6a7d;border:1px solid #5f6a7d55;background:#5f6a7d1a}
.pill-confirmed{color:#5aa9e6;border:1px solid #5aa9e655;background:#5aa9e61a}
.pill-in_progress{color:#b47cf5;border:1px solid #b47cf555;background:#b47cf51a}
.pill-fixed{color:#4bb96f;border:1px solid #4bb96f55;background:#4bb96f1a}
.pill-rejected{color:#5f6a7d;border:1px solid #5f6a7d55;background:#5f6a7d1a}
.pill-duplicate{color:#5f6a7d;border:1px solid #5f6a7d55;background:#5f6a7d1a}
.pill-low{color:#5f6a7d;border:1px solid #5f6a7d55;background:#5f6a7d1a}
.pill-medium{color:#e0b352;border:1px solid #e0b35255;background:#e0b3521a}
.pill-high{color:#e08a5f;border:1px solid #e08a5f55;background:#e08a5f1a}
.pill-blocker{color:#c8433c;border:1px solid #c8433c55;background:#c8433c1a}
.pill-default{color:#8b96a8;border:1px solid #8b96a855;background:#8b96a81a}
.u-select{background:#0c1016;border:1px solid var(--line-2);border-radius:10px;color:var(--text);padding:10px 12px;font:inherit}
.u-vote{flex:none;width:52px;text-align:center;background:transparent;border:1px solid var(--line-2);border-radius:10px;padding:7px 0;cursor:pointer;color:var(--muted)}
.u-vote.voted{background:rgba(108,199,236,.16);border-color:var(--gold);color:var(--gold-2)}
.u-tile{padding:18px;text-align:center}
.u-tile.hot{border-color:var(--gold)}
.u-tile-n{font-family:Cinzel,serif;font-size:28px;font-weight:900;color:var(--text)}
.u-tile.hot .u-tile-n{color:var(--gold-2)}
.u-flag{color:var(--dim);font-weight:700;font-size:12.5px}
.u-flag.on{color:var(--ok)}

/* ---- Cataclysm character copy ---------------------------------------- */
.ct-card{padding:20px}
.ct-card h3{font-family:Cinzel,serif;font-size:18px;margin:0 0 8px}
.ct-card p.sub{margin:0 0 14px;line-height:1.55}
.ct-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px}
.ct-form input{flex:1 1 220px;min-width:0}
.ct-bad{color:var(--bad,#c8433c)}

/* ---- realm pills -------------------------------------------------------
   Legion and Cataclysm are different realms, so they should not look
   identical in the nav. Each takes its own page's accent colour. */
.realmpill{
  text-decoration:none;font-weight:700;padding:6px 12px;border-radius:999px;
  margin-left:6px;white-space:nowrap;
}
.realmpill.legion{
  color:#5cff7c;border:1px solid rgba(92,255,124,.40);
  text-shadow:0 0 10px rgba(92,255,124,.45);
}
.realmpill.legion:hover{background:rgba(92,255,124,.10)}
.realmpill.cata{
  color:#ff9748;border:1px solid rgba(255,151,72,.42);
  text-shadow:0 0 10px rgba(226,101,42,.45);
}
.realmpill.cata:hover{background:rgba(255,151,72,.10)}

/* ---- the nav on small screens ------------------------------------------
   It is a nowrap flex row fixed at 58px, which needs ~915px. On a phone that
   put most of the links past the right edge with no way to reach them. Let it
   wrap instead, and let the height follow its content. */
@media (max-width:900px){
  nav{flex-wrap:wrap;height:auto;min-height:58px;padding:8px 14px;row-gap:8px}
  .brand{margin-right:12px}
  nav .live{margin-left:auto}
}
@media (max-width:560px){
  nav{padding:8px 10px;gap:4px}
  .brand{margin-right:8px;font-size:17px}
  nav a.tab,nav .tabbtn{padding:6px 9px;font-size:13.5px}
  .realmpill{padding:5px 10px;font-size:13.5px}
}

/* ---- hero bleed on small screens ---------------------------------------
   .bighero uses negative horizontal margins to bleed past main's padding and
   reach the page edge. That padding drops from 22px to 13px at 640px, but the
   margin stayed at -22px, so the hero ended up 393px wide in a 375px viewport
   and the whole page scrolled sideways. Match the margin to the padding. */
@media (max-width:640px){
  .bighero{margin-left:-13px;margin-right:-13px;padding-left:13px;padding-right:13px}
}

/* Realm cards on the dashboard and the Legion page source switch.
   These live here rather than as style= attributes because the site's CSP
   sets style-src 'self', which blocks inline styles outright. */
.dr-switch { gap: 6px; margin: 0 0 6px; }
.lt-switch { gap: 8px; }
.dr-sep    { margin-top: 6px; }

/* Start-playing band and news cards on the home tab. */
.start-card .seg { margin-bottom: 14px; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.steps3 .step3 { background: var(--panel2, #12161d); border: 1px solid var(--line, #222a35);
                 border-radius: 10px; padding: 14px 16px; }
.steps3 .step3 .n { display: inline-flex; align-items: center; justify-content: center;
                    width: 26px; height: 26px; border-radius: 50%; font-weight: 700;
                    background: var(--accent, #d8a24a); color: #12161d; margin-bottom: 8px; }
.steps3 .step3 h4 { margin: 0 0 6px; font-size: 1rem; }
.steps3 .step3 p  { margin: 0 0 8px; font-size: .9rem; opacity: .85; }
.steps3 .cmd { display: flex; gap: 8px; align-items: center; }
.steps3 .cmd code { flex: 1; overflow-x: auto; white-space: nowrap; padding: 7px 9px;
                    background: #0c0f14; border: 1px solid var(--line, #222a35);
                    border-radius: 7px; font-size: .84rem; }
.newsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.newsitem { background: var(--panel2, #12161d); border: 1px solid var(--line, #222a35);
            border-radius: 10px; padding: 14px 16px; }
.newsitem .when { font-size: .78rem; opacity: .6; }
.newsitem h4 { margin: 4px 0 6px; font-size: 1rem; }
.newsitem p  { margin: 0; font-size: .9rem; opacity: .85; }
.newsitem .tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
                 opacity: .7; }
@media (max-width: 860px) {
  .steps3, .newsgrid { grid-template-columns: 1fr; }
}

/* Centred hero: the throne sits on the left of the artwork, so left-aligned
   copy sat straight on top of it. */
.bighero .cta{justify-content:center}