/* ============================================================
   viewer.css — derbaag Explorer 360
   ใช้ prefix ที่สื่อความหมาย ไม่ผูกกับ feature เฉพาะ:
     .site-*      → header / chrome ของ site
     .scene-nav   → navigation bar ด้านล่าง
     .thumb-*     → thumbnail card
     .nav-arrow   → ปุ่มเลื่อน nav
     .pin         → hotspot บน 360°
     .popup-*     → modal popup
     .gallery-*   → slider รูปภาพใน popup
     .scene-loader → overlay ระหว่างโหลดฉาก
     .initial-loader → overlay ครั้งแรก

   CSS Variables:
     --clr-*      → สี (color)
     --rad-*      → border-radius
     --dur-*      → animation duration
     --nav-*      → ขนาด navigation

   โครงสร้าง:
     1.  Reset & Variables
     2.  Layout
     3.  Pannellum Overrides
     4.  Initial Loader
     5.  Site Header
     6.  Scene Nav (thumbnail mode)
     7.  Thumbnail Card
     8.  Nav Arrows
     9.  Pin (Hotspot)
    10.  Scene Loader
    11.  Coordinate Toast
    12.  Popup Overlay & Box
    13.  Popup Close Button
    14.  Popup Media (map + youtube)
    15.  Popup Content (shared)
    16.  Gallery Renderer
    17.  Local Video Renderer
    18.  Popup Info Rows
    19.  Popup Tags & Buttons
    20.  Responsive ≤ 600px
   ============================================================ */


/* ============================================================
   1. Reset & Variables
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ── สี (Color) ── */
  --clr-accent:      #1a73e8;   /* ปุ่ม, link, pin map */
  --clr-accent-dk:   #1558b0;   /* hover */
  --clr-pin-gallery: #9b59b6;   /* pin รูปภาพ */
  --clr-pin-yt:      #e74c3c;   /* pin YouTube */
  --clr-pin-video:   #e67e22;   /* pin local video */
  --clr-pin-nav:     rgba(255,255,255,.22); /* pin navigate */

  --clr-surface:     #fff;
  --clr-surface-alt: #f5f5f5;
  --clr-bg:          #0d0d0d;
  --clr-overlay:     rgba(0,0,0,.68);
  --clr-text:        #1c1c1e;
  --clr-text-muted:  #6e6e73;
  --clr-border:      #e0e0e0;

  /* ── Border Radius ── */
  --rad-sm: 6px;
  --rad-md: 10px;
  --rad-lg: 16px;
  --rad-xl: 20px;

  /* ── Duration ── */
  --dur-fast: 150ms ease;
  --dur-base: 260ms ease;
  --dur-slow: 400ms ease;

  /* ── Navigation (thumbnail) ── */
  --nav-h:      100px;
  --thumb-w:    140px;
  --thumb-gap:  10px;
  --track-w:    440px; /* JS override ด้วย setProperty */

  /* ── Popup ── */
  --popup-w:          520px;
  --popup-media-h:    280px;
  --popup-gallery-h:  240px;
}


/* ============================================================
   2. Layout
   ============================================================ */

html, body {
  height: 100%;
  background: var(--clr-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Noto Sans Thai", sans-serif;
  color: var(--clr-text);
  overflow: hidden;
}

#app {
  position: relative;
  width: 100%;
  height: 100vh;
}

#viewer-container {
  width: 100%;
  height: 100vh;
}


/* ============================================================
   3. Pannellum Overrides — ซ่อน UI ของ pannellum ที่ไม่ใช้
   ============================================================ */

.pnlm-about-msg,
.pnlm-title-box,
.pnlm-author-box        { display: none !important; }
.pnlm-tooltip span      { display: none !important; }
.pnlm-zoom-controls,
.pnlm-fullscreen-toggle { display: none !important; }
.pnlm-load-box,
.pnlm-lbar,
.pnlm-lbar-fill         { display: none !important; }


/* ============================================================
   4. Initial Loader — spinner ครั้งแรก (พื้นดำทึบ)
   ============================================================ */

.initial-loader {
  position: absolute; inset: 0;
  background: var(--clr-bg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 20px; z-index: 500;
  transition: opacity var(--dur-slow);
}
.initial-loader.hidden { opacity: 0; pointer-events: none; }

.initial-loader__spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--clr-accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
.initial-loader__text { color: rgba(255,255,255,.6); font-size: 14px; }

@keyframes spin { to { transform: rotate(360deg); } }


/* ============================================================
   5. Site Header — glass pill มุมซ้ายบน
   ============================================================ */

.site-header {
  position: absolute;
  top: 0; left: 0;
  height: 52px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 18px;
  z-index: 300;
  background: rgba(0,0,0,.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-right-radius: var(--rad-lg);
  border-right:  1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.site-header__logo {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--clr-accent);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.site-header__logo svg { width: 18px; height: 18px; fill: white; }

.site-header__divider {
  width: 1px; height: 22px;
  background: rgba(255,255,255,.25);
}

.site-header__text { display: flex; flex-direction: column; gap: 1px; }

.site-header__name {
  font-size: 14px; font-weight: 700;
  color: white; letter-spacing: .01em; line-height: 1.2;
}
.site-header__subtitle {
  font-size: 10px; color: rgba(255,255,255,.6);
  letter-spacing: .08em; text-transform: uppercase;
}


/* ============================================================
   6. Scene Nav — floating pill กลางล่าง (thumbnail mode)
   ============================================================ */

.scene-nav {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.58);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
  padding: 8px;
  z-index: 200;
  max-width: calc(100vw - 32px);
}

/* width เซ็ตโดย JS: viewport.style.width = trackW + 'px' */
.thumb-viewport {
  overflow: hidden;
  flex-shrink: 0;
  height: var(--nav-h);
  display: flex;
  align-items: center;
}

.thumb-reel {
  display: flex;
  gap: 10px;          /* ตรงกับ thumbGap = 10 ใน config */
  flex-shrink: 0;
  will-change: transform;
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}


/* ============================================================
   7. Thumbnail Card
   ============================================================ */

.thumb-card {
  position: relative;
  width: 140px;       /* ตรงกับ thumbWidth = 140 ใน config */
  flex-shrink: 0;
  border-radius: var(--rad-md);
  overflow: hidden;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,.15);
  aspect-ratio: 16/9;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast),
              filter var(--dur-fast);
}
.thumb-card:hover {
  border-color: rgba(255,255,255,.7);
  /* ใช้ box-shadow + brightness แทน scale
     เพื่อให้ดูยกขึ้นโดยไม่ต้องการพื้นที่นอก viewport */
  box-shadow: 0 0 0 2px rgba(255,255,255,.4),
              0 8px 24px rgba(0,0,0,.5);
  filter: brightness(1.15);
  z-index: 2;
}
.thumb-card.is-active {
  border-color: var(--clr-accent);
  box-shadow: 0 0 0 2px var(--clr-accent), 0 4px 16px rgba(26,115,232,.35);
}

.thumb-card img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform var(--dur-base);
}
.thumb-card:hover img { transform: scale(1.1); }

.thumb-card-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px 6px 5px;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  color: white;
  font-size: 10px; font-weight: 600;
  text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(3px);
  transition: opacity var(--dur-fast), transform var(--dur-fast);
  pointer-events: none;
}
.thumb-card:hover .thumb-card-label,
.thumb-card.is-active .thumb-card-label { opacity: 1; transform: none; }


/* ============================================================
   8. Nav Arrows — ปุ่ม ← →
   ============================================================ */

.nav-arrow {
  position: relative;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.15);
  color: white; font-size: 20px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast), transform var(--dur-fast),
              border-color var(--dur-fast), opacity var(--dur-fast);
  user-select: none;
  /*
   * z-index: 10 — ต้องสูงกว่า thumb-card:hover (z-index:2)
   * เพื่อให้ปุ่มลูกศรไม่โดน thumbnail บัง
   */
  z-index: 10;
}
.nav-arrow:hover { background: rgba(255,255,255,.28); transform: scale(1.1); }
.nav-arrow.is-disabled { opacity: .22; pointer-events: none; }

/* pulse ring */
.nav-arrow::before {
  content: '';
  position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.5);
  animation: nav-pulse 2.2s ease-out infinite;
  pointer-events: none;
}
.nav-arrow.is-disabled::before { animation: none; opacity: 0; }

@keyframes nav-pulse {
  0%  { transform: scale(1);   opacity: .65; }
  65% { transform: scale(1.5); opacity: 0; }
  100%{ transform: scale(1.5); opacity: 0; }
}

/* badge จำนวนฉากที่ซ่อน */
.nav-arrow__badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 18px; height: 18px;
  background: var(--clr-accent);
  color: white;
  font-size: 10px; font-weight: 700;
  border-radius: 9px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(0,0,0,.3);
  pointer-events: none;
  transition: transform var(--dur-fast), opacity var(--dur-fast);
}
.nav-arrow.is-disabled .nav-arrow__badge { transform: scale(0); opacity: 0; }


/* ============================================================
   9. Pin (Hotspot) — จุดบน 360°
   ============================================================ */

.pin {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
}

.pin__dot {
  width: 38px; height: 38px;
  border: 2.5px solid rgba(255,255,255,.9);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
  background: var(--clr-accent);  /* default = map (น้ำเงิน) */
  transition: transform var(--dur-fast), filter var(--dur-fast);
}
.pin__dot svg { width: 17px; height: 17px; fill: white; flex-shrink: 0; }

/* pulse ring */
.pin__dot::before {
  content: '';
  position: absolute; width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--clr-accent);
  animation: pin-pulse 2.2s ease-out infinite;
}
@keyframes pin-pulse {
  0%  { transform: scale(1);   opacity: .7; }
  100%{ transform: scale(2.4); opacity: 0; }
}

/* ── สีตาม popup type ── */
.pin--gallery    { background: var(--clr-pin-gallery); }
.pin--gallery::before { border-color: var(--clr-pin-gallery); }
.pin--youtube    { background: var(--clr-pin-yt); }
.pin--youtube::before { border-color: var(--clr-pin-yt); }
.pin--localvideo { background: var(--clr-pin-video); }
.pin--localvideo::before { border-color: var(--clr-pin-video); }
.pin--navigate   { background: var(--clr-pin-nav); backdrop-filter: blur(6px); }
.pin--navigate::before { border-color: rgba(255,255,255,.5); }

/*
 * ── ทิศทางลูกศร navigate ──
 * pin--forward  → ลูกศรชี้ขวา (default, ไม่ต้อง rotate)
 * pin--left     → หมุน 180° (ชี้ซ้าย)
 * pin--right    → ไม่ rotate (ชี้ขวา เหมือน forward)
 *
 * SVG ลูกศรวาดชี้ขวา → rotate ตามที่ต้องการ
 */
.pin--forward svg { transform: rotate(0deg); }
.pin--left    svg { transform: rotate(180deg); }
.pin--right   svg { transform: rotate(0deg); }

.pin:hover .pin__dot { transform: scale(1.14); filter: brightness(1.12); }

.pin__label {
  margin-top: 4px;
  background: rgba(0,0,0,.65); color: white;
  font-size: 11px; font-weight: 500;
  padding: 2px 9px; border-radius: 20px;
  white-space: nowrap; pointer-events: none;
}

/* ── สอดคล้องกับ Pannellum tooltip selector ── */
.pnlm-tooltip span { display: none !important; }


/* ============================================================
   10. Scene Loader — overlay backdrop ระหว่างโหลดฉาก
   ============================================================ */

.scene-loader {
  position: absolute; inset: 0;
  z-index: 450;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.scene-loader.is-visible { opacity: 1; pointer-events: all; }
.scene-loader.is-hiding   { opacity: 0; pointer-events: none; }

.scene-loader__inner {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  background: rgba(15,15,15,.72);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px; padding: 32px 40px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  transform: translateY(8px);
  transition: transform .3s ease;
}
.scene-loader.is-visible .scene-loader__inner { transform: none; }

.scene-loader__spinner {
  width: 46px; height: 46px;
  border: 3px solid rgba(255,255,255,.12);
  border-top-color: var(--clr-accent);
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
.scene-loader__title {
  font-size: 16px; font-weight: 700; color: white; text-align: center;
}
.scene-loader__subtitle {
  font-size: 12px; color: rgba(255,255,255,.55); text-align: center;
}
.scene-loader__dots::after {
  content: '';
  animation: dots 1.4s steps(4, end) infinite;
}
@keyframes dots {
  0%  { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
}


/* ============================================================
   11. Coordinate Toast (dev tool)
   ============================================================ */

.coord-toast {
  position: absolute;
  top: 66px; right: 16px;
  background: rgba(0,0,0,.78); color: white;
  font-size: 12px; font-family: monospace;
  padding: 8px 14px; border-radius: var(--rad-md);
  border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; gap: 8px;
  z-index: 400; animation: toastIn .2s ease;
  backdrop-filter: blur(8px);
}
.coord-toast.is-hiding { opacity: 0; transition: opacity .4s; }
@keyframes toastIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }


/* ============================================================
   12. Popup Overlay & Box
   ============================================================ */

.popup-overlay {
  position: fixed; inset: 0;
  background: var(--clr-overlay);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; padding: 16px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base);
}
.popup-overlay.is-open { opacity: 1; pointer-events: all; }

.popup-box {
  background: var(--clr-surface);
  border-radius: var(--rad-xl);
  width: 100%; max-width: var(--popup-w);
  max-height: 90vh; overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,.28), 0 4px 16px rgba(0,0,0,.12);
  position: relative;
  transform: translateY(22px) scale(.97);
  transition: transform var(--dur-base);
}
.popup-overlay.is-open .popup-box { transform: none; }
.popup-box::-webkit-scrollbar { width: 0; }


/* ============================================================
   13. Popup Close Button
   ============================================================ */

.popup-close-btn {
  position: absolute; top: 14px; right: 14px;
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.85);
  backdrop-filter: blur(4px);
  color: var(--clr-text); font-size: 17px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  z-index: 20; box-shadow: 0 2px 8px rgba(0,0,0,.18);
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.popup-close-btn:hover { background: white; transform: scale(1.08); }


/* ============================================================
   14. Popup Media (map iframe + youtube iframe)
   ============================================================ */

.popup-media {
  width: 100%; height: var(--popup-media-h);
  position: relative; overflow: hidden;
  border-radius: var(--rad-xl) var(--rad-xl) 0 0;
  background: var(--clr-surface-alt);
}
.popup-media iframe { width: 100%; height: 100%; border: none; display: block; }

/* skeleton shimmer */
.popup-media::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg,#e4e4e4 25%,#f0f0f0 50%,#e4e4e4 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite; z-index: 1; pointer-events: none;
}
.popup-media.is-loaded::before { display: none; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* YouTube 16:9 */
.popup-media--video {
  height: 0; padding-top: 56.25%;
  border-radius: var(--rad-xl) var(--rad-xl) 0 0;
  background: #000;
}
.popup-media--video iframe { position: absolute; inset: 0; width:100%; height:100%; }
.popup-media--video::before { position: absolute; inset: 0; }

/* Local Video */
.popup-media--localvideo {
  height: auto; padding-top: 0;
  border-radius: var(--rad-xl) var(--rad-xl) 0 0;
  aspect-ratio: 16/9; background: #000;
}
.popup-media--localvideo video {
  width: 100%; height: 100%;
  object-fit: contain; display: block; outline: none;
}


/* ============================================================
   15. Popup Content (title, desc — shared)
   ============================================================ */

.popup-content { padding: 20px 22px 22px; }

.popup-title {
  font-size: 20px; font-weight: 700; color: var(--clr-text);
  line-height: 1.3; margin-bottom: 8px; padding-right: 40px;
}
.popup-desc {
  font-size: 14px; color: var(--clr-text-muted);
  line-height: 1.65; margin-bottom: 14px;
}
.popup-divider { height: 1px; background: var(--clr-border); margin: 0 0 14px; }
.popup-meta {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--clr-surface-alt); border-radius: 20px;
  padding: 3px 10px; font-size: 12px; color: var(--clr-text-muted);
  margin-bottom: 8px;
}
.popup-meta .info-icon { width: 14px; height: 14px; margin-top: 0; }

.popup-badge-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.popup-badge {
  display: inline-flex; align-items: center; gap: 3px;
  background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
  border-radius: 20px; padding: 3px 10px;
  font-size: 11px; color: var(--clr-text-muted); font-weight: 500;
}


/* ============================================================
   16. Gallery Renderer
   ============================================================ */

.gallery-wrap {
  position: relative; width: 100%;
  border-radius: var(--rad-xl) var(--rad-xl) 0 0;
  overflow: hidden; background: #111;
}
.gallery-reel {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  height: var(--popup-gallery-h);
}
.gallery-reel::-webkit-scrollbar { display: none; }

.gallery-slide {
  flex: 0 0 100%; scroll-snap-align: start;
  position: relative; overflow: hidden;
}
.gallery-slide img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s ease;
}
.gallery-slide:hover img { transform: scale(1.04); }

.gallery-slide__caption {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 10px 14px 8px;
  background: linear-gradient(transparent, rgba(0,0,0,.65));
  color: white; font-size: 13px; font-weight: 500; pointer-events: none;
}

.gallery-dots {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 5;
}
.gallery-dot {
  width: 7px; height: 7px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.4); cursor: pointer; padding: 0;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
.gallery-dot.is-active { background: white; transform: scale(1.35); }
.gallery-dot:hover     { background: rgba(255,255,255,.75); }


/* ============================================================
   17. Local Video — badge row (duration / size / resolution)
   ============================================================ */

/* ใช้ .popup-badge-row + .popup-badge ที่ประกาศใน section 15 */


/* ============================================================
   18. Popup Info Rows (ที่อยู่, เบอร์, เวลา, เว็บ)
   ============================================================ */

.popup-info-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.popup-info-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 10px 14px; background: var(--clr-surface-alt);
  border-radius: var(--rad-md); font-size: 13px; color: var(--clr-text); line-height: 1.5;
}
.info-icon {
  width: 17px; height: 17px; flex-shrink: 0;
  margin-top: 1px; fill: var(--clr-accent);
}


/* ============================================================
   19. Popup Tags & Buttons
   ============================================================ */

.popup-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.popup-tag {
  padding: 3px 10px; border-radius: 20px;
  background: var(--clr-surface-alt); border: 1px solid var(--clr-border);
  font-size: 11px; color: var(--clr-text-muted); font-weight: 500;
}

.popup-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px;
  background: var(--clr-accent); color: white;
  border: none; border-radius: var(--rad-md);
  font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast), transform var(--dur-fast), box-shadow var(--dur-fast);
  box-shadow: 0 2px 8px rgba(26,115,232,.25);
}
.popup-btn:hover {
  background: var(--clr-accent-dk);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(26,115,232,.35);
}
.popup-btn--youtube { background: #e74c3c !important; }
.popup-btn--youtube:hover { background: #c0392b !important; }


/* ============================================================
   20. Responsive ≤ 600px
   ============================================================ */

@media (max-width: 600px) {
  :root {
    --thumb-w:          110px;
    --nav-h:             84px;
    --popup-media-h:    200px;
    --popup-gallery-h:  190px;
  }

  .popup-overlay { align-items: flex-end; padding: 0; }
  .popup-box {
    max-width: 100%;
    border-radius: var(--rad-xl) var(--rad-xl) 0 0;
    max-height: 88vh;
    transform: translateY(100%);
  }
  .popup-overlay.is-open .popup-box { transform: none; }
  .popup-title { font-size: 17px; }

  .site-header__name     { font-size: 13px; }
  .site-header__subtitle { font-size: 9px; }
}


/* ============================================================
   Scene Indicator — แถบบอกฉากปัจจุบัน
   อยู่ใต้ site-header ห่าง 5px
   ============================================================ */

.scene-indicator {
  position: absolute;
  top: calc(52px + 5px);   /* site-header height (52px) + gap 5px */
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px 0 10px;
  z-index: 300;

  background: rgba(0,0,0,.42);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-left: none;
  border-radius: 0 14px 14px 0;
}

.scene-indicator__icon {
  width: 12px; height: 12px;
  fill: var(--clr-accent);
  flex-shrink: 0;
}

.scene-indicator__text {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
  letter-spacing: .02em;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* ============================================================
   Top Controls — Share + Menu (มุมขวาบน)
   ============================================================ */

.top-controls {
  position: absolute;
  top: 14px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 300;
}

/* ปุ่ม Share และ Menu */
.ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px 0 10px;
  border: none;
  border-radius: 18px;
  cursor: pointer;

  background: rgba(0,0,0,.50);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  color: white;
  font-size: 13px;
  font-weight: 500;
  transition: background var(--dur-fast), transform var(--dur-fast);
}

.ctrl-btn:hover {
  background: rgba(26,115,232,.75);
  transform: translateY(-1px);
}

.ctrl-btn svg {
  width: 16px; height: 16px;
  fill: white; flex-shrink: 0;
}

/* menu button — ไม่มี label text */
#menu-btn {
  padding: 0 10px;
  width: 36px;
}

.ctrl-btn__label {
  white-space: nowrap;
}

/* Dropdown */
.menu-dropdown {
  position: absolute;
  top: calc(36px + 8px);
  right: 0;
  min-width: 180px;

  background: rgba(16,16,20,.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.45);
  overflow: hidden;

  /* ซ่อน/แสดง */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.97);
  transform-origin: top right;
  transition: opacity 180ms ease, transform 180ms ease;
}

.menu-dropdown.is-open {
  opacity: 1;
  pointer-events: all;
  transform: none;
}

/* แต่ละ item */
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.85);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-fast), color var(--dur-fast);
}

.menu-item:hover {
  background: rgba(255,255,255,.08);
  color: white;
}

.menu-item + .menu-item {
  border-top: 1px solid rgba(255,255,255,.06);
}

.menu-item__icon {
  width: 18px; height: 18px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

.menu-item__icon svg {
  width: 16px; height: 16px;
  fill: rgba(255,255,255,.6);
}

.menu-item:hover .menu-item__icon svg {
  fill: var(--clr-accent);
}


/* ============================================================
   Gyroscope Toggle Button — ปุ่มลอยมุมล่างขวา (มือถือเท่านั้น)
   ============================================================ */

.gyro-btn {
  position: absolute;
  /* เหนือ scene-nav ขึ้นมา: nav-h(100) + gap(12) + bottom(20) */
  bottom: calc(20px + 100px + 12px);
  right: 16px;
  z-index: 210;

  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;

  transition: background 150ms ease, border-color 150ms ease,
              transform 150ms ease;
}

.gyro-btn svg {
  width: 22px;
  height: 22px;
  fill: rgba(255,255,255,.75);
  transition: fill 150ms ease;
}

/* active state — gyroscope เปิดอยู่ */
.gyro-btn.is-active {
  background: rgba(26,115,232,.80);
  border-color: rgba(26,115,232,.6);
  /* หมุน icon เบาๆ เพื่อบอกว่ากำลัง active */
  animation: gyro-spin 3s linear infinite;
}
.gyro-btn.is-active svg {
  fill: white;
}

@keyframes gyro-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.gyro-btn:hover {
  background: rgba(26,115,232,.65);
  border-color: rgba(26,115,232,.5);
  transform: scale(1.08);
}


/* ============================================================
   License Popup — แสดงเมื่อ click ขวา
   ============================================================ */

.license-popup {
  position: fixed;
  z-index: 2000;
  width: 280px;

  background: rgba(16,16,22,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  overflow: hidden;

  animation: lp-in 0.18s cubic-bezier(.34,1.56,.64,1);
}

@keyframes lp-in {
  from { opacity:0; transform:scale(0.92) translateY(-4px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}

/* Header */
.lp-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.lp-logo {
  width: 28px; height: 28px;
  fill: #1a73e8; flex-shrink: 0;
}
.lp-title {
  font-size: 13px; font-weight: 700;
  color: white; margin: 0; line-height: 1.3;
}
.lp-version {
  font-size: 10px; color: rgba(255,255,255,0.4);
  margin: 0; font-family: monospace;
}

/* Body */
.lp-body { padding: 10px 16px; }
.lp-desc {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin: 0;
}

/* Actions */
.lp-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 16px 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}

.lp-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px; font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 140ms ease;
}
.lp-btn svg {
  width: 14px; height: 14px;
  fill: currentColor; flex-shrink: 0;
}

.lp-btn--primary {
  background: rgba(26,115,232,0.85);
  color: white;
}
.lp-btn--primary:hover { background: rgba(26,115,232,1); }

.lp-btn--secondary {
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.80);
}
.lp-btn--secondary:hover { background: rgba(255,255,255,0.15); color: white; }