/* ui.css — пульт: угловые панели, полоса озвучки (⏪▶ ползунок),
   меню каратэ-разметки, треклист, автоскрытие пульта.
   Кнопка каратэ-подсветки (toolsBtn) — как все: белый круг, тёмный
   микрофон; ВКЛ = чистый микрофон (.active → .ic-on), ВЫКЛ = с чертой.
   Музыка — последняя в ряду (правый край, как изначально);
   маркеры (karCorner) — справа от кнопки музыки. */
.dock{position:relative;z-index:120;display:flex;align-items:center;justify-content:space-between;gap:8px;width:min(1200px,96vw);margin-top:10px}
.corner{position:relative}
.corner-btn{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid #e4e4e4;box-shadow:0 6px 20px rgba(0,0,0,.10);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s}
.corner-btn:hover{background:#f1f1f1}
.corner-btn svg{width:20px;height:20px;stroke:#111;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.corner .card{position:absolute;bottom:calc(100% + 8px);display:none;min-width:240px;max-height:320px;overflow-y:auto;background:#fff;border:1px solid #ececec;border-radius:16px;padding:8px;box-shadow:0 14px 40px rgba(0,0,0,.16);font-family:system-ui,sans-serif}
#ambCorner .card{left:auto;right:calc(100% + 10px);bottom:0}
#musicCorner .card{right:auto;left:calc(100% + 10px);bottom:0;min-width:300px;overflow:visible}
#karCorner .card{left:calc(100% + 10px);right:auto;bottom:0;min-width:320px}/* каратэ-подсветка: белая кнопка, состояние — иконкой */
#toolsCorner .ic-off{display:block}
#toolsCorner .ic-on{display:none}
#toolsCorner .corner-btn.active .ic-off{display:none}
#toolsCorner .corner-btn.active .ic-on{display:block}
/* режим видео/фото: состояние — иконкой */
#videoCorner .ic-off{display:block}
#videoCorner .ic-on{display:none}
#videoCorner .corner-btn.active .ic-off{display:none}
#videoCorner .corner-btn.active .ic-on{display:block}
.corner.open .card{display:block;animation:rise .22s ease}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.mrow{display:flex;align-items:center;justify-content:center;gap:6px}
.mrow+.mrow{margin-top:4px}
#musicPanel button{background:none;border:none;cursor:pointer;color:#111;font-family:system-ui,sans-serif;font-size:13px;padding:4px 8px;border-radius:999px;display:flex;align-items:center;gap:4px;transition:background .2s}
#musicPanel button:hover{background:#f1f1f1}
#musicPanel button.active{background:#111;color:#fff}
#musicPanel svg{width:18px;height:18px;stroke:#111;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#musicPanel button.active svg{stroke:#fff}
#nowPlaying{color:#8a8a8a;font-size:12px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#musicPanel input[type=range]{width:80px;accent-color:#111;cursor:pointer}

.m-item{padding:9px 12px;cursor:pointer;color:#222;border-radius:10px;font-size:14px;display:flex;gap:8px;align-items:center;margin-bottom:2px;transition:background .15s}
.m-item:hover{background:#f4f4f4}
.m-item.current,.m-item.playing{background:#111;color:#fff}
.m-item .num{opacity:.5;font-size:12px;min-width:16px;text-align:right}
.m-item .vol{margin-left:auto;width:52px;accent-color:#111;cursor:pointer}
.m-empty{padding:14px;color:#9a9a9a;font-size:13px;text-align:center}

.tracklist{position:fixed;right:16px;bottom:70px;width:300px;max-height:320px;background:#fff;border:1px solid #ececec;border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.16);display:none;flex-direction:column;overflow:hidden;z-index:130;font-family:system-ui,sans-serif}
.tracklist.open{display:flex;animation:rise .22s ease}
.tl-tabs{display:flex;background:#f4f4f4;border-radius:12px;margin:8px;padding:3px}
.tl-tab{flex:1;padding:8px 6px;text-align:center;color:#555;font-size:14px;cursor:pointer;border-radius:9px}
.tl-tab.active{background:#111;color:#fff}
.tl-items{overflow-y:auto;padding:2px 8px 8px}

/* ---------- полоса озвучки ---------- */
.auto-bar{display:flex;align-items:center;gap:10px;height:44px;width:min(420px,58vw);background:#fff;border:1px solid #e4e4e4;border-radius:999px;padding:6px 14px;box-shadow:0 6px 20px rgba(0,0,0,.10);opacity:0;pointer-events:none;transition:opacity .3s}
.auto-bar.show{opacity:1;pointer-events:auto}
.auto-btn{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid #e4e4e4;box-shadow:0 2px 8px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .2s;padding:0}
.auto-btn:hover{background:#f1f1f1}
.auto-btn svg{width:16px;height:16px;fill:#111;stroke:none}
.auto-btn .ic-pause{display:none}
.auto-btn.playing{background:#111;border-color:#111}
.auto-btn.playing svg{fill:#fff}
.auto-btn.playing .ic-pause{display:block}
.auto-btn.playing .ic-play{display:none}
#autoSlider{flex:1 1 auto;width:100%;accent-color:#111;cursor:pointer;height:18px;background:transparent}

/* ---------- кнопки перемотки ±10 сек (плей между ними) ---------- */
.skip-btn{
  width:26px;height:26px;border-radius:50%;
  background:#fff;border:1px solid #e4e4e4;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex:0 0 auto;padding:0;
  transition:background .2s,transform .1s;
  touch-action:none;
}
.skip-btn:hover{background:#f1f1f1}
.skip-btn:active{transform:scale(.94)}
.skip-btn svg{width:13px;height:13px;fill:#111;stroke:none}

/* ---------- меню каратэ-разметки ---------- */
.tc-now{display:flex;justify-content:space-between;font-family:ui-monospace,Menlo,monospace;font-size:13px;color:#111;padding:6px 8px}
.tc-hint{padding:4px 8px 8px;color:#9a9a9a;font-size:12px;line-height:1.45}
.tc-videos{display:flex;flex-wrap:wrap;gap:6px;padding:0 8px 8px}
.tc-videos button{background:#f1f1f1;border:1px solid #e4e4e4;border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer}
.tc-videos button:hover{background:#e4e4e4}
.tc-log{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#333;max-height:140px;overflow-y:auto;padding:0 8px 8px;white-space:pre}
.tc-actions{display:flex;gap:6px;padding:0 8px 4px}
.tc-actions button{flex:1;background:#111;color:#fff;border:none;border-radius:8px;padding:6px;font-size:12px;cursor:pointer}
.tc-actions button:hover{opacity:.85}
.tc-actions #tcClear{background:#f1f1f1;color:#111}

/* ---------- счётчик страниц над ползунком ---------- */
.auto-bar{position:relative}
.auto-count{
  position:absolute;
  bottom:calc(100% + 6px);
  left:50%;
  transform:translateX(-50%);
  background:rgba(17,17,17,.85);
  color:#fff;
  font-family:system-ui,sans-serif;
  font-size:12px;
  line-height:1;
  padding:4px 10px;
  border-radius:10px;
  white-space:nowrap;
  pointer-events:none;
  z-index:5;
}

/* ---------- автоскрытие пульта: нет курсора 3 с ---------- */
.dock{transition:opacity .35s}
.dock.hidden{opacity:0;pointer-events:none}
.auto-bar{opacity:1;pointer-events:auto}

/* ---------- маркеры: часики вне ряда, справа от музыки ---------- */
#karCorner{
  position:absolute;
  top:50%;
  right:0;
  transform:translate(calc(100% + 10px),-50%);
}
@media(max-width:1300px){
  #karCorner{position:static;transform:none}
}
/* карточка разметки: ВСЕГДА над кнопкой, правый край — у кнопки */
#karCorner .card{
  left:auto;
  right:0;
  bottom:calc(100% + 8px);
  margin-right:-220px;   /* сдвиг вправо; подбери число под глаз */
  min-width:320px;
  max-height:60vh;
  overflow-y:auto;
}
/* ---------- адаптив ---------- */
@media(max-width:700px){
  body{padding:6px 6px 64px}
  .corner-btn{width:36px;height:36px}
  #ambCorner{left:8px}
  #musicCorner{right:8px}
  #ambCorner .card{right:auto;left:0;bottom:calc(100% + 8px)}
  #musicCorner .card{left:auto;right:0;bottom:calc(100% + 8px)}
  #karCorner .card{left:auto;right:0;bottom:calc(100% + 8px)}
  .auto-bar{width:min(300px,56vw)}
}
@media(max-width:1100px){
  #ambCorner .card{left:calc(100% + 10px);right:auto;bottom:0}
  #musicCorner .card{right:calc(100% + 10px);left:auto;bottom:0}
  /* karCorner НЕ возвращаем вбок — карточка остаётся над кнопкой */
}
/* клиентский режим: спрятать кнопку разметки (часы) */
#karCorner{display:none !important}
/* ---------- телефон/планшет: гасим вертикальный скролл и «резинку» ----------
   Скролл/оверскролл прячет адресную строку браузера → прилетает window.resize →
   render.js пересобирал книгу → видео перезагружались, озвучка стопалась.
   Блокируем скролл: книга и так рассчитана под экран (117vh), scroll не нужен. */
@media (pointer:coarse){
  html,body{overscroll-behavior:none}
  body{position:fixed;inset:0;width:100%;height:100%;min-height:0;overflow:hidden}
  /* body больше не растягивается: если книга+пульт не помещались в невысокий
     экран, flex сжимал книгу ПО ВЫСОТЕ (ширина не менялась) — пропорция
     ломалась, --bookH расходилась с реальной высотой страницы, и текст
     переставал помещаться в поля. Запрещаем сжатие и резервируем место
     под пульт: ограничение высоты книги 117vh -> 105vh. */
  :root{--bookH:calc(min(1200px,96vw,105vh)/1.5)}
  .book{width:min(1200px,96vw,105vh);flex:0 0 auto}
  .dock{flex:0 0 auto}
}
@media (pointer:coarse) and (max-height:560px){
  body{padding:6px}
}
/* ---------- кнопки зума (мобильные, справа от книги) ----------
   Видны только на тач-устройствах; появляются касанием и держатся,
   пока масштаб != 1; при масштабе 1 прячутся через 3 с, чтобы в
   портрете не перекрывать правую страницу. */
.zoombar{position:fixed;right:6px;top:50%;transform:translateY(-50%);z-index:125;
  display:none;flex-direction:column;gap:8px;
  opacity:0;pointer-events:none;transition:opacity .3s}
@media (pointer:coarse){.zoombar{display:flex}}
.zoombar.show,.zoombar.zoomed{opacity:1;pointer-events:auto}
.zoom-btn{width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.92);border:1px solid #e4e4e4;
  box-shadow:0 6px 20px rgba(0,0,0,.10);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;transition:transform .1s}
.zoom-btn:active{transform:scale(.94)}
.zoom-btn svg{width:20px;height:20px;stroke:#111;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* ---------- невидимая полоса перелистывания внизу книги ----------
   Тап/клик: правая половина = вперёд, левая = назад.
   Перетаскивание по полосе НЕ листает — двигает книгу (render.js),
   клик после перетаскивания глотается там же. */
.flipbar{position:absolute;left:0;right:0;bottom:0;height:1cm;
  z-index:110;cursor:pointer;background:transparent;border:none}
/* ---------- полноэкранный режим ----------
   Книга занимает весь экран (док/треклист/зум прячутся), озвучка и
   видео не прерываются: пересборки нет, только класс body.fs и
   нативный fullscreen, где браузер его поддерживает. */
body.fs{padding:0;--bookH:calc(min(100vw,150vh)/1.5)}
body.fs .book{width:min(100vw,150vh);height:var(--bookH);flex:0 0 auto}
body.fs .dock,body.fs .zoombar,body.fs .tracklist{display:none !important}
.fs-bar{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);
  z-index:140;display:none;align-items:center;gap:10px;
  padding:6px 10px;border-radius:999px;
  background:rgba(255,255,255,.92);box-shadow:0 6px 20px rgba(0,0,0,.18);
  opacity:0;pointer-events:none;transition:opacity .3s}
body.fs .fs-bar{display:flex}
.fs-bar.show{opacity:1;pointer-events:auto}
.fs-btn{width:44px;height:44px;border-radius:50%;background:#fff;
  border:1px solid #e4e4e4;box-shadow:0 2px 8px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;transition:transform .1s}
.fs-btn:active{transform:scale(.94)}
.fs-btn svg{width:20px;height:20px;fill:#111;stroke:#111;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
#fsExit svg{fill:none;stroke-width:2}