/* Keep the actual painted inner bevels. Without `fill`, border-image discards
   the centre cell's opaque corners/lower lip, exposing a rectangular video or
   result scrim through the missing metal. Its transparent centre stays clear. */
@media (max-aspect-ratio: 1/1) {
 #app .mobile-cockpit-art { border-image-slice: 260 50 710 50 fill; }
 #app #arena { isolation: isolate; z-index: 1; }
}

.mobile-frame-effects { display: none; pointer-events: none; }

@media (max-aspect-ratio: 1/1), (min-aspect-ratio: 10001/10000) and (max-height: 600px) and (max-width: 1100px) {
 .mobile-frame-effects {
  display: block; position: absolute; inset: 0; z-index: 3;
  overflow: hidden; pointer-events: none; contain: layout style;
 }
 .mobile-cooling-vent {
  --steam-reach: 20cqw; --steam-drift: 5cqw;
  position: absolute; top: 17.2cqw; left: 3.60767%;
  width: 0; height: 0; pointer-events: none;
 }
 .mobile-cooling-vent-right { left: 96.39233%; --steam-drift: -5cqw; }
 .mobile-cooling-wisp {
  position: absolute; left: 0; top: 0; width: clamp(10px, 3cqw, 18px);
  height: clamp(22px, 5.8cqw, 34px); opacity: 0;
  border-radius: 46% 54% 63% 37%; transform-origin: 50% 0;
  background:
   radial-gradient(ellipse at 35% 22%, #d7f3ff8c, transparent 48%),
   radial-gradient(ellipse at 67% 63%, #a9d2e778, transparent 58%),
   radial-gradient(ellipse at 40% 87%, #d9f5ff60, transparent 49%);
  filter: blur(1.2px); mix-blend-mode: screen;
  animation: mobile-cooling-steam calc(3.7s + var(--wisp-index) * .27s) linear infinite;
  animation-delay: calc(var(--wisp-index) * -1.07s);
 }
 .mobile-cooling-wisp:nth-child(even) { margin-left: -2px; filter: blur(1.7px); }
 .mobile-cooling-vent-right .mobile-cooling-wisp { animation-delay: calc(-.8s - var(--wisp-index) * 1.07s); }
 #app.startup-armed .mobile-frame-effects { visibility: hidden; }
 #app.startup-armed .mobile-cooling-wisp,
 #app.startup-suspended .mobile-cooling-wisp,
 #app:has(.paused-overlay:not([hidden])) .mobile-cooling-wisp,
 .mobile-frame-effects[data-suspended='true'] .mobile-cooling-wisp { animation-play-state: paused; }
 .reduced-motion .mobile-frame-effects { display: none; }
}

@keyframes mobile-cooling-steam {
 0% { opacity: 0; transform: translate(-50%, -2px) scale(.55, .6) rotate(-7deg); }
 12% { opacity: .6; transform: translate(-50%, calc(var(--steam-reach) * .08)) scale(.78, .85) rotate(4deg); }
 38% { opacity: .4; transform: translate(calc(-50% + var(--steam-drift) * .3), calc(var(--steam-reach) * .32)) scale(1.25, 1.2) rotate(-8deg); }
 72% { opacity: .15; transform: translate(calc(-50% + var(--steam-drift) * .75), calc(var(--steam-reach) * .66)) scale(1.8, 1.6) rotate(8deg); }
 100% { opacity: 0; transform: translate(calc(-50% + var(--steam-drift)), var(--steam-reach)) scale(2.4, 1.9) rotate(-3deg); }
}

@media (min-aspect-ratio: 10001/10000) and (max-height: 600px) and (max-width: 1100px) {
 /* Sideways phones use a cropped frame, so its two cooling housings are placed
    back on the upper rail using the same original illustration. */
 .mobile-cooling-vent {
  --steam-reach: 62px; --steam-drift: 7px;
  left: 32px; top: 61px;
 }
 .mobile-cooling-vent-right { left: auto; right: calc(var(--landscape-console) + 48px); --steam-drift: -7px; }
 .mobile-cooling-vent::before {
  content: ''; position: absolute; left: -14px; top: -15px; width: 28px; height: 27px;
  background: url('../../public/assets/ui-v23-mobile/mobile-cockpit.png') left top 8.252427% / 1267.142857% 2730.769231% no-repeat;
 }
 .mobile-cooling-vent-right::before { transform: scaleX(-1); }
 .mobile-cooling-wisp { top: 1px; width: 8px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
 .mobile-frame-effects { display: none; }
}