.referral-promo {
  position: relative;
  overflow: hidden;
  border: 1px solid rgb(219 179 98 / 50%);
  border-radius: 14px;
  background: #101c23;
  box-shadow: 0 4px 20px rgb(0 0 0 / 20%);
  text-align: start;
  cursor: pointer;
}

.referral-promo__art, .referral-promo__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.referral-promo__art { object-fit: cover; object-position: center 38%; }
.referral-promo__shade { background: linear-gradient(90deg, rgb(6 18 26 / 94%), rgb(6 18 26 / 76%) 40%, rgb(6 18 26 / 8%) 85%), linear-gradient(0deg, rgb(6 18 26 / 90%), transparent 65%); }
.referral-promo__copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; }
.referral-promo__title { max-width: 72%; color: #ffe1a3; font-size: 24px; font-weight: 800; line-height: 1.15; text-wrap: balance; }
.referral-promo__subtitle { max-width: 68%; color: #f3f2e9; font-size: 12px; line-height: 1.5; text-wrap: pretty; }
.referral-promo__action { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: #ffe1a3; font-size: 11px; font-weight: 700; text-align: start; cursor: pointer; }
.referral-promo__action:disabled { cursor: default; }
.referral-promo__action svg, .referral-promo__stats svg { flex-shrink: 0; }
.referral-promo__stats { display: flex; align-items: center; gap: 8px; color: #ffe1a3; font-size: 12px; font-weight: 600; }
.referral-promo__link { display: block; max-width: 100%; color: #f6e4b9; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; user-select: text; -webkit-user-select: text; cursor: copy; text-decoration: underline; text-underline-offset: 3px; }
.referral-promo__action:focus-visible, .referral-promo__link:focus-visible, .referral-promo__retry:focus-visible { outline: 2px solid #f6d58d; outline-offset: 3px; }
.referral-promo__status { color: #e0e6e8; font-size: 11px; line-height: 1.5; }
.referral-promo__status:empty { display: none; }
.referral-promo__retry { margin-top: 6px; color: #ffe1a3; text-decoration: underline; padding: 4px 0; }
/* Fight Screen Pokemon-style Animations */

/* ====== CHARACTER SPRITE ANIMATIONS ====== */

/* Idle breathing animation - subtle up/down movement */
@keyframes idle-breath {
  0%, 100% {
    transform: translateY(0) scaleX(var(--mirror, 1));
  }
  50% {
    transform: translateY(-3px) scaleX(var(--mirror, 1));
  }
}

.animate-idle-breath {
  animation: idle-breath 2s ease-in-out infinite;
}

/* Attack lunge - Pokemon style forward movement */
@keyframes attack-lunge {
  0% {
    transform: translateX(0) scaleX(var(--mirror, 1));
  }
  15% {
    transform: translateX(calc(25px * var(--dir, 1))) scaleX(var(--mirror, 1)) scale(1.05);
  }
  30% {
    transform: translateX(calc(45px * var(--dir, 1))) scaleX(var(--mirror, 1)) scale(1.1);
  }
  50% {
    transform: translateX(calc(45px * var(--dir, 1))) scaleX(var(--mirror, 1)) scale(1.1);
  }
  100% {
    transform: translateX(0) scaleX(var(--mirror, 1));
  }
}

.animate-attack-lunge {
  animation: attack-lunge 333ms ease-out forwards;
}

/* Hit shake - Pokemon style damage reaction with flash */
@keyframes hit-shake {
  0%, 100% {
    transform: translateX(0) scaleX(var(--mirror, 1));
    filter: brightness(1);
  }
  10% {
    transform: translateX(-10px) scaleX(var(--mirror, 1));
    filter: brightness(2);
  }
  20% {
    transform: translateX(10px) scaleX(var(--mirror, 1));
    filter: brightness(1.5);
  }
  30% {
    transform: translateX(-8px) scaleX(var(--mirror, 1));
    filter: brightness(2);
  }
  40% {
    transform: translateX(8px) scaleX(var(--mirror, 1));
    filter: brightness(1.5);
  }
  50% {
    transform: translateX(-5px) scaleX(var(--mirror, 1));
    filter: brightness(1.3);
  }
  60% {
    transform: translateX(5px) scaleX(var(--mirror, 1));
    filter: brightness(1.1);
  }
  70%, 100% {
    transform: translateX(0) scaleX(var(--mirror, 1));
    filter: brightness(1);
  }
}

.animate-hit-shake {
  animation: hit-shake 267ms ease-out forwards;
}

/* ====== DAMAGE NUMBER ANIMATIONS ====== */

/* Damage number float up */
@keyframes damage-float {
  0% {
    opacity: 1;
    transform: translateY(0) scale(0.5);
  }
  10% {
    opacity: 1;
    transform: translateY(-15px) scale(1.3);
  }
  25% {
    opacity: 1;
    transform: translateY(-25px) scale(1.1);
  }
  75% {
    opacity: 1;
    transform: translateY(-50px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-80px) scale(0.8);
  }
}

.animate-damage-float {
  animation: damage-float 2500ms ease-out forwards;
}

/* Critical hit emphasis */
@keyframes crit-emphasis {
  0%, 100% {
    text-shadow: 0 0 10px rgba(239, 68, 68, 0.8);
    transform: scale(1);
  }
  50% {
    text-shadow: 0 0 25px rgba(239, 68, 68, 1);
    transform: scale(1.1);
  }
}

.animate-crit-emphasis {
  animation: crit-emphasis 0.3s ease-out;
}

/* ====== FLASH EFFECTS ====== */

/* White flash on hit */
@keyframes flash {
  0% {
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

.animate-flash {
  animation: flash 200ms ease-out forwards;
}

/* ====== HEALTH BAR ANIMATIONS ====== */

/* Low HP pulse */
@keyframes hp-pulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(239, 68, 68, 0.5);
  }
  50% {
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.9);
  }
}

.animate-hp-pulse {
  animation: hp-pulse 1s ease-in-out infinite;
}

/* HP drain effect */
@keyframes hp-drain {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
  100% {
    filter: brightness(1);
  }
}

.animate-hp-drain {
  animation: hp-drain 300ms ease-out;
}

/* ====== TURN INDICATOR ANIMATIONS ====== */

/* Active turn glow */
@keyframes turn-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(250, 204, 21, 0.4);
  }
  50% {
    box-shadow: 0 0 25px rgba(250, 204, 21, 0.8);
  }
}

.animate-turn-glow {
  animation: turn-glow 1.5s ease-in-out infinite;
}

/* ====== OUTCOME ANIMATIONS ====== */

/* Victory pulse */
@keyframes victory-pulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 10px rgba(74, 222, 128, 0.5);
  }
  50% {
    transform: scale(1.05);
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.8);
  }
}

.animate-victory {
  animation: victory-pulse 1s ease-in-out infinite;
}

/* Defeat fade */
@keyframes defeat-fade {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

.animate-defeat {
  animation: defeat-fade 2s ease-in-out infinite;
}

/* ====== GUARDIAN ANIMATIONS ====== */

/* Guardian ethereal glow */
@keyframes guardian-glow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(100, 150, 255, 0.3));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(100, 150, 255, 0.6));
  }
}

.animate-guardian-glow {
  animation: guardian-glow 3s ease-in-out infinite;
}

/* ====== MOBILE OVERRIDES ====== */

/* Scale down attack lunge distance on small screens */
@media (max-width: 639px) {
  @keyframes attack-lunge {
    0% {
      transform: translateX(0) scaleX(var(--mirror, 1));
    }
    15% {
      transform: translateX(calc(15px * var(--dir, 1))) scaleX(var(--mirror, 1)) scale(1.05);
    }
    30% {
      transform: translateX(calc(25px * var(--dir, 1))) scaleX(var(--mirror, 1)) scale(1.1);
    }
    50% {
      transform: translateX(calc(25px * var(--dir, 1))) scaleX(var(--mirror, 1)) scale(1.1);
    }
    100% {
      transform: translateX(0) scaleX(var(--mirror, 1));
    }
  }
}

/* ====== SPEED CONTROL ANIMATIONS ====== */

/* Button press effect */
@keyframes button-press {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

.animate-button-press {
  animation: button-press 100ms ease-out;
}
/* Lato 2.015 (Latin, Cyrillic and Greek), from google/fonts ofl/lato.
   WOFF2 is a lossless conversion of the upstream TTFs; license: /fonts/licenses/lato-OFL.txt.
   A separate CSS family keeps the legacy CDN Lato from overriding these faces.
   Used after Lato so the existing English typography stays unchanged. */

@font-face {
  font-family: 'Lato Multilingual';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/static/Lato-Black-Doc-KP3d.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/static/Lato-BlackItalic-kDgMCv2J.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/Lato-Bold-D9PmJnUo.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/static/Lato-BoldItalic-D4UaSltT.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/Lato-Italic-ezz1QXnt.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/static/Lato-Light-BkckqNK-.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/static/Lato-LightItalic-CuoUNzYr.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/Lato-Regular-B4yg31eI.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/static/Lato-Thin-DyDdqFWl.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato Multilingual';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('/static/Lato-ThinItalic-xUA6WUwb.woff2') format('woff2');
}