/* The live renderer stays inside the existing game's arena; HUD, cards and music remain the same. */
#prender { padding: 8px 12px; border: 1px solid #82734b; border-radius: 10px; background: #262719; }
#prender[hidden] { display: none; }
.live-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
#stage.rendering-3d #ground { visibility: hidden; }
#stage.rendering-3d #field { z-index: 1; background: transparent; }
.live-3d-tools { position: absolute; top: 10px; left: 12px; z-index: 4; max-width: calc(100% - 190px); color: #e9e2cf; padding: 8px 10px; border: 1px solid #515b68; border-radius: 9px; background: #101824e8; font: 11px system-ui; }
.live-3d-tools div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.live-3d-tools b { color: #e2c16a; letter-spacing: .08em; }
.live-3d-tools span, .live-3d-tools small { color: #b5c2cc; }
.live-3d-tools nav { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }
.live-3d-tools button { padding: 5px 8px; font: 600 11px system-ui; color: #eee6ce; background: #273343; border: 1px solid #56616d; border-radius: 6px; cursor: pointer; }
.live-3d-tools button:hover { background: #3d4b5f; }
#stage.rendering-3d .herobar { top: 106px; bottom: auto; left: 12px; right: auto; max-width: calc(100% - 190px); flex-wrap: wrap; }
#stage.rendering-3d #toasts { top: 164px; left: 12px; transform: none; align-items: stretch; max-height: calc(100% - 260px); overflow: hidden; }
.live-3d-stats { position: absolute; right: 10px; bottom: 54px; z-index: 3; color: #d1e0eb; background: #0e1528b8; padding: 4px 6px; border-radius: 5px; font: 10px system-ui; pointer-events: none; }
.live-3d-tools[hidden], .live-3d-canvas[hidden], .live-3d-stats[hidden] { display: none; }
@media(max-width: 780px) {
  .live-3d-tools { top: 5px; left: 5px; max-width: calc(100% - 110px); padding: 5px 6px; }
  .live-3d-tools span, .live-3d-tools small { display: none; }
  .live-3d-tools nav { margin: 5px 0 0; }
  .live-3d-tools button { padding: 7px; }
  #stage.rendering-3d .herobar { top: 78px; left: 5px; max-width: calc(100% - 110px); }
  #stage.rendering-3d #toasts { top: 132px; left: 5px; }
}