/* V62 Kariyer Köprüsü — yalnızca arayüz ve sunum katmanı.
   React bileşenleri, oyun akışı ve mevcut veri sözleşmeleri korunur. */

:root {
  --v62-navy: #062d38;
  --v62-navy-deep: #031f2c;
  --v62-green: #08734e;
  --v62-green-bright: #13a66b;
  --v62-gold: #d7ad50;
  --v62-gold-soft: #f4e0ad;
  --v62-paper: #f7f7f1;
  --v62-ink: #112d38;
}

/* Takım seçim alanı: mevcut arama bileşeninin içinde stadyumlu kimlik bandı. */
.players-grid {
  position: relative !important;
  isolation: isolate !important;
  background:
    linear-gradient(180deg, rgba(3, 31, 44, .72) 0 118px, rgba(220, 230, 225, .88) 250px),
    url("../v60-ui/backgrounds/webp/kariyer-setup-stadium.webp") center 13% / cover no-repeat !important;
  border-color: rgba(224, 188, 100, .64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    0 22px 52px rgba(2, 25, 38, .18) !important;
}

.players-grid::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 17% 4%, rgba(255, 255, 255, .34), transparent 26%),
    radial-gradient(ellipse at 83% 4%, rgba(255, 255, 255, .34), transparent 26%),
    linear-gradient(90deg, rgba(2, 34, 44, .34), transparent 32% 68%, rgba(2, 34, 44, .34)) !important;
}

.player-card {
  border-color: rgba(255, 255, 255, .88) !important;
  outline-color: rgba(214, 171, 76, .72) !important;
  background:
    radial-gradient(circle at 50% 8%, rgba(255, 255, 255, .98), transparent 29%),
    linear-gradient(155deg, rgba(250, 250, 246, .96), rgba(224, 232, 228, .94)) !important;
  box-shadow:
    0 24px 56px rgba(1, 24, 36, .25),
    inset 0 1px 0 #fff !important;
}

.club-search {
  min-height: 96px !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  overflow: visible !important;
  border: 1px solid rgba(239, 211, 143, .64) !important;
  border-radius: 20px !important;
  background:
    linear-gradient(100deg, rgba(3, 39, 48, .96), rgba(7, 93, 78, .76) 50%, rgba(5, 43, 66, .94)),
    url("../v60-ui/backgrounds/webp/kariyer-setup-stadium.webp") center 48% / cover no-repeat !important;
  box-shadow:
    0 15px 32px rgba(1, 23, 35, .24),
    inset 0 1px 0 rgba(255, 255, 255, .15),
    inset 0 -22px 34px rgba(1, 20, 29, .22) !important;
}

.club-search:focus-within {
  border-color: #f0cf7d !important;
  box-shadow:
    0 0 0 4px rgba(222, 181, 82, .22),
    0 18px 38px rgba(1, 22, 34, .30) !important;
}

.club-search input {
  align-self: stretch !important;
  min-height: 62px !important;
  padding: 0 18px !important;
  color: var(--v62-ink) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(244, 247, 244, .94)) !important;
  border: 1px solid rgba(255, 255, 255, .84) !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 20px rgba(0, 19, 28, .18) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}

.club-search input::placeholder { color: #879791 !important; }
.club-search .search-icon {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: #ffe49e !important;
  border: 1px solid rgba(244, 213, 135, .38) !important;
  border-radius: 50% !important;
  background: rgba(2, 27, 38, .46) !important;
}

/* Milli takım: dikdörtgen bayrak. Kulüp: logo yerine takım rengi + kod. */
.club-search .club-badge,
.search-menu .club-badge,
.round-team .club-badge {
  position: relative !important;
  overflow: hidden !important;
  border: 2px solid rgba(255, 255, 255, .92) !important;
  outline: 1px solid rgba(216, 174, 77, .86) !important;
  outline-offset: 3px !important;
  box-shadow:
    0 10px 22px rgba(0, 18, 27, .28),
    inset 0 1px 0 rgba(255, 255, 255, .34) !important;
}

.club-search .club-badge--sm {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  border-radius: 15px !important;
  flex: 0 0 58px !important;
}

.club-badge--flag,
.club-search .club-badge--flag,
.search-menu .club-badge--flag,
.round-team .club-badge--flag {
  background: #fff !important;
}

.club-badge--flag .club-flag-image {
  width: 100% !important;
  height: 100% !important;
  padding: 3px !important;
  border-radius: inherit !important;
  background: #fff !important;
}

.club-badge--flag .club-flag-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

.club-badge:not(.club-badge--flag) {
  isolation: isolate !important;
  border-radius: 16px !important;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .42), transparent 32%),
    linear-gradient(132deg, var(--club-accent) 0 48%, var(--club-secondary) 49% 100%) !important;
}

.club-badge:not(.club-badge--flag)::before {
  content: "" !important;
  position: absolute !important;
  inset: 5px !important;
  width: auto !important;
  transform: none !important;
  z-index: -1 !important;
  border: 1px solid rgba(255, 255, 255, .46) !important;
  border-radius: 11px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .11), rgba(0, 0, 0, .08)) !important;
}

.club-badge:not(.club-badge--flag)::after { display: none !important; }
.club-badge:not(.club-badge--flag) b {
  min-width: 0 !important;
  max-width: 86% !important;
  padding: 0 !important;
  color: var(--club-ink, #fff) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", Inter, sans-serif !important;
  font-weight: 1000 !important;
  letter-spacing: .03em !important;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .28), 0 2px 5px rgba(0, 0, 0, .20) !important;
}

.search-menu {
  top: calc(100% + 10px) !important;
  padding: 9px !important;
  border: 1px solid rgba(8, 91, 67, .24) !important;
  border-radius: 18px !important;
  background: rgba(250, 251, 247, .985) !important;
  box-shadow: 0 26px 62px rgba(1, 24, 35, .28) !important;
  backdrop-filter: blur(18px) !important;
}

.search-menu__caption {
  color: #0c7653 !important;
  font-size: 9px !important;
}

.search-menu button {
  min-height: 58px !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: 7px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 13px !important;
}

.search-menu button:hover,
.search-menu button:focus-visible {
  background: linear-gradient(90deg, rgba(12, 131, 88, .12), rgba(215, 173, 80, .09)) !important;
  border-color: rgba(9, 115, 78, .20) !important;
}

.search-menu button > .club-badge {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 11px !important;
  outline-offset: 2px !important;
}

.search-menu button b { color: #102f39 !important; font-size: 12px !important; }
.search-menu button small { color: #71827c !important; font-size: 9px !important; }
.search-menu button em { color: #08734e !important; font-size: 8px !important; }

/* Futbolcu turu: tek, güçlü stadyum bandı ve ferah cevap paneli. */
.app-shell.is-match-started .round-arena {
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .78) !important;
  border-radius: 26px !important;
  background: rgba(244, 247, 242, .90) !important;
  box-shadow: 0 28px 72px rgba(0, 20, 31, .32) !important;
}

.app-shell.is-match-started .round-scoreboard,
.app-shell.is-match-started .round-arena .round-scoreboard {
  position: relative !important;
  min-height: 160px !important;
  padding: 20px 30px !important;
  grid-template-columns: minmax(0, 1fr) 118px minmax(0, 1fr) !important;
  gap: 24px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 25px 25px 0 0 !important;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--left-team-accent, #08734e) 76%, #031f2c) 0%,
      rgba(5, 49, 56, .67) 34%,
      rgba(238, 246, 241, .18) 50%,
      rgba(5, 49, 62, .67) 66%,
      color-mix(in srgb, var(--right-team-accent, #0b4b8f) 76%, #031f2c) 100%),
    url("../v60-ui/backgrounds/webp/kariyer-player-stadium.webp") center 46% / cover no-repeat !important;
  box-shadow:
    inset 0 -1px 0 rgba(255, 255, 255, .32),
    inset 0 -46px 58px rgba(1, 24, 33, .22) !important;
}

.app-shell.is-match-started .round-scoreboard::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  pointer-events: none !important;
  background:
    radial-gradient(ellipse at 12% -4%, rgba(255, 255, 255, .56), transparent 28%),
    radial-gradient(ellipse at 50% -9%, rgba(255, 255, 255, .62), transparent 25%),
    radial-gradient(ellipse at 88% -4%, rgba(255, 255, 255, .56), transparent 28%),
    linear-gradient(90deg, rgba(1, 22, 29, .26), transparent 27% 73%, rgba(1, 22, 29, .26)) !important;
}

.app-shell.is-match-started .round-scoreboard::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  width: 232px !important;
  height: 150px !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
  background: radial-gradient(circle, rgba(255, 255, 255, .32), rgba(255, 255, 255, .08) 42%, transparent 68%) !important;
}

.app-shell.is-match-started .round-team {
  position: relative !important;
  z-index: 2 !important;
  min-height: 104px !important;
  padding: 13px 17px !important;
  gap: 17px !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  outline: 1px solid rgba(228, 194, 112, .28) !important;
  outline-offset: -5px !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(2, 31, 42, .53), rgba(2, 26, 36, .34)) !important;
  box-shadow:
    0 15px 32px rgba(0, 15, 24, .24),
    inset 0 1px 0 rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(7px) saturate(1.08) !important;
}

.app-shell.is-match-started .round-team b {
  color: #fff !important;
  font-size: 21px !important;
  text-shadow: 0 3px 10px rgba(0, 12, 19, .52) !important;
}

.app-shell.is-match-started .round-team span {
  color: rgba(241, 249, 244, .88) !important;
  font-size: 10px !important;
}

.app-shell.is-match-started .round-team .club-badge--lg {
  width: 78px !important;
  height: 64px !important;
  min-width: 78px !important;
  flex: 0 0 78px !important;
  border-radius: 16px !important;
  outline-offset: 3px !important;
}

.app-shell.is-match-started .round-team .club-badge--lg:not(.club-badge--flag) b {
  color: var(--club-ink, #fff) !important;
  font-size: 24px !important;
}

.app-shell.is-match-started .timer-ring {
  position: relative !important;
  z-index: 3 !important;
  width: 106px !important;
  height: 106px !important;
  border: 7px solid rgba(255, 255, 255, .86) !important;
  background:
    radial-gradient(circle at 35% 25%, rgba(48, 199, 128, .95), #08734e 45%, #03402e 100%) !important;
  box-shadow:
    0 0 0 5px rgba(41, 210, 133, .25),
    0 0 0 11px rgba(255, 255, 255, .16),
    0 18px 34px rgba(0, 15, 23, .30),
    inset 0 -16px 24px rgba(0, 22, 26, .22) !important;
}

.app-shell.is-match-started .timer-ring strong { font-size: 36px !important; }
.app-shell.is-match-started .timer-ring span { color: #f5fff8 !important; }

.app-shell.is-match-started .round-content {
  margin: 0 !important;
  padding: 20px 24px 22px !important;
  border: 0 !important;
  border-radius: 0 0 25px 25px !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(21, 155, 101, .11), transparent 34%),
    linear-gradient(155deg, rgba(251, 251, 247, .98), rgba(230, 237, 232, .97)) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.app-shell.is-match-started .round-content::before { display: none !important; }
.app-shell.is-match-started .round-heading-row { margin-bottom: 12px !important; }
.app-shell.is-match-started .round-heading-row h3 {
  color: #0d2e38 !important;
  font-size: 26px !important;
  letter-spacing: -.02em !important;
}

.app-shell.is-match-started .round-kicker {
  color: #08734e !important;
  background: rgba(16, 158, 102, .09) !important;
  border: 1px solid rgba(8, 115, 78, .20) !important;
}

.app-shell.is-match-started .round-back-button {
  color: #086746 !important;
  background: rgba(255, 255, 255, .82) !important;
  border-color: rgba(8, 103, 70, .24) !important;
  box-shadow: 0 8px 18px rgba(2, 35, 40, .08) !important;
}

.app-shell.is-match-started .round-play-grid {
  grid-template-columns: 176px minmax(0, 1fr) !important;
  padding: 12px !important;
  gap: 12px !important;
  border: 1px solid rgba(14, 87, 67, .18) !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, .73) !important;
  box-shadow: 0 12px 30px rgba(2, 32, 40, .07), inset 0 1px 0 #fff !important;
}

.app-shell.is-match-started .round-player-choice {
  border-color: rgba(8, 115, 78, .18) !important;
  background: linear-gradient(145deg, rgba(13, 137, 91, .10), rgba(255, 255, 255, .62)) !important;
}

.app-shell.is-match-started .solo-player-chip {
  color: #08734e !important;
  background: rgba(10, 131, 87, .10) !important;
}

.app-shell.is-match-started .answer-box {
  grid-template-columns: minmax(0, 1fr) 164px 112px !important;
  gap: 9px !important;
}

.app-shell.is-match-started .answer-box input {
  min-height: 62px !important;
  padding: 0 18px !important;
  border: 1px solid rgba(12, 83, 68, .38) !important;
  border-radius: 14px !important;
  background: #fff !important;
  color: #102f39 !important;
  box-shadow: inset 0 1px 3px rgba(1, 33, 40, .05) !important;
}

.app-shell.is-match-started .answer-box > button {
  min-height: 62px !important;
  border-radius: 14px !important;
  font-size: 12px !important;
}

.app-shell.is-match-started .answer-box > button:not(.answer-pass-button) {
  color: #fff !important;
  background: linear-gradient(180deg, #0d8b5c, #05613f) !important;
  border-color: #16a66d !important;
  box-shadow: 0 12px 24px rgba(4, 98, 65, .22), inset 0 1px 0 rgba(255, 255, 255, .20) !important;
}

.app-shell.is-match-started .answer-box .answer-pass-button {
  color: #15313a !important;
  background: linear-gradient(180deg, #f8e9bd, #e7c66f) !important;
  border-color: #e7c367 !important;
  box-shadow: 0 10px 20px rgba(142, 103, 28, .15), inset 0 1px 0 #fff !important;
}

.app-shell.is-match-started .player-suggestion-flag {
  width: 42px !important;
  height: 31px !important;
  border: 2px solid #fff !important;
  border-radius: 7px !important;
  outline: 1px solid rgba(203, 160, 61, .62) !important;
  box-shadow: 0 6px 14px rgba(0, 20, 28, .16) !important;
}

.app-shell.is-match-started .player-suggestion-flag .country-flag-image,
.app-shell.is-match-started .player-suggestion-flag img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 5px !important;
}

/* Aday sayısı yanlış cevapla yarışmaz: bilgi ve sonuç ayrı hücrelerde kalır. */
.app-shell.is-match-started .round-feedback-stack {
  display: grid !important;
  grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr) !important;
  gap: 10px !important;
  align-items: stretch !important;
  margin-top: 10px !important;
}

.app-shell.is-match-started .round-feedback-stack .feedback {
  min-height: 42px !important;
  margin: 0 !important;
  padding: 9px 13px !important;
  border-radius: 12px !important;
}

.app-shell.is-match-started .round-feedback-stack .feedback--meta {
  color: #0a6245 !important;
  border: 1px solid rgba(9, 126, 83, .22) !important;
  background: rgba(16, 157, 101, .09) !important;
}

.app-shell.is-match-started .round-feedback-stack .feedback--error {
  color: #9d352f !important;
  border-color: rgba(190, 60, 52, .24) !important;
  background: rgba(207, 75, 65, .09) !important;
}

.app-shell.is-match-started .round-feedback-stack .feedback:only-child {
  grid-column: 1 / -1 !important;
}

@media (max-width: 1380px) {
  .app-shell.is-match-started .round-scoreboard,
  .app-shell.is-match-started .round-arena .round-scoreboard {
    min-height: 136px !important;
    padding: 15px 20px !important;
    grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) !important;
    gap: 14px !important;
  }
  .app-shell.is-match-started .round-team { min-height: 86px !important; padding: 10px 12px !important; }
  .app-shell.is-match-started .round-team .club-badge--lg { width: 62px !important; height: 52px !important; min-width: 62px !important; flex-basis: 62px !important; }
  .app-shell.is-match-started .round-team b { font-size: 17px !important; }
  .app-shell.is-match-started .timer-ring { width: 82px !important; height: 82px !important; border-width: 6px !important; }
  .app-shell.is-match-started .timer-ring strong { font-size: 28px !important; }
  .app-shell.is-match-started .round-content { padding: 15px 18px 17px !important; }
  .app-shell.is-match-started .round-heading-row h3 { font-size: 22px !important; }
  .app-shell.is-match-started .answer-box { grid-template-columns: minmax(0, 1fr) 150px 104px !important; }
}

@media (max-width: 900px) {
  .club-search { min-height: 80px !important; padding: 9px 11px !important; }
  .club-search input { min-height: 54px !important; font-size: 14px !important; }
  .club-search .club-badge--sm { width: 50px !important; height: 50px !important; min-width: 50px !important; flex-basis: 50px !important; }
  .app-shell.is-match-started .round-scoreboard,
  .app-shell.is-match-started .round-arena .round-scoreboard {
    grid-template-columns: 1fr 70px 1fr !important;
    gap: 9px !important;
    padding: 12px !important;
  }
  .app-shell.is-match-started .round-team { min-height: 74px !important; padding: 8px !important; gap: 8px !important; }
  .app-shell.is-match-started .round-team .club-badge--lg { width: 50px !important; height: 42px !important; min-width: 50px !important; flex-basis: 50px !important; border-radius: 11px !important; }
  .app-shell.is-match-started .round-team b { font-size: 13px !important; }
  .app-shell.is-match-started .round-team span { display: none !important; }
  .app-shell.is-match-started .timer-ring { width: 64px !important; height: 64px !important; border-width: 5px !important; }
  .app-shell.is-match-started .timer-ring strong { font-size: 22px !important; }
  .app-shell.is-match-started .round-play-grid { grid-template-columns: 1fr !important; }
  .app-shell.is-match-started .answer-box { grid-template-columns: 1fr 1fr !important; }
  .app-shell.is-match-started .answer-box input { grid-column: 1 / -1 !important; }
  .app-shell.is-match-started .round-feedback-stack { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .players-grid { background-position: center top !important; }
  .club-search { gap: 8px !important; padding: 8px !important; border-radius: 16px !important; }
  .club-search .search-icon { display: none !important; }
  .club-search input { padding: 0 12px !important; }
  .search-menu button { grid-template-columns: 42px minmax(0, 1fr) auto !important; }
  .app-shell.is-match-started .round-team > div:not(.club-badge) { display: none !important; }
  .app-shell.is-match-started .round-team .club-badge,
  .app-shell.is-match-started .round-team .club-flag-image {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .app-shell.is-match-started .round-team .club-badge { align-items: center !important; justify-content: center !important; }
  .app-shell.is-match-started .round-team,
  .app-shell.is-match-started .round-team--right { justify-content: center !important; }
  .app-shell.is-match-started .answer-box { grid-template-columns: 1fr !important; }
  .app-shell.is-match-started .answer-box input { grid-column: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  .club-search,
  .search-menu,
  .round-team,
  .timer-ring { transition-duration: .01ms !important; }
}