:root{ --bg:#0a0e14; --panel:rgba(12,16,24,.82); --line:rgba(255,255,255,.10); --txt:#eaf0f7; --dim:#93a2b5; --accent:#39c7ff; --ok:#37d67a; --warn:#ffb020; --bad:#ff4d4d; } *{box-sizing:border-box; -webkit-tap-highlight-color:transparent} html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--txt); font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;} /* touch-action:none wajib — tanpa ini, drag di layar HP akan di-scroll/zoom oleh browser dan tidak pernah sampai ke handler pointermove kita. */ canvas{display:block;touch-action:none} #app{position:fixed;inset:0;touch-action:none} /* ---------- LOADING ---------- */ #loading{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center; background:radial-gradient(1200px 700px at 50% 30%,#16202e,#070a0f 70%);gap:22px;transition:opacity .6s} .logo{font-size:13px;letter-spacing:.42em;color:var(--accent);text-transform:uppercase} #loading h1{font-size:26px;font-weight:600;margin:0;text-align:center;letter-spacing:.5px} .bar{width:320px;max-width:70vw;height:3px;background:rgba(255,255,255,.09);border-radius:2px;overflow:hidden} .bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#7af5c8);transition:width .3s} #loadTxt{font-size:12.5px;color:var(--dim);letter-spacing:.06em} /* ---------- DIALOG DOM ---------- Yang tersisa hanyalah #loadfail: pemberitahuan bahwa pustaka 3D gagal dimuat, satu- satunya layar yang justru TIDAK boleh hidup di dalam dunia 3D karena dunia itulah yang gagal berdiri. Semua dialog lain sudah pindah ke dalam dunia sebagai baliho: pengantar, pengaturan, dan — terakhir — layar refleksi Tahap 5. Alasannya selalu sama: DOM tidak dirender ke sesi WebXR, jadi dari dalam headset dialog HTML tidak pernah terlihat sama sekali. Aturan .card, .row, button.cta/.ghost, .verdict, .vbadge, .stars, .cols, .box, .log, .pts, dan .lawbox ikut terhapus bersama pemakainya. */ /* ---------- HUD ---------- */ #hud{position:fixed;inset:0;z-index:20;pointer-events:none;display:none} .obj{position:absolute;top:20px;left:20px;background:var(--panel);border:1px solid var(--line);border-radius:13px; padding:12px 17px;max-width:min(430px,60vw);backdrop-filter:blur(10px)} .obj .st{font-size:10px;letter-spacing:.22em;color:var(--accent);text-transform:uppercase;margin-bottom:5px;font-weight:600} .obj .tx{font-size:14.5px;line-height:1.4} /* Skor & lampu pejalan kaki hanya berlaku di dalam skenario. Sejak menu dan skenario berbagi satu halaman, keduanya harus ikut disembunyikan saat menu yang aktif — src/app.js memasang .diSkenario pada . Pembungkusnya sengaja TIDAK diberi position: isinya position:absolute dan harus tetap berpatok pada #hud. */ body:not(.diSkenario) #hudSkenario{display:none} .stats{position:absolute;top:20px;right:20px;display:flex;gap:9px;align-items:center} .chip{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:9px 14px;backdrop-filter:blur(10px); font-size:13px;font-variant-numeric:tabular-nums} .chip b{color:var(--accent)} /* Tombol, bukan sekadar keping bertulisan: satu-satunya bagian HUD yang menerima klik. #hud berisi pointer-events:none supaya seluruh lapisannya tembus ke kanvas, jadi kedua tombol ini harus menyalakannya kembali sendiri. */ .chip.aksi{pointer-events:auto;cursor:pointer;color:inherit;font-family:inherit; font-size:13px;line-height:1;letter-spacing:.01em;transition:background .15s,border-color .15s} .chip.aksi:hover{background:rgba(60,120,180,.34);border-color:var(--accent)} .chip.aksi:active{transform:translateY(1px)} /* Kunci kursor aktif = tidak ada penunjuk sistem = tombol ini mustahil diklik. */ body.terkunci .chip.aksi{opacity:.42;cursor:default} body.terkunci .chip.aksi:hover{background:var(--panel);border-color:var(--line)} #pedWidget{position:absolute;top:74px;right:20px;background:var(--panel);border:1px solid var(--line);border-radius:13px; padding:11px 15px;backdrop-filter:blur(10px);display:none;min-width:170px} #pedWidget .lbl{font-size:9.5px;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin-bottom:7px} #pedWidget .st{display:flex;align-items:center;gap:9px;font-size:14px} .dot{width:11px;height:11px;border-radius:50%;background:#444;box-shadow:0 0 0 3px rgba(255,255,255,.05)} .dot.r{background:#ff3b3b;box-shadow:0 0 14px #ff3b3b} .dot.g{background:#2ee86a;box-shadow:0 0 14px #2ee86a} #pedCount{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums;font-size:17px} #sub{position:absolute;left:50%;bottom:78px;transform:translateX(-50%);max-width:min(760px,86vw);text-align:center; background:rgba(6,9,14,.76);border:1px solid var(--line);border-radius:12px;padding:12px 22px;font-size:15.5px; line-height:1.5;backdrop-filter:blur(8px);opacity:0;transition:opacity .4s} #sub.on{opacity:1} #sub .who{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;margin-bottom:5px} #hint{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);font-size:12px;color:var(--dim); background:rgba(6,9,14,.6);padding:7px 15px;border-radius:9px;border:1px solid var(--line)} #cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:26px;height:26px;pointer-events:none} #cross svg{width:100%;height:100%} #flash{position:fixed;inset:0;z-index:25;pointer-events:none;background:#ff2020;opacity:0;transition:opacity .12s} #vig{position:fixed;inset:0;z-index:24;pointer-events:none;opacity:0;transition:opacity .5s; background:radial-gradient(circle at 50% 50%,transparent 38%,rgba(120,0,0,.85) 100%)} #fade{position:fixed;inset:0;z-index:45;pointer-events:none;background:#000;opacity:0;transition:opacity .8s} /* ---------- AJAKAN MENGUNCI KURSOR ---------- Pointer lock tidak bisa dipasang saat halaman baru dimuat: requestPointerLock() menuntut transient activation, jadi browser menolaknya. Sebelum kunci aktif, gerak tetikus SENGAJA tidak memutar pandangan — kalau diputar, penunjuk yang tak terlihat ikut menyapu sampai keluar jendela dan klik berikutnya bisa mendarat di aplikasi lain. Karena itu keadaan "belum terkunci" harus diumumkan dengan jelas, bukan disamarkan. pointer-events:none wajib: kliknya harus tembus ke kanvas di baliknya. */ #klikMulai{position:fixed;inset:0;z-index:30;display:none;pointer-events:none; align-items:center;justify-content:center; background:radial-gradient(closest-side,rgba(4,8,14,.55),rgba(4,8,14,.16) 70%,transparent)} #klikMulai.on{display:flex} #klikMulai .kotak{text-align:center;padding:26px 40px;border-radius:18px; background:rgba(8,13,20,.9);border:2px solid var(--accent); box-shadow:0 0 0 6px rgba(57,199,255,.1),0 22px 60px rgba(0,0,0,.6); animation:denyut 1.5s ease-in-out infinite} #klikMulai .ikon{font-size:38px;line-height:1;margin-bottom:12px} #klikMulai .jdl{font-size:23px;font-weight:700;letter-spacing:.3px;margin-bottom:9px} #klikMulai .ket{font-size:13px;color:var(--dim);line-height:1.65} #klikMulai kbd{background:rgba(255,255,255,.1);border:1px solid var(--line); border-bottom-width:2px;border-radius:6px;padding:2px 7px;font-family:inherit; color:var(--txt);font-size:12px} @keyframes denyut{ 0%,100%{box-shadow:0 0 0 6px rgba(57,199,255,.10),0 22px 60px rgba(0,0,0,.6)} 50% {box-shadow:0 0 0 15px rgba(57,199,255,.02),0 22px 60px rgba(0,0,0,.6)} } /* Panel pengaturan DOM (#gear/#settings) sudah dihapus: ia tidak terlihat sama sekali dari dalam sesi WebXR. Pengaturan kini berupa kartu 3D — lihat core/pengaturan.js. */ #loadfail{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;background:#080b10;padding:24px} #loadfail div{max-width:520px;text-align:center;font-size:14.5px;line-height:1.75;color:#cbd8e6} #loadfail b{color:var(--warn)} #vrbtnHolder{position:fixed;bottom:20px;right:20px;z-index:30} /* VRButton.js menempelkan gaya inline: position:absolute; bottom:20px; left:calc(50% - 50px); width:100px. Holder ini lebarnya 0 (anak absolut tidak mengisi induk) dan menempel ke kanan, jadi 50% = 0 dan tombol digeser ke left:-50px — menjulur ~30 px ke luar layar, dan ~55 px ketika teksnya berubah jadi "VR NOT SUPPORTED" (lebar 150). Semua penempatan inline itu dimatikan; posisi diserahkan sepenuhnya ke holder. */ #vrbtnHolder button,#vrbtnHolder a{position:static!important;left:auto!important;right:auto!important; top:auto!important;bottom:auto!important;width:auto!important;max-width:none!important; transform:none!important;margin:0!important;white-space:nowrap;opacity:1!important; padding:12px 18px!important;background:var(--panel)!important;border:1px solid var(--line)!important; border-radius:12px!important;color:var(--txt)!important;cursor:pointer; font:650 11px/1 system-ui,-apple-system,sans-serif!important;letter-spacing:.16em; text-transform:uppercase;text-decoration:none;backdrop-filter:blur(10px)} #vrbtnHolder button:hover,#vrbtnHolder a:hover{background:rgba(255,255,255,.09)!important} /* Catatan saat WebXR tidak tersedia karena bukan secure context. Aturan #vrbtnHolder a di atas memaksa gaya tombol pada semua , jadi kelas ini menimpanya kembali. */ /* Catatan "VR nonaktif". Selektornya tidak menyebut nama tag: elemennya pernah berupa bertaut ke halaman diagnostik, dan ketika diganti
seluruh gayanya hilang. */ #vrbtnHolder .xrNote{display:block!important;margin-top:7px!important;max-width:230px!important; white-space:normal!important;padding:9px 11px!important;font:500 10.5px/1.5 system-ui,sans-serif!important; letter-spacing:.02em!important;text-transform:none!important;text-align:right; background:rgba(255,176,32,.12)!important;border:1px solid rgba(255,176,32,.36)!important; color:#e9dcc4!important} a.credit{position:fixed;left:74px;bottom:26px;z-index:19;font-size:10.5px;color:rgba(255,255,255,.28); letter-spacing:.14em;text-decoration:none;pointer-events:none;display:none} /* ---------- KONTROL SENTUH (mobile) ---------- * Hanya tampil bila JS mendeteksi perangkat sentuh (body.touch) dan simulasi sudah dimulai (body.playing). Semua elemen berada di z-index di atas HUD tetapi di bawah dialog. */ #touchUI{position:fixed;inset:0;z-index:22;display:none;pointer-events:none} body.touch.playing #touchUI{display:block} /* zona kiri = jalan, zona kanan = menoleh. Keduanya transparan, hanya penangkap sentuhan. */ #tzMove{position:absolute;left:0;bottom:0;width:46%;height:64%;pointer-events:auto;touch-action:none} #tzLook{position:absolute;right:0;top:0;width:54%;height:100%;pointer-events:auto;touch-action:none} #joy{position:absolute;width:132px;height:132px;margin:-66px 0 0 -66px;border-radius:50%; border:1.5px solid rgba(255,255,255,.22);background:rgba(8,12,18,.30);backdrop-filter:blur(3px); opacity:0;transition:opacity .18s;pointer-events:none} #joy.on{opacity:1} #joyKnob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%; background:rgba(57,199,255,.34);border:1.5px solid rgba(57,199,255,.75);box-shadow:0 0 18px rgba(57,199,255,.35)} #joyRun{position:absolute;left:50%;top:-26px;transform:translateX(-50%);font-size:9px;letter-spacing:.22em; color:var(--accent);text-transform:uppercase;opacity:0;transition:opacity .15s} #joy.run #joyRun{opacity:1} /* tombol aksi kanan-bawah: pilih opsi yang sedang dibidik crosshair */ #btnPick{position:absolute;right:20px;bottom:96px;width:78px;height:78px;border-radius:50%;pointer-events:auto; background:rgba(57,199,255,.16);border:1.5px solid rgba(57,199,255,.6);color:#eaf4ff; font:650 11px/1.25 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase; backdrop-filter:blur(8px);display:none;cursor:pointer} #btnPick.on{display:block} #btnPick:active{background:rgba(57,199,255,.34)} #btnRecenter{position:absolute;right:20px;top:88px;pointer-events:auto;background:var(--panel); border:1px solid var(--line);color:var(--txt);border-radius:11px;padding:9px 13px;font-size:11px; letter-spacing:.14em;text-transform:uppercase;backdrop-filter:blur(10px);cursor:pointer} /* ---------- penyesuaian layar kecil ---------- */ @media (max-width:820px){ .obj{max-width:64vw;padding:9px 12px;top:12px;left:12px} .obj .tx{font-size:12.5px} .obj .st{font-size:9px} .stats{top:12px;right:12px;gap:6px} .chip{padding:7px 10px;font-size:11.5px} .chip.aksi{font-size:11.5px} #pedWidget{top:58px;right:12px;padding:9px 12px;min-width:142px} #pedWidget .st{font-size:12.5px} #sub{bottom:auto;top:118px;font-size:13px;padding:10px 15px;max-width:92vw} #hint{bottom:12px;font-size:10.5px;padding:6px 11px;max-width:90vw;text-align:center} #vrbtnHolder{bottom:14px;right:14px} a.credit{display:none!important} } /* layar pendek (HP landscape) */ @media (max-height:520px){ #sub{top:auto;bottom:12px} }