/* level-up.css — Celebration overlay. Sits above everything (z:500).
   Uses tier-based themes:
     bronze   — levels 1-20  (La Vigne, Le Vignoble)
     gold     — levels 21-40 (La Cave, Le Terroir)
     prestige — levels 41-60 (Le Palais, Le Château)
     legendary— levels 61-80 (La Légende, Le Panthéon)
   Each theme retunes the cork colour, glow, particle tint, and the moving shimmer. */

.lu-overlay{
  position:fixed;inset:0;
  background:rgba(20,5,15,0.62);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  z-index:500;
  display:none;
  align-items:center;justify-content:center;
  padding:20px;
}
.lu-overlay.open{display:flex;animation:luFadeIn .35s ease-out}
@keyframes luFadeIn{from{opacity:0}to{opacity:1}}

.lu-card{
  --lu-glow:rgba(201,165,80,0.5);
  --lu-glow-strong:rgba(201,165,80,0.85);
  --lu-particle:#f0d878;
  --lu-shimmer:rgba(255,255,255,0.22);
  position:relative;
  background:linear-gradient(160deg,#fdf8f0 0%,#fff7e0 60%,#f8eac4 100%);
  border:2.5px solid #c9a550;
  border-radius:20px;
  padding:25px 16px 22px;
  width:100%;max-width:306px;
  text-align:center;
  box-shadow:
    0 16px 50px rgba(0,0,0,0.55),
    0 0 70px var(--lu-glow),
    inset 0 1px 0 rgba(255,255,255,0.6);
  animation:luPop .65s cubic-bezier(.34,1.56,.64,1);
  overflow:hidden;
}
@keyframes luPop{
  0%{transform:scale(0.3) rotate(-6deg);opacity:0}
  60%{transform:scale(1.06) rotate(1.5deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}

/* Close button — top-right corner of the card */
.lu-close-btn{
  position:absolute;top:10px;right:12px;
  background:none;border:none;
  color:#c9a550;font-size:20px;line-height:1;
  cursor:pointer;padding:4px 6px;z-index:10;
  opacity:0.65;transition:opacity .15s;
}
.lu-close-btn:active{opacity:1;transform:scale(0.9)}

/* Optional jump indicator (only shown when player skipped multiple levels at once) */
.lu-jump{
  display:none;
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  color:#8a6a20;background:rgba(201,165,80,0.15);
  border:1px solid rgba(201,165,80,0.35);
  border-radius:12px;
  padding:3px 10px;
  margin:0 auto 10px;
  width:fit-content;
}

/* ---- Heading ---- */
.lu-headline{
  font-family:var(--font-display);
  font-size:18px;letter-spacing:5px;text-transform:uppercase;
  color:#c9a550;
  margin-bottom:4px;
  position:relative;z-index:2;
  animation:luTextIn .55s .2s both ease-out;
}
@keyframes luTextIn{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}

.lu-sub{
  font-size:12px;color:#8a7a5a;letter-spacing:1px;font-style:italic;
  margin-bottom:16px;
  position:relative;z-index:2;
  animation:luTextIn .55s .28s both ease-out;
}

/* ---- HERO gold star surrounded by the rotating Wine Me wreath ----
   Two stacked images: the wreath is absolutely positioned to fill the container and spins
   continuously, the star sits centred on top and gently pulses. The container itself pops
   in with a bounce when the modal opens. */
.lu-hero-star{
  position:relative;
  width:261px;height:261px;
  margin:6px auto 4px;
  display:flex;align-items:center;justify-content:center;
  z-index:3;
  animation:luContainerPop .9s .2s cubic-bezier(.34,1.56,.64,1) both;
}
.lu-hero-ring{
  position:absolute;inset:0;
  width:100%;height:100%;
  pointer-events:none;
  opacity:0.85;
  filter:drop-shadow(0 0 16px rgba(201,165,80,0.55));
  animation:luBgSpin 8s linear infinite;
}
/* Badges container — absolutely-positioned grid of disc(s)/star(s) inside the wreath */
.lu-hero-badges{
  position:absolute;inset:0;
  z-index:1;
  pointer-events:none;
}
/* Earned avatar for the new level — the centrepiece reward inside the spinning wreath. */
.lu-hero-avatar{
  position:absolute;left:50%;top:50%;
  width:134px;height:134px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  z-index:2;pointer-events:none;
  filter:drop-shadow(0 5px 16px rgba(122,18,32,0.38));
  animation:luStarPop .8s .35s cubic-bezier(.34,1.56,.64,1) both;
}
.lu-avatar-unlock{
  margin-top:9px;font-size:12px;font-weight:800;letter-spacing:1px;
  color:#c9a550;text-transform:uppercase;
}
/* Level 80 only: sub-container that holds the 7 ring stars and rotates them around the
   central star. Opposite direction from the WINE ME wreath behind it (which spins clockwise),
   so the two rotations cross visually. Delay starts after the ring stars finished popping in. */
.lu-hero-ring-stars{
  position:absolute;inset:0;
  pointer-events:none;
  animation:luBgSpin 12s 1.6s linear infinite reverse;
  transform-origin:50% 50%;
}
.lu-hero-badge{
  position:absolute;
  transform:translate(-50%,-50%);
  animation:luStarPop .75s cubic-bezier(.34,1.56,.64,1) both;
  /* animation-delay set inline per badge for staggered pop-in */
}
.lu-hero-badge img,
.lu-hero-badge .lu-hero-disc{
  width:100%;height:100%;display:block;
  /* Stronger pulse than before — bigger scale swing AND faster cycle so it visibly "breathes" */
  animation:luStarPulse 1.4s 1s infinite ease-in-out;
}
/* Gold coin / disc for early levels (1-9), before stars are earned */
.lu-hero-disc{
  background:radial-gradient(circle at 32% 28%,#fff4c2 0%,#f0d878 30%,#c9a550 65%,#8a6a20 100%);
  border-radius:50%;
  border:3px solid #c9a550;
  box-shadow:inset 4px 4px 10px rgba(255,255,255,0.4),inset -4px -6px 10px rgba(80,40,10,0.3);
}

@keyframes luBgSpin{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}
/* Container pop — for .lu-hero-star (lives in normal flow, NO translate). Was sharing
   luStarPop with badges and inheriting their translate(-50%,-50%), which kept pushing the
   whole hero block into the top-left corner of the card. */
@keyframes luContainerPop{
  0%  {transform:scale(0) rotate(-90deg);opacity:0}
  60% {transform:scale(1.1) rotate(6deg);opacity:1}
  100%{transform:scale(1) rotate(0);opacity:1}
}
/* Badge pop — for .lu-hero-badge (absolutely positioned, needs translate to centre on its
   percentage anchor point). */
@keyframes luStarPop{
  0%  {transform:translate(-50%,-50%) scale(0) rotate(-140deg);opacity:0}
  60% {transform:translate(-50%,-50%) scale(1.15) rotate(10deg);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1}
}
/* Pronounced pulse — scale swings 0.9 → 1.18 and the glow bloom is much brighter at peak.
   Faster cycle (1.4s vs the old 2.6s) so the breathing is clearly visible during the brief
   modal display. */
@keyframes luStarPulse{
  0%,100%{
    filter:drop-shadow(0 4px 8px rgba(0,0,0,0.25)) drop-shadow(0 0 12px rgba(255,235,160,0.5));
    transform:scale(0.92);
  }
  50%{
    filter:drop-shadow(0 4px 14px rgba(0,0,0,0.32)) drop-shadow(0 0 42px rgba(255,235,160,1));
    transform:scale(1.18);
  }
}
/* Make sure the card sits above any later siblings (legacy safety) */
.lu-card{position:relative;z-index:2}


/* ---- Central focus: "Niveau N" caption above, big uppercase level name below ---- */
.lu-level-block{
  text-align:center;
  margin:18px 0 12px;
  position:relative;z-index:3;
  padding:0 6px;
}
/* "Niveau 7" — one consistent font/style for both the word and the number (no mixed
   serif/italic combo). Italic, gold, modest size. Appears FIRST. */
.lu-level-num{
  font-size:16px;
  font-style:italic;
  letter-spacing:1.5px;
  color:#8a6a20;
  font-weight:500;
  margin-bottom:8px;
  animation:luTextIn .55s .35s both ease-out;
}
.lu-level-num span{
  /* Match the surrounding text — same font, same italic, same weight. Only the number changes. */
  font:inherit;
  color:inherit;
  margin-left:4px;
}
/* Big uppercase level name BELOW the "Niveau N" caption */
.lu-level-name{
  font-family:var(--font-display);
  font-size:27px;letter-spacing:2.5px;
  text-transform:uppercase;
  color:#5e0c23;
  line-height:1.1;
  margin-bottom:10px;
  word-break:break-word;
  text-shadow:0 1px 0 rgba(255,255,255,0.6);
  animation:
    luTextIn .65s .55s both ease-out,
    luNamePulse 2.6s 1.4s infinite ease-in-out;
}
@keyframes luNamePulse{
  0%,100%{transform:scale(1);text-shadow:0 1px 0 rgba(255,255,255,0.6)}
  50%    {transform:scale(1.025);text-shadow:0 1px 0 rgba(255,255,255,0.6),0 0 18px var(--lu-glow-strong)}
}

/* ---- Rain of stars falling from above the viewport ----
   The container is on <body> at z:501 (above the level-up overlay), so stars pass over
   the modal card. Each star gets randomised left position, size, colour, rotation drift,
   fall duration and delay (set via inline CSS custom properties from level-up.js).
   Glyphs are unicode stars (★ ✦ ✧ ✬ ✪) so there's no asset load and crisp scaling. */
.lu-star-rain{
  position:fixed;inset:0;
  pointer-events:none;
  z-index:501;
  overflow:hidden;
}
.lu-star{
  position:absolute;top:-40px;
  display:inline-block;line-height:1;
  opacity:0;
  text-shadow:
    0 0 6px currentColor,
    0 0 14px rgba(255,244,194,0.55),
    0 2px 6px rgba(0,0,0,0.25);
  animation:luStarFall var(--fall-dur,3s) var(--fall-delay,0s) cubic-bezier(0.25,0.1,0.25,1) forwards;
  will-change:transform,opacity;
  user-select:none;
}
@keyframes luStarFall{
  0%  {transform:translateY(0) rotate(var(--rot-start,0deg));opacity:0}
  10% {opacity:1}
  88% {opacity:1}
  100%{transform:translateY(calc(100vh + 100px)) rotate(var(--rot-end,0deg));opacity:0.95}
}

/* ---- Floating gold particles drifting up across the card ---- */
.lu-particles{
  position:absolute;inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.lu-particle{
  position:absolute;bottom:-6px;
  width:4px;height:4px;border-radius:50%;
  background:radial-gradient(circle,var(--lu-particle) 0%,rgba(240,216,120,0.6) 50%,transparent 80%);
  animation:luParticleFloat 3.6s infinite ease-out;
  opacity:0;
}
@keyframes luParticleFloat{
  0%   {transform:translate(0,0) scale(0.5);opacity:0}
  10%  {opacity:1}
  100% {transform:translate(var(--drift,0),-360px) scale(1.2);opacity:0}
}

/* ---- Subtle "wine sparkle" twinkles — small flash dots scattered near the cork ---- */
.lu-sparkle{
  position:absolute;width:9px;height:9px;
  background:radial-gradient(circle,#fff 0%,var(--lu-particle) 40%,transparent 75%);
  border-radius:50%;
  pointer-events:none;z-index:3;
  animation:luSparkle 1.6s infinite;
}
@keyframes luSparkle{
  0%,100%{opacity:0;transform:scale(0)}
  50%{opacity:1;transform:scale(1.4)}
}
/* A second sparkle variant with longer asymmetric twinkle — feels more "champagne fizz" */
.lu-sparkle.lu-sparkle-slow{
  width:5px;height:5px;
  animation:luSparkleSlow 2.4s infinite;
}
@keyframes luSparkleSlow{
  0%,100%{opacity:0;transform:scale(0) rotate(0deg)}
  30%    {opacity:0.8;transform:scale(1) rotate(45deg)}
  60%    {opacity:0;transform:scale(0.4) rotate(90deg)}
}

/* ---- Gold shimmer sweeping across the card surface ---- */
.lu-card::after{
  content:'';
  position:absolute;top:0;left:-110%;
  width:90%;height:100%;
  background:linear-gradient(105deg,transparent 30%,var(--lu-shimmer) 50%,transparent 70%);
  animation:luShimmer 3.5s 0.7s infinite;
  pointer-events:none;
  z-index:1;
}
@keyframes luShimmer{
  0%   {left:-110%}
  55%,100%{left:110%}
}

/* ---- Poetic citation below the level name (bordeaux italic, one per level) ---- */
.lu-citation{
  font-size:13px;
  font-style:italic;
  letter-spacing:0.3px;
  color:#5e0c23;
  line-height:1.4;
  margin:2px auto 12px;
  max-width:280px;
  padding:0 8px;
  position:relative;z-index:2;
  animation:luTextIn .6s .75s both ease-out;
}

/* ---- Tier label, appears last in the cascade ---- */
.lu-tier{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:#c9a550;font-weight:600;
  margin-top:6px;
  position:relative;z-index:2;
  animation:luTextIn .55s .95s both ease-out;
}

/* ---- Share button — captures the card and offers Web Share / download fallback ---- */
/* Instagram-gradient share button — same palette as .res-btn-share (results "brag" + party
   history), so every story-share button in the app reads identically. */
.lu-share-btn{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:16px;
  padding:12px 24px;
  background:linear-gradient(135deg,#833AB4,#C13584,#E1306C,#F77737,#FCAF45);
  color:#fff;
  border:none;
  border-radius:10px;
  font-family:var(--font-display);
  font-size:12px;letter-spacing:1.4px;text-transform:uppercase;
  cursor:pointer;
  position:relative;z-index:3;
  animation:luTextIn .55s 1.15s both ease-out;
  transition:transform .15s,box-shadow .15s;
  box-shadow:0 3px 10px rgba(0,0,0,0.25);
}
@media (hover: hover){.lu-share-btn:hover{box-shadow:0 4px 14px rgba(0,0,0,0.35)}}
.lu-share-btn:active{transform:scale(0.94);box-shadow:0 2px 8px rgba(0,0,0,0.3)}
.lu-share-btn:disabled{opacity:0.6;cursor:wait;transform:none}
.lu-share-btn svg{flex-shrink:0}

/* Subtle gold border line across the card top */
.lu-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,#c9a550,#f0d878,#c9a550,transparent);
  border-radius:18px 18px 0 0;
  z-index:2;
}

/* ============================================================================
   TIER THEMES — applied to .lu-card via class added in level-up.js
   ============================================================================ */

/* ---- BRONZE (levels 1-20: La Vigne, Le Vignoble) — warm copper ---- */
.lu-card.lu-theme-bronze{
  --lu-glow:rgba(196,117,65,0.5);
  --lu-glow-strong:rgba(196,117,65,0.9);
  --lu-particle:#d9a275;
  --lu-shimmer:rgba(217,162,117,0.22);
  border-color:#c47541;
}
.lu-card.lu-theme-bronze .lu-headline{color:#a06a3e}
.lu-card.lu-theme-bronze .lu-level-name{color:#6a3a1e}
.lu-card.lu-theme-bronze .lu-level-num span{color:#a06a3e}
.lu-card.lu-theme-bronze .lu-tier{color:#a06a3e}

/* ---- GOLD (levels 21-40: La Cave, Le Terroir) — the default ---- */
.lu-card.lu-theme-gold{
  --lu-glow:rgba(201,165,80,0.55);
  --lu-glow-strong:rgba(240,216,120,0.95);
  --lu-particle:#f0d878;
  --lu-shimmer:rgba(255,235,160,0.28);
}
/* (default colours fit the gold theme — no level-name override) */

/* ---- PRESTIGE (levels 41-60: Le Palais, Le Château) — deep burgundy + gold ---- */
.lu-card.lu-theme-prestige{
  --lu-glow:rgba(138,21,56,0.6);
  --lu-glow-strong:rgba(201,165,80,0.95);
  --lu-particle:#c9a550;
  --lu-shimmer:rgba(240,216,120,0.25);
  background:linear-gradient(160deg,#fdf8f0 0%,#f8e8d4 50%,#e8c8b4 100%);
  border-color:#8a1538;
}
.lu-card.lu-theme-prestige .lu-headline{color:#5e0c23}
.lu-card.lu-theme-prestige .lu-level-name{color:#5e0c23}
.lu-card.lu-theme-prestige .lu-level-num span{color:#8a1538}
.lu-card.lu-theme-prestige .lu-tier{color:#8a1538}

/* ---- LEGENDARY (levels 61-80: La Légende, Le Panthéon) — golden aura, deep gold text ----
   Earlier draft used a white-in-the-middle gradient on the text, which sank into the white
   card background and made the headline barely readable. We now use an all-gold gradient
   (bronze → gold → cream-gold → gold → bronze) and a slightly warmer card background so the
   text reads cleanly while still feeling "legendary". */
.lu-card.lu-theme-legendary{
  --lu-glow:rgba(255,235,160,0.6);
  --lu-glow-strong:rgba(255,250,220,0.95);
  --lu-particle:#fff4c2;
  --lu-shimmer:rgba(255,235,160,0.4);
  background:linear-gradient(160deg,#fffaea 0%,#fff0c8 55%,#f5e6b8 100%);
  border-color:#c9a550;
  box-shadow:
    0 16px 50px rgba(0,0,0,0.55),
    0 0 70px rgba(255,235,160,0.7),
    0 0 110px rgba(201,165,80,0.45),
    inset 0 1px 0 rgba(255,255,255,0.85);
}
.lu-card.lu-theme-legendary .lu-headline{
  color:#8a6a20;
  text-shadow:0 1px 0 rgba(255,255,255,0.5),0 0 14px rgba(255,235,160,0.7);
}
/* Pantheon level name: gradient text sank into the cream background — switch to a SOLID
   deep-bordeaux fill with a subtle gold glow so it reads instantly against the warm card. */
.lu-card.lu-theme-legendary .lu-level-name{
  color:#5e0c23;
  background:none;
  -webkit-text-fill-color:#5e0c23;
  text-shadow:0 1px 0 rgba(255,255,255,0.6),0 0 16px rgba(201,165,80,0.45);
  filter:none;
}
.lu-card.lu-theme-legendary .lu-level-num{color:#8a6a20}
.lu-card.lu-theme-legendary .lu-tier{color:#8a6a20}