/* =========================================================================
   Wrath Portal — Northrend-tema
   Mörk frostpalett, isblå accenter, guld för rubriker. Inga beroenden.
   ========================================================================= */

:root {
  --bg: #0a111c;
  --bg-deep: #060b13;
  --panel: #0e1826;
  --panel-raised: #132135;
  --border: rgba(124, 196, 255, 0.16);
  --border-strong: rgba(124, 196, 255, 0.34);

  --ice: #7cc4ff;
  --ice-bright: #a8e6ff;
  --ice-dim: #4b7fae;
  --gold: #f8b700;
  --gold-dim: #a87c11;

  --text: #d5e4f4;
  --text-dim: #a9bed5;
  --muted: #7c92ab;

  --alliance: #4a7fd4;
  --horde: #c0343a;

  --ok: #57d98b;
  --warn: #ffb454;
  --err: #ff6b6b;

  --q-poor: #9d9d9d;
  --q-common: #ffffff;
  --q-uncommon: #1eff00;
  --q-rare: #0070dd;
  --q-epic: #a335ee;
  --q-legendary: #ff8000;
  --q-artifact: #e6cc80;

  --radius: 10px;
  --shell: 1240px;
  --font-display: "Cinzel", "Georgia", "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* Sticky footer: kolumnen fyller alltid minst hela fönstret, main växer och
     trycker ned footern. Utan detta har .site-footer inget att flyta ned mot
     och hamnar direkt under innehållet på korta sidor. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* Bakgrundsbilden ligger i body::before nedan, inte här: motsvarigheten med
     background-attachment: fixed ignoreras av iOS Safari, som då skalar
     cover-bilden mot hela dokumenthöjden och låter den skrolla med. Färgen är
     golvet som syns medan bilden laddar (eller saknas). */
  background-color: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* --- Bakgrundseffekter --------------------------------------------------- */

/* Bakgrundsbilden som ett eget fast lager: position: fixed skalar mot
   viewporten på alla webbläsare, även iOS Safari. Mörk toning ovanpå bilden —
   utan den försvinner texten i ljusa partier. Negativt z-index lägger lagret
   under allt innehåll (snön ligger på 0, innehållet på 1). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--bg-deep);
  background-image:
    linear-gradient(180deg, rgba(10, 17, 28, 0.55) 0%, rgba(6, 11, 19, 0.82) 100%),
    url("../img/background.png");
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

#snowfall {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.55;
}

/* Stillsamt norrsken högst upp. Ren CSS, ingen animation som äter batteri. */
.aurora {
  position: fixed;
  top: -30vh;
  left: 50%;
  transform: translateX(-50%);
  width: 140vw;
  height: 70vh;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(45% 60% at 30% 50%, rgba(80, 200, 255, 0.10), transparent 70%),
    radial-gradient(40% 55% at 68% 45%, rgba(140, 120, 255, 0.08), transparent 72%);
  filter: blur(24px);
}

.site-header,
main,
.site-footer { position: relative; z-index: 1; }

/* --- Layout -------------------------------------------------------------- */

.shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

main.shell {
  padding: 2rem 0 4rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  /* Tar allt utrymme som blir över och håller därmed footern nedtryckt. */
  flex: 1 0 auto;
}

.two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.stack { display: flex; flex-direction: column; gap: 1.5rem; }

@media (max-width: 960px) {
  /*
   * minmax(0, 1fr) och INTE bara 1fr.
   *
   * "1fr" är kortform för minmax(auto, 1fr), och auto som minimum betyder
   * min-content: kolumnen vägrar bli smalare än sitt bredaste innehåll och
   * trycker i stället ut hela sidan. Desktopregeln ovan har alltid haft
   * nollminimum - den här saknade det, vilket syntes först när en bred
   * tabell lades in.
   */
  .two-col { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Samma fälla på barnen: ett grid- eller flexbarn har min-width: auto och
 * kan därför inte krympa under sitt innehåll. Utan det här hjälper inte
 * overflow-x på en tabell inuti - behållaren växer i stället för att rulla.
 */
.two-col > *,
.stack > * { min-width: 0; }

/* --- Typografi ----------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(248, 183, 0, 0.18);
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.15rem; }

p { margin: 0.35rem 0; }

a { color: var(--ice); text-decoration: none; }
a:hover { color: var(--ice-bright); text-decoration: underline; }

code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: rgba(124, 196, 255, 0.10);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.05em 0.35em;
}

.muted { color: var(--muted); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* --- Header -------------------------------------------------------------- */

/* En rad: hamburgermeny till vänster, stor logga i mitten, inloggningen till
   höger. Ingen list — allt svävar fritt över bakgrunden; utfälld meny och
   knappar bär sin egen kontrast. Sidorna har flex: 1, så loggan står i exakt
   mitt oavsett hur breda knapparna råkar vara. */
.site-header {
  z-index: 20;
  flex: none;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}
.brand:hover { text-decoration: none; }

/* Loggan bär namnet själv, därför ingen text bredvid. Bilden är 2:1 med
   transparent bakgrund; höjden styr och bredden följer med. */
.brand-logo {
  height: 148px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(124, 196, 255, 0.3));
  /* Negativa marginalen är exakt höjdökningen från 116px: layouten ser
     fortfarande en 116px hög logga, så inget under flyttar sig — de extra
     pixlarna hänger ut nedåt över tomrummet ovanför innehållet. */
  margin-bottom: -32px;
}

/* --- Hamburgermenyn ------------------------------------------------------ */

.nav-menu {
  flex: 1;
  position: relative;
}

/* summary stylad som knapp; details-pilen göms. */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  list-style: none;
  /* Utan list bakom sig behöver knappen egen botten mot bakgrundsbilden. */
  background: rgba(10, 17, 28, 0.55);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.nav-toggle::-webkit-details-marker { display: none; }
.nav-toggle:hover,
.nav-menu[open] .nav-toggle {
  color: var(--ice-bright);
  background: rgba(124, 196, 255, 0.08);
  border-color: var(--border-strong);
}

/* Tre streck utan bildfil. */
.nav-burger,
.nav-burger::before,
.nav-burger::after {
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.nav-burger { position: relative; }
.nav-burger::before,
.nav-burger::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-burger::before { top: -5px; }
.nav-burger::after { top: 5px; }

/* Utfälld panel under knappen. */
.site-nav {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 30;
  min-width: 230px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem;
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}

.site-nav a {
  padding: 0.4rem 0.85rem;
  border-radius: 6px;
  color: var(--text-dim);
  font-size: 0.92rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.site-nav a:hover {
  color: var(--ice-bright);
  background: rgba(124, 196, 255, 0.08);
  text-decoration: none;
}
.site-nav a.is-active {
  color: var(--ice-bright);
  border-color: var(--border-strong);
  background: rgba(124, 196, 255, 0.10);
  box-shadow: inset 0 0 12px rgba(124, 196, 255, 0.10);
}

.session {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
}
.session-name {
  font-size: 0.86rem;
  color: var(--ice-dim);
  letter-spacing: 0.04em;
}

.inline-form { display: inline; margin: 0; }

/* --- Knappar ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: linear-gradient(180deg, rgba(124, 196, 255, 0.16), rgba(124, 196, 255, 0.05));
  color: var(--ice-bright);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.05s;
}
.btn:hover {
  background: linear-gradient(180deg, rgba(124, 196, 255, 0.28), rgba(124, 196, 255, 0.10));
  box-shadow: 0 0 16px rgba(124, 196, 255, 0.22);
  text-decoration: none;
  color: #eaf7ff;
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  box-shadow: none;
  background: rgba(124, 196, 255, 0.06);
}

.btn-sm { padding: 0.32rem 0.75rem; font-size: 0.82rem; }
.btn-block { width: 100%; }
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text-dim);
}
.btn-ghost:hover { color: var(--ice-bright); background: rgba(124, 196, 255, 0.08); }

/* --- Paneler ------------------------------------------------------------- */

.panel {
  position: relative;
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.4rem 1.4rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(168, 230, 255, 0.06);
}

/* Frostkant längs överkanten. */
.panel::before {
  content: "";
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 1px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, rgba(168, 230, 255, 0.55), transparent);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.panel-blurb {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 60ch;
}

.panel-foot {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-size: 0.84rem;
}

.count {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  background: rgba(124, 196, 255, 0.12);
  border: 1px solid var(--border);
  color: var(--ice);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  vertical-align: middle;
}

.page-head { padding: 0.5rem 0 0; }
.page-head p { color: var(--muted); max-width: 70ch; }

.empty {
  padding: 2rem 0;
  text-align: center;
  color: var(--muted);
  font-style: italic;
}

.notice {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--ice-dim);
  border-radius: 0 6px 6px 0;
  background: rgba(124, 196, 255, 0.07);
  font-size: 0.86rem;
  color: var(--text-dim);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding: 2rem 0 0.5rem;
}

.hero-text h1 {
  font-size: 2.4rem;
  letter-spacing: 0.04em;
}
.hero-text p { color: var(--text-dim); max-width: 52ch; }

.hero-status {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(14, 24, 38, 0.8);
}
.hero-status strong { display: block; font-family: var(--font-display); font-size: 1rem; }
.hero-status span { font-size: 0.82rem; color: var(--muted); }

.status-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex: none;
}
.hero-status.is-up .status-dot {
  background: var(--ok);
  box-shadow: 0 0 12px var(--ok);
}
.hero-status.is-up strong { color: var(--ok); }
.hero-status.is-down .status-dot { background: var(--muted); }
.hero-status.is-down strong { color: var(--muted); }

/* --- Statistik ----------------------------------------------------------- */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

.stat {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(180deg, rgba(19, 33, 53, 0.9), rgba(14, 24, 38, 0.9));
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--ice-bright);
  line-height: 1.1;
}
.stat-label {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-sub { font-size: 0.76rem; color: var(--ice-dim); }

/* --- Märken och belöningar ----------------------------------------------- */

.mark-panel { border-color: rgba(248, 183, 0, 0.22); }
.mark-icon { flex: none; filter: drop-shadow(0 0 8px rgba(124, 196, 255, 0.35)); }

.mark-summary {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.mark-balance { display: flex; align-items: center; gap: 0.9rem; }
.mark-value {
  display: block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1.05;
  text-shadow: 0 0 20px rgba(248, 183, 0, 0.25);
}
.mark-label {
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.mark-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.8rem 1.4rem;
  margin: 0;
  flex: 1 1 320px;
}
.mark-stats div { display: flex; flex-direction: column; gap: 0.1rem; }
.mark-stats dt {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.mark-stats dd { margin: 0; font-size: 0.95rem; font-weight: 600; }
.mark-stats dd .muted { font-weight: 400; font-size: 0.8rem; }

/* Svitmätare: en prick per dag fram till nästa bonus. */
.streak-track { display: flex; gap: 0.4rem; margin-top: 1.1rem; flex-wrap: wrap; }
.streak-pip {
  width: 100%;
  max-width: 3rem;
  flex: 1 1 1.4rem;
  height: 7px;
  border-radius: 999px;
  background: rgba(124, 196, 255, 0.10);
  border: 1px solid var(--border);
}
.streak-pip.is-lit {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  border-color: rgba(248, 183, 0, 0.5);
  box-shadow: 0 0 10px rgba(248, 183, 0, 0.35);
}

.ledger { margin-top: 1.2rem; }
.ledger summary {
  cursor: pointer;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ice-dim);
  padding: 0.4rem 0;
}
.ledger summary:hover { color: var(--ice-bright); }
.delta-plus { color: var(--ok); font-weight: 600; }
.delta-minus { color: var(--warn); font-weight: 600; }

.reward-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
}

.reward {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(10, 17, 28, 0.55);
}
.reward.is-locked { opacity: 0.62; }
.reward-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.reward-head h3 {
  font-size: 1rem;
  color: var(--text);
  text-shadow: none;
}
.reward-cost {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  flex: none;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold);
}
.reward-desc { font-size: 0.86rem; color: var(--muted); flex: 1 1 auto; margin: 0; }
.reward-form { display: flex; gap: 0.45rem; }
.reward-form select { flex: 1 1 auto; min-width: 0; }

.pill-failed {
  color: var(--err);
  background: rgba(255, 107, 107, 0.12);
  border: 1px solid rgba(255, 107, 107, 0.35);
}

/* --- Administration ------------------------------------------------------ */

/* Guld i menyn: adminlänken ska inte se ut som en vanlig flik. */
.site-nav a.nav-admin { color: var(--gold); }
.site-nav a.nav-admin:hover { color: #ffd257; background: rgba(248, 183, 0, 0.10); }
.site-nav a.nav-admin.is-active {
  color: var(--gold);
  background: rgba(248, 183, 0, 0.12);
  border-color: rgba(248, 183, 0, 0.35);
}

.admin-form { display: flex; flex-direction: column; gap: 0.85rem; }

.poll-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.84rem;
}

.grant-form {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.admin-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }

.btn-danger { color: var(--err); border-color: rgba(255, 107, 107, 0.35); }
.btn-danger:hover {
  color: #fff;
  background: rgba(255, 107, 107, 0.18);
  box-shadow: 0 0 16px rgba(255, 107, 107, 0.25);
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.84rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dim);
  cursor: pointer;
}
.checkbox input { margin-top: 0.15rem; accent-color: var(--ice); }

.console-input {
  flex: 1 1 260px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92rem;
}

/* --- Faktaruta (Om-sidan) ------------------------------------------------ */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem 1.5rem;
  margin: 0;
}
.facts div { display: flex; flex-direction: column; gap: 0.15rem; }
.facts dt {
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.facts dd .muted { font-size: 0.75rem; font-weight: 400; }
.facts dd code { font-size: 0.92em; font-weight: 500; }

.fact-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.3rem;
}
/* Revisionssträngen är lång och får inte spränga panelen. */
.revision {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
  padding: 0.45rem 0.7rem;
  font-size: 0.78rem;
  color: var(--ice-dim);
}

/* --- Rates --------------------------------------------------------------- */

.rate-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 0.5rem 2rem;
}
.rate-group .addon-heading { margin-top: 0.75rem; }

.rate-list { list-style: none; margin: 0; padding: 0; }
.rate-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.32rem 0;
  border-bottom: 1px solid rgba(124, 196, 255, 0.07);
  font-size: 0.87rem;
}
.rate-list li:last-child { border-bottom: none; }
.rate-name { color: var(--muted); }
.rate-value { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-dim); }

/* Guld på det som avviker: det är hela poängen med att visa listan. */
.rate-list li.is-modified .rate-name { color: var(--text); }
.rate-list li.is-modified .rate-value {
  color: var(--gold);
  text-shadow: 0 0 12px rgba(248, 183, 0, 0.3);
}

/* --- Fraktionsbalans ----------------------------------------------------- */

.faction-bar {
  display: flex;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: rgba(6, 11, 19, 0.6);
}
.faction-fill { display: block; height: 100%; transition: width 0.3s; }
.faction-fill.is-alliance {
  background: linear-gradient(90deg, #2f5ea8, var(--alliance));
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.12);
}
.faction-fill.is-horde {
  background: linear-gradient(90deg, var(--horde), #8a1f24);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.1);
}

.faction-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}
.faction-side { display: flex; flex-direction: column; gap: 0.1rem; padding-left: 0.7rem; }
.faction-side.is-alliance { border-left: 3px solid var(--alliance); }
.faction-side.is-horde {
  border-left: 3px solid var(--horde);
  text-align: right;
  padding-left: 0;
  padding-right: 0.7rem;
  border-left: none;
  border-right: 3px solid var(--horde);
}
.faction-name {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.faction-count {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.15;
}
.faction-side.is-alliance .faction-count { color: #7ea8e8; }
.faction-side.is-horde .faction-count { color: #e0787c; }
.faction-meta { font-size: 0.8rem; color: var(--muted); }

/* --- Serverbelastning ---------------------------------------------------- */

.metrics { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.metrics li {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.88rem;
}
.metric-name { display: flex; flex-direction: column; color: var(--text-dim); }
.metric-name .muted { font-size: 0.72rem; }

.metric-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(124, 196, 255, 0.10);
  border: 1px solid var(--border);
  overflow: hidden;
}
.metric-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ice-dim), var(--ice-bright));
  box-shadow: 0 0 10px rgba(124, 196, 255, 0.4);
  transition: width 0.3s;
}
/* Röd först vid verkligt hög belastning - annars tappar färgen sin betydelse. */
.metric-bar > span.is-hot {
  background: linear-gradient(90deg, var(--warn), var(--err));
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.45);
}

.metric-value {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ice-bright);
  white-space: nowrap;
}
.metric-traffic {
  grid-column: 2 / -1;
  display: flex;
  gap: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--ice-bright);
}

@media (max-width: 560px) {
  .metrics li { grid-template-columns: 1fr auto; }
  .metric-bar { grid-column: 1 / -1; }
  .faction-split { grid-template-columns: 1fr; }
  .faction-side.is-horde { text-align: left; border-right: none; border-left: 3px solid var(--horde); padding-left: 0.7rem; }
}

/* --- Tabeller ------------------------------------------------------------ */

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

table.data th {
  text-align: left;
  padding: 0.5rem 0.7rem;
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice-dim);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

table.data td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(124, 196, 255, 0.07);
  vertical-align: middle;
}

table.data tbody tr { transition: background 0.12s; }
table.data tbody tr:hover { background: rgba(124, 196, 255, 0.055); }
table.data tbody tr:last-child td { border-bottom: none; }

.num { text-align: right; font-variant-numeric: tabular-nums; }
th.num { text-align: right; }

/* Fraktionsmarkering som en tunn stapel i vänsterkanten. */
tr.faction-alliance td:first-child { box-shadow: inset 3px 0 0 var(--alliance); }
tr.faction-horde td:first-child { box-shadow: inset 3px 0 0 var(--horde); }

.rank-col { width: 3rem; color: var(--muted); font-family: var(--font-display); }
.value-col { font-weight: 600; color: var(--ice-bright); }

tr.is-podium .rank-col { color: var(--gold); font-weight: 700; }
tr.rank-1 { background: rgba(248, 183, 0, 0.055); }
tr.rank-1 .rank-col { text-shadow: 0 0 10px rgba(248, 183, 0, 0.6); }
tr.rank-2 { background: rgba(200, 214, 230, 0.04); }
tr.rank-3 { background: rgba(180, 120, 60, 0.045); }

/* --- Karaktärsnamn och ikoner -------------------------------------------- */

.char-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: inherit;
}
.char-link:hover { text-decoration: none; }
.char-link:hover .char-name { text-decoration: underline; }

.char-name { font-weight: 600; }

.icon-pair { display: inline-flex; gap: 3px; flex: none; }

.wow-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 3px;
  border: 1px solid rgba(124, 196, 255, 0.28);
  background-color: #16202f;
  background-size: cover;
  background-position: center;
  flex: none;
  vertical-align: middle;
}
.wow-icon-lg { width: 46px; height: 46px; border-radius: 5px; }

.tag {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  border: 1px solid var(--border);
}
.tag-bot { color: var(--muted); background: rgba(124, 196, 255, 0.06); }

.dot-online {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 8px var(--ok);
  flex: none;
}

.pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.pill-online {
  color: var(--ok);
  background: rgba(87, 217, 139, 0.12);
  border: 1px solid rgba(87, 217, 139, 0.35);
}

/* --- Pengar -------------------------------------------------------------- */

.money { display: inline-flex; gap: 0.4rem; font-variant-numeric: tabular-nums; }
.coin { display: inline-flex; align-items: baseline; gap: 0.12rem; }
.coin::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  align-self: center;
  border: 1px solid rgba(0, 0, 0, 0.5);
}
.coin-g { color: #f2c94c; }
.coin-g::after { background: linear-gradient(160deg, #ffe08a, #c9971b); }
.coin-s { color: #cdd7e2; }
.coin-s::after { background: linear-gradient(160deg, #f0f4f8, #8b98a6); }
.coin-c { color: #d08a5c; }
.coin-c::after { background: linear-gradient(160deg, #eaa877, #91542c); }

/* --- Bot-toggle ---------------------------------------------------------- */

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.3rem 0.7rem 0.3rem 0.4rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(10, 17, 28, 0.6);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
}
.toggle:hover { text-decoration: none; color: var(--ice-bright); border-color: var(--border-strong); }

.toggle-track {
  width: 30px; height: 16px;
  border-radius: 999px;
  background: rgba(124, 196, 255, 0.12);
  border: 1px solid var(--border);
  position: relative;
  flex: none;
  transition: background 0.15s;
}
.toggle-knob {
  position: absolute;
  top: 1px; left: 1px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}
.toggle.is-on { color: var(--ice-bright); border-color: var(--border-strong); }
.toggle.is-on .toggle-track { background: rgba(124, 196, 255, 0.3); }
.toggle.is-on .toggle-knob { transform: translateX(14px); background: var(--ice-bright); }

/* --- Flikar -------------------------------------------------------------- */

/* Mappflikar: flikarna står direkt på linjen — ingen luft emellan, annars
   svävar den aktiva flikens ram fritt ovanför strecket med öppen underkant. */
.tabs {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
}
.tab {
  padding: 0.45rem 0.95rem;
  border-radius: 6px 6px 0 0;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  border-bottom: none;
}
.tab:hover { color: var(--ice-bright); background: rgba(124, 196, 255, 0.07); text-decoration: none; }
.tab.is-active {
  color: var(--gold);
  background: rgba(248, 183, 0, 0.08);
  border-color: var(--border-strong);
}

/* --- Senast sedda -------------------------------------------------------- */

.recent { list-style: none; margin: 0; padding: 0; }
.recent li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.5rem;
  border-bottom: 1px solid rgba(124, 196, 255, 0.07);
}
.recent li:last-child { border-bottom: none; }
.recent li.faction-alliance { box-shadow: inset 3px 0 0 var(--alliance); }
.recent li.faction-horde { box-shadow: inset 3px 0 0 var(--horde); }
.recent-meta { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

/* --- Formulär ------------------------------------------------------------ */

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field-grow { flex: 1 1 220px; }
.field-narrow { max-width: 110px; }

label {
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice-dim);
  font-weight: 600;
}

input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
  padding: 0.48rem 0.7rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: rgba(6, 11, 19, 0.75);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.92rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--ice);
  box-shadow: 0 0 0 3px rgba(124, 196, 255, 0.15);
}
textarea {
  width: 100%;
  min-height: 3.4rem;
  resize: vertical;
  line-height: 1.45;
}
select { cursor: pointer; }
option { background: #0e1826; color: var(--text); }

.field-hint {
  font-size: 0.74rem;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}

.search-form {
  display: flex;
  gap: 0.85rem;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* --- Flash --------------------------------------------------------------- */

.flash {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(19, 33, 53, 0.85);
  border-left-width: 3px;
}
.flash strong { font-weight: 600; }
.flash span { font-size: 0.86rem; color: var(--muted); }
.flash-ok { border-left-color: var(--ok); }
.flash-ok strong { color: var(--ok); }
.flash-error { border-left-color: var(--err); }
.flash-error strong { color: var(--err); }

/* --- Inloggning ---------------------------------------------------------- */

.auth-wrap { display: flex; justify-content: center; padding-top: 2rem; }

/* Utloggad är allt låst bakom inloggningen, så navigeringen fyller ingen
   funktion här — kortet bär sin egen logga och räcker tills man är inne. */
.page-login .site-header,
.page-registrera .site-header { display: none; }

/* Logga in/skapa konto centreras mitt i ytan mellan header och footer.
   main.shell växer redan (flex: 1), så panelen hamnar mitt på skärmen oavsett
   upplösning; blir innehållet högre än fönstret växer main och inget klipps. */
.page-login .auth-wrap,
.page-registrera .auth-wrap {
  flex: 1;
  align-items: center;
  padding-block: 1rem;
}

.auth-panel { width: min(100%, 420px); }
.auth-panel h1 { font-size: 1.6rem; margin-bottom: 0.5rem; }

/* Realmloggan över inloggningsformuläret, som klientens egen loginskärm. */
.auth-logo {
  display: block;
  width: min(100%, 300px);
  margin: 0 auto 1.1rem;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.45));
}
.auth-intro { color: var(--text-dim); font-size: 0.9rem; margin-bottom: 1.25rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; margin-top: 1rem; }
/* "eller"-avdelare mellan lösenordslogin och MelleGames-login. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.4rem 0 1.15rem;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* Ikon inline i knapptexten (basknappen är redan inline-flex + centrerad). */
.btn-icon { height: 2.6em; width: auto; }
.register-cta {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
}
.register-hint {
  margin-top: 0.6rem;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}

.auth-note {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--muted);
}

/* --- Mina sidor ---------------------------------------------------------- */

.char-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
}

.char-card {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(10, 17, 28, 0.55);
}
.char-card.faction-alliance { border-left: 3px solid var(--alliance); }
.char-card.faction-horde { border-left: 3px solid var(--horde); }
.char-card.is-online { box-shadow: 0 0 0 1px rgba(87, 217, 139, 0.18); }

.char-card-head { display: flex; align-items: center; gap: 0.7rem; }
.char-card-head .char-name { display: block; font-size: 1.05rem; }
.char-card-head .pill { margin-left: auto; }
.char-card-sub { font-size: 0.8rem; color: var(--muted); }

.char-card-stats,
.char-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.6rem;
  margin: 0;
}
.char-card-stats div,
.char-stats div { display: flex; flex-direction: column; gap: 0.1rem; }
.char-card-stats dt,
.char-stats dt {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.char-card-stats dd,
.char-stats dd { margin: 0; font-size: 0.9rem; font-weight: 500; }

.char-card-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
}
.teleport-form { display: flex; gap: 0.4rem; flex: 1 1 auto; }
.teleport-form select { flex: 1 1 auto; min-width: 0; }

.card-note { font-size: 0.78rem; color: var(--muted); margin: 0; }
.card-warn { color: var(--warn); }

.password-form {
  display: flex;
  gap: 0.85rem;
  align-items: flex-end;
  flex-wrap: wrap;
  max-width: 520px;
}

.rules {
  margin: 1.25rem 0 0;
  padding-left: 1.2rem;
  font-size: 0.84rem;
  color: var(--muted);
}
.rules li { margin-bottom: 0.25rem; }

/* --- Armory: karaktärssida ----------------------------------------------- */

.char-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 1.4rem 1.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: linear-gradient(120deg, rgba(19, 33, 53, 0.95), rgba(10, 17, 28, 0.8));
}
.char-header.faction-alliance { border-left: 4px solid var(--alliance); }
.char-header.faction-horde { border-left: 4px solid var(--horde); }

.char-portrait { display: flex; align-items: center; gap: 0.4rem; }
.char-identity { flex: 1 1 240px; }
.char-identity h1 { font-size: 2rem; text-shadow: 0 0 22px rgba(0, 0, 0, 0.6); }
.char-sub { font-size: 0.95rem; color: var(--text-dim); }
.char-meta { font-size: 0.85rem; color: var(--muted); }
.spec { color: var(--gold); font-weight: 600; }

.char-stats { flex: 0 1 auto; min-width: 240px; }

/* Utrustningsrutnät */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.4rem;
}
.gear-slot {
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.55rem;
  border-radius: 5px;
  border: 1px solid transparent;
}
.gear-slot.is-filled { background: rgba(124, 196, 255, 0.045); border-color: var(--border); }
.gear-slot-name {
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.gear-item {
  font-size: 0.88rem;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gear-item.is-empty { color: var(--muted); }
.gear-ilvl {
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  color: var(--ice-dim);
  padding: 0.05rem 0.35rem;
  border-radius: 3px;
  background: rgba(124, 196, 255, 0.09);
}

/* Talangträd */
.talent-trees { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.talent-trees li {
  display: grid;
  grid-template-columns: 8rem 1fr 2.2rem;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
}
.talent-trees li.is-main .talent-name { color: var(--gold); font-weight: 600; }
.talent-name { color: var(--text-dim); }
.talent-bar,
.prof-bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(124, 196, 255, 0.10);
  border: 1px solid var(--border);
  overflow: hidden;
}
.talent-bar > span,
.prof-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ice-dim), var(--ice-bright));
  box-shadow: 0 0 10px rgba(124, 196, 255, 0.45);
}
.talent-points {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ice-bright);
}
.talent-fallback { font-size: 0.9rem; color: var(--text-dim); }

/* 3D-modell */
.model-stage {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 6px;
  border: 1px solid var(--border);
  /* Isblå botten så att modellen inte flyter i tomma intet innan den ritas. */
  background:
    radial-gradient(70% 60% at 50% 35%, rgba(124, 196, 255, 0.12), transparent 70%),
    rgba(6, 11, 19, 0.6);
  overflow: hidden;
}
.model-stage canvas { display: block; width: 100% !important; height: 100% !important; }

.model-status {
  margin: 0 0 0.85rem;
  font-size: 0.84rem;
  color: var(--muted);
}
.model-status.is-error { color: var(--warn); }

/* Professioner */
.professions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.professions li {
  display: grid;
  grid-template-columns: 20px 8rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
}
.prof-name { color: var(--text-dim); }
.prof-secondary .prof-name { color: var(--muted); }
.prof-value {
  font-variant-numeric: tabular-nums;
  font-size: 0.8rem;
  color: var(--muted);
  white-space: nowrap;
}

/* --- VPN-notis ----------------------------------------------------------- */

/* Guld i stället för isblått: det här är den enda rutan på sidan som säger
   något man inte får missa, och den ska inte se ut som resten. */
.vpn-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius);
  border: 1px solid rgba(248, 183, 0, 0.32);
  border-left: 3px solid var(--gold);
  background: linear-gradient(120deg, rgba(248, 183, 0, 0.09), rgba(19, 33, 53, 0.75));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}

.vpn-icon { font-size: 1.5rem; line-height: 1.2; flex: none; }

.vpn-notice strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--gold);
  margin-bottom: 0.3rem;
}
.vpn-notice p { font-size: 0.9rem; color: var(--text-dim); max-width: 74ch; }
.vpn-notice .vpn-note { font-size: 0.83rem; color: var(--muted); }

@media (max-width: 560px) {
  .vpn-notice { flex-direction: column; gap: 0.6rem; }
}

/* --- Kom igång ----------------------------------------------------------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  counter-reset: step;
}

.step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

/* Frostrund siffra i samma formspråk som loggan. */
.step-number {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  background: radial-gradient(circle at 35% 30%, rgba(124, 196, 255, 0.28), rgba(10, 17, 28, 0.9));
  box-shadow: 0 0 16px rgba(124, 196, 255, 0.22), inset 0 0 10px rgba(168, 230, 255, 0.15);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ice-bright);
}

.step-body { min-width: 0; }
.step-body h2 { margin-bottom: 0.5rem; }
.step-body p { max-width: 72ch; }

.step-note {
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 72ch;
}

.step-optional {
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.4rem;
}

/* Kopieringsrad för realmlist */
.copy-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.85rem 0;
}
.copy-value {
  flex: 1 1 240px;
  display: flex;
  align-items: center;
  padding: 0.55rem 0.85rem;
  font-size: 0.95rem;
  color: var(--ice-bright);
  background: rgba(6, 11, 19, 0.85);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  user-select: all;
  overflow-x: auto;
  white-space: nowrap;
}
.btn.is-done { color: var(--ok); border-color: rgba(87, 217, 139, 0.45); }

.paths { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.paths li { margin-bottom: 0.25rem; }

.callout {
  margin: 1rem 0;
  padding: 0.9rem 1.15rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold-dim);
  background: rgba(248, 183, 0, 0.05);
  font-size: 0.88rem;
}
.callout strong { color: var(--gold); }
.callout ul { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.callout li { margin-bottom: 0.35rem; }
.callout li:last-child { margin-bottom: 0; }

.addon-heading {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ice-dim);
  margin: 1.25rem 0 0.5rem;
}

.addon-list { list-style: none; margin: 0; padding: 0; }
.addon-list li {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.75rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(124, 196, 255, 0.07);
  font-size: 0.88rem;
}
.addon-list li:last-child { border-bottom: none; }
.addon-list strong { color: var(--text); }
.addon-list span { color: var(--muted); }

.feature-list { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.feature-list li { margin-bottom: 0.4rem; }

@media (max-width: 720px) {
  .step { grid-template-columns: 1fr; gap: 0.75rem; }
  .addon-list li { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* --- Guilds -------------------------------------------------------------- */

.guild-link { font-family: var(--font-display); font-weight: 600; color: var(--gold); }
.guild-link:hover { color: #ffd257; }

.motd {
  margin: 0.75rem 0 0;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--gold-dim);
  background: rgba(248, 183, 0, 0.06);
  border-radius: 0 6px 6px 0;
  font-style: italic;
  color: var(--text-dim);
}

/* --- Felsida ------------------------------------------------------------- */

.error-page { display: flex; justify-content: center; padding-top: 3rem; }
.error-panel { width: min(100%, 520px); text-align: center; padding: 2.5rem 2rem; }
.error-rune {
  display: block;
  font-size: 3rem;
  color: var(--ice);
  text-shadow: 0 0 26px rgba(124, 196, 255, 0.7);
  margin-bottom: 0.75rem;
}
.error-message { color: var(--text-dim); margin: 0.75rem 0; }
.error-detail { color: var(--muted); font-size: 0.86rem; margin-bottom: 1.5rem; }

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(6, 11, 19, 0.7);
  padding: 1.25rem 0;
  /* Krymper aldrig ihop även när innehållet är högre än fönstret. */
  flex: none;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: var(--muted);
}
.footer-note { color: var(--ice-dim); }

/* --- Item-kvalitet (Wowhead skriver om länkarna, vi sätter grundfärgen) --- */

.q-poor { color: var(--q-poor) !important; }
.q-common { color: var(--q-common) !important; }
.q-uncommon { color: var(--q-uncommon) !important; }
.q-rare { color: var(--q-rare) !important; }
.q-epic { color: var(--q-epic) !important; }
.q-legendary { color: var(--q-legendary) !important; }
.q-artifact { color: var(--q-artifact) !important; }

/* --- Rörelsekänslighet --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #snowfall { display: none; }
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* --- Små skärmar --------------------------------------------------------- */

@media (max-width: 720px) {
  .brand-logo { height: 96px; margin-bottom: -20px; }
  /* Kontonamnet ryms inte bredvid loggan på smala skärmar. */
  .session-name { display: none; }
  .hero-text h1 { font-size: 1.8rem; }
  table.data { font-size: 0.84rem; }
  table.data th, table.data td { padding: 0.4rem 0.45rem; }
  .gear-slot { grid-template-columns: 4.5rem 1fr auto; }
}

@media (max-width: 480px) {
  /* Bara hamburgaren, ingen text — annars trängs loggan ut ur mitten. */
  .nav-toggle-label { display: none; }
  .brand-logo { height: 74px; margin-bottom: -14px; }
  .header-inner { gap: 0.5rem; }
}

/* --- Nyheter (hämtas från MelleGames-portalen) --------------------------- */

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.news-card {
  background: linear-gradient(180deg, var(--panel-raised), var(--panel));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.news-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4);
  transform: translateY(-2px);
}
.news-card-link { display: block; color: inherit; }
.news-card-link:hover { text-decoration: none; color: inherit; }

.news-card-img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
}
.news-card-body { padding: 1rem 1.15rem 1.2rem; }

.news-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  font-size: 0.82rem;
}

.news-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: rgba(124, 196, 255, 0.10);
  color: var(--ice-bright);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.news-tag.is-general {
  border-color: var(--gold-dim);
  background: rgba(248, 183, 0, 0.10);
  color: var(--gold);
}

.news-card-title {
  margin: 0.55rem 0 0;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--ice-bright);
}
.news-card-summary {
  margin: 0.5rem 0 0;
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-more {
  display: inline-block;
  margin-top: 0.8rem;
  color: var(--ice);
  font-weight: 600;
  font-size: 0.9rem;
}
.news-card:hover .news-more { color: var(--ice-bright); }

/* --- Artikel ------------------------------------------------------------- */

.news-back { font-size: 0.9rem; color: var(--text-dim); }
.news-back:hover { color: var(--ice-bright); }

.news-article { padding-top: 0; overflow: hidden; }
.news-article-img {
  display: block;
  width: calc(100% + 2.8rem);
  max-height: 32rem;
  object-fit: contain;
  margin: -1.4rem -1.4rem 1.4rem;
  background: var(--bg-deep);
  border-bottom: 1px solid var(--border);
}
.news-article-meta { margin-top: 1.25rem; }
.news-article-title {
  margin: 0.6rem 0 1.2rem;
  font-size: 1.9rem;
  line-height: 1.2;
  color: var(--gold);
}
.news-prose { color: var(--text); line-height: 1.7; }
.news-prose p { margin: 0 0 1rem; }
.news-prose a { color: var(--ice); }
.news-prose a:hover { color: var(--ice-bright); }

/* --- Nyheter på dashboarden --------------------------------------------- */

.dash-news-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.dash-news-head h2 {
  margin: 0;
  color: var(--gold);
}

/* Lite luftigare kort på dashboarden: kortare bild, fler i bredd. */
.news-grid-compact {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.news-grid-compact .news-card-img {
  aspect-ratio: 16 / 9;
}
.news-grid-compact .news-card-body {
  padding: 0.85rem 1rem 1rem;
}

/* ---- Item-väljare (admin-post + belöningarnas fri-val) ---- */
.item-picker { position: relative; }
.item-search { width: 100%; }
.item-results {
  position: absolute; z-index: 20; left: 0; right: 0; margin: 2px 0 0;
  max-height: 16rem; overflow-y: auto; list-style: none; padding: 4px;
  background: var(--panel, #14181f); border: 1px solid var(--border, #2a3140);
  border-radius: 8px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.item-results li { margin: 0; }
.item-result {
  display: block; width: 100%; text-align: left; padding: 6px 10px;
  background: none; border: 0; border-radius: 6px; cursor: pointer;
  font: inherit; color: var(--text);
}
.item-result:hover:not(:disabled),
.item-result:focus-visible { background: rgba(255, 255, 255, 0.06); }
.item-result:disabled { opacity: 0.45; cursor: default; }
.item-result .item-meta { color: var(--muted, #8a93a3); font-size: 0.85em; }
.item-chosen { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.item-chip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 10px; border: 1px solid var(--border, #2a3140); border-radius: 8px;
}
.item-chip .item-name { font-weight: 600; }
.item-chip .item-id { font-size: 0.85em; }
.item-chip .item-count { width: 5.5rem; margin-left: auto; }
.item-chip .item-remove { flex: 0 0 auto; }
.reward-redeem {
  margin-top: 12px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border, #2a3140); border-radius: 8px;
}
.reward-selected { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.reward-selected .item-name { font-weight: 600; }

/* --- Arenalag på topplistan ---------------------------------------------- */

/* Underflikar (lagstorlek) sitter under huvudflikarna och ska läsa som
   sekundära: ingen egen underkant, mindre text. */
.tabs-sub {
  border-bottom: none;
  margin: 0 0 0.35rem;
}
.tabs-sub .tab {
  padding: 0.3rem 0.75rem;
  font-size: 0.82rem;
  border-radius: 6px;
}

.team-name { font-weight: 600; color: var(--ice-bright); }

.team-captain {
  display: block;
  font-size: 0.76rem;
  margin-top: 0.1rem;
}

.tag-captain {
  color: var(--gold);
  background: rgba(248, 183, 0, 0.1);
  border-color: var(--gold-dim);
}

/* Medlemslistan kan bli fem namn bred, så den radbryter i stället för att
   tvinga fram vågrät sidrullning i tabellen. */
.team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.75rem;
}

.char-link-inline { gap: 0.3rem; font-size: 0.86rem; }

/* Personlig rating efter varje namn - tabulära siffror så kolumnen av namn
   inte hoppar i bredd mellan rader. */
.member-rating {
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}

/* Ratingkolumnen är det listan sorterar på, så den får mest vikt. */
.data-arena .value-col { font-family: var(--font-display); font-size: 1.02rem; }
.data-arena td { vertical-align: top; }

/* Kvalificeringsmärken på armory-sidans arenalag. Grönt = du får points den
   här veckan, gult = något krav saknas ännu. */
.tag-ok {
  color: var(--ok);
  background: rgba(74, 222, 128, 0.1);
  border-color: rgba(74, 222, 128, 0.35);
}
.tag-warn {
  color: var(--gold);
  background: rgba(248, 183, 0, 0.1);
  border-color: var(--gold-dim);
}

/* Lagkamratcellen kan bli fyra namn bred - radbryt i stället för att tvinga
   fram vågrät sidrullning. */
.data-arena-char .team-members {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.7rem;
}
.data-arena-char td { vertical-align: top; }

/* --- Breda tabeller på små skärmar --------------------------------------- */

/*
 * En tabell med många kolumner kan inte krympa under sitt minsta innehåll.
 * Utan den här behållaren trycker den ut HELA dokumentet bredare än skärmen,
 * och då kläms varje annan sektion ihop — inte bara tabellen. Låt den rulla
 * för sig själv i stället, så behåller sidan sin bredd.
 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Tunn antydan om att det finns mer i sidled. */
  scrollbar-width: thin;
}

/* Tabellen får ta den plats den behöver inuti behållaren, inte krympas. */
.table-scroll > table.data { min-width: max-content; }

@media (max-width: 720px) {
  /* Stram åt arenatabellerna så de flesta får plats utan att rulla. */
  .data-arena th, .data-arena td,
  .data-arena-char th, .data-arena-char td {
    padding: 0.35rem 0.5rem;
    font-size: 0.82rem;
  }
  .data-arena .team-members,
  .data-arena-char .team-members {
    /* Lagkamrater under varandra i stället för bredvid — sparar mest bredd. */
    flex-direction: column;
    gap: 0.15rem;
  }
  .data-arena .team-captain { display: none; }
}