/* Живые правила — книга на столе: бумага, тушь, обложка, разворот, панель. */
@font-face { font-family: Playfair; src: url(../fonts/playfair.woff2) format('woff2'); font-weight: 400 900; font-display: swap; }
@font-face { font-family: Caveat; src: url(../fonts/caveat-cyrillic.woff2) format('woff2'); unicode-range: U+0400-045F, U+2116; font-display: swap; }
@font-face { font-family: Caveat; src: url(../fonts/caveat-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+2190-21FF; font-display: swap; }

:root {
  --paper: #f7f2e5; --ink: #2b2d38; --pencil: #5b5e6b; --red: #c4402f; --blue: #2d5fb5;
  --cloth: #2e5a4b; --gold: #dcbd6a; --felt: #9db1a7;
  --serif: Georgia, "Noto Serif", "PT Serif", "Times New Roman", serif;
  --hand: Caveat, "Comic Sans MS", cursive;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --b: 12px;                                                   /* поле переплёта вокруг страниц */
  --ph: min(calc(100vh - 140px), calc((100vw - 80px) / 2 / .74)); /* высота страницы */
  --pw: calc(var(--ph) * .74);                                 /* ширина страницы */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--serif); color: var(--ink); overflow: hidden;
  background:
    radial-gradient(90% 70% at 18% -10%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(60% 50% at 100% 100%, rgba(60,50,30,.12), transparent 70%),
    repeating-linear-gradient(90deg, #e9e5dd 0 150px, #d8d2c6 150px 152px, #e5e0d7 152px 310px, #d6d0c4 310px 312px);
}
button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* стол и войлочный коврик */
.desk { position: fixed; inset: 0; display: grid; place-items: center; perspective: 2200px; padding-bottom: 74px; }
.desk::before {
  content: ''; position: absolute; inset: 3vh 3vw 1.5vh; border-radius: 18px;
  background: var(--felt) var(--noise);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), inset 0 -40px 80px rgba(40,60,50,.12), 0 1px 0 rgba(255,255,255,.5);
}

/* книга */
.book {
  position: relative; width: calc(var(--pw) * 2 + var(--b) * 2); height: calc(var(--ph) + var(--b) * 2);
  transition: transform 1.3s cubic-bezier(.6,.05,.25,1);
}
.book:not(.open) { transform: translateX(calc((var(--pw) + var(--b)) / -2)) rotateX(30deg) rotateZ(-6deg) scale(.86); }
.ribbon {
  position: absolute; left: calc(var(--b) + var(--pw) - 7px); bottom: -52px; width: 14px; height: 90px;
  background: linear-gradient(90deg, #1d2c66, #2d4190 50%, #1d2c66);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%);
}
.spread {
  position: absolute; inset: 0; border-radius: 10px; background: var(--cloth) var(--noise);
  box-shadow: 0 34px 50px -22px rgba(25,40,32,.6), 0 8px 16px rgba(25,40,32,.25);
  transition: clip-path 1s .2s ease;
}
.book:not(.open) .spread { clip-path: inset(0 0 0 50%); }
.page {
  position: absolute; top: var(--b); width: var(--pw); height: var(--ph);
  font-size: calc(var(--ph) / 48); line-height: 1.36; padding: 2.2em 2.6em 1.9em;
  background-color: var(--paper); overflow: hidden; touch-action: pan-y;
  display: flex; flex-direction: column;
}
.page.left {
  left: var(--b); border-radius: 3px 0 0 3px;
  background-image: linear-gradient(90deg, rgba(80,60,30,.05), transparent 6%, transparent 84%, rgba(80,60,30,.16)), var(--noise);
  box-shadow: -1px 0 0 #e4dcc8, -3px 0 0 #f2ecdd, -4px 0 0 #d9d0bb;
}
.page.right {
  left: calc(var(--b) + var(--pw)); border-radius: 0 3px 3px 0;
  background-image: linear-gradient(270deg, rgba(80,60,30,.05), transparent 6%, transparent 84%, rgba(80,60,30,.2)), var(--noise);
  box-shadow: 1px 0 0 #e4dcc8, 3px 0 0 #f2ecdd, 4px 0 0 #d9d0bb;
}
.pageno { position: absolute; bottom: 1em; font-size: .7em; color: var(--pencil); }
.left .pageno { left: 1.7em; }
.right .pageno { right: 1.7em; }

/* обложка */
.cover {
  position: absolute; top: 0; left: calc(var(--pw) + var(--b)); width: calc(var(--pw) + var(--b)); height: 100%;
  padding: 0; border: 0; background: none; z-index: 5; transform-origin: left center; transform-style: preserve-3d;
  transition: transform 1.2s cubic-bezier(.5,.05,.3,1), visibility 0s 1.2s;
}
.book.open .cover { transform: perspective(2400px) rotateY(-180deg); visibility: hidden; }
.cover-front, .cover-back { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 3px 10px 10px 3px; }
.cover-front {
  display: flex; padding: 8% 9%; background: var(--cloth) var(--noise);
  box-shadow: inset 7px 0 10px -6px rgba(0,0,0,.55), 2px 2px 0 #f1ebdc, 4px 4px 0 #d8cfba, 6px 6px 0 #efe8d7,
    8px 8px 0 #d4cbb5, 10px 11px 0 #24493c, 34px 44px 50px -12px rgba(20,32,26,.55);
}
.cover-back { transform: rotateY(180deg); background: #e7ddc5 repeating-linear-gradient(45deg, rgba(46,90,75,.12) 0 2px, transparent 2px 12px); }
.cover-frame {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.5%;
  border: 2px solid rgba(220,189,106,.75); outline: 1px solid rgba(220,189,106,.45); outline-offset: 6px;
  border-radius: 4px; color: var(--gold); text-align: center;
}
.cover-title {
  font-family: Playfair, var(--serif); font-weight: 700; font-size: calc(var(--ph) / 10.5); line-height: .98;
  text-shadow: 0 1px 0 rgba(0,0,0,.45), 0 -1px 0 rgba(255,255,255,.18);
}
.cover-sub { font-size: calc(var(--ph) / 40); letter-spacing: .22em; text-transform: uppercase; }
.cover-window {
  position: relative; width: 62%; aspect-ratio: 1.1; display: grid; place-items: center; margin-top: 3%;
  background: var(--paper) var(--noise); border: 6px solid #e9dfc6;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18), 0 2px 7px rgba(0,0,0,.4);
}
.cover-window svg { width: 52%; margin-top: 8%; }
.cover-comma {
  position: absolute; right: 12%; top: -2%; font-family: Playfair, var(--serif); font-weight: 700;
  font-size: calc(var(--ph) / 5); line-height: 1; color: var(--red);
}
.cover-hint { font-family: var(--hand); font-size: calc(var(--ph) / 24); opacity: .85; animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }

/* левая страница: правило, прогноз, клапан */
.kicker { font-size: .68em; letter-spacing: .16em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: .45em; }
.page h1 { font-family: Playfair, var(--serif); font-weight: 700; font-size: 2.35em; line-height: 1.02; margin: 0 0 .3em; }
.rule { margin: 0 0 .75em; }
.rule b, .flap-under b { font-weight: 700; }
.red { color: var(--red); }
.helpers { width: 100%; border-collapse: collapse; font-size: .86em; margin: 0 0 .75em; background: rgba(255,255,255,.4); border: 1px solid rgba(43,45,56,.2); }
.helpers caption { caption-side: top; text-align: left; font-size: .78em; letter-spacing: .14em; text-transform: uppercase; color: var(--pencil); padding-bottom: .25em; }
.helpers td { padding: .14em .6em; border-top: 1px dashed rgba(43,45,56,.15); }
.helpers td:first-child { font-weight: 700; }
.helpers td:nth-child(2) { font-style: italic; color: var(--pencil); }
.helpers td:last-child { color: var(--blue); white-space: nowrap; }
.words { display: grid; grid-template-columns: auto 1fr; gap: .05em .7em; font-size: .82em; margin: 0 0 .7em; }
.words dt { font-weight: 700; }
.words dd { margin: 0; font-style: italic; }
.label { font-size: .66em; letter-spacing: .16em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: .2em; }
.predict p { margin: 0 0 .25em; }
.gap { color: var(--red); }
.opts { display: flex; flex-wrap: wrap; gap: .15em 1.6em; }
.opts button { display: flex; align-items: center; gap: .5em; border: 0; background: none; padding: .1em 0; font-size: 1.05em; }
.opts .box { position: relative; flex: none; width: .95em; height: .95em; border: 1.5px solid var(--ink); border-radius: 2px; }
.opts .picked .box::after { content: '✓'; position: absolute; left: -.05em; top: -.7em; font-family: var(--hand); font-size: 1.8em; color: var(--blue); }
.verdict { font-family: var(--hand); font-size: 1.35em; line-height: 1.1; color: var(--blue); min-height: 1.15em; }
.flap { position: relative; margin: .5em 0 .4em; perspective: 900px; cursor: pointer; }
.flap-under { padding: .65em .9em; font-size: .9em; background: #fffaf0; border: 1px solid rgba(43,45,56,.14); border-radius: 4px; }
.flap-top {
  position: absolute; inset: 0; padding: .55em .9em; border-radius: 4px; overflow: hidden;
  background: #efe3c6 var(--noise); box-shadow: 0 2px 4px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.4);
  transform-origin: top center; backface-visibility: hidden; transition: transform .8s cubic-bezier(.3,1.25,.5,1);
}
.flap.open .flap-top { transform: rotateX(-165deg); }
.flap-top .why { display: block; font-size: .66em; letter-spacing: .16em; color: var(--red); font-weight: 700; }
.flap-top strong { display: block; font-family: Playfair, var(--serif); font-size: 1.2em; line-height: 1.15; }
.flap-top small { font-style: italic; color: var(--pencil); }
.flap-top .lift { position: absolute; right: .7em; top: .3em; font-family: var(--hand); font-size: 1.25em; color: var(--pencil); transform: rotate(-6deg); }
.flap.locked .flap-top { filter: saturate(.7); }
.shake { animation: shake .45s; }
@keyframes shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* разворот «Закрепляем»: список заданий слева, задание справа (js/book.js showDrill) */
.drills { list-style: none; margin: .2em 0 .5em; padding: 0; display: grid; gap: .15em; }
.drills button {
  display: flex; align-items: baseline; gap: .55em; width: 100%; padding: .22em .4em; border: 0; border-radius: 4px;
  background: none; text-align: left; font-size: .92em; line-height: 1.28;
}
.drills button:hover { background: rgba(0,0,0,.04); }
.drills .mark {
  flex: none; display: grid; place-items: center; width: 1.35em; height: 1.35em; border: 1.5px solid var(--ink); border-radius: 50%;
  font-family: var(--hand); font-size: 1em; line-height: 1;
}
.drills .done .mark { background: var(--blue); border-color: var(--blue); color: transparent; position: relative; }
.drills .done .mark::after { content: '✓'; position: absolute; color: #fff; font-family: var(--serif); font-size: .8em; }
.drills .cur button { background: rgba(45,95,181,.09); box-shadow: inset 3px 0 0 var(--blue); }
.drill-q { margin: .55em 0 .2em; font-size: 1.12em; line-height: 1.3; text-align: center; }
.drill-box { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.drill-box .scene-top > .kicker { visibility: hidden; }   /* «Опыт» из сцены урока — здесь заголовок «Задание N из M» */
.drill-next { padding: .2em 1em; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); font-size: .9em; }

/* перелистывание: чистый лист проходит над разворотом (js/book.js turn) */
.leaf {
  position: absolute; top: var(--b); left: calc(var(--b) + var(--pw)); width: var(--pw); height: var(--ph); z-index: 4;
  background: var(--paper) var(--noise); transform-origin: left center; pointer-events: none;
  box-shadow: -6px 0 18px rgba(40,30,15,.18); animation: leaf .68s ease-in-out forwards;
}
.leaf.back { left: var(--b); transform-origin: right center; animation-name: leaf-back; }
@keyframes leaf { to { transform: perspective(2400px) rotateY(-180deg); } }
@keyframes leaf-back { to { transform: perspective(2400px) rotateY(180deg); } }

/* поля: Запятыш, задание, штамп */
.foot { margin-top: auto; display: flex; align-items: flex-end; gap: .7em; }
.zap-svg { width: 3.4em; flex: none; }
.foot-mid { flex: 1; min-width: 0; }
.bubble {
  position: relative; margin: 0 0 .45em; padding: .3em .6em; font-family: var(--hand); font-size: 1.18em; line-height: 1.08;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 12px 12px 12px 2px;
}
.bubble b { color: var(--red); }
.task { margin: 0; font-size: .8em; font-style: italic; }
.task .count { font-style: normal; color: var(--blue); white-space: nowrap; }
.stampbox { position: relative; flex: none; width: 5.2em; height: 5.2em; border: 1.5px dashed rgba(43,45,56,.35); border-radius: 50%; display: grid; place-items: center; }
.stampbox::before { content: 'штамп'; font-family: var(--hand); color: rgba(43,45,56,.4); }
.stamp {
  position: absolute; inset: -.25em; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 50%; border: .24em double var(--red); color: var(--red); background: var(--paper);
  text-transform: uppercase; text-align: center; line-height: 1.05; transform: rotate(-14deg); opacity: 0;
}
.stamp b { max-width: 80%; font-family: Playfair, var(--serif); font-size: .82em; letter-spacing: .02em; }  /* 80% — хорда круга */
.stamp small, .stamp i { font-size: .5em; letter-spacing: .12em; font-style: normal; }
.stamp.on { opacity: .88; }
.stamp.slam { animation: slam .5s cubic-bezier(.3,1.6,.5,1); }
@keyframes slam { from { transform: rotate(-30deg) scale(2.4); opacity: 0; } }

/* правая страница: сцена */
.fig { margin: .4em 0 0; padding-top: .35em; border-top: 1px solid rgba(43,45,56,.15); font-size: .78em; font-style: italic; color: var(--pencil); }
.how { margin: .1em 0 0; font-size: .92em; font-style: italic; }
.scene { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; }
.scene-top { display: flex; justify-content: space-between; align-items: center; }
.scene-top .kicker { margin: 0; }
.sent { margin: .45em 0 0; font-size: 1.3em; text-align: center; min-height: 1.4em; }
.sent .w { font-weight: 700; }
.end { display: inline-block; color: var(--red); }
.end:empty::after { content: ''; display: inline-block; width: .42em; height: .56em; margin-left: .05em; border: 2px solid var(--red); vertical-align: -.03em; }
.case { margin: .05em 0 0; text-align: center; font-size: .92em; color: var(--blue); min-height: 1.3em; }
.pop { animation: pop .55s cubic-bezier(.3,1.7,.5,1); }
@keyframes pop { from { transform: scale(1.9) translateY(-.1em); } }
.seg { display: inline-flex; border: 1.5px solid var(--ink); border-radius: 999px; overflow: hidden; font-size: .85em; }
.seg button { border: 0; background: none; padding: .18em .9em; }
.seg .on { background: var(--ink); color: var(--paper); }
.art { display: block; width: calc(100% + 2.8em); margin: .3em -1.4em; flex: 0 1 auto; min-height: 0; touch-action: none; user-select: none; -webkit-user-select: none; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .3em; font-size: .82em; }
.chips button { padding: .14em .45em; border: 1px solid rgba(43,45,56,.28); border-radius: 4px; background: rgba(255,255,255,.5); }
.chips small { margin-right: .25em; color: var(--pencil); }
.chips .seen { border-color: var(--blue); box-shadow: inset 0 -2px 0 rgba(45,95,181,.35); }
.chips .cur { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chips .cur small { color: rgba(247,242,229,.7); }

/* тушь: линии прорисовываются, рисунок встаёт с листа */
.ink { fill: none; stroke: var(--ink); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.ink.thin { stroke-width: 1.3; stroke: var(--pencil); }
.dots { fill: none; stroke: var(--blue); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: .1 9; }
.scene:not(.drawn) .art { visibility: hidden; }
.drawn .ink { stroke-dasharray: var(--len) var(--len); stroke-dashoffset: var(--len); animation: draw var(--d, .8s) ease-in-out var(--delay, 0s) forwards; }
.drawn .wash { opacity: 0; animation: fade .9s ease 1.5s forwards; }
.drawn .art { transform-origin: 50% 95%; animation: popup 1.3s cubic-bezier(.2,.9,.25,1) both; }
/* рисунок дорисован: display: none на телефоне больше не запустит анимации заново (settle в book.js) */
.scene.settled .ink { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.scene.settled .wash { animation: none; opacity: 1 !important; }
.scene.settled .art { animation: none; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes popup { from { transform: perspective(700px) rotateX(72deg); opacity: .3; } }

/* панель снизу */
.bar {
  position: fixed; left: 50%; bottom: 14px; z-index: 20; transform: translateX(-50%);
  display: flex; align-items: center; gap: 4px; min-width: min(560px, calc(100vw - 20px)); padding: 6px 8px;
  border-radius: 999px; background: rgba(226,233,229,.84); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(30,40,35,.2), inset 0 0 0 1px rgba(255,255,255,.75);
}
.bar > button { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: transparent; font-size: 20px; }
.bar > button:hover:not(:disabled) { background: rgba(0,0,0,.06); }
.bar > button:disabled { opacity: .3; cursor: default; }
.bar-title { flex: 1; padding: 0 8px; font-family: Playfair, var(--serif); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-title b { margin-right: .45em; color: var(--red); }
.bar-alt {
  flex: none; height: 32px; padding: 0 11px; line-height: 30px; border: 1px solid rgba(43,45,56,.22); border-radius: 999px;
  font-size: 13px; color: var(--pencil); text-decoration: none;
}
.bar-alt:hover { background: rgba(0,0,0,.05); }
.tabs { display: none; flex: 1; justify-content: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0,0,0,.06); }
.tabs button { flex: 1; height: 34px; padding: 0 12px; border: 0; border-radius: 999px; background: none; font-size: 15px; }
.tabs .on { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* подсказка Запятыша поверх «Опыта» на телефоне — его поля остались на странице «Правило» */
.toast { position: fixed; left: 10px; right: 10px; bottom: 72px; z-index: 25; display: flex; align-items: flex-end; gap: 6px; pointer-events: none; }
.toast[hidden] { display: none; }
.toast .zap-svg { width: 46px; }
.toast p {
  margin: 0; padding: .35em .6em; font-family: var(--hand); font-size: 18px; line-height: 1.1;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 12px 12px 12px 2px; box-shadow: 0 4px 14px rgba(0,0,0,.18);
}
.toast b { color: var(--red); }

.toc-other { display: block; margin-top: 1em; padding: .5em .8em; border: 1.5px solid var(--ink); border-radius: 999px; color: inherit; text-align: center; text-decoration: none; font-weight: 700; }
.toc-other:hover { background: rgba(0,0,0,.05); }
.toc-shelf { display: block; margin-top: .5em; text-align: center; font-size: .9em; color: var(--pencil); }

/* разворот «Оглавление» в начале книги */
.cont h3 { margin: .9em 0 .15em; font-size: .72em; letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.cont ol { margin: 0; padding: 0; list-style: none; }
.cont li { display: flex; align-items: baseline; gap: .6em; padding: .26em .3em; border-bottom: 1px dashed rgba(43,45,56,.15); }
.cont .n { flex: none; width: 1.4em; font-family: Playfair, var(--serif); color: var(--red); }
.cont .t { flex: 1; }
.cont .ok { color: var(--red); }
.cont .ready { font-weight: 700; cursor: pointer; }
.cont .ready:hover { background: rgba(0,0,0,.04); }
.cont .soon { color: rgba(43,45,56,.45); }
.cont .soon small { margin-left: auto; font-family: var(--hand); font-size: 1.1em; }
.cont .task { flex: none; padding: 0 .6em; border: 1px solid rgba(43,45,56,.25); border-radius: 999px; background: none; font-size: .76em; font-weight: 400; color: var(--pencil); }
.cont .task:hover { background: #fff; }
.page.right .cont { margin-top: 3.2em; }
.cont-links { margin-top: 1.4em; }

/* озвучка: ♪ у темы, пауза, стоп; маркер бежит по слову, которое говорит диктор */
.voice {
  position: absolute; z-index: 6; top: calc(var(--b) + var(--ph) / 48 * 1.7); right: calc(var(--pw) + var(--b) + var(--ph) / 48 * 2.4);
  display: flex; align-items: center; gap: .3em; padding: .15em; border-radius: 999px; background: var(--paper); font-size: calc(var(--ph) / 48);
}
.voice button {
  display: inline-flex; align-items: center; justify-content: center; gap: .35em; height: 2.1em; min-width: 2.1em; padding: 0 .55em;
  border: 1.5px solid var(--ink); border-radius: 999px; background: #fff; font-size: .9em;
}
.voice button[hidden], .v-bar[hidden] { display: none; }
.voice svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.voice .v-main { border-color: var(--blue); color: var(--blue); }
.voice.on .v-main { background: var(--blue); color: #fff; }
.v-bar { width: 5em; height: .35em; overflow: hidden; border-radius: 999px; background: rgba(43,45,56,.15); }
.v-bar i { display: block; width: 0; height: 100%; background: var(--blue); }
.v-hl, .v-was { border-radius: 2px; background: linear-gradient(#ffdc6b, #ffdc6b) no-repeat 0 90% / 100% 60%; }
.v-was { background-image: linear-gradient(#ffdc6b5c, #ffdc6b5c); }
.v-hl { animation: v-sweep .45s ease-out; }
dt.v-hl, dt.v-was { align-self: start; }          /* в сетке словарика dt иначе тянется на высоту пояснения */
tr.v-hl, tr.v-was { background: none; animation: none; }
tr.v-hl td { background: #ffdc6b; animation: v-row .45s ease-out; }
tr.v-was td { background: #ffdc6b5c; }
@keyframes v-sweep { from { background-size: 0 60%; } }
@keyframes v-row { from { background: transparent; } }
/* index.html: выбор книги */
.shelf-page .desk { padding-bottom: 0; }
.shelf { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4vh; }
.shelf-title { margin: 0; font-family: Playfair, var(--serif); font-size: clamp(26px, 5vh, 44px); }
.shelf-row { display: flex; gap: 4vw; }
.shelf-book {
  --ph: min(calc(100vh - 200px), 36vw); --pw: calc(var(--ph) * .74);
  position: relative; display: block; width: var(--pw); height: var(--ph); text-decoration: none;
  transition: transform .25s ease;
}
.shelf-book:hover, .shelf-book:focus-visible { transform: translateY(-8px) rotate(-1deg); }
.shelf-book .cover-window { width: 56%; }

/* вторая книга — «Живая математика»: переплёт синий */
.math { --cloth: #2b4a72; }
.math .cover-title { font-size: calc(var(--ph) / 13); }
.math .cover-comma { right: 7%; top: 2%; font-size: calc(var(--ph) / 9); }
@media (max-width: 899px), (orientation: portrait) {
  .math .cover-title { font-size: calc(var(--pw) / 7.4); }
  .math .cover-comma { font-size: calc(var(--pw) / 6); }
}

/* третья книга — «Живой английский»: переплёт вишнёвый */
.english { --cloth: #74303c; }
.english .cover-title { font-size: calc(var(--ph) / 13); }
.english .cover-comma { right: 7%; top: 2%; font-size: calc(var(--ph) / 9); }
@media (max-width: 899px), (orientation: portrait) {
  .english .cover-title { font-size: calc(var(--pw) / 7.4); }
  .english .cover-comma { font-size: calc(var(--pw) / 6); }
}

/* телефон и узкий экран: одна страница, «Правило · Опыт» */
@media (max-width: 899px), (orientation: portrait) {
  :root { --b: 7px; --pw: calc(100vw - 16px - var(--b) * 2); --ph: calc(100dvh - 92px - var(--b) * 2); }
  .desk { place-items: start center; padding: 8px 0 0; }
  .book { width: calc(var(--pw) + var(--b) * 2); }
  .book:not(.open) { transform: rotateX(14deg) scale(.9); }
  .cover-title { font-size: calc(var(--pw) / 5.2); }
  .cover-sub { font-size: calc(var(--pw) / 27); }
  .cover-hint { font-size: calc(var(--pw) / 14); }
  .ribbon { display: none; }
  .spread { transition: opacity .5s .55s; }
  .book:not(.open) .spread { clip-path: none; opacity: 0; }
  .page.left, .page.right, .leaf, .leaf.back { left: var(--b); border-radius: 3px; background-image: var(--noise); box-shadow: none; }
  .leaf, .leaf.back { transform-origin: left center; animation-name: leaf; }
  body:not([data-tab="R"]) .page.right, body[data-tab="R"] .page.left { display: none; }
  .page { font-size: calc(var(--pw) / 22.5); padding: 1.5em 1.3em 1.5em; overflow-y: auto; }
  .pageno { display: none; }
  .helpers { font-size: .8em; }
  .helpers td { padding: .12em .35em; }
  .helpers td:last-child { white-space: normal; }
  .art { width: calc(100% + 2.2em); margin: .3em -1.1em; }
  .cover { left: 0; width: 100%; }
  .bar { min-width: 0; width: calc(100vw - 20px); bottom: 10px; }
  .bar-title, .bar .book-alt { display: none; }
  .tabs { display: flex; }
  .at-cont .tabs { visibility: hidden; }
  .voice { top: calc(var(--b) + .4em); right: calc(var(--b) + .5em); font-size: 15px; }
  .voiced .page { padding-top: 3.2em; }           /* панель над текстом, а не поверх подзаголовка */
  .shelf { gap: 2vh; padding-top: 18px; }
  .shelf-title { font-size: 26px; }
  .shelf-row { flex-wrap: wrap; justify-content: center; gap: 2.5vh 12px; }   /* две книги в ряд, третья под ними */
  .shelf-book { --ph: min(calc((100dvh - 150px) / 2), 60vw); }
  .shelf-book .cover-sub { font-size: calc(var(--pw) / 18); letter-spacing: .08em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: .01s !important; transition-delay: 0s !important;
  }
}