#gl { position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; }
#hud { position:fixed; top:8px; left:8px; right:8px; pointer-events:none; }
.hud-row { display:flex; flex-wrap:wrap; gap:6px; }
.hud-chip {
  background:rgba(14,16,38,.72); border:1px solid #35e0c266; border-radius:8px;
  padding:4px 10px; font-size:13px; letter-spacing:.06em; color:#9aa1bd;
}
.hud-chip b { color:#f2ecdf; margin-left:4px; }
.hud-chip.lives b { color:#e8b06a; letter-spacing:.15em; }
#hint { position:fixed; bottom:6px; left:10px; font-size:11px; color:#9aa1bd99; pointer-events:none; margin:0; }
#dpad { position:fixed; right:14px; bottom:14px; width:150px; height:150px; z-index:5; touch-action:none; }
.dbtn {
  position:absolute; width:48px; height:48px; border-radius:12px; border:1px solid #35e0c255;
  background:rgba(24,27,52,.75); color:#35e0c2; font-size:18px; touch-action:none;
  -webkit-user-select:none; user-select:none;
}
.dbtn:active { background:#35e0c233; }
.dbtn.up { left:51px; top:0; } .dbtn.down { left:51px; top:102px; }
.dbtn.left { left:0; top:51px; } .dbtn.right { left:102px; top:51px; }
.overlay { position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(9,10,24,.72); backdrop-filter:blur(3px); z-index:10; }
.card {
  max-width:520px; margin:16px; padding:26px 30px; border-radius:16px;
  background:linear-gradient(160deg,#1c2040,#12142c); border:1px solid #35e0c244;
  box-shadow:0 20px 60px #000a;
}
.card h1 { margin:0 0 6px; font-size:26px; letter-spacing:.12em; color:#e8b06a; }
.card .tag { color:#9aa1bd; margin:0 0 14px; font-style:italic; }
.how { margin:0 0 18px; padding-left:18px; color:#cfd3e6; font-size:14px; }
.how li { margin:6px 0; }
.teal { color:#35e0c2; }
.big { font-size:22px; color:#35e0c2; }
.btn {
  display:inline-block; padding:12px 28px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(90deg,#35e0c2,#2aa8e0); color:#0d0f22; font-weight:700; font-size:16px;
}
.btn:hover { filter:brightness(1.15); }