/* ============================================================
   TAMAGOSCII - タマゴッシー
   Retro pixel/ASCII styled responsive UI
============================================================ */

:root{
  --bg:#0a0014;
  --bg-2:#14082a;
  --bg-3:#1d0b3b;
  --fg:#e9e7ff;
  --muted:#8b7fb8;
  --pink:#ff2d7a;
  --yellow:#f6e24b;
  --cyan:#36e0f5;
  --green:#4bf58a;
  --purple:#a03dff;
  --red:#ff4b6e;
  --blue:#4b78ff;
  --orange:#ff8c38;
  --font-pixel:'Press Start 2P',monospace;
  --font-term:'VT323','Share Tech Mono',monospace;
  --glow:0 0 8px currentColor,0 0 16px currentColor;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;-webkit-tap-highlight-color:transparent}
body{
  background:
    radial-gradient(ellipse at top,#2a0b4b 0%,#0a0014 60%) no-repeat,
    #0a0014;
  color:var(--fg);
  font-family:var(--font-term);
  font-size:22px;
  line-height:1.1;
  image-rendering:pixelated;
  -webkit-font-smoothing:none;
  user-select:none;
}
button,input{font-family:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;color:inherit}

/* ============ SCREENS ============ */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.active{display:flex}

/* CRT / scanline overlays */
.scanlines,.crt{pointer-events:none;position:fixed;inset:0;z-index:9999}
.scanlines{
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0.22) 0 2px,transparent 2px 4px);
  mix-blend-mode:multiply;
}
.crt{
  background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,0.55) 100%);
}

/* ============ LOGIN ============ */
#login-screen{
  align-items:center;justify-content:center;padding:16px;text-align:center;
}
.login-inner{width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;gap:18px}
.logo{display:flex;flex-direction:column;align-items:center;gap:6px}
.title-en{
  font-family:var(--font-pixel);
  font-size:clamp(20px,6vw,42px);
  color:var(--pink);
  text-shadow:0 0 6px var(--pink),0 0 14px var(--pink),3px 3px 0 var(--purple);
  letter-spacing:2px;
}
.title-jp{
  font-family:var(--font-pixel);
  font-size:clamp(12px,3.5vw,22px);
  color:var(--cyan);
  text-shadow:0 0 6px var(--cyan);
  letter-spacing:4px;
}
.tagline{color:var(--green);text-shadow:0 0 6px var(--green);font-size:20px;margin-top:4px}
.ascii-egg{
  /* Kept for backwards compatibility; the new mascot replaces it. */
  display:none;
}
.login-mascot{
  position:relative;
  width: 240px;
  height: 240px;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:
    drop-shadow(0 0 22px rgba(246, 226, 75, 0.55))
    drop-shadow(0 0 48px rgba(246, 226, 75, 0.25));
  animation: loginEggFloat 3s ease-in-out infinite;
  user-select:none;
  -webkit-user-select:none;
}
.login-mascot-emoji{
  font-size: 200px;
  line-height: 1;
  pointer-events: none;
}
.login-mascot-face{
  position: absolute;
  font-family: 'VT323','Share Tech Mono', monospace;
  font-size: 54px;
  font-weight: 900;
  color: #2a1800;
  letter-spacing: 0.06em;
  top: 52%;
  transform: translateY(-50%);
  pointer-events: none;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.25);
  transition: opacity .25s ease;
}
@keyframes loginEggFloat{
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-10px) rotate(-1deg); }
}
@media (max-width: 480px){
  .login-mascot{ width: 180px; height: 180px; }
  .login-mascot-emoji{ font-size: 150px; }
  .login-mascot-face{ font-size: 40px; }
}
.login-actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.btn{
  font-family:var(--font-pixel);
  font-size:12px;
  padding:14px 20px;
  background:linear-gradient(180deg,var(--purple),#5a1cc0);
  color:#fff;
  border:3px solid #fff;
  box-shadow:0 0 0 3px var(--purple),0 4px 0 #2a0b4b,0 0 20px rgba(160,61,255,0.6);
  letter-spacing:1.5px;
  transition:transform .08s ease, box-shadow .08s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 3px var(--purple),0 1px 0 #2a0b4b}
.btn-primary{background:linear-gradient(180deg,var(--pink),#8a0c3d)}
.btn-small{padding:8px 12px;font-size:10px;border-width:2px}
.btn-icon{margin-right:6px}
.hint{color:var(--muted);font-size:16px}
.pseudo-form{display:flex;flex-direction:column;gap:10px;width:100%;align-items:center}
.pseudo-form.hidden,.login-actions.hidden{display:none}
.pseudo-form label{font-family:var(--font-pixel);font-size:11px;color:var(--cyan)}
.pseudo-form input{
  font-size:22px;padding:10px 14px;width:100%;max-width:340px;
  background:#000;color:var(--green);
  border:2px solid var(--green);outline:none;
  box-shadow:0 0 12px rgba(75,245,138,0.4) inset;
  text-align:center;
}
.connected-addr{font-size:16px;color:var(--muted)}
.connected-addr span{color:var(--green)}
.login-footer{margin-top:12px;color:var(--muted);font-size:14px}
.hidden{display:none !important}
.install-link{
  font-family:var(--font-pixel);font-size:10px;color:var(--yellow);
  text-decoration:none;border:2px dashed var(--yellow);padding:6px 10px;
  text-shadow:0 0 6px var(--yellow);
}
.install-link:hover{background:var(--yellow);color:#000}
.btn-link{
  font-family:var(--font-term);font-size:16px;color:var(--muted);
  text-decoration:underline;background:none;border:none;cursor:pointer;
  margin-top:4px;
}
.btn-link:hover{color:var(--cyan)}
.profile-network{
  font-family:var(--font-pixel);font-size:7px;color:var(--green);
  text-shadow:0 0 4px currentColor;
}

/* ============ WALLET PICKER ============ */
.wallet-picker{
  display:flex;flex-direction:column;gap:10px;width:100%;max-width:420px;
}
.wallet-btn{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;
  background:linear-gradient(180deg,#1d0b3b,#0f0623);
  border:3px solid var(--purple);
  box-shadow:0 0 0 0 var(--purple), 0 4px 0 #2a0b4b;
  color:var(--fg);
  transition:transform .1s ease, box-shadow .1s ease, border-color .1s ease;
  position:relative;
  text-align:left;
  cursor:pointer;
}
.wallet-btn:hover{
  transform:translateY(-2px);
  border-color:var(--pink);
  box-shadow:0 0 16px var(--purple), 0 6px 0 #2a0b4b;
}
.wallet-btn:active{ transform:translateY(1px); }
.wallet-btn.connecting{
  opacity:.7;cursor:wait;
  animation:pulse 1s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ box-shadow:0 0 0 0 var(--purple), 0 4px 0 #2a0b4b; }
  50%    { box-shadow:0 0 22px var(--pink), 0 4px 0 #2a0b4b; }
}
.wallet-btn.disabled{
  opacity:.35;pointer-events:none;filter:grayscale(1);
}
.wallet-icon{
  flex:0 0 auto;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  background:var(--purple);color:#fff;
  border:2px solid #fff;
  text-shadow:0 0 6px #fff;
}
.wallet-info{ flex:1;display:flex;flex-direction:column;gap:2px;min-width:0; }
.wallet-name{
  font-family:var(--font-pixel);font-size:12px;color:var(--yellow);
  text-shadow:0 0 6px var(--yellow);
  letter-spacing:1px;
}
.wallet-sub{
  font-size:14px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wallet-badge{
  position:absolute;top:-8px;right:8px;
  font-family:var(--font-pixel);font-size:7px;
  padding:3px 6px;
  background:var(--green);color:#000;
  border:1px solid #000;
  letter-spacing:1px;
}
.wallet-badge.hidden{ display:none; }

/* ============ XAMAN QR MODAL ============ */
.modal-xaman{ max-width:420px; }
.xaman-body{
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;
}
.xaman-subtitle{
  font-size:16px;color:var(--muted);
}
.xaman-qr-wrap{
  padding:10px;background:#fff;border:3px solid var(--cyan);
  box-shadow:0 0 16px var(--cyan);
}
.xaman-qr-wrap img{
  display:block;width:240px;height:240px;
  image-rendering:pixelated;
}
.xaman-status{
  font-family:var(--font-pixel);font-size:9px;color:var(--yellow);
  text-shadow:0 0 6px var(--yellow);letter-spacing:1px;
}
.xaman-spinner{
  display:flex;gap:6px;justify-content:center;
}
.xaman-spinner span{
  width:8px;height:8px;background:var(--pink);
  box-shadow:0 0 6px var(--pink);
  animation:bounceDot .8s ease-in-out infinite;
}
.xaman-spinner span:nth-child(2){ animation-delay:.15s; }
.xaman-spinner span:nth-child(3){ animation-delay:.3s; }
@keyframes bounceDot{
  0%,100%{ transform:translateY(0);opacity:.5; }
  50%    { transform:translateY(-6px);opacity:1; }
}

@media (max-width:640px){
  .wallet-btn{ padding:10px 12px; }
  .wallet-icon{ width:32px;height:32px;font-size:20px; }
  .wallet-name{ font-size:10px; }
  .wallet-sub{ font-size:12px; }
  .xaman-qr-wrap img{ width:200px;height:200px; }
}

/* Glitch title */
.glitch{position:relative}
.glitch::before,.glitch::after{
  content:attr(data-text);position:absolute;inset:0;pointer-events:none;
}
.glitch::before{color:var(--cyan);transform:translate(-2px,0);mix-blend-mode:screen;opacity:.7;
  animation:glitchA 3.2s infinite steps(1)}
.glitch::after{color:var(--yellow);transform:translate(2px,0);mix-blend-mode:screen;opacity:.7;
  animation:glitchB 2.6s infinite steps(1)}
@keyframes glitchA{
  0%,97%{clip-path:inset(0 0 100% 0)}
  98%{clip-path:inset(20% 0 50% 0)}
  100%{clip-path:inset(60% 0 10% 0)}
}
@keyframes glitchB{
  0%,96%{clip-path:inset(100% 0 0 0)}
  97%{clip-path:inset(40% 0 30% 0)}
  100%{clip-path:inset(10% 0 60% 0)}
}

/* ============ GAME LAYOUT ============
   .screen already has position:fixed + inset:0 so #game-screen
   fills the viewport. We keep overflow:hidden to clip the big
   glowing egg that sits behind everything. */
#game-screen{
  padding:0;
  gap:0;
  overflow:hidden;
}

.glass{
  background: rgba(5, 0, 20, 0.62);
  backdrop-filter: blur(10px) saturate(1.4);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* HUD — one line, score left, pseudo right */
.hud{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background: rgba(5, 0, 20, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(160, 61, 255, 0.25);
  gap:10px;
  flex-wrap:nowrap;
}
.hud-score{
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-pixel); font-size:10px;
  color:var(--fg);
  flex-wrap:nowrap;
  overflow:hidden;
}
.hud-label{ color:var(--muted); letter-spacing:2px; }
.hud-val{
  color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,0.5);
  font-size:14px;
}
.hud-coin-val{
  color:#ffd94b;
  text-shadow:0 0 8px rgba(255, 189, 0, 0.7);
  font-size:14px;
}
.hud-unit{
  color:#c99a2b;
  font-size:8px;
  letter-spacing:1px;
}
.hud-sep{ color:rgba(255,255,255,0.2); font-size:11px; }

/* ====== SCII COIN ====== */
.scii-coin{
  display:inline-flex;
  width: 26px; height: 26px;
  filter: drop-shadow(0 0 8px rgba(255, 189, 0, 0.65))
          drop-shadow(0 0 14px rgba(255, 189, 0, 0.3));
  animation: coinWobble 3.5s ease-in-out infinite;
  margin-right: 2px;
  flex-shrink: 0;
}
.scii-coin svg{ width: 100%; height: 100%; }
@keyframes coinWobble{
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg) scale(1.04); }
}
.hud-pseudo{
  font-family:var(--font-pixel); font-size:10px;
  color:var(--green);
  text-shadow:0 0 6px rgba(75, 245, 138, 0.6);
  letter-spacing:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:44vw;
}

/* Fun-row (SHOP / MINI-GAME / SHARE / ACHIEVEMENTS) on one line */
.fun-row{
  position:relative; z-index:10;
  display:flex; flex-wrap:nowrap; gap:6px;
  justify-content:center;
  padding:8px 10px;
  background: rgba(5, 0, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(160, 61, 255, 0.2);
  overflow-x:auto;
}
.fun-btn{
  font-family:var(--font-pixel); font-size:9px;
  padding:8px 12px;
  background: rgba(15, 6, 35, 0.5);
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius:8px;
  transition: all .18s ease;
  white-space:nowrap;
  flex-shrink:0;
  letter-spacing:1px;
}
.fun-btn:hover{
  background: rgba(54, 224, 245, 0.15);
  color: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 14px rgba(54, 224, 245, 0.55);
  transform: translateY(-1px);
}
.fun-btn:active{
  background: rgba(54, 224, 245, 0.3);
  transform: translateY(0);
}

/* Stats */
.stats{
  position:relative; z-index:10;
  display:flex; flex-direction:column;
  gap:5px;
  padding:10px 14px;
  background: rgba(5, 0, 20, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(160, 61, 255, 0.2);
}
.stat{
  display:grid;
  grid-template-columns: 70px 1fr 34px;
  align-items:center;
  gap:8px;
}
.stat-label{ font-family:var(--font-pixel); font-size:9px; }
.stat-hunger .stat-label  { color:var(--pink);  }
.stat-happy .stat-label   { color:var(--yellow);}
.stat-energy .stat-label  { color:var(--cyan);  }
.stat-hygiene .stat-label { color:var(--green); }
.bar{
  height:12px;
  background:rgba(0, 0, 0, 0.5);
  border: 1.5px solid rgba(58, 26, 107, 0.9);
  position:relative;
  box-shadow: inset 0 0 6px rgba(0,0,0,.6);
  border-radius:3px; overflow:hidden;
}
.bar-fill{ height:100%; transition: width .35s ease; }
.stat-hunger  .bar-fill{ background:linear-gradient(90deg, var(--pink),   #c91d5c); }
.stat-happy   .bar-fill{ background:linear-gradient(90deg, var(--yellow), #c7b810); }
.stat-energy  .bar-fill{ background:linear-gradient(90deg, var(--cyan),   #1ab0c0); }
.stat-hygiene .bar-fill{ background:linear-gradient(90deg, var(--green),  #1ac05a); }
.stat-value{
  font-family:var(--font-pixel); font-size:9px;
  text-align:right; color:var(--fg);
}

/* Info row: AGE · EMOTION · LEVEL */
.info-row{
  position:relative; z-index:10;
  display:flex; align-items:center; justify-content:center;
  gap:10px;
  padding:10px 12px;
  background: rgba(5, 0, 20, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(160, 61, 255, 0.2);
  font-family:var(--font-pixel);
  font-size:11px;
  letter-spacing:2px;
}
.info-item{
  display:inline-flex; align-items:center; gap:4px;
  color:var(--fg);
}
.info-lbl{ color:var(--muted); font-size:8px; margin-right:2px; }
.info-age      { color:var(--cyan);   text-shadow:0 0 6px var(--cyan);   }
.info-mood     { color:var(--purple); text-shadow:0 0 8px var(--purple); transition: color .8s ease, text-shadow .8s ease; }
.info-level    { color:var(--yellow); text-shadow:0 0 6px var(--yellow); }
.info-sep      { color:var(--muted); font-size:14px; }

/* Spacer — was used for flex layout, kept for backward compat but
   no longer required now that the controls are fixed to the bottom. */
.stage-spacer{ display:none; }

/* ============ STAGE / EGG ============
   The egg is positioned absolutely and fills most of the
   viewport, sitting BEHIND all the HUD/controls which use
   translucent dark backgrounds so the egg shows through. */
.stage-frame{
  --egg-color: #b040ff;
  --egg-glow:  #8020ff;
  --egg-aspect: 1.25;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width:  min(94vw, 560px);
  height: min(82vh, 720px);
  z-index: 1;
  /* Asymmetric egg silhouette — narrow top, wider bottom */
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background:
    radial-gradient(ellipse at 50% 35%,
      rgba(140, 70, 220, 0.35) 0%,
      rgba(90, 35, 160, 0.72) 40%,
      rgba(45, 12, 90, 0.94) 85%,
      rgba(22, 6, 50, 0.98) 100%);
  border: 5px solid var(--egg-color);
  box-shadow:
    0 0 40px var(--egg-color),
    0 0 90px var(--egg-glow),
    0 0 160px rgba(160, 61, 255, 0.35),
    inset 0 0 60px rgba(160, 80, 230, 0.25),
    inset 0 -24px 50px rgba(20, 5, 45, 0.5);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  cursor:pointer;
  transition:
    border-color 1.2s ease,
    box-shadow  1.2s ease,
    background  1.2s ease;
  animation: eggBreath 4.5s ease-in-out infinite;
}
/* Soft specular highlight at the top of the egg */
.stage-frame::before{
  content: '';
  position: absolute;
  top: 8%;
  left: 22%;
  width: 38%;
  height: 22%;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, 0.16) 0%,
    rgba(255, 255, 255, 0.04) 60%,
    transparent 100%);
  border-radius: 50%;
  filter: blur(10px);
  pointer-events: none;
}
@keyframes eggBreath{
  0%,100%{ transform: translate(-50%, -50%) scale(1);    }
  50%    { transform: translate(-50%, -50%) scale(1.012);}
}

/* The face: ASCII-art eyes + mouth, huge and white, centered.
   We use a tighter letter-spacing and a stronger glow so the
   expression is readable from across the room. */
.creature{
  font-family: 'VT323', 'Share Tech Mono', monospace;
  font-size: clamp(78px, 22vw, 160px);
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 0.02em;
  line-height: 0.9;
  text-align: center;
  white-space: nowrap;
  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.85),
    0 0 24px rgba(255, 255, 255, 0.55),
    0 0 48px rgba(255, 255, 255, 0.25);
  user-select: none;
  transition: text-shadow .3s ease, transform .3s ease;
  animation: faceIdle 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes faceIdle{
  0%,100%{ transform: translateY(0)    scale(1); }
  50%    { transform: translateY(-3px) scale(1.015); }
}

/* The face can't have 2 competing animations so we use a wrapper.
   hurt/bounce override idle by being applied on .creature directly
   with higher specificity via animation-play-state. */
.creature.hurt{
  animation: faceShake .45s linear, faceIdle 5s ease-in-out infinite;
}
.creature.bounce{
  animation: faceBounce .55s cubic-bezier(.2,.7,.2,1.4), faceIdle 5s ease-in-out infinite;
}
.creature.joy{
  animation: faceJoy 1.2s ease, faceIdle 5s ease-in-out infinite;
}
@keyframes faceShake{
  0%,100%{ transform:translateX(0)   scale(1); }
  15%    { transform:translateX(-10px) scale(1.02) rotate(-2deg); }
  40%    { transform:translateX(10px)  scale(1.02) rotate(2deg); }
  65%    { transform:translateX(-6px)  scale(1.01) rotate(-1deg); }
  85%    { transform:translateX(6px)   scale(1.01) rotate(1deg); }
}
@keyframes faceBounce{
  0%     { transform: translateY(0)     scale(1);   }
  35%    { transform: translateY(-22px) scale(1.15);}
  55%    { transform: translateY(-8px)  scale(0.97);}
  75%    { transform: translateY(-14px) scale(1.05);}
  100%   { transform: translateY(0)     scale(1);   }
}
@keyframes faceJoy{
  0%,100%{ transform: scale(1)    rotate(0);   }
  25%    { transform: scale(1.14) rotate(-5deg);}
  50%    { transform: scale(1.12) rotate(5deg); }
  75%    { transform: scale(1.14) rotate(-3deg);}
}

/* Glow pulse on the egg when the creature is super happy */
.stage-frame.pulse-happy{
  animation: eggPulseHappy 1.6s ease-in-out;
}
@keyframes eggPulseHappy{
  0%,100%{ box-shadow:
    0 0 24px var(--egg-color),
    0 0 60px var(--egg-glow),
    inset 0 0 40px rgba(130, 60, 200, 0.25),
    inset 0 -16px 32px rgba(20, 5, 45, 0.4); }
  50% { box-shadow:
    0 0 48px var(--egg-color),
    0 0 120px var(--egg-glow),
    0 0 180px var(--egg-glow),
    inset 0 0 60px rgba(255, 255, 255, 0.12),
    inset 0 -16px 32px rgba(20, 5, 45, 0.4); }
}

.stage-particles{ position:absolute; inset:0; pointer-events:none; z-index:3; overflow:visible; }
.particle{
  position:absolute;
  font-family:var(--font-term);
  font-size:24px;
  color:var(--yellow);
  text-shadow:
    0 0 6px currentColor,
    0 0 14px currentColor;
  animation: partFly 1.4s ease-out forwards;
  pointer-events:none;
  will-change: transform, opacity;
  font-weight:bold;
}
@keyframes partFly{
  0%  { transform: translate(0,0) scale(.5) rotate(0);     opacity:0; }
  15% { transform: translate(0,0) scale(1.2) rotate(10deg); opacity:1; }
  80% { opacity:1; }
  100%{ transform: translate(var(--dx,0), var(--dy,-60px)) scale(0.8) rotate(-15deg); opacity:0; }
}
.particle.confetti{
  animation: confettiFall 1.8s linear forwards;
  font-size:22px;
}
@keyframes confettiFall{
  0%  { transform: translate(0,0) rotate(0);    opacity:0; }
  10% { opacity:1; }
  100%{ transform: translate(var(--dx,0), var(--dy,400px)) rotate(720deg); opacity:0; }
}
.stage-ripple{
  position:absolute;
  width:4px; height:4px;
  border:3px solid #fff;
  border-radius:50%;
  pointer-events:none;
  transform: translate(-50%,-50%);
  animation: stageRipple .7s ease-out forwards;
  z-index:2;
}
@keyframes stageRipple{
  0%  { opacity:0.8; width:4px;   height:4px;   }
  100%{ opacity:0;   width:180px; height:180px; }
}
.floating-text{
  position:absolute;top:10%;left:50%;transform:translateX(-50%);
  font-family:var(--font-pixel);font-size:12px;color:var(--yellow);
  text-shadow:var(--glow);pointer-events:none;opacity:0;
}
.floating-text.show{animation:floatTxt 1.6s ease-out}
@keyframes floatTxt{
  0%{opacity:0;transform:translate(-50%,20px)}
  20%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-30px)}
}
/* Remove the old creature-name element (no longer rendered) */
.creature-name{ display:none; }

/* ============ EMOJI FLY-TO-EGG ============
   Big emojis launched from action buttons that fly toward the
   centre of the egg on each interaction. */
.fly-emoji{
  position: fixed;
  z-index: 100;
  font-size: clamp(36px, 6vw, 56px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.5);
  animation: flyToEgg 0.85s cubic-bezier(0.32, 0, 0.25, 1.1) forwards;
  will-change: transform, opacity;
}
@keyframes flyToEgg{
  0%  {
    transform: translate(-50%, -50%) scale(0.3) rotate(0);
    opacity: 0;
  }
  15% {
    transform: translate(-50%, -50%) scale(1.3) rotate(-12deg);
    opacity: 1;
  }
  70% {
    transform: translate(calc(-50% + var(--tx, 0px) * 0.9),
                         calc(-50% + var(--ty, 0px) * 0.9))
               scale(1.4) rotate(12deg);
    opacity: 1;
  }
  100%{
    transform: translate(calc(-50% + var(--tx, 0px)),
                         calc(-50% + var(--ty, 0px) - 8px))
               scale(0.4) rotate(40deg);
    opacity: 0;
  }
}

/* ============ EGG REACTION ANIMATIONS ============
   Each action triggers a different reaction on the egg.
   We use individual `transform` + existing translate so the
   egg stays centred.
*/
.stage-frame.react-eat{
  animation: eggReactEat 0.8s ease, eggBreath 4.5s ease-in-out 0.8s infinite;
}
@keyframes eggReactEat{
  0%   { transform: translate(-50%, -50%) scale(1,    1);    }
  15%  { transform: translate(-50%, -48%) scale(1.08, 0.92); } /* squash */
  35%  { transform: translate(-50%, -52%) scale(0.92, 1.08); } /* stretch */
  55%  { transform: translate(-50%, -49%) scale(1.05, 0.96); }
  75%  { transform: translate(-50%, -51%) scale(0.97, 1.03); }
  100% { transform: translate(-50%, -50%) scale(1,    1);    }
}

.stage-frame.react-play{
  animation: eggReactPlay 0.9s cubic-bezier(.4,1.6,.6,1) , eggBreath 4.5s ease-in-out 0.9s infinite;
}
@keyframes eggReactPlay{
  0%   { transform: translate(-50%, -50%) rotate(0)   scale(1);    }
  20%  { transform: translate(-50%, -60%) rotate(-8deg) scale(1.04);}
  40%  { transform: translate(-50%, -50%) rotate(8deg)  scale(1.08);}
  60%  { transform: translate(-50%, -58%) rotate(-6deg) scale(1.04);}
  80%  { transform: translate(-50%, -50%) rotate(4deg)  scale(1.02);}
  100% { transform: translate(-50%, -50%) rotate(0)     scale(1);   }
}

.stage-frame.react-sleep{
  animation: eggReactSleep 1.2s ease-in-out, eggBreath 4.5s ease-in-out 1.2s infinite;
}
@keyframes eggReactSleep{
  0%   { transform: translate(-50%, -50%) scale(1);    filter: brightness(1);    }
  30%  { transform: translate(-50%, -48%) scale(1.02); filter: brightness(0.85); }
  60%  { transform: translate(-50%, -51%) scale(0.98); filter: brightness(0.7);  }
  100% { transform: translate(-50%, -50%) scale(1);    filter: brightness(1);    }
}

.stage-frame.react-clean{
  animation: eggReactClean 0.85s ease, eggBreath 4.5s ease-in-out 0.85s infinite;
}
@keyframes eggReactClean{
  0%,100% { transform: translate(-50%, -50%) rotate(0); }
  15%     { transform: translate(-53%, -50%) rotate(-4deg); }
  30%     { transform: translate(-47%, -50%) rotate(4deg);  }
  45%     { transform: translate(-52%, -50%) rotate(-3deg); }
  60%     { transform: translate(-48%, -50%) rotate(3deg);  }
  75%     { transform: translate(-51%, -50%) rotate(-2deg); }
}

.stage-frame.react-pet{
  animation: eggReactPet 0.65s ease, eggBreath 4.5s ease-in-out 0.65s infinite;
}
@keyframes eggReactPet{
  0%,100% { transform: translate(-50%, -50%) scale(1);    }
  50%     { transform: translate(-50%, -50%) scale(1.06); }
}

/* ============ CONTROLS OVERLAY ============
   Actions and food rows are PINNED just above the audio bar at
   the bottom of the viewport. Their container is transparent
   and pointer-events:none so clicks pass through empty space,
   while each child still captures its own events. */
.controls-overlay{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 72px; /* leave room for the audio bar (desktop height) */
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px 0;
  pointer-events: none;
}
.controls-overlay > * { pointer-events: auto; }

.actions,
.food-selector{
  display: flex;
  gap: 6px;
  padding: 8px;
  background: rgba(3, 0, 15, 0.72);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.actions{
  grid-template-columns: repeat(5, 1fr);
  display: grid;
}

/* =========================================================
   Monochrome-by-default button scheme
   Buttons show only greyscale until the user hovers or
   clicks. Each button has a CSS variable --btn-color that
   describes its accent colour, used only on :hover / :active.
   ========================================================= */
.action,
.food-item{
  --btn-color: 255, 255, 255;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 62px;
  padding: 4px 2px;
  background: rgba(10, 3, 28, 0.70);
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition:
    transform .12s,
    box-shadow .18s,
    border-color .18s,
    background .18s,
    color .18s;
  position: relative;
}
.action:hover,
.food-item:hover{
  transform: translateY(-2px);
  background: rgba(var(--btn-color), 0.12);
  border-color: rgba(var(--btn-color), 0.85);
  box-shadow: 0 0 18px rgba(var(--btn-color), 0.55);
  color: #fff;
}
.action:active,
.food-item:active{
  transform: translateY(1px) scale(0.96);
  background: rgba(var(--btn-color), 0.25);
  box-shadow: 0 0 26px rgba(var(--btn-color), 0.7);
}
.action.feed   { --btn-color: 255, 45, 122; }  /* pink */
.action.play   { --btn-color: 246, 226, 75; }  /* yellow */
.action.sleep  { --btn-color: 54, 224, 245; }  /* cyan */
.action.clean  { --btn-color: 75, 245, 138; }  /* green */
.action.pet    { --btn-color: 198, 109, 255; } /* purple */

.action-icon  { font-size: 22px; line-height: 1; filter: grayscale(0.4); transition: filter .18s; }
.action:hover .action-icon { filter: grayscale(0); }
.action-label {
  font-family: var(--font-pixel);
  font-size: 8px;
  color: inherit;
  letter-spacing: 0.5px;
}
.action-cost {
  font-family: var(--font-pixel);
  font-size: 7px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.5px;
}
.action:hover .action-cost { color: rgba(var(--btn-color), 0.9); }
.action.disabled{ opacity: .5; filter: grayscale(1); pointer-events: none; }

/* Food items: same height as actions, grid of 6 */
.food-selector{ padding: 8px; --btn-color: 255, 255, 255; }
.food-items{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  width: 100%;
}
.food-item{
  font-size: 28px;
  gap: 0;
  --btn-color: 246, 226, 75; /* yellow accent for food */
  filter: grayscale(0.3);
}
.food-item:hover{ filter: grayscale(0); }
.food-item.selected{
  filter: grayscale(0);
  border-color: rgba(246, 226, 75, 0.9);
  box-shadow: 0 0 16px rgba(246, 226, 75, 0.6);
  background: rgba(246, 226, 75, 0.12);
  transform: scale(1.03);
}

/* ========== Food bar collapse/expand ========== */
.food-selector{
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
  margin-bottom: 0;
  overflow: hidden;
  transition:
    max-height .28s ease,
    padding .28s ease,
    opacity .22s ease,
    margin .28s ease;
  border-width: 0;
  pointer-events: none;
}
.controls-overlay.feed-active .food-selector{
  max-height: 96px;
  padding: 8px;
  opacity: 1;
  margin-bottom: 2px;
  border-width: 1px;
  pointer-events: auto;
}
.controls-overlay.feed-active .action.feed{
  background: rgba(255, 45, 122, 0.2);
  border-color: rgba(255, 45, 122, 0.85);
  box-shadow: 0 0 18px rgba(255, 45, 122, 0.55);
  color: #fff;
}

/* ============ AUDIO PLAYER ============
   Transparent bar — the egg needs to be visible through it.
   The individual buttons and the track-title still have their
   own contrast so they remain readable. */
.audio-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-top: 1px solid rgba(160, 61, 255, 0.35);
  box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
  transition: transform .25s ease;
  pointer-events: none;
}
.audio-bar > * { pointer-events: auto; }
.audio-main{
  display:flex; align-items:center; gap:8px;
  padding:8px 12px;
}
.audio-btn{
  /* Solid dark background so the button is readable over the egg */
  background: rgba(5, 0, 20, 0.72);
  color:var(--fg);
  border:1px solid rgba(160, 61, 255, 0.35);
  width:38px; height:38px;
  border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  transition: background .15s, color .15s, transform .1s, border-color .15s;
  position:relative;
  flex-shrink:0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.audio-btn svg{ width:22px; height:22px; display:block; }
.audio-btn:hover{
  background: rgba(160, 61, 255, 0.35);
  color: var(--cyan);
  border-color: var(--cyan);
}
.audio-btn:active{ transform:scale(0.92); }
.audio-btn.audio-btn-lg{
  width:48px; height:48px;
  background:linear-gradient(180deg,var(--purple),#5a1cc0);
  color:#fff;
  box-shadow:0 0 14px rgba(160,61,255,.6);
}
.audio-btn.audio-btn-lg:hover{
  background:linear-gradient(180deg,var(--pink),#8a0c3d);
  box-shadow:0 0 18px var(--pink);
}
.audio-btn.audio-btn-lg svg{ width:26px; height:26px; }
.audio-btn .hidden{ display:none !important; }

.track-info{
  flex:1; min-width:0;
  display:flex; flex-direction:column;
  gap:4px;
  padding: 6px 12px;
  background: rgba(5, 0, 20, 0.72);
  border: 1px solid rgba(160, 61, 255, 0.35);
  border-radius: 10px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.track-title{
  font-family:var(--font-pixel); font-size:9px;
  color:var(--yellow);
  text-shadow:0 0 6px rgba(246,226,75,0.7);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  letter-spacing:1px;
}
.track-progress{
  height:4px;
  background:rgba(255,255,255,0.08);
  border-radius:2px;
  overflow:hidden;
  position:relative;
}
.track-progress-fill{
  height:100%;
  background:linear-gradient(90deg,var(--pink),var(--purple),var(--cyan));
  width:0;
  transition:width .2s linear;
  box-shadow:0 0 6px var(--pink);
  border-radius:2px;
}

/* Expandable playlist */
#audio-expand .icon-chev{ transition: transform .25s ease; }
.audio-bar.expanded #audio-expand .icon-chev{ transform: rotate(180deg); }

.audio-playlist{
  max-height:0;
  overflow:hidden;
  transition: max-height .3s ease;
  background: rgba(5, 0, 20, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(160, 61, 255, 0.35);
}
.audio-bar.expanded .audio-playlist{
  max-height:260px;
  overflow-y:auto;
}
.playlist-header{
  font-family:var(--font-pixel); font-size:8px;
  color:var(--muted);
  letter-spacing:2px;
  padding:10px 16px 6px;
  border-top:1px dashed rgba(160,61,255,0.25);
}
.playlist-items{
  list-style:none;
  display:flex; flex-direction:column;
  gap:2px;
  padding:4px 8px 10px;
}
.playlist-items li{
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-radius:6px;
  cursor:pointer;
  color:var(--fg);
  font-size:15px;
  transition: background .15s, color .15s;
}
.playlist-items li:hover{
  background:rgba(160,61,255,0.2);
  color:var(--cyan);
}
.playlist-items li.active{
  background:linear-gradient(90deg,rgba(255,45,122,0.25),rgba(160,61,255,0.15));
  color:var(--yellow);
}
.playlist-items li.active .plist-idx{ color:var(--pink); }
.plist-idx{
  font-family:var(--font-pixel); font-size:9px;
  color:var(--muted);
  width:22px; text-align:right;
  flex-shrink:0;
}
.plist-title{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  font-family:var(--font-term);
}
.plist-playing{
  color:var(--pink);
  width:16px; height:16px;
  flex-shrink:0;
  display:none;
}
.playlist-items li.active .plist-playing{ display:block; }
.playlist-items li.active .plist-playing{
  animation: eqBars 1s ease-in-out infinite;
}
@keyframes eqBars{
  0%,100%{ opacity:0.6; }
  50%    { opacity:1;   }
}
.playlist-empty{
  padding:20px;
  text-align:center;
  font-family:var(--font-pixel);
  font-size:9px;
  color:var(--muted);
}

/* ============ MODALS ============ */
.modal-root{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.8)}
.modal-root.active{display:flex}
.modal{
  background:#0f0623;border:3px solid var(--purple);
  box-shadow:0 0 30px var(--purple);
  max-width:560px;width:100%;max-height:86vh;display:flex;flex-direction:column;overflow:hidden;
}
.modal-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:linear-gradient(90deg,var(--purple),#5a1cc0);
  border-bottom:2px solid #fff;
}
.modal-header h3{font-family:var(--font-pixel);font-size:12px;color:#fff}
.modal-close{font-size:22px;padding:4px 10px;color:#fff}
.modal-close:hover{color:var(--yellow)}
.modal-body{padding:16px;overflow-y:auto;font-size:18px;color:var(--fg)}

.shop-desc{color:var(--muted);margin-bottom:12px;font-size:16px}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.shop-item{
  background:#05000f;border:2px solid var(--purple);padding:12px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.shop-pack{font-size:38px}
.shop-amount{font-family:var(--font-pixel);font-size:11px;color:var(--yellow)}
.shop-price{font-family:var(--font-pixel);font-size:9px;color:var(--cyan)}

.share-url{
  width:100%;padding:8px;font-size:14px;background:#000;color:var(--green);
  border:2px solid var(--green);margin:10px 0;text-align:center;
}
.share-btns{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}

.ach-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.ach-list li{
  padding:10px;background:#05000f;border:2px solid #3a1a6b;
  display:flex;align-items:center;gap:10px;font-size:16px;
}
.ach-list li.unlocked{border-color:var(--yellow);box-shadow:0 0 8px var(--yellow)}
.ach-list li.unlocked .ach-icon{filter:none}
.ach-icon{font-size:26px;filter:grayscale(1) brightness(.5)}
.ach-name{font-family:var(--font-pixel);font-size:10px;color:var(--fg)}
.ach-desc{font-size:14px;color:var(--muted)}
.ach-info{display:flex;flex-direction:column;gap:2px}

/* ============ EGG SMASHER MINIGAME ============ */
.modal-minigame{ max-width:520px; }
.mg-desc{
  color:var(--muted);
  font-size:14px;
  text-align:center;
  margin-bottom:10px;
}
.mg-desc .gold-tag{
  color:#ffd94b;
  text-shadow:0 0 8px #ffbe00;
  font-weight:bold;
}
.minigame-hud{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin:10px 0;
}
.mg-stat{
  background:linear-gradient(180deg,#1d0b3b,#0a0320);
  border:2px solid var(--purple);
  padding:8px;
  display:flex; flex-direction:column;
  align-items:center; gap:2px;
  border-radius:6px;
}
.mg-stat-label{
  font-family:var(--font-pixel);
  font-size:8px;
  color:var(--muted);
  letter-spacing:2px;
}
.mg-stat-value{
  font-family:var(--font-pixel);
  font-size:18px;
  color:var(--yellow);
  text-shadow:0 0 10px var(--yellow);
  line-height:1;
}
.mg-stat-unit{
  font-family:var(--font-pixel);
  font-size:10px;
  color:var(--muted);
  margin-left:2px;
}
.minigame-arena{
  position:relative;
  width:100%;
  aspect-ratio:1.3;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(160,61,255,0.18) 0%, transparent 60%),
    linear-gradient(180deg, #050013 0%, #0f0623 100%);
  border:3px solid var(--purple);
  border-radius:10px;
  margin:10px 0;
  overflow:hidden;
  box-shadow: 0 0 24px rgba(160,61,255,0.4) inset;
  cursor:crosshair;
}
.minigame-arena.playing{ animation: arenaPulse 2s ease-in-out infinite; }
@keyframes arenaPulse{
  0%,100%{ box-shadow: 0 0 24px rgba(160,61,255,0.4) inset; }
  50%    { box-shadow: 0 0 40px rgba(255,45,122,0.5) inset; }
}
.mg-start-screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
  pointer-events:none;
}
.mg-start-icon{
  font-size:72px;
  animation: faceIdle 3s ease-in-out infinite;
}
.mg-start-title{
  font-family:var(--font-pixel);
  font-size:18px;
  color:var(--pink);
  text-shadow:0 0 10px var(--pink);
  letter-spacing:3px;
}
.mg-start-hint{
  font-size:14px;
  color:var(--muted);
}
.minigame-arena.playing .mg-start-screen{ display:none; }

.mg-start-btn{
  display:block;
  margin:12px auto 0;
}
.mg-start-btn.hidden{ display:none !important; }

/* Spawned eggs */
.mg-egg{
  position:absolute;
  width:56px; height:64px;
  cursor:pointer;
  transform: translate(-50%, -50%);
  animation: eggSpawn .35s cubic-bezier(.2,1.5,.4,1) both;
  user-select:none;
  -webkit-user-select:none;
}
@keyframes eggSpawn{
  0%  { transform: translate(-50%,-50%) scale(0)   rotate(-20deg); opacity:0; }
  60% { transform: translate(-50%,-50%) scale(1.15) rotate(5deg);  opacity:1; }
  100%{ transform: translate(-50%,-50%) scale(1)    rotate(0);     opacity:1; }
}
.mg-egg .egg-body{
  width:100%; height:100%;
  background:linear-gradient(180deg, #f8f2e8 0%, #d4c8b0 85%, #a8987a 100%);
  border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  box-shadow:
    inset -6px -8px 16px rgba(80,50,20,0.25),
    inset 6px 6px 12px rgba(255,255,255,0.5),
    0 6px 12px rgba(0,0,0,0.35);
  position:relative;
  transition: transform .08s;
}
.mg-egg .egg-body::before{
  content:'';
  position:absolute;
  top:15%; left:25%;
  width:25%; height:15%;
  background:rgba(255,255,255,0.55);
  border-radius:50%;
  filter:blur(2px);
}
.mg-egg:hover .egg-body{ transform: scale(1.08) rotate(-2deg); }
.mg-egg.gold .egg-body{
  background:
    linear-gradient(180deg, #fff7c2 0%, #ffd94b 30%, #ff9b00 85%, #b35b00 100%);
  box-shadow:
    inset -6px -8px 16px rgba(120,60,0,0.4),
    inset 6px 6px 12px rgba(255,255,255,0.7),
    0 0 18px rgba(255,189,0,0.85),
    0 0 36px rgba(255,189,0,0.5),
    0 6px 12px rgba(0,0,0,0.35);
  animation: eggSpawn .35s cubic-bezier(.2,1.5,.4,1) both, goldShimmer 1.2s ease-in-out .35s infinite;
}
@keyframes goldShimmer{
  0%,100%{ filter: brightness(1); }
  50%    { filter: brightness(1.2) saturate(1.3); }
}
.mg-egg.smashed{
  pointer-events:none;
  animation: eggSmash .5s ease-out forwards;
}
@keyframes eggSmash{
  0%  { transform: translate(-50%,-50%) scale(1)   rotate(0);   opacity:1; }
  30% { transform: translate(-50%,-50%) scale(1.3) rotate(-8deg); opacity:1; }
  100%{ transform: translate(-50%,-50%) scale(0.2) rotate(15deg); opacity:0; }
}
.mg-egg.vanish{
  pointer-events:none;
  animation: eggVanish .4s ease-out forwards;
}
@keyframes eggVanish{
  0%  { opacity:1; transform: translate(-50%,-50%) scale(1);   }
  100%{ opacity:0; transform: translate(-50%,-50%) scale(0.8) translateY(6px); }
}

/* Crack/splash particles */
.mg-crack{
  position:absolute;
  font-family:var(--font-pixel);
  font-size:18px;
  color:#fff;
  text-shadow:0 0 8px #fff;
  pointer-events:none;
  animation: crackFly .7s ease-out forwards;
  transform: translate(-50%,-50%);
  font-weight:bold;
}
.mg-crack.gold{ color:#ffd94b; text-shadow:0 0 10px #ffbe00; }
@keyframes crackFly{
  0%  { opacity:1; transform: translate(-50%,-50%) scale(0.5); }
  40% { opacity:1; transform: translate(calc(-50% + var(--dx,0)), calc(-50% + var(--dy,-24px))) scale(1.2); }
  100%{ opacity:0; transform: translate(calc(-50% + var(--dx,0) * 1.8), calc(-50% + var(--dy,-60px) * 1.5)) scale(0.8); }
}
.mg-score-pop{
  position:absolute;
  font-family:var(--font-pixel);
  font-size:16px;
  color:var(--yellow);
  text-shadow:0 0 10px var(--yellow);
  pointer-events:none;
  transform: translate(-50%,-50%);
  animation: scorePop .9s ease-out forwards;
  font-weight:bold;
  white-space:nowrap;
}
.mg-score-pop.gold{ color:#ffd94b; text-shadow:0 0 12px #ffbe00; font-size:20px; }
@keyframes scorePop{
  0%  { opacity:0; transform: translate(-50%,-50%) scale(0.5); }
  15% { opacity:1; transform: translate(-50%,-50%) scale(1.2); }
  100%{ opacity:0; transform: translate(-50%,calc(-50% - 40px)) scale(1); }
}

/* Ripple effect on click */
.mg-ripple{
  position:absolute;
  border:2px solid rgba(255,255,255,0.6);
  border-radius:50%;
  pointer-events:none;
  transform: translate(-50%,-50%);
  animation: rippleExpand .5s ease-out forwards;
}
.mg-ripple.gold{ border-color: #ffd94b; }
@keyframes rippleExpand{
  0%  { opacity:1; width:0;    height:0; }
  100%{ opacity:0; width:120px; height:120px; }
}

/* Game over screen */
.mg-gameover{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:10px;
  background:rgba(10,0,30,0.92);
  animation: fadeIn .3s ease;
}
@keyframes fadeIn{
  from{ opacity:0; }
  to  { opacity:1; }
}
.mg-gameover-title{
  font-family:var(--font-pixel);
  font-size:16px;
  color:var(--pink);
  text-shadow:0 0 10px var(--pink);
  letter-spacing:2px;
}
.mg-gameover-reward{
  font-family:var(--font-pixel);
  font-size:22px;
  color:var(--yellow);
  text-shadow:0 0 12px var(--yellow);
}
.mg-gameover-breakdown{
  font-size:14px;
  color:var(--muted);
  text-align:center;
}

/* Toasts */
.toast{
  position:fixed;top:10px;left:50%;transform:translateX(-50%);
  background:#0f0623;border:2px solid var(--yellow);padding:10px 16px;
  font-family:var(--font-pixel);font-size:10px;color:var(--yellow);
  text-shadow:0 0 6px var(--yellow);z-index:500;
  box-shadow:0 0 16px var(--yellow);
  animation:toastIn .25s ease, toastOut .25s ease 2.2s forwards;
}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes toastOut{to{opacity:0;transform:translate(-50%,-10px)}}

/* ============ RESPONSIVE ============ */
@media (max-width: 640px){
  body{ font-size:18px; }
  #game-screen{ padding:0; }
  .hud{ padding:8px 10px; }
  .hud-label{ display:none; }
  .hud-val{ font-size:12px; }
  .hud-pseudo{ font-size:9px; max-width:38vw; }
  .fun-row{ padding:6px 8px; gap:4px; }
  .fun-btn{ font-size:8px; padding:6px 8px; }
  .stats{ padding:8px 12px; gap:4px; }
  .stat{ grid-template-columns: 58px 1fr 28px; gap:6px; }
  .stat-label{ font-size:8px; }
  .info-row{ padding:8px 12px; font-size:10px; gap:6px; }
  .info-lbl{ display:none; }
  .stage-frame{
    width: min(96vw, 460px);
    height: min(72vh, 620px);
  }
  .controls-overlay{ bottom: 62px; padding: 0 10px; gap:6px; }
  .actions, .food-selector{ padding:6px; gap:5px; }
  .action, .food-item{ height:58px; }
  .action-icon{ font-size:20px; }
  .action-label{ font-size:7px; }
  .action-cost{ display:none; }
  .food-item{ font-size:24px; }
  .audio-bar{ padding:0; }
  .audio-main{ padding:6px 10px; gap:6px; }
  .audio-btn{ width:34px; height:34px; }
  .audio-btn.audio-btn-lg{ width:42px; height:42px; }
  .title-en{ font-size:32px; }
}
@media (max-width: 380px){
  .action, .food-item{ height:52px; }
  .action-icon{ font-size:18px; }
  .food-item{ font-size:20px; }
  .action-label{ font-size:6px; }
  .fun-btn{ font-size:7px; padding:5px 6px; }
}
@media (min-height: 900px){
  .stage-frame{
    width: min(94vw, 620px);
    height: min(82vh, 820px);
  }
}