/* ----------------------------------------------------------------------
   Shared styling for the Mighty Moose French game gallery.
   Brand tokens + common chrome (header, controls, scoreboard, win overlay).
   Loaded by every French game via <link href="shared/french-game.css">.
---------------------------------------------------------------------- */
:root{
  --paper:   #FFF6EA;   /* warm storybook background */
  --paper-2: #FBE9CF;   /* panel / tint              */
  --ink:     #34303F;   /* text                      */
  --ink-soft:#7C7689;
  --bleu:    #4A86E8;    /* masculine article         */
  --bleu-d:  #2F66C2;
  --corail:  #FF7A66;    /* feminine article / accent */
  --vert:    #43B97F;    /* match / success           */
  --vert-d:  #2F9C66;
  --rouge:   #E5564B;    /* wrong                     */
  --soleil:  #FFC93C;    /* stars / reward            */
  --mm-primary:    #FFC93C;  /* brand primary (yellow) */
  --mm-primary-d:  #F2B417;
  --mm-secondary:  #155263;  /* brand secondary (teal) */
  --mm-secondary-d:#0E3A47;
  --radius: 16px;
  --gap: clamp(8px, 2vw, 14px);
}

*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:radial-gradient(120% 90% at 50% -10%, #FFFDF7 0%, var(--paper) 55%, var(--paper-2) 130%) fixed;
  display:flex; flex-direction:column; align-items:center;
  padding:18px 16px 40px;
}

/* ---- Header ---------------------------------------------------------- */
header{ width:100%; max-width:680px; text-align:center; }
.eyebrow{
  font-family:"Fredoka",sans-serif; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; font-size:12px; color:var(--corail); margin:0 0 4px;
}
h1{
  font-family:"Fredoka",sans-serif; font-weight:700;
  font-size:clamp(26px,6.5vw,40px); line-height:1; margin:0; color:var(--ink);
}
h1 .accent{ color:var(--mm-secondary); }
.tagline{ color:var(--ink-soft); margin:8px 0 0; font-weight:600; font-size:15px; }

/* ---- Controls -------------------------------------------------------- */
.controls{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:18px 0 6px; width:100%; max-width:680px;
}
.control{
  display:flex; align-items:center; gap:6px;
  background:#fff; border:2px solid var(--paper-2);
  border-radius:999px; padding:5px 6px 5px 14px;
}
.control label{ font-size:13px; font-weight:700; color:var(--ink-soft); }
.control select, .pill-btn{
  font-family:"Nunito",sans-serif; font-weight:700; font-size:14px;
  border:none; background:var(--paper); color:var(--ink);
  border-radius:999px; padding:7px 14px; cursor:pointer;
}
.control select{ -webkit-appearance:none; appearance:none; padding-right:26px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237C7689' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; }
.pill-btn{ background:var(--mm-secondary); color:#fff; }
.pill-btn:hover{ background:var(--mm-secondary-d); }
.icon-btn{
  border:2px solid var(--paper-2); background:#fff; border-radius:999px;
  /* min-size + no-shrink so the WCAG 44px touch target holds even when the
     control row is crowded and flex would otherwise squeeze it. */
  width:44px; height:44px; min-width:44px; min-height:44px; flex:0 0 auto;
  font-size:18px; cursor:pointer; line-height:1;
}
.icon-btn:hover{ border-color:var(--corail); }

/* ---- Scoreboard ------------------------------------------------------ */
.scoreboard{
  display:flex; gap:20px; justify-content:center; align-items:center;
  margin:14px 0 18px; font-family:"Fredoka",sans-serif; font-weight:600;
}
.stat{ text-align:center; }
.stat b{ display:block; font-size:24px; color:var(--ink); line-height:1; }
.stat span{ font-size:12px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.1em; }

/* ---- Generic prompt area & tiles ------------------------------------ */
.stage{ width:100%; max-width:560px; display:flex; flex-direction:column; align-items:center; gap:18px; }
.prompt-pic{
  font-size:clamp(64px,22vw,120px); line-height:1;
  width:clamp(120px,40vw,180px); height:clamp(120px,40vw,180px);
  display:grid; place-items:center;
  background:#fff; border:3px solid var(--paper-2); border-radius:24px;
  box-shadow:0 6px 0 rgba(52,48,63,.10), 0 8px 18px rgba(52,48,63,.10);
}

/* ---- Win overlay ----------------------------------------------------- */
.overlay{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(52,48,63,.45); backdrop-filter:blur(3px); z-index:20; padding:20px;
}
.overlay.show{ display:grid; }
.panel{
  background:var(--paper); border-radius:26px; padding:30px 28px; text-align:center;
  max-width:340px; width:100%; box-shadow:0 20px 50px rgba(52,48,63,.3);
  animation:rise .4s cubic-bezier(.2,.9,.3,1);
}
@keyframes rise{ from{ transform:translateY(20px); opacity:0; } to{ transform:none; opacity:1; } }
.panel h2{ font-family:"Fredoka",sans-serif; font-size:34px; margin:6px 0 2px; color:var(--vert-d); }
.panel p{ color:var(--ink-soft); font-weight:700; margin:0 0 14px; }
.stars{ font-size:40px; letter-spacing:6px; margin:4px 0 16px; }
.star{ color:var(--ink-soft); opacity:.25; }
.star.on{ color:var(--soleil); opacity:1; text-shadow:0 2px 4px rgba(255,201,60,.45); animation:bounce .5s ease backwards; }
.star.on:nth-child(2){ animation-delay:.12s; }
.star.on:nth-child(3){ animation-delay:.24s; }
@keyframes bounce{ 0%{ transform:scale(0) rotate(-30deg);} 60%{ transform:scale(1.2);} 100%{ transform:scale(1);} }
.panel .pill-btn{ font-size:16px; padding:11px 22px; }

.confetti{ position:fixed; top:-12px; width:10px; height:14px; border-radius:2px; z-index:25; pointer-events:none; }

/* ---- Footer hint ----------------------------------------------------- */
.hint{ color:var(--ink-soft); font-size:13px; margin-top:22px; max-width:520px; text-align:center; }

:focus-visible{ outline:3px solid var(--mm-secondary); outline-offset:3px; border-radius:8px; }

/* ---- Colorblind-safe right/wrong cue -------------------------------- */
/* A ✓/✗ glyph shown IN ADDITION to the green/red, so the signal never relies
   on colour alone. The answer surfaces (.word-card, .option, .choice, .slots)
   are styled inline per game; the glyph is positioned here once for all. */
.word-card, .option, .choice{ position:relative; }
.word-card.correct::after, .option.correct::after, .choice.correct::after,
.word-card.wrong::after, .option.wrong::after, .choice.wrong::after{
  position:absolute; top:5px; right:8px; line-height:1;
  font-family:"Nunito",sans-serif; font-weight:800; font-size:18px;
}
.word-card.correct::after, .option.correct::after, .choice.correct::after{ content:"✓"; color:var(--vert-d); }
.word-card.wrong::after, .option.wrong::after, .choice.wrong::after{ content:"✗"; color:var(--rouge); }
.slots.correct::after, .slots.wrong::after{
  align-self:center; line-height:1;
  font-family:"Nunito",sans-serif; font-weight:800; font-size:22px;
}
.slots.correct::after{ content:"✓"; color:var(--vert-d); }
.slots.wrong::after{ content:"✗"; color:var(--rouge); }

/* ---- Shared feedback animations ------------------------------------- */
@keyframes shake{ 0%,100%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} }
.shake{ animation:shake .4s ease; }
@keyframes pop{ 0%{transform:scale(1);} 40%{transform:scale(1.08);} 100%{transform:scale(1);} }
.pop{ animation:pop .4s ease; }

@media(prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* Image-backed vocabulary visuals (Unsplash fallback when a word has no
   emoji). Sized in em so it scales with the emoji font-size of its host. */
.visual-img{width:1em;height:1em;object-fit:cover;border-radius:12px;vertical-align:middle;display:inline-block;}

/* Unsplash attribution caption shown beneath image-backed visuals. */
.visual-fig{margin:0;display:inline-flex;flex-direction:column;align-items:center;gap:2px;}
.visual-credit{font-size:10px;line-height:1.2;color:#8a8a8a;font-weight:600;}
.visual-credit a{color:#8a8a8a;text-decoration:underline;}

/* Interactive choice tiles: credit sits outside the button, revealed on pick. */
.choice-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;}
.choice-credit{display:none;}
.choice-wrap.revealed .choice-credit{display:block;}