/* =========================================================
   ELH ICESTATS
   Kompletní sjednocený stylesheet
========================================================= */


/* =========================================================
   ROOT
========================================================= */

:root {
  --navy-950: #020719;
  --navy-900: #050b24;
  --navy-850: #06113f;
  --navy-800: #001147;
  --navy-700: #10235f;

  --red: #a50018;
  --red-light: #dc263c;

  --white: #ffffff;
  --text-soft: rgba(255, 255, 255, 0.72);
  --text-muted: rgba(255, 255, 255, 0.50);

  --glass: rgba(255, 255, 255, 0.08);
  --glass-hover: rgba(255, 255, 255, 0.14);
  --border: rgba(255, 255, 255, 0.13);

  --green: #1db954;
  --orange: #ff9800;
  --danger: #e53935;

  --shadow:
    0 25px 60px rgba(0, 0, 0, 0.35);

  --radius-small: 10px;
  --radius: 16px;
  --radius-large: 22px;
}


* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
  margin: 0;
  padding: 0;

  background: var(--navy-950);
}


body {
  min-height: 100vh;
  margin: 0;
  padding: 0;

  overflow-x: hidden;

  background:
    linear-gradient(
      180deg,
      var(--navy-850),
      var(--navy-950)
    );

  color: var(--white);

  font-family:
    "Poppins",
    "Segoe UI",
    Arial,
    sans-serif;
}


button,
input,
select {
  font: inherit;
}


button {
  color: inherit;
}


img {
  max-width: 100%;
}


.app-page[hidden],
#appNav[hidden] {
  display: none !important;
}


/* =========================================================
   OBECNÉ
========================================================= */

.content-container {
  width: min(1320px, 100%);
  margin: 0 auto;
}


.page-hraci {
  min-height: 100vh;

  padding:
    38px
    40px
    70px;

  background:
    radial-gradient(
      circle at 0% 0%,
      rgba(165, 0, 24, 0.20),
      transparent 35%
    ),
    linear-gradient(
      180deg,
      #06113f 0%,
      #08143d 50%,
      #050b24 100%
    );

  color: white;
}


.hraci-header {
  display: flex;
  align-items: center;
  gap: 22px;

  margin-bottom: 30px;
}


.hraci-header > div {
  min-width: 0;
}


.hraci-header h1,
.hraci-header h2 {
  margin: 0;

  color: white;

  font-size:
    clamp(
      30px,
      5vw,
      42px
    );

  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
}


.section-kicker {
  display: block;

  margin-bottom: 7px;

  color:
    rgba(
      255,
      255,
      255,
      0.48
    );

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 1.8px;
  text-transform: uppercase;
}


.back-btn,
.filter-reset {
  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.22
    );

  border-radius: 10px;

  background:
    rgba(
      255,
      255,
      255,
      0.10
    );

  color: white;

  font-size: 13px;
  font-weight: 850;

  cursor: pointer;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.back-btn {
  flex: 0 0 auto;

  padding:
    10px
    16px;
}


.filter-reset {
  min-width: 80px;

  padding:
    10px
    14px;
}


.back-btn:hover,
.filter-reset:hover {
  transform:
    translateY(-2px);

  background:
    rgba(
      255,
      255,
      255,
      0.18
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.38
    );
}


.section-title {
  margin:
    42px
    0
    18px;

  color: white;

  font-size:
    clamp(
      24px,
      3vw,
      30px
    );

  font-weight: 950;

  text-transform: uppercase;
}


.loading-card,
.empty-state,
.error-card {
  width: 100%;

  padding: 28px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    var(--glass);

  color:
    var(--text-soft);

  text-align: center;
}


.error-card {
  display: flex;
  flex-direction: column;
  gap: 8px;

  border-color:
    rgba(
      255,
      70,
      90,
      0.35
    );
}


.error-card strong {
  color:
    #ff8794;
}


.results-toolbar {
  display: flex;
  justify-content: flex-end;

  margin:
    -12px
    2px
    14px;

  color:
    var(--text-muted);

  font-size: 12px;
  font-weight: 800;

  text-transform: uppercase;
}


/* =========================================================
   HLAVNÍ GAME MENU
========================================================= */

.game-menu {
  position: relative;

  width: 100%;
  min-height: 100vh;

  padding:
    24px
    clamp(22px, 4vw, 64px)
    36px;

  overflow: hidden;

  background:
    linear-gradient(
      120deg,
      rgba(2, 7, 25, 0.78) 0%,
      rgba(4, 13, 48, 0.52) 42%,
      rgba(2, 7, 25, 0.76) 100%
    ),
    url(
      "https://images.unsplash.com/photo-1515703407324-5f753afd8be8?auto=format&fit=crop&w=1800&q=82"
    );

  background-position: center;
  background-size: cover;

  color: white;
}


/* jemné světlo uprostřed obrazovky */
.game-menu::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(40, 79, 170, 0.22) 0%,
      rgba(13, 32, 91, 0.08) 34%,
      transparent 62%
    );
}


/* tmavší spodní přechod */
.game-menu::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 7, 35, 0.05) 45%,
      rgba(0, 4, 22, 0.52) 100%
    );
}


.top-bar,
.hero-menu {
  position: relative;
  z-index: 2;
}


/* =========================================================
   LOGO NA HOMEPAGE
========================================================= */

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 28px;

  width: 100%;
}


.logo-title {
  display: flex;
  align-items: center;

  gap: 13px;

  color: white;

  font-size:
    clamp(
      25px,
      3vw,
      38px
    );

  font-weight: 950;

  letter-spacing: -1px;
}


.logo-button {
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;
}


.logo-title img {
  width: 58px;
  height: 58px;

  object-fit: contain;

  filter:
    drop-shadow(
      0 8px 15px rgba(0, 0, 0, 0.30)
    );
}


.top-copy {
  margin-left: auto;

  color:
    rgba(255, 255, 255, 0.35);

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.7px;
}


/* =========================================================
   HLAVNÍ TŘÍSLOUPCOVÁ KOMPOZICE
========================================================= */

.hero-menu {
  display: grid;

  grid-template-columns:
    minmax(220px, 280px)
    minmax(360px, 500px)
    minmax(220px, 280px);

  grid-template-areas:
    "left menu right";

  align-items: center;
  justify-content: center;

  gap:
    clamp(
      28px,
      5vw,
      72px
    );

  width: min(1280px, 100%);

  min-height:
    calc(
      100vh - 105px
    );

  margin: 0 auto;

  padding:
    45px
    0
    75px;
}


/* =========================================================
   PROSTŘEDNÍ HLAVNÍ MENU
========================================================= */

.menu-panel {
  grid-area: menu;

  position: relative;

  display: flex;
  flex-direction: column;

  width: 100%;

  padding:
    23px
    22px
    25px;

  gap: 5px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.13);

  border-radius: 25px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 25, 74, 0.62),
      rgba(2, 9, 34, 0.52)
    );

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);
}


/* červený detail nahoře */
.menu-panel::before {
  content: "";

  position: absolute;

  top: 0;
  left: 28px;

  width: 62px;
  height: 3px;

  border-radius:
    0
    0
    4px
    4px;

  background:
    linear-gradient(
      90deg,
      var(--red),
      var(--red-light)
    );

  box-shadow:
    0 0 18px rgba(220, 38, 60, 0.40);
}


/* jemná textura */
.menu-panel::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.35;

  background:
    linear-gradient(
      120deg,
      rgba(255, 255, 255, 0.025),
      transparent 40%
    );
}


.menu-item {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 69px;

  padding:
    10px
    52px
    10px
    64px;

  overflow: hidden;

  border: 0;
  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.075);

  border-radius: 11px;

  background: transparent;

  color:
    rgba(255, 255, 255, 0.92);

  font-size:
    clamp(
      25px,
      3vw,
      34px
    );

  font-weight: 950;

  line-height: 1;

  letter-spacing: -0.8px;

  cursor: pointer;

  text-align: left;
  text-transform: uppercase;

  transition:
    transform 0.22s ease,
    background 0.22s ease,
    color 0.22s ease,
    padding-left 0.22s ease;
}


.menu-item:last-child {
  border-bottom: 0;
}


/* čísla vlevo */
.menu-item:nth-child(1)::before {
  content: "01";
}

.menu-item:nth-child(2)::before {
  content: "02";
}

.menu-item:nth-child(3)::before {
  content: "03";
}

.menu-item:nth-child(4)::before {
  content: "04";
}

.menu-item:nth-child(5)::before {
  content: "05";
}

.menu-item:nth-child(6)::before {
  content: "06";
}


.menu-item::before {
  position: absolute;

  left: 18px;
  top: 50%;

  transform:
    translateY(-50%);

  color:
    rgba(255, 255, 255, 0.24);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1px;

  transition:
    color 0.22s ease;
}


/* šipka doprava */
.menu-item::after {
  content: "→";

  position: absolute;

  right: 19px;
  top: 50%;

  transform:
    translate(
      -8px,
      -50%
    );

  opacity: 0;

  color: white;

  font-size: 21px;
  font-weight: 600;

  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
}


.menu-item:hover,
.menu-item.active {
  transform:
    translateX(3px);

  padding-left: 70px;

  background:
    linear-gradient(
      90deg,
      rgba(165, 0, 24, 0.42),
      rgba(255, 255, 255, 0.075)
    );

  color: white;
}


.menu-item:hover::before,
.menu-item.active::before {
  color:
    rgba(255, 255, 255, 0.60);
}


.menu-item:hover::after,
.menu-item.active::after {
  opacity: 1;

  transform:
    translate(
      0,
      -50%
    );
}


/* tenká červená čára při hoveru */
.menu-item:hover {
  box-shadow:
    inset
    3px
    0
    0
    var(--red-light);
}


/* =========================================================
   BOČNÍ STATISTIKY
========================================================= */

.left-stats,
.right-stats {
  position: static;

  display: flex;
  flex-direction: column;

  gap: 16px;

  width: 100%;

  transform: none;
}


.left-stats {
  grid-area: left;
}


.right-stats {
  grid-area: right;
}


.side-panel {
  position: relative;

  width: 100%;

  padding:
    16px
    18px
    17px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(7, 20, 62, 0.52),
      rgba(2, 9, 34, 0.38)
    );

  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  backdrop-filter:
    blur(14px);

  -webkit-backdrop-filter:
    blur(14px);

  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    background 0.22s ease;
}


.side-panel::before {
  content: "";

  position: absolute;

  top: 0;
  left: 18px;

  width: 34px;
  height: 2px;

  background:
    rgba(255, 255, 255, 0.28);
}


.side-panel:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(255, 255, 255, 0.19);

  background:
    linear-gradient(
      145deg,
      rgba(12, 29, 82, 0.63),
      rgba(3, 12, 43, 0.48)
    );
}


.side-panel-button {
  color: inherit;

  text-align: initial;

  cursor: pointer;
}


.side-panel-button:hover {
  transform:
    translateY(-3px);
}


.side-panel h2 {
  margin:
    0
    0
    11px;

  color:
    rgba(255, 255, 255, 0.84);

  font-size: 13px;
  font-weight: 950;

  letter-spacing: 0.9px;

  text-align: left;
  text-transform: uppercase;
}


.live-row {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;

  min-height: 31px;

  padding:
    5px
    0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.045);
}


.live-row:last-child {
  border-bottom: 0;
}


.live-name {
  min-width: 0;

  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.88);

  font-size: 12px;
  font-weight: 800;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.live-value {
  flex: 0 0 auto;

  min-width: 26px;

  color: white;

  font-size: 13px;
  font-weight: 950;

  text-align: right;
}


.live-player-link {
  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  text-align: left;
}


.live-player-link:hover {
  color: white;

  text-decoration: underline;
}


.live-empty {
  padding:
    12px
    0;

  color:
    var(--text-muted);

  font-size: 12px;

  text-align: center;
}


/* =========================================================
   RESPONSIVE – HLAVNÍ MENU
========================================================= */

@media (max-width: 1120px) {

  .hero-menu {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    grid-template-areas:
      "menu menu"
      "left right";

    align-items: stretch;

    width: min(820px, 100%);

    gap: 22px;

    padding-top: 55px;
  }


  .menu-panel {
    width: min(520px, 100%);

    margin:
      0
      auto
      10px;
  }


  .left-stats,
  .right-stats {
    width: 100%;
  }

}


@media (max-width: 700px) {

  .game-menu {
    min-height: 100vh;

    padding:
      18px
      16px
      28px;
  }


  .top-bar {
    gap: 12px;
  }


  .logo-title {
    gap: 9px;

    font-size: 23px;
  }


  .logo-title img {
    width: 43px;
    height: 43px;
  }


  .top-copy {
    display: none;
  }


  .hero-menu {
    grid-template-columns: 1fr;

    grid-template-areas:
      "menu"
      "left"
      "right";

    min-height: auto;

    gap: 16px;

    padding:
      42px
      0
      30px;
  }


  .menu-panel {
    padding:
      18px
      15px;

    border-radius: 20px;
  }


  .menu-item {
    min-height: 58px;

    padding:
      8px
      45px
      8px
      52px;

    font-size:
      clamp(
        23px,
        8vw,
        30px
      );
  }


  .menu-item::before {
    left: 15px;
  }


  .menu-item::after {
    right: 15px;
  }


  .menu-item:hover,
  .menu-item.active {
    padding-left: 57px;
  }


  .left-stats,
  .right-stats {
    gap: 14px;
  }


  .side-panel {
    padding:
      15px
      16px;
  }

}
/* =========================================================
   TRANSFER SLIDER
========================================================= */

.transfer-slider {
  position: relative;
}


.transfer-slide {
  display: none;

  min-height: 150px;

  padding:
    7px
    1px;
}


.transfer-slide.active {
  display: block;
}


.transfer-label {
  margin-bottom: 10px;

  color:
    rgba(
      255,
      255,
      255,
      0.42
    );

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1px;
  text-transform: uppercase;
}


.transfer-player {
  display: block;

  max-width: 100%;

  margin-bottom: 6px;
  padding: 0;

  border: 0;

  background: transparent;

  color: white;

  font-size: 21px;
  font-weight: 950;
  line-height: 1.05;

  cursor: pointer;
  text-align: left;
}


.transfer-player:hover {
  text-decoration: underline;
}


.transfer-position {
  margin-bottom: 16px;

  color:
    rgba(
      255,
      255,
      255,
      0.55
    );

  font-size: 12px;
  font-weight: 800;
}


.transfer-route {
  display: flex;
  align-items: center;

  gap: 9px;

  color:
    rgba(
      255,
      255,
      255,
      0.74
    );

  font-size: 12px;
  font-weight: 800;
}


.transfer-route span {
  min-width: 0;

  word-break: break-word;
}


.transfer-route strong {
  flex: 0 0 auto;

  color: white;

  font-size: 17px;
}


.transfer-season {
  margin-top: 12px;

  color:
    rgba(
      255,
      255,
      255,
      0.38
    );

  font-size: 11px;
  font-weight: 800;
}


.transfer-controls {
  display: flex;

  gap: 8px;

  margin-top: 10px;
}


.transfer-controls button {
  width: 32px;
  height: 28px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  border-radius: 8px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color: white;

  font-size: 17px;
  font-weight: 900;

  cursor: pointer;
}


.transfer-controls button:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.16
    );
}


/* =========================================================
   JEDNOTNÁ APP NAV
========================================================= */

.app-nav {
  position: sticky;
  top: 0;

  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  width: 100%;

  padding:
    10px
    34px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.10
    );

  background:
    rgba(
      3,
      9,
      34,
      0.92
    );

  box-shadow:
    0
    10px
    35px
    rgba(
      0,
      0,
      0,
      0.22
    );

  backdrop-filter:
    blur(16px);
}


.app-brand {
  display: flex;
  align-items: center;

  gap: 9px;

  padding: 0;

  border: 0;

  background: transparent;

  color: white;

  font-size: 18px;
  font-weight: 950;

  cursor: pointer;
}


.app-brand img {
  width: 35px;
  height: 35px;

  object-fit: contain;
}


.app-nav-links {
  display: flex;
  align-items: center;

  gap: 4px;
}


.app-nav-links button {
  padding:
    8px
    12px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color:
    rgba(
      255,
      255,
      255,
      0.62
    );

  font-size: 11px;
  font-weight: 900;

  cursor: pointer;

  letter-spacing: 0.5px;
  text-transform: uppercase;

  transition:
    background 0.2s ease,
    color 0.2s ease;
}


.app-nav-links button:hover,
.app-nav-links button.active {
  background:
    rgba(
      255,
      255,
      255,
      0.10
    );

  color: white;
}


/* =========================================================
   FILTRY
========================================================= */

.filtry {
  display: flex;
  align-items: center;

  gap: 10px;

  width: 100%;

  margin-bottom: 26px;
  padding:
    13px
    14px;

  overflow-x: auto;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    var(--glass);

  box-shadow:
    0
    18px
    40px
    rgba(
      0,
      0,
      0,
      0.20
    );

  backdrop-filter:
    blur(10px);
}


.filtry input,
.filtry select {
  min-width: 145px;

  padding:
    10px
    13px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.16
    );

  border-radius: 10px;

  outline: none;

  background:
    rgba(
      0,
      17,
      71,
      0.72
    );

  color: white;

  font-size: 12px;
  font-weight: 600;

  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    transform 0.2s ease;
}


.filtry input {
  min-width: 180px;
}


.filtry input::placeholder {
  color:
    rgba(
      255,
      255,
      255,
      0.45
    );
}


.filtry input:focus,
.filtry select:focus {
  border-color:
    rgba(
      255,
      255,
      255,
      0.40
    );

  background:
    rgba(
      0,
      17,
      71,
      0.90
    );

  box-shadow:
    0
    0
    0
    3px
    rgba(
      255,
      255,
      255,
      0.06
    );
}


.filtry select option {
  background:
    var(--navy-800);

  color: white;
}


.filtry::-webkit-scrollbar {
  height: 5px;
}


.filtry::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.25
    );
}


/* =========================================================
   HRÁČI – SEZNAM
========================================================= */

#hraci {
  display: flex;
  flex-direction: column;

  gap: 8px;
}


.hrac-radek {
  display: grid;

  grid-template-columns:
    58px
    minmax(190px, 1.8fr)
    minmax(110px, 1.1fr)
    minmax(90px, 0.75fr)
    80px
    minmax(90px, 0.75fr);

  align-items: center;

  gap: 14px;

  width: 100%;

  padding:
    10px
    16px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );

  border-radius: 12px;

  background:
    rgba(
      255,
      255,
      255,
      0.075
    );

  color: white;

  cursor: pointer;

  text-align: left;

  transition:
    transform 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease;
}


.hrac-radek:hover {
  transform:
    translateX(5px);

  background:
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.20
    );
}


.hrac-foto-mini {
  display: flex;
  align-items: center;
  justify-content: center;
}


.hrac-foto-mini img,
.foto-mini-placeholder {
  display: block;

  width: 46px;
  height: 46px;

  border-radius: 50%;

  object-fit: cover;
  object-position: top center;

  background:
    rgba(
      255,
      255,
      255,
      0.16
    );
}


.hrac-jmeno {
  display: flex;
  flex-direction: column;

  gap: 3px;
}


.hrac-jmeno strong {
  overflow: hidden;

  color: white;

  font-size: 15px;
  font-weight: 900;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.hrac-jmeno small {
  color:
    var(--text-muted);

  font-size: 11px;
  font-weight: 650;
}


.hrac-tym {
  display: flex;
  align-items: center;

  gap: 7px;

  min-width: 0;
}


.logoMale {
  flex: 0 0 auto;

  width: 24px;
  height: 24px;

  object-fit: contain;
}


.hrac-tym strong {
  color:
    rgba(
      255,
      255,
      255,
      0.90
    );

  font-size: 13px;
}


.hrac-pozice,
.hrac-vek,
.hrac-smlouva {
  color:
    rgba(
      255,
      255,
      255,
      0.76
    );

  font-size: 13px;
}


/* =========================================================
   PLAYER DETAIL
========================================================= */

.player-page {
  width: 100%;
}


.player-hero {
  display: grid;

  grid-template-columns:
    minmax(280px, 350px)
    minmax(0, 1fr);

  gap: 34px;

  padding: 24px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  background:
    rgba(
      255,
      255,
      255,
      0.075
    );

  box-shadow:
    var(--shadow);
}


.player-photo-wrapper {
  min-height: 410px;
}


.foto-wrapper {
  overflow: hidden;

  border-radius: 18px;

  background:
    rgba(
      255,
      255,
      255,
      0.045
    );
}


.foto-hrace {
  display: block;

  width: 100%;
  height: 420px;

  object-fit: cover;
  object-position: top center;
}


.player-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  min-height: 420px;

  background:
    linear-gradient(
      145deg,
      rgba(
        165,
        0,
        24,
        0.35
      ),
      rgba(
        0,
        17,
        71,
        0.72
      )
    );
}


.player-photo-placeholder span {
  color:
    rgba(
      255,
      255,
      255,
      0.25
    );

  font-size: 80px;
  font-weight: 950;
}


.foto-zdroj {
  padding:
    9px
    12px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    var(--text-muted);

  font-size: 11px;

  text-align: center;
}


.player-info {
  min-width: 0;
}


.profile-type,
.club-code {
  display: inline-block;

  margin-bottom: 12px;
  padding:
    5px
    9px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius: 6px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    rgba(
      255,
      255,
      255,
      0.60
    );

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1.2px;
}


.player-name {
  margin:
    0
    0
    18px;

  color: white;

  font-size:
    clamp(
      36px,
      5vw,
      52px
    );

  font-weight: 950;
  line-height: 0.98;

  text-transform: uppercase;
}


.team-line {
  display: flex;
  align-items: center;

  gap: 10px;

  margin-bottom: 25px;
}


.player-team-link {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  padding:
    8px
    11px;

  border:
    1px solid
    transparent;

  border-radius: 10px;

  background: transparent;

  color: white;

  font-size: 17px;
  font-weight: 850;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}


.player-team-link:hover {
  border-color:
    var(--border);

  background:
    var(--glass);
}


.tym-logo {
  width: 38px;
  height: 38px;

  object-fit: contain;
}


.info-grid,
.stat-box,
.top-players-grid,
.club-results-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(200px, 1fr)
    );

  gap: 12px;
}


.info-box,
.stat,
.info-card,
.top-player-card,
.result-card {
  min-width: 0;

  padding:
    15px
    16px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );

  border-radius: 14px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );
}


.info-box span,
.stat > span,
.info-card > span,
.top-player-card > span,
.result-card > span {
  display: block;

  margin-bottom: 6px;

  color:
    var(--text-muted);

  font-size: 10px;
  font-weight: 850;

  letter-spacing: 0.5px;
  text-transform: uppercase;
}


.info-box strong,
.stat > strong,
.info-card > strong,
.top-player-card > strong,
.result-card > strong {
  color: white;

  font-size: 18px;
  font-weight: 900;
  line-height: 1.25;
}


.stat {
  min-height: 92px;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.stat:hover {
  transform:
    translateY(-3px);

  background:
    rgba(
      255,
      255,
      255,
      0.12
    );

  border-color:
    rgba(
      255,
      255,
      255,
      0.22
    );
}


.stat-star {
  border-color:
    rgba(
      255,
      215,
      0,
      0.34
    );
}


.stat-elite {
  border-color:
    rgba(
      0,
      220,
      160,
      0.38
    );
}


.stat-bad {
  border-color:
    rgba(
      255,
      80,
      100,
      0.40
    );
}


.stat-physical {
  border-color:
    rgba(
      255,
      145,
      70,
      0.34
    );
}


.stat-toi {
  border-color:
    rgba(
      100,
      180,
      255,
      0.36
    );
}


.progress {
  width: 100%;
  height: 6px;

  margin-top: 12px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.13
    );
}


.progress-fill {
  height: 100%;

  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(
        100,
        175,
        255,
        0.76
      ),
      rgba(
        215,
        235,
        255,
        1
      )
    );
}


.profile-note {
  margin-top: 22px;

  padding:
    20px
    22px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );

  border-left:
    3px solid
    rgba(
      255,
      255,
      255,
      0.55
    );

  border-radius: 14px;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}


.profile-note span {
  display: block;

  margin-bottom: 8px;

  color:
    var(--text-muted);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 1px;
  text-transform: uppercase;
}


.profile-note p {
  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.80
    );

  font-size: 15px;
  line-height: 1.65;
}

/* =========================================================
   KARIÉRA – CAREER STATS
========================================================= */

.career-section {
  width: 100%;

  margin-top: 38px;
}


.career-pro {
  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 20px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 25, 74, 0.82),
      rgba(3, 10, 35, 0.90)
    );

  box-shadow:
    0 24px 60px
    rgba(0, 0, 0, 0.24);
}


/* =========================================================
   HLAVIČKA
========================================================= */

.career-pro-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 24px;

  padding:
    22px
    24px
    0;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.08);
}


.career-pro-title {
  padding-bottom: 17px;
}


.career-pro-title > span {
  display: block;

  margin-bottom: 4px;

  color:
    rgba(255, 255, 255, 0.40);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 1.3px;
  text-transform: uppercase;
}


.career-pro-title h2 {
  margin: 0;

  color: white;

  font-size: 27px;
  font-weight: 950;

  line-height: 1;
  text-transform: uppercase;
}


/* =========================================================
   KLUB / REPRE
========================================================= */

.career-pro-tabs {
  display: flex;
  align-items: flex-end;

  gap: 4px;
}


.career-pro-tab {
  position: relative;

  padding:
    11px
    15px
    14px;

  border: 0;

  background: transparent;

  color:
    rgba(255, 255, 255, 0.44);

  font-size: 10px;
  font-weight: 900;

  cursor: pointer;

  letter-spacing: 0.4px;
  text-transform: uppercase;

  transition:
    color 0.18s ease,
    background 0.18s ease;
}


.career-pro-tab:hover {
  color:
    rgba(255, 255, 255, 0.82);
}


.career-pro-tab.active {
  color: white;
}


.career-pro-tab.active::after {
  content: "";

  position: absolute;

  right: 10px;
  bottom: -1px;
  left: 10px;

  height: 2px;

  border-radius:
    3px
    3px
    0
    0;

  background:
    var(--red-light);

  box-shadow:
    0 0 13px
    rgba(220, 38, 60, 0.42);
}


/* =========================================================
   OBSAH
========================================================= */

.career-pro-body {
  padding:
    20px
    24px
    24px;
}


/* =========================================================
   FILTRY
========================================================= */

.career-pro-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;

  gap: 22px;

  margin-bottom: 14px;
}


.career-pro-league-title {
  min-width: 0;
}


.career-pro-league-title span {
  display: block;

  margin-bottom: 3px;

  color:
    rgba(255, 255, 255, 0.38);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.9px;
  text-transform: uppercase;
}


.career-pro-league-title strong {
  display: block;

  overflow: hidden;

  color: white;

  font-size: 17px;
  font-weight: 950;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.career-pro-filters {
  display: flex;
  align-items: center;

  gap: 8px;
}


.career-pro-filters label {
  display: flex;
  flex-direction: column;

  gap: 4px;
}


.career-pro-filters label > span {
  padding-left: 2px;

  color:
    rgba(255, 255, 255, 0.34);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: 0.7px;
  text-transform: uppercase;
}


.career-pro-filters select {
  min-width: 145px;

  padding:
    8px
    30px
    8px
    11px;

  border:
    1px solid
    rgba(255, 255, 255, 0.12);

  border-radius: 8px;

  outline: none;

  background:
    rgba(2, 10, 39, 0.90);

  color:
    rgba(255, 255, 255, 0.84);

  font-size: 10px;
  font-weight: 800;

  cursor: pointer;
}


.career-pro-filters select:hover,
.career-pro-filters select:focus {
  border-color:
    rgba(255, 255, 255, 0.26);
}


.career-pro-filters option {
  background:
    #07133f;

  color: white;
}


/* =========================================================
   TABULKA
========================================================= */

.career-pro-table-shell {
  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 13px;

  background:
    rgba(2, 9, 33, 0.48);
}


.career-pro-table-scroll {
  max-height: 360px;

  overflow: auto;
}


.career-pro-table {
  width: 100%;
  min-width: 690px;

  border-collapse: collapse;

  color: white;

  font-size: 10px;
}


.career-pro-table thead {
  position: sticky;
  top: 0;

  z-index: 4;
}


.career-pro-table th {
  padding:
    10px
    11px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.09);

  background:
    rgba(5, 15, 51, 0.98);

  color:
    rgba(255, 255, 255, 0.40);

  font-size: 8px;
  font-weight: 950;

  letter-spacing: 0.45px;

  text-align: center;
  text-transform: uppercase;

  white-space: nowrap;
}


.career-pro-table td {
  padding:
    9px
    11px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.045);

  color:
    rgba(255, 255, 255, 0.68);

  font-weight: 700;

  text-align: center;

  white-space: nowrap;
}


.career-pro-table tbody tr {
  transition:
    background 0.16s ease;
}


.career-pro-table tbody tr:hover {
  background:
    rgba(255, 255, 255, 0.045);
}


.career-pro-table tbody tr:last-child td {
  border-bottom: 0;
}


.career-pro-table .career-column-season {
  color:
    rgba(255, 255, 255, 0.86);

  font-weight: 900;
}


.career-pro-table .career-column-club {
  min-width: 175px;

  color: white;

  font-weight: 850;

  text-align: left;
}


.career-pro-table th.career-column-club {
  text-align: left;
}


.career-pro-table .career-column-phase {
  color:
    rgba(255, 255, 255, 0.46);

  font-size: 9px;
}


.career-current-row {
  background:
    linear-gradient(
      90deg,
      rgba(165, 0, 24, 0.13),
      transparent 42%
    );
}


.career-current-row td:first-child {
  box-shadow:
    inset
    2px
    0
    0
    var(--red-light);
}


.career-pro-no-results {
  height: 90px;

  color:
    rgba(255, 255, 255, 0.35)
    !important;

  text-align: center
    !important;
}


/* scrollbar */

.career-pro-table-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}


.career-pro-table-scroll::-webkit-scrollbar-track {
  background:
    rgba(255, 255, 255, 0.025);
}


.career-pro-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.18);
}


.career-pro-table-scroll::-webkit-scrollbar-thumb:hover {
  background:
    rgba(255, 255, 255, 0.28);
}


/* =========================================================
   SOUHRN LIGY
========================================================= */

.career-pro-total {
  display: grid;

  grid-template-columns:
    minmax(170px, 1fr)
    auto;

  align-items: center;

  gap: 20px;

  padding:
    14px
    16px;

  border-top:
    1px solid
    rgba(255, 255, 255, 0.10);

  background:
    linear-gradient(
      90deg,
      rgba(165, 0, 24, 0.13),
      rgba(8, 20, 62, 0.88) 35%,
      rgba(5, 14, 45, 0.95)
    );
}


.career-pro-total-copy {
  min-width: 0;
}


.career-pro-total-copy > span {
  display: block;

  margin-bottom: 2px;

  color:
    rgba(255, 255, 255, 0.35);

  font-size: 8px;
  font-weight: 900;

  letter-spacing: 0.8px;
  text-transform: uppercase;
}


.career-pro-total-copy > strong {
  display: block;

  overflow: hidden;

  color: white;

  font-size: 14px;
  font-weight: 950;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.career-pro-total-copy > small {
  display: block;

  margin-top: 2px;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 9px;
  font-weight: 700;
}


.career-pro-total-stats {
  display: flex;
  align-items: center;

  gap: 5px;
}


.career-pro-total-stat {
  min-width: 52px;

  padding:
    6px
    8px;

  border-left:
    1px solid
    rgba(255, 255, 255, 0.075);

  text-align: center;
}


.career-pro-total-stat span {
  display: block;

  margin-bottom: 1px;

  color:
    rgba(255, 255, 255, 0.32);

  font-size: 7px;
  font-weight: 900;

  text-transform: uppercase;
}


.career-pro-total-stat strong {
  display: block;

  color: white;

  font-size: 13px;
  font-weight: 950;
}


/* =========================================================
   LOADING / EMPTY
========================================================= */

.career-loading,
.career-empty {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  min-height: 90px;

  padding: 22px;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 14px;

  background:
    rgba(255, 255, 255, 0.045);

  color:
    rgba(255, 255, 255, 0.42);

  font-size: 10px;
  font-weight: 800;

  text-align: center;
}


.career-loading-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--red-light);

  animation:
    careerPulse
    1.4s
    infinite;
}


@keyframes careerPulse {

  0% {
    box-shadow:
      0 0 0 0
      rgba(220, 38, 60, 0.42);
  }

  70% {
    box-shadow:
      0 0 0 7px
      rgba(220, 38, 60, 0);
  }

  100% {
    box-shadow:
      0 0 0 0
      rgba(220, 38, 60, 0);
  }

}


/* =========================================================
   KARIÉRA – RESPONSIVE
========================================================= */

@media (max-width: 800px) {

  .career-pro-header {
    align-items: flex-start;
    flex-direction: column;

    gap: 4px;

    padding:
      18px
      16px
      0;
  }


  .career-pro-title {
    padding-bottom: 8px;
  }


  .career-pro-tabs {
    width: 100%;
  }


  .career-pro-tab {
    flex: 1;

    text-align: center;
  }


  .career-pro-body {
    padding:
      16px;
  }


  .career-pro-toolbar {
    align-items: stretch;
    flex-direction: column;

    gap: 12px;
  }


  .career-pro-filters {
    width: 100%;
  }


  .career-pro-filters label {
    flex: 1;
  }


  .career-pro-filters select {
    width: 100%;
    min-width: 0;
  }


  .career-pro-total {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  .career-pro-total-stats {
    overflow-x: auto;

    padding-bottom: 2px;
  }


  .career-pro-total-stat {
    flex:
      0
      0
      52px;
  }

}


@media (max-width: 520px) {

  .career-section {
    margin-top: 28px;
  }


  .career-pro {
    border-radius: 15px;
  }


  .career-pro-title h2 {
    font-size: 23px;
  }


  .career-pro-tab {
    padding:
      9px
      7px
      11px;

    font-size: 8px;
  }


  .career-pro-body {
    padding:
      13px
      11px
      14px;
  }


  .career-pro-filters {
    align-items: stretch;
    flex-direction: column;
  }


  .career-pro-table-scroll {
    max-height: 420px;
  }


  .career-pro-table {
    font-size: 9px;
  }


  .career-pro-table th,
  .career-pro-table td {
    padding:
      8px
      9px;
  }

}
/* =========================================================
   KLUBY
========================================================= */

.kluby-grid {
  display: grid;

  grid-template-columns:
    repeat(
      7,
      minmax(0, 1fr)
    );

  gap: 20px;
}


.klub-karta {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;

  min-width: 0;

  padding:
    20px
    12px;

  border:
    1px solid
    var(--border);

  border-radius: 18px;

  background:
    var(--glass);

  color: white;

  cursor: pointer;

  text-align: center;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.klub-karta:hover {
  transform:
    translateY(-5px);

  background:
    var(--glass-hover);

  border-color:
    rgba(
      255,
      255,
      255,
      0.27
    );
}


.klub-karta img {
  width: 78px;
  height: 78px;

  object-fit: contain;
}


.klub-karta h2 {
  margin: 0;

  color: white;

  font-size: 12px;
  font-weight: 900;
  line-height: 1.3;
}


.klub-karta span {
  color:
    var(--text-muted);

  font-size: 10px;
  font-weight: 900;
}


.club-page {
  width: 100%;
}


.club-hero {
  display: grid;

  grid-template-columns:
    210px
    minmax(0, 1fr);

  align-items: center;

  gap: 32px;

  padding: 28px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  background:
    var(--glass);

  box-shadow:
    var(--shadow);
}


.club-logo-box {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 190px;
  height: 190px;

  border-radius: 20px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );
}


.club-logo {
  width: 160px;
  height: 160px;

  object-fit: contain;
}


.club-title {
  margin:
    0
    0
    12px;

  color: white;

  font-size:
    clamp(
      35px,
      5vw,
      52px
    );

  font-weight: 950;
  line-height: 1;

  text-transform: uppercase;
}


.club-sub {
  color:
    var(--text-soft);

  font-size: 16px;
  font-weight: 700;
}


.club-info-grid {
  margin-top: 24px;
}


.top-player-card small {
  display: inline-block;

  margin-left: 5px;

  color:
    rgba(
      255,
      255,
      255,
      0.50
    );

  font-size: 13px;
}


.roster-grid {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(220px, 1fr)
    );

  gap: 12px;
}


.player-card {
  min-width: 0;

  padding:
    18px;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius);

  background:
    var(--glass);

  color: white;

  cursor: pointer;

  text-align: left;

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease;
}


.player-card:hover {
  transform:
    translateY(-4px);

  background:
    var(--glass-hover);

  border-color:
    rgba(
      255,
      255,
      255,
      0.26
    );
}


.player-card > strong {
  display: block;

  margin-bottom: 4px;

  color: white;

  font-size: 17px;
  font-weight: 900;
}


.player-card > span {
  display: block;

  margin-bottom: 14px;

  color:
    var(--text-muted);

  font-size: 12px;
}


.player-card dl {
  display: grid;

  gap: 6px;

  margin: 0;
}


.player-card dl div {
  display: flex;
  justify-content: space-between;

  gap: 10px;
}


.player-card dt {
  color:
    var(--text-muted);

  font-size: 11px;
}


.player-card dd {
  margin: 0;

  color:
    var(--text-soft);

  font-size: 11px;
  font-weight: 800;
}


/* =========================================================
   TABULKA
========================================================= */

.tabulka-elh-wrap {
  width: 100%;

  margin-top: 10px;

  overflow-x: auto;
}


.elh-tabulka {
  min-width: 980px;

  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  box-shadow:
    var(--shadow);
}


.elh-hlavicka,
.elh-radek {
  display: grid;

  grid-template-columns:
    55px
    minmax(220px, 1.8fr)
    repeat(5, 60px)
    105px
    75px
    150px;

  align-items: center;

  gap: 8px;

  min-height: 55px;

  padding:
    11px
    16px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );
}


.elh-hlavicka {
  min-height: 48px;

  border-top: 0;

  background:
    rgba(
      255,
      255,
      255,
      0.11
    );

  color:
    var(--text-muted);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.6px;
  text-transform: uppercase;
}


.elh-radek {
  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size: 13px;

  transition:
    filter 0.2s ease,
    background 0.2s ease;
}


.elh-radek:hover {
  filter: brightness(1.15);
}


.elh-radek.top4 {
  background:
    rgba(
      0,
      90,
      180,
      0.30
    );
}


.elh-radek.predkolo {
  background:
    rgba(
      80,
      170,
      255,
      0.12
    );
}


.elh-radek.baraz {
  background:
    rgba(
      180,
      20,
      20,
      0.32
    );
}


.position-cell {
  font-weight: 900;
}


.tabulka-tym {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
}


.tabulka-tym button {
  min-width: 0;

  padding: 0;

  overflow: hidden;

  border: 0;

  background: transparent;

  color: white;

  font-size: 13px;
  font-weight: 900;

  cursor: pointer;

  text-align: left;

  text-overflow: ellipsis;
  white-space: nowrap;
}


.tabulka-tym button:hover {
  text-decoration: underline;
}


.body-cell {
  color: white;

  font-size: 19px;
  font-weight: 950;
}


.forma-cell {
  display: flex;
  align-items: center;

  gap: 4px;

  min-width: 0;
}


.forma-vysledek {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 25px;
  height: 24px;

  padding:
    0
    5px;

  border-radius: 5px;

  color: white;

  font-size: 9px;
  font-weight: 900;
}


.forma-v {
  background:
    var(--green);
}


.forma-p {
  background:
    var(--danger);
}


.forma-vp {
  background:
    linear-gradient(
      135deg,
      var(--green) 0%,
      var(--green) 55%,
      var(--orange) 55%,
      var(--orange) 100%
    );
}


.forma-pp {
  background:
    linear-gradient(
      135deg,
      var(--danger) 0%,
      var(--danger) 55%,
      var(--orange) 55%,
      var(--orange) 100%
    );
}


.forma-raw {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 35px;
  height: 24px;

  padding:
    0
    8px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.14
    );

  border-radius: 5px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

  color:
    var(--text-muted);

  font-size: 10px;
  font-weight: 800;
}


.forma-empty {
  color:
    var(--text-muted);
}


/* =========================================================
   PŘESTUPY
========================================================= */

.table-scroll {
  width: 100%;

  overflow-x: auto;

  border-radius:
    var(--radius-large);

  box-shadow:
    var(--shadow);
}


.prestupy-tabulka {
  width: 100%;
  min-width: 850px;

  overflow: hidden;

  border-collapse: collapse;

  border:
    1px solid
    var(--border);

  background:
    rgba(
      255,
      255,
      255,
      0.065
    );
}


.prestupy-tabulka th,
.prestupy-tabulka td {
  padding:
    12px
    14px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  text-align: left;
}


.prestupy-tabulka th {
  background:
    rgba(
      255,
      255,
      255,
      0.11
    );

  color:
    var(--text-muted);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.7px;
  text-transform: uppercase;
}


.prestupy-tabulka td {
  color:
    rgba(
      255,
      255,
      255,
      0.78
    );

  font-size: 13px;
}


.prestupy-tabulka tbody tr {
  transition:
    background 0.18s ease;
}


.prestupy-tabulka tbody tr:nth-child(even) {
  background:
    rgba(
      255,
      255,
      255,
      0.025
    );
}


.prestupy-tabulka tbody tr:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.085
    );
}


.prestup-hrac,
.prestup-tym,
.team-link-button {
  padding: 0;

  border: 0;

  background: transparent;

  color: white;

  font-size: inherit;
  font-weight: 850;

  cursor: pointer;

  text-align: left;
}


.prestup-hrac:hover,
.prestup-tym:hover,
.team-link-button:hover {
  text-decoration: underline;
}


/* =========================================================
   ROZPIS
========================================================= */

.schedule-content {
  display: grid;

  gap: 28px;
}


.round-block {
  overflow: hidden;

  border:
    1px solid
    var(--border);

  border-radius:
    var(--radius-large);

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );

  box-shadow:
    0
    18px
    45px
    rgba(
      0,
      0,
      0,
      0.22
    );
}


.round-header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding:
    18px
    20px;

  border-bottom:
    1px solid
    var(--border);

  background:
    rgba(
      255,
      255,
      255,
      0.065
    );
}


.round-header span {
  display: block;

  margin-bottom: 3px;

  color:
    var(--text-muted);

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 1px;
  text-transform: uppercase;
}


.round-header h2 {
  margin: 0;

  color: white;

  font-size: 24px;
  font-weight: 950;
  text-transform: uppercase;
}


.round-header > strong {
  color:
    var(--text-muted);

  font-size: 11px;
  font-weight: 850;
}


.matches-list {
  display: grid;
}


.match-card {
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    160px
    minmax(0, 1fr);

  align-items: center;

  gap: 18px;

  min-height: 90px;

  padding:
    14px
    20px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  transition:
    background 0.2s ease;
}


.match-card:last-child {
  border-bottom: 0;
}


.match-card:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}


.schedule-team {
  display: flex;
  align-items: center;

  gap: 11px;

  min-width: 0;

  padding: 0;

  border: 0;

  background: transparent;

  color: white;

  font-size: 14px;
  font-weight: 850;

  cursor: pointer;
}


.schedule-team.home {
  justify-content: flex-end;

  text-align: right;
}


.schedule-team.away {
  justify-content: flex-start;

  text-align: left;
}


.schedule-team img {
  flex: 0 0 auto;

  width: 42px;
  height: 42px;

  object-fit: contain;
}


.schedule-team span {
  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;
}


.schedule-team:hover span {
  text-decoration: underline;
}


.match-center {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 3px;

  text-align: center;
}


.match-vs {
  color:
    rgba(
      255,
      255,
      255,
      0.30
    );

  font-size: 9px;
  font-weight: 950;

  letter-spacing: 1.4px;
}


.match-date {
  color:
    var(--text-soft);

  font-size: 11px;
  font-weight: 700;
}


.match-date.pending {
  color:
    rgba(
      255,
      255,
      255,
      0.32
    );

  font-size: 10px;
}


.match-time {
  color: white;

  font-size: 17px;
  font-weight: 950;
}


/* =========================================================
   TABLETY
========================================================= */

@media (max-width: 1100px) {

  .left-stats,
  .right-stats {
    width: 200px;
  }


  .left-stats {
    left: 24px;
  }


  .right-stats {
    right: 24px;
  }


  .menu-panel {
    min-width: 270px;
  }


  .menu-item {
    font-size: 36px;
  }


  .kluby-grid {
    grid-template-columns:
      repeat(
        4,
        minmax(0, 1fr)
      );
  }

}


/* =========================================================
   MENŠÍ TABLETY
========================================================= */

@media (max-width: 850px) {

  .game-menu {
    min-height: 100vh;
    height: auto;

    padding:
      18px;
  }


  .top-bar {
    flex-direction: column;
    align-items: center;

    gap: 12px;
  }


  .top-nav {
    justify-content: center;

    margin-left: 0;

    flex-wrap: wrap;
  }


  .top-copy {
    display: none;
  }


  .hero-menu {
    min-height: auto;

    flex-direction: column;
    align-items: center;

    gap: 24px;

    padding:
      45px
      0;
  }


  .menu-panel {
    order: 1;

    align-items: center;

    width: min(500px, 100%);

    gap: 7px;
  }


  .menu-item {
    width: 100%;

    border-left: 0;
    border-bottom:
      1px solid
      rgba(
        255,
        255,
        255,
        0.18
      );

    font-size: 34px;

    text-align: center;
  }


  .menu-item:hover,
  .menu-item.active {
    transform: none;

    border-left: 0;

    background:
      rgba(
        255,
        255,
        255,
        0.08
      );
  }


  .left-stats,
  .right-stats {
    position: static;

    width: min(500px, 100%);

    transform: none;
  }


  .left-stats {
    order: 2;
  }


  .right-stats {
    order: 3;
  }


  .app-nav {
    flex-direction: column;

    gap: 7px;

    padding:
      8px
      12px;
  }


  .app-nav-links {
    justify-content: center;

    width: 100%;

    overflow-x: auto;
  }


  .player-hero {
    grid-template-columns: 1fr;
  }


  .player-photo-wrapper,
  .foto-hrace,
  .player-photo-placeholder {
    min-height: auto;
  }


  .foto-hrace,
  .player-photo-placeholder {
    height: 430px;
  }


  .club-hero {
    grid-template-columns: 170px 1fr;
  }


  .club-logo-box {
    width: 160px;
    height: 160px;
  }


  .club-logo {
    width: 135px;
    height: 135px;
  }


  .match-card {
    grid-template-columns:
      minmax(0, 1fr)
      110px
      minmax(0, 1fr);
  }

}


/* =========================================================
   TELEFONY
========================================================= */

@media (max-width: 650px) {

  .page-hraci {
    padding:
      22px
      13px
      50px;
  }


  .logo-title {
    font-size: 27px;
  }


  .logo-title img {
    width: 45px;
    height: 45px;
  }


  .top-nav button {
    padding:
      6px
      7px;

    font-size: 9px;
  }


  .hero-menu {
    padding-top: 30px;
  }


  .menu-item {
    font-size: 29px;
  }


  .hraci-header {
    align-items: flex-start;
    flex-direction: column;

    gap: 12px;
  }


  .hraci-header h1,
  .hraci-header h2 {
    font-size: 29px;
  }


  .app-brand span {
    display: none;
  }


  .app-nav {
    align-items: stretch;

    padding:
      7px
      8px;
  }


  .app-brand {
    position: absolute;

    top: 8px;
    left: 8px;
  }


  .app-nav-links {
    justify-content: flex-start;

    padding-left: 45px;
  }


  .app-nav-links button {
    flex: 0 0 auto;

    padding:
      8px
      9px;

    font-size: 9px;
  }


  .filtry {
    justify-content: flex-start;

    padding:
      10px;
  }


  .filtry input,
  .filtry select {
    flex: 0 0 auto;

    min-width: 165px;
  }


  .hrac-radek {
    grid-template-columns:
      48px
      minmax(0, 1fr);

    gap:
      5px
      10px;

    padding:
      11px;
  }


  .hrac-foto-mini {
    grid-row:
      1 / span 5;
  }


  .hrac-jmeno,
  .hrac-tym,
  .hrac-pozice,
  .hrac-vek,
  .hrac-smlouva {
    grid-column: 2;
  }


  .hrac-jmeno strong {
    white-space: normal;
  }


  .hrac-tym,
  .hrac-pozice,
  .hrac-vek,
  .hrac-smlouva {
    font-size: 11px;
  }


  .player-hero {
    gap: 20px;

    padding: 14px;
  }


  .foto-hrace,
  .player-photo-placeholder {
    height: 370px;
  }


  .player-name {
    font-size: 34px;
  }


  .info-grid,
  .stat-box,
  .top-players-grid,
  .club-results-grid {
    grid-template-columns: 1fr;
  }


  .club-hero {
    grid-template-columns: 1fr;

    padding: 20px;

    text-align: center;
  }


  .club-logo-box {
    width: 150px;
    height: 150px;

    margin:
      0
      auto;
  }


  .club-logo {
    width: 125px;
    height: 125px;
  }


  .club-title {
    font-size: 33px;
  }


  .kluby-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap: 12px;
  }


  .klub-karta {
    padding:
      16px
      8px;
  }


  .klub-karta img {
    width: 65px;
    height: 65px;
  }


  .roster-grid {
    grid-template-columns: 1fr;
  }


  .elh-tabulka {
    min-width: 920px;
  }


  .match-card {
    grid-template-columns:
      minmax(0, 1fr)
      70px
      minmax(0, 1fr);

    gap: 7px;

    padding:
      12px
      8px;
  }


  .schedule-team {
    gap: 5px;

    font-size: 10px;
  }


  .schedule-team img {
    width: 30px;
    height: 30px;
  }


  .match-time {
    font-size: 14px;
  }


  .match-date {
    font-size: 9px;
  }


  .round-header {
    padding:
      14px;
  }


  .round-header h2 {
    font-size: 20px;
  }


  .results-toolbar {
    justify-content: flex-start;

    margin-left: 2px;
  }

}


/* =========================================================
   VELMI MALÉ TELEFONY
========================================================= */

@media (max-width: 400px) {

  .kluby-grid {
    grid-template-columns: 1fr 1fr;
  }


  .menu-item {
    font-size: 26px;
  }


  .player-name {
    font-size: 30px;
  }


  .foto-hrace,
  .player-photo-placeholder {
    height: 330px;
  }


  .schedule-team span {
    white-space: normal;
  }

}
/* =========================================================
   STATISTIKY ELH
========================================================= */

.statistics-page {
  min-height: 100vh;
}


.stats-tabs {
  display: inline-flex;

  gap: 5px;

  margin-bottom: 18px;
  padding: 5px;

  border:
    1px solid
    rgba(255, 255, 255, 0.11);

  border-radius: 12px;

  background:
    rgba(255, 255, 255, 0.055);
}


.stats-tab {
  min-width: 120px;

  padding:
    10px
    18px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color:
    rgba(255, 255, 255, 0.48);

  font-size: 11px;
  font-weight: 950;

  letter-spacing: 0.5px;
  text-transform: uppercase;

  cursor: pointer;

  transition:
    background 0.18s ease,
    color 0.18s ease;
}


.stats-tab:hover {
  color: white;
}


.stats-tab.active {
  background:
    linear-gradient(
      135deg,
      var(--red),
      var(--red-light)
    );

  color: white;

  box-shadow:
    0 8px 24px
    rgba(165, 0, 24, 0.25);
}


.stats-filters select:disabled {
  opacity: 0.45;

  cursor: not-allowed;
}


.stats-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin:
    -10px
    3px
    13px;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 10px;
  font-weight: 900;

  letter-spacing: 0.5px;
  text-transform: uppercase;
}


#statsSortInfo {
  color:
    rgba(255, 255, 255, 0.67);
}


.stats-table-shell {
  width: 100%;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.10);

  border-radius: 15px;

  background:
    rgba(2, 9, 33, 0.52);

  box-shadow:
    0 22px 55px
    rgba(0, 0, 0, 0.22);
}


.stats-table-scroll {
  width: 100%;
  max-height: 72vh;

  overflow: auto;
}


.stats-table-scroll::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}


.stats-table-scroll::-webkit-scrollbar-track {
  background:
    rgba(255, 255, 255, 0.02);
}


.stats-table-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.18);
}


.stats-table {
  width: 100%;

  border-collapse: collapse;

  color: white;

  font-size: 11px;
}


.stats-table-skater {
  min-width: 1450px;
}


.stats-table-goalie {
  min-width: 1050px;
}


.stats-table thead {
  position: sticky;
  top: 0;

  z-index: 5;
}


.stats-table th {
  padding:
    11px
    10px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.11);

  background:
    rgba(5, 15, 51, 0.985);

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 9px;
  font-weight: 950;

  letter-spacing: 0.45px;

  text-align: center;
  text-transform: uppercase;

  white-space: nowrap;
}


.stats-table td {
  height: 52px;

  padding:
    8px
    10px;

  border-bottom:
    1px solid
    rgba(255, 255, 255, 0.045);

  color:
    rgba(255, 255, 255, 0.70);

  font-weight: 750;

  text-align: center;

  white-space: nowrap;
}


.stats-table tbody tr {
  transition:
    background 0.15s ease;
}


.stats-table tbody tr:hover {
  background:
    rgba(255, 255, 255, 0.055);
}


.stats-table tbody tr:last-child td {
  border-bottom: 0;
}


.stats-rank-column,
.stats-rank {
  width: 45px;

  color:
    rgba(255, 255, 255, 0.33)
    !important;

  font-weight: 950
    !important;
}


.stats-player-column {
  min-width: 240px;

  text-align: left
    !important;
}


.stats-player-cell {
  min-width: 240px;

  text-align: left
    !important;
}


.stats-player {
  display: flex;
  align-items: center;

  gap: 10px;

  width: 100%;

  padding: 0;

  border: 0;

  background: transparent;

  color: white;

  cursor: pointer;

  text-align: left;
}


.stats-player img,
.stats-player-photo-placeholder {
  flex: 0 0 auto;

  width: 34px;
  height: 34px;

  border-radius: 50%;

  object-fit: cover;

  background:
    rgba(255, 255, 255, 0.08);
}


.stats-player strong {
  display: block;

  max-width: 180px;

  overflow: hidden;

  color:
    rgba(255, 255, 255, 0.92);

  font-size: 11px;
  font-weight: 900;

  text-overflow: ellipsis;
}


.stats-player small {
  display: block;

  margin-top: 2px;

  color:
    rgba(255, 255, 255, 0.34);

  font-size: 8px;
  font-weight: 800;
}


.stats-player:hover strong {
  color: white;

  text-decoration: underline;
}


.stats-team {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 0;

  border: 0;

  background: transparent;

  color:
    rgba(255, 255, 255, 0.78);

  font-size: 10px;
  font-weight: 950;

  cursor: pointer;
}


.stats-team img {
  width: 25px;
  height: 25px;

  object-fit: contain;
}


.stats-team:hover {
  color: white;
}


.stats-sort-button {
  padding:
    4px
    5px;

  border: 0;

  background: transparent;

  color: inherit;

  font-size: inherit;
  font-weight: inherit;

  cursor: pointer;

  text-transform: inherit;
}


.stats-sort-button:hover {
  color: white;
}


.stats-active-column {
  background:
    rgba(165, 0, 24, 0.10)
    !important;

  color: white
    !important;
}


.stats-table th.stats-active-column {
  background:
    linear-gradient(
      180deg,
      rgba(165, 0, 24, 0.33),
      rgba(5, 15, 51, 0.985)
    )
    !important;
}


@media (max-width: 900px) {

  .app-nav {
    padding:
      10px
      14px;
  }


  .app-nav-links {
    flex: 1;

    overflow-x: auto;

    scrollbar-width: none;
  }


  .app-nav-links::-webkit-scrollbar {
    display: none;
  }


  .app-nav-links button {
    flex: 0 0 auto;
  }


  .stats-toolbar {
    align-items: flex-start;
    flex-direction: column;

    gap: 4px;
  }

}


@media (max-width: 700px) {

  .stats-tabs {
    display: flex;

    width: 100%;
  }


  .stats-tab {
    flex: 1;

    min-width: 0;
  }


  .stats-table-scroll {
    max-height: 68vh;
  }


  .stats-player-column,
  .stats-player-cell {
    min-width: 200px;
  }

}
/* =========================================================
   STATISTIKY – ZOBRAZENÍ A VÝBĚR SLOUPCŮ
========================================================= */

.stats-view-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 14px;

  margin:
    -8px
    0
    25px;
}


.stats-mode-switch {
  display: inline-flex;

  gap: 4px;

  padding: 4px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.11
    );

  border-radius: 11px;

  background:
    rgba(
      255,
      255,
      255,
      0.055
    );
}


.stats-mode-button {
  min-width: 105px;

  padding:
    8px
    14px;

  border: 0;
  border-radius: 8px;

  background: transparent;

  color:
    rgba(
      255,
      255,
      255,
      0.48
    );

  font-size: 10px;
  font-weight: 950;

  letter-spacing: 0.5px;
  text-transform: uppercase;

  cursor: pointer;
}


.stats-mode-button:hover {
  color: white;
}


.stats-mode-button.active {
  background:
    rgba(
      255,
      255,
      255,
      0.11
    );

  color: white;
}


.stats-columns-picker {
  position: relative;

  z-index: 20;
}


.stats-columns-picker summary {
  padding:
    9px
    15px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius: 9px;

  background:
    rgba(
      255,
      255,
      255,
      0.07
    );

  color:
    rgba(
      255,
      255,
      255,
      0.75
    );

  font-size: 10px;
  font-weight: 950;

  letter-spacing: 0.5px;
  text-transform: uppercase;

  cursor: pointer;

  list-style: none;
}


.stats-columns-picker summary::-webkit-details-marker {
  display: none;
}


.stats-columns-picker summary::after {
  content: " ▾";

  opacity: 0.55;
}


.stats-columns-picker[open]
summary::after {
  content: " ▴";
}


.stats-columns-menu {
  position: absolute;

  top:
    calc(
      100% + 7px
    );

  right: 0;

  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        115px,
        1fr
      )
    );

  gap: 3px;

  min-width: 290px;

  padding: 10px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.13
    );

  border-radius: 11px;

  background:
    rgba(
      4,
      12,
      43,
      0.98
    );

  box-shadow:
    0
    18px
    45px
    rgba(
      0,
      0,
      0,
      0.38
    );
}


.stats-column-option {
  display: flex;
  align-items: center;

  gap: 7px;

  min-height: 32px;

  padding:
    5px
    7px;

  border-radius: 7px;

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

  font-size: 10px;
  font-weight: 800;

  cursor: pointer;
}


.stats-column-option:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.06
    );

  color: white;
}


.stats-column-option input {
  width: 14px;
  height: 14px;

  accent-color:
    var(--red-light);
}


@media (max-width: 700px) {

  .stats-view-controls {
    align-items: stretch;
    flex-direction: column;
  }


  .stats-mode-switch {
    display: flex;

    width: 100%;
  }


  .stats-mode-button {
    flex: 1;
  }


  .stats-columns-picker {
    width: 100%;
  }


  .stats-columns-picker summary {
    width: 100%;

    text-align: center;
  }


  .stats-columns-menu {
    left: 0;
    right: auto;

    width: 100%;
    min-width: 0;

    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

}