/* Tsubasa web v5: iOS glass, responsive reader defaults, vertical-layout fixes. */

/* Safari/iPad: backdrop blur only reads as glass when the fill itself is
   translucent. Avoid the v4 translateZ compositing layer and use an explicit
   semi-transparent milk fill so WebKit can sample the EPUB behind the panel. */
.dict-popup,
.dict-panel,
.kpop-wrap {
  background: rgba(252,250,247,.52) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%) !important;
  backdrop-filter: blur(18px) saturate(155%) !important;
}
.dark .dict-popup,
.dark .dict-panel,
.dark .kpop-wrap,
html.dark .dict-popup,
html.dark .dict-panel,
html.dark .kpop-wrap {
  background: rgba(34,28,21,.50) !important;
}

/* Give iOS a slightly more transparent fill. Even if Reduce Transparency or
   an engine quirk weakens the blur, the panel no longer appears opaque. */
@supports (-webkit-touch-callout: none) {
  .dict-popup,
  .dict-panel,
  .kpop-wrap {
    background: rgba(252,250,247,.46) !important;
    -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  }
  .dark .dict-popup,
  .dark .dict-panel,
  .dark .kpop-wrap,
  html.dark .dict-popup,
  html.dark .dict-panel,
  html.dark .kpop-wrap {
    background: rgba(34,28,21,.44) !important;
  }
}

.reader-scroll,
.dict-panel-scroll,
.dict-popup-scrollable,
.sidebar-toc,
.vocab-list {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.reader-scroll { min-width: 0; min-height: 0; }
.dict-panel-scroll,
.dict-popup-scrollable { touch-action: pan-y; }

/* Touch devices pay a high compositor cost when every persistent surface has
   a large blur while the EPUB moves underneath. Keep strong glass on popup
   surfaces but make always-visible chrome/cards cheaper. */
@media (hover: none), (pointer: coarse) {
  .topbar,
  .bottombar,
  .vocab-header,
  .library-header,
  .anki-header {
    -webkit-backdrop-filter: blur(8px) saturate(125%) !important;
    backdrop-filter: blur(8px) saturate(125%) !important;
  }
  .book-card,
  .vocab-card,
  .stats-card,
  .dropzone,
  .hint-row {
    -webkit-backdrop-filter: blur(6px) saturate(125%) !important;
    backdrop-filter: blur(6px) saturate(125%) !important;
  }
  .book-card::after,
  .vocab-card::after,
  .stats-card::after,
  .dict-popup::after,
  .dict-panel::after,
  .kpop-wrap::after,
  .nav-btn::after,
  .toggle::after,
  .library-import-btn::after,
  .topbar-btn::after { transition: none !important; }
}

/* Vertical Japanese reading (left/right scrolling): size from the actual
   reader flex box instead of a guessed 100vh minus bars. This leaves physical
   bottom breathing room and prevents image-only sections from using viewport
   height as their width limit. */
.vertical-mode .reader-scroll { align-items: stretch !important; }
.vertical-mode .reader-content {
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding-top: 22px !important;
  padding-bottom: 30px !important;
}
.vertical-mode .chapter-content {
  height: 100%;
  min-height: 0;
}
.vertical-mode .chapter-content img {
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 48px) !important;
  max-height: calc(100% - 24px) !important;
  object-fit: contain !important;
}
.vertical-mode .chapter-content figure {
  max-height: 100%;
}

/* v4/v5 configurable dictionary sizing. */
.dict-panel .dict-word { font-size: 1.7143em; }
.dict-panel .dict-reading,
.dict-panel .dict-sense-gloss,
.dict-panel .dict-meaning { font-size: 1em; }
.dict-panel .dict-num { font-size: .8571em; }
.dict-panel .dict-pos,
.dict-panel .dict-badge { font-size: .7143em; }
.dict-panel .jd-example-ja,
.dict-panel .dict-panel-inflected,
.dict-panel .dict-sentence-text,
.dict-panel .dict-pitch { font-size: .9286em; }
.dict-panel .jd-example-en,
.dict-panel .dict-reasons,
.dict-panel .dict-info,
.dict-panel .dict-note,
.dict-panel .dict-reference,
.dict-panel .dict-forms,
.dict-panel .dict-component-reading,
.dict-panel .dict-component-meaning,
.dict-panel .dict-expand-btn { font-size: .7857em; }
.dict-panel .dict-component-word { font-size: 1.1429em; }
.dict-panel .dict-definition-toggle,
.dict-panel .dict-components-label { font-size: .7143em; }
.dict-panel .dict-audio-status { font-size: .6429em; }

/* Touch dictionary remains an edge-flush opposite-half sheet. */
@media (max-width: 1400px) and (pointer: coarse) {
  .dict-panel {
    max-width: none !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }
}

/* Phone library/header layout: don't squeeze logo + Saved + Anki + Settings +
   Add Book into one line. Keep compact actions on row one and the import action
   centered on its own row. Also compact the in-reader bar. */
@media (max-width: 600px) {
  .library-header {
    flex-wrap: wrap;
    gap: 7px !important;
    padding: 9px 10px !important;
    padding-left: max(10px, env(safe-area-inset-left)) !important;
    padding-right: max(10px, env(safe-area-inset-right)) !important;
  }
  .library-logo { min-width: 0; }
  .library-logo .logo-main {
    font-size: 20px !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap;
  }
  .library-vocab-btn {
    width: 32px !important;
    height: 32px !important;
  }
  .library-import-btn {
    order: 20;
    flex: 1 0 100%;
    justify-content: center;
    min-height: 36px;
    padding: 8px 12px !important;
  }
  .library-list {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .topbar {
    gap: 4px !important;
    padding: 5px 8px !important;
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }
  .topbar-btn {
    min-width: 30px;
    min-height: 30px;
    padding: 3px !important;
    font-size: 15px !important;
  }
  .topbar-title { font-size: 10px !important; }
  .topbar .topbar-btn:last-child {
    font-size: 11px !important;
    letter-spacing: -1px;
  }
}