/* ══════════════════════════════════════════════════════════════════════════
   Chaos Hold'em — View Tab Camera System
   ══════════════════════════════════════════════════════════════════════════
   CSS transforms on #table for zoom/pan camera presets.
   Only active in portrait mode when drawer is enabled.
   ══════════════════════════════════════════════════════════════════════════ */

@media (orientation: portrait) {

  /* Smooth camera transitions on the table */
  .drawer-enabled #table {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform-origin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Disable CSS transition during active gestures */
  .drawer-enabled #table.camera-gesturing {
    transition: none !important;
  }

  /* Prevent zoomed-in table from overflowing the game container */
  .drawer-enabled #game-container {
    overflow: hidden;
  }

  /* Ensure table area (first grid row) also clips overflow */
  .drawer-enabled #table {
    overflow: visible;
  }

}

/* Snap-back icon — small circle, top-right corner.
   Lives outside #game-container (direct child of body) so
   position:fixed works on Safari even when ancestors have transforms. */
.camera-snap-back {
  position: fixed;
  top: max(10px, env(safe-area-inset-top, 0px));
  right: 10px;
  z-index: 10010;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: snap-back-fade-in 0.25s ease;
}
.camera-snap-back svg { flex-shrink: 0; }

@keyframes snap-back-fade-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}