/* =========================================================
   SKYWARD EXPRESS — Prototype v1
   All art is procedural CSS. No images, no canvas.
   ========================================================= */

:root{
  --navy:#16213e;
  --navy-deep:#0d1530;
  --ink:#22314f;
  --sun:#ffd166;
  --cyan:#7ef2ff;
  --pink:#ff6b8d;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }

body{
  background:linear-gradient(180deg,#6ec9f2 0%, #9adcf7 42%, #cfeffd 68%, #ffe9c4 100%);
  overflow:hidden;
  font-family:'Nunito', system-ui, sans-serif;
  user-select:none;
  -webkit-user-select:none;
}

/* ---------- STAGE (fills the viewport — logical size tracks the window) ---------- */
#stage{
  position:fixed; left:0; top:0;
  width:100vw; height:100vh;
  overflow:hidden;
  background:linear-gradient(180deg,#6ec9f2 0%, #9adcf7 42%, #cfeffd 68%, #ffe9c4 100%);
}

/* ---------- SKY ---------- */
#sky{ position:absolute; inset:0; z-index:0; }
#sun{
  position:absolute; top:56px; right:190px; width:108px; height:108px; border-radius:50%;
  background:radial-gradient(circle at 36% 34%, #fff8d2, #ffe066 55%, #ffc53f);
  box-shadow:0 0 60px 22px rgba(255,214,102,.45);
  animation:sunPulse 5s ease-in-out infinite;
}
@keyframes sunPulse{ 0%,100%{ box-shadow:0 0 55px 18px rgba(255,214,102,.4);} 50%{ box-shadow:0 0 80px 30px rgba(255,214,102,.55);} }

.cloud{
  position:absolute; left:0; width:150px; height:44px;
  background:#fff; border-radius:40px; opacity:.92;
  filter:drop-shadow(0 6px 8px rgba(80,120,200,.18));
  animation:drift linear infinite;
}
.cloud::before, .cloud::after{
  content:''; position:absolute; background:#fff; border-radius:50%;
}
.cloud::before{ width:62px; height:62px; top:-26px; left:22px; }
.cloud::after { width:44px; height:44px; top:-16px; right:26px; }
@keyframes drift{ from{ transform:translateX(-280px);} to{ transform:translateX(calc(100vw + 280px));} }

/* ---------- LAYERS ---------- */
.layer{ position:absolute; inset:0; will-change:transform; }
#farLayer{ z-index:1; } #midLayer{ z-index:2; } #world{ z-index:3; }

.fbld{ position:absolute; border-radius:4px 4px 0 0; opacity:.9; }
.mbld{
  position:absolute; border-radius:6px 6px 0 0; opacity:.88;
  background-image:radial-gradient(rgba(255,255,255,.55) 1.2px, transparent 1.7px);
  background-size:13px 17px;
}

/* ---------- ROAD & SIDEWALK ---------- */
#walk{
  position:absolute; left:-40px; right:-40px; top:calc(var(--h,720px) - 122px); height:26px; z-index:4;
  background:linear-gradient(#eef2f9, #c9d2e2);
  box-shadow:inset 0 -5px 0 #a9b4ca;
}
#walk::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg, transparent 0 60px, rgba(90,105,140,.35) 60px 63px);
  background-position-x:var(--wshift,0px);
}
#road{
  position:absolute; left:-40px; right:-40px; top:calc(var(--h,720px) - 96px); height:96px; z-index:4;
  background:linear-gradient(#4a5369, #39415a 30%, #2f3650);
}
#road::before{ content:''; position:absolute; left:0; right:0; top:0; height:5px; background:#20263c; }
#road::after{
  content:''; position:absolute; left:0; right:0; top:46px; height:8px; opacity:.95;
  background:repeating-linear-gradient(90deg, var(--sun) 0 46px, transparent 46px 96px);
  background-position-x:var(--rshift,0px);
  border-radius:4px;
}

/* =========================================================
   CITY PIECES (foreground world)
   ========================================================= */
.bld{
  position:absolute; border-radius:8px 8px 0 0;
  background-color:var(--c,#ff9aa8);
  background-image:linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,0) 26%, rgba(20,30,60,.2));
  box-shadow:inset -12px 0 18px rgba(20,30,60,.18), inset 6px 0 12px rgba(255,255,255,.22);
}
.bld::before{ /* roof cap */
  content:''; position:absolute; top:-10px; left:-6px; right:-6px; height:13px;
  background:var(--roof,#d45d74); border-radius:7px;
  box-shadow:0 3px 0 rgba(20,30,60,.18);
}
.bld .win{
  position:absolute; inset:18px 12px 52px;
  background-image:
    repeating-linear-gradient(90deg, var(--c) 0 10px, transparent 10px 24px),
    repeating-linear-gradient(0deg, var(--glass,rgba(31,58,92,.38)) 0 14px, transparent 14px 26px);
}
.bld .door{
  position:absolute; bottom:0; left:50%; width:34px; height:44px; margin-left:-17px;
  background:linear-gradient(#3c4c7c,#2c3a63); border-radius:9px 9px 0 0;
  box-shadow:inset 0 4px 0 rgba(255,255,255,.15);
}
.bld .awning{
  position:absolute; bottom:46px; left:10px; right:10px; height:17px;
  border-radius:7px 7px 0 0;
  background:repeating-linear-gradient(90deg,#fff 0 14px, var(--aw,#ff6b6b) 14px 28px);
  box-shadow:0 4px 0 rgba(20,30,60,.18);
}
.bld .sign{
  position:absolute; writing-mode:vertical-rl; letter-spacing:3px;
  font-family:'Bungee'; font-size:12px; padding:6px 4px;
  background:var(--ink); color:var(--sc,var(--cyan)); border-radius:5px;
  box-shadow:0 0 14px var(--sc,var(--cyan)), inset 0 0 8px rgba(255,255,255,.12);
  animation:neon 4.5s infinite;
}
.sign.s-l{ left:-15px; } .sign.s-r{ right:-15px; }
@keyframes neon{ 0%,86%,92%,100%{opacity:1;} 89%{opacity:.45;} }

/* depot / loading dock */
.bld.depot .win{ display:none; }
.bld.depot .roll{
  position:absolute; bottom:0; left:14%; width:44%; height:72%;
  background:repeating-linear-gradient(0deg,#7c8aa6 0 10px, #66748f 10px 20px);
  border-radius:8px 8px 0 0; box-shadow:inset 0 0 0 3px #4c5872;
}
.bld.depot .docksign{
  position:absolute; top:10px; left:50%; transform:translateX(-50%);
  font-family:'Bungee'; font-size:13px; letter-spacing:2px; color:var(--ink);
  background:var(--sun); padding:3px 12px; border-radius:6px;
  box-shadow:0 3px 0 rgba(20,30,60,.25);
}
.crate{
  position:absolute; width:30px; height:30px; border-radius:4px;
  background:linear-gradient(#e0aa74,#c98d5a);
  box-shadow:inset 0 0 0 2px rgba(110,66,28,.4);
}
.crate::after{ content:''; position:absolute; left:13px; top:0; width:4px; height:100%; background:#f6e2b3; }

.balcony{
  position:absolute; height:10px; background:#eef2fb; border-radius:5px;
  box-shadow:0 4px 0 rgba(20,30,60,.25);
}
.balcony::before{ /* railing */
  content:''; position:absolute; left:2px; right:2px; bottom:100%; height:20px;
  border:3px solid #c3cede; border-bottom:none; border-radius:6px 6px 0 0;
  background:repeating-linear-gradient(90deg,#c3cede 0 3px, transparent 3px 11px);
}

/* ---- street furniture ---- */
.tree{ position:absolute; width:74px; height:178px; }
.tree .trunk{
  position:absolute; bottom:0; left:50%; width:13px; height:76px; margin-left:-6px;
  background:linear-gradient(#8a5a3b,#6e4229); border-radius:6px;
}
.tree .canopy{
  position:absolute; top:0; left:0; width:74px; height:120px;
  background:radial-gradient(circle at 32% 32%, #8ce2a0, #3fae6a 72%);
  border-radius:48% 52% 55% 45% / 60% 55% 45% 40%;
  box-shadow:inset -9px -11px 0 rgba(20,60,40,.18);
  transform-origin:50% 95%;
  animation:sway 4.5s ease-in-out infinite alternate;
}
@keyframes sway{ from{ transform:rotate(-2deg);} to{ transform:rotate(2.4deg);} }

.pole{ position:absolute; width:10px; background:linear-gradient(#5b6478,#3e4557); border-radius:4px; }
.pole::before{ content:''; position:absolute; top:16px; left:-18px; width:46px; height:6px; background:#4a5266; border-radius:3px; }
.pole::after{
  content:''; position:absolute; top:10px; left:-14px; width:38px; height:6px;
  background:
    radial-gradient(circle 3px at 4px 3px, #9fb2d8 90%, transparent),
    radial-gradient(circle 3px at 19px 3px, #9fb2d8 90%, transparent),
    radial-gradient(circle 3px at 34px 3px, #9fb2d8 90%, transparent);
}
.wire{
  position:absolute; height:34px; border-bottom:3px solid #2b3350;
  border-radius:0 0 50% 50% / 0 0 100% 100%;
}

.tl{ position:absolute; width:16px; background:linear-gradient(#5b6478,#3e4557); border-radius:4px; }
.tl .head{
  position:absolute; top:0; left:-7px; width:30px; height:54px;
  background:#252c44; border-radius:9px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  box-shadow:0 3px 0 rgba(20,30,60,.3);
}
.tl .head i{ width:12px; height:12px; border-radius:50%; background:#39415e; }
.tl .head i:nth-child(1){ animation:tlR 6s steps(1) infinite; }
.tl .head i:nth-child(2){ animation:tlY 6s steps(1) infinite; }
.tl .head i:nth-child(3){ animation:tlG 6s steps(1) infinite; }
@keyframes tlR{ 0%,44%{ background:#ff5d5d; box-shadow:0 0 9px #ff5d5d;} 45%,100%{ background:#39415e; box-shadow:none;} }
@keyframes tlY{ 0%,44%{ background:#39415e;} 45%,58%{ background:#ffd166; box-shadow:0 0 9px #ffd166;} 59%,100%{ background:#39415e;} }
@keyframes tlG{ 0%,58%{ background:#39415e;} 59%,100%{ background:#5be07a; box-shadow:0 0 9px #5be07a;} }

.barrier{
  position:absolute; width:48px; height:26px; border-radius:5px;
  background:repeating-linear-gradient(45deg,#ff9f43 0 10px,#fff 10px 20px);
  box-shadow:inset 0 0 0 3px #e0812f, 0 4px 0 rgba(20,30,60,.2);
}
.hydrant{
  position:absolute; width:20px; height:30px; background:#ff6b6b; border-radius:7px 7px 4px 4px;
  box-shadow:inset 0 -6px 0 #d94f4f;
}
.hydrant::before{ content:''; position:absolute; top:-6px; left:4px; width:12px; height:8px; background:#ff6b6b; border-radius:5px 5px 0 0; }
.bench{ position:absolute; width:56px; height:18px; background:#b98d5a; border-radius:4px; box-shadow:0 10px 0 -6px #8a5a3b; }

/* ---- rooftop props ---- */
.ac{
  position:absolute; width:38px; height:26px; background:#cfd6e4; border-radius:5px;
  box-shadow:inset 0 -7px 0 #aab3c8, 0 3px 0 rgba(20,30,60,.2);
  background-image:repeating-linear-gradient(0deg, rgba(90,105,140,.35) 0 2px, transparent 2px 6px);
}
.ac i{
  position:absolute; right:3px; top:5px; width:14px; height:14px; border-radius:50%;
  background:conic-gradient(#7c8aa6 0 25%, #e8edf5 0 50%, #7c8aa6 0 75%, #e8edf5 0);
  animation:spinFan .9s linear infinite;
}
@keyframes spinFan{ to{ transform:rotate(360deg);} }

.tank{ position:absolute; width:58px; height:84px; }
.tank .t-body{
  position:absolute; top:16px; left:4px; right:4px; height:48px; border-radius:8px;
  background:linear-gradient(90deg,#c98d5a,#e0aa74 35%,#b97f4e);
  box-shadow:inset 0 -8px 0 rgba(90,50,20,.25);
  background-image:repeating-linear-gradient(0deg, transparent 0 12px, rgba(90,50,20,.35) 12px 14px);
}
.tank .t-top{
  position:absolute; top:2px; left:12px; width:0; height:0;
  border-left:17px solid transparent; border-right:17px solid transparent; border-bottom:15px solid #8a5a3b;
}
.tank::before, .tank::after{
  content:''; position:absolute; bottom:0; width:5px; height:22px; background:#6e4229; border-radius:2px;
}
.tank::before{ left:9px; transform:rotate(8deg);} .tank::after{ right:9px; transform:rotate(-8deg);}

.ant{ position:absolute; width:14px; background:linear-gradient(#9aa7bd,#67748c); border-radius:3px; }
.ant::before, .ant::after{ content:''; position:absolute; left:-8px; width:30px; height:3px; background:#7c8aa6; border-radius:2px; }
.ant::before{ top:16px; } .ant::after{ top:36px; width:22px; left:-4px; }
.ant i{
  position:absolute; top:-6px; left:3px; width:8px; height:8px; border-radius:50%;
  background:#ff5d5d; animation:blinkAnt 1.2s infinite;
}
@keyframes blinkAnt{ 0%,55%{ opacity:1; box-shadow:0 0 8px #ff5d5d;} 60%,100%{ opacity:.15; box-shadow:none;} }

.dish{ position:absolute; width:32px; height:28px; }
.dish::before{
  content:''; position:absolute; left:0; top:0; width:26px; height:22px;
  background:linear-gradient(135deg,#fff,#c3cede); border-radius:50% 50% 46% 54% / 60% 60% 40% 40%;
  transform:rotate(-24deg); box-shadow:0 3px 0 rgba(20,30,60,.18);
}
.dish::after{ content:''; position:absolute; left:12px; top:8px; width:16px; height:3px; background:#7c8aa6; transform:rotate(-24deg); }

.rboard{ position:absolute; width:132px; height:92px; }
.rboard .panel{
  position:absolute; top:0; width:100%; height:60px;
  background:#10203f; border:4px solid #dfe7f5; border-radius:7px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-family:'Bungee'; font-size:11px; line-height:1.25; color:var(--sun);
  text-shadow:0 0 10px rgba(255,183,3,.9);
  box-shadow:0 0 20px rgba(255,209,102,.35);
  padding:4px;
}
.rboard::before, .rboard::after{
  content:''; position:absolute; bottom:0; width:6px; height:32px; background:#67748c; border-radius:3px;
}
.rboard::before{ left:22px; } .rboard::after{ right:22px; }

/* ---- crane ---- */
.craneT{
  position:absolute; width:20px; border-radius:3px;
  background:repeating-linear-gradient(45deg,#ffbf3f 0 8px,#e8a417 8px 16px);
  box-shadow:inset 0 0 0 2px #b97f0e;
}
.craneT .beacon{
  position:absolute; top:-8px; left:5px; width:9px; height:9px; border-radius:50%;
  background:#ff5d5d; animation:blinkAnt 1s infinite;
}
.craneJ{
  position:absolute; height:14px; border-radius:3px;
  background:repeating-linear-gradient(90deg,#ffbf3f 0 10px,#e8a417 10px 20px);
  box-shadow:inset 0 0 0 2px #b97f0e;
}
.craneJ .cable{ position:absolute; right:30px; top:100%; width:2px; height:54px; background:#39415a; }
.craneJ .loadbox{
  position:absolute; right:19px; top:calc(100% + 54px); width:24px; height:22px;
  background:linear-gradient(#e0aa74,#c98d5a); border-radius:3px;
  box-shadow:inset 0 0 0 2px rgba(110,66,28,.4);
  transform-origin:12px -54px;
  animation:crateSway 3.4s ease-in-out infinite alternate;
}
@keyframes crateSway{ from{ transform:rotate(-5deg);} to{ transform:rotate(5deg);} }

/* =========================================================
   CUSTOMERS
   ========================================================= */
.customer{ position:absolute; width:32px; height:48px; z-index:12; }
.cwrap{ position:absolute; inset:0; animation:cbob 1.7s ease-in-out infinite; }
@keyframes cbob{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-2px);} }
.c-head{ position:absolute; top:0; left:8px; width:16px; height:16px; border-radius:50%; background:#ffd9b6; }
.c-head::before{ content:''; position:absolute; top:-2px; left:-1px; width:18px; height:9px; border-radius:9px 9px 0 0; background:var(--hair,#5b3a29); }
.c-torso{ position:absolute; top:15px; left:5px; width:22px; height:25px; border-radius:9px 9px 5px 5px; background:var(--shirt,#ff6b6b); }
.c-torso::after{ content:''; position:absolute; bottom:-7px; left:3px; width:6px; height:8px; background:#39415a; box-shadow:10px 0 0 #39415a; border-radius:2px; }
.c-arm{
  position:absolute; top:16px; right:0; width:6px; height:16px; border-radius:4px;
  background:var(--shirt,#ff6b6b); transform-origin:top center;
  animation:wave 1.1s ease-in-out infinite;
}
@keyframes wave{ 0%,100%{ transform:rotate(-120deg);} 50%{ transform:rotate(-160deg);} }
.bubble{
  position:absolute; top:-30px; left:50%; margin-left:-17px; width:34px; height:27px;
  background:#fff; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-size:15px; box-shadow:0 4px 10px rgba(20,40,90,.28);
  animation:bobble 1.2s ease-in-out infinite;
}
.bubble::after{
  content:''; position:absolute; bottom:-6px; left:50%; margin-left:-5px;
  border:6px solid transparent; border-top-color:#fff; border-bottom:0;
}
@keyframes bobble{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
.ring{
  position:absolute; bottom:-5px; left:50%; width:58px; height:17px; margin-left:-29px;
  border:2.5px dashed var(--sun); border-radius:50%; opacity:0; transition:opacity .15s;
}
.customer.targeted .ring{ opacity:.95; animation:ringPulse .9s ease-in-out infinite; }
@keyframes ringPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.18);} }
.customer.happy .cwrap{ animation:cjump .5s cubic-bezier(.3,1.7,.6,1) 3; }
@keyframes cjump{ 0%,100%{ transform:translateY(0);} 45%{ transform:translateY(-17px);} }
.customer.happy .bubble{ opacity:0; transition:opacity .2s; }
.customer.happy .c-arm{ animation:cheer .4s ease-in-out 4; }
@keyframes cheer{ 0%,100%{ transform:rotate(-120deg);} 50%{ transform:rotate(-200deg);} }
.customer.c1{ --shirt:#ff6b6b; --hair:#5b3a29; }
.customer.c2{ --shirt:#4cc9f0; --hair:#2b2b3a; }
.customer.c3{ --shirt:#8fd694; --hair:#8a4f21; }
.customer.c4{ --shirt:#b9a4f6; --hair:#e8b23c; }
.customer.c5{ --shirt:#ffb35c; --hair:#7a3b52; }

/* =========================================================
   DRONE
   ========================================================= */
#drone{
  position:absolute; z-index:30; width:0; height:0; will-change:transform;
  --prop:.08s; --glowC:rgba(80,220,255,.85); --glowS:1; --accent:#ff8b5e;
}
#drone.lvl2{ --prop:.06s; --glowC:rgba(64,240,220,.95); --glowS:1.3; --accent:#22d3ee; }
#drone.lvl3{ --prop:.04s; --glowC:rgba(255,200,80,1);    --glowS:1.55; --accent:#ffd166; }
#drone .rig{ position:absolute; left:-60px; top:-60px; width:120px; height:120px; filter: drop-shadow(0 10px 18px rgba(0,0,0,0.5)); }
#drone.lvl2 .rig{ transform:scale(1.08); }
#drone.lvl3 .rig{ transform:scale(1.16); }

.drone-body {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
}

.propeller {
  position: absolute;
  width: 46%; height: 46%;
  pointer-events: none;
  z-index: 3;
  transform-origin: 50% 50%;
}

.propeller img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.prop-top-left {
  top: 29.8%; left: 7.0%;
  animation: spinPropellerCW var(--prop) linear infinite;
}

.prop-top-right {
  top: 29.8%; left: 93.0%;
  animation: spinPropellerCCW var(--prop) linear infinite;
}

.prop-bottom-left {
  top: 66.4%; left: 3.5%;
  animation: spinPropellerCCW var(--prop) linear infinite;
}

.prop-bottom-right {
  top: 66.4%; left: 96.5%;
  animation: spinPropellerCW var(--prop) linear infinite;
}

@keyframes spinPropellerCW {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes spinPropellerCCW {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(-360deg); }
}

.nav-light {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  z-index: 4; pointer-events: none; transform: translate(-50%, -50%);
}
.light-front-left {
  top: 66.4%; left: 3.5%; background: #ef4444; box-shadow: 0 0 8px #ef4444;
  animation: blinkNav 1s infinite alternate;
}
.light-front-right {
  top: 66.4%; left: 96.5%; background: #ef4444; box-shadow: 0 0 8px #ef4444;
  animation: blinkNav 1s infinite alternate 0.5s;
}
@keyframes blinkNav {
  0% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

.strap{ position:absolute; left:59px; top:78px; width:2px; height:8px; background:#7c8aa6; z-index:1; }
.cargo{
  position:absolute; left:44px; top:84px; width:32px; height:32px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
  z-index:1;
}

#drone.hit .rig{ animation:hitBlink .3s steps(2,end) 7; }
@keyframes hitBlink{ 0%,100%{ opacity:1;} 50%{ opacity:.15;} }

#dshadow{
  position:absolute; z-index:5; width:68px; height:14px; margin-left:-34px; border-radius:50%;
  background:radial-gradient(closest-side, rgba(15,25,50,.55), transparent 75%);
}

/* =========================================================
   PACKAGES & FX
   ========================================================= */
.pkg{
  position:absolute; width:32px; height:32px; z-index:14;
  background: url('simple/assets/box.png') center/contain no-repeat;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.pkg.landed{ animation:pkgFade .55s .12s forwards; }
@keyframes pkgFade{
  0%{ transform:scale(1,1); opacity:1; }
  30%{ transform:scale(1.25,.7); opacity:1; }
  100%{ transform:scale(.4,.4); opacity:0; }
}

.pop{
  position:absolute; z-index:40; pointer-events:none;
  font-family:'Bungee'; font-size:23px; color:var(--sun);
  text-shadow:0 2px 0 #b45309, 0 0 16px rgba(255,209,102,.6);
  animation:rise .95s ease-out forwards;
}
.pop.miss{ color:#9aa7bd; font-size:13px; text-shadow:0 2px 0 rgba(30,40,70,.4); }
.pop.heart{ color:var(--pink); font-size:19px; text-shadow:0 0 10px rgba(255,107,141,.7); }
@keyframes rise{
  0%{ transform:translateY(0) scale(.6); opacity:0; }
  15%{ transform:translateY(-7px) scale(1.18); opacity:1; }
  100%{ transform:translateY(-58px) scale(1); opacity:0; }
}
.cf{ position:absolute; z-index:38; border-radius:2px; pointer-events:none; }
.sp{ position:absolute; z-index:38; width:6px; height:6px; border-radius:50%; pointer-events:none; }
.du{ position:absolute; z-index:37; border-radius:50%; background:rgba(165,175,195,.75); pointer-events:none; }
.ep{ position:absolute; z-index:29; border-radius:50%; pointer-events:none; }

#flash{ position:absolute; inset:0; z-index:45; pointer-events:none; background:#ff5d5d; opacity:0; }
#flash.on{ animation:flashHit .3s ease-out; }
@keyframes flashHit{ 0%{ opacity:.35;} 100%{ opacity:0;} }

#cam.shake{ animation:shakeCam .35s linear; }
@keyframes shakeCam{
  0%,100%{ transform:translate(0,0);}
  20%{ transform:translate(-7px,4px);} 40%{ transform:translate(6px,-5px);}
  60%{ transform:translate(-4px,-3px);} 80%{ transform:translate(3px,4px);}
}

/* =========================================================
   HUD
   ========================================================= */
#hud{
  position:absolute; top:14px; left:16px; right:16px; z-index:50;
  display:flex; justify-content:space-between; align-items:flex-start;
  pointer-events:none;
}
.hud-left{ display:flex; gap:10px; }
.chip{
  display:flex; align-items:center; gap:8px; padding:8px 14px;
  background:rgba(16,26,52,.86); border:2px solid rgba(255,255,255,.09); border-radius:14px;
  box-shadow:0 4px 0 rgba(8,14,30,.55), 0 10px 20px rgba(10,20,50,.35);
}
.chip-label{ font-weight:800; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#8fa3c8; }
#scoreVal{
  font-family:'Bungee'; font-size:22px; color:var(--sun); min-width:62px; text-align:right;
  text-shadow:0 0 12px rgba(255,209,102,.45);
}
.chip-goal{ font-weight:700; font-size:11px; color:#67789c; }
#hearts{ display:flex; gap:3px; align-items:center; }
.heart{ font-size:17px; line-height:1; color:#ff4d4d; filter:drop-shadow(0 0 5px rgba(255,70,70,.7)); transition:.25s; }
.heart.lost{ filter:grayscale(1) brightness(.5); transform:scale(.7); opacity:.45; }
#levelVal{ font-family:'Bungee'; font-size:16px; color:var(--cyan); }
#levelVal.lv2{ color:#40f0dc; } #levelVal.lv3{ color:#ffd166; text-shadow:0 0 10px rgba(255,209,102,.8); }

.hud-right{ display:flex; gap:10px; pointer-events:auto; }
.icon-btn{
  width:46px; height:46px; border-radius:14px; cursor:pointer;
  border:2px solid rgba(255,255,255,.12); background:rgba(16,26,52,.86); color:#dfe7f5;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 0 rgba(8,14,30,.55);
  transition:transform .12s, box-shadow .12s;
}
.icon-btn:hover{ transform:translateY(-2px); box-shadow:0 6px 0 rgba(8,14,30,.55); }
.icon-btn:active{ transform:translateY(2px); box-shadow:0 2px 0 rgba(8,14,30,.55); }
#btnSound .mx{ display:none; }
#btnSound.muted .wv{ display:none; }
#btnSound.muted .mx{ display:block; }

#legend{
  position:absolute; bottom:12px; left:50%; z-index:50;
  transform:translateX(-50%) translateY(14px);
  display:flex; align-items:center; gap:13px; padding:10px 20px;
  background:rgba(16,26,52,.8); border:2px solid rgba(255,255,255,.09); border-radius:16px;
  box-shadow:0 8px 20px rgba(10,20,50,.35);
  opacity:0; pointer-events:none;
  transition:opacity .35s, transform .35s;
}
#legend.show{
  transform:translateX(-50%) translateY(0);
  opacity:1; pointer-events:auto;
}
kbd{
  display:inline-block; min-width:16px; padding:5px 8px; text-align:center;
  font:800 12px 'Nunito'; color:var(--ink); background:#fff; border-radius:7px;
  box-shadow:0 3px 0 #b8c4da;
}
kbd.space{ padding:5px 28px; }
.kcol{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.krow{ display:flex; gap:3px; }
.leg-label{ font-weight:800; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:#8fa3c8; margin-right:4px; }

/* =========================================================
   TOAST & SCREENS
   ========================================================= */
#toast{
  position:absolute; top:118px; left:50%; z-index:60; text-align:center;
  transform:translateX(-50%) scale(.6); opacity:0; pointer-events:none;
}
#toast.show{ animation:toastIn 2.1s cubic-bezier(.2,1.4,.4,1) forwards; }
#toast h2{
  font-family:'Bungee'; font-size:42px; color:#fff; letter-spacing:.02em;
  text-shadow:0 3px 0 var(--ink), 0 0 26px var(--tc,var(--cyan));
}
#toast p{ font-weight:800; font-size:15px; letter-spacing:.22em; text-transform:uppercase; color:var(--sun); }
@keyframes toastIn{
  0%{ opacity:0; transform:translateX(-50%) scale(.5);}
  12%{ opacity:1; transform:translateX(-50%) scale(1.07);}
  18%{ transform:translateX(-50%) scale(1);}
  80%{ opacity:1;}
  100%{ opacity:0; transform:translateX(-50%) translateY(-18px) scale(.96);}
}

.screen{
  position:absolute; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,16,34,.5); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none; transition:opacity .3s;
}
.screen.on{ opacity:1; pointer-events:auto; }

.panel{
  background:linear-gradient(180deg,#ffffff,#eef3fb);
  border:3px solid var(--ink); border-radius:22px;
  padding:30px 38px; text-align:center; max-width:560px;
  box-shadow:0 12px 0 rgba(15,25,50,.25), 0 30px 60px rgba(10,20,50,.45);
  animation:panelIn .45s cubic-bezier(.2,1.5,.4,1);
}
.panel.small{ padding:26px 34px; }
@keyframes panelIn{ from{ transform:scale(.7) translateY(30px); opacity:0;} }

.panel h2, .pTitle{ font-family:'Bungee'; font-size:34px; color:var(--ink); }
.pSub{ font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:#67789c; margin:6px 0 4px; font-size:13px; }
.panel p{ font-weight:700; color:#46557a; line-height:1.5; }
.panel p b{ color:#d97706; }

.btn{
  font-family:'Bungee'; font-size:19px; letter-spacing:.04em; color:var(--ink);
  background:var(--sun); border:3px solid var(--ink); border-radius:14px;
  padding:12px 30px; margin-top:16px; cursor:pointer;
  box-shadow:0 6px 0 #b98d1a;
  transition:transform .1s, box-shadow .1s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 8px 0 #b98d1a; }
.btn:active{ transform:translateY(3px); box-shadow:0 2px 0 #b98d1a; }

.stats{ display:flex; gap:12px; justify-content:center; margin:18px 0 4px; }
.stat{
  background:var(--ink); color:#fff; border-radius:12px; padding:10px 16px;
  font:800 11px 'Nunito'; letter-spacing:.1em;
}
.stat b{ display:block; font-family:'Bungee'; font-size:21px; color:var(--sun); margin-bottom:2px; }

#endScreen.winTheme .pTitle{ color:#b98d1a; text-shadow:2px 2px 0 #ffe9a8; font-size:40px; }
#endScreen.overTheme .pTitle{ color:#d94f4f; text-shadow:2px 2px 0 #ffd3d3; }

.rain{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.rain i{
  position:absolute; top:-24px; width:10px; height:14px; border-radius:2px;
  animation:fall linear forwards;
}
@keyframes fall{ to{ transform:translateY(100vh) rotate(560deg);} }

/* ---- start screen layout ---- */
#startScreen .start-wrap{ display:flex; align-items:center; gap:56px; padding:0 30px; }
.logo-block{ text-align:left; transform:rotate(-2deg); }
.badge{
  display:inline-block; font:800 12px 'Nunito'; letter-spacing:.3em; color:#fff;
  background:var(--pink); padding:6px 14px; border-radius:999px;
  box-shadow:0 4px 0 rgba(15,25,50,.3); margin-bottom:14px;
}
.logo{
  font-family:'Bungee'; font-size:74px; line-height:.98; color:#fff;
  text-shadow:
    0 4px 0 var(--ink),
    0 8px 0 rgba(15,25,50,.25),
    0 0 34px rgba(126,242,255,.55);
}
.tag{ margin-top:14px; font-weight:800; font-size:15px; color:#fff; text-shadow:0 2px 0 rgba(15,25,50,.4); }
.brief{ text-align:left; max-width:400px; }
.brief h2{ font-size:22px; margin-bottom:10px; }
.brief p{ font-size:14px; }
.brief-keys{ display:flex; gap:16px; flex-wrap:wrap; margin:14px 0 4px; font:800 12px 'Nunito'; color:#46557a; }
.brief-keys span{ display:flex; align-items:center; gap:6px; }
.brief .btn{ display:block; width:100%; animation:btnPulse 1.6s ease-in-out infinite; }
@keyframes btnPulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.035);} }
.brief .btn:hover{ animation:none; transform:translateY(-2px); }
.brief .btn:active{ transform:translateY(3px); }