.case-placeholder { background: #000; }
.case-placeholder::before { display: none; }
.case-main { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 24px 16px; }
.case-content { display: flex; flex-direction: column; align-items: center; gap: 16px; width: min(500px, 100%); }
.case-content h1 { margin: 0; width: 100%; font: 700 48px/56px Benzin, Arial, sans-serif; text-align: center; letter-spacing: 0; }
.case-orb { position: relative; flex: none; width: 200px; height: 200px; max-width: 100%; }
.case-orb-poster, .case-orb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.case-orb-canvas { opacity: 0; transition: opacity 400ms ease; }
.case-orb-poster { opacity: 1; transition: opacity 400ms ease; }
.case-orb.is-rendered .case-orb-canvas { opacity: 1; }
.case-orb.is-rendered .case-orb-poster { opacity: 0; }
/* Center the orb and heading as a single group, independent of the fixed menu. */
@media (min-width: 600px) and (max-width: 767px) { .case-content { width: calc(100vw - 64px); } }
@media (max-width: 599px) {
  .case-content { width: 100%; }
  .case-content h1 { font-size: 28px; line-height: 36px; }
  .case-orb { width: 180px; height: 180px; }
}
/* The 320×480 Figma frame raises the group 48px to leave room for the menu. */
@media (max-width: 599px) and (max-height: 540px) {
  .case-content { transform: translateY(clamp(-48px, calc(80svh - 432px), 0px)); }
}
@media (min-width: 600px) and (max-height: 567px) {
  .case-content { transform: translateY(calc(50svh - 284px)); }
}
/* Short landscape windows retain space for the heading and navigation. */
@media (max-height: 459px) {
  .case-orb { width: min(150px, 28svh); height: min(150px, 28svh); }
  .case-content h1 { font-size: 28px; line-height: 36px; }
  .case-content { transform: translateY(-48px); }
  .case-navigation { bottom: max(16px, env(safe-area-inset-bottom)); }
}
@media (max-height: 319px) {
  .case-navigation { position: relative; margin: 0 0 16px; bottom: auto; width: max-content; }
  .case-content { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .case-orb-canvas, .case-orb-poster { transition: none; } }