.ob-skip { position: absolute; left: -999px; top: 8px; z-index: 99; }
.ob-app { display: grid; grid-template-rows: auto auto 1fr; min-height: 100dvh; }
.ob-head { display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: var(--ws-bg2); border-bottom: 1px solid var(--ws-line); flex-wrap: wrap; }
.ob-head h1 { font-size: 20px; } .ob-head .sub { color: var(--ws-faint); font-size: 13px; } .ob-head .spacer { flex: 1; }
.ob-progress { font-size: 13px; color: var(--ws-muted); display: flex; gap: 10px; flex-wrap: wrap; }
.ob-nav { display: flex; gap: 6px; padding: 8px 14px; background: var(--ws-bg2); border-bottom: 1px solid var(--ws-line); overflow-x: auto; }
.ob-nav button { flex: 1; min-width: 92px; display: grid; gap: 2px; justify-items: center; padding: 8px 6px; }
.ob-nav button[aria-current="true"] { border-color: var(--ws-gold); background: rgba(227,179,65,.12); }
.ob-nav .dots { display: flex; gap: 3px; } .ob-nav .dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--ws-line); display: block; } .ob-nav .dots i.on { background: var(--ws-good); } .ob-nav .dots i.visited { background: var(--ws-indigo); }
.ob-main { position: relative; display: block; overflow: hidden; min-width: 0; }
.ob-stage { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; }
.ob-scene { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.ob-hotspots { position: absolute; inset: 0; pointer-events: none; } .ob-hotspots .hotspot { pointer-events: auto; }
.ob-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 0 0 16px 16px; }
.ob-title { position: absolute; left: 3%; top: 4%; max-width: 50%; pointer-events: none; background: rgba(10,14,31,.55); padding: 8px 12px; border-radius: 10px; backdrop-filter: blur(2px); }
.ob-title h2 { font-size: clamp(20px, 3.4vw, 36px); text-shadow: 0 2px 12px rgba(0,0,0,.8); }
.ob-title p { margin: 4px 0 0; color: var(--ws-muted); font-size: clamp(12px, 1.5vw, 15px); text-shadow: 0 1px 8px rgba(0,0,0,.9); }
.hotspot { --lift: 0px; position: absolute; transform: translate(-50%, calc(-50% + var(--lift))); color: #f6ecd2; border: 2px solid #b8893a; border-radius: 8px; padding: 8px 14px 8px 12px; min-height: 44px; min-width: 44px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-size: clamp(12px, 1.4vw, 15px); font-weight: 600; letter-spacing: .01em; background: linear-gradient(180deg, #2b2240 0%, #171229 100%); box-shadow: inset 0 0 0 1px rgba(241,210,122,.45), inset 0 1px 0 rgba(255,255,255,.08), 0 6px 14px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6); text-shadow: 0 1px 0 rgba(0,0,0,.6); }
.hotspot::before, .hotspot::after { content: ""; position: absolute; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f1d27a, #7a5a1e); transform: translateY(-50%); }
.hotspot::before { left: 4px; } .hotspot::after { right: 4px; }
.hotspot:hover { --lift: -3px; border-color: #f1d27a; box-shadow: inset 0 0 0 1px rgba(241,210,122,.8), 0 10px 20px rgba(0,0,0,.6), 0 0 18px rgba(227,179,65,.25); }
.hotspot .ic { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff2cc, #e3b341 60%, #7a5a1e); flex: none; box-shadow: 0 0 8px rgba(227,179,65,.7); }
.hotspot.subject .ic { background: radial-gradient(circle at 35% 35%, #e8eeff, #8fa6ff 60%, #3b4c99); box-shadow: 0 0 8px rgba(143,166,255,.6); }
.hotspot:not(.subject) { color: #1b1400; background: linear-gradient(180deg, #f6d98a 0%, #d9a63f 55%, #b8893a 100%); border-color: #8a6a2e; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.15), 0 6px 14px rgba(0,0,0,.55); text-shadow: 0 1px 0 rgba(255,255,255,.35); border-radius: 8px 22px 22px 8px; padding-right: 18px; margin-top: 6px; }
.hotspot:not(.subject)::before { left: auto; right: 7px; width: 8px; height: 8px; background: #2b2240; box-shadow: inset 0 0 0 2px #8a6a2e; } .hotspot:not(.subject)::after { display: none; }
.hotspot:not(.subject) .ic { background: radial-gradient(circle at 35% 35%, #fff8e0, #ffb547 60%, #a35f10); box-shadow: 0 0 8px rgba(255,181,71,.8); }
.hotspot:not(.subject)::marker { content: none; }
.hotspot.done .ic { background: radial-gradient(circle at 35% 35%, #d8ffe9, #6fe0a6 60%, #1f7a4a); }
.hotspot.locked { border-style: dashed; opacity: .85; background: linear-gradient(180deg, #3a3350, #221c33); color: #d8d0e8; text-shadow: none; }
.hotspot.locked::before { background: #3a3350; }
@media (prefers-reduced-motion: no-preference) { .hotspot { transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } }
.ob-plaque { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); width: min(92%, 760px); background: rgba(10,14,31,.85); border: 1px solid var(--ws-line); border-radius: 10px; padding: 8px 14px; font-size: clamp(12px, 1.4vw, 14px); color: var(--ws-muted); text-align: center; pointer-events: none; }
.ob-drawer { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: 1fr min(640px, 100%); } .ob-drawer[hidden] { display: none; }
.ob-drawer .scrim { background: rgba(4,6,16,.6); } .ob-drawer .panel { background: var(--ws-panel); border-left: 1px solid var(--ws-line); overflow: auto; padding: 18px; }
.ob-sheet-list { display: grid; gap: 8px; }
.ob-help { display: grid; gap: 6px; font-size: 14px; color: var(--ws-muted); }
@media (max-width: 760px) { .ob-drawer { grid-template-columns: 1fr; } .ob-drawer .scrim { display: none; } .ob-scene { aspect-ratio: 4 / 3; } .ob-title { position: static; max-width: none; margin: 0; border-radius: 0; background: rgba(10,14,31,.6); } .ob-scene .ob-title { position: absolute; left: 0; right: 0; top: 0; } .ob-plaque { position: static; transform: none; width: auto; margin: 8px 12px 0; } .ob-hotspots { position: static; display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 12px 16px; } .ob-hotspots .hotspot { position: relative; transform: translateY(var(--lift)); left: auto !important; top: auto !important; margin-top: 0; } .ob-head h1 { font-size: 17px; } .ob-nav button { min-width: 72px; font-size: 12px; } }
@media (prefers-reduced-motion: no-preference) { .ob-scene svg { animation: ob-fade .25s ease-out; } @keyframes ob-fade { from { opacity: .4; } to { opacity: 1; } } }