@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap");

/* =========================================================
   TOKENLAR
   Akademik yozuv — gazeta / tahririyat uslubi
   Tarix — diplomatik / arxiv uslubi
   ========================================================= */
:root, [data-fan="akademik"] {
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --num: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --r: 2px; --r-lg: 3px;
  --bg: #f3eee4; --surface: #fbf8f1; --surface-2: #ece5d7; --ink: #1b1916; --muted: #6a6257; --line: #d6cbb7; --line-strong: #1b1916;
  --accent: #b02a1c; --accent-ink: #fff; --accent-soft: #f2dcd5; --accent-2: #1f3a5f;
  --good: #2c6b45; --bad: #b02a1c; --warn: #b7791f;
  --t0: #b02a1c; --t1: #1f3a5f; --t2: #b7791f; --t3: #2c6b45;
  --shadow: 0 1px 0 rgba(0,0,0,.04);
  --pattern: none;
}
[data-fan="akademik"][data-theme="dark"] {
  --bg: #141210; --surface: #1c1916; --surface-2: #26221d; --ink: #ede5d6; --muted: #a2988a; --line: #3a342c; --line-strong: #ede5d6;
  --accent: #e2604d; --accent-ink: #160d0b; --accent-soft: #3a1f1a; --accent-2: #8fb0d8;
  --good: #6fbf8c; --bad: #e2604d; --warn: #e2b25a;
  --t0: #e2604d; --t1: #8fb0d8; --t2: #e2b25a; --t3: #6fbf8c;
}

[data-fan="tarix"] {
  --display: "Space Grotesk", "Inter", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;
  --num: "Space Grotesk", "Inter", system-ui, sans-serif;
  --r: 0px; --r-lg: 0px;
  --bg: #e8ebee; --surface: #ffffff; --surface-2: #dce1e6; --ink: #111418; --muted: #58626c; --line: #c3cad1; --line-strong: #111418;
  --accent: #0a7fa3; --accent-ink: #fff; --accent-soft: #d5edf4; --accent-2: #17964a;
  --good: #17964a; --bad: #d0213a; --warn: #d99a00;
  --t0: #0a7fa3; --t1: #d0213a; --t2: #17964a; --t3: #d99a00;
  --hard: #111418;
  --shadow: 5px 5px 0 var(--hard);
  --grid: rgba(17,20,24,.06);
  --pattern: linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 32px 32px;
  --flag: linear-gradient(to right, #0a9fc4 0 33.3%, #ffffff 33.3% 66.6%, #1eb53a 66.6% 100%);
}
[data-fan="tarix"][data-theme="dark"] {
  --bg: #0e1012; --surface: #171a1d; --surface-2: #23272b; --ink: #f1f3f5; --muted: #98a2ac; --line: #2f353b; --line-strong: #f1f3f5;
  --accent: #2bb7de; --accent-ink: #061015; --accent-soft: #0f2f39; --accent-2: #3cc76d;
  --good: #3cc76d; --bad: #ff5a6d; --warn: #ffc531;
  --t0: #2bb7de; --t1: #ff5a6d; --t2: #3cc76d; --t3: #ffc531;
  --hard: #000000;
  --grid: rgba(255,255,255,.045);
}
/* Swiss / plakat uslubi: qalin sans, qattiq soya, rang bloklari */
[data-fan="tarix"] h1, [data-fan="tarix"] h2, [data-fan="tarix"] h3, [data-fan="tarix"] h4,
[data-fan="tarix"] .q-text, [data-fan="tarix"] .who, [data-fan="tarix"] .verdict, [data-fan="tarix"] .cat-picked,
[data-fan="tarix"] .side .nm, [data-fan="tarix"] .cc .nm, [data-fan="tarix"] .top .ttl b { font-weight: 700; letter-spacing: -.02em; }
[data-fan="tarix"] .panel, [data-fan="tarix"] .mcard, [data-fan="tarix"] .scores { border: 2px solid var(--line-strong); box-shadow: var(--shadow); }
[data-fan="tarix"] .btn { border-width: 2px; font-weight: 700; box-shadow: 3px 3px 0 var(--hard); }
[data-fan="tarix"] .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--hard); }
[data-fan="tarix"] .btn.primary { border-color: var(--hard); }
[data-fan="tarix"] .opt { border-width: 2px; border-color: var(--line-strong); }
[data-fan="tarix"] .opt:hover:not(:disabled) { box-shadow: 3px 3px 0 var(--hard); transform: translate(-1px, -1px); }
[data-fan="tarix"] .kicker { color: var(--ink); background: var(--warn); display: inline-block; padding: 2px 8px; }
[data-fan="tarix"] .top { border-bottom: 2px solid var(--line-strong); padding-left: 28px; }
[data-fan="tarix"] .top::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; background: linear-gradient(to bottom, #0a9fc4 0 33.3%, #ce1126 33.3% 36%, #ffffff 36% 64%, #ce1126 64% 66.6%, #1eb53a 66.6%); }
[data-fan="tarix"] .team::before { width: 8px; }
[data-fan="tarix"] .timer .bar { height: 8px; border-radius: 0; }
[data-fan="tarix"] .timer .bar i { background: var(--accent); }
[data-fan="tarix"] .q-text { font-size: clamp(22px, 3vw, 36px); }

/* =========================================================
   ASOS
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--pattern), var(--bg); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.5;
  transition: background-color .25s, color .25s;
}
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
svg.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.18em; }
.hidden { display: none !important; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; }

/* =========================================================
   SARLAVHA (header)
   ========================================================= */
.top { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; }
[data-fan="akademik"] .top { border-bottom: 3px double var(--line-strong); }
.top .ttl { flex: 1; min-width: 0; }
.top .ttl b { display: block; font-family: var(--display); font-size: clamp(17px, 2.2vw, 24px); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .ttl span { display: block; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top .acts { display: flex; gap: 6px; }
.ib {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: transparent; text-decoration: none; font-size: 14px; font-weight: 600;
}
.ib:hover { border-color: var(--ink); }
main.wrap { flex: 1; width: 100%; max-width: 1360px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 18px; }

/* =========================================================
   TUGMALAR
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px;
  border: 1px solid var(--line-strong); border-radius: var(--r); background: transparent; font-weight: 600; letter-spacing: .01em;
  transition: background .15s, color .15s, transform .1s;
}
.btn:hover { background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { filter: brightness(1.08); background: var(--accent); }
.btn.ink { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.lg { padding: 15px 24px; font-size: 17px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
[data-fan="akademik"] .btn { text-transform: uppercase; font-size: 13px; letter-spacing: .1em; }
[data-fan="akademik"] .btn.lg { font-size: 14px; }

/* =========================================================
   PANEL / KARTA
   ========================================================= */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow); }
[data-fan="akademik"] .panel { border-color: var(--line-strong); }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
[data-fan="tarix"] .kicker { color: var(--accent-2); }

/* =========================================================
   SOZLASH EKRANI
   ========================================================= */
.setup { max-width: 640px; width: 100%; margin: 2vh auto; padding: 30px; }
.setup h2 { font-family: var(--display); font-size: clamp(28px, 4vw, 40px); line-height: 1.1; margin: 6px 0 10px; }
.setup .sub { color: var(--muted); margin: 0 0 8px; }
.setup .l { display: block; margin: 20px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
[data-fan="akademik"] .setup .l { border-top: 1px solid var(--line); padding-top: 14px; }
.seg { display: flex; border: 1px solid var(--line-strong); border-radius: var(--r); overflow: hidden; }
.seg button { flex: 1; padding: 10px; border: 0; border-right: 1px solid var(--line); background: transparent; font-weight: 700; font-family: var(--num); }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--ink); color: var(--bg); }
.names .row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.names .sw { width: 12px; height: 34px; border-radius: var(--r); flex: none; background: var(--c); }
.inp { width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); color: var(--ink); font: inherit; outline: none; }
.inp:focus { border-color: var(--accent); }
.key { font-family: var(--num); font-size: 12px; border: 1px solid var(--line); border-radius: var(--r); padding: 4px 8px; color: var(--muted); }
.rules { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: r; }
.rules li { counter-increment: r; position: relative; padding: 8px 0 8px 34px; border-top: 1px solid var(--line); color: var(--muted); font-size: 15px; }
.rules li::before { content: counter(r, decimal-leading-zero); position: absolute; left: 0; top: 8px; font-family: var(--num); font-size: 12px; color: var(--accent); font-weight: 700; }
.rules b { color: var(--ink); }

/* =========================================================
   JAMOALAR PANELI
   ========================================================= */
.scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.team { position: relative; padding: 12px 16px 12px 20px; border-right: 1px solid var(--line); transition: background .2s; }
.team:last-child { border-right: 0; }
.team::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.team .n { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team .s { font-family: var(--num); font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; line-height: 1.2; }
.team .tag { font-size: 12px; color: var(--muted); }
.team.active { background: var(--accent-soft); }
.team.active .n { color: var(--ink); }
.team.out { opacity: .4; }
.team .adj { position: absolute; right: 8px; top: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.team:hover .adj { opacity: 1; }
.team .adj button { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r); font-size: 11px; padding: 1px 6px; font-family: var(--num); color: var(--muted); }
.bump .s { animation: bump .5s ease; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* =========================================================
   MODAL VA SAVOL
   ========================================================= */
.modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; padding: 84px 16px 16px; background: color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter: blur(6px); }
.modal.open { display: flex; animation: fade .18s ease; }
.mcard { width: min(960px, 100%); max-height: calc(100vh - 100px); overflow: auto; padding: clamp(20px, 3vw, 36px); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 30px 80px -30px rgba(0,0,0,.45); animation: rise .25s ease; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(14px); opacity: 0; } }
.meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.meta .acc { color: var(--accent); }
.meta .tm-name { color: var(--c); }
[data-fan="akademik"] .meta { border-bottom: 1px solid var(--line-strong); padding-bottom: 10px; }
.q-text { font-family: var(--display); font-size: clamp(22px, 3.2vw, 38px); line-height: 1.25; margin: 18px 0 16px; font-weight: 700; }
[data-fan="tarix"] .q-text { font-weight: 700; }

.timer { display: flex; align-items: center; gap: 12px; margin: 4px 0 16px; }
.timer .bar { flex: 1; height: 4px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.timer .bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform-origin: left; }
.timer .tn { font-family: var(--num); font-size: 18px; min-width: 2.2ch; text-align: right; }
.timer .tn.low { color: var(--bad); }
.timer .tp { border: 1px solid var(--line); background: transparent; border-radius: var(--r); width: 30px; height: 30px; display: grid; place-items: center; }

.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; text-align: left; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); font-size: clamp(15px, 1.6vw, 19px); font-weight: 500; line-height: 1.3; transition: border-color .15s, background .15s, opacity .2s; }
.opt:hover:not(:disabled) { border-color: var(--ink); }
.opt .k { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--r); font-family: var(--num); font-size: 13px; font-weight: 600; }
.opt.right { border-color: var(--good); background: color-mix(in srgb, var(--good) 14%, var(--surface)); }
.opt.right .k { background: var(--good); border-color: var(--good); color: var(--surface); }
.opt.wrong { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, var(--surface)); animation: shake .3s; }
.opt.wrong .k { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.opt.gone { opacity: .2; }
.opt:disabled { cursor: default; }
@keyframes shake { 30% { transform: translateX(-5px); } 70% { transform: translateX(5px); } }
.izoh { margin-top: 12px; color: var(--muted); font-size: 15px; border-left: 3px solid var(--accent); padding-left: 12px; }
.verdict { display: inline-flex; align-items: center; gap: 8px; font-family: var(--display); font-size: clamp(22px, 3vw, 32px); margin-top: 14px; }
.verdict.ok { color: var(--good); } .verdict.bad { color: var(--bad); }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }
.hint { color: var(--muted); font-size: 12px; margin-top: 14px; text-align: center; }

/* =========================================================
   GʻOLIB
   ========================================================= */
.win { text-align: center; }
.win h2 { font-family: var(--display); font-size: clamp(34px, 6vw, 64px); margin: 10px 0 4px; line-height: 1.05; }
.win .sub { color: var(--muted); }
.standings { width: 100%; max-width: 520px; margin: 22px auto 0; border-collapse: collapse; text-align: left; }
.standings td { padding: 10px 6px; border-top: 1px solid var(--line); }
.standings td:first-child { font-family: var(--num); color: var(--muted); width: 40px; }
.standings td:last-child { text-align: right; font-family: var(--num); font-weight: 600; font-size: 20px; }
.standings .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--c); margin-right: 8px; }
.standings tr:first-child td { font-weight: 700; font-size: 18px; }
canvas.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 40; padding: 12px 18px; background: var(--ink); color: var(--bg); border-radius: var(--r); font-weight: 600; animation: rise .2s ease; box-shadow: 0 10px 30px -10px rgba(0,0,0,.4); }

.turn { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.turn .who { font-family: var(--display); font-size: clamp(22px, 3vw, 32px); color: var(--c); line-height: 1.1; }
.turn .what { color: var(--muted); }

@media (max-width: 700px) {
  main.wrap { padding: 12px; }
  .opts { grid-template-columns: 1fr; }
  .top { padding: 10px 12px; }
  .ib .lbl { display: none; }
  .team .adj { opacity: 1; }
  .setup { padding: 20px; }
}