/* === RESET & VARIABLES === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root{
  --navy:#060a1a;--purple:#6a5cf0;
  --yellow:#34e6cf;--lyellow:#c8fff2;
  --sx:0px;--sy:0px;--bx:0px;--by:0px;
}

html,body{
  width:100%;height:100%;overflow:hidden;
  background:#ffffff;
  font-family:'Karla',Arial,sans-serif;
}
@font-face{
  font-family:'OpenDyslexic';
  src:url('./OpenDyslexic-Bold.otf') format('opentype');
  font-display:swap;
}
body.dyslexia-font,body.dyslexia-font *,body.dyslexia-font *::before,body.dyslexia-font *::after{
  font-family:'OpenDyslexic','Karla',Arial,sans-serif!important;
}
body.large-text #game{--text-body:8px;}
/* === GAME WRAPPER — integer scaling === */
#game-wrapper{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
#game{
  position:relative;overflow:hidden;
  background:var(--navy);
  --text-body:6px;
  transform-origin:top left;
  image-rendering:auto;
}

/* === FOCUS === */
:focus-visible{outline:1px solid var(--yellow);outline-offset:0px;}
button:focus-visible{outline:2px solid var(--yellow);}

/* === BUTTONS === */
.btn{
  font-family:'Karla',Arial,sans-serif;
  font-size:4px;
  border:none;cursor:pointer;
  padding:3px 6px;
  image-rendering:pixelated;
}
.btn-purple{
  align-self:center;
  background:var(--purple);color:var(--lyellow);
}
.btn-purple:hover,.btn-purple:focus-visible{
  background:var(--yellow);color:var(--navy);
}

/* === SCREENS === */
.screen{
  position:absolute;inset:0;
  display:none;
  overflow:hidden;
}
.screen.active{display:block;}

#minigame-frame{width:100%;height:100%;border:none;display:block;background:#000;}

.overlay{
  position:absolute;inset:0;z-index:90;
  display:flex;align-items:center;justify-content:center;
}
.hidden{display:none!important;}

/* === TITLE === */
.title-layer{position:absolute;inset:0;}
.title-bg{
  background:url('./assets/ui/title_bg.png') no-repeat;
  background-size:320px 180px;
  image-rendering:pixelated;
}
/* .title-stars{
  background:url('./assets/ui/starfield_tile.png') repeat-x;
  background-size:640px 180px;
  image-rendering:pixelated;
} */
#title-station{
  width:42px;height:24px;
  position:absolute;
  top:68px;
  background:url('./assets/ui/ship.png') no-repeat;
  background-size:contain;
  image-rendering:auto; /* source is high-res art, not pixel art — smooth-downscale instead of nearest-neighbor */
}
.title-ui{
  display:flex;flex-direction:column;
  justify-content:center;
  padding:20px 14px;
  z-index:2;
}
#title-text{opacity:0;transition:opacity 0.8s ease;}
#title-text.visible{opacity:1;}
.title-main{
  font-family:'Karla',Arial,sans-serif;
  font-size:12px;line-height:1.5;
  color:var(--lyellow);
  text-shadow:1px 1px 0 var(--navy);
}
.title-sub{
  font-family:'Karla',Arial,sans-serif;
  font-size:4px;
  color:var(--yellow);
  margin-top:6px;
}
.title-buttons{
  position:absolute;bottom:20px;left:14px;
  display:flex;gap:6px;
}

/* === AUTH CORNER === */
#auth-corner{
  position:absolute;top:4px;right:4px;
  z-index:10;
  display:flex;align-items:center;gap:3px;
}
#auth-corner .btn{font-size:3px;padding:2px 4px;}
#user-info{
  display:flex;align-items:center;gap:3px;
}
#user-avatar{
  width:10px;height:10px;
  border-radius:50%;
  border:1px solid var(--purple);
}
#user-name{
  font-family:'Karla',Arial,sans-serif;
  font-size:3px;
  color:var(--lyellow);
  max-width:50px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* === PAUSE BUTTON === */
#btn-pause{
  position:absolute;top:4px;right:4px;
  z-index:80;
  display:flex;gap:3px;
}
#btn-pause,#btn-map{
  font-size:4px;
  padding:2px 4px;
  letter-spacing:1px;
}

/* === MAP OVERLAY === */
#map-overlay{
  background:rgba(0,0,0,.6);
  z-index:100;
}
#map-panel{
  background:var(--navy);
  border:1px solid var(--purple);
  padding:8px 12px;
  max-width:290px;
  display:flex;flex-direction:column;
  align-items:center;
  gap:6px;
}
#map-image{
  max-width:270px;
  max-height:120px;
  width:auto;height:auto;
  object-fit:contain;
  image-rendering:auto;
}

/* === SETTINGS OVERLAY === */
#settings-overlay{
  background:rgba(0,0,0,.6);
  z-index:100;
}
#settings-panel{
  background:var(--navy);
  border:1px solid var(--purple);
  padding:8px 12px;
  width:200px;
  max-height:168px;overflow-y:auto;
  display:flex;flex-direction:column;
  gap:5px;
}
.settings-title{
  font-family:'Karla',Arial,sans-serif;
  font-size:6px;
  color:var(--lyellow);
  text-align:center;
  margin-bottom:2px;
}
.settings-row{
  display:flex;align-items:center;gap:5px;
  font-family:'Karla',Arial,sans-serif;
  font-size:5px;
  color:var(--yellow);
  cursor:pointer;
}
.settings-row input[type="checkbox"]{
  width:7px;height:7px;
  accent-color:var(--yellow);
  cursor:pointer;
  flex-shrink:0;
}
#btn-settings-instructions{
  align-self:center;
}
#btn-settings-close{
  align-self:center;
}
#btn-back-to-menu{
  align-self:center;
}

/* === INSTRUCTIONS OVERLAY === */
#instructions-overlay{
  background:rgba(0,0,0,.6);
  z-index:100;
}
#instructions-panel{
  background:var(--navy);
  border:1px solid var(--purple);
  padding:10px 12px;
  width:220px;
  display:flex;flex-direction:column;
  gap:7px;
}
.instructions-row{
  display:flex;align-items:center;gap:6px;
  font-family:'Karla',Arial,sans-serif;
  font-size:5px;
  color:var(--lyellow);
}
.instructions-keys{
  flex-shrink:0;
  width:78px;
  color:var(--yellow);
}
#btn-instructions-close{
  align-self:center;
  margin-top:4px;
}

/* === INTRO === */
#screen-intro{
  background:var(--navy);
  align-items:flex-start;
  justify-content:center;
  padding-top:60px;
  cursor:pointer;
}
#screen-intro.active{display:flex;}
.intro-text{
  width:260px;
  min-height:90px;
  text-align:left;
  color:var(--yellow);
  font-size:var(--text-body);
  line-height:1.7;
  padding:10px;
}
.intro-counter{
  position:absolute;bottom:6px;right:8px;
  font-family:'Karla',Arial,sans-serif;
  font-size:4px;
  color:var(--lyellow);
}

/* === RECAP (scene-ending summary beats) === */
#screen-recap{
  background:var(--navy);
  align-items:flex-start;
  justify-content:center;
  padding-top:60px;
  cursor:pointer;
}
#screen-recap.active{display:flex;}

/* === SCENE SELECT (hub between scenes) === */
#screen-scenes{
  background:var(--navy);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
#screen-scenes.active{display:flex;}
.scenes-title{
  font-family:'Karla',Arial,sans-serif;
  font-size:7px;
  color:var(--lyellow);
  letter-spacing:1px;
  text-align:center;
}
#scenes-list{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  max-height:140px;overflow-y:auto;
  padding:2px;
}
.scene-btn{width:100px;text-align:center;}
.scene-btn.completed{
  background:transparent;color:var(--lyellow);
  border:1px solid var(--purple);
  opacity:.6;pointer-events:none;cursor:default;
}
.scene-btn.locked{
  background:transparent;color:#8b90a0;
  border:1px solid rgba(106,92,240,0.3);
  opacity:.4;pointer-events:none;cursor:default;
}

/* === CHARACTER SELECT === */
#screen-characters{
  background:var(--navy);
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
}
#screen-characters.active{display:flex;}
#characters-list{
  display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:6px;
}
.character-btn{
  width:96px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:5px 4px;
  background:rgba(18,36,74,0.7);
  color:#e0e4ea;
  border:1px solid rgba(106,92,240,0.5);
  border-radius:8px;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
  transition:background 0.15s ease, border-color 0.15s ease;
}
.character-btn:hover,.character-btn:focus-visible{
  background:rgba(40,55,110,0.8);
  border-color:var(--purple);
  color:#fff;
  outline:none;
}
.character-btn:active{
  background:rgba(60,70,130,0.85);
}
.character-btn.locked{
  background:transparent;color:#8b90a0;
  border:1px solid rgba(106,92,240,0.3);
  opacity:.4;pointer-events:none;cursor:default;
}
.character-portrait{
  width:36px;height:62px;flex-shrink:0;
  background-repeat:no-repeat;
  background-size:144px 62px; /* 4-frame sheet, 36px per frame — frame 0 (neutral pose) shown */
  image-rendering:auto; /* source is high-res art, not pixel art — smooth-downscale instead of nearest-neighbor */
}
.character-portrait.char-ester{background-image:url('./assets/characters/player.png');}
.character-portrait.char-astro{background-image:url('./assets/characters/astro.png');}
.character-portrait.char-nina{background-image:url('./assets/characters/nina.png');}
.character-info{
  display:flex;flex-direction:column;gap:1px;
  min-width:0;
}
.character-name{font-size:4px;}
.character-job{
  font-size:3px;
  opacity:.8;
  font-weight:normal;
}

/* === SCENE === */
#screen-scene.active{display:block;}
#scene-world{
  position:absolute;
  width:2366.49px;height:180px; /* aerospace (0-841.49) + main room (841.49-1726.49) + lab/nuclear (1726.49-2366.49) */
  top:0;left:0;
  overflow:hidden;
}
#scene-main-bg{
  /* The art is a two-level room — the "aerospace room" door sits up a
     staircase on a mezzanine (there's a third band above that, windows/
     shelving, unused so far — nothing in the game reaches it). Ground level
     (where the sprites normally walk) is the lower band with the radiation
     crate/desk/stairs, so the default crop is shifted up to that floor line
     rather than the mezzanine door's threshold. */
  position:absolute;top:-185px;left:841.49px;
  width:885px;height:370px; /* scale kept consistent with the mezzanine door's height against the character sprites */
  image-rendering:auto;
}
#scene-main-bg.floor2{
  /* The lift's own destination — the mezzanine, one level up. Its own floor
     line (the divider between it and the ground floor below, native
     y≈1954.5) lands at css y≈244.3 here — 180px above that (screen height)
     puts the window's own top at css y≈64.3, so the crop only needs a less-
     negative top than the ground floor's, not a full reset to 0. That
     window's bottom coincides with the usual screen-bottom floor line, so
     unlike the ground-floor crop, nothing here needs a matching sprite/lift
     position override. */
  top:-64.3px;
}
#scene-bg{
  position:absolute;top:-60px;left:1726.49px; /* right after the main room, so world x 1726.49+ (nuclear/lab) has no main-room art behind it */
  width:853.33px;height:240px; /* 1.33x zoom, undistorted; shifted up so only the bottom 75% shows */
  image-rendering:auto;
}
/* Brief fade-to-black played while Ester crosses from one room into the
   next (see beginRoomTransition in script.js) — covers the scene viewport
   only, not the HUD buttons. */
#room-fade{
  position:absolute;inset:0;
  background:#000;
  opacity:0;
  pointer-events:none;
  transition:opacity 180ms linear;
  z-index:50;
}
#room-fade.visible{opacity:1;}
#aerospace-bg{
  /* Source art (originally aerospaceRoom.png, 7550x3062; assets/rooms/aerospace_room.jpg
     is a resized/recompressed export of the same full image, nothing spatially cropped
     out of the file) is two stacked floor illustrations,
     not one continuous room — the ground floor (where sprites walk) is the
     bottom panel, split from the top panel by a divider at source y=1447.
     Scaled (0.1115x, undistorted) so the ground floor alone is exactly
     180px tall — the full viewport height, with zero left/right crop — and
     shifted up so the divider (source y=1447) lands at y:0, clipped out of
     view by #scene-world's overflow:hidden. This makes the room's own
     world-space span 841.49px wide (matching the full scaled image width)
     instead of the fixed 320px viewport, so — like #scene-main-bg/#scene-bg
     above — it scrolls: the camera pans across it as Ester walks, the same
     way it already did for those two rooms, rather than cropping the art
     itself down to viewport width. Bottom edge lands at top:179px
     (=117+62), the character sprites' feet line. */
  position:absolute;left:0;top:-161.28px;
  width:841.49px;height:341.28px;
  image-rendering:auto;
}
/* The lift platform in the main room — left/width/height set from script.js
   (LIFT_X/LIFT_WIDTH/LIFT_HEIGHT). Both the ground floor and the mezzanine's
   own crop (#scene-main-bg.floor2) land their floor line at the same
   screen-bottom position, so this needs no floor-specific override — it
   sits flush with the floor either way, except while actually mid-ride (see
   .lift-riding below). Below the sprites (z-index 10) so Ester's feet always
   read as standing on top of it. */
.lift-prop{
  position:absolute;
  bottom:0px;
  z-index:4;
  image-rendering:auto;
}
/* Applied to both the lift platform (animating .bottom) and Ester's sprite
   (animating .top) for the duration of a ride — see beginFloorTransition in
   script.js, which sets the target value right after adding this class (or
   removes it first for the instant, invisible jump partway through a
   descent). */
.lift-riding{
  transition:top 1200ms ease-in-out, bottom 1200ms ease-in-out; /* keep in sync with LIFT_RIDE_MS in script.js */
}
/* The aerospace double doors, on the main room's mezzanine — left/width/
   height set from script.js (AERO_DOOR_X/WIDTH/HEIGHT). Sits flush with the
   mezzanine's own floor line (bottom:0), same as .lift-prop. Which of the
   two images (closed/open) is actually visible is toggled per-frame by
   updateInteractables — the closed one by default (the room reads as locked
   from Scene 1 on), swapping to the open one only once
   sc4_walk_to_aerospace's reveal has unlocked #aero-door-unlocked and Ester
   is close enough. Same z-index as the lift platform, below the sprites. */
.aero-door-prop{
  position:absolute;
  bottom:0px;
  z-index:4;
  image-rendering:auto;
}
.scene-sprite{
  position:absolute;
  image-rendering:pixelated;
  z-index:10;
  top:148px;
}
.scene-sprite.walking{transition:left 1.3s linear;}
.scene-sprite.facing-left{transform:scaleX(-1);} /* art faces right natively; mirror when walking left */
#scene-sprite-sam{
  width:36px;height:62px;
  background:url('./assets/characters/sam_walk.png') no-repeat;
  background-size:144px 62px; /* 4-frame walk sheet, 36px per frame */
  image-rendering:auto; /* source is high-res art, not pixel art — smooth-downscale instead of nearest-neighbor */
  top:117px; /* overrides .scene-sprite's top:148px — keeps feet on the same floor line (148+31) at the doubled height, matching Ester */
  margin-left:-9px; /* half the added width, so he grows symmetrically around the same left-edge anchor */
}
#scene-sprite-jerry{
  width:36px;height:62px;
  background:url('./assets/characters/jerry_walk.png') no-repeat;
  background-size:144px 62px; /* 4-frame walk sheet, 36px per frame */
  image-rendering:auto; /* source is high-res art, not pixel art — smooth-downscale instead of nearest-neighbor */
  top:117px; /* overrides .scene-sprite's top:148px — keeps feet on the same floor line (148+31) at the doubled height, matching Sam/Ester */
  margin-left:-9px; /* half the added width, so he grows symmetrically around the same left-edge anchor */
}
#scene-sprite-cameron{
  width:36px;height:62px;
  background:url('./assets/characters/cameron.png') no-repeat;
  background-size:144px 62px; /* 4-frame sheet, 36px per frame — frame 0 (neutral pose) shown, since Cameron never walks on screen */
  image-rendering:auto;
  top:117px; /* keeps feet on the same floor line as Sam/Jerry/Ester */
  margin-left:-9px;
}
#scene-sprite-ester{
  width:36px;height:62px;
  background:url('./assets/characters/player.png') no-repeat;
  background-size:144px 62px;
  image-rendering:auto; /* source is high-res art, not pixel art — smooth-downscale instead of nearest-neighbor */
  top:117px; /* overrides .scene-sprite's top:148px — keeps feet on the same floor line (148+31) at the doubled height */
  margin-left:-9px; /* half the added width, so she grows symmetrically around the same left-edge movement anchor */
}

/* Walk hint: small directional callout shown while free-roaming toward a
   destination in a different room than the one Ester's currently in. */
#walk-hint{
  position:absolute;
  top:4px;left:4px;
  z-index:20;
  display:flex;align-items:center;gap:3px;
  background:rgba(6,10,26,.7);
  border:1px solid var(--yellow);
  padding:2px 5px;
  font-size:5px;line-height:1;
  color:var(--lyellow);
  pointer-events:none;
}
#walk-hint-arrow{
  color:var(--yellow);
  font-weight:bold;
}
/* Interact hint: shown only while Ester is standing on an interactable's own
   footprint — the lift, the aerospace door (updateInteractables in
   script.js sets #interact-hint-text) — same look as #walk-hint,
   bottom-center instead of the top-left corner so the two never overlap. */
#interact-hint{
  position:absolute;
  bottom:4px;left:50%;
  transform:translateX(-50%);
  z-index:20;
  background:rgba(6,10,26,.7);
  border:1px solid var(--yellow);
  padding:2px 5px;
  font-size:5px;line-height:1;
  color:var(--lyellow);
  pointer-events:none;
  white-space:nowrap;
}
.interact-hint-key{
  color:var(--yellow);
  font-weight:bold;
}

/* Dialogue row: portrait + text box side by side */
#dialogue-row{
  position:absolute;
  bottom:6px;left:6px;right:6px;
  z-index:50;
  display:flex;
  align-items:flex-end;
  gap:3px;
  cursor:pointer;
}
#dialogue-portrait{
  width:24px;height:31px;
  flex-shrink:0;
  image-rendering:pixelated;
  background-repeat:no-repeat;
}
#dialogue-portrait.char-sam{
  background-image:url('./assets/characters/sam_walk.png');
  background-size:144px 62px; /* 4-frame walk sheet, 36px per frame — frame 0 (neutral pose) shown */
  width:36px;height:62px;
  image-rendering:auto;
}
#dialogue-portrait.char-jerry{
  background-image:url('./assets/characters/jerry_walk.png');
  background-size:144px 62px; /* 4-frame walk sheet, 36px per frame — frame 0 (neutral pose) shown */
  width:36px;height:62px;
  image-rendering:auto;
}
#dialogue-portrait.char-ester{
  background-image:url('./assets/characters/player.png');
  background-size:144px 62px;
  width:36px;height:62px;
  image-rendering:auto;
}
#dialogue-portrait.char-astro{
  background-image:url('./assets/characters/astro.png');
  background-size:144px 62px; /* 4-frame sheet, 36px per frame — frame 0 (neutral pose) shown */
  width:36px;height:62px;
  image-rendering:auto;
}
#dialogue-portrait.char-nina{
  background-image:url('./assets/characters/nina.png');
  background-size:144px 62px;
  width:36px;height:62px;
  image-rendering:auto;
}
#dialogue-portrait.char-cameron{
  background-image:url('./assets/characters/cameron.png');
  background-size:144px 62px; /* 4-frame sheet, 36px per frame — frame 0 (neutral pose) shown */
  width:36px;height:62px;
  image-rendering:auto;
}
#dialogue-portrait.char-judith{
  background-image:url('./assets/characters/judith.png');
  background-size:144px 62px;
  width:36px;height:62px;
  image-rendering:auto;
}
#dialogue-portrait.char-noor{
  background-image:url('./assets/characters/noor.png');
  background-size:144px 62px;
  width:36px;height:62px;
  image-rendering:auto;
}
#dialogue-col{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
}
#dialogue-box{
  padding:3px 6px 4px;
  font-size:calc(var(--text-body) - 1px);
  line-height:1.6;
  border-radius:8px;
  overflow-y:auto;
  overflow-x:hidden;
  cursor:pointer;
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
}
#dialogue-box.type-dialogue{background:rgba(65, 66, 69, 0.5);color:var(--navy);}
#dialogue-box.type-inner{background:rgba(65, 66, 69, 0.5);color:var(--navy);font-style:italic;}
#dialogue-box.type-narration{background:rgba(65, 66, 69, 0.5);color:var(--yellow);border:1px solid var(--purple);}
#dialogue-speaker{
  font-family:'Karla',Arial,sans-serif;
  font-size:calc(var(--text-body) + 1px);
  color:var(--lyellow);
  text-shadow:1px 1px 0 var(--navy);
  padding-left:6px;
  margin-bottom:2px;
}

/* Choices */
#choice-panel{
  position:absolute;
  bottom:6px;left:6px;right:6px;
  z-index:55;
  display:flex;flex-direction:column;gap:3px;
}
#choice-panel::before{
  content:'Choose an option:';
  font-family:'Karla',Arial,sans-serif;
  font-size:3.5px;
  color:var(--yellow);
  letter-spacing:0.5px;
  text-transform:uppercase;
  padding-left:2px;
  margin-bottom:1px;
  text-shadow:0 0 2px rgba(0,0,0,0.8);
}
.choice-btn{
  width:100%;text-align:left;
  padding:4px 6px;
  font-size:var(--text-body);
  line-height:1.4;
  display:flex;flex-direction:column;
  background:rgba(18,36,74,0.7);
  color:#e0e4ea;
  border:1px solid rgba(106,92,240,0.5);
  border-radius:8px;
  cursor:pointer;
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  transition:background 0.15s ease, border-color 0.15s ease;
}
.choice-btn:hover,.choice-btn:focus-visible{
  background:rgba(40,55,110,0.8);
  border-color:var(--purple);
  color:#fff;
  outline:none;
}
.choice-btn:active{
  background:rgba(60,70,130,0.85);
}

/* === END === */
#screen-end{background:var(--navy);}
#screen-end.active{display:flex;align-items:center;justify-content:center;}
.end-inner{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  width:280px;
}
#end-reflection{
  color:var(--lyellow);
  font-size:var(--text-body);
  line-height:1.6;
  text-align:center;
  max-width:260px;
  padding:4px;
  opacity:0;
  transition:opacity 1s ease;
}
#end-reflection.visible{opacity:1;}
.end-buttons{
  display:flex;gap:6px;
}