/* V60 Kariyer Köprüsü — FC kariyer menüsü estetiği */
html,
body {
  background-image:
    linear-gradient(180deg, rgba(248,246,236,.08), rgba(6,24,39,.22)),
    url("./backgrounds/webp/kariyer-setup-stadium.webp") !important;
  background-color: #cbd6d3 !important;
}

body:has(.app-shell.is-match-started) {
  background-image:
    linear-gradient(180deg, rgba(244,244,237,.06), rgba(5,22,37,.24)),
    url("./backgrounds/webp/kariyer-player-stadium.webp") !important;
}

body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .12 !important;
  background-image:
    linear-gradient(30deg, transparent 49.5%, rgba(7,38,57,.20) 50%, transparent 50.5%),
    linear-gradient(150deg, transparent 49.5%, rgba(7,38,57,.15) 50%, transparent 50.5%) !important;
  background-size: 86px 50px !important;
}

.app-shell { position: relative !important; z-index: 2 !important; }

.topbar {
  color: #fff !important;
  background: linear-gradient(90deg, rgba(5,25,46,.97), rgba(9,45,70,.96), rgba(5,25,46,.97)) !important;
  border: 1px solid rgba(235,203,125,.40) !important;
  border-radius: 19px !important;
  box-shadow: 0 18px 48px rgba(1,14,27,.33), inset 0 -2px 0 rgba(215,170,75,.16) !important;
}
.topbar .brand strong {
  color: #fff !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-size: 24px !important;
  letter-spacing: .015em !important;
  text-transform: uppercase !important;
}
.topbar .brand span { color: #e0c984 !important; }
.topbar .topnav button {
  min-height: 44px !important;
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  border: 1px solid rgba(235,205,132,.20) !important;
  box-shadow: none !important;
}
.topbar .topnav__info::before,
.topbar .topnav__primary::before {
  content: "";
  width: 17px;
  height: 17px;
  background: url("./icons/info.svg") center/contain no-repeat;
}
.topbar .topnav__primary::before { background-image: url("./icons/settings.svg"); }
.portal-home-button {
  background: linear-gradient(180deg,#143e5d,#082844) !important;
  border-color: rgba(235,205,132,.44) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(1,15,29,.24) !important;
}
.portal-lang-switch {
  background: rgba(4,26,47,.95) !important;
  border-color: rgba(235,205,132,.30) !important;
}

.main-grid { gap: 14px !important; }
.game-card {
  position: relative !important;
  padding: 18px !important;
  overflow: visible !important;
  background: linear-gradient(145deg, rgba(246,244,237,.79), rgba(214,224,221,.74)) !important;
  border: 1px solid rgba(255,255,255,.60) !important;
  border-radius: 30px !important;
  box-shadow: var(--v60-shadow-xl), inset 0 1px 0 rgba(255,255,255,.62) !important;
  backdrop-filter: blur(20px) saturate(1.04) !important;
}
.side-card {
  background: linear-gradient(150deg, rgba(5,29,51,.92), rgba(12,57,72,.89)) !important;
  color: #edf2ef !important;
  border: 1px solid rgba(233,201,122,.38) !important;
  box-shadow: 0 18px 46px rgba(1,15,27,.28), inset 0 1px 0 rgba(255,255,255,.07) !important;
  backdrop-filter: blur(18px) !important;
}
.side-card__title h3,
.side-card .step b,
.side-card .history-item b,
.side-card .data-grid strong { color: #fff !important; }
.side-card__title > span,
.side-card .step small,
.side-card .history-item small,
.side-card .data-grid small { color: #d9c47f !important; }
.side-card .data-grid strong { color: #0d344f !important; }
.side-card .data-grid small { color: #9b7228 !important; }

.setup-showcase {
  grid-template-columns: minmax(0,1.25fr) minmax(250px,.72fr) minmax(270px,.8fr) !important;
  min-height: 224px !important;
  padding: 24px 26px !important;
  border: 1px solid rgba(235,204,126,.52) !important;
  border-radius: 25px !important;
  background:
    linear-gradient(110deg, rgba(4,27,49,.96), rgba(12,58,75,.90)) !important;
  box-shadow: 0 20px 48px rgba(1,15,29,.28), inset 0 1px 0 rgba(255,255,255,.08), inset 0 -2px 0 rgba(215,170,75,.16) !important;
}
.setup-showcase__copy > span { color: #efd187 !important; border-color: rgba(235,204,126,.34) !important; }
.setup-showcase__copy > strong {
  color: #fff !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-size: 34px !important;
  letter-spacing: -.025em !important;
  text-transform: uppercase !important;
}
.setup-showcase__copy > small { color: #c6d5d5 !important; }
.setup-showcase__visual {
  height: 188px !important;
  border: 1px solid rgba(235,204,126,.28) !important;
  background:
    url("../v59-ui/webp/kariyer-setup-3d.webp") center/118% auto no-repeat,
    radial-gradient(circle at 50% 30%,rgba(66,195,188,.18),transparent 34%),
    rgba(2,24,42,.65) !important;
  box-shadow: 0 18px 34px rgba(0,12,24,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.setup-showcase__stats span {
  min-height: 78px !important;
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(235,204,126,.18) !important;
}
.setup-showcase__stats small { color: #e9cc81 !important; }

.mode-switch--three {
  padding: 7px !important;
  background: linear-gradient(90deg, rgba(5,29,52,.96), rgba(12,55,72,.94)) !important;
  border: 1px solid rgba(232,200,122,.40) !important;
  box-shadow: 0 14px 32px rgba(2,19,32,.20) !important;
}
.mode-switch--three button {
  color: #cedadd !important;
  background: transparent !important;
  border-color: transparent !important;
}
.mode-switch--three button > span {
  background: rgba(255,255,255,.08) !important;
  color: #e8cb80 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(235,205,131,.25) !important;
}
.mode-switch--three button b { color: #fff !important; }
.mode-switch--three button small { color: #9fb4bc !important; }
.mode-switch--three button.active {
  color: #fff !important;
  background: linear-gradient(180deg,rgba(237,211,148,.22),rgba(208,164,68,.12)) !important;
  border-color: rgba(236,205,129,.52) !important;
  box-shadow: inset 0 -2px 0 rgba(221,178,80,.24) !important;
}
.mode-switch--three button.active > span {
  background: linear-gradient(145deg,#efd58f,#bd862c) !important;
  color: #092944 !important;
}

.match-settings {
  gap: 12px !important;
  margin-bottom: 13px !important;
}
.match-settings__group {
  min-height: 140px !important;
  background: linear-gradient(145deg, rgba(250,248,241,.90), rgba(218,227,223,.86)) !important;
  border: 1px solid rgba(255,255,255,.62) !important;
  border-bottom-color: #bd9340 !important;
  box-shadow: 0 14px 32px rgba(3,27,41,.12), inset 0 1px 0 #fff !important;
}
.match-settings__group::before {
  border-radius: 50% !important;
  color: #0d3551 !important;
  background: linear-gradient(145deg,#f0d58d,#c6983b) !important;
  box-shadow: 0 8px 18px rgba(157,107,25,.20) !important;
}
.setting-tabs { background: rgba(8,39,61,.08) !important; border-color: #aebdbb !important; }
.setting-tabs button {
  background: rgba(248,248,242,.82) !important;
  color: #19364b !important;
  border-color: #b7c3c0 !important;
}
.setting-tabs button.active {
  background: linear-gradient(180deg,#173f60,#082a47) !important;
  color: #fff !important;
  border-color: #d2aa51 !important;
}

.players-grid {
  min-height: 370px !important;
  padding: 14px !important;
  gap: 18px !important;
  background: rgba(6,29,49,.13) !important;
  border: 1px solid rgba(235,205,130,.40) !important;
  border-radius: 30px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 16px 36px rgba(3,28,42,.12) !important;
}
.player-card {
  min-height: 340px !important;
  padding: 20px !important;
  background:
    radial-gradient(circle at 50% 13%, rgba(255,255,255,.84), transparent 34%),
    linear-gradient(155deg, rgba(250,248,242,.96), rgba(218,225,223,.93)) !important;
  border: 1px solid rgba(255,255,255,.76) !important;
  outline: 1px solid rgba(191,144,49,.54) !important;
  outline-offset: -7px !important;
  box-shadow: 0 20px 44px rgba(3,27,42,.16), inset 0 1px 0 #fff !important;
}
.player-card::before {
  height: 6px !important;
  background: var(--v60-gold-line) !important;
}
.player-label { color: #18364b !important; }
.score-chip { background: #0d3450 !important; color: #fff !important; border: 1px solid #d2aa51 !important; }
.score-chip span { color: #e4cd90 !important; }
.score-chip strong { background: linear-gradient(145deg,#efd691,#bd872d) !important; color: #0a2943 !important; }

.club-badge,
.round-team .club-badge--lg,
.club-search .club-badge {
  border-radius: 50% !important;
  background: linear-gradient(145deg,#fff,#d8dfdd) !important;
  border: 3px solid #d4ab4f !important;
  box-shadow: 0 0 0 4px #0d3450, 0 0 0 7px rgba(237,207,135,.72), 0 13px 25px rgba(3,27,42,.22) !important;
  overflow: hidden !important;
}
.club-badge img { width: 76% !important; height: 76% !important; object-fit: contain !important; border-radius: 50% !important; }
.player-card .club-badge--lg { width: 104px !important; height: 104px !important; }
.club-search {
  min-height: 84px !important;
  padding: 12px 16px !important;
  background: rgba(250,249,244,.92) !important;
  border: 1px solid #9faeae !important;
  box-shadow: inset 0 2px 5px rgba(3,30,45,.06) !important;
}
.club-search:focus-within {
  border-color: #b7872f !important;
  box-shadow: 0 0 0 4px rgba(213,170,75,.20) !important;
}
.search-icon { color: #b5842b !important; }
.club-summary > div { background: rgba(11,50,74,.07) !important; border-color: #b8c4c0 !important; }
.role-card { background: linear-gradient(90deg,#123b59,#082a47) !important; border: 1px solid rgba(226,190,99,.38) !important; }
.versus span {
  background: radial-gradient(circle at 35% 28%,#234f6c,#061e36 72%) !important;
  color: #f0cf79 !important;
  border-color: #e4c36d !important;
  box-shadow: 0 0 0 5px #0c3450, 0 0 0 8px rgba(235,205,132,.62), 0 16px 32px rgba(2,22,36,.25) !important;
}

.game-actions {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.game-actions .btn--primary {
  min-width: 290px !important;
  min-height: 62px !important;
  background: linear-gradient(180deg,#f2d996,#c9983b) !important;
  color: #0b2943 !important;
  border: 1px solid #f5dfa5 !important;
  box-shadow: 0 15px 32px rgba(162,109,23,.28), inset 0 1px 0 rgba(255,255,255,.72) !important;
  font-size: 17px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}
.game-actions .btn--primary::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  vertical-align: -4px;
  background: url("./icons/play.svg") center/contain no-repeat;
  filter: brightness(.42) saturate(2);
}

/* Futbolcu cevap ekranı */
body:has(.app-shell.is-match-started) .game-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  padding: 0 !important;
}
.app-shell.is-match-started .round-arena {
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.app-shell.is-match-started .round-scoreboard,
.app-shell.is-match-started .round-arena .round-scoreboard {
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
.app-shell.is-match-started .round-scoreboard::before,
.app-shell.is-match-started .round-scoreboard::after { display: none !important; }
.app-shell.is-match-started .round-team {
  color: #112c42 !important;
  background: linear-gradient(155deg,rgba(250,249,244,.95),rgba(216,224,222,.92)) !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  outline: 1px solid rgba(198,150,52,.52) !important;
  outline-offset: -6px !important;
  box-shadow: 0 18px 44px rgba(2,22,36,.22), inset 0 1px 0 #fff !important;
}
.app-shell.is-match-started .round-team b { color: #102d44 !important; text-shadow: none !important; }
.app-shell.is-match-started .round-team span { color: #62727a !important; }
.app-shell.is-match-started .round-team .club-badge {
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  flex: 0 0 58px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
}
.app-shell.is-match-started .timer-ring {
  background: radial-gradient(circle at 35% 28%,#24526f,#061e36 72%) !important;
  border-color: #e4c46e !important;
  box-shadow: 0 0 0 4px #0a304c, 0 0 0 8px rgba(237,209,143,.72), 0 16px 34px rgba(2,20,35,.28) !important;
}
.app-shell.is-match-started .timer-ring::before { background: conic-gradient(#e6c66e 0 74deg,rgba(255,255,255,.80) 74deg 328deg,rgba(230,198,110,.38) 328deg 360deg) !important; }

.app-shell.is-match-started .round-content {
  position: relative !important;
  margin-top: 14px !important;
  padding: 24px 28px 28px !important;
  background: linear-gradient(150deg,rgba(250,249,244,.91),rgba(216,225,222,.87)) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  border-radius: 28px !important;
  box-shadow: 0 24px 62px rgba(2,21,36,.25), inset 0 1px 0 #fff !important;
  backdrop-filter: blur(20px) !important;
}
.app-shell.is-match-started .round-content::before {
  height: 104px !important;
  margin-bottom: 14px !important;
  border: 1px solid rgba(215,172,75,.40) !important;
  background:
    url("../v59-ui/webp/kariyer-player-3d.webp") center/auto 102px no-repeat,
    linear-gradient(90deg,rgba(7,38,59,.96),rgba(22,77,91,.91)) !important;
  box-shadow: 0 14px 30px rgba(2,24,39,.18), inset 0 1px 0 rgba(255,255,255,.09) !important;
}
.app-shell.is-match-started .round-heading-row h3 {
  color: #0f2e45 !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-size: 30px !important;
  text-transform: uppercase !important;
}
.app-shell.is-match-started .round-kicker {
  color: #89631f !important;
  background: #ead9aa !important;
  border: 1px solid #d7b961 !important;
}
.app-shell.is-match-started .opponent-strip,
.app-shell.is-match-started .round-match-meta,
.app-shell.is-match-started .round-play-grid,
.app-shell.is-match-started .answer-panel {
  background: rgba(250,249,244,.78) !important;
  border-color: #acbcb9 !important;
  box-shadow: inset 0 1px 0 #fff !important;
}
.app-shell.is-match-started .answer-box input {
  min-height: 66px !important;
  background: rgba(255,255,252,.94) !important;
  border: 1px solid #8299a1 !important;
  color: #102d44 !important;
  font-size: 18px !important;
}
.app-shell.is-match-started .answer-box input:focus {
  border-color: #b8872d !important;
  box-shadow: 0 0 0 5px rgba(215,170,75,.20) !important;
}
.app-shell.is-match-started .answer-box > button:not(.answer-pass-button) {
  background: linear-gradient(180deg,#173f60,#082a47) !important;
  color: #fff !important;
  border: 1px solid #d5ad55 !important;
}
.app-shell.is-match-started .answer-box .answer-pass-button {
  background: linear-gradient(180deg,#f0d792,#c99b3f) !important;
  color: #0b2943 !important;
  border-color: #f2dda0 !important;
}
.app-shell.is-match-started .player-suggestions {
  background: rgba(7,38,58,.07) !important;
  border-color: #a9b9b7 !important;
}
.app-shell.is-match-started .player-suggestions button {
  background: rgba(250,249,244,.90) !important;
  color: #122f45 !important;
  border: 1px solid #b1bebb !important;
  box-shadow: 0 6px 14px rgba(3,26,40,.07) !important;
}
.app-shell.is-match-started .player-suggestion-flag {
  border-radius: 50% !important;
  border: 2px solid #d2aa51 !important;
  box-shadow: 0 0 0 2px #0d3450 !important;
  overflow: hidden !important;
}

@media (max-width: 1100px) {
  .setup-showcase { grid-template-columns: 1fr 240px !important; }
  .setup-showcase__stats { grid-column: 1/-1 !important; }
}
@media (max-width: 760px) {
  body { background-position: center top !important; }
  #root .topbar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 66px 10px 10px !important;
    overflow: hidden !important;
  }
  #root .topbar .brand {
    width: 100% !important;
    min-width: 0 !important;
    gap: 7px !important;
    justify-content: center !important;
  }
  .topbar .brand strong {
    display: block !important;
    max-width: none !important;
    font-size: 20px !important;
    line-height: .88 !important;
    white-space: normal !important;
  }
  .topbar .brand-mark { flex: 0 0 36px !important; width: 36px !important; height: 42px !important; }
  #root .topbar .topnav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    width: 100% !important;
    gap: 6px !important;
  }
  #root .topbar .topnav .portal-lang-switch {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    width: 240px !important;
    max-width: calc(100vw - 80px) !important;
    margin: 0 !important;
    justify-content: center !important;
  }
  .portal-lang-switch button { flex: 1 1 0 !important; }
  .portal-lang-switch button span:last-child {
    display: inline !important;
    font-size: 10px !important;
  }
  .topbar .topnav__info,
  .topbar .topnav__primary {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }
  .portal-home-button {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
  }
  .portal-home-button span { display: none !important; }
  .game-card { padding: 10px !important; border-radius: 20px !important; }
  .setup-showcase { grid-template-columns: 1fr !important; padding: 16px !important; }
  .setup-showcase__visual { height: 132px !important; }
  .players-grid { gap: 10px !important; padding: 8px !important; border-radius: 20px !important; }
  .player-card { min-height: 0 !important; outline-offset: -4px !important; }
  .app-shell.is-match-started .round-content { padding: 14px !important; border-radius: 20px !important; }
  .app-shell.is-match-started .round-content::before { height: 68px !important; }
}