/* ── TEXAS 42 — GAME CSS ── */

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

html, body {
  height: 100%;
  min-height: -webkit-fill-available;
  background: #BDB8A8;
  overflow: hidden;
}

body { font-family: Georgia, serif; }

#root {
  height: 100vh;
  height: 100dvh;
}

/* ── SAFE AREA — notched/home-bar devices (iPhone 11+, etc) ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #root {
    padding-top:    env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left:   env(safe-area-inset-left);
    padding-right:  env(safe-area-inset-right);
  }
}

button {
  cursor: pointer;
  font-family: Georgia, serif;
  -webkit-tap-highlight-color: transparent;
}

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,.1); }
::-webkit-scrollbar-thumb { background: #8AAA80; border-radius: 2px; }

/* ── RANGE INPUT ── */
input[type=range] { accent-color: #2E7D32; }

/* ── ANIMATIONS ── */
@keyframes winPulse {
  0%,100% { box-shadow: 0 0 0px #FFD700; }
  50%      { box-shadow: 0 0 16px 4px #FFD700; }
}

@keyframes slideUp {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: .4; }
  100% { opacity: 0; transform: translateY(-80px); }
}

@keyframes slideDown {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: .4; }
  100% { opacity: 0; transform: translateY(80px); }
}

@keyframes slideLeft {
  0%   { opacity: 1; transform: translateX(0); }
  60%  { opacity: .4; }
  100% { opacity: 0; transform: translateX(-80px); }
}

@keyframes slideRight {
  0%   { opacity: 1; transform: translateX(0); }
  60%  { opacity: .4; }
  100% { opacity: 0; transform: translateX(80px); }
}

@keyframes bidFade {
  0%   { opacity: 0; transform: translate(-50%,-60%) scale(.85); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.97); }
}

@keyframes rainFall {
  0%   { transform: translateY(-120px) rotate(var(--rot)); }
  100% { transform: translateY(110vh)  rotate(var(--rot)); }
}

@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(18px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes trumpFade {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.82); }
  15%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.95); }
}

@keyframes rotateHint {
  0%,100% { transform: rotate(-15deg); }
  50%     { transform: rotate(15deg); }
}

/* ── MOBILE OVERRIDES ── */
@media (max-width: 640px) {
  html, body { overflow: hidden; }
}