/* Содержимое разделов мира на главной (assets/world-views.js): путь мелом, лист повторения, книги на полке.
   Копия правил из paper-course.css / paper-review.css / world.css под токены главной (room.css). */
.page-room { --font-display: var(--head); --font-hand: var(--hand); --font-chalk: var(--chalkF); --font-kana: 'Klee One', serif; --font-ui: 'Zen Kaku Gothic New', sans-serif;
  --shu-2: var(--shu2); --paper-2: #f3ead7; --ink-soft: #5d5047; --leaf: #8fca7a; --spring: cubic-bezier(.3, 1.5, .5, 1); }
/* ---------- лист бумаги на стекле (скотч по углам) ---------- */
.glass-sheet { border: 3px solid var(--ink); border-radius: 6px; background: var(--paper); box-shadow: 0 6px 0 rgba(43, 37, 35, .5); color: var(--ink); }
.glass-sheet::before, .glass-sheet::after { content: ''; position: absolute; top: -14px; width: 86px; height: 26px; background: rgba(239, 224, 189, .92); border: 2px solid rgba(43, 37, 35, .5); z-index: 2; pointer-events: none; }
.glass-sheet::before { left: -18px; transform: rotate(-24deg); } .glass-sheet::after { right: -18px; transform: rotate(22deg); }
.glass-sheet.grid { background: linear-gradient(rgba(159, 184, 214, .35) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(159, 184, 214, .35) 1px, transparent 1px) 0 0 / 22px 22px, var(--paper); }

/* ---- «Курс»: шапка — школьная доска с путём мелом и Цуки на полочке ---- */
.course-board { position: relative; margin: 6px 0 34px; padding: 26px 32px 30px; color: #ece8dc;
  background: radial-gradient(60% 40% at 30% 20%, rgba(236, 232, 220, .06), transparent 70%), radial-gradient(50% 30% at 75% 70%, rgba(236, 232, 220, .05), transparent 70%), #26392f;
  border: 14px solid #7c4d33; border-radius: 10px; box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px rgba(0, 0, 0, .25), 0 9px 0 3px var(--ink); }
/* полочка для мела внизу рамки */
.course-board::after { content: ''; position: absolute; left: -26px; right: -26px; bottom: -30px; height: 16px; background: #8a583b; border: 3px solid var(--ink); border-radius: 4px; box-shadow: inset 0 -5px 0 #6c422b; }
.cb-sub { margin: 0; font: 20px/1.2 var(--font-hand); color: #b9c4b6; }
.cb-h { margin: 10px 0 8px; font: 700 42px/1 var(--font-chalk); color: #ece8dc; letter-spacing: 0; text-shadow: 0 0 1px rgba(236, 232, 220, .5); }
h2.cb-h { font-size: 36px; margin-top: 18px; }
.cb-h em { font-style: normal; color: #ffe58a; }
.cp-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 9px; }
.cb-sep { align-self: center; font: 700 26px var(--font-chalk); color: #b9c4b6; margin: 0 4px; }
.cb-node { display: grid; justify-items: center; gap: 3px; text-decoration: none; color: #ece8dc; }
.cb-node i { width: 42px; height: 42px; display: grid; place-items: center; font: 600 19px var(--font-kana); font-style: normal; border: 2.5px solid rgba(236, 232, 220, .85); border-radius: 50% 46% 52% 48%; transition: transform .25s var(--spring); }
.lessons .cb-node i { font: 700 16px var(--font-display); width: 38px; height: 38px; }
.cb-node span { font: 15px/1 var(--font-hand); color: #b9c4b6; }
.cb-node:hover i { transform: translateY(-3px) rotate(-6deg); }
.cb-node.done i { background: rgba(236, 232, 220, .85); color: #26392f; }
.cb-node.now i { border: 3px solid #ffe58a; color: #ffe58a; transform: scale(1.14) rotate(-4deg); }
.cb-node.now span { color: #ffe58a; }
.cb-node.grp i { position: relative; } /* где группа — пунктирное кольцо поверх соседей (outline обрезался строкой выше) */
.cb-node.grp i::after { content: ''; position: absolute; z-index: 2; inset: -6px; border: 2.5px dashed #8fb6ff; border-radius: 50%; pointer-events: none; }
.cb-node.grp { position: relative; z-index: 2; }
.cb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 16px 0 0; font: 17px var(--font-hand); color: #b9c4b6; }
.cb-legend .lg { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(236, 232, 220, .85); margin-left: 6px; }
.cb-legend .lg.done { background: rgba(236, 232, 220, .85); } .cb-legend .lg.now { border-color: #ffe58a; } .cb-legend .lg.grp { border: 2px dashed #8fb6ff; }
.cb-go { display: inline-flex; margin-top: 18px; padding: 13px 24px; border-radius: 14px; text-decoration: none; font: 700 18px var(--font-display); color: #fff8ee; background: var(--shu); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), inset 0 -5px 0 var(--shu-2); transition: transform .25s var(--spring); }
.cb-go:hover { transform: translateY(-2px); }
.cb-go:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink); }
/* Цуки сидит на полочке доски справа */
.cb-tsuki { position: absolute; right: 8px; bottom: -32px; width: 240px; height: 216px; cursor: pointer; z-index: 2; }
.cb-tsuki svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.stage-lead { margin-top: -4px; }
@media (max-width: 760px) {
  .course-board { padding: 22px 18px 26px; border-width: 10px; margin-top: 12px; }
  .course-board::after { left: -20px; right: -20px; }
  .cb-h { font-size: 36px; } h2.cb-h { font-size: 30px; }
  .cb-node i { width: 36px; height: 36px; font-size: 16px; } .lessons .cb-node i { width: 32px; height: 32px; font-size: 14px; }
  /* на телефоне Цуки выглядывает из-за верхнего края доски */
  .cb-tsuki { right: 4px; top: -150px; bottom: auto; width: 170px; height: 153px; }
}

/* путь мелом прямо на доске сцены (координаты сцены, масштаб камеры) */
.page-room .scene .chalk-path { display: flex; flex-direction: column; gap: 2px; padding: 16px 22px 18px; color: #ece8dc; }
.page-room .scene .chalk-path .cb-sub { font-size: 15px; }
.page-room .scene .chalk-path .cb-h { font-size: 30px; margin: 6px 0 4px; }
.page-room .scene .chalk-path h2.cb-h { font-size: 27px; margin-top: 8px; }
.page-room .scene .chalk-path .cp-row { gap: 6px 5px; }
.page-room .scene .chalk-path .cb-node i { width: 30px; height: 30px; font-size: 14px; border-width: 2px; }
.page-room .scene .chalk-path .lessons .cb-node i { width: 27px; height: 27px; font-size: 12px; }
.page-room .scene .chalk-path .cb-node span { font-size: 11px; }
.page-room .scene .chalk-path .cb-sep { font-size: 20px; }
.page-room .scene .chalk-path .cb-legend { font-size: 13px; margin-top: 6px; }
.page-room .scene .chalk-path .cb-legend .lg { width: 11px; height: 11px; }
.page-room .scene .chalk-path .cb-go { margin-top: auto; align-self: flex-start; padding: 8px 16px; font-size: 14px; border-width: 2.5px; box-shadow: 0 4px 0 var(--ink), inset 0 -3px 0 var(--shu-2); }
/* на телефоне доска с путём — обычным блоком под сценой, без своей кошки (Цуки — в сцене) */
.course-board .chalk-path { display: contents; }
body.mobile .course-board { margin-top: 18px; padding-right: 18px; }

/* ---- «Прогресс»: книги-уроки на полке сцены (координаты сцены) ---- */
.shelf-cub { display: flex; align-items: flex-end; gap: 1px; padding: 0 2px; }
.shelf-cub .bk { flex: 1; min-width: 0; height: 92%; display: grid; place-items: start center; padding-top: 5px; text-decoration: none; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 3px 3px 1px 1px; background: linear-gradient(to top, var(--c, #d9463e) calc(var(--f) * 100%), #f3ead7 0); transition: transform .25s var(--spring); }
.shelf-cub .bk:nth-child(5n+1) { --c: #d9463e; } .shelf-cub .bk:nth-child(5n+2) { --c: #3f6fb5; } .shelf-cub .bk:nth-child(5n+3) { --c: #e6b34a; } .shelf-cub .bk:nth-child(5n+4) { --c: #5a9a6a; } .shelf-cub .bk:nth-child(5n) { --c: #8c5aa8; }
.shelf-cub .bk:nth-child(3n) { height: 86%; } .shelf-cub .bk:nth-child(4n+1) { height: 96%; }
/* номер прямо на корешке, без рамки — места мало */
.shelf-cub .bk i { display: flex; flex-direction: column; align-items: center; width: 100%; font: 800 10px/.95 var(--font-ui); font-style: normal; } /* двузначный номер — столбиком, каждая цифра по центру корешка */
.shelf-cub .bk { place-items: start stretch; }
.shelf-cub .bk.nb { --c: #8fca7a !important; height: 70%; } .shelf-cub .bk.nb i { font: 600 9px var(--font-kana); }
.shelf-cub .bk:hover { transform: translateY(-6px); }
.shelf-cub .bk.cur { position: relative; } .shelf-cub .bk.cur::after { content: ''; position: absolute; left: 30%; top: -14px; width: 7px; height: 22px; background: var(--shu); border: 1.5px solid var(--ink); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.board-note { color: #ece8dc; font: 19px/1.2 var(--font-hand); }
.board-note b { font: 700 46px/1 var(--font-chalk); color: #ffe58a; } .board-note small { font-size: 14px; color: #b9c4b6; }
/* ---- лист повторения на стекле окна (координаты сцены; на телефоне — блоком под сценой) ---- */
.review-sheet { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px 18px; padding: 24px 22px 20px; align-content: start; }
.rs-big { width: 176px; height: 150px; display: grid; place-content: center; text-align: center; background: var(--n1); border: 2.5px solid var(--ink); border-radius: 5px 9px 6px 8px; box-shadow: 0 5px 0 var(--ink); transform: rotate(-3deg); }
.rs-big.empty { background: var(--leaf); }
.rs-big b { font: 900 68px/1 var(--font-display); } .rs-big span { font: 20px/1.1 var(--font-hand); }
.rs-side { display: grid; align-content: center; gap: 12px; }
.rs-note { margin: 0; font: 17px/1.25 var(--font-hand); color: var(--ink-soft); }
.rs-go { justify-self: start; padding: 11px 18px; border-radius: 12px; font: 700 16px var(--font-display); color: #fff8ee; background: var(--shu); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink), inset 0 -4px 0 var(--shu-2); cursor: pointer; transition: transform .25s var(--spring); }
.rs-go:hover { transform: translateY(-2px); } .rs-go:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.rs-types { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rs-type { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 8px; align-items: center; justify-content: start; padding: 8px 10px; border: 2.5px solid var(--ink); border-radius: 6px 9px 5px 8px; color: var(--ink); font: inherit; text-align: left; background: var(--paper-2); }
.rs-type i { grid-row: span 2; font: 600 22px var(--font-kana); font-style: normal; }
.rs-type b { font: 900 22px/1 var(--font-display); } .rs-type span { font: 14px/1 var(--font-hand); }
.rs-type.has { cursor: pointer; box-shadow: 0 4px 0 var(--ink); transition: transform .25s var(--spring); }
.rs-type.has:hover { transform: translateY(-3px) rotate(0) !important; }
.rs-type.has.t0 { background: var(--n2); transform: rotate(1.5deg); } .rs-type.has.t1 { background: var(--n3); transform: rotate(-1.5deg); } .rs-type.has.t2 { background: #c9f0b0; transform: rotate(1deg); }
.rs-type.has.t3 { background: #ffd2a6; transform: rotate(-1deg); } .rs-type.has.t4 { background: var(--n1); transform: rotate(1.2deg); } .rs-type.has.t5 { background: #e5d4ff; transform: rotate(-.8deg); }
.rs-type:not(.has) { opacity: .7; }
#sheet-slot:empty { display: none; }
body.mobile #sheet-slot { margin: 6px 0 18px; }
body.mobile .review-sheet { grid-template-columns: auto minmax(0, 1fr); padding: 20px 14px 16px; }
body.mobile .rs-big { width: 120px; height: 110px; } body.mobile .rs-big b { font-size: 50px; }
body.mobile .rs-types { grid-template-columns: repeat(2, 1fr); }
.shelf-cub .bk.cur { padding-top: 12px; } /* номер — под закладкой текущего урока */
.cp-row.lessons { overflow: visible; padding: 0; margin: 0; background: none; border: 0; } /* класс .lessons из style.css (лента уроков с прокруткой) резал кольцо «где группа» */
.cb-node.intro i { border-radius: 9px 11px 8px 10px; border-style: dashed; color: #ffe58a; }
.lessons .cb-node.intro i { font-weight: 600; }
/* в комнате: ссылка на полный список уроков под путём на доске */
.cb-all { display: inline-block; margin: 8px 0 0 12px; font: 20px var(--chalkF, 'Caveat', cursive); color: #ece8dc; text-decoration: underline dotted; text-underline-offset: 5px; }
.cb-all:hover { color: #ffe58a; }
.cb-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.cb-acts .cb-all { margin: 18px 0 0; }

/* карточки разделов — ссылки, но без подчёркивания (это кнопки-стикеры) */
a.rs-type, a.rs-type:hover { text-decoration: none; color: var(--ink); }