/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Card placement animation */
@keyframes card-place {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.animate-card-place {
  animation: card-place 0.35s ease-out both;
}

/* Card capture flip animation */
@keyframes card-flip {
  0% { transform: perspective(600px) rotateY(0deg); }
  50% { transform: perspective(600px) rotateY(90deg); }
  100% { transform: perspective(600px) rotateY(0deg); }
}

.animate-card-flip {
  animation: card-flip 0.6s ease-in-out both;
}

/* Challenge notification slide-in */
@keyframes slide-in-right {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

.animate-slide-in {
  animation: slide-in-right 0.3s ease-out;
}

/* Countdown shrink bar (for challenge expiration) */
@keyframes shrink {
  from { width: 100%; }
  to { width: 0%; }
}

.animate-shrink {
  animation: shrink 30s linear;
}

/* Same/Plus rule indicator overlay */
@keyframes rule-announce {
  0%   { transform: scale(0.3); opacity: 0; }
  15%  { transform: scale(1.2); opacity: 1; }
  70%  { transform: scale(1); opacity: 1; }
  100% { transform: scale(1); opacity: 0; }
}

.rule-indicator {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  pointer-events: none;
  animation: rule-announce 1.2s ease-out forwards;
  text-shadow: 0 0 20px currentColor, 0 2px 4px rgba(0,0,0,0.8);
}

.rule-indicator-same { color: #facc15; }
.rule-indicator-plus { color: #a78bfa; }

/* Same capture flip (amber glow) */
@keyframes card-flip-same {
  0%   { transform: perspective(600px) rotateY(0deg); }
  50%  { transform: perspective(600px) rotateY(90deg); box-shadow: 0 0 20px rgba(250,204,21,0.8); }
  100% { transform: perspective(600px) rotateY(0deg); box-shadow: 0 0 12px rgba(250,204,21,0.4); }
}

.animate-card-flip-same {
  animation: card-flip-same 0.7s ease-in-out both;
}

/* Plus capture flip (violet glow) */
@keyframes card-flip-plus {
  0%   { transform: perspective(600px) rotateY(0deg); }
  50%  { transform: perspective(600px) rotateY(90deg); box-shadow: 0 0 20px rgba(167,139,250,0.8); }
  100% { transform: perspective(600px) rotateY(0deg); box-shadow: 0 0 12px rgba(167,139,250,0.4); }
}

.animate-card-flip-plus {
  animation: card-flip-plus 0.7s ease-in-out both;
}

/* Combo cascade flip (green flash, sequential) */
@keyframes card-flip-combo {
  0%   { transform: perspective(600px) rotateY(0deg); opacity: 0; }
  10%  { opacity: 1; }
  40%  { transform: perspective(600px) rotateY(90deg); box-shadow: 0 0 15px rgba(74,222,128,0.7); }
  100% { transform: perspective(600px) rotateY(0deg); opacity: 1; box-shadow: none; }
}

.animate-card-flip-combo {
  animation: card-flip-combo 0.5s ease-in-out both;
}

/* Booster card reveal (staggered) */
@keyframes booster-reveal {
  0% { transform: scale(0) rotateY(180deg); opacity: 0; }
  50% { transform: scale(1.15) rotateY(90deg); opacity: 0.8; }
  75% { transform: scale(1.05) rotateY(0deg); opacity: 1; }
  100% { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.animate-booster-reveal {
  animation: booster-reveal 0.6s ease-out both;
}

/* NEW badge pulse */
@keyframes badge-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.animate-badge-pulse {
  animation: badge-pulse 1.5s ease-in-out infinite;
}

/* Droppable cell glow (board cell when a hand card is selected) */
@keyframes droppable-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.55), 0 0 12px 2px rgba(251, 191, 36, 0.3) inset; }
  50%      { box-shadow: 0 0 0 2px rgba(251, 191, 36, 0.9),  0 0 22px 4px rgba(251, 191, 36, 0.55) inset; }
}

.droppable-cell {
  animation: droppable-pulse 1.4s ease-in-out infinite;
}

/* Stronger highlight during HTML5 dragover on a valid empty cell */
.droppable-cell-hover {
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 1), 0 0 30px 6px rgba(251, 191, 36, 0.7) inset !important;
  transition: box-shadow 0.15s ease-out;
}

/* Turn glow: highlights the active player's hand region. Switches side per turn. */
@keyframes turn-glow-blue {
  0%, 100% { box-shadow: 0 0 8px 1px rgba(59, 130, 246, 0.55); }
  50%      { box-shadow: 0 0 22px 4px rgba(59, 130, 246, 0.85); }
}

@keyframes turn-glow-red {
  0%, 100% { box-shadow: 0 0 8px 1px rgba(239, 68, 68, 0.55); }
  50%      { box-shadow: 0 0 22px 4px rgba(239, 68, 68, 0.85); }
}

.turn-glow-active {
  border-radius: 0.5rem;
}

.turn-glow-blue {
  animation: turn-glow-blue 2s ease-in-out infinite;
}

.turn-glow-red {
  animation: turn-glow-red 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .turn-glow-blue { box-shadow: 0 0 14px 3px rgba(59, 130, 246, 0.7); animation: none; }
  .turn-glow-red  { box-shadow: 0 0 14px 3px rgba(239, 68, 68, 0.7); animation: none; }
}

/* Shake animation for invalid action / error feedback */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.animate-shake {
  animation: shake 0.45s cubic-bezier(.36,.07,.19,.97) both;
}

/* Generic countdown bar shrink driven by inline --duration */
@keyframes countdown-shrink {
  from { width: 100%; }
  to { width: 0%; }
}

.countdown-bar {
  animation-name: countdown-shrink;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-duration: var(--countdown-duration, 30s);
}

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

/* Toggle from JS (e.g. animations_controller during scrubbing) */
.animations-disabled, .animations-disabled *, .animations-disabled *::before, .animations-disabled *::after {
  animation: none !important;
  transition: none !important;
}

/* ═══ GAME BOARD — DYNAMIC SIZING ═══ */

/*
 * Board cells and hand cards scale to fit the viewport.
 * Mobile: board fills width, hand cards are smaller below.
 * Desktop: fixed sizes with horizontal layout.
 */

/* --- Desktop (≥768px): fixed sizes --- */
.game-board-cell {
  width: 9rem;
  height: 12rem;
}
.game-hand-card {
  width: 9rem;
  height: 12rem;
}

/* --- Mobile (<768px): viewport-based sizing --- */
@media (max-width: 767px) {
  /* Board: 3 cells + 2 gaps (4px each) + padding (12px total) ≈ fit in viewport width */
  .game-board-cell {
    width: calc((100vw - 2.5rem) / 3);
    height: calc((100vw - 2.5rem) / 3 * 1.33);
    max-width: 7rem;
    max-height: 9.3rem;
  }

  /* Hand: 5 cards + 4 gaps (4px each) must fit in viewport width */
  .game-hand-card {
    width: calc((100vw - 3rem) / 5);
    height: calc((100vw - 3rem) / 5 * 1.33);
    max-width: 5.5rem;
    max-height: 7.3rem;
  }

  /* Opponent card backs on mobile */
  .game-opponent-card {
    width: calc((100vw - 3rem) / 5);
    height: calc((100vw - 3rem) / 5 * 1.33);
    max-width: 5.5rem;
    max-height: 7.3rem;
  }
}

/* --- Card inside game containers: fill parent --- */
.game-board-cell .card-inner,
.game-hand-card .card-inner {
  width: 100%;
  height: 100%;
}

/* Touch-friendly targets */
@media (pointer: coarse) {
  .touch-target {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Safe area insets for notched phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* --- Card image skeleton placeholder --- */
@keyframes card-shimmer {
  0%   { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}
.card-skeleton {
  background-color: rgb(31 41 55); /* gray-800 */
  background-image: linear-gradient(
    90deg,
    rgba(75, 85, 99, 0) 0%,
    rgba(75, 85, 99, 0.5) 50%,
    rgba(75, 85, 99, 0) 100%
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
  animation: card-shimmer 1.4s ease-in-out infinite;
}

/* --- Z-index scale (reference values, must match Tailwind classes used in views) ---
 * 30  navbar, bottom mobile bar, public header sticky
 * 40  mobile drawer overlays, game-modal backdrop, notification root
 * 50  modals (game-modal, challenge dialog, mod dialog), drawer panels, dropdowns
 * 60  PWA install banner, notification toasts (over modals)
 * 70  flash toasts (highest)
 */
:root {
  --z-nav: 30;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast-low: 60;
  --z-toast-high: 70;
}