/* ═══════════════════════════════════════════════════════════════════════════
   KOYDO CARDS · koydo-cards.css
   Nine bespoke flashcard styles, dependency-free.
   All rules scoped under .kc- prefix.
   Include Google Fonts for full fidelity:
     Fredoka (500,700) · Quicksand (500,700) · Inter (400,500,600,700)
     Geist Mono (400,600) · Crimson Pro (400,600,700)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design tokens ─── */
:root {
  /* Subject hues */
  --kc-subject-math:     #7c3aed;
  --kc-subject-science:  #0891b2;
  --kc-subject-ela:      #e11d48;
  --kc-subject-social:   #d97706;
  --kc-subject-music:    #db2777;
  --kc-subject-art:      #ea580c;
  --kc-subject-bio:      #059669;
  --kc-subject-chem:     #ca8a04;
  --kc-subject-physics:  #2563eb;
  --kc-subject-astro:    #4f46e5;
  --kc-subject-history:  #b45309;
  --kc-subject-geo:      #0d9488;
  --kc-subject-cs:       #65a30d;
  --kc-subject-phil:     #8b5cf6;
  --kc-subject-sel:      #f97316;
  --kc-subject-anatomy:  #ef4444;
  --kc-subject-languages:#0ea5e9;
  --kc-subject-civics:   #a16207;
  --kc-subject-law:      #475569;
  --kc-subject-medicine: #be123c;
  --kc-subject-engineering: #16a34a;

  --kc-err:  #f59e0b;
  --kc-ok:   #10b981;

  --kc-bg:        #faf9f5;
  --kc-bg-soft:   #ffffff;
  --kc-line:      #e7e5e0;
  --kc-ink:       #1a1530;
  --kc-ink-mute:  #5b5b6e;
  --kc-ink-soft:  #8b8b9c;

  --kc-radius:    22px;
  --kc-shadow-sm: 0 4px 12px -2px rgba(20,15,50,.08);
  --kc-shadow:    0 24px 40px -16px rgba(20,15,50,.22), 0 6px 16px -8px rgba(20,15,50,.14);
  --kc-shadow-lg: 0 40px 60px -24px rgba(20,15,50,.32), 0 12px 24px -12px rgba(20,15,50,.18);

  --kc-speed: .55s;
  --kc-ease:  cubic-bezier(.2,.8,.2,1);
}

/* ─── Base card chassis ─── */
.kc-card {
  position: relative;
  width: min(92vw, 320px);
  aspect-ratio: 5 / 7;
  perspective: 1400px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  touch-action: manipulation;
  box-sizing: border-box;
}
.kc-card:focus-visible .kc-card__inner {
  box-shadow: 0 0 0 3px var(--kc-c, #67e8f9), var(--kc-shadow);
  border-radius: var(--kc-radius);
}
.kc-card__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform var(--kc-speed) var(--kc-ease);
  border-radius: var(--kc-radius);
}
.kc-card.kc-flipped .kc-card__inner { transform: rotateY(180deg); }
.kc-card__face {
  position: absolute; inset: 0;
  border-radius: var(--kc-radius);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  box-shadow: var(--kc-shadow);
  display: flex; flex-direction: column;
  padding: 22px;
}
.kc-card__face--back {
  transform: rotateY(180deg);
  background: var(--kc-bg-soft); color: var(--kc-ink);
  border: 1px solid var(--kc-line);
}
.kc-card__face--back h3 {
  margin: 0 0 12px;
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700; font-size: 22px;
}
.kc-card__face--back dl {
  display: grid; grid-template-columns: auto 1fr;
  gap: 6px 16px; margin: 0 0 12px; font-size: 14px;
}
.kc-card__face--back dt {
  color: var(--kc-ink-mute);
  font-family: 'Geist Mono', monospace;
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  align-self: center;
}
.kc-card__face--back dd { margin: 0; }
.kc-card__face--back .kc-fact {
  color: var(--kc-ink-mute); font-size: 13.5px;
  line-height: 1.55; margin-top: auto;
}

/* ─── Age-tier typography ─── */
.kc-tier-sprouts { font-family: 'Fredoka', system-ui; font-weight: 700; }
.kc-tier-junior  { font-family: 'Quicksand', system-ui; font-weight: 700; }
.kc-tier-kids    { font-family: 'Inter', system-ui; font-weight: 600; }
.kc-tier-learn   { font-family: 'Inter', system-ui; font-weight: 500; letter-spacing: -.015em; }
.kc-tier-academy { font-family: 'Crimson Pro', Georgia, serif; font-weight: 600; }
.kc-tier-university { font-family: 'Crimson Pro', Georgia, serif; font-weight: 500; letter-spacing: .01em; }


/* ═══════════════════════════════════════════════════════════════════
   CARD 1 · HOLOFOIL
   Trading-card holographic foil with pointer/gyro tilt and
   conic-gradient color-dodge shimmer.
   ═══════════════════════════════════════════════════════════════════ */
.kc-card--holofoil { --kc-c: var(--kc-subject-chem); }
.kc-card--holofoil .kc-card__inner {
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg)) translateZ(0);
  transition: transform .12s linear;
}
.kc-card--holofoil.kc-flipped .kc-card__inner {
  transform: rotateY(180deg);
  transition: transform var(--kc-speed) var(--kc-ease);
}
.kc-card--holofoil .kc-card__face--front { padding: 0; }

.kc-holo-base {
  position: absolute; inset: 0;
  background: linear-gradient(160deg,
    var(--holo-a, #3a2607) 0%,
    var(--holo-b, #6b4a16) 40%,
    var(--holo-c, #2a1d05) 100%);
}
.kc-holo {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,.4), transparent 40%),
    conic-gradient(
      from calc(var(--mx, 50%) * 3.6deg) at var(--mx, 50%) var(--my, 50%),
      #ffd700, #f97316, #ec4899, #8b5cf6, #06b6d4,
      #10b981, #facc15, #ffd700);
  mix-blend-mode: color-dodge;
  opacity: .65;
  filter: saturate(1.8) contrast(1.15);
  pointer-events: none;
}
.kc-holo-grain {
  position: absolute; inset: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='.85' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='.4'/></svg>");
  mix-blend-mode: overlay; opacity: .35; pointer-events: none;
}
.kc-card--holofoil .kc-content {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  height: 100%; padding: 22px;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
  color: #fff;
}
.kc-card--holofoil .kc-atomic-no {
  font-family: 'Geist Mono', monospace;
  font-size: 18px; opacity: .9; letter-spacing: .05em;
}
.kc-card--holofoil .kc-symbol {
  font-family: 'Crimson Pro', Georgia, serif;
  font-weight: 700;
  font-size: clamp(96px, 18vw, 140px);
  line-height: 1; margin: 10px 0 4px;
  color: #fff;
  text-shadow: 0 0 30px rgba(255,215,0,.5), 0 4px 14px rgba(0,0,0,.6);
}
.kc-card--holofoil .kc-name {
  font-family: 'Crimson Pro', Georgia, serif;
  font-size: 28px; font-weight: 600;
}
.kc-card--holofoil .kc-mass {
  font-family: 'Geist Mono', monospace;
  font-size: 13px; opacity: .85; margin-top: auto;
}


/* ═══════════════════════════════════════════════════════════════
   CARD 2 · PARALLAX DEPTH
   Four floating CSS 3D layers driven by pointer/gyro
   (CSS custom properties --px, --py steer all four layers).
   ═══════════════════════════════════════════════════════════════ */
.kc-card--parallax { --kc-c: var(--kc-subject-bio); }
.kc-card--parallax .kc-card__inner {
  transform: rotateY(var(--ry, 0deg)) rotateX(var(--rx, 0deg));
  transition: transform .12s linear;
}
.kc-card--parallax.kc-flipped .kc-card__inner {
  transform: rotateY(180deg);
  transition: transform var(--kc-speed) var(--kc-ease);
}
.kc-card--parallax .kc-card__face--front {
  background: radial-gradient(120% 100% at 50% 30%,
    var(--par-a, #ecfdf5) 0%, var(--par-b, #d1fae5) 60%, var(--par-c, #a7f3d0) 100%);
  perspective: 800px; padding: 0;
}

.kc-par-layer {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  transform-style: preserve-3d; pointer-events: none;
}
.kc-par-l1 { transform: translate3d(calc(var(--px,0) * -8px), calc(var(--py,0) * -8px), 0); }
.kc-par-l2 { transform: translate3d(calc(var(--px,0) * 12px), calc(var(--py,0) * 12px), 40px); }
.kc-par-l3 { transform: translate3d(calc(var(--px,0) * 22px), calc(var(--py,0) * 22px), 80px); }
.kc-par-l4 { transform: translate3d(calc(var(--px,0) * 32px), calc(var(--py,0) * 32px), 120px); }

.kc-par-wall {
  width: 80%; height: 80%;
  border: 2.5px solid color-mix(in oklab, var(--kc-c) 50%, white);
  border-radius: 38% 62% 55% 45% / 50% 45% 55% 50%;
  box-shadow: inset 0 0 40px color-mix(in oklab, var(--kc-c) 18%, transparent);
  background: rgba(255,255,255,.4);
}
.kc-par-cyto {
  width: 70%; height: 70%;
  border-radius: 40% 60% 50% 50% / 55% 50% 50% 45%;
  background: radial-gradient(circle at 40% 30%,
    color-mix(in oklab, var(--kc-c) 60%, white) 0%,
    color-mix(in oklab, var(--kc-c) 45%, white) 60%,
    transparent 100%);
  filter: blur(2px);
}
.kc-par-nuc {
  width: 26%; height: 26%; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%,
    white, var(--kc-c) 55%, color-mix(in oklab, var(--kc-c) 30%, black) 95%);
  box-shadow: 0 0 28px color-mix(in oklab, var(--kc-c) 70%, transparent),
    inset -4px -6px 12px rgba(0,0,0,.25);
}
.kc-par-orb {
  position: absolute; width: 18px; height: 9px; border-radius: 50%;
}
.kc-par-orb:nth-child(1) { top: 32%; left: 28%; transform: rotate(-22deg); background: #fbbf24; }
.kc-par-orb:nth-child(2) { top: 64%; left: 60%; transform: rotate(40deg);  background: #f97316; }
.kc-par-orb:nth-child(3) { top: 22%; right: 22%; transform: rotate(12deg); background: #ec4899; }

.kc-card--parallax .kc-par-label {
  position: absolute; top: 22px; left: 22px; right: 22px;
  display: flex; justify-content: space-between;
  z-index: 5; align-items: center;
}
.kc-card--parallax .kc-par-label .kc-q {
  font-size: 13.5px;
  color: color-mix(in oklab, var(--kc-c) 80%, black);
  font-weight: 600;
}
.kc-card--parallax .kc-par-label .kc-badge {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .18em; color: var(--kc-c);
  padding: 4px 8px;
  border: 1px solid color-mix(in oklab, var(--kc-c) 35%, white);
  border-radius: 999px; background: rgba(255,255,255,.7);
}
.kc-card--parallax .kc-par-term {
  position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 5;
}
.kc-card--parallax .kc-par-term h2 {
  margin: 0; font-weight: 700; font-size: 28px;
  color: color-mix(in oklab, var(--kc-c) 85%, black);
}
.kc-card--parallax .kc-par-term p {
  margin: 4px 0 0; font-size: 13px;
  color: color-mix(in oklab, var(--kc-c) 70%, black); opacity: .85;
}


/* ═══════════════════════════════════════════════════════════════
   CARD 3 · LIQUID GLASS
   Edge-to-edge letter/glyph with Fredoka font, animated pulse,
   and a backdrop-filter glass-blur transition on tap.
   ═══════════════════════════════════════════════════════════════ */
.kc-card--liquid { --kc-c: var(--kc-subject-ela); }
.kc-card--liquid .kc-card__face--front {
  background: linear-gradient(160deg,
    var(--liq-a, #ff8fab) 0%,
    var(--liq-b, #ffb74d) 60%,
    var(--liq-c, #ffd166) 100%);
  position: absolute; inset: 0; padding: 0;
}

.kc-liq-letter {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', system-ui; font-weight: 700;
  font-size: 36vmin; line-height: 1;
  color: white;
  text-shadow: 0 14px 28px rgba(0,0,0,.18), 0 4px 8px rgba(0,0,0,.12);
  animation: kc-liq-pulse 3.2s ease-in-out infinite;
  user-select: none; padding: 10%; text-align: center; word-break: break-word;
}
.kc-liq-letter.kc-small { font-size: 18vmin; }
@keyframes kc-liq-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.04) rotate(-1.5deg); }
}
.kc-liq-corner-l {
  position: absolute; top: 22px; left: 22px; z-index: 2;
  font-family: 'Fredoka', system-ui; font-weight: 700;
  color: rgba(255,255,255,.85);
  font-size: 13px; letter-spacing: .15em; text-transform: uppercase;
}
.kc-liq-corner-r {
  position: absolute; bottom: 22px; right: 22px; z-index: 2;
  font-family: 'Fredoka', system-ui; font-weight: 500;
  color: rgba(255,255,255,.7);
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
}
.kc-liq-glass {
  position: absolute; inset: 0; border-radius: var(--kc-radius);
  background: rgba(255,255,255,0);
  backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px);
  transition: backdrop-filter .4s var(--kc-ease),
              -webkit-backdrop-filter .4s var(--kc-ease),
              background .4s var(--kc-ease);
  pointer-events: none;
}
.kc-card--liquid.kc-morphing .kc-liq-glass {
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.kc-card--liquid .kc-card__face--back {
  background: linear-gradient(160deg,
    var(--liq-c, #ffd166) 0%,
    var(--liq-a, #ff8fab) 100%);
  color: #2a1505; border: none; padding: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.kc-card--liquid .kc-card__face--back .kc-word-big {
  font-family: 'Fredoka', system-ui; font-size: 44px;
  color: #2a1505; margin: 0; letter-spacing: .04em;
}
.kc-card--liquid .kc-card__face--back .kc-says {
  font-family: 'Fredoka', system-ui; font-weight: 500;
  font-size: 20px; color: #5e3010; margin: 8px 0 16px;
}
.kc-card--liquid .kc-card__face--back .kc-emoji {
  font-size: clamp(80px, 22vmin, 130px); line-height: 1;
}


/* ═══════════════════════════════════════════════════════════════
   CARD 4 · CONSTELLATION
   Dark sky card with a rotating 3D star field drawn on <canvas>.
   Stars reveal sequentially on first tap with rising tones.
   ═══════════════════════════════════════════════════════════════ */
.kc-card--constellation { --kc-c: var(--kc-subject-astro); }
.kc-card--constellation .kc-card__face--front {
  background: radial-gradient(120% 100% at 50% 50%,
    #1e1b4b 0%, #0f0a2a 60%, #050216 100%);
  position: absolute; inset: 0; overflow: hidden; padding: 0;
}

.kc-con-bg {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 70% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 32%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 22% 42%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 50% 72%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 88%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 78%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 36% 92%, #fff 50%, transparent 51%);
  opacity: .55;
  animation: kc-con-twinkle 6s ease-in-out infinite;
}
@keyframes kc-con-twinkle {
  0%, 100% { opacity: .45; }
  50%       { opacity: .85; }
}
.kc-card--constellation canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.kc-card--constellation .kc-con-prompt {
  position: absolute; top: 18px; left: 20px; right: 20px;
  z-index: 4; display: flex; justify-content: space-between;
  align-items: flex-start; gap: 10px;
}
.kc-card--constellation .kc-con-prompt .kc-label {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .25em; color: #c4b5fd; text-transform: uppercase;
  background: rgba(99,102,241,.15); padding: 4px 8px;
  border-radius: 999px; border: 1px solid rgba(99,102,241,.3);
  white-space: nowrap;
}
.kc-card--constellation .kc-con-prompt h2 {
  margin: 0; font-family: 'Inter', sans-serif; font-weight: 500;
  font-size: 13px; line-height: 1.4; color: rgba(255,255,255,.85);
  max-width: 60%; text-align: right;
}
.kc-con-answer {
  position: absolute; left: 0; right: 0; bottom: 42px; z-index: 3;
  font-family: 'Crimson Pro', Georgia, serif; font-weight: 700;
  font-size: 30px; color: #fff; text-align: center;
  letter-spacing: .22em;
  opacity: 0; transform: translateY(10px);
  transition: opacity 1s var(--kc-ease) .4s, transform 1s var(--kc-ease) .4s;
  text-shadow: 0 0 24px rgba(199,210,254,.7);
}
.kc-card--constellation.kc-revealed .kc-con-answer {
  opacity: 1; transform: translateY(0);
}
.kc-con-hint {
  position: absolute; bottom: 18px; left: 0; right: 0; z-index: 2;
  text-align: center; font-family: 'Geist Mono', monospace;
  font-size: 10px; color: rgba(255,255,255,.4);
  letter-spacing: .2em; text-transform: uppercase;
  transition: opacity .3s;
}
.kc-card--constellation.kc-revealed .kc-con-hint { opacity: 0; }


/* ═══════════════════════════════════════════════════════════════
   CARD 5 · BLOOM
   Multiple-choice quiz card. Correct answer bloom-ripple effect,
   wrong shake + amber border. Web Speech TTS + haptic.
   ═══════════════════════════════════════════════════════════════ */
.kc-card--bloom { --kc-c: var(--kc-subject-math); }
.kc-card--bloom .kc-card__face--front {
  background: radial-gradient(80% 80% at 50% 20%,
    var(--bl-a, #ddd6fe) 0%, var(--bl-b, #c4b5fd) 60%, var(--bl-c, #a78bfa) 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 28px 22px; color: var(--bl-ink, #2e1065);
}

.kc-card--bloom .kc-bl-top {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
}
.kc-card--bloom .kc-bl-top .kc-badge {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: 11px; letter-spacing: .15em;
  color: color-mix(in oklab, var(--bl-ink, #2e1065) 90%, white);
  text-transform: uppercase;
}
.kc-card--bloom .kc-bl-listen {
  background: rgba(255,255,255,.6);
  color: color-mix(in oklab, var(--bl-ink, #2e1065) 90%, white);
  border: 1px solid rgba(255,255,255,.8);
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer; transition: transform .2s, background .2s;
  box-shadow: var(--kc-shadow-sm);
}
.kc-card--bloom .kc-bl-listen:hover { background: white; transform: scale(1.06); }
.kc-card--bloom .kc-bl-listen svg { width: 18px; height: 18px; fill: currentColor; }

.kc-card--bloom .kc-bl-eq {
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: clamp(62px, 12vw, 92px);
  color: var(--bl-ink, #2e1065);
  text-shadow: 0 6px 14px rgba(124,58,237,.25);
  letter-spacing: -.02em; text-align: center; word-break: keep-all;
}
.kc-card--bloom .kc-bl-choices {
  width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.kc-bl-btn {
  position: relative;
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  font-size: 26px; color: var(--bl-ink, #2e1065);
  background: rgba(255,255,255,.65);
  border: 1.5px solid rgba(255,255,255,.95);
  border-radius: 16px; padding: 14px 0;
  cursor: pointer; overflow: hidden;
  transition: transform .15s, background .2s, border-color .2s;
  box-shadow: var(--kc-shadow-sm);
}
.kc-bl-btn:hover { background: white; transform: translateY(-1px); }
.kc-bl-btn::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at center, var(--kc-ok), transparent 60%);
  opacity: 0; transform: scale(.5);
  transition: opacity .5s, transform .8s var(--kc-ease);
  pointer-events: none;
}
.kc-bl-btn.kc-correct::before  { opacity: 1; transform: scale(2.6); }
.kc-bl-btn.kc-correct { border-color: var(--kc-ok); color: white; }
.kc-bl-btn.kc-wrong {
  animation: kc-bl-shake .4s;
  border-color: var(--kc-err);
  background: color-mix(in oklab, var(--kc-err) 25%, white);
}
@keyframes kc-bl-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60%  { transform: translateX(-6px); }
  40%, 80%  { transform: translateX(6px); }
}
.kc-card--bloom .kc-card__face--back {
  background: linear-gradient(160deg,
    var(--bl-a, #ddd6fe), var(--bl-b, #c4b5fd));
  color: var(--bl-ink, #2e1065); border: none;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center; text-align: center;
}
.kc-card--bloom .kc-card__face--back .kc-bl-big {
  font-family: 'Quicksand', sans-serif; font-size: 72px; font-weight: 700;
  color: color-mix(in oklab, var(--bl-ink, #2e1065) 90%, white);
  margin-bottom: 8px; line-height: 1;
}
.kc-card--bloom .kc-card__face--back .kc-bl-note {
  font-family: 'Quicksand', sans-serif; font-size: 16px;
  color: color-mix(in oklab, var(--bl-ink, #2e1065) 80%, white);
  max-width: 240px; line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════
   CARD 6 · CINEMAGRAPH
   CSS piano with pulsing highlight key, looping press animation,
   ripple ring on note play. WebAudio harmonic stack.
   ═══════════════════════════════════════════════════════════════ */
.kc-card--cinemagraph { --kc-c: var(--kc-subject-music); }
.kc-card--cinemagraph .kc-card__face--front {
  background: radial-gradient(80% 60% at 50% 110%,
    var(--cm-a, #fbcfe8) 0%, var(--cm-b, #f9a8d4) 50%, var(--cm-c, #ec4899) 100%);
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}

.kc-cm-head {
  padding: 22px 22px 0; z-index: 3;
  color: color-mix(in oklab, var(--kc-c) 80%, black);
}
.kc-cm-head .kc-small {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .25em; text-transform: uppercase;
  color: color-mix(in oklab, var(--kc-c) 70%, black);
}
.kc-cm-head h2 {
  font-weight: 700; font-size: 28px;
  color: color-mix(in oklab, var(--kc-c) 80%, black); margin: 6px 0 0;
}
.kc-cm-head .kc-sub {
  font-family: 'Geist Mono', monospace; font-size: 11px;
  color: color-mix(in oklab, var(--kc-c) 70%, black);
  margin-top: 4px; letter-spacing: .05em;
}
.kc-cm-piano {
  position: relative; margin: auto 22px 30px;
  display: flex; height: 180px; border-radius: 10px;
  box-shadow: 0 20px 36px rgba(131,24,67,.35), inset 0 -3px 6px rgba(0,0,0,.1);
  overflow: hidden; z-index: 3;
}
.kc-cm-wk {
  flex: 1;
  background: linear-gradient(180deg, #fafafa 0%, #d4d4d8 100%);
  border-right: 1px solid #a1a1aa;
  position: relative; cursor: pointer; transition: filter .1s;
}
.kc-cm-wk:last-of-type { border-right: none; }
.kc-cm-wk:active { filter: brightness(.92); }
.kc-cm-wk.kc-hi {
  background: linear-gradient(180deg, #fff 0%, #fde68a 100%);
  animation: kc-cm-pulse 2.6s ease-in-out infinite;
}
.kc-cm-wk.kc-hi::after {
  content: ''; position: absolute; left: 50%; bottom: 14px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kc-c, #db2777);
  box-shadow: 0 0 12px var(--kc-c, #db2777);
  transform: translateX(-50%);
}
@keyframes kc-cm-pulse {
  0%, 100% { background: linear-gradient(180deg, #fff 0%, #fde68a 100%); }
  50%       { background: linear-gradient(180deg, #fff 0%, #fbbf24 100%); }
}
.kc-cm-bk {
  position: absolute; top: 0; width: 12%; height: 60%;
  background: linear-gradient(180deg, #18181b 0%, #3f3f46 100%);
  border-radius: 0 0 4px 4px; z-index: 2; cursor: pointer;
}
.kc-cm-bk.k1 { left: 11%; } .kc-cm-bk.k2 { left: 25%; }
.kc-cm-bk.k3 { left: 53%; } .kc-cm-bk.k4 { left: 67%; } .kc-cm-bk.k5 { left: 81%; }
.kc-cm-ring {
  position: absolute; left: 50%; bottom: 28px;
  width: 30px; height: 30px;
  border: 2px solid var(--kc-c, #db2777); border-radius: 50%;
  opacity: 0; transform: translateX(-50%); pointer-events: none; z-index: 4;
}
.kc-card--cinemagraph.kc-playing .kc-cm-ring {
  animation: kc-cm-ripple 1.4s ease-out forwards;
}
@keyframes kc-cm-ripple {
  0%   { width: 30px; height: 30px; opacity: .9; }
  100% { width: 240px; height: 240px; opacity: 0; }
}
.kc-card--cinemagraph .kc-card__face--back {
  background: linear-gradient(160deg,
    var(--cm-a, #fbcfe8), var(--cm-b, #f9a8d4));
  color: color-mix(in oklab, var(--kc-c) 80%, black); border: none;
}


/* ═══════════════════════════════════════════════════════════════
   CARD 7 · ORIGAMI FOLD
   Two CSS 3D flaps fold open (rotateX ±180°) to reveal content.
   Three-state: folded → unfolded → flipped back.
   ═══════════════════════════════════════════════════════════════ */
.kc-card--origami { --kc-c: var(--kc-subject-sel); }
.kc-card--origami .kc-card__inner { perspective: 1600px; }
.kc-card--origami .kc-card__face--front {
  padding: 0; background: transparent; box-shadow: none;
}

.kc-org-base {
  position: absolute; inset: 0; border-radius: var(--kc-radius);
  background: linear-gradient(160deg,
    var(--org-a, #fff7ed) 0%,
    var(--org-b, #fed7aa) 60%,
    var(--org-c, #fdba74) 100%);
  box-shadow: var(--kc-shadow);
}
.kc-org-fold {
  position: absolute; left: 0; right: 0; height: 50%;
  transform-origin: bottom center;
  background: linear-gradient(180deg,
    var(--org-a, #fff7ed) 0%,
    color-mix(in oklab, var(--org-a, #fff7ed) 60%, var(--org-b, #fed7aa)) 100%);
  box-shadow: 0 16px 30px -10px color-mix(in oklab, var(--kc-c) 40%, transparent);
  transition: transform 1.1s var(--kc-ease);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', sans-serif; font-weight: 700;
  color: color-mix(in oklab, var(--kc-c) 90%, black);
  text-align: center; padding: 18px;
}
.kc-org-fold.kc-top {
  top: 0; transform-origin: bottom center;
  border-radius: var(--kc-radius) var(--kc-radius) 0 0;
}
.kc-org-fold.kc-bottom {
  bottom: 0; transform-origin: top center;
  border-radius: 0 0 var(--kc-radius) var(--kc-radius);
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--org-a, #fff7ed) 60%, var(--org-b, #fed7aa)) 0%,
    var(--org-b, #fed7aa) 100%);
}
.kc-card--origami.kc-unfolded .kc-org-fold.kc-top    { transform: rotateX(-180deg); }
.kc-card--origami.kc-unfolded .kc-org-fold.kc-bottom { transform: rotateX(180deg); }
.kc-org-fold .kc-label-line {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: color-mix(in oklab, var(--kc-c) 70%, black);
}
.kc-org-fold .kc-word { font-size: 38px; letter-spacing: -.02em; margin-top: 6px; line-height: 1.1; }
.kc-org-fold .kc-hint-line {
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: color-mix(in oklab, var(--kc-c) 70%, black); margin-top: 8px;
}

.kc-org-reveal {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Quicksand', sans-serif; padding: 22px; text-align: center;
  opacity: 0; transition: opacity .6s var(--kc-ease) .5s;
}
.kc-card--origami.kc-unfolded .kc-org-reveal { opacity: 1; }
.kc-org-reveal .kc-emoji { font-size: clamp(60px, 18vmin, 100px); line-height: 1; }
.kc-org-reveal .kc-meaning {
  font-weight: 700; font-size: 19px;
  color: color-mix(in oklab, var(--kc-c) 85%, black); margin-top: 12px;
}
.kc-org-reveal .kc-practice {
  font-weight: 500; font-size: 13px;
  color: color-mix(in oklab, var(--kc-c) 75%, black);
  margin-top: 8px; max-width: 240px; line-height: 1.45;
}
.kc-card--origami .kc-card__face--back {
  background: linear-gradient(160deg,
    var(--org-a, #fff7ed), var(--org-b, #fed7aa));
  color: color-mix(in oklab, var(--kc-c) 80%, black); border: none;
}


/* ═══════════════════════════════════════════════════════════════
   CARD 8 · SPINNING GLOBE
   CSS-animated sphere (rotateY 360°) with seamless SVG continent
   pan, gloss overlay, and bouncing location pin.
   ═══════════════════════════════════════════════════════════════ */
.kc-card--globe { --kc-c: var(--kc-subject-geo); }
.kc-card--globe .kc-card__face--front {
  background: linear-gradient(180deg, #ecfeff 0%, #cffafe 60%, #a5f3fc 100%);
  position: absolute; inset: 0; padding: 0;
}

.kc-gl-stage {
  position: absolute; left: 50%; top: 50%;
  width: 70%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  perspective: 800px;
}
.kc-gl-globe {
  position: relative; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 30%),
    radial-gradient(circle at 70% 70%, rgba(13,148,136,.3), transparent 50%),
    linear-gradient(160deg, #0ea5e9 0%, #0369a1 70%, #082f49 100%);
  box-shadow:
    inset -14px -18px 30px rgba(0,0,0,.25),
    inset 14px 14px 24px rgba(255,255,255,.18),
    0 20px 40px rgba(8,47,73,.3);
  overflow: hidden;
  animation: kc-gl-spin 22s linear infinite;
}
@keyframes kc-gl-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
.kc-gl-globe svg {
  position: absolute; inset: 0; width: 200%; height: 100%;
  animation: kc-gl-pan 22s linear infinite;
}
@keyframes kc-gl-pan {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.kc-gl-globe svg .kc-land {
  fill: rgba(101,163,13,.85);
  stroke: rgba(255,255,255,.18); stroke-width: .5;
}
.kc-gl-globe svg .kc-land.kc-hot { fill: #facc15; }

.kc-gl-pin {
  position: absolute; left: 55%; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -100%);
  z-index: 3; pointer-events: none;
}
.kc-gl-pin::before {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: #db2777;
  box-shadow: 0 0 14px rgba(219,39,119,.7), 0 0 0 4px rgba(255,255,255,.6);
  transform: translateX(-50%);
  animation: kc-gl-bounce 1.6s ease-in-out infinite;
}
@keyframes kc-gl-bounce {
  0%, 100% { top: 0; }
  50%       { top: -8px; }
}

.kc-card--globe .kc-gl-head {
  position: absolute; top: 20px; left: 22px; right: 22px;
  display: flex; justify-content: space-between; align-items: center; z-index: 4;
}
.kc-card--globe .kc-badge {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .2em; color: #0d9488; text-transform: uppercase;
  background: rgba(255,255,255,.85); padding: 4px 10px;
  border-radius: 999px; box-shadow: var(--kc-shadow-sm);
}
.kc-card--globe .kc-placename {
  position: absolute; left: 0; right: 0; bottom: 24px;
  text-align: center; z-index: 4; font-weight: 700;
  font-size: 30px; color: #0c4a6e;
  text-shadow: 0 2px 6px rgba(255,255,255,.6);
}
.kc-card--globe .kc-placename .kc-sub {
  display: block; font-weight: 500; font-size: 13px;
  color: #0e7490; margin-top: 4px; letter-spacing: .04em;
}
.kc-card--globe .kc-card__face--back {
  background: linear-gradient(160deg, #ecfeff, #cffafe);
  color: #0c4a6e; border: none;
}


/* ═══════════════════════════════════════════════════════════════
   CARD 9 · CRYSTAL LATTICE
   Dark physics card with a CSS 3D atomic model:
   atom spheres positioned via --ax/--ay/--az custom props,
   dashed orbital rings, continuous rotateY animation.
   ═══════════════════════════════════════════════════════════════ */
.kc-card--crystal { --kc-c: var(--kc-subject-physics); }
.kc-card--crystal .kc-card__face--front {
  background: radial-gradient(120% 100% at 50% 50%,
    #1e293b 0%, #0f172a 60%, #020617 100%);
  padding: 0; position: absolute; inset: 0; overflow: hidden;
}

.kc-cr-stage {
  position: absolute; left: 50%; top: 52%;
  width: 78%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  perspective: 1000px;
}
.kc-cr-rotor {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: kc-cr-rotor 18s linear infinite;
}
@keyframes kc-cr-rotor {
  from { transform: rotateX(20deg) rotateY(0deg); }
  to   { transform: rotateX(20deg) rotateY(360deg); }
}
.kc-cr-atom {
  position: absolute; left: 50%; top: 50%;
  width: 30px; height: 30px; border-radius: 50%;
  transform: translate(-50%, -50%) translate3d(var(--ax, 0), var(--ay, 0), var(--az, 0));
  background: radial-gradient(circle at 30% 30%, #fff, var(--ac, #60a5fa) 50%, #1e3a8a 100%);
  box-shadow: 0 0 16px var(--ac, #60a5fa), inset -3px -5px 8px rgba(0,0,0,.3);
}
.kc-cr-atom.kc-proton {
  --ac: #ef4444; width: 38px; height: 38px;
  box-shadow: 0 0 22px #ef4444, inset -4px -6px 10px rgba(0,0,0,.3);
}
.kc-cr-atom.kc-electron {
  --ac: #06b6d4; width: 14px; height: 14px;
  box-shadow: 0 0 10px #06b6d4;
}
/* Element-type colour variants */
.kc-cr-atom.kc-carbon     { --ac: #1e293b; }
.kc-cr-atom.kc-oxygen     { --ac: #ef4444; }
.kc-cr-atom.kc-hydrogen   { --ac: #e2e8f0; }
.kc-cr-atom.kc-nitrogen   { --ac: #3b82f6; }
.kc-cr-atom.kc-sulfur     { --ac: #facc15; }
.kc-cr-atom.kc-phosphorus { --ac: #f97316; }
.kc-cr-atom.kc-chlorine   { --ac: #22c55e; }
.kc-cr-atom.kc-sodium     { --ac: #a78bfa; width: 26px; height: 26px; }
.kc-cr-atom.kc-potassium  { --ac: #c084fc; width: 28px; height: 28px; }
.kc-cr-atom.kc-iron       { --ac: #a16207; }
.kc-cr-atom.kc-calcium    { --ac: #16a34a; }
.kc-cr-atom.kc-silicon    { --ac: #fb923c; }

.kc-cr-orb {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  border: 1.5px dashed rgba(34,211,238,.35);
  border-radius: 50%;
  transform: translate(-50%, -50%) var(--orb-rot, rotateY(0deg));
  transform-style: preserve-3d;
}
.kc-cr-orb.kc-o1 { --orb-rot: rotateX(60deg); }
.kc-cr-orb.kc-o2 { --orb-rot: rotateY(60deg); }
.kc-cr-orb.kc-o3 { --orb-rot: rotateX(60deg) rotateY(60deg); }

.kc-card--crystal .kc-cr-head {
  position: absolute; top: 20px; left: 22px; right: 22px;
  z-index: 4; display: flex; justify-content: space-between;
}
.kc-card--crystal .kc-cr-head .kc-badge {
  font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: .25em; color: #93c5fd; text-transform: uppercase;
  background: rgba(37,99,235,.18); padding: 4px 8px;
  border-radius: 999px; border: 1px solid rgba(37,99,235,.4);
}
.kc-card--crystal .kc-cr-name {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; z-index: 4;
  font-family: 'Crimson Pro', serif; font-weight: 700;
  font-size: 26px; color: #fff; letter-spacing: .04em;
  text-shadow: 0 0 24px rgba(96,165,250,.5);
}
.kc-card--crystal .kc-cr-name .kc-sub {
  display: block; font-family: 'Geist Mono', monospace;
  font-weight: 400; font-size: 11px; color: #93c5fd;
  margin-top: 4px; letter-spacing: .18em;
}
.kc-card--crystal .kc-card__face--back {
  background: linear-gradient(160deg, #1e293b, #0f172a);
  color: #f1f5f9; border: 1px solid #334155;
}
.kc-card--crystal .kc-card__face--back dt  { color: #93c5fd; }
.kc-card--crystal .kc-card__face--back h3  { color: #fff; }
.kc-card--crystal .kc-card__face--back .kc-fact { color: #cbd5e1; }


/* ═══════ Reduced motion ═══════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
}