/* ─────────────────────────────────────────────────────────────────────────
   TURNIR REJIMI — uslublar

   Palitra QR studiyasi bilan bir xil: oq/och kulrang fon, navy matn,
   yumshoq ko'k urg'u. Emoji yoki stiker ISHLATILMAYDI — barcha belgilar
   SVG ikonka.

   ⚠ BRACKET alohida: u chop etiladigan afisha kabi TO'Q fonda chiziladi
   (reference `breket.jpg` shunday). Lekin rangi yashil neon emas —
   tizimning o'z ko'k urg'usi va navy grunti ishlatiladi.
   ───────────────────────────────────────────────────────────────────────── */

.trn {
    --t-bg:      #F4F6FA;
    --t-card:    #FFFFFF;
    --t-line:    #DDE2EC;
    --t-ink:     #131A2E;
    --t-ink2:    rgba(19,26,46,.62);
    --t-ink3:    rgba(19,26,46,.42);
    --t-acc:     #2F6BFF;
    --t-acc-sft: rgba(47,107,255,.10);
    --t-ok:      #0B7A5E;
    --t-warn:    #8A5200;
    --t-dng:     #C0293A;
    --t-ease:    cubic-bezier(.22,.61,.36,1);

    /* Bracket afishasi */
    --b-bg:      #0E1524;
    --b-panel:   #16203A;
    --b-line:    rgba(255,255,255,.10);
    --b-ink:     #EAF0FB;
    --b-dim:     rgba(234,240,251,.45);
    --b-acc:     #5B8CFF;

    color: var(--t-ink);
    font-family: 'Inter', -apple-system, 'Segoe UI', system-ui, sans-serif;
}

/* ── Sarlavha ── */
.trn-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.trn-back {
    display: inline-flex; align-items: center; gap: 7px;
    background: none; border: 1px solid var(--t-line); border-radius: 11px;
    padding: 8px 13px; font: inherit; font-size: 13px; font-weight: 600;
    color: var(--t-ink2); cursor: pointer; transition: .16s var(--t-ease);
}
.trn-back:hover { border-color: var(--t-acc); color: var(--t-acc); background: var(--t-acc-sft); }
.trn-back svg { width: 15px; height: 15px; }
.trn-title { font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.trn-sub   { font-size: 12.5px; color: var(--t-ink2); margin-top: 2px; }
.trn-spacer { flex: 1; }

/* ── Qadam ko'rsatkichi ── */
.trn-steps { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 22px; }
.trn-step {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 600; color: var(--t-ink3);
    padding: 6px 11px; border-radius: 999px; background: rgba(19,26,46,.04);
}
.trn-step .n {
    width: 19px; height: 19px; border-radius: 50%; display: grid; place-items: center;
    background: rgba(19,26,46,.09); color: var(--t-ink3);
    font-size: 11px; font-weight: 750;
}
.trn-step.on  { background: var(--t-acc-sft); color: var(--t-acc); }
.trn-step.on .n  { background: var(--t-acc); color: #fff; }
.trn-step.done { color: var(--t-ok); background: rgba(11,122,94,.08); }
.trn-step.done .n { background: var(--t-ok); color: #fff; }
.trn-step-sep { width: 14px; height: 1px; background: var(--t-line); }

/* ── Kartalar ── */
.trn-grid { display: grid; gap: 16px; }
.trn-grid.g2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.trn-grid.g3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.trn-card {
    background: var(--t-card); border: 1px solid var(--t-line); border-radius: 18px;
    padding: 20px; transition: .18s var(--t-ease);
}
.trn-card.click { cursor: pointer; }
.trn-card.click:hover {
    border-color: var(--t-acc); transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(19,26,46,.10);
}

/* ── Turnirni o'chirish tugmasi ──
   Kartaning burchagida, xotirjam kulrang. Faqat ustiga borilganda
   qizil bo'ladi — tasodifan ko'zga tashlanib, "bosishga chorlab"
   turmasin. */
.trn-del {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; flex: 0 0 28px; padding: 0;
    border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: var(--t-ink3);
    cursor: pointer; transition: .15s var(--t-ease);
}
.trn-card:hover .trn-del { border-color: var(--t-line); }
.trn-del:hover {
    background: rgba(192,41,58,.10); border-color: rgba(192,41,58,.35);
    color: var(--t-dng);
}
.trn-del:focus-visible { outline: 2px solid var(--t-dng); outline-offset: 2px; }
.trn-del svg { width: 15px; height: 15px; }

/* O'yin kartasi */
.game-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 20px; }
/* ⚠ Logo RASMI shu katakning ichida turadi va yumaloq burchakka
   qirqiladi (`overflow: hidden`). Rasm yuklanmasa `onerror` uni
   o'chiradi va ostidagi ikonka ko'rinib qoladi — katak hech qachon
   bo'sh chiqmaydi. */
.game-art {
    position: relative; overflow: hidden;
    width: 86px; height: 86px; border-radius: 22px; display: grid; place-items: center;
    background: linear-gradient(150deg, #1B2740, #0E1524);
    color: #fff; margin-bottom: 14px;
    transition: transform .18s var(--t-ease), box-shadow .18s var(--t-ease);
}
.game-art svg { width: 40px; height: 40px; }
.game-art img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.game-card:hover .game-art {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 10px 24px rgba(19,26,46,.20);
}

/* ── Bracket foni tanlash ──
   Har o'yinda ikki xil fon bor. Tugmachaning O'ZI shu fonning kichik
   ko'rinishi — admin nomni emas, RASMNI ko'rib tanlaydi. */
.art-bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 14px;
}
.art-lbl {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12px; font-weight: 650; color: var(--t-ink2); margin-right: 2px;
}
.art-opt {
    position: relative; width: 62px; height: 38px; padding: 0;
    border: 2px solid var(--t-line); border-radius: 10px; cursor: pointer;
    background: rgba(19,26,46,.06) center/cover no-repeat;
    transition: border-color .16s var(--t-ease), transform .16s var(--t-ease);
}
.art-opt:hover { transform: translateY(-1px); border-color: var(--t-ink3); }
.art-opt.on { border-color: var(--t-acc); box-shadow: 0 0 0 3px var(--t-acc-sft); }
/* Raqam rasm ustida ham o'qilsin — orqasida to'q yarim shaffof doira */
.art-opt span {
    position: absolute; left: 5px; top: 4px;
    min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
    display: grid; place-items: center;
    background: rgba(14,21,36,.72); color: #fff;
    font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.art-opt.on span { background: var(--t-acc); }
/* Rasm hali yuklanmagan bo'lsa yengil "kutish" ko'rinishi */
.art-opt:not(.ready) { opacity: .55; }
.game-card .nm { font-size: 17px; font-weight: 800; }
.game-card .ds { font-size: 12px; color: var(--t-ink2); margin-top: 3px; }

/* Katta tanlov kartasi */
.pick-card { display: flex; gap: 15px; align-items: flex-start; padding: 22px; }
.pick-ico {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 14px;
    display: grid; place-items: center; background: var(--t-acc-sft); color: var(--t-acc);
}
.pick-ico svg { width: 21px; height: 21px; }
.pick-card .t { font-size: 15.5px; font-weight: 750; }
.pick-card .s { font-size: 12.5px; color: var(--t-ink2); margin-top: 4px; line-height: 1.55; }

/* ── Forma ── */
.trn-field { margin-bottom: 15px; }
.trn-label { display: block; font-size: 12px; font-weight: 650; color: var(--t-ink2); margin-bottom: 6px; }
.trn-input, .trn-area, .trn-select {
    width: 100%; box-sizing: border-box; padding: 12px 14px;
    border: 1px solid var(--t-line); border-radius: 12px; background: var(--t-card);
    color: var(--t-ink); font: inherit; font-size: 15px; outline: none;
    transition: border-color .18s var(--t-ease), box-shadow .18s var(--t-ease);
    -webkit-appearance: none; appearance: none;
}
.trn-input:focus, .trn-area:focus, .trn-select:focus {
    border-color: var(--t-acc); box-shadow: 0 0 0 4px var(--t-acc-sft);
}
.trn-area { min-height: 90px; resize: vertical; line-height: 1.55; }
.trn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.trn-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 20px; border: 0; border-radius: 12px;
    background: var(--t-acc); color: #fff; font: inherit; font-size: 14px; font-weight: 650;
    cursor: pointer; transition: .16s var(--t-ease);
}
.trn-btn:hover:not(:disabled) { filter: brightness(1.06); }
.trn-btn:disabled { opacity: .45; cursor: default; }
.trn-btn svg { width: 16px; height: 16px; }
.trn-btn.ghost { background: transparent; border: 1px solid var(--t-line); color: var(--t-ink2); }
.trn-btn.ghost:hover:not(:disabled) { border-color: var(--t-acc); color: var(--t-acc); background: var(--t-acc-sft); }
.trn-btn.ok   { background: var(--t-ok); }
.trn-btn.dng  { background: var(--t-dng); }
.trn-btn.block { width: 100%; }
.trn-actions { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 20px; }

/* ── Jamoa kiritish ── */
.team-add { display: flex; gap: 10px; align-items: center; }
.team-add .trn-input { flex: 1; }
.team-prog {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 15px; font-weight: 750; color: var(--t-acc);
    padding: 10px 15px; border-radius: 12px; background: var(--t-acc-sft);
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
.team-prog.full { color: var(--t-ok); background: rgba(11,122,94,.10); }

.team-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.team-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 13px; border: 1px solid var(--t-line); border-radius: 12px; background: var(--t-card);
}
.team-seed {
    width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px; display: grid; place-items: center;
    background: rgba(19,26,46,.05); color: var(--t-ink2);
    font-size: 11.5px; font-weight: 750; font-variant-numeric: tabular-nums;
}
.team-logo {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 9px; overflow: hidden;
    display: grid; place-items: center; background: rgba(19,26,46,.05); color: var(--t-ink3);
}
.team-logo img { width: 100%; height: 100%; object-fit: cover; }
.team-logo svg { width: 15px; height: 15px; }
.team-name { flex: 1; font-size: 14px; font-weight: 650; min-width: 0;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-badge {
    font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
}
.team-badge.online { background: var(--t-acc-sft); color: var(--t-acc); }
.team-badge.manual { background: rgba(19,26,46,.05); color: var(--t-ink3); }
.team-x {
    background: none; border: 0; color: var(--t-ink3); cursor: pointer;
    padding: 5px; border-radius: 7px; display: flex;
}
.team-x:hover { background: rgba(192,41,58,.10); color: var(--t-dng); }
.team-x svg { width: 15px; height: 15px; }

/* ── Ro'yxat holatlari ── */
.trn-sec { font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
           text-transform: uppercase; color: var(--t-ink3); margin: 26px 0 12px; }
.trn-sec:first-child { margin-top: 0; }

.st-pill {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
}
.st-pill.live   { background: rgba(192,41,58,.10);  color: var(--t-dng); }
.st-pill.reg    { background: var(--t-acc-sft);     color: var(--t-acc); }
.st-pill.draft  { background: rgba(19,26,46,.05);   color: var(--t-ink3); }
.st-pill.done   { background: rgba(11,122,94,.10);  color: var(--t-ok); }
.st-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-pill.live .dot { animation: trnPulse 1.6s var(--t-ease) infinite; }
@keyframes trnPulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.trn-empty { text-align: center; padding: 46px 20px; color: var(--t-ink3); }
.trn-empty svg { width: 34px; height: 34px; margin-bottom: 10px; opacity: .5; }
.trn-empty .h { font-size: 15px; font-weight: 700; color: var(--t-ink2); }
.trn-empty .p { font-size: 12.5px; margin-top: 4px; }

/* ═════════════════════════════════════════════════════════════════════
   BRACKET — afisha ko'rinishi (reference: breket.jpg)
   ═════════════════════════════════════════════════════════════════════ */
.bracket-wrap {
    position: relative;
    background: var(--b-bg); border-radius: 20px; padding: 30px 26px 26px;
    color: var(--b-ink);
    /* ⚠ Scroll BU YERDA EMAS, `.bracket` da (pastga qarang).
       Sabab: fon rasmi shu qutining ichida absolyut joylashadi va
       agar scroll shu yerda bo'lsa, rasm kontent bilan birga surilib,
       o'ngga scroll qilinganda fon TUGAB qolardi. Endi ramka qimirlamaydi,
       faqat ustunlar qatori suriladi. */

    /* ── O'YIN FONI ──
       Rasm `--b-art` o'zgaruvchisi orqali beriladi (JS `style` da
       qo'yadi). Rasm bo'lmasa faqat nozik gradient qoladi va
       bracket baribir chiroyli ko'rinadi. */
    background-image:
        radial-gradient(900px 340px at 50% -8%, rgba(91,140,255,.13), transparent 62%),
        radial-gradient(600px 300px at 100% 100%, rgba(91,140,255,.06), transparent 60%);
    background-repeat: no-repeat;
}
/* ── FON RASMI ASOSIY QATLAM ──
   ⚠ Ilgari rasm .16 shaffoflikda edi va ustidan quyuq parda tushardi —
   natijada RASM DEYARLI KO'RINMASDI, faqat to'q navy fon qolardi.
   Endi rasm to'liq ko'rinadi; o'qilishini esa parda emas,
   KATAKCHALARNING O'ZI ta'minlaydi (pastga qarang). */
.bracket-wrap.has-art::before {
    content: ''; position: absolute; inset: 0; border-radius: 20px;
    background-image: var(--b-art);
    background-size: cover; background-position: center;
    opacity: 1; pointer-events: none;
}
/* Juda yengil parda — rasm och bo'lsa ham oq matn yo'qolmasin.
   Ilgarigidek quyuq emas: rasm ko'rinib turadi. */
.bracket-wrap.has-art::after {
    content: ''; position: absolute; inset: 0; border-radius: 20px;
    background: linear-gradient(180deg, rgba(14,21,36,.34), rgba(14,21,36,.52));
    pointer-events: none;
}
.bracket-wrap.has-art > * { position: relative; z-index: 1; }

/* ── KATAKCHALAR RASM USTIDA "O'TIRADI" ──
   Fon rasmi bor bo'lsa katakcha to'liq to'q emas, SHAFFOF shisha:
   orqasidagi rasm ko'rinib turadi, lekin blur va to'qlashtirish
   tufayli jamoa nomi har qanday rasmda o'qiladi. */
.bracket-wrap.has-art .br-match {
    background: rgba(11,17,30,.58);
    border-color: rgba(255,255,255,.16);
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    box-shadow: 0 8px 24px rgba(0,0,0,.38);
}
.bracket-wrap.has-art .br-match.done { border-color: rgba(91,140,255,.42); }
.bracket-wrap.has-art .br-side.win   { background: rgba(91,140,255,.26); }
.bracket-wrap.has-art .br-side       { text-shadow: 0 1px 3px rgba(0,0,0,.55); }
.bracket-wrap.has-art .br-side.lose  { color: rgba(234,240,251,.62); }
.bracket-wrap.has-art .br-seed {
    background: rgba(0,0,0,.34); color: rgba(255,255,255,.72);
}
.bracket-wrap.has-art .br-score-in {
    background: rgba(0,0,0,.34); border-color: rgba(255,255,255,.22);
}
/* Bosqich sarlavhasi va sana ham rasm ustida o'qilsin */
.bracket-wrap.has-art .br-round-h,
.bracket-wrap.has-art .br-round-s,
.bracket-wrap.has-art .bracket-club,
.bracket-wrap.has-art .bracket-title,
.bracket-wrap.has-art .bracket-word,
.bracket-wrap.has-art .bracket-name,
.bracket-wrap.has-art .bracket-foot { text-shadow: 0 2px 8px rgba(0,0,0,.62); }
/* Chempion katagi ham shisha */
.bracket-wrap.has-art .br-champ {
    background: linear-gradient(160deg, rgba(91,140,255,.32), rgba(11,17,30,.62));
    border-color: rgba(91,140,255,.46);
    backdrop-filter: blur(10px) saturate(125%);
    -webkit-backdrop-filter: blur(10px) saturate(125%);
    box-shadow: 0 10px 30px rgba(0,0,0,.42);
}
.bracket-wrap.has-art .br-champ .n,
.bracket-wrap.has-art .br-champ .l { text-shadow: 0 2px 8px rgba(0,0,0,.62); }

/* ⚠ `backdrop-filter` ni qo'llab-quvvatlamaydigan brauzerda shaffof
   katakcha o'qilmay qolishi mumkin — o'sha holda to'qroq fon beriladi. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .bracket-wrap.has-art .br-match { background: rgba(11,17,30,.86); }
    .bracket-wrap.has-art .br-champ { background: rgba(11,17,30,.88); }
}

/* Scroll chizig'i — to'q fonda ko'rinsin */
.bracket::-webkit-scrollbar { height: 9px; }
.bracket::-webkit-scrollbar-track { background: rgba(255,255,255,.05); border-radius: 999px; }
.bracket::-webkit-scrollbar-thumb { background: rgba(91,140,255,.45); border-radius: 999px; }
.bracket::-webkit-scrollbar-thumb:hover { background: rgba(91,140,255,.65); }
.bracket-head { text-align: center; margin-bottom: 30px; }
.bracket-club {
    font-size: 12px; font-weight: 700; letter-spacing: .38em;
    color: var(--b-acc); text-transform: uppercase; margin-bottom: 8px;
}
.bracket-title {
    font-size: clamp(26px, 4vw, 44px); font-weight: 900; letter-spacing: -.02em;
    text-transform: uppercase; line-height: 1;
}
.bracket-word {
    font-size: 12px; font-weight: 700; letter-spacing: .52em;
    color: var(--b-dim); text-transform: uppercase; margin-top: 9px;
}
/* Turnir nomi — sarlavhaning ENG PASTIDA, kichik qatorda.
   Admin uzun jumla yozsa ham afisha buzilmaydi. */
.bracket-name {
    margin-top: 12px; font-size: 12.5px; color: var(--b-dim);
    letter-spacing: .06em;
}
/* Klub nomi asosiy urg'u — reference dagi kabi keng oraliqli */
.bracket-club { font-size: 13px; letter-spacing: .42em; }

.bracket {
    display: flex; gap: 26px; align-items: stretch;
    /* Ustunlar SIQILMAYDI — kerak bo'lsa qator cho'ziladi va suriladi.
       `overflow-y: visible` shart: FINAL / 3-o'rin yorlig'i katak
       tepasidan chiqadi va kesilib qolmasligi kerak. */
    width: 100%; overflow-x: auto; overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
}
/* ⚠ `overflow-y: visible` + `overflow-x: auto` birga ishlamaydi —
   brauzer y ni ham `auto` ga aylantiradi. Shuning uchun yorliq uchun
   joyni `.br-matches` ning yuqori bo'shlig'i beradi (pastga qarang),
   kesish esa bo'lmaydi. */
.bracket > * { flex-shrink: 0; }
.br-round { display: flex; flex-direction: column; min-width: 236px; flex: 0 0 auto; }
/* Chempion ustuni oxirida to'liq ko'rinsin — ilgari o'ng chetda
   qirqilib qolardi. */
.br-round.champ-col { min-width: 240px; padding-right: 4px; }
.br-round-h {
    font-size: 11.5px; font-weight: 750; letter-spacing: .14em; text-transform: uppercase;
    color: var(--b-acc); margin-bottom: 4px;
}
.br-round-s { font-size: 10.5px; letter-spacing: .1em; color: var(--b-dim);
              text-transform: uppercase; margin-bottom: 16px; }
/* Matchlar ustunda TENG taqsimlanadi — shunda keyingi bosqich
   oldingisining o'rtasiga to'g'ri keladi, xuddi referencedagidek. */
/* Yorliq (FINAL / 3-o'rin) match tepasidan chiqadi, shuning uchun
   ustunga qo'shimcha yuqori bo'shliq kerak — aks holda u sarlavhaga
   tegib qolardi. */
.br-matches { flex: 1; display: flex; flex-direction: column; justify-content: space-around;
              gap: 18px; padding-top: 10px; }

/* ⚠ `overflow: hidden` OLIB TASHLANDI. U yuqoriga chiqib turgan
   «FINAL» va «3-o'rin» yorliqlarini KESIB tashlardi — skrinshotda
   yarim ko'rinib turgan yorliq shundan edi.
   Burchaklarni yumaloq ushlash uchun ichki tomonlarga alohida
   radius berildi (pastga qarang). */
.br-match {
    background: var(--b-panel); border: 1px solid var(--b-line); border-radius: 12px;
    position: relative;
}
.br-match .br-side:first-child { border-radius: 11px 11px 0 0; }
.br-match .br-side:last-child  { border-radius: 0 0 11px 11px; }
.br-match.done { border-color: rgba(91,140,255,.30); }
.br-side {
    display: flex; align-items: center; gap: 10px; padding: 9px 11px;
    font-size: 13px; font-weight: 650;
}
.br-side + .br-side { border-top: 1px solid var(--b-line); }
.br-side.lose { color: var(--b-dim); }
.br-side.win  { background: rgba(91,140,255,.09); }
.br-seed {
    font-size: 10px; font-weight: 700; color: var(--b-dim);
    font-variant-numeric: tabular-nums; min-width: 16px;
}
.br-logo {
    width: 22px; height: 22px; flex: 0 0 22px; border-radius: 6px; overflow: hidden;
    display: grid; place-items: center; background: rgba(255,255,255,.06); color: var(--b-dim);
}
.br-logo img { width: 100%; height: 100%; object-fit: cover; }
.br-logo svg { width: 11px; height: 11px; }
.br-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
           text-transform: uppercase; letter-spacing: .02em; font-size: 12px; }
.br-score {
    font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
    min-width: 26px; text-align: right;
}
.br-score-in {
    width: 46px; padding: 5px 7px; text-align: center;
    background: rgba(255,255,255,.06); border: 1px solid var(--b-line);
    border-radius: 8px; color: var(--b-ink); font: inherit; font-size: 13px; font-weight: 750;
    font-variant-numeric: tabular-nums; outline: none;
}
.br-score-in:focus { border-color: var(--b-acc); background: rgba(91,140,255,.12); }
.br-score-in:disabled { opacity: .5; }

.br-tag {
    position: absolute; top: -9px; left: 11px;
    font-size: 9.5px; font-weight: 750; letter-spacing: .1em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; background: var(--b-acc); color: #fff;
}
/* To'q bracket fonida jigarrang yorliq ko'rinmasdi — yorqin
   amber va to'q matn ishlatiladi. */
.br-tag.third { background: #F0B429; color: #2A1C00; }

/* Chempion */
.br-champ {
    margin-top: 16px; padding: 18px; border-radius: 14px; text-align: center;
    background: linear-gradient(160deg, rgba(91,140,255,.18), rgba(91,140,255,.04));
    border: 1px solid rgba(91,140,255,.30);
}
.br-champ .l { font-size: 10.5px; font-weight: 750; letter-spacing: .3em;
               color: var(--b-acc); text-transform: uppercase; margin-bottom: 10px; }
.br-champ .n { font-size: 22px; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.br-champ .lg { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 10px;
                overflow: hidden; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.br-champ .lg img { width: 100%; height: 100%; object-fit: cover; }

.bracket-foot {
    text-align: center; margin-top: 26px; font-size: 10.5px; letter-spacing: .34em;
    color: var(--b-dim); text-transform: uppercase;
}

/* ── Natija sahifasi ── */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0; }
@media (max-width: 640px) { .podium { grid-template-columns: 1fr; } }
.pod {
    background: var(--t-card); border: 1px solid var(--t-line); border-radius: 18px;
    padding: 22px 18px; text-align: center;
}
.pod.p1 { border-color: rgba(47,107,255,.35); background: linear-gradient(170deg, var(--t-acc-sft), var(--t-card)); }
/* ⚠ «1-o'rin / 2-o'rin / 3-o'rin» yozuvi ilgari juda och kulrang edi
   (--t-ink3 oq fonda ~2.6:1) va deyarli ko'rinmasdi. Endi u yorliq
   ko'rinishida — to'q matn, engil fon, aniq chegara. */
.pod .rank {
    display: inline-block; font-size: 11px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--t-ink); background: rgba(19,26,46,.06);
    border: 1px solid var(--t-line); border-radius: 999px;
    padding: 4px 11px; margin-bottom: 14px;
}
.pod.p1 .rank { color: #fff; background: var(--t-acc); border-color: var(--t-acc); }
.pod .lg { width: 58px; height: 58px; border-radius: 16px; margin: 0 auto 12px; overflow: hidden;
           background: rgba(19,26,46,.05); display: grid; place-items: center; color: var(--t-ink3); }
.pod .lg img { width: 100%; height: 100%; object-fit: cover; }
.pod .lg svg { width: 22px; height: 22px; }
.pod .nm { font-size: 16px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; }

/* ── Logo bosqichi ── */
.logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.logo-cell {
    border: 1px solid var(--t-line); border-radius: 14px; padding: 14px; text-align: center;
    background: var(--t-card); cursor: pointer; transition: .16s var(--t-ease);
}
.logo-cell:hover { border-color: var(--t-acc); }
.logo-cell .box {
    width: 62px; height: 62px; border-radius: 15px; margin: 0 auto 10px; overflow: hidden;
    background: rgba(19,26,46,.05); display: grid; place-items: center; color: var(--t-ink3);
}
.logo-cell .box img { width: 100%; height: 100%; object-fit: cover; }
.logo-cell .box svg { width: 22px; height: 22px; }
.logo-cell .nm { font-size: 12.5px; font-weight: 650;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo-cell .hint { font-size: 10.5px; color: var(--t-ink3); margin-top: 3px; }

/* ── Juftlash (manual) ── */
.pair-row {
    display: grid; grid-template-columns: 1fr 34px 1fr; gap: 10px; align-items: center;
    margin-bottom: 10px;
}
.pair-vs { text-align: center; font-size: 11px; font-weight: 750; color: var(--t-ink3);
           text-transform: uppercase; letter-spacing: .06em; }

.trn-note {
    font-size: 12.5px; line-height: 1.55; color: var(--t-ink2);
    background: var(--t-acc-sft); border: 1px solid rgba(47,107,255,.18);
    border-radius: 12px; padding: 12px 14px; margin-bottom: 16px;
}
.trn-note.warn { background: rgba(138,82,0,.08); border-color: rgba(138,82,0,.20); color: var(--t-warn); }
.trn-note.err  { background: rgba(192,41,58,.08); border-color: rgba(192,41,58,.20); color: var(--t-dng); }

/* ── Xabar (alert O'RNIGA) ──
   Sahifa ichida chiqadi, hech narsani bloklamaydi. */
.trn-toasts {
    position: fixed; right: 18px; bottom: 18px; z-index: 9999;
    display: flex; flex-direction: column; gap: 9px; align-items: flex-end;
    pointer-events: none;
}
.trn-toast {
    display: flex; align-items: flex-start; gap: 9px;
    max-width: 340px; padding: 12px 15px; border-radius: 13px;
    background: #FFFFFF; border: 1px solid #DDE2EC;
    box-shadow: 0 12px 30px rgba(19,26,46,.16);
    font-size: 13px; font-weight: 600; color: #131A2E;
    transform: translateY(14px); opacity: 0;
    transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .26s;
    pointer-events: auto;
}
.trn-toast.on { transform: none; opacity: 1; }
.trn-toast .ti { display: flex; flex: 0 0 auto; margin-top: 1px; color: #0B7A5E; }
.trn-toast.bad .ti { color: #C0293A; }
.trn-toast.bad { border-left: 3px solid #C0293A; }
.trn-toast .tt { flex: 1; min-width: 0; line-height: 1.45; }
/* ⚠ Avtomatik logo SVG si katakni TO'LIQ egallashi kerak.
   Mavjud .team-logo svg { width:15px } kabi qoidalar uni
   kichraytirib qo'yardi — shuning uchun alohida klass. */
.auto-lg { width: 100% !important; height: 100% !important; display: block; }