/* -------- base layout -------- */
html,body{
    height:100%;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#0e1a28;
    font-family:Arial,Helvetica,sans-serif;
  }
  
  /* -------- tank canvas -------- */
  #game{
    display:block;                 /* let JS size it; no CSS width/height */
    background:#113d6b;
    border:8px solid #05213b;      /* pronounced border */
    border-radius:6px;
    box-shadow:0 0 14px rgba(0,0,0,.7);
  }
  
  /* -------- HUD -------- */
  #ui{
    position:fixed;
    top:10px; left:50%;
    transform:translateX(-50%);
    color:#fff; text-align:center;
    font-size:1rem; user-select:none;
  }
  
  /* -------- mobile controls -------- */
  .swimBtn{
    position:fixed; left:4vw; bottom:4vh; z-index:10;
    width:20vw; height:20vw; max-width:100px; max-height:100px;
    font-size:min(5.5vw,24px);
    background:#43a9d7; color:#fff; border:none; border-radius:50%;
    box-shadow:0 0 8px #000; user-select:none;
  }
  #pad{
    position:fixed; right:4vw; bottom:4vh; z-index:10;
    display:flex; gap:4vw;
  }
  .ctrlBtn{
    width:18vw; height:18vw; max-width:90px; max-height:90px;
    font-size:min(7vw,32px); line-height:18vw;
    background:rgba(0,0,0,.35); color:#fff; border:none; border-radius:50%;
    user-select:none;
  }
  .ctrlBtn:active,.swimBtn:active{ background:rgba(255,255,255,.18); }