/* Little Words — games/shared/engine.css
   Generic layout for the escort-engine and reveal-engine reskins.
   Theme pages set CSS vars and add their own scene gradients/props:
     --slot-top / --slot-h / --slot-w : vehicle window slot geometry
     --cols                          : reveal grid columns
     --burst-c                       : reveal particle color
     --found-border                  : found-marker border color
   Mobile-first at 375px; every tappable control ≥44px. */

/* ---------- shared intro layout (escort pages) ---------- */
.intro-inner { position:absolute; inset:0; z-index:5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px; padding-bottom:10vh; }
.intro-hero { width:min(56vw,300px); aspect-ratio:1; animation:intro-bob 2.4s ease-in-out infinite; }
.intro-hero svg, .intro-hero img { width:100%; height:100%; object-fit:contain; }
@keyframes intro-bob { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-8px) rotate(1deg)} }
.intro-inner h1 { font-size:clamp(2rem,7vw,3.2rem); color:var(--navy); text-shadow:0 2px 0 #fff; margin-top:6px; }
.intro-inner .tagline { max-width:420px; color:var(--soft-navy); font-weight:600; margin:8px 0 20px; font-size:1.05rem; line-height:1.5; background:rgba(255,251,245,.75); border-radius:14px; padding:8px 14px; }
.intro-inner .micro { margin-top:14px; font-size:.82rem; color:var(--soft-navy); background:rgba(255,251,245,.7); padding:4px 12px; border-radius:999px; }

/* ---------- escort: vehicle + window slots ---------- */
.veh-holder { position:absolute; z-index:6; width:min(62vw,430px); aspect-ratio:1; left:3%; bottom:10%; }
.veh-art { position:absolute; inset:0; }
.veh-art img, .veh-art svg { width:100%; height:100%; display:block; object-fit:contain; }
.veh-windows { position:absolute; inset:0; z-index:2; }
.veh-window-slot { position:absolute; top:var(--slot-top,31%); height:var(--slot-h,16%); width:var(--slot-w,14.6%); }
.veh-window-slot .kid-window { width:100%; height:118%; position:absolute; bottom:2%; opacity:0; transform:translateY(30%) scale(.6); transition:all .35s cubic-bezier(.34,1.56,.64,1); }
.veh-window-slot .kid-window img, .veh-window-slot .kid-window svg { width:100%; height:100%; object-fit:contain; }
.veh-window-slot.filled .kid-window { opacity:1; transform:none; }
.veh-window-slot .kid-window.leaving { opacity:0; transform:translateY(-40%) scale(.6); }
.veh-window-slot button { position:absolute; inset:-8% -12%; border-radius:12px; min-width:44px; min-height:44px; }
.veh-window-slot button:hover { background:rgba(255,255,255,.18); }
.veh-holder.drop-ready .veh-art { filter:drop-shadow(0 0 18px rgba(232,195,106,.95)); }

/* friends waiting to board */
.kids-curb { position:absolute; right:2%; bottom:12%; z-index:7; display:flex; align-items:flex-end; gap:2vw; }
.kid { position:relative; width:clamp(54px,9.5vw,92px); min-width:44px; aspect-ratio:160/260; border-radius:14px; touch-action:none; transition:transform .15s; }
.kid svg, .kid img { width:100%; height:100%; pointer-events:none; }
.kid { animation:kid-sway 2.8s ease-in-out infinite; }
.kid:nth-child(2){ animation-delay:.4s } .kid:nth-child(3){ animation-delay:.8s } .kid:nth-child(4){ animation-delay:1.2s }
@keyframes kid-sway { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.kid.dragging { animation:none; z-index:60; transform:scale(1.08); filter:drop-shadow(0 10px 16px rgba(30,42,74,.35)); }
.kid.boarding { animation:none; transition:all .7s cubic-bezier(.5,.05,.4,1); opacity:0; transform:scale(.35); pointer-events:none; }
.kid.spring { animation:none; transition:transform .35s cubic-bezier(.34,1.56,.64,1); }
.kid::after { content:''; position:absolute; inset:-4px -8px; } /* ≥44px hit area */

.go-btn { position:absolute; left:0; right:0; margin:0 auto; width:max-content; bottom:max(20px, env(safe-area-inset-bottom)); z-index:10; }
.skip-btn { position:absolute; right:14px; bottom:max(16px, env(safe-area-inset-bottom)); z-index:10; }

/* transit scene: vehicle centered, scenery strip scrolls behind */
.scroll-strip { position:absolute; left:0; right:0; bottom:23%; height:40%; z-index:2; overflow:hidden; }
.scroll-props { position:absolute; inset:0; display:flex; align-items:flex-end; gap:6vw; animation:strip-scroll 7s linear infinite; width:200%; }
.scroll-props > div { flex:none; }
.scroll-props > div svg { width:100%; height:100%; }
@keyframes strip-scroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.veh-holder.transit { left:50%; transform:translateX(-50%); bottom:14%; animation:transit-bob .5s ease-in-out infinite; }
@keyframes transit-bob { 0%,100%{margin-bottom:0} 50%{margin-bottom:5px} }

/* arrival */
.veh-holder.arrival { left:2%; bottom:10%; width:min(58vw,400px); }
.kids-sidewalk { position:absolute; right:4%; bottom:12%; z-index:7; display:flex; align-items:flex-end; gap:1.5vw; }
.kids-sidewalk .kid { animation:kid-cheer 1.1s ease-in-out infinite; }
.kids-sidewalk .kid:nth-child(2){ animation-delay:.15s } .kids-sidewalk .kid:nth-child(3){ animation-delay:.3s } .kids-sidewalk .kid:nth-child(4){ animation-delay:.45s }
@keyframes kid-cheer { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
.arrive-hint { position:absolute; left:50%; transform:translateX(-50%); top:10px; z-index:9; max-width:min(340px, 86vw); font-size:.95rem; }

@media (max-width:540px) {
  .veh-holder { width:66vw; left:1%; bottom:18%; }
  .veh-holder.arrival { width:64vw; }
  .kids-curb { right:1%; gap:1.4vw; bottom:20%; }
  .kid { width:10.5vw; min-width:44px; }
  .kids-sidewalk { right:2%; gap:1vw; bottom:18%; }
}

/* ---------- reveal: board grid ---------- */
.board-wrap { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; padding:14px; padding-top:20px; }
.dig-grid { display:grid; grid-template-columns:repeat(var(--cols,4),1fr); gap:clamp(6px,1.6vw,14px); width:100%; max-width:560px; max-height:100%; }
@media (min-aspect-ratio:5/4) { .dig-grid { grid-template-columns:repeat(var(--cols-wide,var(--cols,4)),1fr); max-width:760px; } }
.dig-cell { position:relative; aspect-ratio:6/5; border-radius:16px; background:rgba(255,251,245,.28); transition:transform .12s; contain:layout paint; will-change:transform; min-width:44px; min-height:44px; }
.dig-cell:active { transform:scale(.94); }
.dig-cell .art { position:absolute; inset:4%; pointer-events:none; }
.dig-cell .art svg, .dig-cell .art img { width:100%; height:100%; object-fit:cover; border-radius:12px; }
.dig-cell .num { position:absolute; top:4px; left:8px; font-weight:800; font-size:.78rem; color:var(--soft-navy); opacity:.85; pointer-events:none; }
.dig-cell.dug { background:transparent; }
.dig-cell .found { position:absolute; inset:2%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; background:var(--cream); border:2px solid var(--found-border,#D9B25F); border-radius:14px; box-shadow:0 3px 10px rgba(30,42,74,.22); animation:found-pop .4s cubic-bezier(.34,1.56,.64,1); pointer-events:none; overflow:hidden; padding:2px; }
.dig-cell .found .fimg { font-size:clamp(1rem,4.2vw,1.7rem); line-height:1; }
.dig-cell .found img.fimg { width:56%; height:56%; object-fit:cover; border-radius:8px; font-size:0; }
.dig-cell .found .flab { font-weight:700; font-size:clamp(.5rem,1.9vw,.72rem); color:var(--navy); max-width:96%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@keyframes found-pop { 0%{transform:scale(.3); opacity:0} 100%{transform:scale(1); opacity:1} }
.dig-cell.digging .art { animation:cell-shake .35s ease-in-out; }
@keyframes cell-shake { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-7deg)} 75%{transform:rotate(7deg)} }
.cell-burst { position:absolute; width:8px; height:8px; border-radius:50%; background:var(--burst-c,#E8C983); pointer-events:none; z-index:20; }

/* denser grids: hide the tiny cell numbers on narrow screens */
@media (max-width:430px) { .dig-grid[style*="--cols:5"] .num, .dig-grid.dense .num { display:none; } }

/* corner encouragement peek */
.peek { position:absolute; left:-4px; bottom:-12px; width:clamp(90px,15vw,150px); aspect-ratio:1; z-index:8; transform:translateY(105%); transition:transform .5s cubic-bezier(.34,1.56,.64,1); pointer-events:none; }
.peek.show { transform:translateY(12%); }
.peek svg, .peek img { width:100%; height:100%; object-fit:contain; }
.peek .bubble { position:absolute; left:64%; top:-10%; width:max-content; max-width:52vw; font-size:.88rem; }

/* surprise celebration stage */
.surprise-stage { position:absolute; inset:0; z-index:52; display:flex; align-items:center; justify-content:center; background:rgba(30,42,74,.35); opacity:0; transition:opacity .4s; }
.surprise-stage.show { opacity:1; }
.surprise-holder { width:min(300px,64vw); aspect-ratio:1; transform:translateY(60vh) scale(.6); transition:transform .8s cubic-bezier(.4,.1,.3,1.2); }
.surprise-stage.show .surprise-holder { transform:none; }
.surprise-holder.shake { animation:surprise-shake .5s ease-in-out 2; }
@keyframes surprise-shake { 0%,100%{rotate:0deg} 25%{rotate:-4deg} 75%{rotate:4deg} }
.surprise-holder svg, .surprise-holder img { width:100%; height:100%; object-fit:contain; border-radius:22px; }
.gold-ray { position:absolute; left:50%; top:50%; width:6px; height:120px; background:linear-gradient(180deg,#FFF7DC,transparent); transform-origin:top center; pointer-events:none; animation:ray-spin 2.4s linear infinite; opacity:.85; }
@keyframes ray-spin { to { transform:rotate(360deg); } }

/* generic scene prop holder */
.scenery .prop { position:absolute; z-index:2; pointer-events:none; }
.scenery .prop svg, .scenery .prop img { width:100%; height:100%; }