/* Animations CSS - Luz y Sombra: El Alba de Hispania */
/* Mobile-first interaction animations */

/* Ripple on buttons */
button.action::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

button.action:active::before {
  width: 300px;
  height: 300px;
}

/* Pulse for available buttons */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242, 166, 90, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(242, 166, 90, 0); }
}

button.action.available {
  animation: pulse 2s infinite;
}

/* Resource gain glow */
@keyframes resGlow {
  0% { box-shadow: 0 0 0 rgba(154, 208, 110, 0); border-color: #1b2636; }
  30% { box-shadow: 0 0 16px rgba(154, 208, 110, 0.6); border-color: #9ad06e; }
  100% { box-shadow: 0 0 0 rgba(154, 208, 110, 0); border-color: #1b2636; }
}

.res.gained {
  animation: resGlow 0.8s ease-out;
}

/* Resource loss shake */
@keyframes shakeLoss {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.res.lost {
  animation: shakeLoss 0.4s ease-out;
}

/* Slide in from right */
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Slide in from bottom */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Card entrance */
.card {
  animation: slideUp 0.4s ease-out;
}

/* Log entries */
#log p {
  animation: slideInRight 0.25s ease-out;
}

/* Progress bar transitions */
.bar { transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.hp-fill { transition: width 0.3s ease-out, background 0.3s ease; }

/* XP gain flash */
@keyframes xpFlash {
  0% { box-shadow: 0 0 0 rgba(242, 166, 90, 0); }
  40% { box-shadow: 0 0 20px rgba(242, 166, 90, 0.8), inset 0 0 10px rgba(242, 166, 90, 0.3); }
  100% { box-shadow: 0 0 0 rgba(242, 166, 90, 0); }
}

.xp-bar-wrap.flash {
  animation: xpFlash 0.6s ease-out;
}

/* Level up celebration */
@keyframes levelUpBounce {
  0% { transform: scale(1); }
  30% { transform: scale(1.3); }
  50% { transform: scale(0.95); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.level-badge.level-up {
  animation: levelUpBounce 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Streak fire */
@keyframes fireGlow {
  0%, 100% { text-shadow: 0 0 4px rgba(242, 166, 90, 0.3); }
  50% { text-shadow: 0 0 12px rgba(242, 166, 90, 0.7); }
}

.streak-active {
  animation: fireGlow 2s ease-in-out infinite;
}

/* Number counter animation (for welcome back) */
@keyframes countUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.count-anim {
  animation: countUp 0.4s ease-out both;
}

/* Tutorial styles */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9998;
  animation: fadeIn 0.3s ease-out;
}

.tutorial-tooltip {
  position: fixed;
  background: linear-gradient(180deg, #111827 0%, #0e1522 100%);
  border: 2px solid #f2a65a;
  border-radius: 12px;
  padding: 16px;
  max-width: 300px;
  z-index: 9999;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  animation: slideUp 0.3s ease-out;
}

.tutorial-tooltip h3 { margin: 0 0 8px; color: #f2a65a; font-size: 1rem; }
.tutorial-tooltip p { margin: 0 0 12px; color: #e7edf7; line-height: 1.5; font-size: 0.88rem; }

.tutorial-action {
  background: #0c1424;
  border: 1px solid #1b2636;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 12px 0;
  color: #9ad06e;
  font-size: 0.85rem;
}

.tutorial-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }

.tutorial-skip {
  background: transparent;
  border: 1px solid #1b2636;
  color: #93a1b3;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.75rem;
}

.tutorial-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #1b2636;
}

.tutorial-footer span { color: #93a1b3; font-size: 0.82rem; }

.tutorial-next {
  background: linear-gradient(180deg, #f2a65a, #e09548);
  border: none;
  color: #0b0e12;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}

.tutorial-highlight {
  position: relative;
  z-index: 9999;
  box-shadow: 0 0 0 4px rgba(242, 166, 90, 0.5), 0 0 20px rgba(242, 166, 90, 0.3);
  animation: pulse 2s infinite;
}

/* In-app notifications */
.notification-container {
  position: fixed;
  top: calc(var(--header-h, 110px) + 8px);
  right: 12px;
  z-index: 400;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 300px;
}

.in-app-notification {
  background: linear-gradient(180deg, #111827 0%, #0e1522 100%);
  border: 1px solid #1b2636;
  border-left: 4px solid #f2a65a;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  animation: slideInRight 0.3s ease-out;
}

.in-app-notification.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}

@keyframes fadeOut {
  to { opacity: 0; transform: translateX(16px); }
}

.notif-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.notif-header strong { color: #e7edf7; font-size: 0.9rem; }

.notif-close {
  background: transparent;
  border: none;
  color: #93a1b3;
  font-size: 1.3rem;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  line-height: 1;
}

.notif-body { color: #93a1b3; font-size: 0.82rem; line-height: 1.4; }

/* Achievement unlock */
.ach { transition: all 0.2s ease; }
.ach:not(.locked):active { transform: scale(0.9); }

@keyframes achUnlock {
  0% { transform: scale(0.5); opacity: 0; }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.ach.just-unlocked {
  animation: achUnlock 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 0 16px rgba(242, 166, 90, 0.5);
  border-color: var(--accent);
}

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Tags hover */
.tag, .stat-pill { transition: all 0.2s ease; }

/* Spinner */
@keyframes spin { to { transform: rotate(360deg); } }
.loading-spinner {
  border: 3px solid #1b2636;
  border-top-color: #f2a65a;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  animation: spin 1s linear infinite;
}

/* Particle burst for button actions */
@keyframes particleBurst {
  0% { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0); }
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  animation: particleBurst 0.7s ease-out forwards;
}

/* Screen flash for critical events */
@keyframes screenFlash {
  0% { opacity: 0.3; }
  100% { opacity: 0; }
}

.screen-flash {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  animation: screenFlash 0.4s ease-out forwards;
}

.screen-flash.gold { background: rgba(242, 166, 90, 1); }
.screen-flash.red { background: rgba(255, 107, 107, 1); }
.screen-flash.green { background: rgba(154, 208, 110, 1); }

/* ===== MEJORA 6: ANIMATED RESOURCE COUNTERS ===== */
@keyframes countFlashGreen {
  0% { color: #9ad06e; transform: scale(1.2); }
  100% { color: inherit; transform: scale(1); }
}
@keyframes countFlashRed {
  0% { color: #ff6b6b; transform: scale(1.2); }
  100% { color: inherit; transform: scale(1); }
}
.res b.count-up { animation: countFlashGreen 0.5s ease-out; display: inline-block; }
.res b.count-down { animation: countFlashRed 0.5s ease-out; display: inline-block; }

/* ===== MEJORA 10: TYPED NOTIFICATIONS ===== */
.in-app-notification.type-achievement { border-left-color: #f59e0b; }
.in-app-notification.type-boss { border-left-color: #ff6b6b; }
.in-app-notification.type-resource { border-left-color: #9ad06e; }
.in-app-notification.type-expedition { border-left-color: #4dabf7; }
.in-app-notification.type-trader { border-left-color: #c084fc; }
.in-app-notification.type-starving { border-left-color: #ff6b6b; }
.notif-icon { font-size: 1.2rem; margin-right: 6px; }

/* ===== MEJORA 1: WEATHER VISUAL EFFECTS ===== */
.weather-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s ease;
}
.weather-overlay.active { opacity: 1; }

@keyframes rainDrop {
  0% { transform: translateY(-10px); opacity: 0; }
  10% { opacity: 0.6; }
  100% { transform: translateY(100vh); opacity: 0; }
}
.rain-drop {
  position: absolute;
  width: 1px;
  height: 12px;
  background: linear-gradient(to bottom, transparent, #4dabf788);
  animation: rainDrop var(--dur, 1s) linear infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
  will-change: transform;
}

@keyframes windStreak {
  0% { transform: translateX(-100px); opacity: 0; }
  20% { opacity: 0.3; }
  100% { transform: translateX(calc(100vw + 100px)); opacity: 0; }
}
.wind-streak {
  position: absolute;
  width: 80px;
  height: 1px;
  background: linear-gradient(to right, transparent, #ffffff22, transparent);
  animation: windStreak var(--dur, 2s) linear infinite;
  animation-delay: var(--delay, 0s);
  top: var(--y, 50%);
  will-change: transform;
}

@keyframes sunRay {
  0%, 100% { opacity: 0.03; }
  50% { opacity: 0.08; }
}
.sun-ray {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #f2a65a11, transparent 70%);
  animation: sunRay 4s ease-in-out infinite;
}

/* ===== MEJORA 4: DYNAMIC FIREPLACE ===== */
@keyframes fireFlicker {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 0.9; }
  25% { transform: scaleY(1.1) scaleX(0.95); opacity: 1; }
  50% { transform: scaleY(0.9) scaleX(1.05); opacity: 0.85; }
  75% { transform: scaleY(1.05) scaleX(0.98); opacity: 0.95; }
}
.fire-indicator {
  display: inline-block;
  font-size: 1rem;
  transition: font-size 0.5s ease, filter 0.5s ease;
  filter: drop-shadow(0 0 4px rgba(242,166,90,0.3));
}
.fire-indicator.lit { animation: fireFlicker 0.6s ease-in-out infinite; }
.fire-indicator.hot { font-size: 1.3rem; filter: drop-shadow(0 0 12px rgba(255,100,30,0.6)); }
.fire-indicator.warm { font-size: 1.15rem; filter: drop-shadow(0 0 8px rgba(242,166,90,0.4)); }

/* ===== MEJORA 5: PASSIVE FLOATING GAINS ===== */
@keyframes passiveFloat {
  0% { opacity: 0; transform: translateY(0) translateX(-50%) scale(0.7); }
  20% { opacity: 1; transform: translateY(-8px) translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) translateX(-50%) scale(0.8); }
}
.passive-gain {
  position: absolute;
  left: 50%;
  top: 0;
  pointer-events: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ok);
  animation: passiveFloat 1.2s ease-out forwards;
  z-index: 10;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* ===== MEJORA 8: EVENT BANNERS ===== */
.event-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 600;
  padding: calc(12px + var(--safe-top, 0px)) 16px 12px;
  text-align: center;
  font-weight: 700;
  font-size: 0.9rem;
  color: #fff;
  transform: translateY(-100%);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.event-banner.show { transform: translateY(0); }
.event-banner.hidden { display: none; }
.event-banner.danger { background: linear-gradient(90deg, #ff6b6bcc, #e03636cc); }
.event-banner.opportunity { background: linear-gradient(90deg, #f59e0bcc, #d97706cc); }
.event-banner.weather { background: linear-gradient(90deg, #4dabf7cc, #228be6cc); }
.event-banner.neutral { background: linear-gradient(90deg, #6b728088, #4b556388); }

/* ===== MEJORA 3: ENHANCED COMBAT ===== */
@keyframes screenShake {
  0%, 100% { transform: translate(0,0); }
  10% { transform: translate(-3px, -2px); }
  20% { transform: translate(3px, 2px); }
  30% { transform: translate(-2px, 1px); }
  40% { transform: translate(2px, -1px); }
  50% { transform: translate(-1px, 2px); }
}
body.screen-shake { animation: screenShake 0.4s ease-out; }

@keyframes shieldGlow {
  0% { box-shadow: 0 0 0 rgba(77,171,247,0); }
  50% { box-shadow: 0 0 30px rgba(77,171,247,0.6), 0 0 60px rgba(77,171,247,0.3); }
  100% { box-shadow: 0 0 0 rgba(77,171,247,0); }
}
.fighter.defending { animation: shieldGlow 1s ease-out; }

@keyframes enemyRush {
  0% { transform: translateX(0); }
  30% { transform: translateX(-30px) scale(1.1); }
  100% { transform: translateX(0) scale(1); }
}
.fighter.enemy-rush { animation: enemyRush 0.4s ease-in-out; }

@keyframes healParticle {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(0.5); }
}
.heal-particle {
  position: absolute;
  color: #9ad06e;
  font-size: 0.8rem;
  pointer-events: none;
  animation: healParticle 0.8s ease-out forwards;
}

.dmg-num.crit {
  font-size: 1.4rem !important;
  text-shadow: 0 0 10px rgba(242,166,90,0.8);
}

/* ===== MEJORA 7: ENHANCED MAP ===== */
@keyframes regionCardPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,166,90,0); }
  50% { box-shadow: 0 0 12px rgba(242,166,90,0.2); }
}
.region-card.available { animation: regionCardPulse 2s ease-in-out infinite; }

/* ===== MEJORA 11: IDLE ANIMATIONS ===== */
@keyframes starTwinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.8; }
}
.star-particle {
  position: fixed;
  width: 2px;
  height: 2px;
  background: #fff;
  border-radius: 50%;
  pointer-events: none;
  animation: starTwinkle var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  z-index: 1;
}

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.res.idle-breathe { animation: breathe 3s ease-in-out infinite; }

/* ===== MEJORA 12: TUTORIAL SPOTLIGHT ===== */
.tutorial-overlay.spotlight {
  background: none;
}

.tutorial-highlight {
  position: relative;
  z-index: 9999;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75), 0 0 20px rgba(242, 166, 90, 0.4) !important;
  border-radius: 12px;
  animation: pulse 2s infinite;
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.tutorial-arrow {
  position: fixed;
  font-size: 1.5rem;
  z-index: 10000;
  pointer-events: none;
  animation: arrowBounce 0.8s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}

.tutorial-progress {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.tutorial-progress-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1b2636;
  transition: background 0.3s;
}
.tutorial-progress-dot.active { background: #f2a65a; }
.tutorial-progress-dot.done { background: #9ad06e; }

@keyframes tutorialComplete {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.1); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.tutorial-complete { animation: tutorialComplete 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275); }


@keyframes glowPulse {
  0% { box-shadow: 0 0 0 0 var(--glow-color, rgba(242,166,90,0.4)); }
  50% { box-shadow: 0 0 20px 4px var(--glow-color, rgba(242,166,90,0.3)); }
  100% { box-shadow: 0 0 0 0 var(--glow-color, rgba(242,166,90,0)); }
}

.glow-feedback {
  animation: glowPulse 0.6s ease-out;
}

/* ===== SETTLEMENT BUTTONS ===== */

/* ===== LOCATION STRIP ===== */
.s3-strip {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 2px 6px;
}
.s3-btn {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  background: #0c1320; border: 1px solid #1b2636; border-radius: 12px;
  color: var(--text,#e7edf7); font-size: 0.82rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s;
  -webkit-tap-highlight-color: transparent;
  min-height: 44px;
  font-family: inherit;
}
.s3-btn:active { transform: scale(0.95); }
.s3-btn:hover { border-color: var(--accent,#f2a65a); box-shadow: 0 2px 10px rgba(242,166,90,0.15); }
.s3-btn.active { border-color: #f59e0b; background: #1a1a0e; box-shadow: 0 0 12px rgba(245,158,11,0.2); }
.s3-btn.locked { opacity: 0.35; cursor: default; }
.s3-btn-icon { font-size: 1.2rem; }
.s3-btn-name { white-space: nowrap; }


/* ===== OVERLAY TRANSITIONS ===== */
.location-panel.panel-enter { animation: s3panelIn 0.4s cubic-bezier(0.34,1.56,0.64,1); }
.location-panel.panel-exit { animation: s3panelOut 0.25s ease-in forwards; }
@keyframes s3panelIn {
  0% { opacity: 0; transform: perspective(600px) rotateX(-12deg) scale(0.88) translateY(24px); }
  60% { transform: perspective(600px) rotateX(2deg) scale(1.01) translateY(-4px); }
  100% { opacity: 1; transform: perspective(600px) rotateX(0) scale(1) translateY(0); }
}
@keyframes s3panelOut {
  0% { opacity: 1; transform: perspective(600px) rotateX(0) scale(1); }
  100% { opacity: 0; transform: perspective(600px) rotateX(8deg) scale(0.92) translateY(16px); }
}

/* ===== RESPONSIVE ===== */
@media (min-width: 901px) {
  .s3-strip { gap: 8px; }
  .s3-btn { padding: 10px 18px; }
}

/* ============================================================
   ===== BEAUTY / EFFECTS PASS =================================
   ============================================================ */

/* --- Aurora ambiental + brasas flotantes (capa de fondo) --- */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ambient::before, .ambient::after {
  content: ''; position: absolute; width: 62vmax; height: 62vmax; border-radius: 50%;
  filter: blur(55px); opacity: 0.30; will-change: transform;
}
.ambient::before { background: radial-gradient(circle, var(--accent), transparent 68%); top: -22vmax; left: -12vmax; animation: auroraA 28s ease-in-out infinite alternate; }
.ambient::after  { background: radial-gradient(circle, #4dabf7, transparent 68%); bottom: -26vmax; right: -16vmax; animation: auroraB 34s ease-in-out infinite alternate; }
@keyframes auroraA { from { transform: translate(0,0) scale(1); } to { transform: translate(12vmax,8vmax) scale(1.25); } }
@keyframes auroraB { from { transform: translate(0,0) scale(1.1); } to { transform: translate(-10vmax,-6vmax) scale(1); } }
[data-theme="light"] .ambient::before { opacity: 0.16; }
[data-theme="light"] .ambient::after  { opacity: 0.12; }

.ember {
  position: absolute; bottom: -12px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff2d6, #f2a65a 55%, transparent 72%);
  box-shadow: 0 0 8px 2px rgba(242,166,90,0.45);
  opacity: 0; will-change: transform, opacity;
  animation: emberRise var(--dur, 12s) linear infinite; animation-delay: var(--delay, 0s);
  left: var(--x, 50%);
}
@keyframes emberRise {
  0%   { transform: translateY(0) translateX(0) scale(0.6); opacity: 0; }
  12%  { opacity: 0.85; }
  50%  { transform: translateY(-52vh) translateX(var(--drift, 10px)) scale(1); }
  88%  { opacity: 0.6; }
  100% { transform: translateY(-104vh) translateX(calc(var(--drift, 10px) * -1)) scale(0.35); opacity: 0; }
}
[data-theme="light"] .ember { mix-blend-mode: multiply; box-shadow: 0 0 6px 1px rgba(217,119,6,0.35); }

/* --- Título con brillo dorado animado (sin afectar el emoji del fuego) --- */
header h1 {
  background: linear-gradient(90deg, #ffe08a, #f2a65a, #fff1cf, #f2a65a, #ffe08a);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: titleShimmer 6s linear infinite;
}
.fire-indicator { -webkit-text-fill-color: initial; }
@keyframes titleShimmer { to { background-position: 200% center; } }
[data-theme="light"] header h1 { background: linear-gradient(90deg, #d97706, #f59e0b, #b45309, #f59e0b, #d97706); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; }

/* --- Barra de XP con destello que recorre --- */
.xp-bar { position: relative; overflow: hidden; }
.xp-bar::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 32%, rgba(255,255,255,0.5) 50%, transparent 68%);
  transform: translateX(-120%); animation: xpSheen 3.4s ease-in-out infinite;
}
@keyframes xpSheen { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }

/* --- Anillo giratorio de luz en la insignia de nivel --- */
.level-badge { position: relative; isolation: isolate; }
.level-badge::before {
  content: ''; position: absolute; inset: -3px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--accent), var(--accent2), var(--accent), var(--accent2), var(--accent));
  filter: blur(2px); opacity: 0.85; animation: badgeSpin 4.5s linear infinite;
}
@keyframes badgeSpin { to { transform: rotate(360deg); } }

/* --- Tarjetas: filo superior luminoso + glow al hover (solo puntero fino) --- */
.card { position: relative; }
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, transparent, rgba(242,166,90,0.55), transparent);
}
@media (hover: hover) and (pointer: fine) {
  .card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.5), 0 0 0 1px rgba(242,166,90,0.22); }
}

/* --- Flash de la pestaña "Más" al desbloquear --- */
@keyframes tabFlash {
  0%, 100% { filter: none; }
  25%, 75% { filter: drop-shadow(0 0 8px var(--accent)); }
  50% { filter: drop-shadow(0 0 16px var(--accent)); transform: translateY(-2px); }
}
.tab.tab-flash { animation: tabFlash 1.2s ease-in-out 2; }

/* --- Aparición espectacular de una sección recién desbloqueada --- */
@keyframes sectionReveal {
  0%   { opacity: 0; transform: translateY(16px) scale(0.97); box-shadow: 0 0 0 0 rgba(242,166,90,0.6); }
  55%  { box-shadow: 0 0 26px 5px rgba(242,166,90,0.4); }
  100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 8px 24px #00000044; }
}
.section-reveal { animation: sectionReveal 0.75s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

/* --- Icono de inicio flotante con halo --- */
.start-icon { animation: startFloat 3.4s ease-in-out infinite; filter: drop-shadow(0 0 18px rgba(242,166,90,0.5)); }
@keyframes startFloat { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
.start-btn { position: relative; }

/* --- Brillo suave recurrente en botones CTA (refuerza el breathing existente) --- */
.glow-btn::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%);
  transform: translateX(-130%); animation: ctaSheen 4.5s ease-in-out infinite;
}
@keyframes ctaSheen { 0% { transform: translateX(-130%); } 55%, 100% { transform: translateX(130%); } }

/* ===== SVG ICON STYLES ===== */
.svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  fill: currentColor;
}

.svg-icon-lg { width: 1.5em; height: 1.5em; }
.svg-icon-xl { width: 2em; height: 2em; }