/* Startup is a temporary presentation layer. Removing .startup-armed restores
   the original HUD geometry, shadows, clip paths, and responsive styling. */
.startup-cockpit-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  z-index: 3;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  transition: opacity .55s ease;
}

#app.startup-armed {
  --startup-shell-opacity: 1;
  --startup-accent: #79ddff;
}

#app.startup-armed .cockpit-shell {
  opacity: 0;
  transition: opacity .55s ease;
}

#app.startup-armed[data-startup-stage='assembling'] .startup-cockpit-video {
  opacity: var(--startup-shell-opacity);
  visibility: visible;
}

#app.startup-armed[data-startup-stage='handoff'] .startup-cockpit-video {
  opacity: 0;
  visibility: visible;
}

#app.startup-armed:is([data-startup-stage='handoff'], [data-startup-stage='complete']) .cockpit-shell {
  opacity: var(--startup-shell-opacity);
}

/* Visibility protects the pre-reveal controls from both clicking and focus.
   These rules do not collapse boxes or alter the existing artwork transforms. */
#app.startup-armed :is(
  .brand, .wallet, #sound-button, #fullscreen-button, .power-panel,
  #nuclear-meter, .multiplier-panel, .history-strip, .utility-controls,
  .stake-control, .launch-control, #speed-button, #mission-map,
  .bottom-telemetry, footer
):not(.startup-revealed) {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#app.startup-armed :is(
  .wallet, #sound-button, #fullscreen-button, .power-panel,
  #nuclear-meter, .multiplier-panel, .history-strip, .utility-controls,
  .stake-control, .launch-control, #speed-button, #mission-map,
  .bottom-telemetry, footer
).startup-revealed {
  animation: startupInstrumentOnline .7s ease-out;
}

#app.startup-armed :is(.wallet, .multiplier-panel, .stake-control, .launch-control).startup-revealed {
  --startup-accent: #ffb76b;
}

/* The logo's own video/image crossfade remains controlled by LogoIntro. */
#app.startup-armed .brand.startup-revealed {
  animation: startupLogoOnline .5s ease-out;
}

@keyframes startupInstrumentOnline {
  0% {
    opacity: 0;
    filter: brightness(1.12) drop-shadow(0 0 0 transparent);
  }
  24% {
    opacity: .9;
    filter: brightness(1.38) drop-shadow(0 0 .25cqw var(--startup-accent));
  }
  44% {
    opacity: 1;
    filter: brightness(1.16) drop-shadow(0 0 .13cqw var(--startup-accent));
  }
  72% {
    opacity: 1;
    filter: brightness(1.03) drop-shadow(0 0 .05cqw transparent);
  }
  /* No retained filter: each panel resumes its own original painted shadow. */
  100% { opacity: 1; }
}

@keyframes startupLogoOnline {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A deliberate entry gesture also unlocks the startup music and voice. */
[data-loader-enter] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  max-width: 100%;
  margin-top: 18px;
  padding: 15px 30px 14px;
  border: 1px solid #f5a45b;
  border-top-color: #ffcf91;
  border-bottom-color: #a84429;
  border-radius: 3px;
  background: linear-gradient(180deg, #d76539 0%, #af3d26 46%, #812b21 50%, #a83d29 100%);
  color: #fff1d1;
  font-family: var(--font, 'Bahnschrift', 'Arial Narrow', Arial, sans-serif);
  font-size: clamp(12px, 1.6vh, 15px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 2px;
  text-shadow: 0 1px 2px #54170d;
  box-shadow: inset 0 0 0 2px #46180f66, inset 0 2px 0 #ffe6a445, 0 5px 0 #321a15, 0 8px 24px #ff71182b;
  transition: filter .18s ease, box-shadow .18s ease;
}

[data-loader-enter]::after {
  content: '\2192';
  font-size: 20px;
  line-height: .8;
  font-weight: 400;
  color: #ffd794;
}

[data-loader-enter]:hover:not(:disabled) {
  filter: brightness(1.12);
  box-shadow: inset 0 0 0 2px #46180f66, inset 0 2px 0 #ffe6a46b, 0 5px 0 #321a15, 0 8px 30px #ff711840;
}

[data-loader-enter]:focus-visible {
  outline: 2px solid #bceeff;
  outline-offset: 5px;
}

[data-loader-enter]:disabled {
  opacity: .65;
  cursor: default;
}

@media (max-aspect-ratio: 1/1) {
  #app.startup-armed { --startup-shell-opacity: .6; }
  .startup-cockpit-video {
    width: auto;
    height: 100%;
    aspect-ratio: 1672 / 941;
    left: 85%;
    right: auto;
    transform: translateX(-85%);
    object-fit: fill;
    z-index: 0;
  }
}

@media (max-height: 620px) and (min-aspect-ratio: 1/1) {
  [data-loader-enter] {
    grid-column: 2;
    justify-self: center;
    min-height: 44px;
    margin-top: 12px;
    padding: 12px 25px;
    font-size: 12px;
  }
}

/* The controller can also enable the app's explicit reduced-motion setting. */
.reduced-motion .startup-cockpit-video,
.reduced-motion #app.startup-armed .cockpit-shell,
#app.startup-armed.reduced-motion .cockpit-shell,
#app.startup-armed.reduced-motion .startup-cockpit-video,
.reduced-motion [data-loader-enter] {
  transition: none;
}

.reduced-motion #app.startup-armed .startup-revealed,
#app.startup-armed.reduced-motion .startup-revealed {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .startup-cockpit-video,
  #app.startup-armed .cockpit-shell,
  [data-loader-enter] { transition: none; }
  #app.startup-armed .startup-revealed { animation: none !important; }
}


#app.startup-suspended .startup-revealed{animation-play-state:paused!important}
#app.startup-armed #result-banner{visibility:hidden}

#app.startup-armed :is(#power-status-list,.wormhole-wheel,#nuclear-overlay){visibility:hidden!important}

#app.startup-armed .nuclear-lights{visibility:hidden!important}

/* The arena powers on from the surrounding cockpit color. The scan follows the audio presentation
   clock, so pausing freezes the scan and the reveal together. */
.startup-screen-fx{display:none;pointer-events:none}
#app.startup-armed #arena{background:#061422}
#app.startup-armed #world{filter:blur(var(--startup-screen-blur,10px))}
#app.startup-armed .startup-screen-fx{
 display:block;position:absolute;inset:0;z-index:2;overflow:hidden;
 background:rgb(6 20 34 / var(--startup-screen-veil,1));
}
.startup-screen-fx::before,.startup-screen-fx::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 opacity:var(--startup-screen-pattern,0);
}
.startup-screen-fx::before{
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='52' viewBox='0 0 90 52'%3E%3Cpath d='M15 0h30l15 26-15 26H15L0 26ZM60 26h30M60 26 75 0M60 26l15 26' fill='none' stroke='%237addff' stroke-width='.7'/%3E%3C/svg%3E");
 background-size:90px 52px;
 mask-image:linear-gradient(0deg,transparent,#000 22%,#000 78%,transparent);
}
.startup-screen-fx::after{
 background:repeating-linear-gradient(0deg,#07141bc9 0 1px,transparent 1px 4px);
 background-position:0 var(--startup-screen-lines,0px);
}
.startup-screen-fx>i{
 position:absolute;left:0;right:0;top:var(--startup-screen-scan,-20%);
 height:22%;transform:translateY(-50%);opacity:var(--startup-screen-pattern,0);
 background:linear-gradient(transparent,#72dfff30 45%,#ccf6ffb3 50%,#3bcbff24 54%,transparent);
 filter:blur(1px);
}
.reduced-motion #app.startup-armed #world{filter:none}
.reduced-motion .startup-screen-fx::before,.reduced-motion .startup-screen-fx::after,
.reduced-motion .startup-screen-fx>i{display:none}
@media(prefers-reduced-motion:reduce){
 #app.startup-armed #world{filter:none}
 .startup-screen-fx::before,.startup-screen-fx::after,.startup-screen-fx>i{display:none}
}

/* A blank first frame is intentional: the new logo builds itself from nothing. */
.brand.logo-playing>img{transition:none}

/* The last decoded frame blends independently of the already unlocked controls. */
#app.startup-shell-handoff .startup-cockpit-video{opacity:var(--startup-video-opacity);visibility:visible;transition:none}
#app.startup-shell-handoff .cockpit-shell{opacity:var(--startup-still-opacity);transition:none}