:root{
      /* AMBER SCI-FI HUD */
      --hud: rgba(255,190,90,0.98);
      --hud2: rgba(255,190,90,0.28);
      --warn: rgba(255,90,90,0.95);

      /* world bg stays original */
      --bg: #05070a;

      --panelBg: rgba(10,10,10,0.22);
      --panelBd: rgba(255,190,90,0.32);
      --panelBgStrong: rgba(6,10,12,0.82);
    }
    html,body{height:100%;margin:0;background:var(--bg);overflow:hidden;font-family:system-ui,Segoe UI,Arial,sans-serif;}
    #wrap{position:relative;width:100vw;height:100vh;}
    canvas#gfx{width:100%;height:100%;display:block;}

    /* VISIBILITY FIX: stop "screen" blending + add glow */
    #hud{
      pointer-events:none;position:absolute;inset:0;color:var(--hud);
      mix-blend-mode: normal;
      text-shadow:
        0 0 10px rgba(255,190,90,0.45),
        0 0 22px rgba(255,120,40,0.18);
    }

    /* PATCH (D): visor darkening reduced (gentler vignette + lighter top/bottom) */
    #visor{
      position:absolute;inset:0;
      background:
        radial-gradient(1200px 800px at 50% 55%, rgba(0,0,0,0) 62%, rgba(0,0,0,0.45) 92%),
        radial-gradient(700px 420px at 50% 55%, rgba(255,190,90,0.06) 0%, rgba(255,190,90,0.0) 70%),
        linear-gradient(to bottom, rgba(0,0,0,0.28), rgba(0,0,0,0.10), rgba(0,0,0,0.30));
      border:2px solid rgba(255,190,90,0.10);
      box-shadow: inset 0 0 0 2px rgba(255,190,90,0.06), inset 0 0 70px rgba(255,190,90,0.10);
    }

    #scan{
      position:absolute;inset:0;
      background: repeating-linear-gradient(to bottom,
        rgba(255,190,90,0.06) 0px, rgba(255,190,90,0.06) 1px,
        rgba(0,0,0,0) 3px, rgba(0,0,0,0) 6px);
      opacity:.22;
    }
    #grain{
      position:absolute;inset:-20%;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      opacity:.16;transform:rotate(2deg);
    }

    #flash{
      position:absolute;inset:0;
      background:radial-gradient(900px 550px at 50% 55%, rgba(255,50,50,0.0), rgba(255,50,50,0.35));
      opacity:0;transition:opacity 120ms linear;
    }

    /* NEW: horizon / center orientation helpers */
    #horizon{
      position:absolute;left:50%;top:50%;
      width:min(760px,92vw);height:1px;
      transform:translate(-50%,-50%);
      background: linear-gradient(to right,
        rgba(255,190,90,0.0),
        rgba(255,190,90,0.32),
        rgba(255,190,90,0.0)
      );
      box-shadow: 0 0 12px rgba(255,190,90,0.16);
      opacity:.55;
    }
    #centerTicks{
      position:absolute;left:50%;top:50%;
      width:140px;height:40px;
      transform:translate(-50%,-50%);
      opacity:.60;
    }
    #centerTicks:before, #centerTicks:after{
      content:"";position:absolute;top:50%;transform:translateY(-50%);
      width:18px;height:2px;background:rgba(255,190,90,0.55);
      box-shadow:0 0 10px rgba(255,190,90,0.18);
    }
    #centerTicks:before{left:0;}
    #centerTicks:after{right:0;}
    #centerDot{
      position:absolute;left:50%;top:50%;width:4px;height:4px;
      transform:translate(-50%,-50%);
      border-radius:50%;
      background:rgba(255,190,90,0.85);
      box-shadow:0 0 10px rgba(255,190,90,0.35);
      opacity:.85;
    }

    /* Better crosshair (ring + thicker marks) */
    #crosshair{
      position:absolute;left:50%;top:50%;
      width:28px;height:28px;transform:translate(-50%,-50%);
      border:2px solid rgba(255,190,90,0.65);
      border-radius:50%;
      box-shadow:0 0 16px rgba(255,190,90,0.25), 0 0 30px rgba(255,120,40,0.12);
    }
    #crosshair:before,#crosshair:after{
      content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      background:rgba(255,190,90,0.55);
      box-shadow:0 0 12px rgba(255,190,90,0.18);
    }
    #crosshair:before{width:2px;height:40px;}
    #crosshair:after{width:40px;height:2px;}
    #crosshair.hit{box-shadow:0 0 18px rgba(255,90,90,0.38);border-color:rgba(255,90,90,0.78);}
    #crosshair.hit:before,#crosshair.hit:after{background:rgba(255,90,90,0.65);}

    .panel{
      position:absolute;border:1px solid var(--panelBd);background:var(--panelBg);
      box-shadow: inset 0 0 20px rgba(255,190,90,0.10);
      backdrop-filter: blur(2px);
    }

    #topbar{
      left:12px;right:12px;top:12px;height:44px;display:flex;align-items:center;justify-content:space-between;
      padding:0 12px;letter-spacing:.12em;text-transform:uppercase;font-size:12px;
    }
    #topbar .right span{margin-left:12px;opacity:.92;}

    /* NEW: heading tape in top-center */
    #heading{
      position:absolute;left:50%;top:64px;transform:translateX(-50%);
      width:min(560px,92vw);height:34px;
      display:flex;align-items:center;justify-content:center;
      padding:0 10px;
      font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    }
    #heading .tick{
      position:absolute;top:50%;left:50%;
      width:1px;height:18px;transform:translate(-50%,-50%);
      background:rgba(255,190,90,0.75);
      box-shadow:0 0 12px rgba(255,190,90,0.20);
    }
    #headingText{opacity:.95;}
    #headingText b{font-weight:800;}
    #deg{
      margin-left:10px;opacity:.9;font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    #mapBox{left:12px;top:68px;width:220px;height:220px;padding:8px;}
    #map{width:204px;height:204px;display:block;background:rgba(0,0,0,0.28);border:1px solid rgba(255,190,90,0.24);}

    #help{left:12px;bottom:12px;padding:10px 12px;max-width:560px;font-size:12px;opacity:.92;line-height:1.35;}
    #rightHud{right:12px;bottom:12px;width:310px;padding:10px 12px;font-size:12px;line-height:1.35;}
    #rightHud .row{display:flex;justify-content:space-between;margin-top:4px;}
    #rightHud b{letter-spacing:.08em;text-transform:uppercase;}

    #interact{
      left:50%;bottom:92px;transform:translateX(-50%);
      padding:10px 12px;min-width:320px;max-width:680px;
      text-align:center;font-size:12px;letter-spacing:.10em;text-transform:uppercase;
      opacity:0;transition:opacity 120ms linear;
    }
    #interact.on{opacity:1;}

    #lock{
      position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:auto;
      background: radial-gradient(800px 500px at 50% 55%, rgba(0,0,0,0.35), rgba(0,0,0,0.88));
      color: rgba(240,240,240,0.95);
    }
    #lock .card{
      width:min(640px,calc(100% - 24px));
      border:1px solid rgba(255,190,90,0.24);
      background: rgba(0,10,12,0.58);
      padding:16px 16px 14px;
      box-shadow:0 20px 70px rgba(0,0,0,0.55), inset 0 0 30px rgba(255,190,90,0.08);
      backdrop-filter: blur(6px);
    }
    #lock h1{margin:0 0 10px;font-weight:700;letter-spacing:.14em;font-size:14px;text-transform:uppercase;color:var(--hud);}
    #lock p{margin:8px 0;font-size:13px;opacity:.9;}
    #lock button{
      margin-top:10px;padding:10px 12px;background:rgba(255,190,90,0.12);
      border:1px solid rgba(255,190,90,0.45);color:rgba(255,240,230,0.95);
      letter-spacing:.12em;text-transform:uppercase;cursor:pointer;
    }
    #lock button:hover{background:rgba(255,190,90,0.18);}

    /* Code entry */
    #codeEntry{
      position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      padding:14px 16px;min-width:360px;text-align:center;
      opacity:0;pointer-events:none;transition:opacity 120ms linear;
    }
    /* PATCH: allow clicking buttons when open */
    #codeEntry.on{opacity:1;pointer-events:auto;}
    #codeEntry .digits{
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size:26px;letter-spacing:.28em;margin-top:10px;
      color: rgba(255,240,230,0.98);
      text-shadow: 0 0 12px rgba(255,190,90,0.25);
      user-select:none;
    }
    #codeEntry .hint{margin-top:10px;font-size:12px;opacity:.9;line-height:1.35;}
    #codeEntry .btnrow{
      margin-top:12px;
      display:flex;
      justify-content:center;
      gap:10px;
      pointer-events:auto;
    }
    #codeEntry button{
      padding:10px 12px;
      background:rgba(255,190,90,0.12);
      border:1px solid rgba(255,190,90,0.45);
      color:rgba(255,240,230,0.95);
      letter-spacing:.12em;
      text-transform:uppercase;
      cursor:pointer;
      font-size:12px;
    }
    #codeEntry button:hover{background:rgba(255,190,90,0.18);}

    /* =========================
       NEW: Inventory + Cyborg UI
       ========================= */
    #uiLayer{
      position:absolute; inset:0;
      pointer-events:none;
    }

    #invOverlay{
      position:absolute; inset:0;
      display:none;
      pointer-events:auto;
      background: radial-gradient(900px 560px at 50% 55%, rgba(0,0,0,0.35), rgba(0,0,0,0.88));
    }
    #invOverlay.on{display:block;}

    #invPanel{
      position:absolute;
      left:50%; top:50%;
      transform:translate(-50%,-50%);
      width:min(980px, calc(100% - 24px));
      height:min(640px, calc(100% - 24px));
      border:1px solid rgba(255,190,90,0.32);
      background: var(--panelBgStrong);
      box-shadow:0 20px 80px rgba(0,0,0,0.65), inset 0 0 30px rgba(255,190,90,0.10);
      backdrop-filter: blur(6px);
      display:grid;
      grid-template-columns: 1.0fr 0.92fr;
      grid-template-rows: 52px 1fr 60px;
      overflow:hidden;
    }
    #invHeader{
      grid-column:1 / -1;
      display:flex;align-items:center;justify-content:space-between;
      padding:0 14px;
      letter-spacing:.14em;text-transform:uppercase;font-size:12px;
      color: var(--hud);
      border-bottom:1px solid rgba(255,190,90,0.22);
      background: rgba(255,190,90,0.05);
    }
    #invHeader .tabs{
      display:flex; gap:10px; align-items:center;
      opacity:.96;
    }
    .tabPill{
      border:1px solid rgba(255,190,90,0.28);
      padding:6px 10px;
      background: rgba(0,0,0,0.18);
      cursor:default;
      user-select:none;
    }
    .tabPill.on{
      background: rgba(255,190,90,0.12);
      border-color: rgba(255,190,90,0.50);
      box-shadow: 0 0 18px rgba(255,190,90,0.10);
    }

    #invLeft{
      padding:12px 12px 10px 12px;
      border-right:1px solid rgba(255,190,90,0.18);
      overflow:auto;
    }
    #invRight{
      padding:12px 12px 10px 12px;
      overflow:auto;
    }

    #invList{
      margin-top:10px;
      border:1px solid rgba(255,190,90,0.18);
      background: rgba(0,0,0,0.22);
    }
    .invRow{
      display:flex;justify-content:space-between;align-items:center;
      padding:10px 10px;
      border-bottom:1px solid rgba(255,190,90,0.12);
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
      opacity:.95;
    }
    .invRow:last-child{border-bottom:none;}
    .invRow .meta{
      opacity:.80;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing:.10em;
      text-transform:none;
      margin-left:10px;
    }
    .invRow.sel{
      background: rgba(255,190,90,0.10);
      outline: 1px solid rgba(255,190,90,0.38);
      box-shadow: inset 0 0 18px rgba(255,190,90,0.10);
    }

    #cyborgPanel{
      border:1px solid rgba(255,190,90,0.18);
      background: rgba(0,0,0,0.22);
      padding:12px;
    }
    #cyborgTitle{
      font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:12px;
      margin-bottom:10px;
    }
    #cyborgViz{
      width:100%; height:220px;
      border:1px solid rgba(255,190,90,0.18);
      background: radial-gradient(380px 220px at 50% 45%, rgba(255,190,90,0.10), rgba(0,0,0,0.10));
      display:flex; align-items:center; justify-content:center;
      position:relative;
      overflow:hidden;
    }
    #cyborgViz:before{
      content:"";
      position:absolute; inset:-30%;
      background: repeating-linear-gradient(to bottom,
        rgba(255,190,90,0.06) 0px, rgba(255,190,90,0.06) 1px,
        rgba(0,0,0,0) 3px, rgba(0,0,0,0) 7px);
      opacity:.22;
      transform: rotate(2deg);
    }
    #cyborgGlyph{
      position:relative;
      width:140px; height:200px;
      opacity:.92;
      filter: drop-shadow(0 0 18px rgba(255,190,90,0.18));
    }
    /* simple “cyborg” silhouette with CSS blocks */
    .cgHead{position:absolute;left:50%;top:12px;transform:translateX(-50%);width:56px;height:56px;border:2px solid rgba(255,190,90,0.55);border-radius:10px;}
    .cgEye{position:absolute;left:50%;top:34px;transform:translateX(-50%);width:42px;height:10px;border:2px solid rgba(255,190,90,0.40);border-radius:8px;}
    .cgTorso{position:absolute;left:50%;top:76px;transform:translateX(-50%);width:78px;height:86px;border:2px solid rgba(255,190,90,0.45);border-radius:12px;}
    .cgArmL{position:absolute;left:6px;top:86px;width:34px;height:70px;border:2px solid rgba(255,190,90,0.30);border-radius:10px;}
    .cgArmR{position:absolute;right:6px;top:86px;width:34px;height:70px;border:2px solid rgba(255,190,90,0.30);border-radius:10px;}
    .cgLegL{position:absolute;left:34px;top:162px;width:28px;height:50px;border:2px solid rgba(255,190,90,0.30);border-radius:10px;}
    .cgLegR{position:absolute;right:34px;top:162px;width:28px;height:50px;border:2px solid rgba(255,190,90,0.30);border-radius:10px;}

    #cyborgStats{
      margin-top:10px;
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:8px;
      font-size:12px;
      letter-spacing:.08em;
      text-transform:uppercase;
    }
    .statBox{
      border:1px solid rgba(255,190,90,0.18);
      background: rgba(0,0,0,0.18);
      padding:10px;
    }
    .statBox b{display:block;opacity:.85;margin-bottom:6px;}
    .statBox span{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing:.12em;}

    #invDetail{
      margin-top:12px;
      border:1px solid rgba(255,190,90,0.18);
      background: rgba(0,0,0,0.18);
      padding:10px;
      font-size:12px;
      line-height:1.45;
      opacity:.92;
    }
    #invFooter{
      grid-column:1 / -1;
      border-top:1px solid rgba(255,190,90,0.18);
      background: rgba(0,0,0,0.12);
      display:flex; align-items:center; justify-content:space-between;
      padding:0 12px;
      font-size:12px; letter-spacing:.10em; text-transform:uppercase;
      opacity:.92;
    }
    #invFooter .k{
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      letter-spacing:.14em;
      opacity:.95;
    }
    #invFooter .hint2{opacity:.88;}
   #invFooter .hint2{opacity:.88;}