* { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { width: 100%; height: 100%; overflow: hidden; background: #1a1a1a; font-family: 'Segoe UI', Tahoma, sans-serif; }
  #game { position: fixed; inset: 0; }
  canvas { display: block; }

  #hud { position: fixed; inset: 0; pointer-events: none; color: #fff; }
  .meter-wrap { position: absolute; left: 20px; width: 240px; }
  .meter-label { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 4px; text-shadow: 0 1px 2px #000; }
  .meter { height: 16px; background: rgba(0,0,0,.5); border: 2px solid rgba(255,255,255,.6); border-radius: 8px; overflow: hidden; }
  .meter-fill { height: 100%; width: 0%; transition: width .2s ease; }
  #frustWrap { bottom: 116px; }
  #frustFill { background: linear-gradient(90deg,#ffcc00,#ff6600,#ff0000); }
  #hrWrap { bottom: 70px; }
  #hrFill { background: linear-gradient(90deg,#00bfff,#0066ff,#6600ff); }
  #hpWrap { bottom: 24px; }
  #hpFill { width: 100%; background: linear-gradient(90deg,#ff3b30,#ff7b00,#46d65a); }
  #airstrikeBox { bottom: 162px; }
  #airstrikeCount { font-size: 26px; font-weight: 800; line-height: 1; text-shadow: 0 2px 3px #000; color:#9aa7b0; transition: color .2s, text-shadow .2s; }
  #airstrikeCount.ready { color:#ff8533; text-shadow:0 0 10px rgba(255,120,0,.85); }
  #stuartBox { bottom: 208px; }
  #stuartCount { font-size: 26px; font-weight: 800; line-height: 1; text-shadow: 0 2px 3px #000; color:#9aa7b0; transition: color .2s, text-shadow .2s; }
  #stuartCount.ready { color:#a3e06b; text-shadow:0 0 10px rgba(120,230,90,.7); }
  #points { position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:26px; font-weight:800; letter-spacing:1px; text-shadow:0 2px 5px #000; }
  #riceHint { position:absolute; top:48px; left:50%; transform:translateX(-50%); font-size:14px; font-weight:700; color:#ffe08a; text-shadow:0 1px 3px #000; white-space:nowrap; }
  #ballHint { position:absolute; top:72px; left:50%; transform:translateX(-50%); font-size:14px; font-weight:700; color:#ffe21a; text-shadow:0 1px 3px #000; white-space:nowrap; }

  #weapon { position: absolute; right: 20px; bottom: 24px; text-align: right; }
  #weaponName { font-size: 26px; font-weight: 700; text-shadow: 0 2px 4px #000; }
  #weaponHint { font-size: 12px; opacity: .8; text-shadow: 0 1px 2px #000; }

  #score { position: absolute; top: 18px; left: 20px; font-size: 16px; text-shadow: 0 1px 2px #000; }
  #peace { position: absolute; top: 18px; right: 20px; font-size: 16px; text-shadow: 0 1px 2px #000; text-align:right;}
  #watch { position:absolute; top:44px; right:20px; font-size:13px; font-weight:700; text-align:right; text-shadow:0 1px 2px #000; color:#9be39b; }
  #heard { position:absolute; top:66px; right:20px; font-size:12px; opacity:.85; text-align:right; text-shadow:0 1px 2px #000; max-width:280px; }

  #crosshair { position: absolute; top: 50%; left: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); }
  #crosshair:before, #crosshair:after { content:''; position:absolute; background:rgba(255,255,255,.85); }
  #crosshair:before { left:50%; top:0; width:2px; height:100%; transform:translateX(-50%); }
  #crosshair:after { top:50%; left:0; height:2px; width:100%; transform:translateY(-50%); }

  #toast { position:absolute; top:78px; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.6); padding:8px 18px; border-radius:20px; font-size:15px; opacity:0; transition:opacity .3s; text-align:center; }
  #prompt { position:absolute; top:56%; left:50%; transform:translateX(-50%); background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.35); padding:7px 16px; border-radius:10px; font-size:15px; opacity:0; transition:opacity .15s; white-space:nowrap; }
  #prompt kbd { background:#fff; color:#111; border-radius:4px; padding:1px 7px; font-weight:700; margin-right:7px; font-family:inherit; }

  .overlay { position: fixed; inset: 0; background: rgba(10,12,20,.92); color:#fff; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; padding:30px; z-index:10; }
  .overlay h1 { font-size: 46px; margin-bottom: 8px; letter-spacing: 1px; }
  .overlay .sub { font-size: 17px; opacity:.85; margin-bottom: 22px; font-style: italic; }
  .overlay .panel { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:14px; padding:22px 26px; max-width:580px; text-align:left; line-height:1.7; font-size:14px; }
  .overlay kbd { background:#fff; color:#111; border-radius:4px; padding:1px 7px; font-weight:700; font-family:inherit; font-size:13px; }
  .overlay button { margin-top:26px; pointer-events:auto; cursor:pointer; background:#ff6600; color:#fff; border:none; padding:14px 40px; font-size:18px; font-weight:700; border-radius:30px; letter-spacing:1px; }
  .overlay button:hover { background:#ff8533; }
  .tag { display:inline-block; margin-top:14px; font-size:13px; opacity:.7; }
  .dev { font-size:20px; letter-spacing:4px; opacity:.85; margin:4px 0 30px; text-transform:uppercase; font-weight:700; }
  .dev small { display:block; font-size:11px; letter-spacing:3px; opacity:.6; font-weight:400; margin-bottom:6px; }
  .help-icon { position:absolute; top:22px; right:26px; width:48px; height:48px; border-radius:50%; border:2px solid rgba(255,255,255,.55); background:rgba(255,255,255,.08); color:#fff; font-size:26px; font-weight:700; line-height:44px; text-align:center; cursor:pointer; pointer-events:auto; transition:background .15s,border-color .15s,transform .15s; }
  .help-icon:hover { background:rgba(255,120,0,.28); border-color:#ff8533; transform:scale(1.08); }

  /* mini inventory bar */
  #inventory { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:7px; pointer-events:auto; }
  .slot { position:relative; width:52px; height:52px; border:2px solid rgba(255,255,255,.22); border-radius:10px; background:rgba(0,0,0,.42); display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:border-color .12s, box-shadow .12s, background .12s, transform .12s; }
  .slot .emo { font-size:22px; line-height:1; }
  .slot .num { position:absolute; top:2px; left:5px; font-size:10px; opacity:.65; font-weight:700; }
  .slot .nm  { font-size:7.5px; opacity:.7; margin-top:3px; text-transform:uppercase; letter-spacing:.4px; }
  .slot.locked { opacity:.32; filter:grayscale(1); cursor:default; }
  .slot.locked .emo { filter:blur(.4px); }
  .slot.locked::after { content:'🔒'; position:absolute; bottom:1px; right:3px; font-size:11px; }
  .slot.active { border-color:#ff8533; box-shadow:0 0 12px rgba(255,120,0,.65); background:rgba(255,120,0,.16); transform:translateY(-4px); }

  /* aim-down-sight vignette (non-gun supplies) */
  #adsVignette { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .12s; background:radial-gradient(circle at 50% 50%, transparent 26%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.92) 60%); z-index:5; }
  body.ads #adsVignette { opacity:1; }
  body.ads #crosshair { transform:translate(-50%,-50%) scale(.55); }

  /* rifle scope (gun ADS) */
  #adsScope { position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .1s; z-index:6; }
  body.scoped #adsScope { opacity:1; }
  body.scoped #crosshair { display:none; }            /* hide plain crosshair while scoped */
  /* black surround leaving a circular lens hole in the centre */
  #adsScope::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, transparent 0 33vh, rgba(0,0,0,.97) 33vh 100%); }
  /* the glass lens ring + subtle inner shading */
  #adsScope .lens { position:absolute; top:50%; left:50%; width:66vh; height:66vh; transform:translate(-50%,-50%); border-radius:50%; box-shadow:0 0 0 4px #000, 0 0 0 6px rgba(255,255,255,.12), inset 0 0 60px 14px rgba(0,0,0,.55); }
  /* crosshair reticle inside the lens */
  #adsScope .reticle { position:absolute; top:50%; left:50%; width:66vh; height:66vh; transform:translate(-50%,-50%); }
  #adsScope .reticle::before { content:''; position:absolute; top:0; left:50%; width:1.5px; height:100%; transform:translateX(-50%); background:rgba(20,20,20,.85); }
  #adsScope .reticle::after  { content:''; position:absolute; left:0; top:50%; height:1.5px; width:100%; transform:translateY(-50%); background:rgba(20,20,20,.85); }
  /* centre aiming dot */
  #adsScope .reticle > i { position:absolute; top:50%; left:50%; width:7px; height:7px; transform:translate(-50%,-50%); border-radius:50%; background:#e63b2e; box-shadow:0 0 4px rgba(0,0,0,.6); }

  /* airstrike explosion flash */
  #airstrikeFlash { position:fixed; inset:0; pointer-events:none; background:#fff; opacity:0; z-index:7; }
  /* red flash when HR hits you */
  #hurtFlash { position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 50%, transparent 30%, rgba(200,0,0,.6) 100%); opacity:0; z-index:7; transition:opacity .35s; }
  /* HR manhunt warning banner */
  #hrAlert { position:absolute; top:104px; left:50%; transform:translateX(-50%); background:rgba(150,0,0,.82); color:#fff; font-weight:700; font-size:14px; padding:8px 18px; border-radius:20px; text-shadow:0 1px 2px #000; box-shadow:0 0 18px rgba(255,0,0,.5); animation:hrpulse 1s ease-in-out infinite; }
  @keyframes hrpulse { 0%,100%{ box-shadow:0 0 12px rgba(255,0,0,.4); } 50%{ box-shadow:0 0 26px rgba(255,40,40,.85); } }

  /* airstrike target-selection mini-map */
  #strikeMap { position:fixed; inset:0; z-index:11; display:flex; align-items:center; justify-content:center; background:rgba(8,10,16,.82); }
  #strikeMap .smbox { background:#10151c; border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:18px 20px; text-align:center; box-shadow:0 12px 40px rgba(0,0,0,.6); }
  #strikeMap .smtitle { color:#ff7043; font-weight:700; letter-spacing:1px; font-size:16px; margin-bottom:12px; }
  #strikeMap #smCanvas { display:block; border:1px solid rgba(255,255,255,.2); border-radius:8px; cursor:crosshair; background:#0c1014; }
  #strikeMap .smhint { color:#cfd6dd; font-size:12px; opacity:.85; margin-top:10px; }
  #strikeMap #smCancel { margin-top:12px; cursor:pointer; background:#333b46; color:#fff; border:none; padding:9px 22px; font-size:14px; font-weight:700; border-radius:20px; }
  #strikeMap #smCancel:hover { background:#454f5c; }

  .hidden { display:none !important; }