#tour-ui{position:fixed;inset:0;z-index:8;pointer-events:none}#tour-ui[hidden]{display:none}.tour-card{position:absolute;right:28px;top:100px;width:310px;padding:24px;border:1px solid #698b8044;border-radius:22px;background:#0a2929eb;color:#edf2dc;box-shadow:0 20px 70px #04161444;pointer-events:auto}.tour-card>span{font-size:11px;color:#badc95}.tour-card h2{font-size:25px;margin:12px 0}.tour-card p{font-size:14px;line-height:1.9;color:#cedad0}.tour-card small{display:block;font-size:11px;line-height:1.9;margin-top:16px;color:#a4bcb2}.tour-card button{width:100%;margin-top:8px}#tour-enter{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);pointer-events:auto;white-space:nowrap}#tour-stick{position:absolute;bottom:32px;left:34px;width:112px;height:112px;border:1px solid #deedb877;background:#183e3c88;border-radius:50%;pointer-events:auto;touch-action:none;display:grid;place-items:center}#tour-knob{display:block;width:44px;height:44px;border-radius:50%;background:#dae6ac;border:6px solid #e5edc988;box-shadow:0 4px 20px #0004}.tour-hint{position:absolute;bottom:48px;right:35px;font-size:12px;color:#e5eedc;text-shadow:0 1px 6px #000}#poster-dialog{width:min(1100px,94vw);max-height:92dvh;padding:24px;border:1px solid #496f64;border-radius:20px;background:#102e30;color:#f1efd9}#poster-dialog::backdrop{background:#02191bd9}#poster-close{position:absolute;left:18px;top:12px;font-size:28px}#poster-tabs{display:flex;gap:8px;margin:16px 0;flex-wrap:wrap}#poster-tabs button,#poster-close{background:#254849;color:#f0e4bc;border:1px solid #6b8b7c;border-radius:9px;padding:7px 14px;font-family:inherit;cursor:pointer}.poster-scroll{overflow:auto;background:#061e24;border-radius:12px}.poster-scroll img{display:block;width:100%;min-width:700px;height:auto}#campus-rotate{display:none}.top-actions{flex-wrap:wrap}
@media(max-height:550px) and (orientation:landscape){.tour-card{right:16px;top:76px;width:250px;padding:15px}.tour-card h2{font-size:20px;margin:6px 0}.tour-card p{font-size:11px;margin:6px 0}.tour-card small{font-size:10px;margin-top:8px}.tour-card>span{font-size:9px}#tour-stick{width:90px;height:90px;bottom:20px;left:20px}#tour-enter{bottom:20px;font-size:12px}.tour-hint{display:none}.top-actions .text-button{font-size:11px;padding:5px 8px}}
@media(max-width:600px) and (orientation:portrait){#campus-rotate{display:flex;position:fixed;inset:0;z-index:1000;background:#082a2bf5;color:#ecf1d5;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#campus-rotate b{font-size:64px;color:#ceec91}#campus-rotate p{line-height:2}}

.tour-card .secondary{background:#d9eab0;color:#163d37;border:0;font-weight:700}.tour-card .secondary:hover{background:#ecf6d4}

/* ── smart door to a portal station: iris over the hall, a lens-focusing loader, then the station */
#station-layer{position:fixed;inset:0;z-index:60;background:radial-gradient(circle at 50% 50%,#0f3f39 0%,#041a18 70%);clip-path:circle(0% at var(--at,50% 50%))}
#station-layer[hidden]{display:none}
#station-layer iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .45s;background:#e7eee9}
#station-layer.ready iframe{opacity:1}
.st-load{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;color:#e9f4d2;text-align:center;transition:opacity .4s}
#station-layer.ready .st-load{opacity:0;pointer-events:none}
.st-load i{width:128px;height:128px;border-radius:50%;border:3px solid #c4ed72;box-shadow:inset 0 0 46px #c4ed7255,0 0 60px #c4ed7222;animation:st-focus 1.6s ease-in-out infinite}
.st-load b{font-size:24px;font-weight:700}.st-load span{font-size:15px;color:#b7cfc0}
@keyframes st-focus{0%,100%{filter:blur(7px);transform:scale(.9)}50%{filter:blur(0);transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.st-load i{animation:none}}

/* ── destinations bar: one tap walks to a station or a board (made for the smart board, fine with a mouse) */
#tour-dest{position:absolute;top:96px;left:50%;transform:translateX(-50%);display:flex;gap:8px;pointer-events:auto;padding:6px;border-radius:999px;background:#0a2929d9;border:1px solid #698b8044;box-shadow:0 12px 40px #04161444;backdrop-filter:blur(10px)}
#tour-dest button{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;background:transparent;color:#e7efd6;font:700 14px Cairo,Arial,sans-serif;white-space:nowrap;transition:background .15s,color .15s}
#tour-dest button:hover,#tour-dest button:focus-visible{background:#c4ed72;color:#082c29}
#tour-dest .icon{width:20px;height:20px}
/* ── classroom display (settings → وضع العرض الصفي): big touch targets, tap-to-walk instead of the joystick */
body.classroom #tour-dest{top:104px;gap:10px;padding:8px}
body.classroom #tour-dest button{min-height:68px;padding:0 24px;font-size:20px}
body.classroom #tour-dest .icon{width:28px;height:28px}
body.classroom #tour-enter{min-height:72px;font-size:22px;padding:0 34px}
body.classroom #tour-stick{display:none}
body.classroom .tour-hint{font-size:17px;bottom:36px}
body.classroom .tour-card{width:340px}
body.classroom .tour-card p{font-size:16px}
@media(max-height:550px) and (orientation:landscape){#tour-dest{top:70px}#tour-dest button{min-height:34px;font-size:11px;padding:0 10px}#tour-dest span{display:none}}
/* ── v2 controls: no joystick for a mouse; on a touch screen it floats under the left thumb, the enter button sits under the right thumb */
@media (hover:hover) and (pointer:fine){#tour-stick{display:none}}
#tour-stick.held{background:#183e3caa;border-color:#e6f3b9aa}
#tour-stick.floating{position:fixed;bottom:auto;opacity:.9}
@media (pointer:coarse){body:not(.classroom) #tour-enter{left:auto;right:22px;bottom:26px;transform:none;max-width:46vw;min-height:58px;white-space:normal;line-height:1.3;border-radius:20px}body:not(.classroom) .tour-hint{display:none}body:not(.classroom) .tour-card{display:none}}
/* ── v2 gear: the note after wearing, the enter button while the gear is still on the stand */
#gear-note{position:absolute;left:50%;bottom:104px;transform:translateX(-50%);max-width:min(560px,86vw);padding:12px 20px;border-radius:16px;background:#0a2929eb;color:#edf2dc;font-size:15px;line-height:1.6;text-align:center;box-shadow:0 14px 40px #04161455;pointer-events:none}#gear-note[hidden]{display:none}
#tour-enter.needs-gear{background:#f3e3b6;color:#3d2b06}
@media (pointer:coarse){body:not(.classroom) #gear-note{bottom:auto;top:84px;font-size:13px}}
body.classroom #gear-note{font-size:20px;bottom:120px}
/* ── v2 mouse look: an aim dot in the middle while the cursor is hidden; the hint says how to get the cursor back */
#tour-aim{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#f4f7e8;box-shadow:0 0 0 2px #0a292988;display:none}
body.mouse-look #tour-aim{display:block}body.mouse-look #tour-dest,body.mouse-look .tour-card{opacity:.55}
.tour-hint b{font-weight:400}.tour-hint .hint-look,.tour-hint .hint-touch{display:none}body.mouse-look .tour-hint .hint-free{display:none}body.mouse-look .tour-hint .hint-look{display:inline}
@media (pointer:coarse){.tour-hint .hint-free{display:none}.tour-hint .hint-touch{display:inline}}body.classroom .tour-hint .hint-free{display:none}body.classroom .tour-hint .hint-touch{display:inline}
/* ── v2 smart board: the movement pad (one finger, press and hold), its switch, and board mode */
#tour-pad{position:absolute;right:26px;bottom:26px;direction:ltr;display:none;grid-template-columns:repeat(3,76px);grid-auto-rows:76px;gap:8px;padding:12px;border-radius:26px;background:#0a2929d9;border:1px solid #698b8055;box-shadow:0 18px 50px #04161455;pointer-events:auto;touch-action:none;user-select:none;-webkit-user-select:none}
#tour-pad.left{right:auto;left:26px}body.board #tour-pad{display:grid}
#tour-pad button{display:grid;place-items:center;border:0;border-radius:18px;background:#18403de6;color:#edf2dc;cursor:pointer;touch-action:none;transition:background .12s,transform .12s}
#tour-pad button svg{width:38px;height:38px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
#tour-pad button[data-hold='w'],#tour-pad button[data-hold='s'],#tour-pad button[data-hold='a'],#tour-pad button[data-hold='d']{background:#c4ed72;color:#082c29}
#tour-pad button.held{transform:scale(.93);background:#f3e3b6;color:#3d2b06}#tour-pad button[data-level]{background:#0f3433;color:#bfe08a}
#tour-pad .pad-swap{position:absolute;top:-22px;left:50%;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:#e6c37c;color:#3d2b06}#tour-pad .pad-swap svg{width:24px;height:24px}
#pad-toggle{position:absolute;left:32px;top:96px;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:22px;background:#0a2929d9;color:#edf2dc;font:inherit;font-size:14px;cursor:pointer;pointer-events:auto}
#pad-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}#pad-toggle[aria-pressed=true]{background:#c4ed72;color:#082c29}
body.board #tour-stick,body.board .tour-hint{display:none}
body.classroom #pad-toggle{min-height:64px;font-size:18px;padding:0 22px}
@media(max-height:550px),(max-width:600px){#tour-pad{grid-template-columns:repeat(3,56px);grid-auto-rows:56px;gap:6px;bottom:16px}#tour-pad button svg{width:28px;height:28px}#pad-toggle{top:76px;left:16px;font-size:12px;min-height:36px}}