/* AA8: Soulbearer demo site, the mixed design. A's twilight sky and centred gate, A5's Essence effects and copy.
   (From THE DESCENT, direction A.)
   Scrolling down is descending. One fixed low-resolution shaft canvas is painted from the scroll depth (descent.js);
   everything here is flat colour, hard 1px-step shadows and stepped animation. No blur, no smooth gradients. */

@font-face{font-family:"Pixelify Sans";src:url("fonts/PixelifySans.ttf") format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Cinzel";src:url("fonts/Cinzel.ttf") format("truetype");font-weight:400 900;font-display:swap}

:root{
  /* Every value is a hex from the game's own ramps (dist/palette.js). The comment names the ramp. */

  /* Golden hour sky, top to horizon: TOWN.tile and TOWN.ochre */
  --sky-0:#2a1a24;      /* TOWN.tile[0]  twilight: the top of the sky (A) */
  --sky-1:#5a2f2e;      /* TOWN.tile[1] */
  --sky-2:#864838;      /* TOWN.tile[2] */
  --sky-3:#c98f66;      /* TOWN.tile[4] */
  --sky-4:#dec592;      /* TOWN.ochre[4]  the horizon */
  --sun:#ffe79a;        /* RAMPS.glow[3]  the sun */
  --sun-core:#fffbe0;   /* RAMPS.glow[4]  sun core, lantern white */
  --lantern:#f3c24f;    /* RAMPS.glow[2]  lantern gold, also the play button */
  --lantern-deep:#c7892f;/* RAMPS.glow[1] */
  --lantern-dim:#6b4a2a;/* RAMPS.glow[0] */
  --ember:#f07a3a;      /* RAMPS.ember[3]  the Dark knight's ember: hot spots only (his eye slit, his runes, the Play button) */
  --ember-core:#ffd08a; /* RAMPS.ember[4]  its core */
  --ember-deep:#b8392a; /* RAMPS.ember[2] */
  --scorch:#6e1d1c;     /* the Dark knight's scorch */

  /* Stratum 0, Selvarin: TOWN.oak, TOWN.bone, TOWN.stone */
  --dusk:#0b1417;       /* ENVIRONMENT.abyss[3]  the ground of the whole page */
  --oak:#4a3128;        /* TOWN.oak[2] */
  --oak-lit:#684733;    /* TOWN.oak[3] */
  --limewash:#e3d9bd;   /* TOWN.bone[4]   body text */
  --limewash-dim:#a39a8a;/* TOWN.bone[2]  quiet text */
  --brass:#c5a368;      /* ENVIRONMENT.brass[2] frames and brackets */
  --wordmark-gold:#d7b777;/* fill of brand/wordmark.svg */

  /* Stratum I, the Risen Watch: ENVIRONMENT.wallFace, flagstone, wallLip, moss; MONSTER_TELLS.chaplain */
  --watch-air:#161d1f;  /* ENVIRONMENT.wallFaceTop */
  --watch-deep:#0c1216; /* ENVIRONMENT.grout */
  --watch-face:#1f2829; /* ENVIRONMENT.wallFace[2]  panels */
  --watch-stone:#37413c;/* TOWN.stone[2]  panel edge */
  --watch-lip:#7c8160;  /* ENVIRONMENT.wallLip  brackets */
  --moss:#8aa45a;       /* ENVIRONMENT.moss[3]  accent */
  --chaplain:#6dffa8;   /* MONSTER_TELLS.chaplain  the bell */

  /* Stratum II, the Ossuary: RAMPS.bone, slate */
  --bone-0:#2c2533;     /* RAMPS.bone[0]  ossuary air */
  --bone-1:#5a4c56;     /* RAMPS.bone[1]  panel edge */
  --bone-2:#8f7f7c;     /* RAMPS.bone[2] */
  --bone-3:#c4b39c;     /* RAMPS.bone[3]  brackets */
  --bone-4:#efe4c6;     /* RAMPS.bone[4]  text */
  --slate-0:#16151f;    /* RAMPS.slate[0] panels */

  /* Stratum III, the Throne: ENVIRONMENT.abyss, crystal; MONSTER_TELLS.colossus; violetCrystal */
  --abyss-0:#020405;    /* ENVIRONMENT.abyss[0] the bottom */
  --abyss-1:#04080a;    /* ENVIRONMENT.abyss[1] panels */
  --abyss-2:#070d10;    /* ENVIRONMENT.abyss[2] */
  --abyss-3:#0b1417;    /* ENVIRONMENT.abyss[3] */
  --abyss-4:#101c1f;    /* ENVIRONMENT.abyss[4] panel edge */
  --teal:#5cb09f;       /* ENVIRONMENT.crystal[2] */
  --teal-lit:#bdf0d6;   /* ENVIRONMENT.crystal[3] text */
  --spectral:#8fe8ff;   /* MONSTER_TELLS.colossus  accent */
  --violet:#bb8bd1;     /* ENVIRONMENT.violetCrystal[3]  the arena glyphs */
  --violet-dim:#7a5888; /* ENVIRONMENT.violetCrystal[2] */

  /* The six elements (dist/elements.js ELEMENTS): the accents the whole page is built to let sing */
  --el-fire:#f08a4b;    /* ELEMENTS.fire   */
  --el-wind:#9fdcc0;    /* ELEMENTS.wind   */
  --el-earth:#c29a5b;   /* ELEMENTS.earth  */
  --el-water:#6fb6d6;   /* ELEMENTS.water  */
  --el-light:#f3e7a6;   /* ELEMENTS.light  */
  --el-dark:#a98ae0;    /* ELEMENTS.dark   */
  /* The live element ramp (spirits.js sets these to the element of the zone you are in; default Fire) */
  --el-deep:#b8392a;    /* RAMPS.ember[2]  */
  --el-base:#f07a3a;    /* RAMPS.ember[3]  */
  --el-lit:#ffd08a;     /* RAMPS.ember[4]  */
  --el-flash:#fff0a0;   /* RAMPS.spark[3]  */
  --sx:0px;--sy:0px;    /* the one screen shake, whole 4 px steps */

  --ink-0:#0a0b11;      /* OUTLINE  hard shadows and button rims */

  --mono:Consolas,"Courier New",monospace; /* small text: crisp, the game's own body default */
  --serif:"Cinzel",serif;                  /* caps labels */
  --s:4;                /* shaft pixel size, set by descent.js */
  --k:3;                /* sprite scale */
  --kn:4;               /* the Dark knight's whole-number scale */
}

*{box-sizing:border-box}
*{font-variant-ligatures:none!important;font-feature-settings:"liga" 0,"clig" 0,"calt" 0!important}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}
body{font-variant-ligatures:none;font-feature-settings:"liga" 0,"clig" 0,"calt" 0;margin:0;background:var(--dusk);color:var(--limewash);font:400 16px/1.6 var(--mono);overflow-x:hidden;-webkit-font-smoothing:none;font-smooth:never}
img,canvas,video,svg{display:block}
img,canvas,video{image-rendering:pixelated}
a{color:inherit}
p{margin:0 0 .9em}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3{margin:0;font-weight:500}
b,strong{font-weight:700}
kbd{font:700 .8em/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink-0);background:var(--brass);padding:.42em .6em .5em;margin-inline:.12em;display:inline-block;box-shadow:inset 0 -3px 0 #8d7a4e,2px 2px 0 var(--ink-0)}

.skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--lantern);color:var(--ink-0);padding:10px 14px;font-weight:700}
.skip:focus{top:8px}

/* ---------- focus, in the pixel style ---------- */
:focus{outline:none}
:focus-visible{outline:4px dotted var(--sun-core);outline-offset:4px}

/* ---------- the shaft and the spirits ---------- */
.shaft{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--dusk)}
.shaft canvas{width:100%;height:100%;position:absolute;left:0;top:0}
.spirits{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.spirits img{position:absolute;left:0;top:0;will-change:transform}
main,.foot{position:relative;z-index:2}

.wrap{width:min(1100px,100% - 32px);margin-inline:auto}

/* ---------- per-stratum surfaces ---------- */
.s0{--panel:#0b1417;--edge:#6e1d1c;--brk:var(--el-fire);--shade:var(--ink-0);--ink:var(--limewash);--dim:#a8b3a6;--kick:var(--el-fire);--title:var(--wordmark-gold);--acc:var(--el-fire)}
.s1{--panel:#0f181b;--edge:#1d3a6e;--brk:var(--el-water);--shade:var(--ink-0);--ink:var(--limewash);--dim:#a4b4b0;--kick:var(--el-water);--title:var(--wordmark-gold);--acc:var(--el-water)}
.s2{--panel:#15101f;--edge:#493853;--brk:var(--el-dark);--shade:var(--ink-0);--ink:var(--bone-4);--dim:#c4b9c8;--kick:var(--el-dark);--title:var(--bone-4);--acc:var(--el-dark)}
.s3{--panel:#04080a;--edge:#5c3f2a;--brk:var(--el-earth);--shade:var(--abyss-0);--ink:var(--teal-lit);--dim:#9cc4b8;--kick:var(--el-earth);--title:var(--sun);--acc:var(--el-earth)}
.stratum{color:var(--ink);position:relative}
.s1,.s2,.s3{padding-top:20px}

/* ---------- hero: one centred column, the Dark Knight at the gate below it ---------- */
.hero{position:relative;display:flex;flex-direction:column;align-items:center;padding:clamp(18px,3.6vh,40px) 0 40px}
.hero-in{text-align:center;display:flex;flex-direction:column;align-items:center}
.hero-head,.hero-rest{display:flex;flex-direction:column;align-items:center}
.hero-head{order:1}
.hero-rest{order:2;position:relative;z-index:2}
.knight{order:3}
.premise{margin:0 0 22px;max-width:74ch;text-wrap:balance;font-size:16px;line-height:1.6;color:var(--sun-core);text-shadow:2px 2px 0 var(--ink-0)}
.mini.small{margin-top:14px;max-width:none;white-space:nowrap;color:var(--teal-lit);font-weight:700;letter-spacing:.04em}
.hero-rest .mini{margin-top:12px;max-width:none}
.knight{margin:0;display:flex;flex-direction:column;align-items:center}
.knight canvas{width:calc(96px*var(--kn));height:calc(96px*var(--kn));margin-top:calc(var(--kn)*-33px);margin-bottom:calc(var(--kn)*4px);pointer-events:none}
.gate-mark{display:block;width:100%;height:0}
.epigraph{margin:6px 0 0;max-width:min(580px,100%);font:700 13px/1.75 var(--serif);letter-spacing:.17em;text-transform:uppercase;color:var(--brass);background:var(--dusk);padding:10px 16px 11px;box-shadow:inset 0 0 0 2px var(--scorch),4px 4px 0 var(--ink-0)}
.kicker{font:700 13px/1.4 var(--serif);letter-spacing:.24em;text-transform:uppercase;color:var(--kick,var(--brass));margin:0 0 .8em;text-shadow:2px 2px 0 var(--ink-0)}
.k-gold{color:var(--sun);margin-bottom:12px}
.pip{display:inline-block;width:6px;height:6px;background:currentColor;margin:0 .7em;vertical-align:.12em}
.wordmark{position:relative;width:480px;height:64px;margin:0}
.wordmark img{width:100%;height:100%;animation:wm-in 1.1s steps(20) both}
.wordmark::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 0 46%,#f5e8ba 46% 50%,transparent 50% 100%) 120% 0/220% 100% no-repeat;-webkit-mask:url("brand/wordmark.svg") center/100% 100% no-repeat;mask:url("brand/wordmark.svg") center/100% 100% no-repeat;animation:wm-shine 6s steps(24) 1.6s infinite}
@keyframes wm-in{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes wm-shine{0%{background-position:120% 0}30%,100%{background-position:-20% 0}}
.genre{margin:14px 0 6px;font:700 14px/1.3 var(--serif);letter-spacing:.34em;text-transform:uppercase;color:var(--teal-lit);text-shadow:2px 2px 0 var(--ink-0)}
.tagline{margin:6px 0 16px;font:500 clamp(24px,3.1vw,34px)/1.2 "Pixelify Sans";color:var(--sun-core);text-shadow:3px 3px 0 var(--ink-0)}
.cta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:18px 26px}
.mini{margin:18px 0 0;max-width:46ch;font-size:14px;color:var(--limewash);background:var(--dusk);padding:2px 8px;box-shadow:3px 3px 0 var(--ink-0)}
.mini a{color:var(--sun)}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin-top:22px}
.chips li{font:700 14px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--brass);background:var(--dusk);padding:9px 11px 9px 9px;box-shadow:inset 0 0 0 2px var(--oak-lit),3px 3px 0 var(--ink-0)}
.chips li::before{content:"";display:inline-block;width:6px;height:6px;background:var(--lantern);margin-right:9px;vertical-align:.05em}

.play{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:16px;padding:20px 34px 22px;font:500 27px/1 "Pixelify Sans";letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink-0);background:var(--ember);border:4px solid var(--ink-0);box-shadow:inset 4px 4px 0 var(--ember-core),inset -4px -4px 0 var(--ember-deep),6px 6px 0 var(--ink-0);cursor:pointer;transition:none}
.play:hover{background:#f6954f}
.play:active{transform:translate(4px,4px);box-shadow:inset 4px 4px 0 var(--ember-core),inset -4px -4px 0 var(--ember-deep),2px 2px 0 var(--ink-0)}
.play-arrow{flex:none}
.play:hover .play-arrow{animation:bob .5s steps(2) infinite}
@keyframes bob{50%{transform:translateY(6px)}}
.play-t,.play-arrow{position:relative;z-index:1}
.glint{z-index:0;position:absolute;top:0;bottom:0;left:-30px;width:14px;background:var(--ember-core);animation:glint 4.2s steps(14) infinite}
.glint::after{content:"";position:absolute;left:22px;top:0;bottom:0;width:6px;background:var(--ember-core)}
@keyframes glint{0%,55%{left:-30px}100%{left:calc(100% + 8px)}}
.touch-only{display:none}
.play.touch-only{font:700 22px/1.1 var(--serif);letter-spacing:.14em;padding:20px 26px 22px}
.descend{margin-top:26px;display:flex;flex-direction:column;align-items:center;gap:8px;text-decoration:none;color:var(--sun);font:700 14px/1 var(--serif);letter-spacing:.3em;text-transform:uppercase;text-shadow:2px 2px 0 var(--ink-0)}
.descend svg{animation:bob 1.2s steps(2) infinite}

/* ---------- panels (lit windows) ---------- */
.win{position:relative;background:var(--panel);box-shadow:inset 0 0 0 2px var(--edge),6px 6px 0 var(--shade);padding:28px;margin:48px 0}
.win::before{content:"";position:absolute;inset:-6px;pointer-events:none;--b:var(--brk);
  background:
   linear-gradient(var(--b),var(--b)) 0 0/14px 3px no-repeat,linear-gradient(var(--b),var(--b)) 0 0/3px 14px no-repeat,
   linear-gradient(var(--b),var(--b)) 100% 0/14px 3px no-repeat,linear-gradient(var(--b),var(--b)) 100% 0/3px 14px no-repeat,
   linear-gradient(var(--b),var(--b)) 0 100%/14px 3px no-repeat,linear-gradient(var(--b),var(--b)) 0 100%/3px 14px no-repeat,
   linear-gradient(var(--b),var(--b)) 100% 100%/14px 3px no-repeat,linear-gradient(var(--b),var(--b)) 100% 100%/3px 14px no-repeat}
.win.tight{margin-top:0}
.win h3{font:700 22px/1.25 var(--serif);letter-spacing:.03em;color:var(--ink);margin:0 0 .5em;text-shadow:2px 2px 0 var(--shade)}
.win .note{font-size:14.5px;color:var(--dim);margin:14px 0 0}
.win p{margin-bottom:.8em}
.win p:last-child{margin-bottom:0}
.win-head{margin-bottom:14px}

/* ---------- section plate: kicker, title card, ornament ---------- */
.plate{text-align:center;margin:104px auto 44px;max-width:780px}
#town .plate{margin-top:84px}
.plate .kicker{margin-bottom:.5em}
.k-plate{color:var(--ink);font-size:14px}
.k-plate .num{color:var(--acc)}
.title{font:700 clamp(28px,4.4vw,46px)/1.12 "Cinzel",serif;letter-spacing:.04em;color:var(--title);text-shadow:3px 3px 0 var(--ink-0);margin:.1em 0 .35em}
.title.sm{font-size:clamp(24px,3vw,32px);letter-spacing:.06em}
.title.big{font-size:clamp(34px,6.6vw,76px);letter-spacing:.07em;text-transform:uppercase}
.k-spec{color:var(--spectral);letter-spacing:.42em}
.sub{font:700 14px/1 var(--serif);letter-spacing:.5em;text-transform:uppercase;color:var(--teal-lit);margin:6px 0 0;padding-left:.5em;text-shadow:2px 2px 0 var(--ink-0)}
.k-chap{color:var(--chaplain)}
.orn{display:flex;align-items:center;gap:14px;margin:12px auto 22px;max-width:520px}
.orn::before,.orn::after{content:"";flex:1;height:2px;background:var(--brk,var(--brass));opacity:1}
.s0 .orn{--brk:var(--el-fire)}.s1 .orn{--brk:var(--el-water)}.s2 .orn{--brk:var(--el-dark)}.s3 .orn{--brk:var(--el-earth)}
.orn i{width:3px;height:3px;background:var(--lantern);box-shadow:0 -6px 0 var(--lantern),-3px -3px 0 var(--lantern),3px -3px 0 var(--lantern),-6px 0 0 var(--lantern),6px 0 0 var(--lantern),0 6px 0 var(--lantern),-3px 3px 0 var(--lantern),3px 3px 0 var(--lantern),0 0 0 0 var(--lantern)}
.lede{max-width:62ch;margin:0 auto;color:var(--ink);font-size:17px;text-shadow:2px 2px 0 var(--ink-0)}
.lede b{color:var(--lantern)}

/* ---------- trailer ---------- */
.video{position:relative;background:var(--ink-0);box-shadow:0 0 0 4px var(--ink-0)}
.video video{width:100%;height:auto;aspect-ratio:16/9;background:var(--ink-0)}
.video-bar{position:absolute;left:12px;bottom:12px;display:flex;gap:10px}
.pxb{display:inline-flex;align-items:center;gap:10px;font:700 14px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-0);background:var(--brass);border:3px solid var(--ink-0);padding:9px 12px;cursor:pointer;box-shadow:inset 2px 2px 0 var(--wordmark-gold),inset -2px -2px 0 #8d7a4e,3px 3px 0 var(--ink-0)}
.pxb:active{transform:translate(3px,3px);box-shadow:inset 2px 2px 0 var(--wordmark-gold),inset -2px -2px 0 #8d7a4e}
.pxb[aria-pressed=true]{background:var(--lantern)}
#v-sound:not([aria-pressed=true]) .wave{display:none}

/* ---------- Essence cards: icon, name, source, one line ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 28px;margin-bottom:56px}
.card{position:relative;background:var(--panel);box-shadow:inset 0 0 0 2px var(--edge),5px 5px 0 var(--shade);border-top:6px solid var(--el);padding:18px 20px 22px;text-align:center}
.card .orb{width:96px;height:96px;margin:-2px auto 8px}
.card .orb img{width:96px;height:96px;animation:orb 1.4s steps(2) infinite}
.card:nth-child(2n) .orb img{animation-delay:-.35s}.card:nth-child(3n) .orb img{animation-delay:-.7s}
@keyframes orb{50%{transform:translateY(-6px)}}
.card:hover .orb img,.card:focus-within .orb img{animation-duration:.5s}
.card h3{font:700 26px/1.2 var(--serif);letter-spacing:.06em;margin:.2em 0 .2em;color:var(--el);text-shadow:2px 2px 0 var(--shade)}
.card .from{margin:0 0 .8em;font:700 12.5px/1.4 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--limewash-dim)}
.card .line{margin:0;font-size:16px;line-height:1.55;color:var(--limewash)}
.card:hover{box-shadow:inset 0 0 0 2px var(--el),5px 5px 0 var(--shade)}


/* ---------- the muster and the Chaplain ---------- */
.roster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px;margin-top:6px}
.roster li{text-align:center;position:relative;padding-bottom:6px}
.roster canvas{width:128px;height:192px;margin:0 auto}
.roster b{display:block;font:700 14px/1.2 var(--mono);letter-spacing:.06em;color:var(--limewash);border-top:4px solid var(--ac);padding-top:8px;margin-top:-6px}
.roster small{display:block;font-size:12px;color:var(--limewash-dim);line-height:1.25;margin-top:3px}
.roster li:hover canvas{animation:hop .5s steps(2) infinite}
@keyframes hop{50%{transform:translateY(-4px)}}
.split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.sprite-box{background:var(--watch-deep);box-shadow:inset 0 0 0 2px var(--watch-stone),0 0 0 4px var(--ink-0);line-height:0}
.sprite-box canvas{width:calc(160px*var(--k));height:calc(104px*var(--k))}

/* ---------- Stratum III: the stills ---------- */
.shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 28px;margin-top:40px}
.shots li:first-child{grid-column:1/-1}
.frame{background:var(--ink-0);padding:6px;box-shadow:inset 0 0 0 2px var(--bone-1),6px 6px 0 var(--ink-0);position:relative}
.frame img{width:100%;height:auto}
.shots figure{margin:0}
/* at full width the stills step down by whole numbers: 960 px is the capture at 1/2, 480 px at 1/4 */
@media (min-width:1132px){
  .shots{grid-template-columns:repeat(2,492px);justify-content:center}
  .shots li:first-child{justify-self:start;grid-column:1/-1}
  .shots li:first-child .frame img{width:960px}
  .shots li:not(:first-child) .frame img{width:480px}
}
.pxlink{display:inline-flex;align-items:center;gap:12px;margin-top:6px;font:700 18px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-0);background:var(--bone-3);padding:14px 18px;text-decoration:none;border:3px solid var(--ink-0);box-shadow:inset 3px 3px 0 var(--bone-4),inset -3px -3px 0 var(--bone-2),4px 4px 0 var(--ink-0)}
.pxlink:hover{background:var(--bone-4)}

/* ---------- Throne ---------- */
.throne-stage{display:flex;justify-content:center;margin:12px 0 0;line-height:0}
.throne-stage canvas{width:calc(160px*var(--k));height:calc(148px*var(--k))}
.cta-coda .play{font-size:32px;padding:26px 44px 28px}
.foot{background:var(--abyss-0);border-top:4px solid var(--abyss-4);padding:26px 0 34px;color:var(--teal-lit)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;align-items:center}
.foot p{margin:0;font-size:15px}
.foot-id p+p{margin-top:4px;color:var(--limewash-dim)}
.foot ul{display:flex;gap:26px;flex-wrap:wrap}
.foot a{text-decoration:none;letter-spacing:.14em;text-transform:uppercase;font-size:14px;font-weight:500;color:var(--teal-lit);border-bottom:3px solid var(--teal)}
.foot a:hover{color:var(--sun)}
.foot .ver::before{content:"\00b7";margin:0 .7em;color:var(--brass)}

/* ---------- reveal: a scanline curtain, stepped ---------- */
.js .reveal:not(.in){clip-path:inset(-16px -24px calc(100% - 2px) -24px)}
.js .reveal.in{animation:curtain .45s steps(7) both}
@keyframes curtain{from{clip-path:inset(-16px -24px calc(100% - 2px) -24px)}to{clip-path:inset(-16px -24px -24px -24px)}}

/* ---------- depth gauge ---------- */
.gauge{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.gauge-read{margin:0;text-align:right;font:700 11px/1.2 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--sun);text-shadow:2px 2px 0 var(--ink-0);background:var(--ink-0);padding:6px 8px;box-shadow:inset 0 0 0 2px #2c3338}
.gauge-k{display:block;color:var(--limewash-dim);font-size:10px}
.gauge-read b{font-size:16px;letter-spacing:.04em}
.gauge-body{position:relative;width:22px;height:min(66vh,540px);background:var(--ink-0);padding:4px;box-shadow:inset 0 0 0 2px #2c3338,3px 3px 0 var(--ink-0)}
.gauge-cells{display:flex;flex-direction:column;gap:2px;height:100%}
.gauge-cells i{flex:1;background:#101c1f;display:block}
.gauge-cells i.on{background:var(--c,var(--lantern))}
.gauge-notches{position:absolute;inset:0;pointer-events:none}
.gauge-notches li{position:absolute;right:0;transform:translateY(-50%)}
.gauge-notches a{pointer-events:auto;display:flex;align-items:center;gap:10px;flex-direction:row-reverse;text-decoration:none;color:var(--limewash-dim);font:700 11px/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.gauge-notches a i{width:30px;height:4px;background:var(--limewash-dim);box-shadow:0 0 0 2px var(--ink-0);flex:none}
.gauge-notches a span{background:var(--ink-0);padding:5px 7px;box-shadow:inset 0 0 0 2px #2c3338;margin-right:4px}
.gauge-notches a.on{color:var(--sun)}
.gauge-notches a.on i{background:var(--lantern)}
.gauge-notches a:hover span,.gauge-notches a:focus-visible span{color:var(--sun-core)}
.gauge-lamp{position:absolute;left:-2px;top:0;transform:translate(-3px,-50%);animation:lamp .9s steps(3) infinite}
.gauge-lamp .lamp-core{animation:lampcore .9s steps(3) infinite}
@keyframes lamp{50%{transform:translate(-3px,calc(-50% - 3px))}}
@keyframes lampcore{0%{fill:#ffe79a}33%{fill:#f3c24f}66%{fill:#fffbe0}}

/* ---------- touch-only devices ---------- */
@media (hover:none) and (pointer:coarse){
  .play:not(.touch-only){display:none}
  .touch-only.play{display:inline-flex}
  p.touch-only{display:block}
  .descend svg{animation:bob 1.2s steps(2) infinite}
}

/* ---------- smaller screens ---------- */
@media (max-width:1520px){.gauge-notches a span{display:none}.gauge-notches a.on span,.gauge-notches a:focus-visible span{display:block}}
@media (max-width:1100px){
  .roster{grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
  .split{grid-template-columns:1fr}.sprite-box{justify-self:center}
}
@media (max-width:999px){
  /* phones and narrow windows: the knight, then Play, then the premise */
  .knight{order:2}.hero-rest{order:3}
  .knight canvas{margin-top:calc(var(--kn)*-22px)}
  .hero-rest .cta{order:1}.hero-rest .small{order:2}.hero-rest .premise{order:3;margin:22px 0 0}
  .descend{margin-top:34px}
}
@media (max-width:760px){
  body{font-size:15px}
  :root{--k:2}
  .wordmark{width:420px;height:56px}
  .win{padding:20px 18px;margin:48px 0}
  .plate{margin-top:96px}
  .gauge{right:2px}
  .gauge-read{display:none}
  .gauge-body{width:7px;padding:0;height:62vh;box-shadow:inset 0 0 0 1px #2c3338}
  .gauge-cells{gap:1px}
  .gauge-cells i{background:#0b1417}
  .gauge-notches a i{width:7px;height:2px;box-shadow:none}
  .gauge-notches a span{display:none!important}
  .gauge-lamp{display:none}
  .shots{grid-template-columns:1fr}
}
@media (max-width:560px){
  .mini.small{white-space:normal}
  .hero-in{padding-bottom:30px}
  .wordmark{width:300px;height:40px}
  .hero{padding-top:30px}
  .play{font-size:24px;padding:18px 22px 20px;letter-spacing:.06em}
  .cta-coda .play{font-size:24px;padding:20px 22px 22px;letter-spacing:.06em}
  .roster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{flex-direction:column;align-items:flex-start}
}

/* ---------- reduced motion: a still page ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .js .reveal:not(.in){clip-path:none}
  .wordmark::after{display:none}
}


/* =====================================================================================================
   A5 SPIRITS: the Essence effects. Everything below is hard pixels and stepped motion.
   ===================================================================================================== */
#fx{position:fixed;left:0;top:0;z-index:45;pointer-events:none}
.shaft,main,.spirits{transform:translate(var(--sx),var(--sy))}   /* the quake: whole-pixel steps set by spirits.js */

/* carved tablets: every panel gets a dithered lintel in its stratum's element colour */
.win::after{content:"";position:absolute;left:14px;right:14px;top:-12px;height:6px;pointer-events:none;
  background:conic-gradient(var(--brk) 0 25%,transparent 0 50%,var(--brk) 0 75%,transparent 0) 0 0/6px 6px}
.card{outline-offset:4px}
.card:focus-visible{box-shadow:inset 0 0 0 2px var(--el),5px 5px 0 var(--shade)}

/* the Play button's charge ring: squares around the button that fill in steps */
.playwrap{position:relative;display:inline-block}
.ring{position:absolute;inset:0;pointer-events:none}
.ring i{position:absolute;width:6px;height:6px;visibility:hidden}
.playwrap:hover .ring i,.playwrap:focus-within .ring i{visibility:visible;background:#1b2024;box-shadow:0 0 0 2px var(--ink-0)}
.ring i.on{visibility:visible;background:var(--el-base);box-shadow:0 0 0 2px var(--ink-0)}
.ring i.full{visibility:visible;box-shadow:0 0 0 2px var(--ink-0)}
.ring i.full.a{background:var(--el-flash)}.ring i.full.b{background:var(--el-lit)}
.play.charged{background:var(--ember-core)}
.play.charged .play-arrow{animation:bob .3s steps(2) infinite}
.play.flash{background:#fff!important;color:#fff!important;border-color:#fff!important;box-shadow:6px 6px 0 #fff!important;transform:none}
.play.flash .glint{display:none}
.play.flash .play-arrow{color:#fff}


/* =====================================================================================================
   Copy round: the story deck (docs/release/SITE_COPY.md) and the Dark knight. Same hard pixels.
   ===================================================================================================== */
blockquote{margin:0}
.voices footer,.threat footer{font:700 12.5px/1.4 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);text-shadow:2px 2px 0 var(--ink-0)}
.voices p::before,.threat blockquote p::before{content:"\201C"}
.voices p::after,.threat blockquote p::after{content:"\201D"}

/* Selvarin: three townsfolk, a line each */
.voices{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 40px;margin:0 0 40px}
.voices .win{margin:34px 0;display:flex}
.voices blockquote{display:flex;flex-direction:column;justify-content:space-between;gap:18px;width:100%}
.voices p{margin:0;font-size:18px;line-height:1.5;color:var(--limewash)}
.voices blockquote p+p{margin-top:12px}

/* Below: the rumours */
.threat{margin:34px 0}
.threat blockquote p{margin:0 0 6px;font-size:21px;line-height:1.45;color:var(--ink);text-shadow:2px 2px 0 var(--shade)}
.threat blockquote{margin-bottom:16px}
.threat>p,.bell-copy>p{color:var(--dim)}
.colossus-name{max-width:640px}
.colossus-name .title.sm{margin:0 0 .15em}
.colossus-name .hint{margin:0 0 .9em;font-size:14px;line-height:1.5;color:var(--dim)}

/* Stratum III: the muster, the floor line, the stills */
.roster b{margin-top:-6px}
.floorline{max-width:640px;margin:34px auto 12px;text-align:center;font-size:17px;line-height:1.7;color:var(--ink);text-shadow:2px 2px 0 var(--ink-0)}
.floorline q{color:var(--sun)}
.shots{margin-top:40px}
.cards{margin-bottom:104px}
.s2 .plate .sub{margin-top:2px;color:var(--bone-3)}

/* The challenge: the Colossus once, the scope note, Play, the bug link */
.door .plate{margin-top:120px}
.door .throne-stage{margin:8px 0 0}
.coda{max-width:760px;margin:36px auto 24px;text-align:center}
.scope{margin:0 auto 6px;font-size:19px;line-height:1.7;color:var(--ink);text-shadow:2px 2px 0 var(--ink-0)}
.cta-coda{margin:26px 0 4px}
.bug{margin:28px 0 0}
.bug .pxlink{margin-top:0}

/* Before you go down: closed by default, one small panel */
.before{padding:0;max-width:860px;margin:64px auto}
.before summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 28px;cursor:pointer;font:700 20px/1.2 var(--serif);letter-spacing:.07em;color:var(--ink);text-shadow:2px 2px 0 var(--shade)}
.before summary::-webkit-details-marker{display:none}
.before .chev{flex:none;color:var(--acc)}
.before[open] .chev{transform:scaleY(-1)}
.before-body{padding:6px 28px 28px;border-top:2px solid var(--edge)}
.facts{margin:18px 0 0;display:grid;gap:16px}
.facts dt{font:700 12.5px/1.4 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--kick)}
.facts dd{margin:2px 0 0;color:var(--ink);font-size:15.5px}

/* The closing line */
.closing{margin:64px auto 80px;text-align:center;font:700 clamp(15px,2vw,21px)/1.7 var(--serif);letter-spacing:.22em;text-transform:uppercase;color:var(--teal-lit);text-shadow:2px 2px 0 var(--ink-0)}

@media (max-width:1100px){
  .voices{grid-template-columns:1fr}
  .col-win{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cards{grid-template-columns:1fr;gap:22px}
  .card{display:grid;grid-template-columns:96px minmax(0,1fr);column-gap:14px;padding:14px;text-align:left}
  .card .orb{grid-row:1/4;margin:0}
  .card h3{font-size:24px;margin:.1em 0 .1em}
  .card .from{margin-bottom:.4em}
  .card .line{grid-column:1/3;margin-top:8px}
}
@media (max-width:560px){
  .pxlink{font-size:15px;letter-spacing:.05em;flex-wrap:wrap;justify-content:center}
  .threat blockquote p{font-size:19px}
  .before summary{padding:18px 18px;font-size:18px}
  .before-body{padding:6px 18px 22px}
  .scope{font-size:17px}
}


/* =====================================================================================================
   AA8: the disabled Steam button, the email list and the Play modal. Hard pixels, stepped, no blur.
   ===================================================================================================== */
.steam{display:inline-flex;flex-direction:column;align-items:center;gap:7px;padding:12px 22px 13px;font:700 15px/1.2 var(--serif);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);background:#0b1417;border:3px solid var(--ink-0);box-shadow:inset 0 0 0 2px #3a3640,4px 4px 0 var(--ink-0);cursor:not-allowed;text-shadow:none}
.steam-s{font-size:12px;letter-spacing:.22em;color:var(--limewash-dim)}
.steam-s::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;vertical-align:.08em;background:var(--lantern-deep)}
@media (hover:none) and (pointer:coarse){.cta .steam{order:3}}

/* forms: labels in Cinzel caps, fields in monospace, square pixel boxes */
.form{display:grid;gap:16px;text-align:left}
.field{display:grid;gap:6px}
.field label{font:700 12.5px/1.4 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--kick)}
.form input[type=email],.form input[type=password],.form input[type=text]{width:100%;font:400 16px/1.4 var(--mono);color:var(--limewash);background:#04080a;border:3px solid var(--ink-0);box-shadow:inset 0 0 0 2px var(--edge);padding:12px 14px;border-radius:0;-webkit-appearance:none;appearance:none}
.form input::placeholder{color:var(--limewash-dim)}
.form input:focus-visible{outline:4px dotted var(--sun-core);outline-offset:3px}
.form input[aria-invalid=true]{box-shadow:inset 0 0 0 2px var(--ember),inset 0 0 0 5px var(--ink-0)}
.check{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.check input{appearance:none;-webkit-appearance:none;width:24px;height:24px;margin:2px 0 0;background:#04080a;border:3px solid var(--ink-0);box-shadow:inset 0 0 0 3px var(--brass);cursor:pointer;border-radius:0}
.check input:checked{background:var(--lantern);box-shadow:inset 0 0 0 3px var(--brass),inset 0 0 0 6px #04080a}
.check input:focus-visible{outline:4px dotted var(--sun-core);outline-offset:3px}
.check label{font-size:15px;line-height:1.55;color:var(--ink);cursor:pointer}
.form-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.priv,.gate-join a{font:700 13px/1.4 var(--serif);letter-spacing:.2em;text-transform:uppercase;color:var(--brass);text-decoration:none;border-bottom:3px solid var(--brass)}
.priv:hover,.gate-join a:hover{color:var(--sun-core);border-color:var(--sun-core)}
.msg{margin:0;min-height:1.6em;font-size:15.5px;line-height:1.55;color:var(--ink)}
.msg.err{color:#ffaccb}
.msg.ok{color:var(--sun-core);font-weight:700}
.btn-join{margin-top:0}

/* the email list: one panel under the Play button */
.letter{max-width:720px;margin:56px auto 0}
.letter h3{font:700 22px/1.3 var(--serif);letter-spacing:.03em;color:var(--ink);margin:0 0 18px;text-shadow:2px 2px 0 var(--shade)}
.letter .msg{min-height:0}
.letter .msg:empty{display:none}

/* the Play modal: a lit window over a checker of the dark. */
html.gate-open{overflow:hidden}
.gate-dlg{--panel:#0b1417;--edge:#6e1d1c;--brk:var(--el-fire);--shade:var(--ink-0);--ink:var(--limewash);--dim:#a8b3a6;--kick:var(--el-fire);--acc:var(--el-fire);
  padding:0;border:0;background:transparent;color:var(--limewash);width:min(520px,100% - 32px);max-width:none;max-height:calc(100dvh - 32px);overflow:visible;margin:auto}
.gate-dlg::backdrop{background:conic-gradient(#020405 0 25%,transparent 0 50%,#020405 0 75%,transparent 0) 0 0/8px 8px}
.gate-win{position:relative;background:var(--panel);box-shadow:inset 0 0 0 2px var(--edge),8px 8px 0 var(--ink-0);padding:32px 32px 28px}
.gate-win::before{content:"";position:absolute;inset:-6px;pointer-events:none;--b:var(--brk);
  background:
   linear-gradient(var(--b),var(--b)) 0 0/14px 3px no-repeat,linear-gradient(var(--b),var(--b)) 0 0/3px 14px no-repeat,
   linear-gradient(var(--b),var(--b)) 100% 0/14px 3px no-repeat,linear-gradient(var(--b),var(--b)) 100% 0/3px 14px no-repeat,
   linear-gradient(var(--b),var(--b)) 0 100%/14px 3px no-repeat,linear-gradient(var(--b),var(--b)) 0 100%/3px 14px no-repeat,
   linear-gradient(var(--b),var(--b)) 100% 100%/14px 3px no-repeat,linear-gradient(var(--b),var(--b)) 100% 100%/3px 14px no-repeat}
.gate-win::after{content:"";position:absolute;left:14px;right:14px;top:-12px;height:6px;pointer-events:none;background:conic-gradient(var(--brk) 0 25%,transparent 0 50%,var(--brk) 0 75%,transparent 0) 0 0/6px 6px}
.k-gate{color:var(--sun);margin:0 0 .6em}
.gate-win h2{text-wrap:balance;font:700 clamp(26px,5vw,32px)/1.15 var(--serif);letter-spacing:.03em;color:var(--wordmark-gold);margin:0 0 14px;text-shadow:3px 3px 0 var(--ink-0)}
.gate-lede{margin:0 0 20px;font-size:16px;line-height:1.6;color:var(--limewash)}
.gate-x{position:absolute;right:14px;top:14px;display:grid;place-items:center;width:40px;height:40px;padding:0;color:var(--ink-0);background:var(--brass);border:3px solid var(--ink-0);box-shadow:inset 2px 2px 0 var(--wordmark-gold),inset -2px -2px 0 #8d7a4e,3px 3px 0 var(--ink-0);cursor:pointer}
.gate-x:active{transform:translate(3px,3px);box-shadow:inset 2px 2px 0 var(--wordmark-gold),inset -2px -2px 0 #8d7a4e}
.gate-actions{margin-top:2px}
.gate-go{display:inline-flex;align-items:center;font:500 24px/1 "Pixelify Sans";letter-spacing:.08em;text-transform:uppercase;color:var(--ink-0);background:var(--ember);border:4px solid var(--ink-0);padding:15px 26px 17px;box-shadow:inset 4px 4px 0 var(--ember-core),inset -4px -4px 0 var(--ember-deep),5px 5px 0 var(--ink-0);cursor:pointer}
.gate-go:hover{background:#f6954f}
.gate-go:active{transform:translate(4px,4px);box-shadow:inset 4px 4px 0 var(--ember-core),inset -4px -4px 0 var(--ember-deep),1px 1px 0 var(--ink-0)}
.gate-cancel{font:700 14px/1 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-0);background:var(--brass);border:3px solid var(--ink-0);padding:12px 16px;cursor:pointer;box-shadow:inset 2px 2px 0 var(--wordmark-gold),inset -2px -2px 0 #8d7a4e,3px 3px 0 var(--ink-0)}
.gate-cancel:active{transform:translate(3px,3px);box-shadow:inset 2px 2px 0 var(--wordmark-gold),inset -2px -2px 0 #8d7a4e}
.gate-join{margin:6px 0 0}
.gate-invite{margin:22px 0 0;border-top:3px solid var(--edge);padding-top:16px}
.gate-invite summary{cursor:pointer;list-style:none;font:700 14px/1.4 var(--serif);letter-spacing:.18em;text-transform:uppercase;color:var(--brass)}
.gate-invite summary::-webkit-details-marker{display:none}
.gate-invite summary:hover{color:var(--sun-core)}
.gate-invite summary:focus-visible{outline:4px dotted var(--sun-core);outline-offset:4px}
.gate-invite[open] summary{margin-bottom:16px}
.gate-dlg .msg:empty{display:none}
[hidden]{display:none!important}
@media (max-width:560px){
  .gate-win{padding:26px 20px 22px}
  .gate-go{font-size:24px;padding:14px 20px 16px;letter-spacing:.05em}
}