/* Ilmix Lite — "Oʻyinlar" boʻlimi. Sayt tokenlariga (site.css :root) tayanadi. */

.g-page { padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(3rem, 7vw, 5rem); }
.g-crumbs { display: flex; gap: .5rem; align-items: center; margin-bottom: 1.2rem; font-size: .95rem; color: var(--muted); }
.g-crumbs a { color: var(--primary); text-decoration: none; font-weight: 500; }
.g-crumbs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------- umumiy */
.gi { display: inline-flex; flex: none; }
.gi svg { display: block; }
.g-app { display: grid; gap: .8rem; }
.g-stack { display: grid; gap: 1.4rem; }
.g-stack-sm { display: grid; gap: .75rem; }
.g-row { display: flex; align-items: center; gap: .75rem; }
.g-wrap { flex-wrap: wrap; }
.g-between { justify-content: space-between; flex-wrap: wrap; }
.g-center { text-align: center; }
.g-center-row { justify-content: center; }
.g-flex-col { display: flex; flex-direction: column; gap: 1rem; }
.g-rel { position: relative; }
.g-mt { margin-top: 1rem; }
.g-mt-sm { margin-top: .6rem; }
.g-pad { padding: 2rem 0; }
.g-muted { color: var(--muted); margin: 0; font-size: .97rem; }
.g-strong { font-weight: 600; }
.g-hint { margin: .8rem 0 0; font-size: .85rem; color: var(--muted); }
.g-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.g-grid-wide { grid-template-columns: 1fr 1.35fr; }
@media (max-width: 860px) { .g-grid-2, .g-grid-wide { grid-template-columns: 1fr; } }

.g-card { background: var(--surface); border-radius: 22px; padding: clamp(1.2rem, 3vw, 1.6rem); box-shadow: var(--shadow-sm); }
.g-band {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; color: #e0e7ff;
  background: var(--navy); padding: clamp(1.4rem, 4vw, 2rem); box-shadow: var(--shadow-md);
}
.g-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(24rem 16rem at 100% 0%, rgba(99, 102, 241, .45), transparent 70%),
    radial-gradient(20rem 14rem at 0% 100%, rgba(5, 150, 105, .22), transparent 70%), var(--naqsh-light);
}
.g-band h2 { color: #fff; }
.g-h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .2rem; font-size: 1.15rem; }
.g-h3 .gi { color: var(--primary); }
.g-count { padding: .1rem .6rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-size: .85rem; }
.g-overline { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.g-alert { padding: .85rem 1rem; border-radius: 14px; background: #fee2e2; color: #991b1b; font-weight: 500; }
.g-empty { padding: 1rem; border: 2px dashed var(--line); border-radius: 14px; text-align: center; color: var(--muted); }
.g-note { margin: 0; padding: .85rem 1rem; border-radius: 14px; background: var(--amber-bg); color: var(--amber-fg); text-align: center; font-size: .95rem; }
.g-spin { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid var(--primary-soft); border-top-color: var(--primary); animation: g-rot .8s linear infinite; vertical-align: middle; }
@keyframes g-rot { to { transform: rotate(360deg); } }
.g-wait { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--muted); }

/* ---------------------------------------------------------- tugmalar */
.g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 42px;
  padding: .55rem 1rem; border-radius: 12px; border: 1.5px solid transparent; cursor: pointer;
  font: 600 .95rem/1.2 var(--font-body); text-decoration: none; white-space: nowrap;
  transition: background .2s, color .2s, border-color .2s, transform .15s, box-shadow .2s;
}
.g-btn:active:not(:disabled) { transform: scale(.98); }
.g-btn:disabled { opacity: .5; cursor: not-allowed; }
.g-btn-lg { min-height: 56px; padding: .9rem 1.6rem; font-size: 1.05rem; border-radius: 14px; }
.g-btn-block { width: 100%; }
.g-btn-primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(79, 70, 229, .25); }
.g-btn-primary:hover:not(:disabled) { background: var(--primary-dark); }
.g-btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 20px rgba(4, 120, 87, .22); }
.g-btn-accent:hover:not(:disabled) { background: #065f46; }
.g-btn-outline { background: var(--surface); color: var(--ink); border-color: var(--line); }
.g-btn-outline:hover:not(:disabled) { border-color: var(--primary); color: var(--primary); }
.g-btn-ghost { background: transparent; color: var(--muted); }
.g-btn-ghost:hover { background: var(--primary-soft); color: var(--primary); }
.g-btn-glass { background: rgba(255, 255, 255, .1); color: #fff; }
.g-btn-glass:hover { background: rgba(255, 255, 255, .2); }
.g-btn-warn { background: var(--amber-bg); color: var(--amber-fg); }
.g-btn-square { width: 56px; min-height: 56px; padding: 0; flex: none; }
.g-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; }
.g-icon-btn:hover { background: #fee2e2; color: #b91c1c; }
.g-link { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; text-decoration: none; }

/* Ovoz tugmalari */
.g-sound { display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }
.g-pill {
  display: inline-flex; align-items: center; gap: .4rem; height: 36px; padding: 0 .85rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 500 .9rem var(--font-body);
}
.g-pill.is-on { border-color: #c7d2fe; background: var(--primary-soft); color: var(--primary); }

/* ---------------------------------------------------------- boshqaruvlar */
.g-seg { display: flex; padding: 4px; border-radius: 12px; background: #eceaf6; }
.g-seg button {
  flex: 1; min-height: 40px; padding: 0 .7rem; border: 0; border-radius: 9px; background: transparent; cursor: pointer;
  color: var(--muted); font: 600 .9rem var(--font-body); transition: background .2s, color .2s;
}
.g-seg button:hover { color: var(--ink); }
.g-seg button.is-on { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }
.g-input {
  width: 100%; min-width: 0; padding: .8rem 1rem; border: 1.5px solid var(--field); border-radius: 12px;
  font: inherit; color: var(--ink); background: #fff;
}
.g-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(79, 70, 229, .16); }
.g-input-lg { min-height: 56px; font-size: 1.15rem; font-weight: 600; }
.g-step-title { display: flex; align-items: center; gap: .6rem; margin: 0; font: 600 1.15rem var(--font-display); color: var(--heading); }
.g-step { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: .9rem; flex: none; }
.g-step-primary { background: var(--primary); }
.g-step-accent { background: var(--accent); }
.g-card > .g-muted { margin: .3rem 0 1rem; }
.g-card > .g-step-title + .g-muted { margin-top: .3rem; }

.g-pin-input { display: flex; gap: .6rem; justify-content: center; }
.g-pin-box {
  width: 64px; height: 76px; border: 2px solid var(--line); border-radius: 16px; background: #fff; text-align: center;
  font: 700 2rem var(--font-display); color: var(--heading); font-variant-numeric: tabular-nums;
}
.g-pin-box:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(4, 120, 87, .15); }
@media (max-width: 420px) { .g-pin-box { width: 54px; height: 66px; font-size: 1.7rem; } }
.g-pin-tiles { display: flex; gap: .6rem; }
.g-pin-tiles span {
  display: grid; place-items: center; width: 72px; height: 88px; border-radius: 18px; background: #fff; color: var(--heading);
  font: 700 3.2rem/1 var(--font-display); font-variant-numeric: tabular-nums; box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.g-pin-tiles.is-sm { gap: .3rem; }
.g-pin-tiles.is-sm span { width: 34px; height: 42px; border-radius: 10px; font-size: 1.4rem; background: var(--navy); color: #fff; box-shadow: none; }
@media (max-width: 520px) { .g-pin-tiles span { width: 58px; height: 72px; font-size: 2.6rem; } }

/* ---------------------------------------------------------- bosh band */
.g-stage {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 26px; color: #e0e7ff; background: var(--navy);
  padding: clamp(1.5rem, 4vw, 2.4rem); display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center;
}
.g-stage::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(26rem 18rem at 100% 0%, rgba(99, 102, 241, .45), transparent 70%),
    radial-gradient(22rem 16rem at 0% 100%, rgba(5, 150, 105, .25), transparent 70%), var(--naqsh-light);
}
.g-stage h2 { margin: .9rem 0 .5rem; color: #fff; font-size: clamp(1.8rem, 2.5vw + 1rem, 2.6rem); }
.g-stage p { margin: 0; max-width: 46ch; color: rgba(224, 231, 255, .85); font-size: 1.05rem; }
@media (max-width: 760px) { .g-stage { grid-template-columns: 1fr; } .g-stage .g-visual { display: none; } }
.g-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.g-chips span { padding: .25rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .82rem; font-weight: 600; }
.g-chips .is-warn { background: rgba(251, 191, 36, .2); color: #fde68a; }

/* Bezaklar */
.g-visual { border-radius: 18px; background: rgba(0, 0, 0, .25); padding: 1rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.g-visual-race { position: relative; padding: .6rem 1rem; }
.g-lane { position: relative; display: block; height: 52px; }
.g-lane + .g-lane { border-top: 2px dashed rgba(255, 255, 255, .14); }
.g-runner { position: absolute; top: 50%; font-size: 1.9rem; line-height: 1; animation: g-run 5.2s linear infinite; }
.g-runner-1 { animation-duration: 6.4s; animation-delay: -2.1s; }
.g-runner-2 { animation-duration: 4.6s; animation-delay: -3.3s; }
@keyframes g-run { from { left: 0; transform: translate(0, -50%); } to { left: 100%; transform: translate(-100%, -50%); } }
.g-finish {
  position: absolute; top: 8px; bottom: 8px; right: 10px; width: 10px; border-radius: 2px;
  background-image: repeating-conic-gradient(rgba(255, 255, 255, .9) 0 25%, rgba(15, 23, 42, .9) 0 50%); background-size: 8px 8px;
}
.g-visual-quiz { display: grid; gap: .8rem; }
.g-vq-q { display: grid; place-items: center; height: 54px; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font: 700 1.6rem var(--font-display); }
.g-vq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.g-vq-grid span { height: 46px; border-radius: 12px; animation: g-blink 3.2s ease-in-out infinite; }
.g-vq-a { background: #e11d48; } .g-vq-b { background: #0284c7; animation-delay: .4s !important; }
.g-vq-c { background: #7c3aed; animation-delay: .8s !important; } .g-vq-d { background: #059669; animation-delay: 1.2s !important; }
@keyframes g-blink { 0%, 100% { opacity: .9; } 50% { opacity: .55; } }
.g-visual-keys { display: grid; justify-items: center; gap: 1rem; padding: 1.6rem 1rem; }
.g-combo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.g-combo b { color: var(--muted); font-weight: 700; }
.g-combo.is-dim { opacity: .55; }
.g-key {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.75rem; padding: 0 .75rem;
  border: 2px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--heading);
  font: 700 1rem ui-monospace, Consolas, monospace; box-shadow: 0 3px 0 var(--line);
}
.g-key.is-sm { min-width: 1.9rem; height: 2rem; padding: 0 .45rem; font-size: .78rem; border-radius: 8px; }
.g-key.is-lg { min-width: 4.2rem; height: 4.2rem; padding: 0 1rem; font-size: 1.5rem; border-radius: 16px; }
.g-key.is-dark { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .1); color: #fff; box-shadow: 0 3px 0 rgba(255, 255, 255, .15); }
.g-key.is-lit { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 1px 0 var(--primary-dark); transform: translateY(2px); }
.g-visual-keys .g-combo b, .g-option .g-combo b { color: rgba(255, 255, 255, .6); }
.g-visual-code { position: relative; }
.g-vc { display: grid; border-radius: 12px; background: rgba(15, 23, 42, .8); padding: .5rem 0; font: 12.5px/1.7 ui-monospace, Consolas, monospace; color: #e2e8f0; }
.g-vc > * { display: block; padding: 0 .7rem; white-space: pre; }
.g-vc i { display: inline-block; width: 1.4rem; color: #64748b; font-style: normal; }
.g-vc .is-bug { background: rgba(244, 63, 94, .25); }
.g-vc-lens { position: absolute; right: -10px; top: -14px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fbbf24; color: #0f172a; animation: g-bob 1.4s ease-in-out infinite; }
.c-com { color: #94a3b8; font-style: italic; } .c-str { color: #6ee7b7; } .c-tag { color: #7dd3fc; }
.c-kw { color: #c4b5fd; } .c-num { color: #fcd34d; } .c-prop { color: #fecdd3; }

/* ---------------------------------------------------------- avatar */
.g-avatar { display: inline-grid; place-items: center; flex: none; border-radius: 50%; line-height: 1; box-shadow: 0 0 0 2px var(--ring, #c7d2fe); background: var(--tone, #eef2ff); }
.g-avatar-sm { width: 36px; height: 36px; font-size: 1.15rem; }
.g-avatar-md { width: 46px; height: 46px; font-size: 1.5rem; }
.g-avatar-lg { width: 62px; height: 62px; font-size: 2.2rem; }
.g-avatar-xl { width: 78px; height: 78px; font-size: 2.8rem; }
.g-tone-0 { --tone: #e0e7ff; --ring: #a5b4fc; } .g-tone-1 { --tone: #d1fae5; --ring: #6ee7b7; }
.g-tone-2 { --tone: #fef3c7; --ring: #fcd34d; } .g-tone-3 { --tone: #ffe4e6; --ring: #fb7185; }
.g-tone-4 { --tone: #e0f2fe; --ring: #38bdf8; } .g-tone-5 { --tone: #ede9fe; --ring: #a78bfa; }
.g-tone-6 { --tone: #ffedd5; --ring: #fdba74; } .g-tone-7 { --tone: #fce7f3; --ring: #f472b6; }
.g-tone-x { --tone: #f1f0f9; --ring: transparent; }
.g-bob { animation: g-bob 1.1s ease-in-out infinite; }
@keyframes g-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* ---------------------------------------------------------- kutish xonasi */
.g-pin-band { display: grid; grid-template-columns: 1fr auto auto; gap: 1.5rem; align-items: center; }
.g-pin-copy p { margin: .3rem 0 .8rem; color: rgba(224, 231, 255, .75); max-width: 34ch; font-size: .95rem; }
.g-pin-btn { padding: 4px; border: 0; border-radius: 22px; background: transparent; cursor: pointer; transition: transform .2s; }
.g-pin-btn:hover { transform: scale(1.02); }
.g-copied { grid-column: 1 / -1; margin: 0; min-height: 1.2em; text-align: center; color: #6ee7b7; font-size: .9rem; }
@media (max-width: 900px) { .g-pin-band { grid-template-columns: 1fr; justify-items: center; text-align: center; } .g-pin-band .g-chips { justify-content: center; } }
.g-players { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .7rem; }
.g-players li { display: flex; align-items: center; gap: .75rem; padding: .6rem .75rem; border: 2px solid var(--line); border-radius: 16px; animation: g-pop .35s var(--ease) both; }
.g-players li.is-me { border-color: #c7d2fe; background: #f8f8ff; }
.g-players li.is-off { opacity: .5; }
.g-players li.is-empty { border-style: dashed; color: var(--muted); font-size: .95rem; }
@keyframes g-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.g-pl-name { flex: 1; min-width: 0; display: grid; }
.g-pl-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.g-pl-name small { display: flex; align-items: center; gap: .2rem; color: var(--muted); font-size: .8rem; }
.g-pl-name small .gi { color: #f59e0b; }
.g-kick { display: flex; gap: .3rem; }
.g-kick-yes, .g-kick-no { height: 32px; padding: 0 .6rem; border: 0; border-radius: 8px; cursor: pointer; font: 600 .8rem var(--font-body); }
.g-kick-yes { background: #dc2626; color: #fff; }
.g-kick-no { background: transparent; color: var(--muted); }
.g-start-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }

/* ---------------------------------------------------------- poyga */
.g-timer { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .9rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font: 700 1.15rem var(--font-display); font-variant-numeric: tabular-nums; }
.g-timer.is-hot { background: #fee2e2; color: #b91c1c; }
.g-lanes { padding: .8rem 1rem; }
.g-lane-row { display: flex; align-items: center; gap: .75rem; padding: .35rem 0; }
.g-lane-row + .g-lane-row { border-top: 2px dashed rgba(255, 255, 255, .1); }
.g-lane-name { width: 6.5rem; flex: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .9rem; color: rgba(224, 231, 255, .7); }
.g-lane-name.is-me { color: #fff; font-weight: 700; }
.g-track { position: relative; flex: 1; height: 48px; border-radius: 16px; background: rgba(255, 255, 255, .05); }
.g-track.is-me { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(129, 140, 248, .6); }
.g-trail { position: absolute; top: 8px; bottom: 8px; left: 8px; width: calc(100% - 1rem); border-radius: 999px; background: rgba(255, 255, 255, .12); transform: scaleX(0); transform-origin: left; transition: transform .3s linear; }
.g-track.is-me .g-trail { background: rgba(99, 102, 241, .55); }
.g-track .g-finish { right: 6px; top: 6px; bottom: 6px; }
.g-runner-pos { position: absolute; top: 50%; transition: left .3s linear, transform .3s linear; }
.g-medal { position: absolute; right: -8px; top: -8px; font-size: 1rem; }
.g-lane-stat { width: 4.6rem; flex: none; text-align: right; font-size: .85rem; color: rgba(224, 231, 255, .65); }
.g-lane-stat b { font: 700 1.1rem var(--font-display); color: #fff; }
.g-done { color: #6ee7b7; font-weight: 600; }
.g-more { margin: .3rem 0 0; padding-top: .5rem; border-top: 2px dashed rgba(255, 255, 255, .1); text-align: center; font-size: .9rem; color: rgba(224, 231, 255, .6); }
@media (max-width: 560px) { .g-lane-name { width: 4.2rem; } .g-lane-stat { width: 3.4rem; } }

.g-typing-card { padding: clamp(1.2rem, 3vw, 2rem); }
.g-type-stats { display: flex; gap: 2rem; margin-bottom: 1rem; color: var(--muted); }
.g-type-stats b { font: 700 1.9rem var(--font-display); color: var(--heading); font-variant-numeric: tabular-nums; }
.g-type-box {
  position: relative; height: calc(3 * 2em + 2rem); overflow: hidden; padding: 1rem 1.2rem; border: 2px solid var(--line);
  border-radius: 18px; background: var(--surface); cursor: text; outline: none;
  font: 1.45rem/2 ui-monospace, Consolas, monospace; color: #9ca3af; word-break: break-word; scroll-behavior: smooth;
}
.g-type-box:focus { border-color: var(--primary); }
.g-type-box.is-busy { opacity: .6; }
.g-ch.is-ok { color: var(--heading); }
.g-ch.is-bad { color: #dc2626; background: #fee2e2; border-radius: 3px; }
.g-ch.is-cur { color: var(--heading); background: rgba(79, 70, 229, .15); border-radius: 3px; box-shadow: inset 0 -2px 0 var(--primary); }
.g-type-hint {
  position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; gap: .5rem; align-items: center;
  border: 0; border-radius: 16px; background: rgba(255, 255, 255, .8); backdrop-filter: blur(2px); cursor: pointer;
  font: 600 .95rem var(--font-body); color: var(--navy);
}
.g-type-hint[hidden] { display: none; }
@media (max-width: 600px) { .g-type-box { font-size: 1.15rem; } }
.g-bar { height: 6px; margin-top: .8rem; border-radius: 999px; background: #eceaf6; overflow: hidden; }
.g-bar-fill { height: 100%; width: 100%; border-radius: inherit; background: var(--primary); transform: scaleX(0); transform-origin: left; transition: transform .2s; }
.g-type-foot { margin-top: .6rem; }
.g-countdown { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; border-radius: 22px; background: rgba(247, 247, 251, .88); backdrop-filter: blur(3px); }
.g-countdown[hidden] { display: none; }
.g-count-num { font: 700 clamp(5rem, 14vw, 8rem)/1 var(--font-display); color: var(--primary); animation: g-pulse 1s ease-out infinite; }
.g-countdown p { margin: .8rem 0 0; color: var(--muted); font-weight: 500; }
@keyframes g-pulse { from { transform: scale(1.15); opacity: .6; } to { transform: scale(1); opacity: 1; } }

/* ---------------------------------------------------------- natija */
.g-podium { padding-bottom: 0; text-align: center; }
.g-podium h2 { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; font-size: clamp(1.4rem, 1.5vw + 1rem, 2rem); }
.g-podium h2 .gi { color: #fbbf24; }
.g-sub { margin: .5rem 0 0; color: rgba(224, 231, 255, .75); font-size: .95rem; }
.g-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; align-items: end; max-width: 520px; margin: 2rem auto 0; }
.g-step-col { display: flex; flex-direction: column; align-items: center; }
.g-winner { display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-bottom: .6rem; animation: g-rise .6s var(--ease) both; }
.g-winner.is-1 { animation-delay: .3s; } .g-winner.is-2 { animation-delay: .15s; }
@keyframes g-rise { from { opacity: 0; transform: translateY(20px) scale(.9); } to { opacity: 1; transform: none; } }
.g-w-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .92rem; color: #fff; }
.g-w-name.is-me { color: #fcd34d; }
.g-w-stat { display: grid; justify-items: center; line-height: 1.25; }
.g-w-stat b { font: 700 1.25rem var(--font-display); color: #fff; font-variant-numeric: tabular-nums; }
.g-w-stat small { color: rgba(224, 231, 255, .6); font-size: .75rem; }
.g-w-stat em { color: rgba(224, 231, 255, .6); font-size: .75rem; font-style: normal; }
.g-w-empty { display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: .6rem; border: 2px dashed rgba(255, 255, 255, .2); border-radius: 50%; color: rgba(255, 255, 255, .3); }
.g-block { width: 100%; display: flex; justify-content: center; padding-top: .5rem; border-radius: 16px 16px 0 0; font-size: 1.8rem; }
.g-block.is-1 { height: 140px; background: linear-gradient(#fcd34d, #f59e0b); }
.g-block.is-2 { height: 104px; background: linear-gradient(#cbd5e1, #94a3b8); }
.g-block.is-3 { height: 74px; background: linear-gradient(#fed7aa, #b45309); }
.g-confetti { position: absolute; inset: 0 0 auto; height: 0; pointer-events: none; }
.g-confetti span { position: absolute; top: -12px; width: 8px; height: 10px; border-radius: 2px; animation: g-fall 2.6s ease-in both; }
@keyframes g-fall { from { transform: translateY(0) rotate(0); opacity: 1; } to { transform: translateY(380px) rotate(540deg); opacity: 0; } }
.g-rest, .g-mini { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.g-rest li, .g-mini li { display: flex; align-items: center; gap: .7rem; padding: .55rem .75rem; border: 1px solid var(--line); border-radius: 14px; }
.g-rest li.is-me, .g-mini li.is-me { border-color: #c7d2fe; background: #f8f8ff; }
.g-rest li.is-pending { border-style: dashed; color: var(--muted); }
.g-mini li { border: 0; padding: .4rem .6rem; }
.g-rank { width: 1.6rem; flex: none; text-align: center; font: 700 1.05rem var(--font-display); color: var(--muted); }
.g-score { flex: none; font-size: .85rem; color: var(--muted); }
.g-score b, .g-mini b { font: 700 1.1rem var(--font-display); color: var(--heading); font-variant-numeric: tabular-nums; }
.g-streak-sm { display: inline-flex; align-items: center; gap: .15rem; color: #c2410c; font-size: .8rem; }

.g-courses { padding: 1.4rem; border-radius: 22px; background: var(--bg-band); }
.g-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: .8rem; margin-top: 1rem; }
.g-course { display: flex; align-items: center; gap: .8rem; padding: .6rem; border-radius: 14px; background: var(--surface); text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm); transition: translate .2s; }
.g-course:hover { translate: 0 -2px; color: var(--ink); }
.g-course img, .g-course-ph { width: 64px; height: 44px; flex: none; border-radius: 9px; object-fit: cover; }
.g-course-ph { display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.g-course span { display: grid; min-width: 0; }
.g-course b { font-size: .92rem; line-height: 1.3; }
.g-course small { color: var(--primary-dark); font-weight: 600; font-size: .82rem; }

/* ---------------------------------------------------------- viktorina */
.g-topics { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 520px) { .g-topics { grid-template-columns: 1fr; } }
.g-topics button {
  display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border: 2px solid var(--line); border-radius: 14px;
  background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: var(--ink); transition: border-color .2s, background .2s;
}
.g-topics button:hover { border-color: #c7d2fe; }
.g-topics button.is-on { border-color: var(--primary); background: #f8f8ff; }
.g-topics span { display: grid; min-width: 0; }
.g-topics b { font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.g-topics button.is-on b { color: var(--primary); }
.g-topics small { color: var(--muted); font-size: .78rem; }
.g-topics .g-topic-emoji { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 11px; background: #f1f0f9; font-size: 1.3rem; }
.g-topic-chip { display: inline-block; padding: .3rem .8rem; border-radius: 999px; background: var(--primary-soft); color: var(--primary); font-weight: 600; font-size: .9rem; }
.g-score-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 999px; background: var(--amber-bg); color: var(--amber-fg); font: 700 1rem var(--font-display); font-variant-numeric: tabular-nums; }
.g-score-chip .gi { color: #f59e0b; }

.g-intro { padding: clamp(2.5rem, 7vw, 4rem) clamp(1.5rem, 5vw, 3rem); text-align: center; }
.g-intro h2 { max-width: 30ch; margin: 1rem auto 0; font-size: clamp(1.5rem, 2.5vw + 1rem, 2.4rem); line-height: 1.25; animation: g-rise .5s var(--ease) both; }
.g-intro-bar { max-width: 380px; margin: 2rem auto 0; }
.g-stage-bar { height: 10px; border-radius: 999px; background: #eceaf6; overflow: hidden; }
.g-intro .g-stage-bar { background: rgba(255, 255, 255, .15); }
.g-stage-fill { height: 100%; width: 100%; border-radius: inherit; background: var(--primary); transform-origin: left; transition: transform .1s linear; }
.g-stage-fill.is-white { background: #fff; }
.g-stage-fill.is-grey { background: #a8a6bd; }
.g-stage-fill.is-hot { background: #ef4444; }
.g-secs { display: inline-flex; align-items: center; gap: .3rem; font: 700 1.6rem var(--font-display); color: var(--primary); font-variant-numeric: tabular-nums; }
.g-secs.is-hot { color: #dc2626; }
.g-question { margin: .7rem 0 1rem; font-size: clamp(1.25rem, 1vw + 1rem, 1.6rem); line-height: 1.35; }
.g-question.is-big { font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem); }

.g-options { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 640px) { .g-options { grid-template-columns: 1fr; } }
.g-option {
  display: flex; align-items: center; gap: 1rem; min-height: 84px; padding: 1rem 1.2rem; border: 0; border-radius: 18px;
  color: #fff; text-align: left; cursor: pointer; font: 600 1.1rem/1.35 var(--font-body); box-shadow: var(--shadow-sm);
  transition: transform .15s, filter .2s, opacity .25s, box-shadow .2s;
}
.g-option.is-compact { min-height: 62px; }
.g-option:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.g-option:active:not(:disabled) { transform: scale(.98); }
.g-option:disabled { cursor: default; }
.g-option.is-rose { background: #e11d48; } .g-option.is-sky { background: #0284c7; }
.g-option.is-violet { background: #7c3aed; } .g-option.is-emerald { background: #059669; }
.g-option.is-chosen { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--primary); transform: scale(1.02); }
.g-option.is-dim { opacity: .4; }
.g-option.is-correct { box-shadow: 0 0 0 4px #fff, 0 0 0 8px #34d399; transform: scale(1.02); animation: g-pop .4s var(--ease); }
.g-option.is-faded { opacity: .35; filter: saturate(.5); }
.g-shape { display: grid; width: 28px; height: 28px; flex: none; }
.g-shape svg { width: 100%; height: 100%; }
.g-opt-text { flex: 1; min-width: 0; }
.g-opt-key { padding: .1rem .5rem; border-radius: 6px; background: rgba(0, 0, 0, .2); font: 600 .85rem var(--font-body); }
.g-opt-count { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .6rem; border-radius: 999px; background: rgba(0, 0, 0, .2); font-size: .85rem; }
@media (max-width: 640px) { .g-opt-key { display: none; } }

.g-result { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-radius: 18px; }
.g-result p { margin: 0; font: 700 1.25rem var(--font-display); }
.g-result.is-ok { background: #059669; color: #fff; animation: g-pop .35s var(--ease); }
.g-result.is-bad { background: #e11d48; color: #fff; }
.g-result.is-none { background: #eceaf6; color: var(--ink); }
.g-result-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.g-streak { display: inline-flex; align-items: center; gap: .3rem; margin-left: auto; padding: .25rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .18); font-weight: 600; font-size: .9rem; }
.g-explain { display: flex; gap: .8rem; padding: 1.2rem; border-radius: 18px; background: var(--amber-bg); color: #78350f; }
.g-explain .gi { color: #d97706; }
.g-explain p { margin: 0; font-size: .95rem; line-height: 1.6; }
.g-correct-combo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; padding: 1.2rem; border-radius: 18px; background: var(--bg-band); }

.g-capture { padding: 1.4rem 1rem; border: 2px dashed #c7d2fe; border-radius: 18px; background: #f8f8ff; text-align: center; }
.g-capture-title { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 0; color: var(--primary); font-weight: 600; }
.g-capture-show { display: flex; align-items: center; justify-content: center; gap: .4rem; min-height: 4.6rem; margin-top: .8rem; }

/* Kod paneli — doim toʻq (kod muharriri koʻrinishi) */
.g-code { overflow: hidden; border-radius: 18px; background: #0f172a; color: #e2e8f0; box-shadow: var(--shadow-md); }
.g-code-head { display: flex; align-items: center; gap: .45rem; padding: .65rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.g-code-head i { width: 11px; height: 11px; border-radius: 50%; }
.g-code-head .d1 { background: #fb7185; } .g-code-head .d2 { background: #fcd34d; } .g-code-head .d3 { background: #34d399; }
.g-code-head span { margin-left: .4rem; font: .8rem ui-monospace, Consolas, monospace; color: #94a3b8; }
.g-code-head em { margin-left: auto; font-style: normal; font-size: .8rem; color: #94a3b8; }
@media (max-width: 600px) { .g-code-head em { display: none; } }
.g-code-lines { list-style: none; margin: 0; padding: .4rem 0; font: 13.5px/1.75 ui-monospace, Consolas, monospace; }
.g-code-row {
  display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .5rem; width: 100%; padding: 0 .6rem;
  border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.g-code-row:disabled { cursor: default; }
.g-code-row:hover:not(:disabled), .g-code-row.is-cursor { background: rgba(255, 255, 255, .08); }
.g-code-row.is-picked { background: rgba(251, 191, 36, .2); box-shadow: inset 0 0 0 1px rgba(252, 211, 77, .7); }
.g-code-row.is-bug { background: rgba(244, 63, 94, .2); box-shadow: inset 0 0 0 1px rgba(251, 113, 133, .6); }
.g-code-row.is-mine { background: rgba(251, 191, 36, .15); }
.g-code-row.is-faded { opacity: .6; }
.g-ln { text-align: right; font-size: .75rem; color: #64748b; user-select: none; }
.g-code-row.is-bug .g-ln { color: #fda4af; font-weight: 700; }
.g-code-text { white-space: pre-wrap; word-break: break-word; }
.g-code-meta { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: #fda4af; }
.g-code-count { display: inline-flex; align-items: center; gap: .15rem; padding: .05rem .4rem; border-radius: 999px; background: rgba(255, 255, 255, .1); color: #cbd5e1; }
.g-code-fix { display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .5rem; padding: 0 .6rem; background: rgba(16, 185, 129, .15); box-shadow: inset 0 0 0 1px rgba(52, 211, 153, .5); color: #d1fae5; }
.g-code-fix .g-ln { color: #6ee7b7; font-weight: 700; }
.g-code-fix .gi { color: #6ee7b7; }

/* ---------------------------------------------------------- oʻyinlar roʻyxati */
.g-hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
@media (max-width: 760px) { .g-hub { grid-template-columns: 1fr; } }
.g-hub-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--ink); transition: translate .3s var(--ease), box-shadow .3s; }
.g-hub-card:hover { translate: 0 -4px; box-shadow: var(--shadow-md); color: var(--ink); }
.g-hub-visual {
  position: relative; isolation: isolate; display: grid; place-content: center; height: 170px; padding: 1rem 1.4rem; background: var(--navy);
}
.g-hub-visual::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(18rem 10rem at 100% 0%, rgba(99, 102, 241, .5), transparent 70%), var(--naqsh-light); }
.g-hub-visual.is-race { display: block; padding: .8rem 1.4rem; }
.g-hub-visual.is-race .g-lane { height: 46px; }
.g-hub-visual.is-race .g-runner { font-size: 1.5rem; }
.g-hub-visual.is-race .g-finish { top: 14px; bottom: 14px; right: 18px; }
.g-hub-visual.is-quiz { display: grid; place-content: stretch; gap: .6rem; padding: 1.2rem 1.6rem; }
.g-hub-visual.is-quiz .g-vq-q { height: 44px; font-size: 1.3rem; }
.g-hub-visual.is-quiz .g-vq-grid span { height: 34px; }
.g-hub-visual.is-code .g-vc { font-size: 12px; }
.g-hub-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem 1.4rem 1.5rem; flex: 1; }
.g-hub-body h2 { margin: 0; font-size: 1.3rem; }
.g-hub-body p { margin: 0; color: var(--muted); font-size: .97rem; }
.g-hub-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.g-hub-meta span { padding: .2rem .65rem; border-radius: 999px; background: #f1f0f9; color: var(--muted); font-size: .8rem; font-weight: 500; }
.g-hub-meta .is-skill { background: var(--primary-soft); color: var(--primary); }
.g-hub-body .link-arrow { margin-top: auto; padding-top: .6rem; }

@media (prefers-reduced-motion: reduce) {
  .g-runner, .g-bob, .g-vc-lens, .g-vq-grid span, .g-count-num, .g-confetti span { animation: none !important; }
  .g-runner { left: 40%; transform: translate(-50%, -50%); }
}