@charset "UTF-8";@import url("https://fonts.googleapis.com/css2?family=Anton&family=Arimo:wght@700&family=Barlow+Semi+Condensed:wght@600;700&family=Bebas+Neue&family=Black+Han+Sans&family=Hanken+Grotesk:wght@700&family=Lato:wght@700&family=League+Spartan:wght@700&family=Lexend:wght@700&family=Martian+Mono:wght@700&family=Montserrat:wght@500&family=Nanum+Gothic&family=Noto+Sans:wght@700&family=Open+Sans:wght@700&family=Oswald:wght@700&family=Playfair&family=Poppins:wght@700&family=Rajdhani:wght@400&family=Raleway:wght@700&family=Roboto:wght@700&family=Rubik:wght@700&family=Rubik+Mono+One&family=WDXL+Lubrifont+SC&display=swap");
/* Responsive base unit shared by every scoreboard. Sizes written as
   calc(N * var(--unit)) track the viewport (1vw) on OBS 29 / Chromium 103, and
   the board's container (1cqi) wherever container queries are supported — cqi is
   resolved against the element that consumes the var, so a single :root
   definition works for all sports. Custom properties can't fall back via a
   repeated declaration (an unsupported cqi is stored, then breaks at var() use),
   so the vw→cqi switch is centralised here behind @supports. */
:root {
  --unit: 1vw;
}
@supports (font-size: 1cqi) {
:root {
    --unit: 1cqi;
}
}

/* Global styles for compact mode - hide header and floating buttons */
body.compact-mode header,
body.compact-mode .floating-button,
body.compact-mode #debug-info-button,
body.compact-mode #feedback-button {
  display: none !important;
}


/*-- Themable CSS ----------------------------------------------------------------------------- */
/* PP Monument Extended — wide broadcast-style display face used by sport
   scoreboards (e.g. FOOTBALL_BUG_1). Self-hosted: the full purchased family is
   vendored under ./fonts/ (otf/ ttf/ web/ variable/), but only the three weights
   the scoreboards use are declared here (Light 300, Regular 400, Black 900).
   font-synthesis is disabled globally (see body rule below), so intermediate
   weights resolve to the nearest declared face — style copy with 300/400/900. */
@font-face {
  font-family: "PP Monument Extended";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/static/dist/assets/PPMonumentExtended-Light-BuXmW2ke.otf") format("opentype");
}
@font-face {
  font-family: "PP Monument Extended";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/dist/assets/PPMonumentExtended-Regular-C3Ov-qqG.otf") format("opentype");
}
@font-face {
  font-family: "PP Monument Extended";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/static/dist/assets/PPMonumentExtended-Black-CBDVJNkm.otf") format("opentype");
}
/* Tungsten — condensed broadcast display face; default for the football
   stacked "Scoreboard" layout (KTS-512). Only the weights the board actually
   renders are declared/shipped: Book 400 (base), Semibold 600 (names, clocks,
   game-info, title), Black 900 (score hero). The license also covers Bold 700;
   re-add its @font-face + woff2 from the purchased kit if a rule ever needs it
   — an undeclared 700 would otherwise resolve to Black.
   @license MyFonts Webfont Build ID 3867246 — Tungsten by Hoefler & Co.,
   annual webfont license for keepthescore.com. All other parties are
   explicitly restricted from using the Licensed Webfonts. See
   fonts/tungsten/LICENSE.txt; obtain a license at
   https://www.myfonts.com/collections/hoefler-and-co-foundry */
@font-face {
  font-family: "Tungsten";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/dist/assets/Tungsten-Book-BmVA_n7O.woff2") format("woff2");
}
@font-face {
  font-family: "Tungsten";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/dist/assets/Tungsten-Semibold-BvIGI2fu.woff2") format("woff2");
}
@font-face {
  font-family: "Tungsten";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/static/dist/assets/Tungsten-Black-C643Kblf.woff2") format("woff2");
}
body {
  background-color: #1a1f2e;
  --body-font: "Roboto", sans-serif;
  /* --body-font can be a single-weight display font (Anton, Bebas Neue, Black
     Han Sans, …) while every sport container applies font-weight 700/800. Safari
     fakes a chunky synthetic bold to fill the gap; disable synthesis so it uses
     the font's real face. One rule here covers all sport scoreboards (this is the
     scoreboard-only bundle). No-op for multi-weight fonts. */
  font-synthesis: none;
}

/* Public and embedded board views fill the viewport and never scroll. Clipping the
   root keeps overshooting score animations from momentarily growing the document and
   flashing scrollbars into an OBS capture. Admin views keep their scrollbars. */
html.board-display-view {
  overflow: hidden;
}

/* Subtle card styling without harsh shadows */
.card {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.3s ease;
}

/* Subtle hover effect for cards */
.card:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16), 0 2px 3px rgba(0, 0, 0, 0.28);
}

/* Custom dark theme with better contrast */
.text-bg-dark.bg-black {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
}

/* Softer input field styling */
.form-control, .form-select {
  background-color: #374151;
  border: 1px solid #4a5568;
  color: #f3f4f6;
}

.form-control:focus, .form-select:focus {
  background-color: #3f4a5c;
  border-color: #6b7280;
  color: #f9fafb;
  box-shadow: 0 0 0 0.1rem rgba(107, 114, 128, 0.25);
}

/* Improve placeholder visibility on dark backgrounds */
.form-control::-moz-placeholder {
  color: #9ca3af;
  opacity: 1;
}
.form-control::placeholder {
  color: #9ca3af;
  opacity: 1;
}

.form-control:focus::-moz-placeholder {
  color: #d1d5db;
}

.form-control:focus::placeholder {
  color: #d1d5db;
}

/* Override dark theme for modals (e.g., feedback modal) - use default Bootstrap light styling */
.modal .form-control,
.modal .form-select {
  background-color: #ffffff;
  border: 1px solid #ced4da;
  color: #212529;
}

.modal .form-control:focus,
.modal .form-select:focus {
  background-color: #ffffff;
  border-color: #86b7fe;
  color: #212529;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.modal .form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.modal .form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.modal .form-control:focus::-moz-placeholder {
  color: #6c757d;
}

.modal .form-control:focus::placeholder {
  color: #6c757d;
}

/* Subtle card headers */
.card-header {
  background-color: rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Button variant styling (.btn-light, .btn-primary, .btn-success, …,
   .btn-secondary-action) now lives in the shared app.scss and is the default
   for all pages + clients. Sport-only button widgets (.compact-*) stay below. */
/* Scoreboard preview area with subtle checkered pattern */
.checkered {
  background-color: #1f2937;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%), linear-gradient(-45deg, rgba(255, 255, 255, 0.02) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%), linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.02) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/* Subtle alert styling */
.alert-success {
  background-color: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  color: #86efac;
}

.alert-success .alert-link {
  color: #4ade80;
}

/* Remove harsh borders and improve spacing */
.card-body {
  padding: 1.25rem;
}

/* Override card-body padding for scoreboard controls */
#scoreboard-controls .card-body {
  padding: 3px !important;
}

/* On larger screens, use slightly more padding */
@media (min-width: 768px) {
  #scoreboard-controls .card-body {
    padding: 8px !important;
  }
}
/* Input group styling for better integration */
.input-group .form-control {
  border-right: none;
}

.input-group .btn {
  border-left: 1px solid #4a5568;
}

.compact-container-controls {
  --ktsc-control-btn-green: #16A34A;
  --ktsc-control-btn-green-active: #15803D;
  --ktsc-control-btn-green-hover: #22C55E;
  --ktsc-control-btn-red: #DC2626;
  --ktsc-control-btn-red-active: #B91C1C;
  --ktsc-control-btn-red-hover: #EF4444;
  --ktsc-control-btn-yellow: #FDE68A;
  --ktsc-control-btn-yellow-active: #EAB308;
  --ktsc-control-btn-yellow-hover: #FCD34D;
  --ktsc-control-btn-soft-green: #C7EACF;
  --ktsc-control-btn-soft-green-active: #78C2A5;
  --ktsc-control-btn-soft-green-hover: #A0D9B3;
}

.compact-btn-inc-dec {
  --bs-btn-bg: var(--bs-gray-400);
  --bs-btn-active-bg: var(--bs-gray-600);
  --bs-btn-hover-bg: var(--bs-gray-500);
  --bs-btn-color: var(--bs-gray-900);
  --bs-btn-border: none;
  --bs-border-width: 0;
  --bs-btn-disabled-bg: var(--bs-gray-400);
  --bs-btn-disabled-color: var(--bs-gray-600);
  --bs-btn-disabled-opacity: 1 ;
}

.compact-btn-toggle {
  --bs-btn-border: none;
  --bs-border-width: 0;
}
.compact-btn-toggle.half {
  width: 50%;
}
@media (max-width: 575.98px) {
  .compact-btn-toggle.half {
    width: 100%;
    display: block;
  }
}
.compact-btn-toggle.btn-success {
  --bs-btn-bg: var(--ktsc-control-btn-green);
  --bs-btn-active-bg: var(--ktsc-control-btn-green-active);
  --bs-btn-hover-bg: var(--ktsc-control-btn-green-hover);
  --bs-btn-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-active-color: var(--bs-white);
}
.compact-btn-toggle.btn-light {
  --bs-btn-bg: var(--bs-gray-400);
  --bs-btn-active-bg: var(--bs-gray-600);
  --bs-btn-hover-bg: var(--bs-gray-500);
  --bs-btn-color: var(--bs-gray-900);
  --bs-btn-hover-color: var(--bs-gray-900);
  --bs-btn-active-color: var(--bs-gray-900);
}

.compact-container-board-infos {
  background: var(--board-bgcolor);
  color: var(--board-textcolor);
}

.compact-penalties-player {
  background: var(--ktsc-control-btn-yellow);
  color: var(--bs-gray-900);
}

.compact-header {
  background: var(--board-bgcolor);
  color: var(--board-textcolor);
  height: 4vh;
}

.compact-header-team-home {
  background: var(--hometeam-bgcolor);
  color: var(--hometeam-textcolor);
}

.compact-header-team-away {
  background: var(--awayteam-bgcolor);
  color: var(--awayteam-textcolor);
}

.compact-row-border-divider-board {
  border-top: 1rem solid var(--board-bgcolor);
}
.compact-row-border-divider-home {
  border-top: 1rem solid var(--hometeam-bgcolor);
}
.compact-row-border-divider-away {
  border-top: 1rem solid var(--awayteam-bgcolor);
}

/* Responsive font size for compact view buttons on tablets and larger */
@media (min-width: 768px) {
  .compact-btn-inc-dec,
  .compact-btn-toggle,
  .btn-compact-timer-control,
  .btn-compact-timer-reset,
  .btn-compact-timer-time-control,
  .compact-btn-penalties-player {
    font-size: 1.5rem;
  }
}
.swal2-show,
.swal2-hide {
  animation: none !important;
}