:root{
  --ink:#2a1f14;
  --red:#c62a2a;
  --yellow:#ffd84d;
  --cream:#f3ecd8;
  --art-height: 100vh; /* full height again — Pete's scale reads better this way */
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
/* the scrollbar just drives Pete's position via JS — not meant to be a
   visible/usable UI element, so hide it across browsers */
html{ scrollbar-width:none; -ms-overflow-style:none; }
html::-webkit-scrollbar{ display:none; }
body{ font-family:'Baloo 2', sans-serif; color:var(--ink); background:#fff; }
.pixel{ font-family:'Press Start 2P', monospace; }

/* Animated grain overlay — a single small noise tile, GPU-composited via
   transform, with its position jumped between a handful of fixed offsets
   (steps(), not smooth motion) to read as flicker/static. No per-frame
   pixel work, so this costs nothing beyond one compositing layer
   regardless of how many other animations are running on the page.
   Plain opacity blending, not mix-blend-mode:overlay — overlay leaves
   pure-white pixels (the site's own background) completely unchanged by
   definition, so it was invisible over most of the page. */
.grain-overlay{
  position:fixed;
  inset:-64px; /* oversized so the jitter never reveals an edge */
  z-index:500; /* above everything, including modals and the loading screen */
  background-image:url('../assets/images/grain_noise.png');
  background-repeat:repeat;
  opacity:0.15;
  pointer-events:none;
  animation:grain-shift 0.5s steps(10) infinite;
}
@keyframes grain-shift{
  0%   { transform:translate(0px, 0px); }
  10%  { transform:translate(-19px, 7px); }
  20%  { transform:translate(13px, -23px); }
  30%  { transform:translate(-7px, 19px); }
  40%  { transform:translate(23px, 3px); }
  50%  { transform:translate(-13px, -17px); }
  60%  { transform:translate(5px, 25px); }
  70%  { transform:translate(-25px, -5px); }
  80%  { transform:translate(17px, 13px); }
  90%  { transform:translate(-3px, -25px); }
  100% { transform:translate(0px, 0px); }
}

.loading-screen{
  position:fixed;
  inset:0;
  z-index:200;          /* above everything, including the video modal */
  background:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  opacity:1;
  transition:opacity .4s;
}
.loading-screen.hidden{
  opacity:0;
  pointer-events:none;
}
.loading-screen img{
  height:22vh;
  width:auto;
  filter: drop-shadow(3px 6px 6px rgba(0,0,0,0.35));
}
.loading-screen .loading-label{
  font-size:12px;
  color:var(--ink);
}

.scroll-space{
  height: 500vh;
  position:relative;
}

.viewport{
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
}

.track{
  display:flex;
  align-items:center;
  height:var(--art-height);
  will-change: transform;
}

/* the white lead-in / lead-out stretches — each sized to exactly one
   viewport width in JS, so the screen shows pure white + logo at both
   ends of the scroll, matching what's already at the edges of the art */
.margin{
  flex:0 0 auto;
  height:100%;
  position:relative; /* anchors .cheesekid-prop's absolute positioning */
  display:flex;
  align-items:center;
  justify-content:center;
}

.cheesekid-prop{
  position:absolute;
  bottom:14%; /* roughly the same ground line as the carrot peddler/cart */
  right:10%;  /* between the logo and the scene edge, in Pete's walking path */
  transform:translateX(1000px) translateY(-20px); /* pushed fully off-screen at load, nudged up per feedback */
  height:48%; /* scaled up 100% per feedback */
  width:auto;
  z-index:1;
  pointer-events:auto; /* hoverable — see the hover reaction in main.js */
  cursor:pointer;
  user-select:none;
}

.logo-prop{
  background:#fff;
  border:6px solid var(--ink);
  padding:32px 52px;
  box-shadow:10px 14px 0 rgba(0,0,0,0.3);
}
.logo-prop h1{
  font-family:'Press Start 2P';
  font-size:40px;
  color:var(--red);
  margin:0;
  text-align:center;
  line-height:1.6;
}

.scene{
  flex:0 0 auto;
  height:100%;
  position:relative;
}
.scene img.bg{
  height:100%;
  width:auto;
  display:block;
  user-select:none;
  pointer-events:none;
}

.storefront{
  position:absolute;
  bottom:16%;
  width:2.2%;
  min-width:32px;
  max-width:46px;
  aspect-ratio:1/1;
  background: var(--cream);
  border:2px solid var(--ink);
  box-shadow:2px 3px 0 rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-size:6.5px;
  line-height:1.25;
  padding:3px;
  text-decoration:none;
  color:var(--ink);
  transition: transform .2s;
  z-index:3;
}
.storefront:hover{ transform: translateY(-6px) scale(1.8); z-index:50; }

.cart-prop{
  position:fixed;
  /* 100% - GROUND_FRACTION(87%) so the cart's wheels sit on the same
     sidewalk line Pete walks along */
  bottom:13%;
  left:0; /* explicit anchor — horizontal position is driven entirely by
     the JS transform below, left:0 just fixes the static baseline */
  width:420px; /* was width:16% (capped by max-width:420px anyway since
     that % was relative to the huge scrolling scene) — hardcoded so the
     rendered size is unchanged now that this is fixed-positioned */
  z-index:15;           /* now a real sibling of #pete (also fixed), so
     this genuinely renders above Pete instead of being trapped inside
     .track's transform-created stacking context */
  pointer-events:auto;
  cursor:pointer;
  /* horizontal position + the 50px-down nudge are both applied via a single
     JS-driven transform (see main.js) instead of animating style.left —
     left/right are layout-affecting properties, so updating one every
     animation frame forced a synchronous reflow each frame. transform is
     compositor-only, so this animates without triggering layout. */
}
.cart-prop img{ width:100%; display:block; }

.bro-car-prop{
  position:fixed;
  bottom:0; /* cropped flush at the art's bottom edge by design, not the sidewalk-line offset the cart uses */
  left:0; /* explicit anchor — horizontal position driven by the JS transform, same pattern as .cart-prop */
  width:1500px; /* almost doubled from 806px — meant to read as a close foreground object, per feedback */
  z-index:15; /* same foreground tier as .cart-prop, above Pete (z-index:10) */
  pointer-events:none;
}
.bro-car-prop img{ width:100%; display:block; }

.banana-stand-prop{
  position:absolute;
  top:0;
  left:65.87%; /* gap right of the "Club Sandwich" sign on La Belle Province —
    nudge this % to taste once checked against the live art */
  height:100%;
  width:auto;
  z-index:2; /* above the bg, below storefronts/props/Pete */
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
}

.lost-found-icon{
  position:absolute;
  /* blank grey wall panel right of Schwartz's, before the Garage sign —
     nudge these % to taste once checked against the live art */
  left:33.28%;
  top:23.5%;
  height:22.35%; /* scaled up 50%, then another 5%, per feedback */
  width:auto; /* natural aspect ratio of the real sign art, not forced square */
  transform:translate(-45px, -30px); /* nudged left/up per feedback */
  z-index:2; /* above the bg, below storefronts/props/Pete */
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transition:transform .2s;
}
.lost-found-icon:hover{ transform:translate(-45px, -30px) scale(1.08); }

.banana-crate-prop{
  position:absolute;
  /* sidewalk level beside the Garage door, just right of the Lost and
     Found icon — nudge this % to taste once checked against the live art */
  bottom:13%;
  left:37%;
  height:18%; /* scaled up 100% from 9% per feedback */
  width:auto;
  z-index:2; /* above the bg, below storefronts/props/Pete */
  pointer-events:auto;
  cursor:pointer;
  user-select:none;
  transform:translate(100px, -50px); /* nudged right 100px, up 50px per feedback */
}

.video-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
}
.video-modal.open{ display:flex; }
.video-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
}
.video-modal-content{
  position:relative;
  z-index:1;
  width:min(90vw, 960px);
  max-height:85vh;
  background:#000;
  border:6px solid var(--ink);
  box-shadow:10px 14px 0 rgba(0,0,0,0.3);
}
.video-modal-content video{
  display:block;
  width:100%;
  max-height:85vh;
}
.video-modal-close{
  position:absolute;
  top:-18px;
  right:-18px;
  z-index:2;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:2px 3px 0 rgba(0,0,0,0.3);
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.video-modal-close:hover{ transform:scale(1.08); }

/* Mystery carrot prompt — reuses .video-modal's backdrop/open plumbing,
   but the question state is its own small box rather than the video's
   black letterboxed container. #mysteryCarrotVideoWrap starts hidden and
   only shows once the user picks YES (see js/main.js). */
.mystery-carrot-box{
  position:relative;
  z-index:1;
  background:var(--cream);
  border:6px solid var(--ink);
  box-shadow:10px 14px 0 rgba(0,0,0,0.3);
  padding:28px 36px;
  text-align:center;
  color:var(--ink);
}
.mystery-carrot-box p{
  font-size:14px;
  line-height:1.7;
  margin:0 0 22px;
}
.mystery-carrot-buttons{
  display:flex;
  gap:16px;
  justify-content:center;
}
.mystery-carrot-buttons button{
  font-size:12px;
  color:var(--ink);
  background:var(--yellow);
  border:3px solid var(--ink);
  box-shadow:3px 4px 0 rgba(0,0,0,0.3);
  padding:10px 18px;
  cursor:pointer;
  transition:transform .15s;
}
.mystery-carrot-buttons button:hover{ transform:scale(1.06); }
.mystery-carrot-buttons button:active{ transform:scale(0.95); }
#mysteryCarrotVideoWrap{ display:none; }
#mysteryCarrotVideoWrap.show{ display:block; }

.game-modal{
  position:fixed;
  inset:0;
  z-index:100;
  display:none;
  align-items:center;
  justify-content:center;
}
.game-modal.open{ display:flex; }
.game-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
}
.game-modal-content{
  position:relative;
  z-index:1;
  width:min(92vw, 600px);
  max-height:90vh;
  background:var(--cream);
  border:6px solid var(--ink);
  box-shadow:10px 14px 0 rgba(0,0,0,0.3);
  padding:14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.game-hud{
  width:100%;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--ink);
}
#bananaGameCanvas{
  width:100%;
  max-width:100%;
  height:auto;
  /* backing resolution is high enough now (26px/cell) that smooth CSS
     upscaling reads better than pixelated — pixelated was blocking
     legibility of the illustrated art (Peter, Arrest Warrant), not just
     giving the intentionally-chunky banana/carrot sprites a hard edge */
  border:4px solid var(--ink);
  background:#000;
}
.game-message{
  position:absolute;
  top:28%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:2;
  text-align:center;
  font-size:14px;
  color:var(--yellow);
  text-shadow:2px 2px 0 var(--ink);
  pointer-events:none;
  line-height:1.8;
}
.game-message.win{
  font-size:24px;
  line-height:1.6;
  animation:gameWinPop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes gameWinPop{
  0%{ transform:translate(-50%,-50%) scale(0.2); opacity:0; }
  100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
}
.cheese-room-video{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  width:78%;
  max-width:400px;
  border:4px solid var(--yellow);
  border-radius:6px;
  box-shadow:6px 8px 0 rgba(0,0,0,0.4);
  background:#000;
  display:none;
}
.cheese-room-video.show{ display:block; }
.handcuffs-video{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  width:80%;
  max-width:420px;
  border:4px solid var(--ink);
  border-radius:6px;
  box-shadow:6px 8px 0 rgba(0,0,0,0.4);
  background:#000;
  display:none;
}
.handcuffs-video.show{ display:block; }
.game-winner-video{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:5;
  width:80%;
  max-width:420px;
  border:4px solid var(--yellow);
  border-radius:6px;
  box-shadow:6px 8px 0 rgba(0,0,0,0.4);
  background:#000;
  display:none;
}
.game-winner-video.show{ display:block; }
.game-over-prompt{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, 120px);
  z-index:6;
  display:none;
}
.game-over-prompt.show{ display:block; }
.game-over-prompt #playAgainBtn{
  font-family:'Press Start 2P';
  font-size:12px;
  color:var(--ink);
  background:var(--yellow);
  border:3px solid var(--ink);
  box-shadow:3px 4px 0 rgba(0,0,0,0.3);
  padding:10px 18px;
  cursor:pointer;
  transition:transform .15s;
}
.game-over-prompt #playAgainBtn:hover{ transform:scale(1.06); }
.game-over-prompt #playAgainBtn:active{ transform:scale(0.95); }
.game-modal-close{
  position:absolute;
  top:-18px;
  right:-18px;
  z-index:2;
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:2px 3px 0 rgba(0,0,0,0.3);
  font-size:20px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.game-modal-close:hover{ transform:scale(1.08); }

.carrot-prop{
  position:absolute;
  /* sidewalk level, same ground line as the hot-dog cart */
  bottom:13%;
  /* just left of the Pied de Cochon storefront, per the position/scale guide —
     nudge this % to taste once checked against the live art.
     Folded in as one %: previously left:35% + a fixed-px transform, but a
     fixed px offset is a different FRACTION of the scene on every window
     size (the scene's rendered width scales with viewport height), so the
     peddler visibly drifted relative to the storefront between windows of
     different sizes. Keeping the whole horizontal position as a single %
     keeps it locked to the same spot in the art on any screen. */
  left:44.03%; /* nudged left ~20px more per feedback */
  height:45.85%; /* reduced 2% from 46.79% per feedback */
  z-index:9;           /* Pete (z-index:10) walks in front when they overlap */
  pointer-events:auto;
  cursor:pointer;
  filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.3));
}
.carrot-prop img{ height:100%; width:auto; display:block; }

.pete{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  pointer-events:auto;
  cursor:pointer;
  filter: drop-shadow(3px 6px 6px rgba(0,0,0,0.35));
}
.pete img{ height:100%; display:block; }

.hint{
  position:fixed;
  bottom:3%;
  left:50%;
  transform:translateX(-50%);
  z-index:11;
  font-size:10px;
  color:var(--ink);
  background:rgba(255,255,255,0.85);
  padding:6px 10px;
  border-radius:20px;
  transition:opacity .4s;
}

#muteBtn{
  position:fixed;
  top:16px;
  right:16px;
  z-index:40;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--cream);
  border:3px solid var(--ink);
  box-shadow:3px 4px 0 rgba(0,0,0,0.3);
  font-size:18px;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:transform .15s;
}
#muteBtn:hover{ transform:scale(1.08); }
#muteBtn:active{ transform:scale(0.95); }

footer{
  position:relative;
  text-align:center;
  padding:60px 20px;
  background:#fff;
  font-family:'Press Start 2P';
  font-size:11px;
  color:var(--ink);
}