/* ============================================================================
   Deadly World — front page
   ----------------------------------------------------------------------------
   Self-contained on purpose. The previous build loaded this alongside the old
   site stylesheet, and the two fought: style.css sets `header{position:sticky;
   flex-wrap:wrap}`, so the fixed bar here inherited wrapping and jumped between
   one line and two as the window moved. Nothing outside this file styles the
   front page any more, which makes that class of bug impossible rather than
   merely fixed.

   Depth is done with real 3D — a perspective on the deck, panels and their
   contents on separate Z planes — not with drop shadows pretending. It is
   switched off wholesale for reduced-motion and on narrow screens.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
    --gold:#b98f2e;
    --gold-hi:#e2b659;
    --gold-lit:#f3dda6;
    --seal:#96201a;
    --seal-lit:#c33a30;
    --jade:#4d8a6a;

    --ink:#0c0a09;
    --ink-2:#141110;
    --panel:rgba(16,13,11,.86);
    --line:rgba(185,143,46,.22);
    --line-hi:rgba(185,143,46,.5);

    --txt:#e8e1d4;
    --txt-2:#b3aa9c;
    --txt-3:#867d70;

    --f-display:'Cinzel',Georgia,serif;
    --f-body:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;
    --f-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;

    --nav-h:72px;
    --ease:cubic-bezier(.65,.02,.2,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;overflow:hidden;background:var(--ink)}
body{
    color:var(--txt);font-family:var(--f-body);font-size:15px;line-height:1.65;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--gold);color:#000}

.scroll{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
    scrollbar-color:var(--gold) transparent;-webkit-overflow-scrolling:touch}
.scroll::-webkit-scrollbar{width:5px}
.scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.04)}
.scroll::-webkit-scrollbar-thumb{background:rgba(185,143,46,.55)}
.scroll::-webkit-scrollbar-thumb:hover{background:var(--gold-hi)}

/* ── curtain ────────────────────────────────────────────────────────────── */
#curtain{
    position:fixed;inset:0;z-index:9999;background:var(--ink);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    transition:opacity .7s ease,visibility .7s ease;
}
#curtain.gone{opacity:0;visibility:hidden}
#curtain .sigil{width:64px;height:64px;margin-bottom:26px;color:var(--gold);
    animation:sigil 3s ease-in-out infinite}
@keyframes sigil{0%,100%{opacity:.4;transform:rotate(0) scale(.94)}
                 50%{opacity:1;transform:rotate(180deg) scale(1)}}
#curtain .mark{font-family:var(--f-display);font-weight:700;
    font-size:clamp(18px,3vw,26px);letter-spacing:.44em;text-transform:uppercase;
    color:var(--gold-hi);margin-bottom:26px;padding-left:.44em}
#curtain .bar{width:min(300px,60vw);height:1px;background:rgba(185,143,46,.18);overflow:hidden}
#curtain .bar i{display:block;height:100%;width:0;
    background:linear-gradient(90deg,var(--gold),var(--gold-lit));transition:width .3s ease}
#curtain .pct{margin-top:12px;font-family:var(--f-mono);font-size:10px;
    letter-spacing:.3em;color:var(--txt-3)}

/* ── stage ──────────────────────────────────────────────────────────────── */
.stage{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--ink)}
.stage>*{position:absolute;inset:-4%;width:108%;height:108%}
.stage .art{background-size:cover;background-position:center;object-fit:cover}
.stage video{object-fit:cover}

/* The drawn backdrop. Used on its own when no media is set, and behind the
   media otherwise so a transparent PNG or a letterboxed video never shows the
   flat page colour. */
.stage .drawn{
    background:
        radial-gradient(ellipse 62% 48% at 50% 14%,rgba(185,143,46,.15) 0%,transparent 62%),
        radial-gradient(ellipse 84% 56% at 14% 90%,rgba(150,32,26,.20) 0%,transparent 60%),
        radial-gradient(ellipse 74% 52% at 88% 74%,rgba(77,138,106,.10) 0%,transparent 58%),
        linear-gradient(158deg,#16120f 0%,#0c0a09 48%,#100c0a 100%);
}
.stage .lattice{
    opacity:.45;
    background-image:
        repeating-linear-gradient(0deg,rgba(185,143,46,.05) 0 1px,transparent 1px 78px),
        repeating-linear-gradient(90deg,rgba(185,143,46,.05) 0 1px,transparent 1px 78px);
    -webkit-mask-image:radial-gradient(ellipse 66% 60% at 50% 44%,#000 0,transparent 76%);
            mask-image:radial-gradient(ellipse 66% 60% at 50% 44%,#000 0,transparent 76%);
}
.stage .veil{
    background:
        radial-gradient(circle at 50% 42%,transparent 0%,rgba(0,0,0,.58) 76%),
        linear-gradient(180deg,rgba(12,10,9,.88) 0%,rgba(12,10,9,.28) 34%,rgba(12,10,9,.8) 100%);
}
.grain::after{
    content:'';position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.035;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── header ─────────────────────────────────────────────────────────────── */
/* Explicit box, no wrapping, no growing child. The bar cannot reflow because
   nothing inside it is allowed to change the line count. */
.bar{
    position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:300;
    display:flex;align-items:center;flex-wrap:nowrap;gap:22px;padding:0 26px;
    background:linear-gradient(180deg,rgba(12,10,9,.95),rgba(12,10,9,0));
}
.bar .crest{display:flex;align-items:center;gap:11px;flex:0 0 auto}
.crest svg{width:32px;height:32px;flex:none;color:var(--gold-hi)}
.crest .nm{display:flex;flex-direction:column;line-height:1.15}
.crest b{font-family:var(--f-display);font-weight:700;font-size:16px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hi)}
.crest small{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.24em;
    text-transform:uppercase;color:var(--txt-3)}

.bar .ways{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden}
.ways a{
    position:relative;flex:0 0 auto;font-family:var(--f-display);font-weight:600;
    font-size:12.5px;letter-spacing:.11em;text-transform:uppercase;
    padding:10px 13px;color:var(--txt-2);cursor:pointer;transition:color .2s;
}
.ways a::after{content:'';position:absolute;left:13px;right:13px;bottom:4px;height:1px;
    background:var(--gold);transform:scaleX(0);transition:transform .3s var(--ease)}
.ways a:hover{color:var(--gold-hi)}
.ways a.on{color:var(--gold-hi)}
.ways a.on::after{transform:scaleX(1)}

.bar .side{display:flex;align-items:center;gap:9px;flex:0 0 auto}
.who{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
    color:var(--gold-hi);white-space:nowrap}
.btn-s{
    font-family:var(--f-display);font-weight:600;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;padding:10px 18px;white-space:nowrap;
    border:1px solid var(--line);color:var(--txt);transition:.2s;
}
.btn-s:hover{border-color:var(--gold);background:rgba(185,143,46,.1);color:var(--gold-hi)}
.btn-s.hot{background:linear-gradient(180deg,var(--seal-lit),#6f1610);
    border-color:var(--line-hi);color:#fff}
.btn-s.hot:hover{border-color:var(--gold-hi)}

.note{
    width:36px;height:36px;flex:none;border:1px solid var(--line);border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:var(--gold-hi);
    background:rgba(0,0,0,.4);transition:.2s;
}
.note:hover{border-color:var(--gold);background:rgba(185,143,46,.14)}
.note.on{animation:turn 5s linear infinite}
@keyframes turn{to{transform:rotate(360deg)}}
.note-tip{
    position:fixed;top:54px;right:26px;z-index:290;padding:7px 18px;
    border:1px solid var(--line);background:rgba(12,10,9,.94);
    font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold-hi);pointer-events:none;
    transition:opacity .5s;
}
[dir=rtl] .note-tip{right:auto;left:26px}
.note-tip.gone{opacity:0}

/* ── rails ──────────────────────────────────────────────────────────────── */
.rail-r{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:250;
    display:flex;flex-direction:column}
[dir=rtl] .rail-r{right:auto;left:0}
.rail-r a{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
    background:rgba(12,10,9,.72);border:1px solid rgba(185,143,46,.14);
    color:var(--txt-2);transition:.2s}
.rail-r a:hover{color:var(--gold-hi);background:rgba(185,143,46,.14)}
.rail-r svg{width:17px;height:17px}

.rail-l{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:250;
    display:flex;flex-direction:column;gap:14px}
[dir=rtl] .rail-l{left:auto;right:24px}
.rail-l button{width:8px;height:8px;border-radius:50%;
    border:1px solid rgba(185,143,46,.45);position:relative;transition:.25s;padding:0}
.rail-l button:hover{border-color:var(--gold-hi)}
.rail-l button.on{background:var(--gold-hi);border-color:var(--gold-hi);
    box-shadow:0 0 10px rgba(226,182,89,.7)}
.rail-l button span{position:absolute;left:18px;top:50%;transform:translateY(-50%);
    font-family:var(--f-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--gold-hi);white-space:nowrap;opacity:0;pointer-events:none;transition:.22s}
[dir=rtl] .rail-l button span{left:auto;right:18px}
.rail-l button:hover span{opacity:1}

/* ── deck · the 3D part ─────────────────────────────────────────────────── */
.deck{position:relative;z-index:20;height:100vh;overflow:hidden;perspective:1400px}
.rail{height:100%;transform-style:preserve-3d;
    transition:transform 1s var(--ease)}

.leaf{
    height:100vh;width:100%;position:relative;
    display:flex;align-items:center;justify-content:center;
    padding:calc(var(--nav-h) + 20px) 76px 52px;
    transform-style:preserve-3d;
}
.hold{width:100%;max-width:1160px;max-height:100%;display:flex;flex-direction:column;
    min-height:0;transform-style:preserve-3d}

/* Each element rides its own Z plane. With the deck's perspective this is what
   makes the pointer drift read as depth rather than as a wobble — nearer things
   move further, exactly as they would through a window. */
.depth .leaf .lift-1{transform:translateZ(24px)}
.depth .leaf .lift-2{transform:translateZ(48px)}
.depth .leaf .lift-3{transform:translateZ(72px)}

/* entrance — replays each time a panel returns */
.leaf .hold>*{opacity:0;transform:translateY(28px);
    transition:opacity .8s ease,transform .8s var(--ease)}
.leaf.live .hold>*{opacity:1;transform:none}
.depth .leaf.live .hold>.lift-1{transform:translateZ(24px)}
.depth .leaf.live .hold>.lift-2{transform:translateZ(48px)}
.depth .leaf.live .hold>.lift-3{transform:translateZ(72px)}
.leaf.live .hold>*:nth-child(2){transition-delay:.08s}
.leaf.live .hold>*:nth-child(3){transition-delay:.16s}
.leaf.live .hold>*:nth-child(4){transition-delay:.24s}

/* headings */
.leaf h2{font-family:var(--f-display);font-weight:700;
    font-size:clamp(20px,2.9vw,30px);letter-spacing:.28em;text-transform:uppercase;
    color:var(--gold-hi);text-align:center;text-shadow:0 2px 24px rgba(0,0,0,.9)}
.leaf .under{text-align:center;font-family:var(--f-mono);font-size:10px;
    letter-spacing:.3em;text-transform:uppercase;color:var(--txt-3);margin:8px 0 24px}
.leaf .under a{color:inherit}
.leaf .under a:hover{color:var(--gold-hi)}
.divider{display:flex;align-items:center;justify-content:center;gap:12px;
    margin:8px 0 24px;color:var(--gold);font-size:10px}
.divider::before,.divider::after{content:'';width:66px;height:1px;
    background:linear-gradient(90deg,transparent,var(--line-hi))}
.divider::after{background:linear-gradient(90deg,var(--line-hi),transparent)}

/* ── card ───────────────────────────────────────────────────────────────── */
.card{position:relative;background:var(--panel);border:1px solid var(--line);
    box-shadow:0 24px 64px rgba(0,0,0,.6);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.card::before,.card::after{content:'';position:absolute;width:14px;height:14px;
    border:1px solid var(--gold);opacity:.55;pointer-events:none}
.card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* ── 1 · hero ───────────────────────────────────────────────────────────── */
.hero{align-items:flex-end;padding-bottom:96px}
.hero .hold{max-width:1340px;align-items:flex-start;text-align:left}
[dir=rtl] .hero .hold{align-items:flex-end;text-align:right}
.hero .eyebrow{font-family:var(--f-mono);font-size:10px;letter-spacing:.42em;
    text-transform:uppercase;color:var(--gold)}
.hero h1{
    font-family:var(--f-display);font-weight:700;line-height:.92;
    text-transform:uppercase;font-size:clamp(44px,7.4vw,104px);letter-spacing:.015em;
    margin:12px 0 10px;
    background:linear-gradient(180deg,#fff7e6 6%,var(--gold-hi) 50%,#7a5d1b 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:var(--gold-hi);
    filter:drop-shadow(0 6px 28px rgba(0,0,0,.95));
}
.hero .strap{font-family:var(--f-display);font-weight:600;
    font-size:clamp(13px,1.5vw,19px);letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold-lit);text-shadow:0 2px 16px rgba(0,0,0,.9);margin-bottom:30px}
.acts{display:flex;gap:13px;flex-wrap:wrap}
.btn{
    display:inline-block;font-family:var(--f-display);font-weight:700;font-size:14px;
    letter-spacing:.18em;text-transform:uppercase;color:#fff;padding:16px 44px;
    background:linear-gradient(180deg,var(--seal-lit),#6f1610);
    border:1px solid var(--line-hi);box-shadow:0 12px 36px rgba(0,0,0,.6);
    transition:transform .22s var(--ease),box-shadow .22s,border-color .22s;
}
.btn:hover{transform:translateY(-2px);border-color:var(--gold-hi);
    box-shadow:0 18px 44px rgba(0,0,0,.7),0 0 28px rgba(185,143,46,.24)}
.btn.quiet{background:transparent;color:var(--gold-hi);border-color:var(--line);
    box-shadow:none}
.btn.quiet:hover{background:rgba(185,143,46,.1);border-color:var(--gold)}

.pulse{margin-top:28px;display:flex;align-items:center;gap:13px}
.pulse i{width:7px;height:7px;border-radius:50%;background:var(--jade);
    box-shadow:0 0 11px var(--jade);animation:beat 2s infinite}
@keyframes beat{50%{opacity:.35}}
.pulse span{font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--txt-2)}
.pulse b{font-family:var(--f-display);font-weight:700;font-size:36px;line-height:1;
    color:var(--gold-hi);text-shadow:0 0 24px rgba(226,182,89,.4)}

.cue{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
    color:var(--gold);opacity:.7;cursor:pointer;animation:bob 2.4s infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ── strips ─────────────────────────────────────────────────────────────── */
.strip{display:flex;justify-content:center;flex-wrap:wrap;margin-bottom:18px}
.strip button{font-family:var(--f-display);font-weight:600;font-size:11.5px;
    letter-spacing:.14em;text-transform:uppercase;padding:10px 24px;
    background:rgba(12,10,9,.6);border:1px solid var(--line);color:var(--txt-2);
    margin-left:-1px;transition:.2s}
.strip button:hover{color:var(--gold-hi)}
.strip button.on{background:rgba(185,143,46,.14);color:var(--gold-hi);border-color:var(--gold)}

/* ── 2 · chronicle ──────────────────────────────────────────────────────── */
.scroll-news{max-height:54vh;padding:4px 18px}
.scroll-news article{padding:17px 0;border-bottom:1px dashed rgba(185,143,46,.16)}
.scroll-news article:last-child{border-bottom:none}
.scroll-news .meta{display:flex;align-items:center;gap:11px;margin-bottom:7px}
.scroll-news .cat{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);border:1px solid var(--line);padding:2px 8px}
.scroll-news time{font-family:var(--f-mono);font-size:10px;color:var(--txt-3)}
.scroll-news h3{font-family:var(--f-display);font-weight:600;font-size:16px;
    color:var(--txt);margin-bottom:5px}
.scroll-news p{font-size:13.5px;line-height:1.75;color:var(--txt-2)}
.void{padding:54px 20px;text-align:center;color:var(--txt-3);font-family:var(--f-mono);font-size:12px}

/* ── 3 · download ───────────────────────────────────────────────────────── */
.dl{display:grid;grid-template-columns:1.1fr .9fr;gap:20px}
.dl-face{padding:34px 30px;display:flex;flex-direction:column;justify-content:center;
    text-align:center;position:relative;overflow:hidden;min-height:290px}
.dl-face .shot{position:absolute;inset:0;opacity:.22;object-fit:cover;width:100%;height:100%}
.dl-face .shot+*{position:relative}
.dl-face>*{position:relative}
.dl-face .ver{font-family:var(--f-mono);font-size:10px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.dl-face h3{font-family:var(--f-display);font-weight:700;font-size:23px;
    color:var(--txt);margin-bottom:8px}
.dl-face p{color:var(--txt-3);font-size:13px;margin-bottom:22px}
.dl-face .btn{margin-bottom:10px}
.facts{padding:28px 28px}
.facts h4{font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.2em;
    text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.facts dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;font-size:13px}
.facts dt{color:var(--txt-3);white-space:nowrap}
.facts dd{color:var(--txt);text-align:right;font-family:var(--f-mono);font-size:12px}
[dir=rtl] .facts dd{text-align:left}
.facts .fine{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
    font-size:12px;color:var(--txt-3);line-height:1.8}

/* ── 4 · decrees ────────────────────────────────────────────────────────── */
.decrees{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-height:58vh}
.decree{padding:20px 18px;display:flex;flex-direction:column;position:relative;
    overflow:hidden;transition:transform .3s var(--ease),border-color .3s}
.decree:hover{transform:translateY(-5px);border-color:var(--gold)}
.decree .shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.2}
.decree>*{position:relative}
.decree .when{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.18em;
    text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.decree h3{font-family:var(--f-display);font-weight:600;font-size:16px;
    color:var(--txt);margin-bottom:5px}
.decree p{font-size:12.5px;color:var(--txt-2);line-height:1.6;margin-bottom:12px}
.decree .now{display:none;align-items:center;gap:8px;font-family:var(--f-mono);
    font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--jade);
    margin-bottom:10px}
.decree .now i{width:6px;height:6px;border-radius:50%;background:var(--jade);
    box-shadow:0 0 7px var(--jade);animation:beat 1.4s infinite}
.tick{display:flex;gap:6px;margin-top:auto}
.tick span{flex:1;text-align:center;background:rgba(0,0,0,.4);
    border:1px solid rgba(185,143,46,.14);padding:7px 3px}
.tick b{display:block;font-family:var(--f-display);font-weight:700;font-size:17px;
    color:var(--gold-hi);line-height:1;font-variant-numeric:tabular-nums}
.tick em{display:block;font-style:normal;font-family:var(--f-mono);font-size:7.5px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--txt-3);margin-top:3px}
.decree .prize{margin-top:11px;padding-top:9px;
    border-top:1px dashed rgba(185,143,46,.16);font-size:11.5px;color:var(--gold-lit)}

/* ── 5 · ledger ─────────────────────────────────────────────────────────── */
.board{max-height:50vh;overflow-x:hidden}
table.tally{width:100%;border-collapse:collapse;font-size:13.5px;table-layout:fixed}
table.tally thead th{position:sticky;top:0;z-index:2;background:var(--ink-2);
    font-family:var(--f-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--gold);text-align:left;padding:12px 16px;
    border-bottom:1px solid var(--line-hi)}
[dir=rtl] table.tally thead th{text-align:right}
table.tally td{padding:10px 16px;border-bottom:1px dashed rgba(185,143,46,.12)}
table.tally tbody tr{transition:background .18s}
table.tally tbody tr:hover{background:rgba(185,143,46,.06)}
table.tally .pos{width:70px;font-family:var(--f-display);font-weight:700;color:var(--txt-3)}
table.tally .nm{color:var(--txt);font-weight:600;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
table.tally .sc{width:34%;text-align:right;color:var(--gold-hi);font-weight:600;
    font-family:var(--f-mono);font-size:12.5px;font-variant-numeric:tabular-nums}
[dir=rtl] table.tally .sc{text-align:left}
table.tally .g1{color:#ffd54a}
table.tally .g2{color:#dfe4ea}
table.tally .g3{color:#cd7f32}

/* ── 6 · patronage ──────────────────────────────────────────────────────── */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:18px}
.tier{padding:26px 22px;text-align:center;transition:transform .28s var(--ease),border-color .28s}
.tier:hover{transform:translateY(-6px);border-color:var(--gold)}
.tier.crown{border-color:var(--gold);box-shadow:0 0 38px rgba(185,143,46,.15)}
.tier .name{font-family:var(--f-display);font-weight:700;font-size:13px;
    letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:14px}
.tier ul{list-style:none;text-align:left;margin-bottom:20px}
[dir=rtl] .tier ul{text-align:right}
.tier li{padding:7px 0 7px 20px;position:relative;font-size:13px;color:var(--txt-2);
    border-bottom:1px dashed rgba(185,143,46,.12)}
[dir=rtl] .tier li{padding:7px 20px 7px 0}
.tier li:last-child{border-bottom:none}
.tier li::before{content:'\276F';position:absolute;left:0;top:8px;
    color:var(--gold);font-size:9px}
[dir=rtl] .tier li::before{content:'\276E';left:auto;right:0}
.ways-out{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ways-out a{display:flex;align-items:center;justify-content:center;gap:11px;padding:14px;
    font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.16em;
    text-transform:uppercase;border:1px solid var(--line);color:var(--gold-hi);transition:.22s}
.ways-out a:hover{background:rgba(185,143,46,.1);border-color:var(--gold)}
.ways-out svg{width:17px;height:17px}

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:310;background:#000;
    max-height:0;overflow:hidden;transition:max-height .3s linear}
.foot.open{max-height:210px;padding:16px 0}
.foot .in{max-width:1060px;margin:0 auto;padding:0 24px;
    font-family:var(--f-mono);font-size:10.5px;color:var(--txt-3);line-height:2}
.foot .in a{color:var(--gold)}
.foot .in a:hover{text-decoration:underline}
.foot .tab{position:absolute;right:14px;top:-34px;height:34px;line-height:34px;
    padding:0 22px;background:#000;color:var(--txt-2);border-radius:17px 17px 0 0;
    font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.14em;
    text-transform:uppercase}
[dir=rtl] .foot .tab{right:auto;left:14px}
.foot .tab:hover{color:var(--gold-hi)}
.foot .tab i{display:inline-block;margin-left:7px;border-left:5px solid transparent;
    border-right:5px solid transparent;border-top:5px solid currentColor;vertical-align:middle}
.foot.open .tab i{border-top:none;border-bottom:5px solid currentColor}

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width:1180px){
    .leaf{padding:calc(var(--nav-h) + 16px) 30px 46px}
    .dl{grid-template-columns:1fr}
    .decrees,.tiers{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
    /* Depth costs battery on a phone and buys nothing on a small screen. */
    .deck{perspective:none}
    .depth .leaf .lift-1,.depth .leaf .lift-2,.depth .leaf .lift-3{transform:none}
    .rail-l{display:none}
    .bar{gap:10px;padding:0 14px}
    .bar .ways{display:none}
    .note-tip{display:none}
    .who{display:none}
    .hero{padding-bottom:70px}
    .hero .hold{align-items:center;text-align:center}
    .acts,.pulse{justify-content:center}
    .decrees,.tiers{grid-template-columns:1fr;overflow-y:auto;max-height:58vh}
    .ways-out{grid-template-columns:1fr}
    .rail-r a{width:36px;height:36px}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
        transition-duration:.01ms!important}
    .deck{perspective:none}
    .depth .leaf .lift-1,.depth .leaf .lift-2,.depth .leaf .lift-3{transform:none}
    .leaf .hold>*{opacity:1;transform:none}
}

/* ============================================================================
   Polish
   ----------------------------------------------------------------------------
   A full-screen panel holding one small card reads as an accident rather than
   as a choice — the eye has nothing to land on and the emptiness looks like a
   loading failure. What follows gives each panel weight without adding content
   nobody asked for: a numeral behind it, a shaft of light from the top, and
   widths that suit what is actually in each one.
   ========================================================================== */

/* the panel's number, set enormous and almost invisible behind everything */
.leaf{counter-increment:leafno}
.deck{counter-reset:leafno}
.leaf::before{
    content:counter(leafno,decimal-leading-zero);
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    font-family:var(--f-display);font-weight:700;
    font-size:min(52vh,44vw);line-height:1;letter-spacing:-.04em;
    color:#fff;opacity:.018;pointer-events:none;user-select:none;z-index:0;
}
.leaf.hero::before{display:none}          /* the wordmark is the hero's weight */
.leaf .hold{position:relative;z-index:1}

/* a shaft from the top edge, so the panel is lit rather than merely dark */
.leaf::after{
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(ellipse 46% 34% at 50% 0%,
        rgba(226,182,89,.075) 0%,transparent 70%);
}

/* widths that match the content, instead of one width stretched over all of it */
.leaf .hold{max-width:1060px}
.leaf.hero .hold{max-width:1340px}
.leaf .hold:has(.dl){max-width:900px}
.leaf .hold:has(.board){max-width:820px}
.leaf .hold:has(.scroll-news){max-width:860px}

/* Older browsers do not support :has. They get the default width, which is
   still correct — nothing breaks, the cards are just a little wider. */

/* headings sit closer to their content now that the panel has its own presence */
.leaf h2{margin-bottom:2px}
.leaf .under{margin:6px 0 22px}

/* empty states: a line of text does not need a box the width of the screen */
.card.void{max-width:460px;margin:0 auto;padding:34px 26px}

/* cards lift toward the pointer, which is what makes the 3D read as a room
   rather than as a flat sheet that happens to tilt */
.card{transition:transform .4s var(--ease),border-color .3s,box-shadow .4s}
.depth .leaf.live .card{transform:translateZ(0)}
.depth .leaf.live .card:hover{
    transform:translateZ(26px);
    border-color:var(--line-hi);
    box-shadow:0 34px 80px rgba(0,0,0,.7),0 0 40px rgba(226,182,89,.07);
}

/* the hero wordmark gets a slow shimmer, the one place on the page where a
   moving highlight is welcome */
.hero h1{background-size:100% 300%;animation:sheen 9s ease-in-out infinite}
@keyframes sheen{0%,100%{background-position:50% 0%}50%{background-position:50% 62%}}

/* the header keeps a hairline once it is over content, so it never floats */
.bar::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--line-hi) 22%,
               var(--line-hi) 78%,transparent);opacity:.55;
}

/* the download facts panel is short now that the address is gone — give the
   requirement note room rather than leaving a gap under it */
.facts{display:flex;flex-direction:column}
.facts .fine{margin-top:auto}

/* a ranking row that is the current player, when the page knows who that is */
table.tally tr.you{background:rgba(226,182,89,.09)}
table.tally tr.you .nm{color:var(--gold-hi)}

@media (prefers-reduced-motion:reduce){
    .hero h1{animation:none}
    .depth .leaf.live .card:hover{transform:none}
}

/* The VIP panel lost its social row - those links live on the rail now - so the
   tiers carry the panel alone and are sized to look deliberate rather than to
   fill a space something else used to occupy. */
.leaf .hold:has(.tiers){max-width:1000px}
.tiers{margin-bottom:0}
.tier{padding:32px 26px}
.tier ul{margin-bottom:24px}