/* ============ Forest WoW - theme ============ */
:root{
  --bg:#06070b;
  --panel:rgba(22,12,16,.86);
  --panel2:rgba(40,16,22,.9);
  --edge:rgba(214,160,72,.28);
  --edge2:rgba(214,160,72,.12);
  --text:#efe6d6; --muted:#a99c8c;
  --gold:#f2c66b; --gold2:#b5832c;
  --fel:#7dff5a; --void:#c46bff; --red:#ff5b4a;
  --alliance:#3f8cff; --horde:#e0352b; --panelc:#78181e; --donate:#d9342b; --dim:.45;
  --radius:12px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.6 Inter,"Segoe UI",system-ui,sans-serif;min-height:100vh}
a{color:var(--gold);text-decoration:none} a:hover{color:#ffe1a0}
code{background:rgba(0,0,0,.45);border:1px solid var(--edge2);padding:1px 6px;border-radius:6px;color:var(--fel);font-size:13px;word-break:break-all}
.muted{color:var(--muted)} .small{font-size:12px} .r{text-align:right} .gold{color:var(--gold);font-weight:600}
.txt-on{color:var(--fel)} .txt-off{color:var(--red)}

/* ---------- background scene ---------- */
.scene{position:fixed;inset:0;z-index:-2;overflow:hidden;background:#070c06}
.scene img{width:100%;height:100%;object-fit:cover;display:block;opacity:.95}
/* blurred copy fills the sides on wide screens so the art never looks stretched */
.scene-fill{position:absolute;inset:-60px;background:center top/cover no-repeat;filter:blur(38px) saturate(1.25) brightness(.55);transform:scale(1.08)}
/* sharp art: full viewport height, centered, edges melted into the blurred fill */
.scene-art{position:absolute;top:0;bottom:0;left:50%;width:calc(100vh * 1.4);min-width:100%;transform:translateX(-50%);
  background:center top/cover no-repeat;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 14%,#000 86%,transparent 100%);
  filter:brightness(calc(1.45 - var(--dim)));animation:breathe 26s ease-in-out infinite alternate}
@media (min-aspect-ratio:7/5){.scene-art{min-width:0}}
@keyframes breathe{from{transform:translateX(-50%) scale(1)}to{transform:translateX(-50%) scale(1.045)}}
.scene-shade{position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 30%,transparent 0,rgba(4,8,4,.25) 60%,rgba(4,6,4,.75) 100%),
    linear-gradient(180deg,rgba(4,6,4,0) 0,rgba(4,6,4,.05) 35%,rgba(5,7,6,.72) 62%,rgba(5,6,8,.94) 100%)}
.no-art .scene-shade{background:radial-gradient(ellipse at 50% 30%,transparent 0,rgba(6,7,11,.35) 55%,rgba(6,7,11,.92) 100%),
             linear-gradient(180deg,rgba(6,7,11,.1) 0,rgba(6,7,11,.55) 60%,rgba(6,7,11,.95) 100%)}
@media (prefers-reduced-motion:reduce){.scene-art{animation:none}}
.embers{position:absolute;inset:0;z-index:1;pointer-events:none;
  background-image:radial-gradient(2px 2px at 20% 80%,rgba(125,255,90,.8),transparent 60%),
                   radial-gradient(2px 2px at 70% 70%,rgba(196,107,255,.8),transparent 60%),
                   radial-gradient(1.5px 1.5px at 40% 90%,rgba(125,255,90,.7),transparent 60%),
                   radial-gradient(1.5px 1.5px at 85% 85%,rgba(196,107,255,.7),transparent 60%);
  animation:rise 14s linear infinite;opacity:.7}
@keyframes rise{from{transform:translateY(0)}to{transform:translateY(-40%)}}
@media (prefers-reduced-motion:reduce){.embers{animation:none}}

.shell{max-width:1320px;margin:0 auto;padding:0 16px}

/* ---------- top bar ---------- */
.topbar{position:sticky;top:0;z-index:20;background:linear-gradient(180deg,rgba(10,6,8,.95),rgba(10,6,8,.8));
  border-bottom:1px solid var(--edge);backdrop-filter:blur(8px);box-shadow:0 2px 20px rgba(0,0,0,.6)}
.topbar-in{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.status-mini{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.status-mini b{color:var(--text)}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--muted)}
.on .dot{background:var(--fel);box-shadow:0 0 10px var(--fel)} .off .dot{background:var(--red)}
.topbar-actions{display:flex;align-items:center;gap:10px}
.tb-link{color:var(--muted);font-size:13px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 16px;border-radius:9px;font:600 13px Inter,sans-serif;
  cursor:pointer;border:1px solid transparent;transition:transform .12s,filter .12s;white-space:nowrap}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn-gold{color:#1d1405;background:linear-gradient(180deg,#ffe39a,var(--gold) 45%,var(--gold2));box-shadow:0 6px 20px rgba(242,198,107,.2)}
.btn-ghost{color:var(--text);background:rgba(255,255,255,.04);border-color:var(--edge)}
.btn-donate{color:#fff;background:linear-gradient(180deg,color-mix(in srgb,var(--donate) 60%,#fff),var(--donate) 55%,color-mix(in srgb,var(--donate) 65%,#000));box-shadow:0 6px 20px color-mix(in srgb,var(--donate) 35%,transparent)}
.btn.wide{width:100%;padding:12px} .btn.big{padding:14px 30px;font-size:16px} .btn.sm{padding:5px 12px;font-size:12px}
button.btn{font-family:Inter,sans-serif}

/* ---------- masthead ---------- */
.masthead{text-align:center;padding:46px 16px 30px}
/* with the wallpaper: tall masthead so Illidan's face and horns stay visible above the content */
.has-art .masthead{min-height:clamp(300px,58vh,640px);display:flex;align-items:flex-end;justify-content:center;padding:24px 16px 26px}
.has-art .logo{padding:14px 34px 10px;border-radius:18px;background:radial-gradient(ellipse at center,rgba(4,8,4,.72),rgba(4,8,4,.35) 60%,transparent 75%)}
@media (max-width:760px){.has-art .masthead{min-height:44vh}}
.logo{display:inline-flex;flex-direction:column;align-items:center;gap:4px}
.logo-main{font-family:"Cinzel Decorative",Cinzel,serif;font-weight:900;font-size:clamp(40px,7vw,82px);line-height:1;letter-spacing:1px;
  background:linear-gradient(180deg,#fff7d6 0%,#f7d27a 35%,#c98d2e 70%,#7a4a12 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.8)) drop-shadow(0 0 22px rgba(125,255,90,.35))}
.logo-sub{font-family:Cinzel,serif;font-size:clamp(12px,1.6vw,16px);letter-spacing:4px;text-transform:uppercase;color:var(--fel);
  text-shadow:0 0 12px rgba(125,255,90,.6)}

/* ---------- 3-column layout ---------- */
.layout{display:grid;grid-template-columns:210px minmax(0,1fr) 290px;gap:18px;align-items:start}
@media (max-width:1100px){.layout{grid-template-columns:200px minmax(0,1fr)} .side.right{grid-column:1 / -1;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}}
@media (max-width:760px){
  .layout{grid-template-columns:1fr}
  .side.left{flex-direction:row;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid var(--edge);border-radius:var(--radius);background:var(--panel)}
  .side.left .nav-group{display:contents}
  .side.left .panel-h{display:none}
  .side.left ul{display:contents}
  .side.left li{list-style:none}
  .side.left .nav-group a{border:1px solid var(--edge2);background:rgba(0,0,0,.3);padding:6px 11px}
}
.side{display:flex;flex-direction:column;gap:14px}
.content{display:flex;flex-direction:column;gap:18px;min-width:0}

/* ---------- panels ---------- */
.panel{background:linear-gradient(180deg,var(--panel2),var(--panel));border:1px solid var(--edge);border-radius:var(--radius);
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,150,.06);overflow:hidden;backdrop-filter:blur(4px)}
.panel-h{font-family:Cinzel,serif;font-weight:700;letter-spacing:.6px;color:var(--gold);padding:11px 16px;font-size:15px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--panelc) 78%,transparent),color-mix(in srgb,var(--panelc) 35%,transparent) 60%,transparent);border-bottom:1px solid var(--edge)}
.panel-h.center{text-align:center;font-size:18px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--panelc) 78%,transparent),transparent)}
.panel-b{padding:16px}
.prose p{margin:0 0 10px} .prose p:last-child{margin-bottom:0}
.center-text{text-align:center}

/* nav */
.nav-group ul{list-style:none;margin:0;padding:6px}
.nav-group a{display:block;padding:7px 10px;border-radius:7px;color:#e6d2a8;font-size:13px;transition:background .12s}
.nav-group a:hover{background:rgba(242,198,107,.08)}
.nav-group a.active{background:linear-gradient(90deg,rgba(125,255,90,.16),transparent);color:#fff;box-shadow:inset 3px 0 0 var(--fel)}

/* server info */
.info div{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed var(--edge2)}
.info div:last-child{border-bottom:0}
.info span{color:var(--muted)} .info b{text-align:right} .info small{color:var(--muted);font-weight:400}
.info .factionbar{display:flex;padding:0;margin:8px 0;height:22px;border-radius:6px;overflow:hidden;border:1px solid var(--edge2);font-size:11px;font-weight:700}
.fb-a,.fb-h{display:flex;align-items:center;padding:0 8px;min-width:28px}
.fb-a{background:linear-gradient(90deg,#163a7a,var(--alliance))} .fb-h{background:linear-gradient(90deg,var(--horde),#7a1612);justify-content:flex-end}

/* mini ranking */
.mini-rank{list-style:none;margin:0;padding:0}
.mini-rank li{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px dashed var(--edge2)}
.mini-rank li b{margin-left:auto;color:var(--gold)}
.rk{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;background:rgba(242,198,107,.12);color:var(--gold)}
.more{display:block;text-align:right;margin-top:8px;font-size:12px}
.donate-card{background:linear-gradient(160deg,color-mix(in srgb,var(--panelc) 85%,transparent),rgba(20,10,12,.92))}
.dc-title{font-family:Cinzel,serif;color:var(--gold);font-size:17px;margin-bottom:6px}
.donate-card p{color:#e4cfc6;margin:0 0 12px;font-size:13px}

/* faction badge + class colors */
.fac{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;font-size:10px;font-weight:800;color:#fff;flex:0 0 18px}
.fac.alliance{background:var(--alliance)} .fac.horde{background:var(--horde)}
.cls{font-weight:600}
.c-warrior{color:#c79c6e}.c-paladin{color:#f58cba}.c-hunter{color:#abd473}.c-rogue{color:#fff569}.c-priest{color:#ffffff}
.c-shaman{color:#0070de}.c-mage{color:#69ccf0}.c-warlock{color:#9482c9}.c-druid{color:#ff7d0a}

/* ---------- home ---------- */
.hero-card{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--edge);min-height:320px;display:flex;align-items:flex-end;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
.hero-art{position:absolute;inset:0}
.hero-art img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transform-origin:50% 45%}
.hero-art.photo img{transform:scale(1.35);transform-origin:88% 58%;object-position:88% 58%}
.hero-art.photo::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(8,4,8,.85) 0,rgba(8,4,8,.45) 45%,transparent 75%)}
.hero-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(8,4,8,.92))}
.hero-text{position:relative;z-index:1;padding:26px;max-width:560px}
.eyebrow{margin:0;text-transform:uppercase;letter-spacing:3px;font-size:11px;color:var(--fel)}
.hero-text h1{font-family:Cinzel,serif;font-size:clamp(26px,4vw,40px);margin:4px 0 6px;color:#fff3cf;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.hero-text p{margin:0;color:#e2d6c4}
.hero-cta{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.banner{text-align:center;font-family:Cinzel,serif;font-size:18px;font-weight:700;padding:14px;border-radius:var(--radius);
  background:linear-gradient(90deg,color-mix(in srgb,var(--panelc) 50%,transparent),color-mix(in srgb,var(--panelc) 92%,transparent),color-mix(in srgb,var(--panelc) 50%,transparent));border:1px solid var(--edge)}
.banner .dot{margin-right:6px;vertical-align:middle}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:900px){.features{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.features{grid-template-columns:1fr}}
.feat{background:var(--panel);border:1px solid var(--edge2);border-radius:var(--radius);padding:14px 16px;display:flex;flex-direction:column}
.feat i{font-style:normal;font-size:20px;color:var(--fel);text-shadow:0 0 10px rgba(125,255,90,.5)}
.feat b{font-family:Cinzel,serif;color:var(--gold);font-size:15px}
.feat span{color:var(--muted);font-size:13px}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px}
.chip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:rgba(0,0,0,.25);border:1px solid var(--edge2);border-radius:9px;padding:8px 10px}
.chip small{color:var(--muted);width:100%;padding-left:26px;margin-top:-4px}

/* steps */
.steps{list-style:none;margin:0;padding:0}
.steps li{display:flex;gap:14px;margin-bottom:14px}
.steps li>span{flex:0 0 30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#1d1405;
  background:linear-gradient(180deg,#ffe39a,var(--gold2))}
.steps li>div{min-width:0}
.steps.big li>div>b:first-child{display:block;color:#fff;font-size:15px}
.copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.copy code{padding:7px 10px}

/* forms */
.reg-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:20px}
@media (max-width:700px){.reg-grid{grid-template-columns:1fr}}
.form label{display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:6px;padding:11px 12px;border-radius:9px;border:1px solid var(--edge);
  background:rgba(0,0,0,.45);color:var(--text);font:14px Inter,sans-serif;text-transform:none;letter-spacing:0}
.form input:focus,.form select:focus{outline:none;border-color:var(--fel);box-shadow:0 0 0 3px rgba(125,255,90,.12)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:460px){.two{grid-template-columns:1fr}}
.reg-side{background:rgba(0,0,0,.25);border:1px solid var(--edge2);border-radius:var(--radius);padding:16px}
.reg-side h3{font-family:Cinzel,serif;color:var(--gold);margin:0 0 10px;font-size:16px}
.ticks{margin:0;padding:0;list-style:none}
.ticks li{padding-left:22px;position:relative;margin-bottom:8px;color:#dccfbd;font-size:13px}
.ticks li::before{content:"\2726";position:absolute;left:0;color:var(--fel)}
.msg{padding:10px 12px;border-radius:9px;margin-bottom:12px;font-size:13px}
.msg.ok{background:rgba(125,255,90,.1);border:1px solid rgba(125,255,90,.45)}
.msg.err{background:rgba(255,91,74,.1);border:1px solid rgba(255,91,74,.45)}
.msg.info{background:rgba(242,198,107,.08);border:1px solid var(--edge)}
.hp{position:absolute;left:-9999px;width:1px;height:1px}

/* tables + tabs */
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.tabs a{padding:7px 12px;border-radius:8px;border:1px solid var(--edge2);color:#e6d2a8;font-size:13px;background:rgba(0,0,0,.25)}
.tabs a.active{background:linear-gradient(180deg,rgba(125,255,90,.22),rgba(125,255,90,.06));border-color:rgba(125,255,90,.5);color:#fff}
.table-wrap{overflow-x:auto;border-radius:10px;border:1px solid var(--edge2)}
.tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.tbl th{text-align:left;font-weight:600;color:var(--gold);background:rgba(0,0,0,.35);padding:9px 10px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.tbl td{padding:8px 10px;border-top:1px solid var(--edge2)}
.tbl tbody tr:hover{background:rgba(242,198,107,.05)}
.tbl .rank{font-weight:800;color:var(--muted);width:36px}
.tbl tr.top1 .rank{color:#ffd700} .tbl tr.top2 .rank{color:#d9d9d9} .tbl tr.top3 .rank{color:#d08a4a}
.empty{text-align:center;color:var(--muted);padding:26px 0;margin:0}
.donate-heart{font-size:54px;color:#ff5b4a;margin:0;text-shadow:0 0 24px rgba(255,91,74,.6)}

.foot{text-align:center;color:var(--muted);font-size:12px;padding:30px 16px 40px}
@media (max-width:560px){.topbar-actions .btn-ghost{display:none}}

/* news */
.news article{padding:12px 0;border-bottom:1px dashed var(--edge2)}
.news article:first-child{padding-top:0} .news article:last-child{border-bottom:0;padding-bottom:0}
.news-h{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:6px}
.news-h b{font-family:Cinzel,serif;color:var(--gold);font-size:16px}
.news-h time{color:var(--muted);font-size:12px;white-space:nowrap}
.hero-text p{margin:0}