/* Kraken event — audience overlay (Hyperdome 2026 standby).
   Layered on top of /static/audience/style.css. We re-skin the standby
   screen, the boot overlay, and the countdown overlay using the official
   Hyperdome poster artwork as a backdrop, with the small Symbiotic logo
   at the top and the Hyperdome logotype underneath. */

:root, body {
  --standby-bg: #0a0200;
  --standby-fg: #ffd6c8;
  --standby-accent: #ff1414;
}

/* Hyperdome backdrop: full-bleed clean kraken artwork. Light top + bottom
   vignettes so the layered logos at the top and the ticker/disclaimer at
   the bottom stay legible without washing out the kraken art. */
#standby {
  background:
    /* Top vignette — gentle dark gradient behind the logos. */
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.55) 0,
      rgba(0, 0, 0, 0.25) 14%,
      transparent 28%
    ),
    /* Bottom vignette — keeps countdown/ticker readable. */
    linear-gradient(0deg,
      rgba(0, 0, 0, 0.7) 0,
      rgba(0, 0, 0, 0.35) 18%,
      transparent 38%
    ),
    /* Radial vignette — darken edges, keep the kraken centre punchy. */
    radial-gradient(ellipse at 50% 45%,
      transparent 0,
      rgba(0, 0, 0, 0.15) 45%,
      rgba(0, 0, 0, 0.55) 75%,
      rgba(0, 0, 0, 0.85) 100%
    ),
    /* The kraken artwork itself. */
    url('/kraken/theme/assets/kraken-bg.jpg') center center / cover no-repeat,
    #050000 !important;
  color: #ffd6c8;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  /* Stack our overlay layout vertically with controlled spacing. */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.55em;
  padding: max(env(safe-area-inset-top, 18px), 18px) 18px max(env(safe-area-inset-bottom, 22px), 22px);
}

/* Subtle scanline overlay across the whole standby (very subtle, the
   poster art is already busy). */
#standby::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 60, 30, 0.025) 0,
    rgba(255, 60, 30, 0.025) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
  z-index: 0;
}
#standby > * { position: relative; z-index: 1; }

/* Hide Pulse's default brand text + sb-image — replaced by injected logos. */
#standby .sb-brand,
#standby .sb-image { display: none !important; }

/* Vertical stacking order on the standby flex column. We use `order` so
   the lazily-created countdown (#standby-cd, inserted by Pulse's standby.js
   between custom-text and ticker) lands right under the Hyperdome logo for
   prominence — without us having to move DOM nodes after the fact. */
#standby > #kraken-symbiotic     { order: 1; }
#standby > #kraken-hyperdome     { order: 2; }
#standby > #standby-cd           { order: 3; }
#standby > #standby-venue        { order: 4; }
#standby > #standby-custom-text  { order: 5; }
#standby > .sb-count-row         { order: 90; }
#standby > .sb-status-row        { order: 91; }
#standby > .sb-actions           { order: 92; }
#standby > .sb-ticker            { order: 93; }
#standby > #kraken-standby-disclaimer { order: 94; }

/* Symbiotic logo at the very top — small, white. */
#kraken-symbiotic {
  display: block;
  width: clamp(110px, 36vw, 170px);
  height: auto;
  margin: 0 auto 0.2em;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
}

/* Hyperdome logotype underneath the Symbiotic logo — wide, white, bold. */
#kraken-hyperdome {
  display: block;
  width: clamp(220px, 78vw, 380px);
  height: auto;
  margin: 0 auto 0.4em;
  filter:
    drop-shadow(0 0 10px rgba(255, 30, 18, 0.55))
    drop-shadow(0 0 22px rgba(255, 30, 18, 0.25));
  animation: kraken-flicker 6s ease-in-out infinite;
}
@keyframes kraken-flicker {
  0%, 92%, 100% { opacity: 1; }
  93%, 95%      { opacity: 0.78; }
  94%           { opacity: 0.92; }
}

/* Venue line under the logos. */
.sb-venue {
  color: rgba(255, 220, 200, 0.8) !important;
  letter-spacing: 0.28em !important;
  font-size: 0.7rem !important;
  text-transform: uppercase;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  margin-top: 0.1em !important;
}

/* Custom standby text (server-set: "WRATH OF THE KRAKEN"). */
.sb-custom-text {
  color: #ff3a1c !important;
  text-shadow:
    0 0 8px rgba(255, 30, 20, 0.55),
    0 1px 4px rgba(0, 0, 0, 0.9);
  letter-spacing: 0.22em;
  font-weight: 700;
  font-size: clamp(0.95rem, 4.2vw, 1.35rem);
  margin-top: 0.3em;
  text-transform: uppercase;
}

/* Embedded countdown — large, glowing red, monospace digits. Sits right
   under the Hyperdome logo (CSS order: 3) so it's the prominent focal
   point of the standby. Dark backdrop plate matches .sb-count-row so
   the digits stay readable against the kraken artwork. */
.standby-cd {
  margin: 0.3em 0 0.5em;
  padding: 0.5em 1.2em 0.6em;
  text-align: center;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
  backdrop-filter: blur(2px);
}
.standby-cd-label {
  color: rgba(255, 220, 200, 0.7);
  letter-spacing: 0.32em;
  font-size: 0.66rem;
  text-transform: uppercase;
  margin-bottom: 0.2em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
}
.standby-cd-value {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: clamp(2.8rem, 13vw, 4.4rem);
  font-weight: 700;
  color: #ff3a1c;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 12px rgba(255, 30, 20, 0.75),
    0 0 32px rgba(255, 30, 20, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.9);
  line-height: 1;
}

/* Stat row — phones connected. Pinned to the bottom region with a small
   dark plate behind it so the count stays readable against the kraken art. */
.sb-count-row {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  letter-spacing: 0.18em;
  margin-top: auto;
  padding: 0.45em 1em;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  backdrop-filter: blur(2px);
}
.sb-count-num {
  color: #ff5a3c !important;
  text-shadow: 0 0 10px rgba(255, 50, 30, 0.55), 0 1px 4px rgba(0, 0, 0, 0.85);
  font-weight: 700;
}
.sb-count-label {
  color: rgba(255, 220, 200, 0.85) !important;
  text-transform: uppercase;
  font-size: 0.68rem;
}

/* Standby actions row — show only the share button, restyled to match the
   themed terminal aesthetic. The install/save button stays hidden by
   default (Pulse reveals it via setInstallable()) and the iOS A2HS bar
   is also suppressed for a cleaner look. */
#standby .sb-actions {
  display: flex !important;
  justify-content: center;
  gap: 0.5em;
  margin-top: 0.5em;
}
#standby #ios-a2hs-bar { display: none !important; }
#standby .sb-action-btn {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
  border: 1px solid rgba(255, 60, 30, 0.5) !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #ffd6c8 !important;
  letter-spacing: 0.18em !important;
  padding: 6px 14px !important;
  border-radius: 3px !important;
  font-size: 0.72rem !important;
  text-transform: uppercase;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(2px);
  cursor: pointer;
}
#standby .sb-action-btn:not([hidden]) { display: inline-flex !important; }
#standby .sb-action-btn[hidden] { display: none !important; }
#standby .sb-action-btn:active {
  background: rgba(255, 60, 30, 0.25) !important;
}

/* Status chips: bracketed, monospace, terminal-style. */
.sb-chip {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace !important;
  border: 1px solid rgba(255, 60, 30, 0.45) !important;
  background: rgba(20, 0, 0, 0.55) !important;
  color: rgba(255, 220, 200, 0.9) !important;
  letter-spacing: 0.2em !important;
  padding: 4px 10px !important;
  border-radius: 2px !important;
  font-size: 0.66rem !important;
  text-transform: uppercase;
  backdrop-filter: blur(2px);
}
.sb-chip.status-green {
  color: #6cff6c !important;
  border-color: rgba(108, 255, 108, 0.5) !important;
  background: rgba(0, 30, 0, 0.55) !important;
}
.sb-chip.status-amber {
  color: #ffb64a !important;
  border-color: rgba(255, 182, 74, 0.5) !important;
  background: rgba(40, 20, 0, 0.55) !important;
}

/* Ticker — bright orange, faint divider lines. */
.sb-ticker {
  border-top: 1px dashed rgba(255, 60, 30, 0.4);
  border-bottom: 1px dashed rgba(255, 60, 30, 0.4);
  margin-top: 0.6em;
  padding: 4px 0;
  background: rgba(0, 0, 0, 0.35);
}
#standby-ticker-track {
  color: #ff7a4a !important;
  letter-spacing: 0.18em;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Disclaimer line — appended by client.js as #kraken-standby-disclaimer. */
#kraken-standby-disclaimer {
  margin-top: 0.4em;
  font-size: 0.6rem;
  color: rgba(255, 220, 200, 0.55);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.85);
}

/* Join-screen logos — same stack as the standby. The Pulse wordmark is
   hidden by client.js; these sit at the top of .join-card. */
#kraken-join-symbiotic {
  display: block;
  width: clamp(110px, 36vw, 170px);
  height: auto;
  margin: 0 auto 0.4em;
  opacity: 0.95;
  filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
}
#kraken-join-hyperdome {
  display: block;
  width: clamp(220px, 78vw, 380px);
  height: auto;
  margin: 0 auto 0.6em;
  filter:
    drop-shadow(0 0 10px rgba(255, 30, 18, 0.55))
    drop-shadow(0 0 22px rgba(255, 30, 18, 0.25));
}

/* Boot overlay tap-to-join — match the standby aesthetic. */
#overlay {
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.92) 0,
      rgba(0, 0, 0, 0.6) 30%,
      rgba(0, 0, 0, 0.6) 70%,
      rgba(0, 0, 0, 0.92) 100%
    ),
    url('/kraken/theme/assets/kraken-bg.jpg') center center / cover no-repeat,
    #050000;
  color: #ffd6c8;
}
.join-brand {
  color: #ff3a1c;
  text-shadow: 0 0 18px rgba(255, 30, 18, 0.55), 0 2px 6px rgba(0, 0, 0, 0.85);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
.join-cta {
  color: #ffd6c8;
  letter-spacing: 0.4em;
  border: 1px dashed rgba(255, 60, 30, 0.7);
  padding: 12px 24px;
  border-radius: 2px;
  background: rgba(20, 0, 0, 0.55);
  backdrop-filter: blur(3px);
}
.join-note {
  color: rgba(255, 220, 200, 0.6);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}
.join-venue {
  color: rgba(255, 220, 200, 0.85);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.85);
}