/* One matchday panel, with shared glass surfaces controlled by Website Studio. */
:root {
  --ui-surface-rgb: 16, 33, 55;
  --ui-surface-text: #f7f5ef;
  --ui-surface-muted: rgba(247, 245, 239, .76);
  --ui-accent-rgb: 199, 166, 96;
  --ui-glass-opacity: .68;
  --ui-glass-blur: 12px;
}

body.srccV10 {
  background: radial-gradient(ellipse at 15% 0%, #c7a66024, transparent 55%), #0c1728;
}
body.srccV10 .app {
  background: transparent !important;
  border-color: transparent;
  box-shadow: none;
  color: #f7f5ef;
}
body.srccV10 .top { border-bottom-color: #ffffff24 !important; }
body.srccV10 .uiClubName { color: #f7f5ef; }
body.srccV10 #matchHeaderInfo { color: #d6dce5 !important; }

/* Blur belongs to the panes only; the photo/video outside stays sharp. */
body.srccV10 .v12MatchPanel,
body.srccV10 #bottomNav,
body.srccV10 #mainView > section:not([data-page="home"]),
body.srccV10 #authView .card,
body.srccV10 #completeProfileView .card {
  background-color: rgba(var(--ui-surface-rgb), var(--ui-glass-opacity)) !important;
  background-image: linear-gradient(135deg, #ffffff16, #ffffff03 40%, #ffffff00 65%, #ffffff09) !important;
  border: 1px solid #ffffff42 !important;
  border-radius: var(--ui-radius, 20px);
  color: var(--ui-surface-text);
  -webkit-backdrop-filter: blur(var(--ui-glass-blur)) saturate(125%);
  backdrop-filter: blur(var(--ui-glass-blur)) saturate(125%);
  box-shadow: inset 0 1px 0 #ffffff26, inset 0 -1px 0 #ffffff09, 0 16px 48px #00000026 !important;
}
body.srccV10 .v10Home { padding-top: 16px; }
.v12MatchPanel { padding: clamp(18px, 3vw, 30px); }
.v12MatchPanel .v10Hero { margin: 0 0 22px; gap: 10px 16px; }
body.srccV10 #nextMatch.uiMatchCard .v12MatchPanel .v10Hero h2 {
  color: var(--ui-surface-text) !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  text-shadow: none !important;
  letter-spacing: -.035em !important;
}
body.srccV10 #nextMatch .v12MatchPanel .v10Status {
  background: rgba(var(--ui-accent-rgb), .1);
  border: 1px solid rgba(var(--ui-accent-rgb), .65);
  color: var(--ui-surface-text);
  font-size: 11px;
  padding: 6px 10px;
}
.v12Overview { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.v12MatchPanel .v11MatchDate {
  background: linear-gradient(125deg, #ffffff24, #ffffff00), var(--ui-accent);
  color: var(--ui-accent-text, #102137);
  border: 1px solid #ffffff40;
  box-shadow: inset 0 1px 0 #ffffff38, 0 5px 16px #0000000d;
  border-radius: 16px;
}
.v12MatchPanel .v11DateNumber { border-right-color: currentColor; }
.v12MatchPanel .v10Facts { color: var(--ui-surface-text); gap: 3px; }
.v12MatchPanel .v10Facts small { color: var(--ui-surface-muted); font-size: 11px; letter-spacing: .025em; }
.v12MatchPanel .v10Clock { border-color: #ffffff26; padding-left: 28px; }
.v12MatchPanel .v10Clock > span,
.v12MatchPanel .v10Clock > small,
.v12MatchPanel .v10Attendance > p { color: var(--ui-surface-muted); }
.v12MatchPanel .v10Clock > strong { color: var(--ui-surface-text); font-size: clamp(24px, 3vw, 34px); line-height: 1.3; letter-spacing: -.045em; }
.v12MatchPanel .v10Attendance { margin-top: 22px; padding-top: 18px; border-top: 1px solid #ffffff26; }
.v12MatchPanel .v10Attendance > p { margin-bottom: 10px; }
.v12MatchPanel .uiAttendance { gap: 10px; }
.v12MatchPanel .v10Attendance .uiAttendance button {
  background: #ffffff08;
  color: var(--ui-surface-text);
  border: 1px solid #ffffff4d;
  box-shadow: inset 0 1px 0 #ffffff12;
  min-height: 48px;
  font-size: 14px;
}
.v12MatchPanel .v10Attendance .uiAttendance button[aria-pressed="true"][data-response] {
  background: var(--ui-accent);
  border-color: var(--ui-accent);
  color: var(--ui-accent-text, #102137);
}
.v12MatchPanel .v10Roster { gap: 6px 20px; margin-top: 5px; }
.v12MatchPanel .v10Roster button { color: var(--ui-surface-text); opacity: .85; font-size: 12px; }
.v12ActionRow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; margin-top: 14px; }
.v12MatchPanel .v10Gold {
  background: linear-gradient(125deg, #ffffff20, #ffffff00), var(--ui-accent);
  color: var(--ui-accent-text, #102137);
  border: 1px solid #ffffff36;
  box-shadow: inset 0 1px 0 #ffffff26;
  font-size: 14px;
  padding: 12px 16px;
  min-height: 54px;
  border-radius: 13px;
}
.v12MatchPanel .v10Gold:hover { transform: none; filter: brightness(1.07); }
.v12ReadyButton, .v12CheckinNote {
  min-height: 54px;
  border-radius: 13px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 16px;
  color: var(--ui-surface-text);
  font-size: 14px;
}
.v12ReadyButton { border: 1px solid #ffffff4d; background: #ffffff0a; font-weight: 750; text-align: left; }
.v12ReadyButton[aria-pressed="true"] { border-color: var(--ui-accent); background: rgba(var(--ui-accent-rgb), .16); }
.v12CheckinNote { border: 0; background: #ffffff06; }
.v12CheckinNote span, .v12ReadyButton small { font-size: 12px; color: var(--ui-surface-muted); font-weight: 400; }
.v12MatchPanel .v10DetailsActions { margin-top: 14px; padding-top: 8px; border-top-color: #ffffff26; }
.v12MatchPanel .v10DetailsActions button { color: var(--ui-surface-text); font-size: 12px; font-weight: 600; min-height: 36px; text-decoration: none; }
.v12MatchPanel .v10DetailsActions button:hover { text-decoration: underline; text-underline-offset: 4px; }
.v12MatchPanel .v10SaveStatus { color: var(--ui-surface-text); }

/* Shared navigation and secondary screens use the same chosen tint. */
body.srccV10 #bottomNav { border-radius: 22px; padding: 6px; }
body.srccV10 #bottomNav button { color: var(--ui-surface-text); }
body.srccV10 #bottomNav button.active {
  background: linear-gradient(125deg, #ffffff20, #ffffff00), var(--ui-accent) !important;
  color: var(--ui-accent-text, #102137) !important;
  box-shadow: inset 0 1px 0 #ffffff38 !important;
}
body.srccV10 #mainView > section:not([data-page="home"]) { --ui-text: var(--ui-surface-text); --ui-muted: var(--ui-surface-muted); }
body.srccV10 #mainView > section:not([data-page="home"]) > .card {
  background: #ffffff05 !important;
  color: var(--ui-surface-text);
}
body.srccV10 #mainView > section:not([data-page="home"]) .input { color: #f7f5ef; }
body.srccV10 #authView .card, body.srccV10 #completeProfileView .card {
  --ui-text: var(--ui-surface-text);
  --ui-muted: var(--ui-surface-muted);
}
body.srccV10 #authView .card label,
body.srccV10 #completeProfileView .card label,
body.srccV10 #mainView > section:not([data-page="home"]) label,
body.srccV10 #mainView .adminItemTitle,
body.srccV10 #mainView .statsTabs button:not(.active) { color: var(--ui-surface-text); }
body.srccV10 #mainView .adminItemMeta { color: var(--ui-surface-muted); }
body.srccV10 #authView .input, body.srccV10 #completeProfileView .input { color: #f7f5ef; }
/* Editing chrome and player artwork keep their own dark palette. */
body.srccV10 .uiStudio { --ui-surface: #14233b; --ui-text: #f7f5ef; --ui-muted: #aab8cb; }
body.srccV10 #mainView .uiAdminTabs,
body.srccV10 #mainView .srccArtAdmin,
body.srccV10 #mainView .darkcard {
  --ui-text: #f7f5ef;
  --ui-muted: #aab8cb;
  color: #f7f5ef;
}
body.srccV10 #mainView .srccArtAdmin label,
body.srccV10 #mainView .darkcard label { color: #d1dae7; }
body.srccV10 .v61Hero { background: var(--ui-raised, #1b2e49); color: #f7f5ef; }
body.srccV10 #upcomingWrap { color: #f7f5ef; }
body.srccV10 #v7Fab {
  top: 16px !important;
  right: 70px !important;
  bottom: auto !important;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  font-size: 18px;
}

@media (min-width: 761px) {
  body.srccV10 #bottomNav { margin-top: 18px !important; }
}
@media (max-width: 760px) {
  body.srccV10 .app { padding-left: 14px !important; padding-right: 14px !important; }
  body.srccV10 .v10Home { padding-top: 12px; }
  .v12MatchPanel { padding: 18px 16px; }
  .v12MatchPanel .v10Hero { margin-bottom: 16px; }
  .v12Overview { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v12MatchPanel .v10Clock { border-left: 0; border-top: 1px solid #ffffff26; padding: 14px 0 0; gap: 8px; }
  .v12MatchPanel .v10Clock > span { font-size: 10px; }
  .v12MatchPanel .v10Clock > strong { font-size: clamp(20px, 5.5vw, 28px); max-width: none; }
  .v12MatchPanel .v10Attendance { margin-top: 16px; padding-top: 14px; }
  .v12MatchPanel .uiAttendance { gap: 7px; }
  .v12MatchPanel .v10Attendance .uiAttendance button { font-size: 12px; padding: 8px 4px; }
  .v12ActionRow { gap: 10px; margin-top: 10px; }
  .v12MatchPanel .v10Gold { font-size: 12px; gap: 7px; padding: 10px; }
  .v12CheckinNote, .v12ReadyButton { padding: 10px; font-size: 13px; }
  .v12CheckinNote span, .v12ReadyButton small { font-size: 11px; }
  .v12MatchPanel .v10DetailsActions { gap: 4px 16px; margin-top: 12px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.srccV10 .v12MatchPanel, body.srccV10 #bottomNav,
  body.srccV10 #mainView > section:not([data-page="home"]), body.srccV10 #authView .card,
  body.srccV10 #completeProfileView .card {
    background-color: var(--ui-surface, #102137) !important;
  }
}
@media (prefers-reduced-transparency: reduce) {
  body.srccV10 .v12MatchPanel, body.srccV10 #bottomNav,
  body.srccV10 #mainView > section:not([data-page="home"]), body.srccV10 #authView .card,
  body.srccV10 #completeProfileView .card {
    background-color: var(--ui-surface, #102137) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}