/* Разделы (assets/edge.js): фон — бумага с бледным узором асаноха; герои сидят, висят и парят прямо на элементах
   страницы. Раскладка каждого раздела оставляет место под своего героя (ниже — по разделам). */
body.edge-page { background-color: #f1e6cf;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%237c4d33' stroke-opacity='.12' stroke-width='1.2'%3E%3Cpath d='M30 0L60 17.3V52L30 69.3 0 52V17.3Z M30 69.3V104 M0 52L30 34.7 60 52 M0 17.3L30 34.7 60 17.3 M30 0V34.7 M30 34.7L15 8.7 M30 34.7L45 8.7 M30 34.7L0 34.7 M30 34.7L60 34.7 M30 34.7L15 60.6 M30 34.7L45 60.6 M30 69.3L15 95.3 M30 69.3L45 95.3 M0 86.7L30 69.3 60 86.7'/%3E%3C/g%3E%3C/svg%3E"); }
html:has(body.edge-page) { background: #f1e6cf; }
body.edge-page main { position: relative; }
body.edge-page main { overflow-x: clip; } /* хвост героя у края не даёт прокрутку вбок (вверх герой выходить может) */

/* герой: слой внутри main, место ставит edge.js (left/top); --w — ширина сцены, --k — во сколько раз сцена мельче 400 */
.perch { position: absolute; z-index: 3; width: var(--w); height: calc(var(--w) * .9); pointer-events: none; }
.perch .he { position: absolute; inset: 0; pointer-events: auto; cursor: pointer; }
.perch .he svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.perch .he .shade, .perch .he .rim, .perch .he .hatch, .perch .he .guide { display: none; }
/* надпись — на экране одного размера при любом размере героя */
.perch .say-ja { font-family: 'Yomogi', sans-serif; font-size: calc(22px * var(--k)); fill: #fff6ee; paint-order: stroke; stroke: #2b2523; stroke-width: calc(5px * var(--k)); stroke-linejoin: round; }
.perch .say-ru { font-family: 'Neucha', sans-serif; font-size: calc(16px * var(--k)); fill: #ffe1a6; paint-order: stroke; stroke: #2b2523; stroke-width: calc(4.5px * var(--k)); stroke-linejoin: round; }
.perch .fx { fill: none; stroke: #2b2523; stroke-width: 2.4; stroke-linecap: round; } .perch .fx-fill { fill: #2b2523; } .perch .fx-blue { fill: none; stroke: #3f6fb5; stroke-width: 2.2; stroke-linecap: round; }
.perch .he:focus-visible { outline: 3px dashed #2b2523; outline-offset: -6px; border-radius: 20px; }

/* Кицунэ сидит на облаке: облако чуть закрывает лапы и покачивается вместе с ней */
.perch-cloud { animation: perch-hover 6s ease-in-out infinite; }
.perch-cloud .cloud-seat { position: absolute; z-index: 1; left: calc(var(--w) * .1); top: calc(var(--w) * .9 * 333 / 360 - var(--w) * .29 * .45); width: calc(var(--w) * .78); height: auto; pointer-events: none; }
@keyframes perch-hover { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }

/* --- место под героев --- */
/* Сегодня: Цуки на стикере «к повторению» — над стикерами просвет */
.sec-today #stats { margin-top: 60px; }
/* Курс: «Сейчас» уже — справа облако с лисой */
@media (min-width: 761px) { .sec-course .cl-now { margin-right: 300px; } }
/* Повторение: справа от счётчика висит Банаси; где справа места мало — подпись и кнопка уходят под счётчик, а фонарь висит рядом с ним */
@media (max-width: 980px) { .sec-review .review-sheet .rs-side { grid-column: 1 / -1; } }
/* Прогресс: стикеры ниже «Активности» и прижаты к низу — над ними сидит Цуки; у последнего раздела справа колонка под лису */
@media (min-width: 1051px) { .sec-progress .pg-stats { align-items: end; } .sec-progress .pg-stat { min-height: 0; padding-top: 14px; padding-bottom: 14px; } }
@media (min-width: 761px) { .sec-progress .sec-tail, .sec-progress .sec-tail + * { margin-right: 290px; } .sec-progress .sec-tail + * { min-height: 170px; } }

@media (max-width: 760px) {
  .sec-today #stats { grid-template-columns: repeat(3, 1fr); margin-top: 0; }
  .sec-today #stats .tape { grid-column: 1 / 3; align-self: end; }
  .sec-today #stats .s1 { grid-column: 1; } /* стикеры — второй строкой, справа от ленты место под Цуки */
  .sec-course .cl-now { margin-top: 136px; }
  .sec-practice main > h1 { margin-top: 136px; } /* над заголовком — облако с Кицунэ (подменю над ним во всю ширину) */
  .sec-progress .pg-top { margin-top: 96px; }
  .sec-progress .pg-lead { padding-right: 150px; } /* справа над стикерами сидит Цуки */
  .sec-progress .sec-tail { margin-top: 70px; }
  .sec-progress .sec-tail, .sec-progress .sec-tail + * { padding-right: 170px; }
  .sec-progress .sec-tail + * { min-height: 90px; }
}
/* во время занятия героев нет; без анимаций — облако не качается */
body.in-session .perch, body.focus .perch, body.focus-mode .perch { display: none; }
@media (prefers-reduced-motion: reduce) { .perch-cloud { animation: none; } }