/* Futbolcu Köprüsü V240 — mobil referans düzeni + ranked ekranları. */

.mobile-duel-header,
.mobile-round-result-reference { display: none; }

.ranked-profile-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(22, 126, 74, .18);
  border-radius: 18px;
  background: #f8fbf9;
}

.ranked-profile-avatar,
.ranked-owner-avatar,
.mobile-player-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: linear-gradient(145deg, #e6f6ec, #d6e7dd);
  color: #145d3c;
  font-weight: 950;
  box-shadow: inset 0 0 0 1px rgba(20, 93, 60, .16);
}

.ranked-profile-avatar { width: 54px; height: 54px; font-size: 16px; }
.ranked-profile-copy { min-width: 0; display: grid; gap: 2px; }
.ranked-profile-copy > small { color: #168052; font-size: 10px; font-weight: 900; letter-spacing: .1em; }
.ranked-profile-copy > strong { overflow: hidden; color: #173b2a; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }
.ranked-profile-copy > span { color: #61756b; font-size: 12px; }
.ranked-level-track { width: min(240px, 100%); height: 5px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #dfe9e3; }
.ranked-level-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #13945d, #5bd39c); }
.ranked-google-button { min-height: 42px; white-space: nowrap; }
.ranked-profile-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
.ranked-profile-actions .btn { min-height: 40px; padding: 0 12px; white-space: nowrap; }
.ranked-account-note { grid-column: 1 / -1; display: grid; gap: 2px; padding: 9px 11px; border-radius: 11px; background: #edf7f1; color: #52685c; }
.ranked-account-note b { color: #176c47; font-size: 11px; }
.ranked-account-note span { font-size: 10px; line-height: 1.35; }
.profile-action-feedback {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cbdcd2;
  border-radius: 12px;
  background: #f1f8f4;
  color: #315b46;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.profile-action-feedback.is-success { border-color: #a9d8bd; background: #eaf8f0; color: #176c47; }
.profile-action-feedback.is-warning { border-color: #ead09a; background: #fff8e7; color: #805d16; }
.profile-action-feedback.is-error { border-color: #e4b2b2; background: #fff0f0; color: #9d3232; }
.ranked-ladder-pills { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.ranked-ladder-pills > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; padding: 7px 10px; border: 1px solid #dce5df; border-radius: 11px; background: #fff; color: #607269; }
.ranked-ladder-pills > span.is-active { border-color: rgba(19, 148, 93, .42); background: #eaf8f1; color: #176b46; }
.ranked-ladder-pills small { font-size: 9px; font-weight: 950; letter-spacing: .08em; }
.ranked-ladder-pills b { color: inherit; font-size: 11px; white-space: nowrap; }
.ranked-profile-quickstats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.ranked-profile-quickstats > span { display: grid; justify-items: center; gap: 2px; padding: 8px; border: 1px solid #dce5df; border-radius: 11px; background: #fff; }
.ranked-profile-quickstats small { color: #6a7c72; font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.ranked-profile-quickstats b { color: #173b2a; font-size: 14px; }

.ranked-profile-modal-backdrop { z-index: 100060; overflow: hidden; }
.ranked-profile-modal { width: min(900px, 100%); max-height: calc(100dvh - 36px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.ranked-profile-dialog { display: grid; gap: 14px; margin-top: 18px; }
.ranked-profile-hero { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(280px, .72fr); align-items: center; gap: 14px; padding: 16px; border: 1px solid #dce7e0; border-radius: 18px; background: linear-gradient(145deg, #f1fbf5, #fbfdfc); }
.ranked-profile-avatar--large { width: 74px; height: 74px; font-size: 21px; }
.ranked-profile-hero > div:not(.ranked-profile-total) { display: grid; gap: 3px; min-width: 0; }
.ranked-profile-hero > div > small { color: #168052; font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.ranked-profile-hero > div > strong { overflow: hidden; color: #173326; font-size: 22px; text-overflow: ellipsis; white-space: nowrap; }
.ranked-profile-hero > div > span { color: #62756a; font-size: 12px; }
.ranked-profile-total { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.ranked-profile-total > span { display: grid; justify-items: center; gap: 3px; padding: 9px 5px; border: 1px solid #dce5df; border-radius: 11px; background: #fff; }
.ranked-profile-total small { color: #708078; font-size: 7px; font-weight: 950; letter-spacing: .06em; }
.ranked-profile-total b { color: #18392a; font-size: 15px; }
.ranked-profile-name-edit { display: grid; gap: 7px; }
.ranked-profile-name-edit > span { color: #52685c; font-size: 11px; font-weight: 850; }
.ranked-profile-name-edit > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.ranked-profile-name-edit input { min-width: 0; min-height: 48px; padding: 0 14px; border: 1px solid #cdd9d2; border-radius: 13px; outline: 0; color: #1c3025; font: inherit; font-size: 16px; }
.ranked-profile-name-edit input:focus { border-color: #13945d; box-shadow: 0 0 0 3px rgba(19, 148, 93, .1); }
/* V246: ad değiştirme kuralı (benzersizlik + 24 saat bekleme) alanın
   altında yazılı dursun; kullanıcı düğmeye basmadan önce görsün. */
.ranked-profile-name-rule { color: #52685c; font-size: 11.5px; line-height: 1.45; }
.ranked-profile-ladders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ranked-ladder-summary { overflow: hidden; border: 1px solid #dae5de; border-radius: 16px; background: #fff; }
.ranked-ladder-summary header { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 12px; background: #f3faf6; }
.ranked-ladder-summary.is-letters header { background: #f1f7fb; }
.ranked-ladder-summary header > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #13945d; color: #fff; font-weight: 950; }
.ranked-ladder-summary.is-letters header > span { background: #176f9c; }
.ranked-ladder-summary header > div { display: grid; gap: 2px; min-width: 0; }
.ranked-ladder-summary header small { color: #6a7b72; font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.ranked-ladder-summary header strong { color: #18382a; }
.ranked-ladder-summary header > b { color: #168052; font-size: 20px; white-space: nowrap; }
.ranked-ladder-summary header > b small { font-size: 8px; }
.ranked-ladder-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ranked-ladder-stats > span { display: grid; justify-items: center; gap: 2px; padding: 10px 5px; border-top: 1px solid #e5ebe7; border-right: 1px solid #e5ebe7; }
.ranked-ladder-stats > span:nth-child(3n) { border-right: 0; }
.ranked-ladder-stats small { color: #74827b; font-size: 7px; font-weight: 900; }
.ranked-ladder-stats b { color: #233e30; font-size: 13px; }
.ranked-profile-recent { display: grid; gap: 8px; }
.ranked-profile-recent h4 { margin: 0; color: #1b3125; }
.ranked-profile-recent > div { display: grid; gap: 6px; }
.ranked-profile-recent > div > span { display: grid; grid-template-columns: minmax(100px, .6fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #dde5e0; border-radius: 11px; background: #fafcfb; }
.ranked-profile-recent > div > span b { display: flex; gap: 7px; align-items: center; color: #168052; }
.ranked-profile-recent > div > span.is-loss b { color: #c44848; }
.ranked-profile-recent b small { padding: 2px 5px; border-radius: 999px; background: #e9f2ed; color: #5e7167; font-size: 8px; }
.ranked-profile-recent em { overflow: hidden; color: #53675c; font-size: 12px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.ranked-profile-recent strong { color: #1d3a2b; }
.ranked-profile-recent p { margin: 0; padding: 12px; border-radius: 12px; background: #f4f7f5; color: #63746b; font-size: 12px; line-height: 1.5; }
.ranked-profile-security { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px; border: 1px solid #dbe5df; border-radius: 14px; background: #f5faf7; }
.ranked-profile-security > div { display: grid; gap: 2px; }
.ranked-profile-security b { color: #176c47; }
.ranked-profile-security span { color: #607168; font-size: 11px; line-height: 1.4; }

.ranked-setup { display: grid; gap: 12px; }
.ranked-matchmaking-setup { display: grid; justify-items: center; gap: 11px; padding: 30px 24px; border: 1px solid rgba(19, 148, 93, .22); border-radius: 22px; background: radial-gradient(circle at 50% 12%, rgba(75, 213, 154, .13), transparent 38%), #fbfdfc; text-align: center; }
.ranked-matchmaking-setup > small:first-child { color: #168052; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.ranked-matchmaking-icon { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #12995b; color: #fff; font-size: 20px; font-weight: 950; box-shadow: 0 14px 28px rgba(18, 153, 91, .2); }
.ranked-matchmaking-setup h3 { margin: 0; color: #17251e; font-size: 30px; }
.ranked-matchmaking-setup > p { width: min(560px, 100%); margin: 0; color: #5d7166; font-size: 14px; line-height: 1.55; }
.ranked-matchmaking-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: min(600px, 100%); }
.ranked-matchmaking-steps > span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 7px; border: 1px solid #dce6e0; border-radius: 12px; background: #fff; color: #52675c; font-size: 11px; font-weight: 850; }
.ranked-matchmaking-steps b { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; background: #e7f5ed; color: #168052; font-size: 10px; }
.ranked-matchmaking-rating { display: flex; gap: 8px; align-items: center; }
.ranked-matchmaking-rating span { color: #a57521; font-weight: 900; }
.ranked-matchmaking-rating strong { color: #173c2a; }
.ranked-matchmaking-setup .ranked-search-button { width: min(420px, 100%); }
.ranked-human-only-note { max-width: 520px; color: #75877d; font-size: 10px; line-height: 1.4; }

/* V242 — En iyi 10 oyuncu tablosu (mod başına ayrı). */
.ranked-leaderboard { display: grid; gap: 12px; padding: 22px; border: 1px solid rgba(19, 148, 93, .22); border-radius: 22px; background: #fbfdfc; }
.ranked-leaderboard-head { display: grid; gap: 5px; justify-items: center; text-align: center; }
.ranked-leaderboard-head > small { color: #168052; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.ranked-leaderboard-head h3 { margin: 0; color: #17251e; font-size: 21px; }
.ranked-leaderboard-head p { width: min(520px, 100%); margin: 0; color: #5d7166; font-size: 12px; line-height: 1.5; }
.ranked-leaderboard-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ranked-leaderboard-row { display: grid; grid-template-columns: 30px 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid #e2ebe6; border-radius: 14px; background: #fff; }
.ranked-leaderboard-row.is-podium { border-color: rgba(199, 154, 42, .42); background: linear-gradient(90deg, #fffaef, #fff); }
.ranked-leaderboard-row.is-self { border-color: #12995b; box-shadow: 0 0 0 1px rgba(18, 153, 91, .28); }
.ranked-leaderboard-position { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #e7f5ed; color: #12784e; font-size: 12px; font-weight: 950; }
.ranked-leaderboard-row.is-podium .ranked-leaderboard-position { background: #f6e6bc; color: #8a6410; }
.ranked-leaderboard-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #12995b; color: #fff; font-size: 12px; font-weight: 900; }
.ranked-leaderboard-name { display: grid; gap: 1px; min-width: 0; }
.ranked-leaderboard-name strong { overflow: hidden; color: #1d3a2b; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.ranked-leaderboard-name small { color: #66786d; font-size: 10px; }
.ranked-leaderboard-rating { color: #12784e; font-size: 13px; font-style: normal; font-weight: 900; white-space: nowrap; }
.ranked-leaderboard-empty { padding: 16px; border: 1px dashed #cfded6; border-radius: 14px; background: #f5faf7; color: #63746b; font-size: 12px; line-height: 1.5; text-align: center; }

/* V243 — Taraftar profil resmi. Rozet, harf gösteren kutunun aynısıdır;
   avatar seçiliyse içine SVG girer ve yuvarlağı tamamen doldurur. */
.has-supporter-avatar { position: relative; overflow: hidden; padding: 0 !important; background: transparent !important; }
.supporter-avatar-art { display: block; width: 100%; height: 100%; }

.avatar-picker { display: grid; gap: 14px; }
.avatar-picker__note { margin: 0; color: #5d7166; font-size: 12.5px; line-height: 1.55; }
.avatar-picker__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.avatar-option { display: grid; justify-items: center; gap: 6px; padding: 12px 8px; border: 1px solid #dce6e0; border-radius: 16px; background: #fff; cursor: pointer; }
.avatar-option:hover { border-color: #12995b; }
.avatar-option.is-active { border-color: #12995b; background: #effaf4; box-shadow: 0 0 0 1px rgba(18, 153, 91, .3); }
.avatar-option:disabled { cursor: default; opacity: .6; }
.avatar-option__badge { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #12995b; color: #fff; font-size: 18px; font-weight: 900; }
.avatar-option b { color: #1d3a2b; font-size: 12px; }
.avatar-option small { color: #66786d; font-size: 10.5px; text-align: center; }

/* V243 — Giriş kapısı: Google ile bağlan ya da misafir olarak devam et. */
.account-gate { display: grid; gap: 18px; max-width: 620px; margin: 0 auto; padding: 30px 26px; border: 1px solid rgba(19, 148, 93, .22); border-radius: 24px; background: radial-gradient(circle at 50% 0, rgba(75, 213, 154, .14), transparent 42%), #fbfdfc; text-align: center; }
.account-gate__copy { display: grid; gap: 8px; justify-items: center; }
.account-gate__copy > span { color: #0b4f31; font-size: 10.5px; font-weight: 950; letter-spacing: .14em; }
.account-gate__copy h1 { margin: 0; color: #17251e; font-size: 28px; line-height: 1.15; }
.account-gate__copy p { width: min(520px, 100%); margin: 0; color: #445349; font-size: 13.5px; line-height: 1.6; }
.account-gate__actions { display: grid; gap: 10px; justify-items: stretch; width: min(420px, 100%); margin: 0 auto; }
.account-gate__google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; }
.account-gate__google-mark { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: #12784e; font-size: 14px; font-weight: 950; }
.account-gate__guest { min-height: 48px; }
.account-gate__note { color: #4a5a51; font-size: 11px; line-height: 1.5; }

/* V245 — Oyuncu adı penceresi: dokunmatikte rahat basılan büyük düğme. */
.profile-name-rule { display: block; margin-top: -2px; color: #5d7166; font-size: 11.5px; line-height: 1.45; }
/* `.modal-card` esnek bir sütun ve içerik uzayınca elemanlar SIKIŞIYOR;
   düğme mobilde 20 piksele iniyordu (dokunulamaz hâle geliyordu). `flex`
   ile büzülmesi kapatılır. */
/* Yükseklik `min-height` ile verilemiyor: mobil katmanlardaki `#root ...`
   kuralları kimlik seçici üstünlüğüyle onu sıfırlıyor. Dolgu güvenilir. */
#root .profile-name-submit, .profile-name-submit { flex: 0 0 auto !important; width: 100% !important; min-height: 54px !important; height: auto !important; padding: 17px 18px !important; font-size: 16px !important; }

/* V244 — Dereceli seçim süresi göstergesi. */
.ranked-ready-status { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; }
.ranked-selection-timer { display: inline-grid; place-items: center; min-width: 54px; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .22); font-size: 13px; font-weight: 950; font-variant-numeric: tabular-nums; }
.ranked-ready-status.is-urgent { background: #c0392b; }
.ranked-ready-status.is-urgent .ranked-selection-timer { background: rgba(0, 0, 0, .25); }

/* V243 — Ana ekranda hangi oyunda olduğumuzu gösteren rozet. */
.active-game-badge { display: inline-flex; align-items: center; gap: 11px; align-self: start; margin: 2px 0 4px; padding: 9px 14px; border: 1px solid rgba(19, 148, 93, .3); border-radius: 999px; background: #fff; cursor: pointer; text-align: left; }
.active-game-badge:hover { border-color: #12995b; }
.active-game-badge__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #12995b; color: #fff; font-size: 14px; font-weight: 900; }
.active-game-badge--letters .active-game-badge__icon { background: #7a3fd0; }
.active-game-badge__text { display: grid; gap: 1px; }
.active-game-badge__text small { color: #6b7d73; font-size: 9.5px; font-weight: 900; letter-spacing: .1em; }
.active-game-badge__text b { color: #17251e; font-size: 17px; line-height: 1.1; }
.active-game-badge__swap { padding: 4px 10px; border-radius: 999px; background: #e7f5ed; color: #12784e; font-size: 10.5px; font-weight: 900; }

.ranked-postmatch-selection { display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 12px 0; padding: 13px; border: 1px solid rgba(19, 148, 93, .28); border-radius: 16px; background: #effaf4; }
.ranked-postmatch-selection > span { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 14px; background: #13945d; color: #fff; font-size: 17px; font-weight: 950; }
.ranked-postmatch-selection > div { display: grid; gap: 2px; }
.ranked-postmatch-selection small { color: #168052; font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.ranked-postmatch-selection b { color: #18382a; }
.ranked-postmatch-selection p { margin: 0; color: #5a6e63; font-size: 11px; line-height: 1.4; }
.ranked-postmatch-selection > strong { padding: 7px 9px; border-radius: 999px; background: #fff; color: #176c47; font-size: 10px; white-space: nowrap; }
.ranked-select-heading { padding: 8px 2px 0; }
.ranked-select-heading small { color: #168052; font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.ranked-select-heading h3 { margin: 5px 0 4px; color: #17221c; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; }
.ranked-select-heading p { margin: 0; color: #52655b; font-size: 14px; }

.ranked-team-picker {
  padding: 18px;
  border: 1px solid #d9e2dd;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(29, 67, 48, .08);
}

.ranked-team-owner { display: grid; grid-template-columns: 48px minmax(0, 1fr) 44px; align-items: center; gap: 12px; margin-bottom: 14px; }
.ranked-owner-avatar { width: 48px; height: 48px; }
.ranked-team-owner > div { min-width: 0; display: grid; gap: 2px; }
.ranked-team-owner small { color: #6b7c73; font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.ranked-team-owner strong { overflow: hidden; color: #283a31; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.ranked-reset-selection { width: 44px; height: 44px; border: 1px solid #d9e2dd; border-radius: 13px; background: #f6f8f7; color: #3f5148; font-size: 22px; cursor: pointer; }
.ranked-reset-selection:disabled { opacity: .4; }

.ranked-team-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .42fr); gap: 10px; margin-bottom: 14px; }
.ranked-team-search { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: center; min-height: 52px; padding: 0 14px; border: 1px solid #cfd9d3; border-radius: 15px; background: #fff; box-shadow: inset 0 1px 2px rgba(20, 55, 38, .03); }
.ranked-team-search:focus-within { border-color: #13945d; box-shadow: 0 0 0 3px rgba(19, 148, 93, .1); }
.ranked-team-search span { color: #66796f; font-size: 20px; }
.ranked-team-search input { width: 100%; min-width: 0; height: 50px; border: 0; outline: 0; background: transparent; color: #1c3025; font: inherit; font-size: 15px; }
.ranked-search-button { min-height: 52px; }

.ranked-team-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ranked-team-tile { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 78px; padding: 10px 12px; border: 1px solid #d7dfda; border-radius: 16px; background: #fff; color: #1b2921; text-align: left; cursor: pointer; transition: border-color .14s ease, background .14s ease, box-shadow .14s ease; }
.ranked-team-tile:hover { border-color: #59b88b; box-shadow: 0 9px 22px rgba(24, 98, 63, .09); }
.ranked-team-tile.is-selected { border-color: #08a760; background: linear-gradient(145deg, #0fbd6d, #08a45e); color: #fff; box-shadow: 0 12px 26px rgba(8, 164, 94, .2); }
.ranked-team-tile .club-badge { width: 48px !important; height: 48px !important; }
.ranked-team-tile > span { min-width: 0; display: grid; gap: 3px; }
.ranked-team-tile b { overflow: hidden; font-size: 13px; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.ranked-team-tile small { overflow: hidden; color: #75847c; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ranked-team-tile.is-selected small { color: rgba(255,255,255,.82); }
.ranked-team-tile > i { position: absolute; top: 7px; right: 8px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: #fff; color: #079154; font-size: 11px; font-style: normal; font-weight: 950; }
.ranked-team-grid.is-letter-grid .ranked-team-tile { grid-template-columns: 52px minmax(0, 1fr); }

.ranked-search-screen { display: grid; justify-items: center; gap: 9px; min-height: 430px; padding: 42px 22px; border: 1px solid rgba(19, 148, 93, .22); border-radius: 24px; background: radial-gradient(circle at 50% 22%, rgba(75, 213, 154, .14), transparent 34%), #fbfdfc; text-align: center; }
.ranked-search-screen > small:first-of-type { color: #168052; font-weight: 950; letter-spacing: .12em; }
.ranked-search-screen h3 { margin: 0; color: #17251e; font-size: 28px; }
.ranked-search-screen p { width: min(420px, 100%); margin: 5px auto; color: #5d7166; line-height: 1.5; }
.ranked-search-radar { position: relative; display: grid; place-items: center; width: 110px; height: 110px; }
.ranked-search-radar i { position: absolute; inset: 8px; border: 2px solid rgba(18, 153, 91, .28); border-radius: 50%; animation: kk-ranked-pulse 1.8s ease-out infinite; }
.ranked-search-radar i:nth-child(2) { animation-delay: .7s; }
.ranked-search-radar span { position: relative; z-index: 1; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: #12995b; color: #fff; font-weight: 950; box-shadow: 0 14px 28px rgba(18, 153, 91, .22); }
@keyframes kk-ranked-pulse { from { transform: scale(.55); opacity: .9; } to { transform: scale(1.28); opacity: 0; } }
.ranked-search-time { color: #14261d; font-size: 38px; font-variant-numeric: tabular-nums; }
.ranked-search-rank { display: flex; gap: 8px; align-items: center; }
.ranked-search-rank b { color: #ad7618; }
.ranked-search-rank span { color: #607269; }
.ranked-window-note { color: #7b8b83; }
.ranked-cancel-button { min-width: 210px; margin-top: 8px; }

.profile-name-dialog { display: grid; gap: 12px; }
.profile-name-dialog p { margin: 0; color: #5c6f65; line-height: 1.5; }
.profile-name-dialog input { width: 100%; min-height: 52px; padding: 0 15px; border: 1px solid #cdd9d2; border-radius: 14px; outline: 0; font: inherit; font-size: 16px; }
.profile-name-dialog input:focus { border-color: #13945d; box-shadow: 0 0 0 3px rgba(19,148,93,.1); }

.ranked-found-backdrop,
.ranked-result-backdrop { position: fixed; inset: 0; z-index: 100050; display: grid; place-items: center; padding: max(18px, env(safe-area-inset-top)) 16px max(18px, env(safe-area-inset-bottom)); overflow: auto; background: rgba(18, 29, 23, .72); }
.ranked-found-card,
.ranked-result-card { width: min(570px, 100%); max-height: calc(100dvh - max(36px, env(safe-area-inset-top) + env(safe-area-inset-bottom))); overflow: auto; border: 1px solid rgba(57, 184, 121, .34); border-radius: 26px; background: #f8fffb; box-shadow: 0 28px 70px rgba(5, 21, 13, .28); text-align: center; }
.ranked-found-card { display: grid; justify-items: center; gap: 12px; padding: 32px 26px; }
.ranked-found-card > small { color: #168052; font-weight: 950; letter-spacing: .12em; }
.ranked-found-card h2 { margin: 0; color: #14251c; font-size: 30px; }
.ranked-found-versus { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 54px; width: 100%; margin: 10px 0; }
.ranked-found-versus > div { display: grid; justify-items: center; gap: 4px; padding: 16px 10px; border: 1px solid #d9e3dd; border-radius: 18px; background: #fff; }
.ranked-found-versus > div.is-self { border-color: #28ad70; background: #effbf4; }
.ranked-found-versus > div > span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #e6efe9; color: #274b38; font-weight: 950; }
.ranked-found-versus b { color: #1c3025; }
.ranked-found-versus small { color: #63756b; }
.ranked-found-versus em { color: #a9761e; font-size: 11px; font-style: normal; font-weight: 900; }
.ranked-found-versus > strong { position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #153e2b; color: #fff; transform: translate(-50%, -50%); }
.ranked-found-countdown { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: #12995b; color: #fff; font-size: 36px; font-weight: 950; box-shadow: 0 12px 30px rgba(18,153,91,.22); }
.ranked-found-card p { margin: 0; color: #62746a; }

.ranked-result-card { display: grid; justify-items: stretch; gap: 12px; padding: 28px; }
.ranked-result-icon { font-size: 44px; }
.ranked-result-card > small { color: #168052; font-weight: 950; letter-spacing: .12em; }
.ranked-result-card h2 { margin: 0; color: #14251c; font-size: 30px; }
.ranked-result-card > p { margin: 0 0 4px; color: #5f7167; }
.ranked-rating-change,
.ranked-xp-change { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 62px; padding: 12px 15px; border: 1px solid #d8e2dc; border-radius: 16px; background: #fff; text-align: left; }
.ranked-rating-change span,
.ranked-xp-change span { color: #6d7d75; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.ranked-rating-change strong,
.ranked-xp-change strong { color: #1a3024; font-size: 20px; }
.ranked-rating-change b.is-positive { color: #079456; }
.ranked-rating-change b.is-negative { color: #d34848; }
.ranked-xp-change b { color: #a9761e; }
.ranked-level-result { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; color: #41544a; }
.ranked-level-result > div { height: 7px; overflow: hidden; border-radius: 999px; background: #dfe9e3; }
.ranked-level-result i { display: block; height: 100%; background: linear-gradient(90deg, #12995b, #5ad79e); }
.ranked-forfeit-note { padding: 10px 12px; border: 1px solid rgba(190,85,63,.28); border-radius: 12px; background: rgba(190,85,63,.08); color: #8b402b; font-size: 12px; }
.ranked-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 6px; }
.ranked-result-actions .btn { min-height: 50px; }

@media (max-width: 768px) {
  html, body { max-width: 100%; overflow-x: hidden !important; background: #f2f5f3 !important; background-image: none !important; }
  html body::before, html body::after, html body #root::before, html body #root::after,
  html body #root .app-shell::before, html body #root .app-shell::after,
  html body #root .main-grid::before, html body #root .main-grid::after { content: none !important; display: none !important; background: none !important; }
  html body #root,
  html body #root .app-shell,
  html body #root .main-grid,
  html body.kk-match-active #root,
  html body.kk-match-active #root .app-shell,
  html body.kk-match-active #root .main-grid { background: #f2f5f3 !important; background-image: none !important; }
  html body #root .app-shell { width: 100% !important; max-width: 100% !important; padding-right: max(10px, env(safe-area-inset-right)) !important; padding-left: max(10px, env(safe-area-inset-left)) !important; }
  html body.kk-match-active .portal-home-button { top: max(10px, env(safe-area-inset-top)) !important; left: max(10px, env(safe-area-inset-left)) !important; width: 42px !important; min-width: 42px !important; height: 42px !important; padding: 0 !important; justify-content: center !important; }
  html body.kk-match-active .portal-home-button span { display: none !important; }
  html body.kk-match-active #root .main-grid { padding-top: calc(54px + env(safe-area-inset-top)) !important; }
  html body #root .hero,
  html body #root .setup-showcase { display: none !important; }
  html body #root .kk-mobile-visual-card,
  html body #root .side-stack { display: none !important; }
  html body #root .main-grid { gap: 10px !important; padding-top: 8px !important; }
  html body #root .game-card { padding: 12px !important; border: 1px solid #dce5df !important; border-radius: 21px !important; background: #fff !important; background-image: none !important; box-shadow: 0 10px 28px rgba(23, 64, 42, .08) !important; }
  html body #root .app-shell.is-ranked .section-title { display: none !important; }
  html body #root .app-shell.is-ranked .match-settings { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 7px !important; padding: 8px !important; border: 1px solid #e0e8e3 !important; border-radius: 15px !important; background: #f8faf9 !important; }
  html body #root .app-shell.is-ranked .match-settings__group { min-width: 0 !important; padding: 7px !important; }
  html body #root .app-shell.is-ranked .match-settings__group > div > b { min-height: 30px !important; margin-bottom: 5px !important; font-size: 10px !important; }
  html body #root .app-shell.is-ranked .match-settings__group .setting-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; }
  html body #root .app-shell.is-ranked .match-settings__group .setting-tabs button { min-height: 40px !important; padding: 4px !important; font-size: 11px !important; }

  html body #root .mode-switch--three { grid-template-columns: 1fr !important; gap: 8px !important; }
  html body #root .mode-switch--three > button { width: 100% !important; min-height: 66px !important; padding: 11px 14px !important; text-align: left !important; }

  .ranked-profile-card { grid-template-columns: 48px minmax(0, 1fr); gap: 10px; padding: 12px; border-radius: 17px; }
  .ranked-profile-avatar { width: 48px; height: 48px; }
  .ranked-profile-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .ranked-profile-actions .ranked-google-button { grid-column: auto; width: 100%; min-height: 46px; }
  .ranked-profile-actions .ranked-open-profile { min-height: 46px; }
  .ranked-profile-modal { width: 100%; max-height: calc(100dvh - max(20px, env(safe-area-inset-top) + env(safe-area-inset-bottom))); padding: 14px !important; border-radius: 19px !important; }
  .ranked-profile-modal-backdrop { padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
  .ranked-profile-dialog { gap: 11px; margin-top: 13px; }
  .ranked-profile-hero { grid-template-columns: 58px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .ranked-profile-avatar--large { width: 58px; height: 58px; font-size: 17px; }
  .ranked-profile-hero > div > strong { font-size: 18px; }
  .ranked-profile-total { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranked-profile-name-edit > div { grid-template-columns: 1fr; }
  /* Yükseklik `min-height` yerine dolgudan gelir: `#root` seçicileri
     yükseklik kurallarını eziyor, dolgu ise ayakta kalıyor. "Devam Et"
     düğmesinde ölçülen 20 pikselin sebebi buydu. */
  #root .ranked-profile-name-edit .btn,
  .ranked-profile-name-edit .btn { width: 100% !important; min-height: 52px !important; height: auto !important; padding: 16px 18px !important; font-size: 15.5px !important; }
  .ranked-profile-ladders { grid-template-columns: 1fr; }
  .ranked-profile-recent > div > span { grid-template-columns: minmax(90px, .7fr) minmax(0, 1fr) auto; gap: 7px; }
  .ranked-profile-security { grid-template-columns: 1fr; }
  .ranked-profile-security .btn { width: 100%; }
  .ranked-matchmaking-setup { gap: 10px; padding: 22px 12px; border-radius: 18px; }
  .ranked-matchmaking-icon { width: 60px; height: 60px; }
  .ranked-matchmaking-setup h3 { font-size: clamp(25px, 7.8vw, 34px); }
  .ranked-matchmaking-setup > p { font-size: 12.5px; }
  .ranked-matchmaking-steps { gap: 5px; }
  .ranked-matchmaking-steps > span { flex-direction: column; gap: 3px; min-height: 66px; font-size: 9px; }
  .ranked-matchmaking-setup .ranked-search-button { min-height: 54px; }
  .ranked-leaderboard { gap: 10px; padding: 15px 11px; border-radius: 18px; }
  .ranked-leaderboard-head h3 { font-size: 17px; }
  .ranked-leaderboard-head p { font-size: 11px; }
  .ranked-leaderboard-row { grid-template-columns: 24px 30px minmax(0, 1fr) auto; gap: 7px; padding: 7px 8px; border-radius: 12px; }
  .ranked-leaderboard-position { width: 22px; height: 22px; font-size: 11px; }
  .ranked-leaderboard-avatar { width: 30px; height: 30px; font-size: 11px; }
  .ranked-leaderboard-name strong { font-size: 12px; }
  .ranked-leaderboard-rating { font-size: 12px; }
  .avatar-picker__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .avatar-option { padding: 10px 6px; border-radius: 14px; }
  .avatar-option__badge { width: 52px; height: 52px; }
  .account-gate { gap: 14px; padding: 22px 14px; border-radius: 20px; }
  .account-gate__copy h1 { font-size: clamp(22px, 7vw, 28px); }
  .account-gate__copy p { font-size: 12.5px; }
  .account-gate__actions { width: 100%; }
  .account-gate__google, .account-gate__guest { width: 100%; min-height: 52px; }
  .active-game-badge { width: 100%; padding: 8px 10px; }
  .active-game-badge__text b { font-size: 15px; }
  .active-game-badge__swap { margin-left: auto; }
  #root .profile-name-submit, .profile-name-submit { padding: 19px 18px !important; font-size: 17px !important; border-radius: 16px !important; }
  .profile-name-dialog { flex: 0 0 auto !important; }
  .profile-name-dialog input { min-height: 52px; font-size: 16px; }
  .profile-name-rule { font-size: 12px; }
  .ranked-postmatch-selection { grid-template-columns: 42px minmax(0, 1fr); gap: 9px; margin: 10px 0; padding: 10px; }
  .ranked-postmatch-selection > span { width: 42px; height: 42px; border-radius: 12px; font-size: 14px; }
  .ranked-postmatch-selection > strong { grid-column: 1 / -1; justify-self: stretch; text-align: center; }
  .ranked-select-heading { padding-top: 2px; }
  .ranked-select-heading h3 { font-size: clamp(27px, 8.5vw, 38px); }
  .ranked-select-heading p { font-size: 13px; line-height: 1.45; }
  .ranked-team-picker { padding: 12px; border-radius: 19px; }
  .ranked-team-owner { grid-template-columns: 44px minmax(0, 1fr) 44px; margin-bottom: 11px; }
  .ranked-owner-avatar { width: 44px; height: 44px; }
  .ranked-team-tools { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 8px; }
  .ranked-team-search,
  .ranked-search-button { min-height: 54px; }
  .ranked-team-search input { height: 52px; font-size: 16px; }
  .ranked-search-button { padding: 0 8px !important; font-size: 13px !important; }
  .ranked-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ranked-team-tile { grid-template-columns: 42px minmax(0, 1fr); min-height: 82px; padding: 9px 8px; border-radius: 14px; }
  .ranked-team-tile .club-badge { width: 42px !important; height: 42px !important; }
  .ranked-team-tile b { display: -webkit-box; overflow: hidden; font-size: clamp(11px, 3.4vw, 13px); line-height: 1.15; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .ranked-team-tile.is-selected > span { padding-right: 12px; }
  .ranked-team-tile small { font-size: 10.5px; }

  /* Tek oyuncu ve arkadaş/ranked odası: kartlar telefonda tam genişlikte
     alt alta akar. Üç sütun, 390–430 px cihazlarda ikinci kartı 20 px'e
     sıkıştırıp metni harf harf dikey gösteriyordu. */
  html body #root .players-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; padding: 9px !important; overflow: visible !important; }
  html body #root .players-grid > .player-card { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; padding: 12px !important; }
  html body #root .players-grid .versus { grid-column: 1 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 8px !important; width: 100% !important; min-width: 0 !important; min-height: 46px !important; height: auto !important; padding: 4px !important; writing-mode: horizontal-tb !important; }
  html body #root .players-grid .versus span { width: 42px !important; height: 42px !important; font-size: 13px !important; writing-mode: horizontal-tb !important; }
  html body #root .players-grid .versus small { display: inline !important; font-size: 9px !important; writing-mode: horizontal-tb !important; }
  html body #root .player-card .club-search input { min-width: 0 !important; font-size: 16px !important; }

  /* Referans maç hiyerarşisi. */
  html body #root .app-shell.is-match-started .round-arena { display: grid !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; padding: 0 0 calc(10px + env(safe-area-inset-bottom)) !important; overflow: visible !important; border: 0 !important; border-radius: 20px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; }
  html body #root .app-shell.is-match-started .mobile-duel-header { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: auto !important; height: auto !important; min-height: 0 !important; margin: calc(52px + env(safe-area-inset-top)) 0 0 !important; padding: 10px !important; overflow: visible !important; border: 1px solid #d9e1dc; border-radius: 19px; background: #fff; box-shadow: 0 8px 24px rgba(24, 60, 41, .06); }
  .mobile-player-score { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-width: 0; min-height: 82px; padding: 10px; border: 1px solid #d9e0dc; border-radius: 16px; background: #f6f8f7; }
  .mobile-player-score.is-self { border-color: rgba(14, 158, 91, .35); background: #f0faf5; }
  .mobile-player-avatar { width: 42px; height: 42px; font-size: 12px; }
  .mobile-player-copy { min-width: 0; display: grid; gap: 2px; }
  .mobile-player-copy b { overflow: hidden; color: #28382f; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-player-copy small { overflow: hidden; color: #0d9757; font-size: 9px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-player-score > strong { display: grid; justify-items: end; color: #151d19; font-size: 26px; }
  .mobile-player-score > strong small { color: #78867f; font-size: 8px; font-weight: 700; }

  html body #root .app-shell.is-match-started .round-scoreboard { display: grid !important; grid-template-columns: minmax(0, 1fr) 92px minmax(0, 1fr) !important; align-items: center !important; gap: 5px !important; min-height: 194px !important; padding: 12px 9px 10px !important; overflow: hidden !important; border: 1px solid #d7e0db !important; border-radius: 19px !important; background: #fff !important; background-image: none !important; box-shadow: 0 9px 25px rgba(25, 61, 42, .06) !important; }
  html body #root .app-shell.is-match-started .round-scoreboard::before,
  html body #root .app-shell.is-match-started .round-scoreboard::after,
  html body #root .app-shell.is-match-started .round-team::before,
  html body #root .app-shell.is-match-started .round-team::after,
  html body #root .app-shell.is-match-started .timer-ring::before,
  html body #root .app-shell.is-match-started .timer-ring::after { content: none !important; display: none !important; }
  html body #root .app-shell.is-match-started .round-team { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: auto auto !important; justify-items: center !important; align-content: center !important; gap: 6px !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; background-image: none !important; box-shadow: none !important; text-align: center !important; }
  html body #root .app-shell.is-match-started .round-team .club-badge--lg { position: relative !important; inset: auto !important; order: 1 !important; width: clamp(54px, 16vw, 68px) !important; min-width: clamp(54px, 16vw, 68px) !important; height: clamp(54px, 16vw, 68px) !important; margin: 0 !important; transform: none !important; }
  html body #root .app-shell.is-match-started .round-team > div:not(.club-badge) { position: static !important; display: grid !important; order: 2 !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; }
  html body #root .app-shell.is-match-started .round-team b { display: -webkit-box !important; overflow: hidden !important; color: #17221c !important; font-size: clamp(12px, 3.5vw, 16px) !important; line-height: 1.15 !important; text-shadow: none !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  html body.kk-match-active #root .app-shell.is-match-started .round-team > div > span { display: none !important; }
  html body #root .app-shell.is-match-started .timer-ring { display: grid !important; grid-template-rows: auto auto auto auto !important; place-items: center !important; align-content: center !important; gap: 3px !important; width: 92px !important; height: auto !important; min-height: 126px !important; padding: 8px 4px !important; border: 0 !important; border-radius: 15px !important; background: transparent !important; background-image: none !important; box-shadow: none !important; }
  html body #root .app-shell.is-match-started .timer-ring > strong { min-width: 72px; padding: 7px 5px; border: 1px solid #f0bdc5; border-radius: 11px; background: #fff1f3; color: #e64658 !important; font-size: 25px !important; font-variant-numeric: tabular-nums; }
  html body #root .app-shell.is-match-started .timer-ring > span { color: #6c7880 !important; font-size: 8px !important; }
  .round-number-badge { display: block !important; padding: 5px 8px; border-radius: 8px; background: #eef0f4; color: #4e5b6c !important; font-size: 9px !important; font-weight: 950 !important; }
  .round-rule-badge { display: block !important; color: #59676f !important; font-size: 7px !important; font-weight: 900 !important; white-space: nowrap; }

  html body #root .app-shell.is-match-started .round-content { display: grid !important; gap: 10px !important; padding: 0 2px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  html body #root .app-shell.is-match-started .round-heading-row,
  html body #root .app-shell.is-match-started .opponent-strip,
  html body #root .app-shell.is-match-started .round-match-meta { display: none !important; }
  .wrong-chance-row { display: flex; justify-content: flex-end; margin-top: -3px; padding-right: 4px; }
  .wrong-chance-pill { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 12px; border: 1px solid #d6dce2; border-radius: 999px; background: #f0f2f5; color: #657080; font-size: 12px; }
  .wrong-chance-pill b { margin: 0 2px; color: #26333b; }
  .wrong-chance-pill.is-danger { border-color: #efb8bf; background: #fff0f2; color: #c43e4d; }
  html body #root .app-shell.is-match-started .round-play-grid { display: grid !important; grid-template-columns: 1fr !important; gap: 7px !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  html body #root .app-shell.is-match-started .round-player-choice { display: none !important; }
  html body #root .app-shell.is-match-started .answer-area { position: relative !important; z-index: 2 !important; display: grid !important; gap: 8px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; overflow: visible !important; }
  html body #root .app-shell.is-match-started .answer-area > label { display: none !important; }
  html body #root .app-shell.is-match-started .answer-box { display: grid !important; grid-template-columns: 1fr !important; gap: 8px !important; }
  html body #root .app-shell.is-match-started .answer-box input { grid-column: 1 !important; width: 100% !important; min-width: 0 !important; min-height: 64px !important; padding: 0 17px !important; border: 2px solid #15985d !important; border-radius: 18px !important; background: #fff !important; color: #1c2a22 !important; font-size: 16px !important; box-shadow: 0 0 0 4px rgba(21,152,93,.07) !important; }
  html body #root .app-shell.is-match-started .answer-box > button:not(.answer-pass-button) { grid-column: 1 !important; width: 100% !important; min-height: 58px !important; border-radius: 17px !important; background: #56c895 !important; color: #fff !important; font-size: 17px !important; font-weight: 900 !important; }
  html body #root .app-shell.is-match-started .answer-pass-button { grid-column: 1 !important; width: 100% !important; min-height: 46px !important; border: 1px solid #d9e1dc !important; border-radius: 15px !important; background: #f7f9f8 !important; color: #596a61 !important; }
  html body #root .app-shell.is-match-started .player-suggestions { position: relative !important; inset: auto !important; grid-column: 1 !important; width: 100% !important; max-width: 100% !important; max-height: min(310px, 42dvh) !important; margin-top: 0 !important; overflow: auto !important; border-radius: 16px !important; overscroll-behavior: contain !important; }
  html body #root .player-suggestions button { min-height: 56px !important; }
  html body #root .round-pass-status { display: none !important; }
  html body #root .round-feedback-stack { margin: 0 !important; }

  /* Sonuç kartı küçük telefonda kendi içinde kayar. */
  html body #root .modal-backdrop { box-sizing: border-box !important; align-items: center !important; padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom)) !important; overflow: hidden !important; background: rgba(25, 31, 28, .66) !important; backdrop-filter: none !important; }
  html body #root .modal-card { box-sizing: border-box !important; display: flex !important; flex-direction: column !important; width: min(94vw, 560px) !important; max-height: calc(100dvh - max(24px, env(safe-area-inset-top) + env(safe-area-inset-bottom))) !important; overflow: hidden !important; border-radius: 22px !important; }
  html body #root .modal-card__head { flex: 0 0 auto !important; }
  html body #root .modal-card > :not(.modal-card__head) { min-height: 0 !important; overflow: auto !important; overscroll-behavior: contain !important; }
  html body #root .mobile-round-result-reference { display: grid !important; justify-items: center; gap: 11px; width: 100%; min-height: 0; padding: 5px 1px 2px; }
  .round-result-modal > :not(.mobile-round-result-reference) { display: none !important; }
  .mobile-round-result-reference h3 { margin: 0 0 5px; color: #111b16; font-size: clamp(21px, 7vw, 31px); line-height: 1.12; text-align: center; }
  .mobile-result-label { color: #697988; font-size: 11px; font-weight: 950; letter-spacing: .1em; }
  .mobile-answer-avatar { display: grid; place-items: center; width: 78px; height: 78px; border: 1px solid #d5ded9; border-radius: 18px; background: #fff; color: #234334; font-size: 34px; font-weight: 950; box-shadow: 0 9px 24px rgba(23, 69, 45, .1); }
  .mobile-answer-name { color: #08a55e; font-size: clamp(24px, 7.6vw, 36px); line-height: 1.1; text-align: center; }
  .mobile-answer-career { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; width: 100%; max-height: 166px; overflow: auto; overscroll-behavior: contain; }
  .mobile-answer-career > span { display: grid; grid-template-columns: 31px minmax(0, 1fr); align-items: center; gap: 7px; min-height: 48px; padding: 6px 8px; border: 1px solid #d9dee4; border-radius: 12px; background: #f2f4f7; color: #202b25; text-align: left; }
  .mobile-answer-career .club-badge { width: 31px !important; height: 31px !important; }
  .mobile-answer-career b { overflow: hidden; font-size: 11px; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-round-winner { display: grid; grid-template-columns: 50px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 4px; }
  .mobile-round-winner > span { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid #d3ddd7; border-radius: 50%; background: #fff; color: #145d3c; font-weight: 950; }
  .mobile-round-winner > div { display: grid; gap: 1px; text-align: left; }
  .mobile-round-winner small { color: #77857e; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
  .mobile-round-winner b { color: #15231b; }
  .mobile-round-transition { margin: 5px 0 0; color: #596a62; font-size: 13px; text-align: center; }
  .mobile-round-transition b { color: #07995a; font-size: 22px; }
  html body #root .mode-online .round-continue-button { display: none !important; }

  .ranked-found-backdrop,
  .ranked-result-backdrop { padding-right: 10px; padding-left: 10px; }
  .ranked-found-card,
  .ranked-result-card { border-radius: 21px; }
  .ranked-found-card { padding: 24px 14px; }
  .ranked-found-card h2,
  .ranked-result-card h2 { font-size: 25px; }
  .ranked-found-versus { gap: 38px; }
  .ranked-found-versus > div { padding: 13px 6px; }
  .ranked-found-versus > div > span { width: 54px; height: 54px; }
  .ranked-found-versus > strong { width: 40px; height: 40px; }
  .ranked-result-card { padding: 22px 14px; }
  .ranked-result-actions { grid-template-columns: 1fr; }
  .ranked-rating-change,
  .ranked-xp-change { grid-template-columns: 54px minmax(0, 1fr) auto; padding: 10px 12px; }

  /* Ortak viewport otoritesinin klavye sınıfları kullanılır; yeni ölçüm yok. */
  html body.wos-keyboard-open #root .app-shell.is-match-started .round-arena {
    position: fixed !important;
    inset: var(--wos-viewport-top, 0px) 0 auto !important;
    z-index: 2147481000 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    width: 100vw !important;
    height: var(--wos-visible-height, 100dvh) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background: #f2f5f3 !important;
  }
  html body.wos-keyboard-open #root .app-shell.is-match-started .mobile-duel-header { display: none !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .round-scoreboard { flex: 0 0 96px !important; grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr) !important; min-height: 96px !important; height: 96px !important; padding: 4px 7px !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .round-team .club-badge--lg { width: 38px !important; height: 38px !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .round-team b { font-size: 10px !important; -webkit-line-clamp: 1; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .timer-ring { width: 62px !important; min-height: 72px !important; padding: 2px !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .timer-ring > strong { min-width: 54px !important; padding: 3px !important; font-size: 19px !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .round-content { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: 5px !important; min-height: 0 !important; padding: 2px !important; overflow-x: hidden !important; overflow-y: auto !important; overscroll-behavior: contain !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .wrong-chance-row { margin-top: -8px; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .round-feedback-stack { display: none !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .round-play-grid { display: flex !important; flex: 0 0 auto !important; flex-direction: column !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .answer-area { display: flex !important; flex-direction: column !important; min-height: 0 !important; padding: 0 !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .answer-box { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .answer-box input { grid-column: 1 / -1 !important; min-height: 48px !important; height: 48px !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .answer-box > button:not(.answer-pass-button),
  html body.wos-keyboard-open #root .app-shell.is-match-started .answer-pass-button { grid-column: auto !important; min-height: 42px !important; height: 42px !important; }
  html body.wos-keyboard-open #root .app-shell.is-match-started .player-suggestions { max-height: min(150px, 30dvh) !important; }
}

@media (max-width: 480px) {
  .ranked-team-tools { grid-template-columns: 1fr; }
  .ranked-search-button { width: 100%; }
  .ranked-profile-copy > span { font-size: 11px; }
  .ranked-found-versus b { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body #root .mobile-player-score { grid-template-columns: 36px minmax(0, 1fr) auto; padding: 8px 7px; }
  html body #root .mobile-player-avatar { width: 36px; height: 36px; }
}

@media (max-width: 340px) {
  .ranked-team-grid { grid-template-columns: 1fr; }
  html body #root .players-grid { grid-template-columns: 1fr !important; }
  html body #root .players-grid .versus { display: none !important; }
  .mobile-duel-header { grid-template-columns: 1fr; }
  .mobile-player-score { min-height: 66px; }
  html body #root .round-scoreboard { grid-template-columns: minmax(0, 1fr) 78px minmax(0, 1fr) !important; }
  html body #root .timer-ring { width: 78px !important; }
  html body #root .timer-ring > strong { min-width: 66px; font-size: 21px !important; }
  .mobile-answer-career { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ranked-search-radar i { animation: none; opacity: .25; }
}

/*
 * Bazı Android WebView sürümleri klavye açılırken layout viewport'u kısa bir
 * an masaüstü genişliğine çıkarır. O anda max-width sorgusu kapanırsa input
 * masaüstü geometrisine dönmemeli. Ortak viewport otoritesinin yazdığı mobil
 * ve klavye sınıflarıyla aynı düzeni sorgudan bağımsız olarak sabitliyoruz.
 */
body.wos-keyboard-open { max-width: 100%; overflow-x: hidden !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .round-arena {
  position: fixed !important;
  inset: var(--wos-viewport-top, 0px) auto auto 0 !important;
  z-index: 2147481000 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  width: var(--kk-answer-viewport-width, 100vw) !important;
  max-width: var(--kk-answer-viewport-width, 100vw) !important;
  height: var(--wos-visible-height, 100dvh) !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 4px max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)) !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f2f5f3 !important;
}
body.wos-keyboard-open #root .app-shell.is-match-started .mobile-duel-header,
body.wos-keyboard-open #root .app-shell.is-match-started .round-heading-row,
body.wos-keyboard-open #root .app-shell.is-match-started .opponent-strip,
body.wos-keyboard-open #root .app-shell.is-match-started .round-match-meta,
body.wos-keyboard-open #root .app-shell.is-match-started .round-player-choice,
body.wos-keyboard-open #root .app-shell.is-match-started .round-feedback-stack { display: none !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .round-scoreboard {
  display: grid !important;
  flex: 0 0 96px !important;
  grid-template-columns: minmax(0, 1fr) 62px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 4px !important;
  min-height: 96px !important;
  height: 96px !important;
  padding: 4px 7px !important;
  overflow: hidden !important;
  border: 1px solid #d7e0db !important;
  border-radius: 14px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}
body.wos-keyboard-open #root .app-shell.is-match-started .round-scoreboard::before,
body.wos-keyboard-open #root .app-shell.is-match-started .round-scoreboard::after { content: none !important; display: none !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .round-team {
  display: grid !important;
  justify-items: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
body.wos-keyboard-open #root .app-shell.is-match-started .round-team .club-badge--lg { display: block !important; width: 38px !important; min-width: 38px !important; height: 38px !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .round-team b { display: block !important; overflow: hidden !important; max-width: 100% !important; color: #17221c !important; font-size: 10px !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .round-team > div > span { display: none !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .timer-ring { display: grid !important; place-items: center !important; width: 62px !important; min-height: 72px !important; height: 72px !important; padding: 2px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .timer-ring > strong { min-width: 54px !important; padding: 3px !important; border: 1px solid #f0bdc5 !important; border-radius: 9px !important; background: #fff1f3 !important; color: #e64658 !important; font-size: 19px !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .round-content { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; gap: 5px !important; min-height: 0 !important; padding: 2px !important; overflow-x: hidden !important; overflow-y: auto !important; background: transparent !important; overscroll-behavior: contain !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .wrong-chance-row { display: flex !important; justify-content: flex-end !important; margin: 0 !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .round-play-grid { display: flex !important; flex: 0 0 auto !important; flex-direction: column !important; min-height: 0 !important; padding: 0 !important; overflow: visible !important; border: 0 !important; background: transparent !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .answer-area { display: flex !important; flex-direction: column !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .answer-area > label { display: none !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .answer-box { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 4px !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .answer-box input { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; min-height: 48px !important; height: 48px !important; padding: 0 12px !important; border: 2px solid #15985d !important; border-radius: 14px !important; background: #fff !important; font-size: 16px !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .answer-box > button { grid-column: auto !important; width: 100% !important; min-width: 0 !important; min-height: 42px !important; height: 42px !important; padding: 4px !important; border-radius: 13px !important; font-size: 12px !important; }
body.wos-keyboard-open #root .app-shell.is-match-started .player-suggestions { position: relative !important; inset: auto !important; flex: 0 1 auto !important; width: 100% !important; max-height: 150px !important; overflow-y: auto !important; overscroll-behavior: contain !important; }