/* Обучение. Текст урока занимает строки игроков, поэтому доска стоит там же, где в партии. */
:root { --lesson-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fff1a6'/%3E%3Cstop offset='.5' stop-color='%23f8c948'/%3E%3Cstop offset='1' stop-color='%23e3982c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M50 9 62.9 35.2 91.8 39.4 70.9 59.8 75.9 88.6 50 75 24.1 88.6 29.1 59.8 8.2 39.4 37.1 35.2Z' fill='url(%23g)' stroke='%238a5a1e' stroke-width='5' stroke-linejoin='round'/%3E%3Cellipse cx='41' cy='42' rx='8' ry='4.5' fill='%23fffbe3' opacity='.75' transform='rotate(-32 41 42)'/%3E%3C/svg%3E"); }

.lesson-title { display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 6px; font: 400 clamp(19px, 5.9vw, 25px)/1.05 var(--display); letter-spacing: -.01em; text-align: center; text-wrap: balance; color: var(--ink); }
.lesson-note { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 6px; text-align: center; }
.lesson-note p { margin: 0; font-size: clamp(14px, 4.1vw, 17px); line-height: 1.18; color: #536d5d; text-wrap: balance; }
.lesson-legend { display: flex; justify-content: center; gap: 8px; }
.lesson-chip { display: grid; grid-template-columns: 33px 15px 33px; align-items: center; padding: 3px 5px; border: 1px solid #b6c5b1; border-radius: 11px; background: #e3eadc; transition: background 220ms, border-color 220ms; }
.lesson-chip .mini { width: 33px; height: 33px; }
.lesson-chip .beats-arrow { display: block; width: 15px; height: 15px; fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.lesson-chip.done { border-color: #7fae7c; background: #cde4c3; }
.lesson-steps { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.lesson-steps li { width: 10px; height: 10px; border-radius: 50%; background: #c6cfc0; box-shadow: inset 0 1px 1px #19303d1f; transition: background 220ms, transform 220ms; }
.lesson-steps li.done { background: #6f9d78; }
.lesson-steps li.current { background: #e8b73d; transform: scale(1.35); }

/* Звезда на клетке, которую нужно занять. */
.sq.goal::before { content: ''; position: absolute; inset: 21%; background: var(--lesson-star) center / contain no-repeat; filter: drop-shadow(0 2px 1px #5c451a40); animation: lesson-star 2.6s ease-in-out infinite; }
@keyframes lesson-star { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.08) rotate(7deg); } }
.lesson-star-pop { position: absolute; width: 8%; height: 8%; background: var(--lesson-star) center / contain no-repeat; pointer-events: none; }

/* Подсказка: полупрозрачная фигура показывает ход, а клетка назначения мягко светится. */
.lesson-ghost { z-index: 5; }
.lesson-ghost .eyes { opacity: 0; }
.sq.hint::after { content: ''; position: absolute; inset: 13%; border: 3px solid #fff6cf; border-radius: 50%; box-shadow: 0 0 0 2px #e8b73d8c, 0 0 14px #f4d36c; opacity: .9; animation: lesson-hint 1.6s ease-in-out both; }
@keyframes lesson-hint { 0% { opacity: 0; transform: scale(.75); } 30%, 75% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

/* Значок обучения в меню — та же звезда, что на доске. */
/* Scaled rather than sized up, so its points are never cut by the box. */
.menu-icon.lesson-icon { display: block; background: var(--lesson-star) center / contain no-repeat; transform: scale(1.2); }