/*
  ============================================================
  SUNNY'S STAR CATCH — GAME STYLES
  ============================================================
  Adapted directly from games/snaps-bubble-pop/snaps-bubble-pop.css
  (a proven, live, click/tap-to-pop game) -- same structure, same
  proven [hidden]-vs-flex specificity guards, reskinned for a sky/
  star theme instead of a bubble pond. Loaded after styles.css
  (color tokens/buttons) and game-shell.css (shared chrome: topbar,
  sound toggle, .completion-overlay/.completion-card, the shared
  char-* expression keyframes, .game-progress bar). This file only
  adds what's new for this game: the HUD, the sky scene per level,
  the floating star objects (regular/golden/storm/comet), the
  comet "boost" ring around Sunny, and two Sunny-specific reaction
  states (char-storm, char-boost) that don't already exist in
  game-shell.css's shared set.
  ============================================================
*/

/* ---------- HUD ---------- */
.star-hud{
  position:relative; z-index:20; display:flex; align-items:center; justify-content:center;
  gap:14px; flex-wrap:wrap; padding:0 14px 8px; font-weight:800; font-size:0.92rem; color:var(--ink-soft);
}
/* Without this, the [hidden] attribute set in index.html is silently
   beaten by this rule's own "display:flex" at equal selector
   specificity -- the same guard snaps-bubble-pop.css documents for
   .bubble-hud. */
.star-hud[hidden]{ display:none; }
.star-hud-item{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.star-hud-item[hidden]{ display:none; }
.star-hud-level{ color:var(--ink); }
.star-hud-combo{
  color:#B85B00; background:#FFE8B8; border-radius:999px; padding:3px 12px;
  animation:star-combo-pulse .5s ease;
}
@keyframes star-combo-pulse{ 0%{ transform:scale(0.7);} 60%{ transform:scale(1.12);} 100%{ transform:scale(1);} }
.star-pause-btn{
  display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:999px; background:var(--surface); border:2px solid var(--line); cursor:pointer;
  font-size:1rem; box-shadow:0 3px 0 var(--line); margin-left:4px;
}
.star-pause-btn:hover{ transform:translateY(-1px); }

/* ---------- the sky scene (per level) ---------- */
.star-stage{
  background:linear-gradient(180deg, #BEE7FF 0%, #8FCFF5 40%, #5FA8E8 75%, #3D7FC9 100%);
}
.star-stage.env-cloudy{
  background:linear-gradient(180deg, #CFE0F5 0%, #A7BEDE 35%, #7C90C4 70%, #5A6BA8 100%);
}
.star-stage.env-meteor{
  background:linear-gradient(180deg, #2B2E63 0%, #3A3A82 35%, #55408F 70%, #6F3E86 100%);
}
.star-sky{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }

.star-horizon{
  position:absolute; left:0; right:0; bottom:0; height:16%; z-index:2; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.28) 55%, rgba(255,255,255,0.42) 100%);
}

/* ---------- decorative scenery: drifting clouds + twinkles, per level ---------- */
.star-scenery{ position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden; }
.scenery-cloud{
  position:absolute; border-radius:50%;
  background:radial-gradient(ellipse at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.65) 75%);
  box-shadow:inset 0 -4px 8px rgba(90,120,160,0.15); opacity:0.9;
  animation:scenery-cloud-drift linear infinite;
}
@keyframes scenery-cloud-drift{
  0%{ transform:translateX(-8vw); }
  100%{ transform:translateX(108vw); }
}
.scenery-twinkle{
  position:absolute; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle, #FFFFFF, rgba(255,255,255,0));
  animation:scenery-twinkle-pulse 2.6s ease-in-out infinite;
}
@keyframes scenery-twinkle-pulse{ 0%,100%{ opacity:0.25; transform:scale(0.7);} 50%{ opacity:1; transform:scale(1.15);} }
.scenery-moon{
  position:absolute; border-radius:50%; background:radial-gradient(circle at 35% 35%, #FFF9E0, #FFE9A8 65%, #F5D77E 100%);
  box-shadow:0 0 26px 10px rgba(255,236,170,0.45);
}
@media (prefers-reduced-motion:reduce){
  .scenery-cloud{ animation:none; }
  .scenery-twinkle{ animation:none; }
}

/* ---------- Sunny ---------- */
.star-stage .game-character{
  width:520px; height:520px; position:absolute; left:50%; bottom:2%; z-index:9;
  transform:translateX(-50%);
}
.star-stage .game-character img{ width:100%; height:100%; object-fit:contain; }
.star-stage #sunnyBubble{ left:50%; bottom:19%; transform:translateX(-20%); }
/* Same [hidden]-vs-"display:flex" trap as .star-hud above, this time
   on the shared .game-character class from game-shell.css. */
.star-stage .game-character[hidden]{ display:none; }

/* Storm reaction: a quick recoil + grey-blue tint pulse, since Sunny's
   approved artwork has no separate "startled" pose to draw from --
   a transform + filter reaction only, no invented facial features. */
.char-storm img{ animation:sunny-storm .7s ease; }
@keyframes sunny-storm{
  0%{ transform:scale(1) rotate(0deg); filter:none; }
  25%{ transform:scale(0.9,1.06) rotate(-6deg) translateY(4px); filter:saturate(0.6) brightness(0.9); }
  50%{ transform:scale(1.05,0.94) rotate(5deg) translateY(-2px); filter:saturate(0.7) brightness(0.95); }
  75%{ transform:scale(0.97,1.02) rotate(-2deg); filter:saturate(0.9); }
  100%{ transform:scale(1) rotate(0deg); filter:none; }
}

/* Comet boost: Sunny gets swept gently upward inside the boost ring
   (below) and settles back down -- a short, recoverable, purely
   decorative animation. Gameplay/timer/score keep running underneath
   it (see sunnys-star-catch.js), so it can never lock the game. */
.char-boost img{ animation:sunny-boost 1.3s ease-in-out; }
@keyframes sunny-boost{
  0%{ transform:translateY(0) rotate(0deg) scale(1); }
  30%{ transform:translateY(-38px) rotate(6deg) scale(1.05); }
  50%{ transform:translateY(-46px) rotate(-5deg) scale(1.05); }
  70%{ transform:translateY(-30px) rotate(3deg) scale(1.02); }
  100%{ transform:translateY(0) rotate(0deg) scale(1); }
}
.star-boost-ring{
  position:absolute; left:50%; bottom:2%; width:600px; height:600px; z-index:8;
  transform:translateX(-50%); border-radius:50%; pointer-events:none;
  border:4px solid rgba(255,255,255,0.6);
  background:radial-gradient(circle at 35% 30%, rgba(255,244,180,0.4), rgba(255,244,180,0.05) 60%);
  box-shadow:0 0 0 6px rgba(255,244,180,0.15), inset 0 0 24px rgba(255,255,255,0.4);
}
.star-boost-ring:not([hidden]){ animation:sunny-boost-ring 1.3s ease-in-out; }
@keyframes sunny-boost-ring{
  0%{ opacity:0; transform:translateX(-50%) translateY(0) scale(0.7); }
  15%{ opacity:1; }
  30%{ transform:translateX(-50%) translateY(-38px) scale(1); }
  70%{ transform:translateX(-50%) translateY(-30px) scale(1.02); }
  92%{ opacity:1; }
  100%{ opacity:0; transform:translateX(-50%) translateY(0) scale(0.8); }
}
@media (prefers-reduced-motion:reduce){
  .char-storm img, .char-boost img, .star-boost-ring:not([hidden]){ animation:none; }
}

/* ---------- stars ---------- */
.star-field{ position:absolute; inset:0; z-index:6; overflow:hidden; }
.star-wrap{ position:absolute; will-change:transform; }
.star-wrap .star{
  display:block; width:100%; height:100%; border:none; padding:0; cursor:pointer; position:relative;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation; user-select:none;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  box-shadow:inset -6px -8px 14px rgba(0,0,0,0.12), inset 6px 8px 14px rgba(255,255,255,0.6);
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.9), rgba(255,255,255,0.05) 40%),
    var(--star-color, #FFD23F);
}
.star-wrap .star:focus-visible{ outline:3px solid var(--blue); outline-offset:3px; }

.star-wrap.st-gold .star{ --star-color:#FFD23F; }
.star-wrap.st-blue .star{ --star-color:#6EC6FF; }
.star-wrap.st-pink .star{ --star-color:#FF8FB3; }
.star-wrap.st-purple .star{ --star-color:#B893FF; }
.star-wrap.st-orange .star{ --star-color:#FFAE6E; }

/* Hit-detection safeguard: z-index by TYPE (not spawn order) guarantees
   a rarer, more valuable star (golden/comet) is never hidden underneath
   -- and so never un-clickable -- behind a common star, mirroring
   snaps-bubble-pop.css's identical z-index-by-rarity pattern. */
.star-wrap{ z-index:1; }
.star-wrap.st-storm{ z-index:2; }
.star-wrap.st-golden{ z-index:3; }
.star-wrap.st-comet{ z-index:4; }

.star-wrap.is-floating .star{ animation:star-wobble 2.6s ease-in-out infinite; }
@keyframes star-wobble{ 0%,100%{ transform:translateX(0) rotate(0deg);} 50%{ transform:translateX(4px) rotate(8deg);} }

/* Golden bonus star -- warm glow + sparkle badge */
.star-wrap.st-golden .star{
  --star-color:#FFC22E;
  filter:drop-shadow(0 0 10px rgba(255,200,50,0.75));
}
.star-wrap.st-golden::after{
  content:"✨"; position:absolute; top:-6px; right:2px; font-size:0.8em; z-index:1;
  animation:star-golden-twinkle 1.1s ease-in-out infinite;
}
@keyframes star-golden-twinkle{ 0%,100%{ opacity:0.4; transform:scale(0.85);} 50%{ opacity:1; transform:scale(1.1);} }

/* Storm cloud -- a soft grey-blue blob (never color alone: the shape
   itself is a cloud, not a star, plus a rain-cloud glyph indicator). */
.star-wrap.st-storm .star{
  clip-path:none; border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;
  --star-color:#8FA3C7;
  background:
    radial-gradient(ellipse at 32% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0.05) 45%),
    var(--star-color);
  box-shadow:inset -6px -8px 14px rgba(30,45,80,0.25), inset 6px 8px 14px rgba(255,255,255,0.35),
    0 4px 8px rgba(0,0,0,0.2);
}
.star-wrap.st-storm::before{
  content:"🌧️"; position:absolute; top:-16px; left:50%; transform:translateX(-50%); z-index:1;
  font-size:0.85em; opacity:0.95;
  animation:star-storm-drift 1.8s ease-in-out infinite;
}
@keyframes star-storm-drift{ 0%,100%{ transform:translateX(-50%) translateY(0); opacity:0.75;} 50%{ transform:translateX(-50%) translateY(-5px); opacity:1;} }

/* Comet / shooting star -- large, glowing, with a trailing tail */
.star-wrap.st-comet .star{
  --star-color:#FFFDF0;
  box-shadow:inset -6px -8px 14px rgba(0,0,0,0.05), inset 6px 8px 14px rgba(255,255,255,0.85),
    0 0 18px 6px rgba(255,236,170,0.7);
}
.star-wrap.st-comet::before{
  content:""; position:absolute; top:46%; right:96%; width:150%; height:14%; z-index:-1;
  background:linear-gradient(90deg, rgba(255,236,170,0) 0%, rgba(255,236,170,0.55) 60%, rgba(255,255,255,0.85) 100%);
  border-radius:999px; transform:rotate(18deg); transform-origin:right center;
  filter:blur(1.5px);
}
.star-wrap.st-comet::after{
  content:""; position:absolute; inset:8%; border-radius:50%; pointer-events:none; z-index:1;
  background:conic-gradient(from 0deg, rgba(255,140,170,0.3), rgba(255,221,110,0.28), rgba(140,220,255,0.3),
    rgba(190,150,255,0.3), rgba(255,140,170,0.3));
  mix-blend-mode:screen; opacity:0.85;
  animation:star-comet-spin 6s linear infinite;
}
@keyframes star-comet-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .star-wrap.is-floating .star, .star-wrap.st-golden::after,
  .star-wrap.st-storm::before, .star-wrap.st-comet::after{ animation:none; }
}

/* Caught -- reuses the same scale+fade language as
   snaps-bubble-pop.css's .bubble-wrap.is-popped, applied here to the
   star wrap. */
.star-wrap.is-caught{ animation:star-catch-out .35s ease forwards; pointer-events:none; z-index:7; }
@keyframes star-catch-out{
  0%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.35); opacity:0.7; }
  100%{ transform:scale(0.2); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .star-wrap.is-caught{ animation:star-catch-out-simple .2s ease forwards; }
  @keyframes star-catch-out-simple{ to{ transform:scale(0.6); opacity:0; } }
}

/* ---------- start / how-to-play / stats ---------- */
.star-start-card{ max-width:380px; }
.star-start-sunny{
  width:130px; height:auto; margin:0 auto 10px; display:block; filter:drop-shadow(0 8px 10px rgba(0,0,0,0.25));
}
.star-howto-card{ max-width:420px; text-align:left; }
.star-howto-list{ list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:12px; }
.star-howto-list li{ display:flex; align-items:flex-start; gap:10px; font-weight:700; font-size:0.95rem; line-height:1.35; }
.star-howto-icon{ flex:none; font-size:1.15rem; }
.star-stats{
  display:flex; flex-direction:column; gap:6px; margin:0 0 20px; font-weight:800; color:var(--ink);
  background:var(--surface-alt); border-radius:16px; padding:14px 18px;
}
.star-stats-row{ display:flex; justify-content:space-between; gap:16px; font-size:0.95rem; }
.star-stats-row span:last-child{ color:var(--coral-ink); }

@media (max-width:600px){
  .star-hud{ font-size:0.8rem; gap:8px; padding:0 10px 6px; }
  .star-start-sunny{ width:100px; }
  .star-stage .game-character{ width:360px; height:360px; }
  .star-boost-ring{ width:420px; height:420px; }
}

@media (max-height:700px){
  .star-hud{ padding:0 10px 4px; gap:6px; }
  .star-stage .game-character{ width:340px; height:340px; }
  .star-boost-ring{ width:380px; height:380px; }
}