*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#06131f;display:grid;place-items:center;overflow:hidden;font-family:Arial,sans-serif}#shell{position:relative;width:min(98vw,960px);max-height:96vh;aspect-ratio:16/9}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;border:0;background:#49b9ea}#loading{position:absolute;left:50%;transform:translateX(-50%);background:#071a2b;color:#fff;border:2px solid #24506d;padding:8px 12px;border-radius:8px;font-weight:800;z-index:3}#loading{top:45%;font-size:24px}html,body{width:100%;height:100%;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none}
body{padding:0}
#wrap{width:min(98vw,960px);max-width:100vw;max-height:96vh;aspect-ratio:16/9;position:relative}
canvas{width:100%;height:100%;object-fit:contain;touch-action:none}
#touch-controls{display:none;position:absolute;inset:0;pointer-events:none;z-index:20}
.touch-left,.touch-right{position:absolute;bottom:max(14px,env(safe-area-inset-bottom));display:flex;gap:12px;pointer-events:auto}
.touch-left{left:max(16px,env(safe-area-inset-left))}
.touch-right{right:max(16px,env(safe-area-inset-right));align-items:flex-end}
.touch-btn{width:74px;height:74px;border:2px solid rgba(255,255,255,.28);border-radius:50%;background:rgba(5,24,42,.58);color:#fff;font:900 26px Arial,sans-serif;box-shadow:0 5px 14px rgba(0,0,0,.28);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);-webkit-tap-highlight-color:transparent;touch-action:none}
.touch-btn.small{width:62px;height:62px;font-size:14px}
.touch-btn.jump{width:84px;height:84px;font-size:15px;background:rgba(170,84,20,.64)}
.touch-btn.active,.touch-btn:active{transform:scale(.94);background:rgba(255,198,64,.66)}
@media (hover:none) and (pointer:coarse){
  #touch-controls{display:block}
  #help{display:none!important}
}
@media (orientation:portrait) and (hover:none) and (pointer:coarse){
  #wrap{width:100vw;height:auto}
  .touch-btn{width:64px;height:64px;font-size:22px}
  .touch-btn.small{width:56px;height:56px}
  .touch-btn.jump{width:74px;height:74px}
}
@media (max-height:520px) and (hover:none) and (pointer:coarse){
  #wrap{width:min(100vw,960px);height:100vh;aspect-ratio:auto}
  canvas{width:100%;height:100%;object-fit:contain}
  .touch-left,.touch-right{bottom:max(8px,env(safe-area-inset-bottom))}
  .touch-btn{width:58px;height:58px;font-size:20px}
  .touch-btn.small{width:50px;height:50px;font-size:12px}
  .touch-btn.jump{width:66px;height:66px;font-size:13px}
}

/* ===== V30 explicit mobile mode ===== */
.mobile-device,
.mobile-device body{
  margin:0!important;
  width:100%!important;
  height:100%!important;
  min-height:100%!important;
  overflow:hidden!important;
  background:#04111d!important;
  touch-action:none!important;
  overscroll-behavior:none!important;
}

.mobile-device body{
  position:fixed!important;
  inset:0!important;
  display:block!important;
}

.mobile-device #wrap{
  position:fixed!important;
  inset:0!important;
  width:100vw!important;
  height:100dvh!important;
  max-width:none!important;
  aspect-ratio:auto!important;
  border:0!important;
  box-shadow:none!important;
  background:#04111d!important;
  overflow:hidden!important;
}

.mobile-device canvas{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:100vw!important;
  height:auto!important;
  max-height:100dvh!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  touch-action:none!important;
}

.mobile-device #touch-controls{
  display:block!important;
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  z-index:50!important;
}

.mobile-device .touch-left,
.mobile-device .touch-right{
  position:fixed!important;
  bottom:max(18px,env(safe-area-inset-bottom))!important;
  pointer-events:auto!important;
  z-index:51!important;
}

.mobile-device .touch-left{
  left:max(18px,env(safe-area-inset-left))!important;
}

.mobile-device .touch-right{
  right:max(18px,env(safe-area-inset-right))!important;
}

.mobile-device .touch-btn{
  width:68px!important;
  height:68px!important;
  opacity:.86!important;
}

.mobile-device .touch-btn.small{
  width:58px!important;
  height:58px!important;
}

.mobile-device .touch-btn.jump{
  width:78px!important;
  height:78px!important;
}

.mobile-device #help{
  display:none!important;
}

#rotate-overlay{
  display:none;
}

.mobile-device #rotate-overlay{
  position:fixed;
  inset:0;
  z-index:100;
  align-items:center;
  justify-content:center;
  background:rgba(2,10,18,.94);
}

.mobile-device #rotate-overlay .rotate-card{
  width:min(82vw,340px);
  padding:26px 22px;
  border-radius:20px;
  background:#0a2338;
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  text-align:center;
  font-family:Arial,sans-serif;
  box-shadow:0 16px 45px rgba(0,0,0,.38);
}

.mobile-device #rotate-overlay .rotate-icon{
  font-size:46px;
  margin-bottom:8px;
}

.mobile-device #rotate-overlay strong{
  display:block;
  font-size:22px;
  margin-bottom:8px;
}

.mobile-device #rotate-overlay span{
  display:block;
  font-size:14px;
  opacity:.8;
}

@media (orientation:portrait){
  .mobile-device #rotate-overlay{
    display:flex!important;
  }
  .mobile-device #touch-controls{
    display:none!important;
  }
}

@media (orientation:landscape){
  .mobile-device #rotate-overlay{
    display:none!important;
  }
}


/* ===== V87 retro TV presentation ===== */
#tv{
  position:relative;
  width:min(96vw,1040px);
  padding:38px 38px 54px;
  border-radius:34px;
  background:linear-gradient(145deg,#34383d 0%,#171a1e 48%,#292d32 100%);
  border:5px solid #090b0d;
  box-shadow:
    0 24px 55px rgba(0,0,0,.52),
    inset 0 2px 0 rgba(255,255,255,.13),
    inset 0 -7px 0 rgba(0,0,0,.28);
}
#tv::before{
  content:"";
  position:absolute;
  inset:12px;
  pointer-events:none;
  border-radius:24px;
  border:2px solid rgba(255,255,255,.055);
}
#tv-brand{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  color:#d6b55a;
  font:900 13px/1 Arial,sans-serif;
  letter-spacing:3px;
  text-shadow:0 1px 0 #000;
  user-select:none;
}
#tv #shell{
  width:100%;
  max-width:960px;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:18px;
  border:7px solid #080a0c;
  background:#020609;
  box-shadow:inset 0 0 22px rgba(0,0,0,.75);
}
#tv canvas{
  width:100%;
  height:100%;
  border:0;
  border-radius:11px;
}
#tv-controls{
  position:absolute;
  height:28px;
  left:42px;
  right:42px;
  bottom:13px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  pointer-events:none;
}
.tv-led{
  width:7px;height:7px;border-radius:50%;
  background:#78d15a;
  box-shadow:0 0 8px rgba(120,209,90,.7);
  margin-right:auto;
}
.tv-slot{
  width:68px;height:5px;border-radius:5px;
  background:#080a0c;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);
}
.tv-btn{
  width:18px;height:18px;border-radius:50%;
  background:linear-gradient(#4d5359,#24282d);
  border:2px solid #0c0e10;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18);
}

/* Keep the game comfortably large on typical desktop displays. */
@media (min-width:1100px) and (min-height:700px){
  #tv{width:min(96vw,1080px)}
}

/* On constrained screens, prioritize gameplay area over decorative cabinet. */
@media (max-width:760px),(max-height:650px){
  #tv{
    width:100vw;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#06131f;
  }
  #tv-brand,#tv-controls,#tv::before{display:none}
  #tv #shell{
    width:100vw;
    max-width:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  #tv canvas{border-radius:0}
}


/* ===== V88 deeper retro CRT cabinet ===== */
#tv{
  width:min(96vw,1060px);
  padding:44px 42px 68px;
  border:6px solid #17120d;
  border-radius:42px 42px 30px 30px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035),transparent 12%,transparent 88%,rgba(0,0,0,.13)),
    linear-gradient(#6a5947,#44382c 55%,#352b22);
  box-shadow:
    0 28px 60px rgba(0,0,0,.55),
    inset 0 3px 0 rgba(255,240,205,.14),
    inset 0 -9px 0 rgba(25,18,12,.42),
    0 0 0 3px #211a14;
}
#tv::before{
  display:block;
  inset:13px;
  border-radius:29px;
  border:2px solid rgba(240,211,165,.10);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.12);
}
#tv::after{
  content:"";
  position:absolute;
  left:64px;
  right:64px;
  bottom:48px;
  height:2px;
  background:rgba(20,15,10,.42);
  box-shadow:0 1px rgba(255,230,190,.07);
  pointer-events:none;
}
#tv-brand{
  top:13px;
  color:#d7b26a;
  font:900 14px/1 "Courier New",monospace;
  letter-spacing:4px;
  text-shadow:0 2px 0 #261b11;
}
#tv #shell{
  position:relative;
  width:100%;
  max-width:960px;
  aspect-ratio:16/9;
  overflow:hidden;
  border:9px solid #171717;
  border-radius:30px / 24px;
  background:#020302;
  box-shadow:
    inset 0 0 26px rgba(0,0,0,.82),
    0 0 0 3px #2a241e,
    0 3px 0 rgba(255,232,195,.08);
}
#tv #shell::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:8;
  pointer-events:none;
  border-radius:20px / 16px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(12,16,12,.075) 3px
    );
  mix-blend-mode:multiply;
}
#tv #shell::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:9;
  pointer-events:none;
  border-radius:20px / 16px;
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.25),
    inset 0 0 5px rgba(255,245,220,.08);
}
#tv canvas{
  width:100%;
  height:100%;
  border:0;
  border-radius:20px / 16px;
}
#tv-controls{
  left:58px;
  right:58px;
  bottom:15px;
  height:30px;
  gap:11px;
  justify-content:flex-end;
}
.tv-led{
  width:7px;height:7px;
  background:#d45b35;
  border:1px solid #28140d;
  box-shadow:0 0 5px rgba(212,91,53,.55);
  margin-right:0;
}
.tv-speaker{
  width:96px;height:17px;
  margin-right:auto;
  opacity:.72;
  background:repeating-linear-gradient(90deg,#17130f 0 3px,transparent 3px 8px);
  border-top:1px solid rgba(255,230,190,.08);
  border-bottom:1px solid rgba(0,0,0,.28);
}
.tv-label{
  color:#c4a774;
  font:700 9px/1 "Courier New",monospace;
  letter-spacing:1.5px;
  margin-right:4px;
  opacity:.82;
}
.tv-dial{
  position:relative;
  width:24px;height:24px;
  border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#6b5d4e 0 18%,#3a3129 45%,#201b17 72%);
  border:2px solid #17120f;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 1px 2px rgba(0,0,0,.5);
}
.tv-dial i{
  position:absolute;
  left:10px;top:3px;
  width:2px;height:7px;
  background:#b99a62;
  border-radius:2px;
}
.tv-foot{
  position:absolute;
  bottom:-14px;
  width:92px;height:20px;
  background:#241c15;
  border:3px solid #120e0a;
  border-radius:4px 4px 12px 12px;
  box-shadow:0 6px 8px rgba(0,0,0,.35);
}
.tv-foot-left{left:95px;transform:skewX(-10deg)}
.tv-foot-right{right:95px;transform:skewX(10deg)}

/* Preserve gameplay-first mobile behavior. */
@media (max-width:760px),(max-height:650px){
  #tv{
    width:100vw;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:#06131f;
  }
  #tv-brand,#tv-controls,#tv::before,#tv::after,.tv-foot{display:none}
  #tv #shell{
    width:100vw;
    max-width:none;
    border:0;
    border-radius:0;
    box-shadow:none;
  }
  #tv #shell::before,#tv #shell::after{display:none}
  #tv canvas{border-radius:0}
}


/* ===== V89 CRT screen flush fix: no blue/cyan border ===== */
#tv #shell{
  padding:0 !important;
  border:9px solid #111 !important;
  outline:0 !important;
  background:#111 !important;
  box-shadow:
    inset 0 0 24px rgba(0,0,0,.72),
    0 0 0 3px #28221c,
    0 3px 0 rgba(255,232,195,.07) !important;
}
#tv #shell canvas,
#game{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:18px / 14px !important;
}

/* The CRT glass effects sit over the picture; no colored frame is drawn. */
#tv #shell::before{
  inset:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:18px / 14px !important;
}
#tv #shell::after{
  inset:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:18px / 14px !important;
  box-shadow:
    inset 0 0 22px rgba(0,0,0,.24),
    inset 0 0 3px rgba(255,245,220,.06) !important;
}

/* Eliminate legacy shell/canvas edge colors regardless of earlier rules. */
#shell{outline:0 !important}
canvas{outline:0 !important}

@media (max-width:760px),(max-height:650px){
  #tv #shell{border:0 !important;box-shadow:none !important}
  #tv #shell canvas,#game{border-radius:0 !important}
}


/* ===== Professional polish pass ===== */
#game{outline:none}
#touch-controls button{
  border:0;
  cursor:pointer;
  font-family:Arial,sans-serif;
}
#touch-controls button:focus-visible{
  outline:3px solid rgba(255,224,106,.95);
  outline-offset:3px;
}
.touch-btn{
  display:grid;
  place-items:center;
  text-shadow:0 2px 3px rgba(0,0,0,.4);
  box-shadow:
    0 6px 18px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -3px 0 rgba(0,0,0,.18);
  transition:transform .07s ease,background .12s ease,opacity .12s ease;
}
.touch-btn.jump{
  letter-spacing:.4px;
}
.mobile-device .touch-btn{
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
}
#tv #shell{
  position:relative;
}
#tv canvas{
  box-shadow:inset 0 0 24px rgba(0,0,0,.16);
}
@media (hover:hover) and (pointer:fine){
  #tv{
    transition:filter .18s ease,transform .18s ease;
  }
  #tv:hover{
    filter:brightness(1.015);
  }
}
@media (prefers-reduced-motion:reduce){
  .touch-btn,#tv{transition:none!important}
}

/* ===== Pixel Riff Studio opening — responsive + sound-first ===== */
#studio-intro{
  position:fixed;
  inset:0;
  z-index:20000;
  display:grid;
  place-items:center;
  width:100dvw;
  height:100dvh;
  min-width:100%;
  min-height:100%;
  overflow:hidden;
  background:#000;
  opacity:1;
  transition:opacity .4s ease;
  isolation:isolate;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  box-sizing:border-box;
}
#studio-intro.studio-intro-out{
  opacity:0;
  pointer-events:none;
}

#studio-intro-stage{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#000;
}

#studio-intro-video{
  display:block;
  width:100%;
  height:100%;
  max-width:100vw;
  max-height:100vh;
  object-fit:contain;
  object-position:center center;
  background:#000;
  image-rendering:auto;
}

/* Sound-unlock screen only appears when the browser blocks unmuted autoplay. */
#studio-intro-start{
  position:relative;
  z-index:3;
  min-width:min(320px,82vw);
  min-height:52px;
  padding:12px 18px;
  border:1px solid rgba(255,255,255,.32);
  border-radius:12px;
  background:rgba(4,12,19,.82);
  color:#fff;
  font:900 clamp(11px,2.7vw,14px) Arial,sans-serif;
  letter-spacing:.7px;
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .16s ease,transform .16s ease,background .16s ease;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
#studio-intro.studio-intro-awaiting #studio-intro-start{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
#studio-intro-start.hidden{
  display:none;
}
#studio-intro-start:hover{
  background:rgba(12,28,40,.92);
}
#studio-intro-start:focus-visible,
#studio-intro-skip:focus-visible{
  outline:2px solid #fff;
  outline-offset:3px;
}

#studio-intro-skip{
  position:absolute;
  z-index:4;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(14px,env(safe-area-inset-bottom));
  min-height:36px;
  padding:8px 12px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:9px;
  background:rgba(0,0,0,.48);
  color:rgba(255,255,255,.82);
  font:800 clamp(9px,2.2vw,11px) Arial,sans-serif;
  letter-spacing:.65px;
  cursor:pointer;
  opacity:.78;
  transition:opacity .16s ease,background .16s ease;
}
#studio-intro-skip:hover{
  opacity:1;
  background:rgba(0,0,0,.68);
}

/* Portrait phones: preserve the complete logo animation with clean letterboxing. */
@media (orientation:portrait){
  #studio-intro-video{
    width:100vw;
    height:100dvh;
    object-fit:contain;
  }
  #studio-intro-skip{
    right:max(12px,env(safe-area-inset-right));
    bottom:max(12px,env(safe-area-inset-bottom));
  }
}

/* Landscape phones/tablets: use all available space without cropping the logo. */
@media (orientation:landscape) and (max-height:600px){
  #studio-intro{
    padding:0;
  }
  #studio-intro-video{
    width:100dvw;
    height:100dvh;
    max-width:none;
    max-height:none;
    object-fit:contain;
  }
  #studio-intro-start{
    min-height:44px;
    padding:9px 16px;
  }
  #studio-intro-skip{
    right:max(10px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion:reduce){
  #studio-intro{
    transition:none;
  }
  #studio-intro-start,
  #studio-intro-skip{
    transition:none;
  }
}


/* ===== John Raul opening story cinematic ===== */
#story-cinematic{
 position:fixed;inset:0;z-index:19000;
 width:100dvw;height:100dvh;background:#000;
 opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .35s ease;
 overflow:hidden;
}
#story-cinematic.story-active{opacity:1;visibility:visible;pointer-events:auto}
#story-cinematic.story-out{opacity:0;pointer-events:none}
#story-stage{position:absolute;inset:0;overflow:hidden;background:#000}
.story-image{
 position:absolute;inset:-3%;
 width:106%;height:106%;object-fit:contain;object-position:center;
 opacity:0;transform:scale(1.025);
 filter:brightness(.84) saturate(.94);
 transition:opacity 1.05s ease,filter 1.05s ease;
 will-change:transform,opacity;
 background:#000;
}
.story-image.active{opacity:1;filter:brightness(1) saturate(1.06)}
.story-image.active.push{animation:storyPush 7.2s linear both}
.story-image.active.drift{animation:storyDrift 7.2s linear both}
.story-image.active.pull{animation:storyPull 7.2s linear both}
@keyframes storyPush{from{transform:scale(1.01)}to{transform:scale(1.085)}}
@keyframes storyDrift{from{transform:scale(1.07) translateX(-1.2%)}to{transform:scale(1.035) translateX(1.2%)}}
@keyframes storyPull{from{transform:scale(1.09)}to{transform:scale(1.015)}}
#story-vignette{
 position:absolute;inset:0;z-index:4;pointer-events:none;
 background:
 radial-gradient(circle at center,transparent 48%,rgba(0,0,0,.20) 78%,rgba(0,0,0,.58) 100%),
 linear-gradient(to bottom,rgba(0,0,0,.18),transparent 22%,transparent 78%,rgba(0,0,0,.28));
}
#story-flash{position:absolute;inset:0;z-index:6;background:#fff;opacity:0;pointer-events:none}
#story-flash.hit{animation:storyFlash .52s ease-out}
@keyframes storyFlash{0%{opacity:.30}18%{opacity:.12}100%{opacity:0}}
#story-bars{position:absolute;inset:0;z-index:7;pointer-events:none}
#story-bars i,#story-bars b{
 position:absolute;left:0;width:100%;height:clamp(14px,3.2vh,32px);
 background:#000;box-shadow:0 0 18px rgba(0,0,0,.8);
}
#story-bars i{top:0}#story-bars b{bottom:0}
#story-progress{
 position:absolute;z-index:9;left:50%;bottom:max(42px,calc(env(safe-area-inset-bottom) + 34px));
 transform:translateX(-50%);display:flex;gap:7px;
}
#story-progress span{
 width:24px;height:3px;border-radius:2px;background:rgba(255,255,255,.25);
 box-shadow:0 1px 5px rgba(0,0,0,.8);
}
#story-progress span.on{background:#ffd84f;box-shadow:0 0 9px rgba(255,216,79,.75)}
#story-progress span.done{background:rgba(255,255,255,.68)}
#story-hint{
 position:absolute;z-index:9;right:max(18px,env(safe-area-inset-right));
 bottom:max(13px,env(safe-area-inset-bottom));
 color:rgba(255,255,255,.66);font:800 9px Arial,sans-serif;
 letter-spacing:.55px;text-shadow:0 2px 4px #000;
}
@media(max-width:760px){
 .story-image{inset:0;width:100%;height:100%;object-fit:contain}
 #story-hint{font-size:8px;right:12px;bottom:max(10px,env(safe-area-inset-bottom))}
 #story-progress{bottom:max(34px,calc(env(safe-area-inset-bottom) + 28px))}
}
@media(orientation:portrait){
 .story-image{object-fit:contain;background:#000}
}
@media(prefers-reduced-motion:reduce){
 .story-image.active.push,.story-image.active.drift,.story-image.active.pull{animation:none}
 #story-flash.hit{animation:none}
}


/* ===== Opening sequence handoff guard ===== */
/* Prevent a one-frame flash of the main menu between Pixel Riff logo and story. */
body.opening-sequence-active #shell{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
body:not(.opening-sequence-active) #shell{
  opacity:1;
  visibility:visible;
}


/* ===== Extended opening cinematic ===== */
#story-prelude,
#story-finale{
 position:absolute;inset:0;z-index:10;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;pointer-events:none;
 opacity:0;transform:scale(.98);
 transition:opacity .8s ease,transform 1.4s ease;
 background:radial-gradient(circle at center,rgba(15,30,52,.52),rgba(0,0,0,.96) 70%);
 text-shadow:0 3px 12px #000;
}
#story-prelude.show,#story-finale.show{opacity:1;transform:scale(1)}
#story-prelude span{
 color:#8edcff;font:900 clamp(12px,2.5vw,20px) Arial,sans-serif;
 letter-spacing:3px;margin-bottom:12px;
}
#story-prelude strong{
 color:#fff;font:900 clamp(18px,4vw,38px) Arial,sans-serif;
 letter-spacing:1.4px;
}
#story-finale{
 background:
 radial-gradient(circle at center,rgba(255,177,35,.18),rgba(7,10,18,.91) 58%,#000 100%);
}
#story-finale span{
 color:#ffd75b;font:900 clamp(15px,3vw,27px) Arial,sans-serif;
 letter-spacing:2px;margin-bottom:10px;
}
#story-finale strong{
 color:#fff;font:900 italic clamp(26px,6vw,58px) Arial,sans-serif;
 letter-spacing:1px;
 text-shadow:0 0 18px rgba(255,202,61,.55),0 4px 12px #000;
 animation:storyFinalePulse .8s ease-in-out infinite alternate;
}
@keyframes storyFinalePulse{
 from{transform:scale(1);filter:brightness(1)}
 to{transform:scale(1.035);filter:brightness(1.18)}
}

#story-chapter{
 position:absolute;z-index:9;left:50%;top:max(44px,8vh);
 transform:translate(-50%,-8px);
 padding:7px 13px;border-radius:999px;
 background:rgba(2,10,18,.55);
 border:1px solid rgba(255,218,84,.22);
 color:#ffd95a;
 font:900 clamp(9px,1.5vw,12px) Arial,sans-serif;
 letter-spacing:1.6px;
 opacity:0;
 transition:opacity .5s ease,transform .5s ease;
 pointer-events:none;
 text-shadow:0 2px 5px #000;
 backdrop-filter:blur(4px);
}
#story-chapter.show{opacity:.88;transform:translate(-50%,0)}

/* Scene-specific cinematic personality */
.story-image.scene-1{filter:brightness(.95) saturate(1.02)}
.story-image.scene-2{filter:brightness(1.02) saturate(1.08)}
.story-image.scene-3{
 filter:brightness(.88) saturate(1.16) contrast(1.08);
 animation-name:storyThreat !important;
}
.story-image.scene-4{filter:brightness(1.04) saturate(1.05)}
.story-image.scene-5{
 filter:brightness(1.06) saturate(1.10);
 animation-name:storyHeroPush !important;
}
@keyframes storyThreat{
 0%{transform:scale(1.03) translate(0,0)}
 18%{transform:scale(1.045) translate(-.35%,.18%)}
 36%{transform:scale(1.055) translate(.28%,-.18%)}
 58%{transform:scale(1.065) translate(-.22%,.12%)}
 100%{transform:scale(1.09) translate(.25%,0)}
}
@keyframes storyHeroPush{
 from{transform:scale(1.015)}
 to{transform:scale(1.105)}
}
#story-flash.gold{
 animation:storyGoldFlash .78s ease-out;
 background:#ffd85c;
}
@keyframes storyGoldFlash{
 0%{opacity:.42}
 20%{opacity:.18}
 100%{opacity:0}
}

@media(max-width:760px){
 #story-chapter{top:max(34px,6vh)}
 #story-prelude strong{max-width:84vw}
 #story-finale strong{max-width:88vw}
}
@media(prefers-reduced-motion:reduce){
 #story-finale strong{animation:none}
 .story-image.scene-3,.story-image.scene-5{animation:none !important}
}


/* ===== Standalone story title screens ===== */
#story-chapter.story-title-card{
 position:absolute !important;
 inset:0 !important;
 z-index:12 !important;
 width:auto !important;
 height:auto !important;
 transform:none !important;
 padding:0 !important;
 border:0 !important;
 border-radius:0 !important;
 display:flex !important;
 align-items:center;
 justify-content:center;
 text-align:center;
 opacity:0;
 background:
   radial-gradient(circle at center,rgba(18,44,69,.88) 0%,rgba(4,13,24,.97) 58%,#000 100%) !important;
 color:#ffd54d !important;
 font:900 clamp(34px,7vw,82px) Arial,sans-serif !important;
 letter-spacing:clamp(2px,.65vw,8px) !important;
 line-height:1.05;
 text-shadow:
   0 4px 0 rgba(94,48,0,.95),
   0 0 16px rgba(255,205,52,.48),
   0 0 42px rgba(255,163,31,.20) !important;
 backdrop-filter:none !important;
 pointer-events:none;
}
#story-chapter.story-title-card::before,
#story-chapter.story-title-card::after{
 content:"★";
 position:absolute;
 top:50%;
 color:#ffd54d;
 font-size:clamp(12px,2vw,22px);
 opacity:.85;
 transform:translateY(-50%);
}
#story-chapter.story-title-card::before{left:clamp(20px,10vw,150px)}
#story-chapter.story-title-card::after{right:clamp(20px,10vw,150px)}
#story-chapter.story-title-card.show{
 opacity:1 !important;
 animation:titleCardIn 2.2s ease both;
}
@keyframes titleCardIn{
 0%{opacity:0;filter:brightness(2);letter-spacing:clamp(7px,1.4vw,18px)}
 18%{opacity:1;filter:brightness(1.35)}
 72%{opacity:1;filter:brightness(1)}
 100%{opacity:0;filter:brightness(.75)}
}
@media(max-width:760px){
 #story-chapter.story-title-card{
   font-size:clamp(25px,8vw,48px) !important;
   padding:0 12vw !important;
 }
}
@media(prefers-reduced-motion:reduce){
 #story-chapter.story-title-card.show{animation:titleCardFade 2.2s linear both}
 @keyframes titleCardFade{0%,100%{opacity:0}15%,80%{opacity:1}}
}


/* Clean opening phrase screen: no first story image behind it. */
#story-prelude{
 background:
   radial-gradient(circle at 50% 45%,rgba(17,38,61,.72) 0%,rgba(4,12,22,.96) 52%,#000 100%) !important;
}
#story-prelude.show{
 opacity:1 !important;
}
#story-prelude.show ~ .story-image,
#story-cinematic:has(#story-prelude.show) .story-image{
 opacity:0 !important;
 visibility:hidden !important;
}

/* ===== FINAL opening bleed-through guard ===== */
body.opening-sequence-active #shell{
  display:none !important;
}
body:not(.opening-sequence-active) #shell{
  display:block;
}


/* ===== FINAL MOBILE / RESPONSIVE RELEASE PASS ===== */

/* The cabinet is a desktop presentation. Mobile gets a clean, true 16:9 stage. */
.mobile-device #tv{
  position:fixed !important;
  inset:0 !important;
  width:100dvw !important;
  height:100dvh !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:#000 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}
.mobile-device #tv::before,
.mobile-device #tv-brand,
.mobile-device #tv-controls,
.mobile-device .tv-foot{
  display:none !important;
}

.mobile-device #tv #shell{
  position:relative !important;
  flex:none !important;
  width:min(100dvw,calc(100dvh * 16 / 9)) !important;
  height:min(100dvh,calc(100dvw * 9 / 16)) !important;
  max-width:none !important;
  max-height:none !important;
  aspect-ratio:16/9 !important;
  margin:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background:#000 !important;
  overflow:hidden !important;
}

.mobile-device #game,
.mobile-device #tv #shell canvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
  object-fit:fill !important;
  border:0 !important;
  border-radius:0 !important;
  image-rendering:pixelated !important;
  touch-action:none !important;
}

/* Touch controls belong only to live gameplay. */
.mobile-device #touch-controls{
  display:none !important;
}
.mobile-device.gameplay-active #touch-controls{
  display:block !important;
  position:fixed !important;
  inset:0 !important;
  z-index:150 !important;
  pointer-events:none !important;
}
.mobile-device.gameplay-active .touch-left,
.mobile-device.gameplay-active .touch-right{
  display:flex !important;
  align-items:flex-end !important;
  gap:10px !important;
  pointer-events:auto !important;
}
.mobile-device.gameplay-active .touch-left{
  left:max(14px,env(safe-area-inset-left)) !important;
}
.mobile-device.gameplay-active .touch-right{
  right:max(14px,env(safe-area-inset-right)) !important;
}
.mobile-device.gameplay-active .touch-left,
.mobile-device.gameplay-active .touch-right{
  bottom:max(14px,env(safe-area-inset-bottom)) !important;
}

/* Portrait is intentionally blocked for gameplay/readability. */
.mobile-device #rotate-overlay{
  z-index:22000 !important;
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left);
  box-sizing:border-box;
}

/* Opening media uses dynamic viewport units and never crops artwork. */
.mobile-device #studio-intro,
.mobile-device #story-cinematic{
  width:100dvw !important;
  height:100dvh !important;
  max-width:100dvw !important;
  max-height:100dvh !important;
}
.mobile-device #studio-intro-video,
.mobile-device .story-image{
  width:100dvw !important;
  height:100dvh !important;
  max-width:100dvw !important;
  max-height:100dvh !important;
  object-fit:contain !important;
  object-position:center !important;
}

/* Short landscape phones: keep buttons reachable without covering Raul excessively. */
@media (orientation:landscape) and (max-height:430px){
  .mobile-device.gameplay-active .touch-btn{
    width:56px !important;
    height:56px !important;
    font-size:15px !important;
  }
  .mobile-device.gameplay-active .touch-btn.small{
    width:48px !important;
    height:48px !important;
  }
  .mobile-device.gameplay-active .touch-btn.jump{
    width:64px !important;
    height:64px !important;
    font-size:11px !important;
  }
  .mobile-device.gameplay-active .touch-left,
  .mobile-device.gameplay-active .touch-right{
    bottom:max(8px,env(safe-area-inset-bottom)) !important;
  }
  .mobile-device.gameplay-active .touch-left{
    left:max(8px,env(safe-area-inset-left)) !important;
  }
  .mobile-device.gameplay-active .touch-right{
    right:max(8px,env(safe-area-inset-right)) !important;
  }
  #story-hint{font-size:7px !important}
}

/* Tablets can afford slightly larger controls without changing the game viewport. */
@media (orientation:landscape) and (min-height:650px) and (pointer:coarse){
  .mobile-device.gameplay-active .touch-btn{
    width:76px !important;
    height:76px !important;
  }
  .mobile-device.gameplay-active .touch-btn.jump{
    width:88px !important;
    height:88px !important;
  }
}

/* Hard opening guard remains authoritative on every device. */
body.opening-sequence-active #shell{
  display:none !important;
}


/* Final mobile controls: movement + jump only. Speed boost is Star Power gameplay. */
.mobile-device.gameplay-active .touch-right{
  gap:0 !important;
}


/* ===== MOBILE CONTINUE / ENTER EQUIVALENT ===== */
#mobile-continue{
  display:none;
}
.mobile-device #mobile-continue.show{
  display:block !important;
  position:fixed;
  left:50%;
  bottom:max(20px,env(safe-area-inset-bottom));
  transform:translateX(-50%);
  z-index:23000;
  min-width:180px;
  min-height:54px;
  padding:12px 24px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:16px;
  background:rgba(8,27,44,.94);
  color:#fff;
  font:900 14px/1 Arial,sans-serif;
  letter-spacing:1px;
  box-shadow:
    0 8px 24px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.mobile-device #mobile-continue.show:active{
  transform:translateX(-50%) scale(.96);
}
@media (orientation:portrait){
  .mobile-device #mobile-continue{
    display:none !important;
  }
}
@media (orientation:landscape) and (max-height:430px){
  .mobile-device #mobile-continue.show{
    min-height:46px;
    min-width:160px;
    padding:9px 18px;
    font-size:12px;
    bottom:max(10px,env(safe-area-inset-bottom));
  }
}