/* NVFS v25 - scoring-first UI inspired by best-in-class scorer workflows */
:root {
  --nvfs-brand-red: #c00000;
  --nvfs-brand-red-bright: #e32626;
  --nvfs-brand-red-dark: #710000;
  --nvfs-brand-gold: #ffe000;
  --nvfs-brand-gold-soft: #f7c948;
  --nvfs-brand-ink: #080a0c;
  --nvfs-brand-panel: #111418;
  --nvfs-brand-panel-2: #181c21;
  --nvfs-brand-border: #30363d;
  --red: var(--nvfs-brand-red-bright) !important;
  --gold: var(--nvfs-brand-gold-soft) !important;
  --accent: var(--nvfs-brand-gold-soft) !important;
  --accent2: var(--nvfs-brand-red-bright) !important;
}

meta[name="theme-color"] { color: var(--nvfs-brand-red); }

body {
  background: var(--nvfs-brand-ink) !important;
}

/* Brand identity */
.h-hdr-logo {
  border: 2px solid var(--nvfs-brand-gold) !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(192, 0, 0, .34) !important;
}

.h-hdr-name, .h-admin-name, .sp-hdr-title, .fb-hdr-teams {
  color: #fff !important;
}

.h-role-chip, .h-admin-role-chip, .h-badge-gold,
.sp-date-badge, .fb-live-pill {
  border-color: rgba(255, 224, 0, .34) !important;
  background: rgba(255, 224, 0, .09) !important;
  color: var(--nvfs-brand-gold) !important;
}

.bn-item.active {
  background: #251f05 !important;
  color: var(--nvfs-brand-gold) !important;
  box-shadow: inset 0 2px 0 var(--nvfs-brand-gold) !important;
}

.h-card-red {
  border-left-color: var(--nvfs-brand-red-bright) !important;
}

.h-btn-play, .h-cta, .sp-save-btn, .sp-gen-btn,
.rq-approve-btn, .dp-lock-btn, .dp-match-btn, .st-submit {
  background: var(--nvfs-brand-gold) !important;
  border-color: var(--nvfs-brand-gold) !important;
  color: #171300 !important;
}

/* Cricket scoring shell */
.sp-portrait-root, .sp-land-root {
  --accent: var(--nvfs-brand-gold-soft) !important;
  --accent2: var(--nvfs-brand-red-bright) !important;
  --surface: var(--nvfs-brand-panel) !important;
  --surface2: var(--nvfs-brand-panel-2) !important;
  background: var(--nvfs-brand-ink) !important;
}

.sp-portrait-root > button.absolute,
.sp-land-root > button.absolute {
  width: 42px !important;
  height: 42px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: transparent !important;
  border-radius: 6px !important;
  border: 1px solid var(--nvfs-brand-border) !important;
  background: rgba(8, 10, 12, .92) !important;
}

.sp-portrait-root > button.absolute::after,
.sp-land-root > button.absolute::after {
  content: "‹";
  color: #fff;
  font: 700 28px/38px Inter, sans-serif;
}

.nvfs-score-hero {
  margin: 0 !important;
  padding: 3.35rem 1rem 1rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nvfs-brand-border) !important;
  border-radius: 0 !important;
  background: #0d1013 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.nvfs-score-hero > .absolute {
  display: none !important;
}

.nvfs-score-hero .font-head {
  color: var(--nvfs-brand-gold) !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0 !important;
  text-shadow: none !important;
}

.nvfs-score-hero .grid {
  gap: 1px !important;
  padding-top: .75rem !important;
  border-top-color: var(--nvfs-brand-border) !important;
  background: var(--nvfs-brand-border) !important;
}

.nvfs-score-hero .grid > div {
  min-height: 56px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--nvfs-brand-panel) !important;
  box-shadow: none !important;
}

.nvfs-player-panel {
  margin-top: .5rem !important;
  border: 1px solid var(--nvfs-brand-border) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: var(--nvfs-brand-panel) !important;
}

.nvfs-player-panel table {
  font-variant-numeric: tabular-nums;
}

.nvfs-player-panel thead {
  background: #0d1013 !important;
}

.nvfs-player-panel tbody tr {
  min-height: 44px !important;
}

.nvfs-player-panel .text-accent,
.nvfs-player-panel .bg-accent {
  color: var(--nvfs-brand-gold) !important;
}

.nvfs-over-strip {
  min-height: 48px !important;
  margin: .5rem 0 !important;
  padding: .55rem .75rem !important;
  border: 1px solid var(--nvfs-brand-border) !important;
  border-radius: 8px !important;
  background: var(--nvfs-brand-panel) !important;
  scrollbar-width: thin;
}

.nvfs-over-strip > div {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}

.sp-pad {
  padding: .55rem .65rem max(env(safe-area-inset-bottom, 0px) + .55rem, .8rem) !important;
  background: rgba(8, 10, 12, .98) !important;
  border-top: 1px solid var(--nvfs-brand-border) !important;
}

.nvfs-score-keypad {
  gap: .42rem !important;
  margin-top: 0 !important;
  padding: .55rem !important;
  border: 1px solid var(--nvfs-brand-border) !important;
  border-radius: 8px !important;
  background: var(--nvfs-brand-panel) !important;
  box-shadow: 0 -8px 24px rgba(0, 0, 0, .26) !important;
}

.nvfs-score-key {
  min-width: 0 !important;
  min-height: 54px !important;
  padding: .55rem .2rem !important;
  border-radius: 6px !important;
  border-color: #3b424a !important;
  background: var(--nvfs-brand-panel-2) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: .95rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.nvfs-score-key:hover {
  background: #222831 !important;
}

.nvfs-score-key:nth-child(4) {
  border-color: var(--nvfs-brand-red-bright) !important;
  background: #351414 !important;
  color: #ff7b73 !important;
}

.nvfs-score-key:nth-child(5) {
  border-color: #806f00 !important;
  background: #302900 !important;
  color: var(--nvfs-brand-gold) !important;
}

.nvfs-score-key:nth-child(15) {
  border-color: var(--nvfs-brand-red-bright) !important;
  background: var(--nvfs-brand-red) !important;
  color: #fff !important;
}

.sp-portrait-root .flex.gap-2.justify-center {
  margin-top: .45rem !important;
  gap: .35rem !important;
}

.sp-portrait-root .flex.gap-2.justify-center button {
  min-height: 36px !important;
  border-radius: 5px !important;
}

/* Football uses the same club palette and scoring hierarchy */
.fb-scoreboard {
  border-top: 3px solid var(--nvfs-brand-red) !important;
}

.fb-score-goals, .fb-clock-time {
  color: var(--nvfs-brand-gold) !important;
}

.fb-score-tap, .fb-btn-start, .fb-btn-resume, .fb-confirm-btn {
  background: var(--nvfs-brand-gold) !important;
  border-color: var(--nvfs-brand-gold) !important;
  color: #171300 !important;
}

.fb-btn-end {
  border-color: var(--nvfs-brand-red-bright) !important;
  background: var(--nvfs-brand-red-dark) !important;
  color: #fff !important;
}

.fb-clock-fill {
  background: var(--nvfs-brand-red-bright) !important;
}

@media (min-width: 700px) {
  .sp-portrait-root {
    max-width: 760px;
    margin-inline: auto;
    border-inline: 1px solid var(--nvfs-brand-border);
  }

  .nvfs-score-key {
    min-height: 60px !important;
  }
}

@media (max-width: 390px) {
  .nvfs-score-hero {
    padding-inline: .65rem !important;
  }

  .nvfs-score-keypad {
    gap: .32rem !important;
    padding: .42rem !important;
  }

  .nvfs-score-key {
    min-height: 50px !important;
    font-size: .82rem !important;
  }
}