:root{ --wt:#e6ebee; --red:#ff3b30; --grn:#71e089; --amb:#e0b35c; }
  *{margin:0;padding:0;box-sizing:border-box}
  html,body{width:100%;height:100%;overflow:hidden;background:#000;
    font-family:"Courier New",ui-monospace,monospace;color:var(--wt);
    user-select:none;-webkit-user-select:none}
  canvas{display:block;cursor:none}

  /* ============ HABILLAGE BODYCAM (toujours à l'écran en jeu) ============ */
  #ui{position:fixed;inset:0;pointer-events:none;z-index:10;display:none}
  .ui-txt{position:absolute;font-size:13px;letter-spacing:.14em;
    color:var(--wt);text-shadow:0 0 4px rgba(0,0,0,.95),1px 1px 0 rgba(0,0,0,.7);
    opacity:.92}
  .corner{position:absolute;width:26px;height:26px;opacity:.5}
  #cTL{top:18px;left:18px;border-top:2px solid var(--wt);border-left:2px solid var(--wt)}
  #cTR{top:18px;right:18px;border-top:2px solid var(--wt);border-right:2px solid var(--wt)}
  #cBL{bottom:18px;left:18px;border-bottom:2px solid var(--wt);border-left:2px solid var(--wt)}
  #cBR{bottom:18px;right:18px;border-bottom:2px solid var(--wt);border-right:2px solid var(--wt)}
  #recRow{top:26px;left:56px;display:flex;align-items:center;gap:9px}
  #recDot{width:11px;height:11px;border-radius:50%;background:var(--red);
    box-shadow:0 0 7px rgba(255,59,48,.8)}
  #recDot.off{opacity:.12;box-shadow:none}
  #clock{top:26px;right:56px;text-align:right;line-height:1.55}
  #camId{bottom:26px;left:56px;line-height:1.6;font-size:12px;opacity:.75}
  #ammoHud{bottom:26px;right:56px;text-align:right;font-size:15px;
    opacity:0;transition:opacity .4s;line-height:1.6}
  #ammoHud b{font-size:22px;letter-spacing:.06em}
  #ammoHud.low b{color:var(--red)}
  #prompt{bottom:22%;left:50%;transform:translateX(-50%);font-size:13px;
    opacity:0;transition:opacity .2s;white-space:nowrap}
  #feed{top:12%;left:50%;transform:translateX(-50%);font-size:13px;
    opacity:0;transition:opacity .5s;white-space:nowrap;color:#d9e2e8}

  /* état (TAB maintenu) */
  #tabPanel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    background:rgba(2,4,6,.82);border:1px solid rgba(230,235,238,.35);
    padding:18px 26px;font-size:13px;line-height:2.1;letter-spacing:.14em;
    display:none;text-shadow:0 0 4px rgba(0,0,0,.9)}
  #tabPanel .hp i{display:inline-block;width:22px;height:10px;margin-right:5px;
    background:#22292e;border:1px solid rgba(230,235,238,.4)}
  #tabPanel .hp i.on{background:var(--wt)}

  /* ============ ÉCRANS ============ */
  .screen{position:fixed;inset:0;z-index:30;background:#010203;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;text-align:center;padding:24px;cursor:default}
  .screen.hidden{display:none}
  .screen h1{font-size:26px;letter-spacing:.5em;font-weight:400;color:var(--wt);
    text-indent:.5em}
  .screen h2{font-size:13px;letter-spacing:.35em;font-weight:400;color:#8b969d;
    text-indent:.35em}
  .screen p{max-width:640px;font-size:13px;line-height:1.9;color:#aab4ba;
    letter-spacing:.08em}
  .screen p b{color:var(--wt);font-weight:400}
  .screen .warn{color:var(--amb)}
  .kline{font-size:12px;color:#79848b;line-height:2;letter-spacing:.1em}
  .kline b{color:#cfd8dd;font-weight:400}
  .go{margin-top:14px;font-size:14px;letter-spacing:.3em;color:var(--wt);
    border:1px solid rgba(230,235,238,.5);padding:15px 42px;cursor:pointer;
    background:transparent;font-family:inherit;text-indent:.3em}
  .go:hover{background:rgba(230,235,238,.08)}
  #dead h1{color:var(--red)}
  #dead{background:rgba(1,2,3,.55)}
  #win h1{color:var(--grn)}
  .rule{width:220px;height:1px;background:rgba(230,235,238,.25);margin:6px 0}
  .stats{font-size:12px;letter-spacing:.18em;color:#93a0a7;line-height:2.2}
  .stats b{color:var(--wt);font-weight:400}
  #pauseOv{background:rgba(1,2,3,.72)}
  .blink{animation:bk 1.1s steps(1) infinite}
  @keyframes bk{50%{opacity:.15}}
  .hud-meta{font-size:11px;opacity:.7}
  .hud-reserve{font-size:11px;opacity:.75}
  .objective-label{color:#79848b}
  .initially-hidden{display:none}