@property --ad-top { syntax: '<length>'; inherits: true; initial-value: 0px; }
:root {
  transition: --ad-top .45s cubic-bezier(.22, .8, .24, 1);      /* ads come and go: everything under them glides */
}
:root {
  --swamp: #0e3b3a;
  --lime: #b9f24b;
  --sun: #ffd23f;
  --cherry: #ff4d5e;
  --cream: #fffbe8;
  /* comic / y2k lettering for every bit of text in the game (Bangers from Google Fonts, comic fallbacks offline) */
  --font: "Bangers", "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Comic Neue", cursive, sans-serif;
  --pop: 2px 2px 0 rgba(14,59,58,.85);
  --ad-top: 0px;                       /* height of any ad banner at the top of the screen, set by js/adshift.js */
  --safe-t: calc(env(safe-area-inset-top, 0px) + var(--ad-top, 0px));   /* HUD, hints and popups all hang from this, so they slide down below ads */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  /* glass colours: change these to retint every panel */
  --glass-glow: 110,160,255;          /* the bright band at the top of a panel */
  --glass-body: 16,40,62;             /* the dark, see-through body */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }

html, body {
  margin: 0; height: 100%; overflow: hidden; background: #8fd4fa;
  font-family: var(--font); font-weight: 400; font-synthesis: none; letter-spacing: .05em; color: var(--cream);
  touch-action: none; overscroll-behavior: none;
}
button { font: inherit; letter-spacing: inherit; color: inherit; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- GUI = glassmorphism: frosted glass, sharp square corners. The comic / y2k look is for text only.
   The see-through gradient: a glowing band across the top, a dark body that gets clearer towards the bottom,
   and a soft light reflection in the bottom-left corner. A hairline light edge keeps the corners crisp. ---------- */
.glass {
  border: 0; border-radius: 0; outline: 0;
  background:
    radial-gradient(95% 20% at 50% 12%, rgba(var(--glass-glow), .55), rgba(var(--glass-glow), 0) 72%),
    linear-gradient(to bottom, rgba(var(--glass-glow), .62) 0, rgba(var(--glass-glow), .26) 12%, rgba(var(--glass-glow), 0) 30%),
    radial-gradient(120% 75% at 0% 100%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%),
    linear-gradient(to bottom, rgba(var(--glass-body), .66), rgba(var(--glass-body), .22));
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.20),                 /* hairline edge */
    inset 1px 1px 0 rgba(255,255,255,.38),                 /* lit top / left edge */
    inset -1px -1px 0 rgba(255,255,255,.06),
    0 14px 40px rgba(2,20,40,.34);
}

/* ---------- HUD ---------- */
#hud {
  position: fixed; inset: 0; pointer-events: none;
  padding: calc(10px + var(--safe-t)) calc(12px + var(--safe-r)) 0 calc(12px + var(--safe-l));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px;
}
#hud button { pointer-events: auto; }

#hearts { font-size: 34px; line-height: 1; letter-spacing: 2px; text-shadow: 0 3px 0 rgba(14,59,58,.55); }
#hearts .on { color: var(--cherry); }
#hearts .off { color: rgba(14,59,58,.45); }
#hearts .half-wrapper { position: relative; display: inline-block; color: rgba(14,59,58,.45); }
#hearts .half-wrapper .half-fill { position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--cherry); }

#scoreBox { text-align: center; text-shadow: var(--pop); }
#score { font-size: 42px; line-height: 1; color: var(--cream); }
#lvl { font-size: 16px; letter-spacing: .08em; opacity: .95; margin-top: 2px; }

#tools { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
#coinBox {
  display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px 0 8px;
  background: linear-gradient(to bottom, rgba(var(--glass-glow), .38), rgba(var(--glass-body), .30));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-radius: 0; font-size: 26px; color: var(--sun); text-shadow: var(--pop);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), inset 1px 1px 0 rgba(255,255,255,.34), 0 6px 18px rgba(2,20,40,.24);
}
.coinIcon {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sun);
  border: 3px solid #e0a010; box-shadow: inset 0 0 0 3px #ffe58a;
}

.ibtn {
  width: 40px; height: 40px; border: 0; border-radius: 0; padding: 0; cursor: pointer;
  background: linear-gradient(to bottom, rgba(var(--glass-glow), .38), rgba(var(--glass-body), .30));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  display: grid; place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), inset 1px 1px 0 rgba(255,255,255,.34), 0 6px 18px rgba(2,20,40,.24);
}
.ibtn:active { background: rgba(255,255,255,.28); }
.ibtn i { display: block; position: relative; }
.pauseIcon { width: 14px; height: 16px; border-left: 5px solid var(--cream); border-right: 5px solid var(--cream); }
.noteIcon { width: 8px; height: 17px; background: var(--cream); }
.noteIcon::after { content: ""; position: absolute; left: 8px; top: 3px; width: 8px; height: 12px; border-right: 3px solid var(--cream); }
.ibtn.off .noteIcon::before { content: ""; position: absolute; left: -7px; top: 8px; width: 28px; height: 3px; background: var(--cherry); transform: rotate(-40deg); }
.fullIcon { width: 16px; height: 16px; border: 3px solid var(--cream); }

/* level progress: a slim bar along the bottom edge of the screen */
#progress {
  position: fixed; left: calc(14px + var(--safe-l)); right: calc(14px + var(--safe-r));
  bottom: calc(12px + var(--safe-b)); height: 10px; border-radius: 0;
  background: rgba(14,59,58,.5); pointer-events: none;
}
#bar { position: relative; height: 100%; width: 0; background: var(--lime); border-radius: 0; }
#bar::after {                        /* the little runner marker at the head of the bar */
  content: ""; position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: var(--lime); box-shadow: 0 2px 8px rgba(2,28,34,.45);
}
#progress::after {                   /* finish flag */
  content: ""; position: absolute; right: -2px; top: -13px; width: 10px; height: 9px;
  background: var(--cherry); clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* tutorial card: parked just off the left edge, under the hearts; slides in from the left and back out */
#hint {
  position: fixed; z-index: 3; left: 0; top: calc(var(--safe-t) + 86px);
  width: min(74vw, 320px); padding: 14px 18px 14px calc(16px + var(--safe-l));
  font-size: 21px; line-height: 1.22; letter-spacing: .06em; text-align: left; text-shadow: var(--pop);
  pointer-events: none;
  transform: translateX(-110%);
  transition: transform .4s cubic-bezier(.6, 0, .9, .45);
}
#hint.in { transform: translateX(0); transition: transform .5s cubic-bezier(.2, .9, .25, 1); }

/* respawn pause */
#ready {
  position: fixed; left: 50%; top: 38%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  font-size: 44px; color: var(--sun); text-shadow: 0 4px 0 rgba(14,59,58,.75); animation: pulse .5s ease-in-out infinite;
}
#ready.hidden { display: none; }

/* 3-2-1-GO countdown before every run */
#countdown {
  position: fixed; left: 50%; top: 40%; z-index: 4; pointer-events: none; white-space: nowrap;
  transform: translate(-50%, -50%); font-size: min(34vw, 190px); line-height: 1; color: var(--sun);
  -webkit-text-stroke: 8px var(--swamp); paint-order: stroke fill; text-shadow: 0 6px 0 rgba(14,59,58,.85);
  animation: countPop .95s cubic-bezier(.2, 1.4, .4, 1) both;
}
#countdown.go { color: var(--lime); font-size: min(30vw, 170px); animation-duration: .65s; }
@keyframes countPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } 25% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: .9; transform: translate(-50%, -50%) scale(.92); } }

/* phase banner (meadow -> swamp -> meadow) */
#phase {
  position: fixed; left: 50%; top: 31%; transform: translateX(-50%); z-index: 4; pointer-events: none;
  font-size: 54px; color: var(--sun); text-shadow: 0 4px 0 rgba(14,59,58,.8); white-space: nowrap;
  animation: phaseIn 2.1s ease-out both;
}
@keyframes phaseIn { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 15% { opacity: 1; transform: translateX(-50%) scale(1.1); } 25% { transform: translateX(-50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(-50%) translateY(-18px); } }

/* damage flash */
#flash { position: fixed; inset: 0; pointer-events: none; background: var(--cherry); opacity: 0; }
#flash.go { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .45; } 100% { opacity: 0; } }

/* floating score text (positioned from JS) */
.ft {
  position: fixed; z-index: 5; pointer-events: none; font-size: 32px; color: var(--cream);
  text-shadow: 0 3px 0 rgba(14,59,58,.7); transform: translate(-50%, -50%);
  animation: floatUp .85s ease-out forwards;
}
.ft.gold { color: var(--sun); }
@keyframes floatUp { to { opacity: 0; transform: translate(-50%, -90px) scale(1.2); } }

/* ---------- screens ---------- */
.screen {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(20px + var(--safe-t)) 20px calc(20px + var(--safe-b));
  text-align: center;
}
#title {
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,0.08) 0%, rgba(30,15,55,0.35) 70%, rgba(14,24,64,0.65) 100%);
  justify-content: space-between;
  padding: calc(24px + var(--safe-t)) 24px calc(28px + var(--safe-b));
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}

/* ==========================================================================
   FRUTIGER FLORAL INTRO & SPLASH SCREEN
   ========================================================================== */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, #e2fbe4 38%, #c5e4ff 72%, #7a66bd 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.85s;
  overflow: hidden;
}
.splash-screen.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.splash-aurora {
  position: absolute;
  inset: -20%;
  background: radial-gradient(ellipse at 30% 20%, rgba(185, 255, 102, 0.45) 0%, transparent 60%),
              radial-gradient(ellipse at 75% 65%, rgba(110, 150, 255, 0.40) 0%, transparent 60%),
              radial-gradient(ellipse at 50% 85%, rgba(180, 110, 245, 0.35) 0%, transparent 55%);
  filter: blur(40px);
  animation: auroraDrift 10s ease-in-out infinite alternate;
}
@keyframes auroraDrift {
  0% { transform: scale(1) rotate(0deg); }
  100% { transform: scale(1.12) rotate(6deg); }
}

.splash-floral-accent {
  position: absolute;
  width: min(55vw, 380px);
  height: min(55vw, 380px);
  pointer-events: none;
  opacity: 0.65;
  background-repeat: no-repeat;
  background-size: contain;
}
.splash-floral-accent.top-right {
  top: -20px;
  right: -20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M200,0 Q120,40 100,120 Q90,160 50,180 Q80,120 130,80 Q170,50 200,0 Z" fill="%237cd628" opacity="0.6"/><path d="M180,0 Q130,60 80,100 Q100,60 140,30 Z" fill="%23b8f742" opacity="0.75"/><circle cx="100" cy="120" r="14" fill="%2348a218" opacity="0.5"/><path d="M200,40 Q150,90 120,160 Q145,115 180,75 Z" fill="%23a466db" opacity="0.45"/><circle cx="140" cy="70" r="10" fill="%234b79e4" opacity="0.5"/></svg>');
  transform: rotate(0deg);
}
.splash-floral-accent.bottom-left {
  bottom: -20px;
  left: -20px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M0,200 Q80,160 100,80 Q110,40 150,20 Q120,80 70,120 Q30,150 0,200 Z" fill="%237cd628" opacity="0.6"/><path d="M20,200 Q70,140 120,100 Q100,140 60,170 Z" fill="%23b8f742" opacity="0.75"/><circle cx="100" cy="80" r="14" fill="%2348a218" opacity="0.5"/><path d="M0,160 Q50,110 80,40 Q55,85 20,125 Z" fill="%23a466db" opacity="0.45"/><circle cx="60" cy="130" r="10" fill="%234b79e4" opacity="0.5"/></svg>');
}

.splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.splash-badge {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3.5px;
  color: #3b7428;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(135, 220, 60, 0.45);
  padding: 4px 14px;
  border-radius: 999px;
  box-shadow: 0 4px 15px rgba(60, 140, 40, 0.15);
  animation: pulseBadge 2.4s ease-in-out infinite;
}
@keyframes pulseBadge {
  0%, 100% { transform: scale(1); opacity: 0.92; }
  50% { transform: scale(1.04); opacity: 1; }
}

.splash-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  line-height: 0.88;
  font-family: 'Bangers', cursive, sans-serif;
  filter: drop-shadow(0 10px 24px rgba(35, 65, 30, 0.28));
}
.splash-logo .sp-l1 {
  font-size: min(20vw, 108px);
  color: #bbf73c;
  -webkit-text-stroke: 5px #1a4224;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #13321b, 0 8px 18px rgba(18, 55, 26, 0.45);
}
.splash-logo .sp-l2 {
  font-size: min(22vw, 120px);
  color: #ffde43;
  -webkit-text-stroke: 5px #1a4224;
  paint-order: stroke fill;
  text-shadow: 0 4px 0 #13321b, 0 8px 18px rgba(18, 55, 26, 0.45);
}
.splash-tagline {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #3a4b6e;
  text-transform: uppercase;
  opacity: 0.85;
}

.splash-spinner {
  position: relative;
  width: 52px;
  height: 52px;
  margin-top: 18px;
  animation: spinFlower 4s linear infinite;
}
@keyframes spinFlower {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.sp-petal {
  position: absolute;
  width: 14px;
  height: 26px;
  left: 19px;
  top: 0;
  background: linear-gradient(to bottom, #9bf033, #43b02a);
  border-radius: 50% 50% 40% 40%;
  transform-origin: 7px 26px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.sp-petal.p1 { transform: rotate(0deg); }
.sp-petal.p2 { transform: rotate(72deg); }
.sp-petal.p3 { transform: rotate(144deg); }
.sp-petal.p4 { transform: rotate(216deg); }
.sp-petal.p5 { transform: rotate(288deg); }
.sp-core {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 18px;
  top: 18px;
  background: radial-gradient(circle, #ffe600, #ff9000);
  border-radius: 50%;
  box-shadow: 0 0 10px #ffe600;
}

/* ==========================================================================
   FRUTIGER FLORAL MENU BACKGROUND ACCENTS
   ========================================================================== */
.frutiger-floral-accent {
  position: absolute;
  width: min(44vw, 320px);
  height: min(44vw, 320px);
  pointer-events: none;
  opacity: 0.55;
  background-repeat: no-repeat;
  background-size: contain;
  z-index: 1;
}
.frutiger-floral-accent.top-left {
  top: -15px;
  left: -15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M0,0 Q90,30 110,100 Q120,140 160,160 Q130,105 85,70 Q45,45 0,0 Z" fill="%239bf73e" opacity="0.65"/><path d="M0,40 Q60,70 95,125 Q70,90 35,55 Z" fill="%2345c228" opacity="0.5"/><path d="M40,0 Q80,50 120,70 Q90,40 55,15 Z" fill="%23c4fb5a" opacity="0.8"/><circle cx="110" cy="100" r="10" fill="%23ffe600" opacity="0.75"/><path d="M30,30 Q90,90 140,120" stroke="%237ad824" stroke-width="3" fill="none" opacity="0.6"/></svg>');
}
.frutiger-floral-accent.bottom-right {
  bottom: -15px;
  right: -15px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M200,200 Q110,170 90,100 Q80,60 40,40 Q70,95 115,130 Q155,155 200,200 Z" fill="%238458df" opacity="0.45"/><path d="M200,160 Q140,130 105,75 Q130,110 165,145 Z" fill="%233b82f6" opacity="0.5"/><path d="M160,200 Q120,150 80,130 Q110,160 145,185 Z" fill="%239bf73e" opacity="0.65"/><circle cx="90" cy="100" r="10" fill="%2367e8f9" opacity="0.75"/></svg>');
}
.floral-sparkles-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.7) 100%, transparent),
                    radial-gradient(2px 2px at 40% 70%, rgba(185,255,80,0.8) 100%, transparent),
                    radial-gradient(3px 3px at 75% 25%, rgba(120,225,255,0.75) 100%, transparent),
                    radial-gradient(2px 2px at 85% 65%, rgba(210,140,255,0.75) 100%, transparent);
  animation: sparkleTwinkle 4s ease-in-out infinite alternate;
}
@keyframes sparkleTwinkle {
  0% { opacity: 0.35; transform: scale(0.98); }
  100% { opacity: 0.75; transform: scale(1.02); }
}

/* ==========================================================================
   MINIMALIST CLEAN MENU INTERACTION
   - Froggy Run Logo
   - "Click to start" (PC) / "Tap to start" (Mobile)
   - "Privacy policy" link
   ========================================================================== */
.menu-prompt {
  position: relative;
  z-index: 5;
  margin: auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.prompt-btn {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 999px;
  padding: 16px 42px;
  color: #ffffff;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: min(5.5vw, 24px);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(18, 48, 22, 0.35),
              inset 0 1px 1px rgba(255, 255, 255, 0.8),
              0 0 24px rgba(185, 255, 60, 0.45);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s, background 0.22s;
  animation: promptPulse 2.2s ease-in-out infinite;
}
@keyframes promptPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 8px 32px rgba(18, 48, 22, 0.35), 0 0 20px rgba(185, 255, 60, 0.35);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 12px 38px rgba(18, 48, 22, 0.45), 0 0 34px rgba(185, 255, 60, 0.75);
  }
}
.prompt-btn:hover {
  transform: scale(1.08) translateY(-2px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.16) 100%);
  border-color: #bbf73c;
  box-shadow: 0 14px 44px rgba(18, 48, 22, 0.5), 0 0 40px rgba(185, 255, 60, 0.85);
}
.prompt-btn:active {
  transform: scale(0.97) translateY(1px);
}
.prompt-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
  opacity: 0.4;
  pointer-events: none;
  animation: glowRotate 6s linear infinite;
}
@keyframes glowRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Device-specific prompt text switching */
body.is-pc .prompt-mobile { display: none !important; }
body.is-pc .prompt-pc { display: inline-block !important; }
body.is-mobile .prompt-pc { display: none !important; }
body.is-mobile .prompt-mobile { display: inline-block !important; }

/* Privacy policy button in the bottom menu footer */
.menu-footer-privacy {
  position: relative;
  z-index: 5;
  margin-top: auto;
  padding-bottom: 6px;
}
.privacy-link-btn {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.9);
  padding: 8px 22px;
  border-radius: 999px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: all 0.2s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.privacy-link-btn:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: #bbf73c;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25), 0 0 16px rgba(185, 255, 60, 0.4);
}
.privacy-link-btn:active {
  transform: translateY(1px);
}

/* ==========================================================================
   INTERACTIVE TUTORIAL BANNER & BUTTON GLOW STYLING
   ========================================================================== */
.tut-banner {
  position: fixed;
  top: calc(18px + var(--safe-t));
  left: 50%;
  transform: translateX(calc(-50% + 110vw));      /* parked off the right edge */
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(14, 28, 45, 0.88);
  border: 1.5px solid #bbf73c;
  border-radius: 16px;
  padding: 10px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 25px rgba(187, 247, 60, 0.45);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  pointer-events: none;
  max-width: min(92vw, 480px);
  transition: transform .5s cubic-bezier(.2, 1.1, .3, 1);
  will-change: transform;
}
.tut-banner.in { transform: translateX(-50%); }                                  /* slides in from the right */
.tut-banner.out { transform: translateX(calc(-50% - 110vw)); transition: transform .32s cubic-bezier(.6, 0, .9, .4); }  /* and out to the left */
.tut-banner.snap { transition: none !important; }

/* "Good job!" popup: pink + green, pops in when a tutorial segment is finished */
.tut-good {
  position: fixed; left: 50%; top: 36%; z-index: 60; pointer-events: none;
  opacity: 0; transform: translate(-50%, -50%) scale(.3);
}
.tut-good.show { animation: tgPop 1.5s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes tgPop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(-10deg); }
  16%  { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(2deg); }
  28%  { transform: translate(-50%, -50%) scale(1) rotate(0); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -78%) scale(.9); }
}
.tg-card {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 30px 34px 16px; border-radius: 28px; transform: rotate(-3deg);
  background: linear-gradient(160deg, #ffd9ee 0%, #ff8cc6 48%, #ff5fa2 100%);
  border: 4px solid #3ddc84;
  box-shadow: 0 0 0 4px #0f5a3a, 0 10px 0 4px rgba(15, 90, 58, .6), 0 0 40px rgba(255, 95, 162, .75), 0 0 64px rgba(61, 220, 132, .6);
}
.tg-check {
  position: absolute; top: -26px; left: 50%; translate: -50% 0;
  width: 48px; height: 48px; border-radius: 50%; background: #3ddc84; color: #fff;
  font-size: 30px; line-height: 42px; text-align: center; border: 4px solid #0f5a3a; box-shadow: 0 4px 0 #0f5a3a;
}
.tg-title {
  font-size: min(13vw, 62px); line-height: 1; color: #fff; letter-spacing: .06em; white-space: nowrap;
  -webkit-text-stroke: 7px #0f5a3a; paint-order: stroke fill;
  text-shadow: 0 4px 0 #0f5a3a, 0 0 20px rgba(61, 220, 132, .95);
}
.tg-sub {
  font-size: 20px; color: #0f5a3a; background: #b9f24b; padding: 2px 16px; border-radius: 99px;
  border: 2px solid #0f5a3a; white-space: nowrap;
}
.tg-spark { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .tut-banner, .tut-banner.out { transition: none; }
  .tut-good.show { animation: none; opacity: 1; transform: translate(-50%, -50%); }
}

.tut-icon-box {
  position: relative;
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 12px;
  background: radial-gradient(circle, #254d24, #122818);
  border: 2px solid #bbf73c;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(187, 247, 60, 0.6);
  animation: tutIconPulse 1.8s ease-in-out infinite alternate;
}
@keyframes tutIconPulse {
  0% { transform: scale(1); box-shadow: 0 0 12px rgba(187, 247, 60, 0.5); }
  100% { transform: scale(1.1); box-shadow: 0 0 24px rgba(187, 247, 60, 0.9); }
}
.tut-icon-box img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.tut-key-hint {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: #ffde43;
  color: #122a16;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.tut-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}
.tut-title {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: #bbf73c;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.tut-desc {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #f1f5f9;
  line-height: 1.25;
}

/* Pulsing neon highlight glow on the button currently being taught */
.act-btn.tut-glow-btn {
  animation: tutActionGlow 1.2s ease-in-out infinite alternate !important;
  z-index: 30 !important;
}
@keyframes tutActionGlow {
  0% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(187, 247, 60, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.5);
    border-color: #bbf73c;
  }
  100% {
    transform: scale(1.18);
    box-shadow: 0 0 35px #bbf73c, 0 0 50px rgba(100, 255, 120, 0.9), inset 0 0 20px #bbf73c;
    border-color: #ffffff;
  }
}
#pause, #clear, #over, #howto, #nogl { background: rgba(10,40,48,.28); }
#howto { z-index: 2; }
#levels { z-index: 2; background: rgba(10,40,48,.38); }

.logo { margin-top: 3vh; display: flex; flex-direction: column; align-items: center; line-height: .88; transform: rotate(-4deg); animation: logoDrop .7s cubic-bezier(.3,1.6,.5,1) both; }
.logo span {
  font-size: min(25vw, 140px); color: var(--lime); letter-spacing: .01em;
  -webkit-text-stroke: 6px var(--swamp); paint-order: stroke fill;
  text-shadow: 0 4px 0 var(--swamp), 0 8px 0 var(--swamp), 0 12px 0 rgba(14,59,58,.6);
}
.logo .l2 { color: var(--sun); font-size: min(32vw, 176px); margin-top: 8px; }
@keyframes logoDrop { from { opacity: 0; transform: translateY(-60px) rotate(-12deg); } to { opacity: 1; transform: rotate(-4deg); } }

.tag { font-size: 18px; line-height: 1.2; text-shadow: var(--pop); margin: 0 0 4px; }
.best { font-size: 22px; color: var(--sun); margin: 2px 0 0; min-height: 1.1em; text-shadow: var(--pop); }

/* home menu: a glass panel on the right-hand side, the rest of the screen shows the game */
/* the options sit low in the bottom-right corner and are mostly see-through, so the game shows through */
.menu {
  position: absolute; right: calc(10px + var(--safe-r)); bottom: calc(8px + var(--safe-b)); top: auto; transform: none;
  width: 190px; padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 5px; text-align: left;
  background: linear-gradient(to bottom, rgba(var(--glass-body), .10), rgba(var(--glass-body), .04));
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 1px 1px 0 rgba(255,255,255,.14);
}
.menu .mbtn {
  background: linear-gradient(90deg, rgba(255,255,255,.13), rgba(255,255,255,.015));
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.10), inset 1px 1px 0 rgba(255,255,255,.16);
}
.menu .mbtn:active, .menu .mbtn:hover { background: linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,.06)); }
.menu .mbtn.primary { background: linear-gradient(90deg, rgba(185,242,75,.34), rgba(185,242,75,.04)); }
.menu .mbtn { font-size: 19px; min-height: 34px; padding: 6px 12px; text-align: left; }
.menu .mbtn.primary { font-size: 25px; min-height: 42px; animation: none; }
.menu .best { font-size: 15px; margin: 2px 0 0 2px; }
@media (max-width: 560px) { .how { display: none; } }
@media (max-height: 480px) {
  .menu { width: 150px; gap: 3px; padding: 4px 6px; bottom: calc(4px + var(--safe-b)); }
  .menu .mbtn { font-size: 15px; min-height: 25px; padding: 3px 8px; }
  .menu .mbtn.primary { font-size: 18px; min-height: 30px; }
}
@media (max-width: 480px) and (orientation: portrait) {
  .menu { width: 155px; gap: 4px; padding: 6px; bottom: calc(6px + var(--safe-b)); }
  .menu .mbtn { font-size: 15px; min-height: 26px; padding: 3px 8px; }
  .menu .mbtn.primary { font-size: 18px; min-height: 30px; }
}

/* level select */
.lvlpanel { width: min(94vw, 600px); padding: 16px 18px 14px; gap: 10px; }
.lvlpanel h2 { font-size: 40px; margin: 0; }
#lvlGrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mbtn.lbtn { position: relative; min-height: 64px; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 32px; }
.lbtn .n { line-height: 1; }
.lbtn .st { font-size: 14px; color: var(--cherry); letter-spacing: 1px; line-height: 1; min-height: 14px; }
.lbtn .nw { position: absolute; top: 3px; right: 4px; font-size: 11px; line-height: 1; color: var(--swamp); background: var(--sun); padding: 2px 4px; text-shadow: none; }
.lbtn.next { background: rgba(185,242,75,.46); }
.lbtn.locked { opacity: .42; cursor: default; }
.lbtn.locked:hover, .lbtn.locked:active { background: rgba(255,255,255,.15); transform: none; }
.lbtn .lk { display: block; width: 14px; height: 10px; background: var(--cream); position: relative; margin-top: 9px; }
.lbtn .lk::before { content: ""; position: absolute; left: 2px; top: -8px; width: 10px; height: 8px; border: 3px solid var(--cream); border-bottom: 0; border-radius: 6px 6px 0 0; }
.lvlfoot { display: flex; gap: 8px; }
.lvlfoot .mbtn { flex: 1; width: auto; font-size: 20px; min-height: 38px; padding: 6px 10px; }
@media (max-aspect-ratio: 1/1) { #lvlGrid { grid-template-columns: repeat(4, 1fr); } }
.best:empty { display: none; }

/* menu buttons: flat frosted slabs, square, no borders or bevels */
.mbtn {
  display: block; width: 100%; padding: 12px 18px; min-height: 48px; margin: 0;
  border: 0; border-radius: 0; outline: 0; cursor: pointer; text-transform: uppercase;
  font-size: 28px; line-height: 1; text-shadow: var(--pop); color: var(--cream);
  background: linear-gradient(90deg, rgba(255,255,255,.34), rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), inset 1px 1px 0 rgba(255,255,255,.30);
  transition: background .15s, transform .1s;
}
.mbtn:hover { background: linear-gradient(90deg, rgba(255,255,255,.46), rgba(255,255,255,.14)); }
.mbtn:active { background: linear-gradient(90deg, rgba(255,255,255,.56), rgba(255,255,255,.22)); transform: scale(.97); }
.mbtn.primary { background: linear-gradient(90deg, rgba(185,242,75,.68), rgba(185,242,75,.16)); font-size: 34px; animation: pulse 1.1s ease-in-out infinite; }
.mbtn.primary:hover { background: linear-gradient(90deg, rgba(185,242,75,.82), rgba(185,242,75,.26)); }
@keyframes pulse { 50% { transform: scale(1.04); } }

.panel { padding: 24px 24px 22px; width: min(86vw, 360px); display: flex; flex-direction: column; gap: 10px; }
.panel h2 { margin: 0 0 6px; font-size: 52px; line-height: 1; color: var(--sun); text-transform: uppercase; text-shadow: 3px 3px 0 rgba(14,59,58,.85); transform: rotate(-2deg); }
.panel p { font-size: 20px; line-height: 1.25; margin: 0; }
.panel dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 0 0 8px; text-align: left; font-size: 26px; text-shadow: var(--pop); }
.panel dt { opacity: .95; }
.panel dd { margin: 0; color: var(--lime); text-align: right; }
.rules { list-style: none; margin: 0 0 8px; padding: 0; text-align: left; font-size: 21px; line-height: 1.2; text-shadow: var(--pop); }
.rules li { padding: 5px 0; }

/* ---------- panel header & close button ---------- */
.panelHead {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 8px;
  margin-bottom: 4px;
}
.panelHead h2 {
  margin: 0 !important;
  transform: none !important;
  font-size: clamp(32px, 5.5vw, 46px) !important;
  line-height: 1;
  color: var(--sun);
  text-shadow: 2px 2px 0 rgba(14,59,58,.85);
}

.closeBtn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  margin: 0;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff5b6e, #d81d32 80%);
  color: #ffffff;
  font-family: var(--font);
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  outline: none;
  box-shadow: 0 4px 14px rgba(216, 29, 50, 0.55), inset 0 2px 3px rgba(255, 255, 255, 0.7);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.6);
  transition: transform 0.15s cubic-bezier(.2, 1.3, .4, 1), filter 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  z-index: 10;
}
.closeBtn:hover {
  transform: scale(1.12);
  filter: brightness(1.22);
  box-shadow: 0 6px 20px rgba(216, 29, 50, 0.8), inset 0 2px 4px #ffffff;
}
.closeBtn:active {
  transform: scale(0.92);
  filter: brightness(0.95);
}

/* ---------- How to play modal styling ---------- */
.howtoPanel {
  width: min(94vw, 580px);
  max-height: min(88vh, 660px);
  padding: 16px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  box-sizing: border-box;
}

.rulesScroll {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  min-height: 0;
  padding-right: 10px;
  margin: 2px 0 6px;
  -webkit-overflow-scrolling: touch;
}

.rulesScroll::-webkit-scrollbar {
  width: 8px;
}
.rulesScroll::-webkit-scrollbar-track {
  background: rgba(10, 40, 48, 0.35);
  border-radius: 4px;
}
.rulesScroll::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, rgba(185, 242, 75, 0.8), rgba(255, 210, 63, 0.8));
  border-radius: 4px;
  box-shadow: inset 0 0 2px rgba(255, 255, 255, 0.5);
}
.rulesScroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, rgba(185, 242, 75, 1), rgba(255, 210, 63, 1));
}

.howtoPanel .rules {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
}

.howtoPanel .rules li {
  padding: 6px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.howtoPanel .rules li:last-child {
  border-bottom: none;
}

.howtoFoot {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-top: 4px;
}

.howtoFoot .mbtn {
  max-width: 320px;
  width: 100%;
}

@media (max-height: 430px) {
  .logo { flex-direction: row; gap: 14px; margin-top: 0; }
  .logo span { font-size: 17vh; }
  .logo .l2 { font-size: 20vh; margin-top: 0; }
  .tag { display: none; }
  .menu { width: 170px; padding: 6px 6px 5px; gap: 4px; right: calc(8px + var(--safe-r)); bottom: calc(6px + var(--safe-b)); }
  .menu .mbtn { min-height: 30px; font-size: 16px; padding: 4px 10px; }
  .menu .mbtn.primary { font-size: 21px; min-height: 36px; }
  .mbtn { min-height: 40px; padding: 8px 12px; font-size: 22px; }
  .best { font-size: 18px; margin: 0; }
  .lvlpanel { padding: 10px 14px; gap: 6px; }
  .lvlpanel h2 { font-size: 28px; }
  #lvlGrid { gap: 5px; }
  .mbtn.lbtn { min-height: 44px; font-size: 24px; padding: 3px; gap: 1px; }
  .lbtn .st { font-size: 11px; min-height: 11px; }
  .lbtn .lk { margin-top: 5px; }
  .lvlfoot .mbtn { min-height: 32px; font-size: 17px; }
  .panel { padding: 14px 18px; gap: 6px; max-height: 94vh; overflow: hidden; }
  .panel h2 { font-size: 36px; margin: 0; }
  .panel dl { font-size: 20px; gap: 4px 16px; margin: 0; }
  .rules { font-size: 17px; }
  .rules li { padding: 2px 0; }
  #hint { top: calc(var(--safe-t) + 72px); font-size: 18px; padding-top: 10px; padding-bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo, .mbtn.primary, #countdown { animation: none; }
  #hint, #hint.in { transition: none; }
}

/* ---------- Metroidvania Virtual Joystick Zone (NippleJS) ---------- */
#joyZone {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 48vw;
  height: 60vh;
  z-index: 10;
  touch-action: none;
  pointer-events: auto;
}

/* ---------- Landscape Action Cluster (layout.png) ---------- */
.action-cluster {
  position: fixed;
  right: calc(8px + var(--safe-r));
  bottom: calc(8px + var(--safe-b));
  width: 420px;
  height: 340px;
  z-index: 10;
  pointer-events: none;
  touch-action: none;
  transform: scale(0.72);
  transform-origin: bottom right;
}

/* Corner Burst Accent from layout.png */
.corner-burst {
  position: absolute;
  right: -10px;
  bottom: -10px;
  width: 200px;
  height: 200px;
  pointer-events: none;
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.45));
}

.act-btn {
  position: absolute;
  border-radius: 50%;
  border: 3.5px solid rgba(235, 255, 235, 0.82);
  background: radial-gradient(circle at 40% 35%, rgba(48, 102, 68, 0.72), rgba(12, 34, 20, 0.9));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), inset 0 2px 5px rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.1s ease, filter 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
  padding: 0;
  outline: none;
}

.act-btn img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
}

.act-btn:active, .act-btn.active {
  transform: scale(0.92);
  filter: brightness(1.35);
  border-color: #a7f3d0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 3px 8px rgba(0, 0, 0, 0.7);
}

.act-btn .keyBadge {
  position: absolute;
  bottom: 3px;
  right: 4px;
  top: auto;
  left: auto;
  transform: none;
  height: 14px;
  max-height: 14px;
  min-height: 0;
  width: auto;
  background: rgba(10, 28, 18, 0.9);
  border: 1px solid rgba(134, 239, 172, 0.7);
  color: #86efac;
  font-family: inherit;
  font-weight: 800;
  font-size: 9px;
  line-height: 1;
  padding: 1px 4px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  z-index: 4;
}

/* Layout Button Coordinates matching layout.png */
/* Center: Slash (Jump / Attack) */
.btn-slash {
  width: 104px;
  height: 104px;
  right: 125px;
  bottom: 95px;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 28px rgba(34, 197, 94, 0.35), inset 0 2px 6px rgba(255, 255, 255, 0.6);
}
.btn-slash:active {
  box-shadow: 0 0 24px rgba(74, 222, 128, 0.8), inset 0 3px 8px rgba(0, 0, 0, 0.7);
}
.act-btn .ammoBadge {
  position: absolute;
  top: -6px;
  right: -4px;
  background: linear-gradient(135deg, #15803d, #22c55e);
  color: #ffffff;
  border: 1.5px solid #86efac;
  font-family: inherit;
  font-weight: 800;
  font-size: 13px;
  line-height: 1;
  padding: 3px 7px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(74, 222, 128, 0.7);
  pointer-events: none;
  transition: transform 0.15s ease, background 0.2s ease;
}
.act-btn .ammoBadge.empty {
  background: linear-gradient(135deg, #7f1d1d, #ef4444);
  border-color: #fca5a5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 10px rgba(239, 68, 68, 0.6);
}

/* Top: Switch (Cycle Weapons / Powers) */
.btn-switch {
  width: 80px;
  height: 80px;
  right: 165px;
  bottom: 216px;
}

/* Left: Glide (Parachute) */
.btn-glide {
  width: 96px;
  height: 96px;
  right: 242px;
  bottom: 85px;
}
.btn-glide.gliding {
  border-color: #6ee7b7;
  animation: pulse .6s ease-in-out infinite;
}

/* Right: Dash */
.btn-dash {
  width: 92px;
  height: 92px;
  right: 18px;
  bottom: 135px;
}
.btn-dash.cooldown {
  opacity: 0.45;
  filter: grayscale(0.8);
  pointer-events: none;
}

/* Bottom: Hop Off / Slide */
.btn-hopoff {
  width: 84px;
  height: 84px;
  right: 145px;
  bottom: 2px;
}

/* Contextual Latch Button (pulses when branch is in range) */
.btn-latch {
  width: 88px;
  height: 88px;
  right: 250px;
  bottom: 205px;
  border-color: #facc15;
  box-shadow: 0 0 20px rgba(250, 204, 21, 0.5);
}
.btn-latch.on {
  opacity: 1;
  pointer-events: auto;
  animation: pulse .65s ease-in-out infinite;
}
.btn-latch:not(.on) {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.6);
}

/* Tablet & medium screens */
@media (max-width: 1024px) and (min-width: 841px) {
  .action-cluster {
    transform: scale(0.62);
    transform-origin: bottom right;
  }
}

/* Mobile Landscape Mode (very small buttons so they do not obstruct gameplay) */
@media (max-height: 540px) {
  .action-cluster {
    transform: scale(0.46);
    transform-origin: bottom right;
    right: calc(2px + var(--safe-r));
    bottom: calc(2px + var(--safe-b));
  }
  .corner-burst {
    opacity: 0.25;
  }
}

/* Very compact mobile landscape (phones with height <= 420px) */
@media (max-height: 420px) {
  .action-cluster {
    transform: scale(0.40);
    transform-origin: bottom right;
    right: calc(0px + var(--safe-r));
    bottom: calc(0px + var(--safe-b));
  }
}

/* Mobile Portrait Mode (very small buttons) */
@media (orientation: portrait), (max-width: 600px) {
  .action-cluster {
    transform: scale(0.48);
    transform-origin: bottom right;
    right: calc(4px + var(--safe-r));
    bottom: calc(6px + var(--safe-b));
  }
  .corner-burst {
    opacity: 0.25;
  }
}

/* Narrow mobile portrait (phones <= 380px wide) */
@media (max-width: 380px) and (orientation: portrait) {
  .action-cluster {
    transform: scale(0.42);
    transform-origin: bottom right;
    right: calc(2px + var(--safe-r));
    bottom: calc(4px + var(--safe-b));
  }
}

/* Clean uncluttered touch buttons: hide keyboard letter badges on small / mobile screens */
@media (max-width: 840px), (max-height: 540px), (hover: none) and (pointer: coarse) {
  .act-btn .keyBadge {
    display: none;
  }
}

/* ---------- power-up insects: placed at top-left below score to stay clear of joystick ---------- */
#powers {
  position: fixed; z-index: 2; left: calc(16px + var(--safe-l)); top: calc(88px + var(--safe-t));
  display: flex; flex-direction: column; gap: 6px; pointer-events: none;
}
.pchip {
  --c: var(--lime);
  position: relative; display: none; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px; overflow: hidden;
  font-size: 22px; line-height: 1; letter-spacing: .06em; color: var(--cream); text-shadow: var(--pop);
  background: linear-gradient(to bottom, rgba(var(--glass-glow), .34), rgba(var(--glass-body), .50));
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.20), inset 1px 1px 0 rgba(255,255,255,.34), 0 6px 18px rgba(2,20,40,.24), 0 0 14px color-mix(in srgb, var(--c) 45%, transparent);
}
.pchip.on { display: flex; }
.pchip.aqua { --c: #2ad4f2; }
.pchip.pink { --c: #ff6fb5; }
.pchip i { width: 14px; height: 14px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c), 0 0 3px #fff inset; }
.pchip em { font-style: normal; }
.pchip span { min-width: 1.1em; text-align: right; color: var(--c); }
.pchip b { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c); transform-origin: left center; }
.pchip.low { animation: pulse .5s ease-in-out infinite; }
#coinBox.x2 { box-shadow: inset 0 0 0 2px #2ad4f2, 0 0 18px rgba(42, 212, 242, .7); }
#coinBox.x2::after { content: "x" attr(data-mult); margin-left: 4px; color: #2ad4f2; }
.ft.lime { color: var(--lime); }
.ft.aqua { color: #5fe6ff; }
.ft.pink { color: #ff9ccb; }

/* small screens (phones): compact timer chips (dot + seconds), so they stay clear of the frog */
@media (max-height: 480px), (max-width: 700px) {
  #powers { gap: 4px; bottom: calc(34px + var(--safe-b)); }
  .pchip { height: 28px; padding: 0 8px; font-size: 19px; gap: 6px; }
  .pchip em { display: none; }
}

/* fruits: three per level, and they are the three stars */
#fruits { margin-top: 3px; display: flex; justify-content: center; gap: 7px; }
.fr { width: 18px; height: 18px; border-radius: 50%; background: rgba(14,59,58,.35); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), 0 2px 0 rgba(14,59,58,.45); transition: transform .2s; }
.fr.on.f0 { background: radial-gradient(circle at 35% 30%, #ff8a80, #e5322d 60%, #a31515); box-shadow: 0 0 10px rgba(255,120,100,.9), inset 0 0 0 2px rgba(255,255,255,.9); }
.fr.on.f1 { background: radial-gradient(circle at 35% 30%, #ffd27a, #ff8c14 60%, #c25a00); box-shadow: 0 0 10px rgba(255,170,60,.9), inset 0 0 0 2px rgba(255,255,255,.9); }
.fr.on.f2 { background: radial-gradient(circle at 35% 30%, #d9a8ff, #8a3fc2 60%, #571f85); box-shadow: 0 0 10px rgba(190,130,255,.9), inset 0 0 0 2px rgba(255,255,255,.9); }
.fr.pop { transform: scale(1.7); }
#progress i.fm { position: absolute; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.85); }
#progress i.fm.f0 { background: #e5322d; } #progress i.fm.f1 { background: #ff8c14; } #progress i.fm.f2 { background: #8a3fc2; }
#progress i.fm.got { opacity: .22; }
.stars { font-size: 64px; line-height: 1; letter-spacing: 10px; margin: 0 0 8px; color: var(--sun); text-shadow: 0 4px 0 rgba(14,59,58,.7), 0 0 18px rgba(255,220,90,.7); }
.stars .off { color: rgba(255,255,255,.28); text-shadow: 0 3px 0 rgba(14,59,58,.5); }
.lbtn .st { color: var(--sun) !important; letter-spacing: 0; }
.lbtn .st .off { color: rgba(255,255,255,.35); }


/* ---------- store: a glass panel on the left, two see-through windows on the right where the 3D previews are drawn ---------- */
#store { padding: calc(14px + var(--safe-t)) calc(16px + var(--safe-r)) calc(14px + var(--safe-b)) calc(16px + var(--safe-l)); background: rgba(5,18,32,.28); }
.storeWrap > * { min-width: 0; }
.storeWrap { width: min(1180px, 100%); height: 100%; max-height: 720px; display: grid; grid-template-columns: minmax(330px, 42%) 1fr; gap: 16px; }
.storePanel { width: auto; min-width: 0; height: 100%; padding: 16px 16px 12px; gap: 8px; text-align: left; min-height: 0; }
.storeHead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.storePanel h2 { font-size: 44px; margin: 0; }
.wallet { display: flex; align-items: center; gap: 8px; font-size: 30px; color: var(--sun); text-shadow: var(--pop); }
.wallet .coinIcon { position: static; width: 26px; height: 26px; }
#wallet.wallet { display: block; }
.tabs { display: flex; gap: 6px; }
.tab { flex: 1; font: inherit; font-size: 22px; color: #fff; text-shadow: var(--pop); padding: 7px 4px; cursor: pointer; border: 0; border-radius: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.18), rgba(255,255,255,.04)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.tab.on { background: linear-gradient(to bottom, rgba(185,242,75,.7), rgba(185,242,75,.18)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.items { display: flex; flex-direction: column; gap: 6px; overflow: auto; flex: 1; min-height: 0; padding-right: 2px; }
.card { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; text-align: left; font: inherit; color: #fff; cursor: pointer; border: 0; border-radius: 0;
  padding: 8px 12px; background: linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset 1px 1px 0 rgba(255,255,255,.28); }
.card:hover { background: linear-gradient(90deg, rgba(255,255,255,.32), rgba(255,255,255,.1)); }
.card.sel { box-shadow: inset 0 0 0 2px rgba(185,242,75,.95), inset 1px 1px 0 rgba(255,255,255,.4); background: linear-gradient(90deg, rgba(185,242,75,.34), rgba(185,242,75,.06)); }
.card b { grid-column: 2; grid-row: 1; font-size: 25px; font-weight: normal; text-shadow: var(--pop); }
.card small { grid-column: 2; font-size: 17px; opacity: .85; line-height: 1.15; }
.card .price { grid-column: 3; grid-row: 1 / span 2; font-size: 22px; color: var(--sun); text-shadow: var(--pop); text-align: right; white-space: nowrap; }
.card .price.no { color: #ff9c9c; }
.card .price.own { color: var(--lime); }
.storeFoot { display: flex; gap: 8px; }
.storeFoot .mbtn { flex: 1; font-size: 22px; min-height: 40px; }
.mbtn.ghost { opacity: .7; font-size: 15px !important; }
.previews { display: grid; grid-template-columns: 1.55fr 1fr; grid-template-rows: 1fr auto; gap: 10px; min-height: 0; }
.pvBox { position: relative; min-height: 0; display: flex; }
.pvLabel { position: absolute; left: 10px; top: 6px; z-index: 2; font-size: 22px; color: #fff; text-shadow: var(--pop); pointer-events: none; }
.pvHole { flex: 1; min-height: 120px; touch-action: none; cursor: grab; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.1); }
.pvInfo { grid-column: 1 / -1; padding: 10px 14px; display: flex; align-items: center; gap: 14px; text-align: left; min-height: 74px; }
.pvInfo .txt { flex: 1; min-width: 0; }
.pvInfo b { display: block; font-size: 26px; font-weight: normal; text-shadow: var(--pop); }
.pvInfo span { font-size: 18px; opacity: .9; line-height: 1.2; }
.pvInfo .mbtn { flex: 0 0 auto; min-width: 150px; font-size: 24px; }
.pvInfo .mbtn[disabled] { opacity: .5; cursor: default; }
@media (max-aspect-ratio: 1/1) {
  .storeWrap { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 34%) 1fr; }
  .previews { order: -1; grid-template-rows: 1fr auto; }
  .pvInfo { padding: 6px 10px; min-height: 0; } .pvInfo b { font-size: 22px; } .pvInfo span { display: none; }
  .storePanel h2 { font-size: 34px; }
  .card small { display: none; }
}
@media (max-height: 430px) and (min-aspect-ratio: 1/1) {
  .storeWrap { grid-template-columns: minmax(300px, 40%) 1fr; gap: 10px; }
  .storePanel { padding: 8px 10px 8px; gap: 5px; } .storePanel h2 { font-size: 30px; }
  .tab { font-size: 17px; padding: 4px; } .card { padding: 4px 10px; } .card b { font-size: 20px; } .card small { display: none; } .card .price { font-size: 18px; grid-row: 1; }
  .pvInfo { min-height: 0; padding: 6px 10px; } .pvInfo b { font-size: 22px; } .pvInfo span { font-size: 14px; } .pvInfo .mbtn { font-size: 19px; min-width: 120px; min-height: 36px; }
  .storeFoot .mbtn { min-height: 32px; font-size: 18px; } .wallet { font-size: 22px; }
}

#store .glass, #store .mbtn, #store .tab, #store .card { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }   /* lighter blur: the canvas behind is animated */
.pvInfo .mbtn { width: auto; }

/* upgrades page */
.pips { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.pips i { width: 12px; height: 12px; display: inline-block; background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); transform: skewX(-12deg); }
.pips i.on { background: var(--lime); box-shadow: inset 0 0 0 1px rgba(255,255,255,.8); }

/* ---------- store cards: a live 3D picture on the left (drawn into the .thumb window), the text beside it ---------- */
.card .thumb { grid-column: 1; grid-row: 1 / span 2; width: 62px; height: 62px; display: block; align-self: center; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); background: rgba(5,18,32,.12); }
.card .thumb.none { display: grid; place-items: center; font-size: 30px; color: #fff; opacity: .55; text-shadow: var(--pop); }
.card .thumb.none::after { content: "\2205"; }
.card.sel .thumb { box-shadow: inset 0 0 0 2px rgba(185,242,75,.95); }
/* The 3D pictures are drawn into the page, so anything translucent painted over them would wash them out. The store's
   panel and list are therefore see-through; the header, tabs and footer keep their glass, and each card's tint starts to
   the right of its picture. Glass blur is off here for the same reason (it would blur the pictures too). */
#store .storePanel { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
#store .storeHead, #store .tabs, #store .storeFoot { background: linear-gradient(to bottom, rgba(var(--glass-glow), .5), rgba(var(--glass-body), .55)); padding: 6px 8px; }
#store .items { background: none; }
#store .card { background: none; position: relative; isolation: isolate; -webkit-backdrop-filter: none; backdrop-filter: none; --thumbL: 74px; }
#store .card::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: var(--thumbL); right: 0;
  background: linear-gradient(90deg, rgba(var(--glass-body), .72), rgba(var(--glass-body), .4)); }
#store .card:hover::before { background: linear-gradient(90deg, rgba(var(--glass-glow), .8), rgba(var(--glass-body), .5)); }
#store .card.sel::before { background: linear-gradient(90deg, rgba(185,242,75,.5), rgba(185,242,75,.14)); }
#store .card.sel { box-shadow: inset 0 0 0 2px rgba(185,242,75,.95); }
.card .thumb { background: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.35); }
.card .thumb.none { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
/* the upgrade progress bar: four segments, the ticks mark each upgrade */
.upbar { position: relative; display: block; height: 12px; background-color: rgba(5,18,32,.5); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45);
  background-image: repeating-linear-gradient(90deg, transparent 0 calc(25% - 2px), rgba(255,255,255,.6) calc(25% - 2px) 25%); }
.upbar i { position: absolute; inset: 0; transform-origin: left center; transition: transform .35s ease-out;
  background: linear-gradient(90deg, #e4ff8a, var(--lime)); box-shadow: 0 0 10px rgba(185,242,75,.75); }
.card.upg { grid-template-rows: auto auto auto; }
.card.upg .thumb { grid-row: 1 / span 3; }
.card.upg .price { grid-row: 1; }
.card.upg .upbar { grid-column: 2; grid-row: 3; align-self: center; }
.card.upg .upleft { grid-column: 3; grid-row: 3; font-style: normal; font-size: 17px; white-space: nowrap; text-align: right; text-shadow: var(--pop); }
.pvInfo .upbar { margin-top: 8px; height: 10px; width: min(360px, 100%); }
.card.upg .upleft { color: #fff; }
#store.upgTab .pvItemBox { visibility: hidden; }
@media (max-height: 430px) and (min-aspect-ratio: 1/1) {
  .card { grid-template-columns: 46px 1fr auto; }
  .card .thumb { width: 46px; height: 46px; }
  #store .card { --thumbL: 58px; }
}

/* portrait phones: the tabs, thumbnails and card names come down a size so the whole store fits the width */
@media (max-aspect-ratio: 1/1) {
  .tab { font-size: 18px; padding: 6px 2px; min-width: 0; }
  .card { grid-template-columns: 50px minmax(0, 1fr) auto; }
  .card .thumb { width: 50px; height: 50px; }
  #store .card { --thumbL: 62px; }
  .card b { font-size: 21px; }
  .card.upg .upleft { font-size: 15px; }
}


/* ---------- privacy policy screen: a scrolling glass panel ---------- */
#privacy { z-index: 2; background: rgba(10,40,48,.38); }
.privacyPanel { width: min(94vw, 640px); max-height: calc(100% - 20px); padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 10px; text-align: left; min-height: 0; }
.privacyPanel h2 { font-size: 40px; margin: 0; }
.privacyText { overflow: auto; min-height: 0; flex: 1; padding-right: 6px; font-size: 18px; line-height: 1.32; }
.privacyText h3 { font-size: 22px; margin: 14px 0 4px; color: var(--sun); font-weight: normal; text-shadow: var(--pop); }
.privacyText p, .privacyText li { margin: 0 0 6px; }
.privacyText ul { margin: 0 0 6px; padding-left: 20px; }
.privacyText a { color: var(--lime); }
.privacyFoot { display: flex; gap: 8px; }
.privacyFoot .mbtn { flex: 1; font-size: 20px; min-height: 42px; }
.mbtn.danger { color: #ffc2c2; }

@media (max-height: 460px) {
  .privacyPanel { padding: 10px 14px 10px; gap: 6px; }
  .privacyPanel h2 { font-size: 28px; }
  .privacyText { font-size: 15px; line-height: 1.25; }
  .privacyText h3 { font-size: 17px; margin: 8px 0 2px; }
  .privacyFoot .mbtn { font-size: 17px; min-height: 34px; }
}

/* ---------- Device-specific styling: PC controls & enlarged icons ---------- */
.keyBadge {
  display: none;
}
.how-pc {
  display: none;
}
.how-mobile {
  display: block;
}

body.is-pc .how-mobile {
  display: none !important;
}
body.is-pc .how-pc {
  display: block !important;
}

/* On PC: display tiny, discrete keyboard binding badge in bottom corner of action button */
body.is-pc .keyBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: auto;
  bottom: 3px;
  right: 4px;
  left: auto;
  transform: none;
  height: 14px;
  max-height: 14px;
  min-height: 0;
  width: auto;
  padding: 1px 4px;
  font-size: 9px;
  font-family: inherit;
  font-weight: 800;
  line-height: 1;
  color: #86efac;
  background: rgba(10, 28, 18, 0.92);
  border: 1px solid rgba(134, 239, 172, 0.7);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  white-space: nowrap;
  pointer-events: none;
  z-index: 4;
  text-shadow: none;
}

/* Locked blast button state when firefly not acquired */
.act-btn.blast-locked {
  filter: grayscale(0.55) brightness(0.85);
  border-color: rgba(239, 68, 68, 0.65);
}
.act-btn.blast-locked img {
  opacity: 0.6;
}

/* Store Sub-Category Filter Tabs (Outfits and Skill Tree) */
.subtabs {
  display: flex;
  gap: 5px;
  background: rgba(4, 20, 24, 0.45);
  padding: 4px 6px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.subtab {
  flex: 1;
  font: inherit;
  font-size: 15px;
  color: #fff;
  padding: 4px 6px;
  cursor: pointer;
  border: 0;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  transition: all 0.15s ease;
  text-shadow: var(--pop);
}
.subtab:hover {
  background: rgba(255, 255, 255, 0.18);
}
.subtab.on {
  background: linear-gradient(135deg, rgba(185, 242, 75, 0.85), rgba(34, 197, 94, 0.75));
  color: #062b16;
  text-shadow: none;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

/* Skill Tree Cards */
.card.skill {
  grid-template-rows: auto auto auto;
}
.card.skill .skillBadge {
  grid-column: 2;
  grid-row: 1;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  display: inline-block;
  width: fit-content;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.card.skill.tree-slash .skillBadge {
  background: rgba(239, 68, 68, 0.35);
  border: 1px solid #f87171;
  color: #fca5a5;
}
.card.skill.tree-blast .skillBadge {
  background: rgba(34, 197, 94, 0.35);
  border: 1px solid #4ade80;
  color: #86efac;
}
.card.skill .upbar {
  grid-column: 2;
  grid-row: 3;
  align-self: center;
}
.card.skill .upleft {
  grid-column: 3;
  grid-row: 3;
  font-style: normal;
  font-size: 15px;
  white-space: nowrap;
  text-align: right;
  text-shadow: var(--pop);
  color: #fff;
}

/* PC: larger icons and HUD elements for enhanced visibility */
body.is-pc #hearts {
  font-size: 46px;
  letter-spacing: 4px;
}
body.is-pc #score {
  font-size: 52px;
}
body.is-pc #lvl {
  font-size: 20px;
}
body.is-pc #fruits .fr {
  width: 24px;
  height: 24px;
}
body.is-pc #coinBox {
  height: 52px;
  padding: 0 16px 0 12px;
  font-size: 34px;
  gap: 10px;
}
body.is-pc .coinIcon {
  width: 28px;
  height: 28px;
  border-width: 4px;
}
body.is-pc .ibtn {
  width: 52px;
  height: 52px;
}
body.is-pc .pauseIcon {
  width: 18px;
  height: 22px;
  border-left-width: 6px;
  border-right-width: 6px;
}
body.is-pc .noteIcon {
  width: 11px;
  height: 22px;
}
body.is-pc .noteIcon::after {
  left: 11px;
  top: 4px;
  width: 11px;
  height: 15px;
  border-right-width: 4px;
}
body.is-pc .fullIcon {
  width: 22px;
  height: 22px;
  border-width: 4px;
}
body.is-pc #hud .latch {
  width: 126px;
  height: 126px;
  right: calc(24px + var(--safe-r));
  bottom: calc(52px + var(--safe-b));
}
body.is-pc #hud .latch::after {
  font-size: 22px;
  bottom: -28px;
}
body.is-pc #progress {
  height: 13px;
}
body.is-pc .closeBtn {
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  font-size: 38px;
}

@media (max-height: 520px) {
  .howtoPanel {
    padding: 10px 14px 10px;
    max-height: 94vh;
    gap: 4px;
  }
  .panelHead {
    padding-bottom: 4px;
  }
  .panelHead h2 {
    font-size: 26px !important;
  }
  .closeBtn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    font-size: 26px;
  }
  .howtoPanel .rules {
    font-size: 15px;
    line-height: 1.25;
  }
  .howtoPanel .rules li {
    padding: 3px 0;
  }
  .howtoFoot .mbtn {
    min-height: 36px;
    font-size: 20px;
    padding: 4px 12px;
  }
}

/* =============================================================
   Y2K Glassmorphism Enemy Health & Guard Visualizer
   Inspired by early 2000s arcade tech HUDs & translucent glass aesthetics
   ============================================================= */
#enemyMeters {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 15;
}

.em-box {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 6px 3px 4px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(14, 24, 42, 0.75) 45%, rgba(6, 14, 26, 0.90) 100%);
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-top: 1.5px solid rgba(255, 255, 255, 0.9);
  border-left: 1.5px solid rgba(255, 255, 255, 0.75);
  border-radius: 16px 5px 16px 5px;
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.65),
    inset 0 1px 1px rgba(255, 255, 255, 0.5),
    0 0 12px rgba(0, 229, 255, 0.35);
  transform: translate(-50%, -100%);
  pointer-events: none;
  transition: opacity 0.16s ease-out, transform 0.16s ease-out;
  min-width: 90px;
}

/* Y2K Circular Diamond Gem Node */
.em-node {
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.75) 0%, rgba(0, 229, 255, 0.3) 40%, rgba(8, 20, 36, 0.95) 80%);
  border: 1.5px solid rgba(0, 240, 255, 0.9);
  box-shadow:
    0 0 8px rgba(0, 240, 255, 0.7),
    inset 0 0 4px rgba(0, 240, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.em-gem-svg {
  display: block;
  filter: drop-shadow(0 0 2.5px rgba(0, 240, 255, 0.95));
}

/* Body / Track Container */
.em-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

/* Header with micro tech label */
.em-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Outfit', 'Inter', -apple-system, sans-serif;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: 0.8px;
  line-height: 1;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 5px rgba(0, 229, 255, 0.8);
  padding: 0 1px;
}
.em-badge {
  color: #00f0ff;
  font-weight: 900;
}
.em-val {
  font-variant-numeric: tabular-nums;
  opacity: 0.95;
  color: rgba(255, 255, 255, 0.95);
}

/* HP Bar Track with Y2K Diagonal Skew & Slashes */
.em-hp-track {
  position: relative;
  width: 100%;
  height: 5.5px;
  background: rgba(10, 16, 26, 0.92);
  border-radius: 2px;
  overflow: hidden;
  border: 0.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.9);
  transform: skewX(-14deg);
}

.em-hp-fill {
  height: 100%;
  width: 100%;
  border-radius: 1.5px;
  background: linear-gradient(90deg, #00f5a0 0%, #00d9f5 100%);
  box-shadow: 0 0 8px rgba(0, 240, 255, 0.55);
  transition: width 0.15s ease-out, background 0.25s ease-out;
  position: relative;
  overflow: hidden;
}

/* Segmented slash hatching (matching Design 3 diagonal slashes!) */
.em-hp-fill::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 5px,
    rgba(6, 12, 22, 0.85) 5px,
    rgba(6, 12, 22, 0.85) 7px
  );
  pointer-events: none;
}

/* Guard / Poise Track */
.em-guard-track {
  position: relative;
  width: 100%;
  height: 3.2px;
  background: rgba(8, 14, 22, 0.92);
  border-radius: 1.5px;
  overflow: hidden;
  border: 0.5px solid rgba(0, 240, 255, 0.35);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.9);
  transform: skewX(-14deg);
}

.em-guard-fill {
  height: 100%;
  width: 0%;
  border-radius: 1px;
  background: linear-gradient(90deg, #0284c7 0%, #38bdf8 100%);
  box-shadow: 0 0 5px rgba(56, 189, 248, 0.7);
  transition: width 0.15s ease-out;
}

.em-guard-fill.broken {
  background: linear-gradient(90deg, #00ffff, #ffffff, #00ffff);
  box-shadow: 0 0 10px #00f0ff, 0 0 16px #38bdf8, 0 0 6px #ffffff;
  animation: y2kGuardBreak 0.25s infinite alternate ease-in-out;
}

@keyframes y2kGuardBreak {
  0% { filter: brightness(1.1); opacity: 0.85; }
  100% { filter: brightness(2.0); opacity: 1.0; }
}

/* Glossy top refraction glare */
.em-glass-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.05) 90%, transparent 100%);
  pointer-events: none;
}



/* =============================================
   Full main menu: unlocked once the tutorial is done
   ============================================= */
body.tut-done #menuPrompt { display: none; }
body.tut-done #legacyMenuKeep {
  display: flex !important;
  position: absolute;
  right: calc(12px + var(--safe-r));
  bottom: calc(12px + var(--safe-b));
  margin: 0;
  z-index: 5;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
body.tut-done #legacyMenuKeep button {
  width: 124px;
  min-width: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 12px;
  outline: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.07));     /* glass only: no border, no colour */
  -webkit-backdrop-filter: blur(14px) saturate(160%); backdrop-filter: blur(14px) saturate(160%);
  color: #fff;
  font: 700 12.5px 'Segoe UI', system-ui, -apple-system, sans-serif;
  letter-spacing: .6px;
  text-align: center;
  text-shadow: 0 1px 3px rgba(10, 30, 50, .55);
  box-shadow: 0 4px 14px rgba(10, 30, 50, .18);
  cursor: pointer;
  transition: transform .15s, background .15s;
}
body.tut-done #legacyMenuKeep button:hover { transform: scale(1.04); background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12)); }
body.tut-done #legacyMenuKeep button:active { transform: scale(.96); }
body.tut-done #legacyMenuKeep #mPlay { background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.10)); color: #fff; font-size: 14px; padding: 8px 14px; }
body.tut-done #legacyMenuKeep p { margin: 1px 4px 0; color: #fff; font: 700 11px 'Segoe UI', system-ui, sans-serif; letter-spacing: .5px; text-shadow: 0 1px 3px rgba(10, 30, 50, .6); text-align: right; }
@media (max-height: 480px) {
  body.tut-done #legacyMenuKeep { gap: 3px; bottom: calc(6px + var(--safe-b)); }
  body.tut-done #legacyMenuKeep button { padding: 4px 12px; font-size: 11.5px; width: 112px; border-radius: 10px; }
  body.tut-done #legacyMenuKeep #mPlay { padding: 5px 12px; font-size: 12.5px; }
}

/* privacy link: tucked in the bottom-left corner, glass only */
body.tut-done .menu-footer-privacy { position: absolute; left: calc(12px + var(--safe-l)); bottom: calc(12px + var(--safe-b)); margin: 0; padding: 0; }
.privacy-link-btn { border: 0 !important; background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.06)) !important; box-shadow: 0 4px 14px rgba(10, 30, 50, .15) !important; }
body.tut-done .privacy-link-btn { padding: 6px 14px; font-size: 11.5px; }


/* ---- enemy health bar shatter ---- */
.em-shard { position: absolute; pointer-events: none; will-change: transform, opacity; z-index: 17; }
.em-shatter-flash {
  position: absolute; width: 120px; height: 120px; border-radius: 50%; pointer-events: none; z-index: 16; mix-blend-mode: screen;
  background: radial-gradient(circle, #fff 0%, rgba(0, 240, 255, .85) 32%, rgba(255, 0, 110, .55) 58%, transparent 72%);
}
.em-shatter-ring {
  position: absolute; width: 70px; height: 70px; border-radius: 50%; pointer-events: none; z-index: 16;
  border: 3px solid #fff; box-shadow: 0 0 14px #00f0ff, 0 0 24px #ff3d9a, inset 0 0 12px rgba(255, 61, 154, .8);
}
.em-ray {
  position: absolute; width: 16px; height: 2.5px; border-radius: 2px; pointer-events: none; z-index: 17;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff, #ff5fa2); box-shadow: 0 0 6px #fff;
}

/* ==========================================================================
   Tutorial popups v2: smaller, sitting just below the fruit containers,
   sliding in from the LEFT and out to the right. The Good job! card does the same.
   --tut-top is set from js (bottom of #fruits + a small gap).
   ========================================================================== */
.tut-banner {
  top: var(--tut-top, calc(96px + var(--safe-t)));
  transform: translateX(calc(-50% - 110vw));          /* parked off the LEFT edge */
  gap: 9px;
  padding: 6px 12px;
  border-radius: 12px;
  max-width: min(82vw, 340px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 16px rgba(187, 247, 60, 0.4);
}
.tut-banner.in { transform: translateX(-50%); }
.tut-banner.out { transform: translateX(calc(-50% + 110vw)); transition: transform .32s cubic-bezier(.6, 0, .9, .4); }
.tut-banner .tut-icon-box { width: 34px; height: 34px; min-width: 34px; border-radius: 9px; }
.tut-banner .tut-icon-box img { width: 22px; height: 22px; }
.tut-banner .tut-key-hint { font-size: 8px; padding: 0 4px; bottom: -5px; right: -5px; }
.tut-banner .tut-title { font-size: 12.5px; }
.tut-banner .tut-desc { font-size: 11px; line-height: 1.2; }

.tut-good {
  top: var(--tut-top, calc(96px + var(--safe-t)));
  opacity: 0;
  transform: translateX(calc(-50% - 110vw));
}
.tut-good.show { animation: tgSlide 1.5s cubic-bezier(.2, 1, .3, 1) both; }
@keyframes tgSlide {
  0%   { opacity: 1; transform: translateX(calc(-50% - 110vw)) rotate(-6deg); }
  22%  { opacity: 1; transform: translateX(calc(-50% + 14px)) rotate(1deg); }
  32%  { transform: translateX(-50%) rotate(0); }
  78%  { opacity: 1; transform: translateX(-50%); }
  100% { opacity: 1; transform: translateX(calc(-50% + 110vw)) rotate(4deg); }
}
.tut-good .tg-card { padding: 18px 20px 9px; border-radius: 18px; border-width: 3px; gap: 2px;
  box-shadow: 0 0 0 3px #0f5a3a, 0 6px 0 3px rgba(15, 90, 58, .6), 0 0 24px rgba(255, 95, 162, .7), 0 0 36px rgba(61, 220, 132, .5); }
.tut-good .tg-check { width: 32px; height: 32px; top: -17px; font-size: 19px; line-height: 26px; border-width: 3px; }
.tut-good .tg-title { font-size: min(8vw, 34px); -webkit-text-stroke: 5px #0f5a3a; }
.tut-good .tg-sub { font-size: 13px; padding: 1px 10px; }
@media (prefers-reduced-motion: reduce) {
  .tut-good.show { animation: none; opacity: 1; transform: translateX(-50%); }
}


/* =============================================
   Settings + controls layout editor
   ============================================= */
#settings { z-index: 3; background: rgba(10, 40, 48, .38); }
.settingsPanel { width: min(94vw, 460px); max-height: calc(100% - 20px); text-align: left; gap: 10px; }
.settingsPanel h2 { font-size: 40px; margin: 0; }
.setSeg h3 { margin: 4px 0 4px; font-size: 24px; font-weight: normal; color: var(--sun); text-shadow: var(--pop); }
.setSeg p { font-size: 17px; line-height: 1.25; opacity: .95; margin-bottom: 10px; }
.setRow { display: flex; gap: 8px; }
.setRow .mbtn { flex: 1; font-size: 19px; min-height: 42px; }
.setNote { min-height: 20px; margin-top: 8px; font-size: 16px; color: var(--lime); text-shadow: var(--pop); }

body.ctrl-custom .corner-burst { display: none; }
#ctrlLayer { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#joyZone.custom {                                   /* a moved stick shows its resting spot as a faint glass disc */
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), rgba(255,255,255,.03) 70%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

#ctrlEdit {
  position: fixed; inset: 0; z-index: 80; touch-action: none;
  background: rgba(8, 22, 34, .58); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.ceBar {
  position: absolute; left: 50%; top: calc(8px + var(--safe-t)); transform: translateX(-50%);
  width: min(96vw, 560px); padding: 8px 12px; border-radius: 14px; color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,.08));
  -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25); display: flex; flex-direction: column; gap: 6px;
}
.ceTitle { font: 700 15px 'Segoe UI', system-ui, sans-serif; letter-spacing: .5px; }
.ceTitle i { font-style: normal; opacity: .7; font-weight: 600; margin-left: 6px; font-size: 12px; text-transform: uppercase; }
.ceHint { font-size: 11.5px; opacity: .85; line-height: 1.25; }
.ceSize { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 700; }
.ceSize span { min-width: 52px; text-align: left; }
.ceSize input { flex: 1; accent-color: #86efac; height: 22px; }
.ceBtns { display: flex; gap: 6px; }
.ceBtns button {
  flex: 1; border: 0; border-radius: 10px; padding: 7px 6px; color: #fff; cursor: pointer; font: 700 12px 'Segoe UI', system-ui, sans-serif;
  background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.08)); text-shadow: 0 1px 3px rgba(10,30,50,.5);
}
.ceBtns button.pri { background: linear-gradient(180deg, rgba(134,239,172,.55), rgba(134,239,172,.2)); }
.ceBtns button:active { transform: scale(.96); }

.ceGhost {
  position: absolute; border-radius: 50%; cursor: grab; touch-action: none;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.28), rgba(255,255,255,.08));
  box-shadow: 0 0 0 2px rgba(255,255,255,.5), 0 6px 18px rgba(0,0,0,.3);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.ceGhost.sel { box-shadow: 0 0 0 3px #86efac, 0 0 22px rgba(134,239,172,.6), 0 6px 18px rgba(0,0,0,.3); }
.ceGhost img { width: 82%; height: 82%; object-fit: contain; pointer-events: none; }
.ceGhost svg { width: 100%; height: 100%; pointer-events: none; }
.ceGhost span {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; white-space: nowrap; pointer-events: none;
  font: 700 11px 'Segoe UI', system-ui, sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); letter-spacing: .4px;
}
.ceGhost .ceRing {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  border: 2px dashed rgba(255,255,255,.35);
}
.ceHandle {
  display: none; position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; cursor: nwse-resize; touch-action: none;
  background: #86efac; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 3px 10px rgba(0,0,0,.4);
}
@media (max-height: 460px) {
  .ceBar { padding: 5px 10px; gap: 3px; width: min(70vw, 520px); }
  .ceHint { display: none; }
}