/* Lesson 03 — 12+ visual skin. Keeps lesson content, changes how it is perceived. */
.lesson-red {
  --kid-yellow: #f3efe7;
  --kid-red: #ff3b2a;
  --kid-cyan: #9b7cff;
  --kid-paper: #f6f1e8;
  --kid-ink: #090b0f;
}

/* Less "TV title card", more living workshop. */
.lesson-red .scene-copy,
.lesson-red .scene-copy h2,
.lesson-red .plan-question,
.lesson-red .magic-type-card strong,
.lesson-red .magic-answer-grid strong,
.lesson-red .magic-checks strong,
.lesson-red .magic-steps strong,
.lesson-red .magic-label-row span,
.lesson-red .before-after-labels span,
.lesson-red .shot-answer-labels span,
.lesson-red .shot-word-bank span {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.lesson-red .scene-copy h2 {
  max-width: 15ch;
  font-weight: 900;
  letter-spacing: -.035em;
  text-transform: none;
  text-wrap: balance;
}

.lesson-red .scene-copy > p:not(.eyebrow) {
  max-width: 34ch;
  font-size: clamp(18px, 1.7vw, 25px);
  line-height: 1.34;
  color: #e7ebef;
}

.lesson-red .scene-copy .eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 15px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--kid-yellow);
  color: var(--kid-ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: none;
  transform: rotate(-1.5deg);
  box-shadow: 5px 5px 0 rgba(255, 59, 42,.42);
}

.lesson-red .scene-accent {
  width: fit-content;
  max-width: 30ch;
  padding: 12px 16px;
  border: 0;
  border-radius: 18px 18px 18px 5px;
  background: var(--kid-cyan);
  color: var(--kid-ink);
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: clamp(17px, 1.55vw, 23px);
  font-weight: 900;
  line-height: 1.15;
  transform: rotate(.8deg);
}

/* Promise screen: the phrase must have an object to look at. */
.lesson-red .magic-promise .magic-stage {
  min-height: 500px;
}

.lesson-red .magic-promise .magic-type-card {
  min-height: 500px;
  place-items: end start;
  padding: clamp(28px, 4vw, 58px);
  border: 0;
  border-radius: 34px 12px 34px 12px;
  background:
    linear-gradient(90deg, rgba(9,11,15,.92) 0 40%, rgba(9,11,15,.35) 70%, rgba(9,11,15,.15)),
    radial-gradient(circle at 14% 15%, rgba(155, 124, 255,.26), transparent 28%),
    #151a20;
  box-shadow: 14px 14px 0 rgba(243, 239, 231,.18);
  isolation: isolate;
}

.lesson-red .magic-promise .magic-type-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -4% -4% -4% 27%;
  background: url("./assets/camera-hero.webp") center / contain no-repeat;
  filter: saturate(1.15) contrast(1.04) drop-shadow(0 28px 34px rgba(0,0,0,.55));
  transform: rotate(-7deg) scale(1.04);
}

.lesson-red .magic-promise .magic-type-card::after {
  content: "ТЕЛЕФОНА ХВАТИТ";
  position: absolute;
  z-index: 4;
  top: 26px;
  right: 24px;
  padding: 11px 15px;
  border-radius: 12px 12px 12px 3px;
  background: var(--kid-red);
  color: white;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: clamp(14px, 1.3vw, 19px);
  font-weight: 900;
  letter-spacing: .02em;
  transform: rotate(4deg);
  box-shadow: 6px 7px 0 rgba(0,0,0,.28);
}

.lesson-red .magic-promise .magic-type-card strong {
  z-index: 3;
  max-width: 8.2ch;
  color: var(--kid-yellow);
  font-size: clamp(50px, 6vw, 92px);
  line-height: .89;
  letter-spacing: -.05em;
  text-align: left;
  text-transform: none;
  text-shadow: 0 8px 30px rgba(0,0,0,.58);
}

.lesson-red .magic-promise .magic-spark {
  z-index: 5;
  left: 28px;
  right: auto;
  top: 24px;
  color: var(--kid-cyan);
  font-size: 64px;
}

.lesson-red .magic-promise .magic-type-card i {
  opacity: .22;
}

/* Text-only secret cards still need a picture-language: lens / viewfinder / motion. */
.lesson-red .magic-statement .magic-type-card {
  min-height: 470px;
  place-items: center start;
  border: 0;
  border-radius: 18px 42px 18px 42px;
  padding: clamp(34px, 5vw, 68px);
  background:
    radial-gradient(circle at 80% 50%, transparent 0 70px, rgba(243, 239, 231,.78) 72px 77px, transparent 79px 108px, rgba(155, 124, 255,.55) 110px 114px, transparent 116px),
    linear-gradient(135deg, #17202a, #090b0f 70%);
  box-shadow: 13px 13px 0 rgba(155, 124, 255,.14);
}

.lesson-red .magic-statement .magic-type-card::before,
.lesson-red .magic-statement .magic-type-card::after {
  content: "";
  position: absolute;
  width: 78px;
  height: 78px;
  border-color: var(--kid-yellow);
  border-style: solid;
  opacity: .9;
}

.lesson-red .magic-statement .magic-type-card::before {
  top: 28px;
  left: 28px;
  border-width: 6px 0 0 6px;
}

.lesson-red .magic-statement .magic-type-card::after {
  right: 28px;
  bottom: 28px;
  border-width: 0 6px 6px 0;
}

.lesson-red .magic-statement .magic-type-card strong {
  max-width: 10ch;
  font-size: clamp(46px, 5.4vw, 82px);
  line-height: .92;
  text-align: left;
  text-transform: none;
}

/* Cards should read as pictures first: big icon-like numbers, not spreadsheets. */
.lesson-red .magic-answer-grid {
  gap: 16px;
}

.lesson-red .magic-answer-grid > div {
  min-height: 215px;
  border: 0;
  border-radius: 26px 10px 26px 10px;
  padding: 24px;
  box-shadow: 8px 8px 0 rgba(255,255,255,.06);
}

.lesson-red .magic-answer-grid > div:nth-child(1) { background: linear-gradient(145deg, #234a57, #10242b); }
.lesson-red .magic-answer-grid > div:nth-child(2) { background: linear-gradient(145deg, #62322e, #2a1716); }
.lesson-red .magic-answer-grid > div:nth-child(3) { background: linear-gradient(145deg, #565b1e, #24270d); }
.lesson-red .magic-answer-grid > div:nth-child(4) { background: linear-gradient(145deg, #3e315d, #1b142d); }
.lesson-red .magic-answer-grid span { font-size: 138px; opacity: .85; }
.lesson-red .magic-answer-grid strong { font-size: clamp(25px, 2.4vw, 35px); text-transform: none; }
.lesson-red .magic-answer-grid p { font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif; font-size: 18px; }

/* Plans: turn yellow boxes into speech bubbles. */
.lesson-red .plan-question {
  position: relative;
  border-radius: 0 28px 28px 0;
  background: var(--kid-yellow);
}

.lesson-red .plan-question span {
  text-transform: none;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
}

.lesson-red .plan-question p {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  font-size: clamp(18px, 1.6vw, 23px);
}

.lesson-red .magic-badge {
  width: 74px;
  height: 74px;
  border-radius: 22px 22px 22px 6px;
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  transform: rotate(-4deg);
}

.lesson-red .magic-picks button,
.lesson-red .magic-quiz button,
.lesson-red .timer-actions button,
.lesson-red .nav-button {
  font-family: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  border-radius: 16px;
}

.lesson-red .magic-picks button,
.lesson-red .magic-quiz button {
  font-size: clamp(23px, 2.2vw, 33px);
  text-align: center;
}

.lesson-red .magic-label-row span,
.lesson-red .before-after-labels span,
.lesson-red .shot-answer-labels span {
  border-radius: 12px;
  text-transform: none;
  font-size: 17px;
}

.lesson-red .magic-checks > div {
  border: 0;
  border-radius: 25px 10px 25px 10px;
}

.lesson-red .magic-checks strong {
  text-transform: none;
  font-size: 30px;
}

.lesson-red .magic-checks span {
  display: grid;
  width: 68px;
  height: 68px;
  place-items: center;
  border-radius: 50%;
  background: var(--kid-yellow);
  color: var(--kid-ink);
  font-size: 38px;
}

/* A little controlled imperfection = workshop, not corporate deck. */
.lesson-red .magic-checks > div:nth-child(2),
.lesson-red .magic-answer-grid > div:nth-child(2) { transform: rotate(.8deg); }
.lesson-red .magic-checks > div:nth-child(3),
.lesson-red .magic-answer-grid > div:nth-child(3) { transform: rotate(-.7deg); }

@media (max-width: 1040px) {
  .lesson-red .scene-copy h2 { max-width: none; }
  .lesson-red .magic-promise .magic-type-card::before { inset-left: 20%; }
}

@media (max-width: 760px) {
  .lesson-red .scene-copy .eyebrow { font-size: 11px; }
  .lesson-red .scene-copy > p:not(.eyebrow) { font-size: 18px; }
  .lesson-red .magic-promise .magic-type-card { min-height: 390px; }
  .lesson-red .magic-promise .magic-type-card::before {
    inset: 4% -18% 12% 18%;
    opacity: .72;
  }
  .lesson-red .magic-promise .magic-type-card::after { top: 16px; right: 14px; }
  .lesson-red .magic-promise .magic-type-card strong { max-width: 7ch; font-size: clamp(42px, 12vw, 66px); }
  .lesson-red .magic-statement .magic-type-card { min-height: 360px; }
}