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

@font-face{font-family:"Yeseva";src:url(aa-yeseva-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Mulish";src:url(aa-mulish-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Mulish";src:url(aa-mulish-600.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --void:#06131a;--deep:#0a1e28;--panel:#102730;--raise:#173540;--line:#1f4551;
  --teal:#35c0c8;--teal-hi:#7fe6ea;--gold:#e0b25c;--gold-hi:#f3d493;--gold-deep:#a97e33;
  --sand:#ece1cb;--muted:#8fa9ac;
  --display:"Yeseva",Georgia,serif;--body:"Mulish","Segoe UI",system-ui,sans-serif;--maxw:1180px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--sand);font-family:var(--body);line-height:1.62;-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(--body);font-weight:600;text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;color:var(--teal-hi)}

.gamebar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:26px;padding:12px 28px;background:linear-gradient(180deg,rgba(5,14,20,.96),rgba(5,14,20,.66));backdrop-filter:blur(8px);border-bottom:1px solid rgba(53,192,200,.24);font-family:var(--body);font-weight:600;letter-spacing:.14em;font-size:.8rem;text-transform:uppercase}
.gamebar .brand{display:flex;align-items:center;gap:11px;color:var(--gold-hi);letter-spacing:.18em}
.gamebar .brand .mark{width:26px;height:26px;border:1.5px solid var(--teal);border-radius:50%;display:grid;place-items:center;font-family:var(--display);font-size:.72rem;color:var(--teal-hi)}
.gamebar nav{display:flex;gap:22px;color:var(--muted)}.gamebar nav a:hover{color:var(--sand)}
.gamebar .spacer{flex:1}.gamebar .live{display:flex;align-items:center;gap:8px;color:var(--muted);letter-spacing:.08em}
.dot{width:8px;height:8px;border-radius:50%;background:#5fd08a;box-shadow:0 0 10px #5fd08a}.dot.t{background:var(--teal);box-shadow:0 0 10px var(--teal)}
@media(max-width:760px){.gamebar nav{display:none}}

.hero{position:relative;min-height:94vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate}
.hero__art{position:absolute;inset:0;z-index:-3;background-image:url(aa_hero.jpg);background-size:cover;background-position:center 40%;transform:scale(1.05);animation:sail 40s ease-in-out infinite alternate}
@keyframes sail{from{transform:scale(1.05) translateX(-1%)}to{transform:scale(1.12) translateX(1.2%)}}
.hero__scrim{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(5,14,20,.82) 0%,rgba(5,14,20,.4) 38%,rgba(5,14,20,0) 70%),linear-gradient(180deg,rgba(5,14,20,.4) 0%,rgba(5,14,20,0) 26%,rgba(5,14,20,.12) 52%,rgba(5,14,20,.88) 90%,var(--void) 100%)}
#sea{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero__inner{padding:0 0 66px;max-width:640px}
.hero .kick{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.hero .kick .ln{width:32px;height:1px;background:var(--gold)}
.hero h1{font-family:var(--display);font-size:clamp(3.2rem,9vw,6.6rem);line-height:.98;margin:0;color:#fff;letter-spacing:.01em;text-shadow:0 2px 30px rgba(0,0,0,.7);text-wrap:balance}
.hero h1 span{display:block;font-family:var(--body);font-weight:600;font-size:clamp(1rem,2.3vw,1.5rem);letter-spacing:.24em;color:var(--gold-hi);margin-top:18px;text-transform:uppercase}
.hero .lede{max-width:50ch;margin:22px 0 0;font-size:1.14rem;color:#e4ddc9;text-shadow:0 1px 12px rgba(0,0,0,.7)}
.pillrow{display:flex;flex-wrap:wrap;gap:11px;margin-top:26px}
.pill{display:flex;align-items:center;gap:9px;padding:9px 15px;border:1px solid rgba(53,192,200,.4);border-radius:40px;background:rgba(8,18,24,.6);backdrop-filter:blur(4px);font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.1em;font-size:.74rem}
.pill b{color:var(--teal-hi)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.btn{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.13em;font-size:.86rem;padding:14px 30px;border-radius:40px;cursor:pointer;border:1px solid transparent;transition:.2s}
.btn-primary{background:linear-gradient(120deg,var(--gold-hi),var(--gold-deep));color:#1a1206;box-shadow:0 6px 24px rgba(224,178,92,.28)}
.btn-primary:hover{filter:brightness(1.07);transform:translateY(-2px)}
.btn-ghost{background:rgba(8,18,24,.5);border-color:rgba(127,230,234,.45);color:var(--sand)}
.btn-ghost:hover{border-color:var(--teal-hi);color:#fff;box-shadow:0 0 20px rgba(53,192,200,.28)}
.btn:focus-visible{outline:2px solid var(--teal-hi);outline-offset:3px}

.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,var(--deep),var(--void))}
.stats{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:32px 18px;text-align:center;border-right:1px solid rgba(31,69,81,.6)}.stat:last-child{border-right:0}
.stat .n{font-family:var(--display);font-size:2.2rem;color:var(--gold-hi);line-height:1;font-variant-numeric:tabular-nums}
.stat .l{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.18em;font-size:.7rem;color:var(--muted);margin-top:12px}
@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(--display);font-size:clamp(2rem,4.5vw,3rem);margin:14px 0 0;color:#fff;letter-spacing:.01em;text-wrap:balance}
.sec-head p{color:var(--muted);max-width:60ch;margin:15px auto 0}

.join{background:linear-gradient(180deg,var(--void),var(--deep))}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:stretch}@media(max-width:860px){.duo{grid-template-columns:1fr}}
.panel{background:linear-gradient(180deg,rgba(23,53,64,.75),rgba(12,30,38,.9));border:1px solid var(--line);border-radius:14px;padding:36px;position:relative;overflow:hidden}
.panel::before{content:"";position:absolute;inset:0;background:radial-gradient(110% 70% at 100% 0%,rgba(53,192,200,.12),transparent 60%);pointer-events:none}
.panel h3{font-family:var(--display);font-size:1.55rem;margin:0 0 6px;color:var(--gold-hi)}
.panel .sub{color:var(--muted);font-size:.95rem;margin-bottom:22px}
.panel .disc{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-top:1px solid rgba(31,69,81,.5)}
.panel .disc:first-of-type{border-top:0}
.panel .disc .ico{flex:none;width:40px;height:40px;border-radius:10px;background:rgba(53,192,200,.1);border:1px solid var(--teal);display:grid;place-items:center;color:var(--teal-hi);font-family:var(--display);font-size:1.1rem}
.panel .disc b{color:var(--sand);font-family:var(--display);font-size:1.05rem}
.panel .disc p{margin:3px 0 0;color:var(--muted);font-size:.92rem}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:17px;padding:15px 0;border-bottom:1px solid rgba(31,69,81,.5)}.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);flex:none;width:38px;height:38px;border-radius:50%;border:1px solid var(--gold-deep);display:grid;place-items:center;font-family:var(--display);color:var(--gold-hi);font-size:1rem}
.steps b{color:var(--sand);font-family:var(--display);font-size:1.05rem}
.steps code{font-family:"Cascadia Mono",Consolas,monospace;color:var(--teal-hi);background:rgba(6,15,20,.7);padding:2px 7px;border-radius:5px;font-size:.85em;border:1px solid var(--line)}
.steps p{margin:4px 0 0;color:var(--muted);font-size:.92rem}

.life{position:relative}
.lgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}@media(max-width:720px){.lgrid{grid-template-columns:1fr}}
.lcard{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line)}
.lcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .55s}
.lcard:hover img{transform:scale(1.06)}
.lcard .g{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,14,20,.05) 30%,rgba(5,14,20,.6) 62%,rgba(5,14,20,.95))}
.lcard .cap{position:absolute;left:0;right:0;bottom:0;padding:24px}
.lcard .cap h4{font-family:var(--display);font-size:1.5rem;margin:0;color:#fff;letter-spacing:.02em}
.lcard .cap p{margin:6px 0 0;color:#d6dcda;font-size:.95rem;max-width:42ch}
.lcard .cap .t{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.16em;font-size:.64rem;color:var(--teal-hi);margin-bottom:6px}

.newswrap{max-width:820px;margin:0 auto}
.news{display:flex;gap:24px;padding:26px;background:linear-gradient(180deg,rgba(23,53,64,.55),rgba(12,30,38,.7));border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:12px}
.news time{font-family:var(--body);font-weight:600;text-transform:uppercase;letter-spacing:.15em;font-size:.72rem;color:var(--teal-hi);white-space:nowrap;padding-top:5px}
.news h4{font-family:var(--display);font-size:1.3rem;margin:0 0 8px;color:var(--sand)}
.news p{margin:0;color:var(--muted)}

footer{border-top:1px solid var(--line);background:var(--deep);padding:44px 0;text-align:center}
footer .tag{font-family:var(--display);color:var(--gold-hi);font-size:1.15rem;letter-spacing:.03em}
footer .fine{color:var(--muted);font-size:.82rem;margin-top:12px;font-family:var(--body);font-weight:600;letter-spacing:.08em;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}.lcard img{transition:none}}

/* ---- palette aliases: maps this game's vars onto the shared component layer ---- */
:root{--t:var(--sand);--ac:var(--gold);--ac2:var(--gold-hi);--b1:var(--gold-hi);--b2:var(--gold-deep);--bfg:#1a1206;--pnl:var(--panel);--rz:var(--raise);--ln:var(--line);--mu:var(--muted);--bg:var(--void);--fd:var(--display);--fu:var(--body);--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. */