/* ================================================
   DSNAKES GAMING — Diamondback (Modern Games)
   css/diamondback.css
   Phase 5 tech-demo: Three.js scene, faceted terrain, movement/collision,
   single-player, no networking yet (see Phase 6+ in the roadmap).
   Kept separate from css/games.css per the existing per-concern split.
   ================================================ */

.diamondback-page { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.db-canvas-wrap {
  position: relative; width: 100%; aspect-ratio: 16/9; max-height: 640px;
  background: #04070a; border: 1px solid var(--border-color);
  border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--glow-sm);
  touch-action: none;
}
#db-canvas { width: 100%; height: 100%; display: block; }

.db-hud {
  position: absolute; top: 0.6rem; left: 0.6rem;
  display: flex; flex-direction: column; gap: 0.2rem;
  font-size: 0.72rem; color: #cfe8d4; text-shadow: 0 1px 3px #000;
  pointer-events: none; user-select: none;
}

.db-overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.75rem;
  background: rgba(3, 7, 3, 0.88); text-align: center; padding: 1rem;
  z-index: 5;
}
.db-overlay.hidden { display: none; }

.db-joystick {
  position: absolute; bottom: 1rem; left: 1rem;
  width: 96px; height: 96px; border-radius: 50%;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.15);
  touch-action: none;
}
.db-joystick-nub {
  position: absolute; top: 50%; left: 50%; width: 40px; height: 40px;
  margin: -20px 0 0 -20px; border-radius: 50%;
  background: rgba(76,175,80,0.55); border: 1px solid rgba(76,175,80,0.9);
}
.db-jump-btn {
  position: absolute; bottom: 1.1rem; right: 1.1rem;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(76,175,80,0.25); border: 1px solid var(--border-color);
  color: var(--text-primary); font-size: 0.7rem; font-family: var(--font-heading);
  touch-action: none; user-select: none;
}
.db-place-btn {
  position: absolute; bottom: 1.1rem; right: 5.6rem;
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255,215,0,0.2); border: 1px solid rgba(255,215,0,0.4);
  color: var(--text-primary); font-size: 0.65rem; font-family: var(--font-heading);
  touch-action: none; user-select: none;
}

.db-crosshair {
  position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; pointer-events: none;
}
.db-crosshair::before, .db-crosshair::after {
  content: ''; position: absolute; background: rgba(255,255,255,0.85);
  box-shadow: 0 0 2px #000;
}
.db-crosshair::before { top: 7px; left: 0; width: 16px; height: 2px; }
.db-crosshair::after { left: 7px; top: 0; width: 2px; height: 16px; }

.db-hotbar {
  position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: 0.3rem; background: rgba(3,7,3,0.55);
  border: 1px solid var(--border-color); border-radius: var(--radius-sm);
  padding: 0.3rem; backdrop-filter: blur(2px);
}
.db-hotbar-slot {
  width: 34px; height: 34px; border-radius: 6px; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.15); display: flex; align-items: center;
  justify-content: center; font-size: 1rem; touch-action: manipulation;
}
.db-hotbar-slot.active { border-color: var(--green-primary); box-shadow: 0 0 6px var(--green-primary); }
.db-hotbar-slot { position: relative; }
.db-hotbar-slot.db-empty { opacity: 0.4; }
.db-hotbar-count {
  position: absolute; bottom: -4px; right: -4px; min-width: 15px; padding: 0 2px;
  border-radius: 7px; background: rgba(3,7,3,0.9); border: 1px solid var(--border-color);
  font-size: 0.55rem; line-height: 15px; text-align: center; font-family: var(--font-body);
}

.db-craft-btn {
  position: absolute; bottom: 5.7rem; right: 1.1rem;
  width: 50px; height: 50px; border-radius: 50%;
  background: rgba(139,94,52,0.35); border: 1px solid rgba(139,94,52,0.6);
  color: var(--text-primary); font-size: 1.1rem;
  touch-action: none; user-select: none;
}

.db-crafting-panel { z-index: 6; }
.db-crafting-list {
  display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 420px;
  max-height: 320px; overflow-y: auto; padding: 0.25rem;
}
.db-recipe-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 0.5rem 0.7rem; text-align: left;
}
.db-recipe-info { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.72rem; }
.db-recipe-info span { color: var(--text-dim); font-size: 0.65rem; }
.db-recipe-row button { font-size: 0.7rem; padding: 0.35rem 0.7rem; white-space: nowrap; }
.db-recipe-row button:disabled { opacity: 0.4; cursor: not-allowed; }

.db-swatch {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgba(255,255,255,0.2); touch-action: manipulation;
}
.db-swatch.active { border-color: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.6); }

.db-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(76,175,80,0.2); border-top-color: var(--green-primary);
  animation: db-spin 0.8s linear infinite;
}
@keyframes db-spin { to { transform: rotate(360deg); } }

.db-toast {
  position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
  background: rgba(3,7,3,0.85); border: 1px solid var(--border-color);
  border-radius: var(--radius-sm); padding: 0.4rem 0.8rem; font-size: 0.72rem;
  color: var(--text-primary); pointer-events: none; opacity: 0; transition: opacity 0.3s;
}
.db-toast.show { opacity: 1; }

.db-reset-btn {
  position: absolute; top: 0.6rem; right: 0.6rem; font-size: 0.65rem;
  padding: 0.35rem 0.6rem; z-index: 4;
}
.db-view-btn {
  position: absolute; top: 0.6rem; right: 9.5rem; font-size: 0.65rem;
  padding: 0.35rem 0.6rem; z-index: 4;
}
.db-fullscreen-btn {
  position: absolute; top: 0.6rem; right: 14.5rem; font-size: 0.65rem;
  padding: 0.35rem 0.6rem; z-index: 4;
}

@media (min-width: 769px) {
  .db-touch-only { display: none; }
}
@media (max-width: 768px) {
  .db-canvas-wrap { aspect-ratio: 4/5; max-height: none; }
  .db-desktop-only { display: none; }
  .db-place-btn { bottom: 5.6rem; right: 1.1rem; }
  .db-craft-btn { bottom: 10.2rem; right: 1.1rem; }
  /* Tighter offsets for the 3-button HUD row — the desktop rem gaps
     between RESET WORLD/VIEW/FULL are sized for their desktop font-size;
     shrinking both keeps them from overlapping on narrow phone widths. */
  .db-reset-btn, .db-view-btn, .db-fullscreen-btn { font-size: 0.58rem; padding: 0.3rem 0.45rem; }
  .db-view-btn { right: 7.2rem; }
  .db-fullscreen-btn { right: 11.4rem; }
}