:root{
  --dark:1;      /* 1 = pitch black, 0 = scene visible */
  --blur:14px;   /* vision clearing */
  --dmg:0;       /* damage vignette */
  --flash:0;     /* impact flash */
  --accent:#e8a13a;
  --blood:#b4231f;
  --anom:#8b5cf6;   /* repainted per rarity by the HUD */
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:#000;overflow:hidden}
body{
  font-family:"Helvetica Neue",Arial,sans-serif;
  color:#d8d2c8;-webkit-font-smoothing:antialiased;
  user-select:none;cursor:default;
}

#stage{position:fixed;inset:0}
canvas#game{display:block;width:100%;height:100%}
body.playing canvas#game{cursor:none}

/* ---- full-frame film layers ---- */
#darkness{position:fixed;inset:0;background:#000;opacity:var(--dark);
  pointer-events:none;transition:opacity .25s linear;z-index:6}

#blur-veil{position:fixed;inset:0;pointer-events:none;z-index:5;
  backdrop-filter:blur(var(--blur)) brightness(.92) saturate(.8);
  -webkit-backdrop-filter:blur(var(--blur));transition:backdrop-filter .1s linear}

#grain{position:fixed;inset:-40%;pointer-events:none;z-index:7;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
  animation:grain 1.1s steps(4) infinite}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}
  50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(0,0)}}

#vignette{position:fixed;inset:0;pointer-events:none;z-index:6;
  background:radial-gradient(ellipse 78% 74% at 50% 50%,transparent 42%,rgba(0,0,0,.55) 78%,rgba(0,0,0,.92) 100%)}

#dmg{position:fixed;inset:0;pointer-events:none;z-index:7;opacity:var(--dmg);
  background:radial-gradient(ellipse 82% 78% at 50% 50%,transparent 34%,rgba(150,12,10,.5) 76%,rgba(90,0,0,.95) 100%);
  transition:opacity .18s ease-out}

#flash{position:fixed;inset:0;pointer-events:none;z-index:8;opacity:var(--flash);
  background:radial-gradient(circle at 50% 55%,rgba(255,240,220,.95),rgba(255,180,120,.35) 55%,transparent 78%)}

/* ---- HUD ---- */
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}

#crosshair{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:.35}
#crosshair i{position:absolute;background:#efe6d6}
#crosshair i:nth-child(1){left:12px;top:0;width:2px;height:7px}
#crosshair i:nth-child(2){left:12px;bottom:0;width:2px;height:7px}
#crosshair i:nth-child(3){top:12px;left:0;height:2px;width:7px}
#crosshair i:nth-child(4){top:12px;right:0;height:2px;width:7px}

#meters{position:absolute;left:26px;bottom:24px;display:flex;flex-direction:column;gap:13px}
.meter{display:flex;align-items:center;gap:10px}
.meter .lbl{font:700 10px/1 "Helvetica Neue",Arial;letter-spacing:.22em;color:#9d958a;width:96px;text-align:right}
.meter .bar{width:172px;height:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden}
.meter .bar i{position:absolute;inset:0;width:0%;background:var(--accent);display:block;
  box-shadow:0 0 12px rgba(232,161,58,.55);transition:width .08s linear}
.meter .tip{font:400 9px/1.2 Arial;letter-spacing:.1em;color:#6f675d;opacity:0;transition:opacity .3s}
.meter.hot .tip{opacity:1}
.meter.braced .tip{opacity:1;color:#8fc79a}
#m-desp.full .bar i{background:#ff5a3c;box-shadow:0 0 22px rgba(255,90,60,.8);animation:pulse .45s ease-in-out infinite alternate}
@keyframes pulse{to{opacity:.5}}
#m-load .bar i{background:#7fd0d6;box-shadow:0 0 12px rgba(127,208,214,.5)}
/* the anomaly label is an ability name, not a gauge word, so it is allowed to be
   longer and it is allowed to be loud */
#m-anom .lbl{width:auto;max-width:250px;letter-spacing:.16em;color:var(--anom)}
#m-anom .bar i{background:var(--anom);box-shadow:0 0 16px var(--anom)}
#m-anom.full .bar i{animation:pulse .5s ease-in-out infinite alternate}
#m-anom.full .tip{opacity:1;color:var(--anom)}

.pips{display:flex;gap:5px}
.pips i{width:15px;height:15px;border:1px solid rgba(255,255,255,.22);background:var(--blood);
  transform:rotate(45deg);opacity:.9;transition:opacity .2s,background .2s}
.pips i.off{background:transparent;opacity:.3}

#prompt{position:absolute;left:50%;top:61%;transform:translate(-50%,-50%);
  font:700 clamp(13px,1.7vw,21px)/1.35 "Helvetica Neue",Arial;letter-spacing:.16em;
  color:#fff;text-shadow:0 0 24px rgba(0,0,0,.9),0 2px 0 #000;
  max-width:min(720px,84vw);
  padding:12px 22px;border:1px solid rgba(255,255,255,.3);background:rgba(10,8,6,.42);
  animation:breathe .6s ease-in-out infinite alternate;text-align:center}
#prompt b{color:var(--accent)}
@keyframes breathe{from{transform:translate(-50%,-50%) scale(.985)}to{transform:translate(-50%,-50%) scale(1.02)}}

#caption{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);width:min(880px,84vw);
  text-align:center;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.72) 30%,rgba(0,0,0,.72));
  padding:20px 26px 16px}
#caption b{display:block;font:700 10px/1 "Helvetica Neue",Arial;letter-spacing:.26em;
  color:var(--accent);margin-bottom:9px;text-transform:uppercase}
#caption p{font:400 clamp(14px,1.65vw,19px)/1.5 Georgia,"Times New Roman",serif;color:#efe7da;
  text-shadow:0 1px 3px #000}
#caption.think p{font-style:italic;color:#c9beae}
#caption.think b{color:#8aa9b5}

#hint{position:absolute;right:26px;bottom:26px;max-width:340px;text-align:right;
  font:400 11px/1.55 Arial;letter-spacing:.06em;color:#8b8479}
#hint kbd{color:#d8d2c8}

.hidden{opacity:0!important;visibility:hidden}
#prompt,#caption{transition:opacity .18s}

/* ---- cover / end card ---- */
#cover,#endcard{position:fixed;inset:0;z-index:20;display:grid;overflow:auto;
  background:radial-gradient(ellipse at 50% 42%,#1b1410 0%,#080604 62%,#000 100%);
  transition:opacity .8s ease}
#cover::after,#endcard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
/* margin:auto rather than place-items:center: a title screen taller than the
   window stays reachable from its top edge instead of clipping */
.cover-inner{margin:auto;text-align:center;max-width:880px;padding:40px 24px}
.mark{display:block;margin:0 auto 20px;width:min(300px,64vw);height:auto;
  filter:drop-shadow(0 0 34px rgba(206,44,28,.3))}
.kicker{font:700 11px/1 Arial;letter-spacing:.42em;color:#7d6a52;margin-bottom:18px}
#cover h1,#endcard h1{font:800 clamp(30px,6.2vw,68px)/1.02 Arial;letter-spacing:-.01em;color:#f2ece1;margin-bottom:16px}
#cover h1 em,#endcard h1 em{font-style:normal;color:var(--accent)}
.sub{font:400 clamp(13px,1.6vw,17px)/1.6 Georgia,serif;color:#a89f92;margin-bottom:24px}
.keys{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 20px;
  margin:0 auto 26px;max-width:840px;text-align:left}
.keys li{display:flex;gap:10px;align-items:baseline;font:400 12px/1.4 Arial;color:#877f74}
.keys kbd{flex:0 0 74px;font:700 10px/1.9 Arial;letter-spacing:.1em;color:#eadfcb;
  background:#1d1813;border:1px solid #3a3025;border-bottom-width:2px;padding:0 7px;text-align:center}
button{pointer-events:auto;cursor:pointer;font:700 13px/1 Arial;letter-spacing:.28em;
  color:#0c0a08;background:var(--accent);border:0;padding:17px 40px;transition:.18s}
button:hover{background:#ffc25c;transform:translateY(-1px)}
.note{margin-top:18px;font:400 10px/1.6 Arial;letter-spacing:.14em;color:#5d564d;text-transform:uppercase}
#stats{font-family:Arial;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#8a8177}

/* ---- pause menu ---- */
#menu{position:fixed;inset:0;z-index:22;display:grid;place-items:center;transition:opacity .25s ease;
  background:rgba(6,5,4,.88);backdrop-filter:blur(7px) brightness(.7);
  -webkit-backdrop-filter:blur(7px) brightness(.7)}
#menu h1{font:800 clamp(26px,4.6vw,46px)/1.05 Arial;letter-spacing:-.01em;color:#f2ece1;margin-bottom:26px}
#menu h1 em{font-style:normal;color:var(--accent)}
#menu-keys{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7d7568}
.rows{display:grid;gap:15px;max-width:430px;margin:0 auto 30px}
.row{display:grid;grid-template-columns:84px 1fr 52px;align-items:center;gap:15px;
  font:700 10px/1 "Helvetica Neue",Arial;letter-spacing:.22em;color:#9d958a}
.row output{font:700 11px/1 Arial;letter-spacing:.06em;color:var(--accent);text-align:right}
.row input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;border-radius:2px;
  background:rgba(255,255,255,.16);cursor:pointer}
.row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px rgba(232,161,58,.5)}
.row input[type=range]::-moz-range-thumb{width:15px;height:15px;border:0;border-radius:50%;background:var(--accent)}
button.ghost{margin-left:14px;background:transparent;color:#a89f92;border:1px solid #3a3025}
button.ghost:hover{background:rgba(255,255,255,.06);color:#eadfcb;transform:none}

/* ---- the navigation hub: a refresh or ESC, never a knockout ---- */
#nav{position:fixed;inset:0;z-index:24;display:grid;overflow:auto;
  background:radial-gradient(ellipse at 50% 40%,#151019 0%,#080605 60%,#000 100%)}
#nav::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
#nav h1{font:800 clamp(26px,4.8vw,52px)/1.05 Arial;letter-spacing:-.01em;color:#f2ece1;margin-bottom:14px}
#nav h1 em{font-style:normal;color:var(--accent)}
#nav .sub{max-width:680px;margin:0 auto 22px}
#nav-where{letter-spacing:.04em;text-transform:uppercase;font-family:Arial;font-size:12px;color:#8a8177}
#nav-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}
#nav-actions .ghost{margin-left:0}
#nav-list{display:grid;gap:11px;max-width:660px;margin:0 auto 26px;text-align:left}
#nav .ms{display:grid;gap:3px;text-align:left;padding:14px 18px;background:#17120e;
  border:1px solid #3a3025;color:#eadfcb;transition:.16s}
#nav .ms b{font:700 9px/1.4 Arial;letter-spacing:.3em;color:#7d6a52}
#nav .ms .ms-n{font:800 15px/1.2 Arial;letter-spacing:.08em;color:var(--accent)}
#nav .ms .ms-l{font:400 11px/1.5 Arial;letter-spacing:.03em;color:#9d958a;text-transform:none}
#nav button.ms:hover{background:#221a12;border-color:#6a553b;transform:none;color:#eadfcb}
#nav .ms.locked{border-style:dashed;opacity:.5}
#nav .ms.locked .ms-n{color:#8a8177}

/* ---- chapter choice UI ---- */
#choice{position:fixed;inset:0;z-index:23;display:grid;place-items:center;transition:opacity .3s ease;
  background:radial-gradient(ellipse at 50% 42%,#1a1512 0%,#090706 62%,#000 100%)}
#choice::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px)}
#choice h1{font:800 clamp(28px,5.2vw,56px)/1.05 Arial;letter-spacing:-.01em;color:#f2ece1;margin-bottom:18px}
#choice h1 em{font-style:normal;color:var(--accent)}
.choice-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin:32px 0;
  max-width:920px}
.choice-card{background:rgba(20,16,12,.7);border:1px solid #3a3025;padding:28px;text-align:left;
  transition:.2s;position:relative;overflow:hidden}
.choice-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);
  pointer-events:none}
.choice-card:hover{border-color:#6a553b;background:rgba(26,20,14,.8);transform:translateY(-4px)}
.choice-card h2{font:700 18px/1.1 Arial;letter-spacing:.12em;color:#f2ece1;margin-bottom:8px}
.choice-card h2 em{font-style:normal;color:var(--accent);font-size:.9em}
.choice-sub{font:400 13px/1.5 Georgia,serif;color:#a89f92;margin-bottom:16px}
.choice-features{list-style:none;padding:0;margin:0 0 20px 0}
.choice-features li{padding:8px 0 8px 24px;position:relative;font:400 12px/1.4 Arial;color:#9d958a;
  border-bottom:1px solid rgba(255,255,255,.05)}
.choice-features li::before{content:"→";position:absolute;left:0;color:var(--accent);font-weight:700}
.choice-btn{width:100%;padding:14px 24px;font-size:12px;letter-spacing:.22em;margin-top:12px}