.sd-wrap {
  --sd-bg: #0b0f1a;
  --sd-fg: #e6f2ff;
  --sd-accent: #d81e06;   /* China red */
  --sd-gold: #f6c200;     /* China gold */
  --sd-green: #1fa463;    /* Hui green */

  position: relative;
  max-width: 420px;
  margin: 1rem auto;
  background: var(--sd-bg);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  overflow: hidden;
}

.sd-hud {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .5rem;
  padding: .5rem .75rem;
  color: var(--sd-fg);
  font: 600 14px/1.1 ui-sans-serif, system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  user-select: none;
}
.sd-hud-left { text-align: left;  opacity: .85; }
.sd-hud-center { text-align: center; }
.sd-hud-right { text-align: right; opacity: .85; }

#sd-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2/3; /* keep a tall arcade look */
  image-rendering: pixelated; /* retro feel for shapes */
  background: linear-gradient(#07101b, #0b1220 60%, #0b0f1a);
}

.sd-ui {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none; /* buttons enable their own events */
}
.sd-btn {
  pointer-events: auto;
  appearance: none;
  border: 2px solid rgba(255,255,255,.2);
  background: rgba(0,0,0,.35);
  color: var(--sd-fg);
  padding: .6rem 1rem;
  border-radius: 10px;
  font-weight: 800;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
  transition: transform .1s ease, background .2s ease;
}
.sd-btn:hover { transform: translateY(-1px); background: rgba(0,0,0,.5); }
.sd-start, .sd-restart { font-size: 16px; }
.sd-pause {
  position: absolute; left: .5rem; top: 2rem;  /* below HUD */
  font-size: 13px;
  opacity: .9;
}
.sd-mute {
  position: absolute; left: .5rem; top: 5rem;  /* below HUD */
  font-size: 16px;
  opacity: .9;
}

/* Visibility states toggled by JS */
.sd-start { display: none; }
.sd-restart { display: none; }
.sd-wrap.is-ready .sd-start   { display: inline-block; }
.sd-wrap.is-playing .sd-pause { display: inline-block; }
.sd-wrap.is-over .sd-restart  { display: inline-block; }

.sd-touch {
  position: absolute;
  bottom: 0;
  height: 40%;
  z-index: 2;
  touch-action: none;
}
.sd-left  { left: 0;  width: 40%; }
.sd-right { right: 0; width: 40%; }
.sd-shoot {
  left: 40%; width: 20%;
  height: 35%;
  bottom: 0;
  opacity: 0.02; /* nearly invisible; adjust if you want */
}

/* Small screens: tighten HUD */
@media (max-width: 380px) {
  .sd-hud { font-size: 12px; }
  .sd-pause { top: 2rem; }
}


/* Make canvas and touch zones not trigger page scroll/zoom */
#sd-canvas, .sd-touch, .sd-wrap { touch-action: none; -webkit-user-select: none; user-select: none; }

/* Enlarge zones: bottom 45% of the game area */
.sd-touch { bottom: 0; height: 45%; }
.sd-left  { left: 0;  width: 45%; }
.sd-right { right: 0; width: 45%; }

/* Optional: remove center shoot zone if using the fire button */
.sd-shoot { display: none; }



/* Prevent page scroll in game area */
#sd-canvas, .sd-touch, .sd-wrap { touch-action: none; -webkit-user-select: none; user-select: none; }

/* Bigger thumb zones */
.sd-touch { bottom: 0; height: 45%; }
.sd-left  { left: 0;  width: 45%; }
.sd-right { right: 0; width: 45%; }

/* Hide center shoot zone if using the button */
.sd-shoot { display: none; }

/* Big fire button (right thumb) */
.sd-fire{
  position: absolute;
  right: .9rem; bottom: .9rem;
  width: 64px; height: 64px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
  background: rgba(0,0,0,.35);
  color: #fff; font-weight: 800; font-size: 22px;
  display: grid; place-items: center;
  z-index: 3; pointer-events: auto;
  backdrop-filter: blur(4px);
}
.sd-fire:active { transform: scale(.96); }