/* Tablo — "Zumrad akademik": och yashilroq sahifa, oq panellar; urg'u — zumrad (#15803d) jonli/yangi/faol holat uchun,
   tepa sarlavha va pastki lenta — to'q yashil band (#0f3d33).
   Bitta shrift (Inter Tight 400): ierarxiya o'lcham va harf oralig'i bilan, qalinlik bilan emas. */
:root {
  --qogoz: #f4f7f5; --oq: #ffffff; --siyoh: #0f1f1a; --kul: #5f6b66;
  --chiziq: #e3e9e6; --tutun: #cfd8d4; --urg: #15803d; --urg-fon: #dcfce7; --urg-kuchli: #bbf7d0;
  --bar: #0f3d33; --bar-xira: #ffffffcc; --bar-chiziq: #ffffff2e; --bar-urg: #4ade80;
  --oltin: #d9b13b; --kumush: #bfc3c9; --bronza: #c88a5a;
  --sh: "Inter Tight", "Segoe UI", system-ui, sans-serif;
  --tez: cubic-bezier(.16, 1, .3, 1);
  font-size: clamp(12px, 0.95vw, 22px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; }
body { display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); background: var(--qogoz); color: var(--siyoh);
  font: 400 1rem/1.4 var(--sh); font-feature-settings: "ss01", "tnum"; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; font-weight: 400; }
b, strong { font-weight: 400; }
::selection { background: var(--urg-kuchli); color: var(--siyoh); }
:focus-visible { outline: 2px solid var(--siyoh); outline-offset: 2px; }
/* Phosphor ikonlari (static/ikon.svg): matn bilan bir qatorda, matn rangida */
.ph { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; vertical-align: -.18em; }
.izoh { color: var(--kul); font-size: .85rem; }
/* sarlavha va fan ikonlari urg'u rangida */
.panel-bosh h2 .ph, .fan h3 .ph, .oxirgi-holat > .ph, .oxirgi-fan span .ph, .tortma .fs .ph, .elon-karta .fs .ph { color: var(--urg); }
.elon-karta.u1 .fs .ph { color: inherit; }

/* sarlavha — ko'k band */
.bosh { display: flex; align-items: center; gap: 2.4rem; padding: .9rem 1.8rem; background: var(--bar); color: var(--oq); }
.sarlavha { display: flex; align-items: center; gap: 1.2rem; }
.logo { height: 3.4rem; width: auto; }
.sarlavha-matn { border-left: 1px solid var(--bar-chiziq); padding-left: 1.2rem; }
.sarlavha h1 { font-size: 1.75rem; line-height: 1.05; letter-spacing: -.02em; }
.sarlavha p { margin: .35rem 0 0; color: var(--bar-xira); font-size: .95rem; display: flex; align-items: center; gap: .6rem; }
.jonli { display: inline-flex; align-items: center; gap: .4rem; background: var(--oq); color: var(--bar); border-radius: 6px;
  padding: .12rem .5rem; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; }
.jonli::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--urg); }
/* "Jonli" — chiroq kabi yonib-öçadi: nuqta och qizil nur sochadi, tugma halqasi u bilan birga */
.jonli { animation: jonliHalqa 1.4s steps(1, end) infinite; }
.jonli::before { animation: chiroq 1.4s steps(1, end) infinite; }
@keyframes chiroq { 0% { background: #ff6b6b; box-shadow: 0 0 .35rem #ff6b6b, 0 0 .8rem #ff8787; } 50% { background: #9ca3af; box-shadow: none; } }
@keyframes jonliHalqa { 0% { box-shadow: 0 0 0 2px #ff8787aa; } 50% { box-shadow: none; } }
.raqamlar { display: flex; margin-left: auto; }
.raqam { display: flex; align-items: center; gap: .8rem; padding: .1rem 1.5rem; border-left: 1px solid var(--bar-chiziq); }
.raqam > .ph { font-size: 1.9rem; color: var(--bar-xira); }
.raqam:last-child > .ph, .raqam:last-child b { color: var(--bar-urg); }
.raqam b { display: block; font-size: 2rem; line-height: 1.05; letter-spacing: -.02em; }
.raqam span { color: var(--bar-xira); font-size: max(11px, .68rem); text-transform: uppercase; letter-spacing: .08em; white-space: nowrap; }
.boshqaruv { display: flex; align-items: center; gap: .8rem; padding-left: 1.5rem; border-left: 1px solid var(--bar-chiziq); }
.soat-quti { display: flex; align-items: center; gap: .45rem; } .soat-quti .ph { color: var(--bar-xira); font-size: 1.3rem; }
.soat { font-size: 2rem; letter-spacing: -.02em; min-width: 4.6ch; }
.aloqa { display: flex; font-size: 1.3rem; color: var(--bar-urg); }
.aloqa .ph + .ph, .aloqa.yoq .ph:first-child { display: none; }
.aloqa.yoq { color: var(--bar-xira); } .aloqa.yoq .ph + .ph { display: block; animation: puls 1s infinite; }
.tugma { display: inline-flex; align-items: center; gap: .45rem; background: none; border: 1px solid #ffffff59; color: var(--oq); border-radius: 6px;
  padding: .5rem .85rem; font-size: .85rem; transition: background-color .3s, border-color .3s, color .3s; }
.tugma:hover { background: var(--oq); color: var(--bar); border-color: var(--oq); }
.tugma.ikon { padding: .5rem; }

/* asosiy tablo */
.tablo { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.1fr) minmax(0, .9fr); gap: 1.2rem; padding: 1.2rem 1.8rem; min-height: 0; }
.panel { background: var(--oq); border: 1px solid var(--chiziq); border-radius: 16px; padding: 1.4rem 1.5rem 0; display: flex; flex-direction: column;
  min-height: 0; overflow: hidden; }
.panel-bosh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.panel-bosh h2 { display: flex; align-items: center; gap: .55rem; font-size: 1.6rem; line-height: 1.1; letter-spacing: -.02em; }
.royxat { list-style: none; margin: 0; padding: 0 0 1rem; overflow-y: auto; min-height: 0; scrollbar-width: none; }
.royxat::-webkit-scrollbar, .fan-royxat::-webkit-scrollbar { display: none; }

/* qatorlar: kartochka emas — jadval chizig'i */
.qator { display: grid; align-items: center; gap: .9rem; padding: .7rem .5rem; border-bottom: 1px solid var(--chiziq); cursor: pointer;
  transition: background-color .3s; will-change: transform; }
.qator:hover { background: var(--qogoz); }
.fio { line-height: 1.2; }
.mak { color: var(--kul); font-size: .85rem; }
.ball { font-size: 1.5rem; letter-spacing: -.02em; text-align: right; }
.rsz { display: block; font-size: max(.55em, .62rem); color: var(--kul); text-transform: uppercase; letter-spacing: .06em; margin-top: .1rem; }

/* chap: joriy fan+sinf — sarlavha, top-3 podium (2·1·3), qolganlari ball chizig'i bilan jadval */
.oxirgi-bosh { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.oxirgi-fan { display: flex; align-items: center; gap: .9rem; cursor: pointer; min-width: 0; }
.fan-belgi { flex: none; width: 3.4rem; height: 3.4rem; border-radius: 12px; display: grid; place-items: center; font-size: 1.9rem;
  background: var(--urg-fon); color: var(--urg); }
.oxirgi-fan b { font-size: 3rem; line-height: 1; letter-spacing: -.035em; }
.navbat { flex: none; display: flex; align-items: center; gap: .2rem; padding: .2rem; border: 1px solid var(--chiziq); border-radius: 10px; }
.nav { width: 2.3rem; height: 2.3rem; border: 0; border-radius: 6px; background: none; display: grid; place-items: center; transition: background-color .3s, color .3s; }
.nav:hover { background: var(--urg-fon); color: var(--urg); }
#oxirgiVaqt { min-width: 4.6ch; text-align: center; color: var(--kul); font-size: .9rem; }
.oxirgi-holat { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem; margin: .5rem 0 1.1rem 4.3rem; color: var(--kul); font-size: .95rem; }
.oxirgi-holat h2 { display: inline-flex; align-items: center; gap: .45rem; font-size: inherit; color: var(--siyoh); }
.oxirgi-holat h2.songgi { color: var(--urg); }
.oxirgi-holat h2.songgi::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--urg); }
#oxirgiMeta::before { content: "·"; margin-right: .6rem; }

.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: .6rem; align-items: end; align-content: start; }
.podium > li:nth-child(2) { order: 1; } .podium > li:nth-child(1) { order: 2; } .podium > li:nth-child(3) { order: 3; }
.podium > li:nth-child(n+4), .podium > .bosh-matn { order: 4; grid-column: 1 / -1; }
/* podium: 1-o'rin eng baland, to'q yashil */
.podium > .qator:nth-child(-n+3) { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; padding: 1rem 1.1rem 1.1rem;
  margin-bottom: .9rem; border: 0; border-radius: 12px; background: var(--qogoz); }
.podium > .qator:nth-child(1) { padding-top: 2.6rem; background: var(--bar); color: var(--oq); }
.podium > .qator:nth-child(2) { padding-top: 1.6rem; }
/* 2- va 3-o'rin aniq farqlansin: kumush — sovuq kulrang, bronza — iliq mis tusi, tepasida medal rangidagi chiziq */
.podium > .qator:nth-child(2), .podium > .qator:nth-child(2):hover { background: #e8ecf1; box-shadow: inset 0 4px 0 var(--kumush); }
.podium > .qator:nth-child(3), .podium > .qator:nth-child(3):hover { background: #f6e6d8; box-shadow: inset 0 4px 0 var(--bronza); }
.podium > .qator:nth-child(1) { box-shadow: inset 0 4px 0 var(--oltin); }
.podium > .qator:nth-child(-n+3) .kim { margin-top: .6rem; min-width: 0; max-width: 100%; }
.podium > .qator:nth-child(-n+3) .fio { font-size: 1.2rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.podium > .qator:nth-child(-n+3) .ball { font-size: 2.8rem; line-height: 1; margin-top: .7rem; }
.podium > .qator:nth-child(1) .mak, .podium > .qator:nth-child(1) .rsz { color: var(--bar-xira); }
.podium > .qator:nth-child(1) .ball { color: var(--bar-urg); }
.podium > .qator:nth-child(-n+3) .olcham { display: none; }
.podium > .qator:nth-child(1):hover { background: var(--bar); }
/* 4-o'rindan: o'rin — oddiy raqam, ism va maktab bir qatorda, ball 50 ga nisbatan chiziqda */
.podium > .qator:nth-child(n+4) { grid-template-columns: 2rem minmax(0, 1fr) 6rem 3.8rem; gap: .9rem; padding: .6rem .3rem; }
.podium > .qator:nth-child(n+4) .medal { width: auto; height: auto; justify-self: start; background: none; box-shadow: none; color: var(--kul); font-size: 1rem; }
.podium > .qator:nth-child(n+4) .kim { display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.podium > .qator:nth-child(n+4) .fio { font-size: 1.12rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.podium > .qator:nth-child(n+4) .mak { white-space: nowrap; }
.podium > .qator:nth-child(n+4) .ball { font-size: 1.4rem; }
.olcham { position: relative; height: .35rem; border-radius: 3px; background: var(--chiziq); }
.olcham::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--b, 0) * 100%); border-radius: inherit; background: var(--urg); }

/* medal — tanga: yorug' tushgan bo'rtma yuza, to'q gardish, ichki halqa, kichik soya (o'lchamga em bilan moslashadi) */
.medal { width: 2.2rem; height: 2.2rem; border-radius: 50%; display: grid; place-items: center; color: var(--siyoh); font-size: .95rem; }
.medal.u1, .jadval-bosh .m1 { --t1: #fff6c2; --t2: #f8d34a; --t3: #e3a81b; --t4: #a8700a; --t-matn: #6e4500; }
.medal.u2, .jadval-bosh .m2 { --t1: #ffffff; --t2: #e6eaef; --t3: #b8c0ca; --t4: #7d8794; --t-matn: #3f4752; }
.medal.u3, .jadval-bosh .m3 { --t1: #ffe2c6; --t2: #eaa66c; --t3: #c47a3d; --t4: #85481b; --t-matn: #55290a; }
.medal.u1, .medal.u2, .medal.u3, .jadval-bosh .m1, .jadval-bosh .m2, .jadval-bosh .m3 {
  background: radial-gradient(circle at 34% 28%, var(--t1) 0, var(--t2) 32%, var(--t3) 68%, var(--t4) 100%);
  box-shadow: inset 0 0 0 .09em var(--t4), inset 0 0 0 .19em var(--t2), inset 0 0 0 .25em color-mix(in srgb, var(--t4) 55%, transparent),
    inset 0 -.12em .2em color-mix(in srgb, var(--t4) 45%, transparent), 0 .08em .2em rgb(40 25 0 / .28);
  color: var(--t-matn); text-shadow: 0 .06em 0 color-mix(in srgb, var(--t1) 80%, transparent); }
.medal.u0 { color: var(--kul); box-shadow: inset 0 0 0 1px var(--chiziq); }
.medal.yoq { box-shadow: inset 0 0 0 1px var(--tutun); }

/* maktablar reytingi */
.rejim { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--qogoz); }
.rejim button { display: flex; align-items: center; gap: .35rem; border: 0; background: none; padding: .35rem .75rem; border-radius: 6px; font-size: .82rem; color: var(--kul); transition: background-color .3s, color .3s; }
.rejim button.faol { background: var(--urg); color: var(--oq); }
.maktablar .qator, .jadval-bosh { grid-template-columns: 2rem minmax(0, 1fr) 2.2rem 2.2rem 2.2rem 4.4rem; gap: .6rem; }
.jadval-bosh { display: grid; align-items: center; padding: 0 .5rem .6rem; border-bottom: 1px solid var(--siyoh); color: var(--kul);
  font-size: max(11px, .68rem); text-transform: uppercase; letter-spacing: .08em; text-align: center; }
.jadval-bosh span:nth-child(2) { text-align: left; }
.jadval-bosh span:last-child { text-align: right; }
.jadval-bosh .m1, .jadval-bosh .m2, .jadval-bosh .m3 { justify-self: center; width: 1.3rem; height: 1.3rem; border-radius: 50%; display: grid; place-items: center;
  color: var(--siyoh); font-size: max(11px, .66rem); letter-spacing: 0; }
.maktablar .qator { padding: .62rem .5rem; }
.maktablar .qator > span { text-align: center; }
.maktablar .qator .o { color: var(--kul); text-align: left; }
.maktablar .qator .nom { text-align: left; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maktablar .qator .m1, .maktablar .qator .m2, .maktablar .qator .m3 { font-size: 1.1rem; }
.maktablar .qator .n0 { color: var(--tutun); }
.maktablar .qator .ort { text-align: right; font-size: 1.1rem; color: var(--kul); }
.maktablar .qator .ort.yuqori { color: var(--siyoh); }
.maktablar .qator:nth-child(-n+3) .nom { font-size: 1.2rem; }
/* faol rejim ustuni yetakchi, boshqasi xira */
.maktablar.medal-rejim .qator .ort { font-size: .95rem; color: var(--kul); }
.maktablar:not(.medal-rejim) .qator .m1, .maktablar:not(.medal-rejim) .qator .m2, .maktablar:not(.medal-rejim) .qator .m3 { color: var(--kul); font-size: .95rem; }
.maktablar:not(.medal-rejim) .qator .ort { font-size: 1.35rem; letter-spacing: -.02em; }
.maktablar:not(.medal-rejim) .jadval-bosh .ort-bosh { color: var(--siyoh); }
.tuman-chiziq { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: .4rem 0; padding: .45rem .5rem;
  border-radius: 6px; background: var(--urg-fon); color: var(--urg); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.tuman-chiziq b { font-size: 1.15rem; letter-spacing: -.01em; text-transform: none; }

/* fanlar kesimi — fan guruhi, ichida sinflar */
.fan-royxat { overflow-y: auto; min-height: 0; scrollbar-width: none; padding-bottom: 1rem; }
.fan { padding: .9rem 0 .5rem; border-top: 1px solid var(--siyoh); }
.fan:first-child { border-top-color: var(--chiziq); }
.fan h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: .4rem; }
.sinf { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); grid-template-areas: "sn gol" "sn st"; column-gap: .7rem; align-items: center;
  padding: .5rem .4rem; border-radius: 10px; cursor: pointer; transition: background-color .3s; }
.sinf + .sinf { border-top: 1px solid var(--chiziq); border-radius: 0; }
.sinf:hover { background: var(--qogoz); border-radius: 10px; }
.sinf .sn { grid-area: sn; align-self: center; background: var(--qogoz); border-radius: 6px; text-align: center; padding: .25rem 0; font-size: .82rem; }
.sinf .gol { grid-area: gol; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sinf .gol small { color: var(--kul); font-size: .8rem; margin-left: .2rem; }
.sinf .st { grid-area: st; color: var(--kul); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sinf .st b { color: var(--siyoh); font-size: .95rem; }

/* pastki lenta — oq band, tepasida chiziq */
.lenta { display: flex; align-items: center; gap: 1.2rem; padding: .7rem 1.8rem; background: var(--bar); color: var(--oq); }
.lenta-nom { color: var(--bar-xira); white-space: nowrap; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; display: flex; align-items: center; gap: .5rem; }
.lenta-nom .ph { color: var(--bar-urg); font-size: 1.2rem; }
.lenta-ichi { overflow: hidden; flex: 1; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
#lenta { display: inline-flex; gap: 3rem; white-space: nowrap; animation: lenta 60s linear infinite; padding-left: 100%; font-size: .95rem; color: var(--bar-xira); }
#lenta span b { color: var(--bar-urg); }
@keyframes lenta { to { transform: translateX(-100%); } }

/* ichma-ich tortmalar */
.qatlam { position: fixed; inset: 0; pointer-events: none; z-index: 20; transition: background-color .4s; }
.qatlam.ochiq { pointer-events: auto; background: #0c0a0866; }
.tortma { position: absolute; top: 0; bottom: 0; right: 0; width: min(64vw, 1100px); background: var(--oq); border-left: 1px solid var(--chiziq);
  display: flex; flex-direction: column; transform: translateX(102%); transition: transform .5s var(--tez), filter .5s, opacity .5s; }
.tortma.kirdi { transform: translateX(0); }
.tortma.orqada { transform: translateX(-5vw); filter: brightness(.82); }
.tortma-bosh { display: flex; align-items: center; gap: 1.2rem; padding: 1.4rem 1.8rem; border-bottom: 1px solid var(--siyoh); }
.tortma-bosh .usti { flex: 1; min-width: 0; }
.tortma-bosh h2 { font-size: 2.6rem; line-height: 1; letter-spacing: -.03em; }
.tortma-bosh .yol { color: var(--kul); font-size: max(11px, .72rem); text-transform: uppercase; letter-spacing: .08em; margin-top: .5rem; order: 2; }
.tortma-bosh .usti { display: flex; flex-direction: column; }
.tortma-bosh h2 { order: 1; }
.tortma .tugma { background: var(--oq); color: var(--siyoh); border-color: var(--chiziq); }
.tortma .tugma:hover { background: var(--qogoz); color: var(--siyoh); border-color: var(--tutun); }
.tortma-ichi { overflow-y: auto; padding: 1.4rem 1.8rem; scrollbar-width: thin; scrollbar-color: var(--tutun) transparent; }
/* ko'rsatkichlar — kartochka emas, chiziqli qator */
.kartalar { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); border: 1px solid var(--chiziq); border-radius: 12px; overflow: hidden; margin-bottom: 1.6rem; }
.karta { padding: .9rem 1.1rem; border-right: 1px solid var(--chiziq); }
.karta:last-child { border-right: 0; }
.karta b { display: block; font-size: 2.3rem; line-height: 1.05; letter-spacing: -.03em; }
.karta span { color: var(--kul); font-size: .8rem; } .karta span .ph { margin-right: .3rem; }
.karta.m1, .karta.m2, .karta.m3 { position: relative; }
.karta.m1::after, .karta.m2::after, .karta.m3::after { content: ""; position: absolute; top: 1rem; right: 1rem; width: .7rem; height: .7rem; border-radius: 50%; }
.karta.m1::after { background: var(--oltin); } .karta.m2::after { background: var(--kumush); } .karta.m3::after { background: var(--bronza); }
.toliq .qator { grid-template-columns: 2.4rem minmax(0, 1fr) 13rem 5rem; }
.toliq .qator .fio { font-size: 1.1rem; }
.toliq .qator .mak { color: var(--kul); font-size: .9rem; }
.toliq .qator .mak:hover { color: var(--siyoh); text-decoration: underline; text-underline-offset: 3px; }
.toliq .qator.kelmagan { color: var(--kul); }
.toliq .qator.kelmagan .medal { opacity: .5; }
.mak-qator { grid-template-columns: 2.4rem 10rem minmax(0, 1fr) 5rem !important; }
.mak-qator .fs { color: var(--kul); }
.bolim { color: var(--kul); text-transform: uppercase; letter-spacing: .08em; font-size: max(11px, .72rem); padding-bottom: .6rem; border-bottom: 1px solid var(--siyoh); }

/* jonli effektlar: qator ko'k bilan yonib, so'nadi */
.qator.yangi { animation: marker 2.6s var(--tez) 2; }
.qator.kotarildi { animation: marker 2.6s var(--tez) 1; }
@keyframes marker { 0% { background-color: var(--urg-kuchli); } 60% { background-color: var(--urg-fon); } 100% { background-color: transparent; } }

/* yangi natija e'loni */
.elon { position: fixed; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 40; transition: background-color .4s; }
.elon:has(.elon-karta) { background: #0c0a0859; }
.elon-karta { width: min(58vw, 64rem); padding: 2.6rem 3rem 2.8rem; border-radius: 16px; position: relative; overflow: hidden; background: var(--oq);
  animation: elonKir .8s var(--tez) both; }
.elon-karta.ketdi { animation: elonKet .45s ease-in both; }
.elon-karta.u1 { background: var(--bar); color: var(--oq); }
.elon-karta.u1 .nat .ball { color: var(--bar-urg); }
.elon-karta .tur { display: inline-flex; align-items: center; gap: .45rem; background: var(--urg); color: var(--oq); border-radius: 6px; padding: .2rem .6rem;
  text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.elon-karta .fs { display: flex; align-items: center; gap: .5rem; font-size: 1.3rem; color: var(--kul); margin: 1.4rem 0 .4rem; }
.elon-karta.u1 .fs, .elon-karta.u1 .mak, .elon-karta.u1 .orin { color: #ffffffc7; }
.elon-karta .fio { font-size: 4.2rem; line-height: 1; letter-spacing: -.035em; }
.elon-karta .mak { font-size: 1.4rem; color: var(--kul); margin-top: .6rem; }
.elon-karta .nat { display: flex; align-items: flex-end; gap: 3rem; margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--chiziq); }
.elon-karta.u1 .nat { border-top-color: #ffffff40; }
.elon-karta .nat .ball { font-size: 6.5rem; line-height: .9; letter-spacing: -.04em; text-align: left; }
.elon-karta.u1 .tur { background: var(--bar-urg); color: var(--bar); }
.elon-karta .nat .medal { width: 5.4rem; height: 5.4rem; font-size: 2.4rem; animation: aylan 1.1s var(--tez) .3s both; }
.elon-karta .nat .orin { font-size: .78rem; color: var(--kul); text-transform: uppercase; letter-spacing: .08em; margin-top: .6rem; }
.elon-karta .katta-orin { font-size: 4.2rem; line-height: 1; letter-spacing: -.03em; }
@keyframes elonKir { from { transform: translateY(2.5rem) scale(.97); opacity: 0; filter: blur(8px); } }
@keyframes elonKet { to { transform: translateY(-1.5rem); opacity: 0; filter: blur(6px); } }
@keyframes aylan { from { transform: rotateY(540deg) scale(.3); } }
.elon-karta.ixcham { width: min(40vw, 44rem); padding: 1.6rem 2rem 1.8rem; }
.elon-karta.ixcham .fio { font-size: 2.6rem; } .elon-karta.ixcham .fs { margin: 1rem 0 .3rem; font-size: 1.1rem; }
.elon-karta.ixcham .nat { margin-top: 1.2rem; padding-top: 1.1rem; gap: 2rem; } .elon-karta.ixcham .nat .ball { font-size: 3.6rem; }
.elon-karta.ixcham .nat .medal { width: 3.4rem; height: 3.4rem; font-size: 1.4rem; }
.elon-karta.ixcham .katta-orin { font-size: 2.8rem; }
.uchqun { position: absolute; width: .55rem; height: .9rem; top: -2rem; border-radius: 2px; animation: tush 2.6s linear forwards; }
@keyframes tush { to { transform: translateY(70vh) rotate(720deg); opacity: 0; } }

.xabar { position: fixed; top: 6.5rem; left: 50%; transform: translate(-50%, -1rem); background: var(--urg); color: var(--oq); display: flex; align-items: center; gap: .6rem;
  padding: .75rem 1.2rem; border-radius: 10px; z-index: 45; opacity: 0; transition: transform .5s var(--tez), opacity .3s; }
.xabar .ph { font-size: 1.2rem; }
.xabar.kor { transform: translate(-50%, 0); opacity: 1; }
.birinchi { position: fixed; bottom: 4.6rem; right: 1.8rem; background: var(--siyoh); color: var(--oq); padding: .55rem .9rem; border-radius: 6px;
  font-size: .85rem; z-index: 15; pointer-events: none; animation: puls 2.4s ease-in-out infinite; }
.birinchi.yoq { display: none; }
@keyframes puls { 50% { opacity: .45; } }
.bosh-matn { color: var(--kul); padding: 3rem 1rem; list-style: none; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 900px) {
  html, body { overflow: auto; height: auto; } body { display: block; } :root { font-size: 15px; }
  .bosh { flex-wrap: wrap; gap: 1rem; padding: 1rem; }
  .sarlavha { flex: 1 1 100%; padding-right: 7.5rem; } .logo { height: 2.6rem; } .sarlavha h1 { font-size: 1.35rem; }
  .raqamlar { order: 3; margin-left: 0; flex: 1 1 100%; display: grid; grid-template-columns: repeat(3, 1fr); row-gap: .8rem; }
  .raqam { min-width: 0; padding: 0 1rem; } .raqam:nth-child(3n+1) { border-left: 0; padding-left: 0; } .raqam b { font-size: 1.5rem; } .raqam > .ph { font-size: 1.4rem; }
  .boshqaruv { position: absolute; top: 1rem; right: 1rem; border: 0; padding: 0; } .soat { font-size: 1.3rem; } #boshHolat, #ekran { display: none; }
  .bosh { position: relative; }
  .tablo { grid-template-columns: 1fr; padding: 1rem; gap: 1rem; } .panel { max-height: 80vh; padding: 1.1rem 1rem 0; }
  .oxirgi-fan b { font-size: 2rem; } .fan-belgi { width: 2.6rem; height: 2.6rem; font-size: 1.4rem; } .oxirgi-holat { margin-left: 0; }
  .podium > .qator:nth-child(-n+3) { padding: .8rem .5rem .9rem; } .podium > .qator:nth-child(1) { padding-top: 1.8rem; }
  .podium > .qator:nth-child(-n+3) .fio { font-size: .8rem; overflow-wrap: normal; } .podium { column-gap: .4rem; } .podium > .qator:nth-child(-n+3) .ball { font-size: 2rem; }
  .podium > .qator:nth-child(n+4) { grid-template-columns: 1.6rem minmax(0, 1fr) 3rem; } .podium .olcham { display: none; }
  .tortma { width: 100vw; } .tortma-bosh { padding: 1rem; flex-wrap: wrap; } .tortma-bosh h2 { font-size: 1.8rem; } .tortma-ichi { padding: 1rem; }
  .toliq .qator { grid-template-columns: 2.2rem 1fr 4rem; } .toliq .qator .mak { display: none; }
  .mak-qator { grid-template-columns: 2.2rem 1fr 4rem !important; } .mak-qator .fs { display: none; }
  .birinchi { display: none; }
  .elon-karta, .elon-karta.ixcham { width: calc(100vw - 2rem); padding: 1.4rem; } .elon-karta .fio { font-size: 2rem; } .elon-karta .nat .ball { font-size: 3.4rem; }
  .lenta { padding: .7rem 1rem; }
}