/* Atherea — gold & steel dark fantasy */
:root {
  --bg: #08090c; --panel: #0f1117; --panel2: #141721; --line: #222632; --text: #e8e4dc; --mute: #8d909b;
  --gold: #c9a45c; --gold-hi: #e9c983; --ember: #e2763a; --steel: #5b7fb6;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Manrope", system-ui, sans-serif;
  --cut: 14px; /* size of the clipped corners */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 15px/1.75 var(--sans); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.clip { clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }

/* ---------- top bar: logo | centered nav | actions ---------- */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 50; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 30px;
  padding: 22px 4vw; background: linear-gradient(#08090cd9, #08090c00); transition: background .3s, padding .3s, border-color .3s; border-bottom: 1px solid transparent; }
.topbar.solid { background: #08090cf0; padding-block: 12px; backdrop-filter: blur(8px); border-color: #c9a45c33; }
.brand img { height: 26px; width: auto; }
.mainnav { display: flex; gap: 6px; }
.mainnav a { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 8px 9px; white-space: nowrap; position: relative; transition: color .2s; }
.mainnav a:hover, .mainnav a.on { color: var(--gold-hi); }
.mainnav a.on::before { content: "◆"; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; font-size: 7px; color: var(--gold); }
.tag { font-style: normal; font-size: 9px; color: var(--ember); letter-spacing: .1em; }
.actions { display: flex; gap: 12px; align-items: center; justify-content: flex-end; }
.burger { display: none; }

.btn-gold, .btn-line { --cut: 9px; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  padding: 12px 22px; cursor: pointer; transition: .2s; border: 0;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.btn-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, #a07f3c); color: #1a1408; }
.btn-gold:hover { filter: brightness(1.12); }
.btn-gold[disabled] { opacity: .4; cursor: not-allowed; filter: none; }
.btn-line { background: #ffffff08; color: var(--text); box-shadow: inset 0 0 0 1px #c9a45c66; }
.btn-line:hover { background: #c9a45c1f; color: var(--gold-hi); }
.big { padding: 16px 30px; font-size: 12.5px; }
.small { padding: 8px 14px; font-size: 11px; }
.eyebrow, .kicker { display: flex; align-items: center; gap: 12px; font: 700 11.5px var(--sans); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.eyebrow::before, .kicker::before { content: ""; width: 34px; height: 1px; background: linear-gradient(90deg, #0000, var(--gold)); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(100vh, 1000px); display: flex; align-items: center; padding: 120px 5vw 90px 8vw; overflow: hidden;
  background: #000 var(--hero) right center / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 0%, #000d 28%, #0000 62%), linear-gradient(0deg, var(--bg), #0000 22%); }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, #0000, #c9a45c55, #0000); }
.hero-text { position: relative; max-width: 500px; transition: opacity .4s; }
.hero-logo img { width: min(440px, 80vw); margin: 4px 0 30px; filter: drop-shadow(0 0 24px #e2763a22); }
.hero-title { font: 600 clamp(56px, 8vw, 104px)/1 var(--serif); margin: 0 0 28px; }
.hero .lead { font: italic 500 21px/1.5 var(--serif); color: #e6dcc8; margin: 0 0 14px; }
.hero .body { font-size: 14.5px; color: #b8b3aa; margin: 0 0 34px; }
.cta { display: flex; gap: 14px; flex-wrap: wrap; }
.watch { margin-top: 34px; display: flex; align-items: center; gap: 16px; background: none; border: 0; color: var(--text); cursor: pointer; padding: 0; text-align: left; font-family: var(--sans); }
.watch .ring { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold-hi); font-size: 14px; padding-left: 3px;
  box-shadow: 0 0 0 6px #c9a45c14, 0 0 30px #c9a45c33; transition: .25s; }
.watch:hover .ring { background: var(--gold); color: #1a1408; }
.watch b { display: block; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.watch small { color: var(--mute); font-size: 12px; }
.scroll-cue { position: absolute; left: 50%; bottom: 26px; translate: -50% 0; width: 22px; height: 36px; border: 1px solid #c9a45c77; border-radius: 12px; }
.scroll-cue i { position: absolute; left: 50%; top: 7px; width: 2px; height: 7px; background: var(--gold); translate: -50% 0; animation: cue 1.8s infinite; }
@keyframes cue { 60% { transform: translateY(12px); opacity: 0; } }
.embers { position: absolute; inset: 0; pointer-events: none; }
.embers i { position: absolute; bottom: -10px; width: 3px; height: 3px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 6px var(--ember); animation: rise linear infinite; opacity: 0; }
@keyframes rise { 12% { opacity: .9; } 70% { opacity: .5; } 100% { transform: translate(var(--dx), calc(-1 * var(--h, 50vh))); opacity: 0; } }

/* trailer inside the hero */
.hero-video { position: absolute; inset: 0; z-index: 5; background: #000; }
.hero-video video, .hero-video iframe { width: 100%; height: 100%; object-fit: contain; border: 0; display: block; }
.video-close { position: absolute; top: 96px; right: 4vw; z-index: 6; width: 44px; height: 44px; border-radius: 50%; border: 1px solid #c9a45c88; background: #000b; color: var(--gold-hi); font-size: 15px; cursor: pointer; }
.hero.playing .hero-text, .hero.playing .scroll-cue { opacity: 0; pointer-events: none; }

/* right-side section rail (diamonds, label on hover) */
.rail { position: fixed; right: 2.2vw; top: 50%; translate: 0 -50%; z-index: 40; display: flex; flex-direction: column; gap: 18px; }
.rail::before { content: ""; position: absolute; right: 5px; top: -30px; bottom: -30px; width: 1px; background: linear-gradient(#0000, #c9a45c44, #0000); }
.rail a { position: relative; display: block; width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid #c9a45c99; background: var(--bg); transition: .25s; }
.rail a.on { background: var(--gold); box-shadow: 0 0 12px #c9a45c88; }
.rail a span { position: absolute; right: 22px; top: 50%; transform: rotate(-45deg) translate(0, -50%); transform-origin: right top; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-hi); opacity: 0; transition: .2s; pointer-events: none; }
.rail a:hover span, .rail a.on span { opacity: 1; }
.rail a.on span { color: var(--mute); }
.rail a:hover span { color: var(--gold-hi); }

/* ---------- content blocks ---------- */
.block { padding: 110px 6vw 30px 8vw; }
.block-head { display: flex; align-items: baseline; gap: 30px; flex-wrap: wrap; margin-bottom: 40px; }
.block-head .eyebrow { width: 100%; margin: 0; }
.block-head h2, .page-head h1 { font: 600 clamp(36px, 4.4vw, 58px)/1.05 var(--serif); margin: 0; }
.more { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.more::after { content: " ⟶"; }
.more:hover { color: var(--gold-hi); }

.classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.class-card { --cut: 18px; display: block; background: var(--panel); position: relative; transition: .3s;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.class-card::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; transition: .3s; }
.class-card:hover::after { box-shadow: inset 0 0 0 1px #c9a45c88; }
.class-card:hover { transform: translateY(-4px); }
.class-art { aspect-ratio: 4/3.4; background: #000 var(--img) 52% 22% / 190% no-repeat; transition: background-size .6s; }
.class-card:hover .class-art { background-size: 205%; }
.class-art.empty { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #2a2414, #08090c 70%); }
.class-art.empty span { font: 600 64px var(--serif); color: #c9a45c33; }
.class-info { padding: 18px 20px 22px; border-top: 1px solid #c9a45c33; }
.class-info h3 { font: 600 24px/1.1 var(--serif); margin: 0 0 8px; }
.class-info .role { color: var(--gold); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; margin: 0 0 4px; text-transform: uppercase; }
.class-info p { margin: 0; font-size: 13.5px; color: var(--mute); }
.class-info .more { display: inline-block; margin-top: 12px; font-size: 11px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
.card { --cut: 18px; display: block; background: var(--panel); position: relative; transition: .3s;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.card::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; transition: .3s; }
.card:hover::after { box-shadow: inset 0 0 0 1px #c9a45c88; }
.card:hover { transform: translateY(-4px); }
.card-img { aspect-ratio: 16/9; background: #000 center / cover; }
.card-body { padding: 18px 22px 24px; }
.card-body h3 { font: 600 23px/1.2 var(--serif); margin: 4px 0 8px; }
.card-body p { margin: 0; font-size: 13.5px; color: var(--mute); }
.meta { font-size: 12px; color: var(--mute); margin: 0; }
.cat { color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 10.5px; margin-right: 8px; }

/* lore strip (home) */
.lore-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.lore-card { --cut: 22px; position: relative; min-height: 360px; display: flex; align-items: flex-end; padding: 24px;
  background: linear-gradient(0deg, #000 12%, #000a 55%, #0003), var(--img) center / cover; transition: .3s;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.lore-card:hover { transform: translateY(-4px); }
.lore-card .num { position: absolute; top: 14px; right: 22px; font: 600 44px var(--serif); color: #c9a45c55; }
.lore-card .sub { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin: 0; }
.lore-card h3 { font: 600 28px/1.1 var(--serif); margin: 4px 0 10px; }
.lore-card .ex { font-size: 13px; color: #c9c3b8; margin: 0; }

/* ---------- shop ---------- */
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.shop-item { --cut: 16px; position: relative; background: var(--panel); height: 100%; display: flex; flex-direction: column;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); box-shadow: inset 0 0 0 1px var(--line); }
.badge { position: absolute; top: 14px; right: 14px; z-index: 2; background: var(--gold); color: #1a1408; font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 3px 9px; }
.shop-img { aspect-ratio: 1; background: #000 center / cover; }
.shop-img.empty { display: grid; place-items: center; background: radial-gradient(circle at 50% 45%, #2c2412, #08090c 70%); }
.shop-img.empty span { font: 600 20px var(--serif); color: #c9a45c55; letter-spacing: .15em; text-transform: uppercase; }
.shop-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.shop-body h3 { font: 600 21px var(--serif); margin: 0; }
.shop-body .desc { font-size: 13px; color: var(--mute); margin: 0; flex: 1; }
.price { display: flex; gap: 10px; align-items: baseline; }
.price s { color: var(--mute); font-size: 13px; }
.price strong { font-size: 20px; font-weight: 600; color: var(--gold-hi); }
.shop-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.shop-tabs button { background: none; border: 0; box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); padding: 8px 18px; cursor: pointer; font: 600 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.shop-tabs button.on, .shop-tabs button:hover { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-hi); }
.preview-note { box-shadow: inset 0 0 0 1px #e2763a88; color: var(--ember); padding: 10px 16px; font-size: 13px; margin: 0 0 24px; }
.fineprint { color: var(--mute); font-size: 12px; margin-top: 30px; }

/* ---------- inner pages ---------- */
.page { padding: 150px 6vw 60px 8vw; min-height: 70vh; }
.page-head { margin-bottom: 40px; }
.page-head .sub { color: var(--mute); }
.article { max-width: 980px; }
.article-cover { aspect-ratio: 21/9; background: center / cover; margin-bottom: 36px; }
.md-body { font-size: 15.5px; color: #d6d1c8; }
.md-body h2, .md-body h3 { font-family: var(--serif); font-weight: 600; color: var(--text); }
.md-body h2 { font-size: 30px; } .md-body h3 { font-size: 24px; margin-top: 44px; }
.md-body a { color: var(--gold-hi); }
.md-body blockquote { margin: 0 0 14px; padding: 2px 0 2px 22px; border-left: 1px solid var(--gold); font: italic 500 19px/1.55 var(--serif); color: #e6dcc8; }
.md-body blockquote p { margin: 0; }
.md-body img { max-width: 240px; margin: 10px 0; box-shadow: 0 0 0 1px var(--line); }
.md-body pre { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); padding: 16px 18px; overflow-x: auto; font-size: 13px; }
.md-body code { color: var(--gold-hi); }
.empty-msg { color: var(--mute); }

/* lore page */
.lore-page { max-width: 1040px; }
.lore-toc { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 60px; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.lore-toc a { color: var(--mute); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.lore-toc a span { color: var(--gold); font: 600 15px var(--serif); margin-right: 8px; }
.lore-toc a:hover { color: var(--gold-hi); }
.chapter { margin-bottom: 100px; scroll-margin-top: 100px; }
.chapter-img { --cut: 26px; aspect-ratio: 21/9; background: center / cover; margin-bottom: 34px; position: relative;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.chapter-img span { position: absolute; right: 26px; bottom: 6px; font: 600 90px/1 var(--serif); color: #c9a45c55; }
.chapter h2 { font: 600 clamp(36px, 4.4vw, 54px)/1.05 var(--serif); margin: 0 0 18px; }
.opening { font: italic 500 23px/1.5 var(--serif); color: var(--gold-hi); margin: 0 0 26px; }

/* class page */
.class-hero { position: relative; min-height: min(80vh, 820px); display: flex; align-items: flex-end; padding: 0 6vw 70px 8vw; background: #000 var(--hero) 70% 25% / cover no-repeat; }
.class-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000 5%, #000a 40%, #0000 70%), linear-gradient(0deg, var(--bg), #0000 40%); }
.class-hero-text { position: relative; max-width: 580px; }
.class-hero h1 { font: 600 clamp(56px, 8vw, 110px)/.95 var(--serif); margin: 0 0 18px; }
.class-hero .lead { font: italic 500 21px/1.5 var(--serif); color: #e6dcc8; }
.res { font-size: 14px; color: #c9c3b8; }
.res span { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; margin-right: 10px; }
.class-page { padding-top: 40px; }
.class-grid { display: grid; grid-template-columns: 1fr 360px; gap: 60px; align-items: start; }
.class-grid section { margin-bottom: 46px; }
.passive { background: linear-gradient(90deg, #c9a45c1a, #0000); border-left: 1px solid var(--gold); padding: 18px 22px; }
.passive p:last-child { margin: 0; }
.skills { display: grid; gap: 10px; }
.skill { --cut: 12px; display: grid; grid-template-columns: 48px 1fr auto; gap: 16px; align-items: start; background: var(--panel); padding: 16px 18px; box-shadow: inset 0 0 0 1px var(--line);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.skill.ult { box-shadow: inset 0 0 0 1px #c9a45c99; background: linear-gradient(90deg, #c9a45c17, var(--panel)); }
.skill-icon { width: 48px; height: 48px; display: grid; place-items: center; background: var(--panel2); color: var(--mute); font: 600 18px var(--serif); transform: rotate(45deg) scale(.78); }
.skill-icon > * , .skill-icon { line-height: 1; }
.skill.ult .skill-icon { background: var(--gold); color: #1a1408; }
.skill.passive .skill-icon { color: var(--steel); }
.skill h3 { font: 600 20px var(--serif); margin: 0 0 4px; }
.skill h3 em { font: normal 700 10px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-left: 8px; }
.skill h3 em.p { color: var(--steel); }
.skill p { margin: 0; font-size: 13.5px; color: var(--mute); }
.cost { font-size: 11px; font-weight: 600; color: var(--mute); white-space: nowrap; box-shadow: inset 0 0 0 1px var(--line); padding: 3px 10px; }
.class-side { position: sticky; top: 100px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); padding: 24px; }
.radar { width: 100%; height: auto; overflow: visible; }
.radar .rg { fill: none; stroke: #ffffff12; }
.radar .ra { stroke: #ffffff12; }
.radar .rv { fill: #c9a45c40; stroke: var(--gold-hi); stroke-width: 1.6; }
.radar .rd { fill: var(--gold-hi); }
.radar .rl { fill: var(--mute); font: 600 10.5px var(--sans); text-anchor: middle; dominant-baseline: middle; letter-spacing: .08em; text-transform: uppercase; }
.radar .rl tspan { fill: var(--text); }
.bars { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 9px; }
.bars li { display: grid; grid-template-columns: 82px 1fr 22px; gap: 10px; align-items: center; font-size: 12px; color: var(--mute); }
.bars i { height: 4px; background: #ffffff10; position: relative; overflow: hidden; }
.bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--v); background: linear-gradient(90deg, var(--steel), var(--gold-hi)); }
.bars b { color: var(--text); font-weight: 600; text-align: right; }
.class-nav { display: flex; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 20px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.class-nav a { color: var(--mute); } .class-nav a:hover { color: var(--gold-hi); }

.footer { margin-top: 80px; padding: 46px 6vw 40px 8vw; border-top: 1px solid #c9a45c2a; display: flex; align-items: center; gap: 40px; flex-wrap: wrap; color: var(--mute); font-size: 13px; }
.footer img { height: 20px; width: auto; opacity: .85; }
.footer p { flex: 1; margin: 0; }
.social { display: flex; gap: 20px; }
.social a { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.social a:hover { color: var(--gold-hi); }

/* ---------- mobile ---------- */
@media (max-width: 1080px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 14px; padding: 14px 16px; }
  .burger { display: grid; gap: 5px; width: 30px; background: none; border: 0; padding: 0; cursor: pointer; }
  .burger span { height: 1.5px; background: var(--gold-hi); }
  .mainnav { display: none; position: fixed; inset: 58px 0 auto 0; flex-direction: column; gap: 0; background: #08090cf8; padding: 8px 16px 18px; border-bottom: 1px solid #c9a45c33; }
  .menu-open .mainnav { display: flex; }
  .mainnav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .mainnav a.on::before { display: none; }
  .actions .btn-line { display: none; }
  .actions { grid-column: 2; }
  .actions .btn-gold { padding: 10px 14px; font-size: 10.5px; }
  .rail { display: none; }
  .hero { padding: 100px 16px 70px; align-items: flex-end; background-position: 76% center; }
  .hero::before { background: linear-gradient(0deg, #000 0%, #000d 48%, #0000 82%); }
  .block, .page, .footer { padding-left: 16px; padding-right: 16px; }
  .class-grid { grid-template-columns: 1fr; }
  .class-side { position: static; }
  .class-hero { padding: 0 16px 50px; min-height: 70vh; background-position: 60% 20%; }
  .class-hero::before { background: linear-gradient(0deg, var(--bg) 5%, #000b 50%, #0000 85%); }
  .video-close { top: 72px; right: 16px; }
}

.skill-icon span { transform: rotate(-45deg) scale(1.28); color: inherit; }
.skill-icon { color: var(--gold-hi); }

/* hero particles: image dimmed underneath, lit parts redrawn as WebGL points */
.hero { touch-action: pan-y; }
.hero-particles { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.hero-text, .embers { z-index: 1; }

/* ---------- signed-in chip ---------- */
.me-chip { display: flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; box-shadow: inset 0 0 0 1px #c9a45c44; transition: .2s; }
.me-chip:hover, .me-chip.on { box-shadow: inset 0 0 0 1px var(--gold); }
.me-av { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 1px var(--gold); flex: none; }
.me-av img { width: 100%; height: 100%; object-fit: cover; }
.me-txt { display: grid; line-height: 1.15; }
.me-txt b { font-size: 12.5px; font-weight: 700; }
.me-txt small { font-size: 10.5px; color: var(--gold); letter-spacing: .06em; }
.owned { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fd19e; box-shadow: inset 0 0 0 1px #8fd19e66; padding: 7px 12px; }

/* ---------- profile ---------- */
.pf-hero { position: relative; min-height: min(74vh, 760px); display: flex; align-items: flex-end; padding: 0 6vw 50px 8vw; }
.pf-art { position: absolute; inset: 0; background: #000; }
.pf-art::before { content: ""; position: absolute; inset: 0; background: var(--art) 70% 22% / cover no-repeat; filter: brightness(1.8) contrast(1.08) saturate(1.12); transition: background-image .5s; }
.pf-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #000d 0%, #0007 32%, #0000 58%), linear-gradient(0deg, var(--bg), #0000 35%); }
.pf-head { position: relative; display: flex; gap: 28px; align-items: center; }
.pf-av { position: relative; width: 132px; height: 132px; flex: none; }
.pf-av .av { position: absolute; inset: 22px; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.pf-av .frame { position: absolute; inset: -10px; width: 152px; height: 152px; mix-blend-mode: screen; pointer-events: none; }
.pf-head h1 { font: 600 clamp(48px, 6vw, 84px)/1 var(--serif); margin: 0; }
.pf-title { font: italic 500 20px var(--serif); color: var(--gold-hi); margin: 4px 0 0; }
.pf-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 0; margin: 16px 0; font-size: 14px; }
.pf-tags span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.pf { padding-top: 30px; }
.pf-grid { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.pf-grid > div, .pf-grid > aside { display: grid; gap: 22px; }
.pf-card { background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); padding: 24px 26px; }
.pf-card.passive { background: linear-gradient(90deg, #c9a45c14, var(--panel)); }
.pf-card .trait { color: var(--ember); font-size: 13px; margin: 0 0 6px; }
.pf-card h3 { font: 600 24px var(--serif); margin: 0 0 6px; }
.big-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.big-stats span, .set-sum span { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.big-stats b { font: 600 32px var(--serif); color: var(--text); }
.split { display: flex; height: 5px; margin: 16px 0 10px; gap: 2px; }
.split i { width: var(--w); } .split .a { background: var(--ember); } .split .d { background: var(--steel); } .split .s { background: var(--gold); }
.muted { color: var(--mute); } .small { font-size: 12px; }
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tabs button { background: none; border: 0; box-shadow: inset 0 0 0 1px var(--line); color: var(--mute); padding: 8px 16px; font: 700 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.tabs button.on { box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-hi); }
.set-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 14px; }
.set-sum b { font: 600 22px var(--serif); }
.gear { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gear th { text-align: left; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.gear td { padding: 9px 10px; border-bottom: 1px solid #ffffff08; }
.gear td small { display: block; color: var(--mute); font-size: 11px; }
.el { font-weight: 600; font-size: 12px; }
.el-fire { color: #f08a5d; } .el-void { color: #b48cff; } .el-nature { color: #8fd19e; } .el-water { color: #6cb6ff; } .el-light { color: #f5e08a; } .el-dark { color: #9a8fb3; } .el-none { color: var(--mute); }
.rank { text-align: center; background: radial-gradient(circle at 50% 30%, #c9a45c22, var(--panel) 70%); }
.rank .eyebrow { justify-content: center; }
.rank-num { font: 600 72px/1 var(--serif); color: var(--gold-hi); }
.rank-dmg { margin: 6px 0 0; font-weight: 600; }
.kv { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 13px; }
.kv li { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid #ffffff08; padding-bottom: 6px; color: var(--mute); }
.kv b { color: var(--text); font-weight: 600; }
.wardrobe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.ward { background: #000; box-shadow: inset 0 0 0 1px var(--line); text-align: center; padding-bottom: 8px; }
.ward img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.ward span { font-size: 11.5px; font-weight: 600; }
.sync-note { text-align: center; }

/* ---------- leaderboard ---------- */
.lb { max-width: 1100px; }
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin-bottom: 34px; }
.pod { position: relative; text-align: center; padding: 22px 14px 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 4px; }
.pod.p1 { padding-top: 40px; box-shadow: inset 0 0 0 1px var(--gold); background: radial-gradient(circle at 50% 0%, #c9a45c2e, var(--panel) 70%); }
.pod-rank { font: 600 40px/1 var(--serif); color: var(--gold); }
.pod.p1 .pod-rank { font-size: 56px; color: var(--gold-hi); }
.pod b { font-size: 15px; }
.pod-dmg { color: var(--mute); font-size: 13px; font-weight: 600; }
.lb-tools { display: flex; gap: 14px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
.lb-tools input { flex: 1; min-width: 220px; background: var(--panel); border: 0; box-shadow: inset 0 0 0 1px var(--line); color: var(--text); padding: 12px 16px; font: 500 14px var(--sans); }
.lb-tools input:focus { outline: none; box-shadow: inset 0 0 0 1px var(--gold); }
.lb-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lb-table th { text-align: left; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); padding: 10px 12px; border-bottom: 1px solid var(--line); }
.lb-table td { padding: 10px 12px; border-bottom: 1px solid #ffffff08; position: relative; }
.lb-table .r { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.lb-table .rk { color: var(--mute); width: 70px; font-variant-numeric: tabular-nums; }
.lb-table .nm { position: relative; z-index: 1; }
.lb-table .bar { position: absolute; left: 12px; bottom: 4px; height: 2px; width: calc(var(--w) * .9); background: linear-gradient(90deg, #c9a45c88, #0000); }
.lb-table tr.mine td { background: #c9a45c1c; }
.lb-table tr.mine .nm { color: var(--gold-hi); font-weight: 700; }
.lb-table tr { scroll-margin-top: 120px; }
@media (max-width: 1080px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-hero { padding: 0 16px 40px; min-height: 70vh; }
  .pf-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .big-stats, .set-sum { grid-template-columns: 1fr 1fr; }
  .me-txt { display: none; } .me-chip { padding: 3px; }
  .podium { grid-template-columns: 1fr; } .pod.p1 { order: -1; }
}

/* ---------- avatar + cosmetic frame ---------- */
.fav { position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; vertical-align: middle; }
.fav-img { position: absolute; left: 6%; top: 6%; width: 88%; height: 88%; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--gold); background: #111; }
.fav.has-frame .fav-img { left: var(--fx); top: var(--fy); width: var(--fd); height: var(--fd); box-shadow: none; }
.fav-frame { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; pointer-events: none; filter: brightness(1.7) contrast(1.15) saturate(1.2); }
.fav.glow.has-frame::before { content: ""; position: absolute; left: 22%; top: 8%; width: 58%; height: 40%; border-radius: 50%;
  background: radial-gradient(#e2763a66, #0000 70%); filter: blur(8px); animation: emberpulse 2.6s ease-in-out infinite; }
@keyframes emberpulse { 50% { opacity: .35; transform: scale(.92); } }
.fav.initial { display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #1b1d26, #0b0c10); box-shadow: 0 0 0 1px #ffffff22; }
.fav.initial b { font: 600 64px var(--serif); color: #ffffff55; }
.me-chip .fav.chip { margin: -6px -2px -6px -6px; }
.me-chip { padding-left: 2px; }

/* ---------- title plate ---------- */
.plate { --cut: 10px; position: relative; display: inline-flex; align-items: center; gap: 12px; padding: 9px 22px; margin-top: 8px;
  background: linear-gradient(180deg, #2a2418, #120f0a); color: var(--gold-hi); font: 600 19px/1 var(--serif); letter-spacing: .14em; text-transform: uppercase;
  clip-path: polygon(var(--cut) 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, var(--cut) 100%, 0 50%);
  box-shadow: inset 0 0 0 1px #c9a45c; text-shadow: 0 0 12px #e2763a55; }
.plate::before { content: ""; position: absolute; inset: 3px; clip-path: inherit; box-shadow: inset 0 0 0 1px #c9a45c55; pointer-events: none; }
.plate .gem { width: 7px; height: 7px; transform: rotate(45deg); background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.plate.sm { --cut: 7px; padding: 4px 12px; gap: 7px; font-size: 11px; margin: 0 0 0 10px; }
.plate.sm .gem { width: 5px; height: 5px; }

/* ---------- profile extras ---------- */
.pf-av { width: auto; height: auto; }
.pf-plate { margin: 2px 0 4px; }
.pf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pf { position: relative; }
.pf-card { position: relative; background: #0f1117e6; backdrop-filter: blur(3px); }
.unlinked { max-width: 760px; }
.pf-hero.basic .pf-art::before { filter: brightness(1) saturate(.6); }
.me-row { display: inline-flex; align-items: center; gap: 10px; position: relative; z-index: 1; }
.lb-table a.nm:hover { color: var(--gold-hi); }

/* ---------- shop: category previews + sections ---------- */
.prev-title, .prev-frame { display: grid; place-items: center; align-content: center; gap: 8px; background: radial-gradient(circle at 50% 45%, #1d1a12, #08090c 75%); }
.prev-title small { color: var(--mute); font-size: 12px; letter-spacing: .1em; }
.shop-sec { margin-bottom: 54px; }
.shop-sec h2 { font: 600 34px var(--serif); margin: 0; }
.shop-sec .where { color: var(--mute); margin: 4px 0 20px; font-size: 14px; }
.shop-sec .where b { color: var(--gold); font-weight: 600; }

/* ---------- nav: Shop stands out ---------- */
.mainnav a.nav-shop { color: var(--ember); font-weight: 800; }
.mainnav a.nav-shop:hover, .mainnav a.nav-shop.on { color: #ff9a55; }

.badges { display: grid; gap: 12px; }
.badge-show { margin: 0; text-align: center; background: radial-gradient(circle at 50% 40%, #c9a45c22, #0000 65%); padding: 10px 0 4px; }
.badge-show img { width: 170px; margin: 0 auto; mix-blend-mode: screen; filter: drop-shadow(0 6px 18px #000); }
.badge-show figcaption { font-size: 13px; color: var(--gold-hi); margin-top: 4px; }

.plate { white-space: nowrap; }
.prev-title .plate { font-size: 13px; padding: 8px 14px; gap: 8px; letter-spacing: .1em; }

/* outfit slots (profile) */
.slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 14px; }
.slot { display: grid; justify-items: center; gap: 2px; text-align: center; padding: 8px 4px 10px; background: #000; box-shadow: inset 0 0 0 1px var(--line); }
.slot.filled { box-shadow: inset 0 0 0 1px #c9a45c88; }
.slot img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.slot-empty { width: 100%; aspect-ratio: 1; display: grid; place-items: center; color: #ffffff22; font-size: 28px; border: 1px dashed #ffffff1a; }
.slot small { font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-top: 4px; }
.slot b { font-size: 10.5px; font-weight: 600; line-height: 1.25; }
.slot:not(.filled) b { color: var(--mute); font-weight: 500; }
.slot-head { font: 700 12px var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 26px 0 12px; }
.pf-grid aside .slots { grid-template-columns: repeat(3, 1fr); }

/* ---------- events: calendar ---------- */
.ev-page { max-width: 1400px; }
.ev-layout { display: grid; grid-template-columns: 1fr 340px; gap: 28px; align-items: start; }
.daily { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; padding: 12px 18px; margin-bottom: 18px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
.daily .eyebrow { margin: 0; }
.daily a { display: inline-flex; align-items: center; gap: 8px; color: var(--text); }
.daily a i, .legend span::before { width: 8px; height: 8px; transform: rotate(45deg); background: var(--c); display: inline-block; content: ""; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cal-head h2 { font: 600 34px var(--serif); margin: 0; }
.cal-nav { width: 42px; height: 42px; display: grid; place-items: center; font-size: 24px; color: var(--gold-hi); box-shadow: inset 0 0 0 1px #c9a45c55; }
.cal-nav:hover { background: #c9a45c1f; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); padding: 4px 8px; }
.cal-day { min-height: 112px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); padding: 6px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-day.out { opacity: .38; }
.cal-day.today { box-shadow: inset 0 0 0 1px var(--gold); background: linear-gradient(#c9a45c14, var(--panel)); }
.cal-day .dn { font: 600 15px var(--serif); color: var(--mute); padding: 0 2px 2px; }
.cal-day.today .dn { color: var(--gold-hi); }
.cal-ev { display: block; font-size: 11px; font-weight: 600; line-height: 1.3; padding: 3px 6px; border-left: 2px solid var(--c); background: color-mix(in srgb, var(--c) 16%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.cal-ev.span:not(.start) { color: transparent; border-left-color: transparent; margin-left: -6px; padding-left: 12px; }
.cal-ev time { color: var(--mute); font-weight: 500; }
.cal-ev:hover { background: color-mix(in srgb, var(--c) 32%, transparent); color: #fff; }
.cal-more { font-size: 10.5px; color: var(--mute); padding-left: 4px; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 12px; color: var(--mute); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.ev-side { display: grid; gap: 8px; }
.ev-row { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 12px 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--line); border-left: 2px solid var(--c); }
.ev-row:hover { box-shadow: inset 0 0 0 1px #c9a45c66; }
.ev-date { display: grid; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); }
.ev-date b { font: 600 28px/1 var(--serif); color: var(--text); }
.ev-info { display: grid; gap: 1px; min-width: 0; }
.ev-info small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.ev-info b { font: 600 18px/1.2 var(--serif); }
.ev-info em { font-style: normal; font-size: 12px; color: var(--mute); }
.cd { font-size: 11.5px; font-weight: 700; color: var(--gold); letter-spacing: .04em; }
.cd.live { color: #8fd19e; }
.cd.big { display: inline-block; margin-left: 12px; font-size: 13px; padding: 3px 10px; box-shadow: inset 0 0 0 1px #c9a45c66; }
.ev-when { font-size: 15px; color: #d6d1c8; }
/* home: upcoming cards */
.ev-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.ev-card { --cut: 16px; position: relative; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 20px;
  background: linear-gradient(0deg, #000 15%, #000a 60%, #0004), var(--img) center / cover; border-bottom: 2px solid var(--c); transition: .3s;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.ev-card:hover { transform: translateY(-4px); }
.ev-type { font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.ev-card b { font: 600 24px/1.15 var(--serif); }
.ev-at { font-size: 12.5px; color: #cfc8bc; }
@media (max-width: 1080px) {
  .ev-layout { grid-template-columns: 1fr; }
  .cal-grid { gap: 2px; }
  .cal-day { min-height: 70px; padding: 3px; }
  .cal-ev { font-size: 0; padding: 0; height: 5px; border-left: 0; background: var(--c); }
  .cal-ev.span:not(.start) { margin-left: -3px; padding: 0; }
  .cal-dow { padding: 2px; font-size: 9px; letter-spacing: .05em; }
}
.cal-ev.cont.start { color: var(--mute); border-left-color: transparent; font-weight: 500; }
.cal-ev.span:not(.start) { background: color-mix(in srgb, var(--c) 26%, transparent); }

@media (max-width: 1080px) {
  .pf-av .fav { width: min(var(--s), 34vw); height: min(var(--s), 34vw); }
  .pf-head h1 { font-size: clamp(38px, 11vw, 56px); }
  .me-chip .fav.chip { width: 36px; height: 36px; margin: -3px; }
  .pf-art::before, .class-hero { background-position: 50% 22% !important; }
  .fav.initial b { font-size: 42px; }
}

/* 8 classes: always 4 + 4 on desktop, 2 per row on tablets/phones */
.classes { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .classes { grid-template-columns: repeat(2, 1fr); } }

/* ---------- one content column for every page: logo, hero text and content share the same left edge ---------- */
:root { --wrap: 1320px; --gut: max(24px, calc((100vw - var(--wrap)) / 2)); }
.topbar { padding-left: var(--gut); padding-right: var(--gut); }
.hero, .class-hero, .pf-hero { padding-left: var(--gut); padding-right: var(--gut); }
.block, .page, .footer { padding-left: var(--gut); padding-right: var(--gut); max-width: none; }
.page > *, .block > * { max-width: var(--wrap); }
.lore-page, .article, .lb, .ev-page { max-width: none; }
.lore-page > *, .article > * { max-width: 1040px; }
.lb > * { max-width: 1100px; }
.rail { right: max(14px, calc(var(--gut) / 2 - 6px)); }
@media (max-width: 1080px) { :root { --gut: 16px; } }

.btn-gold, .btn-line, .me-txt b, .me-txt small, .mainnav a { white-space: nowrap; }
.topbar { gap: 18px; }
.mainnav a { padding: 8px 11px; }
@media (max-width: 1360px) { .mainnav a { padding: 8px 8px; font-size: 11.5px; letter-spacing: .1em; } .me-txt { display: none; } }
@media (max-width: 1360px) { .me-chip { padding: 3px; } }
:root { --wrap: 1680px; --gut: max(4vw, calc((100vw - var(--wrap)) / 2)); }
@media (max-width: 1080px) { :root { --gut: 16px; } }

[hidden]{display:none!important}

/* phones: footer stacks instead of squeezing the text into a narrow column */
@media (max-width: 640px) {
  .footer { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 48px; padding-top: 30px; padding-bottom: 30px; }
  .footer p { flex: none; }
}

/* ---- page hero: painted banner behind the page title (same look as the Pets banner). Set --hero:url(...) inline; text stays on the calm left side ---- */
.page-head.hero-bn,.hero-bn{position:relative;overflow:hidden;border-radius:22px;min-height:150px;margin:0 0 18px;padding:22px 30px;display:flex;flex-direction:column;justify-content:flex-end;
  border:1px solid #ffffff14;box-shadow:0 12px 36px #0009;
  background:linear-gradient(90deg,#120b18f5 0%,#120b18d0 32%,#120b1840 62%,#120b1800 100%),var(--hero) center 45%/cover no-repeat}
.hero-bn>*{position:relative;max-width:54%}
.hero-bn h1{font-size:clamp(26px,3vw,40px);margin:2px 0 4px;text-shadow:0 2px 14px #000a}
.hero-bn .eyebrow{margin:0}.hero-bn .sub{margin:2px 0 0;color:#e6dfe6;font-size:.92rem;text-shadow:0 1px 8px #000a}
@media (max-width:760px){.page-head.hero-bn,.hero-bn{min-height:120px;padding:16px 18px;background:linear-gradient(180deg,#120b1855 0%,#120b18e8 78%),var(--hero) center/cover no-repeat}.hero-bn>*{max-width:100%}}
body.sanctuary .hero-bn{background:linear-gradient(90deg,#fbf4eef0 0%,#fbf4eec0 32%,#fbf4ee40 62%,#fbf4ee00 100%),var(--hero) center 45%/cover no-repeat}