* { margin:0; padding:0; box-sizing:border-box; }
  html,body { height:100%; overflow:hidden; background:#05060a; color:#e6dcc9;
              font-family:'IBM Plex Mono',monospace; user-select:none; }
  canvas { display:block; }

  #hud { position:fixed; top:0; left:0; right:0; padding:18px 22px;
         display:flex; justify-content:space-between; pointer-events:none; z-index:10; }
  .stat { font-size:10px; letter-spacing:.22em; text-transform:uppercase; opacity:.5; }
  .val  { font-size:24px; font-weight:600; margin-top:2px; }

  /* fuel = light = ammo = life. one bar. */
  #fuelwrap { position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
              width:min(360px,48vw); z-index:10; pointer-events:none; }
  #fuelbar { height:6px; background:rgba(230,220,201,.1);
             border:1px solid rgba(230,220,201,.16); overflow:hidden; position:relative; }
  #fuelfill { height:100%; width:100%; transform-origin:left;
              background:linear-gradient(90deg,#ff6a1e,#ffc247); }
  /* the cost of a flare, marked on the bar */
  #flaremark { position:absolute; top:-3px; bottom:-3px; width:1px;
               background:rgba(255,255,255,.5); }
  #fuellabel { text-align:center; font-size:10px; letter-spacing:.24em; margin-top:8px;
               text-transform:uppercase; opacity:.45; }
  #fuelwrap.low #fuelfill { background:linear-gradient(90deg,#d43a12,#ff7a1e);
                            animation:pulse .9s infinite; }
  #fuelwrap.low #fuellabel { opacity:.9; color:#ff8a3c; }
  @keyframes pulse { 50% { opacity:.45; } }

  #keys { position:fixed; top:64px; left:22px; z-index:10; display:flex; gap:9px; }
  .keyslot { width:26px; height:26px; border:1px solid rgba(230,220,201,.22);
             display:grid; place-items:center; font-size:13px;
             color:rgba(230,220,201,.2); transition:.35s; }
  .keyslot.got { border-color:#c8a04a; color:#c8a04a;
                 box-shadow:0 0 14px rgba(200,160,74,.45); }

  #map { position:fixed; bottom:22px; right:22px; z-index:10;
         border:1px solid rgba(230,220,201,.18); background:rgba(5,6,10,.72);
         image-rendering:pixelated; }
  #crosshair { position:fixed; top:50%; left:50%; width:3px; height:3px;
               margin:-1.5px 0 0 -1.5px; background:#e6dcc9; border-radius:50%;
               opacity:.4; z-index:10; pointer-events:none; }

  #toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
           z-index:12; text-align:center; pointer-events:none; opacity:0;
           font-size:13px; letter-spacing:.26em; text-transform:uppercase; }
  #toast.show { animation:toastIn 2.4s ease-out; }
  @keyframes toastIn { 0%{opacity:0;transform:translate(-50%,-40%)}
    12%{opacity:1;transform:translate(-50%,-50%)} 75%{opacity:1} 100%{opacity:0} }

  #vignette { position:fixed; inset:0; z-index:11; pointer-events:none; opacity:0;
              background:radial-gradient(circle at 50% 50%,
                         rgba(0,0,0,0) 12%, rgba(0,0,0,.96) 62%);
              transition:opacity .6s; }
  /* they're touching you */
  #hurt { position:fixed; inset:0; z-index:11; pointer-events:none; opacity:0;
          background:radial-gradient(circle at 50% 50%,
                     rgba(120,0,0,0) 35%, rgba(150,10,10,.55) 100%);
          transition:opacity .18s; }
  #flash { position:fixed; inset:0; z-index:11; pointer-events:none; opacity:0;
           background:#ffd9a0; transition:opacity .45s; }

  .overlay { position:fixed; inset:0; z-index:20; display:flex; flex-direction:column;
             align-items:center; justify-content:center; text-align:center;
             background:radial-gradient(circle at 50% 45%, #131520 0%, #05060a 75%); }
  .overlay.hidden { display:none; }
  h1 { font-family:'Bodoni Moda',serif; font-size:clamp(42px,7.5vw,90px); font-weight:700;
       letter-spacing:-.02em; line-height:.95; }
  h1 em { font-style:italic; color:#c8a04a; }
  h1.dead em { color:#c0402a; }
  .sub { margin-top:16px; font-size:12px; letter-spacing:.26em; text-transform:uppercase;
         opacity:.5; max-width:460px; line-height:2; }
  .keyhints { margin-top:26px; font-size:11px; line-height:2.2; opacity:.6;
              max-width:520px; }
  kbd { border:1px solid rgba(230,220,201,.3); border-radius:3px; padding:1px 7px;
        font-family:inherit; font-size:10px; }
  button { margin-top:26px; pointer-events:auto; cursor:pointer; background:none;
           border:1px solid #c8a04a; color:#c8a04a; font-family:inherit; font-size:12px;
           letter-spacing:.24em; text-transform:uppercase; padding:14px 34px; transition:.18s; }
  button:hover, button:focus-visible { background:#c8a04a; color:#05060a; outline:none; }
  .time-big { font-family:'Bodoni Moda',serif; font-size:52px; color:#c8a04a; margin-top:4px; }
  select { pointer-events:auto; background:#05060a; color:#e6dcc9;
           border:1px solid rgba(230,220,201,.25); font-family:inherit; font-size:11px;
           letter-spacing:.16em; padding:12px; margin-top:22px; text-transform:uppercase; }
  #paused { position:fixed; inset:0; z-index:15; display:none; align-items:center;
            justify-content:center; background:rgba(5,6,10,.75); font-size:12px;
            letter-spacing:.3em; text-transform:uppercase; cursor:pointer; }
  #paused.show { display:flex; }

  /* ═══════ TOUCH CONTROLS — hidden on desktop, shown on touch devices ═══════ */
  #touch { display:none; position:fixed; inset:0; z-index:14;
           pointer-events:none; touch-action:none; }
  body.touch #touch { display:block; }

  /* left thumb: virtual stick. appears wherever you put your thumb down. */
  #stick { position:absolute; width:130px; height:130px; border-radius:50%;
           border:1.5px solid rgba(230,220,201,.28);
           background:rgba(10,12,18,.35); opacity:0;
           transform:translate(-50%,-50%); transition:opacity .18s;
           pointer-events:none; }
  #stick.on { opacity:1; }
  #nub { position:absolute; left:50%; top:50%; width:52px; height:52px;
         border-radius:50%; background:rgba(230,220,201,.5);
         border:1px solid rgba(230,220,201,.7);
         transform:translate(-50%,-50%); }

  /* right thumb: drag anywhere on the right half to look. no widget needed. */
  #lookzone { position:absolute; right:0; top:0; bottom:0; width:52%;
              pointer-events:auto; }
  #movezone { position:absolute; left:0; top:0; bottom:0; width:48%;
              pointer-events:auto; }

  .tbtn { position:absolute; pointer-events:auto; border-radius:50%;
          display:grid; place-items:center; text-align:center;
          font-family:'IBM Plex Mono',monospace; text-transform:uppercase;
          letter-spacing:.1em; -webkit-tap-highlight-color:transparent;
          background:rgba(10,12,18,.5); backdrop-filter:blur(2px);
          transition:transform .08s, background .12s; }
  .tbtn:active, .tbtn.hit { transform:scale(.9); }

  /* flare: the big one. it's your weapon, it should feel like a trigger. */
  #bFlare { right:22px; bottom:118px; width:88px; height:88px;
            border:2px solid #c8a04a; color:#c8a04a; font-size:10px;
            box-shadow:0 0 22px rgba(200,160,74,.25) inset; }
  #bFlare:active, #bFlare.hit { background:rgba(200,160,74,.35); }
  #bFlare.cold { border-color:rgba(200,160,74,.25); color:rgba(200,160,74,.3);
                 box-shadow:none; }

  #bRelight { right:126px; bottom:150px; width:62px; height:62px;
              border:1.5px solid rgba(255,138,60,.75); color:#ff8a3c; font-size:9px; }
  #bRelight:active, #bRelight.hit { background:rgba(255,138,60,.3); }

  #bUse { right:126px; bottom:60px; width:58px; height:58px;
          border:1.5px solid rgba(143,211,196,.7); color:#8fd3c4; font-size:9px; }
  #bUse:active, #bUse.hit { background:rgba(143,211,196,.3); }

  #bRun { left:22px; bottom:150px; width:62px; height:62px;
          border:1.5px solid rgba(230,220,201,.4); color:rgba(230,220,201,.7);
          font-size:9px; }
  #bRun.on { background:rgba(230,220,201,.25); border-color:rgba(230,220,201,.9);
             color:#e6dcc9; }

  /* ═══════ SMALL SCREENS ═══════ */
  @media (max-width: 820px), (pointer: coarse) {
    #hud { padding:12px 14px; }
    .val { font-size:18px; }
    .stat { font-size:9px; letter-spacing:.16em; }
    #keys { top:52px; left:14px; gap:6px; }
    .keyslot { width:22px; height:22px; font-size:11px; }
    /* minimap moves up out of the thumbs' way, and shrinks */
    #map { width:92px; height:92px; bottom:auto; top:52px; right:14px; }
    /* fuel bar sits high — the bottom belongs to your hands now */
    #fuelwrap { bottom:auto; top:calc(100% - 62px); width:min(300px,64vw); }
    #fuellabel { font-size:9px; letter-spacing:.16em; margin-top:5px; }
    #crosshair { opacity:.25; }
    h1 { font-size:clamp(34px,11vw,58px); }
    .sub { font-size:10px; letter-spacing:.18em; line-height:1.9;
           padding:0 24px; margin-top:12px; }
    .keyhints { font-size:10px; padding:0 20px; line-height:2; }
    button { padding:16px 30px; font-size:11px; margin-top:22px; }
    select { font-size:11px; padding:14px; }
    #toast { font-size:11px; letter-spacing:.16em; padding:0 30px; width:100%; }
  }
  /* landscape phones are short — claw back vertical space */
  @media (max-height: 480px) and (pointer: coarse) {
    #map { width:74px; height:74px; top:44px; }
    #fuelwrap { top:calc(100% - 52px); }
    #bFlare { width:74px; height:74px; bottom:14px; right:16px; }
    #bRelight { width:54px; height:54px; bottom:40px; right:104px; }
    #bRun { width:54px; height:54px; bottom:40px; left:16px; }
    #bUse { width:50px; height:50px; bottom:14px; right:96px; }
    .keyhints { display:none; }
  }

  /* ═══════ ARTIFACTS / INVENTORY ═══════ */
  #inv { position:fixed; left:22px; bottom:26px; z-index:10; display:flex; gap:8px; }
  .islot { width:44px; height:44px; border:1px solid rgba(230,220,201,.2);
           display:grid; place-items:center; position:relative;
           background:rgba(5,6,10,.6); cursor:pointer; pointer-events:auto;
           transition:.2s; }
  .islot .ico { font-size:18px; opacity:.25; }
  .islot .n   { position:absolute; right:2px; bottom:1px; font-size:9px; opacity:.5; }
  .islot .hk  { position:absolute; left:2px; top:1px; font-size:8px; opacity:.3; }
  .islot.has { border-color:rgba(200,160,74,.6); }
  .islot.has .ico { opacity:1; color:#c8a04a; }
  .islot.has .n   { opacity:.9; color:#c8a04a; }
  .islot.on { background:rgba(200,160,74,.2); box-shadow:0 0 12px rgba(200,160,74,.3); }
  @media (max-width:820px),(pointer:coarse){
    #inv { left:14px; bottom:auto; top:calc(100% - 130px); gap:5px; }
    .islot { width:38px; height:38px; }
  }

  /* relics you're wearing */
  #relics { position:fixed; top:64px; left:22px; margin-top:34px; z-index:10;
            font-size:9px; letter-spacing:.16em; text-transform:uppercase;
            opacity:.55; line-height:1.9; color:#8fd3c4; }
  @media (max-width:820px),(pointer:coarse){ #relics{ left:14px; top:52px; } }