/* PARALLEL — Echoes Between — style.css */
:root{
  --gold:#e8c47c; --gold-dim:#9a7f4e; --ink:#0c0e1a; --paper:#e9e2d2;
  --cyan:#7fe7ff; --violet:#a78bfa;
  --pix:'Press Start 2P','Outfit',monospace;
}
/* pixel-font HUD text (falls back to Outfit when offline) */
#objective,#echoCount,#weaponSlot,#worldBadge .label,#worldBadge .qhint,#toast,
#btnJournal,.jstat,.jrow .jt,.jrow .jb,.dcount{font-family:var(--pix)}
#objective{font-size:9px;line-height:1.7;letter-spacing:.02em}
#echoCount{font-size:10px}
#weaponSlot{font-size:8px}
#weaponSlot .whint{font-size:7px}
#worldBadge .label{font-size:9px;letter-spacing:.14em}
#worldBadge .qhint{font-size:7px}
#toast{font-size:9px;line-height:1.9}
#toast .tt{font-size:9px;letter-spacing:.06em}
#btnJournal{font-size:8px}
.jstat{font-size:8px}
.jrow .jt{font-size:10px}
.jrow .jb{font-size:8.5px;line-height:1.9}
.dcount{font-size:8px}
#dialog .who{font-family:var(--pix);font-size:11px;letter-spacing:.06em}
#dialog .line{font-size:14.5px}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#07080f}
body{font-family:'Outfit',sans-serif;color:var(--paper)}
/* The pixel buffer is blitted up with no smoothing, so the canvas must never be
   resampled by CSS either — filters and fractional transforms were what made the
   whole game look blurred. Chroma now happens inside the pixel buffer instead. */
#game{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;
  image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:crisp-edges}
#game.chroma,#game.chroma2{}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.42) 100%);mix-blend-mode:multiply}
#dmgVignette{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .45s;background:radial-gradient(ellipse at 50% 50%,transparent 42%,rgba(200,40,40,.45) 100%)}

/* ---------- pixel HUD: hard-edged plates, no blur, chunky frames ---------- */
:root{--plate:rgba(8,10,18,.82);--plate-line:#8a6a34;--plate-line2:#2a3247;--hard:3px 0 0 0 rgba(0,0,0,.75)}
.px{background:var(--plate);border:2px solid var(--plate-line);box-shadow:var(--hard),inset 0 0 0 1px rgba(255,255,255,.07)}
.px.b{border-color:#4f7f95;box-shadow:3px 0 0 0 rgba(0,0,0,.75),inset 0 0 0 1px rgba(255,255,255,.07)}

/* hearts HUD — real 7x6 pixel hearts built from 2px blocks (box-shadow matrix) */
#hearts{position:absolute;top:18px;right:24px;display:flex;gap:5px;align-items:center;padding:6px 9px;
  background:var(--plate);border:2px solid #7d2f34;box-shadow:var(--hard),inset 0 0 0 1px rgba(255,255,255,.06)}
#hearts .ht{width:14px;height:12px;position:relative;opacity:.22;filter:grayscale(1)}
#hearts .ht::before{content:"";position:absolute;left:0;top:0;width:2px;height:2px;background:transparent;
  box-shadow:2px 0 #ff6b5e,8px 0 #ff6b5e,
    0 2px #ff6b5e,2px 2px #ff6b5e,4px 2px #ff6b5e,6px 2px #ff6b5e,8px 2px #ff6b5e,10px 2px #ff6b5e,12px 2px #ff6b5e,
    0 4px #ff6b5e,2px 4px #ff6b5e,4px 4px #ff6b5e,6px 4px #ff6b5e,8px 4px #ff6b5e,10px 4px #ff6b5e,12px 4px #ff6b5e,
    2px 6px #ff6b5e,4px 6px #ff6b5e,6px 6px #ff6b5e,8px 6px #ff6b5e,10px 6px #ff6b5e,
    4px 8px #ff6b5e,6px 8px #ff6b5e,8px 8px #ff6b5e,
    6px 10px #ff6b5e}
#hearts .ht.full{opacity:1;filter:none}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s}
#hud.on{opacity:1}
#worldBadge{position:absolute;top:18px;left:22px;display:flex;align-items:center;gap:10px;padding:7px 12px;
  background:var(--plate);border:2px solid var(--plate-line);box-shadow:var(--hard),inset 0 0 0 1px rgba(255,255,255,.07)}
#worldBadge.b{border-color:#4f7f95}
#worldBadge .gem{width:14px;height:14px;border:2px solid var(--gold);background:rgba(232,196,124,.22);box-shadow:0 0 10px rgba(232,196,124,.5);transition:all .3s}
#worldBadge.b .gem{border-color:var(--cyan);background:rgba(127,231,255,.14);box-shadow:0 0 14px rgba(127,231,255,.6)}
#worldBadge .label{font-size:12px;letter-spacing:.42em;text-transform:uppercase;opacity:.85;white-space:nowrap}
#worldBadge.b .label{color:var(--cyan)}
#worldBadge .qhint{font-size:10px;letter-spacing:.2em;opacity:.4;margin-left:2px;white-space:nowrap}
#objective{position:absolute;top:64px;left:50%;transform:translateX(-50%);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.92;
  max-width:min(52ch,58vw);text-align:center;line-height:1.7;
  padding:6px 16px;background:var(--plate);border:2px solid var(--plate-line2);box-shadow:var(--hard)}
/* the held weapon's one-line description sits under its plate */
#weaponDesc{position:absolute;top:96px;right:24px;max-width:260px;text-align:right;font-family:'Outfit',sans-serif;font-size:11px;
  font-weight:300;line-height:1.5;letter-spacing:.03em;color:rgba(238,232,216,.6);text-shadow:0 1px 0 rgba(0,0,0,.85)}

/* narrow-window HUD overrides live at the END of the file so they win the cascade */
#echoCount{position:absolute;top:18px;right:148px;display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.12em;padding:6px 10px;
  background:var(--plate);border:2px solid var(--plate-line2);box-shadow:var(--hard),inset 0 0 0 1px rgba(255,255,255,.06)}
#echoCount svg{opacity:.9}
#weaponSlot{position:absolute;top:56px;right:24px;display:flex;align-items:center;gap:8px;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 12px;
  background:var(--plate);border:2px solid var(--plate-line);box-shadow:var(--hard),inset 0 0 0 1px rgba(255,255,255,.06)}
#weaponSlot::before,#weaponSlot::after{content:"";position:absolute;width:6px;height:6px}
#weaponSlot::before{top:-2px;left:-2px;border-top:2px solid var(--gold);border-left:2px solid var(--gold)}
#weaponSlot::after{bottom:-2px;right:-2px;border-bottom:2px solid var(--gold);border-right:2px solid var(--gold)}
#weaponSlot .wicon{width:14px;height:14px;display:inline-block;background:var(--gold);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.35),0 0 8px rgba(232,196,124,.45);clip-path:polygon(50% 0,100% 38%,74% 38%,74% 100%,26% 100%,26% 38%,0 38%)}
#weaponSlot .wname{color:var(--gold)}
#weaponSlot .whint{opacity:.35;font-size:9.5px}

/* ---------- weapon hotbar (bottom-right corner) ---------- */
#hotbar{position:absolute;bottom:22px;right:24px;display:flex;gap:7px;pointer-events:auto}
.hslot{width:46px;height:46px;position:relative;display:flex;align-items:center;justify-content:center;
  background:var(--plate);border:2px solid var(--plate-line2);box-shadow:var(--hard),inset 0 0 0 1px rgba(255,255,255,.05);
  opacity:.30;cursor:pointer;transition:border-color .15s,opacity .15s,transform .15s;user-select:none}
.hslot .hico{font-size:19px;line-height:1;text-shadow:0 0 6px currentColor;opacity:.5}
.hslot .hkey{position:absolute;top:1px;left:4px;font-family:var(--pix);font-size:7px;opacity:.55}
.hslot.owned{opacity:1}
.hslot.owned .hico{opacity:1}
.hslot.sel{border-color:var(--gold);transform:translateY(-4px);
  box-shadow:0 0 14px rgba(232,196,124,.45),inset 0 0 0 1px rgba(232,196,124,.25)}
.hslot.sel::after{content:"";position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  width:6px;height:4px;background:var(--gold);box-shadow:0 0 6px rgba(232,196,124,.8)}
.hslot.pulse{animation:hbpulse .55s ease-out}
@keyframes hbpulse{0%{box-shadow:0 0 0 0 rgba(232,196,124,.85)}100%{box-shadow:0 0 0 16px rgba(232,196,124,0)}}
@media (max-width:860px){
  .hslot{width:36px;height:36px}
  .hslot .hico{font-size:15px}
  #hotbar{bottom:16px;right:16px;gap:5px}
}
#btnJournal{position:absolute;bottom:22px;left:22px;pointer-events:auto;background:var(--plate);border:2px solid var(--plate-line);box-shadow:var(--hard);color:var(--paper);font-family:'Outfit';font-size:10px;letter-spacing:.22em;padding:7px 12px;cursor:pointer;transition:all .12s;text-transform:uppercase}
#btnJournal:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-1px)}
#btnJournal:active{transform:translateY(1px);box-shadow:1px 0 0 rgba(0,0,0,.75)}

/* ---------- journal ---------- */
.jpanel{width:min(560px,92vw);max-height:82vh;display:flex;flex-direction:column;padding:30px 30px 26px}
.jpanel h3{font-size:19px;margin-bottom:18px}
#jTabs{display:flex;gap:0;border:1px solid rgba(232,196,124,.25);margin-bottom:16px}
#jTabs button{flex:1;background:transparent;border:none;color:var(--paper);font-family:'Outfit';font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:9px 2px;cursor:pointer;opacity:.5;transition:all .2s;white-space:nowrap}
#jTabs button.sel{background:rgba(232,196,124,.14);color:var(--gold);opacity:1}
#journalBody{overflow-y:auto;max-height:52vh;padding-right:8px}
#journalBody::-webkit-scrollbar{width:6px}
#journalBody::-webkit-scrollbar-thumb{background:rgba(232,196,124,.25)}
.jstat{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.6;margin-bottom:14px}
.jstat b{color:var(--gold)}
.jrow{display:flex;gap:14px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid rgba(232,196,124,.08)}
.jrow.dim{opacity:.32}
.jicon{color:var(--gold);font-size:15px;width:20px;text-align:center;padding-top:2px}
.javatar{width:14px;height:14px;border-radius:50%;margin-top:3px;box-shadow:0 0 8px currentColor;flex-shrink:0}
.jrow .jt{font-size:13.5px;letter-spacing:.1em;color:var(--paper)}
.jrow .jb{font-size:12px;font-weight:300;opacity:.7;line-height:1.55;margin-top:3px}

/* ---------- death screen ---------- */
#deathScr{background:radial-gradient(ellipse at 50% 40%,rgba(40,8,18,.96) 0%,rgba(5,4,8,.99) 75%);z-index:45}
.deathwrap{text-align:center;max-width:60ch;padding:0 24px}
.dtitle{font-family:'Cormorant Garamond',serif;font-size:clamp(38px,6vw,68px);letter-spacing:.4em;text-indent:.4em;color:#e87070;text-shadow:0 0 40px rgba(220,60,60,.4);font-weight:600}
.drule{width:140px;height:1px;background:linear-gradient(90deg,transparent,#e87070,transparent);margin:18px auto 26px}
.dq{font-family:'Cormorant Garamond',serif;font-size:clamp(16px,2.2vw,22px);font-weight:500;line-height:1.9;opacity:.9;margin-bottom:18px}
.dc{font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.55;margin-bottom:8px}
.dcount{font-size:11px;letter-spacing:.14em;opacity:.4;margin-bottom:36px}
#cooldownRing{position:absolute;top:52px;left:26px;width:22px;height:22px;opacity:.85}
#areaTitle{position:absolute;top:26%;left:0;right:0;text-align:center;pointer-events:none;opacity:0;transition:opacity 1.2s}
#areaTitle h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(30px,4.6vw,54px);letter-spacing:.24em;text-transform:uppercase;color:var(--paper);text-shadow:0 2px 26px rgba(0,0,0,.7)}
#areaTitle .rule{width:120px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:10px auto 0}
#toast{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);background:rgba(8,10,18,.9);border:2px solid var(--plate-line);box-shadow:var(--hard),inset 0 0 0 1px rgba(255,255,255,.07);padding:13px 24px;font-size:13.5px;letter-spacing:.04em;max-width:56ch;text-align:center;opacity:0;transition:opacity .4s;pointer-events:none}
#toast .tt{color:var(--gold);letter-spacing:.3em;font-size:10.5px;text-transform:uppercase;display:block;margin-bottom:5px}
#dialog{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);width:min(680px,88vw);background:rgba(8,10,18,.94);border:2px solid var(--plate-line);padding:20px 26px 16px;display:none;box-shadow:var(--hard),inset 0 0 0 1px rgba(255,255,255,.07)}
#dialog.on{display:block}
#dialog .who{font-family:'Cormorant Garamond',serif;font-size:19px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
#dialog .who.b{color:var(--cyan)}
#dialog .line{font-size:15.5px;line-height:1.55;font-weight:300;min-height:44px}
#dialog .adv{text-align:right;font-size:10.5px;letter-spacing:.25em;opacity:.45;margin-top:8px;text-transform:uppercase}

/* ---------- Menus ---------- */
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at 50% 30%,#141a30 0%,#07080f 70%);z-index:20}
.screen.on{display:flex}
.screen::before{content:"";position:absolute;inset:0;background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence baseFrequency="0.9" numOctaves="2"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.04 0"/></filter><rect width="120" height="120" filter="url(%23n)"/></svg>');pointer-events:none;opacity:.5}
h1.logo{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(54px,9vw,110px);letter-spacing:.3em;text-indent:.3em;color:var(--paper);text-shadow:0 0 60px rgba(232,196,124,.25);position:relative}
h1.logo .a{color:var(--gold)}h1.logo .b{color:var(--cyan)}
.sub{font-size:clamp(12px,1.6vw,16px);letter-spacing:.62em;text-indent:.62em;text-transform:uppercase;color:var(--gold-dim);margin:6px 0 52px;position:relative}
.menu{display:flex;flex-direction:column;gap:12px;position:relative;min-width:270px}
.mbtn{pointer-events:auto;background:transparent;border:1px solid rgba(232,196,124,.28);color:var(--paper);font-family:'Outfit';font-size:14px;letter-spacing:.4em;text-indent:.4em;text-transform:uppercase;padding:13px 0 12px;cursor:pointer;transition:all .22s;position:relative}
.mbtn:hover:not(:disabled){border-color:var(--gold);background:rgba(232,196,124,.08);letter-spacing:.5em;text-indent:.5em;color:var(--gold)}
.mbtn:disabled{opacity:.28;cursor:default}
.mbtn.danger{border-color:rgba(220,90,90,.3)}
.mbtn.danger:hover{border-color:#d66;background:rgba(220,90,90,.08);color:#e88}
.keys{margin-top:48px;font-size:11px;letter-spacing:.18em;opacity:.4;text-align:center;line-height:2;position:relative}
.keys b{color:var(--gold);font-weight:500}
.panel{background:rgba(10,12,22,.94);border:1px solid rgba(232,196,124,.3);padding:38px 44px;min-width:min(430px,90vw);position:relative}
.panel h3{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.3em;text-transform:uppercase;font-size:22px;color:var(--gold);margin-bottom:26px;text-align:center}
.srow{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:15px 0;font-size:13px;letter-spacing:.12em;text-transform:uppercase}
.srow label{opacity:.8}
.srow input[type=range]{width:150px;accent-color:var(--gold);cursor:pointer}
.seg{display:flex;gap:0;border:1px solid rgba(232,196,124,.3)}
.seg button{background:transparent;border:none;color:var(--paper);font-family:'Outfit';font-size:11px;letter-spacing:.12em;padding:7px 12px;cursor:pointer;opacity:.55}
.seg button.sel{background:rgba(232,196,124,.16);color:var(--gold);opacity:1}
.tgl{width:44px;height:22px;border:1px solid rgba(232,196,124,.4);background:transparent;cursor:pointer;position:relative}
.tgl::after{content:"";position:absolute;top:3px;left:4px;width:14px;height:14px;background:rgba(232,196,124,.3);transition:all .2s}
.tgl.on::after{left:24px;background:var(--gold);box-shadow:0 0 10px rgba(232,196,124,.6)}
.backrow{margin-top:30px;text-align:center}
.cred{font-size:14px;font-weight:300;line-height:2.1;text-align:center;letter-spacing:.08em;opacity:.85}
.cred em{color:var(--gold);font-style:normal;letter-spacing:.25em;font-size:11px;text-transform:uppercase;display:block;margin-top:18px;opacity:.7}
#choice .opt{display:block;width:100%;text-align:left;background:transparent;border:none;border-left:1px solid rgba(232,196,124,.25);color:var(--paper);font-family:'Outfit';padding:14px 20px;margin:8px 0;cursor:pointer;transition:all .2s}
#choice .opt:hover:not(:disabled){border-left-color:var(--gold);background:rgba(232,196,124,.06);padding-left:28px}
#choice .opt:disabled{opacity:.3;cursor:default}
#choice .opt .ot{font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
#choice .opt:hover:not(:disabled) .ot.b{color:var(--cyan)}
#choice .opt .od{font-size:12px;font-weight:300;opacity:.65;margin-top:4px;letter-spacing:.03em}
#ending{background:#05060c;text-align:center;z-index:40}
#ending .et{font-family:'Cormorant Garamond',serif;font-size:clamp(34px,5vw,58px);letter-spacing:.34em;text-indent:.34em;color:var(--gold);margin-bottom:28px}
#ending .eb{max-width:62ch;font-size:15.5px;font-weight:300;line-height:1.9;opacity:.88;margin-bottom:46px;padding:0 24px}
#ending.b2 .et{color:var(--cyan)}
#intro{position:absolute;inset:0;background:#05060c;z-index:30;display:none;align-items:center;justify-content:center;flex-direction:column;text-align:center}
#intro.on{display:flex}
#intro p{font-family:'Cormorant Garamond',serif;font-size:clamp(17px,2.4vw,25px);font-weight:500;letter-spacing:.1em;opacity:0;line-height:2;max-width:60ch;padding:0 24px;transition:opacity 1.6s}
#intro p.show{opacity:.92}
#intro .skip{position:absolute;bottom:40px;font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.35}
#fade{position:absolute;inset:0;background:#000;pointer-events:none;opacity:0;transition:opacity .45s;z-index:15}

/* ---------- Cutscenes: world stays visible, a narration band rises over it ---------- */
#cutscene{position:absolute;inset:0;z-index:25;display:none;align-items:flex-end;justify-content:center;cursor:pointer}
#cutscene.on{display:flex}
#cutscene .csbox{width:100%;background:linear-gradient(to top,rgba(5,6,12,.92) 0%,rgba(5,6,12,.72) 55%,transparent 100%);padding:70px 24px 50px;text-align:center}
#cutscene p{font-family:'Cormorant Garamond',serif;font-size:clamp(17px,2.3vw,25px);font-weight:500;letter-spacing:.08em;line-height:1.9;max-width:60ch;margin:0 auto;opacity:0;transition:opacity 1.1s}
#cutscene p.show{opacity:.95}
#cutscene .skip{position:absolute;bottom:16px;right:22px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;opacity:.35}

/* ---------- narrow windows (phone-ish aspect) ----------
   Placed LAST so these overrides win the cascade against the equal-specificity
   base rules above — the plates stack vertically instead of overlapping. */
@media (max-width:860px){
  #worldBadge{max-width:52vw}
  #worldBadge .label{font-size:8px;letter-spacing:.14em}
  #worldBadge .qhint{display:none}
  #cooldownRing{top:64px;left:26px}
  #echoCount{top:92px;left:22px;right:auto;font-size:9px}
  #weaponSlot{top:18px;right:24px;font-size:7px;max-width:44vw}
  #weaponSlot .whint{display:none}
  #weaponDesc{display:none}
  #objective{top:auto;bottom:110px;max-width:72vw;font-size:9px;letter-spacing:.12em;opacity:.88}
  #hearts{top:64px;right:24px;padding:5px 7px}
  #btnJournal{bottom:16px;left:16px}
  #toast{bottom:96px;max-width:82vw;font-size:8px}
}