/* V65 Kariyer Köprüsü — canonical team identity and collision-free match view. */

.app-shell.is-match-started .round-arena .round-scoreboard {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--left-team-accent,#176f48) 70%,#061b22),
      color-mix(in srgb,var(--left-team-secondary,#b6d6c3) 58%,#082832) 42%,
      #0b3b38 50%,
      color-mix(in srgb,var(--right-team-secondary,#b6d6c3) 58%,#082832) 58%,
      color-mix(in srgb,var(--right-team-accent,#176f48) 70%,#061b22)) !important;
}

/* The stadium is presentation only; it never intercepts team or timer input. */
.app-shell.is-match-started .round-arena .round-scoreboard::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg,rgba(5,24,31,.04),rgba(3,22,28,.32)),
    url("../../kariyer-koprusu/assets/stadium-lights-v8.svg") center 44% / cover no-repeat !important;
  opacity: .64 !important;
}

.app-shell.is-match-started .round-arena .round-scoreboard > * {
  position: relative !important;
  z-index: 2 !important;
}

.app-shell.is-match-started .round-team {
  background:
    radial-gradient(circle at 22% 8%,rgba(255,255,255,.18),transparent 40%),
    linear-gradient(132deg,
      color-mix(in srgb,var(--team-primary,#176f48) 76%,#071d25),
      color-mix(in srgb,var(--team-secondary,#b6d6c3) 64%,#071d25)) !important;
  border: 1px solid rgba(255,255,255,.34) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),0 12px 28px rgba(0,12,19,.22) !important;
}

.app-shell.is-match-started .round-team .club-badge--lg {
  aspect-ratio: 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 2px solid rgba(255,255,255,.78) !important;
  background:
    radial-gradient(circle at 32% 23%,rgba(255,255,255,.36),transparent 31%),
    linear-gradient(135deg,var(--club-accent,#176f48) 0 51%,var(--club-secondary,#b6d6c3) 51% 100%) !important;
  box-shadow: inset 0 0 0 3px rgba(4,25,31,.16),0 9px 18px rgba(0,10,16,.30) !important;
}

.app-shell.is-match-started .round-team .club-badge--lg:not(.club-badge--flag) b {
  width: 76% !important;
  min-width: 0 !important;
  height: 45% !important;
  padding: 0 4px !important;
  border: 1px solid rgba(255,255,255,.42) !important;
  border-radius: 999px !important;
  background: rgba(3,22,29,.63) !important;
  color: #fff !important;
  font-weight: 1000 !important;
  letter-spacing: .04em !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.55) !important;
}

/* Some older badge themes paint over their own <b> text with a diagonal gloss.
   A dedicated presentation layer keeps canonical codes legible at every size. */
.app-shell.is-match-started .round-team .club-badge--lg .v65-club-code {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 30 !important;
  display: grid !important;
  place-items: center !important;
  width: 76% !important;
  min-width: 0 !important;
  height: 45% !important;
  padding: 0 3px !important;
  transform: translate(-50%,-50%) !important;
  border: 1px solid rgba(255,255,255,.58) !important;
  border-radius: 999px !important;
  background: rgba(2,18,25,.80) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 1000 !important;
  line-height: 1 !important;
  letter-spacing: .035em !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.72) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18) !important;
  pointer-events: none !important;
}

.app-shell.is-match-started .round-team .club-badge--lg[data-v65-code] > b {
  color: transparent !important;
  text-shadow: none !important;
}

.app-shell.is-match-started .round-team .club-badge--flag,
.app-shell.is-match-started .round-team .club-badge--flag .club-flag-image,
.app-shell.is-match-started .round-team .club-badge--flag img {
  border-radius: 50% !important;
}

.app-shell.is-match-started .round-team .club-badge--flag img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Candidate count has one permanent home at the bottom. The status row above it
   is reserved for countdown, wrong answer, correct answer and pass feedback. */
.app-shell.is-match-started .round-feedback-stack .feedback--meta {
  order: 2 !important;
}

.app-shell.is-match-started .round-feedback-stack .feedback:not(.feedback--meta) {
  order: 1 !important;
}

/* The legacy 1180 px rule turns the right rail into three columns while the
   newer two-column page shell is still active. That combination makes the
   rail almost 200 px wider than its grid track. Keep it a true vertical rail
   throughout the intermediate desktop / phone-landscape range. */
@media (min-width: 901px) and (max-width: 1180px) {
  #root .main-grid {
    grid-template-columns: minmax(0,1fr) 274px !important;
  }

  #root .side-stack {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #root .side-stack > .side-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  #root .topbar {
    min-width: 0 !important;
  }

  #root .topbar .brand {
    min-width: 0 !important;
  }

  #root .topbar .topnav {
    min-width: 0 !important;
    gap: 6px !important;
  }

  #root .topbar .topnav .portal-lang-switch__label {
    display: none !important;
  }

  #root .topbar .topnav .portal-lang-switch button,
  #root .topbar .topnav > button {
    padding-inline: 9px !important;
  }
}

@media (max-width: 720px) {
  /* A sticky 170 px header covered the stadium banner after the start button
     scrolled into view. In match mode it stays in normal document flow. */
  .app-shell.is-match-started > .topbar {
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 10px !important;
  }

  body.v65-career-match-active .portal-home-button {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
  }

  .app-shell.is-match-started > .topbar .brand {
    min-width: 0 !important;
    justify-self: center !important;
  }

  .app-shell.is-match-started > .topbar .topnav {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 42px 42px !important;
    gap: 7px !important;
  }

  body.v65-career-match-active #root .topbar .topnav #kkLangSwitch,
  body.v65-career-match-active .portal-lang-switch,
  .app-shell.is-match-started > .topbar .portal-lang-switch {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 4px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08) !important;
  }

  body.v65-career-match-active #root .topbar .topnav #kkLangSwitch button,
  body.v65-career-match-active .portal-lang-switch button,
  .app-shell.is-match-started > .topbar .portal-lang-switch button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 7px !important;
  }

  .app-shell.is-match-started .round-arena {
    scroll-margin-top: 10px !important;
  }

  .app-shell.is-match-started .round-arena .round-scoreboard {
    min-width: 0 !important;
    grid-template-columns: minmax(0,1fr) 62px minmax(0,1fr) !important;
    gap: 7px !important;
    padding: 9px !important;
  }

  .app-shell.is-match-started .round-team {
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 7px !important;
    gap: 7px !important;
    border-radius: 16px !important;
  }

  .app-shell.is-match-started .round-team .club-badge--lg {
    width: 46px !important;
    min-width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  .app-shell.is-match-started .round-team .club-badge--lg:not(.club-badge--flag) b {
    font-size: 13px !important;
  }

  .app-shell.is-match-started .round-team .club-badge--lg .v65-club-code {
    font-size: 10px !important;
  }

  .app-shell.is-match-started .round-team > div:not(.club-badge) {
    min-width: 0 !important;
  }

  .app-shell.is-match-started .round-team > div:not(.club-badge) > b {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 420px) {
  .app-shell.is-match-started .round-arena .round-scoreboard {
    grid-template-columns: minmax(0,1fr) 56px minmax(0,1fr) !important;
    gap: 5px !important;
    padding: 7px !important;
  }

  .app-shell.is-match-started .round-team {
    justify-content: center !important;
    min-height: 58px !important;
    padding: 5px 6px !important;
  }

  .app-shell.is-match-started .round-team .club-badge--lg {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .app-shell.is-match-started .round-team > div:not(.club-badge) {
    display: none !important;
  }
}

@media (max-width: 932px) and (orientation: landscape) and (max-height: 520px) {
  .app-shell.is-match-started > .topbar { position: relative !important; }
  body.v65-career-match-active .portal-home-button { position: absolute !important; }
  body.v65-career-match-active #root .topbar .topnav #kkLangSwitch,
  body.v65-career-match-active .portal-lang-switch,
  .app-shell.is-match-started > .topbar .portal-lang-switch { position: static !important; inset: auto !important; }
  .app-shell.is-match-started .round-arena .round-scoreboard {
    min-height: 88px !important;
    padding: 7px 12px !important;
  }
  .app-shell.is-match-started .round-team { min-height: 58px !important; padding: 6px 9px !important; }
  .app-shell.is-match-started .round-team .club-badge--lg {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }
}