/* Главная «Сегодня» в стиле героев: комната ученика (прототип design/room.html). */

/* Стиль «Комната»: то же, что у героев — чернильный контур, плоские заливки, мел на доске, бумага.
   Никакого свечения и градиентов: объём — сплошной тенью тушью снизу. */
.page-room {
  --ink: #2b2523; --paper: #f6efe2; --paper2: #efe0bd; --wood: #7c4d33; --wood2: #5b3826;
  --shu: #d4472f; --shu2: #b8371f; --chalk: #ece8dc; --chalk2: #b9c4b6; --chalkY: #ffe58a; --chalkP: #ffb1cd;
  --n1: #ffe07a; --n2: #ffb1cd; --n3: #a9ebfa; --teal: #4f8f84;
  --head: 'Zen Maru Gothic', 'Zen Kaku Gothic New', sans-serif;
  --chalkF: 'Caveat', 'Neucha', sans-serif;
  --hand: 'Neucha', 'Zen Kaku Gothic New', sans-serif;
}
* { box-sizing: border-box; }
html:has(body.page-room) { background: #3a2618; }
body.page-room { margin: 0; color: var(--ink); font: 16px/1.5 'Zen Kaku Gothic New', system-ui, sans-serif; background: #3a2618; overflow-x: hidden; min-height: 0; }
:focus-visible { outline: 3px dashed var(--ink); outline-offset: 3px; }

/* шапка: на балке висят бумажные ярлыки */
.page-room .top { border: 0; background: none; backdrop-filter: none; position: absolute; z-index: 30; inset: 0 0 auto; }
.page-room .top .wrap { max-width: none; height: 68px; padding: 0 clamp(16px, 3vw, 40px); gap: 16px; }
.page-room .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.page-room .logo span { font: 700 31px/1 var(--chalkF); letter-spacing: .01em; color: var(--paper); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; transform: rotate(-2deg) translateY(-1px); }
.page-room .logo img { width: 42px; height: 40px; display: block; filter: drop-shadow(0 2px 0 rgba(43, 37, 35, .55)); }
.page-room .nav { margin-left: auto; display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 6px; }
.page-room .nav a { padding: 6px 14px; border-radius: 9px; text-decoration: none; font-weight: 700; font-size: 14px; white-space: nowrap; color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.page-room .nav a:nth-child(2n) { transform: rotate(1deg); } .page-room .nav a:nth-child(2n+1) { transform: rotate(-1deg); }
.page-room .nav a[aria-current] { background: var(--n1); transform: rotate(-2deg) translateY(2px); }
.page-room .nav a:hover { transform: translateY(-2px); }

/* сцена */
.scene { position: relative; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: #3a2618; }
.scene > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.shade, .rim, .hatch, .guide { display: none; }
.layer { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; pointer-events: none; }
.layer > * { position: absolute; pointer-events: auto; }
.st svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st { cursor: pointer; }
.st-lamp.asleep { pointer-events: none; cursor: default; }
.zzz { position: absolute; left: 64%; top: 30%; display: none; font: 22px/1 var(--hand); color: var(--paper); pointer-events: none; }
.asleep .zzz { display: block; }
.zzz i { position: absolute; font-style: normal; paint-order: stroke; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; opacity: 0; animation: zzz 4.2s ease-in-out infinite; }
.zzz i:nth-child(2) { animation-delay: 1.4s; font-size: 27px; } .zzz i:nth-child(3) { animation-delay: 2.8s; font-size: 33px; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(22px, -44px) rotate(10deg); } }
.st:focus-visible { outline: 3px dashed var(--paper); outline-offset: -4px; border-radius: 20px; }
.scene .say-ja { font-family: 'Yomogi', sans-serif; font-size: 38px; fill: #fff6ee; paint-order: stroke; stroke: var(--ink); stroke-width: 9px; stroke-linejoin: round; }
.scene .say-ru { font-family: 'Neucha', sans-serif; font-size: 25px; fill: #ffe1a6; paint-order: stroke; stroke: var(--ink); stroke-width: 8px; stroke-linejoin: round; }
/* речь Банаси — в переднем слое сцены (world.js), размер — в единицах сцены, на экране как у Цуки */
.scene .lamp-say-ja { font-family: 'Yomogi', sans-serif; font-size: 30px; fill: #fff6ee; paint-order: stroke; stroke: var(--ink); stroke-width: 7px; stroke-linejoin: round; }
.scene .lamp-say-ru { font-family: 'Neucha', sans-serif; font-size: 20px; fill: #ffe1a6; paint-order: stroke; stroke: var(--ink); stroke-width: 6px; stroke-linejoin: round; }
.scene .fx { fill: none; stroke: #f3eeff; stroke-width: 2.4; stroke-linecap: round; } .scene .fx-fill { fill: #f3eeff; }
.scene .fx-blue { fill: none; stroke: #8fb6ff; stroke-width: 2.2; stroke-linecap: round; }

/* доска: всё написано мелом, единственная «вещь» на ней — красная кнопка */
.board { display: flex; flex-direction: column; padding: 20px 28px 22px; color: var(--chalk); opacity: 0; transition: opacity .5s; }
.ready .board, .ready .notes > * { opacity: 1; }
.chip { align-self: flex-start; font: 21px/1.1 var(--hand); color: var(--chalk2); }
.chip b { font-weight: 400; color: var(--chalkY); }
h1 { margin: 6px 0 0; font: 700 64px/.95 var(--chalkF); color: var(--chalk); text-shadow: 0 0 1px rgba(236, 232, 220, .6); }
h1 em { font-style: normal; color: var(--chalkY); position: relative; white-space: nowrap; }
h1 em::after { content: ''; position: absolute; left: -2%; right: -4%; bottom: -2px; height: 10px; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C40 3 90 4 130 6 S180 8 197 4' fill='none' stroke='%23ffe58a' stroke-width='3.2' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E"); }
.mins { margin: 10px 0 0; font: 23px/1.2 var(--hand); color: var(--chalk2); }
.mins b { font-weight: 400; color: var(--chalkP); }

/* шаги — кружки мелом, текущий обведён жёлтым */
.metro { list-style: none; margin: auto 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); position: relative; }
.metro::before { content: ''; position: absolute; left: 10%; right: 10%; top: 20px; height: 3px; background: repeating-linear-gradient(90deg, rgba(236, 232, 220, .7) 0 10px, transparent 10px 17px); }
.metro li { position: relative; display: grid; justify-items: center; gap: 2px; text-align: center; }
.metro i { width: 42px; height: 42px; border-radius: 50% 46% 52% 48%; display: grid; place-items: center; font: 600 20px/1 'Klee One', serif; font-style: normal; background: #26392f; border: 2.5px solid rgba(236, 232, 220, .85); color: var(--chalk); position: relative; z-index: 1; }
.metro span { font: 17px/1.1 var(--hand); color: var(--chalk2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.metro li { min-width: 0; }
/* много шагов на узкой доске — подписи мельче, длинные обрезаются многоточием (полное название — в title) */
.metro:has(li:nth-child(5)) span { font-size: 15px; }
.metro .now i { border: 3px solid var(--chalkY); color: var(--chalkY); transform: rotate(-4deg) scale(1.12); }
.metro .now span { color: var(--chalkY); }
.metro .now::before { content: 'сейчас'; position: absolute; top: -26px; font: 18px/1 var(--chalkF); font-weight: 700; color: var(--chalkY); transform: rotate(-6deg); white-space: nowrap; }

/* главная кнопка — «печать»: красная, чернильный контур, сплошная тень; нажатие вдавливает */
.start { margin-top: 18px; align-self: stretch; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 26px; border-radius: 14px; text-decoration: none; font: 700 20px var(--head); color: #fff8ee; background: var(--shu); border: 3px solid var(--ink); box-shadow: 0 6px 0 var(--ink), inset 0 -5px 0 var(--shu2); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), box-shadow .25s; }
.start svg { width: 22px; height: 22px; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.start:hover { transform: translateY(-2px); box-shadow: 0 8px 0 var(--ink), inset 0 -5px 0 var(--shu2); }
.start:hover svg { transform: translateX(4px); }
.start:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--ink), inset 0 -2px 0 var(--shu2); transition-duration: .06s; }

/* стикеры на стекле */
.notes { display: contents; }
.layer .tape, .layer .sticky { position: absolute; }
.notes > * { opacity: 0; transition: opacity .5s .1s; }
.tape { display: flex; flex-direction: column; justify-content: center; padding: 4px 12px; color: var(--ink); }
.tape b { font: 700 13px 'Zen Kaku Gothic New'; display: flex; justify-content: space-between; }
.tape b small { font: 15px var(--hand); color: #6a5446; }
.bar { position: relative; height: 9px; margin-top: 4px; border-radius: 5px; border: 2px solid var(--ink); background: #fff8e6; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 14%; border-radius: 3px; background: var(--shu); }
.bar u { position: absolute; top: -6px; left: 12%; width: 3px; height: 17px; background: #3f6fb5; border-radius: 2px; }
.sticky { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--ink); padding: 4px; }
.sticky b { font: 900 32px/1 var(--head); }
.sticky span { font: 16px/1.05 var(--hand); margin-top: 4px; color: #4a3a32; }

/* телефон: сцена сверху, доска и стикеры — ниже, на «стене» */
.below { display: none; }
body.mobile .scene { height: min(60svh, 520px); min-height: 380px; }
body.mobile .below { display: block; position: relative; padding: 0 16px 40px; margin-top: -18px; z-index: 5; background: linear-gradient(#ad7850 0, #8d5e3e 240px, #6b4330); }
body.mobile .board { position: relative; padding: 18px; border-radius: 12px; background: #26392f; border: 10px solid var(--wood); box-shadow: 0 0 0 3px var(--ink), 0 8px 0 var(--ink); }
body.mobile h1 { font-size: 54px; }
body.mobile .start { order: 3; margin: 18px 0 6px; }
body.mobile .metro { order: 4; margin-top: 14px; grid-template-columns: 1fr; gap: 8px; }
body.mobile .metro::before { left: 20px; right: auto; top: 20px; bottom: 20px; width: 3px; height: auto; background: repeating-linear-gradient(180deg, rgba(236, 232, 220, .7) 0 9px, transparent 9px 15px); }
body.mobile .metro li { grid-template-columns: 42px 1fr; justify-items: start; align-items: center; gap: 12px; text-align: left; }
body.mobile .metro span { font-size: 19px; }
body.mobile .metro .now::before { display: none; }
body.mobile .metro .now span::after { content: '← сейчас'; margin-left: 10px; font: 700 18px var(--chalkF); color: var(--chalkY); }
body.mobile .notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 18px; }
body.mobile .tape { grid-column: 1 / -1; border-radius: 6px; background: var(--paper2); border: 2.5px solid var(--ink); padding: 8px 12px; transform: rotate(-.8deg); }
body.mobile .sticky { aspect-ratio: 1; border: 2.5px solid var(--ink); border-radius: 6px 9px 5px 8px; box-shadow: 0 4px 0 var(--ink); }
body.mobile .sticky.s1 { background: var(--n1); transform: rotate(-3deg); }
body.mobile .sticky.s2 { background: var(--n2); transform: rotate(2deg); }
body.mobile .sticky.s3 { background: var(--n3); transform: rotate(-1.5deg); }
body.mobile .top .wrap { height: 60px; padding: 0 12px; gap: 8px; }
body.mobile.page-room .logo span { display: none; }
body.mobile.page-room .nav { gap: 5px; }
body.mobile.page-room .nav a { padding: 5px 9px; font-size: 13px; }
.page-room footer { padding: 18px 16px 26px; text-align: center; font: 17px var(--hand); color: #e8d6bd; background: #2a1a10; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .board, .notes > * { opacity: 1; }
  .zzz i { opacity: 1; } .zzz i:nth-child(2) { transform: translate(10px, -18px); } .zzz i:nth-child(3) { transform: translate(22px, -42px); }
}

/* ---- живые данные на доске ---- */
.page-room .metro a { display: contents; color: inherit; text-decoration: none; }
.page-room .metro li { cursor: pointer; }
.page-room .metro li:hover i { transform: translateY(-2px); }
.page-room .metro .done i { border-color: rgba(185, 196, 182, .55); color: var(--chalk2); }
.page-room .metro .done span { text-decoration: line-through; text-decoration-color: rgba(236, 232, 220, .5); }
.page-room .start[hidden] { display: none; }
.page-room h1 { letter-spacing: 0; }

/* кнопка входа — бумажный ярлык, как пункты меню */
.page-room .acc-btn { color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); border-radius: 9px; padding: 5px 11px 5px 8px; }
.page-room .acc-btn.signed { color: var(--ink); border-color: var(--ink); background: var(--n3); }

/* ---- под сценой: стена с бумажными листами (настройка, «Где вы», как устроено) ---- */
.page-room .wall { position: relative; z-index: 4; padding: 26px 0 40px; background: linear-gradient(#ad7850, #8d5e3e 60%, #6b4330); }
body.mobile.page-room .wall { padding-top: 6px; background: #6b4330; }
.page-room .wall .wrap { display: grid; gap: 18px; }
.page-room .wall .card { background: var(--paper); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 6px 0 var(--ink); color: var(--ink); }
.page-room .wall .card h2, .page-room .wall .card h1 { font-family: var(--head); letter-spacing: 0; }
.page-room .wall .muted, .page-room .wall .lead, .page-room .wall .tip { color: #5d5047; }
.page-room .wall .field-label { font: 18px/1.1 var(--hand); color: #7a6656; text-transform: none; letter-spacing: 0; }
.page-room .wall a { color: #b8371f; }
.page-room .wall .btn { border: 2.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); background: #fffaf0; color: var(--ink); border-radius: 10px; }
.page-room .wall .btn.primary { background: var(--shu); color: #fff8ee; }
.page-room .wall .btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.page-room .wall .seg { background: #eadfc6; border: 2px solid var(--ink); }
.page-room .wall .seg button[aria-pressed="true"] { background: var(--n1); box-shadow: 0 2px 0 var(--ink); }
.page-room .wall .lesson-chip[aria-pressed="true"] { background: var(--n1); border-color: var(--ink); }
.page-room footer { border: 0; margin: 0; }
.page-room footer .wrap { max-width: none; }
.page-room footer a { color: #ffe1a6; }
.page-room main.room-main { padding: 0; }
.page-room .board .chip { background: none; border: 0; padding: 0; border-radius: 0; box-shadow: none; }

.page-room a.sticky { text-decoration: none; color: var(--ink); cursor: pointer; }
.page-room a.sticky:hover b { text-decoration: underline wavy 1.5px; text-underline-offset: 4px; }
.page-room .layer .st-cat { z-index: 6; } /* Цуки — перед доской и стикерами (прыгает по комнате) */
/* смена страниц без белой вспышки: браузер плавно сводит старую и новую (первый кадр новой — комната в прошлом ракурсе) */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* слои мира: город за окном / неподвижная комната / передний план — отдельные слои отрисовки, камера двигает обёртку */
.w-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.w-cam.flying { will-change: transform; }
.w-cam > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.w-cam > svg.w-room, .w-cam > svg.w-front, .w-cam > svg.w-lamp, .w-cam > svg.w-back, .w-cam > svg.w-desk { will-change: transform; }
.w-cam > .layer { pointer-events: none; }

/* ---- разделы мира на одной странице: видно содержимое только текущего (body[data-s]) ---- */
.page-room .wv { opacity: 0; pointer-events: none !important; transition: opacity .3s; }
.page-room .wv * { pointer-events: none !important; }
.page-room[data-s="today"] .wv[data-v="today"], .page-room[data-s="course"] .wv[data-v="course"],
.page-room[data-s="review"] .wv[data-v="review"], .page-room[data-s="progress"] .wv[data-v="progress"] { opacity: 1; pointer-events: auto !important; transition: opacity .5s 1s; }
.page-room[data-s="today"] .wv[data-v="today"] *, .page-room[data-s="course"] .wv[data-v="course"] *,
.page-room[data-s="review"] .wv[data-v="review"] *, .page-room[data-s="progress"] .wv[data-v="progress"] * { pointer-events: auto !important; }
.page-room:not([data-s="today"]) .notes > * { opacity: 0; pointer-events: none; transition: opacity .3s; }
.page-room.wall-off .wall { display: none; } /* скрывается после полёта камеры — пересчёт раскладки не попадает на полёт */
/* на телефоне под сценой — только текущий раздел */
.page-room.mobile .below .wv:not([data-v]) { display: block; }
.page-room.mobile[data-s] .below > .wv { display: none; }
.page-room.mobile[data-s="today"] .below > .wv[data-v="today"], .page-room.mobile[data-s="course"] .below > .wv[data-v="course"], .page-room.mobile[data-s="review"] .below > .wv[data-v="review"] { display: block; }
.page-room.mobile[data-s="review"] .below > .review-sheet { display: grid; }
.page-room.mobile:not([data-s="today"]) .below > .notes { display: none; }
.page-room.mobile .below > .review-sheet { margin: 18px 0; }
.page-room .rs-more { font: 15px var(--hand); color: #6e5f53; }
.page-room .board-note a { color: #ffe58a; }
.page-room .layer > .st-cat { will-change: transform; } /* прыжок Цуки — своим слоем */

/* телефон: сначала доска с планом и одна кнопка (канон «продолжить»), комната — ниже, декоративным «хвостом» */
body.mobile.page-room main.room-main { display: flex; flex-direction: column; }
body.mobile.page-room .below { order: -1; margin-top: 0; padding-top: 76px; padding-bottom: 18px; background: #6b4330; }
body.mobile.page-room .scene { height: min(46svh, 400px); min-height: 280px; }
body.mobile.page-room .wall { order: 2; }

/* шаги плана на телефоне — столбиком (today.js задаёт колонки в style; без !important ряд растягивал страницу) */
body.mobile.page-room .metro { grid-template-columns: 1fr !important; }

/* ---- раскладка под разные пропорции экрана (рисунок не меняется) ----
   Сцена «Сегодня» занимает по ширине ~1290 из 1600 единиц комнаты; на экранах уже 1.43:1 (1280×1000, 1024×768)
   кадр «по высоте» обрезал правый край со стикерами. Там сцену делаем ниже — пропорция не уже 1.45:1,
   под ней продолжается стена. Заодно на почти квадратных окнах шире 900 px (900×900) раскладка больше не скачет
   телефон ⇄ компьютер: world.js выбирал телефон по пропорции сцены, а у телефонной сцены пропорция уже другая. */
body.page-room:not(.mobile) .scene { height: min(100svh, 69vw); min-height: 0; }
/* телефонная раскладка на планшете и квадратном окне: доска и стикеры не растягиваются во всю ширину */
body.mobile.page-room .below > *, .page-room.mobile .below > .review-sheet { max-width: 680px; margin-left: auto; margin-right: auto; }
/* японские слова не рвутся посередине */
body.page-room { word-break: keep-all; overflow-wrap: break-word; }
/* «10 мин» на кнопках времени — контрастнее (WCAG AA) */
.page-room .wall .seg button { color: #5d5047; }
.page-room .wall .seg button[aria-pressed="true"] { color: var(--ink); }
/* на планшете квадратные стикеры выходили огромными — там они ниже квадрата */
@media (min-width: 520px) { body.mobile.page-room .sticky { aspect-ratio: auto; min-height: 120px; } }
/* «zzz» спящего фонаря (днём) — только пока сцена на экране: на телефоне она ниже доски, на компьютере уезжает при прокрутке.
   Вне экрана буквы убираем (display по прогрессу прокрутки, view-timeline) — их анимация не гоняет страницу каждый кадр.
   Где view-timeline нет — всё как раньше. */
.scene { view-timeline: --scene-vt block; }
.asleep .zzz { animation: zzz-onscreen linear both; animation-timeline: --scene-vt; animation-range: cover 0% cover 100%; }
@keyframes zzz-onscreen { 0%, 100% { display: none; } 0.5%, 99.5% { display: block; } }

/* план выполнен — кнопки «Начать» нет: шаги остаются на её высоте, а не съезжают на календарь и цветок у края доски */
.page-room .board:has(.start[hidden]) .metro { margin-bottom: 74px; }
body.mobile.page-room .board:has(.start[hidden]) .metro { margin-bottom: 0; }

/* Вход и регистрация на доске (гость, sync.js gateBoard): надписи мелом, поля — бумажные плашки с обводкой тушью
   (как ярлыки меню и стикеры), подпись над полем; кнопка — как «Начать занятие» */
.board.guest > :not(.gate-box) { display: none !important; }
.gate-box, .gate { display: flex; flex-direction: column; flex: 1; min-height: 0; }
body.guest .notes, body.guest .scene .notes-g { visibility: hidden; } /* у гостя стикеры пустые — не показываем */
body.mobile.guest .notes { display: none; }
.gate-tabs { display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 4px 0 2px; }
.gate-tabs button { position: relative; background: none; border: 0; padding: 0 0 6px; cursor: pointer; font: 700 40px/1 var(--chalkF); color: rgba(185, 196, 182, .75); transition: color .2s; }
.gate-tabs button:hover { color: var(--chalk); }
.gate-tabs [aria-selected="true"] { color: var(--chalkY); }
.gate-tabs [aria-selected="true"]::after { content: ''; position: absolute; left: -2%; right: -4%; bottom: 0; height: 10px; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8 C40 3 90 4 130 6 S180 8 197 4' fill='none' stroke='%23ffe58a' stroke-width='3.2' stroke-linecap='round' opacity='.85'/%3E%3C/svg%3E"); }
.gate-tabs button:focus-visible, .gate-eye:focus-visible { outline: 3px dashed var(--chalkY); outline-offset: 3px; border-radius: 6px; }
.gate-f { position: relative; display: block; padding: 4px 0 0; cursor: text; }
.gate-f span { display: block; margin: 0 0 2px 2px; font: 17px/1.2 var(--hand); color: var(--chalk2); }
.gate-f:focus-within span { color: var(--chalkY); }
.gate-f input { display: block; width: 100%; min-width: 0; padding: 7px 12px; outline: 0; font: 600 18px/1.3 'Zen Kaku Gothic New', sans-serif; color: var(--ink); background: var(--paper); border: 2.5px solid var(--ink); border-radius: 11px; box-shadow: 0 4px 0 var(--ink); }
.gate-f input::placeholder { color: #a8998a; font-weight: 400; }
.gate-f input:focus { background: #fffaf0; box-shadow: 0 4px 0 var(--ink), 0 0 0 4px var(--chalkY); }
.gate-f input:-webkit-autofill { -webkit-text-fill-color: var(--ink); caret-color: var(--ink); box-shadow: 0 4px 0 var(--ink), 0 0 0 40px var(--paper) inset; transition: background-color 9999s; }
.gate-f:has(.gate-eye) input { padding-right: 84px; }
.gate-eye { position: absolute; right: 12px; bottom: 15px; background: none; border: 0; padding: 0; cursor: pointer; font: 600 14px/1 'Zen Kaku Gothic New', sans-serif; color: #7a6a5c; text-decoration: underline dotted; text-underline-offset: 4px; }
.gate-eye:focus-visible { outline-color: var(--ink); }
.gate-note { margin: 9px 0 0; font: 16px/1.25 var(--hand); color: var(--chalk2); }
.gate-err { margin: 6px 0 0; font: 18px/1.25 var(--hand); color: var(--chalkP); }
.gate-err:empty { display: none; }
.gate .start { margin-top: 12px; padding: 12px 24px; width: 100%; cursor: pointer; }
.gate .start:disabled { opacity: .7; cursor: progress; }
body.mobile .gate .start { margin: 16px 0 4px; }
/* гость нажал раздел меню — доска входа вздрагивает (sync.js) */
.board.guest.nudge .gate-box { animation: gate-nudge .45s; } /* вздрагивает надпись мелом, а не сама доска — она нарисована в сцене */
@keyframes gate-nudge { 20% { transform: translateX(-8px) rotate(-.4deg); } 45% { transform: translateX(7px) rotate(.3deg); } 70% { transform: translateX(-4px); } }
@media (prefers-reduced-motion: reduce) { .board.guest.nudge .gate-box { animation: none; } }
/* подсказка «отметьте выученные ряды» — только если выбрано «Знаю часть рядов» */
#onboard .onboard-some { display: none; }
#onboard:has(.seg [data-v="some"][aria-pressed="true"]) .onboard-some { display: block; }
/* в плане 6+ шагов — подписи в две строки, а не «Повторен…» */
.page-room .metro:has(li:nth-child(6)) span { white-space: normal; overflow: visible; text-overflow: clip; font-size: 14px; line-height: 1.05; text-align: center; }
/* «Где вы»: урок, который осваиваем, и порог теста */
.page-room .where-lesson { margin: 8px 0 0; font-weight: 600; }