/* ═══════════════════════════════════════════════
   Blackjack Online — Global Styles & Casino Theme
   ═══════════════════════════════════════════════ */

/* System fonts, no external deps, instant render */
:root {
  --casino-green: #0a3d1f;
  --casino-dark: #051a0e;
  --felt-green: #0d5e2e;
  --felt-dark: #083d1d;
  --gold: #d4a853;
  --gold-light: #f0d878;
  --gold-dark: #a07828;
  --ivory: #f5f0e8;
  --red: #c0392b;
  --red-light: #e74c3c;
  --white: #ffffff;
  --black: #0a0a0a;
  --card-bg: #fafafa;
  --shadow: 0 4px 20px rgba(0,0,0,0.4);
  --radius: 12px;
  --transition: all 0.3s ease;
}

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

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: var(--casino-dark);
  color: var(--ivory);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ─── Button Base ─────────────────────────────── */

button {
  cursor: pointer;
  border: none;
  outline: none;
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  transition: var(--transition);
}

button:active {
  transform: scale(0.96);
}

.btn-small {
  background: rgba(255,255,255,0.1);
  color: var(--ivory);
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.15);
}

.btn-small:hover {
  background: rgba(255,255,255,0.2);
}

/* ─── Animations ─────────────────────────────────── */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

@keyframes dealCard {
  from { opacity: 0; transform: translateY(-60px) rotate(-10deg); }
  to { opacity: 1; transform: translateY(0) rotate(0deg); }
}

@keyframes chipGlow {
  0% { box-shadow: 0 0 5px var(--gold); }
  50% { box-shadow: 0 0 20px var(--gold-light), 0 0 40px var(--gold); }
  100% { box-shadow: 0 0 5px var(--gold); }
}

/* ─── Error Messages ─────────────────────────────── */

.error-message {
  color: var(--red-light);
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
  min-height: 20px;
}