/* The Innovation Alliance — Virtual Office (3D scene + OS-style shell) */
:root{
    --bg:#0a0e1a; --amber:#d4a843; --amber-bright:#f0d060; --amber-deep:#b8942d; --mint:#7dd3b0;
    --text:#f0f0f5; --soft:#a8a8b8; --mute:#6b6b7d;
    --glass:rgba(13,17,31,.8); --line:rgba(255,255,255,.1);
    --bar-h:40px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html,body{ height:100%; }
body.os{
    font-family:'Prompt','Inter',sans-serif; color:var(--text); background:#06080f;
    overflow:hidden; -webkit-font-smoothing:antialiased; overscroll-behavior:none;
}
.os a{ color:inherit; text-decoration:none; }
.os button{ font:inherit; color:inherit; }

.os-bg{
    position:fixed; inset:0;
    background:
        radial-gradient(ellipse 62% 50% at 50% 46%, #223058 0%, #121935 46%, rgba(6,8,15,0) 78%),
        linear-gradient(180deg, #0a0e1c 0%, #06080f 100%);
}
#os-scene{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; outline:none; opacity:0; transition:opacity 1.1s ease; }
#os-scene.is-grab{ cursor:grabbing; }
#os-scene.is-point{ cursor:pointer; }
.os-ready #os-scene{ opacity:1; }

/* ---------- Hotspot pins (projected from 3D) ---------- */
#os-pins{ position:fixed; inset:0; pointer-events:none; z-index:5; overflow:hidden; opacity:0; transition:opacity .8s ease 1.2s; }
.os-ready #os-pins{ opacity:1; }
.os-pin{ position:absolute; left:0; top:0; width:0; height:0; border:0; background:none; cursor:pointer; pointer-events:auto; will-change:transform; }
.os-pin::before{
    content:''; position:absolute; left:-4px; top:-4px; width:8px; height:8px; border-radius:50%;
    background:var(--amber-bright); box-shadow:0 0 0 0 rgba(240,208,96,.55); animation:osPulse 2.4s ease-out infinite;
}
.os-pin::after{ content:''; position:absolute; left:-.5px; bottom:0; width:1px; height:18px; background:linear-gradient(180deg, rgba(240,208,96,.9), rgba(240,208,96,.15)); }
.os-pin-in{
    position:absolute; left:0; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; white-space:nowrap;
    padding:6px 14px 6px 6px; border-radius:999px; background:rgba(11,15,28,.84); border:1px solid rgba(212,168,67,.42);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12.5px; font-weight:500; letter-spacing:.1px;
    box-shadow:0 8px 22px rgba(0,0,0,.4); transition:background .2s, color .2s, transform .2s, border-color .2s;
}
.os-pin-in i{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--amber-bright),var(--amber-deep)); color:#1a1405; font-size:11.5px; }
.os-pin:hover .os-pin-in, .os-pin.is-hot .os-pin-in, .os-pin:focus-visible .os-pin-in{ background:var(--amber); color:#14100a; border-color:var(--amber-bright); transform:translateX(-50%) translateY(-3px); }
.os-pin:hover .os-pin-in i, .os-pin.is-hot .os-pin-in i, .os-pin:focus-visible .os-pin-in i{ background:#14100a; color:var(--amber-bright); }
.os-pin:focus-visible{ outline:none; }
@keyframes osPulse{ 0%{ box-shadow:0 0 0 0 rgba(240,208,96,.55); } 100%{ box-shadow:0 0 0 14px rgba(240,208,96,0); } }

/* ---------- Top bar ---------- */
.os-bar{
    position:fixed; left:0; right:0; top:0; height:var(--bar-h); z-index:40; display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:0 16px; background:rgba(9,12,23,.72); -webkit-backdrop-filter:blur(16px) saturate(140%); backdrop-filter:blur(16px) saturate(140%);
    border-bottom:1px solid var(--line); font-size:12.5px;
}
.os-brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.os-brand svg{ width:22px; height:22px; flex:none; }
.os-brand b{ font-weight:600; font-size:13.5px; letter-spacing:.1px; white-space:nowrap; }
.os-brand b span{ color:var(--amber); }
.os-chip{ font-size:10.5px; letter-spacing:.6px; text-transform:uppercase; color:var(--amber); border:1px solid rgba(212,168,67,.4); padding:2px 8px; border-radius:999px; white-space:nowrap; }
.os-bar-r{ display:flex; align-items:center; gap:14px; color:var(--soft); white-space:nowrap; }
.os-clock{ display:flex; gap:12px; font-family:'Inter',sans-serif; font-variant-numeric:tabular-nums; font-size:12px; }
.os-clock span b{ color:var(--text); font-weight:600; margin-left:5px; }
.os-lang{ display:flex; border:1px solid var(--line); border-radius:7px; overflow:hidden; font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; }
.os-lang a, .os-lang span{ padding:3px 9px; }
.os-lang span{ background:var(--amber); color:#14100a; }
.os-lang a:hover{ background:rgba(255,255,255,.08); color:var(--text); }
.os-classic{ display:flex; align-items:center; gap:7px; padding:4px 11px; border-radius:7px; border:1px solid var(--line); color:var(--text); transition:background .2s, border-color .2s; }
.os-classic:hover{ background:rgba(255,255,255,.08); border-color:rgba(212,168,67,.5); }
.os-classic i{ font-size:11px; color:var(--amber); }

/* ---------- Hero copy ---------- */
.os-hero{
    position:fixed; left:32px; top:calc(var(--bar-h) + 30px); z-index:6; max-width:400px; pointer-events:none;
    opacity:0; transform:translateY(10px); transition:opacity .7s ease .5s, transform .7s ease .5s;
}
.os-ready .os-hero{ opacity:1; transform:none; }
.os-has-win .os-hero{ opacity:0; transform:translateY(-8px); transition-delay:0s; }
.os-hero > *{ pointer-events:auto; }
.os-has-win .os-hero > *{ pointer-events:none; }
.os-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:'Inter',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.8px; color:var(--amber); margin-bottom:12px; }
.os-eyebrow::before{ content:''; width:22px; height:1px; background:var(--amber); }
.os-hero h1{ font-size:clamp(25px,2.5vw,36px); line-height:1.22; font-weight:700; letter-spacing:-.2px; text-shadow:0 2px 24px rgba(0,0,0,.6); }
.os-hero h1 b{ display:block; font-weight:700; background:linear-gradient(100deg,var(--amber-bright),var(--amber) 60%,#e9d9a4); -webkit-background-clip:text; background-clip:text; color:transparent; }
.os-lead{ margin-top:12px; font-size:14px; line-height:1.8; color:#d5d7e2; text-shadow:0 2px 14px rgba(0,0,0,.7); }
.os-lead span{ color:var(--amber); margin:0 4px; }
.os-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.os-btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:10px; border:1px solid rgba(255,255,255,.18); background:rgba(11,15,28,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:13.5px; font-weight:500; cursor:pointer; transition:transform .2s, background .2s, border-color .2s; }
.os-btn:hover{ transform:translateY(-2px); border-color:rgba(212,168,67,.6); }
.os-btn.is-main{ background:linear-gradient(135deg,var(--amber-bright),var(--amber)); border-color:transparent; color:#14100a; font-weight:600; }
.os-hint{ margin-top:16px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--soft); }
.os-hint i{ color:var(--amber); }
.os-hint-m{ display:none; }
@media (hover:none), (max-width:779px){ .os-hint-d{ display:none; } .os-hint-m{ display:inline; } }

/* ---------- Dock ---------- */
.os-dock{
    position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(20px); z-index:40; display:flex; gap:6px; padding:8px;
    background:rgba(11,14,26,.74); -webkit-backdrop-filter:blur(18px) saturate(150%); backdrop-filter:blur(18px) saturate(150%);
    border:1px solid var(--line); border-radius:20px; box-shadow:0 18px 50px rgba(0,0,0,.5);
    opacity:0; transition:opacity .6s ease .7s, transform .6s cubic-bezier(.2,.8,.2,1) .7s;
}
.os-ready .os-dock, .os-nogl .os-dock{ opacity:1; transform:translateX(-50%); }
.os-app{ position:relative; width:74px; padding:8px 4px 9px; display:flex; flex-direction:column; align-items:center; gap:6px; border-radius:13px; cursor:pointer; transition:background .2s, transform .2s; }
.os-app i{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-size:15px; color:var(--amber-bright); background:linear-gradient(160deg,#242c4a,#141a30); border:1px solid rgba(255,255,255,.09); transition:transform .25s cubic-bezier(.2,.8,.2,1), background .2s, color .2s; }
.os-app span{ font-size:10.5px; line-height:1.2; color:var(--soft); text-align:center; white-space:nowrap; }
.os-app:hover{ background:rgba(255,255,255,.06); }
.os-app:hover i{ transform:translateY(-4px) scale(1.06); }
.os-app:hover span{ color:var(--text); }
.os-app.is-open i{ background:linear-gradient(135deg,var(--amber-bright),var(--amber-deep)); color:#14100a; border-color:transparent; }
.os-app.is-open::after{ content:''; position:absolute; bottom:2px; left:50%; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--amber-bright); }
.os-app:focus-visible{ outline:2px solid var(--amber); outline-offset:1px; }

/* ---------- Footer notes ---------- */
.os-note{ position:fixed; left:18px; bottom:18px; z-index:6; display:flex; align-items:center; gap:7px; font-size:11px; color:var(--mute); max-width:calc(50vw - 270px); line-height:1.5; }
.os-note i{ color:var(--soft); }
.os-tools{ position:fixed; right:18px; bottom:18px; z-index:6; display:flex; gap:8px; }
.os-tool{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border-radius:10px; border:1px solid var(--line); background:rgba(11,14,26,.7); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); font-size:12px; color:var(--soft); cursor:pointer; transition:color .2s, border-color .2s; }
.os-tool:hover{ color:var(--text); border-color:rgba(212,168,67,.5); }
.os-nogl .os-tools, .os-nogl #os-pins{ display:none; }

/* ---------- Windows ---------- */
#os-wins{ position:fixed; inset:0; z-index:20; pointer-events:none; }
.os-win{
    position:absolute; display:flex; flex-direction:column; min-width:340px; min-height:300px; pointer-events:auto;
    background:#0c101c; border:1px solid rgba(255,255,255,.12); border-radius:14px; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); animation:osWinIn .32s cubic-bezier(.2,.9,.25,1) both; outline:none;
}
.os-win.is-focus{ border-color:rgba(212,168,67,.45); box-shadow:0 34px 90px rgba(0,0,0,.66), 0 0 0 1px rgba(0,0,0,.4), 0 0 40px rgba(212,168,67,.08); }
.os-win.is-min{ display:none; }
.os-win.is-max{ left:8px !important; top:calc(var(--bar-h) + 8px) !important; width:calc(100vw - 16px) !important; height:calc(100vh - var(--bar-h) - 16px) !important; }
.os-win.is-closing{ animation:osWinOut .2s ease both; }
@keyframes osWinIn{ from{ opacity:0; transform:translateY(18px) scale(.96); } to{ opacity:1; transform:none; } }
@keyframes osWinOut{ to{ opacity:0; transform:translateY(10px) scale(.97); } }
.os-win-bar{ flex:none; height:42px; display:flex; align-items:center; gap:12px; padding:0 12px 0 14px; background:linear-gradient(180deg,#1a2038,#141930); border-bottom:1px solid var(--line); cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; }
.os-dragging .os-win-bar{ cursor:grabbing; }
.os-win-dots{ display:flex; gap:8px; flex:none; }
.os-dot{ width:13px; height:13px; border-radius:50%; border:0; cursor:pointer; position:relative; background:#3a4160; transition:filter .15s; }
.os-win.is-focus .os-dot-close{ background:#e2705c; }
.os-win.is-focus .os-dot-min{ background:var(--amber); }
.os-win.is-focus .os-dot-max{ background:var(--mint); }
.os-dot:hover{ filter:brightness(1.25); }
.os-dot::before{ content:''; position:absolute; inset:-6px; }
.os-dot:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.os-win-title{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:9px; font-size:13px; font-weight:500; color:var(--soft); }
.os-win.is-focus .os-win-title{ color:var(--text); }
.os-win-title i{ color:var(--amber); font-size:12px; }
.os-win-title span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.os-win-full{ flex:none; min-width:60px; display:inline-flex; align-items:center; justify-content:flex-end; gap:6px; font-size:11.5px; color:var(--soft); white-space:nowrap; }
a.os-win-full:hover{ color:var(--amber-bright); }
.os-win-full i{ font-size:10px; }
.os-win-body{ position:relative; flex:1; min-height:0; background:#0c101c; }
.os-win-body iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#0c101c; opacity:0; transition:opacity .35s ease; }
.os-win.is-loaded iframe{ opacity:1; }
.os-dragging iframe{ pointer-events:none; }
.os-win-load{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; font-size:12.5px; color:var(--mute); }
.os-win-load span{ width:26px; height:26px; border-radius:50%; border:2px solid rgba(212,168,67,.25); border-top-color:var(--amber); animation:osSpin .8s linear infinite; }
.os-win.is-loaded .os-win-load{ display:none; }
@keyframes osSpin{ to{ transform:rotate(360deg); } }
.os-win-grip{ position:absolute; right:0; bottom:0; width:20px; height:20px; cursor:nwse-resize; touch-action:none; z-index:2; }
.os-win-grip::after{ content:''; position:absolute; right:5px; bottom:5px; width:8px; height:8px; border-right:2px solid rgba(255,255,255,.28); border-bottom:2px solid rgba(255,255,255,.28); border-radius:0 0 3px 0; }
.os-win.is-max .os-win-grip{ display:none; }

/* ---------- Contact app ---------- */
.os-contact{ position:absolute; inset:0; overflow:auto; padding:22px 24px 26px; }
.os-contact-info{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:11px 14px; margin-bottom:18px; border-radius:10px; background:rgba(212,168,67,.08); border:1px solid rgba(212,168,67,.25); font-size:12.5px; color:var(--soft); }
.os-contact-info strong{ color:var(--amber-bright); font-weight:600; }
.os-fg{ margin-bottom:13px; }
.os-fg label{ display:block; font-size:12px; color:var(--soft); margin-bottom:6px; }
.os-fg input, .os-fg select, .os-fg textarea{ width:100%; padding:10px 12px; border-radius:9px; border:1px solid rgba(255,255,255,.12); background:#141826; color:var(--text); font:inherit; font-size:14px; transition:border-color .2s, box-shadow .2s; }
.os-fg textarea{ resize:vertical; min-height:92px; }
.os-fg input:focus, .os-fg select:focus, .os-fg textarea:focus{ outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(212,168,67,.18); }
.os-fg input::placeholder, .os-fg textarea::placeholder{ color:var(--mute); }
.os-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.os-submit{ width:100%; margin-top:6px; padding:12px; border:0; border-radius:10px; background:linear-gradient(135deg,var(--amber-bright),var(--amber)); color:#14100a; font-weight:600; font-size:14.5px; cursor:pointer; transition:transform .2s, filter .2s; }
.os-submit:hover{ transform:translateY(-1px); filter:brightness(1.05); }
.os-submit:disabled{ opacity:.6; cursor:default; transform:none; }
.os-fine{ margin-top:12px; font-size:11px; line-height:1.6; color:var(--mute); text-align:center; }
.os-fine a{ color:var(--soft); text-decoration:underline; }
.os-done{ text-align:center; padding:46px 10px; }
.os-done i{ font-size:44px; color:var(--mint); margin-bottom:16px; }
.os-done h3{ font-size:19px; font-weight:600; margin-bottom:8px; }
.os-done p{ font-size:13.5px; line-height:1.8; color:var(--soft); }
.os-done p b{ color:var(--text); font-weight:500; word-break:break-all; }

/* ---------- Boot screen ---------- */
#os-boot{ position:fixed; inset:0; z-index:90; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; background:#06080f; transition:opacity .7s ease, visibility .7s; }
.os-ready #os-boot, .os-nogl #os-boot{ opacity:0; visibility:hidden; pointer-events:none; }
#os-boot svg{ width:64px; height:64px; }
#os-boot p{ font-size:12.5px; letter-spacing:.4px; color:var(--soft); }
.os-boot-bar{ width:180px; height:2px; border-radius:2px; background:rgba(255,255,255,.1); overflow:hidden; }
.os-boot-bar::after{ content:''; display:block; width:40%; height:100%; background:linear-gradient(90deg,transparent,var(--amber-bright),transparent); animation:osBoot 1.1s ease-in-out infinite; }
@keyframes osBoot{ from{ transform:translateX(-100%); } to{ transform:translateX(350%); } }

/* ---------- No-WebGL fallback ---------- */
.os-nogl .os-bg{ background:linear-gradient(180deg, rgba(8,11,21,.72), rgba(6,8,15,.94)), url('/images/photo/manchester-dusk.webp') center/cover no-repeat; }
.os-nogl #os-scene{ display:none; }
.os-nogl .os-hero{ opacity:1; transform:none; }
.os-nogl .os-hint{ display:none; }
.os-noscript{ position:fixed; inset:auto 0 0 0; z-index:95; padding:16px; background:#0c101c; border-top:1px solid var(--line); text-align:center; font-size:13px; }
.os-noscript a{ color:var(--amber-bright); text-decoration:underline; margin:0 6px; }

@media (max-width:1280px){ .os-hero{ max-width:330px; } }
@media (max-width:1000px) and (min-width:780px){ .os-lead, .os-hint{ display:none; } }

/* ---------- Tablet ---------- */
@media (max-width:1100px){
    .os-clock span:first-child{ display:none; }
    .os-note{ display:none; }
}

/* ---------- Mobile ---------- */
@media (max-width:779px){
    :root{ --bar-h:44px; }
    .os-bar{ padding:0 12px; gap:10px; }
    .os-brand b{ font-size:13px; }
    .os-chip, .os-clock, .os-classic span{ display:none; }
    .os-classic{ padding:6px 9px; }
    .os-hero{ left:16px; right:16px; top:calc(var(--bar-h) + 16px); max-width:none; }
    .os-eyebrow{ font-size:10px; margin-bottom:8px; }
    .os-hero h1{ font-size:23px; }
    .os-lead{ font-size:12.5px; margin-top:8px; line-height:1.7; }
    .os-cta{ margin-top:12px; }
    .os-btn{ padding:8px 14px; font-size:12.5px; }
    .os-hint{ margin-top:10px; font-size:11px; }
    .os-dock{ left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom, 0px)); transform:translateY(20px); justify-content:space-between; gap:0; padding:6px 4px; border-radius:18px; }
    .os-ready .os-dock, .os-nogl .os-dock{ transform:none; }
    .os-app{ width:auto; flex:1; min-width:0; padding:6px 2px 8px; }
    .os-app i{ width:36px; height:36px; }
    .os-app span{ font-size:9.5px; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
    .os-tools{ right:10px; bottom:calc(92px + env(safe-area-inset-bottom, 0px)); }
    .os-tool span{ display:none; }
    .os-tool{ width:36px; padding:0; justify-content:center; }
    .os-pin-in{ padding:5px; gap:0; font-size:0; }
    .os-pin-in span{ display:none; }
    .os-win{ left:0 !important; top:0 !important; width:100vw !important; height:100% !important; min-width:0; border-radius:0; border:0; z-index:60 !important; }
    #os-wins{ z-index:60; }
    .os-win-bar{ height:48px; cursor:default; }
    .os-dot-min, .os-dot-max, .os-win-grip{ display:none; }
    .os-dot{ width:28px; height:28px; background:rgba(255,255,255,.1) !important; }
    .os-dot-close::after{ content:'\00d7'; position:absolute; inset:0; display:grid; place-items:center; font-size:19px; line-height:1; color:#fff; }
    .os-win-title{ justify-content:flex-start; font-size:14px; }
    .os-row{ grid-template-columns:1fr; gap:0; }
    .os-contact{ padding:18px 16px 28px; }
}
@media (max-height:620px) and (min-width:780px){
    .os-hint, .os-lead{ display:none; }
}
@media (prefers-reduced-motion: reduce){
    .os-pin::before, .os-boot-bar::after, .os-win-load span{ animation:none; }
    .os-win, .os-win.is-closing{ animation:none; }
    #os-scene, .os-hero, .os-dock, #os-pins{ transition:none; }
}

/* ===================== Game layer ===================== */
.os-btn i{ font-size:11px; }
.os-game .os-hero{ opacity:0; transform:translateY(-8px); transition-delay:0s; }
.os-game .os-hero > *{ pointer-events:none; }

/* quest panel */
.os-quest{
    position:fixed; left:24px; top:calc(var(--bar-h) + 20px); z-index:7; width:290px; padding:14px 14px 12px;
    border-radius:16px; background:rgba(11,14,26,.8); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
    border:1px solid var(--line); box-shadow:0 16px 40px rgba(0,0,0,.4);
    opacity:0; transform:translateX(-14px); pointer-events:none; transition:opacity .45s ease .15s, transform .45s ease .15s;
}
.os-game .os-quest{ opacity:1; transform:none; pointer-events:auto; }
.os-quest-h{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:10px; background:none; border:0; padding:0; font-size:13px; font-weight:600; text-align:left; cursor:default; }
.os-quest-h span{ display:flex; align-items:center; gap:9px; }
.os-quest-h span i{ color:var(--amber); font-size:12px; }
.os-quest-h b{ font-family:'Inter',sans-serif; font-size:13px; color:var(--amber-bright); font-variant-numeric:tabular-nums; }
.os-quest-bar{ height:4px; margin:11px 0 10px; border-radius:4px; background:rgba(255,255,255,.1); overflow:hidden; }
.os-quest-bar i{ display:block; width:0; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--amber),var(--amber-bright)); transition:width .6s cubic-bezier(.2,.8,.2,1); }
.os-q-list{ list-style:none; display:grid; gap:3px; }
.os-q-item{ width:100%; display:flex; align-items:center; gap:10px; padding:6px 8px; border:0; border-radius:9px; background:transparent; font-size:12.5px; color:var(--soft); text-align:left; cursor:pointer; transition:background .2s, color .2s; }
.os-q-item:hover, .os-q-item:focus-visible{ background:rgba(255,255,255,.07); color:var(--text); outline:none; }
.os-q-item i{ flex:none; width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:11px; color:var(--amber); background:rgba(212,168,67,.12); }
.os-q-item.is-done{ color:var(--text); }
.os-q-item.is-done i{ color:#0c1a14; background:var(--mint); }
.os-q-item.is-done span{ text-decoration:line-through; text-decoration-color:rgba(125,211,176,.7); text-decoration-thickness:1.5px; }
.os-quest-tip{ margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:11px; line-height:1.9; color:var(--mute); }
.os kbd{ display:inline-block; min-width:18px; padding:0 4px; margin-right:2px; border-radius:4px; border:1px solid rgba(255,255,255,.18); border-bottom-width:2px; font-family:'Inter',sans-serif; font-size:10px; line-height:16px; text-align:center; color:var(--text); background:rgba(255,255,255,.05); }

/* done stops on the 3D labels */
.os-pin.is-done .os-pin-in{ border-color:rgba(125,211,176,.55); }
.os-pin.is-done .os-pin-in i{ background:var(--mint); color:#0c1a14; }
.os-pin.is-done::before{ background:var(--mint); animation:none; }

/* "press E" bubble over the visitor */
.os-prompt{ position:absolute; left:0; top:0; width:0; height:0; border:0; background:none; cursor:pointer; pointer-events:auto; will-change:transform; z-index:2; }
.os-prompt[hidden]{ display:none; }
.os-prompt-in{
    position:absolute; left:0; bottom:6px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; white-space:nowrap;
    padding:6px 13px 6px 6px; border-radius:999px; background:var(--amber); color:#14100a; font-size:12.5px; font-weight:600;
    box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 4px rgba(240,208,96,.18); animation:osBob 1.6s ease-in-out infinite;
}
.os-prompt-in::after{ content:''; position:absolute; left:50%; bottom:-5px; margin-left:-5px; border:5px solid transparent; border-bottom:0; border-top-color:var(--amber); }
.os-prompt-k{ min-width:24px; height:24px; padding:0 6px; border-radius:7px; display:grid; place-items:center; background:#14100a; color:var(--amber-bright); font-family:'Inter',sans-serif; font-size:12px; font-weight:700; }
@keyframes osBob{ 0%,100%{ transform:translateX(-50%) translateY(0); } 50%{ transform:translateX(-50%) translateY(-4px); } }

/* touch joystick */
.os-joy{ display:none; position:fixed; left:18px; bottom:calc(98px + env(safe-area-inset-bottom, 0px)); z-index:8; width:108px; height:108px; border-radius:50%; background:rgba(11,14,26,.55); border:1px solid rgba(255,255,255,.16); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); touch-action:none; }
.os-joy::before{ content:''; position:absolute; inset:22px; border-radius:50%; border:1px dashed rgba(255,255,255,.14); }
.os-joy span{ position:absolute; left:50%; top:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:linear-gradient(135deg,var(--amber-bright),var(--amber-deep)); box-shadow:0 6px 18px rgba(0,0,0,.45); }
@media (hover:none){ .os-ready .os-joy{ display:block; } }

/* quest complete */
.os-finish{ position:fixed; inset:0; z-index:85; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(4,6,12,.5); opacity:0; transition:opacity .25s ease; }
.os-finish[hidden]{ display:none; }
.os-finish.is-on{ opacity:1; }
.os-finish-card{ width:100%; max-width:430px; padding:30px 28px 26px; border-radius:20px; text-align:center; background:linear-gradient(180deg,#171d36,#0e1222); border:1px solid rgba(212,168,67,.4); box-shadow:0 30px 90px rgba(0,0,0,.6), 0 0 60px rgba(212,168,67,.12); transform:translateY(12px) scale(.97); transition:transform .35s cubic-bezier(.2,.9,.25,1); }
.os-finish.is-on .os-finish-card{ transform:none; }
.os-finish-badge{ width:64px; height:64px; margin:0 auto 16px; border-radius:50%; display:grid; place-items:center; font-size:26px; color:#14100a; background:linear-gradient(135deg,var(--amber-bright),var(--amber-deep)); box-shadow:0 0 0 8px rgba(212,168,67,.14); }
.os-finish h2{ font-size:21px; font-weight:700; margin-bottom:10px; }
.os-finish p{ font-size:14px; line-height:1.85; color:#cfd2df; }
.os-finish-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:20px; }

@media (max-width:779px){
    .os-quest{ left:12px; top:calc(var(--bar-h) + 10px); width:auto; max-width:calc(100vw - 24px); padding:9px 12px; border-radius:13px; }
    .os-quest-h{ cursor:pointer; gap:14px; font-size:12.5px; }
    .os-quest-h::after{ content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:10px; color:var(--soft); transition:transform .2s; }
    .os-quest.is-open .os-quest-h::after{ transform:rotate(180deg); }
    .os-quest-bar{ margin:7px 0 0; }
    .os-q-list, .os-quest-tip{ display:none; }
    .os-quest.is-open .os-q-list{ display:grid; margin-top:8px; }
    .os-quest.is-open .os-quest-tip{ display:block; }
    .os-prompt-in{ font-size:12px; }
}
@media (prefers-reduced-motion: reduce){
    .os-prompt-in{ animation:none; }
    .os-quest, .os-finish, .os-finish-card{ transition:none; }
}