:root {
  --mp-card-width: 118px;
  --mp-card-height: 78px;
  --mp-top-space: 82px;
  --mp-side-space: 24px;
}

/*
 * Stable full-map geometry.
 * The original layout made every row flex inside the viewport height. When the
 * browser became short, ten rows were compressed until the card contents were
 * clipped. Every panorama row now owns a real, non-shrinking height.
 */
.glass {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden !important;
  touch-action: none;
}

.viewport-pan-layer {
  position: absolute !important;
  inset: 0 auto auto 0 !important;
  width: max-content !important;
  height: max-content !important;
  min-width: 1px;
  min-height: 1px;
  transform-origin: 0 0;
  will-change: transform;
}

.glass-strip {
  width: max-content !important;
  height: max-content !important;
  min-height: 0 !important;
  padding: var(--mp-top-space) var(--mp-side-space) 28px !important;
  zoom: 1;
}

.map:not(.is-focus) {
  display: flex !important;
  flex-direction: column !important;
  width: max-content !important;
  height: max-content !important;
  min-height: 0 !important;
  gap: var(--mp-cell-gap) !important;
  overflow: visible !important;
}

.map:not(.is-focus) .row {
  display: flex !important;
  flex: 0 0 var(--mp-card-height) !important;
  width: max-content !important;
  height: var(--mp-card-height) !important;
  min-height: var(--mp-card-height) !important;
  max-height: var(--mp-card-height) !important;
  gap: var(--mp-group-gap) !important;
  overflow: visible !important;
}

.map:not(.is-focus) .group {
  display: flex !important;
  flex: 0 0 auto !important;
  height: var(--mp-card-height) !important;
  min-height: var(--mp-card-height) !important;
  gap: var(--mp-cell-gap) !important;
  overflow: visible !important;
}

.map:not(.is-focus) .cell {
  flex: 0 0 var(--mp-card-width) !important;
  width: var(--mp-card-width) !important;
  min-width: var(--mp-card-width) !important;
  max-width: var(--mp-card-width) !important;
  height: var(--mp-card-height) !important;
  min-height: var(--mp-card-height) !important;
  max-height: var(--mp-card-height) !important;
  padding: 8px 8px 6px !important;
  overflow: hidden !important;
  contain: layout paint style;
  content-visibility: visible !important;
}

.map:not(.is-focus) .cell .en,
.map:not(.is-focus) .cell .zh,
.map:not(.is-focus) .cell .obj {
  flex: 0 0 auto;
  max-width: 100%;
}

.map:not(.is-focus) .cell .en {
  min-height: 14px;
  line-height: 1.15 !important;
  white-space: nowrap;
}

.map:not(.is-focus) .cell .zh {
  min-height: 10px;
  line-height: 1.18 !important;
  white-space: nowrap;
}

.map:not(.is-focus) .cell .obj {
  min-height: 17px;
  line-height: 1.2 !important;
  white-space: nowrap;
}

/* Focus mode is viewport-sized and must not inherit panorama dimensions. */
.glass.focus-mode .glass-strip {
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  padding: var(--mp-top-space) 14px 14px !important;
}

.glass.focus-mode .map.is-focus {
  width: 100% !important;
  height: calc(100% - var(--mp-top-space)) !important;
  min-height: 0 !important;
}

/* Zoom controls are one stable unit instead of three unrelated flex items. */
.viewport-zoom-group {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 999px;
  background: rgba(117, 134, 158, 0.055);
  box-shadow: inset 0 1px 3px rgba(84, 101, 126, 0.07);
}

.viewport-zoom-group .viewport-zoom-button,
.viewport-zoom-group .viewport-zoom-readout {
  margin: 0 !important;
}

/* Medium desktop / tablet landscape. */
@media (max-width: 1100px) {
  :root {
    --mp-card-width: 112px;
    --mp-card-height: 76px;
    --mp-top-space: 76px;
    --mp-side-space: 16px;
    --mp-cell-gap: 8px;
    --mp-group-gap: 14px;
  }

  .memory-brand__text span { display: none; }
  .view-controls { max-width: calc(100vw - 170px); }
}

/* Short desktop windows: compact chrome, never compress the rows. */
@media (max-height: 560px) and (min-width: 769px) {
  :root {
    --mp-card-width: 108px;
    --mp-card-height: 72px;
    --mp-top-space: 58px;
    --mp-side-space: 12px;
    --mp-cell-gap: 7px;
    --mp-group-gap: 12px;
  }

  .memory-brand { top: 9px; left: 10px; }
  .memory-brand__mark { width: 32px; height: 32px; font-size: 15px; }
  .memory-brand__text strong { font-size: 13px; }

  .view-controls {
    top: 7px !important;
    right: 8px !important;
    min-height: 40px;
    padding: 4px !important;
  }

  .view-controls button { height: 27px !important; }
  .view-controls .group-label { min-width: 54px; }
}

/* Tablet and phone. */
@media (max-width: 768px) {
  :root {
    --mp-card-width: 104px;
    --mp-card-height: 76px;
    --mp-top-space: 94px;
    --mp-side-space: 9px;
    --mp-cell-gap: 7px;
    --mp-group-gap: 11px;
    --mp-edge-size: 6px;
  }

  .memory-brand { display: none !important; }

  .view-controls {
    left: max(7px, env(safe-area-inset-left)) !important;
    right: max(7px, env(safe-area-inset-right)) !important;
    top: max(7px, env(safe-area-inset-top)) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 74px;
    display: flex !important;
    flex-wrap: wrap !important;
    align-content: center;
    justify-content: center !important;
    gap: 4px !important;
    padding: 5px 6px !important;
    border-radius: 20px !important;
  }

  .view-controls .sort-switch { order: 1; }
  .view-controls .recall-toggle { order: 2; }
  .viewport-zoom-group { order: 3; }
  .view-controls .group-label { order: 4; }
  #prevGroup { order: 5; }
  #layoutToggle { order: 6; }
  #nextGroup { order: 7; }

  .view-controls button {
    height: 28px !important;
    min-width: 30px;
    padding-inline: 8px !important;
    font-size: 10px !important;
  }

  .view-controls .sort-switch button {
    height: 24px !important;
    min-width: 34px !important;
    padding-inline: 6px !important;
  }

  .viewport-zoom-button {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
  }

  .viewport-zoom-readout {
    min-width: 44px !important;
    height: 26px !important;
  }

  .view-controls .group-label {
    min-width: 56px;
    font-size: 9px !important;
  }

  .map:not(.is-focus) .cell {
    border-radius: 18px !important;
    padding: 8px 7px 6px !important;
  }

  .map:not(.is-focus) .cell .en { font-size: 10px !important; }
  .map:not(.is-focus) .cell .zh { font-size: 7.5px !important; }
  .map:not(.is-focus) .cell .obj { font-size: 7px !important; padding-inline: 5px !important; }

  /* 1000 simultaneous backdrop filters are too expensive on phones. The
     optical edge remains visible; real refraction is enabled for the active card. */
  .cell::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .cell.is-active::before {
    backdrop-filter: url(#memory-edge-refraction-strong) saturate(136%) contrast(1.18) !important;
    -webkit-backdrop-filter: url(#memory-edge-refraction-strong) saturate(136%) contrast(1.18) !important;
  }

  .glass-panel {
    width: calc(100vw - 18px - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
    max-height: min(58vh, 420px);
    overflow: auto;
    overscroll-behavior: contain;
  }

  .focus-view {
    padding: 5px !important;
    gap: 6px !important;
  }
}

/* Narrow phones. */
@media (max-width: 520px) {
  :root {
    --mp-card-width: 98px;
    --mp-card-height: 74px;
    --mp-top-space: 106px;
    --mp-side-space: 7px;
    --mp-cell-gap: 6px;
    --mp-group-gap: 9px;
  }

  .view-controls {
    min-height: 88px;
    padding: 5px !important;
  }

  .view-controls .group-label { display: none !important; }

  .map:not(.is-focus) .cell {
    border-radius: 17px !important;
    padding-inline: 6px !important;
  }

  .map:not(.is-focus) .cell .num {
    top: 5px !important;
    left: 6px !important;
  }

  .glass.focus-mode .glass-strip {
    padding-inline: 6px !important;
  }

  .focus-view {
    grid-template-rows: minmax(140px, 47%) minmax(0, 53%) !important;
  }

  .focus-cells {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: minmax(52px, 1fr) !important;
  }
}

/* Very narrow phones. */
@media (max-width: 380px) {
  :root {
    --mp-card-width: 94px;
    --mp-card-height: 72px;
    --mp-top-space: 112px;
  }

  .view-controls .recall-toggle {
    min-width: 54px !important;
    padding-inline: 6px !important;
  }

  .viewport-zoom-readout { min-width: 40px !important; }
  #prevGroup,
  #nextGroup { min-width: 27px !important; padding-inline: 5px !important; }
}

/* Phone landscape: the control bar stays one compact row. */
@media (max-height: 500px) and (max-width: 900px) and (orientation: landscape) {
  :root {
    --mp-card-width: 100px;
    --mp-card-height: 70px;
    --mp-top-space: 54px;
    --mp-side-space: 8px;
  }

  .view-controls {
    min-height: 38px;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .view-controls::-webkit-scrollbar { display: none; }
  .view-controls .group-label { display: none !important; }
  .view-controls button { flex: 0 0 auto; }

  .glass-panel {
    width: min(420px, calc(100vw - 18px)) !important;
    max-height: calc(100dvh - 14px);
  }
}

@supports not (zoom: 1) {
  /* Modern Chromium/Safari support CSS zoom. Firefox fallback remains usable,
     though text may be slightly softer at non-integer scales. */
  .glass-strip {
    transform-origin: 0 0 !important;
  }
}