.jatrix-scene-stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 2px solid #201e1d;
  background: #e8e6da;
  isolation: isolate;
}

.jatrix-scene-stage > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jatrix-scene-stage.is-ready > img { display: none; }
.jatrix-scene-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }

.jatrix-scene-hud {
  position: absolute;
  left: 12px;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  pointer-events: none;
  font: 11px/1.4 'JetBrains Mono', monospace;
}

.jatrix-scene-label {
  padding: 7px 9px;
  background: #f3f2f2eb;
  border: 1px solid #201e1d;
  color: #201e1d;
  max-width: 66%;
}

.jatrix-scene-actions { display: flex; gap: 4px; pointer-events: auto; }
.jatrix-scene-actions button {
  border: 1px solid #201e1d;
  background: #f3f2f2;
  color: #201e1d;
  padding: 7px 9px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.jatrix-scene-actions button:hover { background: #201e1d; color: #f3f2f2; }
.jatrix-scene-actions button:focus-visible { outline: 2px solid #ec3013; outline-offset: 2px; }
.jatrix-scene-hint {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: #f3f2f2e6;
  border: 1px solid #201e1d;
  padding: 5px 8px;
  font: 11px 'JetBrains Mono', monospace;
  pointer-events: none;
}
@media (max-width: 600px) {
  .jatrix-scene-hud { left: 8px; right: 8px; top: 8px; }
  .jatrix-scene-label { font-size: 9px; max-width: 55%; }
  .jatrix-scene-actions button { padding: 6px; font-size: 10px; }
  .jatrix-scene-hint { display: none; }
}