:root { --teal:#51d6c3; --sand:#f0d9ae; --rust:#d2622f; --ink:#182430; }
* { box-sizing: border-box; }
html, body { margin:0; padding:0; height:100%; overflow:hidden; background:#0d141d;
  font-family: "Trebuchet MS", "Segoe UI", sans-serif; color:var(--sand); }
#game-canvas { position:fixed; inset:0; display:block; touch-action:none; }
#ui-root { position:fixed; inset:0; pointer-events:none; }
.hud { position:fixed; inset:0; pointer-events:none; }
.barw { position:absolute; top:14px; width:180px; height:22px; background:rgba(10,16,24,.65);
  border:1px solid rgba(81,214,195,.5); border-radius:4px; }
.barw span { position:absolute; left:8px; top:3px; font-size:11px; letter-spacing:1px; z-index:2; }
.barw .fill { height:100%; border-radius:3px; background:var(--teal); width:100%; }
#hp-fill { position:absolute; }
#hp-fill { background:#51d6c3; }
#ammo-fill { background:#f0d9ae; }
#hp-fill, #ammo-fill { position:absolute; left:0; top:0; height:100%; border-radius:3px; }
.barw { overflow:hidden; }
.bar-hp { left:16px; top:14px; }
.bar-ammo { left:16px; top:42px; }
.stat { position:absolute; top:14px; right:16px; font-size:13px; letter-spacing:1px;
  background:rgba(10,16,24,.6); padding:5px 10px; border-radius:4px;
  border:1px solid rgba(240,217,174,.25); }
.stat.enemies { top:42px; }
.stat.score { top:70px; color:var(--teal); }
.toast { position:absolute; top:20%; left:50%; transform:translateX(-50%);
  font-size:26px; letter-spacing:3px; color:var(--teal); text-shadow:0 2px 8px #000;
  opacity:0; transition:opacity .3s; }
.toast.show { opacity:1; }
.crosshair { position:absolute; left:50%; top:50%; width:26px; height:26px;
  transform:translate(-50%,-50%); opacity:.8; }
.crosshair::before, .crosshair::after { content:""; position:absolute; background:rgba(255,240,210,.9); }
.crosshair::before { left:12px; top:0; width:2px; height:26px; }
.crosshair::after { top:12px; left:0; height:2px; width:26px; }
.hurt-flash { position:absolute; inset:0; background:radial-gradient(ellipse at center,
  transparent 55%, rgba(216,74,53,.55)); opacity:0; }
.hurt-flash.go { animation:flashfade .5s ease-out; }
@keyframes flashfade { 0%{opacity:1} 100%{opacity:0} }
.overlay { position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:18px; background:rgba(13,20,29,.86); opacity:0; pointer-events:none;
  transition:opacity .35s; text-align:center; padding:20px; }
.overlay.show { opacity:1; pointer-events:auto; }
.overlay .title { font-size:min(9vw,54px); letter-spacing:6px; color:var(--sand);
  text-shadow:0 0 18px rgba(81,214,195,.4); }
.overlay .sub { font-size:15px; line-height:1.7; max-width:560px; color:#c9b98f; }
.big-btn { pointer-events:auto; cursor:pointer; font:inherit; font-size:19px; letter-spacing:2px;
  padding:14px 42px; border-radius:6px; border:1px solid var(--teal);
  background:linear-gradient(#1c4b46,#12332f); color:#eafff8; }
.big-btn:hover { background:linear-gradient(#246a62,#173f39); }
#pause-overlay { position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(13,20,29,.6); font-size:28px; letter-spacing:4px; }
#pause-overlay.show { display:flex; }
.touch-controls { position:fixed; inset:auto 0 0 0; pointer-events:none; display:none; }
.pad-grid { pointer-events:auto; display:grid; gap:8px; padding:12px 14px 16px;
  grid-template-columns:repeat(4,64px); grid-auto-rows:52px; justify-content:space-between; }
.tbtn { pointer-events:auto; font:inherit; font-size:20px; width:64px; height:52px;
  border-radius:10px; border:1px solid rgba(240,217,174,.4); background:rgba(20,32,44,.55);
  color:var(--sand); touch-action:none; user-select:none; -webkit-user-select:none; }
.tbtn.down { background:rgba(81,214,195,.45); }
.tbtn.fire { grid-column:4; grid-row:1 / span 2; width:76px; height:112px; font-size:17px;
  border-color:var(--rust); color:#ffd9a8; margin-left:auto; }
.tbtn.tl { grid-column:2; } .tbtn.tr { grid-column:3; }
@media (pointer:coarse), (max-width:900px) {
  .touch-controls { display:block; }
  .pad-grid { grid-template-columns:repeat(5,56px); grid-auto-rows:48px; gap:7px; }
  .pad-grid .tbtn { width:56px; height:48px; font-size:17px; }
  .pad-grid .tbtn:nth-child(1) { grid-column:1; grid-row:1; }
  .pad-grid .tbtn:nth-child(2) { grid-column:2; grid-row:1; }
  .pad-grid .tbtn:nth-child(3) { grid-column:3; grid-row:1; }
  .pad-grid .tbtn:nth-child(4) { grid-column:4; grid-row:1; }
  .pad-grid .tbtn:nth-child(6) { grid-column:1; grid-row:2; }
  .pad-grid .tbtn:nth-child(7) { grid-column:2; grid-row:2; }
  .pad-grid .tbtn:nth-child(8) { grid-column:3; grid-row:2; }
  .pad-grid .tbtn:nth-child(9) { grid-column:4; grid-row:2; }
  .pad-grid .tbtn.fire { grid-column:5; grid-row:1 / span 2; margin-left:0; width:62px; height:103px; }
}