/* ============================================================
   ERIC AND THE TRAP DOOR — dark-whimsical illustrated adventure
   Palette: dim ink, aged paper, moonlight, lamp-amber, cage-rust
   ============================================================ */

:root{
  --ink:        #1b1a22;
  --ink-soft:   #3a3644;
  --paper:      #e8dfc8;
  --paper-warm: #efe4c9;
  --paper-dark: #cbbc9c;
  --moon:       #9fb6c9;
  --moon-deep:  #4a5f78;
  --lamp:       #e8a33d;
  --lamp-soft:  #f3cd8a;
  --rust:       #a4552f;
  --plum:       #4b2f47;
  --moss:       #6b7448;
  --eric:       #d8503f;   /* Eric's red sweater — the eye-magnet */
  --ui-pencil:  #46414d;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{
  margin:0; height:100%; overflow:hidden; background:#0b0a0e;
  font-family:"Bradley Hand","Segoe Print","Comic Sans MS",'Chalkboard SE',cursive;
  color:var(--paper);
  user-select:none;
}
#defs{ position:absolute; }

#stage{
  position:fixed; inset:0; display:grid; place-items:center;
  background:#0b0a0e;
}
#scene{
  position:absolute; inset:0; overflow:hidden;
}
#scene svg.bg{ position:absolute; inset:0; width:100%; height:100%; display:block; }

/* ---------- atmosphere layers ---------- */
#vignette{
  position:absolute; inset:0; pointer-events:none; z-index:40;
  background:radial-gradient(ellipse 78% 72% at 50% 48%,
    rgba(0,0,0,0) 42%, rgba(6,5,9,.55) 78%, rgba(4,3,7,.9) 100%);
}
#grainlayer{
  position:absolute; inset:0; pointer-events:none; z-index:41; opacity:.14;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='.6'/></svg>");
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-3px,2px)} 66%{transform:translate(2px,-3px)} 100%{transform:translate(0,0)}
}
#fade{
  position:absolute; inset:0; background:#07060a; z-index:70; pointer-events:none;
  opacity:1; transition:opacity .55s ease;
}
#fade.clear{ opacity:0; }
#fade.slow{ transition:opacity 1.2s ease; }

/* ---------- caption / short dialogue ---------- */
#caption{
  position:absolute; left:50%; bottom:5.5vh; transform:translateX(-50%);
  z-index:60; max-width:min(760px,86vw); text-align:center; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
}
#caption.show{ opacity:1; }
#caption .line{
  display:inline-block; padding:.5em 1.1em;
  background:rgba(11,10,14,.72); border:1px solid rgba(232,223,200,.16);
  border-radius:14px 20px 15px 22px;
  font-size:clamp(15px,2.3vw,23px); line-height:1.35; letter-spacing:.2px;
  color:var(--paper-warm); text-shadow:0 2px 0 rgba(0,0,0,.6);
}
#caption .who{
  display:block; font-size:.72em; color:var(--lamp); opacity:.9; margin-bottom:.15em;
  letter-spacing:1.6px; text-transform:uppercase;
}

/* ---------- HUD: physical objects, not a dashboard ---------- */
#hud{ position:absolute; inset:0; z-index:50; pointer-events:none; }
#hud .hud-keys{
  position:absolute; left:1.4vw; bottom:1.6vh; display:flex; gap:6px; align-items:flex-end;
}
#hud .hud-keys svg{ width:clamp(34px,4.4vw,58px); filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
#hud .hud-keys .keyslot{ opacity:.22; }
#hud .hud-keys .keyslot.have{ opacity:1; animation:keyPop .5s cubic-bezier(.3,1.7,.5,1); }
@keyframes keyPop{ 0%{transform:scale(.2) rotate(-40deg)} 70%{transform:scale(1.25) rotate(8deg)} 100%{transform:scale(1)} }

#hud .mapbtn{
  position:absolute; right:1.4vw; bottom:1.6vh; pointer-events:auto; cursor:pointer;
  width:clamp(64px,8vw,104px); transition:transform .18s ease;
  filter:drop-shadow(0 5px 6px rgba(0,0,0,.65));
}
#hud .mapbtn:hover{ transform:rotate(-3deg) scale(1.06); }
#hud .mapbtn.nudge{ animation:mapNudge 1.6s ease-in-out 3; }
@keyframes mapNudge{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-6deg) scale(1.08)} 60%{transform:rotate(4deg)} }

/* ---------- scene props & hotspots ---------- */
.prop{ position:absolute; transform-origin:50% 100%; }
.hot{
  position:absolute; cursor:pointer; pointer-events:auto; z-index:20;
  transition:transform .2s cubic-bezier(.3,1.5,.5,1);
}
.hot:hover{ transform:scale(1.05); }
.hot .halo{
  position:absolute; inset:-14%; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(243,205,138,.30),rgba(243,205,138,0) 66%);
  opacity:0; transition:opacity .3s ease;
}
.hot:hover .halo, .hot.beckon .halo{ opacity:1; }
.hot.beckon{ animation:beckon 2.6s ease-in-out infinite; }

/* IMPORTANT: animations that move SVG elements must use the independent
   translate / rotate / scale properties, never `transform`. A CSS
   `transform` REPLACES an element's own transform="translate(x y)"
   attribute, which throws the element (and its click area) to the origin. */
@keyframes beckon{ 0%,100%{ translate:0 0 } 50%{ translate:0 -6px } }
.hot .tag{
  position:absolute; left:50%; top:-2.2em; transform:translateX(-50%) rotate(-2deg);
  white-space:nowrap; font-size:clamp(11px,1.5vw,16px); color:var(--paper);
  background:rgba(11,10,14,.78); padding:.15em .6em; border-radius:8px 11px 8px 12px;
  opacity:0; transition:opacity .2s ease; pointer-events:none;
  border:1px solid rgba(232,223,200,.18);
}
.hot:hover .tag{ opacity:1; }

/* in-world (SVG) hotspots */
.svhot{ cursor:pointer; pointer-events:auto; }
.svhot .halo{ transition:opacity .3s ease; }
.svhot .tagtext{ transition:opacity .2s ease; pointer-events:none; }
/* a hotspot the story wants you to notice glows and names itself
   without waiting for a hover — children do not hunt for pixels */
.svhot.beckon{ animation:beckon 2.6s ease-in-out infinite; }
.svhot.beckon .halo{ opacity:.85 !important; animation:haloPulse 2.6s ease-in-out infinite; }
.svhot.beckon .tagtext{ opacity:1 !important; }
@keyframes haloPulse{ 0%,100%{opacity:.5} 50%{opacity:1} }
#scene svg{ pointer-events:auto; }
#scene svg.chal-layer{ position:absolute; inset:0; width:100%; height:100%; z-index:26;
  background:rgba(7,6,10,.66); }   /* dims the letterbox too, so the board is never cropped */

/* Eric in the world */
#eric{ position:absolute; z-index:22; transition:left .9s cubic-bezier(.4,0,.3,1), bottom .9s ease; pointer-events:none; }
#eric.walking .leg-a{ animation:stepA .38s linear infinite; }
#eric.walking .leg-b{ animation:stepB .38s linear infinite; }
@keyframes stepA{ 0%,100%{transform:rotate(14deg)} 50%{transform:rotate(-14deg)} }
@keyframes stepB{ 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(14deg)} }
.breathe{ animation:breathe 3.4s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes breathe{ 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.017) translateY(-1px)} }
.blink{ animation:blink 4.7s infinite; transform-origin:50% 50%; }
@keyframes blink{ 0%,95%,100%{transform:scaleY(1)} 97%{transform:scaleY(.1)} }
.sway{ animation:sway 5.5s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes sway{ 0%,100%{transform:rotate(-.8deg)} 50%{transform:rotate(.8deg)} }
.snore{ animation:snore 3.1s ease-in-out infinite; transform-origin:50% 100%; }
@keyframes snore{ 0%,100%{transform:scale(1,1)} 45%{transform:scale(1.03,1.05)} }
.flick{ animation:flick 5s linear infinite; }
@keyframes flick{ 0%,97%,100%{opacity:1} 97.6%{opacity:.35} 98.3%{opacity:.9} 99%{opacity:.5} }
.drip{ animation:drip 3.6s linear infinite; }
@keyframes drip{ 0%{transform:translateY(0); opacity:0} 12%{opacity:1} 85%{transform:translateY(70px); opacity:1} 90%,100%{opacity:0} }
.hum{ animation:hum 2.2s ease-in-out infinite; }
@keyframes hum{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(.7px,-.7px)} }

/* ---------- overlay windows (map, cinematic, note) ---------- */
#overlay{ position:absolute; inset:0; z-index:65; pointer-events:none; }
#overlay.on{ pointer-events:auto; }
.scrim{
  position:absolute; inset:0; background:rgba(6,5,9,.72);
  opacity:0; transition:opacity .35s ease;
}
.scrim.on{ opacity:1; }

/* Eric's hand-drawn map */
#mapsheet{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-.6deg) scale(.86);
  width:min(1040px,94vw); height:min(660px,88vh);
  opacity:0; transition:opacity .4s ease, transform .45s cubic-bezier(.25,1.4,.5,1);
  filter:drop-shadow(0 22px 34px rgba(0,0,0,.7));
}
#mapsheet.on{ opacity:1; transform:translate(-50%,-50%) rotate(-.6deg) scale(1); }
#mapsheet svg{ width:100%; height:100%; display:block; }
.map-room{ cursor:default; }
.map-room.travelable{ cursor:pointer; }
.map-room.travelable:hover .roomshape{ fill:#dccfa8; }
.map-label{ font-size:15px; fill:var(--ui-pencil); letter-spacing:.4px; }
.map-hand{ font-size:13px; fill:#6b5b4a; }
.you-pin{ animation:pinBob 2s ease-in-out infinite; }
@keyframes pinBob{ 0%,100%{ translate:0 0 } 50%{ translate:0 -5px } }
.newroom{ stroke-dasharray:900; stroke-dashoffset:900; animation:drawIn 1.1s ease forwards; }
@keyframes drawIn{ to{stroke-dashoffset:0} }
.rescue-pop{ animation:rescuePop .8s cubic-bezier(.25,1.6,.4,1); }
@keyframes rescuePop{ 0%{ scale:1; rotate:0deg } 40%{ scale:1.35; rotate:-8deg } 100%{ scale:1; rotate:0deg } }
.route{ stroke-dasharray:6 7; animation:routeDraw .5s linear forwards; }
@keyframes routeDraw{ from{stroke-dashoffset:120} to{stroke-dashoffset:0} }

/* paper note / sign */
.note{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) rotate(-1.4deg);
  width:min(520px,80vw); padding:34px 34px 40px; background:var(--paper);
  color:#2a2530; font-size:clamp(15px,2.1vw,21px); line-height:1.45;
  box-shadow:0 18px 30px rgba(0,0,0,.6);
  clip-path:polygon(1% 2%,99% 0,100% 97%,60% 100%,2% 98%);
  opacity:0; transition:opacity .3s ease, transform .35s cubic-bezier(.2,1.5,.5,1);
}
.note.on{ opacity:1; transform:translate(-50%,-50%) rotate(-1.4deg) scale(1); }
.note .tape{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%) rotate(-3deg);
  width:120px; height:30px; background:rgba(226,214,178,.62);
  border-left:1px dashed rgba(0,0,0,.12); border-right:1px dashed rgba(0,0,0,.12);
}
.note h3{ margin:0 0 .4em; font-size:1.15em; letter-spacing:1px; text-transform:uppercase; color:#6b2f22; }
.note .hint{ margin-top:1em; font-size:.82em; color:#6b5b4a; }

/* cinematic letterbox */
.cine{ position:absolute; inset:0; pointer-events:none; }
.cine .bar{ position:absolute; left:0; right:0; height:0; background:#07060a; transition:height .5s ease; }
.cine .bar.top{ top:0 } .cine .bar.bot{ bottom:0 }
.cine.on .bar{ height:11vh; }

/* buttons — pencil-drawn, not app chrome */
.pbtn{
  display:inline-block; cursor:pointer; padding:.45em 1.3em; margin:.3em;
  color:var(--paper); font-family:inherit; font-size:clamp(14px,2vw,20px);
  background:rgba(20,18,26,.7); border:2px solid var(--paper-dark);
  border-radius:16px 22px 15px 24px; transform:rotate(-.7deg);
  transition:transform .16s ease, background .16s ease;
}
.pbtn:hover{ transform:rotate(.6deg) scale(1.05); background:rgba(40,34,50,.9); }

/* ---------- challenge chrome (all diegetic) ---------- */
.chal{ position:absolute; inset:0; z-index:25; }
.shake{ animation:shake .32s ease; }
@keyframes shake{
  0%,100%{ translate:0 0; rotate:0deg }
  20%{ translate:-7px 3px; rotate:-1.4deg }
  45%{ translate:6px -3px; rotate:1.4deg }
  70%{ translate:-3px 2px; rotate:-.6deg } }
.pulse-good{ animation:pulseGood .6s ease; }
@keyframes pulseGood{ 0%{filter:brightness(1)} 35%{filter:brightness(1.9) saturate(1.3)} 100%{filter:brightness(1)} }

/* memory cards */
.card{ cursor:pointer; }
.card.wrong{ animation:wobbleCard .5s ease; }
@keyframes wobbleCard{ 0%,100%{ rotate:0deg } 25%{ rotate:-8deg } 60%{ rotate:7deg } }
.card.matched{ animation:matchGlow .7s ease forwards; }
@keyframes matchGlow{ 0%{filter:brightness(1)} 40%{filter:brightness(1.7) drop-shadow(0 0 14px var(--lamp-soft))} 100%{filter:brightness(1.08)} }

/* misc */
.fadein{ animation:fadeIn .6s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.riseIn{ animation:riseIn .7s cubic-bezier(.2,1,.3,1) both; }
@keyframes riseIn{ from{opacity:0; transform:translateY(26px)} to{opacity:1; transform:none} }
.no{ pointer-events:none }
.title-h{
  font-size:clamp(30px,7vw,84px); letter-spacing:2px; color:var(--paper-warm);
  text-shadow:0 5px 0 rgba(0,0,0,.55); transform:rotate(-1.4deg);
}
.title-s{ font-size:clamp(13px,2.2vw,22px); color:var(--moon); letter-spacing:3px; text-transform:uppercase; }
.centerbox{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; gap:.6em; z-index:30;
}