* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#0a0e18; font-family:"Segoe UI",system-ui,sans-serif; color:#cfe3f5; }
#scene { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#hud { position:fixed; inset:0; pointer-events:none; }
#hud-top { position:absolute; top:10px; left:12px; right:12px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.chip { background:rgba(12,18,32,.75); border:1px solid #2c3a5e; border-radius:8px; padding:6px 12px; font-size:13px; letter-spacing:.08em; }
.chip b { color:#7effc4; font-size:15px; }
#suspicion { position:relative; width:170px; height:22px; background:rgba(12,18,32,.75); border:1px solid #2c3a5e; border-radius:8px; overflow:hidden; }
#suspicion span { position:absolute; left:8px; top:3px; font-size:11px; letter-spacing:.12em; color:#9fb4d8; }
#suspicion-fill { position:absolute; bottom:0; left:0; width:100%; height:0%; background:#53d7c8; transition:height .12s linear; }
#status-msg { position:absolute; top:64px; left:0; right:0; text-align:center; font-size:19px; font-weight:600; text-shadow:0 2px 8px rgba(0,0,0,.8); }
#joy { position:absolute; left:22px; bottom:22px; width:120px; height:120px; border-radius:50%; background:rgba(20,30,52,.5); border:1px solid #2c3a5e; pointer-events:auto; touch-action:none; }
#joyknob { position:absolute; left:50%; top:50%; width:52px; height:52px; margin:-26px 0 0 -26px; border-radius:50%; background:rgba(83,215,200,.45); border:1px solid #53d7c8; }
#lookzone { position:absolute; right:0; top:0; bottom:0; width:55%; pointer-events:auto; touch-action:none; }
#touch-btns { position:absolute; right:18px; bottom:22px; display:flex; gap:10px; pointer-events:auto; }
#touch-btns button { pointer-events:auto; padding:14px 16px; border-radius:10px; background:rgba(20,30,52,.7); color:#cfe3f5; border:1px solid #2c3a5e; font-size:12px; letter-spacing:.1em; }
#touch-btns button.on { background:rgba(83,215,200,.4); border-color:#53d7c8; }
#joy, #touch-btns, #lookzone { display:none; }
@media (hover: none), (pointer: coarse) {
  #joy, #touch-btns { display:block; }
  #lookzone { display:block; }
}
#hud-help { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); font-size:11px; color:#7e93b8; background:rgba(10,14,24,.55); padding:3px 10px; border-radius:8px; }
#flash { position:fixed; inset:0; opacity:0; transition:opacity .5s ease-out; pointer-events:none; background:transparent; }
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(6,9,17,.78); z-index:5; }
.panel { max-width:560px; width:calc(100% - 32px); background:linear-gradient(160deg,#101828,#0c1220); border:1px solid #2c3a5e; border-radius:16px; padding:28px 30px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.panel h1 { font-size:34px; letter-spacing:.14em; color:#7effc4; text-shadow:0 0 22px rgba(126,255,196,.35); }
.panel .tag { color:#9fb4d8; margin-top:6px; }
.how { text-align:left; margin:18px 0 22px; list-style:none; }
.how li { margin:8px 0; padding-left:20px; position:relative; font-size:14px; line-height:1.45; color:#bcd4ec; }
.how li::before { content:"›"; position:absolute; left:4px; color:#53d7c8; }
.big-btn { display:inline-block; padding:14px 34px; font-size:16px; letter-spacing:.12em; border-radius:12px; border:none; cursor:pointer; background:linear-gradient(120deg,#2fd6a8,#1ba883); color:#04140e; font-weight:700; box-shadow:0 6px 24px rgba(47,214,168,.35); }
.big-btn:hover { filter:brightness(1.15); }
@media (max-width:640px) {
  #hud-help { display:none; }
  .panel { padding:20px 18px; }
  .panel h1 { font-size:26px; }
  .how li { font-size:12.5px; }
}