/* ============================================================
   Demise, redesign stylesheet
   Vanilla CSS, no build step. Lives in client/public, so every
   page links it as /demise.css and nothing imports it.
   Breakpoints: 1024, 760, 520
   ============================================================ */

:root{
  --stone-0:#08090b; --stone-1:#0b0c0f; --stone-2:#100e0b; --stone-3:#1a1712;
  --stone-4:#22201a; --panel-a:#1d1a14; --panel-b:#100e0b;
  --gold:#d9b978; --gold-bright:#ffe9b0; --gold-pale:#ffeec2; --gold-dim:#b9a06a;
  --gold-line:#55421f; --gold-line-soft:#40331c; --brass:#8a6a38;
  --ink:#3f2c11; --ink-2:#4a3517; --ink-3:#55452c; --ink-4:#7a6644;
  --parch-a:#f4eacf; --parch-b:#dfcfa8; --parch-edge:#a3855a;
  --text:#cfc6b2; --text-dim:#8f8778; --text-faint:#6f6656; --text-ghost:#55503f;
  --asc:#d9b978; --asc-soft:rgba(217,185,120,.14);
  --for:#8f6fb5; --for-light:#a98ecb; --for-soft:rgba(143,111,181,.14);
  --danger:#e08a7a; --danger-edge:#7a3a2c; --danger-fill:#8d3f2e;
  --buff:#4a6b39; --nerf:#8d3f2e; --fix:#4a5b70;
  --radius:2px;
  --serif:'Cinzel',Georgia,serif; --body:'Spectral',Georgia,serif; --ui:'Manrope',system-ui,sans-serif;
  --shell:1120px;
  --pad-x:clamp(16px,3vw,32px);
  --sec-y:clamp(44px,6vw,76px);
}

*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--stone-1);color:var(--text);font:12px/1.65 var(--ui);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--gold-bright);text-decoration:none}
a:hover{color:#fff6dc}
.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- gilded chrome header ---------- */
.topbar{position:relative;background:linear-gradient(var(--stone-3),var(--stone-2) 60%,#0c0a08);border-bottom:1px solid var(--gold-line);box-shadow:inset 0 2px 0 rgba(255,233,176,.06),0 6px 24px rgba(0,0,0,.6)}
.topbar::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);pointer-events:none}
.topbar-in{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px;padding-top:14px;padding-bottom:14px}
.brand:not(.footer){display:block;height:34px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(255,211,77,.28))}
.brand.footer{width:200px;}
.nav{display:flex;flex-wrap:wrap;gap:12px 28px;margin-right:auto;font:600 12.5px/1 var(--serif);letter-spacing:.18em;text-transform:uppercase}
.nav a{color:#9c9484;padding-bottom:3px;border-bottom:2px solid transparent}
.nav a:hover{color:var(--gold-bright)}
.nav a[aria-current="page"]{color:var(--gold-bright);border-bottom-color:var(--brass)}
.acct{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--text-dim)}

/* ---------- buttons ---------- */
.btn{font:600 11.5px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:#cbb98f;cursor:pointer;padding:10px 18px;border:1px solid #4a3c22;border-radius:var(--radius);background:linear-gradient(var(--stone-4),#14120f)}
.btn:hover{color:var(--gold-bright);border-color:var(--brass)}
.btn-ghost{border-color:#3a3323;color:var(--text-dim);background:linear-gradient(#1c1a15,#121009)}
.btn-outline{color:var(--gold-bright);border:1px solid var(--brass);background:linear-gradient(#2b2519,#17130d);box-shadow:0 0 0 1px #120f0a}
.btn-gold{font:700 clamp(14px,1.4vw,20px)/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:#2a1e08;cursor:pointer;padding:18px clamp(24px,4vw,58px);border:1px solid #f0d79a;border-radius:var(--radius);
  background:linear-gradient(#ffe9b0 0%,#d5ab5c 46%,#b0863c 54%,#e0bd77 100%);
  box-shadow:0 0 0 1px #3a2c12,0 0 0 5px rgba(20,16,8,.9),0 0 48px rgba(255,196,77,.35),0 10px 26px rgba(0,0,0,.7);
  text-shadow:0 1px 0 rgba(255,255,255,.35);transition:filter .15s,transform .15s}
.btn-gold:hover{filter:brightness(1.08)}
.btn-gold:active{transform:translateY(1px)}
.btn-danger{font:700 11.5px/1 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:#f4ded8;cursor:pointer;padding:14px 0;border:1px solid #a04e3b;border-radius:var(--radius);background:linear-gradient(var(--danger-fill),#5e2519);box-shadow:0 0 0 1px #2a1410,0 6px 16px rgba(0,0,0,.6)}

/* ---------- headings ---------- */
.h-sec{margin:0;font:700 clamp(17px,2vw,26px)/1.2 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-bright);text-shadow:0 2px 0 rgba(0,0,0,.6)}
.h-page{margin:0;font:700 clamp(20px,2.8vw,34px)/1.2 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright);text-shadow:0 2px 0 rgba(0,0,0,.7),0 0 34px rgba(255,196,77,.22)}
.rule{display:flex;align-items:center;justify-content:center;gap:18px}
.rule::before,.rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,#4f3f22)}
.rule::after{background:linear-gradient(90deg,#4f3f22,transparent)}
.diamond-rule{display:flex;align-items:center;gap:12px;width:min(420px,100%)}
.diamond-rule::before,.diamond-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--brass))}
.diamond-rule::after{background:linear-gradient(90deg,var(--brass),transparent)}
.diamond-rule i{width:6px;height:6px;background:var(--gold-dim);rotate:45deg}
.lede{margin:0;font: clamp(12px,1.6vw,19px)/1.65 var(--body);color:#a89f8b}

/* ---------- gilded frame and parchment ---------- */
.frame{position:relative;padding:8px;background:linear-gradient(#2a2317,#17130d);border:1px solid var(--gold-line);box-shadow:0 12px 30px rgba(0,0,0,.5)}
.frame--hero{padding:9px;background:linear-gradient(#302819,#1a150e);border-color:#6b5227;box-shadow:0 0 0 1px #120f0a,0 20px 50px rgba(0,0,0,.6),0 0 70px -30px rgba(217,185,120,.5)}
.frame--rivets::before,.frame--rivets::after,.frame--rivets>.rivet::before,.frame--rivets>.rivet::after{content:"";position:absolute;width:9px;height:9px;background:var(--gold);rotate:45deg}
.frame--rivets::before{top:4px;left:4px}
.frame--rivets::after{top:4px;right:4px}
.frame--rivets>.rivet::before{bottom:4px;left:4px}
.frame--rivets>.rivet::after{bottom:4px;right:4px}
.parchment{height:100%;position:relative;padding:clamp(26px,3.5vw,44px) clamp(22px,3.5vw,48px);background:linear-gradient(var(--parch-a),var(--parch-b));border:1px solid var(--parch-edge);box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 0 2px 18px rgba(120,95,55,.24);color:var(--ink-3)}
.parchment::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(120,95,55,.045) 0 1px,transparent 1px 3px);pointer-events:none}
.parchment>*{position:relative}
.parchment h2,.parchment h3{color:var(--ink-2);font-family:var(--serif)}
.parchment p{font-family:var(--body);font-size:clamp(12px,1.6vw,17px);line-height:1.75}
.parch-div{height:1px;background:linear-gradient(90deg,transparent,rgba(120,95,55,.45),transparent)}

/* ---------- index hero ---------- */
.hero{position:relative;display:flex;align-items:flex-end;min-height:clamp(440px,44vw,560px);overflow:hidden;background:#14120e;border-bottom:1px solid var(--gold-line)}
/* Still key art until the trailer replaces it. The stripes stay underneath as
   the backdrop while the image loads. */
.hero-art{position:absolute;inset:0;background:url("/loading/dawntide.webp") center 42%/cover no-repeat,repeating-linear-gradient(45deg,#171410 0 7px,#1d1913 7px 14px)}
.hero-art::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 80% at 50% 10%,rgba(255,211,77,.10),transparent 70%),linear-gradient(rgba(11,12,15,.15),rgba(11,12,15,.9) 78%)}
.hero-in{position:relative;width:100%;padding:clamp(90px,14vw,150px) var(--pad-x) clamp(40px,5vw,64px);text-align:center}
.hero-in>*{max-width:800px;margin-left:auto;margin-right:auto}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:14px;font:600 11px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim)}
.eyebrow::before,.eyebrow::after{content:"";width:40px;height:1px;background:linear-gradient(90deg,transparent,var(--brass))}
.eyebrow::after{background:linear-gradient(90deg,var(--brass),transparent)}
.hero h1{margin:16px auto 0;font:700 clamp(30px,5.2vw,68px)/1.06 var(--serif);letter-spacing:.06em;color:var(--gold-pale);text-shadow:0 3px 0 rgba(0,0,0,.7),0 0 44px rgba(255,196,77,.28)}
.hero .lede{margin:18px auto 0;max-width:60ch;color:#b6ac97}
.hero-cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 18px;margin-top:26px}
.hero-note{margin:16px auto 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#6c6353}

/* ---------- generic sections ---------- */
.section{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.section--dark{background:linear-gradient(var(--stone-2),var(--stone-1));border-top:1px solid #2a2418;border-bottom:1px solid #2a2418}
.stack{display:flex;flex-direction:column;gap:clamp(22px,3vw,38px)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:22px}
.card-icon{width:52px;height:52px;filter:drop-shadow(0 2px 3px rgba(90,70,40,.5))}

/* ---------- factions ---------- */
.factions{display:flex;flex-wrap:wrap;gap:18px}
.faction{position:relative;flex:1 1 330px;overflow:hidden;padding:clamp(26px,3vw,40px) clamp(24px,3vw,40px) 36px;border:1px solid var(--gold-line)}
.faction--asc{background:radial-gradient(90% 100% at 100% 0%,rgba(217,185,120,.13),transparent 65%),linear-gradient(#1b1913,#111008)}
.faction--for{background:radial-gradient(90% 100% at 0% 0%,var(--for-soft),transparent 65%),linear-gradient(#181520,#0f0d13);border-color:#4a3c5a}
.faction h3{margin:0;font:700 clamp(22px,2.4vw,30px)/1.1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#e6c98d}
.faction--for h3{color:#bda3dd}
.faction .where{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#8a7b5c}
.faction p{margin:0;max-width:44ch;font:16px/1.7 var(--body);color:#a49b88}
.watermark{position:absolute;right:-44px;bottom:-44px;width:260px;height:260px;opacity:.06;pointer-events:none}

/* ---------- news ---------- */
.news-row{display:flex;flex-wrap:wrap;gap:22px}
.news-feature{flex:2 1 420px}
.news-list{flex:1 1 280px;display:flex;flex-direction:column;gap:12px}
.news-item{display:flex;flex-direction:column;gap:6px;padding:18px 20px;background:linear-gradient(var(--stone-3),#12100c);border:1px solid #3a3323;border-left:3px solid var(--brass)}
.news-item:hover{border-left-color:var(--gold)}
.news-item h4{margin:0;font:600 16px/1.3 var(--serif);letter-spacing:.04em;color:var(--gold-bright)}
.news-item p{margin:0;font:14.5px/1.6 var(--body);color:var(--text-dim)}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.banner-slot{height:190px;display:grid;place-items:center;background:repeating-linear-gradient(45deg,#cfbe97 0 8px,#c6b48b 8px 16px);border-bottom:1px solid var(--parch-edge);font:10.5px ui-monospace,Menlo,monospace;letter-spacing:.2em;text-transform:uppercase;color:#6f5c37}

/* ---------- tags ---------- */
.tag{font:700 10px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;padding:5px 9px;border:1px solid var(--gold-line-soft);color:var(--gold);white-space:nowrap}
.tag--solid{color:#2a1e08;background:linear-gradient(var(--gold-bright),#c9a15a);border-color:#f0d79a;box-shadow:0 0 0 1px #3a2c12}
.tag--new{color:#2a1e08;background:linear-gradient(var(--gold-bright),#c9a15a);border-color:var(--brass)}
.tag--buff{color:#f4e7c4;background:var(--buff);border-color:#35502a}
.tag--nerf{color:#f4e7c4;background:var(--nerf);border-color:#6a2c1f}
.tag--fix{color:#f4e7c4;background:var(--fix);border-color:#35455a}

/* ---------- character select ---------- */
.char-head{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.char-head p{margin:0;font: 16px/1.6 var(--body);color:var(--text-dim)}
.hero-char{position:relative;overflow:hidden;border:1px solid #6b5227;background:radial-gradient(80% 120% at 8% 0%,rgba(217,185,120,.16),transparent 62%),repeating-linear-gradient(45deg,rgba(255,255,255,.014) 0 1px,transparent 1px 4px),linear-gradient(var(--panel-a),var(--panel-b))}
.hero-char__ribbon{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 20px;background:linear-gradient(rgba(217,185,120,.10),transparent);border-bottom:1px solid var(--gold-line-soft);font:700 10.5px/1 var(--serif);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hero-char__ribbon span{color:#7c8274;letter-spacing:.18em}
.hero-char__body{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:26px clamp(20px,3vw,34px);padding:clamp(22px,3vw,30px) clamp(20px,3vw,34px) 32px}
.crest-lg{flex:0 0 auto;display:grid;place-items:center;width:clamp(96px,10vw,128px);height:clamp(96px,10vw,128px);border-radius:50%;background:radial-gradient(circle at 50% 34%,rgba(217,185,120,.14),transparent 68%);box-shadow:inset 0 0 0 1px rgba(217,185,120,.22)}
.hero-char__id{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}
.char-name{font:700 clamp(26px,3.4vw,42px)/1.06 var(--serif);letter-spacing:.06em;color:var(--gold-pale);text-shadow:0 2px 4px rgba(0,0,0,.8),0 0 30px rgba(255,196,77,.15)}
.char-sub{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.char-faction{font:600 11.5px/1 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--asc)}
.char-faction--for{color:var(--for-light)}
.char-region{font: 12px var(--body);color:var(--text-dim)}
.digest{display:flex;flex-wrap:wrap;row-gap:16px;padding-top:16px;border-top:1px solid rgba(217,185,120,.14)}
.digest>div{display:flex;flex-direction:column;gap:3px;padding:0 26px;border-left:1px solid rgba(217,185,120,.14)}
.digest>div:first-child{padding-left:0;border-left:none}
.digest dt,.digest .k{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#7a7263}
.digest dd,.digest .v{margin:0;font:700 24px/1.2 var(--serif);color:#e8dfcb}
.digest .v small{font:400 14px var(--ui);color:var(--text-dim)}
.hero-char__actions{flex:1 1 190px;display:flex;flex-direction:column;gap:10px}

.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:14px}
.char-card{position:relative;height:100%;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:18px 18px 16px;border:1px solid #3a3323;background:radial-gradient(110% 130% at 0% 0%,var(--asc-soft),transparent 62%),linear-gradient(var(--panel-a),var(--panel-b))}
.char-card--for{background:radial-gradient(110% 130% at 0% 0%,var(--for-soft),transparent 62%),linear-gradient(#1b1820,#100e13)}
.char-card__head{position:relative;display:flex;align-items:center;gap:12px;min-width:0}
.char-card__head .name{font:700 19px/1.2 var(--serif);letter-spacing:.04em;color:var(--gold-bright);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.char-card__head .fac{font:600 10px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--asc)}
.char-card--for .char-card__head .fac{color:var(--for-light)}
.ghost-flag{position:relative;align-self:flex-start;display:flex;align-items:center;gap:7px;padding:5px 9px;border:1px solid #5a2f28;background:rgba(224,138,122,.08);font:600 9.5px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--danger)}
.ghost-flag i{width:5px;height:5px;border-radius:50%;background:var(--danger)}
.rows{position:relative;display:flex;flex-direction:column;gap:6px;padding-top:10px;border-top:1px solid rgba(217,185,120,.1)}
.rows div{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.rows span:first-child{color:#7a7263}
.rows span:last-child{font:600 12px var(--serif);color:var(--text)}
.never{position:relative;padding-top:10px;border-top:1px solid rgba(217,185,120,.1);font: 14.5px/1.6 var(--body);color:var(--text-dim)}
.char-card__foot{position:relative;margin-top:auto;padding-top:12px;display:flex;flex-direction:column;gap:8px}
.seen{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-faint)}
.char-card__foot .btns{display:flex;gap:8px}
.char-card__foot .btns .btn-outline{flex:1;padding:11px 0;font-size:11px}
.char-card__foot .btns .btn-ghost{padding:11px 14px;font-size:11px}

.new-char{display:flex;align-items:center;justify-content:center;gap:18px;width:100%;padding:26px;cursor:pointer;border:1px dashed #4a4132;background:linear-gradient(rgba(20,18,14,.6),rgba(12,11,9,.6))}
.new-char:hover{border-color:var(--brass)}
.new-char i{display:grid;place-items:center;width:34px;height:34px;border:1px solid #6b5227;color:var(--gold);font:20px/1 var(--serif);font-style:normal}
.new-char b{display:block;font:700 12px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.new-char small{display:block;margin-top:3px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint)}
.slot-count{text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-ghost)}

.empty-state{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:20px;padding:clamp(34px,5vw,56px) clamp(20px,3vw,40px) 52px;text-align:center;border:1px solid #6b5227;background:radial-gradient(70% 90% at 50% 0%,rgba(217,185,120,.10),transparent 70%),linear-gradient(var(--stone-3),#0f0d0a)}
.empty-state .crests{display:flex;flex-wrap:wrap;justify-content:center;gap:24px 56px}
.empty-state h2{margin:0;font:700 clamp(19px,2.4vw,28px)/1.2 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright);text-shadow:0 2px 4px rgba(0,0,0,.9)}
.empty-state p{margin:0;max-width:50ch;font: clamp(12px,1.5vw,17px)/1.7 var(--body);color:#9c9484}

/* ---------- patch note page ---------- */
.patch-head{position:relative;overflow:hidden;padding:clamp(34px,4.5vw,52px) 0 46px;background:radial-gradient(70% 100% at 50% 0%,rgba(255,196,77,.09),transparent 70%),linear-gradient(var(--stone-2),var(--stone-1));border-bottom:1px solid #2a2418}
.patch-head h1{margin:0;max-width:24ch;font:700 clamp(27px,4.2vw,52px)/1.1 var(--serif);letter-spacing:.03em;color:var(--gold-pale);text-shadow:0 3px 0 rgba(0,0,0,.7),0 0 40px rgba(255,196,77,.2)}
.patch-head .lede{max-width:66ch}
.patch-body{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,40px);align-items:flex-start;padding-top:clamp(28px,4vw,44px);padding-bottom:76px}
.patch-main{flex:3 1 460px;min-width:0}
.patch-side{flex:1 1 262px;min-width:0;display:flex;flex-direction:column;gap:18px}
.patch-sec{display:flex;flex-direction:column;gap:16px}
.patch-sec__head{display:flex;align-items:center;gap:14px}
.patch-sec__head img{width:34px;height:34px}
.patch-sec__head h2{margin:0;font:700 clamp(17px,1.9vw,22px)/1.2 var(--serif);letter-spacing:.16em;text-transform:uppercase}
.patch-sec__head::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(120,95,55,.5),transparent)}
.change{flex-direction:column;display:flex;gap:14px;align-items:flex-start}
.change .tag{flex:0 0 auto;margin-top:3px}
.change p{margin:0}
.change strong{color:var(--ink)}
.parchment blockquote{margin:6px 0 0;padding:16px 22px;border-left:3px solid var(--parch-edge);background:rgba(120,95,55,.09);font: 17px/1.7 var(--body);color:var(--ink-3)}
.parchment code{font:14px ui-monospace,Menlo,monospace;background:rgba(120,95,55,.14);border:1px solid rgba(120,95,55,.3);padding:1px 5px;color:#43331a}
.side-card{padding:6px;background:linear-gradient(#241f16,#16130e);border:1px solid #4d3f24}
.side-card__in{padding:18px 18px 20px;border:1px solid #3a3323;background:linear-gradient(var(--stone-3),var(--stone-2));display:flex;flex-direction:column;gap:14px}
.side-card h4{margin:0;font:700 10.5px/1 var(--serif);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.toc{display:flex;flex-direction:column;gap:9px}
.toc a{font-size:13.5px;color:var(--text-dim);padding-left:12px;border-left:2px solid #2a2418}
.toc a[aria-current="true"]{color:#cbb98f;border-left-color:var(--brass)}
.prev a{display:flex;flex-direction:column;gap:3px;padding:12px 0;border-bottom:1px solid #1f1c15}
.prev a:last-child{border-bottom:none}
.prev b{font:600 14px var(--serif);color:#cbb98f}

/* ---------- dialogs ---------- */
.scrim{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:24px;background:rgba(6,7,9,.78);backdrop-filter:blur(3px)}
.dialog{width:min(460px,100%)}
.dialog--danger{width:min(430px,100%);padding:8px;background:linear-gradient(#2b1c18,#1a100d);border:1px solid var(--danger-edge);box-shadow:0 0 0 1px #120f0a,0 26px 60px rgba(0,0,0,.7)}
.dialog__in{border:1px solid #6b5227;background:radial-gradient(80% 100% at 50% 0%,rgba(217,185,120,.12),transparent 68%),linear-gradient(var(--stone-3),#0f0d0a)}
.dialog--danger .dialog__in{border-color:var(--danger-edge);padding:clamp(24px,3vw,32px) clamp(20px,3vw,32px) 26px;background:radial-gradient(80% 100% at 50% 0%,rgba(224,138,122,.10),transparent 70%),linear-gradient(#1a1512,#0f0c0a);display:flex;flex-direction:column;gap:16px}
.tabs{display:flex;border-bottom:1px solid var(--gold-line-soft)}
.tabs button{flex:1;font:700 11.5px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);cursor:pointer;padding:16px 0;border:none;border-bottom:2px solid transparent;background:transparent}
.tabs button[aria-selected="true"]{color:var(--gold-bright);border-bottom-color:var(--gold);background:linear-gradient(rgba(217,185,120,.12),transparent)}
.form{padding:clamp(24px,3vw,34px) clamp(20px,3vw,34px) 30px;display:flex;flex-direction:column;gap:18px}
.field{display:flex;flex-direction:column;gap:7px}
.field span{font:600 10px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#a89a7c}
.field input{font:12px var(--ui);color:#e8dfcb;padding:12px 14px;border:1px solid var(--gold-line-soft);border-radius:var(--radius);background:var(--stone-2);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.field input:focus{outline:none;border-color:var(--brass);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 3px rgba(217,185,120,.12)}
.field[hidden]{display:none}
/* Wrapper that lets the reveal button sit on top of a password input. */
.field .field__box{position:relative;display:block;font:inherit;letter-spacing:normal;text-transform:none;color:inherit}
.field__box input{width:100%;padding-right:74px}
.field__peek{position:absolute;top:50%;right:7px;transform:translateY(-50%);font:600 10px/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:#a89a7c;cursor:pointer;padding:8px 10px;border:1px solid var(--gold-line-soft);border-radius:var(--radius);background:rgba(217,185,120,.07)}
.field__peek:hover{color:var(--gold-bright);border-color:var(--brass)}
.field__peek:focus-visible{outline:none;color:var(--gold-bright);border-color:var(--brass);box-shadow:0 0 0 3px rgba(217,185,120,.12)}
.dialog--danger .field input{border-color:#5a2f28}
.dialog__title{display:flex;align-items:center;gap:12px}
.dialog__title i{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--danger-edge);color:var(--danger);font:700 16px/1 var(--serif);font-style:normal}
.dialog__title h3{margin:0;font:700 clamp(12px,1.7vw,18px)/1.2 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:#f0b3a6}
.victim{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid #3a3323;background:linear-gradient(#1b1820,#100e13)}
.victim b{font:700 18px var(--serif);color:var(--gold-bright)}
.victim small{font-size:12px;color:var(--text-dim)}
.dialog__actions{display:flex;gap:10px;padding-top:4px}
.dialog__actions>*{flex:1}

/* ---------- 404 ---------- */
.err{position:relative;overflow:hidden;padding:clamp(56px,8vw,110px) var(--pad-x);text-align:center;background:radial-gradient(60% 80% at 50% 0%,rgba(255,196,77,.08),transparent 70%),linear-gradient(var(--stone-2),var(--stone-1))}
.err-in{position:relative;max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:18px}
.err-code{font:700 clamp(56px,10vw,120px)/.9 var(--serif);letter-spacing:.08em;color:var(--gold-pale);text-shadow:0 4px 0 rgba(0,0,0,.7),0 0 50px rgba(255,196,77,.22)}
.err h1{margin:0;font:700 clamp(18px,2.4vw,28px)/1.3 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-bright)}
.err p{margin:0;max-width:46ch;font: clamp(12px,1.6vw,18px)/1.7 var(--body);color:#9c9484}

/* ---------- hiscores ---------- */
.hs-search{display:flex;justify-content:center;gap:10px}
.hs-search input{font:12px var(--ui);color:#e8dfcb;width:min(320px,100%);padding:11px 14px;border:1px solid var(--gold-line-soft);border-radius:var(--radius);background:var(--stone-2);box-shadow:inset 0 2px 6px rgba(0,0,0,.6)}
.hs-search input:focus{outline:none;border-color:var(--brass);box-shadow:inset 0 2px 6px rgba(0,0,0,.6),0 0 0 3px rgba(217,185,120,.12)}
.hs-layout{display:flex;align-items:flex-start;gap:18px}
.hs-boards-frame{flex:0 0 224px;padding:6px;background:linear-gradient(#241f16,#16130e);border-color:#4d3f24}
.hs-boards{display:flex;flex-direction:column;border:1px solid #3a3323;background:linear-gradient(var(--stone-3),var(--stone-2))}
.hs-board{display:flex;align-items:center;gap:12px;padding:10px 14px;border:none;border-bottom:1px solid #241f16;background:transparent;cursor:pointer;text-align:left;font:600 12px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#9c9484}
.hs-board:last-child{border-bottom:none}
.hs-board img{width:22px;height:22px;flex:0 0 auto}
.hs-board:hover{color:var(--gold-bright)}
.hs-board[aria-current="true"]{color:var(--gold-bright);background:linear-gradient(90deg,rgba(217,185,120,.12),transparent);box-shadow:inset 2px 0 0 var(--brass)}
.hs-table-frame{flex:1 1 auto;min-width:0;padding:6px;background:linear-gradient(#241f16,#16130e);border-color:#4d3f24}
.hs-panel{display:flex;flex-direction:column;border:1px solid #3a3323;background:linear-gradient(var(--stone-3),var(--stone-2))}
.hs-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 14px;padding:16px 18px;border-bottom:1px solid var(--gold-line-soft);background:linear-gradient(rgba(217,185,120,.08),transparent)}
.hs-head h2{margin:0;font:700 18px/1.2 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-bright)}
.hs-head span{font: 13px var(--body);color:var(--text-dim)}
.hs-scroll{overflow-x:auto}
.hs-table{width:100%;border-collapse:collapse;font:14px var(--ui)}
.hs-table th{padding:12px 18px;text-align:left;border-bottom:1px solid var(--gold-line-soft);font:600 10px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#7a7263}
.hs-table td{padding:10px 18px;border-bottom:1px solid #1f1c15}
.hs-table tbody tr:last-child td{border-bottom:none}
.hs-table tbody tr:hover{background:rgba(217,185,120,.05)}
.hs-table .r{text-align:right;font-variant-numeric:tabular-nums}
.hs-name{border:none;background:none;padding:0;cursor:pointer;font:600 14px var(--serif);letter-spacing:.04em;color:var(--gold-bright)}
.hs-name:hover{color:#fff6dc}
.hs-name--for{color:var(--for-light)}
.hs-skill-link{display:flex;align-items:center;gap:10px;border:none;background:none;padding:0;cursor:pointer;font:600 12px/1 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:#cbb98f}
.hs-skill-link img{width:20px;height:20px}
.hs-skill-link:hover{color:var(--gold-bright)}
.hs-pager{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 18px;border-top:1px solid #1f1c15}
.hs-pager span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}
.hs-pager .btn:disabled{opacity:.35;cursor:default}
.hs-foot{padding:10px 18px 14px;text-align:right;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-ghost)}
.hs-panel .page-note{border-left:none;border-right:none;border-top:none}
@media (max-width:760px){
  .hs-layout{flex-direction:column;align-items:stretch}
  .hs-boards-frame{flex:none;width:100%}
  .hs-table-frame{width:100%}
  .hs-boards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .hs-board{border-bottom:none}
  .hs-table th,.hs-table td{padding-left:12px;padding-right:12px}
}

/* ---------- footer ---------- */
.foot{padding:clamp(32px,4vw,44px) 0 40px;background:var(--stone-0);border-top:1px solid #2a2418}
.foot-in{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:32px 40px}
.foot-cols{display:flex;flex-wrap:wrap;gap:24px 56px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col b{font:600 10.5px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:#8a7b5c}
.foot-col a{font-size:13.5px;color:var(--text-dim)}
.foot-legal{margin-top:30px;padding-top:20px;border-top:1px solid #1c1913;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-ghost)}

/* ============================================================
   Responsive. The layout above is already fluid, so these
   only handle things intrinsic sizing cannot do.
   ============================================================ */
@media (max-width:1024px){
  .digest>div{padding:0 18px}
  .hero-char__actions{flex-basis:100%}
  .patch-side{order:2}
}
@media (max-width:760px){
  .topbar-in{gap:10px 12px}
  .nav{order:3;width:100%;justify-content:center;gap:10px 20px;font-size:11.5px}
  /* Two rows, never three. A flex container wraps a line before it shrinks
     anything on it, so the account block - email plus button, near enough 290px
     of it - was taking a row of its own and leaving the wordmark alone on an
     empty one. A flex base of zero means it never widens the line enough to
     wrap: it takes whatever the wordmark leaves, and the email trails off
     inside it rather than shoving the button off the end. */
  .acct{order:2;flex:1 1 0;min-width:0;justify-content:flex-end;gap:10px}
  .acct .btn{flex:0 0 auto;white-space:nowrap;padding:9px 14px}
  .brand{width:200px}
  /* The vertical rules only read while every cell is on one line; wrapped, the
     first cell of the second row wears a rule that divides nothing. Two even
     columns instead, which is a grid's job rather than a percentage basis. */
  .digest{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;width:100%}
  .digest>div{padding:0;border-left:none}
  /* An odd cell left over on the last row takes the full width, so a place
     name is not squeezed into half a phone. */
  .digest>div:nth-child(odd):last-child{grid-column:1/-1}
  .digest dd,.digest .v{font-size:20px}
  /* Stacked and centred: the crest, then who they are, then the two things to
     do about it. Laid out in a column, the flex-basis both children carry at
     wider widths would measure height instead - so they go back to sizing from
     their content, and take the full width of the card. */
  .hero-char__body{flex-direction:column;align-items:center;text-align:center;gap:20px}
  .hero-char__id{flex:0 1 auto;width:100%;align-items:center}
  .hero-char__actions{flex:0 0 auto;width:100%}
  .char-sub{justify-content:center}
  .banner-slot{height:150px}
  .foot-in{flex-direction:column}
}
@media (max-width:520px){
  .eyebrow::before,.eyebrow::after{display:none}
  .hero-cta>*{width:100%}
  .dialog__actions{flex-direction:column}
  .new-char{flex-direction:column;text-align:center}
  .parchment{padding-left:18px;padding-right:18px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ============================================================
   Live pages
   Everything above dresses markup that is written by hand.
   Everything below is what the page scripts need in order to
   put real data into it: the states a mockup never has -
   loading, empty, failed, signed in - and the few pieces
   (dialog lines, notices) that only exist once something has
   actually gone wrong or right.
   ============================================================ */

/* Several things here are laid out with flex or grid, which outranks the
   hidden attribute's display:none. Restate it once, for the whole site. */
[hidden]{display:none!important}

/* ---------- the account slot, on every page ---------- */
/* An email is the longest thing in the bar and the least important; it gives
   up room before the button does, rather than shoving it off the line. */
#acct-email{min-width:0;max-width:26ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- sign in / create account ---------- */
/* The way out sits in the tab row's right-hand gutter, which the padding
   below opens for it - and stays put when the tabs themselves are hidden. */
.dialog__in{position:relative}
.tabs{padding-right:46px}
/* The same square embossed close button the in game panels use. */
.dialog__close{position:absolute;top:10px;right:10px;z-index:1;width:28px;height:28px;display:grid;place-items:center;padding:0;cursor:pointer;background:linear-gradient(#2f3138,#1a1c21);border:1px solid #4a3f26;border-radius:var(--radius);box-shadow:inset 0 1px 0 rgba(255,233,176,.14),inset 0 -1px 0 rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.6);transition:border-color .12s,box-shadow .12s}
.dialog__close img{width:66%;height:66%;display:block;opacity:.9;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7));transition:opacity .12s,filter .12s}
.dialog__close:hover{border-color:#a8864a;box-shadow:inset 0 1px 0 rgba(255,233,176,.22),inset 0 -1px 0 rgba(0,0,0,.55),0 0 8px rgba(226,201,138,.25),0 1px 2px rgba(0,0,0,.6)}
.dialog__close:hover img{opacity:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.7)) brightness(1.1)}
.dialog__close:active{background:linear-gradient(#1a1c21,#24262c);box-shadow:inset 0 1px 3px rgba(0,0,0,.7)}
.dialog__close:active img{transform:translateY(1px)}
/* Everything in the form that a database has to exist for. */
.form-fields{display:flex;flex-direction:column;gap:18px}
.dialog-error{min-height:18px;margin:0;font:14px/1.4 var(--body);color:var(--danger);text-align:center}
.dialog-note{margin:0;font: 14.5px/1.6 var(--body);color:var(--gold-dim);text-align:center}
.dialog-foot{margin:0;text-align:center;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-ghost)}
.form button[disabled]{opacity:.6;cursor:default}

/* ---------- news, as the database has it ---------- */
/* The feature card is the newest post and the list is the rest, so both are
   filled at once - see src/landing/main.ts. */
.news-feature .parchment{padding:26px 28px 28px;display:flex;flex-direction:column;gap:10px}
.news-feature h3{margin:0;font-size:clamp(20px,2.1vw,25px);line-height:1.22;letter-spacing:.04em;color:var(--ink)}
.news-feature .more{font:600 11px/1 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:#7a5c22}
.news-item .more{font:600 10.5px/1 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim)}
/* Said only while the posts on screen are samples, or while there are none. */
#news-note{margin:0;text-align:center;font: 14.5px/1.6 var(--body);color:var(--text-faint)}

/* ---------- the patch page, as the database has it ---------- */
.patch-status{padding:clamp(40px,6vw,80px) 0;text-align:center;font: clamp(12px,1.6vw,18px)/1.7 var(--body);color:var(--text-dim)}
.patch-prose{display:flex;flex-direction:column;gap:18px}
.patch-prose>*{margin:0}
.patch-prose h2,.patch-prose h3{font:700 clamp(17px,1.9vw,22px)/1.25 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.patch-prose ul,.patch-prose ol{padding-left:22px;display:flex;flex-direction:column;gap:9px;font:16.5px/1.65 var(--body)}
.patch-prose img{display:block;}
.patch-prose a{color:#6b4d15;text-decoration:underline}

/* ---------- character select ---------- */
/* Why they are looking at this page instead of at the world - an idle logout,
   a lost connection, a lapsed sign-in. A note, not an error: none of those are
   the player's doing. */
.page-note{margin:0;padding:12px 16px;text-align:center;font:12px/1.5 var(--body);color:var(--text-dim);border:1px solid var(--gold-line-soft);background:rgba(255,233,176,.04)}
.page-error{margin:0;min-height:20px;text-align:center;font:12px/1.5 var(--body);color:var(--danger)}

/* The crest colours itself from currentColor (see src/select/crest.ts), so a
   card sets the colour once and crest, ring and watermark all follow. Its host
   holds its size against a long name beside it. */
.crest-host{flex:0 0 auto;line-height:0}
.crest-host .crest{display:block}
.watermark .crest-mark{width:100%;height:100%;color:currentColor}
.hero-char .watermark{color:var(--asc)}
.hero-char--for .watermark{color:var(--for)}
.hero-char--for .char-faction{color:var(--for-light)}
.char-card .watermark{right:-30px;bottom:-30px;width:170px;height:170px;opacity:.05;color:var(--asc)}
.char-card--for .watermark{color:var(--for)}

/* Placeholders in the shape of the roll, so it arrives into a page that is
   already the right size and nothing jumps under the cursor. */
@keyframes sheen{to{background-position:-200% 0}}
.sk{border:1px solid #22201a;background:linear-gradient(90deg,#15130f 0%,#221f18 45%,#15130f 90%) 0 0/200% 100%;animation:sheen 1.6s linear infinite}
.sk-hero{height:210px}
.sk-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(226px,1fr));gap:14px;margin-top:14px}
.sk-card{height:190px}
/* When the fetch fails the note says so, and placeholders would be promising
   a roll that is not coming. */
#loading-view[data-state="error"] .sk-wrap{display:none}

/* Cards arrive in order, a beat apart, rather than all at once. The delay is
   set per card in src/select/main.ts; this is only the movement. */
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.hero-char,.char-card{animation:rise .5s cubic-bezier(.2,.7,.3,1) both;transition:border-color .2s,transform .18s,box-shadow .25s}
.char-card:hover{border-color:var(--brass)}
/* The page dims on its way out, which covers the game page's boot and makes
   Play a door rather than a link. The chosen card lifts as it goes. */
body{transition:opacity .3s ease}
body.leaving{opacity:0;pointer-events:none}
.chosen{border-color:var(--gold)!important;transform:translateY(-4px)}

/* ---------- the updates archive, as the database has it ---------- */
/* A timeline: a rail down the left with a marker per post, the date stamped
   beside it, and the post on a card. The newest post carries the Latest tag. */
.archive{position:relative;display:flex;flex-direction:column;gap:22px;padding-top:clamp(28px,4vw,44px);padding-bottom:76px}
.archive::before{content:"";position:absolute;top:clamp(28px,4vw,44px);bottom:76px;left:calc(var(--pad-x) + 112px);width:1px;background:linear-gradient(#4d3f24,#2a2418 70%,transparent)}
.archive-year{position:relative;margin:8px 0 0;padding-left:130px;font:700 11px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;color:var(--gold-dim)}
.archive-year::before{content:"";position:absolute;left:108px;top:2px;width:9px;height:9px;background:var(--gold-dim);rotate:45deg}
.update{position:relative;display:flex;gap:26px;align-items:flex-start;color:inherit}
.update__date{flex:0 0 100px;display:flex;flex-direction:column;align-items:flex-end;gap:2px;padding-top:18px;padding-right:16px;text-align:right}
.update__date b{font:700 30px/1 var(--serif);color:var(--gold-bright);text-shadow:0 2px 0 rgba(0,0,0,.6)}
.update__date span{font:600 10px/1 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.update::before{content:"";position:absolute;left:108px;top:26px;width:9px;height:9px;background:var(--brass);rotate:45deg;box-shadow:0 0 0 3px var(--stone-1)}
.update--latest::before{background:var(--gold);box-shadow:0 0 0 3px var(--stone-1),0 0 16px rgba(217,185,120,.6)}
.update__card{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:10px;padding:22px 26px 24px;background:linear-gradient(var(--stone-3),#12100c);border:1px solid #3a3323;border-left:3px solid var(--brass)}
a.update:hover .update__card{border-left-color:var(--gold);border-color:#4d3f24;border-left-color:var(--gold)}
.update--latest .update__card{border-color:#6b5227;border-left-color:var(--gold);background:radial-gradient(70% 90% at 0% 0%,rgba(217,185,120,.10),transparent 70%),linear-gradient(var(--stone-3),#12100c)}
.update__card h3{margin:0;font:600 clamp(18px,2vw,23px)/1.25 var(--serif);letter-spacing:.04em;color:var(--gold-bright)}
.update__card p{margin:0;font:12px/1.65 var(--body);color:var(--text-dim)}
.update__card .more{font:600 10.5px/1 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-dim)}
.tag--patch{color:var(--gold);border-color:var(--gold-line)}
.tag--news{color:#a98ecb;border-color:#4a3a5e}
@media (max-width:760px){
  .archive::before{display:none}
  .archive-year{padding-left:0}
  .archive-year::before{display:none}
  .update{flex-direction:column;gap:8px}
  .update::before{display:none}
  .update__date{flex:0 0 auto;flex-direction:row;align-items:baseline;gap:8px;padding:0;text-align:left}
  .update__date b{font-size:18px}
  .update__card{flex:0 0 auto;width:100%;padding:18px 20px 20px}
}

/* ---------- text buttons inside forms ---------- */
.link-btn{margin:0 auto;padding:6px 0 0;border:none;background:none;cursor:pointer;font: 13.5px var(--body);color:var(--text-dim);text-decoration:underline;text-underline-offset:3px}
.link-btn:hover{color:var(--gold-bright)}
.link-btn[hidden]{display:none}