/* ============================================
   ArrowFlow 3D — style.css
   ============================================ */

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

:root {
  --bg-primary: #dff0fb;
  --bg-secondary: #c5e3f7;
  --bg-card: rgba(255, 255, 255, 0.9);
  --bg-overlay: rgba(0, 80, 160, 0.4);

  --text-primary: #1a2a4a;
  --text-secondary: #4a6a8a;
  --text-on-btn: #ffffff;

  --accent: #1a7fe8;
  --accent-light: #4a9ff5;
  --star-color: #fbbf24;

  --font-main: 'Nunito', sans-serif;
  --font-logo: 'Outfit', sans-serif;
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-theme="dark"] {
  --bg-primary: #0d0d1a;
  --bg-secondary: #12122a;
  --bg-card: rgba(255, 255, 255, 0.1);
  --bg-overlay: rgba(0, 0, 0, 0.7);

  --text-primary: #e8f4ff;
  --text-secondary: #8ab0d0;
  --text-on-btn: #0d0d1a;

  --accent: #00f5ff;
  --accent-light: #40ffff;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; font-family: var(--font-main); color: var(--text-primary); user-select: none; -webkit-user-select: none; touch-action: none; background: var(--bg-primary); transition: background var(--transition); }

#three-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 0;
}

#fx-canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 1;
  pointer-events: none;
  transform: translateZ(0); /* own compositor layer, cheap insurance next to a WebGL canvas */
}

.ovr-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: safe center; z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.4s;
  overflow-y: auto;
}
.ovr-screen.active:not(.game-hud) { opacity: 1; pointer-events: all; } .ovr-screen.active.game-hud { opacity: 1; pointer-events: none; }

/* Splash */
.splash-inner { text-align: center; }
.splash-title { font-family: var(--font-logo); font-size: 3rem; color: var(--accent); margin: 20px 0 5px; }
.splash-sub { color: var(--text-secondary); font-weight: 700; margin-bottom: 20px; }
.splash-loader-wrap { width: 200px; height: 8px; background: var(--bg-secondary); border-radius: 4px; margin: 0 auto; overflow: hidden; }
.splash-loader-bar { height: 100%; width: 0%; background: var(--accent); transition: width 0.1s; }

/* Buttons */
button { border: none; background: none; font-family: inherit; cursor: pointer; }
.btn { padding: 12px 24px; border-radius: 99px; font-weight: 800; font-size: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all var(--transition); }
.btn-primary { background: var(--accent); color: var(--text-on-btn); box-shadow: 0 4px 15px rgba(26,127,232,0.3); }
.reset-danger-btn { background: #ff3b30; box-shadow: 0 4px 15px rgba(255,59,48,0.3); }
.btn-primary:active { transform: scale(0.95); }
.btn-outline { border: 2px solid var(--accent); color: var(--accent); background: var(--bg-card); }
.btn-secondary { background: var(--bg-secondary); color: var(--text-primary); }
.btn-secondary:active { transform: scale(0.95); }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.btn-lg { padding: 16px 32px; font-size: 1.2rem; }
.btn-sm { padding: 8px 16px; font-size: 0.85rem; }
.icon-btn { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 2px 8px rgba(0,0,0,0.1); position: relative; }

/* Unclaimed-reward indicator (2026-08-25) - stays lit on the Wheel/Store
   entry points until every free item behind them is claimed for the day
   (wheel: free spin AND all bonus ad-spins; store: all free hint-ads), not
   just the first one taken - see updateNotifyDots() in js/ui.js. */
#btn-wheel, #btn-store, #btn-wheel-spin-free, #btn-wheel-spin-ad, #btn-store-hint-ad { position: relative; }
.notify-dot {
  position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
  border-radius: 50%; background: #ff3b30; color: #fff; font-size: 0.7rem;
  font-weight: 900; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35); pointer-events: none;
}
.notify-dot.hidden { display: none; }

/* Non-blocking reward-confirmation toast (2026-08-26) - deliberately NOT a
   native alert(): calling alert() synchronously from inside the ad SDK's
   onDismiss event listener (js/ads.js's onRewardedVideoAdDismissed) risks a
   real Android WebView hazard - the native dialog can fail to attach during
   the Activity focus transition back from the full-screen ad, silently
   swallowing all touch input until the app is force-restarted (reproduced
   for real via test32.mp4 after repeated fail-screen continue-ad watches).
   A plain DOM toast never touches the native bridge, so it can't hit that
   class of bug - same safety property the wheel's inline result text already
   had, which is why it alone never froze across any test round. */
.app-toast {
  position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(10px);
  background: var(--bg-card); color: var(--text-primary); padding: 12px 22px;
  border-radius: 99px; font-weight: 800; font-size: 0.95rem; text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.3); z-index: 999; max-width: 85vw;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s;
}
.app-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Menu */
.menu-controls-top { position: absolute; top: 20px; left: 20px; right: 20px; display: flex; justify-content: space-between; }
.menu-card { background: var(--bg-card); padding: 40px 30px; border-radius: 24px; text-align: center; box-shadow: 0 8px 30px rgba(0,0,0,0.1); backdrop-filter: blur(10px); }
.menu-logo { font-family: var(--font-logo); font-size: 2.5rem; color: var(--accent); margin-bottom: 5px; }
.menu-tagline { color: var(--text-secondary); font-weight: 700; margin-bottom: 30px; }
.menu-btns { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; }
.menu-btn-row { display: flex; gap: 10px; }
/* padding/font tight enough that longer Thai labels (no spaces to wrap at,
   e.g. "รายวัน"/"ร้านค้า") still fit on one line at common phone widths -
   English labels have room to spare either way. */
.menu-btn-row .btn { flex: 1; padding: 12px 8px; font-size: 0.9rem; gap: 5px; white-space: nowrap; }
#btn-daily.daily-done { opacity: 0.6; }
.daily-streak-badge { text-align: center; font-size: 0.8rem; font-weight: 700; color: #e8641a; margin-top: -4px; }
.menu-progress-info { display: flex; justify-content: space-between; font-weight: 800; font-size: 0.9rem; margin-bottom: 5px; }
/* Short screens: the menu card wants 632px, which is taller than the 568px
   viewport of a 480x960 phone - the level/stars/gems row and the progress bar
   under it ended up behind the navigation bar, and the theme/settings buttons
   were pushed off the top (photographed on a Mito A67, 2026-09-07). The card
   scrolls, but a menu should not need scrolling to show its own footer. These
   numbers bring it to 451px with everything on screen; phones with a normal
   viewport never see this block. */
@media (max-height: 660px) {
  .menu-card { padding: 18px 16px; }
  .menu-logo { font-size: 1.8rem; margin-bottom: 2px; }
  .menu-tagline { margin-bottom: 12px; font-size: 0.85rem; }
  .menu-btns { gap: 8px; margin-bottom: 12px; }
  .menu-card .btn-lg { padding: 11px 24px; font-size: 1.05rem; }
  .menu-btn-row .btn { padding: 9px 6px; }
}
.progress-track { height: 10px; background: var(--bg-secondary); border-radius: 5px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.5s; }

/* Game HUD */
.game-hud { justify-content: space-between; pointer-events: none; }
/* Scoped to .active: the game screen sits in the DOM (opacity: 0 when inactive)
   the whole time, so an unscoped pointer-events: all here would sit on top of
   and swallow clicks meant for the menu screen underneath it. */
.ovr-screen.active.game-hud .hud-top, .ovr-screen.active.game-hud .hud-bottom { pointer-events: all; width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px; }
.hud-top, .hud-bottom { width: 100%; display: flex; justify-content: space-between; align-items: flex-start; padding: 16px 20px; }
.hud-bottom { align-items: center; }
.hud-controls-group { display: flex; gap: 10px; align-items: center; }
/* Left group: pause, theme, settings each stacked as their own row (not a
   paired subrow anymore) - remove-ads moved out entirely to the right group
   under the cart icon, per direct request. */
.hud-left-group { flex-direction: column; align-items: flex-start; gap: 6px; }
.hud-center-cluster { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.hud-level-tier-row { display: flex; align-items: center; gap: 10px; }
.hud-level-badge { background: var(--bg-card); padding: 4px 16px; border-radius: 18px; text-align: center; border: 2px solid var(--accent); }
.hud-lvl-label { display: block; font-size: 0.55rem; font-weight: 800; letter-spacing: 1.5px; color: var(--text-secondary); }
.hud-lvl-num { display: block; font-size: 1.05rem; font-family: var(--font-logo); font-weight: 900; color: var(--accent); line-height: 1; }
.hud-hint-btn { background: var(--bg-card); border: 2px solid var(--accent); color: var(--accent); padding: 8px 16px; border-radius: 99px; font-weight: 800; flex-shrink: 0; }
/* Right group stacks vertically: hint+gems subrow, then the store/cart icon
   directly below the gem count, then the remove-ads pill below the cart
   (moved here from the old left group) - all per direct request. */
.hud-right-group { flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; }
.hud-right-subrow { display: flex; gap: 6px; align-items: center; }
/* Bumped from 34px/0.95rem (2026-08-23, per direct request) - now shared by
   both the cart and Skins icons, which sit side by side in the same subrow. */
.hud-store-icon { width: 38px; height: 38px; font-size: 1.05rem; flex-shrink: 0; }
.hud-tier-label { font-size: 0.75rem; font-weight: 800; letter-spacing: 2px; color: var(--text-secondary); pointer-events: none; white-space: nowrap; }
.hud-instruction { margin-top: auto; margin-bottom: 20px; background: rgba(0,0,0,0.5); color: #fff; padding: 8px 16px; border-radius: 99px; font-size: 0.85rem; font-weight: 700; transition: opacity 0.5s; pointer-events: none; }

/* "Remove ads" CTA - lives inline in the top-left control stack (below
   pause/theme/settings) rather than floating at the left-edge vertical
   center, per real-device feedback that the floating version competed with
   the puzzle view. Filled/accent (vs. the outlined pills used elsewhere in
   the HUD) is the deliberate "stand out" cue, per the product decision to
   keep this prominent even while small. */
.hud-remove-ads-btn {
  pointer-events: auto;
  display: flex; flex-direction: row; align-items: center; gap: 3px;
  background: var(--accent); color: var(--text-on-btn); border: none;
  border-radius: 12px; padding: 4px 8px; max-width: 84px;
  font-weight: 800; font-size: 0.58rem; text-align: center; line-height: 1.15;
  box-shadow: 0 2px 8px rgba(26,127,232,0.3);
}
.hud-remove-ads-btn.active { background: var(--bg-card); color: var(--accent); border: 2px solid var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.hud-remove-ads-btn.hidden { display: none; }
.hud-remove-ads-icon { font-size: 0.85rem; }


.hud-star { font-size: 1.5rem; color: #ccc; transition: color 0.3s; }
.hud-star.earned { color: var(--star-color); }
.hud-undo-btn { padding: 8px 16px; font-size: 0.85rem; border: 2px solid var(--accent); background: var(--bg-card); border-radius: 99px; font-weight: 800; color: var(--accent); }
.hud-undo-btn:disabled { opacity: 0.5; border-color: var(--text-secondary); color: var(--text-secondary); }

/* Kept as a single line on purpose (arrows/lives/difficulty always stay
   together, per direct request) - now that the left control group only
   holds the pause button, there's enough room that .hud-difficulty-badge's
   own auto-shrink (updateHUD()'s shrinkToFit(), js/ui.js) handles a too-long
   difficulty label by scaling its font down rather than this row wrapping. */
.hud-stats-row { pointer-events: none; display: flex; justify-content: center; align-items: center; gap: 6px; flex-wrap: nowrap; }
.hud-arrows-badge { display: flex; align-items: center; gap: 4px; background: var(--bg-card); padding: 4px 10px; border-radius: 99px; font-weight: 800; font-size: 0.85rem; color: var(--accent); border: 2px solid var(--accent); flex-shrink: 0; }
.hud-arrows-icon { font-size: 0.8rem; }
.hud-lives-row { display: flex; gap: 3px; flex-shrink: 0; }
.heart-icon { font-size: 1.05rem; color: #ff4d6d; transition: color 0.3s, transform 0.3s; }
.heart-icon.lost { color: var(--text-secondary); opacity: 0.3; transform: scale(0.85); }
/* min-width:0 + shrink is what lets shrinkToFit() actually reclaim space
   here specifically (see js/ui.js) without this badge's own box overflowing
   sideways the way the unbounded row used to. */
.hud-difficulty-badge { background: var(--bg-card); padding: 4px 10px; border-radius: 99px; font-size: 0.65rem; font-weight: 800; color: var(--text-secondary); border: 2px solid transparent; white-space: nowrap; overflow: hidden; flex-shrink: 1; min-width: 0; }

/* Color-Match Combo badge (2026-08-31) - deliberately gold/orange, not the blue
   --accent used by .hud-arrows-badge, so it never gets confused with the idle-path
   status color it sits right next to. */
/* Centred under the hearts as a direct child of .hud-center-cluster (a centred
   column), so it neither widens the stats row nor leaves a gap when hidden. */
.hud-combo-badge { align-self: center; background: var(--bg-card); padding: 4px 10px; border-radius: 99px; font-weight: 800; font-size: 0.85rem; color: #ff9500; border: 2px solid #ff9500; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
/* The colour the streak is riding on (2026-09-04). Its own swatch rather than
   tinting the badge itself: the badge's orange is the "combo" identity and
   recolouring it made the badge read as a different element each chain. The
   white ring keeps a pale path colour readable on the card background, and the
   letter inside is the colourblind label (Storage's colorblindMode), the same
   character stamped along the path itself - see scene.js's colorLabelFor. */
.hud-combo-dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 3px rgba(0,0,0,0.18); display: inline-flex; align-items: center; justify-content: center; font-size: 0.55rem; font-weight: 900; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.5); }

/* Milestone levels (every 10th) — aggressive/intense tier treatment */
.hud-tier-label.milestone {
  background: linear-gradient(135deg, #ff3b30, #ff7a1a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 3px;
}
@media (prefers-reduced-motion: no-preference) {
  .hud-tier-label.milestone { animation: milestone-pulse 1.4s ease-in-out infinite; }
  @keyframes milestone-pulse {
    0%, 100% { filter: drop-shadow(0 0 2px rgba(255,59,48,0.4)); }
    50% { filter: drop-shadow(0 0 8px rgba(255,122,26,0.9)); }
  }
}

/* Modals & Levels */
.modal-overlay { position: fixed; inset: 0; background: var(--bg-overlay); z-index: 100; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(5px); }
.modal-overlay.hidden { display: none; }
.hidden { display: none; }
/* max-height + overflow: body sets `touch-action: none` and `overflow: hidden`,
   so a modal taller than the viewport used to simply spill off-screen with its
   lower rows unreachable - the Settings modal's last rows and buttons could not
   be reached at all on a phone (device test t54, 2026-09-04). touch-action here
   re-enables the vertical drag that the body rule otherwise swallows. */
.modal-box { background: var(--bg-card); padding: 30px; border-radius: 20px; width: 90%; max-width: 320px; text-align: center; box-shadow: 0 10px 40px rgba(0,0,0,0.2); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
.modal-title { font-family: var(--font-logo); color: var(--accent); font-size: 1.8rem; margin-bottom: 5px; }
.modal-sub { color: var(--text-secondary); font-weight: 700; margin-bottom: 20px; }
.modal-btns { display: flex; flex-direction: column; gap: 10px; }
.fail-ad-remaining { font-size: 0.75rem; font-weight: 700; color: var(--text-secondary); text-align: center; margin-top: -4px; }

/* Store */
.store-scroll { flex: 1; overflow-y: auto; }
.store-section { padding: 16px 20px; border-bottom: 1px solid var(--bg-secondary); }
.store-section-hdr { display: flex; justify-content: space-between; font-weight: 800; margin-bottom: 12px; }
.store-ad-btn { width: 100%; }
.store-packs { display: flex; flex-direction: column; gap: 10px; }

/* Positioned + z-index so it paints above .confetti-area: an absolutely-positioned
   sibling paints above static-flow siblings regardless of DOM order, confetti would
   otherwise sit on top of the win text. */
.modal-win-box { position: relative; z-index: 2; }
.confetti-area { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.confetti-area canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Daily Wheel (2026-08-25) - same confetti-above-content layering as .modal-win-box. */
.modal-wheel-box { position: relative; z-index: 2; }
.wheel-wrap { position: relative; width: 220px; height: 220px; margin: 10px auto 20px; }
.wheel-disc {
  width: 100%; height: 100%; border-radius: 50%; position: relative;
  border: 4px solid var(--bg-secondary);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 3s cubic-bezier(0.16, 0.85, 0.2, 1);
}
.wheel-disc .wheel-wedge-label {
  position: absolute; transform: translate(-50%, -50%); text-align: center;
  font-size: 0.85rem; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  white-space: nowrap; pointer-events: none;
}
.wheel-pointer {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 3;
  border-left: 12px solid transparent; border-right: 12px solid transparent;
  border-top: 18px solid var(--accent);
}
.wheel-result { text-align: center; font-size: 1.3rem; font-weight: 800; margin: 10px 0 15px; min-height: 1.6rem; }

.settings-list { display: flex; flex-direction: column; gap: 14px; margin: 16px 0 20px; text-align: left; }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.settings-label { font-weight: 700; color: var(--text-primary); }
.switch { width: 50px; height: 28px; border-radius: 99px; background: var(--bg-secondary); position: relative; flex-shrink: 0; transition: background var(--transition); }
.switch .switch-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform var(--transition); }
.switch.on { background: var(--accent); }
.switch.on .switch-knob { transform: translateX(22px); }

/* Compact win layout (2026-09-04): the full-height card left no game visible
   behind it and read as a whole new page rather than a result popup. */
.modal-win-box { padding: 20px 22px; }
.modal-win-box .modal-title { font-size: 1.5rem; }
.modal-win-box .btn-lg { padding: 13px 24px; font-size: 1.05rem; }
.modal-win-box .modal-btns .btn-outline { padding: 10px 20px; font-size: 0.95rem; }
.win-emoji { font-size: 2.4rem; margin-bottom: 4px; }
#modal-win.campaign-complete .modal-title {
  background: linear-gradient(135deg, #fbbf24, #ff3b30);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 2.1rem;
}
#modal-win.campaign-complete .win-emoji { font-size: 4.5rem; }
.win-stars-row { font-size: 2rem; color: #ccc; margin-bottom: 10px; }
.win-stars-row .wstar.earned { color: var(--star-color); }
/* Wraps into rows instead of squeezing everything onto one line - up to 6
   stats (score/time/hints/gems/combo/golden) can all be visible at once on a
   level with every bonus mechanic active, which badly overlapped in a single
   flex row on the ~260px-wide win modal (reported 2026-09-01, screenshot
   showed the score and combo count overlapping). */
.win-stats-row { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 16px; row-gap: 10px; margin-bottom: 14px; }
.wstat { flex: 0 0 auto; min-width: 56px; text-align: center; }
.wstat-lbl { font-size: 0.7rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; white-space: nowrap; }
.wstat-val { font-size: 1.5rem; font-family: var(--font-logo); font-weight: 900; color: var(--accent); white-space: nowrap; }
.wstat-bonus { font-size: 0.65rem; font-weight: 700; color: var(--star-color); margin-top: 2px; white-space: nowrap; }

.levels-ovr { background: var(--bg-primary); justify-content: flex-start; }
.levels-panel { width: 100%; max-width: 500px; display: flex; flex-direction: column; height: 100%; }
.levels-hdr { display: flex; align-items: center; padding: 20px; gap: 15px; }
.levels-hdr h2 { font-family: var(--font-logo); color: var(--accent); font-size: 1.2rem; flex: 1; }
.ls-stars { font-weight: 800; color: var(--star-color); }
.levels-grid-wrap { padding: 20px; flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; align-content: flex-start; }
.lvl-btn { aspect-ratio: 1; border-radius: 12px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-card); color: var(--accent); border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s; }
.lvl-btn.completed { background: var(--bg-card); border-color: var(--accent); }
.lvl-btn.current { background: var(--accent); color: var(--text-on-btn); }
.lvl-btn.locked { background: var(--bg-secondary); color: var(--text-secondary); opacity: 0.6; }
.lvl-btn-stars { font-size: 0.5rem; letter-spacing: 1px; color: var(--star-color); margin-top: 2px; }

.skins-view-tabs { display: flex; gap: 8px; padding: 0 20px 12px; }
.skins-view-tab { flex: 1; padding: 8px 12px; border-radius: 99px; font-weight: 800; font-size: 0.85rem; background: var(--bg-secondary); color: var(--text-secondary); }
.skins-view-tab.active { background: var(--accent); color: var(--text-on-btn); }
.menu-bundle-promo-btn { border-color: #ffb020; color: #ffb020; }
.update-ready-banner { width: 100%; margin-top: 8px; padding: 10px; border: none; border-radius: 10px; background: var(--accent); color: var(--text-on-btn); font-weight: 800; font-size: 0.9rem; text-align: center; }
.skins-grid-wrap { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.skin-group-header { grid-column: 1 / -1; font-size: 0.9rem; font-weight: 800; color: var(--text-secondary); margin: 10px 0 -4px; padding-top: 6px; border-top: 1px solid var(--bg-card); }
.skin-group-header:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.skin-btn { position: relative; aspect-ratio: 1.3; border-radius: 14px; font-weight: 800; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--bg-card); border: 2px solid transparent; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: transform 0.2s; padding: 10px; }
.skin-btn-premium-badge { position: absolute; top: 6px; right: 8px; font-size: 0.95rem; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.skin-swatch { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--bg-primary); box-shadow: 0 0 0 2px currentColor; }
.skin-btn-name { font-size: 0.85rem; color: var(--text-primary); }
.skin-btn.selected { border-color: var(--accent); }
.skin-btn.locked { opacity: 0.7; background: var(--bg-secondary); cursor: pointer; }
.skin-btn-lock { font-size: 0.7rem; color: var(--text-secondary); font-weight: 600; }
.skin-btn-alt-price { font-size: 0.68rem; color: var(--accent); font-weight: 800; }
.win-new-skin-btn { width: 100%; margin: 0 0 14px; padding: 10px; border-radius: 10px; border: 2px dashed var(--accent); background: transparent; color: var(--accent); font-weight: 800; font-size: 0.85rem; }

/* Gems currency display - menu card + in-game HUD */
#menu-gems { color: var(--text-secondary); font-weight: 700; margin-left: 8px; }
.hud-gems-badge { font-weight: 800; color: var(--text-primary); padding: 4px 10px; }

/* Skin preview modal - opened by tapping a locked tile */
#modal-skin-preview .modal-box { position: relative; }
.skin-preview-close-btn { position: absolute; top: 14px; right: 14px; }
.skin-preview-canvas { width: 100%; max-width: 260px; aspect-ratio: 1; margin: 10px auto 6px; display: block; border-radius: 14px; background: var(--bg-secondary); }
#skin-preview-name { text-align: center; }
#skin-preview-condition { text-align: center; }

/* Stats screen */
.stats-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 20px 15px; }
.stats-summary-card { background: var(--bg-card); border-radius: 12px; padding: 12px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.stats-summary-lbl { font-size: 0.7rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; }
.stats-summary-val { font-size: 1.5rem; font-family: var(--font-logo); font-weight: 900; color: var(--accent); }
.stats-summary-val-sm { font-size: 0.95rem; }
.stats-list-hdr { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; padding: 0 20px 8px; font-size: 0.7rem; font-weight: 800; color: var(--text-secondary); text-transform: uppercase; }
/* Lives inside .ranking-scroll now (screen-ranking merges this with the world
   leaderboard section above it) - that ancestor owns the scrolling, so this
   only needs its own horizontal padding, not another nested flex/overflow. */
.stats-list-wrap { padding: 0 20px 20px; max-height: 320px; overflow-y: auto; }

/* Ranking screen (world leaderboard + personal stats merged) */
.ranking-scroll { flex: 1; overflow-y: auto; }
.ranking-section-hdr { font-weight: 800; font-size: 0.85rem; color: var(--text-secondary); text-transform: uppercase; margin: 18px 20px 10px; text-align: left; }
.ranking-scroll .lb-my-row, .ranking-scroll .lb-list { margin-left: 20px; margin-right: 20px; }
.ranking-scroll .lb-list { max-height: none; }
.stats-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--bg-secondary); font-weight: 700; }
.stats-row-lvl { color: var(--text-primary); }
.stats-row-stars { color: var(--star-color); letter-spacing: 1px; font-size: 0.85rem; }
.stats-row-time { color: var(--text-secondary); font-size: 0.85rem; }
.stats-row-score { color: var(--accent); font-weight: 900; }
.stats-more-hint { padding: 12px 0 4px; text-align: center; font-size: 0.75rem; color: var(--text-secondary); }
.stats-empty { padding: 30px 0; text-align: center; color: var(--text-secondary); font-weight: 700; }

/* Nickname modal */
.nickname-input { width: 100%; padding: 12px 16px; border-radius: 12px; border: 2px solid var(--accent); background: var(--bg-primary); color: var(--text-primary); font-family: var(--font-main); font-weight: 700; font-size: 1rem; margin-bottom: 20px; outline: none; }
.nickname-input::placeholder { color: var(--text-secondary); }

/* Win modal rank badge */
.win-rank-badge { background: var(--bg-primary); border-radius: 12px; padding: 8px; margin-bottom: 12px; font-weight: 800; color: var(--accent); }
.win-level-best-row { display: flex; justify-content: space-between; gap: 10px; background: var(--bg-primary); border-radius: 12px; padding: 8px 12px; margin-bottom: 10px; font-size: 0.78rem; color: var(--text-secondary); }
.win-level-best-row b { color: var(--text-primary); }

/* Leaderboard modal */
.modal-box-wide { max-width: 380px; }
.lb-my-row { display: flex; justify-content: space-between; align-items: center; background: var(--bg-primary); border-radius: 12px; padding: 10px 14px; margin-bottom: 15px; font-weight: 800; }
.lb-list { max-height: 300px; overflow-y: auto; margin-bottom: 20px; text-align: left; }
.lb-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--bg-secondary); }
.lb-row.lb-me { background: var(--bg-primary); border-radius: 8px; }
.lb-rank { width: 28px; font-weight: 900; color: var(--text-secondary); text-align: center; flex-shrink: 0; }
.lb-name { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-progress { font-size: 0.75rem; color: var(--text-secondary); font-weight: 700; flex-shrink: 0; }
.lb-score { font-weight: 900; color: var(--accent); flex-shrink: 0; }
.lb-empty { padding: 20px 0; text-align: center; color: var(--text-secondary); font-weight: 700; }

/* ============================================
   FIRST-RUN TUTORIAL (level 1 only, see js/tutorial.js)
   ============================================ */
.tutorial-overlay { position: fixed; inset: 0; z-index: 400; pointer-events: none; }
.tutorial-spotlight {
  position: absolute; border: 3px solid var(--accent); border-radius: 20px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,0.55); pointer-events: none;
  transition: left 0.35s ease, top 0.35s ease, width 0.35s ease, height 0.35s ease, opacity 0.3s ease;
  animation: tut-pulse 1.6s ease-in-out infinite;
}
.tutorial-spotlight.circle { border-radius: 50%; }
@keyframes tut-pulse {
  0%, 100% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 0 rgba(26,127,232,0.5); }
  50% { box-shadow: 0 0 0 9999px rgba(0,0,0,0.55), 0 0 0 10px rgba(26,127,232,0); }
}
.tutorial-bubble {
  position: absolute; max-width: 300px; width: 86%; background: var(--bg-card); color: var(--text-primary);
  padding: 16px 20px; border-radius: 18px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  pointer-events: auto; text-align: center; border: 2px solid var(--accent); backdrop-filter: blur(10px);
  transition: top 0.35s ease;
}
.tutorial-progress { font-size: 0.7rem; font-weight: 800; color: var(--text-secondary); letter-spacing: 0.05em; margin-bottom: 4px; }
.tutorial-icon { font-size: 1.8rem; margin-bottom: 2px; }
.tutorial-bubble h3 { font-family: var(--font-logo); color: var(--accent); font-size: 1.05rem; margin-bottom: 6px; }
.tutorial-bubble p { font-size: 0.88rem; line-height: 1.4; color: var(--text-primary); margin-bottom: 10px; }
.tutorial-bubble .btn { width: 100%; }
.tutorial-demo-hearts { display: none; gap: 8px; justify-content: center; margin-bottom: 10px; font-size: 1.5rem; }
.tutorial-demo-hearts .heart-icon { color: var(--accent); }
.tutorial-demo-hearts .th-break { animation: th-break 0.6s ease forwards 0.3s; color: var(--accent); }
@keyframes th-break {
  0% { transform: scale(1); opacity: 1; color: var(--accent); }
  35% { transform: scale(1.35); }
  60% { color: #ff3b30; }
  100% { transform: scale(0.7); opacity: 0.3; color: #ff3b30; }
}
.tutorial-skip {
  display: block; margin: 10px auto 0; pointer-events: auto; background: none; border: none;
  color: var(--text-secondary); font-size: 0.75rem; font-weight: 800; font-family: var(--font-main);
  text-decoration: underline; padding: 4px;
}

/* Narrow phones: the top HUD row (3 icon buttons + level/tier/stats cluster + hint/store
   group) was already overflowing a 390px screen before the store button was added (the
   hint pill was getting clipped at the edge) - tighten paddings/gaps/icon sizes here so
   everything fits with room to spare, rather than only patching the new addition. Placed
   at the end of the file so these overrides win the cascade against the earlier
   unconditional HUD rules of equal specificity. */
@media (max-width: 420px) {
  .hud-top { padding: 10px 8px; }
  .hud-controls-group { gap: 6px; }
  .hud-left-group { gap: 4px; }
  .icon-btn { width: 34px; height: 34px; font-size: 0.95rem; }
  .hud-store-icon { width: 31px; height: 31px; font-size: 0.88rem; }
  .hud-remove-ads-btn { padding: 3px 6px; font-size: 0.52rem; max-width: 72px; }
  .hud-hint-btn { padding: 5px 8px; font-size: 0.8rem; }
  .hud-level-badge { padding: 3px 8px; }
  .hud-lvl-num { font-size: 0.9rem; }
  .hud-level-tier-row { gap: 4px; }
  .hud-tier-label { letter-spacing: 0.5px; font-size: 0.58rem; }
  .hud-stats-row { gap: 4px; }
  .hud-arrows-badge { padding: 3px 7px; font-size: 0.75rem; }
  .hud-lives-row { gap: 2px; }
  .heart-icon { font-size: 0.9rem; }
  .hud-difficulty-badge { padding: 3px 7px; font-size: 0.58rem; }
}