/* Immersive guided tour (docs/VISITA_GUIDATA.md), prefix .mt-. Always dark: it lives over the camera
   or over a slowly moving photo of the artwork. Uses app.css tokens (fonts, easing, safe areas). */

/* ---------- Page chrome: full screen like the camera page ---------- */
body[data-page="guide-tour"] .app-header, body[data-page="guide-tour"] .app-bottom-nav, body[data-page="guide-tour"] .app-footer { display: none; }
body[data-page="guide-tour"] main { animation: none; }
body[data-page="guide-tour"] .workspace { padding: 0; }
body.mt-open { overflow: hidden; }
body.mt-open #toast, body[data-page="guide-tour"] #toast { top: calc(var(--safe-top) + 74px); bottom: auto; transform: translate(-50%, -14px); background: rgba(245, 241, 234, .96); color: #10222a; }
body.mt-open #toast.visible, body[data-page="guide-tour"] #toast.visible { transform: translate(-50%, 0); }

.mt-start, .mt-player {
  --mt-ink: #f5f1ea;
  --mt-muted: rgba(245, 241, 234, .7);
  --mt-faint: rgba(245, 241, 234, .44);
  --mt-line: rgba(255, 255, 255, .13);
  --mt-accent: #e8704a;
  --mt-gold: #f7c23b;
  --mt-ok: #7fd3a6;
  position: fixed; inset: 0; overflow: hidden; overflow: clip; isolation: isolate;   /* clip: focus and scrollIntoView never scroll the layer */
  color: var(--mt-ink); background: #060b0e; font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}
.mt-start { z-index: 60; }
.mt-player { z-index: 80; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.mt-i { width: 20px; height: 20px; flex: none; }
.mt-start .mg-i, .mt-player .mg-i { width: 18px; height: 18px; flex: none; }

/* ---------- Backdrop: photo with a slow Ken Burns, or the camera ---------- */
.mt-bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; transition: opacity .6s ease;
  background: radial-gradient(110% 70% at 85% 0%, #1f4c56 0%, transparent 58%), radial-gradient(90% 60% at 0% 100%, #3b2418 0%, transparent 62%), #071014; }
.mt-kb { position: absolute; inset: -3%; width: 106%; height: 106%; object-fit: cover; opacity: 0; filter: brightness(.6) saturate(1.08); transition: opacity 1.4s ease; will-change: transform, opacity; }
.mt-kb.is-on { opacity: 1; animation: mt-kenburns 28s ease-in-out infinite alternate; }
@keyframes mt-kenburns { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.16) translate3d(-2.4%, -2.8%, 0); } }
.mt-cam { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none;
  transform: translateY(var(--cam-dy, 0px)) scale(var(--cam-k, 1)); transition: opacity .5s ease, filter .7s ease, transform .6s var(--ease); }
.mt-player[data-cam="live"] .mt-cam { opacity: 1; }
.mt-player[data-cam="live"] .mt-bg { opacity: 0; }
.mt-player[data-cam="live"]:not([data-phase="find"]) .mt-cam { filter: blur(22px) brightness(.46) saturate(1.3); transform: translateY(var(--cam-dy, 0px)) scale(calc(var(--cam-k, 1) * 1.14)); }
.mt-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4, 9, 11, .74) 0, rgba(4, 9, 11, .18) 17%, rgba(4, 9, 11, 0) 34%, rgba(4, 9, 11, .34) 56%, rgba(4, 9, 11, .92) 100%); }
.mt-player[data-phase="find"][data-cam="live"] .mt-scrim { background: linear-gradient(to bottom, rgba(4, 9, 11, .66) 0, rgba(4, 9, 11, 0) 20%, rgba(4, 9, 11, 0) 50%, rgba(4, 9, 11, .8) 100%); }

/* ---------- Top: segmented progress, step count, close ---------- */
.mt-top { position: relative; z-index: 5; width: min(100%, 680px); margin: 0 auto; padding: calc(10px + var(--safe-top)) 12px 4px; }
.mt-progress { display: flex; gap: var(--mt-gap, 3px); height: 4px; margin: 0 4px 10px; }
.mt-seg { position: relative; flex: 1 1 0; min-width: 2px; border-radius: 3px; background: rgba(255, 255, 255, .2); overflow: hidden; transition: background .3s; }
.mt-seg i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: #fff; transition: width .6s var(--ease); }
.mt-seg.is-current { background: rgba(255, 255, 255, .34); box-shadow: 0 0 12px rgba(240, 194, 125, .4); }
.mt-seg.is-current i { background: linear-gradient(90deg, #fff 30%, var(--mt-gold)); }
.mt-top-row { display: flex; align-items: center; gap: 10px; }
.mt-round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; text-decoration: none;
  background: rgba(10, 20, 24, .42); border: 1px solid var(--mt-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background .15s; }
.mt-round:hover { background: rgba(255, 255, 255, .16); }
.mt-round .mg-i, .mt-round .mt-i { width: 21px; height: 21px; }
.mt-round.is-ghost { visibility: hidden; }
.mt-round.is-dark { background: rgba(255, 255, 255, .08); }
.mt-round[aria-pressed="false"] { color: var(--mt-muted); }
.mt-top-title { flex: 1; min-width: 0; display: grid; justify-items: center; line-height: 1.22; text-align: center; text-shadow: 0 1px 8px rgba(0, 0, 0, .55); }
.mt-top-title strong { font-size: 14.5px; font-weight: 800; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.mt-top-title small { max-width: 100%; font-size: 12.5px; font-weight: 650; color: var(--mt-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-player[data-phase="end"] #mt-cam-btn { visibility: hidden; }

/* ---------- Stage: artwork, plan, viewfinder ---------- */
.mt-stage { position: relative; z-index: 1; min-height: 0; }
.mt-visual { position: absolute; inset: 4px 16px 14px; display: flex; align-items: center; justify-content: center; transition: opacity .4s ease; }
.mt-player[data-cam="live"][data-phase="find"] .mt-visual { opacity: 0; pointer-events: none; }
.mt-art { position: relative; margin: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.mt-art img { display: block; max-width: min(100%, 560px); max-height: 100%; width: auto; height: auto; min-width: 0; min-height: 0; object-fit: contain; border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16), 0 26px 70px rgba(0, 0, 0, .6), 0 0 90px rgba(240, 194, 125, .14); animation: mt-art-in .7s var(--ease); }
.mt-art .mt-art-fallback { width: min(62vw, 300px); aspect-ratio: 4 / 3; border-radius: 18px; }
@keyframes mt-art-in { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
.mt-art.is-finding, .mt-art.has-action { flex-direction: column; gap: 12px; }
.mt-art.is-finding img, .mt-art.is-finding .mt-art-fallback { max-height: calc(100% - 50px); filter: saturate(.9); }
.mt-art.has-action img, .mt-art.has-action .mt-art-fallback { max-height: calc(100% - 56px); }
.mt-art .mt-pill { flex: none; }
.mt-art figcaption { flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px;
  background: rgba(10, 20, 24, .6); border: 1px solid var(--mt-line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); font-size: 12.5px; font-weight: 750; white-space: nowrap; }
.mt-art.is-finding::after { content: ""; position: absolute; left: 50%; top: calc(50% - 25px); width: 70%; aspect-ratio: 1; max-height: 90%; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid rgba(240, 194, 125, .5); animation: mt-pulse 2.6s ease-out infinite; pointer-events: none; }
@keyframes mt-pulse { from { opacity: .9; transform: translate(-50%, -50%) scale(.7); } to { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } }

.mt-emblem { display: grid; justify-items: center; gap: 4px; text-align: center; animation: mt-art-in .8s var(--ease); }
.mt-emblem-ring { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 10px; color: var(--mt-gold);
  background: radial-gradient(circle, rgba(240, 194, 125, .22), rgba(240, 194, 125, .04) 70%); box-shadow: 0 0 0 1px rgba(240, 194, 125, .35), 0 0 60px rgba(240, 194, 125, .25); }
.mt-emblem-ring .mg-i { width: 42px; height: 42px; }
.mt-emblem strong { font: 600 30px/1.1 var(--display); font-stretch: var(--display-stretch);}
.mt-emblem small { color: var(--mt-muted); font-weight: 700; font-size: 14px; }

.mt-plan { margin: 0; width: min(100%, 520px); max-height: 100%; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 22px;
  background: rgba(12, 24, 29, .55); border: 1px solid var(--mt-line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 20px 50px rgba(0, 0, 0, .4); animation: mt-art-in .6s var(--ease); }
.mt-plan-frame { flex: 1 1 auto; min-height: 0; display: flex; }
.mt-plan .mg-plan-svg { width: 100%; height: auto; max-height: 100%; }
.mt-plan .mg-plan-floor { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .2); }
.mt-plan .mg-plan-gridline { stroke: rgba(255, 255, 255, .05); }
.mt-plan .mg-room-rect { fill: rgba(255, 255, 255, .07); stroke: rgba(255, 255, 255, .26); }
.mt-plan .mg-room.is-visited .mg-room-rect { fill: rgba(127, 211, 166, .12); }
.mt-plan .mg-room.is-highlight .mg-room-rect { fill: rgba(232, 112, 74, .34); stroke: var(--mt-accent); stroke-width: 2.5; animation: mt-room 2.4s ease-in-out infinite; }
@keyframes mt-room { 50% { fill: rgba(232, 112, 74, .18); } }
.mt-plan .mg-room-badge { fill: rgba(255, 255, 255, .18); }
.mt-plan .mg-room.is-highlight .mg-room-badge { fill: var(--mt-accent); }
.mt-plan .mg-item-dot { fill: rgba(255, 255, 255, .45); }
.mt-plan .mg-item-dot.is-visited { fill: var(--mt-ok); }
.mt-plan .mg-lift rect { fill: rgba(255, 255, 255, .1); stroke: rgba(255, 255, 255, .5); }
.mt-plan .mg-lift path { stroke: rgba(255, 255, 255, .6); }
.mt-plan figcaption { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 12.5px; font-weight: 750; color: var(--mt-muted); }

/* Viewfinder (find phase with the camera), centred on the stage: the camera image is shifted to match. */
.mt-finder { position: absolute; left: 50%; top: 50%; width: var(--finder, 240px); height: var(--finder, 240px); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .35s ease; }
.mt-player[data-phase="find"][data-cam="live"] .mt-finder { opacity: 1; }
.mt-finder i { position: absolute; width: 40px; height: 40px; border: 4px solid rgba(255, 255, 255, .95); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .45)); transition: border-color .25s, transform .35s var(--ease); }
.mt-finder .c1 { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 20px; }
.mt-finder .c2 { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 20px; }
.mt-finder .c3 { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 20px; }
.mt-finder .c4 { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 20px; }
.mt-scan { position: absolute; left: 9%; right: 9%; top: 12%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent); box-shadow: 0 0 14px rgba(255, 255, 255, .6); animation: mt-scan 2.8s ease-in-out infinite; }
@keyframes mt-scan { 0%, 100% { top: 12%; } 50% { top: 86%; } }
.mt-finder.is-locking i { border-color: var(--mt-gold); }
.mt-finder.is-locking .c1 { transform: translate(7px, 7px); } .mt-finder.is-locking .c2 { transform: translate(-7px, 7px); }
.mt-finder.is-locking .c3 { transform: translate(7px, -7px); } .mt-finder.is-locking .c4 { transform: translate(-7px, -7px); }
.mt-finder.is-locked i { border-color: var(--mt-accent); }
.mt-finder.is-locked .c1 { transform: translate(16px, 16px); } .mt-finder.is-locked .c2 { transform: translate(-16px, 16px); }
.mt-finder.is-locked .c3 { transform: translate(16px, -16px); } .mt-finder.is-locked .c4 { transform: translate(-16px, -16px); }
.mt-finder.is-locked .mt-scan { opacity: 0; }
.mt-lock-ring { position: absolute; inset: 18%; border-radius: 50%; border: 3px solid var(--mt-accent); opacity: 0; }
.mt-finder.is-locked .mt-lock-ring { animation: mt-ring .85s var(--ease) forwards; }
@keyframes mt-ring { 0% { opacity: .95; transform: scale(.4); } 70% { opacity: .5; } 100% { opacity: 0; transform: scale(1.5); } }
.mt-lock-label { position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; background: var(--mt-accent); color: #fff; font-weight: 800; font-size: 15px; white-space: nowrap; box-shadow: 0 10px 30px rgba(232, 112, 74, .5); opacity: 0; transform: translate(-50%, -50%) scale(.6); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.4, .3, 1); }
.mt-finder.is-locked .mt-lock-label { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.mt-diag { position: absolute; left: 12px; top: 6px; max-width: min(300px, calc(100% - 24px)); padding: 8px 10px; border-radius: 12px; background: rgba(5, 12, 15, .8); font: 600 11.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; pointer-events: none; }

/* «Sei davanti a Y: vai lì?» */
.mt-chip-slot { position: absolute; left: 12px; right: 12px; top: calc(var(--safe-top) + 82px); z-index: 6; display: flex; justify-content: center; pointer-events: none; }
.mt-chip { pointer-events: auto; display: flex; align-items: center; gap: 10px; width: min(100%, 460px); padding: 8px; border-radius: 20px; background: rgba(12, 24, 29, .86); border: 1px solid rgba(240, 194, 125, .5); box-shadow: 0 16px 44px rgba(0, 0, 0, .5); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); animation: mt-chip-in .38s var(--ease); }
@keyframes mt-chip-in { from { opacity: 0; transform: translateY(-12px) scale(.97); } to { opacity: 1; transform: none; } }
.mt-chip-art { width: 48px; height: 48px; border-radius: 12px; overflow: hidden; flex: none; }
.mt-chip-art img { width: 100%; height: 100%; object-fit: cover; }
.mt-chip-copy { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mt-chip-copy small { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--mt-gold); }
.mt-chip-copy strong { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-chip-copy em { font-style: normal; font-size: 12.5px; color: var(--mt-muted); font-weight: 650; }
.mt-chip-go { height: 40px; padding: 0 16px; border-radius: 999px; background: #fff; color: #0d1c22; font-weight: 800; font-size: 14px; }
.mt-chip-x { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--mt-muted); }

/* ---------- Bottom: glass sheet and big round controls ---------- */
.mt-sheet { position: relative; z-index: 4; width: min(100%, 680px); margin: 0 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto;
  max-height: min(56vh, calc(100vh - var(--safe-top) - 250px)); padding: 0 10px calc(8px + var(--safe-bottom)); }
@supports (height: 100dvh) { .mt-sheet { max-height: min(56dvh, calc(100dvh - var(--safe-top) - 250px)); } }
/* The card is a column: heading and extras keep their size, the subtitles take what is left. */
.mt-card { min-height: 0; display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding: 18px 18px 16px; border-radius: 26px;
  background: linear-gradient(180deg, rgba(22, 37, 43, .72), rgba(10, 19, 23, .84)); border: 1px solid var(--mt-line);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); }
.mt-card::-webkit-scrollbar { display: none; }
.mt-card.is-in-next { animation: mt-in-next .45s var(--ease); }
.mt-card.is-in-prev { animation: mt-in-prev .45s var(--ease); }
.mt-card.is-in-soft { animation: mt-in-soft .45s var(--ease); }
@keyframes mt-in-next { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes mt-in-prev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes mt-in-soft { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.mt-kicker { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; line-height: 1.5; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mt-gold); }
.mt-kicker .mg-i { width: 14px; height: 14px; margin-top: 1.5px; }
.mt-kicker > span:not(.mt-found) { flex: 1 1 0; min-width: 0; }
.mt-found { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px 0 7px; border-radius: 999px; background: var(--mt-accent); color: #fff; letter-spacing: .06em; }
.mt-found .mg-i { width: 13px; height: 13px; }
.mt-title { margin: 7px 0 2px; font: 600 clamp(24px, 6.8vw, 31px)/1.1 var(--display); letter-spacing: -.015em; text-wrap: balance; transition: text-shadow .4s, color .4s; font-stretch: var(--display-stretch);}
.mt-title.is-speaking { color: #fff; text-shadow: 0 0 26px rgba(240, 194, 125, .55); }
.mt-title.is-find { font-size: clamp(21px, 5.8vw, 26px); }
.mt-sub { margin: 2px 0 0; color: var(--mt-muted); font-size: 13.5px; font-weight: 650; line-height: 1.4; }
.mt-note { display: flex; gap: 10px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(240, 194, 125, .1); border: 1px solid rgba(240, 194, 125, .28); color: #fbe9cc; font-size: 14.5px; font-weight: 650; line-height: 1.42; transition: box-shadow .3s, background .3s; }
.mt-note .mg-i { margin-top: 1px; color: var(--mt-gold); }
.mt-note.is-speaking { background: rgba(240, 194, 125, .18); box-shadow: 0 0 0 3px rgba(240, 194, 125, .2); }
.mt-foot { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--mt-muted); font-size: 13px; font-weight: 650; }
.mt-foot .mg-i { width: 16px; height: 16px; }

/* Subtitles: the sentence being read is bright, the others fade. */
.mt-subs { position: relative; margin: 12px 0 2px; font-size: 18px; line-height: 1.58; font-weight: 600; letter-spacing: -.004em; scrollbar-width: none; }
.mt-subs::-webkit-scrollbar { display: none; }
.mt-card > * { flex: none; }
.mt-card > .mt-subs.is-live { flex: 1 1 auto; min-height: calc(1.58em * 3.4); }
.mt-subs.is-live { overflow-y: auto; padding: .15em 0 1.6em;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 72%, transparent 100%); }
.mt-subs.is-live.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 72%, transparent 100%); }
.mt-s { color: rgba(245, 241, 234, .38); transition: color .45s ease, text-decoration-color .45s ease, text-shadow .45s ease; cursor: pointer;
  text-decoration: underline 2px transparent; text-underline-offset: 6px; }
.mt-s.is-past { color: rgba(245, 241, 234, .58); }
.mt-s.is-on { color: #fff; text-decoration-color: rgba(240, 194, 125, .75); text-shadow: 0 0 18px rgba(255, 255, 255, .18); }
.mt-s.is-lead { display: none; }
.mt-subs.is-reading .mt-s, .mt-subs.is-done .mt-s { color: rgba(245, 241, 234, .9); background: none; }
.mt-subs.is-reading { font-size: 17px; font-weight: 550; line-height: 1.6; }

.mt-extras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mt-extras:empty { display: none; }
.mt-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px 0 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--mt-line); color: #fff; font-size: 14px; font-weight: 750; text-decoration: none; }
.mt-pill.is-video { background: linear-gradient(135deg, rgba(240, 194, 125, .95), #e9a45c); color: #2a1a07; border-color: transparent; box-shadow: 0 8px 22px rgba(233, 164, 92, .35); }
.mt-pill.is-video .mg-i path { fill: currentColor; }
.mt-pill.is-found .mg-treasure-art { width: 26px; height: 26px; }
.mt-treasure { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 20px; background: rgba(255, 207, 63, .16); border: 1px solid rgba(255, 207, 63, .5); color: #fff3cc; text-decoration: none; }
.mt-treasure strong { display: block; font-size: 14px; }
.mt-treasure small { display: block; font-size: 12.5px; color: rgba(255, 243, 204, .8); line-height: 1.35; }
.mt-treasure-art { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: rgba(255, 255, 255, .12); }
.mt-treasure-art .mg-treasure-art { width: 36px; height: 36px; }
.mt-treasure .mg-treasure.is-small { position: relative; width: 52px; height: 52px; flex: none; }

.mt-facts { display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 18px; margin: 12px -18px 0; padding: 0 18px 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
.mt-facts::-webkit-scrollbar { display: none; }
.mt-fact { scroll-snap-align: start; padding: 10px 13px 11px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid var(--mt-line); }
.mt-fact small { display: inline-flex; align-items: center; gap: 5px; color: var(--mt-gold); font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mt-fact small .mg-i { width: 12px; height: 12px; }
.mt-fact p { margin: 4px 0 0; font-size: 13.5px; line-height: 1.42; color: rgba(245, 241, 234, .9); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.mt-next-slot:empty { display: none; }
.mt-next-slot { margin-top: 14px; }
.mt-avanti { width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .12); border: 1px solid var(--mt-line); color: #fff; font-weight: 800; font-size: 15px; }
.mt-avanti > :not(svg) { overflow: hidden; text-overflow: ellipsis; }
.mt-avanti.is-ready { background: #fff; color: #0d1c22; border-color: transparent; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); animation: mt-in-soft .4s var(--ease); }
.mt-count { display: flex; align-items: center; gap: 12px; padding: 9px 9px 9px 10px; border-radius: 20px; background: rgba(255, 255, 255, .09); border: 1px solid var(--mt-line); animation: mt-in-soft .35s var(--ease); }
.mt-count-n { position: relative; width: 44px; height: 44px; flex: none; display: grid; place-items: center; }
.mt-count-n svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.mt-count-n circle { fill: none; stroke: var(--mt-gold); stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; animation: mt-drain var(--count, 5s) linear forwards; }
@keyframes mt-drain { to { stroke-dashoffset: 100; } }
.mt-count-n b { font-size: 17px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mt-count-copy { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mt-count-copy small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-gold); }
.mt-count-copy strong { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-count-x { height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 750; font-size: 13.5px; }

/* Find phase */
.mt-find { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: center; }
.mt-find-art { position: relative; width: 70px; height: 70px; border-radius: 16px; overflow: hidden; box-shadow: 0 0 0 2px rgba(240, 194, 125, .6), 0 10px 26px rgba(0, 0, 0, .4); }
.mt-find-art .mt-find-cover, .mt-find-art .mg-cover { display: block; width: 100%; height: 100%; border-radius: 0; }
.mt-find-art img { width: 100%; height: 100%; object-fit: cover; }
.mt-find-copy { min-width: 0; }
.mt-find-copy .mt-title { margin-top: 4px; }
.mt-look { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 0; color: rgba(245, 241, 234, .82); font-size: 14.5px; line-height: 1.45; }
.mt-look .mg-i { margin-top: 2px; color: var(--mt-gold); }
.mt-find-status { display: flex; align-items: center; gap: 9px; min-height: 22px; margin: 12px 0 12px; font-size: 13.5px; font-weight: 700; color: var(--mt-muted); }
.mt-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: rgba(255, 255, 255, .35); }
.mt-dot.is-live { background: var(--mt-gold); box-shadow: 0 0 0 0 rgba(240, 194, 125, .6); animation: mt-dot 1.8s ease-out infinite; }
.mt-dot.is-ok { background: var(--mt-ok); }
@keyframes mt-dot { 70% { box-shadow: 0 0 0 9px rgba(240, 194, 125, 0); } 100% { box-shadow: 0 0 0 0 rgba(240, 194, 125, 0); } }
.mt-here { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; border-radius: 999px; background: var(--mt-accent); color: #fff; font-weight: 800; font-size: 15.5px; box-shadow: 0 12px 30px rgba(232, 112, 74, .38); transition: transform .12s; }
.mt-here:active { transform: scale(.98); }

/* End */
.mt-end .mt-title { font-size: clamp(28px, 8vw, 36px); }
.mt-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 16px 0 6px; }
.mt-stats div { padding: 12px 10px; border-radius: 16px; background: rgba(255, 255, 255, .07); border: 1px solid var(--mt-line); text-align: center; }
.mt-stats dt { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mt-muted); line-height: 1.25; }
.mt-stats dd { margin: 4px 0 0; font: 600 24px/1.1 var(--display); font-stretch: var(--display-stretch);}
.mt-stats dd small { font: 700 13px var(--font); color: var(--mt-muted); }
.mt-end .mt-pill { margin-top: 8px; }
.mt-end-actions { display: grid; gap: 8px; margin-top: 16px; }
.mt-btn { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 18px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--mt-line); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none; }
.mt-btn.is-primary { background: #fff; color: #0d1c22; border-color: transparent; }
.mt-btn.is-kids { background: linear-gradient(135deg, #ffe39a, #f6c35a); color: #3b2a07; border-color: transparent; }
.mt-btn .mg-treasure-art { width: 28px; height: 28px; }
.mt-btn.is-ghost { background: transparent; }
.mt-medal { width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center; color: #10222a; background: radial-gradient(circle at 35% 30%, #fff6dd, var(--mt-gold) 62%, #c98f45);
  box-shadow: 0 0 0 10px rgba(240, 194, 125, .14), 0 0 0 22px rgba(240, 194, 125, .06), 0 0 90px rgba(240, 194, 125, .45); animation: mt-medal .9s cubic-bezier(.2, 1.3, .3, 1); }
.mt-medal .mg-i { width: 60px; height: 60px; stroke-width: 2.4; }
@keyframes mt-medal { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
.mt-player[data-phase="end"] .mt-controls { display: none; }
.mt-player[data-phase="end"] .mt-sheet { max-height: calc(100vh - var(--safe-top) - 190px); }

/* Controls */
.mt-controls { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 14px 6px 4px; }
.mt-ctl { position: relative; width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .1); border: 1px solid var(--mt-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: transform .12s, background .15s, opacity .2s; }
.mt-ctl:hover { background: rgba(255, 255, 255, .17); }
.mt-ctl:active { transform: scale(.93); }
.mt-ctl .mt-i, .mt-ctl .mg-i { width: 24px; height: 24px; }
.mt-ctl.is-small { width: 56px; height: 56px; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; display: flex; flex-direction: column; justify-content: center; gap: 3px; color: var(--mt-muted); }
.mt-ctl.is-small span { font-size: 10.5px; font-weight: 800; letter-spacing: .02em; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-ctl.is-small:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.mt-ctl.is-play { width: 78px; height: 78px; background: #fff; color: #0d1c22; border: 0; box-shadow: 0 12px 34px rgba(0, 0, 0, .45); }
.mt-ctl.is-play:hover { background: #fff; }
.mt-ctl.is-play .mg-i, .mt-ctl.is-play .mt-i { width: 30px; height: 30px; stroke-width: 2.2; }
.mt-ctl.is-play .mg-i path { fill: currentColor; }
.mt-play-icon { display: grid; place-items: center; }
.mt-play-icon .mg-i { transform: translateX(2px); }
.mt-ctl:disabled { opacity: .35; }
.mt-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.mt-ring circle { fill: none; stroke-width: 3; }
.mt-ring-bg { stroke: rgba(255, 255, 255, .14); }
.mt-ring-fg { stroke: var(--mt-gold); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .25s linear; }
.is-next-ring { opacity: 0; }
.is-next-ring .mt-ring-bg { stroke: transparent; }
.mt-ctl.is-next.is-counting .is-next-ring { opacity: 1; }
.mt-ctl.is-next.is-counting .is-next-ring .mt-ring-fg { stroke-dashoffset: 100; animation: mt-fill var(--count, 5s) linear forwards; }
@keyframes mt-fill { to { stroke-dashoffset: 0; } }
.mt-ctl.is-next.is-ready, .mt-ctl.is-next.is-counting { background: rgba(240, 194, 125, .22); border-color: rgba(240, 194, 125, .55); }
.mt-player[data-phase="find"] .mt-ctl.is-play { background: var(--mt-accent); color: #fff; }

/* Steps list (bottom sheet of the player) */
.mt-steps { position: absolute; inset: 0; z-index: 20; display: flex; flex-direction: column; justify-content: flex-end; }
.mt-steps-backdrop { position: absolute; inset: 0; background: rgba(3, 7, 9, .6); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: mt-fade .25s ease; }
@keyframes mt-fade { from { opacity: 0; } }
.mt-steps-panel { position: relative; width: min(100%, 680px); margin: 0 auto; max-height: 84vh; display: grid; grid-template-rows: auto minmax(0, 1fr);
  border-radius: 28px 28px 0 0; background: #0e1b20; border: 1px solid var(--mt-line); border-bottom: 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, .5); animation: mt-sheet-up .38s var(--ease); padding-bottom: var(--safe-bottom); }
@keyframes mt-sheet-up { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.mt-steps-head { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 22px 16px 12px 20px; border-bottom: 1px solid var(--mt-line); }
.mt-grabber { position: absolute; left: 50%; top: 8px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: rgba(255, 255, 255, .22); }
.mt-steps-head > div { flex: 1; min-width: 0; }
.mt-steps-head small { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--mt-gold); }
.mt-steps-head h2 { margin: 3px 0 2px; font: 600 24px/1.15 var(--display); font-stretch: var(--display-stretch);}
.mt-steps-head p { margin: 0; color: var(--mt-muted); font-size: 13px; font-weight: 650; }
.mt-steps-list { list-style: none; margin: 0; padding: 6px 0 12px; overflow-y: auto; overscroll-behavior: contain; }
.mt-step-row { width: 100%; min-height: 58px; display: grid; grid-template-columns: 28px auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 16px 8px 18px; text-align: left; color: var(--mt-ink); transition: background .15s; }
.mt-step-row:hover { background: rgba(255, 255, 255, .05); }
.mt-step-row.is-item { padding-left: 30px; }
.mt-step-row.is-room { margin-top: 6px; }
.mt-step-row.is-current { background: rgba(232, 112, 74, .16); box-shadow: inset 3px 0 0 var(--mt-accent); }
.mt-step-row .mg-code { background: rgba(255, 255, 255, .12); color: #fff; }
.mt-step-cover { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: block; }
.mt-step-cover img { width: 100%; height: 100%; object-fit: cover; }
.mt-step-copy { min-width: 0; display: grid; line-height: 1.25; }
.mt-step-copy strong { font-size: 14.5px; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-step-row.is-room .mt-step-copy strong { font-size: 15px; font-weight: 800; }
.mt-step-copy small { font-size: 12px; color: var(--mt-muted); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt-step-row em { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--mt-accent); padding: 4px 8px; border-radius: 999px; }
.mt-step-state { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--mt-faint); border: 1.5px solid rgba(255, 255, 255, .18); font-variant-numeric: tabular-nums; }
.mt-step-state.is-done { color: #0d1c22; background: var(--mt-ok); border-color: transparent; }
.mt-step-state.is-done .mg-i { width: 15px; height: 15px; stroke-width: 2.6; }
.mt-step-state.is-current { border: 0; background: var(--mt-accent); box-shadow: 0 0 0 4px rgba(232, 112, 74, .25); }

/* ---------- Start screen ---------- */
.mt-start { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.mt-start .mt-scrim { background: linear-gradient(to bottom, rgba(4, 9, 11, .6) 0, rgba(4, 9, 11, .05) 22%, rgba(4, 9, 11, .35) 46%, rgba(4, 9, 11, .94) 78%, #04090b 100%); }
.mt-start-top { width: 100%; }
.mt-start-body { align-self: end; width: min(100%, 620px); max-height: 100%; margin: 0 auto; overflow-y: auto; scrollbar-width: none; padding: 40px 20px calc(22px + var(--safe-bottom)); }
.mt-start-body::-webkit-scrollbar { display: none; }
.mt-start-hero { animation: mt-in-soft .7s var(--ease); }
.mt-start h1 { margin: 10px 0 10px; font: 600 clamp(36px, 10.5vw, 54px)/1.02 var(--display); letter-spacing: -.022em; text-wrap: balance; font-stretch: var(--display-stretch);}
.mt-start-desc { margin: 0; max-width: 46ch; color: rgba(245, 241, 234, .84); font-size: 15.5px; line-height: 1.5; }
.mt-meta { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.mt-meta li { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px 0 11px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--mt-line); font-size: 13px; font-weight: 750; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mt-meta .mt-i, .mt-meta .mg-i { width: 16px; height: 16px; color: var(--mt-gold); }
.mt-tours { margin: 18px 0 0; padding: 0; border: 0; display: grid; gap: 8px; }
.mt-tours legend { padding: 0; margin-bottom: 8px; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--mt-gold); }
.mt-tour { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); border: 1px solid var(--mt-line); text-decoration: none; color: inherit; }
.mt-tour.is-on { background: rgba(255, 255, 255, .13); border-color: rgba(240, 194, 125, .6); }
.mt-tour-dot { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4); }
.mt-tour.is-on .mt-tour-dot { border: 6px solid var(--mt-gold); }
.mt-tour-copy { display: grid; line-height: 1.3; min-width: 0; }
.mt-tour-copy strong { font-size: 15px; }
.mt-tour-copy strong em { font-style: normal; font-size: 11px; padding: 2px 7px; border-radius: 999px; background: rgba(240, 194, 125, .2); color: var(--mt-gold); vertical-align: middle; }
.mt-tour-copy small { color: var(--mt-muted); font-weight: 650; font-size: 12.5px; }
.mt-start-explain { margin-top: 16px; }
.mt-start .mg-explain-chip { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--mt-line); color: var(--mt-muted); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.mt-start .mg-explain-chip > .mg-i { color: var(--mt-gold); }
.mt-start .mg-explain-chip-copy b { color: #fff; }
.mt-start .mg-explain-chip-cta, .mt-start .mg-explain-chip:hover .mg-explain-chip-cta { background: rgba(240, 194, 125, .2); color: var(--mt-gold); }
.mt-start .mg-explain-chip:hover { background: rgba(255, 255, 255, .16); }
.mt-resume { margin-top: 16px; padding: 14px 16px; border-radius: 18px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(240, 194, 125, .35); }
.mt-resume p { margin: 10px 0 0; display: grid; line-height: 1.3; }
.mt-resume small { font-size: 12px; font-weight: 750; color: var(--mt-gold); }
.mt-resume strong { font-size: 15.5px; }
.mt-resume-bar { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.mt-resume-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #fff, var(--mt-gold)); }
.mt-start-actions { display: grid; gap: 6px; margin-top: 18px; }
.mt-go { width: 100%; min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 0 22px 0 10px; border-radius: 999px; background: #fff; color: #0d1c22; font-size: 17.5px; font-weight: 800; letter-spacing: -.01em; text-decoration: none; box-shadow: 0 18px 44px rgba(0, 0, 0, .5), 0 0 0 6px rgba(255, 255, 255, .08); transition: transform .12s; }
.mt-go:active { transform: scale(.98); }
.mt-go-icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--mt-accent); color: #fff; }
.mt-go-icon .mg-i { width: 22px; height: 22px; transform: translateX(1px); }
.mt-go-icon .mg-i path { fill: currentColor; }
.mt-link { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--mt-muted); font-weight: 750; font-size: 14.5px; text-decoration: none; border-radius: 999px; }
.mt-link:hover { color: #fff; }
.mt-fine { display: flex; gap: 8px; align-items: flex-start; margin: 14px 2px 0; color: var(--mt-faint); font-size: 12.5px; line-height: 1.45; }
.mt-fine .mg-i { width: 15px; height: 15px; margin-top: 1px; }
.mt-start-error .mt-start-body { align-self: center; }

.mt-start :focus-visible, .mt-player :focus-visible { outline: 3px solid rgba(240, 194, 125, .85); outline-offset: 3px; }
.mt-player:focus { outline: none; }

/* ---------- Museum home: the tour is the main action (web/museum-guide.js) ---------- */
.mg-cta.is-tour { grid-column: 1 / -1; position: relative; overflow: hidden; isolation: isolate; min-height: 92px; color: #fff;
  background: radial-gradient(120% 160% at 100% 0%, rgba(240, 194, 125, .38), transparent 55%), linear-gradient(135deg, #2458a6 0%, #0d232b 100%); }
.mg-cta.is-tour::after { content: ""; position: absolute; right: -30px; bottom: -50px; width: 160px; height: 160px; border-radius: 50%; border: 1px solid rgba(240, 194, 125, .25); box-shadow: 0 0 0 22px rgba(240, 194, 125, .05), 0 0 0 46px rgba(240, 194, 125, .03); z-index: -1; }
.mg-cta.is-tour .mg-cta-icon { width: 58px; height: 58px; border-radius: 50%; background: #fff; color: #0d232b; box-shadow: 0 0 0 6px rgba(255, 255, 255, .12), 0 8px 20px rgba(0, 0, 0, .25); }
.mg-cta.is-tour .mg-cta-icon .mg-i { width: 26px; height: 26px; transform: translateX(2px); }
.mg-cta.is-tour .mg-cta-icon path { fill: currentColor; }
.mg-cta.is-tour strong { font-size: 18.5px; }
.mg-cta.is-tour small { opacity: .82; }
.mg-cta-kicker { display: block; margin-bottom: 2px; font-style: normal; font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mg-cta.is-tour.is-resume .mg-cta-icon { background: var(--gold); }

/* ---------- Larger screens: a centred column over the full-bleed stage ---------- */
@media (min-width: 900px) {
  .mt-sheet { max-height: min(54vh, 580px); }
  .mt-card { padding: 22px 24px 20px; }
  .mt-title { font-size: 34px; }
  .mt-subs { font-size: 19.5px; }
  .mt-subs.is-reading { font-size: 18px; }
  .mt-art img { max-width: min(100%, 680px); border-radius: 22px; }
  .mt-plan { width: min(100%, 620px); }
  .mt-plan .mg-plan-svg { max-height: 36vh; }
  .mt-start-body { padding-bottom: 48px; }
  .mt-kb { filter: brightness(.5) saturate(1.05); }
}
@media (max-height: 640px) {
  .mt-sheet { max-height: calc(100vh - var(--safe-top) - 190px); }
  .mt-ctl { width: 50px; height: 50px; }
  .mt-ctl.is-play { width: 64px; height: 64px; }
  .mt-controls { padding-top: 10px; }
  .mt-subs { font-size: 16.5px; }
}

/* ---------- Reduced motion: no Ken Burns, no slides, no pulses ---------- */
@media (prefers-reduced-motion: reduce) {
  .mt-kb.is-on, .mt-art img, .mt-card, .mt-chip, .mt-steps-panel, .mt-steps-backdrop, .mt-emblem, .mt-medal, .mt-plan, .mt-start-hero,
  .mt-scan, .mt-dot.is-live, .mt-art.is-finding::after, .mt-plan .mg-room.is-highlight .mg-room-rect, .mt-count, .mt-avanti.is-ready { animation: none !important; }
  .mt-finder i, .mt-lock-label, .mt-seg i, .mt-cam, .mt-ring-fg, .mt-s { transition: none !important; }
  .mt-finder.is-locked .mt-lock-ring { animation: none; }
  .mt-count-n circle, .mt-ctl.is-next.is-counting .is-next-ring .mt-ring-fg { animation-duration: var(--count, 5s); }
}