@media (max-width: 1440px) {
  .brand-lockup {
    width: min(42vw, 520px);
  }

  .elder-zone {
    left: 8vw;
    height: clamp(411px, 60.5vh, 678px);
  }

  .menu-strip a {
    width: clamp(118px, 10.5vw, 170px);
  }

  .legend-stage .wood-frame {
    width: min(980px, 70vw);
  }

  .profession-grid {
    grid-template-columns: repeat(5, minmax(110px, 1fr));
  }
}

@media (max-width: 1024px) {
  body {
    overflow: auto;
  }

  .stage {
    min-height: 100svh;
  }

  .scene-bg {
    object-position: 42% center;
  }

  .brand-lockup {
    top: 9vh;
    width: 55vw;
  }

  .top-actions {
    left: 14px;
    top: 4px;
    gap: 7px;
  }

  .top-actions .image-button {
    width: 68px;
  }

  .top-actions .text-toggle {
    width: 92px;
  }

  .search-panel {
    top: -24px;
    right: 12px;
    width: min(42vw, 350px);
  }

  .elder-zone {
    left: 5vw;
    bottom: 18px;
    width: 36.3vw;
    height: 53.24vh;
  }

  .bottom-nav {
    flex-wrap: wrap;
    align-items: end;
  }

  .menu-strip {
    flex-wrap: wrap;
    max-width: calc(100vw - 190px);
    row-gap: 4px;
  }

  .menu-strip a {
    width: 132px;
  }

  .legend-stage .elder-zone {
    left: 2vw;
    bottom: 34px;
    width: 30vw;
    height: 48vh;
  }

  .legend-stage .story-modal {
    padding: 14vh 5vw 12vh 25vw;
  }

  .legend-stage .wood-frame {
    width: 70vw;
  }

  .professions-app {
    inset: 210px 20px 104px;
  }

  .professions-scroll {
    width: min(900px, 88vw);
  }

  .profession-grid {
    grid-template-columns: repeat(3, minmax(118px, 1fr));
  }

  .profession-copy-frame {
    width: min(560px, 52vw);
    right: 20px;
  }

  .profession-model-wrap {
    left: -2vw;
    width: 36vw;
    height: 52vh;
  }

  .profession-related {
    right: 20px;
  }

  .clan-panel {
    left: 20vw;
    width: 48vw;
  }

  .ar-copy-panel {
    left: 30vw;
    width: 42vw;
  }

  .about-panel {
    left: 22vw;
    width: 56vw;
  }

  .shop-panel {
    left: 28px;
    width: min(640px, 58vw);
  }

  .ar-qr-panel {
    right: clamp(110px, 16vw, 170px);
  }
}

@media (max-width: 768px) {
  .stage {
    min-height: 100svh;
  }

  .scene-bg {
    object-position: 44% center;
  }

  .brand-lockup {
    top: 16vh;
    width: min(74vw, 420px);
  }

  .top-actions {
    width: calc(100vw - 24px);
    left: 6px;
    gap: 2px;
  }

  .top-actions .image-button {
    width: 56px;
  }

  .top-actions .text-toggle {
    width: 78px;
  }

  .search-panel {
    top: -7px;
    left: auto;
    right: 10px;
    width: min(47vw, 300px);
    height: 58px;
  }

  .elder-zone {
    left: 2vw;
    bottom: 32px;
    width: min(50.82vw, 278px);
    height: 45.98vh;
  }

  .bottom-nav {
    left: 8px;
    right: 8px;
    bottom: 10px;
    gap: 6px;
  }

  .menu-trigger {
    width: 116px;
  }

  .menu-strip {
    position: absolute;
    left: 0;
    bottom: 70px;
    max-width: calc(100vw - 16px);
    align-items: center;
    gap: 6px;
    transform: translateY(10px);
  }

  .bottom-nav.is-open .menu-strip {
    transform: translateY(0);
  }

  .menu-strip a {
    width: calc((100vw - 34px) / 3);
    min-width: 102px;
    max-width: 126px;
  }

  .story-modal {
    padding: 12vh 5vw 16vh;
    place-items: end center;
  }

  .legend-stage .scene-bg {
    object-position: 42% center;
  }

  .legend-stage .elder-zone {
    left: -9vw;
    bottom: 54px;
    width: 58vw;
    height: 40vh;
  }

  .legend-arrow {
    width: 86px;
    bottom: 22px;
    left: 70%;
  }

  .legend-arrows {
    left: 70%;
    bottom: 22px;
    gap: 14px;
  }

  .legend-arrows .legend-arrow {
    width: 76px;
  }

  .legend-stage .story-modal {
    padding: 13vh 4vw 13vh;
    place-items: end center;
  }

  .legend-stage .wood-frame {
    width: 92vw;
    translate: 0 0;
  }

  .parchment {
    padding: 24px 26px;
    font-size: 20px;
    line-height: 1.48;
  }

  .parchment h2 {
    font-size: 30px;
    line-height: 1.12;
  }

  .berufe-stage .scene-bg {
    object-position: center center;
  }

  .professions-app {
    inset: 27svh 10px 92px;
  }

  .professions-scroll {
    width: 100%;
  }

  .profession-grid {
    grid-template-columns: repeat(2, minmax(120px, 1fr));
    column-gap: 10px;
    row-gap: 2px;
  }

  .profession-card span {
    font-size: 14px;
  }

  .profession-detail {
    min-height: calc(100svh - 186px);
  }

  .profession-model-wrap {
    left: -14vw;
    bottom: -7vh;
    width: 62vw;
    height: 42vh;
  }

  .profession-copy-frame {
    top: 46px;
    right: 0;
    width: min(92vw, 520px);
  }

  .profession-related {
    right: 0;
    bottom: -22px;
    grid-template-columns: repeat(4, 58px);
  }

  .clan-panel,
  .ar-copy-panel,
  .about-panel {
    top: 17.4svh;
    left: 8.4vw;
    right: auto;
    width: 82.8vw;
    height: 45.7svh;
    transform: none;
  }

  .ar-copy-panel {
    top: 27.5svh;
    height: 48.5svh;
  }

  .clan-panel,
  .about-panel {
    top: 19.2svh;
    height: 48.5svh;
  }

  .about-panel {
    top: 24svh;
  }

  .ar-qr-panel {
    right: 16vw;
    bottom: 38px;
  }

  .ar-icon {
    width: 92px;
  }

  .qr-frame {
    width: 112px;
  }

  .shop-preview-grid {
    grid-template-columns: repeat(3, minmax(70px, 1fr));
  }
}

@media (max-width: 480px) {
  .scene-bg {
    object-position: 46% center;
  }

  .brand-lockup {
    top: 20vh;
    width: 86vw;
  }

  .search-panel {
    width: min(43vw, 200px);
  }

  .search-results {
    right: 4%;
    width: 84%;
  }

  .elder-zone {
    left: -4vw;
    bottom: 22px;
    width: 65.34vw;
    height: 41.14vh;
  }

  .menu-trigger {
    width: 112px;
  }

  .menu-strip {
    bottom: 66px;
  }

  .menu-strip a {
    width: calc((100vw - 28px) / 2);
    max-width: 150px;
  }

  .wood-frame {
    width: 92vw;
  }

  .legend-stage .elder-zone {
    left: -13vw;
    bottom: 58px;
    width: 72vw;
    height: 39vh;
  }

  .legend-arrow {
    left: 72%;
    width: 76px;
  }

  .legend-arrows {
    left: 72%;
    gap: 10px;
  }

  .legend-arrows .legend-arrow {
    width: 68px;
  }

  .parchment {
    padding: 22px 24px;
    font-size: 21px;
    line-height: 1.5;
  }

  .parchment h2 {
    font-size: 31px;
  }

  .professions-app {
    inset: 27svh 8px 88px;
  }

  .professions-scroll {
    max-height: 58vh;
  }

  .profession-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .profession-card span {
    left: 6%;
    right: 6%;
    bottom: 4%;
    font-size: 13px;
  }

  .profession-copy-frame {
    width: 94vw;
  }

  .profession-copy h1 {
    font-size: 34px;
  }

  .profession-actions {
    gap: .45rem;
  }

  .profession-actions button,
  .profession-actions a {
    padding: .55rem .65rem;
    font-size: 14px;
  }

  .content-panel h1 {
    font-size: 32px;
  }

  .ar-copy-panel {
    top: 27.5svh;
    height: 48.5svh;
  }

  .clan-panel,
  .about-panel {
    top: 19.2svh;
    height: 48.5svh;
  }

  .about-panel {
    top: 24svh;
  }

  .ar-qr-panel {
    display: none;
  }

  .shop-preview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* Berufe detail: model-only responsive layout */
@media (max-width: 1100px) {
  .profession-model-wrap--solo {
    left: 50%;
    bottom: -8vh;
    width: min(58vw, 540px);
    height: 58vh;
    transform: translateX(-50%);
  }
}

@media (max-width: 700px) {
  .profession-model-wrap--solo {
    left: 50%;
    bottom: -7vh;
    width: 78vw;
    height: 48vh;
    transform: translateX(-50%);
  }

  .profession-actions--solo {
    bottom: -1vh;
  }
}


/* Berufe detail centering v3: identical center logic in every orientation */
@media (max-width: 1100px) {
  .professions-app.is-detail .profession-model-wrap--solo {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: min(58vw, 540px);
    height: 62vh;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 700px) {
  .professions-app.is-detail .profession-model-wrap--solo {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 82vw;
    height: 56svh;
    transform: translate(-50%, -50%);
  }

  .professions-app.is-detail .profession-back {
    top: 15svh;
    left: 12px;
  }

  .professions-app.is-detail .profession-related {
    display: none;
  }

  .professions-app.is-detail .profession-actions--solo {
    bottom: 10svh;
  }

  .berufe-stage .story-modal {
    padding: 8svh 5vw;
  }

  .berufe-stage .story-modal .wood-frame {
    width: min(90vw, 720px);
    max-height: 76svh;
  }
}