/* =====================================================================
   3D COMBAT — the stage behind the HUD (combat3d/index.html).
   Everything else comes from combat/combat.css. The stage fills the
   window; its own controls float between the turn order and the card.
   ===================================================================== */
.cb-stage3d {
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 40%, #3a2a1c 0%, #1c130c 55%, #0b0705 100%);
}
.c3-canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* Camera: a quiet row of round buttons, bottom right of the board */
.c3-cam {
  position: absolute;
  right: calc(var(--right-w) + 4px);
  bottom: 14px;
  z-index: 2;
  display: flex;
  gap: 4px;
}
.c3-cam .cb-btn {
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  font-size: 1.05rem;
  background: rgba(20, 15, 11, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.c3-cam .cb-btn:hover { background: rgba(40, 30, 20, .7); }

/* Backdrop picker: top of the board, between the panels */
.c3-backdrop {
  position: absolute;
  top: calc(var(--bar-h) + 6px);
  left: var(--left-w);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  text-shadow: var(--cb-shadow);
}
.c3-backdrop select {
  font-size: .85rem;
  font-weight: 600;
  background: rgba(20, 15, 11, .5);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-radius: 999px;
  padding: .35em .8em;
}
.cb-view3d { min-width: 6em; }

/* Narrow screens stack everything: the stage gets a height of its own,
   and its controls sit at its own edges. */
@media (max-width: 1000px) {
  .c3-cam { right: 10px; }
  .c3-backdrop { top: 10px; left: 10px; }
}

/* First person: above the camera buttons, when a character is selected mid-battle */
.c3-fp {
  position: absolute;
  right: calc(var(--right-w) + 4px);
  bottom: calc(14px + 2.5em + 10px);
  z-index: 2;
  padding: .5em 1em;
  font-size: .9rem;
  font-weight: 700;
  background: rgba(20, 15, 11, .6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.c3-fp[hidden] { display: none; }
.c3-fp.on { background: #d4a531; color: #1a140c; }
@media (max-width: 1000px) { .c3-fp { right: 10px; } }