/* ==========================================================
   FleetFixer  -  Learn Fun layer (kids personality skin)

   The "kids fun layer" for the learning LESSON pages. It makes the
   content feel modern and full of personality while keeping the
   Pine & Citrus brand frame (the dark pine .topbar) untouched.

   LOAD ORDER: this file loads AFTER /shared/learn-guide.css (guides)
   and AFTER /shared/games.css (games) so it can override them. It is
   the last word on lesson visuals.

   It restyles by SELECTOR only. It does NOT rename or remove any
   class, id, or data-* attribute, and it does NOT touch the activity
   widget internals (.match-item, .flashcard, .fitb-word,
   .diagram-label, etc.) which another agent owns in activities.css.

   The fun palette below layers over the brand: pine (--accent
   #15614A) stays the primary brand colour. The fun colours add
   personality, they do not replace the brand.
   ========================================================== */

:root{
  /* Bold kids palette layered over the Pine & Citrus brand (pine/sea stay the anchor). */
  --fun-yellow:#F6B73C; --fun-yellow-soft:#FEF3D6;
  --fun-coral:#F2784B;  --fun-coral-soft:#FDE6DC;
  --fun-sky:#36A8E0;    --fun-sky-soft:#DCEEFB;
  --fun-green:#2FB471;  --fun-green-soft:#DBF3E6;
  --fun-grape:#7C6BD8;  --fun-grape-soft:#E9E4FB;
  --fun-teal:#0C9CB0;   --fun-teal-soft:#E0F5F8;
  --fun-ink:#14201B;
  --fun-radius:18px; --fun-radius-lg:24px; --fun-radius-pill:999px;
  --fun-shadow:0 5px 0 rgba(20,32,27,.10);           /* chunky offset 'sticker' shadow */
  --fun-shadow-pop:0 12px 26px rgba(20,32,27,.16);
  --fun-font:"Inter",system-ui,-apple-system,sans-serif;
}

/* ──────────────────────────────────────────────────────────
   1. LESSON HERO
   .page-header becomes a bright friendly hero band. Room is left
   at the left/top for the mascot greeting block that learn-fun.js
   injects (.fun-mascot-greet + .fun-speech).
   ────────────────────────────────────────────────────────── */
.page-header{
  position:relative;
  text-align:left;
  margin-bottom:28px;
  padding:26px 28px;
  border-radius:var(--fun-radius-lg, 24px);
  background:
    linear-gradient(135deg,
      var(--fun-sky-soft, #DCEEFB) 0%,
      var(--fun-teal-soft, #E0F5F8) 45%,
      var(--fun-yellow-soft, #FEF3D6) 100%);
  border:2px solid #fff;
  box-shadow:var(--fun-shadow-pop, 0 12px 26px rgba(20,32,27,.16));
  overflow:hidden;
}
/* A soft playful sun-bubble in the corner for extra personality. */
.page-header::after{
  content:"";
  position:absolute;
  right:-40px;
  top:-40px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%,
    rgba(246,183,60,.45), rgba(246,183,60,0) 70%);
  pointer-events:none;
}
.page-header h1{
  position:relative;
  z-index:1;
  font-family:var(--fun-font, "Inter", sans-serif);
  font-size:clamp(30px, 5vw, 40px);
  font-weight:900;
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--fun-ink, #14201B);
  margin-bottom:8px;
  text-wrap:balance;
}
.page-header h1 i{
  color:var(--fun-teal, #0C9CB0);
  margin-right:8px;
}
.page-header p{
  position:relative;
  z-index:1;
  font-size:16px;
  font-weight:600;
  line-height:1.5;
  color:var(--fun-ink, #14201B);
  opacity:.78;
  max-width:48ch;
}

/* Mascot greeting block (injected by learn-fun.js): mascot + speech
   bubble sitting above the hero text. */
.fun-mascot-greet{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  gap:12px;
  margin-bottom:14px;
}
.fun-mascot-greet .fun-mascot{
  flex:0 0 auto;
}
/* The speech bubble with a little tail pointing down-left at the mascot. */
.fun-speech{
  position:relative;
  display:inline-block;
  background:#fff;
  color:var(--fun-ink, #14201B);
  font-family:var(--fun-font, "Inter", sans-serif);
  font-size:14px;
  font-weight:700;
  line-height:1.45;
  padding:11px 16px;
  border-radius:var(--fun-radius, 18px);
  border:2px solid var(--fun-sky, #36A8E0);
  box-shadow:var(--fun-shadow, 0 5px 0 rgba(20,32,27,.10));
  max-width:340px;
}
.fun-speech::before{
  content:"";
  position:absolute;
  left:-9px;
  bottom:12px;
  width:16px;
  height:16px;
  background:#fff;
  border-left:2px solid var(--fun-sky, #36A8E0);
  border-bottom:2px solid var(--fun-sky, #36A8E0);
  transform:rotate(45deg);
}

/* ──────────────────────────────────────────────────────────
   2. PROGRESS
   .progress-summary becomes a chunky cheerful pill.
   ────────────────────────────────────────────────────────── */
.progress-summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0 auto 26px;
  width:auto;
  padding:9px 20px;
  border-radius:var(--fun-radius-pill, 999px);
  background:var(--fun-yellow-soft, #FEF3D6);
  border:2px solid var(--fun-yellow, #F6B73C);
  color:var(--fun-ink, #14201B);
  font-size:14px;
  font-weight:800;
  letter-spacing:0;
  box-shadow:var(--fun-shadow, 0 5px 0 rgba(20,32,27,.10));
}
/* The block-level summary still wants to be centred on the page. */
.progress-summary::before{
  content:"\f091"; /* fa trophy */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  color:var(--fun-yellow, #F6B73C);
  font-size:15px;
}
/* Centre the inline-flex pill inside its block container. */
.container > .progress-summary{
  display:flex;
  width:fit-content;
}

/* ──────────────────────────────────────────────────────────
   3. SECTION CARDS
   .guide-section gets a chunkier rounded look with the offset
   sticker shadow. The header icon sits in a colourful chip that
   rotates colour by section position. Bouncy hover.
   ────────────────────────────────────────────────────────── */
.guide-section{
  border-radius:var(--fun-radius-lg, 24px);
  border:2px solid #fff;
  box-shadow:var(--fun-shadow, 0 5px 0 rgba(20,32,27,.10));
  margin-bottom:18px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),
             box-shadow .18s ease;
}
.guide-section:hover{
  transform:translateY(-3px);
  box-shadow:var(--fun-shadow-pop, 0 12px 26px rgba(20,32,27,.16));
}
.guide-section-header{
  font-size:16px;
  font-weight:800;
  color:var(--fun-ink, #14201B);
  padding:18px 22px;
  gap:10px;
}
.guide-section-header > span:first-child{
  display:flex;
  align-items:center;
  gap:12px;
}
/* The leading icon becomes a colourful rounded chip. */
.guide-section-header > span:first-child > i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:13px;
  font-size:16px;
  color:#fff;
  flex:0 0 auto;
  box-shadow:var(--fun-shadow, 0 5px 0 rgba(20,32,27,.10));
  transition:transform .18s cubic-bezier(.34,1.56,.64,1);
}
.guide-section-header:hover > span:first-child > i{
  transform:rotate(-6deg) scale(1.06);
}
/* Rotate the chip colour by section position so each one is distinct.
   Order: teal, coral, sky, green, grape, yellow, then repeat. */
.guide-section:nth-of-type(6n+1) .guide-section-header > span:first-child > i{
  background:var(--fun-teal, #0C9CB0);
}
.guide-section:nth-of-type(6n+2) .guide-section-header > span:first-child > i{
  background:var(--fun-coral, #F2784B);
}
.guide-section:nth-of-type(6n+3) .guide-section-header > span:first-child > i{
  background:var(--fun-sky, #36A8E0);
}
.guide-section:nth-of-type(6n+4) .guide-section-header > span:first-child > i{
  background:var(--fun-green, #2FB471);
}
.guide-section:nth-of-type(6n+5) .guide-section-header > span:first-child > i{
  background:var(--fun-grape, #7C6BD8);
}
.guide-section:nth-of-type(6n+6) .guide-section-header > span:first-child > i{
  /* yellow chip needs the dark ink for legible icon contrast */
  background:var(--fun-yellow, #F6B73C);
  color:var(--fun-ink, #14201B);
}
.guide-section-header:hover{
  background:var(--fun-teal-soft, #E0F5F8);
}
/* Tint the hover surface to match each section's chip colour. */
.guide-section:nth-of-type(6n+2) .guide-section-header:hover{background:var(--fun-coral-soft, #FDE6DC)}
.guide-section:nth-of-type(6n+3) .guide-section-header:hover{background:var(--fun-sky-soft, #DCEEFB)}
.guide-section:nth-of-type(6n+4) .guide-section-header:hover{background:var(--fun-green-soft, #DBF3E6)}
.guide-section:nth-of-type(6n+5) .guide-section-header:hover{background:var(--fun-grape-soft, #E9E4FB)}
.guide-section:nth-of-type(6n+6) .guide-section-header:hover{background:var(--fun-yellow-soft, #FEF3D6)}

.guide-section-header .chevron{
  color:var(--fun-teal, #0C9CB0);
  font-weight:900;
}

/* ──────────────────────────────────────────────────────────
   4. KEY-FACT as mascot speech
   .key-fact becomes a friendly "Skip says" callout. It pairs with
   a small mascot that learn-fun.js injects (.fun-keyfact-mascot).
   ────────────────────────────────────────────────────────── */
.key-fact{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--fun-yellow-soft, #FEF3D6);
  border:2px solid var(--fun-yellow, #F6B73C);
  border-left:6px solid var(--fun-yellow, #F6B73C);
  border-radius:var(--fun-radius, 18px);
  padding:14px 18px;
  margin:16px 0;
  font-size:14px;
  font-weight:600;
  line-height:1.6;
  color:var(--fun-ink, #14201B);
}
.key-fact i{
  color:var(--fun-yellow, #F6B73C);
  margin-right:0;
}
/* The small mascot the JS injects alongside the callout text. */
.fun-keyfact-mascot{
  flex:0 0 auto;
  width:34px;
  height:34px;
  margin-top:1px;
}
/* "Skip says" eyebrow that learn-fun.js may prepend, styled if present. */
.key-fact .fun-says{
  display:block;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--fun-coral, #F2784B);
  margin-bottom:3px;
}

/* ──────────────────────────────────────────────────────────
   5. ACTIVITIES wrapper
   .activity becomes a bright inviting panel. The widget controls
   inside are owned by activities.css, we only style the panel and
   its title here.
   ────────────────────────────────────────────────────────── */
.activity{
  border-radius:var(--fun-radius-lg, 24px);
  padding:22px;
  margin-top:22px;
  background:var(--fun-sky-soft, #DCEEFB);
  border:2px solid #fff;
  box-shadow:var(--fun-shadow, 0 5px 0 rgba(20,32,27,.10));
}
.activity-title{
  font-size:13px;
  font-weight:900;
  letter-spacing:.4px;
  color:var(--fun-ink, #14201B);
  margin-bottom:16px;
}
.activity-title i{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  border-radius:9px;
  font-size:12px;
  color:#fff;
  background:var(--fun-grape, #7C6BD8);
  box-shadow:0 3px 0 rgba(20,32,27,.10);
}
/* The completion line gets a cheerful green badge feel. */
.activity-done.show{
  font-size:13px;
  font-weight:800;
  color:var(--fun-green, #2FB471);
  margin-top:14px;
}
.activity-done i{color:var(--fun-green, #2FB471)}

/* ──────────────────────────────────────────────────────────
   6. GAME-LINK
   .game-link becomes a big juicy chunky play button.
   ────────────────────────────────────────────────────────── */
.game-link{
  gap:10px;
  padding:16px 28px;
  border-radius:var(--fun-radius-pill, 999px);
  background:linear-gradient(135deg,
    var(--fun-coral, #F2784B) 0%,
    var(--fun-yellow, #F6B73C) 100%);
  color:#fff;
  font-size:15px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:var(--fun-shadow, 0 5px 0 rgba(20,32,27,.10));
  margin-top:20px;
  transition:transform .14s cubic-bezier(.34,1.56,.64,1),
             box-shadow .14s ease,
             filter .14s ease;
}
.game-link i{font-size:16px}
.game-link:hover{
  background:linear-gradient(135deg,
    var(--fun-coral, #F2784B) 0%,
    var(--fun-yellow, #F6B73C) 100%);
  transform:translateY(-2px);
  box-shadow:var(--fun-shadow-pop, 0 12px 26px rgba(20,32,27,.16));
  filter:saturate(1.08);
}
/* Bouncy press: button squashes down onto its shadow. */
.game-link:active{
  transform:translateY(3px);
  box-shadow:0 2px 0 rgba(20,32,27,.10);
}

/* ──────────────────────────────────────────────────────────
   7. CONFETTI
   Fixed full-screen container with coloured particle pieces that
   learn-fun.js spawns on a win.
   ────────────────────────────────────────────────────────── */
.fun-confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:9999;
}
.fun-confetti-piece{
  position:absolute;
  top:-20px;
  width:10px;
  height:10px;
  border-radius:2px;
  opacity:.95;
  will-change:transform, opacity;
  animation:funConfettiFall 2.6s cubic-bezier(.25,.46,.45,.94) forwards;
}
/* A mix of squares and circles, coloured from the fun palette. */
.fun-confetti-piece:nth-child(6n+1){background:var(--fun-yellow, #F6B73C)}
.fun-confetti-piece:nth-child(6n+2){background:var(--fun-coral, #F2784B);border-radius:50%}
.fun-confetti-piece:nth-child(6n+3){background:var(--fun-sky, #36A8E0)}
.fun-confetti-piece:nth-child(6n+4){background:var(--fun-green, #2FB471);border-radius:50%}
.fun-confetti-piece:nth-child(6n+5){background:var(--fun-grape, #7C6BD8)}
.fun-confetti-piece:nth-child(6n+6){background:var(--fun-teal, #0C9CB0);border-radius:50%}
@keyframes funConfettiFall{
  0%{
    transform:translateY(-10px) rotate(0deg);
    opacity:1;
  }
  100%{
    transform:translateY(105vh) rotate(640deg);
    opacity:0;
  }
}

/* ──────────────────────────────────────────────────────────
   8. ENCOURAGING MESSAGE
   .fun-praise is a rounded pill toast that pops in then fades,
   shown by learn-fun.js on a win.
   ────────────────────────────────────────────────────────── */
.fun-praise{
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translateX(-50%);
  z-index:10000;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 26px;
  border-radius:var(--fun-radius-pill, 999px);
  background:linear-gradient(135deg,
    var(--fun-green, #2FB471) 0%,
    var(--fun-teal, #0C9CB0) 100%);
  color:#fff;
  font-family:var(--fun-font, "Inter", sans-serif);
  font-size:16px;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow:var(--fun-shadow-pop, 0 12px 26px rgba(20,32,27,.16));
  pointer-events:none;
  animation:funPraisePop 2.4s cubic-bezier(.34,1.56,.64,1) forwards;
}
.fun-praise i{font-size:17px}
@keyframes funPraisePop{
  0%{opacity:0;transform:translateX(-50%) translateY(20px) scale(.8)}
  14%{opacity:1;transform:translateX(-50%) translateY(0) scale(1.05)}
  24%{transform:translateX(-50%) translateY(0) scale(1)}
  80%{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0;transform:translateX(-50%) translateY(-14px) scale(.96)}
}

/* ──────────────────────────────────────────────────────────
   9. MASCOT
   Base styles plus pose and celebration animation classes used by
   learn-fun.js. A gentle idle bob keeps the mascot feeling alive.
   ────────────────────────────────────────────────────────── */
.fun-mascot{
  display:inline-block;
  width:48px;
  height:48px;
  line-height:1;
  font-size:40px;
  text-align:center;
  user-select:none;
  transform-origin:center bottom;
  animation:funMascotBob 3.2s ease-in-out infinite;
}
.fun-mascot img,
.fun-mascot svg{
  width:100%;
  height:100%;
  display:block;
}
/* Celebration pose: a bigger bouncy wiggle the JS toggles on a win. */
.fun-mascot.cheer{
  animation:funMascotCheer .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes funMascotBob{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-5px) rotate(-1.5deg)}
}
@keyframes funMascotCheer{
  0%{transform:translateY(0) rotate(0deg) scale(1)}
  25%{transform:translateY(-12px) rotate(-10deg) scale(1.12)}
  50%{transform:translateY(0) rotate(8deg) scale(1.05)}
  75%{transform:translateY(-6px) rotate(-5deg) scale(1.08)}
  100%{transform:translateY(0) rotate(0deg) scale(1)}
}

/* ──────────────────────────────────────────────────────────
   10. REDUCED MOTION
   Extend the guard: under reduced motion, neutralise the new
   bounces, the idle bob, confetti, and the praise pop. The
   matchShake keyframe and the flashcard 3D flip remain owned and
   guarded by activities.css.
   ────────────────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  .guide-section,
  .guide-section:hover,
  .game-link,
  .game-link:hover,
  .game-link:active,
  .guide-section-header:hover > span:first-child > i{
    transition:none;
    transform:none;
  }
  .fun-mascot,
  .fun-mascot.cheer{
    animation:none;
    transform:none;
  }
  .fun-confetti{
    display:none;
  }
  .fun-confetti-piece{
    animation:none;
    opacity:0;
  }
  .fun-praise{
    animation:none;
    opacity:1;
  }
}