/* Soft scorecard theme — warm paper, pastel data colours, large readable type */

:root {
  /* Paper & ink */
  --paper: #f7f4ee;
  --paper-2: #efeae1;
  --card: #ffffff;
  --card-2: #fbf9f5;
  --line: #e6e0d6;
  --line-strong: #d6cfc3;

  --ink: #1d1f24;
  --ink-2: #4b4f58;
  --ink-3: #7a7f8a;
  --ink-4: #a9adb5;

  /* Pastel data colours: bg / ink pairs */
  --mint-bg: #cdeedd;   --mint-ink: #1e6b47;
  --sky-bg: #d5e6fb;    --sky-ink: #24568f;
  --lav-bg: #e4dcfb;    --lav-ink: #5a3ea6;
  --peach-bg: #ffd9c7;  --peach-ink: #b1451d;
  --coral-bg: #ffbfae;  --coral-ink: #8f2a12;
  --butter-bg: #fdefb9; --butter-ink: #7d5f00;
  --rose-bg: #fdd6e1;   --rose-ink: #a1305a;

  --live: #ef5a3c;

  --font-display: 'Bricolage Grotesque', 'Nunito', sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
  --font-serif: 'Fraunces', Georgia, serif;

  --font-active-score: var(--font-display);
  --font-active-text: var(--font-body);

  --glass: rgba(255, 255, 255, 0.72);
  --on-ink: #ffffff;
  --blob-opacity: 0.85;

  --radius-card: 22px;
  --radius-pill: 9999px;
  --radius-btn: 14px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow-card: 0 1px 2px rgba(29, 31, 36, 0.04), 0 10px 28px rgba(29, 31, 36, 0.06);
}

/* Dark mode: same pastel meanings, deeper tones */
body.theme-dark {
  --paper: #15171c;
  --paper-2: #1e2127;
  --card: #1b1e24;
  --card-2: #20242b;
  --line: #2b3038;
  --line-strong: #3a404a;

  --ink: #f1efe9;
  --ink-2: #c3c6cd;
  --ink-3: #8f949d;
  --ink-4: #646973;

  --mint-bg: #1f4a37;   --mint-ink: #8fe0b8;
  --sky-bg: #21395a;    --sky-ink: #9cc4f5;
  --lav-bg: #35305c;    --lav-ink: #c5b5f7;
  --peach-bg: #5a3322;  --peach-ink: #ffb894;
  --coral-bg: #5e2a1d;  --coral-ink: #ff9f86;
  --butter-bg: #4d4220; --butter-ink: #f2d77a;
  --rose-bg: #55283a;   --rose-ink: #f5a6bf;

  --live: #ff7a5c;
  --glass: rgba(21, 23, 28, 0.74);
  --on-ink: #15171c;
  --blob-opacity: 0.38;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 32px rgba(0, 0, 0, 0.35);
}

body.theme-dark .bg-field {
  opacity: 0.35;
  background:
    repeating-linear-gradient(90deg, rgba(76, 160, 112, 0.14) 0 40px, rgba(76, 160, 112, 0.07) 40px 80px),
    linear-gradient(180deg, rgba(60, 130, 90, 0.22), rgba(60, 130, 90, 0.08));
}

body.theme-dark .bg-field::after { opacity: 0.35; box-shadow: none; }
body.theme-dark .grain-overlay { mix-blend-mode: screen; opacity: 0.035; }

body.font-mode-classic {
  --font-active-score: var(--font-serif);
  --font-active-text: var(--font-serif);
}

body.font-mode-large .app-container {
  zoom: 1.14;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  transition: background 240ms var(--ease), color 240ms var(--ease);
  font-family: var(--font-active-text);
  font-size: 15px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button {
  font: inherit;
  color: inherit;
}

[hidden] { display: none !important; }

button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--sky-ink);
  outline-offset: 2px;
  border-radius: 12px;
}

/* ---------- Backdrop ---------- */

.cricket-stadium-backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: var(--paper);
  overflow: hidden;
  contain: paint;
}

.bg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: var(--blob-opacity);
  transition: background 320ms var(--ease), opacity 320ms var(--ease), transform 320ms var(--ease);
  will-change: transform;
}

.bg-blob-a { width: 52vw; height: 52vw; left: -12vw; top: -18vw; background: var(--mint-bg); }
.bg-blob-b { width: 46vw; height: 46vw; right: -14vw; top: 10vh; background: var(--sky-bg); }
.bg-blob-c { width: 48vw; height: 48vw; left: 22vw; bottom: -26vw; background: var(--butter-bg); }

.bg-field {
  position: absolute;
  left: 50%;
  bottom: -10vh;
  width: min(92vw, 1180px);
  height: 46vh;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(76, 160, 112, 0.16) 0 40px, rgba(76, 160, 112, 0.09) 40px 80px),
    linear-gradient(180deg, rgba(115, 196, 150, 0.32), rgba(115, 196, 150, 0.14));
  opacity: 0.9;
  transition: opacity 320ms var(--ease);
}

.bg-field::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 34%;
  width: 22%;
  height: 38%;
  transform: translateX(-50%);
  border-radius: 6px;
  background: linear-gradient(180deg, #e9d9b6, #d9c59b);
  opacity: 0.85;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);
}

.grain-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Sunrise: peach + lavender, no field */
.bg-theme-sunrise .bg-blob-a { background: var(--peach-bg); }
.bg-theme-sunrise .bg-blob-b { background: var(--lav-bg); }
.bg-theme-sunrise .bg-blob-c { background: var(--rose-bg); }
.bg-theme-sunrise .bg-field { opacity: 0; }

/* Sky: cool blues */
.bg-theme-sky .bg-blob-a { background: var(--sky-bg); }
.bg-theme-sky .bg-blob-b { background: var(--lav-bg); }
.bg-theme-sky .bg-blob-c { background: var(--mint-bg); }
.bg-theme-sky .bg-field { opacity: 0.35; }

/* Off: flat paper */
.bg-theme-off .bg-blob,
.bg-theme-off .bg-field { opacity: 0; }

body.boundary-flash .cricket-stadium-backdrop .bg-blob {
  animation: blobPulse 0.6s var(--ease);
}

@keyframes blobPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ---------- Shared primitives ---------- */

.font-display,
.font-ndot {
  font-family: var(--font-active-score);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
}

.font-mono {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.rec-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(239, 90, 60, 0.18);
  animation: recBlink 1.8s infinite ease-in-out;
  flex-shrink: 0;
}

.rec-dot.static { animation: none; box-shadow: none; }

@keyframes recBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.striker-dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--live);
  box-shadow: 0 0 0 3px rgba(239, 90, 60, 0.18);
  margin-right: 10px;
  flex-shrink: 0;
}

.nothing-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.has-screws::before,
.has-screws::after { content: none; }

/* Colour chips for icons */
.icon-chip {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-chip svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chip-mint { background: var(--mint-bg); color: var(--mint-ink); }
.chip-sky { background: var(--sky-bg); color: var(--sky-ink); }
.chip-lav { background: var(--lav-bg); color: var(--lav-ink); }
.chip-peach { background: var(--peach-bg); color: var(--peach-ink); }
.chip-coral { background: var(--coral-bg); color: var(--coral-ink); }
.chip-butter { background: var(--butter-bg); color: var(--butter-ink); }
.chip-rose { background: var(--rose-bg); color: var(--rose-ink); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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