/* v64.38: shared chrome and phone corrections, no gameplay rules. */
:root {
  --spark-top-chrome: 54px;
  --spark-safe-top: max(env(safe-area-inset-top, 0px), var(--spark-host-top, 0px));
  --spark-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--spark-host-bottom, 0px));
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.telegram-host { --spark-top-chrome: 0px; }
html.telegram-host .app-shell { padding-top: var(--spark-safe-top); }
html.telegram-host .reference-topbar { display: none; }
/* Keep language/settings discoverable, without another Close/title/ellipsis. */
html.telegram-host body:has(.friends-screen) .reference-topbar {
  display: flex; position: relative; top: auto; min-height: 44px;
  margin: 0; padding: 0; justify-content: flex-end;
  border: 0; background: none; box-shadow: none;
}
html.telegram-host .reference-topbar > :not(.top-actions),
html.telegram-host .top-actions > :not(.language-switch) { display: none; }
html.telegram-host .reference-more-dots { display: none; }
html.telegram-host #languageTrigger {
  width: auto; min-width: 64px; height: 44px; border: 0; border-radius: 10px;
  background: #09192b; gap: 7px; padding: 0 12px;
}
html.telegram-host #languageTrigger::before { content: '◎'; font-size: 20px; }
html.telegram-host #languageCurrent { display: inline; position: static; width: auto; height: auto; clip-path: none; overflow: visible; font-size: 13px; color: #b5d5fb; }
/* One nav component, regardless of active view or translated captions. */
body .app-shell #bottomNav {
  min-height: calc(var(--spark-nav-height) + var(--spark-safe-bottom));
  padding: 8px 14px calc(9px + var(--spark-safe-bottom));
  border-radius: 0; border-inline: 0; border-bottom: 0;
  background: #020a16; backdrop-filter: none;
  box-shadow: 0 -6px 16px #00000030;
}
body .app-shell #bottomNav::after { content: none; }
body .app-shell #bottomNav button {
  font-family: var(--spark-font-ui); font-stretch: normal; font-weight: 500;
  font-size: 12px; line-height: 16px; letter-spacing: 0;
  min-height: 44px; min-width: 0; padding: 0;
  display: grid; grid-template-rows: 25px 16px; gap: 3px;
  align-content: center; justify-items: center; color: #8fa9d0;
  text-shadow: none;
}
body .app-shell #bottomNav button > span {
  display: grid; place-items: center; width: 25px; height: 25px;
  transform: none; filter: none;
}
body .app-shell #bottomNav .nav-icon { width: 23px; height: 23px; fill: currentColor; overflow: visible; }
body .app-shell #bottomNav button.active { color: #bb62ff; text-shadow: 0 0 6px #b34cff55; }
body .app-shell #bottomNav button.active > span { filter: drop-shadow(0 0 4px #a84aff99); }
/* Explicit SVG paint invalidation avoids stale currentColor strokes in WebKit
   when the active tab moves away from Skins. */
body .app-shell #bottomNav button:not(.active) .nav-icon { color: #8fa9d0; fill: #8fa9d0; }
body .app-shell #bottomNav button.active .nav-icon { color: #bb62ff; fill: #bb62ff; }
body .app-shell #bottomNav button:not(.active) .nav-icon-skins :is(path,circle) { stroke: #8fa9d0; }
body .app-shell #bottomNav button.active .nav-icon-skins :is(path,circle) { stroke: #bb62ff; }
body .app-shell:has(#bottomNav:not(.hidden)) { padding-bottom: calc(var(--spark-nav-height) + var(--spark-safe-bottom) + 12px); }
body .app-shell:has(#bottomNav.hidden) { padding-bottom: var(--spark-safe-bottom); }
/* Small SVGs need a crisp core, not several opaque-looking glow layers. */
#app .reference-people-icon { filter: drop-shadow(0 0 2px #0099ff66); }
#app .reference-fire-icon { filter: drop-shadow(0 0 2px #ff302a66); }
/* The canvas owns horizontal glow bounds; the backdrop can extend upward. */
.reference-screen .reference-scene { overflow: visible; }
.reference-screen .reference-scene::before {
  /* Fade the entire raised artwork into its parent, not a slightly different
     solid midnight rectangle: no horizontal join above logo/result headings. */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 90%, transparent);
}
/* Keep the fuse clear of the Home tagline after the approved upward lift. */
.reference-home .reference-scene.reference-scene-home { margin-top: 10px; }
html.telegram-host .reference-home-main {
  height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - var(--spark-nav-height) - var(--spark-safe-top) - var(--spark-safe-bottom));
}
html.telegram-host .reference-game .reference-turn {
  --turn-height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 46px - var(--spark-safe-top) - var(--spark-safe-bottom));
}
html.telegram-host .reference-result-main {
  height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 50px - var(--spark-safe-top) - var(--spark-safe-bottom));
}
@media (max-height: 740px) {
  html.telegram-host :is(.reference-pass,.reference-explosion) .reference-result-main { height: auto; }
}
@media (min-width: 700px) {
  html.telegram-host .reference-home-main { height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - var(--spark-nav-height) - 48px - var(--spark-safe-top) - var(--spark-safe-bottom)); }
  html.telegram-host .reference-game .reference-turn { --turn-height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 94px - var(--spark-safe-top) - var(--spark-safe-bottom)); }
  html.telegram-host .reference-result-main { height: calc(var(--tg-viewport-stable-height, var(--spark-viewport-height)) - 98px - var(--spark-safe-top) - var(--spark-safe-bottom)); }
}