/* ─── THE SKY REMEMBERS · NULL RELAY ─────────────────────────────── */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-normal-500.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-normal-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-italic-500.woff2') format('woff2');
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-normal-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('fonts/IBMPlexMono-normal-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  --ink:        #08071a;
  --deep:       #11102e;
  --indigo:     #1b1942;
  --periwinkle: #8d88e8;
  --lavender:   #beb9f2;
  --pale:       #efedff;
  --dawn:       #f7d9a8;
  --rose:       #efb9d6;
  --line:       rgba(160, 152, 235, .38);
  --line-dim:   rgba(160, 152, 235, .16);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --mono: 'IBM Plex Mono', Consolas, monospace;

  /* responsive layout: panels scale with the screen; the stage takes
     whichever is tighter — full *visible* viewport height, or the width
     left over after both panels. 1.16667 = 448/384, the playfield aspect.
     --vis-h uses dvh where supported: mobile browsers' 100vh includes the
     area behind their chrome, which would push the stage half off-screen. */
  --vis-h: 100vh;
  --pad: clamp(8px, 1.5vh, 20px);
  --gap: clamp(10px, 1.4vw, 24px);
  --panel-w: clamp(208px, 18vw, 380px);
  --stage-h: min(
    calc(var(--vis-h) - 2 * var(--pad) - 6px),
    calc((100vw - 2 * var(--panel-w) - 2 * var(--gap) - 2 * var(--pad) - 12px) * 1.16667)
  );
}
@supports (height: 100dvh) {
  :root { --vis-h: 100dvh; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(247,217,168,.10), transparent 55%),
    radial-gradient(90% 70% at 15% -10%, rgba(141,136,232,.14), transparent 60%),
    linear-gradient(180deg, #060614 0%, #0b0a22 45%, #171238 100%);
  color: var(--lavender);
  font-family: var(--mono);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}

#frame {
  height: var(--vis-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  padding: var(--pad);
}

/* ─── side panels ────────────────────────────────────────────────── */

.panel {
  width: var(--panel-w);
  height: var(--stage-h);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(27,25,66,.55), rgba(13,12,38,.72));
  box-shadow: 0 0 24px rgba(141,136,232,.10), inset 0 0 40px rgba(8,7,26,.6);
  padding: 1.5em 1.5em 1.1em;
  display: flex;
  flex-direction: column;
  position: relative;
  backdrop-filter: blur(2px);
  /* every panel font derives from this, so the cards scale as one */
  font-size: clamp(9.5px, 0.55vw + 4px, 14.5px);
  min-height: 0;
}
.panel::before {
  content: '✦';
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  color: var(--periwinkle); font-size: 11px;
  background: var(--ink); padding: 0 8px;
}

.panel-head {
  font-size: 0.95em; letter-spacing: .32em; font-weight: 600;
  color: var(--pale);
  border-bottom: 1px solid var(--line-dim);
  padding-bottom: 0.8em; margin-bottom: 1em;
}

#tracklist { list-style: none; flex: 1; min-height: 0; overflow: hidden; }
#tracklist li {
  display: block;
}
#tracklist button {
  display: flex; gap: 0.75em; align-items: baseline;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0;
  font-size: 1em; line-height: 2.05;
  color: rgba(190,185,242,.42);
  transition: color .4s;
  white-space: nowrap;
  cursor: pointer;
}
#tracklist button:hover,
#tracklist button:focus-visible {
  color: var(--pale);
  outline: none;
  text-shadow: 0 0 8px rgba(190,185,242,.42);
}
#tracklist .tno { color: rgba(141,136,232,.5); }
#tracklist .tname { flex: 1; overflow: hidden; text-overflow: ellipsis; }
#tracklist .tstat { font-size: 0.85em; }
#tracklist li.current button { color: var(--pale); text-shadow: 0 0 8px rgba(190,185,242,.5); }
#tracklist li.current .tstat { color: var(--dawn); }
#tracklist li.current .tstat::after { content: ' ▶'; }
#tracklist li.selected button { color: rgba(239,237,255,.9); }
#tracklist li.selected .tno { color: var(--dawn); }
#tracklist li.selected .tstat::before { content: '◆ '; color: var(--dawn); }
#tracklist li.archived button { color: rgba(247,217,168,.75); }
#tracklist li.archived .tstat::after { content: ' ✓'; }

#sysview { flex: 1; font-size: 1em; min-height: 0; overflow: hidden; }
#sysview dt {
  color: rgba(141,136,232,.62);
  margin-top: 0.85em; letter-spacing: .04em;
}
#sysview dd {
  color: var(--pale); margin-top: 0.1em;
  letter-spacing: .06em;
}
#sysview dd.gems { color: var(--rose); letter-spacing: .18em; text-shadow: 0 0 7px rgba(239,185,214,.55); }
#sysview dd.gems.gold { color: var(--dawn); text-shadow: 0 0 7px rgba(247,217,168,.55); }
#hud-status.ok { color: #b9efc8; }
#hud-status.warn { color: var(--rose); }

.panel-foot {
  border-top: 1px solid var(--line-dim);
  margin-top: 1em; padding-top: 0.9em;
  font-size: 0.9em; line-height: 1.7;
}
.quote { font-style: italic; font-family: var(--serif); font-size: 1.3em; color: rgba(190,185,242,.66); }
.sig { margin-top: 0.8em; letter-spacing: .22em; color: var(--periwinkle); font-size: 0.9em; }
.sig span { color: rgba(141,136,232,.45); letter-spacing: .1em; }
.relay-glyph { letter-spacing: .3em; color: rgba(190,185,242,.6); }
.barcode { color: rgba(141,136,232,.4); letter-spacing: 1px; margin-top: 0.3em; font-size: 1.05em; }
.mute-hint { margin-top: 0.8em; color: rgba(141,136,232,.55); }
.site-return {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.85em;
  border: 1px solid var(--line-dim);
  border-radius: 3px;
  padding: 0.38em 0.7em;
  color: var(--dawn);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.2;
  background: rgba(8,7,26,.28);
}
.site-return:hover,
.site-return:focus-visible {
  border-color: var(--line);
  color: var(--pale);
  outline: none;
  text-shadow: 0 0 8px rgba(247,217,168,.6);
}
.site-return-mobile { display: none; margin: 0; padding: 0.2em 0.45em; font-size: 0.9em; }

/* ─── stage ──────────────────────────────────────────────────────── */

#stagewrap { position: relative; }

#stageborder {
  position: relative;
  background: #08071a;
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(8,7,26,.9),
    0 0 36px rgba(141,136,232,.22),
    0 0 120px rgba(141,136,232,.10);
  overflow: hidden;
  line-height: 0;
  /* sized by CSS on desktop (fixed ratio); on narrow screens JS overrides
     with inline styles to stretch the field vertically. It is a size
     container: overlay text scales in cqw — relative to the stage width —
     so it can never overflow, whatever the stage's shape */
  height: calc(var(--stage-h) + 2px);
  width: calc(var(--stage-h) * 0.857142 + 2px);
  container-type: size;
  touch-action: none; /* the stage is a flight surface, not a scroll area */
}
body.fpv-active #frame {
  gap: 0;
  padding: clamp(6px, 1vh, 14px);
}
body.fpv-active .panel {
  display: none;
}
body.fpv-active #stagewrap {
  width: min(
    calc(100vw - 2 * clamp(6px, 1vh, 14px) - 6px),
    calc((var(--vis-h) - 2 * clamp(6px, 1vh, 14px) - 6px) * 1.77778)
  );
}
body.fpv-active #stageborder {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

#game {
  display: block;
  width: 100%;
  height: 100%;
  background: #08071a;
}
body.mouse-control #stageborder { cursor: crosshair; }

/* boss bar */
#bossbar {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 8px 12px 6px;
  background: linear-gradient(180deg, rgba(8,7,26,.72), transparent);
  transition: opacity .5s;
}
.spellrow {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 5px;
}
#spellname {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(14px, 3.3cqw, 26px); color: var(--pale);
  text-shadow: 0 0 12px rgba(190,185,242,.8);
  line-height: 1.1;
}
#spelltimer { font-size: clamp(10px, 2.45cqw, 18px); color: var(--dawn); letter-spacing: .1em; }
#bosshp {
  height: 2px; background: rgba(141,136,232,.18); border-radius: 2px;
}
#bosshpfill {
  height: 100%; width: 100%; border-radius: 2px;
  background: linear-gradient(90deg, var(--rose), var(--lavender), var(--dawn));
  box-shadow: 0 0 8px rgba(239,185,214,.8);
  transition: width .15s linear;
}

/* toast — memory announcements */
#toast {
  position: absolute; left: 0; right: 0; top: 26%;
  text-align: center; pointer-events: none;
  opacity: 0;
  line-height: 1.3;
}
#toast.show { animation: toastIn 3.4s ease forwards; }
@keyframes toastIn {
  0%   { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  14%  { opacity: 1; transform: translateY(0);    filter: blur(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; filter: blur(4px); }
}
#toast-kicker {
  font-size: clamp(8px, 2cqw, 15px); letter-spacing: .42em; color: var(--dawn);
  text-shadow: 0 0 10px rgba(247,217,168,.7);
  margin-bottom: 6px;
}
#toast-title {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(18px, 5.8cqw, 46px); color: var(--pale);
  text-shadow: 0 0 18px rgba(190,185,242,.9), 0 0 60px rgba(141,136,232,.5);
}

/* ─── overlay screens ────────────────────────────────────────────── */

#overlay {
  position: absolute; inset: 0;
  z-index: 4;
  display: flex; align-items: center; justify-content: center;
  line-height: 1.4;
}
#overlay.hidden { display: none; }

.screen {
  text-align: center;
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1.3cqw;
  padding: clamp(14px, 3.3cqw, 28px);
  background: radial-gradient(80% 60% at 50% 42%, rgba(8,7,26,.42), rgba(8,7,26,.82));
  animation: screenIn 1.1s ease both;
}
#scr-title {
  justify-content: flex-start;
  gap: 0.85cqw;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(190,185,242,.35) transparent;
}
.screen.hidden { display: none; }
@keyframes screenIn {
  from { opacity: 0; filter: blur(8px); }
  to   { opacity: 1; filter: blur(0); }
}

.ornament {
  color: var(--periwinkle); font-size: clamp(9px, 2.6cqw, 18px); letter-spacing: .6em;
  text-shadow: 0 0 12px rgba(141,136,232,.9);
  animation: ornamentPulse 3.2s ease-in-out infinite;
}
@keyframes ornamentPulse {
  0%, 100% { opacity: .65; } 50% { opacity: 1; }
}

.screen h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 11.4cqw, 96px); line-height: 1.02;
  color: var(--pale);
  text-shadow: 0 0 24px rgba(190,185,242,.85), 0 0 90px rgba(141,136,232,.55);
}
.screen h2 {
  font-family: var(--serif); font-weight: 500; font-style: italic;
  font-size: clamp(20px, 7.1cqw, 60px); line-height: 1.1;
  color: var(--pale);
  text-shadow: 0 0 20px rgba(190,185,242,.8);
}
.subtitle {
  font-size: clamp(8px, 2.2cqw, 17px); letter-spacing: .55em; color: var(--dawn);
  text-shadow: 0 0 12px rgba(247,217,168,.7);
  margin-top: 2px;
}
.tagline {
  font-size: clamp(8px, 2cqw, 15px); color: rgba(190,185,242,.6); letter-spacing: .14em;
  font-style: italic;
}
.press { margin-top: 3cqw; font-size: clamp(9px, 2.3cqw, 17px); color: var(--pale); letter-spacing: .12em; }
.press b, .controls b, .smallopt b { color: var(--dawn); }
.blink { animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

.volrow {
  margin-top: 2.6cqw;
  display: flex; align-items: center; gap: 10px;
  font-size: clamp(8px, 2cqw, 14px); letter-spacing: .14em;
  color: rgba(190,185,242,.7);
}
.volval { color: var(--dawn); min-width: 3ch; text-align: left; }
.volslider {
  -webkit-appearance: none; appearance: none;
  width: clamp(110px, 25.7cqw, 220px); height: 2px;
  background: linear-gradient(90deg, var(--periwinkle), rgba(160,152,235,.25));
  border-radius: 2px; outline: none; cursor: pointer;
}
.volslider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; border: none; border-radius: 1px;
  background: var(--dawn);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(247,217,168,.9);
}
.volslider::-moz-range-thumb {
  width: 10px; height: 10px; border: none; border-radius: 1px;
  background: var(--dawn);
  transform: rotate(45deg);
  box-shadow: 0 0 9px rgba(247,217,168,.9);
}
.volslider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 12px rgba(247,217,168,1); }

.menu-stack {
  width: min(92%, 410px);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(5px, 1.15cqw, 9px);
  margin-top: 1.2cqw;
  font-size: clamp(8px, 1.75cqw, 13px);
  line-height: 1.25;
}
.pause-settings {
  width: min(88%, 360px);
}
.pause-actions {
  display: flex;
  justify-content: center;
  margin-top: clamp(6px, 1.35cqw, 11px);
}
.pause-actions .menu-btn {
  min-width: 11em;
}
.setting-row,
.toggle-row,
.bind-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 1.25cqw, 9px);
  min-height: 28px;
}
.setting-row > span,
.toggle-row > span,
.bind-head > span {
  color: rgba(190,185,242,.68);
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.segbtn,
.menu-btn,
.bind-key {
  border: 1px solid var(--line-dim);
  border-radius: 4px;
  background: rgba(8,7,26,.38);
  color: var(--lavender);
  font-family: var(--mono);
  font-size: 1em;
  letter-spacing: .06em;
  min-height: 26px;
  padding: 0 0.65em;
  cursor: pointer;
}
.segbtn {
  min-width: 6.7em;
  text-transform: uppercase;
}
.fpv-launch {
  align-self: center;
  min-width: 14em;
  margin-top: clamp(4px, 0.9cqw, 8px);
}
.fpv-practice {
  align-self: center;
  min-width: 14em;
}
.title-tracklist {
  display: none;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  width: min(100%, 320px);
  margin: 0 auto;
}
.title-tracklist button {
  min-height: 25px;
  border: 1px solid var(--line-dim);
  border-radius: 4px;
  background: rgba(8,7,26,.34);
  color: rgba(190,185,242,.62);
  font: 600 .92em/1 var(--mono);
  cursor: pointer;
}
.title-tracklist button.selected,
.title-tracklist button:focus-visible,
.title-tracklist button:hover {
  color: var(--pale);
  border-color: var(--dawn);
  outline: none;
  box-shadow: 0 0 10px rgba(247,217,168,.2);
}
.segbtn.active {
  border-color: var(--dawn);
  color: var(--pale);
  box-shadow: 0 0 12px rgba(247,217,168,.24), inset 0 0 14px rgba(247,217,168,.08);
}
.menu-btn {
  min-width: 5.6em;
  color: var(--dawn);
  text-transform: uppercase;
}
.segbtn:hover,
.menu-btn:hover,
.bind-key:hover,
.segbtn:focus-visible,
.menu-btn:focus-visible,
.bind-key:focus-visible {
  border-color: var(--line);
  color: var(--pale);
  outline: none;
}
.setting-note,
.binding-note {
  color: rgba(190,185,242,.48);
  letter-spacing: .08em;
}
.toggle-row {
  align-self: center;
  cursor: pointer;
}
.toggle-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--dawn);
}
.advanced-settings {
  width: 100%;
}
.advanced-settings summary {
  display: none;
}
.advanced-settings-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: clamp(5px, 1.15cqw, 9px);
}
.advanced-settings:not([open]) .advanced-settings-body {
  display: none;
}
.bind-panel {
  margin-top: 0.4cqw;
  border-top: 1px solid var(--line-dim);
  padding-top: clamp(6px, 1.2cqw, 10px);
}
.bind-head {
  justify-content: space-between;
  margin-bottom: clamp(5px, 1.1cqw, 8px);
}
.bind-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}
.bind-row {
  display: grid;
  grid-template-columns: minmax(4.6em, 0.8fr) repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 4px;
  min-width: 0;
}
.bind-label {
  color: rgba(190,185,242,.58);
  text-align: right;
  text-transform: uppercase;
  letter-spacing: .08em;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bind-key {
  min-width: 0;
  width: 100%;
  padding: 0 0.35em;
  color: var(--dawn);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bind-key:empty {
  visibility: hidden;
}
.bind-key.recording {
  border-color: var(--rose);
  color: var(--pale);
}

@media (min-width: 901px) {
  .menu-stack {
    width: min(94%, 520px);
    gap: clamp(4px, 0.9cqw, 7px);
  }
  .advanced-settings-body {
    gap: clamp(4px, 0.9cqw, 7px);
  }
  .bind-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
  }
  .bind-row {
    grid-template-columns: minmax(3.5em, 0.9fr) repeat(2, minmax(0, 0.86fr));
    gap: 3px;
  }
  .bind-label {
    letter-spacing: .05em;
  }
  .bind-key {
    min-height: 24px;
    padding: 0 0.25em;
  }
  .binding-note {
    font-size: .92em;
  }
}

.controls {
  margin-top: 2.6cqw;
  display: flex; flex-direction: column; gap: 0.5cqw;
  font-size: clamp(8px, 2cqw, 14px); color: rgba(190,185,242,.65); letter-spacing: .1em;
}
.smallopt { font-size: clamp(8px, 2cqw, 14px); color: rgba(190,185,242,.55); }

.stats {
  margin-top: 1.05cqw; font-size: clamp(9px, 2.2cqw, 16px); letter-spacing: .1em;
  color: rgba(190,185,242,.8); line-height: 1.9;
}
.stats b { color: var(--dawn); font-weight: 400; }

.hidden { display: none; }

.fpv-cockpit {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(10px, 2.7cqw, 22px);
  font-size: clamp(9px, 2cqw, 14px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: rgba(239,237,255,.82);
  text-shadow: 0 0 10px rgba(190,185,242,.72);
  --fpv-cockpit-scale: 1;
  --fpv-roll-sink: 0%;
  --fpv-frame-glow: 16px;
  --fpv-roll-shadow: 0px;
  --fpv-hit-flash: 0;
  --fpv-scan-opacity: .18;
  --fpv-aim-shift-x: 0px;
  --fpv-aim-shift-y: 0px;
  --fpv-aim-pitch: 0deg;
  --fpv-aim-yaw: 0deg;
  --fpv-aim-bank: 0deg;
}
.fpv-cockpit.hidden { display: none; }
.fpv-cockpit-local {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform:
    translate(
      var(--fpv-aim-shift-x, 0px),
      calc(var(--fpv-roll-sink, 0%) + var(--fpv-aim-shift-y, 0px))
    )
    perspective(900px)
    rotateX(var(--fpv-aim-pitch, 0deg))
    rotateY(var(--fpv-aim-yaw, 0deg))
    rotate(calc(var(--fpv-bank-angle, 0deg) + var(--fpv-aim-bank, 0deg)))
    scale(var(--fpv-cockpit-scale, 1));
  transform-origin: 50% 72%;
  will-change: transform;
}
.fpv-cockpit-plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background: url('assets/cockpit-overlay.png') center / cover no-repeat;
  filter:
    drop-shadow(0 0 var(--fpv-frame-glow, 16px) rgba(142, 88, 255, .28))
    drop-shadow(0 0 var(--fpv-roll-shadow, 0px) rgba(247, 217, 168, .18));
  transition: opacity .18s ease;
  will-change: opacity;
}
.fpv-cockpit[data-view="cockpit"] .fpv-cockpit-plate {
  opacity: .96;
}
.fpv-cockpit-effects {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.fpv-cockpit[data-view="cockpit"] .fpv-cockpit-effects {
  opacity: 1;
}
.fpv-cockpit-effects::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 16.5%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(247,217,168,.62), rgba(190,185,242,.5), transparent);
  opacity: var(--fpv-frame-rail-opacity, .18);
  filter: blur(.25px) drop-shadow(0 0 10px rgba(190,185,242,.6));
}
.fpv-cockpit-effects::after {
  content: "";
  position: absolute;
  left: 37%;
  right: 37%;
  bottom: 12.2%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(190,185,242,.72), transparent);
  opacity: var(--fpv-core-glint-opacity, .22);
  filter: drop-shadow(0 0 8px rgba(190,185,242,.7));
}
.fpv-canopy-sweep {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 36%, rgba(190,185,242,.14) 46%, transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(var(--fpv-canopy-shift, -9%));
}
.fpv-cockpit.is-rolling .fpv-canopy-sweep {
  opacity: .62;
}
.fpv-hit-indicator {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: var(--fpv-hit-flash, 0);
  background:
    radial-gradient(ellipse at 50% 56%, transparent 0 48%, rgba(239,185,214,.16) 62%, rgba(239,80,120,.34) 100%),
    linear-gradient(90deg, rgba(239,80,120,.42), transparent 17%, transparent 83%, rgba(239,80,120,.42)),
    linear-gradient(0deg, rgba(239,80,120,.36), transparent 16%, transparent 82%, rgba(247,217,168,.24));
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 16px rgba(239,80,120,.36));
}
.fpv-wing-energy {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  mix-blend-mode: screen;
  will-change: opacity;
}
.fpv-cockpit[data-view="cockpit"].is-firing .fpv-wing-energy {
  opacity: 0;
}
.fpv-energy-burst,
.fpv-energy-bolt,
.fpv-energy-spark {
  position: absolute;
  display: block;
  pointer-events: none;
}
.fpv-energy-burst {
  width: clamp(58px, 7.8cqw, 108px);
  aspect-ratio: 1;
  border-radius: 999px;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0 7%, rgba(247,217,168,.72) 8% 15%, rgba(190,185,242,.46) 24%, rgba(142,88,255,.18) 48%, transparent 72%),
    conic-gradient(from 18deg, transparent, rgba(239,237,255,.55), transparent 21%, rgba(142,88,255,.45), transparent 46%, rgba(247,217,168,.42), transparent 72%, rgba(239,237,255,.5), transparent);
  filter:
    blur(.25px)
    drop-shadow(0 0 12px rgba(239,237,255,.88))
    drop-shadow(0 0 28px rgba(142,88,255,.62));
  animation: fpv-energy-pulse .16s linear infinite;
}
.fpv-energy-left {
  left: clamp(245px, 29.2%, 390px);
  top: 43.4%;
  transform: translate(-50%, -50%) rotate(-18deg);
}
.fpv-energy-right {
  right: clamp(245px, 29.2%, 390px);
  top: 43.4%;
  transform: translate(50%, -50%) rotate(18deg);
}
.fpv-energy-bolt {
  width: clamp(1px, .18cqw, 2px);
  height: clamp(118px, 18cqw, 250px);
  border-radius: 999px;
  background:
    linear-gradient(180deg, transparent 0 3%, rgba(239,237,255,.98) 12%, rgba(247,217,168,.92) 34%, rgba(190,185,242,.66) 62%, transparent 100%);
  box-shadow:
    0 0 10px rgba(239,237,255,.92),
    0 0 24px rgba(142,88,255,.62),
    0 0 46px rgba(247,217,168,.32);
  filter: blur(.12px);
  transform-origin: 50% 100%;
  animation: fpv-energy-crackle .11s steps(2, end) infinite;
}
.fpv-energy-bolt-left-a {
  left: 33.2%;
  top: 28.4%;
  transform: rotate(-17deg) skewX(-7deg);
}
.fpv-energy-bolt-left-b {
  left: 37.2%;
  top: 31.8%;
  height: clamp(90px, 13.2cqw, 180px);
  transform: rotate(-7deg) skewX(5deg);
  opacity: .64;
}
.fpv-energy-bolt-right-a {
  right: 33.2%;
  top: 28.4%;
  transform: rotate(17deg) skewX(7deg);
}
.fpv-energy-bolt-right-b {
  right: 37.2%;
  top: 31.8%;
  height: clamp(90px, 13.2cqw, 180px);
  transform: rotate(7deg) skewX(-5deg);
  opacity: .64;
}
.fpv-energy-spark {
  width: clamp(8px, 1cqw, 16px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 20%, rgba(247,217,168,.62) 21% 38%, rgba(142,88,255,.34) 48%, transparent 72%);
  box-shadow:
    0 0 9px rgba(239,237,255,.75),
    0 0 20px rgba(142,88,255,.45);
  animation: fpv-energy-spark .18s ease-in-out infinite alternate;
}
.fpv-energy-spark-left-a { left: 27.1%; top: 39.8%; }
.fpv-energy-spark-left-b { left: 31.4%; top: 47.1%; animation-delay: -.07s; }
.fpv-energy-spark-right-a { right: 27.1%; top: 39.8%; animation-delay: -.04s; }
.fpv-energy-spark-right-b { right: 31.4%; top: 47.1%; animation-delay: -.1s; }
@keyframes fpv-energy-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(.94) rotate(-18deg); filter: blur(.2px) drop-shadow(0 0 12px rgba(239,237,255,.86)) drop-shadow(0 0 26px rgba(142,88,255,.58)); }
  50% { transform: translate(-50%, -50%) scale(1.08) rotate(-11deg); filter: blur(.4px) drop-shadow(0 0 18px rgba(239,237,255,.98)) drop-shadow(0 0 38px rgba(142,88,255,.72)); }
}
.fpv-energy-right {
  animation-name: fpv-energy-pulse-right;
}
@keyframes fpv-energy-pulse-right {
  0%, 100% { transform: translate(50%, -50%) scale(.94) rotate(18deg); filter: blur(.2px) drop-shadow(0 0 12px rgba(239,237,255,.86)) drop-shadow(0 0 26px rgba(142,88,255,.58)); }
  50% { transform: translate(50%, -50%) scale(1.08) rotate(11deg); filter: blur(.4px) drop-shadow(0 0 18px rgba(239,237,255,.98)) drop-shadow(0 0 38px rgba(142,88,255,.72)); }
}
@keyframes fpv-energy-crackle {
  0% { opacity: .68; filter: blur(.08px); }
  50% { opacity: 1; filter: blur(.22px); }
  100% { opacity: .76; filter: blur(.12px); }
}
@keyframes fpv-energy-spark {
  from { transform: translateY(0) scale(.74); opacity: .52; }
  to { transform: translateY(-8px) scale(1.22); opacity: .96; }
}
.fpv-roll-gyro {
  position: absolute;
  left: 50%;
  bottom: clamp(80px, 14cqw, 124px);
  width: clamp(54px, 10cqw, 84px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 12px rgba(190,185,242,.52));
}
.fpv-roll-ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(190,185,242,.55);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(8,7,26,.22) 0 42%, transparent 43%),
    conic-gradient(from 0deg, transparent 0 12%, rgba(247,217,168,.46) 13% 15%, transparent 16% 50%, rgba(190,185,242,.42) 51% 53%, transparent 54%);
}
.fpv-roll-needle {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 2px;
  height: 42%;
  background: rgba(247,217,168,.9);
  box-shadow: 0 0 12px rgba(247,217,168,.72);
  transform: translateX(-50%) rotate(var(--fpv-spin-angle, 0deg));
  transform-origin: 50% 100%;
}
.fpv-dashboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 2;
  display: block;
  opacity: 0;
  transition: opacity .18s ease;
  letter-spacing: 0;
  will-change: opacity;
}
.fpv-cockpit[data-view="cockpit"] .fpv-dashboard {
  opacity: 1;
}
.fpv-screen {
  position: absolute;
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(7px, .72cqw, 12px) clamp(9px, .92cqw, 15px);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: rgba(239,237,255,.92);
  overflow: hidden;
  isolation: isolate;
  contain: paint;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 7px rgba(190,185,242,.18));
  transform-origin: var(--fpv-monitor-origin, 50% 50%);
}
.fpv-cockpit[data-view="cockpit"] .fpv-screen {
  background: none;
  border: 0;
  box-shadow: none;
}
.fpv-cockpit[data-view="cockpit"] .fpv-screen-left {
  padding: clamp(5px, .54cqw, 9px) clamp(8px, .78cqw, 13px);
  padding-left: clamp(10px, .92cqw, 16px);
  padding-right: clamp(8px, .72cqw, 12px);
}
.fpv-cockpit[data-view="cockpit"] .fpv-screen-core {
  padding: clamp(5px, .54cqw, 9px) clamp(8px, .72cqw, 12px);
}
.fpv-cockpit[data-view="cockpit"] .fpv-screen-right {
  padding: clamp(5px, .54cqw, 9px) clamp(8px, .78cqw, 13px);
  padding-left: clamp(8px, .72cqw, 12px);
  padding-right: clamp(10px, .92cqw, 16px);
}
.fpv-screen::before,
.fpv-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.fpv-screen::before {
  background: radial-gradient(ellipse at 50% 35%, rgba(190,185,242,.14), transparent 64%);
  opacity: .2;
  mix-blend-mode: screen;
}
.fpv-screen::after {
  inset: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(247,217,168,.18), transparent),
    linear-gradient(180deg, rgba(239,237,255,.08), transparent 42%, rgba(190,185,242,.11));
  opacity: var(--fpv-core-glint-opacity, .22);
  mix-blend-mode: screen;
}
.fpv-screen b,
.fpv-screen span {
  position: relative;
  z-index: 1;
  display: block;
  letter-spacing: 0;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  filter:
    drop-shadow(0 0 var(--fpv-text-glow-a, 4px) rgba(190,185,242,.62))
    drop-shadow(0 0 var(--fpv-text-glow-b, 9px) rgba(111,97,218,.38));
}
.fpv-cockpit[data-view="cockpit"] .fpv-screen-left b,
.fpv-cockpit[data-view="cockpit"] .fpv-screen-left span {
  transform: skewY(var(--fpv-monitor-text-skew, 0deg)) rotateZ(var(--fpv-monitor-text-rotate, 0deg));
  transform-origin: var(--fpv-monitor-text-origin, 50% 50%);
}
.fpv-cockpit[data-view="cockpit"] .fpv-screen-core b,
.fpv-cockpit[data-view="cockpit"] .fpv-screen-core span {
  transform: skewY(var(--fpv-monitor-text-skew, 0deg)) rotateZ(var(--fpv-monitor-text-rotate, 0deg));
  transform-origin: var(--fpv-monitor-text-origin, 50% 50%);
}
.fpv-cockpit[data-view="cockpit"] .fpv-screen-right b,
.fpv-cockpit[data-view="cockpit"] .fpv-screen-right span {
  transform: skewY(var(--fpv-monitor-text-skew, 0deg)) rotateZ(var(--fpv-monitor-text-rotate, 0deg));
  transform-origin: var(--fpv-monitor-text-origin, 50% 50%);
}
.fpv-screen b {
  margin: 0;
  color: rgba(247,217,168, var(--fpv-label-alpha, .72));
  font: 600 clamp(5.6px, .55cqw, 8px)/1.05 var(--mono);
  text-transform: uppercase;
  text-shadow:
    0 0 6px rgba(247,217,168,.5),
    0 0 var(--fpv-label-glow, 12px) rgba(247,217,168,.34);
}
.fpv-screen span {
  margin: 0;
  color: rgba(239,237,255, var(--fpv-value-alpha, .84));
  font: 600 clamp(8.4px, .92cqw, 13.5px)/1.02 var(--mono);
  text-shadow:
    0 0 6px rgba(239,237,255,.56),
    0 0 var(--fpv-value-glow, 14px) rgba(190,185,242,.46);
}
.fpv-screen .fpv-panel-sub {
  margin: 0;
  padding-top: clamp(1px, .12cqw, 2px);
  border-top: 0;
  color: rgba(190,185,242, var(--fpv-sub-alpha, .66));
  font: 600 clamp(5.6px, .52cqw, 7.6px)/1.04 var(--mono);
}
.fpv-screen-left,
.fpv-screen-right {
  display: grid;
  grid-template-columns: minmax(3.1em, .42fr) minmax(0, 1fr);
  grid-auto-rows: min-content;
  align-content: center;
  gap: clamp(1px, .17cqw, 3px) clamp(3px, .38cqw, 6px);
}
.fpv-screen-left > b,
.fpv-screen-right > b {
  grid-column: 1;
}
.fpv-screen-left > span:not(.fpv-panel-sub),
.fpv-screen-right > span:not(.fpv-panel-sub) {
  grid-column: 2;
}
.fpv-screen-left > .fpv-panel-sub,
.fpv-screen-right > .fpv-panel-sub {
  grid-column: 1 / 3;
}
.fpv-screen-core {
  text-align: center;
  align-items: center;
  justify-content: center;
}
.fpv-screen-core .fpv-panel-sub {
  max-width: 92%;
  font-size: clamp(5.6px, .48cqw, 7px);
}
.fpv-core-pulse {
  flex: 0 0 auto;
  width: clamp(18px, 2.25cqw, 32px);
  aspect-ratio: 1;
  margin: 2px auto clamp(3px, .5cqw, 6px);
  border: 1px solid rgba(247,217,168,.4);
  background:
    radial-gradient(circle, rgba(247,217,168,.92) 0 10%, rgba(190,185,242,.74) 11% 33%, transparent 34%),
    conic-gradient(from 45deg, transparent 0 18%, rgba(190,185,242,.65) 20% 30%, transparent 32% 50%, rgba(247,217,168,.5) 52% 62%, transparent 64%);
  clip-path: polygon(50% 0, 84% 50%, 50% 100%, 16% 50%);
  box-shadow: 0 0 var(--fpv-core-glow, 16px) rgba(190,185,242,.82);
  transform: scale(var(--fpv-core-scale, 1));
}
.fpv-holo-strip {
  position: absolute;
  left: clamp(54px, 14cqw, 112px);
  right: clamp(54px, 14cqw, 112px);
  top: clamp(46px, 8cqw, 76px);
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  opacity: 0;
  color: rgba(190,185,242,.8);
  font: 600 clamp(8px, 1.5cqw, 12px)/1.2 var(--mono);
  letter-spacing: 0;
  text-shadow: 0 0 12px rgba(190,185,242,.66);
  transition: opacity .18s ease;
}
.fpv-holo-strip span {
  min-width: 0;
  padding: 4px 7px;
  background: rgba(8,7,26,.34);
  border-top: 1px solid rgba(190,185,242,.22);
}
.fpv-cockpit[data-view="cockpit"] .fpv-holo-strip {
  opacity: 0;
}
.fpv-cockpit::before,
.fpv-cockpit::after {
  content: "";
  position: absolute;
  inset: clamp(14px, 3.2cqw, 28px);
  border: 1px solid rgba(247,217,168,.28);
  clip-path: polygon(0 0, 16% 0, 16% 1px, 1px 1px, 1px 18%, 0 18%, 0 0, 100% 0, 100% 18%, calc(100% - 1px) 18%, calc(100% - 1px) 1px, 84% 1px, 84% 0);
}
.fpv-cockpit::after {
  inset: auto clamp(18px, 4cqw, 34px) clamp(16px, 3.6cqw, 30px);
  height: clamp(28px, 7cqw, 56px);
  border-color: rgba(190,185,242,.2);
  clip-path: polygon(0 100%, 18% 100%, 18% calc(100% - 1px), 1px calc(100% - 1px), 1px 30%, 0 30%, 0 100%, 100% 100%, 100% 30%, calc(100% - 1px) 30%, calc(100% - 1px) calc(100% - 1px), 82% calc(100% - 1px), 82% 100%);
}
.fpv-cockpit[data-view="chase"]::before,
.fpv-cockpit[data-view="chase"]::after {
  opacity: 0.16;
  border-color: rgba(190,185,242,.14);
}
.fpv-cockpit[data-view="cockpit"]::before,
.fpv-cockpit[data-view="cockpit"]::after {
  opacity: 0;
}
.fpv-cockpit[data-view="cockpit"] #fpv-stage,
.fpv-cockpit[data-view="cockpit"] .fpv-readouts {
  opacity: 0;
  visibility: hidden;
}
#fpv-stage {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  max-width: min(92%, 34em);
  padding: 5px 8px;
  border-left: 1px solid rgba(247,217,168,.55);
  background: linear-gradient(90deg, rgba(8,7,26,.48), transparent);
}
.fpv-readouts {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--dawn);
}
.fpv-readouts span {
  min-width: 8.4em;
  padding: 5px 8px;
  border-top: 1px solid rgba(190,185,242,.26);
  background: rgba(8,7,26,.32);
}
.fpv-readouts #fpv-view {
  min-width: 7.2em;
  color: var(--pale);
  text-align: left;
}
.fpv-readouts span:last-child { text-align: right; }
body.fpv-active #bossbar,
body.fpv-active #btn-bomb {
  display: none;
}

/* ─── touch controls ─────────────────────────────────────────────── */

.touchbtn {
  display: none;
  position: absolute;
  z-index: 6;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, rgba(27,25,66,.85), rgba(13,12,38,.9));
  color: var(--dawn);
  font-family: var(--mono);
  text-shadow: 0 0 8px rgba(247,217,168,.8);
  box-shadow: 0 0 14px rgba(141,136,232,.25), inset 0 0 12px rgba(8,7,26,.6);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  line-height: 1;
}
.touchbtn:active { background: rgba(141,136,232,.3); }
#btn-bomb {
  right: 12px; bottom: 12px;
  width: 64px; height: 64px;
  font-size: 24px;
}
#btn-pause {
  left: 12px; bottom: 12px;
  width: 44px; height: 44px;
  font-size: 12px;
  color: var(--lavender);
  text-shadow: 0 0 8px rgba(190,185,242,.8);
}
.touch-only { display: none; }
#pause-quit { cursor: pointer; }

@media (pointer: coarse) {
  .touchbtn { display: flex; }
  .touch-only { display: flex; }
}
body.touch .touchbtn { display: flex; }
body.touch .touch-only { display: flex; }
@media (pointer: coarse) {
  #scr-title > .controls { display: none; }
  #scr-title .touch-only { display: none; }
}
body.touch #scr-title > .controls { display: none; }
body.touch #scr-title .touch-only { display: none; }

/* ─── atmosphere overlays ────────────────────────────────────────── */

#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 50;
  background: radial-gradient(115% 95% at 50% 45%, transparent 58%, rgba(4,3,14,.55) 100%);
}
#grain {
  position: fixed; inset: -50%; pointer-events: none; z-index: 51;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 0.9s steps(3) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); }
  33% { transform: translate(2%,-1%); }
  66% { transform: translate(-1%,2%); }
  100% { transform: translate(0,0); }
}

/* ─── narrow-screen header: vitals bar + now-playing marquee ─────── */

#statusbar {
  display: none;
  width: min(var(--stage-w, 100%), 100%);
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(27,25,66,.6), rgba(13,12,38,.75));
  box-shadow: 0 0 18px rgba(141,136,232,.12);
  padding: 6px 14px;
  font-size: clamp(10px, 2.6vw, 13px);
  letter-spacing: .12em;
  color: rgba(190,185,242,.75);
  white-space: nowrap;
}
#statusbar b { color: var(--pale); font-weight: 400; }
#statusbar .gems { color: var(--rose); letter-spacing: .16em; text-shadow: 0 0 7px rgba(239,185,214,.55); }
#statusbar .gems.gold { color: var(--dawn); text-shadow: 0 0 7px rgba(247,217,168,.55); }
#statusbar .site-return { flex: 0 0 auto; }

#marquee {
  display: none;
  width: min(var(--stage-w, 100%), 100%);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(27,25,66,.6), rgba(13,12,38,.75));
  box-shadow: 0 0 18px rgba(141,136,232,.12);
  padding: 7px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
#marquee-inner {
  display: inline-flex;
  white-space: nowrap;
  animation: marqueeScroll 22s linear infinite;
  will-change: transform;
}
#marquee-inner span {
  padding-right: 4em;
  font-size: clamp(10px, 2.6vw, 13px);
  letter-spacing: .18em;
  color: var(--lavender);
  line-height: 1.2;
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* narrow screens: drop the panels, stage anchors to the bottom (thumb
   territory); a static vitals bar and the music marquee ride the top
   edge — never over gameplay. The stage height reserves room for both
   bars AND stays inside the visible viewport, whichever binds. */
@media (max-width: 900px) {
  .panel { display: none; }
  .title-tracklist { display: grid; }
  .advanced-settings {
    width: min(100%, 320px);
    margin: 0 auto;
    border: 1px solid var(--line-dim);
    border-radius: 4px;
    background: rgba(8,7,26,.25);
  }
  .advanced-settings summary {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dawn);
    cursor: pointer;
    font-family: var(--mono);
    letter-spacing: .12em;
    list-style: none;
    text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .advanced-settings summary::-webkit-details-marker {
    display: none;
  }
  .advanced-settings summary::after {
    content: "+";
    margin-left: 0.75em;
    color: rgba(190,185,242,.65);
  }
  .advanced-settings[open] summary::after {
    content: "-";
  }
  .advanced-settings-body {
    padding: clamp(7px, 1.8vw, 10px);
    border-top: 1px solid var(--line-dim);
  }
  .advanced-settings .bind-panel {
    margin-top: 0;
  }
  #statusbar { display: flex; }
  .site-return-mobile { display: inline-flex; }
  #marquee { display: block; }
  #frame {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: clamp(6px, 1.2vh, 14px);
  }
  /* the stagewrap is a probe box: it absorbs ALL space under the header
     bars; JS measures it and stretches the playfield (and its logical
     game-unit height) to fill it, capped at a 1.65 aspect */
  #stagewrap {
    flex: 1 1 0;
    align-self: stretch;
    min-height: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
}