/* FLY — t.me/flybetconsulting брэнд: гүн нил ягаан, диагональ судал, бүргэдтэй тэмдэг. Анхдагч нь харанхуй горим; [data-theme="light"] гэрэлтэй горим. Ногоон/улаан зөвхөн таарсан/таараагүй. */ :root, :root[data-theme="dark"] { --bg: #12071a; --bg-2: #170a20; --surface: #1c0b25; --surface-2: #241030; --surface-3: #2d1439; --line: #351842; --text: #f5edf8; --muted: #a990b3; --muted-2: #9a84a4; --brand: #6e247d; --brand-2: #521d60; --accent: #b14ad6; --accent-2: #c86be6; --accent-ink: #dba3f2; --accent-soft: rgba(177, 74, 214, .17); --good: #1fbf75; --good-soft: rgba(31, 191, 117, .2); --bad: #e5484d; --bad-soft: rgba(229, 72, 77, .2); --live: #ff4d5e; --draw: #6f5d78; --away: #a481a9; --header: #170920; --radius: 14px; --shadow: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 8px 24px rgba(0, 0, 0, .25); --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-head: "Montserrat", var(--font); --font-cond: "Oswald", "Montserrat", sans-serif; color-scheme: dark; } :root[data-theme="light"] { --bg: #f6f1f9; --bg-2: #efe6f4; --surface: #ffffff; --surface-2: #f7f0fa; --surface-3: #efe3f5; --line: #e8dcef; --text: #1d0b25; --muted: #6f5a78; --muted-2: #7d6a86; --accent: #8e2fb0; --accent-2: #a23fc6; --accent-ink: #7a2697; --accent-soft: #f1e2f8; --good: #0b7a48; --good-soft: #dff5ea; --bad: #c62f35; --bad-soft: #fbe5e6; --live: #d42a3b; --draw: #7c6c85; --away: #c6a3d3; --shadow: 0 1px 2px rgba(29, 11, 37, .06), 0 6px 18px rgba(29, 11, 37, .05); color-scheme: light; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); font-variant-numeric: tabular-nums; padding-bottom: 72px; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent-ink); } img { display: inline-block; vertical-align: middle; object-fit: contain; } .wrap { max-width: 1280px; margin: 0 auto; padding: 0 16px; } .muted { color: var(--muted); } .small { font-size: 12px; } .h1 { font: 800 24px/1.2 var(--font-head); margin: 20px 0 14px; letter-spacing: -.01em; } .lead { color: var(--muted); max-width: 72ch; } .btn { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--accent), var(--brand)); color: #fff; font-weight: 700; padding: 11px 18px; border-radius: 12px; border: 0; box-shadow: 0 6px 20px rgba(177, 74, 214, .35); } .btn:hover { color: #fff; filter: brightness(1.08); } .btn.ghost { background: rgba(255, 255, 255, .06); box-shadow: none; border: 1px solid rgba(255, 255, 255, .18); } .only-m { display: none; } /* Диагональ судалтай бүтэц (сувгийн логоны дэвсгэр) */ .stripes { background-image: repeating-linear-gradient(118deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 7px), repeating-linear-gradient(118deg, rgba(0, 0, 0, .18) 0 3px, transparent 3px 11px); } /* ---------- Толгой ---------- */ .top { position: sticky; top: 0; z-index: 30; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .06); background: var(--header); } .top::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .9; background: linear-gradient(90deg, rgba(23, 9, 32, .2), rgba(110, 36, 125, .55) 55%, rgba(23, 9, 32, .2)), repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 8px); } .top-in { position: relative; display: flex; align-items: center; gap: 28px; height: 64px; } .logo { display: flex; align-items: center; gap: 10px; } .logo img { width: 40px; height: 40px; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5)); } .wm { font: 700 30px/1 var(--font-cond); letter-spacing: .02em; color: #fff; } .nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .nav a { position: relative; padding: 10px 14px; color: #d8c6df; font-weight: 600; white-space: nowrap; } .nav a:hover { color: #fff; } .nav a.on { color: #fff; } .nav a.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 3px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* зай дутвал цэс (.nav) гүйлгэгдэнэ */ .tg { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; font-weight: 600; font-size: 13px; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); } .tg:hover { color: #fff; background: rgba(255, 255, 255, .14); } .themebtn { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; font-size: 16px; } /* Толгойн хайлт (/hailt) — толгой хоёр горимд ч харанхуй тул .tg/.themebtn-тэй адил тогтмол өнгө */ .hsearch { position: relative; display: flex; align-items: center; } .hsearch svg { position: absolute; left: 11px; width: 16px; height: 16px; color: #b39bbd; pointer-events: none; } .hsearch input { width: 200px; height: 40px; margin: 0; padding: 0 10px 0 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); color: #fff; font: 500 13px var(--font); outline: none; -webkit-appearance: none; appearance: none; transition: border-color .15s, background-color .15s; } .hsearch input::placeholder { color: #b39bbd; opacity: 1; } .hsearch input:hover { background: rgba(255, 255, 255, .1); } .hsearch input:focus { border-color: var(--accent); background: rgba(255, 255, 255, .1); box-shadow: 0 0 0 3px rgba(177, 74, 214, .3); } .hsearch input::-webkit-search-cancel-button { filter: invert(1) brightness(.85); cursor: pointer; } @media (max-width: 1180px) and (min-width: 721px) { .top-in { gap: 18px; } .tg { width: 40px; height: 40px; padding: 0; justify-content: center; } .tg-t { display: none; } .hsearch input { width: 160px; } } /* Таблет: цэс багтахын тулд хайлт товч хэлбэртэй, фокуслоход дэлгэгдэнэ */ @media (max-width: 960px) and (min-width: 721px) { .nav a { padding: 10px; } .nav a.on::after { left: 10px; right: 10px; } .hsearch input { width: 40px; padding-right: 0; cursor: pointer; transition: width .2s; } .hsearch input::placeholder { color: transparent; } .hsearch input:focus, .hsearch input:not(:placeholder-shown) { width: 180px; padding-right: 10px; cursor: text; } .hsearch input:focus::placeholder { color: #b39bbd; } } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(255, 77, 94, .6); animation: pulse 1.6s infinite; vertical-align: middle; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 94, .55); } 70% { box-shadow: 0 0 0 7px rgba(255, 77, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 94, 0); } } .banner { background: var(--accent-soft); border-bottom: 1px solid var(--line); font-size: 13px; padding: 10px 0; color: var(--text); } .banner a { color: var(--accent-ink); font-weight: 700; text-decoration: underline; } /* ---------- Нүүрний hero ---------- */ .hero-home { position: relative; overflow: hidden; border-radius: 18px; margin: 18px 0 14px; min-height: 300px; border: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 18px; padding: 30px; isolation: isolate; color: #fff; } .hero-home picture, .hero-home .hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; } .hero-home .hero-bg { object-fit: cover; object-position: 70% 50%; } .hero-home::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 7, 26, .96) 0%, rgba(18, 7, 26, .82) 38%, rgba(18, 7, 26, .15) 75%), repeating-linear-gradient(118deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 9px); } .eyebrow { margin: 0 0 8px; color: var(--accent-2); font: 700 12px var(--font); letter-spacing: .14em; text-transform: uppercase; } .hero-home h1 { font: 900 clamp(26px, 3.4vw, 44px)/1.08 var(--font-head); margin: 0 0 12px; letter-spacing: -.02em; } .hero-home h1 span { color: var(--accent-2); text-shadow: 0 0 24px rgba(177, 74, 214, .45); } .hero-home .sub { color: #d9c9e0; max-width: 46ch; margin: 0 0 18px; } .cta { display: flex; flex-wrap: wrap; gap: 10px; } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat { background: rgba(28, 11, 37, .62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 14px; } .stat small { display: block; color: #cdb8d5; font-size: 12px; line-height: 1.3; min-height: 2.6em; } .stat b { display: block; font: 700 40px/1.1 var(--font-cond); letter-spacing: .01em; } .stat span { color: #b39bbd; font-size: 12px; } .stat .up { color: var(--accent-2); } /* ---------- Хоёр баганат байршил ---------- */ .layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } .side { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 14px; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .panel > h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px; font: 700 15px var(--font-head); border-bottom: 1px solid var(--line); } .panel > h3 .more { margin-left: auto; font: 600 12px var(--font); color: var(--accent-ink); } .plist { list-style: none; margin: 0; padding: 4px 0; } .plist li + li { border-top: 1px solid var(--line); } .plist a { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 16px; } .plist .min { color: var(--live); font-weight: 700; font-size: 13px; } .plist .tm { color: var(--muted); font-size: 12px; } .plist .nm { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px; } .plist .sub { display: block; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .plist b { font: 700 15px var(--font-cond); } .topl a { grid-template-columns: 22px minmax(0, 1fr) 44px; } .topl .rk { color: var(--muted); font: 700 14px var(--font-cond); } .bar { display: block; height: 6px; border-radius: 6px; background: var(--surface-3); margin-top: 5px; overflow: hidden; } .bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--brand), var(--accent)); } .topl .pv { text-align: right; font: 700 16px var(--font-cond); color: var(--accent-ink); } .tgcard { position: relative; overflow: hidden; display: flex; gap: 12px; align-items: center; padding: 16px; color: #fff; background: linear-gradient(135deg, #3b1246, #6e247d); border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .1); } .tgcard::before { content: ""; position: absolute; inset: 0; opacity: .6; background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 8px); } .tgcard img { position: relative; width: 52px; height: 52px; } .tgcard div { position: relative; } .tgcard b { display: block; font: 800 15px var(--font-head); } .tgcard span { font-size: 12px; color: #e3d0ea; } .tgcard:hover { color: #fff; filter: brightness(1.08); } /* ---------- Онцлох тоглолт ---------- */ .featured { position: relative; overflow: hidden; border-radius: 16px; padding: 16px; color: #fff; margin-bottom: 14px; background: linear-gradient(160deg, #3a1245 0%, #26102f 60%, #1c0b25 100%); border: 1px solid rgba(255, 255, 255, .1); } .featured::before { content: ""; position: absolute; inset: 0; opacity: .7; pointer-events: none; background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 8px); } .featured > * { position: relative; } .fhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 13px; color: #dcc8e4; } .fhead span:first-child { white-space: nowrap; } .fhead span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fhead b { color: var(--accent-2); } /* B түвшний шошго (A алга өдөр) — нарийн дэлгэцэнд мөр шилжиж болно, лигийн нэрийг бүр шахахгүй */ .fhead span:first-child:has(small) { white-space: normal; } .fhead small { font-size: 11px; font-weight: 600; opacity: .85; white-space: nowrap; } .fteams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 12px 0; text-align: center; } .fteams img { width: 48px; height: 48px; } .fteams .n { display: block; font-weight: 700; margin-top: 4px; font-size: 14px; } .fteams .when { font: 700 26px/1 var(--font-cond); } .fteams .when small { display: block; font: 500 12px var(--font); color: #cdb8d5; margin-bottom: 4px; } .fpred { text-align: center; margin-top: 10px; } .fpred small { color: #cdb8d5; } .fpred b { display: block; font: 700 34px/1.1 var(--font-cond); letter-spacing: .04em; } /* ---------- Өдрийн зурвас, табууд ---------- */ .strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .strip a { flex: 1 0 auto; min-width: 72px; display: flex; flex-direction: column; align-items: center; line-height: 1.25; padding: 9px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; } .strip a b { font: 700 20px var(--font-cond); } .strip a small { font-size: 11px; color: var(--muted); } .strip a.today { border-color: var(--accent); } .strip a.on { background: linear-gradient(135deg, var(--accent), var(--brand)); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(177, 74, 214, .35); } .strip a.on small { color: #f0dff6; } .mtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; } .mtabs a { flex: 0 0 auto; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--muted); } .mtabs a:hover { color: var(--text); border-color: var(--accent); } .mtabs a.on { background: var(--accent); border-color: var(--accent); color: #fff; } .meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; color: var(--muted); margin: 4px 0 12px; } .meta b { color: var(--text); } .meta a { color: var(--accent-ink); font-weight: 600; } .favtoggle { margin-left: auto; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 5px 12px; cursor: pointer; font: inherit; } .favtoggle.on { border-color: var(--accent); color: var(--accent-ink); } /* ---------- Лигийн карт ба мөр ---------- */ .group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 14px; overflow: hidden; } .ghead { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: linear-gradient(90deg, var(--surface-2), var(--surface)); border-bottom: 1px solid var(--line); padding: 10px 14px; } .gname { display: flex; align-items: center; gap: 10px; min-width: 0; } .gname > div { min-width: 0; } .gname a, .gname .gl { display: block; } .gname img { width: 26px; height: 26px; } .gname a, .gname .gl { font: 700 15px var(--font-head); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gname .gsub { display: block; font: 500 11px var(--font); color: var(--muted); } .gcount { font-size: 12px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 2px 10px; white-space: nowrap; } .ghead .cols { color: var(--muted); font-size: 11px; font-weight: 600; margin-right: 20px; } .colhead { display: flex; justify-content: flex-end; padding: 6px 14px 4px; border-bottom: 1px solid var(--line); } .colhead .cols { color: var(--muted-2); font-size: 11px; font-weight: 600; margin-right: 20px; } .colhead .ex { color: inherit; font-weight: inherit; font-size: inherit; } .row { display: flex; align-items: center; border-bottom: 1px solid var(--line); } .row:last-child { border-bottom: 0; } .row:hover { background: var(--surface-2); } .rl { flex: 1; display: grid; grid-template-columns: 50px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 9px 0 9px 14px; min-width: 0; } .rl:hover { color: inherit; } .st { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; font-size: 13px; color: var(--muted); font-weight: 600; } .st.live, .st .live { color: var(--live); } .teams { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .t { display: flex; align-items: center; gap: 8px; min-width: 0; } .t img { flex: 0 0 auto; width: 18px; height: 18px; } .t .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cols { display: grid; grid-auto-flow: column; align-items: center; gap: 5px; text-align: center; } .cols span { min-width: 0; } .m-1x2 { grid-template-columns: repeat(3, 44px) 46px 40px 58px; } .m-ht, .m-dc { grid-template-columns: repeat(3, 44px) 46px 58px; } .m-ou { grid-template-columns: repeat(2, 48px) 58px 40px 58px; } .m-btts { grid-template-columns: repeat(2, 48px) 56px 58px; } .m-htft { grid-template-columns: 100px 50px 58px; } .m-ah { grid-template-columns: 48px 44px 64px 58px; } .m-cs { grid-template-columns: repeat(3, 44px) 46px 58px; } .pc .u { font-style: normal; } .pc { font-size: 13px; color: var(--muted); border-radius: 999px; padding: 3px 0; font-weight: 500; } .pc.max { color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--brand)); box-shadow: 0 2px 10px rgba(177, 74, 214, .3); } .pc.na, .pick.na { color: var(--muted-2); opacity: .5; } .pick { font-weight: 700; font-size: 12px; border-radius: 999px; padding: 2px 0; color: var(--accent-ink); border: 1.5px solid var(--accent); } .ex { font-size: 13px; color: var(--text); font-weight: 600; } .sc { display: flex; flex-direction: column; align-items: center; line-height: 1.15; font-size: 13px; } .sc b { display: inline-block; white-space: nowrap; min-width: 46px; padding: 3px 6px; border-radius: 8px; background: var(--surface-3); } .sc.hit b { background: var(--good-soft); color: var(--good); } .sc.miss b { background: var(--bad-soft); color: var(--bad); } .sc small { color: var(--muted); font-size: 11px; margin-top: 2px; } /* Шууд оноо: улаан дүүргэлт биш (тэр нь "таараагүй"-н өнгө) — саармаг оноо + live хүрээ + цохилох цэг (FE-10) */ .is-live .sc b { position: relative; color: var(--text); background: transparent; box-shadow: inset 0 0 0 1.5px var(--live); } .is-live .sc b::before { content: ""; position: absolute; top: -3px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--live); animation: pulse 1.6s infinite; } .fav { flex: 0 0 40px; height: 44px; margin-right: 2px; background: none; border: 0; color: var(--muted-2); font-size: 16px; cursor: pointer; border-radius: 8px; } .fav.on { color: var(--accent-2); } .fav:hover { background: var(--surface-3); } body.favonly .row:not(.is-fav) { display: none; } .empty { text-align: center; color: var(--muted); padding: 40px 16px; } /* ---------- Тоглолтын хуудас ---------- */ .crumbs { font-size: 12px; color: var(--muted); margin: 16px 0 10px; } .crumbs a:hover { text-decoration: underline; } .hero, .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; margin-bottom: 14px; } .hero { position: relative; overflow: hidden; color: #fff; border-color: rgba(255, 255, 255, .1); background: linear-gradient(160deg, #3a1245 0%, #26102f 55%, #1c0b25 100%); } .hero::before { content: ""; position: absolute; inset: 0; opacity: .7; pointer-events: none; background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 8px); } .hero > * { position: relative; } .hero-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: #d6c3de; font-size: 13px; } .hero-teams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 18px 0; } .ht { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .ht h2 { font: 800 18px/1.2 var(--font-head); margin: 0; overflow-wrap: anywhere; } .hs { display: flex; flex-direction: column; align-items: center; gap: 4px; } .hs small { color: #d6c3de; } .score { font: 700 46px/1 var(--font-cond); letter-spacing: .04em; white-space: nowrap; } .score.vs { font-size: 26px; color: #cdb8d5; } .hero .st { color: #e3d0ea; } .pbar { display: flex; height: 32px; border-radius: 10px; overflow: hidden; font-weight: 700; font-size: 13px; gap: 3px; } .pbar span { display: flex; align-items: center; justify-content: center; min-width: 40px; color: #fff; border-radius: 6px; } .p1 { background: linear-gradient(90deg, var(--brand), var(--accent)); } .px { background: #5e4d68; } .p2 { background: #8f6b9c; } .hero-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; text-align: center; } .hero-kpis div { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 9px 4px; } .hero-kpis small { display: block; color: #cdb8d5; font-size: 11px; } .hero-kpis b { font: 700 22px var(--font-cond); } .conf { display: inline-flex; gap: 3px; } .conf i { width: 12px; height: 8px; border-radius: 3px; background: rgba(255, 255, 255, .15); } .conf i.on { background: var(--accent-2); } .note { color: #cdb8d5; font-size: 12px; margin: 10px 0 0; } .card h3 { font: 700 15px var(--font-head); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .card h3 .more { margin-left: auto; font: 600 12px var(--font); color: var(--accent-ink); } .card p { margin: 0 0 8px; } .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; } .grid2 .card { margin-bottom: 0; } .kv { width: 100%; border-collapse: collapse; } .kv th { text-align: left; font-weight: 500; color: var(--muted); padding: 6px 0; } .kv td { text-align: right; font-weight: 700; padding: 6px 0 6px 10px; } .kv td.max { color: var(--accent-ink); } .kv tr.main th, .kv tr.main td { color: var(--accent-ink); } .kv tr + tr { border-top: 1px solid var(--line); } .htft { display: grid; grid-template-columns: 24px repeat(3, 1fr); gap: 5px; text-align: center; } .htft b { color: var(--muted); font-size: 12px; } .htft span { background: color-mix(in srgb, var(--accent) calc(var(--a) * 100%), var(--surface-2)); border-radius: 8px; padding: 7px 0; font-weight: 700; font-size: 13px; } .cs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .cs li { background: var(--surface-2); border-radius: 10px; padding: 8px; text-align: center; } .cs li:first-child { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); } .cs b { display: block; font: 700 22px var(--font-cond); } .cs span { color: var(--muted); font-size: 12px; } .mlist { list-style: none; margin: 0; padding: 0; } .mlist li + li { border-top: 1px solid var(--line); } .mlist a { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; padding: 7px 0; align-items: center; } .mlist .d { color: var(--muted); font-size: 12px; } .mlist .tt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mlist .me { font-weight: 700; } .mlist .r { white-space: nowrap; } .mlist .na { color: var(--muted); padding: 8px 0; } .form { display: inline-flex; gap: 3px; } .form i, .mlist .r i { font-style: normal; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 800; color: #fff; } .f-W { background: var(--good); } .f-D { background: var(--draw); } .f-L { background: var(--bad); } .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th { color: var(--muted); font-weight: 600; font-size: 12px; padding: 7px 4px; text-align: center; } .tbl td { padding: 7px 4px; text-align: center; border-top: 1px solid var(--line); } .tbl .l { text-align: left; } .tbl tr.me td { background: var(--accent-soft); font-weight: 700; } .trend { display: flex; flex-direction: column; padding: 8px 0; } .trend + .trend { border-top: 1px solid var(--line); } .trend b { color: var(--accent-ink); font-size: 13px; } .trend span { color: var(--muted); font-size: 13px; } .livebox { border-color: var(--live); } .trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .trio div { background: var(--surface-2); border-radius: 12px; padding: 8px; } .trio small { display: block; color: var(--muted); } .trio b { font: 700 26px var(--font-cond); } /* ---------- Лиг, нарийвчлал ---------- */ .lhead { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .lhead .h1 { margin: 8px 0 0; } .lhead p { margin: 0; } .season { margin-left: auto; } .season select { font: inherit; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .countries { columns: 3 300px; column-gap: 14px; } .countries .card { break-inside: avoid; } .llist { list-style: none; margin: 0; padding: 0; } .llist li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; } .llist a { display: flex; align-items: center; gap: 8px; } .big { font: 700 52px var(--font-cond); color: var(--accent-ink); margin: 0; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; } .kpi small { color: var(--muted); display: block; } .kpi b { font: 700 38px var(--font-cond); color: var(--accent-ink); } .calib { width: 100%; height: auto; } .calib .ax { stroke: var(--line); stroke-width: 1.5; } .calib .diag { stroke: var(--muted); stroke-dasharray: 4 4; } .calib .pt { fill: var(--accent); fill-opacity: .85; } .calib .lbl { fill: var(--muted); font-size: 11px; text-anchor: middle; } /* ---------- Хөл ба доод цэс ---------- */ .foot { color: var(--muted); font-size: 12px; padding: 26px 0 8px; border-top: 1px solid var(--line); margin-top: 26px; } .foot p { margin: 4px 0; } .foot a { color: var(--accent-ink); } .foot .src { display: block; margin: 4px 0; font-size: 11px; color: var(--muted-2); } .tabbar { display: none; } @media (max-width: 1100px) { .layout { grid-template-columns: minmax(0, 1fr); } .side { position: static; } .side .featured { display: none; } } @media (max-width: 860px) { .hero-home { grid-template-columns: 1fr; } } @media (max-width: 720px) { .only-m { display: block; } .only-d { display: none !important; } .nav, .tg { display: none; } .top-in { height: 58px; gap: 12px; } .top-actions { flex: 1; min-width: 0; justify-content: flex-end; } .hsearch { flex: 1; min-width: 0; max-width: 340px; } .hsearch input { width: 100%; font-size: 16px; } /* iOS Safari 16px-ээс бага талбарт фокуслоход томруулдаг */ .wm { font-size: 28px; } .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; bottom: 0; left: 0; right: 0; background: var(--header); border-top: 1px solid rgba(255, 255, 255, .08); z-index: 30; padding-bottom: env(safe-area-inset-bottom); } .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; padding: 7px 0 6px; color: #b39bbd; } .tabbar a.on { color: var(--accent-2); } .tabbar svg { width: 22px; height: 22px; } .hero-home { padding: 20px; min-height: 0; margin-top: 12px; } .stats { grid-template-columns: repeat(3, 1fr); gap: 6px; } .stat { padding: 10px 8px; } .stat small { font-size: 10.5px; } .stat b { font-size: 28px; } .rl { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 4px; padding-left: 10px; } .ex, .ghead .cols .ex, .colhead .cols .ex { display: none; } .cols { gap: 3px; } .pc .u { display: none; } /* Гар утсанд 1X2/HT/DC-ийн "Таамаг" баганыг нууна — тодруулсан нүд нь сонголтыг харуулдаг (FE-11) */ .m-1x2, .m-ht, .m-dc { grid-template-columns: repeat(3, 30px) 42px; } .m-1x2 .pick, .m-ht .pick, .m-dc .pick, .m-1x2 .pk, .m-ht .pk, .m-dc .pk { display: none; } .m-ou { grid-template-columns: repeat(2, 32px) 44px 44px; } .m-btts { grid-template-columns: repeat(2, 32px) 40px 44px; } .m-htft { grid-template-columns: 72px 36px 44px; } .m-ah { grid-template-columns: 36px 30px 50px 44px; } .m-cs { grid-template-columns: repeat(3, 30px) 32px 44px; } .mtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .pc, .pick { font-size: 12px; } .sc b { min-width: 40px; padding: 2px 4px; } .t { font-size: 13px; } .t img { display: none; } .gname { flex: 1; } .gcount { font-size: 11px; padding: 1px 8px; } .colhead .cols { margin-right: 12px; font-size: 10px; } .fav { flex-basis: 36px; margin-right: 0; } .hide-s { display: none; } .hero-kpis { grid-template-columns: repeat(2, 1fr); } .score { font-size: 38px; } } /* ---------- Спорт сонгох мөр ---------- */ .sportbar { background: var(--header); border-bottom: 1px solid rgba(255, 255, 255, .06); } .sportbar .wrap { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-top: 8px; padding-bottom: 8px; } .sportbar a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; color: #cdb8d5; font-size: 13px; font-weight: 600; border: 1px solid rgba(255, 255, 255, .1); } .sportbar a i { font-style: normal; } .sportbar a:hover { color: #fff; border-color: var(--accent); } .sportbar a.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--brand)); border-color: transparent; } /* ---------- Бусад спортын баганууд ---------- */ .sp-points { grid-template-columns: repeat(2, 44px) 40px 60px 58px 76px; } .sp-points-d { grid-template-columns: repeat(3, 44px) 40px 60px 58px 58px; } .sp-goals-d { grid-template-columns: repeat(3, 44px) 40px 48px 48px 58px; } .sp-runs { grid-template-columns: repeat(2, 44px) 40px 52px 52px 58px; } .sp-sets { grid-template-columns: repeat(2, 44px) 40px 48px 52px 58px; } .sp-elo { grid-template-columns: repeat(2, 44px) 40px 58px; } .sp-series, .sp-tennis { grid-template-columns: repeat(2, 44px) 40px 48px 52px 58px; } @media (max-width: 720px) { .sp-runs, .sp-sets, .sp-elo, .sp-series, .sp-tennis { grid-template-columns: repeat(2, 32px) 30px 44px; } .sp-points { grid-template-columns: repeat(2, 32px) 30px 64px; } .sp-points-d, .sp-goals-d { grid-template-columns: repeat(3, 30px) 30px 44px; } .sportbar a span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .sportbar a { padding: 6px 10px; font-size: 16px; } } .t .nm.won { font-weight: 700; } .t .nm.won::after { content: " ✓"; color: var(--good); } /* ---------- Брэнд v2: хэвтээ лого, спортын icon, спортын hero ---------- */ .logo .lockup { height: 40px; width: auto; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); } .sportbar a img { width: 20px; height: 20px; } .sport-hero { margin-top: 16px; } @media (max-width: 720px) { .logo .lockup { height: 34px; } .sportbar a img { width: 22px; height: 22px; } .sport-hero { padding: 18px; } .sport-hero .sub { display: none; } } /* ---------- Хөлийн холбоосууд ---------- */ .footlinks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; } .footlinks a { color: var(--muted); } .footlinks a:hover { color: var(--accent-ink); } /* ---------- Нүүр/топ/шууд (launch): датаны түвшин, сонголт, хуудаслалт, хүртээмж ---------- */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* border-radius энд тавихгүй — товч/табын хэлбэр фокус авахад өөрчлөгдөнө (outline нь radius-ийг дагадаг) */ :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; } .rl:focus-visible { outline-offset: -2px; } .mtabs a, .favtoggle { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; } .favtoggle[hidden] { display: none; } .mtabs a .n { font-size: 11px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--muted); } .mtabs a.on .n { background: rgba(255, 255, 255, .22); color: #fff; } .footlinks a { display: inline-block; padding: 6px 0; } /* Датаны чанарын тэмдэг: 3/2/1 багана (A/B/C) */ .q { display: inline-block; flex: 0 0 auto; width: 11px; height: 9px; vertical-align: -1px; background: linear-gradient(var(--q1, var(--line)), var(--q1, var(--line))) 0 100% / 3px 45% no-repeat, linear-gradient(var(--q2, var(--line)), var(--q2, var(--line))) 4px 100% / 3px 72% no-repeat, linear-gradient(var(--q3, var(--line)), var(--q3, var(--line))) 8px 100% / 3px 100% no-repeat; } .q3 { --q1: var(--good); --q2: var(--good); --q3: var(--good); } .q2 { --q1: var(--accent-2); --q2: var(--accent-2); } .q1 { --q1: var(--muted); } .qline { font-size: 12px; color: var(--muted); margin: -4px 0 12px; } .qline a { color: var(--accent-ink); } .qlegend .q { margin: 0 3px 0 8px; } .qlegend .q:first-child { margin-left: 0; } .lowq .nm { color: var(--muted); } .nod { grid-column: 1 / -2; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc.p::after { content: "%"; font-size: .85em; opacity: .8; } /* Таарсан/таараагүйд өнгөнөөс гадна тэмдэг (өнгө ялгадаггүй хэрэглэгчид) */ .sc.hit b, .sc.miss b { position: relative; } .sc.hit b::after, .sc.miss b::after { position: absolute; top: -6px; right: -5px; font-size: 9px; line-height: 13px; width: 13px; height: 13px; border-radius: 50%; color: #fff; text-align: center; } .sc.hit b::after { content: "✓"; background: var(--good); } .sc.miss b::after { content: "✗"; background: var(--bad); } /* Тоглолтын явц дахь 1X2 (app.js) — тоглолтын өмнөх таамгаас ялгагдана */ .cols.inplay .pc { color: var(--text); } .cols.inplay .pc.max { background: none; color: var(--live); box-shadow: inset 0 0 0 1.5px var(--live); } .group { content-visibility: auto; contain-intrinsic-size: auto 420px; } .tailhead { font: 700 15px var(--font-head); margin: 22px 0 10px; } .tailhead small { font: 500 12px var(--font); color: var(--muted); } .morewrap { text-align: center; margin: 6px 0 18px; } .morewrap .more { min-height: 44px; color: var(--text); border-color: var(--line); background: var(--surface); } .morewrap .more[aria-busy="true"] { opacity: .6; pointer-events: none; } .pagenote { font-size: 13px; color: var(--muted); } .pagenote a { color: var(--accent-ink); font-weight: 600; } .favempty { text-align: center; color: var(--muted); padding: 24px 16px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); margin-bottom: 14px; } body.favonly .group:not(:has(.is-fav)), body.favonly .group.nofav, body.favonly .tailhead { display: none; } .favtoggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-ink); } .strip a.wkend b { color: var(--accent-ink); } .strip a.wkend.on b { color: #fff; } .fst { display: block; font: 600 11px var(--font); color: #cdb8d5; margin-top: 4px; } .fst.live { color: var(--live); } .tnote { font-size: 12px; color: var(--muted); padding: 8px 16px 12px; margin: 0; } .tnote a { color: var(--accent-ink); } /* Гар утас/таблет: топ таамаг + Telegram өдрийн зурваснаас ӨМНӨ (FE-06) */ .mfirst { margin: 12px 0 6px; } .mfirst .toppanel { margin-bottom: 10px; } .tgbar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; color: #fff; min-height: 44px; background: linear-gradient(135deg, #3b1246, #6e247d); border: 1px solid rgba(255, 255, 255, .1); margin-bottom: 12px; } .tgbar img { width: 32px; height: 32px; } .tgbar span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; } .tgbar small { color: #e3d0ea; font-size: 12px; } .tgbar i { margin-left: auto; font-style: normal; } .tgbar:hover { color: #fff; filter: brightness(1.08); } @media (max-width: 1100px) { .mfirst.only-m { display: block; } .side .toppanel, .side .tgcard { display: none !important; } } /* ---------- /top хуудас ---------- */ .daytabs { margin-bottom: 0; } .topmeta .trec { margin-left: auto; } .lvlnote { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 13px; } .toprank { list-style: none; margin: 0 0 14px; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .toprank li + li { border-top: 1px solid var(--line); } .toprank a { display: grid; grid-template-columns: 26px minmax(0, 1fr) minmax(0, 170px) 72px 54px 18px; gap: 10px; align-items: center; padding: 10px 14px; min-height: 52px; } .toprank a:hover { background: var(--surface-2); color: inherit; } .toprank .rk { font: 700 16px var(--font-cond); color: var(--muted); } .toprank .tt { min-width: 0; } .toprank .tt .nm, .toprank .tt small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toprank .tt small, .toprank .tpk small { color: var(--muted); font-size: 12px; } .toprank .tpk { min-width: 0; } .toprank .tpk b { display: block; color: var(--accent-ink); } .toprank .tpk small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toprank .tpv { font: 700 18px var(--font-cond); text-align: right; color: var(--text); } .toprank .tpv .bar { margin-top: 3px; } .toprank .tick { font-weight: 800; text-align: center; } .toprank .hit .tick { color: var(--good); } .toprank .miss .tick { color: var(--bad); } .toprank .sc { align-items: flex-end; } .toprank .sc b::after { display: none; } @media (max-width: 720px) { .pc.p::after { content: none; } .nod { white-space: normal; font-size: 11px; line-height: 1.2; text-align: center; } .favtoggle { margin-left: 0; } .toprank a { grid-template-columns: 22px minmax(0, 1fr) 54px 46px; gap: 8px; padding: 10px 12px; } .toprank .tpk { grid-column: 2; grid-row: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .toprank .tpk b, .toprank .tpk small { display: inline; } .toprank .tpk b { margin-right: 6px; } .toprank .tpv { grid-column: 3; grid-row: 1 / span 2; } .toprank .sc { grid-column: 4; grid-row: 1 / span 2; } .toprank .tick { display: none; } .toprank .rk { grid-row: 1 / span 2; } .toprank .sc.hit b::after, .toprank .sc.miss b::after { display: block; } } @media (min-width: 721px) { .m-h1 { display: none; } } /* Гарнаас "Үндсэн агуулга руу" алгасах холбоос (base.html-д