/* V64.15 — four reference compositions, retaining DOM controls and live data.
   Hardware/status bars belong to the phone/Telegram, not to the game artwork. */
:root { --spark-nav-height: 64px; }
body:has(:is(.reference-home,.reference-pass,.reference-explosion)) .app-shell { padding-bottom: env(safe-area-inset-bottom, 0px); }
body:has(.reference-home) .app-shell { padding-bottom: calc(var(--spark-nav-height) + env(safe-area-inset-bottom, 0px)); }
body:has(:is(.reference-home,.reference-pass,.reference-explosion)) #app { padding-top: 0; }
.reference-home-main,
.reference-result-main { display: flex; flex-direction: column; gap: 9px; }
.reference-home-main > *,
.reference-result-main > * { flex-shrink: 0; }
.reference-home-main {
  height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 54px - var(--spark-nav-height) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height: 600px;
  padding: 8px 0 10px;
}
.reference-home .reference-logo-lockup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 124px;
  margin: 0;
  transform: none;
  gap: 7px;
}
.reference-home .reference-neon-logo { width: min(88%, 290px); height: 103px; aspect-ratio: auto; }
.reference-home .reference-neon-logo::before { content: none; }
.reference-home .reference-logo-lockup img { opacity: 1; filter: none; }
.reference-home .reference-logo-lockup > span {
  position: static; width: auto; transform: none; margin: 0;
  font-size: 11px; line-height: 14px; letter-spacing: .48em;
  color: #b6d6ff; text-shadow: none;
}
.reference-home .reference-scene-home {
  flex: 1 1 0;
  min-height: 140px;
  margin: -3px -12px -9px;
  border-radius: 0;
  background-position: center 53%;
}
.reference-home .reference-scene-home .reference-character {
  width: 100%; height: 100%; bottom: 0; object-position: center bottom;
}
.reference-home .reference-scene-home::after {
  backdrop-filter: none;
  background: linear-gradient(180deg, #020813 0%, transparent 22%, transparent 82%, #020813 100%);
}
.reference-home .reference-profile-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) 66px;
  grid-template-rows: 46px 27px;
  gap: 7px 10px;
  align-items: center;
  min-height: 102px;
  aspect-ratio: auto;
  padding: 10px 14px;
  margin: 0;
  transform: none;
}
.reference-home .reference-profile-avatar {
  position: static; width: 46px; height: 46px;
  grid-column: 1; grid-row: 1;
}
.reference-home .reference-profile-copy { position: static; grid-column: 2; grid-row: 1; width: auto; min-width: 0; }
.reference-home .reference-profile-copy strong { font-size: 21px; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-home .reference-profile-copy small { font-size: 14px; line-height: 16px; margin-top: 1px; }
.reference-home .reference-profile-card button {
  position: relative; top: auto; right: auto;
  grid-column: 3; grid-row: 1 / 3;
  width: 66px; height: 76px; align-self: center; justify-self: center;
}
.reference-home .reference-level-badge {
  position: absolute; left: 50%; top: 50%;
  width: 146px; height: 146px;
  transform: translate(-50%, -50%);
}
.reference-home .reference-profile-progress {
  position: static; grid-column: 1 / 3; grid-row: 2; width: 100%;
}
.reference-home .reference-profile-progress i { margin: 0; width: 100%; height: 8px; }
.reference-home .reference-profile-progress em { font-size: 12px; line-height: 14px; margin-top: 5px; text-align: center; }
.reference-home .reference-stat-row { margin: 0; transform: none; gap: 9px; }
.reference-home .reference-stat-row > .reference-stat-card {
  min-height: 84px; aspect-ratio: auto;
  grid-template-rows: 24px 22px 15px;
  padding: 7px 3px; border-radius: 14px;
}
.reference-home .reference-stat-value > strong { font-size: 23px; }
.reference-home .reference-stat-row > .reference-stat-card small { font-size: 12px; line-height: 15px; }
.reference-home .reference-stat-danger > small { transform: none; }
.reference-home .reference-stat-people > .reference-people-icon { width: 24px; height: 23px; }
.reference-home .reference-stat-danger > span .reference-fire-icon { width: 17px; height: 23px; }
.reference-home .reference-primary { min-height: 56px; margin: 3px 0 0; }
.reference-home .reference-button-note { margin: 0; font-size: 12px; line-height: 16px; }
.reference-home .reference-incoming { min-height: 58px; padding: 8px 11px; margin: 1px 0 0; }
body:has(.reference-home) .reference-more-panel { margin: 10px 0; }

/* Navigation is real UI, not a second imitation of the iOS home indicator. */
body:has(.reference-home) .bottom-nav {
  min-height: calc(var(--spark-nav-height) + env(safe-area-inset-bottom, 0px));
  padding: 8px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  border-radius: 0;
  border-inline: 0;
  border-bottom: 0;
  background: #020a16f5;
}
body:has(.reference-home) .bottom-nav::after { content: none; }
body:has(.reference-home) .bottom-nav button { min-height: 44px; grid-template-rows: 25px 16px; align-content: center; }

/* Result screens: scene is flexible, feedback and actions sit below the mascot. */
.reference-game .reference-scene-game::after {
  background: linear-gradient(180deg, #020813 0%, transparent 14%, transparent 75%, #020813 100%);
}
.reference-result-main {
  height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 104px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  min-height: 620px;
  padding: 10px 0 5px;
}
.reference-result-main .reference-brush-title {
  display: grid; place-items: center;
  height: 120px; min-height: 120px;
  margin: 0; transform: none; font-size: 48px; line-height: .96;
  mix-blend-mode: normal;
}
.reference-brush-title img {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%; object-fit: contain;
  /* V64.16 assets contain real alpha; no black matte or screen blending. */
}
.reference-result-main .reference-scene {
  flex: 1 1 0; min-height: 150px;
  margin: -5px -12px -8px;
  border-radius: 0;
  box-shadow: none;
  background-image: linear-gradient(180deg, #020813, transparent 25%, transparent 78%, #020813), var(--reference-scene);
}
.reference-result-main .reference-character { width: 100%; height: 100%; bottom: 0; }
.reference-result-main .reference-scene::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: linear-gradient(180deg, #020813 0%, transparent 14%, transparent 84%, #020813 100%);
}
.reference-result-main .reference-result-callout { min-height: 98px; margin: 0; }
.reference-result-main .reference-primary { min-height: 58px; margin: 2px 0 0; }
.reference-result-main .reference-button-note { margin: 0; font-size: 14px; line-height: 18px; }
.reference-result-main .reference-share-actions { margin: 2px 0 0; }
.reference-result-main .reference-share-actions button { min-height: 62px; }
.reference-result-main .reference-keep-alive { margin: 2px 0 0; font-size: 13px; line-height: 18px; }
.reference-result-main .reference-loss-panel { margin: 0; padding: 8px 14px; }
.reference-result-main .reference-loss-panel > div { min-height: 40px; }
.reference-result-main .reference-secondary { margin: 0; min-height: 52px; }
.reference-result-main .reference-quote { margin: 5px 0 0; font-size: 14px; line-height: 20px; }
.reference-pass > .reference-more-panel,
.reference-explosion > .reference-more-panel { margin: 10px 0 0; }

@media (min-height: 741px) {
  .reference-game .reference-chain-head { display: grid; min-height: 88px; padding: 8px 7px; gap: 8px; }
  .reference-game .reference-chain-meta { gap: 3px; }
  .reference-game .reference-players { justify-content: flex-start; }
}
@media (max-height: 740px) {
  .reference-home-main { gap: 7px; min-height: 600px; }
  .reference-home .reference-logo-lockup { height: 96px; }
  .reference-home .reference-neon-logo { height: 77px; }
  .reference-home .reference-profile-card { min-height: 94px; padding: 6px 12px; }
  .reference-home .reference-stat-row > .reference-stat-card { min-height: 74px; padding-block: 3px; }
  .reference-home .reference-primary { min-height: 48px; padding-block: 10px; }
  .reference-result-main { gap: 7px; min-height: 590px; }
  .reference-result-main .reference-brush-title { height: 96px; min-height: 96px; font-size: 40px; }
  .reference-result-main .reference-scene { min-height: 126px; }
  .reference-result-main .reference-result-callout { min-height: 84px; }
  .reference-result-main .reference-primary { min-height: 50px; padding-block: 10px; }
  .reference-result-main .reference-loss-panel > div { min-height: 34px; }
}
@media (min-width: 600px) {
  body:has(:is(.reference-home,.reference-pass,.reference-explosion)) .app-shell { margin-top: 0; margin-bottom: 0; }
}