:root{
  --gold:#d8b44a;
  --gold-bright:#f4d878;
  --parch:#e8dcc0;
  --wood:#2a1c10;
  --wood-deep:#160d06;
  --blood:#8a1f14;
  --ink:#0c0a07;
  --serif:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --disp:"Trajan Pro","Cinzel",Georgia,"Times New Roman",serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;height:100%;overflow:hidden;background:#000;color:var(--parch);
  font-family:var(--serif);-webkit-font-smoothing:antialiased;user-select:none;cursor:default;}
#app{position:fixed;inset:0;}
#game-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hidden{display:none !important;}

/* keyboard-vs-touch control hints: swap based on the body.touch flag set at boot */
.only-touch{display:none;}
body.touch .only-kbd{display:none;}
body.touch .only-touch{display:inline;}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;z-index:40;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px;}
/* Auto block-margins centre the panel when it fits, but collapse to 0 the moment it's
   taller than the viewport — as on short landscape phones — so the whole thing scrolls
   instead of overflowing off-screen with its top/bottom clipped and unreachable.
   flex-shrink:0 stops flex from squashing the panel below its content height. */
.screen>*{flex:0 0 auto;margin-top:auto;margin-bottom:auto;max-width:100%;}
#menu,#pause,#gameover,#quit,#help,#loading{
  background:
    radial-gradient(ellipse at 50% 30%, rgba(60,40,18,.35), rgba(0,0,0,.0) 60%),
    linear-gradient(rgba(6,4,2,.62),rgba(4,3,1,.86));
}
#menu{background:linear-gradient(rgba(8,5,2,.35),rgba(3,2,1,.72));}

.menu-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:26px;
  animation:rise .8s cubic-bezier(.2,.7,.2,1);}
@keyframes rise{from{opacity:0;transform:translateY(24px);}to{opacity:1;transform:none;}}

/* ---------- logo ---------- */
.logo{margin-bottom:6px;}
.logo-heb{font-size:26px;color:var(--gold);letter-spacing:6px;opacity:.85;margin-bottom:2px;
  text-shadow:0 2px 10px rgba(0,0,0,.8);}
.logo h1{font-family:var(--disp);font-size:clamp(46px,9vw,104px);letter-spacing:.14em;line-height:.95;
  color:var(--parch);
  background:linear-gradient(180deg,#fff4d6 0%,var(--gold-bright) 42%,#a8802a 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 4px 30px rgba(216,180,74,.25);filter:drop-shadow(0 3px 2px rgba(0,0,0,.6));}
.tagline{margin-top:10px;font-style:italic;color:#cbb98f;font-size:clamp(14px,2vw,20px);opacity:.9;}

/* ---------- buttons ---------- */
.menu-buttons{display:flex;flex-direction:column;gap:13px;min-width:300px;}
.btn{font-family:var(--serif);font-size:19px;letter-spacing:.04em;color:#f6ecd2;cursor:pointer;
  padding:13px 30px;border:1px solid rgba(216,180,74,.42);border-radius:3px;
  background:linear-gradient(180deg,rgba(58,40,18,.72),rgba(26,17,8,.82));
  box-shadow:0 2px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,235,180,.12);
  transition:transform .12s ease,border-color .12s ease,background .12s ease,box-shadow .12s;}
.btn:hover{transform:translateY(-2px);border-color:var(--gold);
  background:linear-gradient(180deg,rgba(86,60,26,.85),rgba(40,26,12,.9));
  box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 24px rgba(216,180,74,.18),inset 0 1px 0 rgba(255,235,180,.2);}
.btn:active{transform:translateY(0);}
.btn.ghost{border-color:rgba(180,150,110,.25);color:#b7a884;background:rgba(20,14,7,.55);}
.btn.ghost:hover{color:#e8dcc0;border-color:rgba(216,180,74,.5);}

.menu-foot{margin-top:6px;font-size:12px;color:#8a7a58;letter-spacing:.05em;opacity:.8;}

/* ---------- headings ---------- */
h2{font-family:var(--disp);font-size:34px;letter-spacing:.1em;color:var(--gold-bright);margin-bottom:8px;}
.pause-title{margin-bottom:22px;}

/* ---------- help ---------- */
.panel{max-width:640px;background:linear-gradient(180deg,rgba(30,20,10,.9),rgba(16,10,5,.95));
  border:1px solid rgba(216,180,74,.35);border-radius:6px;padding:34px 40px;
  box-shadow:0 20px 60px rgba(0,0,0,.7);animation:rise .5s ease;}
.help-grid{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;margin:20px 0;align-items:center;text-align:left;}
.help-grid>div:nth-child(even){color:#cdbf9c;font-size:16px;}
kbd{font-family:var(--serif);background:rgba(216,180,74,.14);border:1px solid rgba(216,180,74,.4);
  border-radius:4px;padding:5px 11px;color:var(--gold-bright);font-size:15px;white-space:nowrap;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.3);}
.help-note{text-align:left;color:#b6a884;font-size:15px;line-height:1.6;margin-bottom:22px;font-style:italic;}
.help-note b{color:var(--gold-bright);font-style:normal;}

/* ---------- start gate ---------- */
#start{z-index:50;cursor:pointer;background:radial-gradient(ellipse at 50% 38%,rgba(60,40,18,.4),rgba(0,0,0,0) 62%),linear-gradient(rgba(6,4,2,.6),rgba(3,2,1,.86));}
.start-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:20px;cursor:pointer;
  animation:rise .8s cubic-bezier(.2,.7,.2,1);padding:40px;}
.start-prompt{margin-top:14px;font-family:var(--disp);font-size:clamp(20px,3vw,30px);letter-spacing:.14em;
  color:var(--gold-bright);text-shadow:0 3px 18px rgba(0,0,0,.8);animation:pulse 2s ease-in-out infinite;}
.start-sub{font-size:14px;color:#93835f;letter-spacing:.08em;font-style:italic;}

/* ---------- sound settings ---------- */
.sound-panel{max-width:520px;width:min(100%,520px);}
.sound-grid{display:grid;grid-template-columns:auto 1fr auto;gap:22px 20px;align-items:center;margin:24px 0;}
.sound-grid label{text-align:right;font-size:17px;color:#e6d9bb;letter-spacing:.04em;}
.vol-val{min-width:52px;text-align:right;font-size:16px;color:var(--gold-bright);font-variant-numeric:tabular-nums;}
input.vol{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:4px;cursor:pointer;
  background:linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--fill,100%),rgba(216,180,74,.16) var(--fill,100%));
  border:1px solid rgba(216,180,74,.4);box-shadow:inset 0 1px 3px rgba(0,0,0,.5);outline:none;}
input.vol::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff4d6,var(--gold-bright) 55%,#a8802a);
  border:1px solid #5c440f;box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 12px rgba(216,180,74,.4);cursor:pointer;}
input.vol::-moz-range-thumb{width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff4d6,var(--gold-bright) 55%,#a8802a);
  border:1px solid #5c440f;box-shadow:0 2px 8px rgba(0,0,0,.6),0 0 12px rgba(216,180,74,.4);cursor:pointer;}
input.vol:focus-visible{border-color:var(--gold-bright);box-shadow:inset 0 1px 3px rgba(0,0,0,.5),0 0 0 2px rgba(216,180,74,.35);}

/* ---------- game over ---------- */
.go-heb{font-size:28px;color:var(--blood);letter-spacing:6px;opacity:.85;filter:drop-shadow(0 2px 6px #000);}
.go-title{font-family:var(--disp);font-size:clamp(40px,8vw,80px);letter-spacing:.12em;
  color:#c9432f;text-shadow:0 3px 24px rgba(138,31,20,.5);margin:6px 0 4px;}
.go-sub{font-style:italic;color:#c6b590;font-size:18px;margin-bottom:22px;}
#go-stats{display:grid;grid-template-columns:auto auto;gap:8px 34px;margin:8px 0 26px;
  font-size:19px;color:#e6d9bb;}
#go-stats .k{color:#9c8c66;text-align:right;letter-spacing:.03em;}
#go-stats .v{color:var(--gold-bright);text-align:left;font-variant-numeric:tabular-nums;}

/* ---------- quit ---------- */
.quit-heb{font-size:40px;color:var(--gold);letter-spacing:10px;margin-bottom:18px;}
.quit-msg{font-size:22px;color:#cabb92;line-height:1.7;font-style:italic;}

/* ---------- loading ---------- */
#loading{z-index:70;} /* above the fade layer so it shows during boot */
.load-inner{text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px;}
.load-heb{font-size:34px;color:var(--gold);letter-spacing:8px;animation:pulse 2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:.5;}50%{opacity:1;}}
.load-bar{width:260px;height:5px;background:rgba(216,180,74,.15);border-radius:3px;overflow:hidden;}
.load-fill{height:100%;width:30%;background:linear-gradient(90deg,var(--gold),var(--gold-bright));
  border-radius:3px;transition:width .3s ease;}
.load-txt{font-size:14px;color:#93835f;letter-spacing:.06em;font-style:italic;}

/* ---------- cinema ---------- */
#cinema{position:absolute;inset:0;z-index:35;pointer-events:none;}
#cinema .bar{position:absolute;left:0;right:0;height:14vh;background:#000;transition:height .8s cubic-bezier(.6,0,.2,1);}
#cinema.closed .bar{height:0;}
.bar-top{top:0;}.bar-bottom{bottom:0;}
#subtitle{position:absolute;left:0;right:0;bottom:16vh;text-align:center;padding:0 12%;
  font-size:clamp(19px,2.6vw,30px);line-height:1.5;color:#f3e8cc;
  text-shadow:0 2px 14px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,1);letter-spacing:.02em;}
#subtitle b{color:var(--gold-bright);}
#subtitle .em{color:#d9705a;font-style:italic;}
#cinema-skip{position:absolute;bottom:2vh;right:3vw;font-size:13px;color:rgba(230,215,180,.4);letter-spacing:.05em;}

/* ---------- fade ---------- */
#fade{position:absolute;inset:0;background:#000;z-index:60;pointer-events:none;opacity:1;
  transition:opacity .6s ease;}
#fade.clear{opacity:0;}

/* ---------- Barer finisher ---------- */
#finisher-prompt{position:absolute;left:0;right:0;bottom:19vh;z-index:50;display:flex;justify-content:center;
  gap:min(6vw,90px);pointer-events:none;}
#finisher-prompt.hidden{display:none;}
.fin-opt{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 24px;border-radius:9px;
  background:rgba(10,5,3,.58);border:1px solid rgba(216,180,74,.4);box-shadow:0 6px 22px rgba(0,0,0,.6);}
.fin-left{border-color:rgba(240,216,120,.55);}
.fin-right{border-color:rgba(214,58,36,.65);}
.fin-key{font-family:var(--disp,serif);font-size:14px;letter-spacing:.16em;color:#f4d878;}
.fin-right .fin-key{color:#ff8a5a;}
.fin-lbl{font-size:clamp(15px,2vw,23px);color:#f3e8cc;text-shadow:0 2px 10px #000;}
.fin-right .fin-lbl{font-style:italic;color:#ffd0b0;}

#lewie-banner{position:absolute;left:0;right:0;top:24vh;z-index:55;text-align:center;pointer-events:none;
  font-family:var(--disp,serif);font-weight:900;font-size:clamp(42px,9vw,124px);letter-spacing:.03em;line-height:1;
  color:#ffe27a;text-shadow:0 0 26px rgba(255,120,40,.85),0 4px 18px #000,0 0 3px #000;
  -webkit-text-stroke:2px #7a1408;}
#lewie-banner.hidden{display:none;}
#lewie-banner.pop{animation:lewiePop .55s cubic-bezier(.2,1.4,.3,1) both;}
@keyframes lewiePop{0%{transform:scale(.2) rotate(-8deg);opacity:0;}
  60%{transform:scale(1.16) rotate(2deg);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}}

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

#crosshair{position:absolute;left:50%;top:50%;width:26px;height:26px;transform:translate(-50%,-50%);
  transition:transform .08s ease,opacity .2s;}
#crosshair span{position:absolute;background:rgba(244,216,120,.82);box-shadow:0 0 3px rgba(0,0,0,.8);}
#crosshair span:nth-child(1){left:50%;top:0;width:2px;height:8px;transform:translateX(-50%);}
#crosshair span:nth-child(2){left:50%;bottom:0;width:2px;height:8px;transform:translateX(-50%);}
#crosshair span:nth-child(3){top:50%;left:0;height:2px;width:8px;transform:translateY(-50%);}
#crosshair span:nth-child(4){top:50%;right:0;height:2px;width:8px;transform:translateY(-50%);}
#crosshair.hit{transform:translate(-50%,-50%) scale(1.5);}

#hitmarker{position:absolute;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%) rotate(45deg);
  opacity:0;}
#hitmarker::before,#hitmarker::after{content:"";position:absolute;background:#fff;box-shadow:0 0 6px #000;}
#hitmarker::before{left:50%;top:0;bottom:0;width:3px;transform:translateX(-50%);}
#hitmarker::after{top:50%;left:0;right:0;height:3px;transform:translateY(-50%);}
#hitmarker.show{animation:hm .28s ease-out;}
@keyframes hm{0%{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(.4);}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(1.3);}}

#dmg-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 180px 40px rgba(150,20,12,.85);transition:opacity .5s ease;}

/* wall-hug "cornered" telegraph: a dark claustrophobic vignette that closes in as
   the meter builds, plus a pulsing warning that appears during the grace window */
#corner-vignette{position:absolute;inset:0;pointer-events:none;opacity:0;
  box-shadow:inset 0 0 220px 70px rgba(28,7,5,.92);transition:opacity .16s linear;}
#corner-warn{position:absolute;left:50%;top:62%;transform:translateX(-50%);
  font-family:var(--disp,serif);letter-spacing:.22em;font-size:20px;white-space:nowrap;
  color:#ff6a44;text-shadow:0 2px 12px #000,0 0 22px rgba(255,70,30,.55);
  opacity:0;pointer-events:none;}

#hud-topleft{position:absolute;left:26px;top:22px;}
#health-label{font-size:12px;letter-spacing:.22em;color:#c9b98e;margin-bottom:5px;opacity:.85;}
#health-bar{position:relative;width:300px;height:19px;background:rgba(10,6,3,.7);
  border:1px solid rgba(216,180,74,.5);border-radius:3px;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.5),inset 0 0 12px rgba(0,0,0,.6);}
#health-ghost{position:absolute;inset:0;width:100%;transform-origin:left;
  background:rgba(200,60,40,.5);transition:transform .5s ease .15s;}
#health-fill{position:absolute;inset:0;width:100%;transform-origin:left;z-index:2;
  background:linear-gradient(180deg,#e04a2e,#9a1c10);
  box-shadow:inset 0 1px 0 rgba(255,180,150,.4);transition:transform .18s ease;}

#hud-topright{position:absolute;right:26px;top:22px;text-align:right;}
#score-line{font-size:28px;color:var(--gold-bright);font-variant-numeric:tabular-nums;
  text-shadow:0 2px 8px rgba(0,0,0,.8);}
#depth-line{font-size:16px;color:#c6b590;margin-top:2px;}
.lbl{font-size:12px;letter-spacing:.2em;color:#9c8c66;}
#score-val{font-weight:bold;}

#combo{position:absolute;right:30px;top:96px;text-align:right;transform-origin:right center;}
#combo-num{font-family:var(--disp);font-size:52px;color:#fff2cf;
  text-shadow:0 0 18px rgba(244,216,120,.6),0 3px 6px rgba(0,0,0,.7);}
#combo-x{font-size:26px;color:var(--gold);}
#combo-word{font-size:14px;letter-spacing:.24em;color:#e0a04a;margin-top:-4px;}
#combo.bump{animation:bump .18s ease;}
@keyframes bump{0%{transform:scale(1.35);}100%{transform:scale(1);}}

#objective{position:absolute;left:50%;top:12%;transform:translateX(-50%);text-align:center;
  font-size:clamp(20px,3vw,32px);color:#f2e6c6;font-style:italic;letter-spacing:.04em;
  text-shadow:0 2px 16px rgba(0,0,0,.9);opacity:0;transition:opacity .5s ease;max-width:80%;}
#objective.show{opacity:1;}
#objective.warn{color:#e8b24a;}
#objective.danger{color:#e05a3c;}

#toast{position:absolute;left:50%;bottom:12%;transform:translateX(-50%);text-align:center;
  font-size:19px;color:var(--gold-bright);text-shadow:0 2px 10px #000;opacity:0;
  transition:opacity .3s ease;pointer-events:none;}
#toast.show{opacity:1;}

/* floating damage / kill text spawned dynamically */
.floaty{position:absolute;pointer-events:none;font-family:var(--disp);z-index:22;
  text-shadow:0 2px 8px rgba(0,0,0,.9);will-change:transform,opacity;}

/* ---------- touch controls ---------- */
#touch{position:absolute;inset:0;z-index:30;pointer-events:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.tc-move,.tc-look,.tc-btn{pointer-events:auto;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
.tc-move{position:absolute;left:0;top:0;bottom:0;width:44%;}
.tc-look{position:absolute;right:0;top:0;bottom:0;width:56%;}

/* dynamic joystick: the base is placed under the thumb, the knob rides it */
.tc-stick{position:fixed;width:calc(62px * 2);height:calc(62px * 2);border-radius:50%;
  transform:translate(-50%,-50%);pointer-events:none;transition:opacity .15s ease;
  background:radial-gradient(circle at 50% 50%,rgba(216,180,74,.10),rgba(10,6,3,.32));
  border:1.5px solid rgba(216,180,74,.4);box-shadow:0 2px 14px rgba(0,0,0,.5),inset 0 0 24px rgba(0,0,0,.4);}
.tc-knob{position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 38% 32%,#fff4d6,var(--gold-bright) 52%,#8a6420);
  border:1px solid #5c440f;box-shadow:0 3px 12px rgba(0,0,0,.6),0 0 18px rgba(216,180,74,.35);}

/* round action buttons */
.tc-btn{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;
  border-radius:50%;font-family:var(--serif);letter-spacing:.06em;color:#f6ecd2;line-height:1;
  border:1.5px solid rgba(216,180,74,.5);
  background:radial-gradient(circle at 42% 32%,rgba(86,60,26,.78),rgba(24,15,7,.72));
  box-shadow:0 3px 14px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,235,180,.18);
  text-shadow:0 1px 4px rgba(0,0,0,.8);transition:transform .08s ease,background .08s ease,box-shadow .08s ease;}
.tc-btn.down{transform:scale(.92);background:radial-gradient(circle at 42% 32%,rgba(140,100,40,.95),rgba(50,32,14,.9));
  box-shadow:0 0 22px rgba(216,180,74,.4),inset 0 1px 0 rgba(255,235,180,.25);}
.tc-jab{right:24px;bottom:24px;width:96px;height:96px;font-size:18px;color:var(--gold-bright);
  border-color:rgba(216,180,74,.75);}
.tc-heavy{right:124px;bottom:62px;width:78px;height:78px;font-size:12px;}
.tc-shove{right:42px;bottom:128px;width:78px;height:78px;font-size:13px;}
.tc-jump{right:134px;bottom:162px;width:74px;height:74px;font-size:14px;}
.tc-pause{top:16px;right:18px;width:46px;height:46px;font-size:16px;font-weight:bold;
  background:radial-gradient(circle at 42% 32%,rgba(60,42,20,.7),rgba(18,11,5,.66));}

/* ---------- rotate-device gate (touch, portrait) ---------- */
#rotate{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:26px;text-align:center;padding:32px;
  background:radial-gradient(ellipse at 50% 40%,rgba(60,40,18,.4),rgba(0,0,0,0) 62%),linear-gradient(rgba(6,4,2,.94),rgba(3,2,1,.98));}
#rotate.show{display:flex;}
.rotate-phone{width:56px;height:92px;border:3px solid var(--gold);border-radius:10px;
  box-shadow:0 0 26px rgba(216,180,74,.35);animation:rotatehint 2.2s ease-in-out infinite;}
@keyframes rotatehint{0%,28%{transform:rotate(0);}62%,100%{transform:rotate(-90deg);}}
.rotate-title{font-family:var(--disp);font-size:clamp(22px,6vw,34px);letter-spacing:.1em;color:var(--gold-bright);
  text-shadow:0 3px 18px #000;}
.rotate-sub{font-size:16px;color:#c6b590;font-style:italic;max-width:340px;line-height:1.5;}

/* ---------- short viewports (landscape phones) ---------- */
/* Tighten the menu/panel chrome so there's far less to scroll through when the
   viewport is only a few hundred px tall; anything left over still scrolls (.screen). */
@media (max-height:520px){
  .screen{padding:12px;}
  .menu-inner{gap:14px;}
  .logo{margin-bottom:0;}
  .logo-heb{font-size:20px;letter-spacing:4px;}
  .logo h1{font-size:clamp(34px,7vw,60px);}
  .tagline{margin-top:4px;font-size:14px;}
  .menu-buttons{gap:9px;min-width:min(300px,80vw);}
  .btn{padding:10px 24px;font-size:17px;}
  h2{font-size:26px;margin-bottom:4px;}
  .pause-title{margin-bottom:12px;}
  .panel{padding:20px 26px;}
  .help-grid{margin:12px 0;gap:8px 18px;}
  .help-grid>div:nth-child(even){font-size:14px;}
  kbd{padding:4px 9px;font-size:13px;}
  .help-note{font-size:13px;line-height:1.45;margin-bottom:14px;}
  .sound-grid{margin:14px 0;gap:14px 16px;}
  .go-heb{font-size:22px;}
  #go-stats{margin:6px 0 16px;gap:5px 28px;font-size:17px;}
  .go-sub{font-size:16px;margin-bottom:14px;}
}