/* bdo - Deadly Crusaders. Redesign theme + live component layer.
   Section 1 is the mockup stylesheet from dc-redesigns/bdo.
   Section 2 styles the pages the mockup did not cover. */

@font-face{font-family:"Cinzel";src:url(cinzel-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cinzel";src:url(cinzel-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Cinzel";src:url(cinzel-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(rajdhani-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Rajdhani";src:url(rajdhani-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --void:#0a0806;--obsidian:#100d09;--ink:#181310;--raise:#20180f;--line:#3a2c1a;
  --gold:#c8a24a;--gold-hi:#e8c86a;--gold-deep:#8c6a2c;--bone:#ece4d0;--muted:#9a8c72;--ember:#b5533a;--online:#7fbf6a;
  --serif:"Cinzel",Georgia,serif;--ui:"Rajdhani","Segoe UI",system-ui,sans-serif;--body:"Segoe UI",-apple-system,system-ui,Arial,sans-serif;--maxw:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--bone);font-family:var(--body);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:var(--ui);text-transform:uppercase;letter-spacing:.34em;font-weight:600;font-size:.72rem;color:var(--gold)}
.rule{height:1px;border:0;background:linear-gradient(90deg,transparent,var(--gold-deep),var(--gold),var(--gold-deep),transparent);opacity:.6}

.gamebar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:26px;padding:12px 28px;background:linear-gradient(180deg,rgba(8,6,4,.96),rgba(8,6,4,.72));backdrop-filter:blur(8px);border-bottom:1px solid rgba(200,162,74,.22);font-family:var(--ui);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;font-weight:600}
.gamebar .brand{display:flex;align-items:center;gap:11px;color:var(--gold-hi);letter-spacing:.2em}
.gamebar .brand .mark{width:26px;height:26px;border:1.5px solid var(--gold);border-radius:50%;display:grid;place-items:center;font-family:var(--serif);font-size:.8rem;color:var(--gold-hi)}
.gamebar nav{display:flex;gap:22px;color:var(--muted)}.gamebar nav a:hover{color:var(--bone)}
.gamebar .spacer{flex:1}.gamebar .live{display:flex;align-items:center;gap:8px;color:var(--muted);letter-spacing:.1em}
.dot{width:8px;height:8px;border-radius:50%;background:var(--online);box-shadow:0 0 10px var(--online)}
@media(max-width:760px){.gamebar nav{display:none}}

.hero{position:relative;min-height:94vh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;isolation:isolate}
.hero__art{position:absolute;inset:0;z-index:-3;background-image:url(bdo_hero.jpg);background-size:cover;background-position:center 35%;transform:scale(1.06);animation:drift 36s ease-in-out infinite alternate}
@keyframes drift{from{transform:scale(1.06) translate(-1%,0)}to{transform:scale(1.13) translate(1.5%,1%)}}
.hero__scrim{position:absolute;inset:0;z-index:-2;background:radial-gradient(120% 90% at 62% 30%,rgba(10,8,6,0) 32%,rgba(10,8,6,.5) 80%),linear-gradient(180deg,rgba(8,6,4,.55) 0%,rgba(8,6,4,0) 30%,rgba(8,6,4,.15) 55%,rgba(8,6,4,.9) 90%,var(--void) 100%)}
#embers{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__inner{padding:0 0 66px}
.hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:22px}
.hero__eyebrow .sep{width:34px;height:1px;background:var(--gold)}
.hero__logo{width:min(500px,74vw);height:auto;filter:drop-shadow(0 3px 24px rgba(0,0,0,.7))}
.hero .season{font-family:var(--serif);font-weight:500;font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.42em;color:var(--gold-hi);margin:22px 0 0;text-shadow:0 1px 18px rgba(0,0,0,.7)}
.hero p.lede{max-width:52ch;margin:22px 0 0;font-size:1.12rem;color:#e6ddc9;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.pillrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.pill{display:flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid rgba(200,162,74,.4);border-radius:2px;background:rgba(12,9,6,.6);backdrop-filter:blur(4px);font-family:var(--ui);text-transform:uppercase;letter-spacing:.13em;font-size:.78rem;font-weight:600}
.pill b{color:var(--gold-hi);font-family:var(--serif);letter-spacing:.02em}
.cta-row{display:flex;flex-wrap:wrap;gap:16px;margin-top:32px}
.btn{font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:.9rem;padding:15px 30px;border-radius:2px;cursor:pointer;border:1px solid transparent;transition:.22s}
.btn-primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));color:#1a1206;border-color:var(--gold-hi);box-shadow:0 6px 26px rgba(200,162,74,.28)}
.btn-primary:hover{filter:brightness(1.09);transform:translateY(-2px)}
.btn-ghost{background:rgba(12,9,6,.5);border-color:rgba(200,162,74,.45);color:var(--bone)}
.btn-ghost:hover{border-color:var(--gold-hi);color:#fff;background:rgba(30,22,12,.6)}
.btn:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}

.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--obsidian),var(--void))}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:34px 20px;text-align:center;border-right:1px solid rgba(58,44,26,.5)}
.stat:last-child{border-right:0}
.stat .n{font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--gold-hi);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--ui);text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--muted);margin-top:12px;font-weight:600}
@media(max-width:680px){.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}}

section{padding:92px 0}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head h2{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,4.5vw,3rem);margin:14px 0 0;color:var(--bone);text-wrap:balance}
.sec-head p{color:var(--muted);max-width:60ch;margin:16px auto 0}

.play{background:linear-gradient(180deg,var(--void),var(--obsidian))}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
@media(max-width:860px){.duo{grid-template-columns:1fr}}
.panel{background:linear-gradient(180deg,rgba(32,24,15,.85),rgba(16,13,9,.9));border:1px solid var(--line);border-radius:3px;padding:36px;position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0%,rgba(200,162,74,.1),transparent 60%);pointer-events:none}
.panel h3{font-family:var(--serif);font-size:1.5rem;font-weight:600;margin:0 0 6px;color:var(--gold-hi)}
.panel .sub{color:var(--muted);font-size:.92rem;margin-bottom:24px}
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:7px}
.field input{width:100%;padding:13px 15px;background:rgba(8,6,4,.7);border:1px solid var(--line);border-radius:2px;color:var(--bone);font-family:var(--body);font-size:.98rem}
.field input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(200,162,74,.15)}
.field input::placeholder{color:#6b5f49}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:18px;padding:16px 0;border-bottom:1px solid rgba(58,44,26,.4)}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);flex:none;width:38px;height:38px;border:1px solid var(--gold-deep);border-radius:50%;display:grid;place-items:center;font-family:var(--serif);color:var(--gold-hi);font-size:1rem}
.steps b{color:var(--bone);font-family:var(--ui);letter-spacing:.03em}
.steps code{font-family:"Cascadia Mono",Consolas,monospace;color:var(--gold-hi);background:rgba(8,6,4,.7);padding:2px 7px;border-radius:3px;font-size:.86em;border:1px solid var(--line)}
.steps p{margin:4px 0 0;color:var(--muted);font-size:.92rem}

/* CLASS SHOWCASE */
.classes{background:var(--obsidian);border-top:1px solid var(--line)}
.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.cgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cgrid{grid-template-columns:1fr}}
.ccard{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#0b0906}
.ccard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease;filter:saturate(1.02)}
.ccard:hover img{transform:scale(1.06)}
.ccard .vig{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(8,6,4,.55) 72%,rgba(8,6,4,.96) 100%)}
.ccard .cap{position:absolute;left:0;right:0;bottom:0;padding:20px}
.ccard .cap .nm{font-family:var(--serif);font-weight:600;font-size:1.3rem;color:#fff;letter-spacing:.03em}
.ccard .cap .rl{font-family:var(--ui);text-transform:uppercase;letter-spacing:.18em;font-size:.66rem;color:var(--gold-hi);margin-top:4px;font-weight:600}
.ccard.feat{grid-column:span 1;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold-deep),0 14px 40px rgba(0,0,0,.5)}
.ccard.feat .tag{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em;font-size:.62rem;font-weight:600;color:#1a1206;background:linear-gradient(180deg,var(--gold-hi),var(--gold));padding:5px 11px;border-radius:2px}

/* WORLD BOSSES */
.bosses{position:relative;background:linear-gradient(180deg,var(--void),var(--obsidian))}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.bgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bgrid{grid-template-columns:1fr}}
.boss{position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;border:1px solid var(--line)}
.boss img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.boss:hover img{transform:scale(1.07)}
.boss .g{position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(6,5,3,.9))}
.boss .nm{position:absolute;left:0;bottom:0;padding:14px 16px;font-family:var(--serif);font-weight:600;font-size:1.05rem;color:#fff;letter-spacing:.04em}
.boss .nm span{display:block;font-family:var(--ui);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.6rem;color:var(--ember);margin-bottom:3px}

.newswrap{max-width:820px;margin:0 auto}
.news{display:flex;gap:24px;padding:26px;background:linear-gradient(180deg,rgba(24,19,13,.6),rgba(12,10,7,.7));border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:3px}
.news time{font-family:var(--ui);text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--gold);font-weight:600;white-space:nowrap;padding-top:5px}
.news h4{font-family:var(--serif);font-size:1.25rem;font-weight:600;margin:0 0 8px;color:var(--bone)}
.news p{margin:0;color:var(--muted)}

footer{border-top:1px solid var(--line);background:var(--obsidian);padding:44px 0;text-align:center}
footer .tag{font-family:var(--serif);color:var(--gold-hi);font-size:1.1rem;letter-spacing:.06em}
footer .fine{color:var(--muted);font-size:.82rem;margin-top:12px;font-family:var(--ui);letter-spacing:.1em;text-transform:uppercase}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hero__art{animation:none}.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}.ccard img,.boss img{transition:none}}

/* ---- palette aliases: maps this game's vars onto the shared component layer ---- */
:root{--t:var(--bone);--ac:var(--gold);--ac2:var(--gold-hi);--b1:var(--gold-hi);--b2:var(--gold-deep);--bfg:#1a1206;--pnl:var(--ink);--rz:var(--raise);--ln:var(--line);--mu:var(--muted);--bg:var(--void);--fd:var(--serif);--fu:var(--ui);--fb:var(--body)}

/* =====================================================================
   DC live-site component layer.

   The block above is the redesign, and it only covers the landing page.
   This block styles everything the rest of the site emits - register,
   login, account, rankings, guide, shop, vote - in the same palette, so
   the sub-pages inherit the new look without being rewritten.

   Class names here MUST match what the PHP already prints. Renaming one
   silently unstyles a page. The palette is reached through the aliases
   defined just above (--t, --ac, --pnl, ...), so this text is identical
   on all six sites and only the alias map differs.
   ===================================================================== */

/* The shared DC bar is injected by Apache and is fixed at 40px tall, so
   the per-game bar tucks under it rather than at the viewport top. */
.gamebar{top:40px}
html{scroll-padding-top:112px}

/* ---- game bar: real links, account state, active page ---- */
.gamebar a{transition:color .18s}
.gamebar nav a.on{color:var(--ac2)}
.gamebar .acct{display:flex;align-items:center;gap:16px;font-size:.78rem;letter-spacing:.1em;color:var(--mu)}
.gamebar .acct a:hover{color:var(--t)}
.gamebar .go{padding:8px 18px;border-radius:3px;color:var(--bfg);font-weight:700;
  background:linear-gradient(180deg,var(--b1),var(--b2));letter-spacing:.14em;white-space:nowrap}
.gamebar .go:hover{filter:brightness(1.1)}
.gamebar a:focus-visible,.gamebar button:focus-visible{outline:2px solid var(--ac2);outline-offset:3px}
@media(max-width:900px){.gamebar nav{display:none}}
@media(max-width:560px){.gamebar .acct .u{display:none}}

/* ---- interior page shell (everything that is not the landing page) ---- */
main.page{max-width:var(--maxw);margin:0 auto;padding:56px 28px 96px;min-height:56vh}
main.page h1{font-family:var(--fd);font-weight:600;font-size:clamp(1.85rem,4vw,2.6rem);
  line-height:1.15;margin:0 0 .35em;color:var(--t);text-wrap:balance}
main.page h2{font-family:var(--fd);font-weight:600;font-size:1.4rem;margin:0 0 .5em;color:var(--t)}
main.page h3{font-family:var(--fd);font-weight:600;font-size:1.15rem;margin:0 0 .4em;color:var(--ac2)}
main.page h4{font-family:var(--fd);font-weight:600;font-size:1rem;margin:0 0 .4em;color:var(--t)}
main.page p{color:var(--mu);margin:0 0 1em}
main.page a:not(.btn):not(.go){color:var(--ac2);border-bottom:1px solid rgba(255,255,255,.16)}
main.page a:not(.btn):not(.go):hover{border-bottom-color:currentColor}
main.page ul,main.page ol{color:var(--mu);padding-left:1.3em;margin:0 0 1.2em}
main.page li{margin:.35em 0}
main.page > form{max-width:520px}
.lede{color:var(--mu);font-size:1.05rem;max-width:62ch}
.hint{color:var(--mu);font-size:.84rem;font-weight:400;letter-spacing:0;text-transform:none}
.muted{color:var(--mu)}
code{font-family:"Cascadia Mono",Consolas,monospace;color:var(--ac2);background:rgba(0,0,0,.42);
  padding:2px 7px;border-radius:3px;font-size:.88em;border:1px solid var(--ln)}

/* ---- cards / panels: the workhorse container on every sub-page ---- */
.card,.alerts,.promo,.playbox,.searchbox{background:linear-gradient(180deg,var(--rz),var(--pnl));
  border:1px solid var(--ln);border-radius:4px;position:relative}
.card{padding:26px 28px;margin:0 0 22px}
.card::before{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.05),transparent 62%)}
.card > *{position:relative}
.card h2{font-size:.92rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);
  border-bottom:1px solid var(--ln);padding-bottom:12px;margin-bottom:18px}
.card .body{padding:0}
.card p:last-child,.card ol:last-child,.card ul:last-child{margin-bottom:0}
.card .foot{display:flex;justify-content:flex-end;margin-top:16px}
.grid{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}
@media(max-width:820px){.grid{grid-template-columns:1fr}}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:26px;align-items:start}
@media(max-width:900px){.cols{grid-template-columns:1fr}}
.rail{display:grid;gap:16px}
.playbox{padding:20px;text-align:center}
.playbox small{display:block;color:var(--mu);font-size:.76rem;margin-top:10px}
.alerts,.promo{padding:20px 22px}
.alerts h2{font-size:.86rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ac);margin:0 0 12px}
.alerts p{color:var(--mu);font-size:.9rem;margin:0 0 .7em}
.promo .label{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mu);margin-bottom:12px}

/* ---- buttons: .btn, bare <button>, and the legacy modifiers.
   Scoped to .page so the landing page keeps the redesign's own
   .btn-primary / .btn-ghost pair, which is defined above this block. ---- */
.page .btn,.page button,.page input[type=submit]{display:inline-block;cursor:pointer;text-align:center;
  font-family:var(--fu);font-size:.86rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding:13px 26px;border-radius:3px;border:1px solid transparent;transition:.2s;
  background:linear-gradient(180deg,var(--b1),var(--b2));color:var(--bfg)}
.page .btn:hover,.page button:hover,.page input[type=submit]:hover{filter:brightness(1.09);transform:translateY(-1px)}
.page .btn.ghost{background:rgba(0,0,0,.35);border-color:var(--ln);color:var(--t)}
.page .btn.ghost:hover{border-color:var(--ac);color:#fff;background:rgba(255,255,255,.05)}
.page .btn.sm{padding:9px 18px;font-size:.76rem}
.page .btn:focus-visible,.page button:focus-visible,.page a:focus-visible{outline:2px solid var(--ac2);outline-offset:3px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}

/* ---- forms ---- */
label{display:block;margin:16px 0 0;color:var(--mu);font-family:var(--fu);font-size:.72rem;
  font-weight:600;letter-spacing:.16em;text-transform:uppercase}
input,select,textarea{display:block;width:100%;margin-top:8px;padding:12px 14px;
  background:rgba(0,0,0,.45);border:1px solid var(--ln);border-radius:3px;color:var(--t);
  font:1rem var(--fb)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--ac);
  box-shadow:0 0 0 3px rgba(255,255,255,.08)}
input::placeholder{color:var(--mu);opacity:.6}
input[type=submit],button{width:auto;margin-top:22px}
form.card button,form.card input[type=submit]{width:100%}

/* ---- messages ---- */
.msg,.note{padding:12px 16px;border-radius:3px;margin:0 0 14px;font-size:.92rem;border:1px solid}
.msg-error,.note.bad{background:rgba(190,60,50,.14);border-color:rgba(220,110,95,.5);color:#f0b9ae}
.msg-ok,.note.ok{background:rgba(90,170,95,.13);border-color:rgba(130,200,135,.45);color:#bfe3c1}
.msg-info{background:rgba(255,255,255,.05);border-color:var(--ln);color:var(--mu)}

/* ---- tables: key/value blocks and ranking grids ---- */
table{width:100%;border-collapse:collapse;font-size:.93rem}
th,td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--ln);color:var(--t)}
th{color:var(--mu);font-family:var(--fu);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;font-weight:600}
table.kv td{padding:9px 0}
table.kv td:first-child{color:var(--mu);width:42%}
tr:last-child td{border-bottom:0}
.page .dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:8px;
  vertical-align:middle;background:var(--mu);box-shadow:none}
.dot.ok,.dot.up{background:#6fbf5a;box-shadow:0 0 9px rgba(111,191,90,.75)}
.dot.down{background:#c0523a;box-shadow:0 0 9px rgba(192,82,58,.75)}
.rk{display:flex;align-items:center;gap:12px}
.rk img{width:42px;height:42px;border-radius:6px;border:1px solid var(--ln);object-fit:cover}
.rk b{display:block;color:var(--t)}
.rk span{color:var(--mu);font-size:.78rem}
.rank-no{font-family:var(--fd);font-weight:700;color:var(--ac2);width:44px;text-align:center;font-size:1.05rem}
.lvl{font-weight:700;color:var(--ac2)}

/* ---- news lists used by the archeage / eq2 rails ---- */
.newslist{display:grid;gap:2px}
.newsrow{display:grid;grid-template-columns:132px minmax(0,1fr);gap:20px;padding:20px 0;
  border-bottom:1px solid var(--ln)}
.newsrow:last-child{border-bottom:0}
.newsrow h3{margin:0 0 4px;color:var(--t);font-family:var(--fd);font-size:1.12rem}
.newsrow .date,.newsrow .meta{color:var(--ac);font-family:var(--fu);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px}
.newsrow p{color:var(--mu);font-size:.93rem;margin:0}
.thumb{height:86px;border-radius:3px;border:1px solid var(--ln);
  background:linear-gradient(135deg,var(--rz),var(--bg))}
@media(max-width:600px){.newsrow{grid-template-columns:1fr}.thumb{display:none}}
.news-item{padding:16px 0;border-bottom:1px solid var(--ln)}
.news-item:last-child{border-bottom:0}
.news-item h3{margin:0 0 5px;font-family:var(--fd);color:var(--t);font-size:1.08rem}
.news-item .nmeta{color:var(--mu);font-family:var(--fu);font-size:.7rem;text-transform:uppercase;
  letter-spacing:.14em;margin-bottom:8px}
.news-item p{margin:0;color:var(--mu);font-size:.93rem;white-space:pre-wrap}
.ncat{display:inline-block;padding:2px 10px;border:1px solid var(--ac);color:var(--ac);
  border-radius:20px;font-size:.64rem;margin-right:9px;letter-spacing:.1em}

/* ---- interior-page status pills (bdo status_pills(), and friends) ---- */
.pills{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 26px}
.pills .pill{flex:1;min-width:180px;display:flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--rz),var(--pnl));border:1px solid var(--ln);
  border-radius:4px;padding:15px 18px;text-transform:none;letter-spacing:0;font-size:1rem;font-weight:400}
.pills .pill b{display:block;font-family:var(--fd);font-size:1.05rem;color:var(--t)}
.pills .pill span:not(.dot){color:var(--mu);font-size:.75rem;font-family:var(--fu);
  letter-spacing:.1em;text-transform:uppercase}

/* ---- footer link row + legal line, appended to the redesign's footer
   so the landing page and the sub-pages end the same way ---- */
.flinks{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:18px;
  font-family:var(--fu);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase}
.flinks a{color:var(--mu)}
.flinks a:hover{color:var(--ac2)}
.legal{max-width:74ch;margin:20px auto 0;color:var(--mu);opacity:.65;font-size:.74rem;line-height:1.65;
  border-top:1px solid var(--ln);padding-top:16px}

/* ---- layout safety ----
   Grid and flex children default to min-width:auto, so one unbreakable token -
   AUTHENTIC_DOMAIN=deadlycrusaders.com in the connect steps was the culprit -
   widens its column, then the whole document, and every centered .wrap below it
   shifts right and clips. Let the children shrink and let long tokens wrap. */
.duo>*,.grid>*,.cols>*,.stats>*,.cgrid>*,.bgrid>*,.zgrid>*,.agrid>*,.lgrid>*,
.fgrid>*,.fduo>*,.rail>*,.newsrow>*,.hero__grid>*{min-width:0}
.panel,.card,.news,.newsrow{overflow-wrap:break-word}
code{overflow-wrap:anywhere}

/* The BDO and ArcheAge heroes are bright-sky art, and the gold eyebrow washes out
   against them. The headline and lede already carry shadows; give the small type
   the same treatment so it stays readable over any part of the image. */
.hero .eyebrow,.hero__eyebrow .eyebrow,.kick .eyebrow{
  text-shadow:0 1px 14px rgba(0,0,0,.85),0 0 30px rgba(0,0,0,.55)}

/* ---- page backdrop ----
   The landing page is full-bleed art, but every other page (register, login,
   rankings, account, shop) sat on flat black and read as empty. This puts the
   game's key art behind the whole document, dimmed hard so panel and form text
   keeps its contrast. Black scrim rather than a palette colour, so the same
   block works unchanged on all five sites. Fixed, so it stays put on scroll. */
body{
  background-image:
    linear-gradient(180deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.72) 38%,
                    rgba(0,0,0,.86) 74%, rgba(0,0,0,.94) 100%),
    url(bg.jpg);
  background-size:auto, cover;
  background-position:center, center top;
  background-repeat:no-repeat, no-repeat;
  background-attachment:fixed, fixed;
  background-color:var(--bg);
}
/* The landing page stacks its own opaque sections over this, so the backdrop
   only shows on the interior pages - which is exactly where it was missing. */

/* ---- server rates ----
   Rates are a headline selling point, so they lead the stat band and repeat as hero
   pills. The band is auto-fit because the number of rate chips varies per game. */
.stats{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.stat.rate{position:relative;background:rgba(255,255,255,.035)}
.stat.rate::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--ac),transparent)}
.stat.rate .n{color:var(--ac2)}
.pill.rate b{color:var(--ac2)}
/* ---- BDO interior pages: compact title band under the game bar ----
   The landing page uses the full-height .hero above. Every other page
   (rankings, guide, shop, vote, downloads, account) gets this instead, so
   site_head() keeps its existing $hero argument and nothing else changes. */
.pagehead{border-bottom:1px solid var(--line);background-size:cover;background-position:center 40%}
.pagehead .in{max-width:var(--maxw);margin:0 auto;padding:60px 28px 52px}
.pagehead h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.9rem,4.4vw,2.9rem);
  margin:14px 0 0;color:#fff;letter-spacing:.04em;text-shadow:0 2px 22px rgba(0,0,0,.75)}
.pagehead .eyebrow{text-shadow:0 1px 14px rgba(0,0,0,.8)}
main.page{padding-top:44px}
main.page .pills{margin-top:-70px;position:relative;z-index:2}

/* BDO's backdrop art is darker than the other four, so the shared scrim buried
   it. Lift it here rather than in the shared block. */
body{background-image:
  linear-gradient(180deg, rgba(0,0,0,.44) 0%, rgba(0,0,0,.58) 38%,
                  rgba(0,0,0,.78) 74%, rgba(0,0,0,.90) 100%),
  url(bg.jpg)}