@import url('https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Bowlby+One&family=Lilita+One&family=Nunito:wght@400;600;700;800;900&family=Fredoka:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600;1,700&display=swap');

/* ============================================================================
   THE SQUISH 5 — official brand color system
   Locked: brand-DNA, do not modify without overhaul-review.
   Documented in DEVLOG (2026-05-09 mega-overhaul session).
   ============================================================================ */
:root {
  /* The Squish 5 — primary brand */
  --melon-coral:      #FF6B7A;  /* Hero CTA, logo accent, primary brand */
  --melon-coral-hi:   #FF8A95;  /* Coral gradient highlight */
  --melon-coral-lo:   #C8485A;  /* Coral chunky-shadow color */
  --sunset-peach:     #FFB07A;  /* Secondary brand, warm accents */
  --cream-sugar:      #FFF4E6;  /* Default surface / "paper" */
  --plum-ink:         #2B1F3A;  /* Primary text — IKKE pure black */
  --plum-ink-deep:    #1A1228;  /* Deepest shadow */
  --mint-pop:         #7CE0C6;  /* Tertiary spark, fresh accents */

  /* Squish v2 — color-theorist additions (cool counterweight + bridges + pop) */
  --sky-pop:          #5BB0E8;  /* Cool counterweight, fills 130° hue gap */
  --orchid-spark:     #B47AD9;  /* Mid-tone purple bridge */
  --cream-deep:       #FAEFD8;  /* Second surface — modal-edges, raised cards */
  --hot-magenta:      #FF4E78;  /* Combo-pop core, mythic tier */

  /* Per-theme text tokens (Phase 3 — dark bgs need cream text) */
  --text-on-dark-bg:    #FFF4E6;
  --text-secondary-dark:#E8DDF0;

  /* Functional surfaces */
  --surface-1:        #FFF4E6;  /* Modal bg = cream-sugar */
  --surface-2:        #FFFFFF;  /* Cards (sparingly) */
  --surface-3:        #FFE8D1;  /* Raised / tab container */
  --divider:          #EBD9C4;
  --text-primary:     #2B1F3A;
  --text-secondary:   #6B5876;  /* Plum @ 70% */
  --text-disabled:    #B5A8BD;  /* Plum @ 35% */
  --text-on-brand:    #FFFFFF;

  /* Status colors (kawaii-tuned, NOT generic Material) */
  --success:          #5BCB97;  /* Mint-leaning, ikke #4CAF50 */
  --warning:          #FFC857;  /* Honey */
  --danger:           #E84855;  /* Cherry-red sibling */
  --info:             #5BB0E8;  /* Sky-pop double-duty (was #6BA3E8) */

  /* Frame tier accents (Confection Materials) */
  --tier-1-cream:     #FFF4E6;
  --tier-2-glaze:     #FFB5C5;
  --tier-3-honey:     #E8A857;
  --tier-4-gold:      #FFD25F;
  --tier-4-gold-deep: #B8862A;
  --tier-5-crystal:   #F5E6FF;

  /* Achievement tier colors (legacy 4-tier) */
  --tier-bronze:      #C97B47;
  --tier-silver:      #9AA5B5;
  --tier-gold:        #E8B547;
  --tier-plum:        #7B5A9E;

  /* Achievement tier — value-locked 6-tier (Phase 2.4, color-theorist spec) */
  --tier-common:      #FFF4E6;  /* cream */
  --tier-uncommon:    #5BCB97;  /* sage-mint (deeper than mint-pop) */
  --tier-rare:        #5BB0E8;  /* cobalt sky */
  --tier-epic:        #B47AD9;  /* amethyst orchid */
  --tier-legendary:   #F09826;  /* deep amber — static UI, holds value-lock + warm-bg */
  --tier-legendary-motion: #FFB347;  /* bright amber — canvas bursts, score-magnet */
  --tier-mythic:      #FF4E78;  /* hot-magenta — must be animated (Phase 2.4) */

  /* Stroke contracts (color-theorist: enforce Plum Ink rim on warm-on-warm pops) */
  --combo-inner:        #FFD25F;
  --combo-stroke:       var(--plum-ink);
  --tier-mythic-stroke: var(--plum-ink);

  /* Type-scale tokens (Phase 3.3) */
  --font-display:     'Fredoka', system-ui, sans-serif;          /* Hierarki, titles */
  --font-ui:          'Nunito', -apple-system, sans-serif;       /* Body, labels */
  --font-pop:         'Bowlby One', 'Bagel Fat One', 'Fredoka', system-ui, -apple-system, sans-serif; /* Combo-pops, score-magnet */
  --font-num:         'Fredoka', system-ui, sans-serif;          /* Score, tabular numbers */

  /* Border radius scale (lock to: 16/20/28/32) */
  --radius-card:      20px;
  --radius-modal:     28px;
  --radius-button:    28px;
  --radius-frame:     32px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* True iPhone bleed-mode: html + body locked til viewport så bg paints
   helt ut til kantene (inkludert bak dynamic island, notch, og home
   indicator). overscroll-behavior:none stopper rubber-band-bounce. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  /* Default desktop preview-bg (gradient bak iPhone-kortet på desktop). På
     mobil overrides denne i @media-blokken nederst for sky-matching bg. */
  background: linear-gradient(160deg, #f5e6f5 0%, #e8d4f0 50%, #f0d4e0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #4a3578;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  position: relative;
  padding: 16px;
}

/* Sky-bakgrunn — fyller game-card, IKKE viewport (avgrenset til iPhone-kortet) */
.game-bg {
  position: absolute;
  inset: 0;
  background: url('assets/play-bg-apricot-morning.png') center/cover no-repeat;
  z-index: 0;
  /* skyDrift animation droppet for iOS — animating background-position on
     1.3 MB bg-image triggers full repaint on every frame. Static bg saves
     ~5-8% CPU on idle gameplay. Visually nearly unchanged (30% pan was subtle). */
}
/* Inner-fade vignette (2026-05-16): subtil radial-mørkning mot edges + center-
   transparent så fruktene popper. CSS-only, zero perf-cost. Innenfor framen
   (canvas-overlay z 5+), så framen forblir crisp men bg-edges fader. */
.game-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(40, 20, 50, 0.18) 100%);
  pointer-events: none;
  z-index: 1;
}

@keyframes skyDrift {
  0%   { background-position: 35% center; }
  100% { background-position: 65% center; }
}

/* ================================================
   SPLASH SCREEN — innrammet som "telefon-kort"
   ================================================ */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.5s ease;
  padding: 16px;
}

.splash.hidden {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

.splash-card {
  position: relative;
  /* World Coordinates (2026-05-15): match .game-wrap dimensions exactly
     (max-width 540 + aspect 858/1834) so the splash fully covers the
     game-wrap behind it on desktop. Was 420/400-by-720 — too small,
     leaking game-wrap edges around the splash card. */
  width: min(100% - 16px, 540px);
  aspect-ratio: 858 / 1834;
  max-height: calc(100vh - 32px);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(120, 80, 180, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: splashEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.splash-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 2026-05-10 final: natural saturation. The actual fix was removing the
     dark vignette overlay (which was killing watermelon colors in lower
     half). PNG/video render at native saturation. */
}

/* Loopende intro-video — dekker img bak (samme stack-level, video siste i DOM
   så den naturlig ligger over img). Hvis video feiler, img er fallback. */
.splash-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* Natural saturation — vignette removal was the real fix. */
}

/* === SPLASH SPARKLES — gold "stardust" som blinker stille for eksklusiv feel === */
.splash-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}

.splash-sparkles span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 230, 150, 0.95) 30%,
    rgba(255, 200, 80, 0.5) 60%,
    transparent 85%);
  box-shadow:
    0 0 12px rgba(255, 235, 170, 0.95),
    0 0 24px rgba(255, 215, 100, 0.5);
  animation: splashTwinkle ease-in-out infinite;
  opacity: 0;
  will-change: transform, opacity;
}

/* Større, brightere sparkler — varierte størrelser via custom scale */
.splash-sparkles span:nth-child(1)  { left: 10%; top: 15%; animation-duration: 2.8s; animation-delay: 0.0s; --s: 1.2; }
.splash-sparkles span:nth-child(2)  { left: 88%; top: 18%; animation-duration: 3.2s; animation-delay: 0.7s; --s: 0.9; }
.splash-sparkles span:nth-child(3)  { left: 16%; top: 50%; animation-duration: 2.5s; animation-delay: 1.4s; --s: 1.4; }
.splash-sparkles span:nth-child(4)  { left: 84%; top: 52%; animation-duration: 3.0s; animation-delay: 0.3s; --s: 1.0; }
.splash-sparkles span:nth-child(5)  { left: 28%; top: 28%; animation-duration: 2.2s; animation-delay: 2.0s; --s: 0.8; }
.splash-sparkles span:nth-child(6)  { left: 72%; top: 30%; animation-duration: 3.5s; animation-delay: 1.0s; --s: 1.5; }
.splash-sparkles span:nth-child(7)  { left: 40%; top: 72%; animation-duration: 2.7s; animation-delay: 0.5s; --s: 1.1; }
.splash-sparkles span:nth-child(8)  { left: 60%; top: 75%; animation-duration: 3.1s; animation-delay: 1.8s; --s: 0.9; }
.splash-sparkles span:nth-child(9)  { left: 6%;  top: 68%; animation-duration: 2.9s; animation-delay: 2.4s; --s: 1.3; }
.splash-sparkles span:nth-child(10) { left: 94%; top: 70%; animation-duration: 2.4s; animation-delay: 1.2s; --s: 1.0; }
.splash-sparkles span:nth-child(11) { left: 50%; top: 8%;  animation-duration: 3.3s; animation-delay: 0.6s; --s: 1.6; }
.splash-sparkles span:nth-child(12) { left: 22%; top: 86%; animation-duration: 2.6s; animation-delay: 1.5s; --s: 1.1; }

@keyframes splashTwinkle {
  0%, 100% { opacity: 0;   transform: scale(calc(var(--s, 1) * 0.4)); }
  50%      { opacity: 1;   transform: scale(calc(var(--s, 1) * 1.5)); }
}

.splash-vignette {
  position: absolute;
  inset: 0;
  /* 2026-05-10 v3: vignette removed entirely. Founder's video reference shows
     vivid uncrushed colors all the way to bottom — any dark fade kills the
     watermelon's saturation. "Tap to start" text already has 3 stacked
     shadows for legibility, doesn't need bg-dim. */
  background: none;
  pointer-events: none;
}

.splash-content {
  position: relative;
  /* 2026-05-16: full-height kolonne så vi kan plassere logo øverst, krystall
     midt-til-nederst (matcher intro-bg PNG), og "Tap crystal" nederst. Var:
     alt sentrert i klump 18vh fra bunn — gjorde "Tap to start" usynlig
     halvveis ned i bildet. */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 6% 24px 9%;
  z-index: 3;  /* over vignette + sparkles */
  box-sizing: border-box;
}

.splash-logo {
  /* 2026-05-17: bredde synket m/ .gameover-logo + .newbest-banner-logo
     (min(85%, 380px)) så logo-plasseringen er identisk på alle 3 screens. */
  width: min(85%, 380px);
  height: auto;
  animation: logoWobble 3.5s ease-in-out infinite;
  /* logoGlow filter-animation droppet for iOS — animated drop-shadow re-runs
     alpha-shadow blur on entire bitmap each keyframe. Static drop-shadow below
     gir samme luminous feel uten cost. */
  transform-origin: center;
  /* Multi-layered drop-shadow for premium "luminous" feel rundt logoen */
  filter:
    drop-shadow(0 0 16px rgba(255, 240, 180, 0.85))
    drop-shadow(0 0 32px rgba(255, 200, 120, 0.55))
    drop-shadow(0 8px 20px rgba(80, 30, 70, 0.4));
}

@keyframes logoWobble {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50%      { transform: rotate(2deg)  scale(1.03); }
}

@keyframes logoGlow {
  0%, 100% {
    filter:
      drop-shadow(0 0 14px rgba(255, 240, 180, 0.75))
      drop-shadow(0 0 28px rgba(255, 200, 120, 0.45))
      drop-shadow(0 8px 20px rgba(80, 30, 70, 0.4));
  }
  50% {
    filter:
      drop-shadow(0 0 22px rgba(255, 245, 195, 0.95))
      drop-shadow(0 0 44px rgba(255, 215, 130, 0.65))
      drop-shadow(0 8px 20px rgba(80, 30, 70, 0.4));
  }
}

@keyframes splashEntrance {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

/* === STREAK-PILL på splash — kompakt glassmorphism med subtil gold accent === */
.splash-streak {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid rgba(255, 215, 0, 0.45);
  border-radius: 100px;
  padding: 4px 12px 4px 8px;
  box-shadow:
    0 4px 14px rgba(255, 150, 80, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  animation: streakSoftGlow 4s ease-in-out infinite;
}

.splash-streak.hidden { display: none; }

.splash-streak-flame {
  font-size: 14px;
  filter: drop-shadow(0 0 6px rgba(255, 150, 50, 0.7));
}

.splash-streak-count {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(180, 60, 0, 0.5);
  font-variant-numeric: tabular-nums;
}

.splash-streak-label {
  font-family: 'Nunito', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: rgba(255, 230, 200, 0.95);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(80, 30, 70, 0.6);
}

@keyframes streakSoftGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(255, 150, 80, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35); }
  50%      { box-shadow: 0 5px 20px rgba(255, 180, 100, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.45); }
}

/* === JUICE GARDEN på game-over — lifetime-progresjon mot neste tema-unlock === */
.gameover-juice-cup {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 14px 8px 10px;
  background: rgba(255, 215, 0, 0.12);
  border: 1.5px solid rgba(255, 180, 50, 0.55);
  border-radius: 14px;
  min-width: 200px;
  max-width: 240px;
}

.gameover-juice-icon {
  font-size: 20px;
  filter: drop-shadow(0 0 6px rgba(255, 200, 100, 0.5));
}

.gameover-juice-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.gameover-juice-label {
  font-family: 'Nunito', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: #b8743e;
  text-transform: uppercase;
}

.gameover-juice-bar {
  width: 100%;
  height: 4px;
  background: rgba(120, 80, 40, 0.18);
  border-radius: 2px;
  overflow: hidden;
}

.gameover-juice-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff8a00, var(--tier-legendary));
  border-radius: 2px;
  transition: width 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
  box-shadow: 0 0 6px rgba(255, 180, 50, 0.6);
  width: 0%;
}

.gameover-juice-progress-text {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #6b4d99;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

/* === DAGLIG UTFORDRING på splash — kompakt glassmorphism med gold accent === */
.splash-challenge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.10);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid rgba(255, 215, 0, 0.35);
  border-radius: 14px;
  padding: 8px 18px 10px;
  box-shadow:
    0 6px 18px rgba(40, 20, 80, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  min-width: 200px;
  max-width: 240px;
}

.splash-challenge.hidden { display: none; }

.splash-challenge.completed {
  border-color: rgba(120, 220, 150, 0.7);
  box-shadow:
    0 6px 20px rgba(40, 160, 80, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.splash-challenge-label {
  font-family: 'Nunito', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--tier-legendary);
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(40, 20, 80, 0.6);
}

.splash-challenge-desc {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(40, 20, 80, 0.7);
  text-align: center;
  line-height: 1.15;
}

.splash-challenge-progress-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}

.splash-challenge-progress-bar {
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
}

.splash-challenge-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--tier-legendary), #ff8a00);
  border-radius: 2px;
  transition: width 0.4s ease;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
  width: 0%;
}

.splash-challenge.completed .splash-challenge-progress-fill {
  background: linear-gradient(90deg, #aaffc8, #5fd98c);
  box-shadow: 0 0 6px rgba(120, 220, 150, 0.6);
}

.splash-challenge-progress-text {
  font-family: 'Nunito', -apple-system, sans-serif;
  font-weight: 800;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(40, 20, 80, 0.5);
}

/* Game-over challenge — kompakt en-linjes versjon */
.gameover-challenge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 12px;
  background: rgba(123, 80, 220, 0.18);
  border: 1.5px solid rgba(123, 80, 220, 0.6);
  border-radius: 16px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  color: #6b4d99;
  font-size: 13px;
  flex-wrap: wrap;
  justify-content: center;
}

.gameover-challenge.completed {
  background: rgba(80, 200, 120, 0.22);
  border-color: rgba(40, 160, 80, 0.7);
  color: #2a8048;
}

.gameover-challenge.hidden { display: none; }

.gameover-challenge-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: 0.8;
}

.gameover-challenge-status {
  font-weight: bold;
}

/* Game-over streak (mer subtil — du har allerede sett scoren, dette er bonus-info) */
.gameover-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 12px;
  background: rgba(255, 138, 0, 0.18);
  border: 1.5px solid rgba(255, 138, 0, 0.6);
  border-radius: 16px;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  color: #b8743e;
  font-size: 16px;
}

.gameover-streak.hidden { display: none; }

.gameover-streak-flame {
  font-size: 18px;
}

.gameover-streak-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.85;
}

.splash-tap {
  /* Wave-13.16 (Handlingsplan R-1): flyttet RETT OVER krystallen i stedet for
     mid-screen-floating. Tidligere margin-top:auto+margin-bottom:30vh la
     teksten over watermelon-mascotens fjes — players forsto ikke at
     krystallen NEDENFOR var tap-target. Nå sitter teksten 8px over crystal
     med pekende ↓-arrow så det er umiddelbart klart.
     Wave-13.19 (R3-8): tekst + arrow stacker vertikalt (display:flex column)
     for tydligere "pek-NEDOVER"-flow → bedre enn horisontal inline. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: auto 0 8px;  /* auto-top dytter logoblokken opp + crystal ned, tap-text fester rett over crystal */
  font-family: 'Lilita One', cursive;
  font-size: clamp(18px, 5vw, 24px);  /* litt mindre så det ikke konkurrerer med logo */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFF4E6;
  text-shadow:
    -2px 0   0 #4a2150,
     2px 0   0 #4a2150,
     0  -2px 0 #4a2150,
     0   2px 0 #4a2150,
    -1.5px -1.5px 0 #4a2150,
     1.5px -1.5px 0 #4a2150,
    -1.5px  1.5px 0 #4a2150,
     1.5px  1.5px 0 #4a2150,
     0 4px 0 rgba(74, 33, 80, 0.55),
     0 8px 14px rgba(0, 0, 0, 0.4);
  animation: tapPulse 1.4s ease-in-out infinite;
}

@keyframes tapPulse {
  0%, 100% { opacity: 0.88; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}
/* Wave-13.16 (R-1): ↓-arrow med bouncing-animation som peker NED mot krystallen
   Wave-13.19 (R3-8): block + 1.6em så arrow er TYDELIG og står på egen linje */
.splash-tap-arrow {
  display: block;
  font-size: 1.6em;
  line-height: 1;
  margin-left: 0;
  animation: tapArrowBounce 1.4s ease-in-out infinite;
}
@keyframes tapArrowBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-tap-arrow { animation: none; }
}

/* ===== SPLASH CRYSTAL TAP-TARGET (2026-05-16) ===== */
/* Sits over hvor krystallen ligger i intro-bg PNG (sentert litt under
   midten). Pulserende rosa glow + 6 floating partikler som drifter oppover. */
.splash-crystal {
  position: relative;
  width: clamp(140px, 42vw, 240px);
  aspect-ratio: 1 / 1;
  margin-top: auto;          /* push krystallen til midt-nedre del */
  margin-bottom: 4vh;        /* leave room for "Tap crystal to start" under */
  pointer-events: none;
}
.splash-crystal-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255, 200, 230, 0.85) 0%,
      rgba(255, 140, 200, 0.55) 22%,
      rgba(255, 110, 180, 0.3) 42%,
      rgba(255, 110, 180, 0) 70%);
  filter: blur(2px);
  animation: crystalPulse 1.8s ease-in-out infinite;
  mix-blend-mode: screen;
}
@keyframes crystalPulse {
  0%, 100% { transform: scale(0.85); opacity: 0.75; }
  50%      { transform: scale(1.10); opacity: 1; }
}
.splash-crystal-particles {
  position: absolute;
  inset: 0;
}
.splash-crystal-particles > span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF4E6 0%, rgba(255, 230, 210, 0.7) 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(255, 200, 230, 0.9);
  animation: crystalFloat 3.4s ease-in-out infinite;
  opacity: 0;
}
.splash-crystal-particles > span:nth-child(1) { left: 18%; top: 60%; animation-delay: 0s;   --dx: 10px;  --dy: -85px; }
.splash-crystal-particles > span:nth-child(2) { left: 80%; top: 55%; animation-delay: 0.4s; --dx: -8px;  --dy: -90px; }
.splash-crystal-particles > span:nth-child(3) { left: 50%; top: 75%; animation-delay: 0.8s; --dx: 0px;   --dy: -105px; }
.splash-crystal-particles > span:nth-child(4) { left: 28%; top: 38%; animation-delay: 1.2s; --dx: 12px;  --dy: -60px; }
.splash-crystal-particles > span:nth-child(5) { left: 72%; top: 42%; animation-delay: 1.6s; --dx: -10px; --dy: -65px; }
.splash-crystal-particles > span:nth-child(6) { left: 50%; top: 50%; animation-delay: 2.0s; --dx: 0px;   --dy: -75px; width: 5px; height: 5px; }
@keyframes crystalFloat {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .splash-crystal-glow { animation: none; }
  .splash-crystal-particles > span { animation: none; opacity: 0.7; }
}

/* ================================================
   GAME WRAP — iPhone-card mode (konsistent med splash + gameover)
   ================================================ */
.game-wrap {
  position: relative;
  /* WORLD COORDINATES (2026-05-15): aspect locked to 858/1834 ≡ scene-pack
     PNG aspect. Frame + hub layers (background-size: contain) now fit the
     wrap pixel-perfect on every viewport — no scale workarounds. Phones
     whose viewport aspect differs (iPhone SE 9:16, Pro Max 9:19.5) get
     letterbox sides via the mobile @media override below. */
  width: min(100% - 16px, 540px);
  aspect-ratio: 858 / 1834;
  max-height: calc(100vh - 32px);
  border-radius: 32px;
  overflow: hidden;
  margin: 0 auto;
  box-shadow:
    0 30px 80px rgba(120, 80, 180, 0.45),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  display: block;
  padding: 0;
}

/* === SCENE-PACK 3-LAYER OVERLAYS (2026-05-13) ===
   Layered scene-pack system. Each layer is a 858×1834 PNG (or aspect-equiv)
   stacked via `background-size: contain`. Pixel positions baked into PNGs
   line up because all 3 share the same canvas coordinate space.

   Activate by setting `data-scene-pack="<id>"` on .game-wrap. The 3 layers
   then render via the data-attr selectors below. Old `.game-bg` +
   `.game-frame-overlay` stay hidden while a scene-pack is active.

   Responsive: background-size:contain auto-scales to fit any iPhone size
   while preserving aspect — no media queries needed. */
/* Scene-pack layers per template-spec v4:
   - BG fills the whole wrap (cover)
   - FRAME is positioned at top 13% to height 59% (matches spec ring at y=238-1322 on 1834 canvas)
   - HUB is positioned at top 82% to height 14% (matches spec hub at y=1500-1640)
   - 9.7% drip-zone gap between frame bottom (1322) and hub top (1500)
   All 3 PNGs use background-size: contain so their aspect is preserved within these boxes. */
.scene-pack-layer {
  position: absolute;
  background-repeat: no-repeat;
  pointer-events: none;
  display: none;
}
.scene-pack-bg-layer {
  inset: 0;
  background-size: cover;     /* fill the wrap, crop if needed */
  background-position: center center;
  z-index: 1;
  /* Wave-8.19 (premium-mood pass 1/3): desaturer + heve bg så frukter
     får mer punch i kontrast. Subtilt — bg-art forblir lesbar, men
     skyves bakover i hierarkiet. */
  filter: saturate(0.88) brightness(1.04);
}
/* Wave-8.19 (pass 2/3): warm cream-veil over bg, BEHIND frukter.
   Lifter "calm magical window"-feel — fruktene sitter på et roligere
   lerret istedenfor å konkurrere med bg-detalj. Sit på top av bg-art
   men under canvas (z-index 1.5 via DOM-order eller pseudo). */
.scene-pack-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 240, 220, 0.18);
  pointer-events: none;
}
/* Wave-8.19 (pass 3/3): soft inner vignette på play-area edges.
   Mørkner kantene ~6-10% mot senter — gir "lens depth"-feel og lar
   frukter visuelt "lande" i en vugge. Radial-gradient mask sentrert. */
.scene-pack-bg-layer::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center,
      transparent 50%,
      rgba(80, 50, 30, 0.08) 78%,
      rgba(80, 50, 30, 0.22) 100%);
  pointer-events: none;
  z-index: 2;
}

/* === Wave-8.20: Atmosphere drift-sparkles ================================
   12 små sparkles floater oppover sakte i bg-layer. Decorative depth
   feature — ikke gameplay-particles. Pure CSS, ingen JS animation-loop.
   Hver sparkle har randomized animation-delay + horizontal position via
   :nth-child slik at de feller asynkront og kontinuerlig.

   Treffer alle themes automatisk (sparkle-container injected i game-wrap
   via JS ved module-init). */
.scene-pack-atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.atmosphere-sparkle {
  position: absolute;
  bottom: -10px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  /* Wave-13.21 P2: dropped `filter: blur(0.5px)` — hver blur er offscreen-pass
     på iOS Safari, og 12 (nå 6) av dem = permanent compositor-arbeid.
     Soft radial-gradient gir samme luminous feel uten GPU-cost. */
  background: radial-gradient(circle, rgba(255, 250, 220, 0.9) 0%, rgba(255, 220, 170, 0.4) 45%, transparent 80%);
  animation: atmosphere-drift linear infinite;
  opacity: 0;
}
@keyframes atmosphere-drift {
  0%   { transform: translate(0, 0) scale(0.5);  opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 0.7; }
  100% { transform: translate(var(--drift-x, 8px), -110vh) scale(1); opacity: 0; }
}
/* Spread sparkles horizontally + tune size/timing per slot. 12 sparkles,
   varied positions, durations, sizes for organic feel. */
.atmosphere-sparkle:nth-child(1)  { left:  7%; animation-duration: 14s; animation-delay:  -2s; --drift-x:  10px; width: 5px; height: 5px; }
.atmosphere-sparkle:nth-child(2)  { left: 18%; animation-duration: 18s; animation-delay:  -7s; --drift-x: -14px; }
.atmosphere-sparkle:nth-child(3)  { left: 28%; animation-duration: 16s; animation-delay: -11s; --drift-x:   6px; width: 3px; height: 3px; }
.atmosphere-sparkle:nth-child(4)  { left: 39%; animation-duration: 20s; animation-delay:  -3s; --drift-x:  16px; }
.atmosphere-sparkle:nth-child(5)  { left: 47%; animation-duration: 13s; animation-delay: -15s; --drift-x:  -8px; width: 6px; height: 6px; }
.atmosphere-sparkle:nth-child(6)  { left: 56%; animation-duration: 17s; animation-delay:  -9s; --drift-x:  12px; }
.atmosphere-sparkle:nth-child(7)  { left: 64%; animation-duration: 19s; animation-delay:  -1s; --drift-x: -10px; width: 4px; height: 4px; }
.atmosphere-sparkle:nth-child(8)  { left: 72%; animation-duration: 15s; animation-delay: -13s; --drift-x:  14px; }
.atmosphere-sparkle:nth-child(9)  { left: 81%; animation-duration: 21s; animation-delay:  -5s; --drift-x:  -6px; width: 5px; height: 5px; }
.atmosphere-sparkle:nth-child(10) { left: 88%; animation-duration: 16s; animation-delay:  -8s; --drift-x:  10px; }
.atmosphere-sparkle:nth-child(11) { left: 13%; animation-duration: 22s; animation-delay: -17s; --drift-x:  -4px; width: 3px; height: 3px; }
.atmosphere-sparkle:nth-child(12) { left: 76%; animation-duration: 19s; animation-delay: -19s; --drift-x:  18px; }
@media (prefers-reduced-motion: reduce) {
  .atmosphere-sparkle { animation: none; opacity: 0.3; }
}
/* All frames same dimensions (985×1597) — single CSS rule for ALL packs.
   scale(1.14) makes the ring inside the PNG fill the wrap edge-to-edge.
   With World Coordinates (wrap aspect locked to 858/1834), this scale is
   now CONSISTENT across all viewports — was the source of the iPhone bug
   when wrap-aspect varied. */
.scene-pack-frame-layer {
  inset: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1.14);
  transform-origin: center center;
  z-index: 4;
}
/* All hubs same dimensions (856×1832, half scale of source) — single CSS rule.
   Bottom-anchored + Y-offset to push the hub bar further down below the frame.
   bottom: -16% is intentional design — places hub visually below frame inner-
   bottom with the drip-zone gap. With World Coordinates, the -16% pixel-
   value is now stable across viewports. */
.scene-pack-hub-layer {
  top: 0;
  left: 0;
  right: 0;
  bottom: -16%;
  background-size: contain;
  background-position: center bottom;
  z-index: 5;
  /* Sterkere skygge per Martin-feedback 2026-05-15. To-lags drop-shadow:
     en tett tight shadow rett under for "lifted off ground"-feel, og en
     myk ambient under for dybde. */
  filter:
    drop-shadow(0 4px 8px rgba(40, 20, 10, 0.55))
    drop-shadow(0 14px 22px rgba(40, 20, 10, 0.35));
}

/* === HUB-WELLS FRUIT OVERLAY (2026-05-15) ============================
   Renders 7 fruit icons + 1 star over the scene-pack hub PNG's wells.
   Each fruit is grayed-out (desaturate + dim) by default and lights up
   (full color + glow) once that tier is reached in player's lifetime.
   Positioned to align with hub PNG well-row visually.
   Only shown when a scene-pack is active (parent display rule below). */
.scene-pack-hub-fruits {
  position: absolute;
  /* Well-row coords — reverted til 2026-05-15 v5 (left 10.5% / right 9.5%)
     fordi v6's globale shift skiftet ALLE frukter venstre, ikke bare star+
     watermelon som Martin ba om. Per-slot nudge på slots 7+8 nedenfor i stedet. */
  left: 10.5%;
  right: 9.5%;
  bottom: 5.4%;
  height: 6.5%;
  display: none;          /* hidden unless scene-pack active */
  align-items: center;
  justify-content: space-between;
  gap: 0;
  z-index: 6;             /* above hub-layer (z:5), below corner-sparks */
  pointer-events: none;   /* purely visual */
}
.game-wrap[data-scene-pack] .scene-pack-hub-fruits { display: flex; }

.scene-pack-hub-fruits .hub-fruit-slot {
  flex: 0 0 auto;
  width: 10%;             /* slot ≈ 8% of wrap → litt mindre per Martin v5 */
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.3s ease;
  /* Subtle radial well-glow behind LIT fruits — reads as "the well is
     active" without obscuring the hub PNG's well-rim art. Default 0
     opacity, only shows when slot is .is-lit (rule below). */
  --well-glow: transparent;
  background: radial-gradient(circle at 50% 55%, var(--well-glow) 0%, transparent 65%);
}
.scene-pack-hub-fruits .hub-fruit-slot img,
.scene-pack-hub-fruits .hub-fruit-slot .hub-star {
  width: 86%;             /* -20% per Martin v6 — slot stays, img shrinks */
  height: 86%;
  object-fit: contain;
  margin-top: -1%;        /* light lift so leafy stems clear well top-rim */
}
/* 2026-05-17: per-slot nudge — kun watermelon (slot 7) + crystal-seed (slot 8)
   skiftet 3px til venstre per Martin. Resterende slots blir der de er. */
.scene-pack-hub-fruits .hub-fruit-slot:nth-child(7),
.scene-pack-hub-fruits .hub-fruit-slot:nth-child(8) {
  position: relative;
  left: -3px;
}
/* Grayed state — desaturated + dim silhouette, well looks dormant. */
.scene-pack-hub-fruits .hub-fruit-slot.is-locked img {
  filter: grayscale(1) brightness(0.5) contrast(0.85);
  opacity: 0.55;
}
/* Lit state — full color + theme-accent halo behind + drop-shadow glow on
   character + soft ground-shadow underneath. Reads like the character is
   STANDING IN a glowing well. */
.scene-pack-hub-fruits .hub-fruit-slot.is-lit {
  --well-glow: var(--scene-accent, rgba(255, 200, 120, 0.55));
}
.scene-pack-hub-fruits .hub-fruit-slot.is-lit img {
  filter: drop-shadow(0 0 8px var(--scene-accent, rgba(255, 200, 120, 0.85)))
          drop-shadow(0 3px 3px rgba(40, 20, 10, 0.45));
  opacity: 1;
}
/* Just-unlocked DOPAMINE POP (2026-05-15 v2 per Martin "tenk dopamin"):
   1. Anticipation: tiny compress (0.85x)
   2. Punch: scale-up to 1.65x with slight rotation wiggle + brightness flash
   3. Bounce: overshoot back to 0.95x
   4. Settle: ease to lit state at 1x
   PLUS a radial-burst ring expanding outward via ::after pseudo-element. */
.scene-pack-hub-fruits .hub-fruit-slot.is-just-unlocked {
  animation: hubFruitUnlock 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 7;             /* above siblings during the pop so it doesn't get clipped */
}
.scene-pack-hub-fruits .hub-fruit-slot.is-just-unlocked img {
  animation: hubFruitUnlockFlash 0.6s ease-out;
}
.scene-pack-hub-fruits .hub-fruit-slot.is-just-unlocked::after {
  content: "";
  position: absolute;
  inset: -40%;
  border-radius: 50%;
  border: 3px solid var(--scene-accent, #ffd76b);
  box-shadow: 0 0 14px var(--scene-accent, #ffd76b);
  pointer-events: none;
  animation: hubFruitUnlockRing 0.7s ease-out forwards;
  opacity: 0;
}
@keyframes hubFruitUnlock {
  0%   { transform: scale(0.85); }
  15%  { transform: scale(1.65) rotate(-4deg); }
  35%  { transform: scale(1.45) rotate(5deg); }
  55%  { transform: scale(1.15) rotate(-2deg); }
  75%  { transform: scale(0.95); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes hubFruitUnlockFlash {
  0%   { filter: brightness(1) saturate(1); }
  15%  { filter: brightness(2.4) saturate(2.2); }
  60%  { filter: brightness(1.3) saturate(1.4); }
  100% { filter: brightness(1) saturate(1); }
}
@keyframes hubFruitUnlockRing {
  0%   { transform: scale(0.4); opacity: 1; border-width: 4px; }
  60%  { opacity: 0.8; border-width: 2px; }
  100% { transform: scale(2.1); opacity: 0; border-width: 1px; }
}

/* Gentle ambient pulse on lit slots — subtle "alive" feel, low intensity
   so it doesn't compete with the unlock-pop. ~3s loop. */
.scene-pack-hub-fruits .hub-fruit-slot.is-lit:not(.is-just-unlocked) img {
  animation: hubFruitLitPulse 3.4s ease-in-out infinite;
}
@keyframes hubFruitLitPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
/* Star slot — 2026-05-17 byttet ★ symbol med mini crystal-seed PNG.
   .hub-star-img er img-varianten; fallback til .hub-star span hvis bilde feiler. */
.scene-pack-hub-fruits .hub-fruit-slot .hub-star {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 200%;
  line-height: 1;
  color: rgba(255, 215, 100, 0.35);
  text-shadow: 0 1px 2px rgba(40, 20, 10, 0.4);
  filter: grayscale(1) brightness(0.7);
}
.scene-pack-hub-fruits .hub-fruit-slot .hub-star-img {
  /* Override font-size/color (irrelevant for img) — uses base 86% slot fill
     fra .hub-fruit-slot img rule. Dim/gray when locked, lit pink-glow når aktiv. */
  font-size: 0;
  color: transparent;
  filter: grayscale(0.9) brightness(0.65);
  opacity: 0.55;
}
.scene-pack-hub-fruits .hub-fruit-slot.is-lit .hub-star {
  color: #ffd76b;
  filter: drop-shadow(0 0 8px rgba(255, 215, 100, 0.9))
          drop-shadow(0 2px 4px rgba(40, 20, 10, 0.4));
  animation: hubStarTwinkle 2.2s ease-in-out infinite;
}
.scene-pack-hub-fruits .hub-fruit-slot.is-lit .hub-star-img {
  filter: drop-shadow(0 0 10px rgba(255, 130, 180, 0.85))
          drop-shadow(0 2px 4px rgba(80, 20, 60, 0.4));
  opacity: 1;
  animation: hubStarTwinkle 2.2s ease-in-out infinite;
}
@keyframes hubStarTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.95; }
  50%      { transform: scale(1.08) rotate(8deg); opacity: 1; }
}

/* Canvas-wrap stays at original size — frame layer is OVERLAY that visually
   appears around the playable area. Fruits land at canvas bottom (~y=731 in
   812-viewport) which aligns with the bottom-anchored frame visual bottom. */

/* Color filter removed per user feedback — fruits keep their natural colors. */

/* Per-theme accent color — drives particle color, lightsaber aim-line, frame
   glow, hub glow, hub-well lit-glow. Single source of truth for "what color
   is this world". Set on BOTH data-scene-pack (new system) AND data-theme
   (legacy themes) so particles + glow work in both modes (2026-05-15).
   --scene-accent-rgb is the comma-separated rgb tuple for use in rgba(). */
.game-wrap[data-scene-pack="apricot-morning"],
.game-wrap[data-theme="apricot-morning"]    { --scene-accent: #f2b89a; --scene-accent-rgb: 242, 184, 154; }
.game-wrap[data-scene-pack="kiwi-hollow"],
.game-wrap[data-theme="kiwi-hollow"]        { --scene-accent: #a3c87c; --scene-accent-rgb: 163, 200, 124; }
.game-wrap[data-scene-pack="peach-mist"],
.game-wrap[data-theme="peach-mist"]         { --scene-accent: #f0c8c4; --scene-accent-rgb: 240, 200, 196; }
.game-wrap[data-scene-pack="strawberry-sunrise"],
.game-wrap[data-theme="strawberry-sunrise"] { --scene-accent: #f08070; --scene-accent-rgb: 240, 128, 112; }
.game-wrap[data-scene-pack="citrus-lanterns"],
.game-wrap[data-theme="citrus-lanterns"]    { --scene-accent: #ffa550; --scene-accent-rgb: 255, 165, 80; }
.game-wrap[data-scene-pack="plum-dusk"],
.game-wrap[data-theme="plum-dusk"]          { --scene-accent: #c882e6; --scene-accent-rgb: 200, 130, 230; }
.game-wrap[data-scene-pack="melon-beach"],
.game-wrap[data-theme="melon-beach"]        { --scene-accent: #ff6b7a; --scene-accent-rgb: 255, 107, 122; }
.game-wrap[data-theme="cherry-blossom"]     { --scene-accent: #ffadc5; --scene-accent-rgb: 255, 173, 197; }
.game-wrap[data-theme="melon-beach"]        { --scene-accent: #ff6b7a; --scene-accent-rgb: 255, 107, 122; }
.game-wrap[data-theme="velvet-vines"]       { --scene-accent: #b08adc; --scene-accent-rgb: 176, 138, 220; }
.game-wrap[data-theme="apple-orchard"]      { --scene-accent: #e85a3c; --scene-accent-rgb: 232, 90, 60; }

/* Rarity-tiered theme-color glow on frame + hub (2026-05-15 update):
   - Common (apricot-morning), Uncommon (kiwi-hollow): NO theme glow (clean look)
   - Rare (peach-mist, strawberry-sunrise): soft 10px theme-color halo
   - Epic (citrus-lanterns, plum-dusk): strong 16px + 28px theme-color glow
   Hub-layer also keeps its base ground-shadow (defined below in main rule).
   Frame-layer has NO base shadow — only the theme-glow when present. */

/* Rare frame+hub glow */
.game-wrap[data-scene-pack="peach-mist"] .scene-pack-frame-layer,
.game-wrap[data-scene-pack="strawberry-sunrise"] .scene-pack-frame-layer {
  filter: drop-shadow(0 0 10px rgba(var(--scene-accent-rgb), 0.55));
}
.game-wrap[data-scene-pack="peach-mist"] .scene-pack-hub-layer,
.game-wrap[data-scene-pack="strawberry-sunrise"] .scene-pack-hub-layer {
  filter:
    drop-shadow(0 0 10px rgba(var(--scene-accent-rgb), 0.55))
    drop-shadow(0 4px 8px rgba(40, 20, 10, 0.55))
    drop-shadow(0 14px 22px rgba(40, 20, 10, 0.35));
}

/* Epic frame+hub glow — stronger double-pass for "this is rare and powerful" feel */
.game-wrap[data-scene-pack="citrus-lanterns"] .scene-pack-frame-layer,
.game-wrap[data-scene-pack="plum-dusk"] .scene-pack-frame-layer {
  filter:
    drop-shadow(0 0 14px rgba(var(--scene-accent-rgb), 0.65))
    drop-shadow(0 0 28px rgba(var(--scene-accent-rgb), 0.35));
}
.game-wrap[data-scene-pack="citrus-lanterns"] .scene-pack-hub-layer,
.game-wrap[data-scene-pack="plum-dusk"] .scene-pack-hub-layer {
  filter:
    drop-shadow(0 0 14px rgba(var(--scene-accent-rgb), 0.65))
    drop-shadow(0 0 28px rgba(var(--scene-accent-rgb), 0.35))
    drop-shadow(0 4px 8px rgba(40, 20, 10, 0.55))
    drop-shadow(0 14px 22px rgba(40, 20, 10, 0.35));
}

/* === LEGENDARY BG-GLOW (2026-05-16) — pulsating cave/arch glow ========
   Sits BAK frame (z:2 — over bg, under frame) så det føles som BG-lyset
   pulserer inni cave-åpningen. Veldig subtil, så vidt synlig. */
.scene-pack-legendary-bg-glow {
  position: absolute;
  /* Cave/arch position i bg-PNG: vertically center-mid, horizontally
     center, ~16% wide × 13% tall (matcher arch-åpningen i sunset-bg). */
  top: 45%;
  left: 42%;
  width: 16%;
  height: 13%;
  background: radial-gradient(ellipse 70% 80% at 50% 55%,
    rgba(255, 240, 180, 0.55) 0%,
    rgba(255, 210, 140, 0.35) 25%,
    rgba(255, 170, 100, 0.18) 50%,
    rgba(255, 140, 90, 0.08) 70%,
    transparent 85%);
  filter: blur(12px);
  pointer-events: none;
  z-index: 2;             /* over bg (z:1), under frame (z:4) */
  display: none;
  animation: legendaryCaveGlow 6.5s ease-in-out infinite;
  will-change: opacity, transform;
}
.game-wrap[data-scene-pack="melon-beach"] .scene-pack-legendary-bg-glow {
  display: block;
}
@keyframes legendaryCaveGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

/* === LEGENDARY FX LAYER (2026-05-16) — Melon Beach apex polish =========
   Recreates the inspo PNG glow:
   1. Pink magenta haze over the crown decoration at top
   2. Twinkling gold sparkles scattered around frame edges + corners
   Only activates when [data-scene-pack="melon-beach"] is set. */

.scene-pack-legendary-behind-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;             /* OVER bg (z:1) + bg-glow (z:2), UNDER frame (z:4) */
  display: none;
}
.scene-pack-legendary-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;             /* OVER frame (z:4) — sparkler synes oppå cream-rim */
  display: none;
}
.game-wrap[data-scene-pack="melon-beach"] .scene-pack-legendary-behind-fx,
.game-wrap[data-scene-pack="melon-beach"] .scene-pack-legendary-fx {
  display: block;
}

/* PINK MAGENTA HALO — sits OVER the crown decoration at top of frame.
   v2 (2026-05-16): stronger color, removed mix-blend-mode (got eaten by
   bright sunset bg), moved DOWN to sit on the cream-tube top area. */
.legendary-top-halo {
  position: absolute;
  top: 8%;
  left: 22%;
  right: 22%;
  height: 12%;
  background: radial-gradient(ellipse 65% 75% at 50% 50%,
    rgba(255, 50, 130, 0.85) 0%,
    rgba(255, 80, 160, 0.55) 22%,
    rgba(255, 110, 180, 0.30) 45%,
    rgba(255, 140, 200, 0.10) 65%,
    transparent 80%);
  filter: blur(10px);
  animation: legendaryHaloPulse 4.5s ease-in-out infinite;
  will-change: opacity, transform;
}
@keyframes legendaryHaloPulse {
  0%, 100% { opacity: 0.85; transform: scale(1)   translateY(0); }
  50%      { opacity: 1;    transform: scale(1.06) translateY(-1px); }
}

/* GOLD SPARKLES — 12 twinkling stars positioned ON the frame's cream-rim.
   v2 (2026-05-16): smaller (6px), slower (4.5s cycle), more spread delays
   so the screen doesn't strobe — calm sparse magic. Moved down so they
   actually sit on the frame edge instead of floating in HUD area. */
.legendary-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.legendary-sparkles span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 220, 130, 0.95) 35%,
    rgba(255, 180, 80, 0.6) 65%,
    transparent 80%);
  box-shadow:
    0 0 8px rgba(255, 220, 130, 0.85),
    0 0 16px rgba(255, 180, 80, 0.45);
  animation: legendarySparkleTwinkle 4.5s ease-in-out infinite;
  opacity: 0;
  will-change: opacity, transform;
}
@keyframes legendarySparkleTwinkle {
  0%, 100%   { opacity: 0;    transform: scale(0.5) rotate(0deg); }
  10%        { opacity: 0.95; transform: scale(1.2) rotate(30deg); }
  20%        { opacity: 0.7;  transform: scale(1)   rotate(60deg); }
  /* Long dormant pause from 20% to 100% — sparkle only flashes briefly,
     then stays dark most of cycle. Calm + sparse, not strobe-y. */
}
/* Sparkle positions — on the cream-rim of frame (top: 14-18% / sides:
   ~6%/~94% / bottom: ~78-82%). Spread animation-delays across 4.5s
   so on average 1-3 sparkles visible at once, never strobing. */
.legendary-sparkles span:nth-child(1)  { top: 14%; left: 16%; animation-delay: 0.0s; }
.legendary-sparkles span:nth-child(2)  { top: 12%; left: 32%; animation-delay: 0.9s; }
.legendary-sparkles span:nth-child(3)  { top: 13%; left: 50%; animation-delay: 2.3s; }
.legendary-sparkles span:nth-child(4)  { top: 12%; left: 68%; animation-delay: 1.6s; }
.legendary-sparkles span:nth-child(5)  { top: 14%; left: 84%; animation-delay: 3.2s; }
.legendary-sparkles span:nth-child(6)  { top: 32%; left:  6%; animation-delay: 0.5s; }
.legendary-sparkles span:nth-child(7)  { top: 32%; right: 5%; animation-delay: 2.7s; }
.legendary-sparkles span:nth-child(8)  { top: 55%; left:  5%; animation-delay: 3.6s; }
.legendary-sparkles span:nth-child(9)  { top: 55%; right: 4%; animation-delay: 1.2s; }
.legendary-sparkles span:nth-child(10) { top: 78%; left:  8%; animation-delay: 2.1s; }
.legendary-sparkles span:nth-child(11) { top: 80%; left: 50%; animation-delay: 4.0s; }
.legendary-sparkles span:nth-child(12) { top: 78%; right: 7%; animation-delay: 0.3s; }

/* Legendary frame+hub glow — apex tier, triple-pass with longest reach.
   Stronger than Epic. */
.game-wrap[data-scene-pack="melon-beach"] .scene-pack-frame-layer {
  filter:
    drop-shadow(0 0 18px rgba(var(--scene-accent-rgb), 0.75))
    drop-shadow(0 0 36px rgba(var(--scene-accent-rgb), 0.45))
    drop-shadow(0 0 56px rgba(var(--scene-accent-rgb), 0.25));
}
.game-wrap[data-scene-pack="melon-beach"] .scene-pack-hub-layer {
  filter:
    drop-shadow(0 0 18px rgba(var(--scene-accent-rgb), 0.75))
    drop-shadow(0 0 36px rgba(var(--scene-accent-rgb), 0.45))
    drop-shadow(0 0 56px rgba(var(--scene-accent-rgb), 0.25))
    drop-shadow(0 4px 8px rgba(40, 20, 10, 0.55))
    drop-shadow(0 14px 22px rgba(40, 20, 10, 0.35));
}

/* NO inset shadow inside play area — was creating visible dark gradient line.
   Only drop-shadow UNDER the hub (already applied on .scene-pack-hub-layer). */

/* ── Scene-pack layer activation per tier ──────────────────────────
   All 6 packs share the same layer structure (bg + frame + hub).
   PNGs are normalized so bottom-edges align pixel-perfect across packs. */

/* Common — Apricot Morning */
.game-wrap[data-scene-pack="apricot-morning"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-apricot-morning.png?v=2026-05-15'); }
.game-wrap[data-scene-pack="apricot-morning"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-apricot-morning.png'); }
.game-wrap[data-scene-pack="apricot-morning"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-apricot-morning.png'); }

/* Uncommon — Kiwi Hollow */
.game-wrap[data-scene-pack="kiwi-hollow"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-kiwi-hollow.png?v=2026-05-15'); }
.game-wrap[data-scene-pack="kiwi-hollow"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-kiwi-hollow.png'); }
.game-wrap[data-scene-pack="kiwi-hollow"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-kiwi-hollow.png'); }

/* Rare — Peach Mist (hot-air balloon) */
.game-wrap[data-scene-pack="peach-mist"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-peach-mist.png'); }
.game-wrap[data-scene-pack="peach-mist"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-peach-mist.png'); }
.game-wrap[data-scene-pack="peach-mist"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-peach-mist.png'); }

/* Rare — Strawberry Sunrise (lighthouse) */
.game-wrap[data-scene-pack="strawberry-sunrise"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-strawberry-sunrise.png'); }
.game-wrap[data-scene-pack="strawberry-sunrise"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-strawberry-sunrise.png'); }
.game-wrap[data-scene-pack="strawberry-sunrise"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-strawberry-sunrise.png'); }

/* Epic — Citrus Lanterns */
.game-wrap[data-scene-pack="citrus-lanterns"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-citrus-lanterns.png'); }
.game-wrap[data-scene-pack="citrus-lanterns"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-citrus-lanterns.png'); }
.game-wrap[data-scene-pack="citrus-lanterns"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-citrus-lanterns.png'); }

/* Epic — Plum Dusk */
.game-wrap[data-scene-pack="plum-dusk"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-plum-dusk.png'); }
.game-wrap[data-scene-pack="plum-dusk"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-plum-dusk.png'); }
.game-wrap[data-scene-pack="plum-dusk"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-plum-dusk.png'); }

/* Legendary — Melon Beach */
.game-wrap[data-scene-pack="melon-beach"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-melon-beach.png'); }
.game-wrap[data-scene-pack="melon-beach"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-melon-beach.png'); }
.game-wrap[data-scene-pack="melon-beach"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-melon-beach.png'); }

/* Banana Republic (Legendary, 2026-05-18) — cosmic banana-skyscraper city
   with floating banana moons + reflective lagoon. Sister-Legendary to
   melon-beach. Frame is ornate gold with banana-fruit motifs + lotus
   centerpieces top/bottom. */
.game-wrap[data-scene-pack="banana-republic"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-banana-republic.png'); }
.game-wrap[data-scene-pack="banana-republic"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-banana-republic.png'); }
.game-wrap[data-scene-pack="banana-republic"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-banana-republic.png'); }

.game-wrap[data-scene-pack="lemon-amalfi"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-lemon-amalfi.png'); }
.game-wrap[data-scene-pack="lemon-amalfi"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-lemon-amalfi.png'); }
.game-wrap[data-scene-pack="lemon-amalfi"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-lemon-amalfi.png'); }

.game-wrap[data-scene-pack="coconut-lagoon"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-coconut-lagoon.png'); }
.game-wrap[data-scene-pack="coconut-lagoon"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-coconut-lagoon.png'); }
.game-wrap[data-scene-pack="coconut-lagoon"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-coconut-lagoon.png'); }

.game-wrap[data-scene-pack="velvet-vines"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-velvet-vines.png'); }
.game-wrap[data-scene-pack="velvet-vines"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-velvet-vines.png'); }
.game-wrap[data-scene-pack="velvet-vines"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-velvet-vines.png'); }

.game-wrap[data-scene-pack="apple-orchard"] .scene-pack-bg-layer { display: block; background-image: url('assets/play-bg-apple-orchard.png'); }
.game-wrap[data-scene-pack="apple-orchard"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-apple-orchard.png'); }
.game-wrap[data-scene-pack="apple-orchard"] .scene-pack-hub-layer { display: block; background-image: url('assets/hub-apple-orchard.png'); }

/* Wave-13-cleanup (audit Batch 1.7): 5 nye themes (Blueberry Aurora, Cherry
   Sakura, Mango Monsoon, Pear Meadow, Pineapple Tiki) har enda ikke fått
   frame-PNGs (og noen mangler hub-PNG). For å unngå at hele rammen + hubben
   forsvinner når disse equippes, fall vi tilbake til apricot-morning sin
   frame + hub. BG-layer bruker hvert tema sin egen bg-PNG. Når Martin
   genererer de ekte assetsene, bytt URLer til real-pathene under. */
/* Wave-13.11: Blueberry Aurora promoted to legendary tier med ekte frame + hub
   (var apricot-fallback i Wave-13.7 Batch 1.7). Indigo-crystal-lotus design. */
.game-wrap[data-scene-pack="blueberry-aurora"] .scene-pack-bg-layer    { display: block; background-image: url('assets/bg-blueberry.png'); }
.game-wrap[data-scene-pack="blueberry-aurora"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-blueberry-aurora.png'); }
.game-wrap[data-scene-pack="blueberry-aurora"] .scene-pack-hub-layer   { display: block; background-image: url('assets/hub-blueberry-aurora.png'); }

.game-wrap[data-scene-pack="cherry-sakura"] .scene-pack-bg-layer    { display: block; background-image: url('assets/bg-cherry-sakura.png'); }
.game-wrap[data-scene-pack="cherry-sakura"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-sakura-forest.png'); }
.game-wrap[data-scene-pack="cherry-sakura"] .scene-pack-hub-layer   { display: block; background-image: url('assets/hub-apricot-morning.png'); }

.game-wrap[data-scene-pack="mango-monsoon"] .scene-pack-bg-layer    { display: block; background-image: url('assets/bg-mango.png'); }
.game-wrap[data-scene-pack="mango-monsoon"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-mango.png'); }
.game-wrap[data-scene-pack="mango-monsoon"] .scene-pack-hub-layer   { display: block; background-image: url('assets/hub-mango.png'); }

.game-wrap[data-scene-pack="pear-meadow"] .scene-pack-bg-layer    { display: block; background-image: url('assets/BG-pear.png'); }
.game-wrap[data-scene-pack="pear-meadow"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-pear.png'); }
.game-wrap[data-scene-pack="pear-meadow"] .scene-pack-hub-layer   { display: block; background-image: url('assets/hub-apricot-morning.png'); }  /* hub-pear.png finnes ikke enda — fallback til apricot */

.game-wrap[data-scene-pack="pineapple-tiki"] .scene-pack-bg-layer    { display: block; background-image: url('assets/bg-pineapple.png'); }
.game-wrap[data-scene-pack="pineapple-tiki"] .scene-pack-frame-layer { display: block; background-image: url('assets/frame-pineapple-tiki.png'); }
.game-wrap[data-scene-pack="pineapple-tiki"] .scene-pack-hub-layer   { display: block; background-image: url('assets/hub-apricot-morning.png'); }

/* Blueberry Aurora — minor surgery (Wave-13.13) — REVISED treatment:
   Wave-13.12 hadde for mye blur + for mørk vignette. Bytter til "duser+lysere
   inni rammen" + kaldt filter på fruktene (matcher arctic-aurora-world).
   - Bg: brightness up, saturation down (washed-out aurora-glow), ingen blur
   - Soft cool overlay: lett frosted-white veil over center for "lyser opp"
   - Canvas (fruits): kaldt color-filter (hue-rotate + brightness)
   - Hub: behold subtle dim så frame dominerer */

/* (a) Washed-out + brightened aurora — beholder magien, ingen blur */
.game-wrap[data-scene-pack="blueberry-aurora"] .scene-pack-bg-layer {
  filter: saturate(0.72) brightness(1.12);
}

/* (b) Soft frosted-white veil over center — "lyser opp" inni rammen */
.game-wrap[data-scene-pack="blueberry-aurora"] .scene-pack-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 78% at center 50%,
    rgba(245, 245, 255, 0.22) 0%,
    rgba(220, 225, 245, 0.10) 45%,
    transparent 78%
  );
  z-index: 1;
}

/* (c) Kaldt filter på canvas (fruktene) — arctic-tone matcher aurora-verden.
   hue-rotate skifter varme rød/orange-toner mot litt cooler (mer plommerødt).
   saturate(0.88) demper litt. brightness(1.02) holder dem synlige. */
.game-wrap[data-scene-pack="blueberry-aurora"] canvas#game {
  filter: hue-rotate(-8deg) saturate(0.88) brightness(1.02);
}

/* (d) Hub-layer dim (uendret fra Wave-13.12) — frame dominerer */
.game-wrap[data-scene-pack="blueberry-aurora"] .scene-pack-hub-layer {
  filter: brightness(0.95) saturate(0.94);
}

/* Banana Republic — minor surgery (2026-05-18) per Martin's "litt mye"-feedback.
   The Legendary scene-pack is maximalist by design, but yellow fruits blend
   into the gold frame ornaments. Three subtle nudges that ONLY apply to
   banana-republic (other themes unchanged). */

/* (a) Inner-vignette: radial darken at frame edges so fruits pop centrally
   against the busy cosmic-gold bg. Mounted as ::after over bg-layer so it
   sits under the frame ring but over the painterly cityscape. */
.game-wrap[data-scene-pack="banana-republic"] .scene-pack-bg-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 80% at center 45%,
    transparent 0%,
    transparent 35%,
    rgba(20, 0, 30, 0.20) 75%,
    rgba(20, 0, 30, 0.32) 100%
  );
  z-index: 1;
}

/* (c) Subtle hub-layer dim so the bottom hub-medallion doesn't visually
   compete with the frame's bottom banana-medallion (they were perceived as
   "doubled" same-energy elements stacked vertically). Just enough that the
   hub feels visually subordinate to the frame. */
.game-wrap[data-scene-pack="banana-republic"] .scene-pack-hub-layer {
  filter: brightness(0.93) saturate(0.92);
}
/* When a scene-pack is active, suppress legacy theme-bg + frame-overlay +
   tier-bar so the new layers own the visual real-estate. The new hub-layer
   replaces the legacy tier-bar. */
.game-wrap[data-scene-pack] .game-bg,
.game-wrap[data-scene-pack] .game-frame-overlay,
.game-wrap[data-scene-pack] .tier-bar {
  display: none;
}

/* ================================================
   HUD — nesten transparent, smelter med skybakgrunnen, kun subtil divider
   ================================================ */
/* === HUD — AAA-grade asymmetrisk hierarki: SCORE er hero, BEST/NEXT er chips === */
.hud-glass {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;  /* SCORE dominerer */
  align-items: center;
  gap: 0;  /* dividers håndterer separasjonen */
  padding: 12px 18px 14px;
  /* iOS-optimalisert: solid semi-transparent i stedet for backdrop-filter */
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.45) 100%);
  border: none;
  border-radius: 22px;
  box-shadow:
    0 6px 18px rgba(120, 80, 180, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.hud-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  min-height: 62px;  /* lock alignment uavhengig av innhold */
  padding: 0 6px;
}

/* Vertikale dividers mellom cellene — hairline + soft highlight */
.hud-cell + .hud-cell {
  border-left: 1px solid rgba(74, 53, 120, 0.16);
  box-shadow: -1px 0 0 rgba(255, 255, 255, 0.55);
}

/* Side-celle-labels (BEST, NEXT) — dempet for å la SCORE-label dominere */
.hud-cell--best .hud-mini-label,
.hud-cell--next .hud-mini-label {
  font-size: 10px;
  letter-spacing: 1.8px;
  opacity: 0.72;
}

/* Felles label-styling */
.hud-mini-label {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 2.4px;
  color: rgba(74, 53, 120, 0.95);
  text-transform: uppercase;
  line-height: 1;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

/* BEST — gold, dempet sekundær-størrelse */
.hud-mini-value {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--tier-legendary) 0%, #ff8a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(255, 255, 255, 0.6)) drop-shadow(0 1px 1px rgba(255, 150, 0, 0.4));
  line-height: 1;
}

/* SCORE — hero, dominerer både via column-bredde og font-størrelse */
.hud-score-value {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 36px;
  letter-spacing: -0.5px;  /* tighter so big numbers stay inside cell */
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ff6b9d 0%, #ff3b5c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 3px 4px rgba(255, 255, 255, 0.7)) drop-shadow(0 2px 2px rgba(255, 80, 130, 0.5));
  display: inline-block;
  transform-origin: center;
  transition: transform 0.05s;
  line-height: 1;
}

.hud-score-wrap.bumped #score,
.hud-score-wrap.bumped .hud-score-big,
.hud-score-wrap.bumped .hud-score-value {
  animation: scorePulse 0.42s cubic-bezier(0.34, 1.6, 0.64, 1);
}

@keyframes scorePulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.32); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}

/* Wave-13.4 (audit Batch 4.5): backdrop-filter audit (documentation-only).
   Codebase har ~26 backdrop-filter blur-declarations, mostly på små
   surfaces (≤200px wide pills/circles/buttons). Stikkprøver:
     - blur(16px): kun på små runde buttons (.profile-close-style) — trygt
     - blur(14px) saturate(1.4): på pill-tabs (~100×40px) — trygt
     - blur(10-12px): chip + small modals — trygt
     - blur(6-8px): default — trygt overalt
   Ingen large-surface (>600×600) blurs funnet. Hvis perf-issues observeres
   på older iPhones (11 og eldre), første mitigation: bytt 14-16px blurs
   til 10px + sterkere rgba-opacity.
   Reduce-motion fallback bør vurderes for accessibility — TODO. */

/* Wave-13.4 (audit Batch 4.4) + Wave-13.21 P0/P2: pause heavy infinite
   CSS-animations når spillet er paused ELLER skjermen er hidden.
   Mobile GPU skal ikke brenne på sparkles/glows/drifts spilleren ikke ser.
   - .is-game-paused = modal/Collection/Settings åpen (JS toggler)
   - .is-screen-hidden = skjerm låst / app i bakgrunnen (visibilitychange)
   Targets infinite drifts + glows + shimmer-loops; spill-feedback-anims
   (combo-pop, score-magnet, milestone-pulse, level-up, theme-unlock)
   står over deres egne triggers og forblir lyttbare under modaler. */
body.is-game-paused .splash-sparkles span,
body.is-screen-hidden .splash-sparkles span,
body.is-game-paused .game-sparkles span,
body.is-screen-hidden .game-sparkles span,
body.is-game-paused .rainbow-dust span,
body.is-screen-hidden .rainbow-dust span,
body.is-game-paused .frame-corner-spark,
body.is-screen-hidden .frame-corner-spark,
body.is-game-paused .atmosphere-sparkle,
body.is-screen-hidden .atmosphere-sparkle,
body.is-game-paused .legendary-sparkles span,
body.is-screen-hidden .legendary-sparkles span,
body.is-game-paused .scene-pack-legendary-bg-glow,
body.is-screen-hidden .scene-pack-legendary-bg-glow,
body.is-game-paused .scene-pack-legendary-behind-fx .legendary-top-halo,
body.is-screen-hidden .scene-pack-legendary-behind-fx .legendary-top-halo,
body.is-game-paused .hud-seeds-particle,
body.is-screen-hidden .hud-seeds-particle,
body.is-game-paused .hud-xp-sheen,
body.is-screen-hidden .hud-xp-sheen,
body.is-game-paused .loading-dots span,
body.is-screen-hidden .loading-dots span,
/* Wave-13.21 P2: utvidet pause-set — fanger logo-wobble, cog-tick,
   chest-nudge, seed-breathe, portrait-glow som ikke var dekket før.
   Sammen er disse ~6-10 alltid-på animasjoner som drar GPU når
   spilleren ikke engang ser på skjermen. */
body.is-game-paused .splash-logo,
body.is-screen-hidden .splash-logo,
body.is-game-paused .gameover-logo,
body.is-screen-hidden .gameover-logo,
body.is-game-paused .settings-btn,
body.is-screen-hidden .settings-btn,
body.is-game-paused .hud-seeds-icon,
body.is-screen-hidden .hud-seeds-icon,
body.is-game-paused .profile-link-icon,
body.is-screen-hidden .profile-link-icon,
body.is-game-paused .atmosphere-sparkle {
  animation-play-state: paused !important;
}

/* Wave-13.3 (audit Batch 3.5): Daily welcome toast. Diskret + warm,
   slide-down fra topp, auto-dismiss etter 2.4s. INGEN streak-counter,
   INGEN FOMO-timer — bare en liten "thanks for coming back today"-gift.
   Sitter under HUD men over canvas; ikke-blokkerende (pointer-events:none). */
.daily-welcome-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 76px);
  left: 50%;
  transform: translate(-50%, -120%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 11px;
  background: linear-gradient(180deg, rgba(255, 247, 230, 0.98) 0%, rgba(255, 232, 200, 0.96) 100%);
  border-radius: 18px;
  box-shadow:
    0 8px 24px rgba(80, 50, 20, 0.35),
    inset 0 1.5px 0 rgba(255, 255, 255, 0.7),
    inset 0 -1.5px 0 rgba(180, 110, 60, 0.18);
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.34, 1.45, 0.64, 1), opacity 280ms ease-out;
  max-width: min(92vw, 320px);
}
.daily-welcome-toast.is-in {
  opacity: 1;
  transform: translate(-50%, 0);
}
.daily-welcome-toast.is-out {
  opacity: 0;
  transform: translate(-50%, -40%);
  transition: transform 320ms ease-in, opacity 320ms ease-in;
}
.daily-welcome-emoji {
  font-size: 22px;
  filter: drop-shadow(0 1px 2px rgba(80, 50, 20, 0.3));
  flex-shrink: 0;
}
.daily-welcome-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.daily-welcome-line1 {
  font: 800 14px 'Lilita One', 'Fredoka', system-ui, sans-serif;
  color: #6a3a23;
  letter-spacing: 0.02em;
}
.daily-welcome-line2 {
  font: 600 11.5px 'Fredoka', system-ui, sans-serif;
  color: rgba(106, 58, 35, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (prefers-reduced-motion: reduce) {
  .daily-welcome-toast.is-in { transition: opacity 180ms; }
}

/* Wave-13.18 (Handlingsplan G-10): dag-1-spesifikk variant av daily-welcome.
   Mer celebratory feel: gold-rim border, pulserende glow, larger size. */
.daily-welcome-toast.is-first-ever {
  padding: 14px 22px 14px;
  background: linear-gradient(180deg, #fff9ee 0%, #ffe1a8 100%);
  border: 2.5px solid #e8a428;
  max-width: min(94vw, 360px);
  box-shadow:
    0 10px 30px rgba(120, 60, 20, 0.42),
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -2px 0 rgba(180, 110, 40, 0.28),
    0 0 24px rgba(255, 200, 100, 0.35);
}
.daily-welcome-toast.is-first-ever .daily-welcome-emoji {
  font-size: 30px;
  animation: dayOneEmojiBob 1.6s ease-in-out infinite;
}
@keyframes dayOneEmojiBob {
  0%, 100% { transform: scale(1) rotate(-6deg); }
  50%      { transform: scale(1.12) rotate(6deg); }
}
.daily-welcome-toast.is-first-ever .daily-welcome-line1 {
  font-size: 17px;
  color: #5a2f15;
}
.daily-welcome-toast.is-first-ever .daily-welcome-line2 {
  font-size: 12.5px;
  color: rgba(106, 58, 35, 0.88);
}
@media (prefers-reduced-motion: reduce) {
  .daily-welcome-toast.is-first-ever .daily-welcome-emoji { animation: none; }
}

/* Wave-13.3 (audit Batch 3.6): FPS counter chip. Skjult som default,
   shows up når data-fps-on attr settes på .game-wrap (via JS toggle).
   Sits over canvas men under HUD-buttons. Designet å være diskret —
   ikke distraherende, bare informativt. */
.fps-chip {
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;          /* over canvas (1), under HUD (10) */
  padding: 2px 8px;
  font: 700 11px 'Lilita One', system-ui, monospace;
  color: rgba(255, 250, 240, 0.92);
  background: rgba(43, 31, 58, 0.62);
  border-radius: 999px;
  letter-spacing: 0.5px;
  pointer-events: none;
  display: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.fps-chip.is-low  { color: #ffba6c; }   /* <50 fps */
.fps-chip.is-bad  { color: #ff7a8a; }   /* <30 fps */
.game-wrap[data-fps-on="1"] .fps-chip { display: block; }

/* NEXT-boble — sizing/layout lives i shared `.menu-btn, .hud-next-bubble` rule
   ~lin 1943 + override-blocket ~lin 1965 (post-2026-05-17 portrait-mirror).
   Wave-13-cleanup (audit Batch 1): den opprinnelige `.hud-next-bubble`-blocket
   her ble fjernet — alle properties (width/height/animation/filter) ble
   overridet av blocket lenger ned, og `nextBubbleFloat`-keyframe ble disabled
   da boblen ble re-stylet til å matche portrait-knappen. Slettet for å hindre
   samme stale-duplicate-mønster som triggret Wave-9.7/12.4/12.14-buggene. */

#next-preview {
  background: transparent;
  /* 2026-05-17: Sizing/position moved til .hud-next-bubble #next-preview rule
     below — width:100%/height:100% her gjorde at canvas ble feilstørrelse når
     bubble bytter til position:relative + flex-container. */
}

/* ================================================
   GAME SPARKLES — flyter sakte oppover hele skjermen
   ================================================ */
.game-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* z-index 3: above scene-pack-bg-layer (z:1) so particles are visible
     over the painterly bg, but below scene-pack-frame-layer (z:4) so the
     frame ring obscures particles that drift to the edges (clean read).
     Was z:1 — sibling scene-pack-bg with same z but later DOM order was
     covering the particles entirely (Martin "ser ingen partikler"). */
  z-index: 3;
  overflow: hidden;
}

.game-sparkles span {
  position: absolute;
  /* Small delicate base size. Sparse + small + bright = "rare magic-dust"
     read instead of "constant snow-globe". */
  width: 6px;
  height: 6px;
  border-radius: 50%;
  /* White-hot core + faint cream outer so particles stay visible on every
     bg (theme-color-only would blend with same-colored painterly bg). */
  background: radial-gradient(circle,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 240, 220, 0.7) 40%,
    transparent 70%);
  box-shadow: 0 0 12px rgba(255, 245, 220, 0.85);
  animation: sparkleFloat linear infinite;
  opacity: 0;
  /* Wave-13.21 P2: fjernet `will-change: transform, opacity` — Chrome/Safari
     promoter automatisk infinite transform-animations til GPU. Eksplisitt
     will-change på idle decorations holdt unødvendig GPU-memory reservert. */
}

/* 5 partikler (Martin v3: enda færre + saktere). Long durations 40-55s +
   spread delays 0-35s = roughly 1-2 visible at any moment. Horizontal
   spread covers play area without obvious pattern. */
.game-sparkles span:nth-child(1) { left: 14%; bottom: -5%; animation-duration: 45s; animation-delay:  0s; --s: 1.0; }
.game-sparkles span:nth-child(2) { left: 35%; bottom: -5%; animation-duration: 52s; animation-delay: 15s; --s: 1.1; }
.game-sparkles span:nth-child(3) { left: 56%; bottom: -5%; animation-duration: 40s; animation-delay: 30s; --s: 0.9; }
.game-sparkles span:nth-child(4) { left: 74%; bottom: -5%; animation-duration: 48s; animation-delay:  8s; --s: 1.0; }
.game-sparkles span:nth-child(5) { left: 88%; bottom: -5%; animation-duration: 55s; animation-delay: 22s; --s: 0.8; }

/* Theme boost: slightly bigger + stronger glow when theme is active.
   The core stays white-hot — only the OUTER halo color shifts per theme,
   so particles always READ as bright (not blending with same-color bg). */
.game-wrap[data-scene-pack] .game-sparkles span,
.game-wrap[data-theme] .game-sparkles span {
  width: 8px;
  height: 8px;
}

@keyframes sparkleFloat {
  0%   { transform: translate(0, 0) scale(var(--s, 1));        opacity: 0; }
  10%  { opacity: 0.85; }
  50%  { transform: translate(20px, -55vh) scale(var(--s, 1)); opacity: 1; }
  90%  { opacity: 0.5; }
  100% { transform: translate(-15px, -110vh) scale(var(--s, 1)); opacity: 0; }
}

/* Theme-aware sparkle GLOW colors. v3 (2026-05-15): white-hot core stays
   constant on every theme so particles always READ as bright dust. Only
   the OUTER box-shadow halo color shifts per theme — particle has a
   white-hot bright center with a theme-colored aura. This prevents the
   "blends-with-same-colored-bg" problem of solid-theme-color particles. */
.game-wrap[data-scene-pack="apricot-morning"] .game-sparkles span,
.game-wrap[data-theme="apricot-morning"]       .game-sparkles span {
  box-shadow: 0 0 14px rgba(255, 176, 122, 0.95);
}
.game-wrap[data-scene-pack="kiwi-hollow"] .game-sparkles span,
.game-wrap[data-theme="kiwi-hollow"]       .game-sparkles span {
  box-shadow: 0 0 14px rgba(124, 224, 198, 0.95);
}
.game-wrap[data-scene-pack="peach-mist"] .game-sparkles span,
.game-wrap[data-theme="peach-mist"]       .game-sparkles span {
  box-shadow: 0 0 16px rgba(240, 200, 196, 1);
}
.game-wrap[data-scene-pack="strawberry-sunrise"] .game-sparkles span,
.game-wrap[data-theme="strawberry-sunrise"]       .game-sparkles span {
  box-shadow: 0 0 16px rgba(240, 128, 112, 1);
}
.game-wrap[data-scene-pack="citrus-lanterns"] .game-sparkles span,
.game-wrap[data-theme="citrus-lanterns"]       .game-sparkles span {
  box-shadow: 0 0 18px rgba(255, 165, 80, 1);
}
.game-wrap[data-scene-pack="plum-dusk"] .game-sparkles span,
.game-wrap[data-theme="plum-dusk"]       .game-sparkles span {
  box-shadow: 0 0 18px rgba(200, 130, 230, 1);
}
.game-wrap[data-theme="cherry-blossom"] .game-sparkles span {
  box-shadow: 0 0 14px rgba(255, 173, 197, 0.95);
}
.game-wrap[data-scene-pack="melon-beach"] .game-sparkles span,
.game-wrap[data-theme="melon-beach"]       .game-sparkles span {
  box-shadow: 0 0 14px rgba(255, 107, 122, 0.95);
  width: 9px; height: 9px;   /* Mindre per Martin v2 — for store før */
}

/* ================================================
   CANVAS
   ================================================ */
.canvas-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;  /* tillater flex-barnet å krympe */
}

/* === CORNER-SPARKS — theme-bound particles ved frame-hjørner ===
   Pulserende glow-partikler som tennes basert på aktiv theme. Posisjonert
   omtrent der frame'ens corner-stjerner er. Default skjult — vises kun
   når .game-wrap har matchende data-theme. */
.frame-corner-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
}
.frame-corner-spark {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 240, 1) 0%, rgba(255, 180, 220, 0.6) 35%, transparent 70%);
  box-shadow: 0 0 16px rgba(255, 150, 200, 0.9);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;  /* GPU-acceleration hint */
}
.frame-corner-spark--tl { top: 6.5%;    left: 7.5%; }
.frame-corner-spark--tr { top: 6.5%;    right: 7.5%; }
.frame-corner-spark--bl { bottom: 6.5%; left: 7.5%; }
.frame-corner-spark--br { bottom: 6.5%; right: 7.5%; }

/* Cherry Blossom-themen: pink-rosa glow på alle 4 hjørner */
.game-wrap[data-theme="cherry-blossom"] .frame-corner-spark {
  opacity: 1;
  animation: cornerSparkPulse 2.4s ease-in-out infinite;
}
.game-wrap[data-theme="cherry-blossom"] .frame-corner-spark--tr { animation-delay: 0.6s; }
.game-wrap[data-theme="cherry-blossom"] .frame-corner-spark--bl { animation-delay: 1.2s; }
.game-wrap[data-theme="cherry-blossom"] .frame-corner-spark--br { animation-delay: 1.8s; }

@keyframes cornerSparkPulse {
  0%, 100% {
    transform: scale(0.7);
    opacity: 0.3;
    filter: blur(0.5px);
  }
  50% {
    transform: scale(1.6);
    opacity: 1;
    filter: blur(0px);
  }
}

/* === PER-THEME TEXT TOKENS (Phase 3.1 — Color Theorist spec) ===
   Dark bgs (citrus-lanterns, plum-dusk) need cream tekst, not Plum Ink.
   Override --text-primary / --text-secondary on these themes so all
   inheriting text auto-adapts. Other components (HUD numbers, score-hero
   etc.) already use their own gradients and aren't affected. */
.game-wrap[data-theme="citrus-lanterns"],
.game-wrap[data-theme="plum-dusk"] {
  --text-primary:   var(--text-on-dark-bg);
  --text-secondary: var(--text-secondary-dark);
}
/* Apply on body when theme is active (covers in-card UI like daily-quest text,
   hint labels). data-theme is set on .game-wrap, propagate via the ancestor. */
.game-wrap[data-theme="citrus-lanterns"] .gameover-juice-progress-text,
.game-wrap[data-theme="citrus-lanterns"] .gameover-challenge,
.game-wrap[data-theme="plum-dusk"] .gameover-juice-progress-text,
.game-wrap[data-theme="plum-dusk"] .gameover-challenge {
  color: var(--text-on-dark-bg);
  text-shadow: 0 1px 4px rgba(43, 31, 58, 0.8);
}

/* === WATERMELON CRYSTAL APEX EFFECTS (v3, 2026-05-09 overhaul) ===
   REPLACED rainbow-dust + 4-color sparks ("Roblox-holo gamer-bait" — designer).
   New design: prismatic peach/cream/rose-pink shimmer system that complements
   the Crystal Sugar PNG material without screaming.

   Three layers (down from four):
   1. Soft frame breathing pulse (GPU-cheap opacity)
   2. Crystal corner-sparks — unified peach/cream palette, no rainbow
   3. Subtle prism-dust drift (cream + rose, far less saturated than v2) */

/* (1) Soft breathing pulse — frame gently glows on/off */
.game-wrap[data-frame="watermelon-crystal"] .game-frame-overlay {
  animation: rainbowFramePulse 3.2s ease-in-out infinite;
  will-change: opacity;
}
@keyframes rainbowFramePulse {
  0%, 100% { opacity: 0.94; }
  50%      { opacity: 1; }
}

/* (2) Corner-sparks REMOVED 2026-05-10 — founder felt the radial-glow edges
   leaked visible pixel-seams in the corners, breaking the AAA-clean read.
   The extra outer ring + breath-pulse + prism-dust carry the apex-feel alone.
   Old rules kept commented for archive in case we revive a softer version. */
/*
.game-wrap[data-frame="watermelon-crystal"] .frame-corner-spark {
  opacity: 1;
  animation: cornerSparkPulse 2.8s ease-in-out infinite;
}
... per-corner color rules ...
*/

/* (3) Subtle prism-dust drift — peach/cream particles, no rainbow */
.rainbow-dust {
  position: absolute;
  top: 17%;      /* litt under canvas-wrap så prism-støvet sitter rundt spillfelt */
  bottom: 6.5%;
  left: 5%;
  right: 5%;
  pointer-events: none;
  z-index: 4;
  display: none;
  overflow: hidden;
}
.game-wrap[data-frame="watermelon-crystal"] .rainbow-dust { display: block; }
.rainbow-dust span {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  bottom: -10%;
  animation: rainbowDustFloat 16s linear infinite;
  opacity: 0;
  will-change: transform, opacity;
}
/* 5 particles — peach/cream palette only (Crystal Sugar refraction tones) */
.rainbow-dust span:nth-child(1) { left: 18%; background: rgba(255, 220, 230, 0.85); box-shadow: 0 0 6px rgba(255, 200, 215, 0.7); animation-delay: 0s; }
.rainbow-dust span:nth-child(2) { left: 36%; background: rgba(255, 235, 220, 0.85); box-shadow: 0 0 6px rgba(255, 215, 195, 0.7); animation-delay: 3.2s; }
.rainbow-dust span:nth-child(3) { left: 54%; background: rgba(245, 220, 235, 0.85); box-shadow: 0 0 6px rgba(230, 200, 220, 0.7); animation-delay: 6.4s; }
.rainbow-dust span:nth-child(4) { left: 72%; background: rgba(255, 240, 230, 0.85); box-shadow: 0 0 6px rgba(255, 220, 200, 0.7); animation-delay: 9.6s; }
.rainbow-dust span:nth-child(5) { left: 84%; background: rgba(255, 230, 240, 0.85); box-shadow: 0 0 6px rgba(255, 210, 225, 0.7); animation-delay: 12.8s; }

@keyframes rainbowDustFloat {
  0%   { bottom: -10%;  opacity: 0; transform: scale(0.4); }
  10%  { opacity: 0.95; }
  90%  { opacity: 0.95; }
  100% { bottom: 105%;  opacity: 0; transform: scale(1.3); }
}

/* (4) Conic rainbow-aura — DROPPET for mobile-perf.
   Conic-gradient + blur(40px) + spin animation = GPU-killer på iOS/Android.
   Frame-tuben + corner-sparks + dust gir nok mythic-vibe alene. */

/* === DECORATIVE PLAY-FRAME OVERLAY ===
   JS plasserer boksen over canvas. Ikke scales her — geometri matcher PNG-innerkant + tubeInset. */
.game-frame-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
}

/* === REVERTED (May 10, 2026 kveld) — plum-ink hairline + cabochons fjernet.
   Founder feedback: CSS-pålegg på toppen av PNG matchet ikke 3D-bevel'en.
   Pivot: bake ornamenter inn i selve PNG-rammen via Imagen-regenerering. */

/* (Cabochons + motion-energy ramp fjernet 2026-05-10 — baker ornamenter inn i PNG via Imagen i stedet.) */


/* ============================================================================
   FRAME TIER PROGRESSION (2026-05-10) — subtle material-aura ladder.
   No stars, no decorative junk. Pure material breathing + halo strength.
   Each tier reads slightly more "earned" via outer glow + breath cadence.
   T1 Cream    → softest, slightly transparent, no animation
   T2 Glaze    → subtle pink donut-sheen halo, no animation
   T3 Honey    → warm amber halo + slow gentle breath
   T4 Gold     → stronger gold halo + faster breath + extra outer ring
   T5 Crystal  → existing peach-prism effects (defined further below)
   ============================================================================ */

/* T1 Cherry Cream — minimal presence, slightly subdued so it doesn't dominate */
.game-wrap[data-frame="cherry-cream"] .game-frame-overlay {
  opacity: 0.96;
}

/* T2 Strawberry Glaze — subtle pink glow halo, no animation */
.game-wrap[data-frame="strawberry-glaze"] .game-frame-overlay {
  filter: drop-shadow(0 0 8px rgba(255, 165, 195, 0.35));
}

/* T3 Mango Honey — warm amber halo + slow gentle breath */
.game-wrap[data-frame="mango-honey"] .game-frame-overlay {
  filter: drop-shadow(0 0 12px rgba(255, 180, 100, 0.45));
  animation: tierBreathSlow 5s ease-in-out infinite;
  will-change: opacity;
}

/* T4 Pineapple Gold — stronger gold halo + faster breath + extra outer ring */
.game-wrap[data-frame="pineapple-gold"] .game-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(255, 210, 95, 0.55))
          drop-shadow(0 0 24px rgba(255, 200, 80, 0.25));
  animation: tierBreathMed 4s ease-in-out infinite;
  will-change: opacity;
}
/* 2026-05-12: Fjernet ::after-outer-rings (pineapple-gold + watermelon-crystal).
   Founder feedback: "den tynne, tynne rammen fra gamle dager — bort på alle".
   Frame-bevel'en i selve PNG-en bærer "tier-feel" alene; CSS-ring lagt på toppen
   var en redundant decoration som så ut som leftover-debris. */

@keyframes tierBreathSlow {
  0%, 100% { opacity: 0.96; }
  50%      { opacity: 1; }
}
@keyframes tierBreathMed {
  0%, 100% { opacity: 0.95; }
  50%      { opacity: 1; }
}

/* ============================================================================
   FRAME × THEME HALO HARMONY (Color Theorist verdict, May 10 2026)
   Path D: PNG body stays per-tier (cream/glaze/honey/gold/crystal — preserves
   tier-progression). Halo COLOR retunes per active theme so warm-frames don't
   clash on cool-bgs (and vice versa). Halo INTENSITY (px radius) stays
   per-tier so progression remains felt — only the hue shifts.

   Crystal (T5) breaks the rule: its peach-prism iridescence is the apex
   signature, "rare = unique = doesn't conform." Body stays iridescent across
   all themes; only outer ::after ring color is dampened per theme.

   These rules override the per-tier filters above on a per-theme basis.
   Selector specificity: theme + tier = (0,2,0) beats tier-only (0,1,0).
   ============================================================================ */

/* Apricot Morning — warm cream/peach default, halo stays sunset-peach */
.game-wrap[data-theme="apricot-morning"][data-frame="strawberry-glaze"] .game-frame-overlay {
  filter: drop-shadow(0 0 8px rgba(255, 176, 122, 0.40));
}
.game-wrap[data-theme="apricot-morning"][data-frame="mango-honey"] .game-frame-overlay {
  filter: drop-shadow(0 0 12px rgba(255, 176, 122, 0.45));
}
.game-wrap[data-theme="apricot-morning"][data-frame="pineapple-gold"] .game-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(240, 152, 38, 0.55))
          drop-shadow(0 0 24px rgba(255, 176, 122, 0.25));
}

/* Strawberry Sunrise — coastal coral dawn, halo stays melon-coral (already harmonious) */
.game-wrap[data-theme="strawberry-sunrise"][data-frame="strawberry-glaze"] .game-frame-overlay {
  filter: drop-shadow(0 0 8px rgba(255, 107, 122, 0.42));
}
.game-wrap[data-theme="strawberry-sunrise"][data-frame="mango-honey"] .game-frame-overlay {
  filter: drop-shadow(0 0 12px rgba(255, 107, 122, 0.42));
}
.game-wrap[data-theme="strawberry-sunrise"][data-frame="pineapple-gold"] .game-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(255, 107, 122, 0.55))
          drop-shadow(0 0 24px rgba(255, 78, 120, 0.25));
}

/* Kiwi Hollow — green forest midday, halo flips to mint-pop (kills warm clash) */
.game-wrap[data-theme="kiwi-hollow"][data-frame="strawberry-glaze"] .game-frame-overlay {
  filter: drop-shadow(0 0 8px rgba(124, 224, 198, 0.40));
}
.game-wrap[data-theme="kiwi-hollow"][data-frame="mango-honey"] .game-frame-overlay {
  filter: drop-shadow(0 0 12px rgba(124, 224, 198, 0.40));
}
.game-wrap[data-theme="kiwi-hollow"][data-frame="pineapple-gold"] .game-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(124, 224, 198, 0.50))
          drop-shadow(0 0 24px rgba(91, 176, 232, 0.20));
}

/* Citrus Lanterns — twilight orange, halo deep amber (+alpha for dark contrast) */
.game-wrap[data-theme="citrus-lanterns"][data-frame="strawberry-glaze"] .game-frame-overlay {
  filter: drop-shadow(0 0 8px rgba(240, 152, 38, 0.50));
}
.game-wrap[data-theme="citrus-lanterns"][data-frame="mango-honey"] .game-frame-overlay {
  filter: drop-shadow(0 0 12px rgba(240, 152, 38, 0.55));
}
.game-wrap[data-theme="citrus-lanterns"][data-frame="pineapple-gold"] .game-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(240, 152, 38, 0.60))
          drop-shadow(0 0 24px rgba(255, 176, 122, 0.30));
}

/* Peach Mist — stacked peach mountains, halo sunset-peach desaturated */
.game-wrap[data-theme="peach-mist"][data-frame="strawberry-glaze"] .game-frame-overlay {
  filter: drop-shadow(0 0 8px rgba(255, 176, 122, 0.38));
}
.game-wrap[data-theme="peach-mist"][data-frame="mango-honey"] .game-frame-overlay {
  filter: drop-shadow(0 0 12px rgba(255, 176, 122, 0.40));
}
.game-wrap[data-theme="peach-mist"][data-frame="pineapple-gold"] .game-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(180, 122, 217, 0.45))
          drop-shadow(0 0 24px rgba(255, 176, 122, 0.25));
}

/* Plum Dusk — purple lake dusk, halo flips to orchid (worst-offender fix) */
.game-wrap[data-theme="plum-dusk"][data-frame="strawberry-glaze"] .game-frame-overlay {
  filter: drop-shadow(0 0 8px rgba(180, 122, 217, 0.50));
}
.game-wrap[data-theme="plum-dusk"][data-frame="mango-honey"] .game-frame-overlay {
  filter: drop-shadow(0 0 12px rgba(180, 122, 217, 0.50));
}
.game-wrap[data-theme="plum-dusk"][data-frame="pineapple-gold"] .game-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(180, 122, 217, 0.55))
          drop-shadow(0 0 24px rgba(91, 176, 232, 0.25));
}

/* Melon Beach — tropical sunset apex, halo hot-magenta (apex bg gets apex halo) */
.game-wrap[data-theme="melon-beach"][data-frame="strawberry-glaze"] .game-frame-overlay {
  filter: drop-shadow(0 0 8px rgba(255, 78, 120, 0.45));
}
.game-wrap[data-theme="melon-beach"][data-frame="mango-honey"] .game-frame-overlay {
  filter: drop-shadow(0 0 12px rgba(255, 78, 120, 0.45));
}
.game-wrap[data-theme="melon-beach"][data-frame="pineapple-gold"] .game-frame-overlay {
  filter: drop-shadow(0 0 14px rgba(255, 78, 120, 0.55))
          drop-shadow(0 0 24px rgba(124, 224, 198, 0.20));
}

/* (Pineapple-gold + Crystal ::after-ring theme-overrides slettet 2026-05-12
   sammen med selve ::after-rings — se kommentar over.) */

/* === HUD-TOP — glassy floating chips (menu / SCORE / NEXT) inni iPhone-cardet ===
   Premium AAA-look: backdrop-blur + lav opacity-glass + soft inner highlight.
   Posisjonert med pust fra frame'ens topp-decoration. z 10 over frame (z 5). */
.hud-top {
  position: absolute;
  /* 2026-05-17: 4% → calc(4% + 32px) — Martin: alt øverst (XP-bar, portrait,
     score-hub, seeds, next-fruit) ned ca. en cherry-høyde (~30-34px). */
  top: calc(4% + 32px);
  left: 0;
  right: 0;
  /* Grid layout (v1.2 fix): 1fr | auto | 1fr guarantees score in middle
     column is TRUE-center regardless of side-cluster widths. Previous flex
     + center pushed score 24px right because left cluster (chest+cog) is
     wider than right (single next-bubble). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);  /* minmax(0,*) hindrer fr-vekst — score true-centered uansett cluster-bredder */
  align-items: center;
  padding: 0 clamp(14px, 4vw, 22px);
  gap: 24px;        /* 2026-05-17: 16 → 24 så crystal-seeds får ekstra luft fra score */
  z-index: 10;
  pointer-events: none;
}
.hud-top > * { pointer-events: auto; }

.hud-left-cluster {
  display: flex;
  align-items: center;
  /* Wave-13.19 (R3-6): 8→14px gap så cog ikke kysser portrait-rim.
     Audit-feedback: HUD-row så crampet ut, portrait-tier-ring trengte luft. */
  gap: 14px;
  justify-self: start;   /* anchored to left side */
}
.hud-left-cluster > * { pointer-events: auto; }
/* Phantom-spacer: usynlig, balanserer hud-right-cluster's next-bubble bredde.
   Width = next-bubble (clamp 64-80px) så score true-centered i grid. */
.hud-phantom-spacer {
  width: clamp(64px, 18vw, 80px);
  height: 1px;
  flex-shrink: 0;
  pointer-events: none;
}

.hud-score-wrap {
  justify-self: center;  /* true-center in middle grid column */
}
.hud-right-cluster {
  display: flex;
  align-items: center;
  /* Wave-13.19 (R3-6): mirror left-cluster (8→14px) for symmetri */
  gap: 14px;
  justify-self: end;     /* anchored to right side, mirrors left-cluster */
}
.hud-right-cluster > * { pointer-events: auto; }

/* HUD chip-strip OVERHAUL v2 (2026-05-12, per UX designer spec):
   - REMOVED white-glass circles around all HUD buttons
   - Buttons are now invisible 48×48 touch-targets (>44pt iOS HIG minimum)
   - Icons get layered drop-shadow stack ("stamped sticker" presence)
   - Next-fruit bubble bumped to clamp(64px, 18vw, 80px) per Martin's "100% bigger"
   - Phantom-spacer balances left-cluster width vs right next-fruit for
     perfect score-centering (handled in grid layout) */
.menu-btn,
.hud-next-bubble {
  border-radius: 50%;
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.15s ease;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.menu-btn {
  width: 44px;          /* iOS HIG min tap-target */
  height: 44px;
}
/* Wave-13.16 (Handlingsplan R-3): NEXT-bubble cream-pill stil for HUD-consistency.
   Tidligere gold-rim tier-frame (matching portrait) konkurrerte med currency-pill's
   cream-pill-design. Audit identifiserte at HUD-design-language brydde sammen.
   Nå: cream-pill bg + gold-border matching currency-pill. Frame-PNG hidden
   for next-bubble (portrait beholder den så avatar-identitet er klar). */
.hud-next-bubble {
  width: clamp(54px, 14vw, 64px);
  height: clamp(54px, 14vw, 64px);
  position: relative;
  animation: none;
  filter: none;
  /* Wave-13.16 (R-3): cream-pill matching .cv2-currency-style */
  background: linear-gradient(180deg, #fff8e8 0%, #ffe3b8 100%);
  border: 2px solid #e4a13e;
  border-radius: 50%;
  /* Wave-13.35: theme-tinted aura matching .hud-portrait-ring */
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    0 3px 6px rgba(80, 40, 20, 0.20),
    0 0 12px rgba(var(--scene-accent-rgb, 242, 184, 154), 0.45),
    0 0 24px rgba(var(--scene-accent-rgb, 242, 184, 154), 0.25);
}
/* Wave-13.16 (R-3): hide tier-frame-PNG på NEXT-bubble (portrait beholder den) */
#hud-next-frame-png { display: none !important; }
/* 2026-05-17: canvas position parallel-eksakt med portrait-img på venstre
   (var: position:relative + margin:3px → ble litt off-center fordi flex-
   centering konflikta med margin). Mirroring portrait img's setup gir 100%
   identisk plassering inni bubble + frame-png. */
.hud-next-bubble #next-preview {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  z-index: 0;
  margin: 0;
}
/* Next-fruit slide-in (Tier-1 polish 2026-05-18). When the preview swaps to
   a new fruit (after drop), the canvas drops in from above with a small
   overshoot so the player notices the change instead of it just snapping. */
.hud-next-bubble.swap-in #next-preview {
  animation: nextSwapIn 220ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes nextSwapIn {
  0%   { transform: translateY(-16px) scale(0.7); opacity: 0.35; }
  60%  { transform: translateY(2px)   scale(1.08); opacity: 1; }
  100% { transform: translateY(0)     scale(1);    opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-next-bubble.swap-in #next-preview { animation: none; }
}
/* Mirror portrait tier-ring colors onto next-bubble for symmetric look. */
.hud-next-bubble[data-tier="common"]    { --tier-color: #FFF4E6; }
.hud-next-bubble[data-tier="uncommon"]  { --tier-color: #B5D4B0; }
.hud-next-bubble[data-tier="rare"]      { --tier-color: #9EB8E8; }
.hud-next-bubble[data-tier="epic"]      { --tier-color: #FF8F8F; }
.hud-next-bubble[data-tier="legendary"] { --tier-color: #B47AD9; }
.hud-next-bubble[data-tier="mythic"]    { --tier-color: #FFB8E5; }
.menu-btn:hover,
.hud-next-bubble:hover { transform: scale(1.05); }
.menu-btn:active,
.hud-next-bubble:active { transform: scale(0.92); }

.menu-btn {
  flex-direction: column;
  gap: 4px;
}
.menu-btn span {
  display: block;
  width: 16px;
  height: 2.2px;
  background: #4a3578;
  border-radius: 2px;
  opacity: 0.85;
}

/* Kiwi-cog Settings-button (replaces 3-line burger). Icon fills button with
   slight inset, drop-shadow for separation against busy themed bgs. Idle
   "cog-tick" animation suggests interactivity (4s cycle). */
.menu-btn--icon {
  flex-direction: row;
  gap: 0;
  padding: 4px;          /* 4px invisible touch-padding, icon fills inner 40px */
  background: transparent;
}
.menu-btn--icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  /* Sticker-stack: hairline white edge (readability on dark themes) + soft
     contact shadow + warm halo. Replaces the white-circle's containment job. */
  filter:
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.95))
    drop-shadow(0 2px 3px rgba(43, 31, 58, 0.45))
    drop-shadow(0 0 10px rgba(255, 200, 120, 0.18));
  animation: cogTick 4s ease-in-out infinite;
}
@keyframes cogTick {
  0%, 88%, 100% { transform: rotate(0deg); }
  93%           { transform: rotate(14deg); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-btn--icon img { animation: none; }
}

/* Pause-button variant: SVG-based icon (pause-bars / play-triangle). Same
   48×48 touch-target som chest+cog, men ingen idle-animasjon (pause er
   functional, ikke decorative). Soft drop-shadow for separation. */
.menu-btn--pause {
  padding: 4px;
  background: transparent;
  flex-direction: row;
  gap: 0;
}
.hud-pause-icon {
  width: 100%;
  height: 100%;
  filter:
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.95))
    drop-shadow(0 2px 3px rgba(43, 31, 58, 0.45));
}
.menu-btn--pause:hover { transform: scale(1.05); }
.menu-btn--pause:active { transform: scale(0.92); }

/* PAUSED overlay — covers play-area inside .game-wrap, sub-modal style.
   Tap-anywhere = resume. z-index above frame (5) + tier-bar (7) but below
   HUD (10) so the pause-button itself stays tappable for re-toggle. */
.pause-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  background:
    radial-gradient(ellipse at center, rgba(43, 28, 50, 0.55) 0%, rgba(43, 28, 50, 0.78) 100%);
  backdrop-filter: blur(3px) saturate(0.85);
  -webkit-backdrop-filter: blur(3px) saturate(0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: pauseOverlayIn 0.22s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.pause-overlay.hidden { display: none; }
.pause-overlay-card {
  text-align: center;
  padding: 28px 36px;
  background: linear-gradient(180deg, rgba(255, 248, 240, 0.92) 0%, rgba(252, 232, 216, 0.92) 100%);
  border: 2.5px solid #f5b642;
  border-radius: 28px;
  box-shadow:
    0 0 0 3px rgba(245, 182, 66, 0.22),
    0 12px 36px rgba(120, 30, 80, 0.4);
  animation: pauseCardIn 0.32s cubic-bezier(0.34, 1.6, 0.64, 1);
}
.pause-overlay-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 800;
  font-size: 38px;
  letter-spacing: 4px;
  color: #c92a48;
  text-shadow:
    0 2px 0 rgba(120, 20, 40, 0.55),
    0 4px 10px rgba(120, 20, 40, 0.3);
  margin-bottom: 4px;
}
.pause-overlay-subtitle {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: rgba(74, 38, 50, 0.65);
}
@keyframes pauseOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pauseCardIn {
  from { transform: scale(0.88); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* Collection-chest variant: same chip styling but no cog-tick rotation.
   Subtle "lid lift" wiggle suggests interactivity without rotating like a cog. */
.menu-btn--collection img {
  animation: chestNudge 5.4s ease-in-out infinite;
}
@keyframes chestNudge {
  0%, 92%, 100% { transform: translateY(0) scale(1); }
  96%           { transform: translateY(-1.5px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .menu-btn--collection img { animation: none; }
}

/* SCORE — hero element, må stå sterkt mot busy theme-bgs */
.hud-score-wrap {
  flex: 0 0 auto;              /* fast bredde, ekspanderer ikke */
  text-align: center;
  line-height: 1;
  min-width: 110px;
  /* Wave-8.0: rounded pill 9-slice (9slice-button.png). top/bottom slice 200
     fanger gold-rim, left/right slice 280 fanger den rundede enden.
     border-width 12/22 — top/bottom matcher gold-rim-thickness, left/right
     matcher rounded-end-radius for ikke å distortere kurven. */
  background: transparent;
  padding: 4px 14px;
  border-style: solid;
  border-color: transparent;
  border-width: 12px 22px;
  border-image: url('assets/9slice-button.png') 200 280 fill / 12px 22px / 0 stretch;
  /* Wave-13.35: theme-tinted aura stacked på 9slice-pill drop-shadow.
     PNG-rim cream/gold beholdt (text-readability), aura tar theme-farge. */
  filter:
    drop-shadow(0 2px 4px rgba(80, 50, 20, 0.25))
    drop-shadow(0 0 10px rgba(var(--scene-accent-rgb, 242, 184, 154), 0.55));
}
.hud-score-big {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 800;  /* Wave-13.15 (Pre-demo P2-5): 700 → 800 — chunkier */
  /* Wave-13.15 (P2-5): 30px → clamp 32-40px så score dominerer HUD som "hero". */
  font-size: clamp(32px, 8.5vw, 40px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.8px;
  display: inline-block;
  transform-origin: center center;
  background: linear-gradient(180deg, #8E3B66 0%, #5b2e1e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Wave-13.15 (P2-5): sterkere drop-shadow stack for dramatic hero-presence */
  filter:
    drop-shadow(0 1px 0 rgba(255, 244, 230, 0.95))
    drop-shadow(0 3px 5px rgba(80, 30, 60, 0.55))
    drop-shadow(0 5px 12px rgba(60, 20, 40, 0.32));
}

/* Wave-13.3 (audit Batch 3.3): score-milestone glow. Når score krysser 1K/
   10K/100K/500K, score-chip får 1.4s glow + scale-pulse. Diskret nok til
   ikke å forstyrre gameplay, men readable som "wow, jeg krysset noe". */
.hud-score-wrap.is-milestone .hud-score-big {
  animation: scoreMilestonePulse 1.4s cubic-bezier(0.34, 1.5, 0.64, 1) 1;
}
@keyframes scoreMilestonePulse {
  0%   { transform: scale(1); filter: drop-shadow(0 1px 0 rgba(255, 244, 230, 0.9)) drop-shadow(0 2px 4px rgba(80, 30, 60, 0.45)); }
  20%  { transform: scale(1.18); filter: drop-shadow(0 0 14px rgba(255, 200, 110, 0.95)) drop-shadow(0 0 8px rgba(255, 230, 150, 0.7)); }
  60%  { transform: scale(1.05); filter: drop-shadow(0 0 8px rgba(255, 220, 150, 0.55)); }
  100% { transform: scale(1); filter: drop-shadow(0 1px 0 rgba(255, 244, 230, 0.9)) drop-shadow(0 2px 4px rgba(80, 30, 60, 0.45)); }
}
@media (prefers-reduced-motion: reduce) {
  .hud-score-wrap.is-milestone .hud-score-big { animation: none; }
}
.score-milestone-pop {
  position: fixed;
  transform: translate(-50%, 0);
  font: 800 24px 'Lilita One', 'Fredoka', system-ui;
  color: #ff9b3e;
  text-shadow:
    -2px -2px 0 #fff5d8, 2px -2px 0 #fff5d8,
    -2px 2px 0 #fff5d8, 2px 2px 0 #fff5d8,
    0 4px 10px rgba(160, 80, 20, 0.45);
  pointer-events: none;
  z-index: 50;
  animation: scoreMilestoneFloat 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) 1;
}
@keyframes scoreMilestoneFloat {
  0%   { opacity: 0; transform: translate(-50%, -8px) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, 0) scale(1.12); }
  60%  { opacity: 1; transform: translate(-50%, -18px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -42px) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .score-milestone-pop { animation: none; opacity: 1; }
}

/* === CANVAS WRAP — sentrer canvas inni cardet, under HUD og over hint ===
   Smalere gutters = større spillfelt + rim / ramme dekker mer av «kortet».
   tubeInset er fortsatt målt på PNG ⇒ fysikk følger den indre kanten. */
.canvas-wrap {
  position: absolute;
  top: 11%;      /* skviset opp så rammen får mer høyde uten å treffe HUD-chips */
  /* Bottom reserves space for tier-bar (which lives BELOW the frame in its
     own dedicated strip) + safe-area + 4px gap. Bar height is clamp 46-60px
     so we use 60px as the upper-bound reserve (clamp ensures actual fits).
     Without this, the bar would overlap the canvas → fruits visually crash
     into the bar's mini-fruit decorations. Clean separation = no confusion. */
  bottom: calc(2% + 60px + env(safe-area-inset-bottom, 0px) + 4px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  flex: initial;
  width: auto;
  min-height: 0;
}

/* === HINT — subtil tekst nederst inni cardet === */
.hint {
  position: absolute;
  bottom: 4%;
  left: 7%;
  right: 7%;
  text-align: center;
  z-index: 8;
  color: rgba(74, 53, 120, 0.65);
  font-family: 'Nunito', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin: 0;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

/* === Helper: visually-hidden for skjermlesere === */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

#game {
  background: transparent;
  border: none;
  display: block;
  cursor: pointer;
  touch-action: none;
  position: relative;
  z-index: 1;
  /* aspect-ratio er KRITISK — uten den stretcher canvas internal bitmap
     (W=400 × H=650 = 0.615 ratio) til viewport-aspect og frukter blir til
     OVALER på iPhone Pro (0.46 ratio). Canvas må alltid være rund-ratio.
     Letter-box rundt (sky-bg) gir AAA mobile-game look (Royal Match-style).
     World Coordinates (2026-05-15): width:100% (was auto) — canvas now
     scales UP to fill canvas-wrap on wide viewports (iPhone Pro Max 430),
     not only DOWN on narrow ones. Without this, on 430-wide viewport the
     canvas stayed at intrinsic 400px and left empty side-strips inside
     the frame; on 375-wide it scaled down. Same visual on every device. */
  aspect-ratio: 400 / 650;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  /* GPU layer-promotion for compositor-uavhengighet */
  transform: translateZ(0);
  /* 2026-05-10: rounded corners matching frame inner-radius proportionally
     (~6% of canvas width). When PNG-frame is "None" the canvas no longer
     reads as a square — playfield silhouette stays consistent with the
     iPhone-card outer radius. */
  border-radius: 6%;
  overflow: hidden;
  /* NO box-shadow (iOS Safari per-frame re-raster killer). */
}

.hint {
  position: relative;
  z-index: 2;
  font-family: 'Nunito', sans-serif;
  font-size: 12px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  text-shadow: 0 1px 4px rgba(80, 30, 70, 0.6);
}

/* ================================================
   MUTE BUTTON
   ================================================ */
/* === SETTINGS-KNAPP — tre horisontale streker (hamburger) øverst-høyre === */
.settings-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  z-index: 10;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 16px rgba(184, 105, 255, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}
.settings-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: linear-gradient(90deg, #6b4ea8, #a855f7);
  border-radius: 1px;
}
.settings-btn:hover { transform: scale(1.08); }
.settings-btn:active { transform: scale(0.95); }

/* === TUTORIAL — første gang man spiller, slide-in i iPhone-kort === */
.tutorial-card {
  position: relative;
  /* World Coordinates: match .game-wrap. */
  width: min(100% - 16px, 540px);
  aspect-ratio: 858 / 1834;
  max-height: calc(100vh - 32px);
  border-radius: 32px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,240,250,0.95), rgba(245,220,255,0.7)),
    linear-gradient(180deg, #fff5fa 0%, #f0e6ff 100%);
  box-shadow:
    0 30px 80px rgba(120, 80, 180, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
  padding: 28px 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  animation: pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tutorial-skip {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: none;
  color: rgba(122, 92, 184, 0.7);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 10px;
  z-index: 5;
  transition: color 0.15s;
}
.tutorial-skip:hover { color: #a855f7; }
.tutorial-skip:active { transform: scale(0.94); }  /* Wave-13.2: tactile feedback */

.tutorial-slides {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.tutorial-slide {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px 8px;
  animation: tutSlideIn 0.4s ease;
}
.tutorial-slide.hidden { display: none; }

@keyframes tutSlideIn {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* === Tutorial visuals — bruker EKTE frukt-PNG-er fra assets === */
.tutorial-art {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 140px;
  flex-wrap: wrap;
}

/* Felles frukt-img-styling — drop-shadow softener PNG-alfakanter */
.tut-fruit {
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(80, 30, 70, 0.18));
  user-select: none;
  -webkit-user-drag: none;
}

/* Størrelser — eksponentielle for å vise frukt-progresjon visuelt */
.tut-fruit--xs { width: 28px;  height: 28px; }
.tut-fruit--sm { width: 38px;  height: 38px; }
.tut-fruit--md { width: 56px;  height: 56px; }
.tut-fruit--lg { width: 80px;  height: 80px; }

/* Animasjoner */
.tut-bounce       { animation: tutBounce 1.2s ease-in-out infinite; }
.tut-bounce-delay { animation: tutBounce 1.2s ease-in-out 0.6s infinite; }
.tut-pop          { animation: tutPop 1.5s ease-in-out infinite; }
.tut-glow         { animation: tutGlow 2s ease-in-out infinite; }

@keyframes tutBounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@keyframes tutPop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}
@keyframes tutGlow {
  0%, 100% { filter: drop-shadow(0 3px 6px rgba(80, 30, 70, 0.18)); }
  50%      { filter: drop-shadow(0 3px 6px rgba(80, 30, 70, 0.18)) drop-shadow(0 0 14px rgba(255, 100, 150, 0.7)); }
}

.tut-arrow {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 32px;
  color: #a855f7;
  filter: drop-shadow(0 2px 4px rgba(168, 85, 247, 0.4));
}

/* SLIDE 2: chain layout — tettere spacing fordi mange frukter på rad */
.tutorial-art--chain { gap: 4px; }
.tut-plus {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: rgba(168, 85, 247, 0.75);
  margin: 0 -2px;
}

/* SLIDE 3: combo-stage med frukter bak teksten */
.tut-combo-stage {
  position: relative;
  width: 240px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tut-combo-bg-1, .tut-combo-bg-2, .tut-combo-bg-3 {
  position: absolute;
  opacity: 0.5;
  filter: drop-shadow(0 3px 6px rgba(80, 30, 70, 0.18)) blur(0.5px);
}
.tut-combo-bg-1 { top: 8%;  left: 12%; animation: tutBounce 1.4s ease-in-out infinite; }
.tut-combo-bg-2 { top: 60%; left: 8%;  animation: tutBounce 1.4s ease-in-out 0.4s infinite; }
.tut-combo-bg-3 { top: 30%; right: 6%; animation: tutBounce 1.4s ease-in-out 0.8s infinite; }

/* SLIDE 3: combo text + sparks */
.tutorial-art--combo {
  position: relative;
}
.tut-combo-text {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 38px;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #34d399 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 3px 6px rgba(5,150,105,0.4));
  animation: tutPop 1.6s ease-in-out infinite;
}
.tut-spark {
  position: absolute;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #fbbf24;
  filter: drop-shadow(0 2px 4px rgba(251,191,36,0.6));
  animation: tutSparkFloat 1.8s ease-in-out infinite;
}
.tut-spark-1 { top: -10px; left: 10%; animation-delay: 0s; }
.tut-spark-2 { top: 20px; right: 8%; animation-delay: 0.6s; }
.tut-spark-3 { bottom: -12px; left: 40%; animation-delay: 1.2s; }

@keyframes tutSparkFloat {
  0%, 100% { transform: translateY(0) scale(0.7); opacity: 0; }
  50%      { transform: translateY(-12px) scale(1); opacity: 1; }
}

/* SLIDE 4: danger line + frukter som nesten går over */
.tutorial-art--danger {
  position: relative;
  width: 220px;
  height: 160px;
  background: linear-gradient(180deg, rgba(212, 235, 255, 0.6) 0%, rgba(255, 220, 235, 0.6) 100%);
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.tut-danger-line {
  position: absolute;
  top: 24px;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg, #ff3b5c 0, #ff3b5c 6px, transparent 6px, transparent 12px);
  animation: tutDangerPulse 1.4s ease-in-out infinite;
}
@keyframes tutDangerPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}
.tut-danger-fruits {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
}
.tut-danger-fruits .tut-fruit { animation: none; }
.tut-danger-warn {
  position: absolute;
  top: 30px;
  right: 10px;
  font-size: 26px;
  filter: drop-shadow(0 2px 4px rgba(255, 50, 80, 0.6));
  animation: tutBounce 0.9s ease-in-out infinite;
}

/* === Tutorial typography + footer === */
.tutorial-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.5px;
  background: linear-gradient(180deg, #ff6b9d 0%, #ff8a00 60%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 3px 4px rgba(80, 30, 120, 0.25));
  text-align: center;
  margin: 0;
}
.tutorial-text {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  color: #4a3578;
  text-align: center;
  margin: 0;
  padding: 0 8px;
  max-width: 320px;
}
.tutorial-text strong {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-size: 17px;
  background: linear-gradient(180deg, #ff6b9d 0%, #d8395a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: normal;
  letter-spacing: 0.3px;
}

.tutorial-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 8px 4px 0;
  margin-top: auto;
}
.tutorial-dots {
  display: flex;
  gap: 8px;
}
.tutorial-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(168, 85, 247, 0.25);
  transition: background 0.2s, transform 0.2s;
}
.tutorial-dot.active {
  background: #a855f7;
  transform: scale(1.3);
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}
.tutorial-next {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 1.5px;
  color: #fff;
  background: linear-gradient(180deg, #c084fc 0%, #a855f7 100%);
  border: none;
  border-radius: 100px;
  padding: 12px 28px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(168, 85, 247, 0.4),
              inset 0 2px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.1s, box-shadow 0.1s;
}
.tutorial-next:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(168, 85, 247, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.4); }
.tutorial-next:active { transform: translateY(1px); }

/* === SETTINGS-OVERLAY (samme stil som theme-card) === */
/* Settings-overlay må stacke over game-over når åpnet fra Collection-btn */
#settings-overlay,
#game-settings-overlay { z-index: 100; }

/* === SETTINGS CARD — iPhone-card aspect, matcher splash + gameover ===
   Bg-image (intro-bg) + vignette → samme design system som resten av spillet.
   Tabs eliminerer scroll-veien, hver kategori får sin egen plass. */
.settings-card {
  position: relative;
  /* World Coordinates: match .game-wrap. */
  width: min(100% - 16px, 540px);
  aspect-ratio: 858 / 1834;
  max-height: calc(100vh - 32px);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(120, 80, 180, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  padding: 28px 18px 16px;
  gap: 10px;
  animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Bg-image fyller cardet. Subtle filter — Martin reverterte saturation 2026-05-16
   (1.35 ble for sterkt). Tilbake til original soft pass. */
.settings-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.18) brightness(1.04) contrast(1.03);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}
/* Vignette — INVERTED: clear på sidene (bg popper) + subtil cream-soften
   bak boardet i center for å gi separasjon. Per Martin "bg kan poppe mye mer
   på sidene" (2026-05-16). */
.settings-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Cream-soft kun i center (bak boardet), transparent på sidene */
    radial-gradient(ellipse 55% 80% at 50% 50%,
      rgba(255, 245, 232, 0.22) 0%,
      rgba(255, 245, 232, 0.10) 60%,
      rgba(255, 245, 232, 0) 100%);
}

/* All content over bg+vignette */
.settings-card > *:not(.settings-bg):not(.settings-vignette):not(.settings-close-btn):not(.profile-close):not(.theme-close-btn):not(.collection-nav-strip) {
  position: relative;
  z-index: 2;
}

/* === NOW EQUIPPED strip — klikkbare pills som hopper til riktig tab === */
.settings-equipped {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 100px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(80, 30, 60, 0.22);
  min-height: 32px;
}
.settings-equipped-pill {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 100px;
  padding: 4px 10px;
  font-size: 10px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  color: #4a3578;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  white-space: nowrap;
  letter-spacing: 0.2px;
}
.settings-equipped-pill:hover {
  transform: scale(1.05);
  box-shadow: 0 2px 6px rgba(80, 30, 60, 0.25);
}
.settings-equipped-pill:active { transform: scale(0.97); }
.settings-equipped-divider {
  color: rgba(74, 53, 120, 0.4);
  font-size: 11px;
}

/* === TAB BAR — pill-style med gradient active-state === */
.settings-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  border-radius: 100px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 4px 14px rgba(80, 30, 60, 0.22);
  /* Horizontal scroll on small screens — 6 tabs don't fit on iPhone SE.
     Strip stays one row, individual tabs keep their natural width. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}
.settings-tabs::-webkit-scrollbar { display: none; }
.settings-tab {
  flex: 1 0 auto;        /* keep natural width, no shrink */
  min-width: 56px;       /* enough for shortest labels (BG, MUSIC) */
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border: none;
  border-radius: 100px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  white-space: nowrap;
  color: rgba(74, 53, 120, 0.55);
  transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
}
.settings-tab:hover {
  color: rgba(74, 53, 120, 0.9);
  background: rgba(255, 255, 255, 0.45);
}
.settings-tab:active { transform: scale(0.96); }

/* Per-tab kategori-farger på ACTIVE pill — branding via fargene.
   Aktiv pille scales litt opp og får en sterkere "lifted chip"-shadow så
   den popper tydelig mot inaktive piller. */
.settings-tab.is-active {
  color: #fff;
  transform: scale(1.06);
  font-weight: 800;
  text-shadow: 0 1px 1px rgba(43, 31, 58, 0.35);
}
/* Squish-aligned tab-farger (replaces legacy Tailwind palette).
   Each tab tokenized to a brand-color so Collection reads as one design system. */
.settings-tab[data-tab="bg"].is-active {
  background: linear-gradient(180deg, #7BC1ED 0%, var(--sky-pop) 100%);
  box-shadow: 0 3px 10px rgba(91, 176, 232, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.settings-tab[data-tab="frame"].is-active {
  background: linear-gradient(180deg, var(--melon-coral-hi) 0%, var(--melon-coral) 100%);
  box-shadow: 0 3px 10px rgba(255, 107, 122, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.settings-tab[data-tab="music"].is-active {
  background: linear-gradient(180deg, #C994E0 0%, var(--orchid-spark) 100%);
  box-shadow: 0 3px 10px rgba(180, 122, 217, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.settings-tab[data-tab="sound"].is-active {
  background: linear-gradient(180deg, var(--tier-legendary-motion) 0%, var(--tier-legendary) 100%);
  box-shadow: 0 3px 10px rgba(240, 152, 38, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* === TAB CONTENT — kun én pane synlig om gangen, fade-transition === */
.settings-tab-content {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}
.settings-tab-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 2px 8px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 122, 217, 0.45) transparent;  /* orchid-spark @ 45% */
}
/* (Collection-pane setup is canonical in the rule below at line ~2050 — strip
   + dots reservation lives there to avoid two competing rules.) */
.settings-tab-pane.is-active {
  opacity: 1;
  pointer-events: auto;
}
.settings-tab-pane::-webkit-scrollbar { width: 4px; }
.settings-tab-pane::-webkit-scrollbar-thumb {
  background: rgba(180, 122, 217, 0.45);
  border-radius: 2px;
}

/* === ACTIVE-PANE THEME-TINT (signature touch) ===
   Når en tab er aktiv, smitter dens kategori-farge subtilt over på pane-bakgrunnen
   som en soft radial halo i toppen. Hele skjermen "vibrer" i tab-fargen ditt øye
   allerede har låst på. Squish-feel som Royal Match ikke har. */
.settings-tab-pane[data-pane="bg"].is-active        { background: radial-gradient(ellipse at top, rgba(123, 193, 237, 0.18) 0%, transparent 55%); }
.settings-tab-pane[data-pane="frame"].is-active     { background: radial-gradient(ellipse at top, rgba(255, 107, 122, 0.16) 0%, transparent 55%); }
.settings-tab-pane[data-pane="fruits"].is-active    { background: radial-gradient(ellipse at top, rgba(124, 224, 198, 0.18) 0%, transparent 55%); }
.settings-tab-pane[data-pane="trophies"].is-active  { background: radial-gradient(ellipse at top, rgba(255, 200, 80, 0.18) 0%, transparent 55%); }
.settings-tab-pane[data-pane="music"].is-active     { background: radial-gradient(ellipse at top, rgba(180, 122, 217, 0.18) 0%, transparent 55%); }

/* Music-tiles — Squish-aligned gradients per track-tema.
   Default = cream→orchid (kawaii pop), Mango = peach→legendary (warm sunset),
   Berry = orchid→plum-ink (deep berry). All derived from brand tokens. */
.cosmetic-tile[data-id="default"] {
  background: linear-gradient(180deg, var(--cream-deep) 0%, var(--orchid-spark) 100%);
}
.cosmetic-tile[data-id="mango"] {
  background: linear-gradient(180deg, var(--sunset-peach) 0%, var(--tier-legendary) 100%);
}
.cosmetic-tile[data-id="berry"] {
  background: linear-gradient(180deg, var(--orchid-spark) 0%, var(--plum-ink) 100%);
}
/* Stort sentralt emoji-icon på music-tiles */
.cosmetic-tile[data-id="default"]::before,
.cosmetic-tile[data-id="mango"]::before,
.cosmetic-tile[data-id="berry"]::before {
  position: absolute;
  top: 32%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 42px;
  pointer-events: none;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25));
}
.cosmetic-tile[data-id="default"]::before { content: "🎶"; }
.cosmetic-tile[data-id="mango"]::before   { content: "🥭"; }
.cosmetic-tile[data-id="berry"]::before   { content: "🫐"; }
/* Music-tile name vises hvit fordi gradient er mørk nok */
.cosmetic-tile[data-id="default"] .cosmetic-tile-label,
.cosmetic-tile[data-id="mango"] .cosmetic-tile-label,
.cosmetic-tile[data-id="berry"] .cosmetic-tile-label {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
}

/* Sound-pane: gap mellom de 2 togglene */
.settings-tab-pane[data-pane="sound"] {
  padding-top: 8px;
  gap: 8px;
}

/* Toggle-button OFF-state — clean neutral grey (cleaner than muddy plum-light).
   Keeps aria-pressed="true" inverted-logic from existing pattern. */
.settings-toggle.is-off {
  background: linear-gradient(180deg, #D6D0DC 0%, #8A7F95 100%);
  box-shadow: 0 2px 6px rgba(120, 110, 135, 0.28);
}
.settings-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 26px;
  letter-spacing: 0.5px;
  text-align: center;
  /* Squish house-style: gold→coral gradient (matches NEW BEST) instead of
     legacy pink→orange→purple Tailwind cocktail. Italic + uppercase-feel
     via tracking pulls it into the same family as Game Over hero. */
  background: linear-gradient(180deg, var(--tier-legendary-motion) 0%, var(--melon-coral) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 3px 3px rgba(43, 31, 58, 0.28));
  margin: 0;
}

/* Collection wordmark logo — replaces .settings-title text on the Collection
   overlay. Imagen-generated 3D balloon-typography with kawaii strawberry
   character. Image is 800×248. Sized to ~70% of the card width on every
   device via clamp. The hidden .settings-title sibling stays for
   accessibility (screen readers). */
/* 2026-05-12: Collection-overlay er nå en full-screen swipe-flow (Variant B).
   Den gamle Collection-wordmark + tab-bar skjules — brukeren swiper venstre/
   høyre mellom sidene (BADGES → BG → FRAMES → FRUITS → MUSIC → STATS). Hver
   side bruker board.png eller badges-board.png som template-bg. */
/* Collection PNG-logo øverst (Martin's premium 3D bubble-letter art).
   Fixed position med safe-area-respect så den ikke krasjer m/ notch.
   1448×1086 aspect = 1.33 → ved 180px wide = 135 tall (plus drop-shadow). */
#settings-overlay .settings-title-logo {
  display: block;
  position: fixed;
  top: max(-12px, calc(env(safe-area-inset-top) - 12px));
  left: 50%;
  transform: translateX(-50%);
  /* 2026-05-17 v2: bigger (~55% bigger than original) men ikke så stor at den
     crasher med top-pink-jewel av badges-board (var clamp 220-360 = crash). */
  width: clamp(170px, 48vw, 280px);
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 32;
  filter: drop-shadow(0 4px 10px rgba(120, 30, 10, 0.35));
}
/* iPhone SE / korte viewports: skjul logo helt — chrome ate 28% av 667 view.
   Per gamer-agent + HIG: title er "dev ego chrome", spilleren vet hvor de er. */
@media (max-height: 720px) {
  #settings-overlay .settings-title-logo { display: none !important; }
}
/* Tab-bar skjult (icon-strip er primary nav). */
#settings-overlay .settings-tabs {
  display: none !important;
}
/* COLLECTION-tittel — Royal Match / Candy Crush "stamped sticker" stil.
   Lilita One font (allerede importert) + dark outline + 3D extrude +
   drop shadow. Per-tab fyllfarge via .settings-title varianter senere.
   Fixed på top, justerer for safe-area-inset (notch). */
#settings-overlay .settings-title:not(.visually-hidden) {
  position: fixed;
  top: max(6px, calc(env(safe-area-inset-top) + 2px));
  left: 50%;
  transform: translateX(-50%);
  display: block;
  text-align: center;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-weight: 400;                   /* Lilita One er single-weight */
  font-size: clamp(28px, 6.8vw, 40px);
  letter-spacing: 1.5px;
  line-height: 1;
  color: #ffd866;                     /* gold fill — Royal Match-feel */
  -webkit-text-stroke: 4px #4a1830;   /* dark wine outline */
  paint-order: stroke fill;           /* stroke BAK fyllet så letters er lesbare */
  text-shadow:
    0 3px 0 #4a1830,                  /* 3D extrude bottom */
    0 5px 0 #2a0d20,                  /* darker shadow */
    0 8px 14px rgba(0, 0, 0, 0.45),   /* soft drop shadow */
    0 0 24px rgba(255, 200, 100, 0.4); /* warm glow */
  margin: 0;
  padding: 0;
  pointer-events: none;
  user-select: none;
  z-index: 31;
  white-space: nowrap;
}
/* Settings-overlay (Collection) skal fylle ENTIRE viewport-bredden — fjern
   den 16-18px overlay-paddingen som ellers krymper boardet.
   --strip-zone / --dots-zone: single-source-of-truth top + bottom reservations
   for the icon-strip and page-dots. Pane uses them as padding so the board
   (a flex child) fills available vertical space exactly. Tuned for ~96%
   width on iPhone 14 + breathing on iPhone SE. See programmer-AI audit
   2026-05-13 for math verification. */
#settings-overlay {
  padding: 0 !important;
  /* 4-AGENT-AUDIT 2026-05-16: Kollapset top-chrome fra 170→112px (icons-strip
     only). Logo + strip overlapper via z-index (logo top:-8, strip top:48).
     env() REPLACES (ikke adds) base-value på notched iPhones.
     iPhone SE (no notch): 112px chrome. iPhone Pro: env-inset 59 + 56 = 115px.
     Target: 85% content + 15% chrome (var: 72% / 28%). */
  --strip-zone: max(154px, calc(env(safe-area-inset-top) + 98px));   /* logo (100) + strip (52) + 2px gap */
  --dots-zone:  max(28px,  calc(env(safe-area-inset-bottom) + 14px));
}
#settings-overlay .settings-card {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-width: none;
  padding: 0 !important;  /* killer .gameover-card-arvet 18px sider-padding */
}
#settings-overlay .settings-tab-content {
  padding: 0;
  margin: 0;
  width: 100vw !important;
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;        /* Firefox */
  scroll-snap-stop: always;     /* iOS: én side per swipe */
}
#settings-overlay .settings-tab-content::-webkit-scrollbar { display: none; }
/* Hver pane fyller full bredde + snap-stop. Override absolutt-positionering
   som de hadde i tab-bar-modusen. */
#settings-overlay .settings-tab-pane {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  opacity: 1 !important;
  pointer-events: auto !important;
  overflow-y: auto;
  /* Flex column with strip-zone + dots-zone reserved as padding. Board (the
     flex child) fills the remaining vertical real-estate via height:100% +
     aspect-ratio. Replaces the brittle margin+width-clamp approach which
     under-budgeted on real iPhones (founder reported "boards too small"). */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--strip-zone) 0 var(--dots-zone);
  box-sizing: border-box;
}
/* Direkte barn av en pane senterer horisontalt. Pane padding (var(--strip-zone)
   / var(--dots-zone)) handles vertical placement. */
#settings-overlay .settings-tab-pane > * {
  margin-left: auto;
  margin-right: auto;
}
/* WIDTH-BOUND nå (2026-05-16): board må IKKE shrinkes av flex.
   flex-shrink: 0 så aspect-ratio gir full ønsket høyde, selv om pane må scrolle. */
#settings-overlay .settings-tab-pane > .board-page,
#settings-overlay .settings-tab-pane .badges-album {
  flex: 0 0 auto;
  min-height: 0;
}

/* === BOARD-PAGE TEMPLATE (placeholder for non-BADGES sider) ===
   Bruker board.png som tom cream-paper template. Page-wordmark sitter i
   header-sonen som BADGES gjør. Plassholder-tekst inni board-bodyen til vi
   bygger ekte innhold per side. */
.board-page {
  position: relative;
  /* Wave-8.31 revert: 9-slice-eksperiment ga blank rendering pga komplekse
     parent-flex/scroller-overrides. Tilbake til aspect-ratio + board.png
     som er stabilt. Scroll-fixen i .board-page-body (Wave-8.30) holder
     fortsatt content inni rammen. */
  width: min(100% - 8px, 600px);
  max-width: 600px;
  aspect-ratio: 941 / 1672;
  height: auto;
  margin: 0 auto;
  background: url('assets/board.png') center / contain no-repeat;
}
/* Board-title — 3-LAGS "stamped sticker" Collection-logo emulation:
   • Innerste: red gummy fyll (matcher Collection-letters)
   • Midt-lag: cream-paper ring (matcher boardet)
   • Ytterst: gold-yellow rim (matcher Collection's outer edge)
   Bygget med -webkit-text-stroke (cream-ring) + multi-offset text-shadow
   stack (gold outer-rim, simulerer wider stroke) + 3D-extrude + drop. */
.board-page-title {
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* WAVE-8.53: ribbon-bg fjernet + title flyttet OPP (12% → 7%).
     Padding redusert siden ribbon ikke trenger plass. */
  background: transparent;
  min-width: 0;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: clamp(30px, 7.8vw, 42px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #ff5d3a;                          /* Layer 1: red gummy fyll */
  -webkit-text-stroke: 3px #100408;        /* Layer 2: SVART skygge-ring mellom rødt og gull */
  paint-order: stroke fill;
  text-shadow:
    /* Layer 3: gold-yellow OUTER rim — 8 offsets simulerer wider stroke
       (orthogonal + diagonal = smooth outline at 4px out fra cream-ring) */
    -4px 0    0 #ffd866,
     4px 0    0 #ffd866,
     0   -4px 0 #ffd866,
     0    4px 0 #ffd866,
    -3px -3px 0 #ffd866,
     3px -3px 0 #ffd866,
    -3px  3px 0 #ffd866,
     3px  3px 0 #ffd866,
    /* Tight darker-red 3D-extrude */
    0 2px 0 #c9381c,
    0 4px 0 #8e2010,
    /* Soft warm drop */
    0 10px 16px rgba(120, 30, 10, 0.5),
    /* Golden halo */
    0 0 22px rgba(255, 200, 100, 0.4);
  pointer-events: none;
  white-space: nowrap;
  margin: 0;
}
/* 2026-05-17: PNG-logo variant — Martin lagde stamped-sticker title-PNGs
   (badges-logo, fruits-logo, themes-logo, shop-logo, character-logo).
   --has-logo modifier stripper text-styling så bare imagen vises.
   Center via parent's translate(-50%, -50%); img sentreres inni. */
.board-page-title--has-logo {
  font-size: 0;
  line-height: 0;
  color: transparent;
  text-shadow: none;
  -webkit-text-stroke: 0;
}
.board-page-title-logo {
  display: block;
  width: auto;
  height: clamp(48px, 12vw, 68px);
  max-width: 78vw;
  object-fit: contain;
  /* Soft warm drop-shadow per Martin's "fin skygge under alle" */
  filter:
    drop-shadow(0 4px 8px rgba(120, 30, 10, 0.45))
    drop-shadow(0 10px 20px rgba(120, 30, 10, 0.25));
}
/* Wordmark-PNG i header-sonen — drop-in replacement for .board-page-title.
   Bruker samme posisjon. Imagen-PNG erstatter midlertidig tekst-placeholder. */
.board-page-logo {
  position: absolute;
  top: 16%;  /* match .board-page-title cushion */
  left: 50%;
  width: 56%;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(140, 30, 50, 0.45));
  animation: badgeWordmarkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Music page uses an ICON (square cherry-musical-note) instead of a wide
   wordmark — without this scale-down it dominates as a 200×200 cherry. TODO:
   replace with a proper "MUSIC" wordmark PNG (same red bubble-letter style as
   themes-logo / badges-logo) so we can drop this override. */
.settings-tab-pane[data-pane="music"] .board-page-logo {
  width: 24%;
  top: 13%;  /* slightly higher than text title (16%) — square icon needs less drop to feel centered in banner */
}

/* === SWIPE-ARROWS — hint at swipe-direction. Tap to navigate.
   Bruker den røde arrow.png. Skjules på edges (venstre på page 0, høyre på
   siste). Pulserer subtilt for å fange øye til discoverability. */
.collection-arrow {
  /* !important fordi .settings-card > * tvinger position:relative på alle
     direkte barn av kortet. Vi vil ha viewport-fixed for swipe-piler. */
  position: fixed !important;
  top: 50%;
  width: 52px;
  height: 52px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  z-index: 25;
  -webkit-tap-highlight-color: transparent;
  opacity: 0.95;
  transition: opacity 0.2s ease;
}
.collection-arrow img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 10px rgba(140, 30, 50, 0.55));
}
/* Bounce-nudge animasjon: pilen "vinker" innover for å invitere swipe.
   Høyre-pil dytter til VENSTRE (mot innholdet), venstre-pil til HØYRE. */
.collection-arrow--right {
  right: max(8px, env(safe-area-inset-right));
  transform: translateY(-50%);
  animation: arrowBounceRight 1.4s ease-in-out infinite;
}
.collection-arrow--left {
  left: max(8px, env(safe-area-inset-left));
  transform: translateY(-50%) scaleX(-1);  /* speil-vending */
  animation: arrowBounceLeft 1.4s ease-in-out infinite;
}
@keyframes arrowBounceRight {
  0%, 100% { transform: translate(0, -50%); }
  50%      { transform: translate(-10px, -50%); }
}
@keyframes arrowBounceLeft {
  0%, 100% { transform: translate(0, -50%) scaleX(-1); }
  50%      { transform: translate(-10px, -50%) scaleX(-1); }
}
.collection-arrow:hover { opacity: 1; }
.collection-arrow:active img { transform: scale(0.92); transition: transform 0.1s; }
.collection-arrow.is-disabled {
  opacity: 0 !important;
  pointer-events: none !important;
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .collection-arrow { animation: none; }
}
.board-page-body {
  position: absolute;
  top: 21%;             /* nytt board (v2): body starter rett under banner-separator */
  left: 8%;             /* utvidet fra 6% → 8% så cards holder seg innenfor gold-rim */
  right: 8%;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;   /* start fra top — bedre for grid/list-content */
  gap: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  color: #6a4a30;
  text-align: center;
  padding: 8px 4px;
  line-height: 1.5;
}
/* 2026-05-17: Character-pane har masse content (hero + watermelons + records +
   fun-facts + funny-line). Tidligere falt det "ut" av cream-boardet. Fix: scroll
   inni body-en så ALT bor INNENFOR boardet. Hint scrollbar styling matcher
   cozy palette.
   Wave-8.30: utvidet til ALLE panes — Shop hadde Treasury/Vault som rant ut
   under modal-rammen på iPhone (3 rader bundles > board-h). Nå holder ALT
   seg innenfor cream-boardet og scroller fint inni rammen. */
.settings-tab-pane .board-page-body {
  overflow-y: auto;
  overflow-x: hidden;        /* Wave-8.11: lås horizontal — pan-y under */
  touch-action: pan-y;       /* iPhone: kun vertikal scroll, ikke horizontal swipe */
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 122, 217, 0.4) transparent;
}
.settings-tab-pane .board-page-body::-webkit-scrollbar {
  width: 6px;
}
.settings-tab-pane .board-page-body::-webkit-scrollbar-thumb {
  background: rgba(180, 122, 217, 0.4);
  border-radius: 3px;
}
.settings-tab-pane[data-pane="stats"] .board-page-body::-webkit-scrollbar-track {
  background: transparent;
}
.board-page-placeholder {
  opacity: 0.6;
  font-style: italic;
}

/* === THEME-LIST UI (monetization phase 2 redesign 2026-05-16) ===========
   Container #scene-pack-list lives inside .board-page-body. Refactored from
   thumb-stack → tab-bar + card-list w/ rarity badges + mood-words + status.
   Borderene (board-page, frame) er IKKE rørt. Boards/badges urørt.
   Designspecs konsolidert fra 6 sub-agenter:
   - Card border-radius 24px, gap 12px, height ~140px (UX1)
   - 3-state mutually-exclusive treatments (Graphic) — locked = frosted-glass
     (Dopamine), owned = full color, active = gold rim
   - Tier-palette: oat/sage/apricot/coral-rose/orchid+gold (Color expert)
   - Sort: Owned-first → rarity DESC → alphabetical (UX1)
*/
.scene-pack-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 4px 4px 24px;
  box-sizing: border-box;
  align-items: stretch;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* === WAVE-8.43: Filter tabs som SEGMENTED CONTROL ========================
   Erstatter individuelle 3-slice-pills (som ga horisontale gold-streaks
   utenfor rounded ends) med ÉN cream-gold pill rundt alle 4 segmenter.
   Aktiv tab = glossy pink/coral. Inaktiv = transparent med soft gold
   divider mellom segments. */
.theme-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100%, 430px);
  margin: 4px auto 18px;
  padding: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8e9 0%, #ffe8c6 100%);
  border: 3px solid #e9a939;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(190, 110, 25, 0.16),
    0 5px 12px rgba(110, 55, 20, 0.18);
  overflow: hidden;
  box-sizing: border-box;
  flex-shrink: 0;
}
.theme-tabs::-webkit-scrollbar { display: none; }
.theme-tab {
  position: relative;
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: clamp(13px, 3.6vw, 17px);
  color: #7a4e43;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  cursor: pointer;
  transition: color 180ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.theme-tab:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 22%;
  bottom: 22%;
  width: 1px;
  background: rgba(205, 145, 55, 0.32);
}
.theme-tab:active { transform: scale(0.96); }
.theme-tab.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #ff7da0 0%, #f05378 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(150, 35, 75, 0.22),
    0 4px 8px rgba(180, 45, 85, 0.25);
  text-shadow:
    0 2px 0 rgba(120, 35, 65, 0.25),
    0 0 8px rgba(255, 255, 255, 0.25);
}
.theme-tab.is-active::after { display: none; }
/* Hide ::after on tab BEFORE active so we don't get double-divider next to active */
.theme-tab:has(+ .theme-tab.is-active)::after { display: none; }

/* === Card list — stacked vertical cards =================================== */
.theme-card-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}
/* 2026-05-17 v2: IMMERSIVE postcard layout per Martin — preview-PNG fyller
   HELE kortet som bakgrunn (cover, top-positioned så mest "wow"-faktor av
   bildet vises). Tekst overlay-eres på bunn med gradient-mask for legibility.
   Var: row-flex med liten thumb til venstre + tekst til høyre. */
.theme-card-list .theme-card {
  /* WAVE-8.43: clean CSS frame — bytter ut frame-9slice border-image (som
     ga "heavy/awkward" frames per Martin) med thin cream-gold rim + dual
     inset highlights + 4-step drop-shadow for "stamped paper" feel. */
  display: block;
  position: relative;
  width: 100%;
  height: 168px;
  padding: 0;
  background: #fff1d7;
  border-radius: 26px;
  border: 2px solid rgba(238, 177, 72, 0.95);
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(150, 85, 20, 0.18),
    0 4px 0 rgba(165, 95, 28, 0.20),
    0 10px 18px rgba(70, 35, 20, 0.16);
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.18s ease;
  cursor: pointer;
  box-sizing: border-box;
}
/* Inner cream-rim — second tin ring inside outer gold border for premium depth */
.theme-card-list .theme-card::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 21px;
  border: 1.5px solid rgba(255, 246, 215, 0.85);
  box-shadow:
    inset 0 0 0 1px rgba(170, 95, 28, 0.20),
    inset 0 0 18px rgba(255, 235, 185, 0.25);
  z-index: 3;
  pointer-events: none;
}
.theme-card-list .theme-card:active { transform: scale(0.985); }
.theme-card-list .theme-card.is-active {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(150, 85, 20, 0.18),
    0 0 0 2px rgba(245, 182, 66, 0.7),
    0 4px 0 rgba(165, 95, 28, 0.20),
    0 14px 28px rgba(245, 182, 66, 0.38);
}

/* Preview-PNG fyller hele kortet. Position center-top så mest "wow" av bildet
   leses (himmel + landemerker øverst, ikke krop). Thumb-wrap er bare container
   for thumb + mascot + frost-overlay. */
.theme-card-list .theme-card-thumb-wrap {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;   /* override legacy max-width:130px */
  min-width: 0 !important;
  flex: none !important;        /* override legacy flex:0 0 38% */
  overflow: hidden !important;
  border-radius: inherit;
  z-index: 0;
}
.theme-card-list .theme-card-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;   /* slight upward bias så himmel/landemerker leses */
  border-radius: 0 !important;
  display: block;
}
/* Locked: 50% grayscale + dim, fitted with frost-overlay on top */
.theme-card-list .theme-card.is-locked .theme-card-thumb {
  filter: grayscale(0.7) saturate(0.55) brightness(0.78);
}
/* Owned-but-not-active: full color, subtle dim on hover/active */
.theme-card-list .theme-card:not(.is-active):not(.is-locked) .theme-card-thumb {
  filter: brightness(0.92);
}
.theme-card-list .theme-card.is-active .theme-card-thumb {
  filter: brightness(1.04) saturate(1.08);  /* slightly punched for owned-active */
}

/* WAVE-8.43: LEFT-darkening gradient overlay (var: bottom-only).
   Per Martin spec: title sits left, mascot right. Left needs more
   darkening for text-readability, right stays cleaner so mascot pops. */
.theme-card-list .theme-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg,
      rgba(40, 22, 18, 0.58) 0%,
      rgba(55, 30, 25, 0.36) 42%,
      rgba(255, 210, 145, 0.05) 72%,
      rgba(255, 255, 255, 0.02) 100%),
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(0, 0, 0, 0.04) 100%);
  pointer-events: none;
  z-index: 1;
}

/* WAVE-8.43: title+mood block sits left-bottom (mascot rom høyre).
   Rarity pill (.theme-card-meta-top) pulled OUT av meta-flex til
   top-left via absolute positioning. */
.theme-card-list .theme-card-meta {
  position: absolute !important;
  left: 16px;
  right: 130px;
  /* WAVE-8.53: pull copy higher (bottom 18 → 28 så title sitter høyere) */
  bottom: 32px;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  z-index: 4;
  align-items: flex-start !important;
}
/* WAVE-8.43: .theme-rarity nå DIRECT CHILD av .theme-card (template
   updated). Plassert top-left via absolute positioning. */
.theme-card-list .theme-card > .theme-rarity {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 5;
}
.theme-card-list .theme-card-name {
  font-family: 'Lilita One', cursive !important;
  font-size: 22px !important;
  /* Default fallback color (Common cream). Per-pack overrides below match
     dominant fruit color for each theme. */
  color: #FFF4E6 !important;
  text-shadow:
    0 2px 4px rgba(0,0,0,0.85),
    0 0 12px rgba(0,0,0,0.6),
    0 1px 0 rgba(0,0,0,0.7) !important;
  margin: 2px 0 !important;
  line-height: 1.1 !important;
}
/* Per-pack title color — 2026-05-17: matcher dominant frukt/theme palette.
   Saturert nok å lese på den 72%-dark gradient bunnen av kortet. */
.theme-card-list .theme-card[data-pack-id="apricot-morning"]    .theme-card-name { color: #FFB347 !important; }  /* warm apricot */
.theme-card-list .theme-card[data-pack-id="kiwi-hollow"]        .theme-card-name { color: #9EE07A !important; }  /* sage kiwi */
.theme-card-list .theme-card[data-pack-id="peach-mist"]         .theme-card-name { color: #FFB8B8 !important; }  /* dusty peach */
.theme-card-list .theme-card[data-pack-id="strawberry-sunrise"] .theme-card-name { color: #FF6B7A !important; }  /* coral strawberry */
.theme-card-list .theme-card[data-pack-id="citrus-lanterns"]    .theme-card-name { color: #FFD86B !important; }  /* golden citrus */
.theme-card-list .theme-card[data-pack-id="plum-dusk"]          .theme-card-name { color: #D4A0F0 !important; }  /* orchid plum */
.theme-card-list .theme-card[data-pack-id="melon-beach"]        .theme-card-name { color: #FF8FA3 !important; }  /* watermelon-pink */
.theme-card-list .theme-card-mood {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-style: italic !important;
  font-size: 12.5px !important;
  color: rgba(255, 244, 230, 0.92) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.65) !important;
  letter-spacing: 0.4px !important;
}
/* WAVE-8.43: Equip-knapp MOVED FRA top-right TIL bottom-right per Martin
   spec. Mascot sitter over knappen i bottom-right corner — knapp anchors
   nede så user-flow er: read title → mascot → tap Equip. */
.theme-card-list .theme-card .theme-status {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 5;
  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 0 0 2px rgba(255, 255, 255, 0.65) inset;
}

/* WAVE-8.43: mascot stacked ABOVE Equip-button på right side. */
.theme-card-list .theme-card-mascot {
  position: absolute;
  top: 16%;
  right: 14px;
  width: clamp(70px, 18vw, 100px);
  height: auto;
  max-height: 70%;
  object-fit: contain;
  pointer-events: none;
  z-index: 3;
  filter:
    drop-shadow(0 6px 8px rgba(40, 20, 30, 0.42))
    drop-shadow(0 0 8px rgba(255, 255, 240, 0.38));
  animation: mascotIdle 4.5s ease-in-out infinite;
}
.theme-card-list .theme-card.is-locked .theme-card-mascot {
  filter:
    saturate(0.55) brightness(0.92)
    drop-shadow(0 4px 6px rgba(40, 20, 30, 0.3));
}
@keyframes mascotIdle {
  0%, 100% { transform: translateY(0)    rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .theme-card-list .theme-card-mascot { animation: none; }
}
/* Thumb-wrap må tillate mascot overflow */
.theme-card-list .theme-card-thumb-wrap { overflow: visible; }
.theme-card-list .theme-card-thumb { border-radius: 16px; }   /* behold rounded crop på selve thumben */
.theme-card-list .theme-card-frost { border-radius: 16px; }

/* EXCLUSIVE TIER glow + sparkles (epic + legendary) ===================== */
.theme-card-list .theme-card.is-exclusive {
  /* Subtle extra outer-glow på toppen av eksisterende per-pack gradient */
  box-shadow:
    0 1px 2px rgba(74, 38, 50, 0.06),
    0 8px 24px rgba(255, 180, 110, 0.4),
    0 0 0 1px rgba(255, 220, 130, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* 6 floating sparkles rundt exclusive cards — forskjellige posisjoner +
   staggered delays så de blinker ujevnt, ikke synkronisert. */
.theme-card-list .theme-card-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #fff8c4 50%, rgba(255, 220, 100, 0) 100%);
  pointer-events: none;
  opacity: 0;
  z-index: 4;
  animation: cardSparkle 3.2s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(255, 230, 140, 0.8));
}
.theme-card-list .theme-card-sparkle--0 { top: 6%;  left: 42%; animation-delay: 0s;   }
.theme-card-list .theme-card-sparkle--1 { top: 14%; right: 8%; animation-delay: 0.5s; width: 5px; height: 5px; }
.theme-card-list .theme-card-sparkle--2 { bottom: 12%; right: 24%; animation-delay: 1.1s; width: 7px; height: 7px; }
.theme-card-list .theme-card-sparkle--3 { bottom: 6%; left: 38%; animation-delay: 1.6s; }
.theme-card-list .theme-card-sparkle--4 { top: 38%; right: 2%; animation-delay: 2.1s; width: 4px; height: 4px; }
.theme-card-list .theme-card-sparkle--5 { top: 60%; left: 35%; animation-delay: 2.6s; width: 5px; height: 5px; }
@keyframes cardSparkle {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  30%      { opacity: 1; }
  60%      { opacity: 0.7; transform: scale(1.15); }
  90%      { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-card-list .theme-card-sparkle { animation: none; opacity: 0.4; }
}

/* === Per-pack card-bg gradients (2026-05-16) =============================
   Hvert tema-card får sin egen gradient som matcher scene-bg-en. Dramatikken
   eskalerer med rarity: common = subtil 2-stop, uncommon/rare = 3-stop
   diagonal, epic = 3-stop + glow, legendary = 4-stop radial + animert
   shimmer + ekstra halo. */

/* COMMON tier (Classic, Apricot Morning) — humble peach/cream */
.theme-card-list .theme-card[data-pack-id="none"] {
  background: linear-gradient(135deg, #fff8ed 0%, #fce8d8 100%);
}
.theme-card-list .theme-card[data-pack-id="apricot-morning"] {
  background: linear-gradient(135deg, #fff0d6 0%, #ffd0a0 60%, #ffb87a 100%);
  border-color: rgba(255, 184, 122, 0.5);
}
/* UNCOMMON tier (Kiwi Hollow) — fresh sage-green */
.theme-card-list .theme-card[data-pack-id="kiwi-hollow"] {
  background: linear-gradient(135deg, #f5fce8 0%, #d5ecc0 50%, #a8ce80 100%);
  border-color: rgba(168, 206, 128, 0.55);
}
/* RARE tier (Peach Mist, Strawberry Sunrise) — soft pink/coral, 3-stop */
.theme-card-list .theme-card[data-pack-id="peach-mist"] {
  background: linear-gradient(135deg, #fff0f5 0%, #fdd0e0 50%, #f0a0c8 100%);
  border-color: rgba(240, 160, 200, 0.55);
}
.theme-card-list .theme-card[data-pack-id="strawberry-sunrise"] {
  background: linear-gradient(135deg, #ffe8dc 0%, #ffb4a0 50%, #ff7866 100%);
  border-color: rgba(255, 120, 102, 0.55);
}
/* EPIC tier (Citrus Lanterns, Plum Dusk) — vibrant w/ glow */
.theme-card-list .theme-card[data-pack-id="citrus-lanterns"] {
  background: linear-gradient(135deg, #fff2c4 0%, #ffb060 45%, #f06820 100%);
  border-color: rgba(240, 104, 32, 0.6);
  box-shadow:
    0 1px 2px rgba(74, 38, 50, 0.06),
    0 8px 20px rgba(240, 104, 32, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.theme-card-list .theme-card[data-pack-id="plum-dusk"] {
  background: linear-gradient(135deg, #f0e4f8 0%, #c898e8 50%, #7a4ab8 100%);
  border-color: rgba(122, 74, 184, 0.6);
  box-shadow:
    0 1px 2px rgba(74, 38, 50, 0.06),
    0 8px 20px rgba(122, 74, 184, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
/* LEGENDARY tier (Melon Beach) — sunset radial + animert shimmer + ekstra halo */
.theme-card-list .theme-card[data-pack-id="melon-beach"] {
  background:
    radial-gradient(ellipse at top right, rgba(255, 220, 100, 0.55) 0%, transparent 60%),
    radial-gradient(ellipse at bottom left, rgba(255, 100, 140, 0.4) 0%, transparent 60%),
    linear-gradient(135deg, #ffe8d0 0%, #ffb088 35%, #ff7090 70%, #c44878 100%);
  border-color: #ff7090;
  box-shadow:
    0 1px 2px rgba(74, 38, 50, 0.06),
    0 8px 22px rgba(255, 112, 144, 0.4),
    0 0 0 2px rgba(255, 220, 100, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  position: relative;
}
/* Animated shimmer sweep across the legendary card */
.theme-card-list .theme-card[data-pack-id="melon-beach"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  background-size: 250% 100%;
  animation: legendaryShimmer 4s ease-in-out infinite;
  pointer-events: none;
  border-radius: inherit;
  mix-blend-mode: overlay;
}
@keyframes legendaryShimmer {
  0%, 100% { background-position: 200% 50%; }
  50%      { background-position: -100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-card-list .theme-card[data-pack-id="melon-beach"]::after { animation: none; opacity: 0.3; }
}

/* Text-readability fix for darker gradients (epic + legendary).
   White-ish name + brighter mood-words mot mørk bakgrunn. */
.theme-card-list .theme-card[data-pack-id="citrus-lanterns"] .theme-card-name,
.theme-card-list .theme-card[data-pack-id="plum-dusk"]       .theme-card-name,
.theme-card-list .theme-card[data-pack-id="melon-beach"]     .theme-card-name {
  color: #ffffff;
  text-shadow: 0 1px 3px rgba(60, 20, 40, 0.55);
}
.theme-card-list .theme-card[data-pack-id="citrus-lanterns"] .theme-card-mood,
.theme-card-list .theme-card[data-pack-id="plum-dusk"]       .theme-card-mood,
.theme-card-list .theme-card[data-pack-id="melon-beach"]     .theme-card-mood {
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(60, 20, 40, 0.5);
}

.theme-card-thumb-wrap {
  position: relative;
  flex: 0 0 38%;         /* responsive: ~38% of card width, slim on iPhone */
  max-width: 130px;
  min-width: 100px;
  height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(232, 220, 200, 0.4);
}
.theme-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* crops portrait bg to landscape window */
  object-position: center 35%;  /* favor scene's top-feature (sky/sunrise) */
  display: block;
}
/* Frosted glass overlay for locked cards — beautiful, reachable, not punitive */
.theme-card-frost {
  position: absolute;
  inset: 0;
  background: rgba(255, 245, 230, 0.32);
  backdrop-filter: blur(2px) saturate(0.6);
  -webkit-backdrop-filter: blur(2px) saturate(0.6);
  border-radius: 16px;
  pointer-events: none;
}
.theme-card-meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px 4px 4px 0;
  min-width: 0;
}
.theme-card-meta-top { display: flex; align-items: center; }

.theme-rarity {
  /* WAVE-8.43: bumpet for større "world postcard" theme-cards. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  padding: 5px 11px 6px;
  border-radius: 999px;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.5px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(0, 0, 0, 0.10),
    0 3px 6px rgba(40, 20, 40, 0.18);
}
/* Tier palette v2 (Martin override 2026-05-16):
   Rare = blue, Epic = purple, Legendary = orange. Cozy-warm tones still,
   but each tier reads as a distinct rarity-color (industry-standard rainbow). */
.theme-rarity--common    { background: #e8dcc4; color: #7a6650; border: 1px solid rgba(0,0,0,0.08); }
.theme-rarity--uncommon  { background: #c9dcbd; color: #3f5a35; border: 1px solid rgba(0,0,0,0.08); }
.theme-rarity--rare      { background: linear-gradient(180deg, #7ab8e0 0%, #5a9cce 100%); color: #ffffff; border: 1.5px solid #4a86b8; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); }
.theme-rarity--epic      { background: linear-gradient(180deg, #b389e6 0%, #9265cf 100%); color: #ffffff; border: 1.5px solid #7c52b8; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); }
.theme-rarity--legendary { background: linear-gradient(180deg, #ffb066 0%, #ff8533 100%); color: #ffffff; border: 1.5px solid #e06820; box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); }
.theme-rarity--mythic    {
  background: linear-gradient(135deg, #ff5fa8 0%, #ff8ed8 100%);
  color: #ffffff;
  border: 1.5px solid #e6c98a;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}

.theme-card-name {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #4a2632;
  letter-spacing: 0.2px;
  margin-top: 4px;
  line-height: 1.15;
  /* 2-line clamp so "Strawberry Sunrise" / "Citrus Lanterns" wraps neatly
     on narrow iPhone viewports instead of cutting off mid-word. */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: normal;
}
.theme-card-mood {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  color: #a08878;
  margin: 2px 0 6px;
  line-height: 1.25;
}

/* Status pill — 3 states */
.theme-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 7px 14px;
  border-radius: 18px;
  border: none;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
  align-self: flex-start;
  -webkit-tap-highlight-color: transparent;
}
.theme-status:active { transform: scale(0.95); }
.theme-status--using {
  background: linear-gradient(180deg, #ff8aa6 0%, #e85a78 100%);
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(120, 20, 40, 0.4);
  box-shadow: 0 2px 6px rgba(232, 90, 120, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  cursor: default;
}
.theme-status--owned {
  background: linear-gradient(180deg, #c9dcbd 0%, #a8c89a 100%);
  color: #3f5a35;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
/* Wave-8.29: Equip-knapp gold (var sage-green → brøt cozy gold-pink brand
   ifølge UX-audit). Gold matcher ribbon + BEST VALUE-badge + nav-icon
   active ring. Dark-brown text-color for kontrast på lys gold. */
.theme-status--equip {
  background: linear-gradient(180deg, #ffd966 0%, #f5b642 100%);
  color: #5a3a1a;
  text-shadow: 0 1px 1px rgba(255, 240, 200, 0.5);
  border: 1.5px solid #d4932d;
  box-shadow:
    0 2px 6px rgba(232, 142, 100, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 0 rgba(120, 70, 20, 0.12);
}
.theme-status--equip:hover { filter: brightness(1.06); }
.theme-status--locked {
  background: rgba(232, 220, 200, 0.55);
  color: #4a2632;
  border: 1px solid rgba(190, 130, 100, 0.25);
}
.theme-status--locked.theme-status--affordable {
  background: linear-gradient(180deg, #fff0e8 0%, #fad5ad 100%);
  color: #6b3410;
}
.theme-status--locked.theme-status--unaffordable {
  opacity: 0.78;
}
.theme-status-icon { width: 16px; height: 16px; object-fit: contain; filter: drop-shadow(0 0 3px rgba(255, 130, 180, 0.5)); }

.theme-empty {
  padding: 32px 18px;
  text-align: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #a08878;
  line-height: 1.5;
}

/* === Theme purchase modal — "super-tasty" v2 (2026-05-16) ================
   Cream-paper card med stor thumbnail-hero, gold ruby-accent på toppen
   (matcher cream-rim frames i hub), magenta crystal-glow rundt CTA.
   "Yours to keep forever"-formulering med soft sparkles bak. */
.theme-purchase-overlay {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(120, 40, 80, 0.55) 0%, rgba(43, 28, 50, 0.78) 100%);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: auto;
  padding: 16px;
  box-sizing: border-box;
}
.theme-purchase-overlay.is-open { opacity: 1; }
.theme-purchase-modal {
  /* Cream-paper m/ subtle peach-blush gradient — matches board.png palette */
  background:
    radial-gradient(ellipse at top, #fff5e6 0%, #fce8d8 70%),
    #fce8d8;
  border: 3px solid #f5b642;
  border-radius: 32px;
  padding: 36px 22px 22px;        /* top-padding for gem-decoration overflow */
  max-width: 360px;
  width: 100%;
  box-shadow:
    0 0 0 3px rgba(245, 182, 66, 0.25),
    0 24px 60px rgba(120, 30, 80, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.6);
  position: relative;
  transform: scale(0.88) translateY(20px);
  transition: transform 0.36s cubic-bezier(0.34, 1.65, 0.64, 1);
  text-align: center;
  overflow: visible;
}
.theme-purchase-overlay.is-open .theme-purchase-modal { transform: scale(1) translateY(0); }
/* Gem-decoration at the top of the modal (matches cream-rim ruby) */
.theme-purchase-modal::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  background:
    radial-gradient(circle at 35% 35%, #ffd2e0 0%, #ff5fa8 50%, #c93d72 100%);
  border-radius: 50%;
  border: 2.5px solid #f5b642;
  box-shadow:
    0 0 14px rgba(255, 95, 168, 0.65),
    inset 0 -2px 4px rgba(120, 30, 70, 0.5);
}
/* Sparkle bg behind content */
.theme-purchase-modal::after {
  content: "";
  position: absolute;
  inset: 12px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 200, 230, 0.5) 0%, transparent 8%),
    radial-gradient(circle at 80% 60%, rgba(255, 220, 170, 0.4) 0%, transparent 6%),
    radial-gradient(circle at 50% 90%, rgba(255, 180, 220, 0.45) 0%, transparent 5%);
  pointer-events: none;
  border-radius: 26px;
  opacity: 0.7;
  z-index: 0;
}
.theme-purchase-modal > * { position: relative; z-index: 1; }

.theme-purchase-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(120, 60, 80, 0.15);
  border: 1.5px solid rgba(120, 60, 80, 0.2);
  font-size: 22px;
  color: #4a2632;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
  transition: transform 0.15s ease, background 0.15s ease;
}
.theme-purchase-close:hover { background: rgba(120, 60, 80, 0.25); transform: scale(1.06); }
.theme-purchase-close:active { transform: scale(0.92); }

.theme-purchase-thumb {
  width: 100%;
  max-width: 280px;
  height: 160px;
  object-fit: cover;
  object-position: center 35%;
  border-radius: 18px;
  margin: 0 auto 16px;
  display: block;
  border: 2px solid rgba(245, 182, 66, 0.45);
  box-shadow: 0 6px 18px rgba(120, 50, 80, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.theme-purchase-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  color: #4a2632;
  margin: 0 0 8px;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.theme-purchase-body {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #6b4a5a;
  margin: 0 0 20px;
  line-height: 1.5;
  padding: 0 6px;
}
.theme-purchase-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.theme-purchase-btn {
  flex: 1 1 auto;
  padding: 14px 16px;
  border-radius: 18px;
  border: none;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: transform 0.15s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-purchase-btn:active { transform: scale(0.96); }
.theme-purchase-btn--cancel {
  background: rgba(120, 80, 90, 0.14);
  color: #6b4a5a;
  border: 1.5px solid rgba(120, 80, 90, 0.18);
}
.theme-purchase-btn--cancel:hover { background: rgba(120, 80, 90, 0.22); }
.theme-purchase-btn--confirm,
.theme-purchase-btn--shop {
  background: linear-gradient(180deg, #ff85a3 0%, #e8466a 100%);
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(120, 20, 40, 0.5);
  border: 1.5px solid #c43055;
  box-shadow:
    0 0 14px rgba(255, 95, 168, 0.45),
    0 4px 12px rgba(232, 90, 120, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 0 rgba(120, 20, 40, 0.18);
  animation: confirmBtnPulse 2.4s ease-in-out infinite;
}
@keyframes confirmBtnPulse {
  0%, 100% { box-shadow: 0 0 14px rgba(255, 95, 168, 0.45), 0 4px 12px rgba(232, 90, 120, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(120, 20, 40, 0.18); }
  50%      { box-shadow: 0 0 22px rgba(255, 95, 168, 0.7),  0 6px 16px rgba(232, 90, 120, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 0 rgba(120, 20, 40, 0.18); }
}
.theme-purchase-btn--confirm:hover,
.theme-purchase-btn--shop:hover { filter: brightness(1.06); }
.theme-purchase-btn img { width: 20px; height: 20px; object-fit: contain; filter: drop-shadow(0 0 4px rgba(255, 200, 230, 0.6)); }

/* === STATS BOARD (cozy recipe-book layout per gamer-agent 2026-05-16) =====
   Hero: Watermelons Grown (big juicy number). Records + Fun Facts cards.
   Rotating fun-fact at bottom. No progress-bars, no urgency. */
.stats-board {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 6px 0;
  box-sizing: border-box;
  font-family: 'Nunito', system-ui, sans-serif;
}
.stats-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* Wave-12.22: collection-theme-preview-slice-* 3-piece frame overlay
     erstatter gammel frame-9slice border-image (PNG flyttet til /backup). */
  padding: 22px 28px 24px;
  background: #fff5e2;
  border: none;
  border-radius: 24px;
  filter: drop-shadow(0 4px 14px rgba(255, 160, 100, 0.22));
  isolation: isolate;
}
.stats-hero-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(40, 80, 30, 0.3));
  animation: heroBob 4s ease-in-out infinite;
}
@keyframes heroBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) { .stats-hero-icon { animation: none; } }
.stats-hero-num {
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: 44px;
  line-height: 1;
  color: #c9381c;
  -webkit-text-stroke: 2px #fff0c4;
  paint-order: stroke fill;
  text-shadow: 0 3px 0 #8e2010, 0 6px 10px rgba(120, 30, 10, 0.4);
  font-variant-numeric: tabular-nums;
}
.stats-hero-label {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #6a4530;
  letter-spacing: 0.4px;
  margin-top: 4px;
}
.stats-hero-sub {
  font-size: 12px;
  font-weight: 500;
  color: rgba(106, 69, 48, 0.7);
  margin-top: 2px;
  font-style: italic;
}

.stats-section {
  /* 2026-05-18: bg + border + shadow matched to .stats-hero (Watermelons
     Grown card) per Martin. Warm peach gradient ties all three character-
     screen cards together visually. */
  background: linear-gradient(180deg, #fff5e0 0%, #fce0c8 100%);
  border: 2px solid rgba(255, 180, 100, 0.5);
  border-radius: 22px;
  padding: 10px 14px 12px;
  box-shadow:
    0 4px 14px rgba(255, 160, 100, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.stats-section-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #b87850;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px dashed rgba(184, 120, 80, 0.25);
}
.stat-line {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: 14px;
  color: #4a2632;
}
.stat-line + .stat-line { border-top: 1px dotted rgba(184, 120, 80, 0.15); }
.stat-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
}
.stat-label {
  flex: 1 1 auto;
  font-weight: 600;
  color: #6a4530;
}
.stat-value {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #4a2632;
}
.stats-fun-fact {
  text-align: center;
  padding: 10px 14px;
  margin-top: 4px;
  font-size: 12.5px;
  font-style: italic;
  color: rgba(74, 38, 50, 0.7);
  line-height: 1.4;
  background: rgba(255, 245, 224, 0.6);
  border-radius: 14px;
  border: 1px dashed rgba(184, 120, 80, 0.3);
}

/* === CHARACTER SUB-TABS (Wave-7.1, 2026-05-19) ============================
   3-pill toggle nederst på Character-paneltittelen: Character / Fruits /
   Badges. Wave-8.41 polish-pass: én premium framed segmented control
   istedenfor 3 løse 9-slice-knapper.
   ========================================================================== */
.character-subtabs {
  /* WAVE-8.41 → 8.42: tykkere gold rim (2 → 4px) per Martin. */
  display: flex;
  gap: 4px;
  margin: 0 auto 14px;
  max-width: 100%;
  padding: 5px;
  background: linear-gradient(180deg, #fff5e2 0%, #fae0c2 100%);
  border-radius: 999px;
  border: 4px solid #e4b176;
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.7),
    inset 0 -2px 3px rgba(184, 120, 80, 0.12),
    0 3px 8px rgba(180, 110, 70, 0.18),
    0 1px 0 rgba(255, 245, 220, 0.6);
}
.character-subtab {
  /* WAVE-8.41: FLATE segmenter inni shared outer-frame. Ingen individuelle
     9-slice borders — bare transparent fill (inactive) eller pink gloss
     (active). Cleaner, mer "segmented control". */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 999px;
  color: rgba(120, 78, 56, 0.72);
  font: 600 13px 'Nunito', sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.character-subtab:hover:not(.is-active) {
  background: rgba(255, 220, 180, 0.35);
  color: rgba(80, 48, 36, 0.85);
}
.character-subtab.is-active {
  /* Glossy pink-coral active: gradient + inner highlight + gold rim +
     soft drop-shadow. Føles "stamped premium" segment. */
  background:
    linear-gradient(180deg, #ff9eb0 0%, #ff7088 55%, #ee5e7a 100%);
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(150, 30, 50, 0.4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 0 rgba(180, 30, 60, 0.18),
    0 2px 5px rgba(232, 80, 110, 0.4),
    0 0 0 1.5px rgba(220, 150, 80, 0.6);
}
.character-subtab-icon {
  /* WAVE-8.42: img-tag icons (character/fruits/badges PNG) erstatter emoji.
     Sirkulær crop + drop-shadow gir small luxury portrait-feel. */
  width: 22px;
  height: 22px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(120, 70, 40, 0.25));
}
.character-subtab.is-active .character-subtab-icon {
  /* Active state: subtle inner white ring så icon "shines" mot pink-bg */
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.55);
}
.character-subtab-label { font-size: 12.5px; letter-spacing: 0.02em; }

/* Sub-pane swap: only .is-active is visible */
.character-subpane { display: none; }
.character-subpane.is-active { display: block; animation: subpane-fade-in 220ms ease both; }
@keyframes subpane-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.character-subpane-placeholder {
  text-align: center;
  padding: 60px 28px 80px;
  color: rgba(74, 38, 50, 0.65);
}
.character-subpane-placeholder-icon { font-size: 56px; margin-bottom: 16px; }
.character-subpane-placeholder-title {
  font: 700 17px 'Lilita One', cursive;
  color: rgba(74, 38, 50, 0.85);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.character-subpane-placeholder-sub {
  font: 400 13px/1.5 'Nunito', sans-serif;
  opacity: 0.8;
  max-width: 240px;
  margin: 0 auto;
}

/* === STATS 4-GRID CARDS (Wave-7.1) ========================================
   Erstatter de gamle flate stat-lines (Records + Fun Facts sections) med
   en 2×2 grid av cozy cards. Hver card har et tematisk ikon (PNG fra
   assets/), label, og value. Warm peach gradient matcher .stats-hero. */
.stats-grid-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.stats-grid-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Wave-12.22: 3-piece slice frame overlay (samme som theme-cards) */
  padding: 22px 20px 18px;
  background: #fff5e2;
  border: none;
  border-radius: 20px;
  filter: drop-shadow(0 2px 6px rgba(184, 120, 80, 0.14));
  text-align: center;
  min-height: 130px;
  isolation: isolate;
}

/* Stats-card frame overlay (Wave-12.22) — collection-theme-preview-slice-*
   3-piece horizontal overlay rundt content. Frame z-2, content z-1. */
.stats-card-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
.stats-card-frame-left,
.stats-card-frame-right {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  display: block;
  user-select: none;
}
.stats-card-frame-mid {
  flex: 1 1 0;
  min-width: 0;
  background: url('assets/collection-theme-preview-slice-mid.png') center / 100% 100% no-repeat;
}
.stats-hero > *:not(.stats-card-frame),
.stats-grid-card > *:not(.stats-card-frame) {
  position: relative;
  z-index: 1;
}
.stats-grid-card-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(184, 120, 80, 0.25));
  margin-bottom: 6px;
}
.stats-grid-card-label {
  font: 600 11.5px 'Nunito', sans-serif;
  color: rgba(74, 38, 50, 0.7);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.stats-grid-card-value {
  font: 700 17px 'Lilita One', cursive;
  color: rgba(74, 38, 50, 0.95);
  letter-spacing: 0.01em;
  line-height: 1.15;
}
/* Wave-13.34 (dopamine pass): "0" stats foles deflating — dim color +
   tighter sub-hint så det leser som "potential", ikke "failure". */
.stats-grid-card-value.is-zero {
  color: rgba(74, 38, 50, 0.55);
}
/* Earned values popper med warm-gold gradient når > 0 (reward-feel) */
.stats-grid-card-value.is-earned {
  background: linear-gradient(180deg, #f7b94a 0%, #d4881a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 1px 0 #fff5d8) drop-shadow(0 2px 3px rgba(180, 100, 30, 0.35));
}
/* Hero-num: samme dopamine-rule — 0 dimmer, > 0 gold-glow */
.stats-hero-num.is-zero {
  color: rgba(180, 130, 90, 0.7);
  -webkit-text-stroke-color: #fff5d8;
  text-shadow: 0 2px 0 rgba(120, 80, 40, 0.25), 0 4px 8px rgba(0, 0, 0, 0.15);
}
.stats-grid-card-sub {
  display: block;
  font: 400 10.5px 'Nunito', sans-serif;
  color: rgba(74, 38, 50, 0.55);
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: none;
}

/* === SHOP BOARD (inside collection-board, page-idx 3) ====================
   Lives in .board-page-body. Balance-chip top, 2×3 bundle grid below.
   Per-tier glow + particles via .shop-bundle--tier-N classes (idx 0-5).
   Pouch (tier 0) = subtle, Vault (tier 5) = full magenta radiance + sparkles. */
.shop-board-balance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Wave-8.6: 3-slice pill med 9slice-thicker (canvas-cropped).
     Wave-8.33: bumpet height 40 → 50px + padding/font opp.
     Wave-8.38: tilbake til pre-8.37 look. Erstatter overflow:hidden +
     border-radius 999px (som komprimerte pill til "lang og tynn"-look)
     med clip-path som klipper kun middle's stretch-lines uten å påvirke
     box-sizing eller drop-shadow. */
  height: 50px;
  padding: 8px 28px;
  margin: 0 auto 14px;
  box-sizing: border-box;
  background:
    var(--pill-cap-l) left center / auto 100% no-repeat,
    var(--pill-cap-r) right center / auto 100% no-repeat,
    var(--pill-cap-m) center / 100% 100% no-repeat;
  width: fit-content;
  clip-path: inset(0 round 999px);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #4a2632;
  filter: drop-shadow(0 3px 6px rgba(232, 90, 120, 0.22));
}
.shop-board-balance img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255, 130, 180, 0.6)); }
.shop-board-balance-label {
  font-size: 11px;
  color: #8a5a4a;
  margin-left: 4px;
  font-weight: 600;
}

/* Shop-bg DROPPED 2026-05-16 per Martin "litt rart med opacity bak kistene".
   Cards' egne per-tier gradients gir nok visual interest uten ekstra layer. */
.shop-board-bg { display: none; }
/* All board-page-body children sit ABOVE the bg-image */
.board-page-body > *:not(.shop-board-bg) { position: relative; z-index: 1; }

.shop-bundle-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
}
.shop-bundle {
  /* Wave-8.36: HELT NYTT APPROACH per Martin's annotated mockup.
     Hele frame-slice.png som background-image med aspect-ratio match.
     Wave-8.39: layout-rytmen polert — chest+count grupperes via gap,
     price-knapp pushed til bunn via margin-top: auto. */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  aspect-ratio: 941 / 1672;
  padding: 7% 19% 11%;   /* WAVE-8.53: pull content opp (var 14%) */
  background: url('assets/frame-slice.png') center / 100% 100% no-repeat;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Fredoka', system-ui, sans-serif;
  overflow: visible;
}
/* Wave-8.39: price pushed til bunn — gap håndterer chest+count+label */
.shop-bundle .shop-bundle-price {
  margin-top: auto;
}
/* Wave-8.15: Drop pink/magenta backgrounds. All bundles share neutral
   cream-bg fra default .shop-bundle. Per-tier "value" formidles via
   EKSPONENTIELL pink-glow (subtle på Pouch → vibrant magenta på Vault).
   Glow rendres via filter: drop-shadow så den følger 9-slice frame's
   rounded corners istedenfor box-shadow's rect. */
/* Wave-13.33 (gamer pass): tier-0 (Pouch) får subtle warm halo så den
   ikke føles "naken" mot Bowl/Vault's pink-glows. Cream-tone (NOT pink)
   for å bevare tier-ladder differentiation — Pouch er warm-cream, Bowl
   er soft-pink, Vault er vibrant-magenta. Halo eskalerer per tier. */
.shop-bundle--tier-0 {
  filter:
    drop-shadow(0 3px 6px rgba(184, 120, 80, 0.22))
    drop-shadow(0 0 8px rgba(255, 230, 180, 0.45));
}
.shop-bundle--tier-1 {
  filter:
    drop-shadow(0 3px 6px rgba(184, 120, 80, 0.2))
    drop-shadow(0 0 10px rgba(255, 180, 200, 0.35));
}
.shop-bundle--tier-2 {
  filter:
    drop-shadow(0 4px 8px rgba(232, 142, 168, 0.25))
    drop-shadow(0 0 14px rgba(255, 150, 180, 0.45));
}
.shop-bundle--tier-3 {
  filter:
    drop-shadow(0 5px 10px rgba(232, 122, 138, 0.32))
    drop-shadow(0 0 18px rgba(255, 130, 175, 0.55));
}
.shop-bundle--tier-4 {
  filter:
    drop-shadow(0 6px 12px rgba(232, 90, 138, 0.4))
    drop-shadow(0 0 24px rgba(255, 110, 170, 0.65));
}
.shop-bundle--tier-5 {
  filter:
    drop-shadow(0 8px 16px rgba(197, 69, 149, 0.5))
    drop-shadow(0 0 32px rgba(255, 90, 175, 0.75))
    drop-shadow(0 0 50px rgba(255, 120, 200, 0.4));
}
.shop-bundle:active { transform: scale(0.96); }

.shop-bundle.is-best-value {
  /* Wave-8.15: BEST VALUE er nå Vault (tier-5). Behold scale-up + badge,
     drop bg/border-overrides — la tier-5 glow shine through. Gull-tone
     drop-shadow legges på toppen av tier-5's magenta-glow for premium-feel. */
  transform: scale(1.05);
  filter:
    drop-shadow(0 8px 16px rgba(197, 69, 149, 0.5))
    drop-shadow(0 0 32px rgba(255, 90, 175, 0.75))
    drop-shadow(0 0 18px rgba(255, 215, 100, 0.6))
    drop-shadow(0 0 50px rgba(255, 120, 200, 0.45));
}
.shop-bundle.is-best-value:active { transform: scale(1.0); }

.shop-bundle-best-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 9px;
  background: linear-gradient(180deg, #ffd966 0%, #f5b642 100%);
  color: #5a3a1a;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.6px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 5px rgba(120, 80, 20, 0.4);
  z-index: 3;
}

/* Wave-13.2 (audit Batch 2.5): POPULAR-tag på Bowl-bundle ($9.99 mid-tier
   anchor). Coral-pink gradient i stedet for gold så det visuelt er distinkt
   fra BEST VALUE (gold = top-tier). Samme størrelse + posisjon. */
.shop-bundle-popular-badge {
  /* Wave-13.33 (3-expert pass): ribbon-tag som sitter OPPÅ gold-rim
     top-edge (ikke i card-padding-area der den floater i row-gap).
     Negativ y-inset så den overlapper kantlinjen → leser som integrert
     ornament, ikke sticker.
     Center-top + lett rotation = "won this position" vibe (Royal Match/
     Toon Blast tier-tag DNA). */
  position: absolute;
  top: -8px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  padding: 4px 14px 5px;
  background: linear-gradient(180deg, #ff9bb6 0%, #f2658d 100%);
  color: #5a1a2e;
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 3px 8px rgba(160, 40, 80, 0.5),
    0 0 0 1px rgba(120, 30, 60, 0.15);
  z-index: 4;
}

.shop-bundle-chest-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
/* Per-tier magenta glow — radial halo behind chest. Intensity scales w/ tier. */
.shop-bundle-glow {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 90, 170, 0.35) 0%, rgba(255, 90, 170, 0) 65%);
  animation: shopGlowPulse 3.4s ease-in-out infinite;
}
.shop-bundle--tier-0 .shop-bundle-glow { opacity: 0;    }
.shop-bundle--tier-1 .shop-bundle-glow { opacity: 0.35; }
.shop-bundle--tier-2 .shop-bundle-glow { opacity: 0.55; }
.shop-bundle--tier-3 .shop-bundle-glow { opacity: 0.75; transform: scale(1.05); }
.shop-bundle--tier-4 .shop-bundle-glow {
  opacity: 0.95; transform: scale(1.1);
  background: radial-gradient(ellipse at center, rgba(255, 60, 150, 0.55) 0%, rgba(255, 80, 160, 0.25) 35%, rgba(255, 80, 160, 0) 70%);
}
.shop-bundle--tier-5 .shop-bundle-glow {
  opacity: 1; transform: scale(1.15);
  background:
    radial-gradient(ellipse at center, rgba(255, 40, 140, 0.7) 0%, rgba(255, 80, 180, 0.4) 30%, rgba(255, 80, 180, 0) 65%),
    radial-gradient(circle at 30% 30%, rgba(255, 200, 60, 0.35) 0%, rgba(255, 200, 60, 0) 50%);
  animation: shopGlowPulseVault 2.6s ease-in-out infinite;
}
@keyframes shopGlowPulse {
  0%, 100% { filter: brightness(1) blur(3px);   }
  50%      { filter: brightness(1.25) blur(2px); }
}
@keyframes shopGlowPulseVault {
  0%, 100% { filter: brightness(1) blur(3px); transform: scale(1.15) rotate(0deg); }
  50%      { filter: brightness(1.5) blur(2px); transform: scale(1.22) rotate(2deg); }
}

/* Sparkle particles — orbital cluster around chest, escalating density per tier */
.shop-bundle-sparkle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffb3d6 50%, rgba(255, 130, 180, 0) 100%);
  pointer-events: none;
  transform: rotate(var(--a)) translateY(calc(-1 * var(--d)));
  opacity: 0;
  animation: shopSparkle 2.5s ease-in-out infinite;
  animation-delay: var(--del);
  z-index: 1;
  filter: drop-shadow(0 0 4px rgba(255, 90, 170, 0.7));
}
@keyframes shopSparkle {
  0%, 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--d))) scale(0.5); }
  30%      { opacity: 0.95; }
  60%      { opacity: 0.6; transform: rotate(calc(var(--a) + 20deg)) translateY(calc(-1 * var(--d) - 6px)) scale(1.1); }
}

.shop-bundle-chest {
  width: 96%;
  height: 96%;
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter:
    drop-shadow(0 3px 5px rgba(120, 50, 80, 0.22))
    drop-shadow(0 0 10px rgba(255, 140, 180, 0.32));
}
/* Per-tier extra magenta on chest sprite itself (pricier = more saturated glow) */
.shop-bundle--tier-3 .shop-bundle-chest { filter: drop-shadow(0 3px 5px rgba(120, 50, 80, 0.25)) drop-shadow(0 0 14px rgba(255, 90, 170, 0.5)); }
.shop-bundle--tier-4 .shop-bundle-chest { filter: drop-shadow(0 3px 5px rgba(120, 50, 80, 0.28)) drop-shadow(0 0 18px rgba(255, 60, 150, 0.65)) drop-shadow(0 0 30px rgba(255, 80, 180, 0.4)); }
.shop-bundle--tier-5 .shop-bundle-chest {
  filter: drop-shadow(0 4px 6px rgba(120, 50, 80, 0.3)) drop-shadow(0 0 22px rgba(255, 40, 140, 0.85)) drop-shadow(0 0 42px rgba(255, 80, 180, 0.55));
  animation: vaultBob 3.2s ease-in-out infinite;
}
@keyframes vaultBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(1deg); }
}

.shop-bundle-chest-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.shop-bundle-chest-fallback img {
  width: 55%;
  height: 55%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(120, 50, 80, 0.18));
}
.shop-bundle-seeds {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;                /* Wave-8.39: 700 → 800 mer "stamped" */
  font-size: 17px;                 /* Wave-8.39: 14 → 17 mer dominerende */
  color: #4a2632;
  position: relative;
  z-index: 2;
}
.shop-bundle-seed-icon { width: 18px; height: 18px; object-fit: contain; }
.shop-bundle-tag {
  /* Wave-8.39: pro typografi — uppercase + letter-spacing + warm-brown
     accent-color matchende ribbon. Mindre font men mer "label-like". */
  font-weight: 700;
  font-size: 11px;
  color: #a06c4e;
  margin: 0;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-align: center;
  position: relative;
  z-index: 2;
}
.shop-bundle-bonus {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(168, 200, 154, 0.55);
  color: #3f5a35;
  font-weight: 700;
  border-radius: 6px;
  font-size: 10px;
  margin-left: 3px;
}
.shop-bundle-price {
  background: linear-gradient(180deg, #4a2632 0%, #6b3a48 100%);
  color: #fff;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
  position: relative;
  z-index: 2;
}

/* === WAVE-8.40: AAA mobile-game bundle-card layout =========================
   Per Martin's full coding spec. Restrukturert HTML i game.js gir nye klasser:
   .shop-bundle-art-stage > .shop-bundle-img
   .shop-bundle-info > .shop-bundle-amount > .shop-bundle-seed + span
                     > .shop-bundle-name-row > .shop-bundle-name + .shop-bundle-bonus
   .shop-bundle-price (anchored bottom via margin-top: auto in .shop-bundle)
   ========================================================================== */
.shop-bundle-art-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42%;
  margin-top: 4px;
  border-radius: 22px;
  /* Soft radial halo bak chest. Ingen hard hvit boks — naturlig integrert. */
  background:
    radial-gradient(circle at 50% 42%,
      rgba(255, 245, 220, 0.55) 0%,
      rgba(255, 218, 205, 0.22) 42%,
      rgba(255, 255, 255, 0) 72%);
}
.shop-bundle-art-stage::after {
  content: "";
  position: absolute;
  inset: 12%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 62%);
  pointer-events: none;
}
.shop-bundle-img {
  position: relative;
  z-index: 2;
  width: clamp(72px, 22vw, 112px);
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 8px 10px rgba(80, 35, 25, 0.20))
    drop-shadow(0 0 10px rgba(255, 180, 215, 0.18));
}
/* Per-tier glow på img (replaces tidligere .shop-bundle-chest tier-rules) */
.shop-bundle--tier-3 .shop-bundle-img {
  filter:
    drop-shadow(0 8px 10px rgba(80, 35, 25, 0.22))
    drop-shadow(0 0 14px rgba(255, 90, 170, 0.5));
}
.shop-bundle--tier-4 .shop-bundle-img {
  filter:
    drop-shadow(0 8px 10px rgba(80, 35, 25, 0.24))
    drop-shadow(0 0 18px rgba(255, 60, 150, 0.65))
    drop-shadow(0 0 30px rgba(255, 80, 180, 0.4));
}
.shop-bundle--tier-5 .shop-bundle-img {
  filter:
    drop-shadow(0 8px 12px rgba(80, 35, 25, 0.26))
    drop-shadow(0 0 22px rgba(255, 40, 140, 0.85))
    drop-shadow(0 0 42px rgba(255, 80, 180, 0.55));
  animation: vaultBob 3.2s ease-in-out infinite;
}

/* Info-block: amount + name-row, tett gruppert */
.shop-bundle-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  position: relative;
  z-index: 2;
}
.shop-bundle-amount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1;
  color: #4d2437;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.72);
}
.shop-bundle-seed {
  width: 20px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(130, 35, 80, 0.25));
}
.shop-bundle-name-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
}
.shop-bundle-name {
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: clamp(16px, 3.8vw, 22px);
  color: #8a5a48;
  letter-spacing: 0.02em;
  line-height: 1;
}
/* WAVE-8.40: green bonus pill (var: cream-grønn rect → green stamped pill) */
.shop-bundle-bonus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
  padding: 1px 8px 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, #d8efc8 0%, #b9d99f 100%);
  color: #376b34;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: 0;
  margin-left: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 2px 4px rgba(80, 70, 30, 0.14);
}
.shop-bundle-bonus:empty,
.shop-bundle-bonus.is-hidden { display: none; }

/* WAVE-8.40: chunkier price-button (AAA mobile-game CTA-feel)
   Overrides .shop-bundle-price base style w/ 5-layer shadow + bigger hit */
.shop-bundle .shop-bundle-price {
  margin-top: auto;
  min-width: 88px;
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(180deg, #6b354e 0%, #4b2437 100%);
  color: #fff;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 3.6vw, 20px);
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.20),
    0 4px 0 rgba(80, 36, 50, 0.32),
    0 8px 12px rgba(60, 20, 35, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.shop-board-fineprint {
  text-align: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11.5px;
  color: rgba(74, 38, 50, 0.6);
  margin: 12px 0 0;
  line-height: 1.4;
  padding: 0 12px;
}

/* === LEGACY: standalone overlay (kept for fallback / removed elements) === */
.crystal-shop-overlay.overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at top, #fce8d8 0%, #f4c8a8 60%, #d8a085 100%);
  z-index: 9500;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.crystal-shop-overlay.overlay.hidden { display: none; }
.crystal-shop-card {
  width: 100%;
  max-width: 480px;
  padding: env(safe-area-inset-top, 12px) 16px env(safe-area-inset-bottom, 16px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.crystal-shop-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  background: linear-gradient(180deg, rgba(252, 232, 216, 0.96) 70%, rgba(252, 232, 216, 0));
}
.crystal-shop-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.6);
  font-size: 22px;
  color: #4a2632;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(120, 50, 80, 0.18);
}
.crystal-shop-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #4a2632;
  text-align: center;
  margin: 0;
  letter-spacing: 0.3px;
}
.crystal-shop-balance {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff 0%, #fde0ea 100%);
  border: 1.5px solid rgba(232, 122, 138, 0.4);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #4a2632;
  box-shadow: 0 2px 6px rgba(232, 90, 120, 0.18);
}
.crystal-shop-balance img { width: 18px; height: 18px; object-fit: contain; }

.crystal-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.crystal-bundle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px 12px;
  background: linear-gradient(180deg, #fff8f0 0%, #fce8d8 100%);
  border: 1.5px solid rgba(245, 182, 66, 0.35);
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 1px 2px rgba(74, 38, 50, 0.05),
    0 6px 14px rgba(232, 142, 168, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-family: 'Fredoka', system-ui, sans-serif;
  min-height: 175px;
}
.crystal-bundle:active { transform: scale(0.96); }
.crystal-bundle.is-best-value {
  transform: scale(1.03);
  border: 2px solid #f5b642;
  box-shadow:
    0 0 0 3px rgba(245, 182, 66, 0.25),
    0 10px 26px rgba(245, 182, 66, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, #fffbe0 0%, #fde0c8 100%);
}
.crystal-bundle.is-best-value:active { transform: scale(0.99); }
.crystal-bundle-best-badge {
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  padding: 3px 8px;
  background: linear-gradient(180deg, #ffd966 0%, #f5b642 100%);
  color: #5a3a1a;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 800;
  font-size: 9px;
  letter-spacing: 0.6px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(120, 80, 20, 0.3);
}
.crystal-bundle-chest-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.crystal-bundle-chest {
  width: 88%;
  height: 88%;
  object-fit: contain;
  filter:
    drop-shadow(0 2px 4px rgba(120, 50, 80, 0.18))
    drop-shadow(0 0 12px rgba(255, 140, 180, 0.25));
}
.crystal-bundle-chest-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.crystal-bundle-chest-fallback img {
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(120, 50, 80, 0.18));
}
.crystal-bundle-seeds {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-weight: 700;
  font-size: 14px;
  color: #4a2632;
}
.crystal-bundle-seed-icon { width: 14px; height: 14px; object-fit: contain; }
.crystal-bundle-tag {
  font-weight: 600;
  font-size: 11px;
  color: #8a5a4a;
  margin: 2px 0 4px;
  letter-spacing: 0.3px;
  text-align: center;
}
.crystal-bundle-bonus {
  display: inline-block;
  padding: 1px 5px;
  background: rgba(168, 200, 154, 0.5);
  color: #3f5a35;
  font-weight: 700;
  border-radius: 6px;
  font-size: 10px;
  margin-left: 3px;
}
.crystal-bundle-price {
  background: linear-gradient(180deg, #4a2632 0%, #6b3a48 100%);
  color: #fff;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 4px 12px;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.crystal-shop-fineprint {
  text-align: center;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: rgba(74, 38, 50, 0.6);
  padding: 0 16px 8px;
  line-height: 1.45;
}

/* === MUSIC BAND-LIST (Page 3) — vertical card-stack, one fruit-band per
   track. Image dominates each card, name + meta below. Per-track band-PNGs
   live at assets/band-<id>.png. Fallback to music-icon.png if missing. */
.music-band-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 4px 4px 24px;
  box-sizing: border-box;
  align-items: stretch;
  justify-content: flex-start;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.music-band-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: rgba(255, 245, 220, 0.55);
  border: 1.5px solid rgba(255, 215, 130, 0.4);
  border-radius: 22px;
  padding: 12px 16px 12px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;  /* clip band-img so it can't poke past the gold border */
}
.music-band-img {
  /* Narrower than card so transparent-edge dewdrops + leaf tips never touch
     the gold border. 52% (was 62%) + tighter max-width keeps the band centred
     in a clear cream-paper field. */
  width: 52%;
  max-width: 150px;
  aspect-ratio: 1;
  object-fit: contain;
  margin-bottom: 4px;
  opacity: 0.78;   /* inactive default — dimmed slightly so non-playing bands recede */
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.music-band-item.is-active .music-band-img {
  opacity: 1;  /* full punch on the active "Now playing" band */
}
.music-band-img.is-fallback {
  opacity: 0.32;
  filter: grayscale(0.35);
}
.music-band-name {
  font-family: var(--font-display, 'Fredoka', sans-serif);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: #c92a48;
  text-shadow: 0 1px 0 rgba(120, 20, 40, 0.22);
}
.music-band-meta {
  font-family: var(--font-ui, 'Nunito', sans-serif);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  color: rgba(110, 70, 80, 0.72);
}
.music-band-item.is-active {
  background: rgba(255, 220, 160, 0.6);
  border-color: rgba(255, 175, 90, 0.85);
  box-shadow: 0 4px 14px rgba(255, 175, 90, 0.25);
}
.music-band-item.is-active .music-band-name { color: #b03050; }
.music-band-item.is-locked { opacity: 0.55; cursor: default; }
.music-band-item:not(.is-locked):active { transform: scale(0.97); }

/* === HYBRID NAV — ICON-STRIP (top) + PAGE-DOTS (bottom) ===
   UX-panel verdict: pure swipe-only var confusing. Icon-strip surface'er
   alle 6 kategorier ved et øyekast. Swipe gesturen er fortsatt primær
   navigasjon — strip-en er fallback for casual players. */
/* === WAVE-8.51: HUB-PILL NAV (erstatter stage-carousel) ==================
   Per Martin's inspo: 5 horisontale pills med icon + label.
   Active = pink-coral fill med white text. Inactive = transparent på
   cream container med brown text. Pure CSS, ingen stretched PNGs. */
.collection-hub-nav {
  position: fixed;
  top: max(118px, calc(env(safe-area-inset-top) + 74px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  /* WAVE-8.52: smaller pill (Martin: "huben oppe er for bred") */
  width: fit-content;
  max-width: calc(100% - 24px);
  padding: 5px;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #fff5e2 0%, #ffe8c6 100%);
  border: 3px solid #e9a939;
  border-radius: 999px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(190, 110, 25, 0.16),
    0 5px 12px rgba(110, 55, 20, 0.18);
  box-sizing: border-box;
  pointer-events: auto;
}
.collection-hub-pill {
  /* WAVE-8.54: explicit touch-action + pointer-events for iPhone Safari.
     Default touch-action: auto kan kollidere med scroll-snap på parent.
     manipulation = bare tap+pan-y, ingen double-tap-zoom = clean click. */
  flex: 0 1 auto;
  min-width: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #7a4e43;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.02em;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, flex 180ms ease;
}
/* WAVE-8.55: ALLE pills viser ikon + label (matcher Martin mockup).
   Smaller font (11px) + tight padding så alle 5 fitter på iPhone 375px. */
.collection-hub-pill.is-active {
  padding: 5px 12px;
}
.collection-hub-label {
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}
.collection-hub-pill.is-active {
  color: #ffffff;
  background: linear-gradient(180deg, #ff7da0 0%, #f05378 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(150, 35, 75, 0.22),
    0 3px 6px rgba(180, 45, 85, 0.25);
  text-shadow:
    0 2px 0 rgba(120, 35, 65, 0.25),
    0 0 6px rgba(255, 255, 255, 0.25);
}
.collection-hub-pill:hover:not(.is-active) {
  background: rgba(255, 220, 180, 0.4);
}
.collection-hub-icon {
  width: 22px;     /* WAVE-8.55: 26 → 22 så alle 5 pills fitter på iPhone */
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(120, 70, 40, 0.25));
}
.collection-hub-label { pointer-events: none; }
.collection-hub-icon.mini-portrait {
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.collection-hub-label {
  font-weight: 400;
}

/* Backward-compat: .collection-nav-icon klass — ingen styling, kun JS-hook */
.collection-nav-icon { background: transparent; border: none; padding: 0; }

/* Page-dots i bunn — sekundær indicator (icon-strip på topp er primær).
   Tap-target er 44pt selv om visuelt 10px (HIG min). */
.collection-page-dots {
  position: fixed !important;     /* slå #settings-overlay > * { position:relative !important; } */
  bottom: max(18px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  z-index: 20;
  width: max-content;
}
.collection-page-dot {
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  border-radius: 50%;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  /* Visuell dot rendret via ::before — slik kan vi ha 44pt-tap-target uten
     at den synlige dotten blir for stor. */
}
.collection-page-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(120, 30, 60, 0.35);
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}
.collection-page-dot.is-active::before {
  background: #ff5572;
  transform: translate(-50%, -50%) scale(1.3);
  box-shadow: 0 2px 6px rgba(255, 85, 114, 0.5);
}

/* First-time coach-mark — ghost-hand sweeper. Vises kun første gang i en
   sesjon (localStorage flag) og fader bort etter first interaction. */
.collection-coach-mark {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(20, 10, 40, 0.45);
  animation: coachFadeIn 0.4s ease-out;
}
.collection-coach-mark.is-hidden {
  animation: coachFadeOut 0.3s ease-in forwards;
}
.collection-coach-hand {
  font-size: 64px;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55));
  animation: coachHandSweep 1.6s ease-in-out infinite;
}
.collection-coach-text {
  margin-top: 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 1.5px;
  color: #fff;
  text-shadow:
    0 2px 0 rgba(0, 0, 0, 0.55),
    0 4px 16px rgba(0, 0, 0, 0.7);
}
@keyframes coachHandSweep {
  0%   { transform: translateX(-80px); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(80px); opacity: 0; }
}
@keyframes coachFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes coachFadeOut { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .collection-coach-hand { animation: none; }
}

/* Skjul red bouncing arrows — per UX expert: bryter cozy-stilen + hit-target
   conflict med scroll-snap. Icon-strip + dots dekker discoverability nå. */
.collection-arrow { display: none !important; }

/* Wave-12.32: Settings-logo (vine-green kawaii) positioned over board-top,
   matcher Collection-logo arkitektur. */
.settings-title-logo {
  display: block;
  width: clamp(200px, 52vw, 280px);
  height: auto;
  margin: 18px auto -32px;
  position: relative;
  z-index: 5;
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(80, 30, 60, 0.28));
}

/* Wave-12.32: settings-board med 3-slice frame samme arkitektur som .cv2-board
   Wave-13.28: scroll-fix — board-bodyen scroller, gold-rim frame-top/bottom
   PNGs sitter fast (frames skal ikke flytte på seg).
   Bug var: settings-card har overflow:hidden + 100dvh; settings-board hadde
   ingen overflow → content høyere enn viewport ble klippet uten scroll. */
.settings-board {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  border-radius: 0;
  box-sizing: border-box;
  filter: drop-shadow(0 6px 12px rgba(80, 35, 20, 0.20));
  background: transparent;
  container-type: inline-size;
  /* Flex column så board-body kan fylle remaining space + scrolle internt.
     max-height = viewport - top-chrome (logo ~150 + close-btn safe-area ~70). */
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 220px);
}
.settings-board::before {
  /* Cream-fill innenfor frame's interior, matcher .cv2-board::before */
  content: "";
  position: absolute;
  top: 3.15cqi;
  bottom: 3.15cqi;
  left: 3.02cqi;
  right: 3.02cqi;
  z-index: 1;
  background: #ffe9c2;
  border-radius: 10cqi;
  pointer-events: none;
}
.settings-board-frame-top,
.settings-board-frame-bottom {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.settings-board-body {
  position: relative;
  z-index: 3;
  margin: -1px 0;
  background: url('assets/collection-v2-board-frame2-mid.png') center / 100% 100% no-repeat;
  padding: 20px 22px;
  /* Wave-13.28: scrollable så innholdet (sound/visual/cosmetic/data sections)
     kan nås selv når totalhøyden overskrider viewport. Frame-top/bottom PNGs
     sitter fast som visuell ramme; bare midten scroller. */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* Skjult scrollbar — content-only scroll-feel matching Collection */
.settings-board-body::-webkit-scrollbar { width: 0; }
.settings-board-body::-webkit-scrollbar-thumb { background: transparent; }

.settings-row {
  /* Wave-12.31: premium mobile-game button - rounded pill, translucent white,
     top highlight, soft shadow. Feels touch-friendly + polished.
     Wave-13.19 (R3-5): gap 16→12 og padding 18→14 horisontal for å
     gi labels mer plass på iPhone SE uten å tape touch-target.
     Toggle skal aldri presses ut av rad. */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 250, 240, 0.72) 100%);
  border-radius: 22px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(120, 70, 40, 0.10),
    0 3px 8px rgba(80, 30, 60, 0.12);
  margin-bottom: 8px;
}
.settings-row:last-child { margin-bottom: 0; }

/* === Settings-section (gruppering for picker etc.) === */
.settings-section {
  background: rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.settings-section-label {
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: #4a3578;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.85;
}

/* === COSMETIC GRID — shared component for Backgrounds + Frames pickers ===
   Same visuelle pattern for begge → konsistent UX. Tiles er klikkbare,
   active-state har gold border + ✓, locked-state har 🔒 + hint-tekst. */
.cosmetic-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cosmetic-tile {
  position: relative;
  aspect-ratio: 5 / 9;
  border-radius: 14px;
  background-color: rgba(243, 232, 255, 0.6);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 2px solid rgba(255, 255, 255, 0.92);
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.15s ease, border-color 0.15s ease;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  box-shadow:
    0 4px 10px rgba(80, 30, 60, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font: inherit;
}
.cosmetic-tile:not(.is-locked):hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 22px rgba(80, 30, 60, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cosmetic-tile:not(.is-locked):active {
  transform: translateY(0) scale(0.97);
}
/* Active-tile = "equipped" state — gold ring + warm glow + slight scale-up.
   AAA-tactile loot-room feel: when you tap a tile and it becomes active, the
   ring lights up and the tile pulses subtly into place. */
.cosmetic-tile.is-active {
  border-color: var(--tier-legendary);
  transform: scale(1.03);
  box-shadow:
    0 0 0 2px rgba(255, 179, 71, 0.55),
    0 0 0 4px rgba(255, 240, 200, 0.35),
    0 6px 20px rgba(255, 165, 0, 0.55),
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -2px 0 rgba(180, 100, 30, 0.25);
}
.cosmetic-tile.is-active:hover {
  transform: scale(1.05) translateY(-2px);
}

/* Live-preview overlay — frame PNG sits on top of theme bg in frame-picker.
   Used by .cosmetic-tile--preview (set via buildCosmeticTile when overlayImage
   is provided). The PNG keeps its aspect via background-size: contain so the
   tube-rim sits clean inside the tile without distortion. */
.cosmetic-tile-overlay {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 1;
}
.cosmetic-tile-label,
.cosmetic-tile-check,
.cosmetic-tile-lock,
.cosmetic-tile-hint {
  z-index: 2; /* above overlay so labels stay readable */
}

/* Bunn-label — gradient backdrop + chunky Fredoka 700 + sterk drop-shadow for
   readable-on-anything-feel. Pokémon Sleep / Royal Match-pattern: tile-navn
   skal lese som "sticker label" på en samlekort. */
.cosmetic-tile-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.45),
    0 2px 6px rgba(0, 0, 0, 0.85);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(40, 20, 50, 0.55) 60%,
    rgba(20, 10, 30, 0.82) 100%);
  width: 100%;
  padding: 18px 4px 7px;
  text-align: center;
  letter-spacing: 0.3px;
  pointer-events: none;
  line-height: 1.1;
}
/* Active-tile får gold-tonet label for ekstra "equipped"-presens */
.cosmetic-tile.is-active .cosmetic-tile-label {
  color: #fff8d6;
  text-shadow:
    0 1px 0 rgba(80, 40, 10, 0.55),
    0 2px 8px rgba(180, 100, 30, 0.85);
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(120, 60, 20, 0.55) 60%,
    rgba(80, 40, 10, 0.85) 100%);
}

/* Active-state: ✓-badge øverst-høyre */
.cosmetic-tile-check {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tier-legendary);
  color: var(--plum-ink);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  pointer-events: none;
}

/* Locked-state: grayscale + 🔒 + hint + subtle gold shimmer-sweep to entice unlock.
   Pokémon GO loot-pattern: locked items SHOULD look tempting, not dead. */
.cosmetic-tile.is-locked {
  filter: grayscale(0.85) brightness(0.7);
  cursor: not-allowed;
  opacity: 0.78;
  position: relative;
  overflow: hidden;
}
.cosmetic-tile.is-locked::after {
  content: '';
  position: absolute;
  inset: -20% -50%;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 220, 130, 0.25) 48%,
    rgba(255, 245, 200, 0.45) 50%,
    rgba(255, 220, 130, 0.25) 52%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: lockedShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}
@keyframes lockedShimmer {
  0%, 60%   { transform: translateX(-100%); opacity: 0; }
  70%       { opacity: 1; }
  100%      { transform: translateX(100%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cosmetic-tile.is-locked::after { animation: none; }
}
.cosmetic-tile-lock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  font-size: 22px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  z-index: 4;  /* over shimmer */
}
.cosmetic-tile-hint {
  position: absolute;
  bottom: 26%;
  left: 8%;
  right: 8%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  z-index: 4;  /* over shimmer */
  /* UX spec: scrim chip ensures legibility over photographic tile bg —
     pure shadow fails the App Store reviewer "legible without effort" sniff */
  background: rgba(43, 31, 58, 0.42);
  padding: 3px 8px;
  border-radius: 8px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  text-align: center;
  line-height: 1.18;
  pointer-events: none;
}
.settings-label {
  /* Bruker --font-display (Fredoka) for konsistens med resten av in-game UI-labels.
     Nunito var inkonsistent her — resten av spillets HUD-labels er Fredoka. */
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: #3a2560;
  letter-spacing: 0.3px;
}
/* Toggle ON = orchid-spark (brand purple), OFF = muted plum-ink-light.
   Was legacy Tailwind purple → gray. Now reads as part of the Squish system. */
/* Toggle ON = mint→sage green pill (Squish-melon brand green). OFF = clean grey.
   Note: aria-pressed-logikken er INVERTERT (true = OFF, false = ON) — eksisterende
   pattern fra før-refactor. Default = ON-styling, aria-pressed="true" overrider til OFF. */
.settings-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.65);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--mint-pop) 0%, var(--tier-uncommon) 100%);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.2px;
  text-shadow: 0 1px 1px rgba(20, 80, 50, 0.45);
  cursor: pointer;
  box-shadow:
    0 4px 12px rgba(91, 203, 151, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1.5px 0 rgba(40, 120, 80, 0.20);
  transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease;
}
/* OFF state drives via .is-off (single source of truth). Aria-pressed semantics
   are inconsistent across toggles (sound-toggles bruker invertert logikk,
   color-blind bruker standard). .is-off settes konsistent av alle handlers. */
.settings-toggle.is-off {
  background: linear-gradient(180deg, #D6D0DC 0%, #8A7F95 100%);
  border-color: rgba(255, 255, 255, 0.55);
  text-shadow: 0 1px 1px rgba(60, 50, 80, 0.4);
  box-shadow:
    0 3px 8px rgba(120, 110, 135, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1.5px 0 rgba(80, 70, 100, 0.20);
}
.settings-toggle:hover { transform: scale(1.04); }
.settings-toggle:active { transform: scale(0.96); }
.settings-toggle-icon { font-size: 16px; }

/* Fruit-PNG icons inside Music/SFX toggle buttons + label rows.
   Replaces 🎵/🔊 emojis with brand-rendered Pixar 3D fruit characters.
   Wave-13.19 (R3-4): bumped contrast — light-fruit-PNGs forsvant mot
   mint-green toggle. Double drop-shadow gir kant + dybde. */
.settings-toggle-icon-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  pointer-events: none;
  filter:
    drop-shadow(0 0 1px rgba(43, 31, 58, 0.85))
    drop-shadow(0 2px 3px rgba(43, 31, 58, 0.45));
}
.settings-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Wave-13.19 (R3-5): la til min-width: 0 + flex:1 så lange labels
     ("Reduce Motion", "Color Blind Mode") får faktisk plass i flex-row
     uten å presse toggle-pill ut av kanten. */
  min-width: 0;
  flex: 1 1 auto;
}
.settings-label-text {
  /* Wave-13.19 (R3-5): allow label-text å wrappe heller enn å overflow
     containeren — iPhone SE-fix for "Watermelon Mascot" + andre. */
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.15;
}
/* Wave-13.2 (audit Batch 2.2): polert settings-label-icon container.
   `display: inline-flex` så span også fungerer for emoji-text (ikke bare
   <img>). Forberedt for senere PNG-icon drop-in via attribute `data-icon`.
   Crisper drop-shadow + center-aligned font-size for emoji-rendering. */
.settings-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;            /* Wave-13.19 (R3-4): 26→28 for tydligere read */
  height: 28px;
  font-size: 20px;        /* emoji-render-size — overstyrt hvis <img> */
  line-height: 1;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
  /* Wave-13.19 (R3-4): stacked drop-shadows = tydeligere kant mot
     cream-pill bg. Tunere edge-darkening (0.22 → 0.7) for kontrast. */
  filter:
    drop-shadow(0 0 1px rgba(43, 31, 58, 0.75))
    drop-shadow(0 2px 3px rgba(43, 31, 58, 0.4));
}
.settings-label-icon img { width: 100%; height: 100%; object-fit: contain; }

/* === THEME-KNAPP — øverst-venstre i kortet, samme stil som mute-btn === */
.theme-btn {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 42px;
  height: 42px;
  z-index: 10;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  font-size: 22px;
  cursor: pointer;
  z-index: 50;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 16px rgba(184, 105, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-btn:hover { transform: scale(1.08); }
.theme-btn:active { transform: scale(0.95); }

/* === THEME GALLERY — overlay-modal i iPhone-kort-format (matcher splash + gameover) === */
.theme-card {
  position: relative;
  /* World Coordinates: match .game-wrap. */
  width: min(100% - 16px, 540px);
  aspect-ratio: 858 / 1834;
  max-height: calc(100vh - 32px);
  border-radius: 32px;
  background: linear-gradient(180deg, #fff5fa 0%, #f0e6ff 100%);
  box-shadow:
    0 30px 80px rgba(120, 80, 180, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.5);
  padding: 28px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  overflow: hidden;  /* indre grid scroller, ikke kortet selv */
  animation: pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  /* Wave-13.2 (audit Batch 2.7): clamp() så hero-tittel skalerer fra
     iPhone SE (375px) til Pro Max og iPad uten å hardkode 32px. */
  font-size: clamp(24px, 6.5vw, 36px);
  letter-spacing: 1px;
  background: linear-gradient(180deg, #ff6b9d 0%, #ff8a00 55%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 3px 3px rgba(80, 30, 120, 0.25));
  margin: 0;
}

.theme-subtitle {
  font-family: 'Nunito', sans-serif;
  /* Wave-13.2 (audit Batch 2.7): clamp() — 11px var borderline-small på SE */
  font-size: clamp(10px, 2.6vw, 13px);
  font-weight: 800;
  letter-spacing: 2px;
  color: rgba(122, 92, 184, 0.85);
  text-transform: uppercase;
  margin: 0 0 8px;
  text-align: center;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;  /* plass for scrollbar */
  /* Skjul scrollbar pent på iOS Safari */
  -webkit-overflow-scrolling: touch;
}
.theme-grid::-webkit-scrollbar { width: 4px; }
.theme-grid::-webkit-scrollbar-thumb {
  background: rgba(168, 85, 247, 0.4);
  border-radius: 2px;
}

.theme-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 14px rgba(120, 80, 180, 0.18);
}

.theme-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(120, 80, 180, 0.28);
}

.theme-tile--active {
  border-color: var(--tier-legendary);
  box-shadow:
    0 6px 22px rgba(255, 179, 71, 0.5),
    0 0 0 2px rgba(43, 31, 58, 0.45),
    0 0 0 1px rgba(255, 215, 0, 0.6);
}

.theme-tile--locked {
  cursor: not-allowed;
  opacity: 0.65;
}

.theme-tile--locked .theme-thumb {
  filter: grayscale(0.85) brightness(0.85);
}

.theme-tile--locked:hover {
  transform: none;
}

.theme-thumb {
  width: 100%;
  aspect-ratio: 9 / 13;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(120, 80, 180, 0.15);  /* fallback hvis bg ikke laster */
}

.theme-name {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #4a3578;
  letter-spacing: 0.5px;
}

.theme-tile--active .theme-name {
  color: #b8743e;
}

.theme-lock {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: rgba(122, 92, 184, 0.75);
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

/* ================================================
   GAME OVER OVERLAY (samme telefon-kort-stil som splash)
   ================================================ */
.overlay {
  position: fixed;
  inset: 0;
  /* Solid semi-transparent (was backdrop-filter blur 14px) — blur on full-
     screen overlay forced full-screen recomposition every frame on iOS Safari.
     Solid rgba reads visually similar but FREE. */
  background: rgba(80, 40, 110, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  /* Safe-area for iPhone-notch / hjem-indikator */
  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  animation: fadeIn 0.3s ease-out;
}

.overlay.hidden { display: none; }

.gameover-card {
  position: relative;
  /* World Coordinates: match .game-wrap (540 / 858x1834) so card covers
     game-wrap fully on desktop. */
  width: min(100% - 16px, 540px);
  aspect-ratio: 858 / 1834;
  max-height: calc(100vh - 32px);
  border-radius: 32px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(120, 80, 180, 0.55),
    0 0 0 2px rgba(255, 255, 255, 0.5),
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gameover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05) brightness(1.0);
}

/* Looping atmospheric gameover-video over poster (DOM-order = top-stack).
   Filter dropped 2026-05-10 to match splash-video — designer flagged
   inconsistency. Both videos now render natively. */
.gameover-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* CSS-based rain overlay — pure CSS animation, no JS per-frame work.
   Spans are populated once via JS at init with randomized inline-styles
   for left/delay/duration/opacity. Pointer-events none så Play Again
   knappen er ikke blokkert. Z-index over video, under content. */
.gameover-rain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 3;
}
.gameover-rain span {
  position: absolute;
  top: -30px;
  width: 1.2px;
  background: linear-gradient(
    to bottom,
    rgba(230, 240, 250, 0)    0%,
    rgba(230, 240, 250, 0.6)  60%,
    rgba(255, 255, 255, 0.95) 100%
  );
  border-radius: 0.6px;
  animation: rainfall var(--rain-duration, 1.4s) linear var(--rain-delay, 0s) infinite;
  /* box-shadow droppet for iOS perf — invisible on 1.2px hairline anyway */
}

/* Rain falls nesten rett ned (3deg drift, naturalistic light wind), 110vh
   for full skjerm-fall. translate(15px) = svakt diagonal skift. */
@keyframes rainfall {
  0%   { transform: translate(0, 0)         rotate(3deg); opacity: 0; }
  4%   { opacity: var(--rain-opacity, 0.7); }
  96%  { opacity: var(--rain-opacity, 0.7); }
  100% { transform: translate(15px, 110vh)  rotate(3deg); opacity: 0; }
}

.gameover-vignette {
  position: absolute;
  inset: 0;
  /* Wave-13.19 (R3-7): la til bottom-CTA-dim. Atmospheric video har
     for mye contrast underveis CTA, så PLAY AGAIN coral-pill + cream
     Collection-pill drowner i regn + lys. Bottom ~38% får mørk
     gradient-plate så knappene reads tydelig — uten å skygge logo. */
  background:
    radial-gradient(
      ellipse 110% 110% at center,
      transparent 55%,
      rgba(80, 30, 70, 0.35) 100%
    ),
    linear-gradient(
      180deg,
      transparent 0%,
      transparent 62%,
      rgba(40, 20, 60, 0.42) 85%,
      rgba(40, 20, 60, 0.58) 100%
    );
  pointer-events: none;
}

/* ================================================
   GAME OVER — minimalistisk hero-layout (UX iterasjon 10/10)
   Tre soner: Result → Highlight (én) → CTA. Ingen rotete pile.
   ================================================ */
.gameover-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 20px 28px 32px;
  width: 100%;
  margin-bottom: 4vh;  /* lowered from 14vh — founder said logo sat too high (2026-05-09) */
}

/* Brand-logo on game-over — mirrors .splash-logo styling for consistent identity */
.gameover-logo {
  width: min(85%, 380px);
  height: auto;
  animation: logoWobble 3.5s ease-in-out infinite;
  /* logoGlow filter-animation droppet for iOS — animated drop-shadow re-runs
     alpha-shadow blur on entire bitmap each keyframe. Static drop-shadow below
     gir samme luminous feel uten cost. */
  transform-origin: center;
  filter:
    drop-shadow(0 0 16px rgba(255, 240, 180, 0.85))
    drop-shadow(0 0 32px rgba(255, 200, 120, 0.55))
    drop-shadow(0 8px 20px rgba(80, 30, 70, 0.4));
  margin-bottom: 8px;
}

/* "Game Over"-label — rødlig tone så det leser som "du døde" */
.gameover-label {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: linear-gradient(180deg, #ff6b8c 0%, #d8395a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 2px 4px rgba(216, 57, 90, 0.5));
  margin-top: 4px;
}

/* Hero score — base styling. Farge settes via rarity-klasse fra JS:
   White (lav) → Green (grei) → Blue (bra) → Purple (epic) → Orange (legendarisk) */
.gameover-score-hero {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 800;  /* Wave-13.19 (R3-2): 700 → 800 chunkier */
  /* Wave-13.19 (R3-2): 72px fast → clamp(64px, 18vw, 92px) responsive hero
     på alle iPhones — small SE rim down til 64, large XR/Pro Max up til 92 */
  font-size: clamp(64px, 18vw, 92px);
  letter-spacing: -1.5px;
  font-variant-numeric: tabular-nums;
  line-height: 0.95;
  margin-top: -4px;
  animation: scorePopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Loot-rarity score-farger ===
   Inspirert av RPG-loot-systemer (WoW/Diablo): jo mer sjelden score,
   jo mer prominent farge. Lav score = ydmyk hvit, høy = legendarisk orange. */
.gameover-score-hero--white {
  color: #fff;
  filter:
    drop-shadow(0 3px 0 rgba(120, 80, 180, 0.4))
    drop-shadow(0 6px 12px rgba(0, 0, 0, 0.3));
}
.gameover-score-hero--green {
  background: linear-gradient(180deg, #6ee7b7 0%, #059669 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 6px 14px rgba(5, 150, 105, 0.55));
}
.gameover-score-hero--blue {
  background: linear-gradient(180deg, #60a5fa 0%, #1d4ed8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 6px 16px rgba(29, 78, 216, 0.6));
}
.gameover-score-hero--purple {
  background: linear-gradient(180deg, #c084fc 0%, #7e22ce 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 6px 18px rgba(126, 34, 206, 0.65));
}
.gameover-score-hero--orange {
  background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter:
    drop-shadow(0 3px 0 #fff)
    drop-shadow(0 6px 22px rgba(234, 88, 12, 0.7));
  /* Subtil shimmer-pulse for legendary tier — sjelden + spesiell */
  animation:
    scorePopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    legendaryShimmer 2.2s ease-in-out 0.6s infinite;
}
@keyframes legendaryShimmer {
  0%, 100% { filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 6px 22px rgba(234, 88, 12, 0.7)); }
  50%      { filter: drop-shadow(0 3px 0 #fff) drop-shadow(0 6px 30px rgba(255, 200, 100, 0.95)); }
}

@keyframes scorePopIn {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Best · 12345 — subtle chip, sekundær */
.gameover-best-chip {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.2px;
  color: rgba(255, 255, 255, 0.78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  font-variant-numeric: tabular-nums;
}
.gameover-best-chip #final-best {
  background: linear-gradient(180deg, var(--tier-legendary) 0%, #ff8a00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: bold;
  filter: drop-shadow(0 1px 1px rgba(255, 150, 0, 0.4));
}

/* === Smart highlight pill — én av flere prestasjoner, prioritert === */
/* ============================================================================
   GAME OVER HIGHLIGHT — Squish 5 redesign
   Was: green Tailwind pill ("crashes the visual" — founder + designer agreed)
   Now: white card with coral progress fill for --challenge (daily quest);
        celebration badge with gold→coral gradient for --newbest;
        sunset-peach for --streak; plum-ink for --theme.
   Cards have soft shadows (paper feel). Badge has chunky shadow (interactive feel).
   ============================================================================ */
/* 2026-05-09 v2 overhaul: surfaces dropped entirely (founder: "kanskje bare
   drite i bokser"). Default = transparent floating text on game-over bg.
   Variants override only typography + the one celebration badge that needs
   surface (--newbest). All other variants are pure text + tiny progress bar. */
.gameover-highlight {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  background: transparent;
  border: none;
  box-shadow: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
  color: #FFF8E0;
  text-shadow: 0 1px 0 rgba(80, 30, 70, 0.6), 0 2px 8px rgba(0, 0, 0, 0.55);
  margin-top: 8px;
  animation: highlightSlideIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.35s both;
}
.gameover-highlight.hidden { display: none; }
.gameover-highlight-icon { font-size: 18px; display: none; }  /* emoji-icons stripped per overhaul */
.gameover-highlight-text { white-space: nowrap; }

/* === NEW BEST! — celebration badge (gold→coral gradient, the Squish 5 hero moment) === */
.gameover-highlight--newbest {
  background: linear-gradient(135deg, var(--warning) 0%, var(--melon-coral) 100%);
  border: 3px solid var(--surface-2);
  color: var(--text-on-brand);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
  box-shadow:
    0 0 24px rgba(255, 200, 87, 0.6),
    0 6px 0 var(--melon-coral-lo);
  animation:
    highlightSlideIn 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) 0.35s both,
    newBestPulse 1.4s ease-in-out 1.0s infinite;
}

/* === DAILY CHALLENGE — pure floating text + slim progress bar, no surface.
   v3 (2026-05-09 overhaul): white card killed per founder. */
.gameover-highlight--challenge {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 4px 0;
  min-width: 220px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.gameover-highlight--challenge .gameover-highlight-text {
  font-weight: 800;
  font-size: 13px;
  color: #FFF8E0;
  text-shadow: 0 1px 0 rgba(80, 30, 70, 0.6), 0 2px 8px rgba(0, 0, 0, 0.55);
  white-space: normal;
  text-align: center;
}
.gameover-highlight--challenge .gameover-highlight-bar {
  display: block;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
}
.gameover-highlight--challenge .gameover-highlight-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sunset-peach) 0%, var(--melon-coral) 100%);
  box-shadow: 0 0 8px rgba(255, 107, 122, 0.5);
  border-radius: 3px;
  transition: width 0.6s ease;
}

/* === STREAK — sunset-peach text accent on bare bg (no pill) === */
.gameover-highlight--streak {
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--sunset-peach);
  text-shadow: 0 1px 0 rgba(80, 30, 70, 0.7), 0 2px 8px rgba(0, 0, 0, 0.55);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* === THEME UNLOCK — cream text + tiny progress bar (no pill bg) === */
.gameover-highlight--theme {
  background: transparent;
  border: none;
  box-shadow: none;
  color: #FFF8E0;
  text-shadow: 0 1px 0 rgba(80, 30, 70, 0.6), 0 2px 8px rgba(0, 0, 0, 0.55);
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}
.gameover-highlight--theme .gameover-highlight-text {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
}

/* Mini progress-bar — shared between theme + challenge variants */
.gameover-highlight-bar {
  display: none;
  width: 140px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.gameover-highlight--theme .gameover-highlight-bar { display: block; }
.gameover-highlight-fill {
  height: 100%;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.7) 100%);
  border-radius: 2px;
  transition: width 0.6s ease;
}

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

@keyframes newBestPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* === CTA-sone — primær pille + sekundær tekstlink === */
.gameover-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding-top: 12px;
}

/* ============================================================================
   SQUISH 5 BUTTON SYSTEM — chunky kawaii physics, matches brand-DNA
   Primary  = Melon Coral, big call-to-action
   Secondary = white surface w/ Plum Ink border, supporting actions
   Both use the signature `0 6px 0 [darker]` chunky offset shadow that
   gives buttons the candy-toy depth that flat-iOS misses.
   ============================================================================ */

/* === PRIMARY CTA — PLAY AGAIN
   Wave-13.19 (R3-1): hybrid-redesign per Round-3 audit
   ("re-engagement deal-breaker" pga manglende button-affordance).
   Behold Lilita One stamped-sticker tekst (founder-spec ~ splash-tap),
   men legg på CORAL pill-bg + chunky-physics drop-shadow så det leser
   som button. Resultat: matcher splash-DNA + tydelig CTA. === */
#restart-btn {
  font-family: 'Lilita One', cursive;
  font-size: clamp(20px, 5.6vw, 28px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFF4E6;
  text-shadow:
    -2px 0   0 #4a2150,
     2px 0   0 #4a2150,
     0  -2px 0 #4a2150,
     0   2px 0 #4a2150,
    -1.5px -1.5px 0 #4a2150,
     1.5px -1.5px 0 #4a2150,
    -1.5px  1.5px 0 #4a2150,
     1.5px  1.5px 0 #4a2150,
     0 2px 0 rgba(74, 33, 80, 0.45);
  /* Wave-13.19 (R3-1): coral pill-bg m/ inset-highlight + chunky drop */
  background: linear-gradient(180deg, #FF8A8E 0%, #FF6B7A 55%, #E84F60 100%);
  border: none;
  border-radius: 999px;
  padding: 16px 40px;
  min-height: 60px;
  min-width: 220px;
  margin-top: 4px;
  cursor: pointer;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(165, 35, 60, 0.35),
    0 6px 0 #B83648,
    0 10px 18px rgba(184, 54, 72, 0.45);
  animation: tapPulse 1.4s ease-in-out infinite;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
#restart-btn:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(165, 35, 60, 0.35),
    0 7px 0 #B83648,
    0 12px 22px rgba(184, 54, 72, 0.5);
}
#restart-btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.55),
    inset 0 -3px 0 rgba(165, 35, 60, 0.35),
    0 2px 0 #B83648,
    0 4px 8px rgba(184, 54, 72, 0.4);
  animation: none;
}

/* === Generic primary button (kept for OTHER hero CTAs that need chunky-coral
   physics — NOT used on Play Again per founder spec) === */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.5px;
  color: var(--text-on-brand);
  background: linear-gradient(180deg, var(--melon-coral-hi) 0%, var(--melon-coral) 100%);
  border: none;
  border-radius: var(--radius-button);
  padding: 18px 36px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(120, 30, 60, 0.18);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 6px 0 var(--melon-coral-lo),
    0 8px 16px rgba(255, 107, 122, 0.4);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  animation: btnIdlePulse 1.8s ease-in-out infinite;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 2px 0 var(--melon-coral-lo);
  animation: none;
}

@keyframes btnIdlePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.03); }
}

/* === COLLECTION LINK (.profile-link)
   Wave-13.19 (R3-3): promotert til secondary-button per Round-3 audit
   ("funnel-discovery" — text-link var oversett av first-time players).
   Cream-soft pill m/ visible border + chunky-shadow, men VISUELT
   subordinat til PLAY AGAIN-coral CTA. Behold chest-bob ikon +
   Nunito uppercase label så det matcher splash-collection-DNA. */
.profile-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #4A2150;
  /* Wave-13.19 (R3-3): cream pill-bg + plum hairline for tappable affordance */
  background: linear-gradient(180deg, #FFF8E0 0%, #FFEFC4 100%);
  border: 2px solid rgba(74, 33, 80, 0.85);
  border-radius: 999px;
  padding: 8px 22px 10px;
  min-height: 56px;
  min-width: 140px;
  margin-top: 14px;
  cursor: pointer;
  text-shadow: none;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 4px 0 rgba(74, 33, 80, 0.85),
    0 6px 14px rgba(0, 0, 0, 0.3);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.profile-link-icon {
  width: 64px;
  height: 64px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(43, 31, 58, 0.35))
          drop-shadow(0 1px 2px rgba(43, 31, 58, 0.25));
  animation: chestBob 3s ease-in-out infinite;
}
.profile-link-label {
  pointer-events: none;
  display: inline-block;
}
@keyframes chestBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-3px) rotate(-1.5deg); }
}
.profile-link:hover {
  color: #2B1F3A;
  transform: translateY(-1px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    0 5px 0 rgba(74, 33, 80, 0.85),
    0 8px 16px rgba(0, 0, 0, 0.32);
}
.profile-link:hover .profile-link-icon {
  filter: drop-shadow(0 6px 10px rgba(43, 31, 58, 0.45))
          drop-shadow(0 1px 2px rgba(43, 31, 58, 0.3));
}
.profile-link:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.7),
    0 1px 0 rgba(74, 33, 80, 0.85),
    0 2px 6px rgba(0, 0, 0, 0.25);
}
@media (prefers-reduced-motion: reduce) {
  .profile-link-icon { animation: none; }
}

/* === Generic secondary button (kept for non-gameover use) === */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.3px;
  color: var(--text-primary);
  background: var(--surface-2);
  border: 2px solid var(--text-primary);
  border-radius: var(--radius-button);
  padding: 14px 28px;
  margin-top: 8px;
  cursor: pointer;
  text-shadow: none;
  box-shadow: 0 4px 0 var(--text-primary);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.btn-secondary:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 var(--text-primary);
}
.btn-secondary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--text-primary);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes pop {
  from { transform: scale(0.8); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* ============================================================================
   NEW BEST! CELEBRATION — full-screen overlay shown ~1.8s before game-over.
   Visual DNA: gold radial glow + Fredoka italic chunky text + count-up score,
   matching the splash-poster celebration energy.
   ============================================================================ */
/* === NEW BEST! celebration — 2026-05-12 redesign per founder spec:
   "må stå på samme sted som game over screen". Bruker EKSAKT samme .gameover-card
   + .gameover-content struktur så score-font, position, og knappestil er
   identisk. Eneste override: card-bg byttes til highs-core-bg.png. Score-pop
   animation skiller seg fra game-over så det føles celebrasjon-aktig. === */
.newbest-celebration {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(80, 40, 110, 0.78);
  animation: newbestFadeIn 0.4s ease-out;
  -webkit-tap-highlight-color: transparent;
}
.newbest-celebration.fade-out { animation: newbestFadeOut 0.4s ease-in forwards; }
.newbest-bg {
  /* Override gameover-bg saturate så fruit-pyramid popper sterkere */
  filter: saturate(1.15) brightness(1.02);
}
.newbest-vignette {
  /* Egen vignette over highscore-bg så NEW BEST! + score leser klart */
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 35%,
    rgba(255, 200, 87, 0.20) 0%,
    rgba(255, 107, 122, 0.15) 28%,
    rgba(43, 31, 58, 0.50) 72%,
    rgba(20, 10, 40, 0.75) 100%
  );
  pointer-events: none;
}
/* NEW BEST wordmark PNG — green-NEW + red-BEST + watermelon-body. Drop-in
   replacement for the old text placeholder (.newbest-banner-text removed). */
.newbest-banner-logo {
  display: block;
  /* 2026-05-17: synket m/ .splash-logo + .gameover-logo (var 72%/320). */
  width: min(85%, 380px);
  height: auto;
  margin: 0 auto 8px;
  filter:
    drop-shadow(0 0 24px rgba(255, 220, 100, 0.65))
    drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
  animation: newbestTextPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Restart-knapp — clone av #restart-btn styling (kan ikke gjenbruke ID).
   Holder samme font + animasjon så plasseringen er identisk med game-over. */
.newbest-restart-btn {
  /* 2026-05-17: synket m/ #restart-btn + .splash-tap (Lilita One stamped-sticker). */
  font-family: 'Lilita One', cursive;
  font-size: clamp(20px, 5.6vw, 28px);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #FFF4E6;
  text-shadow:
    -2px 0   0 #4a2150,
     2px 0   0 #4a2150,
     0  -2px 0 #4a2150,
     0   2px 0 #4a2150,
    -1.5px -1.5px 0 #4a2150,
     1.5px -1.5px 0 #4a2150,
    -1.5px  1.5px 0 #4a2150,
     1.5px  1.5px 0 #4a2150,
     0 4px 0 rgba(74, 33, 80, 0.55),
     0 8px 14px rgba(0, 0, 0, 0.4);
  background: none;
  border: none;
  padding: 14px 32px;
  min-height: 56px;
  min-width: 200px;
  margin-top: 4px;
  cursor: pointer;
  animation: tapPulse 1.4s ease-in-out infinite;
  transition: transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.newbest-restart-btn:hover { transform: scale(1.05); }
.newbest-restart-btn:active { transform: scale(0.95); }
@keyframes newbestFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes newbestFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes newbestGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes newbestTextPop {
  0%   { opacity: 0; transform: scale(0.6) translateY(-20px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes newbestScorePop {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}

/* ============================================================================
   BACK-LINK on Collection / Theme overlays — v3 design (2026-05-09)
   Was: "×" floating top-right, no clear nav semantics
   Now: "‹ Back" text-link top-LEFT, iOS-conventional navigation
   ============================================================================ */
.profile-close,
.settings-close-btn,
.theme-close-btn {
  /* iOS HIG-conventional ‹ Back chevron top-left.
     Safe-area fix (2026-05-12) — was hardcoded top:16px which on iPhone 14/15
     Pro got swallowed by Dynamic Island. Now respects env(safe-area-inset-*)
     with 16px floor for desktop. +8px gap from inset edge = AAA polish
     (Royal Match / Monopoly Go pattern; flush-against-inset reads broken). */
  position: absolute;
  top:  max(16px, calc(env(safe-area-inset-top,  0px) + 8px));
  left: max(16px, calc(env(safe-area-inset-left, 0px) + 8px));
  z-index: 10;
  background: rgba(255, 244, 230, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  padding: 9px 16px 9px 13px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  letter-spacing: 0.4px;
  box-shadow:
    0 3px 10px rgba(43, 31, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.profile-close:hover,
.settings-close-btn:hover,
.theme-close-btn:hover {
  background: rgba(255, 244, 230, 1);
  transform: translateX(-2px);
}
.profile-close:active,
.settings-close-btn:active,
.theme-close-btn:active {
  transform: translateX(0) scale(0.96);
}

/* ================================================================
   EDGE-TO-EDGE MOBILE OVERRIDE (AAA Phase 1)
   ================================================================
   På mobil/touch fyller alt viewport-en — ingen iPhone-card-feeling
   inni en ekte iPhone. Decorative elementer bleeder bak notch + home-
   indicator (full-bleed). Interaktive elementer respekterer safe-area-
   inset så fingeren ikke treffer dynamic island. Standard for AAA-spill
   som Royal Match, Candy Crush, Suika Game (mobil-port).

   Aktiveres for små viewports (≤ 599 px) ELLER touch-pointer-enheter,
   så coarse-pointer iPad og fold-phones også får fullskjerm-modus.

   100dvh > 100vh — dvh er "dynamic viewport height" som ekskluderer
   iOS Safari URL-bar når den kollapser. 100vh "lyver" og forårsaker
   layout-jumps; 100dvh er det moderne fix-et.
   ================================================================ */
@media (max-width: 599px), (pointer: coarse) {
  /* Body: ingen padding, full viewport-bruk */
  body {
    min-height: 100dvh;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
  }

  /* === FULL BLEED MODE — paints behind notch + dynamic island + home indicator
     ===
     position:fixed + inset:0 låser til ENTIRE viewport, inkludert områdene
     bak iPhone-systemets UI. viewport-fit=cover (i index.html) er kritisk
     for at nettleseren skal tillate dette. */
  html, body {
    /* Override desktop padding + flex-center på mobile */
    padding: 0;
    /* SVART body-bg = AAA mobile-game standard (Royal Match, Sakura osv.).
       All "letter-box"-area rundt canvas/play-bg blir svart i stedet for
       en mismatched fargegradient. Notch-area og home-indicator-area får
       også svart, som leser som intensjonal iPhone-bezel. */
    background: #000;
    display: block;
  }

  /* Sky-bg fylles til VIEWPORT-edges (ikke bare game-wrap), så letter-box
     gaps mellom canvas og frame fortsatt får sky-fill, ikke svart eller
     hvit. fixed positioning unngår alle nesting-quirks. pointer-events:none
     så taps passerer gjennom til canvas. */
  .game-bg {
    position: fixed;
    inset: 0;
    pointer-events: none;
  }

  .game-wrap {
    /* WORLD COORDINATES (2026-05-15): keep aspect 858/1834 locked even on
       mobile. Phones whose viewport aspect doesn't match (iPhone SE 9:16,
       Pro Max 9:19.5) get black letterbox bars on the sides or top/bottom
       — same trick as Royal Match / Sakura. Without this, fruits land at
       different positions relative to the frame on every device. */
    position: fixed;
    inset: 0;
    margin: auto;
    /* Pick the larger axis to fit; the other axis is derived from aspect. */
    width:  min(100vw, calc(100dvh * 858 / 1834));
    height: min(100dvh, calc(100vw * 1834 / 858));
    max-width: none;
    max-height: none;
    /* aspect-ratio kept from base rule (858/1834) — do NOT reset to auto. */
    border-radius: 0;
    box-shadow: none;
  }

  /* HUD-chips respekterer notch/dynamic-island på toppen */
  .hud-glass {
    /* Skyv ned så vi ikke ligger bak dynamic island */
    margin-top: max(8px, env(safe-area-inset-top));
    margin-left:  max(8px, env(safe-area-inset-left));
    margin-right: max(8px, env(safe-area-inset-right));
  }

  /* Knappene øverst — flytt ned forbi dynamic island */
  .menu-btn, .theme-btn {
    top: max(12px, env(safe-area-inset-top));
  }
  .menu-btn {
    right: max(12px, env(safe-area-inset-right));
  }
  .theme-btn {
    left: max(12px, env(safe-area-inset-left));
  }

  /* Hint nederst respekterer home-indicator */
  .hint {
    margin-bottom: max(8px, env(safe-area-inset-bottom));
  }

  /* === Splash, gameover, settings, tutorial — FULL BLEED på mobil === */
  /* .overlay padding fjernet så bg paints helt til viewport-kantene
     inkludert bak notch + home indicator. Inner content bruker
     safe-area-inset for plassering så HUD ikke ligger BAK system-UI. */
  .splash, .overlay {
    padding: 0;
  }
  .splash-card,
  .gameover-card,
  .game-card,
  .settings-card,
  .tutorial-card,
  .theme-card {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    aspect-ratio: auto;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
  }

  /* Innhold INNI overlay-cards respekterer safe-area så CTA-knapper er
     unna home-indicator og close-knapper er unna dynamic-island */
  .gameover-content,
  .settings-content,
  .tutorial-content,
  .splash-content {
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: max(24px, env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }

  /* Back-link på overlay-cards — dyttes inn fra notch.
     v3 (2026-05-09): "‹ Back" top-LEFT (iOS navigation-modell, kanon).
     v4 (2026-05-10): vurderte centered-bottom, reverted etter UX-architect-
     flag (Android FAB-pattern + App Store reviewer-risk). */
  .profile-close,
  .settings-close-btn,
  .tutorial-close-btn,
  .theme-close-btn,
  .gameover-close {
    top: max(12px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: auto;
  }

  /* Overlay padding — overstyr de gamle 16px-paddings hvis de finnes */
  .overlay {
    padding: 0;
  }
}

/* ============================================================================
   SCORE-MAGNET — combo-pop overlay that flies from merge → HUD score
   2026-05-10: DOM-rendered (not canvas) so it can travel outside the canvas
   clipping rect into the HUD area where the actual score number lives.
   Two-stage animation: hold-and-pop at merge, then ease-fly to score, fades
   on arrival. Triggers score-bump pulse when it arrives.
   ============================================================================ */
.score-magnet-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 11; /* above HUD chips so it can land on top of score */
  overflow: visible;
}
.score-magnet {
  position: absolute;
  font-family: var(--font-pop);
  font-weight: 400;
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;  /* TD#2: lock digits while flying */
  /* TD#2: cream halo first so number stays legible flying across dark themes
     (plum-dusk, citrus-lanterns); plum drop second for warm-bg contrast. */
  text-shadow:
    0 0 6px rgba(255, 240, 180, 0.9),
    0 2px 0 rgba(120, 30, 60, 0.6),
    0 0 8px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%) scale(0.5);
  opacity: 0;
  transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.22s ease;
  white-space: nowrap;
  pointer-events: none;
  will-change: transform, opacity;
}
/* Stage A — popped state. Subtle hover-bob keeps it alive without distraction.
   Bob amplitude is small (~6px) and slow (1.4s cycle) so the eye reads
   "floating intentionally", not "shaking". */
.score-magnet--popped {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  animation: scoreMagnetBob 1.4s ease-in-out infinite;
}
@keyframes scoreMagnetBob {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, calc(-50% - 6px)) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .score-magnet,
  .score-magnet--popped {
    transition: none !important;
    opacity: 0 !important;  /* skip animation entirely */
  }
}

/* ============================================================================
   FIRST-MERGE WHISPER HINT — single contextual nudge for brand-new players.
   Auto-fades on first merge (event-driven) or 5s timeout. Never shown again
   after first dismissal (localStorage flag). UX audit (2026-05-10): the
   Suika-genre's match-same-fruits gimmick is not discoverable from one fruit
   alone. This is the lightest possible tutorial — one cream caption, no
   carousel, no overlay-blocking.
   ============================================================================ */
.first-merge-hint {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  color: #FFF8E0;
  text-shadow: 0 1px 0 rgba(80, 30, 70, 0.75), 0 2px 12px rgba(0, 0, 0, 0.6);
  background: rgba(43, 31, 58, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 248, 224, 0.22);
  border-radius: 100px;
  padding: 10px 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  white-space: nowrap;
}
.first-merge-hint.is-visible {
  opacity: 1;
  animation: hintBreath 2.4s ease-in-out infinite 0.5s;
}
@keyframes hintBreath {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

/* ============================================================================
   ACCESSIBILITY — prefers-reduced-motion
   2026-05-10: UX audit flagged 100% absence of motion guards. App Store
   accessibility-credibility requires this. We disable the heaviest visual
   animations (logo wobble, pulse loops, celebration pops, frame breathing).
   Functional transitions (hover/active states) remain.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  .splash-logo,
  .gameover-logo {
    animation: none !important;
  }
  .splash-tap,
  #restart-btn,
  .newbest-tap-hint,
  .splash-sparkles span,
  .game-sparkles span,
  .rainbow-dust span,
  .frame-corner-spark,
  .game-wrap[data-frame="watermelon-crystal"] .game-frame-overlay {
    animation: none !important;
  }
  .newbest-celebration,
  .newbest-glow,
  .newbest-text,
  .newbest-score {
    animation: none !important;
  }
  .gameover-highlight,
  .gameover-highlight--newbest,
  .gameover-score-hero,
  .gameover-score-hero--orange,
  .gameover-score-hero--purple {
    animation: none !important;
  }
  .btn-primary,
  .btn-secondary,
  .profile-link,
  .first-merge-hint.is-visible {
    animation: none !important;
  }
  /* Frame tier breath-pulses also disabled */
  .game-wrap[data-frame="mango-honey"] .game-frame-overlay,
  .game-wrap[data-frame="pineapple-gold"] .game-frame-overlay {
    animation: none !important;
  }
  /* Splash entrance still ok — single, brief, not loop. Keep for clarity. */
}

/* ============================================================================
   TIER BAR (2026-05-11) — candy-press wells progression display.
   Synthesized from 5-expert design panel:
     - Candy-press wells (frame-integrated, NOT bolted-on chips)
     - Cream silhouettes for unreached (Pokémon Sleep trick, NOT grayscale)
     - Mood-pack-aware sprites (passive cosmetic flex)
     - 9-slot total (8 fruits + 1 ghosted "???" promising future content)
     - Per-round only — resets on game-over
     - Lit fruits do NOT animate at rest (slot-machine trap avoided)
     - v1.1: anticipation breath, set-complete bow, tap-to-peek tooltip
   ============================================================================ */
/* Tier-bar v1.1 (post 5-expert review): bigger wells, deeper deboss,
   stronger silhouettes (drop sepia), specular rim on lit wells,
   wax-seal mystery glyph, snappier unlock pop.

   POSITIONING (v1.3, 2026-05-11): inset bumped 4%→7% so bar visually
   aligns with the frame's *inner* cream-pillar edge (the line player reads
   as "where the frame is"), not with .canvas-wrap. Founder feedback: bar
   stuck out past frame edges → broke vertical rhythm. 7% is the sweet spot
   on iPhone SE/14/Pro Max — keeps 9 slots inside pill with my reduced
   slot/gap/pad mins. z-index 7 beats frame's z-index 5. */
.tier-bar {
  position: absolute;
  left: 5.75%;
  right: 5.75%;
  bottom: calc(3.5% + env(safe-area-inset-bottom, 0px));
  height: clamp(46px, 10%, 60px);
  /* AAA mobile-game pattern: grid med repeat(9, 1fr) distribuerer slots
     matematisk likt innenfor bar-bredden. Overflow er strukturelt umulig
     fordi hver celle = (bar - padding - gaps) / 9. Erstatter den tidligere
     flex + vw-clamp-tilnærmingen som krevde manuell justering av maks-
     verdier for hver viewport-størrelse. Padding/gap er prosent-baserte
     mot containeren (ikke viewport), så de skalerer i takt med barren. */
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  align-items: center;
  justify-items: center;
  gap: clamp(1px, 1%, 4px);
  padding: 5px clamp(4px, 3%, 12px) 7px;
  pointer-events: none;
  z-index: 7;
  /* Fully rounded chip/pill shape — bar is now a discrete tray, not a fade
     into the frame. Asymmetric corners would look broken on a solid object. */
  border-radius: clamp(18px, 5vw, 28px);
  border-top: 1px solid rgba(255, 255, 255, 0.55);
  /* Universal depth-cue stack — top highlight + bottom shadow + soft cast UP
     into frame area + drop shadow under + sub-pixel rim catch. Per-tier rules
     below override only background + tinted shadow stops. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -1.5px 0 rgba(120, 70, 40, 0.22),
    0 -6px 14px -4px rgba(255, 220, 180, 0.18),
    0 3px 6px -1px rgba(80, 40, 25, 0.28),
    0 1px 0 rgba(255, 255, 255, 0.35);
  /* Material-settle transition — fast departure, gentle arrival. Player
     notices the tray upgrade when frame is changed in settings. */
  transition:
    background 520ms cubic-bezier(.22, .61, .36, 1),
    box-shadow 520ms cubic-bezier(.22, .61, .36, 1),
    border-color 520ms cubic-bezier(.22, .61, .36, 1);
}

/* Per-tier material — tray inherits frame's confection material so they read
   as one premium object. Micro-grain layer (2% repeating diagonal) kills
   plastic-plate look without registering visually. */

/* T1 Cherry Cream — classic confectionery cream */
.game-wrap[data-frame="cherry-cream"] .tier-bar {
  background:
    repeating-linear-gradient(127deg, rgba(255,255,255,0.025) 0 2px, rgba(0,0,0,0.025) 2px 4px),
    linear-gradient(180deg, #FFF1DC 0%, #FBE3C2 55%, #EFC99B 100%);
  border-top-color: rgba(255, 248, 232, 0.70);
}

/* T2 Strawberry Glaze — wet-icing glossy pink */
.game-wrap[data-frame="strawberry-glaze"] .tier-bar {
  background:
    repeating-linear-gradient(127deg, rgba(255,255,255,0.025) 0 2px, rgba(0,0,0,0.025) 2px 4px),
    linear-gradient(180deg, #FFD7DA 0%, #FBB4B8 50%, #E58892 100%);
  border-top-color: rgba(255, 225, 228, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 242, 0.65),
    inset 0 -1.5px 0 rgba(160, 55, 75, 0.28),
    0 -6px 14px -4px rgba(255, 180, 195, 0.28),
    0 3px 6px -1px rgba(120, 35, 55, 0.32),
    0 1px 0 rgba(255, 240, 242, 0.45);
}

/* T3 Mango Honey — warm amber, lit-from-within */
.game-wrap[data-frame="mango-honey"] .tier-bar {
  background:
    repeating-linear-gradient(127deg, rgba(255,255,255,0.025) 0 2px, rgba(0,0,0,0.025) 2px 4px),
    linear-gradient(180deg, #FFE0A0 0%, #F8C065 50%, #D89035 100%);
  border-top-color: rgba(255, 235, 195, 0.78);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 215, 0.70),
    inset 0 -1.5px 0 rgba(140, 75, 20, 0.32),
    0 -6px 14px -4px rgba(255, 195, 110, 0.34),
    0 3px 6px -1px rgba(110, 60, 15, 0.34),
    0 1px 0 rgba(255, 245, 215, 0.50);
}

/* T4 Pineapple Gold — polished metal w/ gold inner-rim "earned" cue */
.game-wrap[data-frame="pineapple-gold"] .tier-bar {
  background:
    repeating-linear-gradient(127deg, rgba(255,255,255,0.025) 0 2px, rgba(0,0,0,0.025) 2px 4px),
    linear-gradient(180deg, #FFE89A 0%, #F4C24A 35%, #C8902A 100%);
  border-top-color: rgba(255, 240, 195, 0.85);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 215, 0.80),
    inset 0 -1.5px 0 rgba(120, 75, 15, 0.38),
    0 -6px 14px -4px rgba(255, 215, 110, 0.42),
    0 3px 6px -1px rgba(95, 55, 10, 0.36),
    0 1px 0 rgba(255, 248, 215, 0.55);
  outline: 1px solid rgba(255, 215, 130, 0.55);
  outline-offset: -2px;
}

/* T5 Watermelon Crystal — translucent peach-prism + gold rim (apex) */
.game-wrap[data-frame="watermelon-crystal"] .tier-bar {
  background:
    repeating-linear-gradient(127deg, rgba(255,255,255,0.025) 0 2px, rgba(0,0,0,0.025) 2px 4px),
    linear-gradient(180deg,
      rgba(255, 230, 232, 0.85) 0%,
      rgba(255, 200, 215, 0.75) 35%,
      rgba(240, 175, 200, 0.85) 70%,
      rgba(220, 160, 190, 0.92) 100%);
  border-top-color: rgba(255, 235, 240, 0.85);
  backdrop-filter: blur(6px) saturate(1.15);
  -webkit-backdrop-filter: blur(6px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 250, 0.85),
    inset 0 -1.5px 0 rgba(150, 70, 110, 0.28),
    0 -6px 16px -4px rgba(255, 200, 220, 0.40),
    0 3px 8px -1px rgba(110, 45, 90, 0.30),
    0 1px 0 rgba(255, 245, 250, 0.60);
  outline: 1px solid rgba(255, 215, 130, 0.55);
  outline-offset: -2px;
}

/* Wells inherit tray material — slightly DARKER version of tray (carved-from
   illusion, not stuck-on chip). Designer's pick (option c). */
.game-wrap[data-frame="cherry-cream"] .tier-slot {
  background: radial-gradient(ellipse at 50% 35%, #F5D9A8 0%, #D8AC74 70%, #A87A48 100%);
}
.game-wrap[data-frame="strawberry-glaze"] .tier-slot {
  background: radial-gradient(ellipse at 50% 35%, #F4A4AB 0%, #C9747F 70%, #8E3F4F 100%);
}
.game-wrap[data-frame="mango-honey"] .tier-slot {
  background: radial-gradient(ellipse at 50% 35%, #E8AC55 0%, #B97820 70%, #7A4A0F 100%);
}
.game-wrap[data-frame="pineapple-gold"] .tier-slot {
  background: radial-gradient(ellipse at 50% 35%, #DDA838 0%, #A07418 70%, #5E430A 100%);
}
.game-wrap[data-frame="watermelon-crystal"] .tier-slot {
  background: radial-gradient(ellipse at 50% 35%, rgba(220,170,195,0.85) 0%, rgba(165,110,150,0.75) 70%, rgba(105,55,95,0.65) 100%);
}
/* Wave-13-cleanup (audit Batch 1): merget to back-to-back `.tier-slot`-blocks
   så vi unngår samme adjacent-split-fragilitet som har bitt oss før. */
.tier-slot {
  /* Grid-celle-relativ sizing: slot fyller grid-cellen sin (via min(100%,…))
     opp til en hard cap på 36px så slot ikke vokser absurd på 4K-skjermer.
     aspect-ratio: 1 deriverer høyden fra bredden. Ingen vw, ingen flex-
     shrink — grid-templatet (repeat(9, 1fr)) garanterer at sum av slot-
     bredder ≤ container-bredde, alltid, uansett enhet. */
  width: min(100%, 36px);
  aspect-ratio: 1;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  /* Stronger deboss — well now reads as carved-into-tray, not stuck-on chip */
  box-shadow:
    inset 0 2.5px 3px rgba(110, 70, 45, 0.36),
    inset 0 -1.5px 1.5px rgba(255, 250, 240, 0.62),
    0 1px 1px rgba(255, 255, 255, 0.4);
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 245, 230, 0.55) 0%, rgba(255, 230, 200, 0.18) 70%, rgba(180, 130, 90, 0.08) 100%);
  /* Material-settle transition for wells (in lockstep with tray).
     `:not(.is-anticipating):not(.is-holding-breath)`-overrideen under
     scoper bouncy transform-transition så wiggle-keyframes ikke fighter
     slotens egen transform-transition (dopamine #7 asterisk). */
  transition:
    background 520ms cubic-bezier(.22, .61, .36, 1),
    transform 280ms cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: auto;
  cursor: pointer;
  border: none;
  padding: 0;
}
.tier-slot:not(.is-anticipating):not(.is-holding-breath) {
  transition: transform 280ms cubic-bezier(.34,1.56,.64,1);
}
.tier-slot img {
  width: 86%;
  height: 86%;
  object-fit: contain;
  pointer-events: none;
  transition: opacity 220ms ease, filter 220ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1);
}
/* Cream silhouette: opacity bumped, sepia/brightness dropped per panel.
   Single-tone solid feel, double drop-shadow gives molded-into-surface depth. */
.tier-slot.is-unreached img {
  opacity: 0.35;  /* Wave-13.16 (R-2): 0.45 → 0.35 så locked føles MER unreached */
  filter: saturate(0)
          drop-shadow(0 1px 0 rgba(255, 245, 220, 0.55))
          drop-shadow(0 -0.5px 0 rgba(180, 130, 90, 0.20));
  transform: scale(0.85);
}
/* Wave-13.16 (Handlingsplan R-2): locked tier-slots får sterkere "carved-in"
   deboss-shadow + cream-to-shadow gradient så det tydelig leses som
   "progression-objektive locked". Tidligere: cream-on-cream knapt synlig. */
.tier-slot.is-unreached {
  box-shadow:
    inset 0 3px 5px rgba(110, 70, 45, 0.45),     /* dypere carved inset */
    inset 0 -1.5px 2px rgba(255, 250, 240, 0.55),
    0 1px 1px rgba(255, 255, 255, 0.4);
  background:
    radial-gradient(ellipse at 50% 35%,
      rgba(220, 200, 175, 0.55) 0%,
      rgba(180, 150, 120, 0.22) 60%,
      rgba(140, 105, 75, 0.15) 100%);
}
/* Reached: full color + lit-rim catch-light (Graphic Designer #9 — "the line
   between good UI and 100% rått"). Specular highlight on top edge of well
   sells "glaze just hardened around the fruit". */
.tier-slot.is-reached {
  box-shadow:
    inset 0 2.5px 3px rgba(110, 70, 45, 0.36),
    inset 0 -1.5px 1.5px rgba(255, 250, 240, 0.62),
    inset 0 0.5px 0 rgba(255, 255, 255, 0.85),    /* catch-light */
    0 1px 1px rgba(255, 255, 255, 0.4);
}
.tier-slot.is-reached img {
  opacity: 1;
  filter: drop-shadow(0 1px 2px rgba(80, 40, 60, 0.30));
}
/* Lifetime-only state (Game Designer #7): silhouette as if unreached this
   round, but tiny gold dot top-right says "you've done this before". */
.tier-slot.is-lifetime-only img {
  opacity: 0.45;
  filter: saturate(0.3) drop-shadow(0 1px 0 rgba(255, 245, 220, 0.55));
  transform: scale(0.88);
}
.tier-slot.is-lifetime-only::after {
  content: '';
  position: absolute;
  top: 8%;
  right: 8%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFD86B 0%, #E8A030 90%);
  box-shadow: 0 0 4px rgba(255, 200, 80, 0.85);
  pointer-events: none;
}
.tier-slot.is-just-unlocked {
  animation: tierUnlockPop 380ms cubic-bezier(.34,1.56,.64,1);
}
.tier-slot.is-just-unlocked img {
  animation: tierUnlockGlow 380ms ease-out;
}
/* Snappier curve per dopamine: drop the dip-to-0.96 (false weight), bigger
   overshoot for crisper snap. */
@keyframes tierUnlockPop {
  0%    { transform: scale(0.88); }
  40%   { transform: scale(1.22); }
  100%  { transform: scale(1); }
}
@keyframes tierUnlockGlow {
  0%   { filter: drop-shadow(0 0 12px rgba(255, 240, 200, 0.95)) brightness(1.35); }
  40%  { filter: drop-shadow(0 0 22px rgba(255, 220, 160, 0.90)) brightness(1.20); }
  100% { filter: drop-shadow(0 1px 2px rgba(80, 40, 60, 0.30)) brightness(1); }
}
.tier-slot--mystery {
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255, 245, 230, 0.45) 0%, rgba(220, 200, 180, 0.15) 100%);
}
/* WAX-SEAL glyph — replaces "?" per Graphic Designer's #6. Reads as "sealed
   for now" instead of "we haven't built this" (which "?" connotes as a
   help-icon in App Store top-100). 5-point starburst inside a soft circle. */
.tier-mystery-glyph {
  width: 56%;
  height: 56%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  pointer-events: none;
  font-size: 0;  /* hide any text, we draw via pseudo */
}
.tier-mystery-glyph::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(140, 90, 60, 0.30) 0%, rgba(140, 90, 60, 0.18) 70%, rgba(140, 90, 60, 0.08) 100%);
  box-shadow: inset 0 0.5px 0 rgba(255, 245, 220, 0.4);
}
.tier-mystery-glyph::after {
  /* 5-point starburst via star-clip-path — 12px sized */
  content: '';
  position: absolute;
  width: 60%;
  height: 60%;
  background: rgba(120, 80, 50, 0.55);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 1px 0 rgba(255, 245, 220, 0.4));
}
.tier-slot--mystery.is-teasing .tier-mystery-glyph {
  color: rgba(150, 80, 130, 0.55);
  animation: mysteryTease 3.2s ease-in-out infinite;
}
@keyframes mysteryTease {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50%      { transform: scale(1.10); opacity: 1; }
}
/* v1.1: anticipation breath when 2 same-tier fruits drift close on canvas.
   Threshold tightened per panel review (2.2r close, 1.4r imminent). */
.tier-slot.is-anticipating img {
  animation: anticipationBreath 2.4s ease-in-out infinite;
}
.tier-slot.is-holding-breath img {
  animation: none;
  transform: scale(1.08);
  opacity: 0.72;
}
@keyframes anticipationBreath {
  0%, 100% { transform: scale(0.88); opacity: 0.45; }
  50%      { transform: scale(1.04); opacity: 0.60; }
}
/* EXHALE — the killer move per Dopamine #9. Fires when imminent state ends
   without a merge happening (near-miss). Soft sigh-down + opacity dip = a
   "tiny visible disappointment" that PRIMES the next unlock to land 3x harder.
   "Single move that takes the bar from 8/10 to 10/10 rått." */
.tier-slot.is-exhaling img {
  animation: tierBarExhale 400ms ease-out;
}
@keyframes tierBarExhale {
  0%   { transform: scale(1.08); opacity: 0.72; }
  60%  { transform: scale(0.92); opacity: 0.30; }
  100% { transform: scale(0.88); opacity: 0.45; }
}
/* v1.1: set-complete bow chain when 8th tier unlocks (one-time per session) */
.tier-slot.is-bowing {
  animation: setCompleteBow 360ms ease-out;
}
@keyframes setCompleteBow {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16) translateY(-3px); }
  70%  { transform: scale(0.96) translateY(0); }
  100% { transform: scale(1); }
}
/* v1.1: tap-to-peek tooltip showing fruit name + score-value */
.tier-tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 250, 240, 0.96);
  color: #4a3578;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(80, 30, 60, 0.22);
  pointer-events: none;
  opacity: 0;
  transition: opacity 180ms;
  z-index: 11;
}
.tier-slot.is-peeking .tier-tooltip {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .tier-slot.is-just-unlocked,
  .tier-slot.is-anticipating img,
  .tier-slot.is-bowing,
  .tier-slot--mystery.is-teasing .tier-mystery-glyph {
    animation: none !important;
  }
}

/* ============================================================================
   GAME SETTINGS overlay (2026-05-12) — cog btn target. Separate from Collection.
   Sections: Sound | Points | Accessibility | General.
   ============================================================================ */
.game-settings-sections {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 4px 12px;
  overflow-y: auto;
}
.settings-section {
  /* Per-section gradient overrides nedenfor via [data-section]; cream fallback
     for any uncolored section. 0.92 opacity (was 0.45) + inner highlight gir
     juicy 3D card-feel som popper mot settings-bg. */
  background: linear-gradient(180deg, rgba(255, 248, 235, 0.92) 0%, rgba(255, 235, 220, 0.78) 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.78);
  border-radius: 18px;
  padding: 12px 14px 14px;
  box-shadow:
    0 6px 18px rgba(80, 30, 60, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(120, 70, 40, 0.10);
}
/* Per-section pastel gradients — brand-tonet kategori-fargekode.
   Mer mettet enn cream-default (0.92 opacity) men holder seg pastell så
   tekst og toggle-pill leser fortsatt. */
.settings-section[data-section="sound"] {
  background: linear-gradient(180deg,
    rgba(186, 226, 247, 0.96) 0%,
    rgba(123, 193, 237, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 18px rgba(91, 176, 232, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(40, 100, 160, 0.15);
}
.settings-section[data-section="points"] {
  background: linear-gradient(180deg,
    rgba(255, 232, 178, 0.96) 0%,
    rgba(255, 200, 115, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 18px rgba(240, 152, 38, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(180, 100, 30, 0.15);
}
.settings-section[data-section="accessibility"] {
  background: linear-gradient(180deg,
    rgba(229, 208, 240, 0.96) 0%,
    rgba(201, 148, 224, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 18px rgba(180, 122, 217, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(110, 50, 150, 0.15);
}
.settings-section[data-section="debug"] {
  background: linear-gradient(180deg,
    rgba(244, 220, 230, 0.96) 0%,
    rgba(225, 184, 210, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 18px rgba(140, 90, 130, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(90, 40, 90, 0.15);
}
.settings-section[data-section="general"] {
  background: linear-gradient(180deg,
    rgba(255, 220, 220, 0.96) 0%,
    rgba(255, 178, 178, 0.88) 100%);
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 6px 18px rgba(220, 80, 100, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1.5px 0 rgba(180, 60, 80, 0.15);
}
.settings-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #3a2560;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  /* Subtil hvit halo så tittelen leses tydelig over hver pastel-gradient */
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 2px 6px rgba(80, 30, 60, 0.10);
}
/* Wave-12.27: gold-ring frame rundt section-icon for premium Squish Melon-stil */
.settings-section-icon-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: url('assets/collection-circle.png') center / contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(80, 30, 60, 0.22));
  flex-shrink: 0;
}
.settings-section-icon {
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(80, 30, 60, 0.25));
  transform: translateY(-1px);
}
.settings-row--info {
  justify-content: center;
  padding-top: 4px;
  border-top: 1px dashed rgba(120, 80, 130, 0.18);
}
.settings-label--small {
  font-size: 10px;
  opacity: 0.55;
  font-style: italic;
}
/* DANGER pill — Reset progress etc. Wins over .settings-toggle base (green-ON).
   Vibration-shadow stack reads as "alarm chip" — different from neutral grey-OFF
   and brand green-ON. Clear hierarchy: green=ON, grey=OFF, red=DESTRUCTIVE. */
.settings-toggle--danger,
.settings-toggle--danger.is-off {
  background: linear-gradient(180deg, #FF7B8F 0%, #C92A48 100%);
  border: 1.5px solid rgba(255, 220, 220, 0.65);
  color: white;
  font-weight: 800;
  letter-spacing: 1.5px;
  box-shadow:
    0 4px 12px rgba(200, 40, 70, 0.50),
    inset 0 1px 0 rgba(255, 230, 230, 0.5),
    inset 0 -1.5px 0 rgba(150, 20, 50, 0.30);
}
.settings-toggle--danger:hover {
  transform: scale(1.05);
  box-shadow:
    0 6px 18px rgba(200, 40, 70, 0.65),
    inset 0 1px 0 rgba(255, 230, 230, 0.55),
    inset 0 -1.5px 0 rgba(150, 20, 50, 0.32);
}
.settings-toggle--danger .settings-toggle-text {
  color: white;
  text-shadow: 0 1px 1px rgba(120, 10, 30, 0.65);
}

/* Color-blind mode — boost contrast + saturate on fruit sprites so red/green
   fruits stay distinguishable. Adds slight outline via filter. */
.colorblind-mode #game {
  filter: contrast(1.12) saturate(1.18);
}
.colorblind-mode .tier-slot img {
  filter: contrast(1.15) saturate(1.2) drop-shadow(0 0 1px rgba(0, 0, 0, 0.4));
}

/* ============================================================================
   TROPHIES TAB v2 (2026-05-13) — tier-shelves + pedestal-modal.
   Per UX expert: Pokédex-pattern tier shelves (horizontal scroll per tier),
   progress-meta header drives "see what's left" retention. Tap any tile →
   trophy-pedestal modal opens with shimmer + drag-tilt parallax.
   Tier-letter badges removed (tier shown by shelf header instead).
   ============================================================================ */
/* Wave-13.17 + Wave-13.23: "X/Y unlocked" counter — rewarding badge-pill m/
   mini progress-fill + trophy-icon. Mer "collectible-progress" enn flat counter.
   Layout: [🏆 icon] [12/21] [UNLOCKED]  + thin gold-progress bar under. */
.cv2-badges-counter {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 4px auto 18px;
  padding: 9px 22px 12px;
  width: fit-content;
  background: linear-gradient(180deg, #fff8e8 0%, #ffe3b8 100%);
  border: 2px solid #e4a13e;
  border-radius: 999px;
  font-family: 'Lilita One', system-ui, sans-serif;
  color: #8a5a2b;
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1.5px 0 rgba(170, 100, 30, 0.18),
    0 3px 8px rgba(120, 70, 30, 0.28);
  overflow: hidden;
}
/* Wave-13.23: trophy mini-icon via ::before pseudo (no markup change).
   Bruker emoji 🏆 — universell unicode, ingen asset-load. */
.cv2-badges-counter::before {
  content: "🏆";
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(120, 70, 20, 0.4));
}
/* Wave-13.23: mini progress-fill ::after på bunnen — gradient gold fill
   som rendres tilsvarende prosent via inline-style (var(--progress-pct)). */
.cv2-badges-counter::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: var(--progress-pct, 50%);
  background: linear-gradient(90deg, #f7c560 0%, #ffd86b 50%, #f7c560 100%);
  border-radius: 0 999px 999px 0;
  box-shadow:
    0 0 6px rgba(255, 200, 100, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.cv2-badges-counter-num {
  font-size: 24px;
  color: #C9962F;
  text-shadow:
    0 1px 0 rgba(255, 244, 230, 0.95),
    0 2px 3px rgba(80, 50, 20, 0.4);
}
.cv2-badges-counter-divider {
  font-size: 18px;
  opacity: 0.55;
  margin: 0 -2px;
}
.cv2-badges-counter-total {
  font-size: 18px;
  opacity: 0.75;
}
.cv2-badges-counter-label {
  font-size: 11px;
  margin-left: 4px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
}

.trophy-collection {
  /* Wave-13.15 (Pre-demo polish P1-2): 3-col grid (2-col SE).
     Wave-13.19 (R3-10): refaktor til flex-column container — gridene
     bor nå inni .badge-tier-section per tier-gruppe, med
     .badge-tier-header som section-divider mellom. */
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 4px;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(180, 122, 217, 0.4) transparent;
}
/* Per-tier 3-col grid (2-col fallback på iPhone SE) */
.badge-tier-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  justify-items: center;
}
@media (max-width: 375px) {
  .badge-tier-section { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
/* Tier section-header — Wave-13.23: premium ornamental dividers.
   Gradient-line + small gold diamonds som endpoints på underline. Hver
   tier-section føles som en "hylle" i samlekort-boka. */
.badge-tier-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 14px 8px;
  margin: 6px 8px 2px;
  color: var(--tier-color, #D4A24C);
  /* Gradient-underline: starter transparent, peak ved label, fade ut */
  border-bottom: none;
}
.badge-tier-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    currentColor 12%,
    currentColor 88%,
    transparent 100%);
  opacity: 0.85;
  border-radius: 2px;
}
/* Ornamental diamond endpoints — sitter på begge sider av underline */
.badge-tier-header::before {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 6px;
  width: 8px;
  height: 8px;
  background: linear-gradient(135deg, #fff5d8 0%, currentColor 50%, rgba(120, 80, 40, 0.6) 100%);
  transform: rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(80, 40, 20, 0.35);
}
.badge-tier-header-label {
  position: relative;
  z-index: 1;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.65),
    0 2px 4px rgba(80, 40, 20, 0.25);
}
.badge-tier-header-count {
  position: relative;
  z-index: 1;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: rgba(74, 33, 80, 0.8);
  background: linear-gradient(180deg, rgba(255, 248, 230, 0.95) 0%, rgba(255, 232, 195, 0.85) 100%);
  border: 1px solid rgba(120, 70, 30, 0.25);
  padding: 3px 10px;
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 1px 2px rgba(80, 40, 20, 0.15);
}
.badge-tier-header--common    { --tier-color: #B07F30; }
.badge-tier-header--uncommon  { --tier-color: #4F9A48; }
.badge-tier-header--rare      { --tier-color: #4070C0; }
.badge-tier-header--epic      { --tier-color: #C04848; }
.badge-tier-header--legendary { --tier-color: #C87010; }
.badge-tier-header--mythic    { --tier-color: #B860A0; }
.trophy-collection::-webkit-scrollbar { width: 6px; }
.trophy-collection::-webkit-scrollbar-thumb {
  background: rgba(180, 122, 217, 0.4);
  border-radius: 3px;
}
.trophy-collection::-webkit-scrollbar-track { background: transparent; }

/* Wave-13.15: badge-tiles fra 240px-hero → grid-cell sized (~100-120px hver
   i 3-col layout, ~140px i 2-col SE). max-width fjernet så grid bestemmer. */
.badge-tile {
  --tier-color: #D4A24C;
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 50%;
  /* 2026-05-17 v11: dropet border + bg på base. PNG-en har sin egen design.
     Halo-issue: cream-board paper viser gjennom transparent PNG-corners.
     Det er board-bg, ikke en CSS-halo. Eneste vei å eliminere det er å
     bake PNGs uten transparent margin — defer til Martin re-eksporterer. */
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 4px 12px rgba(140, 80, 60, 0.18),
    inset 0 2px 4px rgba(255, 255, 255, 0.6),
    inset 0 -2px 4px rgba(180, 140, 100, 0.15);
  transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1),
              filter 0.18s ease,
              box-shadow 0.2s ease;
}
.badge-tile:active { transform: scale(0.95); }
.badge-tile:hover { transform: translateY(-2px); }

/* Per-tier border + glow color (matcher portrait frame palette) */
.badge-tile--common    { --tier-color: #D4A24C; }
.badge-tile--uncommon  { --tier-color: #7FBC78; }
.badge-tile--rare      { --tier-color: #6E8FCB; }
.badge-tile--epic      { --tier-color: #E06868; }
.badge-tile--legendary { --tier-color: #E89220; }
.badge-tile--mythic    { --tier-color: #E08FC5; }

/* Unlocked: 2026-05-17 v11 + Wave-13.23 — svak drop-shadow + subtle warm
   rim-glow for "earned/collected" feel. Checkmark via ::after pseudo. */
.badge-tile.is-unlocked {
  background: transparent;
  border: none;
  box-shadow:
    0 0 0 2px rgba(255, 215, 90, 0.0),       /* base, animeres via hover */
    0 4px 14px rgba(255, 200, 100, 0.18),    /* warm halo for "owned"-feel */
    0 2px 8px rgba(80, 40, 30, 0.18);
}
/* Wave-13.23: green checkmark ::after for unlocked-state.
   Sitter nederst-høyre, lite gold-ring rundt for premium-feel. */
.badge-tile.is-unlocked::after {
  content: "";
  position: absolute;
  bottom: 4%;
  right: 4%;
  width: 26%;
  height: 26%;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z' fill='%23fff' stroke='%23fff' stroke-width='1.5'/></svg>") center / 60% no-repeat,
    radial-gradient(circle at 35% 30%, #6EE7A0 0%, #2BAB5C 70%, #1F7E45 100%);
  border: 2px solid #FFF8E0;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgba(80, 30, 70, 0.25),
    0 2px 4px rgba(20, 80, 40, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.5);
  z-index: 4;
}
.badge-tile-img {
  /* 2026-05-17 v11: clean 100% fill uten scale (scale ga layout-bleed).
     PNG-content ~85% av canvas — den synlige "halo" rundt = transparent
     PNG corners over board-paper. Acceptable tradeoff til Martin
     re-eksporterer PNGs uten transparent margin. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(80, 40, 30, 0.32));
}

/* 2026-05-17 v4: ENGRAVED locked-look (per Martin's screenshot reference).
   Icon-PNG renderes BÅDE for unlocked + locked. CSS-filter på locked-icon
   gjør den til cream-monochrome silhouette. Inset shadows på tilen gjør at
   den ser PRESSET INN i cream-paper — som en kavert/embossed seglet. */
.badge-tile.is-locked {
  /* 2026-05-17 v9: bg transparent (var: radial-gradient cream-pearl). Engraved
     silhouetten sitter direkte på board-paperet under = ingen ekstra cream halo
     rundt. Inset shadows + subtle ring-rim gir fortsatt "pressed-in" illusjon. */
  border: none;
  background: transparent;
  box-shadow:
    /* Indre kavert-skygge øverst */
    inset 0 5px 8px rgba(170, 130, 90, 0.35),
    inset 0 -3px 5px rgba(255, 245, 220, 0.4),
    /* Tynn outer rim som markerer kanten av indenten */
    0 0 0 1px rgba(180, 145, 100, 0.25);
  filter: none;
}
.badge-tile.is-locked .badge-tile-img {
  /* Cream-monochrome filter — fjerner farge, beholder shape som silhouette */
  filter:
    grayscale(1)
    sepia(0.5)
    saturate(0.5)
    brightness(0.92)
    /* Engraved-illusjon: dark top-edge (skygge nedi groven), light bottom (lyset
       fanger nedre kanten av indenten) */
    drop-shadow(0 -2px 0 rgba(140, 105, 70, 0.55))
    drop-shadow(0 2px 0 rgba(255, 248, 225, 0.7));
  opacity: 0.78;
  mix-blend-mode: multiply;       /* integrerer silhuetten med cream-bg */
}
/* Liten gemstone ved bunn-senter — 2026-05-17 v7: matcher tier-rarity per
   Martin (var: alltid pink). Bruker --ruby-color custom prop per tier. */
.badge-tile.is-locked::after {
  content: "";
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 5%;
  height: 5%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    var(--ruby-highlight, #FF6B85),
    var(--ruby-mid, #B82850) 70%,
    var(--ruby-dark, #6B1428)
  );
  box-shadow:
    0 1px 2px rgba(80, 20, 40, 0.5),
    inset 0 1px 1px rgba(255, 220, 230, 0.6);
}

/* Wave-12.24: collection-circle gold-ring rundt hver badge */
.badge-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('assets/collection-circle.png') center / contain no-repeat;
  pointer-events: none;
  z-index: 3;
}
.badge-tile.is-locked::before {
  filter: grayscale(0.9) brightness(0.75);
  opacity: 0.55;
}

/* Per-tier gemstone-palette (matcher rarity-colors brukt overalt) */
.badge-tile.badge-tile--common {
  --ruby-highlight: #FFD86B;   /* gold */
  --ruby-mid:       #D4A24C;
  --ruby-dark:      #7A5A20;
}
.badge-tile.badge-tile--uncommon {
  --ruby-highlight: #B5E8A0;   /* sage emerald */
  --ruby-mid:       #6FA858;
  --ruby-dark:      #2A5A20;
}
.badge-tile.badge-tile--rare {
  --ruby-highlight: #A8C4F0;   /* sapphire blue */
  --ruby-mid:       #5A7FB8;
  --ruby-dark:      #1F3A6B;
}
.badge-tile.badge-tile--epic {
  --ruby-highlight: #FFA8A8;   /* coral ruby */
  --ruby-mid:       #D04848;
  --ruby-dark:      #6B1A1A;
}
.badge-tile.badge-tile--legendary {
  --ruby-highlight: #FFD080;   /* amber */
  --ruby-mid:       #E89220;
  --ruby-dark:      #7A4A0A;
}
.badge-tile.badge-tile--mythic {
  --ruby-highlight: #FFB8E5;   /* pink-orchid (default pink stays for mythic) */
  --ruby-mid:       #C760A0;
  --ruby-dark:      #5A1A50;
}

/* Fallback "?" mark (vises hvis ach.icon mangler — for nye badges som ikke har art) */
.badge-tile-locked-mark {
  font-family: 'Lilita One', cursive;
  font-size: clamp(40px, 11vw, 64px);
  color: rgba(140, 110, 80, 0.55);
  text-shadow:
    0 2px 0 rgba(255, 255, 255, 0.5),
    0 -1px 0 rgba(100, 75, 50, 0.25);
  line-height: 1;
  user-select: none;
}

@media (prefers-reduced-motion: reduce) {
  .badge-tile { transition: none; }
}

/* === BADGES ALBUM (2026-05-12) — sticker-book layout på cream paper-board.
   18 carved slots (6 rows × 3 columns) på toppen av badges-board.png. When
   an achievement is unlocked, its actual badge-PNG renders inside the slot;
   when locked, the embossed fruit-silhouette baked into the board PNG shows
   through. Tap any slot to open trophy-pedestal modal.

   2026-05-12: BADGES-page er nå EGEN full-screen side (ikke tab i Collection).
   Collection-knapp i HUD → åpner direkte denne siden. Page-wordmark "BADGES"
   ligger absolute-positioned i header-sonen av PNGen. Senere får vi swipe-flow
   til de andre kategoriene (BG / FRAMES / FRUITS / MUSIC / STATS). */
.badges-album {
  position: relative;
  /* 4-AGENT-AUDIT 2026-05-16: WIDTH-bound for å matche .board-page eksakt.
     Begge bruker identisk sizing-formel så de aligner perfekt across panes. */
  width: min(100% - 8px, 600px);
  max-width: 600px;
  aspect-ratio: 941 / 1672;
  height: auto;
  margin: 0 auto;
  background: url('assets/badges-board.png') center / contain no-repeat;
}
/* Badges-wordmark sitter i den tomme header-sonen på badges-board.png.
   Header-sonen er ca y=7-22% av image-høyden, sentered horizontalt. */
.badges-album-logo {
  position: absolute;
  top: 16%;  /* match .board-page-title/logo cushion for cross-page parity */
  left: 50%;
  width: 56%;
  transform: translate(-50%, -50%);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(0 4px 10px rgba(140, 30, 50, 0.45));
  animation: badgeWordmarkPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgeWordmarkPop {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.badges-slot {
  position: absolute;
  width: 23%;  /* 17 → 22 → 25 → 23 — bittelitt mindre per founder */
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.badges-slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 3px 8px rgba(80, 30, 60, 0.4));
  animation: badgePopIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgePopIn {
  0%   { opacity: 0; transform: scale(0.5); }
  100% { opacity: 1; transform: scale(1); }
}
.badges-slot.is-locked { cursor: pointer; }  /* still tappable to view req */
.badges-slot:hover:not(.is-locked) { transform: translate(-50%, -50%) scale(1.08); }
.badges-slot:active { transform: translate(-50%, -50%) scale(0.95); }
@media (prefers-reduced-motion: reduce) {
  .badges-slot img { animation: none; }
}

/* === Progress meta header — drives retention via "X/N collected" === */
.trophy-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px 14px;
  background: linear-gradient(180deg, rgba(255, 250, 240, 0.86), rgba(255, 245, 230, 0.78));
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.trophy-meta-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.trophy-meta-count {
  display: flex;
  align-items: baseline;
  font-family: "Lilita One", "Fredoka", sans-serif;
}
.trophy-meta-num {
  font-size: 30px;
  color: rgba(43, 31, 58, 0.92);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}
.trophy-meta-total {
  font-size: 18px;
  color: rgba(43, 31, 58, 0.55);
  margin-left: 2px;
}
.trophy-meta-label {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(74, 53, 120, 0.7);
}
.trophy-meta-bar {
  height: 6px;
  background: rgba(43, 31, 58, 0.15);
  border-radius: 4px;
  overflow: hidden;
}
.trophy-meta-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD25F 0%, #FF8FA8 50%, #B47AD9 100%);
  border-radius: 4px;
  transition: width 600ms cubic-bezier(.34,1.56,.64,1);
  box-shadow: 0 0 8px rgba(255, 210, 95, 0.6);
}

/* === Tier shelf — one per tier, horizontal scrollable strip === */
.trophy-shelf {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.trophy-shelf-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px;
}
.trophy-shelf-tier {
  font-family: "Lilita One", "Fredoka", sans-serif;
  font-size: 16px;
  color: var(--tier-stroke);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4),
               0 0 12px color-mix(in oklab, var(--tier-burst) 80%, transparent);
  letter-spacing: 0.04em;
}
.trophy-shelf--common    .trophy-shelf-tier { color: rgba(120, 100, 80, 0.95); }
.trophy-shelf--uncommon  .trophy-shelf-tier { color: #2F8B6A; }
.trophy-shelf--rare      .trophy-shelf-tier { color: #2D7CBA; }
.trophy-shelf--epic      .trophy-shelf-tier { color: #7A4DAA; }
.trophy-shelf--legendary .trophy-shelf-tier { color: #C2761F; }
.trophy-shelf--mythic    .trophy-shelf-tier {
  background: linear-gradient(90deg, #FF4E78 0%, #FFD25F 50%, #FF4E78 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: trophyShelfMythicSweep 4s ease-in-out infinite;
}
@keyframes trophyShelfMythicSweep {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.trophy-shelf-count {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: rgba(43, 31, 58, 0.65);
  letter-spacing: 0.06em;
}
.trophy-shelf-strip {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: visible;
  padding: 4px 2px 8px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 31, 58, 0.25) transparent;
}
.trophy-shelf-strip::-webkit-scrollbar { height: 4px; }
.trophy-shelf-strip::-webkit-scrollbar-thumb { background: rgba(43, 31, 58, 0.25); border-radius: 2px; }

/* === Tile — bigger badge in shelf format, button-styled for tap-target === */
.trophy-tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(108px, 30vw, 138px);
  border-radius: 18px;
  padding: 12px 8px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  transition: transform 180ms cubic-bezier(.34,1.56,.64,1),
              box-shadow 200ms ease-out;
}
.trophy-tile:hover, .trophy-tile:focus-visible {
  transform: translateY(-2px) scale(1.02);
}
.trophy-tile:active { transform: scale(0.97); }
.trophy-tile:focus-visible { outline: 2px solid color-mix(in oklab, var(--tier-fill) 80%, #fff); outline-offset: 2px; }

.trophy-tile.is-unlocked {
  background: linear-gradient(168deg,
    color-mix(in oklab, var(--tier-fill) 88%, #fff) 0%,
    color-mix(in oklab, var(--tier-fill) 65%, #000 18%) 100%);
  border: 1px solid color-mix(in oklab, var(--tier-fill), #fff 30%);
  box-shadow:
    0 4px 12px color-mix(in oklab, var(--tier-fill) 35%, rgba(80, 30, 60, 0.18)),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
.trophy-tile.is-locked {
  background: rgba(43, 31, 58, 0.16);
  border: 1px solid rgba(120, 80, 130, 0.22);
}
.trophy-icon {
  width: 100%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 3px 6px rgba(43, 31, 58, 0.32));
}
.trophy-badge-img {
  width: 92%;
  height: 92%;
  object-fit: contain;
  pointer-events: none;
  display: block;
}
.trophy-tile.is-locked .trophy-badge-img {
  filter: grayscale(0.9) brightness(0.78) opacity(0.5);
}

/* Mythic apex tile gets gold gradient sweep */
.trophy-tile.is-unlocked.trophy-tile--mythic {
  background: linear-gradient(135deg, #FF4E78 0%, #FFD25F 50%, #FF4E78 100%);
  background-size: 200% 100%;
  animation: trophyMythicSweep 4s ease-in-out infinite;
  box-shadow:
    0 6px 16px rgba(255, 78, 120, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
@keyframes trophyMythicSweep {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trophy-tile.is-unlocked.trophy-tile--mythic,
  .trophy-shelf--mythic .trophy-shelf-tier { animation: none; }
}

/* === ACHIEVEMENT UNLOCK CINEMA v2 (2026-05-13) =========================
   Tier-gated cinematic unlock-feedback. Three flavors:
     .is-light  (Common/Uncommon): card slides in from top, no dim/vignette
     .is-full   (Rare/Epic):       + vignette wash + sunburst + confetti
     .is-mythic (Legendary/Mythic): + screen dim + CTA, slower timing
   Tier color drives --tier-fill/--tier-burst CSS vars (set from JS).
   Brand-lock: Pokémon-Sleep cozy, NOT Royal-Match arcade.
   ====================================================================== */
.ach-cinema {
  position: fixed;
  inset: 0;
  z-index: 240;
  pointer-events: none;
  --tier-fill:   #FFF4E6;
  --tier-burst:  #FFE8D1;
  --tier-stroke: rgba(43, 31, 58, 0.85);
}
.ach-cinema.hidden { display: none; }

/* DIM — full-screen dark layer, only visible on .is-full / .is-mythic */
.ach-cinema-dim {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 30, 0);
  transition: background 320ms ease-out;
  pointer-events: none;
}
.ach-cinema.is-full.is-showing .ach-cinema-dim   { background: rgba(20, 12, 30, 0.38); }
.ach-cinema.is-mythic.is-showing .ach-cinema-dim { background: rgba(20, 12, 30, 0.62); }

/* VIGNETTE — radial tier-color wash from center, only .is-full/.is-mythic */
.ach-cinema-vignette {
  position: absolute;
  inset: -10%;
  background: radial-gradient(
    ellipse at center,
    color-mix(in oklab, var(--tier-fill) 65%, transparent) 0%,
    color-mix(in oklab, var(--tier-burst) 38%, transparent) 28%,
    transparent 62%
  );
  opacity: 0;
  transition: opacity 380ms ease-out;
  mix-blend-mode: screen;
  pointer-events: none;
}
.ach-cinema.is-full.is-showing .ach-cinema-vignette,
.ach-cinema.is-mythic.is-showing .ach-cinema-vignette { opacity: 0.85; }

/* SUNBURST — rotating conic-gradient rays behind the card */
.ach-cinema-sunburst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180vw;
  height: 180vw;
  max-width: 1200px;
  max-height: 1200px;
  transform: translate(-50%, -50%) scale(0.4);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    color-mix(in oklab, var(--tier-burst) 60%, transparent) 8deg,
    transparent 18deg,
    transparent 22deg,
    color-mix(in oklab, var(--tier-fill) 50%, transparent) 30deg,
    transparent 40deg
  );
  opacity: 0;
  transition: opacity 480ms ease-out, transform 1600ms cubic-bezier(.16,.86,.4,1);
  mix-blend-mode: screen;
  pointer-events: none;
  border-radius: 50%;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 65%);
}
.ach-cinema.is-full.is-showing .ach-cinema-sunburst,
.ach-cinema.is-mythic.is-showing .ach-cinema-sunburst {
  opacity: 0.75;
  animation: cinemaSunburstSpin 14s linear infinite;
}
.ach-cinema.is-full.is-showing .ach-cinema-sunburst   { transform: translate(-50%, -50%) scale(1); }
.ach-cinema.is-mythic.is-showing .ach-cinema-sunburst { transform: translate(-50%, -50%) scale(1.2); opacity: 0.92; }
@keyframes cinemaSunburstSpin {
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1); }
}
.ach-cinema.is-mythic.is-showing .ach-cinema-sunburst {
  animation: cinemaSunburstSpinMythic 18s linear infinite;
}
@keyframes cinemaSunburstSpinMythic {
  to { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); }
}

/* CONFETTI — container centered on screen, particles spray outward */
.ach-cinema-confetti {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ach-confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  width: 9px;
  height: 13px;
  border-radius: 2px;
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  animation: confettiFly 1500ms cubic-bezier(.16,.86,.4,1) forwards;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}
@keyframes confettiFly {
  0%   { transform: translate(-50%, -50%) scale(0.3) rotate(0deg); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy) + 90px)) scale(1) rotate(var(--rot)); opacity: 0; }
}

/* CARD — badge + text wrapper. Spawns with overshoot bounce. */
.ach-cinema-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 22px 24px 24px;
  background: rgba(255, 250, 240, 0.97);
  border-radius: 26px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 16px 44px rgba(80, 30, 60, 0.36),
    0 0 0 4px color-mix(in oklab, var(--tier-burst) 50%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  max-width: 86vw;
  transition: opacity 220ms ease-out, transform 520ms cubic-bezier(.34, 1.56, .64, 1);
}
.ach-cinema.is-showing .ach-cinema-card {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.ach-cinema.is-exiting .ach-cinema-card {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 280ms ease-out, transform 320ms ease-in;
}

/* Light flavor: same center column card as full/mythic, just smaller and
   with no vignette/sunburst/confetti. Same overshoot-bounce entry so the
   tier-progression feels coherent — light = baby cinema, not a different
   pattern. */
.ach-cinema.is-light .ach-cinema-card {
  padding: 16px 20px 18px;
  border-radius: 22px;
  box-shadow:
    0 10px 28px rgba(80, 30, 60, 0.28),
    0 0 0 3px color-mix(in oklab, var(--tier-burst) 40%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* BADGE wrapper + image */
.ach-cinema-badge-wrap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  border-radius: 20px;
}
.ach-cinema-badge {
  display: block;
  width: clamp(140px, 42vw, 200px);
  height: auto;
  filter: drop-shadow(0 6px 14px rgba(80, 30, 60, 0.30));
}
.ach-cinema.is-showing .ach-cinema-badge {
  animation: cinemaBadgePop 580ms cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes cinemaBadgePop {
  0%   { transform: scale(0.35) rotate(-10deg); }
  62%  { transform: scale(1.12) rotate(3deg);   }
  100% { transform: scale(1)    rotate(0deg);   }
}

/* Light flavor: smaller badge but same centered column layout */
.ach-cinema.is-light .ach-cinema-badge {
  width: clamp(100px, 30vw, 140px);
}

/* Mythic: bigger badge + warm gold halo + slow turntable */
.ach-cinema.is-mythic .ach-cinema-badge {
  width: clamp(180px, 54vw, 240px);
  filter: drop-shadow(0 0 22px rgba(255, 200, 80, 0.85))
          drop-shadow(0 8px 18px rgba(80, 30, 60, 0.45));
}
.ach-cinema.is-mythic.is-showing .ach-cinema-badge {
  animation:
    cinemaBadgePop 720ms cubic-bezier(.34, 1.56, .64, 1),
    cinemaBadgeTurntable 12s linear 720ms infinite;
}
@keyframes cinemaBadgeTurntable {
  0%   { transform: rotate(0deg)   scale(1);    }
  50%  { transform: rotate(0deg)   scale(1.03); }
  100% { transform: rotate(0deg)   scale(1);    }
}

/* SHIMMER — light-stripe sweep across badge (full + mythic) */
.ach-cinema-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.55) 45%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.55) 55%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.ach-cinema.is-full.is-showing .ach-cinema-shimmer {
  animation: cinemaShimmerSweep 1100ms ease-out 700ms forwards;
}
.ach-cinema.is-mythic.is-showing .ach-cinema-shimmer {
  animation: cinemaShimmerSweep 1300ms ease-out 900ms infinite;
}
@keyframes cinemaShimmerSweep {
  0%   { left: -100%; opacity: 0;   }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { left: 220%;  opacity: 0;   }
}
/* Light flavor doesn't get shimmer (too fast a tier to be worth it) */
.ach-cinema.is-light .ach-cinema-shimmer { display: none; }

/* TEXT — label, name, desc */
.ach-cinema-text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
/* Light flavor uses same centered text-align as full+mythic (default) */
.ach-cinema-label {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.2em;
  color: rgba(74, 53, 120, 0.62);
  text-transform: uppercase;
}
.ach-cinema.is-mythic .ach-cinema-label {
  color: color-mix(in oklab, var(--tier-fill) 60%, rgba(80, 30, 60, 0.85));
  font-size: 11px;
}
.ach-cinema-name {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(18px, 5vw, 28px);
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
.ach-cinema.is-light .ach-cinema-name { font-size: clamp(16px, 4.2vw, 22px); }
.ach-cinema.is-mythic .ach-cinema-name {
  font-size: clamp(22px, 6.5vw, 34px);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 14px color-mix(in oklab, var(--tier-burst) 70%, transparent);
}
.ach-cinema-desc {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: rgba(43, 31, 58, 0.75);
  margin-top: 2px;
}
.ach-cinema.is-light .ach-cinema-desc { font-size: 10px; }

/* MYTHIC card gets warm gradient bg */
.ach-cinema.is-mythic .ach-cinema-card {
  background: linear-gradient(180deg, rgba(255, 240, 200, 0.97), rgba(255, 220, 200, 0.97));
  padding: 28px 28px 26px;
}

/* CTA — "Tap to continue" for mythic only */
.ach-cinema-cta {
  position: absolute;
  bottom: 14vh;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  color: rgba(255, 250, 240, 0.92);
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  display: none;
}
.ach-cinema.is-mythic .ach-cinema-cta { display: block; }
.ach-cinema.is-mythic.is-showing .ach-cinema-cta {
  animation: cinemaCtaFadePulse 1400ms ease-in-out 1600ms infinite;
}
@keyframes cinemaCtaFadePulse {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) translateY(0); }
  50%      { opacity: 1;    transform: translateX(-50%) translateY(-3px); }
}

/* Reduced-motion: kill all animations, simple 400ms fade-in */
@media (prefers-reduced-motion: reduce) {
  .ach-cinema-card,
  .ach-cinema-badge,
  .ach-cinema-sunburst,
  .ach-cinema-shimmer,
  .ach-cinema-cta,
  .ach-confetti-piece {
    animation: none !important;
    transition: opacity 400ms ease-out !important;
  }
  .ach-cinema.is-showing .ach-cinema-card {
    transform: translate(-50%, -50%) scale(1);
  }
  .ach-cinema-confetti { display: none; }
  .ach-cinema-sunburst { display: none; }
}

/* === DEBUG: cinema preview buttons in Settings (dev-only) =============== */
.cinema-debug-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 4px 16px 8px;
}
.cinema-debug-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.3px;
  padding: 8px 4px;
  background: rgba(255, 250, 240, 0.85);
  border: 1px solid rgba(74, 53, 120, 0.18);
  border-radius: 12px;
  color: #3a2560;
  cursor: pointer;
  transition: transform 120ms ease-out, background 120ms ease-out;
}
.cinema-debug-btn:hover, .cinema-debug-btn:active {
  background: rgba(255, 235, 200, 0.95);
  transform: scale(0.96);
}
.cinema-debug-btn[data-tier="common"]    { border-color: rgba(120, 100, 80, 0.30); }
.cinema-debug-btn[data-tier="uncommon"]  { border-color: rgba(91, 203, 151, 0.55); }
.cinema-debug-btn[data-tier="rare"]      { border-color: rgba(91, 176, 232, 0.55); }
.cinema-debug-btn[data-tier="epic"]      { border-color: rgba(180, 122, 217, 0.55); }
.cinema-debug-btn[data-tier="legendary"] { border-color: rgba(240, 152, 38, 0.55); }
.cinema-debug-btn[data-tier="mythic"]    { border-color: rgba(255, 78, 120, 0.65); background: linear-gradient(135deg, rgba(255, 235, 200, 0.85), rgba(255, 220, 235, 0.85)); }
.trophy-name {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 13px;
  line-height: 1.1;
  color: var(--tier-stroke);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  margin-top: 4px;
  word-break: break-word;
}
.trophy-tile.is-locked .trophy-name {
  color: rgba(43, 31, 58, 0.55);
  text-shadow: none;
}
.trophy-desc {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 9.5px;
  line-height: 1.2;
  color: rgba(43, 31, 58, 0.75);
  margin-top: 4px;
  opacity: 0.85;
}
.trophy-tile.is-locked .trophy-desc {
  color: rgba(43, 31, 58, 0.65);
}
.trophy-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(43, 31, 58, 0.18);
  overflow: hidden;
}
.trophy-progress-fill {
  height: 100%;
  background: var(--tier-fill);
  transition: width 600ms ease-out;
}
/* Mythic tier — single epic gold sweep animation */
.trophy-tile.is-unlocked.trophy-tile--mythic {
  background: linear-gradient(135deg, #FF4E78 0%, #FFD25F 50%, #FF4E78 100%);
  background-size: 200% 100%;
  animation: trophyMythicSweep 4s ease-in-out infinite;
}
@keyframes trophyMythicSweep {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .trophy-tile.is-unlocked.trophy-tile--mythic { animation: none; }
}

/* ============================================================================
   TROPHY PEDESTAL MODAL (2026-05-13) — Pokémon-Sleep-style detail-view.
   Opens on tap of any trophy tile in Collection. Big badge centered with
   auto-loop shimmer-sweep + drag-to-tilt parallax. Tap outside to dismiss.
   z-index 250 (above settings overlay 60, above cinema 240).
   ============================================================================ */
.trophy-pedestal {
  position: fixed;
  inset: 0;
  /* Wave-12.25: z-index bumped fra 250 -> 9500 saa modal vises OVER
     .cv2 collection-overlay (z-9000). */
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  --tier-fill:   #FFF4E6;
  --tier-burst:  #FFE8D1;
  --tier-stroke: rgba(43, 31, 58, 0.85);
  opacity: 0;
  transition: opacity 280ms ease-out;
}
.trophy-pedestal.hidden { display: none; }
.trophy-pedestal.is-showing { opacity: 1; }

.trophy-pedestal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 30, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Tier-color aura behind badge (radial glow) */
.trophy-pedestal-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130vw;
  max-width: 900px;
  height: 130vw;
  max-height: 900px;
  transform: translate(-50%, -50%) scale(0.5);
  background: radial-gradient(
    ellipse at center,
    color-mix(in oklab, var(--tier-burst) 65%, transparent) 0%,
    color-mix(in oklab, var(--tier-fill) 35%, transparent) 30%,
    transparent 60%
  );
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 480ms ease-out, transform 700ms cubic-bezier(.34, 1.56, .64, 1);
  pointer-events: none;
}
.trophy-pedestal.is-showing .trophy-pedestal-aura {
  opacity: 0.85;
  transform: translate(-50%, -50%) scale(1);
}
.trophy-pedestal.is-locked .trophy-pedestal-aura { opacity: 0.35; }

/* Close (X) button — top right */
.trophy-pedestal-close {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 250, 240, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: rgba(43, 31, 58, 0.85);
  font-family: "Lilita One", sans-serif;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(80, 30, 60, 0.32);
  transition: transform 140ms ease-out;
  z-index: 2;
}
.trophy-pedestal-close:hover, .trophy-pedestal-close:active {
  transform: scale(0.92);
}

/* Content column — tier label, badge, text */
.trophy-pedestal-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 0 20px;
  max-width: 92vw;
}

/* Tier pill at top */
.trophy-pedestal-tier {
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 6px 14px;
  border-radius: 999px;
  color: var(--tier-stroke);
  background: color-mix(in oklab, var(--tier-fill) 70%, #fff 30%);
  border: 1px solid color-mix(in oklab, var(--tier-burst) 70%, transparent);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(80, 30, 60, 0.25);
}
.trophy-pedestal[data-tier="mythic"] .trophy-pedestal-tier {
  background: linear-gradient(90deg, #FF4E78, #FFD25F, #FF4E78);
  background-size: 200% 100%;
  color: rgba(255, 255, 255, 0.96);
  text-shadow: 0 1px 2px rgba(120, 30, 60, 0.5);
  border-color: rgba(255, 215, 100, 0.8);
  animation: trophyShelfMythicSweep 4s ease-in-out infinite;
}

/* Badge wrap: 3D perspective container for tilt parallax */
.trophy-pedestal-badge-wrap {
  position: relative;
  width: clamp(220px, 64vw, 320px);
  aspect-ratio: 1;
  perspective: 800px;
  border-radius: 26px;
  overflow: hidden;
  cursor: grab;
  --tilt: 0deg;
  touch-action: none;
}
.trophy-pedestal-badge-wrap.is-dragging { cursor: grabbing; }

.trophy-pedestal-badge {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: rotateY(var(--tilt, 0deg));
  transform-style: preserve-3d;
  transition: transform 480ms cubic-bezier(.34, 1.56, .64, 1);
  filter: drop-shadow(0 12px 28px rgba(80, 30, 60, 0.40));
  pointer-events: none; /* let wrap handle pointer events */
}
.trophy-pedestal-badge-wrap.is-dragging .trophy-pedestal-badge {
  transition: none; /* instant follow during drag */
}
.trophy-pedestal.is-locked .trophy-pedestal-badge {
  filter: grayscale(0.92) brightness(0.7) opacity(0.55) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.4));
}

/* Auto-loop shimmer-sweep across badge (Pokémon TCG holo move) */
.trophy-pedestal-shimmer {
  position: absolute;
  top: 0;
  left: -80%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 45%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(255, 255, 255, 0.6) 55%,
    transparent 100%
  );
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
}
.trophy-pedestal.is-showing.is-unlocked .trophy-pedestal-shimmer {
  animation: trophyPedestalShimmer 4s ease-in-out 600ms infinite;
}
@keyframes trophyPedestalShimmer {
  0%   { left: -80%; opacity: 0;    }
  10%  { opacity: 0.85; }
  60%  { opacity: 0.85; }
  70%  { left: 200%; opacity: 0;    }
  100% { left: 200%; opacity: 0;    }
}

/* Mythic apex: slow rotate-pulse breathing on badge */
.trophy-pedestal[data-tier="mythic"].is-unlocked .trophy-pedestal-badge {
  animation: trophyPedestalMythicBreath 6s ease-in-out infinite;
}
@keyframes trophyPedestalMythicBreath {
  0%, 100% { filter: drop-shadow(0 12px 28px rgba(80, 30, 60, 0.40))
                     drop-shadow(0 0 18px rgba(255, 200, 80, 0.5)); }
  50%      { filter: drop-shadow(0 12px 28px rgba(80, 30, 60, 0.40))
                     drop-shadow(0 0 32px rgba(255, 200, 80, 0.95)); }
}

/* Text block below badge */
.trophy-pedestal-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  max-width: 88vw;
}
.trophy-pedestal-name {
  font-family: "Fredoka", "Nunito", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(22px, 6vw, 30px);
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6),
               0 2px 14px rgba(0, 0, 0, 0.5);
  color: var(--tier-fill);
}
.trophy-pedestal.is-locked .trophy-pedestal-name {
  color: rgba(255, 250, 240, 0.55);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.trophy-pedestal-desc {
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: clamp(12px, 3.2vw, 14px);
  color: rgba(255, 250, 240, 0.85);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  margin-top: 2px;
}
.trophy-pedestal-status {
  margin-top: 4px;
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 10px;
  letter-spacing: 0.22em;
  padding: 4px 12px;
  border-radius: 999px;
}
.trophy-pedestal.is-unlocked .trophy-pedestal-status {
  background: rgba(91, 203, 151, 0.22);
  color: #7CE0C6;
  border: 1px solid rgba(91, 203, 151, 0.55);
}
.trophy-pedestal.is-locked .trophy-pedestal-status {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 250, 240, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Reduced-motion: no shimmer, no aura-scale, no mythic-breath */
@media (prefers-reduced-motion: reduce) {
  .trophy-pedestal-shimmer,
  .trophy-pedestal[data-tier="mythic"].is-unlocked .trophy-pedestal-badge,
  .trophy-pedestal[data-tier="mythic"] .trophy-pedestal-tier {
    animation: none !important;
  }
  .trophy-pedestal.is-showing .trophy-pedestal-aura {
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 400ms ease-out;
  }
}

/* === CRYSTAL SEEDS HUD ICON (monetization phase 1, redesign 2026-05-16) ===
   Ikon-only design (ingen pill-bg) — matcher dimensjonalt chest+cog (48×48
   container, ~40px effektivt ikon). Bor i .hud-right-cluster før next-bubble.
   - Glow: dobbel drop-shadow (tight rosa + soft halo) på selve PNG-en.
   - Orbit-partikler: 3 bittesmå CSS-prikker som svever rundt iconet,
     forskjellig fase + retning så bevegelsen aldri ser repetitiv ut.
   - Counter: hvit-gradient text rett til høyre, tabular-nums for stabil
     bredde når verdien rulles fra 0 → 999+.
   - Bump: re-bruker @keyframes scorePulse på counter ved seed-arrival. */
.hud-seeds {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: none;
  pointer-events: auto;
  user-select: none;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  color: #ffffff;
}
.hud-seeds-icon {
  /* 2026-05-18: 32 → 38 (+19%) per Martin. */
  width: 38px;
  height: 38px;
  object-fit: contain;
  /* Wave-13.35: pink-glow bytter til theme-accent — matcher equipped theme.
     Hairline white + dark contact-shadow beholdt for separation.
     Outer halo bytter mellom apricot-peach / blueberry-purple / kiwi-green / osv. */
  filter:
    drop-shadow(0 0 0.6px rgba(255, 255, 255, 0.95))
    drop-shadow(0 2px 3px rgba(80, 20, 60, 0.45))
    drop-shadow(0 0 8px rgba(var(--scene-accent-rgb, 255, 130, 180), 0.55))
    drop-shadow(0 0 16px rgba(var(--scene-accent-rgb, 255, 80, 150), 0.30));
  animation: seedIconBreathe 4.8s ease-in-out infinite;
}
@keyframes seedIconBreathe {
  0%, 100% { transform: scale(1)    rotate(0deg); }
  50%      { transform: scale(1.04) rotate(-1deg); }
}
.hud-seeds-value {
  font-size: 18px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.3px;
  /* Fixed-width container så chip ikke vokser med tall-bredde.
     38px holder "18.9K" / "1.2M" — den lengste rendered string. */
  min-width: 38px;
  text-align: left;
  display: inline-block;
  transform-origin: center center;
  background: linear-gradient(180deg, #ffffff 0%, #ffd9ec 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter:
    drop-shadow(0 1px 1.5px rgba(80, 20, 60, 0.7))
    drop-shadow(0 0 6px rgba(255, 100, 160, 0.35));
}
/* Coin-flip + gold halo on seed-arrival (Tier-1 polish 2026-05-18). Value
   text rotateY-flips with a brief edge-on vanish midway, then bounces back
   with a scale-overshoot. A radial gold halo blooms behind the icon. */
.hud-seeds.bumped .hud-seeds-value {
  animation: coinFlip 0.46s cubic-bezier(0.34, 1.4, 0.64, 1);
}
/* Light tick-pulse for intermediate flights in a multi-shard award. No flip,
   no halo — just a soft 1.0→1.18→1.0 punch so each arrival registers. */
.hud-seeds.ticked .hud-seeds-value {
  animation: seedTick 200ms ease-out;
}
@keyframes seedTick {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.hud-seeds::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 38px;
  height: 38px;
  margin-top: -19px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 215, 110, 0.85) 0%,
    rgba(255, 190, 90, 0.45) 38%,
    rgba(255, 180, 70, 0) 72%);
  opacity: 0;
  transform: scale(0.55);
  pointer-events: none;
  will-change: transform, opacity;
  z-index: 0;
}
.hud-seeds.bumped::before {
  animation: seedGoldHalo 0.6s ease-out;
}
@keyframes coinFlip {
  0%   { transform: rotateY(0deg)   scale(1);    opacity: 1; }
  40%  { transform: rotateY(90deg)  scale(0.95); opacity: 0; }
  55%  { transform: rotateY(270deg) scale(0.95); opacity: 0; }
  85%  { transform: rotateY(360deg) scale(1.18); opacity: 1; }
  100% { transform: rotateY(360deg) scale(1);    opacity: 1; }
}
@keyframes seedGoldHalo {
  0%   { opacity: 0;   transform: scale(0.55); }
  30%  { opacity: 1;   transform: scale(1.55); }
  100% { opacity: 0;   transform: scale(2.2);  }
}

/* Orbit-partikler — 3 bittesmå glow-dots rundt iconet. Position absolute
   relativ til .hud-seeds, lever inni icon-boksen (0-48px area). Forskjellig
   start-fase + varighet så de aldri faller i samme rytme. */
.hud-seeds-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffb3d6 55%, rgba(255, 130, 180, 0) 100%);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.hud-seeds-particle--a {
  top: 6px;
  left: 6px;
  animation: seedParticleOrbitA 3.8s ease-in-out infinite;
}
.hud-seeds-particle--b {
  top: 32px;
  left: 38px;
  width: 3px;
  height: 3px;
  animation: seedParticleOrbitB 4.6s ease-in-out infinite 0.7s;
}
.hud-seeds-particle--c {
  top: 36px;
  left: 8px;
  width: 2.5px;
  height: 2.5px;
  animation: seedParticleOrbitC 5.2s ease-in-out infinite 1.4s;
}
@keyframes seedParticleOrbitA {
  0%, 100% { transform: translate(0, 0)    scale(0.6); opacity: 0; }
  20%      { opacity: 0.95; }
  50%      { transform: translate(8px, -4px) scale(1); opacity: 0.85; }
  80%      { opacity: 0.4; }
}
@keyframes seedParticleOrbitB {
  0%, 100% { transform: translate(0, 0)     scale(0.5); opacity: 0; }
  25%      { opacity: 0.9; }
  55%      { transform: translate(-6px, -8px) scale(1.1); opacity: 0.75; }
  85%      { opacity: 0.3; }
}
@keyframes seedParticleOrbitC {
  0%, 100% { transform: translate(0, 0)    scale(0.55); opacity: 0; }
  30%      { opacity: 0.85; }
  60%      { transform: translate(4px, -10px) scale(1.05); opacity: 0.65; }
  90%      { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .hud-seeds-icon,
  .hud-seeds-particle--a,
  .hud-seeds-particle--b,
  .hud-seeds-particle--c { animation: none; }
  .hud-seeds-particle { opacity: 0; }
  .hud-seeds.bumped .hud-seeds-value,
  .hud-seeds.ticked .hud-seeds-value,
  .hud-seeds.bumped::before { animation: none; }
}

/* Flying seed-particles — DOM-elementer som flyr fra merge-position til
   chip. position:fixed for å hoppe ut av .game-wrap overflow:hidden.
   z 9999 = over alt (frame, hub, cinema). */
.flying-seed {
  position: fixed;
  width: 38px;
  height: 38px;
  object-fit: contain;
  margin-left: -19px;   /* center on (left,top)-anker = merge-koord */
  margin-top: -19px;
  z-index: 9999;
  pointer-events: none;
  will-change: transform, opacity;
  transition:
    transform 850ms cubic-bezier(0.45, 0.02, 0.18, 1),
    opacity   850ms cubic-bezier(0.55, 0, 0.85, 0.4);
  filter: drop-shadow(0 0 10px rgba(255, 140, 180, 0.8));
  transform: translate(0, 0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .flying-seed { transition: opacity 200ms linear; }
}

/* =====================================================================
   LOADING SCREEN (2026-05-16) — "Squishing… Please wait" w/ spinning melon
   ===================================================================== */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;       /* above everything including splash */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: radial-gradient(ellipse at center, #FFE8D8 0%, #FFCDAF 65%, #F4A879 100%);
  font-family: 'Lilita One', system-ui, sans-serif;
  color: #5b2e1e;
  pointer-events: all;
  transition: opacity 600ms ease-out, visibility 0s linear 600ms;
  opacity: 1;
  visibility: visible;
}
.loading-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loading-melon-wrap {
  position: relative;
  width: clamp(120px, 28vw, 180px);
  height: clamp(120px, 28vw, 180px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.loading-melon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: loading-melon-spin 1.4s linear infinite, loading-melon-bob 1.4s ease-in-out infinite;
  filter: drop-shadow(0 12px 18px rgba(91, 46, 30, 0.28));
  transform-origin: 50% 50%;
}
.loading-melon-shadow {
  position: absolute;
  bottom: -8px;
  left: 50%;
  width: 70%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(91, 46, 30, 0.35) 0%, transparent 70%);
  transform: translateX(-50%);
  animation: loading-shadow-pulse 1.4s ease-in-out infinite;
  z-index: -1;
}
@keyframes loading-melon-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes loading-melon-bob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@keyframes loading-shadow-pulse {
  0%, 100% { transform: translateX(-50%) scaleX(1);   opacity: 0.7; }
  50%      { transform: translateX(-50%) scaleX(0.75); opacity: 0.45; }
}
.loading-text {
  margin: 0;
  font-size: clamp(28px, 7vw, 40px);
  letter-spacing: 1.5px;
  text-shadow: 0 2px 0 rgba(255,255,255,0.6), 0 4px 8px rgba(91,46,30,0.18);
  display: inline-flex;
  align-items: baseline;
}
.loading-dots {
  display: inline-flex;
  gap: 2px;
  margin-left: 4px;
}
.loading-dots > span {
  display: inline-block;
  animation: loading-dot-pulse 1.2s ease-in-out infinite;
  opacity: 0.25;
}
.loading-dots > span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots > span:nth-child(3) { animation-delay: 0.4s; }
@keyframes loading-dot-pulse {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40%           { opacity: 1;    transform: translateY(-3px); }
}
.loading-subtitle {
  margin: 0;
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(13px, 3.4vw, 16px);
  letter-spacing: 0.8px;
  color: rgba(91, 46, 30, 0.65);
  text-transform: uppercase;
}

/* Wave-13.4 (audit Batch 4.6): real loading-progress bar.
   Track + fill med warm gold-cream gradient. Label viser % under bar.
   Subtle drop-shadow så det leser premium på cream-bg. */
.loading-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  width: min(64vw, 280px);
}
.loading-progress-track {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: rgba(91, 46, 30, 0.14);
  box-shadow: inset 0 1px 2px rgba(91, 46, 30, 0.18);
  overflow: hidden;
}
.loading-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ffb84d 0%, #ff8a55 60%, #ff6b9d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 8px rgba(255, 138, 85, 0.42);
  transition: width 280ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.loading-progress-label {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 2.8vw, 13px);
  letter-spacing: 0.6px;
  color: rgba(91, 46, 30, 0.55);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   HUD XP BAR (2026-05-16) — WoW-style smooth gradient over HUD
   ===================================================================== */
.hud-xp-bar {
  position: absolute;
  /* Kysser HUD-chip-raden med 2px gap. 2026-05-17: matches new HUD-top
     position calc(4% + 32px), så XP-bar = calc(4% + 32px - 18px) = calc(4% + 14px). */
  top: calc(4% + 14px);
  left: clamp(14px, 4vw, 22px);
  right: clamp(14px, 4vw, 22px);
  height: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9;            /* under HUD-top (10) — bar should never overlap chips */
  pointer-events: none;
  font-family: 'Lilita One', system-ui, sans-serif;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
  opacity: 0.95;
}
body.xp-bar-hidden .hud-xp-bar { display: none; }

.hud-xp-level {
  flex: 0 0 auto;
  height: 16px;
  min-width: 36px;
  padding: 0 7px;
  border-radius: 10px;
  background: linear-gradient(180deg, #5d4080 0%, #392459 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #FFD86B;
  font-size: 11px;
  letter-spacing: 0.4px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,0.55);
  box-shadow: 0 2px 5px rgba(43, 31, 58, 0.35),
              inset 0 1px 1px rgba(255,255,255,0.25),
              inset 0 -1px 1px rgba(0,0,0,0.2);
}
.hud-xp-level-prefix {
  font-size: 8.5px;
  opacity: 0.78;
  letter-spacing: 0.6px;
}
.hud-xp-level-num {
  font-size: 12px;
}

.hud-xp-track {
  flex: 1 1 auto;
  height: 7px;
  border-radius: 4px;
  /* 2026-05-17 v2: lys cream-pearl base i stedet for dark plum (Martin: empty
     XP-area skal være light, ikke svart). Theme-accent rim beholdt. */
  background:
    linear-gradient(180deg, rgba(255, 244, 230, 0.55), rgba(255, 224, 194, 0.7));
  overflow: hidden;
  position: relative;
  box-shadow:
    inset 0 1px 2px rgba(140, 80, 40, 0.22),
    0 0 0 1.5px rgba(var(--scene-accent-rgb, 212, 162, 76), 0.7),
    0 0 6px rgba(var(--scene-accent-rgb, 212, 162, 76), 0.35),
    0 1px 0 rgba(255,255,255,0.4);
}
.hud-xp-fill {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  /* 2026-05-17: warmer gradient — gold → coral → rose pink (var: cyan-purple-
     pink). Matcher portrait frame + score-pill aesthetic. */
  background: linear-gradient(90deg,
    #FFD86B 0%,
    #FFB347 35%,
    #FF8F8F 65%,
    #FF6BA1 100%);
  box-shadow:
    0 0 6px rgba(255, 180, 120, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: width 0.55s cubic-bezier(0.22, 0.61, 0.36, 1),
              filter 0.25s ease,
              background 0.4s ease;
}
.hud-xp-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.0) 30%,
    rgba(255,255,255,0.35) 50%,
    rgba(255,255,255,0.0) 70%,
    transparent 100%);
  animation: xp-sheen-sweep 4.2s ease-in-out infinite;
  pointer-events: none;
}

/* 2026-05-17: Mini crystal-seed PNG som følger fill-enden. CSS-var --xp-pct
   settes av JS i renderXpBar — icon-en glir smooth med samme transition som fill. */
.hud-xp-end-icon {
  position: absolute;
  /* center icon on fill's leading edge — offset -7px (icon halfwidth) */
  left: calc(var(--xp-pct, 0%) - 7px);
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 3;
  filter:
    drop-shadow(0 0 4px rgba(255, 180, 120, 0.85))
    drop-shadow(0 1px 2px rgba(80, 30, 60, 0.45));
  transition: left 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  animation: xp-end-icon-bob 2.4s ease-in-out infinite;
}
@keyframes xp-end-icon-bob {
  0%, 100% { transform: translateY(-50%) scale(1); }
  50%      { transform: translateY(-50%) scale(1.12); }
}

/* Particle-spawn container — covers full track. JS adds .xp-spark children
   ved hver grantXp() med positiv amount. Particles spawner ved fill-end +
   flyr utover m/ randomized angle. */
.hud-xp-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}
.xp-spark {
  position: absolute;
  left: calc(var(--xp-pct, 0%) - 3px);   /* origin = fill end */
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF4E6 0%, #FFD86B 40%, rgba(255, 180, 80, 0) 80%);
  box-shadow: 0 0 4px rgba(255, 200, 120, 0.85);
  pointer-events: none;
  animation: xp-spark-fly 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}
.xp-spark.is-burst {
  /* combo/watermelon burst particles get warmer/bigger */
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #FFF4E6 0%, #FF9F4D 50%, rgba(255, 100, 80, 0) 85%);
  box-shadow: 0 0 6px rgba(255, 170, 100, 0.95);
}
@keyframes xp-spark-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx, 0px) * 0.2), calc(-50% + var(--dy, 0px) * 0.2)) scale(1.1);
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.4);
  }
}
@media (prefers-reduced-motion: reduce) {
  .xp-spark { animation: none; opacity: 0; }
  .hud-xp-end-icon { animation: none; transition: left 200ms linear; }
}

/* =====================================================================
   🍌 LUCKY BANANA EVENT (2026-05-17) — rare visitor som svinger inn på board
   ved Lucky-roll (3% per merge, 30s cooldown). Per Martin's "den smirky one
   må inn!" spec. Banana flyr fra venstre, poser i senter, flyr ut til høyre.
   ===================================================================== */
.lucky-banana-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  display: none;
  overflow: hidden;
}
.lucky-banana-overlay.is-active {
  display: block;
}
/* Wave-13.3 (audit Batch 3.2): first-sighting takeover. Dim bg + gold-vignette
   så banana POPS extra hard. Vises kun ÉN gang ever per device. */
.lucky-banana-overlay.is-first-ever::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 38%,
      rgba(255, 220, 120, 0.32) 0%,
      rgba(140, 80, 30, 0.55) 55%,
      rgba(30, 15, 40, 0.78) 100%);
  animation: luckyFirstFlash 0.55s ease-out 1;
  z-index: -1;
}
.lucky-banana-overlay.is-first-ever .lucky-banana-img {
  /* Stronger glow + scale på first-sighting */
  filter:
    drop-shadow(0 0 28px rgba(255, 230, 130, 0.92))
    drop-shadow(0 0 60px rgba(255, 180, 70, 0.65))
    drop-shadow(0 16px 32px rgba(80, 50, 20, 0.5));
}
@keyframes luckyFirstFlash {
  0%   { opacity: 0; }
  30%  { opacity: 1; }
  100% { opacity: 0.92; }
}
@media (prefers-reduced-motion: reduce) {
  .lucky-banana-overlay.is-first-ever::before { animation: none; }
}
.lucky-banana-img {
  position: absolute;
  top: 36%;
  left: 50%;
  width: clamp(120px, 36vw, 200px);
  height: auto;
  filter:
    drop-shadow(0 0 20px rgba(255, 216, 107, 0.7))
    drop-shadow(0 0 40px rgba(255, 180, 70, 0.45))
    drop-shadow(0 12px 24px rgba(80, 50, 20, 0.4));
  transform: translate(-50%, -50%);
  animation: lucky-banana-swing 3.0s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
  will-change: transform, opacity;
}
@keyframes lucky-banana-swing {
  0% {
    /* Start: utenfor skjerm venstre, rotert + small */
    left: -25%;
    transform: translate(-50%, -50%) rotate(-40deg) scale(0.5);
    opacity: 0;
  }
  18% {
    /* Sving in til venstre-side */
    left: 30%;
    transform: translate(-50%, -50%) rotate(-10deg) scale(1.05);
    opacity: 1;
  }
  35% {
    /* Hover-pose i senter, slight wobble */
    left: 50%;
    transform: translate(-50%, -50%) rotate(8deg) scale(1.15);
    opacity: 1;
  }
  55% {
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg) scale(1.18);
    opacity: 1;
  }
  72% {
    /* Holde litt til, settling pose */
    left: 50%;
    transform: translate(-50%, -50%) rotate(2deg) scale(1.15);
    opacity: 1;
  }
  100% {
    /* Exit til høyre med rotasjon + fade */
    left: 125%;
    transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lucky-banana-img {
    animation: lucky-banana-fade 2s ease-out forwards;
  }
  @keyframes lucky-banana-fade {
    0%, 30%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  }
}
@keyframes xp-sheen-sweep {
  0%, 60% { transform: translateX(-100%); opacity: 0; }
  70%     { opacity: 1; }
  100%    { transform: translateX(100%); opacity: 0; }
}

/* BURST — combo ≥ 3 / watermelon merge → brief gold-orange flash */
.hud-xp-bar.is-burst .hud-xp-fill {
  background: linear-gradient(90deg, #FFD86B 0%, #FF9F4D 50%, #FF6B7A 100%);
  box-shadow: 0 0 14px rgba(255, 180, 80, 0.85);
  filter: brightness(1.4) saturate(1.3);
  animation: xp-burst-fill 0.7s ease-out;
}
@keyframes xp-burst-fill {
  0%   { filter: brightness(1) saturate(1); }
  18%  { filter: brightness(1.8) saturate(1.5); }
  100% { filter: brightness(1) saturate(1); }
}
.hud-xp-bar.is-burst .hud-xp-level {
  box-shadow: 0 2px 5px rgba(255, 180, 80, 0.55),
              0 0 18px rgba(255, 180, 80, 0.65),
              inset 0 1px 1px rgba(255,255,255,0.35);
}

/* LEVEL UP — full bar pulse + chip pop */
.hud-xp-bar.is-level-up {
  animation: xp-bar-levelup 0.9s ease-out;
}
@keyframes xp-bar-levelup {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.hud-xp-bar.is-level-up .hud-xp-level {
  animation: xp-chip-levelup 0.9s ease-out;
}
@keyframes xp-chip-levelup {
  0%   { transform: scale(1);    filter: brightness(1); }
  30%  { transform: scale(1.28); filter: brightness(1.85); }
  60%  { transform: scale(1.05); filter: brightness(1.3); }
  100% { transform: scale(1);    filter: brightness(1); }
}
.hud-xp-bar.is-level-up .hud-xp-fill {
  filter: brightness(1.6) saturate(1.4);
}

/* MAXED — level 60 reached, no animation churn */
.hud-xp-bar.is-maxed .hud-xp-fill {
  background: linear-gradient(90deg, #FFD86B 0%, #FFB347 50%, #FF8A55 100%);
  box-shadow: 0 0 10px rgba(255, 200, 100, 0.7);
}
.hud-xp-bar.is-maxed .hud-xp-sheen { animation-duration: 2.6s; }

@media (prefers-reduced-motion: reduce) {
  .hud-xp-sheen { animation: none; }
  .hud-xp-bar.is-burst .hud-xp-fill,
  .hud-xp-bar.is-level-up,
  .hud-xp-bar.is-level-up .hud-xp-level { animation: none; }
  .loading-melon { animation: loading-melon-spin 3s linear infinite; }
}

/* =====================================================================
   QUIET MODE (2026-05-16) — bedtime/train UX. Per cozy-casual agent:
   dimmed palette, no jarring particles, softer everything.
   JS handles: SFX × 0.40, no score-pops, no achievement-cinema.
   CSS handles: brightness 0.78, saturation 0.85, no sheen-sweep on XP bar,
   suppress decorative sparkles, calmer rainbow-dust.
   ===================================================================== */
body.quiet-mode .game-wrap {
  filter: brightness(0.78) saturate(0.85);
  transition: filter 600ms ease;
}
body.quiet-mode .hud-top,
body.quiet-mode .hud-xp-bar {
  /* Keep UI readable even when board is dimmed */
  filter: brightness(1.06);
}
body.quiet-mode .hud-xp-sheen {
  animation: none;        /* no shimmer sweep at 11pm */
  opacity: 0;
}
body.quiet-mode .game-sparkles,
body.quiet-mode .splash-sparkles,
body.quiet-mode .rainbow-dust,
body.quiet-mode .legendary-sparkles,
body.quiet-mode .frame-corner-sparks {
  display: none;          /* no twinkles in quiet mode */
}
body.quiet-mode .ach-cinema {
  display: none !important;  /* belt-and-braces — JS already gates */
}

/* =====================================================================
   HUD CHARACTER PORTRAIT (2026-05-17) — tier-ringed avatar
   Erstatter treasure-chest button. Tap → Collection. Ringen fargen-koder
   level-tier (Common cream → Mythic iridescent). Level-chip sits nede-til-
   høyre på portrettet.
   ===================================================================== */
.hud-portrait {
  position: relative;
  width: clamp(54px, 14vw, 64px);
  height: clamp(54px, 14vw, 64px);
  padding: 0;
  border: none;
  background: none;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
  /* tap-target hit-area extends slightly beyond visual */
  -webkit-tap-highlight-color: transparent;
}
.hud-portrait:active { transform: scale(0.94); }

.hud-portrait-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--tier-color, #FFF4E6);
  box-sizing: border-box;
  /* Wave-13.35: theme-tinted aura — outer box-shadow tar farge fra
     --scene-accent-rgb (varierer per equipped theme: apricot=peach,
     blueberry=purple, kiwi=green, plum=lavender, osv).
     Tier-color border beholdt = HUD-DNA + theme-coherence. */
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.25),
    inset 0 1px 2px rgba(0, 0, 0, 0.15),
    0 0 12px rgba(var(--scene-accent-rgb, 242, 184, 154), 0.45),
    0 0 24px rgba(var(--scene-accent-rgb, 242, 184, 154), 0.25);
  pointer-events: none;
  z-index: 2;
}
.hud-portrait-ring-glow {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}
.hud-portrait-img {
  position: absolute;
  inset: 3px;
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(180deg, #FFE8D8, #FFC8AB);
  display: block;
  z-index: 0;
}
.hud-portrait-img[src=""],
.hud-portrait-img:not([src]) {
  /* Empty src = no portrait loaded yet */
  background: linear-gradient(180deg, #FFE8D8, #FFC8AB);
}
/* PNG-frame overlay — overlays CSS-ring når fil eksisterer.
   2026-05-17: tightened from inset:-8px → -2px så frame-bandet hugger
   portrettet uten gap mellom karakter og indre ramme. z-index 2 = same
   som CSS-ring (overlays det) men under level-label (z:3). */
.hud-portrait-frame-png {
  position: absolute;
  inset: -2px;
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
  display: none;          /* skjult inntil src settes av JS */
}
.hud-portrait-frame-png[src][src]:not([src=""]) {
  display: block;
}
/* Når PNG-frame er aktivt, dim CSS-ringen så den ikke konkurrerer med frame-
   bandet visuelt. 2026-05-17: utvidet til BÅDE portrait + next-bubble — før
   gjaldt det kun portrait, så next-bubble's ring stod på 100% opacity og
   frame "så større ut" på høyre. Nå dimmet likt på begge sider. */
.hud-portrait:has(.hud-portrait-frame-png[src]:not([src=""])) .hud-portrait-ring,
.hud-next-bubble:has(.hud-portrait-frame-png[src]:not([src=""])) .hud-portrait-ring {
  opacity: 0.35;
}

/* Level label UNDER portrait (2026-05-17 — replaces the corner-chip badge).
   Warm gold/cream so det matcher frame's gold-rim + cream-pearl, ikke
   violet som før (Martin: "ikke i violet, men noe som passer bedre").
   Position: rett under portrait button (top: 100% + 2px), centrert horizontalt. */
.hud-portrait-lv-label {
  /* Wave-13.17 (Handlingsplan Y-4): mer breathing room + tydeligere Lv-status-pill */
  position: absolute;
  top: calc(100% + 4px);  /* 2px → 4px gap for HUD-declutter */
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 7px 2px;  /* Wave-13.17: liten pill-padding for status-feel */
  font-family: 'Lilita One', cursive;
  font-size: 13px;  /* 12 → 13 slightly more prominent */
  letter-spacing: 0.5px;
  color: #C9962F;          /* warm gold — matcher frame-rim */
  background: rgba(255, 244, 220, 0.88);  /* Wave-13.17: subtle cream-bg pill */
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(80, 50, 20, 0.25);  /* gentle drop */
  text-shadow:
    0 1px 0 rgba(255, 244, 230, 0.95),
    0 1px 2px rgba(80, 50, 20, 0.35);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
}

/* ===== TIER RINGS (matches theme/badge rarity palette per panel) ===== */
.hud-portrait[data-tier="common"]    { --tier-color: #FFF4E6; }
.hud-portrait[data-tier="uncommon"]  { --tier-color: #B5D4B0; }
.hud-portrait[data-tier="uncommon"]  .hud-portrait-ring-glow {
  background: radial-gradient(circle, rgba(181, 212, 176, 0.6) 0%, transparent 70%);
  opacity: 1;
}
.hud-portrait[data-tier="rare"]      { --tier-color: #9EB8E8; }
.hud-portrait[data-tier="rare"]      .hud-portrait-ring-glow {
  background: radial-gradient(circle, rgba(158, 184, 232, 0.7) 0%, transparent 70%);
  opacity: 1;
}
.hud-portrait[data-tier="epic"]      { --tier-color: #FF8F8F; }
.hud-portrait[data-tier="epic"]      .hud-portrait-ring-glow {
  background: radial-gradient(circle, rgba(255, 143, 143, 0.75) 0%, transparent 70%);
  opacity: 1;
  animation: portrait-glow-pulse 2.4s ease-in-out infinite;
}
.hud-portrait[data-tier="legendary"] { --tier-color: #B47AD9; }
.hud-portrait[data-tier="legendary"] .hud-portrait-ring {
  border: 3px solid #FFB347;   /* gold outer */
  box-shadow:
    0 0 0 1.5px #B47AD9,        /* orchid inner shadow as second ring */
    0 2px 8px rgba(180, 122, 217, 0.45),
    inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.hud-portrait[data-tier="legendary"] .hud-portrait-ring-glow {
  background: radial-gradient(circle, rgba(255, 179, 71, 0.75) 0%, transparent 65%);
  opacity: 1;
  animation: portrait-glow-pulse 2.0s ease-in-out infinite;
}
.hud-portrait[data-tier="mythic"]    { --tier-color: #FFB8E5; }
.hud-portrait[data-tier="mythic"]    .hud-portrait-ring {
  border: 3px solid transparent;
  background:
    linear-gradient(#FFF4E6, #FFF4E6) padding-box,
    conic-gradient(from 0deg, #FFB8E5, #FFD86B, #B47AD9, #9EB8E8, #FFB8E5) border-box;
  animation: portrait-mythic-spin 6s linear infinite;
}
.hud-portrait[data-tier="mythic"]    .hud-portrait-ring-glow {
  background: radial-gradient(circle, rgba(255, 184, 229, 0.85) 0%, rgba(255, 216, 107, 0.4) 40%, transparent 75%);
  opacity: 1;
  animation: portrait-glow-pulse 1.6s ease-in-out infinite;
}
@keyframes portrait-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}
@keyframes portrait-mythic-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Level-up: brief scale-pop + bright halo. Triggered via JS class toggle. */
.hud-portrait.is-leveling .hud-portrait-ring-glow {
  animation: portrait-levelup-burst 0.9s ease-out;
}
@keyframes portrait-levelup-burst {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0; transform: scale(2.2); }
}
.hud-portrait.is-leveling {
  animation: portrait-pop 0.9s ease-out;
}
@keyframes portrait-pop {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hud-portrait-ring-glow,
  .hud-portrait[data-tier="mythic"] .hud-portrait-ring { animation: none; }
}

/* =====================================================================
   LIVE BOARD REPAINT BLOOM (2026-05-16) — per dopamine-agent
   "board repaints live" spec. Når data-scene-pack endres, scene-layers
   gjør en 850ms warm bloom (brightness+saturate+slight scale) så
   reveal-momentet føles magisk i stedet for et hardt cut.
   ===================================================================== */
.scene-pack-layer.is-repainting {
  animation: scene-pack-bloom 850ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: filter, transform;
}
@keyframes scene-pack-bloom {
  0%   { filter: brightness(1.55) saturate(1.35); transform: scale(1.018); }
  35%  { filter: brightness(1.32) saturate(1.22); transform: scale(1.012); }
  100% { filter: brightness(1)    saturate(1);    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .scene-pack-layer.is-repainting { animation: none; }
}

/* =====================================================================
   LEVEL-UP CINEMA (2026-05-17) — big "Lv N!" + character reveal i senter.
   5-beat dopamine sequence per gamer-spec.
   ===================================================================== */
.level-up-cinema {
  position: fixed;
  inset: 0;
  z-index: 9998;          /* above achievement cinema (9999 reserved) */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 300ms ease;
}
.level-up-cinema.is-showing {
  pointer-events: auto;
  opacity: 1;
}
.level-up-cinema.is-exiting {
  opacity: 0;
  transition: opacity 300ms ease-in;
}
.level-up-cinema.hidden { display: none; }

.level-up-dim {
  position: absolute;
  inset: 0;
  background: rgba(20, 10, 25, 0.55);
  transition: opacity 200ms ease;
  opacity: 0;
}
.level-up-cinema.is-showing .level-up-dim { opacity: 1; }

.level-up-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 24px;
  pointer-events: none;
  /* Tier-color CSS var driver glow + label */
  --tier-color: #FFF4E6;
}
.level-up-cinema[data-tier="uncommon"]  .level-up-card { --tier-color: #B5D4B0; }
.level-up-cinema[data-tier="rare"]      .level-up-card { --tier-color: #9EB8E8; }
.level-up-cinema[data-tier="epic"]      .level-up-card { --tier-color: #FF8F8F; }
.level-up-cinema[data-tier="legendary"] .level-up-card { --tier-color: #B47AD9; }
.level-up-cinema[data-tier="mythic"]    .level-up-card { --tier-color: #FFB8E5; }

.level-up-portrait-wrap {
  position: relative;
  width: clamp(180px, 45vw, 240px);
  height: clamp(180px, 45vw, 240px);
  border-radius: 50%;
  /* Initial state: scale 0.6 (Beat 1), grows to 1.0 with overshoot bounce */
  transform: scale(0.6);
  opacity: 0;
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),    /* Squishmallow overshoot */
    opacity 180ms ease-out;
}
.level-up-cinema.is-showing .level-up-portrait-wrap {
  transform: scale(1);
  opacity: 1;
  transition-delay: 120ms;          /* Beat 2 starts at 120ms */
}
.level-up-portrait {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(180deg, #FFE8D8, #FFC8AB);
  box-shadow:
    0 0 0 4px var(--tier-color, #FFF4E6),
    0 0 0 7px rgba(255, 255, 255, 0.5),
    0 12px 32px rgba(20, 10, 30, 0.4);
  position: relative;
  z-index: 2;
}
.level-up-portrait-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--tier-color, #FFF4E6) 0%, transparent 65%);
  opacity: 0.6;
  filter: blur(8px);
  z-index: 1;
  animation: level-up-portrait-pulse 1.6s ease-in-out infinite;
}
@keyframes level-up-portrait-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.45; }
  50%      { transform: scale(1.12); opacity: 0.75; }
}

.level-up-text {
  text-align: center;
  /* Beat 3: text drops in from above with delay */
  transform: translateY(-12px);
  opacity: 0;
  transition:
    transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 180ms ease-out;
}
.level-up-cinema.is-showing .level-up-text {
  transform: translateY(0);
  opacity: 1;
  transition-delay: 320ms;          /* Beat 3 starts at 320ms */
}
.level-up-label {
  font-family: 'Lilita One', cursive;
  font-size: clamp(14px, 4vw, 18px);
  letter-spacing: 3px;
  color: #FFF4E6;
  text-shadow:
    0 2px 0 rgba(74, 33, 80, 0.85),
    0 4px 12px rgba(0, 0, 0, 0.55);
  margin-bottom: 4px;
  opacity: 0.85;
}
.level-up-num {
  font-family: 'Lilita One', cursive;
  font-size: clamp(48px, 13vw, 72px);
  line-height: 1;
  color: #FFF4E6;
  text-shadow:
    -3px 0 0 #4a2150,
     3px 0 0 #4a2150,
     0 -3px 0 #4a2150,
     0 3px 0 #4a2150,
    -2px -2px 0 #4a2150,
     2px -2px 0 #4a2150,
    -2px  2px 0 #4a2150,
     2px  2px 0 #4a2150,
     0 6px 0 rgba(74, 33, 80, 0.55),
     0 12px 24px rgba(0, 0, 0, 0.5);
}
.level-up-tier {
  font-family: 'Lilita One', cursive;
  font-size: clamp(15px, 4.2vw, 20px);
  letter-spacing: 2px;
  color: var(--tier-color, #FFF4E6);
  text-shadow:
    0 2px 0 rgba(74, 33, 80, 0.85),
    0 4px 14px rgba(0, 0, 0, 0.5);
  margin-top: 6px;
  filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .level-up-portrait-glow { animation: none; }
  .level-up-portrait-wrap,
  .level-up-text {
    transition: opacity 200ms ease;
    transform: none !important;
  }
}

/* Sparkle-burst container — spans full cinema, no pointer-events. Particles
   spawn from center (50%, 50%) and fly outward via --dx/--dy custom props. */
.level-up-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.level-up-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  background: #FFF4E6;
  box-shadow:
    0 0 6px currentColor,
    0 0 12px rgba(255, 255, 255, 0.6);
  animation: level-up-spark-fly 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
  transform: translate(-50%, -50%);
}
@keyframes level-up-spark-fly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }
  15% {
    opacity: 1;
    transform: translate(calc(-50% + var(--dx, 0px) * 0.15), calc(-50% + var(--dy, 0px) * 0.15)) scale(1.2);
  }
  60% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, 0px))) scale(0.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  .level-up-spark { animation: none; opacity: 0; }
}

/* =====================================================================
   MINI PORTRAIT (2026-05-17) — gjenbrukbar mini portrait+frame composite.
   Brukes som Character-tab nav-ikon (36px) og kan gjenbrukes andre steder.
   Driver-mønstret: <span.mini-portrait data-tier="common">
                      <img.mini-portrait-img src="character-NN.png">
                      <img.mini-portrait-frame src="frame-<tier>.png">
                    </span>
   ===================================================================== */
.mini-portrait {
  position: relative;
  display: inline-block;
  border-radius: 50%;
  flex-shrink: 0;
}
.mini-portrait-img {
  position: absolute;
  inset: 2px;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(180deg, #FFE8D8, #FFC8AB);
  z-index: 0;
}
.mini-portrait-frame {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}

/* Nav-icon variant — 36px composite inside the 44px nav button.
   Active state: full opacity. Inactive: 65% so cluster reads as "your face is
   the badge for THIS tab, but the others are hub-grade." */
.collection-nav-icon--stats {
  /* override default nav-icon padding to fit the round composite cleanly */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.collection-nav-icon--stats .mini-portrait {
  width: 36px;
  height: 36px;
  opacity: 0.65;
  transition: opacity 0.25s ease;
}
.collection-nav-icon--stats.is-active .mini-portrait,
.collection-nav-icon--stats[aria-selected="true"] .mini-portrait {
  opacity: 1;
}
/* Tier glow on active state — subtle, mirrors HUD ring-glow approach */
.collection-nav-icon--stats[data-tier="uncommon"]  .mini-portrait { filter: drop-shadow(0 0 4px rgba(181,212,176,0.6)); }
.collection-nav-icon--stats[data-tier="rare"]      .mini-portrait { filter: drop-shadow(0 0 4px rgba(158,184,232,0.7)); }
.collection-nav-icon--stats[data-tier="epic"]      .mini-portrait { filter: drop-shadow(0 0 5px rgba(255,143,143,0.75)); }
.collection-nav-icon--stats[data-tier="legendary"] .mini-portrait { filter: drop-shadow(0 0 6px rgba(255,179,71,0.8)); }
.collection-nav-icon--stats[data-tier="mythic"]    .mini-portrait { filter: drop-shadow(0 0 7px rgba(255,184,229,0.85)); }

/* =====================================================================
   CHARACTER HERO inside Character/Stats panel (2026-05-17)
   ~96px portrait + Lv pill + nickname subtitle + "Squishing since" tagline.
   Sits at top of panel-body, ABOVE the watermelons-grown stat hero.
   ===================================================================== */
.stats-character-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Wave-13.26 polish: portrait løftes (padding-top 4 -> 0)
     + større bottom-padding så mini-carousel ikke kysser kortets bunn.
     gap 8 -> 6 (tightere mellom seksjoner). */
  gap: 6px;
  padding: 0 16px 24px;
  margin-bottom: 10px;
}
.stats-character-portrait {
  position: relative;
  /* Wave-8.17: 210 → 260 px (+24%). Premium hero-feel. */
  width: 260px;
  height: 260px;
  border-radius: 50%;
}
.stats-character-img {
  position: absolute;
  inset: 9px;
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  border-radius: 50%;
  object-fit: cover;
  background: linear-gradient(180deg, #FFE8D8, #FFC8AB);
  z-index: 0;
}
.stats-character-frame {
  /* Wave-8.24: frame-PNG har sin ring sentrert i canvas med ~10% padding
     rundt (bow + flower-decor stikker ut over ring-omkretsen). Med inset
     -6px var ring-inner-diameter omtrent lik portrait-img-diameter →
     character clipped/overlappet ringen. Bump til inset -20px (40px
     større) gir ring-inner-edge ~8px utenfor character per side. */
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: contain;
  pointer-events: none;
  z-index: 2;
}
/* Tier-color CSS var for pill border */
.stats-character-portrait[data-tier="common"]    { --tier-color: #D4A24C; }
.stats-character-portrait[data-tier="uncommon"]  { --tier-color: #B5D4B0; }
.stats-character-portrait[data-tier="rare"]      { --tier-color: #9EB8E8; }
.stats-character-portrait[data-tier="epic"]      { --tier-color: #FF8F8F; }
.stats-character-portrait[data-tier="legendary"] { --tier-color: #FFB347; }
.stats-character-portrait[data-tier="mythic"]    { --tier-color: #FFB8E5; }

/* === Wave-8.18: Tier-based frame glow + particles ========================
   Each tier's frame PNG matches a color palette — glow uses same color.
   Common/Uncommon/Rare: no glow (subtle frames already pretty).
   Epic: slight glow (copper/orange).
   Legendary: stronger glow + 6 floating particles (red/gold).
   Mythic: strongest glow + 12 particles (gold/iridescent). */
/* Wave-13.29 (Martin): toned-down glow paa epic/legendary/mythic — var
   for sterkt og konkurrerte med frame-PNGenes egen detaljer + portrait.
   ~50% reduksjon paa blur-radius + opacity. */
.stats-character-portrait[data-tier="epic"] .stats-character-frame {
  filter: drop-shadow(0 0 8px rgba(255, 140, 60, 0.28));
}
.stats-character-portrait[data-tier="legendary"] .stats-character-frame {
  filter:
    drop-shadow(0 0 10px rgba(220, 50, 50, 0.28))
    drop-shadow(0 0 16px rgba(255, 180, 80, 0.22));
}
.stats-character-portrait[data-tier="mythic"] .stats-character-frame {
  filter:
    drop-shadow(0 0 12px rgba(255, 200, 80, 0.32))
    drop-shadow(0 0 20px rgba(255, 230, 150, 0.25))
    drop-shadow(0 0 32px rgba(255, 180, 100, 0.18));
  animation: mythic-frame-pulse 3.5s ease-in-out infinite;
}
@keyframes mythic-frame-pulse {
  0%, 100% { filter:
    drop-shadow(0 0 12px rgba(255, 200, 80, 0.32))
    drop-shadow(0 0 20px rgba(255, 230, 150, 0.25))
    drop-shadow(0 0 32px rgba(255, 180, 100, 0.18)); }
  50%      { filter:
    drop-shadow(0 0 16px rgba(255, 220, 120, 0.42))
    drop-shadow(0 0 26px rgba(255, 240, 180, 0.32))
    drop-shadow(0 0 44px rgba(255, 200, 130, 0.24)); }
}

/* Particle layer — sparkles orbit portrait. Genereres dynamisk av JS men
   default styling her. Legendary = 6, mythic = 12. */
.stats-character-particles {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  z-index: 3;
}
.stats-character-particle {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff8d0 0%, #ffd866 50%, transparent 75%);
  transform-origin: 0 0;
  animation: portrait-particle-orbit 6s linear infinite;
  opacity: 0;
}
.stats-character-portrait[data-tier="legendary"] .stats-character-particle {
  background: radial-gradient(circle, #fff0d0 0%, #ffaa50 45%, rgba(220,50,50,0.6) 70%, transparent 85%);
}
.stats-character-portrait[data-tier="mythic"] .stats-character-particle {
  background: radial-gradient(circle, #ffffff 0%, #ffe680 35%, #ffb340 65%, transparent 85%);
  box-shadow: 0 0 8px rgba(255, 220, 120, 0.8);
}
@keyframes portrait-particle-orbit {
  0%   { opacity: 0; transform: rotate(0deg) translateX(var(--orbit-r, 130px)) scale(0.7); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(360deg) translateX(var(--orbit-r, 130px)) scale(0.7); }
}

/* Wave-13.27c: Lv-pill 3-slice flex-frame (mirrors .cv2-tabs-frame pattern).
   Tidligere brukte bg-stack som etterlot horisontale mid-rails synlig
   utenfor cap-curvene. Nå: flex-layout med caps som <img> (natural-aspect)
   + mid <div> som flex:1 (stretches kun MELLOM caps, ikke under dem).
   Resultat: ren gold-rim som følger pill-shape uten rectangle-tails. */
.stats-character-pill {
  position: relative;
  margin-top: 4px;
  min-height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  /* Drop-shadow under hele pill (følger PNG-alpha — ingen rect-bounds) */
  filter: drop-shadow(0 2px 4px rgba(80, 50, 20, 0.25));
}
.stats-character-pill-frame {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: stretch;
  pointer-events: none;
  z-index: 0;
}
.stats-character-pill-frame-left,
.stats-character-pill-frame-right {
  /* Caps har natural aspect — full height, auto width.
     Matcher .cv2-tabs-frame-left/right pattern (line ~10846). */
  height: 100%;
  width: auto;
  flex-shrink: 0;
  display: block;
  user-select: none;
}
.stats-character-pill-frame-mid {
  /* Mid stretcher KUN mellom caps. Gold-rails fra hub-mid.png drawes
     edge-to-edge mellom cap-curvene — ingen overlap, ingen tails. */
  flex: 1 1 auto;
  background: url('assets/collection-v2-hub-mid.png') center / 100% 100% no-repeat;
  min-width: 0;
}
.stats-character-pill-label {
  position: relative;
  z-index: 1;
  /* Padding gir cream-luft inni mid-zonen (caps fyller naturally) */
  padding: 6px 18px 7px;
  font-family: 'Lilita One', cursive;
  font-size: 18px;
  letter-spacing: 0.8px;
  color: #5b2e1e;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  line-height: 1;
  white-space: nowrap;
}
/* Wave-13.27: tier-border-color rules dropped — PNG-slicen har sin egen
   gold-rim. Beholder selector-shells så hvis Martin senere lager
   tier-spesifikke pill-slices (gold/red/purple), kan vi enkelt swappe
   URL via tier-attribute. Currently same PNG for alle tiers. */

/* Wave-13.18 (Handlingsplan G-13): Next-unlock teaser strip i Character-tab.
   3 character-portraits horisontalt: current (You) → next-lvl → next-tier-cap.
   Aspirational pull mot tier-boundaries (Lv 10/20/30/40/50/60). */
.stats-character-progression {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Wave-13.26 polish: 14px top -> 18px (litt mer luft fra XP-bar),
     6px bottom -> 14px (mini-carousel ikke kysser kortets bunn). */
  margin: 18px 0 14px;
  max-width: 100%;
  flex-wrap: nowrap;
}
.stats-character-progression-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 0;
}
.stats-character-progression-portrait {
  width: clamp(48px, 14vw, 64px);
  height: clamp(48px, 14vw, 64px);
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(180deg, #FFE8D8, #FFC8AB);
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.55),
    inset 0 -2px 4px rgba(180, 140, 100, 0.2),
    0 2px 6px rgba(120, 80, 40, 0.22);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats-character-progression-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stats-character-progression-item.is-current .stats-character-progression-portrait {
  /* Current = gold-ring highlight */
  box-shadow:
    inset 0 0 0 2.5px #e8a428,
    0 2px 8px rgba(232, 164, 40, 0.5),
    0 0 14px rgba(255, 200, 90, 0.4);
}
.stats-character-progression-portrait.is-locked {
  /* Next/locked = grayscale + lower opacity */
  filter: grayscale(0.55) brightness(0.92);
  opacity: 0.78;
}
.stats-character-progression-portrait.is-tier-cap {
  /* Tier-cap = additional purple-tint for "premium-reward" feel */
  filter: grayscale(0.4) brightness(0.88) hue-rotate(8deg);
  box-shadow:
    inset 0 0 0 2px rgba(180, 122, 217, 0.55),
    0 2px 6px rgba(120, 80, 40, 0.22);
}
.stats-character-progression-label {
  font-family: 'Lilita One', system-ui, sans-serif;
  font-size: clamp(10px, 2.8vw, 12px);
  color: #6a4030;
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.stats-character-progression-meta {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: clamp(8.5px, 2.2vw, 10px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(106, 64, 48, 0.62);
}
.stats-character-progression-item.is-current .stats-character-progression-meta {
  color: #e8a428;
}
.stats-character-progression-arrow {
  font-size: clamp(14px, 4vw, 18px);
  color: rgba(180, 120, 70, 0.55);
  margin: 0 -2px;
  align-self: center;
  padding-bottom: 16px;  /* align with portrait-center, ikke labels */
}

/* XP progress bar on Character screen (2026-05-18 — per Martin). Sits
   below the nickname/since-line. Shows "Lv N — current / next-XP — Lv N+1"
   with a horizontal fill bar tinted to match the warm hero palette. */
.stats-character-xp {
  /* Wave-8.1: ingen frame på wrapper — labels (Lv X / X/Y XP / Lv Y)
     flyter fritt over baren. Frame flyttet til .stats-character-xp-track. */
  width: 100%;
  max-width: 320px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: none;
}
.stats-character-xp-labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Fredoka', system-ui, sans-serif;
  /* Wave-13.26 polish: kontrast-bumpet for mobile readability.
     11 -> 12px font, 700 -> 800 weight, color #8A6A4E -> #4A2150 (mørkere). */
  font-size: 12px;
  font-weight: 800;
  color: #4A2150;
  letter-spacing: 0.5px;
}
.stats-character-xp-progress {
  /* Sentral "X / Y XP" må være tydligst — bumpet contrast mer. */
  font-size: 11px;
  font-weight: 800;
  color: #4A2150;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.6);
}
.stats-character-xp-track {
  /* Wave-8.12 + Wave-13.39: padding-side MÅ matche cream-interior-start
     (= pill-cap-curve-end = half-track-height = 13px). Tidligere 10px
     etterlot 3px gap mellom cap-PNG og fill-start → visuell venstre-gap.
     Nå: padding: 4px 13px = fill begynner eksakt der cream begynner. */
  position: relative;
  height: 26px;
  background:
    var(--pill-cap-l) left center / auto 100% no-repeat,
    var(--pill-cap-r) right center / auto 100% no-repeat,
    var(--pill-cap-m) center / 100% 100% no-repeat;
  border-radius: 13px;
  padding: 4px 13px;
  box-sizing: border-box;
  filter: drop-shadow(0 2px 4px rgba(184, 120, 80, 0.22));
  overflow: hidden;
}
.stats-character-xp-fill {
  /* Wave-8.1: fill ligger INNI pill-track sin cream-interior. Mindre
     border-radius siden den nå er inside the pill's inner cream-area. */
  height: 100%;
  background: linear-gradient(90deg, #FFB347 0%, #FF8E5C 50%, #FF6F88 100%);
  box-shadow: 0 0 8px rgba(255, 160, 100, 0.45);
  border-radius: 999px;
  transition: width 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.stats-character-xp.is-maxed {
  align-items: center;
}
.stats-character-xp-label {
  font-family: 'Lilita One', cursive;
  font-size: 13px;
  letter-spacing: 2px;
  color: #C66B30;
  background: linear-gradient(180deg, #FFE8B0, #FFD088);
  padding: 4px 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(198, 107, 48, 0.5);
}

.stats-character-nickname {
  font-family: 'Lilita One', cursive;
  font-size: 14px;
  letter-spacing: 1px;
  color: #8A7A6E;
  text-transform: uppercase;
  margin-top: 2px;
}
.stats-character-since {
  font-family: 'Nunito', system-ui, sans-serif;
  font-style: italic;
  font-size: 12px;
  color: #A89A8C;
  margin-top: 1px;
}

/* ============================================================================
   WAVE-8.26: PREMIUM iPHONE COLLECTION PASS
   ============================================================================
   Spawned 4 experts (UX designer + 3 frontend/iOS engineers) reviewed the
   Collection modal layout. Consolidated findings:

   PROBLEM: Tre 3-kolonne grids overflowed iPhone 375px viewport — shop
   bundles (Bowl + Vault clipped), Crystal-shop grid, Cosmetic-tile grid
   (Backgrounds/Frames pickers). User couldn't see or tap the BEST VALUE
   bundle on real iPhones → blocked $99.99 IAP.

   FIX:
   - Breakpoint: max-width 430px (catches iPhone SE 375 through 14 Pro Max 430,
     ignores tablets/desktop).
   - 3 grids → 2 cols. Card-width vokser fra ~144px → ~165px = 14% større +
     premium-feel mens alt fitter.
   - Card-content scaled up tilsvarende (chest +33%, seeds +29%, price +18%)
     så ikke alt ser komisk lite ut i en større card.
   - Vault BEST VALUE: scale 1.05 → 1.03 (mindre cutoff-risk på smal viewport).
   - iOS-native touch polish: touch-action manipulation (kill 300ms tap-delay
     i WKWebView), tap-highlight-transparent (no gray flash), callout-none
     (no iOS share-popup on long-press), user-select-none (no accidental
     text-select).
   - Safe-area-inset-bottom på .board-page-body så home-indicator ikke spiser
     bottom-content.
   ============================================================================ */
@media (max-width: 430px) {
  /* --- Grid 1: Shop bundles (.shop-bundle-grid) --- */
  .shop-bundle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 6px;
  }
  /* Wave-8.29: merged Wave-8.26+8.27 .shop-bundle rules (var duplikat-
     blokker som overskrev hverandre kryptisk). Final values fra v2-pass. */
  .shop-bundle-price {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .shop-bundle.is-best-value {
    transform: scale(1.06);       /* var 1.03 → bumpet etter expert-UX-pass:
                                     Vault BEST VALUE må dominere visuelt */
  }
  .shop-bundle-best-badge {
    top: -10px;
    font-size: 11px;              /* var 9.5 — UX-audit: badge for liten */
    padding: 4px 12px;            /* var 3×8 → 4×12 (4px-grid) */
    letter-spacing: 0.5px;
  }

  /* --- Grid 2: Crystal-shop variant (alternate shop layout) --- */
  .crystal-shop-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  /* --- Grid 3: Cosmetic tiles (Backgrounds + Frames picker) --- */
  .cosmetic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  /* --- Safe-area for home-indicator (iPhone X+) --- */
  .board-page-body {
    padding-bottom: max(16px, env(safe-area-inset-bottom, 16px));
  }

  /* --- Wave-8.43: theme-card mobile-tilpassinger (rebuilt utenfor border-
     image-system fra Wave-8.42). Slim height + tighter copy-padding så
     title leses uten å konkurrere med mascot. */
  .theme-card-list .theme-card {
    height: 152px;
    border-radius: 22px;
  }
  .theme-card-list .theme-card::before {
    inset: 4px;
    border-radius: 18px;
  }
  .theme-card-list .theme-card-meta {
    left: 14px;
    right: 110px;
    bottom: 14px;
  }
  .theme-card-list .theme-card-mascot {
    top: 12%;
    right: 10px;
    width: clamp(64px, 17vw, 88px);
  }
  .theme-card-list .theme-card-thumb {
    object-position: center 45%;
  }

  /* --- Wave-8.38: cards EVEN closer to center via negative margin.
     Frame-slice.png har ~11% transparent edge på hver side. Selv ved
     gap: 0 var det ~17px synlig "transparent gap" mellom cards i
     midten. Fix: nth-child negative-margin trekker odd-cards (left
     column) høyre, even-cards (right column) venstre = gold-rims møtes
     i midten. Outer grid-padding 18 → 26 så hele grid'en sentreres mer. */
  .shop-bundle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    padding: 0 26px;
  }
  .shop-bundle:nth-child(odd) { margin-right: -14px; }
  .shop-bundle:nth-child(even) { margin-left: -14px; }
  .settings-tab-pane[data-pane="shop"] .board-page-body {
    left: 2%;
    right: 2%;
  }
  .shop-bundle-chest-wrap {
    aspect-ratio: 1.5 / 1;          /* var 1:1 — kraftig kompresjon */
  }
  .shop-bundle-seeds { font-size: 16px; }
  .shop-bundle-seed-icon { width: 14px; height: 14px; }
  .shop-bundle-tag { font-size: 11px; margin: 2px 0 3px; }
  .shop-bundle-bonus { font-size: 10.5px; padding: 1px 5px; }
  .shop-bundle-price {
    font-size: 13px;
    padding: 5px 12px;
    min-height: 34px;               /* tap-target via card-as-button OK */
  }

  /* --- Wave-8.27: ribbon-title kompresser ---
     Ribbon (THEMES/SHOP/CHARACTER) PNG-ribbon var alt for høy på mobile. */
  .board-page-title { margin-bottom: 6px; }
  .board-page-title-logo { max-height: 64px; }
}

/* Wave-8.29 v2: Pause ONLY known perpetual-decoration animations på
   inactive panes (perf-audit-fix). Tidligere wildcard-rule pauset også
   pane-entry-animations som kunne stå-i-startframe og skjule content.
   Nå målrettet på sparkles + glow-pulses som er rent kosmetisk. */
.settings-tab-pane:not(.is-active) .shop-bundle-sparkle,
.settings-tab-pane:not(.is-active) .shop-bundle-glow,
.settings-tab-pane:not(.is-active) .stats-character-particle,
.settings-tab-pane:not(.is-active) .stats-character-frame {
  animation-play-state: paused;
}

/* iOS touch polish — applies on ALL viewports, gjelder spesielt iPhone.
   Disse er one-liners som forhindrer kjente WKWebView-pitfalls. */
.shop-bundle,
.crystal-bundle,
.cosmetic-tile,
.theme-card,
.scene-pack-card,
.character-subtab,
.theme-tab,
.collection-nav-icon {
  touch-action: manipulation;             /* kill 300ms tap-delay */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;            /* no iOS share-menu on long-press */
  user-select: none;
  -webkit-user-select: none;
}

/* ============================================================================
   WAVE-9.0: COLLECTION v2 — clean rebuild
   ============================================================================
   Replaces ~600 linjer akkumulert legacy fra Wave-8.30 → 8.55. Bygd over
   Martin's pre-sliced PNG-assets:
   - collection-v2-board-top/mid/bottom.png      (board 3-slice vertikal)
   - collection-v2-hub-left/mid/right.png        (hub-nav 3-slice horisontal)
   - collection-v2-pill-left/mid/right.png       (filter-pill 3-slice horisontal)
   - collection-theme-preview-slice-left/mid/right.png (theme-card frame)

   Architecture:
   - Fixed full-screen overlay (.cv2)
   - Header: logo + tabs-nav + currency-pill (alle absolute-positioned)
   - Single scroll-container (.cv2-content) for active tab content
   - Ingen nested scroll. Ingen scroll-snap. Ingen opacity-pane-stacking.
   - touch-action: manipulation overalt → reliable iOS clicks.
   ============================================================================ */
.cv2 {
  position: fixed;
  inset: 0;
  z-index: 9000;
  /* Wave-13.26 polish: subtle vignette-dim over bg så panel popper mer.
     Radial-gradient (lyst i midten, mørkere kantene) + base bg-PNG.
     Bakgrunnen er fortsatt synlig, bare svakere på sidene = premium focus. */
  background:
    radial-gradient(ellipse 140% 100% at center 45%,
      transparent 0%,
      transparent 40%,
      rgba(60, 30, 50, 0.18) 80%,
      rgba(40, 20, 40, 0.32) 100%),
    url('assets/collection-bg.png') center / cover no-repeat,
    #ffe9c2;
  /* Wave-12.9: page-level scroll — board flows naturlig og bottom-frame
     vises kun naar bruker har scrollet til slutt av innhold */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  color: #6a4030;
  -webkit-tap-highlight-color: transparent;
  /* Wave-13.23: REFINEMENT pass — logo +18% (intentional, ikke tiny),
     tighter header-rytme (logo<->tabs gap mindre), board litt høyere.
     - logo-scale 0.55 -> 0.66 (+20% — intentional brand-presence)
     - logo-y-offset -10 -> -6px (sits litt høyere)
     - hub-y-offset -38 -> -48px (tabs rykker opp 10px = tighter header)
     - board-extra-gap 24 -> 8px (mer content synlig på mobile) */
  --cv2-logo-scale: 0.66;
  --cv2-logo-y-offset: -6px;
  --cv2-hub-y-offset: -48px;
  --cv2-board-extra-gap: 8px;
}
.cv2[hidden] { display: none; }

/* --- BACK BUTTON ----------------------------------------------------------
   Wave-13.22 REBRAND: tighter top-padding (28 -> 14) for compact header */
.cv2-back {
  position: fixed;
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  left: 12px;
  z-index: 10;
  min-height: 40px;
  min-width: 78px;
  padding: 7px 16px 8px 12px;
  border: 2px solid #e4a13e;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8e8 0%, #ffe3b8 100%);
  color: #6a4030;
  font: 600 15px 'Lilita One', system-ui;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(170, 85, 20, 0.16),
    0 4px 8px rgba(80, 40, 20, 0.22);
}
.cv2-back:active { transform: scale(0.96); }

/* --- COLLECTION LOGO ------------------------------------------------------
   Wave-13.22 REBRAND + Wave-13.23 polish: compact brand-element med
   premium glow så det føles intentional (ikke "tiny accidentally").
   Multi-layer drop-shadow: cream catch-light + warm glow + ambient depth. */
.cv2-logo {
  position: fixed;
  top: max(14px, calc(env(safe-area-inset-top) + 6px));
  left: 50%;
  transform: translateX(-50%) translateY(var(--cv2-logo-y-offset, 0)) scale(var(--cv2-logo-scale, 1));
  transform-origin: top center;
  /* Wave-13.23: clamp(70,18vw,110) -> clamp(78,21vw,128) for litt mer presence */
  height: clamp(78px, 21vw, 128px);
  width: auto;
  pointer-events: none;
  /* Wave-13.23: stacked premium glow — cream catch + warm gold halo +
     ambient drop. Matcher gameover-logo / splash-logo "premium identity"-DNA. */
  filter:
    drop-shadow(0 0 8px rgba(255, 240, 180, 0.55))
    drop-shadow(0 0 18px rgba(255, 200, 120, 0.35))
    drop-shadow(0 6px 12px rgba(80, 30, 60, 0.35));
  z-index: 9;
}

/* --- CURRENCY PILL (top right) --------------------------------------------
   Wave-13.22 REBRAND: align top med .cv2-back (begge på 14px) for clean
   header-row. Var 36px = ut av sync m/ back-button. */
.cv2-currency {
  position: fixed;
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  right: 12px;
  z-index: 10;
  min-height: 40px;
  padding: 6px 14px 7px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(180deg, #fff8e8 0%, #ffe3b8 100%);
  border: 2px solid #e4a13e;
  border-radius: 999px;
  color: #4a2632;
  font: 700 16px 'Lilita One', system-ui;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    0 3px 6px rgba(80, 40, 20, 0.20);
  /* Wave-13.15 (P2-7): hele pill click-target — var pointer-events: none.
     + er fortsatt visual affordance. Event-delegation i CollectionV2 init
     listener etter [data-cv2-action='shop'] — div'en har samme attribute så
     hver klikk på pillen → Shop tab. */
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms, box-shadow 120ms;
}
.cv2-currency:hover {
  /* Wave-13.17 (Handlingsplan Y-8): hover også scaler litt opp + sterkere shadow
     for tydelig "I'm tappable!"-affordance — ikke bare på + men hele pillen. */
  transform: scale(1.03);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    0 5px 12px rgba(80, 40, 20, 0.35);
}
.cv2-currency:active { transform: scale(0.97); }

/* Wave-13.17 (Y-8): + button får subtle pulse-glow så det er crystal-clear
   discovery-feature for hva pill-tap gjør (= Shop). Animation dempes når
   player hovers eller has-aktivert pillen tidligere. */
.cv2-currency-plus {
  animation: currencyPlusPulse 2.4s ease-in-out infinite;
}
@keyframes currencyPlusPulse {
  0%, 100% { box-shadow: inset 0 2px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(0,0,0,0.18), 0 0 0 rgba(98, 209, 138, 0); }
  50%      { box-shadow: inset 0 2px 0 rgba(255,255,255,0.55), inset 0 -2px 0 rgba(0,0,0,0.18), 0 0 8px rgba(98, 209, 138, 0.45); }
}
.cv2-currency:hover .cv2-currency-plus { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .cv2-currency-plus { animation: none; }
}
.cv2-currency-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(150, 30, 80, 0.3));
}

/* --- HUB NAV (5 tab pills) -----------------------------------------------
   Wave-13.9: Full-bleed segments inni gold-rim. Hver tab = ekte cropped
   poster med image som dekker hele segment + label nederst med gradient.
   Wave-13.22 REBRAND: tabs rykker opp (170 -> 110px top) pga mindre logo.
   Min-height 56 -> 52 så hub-pill blir litt slankere/cleaner. */
.cv2-tabs {
  position: fixed;
  /* Wave-13.23: 110 -> 130px base (logo nå litt større), men hub-y-offset
     -38 -> -48px så netto effekt er tabs ~10px nærmere logo = tighter rytme. */
  top: calc(max(130px, calc(env(safe-area-inset-top) + 120px)) + var(--cv2-hub-y-offset, 0px));
  left: 8px;
  right: 8px;
  z-index: 8;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 10px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  min-height: 52px;
  filter: drop-shadow(0 4px 10px rgba(110, 55, 20, 0.18));
}
/* 3-slice PNG-frame rundt hub-pillen (Wave-12.2) — erstatter CSS-border */
.cv2-tabs-frame {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
.cv2-tabs-frame-left,
.cv2-tabs-frame-right {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  display: block;
  user-select: none;
}
.cv2-tabs-frame-mid {
  flex: 1 1 0;
  min-width: 0;
  background: url('assets/collection-v2-hub-mid.png') center / 100% 100% no-repeat;
}
/* Wave-13.9: tab = full-bleed segment. overflow:hidden klipper image
   til segment-shape (rounded corners på first/last). Label sitter
   absolute nederst med gradient-bg for lesbarhet. */
.cv2-tab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  /* Wave-13.10 iter 6: box-shadow separator fjernet, bruker real flex-gap på parent */
  transition: transform 180ms ease;
}
.cv2-tab:active { transform: scale(0.97); }

/* Wave-13.10 iter 3: tilbake til full pill-curve (999px) — matcher gold-rim
   semicircle inner-curve. Med redusert padding (10px) strekkes segmentene
   helt opp mot gold-rim's indre. */
.cv2-tab:first-of-type {
  border-radius: 999px 0 0 999px;
}
.cv2-tab:last-of-type {
  border-radius: 0 999px 999px 0;
}
/* Wave-13.9: tab-icon brukt som full-bleed background. object-fit:cover
   med per-tab object-position via attribute-selectors under. */
.cv2-tab-icon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  pointer-events: none;
  z-index: 0;
  transition: filter 180ms ease, transform 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Per-tab focal-point. Crops sentrert på hvert mockup's main artwork. */
.cv2-tab[data-tab="fruits"]    .cv2-tab-icon { object-position: center 55%; }
.cv2-tab[data-tab="themes"]    .cv2-tab-icon { object-position: center 50%; }
.cv2-tab[data-tab="shop"]      .cv2-tab-icon { object-position: center 45%; }
.cv2-tab[data-tab="character"] .cv2-tab-icon { object-position: center 32%; }
.cv2-tab[data-tab="badges"]    .cv2-tab-icon { object-position: center 50%; }

/* Wave-13.22 + Wave-13.23: premium active/inactive treatment.
   - Inactive: heavy dim (saturate 0.45 brightness 0.7) + soft cream-tinted
     overlay-veil så ikoner ikke konkurrerer med aktiv-tab + label leser bedre
   - Active: full vibrant + scale-pop + ekstra warm-glow halo */
.cv2-tab:not(.is-active) .cv2-tab-icon {
  filter: saturate(0.45) brightness(0.7);
}
.cv2-tab:not(.is-active)::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Soft overlay: subtle warm-purple veil for "back-shelf" feel.
     Lager også gradient bottom-darkening så label-tekst leser tydeligere. */
  background:
    linear-gradient(180deg,
      rgba(43, 31, 58, 0.15) 0%,
      rgba(43, 31, 58, 0.10) 40%,
      rgba(43, 31, 58, 0.30) 100%);
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}
.cv2-tab.is-active .cv2-tab-icon {
  filter: saturate(1.12) brightness(1.08);
  transform: scale(1.06);
}
/* Wave-13.23: active tab får ekstra warm glow under ikonet — "selected"
   premium-feel som matcher gold-ring. Gradient gold→transparent fra bunn. */
.cv2-tab.is-active .cv2-tab-icon {
  box-shadow: inset 0 -8px 16px rgba(255, 200, 100, 0.35);
}

/* Wave-13.9: portrait wrapper er fortsatt display:none (Wave-13.8 fallback)
   — behold reset så det ikke bryter hvis nogen rolle bringer den tilbake. */
.cv2-tab-portrait { display: none; }
.cv2-tab-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wave-13.9: label sitter absolute på BUNNEN av segment, over gradient-bg
   for lesbarhet uansett image-content. Bruker dark stroke for crisp tekst. */
.cv2-tab-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 6px 2px 7px;  /* Wave-13.15 (P2-6): 4 → 2 horisontal pad for SE-safety */
  z-index: 2;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
  /* Wave-13.15 (P2-6): clamp() så "Character" (9 char) ikke clipper på SE 320-375px */
  font-size: clamp(9px, 2.6vw, 12px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.03em;  /* Wave-13.15: 0.04 → 0.03 mer plass per bokstav */
  color: #ffffff;
  text-align: center;
  text-shadow:
    0 1px 2px rgba(0, 0, 0, 0.65),
    0 2px 4px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.38) 50%,
    rgba(0, 0, 0, 0.62) 100%);
  transition: background 180ms ease;
  /* Wave-13.15 (P2-6): nowrap + clip så lange labels truncerer i stedet for wrap */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

/* Wave-13.17 (Handlingsplan Y-7): Themes-tab har bright-green-yellow segment-bg
   (mockup-art med sun-rays). Sterkere gradient-bottom for label-readability. */
.cv2-tab[data-tab="themes"] .cv2-tab-label {
  background: linear-gradient(180deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.45) 45%,
    rgba(0, 0, 0, 0.72) 100%);
}
.cv2-tab.is-active .cv2-tab-label {
  color: #fff8e0;
  text-shadow:
    0 1px 0 #b8225e,
    0 2px 3px rgba(120, 35, 65, 0.55),
    0 0 8px rgba(255, 180, 200, 0.4);
  background: linear-gradient(180deg,
    rgba(255, 100, 140, 0) 0%,
    rgba(220, 60, 100, 0.45) 55%,
    rgba(180, 40, 80, 0.72) 100%);
}

/* Wave-13.9 + 13.22: active-tab gold-ring overlay — sterkere kontrast.
   3px gold-inset (var 2px) + sterkere outer halo. */
.cv2-tab.is-active::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 3px rgba(255, 215, 90, 0.95),
    inset 0 2px 4px rgba(255, 255, 255, 0.4),
    inset 0 -2px 4px rgba(180, 110, 30, 0.35),
    0 0 16px rgba(255, 180, 90, 0.55);
}

/* --- BOARD (3-slice stacked frame, Wave-11.0) -----------------------------
   Bruker collection-v2-board-frame2-{top,mid,bottom}.png som ren gold-rim
   uten gem-corners. Top og bottom har natural aspect-ratio (761×190);
   mid (761×110) stretches vertikalt for å fylle mellomrommet. Flex-column
   stack — ingen border-image, ingen scope for hjørne-leak. */
.cv2-board {
  /* Wave-12.9: flow-layout — board vokser med innhold.
     Wave-13.23: synker fra 110 til 130 base (matcher nye hub-tabs).
     Netto: panel litt høyere (hub-y-offset -48 + extra-gap 8) = mer
     content synlig på mobile. */
  position: relative;
  margin: calc(max(130px, calc(env(safe-area-inset-top) + 120px)) + var(--cv2-hub-y-offset, 0px) + 72px + var(--cv2-board-extra-gap, 0px)) 8px calc(env(safe-area-inset-bottom, 8px) + 60px);
  z-index: 5;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  filter: drop-shadow(0 6px 12px rgba(80, 35, 20, 0.20));
  background: transparent;
  /* Container-query unit baseline — cqi = 1% av .cv2-board sin width.
     Brukes av ::before for å skalere cream-shape med PNG-size eksakt */
  container-type: inline-size;
  display: block;
}
/* Cream-bg matcher EKSAKT inside-edge av gold-rim. Sampled PNG-data:
   - Sides:    inside-edge ved x=23/761 = 3.02% av PNG-width
   - Top/bot:  inside-edge ved y=24/761 av board-width = 3.15%
                (top-PNG renders med width:100% → 24 PNG-px = 3.15% av boardW)
   - Inner curve: radius (95-19) = 76 PNG-px = 9.99% av board-width
   cqi scales med .cv2-board sin width så match holder ved alle viewports. */
.cv2-board::before {
  content: "";
  position: absolute;
  top: 3.15cqi;
  bottom: 3.15cqi;
  left: 3.02cqi;
  right: 3.02cqi;
  z-index: 1;
  /* Wave-12.16: varmere cream som matcher outer collection-bg */
  background: #ffe9c2;
  border-radius: 10cqi;
  pointer-events: none;
}
/* Wave-12.9: frame-pieces er direkte flow-children av board (ikke absolute
   overlay). Top → body (mid-bg) → bottom rendres sekvensielt. */
.cv2-board-frame-top,
.cv2-board-frame-bottom {
  width: 100%;
  height: auto;
  display: block;
  user-select: none;
  pointer-events: none;
  position: relative;
  z-index: 2;
}
.cv2-board-body {
  position: relative;
  z-index: 2;
  margin: -1px 0;
  /* Mid-PNG som bg-image stretches vertikalt med body-height (vokser
     med innhold). Gold-rails forblir kontinuerlige. */
  background: url('assets/collection-v2-board-frame2-mid.png') center / 100% 100% no-repeat;
  padding: 4px 14px 8px;
}

/* Wave-12.19 → 13.26: section-banner — "premium Pixar plaque".
   Wave-13.26 (Martin polish): banner -12% (konkurrerte med character).
   Width 94%->84%, max 384->338 = ~12% mindre. Tigh
ter rhythm to portrait. */
.cv2-section-banner {
  position: relative;
  z-index: 5;
  /* Wave-13.30: +5% størrelse (per Martin). 84% -> 88%, 338 -> 355 max */
  width: 88%;
  max-width: 355px;
  margin: -68px auto 14px;
  aspect-ratio: 3.7 / 1;
  background: url('assets/ribbon.png') center / contain no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(80, 35, 20, 0.18));
}
/* Wave-13.14: twin-stroke cartoon-text via ::before pseudo-element.
   Erstatter Wave-12.20's 8-direction text-shadow (som lagde cream-blob på iPhone
   retina pga shadow-clone-overlap). Nå: hovedtekst med dark inner stroke + rødt
   fill + drop-shadow glow. ::before-pseudo rendrer SAMME tekst (via attr(data-text))
   UNDER hovedteksten med tykk cream stroke = ekte clean outline-ring, ikke
   shadow-fyll. Brukt av Royal Match / Toon Blast / premium-mobile-spill.
   3D-depth via stacked drop-shadows (light catch + dark depth + ambient).

   data-text-attr settes av JS i CollectionV2.render() (game.js ~lin 9203).
   Hovedtekst = textContent (samme verdi). Begge må match for outline-justering. */
.cv2-section-banner-text {
  position: relative;
  /* Wave-13.25 (Martin spec): font 26-34 -> 24-31px (-9% mindre)
     for mer "breathing room" inni plaketten. Bokstavene skal ikke
     nesten touche gold-rim. Letter-spacing økt 0.07 -> 0.085em så
     teksten leser luftigere uten å bli mindre.
     Optical-center: margin-top -4% -> 0 (ribbon-PNG plate sitter
     true-center via aspect-ratio + flex). */
  font: 900 clamp(24px, 6.3vw, 31px) 'Lilita One', 'Fredoka', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.085em;
  line-height: 1;
  color: #E84838;
  -webkit-text-stroke: 1.5px #4a1e1e;
  text-stroke: 1.5px #4a1e1e;
  paint-order: stroke fill;
  margin-top: 0;
  /* Wave-13.25b FIX: dropped `padding: 0 12px` — ::before twin-stroke
     pseudo har `inset: 0` så det dekker padding-box. Padding på hovedtekst
     skapte 12px horisontal misalignment mellom cream outline og red fill
     ("hvite greiene bak fontene ble ødelagt"). Horisontal breathing room
     håndteres heller via letter-spacing 0.085em + ribbon-PNG natural geometry. */
  user-select: none;
  /* Wave-13.25: softere "puffy candy" shadow-stack. Tidligere hadde
     hard 0 3px 0 plum drop som ga "sticker"-look. Nå: cream catch
     + soft ambient = plush mobile-game title-DNA. */
  filter:
    drop-shadow(0 1px 0 #fff5d8)
    drop-shadow(0 2px 1px rgba(120, 30, 20, 0.3))
    drop-shadow(0 4px 6px rgba(0, 0, 0, 0.22));
}
/* Twin-stroke outline-layer — sits BAK hovedteksten via z-index:-1.
   Bruker -webkit-text-stroke (6px cream) for clean ring rundt bokstavformene.
   color:transparent så fill ikke konkurrerer med hovedteksten.
   Position:absolute + inset:0 så pseudo og hovedtekst overlapper eksakt. */
.cv2-section-banner-text::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-stroke: 6px #fff5d8;
  text-stroke: 6px #fff5d8;
  /* Match alle properties som påvirker letter-shape så outline aligner eksakt */
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  pointer-events: none;
}
.cv2-content {
  /* Wave-12.9: ingen overflow — page scroller selv. Content flyter og
     vokser med antall cards. */
  position: relative;
  z-index: 3;
  padding: 4px 0 8px;
  box-sizing: border-box;
}

/* v2 overrides: prevent nested-scroll conflict — .cv2-content owns scroll, child collections grow naturally */
.cv2-content .trophy-collection {
  height: auto;
  overflow: visible;
}

/* Wave-13.31 (Martin spec): Shop grid TIGHTENED.
   Tidligere: gap 28px begge retninger + masse luft mellom rows + page-dots
   overlay'et price-knapper. Nå:
   - column-gap 28 -> 14px (cards trekkes nærmere = ser ut som ekte grid)
   - row-gap 28 -> 18px (drastisk mindre vertikal luft mellom rader)
   - padding-bottom 64px så page-dots ikke overlay'er siste rad
   - SHOP-title -> grid: 14px in stedet for 4px gap (litt mer for å skille
     hero-title fra første rad uten å være airy) */
.cv2-content .cv2-shop-grid {
  grid-template-columns: repeat(2, 1fr);
  column-gap: 10px;
  row-gap: 16px;
  max-width: none;
  margin: 0 auto;
  /* Wave-13.32: 4px -> 0 horisontal padding så cards fyller hele panel-bredden */
  padding: 0 0 4px;
  justify-items: stretch;
}
.cv2-content .cv2-shop-grid .shop-bundle {
  width: 100%;
  max-width: none;
}
/* Wave-13.32: page-dots flytter til flow-position så vi trenger ikke
   stor padding-bottom for å unngå overlay. Bare litt safe-area-respekt. */
.cv2-content .cv2-shop-wrap {
  padding: 0 0 16px;
}
/* Product artwork — Wave-13.33 (dopamine pass): +15% størrelse så crystal
   = ekte reward-hero. Pre var clamp(96,30vw,148), nå clamp(110,34vw,168).
   Combined med tighter card-top padding (5%->2%) tar artwork betydelig
   mer av cardets top-half = bedre "loot pop"-feel. */
.cv2-content .shop-bundle-img {
  width: clamp(110px, 34vw, 168px);
}
.cv2-content .cv2-shop-grid .shop-bundle-price {
  font-size: 16px;
  padding: 9px 16px;
}
.cv2-content .cv2-shop-grid .shop-bundle-name {
  font-size: 17px;
}
.cv2-content .cv2-shop-grid .shop-bundle-amount {
  font-size: 22px;
}
/* Wave-13.33 (UX): top-padding strammet ytterligere 5%->2% så artwork
   sitter høyere i card (mindre dødt cream-rom over). Side+bottom samme. */
.cv2-content .cv2-shop-grid .shop-bundle {
  padding: 2% 14% 8%;
}

/* Wave-11.0: Theme-cards utvides så de nesten når frame-kantene */
.cv2-themes-list {
  padding: 4px 0 16px;
  gap: 14px;
}
.cv2-content .cv2-theme-card {
  width: 100%;
  max-width: none;
}

/* ============================================================================
   WAVE-12.0: Card-redesign + filter-tabs + header polish + page-dots
   ============================================================================ */

/* --- Filter-tabs (All/Owned/Rare/Epic/Legendary) ------------------------- */
.cv2-filter-tabs {
  display: flex;
  gap: 6px;
  padding: 4px 2px 12px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.cv2-filter-tabs::-webkit-scrollbar { display: none; }
.cv2-filter-tab {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 2px solid #e4a13e;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff8e8 0%, #ffe3b8 100%);
  color: #8a5a2b;
  font: 600 11.5px 'Lilita One', 'Fredoka', system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 160ms, color 160ms, transform 120ms;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.cv2-filter-tab:active { transform: scale(0.95); }
.cv2-filter-tab.is-active {
  background: linear-gradient(180deg, #ff7da0 0%, #f05378 100%);
  color: #ffffff;
  border-color: #d83a64;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.45), 0 2px 4px rgba(180,45,85,0.25);
}

/* Wave-13.17 (Handlingsplan Y-6): tier-color border på INACTIVE filter-tabs
   så Owned/Rare/Epic/Legendary visuelt edukerer player om tier-palette.
   Aktiv state (pink-fill) overrider via .is-active rules over. */
.cv2-filter-tab[data-filter="owned"]:not(.is-active) {
  border-color: #56c674;  /* green = "yours" */
  color: #2e7a3f;
}
.cv2-filter-tab[data-filter="rare"]:not(.is-active) {
  border-color: #6E8FCB;  /* blue */
  color: #33538f;
}
.cv2-filter-tab[data-filter="epic"]:not(.is-active) {
  border-color: #9966c5;  /* purple */
  color: #6a3b8c;
}
.cv2-filter-tab[data-filter="legendary"]:not(.is-active) {
  border-color: #E89220;  /* gold */
  color: #8a5715;
}

/* --- Theme-card redesign (Wave-12.8: separat thumb-clip — ikke klipp frame) --- */
.cv2-content .cv2-theme-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 140px;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* Wave-12.8: DROP overflow:hidden — frame-PNG og gem-corners var klippet
     av card sin border-radius. Thumb klippes nå i separat .cv2-theme-card-
     thumb-clip lag istedet. */
  overflow: visible;
  box-sizing: border-box;
  filter: drop-shadow(0 4px 8px rgba(80, 35, 20, 0.18));
  isolation: isolate;
  text-align: left;
}
/* Wave-12.11: grønn equipped-ring fjernet per Martin's request — checkmark
   i Equip-button er nok visuell indikator. */
/* Wave-12.14c: image fyller hele card-rect, men klippes til rounded shape
   som matcher frame's outer rounded corners (sa image ikke stikker ut i
   rektangulære hjørner der frame har gem-bumps). */
.cv2-theme-card-thumb-clip {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: 32px;
  pointer-events: none;
}
.cv2-theme-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 50%;
  display: block;
}
/* Wave-12.13: shade fjernet helt — ikke i mockup-spec. Element rendres
   ikke (display:none) men markup beholdt for evt fremtidig overlay-bruk. */
.cv2-theme-card-shade { display: none; }
/* 3-slice gold-rim PNG-frame over preview (Wave-12.11: z-2 per spec) */
.cv2-theme-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: stretch;
  pointer-events: none;
}
.cv2-theme-frame-left,
.cv2-theme-frame-right {
  height: 100%;
  width: auto;
  flex-shrink: 0;
  display: block;
  user-select: none;
}
.cv2-theme-frame-mid {
  flex: 1 1 0;
  min-width: 0;
  background: url('assets/collection-theme-preview-slice-mid.png') center / 100% 100% no-repeat;
}
.cv2-rarity-badge {
  position: absolute;
  top: 8px;
  left: 30px;
  z-index: 4;
  padding: 3px 10px 4px;
  border-radius: 999px;
  background: var(--tier-accent, #D4A24C);
  color: #ffffff;
  font: 700 10px 'Lilita One', system-ui;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18);
  text-shadow: 0 1px 0 rgba(0,0,0,0.18);
}
.cv2-theme-card-body {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 14px 32px;
  min-height: 140px;
}
/* Wave-13.2 (audit Batch 2.3): merget adjacent-split `.cv2-theme-mascot` —
   var 60px-block + 72px-override-block back-to-back, samme fragilitet som
   `.tier-slot`-dupe vi fikset i Batch 1.3. */
.cv2-theme-mascot {
  width: 72px;
  height: 72px;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(60, 30, 10, 0.35));
  pointer-events: none;
}
.cv2-theme-card-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;  /* Wave-13.2 (audit Batch 2.3): hard cap så long names truncerer pent på SE */
}
.cv2-theme-name {
  margin: 0;
  /* Wave-13.2 (audit Batch 2.7+2.3): clamp() */
  font: 700 clamp(18px, 5vw, 22px) 'Lilita One', 'Fredoka', system-ui, sans-serif;
  /* Wave-13.15 (Pre-demo polish P1-3): white fill + dark stroke + drop-shadow stack
     for lesbarhet på BÅDE lyse (Apricot/Strawberry) OG mørke (Plum/Velvet) preview-bg.
     Erstatter Wave-13.2's tier-text-color (som blender med varme bg). */
  color: #ffffff;
  -webkit-text-stroke: 0.5px rgba(60, 30, 20, 0.4);
  text-shadow:
    0 1px 0 rgba(60, 30, 20, 0.85),
    0 2px 4px rgba(0, 0, 0, 0.55),
    0 3px 8px rgba(0, 0, 0, 0.35);
  line-height: 1.05;
  letter-spacing: 0.01em;
  /* Truncate long names på SE */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cv2-theme-mood {
  margin: 0;
  font: italic 500 clamp(10px, 2.8vw, 11.5px) 'Fredoka', system-ui, sans-serif;
  /* Wave-13.15 (P1-3): cream-tone + dark drop-shadow for consistent
     readability mot alle preview-bg. Var rgba(60,35,25,0.78) som forsvant
     mot warm-toned bgs (Apricot sunrise). */
  color: rgba(255, 248, 232, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 2px 4px rgba(0, 0, 0, 0.4);
  line-height: 1.2;
}
.cv2-theme-bonus {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 3px;
  padding: 2px 6px 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  color: var(--tier-text, #6a4030);
  font: 700 10px 'Lilita One', system-ui;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
}
.cv2-theme-bonus img {
  width: 11px; height: 11px; object-fit: contain;
}

/* Wave-13.2 (audit Batch 2.6): "X seeds away" progress-hint på locked themes.
   Vises kun når spilleren har ≥50% av prisen — "you're getting close" cue
   uten FOMO/timer. ".cv2-theme-seeds-away--ready" når spilleren ALLEREDE
   har nok seeds (cta-nudge "You can unlock!"). */
.cv2-theme-seeds-away {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 4px;
  padding: 2px 8px 3px;
  border-radius: 999px;
  background: rgba(255, 220, 180, 0.55);
  color: #8a5a1c;
  font: 700 9.5px 'Lilita One', system-ui;
  letter-spacing: 0.2px;
  width: fit-content;
  max-width: 100%;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cv2-theme-seeds-away--ready {
  background: linear-gradient(180deg, #d4f0c9 0%, #afde9e 100%);
  color: #2d5a23;
  animation: cv2SeedsReadyPulse 1.8s ease-in-out infinite;
}
@keyframes cv2SeedsReadyPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .cv2-theme-seeds-away--ready { animation: none; }
}
/* Wave-13.15 (Pre-demo polish P1-4): merget 2 duplicate-rules + bytte fra
   tier-accent fill (blender med varme card-bg) til white-cream fill + dark
   text + tier-accent border. Klarere "knapp"-affordance — mobile-game CTA-stil
   som står ut mot ALLE tier-color-bgs. Equipped state (✓) er fortsatt
   tydelig forskjellig (green pill, ikke knapp). */
.cv2-theme-equip {
  padding: 8px 18px;
  border: 2px solid var(--tier-accent, #D4A24C);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #fff5e0 100%);
  color: var(--tier-accent, #8a5a1c);
  font: 800 13px 'Lilita One', system-ui;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(180, 130, 70, 0.18),
    0 3px 6px rgba(120, 60, 30, 0.28),
    0 6px 14px rgba(80, 35, 15, 0.22);
  transition: transform 120ms, box-shadow 120ms;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.cv2-theme-equip:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -2px 0 rgba(180, 130, 70, 0.18),
    0 4px 8px rgba(120, 60, 30, 0.32),
    0 8px 18px rgba(80, 35, 15, 0.28);
}
.cv2-theme-equip:active { transform: scale(0.95); }
.cv2-theme-equipped-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #56c674;
  color: #ffffff;
  font: 700 22px 'Lilita One', system-ui;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2), inset 0 2px 0 rgba(255,255,255,0.4);
}

/* Wave-12.29: locked-theme buy-button + dimmed card */
.cv2-content .cv2-theme-card.is-locked .cv2-theme-card-thumb-clip {
  filter: grayscale(0.6) brightness(0.7);
}
.cv2-content .cv2-theme-card.is-locked .cv2-theme-name,
.cv2-content .cv2-theme-card.is-locked .cv2-theme-mood {
  filter: brightness(0.85);
}
.cv2-content .cv2-theme-card.is-locked::before {
  content: "🔒";
  position: absolute;
  top: 10px;
  right: 14px;
  z-index: 5;
  font-size: 18px;
  opacity: 0.85;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.cv2-theme-buy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--tier-accent, #D4A24C);
  color: #ffffff;
  font: 700 14px 'Lilita One', system-ui;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.4),
    inset 0 -2px 0 rgba(0,0,0,0.15),
    0 3px 6px rgba(0,0,0,0.18);
  transition: transform 120ms;
  white-space: nowrap;
}
.cv2-theme-buy:active { transform: scale(0.95); }
.cv2-theme-buy-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}

/* --- Wave-13.9: Step 3 hub-tab-overrides slettet ------------------------
   Tidligere block her satte .cv2-tabs{min-height:72px} + .cv2-tab-icon
   {width:34px;height:34px} som overrider Wave-13.9 full-bleed-rule.
   Master-block er hoved-rule ~linje 10384 (cv2-tabs) + 10460 (cv2-tab-icon)
   med full-bleed object-fit:cover. Step 3-overrides ikke lenger trengs. */

/* --- Step 4: Header — currency-pill med plus-knapp ----------------------- */
.cv2-currency {
  padding: 4px 6px 5px 14px;
  min-height: 42px;
  gap: 8px;
}
.cv2-currency-value { font-size: 17px; }
.cv2-currency-icon { width: 24px; height: 24px; }
.cv2-currency-plus {
  pointer-events: auto;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #62d18a 0%, #3aa763 100%);
  color: #ffffff;
  font: 700 18px 'Lilita One', system-ui;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.45),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 2px 4px rgba(60,140,80,0.35);
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  padding: 0 0 2px;
}
.cv2-currency-plus:active { transform: scale(0.92); }
.cv2-currency { pointer-events: auto; }

/* --- Step 5: Page-dots indicator ----------------------------------------- */
.cv2-page-dots {
  /* Wave-13.32 (Martin): position fixed -> flow. Dots overlay'et content
     på alle 5 tabs (Shop bottom-row prices, Badges grid-bunn osv).
     Nå sitter de naturlig etter board-content med litt cream-padding rundt
     så det ser ut som en intentional bottom-indicator-pill, ikke overlay. */
  position: relative;
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 5px 11px;
  margin: 0 auto 12px;
  width: fit-content;
  background: rgba(255, 250, 230, 0.78);
  border-radius: 999px;
  box-shadow: 0 2px 5px rgba(80,40,20,0.18);
  pointer-events: none;
}
.cv2-page-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(180, 120, 70, 0.45);
  transition: all 180ms ease;
}
.cv2-page-dot.is-active {
  background: #f05378;
  width: 18px;
  border-radius: 999px;
}

/* --- THEMES TAB content --------------------------------------------------- */
.cv2-themes-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px 0 16px;
}
/* Wave-12.14b: HELE Wave-9.0 stale theme-card-blokken slettet.
   Disse rule-ne (cv2-theme-card, cv2-theme-card-frame, cv2-theme-card-shade,
   cv2-rarity-pill, cv2-theme-card-meta/name/mood/mascot, cv2-theme-equip)
   var fra forste implementasjon og override nye Wave-12.x rules.
   Ny implementasjon ligger i Wave-12.0+ blokken ovenfor (~linje 10260+). */

/* --- EMPTY PLACEHOLDER (for Fruits coming-soon etc) ----------------------- */
.cv2-empty {
  text-align: center;
  font: italic 500 16px 'Nunito', system-ui;
  color: rgba(122, 70, 56, 0.7);
  padding: 60px 20px;
}

/* Wave-13.19 (R3-11): rich empty-state med CTA — brukes på Themes "Owned"-tab
   når fersk player ikke har unlocked noe. Crystal-seed ikon + headline +
   sub-copy + CTA-pill som hopper til "All" filter. */
.cv2-empty--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  font-style: normal;
  color: rgba(74, 33, 80, 0.9);
}
.cv2-empty-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%,
    rgba(255, 230, 150, 0.55) 0%,
    rgba(255, 200, 100, 0.25) 60%,
    transparent 100%);
  border-radius: 50%;
  animation: cv2EmptyIconBob 2.4s ease-in-out infinite;
}
.cv2-empty-icon img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(180, 100, 30, 0.4));
}
@keyframes cv2EmptyIconBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-4px) rotate(2deg); }
}
.cv2-empty-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 19px;
  color: #4a2150;
  margin: 4px 0 0;
  letter-spacing: 0.2px;
}
.cv2-empty-sub {
  font-family: 'Nunito', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: rgba(74, 33, 80, 0.7);
  margin: 0;
  max-width: 280px;
}
.cv2-empty-action {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(180deg, #B47AD9 0%, #9056C8 100%);
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 10px 22px;
  margin-top: 6px;
  cursor: pointer;
  text-shadow: 0 1px 0 rgba(60, 30, 90, 0.4);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 4px 0 #6E40A0,
    0 6px 12px rgba(110, 64, 160, 0.4);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  -webkit-tap-highlight-color: transparent;
}
.cv2-empty-action:hover { transform: translateY(-1px); }
.cv2-empty-action:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    0 1px 0 #6E40A0;
}
@media (prefers-reduced-motion: reduce) {
  .cv2-empty-icon { animation: none; }
}

/* ============================================================================
   WAVE-12.28: Theme Unlock Celebration modal
   ============================================================================
   Full-screen reward etter theme-kjøp. Glossy gold-framed preview, magical
   particles, soft glow rays, Equip Now / Later buttons. Squish Melon premium. */
.theme-unlock {
  position: fixed;
  inset: 0;
  z-index: 9700;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 380ms ease-out;
  -webkit-tap-highlight-color: transparent;
  font-family: 'Lilita One', 'Fredoka', system-ui, sans-serif;
}
.theme-unlock.hidden { display: none; }
.theme-unlock.is-open {
  opacity: 1;
  pointer-events: auto;
}
.theme-unlock-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%,
    rgba(60, 30, 40, 0.55) 0%,
    rgba(40, 18, 28, 0.85) 65%,
    rgba(20, 8, 18, 0.95) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.theme-unlock-rays {
  position: absolute;
  inset: 0;
  background:
    conic-gradient(from 0deg at 50% 50%,
      transparent 0deg,
      rgba(255, 220, 150, 0.18) 8deg,
      transparent 16deg,
      rgba(255, 220, 150, 0.18) 24deg,
      transparent 32deg,
      rgba(255, 220, 150, 0.18) 40deg,
      transparent 48deg,
      rgba(255, 220, 150, 0.18) 56deg,
      transparent 64deg,
      rgba(255, 220, 150, 0.18) 72deg,
      transparent 80deg,
      rgba(255, 220, 150, 0.18) 88deg,
      transparent 96deg,
      rgba(255, 220, 150, 0.18) 104deg,
      transparent 112deg,
      rgba(255, 220, 150, 0.18) 120deg);
  animation: unlockRaysSpin 18s linear infinite;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 600ms 250ms ease-out;
}
.theme-unlock.is-open .theme-unlock-rays { opacity: 1; }
@keyframes unlockRaysSpin {
  to { transform: rotate(360deg); }
}
.theme-unlock-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.theme-unlock-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d4, #ffc864 70%, transparent);
  opacity: 0;
  animation: unlockParticleFloat 4.2s ease-out forwards;
}
@keyframes unlockParticleFloat {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-120vh) scale(1.2); }
}
.theme-unlock-card {
  position: relative;
  z-index: 2;
  width: 88%;
  max-width: 380px;
  padding: 28px 24px 22px;
  border-radius: 32px;
  background: linear-gradient(180deg, #fff8e8 0%, #ffe9c2 100%);
  border: 3px solid #e9a939;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.85),
    inset 0 -3px 0 rgba(190, 110, 25, 0.18),
    0 16px 40px rgba(20, 10, 20, 0.45),
    0 0 60px rgba(255, 200, 100, 0.35);
  text-align: center;
  transform: scale(0.4);
  overflow: hidden;
  will-change: transform;
}
/* Wave-12.30: cartoony 4-stage bounce (Disney squash-stretch principle) */
.theme-unlock.is-open .theme-unlock-card {
  animation: unlockCardBounce 680ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes unlockCardBounce {
  0%   { transform: scale(0.4) rotate(-3deg); }
  35%  { transform: scale(1.15) rotate(1.5deg); }
  60%  { transform: scale(0.95) rotate(-0.5deg); }
  82%  { transform: scale(1.02) rotate(0.3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* White flash overlay — "you got it" punch (Wave-12.30) */
.theme-unlock-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #ffffff 0%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  z-index: 3;
}
.theme-unlock.is-open .theme-unlock-flash {
  animation: unlockFlash 380ms ease-out forwards;
}
@keyframes unlockFlash {
  0%   { opacity: 0; }
  20%  { opacity: 0.95; }
  100% { opacity: 0; }
}

/* Lens-flare sweep across card surface (Wave-12.30) */
.theme-unlock-flare {
  position: absolute;
  top: 0;
  left: -50%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.65) 50%,
    transparent 70%);
  transform: skewX(-20deg);
  pointer-events: none;
  opacity: 0;
}
.theme-unlock.is-open .theme-unlock-flare {
  animation: unlockFlare 1400ms 280ms ease-out forwards;
}
@keyframes unlockFlare {
  0%   { left: -60%; opacity: 0; }
  20%  { opacity: 1; }
  90%  { opacity: 0.8; }
  100% { left: 110%; opacity: 0; }
}

/* Counter-rotating second rays layer for depth (Wave-12.30) */
.theme-unlock-rays--counter {
  animation-direction: reverse;
  animation-duration: 22s;
  opacity: 0;
  filter: blur(4px);
}
.theme-unlock.is-open .theme-unlock-rays--counter { opacity: 0.7; }

/* Particle burst — radial-outward at reveal moment (Wave-12.30) */
.theme-unlock-burst {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 1;
  pointer-events: none;
}
.theme-unlock-burst-spark {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffae8, #ffd54a 55%, transparent);
  box-shadow: 0 0 6px rgba(255, 220, 120, 0.85);
  opacity: 0;
  --angle: 0deg;
  --dist: 200px;
  animation: unlockBurst 900ms ease-out forwards;
}
@keyframes unlockBurst {
  0%   { opacity: 0; transform: rotate(var(--angle)) translateY(0) scale(0.4); }
  18%  { opacity: 1; transform: rotate(var(--angle)) translateY(-30px) scale(1.2); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateY(calc(-1 * var(--dist))) scale(0.3); }
}
.theme-unlock-glow {
  position: absolute;
  inset: -40px;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 200, 100, 0.4) 0%, transparent 70%);
  animation: unlockGlowPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes unlockGlowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}
.theme-unlock-title {
  margin: 0 0 18px;
  /* Wave-13.2 (audit Batch 2.7): clamp() — premium-modal-tittel skaleres */
  font: 900 clamp(22px, 6vw, 30px) 'Lilita One', system-ui;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #E84838;
  -webkit-text-stroke: 1.5px #4a1e1e;
  text-shadow:
    -2px -2px 0 #FFF5D8, 2px -2px 0 #FFF5D8,
    -2px 2px 0 #FFF5D8, 2px 2px 0 #FFF5D8,
    0 3px 6px rgba(180, 50, 30, 0.4);
  paint-order: stroke fill;
}
.theme-unlock-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  margin: 0 auto 16px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 4px #e9a939,
    inset 0 0 0 6px rgba(255, 220, 150, 0.5),
    0 8px 20px rgba(80, 35, 20, 0.32);
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 400ms 180ms ease-out, transform 400ms 180ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.theme-unlock.is-open .theme-unlock-frame { opacity: 1; transform: scale(1); }
.theme-unlock-preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.theme-unlock-name {
  /* Wave-13.2 (audit Batch 2.7): clamp() */
  font: 700 clamp(18px, 5vw, 24px) 'Lilita One', system-ui;
  color: #6a3a23;
  margin: 0 0 18px;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6);
  opacity: 0;
  transition: opacity 400ms 300ms ease-out;
}
.theme-unlock.is-open .theme-unlock-name { opacity: 1; }
.theme-unlock-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms 400ms ease-out, transform 380ms 400ms ease-out;
}
.theme-unlock.is-open .theme-unlock-actions { opacity: 1; transform: translateY(0); }
.theme-unlock-btn {
  flex: 1 1 0;
  min-height: 48px;
  padding: 10px 16px;
  border: 2px solid #e7a63d;
  border-radius: 999px;
  font: 700 16px 'Lilita One', system-ui;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease;
}
.theme-unlock-btn:active { transform: scale(0.95); }
.theme-unlock-btn--later {
  background: linear-gradient(180deg, #fff8e8 0%, #ffe3b8 100%);
  color: #8a5a2b;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), 0 3px 6px rgba(180, 100, 30, 0.2);
}
.theme-unlock-btn--equip {
  background: linear-gradient(180deg, #62d18a 0%, #3aa763 100%);
  color: #ffffff;
  border-color: #2f8a52;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 0 rgba(20, 80, 40, 0.22),
    0 4px 10px rgba(50, 140, 80, 0.35);
  text-shadow: 0 1px 0 rgba(20, 80, 40, 0.4);
}
/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .theme-unlock-card,
  .theme-unlock-frame,
  .theme-unlock-name,
  .theme-unlock-actions { transition: none; }
  .theme-unlock-rays { animation: none; }
  .theme-unlock-glow { animation: none; }
  .theme-unlock-particle { animation: none; opacity: 0; }
}