@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; background: #12100c; overflow: hidden;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  touch-action: none; }

#bbb-game {
  position: relative; width: 100vw; height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 20%, #3a2a10 0%, #17130b 70%);
  outline: none; overflow: hidden;
}

#bbb-canvas {
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #0d0d10;
  box-shadow: 0 0 0 4px #ff7a18, 0 0 40px rgba(0,0,0,0.6);
  border-radius: 4px;
}

/* ---------- overlay (menus / dialogs) ---------- */
#bbb-overlay {
  position: absolute; inset: 0; display: none;
  align-items: center; justify-content: center;
  flex-direction: column; z-index: 20; pointer-events: none;
}
#bbb-overlay.bbb-bottom { align-items: center; justify-content: flex-end; padding-bottom: 6vh; }

.bbb-panel {
  pointer-events: auto;
  background: rgba(255, 247, 232, 0.96);
  border: 4px solid #ff7a18;
  border-radius: 14px;
  box-shadow: 0 8px 0 rgba(120,60,10,0.5), 0 0 0 4px #1a1a1a;
  padding: 18px 22px; max-width: 92%;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.bbb-title {
  font-family: "Press Start 2P", monospace; font-size: 18px; color: #e0620f;
  text-shadow: 2px 2px 0 #1a1a1a; margin-bottom: 4px; text-align: center;
}
.bbb-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.bbb-btn {
  pointer-events: auto; cursor: pointer;
  font-family: "Press Start 2P", monospace; font-size: 12px; color: #fff;
  background: linear-gradient(#ff8c1a, #e0620f);
  border: 3px solid #1a1a1a; border-radius: 10px;
  padding: 12px 16px; box-shadow: 0 4px 0 #a5450a;
  transition: transform 0.06s ease, box-shadow 0.06s ease;
}
.bbb-btn:hover { transform: translateY(-1px); }
.bbb-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #a5450a; }
.bbb-btn.wide { font-size: 11px; }

.bbb-startimg { pointer-events: auto; cursor: pointer; width: min(320px, 70vw); height: auto;
  image-rendering: pixelated; filter: drop-shadow(0 6px 0 rgba(120,60,10,0.4));
  transition: transform 0.08s ease; }
.bbb-startimg:hover { transform: scale(1.04); }
.bbb-startimg:active { transform: scale(0.97); }

.bbb-howto { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.bbb-howrow { display: flex; gap: 12px; align-items: center; font-family: monospace; font-size: 14px; color: #3a2a10; }
.bbb-howrow b { display: inline-block; min-width: 74px; background: #ffd166; border: 2px solid #1a1a1a;
  border-radius: 6px; padding: 4px 6px; text-align: center; color: #1a1a1a; }
.bbb-howrow span { flex: 1; }

.bbb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bbb-lvl {
  pointer-events: auto; cursor: pointer; width: 52px; height: 52px;
  font-family: "Press Start 2P", monospace; font-size: 14px; color: #fff;
  background: linear-gradient(#ff8c1a, #e0620f); border: 3px solid #1a1a1a; border-radius: 8px;
  box-shadow: 0 3px 0 #a5450a;
}
.bbb-lvl.locked { background: #7a7a7a; cursor: default; box-shadow: 0 3px 0 #4a4a4a; }

.bbb-stats { font-family: monospace; font-size: 16px; color: #3a2a10; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.bbb-stats b { color: #e0620f; }

/* ---------- topbar ---------- */
#bbb-topbar {
  position: absolute; top: 10px; right: 10px; display: none; gap: 8px; z-index: 25;
}
.bbb-icon {
  pointer-events: auto; cursor: pointer; width: 40px; height: 40px;
  font-size: 18px; color: #fff; background: rgba(26,26,26,0.7);
  border: 2px solid #ff7a18; border-radius: 8px;
}
.bbb-icon:active { transform: scale(0.93); }

/* ---------- touch controls ---------- */
#bbb-touch {
  position: absolute; inset: 0; display: none; z-index: 22; pointer-events: none;
  align-items: flex-end; justify-content: space-between; padding: 0 18px 22px;
}
.bbb-dpad, .bbb-actions { display: flex; gap: 14px; pointer-events: none; }
.bbb-tbtn {
  pointer-events: auto; width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,140,26,0.32); border: 3px solid rgba(255,255,255,0.55);
  color: #fff; font-size: 22px; font-family: monospace; touch-action: none;
  backdrop-filter: blur(2px);
}
.bbb-tbtn.pressed { background: rgba(255,140,26,0.7); }
.bbb-tbtn.jump { background: rgba(76,175,80,0.32); }
.bbb-tbtn.hammer { width: 84px; height: 84px; font-size: 30px; background: rgba(224,98,15,0.42); }
.bbb-tbtn.crouch { background: rgba(90,120,200,0.32); }

@media (max-width: 640px) {
  .bbb-tbtn { width: 60px; height: 60px; font-size: 18px; }
  .bbb-tbtn.hammer { width: 72px; height: 72px; }
  .bbb-title { font-size: 13px; }
  .bbb-btn { font-size: 10px; padding: 10px 12px; }
}