/* Fellwake site. Layout: a fixed left rail (owner's preference) beside a wide
   content column; prose runs to a full readable measure (~72ch), grids use the
   whole column. One dark world matching the in-game Astra slate, one ember
   accent (Veilfire). Fonts are the two the UE client ships: Cinzel, EB Garamond. */
:root{
  --night:#0d1218; --slate:#18212b; --slate-2:#222d39; --steel:#3a4a5b;
  --mist:#9fb0c1; --bone:#e6e1d6; --ember:#d98a4a; --ember-dim:#8a4f2a;
  --white-name:#e6e1d6; --purple-name:#b28ad9; --red-name:#d9534a;
  --display:"Cinzel","Trajan Pro",Georgia,serif;
  --body:"EB Garamond",Garamond,"Times New Roman",serif;
  --rail:16rem; --measure:none;
  --step-0:1.18rem; --step-1:1.42rem; --step-2:1.9rem; --step-3:clamp(2rem,4vw,2.9rem); --step-4:clamp(2.8rem,8vw,6.2rem);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--night);color:var(--bone);font-family:var(--body);font-size:var(--step-0);line-height:1.6}
a{color:var(--ember)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-wrap:balance;line-height:1.15;margin:0}
p{max-width:var(--measure)}
img{max-width:100%}

/* ---------- left rail ---------- */
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);background:linear-gradient(180deg,#141c25,var(--slate) 40%,#1d1714);border-right:1px solid var(--steel);display:flex;flex-direction:column;text-align:center;padding:calc(1.8rem + env(safe-area-inset-top,0px)) 1.2rem 1.4rem;z-index:20;overflow-x:hidden;overflow-y:auto}
.rail>*{position:relative;z-index:1}
.rail canvas.rail-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
/* the glow moves its GRADIENT, not the element: a translated pseudo-element ran past the
   bottom of the scrollable rail, toggled its scrollbar and made the nav grow and shrink */
.rail::after{content:"";position:absolute;inset:0 -1px 0 auto;width:2px;background:linear-gradient(180deg,transparent,var(--ember),transparent) no-repeat;background-size:100% 30%;animation:railglow 7s ease-in-out infinite;z-index:2;pointer-events:none}
@keyframes railglow{0%{background-position:0 -50%}100%{background-position:0 150%}}
.rail .brand{font-family:var(--display);font-weight:900;letter-spacing:.2em;color:var(--bone);text-decoration:none;font-size:1.2rem;text-shadow:0 0 18px rgba(217,138,74,.35)}
.rail .pill{align-self:center;margin:.8rem 0 2.2rem;animation:pulse 3.2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 14px rgba(217,138,74,.45)}}
.rail nav{display:flex;flex-direction:column;gap:.15rem}
.rail nav a{position:relative;font-family:var(--display);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mist);text-decoration:none;padding:.7rem .8rem;transition:color .25s,letter-spacing .25s}
.rail nav a::before,.rail nav a::after{content:"";position:absolute;bottom:.35rem;height:1px;width:0;background:var(--ember);transition:width .3s ease}
.rail nav a::before{right:50%}.rail nav a::after{left:50%}
.rail nav a:hover::before,.rail nav a:hover::after,.rail nav a[aria-current=page]::before,.rail nav a[aria-current=page]::after{width:30%}
.rail nav a:hover{color:var(--bone);letter-spacing:.2em;background:radial-gradient(ellipse at center,rgba(217,138,74,.12),transparent 70%)}
.rail nav a[aria-current=page]{color:var(--bone);background:radial-gradient(ellipse at center,rgba(217,138,74,.16),transparent 70%)}
/* a child page sits under its parent, smaller, so the rail does not read as two PvP sections */
.rail nav a.sub{font-size:.66rem;letter-spacing:.12em;padding:.15rem .8rem .7rem;margin-top:-.45rem;opacity:.85}
.rail nav a.sub::first-letter{color:var(--ember)}
.rail .rail-cta{margin-top:2rem;text-align:center}
.rail .rail-foot{margin-top:auto;padding-top:2rem;font-size:.95rem;color:var(--mist);display:flex;justify-content:center;gap:1.2rem}
.rail .rail-foot a{color:var(--mist);text-decoration:none}
.rail .rail-foot a:hover{color:var(--bone)}
.menu-btn{display:none}
main,.page-foot{margin-left:var(--rail)}
.wrap{max-width:84rem;margin-inline:auto;padding-inline:clamp(16px,4vw,56px)}

/* ---------- shared pieces ---------- */
.pill{font-family:var(--display);font-size:.68rem;letter-spacing:.2em;border:1px solid var(--ember);color:var(--ember);padding:.15rem .55rem;display:inline-block}
.eyebrow{font-family:var(--display);font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mist);margin:0}
.lede{color:var(--mist);font-size:var(--step-1);line-height:1.5}
.note{font-size:1rem;color:var(--mist);font-style:italic}
.btn{font-family:var(--display);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.82rem;padding:.9rem 1.5rem;text-decoration:none;border:1px solid var(--ember);display:inline-block;cursor:pointer}
.btn.primary{background:var(--ember);color:var(--night)}
.btn.primary:hover{background:#e9a066}
.btn.ghost{color:var(--bone);border-color:var(--steel);background:rgba(13,18,24,.5)}
.btn.ghost:hover{border-color:var(--mist)}
.btn.small{padding:.6rem .9rem;font-size:.72rem}
.btn[aria-disabled=true]{opacity:.55;cursor:default}
.cta{display:flex;gap:1rem;flex-wrap:wrap}
section{padding-block:clamp(3rem,7vw,5.5rem);border-bottom:1px solid var(--steel)}
section h2{font-size:var(--step-3);margin:.4rem 0 1.3rem}
.more{font-family:var(--display);font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;display:inline-block;margin-top:1.4rem}
.more::after{content:" \2192"}
.alpha-strip{background:var(--slate-2);border-bottom:1px solid var(--steel);color:var(--mist);font-size:1rem}
.alpha-strip .wrap{padding-block:.55rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}

/* ---------- hero (landing) and page header (inner pages) ---------- */
.hero,.page-head{position:relative;overflow:hidden;border-bottom:1px solid var(--steel);display:flex;align-items:flex-end}
.hero{min-height:min(84vh,780px)}
.page-head{min-height:clamp(15rem,34vh,22rem)}
.hero canvas,.page-head canvas,.hero video{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero video{object-fit:cover}
.hero::after,.page-head::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 70%,rgba(13,18,24,.5),transparent 70%),linear-gradient(0deg,var(--night),transparent 30%);pointer-events:none}
.hero .wrap,.page-head .wrap{position:relative;z-index:1;width:100%;padding-block:3rem clamp(3rem,7vw,5rem);text-align:center}
.hero .cta,.page-head .subnav{justify-content:center}
.hero h1{font-size:var(--step-4);font-weight:900;letter-spacing:.08em;text-shadow:0 2px 30px rgba(0,0,0,.7)}
.hero .tag{font-size:var(--step-1);font-style:italic;color:var(--bone);opacity:.85;margin:1rem 0 2rem}
.page-head h1{font-size:var(--step-3);letter-spacing:.06em;margin-top:.5rem;text-shadow:0 2px 20px rgba(0,0,0,.7)}
.page-head .lede{margin:1rem 0 0}

/* ---------- landing: reel + hooks ---------- */
.reel{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:2rem;align-items:center}
.player{position:relative;aspect-ratio:16/9;max-width:100%;background:var(--slate-2);border:1px solid var(--steel);overflow:hidden}
.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.player button{position:absolute;inset:0;background:linear-gradient(0deg,rgba(13,18,24,.6),transparent 60%);border:0;cursor:pointer;display:grid;place-items:center;color:var(--bone)}
.player button span{width:4.5rem;height:4.5rem;border:2px solid var(--bone);border-radius:50%;display:grid;place-items:center;font-size:1.6rem;background:rgba(13,18,24,.5)}
.player button:hover span{border-color:var(--ember);color:var(--ember)}
.hooks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:2.5rem}
.hook{background:var(--slate);padding:1.6rem 1.4rem;text-decoration:none;color:var(--bone);display:flex;flex-direction:column;gap:.6rem;min-width:0}
.hook:hover{background:var(--slate-2)}
.hook .k{font-family:var(--display);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ember)}
.hook h3{font-size:1.25rem}
.hook p{color:var(--mist);margin:0;font-size:1.05rem}
.hook .more{margin-top:auto;padding-top:.6rem}
.quote-band{background:linear-gradient(180deg,var(--night),var(--slate))}
blockquote{margin:0;padding-left:1.4rem;border-left:2px solid var(--ember-dim);font-style:italic;font-size:var(--step-2);line-height:1.35}
blockquote cite{display:block;font-style:normal;font-size:1rem;color:var(--mist);margin-top:.8rem}

/* ---------- world ---------- */
.lore-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:3.5rem;align-items:start}
.lore-grid blockquote{font-size:var(--step-1);margin:2rem 0}
.realms{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.realms li{background:var(--slate-2);padding:1.1rem 1.3rem;border:1px solid var(--steel)}
.realms b{font-family:var(--display);letter-spacing:.08em;display:block;font-size:1rem}
.realms span{color:var(--mist);font-size:1.05rem}

/* ---------- classes ---------- */
.subnav{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.8rem}
.attrs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:2rem}
.attrs article{background:var(--slate);padding:1.4rem 1.3rem;min-width:0}
.attrs h3{font-size:1.5rem;letter-spacing:.1em;color:var(--ember)}
.attrs h3 small{font-size:.72rem;letter-spacing:.18em;color:var(--mist);text-transform:uppercase;margin-left:.4rem}
.says{font-style:italic;margin:.2rem 0 .8rem;font-size:1.05rem}
.attrs ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem;font-size:1.02rem;color:var(--mist)}
.attrs li,.legend{display:flex;gap:.6rem;align-items:baseline}
.attrs li::before,.dot{content:"";flex:none;width:.5rem;height:.5rem;border:1px solid var(--mist);transform:rotate(45deg);display:inline-block}
.attrs li.on{color:var(--bone)}
.attrs li.on::before,.dot.on{background:var(--ember);border-color:var(--ember)}
.legend{font-size:.95rem;color:var(--mist);margin-top:1rem;flex-wrap:wrap;max-width:none}
.scroll{overflow-x:auto;margin-top:2rem}
table.stats{border-collapse:collapse;width:100%;min-width:34rem;font-size:1.05rem}
.stats th{font-family:var(--display);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);text-align:left;padding:.6rem .9rem;border-bottom:1px solid var(--steel)}
.stats td{padding:.6rem .9rem;border-bottom:1px solid var(--slate-2)}
.stats td:nth-child(even){color:var(--ember);font-family:var(--display);font-size:.82rem;letter-spacing:.06em}
.stats th:nth-child(3),.stats td:nth-child(3){border-left:1px solid var(--steel)}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;margin-top:2.5rem}
.two h3{font-size:1.15rem;letter-spacing:.06em;margin:0 0 .5rem}
.two p{color:var(--mist);margin:0 0 1.6rem}
.order{margin:0;padding:0;list-style:none;counter-reset:o;display:grid;gap:.8rem}
.order li{counter-increment:o;display:grid;grid-template-columns:2rem 1fr;color:var(--mist)}
.order li::before{content:counter(o);font-family:var(--display);color:var(--ember);grid-row:span 2}
.order b{font-family:var(--display);font-size:.85rem;letter-spacing:.08em;color:var(--bone)}
.box{display:grid;grid-template-columns:auto 1fr;gap:.5rem 1.4rem;margin-top:1.5rem;max-width:var(--measure)}
.box dt{font-family:var(--display);font-size:.85rem;letter-spacing:.06em;color:var(--ember);font-variant-numeric:tabular-nums;padding-top:.2rem}
.box dd{margin:0;color:var(--mist)}
.roles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--steel);border:1px solid var(--steel);margin:2.5rem 0 1.2rem}
.role{background:var(--slate);padding:1.4rem 1.1rem;min-width:0}
.role h3{font-size:1rem;letter-spacing:.08em;margin-bottom:.3rem}
.role .prof{font-size:1rem;color:var(--mist)}
.state{display:inline-block;margin-top:.8rem;font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:.15rem .45rem;border:1px solid var(--steel);color:var(--mist)}
.state.live{border-color:var(--ember);color:var(--ember)}
.crafts{columns:3 12rem;column-gap:2rem;color:var(--mist);padding:0;list-style:none;margin:1rem 0 0}
.crafts li{break-inside:avoid;margin-bottom:.8rem}
.crafts b{font-family:var(--display);letter-spacing:.08em;color:var(--bone);font-size:.85rem;display:block}

/* ---------- pvp: facts rows + the landing slider ---------- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem;margin-top:2rem}
.facts > div{display:flex;flex-direction:column;gap:.35rem;border-top:2px solid var(--steel);padding-top:.9rem;min-width:0}
.facts > div.lost{border-top-color:var(--ember-dim)}
.facts .k{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist)}
.facts .v{font-family:var(--display);font-size:1.3rem;line-height:1.2}
.facts .lost .v{color:var(--ember)}
.facts .d{color:var(--mist);font-size:1.05rem}
.v.name-w{color:var(--white-name)} .v.name-p{color:var(--purple-name)} .facts .v.name-r{color:var(--red-name)}
.facts div:has(.name-r){border-top-color:var(--red-name)} .facts div:has(.name-r) .k{color:var(--red-name)}
.ladder{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:1.5rem;font-variant-numeric:tabular-nums}
.ladder div{background:var(--slate);padding:.9rem;text-align:center}
.ladder b{display:block;font-family:var(--display);font-size:1.4rem;color:var(--ember)}
.ladder span{font-size:.95rem;color:var(--mist)}
.slider{margin-top:2.2rem;border:1px solid var(--steel);background:var(--slate)}
.slide-nav{display:flex;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--steel);padding-inline:.5rem}
.slide-nav button[role=tab]{font-family:var(--display);font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;color:var(--mist);padding:.85rem 1.2rem;cursor:pointer;margin-bottom:-1px}
.slide-nav button[aria-selected=true]{color:var(--bone);border-bottom-color:var(--ember)}
.arrows{margin-left:auto;display:flex;gap:.4rem;padding:.4rem}
.arr{width:2.4rem;height:2.4rem;background:var(--slate-2);border:1px solid var(--steel);color:var(--bone);font-size:1.4rem;line-height:1;cursor:pointer}
.arr:hover{border-color:var(--ember)}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;padding:clamp(1.2rem,3vw,2.2rem);min-width:0}
.slide h3{font-size:1.4rem}
.slide .facts{margin-top:1.4rem}

/* ---------- media / community / play ---------- */
.videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.2rem;margin-top:2rem}
.vid{aspect-ratio:16/9;max-width:100%;background:repeating-linear-gradient(135deg,var(--slate) 0 12px,var(--slate-2) 12px 24px);border:1px solid var(--steel);display:grid;place-items:center;color:var(--mist);font-family:var(--display);font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;text-align:center;padding:1rem}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2rem}
.card{background:var(--slate);border:1px solid var(--steel);padding:1.8rem;display:flex;flex-direction:column;gap:.8rem;min-width:0}
.card h3{font-size:1.35rem}
.card p{color:var(--mist);margin:0}
.card ul{color:var(--mist);margin:0;padding-left:1.2rem}
.card .btn{align-self:flex-start;margin-top:auto}
.status{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem;max-width:var(--measure)}
.status li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;color:var(--mist)}
.status li b{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--bone);padding-top:.3rem}
.status li.now b{color:var(--ember)}

/* ---------- footer ---------- */
.page-foot{padding-block:2.5rem 1.5rem;color:var(--mist);font-size:.95rem}
.page-foot .wrap{display:flex;gap:1rem 2rem;flex-wrap:wrap;justify-content:space-between}
.fine{font-size:.62rem;opacity:.45;margin-top:2rem;max-width:none}

/* ---------- responsive: the rail becomes a top bar with a drawer ---------- */
@media (max-width:1100px){
  .hooks,.facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .roles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .attrs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .rail{inset:0 0 auto 0;width:auto;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;padding:calc(.7rem + env(safe-area-inset-top,0px)) 16px .7rem;overflow:visible}
  .rail .pill{margin:0 0 0 .8rem}
  .menu-btn{display:block;margin-left:auto;background:none;border:1px solid var(--steel);color:var(--bone);font-family:var(--display);font-size:.72rem;letter-spacing:.16em;padding:.5rem .8rem;cursor:pointer}
  .rail nav,.rail .rail-cta,.rail .rail-foot{display:none;width:100%}
  .rail.open nav,.rail.open .rail-cta,.rail.open .rail-foot{display:flex}
  .rail{text-align:left}.rail::after{display:none}
  .rail.open nav{margin-top:.8rem}
  .rail.open .rail-foot{padding-top:1rem}
  main,.page-foot{margin-left:0}
  main{padding-top:3.4rem}
  .reel,.lore-grid,.two,.cards{grid-template-columns:1fr}
  .videos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ladder{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:480px){
  .hooks,.facts,.attrs,.roles,.videos{grid-template-columns:1fr}
  .status li{grid-template-columns:1fr;gap:.1rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- builder ---------- */
.bhead{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;margin-top:1.5rem}
.spmeter{flex:1 1 18rem;min-width:0}
.spmeter .lbl{display:flex;justify-content:space-between;font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-variant-numeric:tabular-nums}
.spmeter .lbl b{color:var(--bone)}
.bar-track{height:.5rem;background:var(--slate-2);border:1px solid var(--steel);margin-top:.4rem}
.bar-fill{height:100%;background:var(--ember);width:0;transition:width .2s}
.builder{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:2rem;margin-top:2rem;align-items:start}
.tree{display:flex;flex-direction:column;gap:1rem}
.trow.single{display:flex;justify-content:center}
.trow.single .tbox{width:min(100%,22rem)}
.tcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.tcol{display:flex;flex-direction:column;gap:.7rem;min-width:0}
.tbranch{font-family:var(--display);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);text-align:center}
.tbox{font:inherit;text-align:left;background:var(--slate);border:1px solid var(--steel);color:var(--mist);padding:.75rem .8rem;cursor:pointer;display:flex;flex-direction:column;gap:.25rem;min-height:4.6rem;min-width:0}
.tbox .tname{font-family:var(--display);font-size:.82rem;letter-spacing:.04em;line-height:1.25;color:inherit}
.tbox .tsp{font-size:.85rem;font-variant-numeric:tabular-nums;margin-top:auto}
.tbox.open{color:var(--bone);border-color:var(--mist)}
.tbox.open:hover{border-color:var(--ember)}
.tbox.learned{background:color-mix(in srgb,var(--ember) 18%,var(--slate));border-color:var(--ember);color:var(--bone)}
.tbox.learned .tsp{color:var(--ember)}
.tbox.locked{opacity:.55;cursor:not-allowed}
.tbox.focus{outline:2px solid var(--bone);outline-offset:2px}
.detail{background:var(--slate);border:1px solid var(--steel);padding:1.4rem;position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow-y:auto}
.detail h3{font-size:1.35rem;margin:.3rem 0 .6rem}
.dnote{color:var(--ember);font-size:1rem;margin:0 0 .6rem}
.grants{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.grants li,.choice label{display:flex;flex-direction:column;gap:.2rem;font-size:1rem}
.gtop{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:baseline}
.gtop b{font-family:var(--display);font-size:.88rem;letter-spacing:.04em}
.gtype{font-family:var(--display);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--steel);color:var(--mist);padding:.05rem .4rem}
.gtype.t-New{border-color:var(--ember);color:var(--ember)}
.gmeta{font-size:.9rem;color:var(--ember);font-variant-numeric:tabular-nums}
.gtext{color:var(--mist);line-height:1.45}
.choice{border:1px solid var(--steel);margin:1rem 0 0;padding:.8rem 1rem;display:grid;gap:.8rem}
.choice legend{font-family:var(--display);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);padding:0 .4rem}
.choice label{cursor:pointer;padding-left:1.6rem;position:relative}
.choice input{position:absolute;left:0;top:.25rem;accent-color:var(--ember)}
.choice label.picked .gtop b{color:var(--ember)}
.attrpanel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:2rem;margin-top:2rem}
.arow{display:grid;grid-template-columns:3rem 1fr 2.2rem 2.6rem 2.2rem;align-items:center;gap:.4rem;padding:.35rem 0;border-bottom:1px solid var(--slate-2)}
.ak{font-family:var(--display);color:var(--ember);letter-spacing:.08em}
.an{color:var(--mist);font-size:1rem}
.av{text-align:center;font-variant-numeric:tabular-nums;font-family:var(--display)}
.arow button{height:2.2rem;background:var(--slate-2);border:1px solid var(--steel);color:var(--bone);font-size:1.1rem;cursor:pointer}
.arow button:disabled{opacity:.35;cursor:default}
.attrleft{font-family:var(--display);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-bottom:.6rem}
.attrleft b{color:var(--ember);font-size:1rem}
.statsgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem 2rem}
.sgroup h4{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin:0 0 .4rem;font-weight:700}
.srow{display:flex;justify-content:space-between;gap:1rem;font-size:1rem;padding:.2rem 0;border-bottom:1px solid var(--slate-2)}
.srow span{color:var(--mist)}
.srow b{font-variant-numeric:tabular-nums;font-weight:500}
@media (max-width:1100px){.builder,.attrpanel{grid-template-columns:1fr}.detail{position:static;max-height:none}}
@media (max-width:640px){.tcols{grid-template-columns:repeat(2,minmax(0,1fr))}.statsgrid{grid-template-columns:1fr}}

/* ---------- pvp modes ---------- */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--steel);border:1px solid var(--steel);margin-top:2rem}
.mode{background:var(--slate);padding:1.8rem 1.6rem;min-width:0}
.mode .k{font-family:var(--display);font-size:2rem;letter-spacing:.12em;color:var(--ember)}
.mode h3{font-size:1.1rem;margin:.2rem 0 .8rem;letter-spacing:.06em}
.mode p{color:var(--mist);margin:0 0 .8rem}

/* ---------- team: a card that flips to a brief ---------- */
.dossier{display:grid;grid-template-columns:minmax(0,20rem) minmax(0,1fr);gap:3rem;align-items:start}
.flip{perspective:1400px;width:100%;max-width:20rem;aspect-ratio:5/8}
.flip-inner{position:relative;width:100%;height:100%;transition:transform .8s cubic-bezier(.2,.7,.2,1);transform-style:preserve-3d}
.flip.flipped .flip-inner{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid var(--ember-dim);background:var(--slate);box-shadow:0 20px 50px rgba(0,0,0,.5),inset 0 0 0 6px var(--slate),inset 0 0 0 7px var(--steel);padding:14px;display:flex;flex-direction:column}
.face.front{cursor:pointer}
.face.front .art{position:relative;flex:1;overflow:hidden;border:1px solid var(--steel)}
.face.front img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;filter:contrast(1.04);display:block}
.face.front .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(13,18,24,.85)),linear-gradient(135deg,rgba(217,138,74,.22),rgba(34,45,57,.4));mix-blend-mode:multiply}
.face .plate{text-align:center;padding:.9rem .4rem .3rem}
.face .plate b{display:block;font-family:var(--display);font-size:1.15rem;letter-spacing:.14em;color:var(--bone)}
.face .plate span{font-family:var(--display);font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ember)}
.face .hint{position:absolute;top:22px;right:22px;z-index:1;font-family:var(--display);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--bone);background:rgba(13,18,24,.7);border:1px solid var(--ember-dim);padding:.25rem .5rem;animation:pulse 3.2s ease-in-out infinite}
.face.back{transform:rotateY(180deg);background:linear-gradient(180deg,#1d2733,var(--slate) 60%,#1d1714)}
.face.back .crest{font-family:var(--display);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);text-align:center;padding:.6rem 0 1rem;border-bottom:1px solid var(--steel)}
.face.back [role=tablist]{display:flex;flex-direction:column;gap:.3rem;padding-top:1rem;flex:1}
.face.back [role=tab]{font:inherit;font-family:var(--display);font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;text-align:left;background:none;border:1px solid transparent;color:var(--mist);padding:.75rem .8rem;cursor:pointer}
.face.back [role=tab]:hover{color:var(--bone);border-color:var(--steel)}
.face.back [role=tab][aria-selected=true]{color:var(--bone);border-color:var(--ember-dim);background:rgba(217,138,74,.1)}
.face.back .turn{font:inherit;font-family:var(--display);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;background:none;border:0;color:var(--mist);cursor:pointer;padding:.6rem}
.brief{min-width:0;border-left:1px solid var(--steel);padding-left:3rem;min-height:30rem}
.brief .role-line{font-family:var(--display);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ember);margin:0 0 1.4rem}
.brief h2{margin-bottom:.3rem}
.brief p{margin:0 0 1.1rem}
.brief .sign{font-family:var(--display);letter-spacing:.14em;color:var(--ember);margin-top:1.8rem}
.brief [role=tabpanel]{animation:rise .5s ease}
@keyframes rise{from{opacity:.0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:860px){.modes,.dossier{grid-template-columns:1fr}.brief{border-left:0;padding-left:0;min-height:0}.flip{margin-inline:auto}}
@media (prefers-reduced-motion:reduce){.flip-inner{transition:none}.brief [role=tabpanel]{animation:none}}

/* builder v2: even grid, import, side tabs, sheet */
.tgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto repeat(4,minmax(5.2rem,1fr));gap:.7rem}
.tgrid .tbox{height:100%}
.tbox .tsp i{font-style:normal;color:var(--bone);font-size:.78rem}
.importbar,.codebar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6rem 1rem;align-items:center}
.importbar{background:var(--slate);border:1px solid var(--steel);padding:1rem 1.2rem}
.codebar{margin-top:1rem}
.importbar .k,.codebar .k{font-family:var(--display);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.importbar input,.codebar input{font:inherit;font-size:1rem;background:var(--night);border:1px solid var(--steel);color:var(--bone);padding:.55rem .8rem;min-width:0;width:100%}
.codebar input{font-family:ui-monospace,Consolas,monospace;font-size:.92rem;color:var(--ember)}
.importbar input:focus,.codebar input:focus{outline:2px solid var(--ember);outline-offset:1px}
.imsg{grid-column:1/-1;margin:0;font-size:1rem;min-height:0}
.imsg:empty{display:none}
.imsg.good{color:#8fbf7f}.imsg.warn{color:var(--ember)}.imsg.bad{color:var(--red-name)}
.side{min-width:0;position:sticky;top:1rem}
.sidetabs{display:flex;border:1px solid var(--steel);border-bottom:0;background:var(--slate-2)}
.sidetabs [role=tab]{flex:1;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;background:none;border:0;border-bottom:2px solid transparent;color:var(--mist);padding:.75rem .4rem;cursor:pointer}
.sidetabs [role=tab][aria-selected=true]{color:var(--bone);border-bottom-color:var(--ember);background:var(--slate)}
.side .detail{position:static;max-height:calc(100vh - 5rem)}
.dnote.small{font-size:.92rem;margin:.2rem 0 0;color:var(--mist);font-style:italic}
.gtype.t-mod{border-color:var(--ember-dim);color:var(--bone)}
.subh{font-family:var(--display);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin:1.6rem 0 .6rem;font-weight:700}
.sheet-top,.sheet-attrs{display:grid;gap:.6rem;margin-top:.8rem}
.sheet-top{grid-template-columns:1fr 1fr}
.sheet-top div:last-child{grid-column:1/-1}
.sheet-attrs{grid-template-columns:repeat(6,minmax(0,1fr))}
.sheet-top div,.sheet-attrs div{background:var(--slate-2);border:1px solid var(--steel);padding:.5rem .7rem;display:flex;flex-direction:column;min-width:0}
.sheet-attrs div{align-items:center}
.sheet-top .k,.sheet-attrs .k{font-family:var(--display);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.sheet-attrs b{font-family:var(--display);font-size:1.2rem;color:var(--ember)}
.mono{font-family:ui-monospace,Consolas,monospace;font-size:.85rem;word-break:break-all;color:var(--ember)}
@media (max-width:1100px){.side{position:static}.side .detail{max-height:none}}
@media (max-width:640px){.tgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}.tgrid .tbranch{display:none}.tgrid .tbox{grid-column:auto!important;grid-row:auto!important}.importbar,.codebar{grid-template-columns:1fr}.sheet-attrs{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- pk calculator + recruiting ---------- */
.calc{background:var(--slate);border:1px solid var(--steel);padding:1.6rem;margin:2.2rem 0 1.6rem;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1rem 2.5rem;align-items:center}
.calc h3{grid-column:1/-1;font-size:1.2rem}
.calc-in{display:grid;grid-template-columns:auto 6rem;gap:.7rem 1rem;align-items:center}
.calc-in label{color:var(--mist)}
.calc-in input{font:inherit;background:var(--night);border:1px solid var(--steel);color:var(--bone);padding:.45rem .6rem;width:100%;font-variant-numeric:tabular-nums}
.calc-in input:focus{outline:2px solid var(--ember);outline-offset:1px}
.calc-out{display:flex;gap:1.2rem;align-items:center}
.calc-out b{font-family:var(--display);font-size:2.8rem;color:var(--ember);line-height:1}
.calc-out span{color:var(--mist)}
.calc-out strong{color:var(--bone)}
.recruit{border:1px solid var(--ember-dim);background:linear-gradient(135deg,rgba(217,138,74,.1),transparent 60%),var(--slate);padding:2rem}
#recruit{margin-top:3.5rem}
.recruit h2{margin-top:.3rem}
@media (max-width:860px){.calc{grid-template-columns:1fr}}

/* builder one pane (owner 2026-10-09): attributes | stats | tree | skills, side by side */
#builder .wrap{max-width:none}
.onepane{display:grid;grid-template-columns:minmax(14rem,.75fr) minmax(15rem,.8fr) minmax(0,2.4fr) minmax(0,1.5fr);grid-template-areas:"pa ps tree side";gap:1.6rem;margin-top:1.5rem;align-items:start}
.onepane .pa{grid-area:pa;min-width:0}.onepane .ps{grid-area:ps;min-width:0}.onepane .tree{grid-area:tree;min-width:0}.onepane .side{grid-area:side;min-width:0}
.onepane .statsgrid{grid-template-columns:1fr;gap:1rem}
.onepane .arow{grid-template-columns:minmax(0,1fr) 2rem 2.2rem 2rem}
.onepane .ak{display:none}
.onepane .an{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.paneh{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--mist);margin:0 0 .8rem}
.rail nav a.sub{font-size:.62rem;padding:.25rem .8rem;margin-top:0}
@media (max-width:1500px){.onepane{grid-template-columns:minmax(14rem,.8fr) minmax(0,2.2fr) minmax(0,1.4fr);grid-template-areas:"pa tree side" "ps tree side"}}
@media (max-width:1100px){.onepane{grid-template-columns:1fr;grid-template-areas:"pa" "ps" "tree" "side"}}

/* builder in the game's own colours (media/ingame/layout.md, 2026-10-09) */
#builder{--g-surface:#171D23;--g-elev:#29333D;--g-edge:#63717C;--g-text:#EEE9DD;--g-muted:#B2B6B2;--g-accent:#D1AD72;--g-learned:#F2A638;--g-ready:#A6CCDB;--g-locked:#404548}
#builder .paneh,#builder .sgroup h4,#builder .tbranch{color:var(--g-accent);font-weight:700}
#builder .srow b,#builder .av,#builder .attrleft b{color:var(--g-accent)}
#builder .ak{color:var(--g-accent)}
#builder .srow span,#builder .an{color:var(--g-muted)}
#builder .tbox{background:var(--g-surface);border-color:var(--g-locked);color:var(--g-muted);text-align:center;align-items:center;min-height:5rem}
#builder .tbox.open{border-color:var(--g-ready);color:var(--g-text)}
#builder .tbox.learned{background:color-mix(in srgb,var(--g-learned) 16%,var(--g-surface));border-color:var(--g-learned);color:var(--g-text)}
#builder .tbox.learned .tsp{color:var(--g-learned)}
#builder .tbox .tsp{margin-top:.15rem;font-size:.8rem}
#builder .tstate{font-family:var(--display);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-locked)}
#builder .tbox.open .tstate{color:var(--g-ready)}
#builder .tbox.learned .tstate{color:var(--g-learned)}
#builder .tbox.locked .tstate{color:var(--g-muted)}
#builder .detail,#builder .sidetabs{background:var(--g-surface);border-color:var(--g-edge)}

/* everything about Player Killing reads red (owner 2026-10-09) */
.pkzone{--ember:var(--red-name);--ember-dim:var(--red-name)}
.pkzone .eyebrow,.pkzone h2,.pkzone h3,.pkzone .facts .k,.pkzone .facts .v{color:var(--red-name)}
.pkzone .facts > div{border-top-color:var(--red-name)}
.pkzone .ladder b,.pkzone .calc-out b{color:var(--red-name)}

/* game skill icons (media/icons, exported from the N-Hance set the game uses) */
#builder .gicon{width:1.6rem;height:1.6rem;border:1px solid var(--g-edge);border-radius:3px;flex:none;margin-right:.45rem;vertical-align:middle}
#builder .ticon{width:1.9rem;height:1.9rem;border:1px solid var(--g-edge);border-radius:3px;margin-bottom:.25rem}
#builder .tbox.locked .ticon{filter:grayscale(1) brightness(.6)}
#builder .abar{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1rem;padding:.5rem;background:var(--g-surface);border:1px solid var(--g-edge)}
#builder .aslot{position:relative;width:2.8rem;height:2.8rem;border:1px solid var(--g-learned);display:grid;place-items:center;overflow:hidden}
#builder .aicon{width:100%;height:100%}
#builder .aslot i{font-style:normal;font-size:.5rem;text-align:center;line-height:1.1;color:var(--g-muted);padding:.1rem}
#builder .aslot img+i{display:none}

/* news: cards (generated by tools/build_news.py); the whole card is the link */
.ncards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:1.6rem}
.ncard{display:flex;flex-direction:column;gap:.5rem;padding:1.4rem;background:var(--slate);border:1px solid var(--steel);color:var(--bone);text-decoration:none;min-width:0;transition:border-color .2s,transform .2s}
.ncard:hover,.ncard:focus-visible{border-color:var(--ember);transform:translateY(-2px)}
.ncard time{font-family:var(--display);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
.ncard b{font-family:var(--display);font-weight:700;letter-spacing:.03em;line-height:1.3;text-wrap:balance}
.ncard span{color:var(--mist);flex:1}
.ncard em{font-style:normal;font-family:var(--display);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ember)}
@media (max-width:1100px){.ncards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ncards{grid-template-columns:1fr}}
.news .post{max-width:46rem}
.news .post h3{font-family:var(--display);font-size:1rem;letter-spacing:.08em;color:var(--ember);margin:1.6rem 0 .4rem}
.news .post ul{padding-left:1.2rem}.news .post li{margin:.35rem 0}