:root { --sand:#ffd9a0; --rust:#ff7a50; --teal:#7ef0c8; --ink:#1c1410; }
* { margin:0; padding:0; box-sizing:border-box; }
html,body { width:100%; height:100%; overflow:hidden; background:#1c1410;
  font-family:ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, monospace; color:var(--sand); }
#game-canvas { position:fixed; inset:0; display:block; }
#hud { position:fixed; inset:0; pointer-events:none; z-index:30; transition:opacity .3s; }
#hud.dimmed { opacity:.25; }
#topbar { position:absolute; top:10px; left:12px; right:12px; display:flex; gap:18px; }
.stat { background:rgba(28,20,16,.72); border:1px solid rgba(255,217,160,.35); border-radius:8px;
  padding:6px 12px; display:flex; flex-direction:column; min-width:70px; }
.lab { font-size:10px; letter-spacing:.18em; opacity:.75; }
.stat span:last-child { font-size:20px; font-weight:700; color:#fff; }
#bars { position:absolute; bottom:12px; left:12px; display:flex; flex-direction:column; gap:8px; }
.barwrap { display:flex; align-items:center; gap:8px; background:rgba(28,20,16,.72);
  border:1px solid rgba(255,217,160,.35); border-radius:8px; padding:6px 10px; }
.barwrap .lab { font-size:10px; letter-spacing:.15em; width:38px; }
.bar { width:150px; height:10px; background:rgba(255,255,255,.12); border-radius:5px; overflow:hidden; }
#hullfill { height:100%; width:100%; background:var(--teal); border-radius:5px; transition:width .2s; }
#ammo { display:flex; gap:5px; }
#ammo .pip { width:10px; height:18px; border-radius:3px; background:rgba(255,255,255,.15); display:inline-block; }
#ammo .pip.on { background:var(--sand); box-shadow:0 0 8px rgba(255,217,160,.7); }
#ammo .pip.dim { opacity:.35; }
#crosshair { position:absolute; width:44px; height:44px; margin:-22px 0 0 -22px; pointer-events:none; }
.ch-ring { position:absolute; inset:0; border:2px solid rgba(255,217,160,.8); border-radius:50%; }
.ch-dot { position:absolute; left:50%; top:50%; width:4px; height:4px; margin:-2px; background:var(--sand); border-radius:50%; }
#crosshair.ready .ch-ring { border-color:var(--teal); box-shadow:0 0 10px rgba(126,240,200,.6); }
#banner { position:absolute; top:22%; left:50%; transform:translateX(-50%); font-size:clamp(22px,5vw,44px);
  letter-spacing:.35em; color:var(--sand); text-shadow:0 0 18px rgba(255,122,80,.8);
  opacity:0; transition:opacity .35s; }
#banner.go { opacity:1; }
#hitflash { position:absolute; inset:0; background:radial-gradient(circle, transparent 45%, rgba(255,60,40,.45));
  opacity:0; }
#hitflash.go { animation:hitf .5s ease-out; }
@keyframes hitf { 0% { opacity:1; } 100% { opacity:0; } }
#overlay { position:fixed; inset:0; display:none; z-index:50; align-items:center; justify-content:center;
  background:rgba(20,12,8,.55); backdrop-filter:blur(3px); }
#overlay.show { display:flex; }
#panel { max-width:min(560px, 92vw); padding:28px 30px; text-align:center;
  background:linear-gradient(160deg, rgba(44,30,22,.95), rgba(28,20,16,.95));
  border:1px solid rgba(255,217,160,.4); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.5); }
#panel h1 { font-size:clamp(26px,6vw,42px); letter-spacing:.28em; color:var(--sand);
  text-shadow:0 0 24px rgba(255,180,90,.6); margin-bottom:12px; }
#panel p { font-size:14px; line-height:1.6; opacity:.9; margin-bottom:14px; }
#ov-keys { list-style:none; text-align:left; display:inline-block; margin-bottom:18px; }
#ov-keys li { font-size:12.5px; line-height:1.9; opacity:.85; }
#ov-keys b { color:var(--teal); }
.bigbtn { pointer-events:auto; cursor:pointer; font:inherit; font-size:16px; letter-spacing:.22em;
  color:#20140c; background:linear-gradient(180deg,#ffd9a0,#ff9a58); border:none;
  padding:14px 30px; border-radius:10px; font-weight:700; box-shadow:0 6px 24px rgba(255,150,80,.45); }
.bigbtn:hover { transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,150,80,.6); }
#ov-score { margin-top:14px; font-size:18px; letter-spacing:.2em; color:var(--teal); }
.tbtn { pointer-events:auto; font:inherit; color:var(--sand); background:rgba(28,20,16,.65);
  border:1px solid rgba(255,217,160,.45); border-radius:12px; font-size:18px; touch-action:none;
  user-select:none; -webkit-user-select:none; }
.tbtn:active { background:rgba(255,217,160,.35); }