:root {
  /* Warm cream + playful accents */
  --bg: #FFF6E6;
  --bg-2: #FFE9D2;
  --surface: #FFFFFF;
  --ink: #2A2244;
  --ink-soft: #5B5478;
  --muted: #8B85A3;
  --line: #E9DFC8;

  --purple: #7C5CFF;
  --purple-deep: #5B3DE0;
  --pink: #FF6FB5;
  --blue: #4DA8FF;
  --green: #45C26B;
  --green-deep: #2DA052;
  --yellow: #FFD23F;
  --red: #FF5A5A;
  --red-deep: #E03A3A;

  --shadow-card: 0 18px 28px -16px rgba(43, 33, 80, 0.22), 0 4px 10px -4px rgba(43, 33, 80, 0.10);
  --shadow-pop: 0 26px 44px -18px rgba(124, 92, 255, 0.45);

  --radius-card: 22px;
  --radius-lg: 30px;

  --font-display: 'Fredoka', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito', system-ui, -apple-system, sans-serif;
  --mosolykulcs-pink: #E91E63;
  --demo-banner-height: 44px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Background gradient blobs */
.bg-blobs {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55;
}
.blob--a { width: 520px; height: 520px; left: -160px; top: -120px; background: #FFD79B; }
.blob--b { width: 480px; height: 480px; right: -140px; top: 30%; background: #BFD9FF; }
.blob--c { width: 460px; height: 460px; left: 30%; bottom: -180px; background: #FFC9E2; }

/* Demo mode banner (solo practice only) */
.demo-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  min-height: var(--demo-banner-height);
  padding: 8px clamp(12px, 3vw, 24px);
  background: linear-gradient(135deg, var(--mosolykulcs-pink) 0%, #C2185B 100%);
  color: #fff;
  box-shadow: 0 4px 14px -6px rgba(194, 24, 91, .45);
}
.demo-banner[hidden] { display: none !important; }
.demo-banner-text {
  margin: 0;
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
}
.demo-banner-text strong {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .2px;
}
.demo-banner-cta {
  flex: 0 0 auto;
  padding: 7px 16px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--mosolykulcs-pink);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(42, 34, 68, .35);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.demo-banner-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(42, 34, 68, .4);
}
.demo-banner-cta:active { transform: translateY(0); }

/* Topbar — fixed so it's always visible at the top of the viewport,
   even if a child container creates an unexpected stacking/scroll context. */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 8px clamp(14px, 3vw, 28px);
  background: rgba(255, 246, 230, 0.92);
  border-bottom: 1px solid rgba(233, 223, 200, 0.72);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  box-shadow: 0 6px 18px -16px rgba(43, 33, 80, .28);
}
/* Solo/demo mode: opaque chrome — no scroll bleed-through in iframe preview */
body.solo-mode .topbar {
  top: var(--demo-banner-height);
  z-index: 55;
  background: #FFF6E6;
  border-bottom-color: #E9DFC8;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 2px 12px rgba(42, 34, 68, .12);
  isolation: isolate;
}
body.solo-mode .task-banner {
  background: #fff;
  border-color: #E9DFC8;
}
body.solo-mode .score-pill {
  box-shadow: 0 10px 22px -12px rgba(124, 92, 255, .45);
}
/* Reserve space at the top of the document so the fixed topbar
   doesn't cover the first row of stage content. The landing view
   hides .topbar entirely, so no offset is needed there. */
body:not(.classroom-locked) { padding-top: 60px; }
body.solo-mode:not(.classroom-locked) {
  padding-top: calc(var(--demo-banner-height) + 60px);
}
@media (max-width: 640px) {
  :root { --demo-banner-height: 52px; }
  body:not(.classroom-locked) { padding-top: 54px; }
  body.solo-mode:not(.classroom-locked) {
    padding-top: calc(var(--demo-banner-height) + 54px);
  }
  .demo-banner { gap: 8px; padding: 8px 12px; }
}
.brand { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); }
.brand-logo { display: inline-flex; }
.brand-logo svg { width: 34px; height: 34px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text strong { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.2px; }
.brand-text span { font-size: 11.5px; color: var(--ink-soft); }

.task-banner {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-width: min(480px, 42vw);
  max-width: 100%;
  flex: 1 1 auto;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid rgba(233, 223, 200, 0.86);
  box-shadow: 0 10px 22px -18px rgba(43, 33, 80, 0.32);
  transition: background .25s ease, border-color .25s ease;
}
.task-motor {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #FFF7DC;
}
.task-motor svg { width: 26px; height: 26px; }
.task-banner span:last-child { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.task-banner strong {
  font-family: var(--font-display);
  font-size: clamp(13px, 1.35vw, 15.5px);
  letter-spacing: .1px;
}
.task-banner small { color: var(--ink-soft); font-weight: 800; font-size: 11px; margin-top: 1px; }

.score-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 999px;
  background: linear-gradient(135deg, var(--purple) 0%, var(--blue) 100%);
  color: #fff; font-weight: 700; font-size: 13.5px;
  box-shadow: var(--shadow-pop);
}
.score-pill[hidden] { display: none; }
.score-pill .score-icon svg { width: 18px; height: 18px; }
.score-icon { display: inline-flex; }
.score-text strong { font-variant-numeric: tabular-nums; }

/* Stage layout */
.stage {
  position: relative; z-index: 1;
  padding: 24px clamp(12px, 3vw, 32px) 32px;
  max-width: 1280px; margin: 0 auto;
}

/* Tongue exercise task */
.tongue-task {
  padding: clamp(18px, 3vw, 30px);
  background:
    radial-gradient(circle at 10% 8%, rgba(255, 210, 63, .22), transparent 28%),
    radial-gradient(circle at 92% 15%, rgba(77, 168, 255, .18), transparent 24%),
    rgba(255, 255, 255, .66);
  border: 1.5px solid rgba(233, 223, 200, .9);
  border-radius: 34px;
  box-shadow: 0 26px 40px -26px rgba(43, 33, 80, .24);
  margin-bottom: clamp(30px, 5vw, 58px);
}
.tongue-heading {
  margin-bottom: 18px;
  align-items: center;
}
.tongue-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.tongue-card {
  position: relative;
  min-height: 278px;
  padding: 12px;
  border: 1.5px solid #E8DFC8;
  border-radius: 24px;
  background:
    radial-gradient(circle at 26% 12%, rgba(255, 255, 255, .98), transparent 36%),
    linear-gradient(160deg, #FFFFFF 0%, #FFF4E6 100%);
  color: var(--ink);
  box-shadow: var(--shadow-card);
  cursor: default;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 10px;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform .18s cubic-bezier(.16, 1, .3, 1),
    box-shadow .18s cubic-bezier(.16, 1, .3, 1),
    border-color .18s cubic-bezier(.16, 1, .3, 1),
    background .18s cubic-bezier(.16, 1, .3, 1);
}
.tongue-card:has(.tongue-play:hover),
.tongue-card:has(.tongue-confirm:hover),
.tongue-card.is-playing {
  transform: translateY(-3px);
  border-color: #F2B77C;
  box-shadow: 0 22px 30px -16px rgba(43, 33, 80, .28);
}
.tongue-play {
  width: 100%;
  display: grid;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 20px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tongue-play:focus-visible,
.tongue-confirm:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 4px;
}
.tongue-visual {
  min-height: 186px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 34% 20%, rgba(255, 255, 255, .9), transparent 36%),
    linear-gradient(160deg, #FFFDF8, #F6EAD8);
  border: 1px solid #E9DDC6;
  overflow: hidden;
  transition: filter .24s ease, opacity .24s ease;
}
.tongue-play:hover .tongue-visual,
.tongue-play:focus-visible .tongue-visual,
.tongue-card.is-playing .tongue-visual {
  border-color: #F2B77C;
  box-shadow: inset 0 0 0 2px rgba(255, 210, 63, .22);
}
.mouth-scene {
  width: min(100%, 150px);
  height: auto;
  filter: drop-shadow(0 10px 10px rgba(42, 34, 68, .14));
}
.mouth-scene.cheek-demo {
  width: min(100%, 168px);
}
.mouth-scene.photo-motion-demo {
  position: relative;
  display: block;
  width: min(100%, 190px);
  aspect-ratio: 1 / 1;
  border-radius: 20px;
  overflow: hidden;
  background: #F8E9C9;
}
.tongue-copy {
  display: grid;
  gap: 5px;
}
.tongue-title {
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1.1;
  font-weight: 800;
  color: var(--ink);
}
.tongue-instruction,
.tongue-task-line {
  font-size: 12.5px;
  line-height: 1.28;
  font-weight: 700;
  color: var(--ink-soft);
}
.tongue-task-line strong {
  color: var(--purple-deep);
  font-weight: 900;
}
.tongue-confirm {
  align-self: center;
  width: 44px;
  height: 44px;
  margin-top: auto;
  border-radius: 999px;
  display: grid;
  place-items: center;
  border: 2px solid #BFEBCB;
  background:
    radial-gradient(circle at 34% 18%, rgba(255,255,255,.95), transparent 36%),
    linear-gradient(160deg, #FFFFFF 0%, #EEF8F0 100%);
  color: var(--green-deep);
  cursor: pointer;
  box-shadow: 0 10px 18px -14px rgba(45, 160, 82, .5);
  transition:
    transform .16s cubic-bezier(.16, 1, .3, 1),
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}
.tongue-confirm:hover {
  transform: translateY(-2px) scale(1.04);
  border-color: var(--green);
  box-shadow: 0 14px 22px -14px rgba(45, 160, 82, .58);
}
.tongue-card.is-playing .tongue-confirm {
  opacity: .5;
  pointer-events: none;
}
.tongue-check {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--green);
  color: #fff;
  transform: scale(0);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1.2);
  box-shadow: 0 8px 14px -5px rgba(45, 160, 82, .55);
}
.tongue-card.is-done {
  border-color: #BFEBCB;
  background: linear-gradient(160deg, #EEF8F0 0%, #E3F3E8 100%);
}
.tongue-card.is-done .tongue-visual {
  filter: grayscale(1);
  opacity: .54;
}
.tongue-card.is-done .tongue-title,
.tongue-card.is-done .tongue-instruction,
.tongue-card.is-done .tongue-task-line,
.tongue-card.is-done .tongue-task-line strong {
  color: var(--muted);
}
.tongue-card.is-done .tongue-check {
  transform: scale(1);
}
.tongue-card.is-done .tongue-confirm {
  background: linear-gradient(160deg, var(--green) 0%, var(--green-deep) 100%);
  border-color: var(--green-deep);
  color: #fff;
  box-shadow: 0 12px 20px -12px rgba(45, 160, 82, .65);
}

.mouth-scene .anim {
  transform-box: fill-box;
  transform-origin: center;
}
.mouth-scene .cheek { transform-box: fill-box; transform-origin: center; }
.mouth-scene .motion-extra { opacity: .92; }
.cheek-demo-frame {
  opacity: 0;
}
.cheek-demo-frame.frame-1 {
  opacity: 1;
}
.photo-motion-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1);
  will-change: opacity, transform;
  pointer-events: none;
  user-select: none;
}
.photo-motion-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}
.photo-motion-frame.frame-1 {
  opacity: 1;
}
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .cheek-demo-frame,
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .photo-motion-frame,
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .photo-motion-frame {
  animation-duration: 4.4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .frame-1,
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .frame-1 { animation-name: cheekFrameOne; }
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .frame-2,
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .frame-2 { animation-name: cheekFrameTwo; }
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .frame-3,
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .frame-3 { animation-name: cheekFrameThree; }
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .frame-4,
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .frame-4 { animation-name: cheekFrameFour; }
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .frame-5,
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .frame-5 { animation-name: cheekFrameFive; }
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .frame-6,
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .frame-6 { animation-name: cheekFrameSix; }
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .frame-7,
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .frame-7 { animation-name: cheekFrameSeven; }
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .cheek-left,
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .cheek-right {
  animation: cheeksPulse 1.15s ease-in-out infinite;
}
.tongue-card[data-motion="cheeks"]:is(:hover, :focus-visible) .mouth-hole {
  animation: cheeksMouth 1.15s ease-in-out infinite;
}
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .kiss-lips {
  animation: kissToOpen 1.15s ease-in-out infinite;
}
.tongue-card[data-motion="kiss-open"]:is(:hover, :focus-visible) .mouth-hole {
  animation: openMouthTall 1.15s ease-in-out infinite;
}
.tongue-card[data-motion="lip-circle"]:is(:hover, :focus-visible) .tongue {
  animation: tongueCircle 1.8s linear infinite;
}
.tongue-card[data-motion="middle-left-right"]:is(:hover, :focus-visible) .tongue {
  animation: tongueSideMiddle 1.15s ease-in-out infinite;
}
.tongue-card[data-motion="cover-lips"]:is(:hover, :focus-visible) .tongue {
  animation: tongueCoverLips 1.25s ease-in-out infinite;
}
.tongue-card[data-motion="point-up-down"]:is(:hover, :focus-visible) .tongue {
  animation: tonguePointUpDown 1.05s ease-in-out infinite;
}
.tongue-card[data-motion="hold-stick"]:is(:hover, :focus-visible) .tongue {
  animation: tongueHoldStick 1.2s ease-in-out infinite;
}
.tongue-card[data-motion="hold-stick"]:is(:hover, :focus-visible) .stick {
  animation: stickTinyPulse 1.2s ease-in-out infinite;
}
.tongue-card[data-motion="vertical-stick"]:is(:hover, :focus-visible) .tongue {
  animation: tongueAroundVerticalStick 1.25s ease-in-out infinite;
}
.tongue-card[data-motion="horizontal-stick"]:is(:hover, :focus-visible) .tongue {
  animation: tongueAroundHorizontalStick 1.25s ease-in-out infinite;
}
.tongue-card[data-motion="inside-up-down"]:is(:hover, :focus-visible) .tongue {
  animation: tongueInsideUpDown 1.05s ease-in-out infinite;
}

@keyframes cheeksPulse {
  0%, 100% { transform: scale(.82); opacity: .42; }
  42% { transform: scale(1.2); opacity: .86; }
  72% { transform: scale(.66); opacity: .28; }
}
@keyframes cheeksMouth {
  0%, 100% { transform: scale(.72, .9); }
  44% { transform: scale(.48, .76); }
  72% { transform: scale(1.08, .68); }
}
@keyframes cheekFrameOne {
  0%, 8% { opacity: 1; transform: scale(1); }
  14%, 92% { opacity: 0; transform: scale(1.006); }
  98%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes cheekFrameTwo {
  0%, 8%, 28%, 100% { opacity: 0; transform: scale(1.004); }
  14%, 22% { opacity: 1; transform: scale(1.006); }
}
@keyframes cheekFrameThree {
  0%, 22%, 42%, 100% { opacity: 0; transform: scale(1.006); }
  28%, 36% { opacity: 1; transform: scale(1.01); }
}
@keyframes cheekFrameFour {
  0%, 36%, 56%, 100% { opacity: 0; transform: scale(1.006); }
  42%, 50% { opacity: 1; transform: scale(1.012); }
}
@keyframes cheekFrameFive {
  0%, 50%, 70%, 100% { opacity: 0; transform: scale(1.006); }
  56%, 64% { opacity: 1; transform: scale(1.008); }
}
@keyframes cheekFrameSix {
  0%, 64%, 84%, 100% { opacity: 0; transform: scale(1.004); }
  70%, 78% { opacity: 1; transform: scale(1.006); }
}
@keyframes cheekFrameSeven {
  0%, 78%, 98%, 100% { opacity: 0; transform: scale(1.002); }
  84%, 92% { opacity: 1; transform: scale(1.004); }
}
@keyframes kissToOpen {
  0%, 100% { transform: scale(.62, .72); }
  48% { transform: scale(1.22, 1.62); }
}
@keyframes openMouthTall {
  0%, 100% { transform: scale(.55, .6); opacity: .82; }
  48% { transform: scale(1.08, 1.55); opacity: 1; }
}
@keyframes tongueCircle {
  0% { transform: translate(0, -20px) rotate(-8deg); }
  25% { transform: translate(24px, 0) rotate(16deg); }
  50% { transform: translate(0, 21px) rotate(4deg); }
  75% { transform: translate(-24px, 0) rotate(-16deg); }
  100% { transform: translate(0, -20px) rotate(-8deg); }
}
@keyframes tongueSideMiddle {
  0%, 100% { transform: translateX(-24px); }
  50% { transform: translateX(24px); }
}
@keyframes tongueCoverLips {
  0%, 100% { transform: translateY(-18px) scaleX(1.12); }
  50% { transform: translateY(20px) scaleX(1.12); }
}
@keyframes tonguePointUpDown {
  0%, 100% { transform: translateY(-23px) scale(.78, 1.18); }
  50% { transform: translateY(23px) scale(.78, 1.18); }
}
@keyframes tongueHoldStick {
  0%, 18% { transform: translateY(12px) scale(.86); }
  38%, 100% { transform: translateY(-25px) scale(.8, 1.12); }
}
@keyframes stickTinyPulse {
  0%, 100% { transform: translateY(0); }
  42% { transform: translateY(-1px); }
}
@keyframes tongueAroundVerticalStick {
  0%, 100% { transform: translate(-27px, 0) rotate(-6deg); }
  50% { transform: translate(27px, 0) rotate(6deg); }
}
@keyframes tongueAroundHorizontalStick {
  0%, 100% { transform: translateY(-20px); }
  50% { transform: translateY(22px); }
}
@keyframes tongueInsideUpDown {
  0%, 100% { transform: translateY(8px) scale(.86, .78); }
  18%, 28% { transform: translateY(-6px) scale(.84, .76); }
  44% { transform: translateY(8px) scale(.86, .78); }
  62%, 72% { transform: translateY(12px) scale(.84, .76); }
  88% { transform: translateY(8px) scale(.86, .78); }
}

.r-choice-heading {
  margin: 0 0 18px;
}

.orbit {
  position: relative;
  display: grid;
  /* Desktop: prompt centered, cards in a 4-col grid wrapping around */
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  align-items: stretch;
}

/* Prompt card occupies center 2x2 on desktop */
.prompt-card {
  grid-column: 2 / span 2;
  grid-row: 2 / span 2;
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF1F8 100%);
  border: 1.5px solid #F2E5F5;
  border-radius: var(--radius-lg);
  padding: clamp(18px, 2.2vw, 26px);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; box-shadow: var(--shadow-pop);
  position: relative; overflow: hidden;
}
.prompt-card::after {
  content: ""; position: absolute; inset: auto -40% -60% auto;
  width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255,210,63,0.35), transparent 70%);
}
.prompt-motor {
  width: clamp(136px, 17vw, 190px); aspect-ratio: 4/3;
  filter: drop-shadow(0 14px 18px rgba(124,92,255,0.22));
  animation: bob 3.4s ease-in-out infinite;
}
.prompt-motor-img { aspect-ratio: 1/1; }
.prompt-motor-img img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  border-radius: 18px;
}
@keyframes bob { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-6px) rotate(2deg)} }

.prompt-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.4vw, 28px);
  margin: 6px 0 0; line-height: 1.15;
}
.prompt-title span {
  background: linear-gradient(135deg, var(--purple), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.prompt-text {
  margin: 2px 0 4px; color: var(--ink-soft); font-size: 15px; line-height: 1.5;
  max-width: 30ch;
}
.prompt-meta { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: #FFF4DA; color: #8A5A12; font-weight: 700; font-size: 12.5px;
  border: 1px solid #F2DFAF;
}

.reset-btn {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 999px;
  background: #fff; color: var(--purple-deep);
  border: 1.5px solid #E4D9FF; font-family: var(--font-body); font-weight: 800;
  font-size: 14px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.reset-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 16px -8px rgba(124,92,255,0.45); background: #FAF7FF; }
.reset-btn:active { transform: translateY(0); }
.reset-btn--solid { background: linear-gradient(135deg, var(--purple), var(--blue)); color: #fff; border-color: transparent; }
.tongue-reset {
  margin-left: auto;
  align-self: start;
  white-space: nowrap;
}

/* Cards container = full grid; each card placed individually around the prompt */
.cards { display: contents; }

.card {
  position: relative;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-card);
  padding: 14px 12px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  font-family: var(--font-body);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  user-select: none; -webkit-tap-highlight-color: transparent;
  min-height: 132px;
}
.card:hover { transform: translateY(-3px) rotate(-0.5deg); box-shadow: 0 22px 30px -16px rgba(43,33,80,0.28); }
.card:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }
.card .illu {
  width: clamp(72px, 8vw, 104px); aspect-ratio: 1/1; display: grid; place-items: center;
  background:
    radial-gradient(circle at 34% 24%, rgba(255,255,255,.95), rgba(255,255,255,.32) 28%, transparent 46%),
    linear-gradient(155deg, #FFFDF8 0%, #F4EFE4 100%);
  border-radius: 20px; border: 1px solid #E9DDC6;
  box-shadow:
    inset 0 2px 12px rgba(255, 255, 255, .88),
    inset 0 -10px 18px rgba(42, 34, 68, .06),
    0 10px 18px -14px rgba(42, 34, 68, .38);
}
.card .illu svg {
  width: 88%; height: 88%; display: block;
  filter: drop-shadow(0 8px 8px rgba(42,34,68,.18)) saturate(.96) contrast(1.03);
}
.card .illu img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 6px 8px rgba(42,34,68,.14));
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 14px;
}
.card .illu { overflow: hidden; }
.card .label {
  font-weight: 800; font-size: 15px; color: var(--ink);
  letter-spacing: 0.1px;
}
.card .check {
  position: absolute; top: 8px; right: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--green); color: #fff;
  transform: scale(0); transition: transform .2s ease;
  box-shadow: 0 6px 12px -4px rgba(45,160,82,0.55);
}
.card.is-correct .check { transform: scale(1); }
.card.is-correct {
  background: linear-gradient(160deg, #E9FBEE, #D6F5E1);
  border-color: #9FE3B5;
}
.card.is-correct .illu { background: linear-gradient(160deg,#FFFFFF,#EEFBF2); border-color:#BBE9C8; }
.card.is-correct .label { color: var(--green-deep); }

.card.is-locked { cursor: default; }
.card.is-locked:hover { transform: none; }

.card.is-wrong {
  animation: shake .42s cubic-bezier(.36,.07,.19,.97);
  background: linear-gradient(160deg, #FFEAEA, #FFD7D7);
  border-color: #FFB3B3;
}
@keyframes shake {
  10%,90% { transform: translateX(-2px) }
  20%,80% { transform: translateX(4px) }
  30%,50%,70% { transform: translateX(-7px) }
  40%,60% { transform: translateX(7px) }
}

/* --- 2b feladat: ugyanaz az orbit layout mint a 2-esnél, csak PNG képek --- */
.r-choice-2b-heading {
  margin-top: clamp(16px, 2.4vw, 28px);
}
/* A 2-es és 2b orbit egységes, tömör layout-tal */
.orbit, .orbit-2b {
  margin-top: 4px;
  gap: clamp(6px, 0.7vw, 12px);
}
.orbit .card, .orbit-2b .card {
  padding: 6px 8px 8px;
  gap: 3px;
  min-height: 0;
}
.orbit .card .illu, .orbit-2b .card .illu {
  width: clamp(64px, 6.4vw, 88px);
  border-radius: 14px;
  overflow: hidden;
}
.orbit .card .label, .orbit-2b .card .label {
  font-size: 13.5px;
}
/* A 2-es és 2b középső prompt-card-ot egységesen tömörebbé tesszük */
.prompt-card, .prompt-card-2b {
  padding: clamp(12px, 1.6vw, 18px);
  gap: 6px;
}
.prompt-card .prompt-motor, .prompt-card-2b .prompt-motor {
  width: clamp(96px, 11vw, 140px);
}
.prompt-card .prompt-title, .prompt-card-2b .prompt-title { font-size: clamp(18px, 1.9vw, 22px); margin-top: 2px; }
.prompt-card .prompt-text, .prompt-card-2b .prompt-text  { font-size: 13.5px; margin: 0; }

/* Rabbit word automation task */
.rabbit-task {
  margin-top: clamp(38px, 6vw, 72px);
  padding: clamp(18px, 3vw, 28px);
  background: rgba(255, 255, 255, 0.52);
  border: 1.5px solid rgba(233, 223, 200, 0.86);
  border-radius: 34px;
  box-shadow: 0 26px 40px -26px rgba(43, 33, 80, 0.24);
}
.section-heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.section-kicker {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: #E8FBEE;
  border: 1px solid #BFEBCB;
  color: var(--green-deep);
  font-weight: 900;
  font-size: 13px;
}
.section-heading h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  margin: 0;
}
.section-heading p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  font-weight: 700;
  line-height: 1.45;
}
.rabbit-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr);
  gap: clamp(16px, 2.2vw, 26px);
  align-items: stretch;
}
.rabbit-progress {
  --rabbit-x: 8%;
  --rabbit-y: 73%;
  position: relative;
  min-height: clamp(280px, 34vw, 430px);
  overflow: hidden;
  border-radius: 30px;
  border: 1.5px solid #E8DFC8;
  box-shadow:
    inset 0 1px 18px rgba(255, 255, 255, .86),
    0 18px 26px -22px rgba(43, 33, 80, .22);
  background: #FBFAF1;
}
.garden-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.rabbit-runner {
  position: absolute;
  left: var(--rabbit-x);
  top: var(--rabbit-y);
  width: clamp(112px, 13vw, 166px);
  transform: translate(-54%, -78%);
  transition: left .72s cubic-bezier(.22,.85,.28,1), top .72s cubic-bezier(.22,.85,.28,1);
  z-index: 2;
  filter: drop-shadow(0 10px 10px rgba(42, 34, 68, .18));
}
.rabbit-runner.is-hopping {
  animation: rabbitHop .72s cubic-bezier(.22,1,.36,1);
}
@keyframes rabbitHop {
  0% { margin-top: 0; rotate: 0deg; scale: 1; }
  18% { margin-top: -18px; rotate: -2deg; scale: 1.02; }
  48% { margin-top: -56px; rotate: -5deg; scale: 1.04; }
  78% { margin-top: -16px; rotate: 2deg; scale: 1.01; }
  100% { margin-top: 0; rotate: 0deg; scale: 1; }
}
.carrot-row {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.carrot {
  position: absolute;
  width: clamp(34px, 4vw, 54px);
  transform: translate(-50%, -50%) rotate(var(--tilt, -8deg));
  transition: opacity .28s ease, scale .28s ease, filter .28s ease;
  filter: drop-shadow(0 8px 7px rgba(92, 58, 26, .16));
}
.carrot.is-eaten {
  opacity: 0;
  scale: .58;
  filter: blur(2px);
}
.word-panel {
  background: rgba(255, 255, 255, .76);
  border: 1.5px solid #E8DFC8;
  border-radius: 28px;
  padding: clamp(14px, 2vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow-card);
}
.rabbit-score {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 18px;
  padding: 10px 12px;
  background: #FFF7DC;
  border: 1px solid #F2DFAF;
  color: #805313;
  font-weight: 900;
}
.word-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.word-chip {
  position: relative;
  border: 1.5px solid #E5D8BF;
  border-radius: 18px;
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.95), transparent 34%),
    linear-gradient(160deg, #FFFFFF 0%, #FFF6E6 100%);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-display);
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  font-size: 17px;
  font-weight: 800;
  padding: 9px 12px 9px 9px;
  min-height: 52px;
  box-shadow: 0 10px 18px -16px rgba(43, 33, 80, .28);
  transition: transform .14s ease, border-color .18s ease, background .18s ease, color .18s ease;
}
.word-chip:hover { transform: translateY(-2px); border-color: #BFEBCB; }
.word-chip:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.word-chip::after {
  content: "";
  position: absolute;
  left: 48px;
  right: 12px;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green), var(--blue));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .22s ease;
}
.word-chip.is-done {
  color: var(--muted);
  background: linear-gradient(160deg, #EEF8F0 0%, #E3F3E8 100%);
  border-color: #BFEBCB;
}
.word-chip.is-done::after { transform: scaleX(1); }
.word-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.95), transparent 36%),
    linear-gradient(150deg, #FFFFFF, #F4EFE4);
  border: 1px solid #E9DDC6;
  box-shadow: inset 0 -7px 12px rgba(42, 34, 68, .05), 0 5px 10px -8px rgba(42, 34, 68, .34);
}
.word-icon svg {
  width: 88%;
  height: 88%;
  display: block;
  filter: drop-shadow(0 3px 3px rgba(42,34,68,.16));
}
.word-text { line-height: 1; }
.rabbit-reset { justify-content: center; width: 100%; }

/* Confetti canvas */
#confetti {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
}

/* App-wide password gate (client-side deterrence) */
.app-password-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(42, 34, 68, 0.52);
  animation: fadeIn .2s ease both;
}
.app-password-gate[hidden] { display: none; }
.app-password-gate-card {
  position: relative;
  background: #fff;
  border-radius: 28px;
  padding: 28px 28px 24px;
  text-align: center;
  max-width: 380px;
  width: 100%;
  box-shadow: 0 30px 60px -20px rgba(43, 33, 80, 0.4);
  animation: pop .3s cubic-bezier(.2, .7, .3, 1.2) both;
}
.app-password-gate-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(124, 92, 255, .08);
  color: var(--ink-soft);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.app-password-gate-close:hover {
  background: rgba(124, 92, 255, .16);
  color: var(--ink);
}
.app-password-gate-card h2 {
  font-family: var(--font-display);
  margin: 0 0 6px;
  font-size: 24px;
}
.app-password-gate-card p {
  color: var(--ink-soft);
  margin: 0 0 16px;
  font-size: 15px;
}
.app-password-gate-form {
  display: grid;
  gap: 10px;
  text-align: left;
}
.app-password-gate-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
}
.app-password-gate-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(124, 92, 255, .22);
  font: inherit;
  font-size: 16px;
  background: #fff;
}
.app-password-gate-input:focus {
  outline: 2px solid rgba(124, 92, 255, .35);
  outline-offset: 1px;
}
.app-password-gate-error {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: #c0392b;
  min-height: 1.2em;
}
.app-password-gate-submit {
  margin-top: 4px;
  padding: 12px 18px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(135deg, #7C5CFF, #4DA8FF);
  color: #fff;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.app-password-gate-submit:hover { filter: brightness(1.05); }
.app-password-gate-cancel {
  margin-top: 2px;
  padding: 10px 16px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.app-password-gate-cancel:hover {
  color: var(--ink);
  background: rgba(124, 92, 255, .08);
}
body.app-password-locked { overflow: hidden; }

/* Celebration overlay */
.celebrate {
  position: fixed; inset: 0; z-index: 6;
  background: rgba(42, 34, 68, 0.45);
  display: grid; place-items: center;
  padding: 20px;
  animation: fadeIn .2s ease both;
}
.celebrate[hidden] { display: none; }
.celebrate-card {
  background: #fff; border-radius: 28px; padding: 28px 28px 24px;
  text-align: center; max-width: 380px; width: 100%;
  box-shadow: 0 30px 60px -20px rgba(43,33,80,0.4);
  animation: pop .3s cubic-bezier(.2,.7,.3,1.2) both;
}
.celebrate-emoji { font-size: 54px; line-height: 1; }
.celebrate-card h2 { font-family: var(--font-display); margin: 8px 0 4px; font-size: 26px; }
.celebrate-card p { color: var(--ink-soft); margin: 0 0 16px; }

@keyframes fadeIn { from{opacity:0} to{opacity:1} }
@keyframes pop { from{opacity:0; transform:scale(.85)} to{opacity:1; transform:scale(1)} }

/* ---- Responsive ---- */

/* Tablet: prompt at top, cards in 3 cols. Cancel inline grid placements. */
@media (max-width: 980px) {
  .tongue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orbit { grid-template-columns: repeat(3, 1fr); }
  .prompt-card { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .card { grid-column: auto !important; grid-row: auto !important; }
  .topbar { align-items: stretch; flex-wrap: wrap; }
  .brand { flex: 1 1 auto; min-width: 0; }
  .score-pill { order: 2; margin-left: auto; }
  .task-banner { order: 3; flex: 1 0 100%; min-width: 0; border-radius: 22px; }
  .rabbit-board { grid-template-columns: 1fr; }
  .rabbit-progress { min-height: 340px; }
}

/* Phones: 2 cols, prompt compact */
@media (max-width: 620px) {
  .tongue-task { padding: 14px; border-radius: 26px; }
  .tongue-grid { grid-template-columns: 1fr; }
  .tongue-card { min-height: 0; }
  .tongue-visual { min-height: 116px; }
  .orbit { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .topbar { padding: 12px 14px; gap: 10px; }
  .score-pill { font-size: 14px; padding: 8px 14px; }
  .brand-text span { display: none; }
  .brand-text strong { font-size: 17px; }
  .task-banner { padding: 8px 10px; gap: 8px; align-items: center; }
  .task-banner strong { font-size: 14px; }
  .task-banner small { display: none; }
  .task-motor { width: 32px; height: 32px; }
  .card { min-height: 118px; padding: 10px 8px 10px; }
  .card .label { font-size: 14px; }
  .prompt-card { padding: 18px 16px; }
  .prompt-text { font-size: 14px; }
  .section-heading { flex-direction: column; gap: 10px; }
  .rabbit-task { padding: 14px; border-radius: 26px; }
  .rabbit-progress { min-height: 290px; }
  .rabbit-runner { width: 98px; }
  .word-list { grid-template-columns: 1fr; }
  .word-chip { font-size: 16px; padding: 12px; }
}



/* Multiplayer óra mód */
[hidden] { display: none !important; }
body.classroom-locked .topbar,
body.classroom-locked .stage {
  display: none;
}
body.classroom-locked .classroom-panel {
  min-height: 100vh;
  display: grid;
  align-items: center;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: clamp(18px, 4vh, 48px);
  padding-bottom: clamp(18px, 4vh, 48px);
}
body.classroom-locked .classroom-shell {
  box-shadow: 0 34px 90px rgba(42, 34, 68, .22);
}
body.student-scroll-locked {
  overscroll-behavior: none;
}
body.student-scroll-locked::after {
  content: "A tanár vezérli a feladatot";
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(42, 34, 68, .9);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 12px 26px rgba(42, 34, 68, .22);
  pointer-events: none;
}

.classroom-panel {
  position: relative;
  top: auto;
  z-index: 3;
  max-width: 1280px;
  margin: 18px auto 14px;
  padding: 0 clamp(12px, 3vw, 32px);
  pointer-events: none;
}
.classroom-shell {
  width: min(860px, 100%);
  margin: 0 auto;
  border: 1.5px solid rgba(233, 223, 200, .92);
  border-radius: 28px;
  background: rgba(255, 255, 255, .88);
  box-shadow: 0 22px 38px -24px rgba(42, 34, 68, .34);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  overflow: hidden;
  pointer-events: auto;
}
/* When in the landing/locked state, treat the shell as a polished app
   card — softer corners, layered shadows, slightly more square,
   centered on screen with a generous surrounding panel. */
body.classroom-locked .classroom-shell {
  width: min(720px, 100%);
  max-width: min(720px, 94vw);
  border-radius: 38px;
  border-color: rgba(228, 217, 255, .92);
  background:
    radial-gradient(circle at 18% 0%, rgba(255, 210, 63, .18), transparent 38%),
    radial-gradient(circle at 100% 100%, rgba(77, 168, 255, .14), transparent 42%),
    linear-gradient(180deg, #ffffff 0%, #FBF7EE 100%);
  box-shadow:
    0 36px 70px -34px rgba(42, 34, 68, .38),
    0 12px 26px -18px rgba(124, 92, 255, .22),
    inset 0 1px 0 rgba(255, 255, 255, .92);
}
body.classroom-locked .classroom-body {
  padding: clamp(18px, 2.8vw, 28px);
  gap: 16px;
  border-top: 1px solid rgba(233, 223, 200, .55);
}
body.classroom-locked .classroom-panel:not(.has-selected-role) .classroom-toggle {
  display: none;
}
body.classroom-locked .classroom-panel:not(.has-selected-role) .classroom-body {
  border-top: none;
  padding-top: clamp(10px, 2vw, 18px);
}
.classroom-toggle {
  width: 100%;
  min-height: 70px;
  border: 0;
  background:
    radial-gradient(circle at 10% 15%, rgba(255, 210, 63, .26), transparent 36%),
    linear-gradient(135deg, #fff 0%, #fff7e7 100%);
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 18px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
}
.classroom-toggle strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(20px, 2.8vw, 30px);
  line-height: 1.05;
}
.classroom-toggle small {
  display: block;
  color: var(--ink-soft);
  font-weight: 800;
  margin-top: 2px;
}
.classroom-toggle:focus-visible,
.classroom-role-btn:focus-visible,
.classroom-primary:focus-visible,
.classroom-solo-btn:focus-visible,
.classroom-actions button:focus-visible,
.classroom-input:focus-visible {
  outline: 3px solid var(--purple);
  outline-offset: 3px;
}
.classroom-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(69, 194, 107, .16);
  flex: 0 0 auto;
}
.classroom-body {
  display: grid;
  gap: 13px;
  padding: 16px;
  border-top: 1px solid rgba(233, 223, 200, .72);
}
.classroom-back-btn {
  justify-self: start;
  margin: 0 0 2px;
  padding: 8px 14px;
  border: 1.5px solid rgba(124, 92, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--purple-deep);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.classroom-back-btn:hover {
  transform: translateY(-1px);
  background: rgba(124, 92, 255, .08);
  border-color: rgba(124, 92, 255, .34);
  box-shadow: 0 8px 16px -12px rgba(124, 92, 255, .35);
}
.classroom-back-btn:focus-visible {
  outline: 3px solid rgba(124, 92, 255, .35);
  outline-offset: 2px;
}
.classroom-panel.is-collapsed .classroom-body {
  display: none;
}
.landing-copyright {
  margin: 0;
  padding: 8px 12px 12px;
  text-align: center;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .03em;
  color: rgba(58, 45, 114, .48);
  user-select: none;
}
body:not(.classroom-locked) .landing-copyright {
  display: none;
}
body:not(.classroom-locked) .classroom-panel.is-collapsed {
  margin: 10px auto 6px;
}
body:not(.classroom-locked) .classroom-panel.is-collapsed .classroom-shell {
  border-radius: 20px;
  box-shadow: 0 14px 28px -22px rgba(42, 34, 68, .28);
}
body:not(.classroom-locked) .classroom-panel.is-collapsed .classroom-toggle {
  min-height: 56px;
  padding: 12px 16px;
}
.landing-intro {
  margin: 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.28;
}
.classroom-solo-entry {
  display: grid;
  gap: 10px;
  justify-items: center;
  margin-top: 2px;
}
.classroom-panel.has-selected-role .landing-intro,
.classroom-panel.has-selected-role .classroom-solo-entry {
  display: none;
}
.classroom-solo-divider {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.classroom-solo-btn {
  width: 100%;
  min-height: 48px;
  border-radius: 18px;
  border: 1.5px solid rgba(69, 194, 107, .45);
  background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(240, 252, 244, .88));
  color: var(--green-deep);
  font-family: var(--font-display);
  font-size: clamp(16px, 2.2vw, 18px);
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 12px 22px -18px rgba(45, 160, 82, .28),
    inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.classroom-solo-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(69, 194, 107, .62);
  background: linear-gradient(135deg, rgba(69, 194, 107, .10), rgba(45, 160, 82, .08));
  box-shadow: 0 14px 20px -14px rgba(45, 160, 82, .32);
}
.classroom-solo-btn:active {
  transform: translateY(0);
}
.classroom-solo-help {
  margin: 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.35;
  max-width: 34ch;
}
.classroom-chooser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 520px) {
  .classroom-chooser { grid-template-columns: 1fr; }
}
.classroom-role-btn,
.classroom-primary,
.classroom-actions button {
  min-height: 44px;
  border-radius: 16px;
  border: 1.5px solid #E4D9FF;
  background: #fff;
  color: var(--purple-deep);
  font-family: var(--font-body);
  font-weight: 900;
  cursor: pointer;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.classroom-role-btn:hover,
.classroom-primary:hover,
.classroom-actions button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 18px -14px rgba(42, 34, 68, .34);
}
.classroom-role-btn.is-selected,
.classroom-primary {
  background: linear-gradient(135deg, var(--purple), var(--blue));
  border-color: transparent;
  color: #fff;
}

/* --- Role choice buttons (teacher / student) with icons --- */
.classroom-role-btn--teacher,
.classroom-role-btn--student {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 16px 16px;
  min-height: 92px;
  text-align: left;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(255, 250, 239, .86));
  box-shadow:
    0 16px 30px -24px rgba(42, 34, 68, .32),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}
.classroom-role-btn:active {
  transform: translateY(0);
}
.classroom-role-btn--teacher { border-color: rgba(124, 92, 255, .35); }
.classroom-role-btn--teacher:hover {
  background: linear-gradient(135deg, rgba(124, 92, 255, .08), rgba(77, 168, 255, .08));
  border-color: rgba(124, 92, 255, .55);
}
.classroom-role-btn--student { border-color: rgba(255, 122, 89, .35); }
.classroom-role-btn--student:hover {
  background: linear-gradient(135deg, rgba(255, 179, 71, .12), rgba(255, 122, 89, .10));
  border-color: rgba(255, 122, 89, .55);
}
.classroom-role-btn .role-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: inline-grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(245, 247, 255, .8);
  box-shadow: inset 0 0 0 1px rgba(228, 217, 255, .8);
}
.classroom-role-btn--student .role-icon {
  background: rgba(255, 245, 230, .9);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 150, .65);
}
.classroom-role-btn .role-icon svg {
  width: 40px;
  height: 40px;
  display: block;
}
.classroom-role-btn .role-text {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.classroom-role-btn .role-text strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--ink);
}
.classroom-role-btn .role-text small {
  display: block;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 12px;
  margin-top: 2px;
  white-space: normal;
}
.classroom-role-btn.is-selected .role-text strong,
.classroom-role-btn.is-selected .role-text small {
  color: #fff;
}
.classroom-role-btn.is-selected .role-icon {
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}
.classroom-setup {
  display: grid;
  gap: 10px;
}
.classroom-task-picker {
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 18px;
  background: rgba(245, 247, 255, .86);
  border: 1px solid rgba(228, 217, 255, .8);
}
.classroom-picker-title {
  color: var(--ink);
  font-size: 13px;
  font-weight: 950;
}
.classroom-task-option {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 14px;
  background: #fff;
  color: var(--ink-soft);
  border: 1px solid rgba(233, 223, 200, .86);
  font-weight: 900;
  cursor: pointer;
}
.classroom-task-option input {
  width: 18px;
  height: 18px;
  accent-color: var(--purple);
}
.classroom-help,
.classroom-error {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 800;
  line-height: 1.35;
}
.classroom-error {
  color: var(--red-deep);
  background: #FFEAEA;
  border: 1px solid #FFB3B3;
  padding: 9px 11px;
  border-radius: 14px;
}
.classroom-label {
  display: grid;
  gap: 5px;
  color: var(--ink);
  font-weight: 900;
  font-size: 13px;
}
.classroom-label span {
  color: var(--muted);
  font-weight: 800;
}
.classroom-input {
  min-height: 44px;
  border-radius: 15px;
  border: 1.5px solid #E8DFC8;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 16px;
}
.classroom-live {
  display: grid;
  gap: 11px;
}
.classroom-room-card {
  display: grid;
  gap: 2px;
  padding: 12px;
  border-radius: 18px;
  background: #FFF7DC;
  border: 1px solid #F2DFAF;
}
.classroom-kicker {
  color: #805313;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.classroom-code {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1;
  letter-spacing: .11em;
  color: var(--ink);
}
.classroom-room-card small {
  color: var(--ink-soft);
  font-weight: 800;
}
.classroom-actions {
  display: grid;
  gap: 8px;
}
.classroom-actions button {
  color: var(--green-deep);
  border-color: #BFEBCB;
  background: linear-gradient(160deg, #FFFFFF 0%, #EEF8F0 100%);
}
.classroom-sync-toggle {
  min-height: 34px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .78);
  border: 1px solid rgba(233, 223, 200, .9);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.15;
  font-weight: 900;
  cursor: pointer;
}
.classroom-sync-toggle input {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  accent-color: var(--purple);
}
.classroom-floating-controls {
  position: fixed;
  top: max(88px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 80;
  display: grid;
  gap: 6px;
  width: min(174px, calc(100vw - 20px));
  padding: 7px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(233, 223, 200, .88);
  box-shadow: 0 16px 38px -20px rgba(42, 34, 68, .42);
  backdrop-filter: blur(16px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  pointer-events: auto;
}
.classroom-floating-title {
  display: block;
  padding: 0 4px 1px;
  color: var(--ink-soft);
  font-size: 9px;
  line-height: 1.1;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.classroom-floating-controls .classroom-sync-toggle {
  min-height: 30px;
  background: rgba(245, 247, 255, .86);
}
.classroom-screen-state {
  padding: 8px 10px;
  border-radius: 13px;
  background: rgba(232, 251, 238, .8);
  color: var(--green-deep);
  border: 1px solid #BFEBCB;
  font-size: 13px;
  font-weight: 900;
}
.classroom-events {
  display: grid;
  gap: 6px;
  max-height: 148px;
  overflow: auto;
}
.classroom-event {
  padding: 8px 10px;
  border-radius: 13px;
  background: rgba(245, 247, 255, .86);
  color: var(--ink-soft);
  border: 1px solid rgba(228, 217, 255, .72);
  font-size: 13px;
  font-weight: 800;
}
.classroom-focus-ring {
  animation: classroomFocus 1.5s ease both;
}
@keyframes classroomFocus {
  0%, 100% { box-shadow: none; }
  18%, 72% { box-shadow: 0 0 0 7px rgba(124, 92, 255, .18), 0 0 0 13px rgba(77, 168, 255, .10); }
}
.teacher-cursor {
  position: fixed;
  left: 50vw;
  top: 50vh;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  pointer-events: none;
  opacity: 0;
  transform: translate(12px, 12px);
  transition: opacity .12s ease;
}
.teacher-cursor.is-visible {
  opacity: 1;
}
.teacher-cursor-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--purple);
  border: 3px solid #fff;
  box-shadow: 0 8px 18px -8px rgba(42, 34, 68, .42);
}
.teacher-cursor.is-student .teacher-cursor-dot {
  background: var(--green);
}
.teacher-cursor-label {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(42, 34, 68, .9);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}
.teacher-cursor.is-student .teacher-cursor-label {
  background: rgba(45, 130, 78, .92);
}
.teacher-cursor-pulse {
  position: fixed;
  width: 18px;
  height: 18px;
  z-index: 19;
  border-radius: 50%;
  border: 3px solid var(--purple);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.6);
}
.teacher-cursor-pulse.is-student {
  border-color: var(--green);
}
.teacher-cursor-pulse.is-active {
  animation: cursorPulse .62s ease-out both;
}
@keyframes cursorPulse {
  0% { opacity: .9; transform: translate(-50%, -50%) scale(.6); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); }
}
@media (max-width: 980px) {
  .classroom-panel { top: auto; }
  .classroom-shell { margin-left: 0; width: 100%; }
  .classroom-floating-controls {
    top: auto;
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    width: min(166px, calc(100vw - 16px));
  }
}
@media (max-width: 620px) {
  .classroom-panel { position: relative; top: auto; margin-top: 10px; }
  .classroom-shell { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ===== Logopédiapp logo: landing screen + sticky topbar ===== */

/* sr-only helper used by mini topbar logo */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* --- Landing logo block sits inside the classroom-shell, above the role chooser --- */
.landing-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(300px, 42vw, 420px);
  padding: clamp(22px, 3.6vw, 36px) 16px clamp(14px, 2.2vw, 22px);
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 210, 63, .18), transparent 26%),
    radial-gradient(circle at 86% 78%, rgba(77, 168, 255, .16), transparent 32%),
    radial-gradient(circle at 50% 100%, rgba(124, 92, 255, .08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #FBF7EE 100%);
  border-bottom: 1px solid rgba(233, 223, 200, .55);
}
.classroom-panel.has-selected-role .landing-logo,
body:not(.classroom-locked) .landing-logo {
  display: none;
}
.landing-logo-stage {
  position: relative;
  width: clamp(330px, 54vw, 470px);
  aspect-ratio: 1 / 1;
  isolation: isolate;
}
.landing-logo-stage::before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 38px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 248, 232, .76));
  box-shadow:
    0 28px 58px -34px rgba(42, 34, 68, .42),
    inset 0 1px 0 rgba(255, 255, 255, .96);
  z-index: -2;
}
.landing-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  animation: landing-logo-rise 720ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes landing-logo-rise {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Separate overlay loading bar placed where the embedded bar used to be
   (cleared in the PNG). Matches the bar's slot in stack_a source logo:
   x ≈ 21.1% .. 79.3%, y ≈ 66.4% .. 69.1% (height ≈ 2.7%).
   The logo image itself is static. */
.landing-logo-progress {
  position: absolute;
  left: 21.1%;
  right: 20.7%;
  top: 66.4%;
  height: 2.7%;
  border-radius: 999px;
  overflow: hidden;
  z-index: 2;
}
.landing-logo-progress-track {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #E9E4FC;
  box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .18);
}
.landing-logo-progress-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg,
    #6B45F0 0%,
    #7C5CFF 30%,
    #8FB8FF 60%,
    #9BE6C8 88%,
    #B4F0D6 100%);
  box-shadow: 0 0 10px rgba(124, 92, 255, .35);
  animation: landing-logo-fill 2200ms cubic-bezier(.22,.61,.36,1) 280ms forwards;
}
.landing-logo-progress::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg);
  animation: landing-logo-shimmer 2200ms cubic-bezier(.22,.61,.36,1) 280ms 1;
  pointer-events: none;
  z-index: 3;
}
@keyframes landing-logo-fill {
  0%   { width: 0%; }
  60%  { width: 70%; }
  100% { width: 100%; }
}
@keyframes landing-logo-shimmer {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Smaller mobile sizing */
@media (max-width: 640px) {
  body.classroom-locked .classroom-shell { border-radius: 30px; }
  .landing-logo {
    min-height: clamp(300px, 76vw, 390px);
    padding: 20px 12px 14px;
  }
  .landing-logo-stage { width: clamp(260px, 76vw, 340px); }
  .classroom-role-btn--teacher,
  .classroom-role-btn--student { min-height: 82px; }
  .classroom-role-btn .role-icon { width: 50px; height: 50px; }
}

/* Reduced motion: hold the bar at 100% rather than animating */
@media (prefers-reduced-motion: reduce) {
  .landing-logo-img { animation: none; }
  .landing-logo-progress-fill { animation: none; width: 100%; }
  .landing-logo-progress::after { display: none; }
}

/* --- Sticky topbar mini logo (after the user enters tasks) ---
   Now uses the horizontal one-line lockup PNG, so the height is
   tuned tighter and width is allowed to expand naturally. */
.brand--mini-logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 4px 8px;
  border-radius: 14px;
  transition: transform 180ms ease, background-color 180ms ease;
  flex: 0 0 auto;
}
.brand--mini-logo:hover { background: rgba(124, 92, 255, .08); transform: translateY(-1px); }
.brand-mini-logo {
  display: block;
  height: 34px;
  width: auto;
  max-height: 38px;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 640px) {
  .brand-mini-logo { height: 28px; }
}
@media (max-width: 420px) {
  .brand-mini-logo { height: 24px; }
}

/* ============================================================
   4. feladat: R hang helye a szóban (4×3 rács kártyák karikákkal)
   ============================================================ */
.task-4 {
  background: #fff;
  border-radius: 32px;
  padding: 16px clamp(14px, 1.8vw, 20px) 18px;
  box-shadow: 0 30px 60px -28px rgba(43, 33, 80, 0.22);
  border: 1px solid rgba(124, 92, 255, 0.10);
  margin-top: 18px;
}
.task-4 .section-heading h2 { font-size: clamp(18px, 2vw, 22px); }
/* Motor prompt-card a 4. feladat tetején — kompakt */
.prompt-card-4 {
  grid-column: auto !important;
  grid-row: auto !important;
  max-width: 380px;
  margin: 10px auto 6px;
  padding: 8px 16px 10px;
  flex-direction: row;
  gap: 12px;
  align-items: center;
  text-align: left;
}
.prompt-card-4 .prompt-motor {
  width: clamp(56px, 7vw, 72px);
  aspect-ratio: 1/1;
  margin: 0;
  flex-shrink: 0;
}
.prompt-card-4 .prompt-title {
  font-size: clamp(15px, 1.6vw, 18px);
  margin: 0;
  white-space: nowrap;
}
@media (max-width: 620px) {
  .prompt-card-4 { max-width: 100%; padding: 8px 12px; gap: 10px; }
  .prompt-card-4 .prompt-motor { width: 54px; }
  .prompt-card-4 .prompt-title { font-size: 15px; }
}
.cards-4-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 12px);
  margin-top: 10px;
}
.card-4 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6FF 100%);
  border: 2px solid #EAE2FF;
  border-radius: 14px;
  padding: 6px 6px 8px;
  box-shadow: 0 14px 22px -16px rgba(43, 33, 80, 0.18);
}
.card-4-illu {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.card-4-illu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}
.card-4-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.2px;
}
.card-4-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  align-items: center;
  margin-top: 2px;
}
.r-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2.5px solid #2B2150;
  background: #fff;
  padding: 0;
  cursor: pointer;
  transition: background-color .18s ease, transform .15s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.r-dot:hover { transform: scale(1.08); }
.r-dot:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.r-dot.is-correct {
  background: #45C26B;
  border-color: #2EA152;
  box-shadow: 0 6px 14px -6px rgba(69, 194, 107, 0.55);
}
.r-dot.is-wrong {
  animation: dotShake .42s ease;
  background: #FF6B6B;
  border-color: #D24A4A;
}
@keyframes dotShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* ---- Responsive ---- */

/* Tablet: prompt at top, cards in 3 cols. Cancel inline grid placements. */
@media (max-width: 980px) {
  .tongue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orbit { grid-template-columns: repeat(3, 1fr); }
  .prompt-card { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .card { grid-column: auto !important; grid-row: auto !important; }
  .topbar { align-items: stretch; flex-wrap: wrap; }
  .brand { flex: 1 1 auto; }
  .task-banner { order: 3; flex: 1 0 100%; min-width: 0; border-radius: 22px; }
  .rabbit-board { grid-template-columns: 1fr; }
  .rabbit-progress { min-height: 340px; }
  .cards-4-grid { grid-template-columns: repeat(6, 1fr); }
}

/* Phones: 2 cols, prompt compact */
@media (max-width: 620px) {
  .tongue-task { padding: 14px; border-radius: 26px; }
  .tongue-grid { grid-template-columns: 1fr; }
  .tongue-card { min-height: 0; }
  .tongue-visual { min-height: 116px; }
  .orbit { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .topbar { padding: 12px 14px; gap: 10px; }
  .score-pill { font-size: 14px; padding: 8px 14px; }
  .brand-text span { display: none; }
  .brand-text strong { font-size: 17px; }
  .task-banner { padding: 8px 10px; gap: 8px; align-items: center; }
  .task-banner strong { font-size: 14px; }
  .task-banner small { display: none; }
  .task-motor { width: 32px; height: 32px; }
  .card { min-height: 118px; padding: 10px 8px 10px; }
  .card .label { font-size: 14px; }
  .prompt-card { padding: 18px 16px; }
  .prompt-text { font-size: 14px; }
  .section-heading { flex-direction: column; gap: 10px; }
  .rabbit-task { padding: 14px; border-radius: 26px; }
  .rabbit-progress { min-height: 290px; }
  .rabbit-runner { width: 98px; }
  .word-list { grid-template-columns: 1fr; }
  .word-chip { font-size: 16px; padding: 12px; }
  .task-4 { padding: 12px; border-radius: 24px; }
  .cards-4-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .card-4-label { font-size: 11px; }
  .card-4 { padding: 6px 6px 6px; border-radius: 12px; }
  .card-4-illu { border-radius: 8px; }
  .r-dot { width: 24px; height: 24px; border-width: 2px; }
}

/* ============================================================
   4.b feladat: vonatos R-hang játék (drag & drop)
   ============================================================ */
.task-4b {
  background: #fff;
  border-radius: 32px;
  padding: 22px clamp(16px, 2.2vw, 26px) 26px;
  box-shadow: 0 30px 60px -28px rgba(43, 33, 80, 0.22);
  border: 1px solid rgba(124, 92, 255, 0.10);
  margin-top: 18px;
}
.prompt-card-4b { margin: 6px auto 4px; max-width: 380px; padding: 8px 16px; }
.prompt-card-4b .prompt-motor { width: clamp(56px, 7vw, 72px); }
.prompt-card-4b .prompt-title { font-size: clamp(15px, 1.6vw, 18px); }

/* 4.b szakasz kompaktabb section-heading és padding */
.task-4b { padding: 16px 18px 18px; }
.task-4b .section-heading { margin-bottom: 6px; gap: 12px; }
.task-4b .section-heading h2 { font-size: clamp(18px, 1.9vw, 22px); margin: 0; }
.task-4b .section-heading p { font-size: 13px; line-height: 1.4; margin: 4px 0 0; }

/* Kép kompaktabb arány */
.card-4b-illu { aspect-ratio: 5 / 4; }

/* Vonat — mozdony + 3 vagon vizuális sorban */
.train-4b {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: clamp(4px, 0.9vw, 10px);
  align-items: end;
  padding: 10px clamp(4px, 1vw, 12px) 4px;
  margin-top: 6px;
  background: linear-gradient(180deg, #F7F4FF 0%, #ECE6FF 100%);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
}
.train-4b::after {
  /* sín */
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 14px;
  height: 6px;
  background: repeating-linear-gradient(90deg, #6B4DFF 0 14px, transparent 14px 24px),
              linear-gradient(180deg, #B7A8FF, #8E7BFF);
  border-radius: 3px;
  opacity: 0.55;
}
.train-piece {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 4px;
}
.train-svg {
  width: 100%;
  height: auto;
  max-height: 120px;
  display: block;
  filter: drop-shadow(0 6px 8px rgba(43,33,80,0.18));
}
.train-piece-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: #4B3A8E;
  margin-top: 4px;
  text-align: center;
  letter-spacing: 0.2px;
}
.wagon-drop {
  position: absolute;
  left: 8%; right: 8%;
  top: 18%;
  bottom: 22%;
  border-radius: 14px;
  background: transparent;
  border: 2px dashed transparent;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  align-content: flex-start;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.wagon-drop.is-over {
  background: rgba(124, 92, 255, 0.18);
  border-color: #7C5CFF;
  border-style: solid;
  transform: scale(1.02);
}
.wagon-drop.is-correct-flash {
  background: rgba(69, 194, 107, 0.30);
  border-color: #2BA84A;
  border-style: solid;
  animation: pop 0.42s ease;
}
.wagon-drop.is-wrong-flash {
  background: rgba(255, 110, 110, 0.30);
  border-color: #E54B4B;
  border-style: solid;
  animation: shake 0.42s cubic-bezier(.36,.07,.19,.97);
}
.wagon-mini {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(43,33,80,0.18);
  animation: pop 0.4s ease;
}
.wagon-mini img {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none;
}

/* Tárló: 12 kép 6x2 rácsban (kompaktabb, hogy minden elférjen) */
.cards-4b-tray {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(6px, 0.7vw, 10px);
  margin-top: 8px;
}
.card-4b {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6FF 100%);
  border: 1px solid rgba(124, 92, 255, 0.16);
  border-radius: 14px;
  padding: 6px 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: 0 8px 16px -12px rgba(43,33,80,0.32);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 200ms ease;
}
.card-4b:hover { transform: translateY(-2px); box-shadow: 0 18px 28px -16px rgba(43,33,80,0.40); }
.card-4b:focus-visible {
  outline: 3px solid #7C5CFF;
  outline-offset: 3px;
}
.card-4b.is-dragging {
  opacity: 0.25;
  cursor: grabbing;
}
.card-4b.is-done {
  opacity: 0.32;
  filter: grayscale(0.4);
  pointer-events: none;
  cursor: default;
}
.card-4b.shake { animation: shake 0.42s cubic-bezier(.36,.07,.19,.97); }
.card-4b-illu {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.card-4b-illu img {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none;
}
.card-4b-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink);
  margin-top: 0;
  line-height: 1.2;
}

/* Drag-ghost: a tárlóból elemelt elem követi a pointert */
.drag-ghost {
  position: fixed !important;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.95;
  transform: rotate(-3deg) scale(1.04);
  box-shadow: 0 24px 40px -16px rgba(43,33,80,0.50);
  transition: none !important;
}
.drag-ghost .card-4b-illu { background: #fff; }

@media (max-width: 980px) {
  .train-4b { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .train-svg { max-height: 100px; }
  .cards-4b-tray { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 620px) {
  .task-4b { padding: 14px; border-radius: 26px; }
  .train-4b {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 10px 16px;
  }
  .train-4b::after { display: none; }
  .train-piece { padding-bottom: 0; }
  .train-svg { max-height: 100px; }
  .wagon-drop { top: 22%; bottom: 26%; left: 12%; right: 12%; min-height: 50px; }
  .cards-4b-tray { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .card-4b-label { font-size: 12px; }
  .wagon-mini { width: 24px; height: 24px; }
  .train-piece-label { font-size: 12px; }
}

/* ============================================================
 * 5. feladat — R és L hangok megkülönböztetése (vonalkötős)
 * ============================================================ */
.task-5 {
  background: #fff;
  border-radius: 32px;
  padding: 16px clamp(14px, 1.8vw, 20px) 22px;
  box-shadow: 0 30px 60px -28px rgba(43, 33, 80, 0.22);
  border: 1px solid rgba(124, 92, 255, 0.10);
  margin-top: 18px;
}
.task-5 .section-heading h2 { font-size: clamp(18px, 2vw, 22px); }
.task-5 .section-heading p { font-size: 13px; line-height: 1.45; margin: 4px 0 0; }

.task-5-board {
  position: relative;
  margin-top: 12px;
  display: grid;
  grid-template-rows: auto auto auto;
  row-gap: clamp(14px, 2vw, 24px);
  padding: 4px;
  /* a vonal-SVG fölé kerül, bár pointer-events: none */
  isolation: isolate;
}
.task-5-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5; /* a képek előtt */
  overflow: visible;
}
.task-5-lines path,
.task-5-lines line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.task-5-lines .line--r,
.task-5-lines .line--l { stroke: #2ECC71; stroke-width: 5; }
.task-5-lines .line--wrong { stroke: #E74C3C; stroke-width: 5; opacity: 0.85; animation: flash-wrong 0.5s ease-out forwards; }
@keyframes flash-wrong {
  0%   { opacity: 0.9; }
  60%  { opacity: 0.9; }
  100% { opacity: 0; }
}
.task-5-lines .line--active { stroke-dasharray: 6 6; animation: dash-move 0.8s linear infinite; }
@keyframes dash-move { to { stroke-dashoffset: -24; } }

/* Sorok: 6 oszlopos rács, kompakt kártyák */
.cards-5-row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 1vw, 12px);
}

/* Hívóképek középen */
.prompts-5 {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(24px, 6vw, 80px);
  padding: 4px 0;
}
.prompt-5 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 18px;
  padding: 10px 14px 8px;
  user-select: none;
  touch-action: none;
  cursor: grab;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.prompt-5:active,
.prompt-5.is-dragging { cursor: grabbing; transform: scale(1.03); }
.prompt-5--r { border: 3px solid #E74C3C; box-shadow: 0 12px 24px -16px rgba(231, 76, 60, 0.45); }
.prompt-5--l { border: 3px solid #2E86DE; box-shadow: 0 12px 24px -16px rgba(46, 134, 222, 0.45); }
.prompt-5-illu {
  width: clamp(96px, 11vw, 130px);
  aspect-ratio: 1/1;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  place-items: center;
}
.prompt-5-illu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.prompt-5-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1;
  letter-spacing: 0.5px;
}
.prompt-5--r .prompt-5-label { color: #E74C3C; }
.prompt-5--l .prompt-5-label { color: #2E86DE; }

/* Kis kártyák — hasonló a 4.feladat kompakt méretéhez, de magasabb (kép ne vágjék le) */
.card-5 {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6FF 100%);
  border: 2px solid #EAE2FF;
  border-radius: 14px;
  padding: 8px 6px 10px;
  box-shadow: 0 14px 22px -16px rgba(43, 33, 80, 0.18);
  transition: transform 0.18s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-5:hover { transform: translateY(-2px); }
.card-5.is-matched-r,
.card-5.is-matched-l { border-color: #2ECC71; box-shadow: 0 18px 28px -16px rgba(46, 204, 113, 0.40); }
.card-5.is-correct-pop { animation: correct-pop 0.5s ease-out; }
@keyframes correct-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.10); box-shadow: 0 0 0 8px rgba(70, 200, 120, 0.18); }
  100% { transform: scale(1); }
}
.card-5.shake { animation: shake 0.42s cubic-bezier(.36,.07,.19,.97); }
.card-5.is-wrong-flash { border-color: #E74C3C; }
.card-5-illu {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 4px;
}
.card-5-illu img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.card-5-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--ink);
  text-align: center;
  letter-spacing: 0.2px;
}

/* Responsive */
@media (max-width: 980px) {
  .cards-5-row { grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 720px) {
  .cards-5-row { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .prompts-5 { gap: 24px; }
  .prompt-5-illu { width: 88px; }
  .prompt-5-label { font-size: 22px; }
  .task-5 { padding: 14px; border-radius: 26px; }
  .card-5-label { font-size: 12px; }
  .card-5 { padding: 8px 6px 10px; border-radius: 12px; }
  .card-5-illu { border-radius: 8px; padding: 3px; }
}

/* ============================================================
 * 5.b feladat — R és L házak (drag-and-drop)
 * ============================================================ */
.task-5b {
  background: #fff;
  border-radius: 28px;
  padding: 10px clamp(12px, 1.4vw, 18px) 14px;
  box-shadow: 0 30px 60px -28px rgba(43, 33, 80, 0.22);
  border: 1px solid rgba(124, 92, 255, 0.10);
  margin-top: 14px;
}
.task-5b .section-heading { margin-bottom: 4px; }
.task-5b .section-heading h2 { font-size: clamp(16px, 1.7vw, 20px); margin: 0; }
.task-5b .section-heading p { font-size: 12px; line-height: 1.35; margin: 2px 0 0; }

.houses-5b {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  margin: 6px auto 8px;
  max-width: 760px;
  padding: 6px clamp(6px, 0.8vw, 12px) 8px;
  background: linear-gradient(180deg, #F7F4FF 0%, #ECE6FF 100%);
  border-radius: 18px;
}
.haz-5b {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2px 4px 4px;
}
.haz-5b-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(43,33,80,0.16));
}
.haz-5b-figure {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(36px, 4vw, 48px);
  pointer-events: none;
  z-index: 3;
}
.haz-5b-figure img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(43,33,80,0.35));
}
.haz-5b-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  color: #4B3A8E;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.haz-5b--r .haz-5b-label { color: #B33232; }
.haz-5b--l .haz-5b-label { color: #1E4A8A; }

.haz-5b-drop {
  margin-top: 4px;
  width: 100%;
  min-height: 56px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.65);
  border: 2px dashed rgba(124, 92, 255, 0.25);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px;
  align-content: flex-start;
  justify-content: center;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.haz-5b--r .haz-5b-drop { border-color: rgba(230, 69, 69, 0.35); }
.haz-5b--l .haz-5b-drop { border-color: rgba(74, 143, 230, 0.35); }
.haz-5b-drop.is-over {
  background: rgba(124, 92, 255, 0.18);
  border-color: #7C5CFF;
  border-style: solid;
  transform: scale(1.02);
}
.haz-5b-drop.is-correct-flash {
  background: rgba(69, 194, 107, 0.30);
  border-color: #2BA84A;
  border-style: solid;
  animation: pop 0.42s ease;
}
.haz-5b-drop.is-wrong-flash {
  background: rgba(255, 110, 110, 0.30);
  border-color: #E54B4B;
  border-style: solid;
  animation: shake 0.42s cubic-bezier(.36,.07,.19,.97);
}
.haz-mini {
  width: 28px; height: 28px;
  border-radius: 7px;
  background: #fff;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 4px rgba(43,33,80,0.18);
  animation: pop 0.4s ease;
}
.haz-mini img {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none;
}

/* Tárló: 16 kép (8x2 desktop) */
.cards-5b-tray {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: clamp(5px, 0.6vw, 8px);
  margin: 4px auto 0;
  max-width: 1100px;
}
.card-5b {
  background: linear-gradient(180deg, #FFFFFF 0%, #FAF6FF 100%);
  border: 1px solid rgba(124, 92, 255, 0.16);
  border-radius: 12px;
  padding: 4px 4px 3px;
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  box-shadow: 0 8px 16px -12px rgba(43,33,80,0.32);
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 200ms ease;
}
.card-5b:hover { transform: translateY(-2px); box-shadow: 0 18px 28px -16px rgba(43,33,80,0.40); }
.card-5b:focus-visible {
  outline: 3px solid #7C5CFF;
  outline-offset: 3px;
}
.card-5b.is-dragging {
  opacity: 0.25;
  cursor: grabbing;
}
.card-5b.is-done {
  opacity: 0.32;
  filter: grayscale(0.4);
  pointer-events: none;
  cursor: default;
}
.card-5b.shake { animation: shake 0.42s cubic-bezier(.36,.07,.19,.97); }
.card-5b-illu {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.card-5b-illu img {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none;
}
.card-5b-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 10.5px;
  color: var(--ink);
  margin-top: 0;
  line-height: 1.15;
  text-align: center;
}
.drag-ghost .card-5b-illu { background: #fff; }

@media (max-width: 980px) {
  .cards-5b-tray { grid-template-columns: repeat(6, 1fr); }
  .haz-5b-figure { width: 42px; }
}
@media (max-width: 620px) {
  .task-5b { padding: 6px 8px 8px; border-radius: 20px; margin-top: 8px; }
  .task-5b .section-heading h2 { font-size: 13px; }
  .task-5b .section-heading p { font-size: 10px; line-height: 1.2; }
  .houses-5b { padding: 4px 5px 5px; gap: 5px; margin: 3px auto 4px; border-radius: 12px; }
  .haz-5b { padding: 1px 2px 3px; }
  .haz-5b-svg { max-width: 110px; }
  .haz-5b-figure { width: 24px; top: 16%; }
  .haz-5b-label { font-size: 10px; margin-top: 1px; }
  .haz-5b-drop { min-height: 38px; padding: 3px; margin-top: 2px; border-radius: 9px; }
  .haz-mini { width: 20px; height: 20px; border-radius: 5px; }
  .cards-5b-tray { grid-template-columns: repeat(4, 1fr); gap: 3px; margin-top: 3px; }
  .card-5b { padding: 2px 2px 1px; border-radius: 9px; }
  .card-5b-illu { border-radius: 7px; }
  .card-5b-label { font-size: 9px; line-height: 1.05; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ============================================================
 * 6. feladat — R és J hangok megkülönböztetése (drag tokens)
 * ============================================================ */
.task-6 {
  background: #fff;
  border-radius: 28px;
  padding: 10px clamp(12px, 1.4vw, 18px) 14px;
  box-shadow: 0 30px 60px -28px rgba(43, 33, 80, 0.22);
  border: 1px solid rgba(124, 92, 255, 0.10);
  margin-top: 14px;
}
.task-6 .section-heading { margin-bottom: 4px; }
.task-6 .section-heading h2 { font-size: clamp(16px, 1.7vw, 20px); margin: 0; }
.task-6 .section-heading p { font-size: 12px; line-height: 1.35; margin: 2px 0 0; }

/* 4x3 szókártyák (drop targets) — kompakt, hogy 1 képernyőn elférjen */
.cards-6-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 0.7vw, 9px);
  margin: 6px auto 8px;
  max-width: 720px;
  padding: 7px;
  background: linear-gradient(180deg, #F7F4FF 0%, #ECE6FF 100%);
  border-radius: 16px;
}
.card-6 {
  position: relative;
  background: #fff;
  border: 1.5px solid rgba(124, 92, 255, 0.18);
  border-radius: 12px;
  padding: 4px 4px 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  box-shadow: 0 6px 12px -10px rgba(43,33,80,0.30);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.card-6.is-over {
  background: rgba(124, 92, 255, 0.16);
  border-color: #7C5CFF;
  border-style: solid;
  transform: scale(1.03);
}
.card-6.is-correct-flash {
  background: rgba(69, 194, 107, 0.28);
  border-color: #2BA84A;
  animation: pop 0.42s ease;
}
.card-6.is-wrong-flash {
  background: rgba(255, 110, 110, 0.28);
  border-color: #E54B4B;
  animation: shake 0.42s cubic-bezier(.36,.07,.19,.97);
}
.card-6.is-solved {
  background: rgba(220, 245, 230, 0.50);
  border-color: rgba(43, 168, 74, 0.40);
}
.card-6-illu {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 130px;
  border-radius: 9px;
  background: #fff;
  overflow: hidden;
  position: relative;
}
.card-6-illu img {
  width: 100%; height: 100%; object-fit: contain;
  pointer-events: none;
}
.card-6-label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.1;
  text-align: center;
  margin-top: 1px;
}
/* Megoldás jel (kis hívókép a szókártyán bal alsó sarokban) */
.card-6-marker {
  position: absolute;
  left: 3px;
  bottom: 3px;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid rgba(43, 168, 74, 0.40);
  box-shadow: 0 2px 4px rgba(43,33,80,0.18);
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  animation: pop 0.4s ease;
  z-index: 2;
}
.card-6-marker img {
  width: 100%; height: 100%; object-fit: contain;
}

/* Hívókép tárló (12 dragable: 6 motor + 6 jajgató) */
.tokens-6-tray {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(4px, 0.5vw, 7px);
  margin: 4px auto 0;
  max-width: 640px;
  padding: 5px;
  background: linear-gradient(180deg, #FFF8EC 0%, #FFEFD5 100%);
  border-radius: 14px;
}
.token-6 {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  background: #fff;
  border: 1.5px solid rgba(124, 92, 255, 0.18);
  box-shadow: 0 6px 12px -8px rgba(43,33,80,0.30);
  cursor: grab;
  touch-action: none;
  user-select: none;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 200ms ease;
}
.token-6:hover { transform: translateY(-2px); box-shadow: 0 12px 20px -10px rgba(43,33,80,0.40); }
.token-6:focus-visible {
  outline: 3px solid #7C5CFF;
  outline-offset: 3px;
}
.token-6.is-dragging {
  opacity: 0.25;
  cursor: grabbing;
}
.token-6.is-done {
  opacity: 0.20;
  filter: grayscale(0.6);
  pointer-events: none;
  cursor: default;
}
.token-6.shake { animation: shake 0.42s cubic-bezier(.36,.07,.19,.97); }
.token-6--r { background: linear-gradient(180deg, #FFFFFF 0%, #FFEFEF 100%); }
.token-6--j { background: linear-gradient(180deg, #FFFFFF 0%, #FFF7E2 100%); }
.token-6 img {
  width: 78%; height: 78%; object-fit: contain;
  pointer-events: none;
}
.drag-ghost.token-6 { background: #fff; }

@media (max-width: 980px) {
  .cards-6-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 6px; max-width: 100%; }
  .tokens-6-tray { grid-template-columns: repeat(12, 1fr); gap: 4px; max-width: 100%; }
  .card-6-illu { max-height: 110px; }
  .card-6-label { font-size: 11px; }
}
@media (max-width: 620px) {
  .task-6 { padding: 6px 8px 8px; border-radius: 20px; margin-top: 8px; }
  .task-6 .section-heading h2 { font-size: 13px; }
  .task-6 .section-heading p { font-size: 10px; line-height: 1.2; }
  .cards-6-grid { grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 6px; margin: 5px auto 6px; border-radius: 14px; }
  .card-6 { padding: 3px 3px 2px; border-radius: 10px; }
  .card-6-label { font-size: 9.5px; line-height: 1.1; }
  .card-6-marker { width: 20px; height: 20px; left: 3px; bottom: 3px; border-radius: 6px; }
  .tokens-6-tray { grid-template-columns: repeat(6, 1fr); gap: 3px; padding: 4px; border-radius: 12px; }
  .token-6 { border-radius: 9px; }
}

/* ============================================================
 * 7. feladat — Hívóképek (R, J, L) kattintásra felvillan
 * ============================================================ */
.task-7 {
  background: #fff;
  border-radius: 28px;
  padding: 14px clamp(14px, 1.6vw, 22px) 18px;
  box-shadow: 0 30px 60px -28px rgba(43, 33, 80, 0.22);
  border: 1px solid rgba(124, 92, 255, 0.10);
  margin-top: 14px;
}
.task-7 .section-heading { margin-bottom: 10px; }
.task-7 .section-heading h2 { font-size: clamp(16px, 1.7vw, 20px); margin: 0; }
.task-7 .section-heading p { font-size: 12.5px; line-height: 1.35; margin: 2px 0 0; }

.prompts-7 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.4vw, 18px);
  margin: 4px auto 2px;
  max-width: 720px;
  padding: 10px;
  background: linear-gradient(180deg, #FBF8FF 0%, #F1ECFF 100%);
  border-radius: 18px;
  /* alap képméret — a 3-oszlopos (7.c) változathoz: kb. a viewport-magasság 38%-a */
  --prompt-img-size: min(38vh, 200px);
}
.prompts-7--one {
  grid-template-columns: minmax(220px, 360px);
  max-width: 380px;
  justify-content: center;
  /* 1 gomb — nagyobb kép, a viewport-magasság ~50%-a */
  --prompt-img-size: min(50vh, 320px);
}
.prompts-7--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 560px;
  /* 2 gomb — közepes méret, a viewport-magasság ~42%-a */
  --prompt-img-size: min(42vh, 240px);
}
.prompt-7 {
  position: relative;
  background: #fff;
  border: 2.5px solid rgba(124, 92, 255, 0.18);
  border-radius: 16px;
  padding: 8px 8px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 10px 22px -14px rgba(43, 33, 80, 0.32);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
  font: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.prompt-7:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 30px -14px rgba(43, 33, 80, 0.40);
}
.prompt-7:focus-visible {
  outline: 3px solid #7C5CFF;
  outline-offset: 3px;
}
.prompt-7:active { transform: translateY(-1px) scale(0.98); }
.prompt-7 img {
  width: 100%;
  max-width: 100%;
  height: var(--prompt-img-size, 140px);
  object-fit: contain;
  pointer-events: none;
}
.prompt-7-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1;
}
/* Hang-specifikus háttér/szín */
.prompt-7--r { background: linear-gradient(180deg, #FFFFFF 0%, #FFEFEF 100%); }
.prompt-7--r .prompt-7-label { color: #E54B4B; }
.prompt-7--j { background: linear-gradient(180deg, #FFFFFF 0%, #FFF7E2 100%); }
.prompt-7--j .prompt-7-label { color: #D69500; }
.prompt-7--l { background: linear-gradient(180deg, #FFFFFF 0%, #E8F1FF 100%); }
.prompt-7--l .prompt-7-label { color: #2563D9; }

/* Villogás animáció kattintásra - 2 fehér pulzus */
@keyframes flash-7 {
  0%,  50%, 100% { transform: scale(1);    box-shadow: 0 10px 22px -14px rgba(43,33,80,0.32), 0 0 0 0 rgba(255,255,255,0); background-color: #FFFFFF; }
  15%, 65%       { transform: scale(1.08); box-shadow: 0 18px 32px -10px rgba(43,33,80,0.40), 0 0 0 14px rgba(255,255,255,1); background-color: #FFFFFF; }
}
.prompt-7.is-flash {
  animation: flash-7 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.prompt-7--r.is-flash { border-color: #E54B4B; }
.prompt-7--j.is-flash { border-color: #D69500; }
.prompt-7--l.is-flash { border-color: #2563D9; }

@media (max-width: 980px) {
  .prompts-7 { gap: 8px; padding: 8px; max-width: 100%; }
  .prompt-7 { border-radius: 14px; padding: 6px 4px 6px; }
}
@media (max-width: 620px) {
  .task-7 { padding: 10px 10px 12px; border-radius: 20px; margin-top: 10px; }
  .task-7 .section-heading h2 { font-size: 14px; }
  .task-7 .section-heading p { font-size: 11px; line-height: 1.25; }
  .prompts-7 { gap: 6px; padding: 6px; border-radius: 14px; --prompt-img-size: min(28vh, 140px); }
  .prompts-7--one { --prompt-img-size: min(42vh, 280px); max-width: 280px; }
  .prompts-7--two { --prompt-img-size: min(34vh, 200px); }
  .prompt-7 { border-radius: 12px; padding: 5px 3px 5px; gap: 2px; border-width: 2px; }
  .prompt-7-label { font-size: 18px; }
}