:root {
  --bg: #0f0f0f;
  --panel: #171717;
  --panel-2: #1b1b1b;
  --border: #262626;
  --text: #e5e5e5;
  --muted: #a3a3a3;

  /* Shared nav/button sizing */
  --btn-h: 44px;
  --btn-radius: 12px;

  /* Shared nav colors */
  --nav-settings-bg: #ffeb3b; /* yellow */
  --nav-settings-fg: #111;

  --nav-scoreboard-bg: #ffffff; /* white */
  --nav-scoreboard-fg: #111;

  --nav-teams-bg: #1976d2; /* blue */
  --nav-teams-fg: #fff;

  /* Shared export/import green */
  --action-exportimport-bg: #90ee90;
  --action-exportimport-fg: #000;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

/* Grid wrapper each page already has */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-content: start;
}

/* Generic card */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px;
}

/* Small text utilities */
.file-name,
.bytes-label {
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0.25rem 0;
}

/* Optional dashed outline you can toggle with a class */
.empty-outline {
  outline: 4px dashed #bdf80c;
  outline-offset: -4px;
}

/* Control Card (stands out, reversed) */
.control-card {
  background: #fff;
  color: #000;
  border: 1px solid #222;
  border-radius: 10px;
  padding: 12px;
}

/* ───────────────────────────
   Shared Import / Confirm dialog
   (Scoreboard / Teams / Animations)
   ─────────────────────────── */

/* Backdrop dim */
#confirmDialog::backdrop {
  background: rgba(0, 0, 0, 0.6);
}

/* Dialog shell (we render our own surface inside) */
#confirmDialog[open] {
  padding: 0;
  border: none;
  background: transparent;
}

/* Light card surface */
.confirm-surface {
  margin: 0;
  padding: 1rem 1.25rem 0.85rem;
  min-width: 320px;
  max-width: min(420px, 92vw);
  background: #ffffff; /* white background */
  color: #111111; /* black/dark text */
  border-radius: 10px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65);
}

.confirm-surface h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
}

.confirm-surface p {
  font-size: 0.95rem;
  margin: 0.25rem 0 0.5rem;
  opacity: 0.85;
}

/* Button row */
.confirm-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0 0 0.25rem;
}

/* Light buttons, rounded, consistent across pages */
.confirm-actions button {
  min-width: 4.25rem;
  background: #f5f5f5;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0.35rem 0.9rem;
  border-radius: 10px;
  cursor: pointer;
}

/* Stronger emphasis for OK */
#confirmOkButton {
  font-weight: 600;
}
/* ───────────────────────────
   Unsupported browser overlay
   ─────────────────────────── */

body.ss-unsupported {
  background: #111;
  color: #f5f5f5;
}

/* Hide everything except the overlay when browser is too old */
body.ss-unsupported > *:not(#unsupported-browser-overlay) {
  display: none !important;
}

#unsupported-browser-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: radial-gradient(circle at top, #222 0, #000 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
  box-sizing: border-box;
}

#unsupported-browser-overlay .unsupported-inner {
  max-width: 640px;
  width: 100%;
  background: rgba(0, 0, 0, 0.88);
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.7);
  font-size: 0.95rem;
}

#unsupported-browser-overlay h1 {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
  color: #facc15; /* yellow accent */
}

#unsupported-browser-overlay p {
  margin: 0.35rem 0;
  line-height: 1.5;
}