/* v61: this file intentionally loads after every historical style override. */
.result-grid > article {
  overflow: hidden !important;
}

/* v82 — device-independent icons.
   The original button/link text and DOM are preserved so all existing click,
   keyboard and React handlers continue to work. Only the visual glyph changes. */
.ebook-expand,
.video-actions button:last-child,
.social .section-heading > a,
.video-buttons button:first-child {
  font-size: 0 !important;
}

.ebook-expand::before,
.video-actions button:last-child::before,
.social .section-heading > a::before,
.video-buttons button:first-child::before {
  display: inline-block;
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: normal;
  pointer-events: none;
}

.ebook-expand::before {
  content: "放大閱讀";
}

.video-actions button:last-child::before {
  content: "放大觀看";
}

.social .section-heading > a::before {
  content: "前往粉絲專頁";
}

.video-buttons button:first-child::before {
  content: attr(aria-label);
}

.ebook-expand::after,
.video-actions button:last-child::after,
.social .section-heading > a::after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-left: 8px;
  vertical-align: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 5v2h8.59L4.29 18.29l1.42 1.42L17 8.41V17h2V5H7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 5v2h8.59L4.29 18.29l1.42 1.42L17 8.41V17h2V5H7z'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}

.video-center-play {
  font-size: 0 !important;
}

.video-center-play::before,
.video-buttons button:first-child::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid #f6d58d;
  pointer-events: none;
}

.video-buttons button:first-child::after {
  margin-left: 8px;
  vertical-align: -4px;
  transform: scale(.72);
}

.video-buttons button:first-child[aria-label="暫停"]::after {
  width: 12px;
  height: 17px;
  border: 0;
  background:
    linear-gradient(#f6d58d 0 0) left / 4px 100% no-repeat,
    linear-gradient(#f6d58d 0 0) right / 4px 100% no-repeat;
  transform: scale(.72);
}

.culture-portals > a[href="#services"] > i {
  position: relative;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
}

.culture-portals > a[href="#services"] > i::before {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 25%, #7d100d 0 8%, transparent 9%),
    radial-gradient(circle at 50% 75%, #f2dfb5 0 8%, transparent 9%),
    radial-gradient(circle at 50% 25%, #f2dfb5 0 25%, transparent 26%),
    radial-gradient(circle at 50% 75%, #7d100d 0 25%, transparent 26%),
    linear-gradient(90deg, #f2dfb5 0 50%, #7d100d 50% 100%);
  box-shadow: 0 0 0 2px #7d100d;
  pointer-events: none;
}

/* v76：導覽列英文宮名靠近中文宮名，保留原導覽列尺寸 */
@media (min-width: 701px) {
  .site-header .brand-copy small {
    margin-top: 3px !important;
  }
}

.result-grid > article > .donation-preview,
.result-grid > article:nth-child(2) > .donation-preview {
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-width: 100% !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  background: transparent !important;
  border: 0 !important;
  transform: none !important;
}

.result-grid > article:nth-child(1) > .donation-preview {
  object-position: center 74% !important;
}

.result-grid > article:nth-child(2) > .donation-preview {
  object-position: center 50% !important;
}

.result-grid > article:nth-child(3) > .donation-preview {
  object-position: center 32% !important;
}

.result-grid > article:nth-child(4) > .donation-preview {
  object-position: center 28% !important;
}

@media (max-width: 1180px) {
  .hero-temple-base,
  .hero-deity-photo {
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }

  .hero-deity-photo {
    background-size: cover !important;
    -webkit-mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.66) 86%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      180deg,
      #000 0%,
      #000 72%,
      rgba(0, 0, 0, 0.66) 86%,
      transparent 100%
    ) !important;
  }
}

/* Pages CMS image variables preserve the original layered hero artwork. */
.hero-deity-photo {
  background-image: var(--cms-hero-deity-image, url("/temple-deities-no-sign.png")) !important;
}

@media (min-width: 1181px) {
  .hero-temple-base {
    background-image:
      linear-gradient(90deg, #360906f0 0%, #560e0ab8 24%, #eee1c41a 48%, #0618242e 75%, #eee1c433),
      var(--cms-hero-temple-image, url("/hero-production.png")) !important;
  }
}

@media (min-width: 701px) and (max-width: 1180px) {
  .hero-temple-base {
    background-image:
      linear-gradient(90deg, rgba(54, 8, 6, .46), rgba(54, 8, 6, .05) 28% 72%, rgba(54, 8, 6, .46)),
      var(--cms-hero-temple-image, url("/hero-production.png")) !important;
  }
}

@media (max-width: 700px) {
  .hero-temple-base {
    background-image:
      linear-gradient(90deg, rgba(54, 8, 6, .4), rgba(54, 8, 6, .02) 24% 76%, rgba(54, 8, 6, .4)),
      var(--cms-hero-temple-image, url("/hero-production.png")) !important;
  }
}

/* Restore the original swaying 歲、安 lantern animation on tablet and phone. */
@media (max-width: 1180px) {
  .hero-lanterns {
    display: block !important;
    position: absolute !important;
    z-index: 9 !important;
    inset: 0 !important;
    pointer-events: none !important;
  }

  .hero-lanterns i {
    display: grid !important;
    animation: lanternSway 4.2s ease-in-out infinite !important;
  }

  .hero-lanterns i:last-child {
    animation-delay: -2.1s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-lanterns i {
    animation: none !important;
  }
}

/* Keep the 聖、安 lantern cords attached directly below every header height. */
.admin-entry {
  display: none !important;
}

.hero-lanterns i {
  top: calc(var(--fixed-header) + 28px) !important;
}

/* iPad Safari: give the framed previews a definite full-bleed box. */
@media (min-width: 701px) and (max-width: 1180px) {
  .donation-preview-frame {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    overflow: hidden !important;
  }

  .donation-preview-frame .donation-preview {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
  }
}

/* Android: keep the 壹貳參 cards inside their paper-colour section. */
@media (max-width: 1180px) {
  .culture-portals {
    box-sizing: border-box !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
    padding-left: max(16px, env(safe-area-inset-left)) !important;
  }

  .culture-portals > a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* Android touch target for the video timeline. */
.video-timeline input[type="range"] {
  position: relative !important;
  z-index: 20 !important;
  width: 100% !important;
  height: 44px !important;
  pointer-events: auto !important;
  touch-action: none !important;
}

/* Soften the home image into the wine-red artwork without changing its crop. */
@media (min-width: 1181px) {
  .hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    pointer-events: none !important;
    inset: 108px 0 0 !important;
    background:
      linear-gradient(
        90deg,
        rgba(48, 7, 5, 0.96) 0%,
        rgba(53, 8, 6, 0.88) 18%,
        rgba(58, 9, 7, 0.66) 30%,
        rgba(55, 8, 6, 0.34) 42%,
        rgba(45, 7, 5, 0.12) 53%,
        transparent 64%
      ),
      linear-gradient(
        180deg,
        transparent 57%,
        rgba(42, 6, 4, 0.08) 70%,
        rgba(42, 6, 4, 0.4) 100%
      ) !important;
  }

  .hero-deity-photo {
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.12) 7%,
      rgba(0, 0, 0, 0.48) 19%,
      #000 35%,
      #000 92%,
      transparent 100%
    ) !important;
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      rgba(0, 0, 0, 0.12) 7%,
      rgba(0, 0, 0, 0.48) 19%,
      #000 35%,
      #000 92%,
      transparent 100%
    ) !important;
  }
}

@media (max-width: 1180px) {
  .hero::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 2 !important;
    pointer-events: none !important;
    inset: var(--fixed-header) 0 auto !important;
    height: clamp(414px, 54vw, 520px) !important;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        transparent 52%,
        rgba(55, 8, 6, 0.08) 62%,
        rgba(55, 8, 6, 0.28) 73%,
        rgba(55, 8, 6, 0.62) 84%,
        rgba(55, 8, 6, 0.88) 94%,
        #370806 100%
      ) !important;
  }
}

/* v67: one predictable almanac grid; no historical grid-area overrides. */
.ritual-console,
.ritual-tabs,
.ritual-panel,
.almanac-panel,
.almanac-panel > * {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.ritual-console {
  width: 100% !important;
  height: auto !important;
  overflow: hidden !important;
}

.ritual-tabs,
.ritual-panel {
  inset: auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
  transform: none !important;
}

.ritual-tabs {
  width: min(720px, calc(100% - 32px)) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ritual-tabs button {
  min-width: 0 !important;
}

.ritual-panel {
  width: min(1240px, calc(100% - 32px)) !important;
  height: auto !important;
}

.almanac-panel {
  display: grid !important;
  grid-template-areas: none !important;
  align-items: center !important;
}

.almanac-panel > * {
  grid-area: auto !important;
  margin: 0 !important;
  transform: none !important;
}

.almanac-date p,
.almanac-advice p,
.almanac-note {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
}

@media (min-width: 901px) {
  .almanac-panel {
    grid-template-columns: 110px minmax(220px, 0.9fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: clamp(18px, 2.5vw, 38px) !important;
    padding: 42px 34px 36px !important;
  }

  .almanac-seal,
  .almanac-date,
  .almanac-advice {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .almanac-note {
    grid-column: 2 / -1 !important;
    width: 100% !important;
  }
}

@media (min-width: 701px) and (max-width: 900px) {
  .ritual-panel {
    width: calc(100% - 32px) !important;
  }

  .almanac-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 30px 24px !important;
  }

  .almanac-seal {
    display: none !important;
  }

  .almanac-date,
  .almanac-note {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  .almanac-advice {
    grid-column: auto !important;
  }
}

@media (max-width: 700px) {
  .ritual-tabs,
  .ritual-panel {
    width: calc(100% - 20px) !important;
  }

  .almanac-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 15px !important;
    padding: 26px 14px 24px !important;
  }

  .almanac-seal {
    display: none !important;
  }

  .almanac-date,
  .almanac-advice,
  .almanac-note {
    grid-column: 1 !important;
    width: 100% !important;
  }
}

/* Keep the animated 壹貳參 cards fully visible, but inside a wider paper field. */
@media (max-width: 1180px) {
  .culture-portals {
    box-sizing: border-box !important;
    contain: none !important;
    overflow: visible !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 72px !important;
    padding-right: max(24px, env(safe-area-inset-right)) !important;
    padding-bottom: 84px !important;
    padding-left: max(24px, env(safe-area-inset-left)) !important;
  }

  .culture-portals > a {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* Android Chrome: the range owns horizontal dragging, not page scrolling. */
.video-timeline {
  position: relative !important;
  z-index: 30 !important;
  min-width: 0 !important;
  overflow: visible !important;
}

.video-timeline input[type="range"] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 48px !important;
  pointer-events: auto !important;
  touch-action: pan-y !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-appearance: auto !important;
  appearance: auto !important;
}

/* Remove the distracting inner gold outlines; keep the outer card borders. */
.location-card::before,
.social-frame::before {
  content: none !important;
  display: none !important;
  border: 0 !important;
}

/* v69: restore the original centered viewer and keep every control reliable. */
.video-timeline input[type="range"] {
  position: relative !important;
  z-index: 100 !important;
  cursor: pointer !important;
  touch-action: none !important;
}

.video-card.video-source-loading .video-timeline input[type="range"] {
  opacity: 0.72 !important;
}

body.preview-active {
  overflow: hidden !important;
}

.video-card.expanded,
.video-card:last-child.expanded {
  position: fixed !important;
  inset: auto !important;
  top: 50% !important;
  left: 50% !important;
  z-index: 250 !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(1000px, calc(100vw - 40px)) !important;
  min-width: 0 !important;
  max-width: calc(100vw - 40px) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: 90svh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 16px !important;
  transform: translate(-50%, -50%) !important;
  overflow: auto !important;
  overscroll-behavior: contain !important;
  background: #050403 !important;
}

.video-card.expanded .video-poster {
  order: 1 !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 16 / 9 !important;
  line-height: 0 !important;
  overflow: hidden !important;
  background: #000 !important;
}

.video-card.expanded .video-poster video {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  vertical-align: top !important;
  background: #000 !important;
}

.video-card.expanded .video-seek {
  order: 2 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  inset: auto !important;
  z-index: 260 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 10px 18px 14px !important;
  overflow: visible !important;
  background: #f7ead2 !important;
}

.video-card.expanded .video-timeline {
  grid-column: 1 / -1 !important;
  grid-row: 1 !important;
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.video-card.expanded .video-buttons,
.video-card.expanded .video-actions {
  grid-row: 2 !important;
  width: auto !important;
  min-width: 0 !important;
}

.video-card.expanded .video-buttons {
  grid-column: 1 !important;
  justify-content: flex-start !important;
}

.video-card.expanded .video-actions {
  grid-column: 2 !important;
  justify-content: flex-end !important;
  pointer-events: auto !important;
}

.video-card.expanded .video-buttons,
.video-card.expanded .video-buttons button,
.video-card.expanded .video-actions,
.video-card.expanded .video-actions button {
  position: relative !important;
  z-index: 270 !important;
  pointer-events: auto !important;
}

.video-card.expanded > small,
.video-card.expanded > h3,
.video-card.expanded > p {
  display: none !important;
}

.video-card.expanded .video-close {
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  z-index: 280 !important;
}

@media (min-width: 701px) and (max-width: 1180px) {
  .video-card.expanded,
  .video-card:last-child.expanded {
    width: min(920px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
  }

  .video-card.expanded .video-poster {
    max-height: calc(100dvh - 190px) !important;
  }
}

@media (max-width: 700px) {
  .video-card.expanded,
  .video-card:last-child.expanded {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100svh !important;
    border-radius: 0 !important;
  }

  .video-card.expanded .video-seek {
    padding: 7px 9px max(9px, env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
  }

  .video-card.expanded .video-timeline input[type="range"] {
    height: 42px !important;
  }
}

/* v72 — surgical fixes on top of the restored v69 baseline.
   The quick-contact and home controls are intentionally untouched. */

/* Donation cards keep the v69 layout. The frame only makes each preview
   reliably fill its existing image cell after hydration on iPad/Android. */
@media (min-width: 701px) {
  .result-grid > article > .donation-preview-frame {
    position: relative !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 310px !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #170908 !important;
  }

  .result-grid > article > .donation-preview-frame > .donation-preview {
    position: absolute !important;
    inset: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  .result-grid > article:nth-child(1) > .donation-preview-frame > .donation-preview {
    object-position: center 74% !important;
  }

  .result-grid > article:nth-child(2) > .donation-preview-frame > .donation-preview {
    object-position: center 50% !important;
  }

  .result-grid > article:nth-child(3) > .donation-preview-frame > .donation-preview {
    object-position: center 32% !important;
  }

  .result-grid > article:nth-child(4) > .donation-preview-frame > .donation-preview {
    object-position: center 28% !important;
  }
}

/* Phone previews remain full-width and keep their natural aspect ratio. */
@media (max-width: 700px) {
  .result-grid > article > .donation-preview-frame {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: transparent !important;
  }

  .result-grid > article > .donation-preview-frame > .donation-preview {
    position: static !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
  }
}

/* Only the expanded tablet/desktop ebook is constrained. The normal ebook
   receives no v72 selector and therefore remains exactly as it was in v69. */
@media (min-width: 701px) {
  .ebook-shade {
    z-index: 310 !important;
  }

  .ebook.expanded {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 320 !important;
    box-sizing: border-box !important;
    width: min(1280px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(980px, calc(100dvh - 24px)) !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 0 !important;
    padding: 58px 18px 18px !important;
    transform: translate(-50%, -50%) !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
  }

  .ebook.expanded .ebook-toolbar {
    position: sticky !important;
    top: -43px !important;
    z-index: 325 !important;
  }

  .ebook.expanded .ebook-spread,
  .ebook.expanded .ebook-spread:not(.single) {
    width: min(1080px, calc(100vw - 60px), calc(141.3dvh - 268.5px)) !important;
    max-width: 1080px !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .ebook.expanded .ebook-spread.single {
    width: min(510px, calc(100vw - 60px), calc(70.65dvh - 134.25px)) !important;
    max-width: 510px !important;
  }

  .ebook.expanded .ebook-page,
  .ebook.expanded .ebook-page img {
    box-sizing: border-box !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ebook.expanded .ebook-page img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-height: calc(100dvh - 190px) !important;
    object-fit: contain !important;
  }

  .ebook.expanded .ebook-close {
    position: fixed !important;
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    z-index: 340 !important;
  }
}

/* Android tablets: allow every portal card to grow with wrapped text, while
   keeping the complete 壹貳參 row within the original paper section. */
@media (min-width: 701px) and (max-width: 1180px) {
  .culture-portals {
    box-sizing: border-box !important;
    grid-auto-rows: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .culture-portals > a,
  .culture-portals > a:nth-child(2),
  .culture-portals > a:nth-child(2):hover {
    box-sizing: border-box !important;
    height: auto !important;
    min-height: 145px !important;
    max-height: none !important;
    transform: none !important;
  }
}

/* v73 — Mobile Chrome quick controls.
   Both controls use the same visual-viewport lift. The dock is anchored by
   its bottom edge, so expanding it always grows upward and never below the
   screen when Chrome hides or restores its browser bars. */
@media (max-width: 700px) {
  .quick-dock,
  .quick-home-dock {
    position: fixed !important;
    top: auto !important;
    right: 8px !important;
    left: auto !important;
    transform: none !important;
  }

  .quick-home-dock {
    bottom: calc(
      var(--quick-chrome-bottom-shift, 0px) +
      max(9px, env(safe-area-inset-bottom))
    ) !important;
  }

  .quick-dock {
    bottom: calc(
      var(--quick-chrome-bottom-shift, 0px) +
      max(9px, env(safe-area-inset-bottom)) +
      53px
    ) !important;
    height: auto !important;
    max-height: calc(var(--quick-visible-height, 100svh) - 76px) !important;
    overflow: visible !important;
  }

  .quick-dock:not(.collapsed) .quick-contact-group {
    max-height: calc(var(--quick-visible-height, 100svh) - 142px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .quick-route-menu {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 9px) !important;
    width: min(286px, calc(100vw - 16px)) !important;
    max-height: clamp(
      110px,
      calc(var(--quick-visible-height, 100svh) - 320px),
      260px
    ) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }
}

/* v74 — keep the controls at one physical screen position when Chrome's
   browser bars disappear. The 41px dock anchor stays fixed; its contents are
   taken out of normal flow and open upward. */
@media (max-width: 700px) {
  .quick-home-dock {
    top: calc(
      var(--quick-stable-height, 100svh) -
      50px +
      var(--quick-chrome-vertical-lift, 0px)
    ) !important;
    bottom: auto !important;
  }

  .quick-dock {
    top: calc(
      var(--quick-stable-height, 100svh) -
      103px +
      var(--quick-chrome-vertical-lift, 0px)
    ) !important;
    bottom: auto !important;
    width: 126px !important;
    height: 41px !important;
    min-height: 41px !important;
    max-height: 41px !important;
    overflow: visible !important;
  }

  .quick-dock:not(.collapsed) .quick-contact-group {
    position: absolute !important;
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 8px) !important;
    width: 140px !important;
    max-height: calc(var(--quick-visible-height, 100svh) - 142px) !important;
  }

  .quick-collapse,
  .quick-dock:not(.collapsed) .quick-collapse {
    position: absolute !important;
    inset: 0 !important;
    width: 126px !important;
    height: 41px !important;
    margin: 0 !important;
  }

  .quick-route-menu {
    top: auto !important;
    right: 0 !important;
    bottom: calc(100% + 184px) !important;
  }
}

/* v82 final tablet precedence: this block must remain at the end of final.css. */
@media (min-width: 701px) and (max-width: 1180px) {
  body:has(.ebook.expanded) {
    overflow: hidden !important;
  }

  .ebook-shade {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9990 !important;
  }

  .ebook.expanded {
    position: fixed !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: max(8px, env(safe-area-inset-right)) !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    z-index: 10000 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 54px 12px 16px !important;
    transform: none !important;
    overflow: auto !important;
    overscroll-behavior: contain !important;
    isolation: isolate;
  }

  .ebook.expanded .ebook-toolbar {
    position: sticky !important;
    top: -42px !important;
    z-index: 10020 !important;
  }

  .ebook.expanded .ebook-spread,
  .ebook.expanded .ebook-spread:not(.single) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(
      1160px,
      calc(100vw - 42px),
      calc((100dvh - 150px) * 1.437)
    ) !important;
    max-width: 1160px !important;
    height: auto !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .ebook.expanded .ebook-spread.single {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(
      620px,
      calc(100vw - 42px),
      calc((100dvh - 150px) * .718)
    ) !important;
    max-width: 620px !important;
  }

  .ebook.expanded .ebook-page {
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
  }

  .ebook.expanded .ebook-page img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: calc(100dvh - 150px) !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .ebook.expanded .ebook-spread.single .ebook-page img,
  .ebook.expanded .ebook-spread:not(.single) .ebook-page img {
    min-height: 0 !important;
  }

  .ebook.expanded .ebook-close {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    z-index: 10030 !important;
  }
}

/* v83 — repair the taiji join without changing the portal link or click area. */
.culture-portals > a[href="#services"] > i::before {
  inset: 22% !important;
  border-radius: 50% !important;
  background:
    radial-gradient(
      circle at 50% 25%,
      #7d100d 0 7%,
      #f2dfb5 7.5% 26.5%,
      transparent 27%
    ),
    radial-gradient(
      circle at 50% 75%,
      #f2dfb5 0 7%,
      #7d100d 7.5% 26.5%,
      transparent 27%
    ),
    linear-gradient(90deg, #f2dfb5 0 50%, #7d100d 50% 100%) !important;
  background-clip: padding-box !important;
  box-shadow: 0 0 0 2px #7d100d !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* v83 — match 播放／放大觀看 with the −10 and +10 control text. */
.video-buttons button:first-child::before,
.video-actions button:last-child::before {
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: inherit !important;
}

.video-buttons button:first-child::after {
  margin-left: 6px !important;
}

.video-actions button:last-child::after {
  width: 12px !important;
  height: 12px !important;
  margin-left: 6px !important;
}

/* v83 — expanded tablet pages are always larger than the inline preview.
   Height no longer shrinks the pages; the isolated modal scrolls instead. */
@media (min-width: 701px) and (max-width: 1180px) {
  .ebook.expanded .ebook-spread,
  .ebook.expanded .ebook-spread:not(.single) {
    width: min(1180px, calc(100vw - 48px)) !important;
    max-width: none !important;
  }

  .ebook.expanded .ebook-spread.single {
    width: min(760px, calc(100vw - 48px)) !important;
    max-width: 760px !important;
  }

  .ebook.expanded .ebook-page,
  .ebook.expanded .ebook-spread.single .ebook-page,
  .ebook.expanded .ebook-spread:not(.single) .ebook-page {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }

  .ebook.expanded .ebook-page img,
  .ebook.expanded .ebook-spread.single .ebook-page img,
  .ebook.expanded .ebook-spread:not(.single) .ebook-page img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}

/* v84 final precedence — fixed taiji artwork and smaller play triangle. */
.culture-portals > a[href="#services"] > i::before {
  inset: 19% !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23f2dfb5' stroke='%237d100d' stroke-width='4'/%3E%3Cpath d='M50 2a48 48 0 0 1 0 96c24 0 24-48 0-48S26 2 50 2Z' fill='%237d100d'/%3E%3Ccircle cx='50' cy='26' r='5' fill='%23f2dfb5'/%3E%3Ccircle cx='50' cy='74' r='5' fill='%237d100d'/%3E%3C/svg%3E") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 100% 100% !important;
  box-shadow: none !important;
  transform: none !important;
  backface-visibility: visible !important;
}

.video-buttons button:first-child[aria-label="播放"]::after {
  width: 0 !important;
  height: 0 !important;
  margin-left: 5px !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 8px solid #f6d58d !important;
  vertical-align: -1px !important;
  transform: none !important;
}

/* v85 — desktop and tablet expanded ebook.
   Mobile (700px and below) is intentionally untouched.
   Chrome, Safari and Edge use the same width-driven sizing; vertical overflow
   stays inside the modal and never shrinks the pages. */
@media (min-width: 701px) {
  body:has(.ebook.expanded) {
    overflow: hidden !important;
  }

  .ebook.expanded {
    position: fixed !important;
    top: 8px !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    right: auto !important;
    bottom: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    z-index: 10000 !important;
    width: min(1280px, calc(100vw - 16px)) !important;
    max-width: calc(100vw - 16px) !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  .ebook.expanded .ebook-spread,
  .ebook.expanded .ebook-spread:not(.single) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: min(1220px, calc(100vw - 48px)) !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .ebook.expanded .ebook-spread.single {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(900px, calc(100vw - 48px)) !important;
    max-width: 900px !important;
  }

  .ebook.expanded .ebook-page,
  .ebook.expanded .ebook-spread.single .ebook-page,
  .ebook.expanded .ebook-spread:not(.single) .ebook-page {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .ebook.expanded .ebook-page img,
  .ebook.expanded .ebook-spread.single .ebook-page img,
  .ebook.expanded .ebook-spread:not(.single) .ebook-page img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  .ebook.expanded .ebook-close {
    position: fixed !important;
    top: max(14px, env(safe-area-inset-top)) !important;
    right: max(14px, env(safe-area-inset-right)) !important;
    z-index: 10030 !important;
  }
}