@font-face {
  font-family: 'Galaxy Slime';
  src: url('/assets/fonts/creepster-regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Live text stays sharp on every screen; the animation never changes layout. */
.auth-page .auth-logo {
  display: flex;
  justify-content: center;
  width: min(290px, 85vw);
  padding: 12px 10px 18px;
  text-decoration: none;
  overflow: visible;
}
.galaxy-wordmark {
  display: grid;
  position: relative;
  isolation: isolate;
  text-align: center;
  font: 400 clamp(58px, 17vw, 76px)/.82 'Galaxy Slime', fantasy;
  letter-spacing: .015em;
  color: #caff48;
  -webkit-text-stroke: 1px #12494c;
  text-shadow: 2px 0 #42e8df, -2px 0 #42e8df, 0 -2px #42e8df,
    0 3px #42e8df, 0 6px #143e3c, 0 0 16px #8cff4270;
  transform-origin: 50% 65%;
  animation: galaxy-logo-jelly 4.4s ease-in-out infinite;
}
.galaxy-wordmark::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -13px -26px -17px;
  border: 2px solid #8dff6555;
  border-radius: 48% 52% 55% 45%;
  background: radial-gradient(ellipse, #a8ff2320, #2cfc8b0a 55%, transparent 72%);
  box-shadow: inset 0 0 19px #b1ff4b22, 0 0 22px #8aff3f22;
  transform: rotate(-9deg);
  pointer-events: none;
}
.galaxy-wordmark-line {
  display: block;
  transform: rotate(-4deg);
}
.galaxy-wordmark-line + .galaxy-wordmark-line {
  color: #9bf534;
  font-size: .96em;
  margin-top: 5px;
  transform: rotate(3deg);
}
.auth-page { gap: 22px; }
.auth-page .auth-logo:focus-visible { outline: 2px solid #c5ff64; outline-offset: 10px; border-radius: 20px; }

/* Compact variant of the same wordmark used on login and registration. */
.app-header .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  width: 100px;
  height: 44px;
  text-decoration: none;
}
.app-header .galaxy-wordmark--header {
  font-size: 26px;
  line-height: .79;
  -webkit-text-stroke-width: .6px;
  text-shadow: 1px 0 #42e8df, -1px 0 #42e8df, 0 -1px #42e8df, 0 2px #42e8df, 0 3px #143e3c, 0 0 9px #8cff4250;
}
.app-header .galaxy-wordmark--header::before { inset: -4px -6px; border-width: 1px; }
.app-header .galaxy-wordmark--header .galaxy-wordmark-line + .galaxy-wordmark-line { margin-top: 2px; }
@media (max-width: 360px) {
  .landing .app-header { padding-inline: 12px; }
  .app-header .logo { flex-basis: 82px; width: 82px; }
  .app-header .galaxy-wordmark--header { font-size: 22px; }
  .landing .app-header .btn { padding: 7px 10px; font-size: .72rem; }
}

/* The legacy install banner is hidden by install-app-prompt.css. */
.panel-shell.panel--has-install-bar { padding-top: 0; }
.panel-shell > .panel-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  box-sizing: border-box;
  min-height: 64px;
  padding: calc(7px + env(safe-area-inset-top, 0px)) 16px 7px;
  gap: 14px;
}
html[data-visual-theme=galaxy] .panel-topbar .panel-topbar-logo,
.panel-topbar .panel-topbar-logo {
  display: block;
  flex: 0 0 auto;
  width: 84px;
  max-width: 28vw;
  height: 48px;
  object-fit: contain;
  object-position: left center;
}
.panel-topbar-actions { min-width: 0; margin-left: auto; }

/* Decorative layers cannot intercept taps or cover the amount labels. */
.sheet .quick-grid { gap: 19px 12px; padding-top: 3px; }
.sheet .quick-value {
  isolation: isolate;
  min-height: 62px;
  border: 1px solid #87e546;
  background: linear-gradient(160deg, #163a38, #0b2230 62%);
  color: #f4ffdf;
  text-shadow: 0 1px 2px #031910;
  box-shadow: inset 0 0 12px #96ff3410, 0 0 8px #9bff2620;
  overflow: visible;
}
.sheet .quick-value::before {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  top: -2px;
  height: 22px;
  background: url('/images/themes/galaxy/button-slime.svg') top center / 100% 100% no-repeat;
  transform-origin: center top;
  animation: galaxy-button-slime 3.8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
.sheet .quick-value::after {
  content: '';
  position: absolute;
  inset: auto 14px -5px auto;
  width: 8px;
  height: 11px;
  border: 1px solid #77c828;
  border-radius: 35% 45% 55% 55%;
  background: linear-gradient(90deg, #75d51b, #d3ff67 65%, #8de828);
  animation: galaxy-slime-drop 3.8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}
.sheet .quick-value:nth-child(2n)::before,
.sheet .quick-value:nth-child(2n)::after { animation-delay: -1.3s; }
.sheet .quick-value:nth-child(3n)::before,
.sheet .quick-value:nth-child(3n)::after { animation-delay: -2.4s; }
.sheet .quick-value .quick-badge { z-index: 2; top: -10px; }
.sheet .quick-value.active {
  border-color: #ddff8c;
  background: linear-gradient(145deg, #bdff63, #65de7e);
  color: #092622;
  text-shadow: none;
  box-shadow: 0 0 0 2px #91ff3c55, 0 0 18px #7fff4055;
}
.sheet .quick-value:focus-visible { outline: 2px solid #e7ffad; outline-offset: 4px; }
@media (hover: hover) {
  .sheet .quick-value:hover { border-color: #d8ff8d; background-color: #235340; }
}
@keyframes galaxy-logo-jelly {
  0%, 100% { transform: scale(1, 1) rotate(-1deg); }
  35% { transform: scale(1.045, .97) rotate(1deg); }
  50% { transform: scale(.98, 1.055) rotate(-.5deg); }
  65% { transform: scale(1.02, .99) rotate(.5deg); }
}
@keyframes galaxy-button-slime {
  0%, 100% { transform: scaleY(.82); }
  50% { transform: scaleY(1.12); }
}
@keyframes galaxy-slime-drop {
  0%, 100% { transform: translateY(-3px) scaleY(.7); }
  60% { transform: translateY(3px) scaleY(1.15); }
}
@media (max-width: 360px) {
  .auth-page .auth-logo { padding-block: 8px 14px; }
  .galaxy-wordmark { font-size: 58px; }
  .panel-shell > .panel-topbar { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .galaxy-wordmark,
  .sheet .quick-value::before,
  .sheet .quick-value::after { animation: none; }
}