html, body { touch-action:none; overscroll-behavior:none; }
canvas { touch-action:none; }
#scene { position:fixed; inset:0; width:100%; height:100%; display:block; }
#glare { position:fixed; inset:0; pointer-events:none; opacity:0; z-index:5;
  background:radial-gradient(ellipse at var(--gx,50%) var(--gy,45%), rgba(255,250,236,1) 0%, rgba(255,244,220,.9) 30%, rgba(255,238,210,.55) 62%, rgba(255,236,205,.25) 100%); }
#labels { position:fixed; inset:0; pointer-events:none; z-index:6; }
#badge { z-index:40; font-size:11.5px; max-width:min(440px, calc(100vw - 32px)); text-align:center; }
body.theme-dark #badge { color:#e6e8f2; }
body.theme-light #badge { color:#1e293b; }

#panel-path { top:16px; left:16px; width:292px; }
#panel-levels { top:16px; right:16px; width:276px; }
#panel-cave { bottom:78px; left:16px; width:280px; }
#panel-quotes { bottom:78px; right:16px; width:316px; }
#panel-info { left:50%; right:auto; bottom:64px; transform:translateX(-50%); width:440px; }
.panel { touch-action:pan-y; }
.panel p + p { margin-top:8px; }
.panel .hint { margin-top:8px; }
.panel .hint.small, .panel .small { font-size:10.5px; opacity:.62; }
.panel .hint.cap { margin-top:0; }
.panel button { min-width:0; overflow-wrap:break-word; }
.panel .seg { flex-wrap:wrap; }
.panel .seg button { white-space:normal; line-height:1.2; flex:1 1 auto; }
.panel .seg.sub { margin-top:4px; }
.panel .seg.sub.off { display:none; }
.panel .row input[type="range"] { flex:1; min-width:0; }
.panel .row b { font-variant-numeric:tabular-nums; font-size:11.5px; min-width:64px; text-align:right; font-weight:650; }
.path-row { margin-top:10px; }
#stage-desc { min-height:4.5em; }
#row-eyes { margin-top:8px; }
.panel .stat { font-size:11.5px; }
.panel .stat b { font-size:11.5px; }
.panel .stat b.txt { font-family:inherit; font-weight:650; }
.bar { position:relative; height:7px; border-radius:6px; margin:5px 0 2px; background:var(--vk-panel-surface); overflow:hidden; }
.bar i { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:6px; background:var(--vk-ui-peaflower);  }
#guess-box { margin-top:12px; }
#guess-box.off { display:none; }
#guess-msg { min-height:3em; }
#guess-msg.right { opacity:.95; }
#guess-msg.wrong { opacity:.95; }
.fire-row { margin-top:4px; }
#row-mag { margin-top:10px; }
.toggles { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:12px; }
.toggles .check { min-height:24px; font-size:11px; }

/* Stufen-Leiter */
#level-list { margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.lv { display:grid; grid-template-columns:22px 1fr; gap:2px 9px; text-align:left; padding:8px 10px; border-radius:10px;
  border:none; background:transparent; color:inherit; cursor:pointer; font:inherit; opacity:.66; transition:background .2s, opacity .2s; }
.lv:hover { opacity:.9; }
.lv .n { grid-row:span 2; align-self:center; font-size:11px; font-weight:750; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:var(--vk-panel-surface); }
.lv .t { font-size:12px; font-weight:700; }
.lv .t em { font-style:normal; font-weight:500; opacity:.7; margin-left:4px; }
.lv .o { font-size:10.5px; line-height:1.4; opacity:.75; }
.lv.active { opacity:1; background:var(--vk-ui-active-bg); color:var(--vk-ui-active-ink); }
.lv.active .n { background:var(--vk-ui-action); color:#fff; }
.lv.near { opacity:.88; }
.lv-div { display:flex; align-items:center; gap:8px; font-size:9.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; opacity:.45; margin:3px 2px; }
.lv-div::before, .lv-div::after { content:''; flex:1; height:1px; background:currentColor; opacity:.35; }

/* Zitate */
#quote-current { padding:10px 12px; border-radius:10px; background:var(--vk-panel-surface); }
.q-ref { font-size:10.5px; font-weight:700; letter-spacing:.04em; opacity:.6; }
.q-text { font-size:12.5px; line-height:1.55; margin:5px 0 0; }
.q-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px; }
.q-nav button { width:34px; height:28px; padding:0; border:none; border-radius:8px; color:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.panel .q-nav button.ghost { width:34px; flex:0 0 34px; margin:0; padding:0; }
#q-count { white-space:nowrap; }
.q-nav button svg { width:15px; height:15px; }
body.theme-dark .q-nav button { background:rgba(255,255,255,.07); }
body.theme-light .q-nav button { background:rgba(15,23,42,.05); }
#q-count { font-size:11px; opacity:.6; font-variant-numeric:tabular-nums; }

/* Beschriftungen an der Szene */
.tag { position:absolute; padding:4px 8px; border-radius:7px; font:600 11px/1.2 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; white-space:nowrap; transform:translate(-50%,-50%); }
body.theme-dark .tag { background:rgba(10,13,26,.82); color:#e6e8f2; }
body.theme-light .tag { background:rgba(255,255,255,.92); color:#1e293b; }
.tag i { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; vertical-align:middle; background:var(--dot, currentColor); }
.tag.say { font-weight:600; font-style:italic; background:rgba(10,13,26,.78) !important; color:#f3efe6 !important; }

@media(max-width:768px) {
  #panel-path,#panel-levels,#panel-cave,#panel-quotes,#panel-info { width:auto; max-height:54vh; }
  .tag { font-size:9.5px; padding:3px 6px; }
  #stage-desc { min-height:0; }
}
/* Scrollbalken wie heyprof global — für JEDEN Scroll-Container. */
@supports (-moz-appearance: none) {
  * { scrollbar-width: thin; }
  body.theme-light { scrollbar-color: rgba(0,0,0,0.15) transparent; }
  body.theme-dark  { scrollbar-color: rgba(255,255,255,0.15) transparent; }
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
.panel::-webkit-scrollbar-track { margin: 15px 0; }
::-webkit-scrollbar-thumb { border-radius: 4px; }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
body.theme-light ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.15); }
body.theme-light ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.30); }
body.theme-dark  ::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.15); }
body.theme-dark  ::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.30); }
html::-webkit-scrollbar-thumb { background-color: rgba(127,127,160,0.35); }