/* Schildersafari – Custom Styles */

:root {
  --ss-green:      #1a6b3a;
  --ss-green-light:#d4edda;
  --ss-gold:       #f4a024;
  --ss-bg:         #f8fafb;
}

body {
  background: var(--ss-bg);
  font-family: system-ui, -apple-system, sans-serif;
}

/* Navbar brand color override handled inline */

/* Cards */
.card {
  border-radius: 1rem;
}

/* Large plate input on mobile */
#plateInput {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Plate badge in result card */
#plateCode {
  font-size: 1.6rem;
  letter-spacing: 0.2em;
  font-weight: 700;
}

/* Score display */
.score-value {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--ss-green);
}

/* History table improvements on mobile */
@media (max-width: 576px) {
  .table-responsive-stack tr {
    display: block;
    border-bottom: 2px solid #dee2e6;
    margin-bottom: .5rem;
  }
  .table-responsive-stack td {
    display: block;
    border: none;
    padding: .25rem .5rem;
  }
  .table-responsive-stack td::before {
    content: attr(data-label);
    font-weight: 600;
    margin-right: .5rem;
    color: #6c757d;
  }
}

/* Rarity badges */
.rarity-1  { background: #dc3545; color: #fff; }
.rarity-2  { background: #fd7e14; color: #fff; }
.rarity-3  { background: #ffc107; color: #000; }
.rarity-4  { background: #198754; color: #fff; }
.rarity-5  { background: #0d6efd; color: #fff; }
.rarity-6  { background: #6610f2; color: #fff; }
.rarity-7  { background: #6f42c1; color: #fff; }
.rarity-8  { background: #d63384; color: #fff; }
.rarity-9  { background: #0dcaf0; color: #000; }
.rarity-10 { background: #212529; color: #fff; }

/* Join-code display */
.join-code {
  font-family: monospace;
  letter-spacing: 0.3em;
  font-size: 1.3rem;
  font-weight: 700;
  background: var(--ss-green-light);
  color: var(--ss-green);
  padding: .25rem .75rem;
  border-radius: .5rem;
  display: inline-block;
  cursor: pointer;
  user-select: all;
}

/* Offline banner */
#offlineBanner {
  display: none;
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  background: #343a40;
  color: #fff;
  padding: .5rem 1.5rem;
  border-radius: 2rem;
  z-index: 9999;
  font-size: .9rem;
}