@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@600;700;800&display=swap');

/* ================= DESIGN TOKENS =================
   Palette:
   --sky-top / --sky-bottom : daytime gradient
   --sun-gold   #FFC53D  – accent, energy crystals
   --kaiju-green #4CAE6E – Godzilla body
   --kaiju-dark  #2E8B52 – spikes / shading
   --kaiju-cream #FFF3D6 – belly / card background
   --coral       #FF6B5B – primary action / danger
   --ink         #1F3B34 – deep text
   Type: Fredoka (display, rounded/bubbly) + Nunito (UI/body)
   Signature element: the layered "jelly button" with a thick
   offset shadow that squashes on press, echoing a bouncy kaiju step.
==================================================== */
:root{
  --sky-top:#7fd8f0;
  --sky-bottom:#c9f3d8;
  --sun-gold:#ffc53d;
  --kaiju-green:#4cae6e;
  --kaiju-dark:#2e8b52;
  --kaiju-cream:#fff3d6;
  --coral:#ff6b5b;
  --coral-dark:#e2503f;
  --ink:#1f3b34;
  --card-bg:#fffaf0;
  --shadow-ink:#c98a3c;
  --radius-lg:28px;
  --radius-md:18px;
}

*{box-sizing:border-box;}
html,body{
  margin:0; padding:0; width:100%; height:100%;
  overflow:hidden; background:#12241d;
  font-family:'Nunito',sans-serif;
  color:var(--ink);
  -webkit-tap-highlight-color: transparent;
  touch-action:none;
}

#app{
  position:fixed; inset:0;
  width:100%; height:100%;
  overflow:hidden;
}

#game-canvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  background:linear-gradient(var(--sky-top), var(--sky-bottom));
}

/* ============ SCREEN / OVERLAY BASE ============ */
.screen{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  z-index:10;
}
.screen.overlay{
  background:rgba(18,36,29,0.55);
  backdrop-filter: blur(3px);
}
.hidden{ display:none !important; }

/* ============ MENU CARD ============ */
.menu-card{
  position:relative;
  background:var(--card-bg);
  border:5px solid var(--ink);
  border-radius:var(--radius-lg);
  box-shadow: 0 10px 0 var(--shadow-ink), 0 18px 30px rgba(0,0,0,0.35);
  padding:28px 32px 32px;
  width:min(420px, 90vw);
  max-height:88vh;
  overflow-y:auto;
  text-align:center;
  animation: pop-in .35s cubic-bezier(.34,1.56,.64,1);
}
.menu-card.small{ width:min(360px,88vw); }
@keyframes pop-in{
  from{ transform:scale(.85) translateY(10px); opacity:0; }
  to{ transform:scale(1) translateY(0); opacity:1; }
}

.game-title{
  font-family:'Fredoka',sans-serif;
  font-weight:700;
  line-height:1;
  margin:4px 0 6px;
  display:flex; flex-direction:column; gap:2px;
}
.t-godzilla{
  font-size:clamp(28px,7vw,40px);
  color:var(--coral);
  -webkit-text-stroke: 2px var(--ink);
  letter-spacing:1px;
}
.t-runner{
  font-size:clamp(20px,5vw,28px);
  color:var(--kaiju-green);
  -webkit-text-stroke: 1.5px var(--ink);
  letter-spacing:6px;
}

.menu-godzilla{
  width:100px; height:100px; margin:6px auto 10px;
}

.menu-highscore{
  margin-top:14px; font-weight:800; font-size:14px;
  color:var(--ink); opacity:.75;
}

/* ============ BUTTONS (signature jelly button) ============ */
.menu-buttons{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.btn{
  font-family:'Fredoka',sans-serif;
  font-size:16px; font-weight:600;
  color:var(--ink);
  background:#fff;
  border:3px solid var(--ink);
  border-radius:16px;
  padding:12px 18px;
  cursor:pointer;
  box-shadow:0 5px 0 var(--shadow-ink);
  transition: transform .08s ease, box-shadow .08s ease;
}
.btn:hover{ filter:brightness(1.04); }
.btn:active{
  transform: translateY(5px);
  box-shadow:0 0 0 var(--shadow-ink);
}
.btn-primary{
  background:var(--coral);
  color:#fff;
  box-shadow:0 5px 0 var(--coral-dark);
}
.btn-primary:active{ box-shadow:0 0 0 var(--coral-dark); }
.btn-danger{
  background:#ffe3e0; color:var(--coral-dark);
}
.icon-btn{
  width:40px; height:40px; border-radius:50%;
  border:3px solid var(--ink); background:#fff;
  box-shadow:0 4px 0 var(--shadow-ink);
  font-size:14px; cursor:pointer;
}
.icon-btn:active{ transform:translateY(4px); box-shadow:none; }

/* ============ ANIMATED MENU BACKGROUND ============ */
.menu-bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.sky{ position:absolute; inset:0; background:linear-gradient(var(--sky-top), var(--sky-bottom)); }
.sun{
  position:absolute; top:8%; right:12%;
  width:90px; height:90px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #fff6d8, var(--sun-gold) 70%);
  box-shadow:0 0 60px rgba(255,197,61,.7);
  animation: sun-pulse 4s ease-in-out infinite;
}
@keyframes sun-pulse{ 50%{ transform:scale(1.06);} }
.cloud{
  position:absolute; background:#fff; border-radius:50px;
  opacity:.9; filter:drop-shadow(0 4px 0 rgba(0,0,0,.05));
}
.cloud::before, .cloud::after{
  content:''; position:absolute; background:#fff; border-radius:50%;
}
.c1{ width:90px; height:32px; top:15%; left:-120px; animation: drift 22s linear infinite; }
.c1::before{ width:44px; height:44px; top:-20px; left:10px; }
.c1::after{ width:34px; height:34px; top:-12px; left:44px; }
.c2{ width:70px; height:26px; top:32%; left:-100px; animation: drift 30s linear infinite 4s; }
.c2::before{ width:34px; height:34px; top:-16px; left:8px; }
.c2::after{ width:26px; height:26px; top:-10px; left:34px; }
.c3{ width:110px; height:36px; top:6%; left:-150px; animation: drift 26s linear infinite 12s; }
.c3::before{ width:50px; height:50px; top:-24px; left:14px; }
.c3::after{ width:38px; height:38px; top:-14px; left:54px; }
@keyframes drift{ from{ transform:translateX(0);} to{ transform:translateX(130vw);} }

.heli{
  position:absolute; font-size:26px; filter:drop-shadow(0 3px 2px rgba(0,0,0,.25));
  animation: heli-fly 18s linear infinite;
}
.h1{ top:22%; left:-60px; animation-duration:19s; }
.h2{ top:44%; left:-60px; animation-duration:26s; animation-delay:6s; }
@keyframes heli-fly{
  0%{ transform:translateX(0) translateY(0); }
  50%{ transform:translateX(60vw) translateY(-14px); }
  100%{ transform:translateX(130vw) translateY(0); }
}

.city-silhouette{
  position:absolute; left:0; right:0; bottom:0; height:34%;
  background:
    linear-gradient(var(--kaiju-dark), var(--kaiju-dark)) 0 60% / 10% 40% no-repeat,
    linear-gradient(#2c6b46, #2c6b46) 8% 30% / 8% 70% no-repeat,
    linear-gradient(var(--kaiju-dark), var(--kaiju-dark)) 18% 50% / 9% 50% no-repeat,
    linear-gradient(#2c6b46, #2c6b46) 29% 20% / 7% 80% no-repeat,
    linear-gradient(var(--kaiju-dark), var(--kaiju-dark)) 38% 45% / 11% 55% no-repeat,
    linear-gradient(#2c6b46, #2c6b46) 51% 10% / 8% 90% no-repeat,
    linear-gradient(var(--kaiju-dark), var(--kaiju-dark)) 61% 40% / 10% 60% no-repeat,
    linear-gradient(#2c6b46, #2c6b46) 73% 25% / 9% 75% no-repeat,
    linear-gradient(var(--kaiju-dark), var(--kaiju-dark)) 84% 55% / 8% 45% no-repeat,
    linear-gradient(#2c6b46, #2c6b46) 93% 15% / 7% 85% no-repeat;
  opacity:.9;
}

/* ============ HUD ============ */
#hud{ pointer-events:none; align-items:stretch; flex-direction:column; justify-content:flex-start; z-index:5; }
.hud-top{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 16px 0; pointer-events:auto;
}
.hud-lives{ display:flex; gap:4px; font-size:22px; filter:drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.hud-score-block{ text-align:center; }
.hud-score{
  font-family:'Fredoka',sans-serif; font-size:30px; font-weight:700;
  color:#fff; -webkit-text-stroke:1.5px var(--ink);
}
.hud-best{ font-size:11px; font-weight:800; color:#fff; opacity:.85; letter-spacing:1px;}
.hud-bottom{
  display:flex; gap:14px; padding:6px 16px 0; pointer-events:none;
}
.hud-stat{
  background:rgba(255,255,255,.85); border:2px solid var(--ink);
  border-radius:12px; padding:3px 10px; font-weight:800; font-size:13px;
  display:flex; align-items:center; gap:4px;
}
.hud-stat.combo{ background:var(--sun-gold); }
#powerup-tray{
  position:absolute; top:80px; right:16px; display:flex; flex-direction:column; gap:8px;
}
.powerup-chip{
  width:44px; height:44px; border-radius:50%; border:3px solid var(--ink);
  background:#fff; display:flex; align-items:center; justify-content:center;
  font-size:20px; position:relative; box-shadow:0 3px 0 var(--shadow-ink);
}
.powerup-chip .ring{
  position:absolute; inset:-3px; border-radius:50%;
  border:3px solid var(--coral); clip-path:inset(0 0 0 0);
}
#boss-bar-wrap{
  position:absolute; top:12px; left:50%; transform:translateX(-50%);
  width:min(320px,70vw); text-align:center;
}
.boss-name{ font-family:'Fredoka',sans-serif; color:#fff; -webkit-text-stroke:1px var(--ink); font-size:13px; margin-bottom:2px;}
.boss-bar{ height:12px; background:#0003; border:2px solid var(--ink); border-radius:8px; overflow:hidden; }
.boss-bar-fill{ height:100%; background:var(--coral); width:100%; transition:width .2s; }

#toast-layer{
  position:absolute; top:110px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:6px; align-items:center;
}
.toast{
  font-family:'Fredoka',sans-serif; font-weight:600; font-size:14px;
  background:#fff; border:2px solid var(--ink); border-radius:20px;
  padding:5px 14px; box-shadow:0 3px 0 var(--shadow-ink);
  animation: toast-in .25s ease, toast-out .3s ease 1.4s forwards;
}
@keyframes toast-in{ from{ transform:translateY(-10px) scale(.8); opacity:0;} to{ transform:none; opacity:1;} }
@keyframes toast-out{ to{ opacity:0; transform:translateY(-6px) scale(.9);} }

/* ============ GAMEOVER / STATS ============ */
.gameover-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:8px 16px;
  background:var(--kaiju-cream); border:2px solid var(--ink); border-radius:14px;
  padding:12px 16px; margin:14px 0; font-weight:700; font-size:14px;
}
.new-best{
  font-family:'Fredoka',sans-serif; color:var(--coral-dark); font-weight:700;
  margin-bottom:10px; animation: bounce .6s ease infinite alternate;
}
@keyframes bounce{ to{ transform:translateY(-4px); } }
#go-achievements{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:10px; }
.ach-pill{
  font-size:11px; font-weight:800; background:var(--sun-gold);
  border:2px solid var(--ink); border-radius:12px; padding:3px 8px;
}

/* ============ LISTS (missions / skins) ============ */
.list-scroll{ max-height:52vh; overflow-y:auto; margin:12px 0; text-align:left; }
.list-scroll.grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mission-item{
  background:var(--kaiju-cream); border:2px solid var(--ink); border-radius:12px;
  padding:8px 12px; margin-bottom:8px;
}
.mission-item.done{ background:#d6f5df; }
.mission-title{ font-weight:800; font-size:13px; display:flex; justify-content:space-between; }
.mission-bar{ height:8px; background:#0002; border-radius:6px; overflow:hidden; margin-top:6px; }
.mission-bar-fill{ height:100%; background:var(--kaiju-green); }
.skin-item{
  background:var(--kaiju-cream); border:2px solid var(--ink); border-radius:14px;
  padding:10px; text-align:center; cursor:pointer; position:relative;
}
.skin-item.locked{ opacity:.55; cursor:not-allowed; }
.skin-item.selected{ outline:3px solid var(--coral); }
.skin-swatch{ width:44px; height:44px; border-radius:50%; margin:0 auto 6px; border:2px solid var(--ink); }
.skin-name{ font-weight:800; font-size:12px; }
.skin-lock{ font-size:10px; opacity:.7; }

/* ============ SETTINGS ============ */
.settings-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:10px 0; font-weight:700; font-size:14px;
}
.settings-row input[type=range]{ width:130px; }
.credits-text{ font-size:13px; line-height:1.6; text-align:left; }

/* ============ TOUCH CONTROLS ============ */
#touch-controls{
  position:absolute; bottom:18px; left:0; right:0; z-index:6;
  display:flex; justify-content:space-between; padding:0 20px; pointer-events:none;
}
.touch-btn{
  pointer-events:auto;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:14px;
  background:rgba(255,255,255,.85); border:3px solid var(--ink); border-radius:20px;
  padding:14px 20px; box-shadow:0 5px 0 var(--shadow-ink);
  user-select:none;
}
.touch-btn:active{ transform:translateY(4px); box-shadow:none; }

/* ============ RESPONSIVE ============ */
@media (max-width:520px){
  .menu-card{ padding:20px 18px 24px; }
  .hud-score{ font-size:24px; }
}
@media (max-height:480px) and (orientation:landscape){
  .menu-card{ padding:14px 20px; max-height:94vh; }
  .menu-godzilla{ width:60px; height:60px; margin:2px auto 6px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .cloud,.heli,.sun{ animation:none !important; }
}

/* Focus visibility for accessibility */
button:focus-visible, input:focus-visible, select:focus-visible{
  outline:3px solid var(--coral); outline-offset:2px;
}