/* ==========================================================================
   Game Start Card System
   Shared across all game start screens.
   Single CSS codebase for all game start-up option cards.
   Prefix: .gc-*
   ========================================================================== */

/* --- Difficulty / Mode Cards --- */

.gc-card {
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              border-color 0.15s ease, background-color 0.15s ease;
  border: 2px solid rgba(var(--bs-primary-rgb), 0.3);
  border-radius: 12px;
  background: rgba(var(--bs-primary-rgb), 0.04);
}

.gc-card:hover {
  transform: translateY(-2px);
  border-color: var(--bs-primary);
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb), 0.3);
  background: rgba(var(--bs-primary-rgb), 0.08);
}

.gc-card:active {
  transform: translateY(0);
}

/* Selected state (e.g. Yatzy active ruleset) */
.gc-card-selected,
.gc-card-selected:hover {
  border-color: var(--bs-primary);
  background: rgba(var(--bs-primary-rgb), 0.12);
  box-shadow: 0 0 0 2px var(--bs-primary);
}

/* --- Vertical variant (Flip, Yatzy) --- */

.gc-card-vertical {
  text-align: left;
}

.gc-card-vertical .card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
}

/* --- Card content elements --- */

.gc-card-icon {
  font-size: 1.8rem;
  margin-bottom: 6px;
}

.gc-card-label {
  font-weight: 700;
  font-size: 1.1rem;
}

.gc-card-tagline {
  font-size: 0.85rem;
  color: var(--bs-secondary);
  margin-top: 2px;
}

.gc-card-detail {
  font-size: 0.8rem;
  color: var(--color-text-disabled);
  margin-top: 4px;
}

/* Color variants */
.gc-card-scout .gc-card-icon { color: var(--color-primary); }
.gc-card-ensign .gc-card-icon { color: var(--color-success); }
.gc-card-easy .gc-card-icon { color: var(--color-success); }
.gc-card-medium .gc-card-icon { color: var(--color-warning); }
.gc-card-hard .gc-card-icon { color: var(--color-danger); }

/* --- Game felt tray (shared green surface for board/dice areas) --- */
/* Use on a Bootstrap .card to give it the standard game-table feel.       */
/* Replaces game-specific tray classes (e.g. .yatzy-tray) — reuse here.   */
.game-felt-tray {
  background-color: var(--color-game-felt-bg);
}
.game-felt-tray .card-body {
  background-color: var(--color-game-felt-bg);
}

/* --- Category Chips --- */

.gc-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.gc-chip {
  padding: 6px 14px;
  border-radius: 20px;
  border: 1px solid var(--bs-border-color);
  background: transparent;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.gc-chip:hover {
  background: rgba(var(--bs-primary-rgb), 0.08);
  border-color: var(--bs-primary);
}

.gc-chip.active {
  background: var(--bs-primary);
  color: var(--color-text-inverse);
  border-color: var(--bs-primary);
}

/* --- Resume Banner (Welcome back + Abandon) --- */

.gc-resume-banner {
  border-radius: 8px;
  font-size: 0.95rem;
  padding: 0.5rem 1rem;
  margin-bottom: 0.75rem;
  background: rgba(var(--bs-info-rgb), 0.12);
  border: 1px solid rgba(var(--bs-info-rgb), 0.3);
  color: var(--bs-body-color);
  animation: gc-resume-slide-in 300ms ease-out;
}

@keyframes gc-resume-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gc-resume-banner-fade {
  animation: gc-resume-fade-out 400ms ease-in forwards;
}

@keyframes gc-resume-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; height: 0; margin: 0; padding: 0; overflow: hidden; }
}