/* ============================================================
   French Learning — "Bold & Playful 3D" design system
   Toy-like depth via hard OFFSET shadows that compress on press.
   ============================================================ */

:root {
  --ink: #3a2e39;        /* warm near-black (never pure #000) */
  --card: #fffdfa;       /* warm near-white */
  --edge: #cbbcc7;       /* default warm-grey button edge */
}

body {
  font-family: "Fredoka", ui-rounded, "Segoe UI Rounded", system-ui, sans-serif;
  background: linear-gradient(180deg, #fff7ed 0%, #ffe4e6 52%, #e0f2fe 100%);
  background-attachment: fixed;
  color: var(--ink);
  min-height: 100vh;
}

input[type="range"] { accent-color: #f59e0b; }

/* ---- Header banner ---- */
.banner {
  background: linear-gradient(90deg, #fb7185, #f59e0b);
  border-radius: 1.5rem;
  box-shadow: 0 8px 0 rgba(180, 83, 9, .35), 0 16px 28px -12px rgba(0, 0, 0, .35);
}
.banner h1 { color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, .18); }

.banner-btn {
  background: #fff;
  color: #e11d48;
  border-radius: 1rem;
  box-shadow: 0 5px 0 rgba(0, 0, 0, .15);
  transition: transform .08s ease, box-shadow .08s ease;
}
.banner-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 rgba(0, 0, 0, .15); }

/* ---- Game tiles (home menu) ---- */
.tile {
  background: var(--card);
  border-radius: 1.75rem;
  padding: 2rem 1rem;
  text-align: center;
  box-shadow: 0 10px 0 var(--tile-edge), 0 18px 30px -12px rgba(0, 0, 0, .30);
  transition: transform .14s cubic-bezier(.2, .8, .2, 1), box-shadow .14s ease;
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 16px 0 var(--tile-edge), 0 28px 40px -14px rgba(0, 0, 0, .32); }
.tile:active { transform: translateY(4px); box-shadow: 0 5px 0 var(--tile-edge), 0 12px 18px -10px rgba(0, 0, 0, .3); }
.tile--sky   { --tile-edge: #0369a1; }
.tile--rose  { --tile-edge: #be123c; }
.tile--amber { --tile-edge: #b45309; }
.tile--sky   .tile-label { color: #0284c7; }
.tile--rose  .tile-label { color: #e11d48; }
.tile--amber .tile-label { color: #d97706; }
.tile-emoji { font-size: 3.5rem; line-height: 1; margin-bottom: .5rem; }
.tile-label { font-weight: 600; font-size: 1.4rem; }

/* ---- Multi-select theme chips ---- */
.chip {
  background: #fff;
  color: var(--ink);
  border-radius: 1.25rem;
  padding: 1rem .75rem;
  font-weight: 600;
  font-size: 1.05rem;
  box-shadow: 0 5px 0 var(--edge);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.chip:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge); }
.chip:not(.is-on) { opacity: .65; }
.chip.is-on { background: #e0f2fe; box-shadow: 0 5px 0 #0ea5e9; opacity: 1; }

/* ---- Single-select pills (level / pair count) ---- */
.pill {
  background: #fff;
  color: var(--ink);
  border-radius: 1.25rem;
  padding: .9rem .5rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 5px 0 var(--edge);
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.pill:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge); }
.pill.is-on { background: #fef3c7; box-shadow: 0 5px 0 #f59e0b; }

/* ---- Primary call-to-action ---- */
.cta {
  background: #22c55e;
  color: #fff;
  border-radius: 1.25rem;
  padding: 1rem 2.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  box-shadow: 0 7px 0 #15803d, 0 16px 24px -10px rgba(0, 0, 0, .3);
  transition: transform .1s ease, box-shadow .1s ease, background-color .15s ease;
}
.cta:hover { background: #16a34a; }
.cta:active { transform: translateY(6px); box-shadow: 0 1px 0 #15803d; }
.cta.is-disabled { background: #d6d3d1; box-shadow: 0 7px 0 #a8a29e; cursor: not-allowed; }
.cta.is-disabled:active { transform: none; box-shadow: 0 7px 0 #a8a29e; }

/* ---- Small utility button (select-all) ---- */
.mini-btn {
  background: #fff;
  color: var(--ink);
  border-radius: .9rem;
  box-shadow: 0 4px 0 var(--edge);
  transition: transform .08s ease, box-shadow .08s ease;
}
.mini-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--edge); }

/* ---- Round sky button (speaker / replay / test) ---- */
.icon-btn {
  background: #0ea5e9;
  color: #fff;
  border-radius: 9999px;
  box-shadow: 0 6px 0 #0369a1;
  transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.icon-btn:hover { background: #0284c7; }
.icon-btn:active { transform: translateY(5px); box-shadow: 0 1px 0 #0369a1; }

/* ---- Section heading ---- */
.section-title { font-weight: 600; font-size: 1.15rem; color: #9a3412; margin-bottom: .5rem; }

/* ---- Panel (options blocks) ---- */
.panel {
  background: var(--card);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .06), 0 16px 28px -16px rgba(0, 0, 0, .25);
}

/* ---- Flashcard ---- */
.flash {
  background: var(--card);
  border-radius: 2rem;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 12px 0 rgba(2, 132, 199, .25), 0 20px 32px -12px rgba(0, 0, 0, .3);
}
.navi {
  background: #fff;
  color: var(--ink);
  border-radius: 1.25rem;
  box-shadow: 0 5px 0 var(--edge);
  transition: transform .08s ease, box-shadow .08s ease;
}
.navi:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge); }

/* ---- Listen choices ---- */
.choice {
  background: var(--card);
  border-radius: 1.25rem;
  box-shadow: 0 6px 0 var(--edge);
  transition: transform .08s ease, box-shadow .08s ease;
}
.choice:hover { transform: translateY(-3px); }
.choice:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--edge); }

/* ============================================================
   Card flip for Memory Match
   ============================================================ */
.flip-card { perspective: 800px; }
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.4s;
  transform-style: preserve-3d;
}
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flip-back { transform: rotateY(180deg); }
.mem-front {
  background: linear-gradient(135deg, #fca5a5, #fbbf24);
  color: #fff;
  border-radius: 1.25rem;
  box-shadow: inset 0 -6px 0 rgba(180, 83, 9, .25);
}
.mem-back {
  background: var(--card);
  border-radius: 1.25rem;
  box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .08);
}