@-ms-viewport { width:device-width; }
@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
html { height:100%; }
body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
@font-face {
	font-family: Montserrat;
	src: url(fonts/montserrat/Montserrat-Regular.ttf);
}

@font-face {
	font-family: MontserratBold;
	src: url(fonts/montserrat/Montserrat-Bold.ttf);
}

@font-face {
	font-family: MontserratLight;
	src: url(fonts/montserrat/Montserrat-Light.ttf);
}

@font-face {
	font-family: MontserratThin;
	src: url(fonts/montserrat/Montserrat-Thin.ttf);
}

/* replaces the handful of inline style="" attributes in index.html so
   style-src can drop 'unsafe-inline' entirely (CSP restricts <style> tags
   and style="" attributes parsed from HTML; it does NOT restrict
   JavaScript setting element.style / jQuery .css(), which is how
   pano_interface.js builds the rest of the UI, so this is the only
   markup-level styling left to externalize). */
#pano { width:100%; height:100%; }
.pano-noscript-table { width:100%; height:100%; }
.pano-noscript-row { vertical-align:middle; }
.pano-noscript-message { text-align:center; }

/* info-hotspot marker dot, see psv/src/embedpano-shim.js */
.tour-info-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(45, 62, 80, 0.85);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Georgia, serif;
	font-style: italic;
	font-weight: bold;
	cursor: pointer;
	border: 2px solid #fff;
}

/* VirtualTourPlugin's own link arrows (.psv-virtual-tour-link) are rendered
   by a separate fixed-FOV "compass" camera (see its __updateCamera(),
   PerspectiveCamera(30, 1) translated toward the bottom of the screen) --
   not true embedded scene positions like krpano's hotspots. That made
   scene-jump icons cluster together regardless of the actual camera
   rotation/fov, instead of sitting at their real on-screen location.
   Scene-jump markers are re-implemented as regular MarkersPlugin markers
   (psv/src/embedpano-shim.js, sceneLinkMarkersFor()), which use true
   spherical projection exactly like the info-hotspot dots above, so the
   plugin's own arrows are hidden entirely here. */
.psv-virtual-tour-link {
	display: none !important;
}

/* Hover behavior for scene-jump markers (psv/src/embedpano-shim.js,
   sceneLinkMarkersFor()), matching the original krpano skin
   (tour/hs_scene.xml, skin_hotspotstyle_scene onover/onout): the eye icon
   tweens out (scaling up while fading) as a round preview bubble
   (thumb2.png, a pre-cropped circular thumbnail already generated per
   scene) tweens in at the same spot. The title label is a native PSV
   marker tooltip instead of a hand-positioned text hotspot. */
.tour-nav-marker {
	position: relative;
	width: 60px;
	height: 60px;
}
.tour-nav-eye {
	width: 60px;
	height: 60px;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
.tour-nav-thumb {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(0.2);
	opacity: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
	pointer-events: none;
}
.tour-nav-marker:hover .tour-nav-eye {
	transform: scale(1.8);
	opacity: 0;
}
.tour-nav-marker:hover .tour-nav-thumb {
	transform: translate(-50%, -50%) scale(1);
	opacity: 1;
}

/* pano_interface.js's own TTK logo (mainUI_logo.png, top-right) sits in
   mainUIBtnsStage (z-index:100) alongside the next/prev/zoom/map/language
   buttons, above PSV's default .psv-panel z-index:90. The info-marker click
   panel is 400px wide and full height, so its top edge -- title and first
   lines of description -- landed directly behind the logo, unreadable.
   Original krpano instead shows a small tooltip anchored right next to the
   clicked hotspot rather than a full-height sidebar, which never overlapped
   the logo at all; matching that exactly would be a bigger redesign.
   Raising .psv-panel (or its #pano_tourDiv ancestor, which establishes its
   own stacking context and traps the panel's z-index inside it -- a plain
   .psv-panel { z-index } override alone does nothing) above 100 was tried
   first, but #pano_tourDiv also contains the full-viewport pano canvas,
   and raising *that* above mainUIBtnsStage made the canvas intercept clicks
   meant for the next/prev buttons too, since they share that same z:100
   container with the logo -- broke real navigation, not just a visual
   nit. Hiding just the logo image while a panel is open (toggled via
   viewer 'show-panel'/'hide-panel' in psv/src/embedpano-shim.js) fixes the
   overlap without touching any stacking order, so the buttons are
   untouched. */
body.psv-panel-open img[src*="mainUI_logo"] {
	visibility: hidden;
}

/* PSV's own notification bar (viewer.showNotification()) stays in the DOM
   at all times, only toggling opacity/position via
   .psv-notification--visible -- while hidden it's still pointer-events:auto
   by default, so if its resting position happens to land on-screen (found
   overlapping a video-scene info marker, see psv/page.css) it silently eats
   clicks meant for whatever's underneath. We never call showNotification
   ourselves, so it's safe to disable entirely while not showing a message. */
.psv-notification:not(.psv-notification--visible) {
	pointer-events: none;
}