/* Turnuva Kur — görünüm (ftui-v2, 23.09.2026). Etkileşim friend-tournaments-ui.js'te.
 * Genel "#flow button" / "#flow h3" kuralları !important taşıdığı için bileşen kuralları
 * "#flow :is(#screenFriendTournament, #screenSpectator) .ftx" kökünden ve gerektiğinde !important ile yazılır. */

/* ---------- Ekran kabuğu ---------- */
#flow #screenFriendTournament.friend-tournament-screen { display: flex; flex-direction: column; width: min(1280px, calc(100vw - 20px)); max-width: none; height: min(86vh, 800px); padding: 12px 14px !important; overflow: hidden !important; }
/* Başlık ve kendi geri düğmesi gizli: ortak sayfa-geri düğmesi (sağ üst) data-flow-back'i okur */
html body #flow #screenFriendTournament > .flow-card-head { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; margin: 0 !important; padding: 0 !important; }
#screenMultiplayer .ft-entry-card { --acc: #eac079; --accWash: rgba(234,192,121,.16); --img: url("assets/menu/ranked-cup.jpg"); }
#screenMultiplayer .ft-entry-card .mode-card-body h3 { font-size: clamp(1rem, 2.5vw, 1.45rem) !important; line-height: 1.15 !important; }

/* Odaya Katıl sekmeleri (index.html) */
.ft-join-tabs { display: flex; gap: 7px; padding: 0 6px 9px; }
.ft-join-tabs button { min-height: 40px; padding: 8px 16px; border: 1px solid rgba(142,178,214,.3); border-radius: 7px; background: #10243a; color: #bdd0df; font-weight: 800; cursor: pointer; }
.ft-join-tabs button.active { border-color: #f2c979; background: rgba(242,201,121,.13); color: #ffe2a5; }
#flow #screenSpectator .ft-join-tabs button.active { border-color: #eac479 !important; background: rgba(242,201,121,.17) !important; color: #ffe4af !important; }

/* ---------- Kök ve belirteçler ---------- */
.ftx {
  --ftx-bg: #07111d; --ftx-panel: #0d1b2c; --ftx-panel2: #12243a; --ftx-raise: #183049;
  --ftx-line: rgba(140,175,215,.15); --ftx-line2: rgba(140,175,215,.3);
  --ftx-text: #eef4ff; --ftx-muted: #8ea4bd; --ftx-dim: #6c819a;
  --ftx-gold: #f5c76a; --ftx-gold2: #c98a2e; --ftx-goldwash: rgba(245,199,106,.12);
  --ftx-cyan: #46d6e0; --ftx-green: #35d49a; --ftx-red: #ff6b7d; --ftx-amber: #ffb547; --ftx-violet: #a98bff;
  --ftx-r: 12px; --ftx-rs: 8px;
  --ftx-font: "Inter", "Outfit", system-ui, sans-serif; --ftx-head: "Rajdhani", "Outfit", sans-serif; --ftx-numf: "Outfit", "Inter", sans-serif;
  box-sizing: border-box; position: relative; color: var(--ftx-text); font-family: var(--ftx-font); font-size: 13px; line-height: 1.4;
}
.ftx *, .ftx *::before, .ftx *::after { box-sizing: border-box; }
#friendTournamentBody.ftx { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; max-height: none; padding: 0; }
.ftx [hidden] { display: none !important; }
.ftx :focus-visible { outline: 2px solid var(--ftx-gold); outline-offset: 2px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx p { color: var(--ftx-muted) !important; margin: 0; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx h3, #flow :is(#screenFriendTournament, #screenSpectator) .ftx h4, #flow :is(#screenFriendTournament, #screenSpectator) .ftx h5 { margin: 0; font-family: var(--ftx-head) !important; letter-spacing: .02em !important; color: var(--ftx-text); -webkit-text-fill-color: currentColor; background: none; }
.ftx .ftx-ic { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.18em; }
.ftx .ftx-num { font-family: var(--ftx-numf); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ftx-eyebrow { display: block; color: var(--ftx-gold); font: 800 10px/1.2 var(--ftx-font); letter-spacing: .16em; text-transform: uppercase; }
.ftx-label { display: block; color: #b7c7da; font: 700 11px/1.3 var(--ftx-font); letter-spacing: .04em; text-transform: uppercase; }
.ftx-label em { color: var(--ftx-dim); font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 600; }
.ftx-muted { color: var(--ftx-muted); font-size: 12px; line-height: 1.45; }
.ftx-hint { display: flex; gap: 7px; align-items: flex-start; color: var(--ftx-muted); font-size: 11.5px; line-height: 1.45; margin: 0; }
.ftx-hint .ftx-ic { color: var(--ftx-cyan); margin-top: 1px; }
.ftx-error { color: #ff9aa6 !important; font-size: 12px; font-weight: 600; }
.ftx-error-box { padding: 8px 11px; margin-bottom: 10px; border: 1px solid rgba(255,107,125,.4); border-radius: var(--ftx-rs); background: rgba(255,107,125,.1); color: #ffc2ca; font-size: 12px; }

/* Para birimleri */
.ftx-amt { display: inline-flex; align-items: center; gap: 5px; font-family: var(--ftx-numf); font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.ftx-amt.is-md { font-size: 16px; }
.ftx-amt.is-lg { font-size: 20px; line-height: 1; }
.ftx-coin { width: 1em; height: 1em; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff1c4 0 18%, #f6c65c 38%, #b67a21 100%); box-shadow: inset 0 0 0 1.5px rgba(120,70,10,.55); }
.ftx-gem { width: .95em; height: .95em; flex: none; background: linear-gradient(135deg,#b6f3ff,#3fb5ff 55%,#2a6ee8); clip-path: polygon(50% 0,100% 38%,50% 100%,0 38%); }

/* ---------- Düğmeler ---------- */
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px !important; height: auto; padding: 0 14px;
  border: 1px solid var(--ftx-line2) !important; border-radius: 10px !important;
  background: linear-gradient(180deg,#1d3550,#152a41) !important; color: var(--ftx-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 3px 10px rgba(0,0,0,.18) !important;
  font: 700 13px/1 var(--ftx-font) !important; letter-spacing: 0 !important; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  transition: transform .14s ease, border-color .14s ease, filter .14s ease;
}
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn:hover { border-color: rgba(140,190,235,.55) !important; filter: brightness(1.08); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn:active { transform: translateY(1px) scale(.98); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn:disabled { opacity: .42 !important; cursor: default; transform: none; filter: saturate(.6); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-gold { border-color: #ffe0a0 !important; background: linear-gradient(180deg,#ffd98a,#e3a445 60%,#c98a2e) !important; color: #1a1406 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px rgba(201,138,46,.28) !important; font-weight: 800 !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-danger { border-color: rgba(255,120,140,.5) !important; background: linear-gradient(180deg,#5a2331,#42182a) !important; color: #ffe2e7 !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-ghost { border-color: transparent !important; background: rgba(255,255,255,.04) !important; box-shadow: none !important; color: #c7d6e8 !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-sm { min-height: 32px !important; padding: 0 10px; font-size: 12px !important; border-radius: 8px !important; gap: 5px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-xl { min-height: 48px !important; padding: 0 20px; font-size: 15px !important; width: 100%; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-icon { width: 40px; padding: 0; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-icon.is-sm { width: 32px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn .ftx-ic { width: 17px; height: 17px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-busy { pointer-events: none; opacity: .7 !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-busy::after { content: ""; width: 12px; height: 12px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ftxSpin .7s linear infinite; }

/* ---------- Form öğeleri ---------- */
#flow :is(#screenFriendTournament, #screenSpectator) .ftx input:not([type="checkbox"]):not([type="range"]), #flow :is(#screenFriendTournament, #screenSpectator) .ftx select {
  width: 100%; min-height: 40px !important; padding: 0 12px; border: 1px solid var(--ftx-line2) !important; border-radius: 10px !important;
  background: #081524 !important; color: var(--ftx-text) !important; font: 600 16px/1 var(--ftx-font) !important; box-shadow: inset 0 2px 6px rgba(0,0,0,.25) !important; outline: none;
}
#flow :is(#screenFriendTournament, #screenSpectator) .ftx input::placeholder { color: #5f7690; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx input:focus, #flow :is(#screenFriendTournament, #screenSpectator) .ftx select:focus { border-color: var(--ftx-gold) !important; box-shadow: 0 0 0 3px rgba(245,199,106,.18) !important; }
.ftx-field { display: grid; gap: 6px; align-content: start; min-width: 0; }
.ftx-field small { color: var(--ftx-dim); font-size: 11px; line-height: 1.35; }
.ftx-inline { display: flex; gap: 7px; align-items: center; }
.ftx-inline input { flex: 1; min-width: 0; }
.ftx-row-actions { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }

.ftx-seg { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border: 1px solid var(--ftx-line); border-radius: 12px; background: #081524; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-seg button { flex: 1 0 auto; min-width: 44px; min-height: 36px !important; padding: 0 12px; border: 1px solid transparent !important; border-radius: 8px !important; background: transparent !important; box-shadow: none !important; color: #b6c6d9 !important; font: 700 13px/1 var(--ftx-font) !important; cursor: pointer; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-seg button.is-on { border-color: rgba(245,199,106,.6) !important; background: linear-gradient(180deg,rgba(245,199,106,.24),rgba(245,199,106,.1)) !important; color: #ffe6ad !important; }

.ftx-stepper { display: inline-grid; grid-template-columns: 40px minmax(64px,auto) 40px; align-items: center; gap: 4px; padding: 4px; border: 1px solid var(--ftx-line); border-radius: 12px; background: #081524; justify-self: start; }
.ftx-stepper output, .ftx-stepper input.ftx-num { display: flex; align-items: baseline; justify-content: center; gap: 3px; min-width: 64px; color: #fff; font-size: 20px; font-weight: 800; text-align: center; }
.ftx-stepper output small { color: var(--ftx-muted); font-size: 11px; font-weight: 600; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-stepper .ftx-btn.is-icon { width: 40px; min-height: 36px !important; border-radius: 9px !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-stepper.is-wide { grid-template-columns: 36px minmax(80px,1fr) 36px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-stepper input.ftx-num { min-height: 34px !important; padding: 0 4px; border: 0 !important; background: transparent !important; box-shadow: none !important; font: 800 17px/1 var(--ftx-numf) !important; text-align: center; }

.ftx-switch { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--ftx-line); border-radius: var(--ftx-r); background: rgba(255,255,255,.025); cursor: pointer; }
.ftx-switch input { position: absolute; opacity: 0; pointer-events: none; }
.ftx-switch-ui { position: relative; flex: none; width: 44px; height: 26px; border-radius: 99px; background: #243a52; transition: background .18s; }
.ftx-switch-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #d6e2ef; transition: transform .18s; }
.ftx-switch input:checked + .ftx-switch-ui { background: linear-gradient(90deg,#d9a348,#f5c76a); }
.ftx-switch input:checked + .ftx-switch-ui::after { transform: translateX(18px); background: #fff; }
.ftx-switch input:focus-visible + .ftx-switch-ui { outline: 2px solid var(--ftx-gold); outline-offset: 2px; }
.ftx-switch strong { display: block; font-size: 13px; }
.ftx-switch small { display: block; color: var(--ftx-muted); font-size: 11px; line-height: 1.35; }

/* ---------- Ortak parçalar ---------- */
.ftx-view { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ftx-state { flex: 1; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 24px; text-align: center; }
.ftx-state strong { font-size: 15px; }
.ftx-state small { color: var(--ftx-muted); max-width: 420px; }
.ftx-state-ic { width: 34px !important; height: 34px !important; color: var(--ftx-red); }
.ftx-spinner { width: 34px; height: 34px; border: 3px solid rgba(245,199,106,.2); border-top-color: var(--ftx-gold); border-radius: 50%; animation: ftxSpin .8s linear infinite; }
.ftx-empty { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 180px; padding: 22px; border: 1px dashed var(--ftx-line2); border-radius: var(--ftx-r); background: rgba(255,255,255,.02); text-align: center; }
.ftx-empty strong { font-size: 15px; }
.ftx-empty p { max-width: 460px; }
.ftx-empty-ic { width: 38px !important; height: 38px !important; color: var(--ftx-gold); opacity: .8; }
.ftx-note { display: flex; gap: 8px; padding: 10px 11px; border: 1px solid var(--ftx-line); border-radius: var(--ftx-r); background: rgba(70,214,224,.06); color: #bcd3e4; font-size: 12px; }
.ftx-note .ftx-ic { color: var(--ftx-cyan); }
.ftx-pill { display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 99px; background: rgba(142,164,189,.16); color: #c7d4e3; font: 800 10px/1 var(--ftx-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.ftx-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ftx-pill.is-lobby { background: rgba(53,212,154,.14); color: #62f0b9; }
.ftx-pill.is-active { background: rgba(70,214,224,.14); color: #6ae8f0; }
.ftx-pill.is-active::before { animation: ftxPulse 1.6s ease-in-out infinite; }
.ftx-pill.is-completed { background: rgba(245,199,106,.16); color: #ffd98a; }
.ftx-pill.is-archived { background: rgba(169,139,255,.16); color: #c9b6ff; }
.ftx-pill.is-cancelled, .ftx-pill.is-closed { background: rgba(255,107,125,.14); color: #ff9aa6; }
.ftx-code { color: var(--ftx-gold); font: 800 12px/1 var(--ftx-numf); letter-spacing: .08em; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx button.ftx-code.is-btn { display: inline-flex; align-items: center; gap: 5px; min-height: 24px !important; padding: 0 8px; border: 1px dashed rgba(245,199,106,.45) !important; border-radius: 6px !important; background: rgba(245,199,106,.07) !important; box-shadow: none !important; color: var(--ftx-gold) !important; font: 800 12px/1 var(--ftx-numf) !important; cursor: pointer; }
.ftx-fill { display: flex; align-items: center; gap: 9px; color: #c8d6e6; font: 700 12px/1 var(--ftx-numf); }
.ftx-fill > span { display: inline-flex; gap: 5px; align-items: center; white-space: nowrap; }
.ftx-fill-bar { flex: 1; height: 6px; border-radius: 99px; background: rgba(255,255,255,.07); overflow: hidden; }
.ftx-fill-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#2fb9a4,#46d6e0); transition: width .4s ease; }
.ftx-fill.is-lg .ftx-fill-bar { height: 9px; }
.ftx-badge { --c: #4f8cff; display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, color-mix(in srgb, var(--c) 88%, #fff), color-mix(in srgb, var(--c) 70%, #000)); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22), 0 3px 8px rgba(0,0,0,.25); color: #fff; font: 900 12px/1 var(--ftx-numf); letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.ftx-badge.is-sm { width: 26px; height: 26px; border-radius: 8px; font-size: 10px; }
.ftx-badge.is-xs { width: 20px; height: 20px; border-radius: 6px; font-size: 8.5px; }
.ftx-place { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #1d3149; color: #c5d3e2; font: 900 12px/1 var(--ftx-numf); }
.ftx-place.is-sm { width: 22px; height: 22px; font-size: 11px; }
.ftx-place.is-p1 { background: linear-gradient(145deg,#ffe7a6,#d9a03d); color: #3b2604; }
.ftx-place.is-p2 { background: linear-gradient(145deg,#f1f5fb,#9fb0c4); color: #1c2733; }
.ftx-place.is-p3 { background: linear-gradient(145deg,#f3c49b,#b6723c); color: #2e1606; }
.ftx-block { display: grid; gap: 10px; align-content: start; padding: 13px 14px; border: 1px solid var(--ftx-line); border-radius: var(--ftx-r); background: linear-gradient(180deg,rgba(21,40,62,.72),rgba(12,25,41,.72)); }
.ftx-block > h4 { display: flex; align-items: center; gap: 7px; font-size: 16px; }
.ftx-block > h4 .ftx-ic { color: var(--ftx-gold); }
.ftx-block.is-accent { border-color: rgba(245,199,106,.35); background: linear-gradient(135deg,rgba(245,199,106,.1),rgba(12,25,41,.8) 55%); }
.ftx-block.is-danger { border-color: rgba(255,107,125,.22); }
.ftx-blocks { display: grid; gap: 10px; align-content: start; }
.ftx-count { margin-left: auto; color: var(--ftx-muted); font: 700 12px/1 var(--ftx-numf); }

/* ---------- 1) Turnuva merkezi ---------- */
.ftx-hub { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 12px; }
.ftx-rail { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding: 12px; border: 1px solid var(--ftx-line); border-radius: 14px; background: radial-gradient(circle at 20% 0%,rgba(245,199,106,.14),transparent 55%), linear-gradient(180deg,#10233a,#0a1828); scrollbar-width: none; }
.ftx-brand { display: flex; align-items: center; gap: 10px; }
.ftx-brand strong { display: block; font: 700 18px/1.1 var(--ftx-head); }
.ftx-brand-ic { width: 38px !important; height: 38px !important; padding: 7px; border-radius: 12px; background: linear-gradient(145deg,#ffe0a0,#c98a2e); color: #2a1a03; stroke-width: 2.1 !important; }
.ftx-code-form { display: grid; gap: 6px; }
.ftx-archive-meter { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--ftx-line); border-radius: var(--ftx-r); background: rgba(0,0,0,.18); }
.ftx-archive-head { display: flex; align-items: center; justify-content: space-between; color: #c2d1e2; font-size: 12px; font-weight: 700; }
.ftx-archive-head span { display: inline-flex; gap: 6px; align-items: center; }
.ftx-archive-head strong { font-size: 18px; color: #fff; }
.ftx-archive-head small { color: var(--ftx-muted); font-size: 12px; }
.ftx-slots { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ftx-slots i { width: 16px; height: 7px; border-radius: 3px; background: rgba(255,255,255,.1); }
.ftx-slots i.is-used { background: linear-gradient(90deg,#b99aff,#8a6bff); }
.ftx-slots em { color: var(--ftx-muted); font-size: 11px; font-style: normal; }
.ftx-buy { display: flex; gap: 6px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-buy .ftx-btn { flex: 1; }
.ftx-hub-main { display: flex; flex-direction: column; gap: 9px; min-width: 0; min-height: 0; }
.ftx-chips { display: flex; gap: 6px; overflow-x: auto; padding: 1px 60px 2px 1px; scrollbar-width: none; }
.ftx-chips::-webkit-scrollbar, .ftx-rail::-webkit-scrollbar { display: none; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-chip { display: inline-flex; align-items: center; gap: 7px; flex: none; min-height: 34px !important; padding: 0 13px; border: 1px solid var(--ftx-line2) !important; border-radius: 99px !important; background: rgba(255,255,255,.03) !important; box-shadow: none !important; color: #b9c9db !important; font: 700 12px/1 var(--ftx-font) !important; cursor: pointer; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-chip b { min-width: 20px; padding: 3px 6px; border-radius: 99px; background: rgba(255,255,255,.08); font: 800 10px/1 var(--ftx-numf); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-chip.is-on { border-color: rgba(245,199,106,.7) !important; background: var(--ftx-goldwash) !important; color: #ffe2a3 !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-chip.is-on b { background: var(--ftx-gold); color: #2a1a03; }
.ftx-cards { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fill,minmax(258px,1fr)); gap: 10px; align-content: start; overflow-y: auto; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: #36506b transparent; }
.ftx-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 12px 13px; border: 1px solid var(--ftx-line); border-radius: 14px; background: linear-gradient(170deg,#15293f,#0c1a2b 70%); box-shadow: 0 8px 20px rgba(0,0,0,.2); cursor: pointer; overflow: hidden; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; animation: ftxRise .35s ease both; }
.ftx-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ftx-dim); }
.ftx-card.is-lobby::before { background: linear-gradient(90deg,#35d49a,#46d6e0); }
.ftx-card.is-active::before { background: linear-gradient(90deg,#46d6e0,#4f8cff); }
.ftx-card.is-completed::before { background: linear-gradient(90deg,#ffe0a0,#c98a2e); }
.ftx-card.is-archived::before { background: linear-gradient(90deg,#c9b6ff,#8a6bff); }
.ftx-card:hover, .ftx-card:focus-visible { transform: translateY(-2px); border-color: rgba(245,199,106,.45); box-shadow: 0 12px 26px rgba(0,0,0,.3); }
.ftx-card:active { transform: scale(.99); }
.ftx-card-top { display: flex; justify-content: space-between; align-items: center; }
.ftx-card-id { display: flex; gap: 10px; align-items: center; min-width: 0; }
.ftx-card-id h4 { font-size: 17px; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftx-card-id > div { min-width: 0; }
.ftx-card-id small { color: var(--ftx-muted); font-size: 11px; }
.ftx-card-ic { width: 36px !important; height: 36px !important; padding: 7px; border-radius: 11px; background: rgba(245,199,106,.1); color: var(--ftx-gold); }
.ftx-champ-line { display: flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 8px; background: linear-gradient(90deg,rgba(245,199,106,.18),rgba(245,199,106,.04)); color: #ffe2a3; font-size: 12px; }
.ftx-champ-line span { color: #d6bf8e; }
.ftx-champ-line strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftx-facts { display: flex; flex-wrap: wrap; gap: 5px; }
.ftx-facts span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 6px; background: rgba(255,255,255,.05); color: #c2d0df; font-size: 11px; font-weight: 600; }
.ftx-card-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5px; }
.ftx-card-stats > div { display: grid; justify-items: center; gap: 1px; padding: 7px 4px; border-radius: 9px; background: rgba(0,0,0,.2); }
.ftx-card-stats b { color: #fff; font-size: 16px; font-weight: 800; }
.ftx-card-stats small { color: var(--ftx-dim); font-size: 10px; font-weight: 600; text-align: center; }
.ftx-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--ftx-line); }
.ftx-card-foot small { display: block; color: var(--ftx-muted); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; }
.ftx-card-cta { display: inline-flex; align-items: center; gap: 4px; color: var(--ftx-gold); font-size: 12px; font-weight: 800; }

/* ---------- 2) Kurulum sihirbazı ---------- */
.ftx-top { display: flex; align-items: center; gap: 12px; padding-right: 58px; }
.ftx-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ftx-crumb strong { display: block; font: 700 19px/1.05 var(--ftx-head); white-space: nowrap; }
.ftx-steps { display: flex; gap: 4px; margin: 0 0 0 auto; padding: 0; list-style: none; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-steps button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px !important; padding: 0 10px 0 5px; border: 1px solid transparent !important; border-radius: 99px !important; background: transparent !important; box-shadow: none !important; color: var(--ftx-dim) !important; font: 700 12px/1 var(--ftx-font) !important; cursor: pointer; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-steps button:disabled { cursor: default; opacity: 1 !important; }
.ftx-steps b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.07); font: 800 11px/1 var(--ftx-numf); }
.ftx-steps b .ftx-ic { width: 13px; height: 13px; }
.ftx-steps li.is-done button { color: #b8cbe0 !important; }
.ftx-steps li.is-done b { background: rgba(53,212,154,.2); color: #62f0b9; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-steps li.is-on button { border-color: rgba(245,199,106,.55) !important; background: var(--ftx-goldwash) !important; color: #ffe2a3 !important; }
.ftx-steps li.is-on b { background: var(--ftx-gold); color: #2a1a03; }
.ftx-wz-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 2px 6px; scrollbar-width: thin; scrollbar-color: #36506b transparent; animation: ftxFade .25s ease both; }
.ftx-bar { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 14px; border: 1px solid rgba(245,199,106,.28); border-radius: 14px; background: linear-gradient(90deg,rgba(245,199,106,.1),rgba(10,24,40,.95) 45%); box-shadow: 0 -6px 18px rgba(0,0,0,.2); }
.ftx-cost { display: grid; grid-template-columns: auto auto; column-gap: 12px; align-items: center; min-width: 0; margin-right: auto; }
.ftx-cost > span { grid-column: 1 / -1; color: var(--ftx-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.ftx-cost strong { display: inline-flex; align-items: center; gap: 10px; }
.ftx-cost strong em { font-style: normal; color: var(--ftx-muted); font-size: 12px; }
.ftx-cost strong em .ftx-amt { color: #bfe8ff; font-size: 13px; }
.ftx-cost small { color: var(--ftx-muted); font-size: 11px; }
.ftx-bar-actions { display: flex; gap: 7px; }
.ftx-formats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-format { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0 !important; height: 100%; padding: 14px !important; border: 1.5px solid var(--ftx-line2) !important; border-radius: 16px !important; background: linear-gradient(170deg,#15293f,#0b1929) !important; box-shadow: none !important; color: var(--ftx-text) !important; text-align: left; font: 500 12px/1.4 var(--ftx-font) !important; cursor: pointer; transition: transform .16s, border-color .16s; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-format:hover { transform: translateY(-2px); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-format.is-on { border-color: var(--ftx-gold) !important; background: radial-gradient(circle at 85% 0%,rgba(245,199,106,.22),transparent 60%), linear-gradient(170deg,#1b3148,#0d1d30) !important; box-shadow: 0 0 0 3px rgba(245,199,106,.15), 0 10px 24px rgba(0,0,0,.3) !important; }
.ftx-format strong { font: 700 18px/1.1 var(--ftx-head); }
.ftx-format small { color: var(--ftx-muted); font-size: 12px; line-height: 1.4; }
.ftx-format-ic { width: 36px !important; height: 36px !important; padding: 7px; border-radius: 11px; background: rgba(70,214,224,.12); color: var(--ftx-cyan); }
.ftx-format.is-on .ftx-format-ic { background: rgba(245,199,106,.18); color: var(--ftx-gold); }
.ftx-format-check { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--ftx-line2); color: transparent; }
.ftx-format.is-on .ftx-format-check { border-color: var(--ftx-gold); background: var(--ftx-gold); color: #2a1a03; }
.ftx-format-check .ftx-ic { width: 14px; height: 14px; stroke-width: 3; }
.ftx-diagram { display: flex; gap: 5px; align-items: center; margin-top: auto; padding-top: 6px; opacity: .85; }
.ftx-diagram i { width: 22px; height: 16px; border-radius: 4px; background: repeating-linear-gradient(180deg,rgba(255,255,255,.22) 0 2px,transparent 2px 5px); }
.ftx-diagram b { width: 26px; height: 22px; border: 2px solid rgba(245,199,106,.55); border-left: 0; border-radius: 0 5px 5px 0; }
.ftx-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px 18px; align-items: start; }
.ftx-span { grid-column: 1 / -1; }
.ftx-rule-cols { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 12px; margin-bottom: 10px; }
.ftx-rule-col { display: grid; gap: 12px; align-content: start; padding: 12px 14px; border: 1px solid var(--ftx-line); border-radius: 14px; background: rgba(255,255,255,.025); }
.ftx-rule-col > h4 { display: flex; align-items: center; gap: 7px; font-size: 16px; color: #dbe6f2; }
.ftx-rule-col > h4 .ftx-ic { color: var(--ftx-cyan); }
.ftx-pair { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.ftx-pair .ftx-stepper { grid-template-columns: 34px minmax(0,1fr) 34px; width: 100%; }
.ftx-formats { min-height: 100%; }
.ftx-diagram i { width: 26px; height: 20px; }
.ftx-prize-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 14px; }
.ftx-identity, .ftx-prizes-edit { display: grid; gap: 12px; align-content: start; }
.ftx-prize-rows { display: grid; gap: 6px; }
.ftx-prize-row { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: center; gap: 9px; }
.ftx-prize-row small { color: var(--ftx-muted); font-size: 11px; white-space: nowrap; }
.ftx-summary { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 12px; }
.ftx-sum-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; align-content: start; }
.ftx-sum-rules > div, .ftx-rules > div { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; row-gap: 1px; align-content: start; padding: 10px 11px; border: 1px solid var(--ftx-line); border-radius: 11px; background: rgba(255,255,255,.025); }
.ftx-sum-rules .ftx-ic, .ftx-rules .ftx-ic { grid-row: span 3; width: 20px; height: 20px; color: var(--ftx-gold); margin-top: 1px; }
.ftx-sum-rules span, .ftx-rules span { color: var(--ftx-muted); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.ftx-sum-rules strong, .ftx-rules strong { font-size: 13.5px; }
.ftx-sum-rules small, .ftx-rules small { color: var(--ftx-muted); font-size: 11px; line-height: 1.35; }
.ftx-bill { display: grid; gap: 7px; align-content: start; padding: 12px 14px; border: 1px solid rgba(245,199,106,.3); border-radius: 14px; background: linear-gradient(180deg,rgba(245,199,106,.08),rgba(8,20,34,.6)); }
.ftx-bill > h4 { font-size: 15px; color: #ffe2a3; }
.ftx-bill-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; color: #c3d1e1; font-size: 12.5px; }
.ftx-bill-total { display: flex; justify-content: space-between; align-items: center; margin-top: 3px; padding-top: 9px; border-top: 1px dashed rgba(245,199,106,.35); font-weight: 800; }
.ftx-balance { display: flex; align-items: center; gap: 12px; margin-top: 4px; padding: 7px 9px; border-radius: 8px; background: rgba(0,0,0,.22); color: var(--ftx-muted); font-size: 11px; }
.ftx-balance span { margin-right: auto; }

/* ---------- 3) Turnuva ekranı ---------- */
.ftx-hero { position: relative; display: flex; align-items: center; gap: 11px; min-height: 64px; padding: 8px 58px 8px 8px; border: 1px solid rgba(245,199,106,.28); border-radius: 14px; background: radial-gradient(circle at 70% -40%,rgba(245,199,106,.2),transparent 50%), linear-gradient(110deg,#142a42,#0b1b2d 65%); overflow: hidden; }
.ftx-hero::after { content: ""; position: absolute; right: 60px; top: -70px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(245,199,106,.12); box-shadow: 0 0 0 26px rgba(245,199,106,.03); pointer-events: none; }
.ftx-crest { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(145deg,#ffe0a0,#c98a2e); color: #2a1a03; box-shadow: 0 6px 16px rgba(201,138,46,.3); }
.ftx-crest .ftx-ic { width: 24px; height: 24px; stroke-width: 2.1; }
.ftx-detail.is-completed .ftx-crest, .ftx-detail.is-archived .ftx-crest { animation: ftxGlow 2.6s ease-in-out infinite; }
.ftx-hero-id { min-width: 0; flex: 1; display: grid; gap: 3px; }
.ftx-hero-meta { display: flex; align-items: center; gap: 7px; }
.ftx-meta-ic { color: var(--ftx-muted); display: inline-flex; }
.ftx-hero-id h3 { font-size: 21px !important; line-height: 1.05; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftx-hero-id p { display: flex; align-items: center; gap: 5px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.ftx-champ { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: linear-gradient(90deg,rgba(245,199,106,.3),rgba(245,199,106,.08)); color: #ffe6ad; font-weight: 800; }
.ftx-hero-prize { position: relative; z-index: 1; display: grid; justify-items: end; gap: 4px; padding: 0 6px; }
.ftx-hero-prize small { color: #d6bf8e; font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.ftx-hero-actions { position: relative; z-index: 1; display: flex; gap: 6px; }
.ftx-detail-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 10px; }
.ftx-tabs { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow-y: auto; padding: 6px; border: 1px solid var(--ftx-line); border-radius: 14px; background: rgba(6,16,28,.55); scrollbar-width: none; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-tabs > button { position: relative; display: flex; align-items: center; gap: 8px; flex: none; min-height: 42px !important; padding: 0 10px; border: 1px solid transparent !important; border-radius: 10px !important; background: transparent !important; box-shadow: none !important; color: #9fb3c9 !important; font: 700 13px/1.1 var(--ftx-font) !important; text-align: left; cursor: pointer; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-tabs > button:hover { background: rgba(255,255,255,.04) !important; color: #dce7f3 !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-tabs > button.is-on { border-color: rgba(245,199,106,.45) !important; background: linear-gradient(90deg,rgba(245,199,106,.2),rgba(245,199,106,.05)) !important; color: #ffe2a3 !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-tabs > button.is-on::before { content: ""; position: absolute; left: -7px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ftx-gold); }
.ftx-tabs > button .ftx-ic { width: 18px; height: 18px; }
.ftx-tabs > button > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftx-dot { width: 8px; height: 8px; margin-left: auto; border-radius: 50%; background: var(--ftx-green); box-shadow: 0 0 0 3px rgba(53,212,154,.2); animation: ftxPulse 1.6s ease-in-out infinite; }
.ftx-tabs-foot { margin-top: auto; padding-top: 6px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-tabs-foot .ftx-btn { width: 100%; }
.ftx-pane { min-width: 0; min-height: 0; overflow-y: auto; padding: 0 3px 10px 0; scrollbar-width: thin; scrollbar-color: #36506b transparent; animation: ftxFade .22s ease both; }
.ftx-pane > .ftx-blocks { grid-template-columns: minmax(0,1fr); }
@media (min-width: 1100px) and (min-height: 601px) {
  .ftx-pane > .ftx-blocks.is-split { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ftx-pane > .ftx-blocks.is-split > .is-accent, .ftx-pane > .ftx-blocks.is-split > .ftx-manage { grid-column: 1 / -1; }
}
.ftx-rules { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
.ftx-podium { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ftx-podium li { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; background: rgba(255,255,255,.03); }
.ftx-podium li small { margin-left: auto; color: var(--ftx-muted); font-size: 11px; }
.ftx-manage > summary { list-style: none; cursor: pointer; }
.ftx-manage > summary::-webkit-details-marker { display: none; }
.ftx-manage > summary h4 { display: flex; align-items: center; gap: 7px; font-size: 16px; }
.ftx-manage > summary h4::after { content: "›"; margin-left: auto; color: var(--ftx-muted); font-size: 20px; transition: transform .2s; }
.ftx-manage[open] > summary h4::after { transform: rotate(90deg); }
.ftx-manage > summary .ftx-ic { color: var(--ftx-gold); }
.ftx-edit-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }

/* Kadro */
.ftx-people { display: flex; flex-wrap: wrap; gap: 6px; }
.ftx-person { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 4px; border: 1px solid var(--ftx-line); border-radius: 99px; background: rgba(255,255,255,.035); font-size: 12.5px; font-weight: 600; }
.ftx-person em { color: var(--ftx-gold); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ftx-person.is-me { border-color: rgba(245,199,106,.5); }
.ftx-person.is-empty { padding: 8px 12px; border-style: dashed; color: var(--ftx-dim); background: none; }
.ftx-teams { display: grid; grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); gap: 8px; }
.ftx-team { display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px; border: 1px solid var(--ftx-line); border-radius: 12px; background: rgba(255,255,255,.03); }
.ftx-team.is-me { border-color: rgba(245,199,106,.5); background: var(--ftx-goldwash); }
.ftx-team strong { display: block; font-size: 14px; }
.ftx-team small { color: var(--ftx-cyan); font-size: 11px; font-weight: 700; }
.ftx-team ul { margin: 4px 0 0; padding: 0; list-style: none; color: #b7c7d9; font-size: 12px; line-height: 1.5; }
.ftx-builder { display: grid; gap: 9px; }
.ftx-builder-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ftx-builder-head h4 { font-size: 17px; }
.ftx-status-line { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; font-weight: 600; }
.ftx-status-line.is-ok { background: rgba(53,212,154,.1); color: #7cf2c4; }
.ftx-status-line.is-warn { background: rgba(255,181,71,.1); color: #ffd08a; }
.ftx-status-line.is-wait { background: rgba(70,214,224,.08); color: #9fe9ef; }
.ftx-pool { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px; border: 1.5px dashed var(--ftx-line2); border-radius: 12px; background: rgba(0,0,0,.15); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx button.ftx-pool.is-drop { justify-content: center; width: 100%; min-height: 40px !important; color: var(--ftx-muted) !important; background: rgba(0,0,0,.15) !important; border: 1.5px dashed var(--ftx-line2) !important; box-shadow: none !important; font: 700 12px/1 var(--ftx-font) !important; }
.ftx-builder.is-picking .ftx-pool { border-color: rgba(245,199,106,.5); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-chip-player { display: inline-flex; align-items: center; gap: 7px; min-height: 34px !important; padding: 0 11px 0 4px; border: 1px solid var(--ftx-line2) !important; border-radius: 99px !important; background: #132840 !important; box-shadow: none !important; color: var(--ftx-text) !important; font: 600 12.5px/1 var(--ftx-font) !important; cursor: pointer; max-width: 100%; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-chip-player span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-chip-player.is-me { border-color: rgba(245,199,106,.45) !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-chip-player.is-picked { border-color: var(--ftx-gold) !important; background: linear-gradient(180deg,#5b4516,#3a2c0f) !important; box-shadow: 0 0 0 3px rgba(245,199,106,.25) !important; transform: translateY(-1px); }
.ftx-slots-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 8px; }
.ftx-slots-grid.is-solo { grid-template-columns: repeat(auto-fill,minmax(170px,1fr)); }
.ftx-slot { display: grid; gap: 8px; align-content: start; padding: 9px; border: 1px solid var(--ftx-line); border-radius: 12px; background: rgba(255,255,255,.03); cursor: pointer; transition: border-color .15s, background .15s; }
.ftx-builder.is-picking .ftx-slot:not(.is-full) { border-color: rgba(245,199,106,.45); background: rgba(245,199,106,.05); }
.ftx-slot-head { display: flex; align-items: center; gap: 7px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-slot-head input { min-height: 34px !important; padding: 0 9px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-slot-head select { width: auto; min-height: 34px !important; padding: 0 6px; }
.ftx-slot-head strong { font-size: 13px; }
.ftx-slot-body { display: flex; flex-wrap: wrap; gap: 5px; }
.ftx-slot-empty { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1.5px dashed var(--ftx-line2); border-radius: 99px; color: var(--ftx-dim); }
.ftx-slot-empty .ftx-ic { width: 14px; height: 14px; }

/* Fikstür */
.ftx-fixture { display: grid; gap: 10px; }
.ftx-progress { display: flex; align-items: center; gap: 10px; color: #c3d1e1; font-size: 12px; font-weight: 700; }
.ftx-progress .ftx-fill-bar { height: 7px; }
.ftx-progress .ftx-fill-bar i { background: linear-gradient(90deg,#c98a2e,#f5c76a); }
.ftx-spotlight { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(245,199,106,.45); border-radius: 14px; background: radial-gradient(circle at 50% -30%,rgba(245,199,106,.22),transparent 60%), linear-gradient(180deg,#172f49,#0d1d30); box-shadow: 0 10px 26px rgba(0,0,0,.28); }
.ftx-spotlight .ftx-match { border-color: transparent; background: rgba(0,0,0,.2); }
.ftx-spotlight .ftx-side b { font-size: 15px; }
.ftx-spotlight .ftx-score { font-size: 22px; }
.ftx-stage { display: grid; gap: 6px; }
.ftx-stage > h5 { color: #a6b8cc; font-size: 12px; font-family: var(--ftx-font) !important; font-weight: 800; letter-spacing: .12em !important; text-transform: uppercase; }
.ftx-match { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--ftx-line); border-radius: 11px; background: rgba(255,255,255,.028); }
.ftx-match.is-mine { border-color: rgba(245,199,106,.35); }
.ftx-match.is-locked { opacity: .62; }
.ftx-match.is-open { border-color: rgba(53,212,154,.45); box-shadow: inset 3px 0 0 var(--ftx-green); }
.ftx-vs { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 10px; }
.ftx-side { display: flex; align-items: center; gap: 8px; min-width: 0; color: #d7e3f0; }
.ftx-side.is-away { justify-content: flex-end; text-align: right; }
.ftx-side b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; }
.ftx-side.is-win b { color: #fff; }
.ftx-side.is-win .ftx-badge { box-shadow: 0 0 0 2px var(--ftx-gold), 0 3px 8px rgba(0,0,0,.3); }
.ftx-score { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-width: 64px; padding: 4px 10px; border-radius: 8px; background: rgba(0,0,0,.28); color: #fff; font-size: 17px; font-weight: 900; }
.ftx-score i { color: var(--ftx-dim); font-style: normal; }
.ftx-score .ftx-ic { color: var(--ftx-dim); width: 16px; height: 16px; }
.ftx-match-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; color: var(--ftx-dim); font-size: 11px; font-weight: 600; }
.ftx-mstatus { color: #a8bad0; }
.ftx-mstatus.is-open { color: #62f0b9; }
.ftx-mstatus.is-starting { color: var(--ftx-cyan); }
.ftx-mstatus.is-completed { color: #c7d4e3; }
.ftx-mstatus.is-forfeit { padding: 2px 7px; border-radius: 5px; background: rgba(255,107,125,.14); color: #ff9aa6; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 10px; }
.ftx-match-actions { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: auto; }
.ftx-forfeit { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; color: #ffb3bd; font-weight: 700; }
.ftx-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 4px; color: var(--ftx-muted); }

/* Tablo ve ağaç */
.ftx-legend { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; color: var(--ftx-muted); font: 600 11px/1 var(--ftx-font); letter-spacing: 0; text-transform: none; }
.ftx-legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--ftx-green); }
.ftx-table-wrap { overflow-x: auto; }
.ftx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ftx-table th { padding: 6px 7px; border-bottom: 1px solid var(--ftx-line2); color: var(--ftx-muted); font: 800 10.5px/1 var(--ftx-font); letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.ftx-table td { padding: 7px; border-bottom: 1px solid var(--ftx-line); text-align: center; font-family: var(--ftx-numf); }
.ftx-table .is-left { text-align: left; font-family: var(--ftx-font); }
.ftx-table tr.is-q td:first-child { box-shadow: inset 3px 0 0 var(--ftx-green); color: #62f0b9; font-weight: 800; }
.ftx-table tr.is-me td { background: rgba(245,199,106,.07); }
.ftx-table td strong { color: #fff; font-size: 14px; }
.ftx-cell-team { display: inline-flex; align-items: center; gap: 7px; }
.ftx-bracket { display: flex; gap: 24px; overflow-x: auto; padding: 4px 2px 8px; scrollbar-width: thin; scrollbar-color: #36506b transparent; }
.ftx-round { display: flex; flex-direction: column; flex: none; width: 200px; }
.ftx-round > h5 { margin-bottom: 8px !important; color: var(--ftx-gold); font-size: 12px; font-family: var(--ftx-font) !important; font-weight: 800; letter-spacing: .12em !important; text-transform: uppercase; }
.ftx-round-body { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.ftx-tie { position: relative; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--ftx-line2); border-radius: 10px; background: #0f2034; }
.ftx-round:not(.is-champion):not(.is-third):not(:last-child) .ftx-tie::after { content: ""; position: absolute; right: -25px; top: 50%; width: 24px; border-top: 1.5px solid rgba(140,175,215,.3); }
.ftx-tie.is-bye { border-style: dashed; }
.ftx-tie > small { padding: 2px 4px 0; color: var(--ftx-dim); font-size: 10.5px; }
.ftx-tie-side { display: flex; align-items: center; gap: 7px; padding: 4px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: #c9d6e5; }
.ftx-tie-side > span:not(.ftx-badge) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftx-tie-side b { min-width: 18px; text-align: right; font-weight: 900; color: #fff; }
.ftx-tie-side.is-win { background: linear-gradient(90deg,rgba(245,199,106,.18),transparent); color: #fff; }
.ftx-tie-side.is-out { opacity: .5; }
.ftx-champion-card { display: grid; justify-items: center; gap: 6px; padding: 14px 10px; border: 1px solid rgba(245,199,106,.55); border-radius: 14px; background: radial-gradient(circle at 50% 0%,rgba(245,199,106,.3),transparent 70%), #15283d; text-align: center; }
.ftx-champion-card > .ftx-ic { width: 30px; height: 30px; color: var(--ftx-gold); animation: ftxGlow 2.6s ease-in-out infinite; }
.ftx-champion-card strong { font-size: 14px; }
.ftx-ranking { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.ftx-ranking li { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: 10px; background: rgba(255,255,255,.03); }
.ftx-ranking li strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftx-ranking li.is-p1 { background: linear-gradient(90deg,rgba(245,199,106,.2),rgba(245,199,106,.03)); }

/* İstatistik */
.ftx-leaders { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.ftx-leader { display: grid; grid-template-columns: auto 1fr; column-gap: 9px; align-items: center; padding: 11px 12px; border: 1px solid var(--ftx-line); border-radius: 12px; background: linear-gradient(160deg,rgba(245,199,106,.1),rgba(12,25,41,.7) 60%); }
.ftx-leader-ic { grid-row: span 3; width: 30px !important; height: 30px !important; padding: 5px; border-radius: 9px; background: rgba(245,199,106,.16); color: var(--ftx-gold); }
.ftx-leader span { color: var(--ftx-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ftx-leader strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ftx-leader b { color: var(--ftx-gold); font-size: 18px; font-weight: 900; }
.ftx-leader b small { margin-left: 4px; color: var(--ftx-muted); font-size: 11px; font-weight: 600; }

/* Ödeme penceresi */
.ftx-sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 8px; }
.ftx-sheet-backdrop { position: absolute; inset: 0; border-radius: 14px; background: rgba(3,9,17,.72); backdrop-filter: blur(3px); animation: ftxFade .2s ease both; }
.ftx-sheet-panel { position: relative; display: grid; gap: 10px; width: min(720px,100%); max-height: 100%; overflow-y: auto; padding: 14px 16px; border: 1px solid rgba(245,199,106,.4); border-radius: 18px; background: linear-gradient(180deg,#16304b,#0b1a2c); box-shadow: 0 24px 60px rgba(0,0,0,.55); animation: ftxSheet .28s cubic-bezier(.2,.8,.2,1) both; }
.ftx-sheet-panel > header { display: flex; align-items: flex-start; justify-content: space-between; }
.ftx-sheet-panel > header h4 { font-size: 20px; }
.ftx-sheet-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: 12px; }
.ftx-paymix { display: grid; gap: 9px; align-content: start; }
.ftx-range { display: flex; align-items: center; gap: 12px; }
.ftx-range input { flex: 1; accent-color: #3fb5ff; height: 28px; }
.ftx-range output { min-width: 44px; padding: 6px 8px; border-radius: 8px; background: rgba(63,181,255,.14); color: #bfe8ff; font-size: 18px; font-weight: 900; text-align: center; }
.ftx-pay-result { display: grid; gap: 3px; padding: 9px 11px; border-radius: 10px; background: rgba(0,0,0,.25); }
.ftx-pay-result > span { color: var(--ftx-muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.ftx-pay-result strong { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.ftx-pay-result strong i { color: var(--ftx-dim); font-style: normal; }
.ftx-pay-result small { color: #9fe9ef; font-size: 11.5px; }

/* ---------- 4) Odaya Katıl › Turnuvalar ---------- */
.ftx.ftx-browse { display: grid; gap: 10px; align-content: start; max-height: min(72vh, 730px); overflow-y: auto; padding: 2px 6px 16px; }
.ftx.ftx-browse.hidden { display: none !important; }
.ftx-browse-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ftx-browse-head > div { margin-right: auto; }
.ftx-browse-head strong { display: block; font: 700 18px/1.1 var(--ftx-head); }
.ftx-browse-head form { flex: 0 1 320px; }
.ftx-cards.is-wrap { overflow: visible; }

/* ---------- ftui2b: logolar, avatarlar, sohbet, davet ---------- */
.ftx-logo { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); }
.ftx-logo svg { width: 100%; height: 100%; display: block; }
.ftx-logo.is-sm { width: 28px; height: 28px; }
.ftx-logo.is-xs { width: 22px; height: 22px; }
.ftx-logo.is-lg { width: 46px; height: 46px; }
.ftx-logo.is-xl { width: 64px; height: 64px; }
.ftx-badge.is-lg { width: 44px; height: 44px; border-radius: 13px; font-size: 15px; }
.ftx-badge.is-xl { width: 60px; height: 60px; border-radius: 17px; font-size: 20px; }
.ftx-ava { --s: 34px; position: relative; display: inline-grid; place-items: center; flex: none; width: var(--s); height: var(--s); }
.ftx-ava.is-xs { --s: 20px; } .ftx-ava.is-sm { --s: 26px; } .ftx-ava.is-md { --s: 38px; } .ftx-ava.is-lg { --s: 44px; }
.ftx .ftx-ava .friend-avatar, .ftx-invite-card .ftx-ava .friend-avatar { display: grid; place-items: center; width: var(--s) !important; height: var(--s) !important; min-width: 0 !important; margin: 0 !important; border-radius: 50%; background-color: #1d3452; background-size: cover; background-position: center; color: #fff; font: 800 calc(var(--s) * .42)/1 var(--ftx-numf, "Outfit", sans-serif); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.18); overflow: visible; }
.ftx-ava .avatar-frame-svg-overlay { pointer-events: none; }
/* Görsel çerçeve avatarın ~2 katı büyüklükte çizilir; fotoğrafı küçültüp çerçeveyi kutuya sığdır (isim üstüne taşmasın). */
.ftx .ftx-ava:has(.avatar-frame-svg-overlay) .friend-avatar, .ftx-invite-card .ftx-ava:has(.avatar-frame-svg-overlay) .friend-avatar { width: calc(var(--s) * .6) !important; height: calc(var(--s) * .6) !important; font-size: calc(var(--s) * .26); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-logo-btn { position: relative; display: inline-grid; place-items: center; width: 40px; min-height: 40px !important; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; cursor: pointer; }
.ftx-logo-btn i { position: absolute; right: -4px; bottom: -3px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ftx-gold); color: #2a1a03; }
.ftx-logo-btn i .ftx-ic { width: 11px; height: 11px; stroke-width: 2.4; }

.ftx-players { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 7px; }
.ftx-players.is-compact { grid-template-columns: repeat(auto-fill,minmax(190px,1fr)); }
.ftx-player { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 8px 8px 10px; border: 1px solid var(--ftx-line); border-radius: 12px; background: rgba(255,255,255,.03); }
.ftx-player.is-me { border-color: rgba(245,199,106,.5); background: var(--ftx-goldwash); }
.ftx-player.is-empty { justify-content: flex-start; color: var(--ftx-dim); border-style: dashed; background: none; }
.ftx-player-id { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ftx-player-id strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; }
.ftx-player-id em { color: var(--ftx-gold); font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ftx-player-id small { color: var(--ftx-cyan); font-size: 11px; font-weight: 700; }
.ftx-teams { grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); }
.ftx-team { display: grid; gap: 8px; align-items: stretch; }
.ftx-team > header { display: flex; align-items: center; gap: 10px; }
.ftx-team > header > div { flex: 1; min-width: 0; }
.ftx-team > header strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 17px/1.1 var(--ftx-head); }

.ftx-chat { display: flex; flex-direction: column; gap: 8px; height: 100%; min-height: 220px; }
.ftx-pane:has(.ftx-chat) { display: flex; flex-direction: column; overflow: hidden; }
.ftx-pane:has(.ftx-chat) > .ftx-chat { flex: 1; min-height: 0; }
.ftx-chat-log { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 1px solid var(--ftx-line); border-radius: 12px; background: rgba(4,12,22,.45); scrollbar-width: thin; scrollbar-color: #36506b transparent; }
.ftx-chat-day { align-self: center; margin: 4px 0; padding: 3px 10px; border-radius: 99px; background: rgba(255,255,255,.06); color: var(--ftx-muted); font-size: 10.5px; font-weight: 700; }
.ftx-msg { display: flex; align-items: flex-end; gap: 7px; max-width: 86%; animation: ftxRise .2s ease both; }
.ftx-msg.is-me { align-self: flex-end; flex-direction: row-reverse; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-msg-ava { min-height: 0 !important; padding: 0; border: 0 !important; background: none !important; box-shadow: none !important; cursor: pointer; }
.ftx-bubble { display: grid; gap: 2px; padding: 7px 10px 5px; border: 1px solid var(--ftx-line); border-radius: 14px 14px 14px 4px; background: #13263c; }
.ftx-msg.is-me .ftx-bubble { border-color: rgba(245,199,106,.4); border-radius: 14px 14px 4px 14px; background: linear-gradient(180deg,#3a2e12,#2a220f); }
.ftx-msg.is-host .ftx-bubble { border-color: rgba(70,214,224,.35); }
.ftx-bubble b { display: flex; align-items: center; gap: 5px; color: #9fd9ff; font-size: 11.5px; }
.ftx-bubble b em { color: var(--ftx-gold); font-size: 9px; font-style: normal; letter-spacing: .08em; text-transform: uppercase; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-bubble p { margin: 0; color: #eef4ff !important; font-size: 13px; line-height: 1.35; overflow-wrap: anywhere; }
.ftx-bubble time { justify-self: end; color: var(--ftx-dim); font: 600 9.5px/1 var(--ftx-numf); }
.ftx-bubble[data-ft] { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.ftx-msg.is-selected .ftx-bubble { border-color: var(--ftx-gold); box-shadow: 0 0 0 3px rgba(245,199,106,.22); }
.ftx-bubble.is-gone { background: rgba(255,255,255,.03) !important; border-style: dashed; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-bubble p.ftx-msg-gone { display: flex; align-items: center; gap: 5px; color: var(--ftx-muted) !important; font-style: italic; font-size: 12px; }
.ftx-msg-gone .ftx-ic { width: 13px; height: 13px; }
.ftx-quote { display: grid; gap: 1px; margin-bottom: 3px; padding: 4px 8px; border-left: 3px solid var(--ftx-cyan); border-radius: 6px; background: rgba(0,0,0,.22); color: #b9c9db; font-size: 11.5px; line-height: 1.3; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftx-quote b { color: #9fe9ef; font-size: 10.5px; }
.ftx-bubble time i { font-style: normal; color: var(--ftx-muted); }
.ftx-msg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; padding: 6px 8px; border: 1px solid rgba(245,199,106,.4); border-radius: 12px; background: linear-gradient(90deg,rgba(245,199,106,.12),rgba(10,24,40,.9)); animation: ftxRise .16s ease both; }
.ftx-msg-actions-who { margin-right: auto; color: #ffe2a3; font-size: 12px; font-weight: 800; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ftx-compose-bar { display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 10px; border-left: 3px solid var(--ftx-cyan); border-radius: 8px; background: rgba(70,214,224,.08); }
.ftx-compose-bar.is-edit { border-left-color: var(--ftx-gold); background: var(--ftx-goldwash); }
.ftx-compose-bar > .ftx-ic { color: var(--ftx-cyan); }
.ftx-compose-bar.is-edit > .ftx-ic { color: var(--ftx-gold); }
.ftx-compose-bar span { flex: 1; min-width: 0; display: grid; font-size: 11.5px; color: #b9c9db; overflow: hidden; }
.ftx-compose-bar span b { color: #fff; font-size: 11.5px; }
.ftx-chat-tip { color: var(--ftx-dim); font-size: 10.5px; text-align: center; }
.ftx-chat-form { display: flex; gap: 7px; }
.ftx-chat-form input { flex: 1; min-width: 0; }
.ftx-empty.is-flat { min-height: 140px; border: 0; background: none; }
.ftx-unread { min-width: 18px; margin-left: auto; padding: 2px 5px; border-radius: 99px; background: var(--ftx-red); color: #fff; font: 800 10px/1.2 var(--ftx-numf); text-align: center; }

.ftx-sheet-panel.is-narrow { width: min(520px,100%); }
.ftx-sheet-panel.is-team { width: min(760px,100%); }
.ftx-friend-head { display: flex; align-items: center; justify-content: space-between; color: var(--ftx-muted); font-size: 11.5px; font-weight: 700; }
.ftx-friends { display: grid; gap: 5px; max-height: 190px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.ftx-friend { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 11px; background: rgba(255,255,255,.03); }
.ftx-friend > div { flex: 1; min-width: 0; display: grid; }
.ftx-friend strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.ftx-friend small { color: var(--ftx-dim); font-size: 11px; }
.ftx-friend small.is-online { color: #62f0b9; }
.ftx-friend:not(.is-online) { opacity: .6; }
.ftx-tag { display: inline-flex; align-items: center; gap: 4px; padding: 5px 9px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--ftx-muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.ftx-tag .ftx-ic { width: 13px; height: 13px; }
.ftx-tag.is-ok { background: rgba(53,212,154,.12); color: #62f0b9; }
.ftx-tag.is-gold { background: var(--ftx-goldwash); color: #ffe2a3; }
.ftx-share-row { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 8px; border-top: 1px solid var(--ftx-line); }
.ftx-share-row .ftx-code { margin-right: auto; font-size: 14px; }
.ftx-state.is-inline { flex: none; padding: 16px; }
.ftx-team-preview { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.ftx-team-preview-id { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ftx-sheet-panel.is-team { display: flex; flex-direction: column; height: 100%; }
.ftx-sheet-panel.is-team > header { gap: 10px; }
.ftx-sheet-panel.is-team .ftx-logo-grid { flex: 1; min-height: 0; max-height: none; }
.ftx-logo-head { display: flex; align-items: center; gap: 10px; }
.ftx-logo-head small { color: var(--ftx-dim); font-size: 11px; margin-right: auto; }
.ftx-logo-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(54px,1fr)); gap: 6px; max-height: 200px; overflow-y: auto; padding: 2px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-logo-opt { display: grid; place-items: center; min-height: 54px !important; aspect-ratio: 1; padding: 6px; border: 1.5px solid transparent !important; border-radius: 12px !important; background: rgba(255,255,255,.04) !important; box-shadow: none !important; cursor: pointer; transition: transform .12s; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-logo-opt:hover { transform: scale(1.06); }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-logo-opt.is-on { border-color: var(--ftx-gold) !important; background: var(--ftx-goldwash) !important; box-shadow: 0 0 0 3px rgba(245,199,106,.18) !important; }
.ftx-logo-opt svg { width: 100%; height: 100%; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
.ftx-row-actions.is-end { justify-content: flex-end; }

/* Davet kartı: #flow dışında, her ekranda görünür */
.ftx-invite-card { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 100000; display: grid; gap: 9px; width: min(380px, calc(100vw - 24px)); padding: 12px 13px; border: 1px solid rgba(245,199,106,.5); border-radius: 16px; background: linear-gradient(170deg,#18314c,#0b1a2c); box-shadow: 0 18px 44px rgba(0,0,0,.55); animation: ftxSheet .3s cubic-bezier(.2,.8,.2,1) both; }
.ftx-invite-top { display: flex; align-items: center; gap: 10px; }
.ftx-invite-top > div { flex: 1; min-width: 0; }
.ftx-invite-top strong { display: block; font-size: 14px; }
.ftx-invite-body { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,.22); }
.ftx-invite-body b { display: block; font-size: 14px; }
.ftx-invite-body small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--ftx-muted); font-size: 11.5px; }
body .ftx-invite-card .ftx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px !important; padding: 0 14px; border: 1px solid var(--ftx-line2) !important; border-radius: 10px !important; background: #1d3550 !important; color: var(--ftx-text) !important; font: 700 13px/1 var(--ftx-font) !important; box-shadow: none !important; cursor: pointer; }
body .ftx-invite-card .ftx-btn.is-gold { border-color: #ffe0a0 !important; background: linear-gradient(180deg,#ffd98a,#e3a445 60%,#c98a2e) !important; color: #1a1406 !important; }
body .ftx-invite-card .ftx-btn.is-ghost { border-color: transparent !important; background: rgba(255,255,255,.05) !important; }
body .ftx-invite-card .ftx-btn.is-icon { width: 36px; padding: 0; }
body .ftx-invite-card .ftx-btn .ftx-ic { width: 16px; height: 16px; }

/* ---------- Animasyonlar ---------- */
@keyframes ftxSpin { to { transform: rotate(360deg); } }
@keyframes ftxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ftxRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ftxSheet { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes ftxPulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ftxGlow { 0%,100% { filter: drop-shadow(0 0 0 rgba(245,199,106,0)); } 50% { filter: drop-shadow(0 0 8px rgba(245,199,106,.65)); } }
.ftx-cards .ftx-card:nth-child(2) { animation-delay: .04s; } .ftx-cards .ftx-card:nth-child(3) { animation-delay: .08s; } .ftx-cards .ftx-card:nth-child(4) { animation-delay: .12s; }

/* ---------- Yerleşim uyarlamaları ---------- */
@media (max-width: 900px) {
  .ftx-formats { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .ftx-steps span { display: none; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-steps button { padding: 0 5px; }
  .ftx-edit-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

/* Yatay telefon: yükseklik ~375px — her şey tek ekrana sığacak şekilde sıkılaşır */
@media (orientation: landscape) and (max-height: 600px) {
  #flow #screenFriendTournament.friend-tournament-screen { width: calc(100vw - 16px) !important; height: calc(100dvh - 12px) !important; max-height: none !important; padding: 7px 9px !important; }
  .ftx { font-size: 12px; }
  .ftx-view { gap: 7px; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn { min-height: 36px !important; padding: 0 12px; font-size: 12.5px !important; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-icon { width: 36px; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-sm { min-height: 30px !important; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-icon.is-sm { width: 30px; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-btn.is-xl { min-height: 42px !important; font-size: 14px !important; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx input:not([type="checkbox"]):not([type="range"]), #flow :is(#screenFriendTournament, #screenSpectator) .ftx select { min-height: 38px !important; }
  .ftx-hub { grid-template-columns: 208px minmax(0,1fr); gap: 8px; }
  .ftx-rail { gap: 8px; padding: 9px; }
  .ftx-brand strong { font-size: 16px; }
  .ftx-brand-ic { width: 32px !important; height: 32px !important; padding: 6px; }
  .ftx-archive-meter { padding: 8px; gap: 6px; }
  .ftx-cards { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(250px,32%); overflow-x: auto; overflow-y: hidden; align-content: stretch; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .ftx-cards > * { scroll-snap-align: start; }
  .ftx-cards.is-wrap { grid-auto-flow: row; grid-template-columns: repeat(auto-fill,minmax(250px,1fr)); grid-auto-columns: auto; overflow: visible; }
  .ftx-card { gap: 7px; padding: 10px 11px; }
  .ftx-card-id h4 { font-size: 16px; }
  .ftx-top { gap: 8px; }
  .ftx-crumb strong { font-size: 17px; }
  .ftx-steps b { width: 22px; height: 22px; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-steps button { min-height: 30px !important; }
  .ftx-bar { padding: 6px 7px 6px 11px; gap: 8px; border-radius: 12px; }
  .ftx-amt.is-lg { font-size: 18px; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-format { padding: 11px !important; gap: 4px; }
  .ftx-format strong { font-size: 16px; }
  .ftx-format small { font-size: 11px; }
  .ftx-format-ic { width: 30px !important; height: 30px !important; padding: 6px; }
  .ftx-form-grid { gap: 10px 14px; }
  .ftx-field small { font-size: 10.5px; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-seg button { min-height: 32px !important; min-width: 40px; padding: 0 9px; font-size: 12px !important; }
  .ftx-stepper { grid-template-columns: 36px minmax(56px,auto) 36px; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-stepper .ftx-btn.is-icon { width: 36px; min-height: 32px !important; }
  .ftx-stepper output { font-size: 18px; min-width: 56px; }
  .ftx-rule-cols { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-bottom: 7px; }
  .ftx-rule-col { gap: 9px; padding: 9px 11px; }
  .ftx-hero { min-height: 54px; padding: 6px 56px 6px 6px; gap: 9px; border-radius: 12px; }
  .ftx-crest { width: 38px; height: 38px; border-radius: 11px; }
  .ftx-hero-id h3 { font-size: 18px !important; }
  .ftx-hero-prize small { font-size: 8.5px; }
  .ftx-detail-body { grid-template-columns: 132px minmax(0,1fr); gap: 8px; }
  .ftx-tabs { padding: 4px; gap: 2px; border-radius: 12px; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-tabs > button { min-height: 34px !important; padding: 0 8px; gap: 7px; font-size: 12px !important; }
  #flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-tabs > button.is-on::before { left: -5px; top: 8px; bottom: 8px; }
  .ftx-tabs > button .ftx-ic { width: 16px; height: 16px; }
  .ftx-block { padding: 10px 11px; gap: 8px; }
  .ftx-block > h4 { font-size: 15px; }
  .ftx-sheet-panel { padding: 10px 12px; gap: 8px; }
  .ftx-sheet-panel > header h4 { font-size: 17px; }
  .ftx-leaders { gap: 6px; }
  .ftx-leader { padding: 8px 9px; }
}

/* Dar dikey ekranlar (web mobil, dikey) */
@media (max-width: 640px) and (orientation: portrait) {
  .ftx-hub, .ftx-detail-body { grid-template-columns: 1fr; }
  .ftx-tabs { flex-direction: row; overflow-x: auto; }
  .ftx-tabs-foot { display: none; }
  .ftx-formats, .ftx-form-grid, .ftx-prize-layout, .ftx-summary, .ftx-sheet-grid, .ftx-rules, .ftx-leaders, .ftx-sum-rules { grid-template-columns: 1fr; }
  .ftx-hero { flex-wrap: wrap; }
  .ftx-steps span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ftx *, .ftx *::before, .ftx *::after { animation: none !important; transition: none !important; }
}

/* ftadmin-v1: kurucu etap açma başlığı */
.ftx-stage-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 32px; }
.ftx-stage-head > h5 { color: #a6b8cc; font-size: 12px; font-family: var(--ftx-font) !important; font-weight: 800; letter-spacing: .12em !important; text-transform: uppercase; margin: 0; }
.ftx-stage-head > .ftx-btn { margin-left: auto; }
.ftx-early { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px; border-radius: 5px; background: rgba(98,240,185,.12); color: #62f0b9; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ftx-early .ftx-ic { width: 12px; height: 12px; }

/* hub-v1: Turnuvalarım rayında Aktif / Arşivde sayaçları (sekme de değiştirir) */
.ftx-hub-stats { display: grid; gap: 6px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-hub-stat { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; width: 100%; min-height: 44px !important; padding: 0 12px; border: 1px solid var(--ftx-line2); border-radius: 11px; background: rgba(255,255,255,.035); color: #c7d6e8; font: 700 13px/1 var(--ftx-font) !important; text-align: left; cursor: pointer; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-hub-stat .ftx-ic { width: 18px; height: 18px; color: #8fa0b8; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-hub-stat b { font: 800 18px/1 var(--ftx-numf); color: #fff; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-hub-stat.is-on { border-color: rgba(245,199,106,.7) !important; background: var(--ftx-goldwash) !important; color: #ffe2a3 !important; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-hub-stat.is-on .ftx-ic { color: #f5c76a; }

/* hub-v2: Turnuvalarım — üstte ince yatay şerit, altta tam genişlik kart ızgarası (yan yana ≥3) */
.ftx-hub.is-bar { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ftx-hubbar { display: flex; align-items: center; gap: 10px; flex: none; min-height: 52px; padding: 6px 64px 6px 10px; border: 1px solid var(--ftx-line); border-radius: 14px; background: linear-gradient(180deg, rgba(21,41,63,.85), rgba(12,26,43,.9)); }
.ftx-hubbar .ftx-brand { flex: none; gap: 8px; }
.ftx-hubbar .ftx-brand strong { font-size: 16px; }
.ftx-hubbar .ftx-brand-ic { width: 32px !important; height: 32px !important; padding: 6px; }
.ftx-hubbar .ftx-hub-stats { display: flex; gap: 6px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-hubbar .ftx-hub-stat { width: auto; grid-template-columns: 18px auto auto; gap: 7px; min-height: 36px !important; padding: 0 12px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-hubbar .ftx-hub-stat b { font-size: 16px; }
.ftx-archive-mini { display: flex; align-items: center; gap: 8px; margin-left: auto; min-width: 0; color: #c2d1e2; font-size: 12px; font-weight: 700; }
.ftx-archive-mini-label { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.ftx-archive-mini-label .ftx-ic { width: 16px; height: 16px; }
.ftx-archive-mini strong { font-size: 16px; color: #fff; white-space: nowrap; }
.ftx-archive-mini strong small { color: var(--ftx-muted); font-size: 12px; }
.ftx-archive-mini .ftx-slots { flex-wrap: nowrap; }
.ftx-archive-mini .ftx-buy { display: flex; gap: 5px; }
#flow :is(#screenFriendTournament, #screenSpectator) .ftx .ftx-archive-mini .ftx-buy .ftx-btn { flex: none; min-height: 30px !important; padding: 0 9px; font-size: 12px !important; }
.ftx-hub.is-bar .ftx-hub-main { flex: 1; min-height: 0; }
.ftx-hub.is-bar .ftx-cards { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
/* Telefonda (≈834px) şerit geri düğmesine taşmasın: arşiv noktaları ve üst yazı şeritte gösterilmez. */
.ftx-hubbar .ftx-slots, .ftx-hubbar .ftx-brand .ftx-eyebrow { display: none; }
@media (max-width: 760px) { .ftx-archive-mini-label { display: none; } }