/* Companions decorate the chrome; no art overlaps an engine or a touch surface. */
.arcade-shell .arcade-scene.has-companion { position: relative; }
.arcade-shell .arcade-companion {
  position: absolute; inset: 0; display: flex; justify-content: flex-end; pointer-events: none;
  background: var(--arcade-sage, #e8ece5); color: var(--arcade-ink, #242631); contain: layout paint;
}
.arcade-shell .arcade-companion canvas { flex: 0 0 288px; }
.arcade-companion-caption {
  position: absolute; bottom: 1px; right: 0; max-width: min(100%, 34rem); padding: 2px 6px;
  font: 600 11px/1.3 ArcadeBricolage, Bricolage, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--arcade-ink, #242631); background: var(--arcade-sage, #e8ece5);
}
.arcade-companion-caption:empty { display: none; }
.arcade-experience-meta {
  display: grid; gap: 6px; margin: 20px 0; padding: 14px 16px; border: 1px solid var(--arcade-line, #b9c4b0);
  border-radius: 12px; background: var(--arcade-paper, #f9f8e9); color: var(--arcade-ink, #242631);
  font: 500 13px/1.5 ArcadeBricolage, Bricolage, sans-serif;
}
.arcade-experience-meta p { margin: 0; }
.arcade-save-note { color: var(--arcade-muted, #596952); }
.arcade-controller { padding-top: 8px; border-top: 1px dashed var(--arcade-line, #b9c4b0); }
.arcade-controller summary { min-height: 44px; display: list-item; align-content: center; font-weight: 700; cursor: pointer; }
.arcade-controller p { margin: 0 0 8px; }
.arcade-controller small { display: block; margin-top: 8px; }
.arcade-controller-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 14px; margin: 8px 0 12px; padding: 12px; border: 1px solid var(--arcade-line, #b9c4b0); border-radius: 8px; }
.arcade-controller-map legend { padding: 0 4px; }
.arcade-controller-map label { display: grid; gap: 3px; text-transform: capitalize; }
.arcade-controller-map select, .arcade-controller button { min-height: 44px; padding: 8px; border: 1px solid var(--arcade-line, #b9c4b0); border-radius: 6px; background: var(--arcade-paper, #f9f8e9); color: inherit; font: inherit; }
.arcade-controller :is(button, select, summary):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
@media (max-width: 600px) {
  .arcade-shell .arcade-companion { justify-content: center; }
  .arcade-companion-caption { right: 50%; transform: translateX(50%); }
  .arcade-experience-meta { padding: 12px; }
}
@media (forced-colors: active) {
  .arcade-companion canvas { visibility: hidden; }
  .arcade-experience-meta, .arcade-controller-map, .arcade-controller :is(button, select) { border-color: CanvasText; background: Canvas; color: CanvasText; }
}
.arcade-controller-enable { display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; }
.arcade-controller-enable input { width: 22px; height: 22px; accent-color: var(--arcade-ink, #242631); }