/* ====== Top HUD bar ====== */
.hudbar {
  display:flex; align-items:center; gap:12px;
  padding:10px 14px;
  background:#151515; border-bottom:1px solid #222;
  position:sticky; top:0; z-index:10;
  min-height: var(--hud-h);
}
.hudstat { background:#1a1a1a; padding:8px 12px; border-radius:10px; border:1px solid #262626; min-width:110px; }
.hudstat .label { font-size:12px; color:#aaa; display:block; }
.hudstat .value { font-size:20px; font-weight:600; line-height:1.1; }

/* Next preview is taller (double-height feel) */
.nextwrap {
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:#1a1a1a; border:1px solid #262626; border-radius:10px; padding:8px 10px;
}
.nextwrap .label { font-size:12px; color:#aaa; }
#next {
  display:block; background:#000; border-radius:8px;
  width: 110px; height: 110px;        /* desktop default */
}

/* ====== Main stage ====== */
.stage { display:grid; place-items:center; padding:var(--gap); }
canvas#game { background:#000; box-shadow:0 0 24px #162f8f; touch-action:none; image-rendering:pixelated; border-radius:10px; }

/* ====== Mobile control bar ====== */
.controls {
  position:sticky; bottom:0; z-index:5;
  display:flex; gap:14px; justify-content:center; align-items:center;
  padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  background:linear-gradient(#121212,#0d0d0d);
  border-top:1px solid #222;
}
.btn {
  width:64px; height:64px; min-width:64px; min-height:64px;
  border-radius:16px; background:#1b1b1b; border:1px solid #2a2a2a;
  display:grid; place-items:center; box-shadow:0 2px 0 #000 inset, 0 0 12px #000;
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.btn:active { transform:translateY(1px); background:#161616; }
.btn img { width:36px; height:36px; display:block; pointer-events:none; }

.mini { font-size:12px; padding:6px 10px; border-radius:8px; border:1px solid #2a2a2a; background:#1b1b1b; color:#ddd; cursor:pointer; }
.mini:active { transform:translateY(1px); }

/* Help button in HUD */
.hud-actions { display:flex; gap:8px; margin-left:4px; }

/* ====== Splash / Help overlay ====== */
.splash {
  position:fixed; inset:0; background:rgba(0,0,0,0.8);
  display:grid; place-items:center; z-index:100;
}
.splash-card {
  width:min(920px, 92vw); max-height:min(86vh, 980px);
  overflow:auto; padding:20px; border-radius:14px; background:#151515; border:1px solid #2a2a2a;
  box-shadow: 0 8px 36px rgba(0,0,0,0.6);
}
.splash h1 { margin:0 0 8px; font-size:26px; }
.splash h2 { margin:18px 0 8px; font-size:18px; color:#ddd; }
.kbd{
  display:inline-block; min-width:1.8em; text-align:center;
  padding:2px 6px; border:1px solid #2a2a2a; border-radius:6px;
  background:#1b1b1b;
  /* add symbol-capable fallbacks */
  font-family: "Segoe UI Symbol","Apple Symbols","Noto Sans Symbols",
               "Noto Sans Symbols 2", system-ui, sans-serif;
}
.splash .actions { display:flex; gap:12px; justify-content:flex-end; margin-top:14px; }
.primary { background:#2b68ff; border-color:#2b68ff; color:#fff; }
.ghost { background:#1b1b1b; color:#ddd; }

/* ====== Mobile adjustments ====== */
@media (max-width:900px) {
  .hudbar { min-height: var(--hud-h-mobile); flex-wrap:wrap; gap:10px; }
  .hudstat { min-width:auto; }
  #next { width: 96px; height: 96px; }
  .nextwrap { margin-left:auto; }
}