:root {
  --ink:#0d0a0b; --ink-2:#151012; --ink-3:#1c1416; --line:rgba(232,220,192,.12); --line-2:rgba(232,220,192,.22);
  --wine:#5a1420; --wine-hi:#8a2433; --gold:#b8913a; --gold-hi:#e3c06a; --parchment:#e8dcc0; --dim:rgba(232,220,192,.68);
  --moon:#8fa8c8; --moon-deep:#1b2433; --other:#3a1f4a; --ember:#e0603a; --rec:#ff2b3d; --twitch:#9146ff;
  --fell:"IM Fell English SC", Georgia, serif; --serif:"Cormorant Garamond", Georgia, serif; --mono:"JetBrains Mono", ui-monospace, monospace;
  --wrap:1180px;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:72px; }
body { margin:0; background:var(--ink); color:var(--parchment); font:400 20px/1.55 var(--serif); -webkit-font-smoothing:antialiased; font-variant-numeric:lining-nums; }
img, video { max-width:100%; display:block; }
a { color:var(--gold-hi); text-underline-offset:3px; }
a:hover { color:#fff1c8; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.mono { font-family:var(--mono); }
.kicker { font:500 13px/1 var(--mono); letter-spacing:.32em; text-transform:uppercase; color:var(--gold); margin:0 0 14px; }
h1, h2, h3, h4 { font-weight:400; }
h2 { font:400 clamp(36px,5vw,60px)/1.04 var(--fell); margin:0 0 18px; }
h2 em, h1 em { font-style:normal; color:var(--gold-hi); }
h3 { font:400 28px/1.1 var(--fell); margin:0 0 10px; color:var(--gold-hi); }
h4 { font:400 22px/1.15 var(--fell); margin:0 0 6px; color:var(--parchment); }
p { margin:0 0 14px; }
.lead { font-size:clamp(21px,2.2vw,26px); max-width:820px; margin:0 0 28px; }
.muted { color:var(--dim); }
.small { font-size:17px; }
section { padding:96px 0; border-top:1px solid var(--line); position:relative; }
kbd { font:600 14px/1 var(--mono); padding:5px 8px; border:1px solid var(--line-2); border-bottom-width:3px; background:var(--ink-3); color:var(--parchment); border-radius:4px; white-space:nowrap; }
code { font:500 .82em var(--mono); background:var(--ink-3); border:1px solid var(--line); padding:2px 6px; color:var(--gold-hi); }

/* nav */
.top { position:sticky; top:0; z-index:30; background:rgba(13,10,11,.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.top .wrap { display:flex; align-items:center; gap:22px; height:60px; overflow-x:auto; white-space:nowrap; scrollbar-width:none; }
.top .wrap::-webkit-scrollbar { display:none; }
.top .brand { display:flex; align-items:center; gap:10px; font:400 19px var(--fell); letter-spacing:.1em; color:var(--parchment); text-decoration:none; margin-right:auto; }
.top .brand img { width:30px; height:30px; border-radius:7px; }
.top a.l { font:500 12px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--dim); text-decoration:none; padding:6px 0; border-bottom:2px solid transparent; }
.top a.l:hover, .top a.l.on { color:var(--gold-hi); border-bottom-color:var(--gold); }
.top a.dl { font:600 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--ink); background:var(--gold-hi); padding:9px 14px; text-decoration:none; }
.top a.dl:hover { background:#f3d68a; }

/* buttons */
.btn { display:inline-flex; align-items:center; gap:12px; font:600 14px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; padding:17px 22px; text-decoration:none; border:1px solid var(--gold); color:var(--parchment); background:rgba(13,10,11,.55); transition:background .15s, transform .15s; }
.btn:hover { background:rgba(184,145,58,.18); color:#fff; transform:translateY(-1px); }
.btn.gold { background:var(--gold-hi); color:var(--ink); border-color:var(--gold-hi); }
.btn.gold:hover { background:#f3d68a; color:var(--ink); }
.btn svg { width:20px; height:20px; flex:none; }
.btn .sz { opacity:.6; font-weight:500; letter-spacing:.06em; }
.btns { display:flex; flex-wrap:wrap; gap:12px; }

/* hero */
.hero { min-height:min(100vh,900px); display:flex; align-items:flex-end; padding:0 0 72px; position:relative; overflow:hidden; border:0;
  background:linear-gradient(180deg, rgba(13,10,11,.35) 0%, rgba(13,10,11,.08) 38%, rgba(13,10,11,.88) 80%, var(--ink) 100%), url("../img/keyart_gate.jpg") center 30% / cover no-repeat, var(--moon-deep); }
.hero .logo { width:min(520px,82vw); filter:drop-shadow(0 18px 40px rgba(0,0,0,.7)); margin:0 0 6px -12px; }
.hero h1 { font:italic 500 clamp(25px,3vw,38px)/1.22 var(--serif); margin:10px 0 26px; max-width:760px; }
.chips { display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
.chip { font:500 12px/1 var(--mono); letter-spacing:.14em; text-transform:uppercase; padding:10px 13px; border:1px solid rgba(227,192,106,.35); background:rgba(13,10,11,.62); }
.chip.live { border-color:rgba(255,43,61,.6); color:#fff; display:inline-flex; gap:9px; align-items:center; }
.chip.live::before { content:""; width:9px; height:9px; border-radius:50%; background:var(--rec); animation:rec 2s infinite; }
@keyframes rec { 50% { opacity:.3; } }

.pagehead { padding:84px 0 56px; border:0; background:radial-gradient(ellipse 70% 90% at 80% 0%, rgba(138,36,51,.28), transparent 70%), radial-gradient(ellipse 50% 70% at 0% 100%, rgba(58,31,74,.3), transparent 70%); }
.pagehead h1 { font:400 clamp(44px,7vw,84px)/1 var(--fell); margin:0 0 16px; }

/* layout */
.grid { display:grid; gap:20px; }
.g2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.g3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.g4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.split { display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center; }
.card { background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01)); border:1px solid var(--line); padding:26px; position:relative; }
.card p { color:var(--dim); font-size:19px; }
.card p:last-child { margin-bottom:0; }
.tag { font:600 11px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; padding:6px 8px; display:inline-block; margin-bottom:12px; border:1px solid currentColor; color:var(--gold); }
.tag.moon { color:var(--moon); } .tag.rec { color:var(--rec); } .tag.twitch { color:#b48cff; } .tag.ember { color:var(--ember); }
.shot { border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.6); width:100%; }
figure { margin:0; }
figcaption { font:500 12px/1.45 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-top:12px; }
.quote { font:italic 500 26px/1.35 var(--serif); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; margin:28px 0; }
.quote cite { display:block; font:500 12px var(--mono); letter-spacing:.16em; font-style:normal; color:var(--gold); margin-top:10px; }

/* trailer */
.video { position:relative; border:1px solid var(--line-2); box-shadow:0 40px 90px rgba(0,0,0,.7); background:#000; }
.video video { width:100%; aspect-ratio:16/9; }

/* feature tiles */
.feat { padding:28px; border:1px solid var(--line); background:var(--ink-2); }
.feat .n { font:700 13px var(--mono); color:var(--gold); letter-spacing:.2em; }
.feat h3 { margin-top:10px; }
.feat p { color:var(--dim); margin:0; font-size:19px; }

/* gallery */
.gallery { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.gallery a { display:block; position:relative; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/9; background:#000; }
.gallery img { width:100%; height:100%; object-fit:cover; transition:transform .4s, filter .4s; filter:saturate(.95); }
.gallery a:hover img { transform:scale(1.04); filter:saturate(1.1); }
.gallery a span { position:absolute; left:10px; bottom:8px; font:600 11px var(--mono); letter-spacing:.14em; text-transform:uppercase; text-shadow:0 1px 6px #000; }
.gallery a.wide { grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }

/* timeline */
.timeline { display:grid; grid-template-columns:repeat(5,1fr); margin:40px 0 0; counter-reset:s; }
.step { padding:22px 18px; border-top:2px solid var(--gold); position:relative; }
.step::before { counter-increment:s; content:counter(s,upper-roman); font:400 15px var(--fell); color:var(--gold); }
.step .t { font:500 12px var(--mono); letter-spacing:.14em; color:var(--ember); display:block; margin:6px 0 8px; }
.step b { display:block; font:400 22px/1.1 var(--fell); margin-bottom:6px; }
.step p { margin:0; font-size:17px; color:var(--dim); }
.step .dot { position:absolute; top:-8px; left:18px; width:14px; height:14px; border-radius:50%; background:var(--ink); border:2px solid var(--gold); }

/* download */
.download { background:radial-gradient(ellipse 60% 80% at 15% 10%, rgba(138,36,51,.3), transparent 70%), radial-gradient(ellipse 60% 70% at 100% 100%, rgba(145,70,255,.12), transparent 70%), var(--ink); }
.dlbox { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:34px; }
.platform { border:1px solid var(--line-2); padding:30px; background:rgba(13,10,11,.6); display:flex; flex-direction:column; gap:16px; }
.platform h3 { display:flex; align-items:center; gap:12px; margin:0; }
.platform h3 svg { width:28px; height:28px; color:var(--parchment); }
.platform ol { margin:0; padding-left:22px; color:var(--dim); font-size:18px; }
.platform ol li { margin-bottom:6px; }
.platform .btn { align-self:flex-start; }
.note { border-left:3px solid var(--ember); padding:14px 18px; background:rgba(224,96,58,.07); font-size:18px; color:var(--dim); margin-top:24px; }
.note b { color:var(--parchment); }

/* wiki / guides */
.doc { display:grid; grid-template-columns:230px minmax(0,1fr); gap:56px; padding-top:56px; padding-bottom:110px; }
.toc { position:sticky; top:84px; align-self:start; max-height:calc(100vh - 100px); overflow:auto; border-left:1px solid var(--line); padding-left:18px; }
.toc a { display:block; font:500 12px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--dim); text-decoration:none; padding:9px 0; }
.toc a:hover, .toc a.on { color:var(--gold-hi); }
.doc article > section { padding:0 0 64px; border:0; }
.doc article > section + section { padding-top:64px; border-top:1px solid var(--line); }
.doc h2 { font-size:clamp(34px,4vw,48px); }
.doc ul.list { padding-left:22px; color:var(--dim); }
.doc ul.list li { margin-bottom:8px; }
.doc ul.list b { color:var(--parchment); font-weight:600; }

table.t { width:100%; border-collapse:collapse; font-size:18px; margin:14px 0 4px; }
table.t th { font:600 11px var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-align:left; padding:10px 12px 10px 0; border-bottom:1px solid var(--line-2); }
table.t td { padding:11px 12px 11px 0; border-bottom:1px solid var(--line); color:var(--dim); vertical-align:top; }
table.t td:first-child { color:var(--parchment); }
table.t td.n, table.t th.n { font-family:var(--mono); font-size:15px; text-align:right; white-space:nowrap; }
.tscroll { overflow-x:auto; }

/* bestiary */
.beasts { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.beast { border:1px solid var(--line); background:#130e10; display:flex; flex-direction:column; }
.beast .pic { height:220px; position:relative; overflow:hidden; background:radial-gradient(ellipse at 50% 70%, var(--glow, rgba(138,36,51,.5)), transparent 68%); }
.beast .pic img { position:absolute; left:50%; bottom:0; height:100%; width:auto; max-width:none; transform:translateX(-50%); }
.beast .body { padding:16px 18px 18px; display:flex; flex-direction:column; gap:6px; flex:1; }
.beast .where { font:600 10px/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--lc, var(--gold)); }
.beast b { font:400 25px/1.05 var(--fell); }
.beast .r { font-size:18px; line-height:1.35; color:var(--parchment); }
.beast .c { margin-top:auto; font:500 12.5px/1.5 var(--mono); color:var(--dim); border-top:1px solid var(--line); padding-top:10px; }
.beast .c::before { content:"Sobreviver · "; color:var(--gold); }
.beast .d { font:italic 400 16px/1.35 var(--serif); color:rgba(232,220,192,.5); }

/* items */
.items { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.item { border:1px solid var(--line); padding:20px; background:var(--ink-2); }
.item .top2 { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:6px; }
.item b { font:400 22px var(--fell); color:var(--parchment); }
.item .price { font:700 15px var(--mono); color:var(--gold-hi); white-space:nowrap; }
.item p { margin:0; font-size:18px; color:var(--dim); }
.item .meta { font:500 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--moon); margin-top:10px; }

/* entity identifier */
.ident { border:1px solid rgba(145,70,255,.45); background:linear-gradient(180deg, rgba(145,70,255,.08), rgba(145,70,255,.02)); padding:26px; margin-top:20px; }
.ident .ev { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 20px; }
.ident .ev button { font:600 13px var(--mono); letter-spacing:.06em; color:var(--parchment); background:var(--ink-3); border:1px solid var(--line-2); padding:11px 14px; cursor:pointer; transition:all .12s; }
.ident .ev button:hover { border-color:var(--twitch); }
.ident .ev button[data-s="1"] { background:rgba(145,70,255,.28); border-color:#b48cff; color:#fff; }
.ident .ev button[data-s="2"] { background:rgba(255,43,61,.12); border-color:rgba(255,43,61,.6); color:rgba(232,220,192,.6); text-decoration:line-through; }
.ident .res { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:10px; }
.ident .ent { border:1px solid var(--line); padding:14px 16px; background:var(--ink-2); transition:opacity .2s, border-color .2s; }
.ident .ent b { font:400 22px var(--fell); display:block; }
.ident .ent span { font-size:16px; color:var(--dim); display:block; margin:4px 0 8px; line-height:1.3; }
.ident .ent i { font:500 11px/1.6 var(--mono); font-style:normal; color:#b48cff; letter-spacing:.04em; }
.ident .ent.out { opacity:.22; }
.ident .ent.hit { border-color:#b48cff; outline:1px solid #b48cff; background:#1d1428; }
.ident .hint { font:500 13px var(--mono); color:var(--dim); margin-top:14px; letter-spacing:.04em; }
.ident .reset { font:600 12px var(--mono); letter-spacing:.12em; text-transform:uppercase; background:none; border:0; color:var(--gold); cursor:pointer; padding:0; margin-left:12px; }

/* chat */
.cmd { display:grid; grid-template-columns:200px 1fr; gap:4px 20px; padding:16px 0; border-bottom:1px solid var(--line); align-items:baseline; }
.cmd code { font-size:16px; color:#c9a8ff; background:rgba(145,70,255,.1); border-color:rgba(145,70,255,.35); justify-self:start; }
.cmd p { margin:0; color:var(--dim); font-size:19px; }
.effects { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.eff { border:1px solid var(--line); padding:14px 16px; background:var(--ink-2); }
.eff b { font:400 21px var(--fell); display:block; }
.eff span { font-size:16px; color:var(--dim); }
.eff .cat { font:600 10px var(--mono); letter-spacing:.16em; text-transform:uppercase; display:block; margin-bottom:6px; }
.cat.Caos { color:var(--ember); } .cat.Ameaça { color:var(--rec); } .cat.Trapaça { color:var(--gold-hi); } .cat.Zoeira { color:#b48cff; }
.votecard { border:1px solid rgba(145,70,255,.6); background:#140d1d; padding:24px; max-width:460px; box-shadow:0 30px 70px rgba(0,0,0,.6); }
.votecard h4 { font:400 30px var(--fell); display:flex; justify-content:space-between; margin:0 0 14px; }
.votecard h4 span { font:700 24px var(--mono); color:var(--twitch); }
.vrow { margin:14px 0; cursor:pointer; user-select:none; }
.vrow .lbl { display:flex; gap:10px; align-items:baseline; font-size:21px; }
.vrow .lbl b { font:700 18px var(--mono); color:var(--twitch); }
.vrow .lbl small { font:500 12px var(--mono); color:var(--moon); }
.vrow .lbl em { margin-left:auto; font:600 14px var(--mono); font-style:normal; color:var(--dim); }
.vrow .bar { height:7px; background:rgba(232,220,192,.08); margin-top:6px; }
.vrow .bar i { display:block; height:100%; background:var(--twitch); width:0; transition:width .3s; }
.vrow:hover .lbl { color:#fff; }

/* lore + spoilers */
.npc { display:flex; gap:20px; align-items:flex-start; }
.npc .seal { flex:none; width:96px; height:96px; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 50% 70%, #3a1a20, #120b0d); box-shadow:0 0 0 2px var(--gold), 0 8px 24px rgba(0,0,0,.5); }
.npc .seal img { width:100%; height:100%; object-fit:cover; object-position:50% 8%; transform:scale(1.5); transform-origin:50% 10%; }
.npc.morwen .seal { background:radial-gradient(circle at 50% 40%, #2b3a50, #0e1219); box-shadow:0 0 0 2px var(--moon), 0 8px 24px rgba(0,0,0,.5); }
.npc.morwen .seal img { filter:grayscale(1) brightness(1.2); mix-blend-mode:screen; opacity:.85; }
.npc.aldric .seal { box-shadow:0 0 0 2px var(--rec), 0 8px 24px rgba(0,0,0,.5); background:#111; }
.spoiler { position:relative; cursor:pointer; }
.spoiler .sp-body { filter:blur(9px); transition:filter .3s; user-select:none; }
.spoiler.open .sp-body { filter:none; user-select:auto; }
.spoiler .sp-cover { position:absolute; inset:0; display:grid; place-items:center; font:600 12px var(--mono); letter-spacing:.2em; text-transform:uppercase; color:var(--gold-hi); background:rgba(13,10,11,.25); transition:opacity .3s; }
.spoiler.open .sp-cover { opacity:0; pointer-events:none; }
.facts { counter-reset:f; display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.fact { border:1px solid var(--line); padding:22px 22px 22px 70px; position:relative; background:var(--ink-2); }
.fact::before { counter-increment:f; content:counter(f,decimal-leading-zero); position:absolute; left:22px; top:20px; font:700 20px var(--mono); color:var(--gold); }
.fact p { margin:0; color:var(--dim); font-size:19px; }
.fact b { color:var(--parchment); font-weight:600; }

/* graves soundboard */
.say { text-align:left; font:italic 500 21px/1.35 var(--serif); color:var(--parchment); background:var(--ink-2); border:1px solid var(--line); padding:18px 20px 18px 62px; position:relative; cursor:pointer; transition:border-color .15s, background .15s; }
.say::before { content:""; position:absolute; left:20px; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%; border:1px solid var(--gold); background:radial-gradient(circle, var(--gold-hi) 0 0) no-repeat; }
.say::after { content:""; position:absolute; left:30px; top:50%; margin-top:-6px; border-left:9px solid var(--gold-hi); border-top:6px solid transparent; border-bottom:6px solid transparent; }
.say:hover { border-color:var(--gold); background:#1d1517; }
.say.playing { border-color:var(--gold-hi); background:#221a12; }
.say.playing::after { left:28px; margin-top:-6px; width:10px; height:12px; border:0; border-left:3px solid var(--gold-hi); border-right:3px solid var(--gold-hi); }

/* quiz */
.quiz { border:1px solid var(--line-2); padding:28px; background:var(--ink-2); }
.quiz .q { font:400 26px/1.2 var(--fell); margin-bottom:16px; }
.quiz .opts { display:grid; gap:8px; }
.quiz .opts button { text-align:left; font:400 20px var(--serif); color:var(--parchment); background:var(--ink-3); border:1px solid var(--line-2); padding:13px 16px; cursor:pointer; }
.quiz .opts button:hover { border-color:var(--gold); }
.quiz .out { display:none; grid-template-columns:150px 1fr; gap:24px; align-items:center; }
.quiz .out img { width:150px; height:190px; object-fit:cover; object-position:50% 0; background:radial-gradient(ellipse at 50% 70%, rgba(138,36,51,.5), transparent 70%); border:1px solid var(--line); }
.quiz .prog { font:500 12px var(--mono); letter-spacing:.16em; color:var(--gold); margin-bottom:10px; }

/* footer */
footer { border-top:1px solid var(--line); padding:44px 0 60px; color:var(--dim); font-size:17px; }
footer .wrap { display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:space-between; align-items:center; }
footer nav { display:flex; flex-wrap:wrap; gap:18px; }
footer nav a { font:500 12px var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dim); text-decoration:none; }
footer nav a:hover { color:var(--gold-hi); }

@media (max-width:900px) {
  section { padding:72px 0; }
  .g3, .g4 { grid-template-columns:1fr 1fr; }
  .split, .dlbox { grid-template-columns:1fr; gap:28px; }
  .timeline { grid-template-columns:1fr 1fr; row-gap:10px; }
  .gallery { grid-template-columns:1fr 1fr; }
  .doc { grid-template-columns:minmax(0,1fr); gap:0; padding-top:24px; }
  .toc { position:static; max-height:none; border:0; padding:0 0 28px; display:flex; flex-wrap:wrap; gap:0 16px; }
  .facts { grid-template-columns:1fr; }
}
@media (max-width:600px) {
  body { font-size:19px; }
  .wrap { padding:0 16px; }
  .g2, .g3, .g4 { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr; }
  .gallery a.wide { grid-column:auto; grid-row:auto; aspect-ratio:16/9; }
  .cmd { grid-template-columns:1fr; }
  .top .brand span { display:none; }
  .quiz .out { grid-template-columns:1fr; }
}
.platform { min-width:0; }
.platform code, .note code, td code { word-break:break-all; }