:root {
  /* Colours taken from the guild logo: fire orange, Horde red, fel purple */
  --bg: #0f0c0c;
  --panel: #1a1414;
  --panel2: #231a1a;
  --line: #3a2626;
  --text: #ece4dc;
  --muted: #a8968c;
  --gold: #ffa53a;       /* fire orange (main accent) */
  --gold-dark: #d9531e;  /* ember */
  --red: #c81e32;        /* Horde red */
  --purple: #b44cff;     /* fel / arcane purple */
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 70px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, sans-serif;
  line-height: 1.55;
}
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; letter-spacing: .02em; margin: 0 0 .6rem; }
h2 { font-size: 1.9rem; color: var(--gold); text-shadow: 0 0 18px rgba(255,120,40,.35); border-bottom: 1px solid var(--line); padding-bottom: .4rem; margin-bottom: 1.2rem; }
a { color: var(--gold); }
.muted { color: var(--muted); }
.gold { color: var(--gold); font-weight: 600; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 3rem 1.2rem 0; }

/* NAV */
.nav {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.4rem;
  background: rgba(15,12,12,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .55rem; font-family: Georgia, serif; font-size: 1.15rem; color: var(--gold); text-decoration: none; font-weight: bold; }
.brand img { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--red); }
.nav nav { display: flex; gap: 1.2rem; align-items: center; }
.nav nav a { color: var(--text); text-decoration: none; font-size: .95rem; }
.nav nav a:hover { color: var(--gold); }
.burger { display: none; background: none; border: 0; color: var(--gold); font-size: 1.6rem; cursor: pointer; }

/* BUTTONS */
.btn {
  display: inline-block; cursor: pointer; border: 0;
  background: linear-gradient(180deg, var(--gold), var(--gold-dark));
  color: #1c0a04 !important; font-weight: 700; text-decoration: none;
  padding: .7rem 1.4rem; border-radius: 6px; font-size: 1rem;
}
.btn:hover { filter: brightness(1.1); }
.btn.small { padding: .35rem .9rem; font-size: .9rem; }
.btn.ghost { background: transparent; border: 1px solid var(--purple); color: #d9a6ff !important; }
.btn.ghost:hover { background: rgba(180,76,255,.12); }

/* HERO */
.hero {
  display: grid; place-items: center; text-align: center; padding: 2rem 1rem 3rem;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(255,120,40,.22), transparent 60%),
    radial-gradient(ellipse at 85% 70%, rgba(180,76,255,.12), transparent 50%),
    linear-gradient(180deg, #161010 0%, var(--bg) 100%);
}
.hero-logo {
  display: block; width: min(860px, 100%); height: auto; margin: 0 auto 1.2rem;
  /* fade the dark edges of the image into the page */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 70%, transparent 100%);
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--muted); }
.tagline { font-size: 1.15rem; max-width: 560px; margin: 0 auto 1.6rem; color: #cfcdc5; }
.cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* CARDS */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; padding-top: 2rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--red); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.card h3 { font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-family: inherit; }
.card .big { font-size: 1.6rem; font-weight: 700; margin: .2rem 0; }
.card p { margin: .2rem 0; }

/* NEWS */
.news { display: grid; gap: .8rem; }
.news article { background: var(--panel); border-left: 3px solid var(--red); padding: .9rem 1.1rem; border-radius: 0 var(--radius) var(--radius) 0; }
.news h3 { margin: 0; font-size: 1.1rem; }
.news time { font-size: .8rem; color: var(--muted); }

/* FILTERS + TABLE */
.filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--purple); outline-offset: 1px; }
input, select, textarea {
  background: var(--panel2); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: .55rem .7rem; font: inherit;
}
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; background: var(--panel); }
th, td { text-align: left; padding: .65rem .9rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--panel2); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); cursor: pointer; user-select: none; }
th:hover { color: var(--gold); }
tbody tr:hover { background: var(--panel2); }
td.name { font-weight: 600; }
.bar { display: inline-block; width: 80px; height: 8px; background: var(--line); border-radius: 4px; overflow: hidden; vertical-align: middle; margin-right: .5rem; }
.bar i { display: block; height: 100%; background: var(--gold); }

/* Class colours (Blizzard standard) */
.c-Warrior { color: #C69B6D; } .c-Paladin { color: #F48CBA; } .c-Hunter { color: #AAD372; }
.c-Rogue { color: #FFF468; } .c-Priest { color: #FFFFFF; } .c-Shaman { color: #0070DD; }
.c-Mage { color: #3FC7EB; } .c-Warlock { color: #8788EE; } .c-Druid { color: #FF7C0A; }
.c-Death.Knight, .c-DeathKnight { color: #C41E3A; }

/* RAIDS */
.raid-list { display: grid; gap: .7rem; }
.raid { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1.2rem; }
.raid strong { font-size: 1.05rem; }

/* PROGRESS */
.prog { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; }
.prog-head { display: flex; justify-content: space-between; margin-bottom: .5rem; }
.prog-bar { height: 10px; background: var(--line); border-radius: 5px; overflow: hidden; margin-bottom: .8rem; }
.prog-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }
.bosses { display: flex; flex-wrap: wrap; gap: .4rem; }
.boss { font-size: .82rem; padding: .2rem .6rem; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); }
.boss.dead { border-color: var(--gold); color: var(--gold); }
.boss.dead::before { content: "✔ "; }

/* RECRUIT / FORMS */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.needs, .plain { padding-left: 1.1rem; }
.needs li { margin-bottom: .3rem; }
.needs .prio { color: var(--gold); font-weight: 600; }
.form { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.form label { display: block; margin-bottom: .8rem; font-size: .9rem; color: var(--muted); }
.form input, .form textarea { width: 100%; margin-top: .25rem; }

footer { text-align: center; color: var(--muted); padding: 3rem 1rem 2rem; font-size: .85rem; }

/* MOBILE */
@media (max-width: 760px) {
  .burger { display: block; }
  .nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; background: var(--bg); padding: 1rem; border-bottom: 1px solid var(--line); }
  .nav nav.open { display: flex; }
  .two-col { grid-template-columns: 1fr; }
}

.form select { width: 100%; margin-top: .25rem; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.btn:disabled { opacity: .6; cursor: wait; }

/* NEWS CARDS (clickable) */
.news-item { display: flex; gap: 1rem; cursor: pointer; transition: background .15s, transform .15s; }
.news-item:hover, .news-item:focus-visible { background: var(--panel2); transform: translateX(3px); outline: none; }
.news-thumb { width: 110px; height: 80px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.news-body { min-width: 0; }
.news-body p { margin: .3rem 0; color: #cfc6bd; }
.news .more { font-size: .85rem; color: var(--gold); font-weight: 600; }
.news-more { margin-top: 1rem; }

/* NEWS POPUP */
.modal {
  width: min(720px, calc(100% - 2rem)); max-height: 85vh; overflow-y: auto;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius);
  padding: 1.6rem 1.8rem; box-shadow: 0 20px 60px rgba(0,0,0,.7);
}
.modal::backdrop { background: rgba(0,0,0,.72); backdrop-filter: blur(3px); }
.modal[open] { animation: pop .18s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.98); } }
.modal h2 { border: 0; padding: 0; margin: .2rem 2rem .9rem 0; font-size: 1.6rem; }
.modal-meta { color: var(--muted); font-size: .85rem; margin: 0; }
.modal-close {
  position: sticky; float: right; top: 0; margin: -.6rem -.8rem 0 0;
  background: var(--panel2); border: 1px solid var(--line); color: var(--text);
  width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 1rem;
}
.modal-close:hover { border-color: var(--gold); color: var(--gold); }
.modal-body { line-height: 1.65; overflow-wrap: anywhere; }
.modal-body h3, .modal-body h4, .modal-body h5 { color: var(--gold); margin: 1rem 0 .4rem; }
.modal-body ul { padding-left: 1.2rem; margin: .4rem 0; }
.modal-body blockquote { border-left: 3px solid var(--line); margin: .4rem 0; padding-left: .8rem; color: #cfc6bd; }
.modal-body code { background: var(--panel2); padding: .1rem .35rem; border-radius: 4px; font-size: .9em; }
.modal-body pre { background: var(--panel2); padding: .8rem; border-radius: 6px; overflow-x: auto; }
.modal-body .dc-time { background: rgba(255,165,58,.15); color: var(--gold); padding: .05rem .35rem; border-radius: 4px; font-weight: 600; }
.modal-body .spoiler { background: #000; color: transparent; border-radius: 3px; cursor: pointer; }
.modal-body .spoiler:hover, .modal-body .spoiler:focus { color: inherit; background: var(--panel2); }
.modal-images { display: grid; gap: .6rem; margin: 1rem 0; }
.modal-images img { width: 100%; border-radius: 6px; display: block; }
@media (max-width: 760px) { .news-thumb { display: none; } .modal { padding: 1.2rem; } }

/* ===== Shared: sub pages ===== */
.nav nav a.active { color: var(--gold); }
.page { min-height: 70vh; padding-bottom: 2rem; }
.page-title { font-size: 2.4rem; color: var(--gold); text-shadow: 0 0 18px rgba(255,120,40,.35); margin-bottom: .2rem; }
.page-sub { margin-top: 0; }
.small-note { font-size: .82rem; margin-top: 1rem; }
.chip { display: inline-block; padding: .3rem .75rem; border: 1px solid var(--line); border-radius: 99px; background: var(--panel); font-size: .88rem; color: #d8cfc6; }
.chip b { color: var(--text); }
.role { display: inline-block; padding: .12rem .55rem; border-radius: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; }
.role-Tank { background: rgba(198,155,109,.18); color: #e2bf94; }
.role-Healer { background: rgba(63,199,107,.16); color: #6fe39a; }
.role-DPS { background: rgba(200,30,50,.2); color: #ff7b8b; }
.chip.tank b { color: #e2bf94; } .chip.healer b { color: #6fe39a; } .chip.dps b { color: #ff7b8b; }

/* Class backgrounds (letters / placeholders) */
.bg-Warrior { background: #C69B6D; } .bg-Paladin { background: #F48CBA; } .bg-Hunter { background: #AAD372; }
.bg-Rogue { background: #FFF468; } .bg-Priest { background: #FFFFFF; } .bg-Shaman { background: #0070DD; }
.bg-Mage { background: #3FC7EB; } .bg-Warlock { background: #8788EE; } .bg-Druid { background: #FF7C0A; }
.bg-DeathKnight { background: #C41E3A; } .c-DeathKnight { color: #C41E3A; }
.letter { display: grid; place-items: center; color: #140c08; font-weight: 800; font-family: Georgia, serif; }

/* ===== Roster page ===== */
.role-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.2rem 0; }
.roster-table tbody tr { cursor: pointer; }
.roster-table td.name a { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; font-weight: 700; }
.roster-table td.name a:hover { text-decoration: underline; }
.mini-avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; font-size: .85rem; flex-shrink: 0; }
th.sorted { color: var(--gold); }
th.sorted::after { content: " " attr(data-dir); font-size: .7rem; }

/* ===== Character page ===== */
.back { display: inline-block; margin-bottom: 1.2rem; text-decoration: none; font-size: .92rem; }
.char-head {
  display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--panel2), var(--panel));
  border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: var(--radius); padding: 1.3rem 1.5rem;
}
.char-head.border-Warrior { border-left-color: #C69B6D; } .char-head.border-Paladin { border-left-color: #F48CBA; }
.char-head.border-Hunter { border-left-color: #AAD372; } .char-head.border-Rogue { border-left-color: #FFF468; }
.char-head.border-Priest { border-left-color: #FFFFFF; } .char-head.border-Shaman { border-left-color: #0070DD; }
.char-head.border-Mage { border-left-color: #3FC7EB; } .char-head.border-Warlock { border-left-color: #8788EE; }
.char-head.border-Druid { border-left-color: #FF7C0A; }
.char-avatar img, .char-avatar .letter { width: 84px; height: 84px; border-radius: 12px; object-fit: cover; font-size: 2.4rem; border: 2px solid var(--line); }
.char-title { flex: 1; min-width: 200px; }
.char-title h1 { font-size: 2.2rem; margin: 0; }
.char-line { margin: .2rem 0 .6rem; color: #d8cfc6; font-size: 1.05rem; }
.char-tags { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.char-ilvl { text-align: center; }
.char-ilvl b { display: block; font-size: 2.4rem; color: var(--purple); line-height: 1; text-shadow: 0 0 16px rgba(180,76,255,.4); }
.char-ilvl span { font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.notice { background: rgba(180,76,255,.1); border: 1px solid rgba(180,76,255,.35); color: #e2c6ff; padding: .8rem 1rem; border-radius: var(--radius); margin: 1rem 0 0; }

.paperdoll {
  display: grid; grid-template-columns: 1fr minmax(220px, 260px) 1fr; gap: 1rem; margin-top: 1.5rem;
  grid-template-areas: "left center right" "bottom bottom bottom";
}
.slots.left { grid-area: left; } .slots.right { grid-area: right; } .doll-center { grid-area: center; }
.slots { display: grid; gap: .45rem; align-content: start; }
.slots.bottom { grid-area: bottom; grid-template-columns: repeat(3, 1fr); }
.slot {
  display: flex; align-items: center; gap: .7rem; min-height: 58px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .45rem .6rem;
}
.slot.empty { opacity: .55; }
.slot-icon { width: 42px; height: 42px; border-radius: 6px; flex-shrink: 0; background: #0b0808; border: 2px solid var(--line); display: block; }
.slot-text { min-width: 0; display: flex; flex-direction: column; }
.slot-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.item-name { font-weight: 600; text-decoration: none; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.item-name:hover { text-decoration: underline; }
.enchant { font-size: .76rem; color: #1eff00; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Item quality colours (Blizzard standard) */
.q-POOR { color: #9d9d9d; } .q-COMMON { color: #ffffff; } .q-UNCOMMON { color: #1eff00; } .q-RARE { color: #0070dd; }
.q-EPIC { color: #a335ee; } .q-LEGENDARY { color: #ff8000; } .q-ARTIFACT, .q-HEIRLOOM { color: #e6cc80; }
.q-border-POOR { border-color: #9d9d9d; } .q-border-COMMON { border-color: #ffffff; } .q-border-UNCOMMON { border-color: #1eff00; }
.q-border-RARE { border-color: #0070dd; } .q-border-EPIC { border-color: #a335ee; } .q-border-LEGENDARY { border-color: #ff8000; }

.doll-center { display: flex; flex-direction: column; gap: 1rem; }
.doll-render { background: radial-gradient(ellipse at 50% 40%, rgba(255,120,40,.18), transparent 70%), var(--panel); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-height: 220px; display: grid; place-items: center; }
.doll-render img { width: 100%; display: block; }
.render-placeholder { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; font-size: 3.4rem; font-weight: 800; font-family: Georgia, serif; color: #140c08; opacity: .85; }
.stats { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.stats:empty { display: none; }
.stats h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-family: inherit; margin-bottom: .5rem; }
.stat { display: flex; justify-content: space-between; padding: .22rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.stat:last-child { border-bottom: 0; }
.stat span { color: #cfc6bd; }

@media (max-width: 900px) {
  .paperdoll { grid-template-columns: 1fr 1fr; grid-template-areas: "center center" "left right" "bottom bottom"; }
  .doll-center { flex-direction: row; } .doll-render, .stats { flex: 1; }
}
@media (max-width: 600px) {
  .paperdoll { grid-template-columns: 1fr; grid-template-areas: "center" "left" "right" "bottom"; }
  .doll-center { flex-direction: column; }
  .slots.bottom { grid-template-columns: 1fr; }
  .char-title h1 { font-size: 1.7rem; }
}

/* "Coming soon" feature preview */
.feature-soon {
  position: relative; background: linear-gradient(135deg, rgba(180,76,255,.10), rgba(255,120,40,.07)), var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem;
}
.feature-soon h3 { font-size: 1.4rem; color: var(--gold); margin: .5rem 0 .3rem; }
.soon-badge {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #e2c6ff; background: rgba(180,76,255,.18); border: 1px solid rgba(180,76,255,.45); padding: .2rem .6rem; border-radius: 99px;
}
.soon-steps { list-style: none; counter-reset: step; padding: 0; margin: 1.1rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.soon-steps li { counter-increment: step; background: rgba(0,0,0,.25); border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1rem .9rem 3.2rem; position: relative; }
.soon-steps li::before {
  content: counter(step); position: absolute; left: .9rem; top: .85rem; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; color: #1c0a04; background: linear-gradient(180deg, var(--gold), var(--gold-dark));
}
.soon-steps b { display: block; margin-bottom: .15rem; }
.soon-steps span { color: #cfc6bd; font-size: .9rem; }
@media (max-width: 760px) { .soon-steps { grid-template-columns: 1fr; } }

/* ===== Raid schedule with groups ===== */
.test-banner { background: rgba(255,165,58,.08); border: 1px dashed rgba(255,165,58,.5); color: #f3d3a8; padding: .6rem .9rem; border-radius: 8px; margin: 0 0 .9rem; font-size: .92rem; }
.test-badge { font-size: .65rem; font-weight: 800; letter-spacing: .12em; color: #1c0a04; background: var(--gold); padding: .1rem .45rem; border-radius: 4px; }
.raid-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .8rem; overflow: hidden; }
.raid-card[open] { border-color: #4a2f2f; }
.raid-card summary { list-style: none; cursor: pointer; display: flex; gap: 1rem; align-items: center; padding: 1rem 1.2rem; flex-wrap: wrap; }
.raid-card summary::-webkit-details-marker { display: none; }
.raid-card summary:hover { background: var(--panel2); }
.rmain { flex: 1; min-width: 220px; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rmain strong { font-size: 1.15rem; }
.rnotes { flex-basis: 100%; font-size: .88rem; }
.rnotes:empty { display: none; }
.rsize { font-size: .78rem; color: var(--muted); border: 1px solid var(--line); padding: .05rem .45rem; border-radius: 4px; }
.rside { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; }
.rdate { font-weight: 700; }
.rcounts { font-size: .82rem; }
.rcounts b { color: var(--text); }
.rstatus { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .15rem .55rem; border-radius: 99px; }
.rstatus.done { background: rgba(63,199,107,.15); color: #6fe39a; border: 1px solid rgba(63,199,107,.4); }
.rstatus.open { background: rgba(180,76,255,.14); color: #d9a6ff; border: 1px solid rgba(180,76,255,.4); }
.chev { color: var(--muted); transition: transform .2s; }
.raid-card[open] .chev { transform: rotate(180deg); }
.raid-body { border-top: 1px solid var(--line); padding: 1rem 1.2rem 1.2rem; background: rgba(0,0,0,.18); }
.groups-wait { margin: 0; }
.groups-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--muted); margin-bottom: .8rem; }
.groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.group, .bench { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem; }
.group h4, .bench h4 { margin: 0 0 .4rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-family: inherit; }
.group ol, .bench ul { list-style: none; margin: 0; padding: 0; }
.bench { margin-top: .7rem; }
.bench ul { display: flex; flex-wrap: wrap; gap: .2rem 1.2rem; }
.player { display: flex; align-items: center; gap: .45rem; padding: .18rem 0; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; }
.player a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.player a:hover { border-bottom-style: solid; }
.pname { overflow: hidden; text-overflow: ellipsis; }
.ricon { width: 1.25rem; height: 1.25rem; display: inline-grid; place-items: center; border-radius: 4px; font-size: .72rem; flex-shrink: 0; }
.ricon.r-Tank, .groups-meta .r-Tank { color: #e2bf94; } .ricon.r-Tank { background: rgba(198,155,109,.18); }
.ricon.r-Healer, .groups-meta .r-Healer { color: #6fe39a; } .ricon.r-Healer { background: rgba(63,199,107,.16); }
.ricon.r-DPS, .groups-meta .r-DPS { color: #ff7b8b; } .ricon.r-DPS { background: rgba(200,30,50,.2); }
.late { font-size: .65rem; font-weight: 700; color: #f3d3a8; background: rgba(255,165,58,.15); padding: 0 .3rem; border-radius: 3px; }
@media (max-width: 900px) { .groups { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .groups { grid-template-columns: 1fr 1fr; gap: .5rem; }
  .player { font-size: .82rem; }
  .rside { align-items: flex-start; text-align: left; }
  .raid-card summary { padding: .9rem; }
  .chev { display: none; }
}

.soon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.2rem; margin-top: .4rem; }
#nextRaidName a { color: inherit; text-decoration: none; }
#nextRaidName a:hover { color: var(--gold); }
.page-sub + .raid-list { margin-top: 1.2rem; }
.empty-raids { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; }
.empty-raids h3 { color: var(--gold); margin-bottom: .3rem; }

.signup-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; }
.signup-cta .groups-wait { flex: 1; min-width: 220px; }

/* Raid extras: deadline, links, coverage, requirements, player tags */
.raid-info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: .9rem; }
.rinfo { font-size: .88rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.rinfo b { color: var(--text); }
.rlinks { display: flex; gap: .5rem; flex-wrap: wrap; }
.coverage { display: inline-flex; gap: .45rem; flex-wrap: wrap; }
.cov { font-size: .8rem; font-weight: 700; padding: .12rem .5rem; border-radius: 99px; border: 1px solid var(--line); }
.cov.ok { border-color: rgba(63,199,107,.45); }
.cov.close { border-color: rgba(255,165,58,.6); }
.cov.low { border-color: rgba(200,30,50,.7); background: rgba(200,30,50,.12); }
.rstatus.closed { background: rgba(255,165,58,.12); color: #f3d3a8; border: 1px solid rgba(255,165,58,.4); }
.ptag { font-size: .62rem; font-weight: 700; padding: 0 .3rem; border-radius: 3px; text-transform: lowercase; }
.ptag.late { color: #f3d3a8; background: rgba(255,165,58,.15); }
.ptag.early { color: #ffb3bd; background: rgba(200,30,50,.18); }
.ptag.alt { color: #cfc6bd; background: rgba(255,255,255,.08); }
.bench-note { text-transform: none; letter-spacing: 0; color: #6fe39a; font-weight: 600; }
.reqs { margin-top: .9rem; }
.reqs h4 { margin: 0 0 .35rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-family: inherit; }
.reqs ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; }
.reqs li { font-size: .85rem; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: .2rem .6rem; }
.reqs li::before { content: "✔ "; color: var(--gold); }

.soon-badge.live { color: #6fe39a; background: rgba(63,199,107,.15); border-color: rgba(63,199,107,.45); }
.how-raids .soon-steps b { display: inline; }
.how-raids .soon-steps li > b:first-child { display: block; }

.recruit-intro { font-size: 1.02rem; color: #e6dcd2; margin-top: 0; }
.recruit-status { background: rgba(200,30,50,.12); border: 1px solid rgba(200,30,50,.45); color: #ffb3bd; padding: .6rem .8rem; border-radius: 8px; margin-top: 0; }