:root {
    --museum-gold: #d7b66d;
    --museum-red: #651713;
    --museum-black: #0a0706;
}

html,
body.museum-page {
    height: 100%;
}

body.museum-page {
    overflow: hidden;
    color: #f3ead7;
    background: var(--museum-black);
}

body.museum-page.is-museum-modal-open {
    overflow: hidden;
}

body.museum-page.is-museum-loading .site-header,
body.museum-page.is-museum-loading .museum-shell,
body.museum-page.is-museum-loading .site-footer {
    opacity: 0;
}

body.museum-page.is-museum-revealing .site-header {
    animation: museum-page-reveal 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.museum-page.is-museum-revealing .museum-shell,
body.museum-page.is-museum-revealing .site-footer {
    animation: museum-page-reveal 1.7s 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.museum-entry-loader {
    position: fixed;
    z-index: 1000;
    inset: 0;
    overflow: hidden;
    color: #fff7dd;
    background: #1a1a1a;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 1.25s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1.45s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.45s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 1.25s;
}

.museum-entry-loader::before {
    content: "";
    position: absolute;
    inset: 18px;
    pointer-events: none;
    border: 1px solid rgba(255, 244, 207, 0.32);
    box-shadow: inset 0 0 90px rgba(80, 45, 0, 0.16);
}

.museum-entry-loader.is-leaving {
    opacity: 0;
    visibility: hidden;
    filter: blur(14px);
    transform: scale(1.035);
    pointer-events: none;
}

.museum-loader-stage {
    position: absolute;
    top: 43%;
    left: 50%;
    width: min(78vw, 620px);
    height: 310px;
    perspective: 1200px;
    transform: translate(-50%, -50%);
}

.museum-loader-stage::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(62vw, 380px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 250, 221, 0.7) 0%, rgba(255, 225, 139, 0.28) 25%, transparent 68%);
    opacity: 0;
    filter: blur(14px);
    transform: translate(-50%, -50%) scale(0.55);
    transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.museum-loader-card-float {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(118px, 11vw, 172px);
    aspect-ratio: 2 / 3;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    animation: museum-loader-float 4.6s cubic-bezier(0.37, 0, 0.2, 1) infinite alternate;
    transition: filter 0.9s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.museum-loader-card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: museum-loader-card-turn 6.4s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

.museum-loader-card-face {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    filter: drop-shadow(0 18px 18px rgba(69, 38, 0, 0.3));
}

.museum-loader-card-back {
    transform: rotateY(180deg);
}

.museum-loader-copy {
    position: absolute;
    top: calc(43% + 178px);
    left: 50%;
    width: min(84vw, 540px);
    text-align: center;
    transform: translateX(-50%);
}

.museum-loader-title,
.museum-loader-status {
    margin: 0;
}

.museum-loader-title {
    color: #fff4ce;
    font-size: clamp(1rem, 2vw, 1.35rem);
    letter-spacing: 0.24em;
    text-shadow: 0 2px 18px rgba(70, 37, 0, 0.35);
}

.museum-loader-status {
    margin-top: 10px;
    color: rgba(255, 248, 222, 0.68);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    transition: color 0.55s ease, text-shadow 0.55s ease;
}

.museum-loader-progress {
    position: absolute;
    top: calc(43% + 252px);
    left: 50%;
    display: grid;
    grid-template-columns: 1fr 3.6em;
    align-items: center;
    gap: 12px;
    width: min(72vw, 360px);
    color: rgba(255, 247, 218, 0.68);
    transform: translateX(-50%);
}

.museum-loader-progress-track {
    position: relative;
    height: 2px;
    background: rgba(255, 244, 207, 0.2);
    box-shadow: 0 0 0 1px rgba(92, 51, 0, 0.1);
}

.museum-loader-progress-track::before,
.museum-loader-progress-track::after {
    content: "◇";
    position: absolute;
    top: 50%;
    color: rgba(255, 246, 211, 0.68);
    font-size: 0.65rem;
    transform: translateY(-52%);
}

.museum-loader-progress-track::before {
    right: calc(100% + 7px);
}

.museum-loader-progress-track::after {
    left: calc(100% + 7px);
}

.museum-loader-progress-fill {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #ffe49a, #fff9dc);
    box-shadow: 0 0 10px rgba(255, 244, 202, 0.8);
    transform: scaleX(0);
    transform-origin: left center;
}

.museum-loader-progress-value {
    font-size: 0.62rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    letter-spacing: 0.12em;
}

.museum-entry-loader.is-complete .museum-loader-stage::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.museum-entry-loader.is-complete .museum-loader-card-float {
    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 1))
        drop-shadow(0 0 22px rgba(255, 250, 211, 1))
        drop-shadow(0 0 52px rgba(255, 225, 120, 0.95))
        drop-shadow(0 0 90px rgba(255, 210, 76, 0.82));
    animation: museum-loader-complete-glow 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.museum-entry-loader.is-complete .museum-loader-card {
    animation-play-state: paused;
}

.museum-entry-loader.is-complete .museum-loader-status {
    color: #fffdf0;
    text-shadow: 0 0 18px rgba(255, 249, 213, 0.9);
}

.museum-entry-loader.is-complete .museum-loader-progress-fill {
    background: linear-gradient(90deg, #fff1b3, #ffffff, #fff0a0);
    box-shadow: 0 0 12px rgba(255, 255, 238, 1), 0 0 28px rgba(255, 231, 139, 0.85);
}

.museum-shell {
    position: fixed;
    inset: var(--header-height) 0 var(--footer-height);
    overflow: hidden;
    background: #080503;
}

.museum-viewport {
    width: 100%;
    height: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
}

.museum-viewport::-webkit-scrollbar {
    display: none;
}

.museum-scene {
    position: relative;
    width: calc((100dvh - var(--header-height) - var(--footer-height)) * 3);
    min-width: 100vw;
    height: 100%;
    min-height: 520px;
    overflow: hidden;
    background: url("/assets/images/backgrounds/locations/museum-lobby.webp") center / 100% 100% no-repeat;
}

.museum-scene::before,
.museum-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.museum-scene::before {
    background:
        radial-gradient(circle at 50% 38%, rgba(234, 177, 80, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 44%, rgba(0, 0, 0, 0.3));
}

.museum-scene::after {
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.48);
}

.museum-atmosphere {
    position: absolute;
    z-index: 1;
    inset: -8%;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 36%, rgba(255, 204, 111, 0.13), transparent 15%),
        linear-gradient(106deg, transparent 18%, rgba(255, 197, 92, 0.045) 36%, transparent 52%, rgba(255, 189, 75, 0.04) 71%, transparent 86%);
    mix-blend-mode: screen;
    animation: museum-light-breathe 9s cubic-bezier(0.16, 1, 0.3, 1) infinite alternate;
}

.museum-hotspot {
    position: absolute;
    z-index: 5;
    display: grid;
    place-items: center;
    width: 68px;
    aspect-ratio: 1;
    padding: 0;
    color: #f8efd9;
    border: 1px solid rgba(225, 195, 123, 0.86);
    border-radius: 50%;
    background: rgba(10, 5, 3, 0.58);
    box-shadow: 0 0 0 8px rgba(213, 176, 94, 0.08), 0 0 28px rgba(213, 176, 94, 0.24);
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), background 0.45s, box-shadow 0.55s;
}

.museum-hotspot::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(225, 195, 123, 0.54);
    border-radius: inherit;
    animation: museum-hotspot-ring 5s ease-in-out infinite;
}

.museum-hotspot span {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    width: max-content;
    padding: 5px 9px;
    color: #f7ead1;
    background: rgba(8, 4, 3, 0.78);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    transform: translateX(-50%);
}

.museum-hotspot:hover,
.museum-hotspot:focus-visible {
    outline: none;
    background: rgba(95, 18, 14, 0.75);
    box-shadow: 0 0 0 12px rgba(213, 176, 94, 0.11), 0 0 48px rgba(213, 176, 94, 0.52);
    transform: translate(-50%, -50%) scale(1.14);
}

.museum-hotspot-map { top: 41%; left: 50%; }
.museum-hotspot-desk { top: 62%; left: 50%; }
.museum-hotspot-west { top: 46%; left: 25%; }
.museum-hotspot-east { top: 46%; left: 75%; }

.museum-hotspot-map,
.museum-hotspot-desk {
    z-index: 9;
}

.museum-rosetta {
    position: absolute;
    z-index: 7;
    bottom: -30%;
    left: 60%;
    height: min(100%, 1660px);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    filter: drop-shadow(0 28px 24px rgba(0, 0, 0, 0.48));
    transform: translateX(-50%);
    transform-origin: 50% 100%;
    transition: filter 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.museum-rosetta-image {
    display: block;
    width: auto;
    height: 100%;
    pointer-events: none;
    user-select: none;
    transform-origin: 50% 100%;
    animation: museum-rosetta-idle 6.8s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.museum-rosetta-image-blink,
.museum-rosetta-image-talk {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    clip-path: ellipse(20% 12% at 50% 15%);
}

.museum-rosetta-image-blink,
.museum-rosetta-image-talk {
    transition: opacity 140ms ease-out;
}

.museum-rosetta.is-blinking:not(.is-speaking) .museum-rosetta-image-blink,
.museum-rosetta.is-speaking.is-mouth-open .museum-rosetta-image-talk {
    opacity: 1;
}

.museum-rosetta-name {
    position: absolute;
    right: 12%;
    bottom: 9%;
    width: max-content;
    padding: 7px 12px;
    color: #f4e5c4;
    border: 1px solid rgba(215, 182, 109, 0.34);
    background: rgba(11, 5, 3, 0.8);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.museum-rosetta:hover,
.museum-rosetta:focus-visible {
    outline: none;
    filter: drop-shadow(0 30px 25px rgba(0, 0, 0, 0.52)) drop-shadow(0 0 20px rgba(212, 159, 73, 0.2));
    transform: translateX(-50%) scale(1.012);
}

.museum-rosetta:hover .museum-rosetta-name,
.museum-rosetta:focus-visible .museum-rosetta-name {
    opacity: 1;
    transform: none;
}

.museum-rosetta-bubble {
    position: absolute;
    z-index: 10;
    top: -10%;
    right: 40%;
    left: auto;
    width: max-content;
    max-width: min(380px, 36vw);
    min-width: 0;
    padding: 22px 28px;
    color: #28231d;
    background: linear-gradient(135deg, rgba(248, 245, 234, 0.97), rgba(225, 218, 199, 0.96));
    border: 1px solid rgba(177, 147, 83, 0.86);
    border-radius: 3px;
    box-shadow: inset 0 0 0 5px rgba(177, 147, 83, 0.12), 0 14px 34px rgba(0, 0, 0, 0.48);
    opacity: 0;
    pointer-events: none;
    transform: translateY(14px);
}

.museum-rosetta-bubble::after {
    content: "";
    position: absolute;
    right: 20%;
    bottom: -11px;
    width: 20px;
    height: 20px;
    background: #e7e0cd;
    border-right: 1px solid rgba(177, 147, 83, 0.86);
    border-bottom: 1px solid rgba(177, 147, 83, 0.86);
    transform: rotate(45deg);
}

.museum-rosetta-bubble > span {
    position: relative;
    z-index: 2;
    display: block;
    margin: 0;
    text-align: center;
    font-family: var(--serif);
    font-size: clamp(0.74rem, 0.9vw, 0.94rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: 0.06em;
    line-break: strict;
    overflow-wrap: normal;
    word-break: auto-phrase;
    text-wrap: pretty;
}

.museum-rosetta-bubble.is-visible {
    animation: museum-thought 5.6s ease-in-out forwards;
}

@keyframes museum-rosetta-idle {
    0%,
    100% {
        transform: translateY(0) rotate(-0.08deg) scale(1);
    }

    48% {
        transform: translateY(-6px) rotate(0.1deg) scale(1.003);
    }
}

.museum-location {
    z-index: 15;
}

.museum-swipe-hint {
    position: fixed;
    z-index: 8;
    bottom: 22px;
    left: 50%;
    display: none;
    margin: 0;
    padding: 7px 12px;
    color: rgba(247, 236, 214, 0.65);
    background: rgba(7, 4, 3, 0.66);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    transform: translateX(-50%);
}

.museum-dialog {
    position: fixed;
    z-index: 20;
    right: 5vw;
    bottom: calc(var(--footer-height) + 28px);
    left: 5vw;
    width: 90vw;
    min-height: 210px;
    margin: 0;
    padding: 34px clamp(38px, 5vw, 72px);
    color: #efe8d7;
    background: linear-gradient(135deg, rgba(4, 22, 24, 0.96), rgba(10, 37, 41, 0.93));
    border: 1px solid rgba(213, 189, 130, 0.75);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.52);
    animation: museum-dialog-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition:
        opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.55s;
}

.museum-dialog.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(72px);
}

.museum-dialog[hidden],
.museum-guide-modal[hidden],
.museum-map-modal[hidden],
.museum-map-confirm[hidden] {
    display: none;
}

.museum-dialog::before,
.museum-guide-panel::before,
.museum-map-panel::before {
    content: "";
    position: absolute;
    inset: 7px;
    pointer-events: none;
    border: 1px solid rgba(215, 182, 109, 0.16);
}

.museum-dialog-speaker {
    margin: 0 0 9px;
    color: var(--museum-gold);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
}

.museum-dialog-text {
    margin: 0;
    color: #efe8d7;
    font-size: clamp(1rem, 1.3vw, 1.22rem);
    line-height: 1.85;
}

.museum-dialog-close,
.museum-map-close {
    position: absolute;
    z-index: 4;
    top: 16px;
    right: 18px;
    width: 42px;
    height: 42px;
    padding: 0;
    color: #f2e7d1;
    border: 1px solid rgba(215, 182, 109, 0.5);
    background: rgba(255, 255, 255, 0.035);
    font: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

.museum-dialog-close {
    top: 16px;
    right: 20px;
    width: auto;
    height: auto;
    padding: 7px 12px;
    color: rgba(239, 232, 215, 0.76);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(213, 189, 130, 0.35);
}

.museum-guide-modal,
.museum-map-modal {
    position: fixed;
    z-index: 60;
    inset: var(--header-height) 0 var(--footer-height);
    display: grid;
    place-items: center;
    padding: clamp(18px, 4vw, 54px);
    overflow-y: auto;
    background: rgba(3, 2, 2, 0.82);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.museum-guide-modal.is-open,
.museum-map-modal.is-open {
    opacity: 1;
}

.museum-guide-panel,
.museum-map-panel {
    position: relative;
    width: min(1120px, 100%);
    padding: clamp(24px, 4vw, 52px);
    border: 1px solid rgba(215, 182, 109, 0.58);
    background:
        linear-gradient(rgba(21, 5, 4, 0.77), rgba(6, 4, 3, 0.91)),
        url("/assets/images/backgrounds/patterns/dark-ornament.svg") center / 520px auto repeat;
    box-shadow: 0 35px 100px rgba(0, 0, 0, 0.72);
    transform: translateY(22px) scale(0.985);
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.museum-guide-modal.is-open .museum-guide-panel,
.museum-map-modal.is-open .museum-map-panel {
    transform: none;
}

.museum-guide-panel {
    width: min(1040px, 100%);
}

.museum-guide-intro {
    margin: -6px auto 28px;
    color: rgba(239, 226, 199, 0.72);
    text-align: center;
    font-size: clamp(0.78rem, 1.1vw, 0.94rem);
    line-height: 1.8;
    letter-spacing: 0.08em;
}

.museum-guide-destinations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.museum-guide-destinations button {
    position: relative;
    display: grid;
    align-content: center;
    gap: 6px;
    min-height: 118px;
    padding: 18px 20px;
    overflow: hidden;
    color: rgba(243, 234, 215, 0.74);
    border: 1px solid rgba(215, 182, 109, 0.28);
    background: rgba(10, 7, 6, 0.68);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 0.4s, border-color 0.4s, background 0.4s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}

.museum-guide-destinations button::after {
    content: "";
    position: absolute;
    inset: auto -20% -70% 30%;
    height: 110px;
    background: radial-gradient(circle, rgba(119, 49, 139, 0.3), transparent 68%);
    opacity: 0;
    transition: opacity 0.45s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(18px);
}

.museum-guide-destinations button:hover,
.museum-guide-destinations button:focus-visible {
    color: #fff0cf;
    border-color: rgba(215, 182, 109, 0.8);
    background: rgba(53, 18, 44, 0.82);
    box-shadow: inset 0 0 26px rgba(122, 50, 142, 0.16), 0 8px 28px rgba(0, 0, 0, 0.34);
    outline: none;
    transform: translateY(-3px);
}

.museum-guide-destinations button:hover::after,
.museum-guide-destinations button:focus-visible::after {
    opacity: 1;
    transform: none;
}

.museum-guide-destinations span,
.museum-guide-destinations strong,
.museum-guide-destinations small {
    position: relative;
    z-index: 1;
}

.museum-guide-destinations span {
    color: var(--museum-gold);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
}

.museum-guide-destinations strong {
    font-size: clamp(0.88rem, 1.2vw, 1.06rem);
    font-weight: 500;
    letter-spacing: 0.09em;
}

.museum-guide-destinations small {
    color: rgba(215, 182, 109, 0.48);
    font-size: 0.52rem;
    letter-spacing: 0.2em;
}

.museum-map-heading {
    text-align: center;
}

.museum-map-heading p {
    margin: 0;
    color: rgba(215, 182, 109, 0.64);
    font-size: 0.6rem;
    letter-spacing: 0.3em;
}

.museum-map-heading h1 {
    margin: 8px 0 22px;
    color: #f0dfbb;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem);
    font-weight: 500;
    letter-spacing: 0.12em;
}

.museum-map-canvas {
    position: relative;
    width: min(100%, 820px);
    margin: 0 auto;
    border: 1px solid rgba(215, 182, 109, 0.35);
    background: #130805;
    box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.museum-map-canvas img {
    display: block;
    width: 100%;
    height: auto;
    filter: saturate(0.78) brightness(0.83) contrast(1.08);
}

.museum-map-current {
    position: absolute;
    left: 50%;
    bottom: 13%;
    padding: 5px 9px;
    color: #fff1cd;
    background: rgba(111, 20, 15, 0.88);
    border: 1px solid rgba(232, 199, 118, 0.68);
    font-size: 0.62rem;
    transform: translateX(-50%);
    box-shadow: 0 0 22px rgba(214, 64, 42, 0.5);
}

.museum-map-destinations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 18px;
}

.museum-map-destinations button {
    display: grid;
    gap: 4px;
    min-height: 92px;
    padding: 14px 15px;
    color: rgba(243, 234, 215, 0.7);
    border: 1px solid rgba(215, 182, 109, 0.28);
    background: rgba(10, 7, 6, 0.68);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: color 0.4s, border-color 0.4s, background 0.4s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.museum-map-destinations button:hover,
.museum-map-destinations button:focus-visible {
    color: #fff0cf;
    border-color: rgba(215, 182, 109, 0.76);
    background: rgba(80, 18, 13, 0.55);
    outline: none;
    transform: translateY(-4px);
}

.museum-map-destinations span,
.museum-map-destinations small {
    color: rgba(215, 182, 109, 0.58);
    font-size: 0.52rem;
    letter-spacing: 0.16em;
}

.museum-map-destinations strong {
    font-size: 0.88rem;
    font-weight: 500;
    letter-spacing: 0.08em;
}

.museum-map-confirm {
    position: absolute;
    z-index: 8;
    inset: 0;
    display: grid;
    place-content: center;
    padding: 28px;
    text-align: center;
    background: rgba(4, 2, 2, 0.91);
    backdrop-filter: blur(8px);
    animation: museum-confirm-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.museum-map-confirm > p:first-child {
    width: min(560px, 100%);
    margin: 0 auto 20px;
    color: rgba(243, 234, 215, 0.68);
    font-size: 0.8rem;
    line-height: 1.9;
}

.museum-map-confirm > p:nth-child(2) {
    margin: 0;
    color: #f2e4c7;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    letter-spacing: 0.09em;
}

.museum-map-confirm div {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 26px;
}

.museum-map-confirm button {
    min-width: 120px;
    padding: 11px 22px;
    color: #f3e7ce;
    border: 1px solid rgba(215, 182, 109, 0.52);
    background: rgba(255, 255, 255, 0.04);
    font: inherit;
    cursor: pointer;
}

.museum-map-confirm button:hover,
.museum-map-confirm button:focus-visible,
.museum-dialog-close:hover,
.museum-dialog-close:focus-visible,
.museum-map-close:hover,
.museum-map-close:focus-visible {
    color: #160a06;
    background: var(--museum-gold);
    outline: none;
}

@keyframes museum-light-breathe {
    from { opacity: 0.55; transform: translate3d(-0.3%, 0, 0); }
    to { opacity: 1; transform: translate3d(0.3%, -0.2%, 0); }
}

@keyframes museum-hotspot-ring {
    0%, 100% { opacity: 0.34; transform: scale(0.9); }
    50% { opacity: 0.9; transform: scale(1.08); }
}

@keyframes museum-dialog-in {
    from { opacity: 0; transform: translateY(72px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes museum-thought {
    0%, 5% { opacity: 0; transform: translateY(14px); }
    16%, 72% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-10px); }
}

@keyframes museum-confirm-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes museum-loader-float {
    0% {
        transform: translate(-50%, -47%) rotateZ(-2.5deg) rotateX(-3deg);
    }
    42% {
        transform: translate(-50%, -55%) rotateZ(1.6deg) rotateX(4deg);
    }
    100% {
        transform: translate(-50%, -49%) rotateZ(-0.8deg) rotateX(-1deg);
    }
}

@keyframes museum-loader-card-turn {
    0% { transform: rotateY(-16deg); }
    26% { transform: rotateY(58deg); }
    50% { transform: rotateY(180deg); }
    76% { transform: rotateY(304deg); }
    100% { transform: rotateY(344deg); }
}

@keyframes museum-loader-complete-glow {
    0% {
        transform: translate(-50%, -50%) scale(1);
        filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
    }
    46% {
        transform: translate(-50%, -50%) scale(1.1);
        filter:
            drop-shadow(0 0 12px rgba(255, 255, 255, 1))
            drop-shadow(0 0 34px rgba(255, 250, 211, 1))
            drop-shadow(0 0 74px rgba(255, 225, 120, 1));
    }
    100% {
        transform: translate(-50%, -50%) scale(1.045);
        filter:
            drop-shadow(0 0 8px rgba(255, 255, 255, 1))
            drop-shadow(0 0 22px rgba(255, 250, 211, 1))
            drop-shadow(0 0 52px rgba(255, 225, 120, 0.95))
            drop-shadow(0 0 90px rgba(255, 210, 76, 0.82));
    }
}

@keyframes museum-page-reveal {
    from { opacity: 0; filter: blur(8px); }
    to { opacity: 1; filter: blur(0); }
}

@media (max-width: 700px) {
    .museum-entry-loader::before {
        inset: 10px;
    }

    .museum-loader-stage {
        top: 40%;
        height: 280px;
    }

    .museum-loader-card-float {
        width: clamp(112px, 34vw, 150px);
    }

    .museum-loader-copy {
        top: calc(40% + 168px);
    }

    .museum-loader-progress {
        top: calc(40% + 242px);
        width: min(68vw, 320px);
    }

    .museum-scene {
        width: calc((100dvh - var(--header-height) - var(--footer-height)) * 3);
        min-height: 500px;
    }

    .museum-hotspot {
        width: 58px;
    }

    .museum-hotspot span {
        font-size: 0.58rem;
    }

    .museum-rosetta {
        bottom: -30%;
        left: 59%;
        height: min(100%, 1660px);
    }

    .museum-rosetta-name {
        display: none;
    }

    .museum-rosetta-bubble {
        top: -10%;
        right: 40%;
        bottom: auto;
        left: auto;
        width: max-content;
        max-width: min(280px, 76vw);
        min-width: 0;
        padding: 18px 20px;
        border-radius: 3px;
        text-align: center;
    }

    .museum-rosetta-bubble::after {
        display: block;
        right: 17%;
    }

    .museum-swipe-hint {
        display: block;
    }

    .museum-dialog {
        right: 5vw;
        bottom: calc(var(--footer-height) + 18px);
        left: 5vw;
        width: 90vw;
        min-height: 174px;
        padding: 24px 26px;
    }

    .museum-dialog-text {
        padding-right: 0;
        font-size: clamp(0.88rem, 3.7vw, 1rem);
    }

    .museum-guide-modal,
    .museum-map-modal {
        place-items: start center;
        padding: 14px;
    }

    .museum-guide-panel,
    .museum-map-panel {
        min-height: 100%;
        padding: 62px 16px 24px;
    }

    .museum-map-heading h1 {
        margin-bottom: 16px;
    }

    .museum-map-destinations {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .museum-guide-intro {
        margin-bottom: 18px;
        padding-inline: 10px;
    }

    .museum-guide-destinations {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .museum-guide-destinations button {
        grid-template-columns: 32px 1fr auto;
        align-items: center;
        min-height: 68px;
        padding: 11px 14px;
    }

    .museum-guide-destinations small {
        text-align: right;
    }

    .museum-map-destinations button {
        grid-template-columns: 28px 1fr;
        align-items: center;
        min-height: 66px;
        padding: 10px 13px;
    }

    .museum-map-destinations small {
        grid-column: 2;
    }

    .museum-map-confirm div {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .museum-loader-card-float,
    .museum-loader-card {
        animation: none;
    }

    .museum-atmosphere,
    .museum-hotspot::before {
        animation: none;
    }

    .museum-rosetta,
    .museum-rosetta-image,
    .museum-rosetta-bubble,
    .museum-dialog {
        transition-duration: 0.01ms;
    }

    .museum-rosetta-image {
        animation: none;
    }
}