/* Mobile-specific styles (scaffold). */
@media (max-width: 768px) {
  body[data-scale="5"] .word-node {
    width: auto !important;
    min-width: calc(270.443px * var(--word-node-scale-factor)) !important;
    max-width: none !important;
    height: calc(189.155px * var(--word-node-scale-factor)) !important;
    box-sizing: border-box !important;
  }

  body[data-scale="5"] .word-node .terms .term-ori {
    font-size: calc(49.345px * var(--word-node-scale-factor)) !important;
  }

  #proposer {
    max-width: 39vw !important;
    box-sizing: border-box !important;
    top: 17vh !important;
    left: 11vw !important;
    transform: none !important;
  }

  #proposer .proposer-text .proposer-primary {
    font-size: 32.469px !important;
    line-height: 30px !important;
  }

  #proposer .proposer-text {
    gap: 2px !important;
  }

  #proposer .proposer-text .proposer-primary,
  #proposer .proposer-text .proposer-ori {
    margin: 0 !important;
  }

  html:lang(zh) #proposer .proposer-text .proposer-primary {
    font-size: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    max-width: 80% !important;
  }

  #image {
    max-width: calc(38vw * var(--word-node-scale-factor)) !important;
    box-sizing: border-box !important;
    top: 20vh !important;
    left: 48vw !important;
    transform: none !important;
  }

  #image img,
  #image img {
    min-width: 0 !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    max-height: none !important;
    height: auto !important;
    padding: 0 !important;
    margin: calc(14px * var(--word-node-scale-factor)) 10px 10px !important;
  }

  #proposer .detail-title {
    margin: calc(14px * var(--word-node-scale-factor)) !important;
  }

  #proposer img {
    width: 34vw !important;
    max-width: 34vw !important;
    max-height: none !important;
    height: auto !important;
    margin: calc(14px * var(--word-node-scale-factor)) !important;
    padding: 0 !important;
  }

  #comment {
    width: 75vw !important;
    max-width: none !important;
    box-sizing: border-box !important;
    left: 40px !important;
    top: 62vh !important;
    transform: none !important;
  }

  #comment .comment-abs-content {
    font-size: calc(19.738px * var(--word-node-scale-factor)) !important;
    line-height: 24.672px !important;
  }

  #comment #comment-content > p {
    font-size: calc(12.336px * var(--word-node-scale-factor)) !important;
  }

  body[data-scale="5"] .word-node .detail-title,
  body[data-scale="5"] .detail-title {
    font-size: calc(13.159px * var(--word-node-scale-factor)) !important;
    margin: calc(14px * var(--word-node-scale-factor)) !important;
    gap: calc(6px * var(--word-node-scale-factor)) !important;
  }

  body[data-scale="5"] .word-node .detail-title::before,
  body[data-scale="5"] .detail-title::before {
    width: calc(8px * var(--word-node-scale-factor)) !important;
    height: calc(8px * var(--word-node-scale-factor)) !important;
  }

  body[data-scale="5"] .word-node .terms {
    margin: calc(14px * var(--word-node-scale-factor)) !important;
  }

  #side-menu {
    --menu-min-width: auto !important;
    --menu-gap: 0 !important;
    --menu-align: stretch !important;
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    align-items: stretch !important;
    pointer-events: none;
    transition: none !important;
  }

  /* Disable compact hover layout shift on mobile. */
  #side-menu.menu-compact:hover {
    --menu-min-width: auto !important;
    --menu-gap: 0 !important;
    --menu-align: stretch !important;
    width: 100% !important;
  }

  #side-menu.menu-search-lock,
  #side-menu.menu-search-lock:hover,
  #side-menu.menu-search-lock.menu-compact,
  #side-menu.menu-search-lock.menu-compact:hover {
    --menu-min-width: auto !important;
    --menu-gap: 0 !important;
    --menu-align: stretch !important;
    width: 100% !important;
  }

  #upper-menu {
    width: 100%;
    padding: calc(env(safe-area-inset-top, 0px) + 12px) 14px 0;
    box-sizing: border-box;
    pointer-events: none;
  }

  #dunes-icon {
    position: fixed;
    top: 60px;
    left: 20px;
    column-gap: 4px !important;
    z-index: 11010;
    pointer-events: auto;
  }

  #upper-menu .Chinese {
    font-size: 18.722px !important;
  }

  #upper-menu .English {
    font-size: 13.846px !important;
  }

  #buttons {
    --buttons-width: calc(30px * 3 + 53.79px + 8px * 3);
    position: fixed;
    top: 60px;
    right: 20px;
    z-index: 11011;
    pointer-events: auto;
    height: 30px;
  }

  #buttons.search-expanded #menu-search {
    width: 100% !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    z-index: 2 !important;
  }

  #buttons.search-expanded #menu-search input {
    opacity: 1 !important;
    width: 100% !important;
    pointer-events: auto !important;
  }

  #upper-menu .small-icon {
    width: 30px !important;
    height: 30px !important;
    border-radius: 15px !important;
  }

  #upper-menu #about-button {
    width: 53.79px !important;
    height: 30px !important;
  }

  #upper-menu #about-button p {
    font-size: 16.3px !important;
  }

  #language-icon {
    width: 17.919px !important;
    height: 16.216px !important;
  }

  #shuffle-icon {
    width: 22.82px !important;
    height: 22.82px !important;
  }

  #search-icon {
    width: 14.67px !important;
    height: 14.67px !important;
  }

  #search-results {
    position: fixed !important;
    top: calc(60px + 30px + 8px) !important;
    right: 20px !important;
    left: auto !important;
    bottom: auto !important;
    width: calc(30px * 3 + 53.79px + 8px * 3) !important;
    max-height: min(42vh, 320px) !important;
    z-index: 11020 !important;
    pointer-events: auto;
  }

  /* Hide scale bar block on mobile. */
  #lower-menu {
    display: none !important;
  }

  #year-menu {
    position: fixed;
    left: 50%;
    bottom: calc(60px + var(--app-bottom-inset));
    transform: translateX(-50%);
    width: min(
      366px,
      calc(
        100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 28px
      )
    );
    margin-top: 0;
    z-index: 11010;
    pointer-events: auto;
  }

  #side-menu #year-menu {
    transform: translateX(-50%) !important;
  }

  #yearContainer {
    width: 100%;
  }

  #year-menu.mobile-hidden {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Keep top/bottom menu parts always visible on mobile. */
  #side-menu.menu-compact #dunes-icon,
  #side-menu.menu-compact #buttons,
  #side-menu.menu-compact #year-menu,
  #side-menu.menu-compact:hover #dunes-icon,
  #side-menu.menu-compact:hover #buttons,
  #side-menu.menu-compact:hover #year-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  #side-menu.menu-compact:hover #lower-menu {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Prevent compact/hover rules from removing centering transform. */
  #side-menu.menu-compact #year-menu,
  #side-menu.menu-compact:hover #year-menu {
    transform: translateX(-50%) !important;
  }

  /* Disable hover-only visual feedback on mobile. */
  .menu-search-results .search-result-item:hover {
    background: transparent;
  }

  .year-indicator:hover {
    background-color: #43403B;
  }

  #side-menu .menu-part,
  #side-menu #buttons,
  #side-menu #year-menu,
  .menu-search-results .search-result-item,
  .year-indicator {
    transition: none !important;
  }

  /* Keep search usable/animated on mobile. */
  #menu-search {
    transition: width 0.35s ease, box-shadow 0.35s ease !important;
  }

  #menu-search input {
    transition: opacity 0.35s ease, width 0.35s ease !important;
  }

  /* Mobile floating/about panel: full-screen overlay, no side tabs. */
  #floating-panel,
  #about-panel {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: var(--app-vh) !important;
    border-radius: 0 !important;
    z-index: 12020 !important;
  }

  #floating-panel .panel-entry,
  #floating-panel .panel-comment,
  #about-panel .panel-entry,
  #about-panel .panel-comment {
    border-radius: 0 !important;
  }

  #floating-panel .panel-entry:not(.active),
  #floating-panel .panel-comment:not(.active),
  #about-panel .panel-entry:not(.active),
  #about-panel .panel-comment:not(.active) {
    display: none !important;
    transform: none !important;
  }

  #floating-panel .panel-tabs,
  #about-panel .panel-tabs {
    display: none !important;
  }

  #floating-panel .panel-slide,
  #about-panel .panel-slide {
    display: none !important;
  }

  #floating-panel .panel-top img {
    align-self: center !important;
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
    margin-left: 20px !important;
    margin-right: 20px !important;
    box-sizing: border-box !important;
  }

  #floating-panel .panel-bottom .diagram-caption,
  #about-panel .panel-bottom .diagram-caption {
    color: #FAF4E5;
    text-align: justify;
    font-family: "ChillDINGothic";
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.75px;
  }

  #floating-panel #section-example .diagram-stage,
  #about-panel #section-example .diagram-stage {
    --diagram-arrow-slot-mobile: 56px;
    padding: 24px var(--diagram-arrow-slot-mobile) 12px var(--diagram-arrow-slot-mobile) !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-end !important;
  }

  #floating-panel .panel-comment .note-images-carousel .diagram-stage,
  #about-panel .panel-comment .note-images-carousel .diagram-stage {
    --diagram-arrow-slot-mobile: 56px;
    padding: 26px var(--diagram-arrow-slot-mobile) 0 var(--diagram-arrow-slot-mobile) !important;
    height: auto !important;
    min-height: 0 !important;
    align-items: flex-end !important;
  }

  #floating-panel .panel-comment .note-body img,
  #about-panel .panel-comment .note-body img {
    padding: 24px 0 0 0 !important;
  }

  #floating-panel #section-example .diagram-image,
  #about-panel #section-example .diagram-image,
  #floating-panel .panel-comment .note-images-carousel .diagram-image,
  #about-panel .panel-comment .note-images-carousel .diagram-image {
    height: auto !important;
    max-height: 300px !important;
    object-position: center bottom !important;
    padding: 0 !important;
  }

  #floating-panel .panel-bottom .diagram-caption,
  #about-panel .panel-bottom .diagram-caption {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  #floating-panel .panel-bottom section,
  #about-panel .panel-bottom section {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  #floating-panel .panel-bottom .left-title,
  #about-panel .panel-bottom .left-title {
    width: auto !important;
  }

  #floating-panel .panel-comment .panel-bottom .left-title,
  #about-panel .panel-comment .panel-bottom .left-title {
    --comment-title-line-height-mobile: 20px;
    line-height: var(--comment-title-line-height-mobile) !important;
    padding-bottom: calc(var(--comment-title-line-height-mobile) * 2) !important;
  }

  #about-panel .panel-bottom section > div {
    padding-top: 0 !important;
  }

  #floating-panel .panel-comment .panel-bottom .note-body,
  #floating-panel .panel-comment .panel-bottom .note-body *,
  #about-panel .panel-comment .panel-bottom .note-body,
  #about-panel .panel-comment .panel-bottom .note-body * {
    text-align: left !important;
  }

  #floating-panel .panel-comment .panel-bottom .note-body > br,
  #about-panel .panel-comment .panel-bottom .note-body > br {
    display: none !important;
  }

  #floating-panel .panel-comment .panel-bottom.notes-mode section:not(.note-expanded):not(#section-contributors):not(#section-contact):not(#section-editors),
  #about-panel .panel-comment .panel-bottom.notes-mode section:not(.note-expanded):not(#section-contributors):not(#section-contact):not(#section-editors) {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    align-items: flex-start !important;
  }

  #floating-panel .panel-comment .panel-bottom.notes-mode section:not(.note-expanded):not(#section-contributors):not(#section-contact):not(#section-editors) .note-like-toggle,
  #about-panel .panel-comment .panel-bottom.notes-mode section:not(.note-expanded):not(#section-contributors):not(#section-contact):not(#section-editors) .note-like-toggle {
    top: 10px !important;
  }

  #floating-panel .panel-comment .panel-bottom.notes-mode section:not(.note-expanded):not(#section-contributors):not(#section-contact):not(#section-editors) .left-title,
  #about-panel .panel-comment .panel-bottom.notes-mode section:not(.note-expanded):not(#section-contributors):not(#section-contact):not(#section-editors) .left-title {
    padding-bottom: 0 !important;
  }

  #floating-close-btn {
    position: absolute;
    top: calc(env(safe-area-inset-top, 0px) + 20px);
    right: 18px;
    width: 37px;
    height: 37px;
    border: none;
    border-radius: 37px;
    background: #EEE9DB;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12030;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  #floating-close-btn .close-icon {
    width: 14.32px;
    height: 14.32px;
    display: block;
  }

  #floating-close-btn .close-icon line {
    stroke: #43403B;
    stroke-width: 2.25;
    stroke-linecap: round;
  }
}

@media (max-width: 768px) and (hover: none), (max-width: 768px) and (pointer: coarse) {
  #side-menu.menu-compact:hover,
  #side-menu.menu-search-lock:hover,
  #side-menu.menu-search-lock.menu-compact:hover {
    --menu-min-width: auto !important;
    --menu-gap: 0 !important;
    --menu-align: stretch !important;
    width: 100% !important;
  }

  #side-menu.menu-compact:hover #buttons,
  #side-menu.menu-search-lock.menu-compact:hover #buttons {
    transform: none !important;
  }
}