@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --felt: #0d5c2e;
  --felt-dark: #084422;
  --gold: #d4af37;
  --gold-light: #f0d060;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100vh;
}

body {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  color: #f0f0f0;
}

@layer components {
  .btn-primary {
    @apply bg-poker-gold hover:bg-poker-goldLight text-poker-black font-bold py-2 px-4 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl active:scale-95;
  }

  .btn-secondary {
    @apply bg-poker-felt hover:bg-poker-feltDark text-white font-semibold py-2 px-4 rounded-lg border border-poker-gold/30 transition-all duration-200 active:scale-95;
  }

  .btn-danger {
    @apply bg-poker-red hover:bg-red-700 text-white font-semibold py-2 px-4 rounded-lg transition-all duration-200 active:scale-95;
  }

  .card {
    @apply bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl p-6 shadow-xl;
  }

  .input-field {
    @apply w-full bg-white/10 border border-white/20 rounded-lg px-4 py-2 text-white placeholder-white/50 focus:outline-none focus:border-poker-gold focus:ring-1 focus:ring-poker-gold;
  }

  .felt-bg {
    background: radial-gradient(ellipse at center, var(--felt) 0%, var(--felt-dark) 100%);
  }
}

/* TIP landscape optimizations */
@media (orientation: landscape) {
  .tip-screen {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* Timer urgency animation */
@keyframes pulse-urgent {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.8; transform: scale(1.02); }
}

.timer-urgent {
  animation: pulse-urgent 1s ease-in-out infinite;
  color: #ff4444 !important;
}

@keyframes break-flash {
  0%, 100% { background-color: rgba(212, 175, 55, 0.1); }
  50% { background-color: rgba(212, 175, 55, 0.3); }
}

.break-active {
  animation: break-flash 2s ease-in-out infinite;
}