@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Cinzel+Decorative:wght@700&display=swap');

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --color-bg:        #1a1208;
  --color-surface:   #2d1f0a;
  --color-surface2:  #3d2b10;
  --color-gold:      #d4a017;
  --color-gold-light:#f0c040;
  --color-gold-dark: #8b6914;
  --color-text:      #e8d5a0;
  --color-text-dark: #c4b070;
  --color-danger:    #c0392b;
  --color-success:   #27ae60;
  --color-blue:      #2a4a7a;
  --font-title:      'Cinzel Decorative', 'Cinzel', serif;
  --font-heading:    'Cinzel', serif;
  --font-body:       system-ui, sans-serif;
  --radius:          8px;
  --nav-height:      66px;
  --header-height:   60px;
  --touch-min:       44px;
  --panel-grey-top:  #3a3e44;
  --panel-grey-bot:  #262a2f;
}

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overscroll-behavior-y: contain;
}

#app {
  position: relative;
  height: 100%;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
}

/* Scrollbar hide utility */
.no-scroll { overflow: hidden; }
.scroll-y  { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* ===== KEYFRAMES (feedback rico) ===== */
/* Latido periódico: brilla un instante y descansa el resto del ciclo */
@keyframes pulse-glow {
  0%, 70%, 100% { filter: drop-shadow(0 0 2px rgba(240,192,64,0.4)); transform: scale(1); }
  80%           { filter: drop-shadow(0 0 11px rgba(240,192,64,0.95)); transform: scale(1.07); }
  90%           { filter: drop-shadow(0 0 4px rgba(240,192,64,0.55)); transform: scale(1.01); }
}

@keyframes float-up {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -48px) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes flash-gold {
  0%   { color: var(--color-gold-light); text-shadow: 0 0 10px rgba(240,192,64,0.9); }
  100% { color: #fff; text-shadow: none; }
}

/* Número flotante "+N" al cosechar */
.float-num {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-gold-light);
  text-shadow: 0 2px 6px rgba(0,0,0,0.9);
  pointer-events: none;
  z-index: 30;
  animation: float-up 1.1s ease-out forwards;
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* Badge de notificación */
.badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  background: var(--color-danger);
  border: 1px solid #ff6b5a;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-family: var(--font-body);
  pointer-events: none;
}