*{box-sizing:border-box}
:root{
  --tb-h:64px;

  --bg-light:#f7f9fc;
  --fg-light:#0e1420;
  --panel-br-light:rgba(0,0,0,.08);

  --bg-dark:#0b0f14;
  --fg-dark:#e9eef5;
  --panel-br-dark:rgba(255,255,255,.1);

  --pill:#183a66;
  --pill-br:#2a5b9c;
}

/* общий фон и текст */
html,body{height:100%}
body{
  margin:0; padding-top:var(--tb-h);
  font:16px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
[data-bs-theme="light"] body{ background:var(--bg-light); color:var(--fg-light); }
[data-bs-theme="dark"]  body{ background:var(--bg-dark);  color:var(--fg-dark); }

/* топбар такой же */
.topbar{
  position:fixed; top:0; left:0; right:0; height:var(--tb-h); z-index:2000001;
  display:flex; align-items:center; gap:12px; padding:0 12px;
  border-bottom:1px solid; box-shadow:0 6px 18px rgba(0,0,0,.25);
  backdrop-filter: blur(12px) saturate(140%);
}
[data-bs-theme="light"] .topbar{ background:rgba(255,255,255,.82); border-color:var(--panel-br-light); }
[data-bs-theme="dark"]  .topbar{ background:rgba(8,12,18,.92);   border-color:var(--panel-br-dark); }

.nav-strip{ flex:1 1 auto; min-width:0; height:100%; display:flex; align-items:center; gap:8px; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.nav-strip::-webkit-scrollbar{display:none}
.nav-item{
  display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:1px solid transparent; text-decoration:none; transition:.2s;
}
[data-bs-theme="light"] .nav-item{ color:var(--fg-light); }
[data-bs-theme="dark"]  .nav-item{ color:var(--fg-dark); }
[data-bs-theme="light"] .nav-item:hover{ background:rgba(0,0,0,.06); border-color:var(--panel-br-light); }
[data-bs-theme="dark"]  .nav-item:hover{ background:rgba(255,255,255,.08); border-color:var(--panel-br-dark); }
.nav-item.active{ background:var(--pill); border-color:var(--pill-br); color:#bfe0ff; box-shadow:inset 0 0 0 1px rgba(78,161,255,.25); }

.theme-toggle{ flex:0 0 auto; height:40px; width:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; border:1px solid transparent; cursor:pointer; transition:.2s }
[data-bs-theme="light"] .theme-toggle{ color:var(--fg-light); border-color:var(--panel-br-light); }
[data-bs-theme="dark"]  .theme-toggle{ color:var(--fg-dark);  border-color:var(--panel-br-dark);  }
[data-bs-theme="light"] .theme-toggle:hover{ background:rgba(0,0,0,.06) }
[data-bs-theme="dark"]  .theme-toggle:hover{ background:rgba(255,255,255,.08) }
.theme-toggle i{ font-size:18px }

/* AR UI — не даём залипать поверх стартового экрана до клика */
.ui{pointer-events:none;opacity:.85}
#fullscreenBtn,#soundToggle{
  position:fixed; z-index:1000000;
  background:rgba(0,0,0,.7); color:#fff; border:2px solid #fff; border-radius:8px; padding:10px 14px; font-size:14px; cursor:pointer
}
#soundToggle{ top: calc(var(--tb-h) + 10px); right:10px }
#fullscreenBtn{ bottom:10px; right:10px }

#instructionsButton{
  position:fixed; bottom:10px; left:10px; z-index:1000000;
  background:#333; color:#fff; border:2px solid #fff; border-radius:5px; padding:10px; cursor:pointer; font-size:16px; transition:background .3s
}
#instructionsButton:hover{ background:#555 }

#instructions{
  display:none; position:fixed; bottom:50px; left:10px; z-index:1000000;
  color:#fff; background:rgba(0,0,0,.7); padding:10px; max-width:300px
}

#startOverlay{
  position:fixed; inset:0; z-index:2000002;
  display:flex; justify-content:center; align-items:center;
  background:#000; color:#fff; font-size:20px; text-align:center; padding:20px
}
#startButton{
  padding:15px 30px; font-size:18px; background:#007BFF; color:#fff; border:none; border-radius:8px; cursor:pointer
}

/* AR canvas — прозрачный фон */
a-scene, a-scene>canvas{ background:transparent!important; position:relative; z-index:1 }