:root {
  --bg: #F4EEE8;
  --card: #FBF7F1;
  --gold: #C69A63;
  --gold-dk: #A87F47;
  --ink: #3E382F;
  --muted: #8A8177;
  --line: #E3D9CC;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; touch-action: manipulation; -webkit-touch-callout: none; }

html, body {
  height: 100%;
  background: #2b2823;
  font-family: "Segoe UI", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  overflow: hidden;
  user-select: none;
  overscroll-behavior: none;
}

#stage {
  position: absolute;
  left: 50%; top: 50%;
  width: 1080px; height: 1920px;
  transform-origin: center center;
  background: var(--bg);
  overflow: hidden;
}

html.presentation-capture, html.presentation-capture body { width:1080px; min-height:1920px; height:1920px; overflow:visible; }
html.presentation-capture #stage { position:relative; left:0; top:calc(-1px * var(--capture-y, 0)); transform:none !important; }

#screen {
  position: absolute; inset: 0;
  animation: fadeIn .35s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* photo-led welcome screen, following the supplied premium mall reference */
.splash-photo { filter:saturate(.68) contrast(.9) brightness(.88); }
.splash-glow { position:absolute; inset:0; background:linear-gradient(180deg,rgba(181,151,116,.26),rgba(223,204,181,.19) 48%,rgba(165,135,102,.3)),linear-gradient(90deg,rgba(242,224,203,.48),rgba(193,161,124,.13) 72%); }
.splash-logo { position:absolute; left:92px; top:330px; width:310px; }
.splash-title { position:absolute; left:92px; right:88px; top:630px; text-align:left; font-size:82px; font-weight:650; line-height:1.1; letter-spacing:-1.5px; text-wrap:balance; text-shadow:0 2px 12px rgba(255,255,255,.72); }
.pill.splash-start { left:50%; top:930px; width:610px; height:148px; transform:translateX(-50%); font-size:56px; font-weight:650; background:var(--gold); color:#fff; box-shadow:0 18px 44px rgba(93,68,42,.3); border:2px solid rgba(255,255,255,.72); gap:34px; }
.splash-start span { font-size:66px; line-height:1; color:#fff; }
.pill.splash-start:active { transform:translateX(-50%); }

/* language bar */
.langbar {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 24px; z-index: 50;
}
.langbar button {
  width: 110px; height: 72px; border: none; background: transparent;
  font-size: 34px; color: var(--muted); border-radius: 50%;
  cursor: pointer; font-family: inherit;
}
.langbar button.active {
  background: var(--gold); color: #fff; font-weight: 600;
}

/* generic */
.back {
  position: absolute; left: 72px; top: 56px; width: 80px; height: 80px;
  border: none; background: transparent url(assets/ic_back.png) center/48px no-repeat;
  cursor: pointer; z-index: 40;
}
.ornament { position: absolute; left: 500px; bottom: 40px; width: 80px; height: 80px; z-index: 5; }
.logo-bottom { position: absolute; left: 390px; bottom: 130px; width: 300px; z-index: 5; }

.title { position: absolute; left: 72px; font-size: 64px; font-weight: 600; }

.card {
  position: absolute; left: 72px; width: 936px;
  background: var(--card); border-radius: 28px;
  box-shadow: 0 10px 30px rgba(60,45,25,.08);
  display: flex; align-items: center;
  cursor: pointer; border: none; text-align: left;
  font-family: inherit; color: var(--ink);
  transition: transform .12s ease;
}
.card:active { transform: scale(.985); }
.place-disabled { opacity: .62; filter: saturate(.45); cursor: not-allowed; }
.place-disabled .chev { display: none; }
.card img.ic { flex: 0 0 auto; }
.card .lbl { flex: 1 1 auto; }
.card .chev { flex: 0 0 auto; opacity: .85; }
.menu-card { left:60px; width:960px; background:rgba(255,253,249,.94); border:2px solid rgba(255,255,255,.95); border-radius:32px; box-shadow:0 16px 42px rgba(84,61,35,.11); }
.menu-card .lbl { font-size:48px !important; font-weight:500; }

.pill {
  position: absolute; border: none; border-radius: 999px;
  background: var(--gold); color: #fff; font-weight: 600;
  font-family: inherit; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform .12s ease;
}
.pill:active { transform: scale(.97); }
.pill.ghost { background: var(--card); color: var(--ink); border: 2px solid var(--line); }

.chip {
  position: absolute; width: 150px; height: 90px; border-radius: 45px;
  border: 2px solid var(--line); background: var(--card); color: var(--ink);
  font-size: 44px; font-family: inherit; cursor: pointer; z-index: 20;
}
.chip.active { background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 600; }
.map-floor-rail { position:absolute; left:42px; top:465px; z-index:40; display:flex; flex-direction:column; gap:12px; }
.map-floor-rail .chip { position:relative; left:auto !important; top:auto !important; width:96px; height:76px; border-radius:24px; font-size:34px; }

/* Visitor map v24: one palette, compact navigation and a larger plan. */
.map-title { top:178px !important; left:42px !important; font-size:76px !important; }
.map-floor-rail { left:42px; top:285px; flex-direction:row; gap:0; padding:5px; background:#fffaf5; border:1px solid var(--line); border-radius:25px; }
.map-floor-rail .chip { width:135px; height:76px; border:0; border-radius:20px; background:transparent; }
.map-floor-rail .chip.active { background:var(--gold); }
.map-mode-toggle { position:absolute; right:42px; top:285px; height:86px; min-width:132px; padding:0 25px; border:1px solid var(--line); border-radius:25px; background:#fffaf5; font:600 30px inherit; font-family:inherit; font-size:30px; cursor:pointer; }
.redesigned-map { border-radius:24px; background:#f7f5f0; }
.visitor-map { position:absolute; inset:0; background:#f7f5f0; }
.visitor-plan { position:absolute; inset:10px 8px 112px; width:calc(100% - 16px); height:calc(100% - 122px); touch-action:none; }
.visitor-room { transition:opacity .2s,fill .2s; stroke-linejoin:round; }
.visitor-room[role=button] { cursor:pointer; }
.visitor-room[role=button]:focus { outline:none; stroke:#ee4b2b; stroke-width:3; }
.visitor-room.selected { fill:#edce90; }
.visitor-room-text { font-family:inherit; font-size:10px; font-weight:600; fill:#263332; }
.visitor-room-text.major { font-size:12px; font-weight:650; }
.visitor-route-casing { fill:none; stroke:white; stroke-width:7; stroke-linejoin:round; stroke-linecap:round; }
.visitor-route { fill:none; stroke:#ee4b2b; stroke-width:3.5; stroke-linejoin:round; stroke-linecap:round; }
.visitor-marker-text { font:700 17px sans-serif; fill:#222c29; stroke:#fff; stroke-width:4; paint-order:stroke; stroke-linejoin:round; }
.visitor-destination .visitor-marker-text { fill:#bf371d; font-size:12px; }
.here-halo { fill:#ee4b2b; opacity:.18; transform-box:fill-box; transform-origin:center; animation:herePulse 2.4s ease-out infinite; }
@keyframes herePulse { 0%,100% { transform:scale(.85); opacity:.24; } 70% { transform:scale(1.35); opacity:.04; } }
@media(prefers-reduced-motion:reduce){ .here-halo { animation:none; } }
.visitor-facility circle { fill:#fffdf9; stroke:#565d55; stroke-width:1.5; }
.visitor-facility text { font:700 9px sans-serif; fill:#313a34; pointer-events:none; }
.visitor-facility[role=button] { cursor:pointer; }
.visitor-legend { position:absolute; bottom:12px; left:12px; right:12px; display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.visitor-legend button { display:flex; align-items:center; gap:9px; padding:12px 13px; border:1px solid #dfd6c9; border-radius:19px; background:#fffdf9; color:#2d342f; font-family:inherit; font-size:21px; cursor:pointer; min-height:66px; }
.visitor-legend button b { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; color:#374437; font-size:25px; }
.visitor-legend button b svg { width:27px; height:27px; }
.visitor-legend button[aria-pressed=true] { border-color:#657d60; box-shadow:inset 0 0 0 2px #657d60; }
.visitor-legend .visitor-directions { font-size:18px; color:#6e6254; }
.visitor-controls { position:absolute; left:18px; bottom:134px; display:flex; flex-direction:column; background:#fffdf9; border:1px solid #dfd6c9; border-radius:23px; box-shadow:0 6px 18px #3e382f14; overflow:hidden; }
.visitor-controls button { width:90px; min-height:76px; border:0; border-bottom:1px solid #ebe6dd; background:transparent; color:#303831; font:38px sans-serif; cursor:pointer; }
.visitor-controls button:last-child { min-height:94px; border-bottom:0; }
.visitor-controls small { display:block; font:17px sans-serif; }
.map-place-card { position:absolute; left:42px; right:42px; top:1580px; min-height:178px; padding:26px 30px; border:1px solid #ddcebb; border-radius:28px; background:#fffdf8; box-shadow:0 10px 24px #3e382f12; }
.map-place-copy { max-width:550px; }
.map-place-copy strong { display:block; margin-top:12px; font-size:35px; line-height:1.15; }
.map-place-copy small { display:block; max-height:40px; overflow:hidden; font-size:22px; color:#7e6f5e; }
.map-card-close { position:absolute; right:15px; top:12px; width:52px; height:52px; border:1px solid var(--line); border-radius:16px; background:#faf6ee; font-size:32px; cursor:pointer; }
.map-card-route,.map-route-status { position:absolute; right:30px; bottom:24px; width:330px; min-height:82px; border:0; border-radius:22px; background:var(--gold); color:white; font-family:inherit; font-size:27px; font-weight:600; cursor:pointer; display:grid; place-items:center; }
.map-route-metrics { position:absolute; right:75px; top:28px; font-size:24px; color:#7e6f5e; }
.map-route-status { min-height:65px; font-size:24px; }
.map-place-card:has(.map-route-status) { top:1480px; }
.map-tap-hint { position:absolute; top:1600px; left:80px; right:80px; text-align:center; color:#6d6457; font-size:30px; }
.share-button.map-share,.share-result.map-share { top:1682px; left:42px; width:730px; height:122px; font-size:27px; border-radius:24px; }
.share-result.map-share img { width:98px; height:98px; }
.share-result.map-share span { font-size:25px; }
.map-done { left:800px; top:1682px; width:238px; height:122px; font-size:29px; }
.map-transition-note { position:absolute; top:390px; left:70px; z-index:90; padding:10px 18px; border-radius:18px; background:#fffaf2; color:#634d2f; font-size:25px; }

.muted { color: var(--muted); }
.gold { color: var(--gold-dk); }

.mapwrap {
  position: absolute; left: 72px; width: 936px;
  border-radius: 32px; overflow: hidden; border: 2px solid var(--line);
  background: #f6f1e9;
}
.mapwrap img { width: 100%; display: block; }
.mapov { position: absolute; inset: 0; }
.map3d-wrap { background: linear-gradient(180deg, #fbf7f1 0%, #eee4d7 100%); border: 0; overflow: hidden; }
.map-viewport { position: absolute; inset: 0; overflow: hidden; touch-action: none; cursor: grab; perspective: 1500px; }
.map-viewport:active { cursor: grabbing; }
.map-plane, .map-plane-shadow {
  --map-x: 0px; --map-y: 0px; --map-scale: .92;
  position: absolute; left: 50%; top: 50%; width: 90%;
  transform-origin: center center;
  transition: filter .25s ease;
}
.map-plane-shadow { height: 58%; background: rgba(91,67,42,.18); border-radius: 24px; filter: blur(28px); }
.map-plane { background: #f7f2eb; border: 3px solid rgba(119,86,50,.5); border-radius: 22px; transform-style:preserve-3d; }
.mode-3d .map-plane { transform: translate(calc(-50% + var(--map-x)), calc(-48% + var(--map-y))) rotateX(52deg) rotateZ(-2deg) scale(var(--map-scale)); box-shadow: 0 38px 42px rgba(74,55,36,.24); }
.mode-3d .map-plane-shadow { transform: translate(calc(-48% + var(--map-x)), calc(-39% + var(--map-y))) rotateX(52deg) rotateZ(-2deg) scale(var(--map-scale)); }
.mode-2d .map-plane { transform: translate(calc(-50% + var(--map-x)), calc(-50% + var(--map-y))) scale(var(--map-scale)); box-shadow: 0 18px 42px rgba(74,55,36,.15); }
.mode-2d .map-plane-shadow { transform: translate(calc(-48% + var(--map-x)), calc(-46% + var(--map-y))) scale(var(--map-scale)); }
.map-base, .map-route-overlay { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; border-radius:18px; }
.map-route-overlay { position: absolute; inset: 0; z-index:35; animation: routeReveal .9s ease both; filter: brightness(.46) saturate(4) contrast(2) drop-shadow(0 0 9px rgba(75,42,8,.95)); }
.map-vector-route { position:absolute; inset:0; z-index:35; width:100%; height:100%; overflow:visible; pointer-events:none; filter:drop-shadow(0 2px 4px rgba(75,42,8,.3)); }
.map-vector-route polyline { fill:none; stroke:#8f321f; stroke-width:11; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.map-vector-route circle { fill:#a93b24; stroke:#fff; stroke-width:7; vector-effect:non-scaling-stroke; }
.map-zoom-controls { position:absolute; right:22px; bottom:22px; z-index:80; display:flex; flex-direction:column; gap:8px; }
.map-zoom-controls button { width:64px; height:64px; border:2px solid rgba(154,113,67,.35); border-radius:18px; background:rgba(255,252,247,.94); color:var(--ink); font-family:inherit; font-size:42px; line-height:1; box-shadow:0 5px 18px rgba(65,47,28,.14); }
.real-3d .map-zoom-controls { bottom:92px; }
.mode-3d .map-route-overlay { transform:translateZ(48px); }
@keyframes routeReveal { from { opacity: 0; transform:translateZ(48px) scale(.98); } to { opacity: 1; transform:translateZ(48px) scale(1); } }
.mode-2d .map-route-overlay { animation-name:routeReveal2d; }
@keyframes routeReveal2d { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } }
.real-3d canvas { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; }
.map3d-static-capture { position:absolute; inset:0; width:100%; height:100%; display:block; object-fit:fill; }
.map3d-you-are-here, .map3d-destination-label, .map3d-category-label, .map3d-transition-label { position:absolute; z-index:65; pointer-events:none; transform:translate(-50%,-115%); padding:12px 16px; border-radius:13px; color:#fff; font-size:23px; font-weight:750; line-height:1; white-space:nowrap; border:2px solid rgba(255,255,255,.88); box-shadow:0 7px 20px rgba(39,28,18,.38); }
.map3d-you-are-here { background:#3e382f; }
.map3d-destination-label { background:#8f321f; }
.map3d-category-label { z-index:45; background:color-mix(in srgb, var(--label-color) 78%, #4a3828); border:2px solid rgba(255,255,255,.78); font-size:19px; }
.map3d-transition-label { background:#b9823d; border:2px solid rgba(255,255,255,.85); }
.map3d-facility { position:absolute; z-index:72; transform:translate(-50%,-105%); display:flex; align-items:center; gap:8px; padding:8px 11px 8px 8px; border:2px solid #fff; border-radius:999px; background:#39342d; color:#fff; font-size:17px; font-weight:750; line-height:1; white-space:nowrap; pointer-events:none; box-shadow:0 5px 14px rgba(35,28,21,.38); }
.map3d-facility b { display:grid; place-items:center; min-width:25px; height:25px; padding:0 4px; border-radius:50%; background:#fff; color:#8f6032; font-size:14px; }
.map3d-facility.facility-escalator { z-index:76; padding:10px 14px 10px 9px; background:#8f6032; font-size:19px; box-shadow:0 7px 18px rgba(68,39,18,.42); }
.map-overview .map3d-facility { padding:5px; }
.map-overview .map3d-facility span { display:none; }
.map-overview .map3d-facility b { min-width:24px; width:24px; height:24px; padding:0; }
.map-overview .map3d-facility.facility-escalator { padding:6px; }
.map3d-room-number { position:absolute; pointer-events:none; transform:translate(-50%,-50%); color:white; z-index:78; min-width:28px; padding:5px; border-radius:50%; background:#4a4945; border:2px solid rgba(255,255,255,.95); text-align:center; font-size:15px; font-weight:800; box-shadow:0 4px 10px rgba(40,35,30,.28); }
.map3d-place-label { position:absolute; z-index:58; transform:translate(-50%,-50%); max-width:145px; padding:7px 10px; border:2px solid #fff; border-radius:9px; background:#393631; color:#fff; font-size:16px; font-weight:750; line-height:1.12; text-align:center; white-space:normal; cursor:pointer; box-shadow:0 4px 12px rgba(35,28,21,.34); }
.floor-animation-out .map-viewport { animation: floorOut .26s ease both; }
.floor-animation-in .map-viewport { animation: floorIn .52s cubic-bezier(.22,.75,.3,1) both; }
@keyframes floorOut { from { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } to { opacity:0; transform:translateY(-28px) scale(.96); filter:blur(3px); } }
@keyframes floorIn { from { opacity:0; transform:translateY(34px) scale(.96); filter:blur(3px); } to { opacity:1; transform:translateY(0) scale(1); filter:blur(0); } }
.map3d-category-legend { position:absolute; left:22px; right:22px; bottom:18px; z-index:70; display:flex; flex-wrap:wrap; gap:9px 18px; padding:13px 17px; border:1px solid rgba(151,113,70,.24); border-radius:18px; background:rgba(255,252,247,.9); box-shadow:0 7px 20px rgba(55,40,25,.1); pointer-events:none; }
.map3d-category-legend span { display:flex; align-items:center; gap:8px; color:var(--ink); font-size:18px; font-weight:600; }
.map3d-category-legend i { width:17px; height:17px; border-radius:5px; background:var(--category-color); box-shadow:inset 0 0 0 1px rgba(60,42,26,.15); }
.map3d-category-legend i.category-workshop { background:linear-gradient(135deg,#e2a5aa 0 18%,#aaa8cf 18% 36%,#9dc68f 36% 54%,#d9cf79 54% 72%,#cba2cc 72% 86%,#78b9aa 86%); }
.map3d-pan-hint { position:absolute; left:50%; top:14px; z-index:72; transform:translateX(-50%); padding:8px 14px; border-radius:999px; color:#5d5145; background:rgba(255,252,247,.88); box-shadow:0 4px 15px rgba(55,40,25,.08); font-size:16px; font-weight:650; white-space:nowrap; pointer-events:none; animation:panHintFade 5s ease forwards; }
@keyframes panHintFade { 0%,65%{opacity:1} 100%{opacity:0} }
.map-unavailable { position:absolute; inset:0; display:grid; place-items:center; padding:40px; color:var(--muted); font-size:30px; text-align:center; }
.kiosk-marker { position:absolute; z-index:50; width:1px; height:1px; transform-style:preserve-3d; pointer-events:none; }
.mode-3d .kiosk-marker { transform:translateZ(65px); }
.kiosk-dot { position:absolute; left:-13px; top:-13px; width:26px; height:26px; border-radius:50%; background:#e6532f; border:5px solid #fff; box-shadow:0 4px 12px rgba(79,34,21,.65); }
.kiosk-pulse { position:absolute; left:-28px; top:-28px; width:56px; height:56px; border-radius:50%; background:rgba(230,83,47,.22); border:3px solid rgba(230,83,47,.55); animation:kioskPulse 1.8s infinite; }
.kiosk-marker strong { position:absolute; left:22px; top:-32px; min-width:150px; padding:11px 16px; border-radius:14px; background:#3e382f; color:#fff; font-size:24px; line-height:1; white-space:nowrap; box-shadow:0 6px 16px rgba(50,35,20,.3); }
@keyframes kioskPulse { 0% { transform:scale(.65); opacity:1; } 100% { transform:scale(1.45); opacity:0; } }
.public-map-badge { position:absolute; right:72px; z-index:30; min-height:70px; padding:0 25px; display:flex; align-items:center; border:2px solid var(--line); border-radius:22px; background:rgba(255,252,247,.9); color:var(--gold-dk); font-size:25px; font-weight:600; }
.map-context { position:absolute; left:72px; top:414px; z-index:30; display:flex; gap:32px; align-items:center; font-size:26px; font-weight:600; color:var(--ink); }
.map-context span { display:flex; align-items:center; gap:11px; white-space:nowrap; }
.legend-dot { width:20px; height:20px; border-radius:50%; display:inline-block; border:4px solid #fff; box-shadow:0 0 0 2px #e6532f; }
.here-dot { background:#e6532f; }
.legend-line { width:34px; height:8px; border-radius:5px; display:inline-block; background:#7f311e; box-shadow:0 0 0 2px rgba(127,49,30,.2); }
.route-summary { position: absolute; top: 1435px; width: 100%; text-align: center; font-size: 38px; color: var(--gold-dk); font-weight: 600; }
.floor-transition-banner { position:absolute; left:106px; top:492px; z-index:76; display:flex; align-items:center; gap:16px; max-width:610px; padding:15px 22px; border-radius:20px; background:rgba(62,56,47,.92); color:#fff; box-shadow:0 10px 26px rgba(46,33,19,.2); pointer-events:none; }
.floor-transition-banner .transition-icon { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--gold); font-size:32px; font-weight:800; }
.floor-transition-banner strong, .floor-transition-banner small { display:block; }
.floor-transition-banner strong { font-size:25px; line-height:1.15; }
.floor-transition-banner small { margin-top:5px; color:#f2dfc7; font-size:19px; }
.route-live-card { position:absolute; left:72px; top:1275px; width:936px; height:135px; display:flex; align-items:center; gap:26px; padding:22px 34px; border:2px solid var(--line); border-radius:26px; background:#fffaf3; box-shadow:0 10px 25px rgba(62,45,27,.12); }
.route-live-card strong, .route-live-card small { display:block; }
.route-live-card strong { font-size:30px; }
.route-live-card small { margin-top:8px; color:#665b50; font-size:23px; }
.route-guidance-icon { display:grid; place-items:center; flex:0 0 68px; height:68px; border-radius:50%; background:#8f321f; color:#fff; font-size:42px; font-weight:800; }
.share-button, .share-result { position: absolute; left: 180px; top: 1500px; width: 720px; height: 210px; border: 2px solid var(--line); border-radius: 28px; background: var(--card); color: var(--ink); font: 36px inherit; }
.share-button { cursor:pointer; display:flex; align-items:center; justify-content:center; gap:18px; padding:24px 38px; font-family:inherit; font-size:36px; font-weight:600; line-height:1.2; }
.share-result { display: flex; align-items: center; gap: 30px; padding: 20px 34px; }
.share-result img { width: 160px; height: 160px; object-fit: contain; }
.share-result span { flex: 1; font-size: 34px; }
.favorite-toggle { position: absolute; right: 72px; top: 620px; width: 92px; height: 92px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: var(--muted); font-size: 50px; }
.favorite-toggle.active { background: var(--gold); color: #fff; border-color: var(--gold); }
.route-hint { position: absolute; left: 120px; right: 120px; top: 1380px; color: var(--muted); text-align: center; font-size: 32px; line-height: 1.3; }
.feedback-choice { width: 320px; height: 320px; border-radius: 50%; font-size: 100px; flex-direction: column; gap: 10px; }
.feedback-choice span { font-size: 36px; }
.empty-state { margin-top: 100px; text-align: center; color: var(--muted); font-size: 38px; }
.offline-card { position: absolute; left: 110px; right: 110px; top: 570px; text-align: center; }
.offline-card h1 { font-size: 58px; margin: 35px 0 20px; }
.offline-card p { font-size: 34px; color: var(--muted); line-height: 1.45; }
.offline-card .pill { position: relative; margin: 80px auto 0; width: 420px; height: 110px; font-size: 42px; }
.offline-icon { margin: auto; width: 120px; height: 120px; border: 4px solid var(--gold); border-radius: 50%; color: var(--gold-dk); font-size: 80px; line-height: 110px; }
.demo-badge { position: absolute; right: 28px; bottom: 24px; z-index: 90; padding: 10px 18px; border-radius: 14px; background: rgba(62,56,47,.72); color: #fff; font: 600 20px inherit; letter-spacing: .12em; pointer-events: none; }

.here {
  position: absolute; width: 110px; height: 110px;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.12); opacity: .85; }
}

.toast {
  position: absolute; left: 50%; bottom: 220px; transform: translateX(-50%);
  background: var(--ink); color: #fff; padding: 28px 48px; border-radius: 20px;
  font-size: 36px; opacity: 0; transition: opacity .3s; pointer-events: none; z-index: 99;
}
.toast.show { opacity: .95; }

.kkey {
  position: absolute; height: 76px;
  border: none; border-radius: 18px;
  background: var(--card); color: var(--ink);
  font-size: 36px; font-family: inherit; text-transform: none;
  box-shadow: 0 4px 14px rgba(60,45,25,.08);
  cursor: pointer; z-index: 30;
}
.kkey:active { background: var(--gold); color: #fff; }
.kkey.wide { font-size: 30px; color: var(--muted); }

.caret { animation: blink 1.1s step-start infinite; color: var(--gold-dk); }
@keyframes blink { 50% { opacity: 0; } }

.listwrap {
  position: absolute; left: 72px; top: 330px; width: 936px; bottom: 60px;
  overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.listwrap::-webkit-scrollbar { display: none; }
.listwrap .card {
  position: relative; left: 0; top: 0 !important;
  width: 100%; margin-bottom: 20px; flex-shrink: 0;
}
.eventrows { position: absolute; left: 72px; top: 340px; width: 936px; bottom: 60px; overflow-y: auto; scrollbar-width: none; }
.eventrows::-webkit-scrollbar { display: none; }
.event-hit { position: absolute; left: 0; width: 100%; height: 150px; border: 0; background: transparent; color: var(--ink); text-align: left; font: inherit; display: flex; align-items: flex-start; padding-top: 8px; }
.event-hit:not(:disabled) { cursor: pointer; }
.event-time { width: 145px; color: var(--ink); font-size: 34px; font-weight: 600; padding-top:8px; }
.event-track { position:relative; width:56px; height:150px; flex:0 0 56px; }
.event-track::before { content:""; position:absolute; left:25px; top:0; bottom:0; width:2px; background:linear-gradient(var(--gold),rgba(198,154,99,.2)); }
.event-track i { position:absolute; left:17px; top:18px; width:18px; height:18px; border-radius:50%; background:var(--gold); border:5px solid #f8f1e9; box-shadow:0 0 0 2px rgba(198,154,99,.35); }
.event-copy { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.event-copy::after { content:""; position:absolute; left:201px; right:20px; bottom:15px; height:1px; background:var(--line); }
.event-copy strong { font-size: 38px; line-height: 1.08; }
.event-copy small { color: var(--muted); font-size: 28px; }
.event-arrow { color: var(--gold-dk); font-size: 58px; line-height: 56px; }

.category-panel { position:absolute; left:72px; right:72px; top:390px; padding:0 34px; background:rgba(255,253,249,.94); border:2px solid rgba(255,255,255,.92); border-radius:30px; box-shadow:0 16px 44px rgba(84,61,35,.09); overflow:hidden; }
.category-row { position:relative; width:100%; height:142px; display:flex; align-items:center; border:0; border-bottom:2px solid var(--line); background:transparent; color:var(--ink); font:inherit; text-align:left; cursor:pointer; }
.category-row:last-child { border-bottom:0; }
.category-row .ic { width:64px; height:64px; object-fit:contain; margin:0 32px 0 8px; }
.category-row .lbl { flex:1; font-size:38px; }
.category-row .chev { width:46px; height:46px; opacity:.78; }

.workshop-legend-trigger { pointer-events:auto; display:flex; align-items:center; gap:8px; border:0; background:transparent; color:var(--ink); font:600 18px inherit; padding:9px; cursor:pointer; }
.workshop-legend-dialog { width:min(760px,92vw); max-height:85vh; overflow:auto; padding:26px; border:1px solid #cdbca5; border-radius:24px; background:#fffaf5; color:#332e28; }
.workshop-legend-dialog::backdrop { background:#332e2870; }
.workshop-legend-dialog h2 { margin:0 0 20px; font-size:30px; }
.workshop-legend-list { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.workshop-legend-list div { display:flex; gap:12px; align-items:center; font-size:22px; }
.workshop-legend-list i,.workshop-filters i { width:22px; height:22px; flex:none; border-radius:5px; border:1px solid #59492c44; }
.workshop-legend-dialog>button { margin-top:24px; width:100%; padding:15px; border:0; border-radius:14px; background:#b78950; color:white; font-size:24px; cursor:pointer; }
.workshop-filters { position:absolute; left:72px; right:72px; top:330px; height:135px; display:flex; align-items:center; overflow-x:auto; gap:12px; }
.workshop-filters button { display:flex; align-items:center; gap:12px; flex:none; max-width:360px; padding:18px 22px; border:1px solid #cdbca5; border-radius:20px; background:#fffaf5; color:#332e28; font-size:25px; }
.workshop-filters button.active { background:#e9dcc9; border-color:#9b6c37; }
.workshop-legend-dialog[open] { display:flex; flex-direction:column; gap:18px; overflow:hidden; }
.workshop-legend-dialog h2 { flex:none; margin-bottom:0; }
.workshop-legend-dialog .workshop-legend-list { min-height:0; overflow-y:auto; padding-right:8px; }
.workshop-legend-dialog>button { flex:none; margin-top:0; }

/* The optional 3D view follows the same quiet visitor styling. */
.map3d-you-are-here { padding:4px 8px; background:#fffdf8; color:#25352b; border:1px solid #e1d9cb; box-shadow:0 2px 7px #5a453322; font-size:20px; transform:translate(12px,-50%); }
.map3d-category-legend i.category-workshop { background:var(--category-color); }
.map-zoom-controls { overflow:hidden; gap:0; border:1px solid var(--line); border-radius:22px; background:#fffdf8; }
.map-zoom-controls button { border:0; border-radius:0; border-bottom:1px solid #e8dfd1; box-shadow:none; }
.map-zoom-controls small { display:block; font-size:16px; }

/* Screen labels keep their readable size while the 3D floor moves beneath them. */
.map3d-room-label { position:absolute; z-index:57; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:0; border:0; border-radius:12px; background:transparent; color:#302e27; font:750 30px/1.12 "Segoe UI",Arial,sans-serif; text-align:center; pointer-events:none; }
button.map3d-room-label { pointer-events:auto; cursor:pointer; }
.map3d-room-label .room-type-icon { display:grid; place-items:center; width:42px; height:42px; flex:none; border-radius:50%; background:#fffaf0ec; border:1px solid #847a6855; box-shadow:0 2px 6px #55472c22; }
.map3d-room-label svg { width:30px; height:30px; }
.map3d-room-label span { display:none; }
.map3d-room-label.room-details { padding:7px; background:#fffaf2f0; border:1px solid #887d6766; box-shadow:0 3px 9px #55472c1c; }
.map3d-room-label.room-details span { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:normal; font-size:28px; }
.map3d-room-label.room-selected { border-color:#e64b2d; color:#9b3424; }
.map3d-facility[role="button"] { pointer-events:auto; cursor:pointer; }
.map3d-facility svg { width:25px; height:25px; }
.map3d-category-legend i { display:grid; place-items:center; width:30px; height:30px; }
.map3d-category-legend i svg { width:23px; height:23px; }
.map3d-room-label[hidden],.map3d-facility[hidden] { display:none!important; }
.map3d-facility.facility-compact span { display:none; }

.map3d-room-label .room-type-icon { width:var(--room-icon-size,42px); height:var(--room-icon-size,42px); }
.map3d-room-label .room-type-icon svg { width:75%; height:75%; }
.map3d-room-label[data-category="gastro"] { color:#a46a1e; }
.map3d-room-label[data-category="workshop"] { color:#477253; }
.map3d-room-label[data-category="spaces"] { color:#48768c; }
.map3d-room-label[data-category="common"] { color:#75654d; }
.room-type-icon[data-icon="ceramic"] { color:#af6543; background:#fff0e5; }
.room-type-icon[data-icon="jewel"] { color:#855690; background:#f2e5f7; }
.room-type-icon[data-icon="wood"],.room-type-icon[data-icon="leather"] { color:#92723e; background:#fff0d7; }
.room-type-icon[data-icon="textile"],.room-type-icon[data-icon="needle"] { color:#45817b; background:#e5f4f0; }
.room-type-icon svg path,.room-type-icon svg rect,.room-type-icon svg ellipse { fill:currentColor; fill-opacity:.16; }
.map3d-room-label.room-details { padding:6px; }
.map3d-room-label.room-details span { font-size:26px; line-height:1.15; }
.langbar button,.map-floor-rail .chip,.map-card-route,button.pill { border:1px solid #fff9; background:linear-gradient(180deg,#fffdf8,#eee5d9); box-shadow:inset 0 2px 1px #fff,inset 0 -2px 3px #89745625,0 5px 0 #d5c5af,0 9px 16px #70573525; transition:box-shadow .12s,transform .12s; }
.langbar button.active,.map-floor-rail .chip.active,.map-card-route,button.pill { background:linear-gradient(180deg,#d6b37d,#bc8b4e); border-color:#e7c894; color:#fff; box-shadow:inset 0 2px 1px #fff5,inset 0 -2px 3px #65401622,0 5px 0 #9e703f,0 9px 16px #70573535; }
.langbar button:active,.map-floor-rail .chip:active,.map-card-route:active,button.pill:active { transform:translateY(3px); box-shadow:inset 0 1px 3px #65401625,0 2px 0 #a17b50,0 4px 8px #70573520; }
.langbar button:focus-visible,.map-floor-rail .chip:focus-visible,.map-card-route:focus-visible { outline:3px solid #8f6032; outline-offset:4px; }

/* Service badges are anchored to roofs, not clamped to the viewport edge. */
.map3d-facility { display:flex; flex-direction:column; align-items:center; gap:4px; padding:0; border:0; background:none; color:#4f493f; box-shadow:none; border-radius:0; font-size:24px; transform:translate(-50%,-50%); }
.map3d-facility b { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; border:2px solid #9c8968; background:#fffaf0; color:#756047; box-shadow:0 2px 5px #59432625; }
.map3d-facility svg { width:38px; height:38px; }
.map3d-facility span { padding:4px 9px; border:1px solid #c4b79f; border-radius:10px; background:#fffaf2; font-size:24px; line-height:1.15; font-weight:700; text-align:center; }
.map3d-facility b { min-width:52px; padding:0; }
.map3d-facility.facility-escalator,
.map-overview .map3d-facility,
.map-overview .map3d-facility.facility-escalator { padding:0; background:none; border:0; box-shadow:none; }
.map-overview .map3d-facility b { width:44px; min-width:44px; height:44px; padding:0; }
.map-overview .map3d-facility svg { width:32px; height:32px; }

/* Keep the four categories and all PDF directions inside one scroll area. */
.category-panel { height:1120px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; touch-action:pan-y; scrollbar-width:thin; scrollbar-color:#c69a63 #f3ede4; }
.category-subheading { padding:28px 8px 16px; color:#796650; font-size:30px; font-weight:700; border-top:2px solid #e5dacb; }
.direction-row { min-height:126px; height:auto; padding:20px 0; }
.direction-row i { display:grid; place-items:center; width:56px; height:56px; flex:none; margin:0 40px 0 8px; border-radius:14px; color:#36332d; font-style:normal; font-weight:700; font-size:30px; }
.direction-row .lbl { font-size:34px; line-height:1.25; }
.category-scroll-hint { position:absolute; left:72px; right:72px; top:1540px; text-align:center; color:#796650; font-size:26px; }
.map3d-facility.facility-row-item span { position:absolute; top:58px; white-space:normal; width:max-content; max-width:100%; }
.map3d-facility.facility-entrance { flex-direction:row; gap:5px; padding:5px 8px; background:#fffaf2; border:1px solid #cfbfa6; border-radius:12px; transform:translate(-50%,-50%); }
.map3d-facility.facility-entrance b,.map-overview .map3d-facility.facility-entrance b { width:28px; min-width:28px; height:28px; border:0; box-shadow:none; background:none; }
.map3d-facility.facility-entrance svg { width:26px; height:26px; }
.map3d-facility.facility-entrance span,.map-overview .map3d-facility.facility-entrance span { display:block; padding:0; border:0; background:none; font-size:23px; }

.visitor-facility text.visitor-entrance-label { font-size:15px; font-weight:700; paint-order:stroke; stroke:#fffaf2; stroke-width:4px; }
.map3d-facility.facility-entrance[data-facility-id="entrance-A2"] { transform:translate(-100%,-50%); }
.map3d-facility.facility-row-item { width:180px; }

/* Shared in-map expandable directions, scroll confined to its own panel. */
.map-direction-legend{position:absolute;z-index:90;left:18px;right:18px;bottom:18px;padding:12px;background:#fffdf8f5;border:1px solid #ddd0bf;border-radius:20px;box-shadow:0 4px 12px #45382712;color:#38362f;pointer-events:auto;font:inherit}
.map-legend-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
.map-legend-categories{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.map-direction-legend button{font:inherit;cursor:pointer;border:1px solid transparent;background:transparent;color:inherit;border-radius:12px;display:flex;align-items:center;gap:7px;padding:8px;line-height:1.2}
.map-direction-legend button:focus-visible{outline:3px solid #a66e37;outline-offset:2px}
.map-direction-legend button[aria-pressed=true]{border-color:#a97c45;background:#ecdfcc}
.map-direction-legend i{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:6px;color:#39473e}
.map-direction-legend svg{width:22px;height:22px}
.map-legend-categories button{font-size:19px}
.map-direction-legend .map-directions-toggle{font-size:19px;background:#f4eee5;border-color:#d8c5ab;white-space:nowrap;min-height:44px}
.map-directions-panel{margin-top:12px;border-top:1px solid #e0d6c9;padding-top:12px}
.map-directions-panel[hidden]{display:none!important}
.map-directions-heading{display:flex;align-items:center;justify-content:space-between;font-size:22px;font-weight:700;padding:0 8px 10px}
.map-direction-legend .map-directions-clear{font-size:19px;border-color:#d8c5ab;background:#f4eee5;padding:8px 18px}
.map-directions-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;max-height:260px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding-right:5px}
.map-directions-grid button{font-size:20px;text-align:left;min-height:54px;background:#f5f1e9;border-color:#e3dace}
.map-zoom-controls,.real-3d .map-zoom-controls{bottom:112px}
.visitor-controls{bottom:112px}
@media(max-width:600px){.map-legend-categories button{font-size:14px;padding:5px}.map-direction-legend i{width:22px;height:22px}.map-legend-categories{gap:3px}.map-direction-legend .map-directions-toggle{font-size:14px}.map-directions-grid button{font-size:16px}.map-directions-grid{grid-template-columns:1fr;max-height:220px}}
.map-zoom-controls[hidden],.visitor-controls[hidden]{display:none!important}

/* Explicit transfer confirmation; only the map moves during the floor change. */
.map-transition-note { right:70px; max-width:760px; font-size:23px; pointer-events:none; box-shadow:0 5px 18px #42342115; }
.map-transition-note strong,.map-transition-note span {display:block;}
.map-transition-note strong {font-size:26px;margin-bottom:5px;}
.map-transition-note span {font-size:21px;line-height:1.3;}
button.map-route-status {font-size:26px;min-height:72px;}
#map3d.floor-animation-out {animation:floorOut .26s ease both;pointer-events:none;}
#map3d.floor-animation-in {animation:floorIn .52s ease both;}
@media(prefers-reduced-motion:reduce){#map3d.floor-animation-out,#map3d.floor-animation-in{animation:none;}}

/* Venue name in place of the former product wordmark. */
.tsum-brand {color:#3e382f;text-align:center;line-height:1.15;}
.tsum-brand strong {display:block;font-size:82px;font-weight:600;letter-spacing:10px;}
.tsum-brand span {display:block;font-size:25px;letter-spacing:.2px;margin-top:12px;line-height:1.3;}
.splash-brand {position:absolute;left:92px;top:330px;width:620px;text-align:left;}
.splash-brand strong {font-size:110px;letter-spacing:12px;}
.splash-brand span {font-size:38px;margin-top:16px;}
.footer-brand {position:absolute;left:220px;bottom:150px;width:640px;z-index:5;color:var(--gold-dk);}
.final-brand {position:absolute;left:220px;top:1140px;width:640px;color:var(--gold-dk);}