:root {
  --bg-dark-1: #1a1b3a;
  --bg-dark-2: #2d1b4e;
  --accent-gold: #f2c879;
  --accent-gold-dim: #c9a45f;
  --text-light: #f4f2fb;
  --text-dim: #b9b6d6;
  --danger: #e74c3c;
  --success: #2ecc71;
  --panel-bg: rgba(255, 255, 255, 0.06);
  --panel-border: rgba(255, 255, 255, 0.15);
}

/* ---------- Background themes (Shop cosmetic, "Backgrounds" tab) ----------
 * Each theme only overrides the shared --bg-dark-1/2 variables, so the whole
 * app (menu, panels, gameplay backdrop) re-tints automatically wherever
 * those variables are already used - no other rule needs to know a theme
 * is active. Applied via a body class from ui.js's applyBackgroundTheme(). */
body.bg-theme-emerald {
  --bg-dark-1: #0f2a1f;
  --bg-dark-2: #133d2b;
}

body.bg-theme-sunset {
  --bg-dark-1: #2c1220;
  --bg-dark-2: #4a1f2b;
}

body.bg-theme-ocean {
  --bg-dark-1: #0c1f33;
  --bg-dark-2: #123047;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: 'Baloo 2', 'Quicksand', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(ellipse at top, var(--bg-dark-2), var(--bg-dark-1) 70%);
  color: var(--text-light);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.title-font {
  font-family: 'Baloo 2', 'Quicksand', sans-serif;
}

/* Persistent, app-wide floating-particle backdrop - runs continuously
   behind every screen (not just the main menu), so there's always some
   gentle ambient movement visible through the semi-transparent panels and
   in the game screen's empty margins around the tubes. */
#ambient-bg-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#app {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

/* The extra env(safe-area-inset-*) terms (paired with viewport-fit=cover in
   the meta tag) keep content clear of notches, camera cutouts, and the
   bottom gesture-bar area on phones that have them - they resolve to 0 on
   every other device/browser. The plain "padding: 24px" is declared first as
   a fallback: browsers without env() support treat the calc()-based line
   below as invalid and simply keep this one, so nothing regresses there. */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  padding: calc(24px + env(safe-area-inset-top, 0px)) calc(24px + env(safe-area-inset-right, 0px))
    calc(24px + env(safe-area-inset-bottom, 0px)) calc(24px + env(safe-area-inset-left, 0px));
}

.screen.active {
  display: flex;
}

.screen.overlay {
  background: rgba(10, 8, 30, 0.72);
  backdrop-filter: blur(3px);
  z-index: 20;
}

/* ---------- Splash screen (studio logo, shown ~1s before the loading screen) ---------- */
#screen-splash {
  transition: opacity 0.25s ease;
  z-index: 30;
}

#screen-splash.fade-out {
  opacity: 0;
  pointer-events: none;
}

.splash-logo {
  max-width: min(320px, 70vw);
  max-height: 60vh;
  width: auto;
  height: auto;
  object-fit: contain;
  animation: splashPop 0.4s ease;
}

@keyframes splashPop {
  0% { opacity: 0; transform: scale(0.88); }
  100% { opacity: 1; transform: scale(1); }
}

/* ---------- Loading screen ---------- */
.game-title {
  font-family: 'Baloo 2', 'Quicksand', sans-serif;
  text-transform: uppercase;
  font-size: clamp(28px, 6vw, 48px);
  font-weight: 700;
  letter-spacing: 3px;
  margin: 0 0 8px;
  background: linear-gradient(90deg, var(--accent-gold), #fff2cf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-align: center;
}

@keyframes titleGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(242, 200, 121, 0.35)); }
  50% { filter: drop-shadow(0 0 18px rgba(242, 200, 121, 0.75)); }
}

.menu-title {
  animation: titleGlowPulse 3.2s ease-in-out infinite;
  font-size: clamp(28px, 7vw, 44px);
  margin-bottom: 2px;
}

#screen-loading .game-logo {
  max-width: 160px;
  max-height: 160px;
  margin-bottom: 24px;
  object-fit: contain;
}

.loading-bar-track {
  width: min(280px, 70vw);
  height: 10px;
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 18px;
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--accent-gold-dim), var(--accent-gold));
  transition: width 0.15s linear;
}

.loading-percent {
  margin-top: 10px;
  font-size: 14px;
  color: var(--text-dim);
}

/* ---------- Generic panel / buttons ---------- */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 22px;
  padding: 38px 32px;
  width: min(440px, 92vw);
  max-height: 84vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}

.panel .screen-title {
  font-size: 26px;
}

.panel-menu {
  width: min(480px, 95vw);
  padding: 28px 34px;
  gap: 12px;
  border-radius: 26px;
}

/* The main menu now has 6 buttons (Play, Daily Challenge, Levels, Gallery,
   Shop, Settings) instead of the original 4 - slightly tighter button
   padding/font-size here keeps the whole menu comfortably inside the panel
   without needing to scroll on most phone screens. */
.panel-menu .btn {
  padding: 12px 18px;
  font-size: 16px;
}
.panel-menu .btn.big {
  padding: 15px 20px;
  font-size: 18px;
}

/* Note: #screen-menu deliberately does NOT set its own "position" - the base
   .screen rule already sets position:absolute; inset:0, which both fills the
   full screen (needed for centering). The ambient particle canvas now lives
   outside #app entirely (see #ambient-bg-canvas above) since it runs on
   every screen, not just the menu. Overriding #screen-menu's position to
   "relative" previously broke full-screen sizing and made the menu panel
   look off-center / stuck near the top - still applies here. */

h2.screen-title {
  text-align: center;
  margin: 0 0 6px;
  font-size: 22px;
  color: var(--accent-gold);
}

.btn {
  appearance: none;
  border: none;
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  background: linear-gradient(180deg, #3a2c63, #241a44);
  color: var(--text-light);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: transform 0.08s ease, filter 0.15s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn.primary {
  background: linear-gradient(180deg, var(--accent-gold), var(--accent-gold-dim));
  color: #241a44;
}

.btn.danger {
  background: linear-gradient(180deg, #e0574a, #b53a2f);
}

.btn.ghost {
  background: transparent;
  border: 1px solid var(--panel-border);
}

.btn.small {
  padding: 8px 14px;
  font-size: 13px;
}

.daily-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.daily-streak-badge {
  font-size: 0.85em;
  font-weight: 700;
  color: var(--accent-gold);
}
.daily-streak-badge:empty {
  display: none;
}

.btn.big {
  padding: 18px 22px;
  font-size: 19px;
  border-radius: 16px;
}

.row {
  display: flex;
  gap: 10px;
}
.row > * {
  flex: 1;
}

.hidden {
  display: none !important;
}

/* ---------- Currency chips (used in menu, game HUD, result) ---------- */
.currency-bar {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 2px;
}
.chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-border);
  border-radius: 20px;
  padding: 6px 12px;
  font-size: 14px;
}
.chip .icon-star { color: #7ee0ff; }

/* A hand-drawn gold coin instead of the 🪙 emoji - color emoji glyphs ignore
   the CSS "color" property and can render silvery/dull depending on the
   platform's emoji font, so this gives full control over making it properly
   gold. Sized in "em" so it scales with whatever font-size surrounds it. */
.coin-icon {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d8 0%, var(--accent-gold) 55%, #a9760f 100%);
  box-shadow: 0 0 0.25em rgba(242, 200, 121, 0.55), inset 0 0 0.15em rgba(255, 255, 255, 0.6);
  vertical-align: middle;
  margin-bottom: 0.12em;
}

/* ---------- Settings toggle rows ---------- */
.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.switch {
  position: relative;
  width: 46px;
  height: 26px;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  transition: 0.2s;
  cursor: pointer;
}
.switch .slider::before {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: white;
  border-radius: 50%;
  transition: 0.2s;
}
.switch input:checked + .slider {
  background: var(--accent-gold-dim);
}
.switch input:checked + .slider::before {
  transform: translateX(20px);
}

.stat-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-dim);
  padding: 4px 0;
}

/* ---------- Levels (replay) ---------- */
.levels-hint {
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 4px;
}
.levels-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.level-card {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 4px;
  text-align: center;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.level-card:active {
  transform: scale(0.96);
}
.level-card .level-card-number {
  font-size: 17px;
  font-weight: 700;
}
.level-card .level-card-stars {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25);
  letter-spacing: 1px;
}
.level-card .level-card-stars .earned {
  color: var(--accent-gold);
}
.level-card .level-card-best {
  font-size: 10px;
  color: var(--text-dim);
}
.level-card.current {
  border-color: var(--accent-gold);
}

/* ---------- Gallery ---------- */
.gallery-count {
  text-align: center;
  font-size: 13px;
  color: var(--accent-gold);
  font-weight: 700;
  margin: 0 0 4px;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.gallery-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gallery-item .gallery-item-icon {
  font-size: 28px;
}
.gallery-item .gallery-item-name {
  font-weight: 700;
}
.gallery-item .gallery-item-desc {
  font-size: 11px;
  color: var(--text-dim);
  flex: 1;
}
.gallery-item .gallery-item-status {
  font-size: 11px;
  font-weight: 700;
  margin-top: auto;
}
/* Locked achievements are dimmed and grayscale - unlocked ones show their
   icon in full color plus a gold "unlocked" border, so the collection
   visually reads as a trophy case that fills in as the player progresses. */
.gallery-item.locked {
  opacity: 0.55;
}
.gallery-item.locked .gallery-item-icon {
  filter: grayscale(1);
}
.gallery-item.locked .gallery-item-status {
  color: var(--text-dim);
}
.gallery-item.unlocked {
  border-color: var(--accent-gold);
}
.gallery-item.unlocked .gallery-item-status {
  color: var(--accent-gold);
}

/* ---------- Shop ---------- */
/* The shop panel keeps its title/currency/tabs and the "Back to Menu" button
   fixed in place, and only the item grid itself scrolls in between - this
   way the Back button is never pushed out of view no matter how many items
   a category ends up with. */
.shop-scroll {
  overflow-y: auto;
  max-height: 46vh;
  margin: 0 -4px;
  padding: 0 4px;
}
.shop-tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}
.shop-tab-btn {
  appearance: none;
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  color: var(--text-dim);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.shop-tab-btn.active {
  background: linear-gradient(180deg, var(--accent-gold-dim), var(--accent-gold));
  color: #2a1e0a;
  border-color: var(--accent-gold);
}
.shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: stretch;
  gap: 12px;
}
.shop-item {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-item .shop-item-icon {
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Background theme cards show a plain color swatch instead of an emoji -
   a white ring plus a subtle dark outer ring keeps it visible no matter
   what color the card/background behind it happens to be. */
.bg-swatch {
  display: inline-block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
}
/* Tube/Gem shop cards show a real, live-rendered preview canvas instead of
   an icon - align-self:center overrides the grid's stretch so the canvas
   (which has a fixed intrinsic size) sits centered in the card. */
.cosmetic-preview {
  align-self: center;
  display: block;
}
.tube-preview {
  width: 44px;
  height: 128px;
}
.gem-preview {
  width: 62px;
  height: 62px;
}
/* Cards can have a different amount of text above the button (power-ups show
   an extra "Owned: X" line, the skin card doesn't) - pushing the button to
   the bottom with margin-top:auto keeps it lined up at the same height across
   every card in the row regardless of that difference. */
.shop-item .btn {
  margin-top: auto;
}
/* When a tab has an odd number of cards, the last one would otherwise sit
   alone in the left column of its row (directly under the card above it).
   Instead, make it span the full row width and center itself, since there's
   no matching card to its right to justify the left alignment. */
.shop-grid .shop-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  width: min(100%, 50%);
  margin: 0 auto;
}

/* ---------- Game screen ---------- */
/* Overrides the base .screen padding down to just the safe-area insets
   (rather than 0) - the HUD and power-up bar otherwise sit flush against
   the very top/bottom edges of the canvas, which is exactly where a notch,
   camera cutout, or the bottom gesture-bar would otherwise cover them. */
#screen-game {
  padding: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px)
    env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  justify-content: flex-start;
  height: 100%;
}

.game-hud {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  gap: 12px;
}

.game-hud .level-label {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-dim);
}

.game-hud .chip {
  font-size: 18px;
  padding: 9px 16px;
  gap: 8px;
}

#game-canvas-wrap {
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* Zen Mode's lightweight "solved" toast - no button to tap, just a brief
   fade-in/out over the board while the next puzzle loads automatically. */
.zen-toast {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: rgba(10, 8, 30, 0.82);
  border: 1px solid var(--accent-gold);
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 16px;
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 3;
  white-space: nowrap;
}
.zen-toast.showing {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Interactive tutorial banner - plain centered text (no bubble/box), sitting
   just above the tubes so it never covers them. Purely informational, no
   button - the tutorial only ends by completing the guided move/level. */
.tutorial-banner {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  display: none;
  z-index: 4;
  pointer-events: none;
}
.tutorial-banner.showing {
  display: block;
}
.tutorial-banner-text {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 700;
  font-size: 28.6px;
  line-height: 1.3;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65), 0 0 10px rgba(0, 0, 0, 0.35);
}

#game-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.powerup-bar {
  width: 100%;
  flex-shrink: 0;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 6px 16px 18px;
  position: relative;
  z-index: 2;
}

.powerup-btn {
  position: relative;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-border);
  color: var(--text-light);
  cursor: pointer;
  font-size: 24px;
}

/* Fixed-size centering box for the icon glyph itself - some emoji (like the
   hint lightbulb) have asymmetric side-bearings in their glyph box and look
   visibly off-center if just relied on the parent flexbox centering alone. */
.powerup-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.2em;
  height: 1.2em;
  line-height: 1;
}
/* A plain "+" character (not the emoji glyph, which ignores CSS color like
   the old coin emoji did) so it can reliably be colored white for
   visibility against the dark button background. */
.icon-plus {
  color: #ffffff;
  font-weight: 800;
  font-size: 1.35em;
}

.powerup-btn .powerup-count {
  position: absolute;
  bottom: -5px;
  right: -5px;
  background: var(--accent-gold);
  color: #241a44;
  font-size: 13px;
  font-weight: 700;
  border-radius: 10px;
  min-width: 19px;
  padding: 1px 4px;
  line-height: 1.3;
}

.powerup-btn.depleted,
.powerup-btn:disabled {
  opacity: 0.35;
  cursor: default;
}

.shop-item-owned {
  font-size: 12px;
  color: var(--text-dim);
}

.pause-btn {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.25);
  border: 1px solid var(--panel-border);
  color: var(--text-light);
  font-size: 24px;
  cursor: pointer;
}

/* ---------- Result screen ---------- */
.panel-result {
  width: min(440px, 94vw);
  padding: 40px 32px;
  gap: 18px;
}

#result-win,
#result-lose {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

#result-win .btn,
#result-lose .btn {
  width: 100%;
  max-width: 280px;
}

.result-stars {
  display: flex;
  justify-content: center;
  gap: 10px;
  font-size: 40px;
  margin: 4px 0;
  color: rgba(255, 255, 255, 0.2);
}
.result-stars .earned {
  color: var(--accent-gold);
}

.result-reward-text {
  text-align: center;
  font-size: 17px;
  margin: 0;
}

.btn-2x {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 15px;
}

/* ---------- Fake ad overlay (ads.js) ---------- */
.fake-ad-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.fake-ad-box {
  text-align: center;
}
.fake-ad-progress {
  width: 220px;
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 12px;
}
.fake-ad-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--accent-gold);
}

/* ---------- Orientation overlay ---------- */
#orientation-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-dark-1);
  z-index: 999;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 16px;
  padding: 24px;
}
#orientation-overlay.active {
  display: flex;
}
.rotate-icon {
  font-size: 56px;
  animation: rotateHint 1.6s ease-in-out infinite;
}
@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}

/* ---------- Responsive tweaks ---------- */
@media (min-width: 700px) {
  .panel {
    width: min(420px, 80vw);
  }
}

@media (max-height: 480px) {
  .panel {
    padding: 16px;
    gap: 8px;
  }
}