/* ============================================================
   JIGGLE SAW — Master Stylesheet v2
   Pastel, child-friendly, bouncy — Android + Web responsive
   ============================================================ */

/* ── Design Tokens ─────────────────────────────────────────── */
:root {
  --clr-bg:          #f0f8ff;
  --clr-panel:       rgba(255,255,255,0.92);
  --clr-panel-solid: #ffffff;
  --clr-mint:        #b8f0d8;
  --clr-lavender:    #d4c8f0;
  --clr-peach:       #ffd4b8;
  --clr-sky:         #b8dff0;
  --clr-yellow:      #fff0b8;
  --clr-accent:      #7ec8c8;
  --clr-accent-dark: #5aadad;
  --clr-accent-warm: #f0a070;
  --clr-warm-dark:   #d4845a;
  --clr-text:        #4a4060;
  --clr-text-light:  #8878a0;
  --clr-success:     #70c870;
  --clr-danger:      #f07878;
  --clr-star:        #ffc840;

  --font-heading: 'Nunito', 'Quicksand', sans-serif;
  --font-body:    'Quicksand', 'Nunito', sans-serif;
  --font-hud:     'Comfortaa', 'Nunito', sans-serif;

  --radius-btn:   16px;
  --radius-panel: 24px;
  --radius-card:  20px;
  --radius-sm:    12px;

  --shadow-soft: 0 8px 32px rgba(160,140,200,0.18);
  --shadow-btn:  0 4px 16px rgba(126,200,200,0.35);
  --shadow-card: 0 6px 24px rgba(160,140,200,0.22);

  --spring-fast: cubic-bezier(0.34,1.56,0.64,1);
  --spring-med:  cubic-bezier(0.22,1.0,0.36,1.0);
  --ease-out:    cubic-bezier(0.0,0.0,0.2,1.0);
}

/* ── Global Reset ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

html, body {
  width:100%; height:100%; overflow:hidden;
  background:var(--clr-bg);
  font-family:var(--font-body);
  color:var(--clr-text);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  -webkit-user-select:none;
}

/* ── Canvas ─────────────────────────────────────────────────── */
#game-canvas {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  display:block; touch-action:none;
}

/* ── UI Root ────────────────────────────────────────────────── */
#ui-root {
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  pointer-events:none; overflow:hidden;
}

/* ── Screen Base ────────────────────────────────────────────── */
.screen {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity 280ms var(--ease-out);
}
.screen.visible  { opacity:1; pointer-events:all; }
.screen.fade-in  { opacity:1; }
.screen.fade-out { opacity:0; transition:opacity 200ms var(--ease-out); }

/* ── Screen entrance animations ──────────────────────────────── */
.screen.enter-pop {
  animation:popIn 280ms var(--spring-fast) backwards;
}
.screen.enter-slide {
  animation:slideIn 260ms var(--spring-fast) backwards;
}

/* ── Keyframe Animations ────────────────────────────────────── */

/* Title letter fly-in (jigsaw assembly) */
@keyframes letterFlyIn {
  0%   { transform:translate(var(--fly-x,0),var(--fly-y,-80px)) scale(0.4) rotate(var(--fly-r,0deg)); opacity:0; }
  70%  { transform:translate(0,0) scale(1.15) rotate(0deg); opacity:1; }
  85%  { transform:translate(0,0) scale(0.95) rotate(0deg); }
  100% { transform:translate(0,0) scale(1.0) rotate(0deg); opacity:1; }
}

/* Title bounce after all letters land */
@keyframes titleBounce {
  0%,100% { transform:translateY(0); }
  40%     { transform:translateY(-10px); }
  60%     { transform:translateY(-5px); }
  80%     { transform:translateY(-8px); }
}

/* Button bounce-in entrance */
@keyframes bounceIn {
  0%   { transform:scale(0.3); opacity:0; }
  50%  { transform:scale(1.12); opacity:1; }
  70%  { transform:scale(0.95); }
  85%  { transform:scale(1.04); }
  100% { transform:scale(1.0); opacity:1; }
}

@keyframes cardPop {
  0%   { transform:skewX(-1deg) scale(0.4); opacity:0; }
  60%  { transform:skewX(-1deg) scale(1.08); opacity:1; }
  100% { transform:skewX(-1deg) scale(1.0);  opacity:1; }
}

/* Page peel for level-select */
@keyframes pagePeelIn {
  from { transform:perspective(1200px) rotateY(-22deg) translateX(55%); opacity:0; }
  to   { transform:perspective(1200px) rotateY(0deg) translateX(0%);    opacity:1; }
}

@keyframes wobble {
  0%,100% { transform:rotate(0deg); }
  20%     { transform:rotate(-4deg) scale(1.04); }
  40%     { transform:rotate(3deg) scale(1.02); }
  60%     { transform:rotate(-2deg); }
  80%     { transform:rotate(1deg); }
}

@keyframes jiggleTitle {
  0%,100% { transform:translateY(0px) rotate(0deg); }
  25%     { transform:translateY(-8px) rotate(-2deg); }
  75%     { transform:translateY(-4px) rotate(2deg); }
}

@keyframes floatUp {
  0%   { transform:translateY(0px)   rotate(0deg); opacity:0.15; }
  50%  { transform:translateY(-18px) rotate(5deg); opacity:0.25; }
  100% { transform:translateY(0px)   rotate(-3deg); opacity:0.15; }
}

@keyframes snapPulse {
  0%   { transform:scale(1.0); }
  30%  { transform:scale(1.18); }
  60%  { transform:scale(0.94); }
  80%  { transform:scale(1.05); }
  100% { transform:scale(1.0); }
}

@keyframes fadeIn {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes slideUp {
  from { transform:translateY(100%); opacity:0; }
  to   { transform:translateY(0);    opacity:1; }
}

@keyframes slideDown {
  from { transform:translateY(-40px); opacity:0; }
  to   { transform:translateY(0);     opacity:1; }
}

@keyframes starPop {
  0%   { transform:scale(0) rotate(-30deg); opacity:0; }
  60%  { transform:scale(1.3) rotate(10deg); opacity:1; }
  80%  { transform:scale(0.9) rotate(-5deg); }
  100% { transform:scale(1.0) rotate(0deg); opacity:1; }
}

@keyframes pulse {
  0%,100% { transform:scale(1.0); }
  50%     { transform:scale(1.06); }
}

@keyframes confettiFall {
  0%   { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100% { transform:translateY(120vh) rotate(720deg); opacity:0; }
}

@keyframes hintGlow {
  0%,100% { box-shadow:0 0 0 0 rgba(126,200,200,0.4); }
  50%     { box-shadow:0 0 0 8px rgba(126,200,200,0); }
}

/* Hint badge */
.hud-hint-badge {
  position:absolute; top:-6px; right:-6px;
  min-width:20px; height:20px; padding:0 5px;
  border-radius:10px;
  background:linear-gradient(135deg, #e0c040, #c8a830);
  color:#fff; font-family:var(--font-hud); font-weight:800; font-size:0.7rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(160,130,50,0.35);
  pointer-events:none; z-index:1;
  border:1.5px solid rgba(255,255,255,0.4);
}

@keyframes shopBounce {
  0%,100% { transform:scale(1) rotate(0deg); }
  30%     { transform:scale(1.12) rotate(-3deg); }
  60%     { transform:scale(1.08) rotate(2deg); }
}

/* Screen exit: jiggly shrink */
@keyframes jiggleAway {
  0%   { transform:scale(1) rotate(0deg); opacity:1; }
  40%  { transform:scale(1.04) rotate(-2deg); opacity:0.6; }
  100% { transform:scale(0.85) rotate(3deg); opacity:0; }
}

/* Screen exit: drop down */
@keyframes dropAway {
  0%   { transform:translateY(0); opacity:1; }
  100% { transform:translateY(40px); opacity:0; }
}

/* Screen exit: slide out */
@keyframes scatterAway {
  0%   { transform:translateX(0); opacity:1; }
  100% { transform:translateX(50px); opacity:0; }
}

/* Screen entrance: pop */
@keyframes popIn {
  0%   { transform:scale(0.9); opacity:0; }
  60%  { transform:scale(1.04); opacity:1; }
  100% { transform:scale(1); opacity:1; }
}

/* Screen entrance: slide up */
@keyframes slideIn {
  0%   { transform:translateY(30px); opacity:0; }
  70%  { transform:translateY(-4px); opacity:1; }
  100% { transform:translateY(0); opacity:1; }
}

/* ── Shared jiggly hover wobble ─────────────────────────────── */
@keyframes btnSquish {
  0%   { transform:scale(1); }
  40%  { transform:scale(0.88,1.08); }
  70%  { transform:scale(1.04,0.96); }
  100% { transform:scale(1); }
}

/* ── Jiggle Buttons (menu/screens) ──────────────────────────── */
.btn-jiggle {
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; padding:16px 40px;
  border:none; border-radius:18px 6px 18px 6px;
  font-family:var(--font-heading); font-weight:800; font-size:1.1rem;
  cursor:pointer; outline:none;
  transform:skewX(-3deg);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.12),
    0 6px 20px rgba(74,64,96,0.25),
    inset 0 2px 0 rgba(255,255,255,0.45);
  animation:bounceIn 0.45s var(--spring-fast) both;
  transition:transform 0.15s var(--spring-fast), box-shadow 0.15s ease;
  letter-spacing:0.04em; position:relative; overflow:hidden;
  border-bottom:3px solid rgba(0,0,0,0.15);
  text-shadow:0 1px 2px rgba(0,0,0,0.12);
}
.btn-jiggle::before {
  content:''; position:absolute; top:0; left:0; right:0; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%);
  border-radius:18px 6px 0 0;
  pointer-events:none;
}
.btn-jiggle:hover  {
  transform:skewX(-3deg) scale(1.08) rotate(-1.5deg);
  box-shadow:
    0 6px 0 rgba(0,0,0,0.10),
    0 10px 30px rgba(126,200,200,0.45),
    inset 0 2px 0 rgba(255,255,255,0.5);
}
.btn-jiggle:active {
  transform:skewX(-3deg) scale(0.95) translateY(2px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.15),
    0 2px 8px rgba(74,64,96,0.2),
    inset 0 2px 0 rgba(255,255,255,0.3);
}
.btn-jiggle > * { transform:skewX(3deg); }
.btn-jiggle:nth-child(1) { animation-delay:0ms; }
.btn-jiggle:nth-child(2) { animation-delay:80ms; border-radius:6px 18px 6px 18px; transform:skewX(3deg); }
.btn-jiggle:nth-child(2):hover { transform:skewX(3deg) scale(1.08) rotate(1.5deg); }
.btn-jiggle:nth-child(2):active { transform:skewX(3deg) scale(0.95) translateY(2px); }
.btn-jiggle:nth-child(2) > * { transform:skewX(-3deg); }
.btn-jiggle:nth-child(3) { animation-delay:160ms; }
.btn-jiggle:nth-child(4) { animation-delay:240ms; border-radius:6px 18px 6px 18px; transform:skewX(3deg); }
.btn-jiggle:nth-child(4):hover { transform:skewX(3deg) scale(1.08) rotate(1.5deg); }
.btn-jiggle:nth-child(4):active { transform:skewX(3deg) scale(0.95) translateY(2px); }
.btn-jiggle:nth-child(4) > * { transform:skewX(-3deg); }

.btn-primary   { background:linear-gradient(135deg, #8ed4d4, var(--clr-accent)); color:#fff; border-bottom-color:var(--clr-accent-dark); }
.btn-secondary { background:linear-gradient(135deg, #ffe0c8, var(--clr-peach)); color:var(--clr-text); border-bottom-color:var(--clr-warm-dark); }
.btn-danger    { background:linear-gradient(135deg, #e0d4f8, var(--clr-lavender)); color:var(--clr-text); border-bottom-color:#b0a0d0; }
.btn-success   { background:linear-gradient(135deg, #88d888, var(--clr-success)); color:#fff; border-bottom-color:#50a850; }

/* ── Flat 2D Buttons (HUD/Pause/Victory) ────────────────────── */
.btn-flat {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:12px 28px;
  border:2.5px solid rgba(0,0,0,0.08);
  border-radius:14px 5px 14px 5px;
  font-family:var(--font-heading); font-weight:700; font-size:1rem;
  cursor:pointer; outline:none;
  background:var(--clr-panel-solid); color:var(--clr-text);
  transform:skewX(-2deg);
  transition:background 0.15s ease, transform 0.12s var(--spring-fast), box-shadow 0.15s ease;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.10),
    0 4px 14px rgba(74,64,96,0.18),
    inset 0 1.5px 0 rgba(255,255,255,0.6);
  min-height:44px; min-width:44px;
  border-bottom:2.5px solid rgba(0,0,0,0.12);
  position:relative; overflow:hidden;
}
.btn-flat::before {
  content:''; position:absolute; top:0; left:0; right:0; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
  border-radius:14px 5px 0 0;
  pointer-events:none;
}
.btn-flat > * { transform:skewX(2deg); }
.btn-flat:hover  {
  background:var(--clr-accent); color:#fff;
  transform:skewX(-2deg) scale(1.06) rotate(-1deg);
  box-shadow:
    0 5px 0 rgba(0,0,0,0.08),
    0 8px 22px rgba(126,200,200,0.4),
    inset 0 1.5px 0 rgba(255,255,255,0.5);
}
.btn-flat:active {
  transform:skewX(-2deg) scale(0.95) translateY(2px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.12),
    0 2px 6px rgba(74,64,96,0.12);
}
.btn-flat.primary { background:linear-gradient(135deg, #8ed4d4, var(--clr-accent)); color:#fff; border-color:var(--clr-accent-dark); }
.btn-flat.primary:hover { background:var(--clr-accent-dark); }
.btn-flat.danger  { background:linear-gradient(135deg, #ffe0e0, #ffd4d4); color:#c04040; border-color:#e08080; }
.btn-flat.danger:hover { background:#c04040; color:#fff; }
.btn-flat.success { background:linear-gradient(135deg, #88d888, var(--clr-success)); color:#fff; border-color:#50a850; }

/* ── HUD Icon Buttons ───────────────────────────────────────── */
.hud-icon-btn {
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:none; border-radius:12px 4px 12px 4px;
  font-size:1.15rem; cursor:pointer;
  background:linear-gradient(145deg, rgba(255,255,255,0.95), var(--clr-panel));
  color:var(--clr-text);
  box-shadow:
    0 3px 0 rgba(0,0,0,0.10),
    0 4px 12px rgba(74,64,96,0.2),
    inset 0 1.5px 0 rgba(255,255,255,0.7);
  transition:transform 0.12s var(--spring-fast), box-shadow 0.12s ease, background 0.15s ease;
  border:2px solid rgba(126,200,200,0.3);
  border-bottom:3px solid rgba(0,0,0,0.12);
  pointer-events:all;
  transform:skewX(-2deg);
}
.hud-icon-btn:hover  {
  transform:skewX(-2deg) scale(1.12) rotate(-3deg);
  box-shadow:
    0 5px 0 rgba(0,0,0,0.08),
    0 7px 18px rgba(126,200,200,0.4),
    inset 0 1.5px 0 rgba(255,255,255,0.6);
  background:linear-gradient(145deg, rgba(126,200,200,0.25), rgba(126,200,200,0.1));
}
.hud-icon-btn:active {
  transform:skewX(-2deg) scale(0.92) translateY(2px);
  box-shadow:
    0 1px 0 rgba(0,0,0,0.12),
    0 1px 4px rgba(74,64,96,0.12);
}
.hud-icon-btn.active { background:linear-gradient(145deg, #8ed4d4, var(--clr-accent)); color:#fff; border-color:var(--clr-accent-dark); }

/* ── Panel / Card ───────────────────────────────────────────── */
.panel {
  background:var(--clr-panel);
  border-radius:var(--radius-panel);
  box-shadow:var(--shadow-soft);
  padding:32px 40px;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.card {
  background:var(--clr-panel);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);
  padding:20px;
  transition:transform 0.2s var(--spring-fast), box-shadow 0.2s ease;
  cursor:pointer; border:3px solid transparent;
}
.card:hover { transform:scale(1.06) translateY(-4px); box-shadow:0 12px 36px rgba(160,140,200,0.3); }
.card:active { transform:scale(0.96); }
.card.selected { border-color:var(--clr-accent); animation:pulse 1s ease-in-out infinite; }

/* ── Main Menu ──────────────────────────────────────────────── */
#screen-menu { background:transparent; pointer-events:none; }

/* ── Splash Screen ──────────────────────────────────────────── */
#screen-splash {
  background:var(--clr-bg);
  cursor:pointer;
}
.splash-inner {
  display:flex; flex-direction:column; align-items:center; gap:16px;
  animation:popIn 0.5s var(--spring-fast) both;
}
.splash-logo {
  font-size:clamp(4rem,16vw,8rem);
  animation:jiggleTitle 2s ease-in-out infinite;
}
.splash-title {
  font-family:var(--font-heading); font-weight:900;
  font-size:clamp(2rem,8vw,4.5rem);
  color:var(--clr-accent);
  text-shadow:3px 4px 0 var(--clr-accent-dark);
  letter-spacing:0.05em;
}
.splash-tap {
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(1rem,3vw,1.4rem);
  color:var(--clr-text-light);
  animation:pulse 1.2s ease-in-out infinite;
  margin-top:8px;
}

.menu-overlay {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  pointer-events:none;
}
.screen.visible .menu-overlay > * { pointer-events:all; }

.menu-title-wrap {
  display:flex; align-items:center; gap:4px;
  margin-bottom:12px; position:relative;
}

.menu-title-letter {
  font-family:var(--font-heading); font-weight:900;
  font-size:clamp(2.4rem,8vw,5.5rem);
  color:var(--clr-accent);
  text-shadow:3px 4px 0 var(--clr-accent-dark), 0 8px 24px rgba(126,200,200,0.28);
  display:inline-block; line-height:1;
  opacity:0;
  animation:letterFlyIn 0.55s var(--spring-fast) both;
}
.menu-title-letter.space { width:0.4em; }
.menu-title-letter:nth-child(odd)  { color:var(--clr-accent); }
.menu-title-letter:nth-child(even) { color:var(--clr-accent-warm); }
.menu-title-letter.letter-jiggle {
  animation:letterJiggle 0.5s var(--spring-fast);
}
@keyframes letterJiggle {
  0%   { transform:scale(1) rotate(0); }
  15%  { transform:scale(1.25) rotate(-12deg); }
  30%  { transform:scale(0.9) rotate(8deg); }
  50%  { transform:scale(1.12) rotate(-5deg); }
  70%  { transform:scale(0.97) rotate(3deg); }
  100% { transform:scale(1) rotate(0); }
}

.menu-subtitle {
  font-family:var(--font-body); font-size:clamp(0.8rem,2.2vw,1.1rem);
  color:var(--clr-text-light); margin-bottom:40px;
  letter-spacing:0.08em; text-transform:uppercase;
  animation:fadeIn 0.5s ease 1.4s both;
}

.menu-buttons {
  display:flex; flex-direction:column;
  gap:14px; align-items:stretch; min-width:220px; width:260px;
  animation:fadeIn 0.5s ease 1.2s both;
}
.menu-buttons .btn-jiggle {
  width:100%; justify-content:center;
}

/* ── Screen Titles ──────────────────────────────────────────── */
.screen-title {
  font-family:var(--font-heading); font-weight:900;
  font-size:clamp(1.5rem,4.5vw,2.4rem);
  color:var(--clr-text); margin-bottom:8px; text-align:center;
}
.screen-subtitle {
  font-family:var(--font-body); font-size:0.95rem;
  color:var(--clr-text-light); margin-bottom:28px; text-align:center;
}

/* ── Image Select ───────────────────────────────────────────── */
#screen-image-select { background:linear-gradient(160deg,#e8f8f0 0%,#e0f0ff 100%); }

.image-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:14px; max-width:540px; width:90%; margin-bottom:24px;
}
@media (max-width:480px) { .image-grid { grid-template-columns:repeat(2,1fr); max-width:320px; } }

.image-card {
  aspect-ratio:4/3; border-radius:var(--radius-card);
  overflow:hidden; cursor:pointer; position:relative;
  border:3px solid transparent; box-shadow:var(--shadow-card);
  transition:transform 0.2s var(--spring-fast), border-color 0.15s ease, box-shadow 0.2s ease;
}
.image-card canvas, .image-card img { width:100%; height:100%; object-fit:cover; display:block; }
.image-card-label {
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(transparent,rgba(74,64,96,0.72));
  color:#fff; font-family:var(--font-body); font-size:0.72rem; font-weight:600;
  padding:16px 8px 6px; text-align:center;
}
.image-card:hover { transform:scale(1.06) translateY(-4px); box-shadow:0 12px 36px rgba(160,140,200,0.35); }
.image-card.selected { border-color:var(--clr-accent); }

/* ── Level Select (Full-screen immersive) ───────────────────── */
#screen-level-select {
  background:#0a0818;
  overflow:hidden;
}
/* entrance handled by enter-slide class in showScreen() */

.ls-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:blur(10px) brightness(0.45);
  transform:scale(1.08);
  transition:background-image 0.4s ease;
  pointer-events:none;
}

.ls-content {
  position:relative; z-index:1;
  width:100%; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start;
  padding:12px 0 0 0;
  gap:8px;
  overflow:hidden;
}

/* Tier tabs */
.ls-tier-tabs {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
  flex-shrink:0; padding:0 16px;
}
.ls-tier-tab {
  padding:12px 26px; border-radius:14px 5px 14px 5px;
  font-family:var(--font-heading); font-weight:800; font-size:0.95rem;
  cursor:pointer; border:2px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.12); backdrop-filter:blur(6px);
  color:rgba(255,255,255,0.85);
  transform:skewX(-3deg);
  transition:all 0.2s var(--spring-fast);
  min-height:44px; display:flex; align-items:center; gap:6px;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.12),
    0 4px 12px rgba(0,0,0,0.15),
    inset 0 1.5px 0 rgba(255,255,255,0.3);
  border-bottom:2.5px solid rgba(0,0,0,0.18);
  position:relative; overflow:hidden;
}
.ls-tier-tab::before {
  content:''; position:absolute; top:0; left:0; right:0; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  pointer-events:none;
}
.ls-tier-tab > * { transform:skewX(3deg); }
.ls-tier-tab:nth-child(1) { animation-delay:0ms; }
.ls-tier-tab:nth-child(2) { animation-delay:70ms; transform:skewX(3deg); border-radius:5px 14px 5px 14px; }
.ls-tier-tab:nth-child(2) > * { transform:skewX(-3deg); }
.ls-tier-tab:nth-child(3) { animation-delay:140ms; }
.ls-tier-tab:hover {
  transform:skewX(-3deg) scale(1.08) rotate(-1.5deg);
  background:rgba(255,255,255,0.28);
  box-shadow:0 5px 0 rgba(0,0,0,0.10), 0 7px 18px rgba(0,0,0,0.2), inset 0 1.5px 0 rgba(255,255,255,0.35);
}
.ls-tier-tab:nth-child(2):hover { transform:skewX(3deg) scale(1.08) rotate(1.5deg); }
.ls-tier-tab.active {
  background:linear-gradient(135deg, #8ed4d4, var(--clr-accent)); color:#fff;
  border-color:var(--clr-accent-dark); transform:skewX(-3deg) scale(1.05);
  box-shadow:0 4px 0 rgba(0,0,0,0.12), 0 6px 20px rgba(126,200,200,0.4), inset 0 1.5px 0 rgba(255,255,255,0.4);
}
.ls-tier-tab:nth-child(2).active { transform:skewX(3deg) scale(1.05); }

/* Scrollable grid container */
.ls-grid-scroll {
  flex:1 1 0;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding:8px 16px 16px;
  width:100%;
  mask-image:linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 60px), transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 8px, black calc(100% - 60px), transparent 100%);
}
.ls-grid-scroll::-webkit-scrollbar { display:none; }

/* Card grid */
.ls-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  max-width:740px;
  margin:0 auto;
  padding-bottom:80px;
}
@media (max-width:600px)  { .ls-grid { grid-template-columns:repeat(2, 1fr); max-width:400px; gap:10px; } }
@media (min-width:1000px) { .ls-grid { grid-template-columns:repeat(4, 1fr); max-width:960px; } }

/* Level card */
.ls-card {
  aspect-ratio:4/3;
  border-radius:16px 6px 16px 6px;
  overflow:hidden;
  cursor:pointer;
  position:relative;
  border:3px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.08);
  backdrop-filter:blur(4px);
  box-shadow:
    0 3px 0 rgba(0,0,0,0.12),
    0 6px 18px rgba(0,0,0,0.25),
    inset 0 1.5px 0 rgba(255,255,255,0.2);
  transform:skewX(-1deg);
  transition:transform 0.2s var(--spring-fast),
             border-color 0.2s ease,
             box-shadow 0.2s ease;
  animation:cardPop 0.35s var(--spring-fast) backwards;
}
.ls-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:45%;
  background:linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 100%);
  pointer-events:none; z-index:2;
}
.ls-card:hover {
  transform:skewX(-1deg) scale(1.06) rotate(-1deg);
  border-color:rgba(255,255,255,0.4);
  box-shadow:0 5px 0 rgba(0,0,0,0.10), 0 8px 24px rgba(0,0,0,0.3),
             inset 0 1.5px 0 rgba(255,255,255,0.3);
}
.ls-card.selected {
  border-color:var(--clr-accent);
  box-shadow:0 0 0 3px rgba(126,200,200,0.35),
             0 6px 20px rgba(126,200,200,0.3),
             inset 0 1.5px 0 rgba(255,255,255,0.3);
  transform:skewX(-1deg) scale(1.04);
}
.ls-card:active {
  transform:skewX(-1deg) scale(0.95) translateY(2px);
}

/* Card image */
.ls-card-img {
  width:100%; height:100%;
  object-fit:cover; display:block;
}

/* Card info overlay */
.ls-card-info {
  position:absolute;
  bottom:0; left:0; right:0;
  padding:18px 8px 6px;
  background:linear-gradient(transparent, rgba(0,0,0,0.7));
  display:flex; flex-direction:column; gap:2px;
  z-index:1;
}
.ls-card-name {
  color:#fff;
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(0.62rem, 1.6vw, 0.82rem);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ls-card-meta {
  display:flex; justify-content:space-between; align-items:center;
}
.ls-card-badge {
  background:rgba(126,200,200,0.85);
  color:#fff; font-family:var(--font-hud); font-weight:700;
  font-size:0.55rem; padding:2px 7px; border-radius:10px;
  letter-spacing:0.03em;
}
.ls-card-stars {
  font-size:0.65rem; letter-spacing:1px;
}

/* Empty state */
.ls-empty {
  grid-column:1 / -1;
  text-align:center;
  color:rgba(255,255,255,0.5); font-family:var(--font-heading); font-weight:700;
  font-size:1.2rem; padding:60px 0;
}

/* Bottom nav */
.ls-nav {
  position:absolute; bottom:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px 24px;
  background:linear-gradient(transparent, rgba(0,0,0,0.5));
  z-index:10;
  padding-bottom:calc(24px + env(safe-area-inset-bottom));
}

/* ── HUD ────────────────────────────────────────────────────── */
#screen-hud { pointer-events:none; justify-content:flex-start; align-items:stretch; }

.hud-bar {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; gap:10px;
  background:rgba(255,255,255,0.88); backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(126,200,200,0.15);
  pointer-events:all; box-shadow:0 2px 16px rgba(160,140,200,0.12);
}

.hud-thumb {
  width:36px; height:36px; border-radius:10px;
  overflow:hidden; border:2px solid var(--clr-accent); flex-shrink:0;
}
.hud-thumb canvas { width:100%; height:100%; object-fit:cover; }

.hud-timer {
  font-family:var(--font-hud); font-size:1.25rem; font-weight:700;
  color:var(--clr-text); letter-spacing:0.05em; min-width:60px; text-align:center;
}

.hud-mid {
  flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.hud-pieces { font-family:var(--font-hud); font-size:0.82rem; color:var(--clr-text-light); }
.hud-pieces span { font-weight:700; color:var(--clr-accent); font-size:1rem; }

.hud-right {
  display:flex; align-items:center; gap:6px;
}

.hud-pause-btn {
  background:linear-gradient(145deg, #8ed4d4, var(--clr-accent)); color:#fff;
  border:none; border-radius:12px 4px 12px 4px;
  width:44px; height:44px; font-size:1rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:transform 0.12s var(--spring-fast), box-shadow 0.12s ease;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.12),
    0 4px 12px rgba(74,64,96,0.22),
    inset 0 1.5px 0 rgba(255,255,255,0.4);
  border:2px solid var(--clr-accent-dark);
  border-bottom:3px solid rgba(0,0,0,0.15);
  pointer-events:all; flex-shrink:0;
  transform:skewX(-2deg);
}
.hud-pause-btn:hover  {
  transform:skewX(-2deg) scale(1.12) rotate(-3deg);
  box-shadow:0 5px 0 rgba(0,0,0,0.10), 0 7px 18px rgba(126,200,200,0.4), inset 0 1.5px 0 rgba(255,255,255,0.5);
}
.hud-pause-btn:active { transform:skewX(-2deg) scale(0.92) translateY(2px); }

/* Progress track */
.progress-track {
  width:100%; max-width:240px; height:8px;
  background:rgba(126,200,200,0.2); border-radius:8px; overflow:hidden;
}
.progress-fill {
  height:100%;
  background:linear-gradient(90deg,var(--clr-accent),var(--clr-success));
  border-radius:8px; transition:width 0.4s var(--spring-med);
}

/* ── Pause Screen ───────────────────────────────────────────── */
#screen-pause {
  background:rgba(74,64,96,0.42);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.pause-panel {
  background:var(--clr-panel-solid);
  border-radius:var(--radius-panel);
  padding:36px 44px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  box-shadow:0 20px 60px rgba(74,64,96,0.28);
  animation:slideUp 0.4s var(--spring-fast) both;
  min-width:clamp(240px,70vw,320px);
}

.pause-title {
  font-family:var(--font-heading); font-weight:900;
  font-size:1.9rem; color:var(--clr-text); margin-bottom:8px;
}

.pause-divider {
  width:100%; height:1px;
  background:rgba(126,200,200,0.25); margin:4px 0;
}

/* ── Settings Panel (inline modal) ─────────────────────────── */
.settings-panel {
  background:var(--clr-panel-solid);
  border-radius:var(--radius-panel);
  padding:32px 40px;
  display:flex; flex-direction:column; gap:18px;
  min-width:clamp(260px,80vw,340px);
  max-width:360px;
  box-shadow:0 20px 60px rgba(74,64,96,0.28);
  animation:bounceIn 0.4s var(--spring-fast) both;
}
.settings-panel.closing {
  animation:jiggleAway 350ms var(--spring-fast) forwards;
}

.settings-section-title {
  font-family:var(--font-heading); font-weight:700;
  font-size:0.8rem; text-transform:uppercase;
  letter-spacing:0.1em; color:var(--clr-text-light);
  margin-bottom:-6px;
}

.settings-row {
  display:flex; align-items:center; gap:12px;
  font-family:var(--font-body); font-size:1rem; color:var(--clr-text);
}
.settings-row label { flex:1; }

/* Audio Sliders */
.audio-slider-wrap {
  display:flex; flex-direction:column; gap:4px;
}
.audio-slider-label {
  display:flex; justify-content:space-between;
  font-family:var(--font-body); font-size:0.88rem; color:var(--clr-text);
}
.audio-slider {
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; border-radius:8px; outline:none; cursor:pointer;
  background:linear-gradient(to right,
    var(--clr-accent) 0%,
    var(--clr-accent) var(--val,70%),
    rgba(126,200,200,0.2) var(--val,70%),
    rgba(126,200,200,0.2) 100%);
}
.audio-slider::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%;
  background:var(--clr-accent);
  box-shadow:0 2px 8px rgba(126,200,200,0.5), 0 0 0 3px rgba(255,255,255,0.9);
  transition:transform 0.15s var(--spring-fast), background 0.1s;
  cursor:pointer;
}
.audio-slider::-webkit-slider-thumb:active { transform:scale(1.3); }
.audio-slider::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%; border:none;
  background:var(--clr-accent);
  box-shadow:0 2px 8px rgba(126,200,200,0.5);
  cursor:pointer;
}

/* ── Victory Screen ─────────────────────────────────────────── */
#screen-victory {
  background:linear-gradient(160deg,#fffbe8 0%,#e8fff0 50%,#e8f0ff 100%);
}
.victory-trophy { font-size:clamp(3.5rem,10vw,5rem); animation:bounceIn 0.6s var(--spring-fast) both; margin-bottom:6px; }
.victory-title {
  font-family:var(--font-heading); font-weight:900;
  font-size:clamp(1.8rem,6vw,3rem); color:var(--clr-accent);
  text-shadow:2px 3px 0 var(--clr-accent-dark);
  animation:bounceIn 0.6s var(--spring-fast) 100ms both; opacity:0;
  margin-bottom:6px;
}
.victory-time {
  font-family:var(--font-hud); font-size:1rem; color:var(--clr-text-light);
  animation:fadeIn 0.5s ease 400ms both; opacity:0; margin-bottom:16px;
}
.victory-stars { display:flex; gap:10px; margin-bottom:28px; }
.victory-star { font-size:clamp(2rem,6vw,2.8rem); opacity:0; display:inline-block; filter:grayscale(1); }
.victory-star.earned { filter:none; animation:starPop 0.5s var(--spring-fast) both; }
.victory-star:nth-child(1) { animation-delay:500ms; }
.victory-star:nth-child(2) { animation-delay:700ms; }
.victory-star:nth-child(3) { animation-delay:900ms; }
.victory-buttons {
  display:flex; gap:12px; flex-wrap:wrap; justify-content:center;
  animation:fadeIn 0.5s ease 600ms both; opacity:0;
}

/* ── Shop Screen ────────────────────────────────────────────── */
#screen-shop {
  background:linear-gradient(160deg,#e8f0ff 0%,#f0e8ff 50%,#ffe8f8 100%);
}

.shop-title {
  font-family:var(--font-heading); font-weight:900;
  font-size:clamp(1.8rem,5vw,2.8rem); color:var(--clr-accent);
  text-shadow:2px 3px 0 var(--clr-accent-dark);
  margin-bottom:4px; text-align:center;
}
.shop-subtitle { font-family:var(--font-body); font-size:0.95rem; color:var(--clr-text-light); margin-bottom:20px; text-align:center; }

.shop-currency {
  display:flex; align-items:center; gap:8px;
  background:linear-gradient(145deg, #fff8e0, var(--clr-panel)); border-radius:14px 5px 14px 5px;
  padding:8px 20px;
  box-shadow:0 3px 0 rgba(0,0,0,0.08), 0 4px 14px rgba(255,192,64,0.25), inset 0 1.5px 0 rgba(255,255,255,0.7);
  font-family:var(--font-heading); font-weight:700; font-size:1.1rem;
  color:var(--clr-text); margin-bottom:20px;
  border:2px solid rgba(255,192,64,0.4);
  border-bottom:2.5px solid rgba(0,0,0,0.1);
  transform:skewX(-2deg);
}

.shop-hints-display {
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(145deg, rgba(180,230,230,0.2), rgba(126,200,200,0.1));
  border:2px solid rgba(126,200,200,0.3);
  border-radius:5px 14px 5px 14px; padding:8px 20px;
  box-shadow:0 3px 0 rgba(0,0,0,0.08), 0 4px 12px rgba(126,200,200,0.18), inset 0 1.5px 0 rgba(255,255,255,0.5);
  border-bottom:2.5px solid rgba(0,0,0,0.1);
  font-family:var(--font-heading); font-weight:700; font-size:1.05rem; color:var(--clr-text);
  margin-bottom:20px;
  transform:skewX(2deg);
}

.shop-packs {
  display:flex; flex-direction:column; gap:12px;
  width:100%; max-width:400px;
  overflow-y:auto; max-height:50vh;
}

.shop-pack {
  background:var(--clr-panel); border-radius:var(--radius-card);
  padding:18px 20px; display:flex; align-items:center; gap:14px;
  box-shadow:var(--shadow-card);
  border:2.5px solid transparent;
  transition:transform 0.2s var(--spring-fast), border-color 0.15s;
}
.shop-pack:hover { transform:scale(1.02); }
.shop-pack.featured { border-color:var(--clr-star); }

.pack-icon { font-size:2rem; flex-shrink:0; animation:shopBounce 2s ease-in-out infinite; }
.pack-info { flex:1; }
.pack-name { font-family:var(--font-heading); font-weight:700; font-size:1rem; color:var(--clr-text); }
.pack-desc { font-family:var(--font-body); font-size:0.8rem; color:var(--clr-text-light); margin-top:2px; }

.pack-buy-btns { display:flex; flex-direction:column; gap:6px; }
.pack-buy-btn {
  padding:8px 14px; border-radius:var(--radius-sm); border:2px solid;
  font-family:var(--font-heading); font-weight:700; font-size:0.82rem;
  cursor:pointer; transition:all 0.15s ease; white-space:nowrap;
  min-height:36px; display:flex; align-items:center; gap:4px;
}
.pack-buy-btn.stars-btn { background:rgba(255,200,64,0.15); border-color:var(--clr-star); color:#a07800; }
.pack-buy-btn.stars-btn:hover { background:var(--clr-star); color:#fff; }
.pack-buy-btn.ads-btn { background:rgba(126,200,200,0.15); border-color:var(--clr-accent); color:var(--clr-accent-dark); }
.pack-buy-btn.ads-btn:hover { background:var(--clr-accent); color:#fff; }
.pack-buy-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* ── Back Button ────────────────────────────────────────────── */
.back-btn {
  position:absolute; top:16px; left:16px;
  background:linear-gradient(145deg, rgba(255,255,255,0.95), var(--clr-panel));
  border:2px solid rgba(126,200,200,0.35);
  border-radius:14px 5px 14px 5px; width:48px; height:48px; font-size:1.4rem;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.10),
    0 4px 14px rgba(74,64,96,0.2),
    inset 0 1.5px 0 rgba(255,255,255,0.7);
  border-bottom:3px solid rgba(0,0,0,0.12);
  transition:transform 0.15s var(--spring-fast), box-shadow 0.15s ease;
  color:var(--clr-text); z-index:20;
  animation:bounceIn 0.35s var(--spring-fast) both;
  transform:skewX(-3deg);
}
.screen.visible .back-btn { pointer-events:all; }
.back-btn:hover  {
  transform:skewX(-3deg) scale(1.12) rotate(-3deg);
  box-shadow:0 5px 0 rgba(0,0,0,0.08), 0 7px 20px rgba(126,200,200,0.4), inset 0 1.5px 0 rgba(255,255,255,0.6);
}
.back-btn:active { transform:skewX(-3deg) scale(0.92) translateY(2px); }

/* ── Toggle ─────────────────────────────────────────────────── */
.toggle { position:relative; width:52px; height:28px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider {
  position:absolute; inset:0; background:#ccc; border-radius:28px;
  transition:background 0.25s ease; cursor:pointer;
}
.toggle-slider::before {
  content:''; position:absolute; height:20px; width:20px;
  left:4px; top:4px; background:#fff; border-radius:50%;
  transition:transform 0.25s var(--spring-fast);
  box-shadow:0 2px 6px rgba(0,0,0,0.15);
}
.toggle input:checked + .toggle-slider { background:var(--clr-accent); }
.toggle input:checked + .toggle-slider::before { transform:translateX(24px); }

/* ── Intro Animation Overlay ────────────────────────────────── */
.intro-overlay {
  position:absolute; inset:0; background:rgba(240,248,255,0.9);
  display:flex; align-items:center; justify-content:center;
  z-index:100; pointer-events:none;
  animation:fadeIn 0.3s ease both;
}
.intro-text {
  font-family:var(--font-heading); font-weight:900;
  font-size:clamp(1.4rem,4vw,2.2rem); color:var(--clr-accent);
  text-shadow:2px 3px 0 var(--clr-accent-dark);
  animation:pulse 0.8s ease-in-out infinite;
}

/* ── Reward Toast ───────────────────────────────────────────── */
.reward-toast {
  position:absolute; top:80px; left:50%; transform:translateX(-50%) skewX(-3deg);
  background:linear-gradient(135deg, #8ed4d4, var(--clr-accent)); color:#fff;
  font-family:var(--font-heading); font-weight:800; font-size:1rem;
  padding:12px 28px; border-radius:14px 5px 14px 5px;
  box-shadow:
    0 3px 0 rgba(0,0,0,0.12),
    0 6px 24px rgba(126,200,200,0.5),
    inset 0 1.5px 0 rgba(255,255,255,0.4);
  border-bottom:2.5px solid rgba(0,0,0,0.12);
  animation:slideDown 0.4s var(--spring-fast) both;
  z-index:200; pointer-events:none; white-space:nowrap;
}

/* ── Scrollbar hidden ───────────────────────────────────────── */
::-webkit-scrollbar { display:none; }

/* ── Safe Area / Mobile ─────────────────────────────────────── */
.hud-bar { padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); }

@media (max-width:480px) {
  .panel, .pause-panel { padding:24px; }
  .btn-jiggle { padding:14px 28px; font-size:1rem; }
  .btn-flat   { padding:10px 20px; font-size:0.9rem; }
  .victory-buttons { flex-direction:column; }
  .shop-packs { max-height:45vh; }
}
@media (max-height:500px) {
  .menu-title-letter { font-size:clamp(1.8rem,6vw,3rem); }
  .menu-subtitle { margin-bottom:16px; }
  .menu-buttons  { gap:8px; }
  .btn-jiggle { padding:10px 24px; }
  .ls-content { padding:8px 0 0 0; }
}
/* Android 9:16 safe area */
@supports (padding:env(safe-area-inset-bottom)) {
  #screen-hud .hud-bar { padding-top:max(10px,env(safe-area-inset-top)); }
}

/* ══════════════════════════════════════════════════════════
   PAUSE PANEL — uniform buttons
══════════════════════════════════════════════════════════ */
.pause-panel {
  display:flex; flex-direction:column; align-items:stretch; gap:10px;
}
.pause-panel .btn-flat {
  width:100%; min-width:200px;
  justify-content:center;
  padding:13px 28px;
  font-size:1rem;
}
.pause-divider { margin:2px 0; }

/* ══════════════════════════════════════════════════════════
   DARK THEMES  (applied via body[data-theme="X"])
   Four palettes cycle randomly on every game startup.
══════════════════════════════════════════════════════════ */

/* ── Brown / Cocoa ──────────────────────────────────────── */
body[data-theme="brown"] {
  --clr-bg:          #2c1810;
  --clr-panel:       rgba(60,32,16,0.96);
  --clr-panel-solid: #3e2214;
  --clr-accent:      #d08040;
  --clr-accent-dark: #a85f28;
  --clr-accent-warm: #e8a870;
  --clr-warm-dark:   #c07040;
  --clr-text:        #ffecd8;
  --clr-text-light:  #c8a070;
  --clr-mint:        #7ab84a;
  --clr-lavender:    #a07848;
  --clr-peach:       #d88050;
  --clr-sky:         #70a0b8;
  --clr-yellow:      #d4a828;
  --clr-success:     #6aaa50;
  --clr-danger:      #e07050;
  --clr-star:        #f8c020;
  --shadow-soft:     0 8px 32px rgba(0,0,0,0.45);
  --shadow-btn:      0 4px 16px rgba(200,120,40,0.40);
  --shadow-card:     0 6px 24px rgba(0,0,0,0.50);
}

/* ── Pink / Rose ────────────────────────────────────────── */
body[data-theme="pink"] {
  --clr-bg:          #200a16;
  --clr-panel:       rgba(52,14,34,0.96);
  --clr-panel-solid: #3a1026;
  --clr-accent:      #e05080;
  --clr-accent-dark: #b83060;
  --clr-accent-warm: #f090a8;
  --clr-warm-dark:   #c86080;
  --clr-text:        #ffe0f0;
  --clr-text-light:  #c080a0;
  --clr-mint:        #906090;
  --clr-lavender:    #b07090;
  --clr-peach:       #e07080;
  --clr-sky:         #8070b8;
  --clr-yellow:      #d09040;
  --clr-success:     #70b860;
  --clr-danger:      #f06868;
  --clr-star:        #f8c830;
  --shadow-soft:     0 8px 32px rgba(0,0,0,0.50);
  --shadow-btn:      0 4px 16px rgba(220,60,100,0.40);
  --shadow-card:     0 6px 24px rgba(0,0,0,0.55);
}

/* ── Green / Forest ─────────────────────────────────────── */
body[data-theme="green"] {
  --clr-bg:          #0a1e0c;
  --clr-panel:       rgba(14,42,18,0.96);
  --clr-panel-solid: #163820;
  --clr-accent:      #38c058;
  --clr-accent-dark: #289040;
  --clr-accent-warm: #70e080;
  --clr-warm-dark:   #50a860;
  --clr-text:        #d8f8dc;
  --clr-text-light:  #80c888;
  --clr-mint:        #30b850;
  --clr-lavender:    #5890a0;
  --clr-peach:       #a8d040;
  --clr-sky:         #38a890;
  --clr-yellow:      #c8d020;
  --clr-success:     #40c850;
  --clr-danger:      #d07060;
  --clr-star:        #d8c820;
  --shadow-soft:     0 8px 32px rgba(0,0,0,0.48);
  --shadow-btn:      0 4px 16px rgba(40,180,70,0.38);
  --shadow-card:     0 6px 24px rgba(0,0,0,0.52);
}

/* ── Blue / Midnight ────────────────────────────────────── */
body[data-theme="blue"] {
  --clr-bg:          #08091e;
  --clr-panel:       rgba(14,16,50,0.96);
  --clr-panel-solid: #141638;
  --clr-accent:      #4880f0;
  --clr-accent-dark: #2c5cc0;
  --clr-accent-warm: #80a8ff;
  --clr-warm-dark:   #5878d0;
  --clr-text:        #d0e4ff;
  --clr-text-light:  #7888c0;
  --clr-mint:        #3880b8;
  --clr-lavender:    #6060c8;
  --clr-peach:       #9060c0;
  --clr-sky:         #3898d8;
  --clr-yellow:      #c09830;
  --clr-success:     #40b878;
  --clr-danger:      #e06060;
  --clr-star:        #f0c030;
  --shadow-soft:     0 8px 32px rgba(0,0,0,0.55);
  --shadow-btn:      0 4px 16px rgba(60,120,240,0.45);
  --shadow-card:     0 6px 24px rgba(0,0,0,0.58);
}

/* ── Low-contrast menu styling for dark themes ───────────── */
body[data-theme] .btn-flat {
  border-color: rgba(255,255,255,0.13);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25), 0 4px 14px rgba(0,0,0,0.35), inset 0 1.5px 0 rgba(255,255,255,0.15);
  color: var(--clr-text-light);
  opacity: 0.88;
}
body[data-theme] .btn-flat:hover {
  background: var(--clr-accent);
  border-color: var(--clr-accent-dark);
  box-shadow: 0 5px 0 rgba(0,0,0,0.20), 0 7px 22px rgba(60,120,240,0.35), inset 0 1.5px 0 rgba(255,255,255,0.2);
  color: #fff;
  opacity: 1;
}
body[data-theme] .btn-flat.primary {
  color: #fff;
  opacity: 1;
}
body[data-theme] .btn-jiggle {
  opacity: 0.90;
}
body[data-theme] .btn-jiggle:hover {
  opacity: 1;
}
body[data-theme] .hud-icon-btn {
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 3px 0 rgba(0,0,0,0.25), 0 4px 12px rgba(0,0,0,0.35), inset 0 1.5px 0 rgba(255,255,255,0.12);
  color: var(--clr-text-light);
}
body[data-theme] .hud-icon-btn:hover,
body[data-theme] .hud-icon-btn.active {
  color: #fff;
  border-color: var(--clr-accent);
}
body[data-theme] .card {
  border-color: rgba(255,255,255,0.07);
  opacity: 0.86;
}
body[data-theme] .card:hover {
  box-shadow: 0 12px 36px rgba(0,0,0,0.50);
  opacity: 1;
}
/* Panel borders — subtle rim only */
body[data-theme] .pause-panel {
  border: 1px solid rgba(255,255,255,0.09);
}
body[data-theme] .pause-title {
  color: var(--clr-text-light);
  font-weight: 700;
}
/* Level-select tabs — muted */
body[data-theme] .ls-tier-tab {
  opacity: 0.72;
}
body[data-theme] .ls-tier-tab.active {
  opacity: 1;
}
/* Menu subtitle / labels — dimmer */
body[data-theme] .menu-subtitle,
body[data-theme] .ls-label {
  opacity: 0.65;
}
/* Shop screen — dark background to match theme */
body[data-theme] #screen-shop {
  background: var(--clr-bg);
}
body[data-theme] .shop-title {
  color: var(--clr-accent-warm);
  text-shadow: 1px 2px 0 rgba(0,0,0,0.5);
}
body[data-theme] .shop-subtitle {
  color: var(--clr-text-light);
}
body[data-theme] .shop-currency,
body[data-theme] .shop-hints-display {
  background: var(--clr-panel);
  color: var(--clr-text);
  border-color: rgba(255,255,255,0.12);
}
/* Shop pack cards */
body[data-theme] .shop-pack {
  background: var(--clr-panel);
  border-color: rgba(255,255,255,0.10);
}
body[data-theme] .shop-pack:hover,
body[data-theme] .shop-pack.featured {
  border-color: var(--clr-accent);
}
body[data-theme] .pack-name {
  color: var(--clr-text);
}
body[data-theme] .pack-desc {
  color: var(--clr-text-light);
}
body[data-theme] .pack-buy-btn.stars-btn {
  background: rgba(255,200,64,0.10);
  border-color: var(--clr-star);
  color: var(--clr-star);
}
body[data-theme] .pack-buy-btn.ads-btn {
  background: rgba(126,200,200,0.10);
  border-color: var(--clr-accent);
  color: var(--clr-accent-warm);
}