/* The resident occupies the space above the existing status readout. */
.hero-companion { position: relative; padding-bottom: 110px; transform: translateY(110px); }
.hero-companion .status-panel { transform: translateY(290px); }
.hero:has(.gremlin-resident[data-gremlin-lighting="landing"]) .metric-strip { margin-top: calc(var(--space-12) + 290px); }
.gremlin-resident { position: absolute; width: 100%; height: clamp(180px, 23vh, 245px); bottom: calc(100% + 20px); left: 0; isolation: isolate; }
.gremlin-resident[data-gremlin-lighting="landing"] { height: calc(clamp(180px, 23vh, 245px) + 455px); bottom: calc(100% - 270px); }
.gremlin-stage { width: 100%; height: 100%; position: relative; }
.gremlin-stage canvas, .gremlin-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.gremlin-stage canvas { opacity: 0; transition: opacity .5s ease; }
.gremlin-resident[data-state="ready"] canvas { opacity: 1; }
.gremlin-resident[data-state="ready"] .gremlin-fallback { visibility: hidden; }
.gremlin-fallback { padding: 16px 26px; }
.gremlin-greet:disabled { cursor: default; }
.gremlin-controls { position: absolute; bottom: -10px; right: 0; display: flex; gap: 5px; opacity: 0; transition: opacity .2s; }
.gremlin-resident:hover .gremlin-controls, .gremlin-resident:focus-within .gremlin-controls, .gremlin-resident[data-paused="true"] .gremlin-controls { opacity: 1; }
.gremlin-pause { min-width: 44px; min-height: 44px; border: 1px solid var(--border-subtle); border-radius: 50%; color: var(--text-muted); background: var(--canvas); cursor: pointer; }
.gremlin-stage canvas:focus-visible { outline: 2px solid #e3b556; outline-offset: -4px; }
.gremlin-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 54rem) {
  .hero-companion { padding-bottom: 0; transform: none; }
  .hero-companion .status-panel { transform: none; }
  .hero:has(.gremlin-resident[data-gremlin-lighting="landing"]) .metric-strip { margin-top: var(--space-12); }
  .hero-companion { display: grid; grid-template-columns: 1fr minmax(160px, .7fr); align-items: center; gap: 1rem; }
  .hero-companion .status-panel { grid-column: 1; grid-row: 1; }
  .gremlin-resident { position: relative; grid-column: 2; grid-row: 1; inset: auto; height: 210px; }
  .gremlin-resident[data-gremlin-lighting="landing"] { height: 430px; bottom: auto; }
}
@media (max-width: 38rem) {
  .hero-companion { display: flex; flex-direction: column; gap: .5rem; align-items: stretch; }
  .gremlin-resident { height: 180px; width: 240px; align-self: center; }
  .gremlin-resident[data-gremlin-lighting="landing"] { height: 430px; }
  .gremlin-controls { opacity: 1; right: -10px; bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .gremlin-stage canvas, .gremlin-controls { transition: none; } }
/* Keep the original black brand mark readable while the 3D layer loads or fails. */
.gremlin-fallback { width: auto; height: 88%; max-width: 90%; left: 50%; top: 6%; transform: translateX(-50%); padding: 12px; border-radius: 50%; background: #eeeee8; }
@media (min-width: 125rem) {
  .hero-companion .status-panel { width: 380px; transform: translate(calc(100% + 16px), -40px); }
  .hero:has(.gremlin-resident[data-gremlin-lighting="landing"]) .metric-strip { margin-top: calc(var(--space-12) + 110px); }
}