/* ===========================================================
   DE KLAS IN BEWEGING — digibord tool
   Meester Danny design system
   =========================================================== */

:root {
  /* Brand */
  --md-sky-400:#5dd0f2; --md-sky-500:#25b7e8; --md-sky-600:#0f9ad1; --md-sky-700:#0a7aa8;
  --md-orange-300:#ffc37a; --md-orange-500:#f28a2e; --md-orange-600:#e06a11; --md-orange-700:#b84e07;
  --md-cream-50:#fdf9f1; --md-cream-100:#faf3e4; --md-cream-200:#f1e6cc; --md-sand-300:#e3d4b3;
  --md-ink-900:#15202b; --md-ink-800:#1d2a38; --md-ink-700:#2c3e50; --md-ink-500:#526374;
  --md-ink-300:#9aa7b4; --md-ink-100:#e3e8ec; --md-white:#fff;
  --md-success:#38b24a; --md-warn:#f2b632; --md-danger:#d64545;

  /* Subject colors used as chip backgrounds */
  --c-bewegen:       #f28a2e;
  --c-samenwerken:   #e64b6b;
  --c-concentratie:  #8c5fd3;
  --c-taal:          #25b7e8;
  --c-rekenen:       #f2b632;
  --c-rust:          #38b24a;

  --c-bewegen-ink:      #6e3300;
  --c-samenwerken-ink:  #6c1a30;
  --c-concentratie-ink: #3a2470;
  --c-taal-ink:         #0a4d6e;
  --c-rekenen-ink:      #6e4d00;
  --c-rust-ink:         #0e4a1c;

  /* Benodigdheden chip colors */
  --m-geen:      #c9d6df;
  --m-papier:    #f5e6c8;
  --m-kaartjes:  #ffd9a3;
  --m-digibord:  #b7e6f7;

  --shadow-paper: 0 1px 2px rgba(27,42,56,.05), 0 8px 22px rgba(27,42,56,.10);
  --shadow-card:  0 14px 36px rgba(27,42,56,.14);
  --shadow-press: 0 4px 0 var(--md-ink-900), 0 10px 22px rgba(27,42,56,.18);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--md-ink-900);
  font-family: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background:
    radial-gradient(1100px 700px at 12% -10%, rgba(140,95,211,.28), transparent 60%),
    radial-gradient(900px 700px at 100% 0%, rgba(230,75,107,.22), transparent 55%),
    radial-gradient(900px 800px at 80% 110%, rgba(242,182,50,.30), transparent 55%),
    #fbf6ec;
  overflow-x: hidden;
}

button, select { font: inherit; color: inherit; }

/* ===========================================================
   BACKGROUND DECOR
   =========================================================== */
.bg-shapes {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.bg-dot {
  position: absolute; border-radius: 50%;
  border: 3px solid var(--md-ink-900);
}
.bg-dot--1 { top: 14%;  left: 4%;  width: 28px; height: 28px; background: #8c5fd3;             animation: floatY 7s ease-in-out infinite; }
.bg-dot--2 { top: 70%;  left: 7%;  width: 18px; height: 18px; background: #f2b632;             animation: floatY 9s ease-in-out infinite reverse; }
.bg-dot--3 { top: 22%;  right: 6%; width: 22px; height: 22px; background: #e64b6b;             animation: floatY 8s ease-in-out infinite 1s; }
.bg-dot--4 { top: 82%;  right: 8%; width: 30px; height: 30px; background: #38b24a;             animation: floatY 10s ease-in-out infinite reverse 1.5s; }
.bg-dot--5 { top: 46%;  right: 3%; width: 14px; height: 14px; background: #8c5fd3;             animation: floatY 6s ease-in-out infinite .5s; }

.bg-squiggle {
  position: absolute; width: 110px; height: 36px;
  color: var(--md-ink-900); opacity: .55;
}
.bg-squiggle--1 { top: 8%;  right: 16%; transform: rotate(-12deg); }
.bg-squiggle--2 { bottom: 12%; left: 14%; transform: rotate(8deg); }

.bg-star {
  position: absolute; width: 36px; height: 36px;
  color: var(--md-orange-500);
  animation: spinSlow 18s linear infinite;
}
.bg-star--1 { top: 38%; left: 2%;  color: #f2b632; }
.bg-star--2 { bottom: 6%; right: 22%; width: 28px; height: 28px; color: #e64b6b; animation-duration: 22s; animation-direction: reverse; }

@keyframes floatY {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* Ninja shurikens & dash trails */
.bg-shuriken {
  position: absolute;
  width: 56px; height: 56px;
  filter: drop-shadow(2px 3px 0 rgba(27,42,56,.22));
}
.bg-shuriken--1 { top: 38%; left: 1.5%; color: #8c5fd3; }
.bg-shuriken--2 { bottom: 5%; right: 21%; width: 44px; height: 44px; color: #e64b6b; }

.shuriken-spin {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: spinSlow 8s linear infinite;
}
.shuriken-spin--rev { animation-duration: 10s; animation-direction: reverse; }

.bg-dash {
  position: absolute;
  width: 80px; height: 60px;
  opacity: .55;
}
.bg-dash--1 { top: 56%; right: 4%;  transform: rotate(-10deg); }
.bg-dash--2 { top: 28%; left: 9%;   transform: rotate(14deg); }

/* ===========================================================
   LAYOUT SHELL
   =========================================================== */
.app-shell {
  position: relative; z-index: 1;
  width: min(1480px, calc(100% - 48px));
  margin: 0 auto;
  padding: 22px 0 36px;
}

/* ===========================================================
   HERO
   =========================================================== */
.hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 22px 32px;
  margin-bottom: 22px;
  border: 3px solid var(--md-ink-900);
  border-radius: 28px;
  background:
    repeating-linear-gradient(135deg, transparent 0 22px, rgba(140,95,211,.06) 22px 24px),
    var(--md-white);
  box-shadow: var(--shadow-paper);
  position: relative;
  overflow: hidden;
}

.hero::before {
  /* corner accent stripe */
  content:"";
  position: absolute; top: -14px; right: -14px;
  width: 96px; height: 96px;
  background: #f2b632;
  border: 3px solid var(--md-ink-900);
  transform: rotate(45deg);
}

.hero__left { display: grid; gap: 6px; align-content: start; }

.hero__sign {
  display: flex; align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin-top: 8px;
}
.hero__brand {
  display: inline-flex; align-items: center;
  transition: transform .15s ease;
}
.hero__brand:hover { transform: translateY(-1px) scale(1.04); }
.hero__brand img {
  height: clamp(36px, 4vw, 48px);
  width: auto;
  display: block;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  width: fit-content;
  font-family: 'Patrick Hand', cursive;
  font-size: 1.15rem;
  color: var(--md-ink-700);
  letter-spacing: .5px;
}

.hero__title {
  margin: 0;
  font-family: 'Luckiest Guy', 'Bangers', cursive;
  font-weight: 400;
  letter-spacing: .02em;
  line-height: .92;
  font-size: clamp(2.6rem, 5.4vw, 5.4rem);
  color: var(--md-ink-900);
  display: grid;
  text-shadow:
    2px 2px 0 var(--md-white),
    4px 4px 0 var(--md-ink-900);
}
.hero__title-line { display: inline-block; }
.hero__title-line--accent {
  color: #8c5fd3;
  position: relative;
}
.hero__bounce {
  display: inline-block;
  width: .7em; height: .7em;
  color: #e64b6b;
  margin-left: .25em;
  vertical-align: 0.05em;
  animation: bounce 1.6s ease-in-out infinite;
  filter: drop-shadow(2px 2px 0 var(--md-ink-900));
}
.hero__bounce .shuriken-spin { animation-duration: 3s; }

.hero__headband {
  display: inline-block;
  width: clamp(120px, 18vw, 200px);
  height: 10px;
  margin-top: 10px;
  border: 2.5px solid var(--md-ink-900);
  border-radius: 4px;
  background: repeating-linear-gradient(90deg, #8c5fd3 0 14px, #15202b 14px 22px);
  position: relative;
}
.hero__headband::after {
  content:"";
  position: absolute;
  right: -10px; top: 50%;
  width: 22px; height: 6px;
  transform: translateY(-50%) rotate(18deg);
  background: #8c5fd3;
  border: 2px solid var(--md-ink-900);
  border-radius: 3px;
}
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-14px); }
}

.hero__sub {
  margin: 6px 0 0;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  color: var(--md-ink-700);
  font-weight: 600;
}

.hero__url {
  display: inline-block;
  font-family: 'Nunito', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: var(--md-sky-700);
  text-decoration: none;
  padding: 0 2px;
  border-bottom: 2px dashed currentColor;
  transition: color .15s ease, transform .15s ease;
}
.hero__url:hover {
  color: var(--md-orange-600);
  transform: translateY(-1px);
}

.hero__sign-sep {
  color: var(--md-ink-300);
  font-weight: 900;
  font-size: 1.1rem;
  user-select: none;
}

.hero__social {
  display: inline-flex; align-items: center;
  gap: 6px;
  font-family: 'Nunito', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: var(--md-ink-800);
  text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.hero__social img {
  width: clamp(22px, 2.2vw, 28px);
  height: auto;
  display: block;
  filter: drop-shadow(1px 1px 0 rgba(27,42,56,.15));
}
.hero__social span {
  border-bottom: 2px dashed var(--md-ink-300);
  padding-bottom: 1px;
  transition: border-color .15s ease;
}
.hero__social:hover { color: #c0388a; transform: translateY(-1px); }
.hero__social:hover span { border-bottom-color: currentColor; }

.hero__right { position: relative; z-index: 1; display: grid; gap: 10px; justify-items: end; align-items: center; }
.hero__ninja-card {
  position: relative;
  width: clamp(150px, 18vw, 240px);
  aspect-ratio: 1;
  display: grid; place-items: center;
  border: 3px solid var(--md-ink-900);
  border-radius: 26px;
  background:
    radial-gradient(circle at 30% 25%, rgba(242,182,50,.45), transparent 60%),
    linear-gradient(145deg, #b58bee 0%, #8c5fd3 55%, #5e3aa3 100%);
  box-shadow: 0 8px 0 var(--md-ink-900), 0 18px 30px rgba(58,36,112,.35);
  overflow: hidden;
  transform: rotate(-3deg);
  animation: ninjaWobble 5s ease-in-out infinite;
}
.hero__ninja-card::before {
  /* inner highlight stripe */
  content:"";
  position: absolute; inset: 6px;
  border-radius: 20px;
  border: 2px dashed rgba(255,255,255,.35);
  pointer-events: none;
}
.hero__ninja-card::after {
  /* small "new" star at corner */
  content:"";
  position: absolute; top: -10px; left: -10px;
  width: 36px; height: 36px;
  background: #f2b632;
  border: 3px solid var(--md-ink-900);
  border-radius: 50%;
  box-shadow: 0 4px 0 var(--md-ink-900);
}
.hero__ninja {
  position: relative; z-index: 1;
  width: 108%; height: 108%;
  object-fit: contain;
  filter: drop-shadow(4px 5px 0 rgba(27,42,56,.35));
  animation: ninjaFloat 3.2s ease-in-out infinite;
  transform-origin: 50% 70%;
}
.hero__ninja-tag {
  position: absolute;
  bottom: 6px; right: -8px;
  padding: 4px 10px;
  background: var(--md-ink-900);
  color: #f2b632;
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.05rem;
  border: 2.5px solid var(--md-ink-900);
  border-radius: 999px;
  letter-spacing: .04em;
  transform: rotate(6deg);
  box-shadow: 0 3px 0 rgba(27,42,56,.3);
  z-index: 2;
}

@keyframes ninjaWobble {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(2deg); }
}
@keyframes ninjaFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%     { transform: translateY(-6px) scale(1.02); }
}

/* ===========================================================
   CONTROLS
   =========================================================== */
.controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) auto auto;
  gap: 18px;
  align-items: end;
  margin-bottom: 22px;
  padding: 18px 22px;
  border: 3px solid var(--md-ink-900);
  border-radius: 24px;
  background: var(--md-white);
  box-shadow: var(--shadow-paper);
}

.filter-group { display: grid; gap: 8px; min-width: 0; }

label, .label-title {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  color: var(--md-ink-700);
  text-transform: uppercase;
  letter-spacing: .06em;
  display: inline-flex; align-items: center; gap: 8px;
}
.filter-icon {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border: 2.5px solid var(--md-ink-900);
  border-radius: 7px;
  background: #d4c2f0;
  color: var(--md-ink-900);
}
.filter-icon svg { width: 16px; height: 16px; }

.select-wrap { position: relative; }
select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  min-height: 56px;
  padding: 0 50px 0 18px;
  border: 3px solid var(--md-ink-900);
  border-radius: 16px;
  background: var(--md-cream-50);
  color: var(--md-ink-900);
  font-weight: 800;
  font-size: 1.18rem;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--md-ink-900);
  transition: transform .12s ease, box-shadow .12s ease;
}
select:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--md-ink-900); }
select:focus-visible {
  outline: none;
  box-shadow: 0 4px 0 var(--md-ink-900), 0 0 0 4px rgba(37,183,232,.45);
}
.select-chev {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px;
  color: var(--md-ink-900);
  pointer-events: none;
}

.filter-meta {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: 10px;
  padding: 8px 14px 8px 8px;
  border: 3px solid var(--md-ink-900);
  border-radius: 18px;
  background: var(--md-cream-100);
}
.filter-meta__num {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: #e64b6b;
  color: var(--md-white);
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.9rem;
  border: 3px solid var(--md-ink-900);
  text-shadow: 1px 1px 0 var(--md-ink-900);
}
.filter-meta__label {
  font-weight: 900; font-size: .82rem;
  line-height: 1;
  text-transform: uppercase; letter-spacing: .04em;
  color: var(--md-ink-700);
}

/* ===========================================================
   BUTTONS
   =========================================================== */
.primary-button, .ghost-button, .secondary-button {
  font-family: 'Nunito', sans-serif;
  font-weight: 900;
  border: 3px solid var(--md-ink-900);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
  user-select: none;
}

.primary-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 26px;
  min-height: 60px;
  color: var(--md-white);
  background: #8c5fd3;
  border-radius: 18px;
  font-size: 1.3rem;
  box-shadow: 0 6px 0 var(--md-ink-900), 0 14px 28px rgba(58,36,112,.30);
  letter-spacing: .01em;
}
.primary-button__inner {
  display: inline-flex; align-items: center; gap: 12px;
  text-shadow: 1px 1px 0 rgba(0,0,0,.18);
}
.primary-button__inner svg { width: 22px; height: 22px; }

.primary-button--xl {
  padding: 22px 40px;
  min-height: 86px;
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  border-radius: 22px;
  box-shadow: 0 8px 0 var(--md-ink-900), 0 22px 40px rgba(58,36,112,.32);
}
.primary-button--xl .primary-button__inner svg { width: 32px; height: 32px; }

.primary-button:hover { transform: translateY(-3px); box-shadow: 0 9px 0 var(--md-ink-900), 0 18px 30px rgba(58,36,112,.34); }
.primary-button:active { transform: translateY(2px); box-shadow: 0 3px 0 var(--md-ink-900), 0 6px 12px rgba(58,36,112,.26); }

.ghost-button, .secondary-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  min-height: 56px;
  border-radius: 16px;
  background: var(--md-white);
  color: var(--md-ink-900);
  font-size: 1.05rem;
  box-shadow: 0 4px 0 var(--md-ink-900);
}
.ghost-button svg { width: 18px; height: 18px; }
.ghost-button:hover, .secondary-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--md-ink-900); }
.ghost-button:active, .secondary-button:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--md-ink-900); }

button:focus-visible, .select-wrap:focus-within select {
  outline: none;
  box-shadow: 0 6px 0 var(--md-ink-900), 0 0 0 4px rgba(37,183,232,.45);
}

/* ===========================================================
   WORKSPACE
   =========================================================== */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 22px;
  align-items: start;
}

.movement-card {
  position: relative;
  padding: clamp(26px, 3vw, 40px);
  border: 3px solid var(--md-ink-900);
  border-radius: 28px;
  background:
    radial-gradient(680px 360px at 110% -10%, rgba(242,182,50,.38), transparent 60%),
    radial-gradient(520px 320px at -10% 110%, rgba(230,75,107,.22), transparent 60%),
    var(--md-white);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 460px;
}

/* Decorative corner triangles */
.card-corner {
  position: absolute;
  width: 90px; height: 90px;
  background: #8c5fd3;
  border: 3px solid var(--md-ink-900);
  pointer-events: none;
  z-index: 0;
}
.card-corner--tl { top: -50px; left: -50px; transform: rotate(45deg); }
.card-corner--br { bottom: -50px; right: -50px; transform: rotate(45deg); background: #f2b632; }

/* Peek ninja on the movement card */
.card-ninja {
  position: absolute;
  bottom: -20px;
  right: -14px;
  width: clamp(140px, 16vw, 210px);
  height: auto;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(4px 6px 0 rgba(27,42,56,.28));
  animation: ninjaSlide .55s cubic-bezier(.2,.7,.2,1.2) backwards, ninjaIdle 4s ease-in-out infinite .55s;
  transform-origin: 70% 90%;
}
@keyframes ninjaSlide {
  from { opacity: 0; transform: translate(30px, 40px) rotate(10deg) scale(.85); }
  to   { opacity: 1; transform: translate(0,0) rotate(0) scale(1); }
}
@keyframes ninjaIdle {
  0%,100% { transform: translateY(0) rotate(0); }
  50%     { transform: translateY(-6px) rotate(-2deg); }
}

/* Make sure text content stays above the peek-ninja */
.movement-card > .card-topline,
.movement-card > .movement-title,
.movement-card > .details-grid,
.movement-card > .instruction-grid {
  position: relative;
  z-index: 1;
}
/* Action row stays on top of the ninja so buttons are visible + clickable */
.movement-card > .action-row {
  position: relative;
  z-index: 3;
}

/* Card states */
.start-state {
  display: grid;
  min-height: 360px;
  align-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
  position: relative;
}

.start-state__badge {
  display: grid; place-items: center;
  width: clamp(140px, 16vw, 200px); height: clamp(140px, 16vw, 200px);
  animation: ninjaBob 2.6s ease-in-out infinite;
}
.start-state__badge img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(4px 6px 0 rgba(27,42,56,.22));
}
@keyframes ninjaBob {
  0%,100% { transform: translateY(0) rotate(-2deg); }
  50%     { transform: translateY(-8px) rotate(2deg); }
}
@keyframes pulse {
  0%,100% { transform: scale(1); }
  50%     { transform: scale(1.08); }
}

.message-state {
  display: grid;
  min-height: 360px;
  align-content: center;
  justify-items: center;
  gap: 18px;
  text-align: center;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  color: var(--md-ink-700);
  padding: 20px;
}
.message-state p { margin: 0; max-width: 36ch; }

.label-title {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.2rem;
  color: var(--md-ink-700);
  text-transform: none;
  letter-spacing: 0;
}

.start-copy {
  margin: 0;
  color: var(--md-ink-700);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.45;
  max-width: 42ch;
  font-weight: 600;
}

/* Movement detail rendering */
.card-topline {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 14px;
}
.card-topline .pill {
  background: var(--md-cream-100);
  color: var(--md-ink-900);
}

/* Subject/benodigdheden pills */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 2.5px solid var(--md-ink-900);
  border-radius: 999px;
  background: var(--md-white);
  font-size: .95rem; font-weight: 800;
  color: var(--md-ink-900);
  line-height: 1;
  box-shadow: 0 3px 0 var(--md-ink-900);
}
.pill::before {
  content:""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--md-orange-500);
  display: none;
}
.pill--soort::before { display: inline-block; }

.pill[data-soort="bewegen"]      { background: var(--c-bewegen);      color: var(--md-white); }
.pill[data-soort="samenwerken"]  { background: var(--c-samenwerken);  color: var(--md-white); }
.pill[data-soort="concentratie"] { background: var(--c-concentratie); color: var(--md-white); }
.pill[data-soort="taal"]         { background: var(--c-taal);         color: var(--md-white); }
.pill[data-soort="rekenen"]      { background: var(--c-rekenen);      color: var(--md-ink-900); }
.pill[data-soort="rust"]         { background: var(--c-rust);         color: var(--md-white); }
.pill[data-soort] { text-shadow: 1px 1px 0 rgba(0,0,0,.12); }
.pill[data-soort="rekenen"] { text-shadow: none; }
.pill[data-soort] .pill__dot { background: rgba(255,255,255,.85); }

.pill[data-mat="geen"]      { background: var(--m-geen); }
.pill[data-mat="papier"]    { background: var(--m-papier); }
.pill[data-mat="kaartjes"]  { background: var(--m-kaartjes); }
.pill[data-mat="digibord"]  { background: var(--m-digibord); }

/* Movement title */
.movement-title {
  margin: 0 0 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(2.2rem, 4.2vw, 4.4rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--md-ink-900);
  text-wrap: balance;
}
.movement-title .ink-accent { color: #6e3aa6; }

.start-state .movement-title {
  font-family: 'Luckiest Guy', cursive;
  font-weight: 400;
  letter-spacing: .015em;
  text-shadow: 2px 2px 0 var(--md-white), 4px 4px 0 var(--md-ink-900);
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  line-height: .95;
}
.start-state .movement-title .ink-accent {
  color: #e64b6b;
}

/* Detail blocks */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.instruction-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 12px;
}

.detail-block, .instruction-block {
  position: relative;
  padding: 16px 18px;
  border: 3px solid var(--md-ink-900);
  border-radius: 18px;
  background: var(--md-cream-50);
  box-shadow: 0 4px 0 var(--md-ink-900);
}

.detail-block .label-title,
.instruction-block .label-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Nunito', sans-serif; font-weight: 900;
  font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  color: #6e3aa6;
  margin-bottom: 6px;
}
.instruction-block { background: var(--md-white); }
.instruction-block--variatie { background: var(--md-cream-100); }
.instruction-block--variatie .label-title { color: #b13252; }

.detail-block p,
.instruction-block p {
  margin: 4px 0 0;
  font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  line-height: 1.45;
  color: var(--md-ink-900);
  font-weight: 500;
}

.detail-block__chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 8px;
}

/* Tiny soort dot inside the title pills */
.pill__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--md-orange-500);
  display: inline-block;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,.25);
}

.action-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 22px;
  align-items: center;
}
.action-row--center { justify-content: center; }

.secondary-button {
  background: var(--md-white);
  color: var(--md-ink-900);
}
.secondary-button .heart {
  width: 20px; height: 20px;
  color: var(--md-danger);
  transition: transform .15s ease;
}
.secondary-button:hover .heart { transform: scale(1.15) rotate(-6deg); }

.secondary-button.favorite-active {
  background: var(--md-success);
  color: var(--md-white);
}
.secondary-button.favorite-active .heart {
  color: var(--md-white);
  fill: var(--md-white);
  animation: heartPop .35s ease;
}
@keyframes heartPop {
  0% { transform: scale(.8); }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ===========================================================
   FAVORITES PANEL
   =========================================================== */
.favorites-panel {
  position: relative;
  padding: 22px;
  border: 3px solid var(--md-ink-900);
  border-radius: 28px;
  background:
    repeating-linear-gradient(135deg, transparent 0 20px, rgba(140,95,211,.07) 20px 22px),
    var(--md-white);
  box-shadow: var(--shadow-paper);
}

.panel-heading {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 2.5px dashed var(--md-ink-300);
}
.panel-heading h2 {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--md-ink-900);
}
.panel-heart {
  width: 24px; height: 24px;
  color: #e64b6b;
}
#favoriteCount {
  display: grid; place-items: center;
  min-width: 44px; min-height: 44px;
  border-radius: 50%;
  border: 3px solid var(--md-ink-900);
  background: #38b24a;
  font-family: 'Luckiest Guy', cursive;
  font-size: 1.35rem;
  color: var(--md-white);
  text-shadow: 1px 1px 0 var(--md-ink-900);
  box-shadow: 0 4px 0 var(--md-ink-900);
}

.favorites-list {
  display: grid; gap: 10px;
  max-height: 480px;
  overflow: auto;
  padding-right: 4px;
}
.favorites-list::-webkit-scrollbar { width: 8px; }
.favorites-list::-webkit-scrollbar-thumb { background: var(--md-ink-300); border-radius: 4px; }

.favorite-item {
  position: relative;
  width: 100%;
  padding: 14px 16px;
  border: 3px solid var(--md-ink-900);
  border-radius: 18px;
  background: var(--md-cream-50);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 0 var(--md-ink-900);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
  display: grid; gap: 4px;
}
.favorite-item:hover {
  transform: translateY(-2px);
  background: var(--md-white);
  box-shadow: 0 6px 0 var(--md-ink-900);
}
.favorite-item:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--md-ink-900); }

.favorite-item strong {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--md-ink-900);
}
.favorite-item .fav-tags {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 4px;
}
.favorite-item .fav-tags .pill {
  font-size: .75rem;
  min-height: 22px;
  padding: 2px 8px;
  box-shadow: 0 2px 0 var(--md-ink-900);
  border-width: 2px;
}

.favs-empty {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 12px 4px;
}
.favs-empty img {
  width: 110px; height: auto;
  filter: drop-shadow(3px 4px 0 rgba(27,42,56,.18));
  animation: ninjaBob 3s ease-in-out infinite;
}
.favs-empty .muted { margin: 0; }

.muted {
  color: var(--md-ink-500);
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0;
  font-weight: 600;
}
.muted__hint {
  display: block;
  margin-top: 4px;
  font-family: 'Patrick Hand', cursive;
  color: var(--md-ink-700);
  font-size: 1.1rem;
  font-weight: 400;
}

/* ===========================================================
   FOOTER
   =========================================================== */
.page-footer {
  margin-top: 28px;
  text-align: center;
  font-family: 'Patrick Hand', cursive;
  color: var(--md-ink-500);
  font-size: 1.05rem;
}

/* ===========================================================
   CARD ENTRY ANIMATION
   =========================================================== */
.movement-card[data-state="movement"] {
  animation: cardIn .42s cubic-bezier(.2,.7,.2,1.2);
}
@keyframes cardIn {
  0%   { transform: scale(.97) translateY(8px); opacity: 0; }
  60%  { transform: scale(1.01) translateY(0); opacity: 1; }
  100% { transform: scale(1); }
}

.card-topline .pill,
.details-grid > *,
.instruction-grid > * {
  animation: rise .45s ease-out backwards;
}
.card-topline .pill:nth-child(1)        { animation-delay: .04s; }
.card-topline .pill:nth-child(2)        { animation-delay: .08s; }
.card-topline .pill:nth-child(3)        { animation-delay: .12s; }
.card-topline .pill:nth-child(4)        { animation-delay: .16s; }
.card-topline .pill:nth-child(5)        { animation-delay: .20s; }
.movement-title                         { animation: rise .55s ease-out backwards; animation-delay: .14s; }
.details-grid > *:nth-child(1)          { animation-delay: .22s; }
.details-grid > *:nth-child(2)          { animation-delay: .26s; }
.instruction-grid > *:nth-child(1)      { animation-delay: .30s; }
.instruction-grid > *:nth-child(2)      { animation-delay: .34s; }
.action-row                              { animation: rise .55s ease-out backwards; animation-delay: .38s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Confetti canvas */
.confetti {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 99;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
@media (max-width: 1100px) {
  .controls { grid-template-columns: 1fr 1fr auto; }
  .filter-meta { grid-column: span 1; }
}
@media (max-width: 900px) {
  .app-shell { width: min(100% - 28px, 900px); }
  .hero { grid-template-columns: 1fr; padding: 22px; }
  .hero::before { width: 64px; height: 64px; top: -10px; right: -10px; }
  .hero__right { justify-self: start; }
  .controls { grid-template-columns: 1fr 1fr; }
  .controls .ghost-button { grid-column: span 2; }
  .workspace { grid-template-columns: 1fr; }
  .details-grid, .instruction-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .controls { grid-template-columns: 1fr; }
  .controls .ghost-button, .filter-meta { grid-column: 1; }
  .primary-button, .secondary-button, .ghost-button { width: 100%; }
}