/* Lesson page: marks drawn over the board and the text under it. */
/* Phone and portrait: board first, the panel below it. Landscape from 601 px: the panel is a sidebar beside the board. */
.lesson-column { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "panel" "playback"; gap: .75rem; min-width: 0; width: min(1000px, 95vw); }
.lesson-column .board-wrap { grid-area: board; width: 100%; }
#lesson-shell { grid-area: panel; }
#lesson-column chess-playback { grid-area: playback; }
@media (min-width: 601px) and (orientation: landscape) {
  .lesson-column { grid-template-columns: min(calc(100vh - 8rem), 62vw) minmax(0, 22rem); grid-template-areas: "board panel" "board playback"; grid-template-rows: auto 1fr; align-items: start; width: auto; }
  #lesson-shell .lesson-text { font-size: 1.15rem; }
}
#lesson-shell { width: auto; min-width: 0; margin: 0; position: relative; z-index: 1; padding: .5rem .75rem; box-sizing: border-box; border-radius: 16px; background: var(--panel-bg); border: 1px solid var(--panel-border); }
#lesson-column chess-playback { position: relative; z-index: 1; }
#lesson-shell .quest-feedback { min-height: 2.5em; margin: .25rem 0 0; }
.lesson-text { margin: .2rem 0 0; font-size: 1rem; font-weight: 600; }
.lesson-stats { margin: .35rem 0 0; align-items: center; }
.lesson-rating { display: inline-flex; gap: 2px; vertical-align: middle; }
.lesson-rate { width: 1.25rem; height: 1.25rem; background: url("adventure-star.svg") center / contain no-repeat; filter: grayscale(1) opacity(.3); }
.lesson-rate.is-on { filter: none; }
/* Star, warning and selection marks reuse the adventure artwork; only the frame the pawn and piece pages remove is removed here too. */
[data-adventure="lesson"] .quest-mark--goal { border: 0; border-radius: 0; background: transparent; text-shadow: none; }
[data-adventure="lesson"] .quest-mark--goal .quest-star { transform-origin: center; animation: quest-star-feint 8s ease-in-out infinite; }
.lesson-mark--wrong { border-radius: 16%; background: #f7525059; box-shadow: inset 0 0 0 3px #f75250; animation: lesson-shake .4s ease-in-out; }
/* Finishing a step: sparkles fly out of the piece's square. */
.lesson-burst { overflow: visible; }
.lesson-burst .quest-fairy-star { left: 44%; top: 44%; width: clamp(10px, 2.4vw, 22px); animation: lesson-burst 1.4s ease-out 2 both; transform: rotate(var(--burst-angle)); }
@keyframes lesson-burst { 0% { opacity: 1; transform: rotate(var(--burst-angle)) translateY(0) scale(.5); } 100% { opacity: 0; transform: rotate(var(--burst-angle)) translateY(-230%) scale(1.3); } }
@keyframes lesson-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.lesson-mark--trail::after { content: ''; width: 26%; aspect-ratio: 1; border-radius: 50%; background: #ffe65a; box-shadow: 0 0 10px 3px #ffd12b99; animation: lesson-pulse 1.4s ease-in-out infinite; }
.lesson-mark--hint { border-radius: 16%; background: #ffe65a66; box-shadow: 0 0 14px #ffd12b; animation: lesson-pulse 1.4s ease-in-out infinite; }
.lesson-mark--source { border: 3px dashed #8a6a1b; border-radius: 16%; background: #ffe65a33; }
.lesson-mark--target { border: 3px solid #2f7d4f; border-radius: 16%; background: #5cc78a40; }
@keyframes lesson-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .lesson-mark--pop, .lesson-mark--wrong, .lesson-burst .quest-fairy-star, .lesson-mark--hint, .lesson-mark--trail::after, [data-adventure="lesson"] .quest-mark--goal .quest-star { animation: none; }
}
/* Arrows the player draws stay above pieces and the lesson's star and danger symbols (annotation overlay is 25). */
[data-adventure="lesson"] .quest-overlay { z-index: 24; }
/* Progress dots: one per step, filled when done, with the stars earned on it. */
.lesson-dots { display: flex; justify-content: center; gap: .35rem; margin: 0 0 .25rem; }
.lesson-dot { position: relative; width: .7rem; height: .7rem; border-radius: 50%; background: #d9d2b8; transition: transform .25s; }
.lesson-dot.is-done { background: #6fb67f; }
.lesson-dot.is-current { background: #ffd12b; transform: scale(1.35); box-shadow: 0 0 8px #ffd12b; }
.lesson-dot-star { position: absolute; left: 50%; width: .38rem; height: .38rem; background: url("adventure-star.svg") center / contain no-repeat; transform: translate(-50%, -85%); }
.lesson-dot-star:nth-child(2) { margin-left: -.27rem; }
.lesson-dot-star:nth-child(3) { margin-left: .27rem; }
/* Stars earned by a move float up from its square. */
.lesson-mark--pop { z-index: 2; display: flex; align-items: center; justify-content: center; animation: lesson-pop 1.3s ease-out both; }
.lesson-pop-star { width: 55%; max-width: 3rem; aspect-ratio: 1; background: url("adventure-star.svg") center / contain no-repeat; filter: drop-shadow(0 0 6px #ffb800); }
.lesson-mark--pop:has(.lesson-pop-star:nth-child(2)) .lesson-pop-star { width: 36%; }
@keyframes lesson-pop { 0% { opacity: 0; transform: translateY(0) scale(.6); } 20% { opacity: 1; transform: translateY(-20%) scale(1.25); } 100% { opacity: 0; transform: translateY(-120%) scale(1); } }
/* Lesson summary card over the board. */
.lesson-card { position: absolute; inset: 22% 12%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; border-radius: 20px; background: #fff8dce8; border: 3px solid #e5b020; box-shadow: 0 8px 30px #5a3c0066; animation: lesson-card-in .5s cubic-bezier(.2, 1.4, .4, 1) both; z-index: 3; }
.lesson-card-title { font-size: clamp(1.3rem, 5vw, 2.4rem); font-weight: 800; color: #6b4707; }
.lesson-card-levels { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem .9rem; max-width: 92%; }
.lesson-card-level { display: inline-flex; }
.lesson-card-level .lesson-rate { width: clamp(1rem, 4vw, 1.7rem); height: clamp(1rem, 4vw, 1.7rem); }
@keyframes lesson-card-in { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .lesson-card { animation: none; } }
/* The next button asks for a tap once the step is done. */
.lesson-attention { border-radius: 50%; animation: lesson-attention 1.1s ease-in-out infinite; }
@keyframes lesson-attention { 0%, 100% { box-shadow: 0 0 0 0 #ffd12b00; } 50% { box-shadow: 0 0 0 8px #ffd12bcc, 0 0 18px 6px #ffd12b99; } }
@media (prefers-reduced-motion: reduce) { .lesson-attention { animation: none; } }
/* Streak: a row of stars, one per step finished perfectly in a row. */
.lesson-streak { display: flex; justify-content: center; gap: 2px; margin: 0 0 .15rem; min-height: 1.1rem; }
.lesson-streak-star { width: 1.1rem; height: 1.1rem; background: url("adventure-star.svg") center / contain no-repeat; filter: drop-shadow(0 0 4px #ffb800); animation: lesson-pulse 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .lesson-streak-star { animation: none; } }