:root { --gold:#E3B341; --gold2:#F5CF6B; --text:#EEF1F5; --soft:#A3ADBD; --line:#2A3240; --glass:rgba(14,17,22,.82); }
[hidden] { display:none !important; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; overflow:hidden; background:#0E1116; color:var(--text); font-family:Archivo, system-ui, sans-serif; }
#stage { position:fixed; inset:0; touch-action:none; }
#stage canvas { display:block; }
a { color:var(--gold2); }
.top { position:fixed; left:10px; right:10px; top:10px; display:flex; align-items:center; gap:10px; z-index:5; pointer-events:none; }
.top > * { pointer-events:auto; }
.ib { width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--glass); border:1px solid var(--line); color:var(--text); }
.ib svg, .tb svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.ttl { display:flex; flex-direction:column; text-shadow:0 1px 6px rgba(0,0,0,.6); } .ttl small { color:#E5E7EB; font-size:12.5px; }
.badge { margin-left:auto; display:flex; align-items:center; gap:8px; padding:7px 12px; border-radius:999px; background:var(--glass); border:1px solid var(--gold); font-weight:700; font-size:13.5px; }
.badge i { width:8px; height:8px; border-radius:50%; background:#3DD68C; }
.tools { position:fixed; right:10px; bottom:calc(14px + env(safe-area-inset-bottom)); display:flex; gap:8px; z-index:5; }
.tb { display:flex; align-items:center; gap:7px; font:inherit; font-weight:700; font-size:14px; color:var(--text); background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:11px 14px; cursor:pointer; }
.tb:hover { border-color:var(--gold); }
.stick { position:fixed; left:18px; bottom:calc(22px + env(safe-area-inset-bottom)); width:120px; height:120px; border-radius:50%; background:rgba(14,17,22,.45); border:2px solid rgba(255,255,255,.25); z-index:5; touch-action:none; }
.stick i { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(245,207,107,.85); }
.door { position:fixed; right:10px; top:64px; width:min(400px, calc(100vw - 20px)); max-height:calc(100vh - 150px); overflow:auto; background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:16px; z-index:6; backdrop-filter:blur(10px); }
.door h3 { margin:2px 0 2px; font-size:21px; } .door .addr { margin:0 0 6px; color:var(--gold2); font-size:13.5px; } .door .soft { color:var(--soft); font-size:14px; margin:4px 0 10px; }
.door .tag { font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--soft); }
.door .x, .mhead .x, .person .x { position:absolute; right:10px; top:8px; width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:20px; cursor:pointer; }
.door { position:fixed; } .door .x { position:absolute; }
.rooms { display:grid; gap:8px; }
.room { border:1px solid var(--line); border-radius:12px; padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:6px 10px; align-items:center; }
.room small { display:block; color:var(--soft); font-size:12.5px; }
.room .acts { grid-column:1 / -1; display:flex; gap:6px; flex-wrap:wrap; }
.busy { color:#FCA5A5; font-weight:700; font-size:13px; } .soon { color:var(--gold2); font-weight:700; font-size:13px; } .free { color:#86EFAC; font-weight:700; font-size:13px; }
.warn { color:#FCA5A5; }
.btn { display:inline-flex; align-items:center; justify-content:center; border:0; border-radius:11px; padding:10px 16px; font:inherit; font-weight:700; font-size:14.5px; cursor:pointer; text-decoration:none; }
.btn.sm { padding:7px 11px; font-size:13px; border-radius:9px; }
.btn.gold { background:var(--gold); color:#16120A; } .btn.line { background:transparent; color:var(--text); border:1px solid var(--line); }
.map { position:fixed; inset:0; background:rgba(5,7,10,.55); z-index:8; display:grid; place-items:center; padding:12px; }
.mbox { width:min(1000px, 100%); height:min(700px, calc(100vh - 24px)); background:#0E1116; border:1px solid var(--line); border-radius:20px; display:flex; flex-direction:column; overflow:hidden; }
.mhead { position:relative; display:flex; gap:12px; align-items:center; padding:12px 54px 12px 16px; border-bottom:1px solid var(--line); }
.mhead input { flex:1; background:#151A22; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 12px; font:inherit; }
.mbody { flex:1; display:grid; grid-template-columns:1.2fr 1fr; min-height:0; }
.mbody canvas { width:100%; height:100%; display:block; }
.mlist { overflow:auto; padding:10px; display:grid; gap:8px; align-content:start; }
.mrow { display:grid; grid-template-columns:1fr auto auto; gap:6px; align-items:center; border:1px solid var(--line); border-radius:12px; padding:9px 10px; }
.mrow small { display:block; color:var(--soft); font-size:12.5px; }
@media (max-width:760px) { .mbody { grid-template-columns:1fr; grid-template-rows:42% 1fr; } }
.ride { position:fixed; left:50%; top:70px; transform:translateX(-50%); z-index:6; display:flex; gap:12px; align-items:stretch; background:var(--glass); border:1px solid var(--line); border-radius:16px; padding:12px 14px; max-width:calc(100vw - 20px); }
.ride small { display:block; color:var(--soft); font-size:12px; } .ride b { display:block; } .ride span { color:var(--gold2); font-weight:700; }
.rad { border-left:1px solid var(--line); padding-left:12px; max-width:260px; } .rad b { color:var(--gold2); } .rad span { color:var(--text); font-weight:500; font-size:13.5px; display:block; }
.minor { position:fixed; left:50%; bottom:calc(80px + env(safe-area-inset-bottom)); transform:translateX(-50%); background:#7F1D1D; color:#FEE2E2; padding:10px 14px; border-radius:12px; z-index:6; font-size:14px; max-width:calc(100vw - 20px); text-align:center; }
.id { position:fixed; inset:0; z-index:9; display:grid; place-items:center; background:rgba(5,7,10,.6); padding:14px; }
.idbox { width:min(480px, 100%); background:#0E1116; border:1px solid var(--gold); border-radius:20px; padding:22px; }
.idbox h1 { margin:0 0 8px; font-size:26px; } .idbox p { color:var(--soft); }
.idform { display:grid; gap:10px; } .idform label { display:grid; gap:5px; font-weight:600; font-size:14.5px; }
.idform input:not([type=checkbox]) { background:#151A22; border:1px solid var(--line); color:var(--text); border-radius:10px; padding:10px 12px; font:inherit; }
.idform .chk { display:flex; gap:9px; align-items:flex-start; font-weight:500; } .idform .chk input { margin-top:3px; width:17px; height:17px; accent-color:var(--gold); }
.or { display:flex; gap:8px; margin:14px 0 0; }
.toast { position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translate(-50%, 20px); opacity:0; transition:.25s; background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:11px 15px; z-index:7; max-width:calc(100vw - 30px); font-size:14.5px; pointer-events:none; }
.toast.on { opacity:1; transform:translate(-50%, 0); }
.load { position:fixed; inset:0; display:none; place-items:center; align-content:center; gap:14px; background:#0E1116; z-index:10; color:var(--soft); }
.load.on { display:grid; }
.spin { width:44px; height:44px; border-radius:50%; border:4px solid #2A3240; border-top-color:var(--gold); animation:sp 1s linear infinite; } @keyframes sp { to { transform:rotate(360deg); } }
@media (max-width:640px) { .tools { bottom:calc(150px + env(safe-area-inset-bottom)); flex-direction:column; } .ride { flex-direction:column; } .rad { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:8px; } }

/* adverts in the ride screen and at doors */
.rad a.go, .door .spons a { color:var(--gold2); font-weight:700; font-size:13px; text-decoration:none; }
.rad .pic { width:84px; height:126px; border-radius:8px; background-size:cover; background-position:center; float:left; margin-right:10px; }
.door .spons { display:flex; gap:10px; align-items:center; margin-top:10px; padding:10px; border:1px solid var(--line); border-radius:12px; background:rgba(227,179,65,.06); }
.door .spons .pic { width:96px; height:48px; border-radius:6px; background-size:cover; background-position:center; flex:none; }
.door .spons small { display:block; color:var(--soft); font-size:11px; text-transform:uppercase; letter-spacing:.05em; } .door .spons b { display:block; font-size:14px; } .door .spons span { font-size:13px; color:var(--soft); }
/* a shared ride: the offer card */
.offer { position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:7; background:var(--glass); border:1px solid var(--gold); border-radius:16px; padding:12px 14px; display:flex; gap:12px; align-items:center; max-width:calc(100vw - 20px); }
.offer b { display:block; } .offer small { color:var(--soft); }
/* the flight: a window, the seat in front and its screen */
.flight { position:fixed; inset:0; z-index:5; pointer-events:none; }
.flight .win { display:none; position:absolute; inset:0; background:linear-gradient(#E9EDF2, #BFC7D2); -webkit-mask:radial-gradient(ellipse 30% 37% at 50% 40%, transparent 96%, #000 100%); mask:radial-gradient(ellipse 30% 37% at 50% 40%, transparent 96%, #000 100%); }
.flight .fbar { position:absolute; left:50%; top:66px; transform:translateX(-50%); display:flex; gap:16px; align-items:center; background:var(--glass); border:1px solid var(--line); border-radius:14px; padding:10px 14px; color:var(--text); }
.flight .fbar small { display:block; color:var(--soft); font-size:12px; } .flight .fbar span { color:var(--gold2); font-weight:800; }
.flight .seat { position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:min(620px, 96vw); height:min(22vh, 190px); background:linear-gradient(#2A3240, #161B23); border-radius:40px 40px 0 0; display:flex; gap:12px; padding:18px 18px 0; box-shadow:0 -10px 40px rgba(0,0,0,.35); pointer-events:auto; }
.flight .scr { flex:1; border-radius:12px; background:#05070A; border:3px solid #0B0E13; overflow:hidden; position:relative; display:grid; place-items:center; text-align:center; color:#F2EFE7; background-size:cover; background-position:center; max-height:calc(100% - 18px); }
.flight .scr small { position:absolute; top:6px; right:10px; font-size:11px; color:#A3ADBD; } .flight .scr b { display:block; color:#F5CF6B; font-size:22px; } .flight .scr span { font-size:14px; }
.flight .scr .tx { padding:10px; } .flight .scr.img .tx { position:absolute; left:0; right:0; bottom:0; background:linear-gradient(transparent, rgba(0,0,0,.8)); }
.flight .scr a { color:var(--gold2); font-weight:700; font-size:13px; text-decoration:none; pointer-events:auto; }
.flight .fmap { width:110px; flex:none; border-radius:12px; background:#0B1220; border:3px solid #0B0E13; position:relative; max-height:calc(100% - 18px); overflow:hidden; }
.flight .fmap::before { content:''; position:absolute; left:20%; right:20%; top:14%; bottom:14%; border-left:2px dashed #475569; }
.flight .fmap i { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--gold2); box-shadow:0 0 0 4px rgba(227,179,65,.25); left:calc(20% - 6px); top:14%; }
@media (max-width:640px) { .flight .fmap { display:none; } .offer { bottom:calc(210px + env(safe-area-inset-bottom)); } }

/* people: the card for another person, questions, the private talk chip, the report form */
.person { position:fixed; left:50%; top:70px; transform:translateX(-50%); z-index:8; width:min(360px, calc(100vw - 20px)); background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:14px 16px; }
.person h3 { margin:0 0 2px; font-size:18px; } .person .soft { color:var(--soft); font-size:13px; margin:0 0 10px; }
.person .acts, .ask .acts, .modal .acts { display:flex; gap:8px; flex-wrap:wrap; }
.person .x { position:absolute; right:10px; top:8px; }
.ask { position:fixed; left:50%; top:70px; transform:translateX(-50%); z-index:9; background:var(--glass); border:1px solid var(--gold); border-radius:16px; padding:12px 14px; display:flex; gap:12px; align-items:center; max-width:calc(100vw - 20px); }
.ask b { display:block; } .ask small { color:var(--soft); }
.privchip { position:fixed; left:12px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:6; background:rgba(124,58,237,.92); color:#fff; border-radius:999px; padding:8px 8px 8px 14px; display:flex; gap:10px; align-items:center; font-size:14px; font-weight:600; }
.privchip button { border:0; border-radius:999px; padding:6px 12px; background:#fff; color:#4C1D95; font-weight:700; cursor:pointer; }
.modal { position:fixed; inset:0; z-index:20; background:rgba(5,7,10,.6); display:grid; place-items:center; padding:16px; }
.mbox2 { width:min(440px, 100%); background:#141922; border:1px solid var(--line); border-radius:18px; padding:18px; display:grid; gap:10px; color:var(--text); }
.mbox2 h3 { margin:0; } .mbox2 label { display:grid; gap:5px; font-weight:600; font-size:14px; } .mbox2 small { color:var(--soft); font-weight:400; }
.mbox2 select, .mbox2 textarea { background:#0E1116; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 10px; font:inherit; }
.mbox2 label.chk { display:flex; gap:8px; align-items:center; font-weight:400; }
.tb.on { background:var(--ok); color:#06240F; } .tb.on svg { stroke:#06240F; }
@media (max-width:640px) { .privchip { bottom:calc(200px + env(safe-area-inset-bottom)); } }

/* the guide's questions, and the receptionist's greeting */
.person .faq { display:flex; flex-direction:column; gap:6px; } .person .faq .btn { text-align:left; justify-content:flex-start; white-space:normal; }
.person .askf { display:flex; gap:8px; margin-top:10px; } .person .askf input { flex:1; min-width:0; background:#0E1116; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:8px 10px; font:inherit; }
.door .greet { font-size:14px; margin:6px 0 10px; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.06); } .door .greet b { color:var(--gold2); }

/* a shop's shelves, at its door */
.door .items { display:grid; gap:8px; margin:6px 0 10px; max-height:46vh; overflow:auto; }
.door .item { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; }
.door .item i { width:52px; height:52px; border-radius:8px; background:#1F2937; background-size:cover; background-position:center; }
.door .item b { display:block; font-size:14px; } .door .item small { color:var(--soft); font-size:12.5px; }
.ask { flex-wrap:wrap; } .ask > div:first-child { flex:1 1 260px; }
.lv-i { width:100%; box-sizing:border-box; background:var(--bg2, #0B0E13); border:1px solid var(--line); color:var(--text); border-radius:10px; padding:9px 11px; font:inherit; }
.tb.rec { border-color:#DC2626; color:#FCA5A5; } .tb.rec svg circle:last-child { fill:#DC2626; stroke:#DC2626; }

.mwrap { position:relative; min-height:0; } .mwrap canvas { width:100%; height:100%; display:block; }
.mhere { position:absolute; left:10px; top:10px; right:10px; background:rgba(12,15,20,.82); border:1px solid var(--line); border-radius:12px; padding:8px 11px; font-size:13.5px; }
.mhere b { color:var(--gold2); } .mhere button { margin-left:6px; }
.mzoom { position:absolute; right:10px; bottom:10px; display:flex; gap:6px; } .mzoom button { border:1px solid var(--line); background:rgba(12,15,20,.85); color:var(--text); border-radius:999px; padding:7px 12px; font:inherit; font-weight:700; font-size:13px; cursor:pointer; } .mzoom button.on { border-color:var(--gold); color:var(--gold2); }
.rcode { display:inline-flex; gap:6px; align-items:center; font-weight:800; letter-spacing:.04em; color:var(--gold2); } .rcode button { font:inherit; font-size:12px; font-weight:700; padding:3px 8px; border-radius:8px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; }

.door ol.rules { margin:6px 0 10px; padding-left:20px; display:grid; gap:6px; font-size:14px; } .door ol.rules b { display:block; }
.door .quiz { display:grid; gap:10px; border-top:1px solid var(--line); padding-top:10px; } .door .quiz .q p { margin:0 0 6px; font-weight:600; } .door .quiz .q button { margin:0 6px 6px 0; } .door .quiz small { display:block; font-weight:700; }

/* part 61: your view, the welcome, the tour */
.person { max-height:calc(100vh - 160px); max-height:calc(100dvh - 160px); overflow:auto; }
.vopts { display:flex; flex-direction:column; gap:6px; }
.vopt { text-align:left; font:inherit; color:var(--text); background:transparent; border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer; }
.vopt b { display:block; font-size:14.5px; } .vopt small { display:block; color:var(--soft); font-size:12.5px; margin-top:2px; }
.vopt.on { border-color:var(--gold); background:rgba(227,179,65,.1); } .vopt.on b { color:var(--gold2); }
.welcome { position:fixed; inset:0; z-index:20; display:grid; place-items:center; background:radial-gradient(ellipse at 50% 40%, rgba(14,17,22,.55), rgba(14,17,22,.92)); padding:16px; }
.welcome .wbox { text-align:center; max-width:440px; display:flex; flex-direction:column; align-items:center; gap:10px; animation:welIn .9s ease both; }
.welcome img { border-radius:16px; box-shadow:0 0 0 3px var(--gold), 0 10px 40px rgba(0,0,0,.5); }
.welcome small { color:var(--gold2); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:13px; }
.welcome h1 { margin:0; font-size:clamp(30px, 8vw, 46px); font-stretch:115%; line-height:1.05; }
.welcome p { margin:0 0 8px; color:var(--soft); font-size:16px; }
.welcome .btn.gold { font-size:17px; padding:13px 26px; }
@keyframes welIn { from { opacity:0; transform:translateY(14px) scale(.98); } to { opacity:1; transform:none; } }
.caption { position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:9; max-width:min(560px, calc(100vw - 24px)); background:rgba(0,0,0,.72); color:#fff; font-size:17px; font-weight:600; text-align:center; padding:9px 14px; border-radius:12px; pointer-events:none; }
.tour { position:fixed; left:50%; top:70px; transform:translateX(-50%); z-index:10; width:min(400px, calc(100vw - 20px)); background:var(--glass); border:1px solid var(--gold); border-radius:16px; padding:12px 14px; backdrop-filter:blur(10px); }
.tour small { color:var(--soft); font-size:12px; } .tour b { display:block; font-size:17px; color:var(--gold2); margin:2px 0 4px; } .tour p { margin:0 0 10px; font-size:14.5px; line-height:1.45; }
.tour .acts { display:flex; gap:8px; flex-wrap:wrap; }
.hl { outline:3px solid var(--gold2); outline-offset:3px; animation:hlP 1.2s ease-in-out infinite; }
@keyframes hlP { 50% { outline-color:rgba(245,207,107,.25); } }
@media (max-width:640px) { .caption { bottom:calc(30px + env(safe-area-inset-bottom)); } }

/* part 62: people, chats, calls */
.tb { position:relative; } .tb > i { position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:#DC2626; color:#fff; font-style:normal; font-size:11.5px; font-weight:800; display:grid; place-items:center; }
.ppl { position:fixed; left:10px; top:64px; width:min(400px, calc(100vw - 20px)); max-height:calc(100vh - 150px); max-height:calc(100dvh - 150px); overflow:auto; background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:14px 16px; z-index:7; backdrop-filter:blur(10px); }
.ppl h3 { margin:0 0 8px; font-size:19px; } .ppl h4 { margin:12px 0 4px; font-size:13px; color:var(--soft); text-transform:uppercase; letter-spacing:.06em; }
.ppl .x { position:absolute; right:10px; top:8px; width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:20px; cursor:pointer; }
.ppl .soft { color:var(--soft); font-size:13.5px; }
.ptabs { display:flex; gap:6px; margin-bottom:10px; } .ptab { flex:1; font:inherit; font-weight:700; font-size:13.5px; padding:8px 6px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); cursor:pointer; }
.ptab.on { border-color:var(--gold); color:var(--gold2); background:rgba(227,179,65,.1); }
.prow { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:9px 0; border-top:1px solid var(--line); flex-wrap:wrap; }
.prow b { display:block; font-size:14.5px; } .prow small { display:block; color:var(--soft); font-size:12.5px; } .pacts { display:flex; gap:6px; flex-wrap:wrap; }
.pme { display:flex; gap:10px; align-items:center; justify-content:space-between; padding:10px 12px; border:1px solid var(--gold); border-radius:12px; margin-bottom:6px; }
.pme small { display:block; color:var(--soft); font-size:12px; } .pme b { color:var(--gold2); font-size:16px; letter-spacing:.04em; }
.pq { width:100%; background:#0E1116; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font:inherit; box-sizing:border-box; margin-bottom:6px; }
.crow { display:block; width:100%; text-align:left; font:inherit; color:var(--text); background:transparent; border:0; border-top:1px solid var(--line); padding:10px 2px; cursor:pointer; }
.crow b { display:block; font-size:14.5px; } .crow b i { font-style:normal; background:#DC2626; color:#fff; border-radius:9px; padding:0 6px; font-size:11.5px; margin-left:4px; } .crow small { display:block; color:var(--soft); font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ppl .back { font:inherit; font-weight:700; background:transparent; border:0; color:var(--gold2); cursor:pointer; padding:0; margin-bottom:4px; }
.msgs { display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow:auto; padding:4px 0; }
.msg { align-self:flex-start; max-width:85%; background:#1C2330; border-radius:12px 12px 12px 4px; padding:7px 10px; font-size:14.5px; line-height:1.4; display:flex; flex-direction:column; gap:4px; word-wrap:break-word; }
.msg.mine { align-self:flex-end; background:rgba(227,179,65,.18); border-radius:12px 12px 4px 12px; } .msg small { color:var(--gold2); font-size:12px; font-weight:700; }
.send { display:flex; gap:8px; margin-top:8px; } .send input { flex:1; min-width:0; background:#0E1116; color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font:inherit; }
.ppl .chk { display:flex; gap:8px; align-items:center; font-size:14px; padding:4px 0; }
.tb > i[hidden] { display:none; }
.privchip span small { display:block; font-size:11.5px; opacity:.85; font-weight:500; }
@media (max-width:640px) { #bSound, #bQual { display:none; } }

/* part 66: the game tables */
.game { position:fixed; inset:0; z-index:15; display:grid; place-items:center; background:rgba(8,10,14,.55); padding:10px; }
.gbox { position:relative; width:min(560px, 100%); max-height:calc(100dvh - 20px); overflow:auto; background:var(--glass); border:1px solid var(--line); border-radius:18px; padding:14px 16px; backdrop-filter:blur(12px); }
.gbox h3 { margin:0 0 8px; font-size:19px; } .gbox .x { position:absolute; right:10px; top:8px; width:32px; height:32px; border-radius:10px; border:1px solid var(--line); background:transparent; color:var(--text); font-size:20px; cursor:pointer; }
.gseats { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; } .gs { font-size:12.5px; padding:5px 9px; border-radius:999px; border:1px solid var(--line); color:var(--soft); }
.gs.on { color:var(--gold2); border-color:var(--gold); } .gs.turn { box-shadow:0 0 0 2px rgba(245,207,107,.35); color:var(--text); }
.gwrap { width:100%; aspect-ratio:1; border-radius:12px; overflow:hidden; background:#0E1116; } .gwrap canvas { width:100%; height:100%; display:block; touch-action:none; }
.gmsg { margin:10px 0 8px; font-weight:700; font-size:15px; } .gbox .acts { display:flex; gap:8px; flex-wrap:wrap; } .gnote { font-size:12.5px; margin:8px 0 0; color:var(--soft); }

/* part 68: the drone */
.drone { position:fixed; left:50%; top:66px; transform:translateX(-50%); z-index:8; display:flex; flex-direction:column; gap:8px; align-items:center; }
.drone .dstat { display:flex; gap:12px; align-items:center; background:var(--glass); border:1px solid var(--gold); border-radius:999px; padding:7px 14px; font-size:13.5px; }
.drone .dstat b { color:var(--gold2); } .drone .dbtns { display:flex; gap:8px; } .drone .tb.gold { background:var(--gold); color:#16120A; }
body.droning .tools #bTaxi, body.droning .tools #bPeople { opacity:.4; pointer-events:none; }

/* part 71: the time of day, and the way back from your own eyes */
.ttl .tod { display:block; color:var(--gold2); font-weight:700; font-size:12px; }
.eyeschip { position:fixed; left:50%; top:64px; transform:translateX(-50%); z-index:7; font:inherit; font-weight:700; font-size:13.5px; color:var(--text); background:var(--glass); border:1px solid var(--gold); border-radius:999px; padding:8px 14px; cursor:pointer; }
.eyeschip[hidden] { display:none; }

/* ── phones: one Menu button instead of a column of buttons over the view; rides keep the view clear ── */
.tmenu { display:none; }
@media (max-width:640px) {
  .tools { right:10px; bottom:calc(150px + env(safe-area-inset-bottom)); flex-direction:column; align-items:flex-end; gap:6px; }
  .tmenu { display:flex; }
  .tools.shut .tb:not(.tmenu) { display:none; }
  .tools:not(.shut) .tmenu { background:var(--gold); color:#16120A; } .tools:not(.shut) .tmenu svg { stroke:#16120A; }
  .tools .tb { padding:9px 12px; font-size:13.5px; border-radius:12px; }
  .tmenu .dot { position:absolute; top:-3px; right:-3px; width:11px; height:11px; border-radius:50%; background:#DC2626; }
  .tmenu .dot[hidden] { display:none; }
  .top .ttl small { font-size:12px; } .top .ttl b { font-size:16px; }
  body.riding .tools, body.flying .tools, body.riding #stick, body.flying #stick, body.riding .badge, body.flying .badge { display:none !important; }
  body.riding .ride { top:auto; bottom:calc(16px + env(safe-area-inset-bottom)); flex-direction:row; padding:8px 12px; border-radius:999px; }
  body.riding .ride .rad { display:none; }
  body.riding .ride small { display:none; } body.riding .ride b { display:inline; font-size:14px; } body.riding .ride span { margin-left:8px; }
}
/* turn by turn: the next instruction, like a satnav */
.nav { position:fixed; left:50%; top:70px; transform:translateX(-50%); z-index:7; display:flex; align-items:center; gap:12px; background:#0B6B3A; color:#fff; border-radius:16px; padding:10px 12px 10px 14px; box-shadow:0 8px 24px rgba(0,0,0,.35); width:min(560px, calc(100vw - 20px)); }
.nav[hidden] { display:none; }
.nav .navA { width:40px; height:40px; flex:none; fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.nav .navT { flex:1; min-width:0; } .nav .navT b { display:block; font-size:17px; line-height:1.25; } .nav .navT small { display:block; color:#D1FAE5; font-size:13px; font-weight:700; margin-top:2px; }
.nav button { flex:none; background:rgba(255,255,255,.16); color:#fff; border:0; border-radius:10px; padding:7px 10px; font:700 12.5px Archivo, sans-serif; cursor:pointer; }
.nav button[hidden] { display:none; }
body.riding .nav { top:168px; }
@media (max-width:640px) {
  .nav { top:calc(62px + env(safe-area-inset-top)); padding:8px 10px; gap:9px; } .nav .navA { width:32px; height:32px; } .nav .navT b { font-size:15px; }
  body.riding .nav { top:calc(62px + env(safe-area-inset-top)); }
}