/* ═══════════════════════════════════════════════════════════
   NUGZ — styles.css  (FINAL)
   Desktop: cinematic widescreen 3-column layout
   Mobile:  portrait-first, thumb-friendly, full-screen
═══════════════════════════════════════════════════════════ */

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

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --c-bg:        #040c02;
  --c-panel:     rgba(5,14,3,0.88);
  --c-border:    rgba(111,207,63,0.22);
  --c-green:     #6fcf3f;
  --c-green2:    #3da322;
  --c-green3:    #1f6012;
  --c-gold:      #f5c842;
  --c-purple:    #b07be0;
  --c-teal:      #5ecfc8;
  --c-red:       #ff5a3c;
  --c-text:      rgba(255,255,255,0.92);
  --c-muted:     rgba(255,255,255,0.38);
  --glow-g:      0 0 24px rgba(111,207,63,0.6);
  --glow-gold:   0 0 24px rgba(245,200,66,0.65);
  --font-head:   'Boogaloo', cursive;
  --font-hud:    'Orbitron', monospace;
  --font-body:   'Nunito', sans-serif;
  --sidebar-w:   220px;
  --sidebar-r:   200px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
}
html { font-size: 16px; height: 100%; overflow: hidden; }
body {
  width: 100vw; height: 100vh; overflow: hidden;
  background: var(--c-bg);
  font-family: var(--font-body);
  color: var(--c-text);
  touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}

/* ─── GLOBAL BACKGROUND ─────────────────────────────────── */
/*
 * BRIGHTNESS GUIDE:
 *   Menu:  bg-image at 0.72 — vivid, immersive, well-lit
 *   Game:  bg-image at 0.52 — darker so grid pops, but bg still visible
 *   Default (loading): 0.65
 * The vignette is kept very soft so the image reads through.
 */
#globalBg {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
.bg-image {
  position: absolute; inset: 0;
  background: url('nugz-background.png') center center / cover no-repeat;
  filter: brightness(0.65) saturate(1.25);
  transform: scale(1.04);   /* slight overscale hides edge artefacts */
  transition: filter 1s ease;
  will-change: filter;
}
body.on-menu  .bg-image { filter: brightness(0.72) saturate(1.3); }
body.on-game  .bg-image { filter: brightness(0.52) saturate(1.15); }
body.on-pause .bg-image,
body.on-levelup .bg-image,
body.on-gameover .bg-image { filter: brightness(0.35) saturate(1.0); }

/* Soft vignette — darkens corners only, centre stays clear */
.bg-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse at 50% 50%,
    transparent 40%,
    rgba(0,0,0,0.42) 72%,
    rgba(0,0,0,0.72) 100%
  );
}
/* Subtle scanlines texture */
.bg-scanlines {
  position: absolute; inset: 0; opacity: 0.018;
  background-image: repeating-linear-gradient(
    0deg,
    transparent, transparent 2px,
    rgba(0,0,0,1) 2px, rgba(0,0,0,1) 4px
  );
}

/* ─── TOUCH TO START SCREEN ────────────────────────────── */
#screen-start {
  position: fixed; inset: 0; z-index: 350;
  background: radial-gradient(circle at 50% 30%, rgba(111,207,63,0.18), rgba(0,0,0,0.96) 58%);
  align-items: center; justify-content: center;
  cursor: pointer;
}
#startGate {
  text-align: center;
  padding: 32px 24px;
  border: 1px solid rgba(111,207,63,0.4);
  border-radius: 16px;
  background: rgba(0,0,0,0.45);
  box-shadow: 0 0 40px rgba(111,207,63,0.18);
  animation: startPulse 1.8s ease-in-out infinite;
}
.start-title {
  font-family: var(--font-head);
  font-size: clamp(56px, 14vw, 88px);
  letter-spacing: 8px;
  color: var(--c-green);
  text-shadow: 0 0 18px rgba(111,207,63,0.7), 0 0 38px rgba(111,207,63,0.35);
}
.start-sub {
  margin-top: 10px;
  font-family: var(--font-hud);
  font-size: clamp(16px, 4.8vw, 22px);
  letter-spacing: 3px;
  color: #fff;
}
.start-hint {
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,0.78);
}
@keyframes startPulse {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50%      { transform: scale(1.04); opacity: 1; }
}
body.on-start .bg-image { filter: brightness(0.2); }
body.on-start #smokeLayer { display: none; }

/* ─── INTRO VIDEO SCREEN ─────────────────────────────────── */
#screen-intro {
  position: fixed; inset: 0; z-index: 300;
  background: #000;
  align-items: center; justify-content: center;
  cursor: pointer;
}
#screen-intro video {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}
#introSkip {
  position: absolute; bottom: max(40px, env(safe-area-inset-bottom, 40px)); right: 24px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.8);
  font-family: var(--font-hud); font-size: 12px; letter-spacing: 2px;
  padding: 8px 18px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;
  animation: introPulse 1.8s ease-in-out infinite;
}
@keyframes introPulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1;    }
}
body.on-intro  .bg-image { filter: brightness(0); }
body.on-intro  #smokeLayer { display: none; }

/* ─── ISMOKESHOP CREDIT VIDEO SCREEN ────────────────────── */
#screen-intro2 {
  position: fixed; inset: 0; z-index: 300;
  background: #000;
  align-items: center; justify-content: center;
  cursor: pointer;
}
#screen-intro2 video {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
}
#intro2Fade {
  position: absolute; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}
#intro2Skip {
  position: absolute; bottom: max(40px, env(safe-area-inset-bottom, 40px)); right: 24px;
  background: rgba(0,0,0,0.55);
  color: rgba(255,255,255,0.8);
  font-family: var(--font-hud); font-size: 12px; letter-spacing: 2px;
  padding: 8px 18px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.25);
  pointer-events: none;
  animation: introPulse 1.8s ease-in-out infinite;
}
body.on-intro2 .bg-image { filter: brightness(0); }
body.on-intro2 #smokeLayer { display: none; }

/* ─── SMOKE PARTICLES ────────────────────────────────────── */
#smokeLayer {
  position: fixed; inset: 0; z-index: 1;
  pointer-events: none; overflow: hidden;
}
.sp {
  position: absolute; bottom: -80px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,207,63,0.06) 0%, transparent 65%);
  animation: smokeUp var(--dur,10s) infinite ease-in var(--del,0s);
}
.sp:nth-child(1){--dur:11s;--del:0s;   left:6%;  width:100px;height:100px;}
.sp:nth-child(2){--dur:14s;--del:2.5s; left:20%; width:160px;height:160px;}
.sp:nth-child(3){--dur:12s;--del:5s;   left:38%; width:120px;height:120px;}
.sp:nth-child(4){--dur:13s;--del:1.2s; left:55%; width:140px;height:140px;}
.sp:nth-child(5){--dur:10s;--del:3.8s; left:72%; width:110px;height:110px;}
.sp:nth-child(6){--dur:15s;--del:7s;   left:85%; width:80px; height:80px;}
.sp:nth-child(7){--dur:12s;--del:9s;   left:48%; width:200px;height:200px;opacity:0.5;}
.sp:nth-child(8){--dur:16s;--del:4s;   left:30%; width:90px; height:90px;}
@keyframes smokeUp {
  0%   { transform:translateY(0) scale(1);         opacity:0; }
  8%   { opacity:1; }
  100% { transform:translateY(-115vh) scale(3.5);  opacity:0; }
}

/* ─── APP + SCREENS ──────────────────────────────────────── */
#app {
  position: relative; z-index: 2;
  width: 100vw; height: 100vh;
  overflow: hidden;
}
.screen {
  position: absolute; inset: 0;
  display: none;
}
.screen.active { display: flex; align-items: stretch; }

.overlay-screen {
  background: rgba(0,0,0,0.76);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 200;
  align-items: center !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════
   MAIN MENU — DESKTOP
═══════════════════════════════════════════════════════════ */
.menu-desktop { display: none; width:100%; height:100%; flex-direction:row; align-items:stretch; }
.menu-mobile  { display: none; }

.menu-desktop-left {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px; gap: 40px;
}
.menu-desktop-right {
  width: 340px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 40px 40px 0;
}

/* Logo */
.logo-area { text-align: center; position: relative; }
.logo-glow-ring {
  position: absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:360px; height:140px;
  background: radial-gradient(ellipse, rgba(111,207,63,0.42) 0%, transparent 68%);
  filter: blur(32px);
  animation: logoBreath 3.5s ease-in-out infinite;
}
@keyframes logoBreath {
  0%,100%{ opacity:.6; transform:translate(-50%,-50%) scale(1); }
  50%    { opacity:1;  transform:translate(-50%,-50%) scale(1.15); }
}
.logo-main {
  font-family: var(--font-head);
  font-size: clamp(80px, 10vw, 130px);
  color: var(--c-green);
  text-shadow:
    0 0 50px rgba(111,207,63,0.9),
    0 0 100px rgba(111,207,63,0.4),
    0 6px 0 var(--c-green3),
    0 10px 0 rgba(0,0,0,0.7);
  letter-spacing: 16px; line-height: 1;
  position: relative; z-index: 1;
}
.logo-tagline {
  font-family: var(--font-hud); font-size: 13px; font-weight: 400;
  color: var(--c-gold); letter-spacing: 6px;
  text-shadow: 0 0 12px rgba(245,200,66,0.5);
  margin-top: 8px;
}
.logo-brand {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 12px;
}
.brand-logo { height: 22px; opacity: 0.7; filter: drop-shadow(0 0 8px rgba(111,207,63,0.3)); }
.brand-url  { font-size: 10px; color: var(--c-muted); letter-spacing: 2px; }

/* Nug showcase */
.menu-nug-showcase {
  display: flex; gap: 16px; align-items: flex-end; justify-content: center;
}
.menu-nug-showcase .nug-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  cursor: default;
}
.menu-nug-showcase img {
  width: clamp(60px,5vw,80px); height: clamp(60px,5vw,80px);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.5)) drop-shadow(0 0 8px rgba(111,207,63,0.25));
  animation: nugFloat var(--dur,3.5s) ease-in-out infinite var(--del,0s);
  transition: filter .2s, transform .2s;
}
.menu-nug-showcase .nug-item:hover img {
  filter: drop-shadow(0 0 20px currentColor) brightness(1.3);
  transform: scale(1.12);
}
.menu-nug-showcase .nug-label {
  font-family: var(--font-hud); font-size: 7px; letter-spacing: 2px;
  color: var(--c-muted); text-align: center; text-transform: uppercase;
}
@keyframes nugFloat {
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%    { transform:translateY(-14px) rotate(3deg); }
}

/* Desktop menu panel */
.menu-panel {
  background: var(--c-panel);
  border: 1px solid var(--c-border); border-radius: 24px;
  padding: 32px 28px; width: 100%;
  box-shadow: 0 30px 80px rgba(0,0,0,0.7),
    inset 0 1px 0 rgba(111,207,63,0.12),
    inset 0 0 60px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; gap: 8px;
}
.menu-panel-header {
  font-family: var(--font-hud); font-size: 9px; font-weight: 700;
  color: var(--c-muted); letter-spacing: 4px;
  margin-bottom: 8px; padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border);
}
.menu-nav { display: flex; flex-direction: column; gap: 8px; }

.menu-btn {
  display: flex; align-items: center; gap: 14px;
  background: rgba(111,207,63,0.06);
  border: 1px solid rgba(111,207,63,0.12); border-radius: 12px;
  padding: 14px 18px;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-hud); font-size: 13px; font-weight: 700; letter-spacing: 2px;
  cursor: pointer; transition: background .12s ease, border-color .12s ease, transform .1s ease, box-shadow .12s ease, color .12s ease;
  text-align: left; width: 100%; position: relative; overflow: hidden;
  touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
}
.menu-btn::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
  background: var(--c-green); transform:scaleY(0); transition:transform .15s ease;
  border-radius: 0 2px 2px 0;
}
.menu-btn:hover {
  background: rgba(111,207,63,0.16); border-color: rgba(111,207,63,0.45);
  color: #fff; transform: translateX(5px);
  box-shadow: 4px 0 18px rgba(111,207,63,0.12);
}
.menu-btn:hover::before { transform:scaleY(1); }
.menu-btn:active,
.menu-btn.btn-pressing { transform:translateX(2px) scale(0.96); filter:brightness(1.18); box-shadow:none; }
.menu-btn:focus-visible { outline:2px solid var(--c-green); outline-offset:2px; }
.menu-btn--primary {
  background: linear-gradient(135deg, rgba(111,207,63,0.2), rgba(61,163,34,0.15));
  border-color: rgba(111,207,63,0.45); color: var(--c-green);
  animation: panelPulse 2.5s ease-in-out infinite;
}
@keyframes panelPulse {
  0%,100%{ box-shadow: 0 0 0 rgba(111,207,63,0); }
  50%    { box-shadow: 0 0 20px rgba(111,207,63,0.25), inset 0 0 20px rgba(111,207,63,0.05); }
}
.menu-btn--quit {
  background: transparent; border-color: transparent;
  color: var(--c-muted); margin-top: 4px;
}
.menu-btn--quit:hover { color:var(--c-red); background:rgba(255,90,60,0.08); border-color:rgba(255,90,60,0.2); }
.btn-icon  { font-size:18px; width:24px; text-align:center; }
.btn-label { flex:1; }
.btn-arrow { color:var(--c-muted); opacity:0; transition:opacity .15s, transform .15s; }
.menu-btn:hover .btn-arrow { opacity:1; transform:translateX(3px); }
.menu-panel-footer { margin-top:12px; padding-top:12px; border-top:1px solid var(--c-border); text-align:center; display:flex; flex-direction:column; align-items:center; gap:5px; }
.menu-panel-footer a { font-size:10px; color:var(--c-gold); letter-spacing:2px; text-decoration:none; text-shadow:0 0 8px rgba(245,200,66,0.4); transition:color .2s, text-shadow .2s; }
.menu-panel-footer a:hover { color:#fff; text-shadow:0 0 12px rgba(245,200,66,0.7); }
.footer-created-label { font-family:var(--font-hud); font-size:8px; font-weight:700; color:var(--c-muted); letter-spacing:3px; text-transform:uppercase; }
.footer-logos-row { display:flex; align-items:center; justify-content:center; gap:6px; }
.footer-collab-x { font-family:var(--font-hud); font-size:11px; font-weight:700; color:var(--c-muted); }
.footer-brand-logo { height:26px; opacity:0.72; filter:drop-shadow(0 0 8px rgba(111,207,63,0.35)); transition:opacity .2s; }
.footer-brand-logo--ismoke { height:28px; }
.footer-brand-logo:hover { opacity:1; }

/* ═══════════════════════════════════════════════════════════
   MAIN MENU — MOBILE
═══════════════════════════════════════════════════════════ */
.menu-mobile {
  width:100%; height:100%;
  flex-direction:column; align-items:center; justify-content:space-evenly;
  padding: 20px 16px env(safe-area-inset-bottom, 16px);
}
.mobile-logo { text-align:center; position:relative; }
.mobile-logo-glow {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:280px; height:100px;
  background: radial-gradient(ellipse, rgba(111,207,63,0.42) 0%, transparent 65%);
  filter: blur(26px);
  animation: logoBreath 3s ease-in-out infinite;
}
.mobile-logo-text {
  font-family: var(--font-head);
  font-size: clamp(78px,24vw,96px);
  color: var(--c-green);
  text-shadow:
    0 0 40px rgba(111,207,63,0.9),
    0 5px 0 var(--c-green3),
    0 8px 0 rgba(0,0,0,0.6);
  letter-spacing:10px; line-height:1; position:relative; z-index:1;
}
.mobile-logo-sub {
  font-family: var(--font-hud); font-size:11px; color:var(--c-gold);
  letter-spacing:4px; margin-top:4px;
  text-shadow: 0 0 10px rgba(245,200,66,0.5);
  background: rgba(0,0,0,0.35);
  padding: 4px 10px;
  border-radius: 999px;
}

/* Mobile nug row */
.mobile-nugs-row {
  display:flex; gap:12px; align-items:flex-end; justify-content:center; width:100%;
  min-height: 52px;
}
.mobile-nugs-row img {
  width:48px; height:48px;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,0.45)) drop-shadow(0 0 6px rgba(111,207,63,0.2));
  animation: nugFloat var(--dur,3s) ease-in-out infinite var(--del,0s);
}
.mobile-nugs-row img.sparkle {
  filter: drop-shadow(0 0 16px var(--c-green)) brightness(1.5);
  animation: nugSparkle 0.35s ease;
}
@keyframes nugSparkle {
  0%,100%{ transform:scale(1) rotate(0deg); }
  50%    { transform:scale(1.25) rotate(8deg); }
}

/* Mobile menu buttons */
.mobile-menu-btns {
  display:flex; flex-direction:column; gap:9px; width:100%; max-width:320px;
}
.mbtn {
  border:none; cursor:pointer; border-radius:14px;
  font-family: var(--font-head); font-size:22px; letter-spacing:3px;
  padding:15px 20px; width:100%;
  transition: transform .09s ease, box-shadow .09s ease, filter .09s ease, background .12s ease, border-color .12s ease;
  text-transform:uppercase;
  position:relative; overflow:hidden;
  touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
}
.mbtn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.1); opacity:0; transition:opacity .08s; }
.mbtn:active, .mbtn.btn-pressing { transform:translateY(3px) scale(0.96); filter:brightness(1.14); }
.mbtn:active::after, .mbtn.btn-pressing::after { opacity:1; }
.mbtn:focus-visible { outline:2px solid var(--c-green); outline-offset:3px; }
.mbtn--primary {
  background: linear-gradient(135deg, #7ee046, #3da322);
  color:#fff; box-shadow: 0 5px 0 #1a5a0a, 0 8px 28px rgba(111,207,63,0.45);
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
  animation: mBtnPulse 2.2s ease-in-out infinite;
}
.mbtn--primary:hover { filter:brightness(1.08); }
.mbtn--primary:active,
.mbtn--primary.btn-pressing {
  transform: translateY(5px) scale(0.97) !important;
  box-shadow: 0 0px 0 #1a5a0a, 0 2px 12px rgba(111,207,63,0.3) !important;
  animation: none !important;
}
@keyframes mBtnPulse {
  0%,100%{ box-shadow: 0 5px 0 #1a5a0a, 0 8px 28px rgba(111,207,63,0.45); }
  50%    { box-shadow: 0 5px 0 #1a5a0a, 0 8px 40px rgba(111,207,63,0.75), 0 0 60px rgba(111,207,63,0.2); }
}
.mbtn:not(.mbtn--primary):not(.mbtn--outline):not(.mbtn--ghost) {
  background: rgba(20,45,12,0.82); color:#a0e878;
  border: 2px solid rgba(111,207,63,0.3);
  box-shadow: 0 3px 0 rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}
.mbtn:not(.mbtn--primary):not(.mbtn--outline):not(.mbtn--ghost):hover {
  background: rgba(28,60,16,0.90); border-color: rgba(111,207,63,0.55);
  color:#b8f08a; box-shadow: 0 3px 0 rgba(0,0,0,0.5), 0 0 16px rgba(111,207,63,0.15);
}
.mbtn--outline {
  background: rgba(0,0,0,0.28); color:rgba(255,255,255,0.6);
  border: 2px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(4px);
}
.mbtn--outline:hover {
  background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.4);
  color: rgba(255,255,255,0.88);
}
.mbtn--ghost {
  background:transparent; border:none;
  color:rgba(255,255,255,0.25); font-size:16px;
}
.mbtn--ghost:hover { color:rgba(255,80,60,0.7); }
.mobile-footer { display:flex; flex-direction:column; justify-content:center; align-items:center; padding:8px 0 6px; gap:5px; }
.mobile-brand { height:26px; opacity:0.75; filter:drop-shadow(0 0 10px rgba(111,207,63,0.4)); transition:opacity .2s; }
.mobile-brand--ismoke { height:28px; }
.footer-link { font-size:9px; color:var(--c-gold); letter-spacing:2px; text-decoration:none; text-shadow:0 0 8px rgba(245,200,66,0.4); transition:color .2s; }
.footer-link:hover { color:#fff; }

/* ═══════════════════════════════════════════════════════════
   GAME SCREEN — DESKTOP (3-column)
═══════════════════════════════════════════════════════════ */
.game-desktop { display:none; width:100%; height:100%; flex-direction:row; align-items:stretch; }
.game-mobile  { display:none; }

/* Left sidebar */
.game-sidebar-left {
  width: var(--sidebar-w); flex-shrink:0;
  background: var(--c-panel);
  border-right: 1px solid var(--c-border);
  display:flex; flex-direction:column; align-items:center;
  padding:16px 14px; gap:8px; overflow:hidden;
}
.sidebar-logo {
  font-family: var(--font-head); font-size:38px; color:var(--c-green);
  text-shadow: var(--glow-g); letter-spacing:6px; margin-bottom:4px;
}
.sidebar-score-block { display:flex; flex-direction:column; align-items:center; width:100%; }
.sb-label {
  font-family: var(--font-hud); font-size:8px; font-weight:700;
  color:var(--c-muted); letter-spacing:3px; text-transform:uppercase;
  text-align:center; width:100%;
}
.sb-value {
  font-family: var(--font-hud); font-size:28px; font-weight:900;
  color:#fff; text-shadow:0 0 16px rgba(255,255,255,0.25);
  text-align:center; line-height:1.1;
}
.sb-value--gold  { color:var(--c-gold); text-shadow:var(--glow-gold); }
.sb-value--level { font-size:36px; color:var(--c-green); text-shadow:var(--glow-g); }
.sb-value--puffs { font-size:30px; color:#fff; }
.sb-value--puffs.low { color:var(--c-red); animation:puffWarn .6s ease-in-out infinite; }
.sb-value.bump { animation:hudBump .22s ease; }
@keyframes hudBump { 0%{transform:scale(1);} 45%{transform:scale(1.28); color:var(--c-gold);} 100%{transform:scale(1);} }
@keyframes puffWarn { 0%,100%{opacity:1;} 50%{opacity:0.3;} }

.sb-progress-wrap {
  width:100%; height:8px; background:rgba(0,0,0,0.5);
  border-radius:4px; overflow:hidden; border:1px solid rgba(111,207,63,0.15);
}
.sb-progress-bar {
  height:100%;
  background: linear-gradient(90deg, var(--c-green3), var(--c-green), var(--c-gold));
  width:0%; border-radius:4px; transition:width .35s ease;
  box-shadow: 0 0 8px rgba(111,207,63,0.6);
}
.sb-progress-label { font-family:var(--font-hud); font-size:9px; color:var(--c-muted); letter-spacing:1px; }
.sidebar-divider { width:80%; height:1px; background:var(--c-border); flex-shrink:0; }
.sidebar-combo {
  font-family:var(--font-head); font-size:28px; color:var(--c-gold);
  text-shadow:var(--glow-gold); min-height:36px; text-align:center;
}
.sidebar-combo.pop { animation:comboBurst .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes comboBurst { 0%{transform:scale(0.4);} 100%{transform:scale(1);} }
.sidebar-next {
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center; min-height:50px;
}
.sidebar-next img {
  width:38px; height:38px;
  filter:drop-shadow(0 0 6px rgba(111,207,63,0.4));
  animation:nextBob 2s ease-in-out infinite;
}
.sidebar-next img:nth-child(2){ animation-delay:.5s; }
.sidebar-next img:nth-child(3){ animation-delay:1s; }
@keyframes nextBob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-5px);} }
.sidebar-actions { width:100%; margin-top:auto; }
.side-btn {
  width:100%; padding:10px;
  background:rgba(111,207,63,0.1); border:1px solid rgba(111,207,63,0.25); border-radius:10px;
  color:var(--c-green); font-family:var(--font-hud); font-size:11px; font-weight:700; letter-spacing:2px;
  cursor:pointer; transition: background .1s, border-color .1s, transform .09s, filter .09s;
  touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
}
.side-btn:hover { background:rgba(111,207,63,0.22); border-color:rgba(111,207,63,0.55); filter:brightness(1.1); }
.side-btn:active, .side-btn.btn-pressing { transform:scale(0.95); filter:brightness(1.2); background:rgba(111,207,63,0.28); }
.side-btn:focus-visible { outline:2px solid var(--c-green); outline-offset:2px; }
.sidebar-brand { margin-top:8px; }
.sidebar-brand img { height:18px; opacity:0.42; }

/* Canvas area */
.game-canvas-wrap {
  flex:1; display:flex; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  /* Subtle green radial glow behind canvas */
  background: radial-gradient(ellipse at 50% 50%, rgba(6,20,4,0.55) 0%, rgba(2,8,1,0.8) 100%);
}
#gameCanvas {
  display:block; position:relative; z-index:1;
  border-radius:6px;
  box-shadow: 0 0 50px rgba(0,0,0,0.7), 0 0 0 1px rgba(111,207,63,0.12);
}
#popEffects {
  position:absolute; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
}

/* Right sidebar */
.game-sidebar-right {
  width:var(--sidebar-r); flex-shrink:0;
  background:var(--c-panel); border-left:1px solid var(--c-border);
  display:flex; flex-direction:column;
  padding:16px 14px; gap:10px;
  overflow-y:auto; scrollbar-width:none;
}
.game-sidebar-right::-webkit-scrollbar { display:none; }
.strain-guide { display:flex; flex-direction:column; gap:6px; }
.strain-item {
  display:flex; align-items:center; gap:8px;
  padding:6px 8px; border-radius:8px;
  background:rgba(111,207,63,0.04);
  border:1px solid rgba(111,207,63,0.08);
  transition:background .15s, border-color .15s;
}
.strain-item.active-match {
  background:rgba(111,207,63,0.14); border-color:rgba(111,207,63,0.3);
}
.strain-item img { width:28px; height:28px; }
.strain-info { display:flex; flex-direction:column; gap:1px; }
.strain-name { font-family:var(--font-hud); font-size:8px; font-weight:700; letter-spacing:1px; color:var(--c-green); }
.strain-desc { font-size:9px; color:var(--c-muted); }
.how-to-play { display:flex; flex-direction:column; gap:4px; }
.htp-item { font-size:10px; color:var(--c-gold); letter-spacing:.5px; padding:2px 0; text-shadow:0 0 6px rgba(245,200,66,0.3); }
.session-stats { display:flex; flex-direction:column; gap:6px; }
.stat-row {
  display:flex; justify-content:space-between;
  font-family:var(--font-hud); font-size:9px; color:var(--c-green); letter-spacing:1px;
  padding:4px 0; border-bottom:1px solid rgba(255,255,255,0.04);
}
.stat-row span:last-child { color:var(--c-gold); font-weight:700; }

/* ═══════════════════════════════════════════════════════════
   GAME SCREEN — MOBILE (stacked)
═══════════════════════════════════════════════════════════ */
.game-mobile {
  width:100%; height:100%;
  flex-direction:column; overflow:hidden;
}

/* Top HUD */
.mobile-hud {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px;
  background:rgba(0,0,0,0.58); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--c-border);
  flex-shrink:0; min-height:54px;
}
.mhud-left, .mhud-right {
  display:flex; flex-direction:column; gap:2px; min-width:72px;
}
.mhud-right { align-items:flex-end; }
.mhud-btn {
  background:rgba(111,207,63,0.15); border:1px solid rgba(111,207,63,0.3);
  color:var(--c-green); font-size:17px; border-radius:8px;
  padding:4px 8px; cursor:pointer; line-height:1;
}
.mhud-level { font-family:var(--font-hud); font-size:11px; color:var(--c-gold); letter-spacing:1px; }
.mhud-score-lbl { font-family:var(--font-hud); font-size:8px; color:var(--c-muted); letter-spacing:3px; text-align:center; }
.mhud-score {
  font-family:var(--font-head); font-size:30px; color:#fff;
  text-shadow:0 0 12px rgba(111,207,63,0.35); text-align:center;
}
.mhud-score.bump { animation:hudBump .22s ease; }
.mhud-combo {
  font-family:var(--font-head); font-size:18px; color:var(--c-gold);
  text-shadow:var(--glow-gold); min-height:22px; text-align:right;
}
.mhud-combo.pop { animation:comboBurst .3s cubic-bezier(.34,1.56,.64,1); }
.mhud-best { font-family:var(--font-hud); font-size:9px; color:rgba(245,200,66,0.42); letter-spacing:1px; }

/* Progress bar */
.mobile-progress {
  position:relative; height:7px; flex-shrink:0;
  background:rgba(0,0,0,0.5);
}
.mobile-progress-bar {
  height:100%;
  background: linear-gradient(90deg, var(--c-green3), var(--c-green), var(--c-gold));
  width:0%; transition:width .35s ease;
  box-shadow:0 0 8px rgba(111,207,63,0.6);
}
.mobile-progress-label {
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  font-family:var(--font-hud); font-size:7px; color:rgba(255,255,255,0.28);
}

/* Canvas area — NO extra dark overlay */
.mobile-canvas-area {
  flex:1; position:relative;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; min-height:0;
}
#gameCanvasMobile {
  display:block; position:relative; z-index:1;
  border-radius:4px;
}
#popEffectsMobile {
  position:absolute; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
}

/* Footer HUD */
.mobile-footer-hud {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px max(8px, env(safe-area-inset-bottom)) 16px;
  background:rgba(0,0,0,0.58); backdrop-filter:blur(8px);
  border-top:1px solid var(--c-border);
  flex-shrink:0; min-height:58px;
}
.mfhud-puffs {
  display:flex; align-items:center; gap:6px;
  font-family:var(--font-head); font-size:20px; color:#fff;
}
.puff-emoji { font-size:20px; }
.puffs-lbl { font-family:var(--font-hud); font-size:9px; color:var(--c-muted); letter-spacing:2px; }
.mfhud-puffs.low { color:var(--c-red); animation:puffWarn .6s ease-in-out infinite; }
.mfhud-next { display:flex; align-items:center; gap:8px; }
.next-lbl { font-family:var(--font-hud); font-size:8px; color:var(--c-muted); letter-spacing:3px; }
#m-next { display:flex; gap:5px; align-items:center; }
#m-next img {
  width:34px; height:34px;
  filter:drop-shadow(0 0 5px rgba(111,207,63,0.4));
  animation:nextBob 2s ease-in-out infinite;
}
#m-next img:nth-child(2){ animation-delay:.4s; }
#m-next img:nth-child(3){ animation-delay:.8s; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE: LAYOUT SWITCHING
═══════════════════════════════════════════════════════════ */
@media (max-width: 767px), (max-height: 500px) and (orientation: landscape) {
  .menu-desktop { display:none !important; }
  .menu-mobile  { display:flex !important; }
  .game-desktop { display:none !important; }
  .game-mobile  { display:flex !important; }
}
@media (min-width: 768px) and (min-height: 501px) {
  .menu-mobile  { display:none !important; }
  .menu-desktop { display:flex !important; }
  .game-mobile  { display:none !important; }
  .game-desktop { display:flex !important; }
}

/* ═══════════════════════════════════════════════════════════
   MODALS / OVERLAYS
═══════════════════════════════════════════════════════════ */
.modal {
  background: linear-gradient(150deg, rgba(7,18,4,0.97), rgba(3,10,2,0.97));
  border:1px solid var(--c-border); border-radius:24px;
  padding:36px 30px 30px;
  width:min(92vw, 380px);
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow: 0 32px 90px rgba(0,0,0,0.88), inset 0 1px 0 rgba(111,207,63,0.1);
  animation:modalIn .32s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
.modal::before {
  content:''; position:absolute; inset:0; border-radius:24px;
  background:radial-gradient(ellipse at 50% 0%, rgba(111,207,63,0.06) 0%, transparent 60%);
  pointer-events:none;
}
@keyframes modalIn {
  0%  { transform:scale(0.6) translateY(20px); opacity:0; }
  100%{ transform:scale(1)   translateY(0);    opacity:1; }
}
.modal-title {
  font-family:var(--font-head); font-size:34px; color:var(--c-green);
  text-shadow:var(--glow-g); letter-spacing:4px;
}
.modal-title--danger { color:var(--c-red); text-shadow:0 0 20px rgba(255,90,60,0.5); }

.modal-btn {
  border:none; cursor:pointer; border-radius:14px;
  font-family:var(--font-head); font-size:20px; letter-spacing:2px;
  padding:14px 20px; width:100%;
  text-transform:uppercase;
  transition: transform .09s ease, box-shadow .09s ease, filter .09s ease, background .12s ease, border-color .12s ease;
  position:relative; overflow:hidden;
  touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
}
.modal-btn::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,0.1); opacity:0; transition:opacity .08s; }
.modal-btn:active, .modal-btn.btn-pressing { transform:translateY(2px) scale(0.96); filter:brightness(1.14); }
.modal-btn:active::after, .modal-btn.btn-pressing::after { opacity:1; }
.modal-btn:focus-visible { outline:2px solid var(--c-green); outline-offset:3px; }
.modal-btn--primary {
  background:linear-gradient(135deg, #7ee046, #3da322); color:#fff;
  box-shadow:0 4px 0 #1a5a0a, 0 6px 20px rgba(111,207,63,0.4);
  text-shadow:0 1px 2px rgba(0,0,0,0.3);
}
.modal-btn--primary:hover { filter:brightness(1.08); }
.modal-btn--primary:active,
.modal-btn--primary.btn-pressing {
  box-shadow:0 0px 0 #1a5a0a, 0 2px 10px rgba(111,207,63,0.3) !important;
  transform:translateY(4px) scale(0.97) !important;
}
.modal-btn:not(.modal-btn--primary):not(.modal-btn--outline) {
  background:rgba(20,45,12,0.8); color:#90e060;
  border:1.5px solid rgba(111,207,63,0.25);
}
.modal-btn:not(.modal-btn--primary):not(.modal-btn--outline):hover {
  background:rgba(28,60,16,0.90); border-color:rgba(111,207,63,0.45); color:#a8f070;
}
.modal-btn--outline {
  background:rgba(0,0,0,0.2); color:rgba(255,255,255,0.55);
  border:1.5px solid rgba(255,255,255,0.18);
}
.modal-btn--outline:hover {
  background:rgba(255,255,255,0.07); border-color:rgba(255,255,255,0.38);
  color:rgba(255,255,255,0.85);
}
.modal-btn--pulse { animation:mBtnPulse 2s ease-in-out infinite; }

.modal--info {
  max-width:520px;
  width:min(92vw, 520px);
}

.info-stack {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:18px 0 20px;
}

.info-card {
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(111,207,63,0.08);
  border:1px solid rgba(111,207,63,0.16);
  color:rgba(255,255,255,0.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03);
}

.info-icon {
  flex:0 0 28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  filter:drop-shadow(0 0 8px rgba(111,207,63,0.25));
}

.stats-grid {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:18px 0 20px;
}

.modal--info .stat-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(20,45,12,0.72);
  border:1px solid rgba(111,207,63,0.14);
}

.modal--info .stat-row span:first-child {
  color:var(--c-muted);
  font-family:var(--font-hud);
  letter-spacing:1.5px;
  font-size:12px;
}

.modal--info .stat-row span:last-child {
  color:var(--c-green);
  font-family:var(--font-head);
  letter-spacing:1px;
  font-size:20px;
  text-shadow:0 0 12px rgba(111,207,63,0.22);
}

.modal-btn--danger {
  background:rgba(255,90,60,0.12);
  border:1px solid rgba(255,90,60,0.28);
  color:#ffb0a0;
}

.modal-btn--danger:hover {
  background:rgba(255,90,60,0.2);
  border-color:rgba(255,90,60,0.45);
  color:#fff;
}

@media (max-width: 600px) {
  .modal--info {
    width:min(94vw, 520px);
  }

  .info-card,
  .modal--info .stat-row {
    padding:11px 12px;
  }

  .modal--info .stat-row span:last-child {
    font-size:18px;
  }
}

/* Game Over */
.modal--gameover .go-smoke { font-size:60px; animation:smokeSway 2.5s ease-in-out infinite; }
@keyframes smokeSway { 0%,100%{transform:rotate(-12deg);} 50%{transform:rotate(12deg);} }
.go-score-label { font-family:var(--font-hud); font-size:10px; color:var(--c-muted); letter-spacing:4px; }
.go-score { font-family:var(--font-head); font-size:64px; color:var(--c-gold); text-shadow:var(--glow-gold); line-height:1; }
.go-newbest { font-family:var(--font-head); font-size:20px; display:none; animation:rainbow 1.2s linear infinite; }
@keyframes rainbow { 0%{color:#f5c842;} 33%{color:#6fcf3f;} 66%{color:#b07be0;} 100%{color:#f5c842;} }
.go-stats {
  display:flex; gap:24px; padding:10px 16px;
  background:rgba(111,207,63,0.05); border:1px solid var(--c-border); border-radius:10px; width:100%;
}
.go-stat { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1; }
.go-stat span:first-child { font-family:var(--font-hud); font-size:8px; color:var(--c-muted); letter-spacing:2px; }
.go-stat span:last-child  { font-family:var(--font-head); font-size:24px; color:#fff; }

/* Level Up */
.modal--levelup { border-color:rgba(255,120,0,0.45); box-shadow:0 32px 90px rgba(0,0,0,0.88), 0 0 60px rgba(255,100,0,0.25), 0 0 120px rgba(255,60,0,0.12); padding-bottom:88px; }
.lu-stars { font-size:32px; letter-spacing:8px; animation:starBurst .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes starBurst { 0%{transform:scale(0) rotate(-30deg);} 100%{transform:scale(1) rotate(0);} }
.lu-badge { font-family:var(--font-hud); font-size:12px; font-weight:700; color:var(--c-gold); letter-spacing:8px; text-shadow:var(--glow-gold); }
.lu-number {
  font-family:var(--font-head); font-size:120px; line-height:1;
  color:var(--c-green); text-shadow:var(--glow-g), 0 0 80px rgba(111,207,63,0.3);
  animation:lvlBounce .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lvlBounce { 0%{transform:scale(0);} 100%{transform:scale(1);} }
.lu-msg    { font-size:18px; color:rgba(255,255,255,0.82); text-align:center; }
.lu-reward { font-family:var(--font-hud); font-size:11px; color:var(--c-teal); letter-spacing:2px; }

/* High Scores */
.modal--scores { gap:12px; }
.scores-list { width:100%; display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto; scrollbar-width:thin; }
.score-entry {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; border-radius:10px;
  background:rgba(111,207,63,0.05); border:1px solid rgba(111,207,63,0.1);
  flex-shrink:0;
}
.score-entry:first-child { background:rgba(245,200,66,0.1); border-color:rgba(245,200,66,0.3); }
.score-rank { font-family:var(--font-head); font-size:20px; color:var(--c-muted); width:32px; }
.score-entry:first-child .score-rank { color:var(--c-gold); }
.score-val  { font-family:var(--font-head); font-size:24px; color:#fff; }
.score-lvl  { font-family:var(--font-hud); font-size:10px; color:var(--c-muted); }

/* Options */
.modal--options { gap:6px; }
.opts-grid { width:100%; display:flex; flex-direction:column; gap:2px; }
.opt-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:11px 6px; border-bottom:1px solid rgba(255,255,255,0.05);
  font-family:var(--font-hud); font-size:11px; font-weight:700;
  letter-spacing:2px; color:rgba(255,255,255,0.72); gap:12px;
}
.opt-row--full { flex-direction:column; align-items:flex-start; gap:8px; }
.tog { position:relative; display:inline-block; width:50px; height:28px; flex-shrink:0; }
.tog input { opacity:0; width:0; height:0; }
.tog-sl {
  position:absolute; cursor:pointer; inset:0;
  background:rgba(255,255,255,0.08); border-radius:28px;
  border:1px solid rgba(255,255,255,0.12); transition:.3s;
}
.tog-sl::before {
  content:''; position:absolute; width:22px; height:22px;
  border-radius:50%; left:3px; top:2px;
  background:rgba(255,255,255,0.35); transition:.3s;
}
.tog input:checked + .tog-sl { background:var(--c-green2); border-color:var(--c-green); }
.tog input:checked + .tog-sl::before {
  transform:translateX(22px); background:#fff;
  box-shadow:0 0 10px rgba(111,207,63,0.6);
}
.vol-range {
  width:100%; appearance:none; height:4px;
  background:rgba(255,255,255,0.12); border-radius:2px; outline:none; cursor:pointer;
}
.vol-range::-webkit-slider-thumb {
  appearance:none; width:18px; height:18px; border-radius:50%;
  background:var(--c-green); cursor:pointer; box-shadow:0 0 8px rgba(111,207,63,0.5);
}

/* ═══════════════════════════════════════════════════════════
   POP EFFECTS
═══════════════════════════════════════════════════════════ */
.pop-text {
  position:absolute; pointer-events:none;
  font-family:var(--font-head); white-space:nowrap;
  text-shadow:0 2px 8px rgba(0,0,0,0.85), 0 0 12px currentColor;
  animation:popFloat .95s ease forwards; z-index:10;
}
@keyframes popFloat {
  0%  { transform:translateY(0) scale(0.3);   opacity:1; }
  55% { transform:translateY(-44px) scale(1.3); opacity:1; }
  100%{ transform:translateY(-88px) scale(0.6); opacity:0; }
}
.particle {
  position:absolute; border-radius:50%; pointer-events:none;
  animation:pFly .72s ease forwards;
}
@keyframes pFly {
  0%  { transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--dx),var(--dy)) scale(0); opacity:0; }
}
.fx-select {
  position:absolute; border-radius:10px;
  border:2.5px solid var(--c-green);
  box-shadow:0 0 14px var(--c-green), inset 0 0 8px rgba(111,207,63,0.15);
  pointer-events:none; z-index:5;
  animation:selectIn .22s ease forwards;
}
@keyframes selectIn { 0%{opacity:0;transform:scale(0.5);} 70%{transform:scale(1.1);} 100%{opacity:1;transform:scale(1);} }
.fx-deselect {
  position:absolute; border-radius:10px;
  border:2px solid rgba(255,255,255,0.28);
  pointer-events:none; z-index:5;
  animation:deselectOut .22s ease forwards;
}
@keyframes deselectOut { 0%{opacity:1;transform:scale(1);} 100%{opacity:0;transform:scale(1.35);} }
.fx-screen-flash {
  position:fixed; inset:0; pointer-events:none; z-index:400;
  animation:sFlash .45s ease forwards;
}
@keyframes sFlash { 0%{opacity:0.55;} 100%{opacity:0;} }

/* ═══════════════════════════════════════════════════════════
   FIRE PARTICLES (nug clear burst)
═══════════════════════════════════════════════════════════ */
.fire-particle {
  position:absolute; pointer-events:none;
  border-radius:50% 50% 35% 35%;
  animation:fireFly 0.6s ease-out forwards;
}
@keyframes fireFly {
  0%   { transform:translate(0,0) scale(1.2); opacity:1; }
  45%  { opacity:0.85; }
  100% { transform:translate(var(--fdx,0px),var(--fdy,-60px)) scale(0.05); opacity:0; }
}

/* ═══════════════════════════════════════════════════════════
   LEVEL-UP FIRE FLAMES (CSS flame pillars)
═══════════════════════════════════════════════════════════ */
.lu-fire {
  position:absolute; bottom:0; left:0; right:0; height:82px;
  pointer-events:none; border-radius:0 0 24px 24px; overflow:hidden;
}
.lu-flame {
  position:absolute; bottom:-6px;
  border-radius:50% 50% 20% 20% / 60% 60% 30% 30%;
  transform-origin:bottom center;
  animation:flameDance 0.9s ease-in-out infinite alternate;
  filter:blur(1.5px);
}
.lu-flame:nth-child(1){left:4%;  width:28px;height:50px; animation-delay:0s;    background:radial-gradient(ellipse at 50% 100%,#ffee22,#ff6600 55%,transparent);}
.lu-flame:nth-child(2){left:18%; width:34px;height:68px; animation-delay:0.18s; background:radial-gradient(ellipse at 50% 100%,#ffcc00,#ff4400 55%,transparent);}
.lu-flame:nth-child(3){left:35%; width:40px;height:80px; animation-delay:0.32s; background:radial-gradient(ellipse at 50% 100%,#ffdd22,#ff5500 58%,transparent);}
.lu-flame:nth-child(4){left:52%; width:38px;height:74px; animation-delay:0.08s; background:radial-gradient(ellipse at 50% 100%,#ffbb00,#ff3300 55%,transparent);}
.lu-flame:nth-child(5){left:68%; width:32px;height:60px; animation-delay:0.25s; background:radial-gradient(ellipse at 50% 100%,#ffee22,#ff7700 55%,transparent);}
.lu-flame:nth-child(6){left:83%; width:26px;height:46px; animation-delay:0.42s; background:radial-gradient(ellipse at 50% 100%,#ffdd00,#ff5500 55%,transparent);}
@keyframes flameDance {
  0%  {transform:scaleX(1)    scaleY(0.88) skewX(0deg);   opacity:0.9;}
  35% {transform:scaleX(0.82) scaleY(1.12) skewX(-5deg);  opacity:1;}
  70% {transform:scaleX(1.12) scaleY(0.94) skewX(4deg);   opacity:0.85;}
  100%{transform:scaleX(0.88) scaleY(1.06) skewX(-2deg);  opacity:0.95;}
}

/* ═══════════════════════════════════════════════════════════
   BUTTON RESPONSIVENESS ENHANCEMENTS
═══════════════════════════════════════════════════════════ */

/* Ripple click animation — injected element via CSS */
@keyframes btnRipple {
  0%   { transform:scale(0); opacity:0.55; }
  80%  { transform:scale(2.8); opacity:0.12; }
  100% { transform:scale(3.2); opacity:0; }
}
.btn-ripple {
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,0.45);
  width:40px; height:40px;
  margin-top:-20px; margin-left:-20px;
  pointer-events:none; z-index:10;
  animation:btnRipple 0.5s ease-out forwards;
}

/* Menu panel primary button selected (focused via keyboard) */
.menu-btn--primary:focus-visible {
  outline:2px solid rgba(111,207,63,0.9);
  outline-offset:3px;
  box-shadow: 0 0 0 4px rgba(111,207,63,0.15), 0 0 24px rgba(111,207,63,0.3);
}

/* ─── CREATED-BY COLLAB ROW (desktop only) ───────────────── */
.logo-created-by {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 14px;
}
.created-by-label {
  font-family: var(--font-hud); font-size: 9px; font-weight: 700;
  color: var(--c-muted); letter-spacing: 4px; text-transform: uppercase;
}
.collab-logos {
  display: flex; align-items: center; gap: 14px;
}
.collab-logo {
  height: 28px; opacity: 0.82;
  filter: drop-shadow(0 0 8px rgba(111,207,63,0.3));
  transition: opacity .2s, filter .2s;
}
.collab-logo:hover { opacity: 1; filter: drop-shadow(0 0 14px rgba(111,207,63,0.65)); }
.collab-logo--ismoke { height: 34px; }
.collab-x {
  font-family: var(--font-hud); font-size: 14px;
  color: var(--c-muted); opacity: 0.65; line-height: 1;
}

/* ─── DESKTOP HERO AREA: restore full glow ring now NUGZ is back ─ */
/* (the shrunk overrides below were only needed when NUGZ was absent) */
.logo-area .logo-tagline { margin-top: 10px; }

/* ─── DESKTOP LEFT PANEL: tighter vertical centering ─────── */
.menu-desktop-left { gap: 32px; }

/* ─── MOBILE: no NUGZ text title — bg image carries branding ─ */
.mobile-logo-sub { font-size: 13px; letter-spacing: 5px; margin-top: 0; }
.mobile-logo-glow { height: 60px; }

/* ─── MOBILE PORTRAIT MENU POSITIONING: avoid title overlap ─ */
@media (max-width: 767px) and (orientation: portrait) {
  .menu-mobile {
    justify-content: flex-start;
    padding-top: max(160px, env(safe-area-inset-top, 0px) + 20vh);
    gap: 14px;
  }

  .mobile-logo-sub {
    margin-top: 6px;
  }

  .mobile-nugs-row {
    margin-top: 10px;
  }

  .mobile-menu-btns {
    margin-top: 16px;
  }
}

/* ═══════════════════════════════════════════════════════════
   SPECIAL POWERUP NUG CLASSES
   Used when the game renders via DOM elements instead of canvas.
   The canvas path draws overlays directly via drawSpecialOverlay().
═══════════════════════════════════════════════════════════ */

/* Base class applied to all special nugs */
.nug-special {
  position: relative;
  z-index: 0;
}
.nug-special::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 12px;
  pointer-events: none;
  z-index: 1;
  animation: specialPulse 2s ease-in-out infinite;
}

/* Ladybug — red circle with black dots badge overlay */
.nug-special.special-ladybug::after {
  border: 2px solid rgba(220, 40, 40, 0.75);
  box-shadow:
    0 0 8px rgba(220, 40, 40, 0.6),
    0 0 18px rgba(220, 40, 40, 0.25),
    inset 0 0 6px rgba(220, 40, 40, 0.15);
  animation-name: ladybugPulse;
}
/* Badge dot drawn via a radial pseudo-element */
.nug-special.special-ladybug::before {
  content: '🐞';
  position: absolute;
  top: -6px; right: -6px;
  font-size: 14px;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(220,20,20,0.9));
  z-index: 2;
  pointer-events: none;
}

/* Seed — glowing golden ring aura */
.nug-special.special-seed::after {
  border: 2px solid rgba(245, 200, 66, 0.80);
  box-shadow:
    0 0 12px rgba(245, 200, 66, 0.65),
    0 0 28px rgba(245, 180, 20, 0.30),
    inset 0 0 8px rgba(245, 200, 66, 0.12);
  animation-name: seedPulse;
}
.nug-special.special-seed::before {
  content: '';
  position: absolute;
  top: -5px; right: -5px;
  width: 14px; height: 18px;
  background: radial-gradient(ellipse at 40% 35%, #fff7a0 0%, #f5d020 55%, transparent 100%);
  border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
  transform: rotate(-15deg);
  box-shadow: 0 0 6px rgba(245,200,66,0.8);
  z-index: 2;
  pointer-events: none;
}

/* Water — blue droplet aura */
.nug-special.special-water::after {
  border: 2px solid rgba(94, 207, 200, 0.75);
  box-shadow:
    0 0 10px rgba(94, 207, 200, 0.60),
    0 0 24px rgba(94, 207, 200, 0.25),
    inset 0 0 6px rgba(94, 207, 200, 0.12);
  animation-name: waterPulse;
}
.nug-special.special-water::before {
  content: '💧';
  position: absolute;
  top: -7px; right: -5px;
  font-size: 13px;
  line-height: 1;
  filter: drop-shadow(0 0 5px rgba(94,207,200,0.9));
  z-index: 2;
  pointer-events: none;
}

/* ── Keyframe pulses (one per special type for distinct rhythm) ── */
@keyframes specialPulse {
  0%, 100% { opacity: 0.85; }
  50%       { opacity: 1; }
}
@keyframes ladybugPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(220,40,40,0.6),  0 0 18px rgba(220,40,40,0.25); }
  50%       { box-shadow: 0 0 14px rgba(220,40,40,0.9), 0 0 30px rgba(220,40,40,0.45); }
}
@keyframes seedPulse {
  0%, 100% { box-shadow: 0 0 12px rgba(245,200,66,0.65), 0 0 28px rgba(245,180,20,0.30); }
  50%       { box-shadow: 0 0 20px rgba(245,200,66,0.90), 0 0 44px rgba(245,180,20,0.55); }
}
@keyframes waterPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(94,207,200,0.60), 0 0 24px rgba(94,207,200,0.25); }
  50%       { box-shadow: 0 0 18px rgba(94,207,200,0.90), 0 0 38px rgba(94,207,200,0.45); }
}