/* Cards */
.card { background: var(--card-bg, var(--color-surface)); border-radius: var(--radius); padding: calc(var(--space) * 1); box-shadow: var(--shadow); border: 1px solid var(--color-border); position: relative; }
.card + .card { margin-top: calc(var(--space) * 1.25); }
.card h1, .card h2, .card h3 { margin-top: 0; }
.card p { color: var(--color-text); }
.card .muted { color: var(--color-muted); }

/* Gentle border glow */
.card { box-shadow: 0 8px 24px rgba(227,6,19,0.12), var(--shadow); }

/* Flash messages */
.flash-wrap { margin-bottom: calc(var(--space) * 1.25); }
.flash { padding: calc(var(--space) * 0.75) calc(var(--space) * 1); border-radius: 10px; background: rgba(227,6,19,0.15); border: 1px solid rgba(227,6,19,0.35); color: #ffccd1; }
.flash-info { background: rgba(49,130,246,0.15); border-color: rgba(49,130,246,0.35); color: #cfe3ff; }

/* Scan card GPS warning (visible + animated) */
.scan-gps-warning {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(49,130,246,0.15);
  border: 1px solid rgba(49,130,246,0.35);
  color: #cfe3ff;
}

/* New station / warning animated border shimmer */
@keyframes cardPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35), 0 0 0 0 rgba(255, 255, 255, 0.25), var(--shadow); }
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0), 0 0 0 20px rgba(255, 255, 255, 0), var(--shadow); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0), var(--shadow); }
}
.scan-gps-warning.is-new { animation: cardPulse 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; border-color: rgba(255, 255, 255, 0.35); }

/* Completed chip replacing actions */
.station-card .closed-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.station-card .closed-chip::after { content: "▾"; font-size: 0.8rem; color: var(--color-muted); }

/* Cards */
.card { background: var(--card-bg, var(--color-surface)); border-radius: var(--radius); padding: calc(var(--space) * 1); box-shadow: var(--shadow); border: 1px solid var(--color-border); position: relative; }
.card + .card { margin-top: calc(var(--space) * 1.25); }
.card h1, .card h2, .card h3 { margin-top: 0; }
.card p { color: var(--color-text); }
.card .muted { color: var(--color-muted); }

/* Gentle border glow */
.card { box-shadow: 0 8px 24px rgba(227,6,19,0.12), var(--shadow); }

/* Flash messages */
.flash-wrap { margin-bottom: calc(var(--space) * 1.25); }
.flash { padding: calc(var(--space) * 0.75) calc(var(--space) * 1); border-radius: 10px; background: rgba(227,6,19,0.15); border: 1px solid rgba(227,6,19,0.35); color: #ffccd1; }
.flash-info { background: rgba(49,130,246,0.15); border-color: rgba(49,130,246,0.35); color: #cfe3ff; }

/* Scan card GPS warning (visible + animated) */
.scan-gps-warning {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(49,130,246,0.15);
  border: 1px solid rgba(49,130,246,0.35);
  color: #cfe3ff;
}

/* New station / warning animated border shimmer */
@keyframes cardPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.35), 0 0 0 0 rgba(255, 255, 255, 0.25), var(--shadow); }
    70% { box-shadow: 0 0 0 12px rgba(255, 255, 255, 0), 0 0 0 20px rgba(255, 255, 255, 0), var(--shadow); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0), 0 0 0 0 rgba(255, 255, 255, 0), var(--shadow); }
}
.scan-gps-warning.is-new { animation: cardPulse 0.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; border-color: rgba(255, 255, 255, 0.35); }

/* Completed chip replacing actions */
.station-card .closed-chip { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; }
.station-card .closed-chip::after { content: "▾"; font-size: 0.8rem; color: var(--color-muted); }

/* Highlight focus animation when coming from push deep-link */
#hlList li.is-new {
  animation: cardPulse 0.9s cubic-bezier(0.4, 0, 0.6, 1) 3; /* 3 pulses */
  border-color: rgba(255, 255, 255, 0.4);
}

/* Winners card styling */
#winnersCard .winners-first {
  border-color: rgba(255,215,0,0.45);
}
#winnersCard .winner-first-player strong {
  font-weight: 800;
}
#winnersCard .winner-row .winner strong { font-weight: 600; }