:root {
    /* ───── Vercel design tokens ─────
       --tw-gold  : primary/accent color (amber by default) — drives emphasis, active states, numbers
       --tw-accent: secondary gradient stop (amber highlight)
       Standart tema = "Amber" (Monokai) — typing-settings.js DEFAULTS.theme bilan mos. */
    --tw-gold: #f5a623;
    --tw-bg: #0d0900;
    --tw-accent: #ffd24d;
    --tw-surface: #171206;
    --tw-text: #ededed;
    --tw-muted: #a1a1a1;
    --tw-words-color: #6a5f4a;
    --tw-border: #1f1f1f;
    --tw-border-strong: #2e2e2e;
    --tw-radius: 8px;
    --tw-ui-font: 'Geist', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --tw-code-font: 'Geist Mono', 'JetBrains Mono', 'SF Mono', monospace;
}

html { font-size: 14px; position: relative; min-height: 100%; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    margin-bottom: 60px;
    background-color: var(--tw-bg);
    color: var(--tw-text);
    font-family: var(--tw-ui-font);
    letter-spacing: -.011em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ───── Vercel-style background: fine grid + accent glow (follows theme accent) ───── */
body::before {
    content: '';
    position: fixed; inset: 0; z-index: -2; pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(255,255,255,.035) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 80%);
    mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 35%, transparent 80%);
}
body::after {
    content: '';
    position: fixed; inset: -30% 0 auto 0; height: 70vh; z-index: -2; pointer-events: none;
    background:
        radial-gradient(closest-side at 50% 0%,
            color-mix(in srgb, var(--tw-gold) 22%, transparent), transparent 70%);
    filter: blur(40px);
    opacity: .8;
}
/* Light theme softens the grid */
body[data-tw-theme="Light"]::before {
    background-image:
        linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
}

/* ═══════════ Fon variantlari — Vercel/Next.js uslubidagi 20+ orqa fon ═══════════
   Standart "nextjs" foni yuqoridagi body::before/::after qoidalari bilan beriladi.
   Quyidagilar [data-tw-bg] atributiga qarab uni almashtiradi. Glow rangi mavjud
   bo'lsa --tw-gold (tema accent) ni kuzatadi; ba'zilari o'z palitrasiga ega. */

/* Nuqtalar */
body[data-tw-bg="dots"]::before {
    background-image: radial-gradient(rgba(255,255,255,.13) 1px, transparent 1px);
    background-size: 24px 24px;
}
/* Katta to'r */
body[data-tw-bg="grid-lg"]::before { background-size: 104px 104px; }
/* So'nuvchi to'r (pastga) */
body[data-tw-bg="grid-fade"]::before {
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
    mask-image: linear-gradient(to bottom, #000 0%, transparent 92%);
}
/* Aurora — bir nechta xira rang dog'lari */
body[data-tw-bg="aurora"]::before {
    background-image:
        radial-gradient(42% 32% at 18% 18%, color-mix(in srgb, var(--tw-gold) 38%, transparent), transparent 70%),
        radial-gradient(36% 30% at 82% 24%, rgba(121,40,202,.32), transparent 70%),
        radial-gradient(40% 36% at 60% 82%, rgba(255,45,146,.24), transparent 70%);
    background-size: cover;
    -webkit-mask-image: none; mask-image: none;
    filter: blur(34px); opacity: .9;
}
body[data-tw-bg="aurora"]::after { display: none; }
/* Konus gradient */
body[data-tw-bg="conic"]::before {
    background: conic-gradient(from 180deg at 50% -10%,
        color-mix(in srgb, var(--tw-gold) 32%, transparent),
        rgba(121,40,202,.26),
        color-mix(in srgb, var(--tw-accent) 32%, transparent),
        transparent 62%);
    background-size: cover;
    -webkit-mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 28%, transparent 78%);
    mask-image: radial-gradient(ellipse 100% 70% at 50% 0%, #000 28%, transparent 78%);
}
body[data-tw-bg="conic"]::after { display: none; }
/* Projektor (markaziy yog'du) */
body[data-tw-bg="spotlight"]::before { background-image: none; }
body[data-tw-bg="spotlight"]::after {
    inset: 0; height: 100vh;
    background: radial-gradient(40% 46% at 50% 34%,
        color-mix(in srgb, var(--tw-gold) 20%, transparent), transparent 70%);
    filter: blur(32px); opacity: .85;
}
/* Mesh gradient (4 burchak) */
body[data-tw-bg="mesh"]::before {
    background-image:
        radial-gradient(at 0% 0%, color-mix(in srgb, var(--tw-gold) 26%, transparent), transparent 50%),
        radial-gradient(at 100% 0%, rgba(121,40,202,.24), transparent 50%),
        radial-gradient(at 0% 100%, rgba(0,200,255,.17), transparent 50%),
        radial-gradient(at 100% 100%, rgba(255,45,146,.17), transparent 50%);
    background-size: cover;
    -webkit-mask-image: none; mask-image: none; opacity: .72;
}
body[data-tw-bg="mesh"]::after { display: none; }
/* Nurlar (diagonal beams) */
body[data-tw-bg="beams"]::before {
    background-image: repeating-linear-gradient(115deg,
        transparent 0 38px,
        color-mix(in srgb, var(--tw-gold) 8%, transparent) 38px 39px);
    background-size: auto;
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 28%, transparent 82%);
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 28%, transparent 82%);
}
/* Ikki yog'du (chap ko'k, o'ng pushti) */
body[data-tw-bg="dual"]::before { background-image: none; }
body[data-tw-bg="dual"]::after {
    inset: -20% 0 auto 0; height: 90vh;
    background:
        radial-gradient(closest-side at 20% 0%, color-mix(in srgb, var(--tw-gold) 24%, transparent), transparent 70%),
        radial-gradient(closest-side at 80% 10%, rgba(255,45,146,.22), transparent 70%);
    filter: blur(52px); opacity: .85;
}
/* Vinetka (chetlar qoraygan) */
body[data-tw-bg="vignette"]::after {
    inset: 0; height: 100vh; filter: none; opacity: 1;
    background:
        radial-gradient(120% 120% at 50% 50%, transparent 55%, rgba(0,0,0,.85) 100%),
        radial-gradient(50% 40% at 50% 0%, color-mix(in srgb, var(--tw-gold) 15%, transparent), transparent 70%);
}
/* Diagonal chiziqlar */
body[data-tw-bg="stripes"]::before {
    background-image: repeating-linear-gradient(45deg,
        rgba(255,255,255,.028) 0 10px, transparent 10px 22px);
    background-size: auto;
    -webkit-mask-image: none; mask-image: none;
}
/* Radial nuqtalar (markazga maskalangan) */
body[data-tw-bg="radial-dots"]::before {
    background-image: radial-gradient(rgba(255,255,255,.17) 1px, transparent 1px);
    background-size: 22px 22px;
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 40%, #000 18%, transparent 76%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 40%, #000 18%, transparent 76%);
}
/* Halqalar (topografik) */
body[data-tw-bg="rings"]::before {
    background-image: repeating-radial-gradient(circle at 50% 0%,
        transparent 0 38px,
        color-mix(in srgb, var(--tw-gold) 10%, transparent) 38px 40px);
    background-size: auto;
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 28%, transparent 82%);
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 28%, transparent 82%);
}
body[data-tw-bg="rings"]::after { display: none; }
/* Quyosh botishi (pastdan iliq) */
body[data-tw-bg="sunset"]::before { background-image: none; }
body[data-tw-bg="sunset"]::after {
    inset: auto 0 -20% 0; top: auto; height: 80vh;
    background:
        radial-gradient(closest-side at 50% 100%, rgba(255,153,0,.30), transparent 70%),
        radial-gradient(closest-side at 28% 100%, rgba(255,45,146,.22), transparent 70%);
    filter: blur(52px); opacity: .9;
}
/* Okean (ko'k-yashil yog'du) */
body[data-tw-bg="ocean"]::after {
    background: radial-gradient(closest-side at 50% 0%, rgba(0,200,255,.24), transparent 70%);
}
/* Binafsha */
body[data-tw-bg="violet"]::after {
    background: radial-gradient(closest-side at 50% 0%, rgba(121,40,202,.32), transparent 70%);
}
/* Zumrad (yashil) */
body[data-tw-bg="emerald"]::after {
    background: radial-gradient(closest-side at 50% 0%, rgba(0,200,131,.26), transparent 70%);
}
/* Qizil (crimson) */
body[data-tw-bg="crimson"]::after {
    background: radial-gradient(closest-side at 50% 0%, rgba(255,45,90,.26), transparent 70%);
}
/* Pastki yog'du */
body[data-tw-bg="glow-bottom"]::before { background-image: none; }
body[data-tw-bg="glow-bottom"]::after {
    inset: auto 0 -25% 0; top: auto; height: 70vh;
    background: radial-gradient(closest-side at 50% 100%,
        color-mix(in srgb, var(--tw-gold) 24%, transparent), transparent 70%);
    filter: blur(46px); opacity: .85;
}
/* Sof (minimal — naqshsiz) */
body[data-tw-bg="mono"]::before { background-image: none; }
body[data-tw-bg="mono"]::after { display: none; }

.tw-navbar {
    background-color: rgba(0,0,0,.7);
    border-bottom: 1px solid var(--tw-border) !important;
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
}

.tw-brand {
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--tw-text);
    letter-spacing: -.02em;
    font-family: var(--tw-ui-font);
}

.tw-accent { color: var(--tw-accent); }

.navbar-brand, .nav-link { color: var(--tw-text) !important; }
.nav-link:hover { color: var(--tw-gold) !important; }

/* Navbar icons */
.tw-nav-link {
    display: flex;
    align-items: center;
    gap: .32rem;
    font-size: .875rem;
    font-weight: 500;
    transition: color .15s, transform .15s;
}
.tw-nav-link i { font-size: 1rem; }
.tw-nav-link:hover { transform: translateY(-1px); }

/* Vercel primary button — solid white, dark text */
.btn-tw {
    background: #ededed;
    border: 1px solid #ededed;
    color: #000;
    font-weight: 500;
    font-family: var(--tw-ui-font);
    letter-spacing: -.01em;
    border-radius: var(--tw-radius);
    padding: .5rem 1.25rem;
    transition: background .15s, border-color .15s, transform .1s, opacity .15s;
}
.btn-tw:hover {
    background: #fff;
    border-color: #fff;
    color: #000;
    transform: translateY(-1px);
}
.btn-tw:active { transform: translateY(0); }

.btn-tw-outline {
    background: transparent;
    border: 1px solid rgba(138,138,160,.35);
    color: var(--tw-text);
    font-weight: 500;
    font-family: var(--tw-ui-font);
    border-radius: var(--tw-radius);
    padding: .5rem 1.25rem;
    transition: border-color .15s, background .15s, transform .1s;
}
.btn-tw-outline:hover { border-color: var(--tw-gold); color: var(--tw-text); transform: translateY(-1px); }
.btn-tw-outline:active { transform: translateY(0); }

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    background-color: rgba(0,0,0,.6);
    border-top: 1px solid var(--tw-border) !important;
    color: var(--tw-muted);
    backdrop-filter: blur(12px);
}

.tw-hero { text-align: center; padding: 4rem 1rem; }
.tw-hero h1 { color: var(--tw-text); font-weight: 700; letter-spacing: -.03em; }
.tw-hero .lead { color: var(--tw-muted); }

/* ───── Typing engine ───── */
:root { --tw-font: 'JetBrains Mono', monospace; --tw-fontsize: 18px; --tw-caret-anim: .1s; }

.tw-practice { outline: none; max-width: 980px; margin: 1.5rem auto; }

.tw-config {
    display: flex; flex-wrap: wrap; gap: 1rem;
    justify-content: center; margin-bottom: 1.25rem;
    background: var(--tw-surface); padding: .65rem 1rem; border-radius: 14px;
    border: 1px solid rgba(0,112,243,.08);
}
.tw-config-group { display: flex; align-items: center; gap: .3rem; }
.tw-config-label {
    color: #888888; font-size: .78rem; margin-right: .2rem;
    font-weight: 500; display: flex; align-items: center; gap: .25rem;
}
.tw-config-label i { font-size: .9rem; }
.tw-opt {
    background: transparent; border: none; color: #888888;
    padding: .2rem .55rem; border-radius: 8px; cursor: pointer;
    font-size: .85rem; font-family: var(--tw-ui-font); font-weight: 500;
    transition: color .15s, background .15s;
}
.tw-opt:hover { color: var(--tw-text); background: rgba(255,255,255,.05); }
.tw-opt.tw-active {
    color: var(--tw-gold); font-weight: 700;
    background: rgba(0,112,243,.12);
    box-shadow: inset 0 0 0 1px rgba(0,112,243,.25);
}

.tw-stats {
    display: flex; gap: 2rem; justify-content: center; margin-bottom: .75rem;
}
.tw-stat {
    text-align: center;
    background: var(--tw-surface);
    border-radius: 12px;
    padding: .6rem 1.25rem;
    border: 1px solid rgba(0,112,243,.1);
    min-width: 80px;
}
.tw-stat span {
    font-size: 2rem; font-weight: 700; color: var(--tw-gold);
    font-family: var(--tw-code-font); line-height: 1;
    display: block;
}
.tw-stat label {
    display: flex; align-items: center; justify-content: center; gap: .25rem;
    margin-top: .2rem; font-size: .68rem; color: #888888;
    text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
}
.tw-stat label i { font-size: .8rem; }

.tw-words {
    position: relative;
    font-family: var(--tw-font);
    font-size: var(--tw-fontsize);
    line-height: 1.9;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--tw-words-color, #666666);
    user-select: none;
    padding: .75rem .25rem;
    height: 5.7em;          /* 3 qator (line-height 1.9 × 3) — qolgani yuqoriga suriladi */
    overflow: hidden;
    border-radius: 8px;
}
/* Harflar shu ichki blokda — joriy qator tepada turishi uchun vertikal suriladi */
.tw-words-inner { position: relative; transition: transform .15s ease; }
.tw-letter { position: relative; }
.tw-correct { color: var(--tw-text); }
.tw-incorrect { color: #ff5555; text-decoration: underline; }

.tw-caret {
    position: absolute; left: 0; top: 0;
    width: 2px; background: var(--tw-gold);
    box-sizing: border-box;
    transition: transform var(--tw-caret-anim) ease;
    animation: tw-blink 1s steps(1) infinite;
    pointer-events: none;
}
@keyframes tw-blink { 50% { opacity: 0; } }
@keyframes tw-caret-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@keyframes tw-caret-rainbow { 0% { background-position: 0 0; } 100% { background-position: 0 300%; } }

/* O'lcham/joylashuv JS (moveCaret) da hisoblanadi — bu yerda faqat ko'rinish */
body[data-tw-caret="Block"] .tw-caret { opacity: .35; }
body[data-tw-caret="Off"] .tw-caret { display: none; }

/* Qo'shimcha karet uslublari */
body[data-tw-caret="Box"]   .tw-caret { background: transparent; border: 2px solid var(--tw-gold); border-radius: 2px; }
body[data-tw-caret="Laser"] .tw-caret { background: linear-gradient(var(--tw-gold), var(--tw-accent)); box-shadow: 0 0 8px var(--tw-gold); opacity: .85; animation: none; border-radius: 2px; }
body[data-tw-caret="Wedge"] .tw-caret { clip-path: polygon(0 0, 100% 50%, 0 100%); }
body[data-tw-caret="Neon"]  .tw-caret { box-shadow: 0 0 4px var(--tw-gold), 0 0 9px var(--tw-gold); animation: none; border-radius: 2px; }
body[data-tw-caret="Pulse"] .tw-caret { animation: tw-caret-pulse .8s ease-in-out infinite; border-radius: 2px; }
body[data-tw-caret="Double"] .tw-caret { background: transparent; border-left: 2px solid var(--tw-gold); border-right: 2px solid var(--tw-gold); }
body[data-tw-caret="Dot"]   .tw-caret { border-radius: 50%; }
body[data-tw-caret="Rainbow"] .tw-caret { background: linear-gradient(var(--tw-gold), #ff2d92, #facc15, #2dd4bf, var(--tw-gold)); background-size: 100% 300%; animation: tw-caret-rainbow 2s linear infinite; border-radius: 2px; }
body[data-tw-caret="Thick"] .tw-caret,
body[data-tw-caret="Bottom"] .tw-caret { border-radius: 1px; }

.tw-actions { text-align: center; margin-top: 1.25rem; }
.tw-hint { display: block; margin-top: .6rem; color: #888888; font-size: .83rem; transition: opacity .2s; }

.tw-result {
    margin: 2rem auto 0; max-width: 600px; text-align: center;
    background: var(--tw-surface); border-radius: 16px; padding: 1.75rem;
    border-top: 3px solid var(--tw-gold);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    animation: tw-slide-in .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tw-slide-in {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tw-result-grid {
    display: flex; justify-content: space-around; margin: 1.25rem 0;
    gap: .5rem;
}
.tw-result-grid > div {
    background: rgba(0,112,243,.07);
    border-radius: 12px;
    padding: .75rem 1rem;
    flex: 1;
    border: 1px solid rgba(0,112,243,.12);
}
.tw-result-grid span { font-size: 1.9rem; font-weight: 700; color: var(--tw-gold); display: block; font-family: var(--tw-code-font); }
.tw-result-grid label { font-size: .68rem; color: #888888; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.tw-r-msg { color: var(--tw-accent); font-weight: 600; min-height: 1.2em; font-size: 1.05rem; }
.tw-r-source { display: flex; align-items: center; justify-content: center; gap: .5rem; color: #b9b9c8; font-style: italic; font-size: .98rem; text-align: center; }
.tw-r-source .bi { color: var(--tw-gold); font-style: normal; opacity: .85; }
.tw-r-source span { color: #d6d6e0; font-weight: 600; }

/* ───── Natija ekrani (monkeytype uslubida — grafik + statistika) ───── */
#tw-practice.tw-show-result .tw-config,
#tw-practice.tw-show-result .tw-stats,
#tw-practice.tw-show-result .tw-practice-track,
#tw-practice.tw-show-result .tw-words,
#tw-practice.tw-show-result .tw-actions,
#tw-contest-game.tw-show-result .tw-stats,
#tw-contest-game.tw-show-result .tw-practice-track,
#tw-contest-game.tw-show-result .tw-words,
#tw-contest-game.tw-show-result .tw-actions { display: none !important; }

.tw-result-screen {
    display: flex; flex-direction: column; gap: 1.5rem;
    max-width: 1000px; margin: 1rem auto 0;
    animation: tw-slide-in .3s cubic-bezier(.34,1.56,.64,1);
}
.tw-result-top {
    display: flex; gap: 2rem; align-items: center; flex-wrap: wrap;
}
.tw-result-hero { display: flex; flex-direction: column; gap: 1rem; min-width: 150px; }
.tw-hero-stat { position: relative; }
.tw-hero-stat label {
    display: block; color: #888888; font-size: .95rem;
    text-transform: lowercase; letter-spacing: .03em;
}
.tw-hero-val {
    font-size: 4rem; font-weight: 700; line-height: 1;
    color: var(--tw-gold); font-family: var(--tw-code-font);
}
.tw-hero-val small { font-size: 1.6rem; }

.tw-crown {
    display: block; color: var(--tw-gold); line-height: 1; margin-bottom: .15rem;
    filter: drop-shadow(0 0 8px rgba(0,112,243,.55));
    animation: tw-crown-pop .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes tw-crown-pop {
    0%   { transform: translateY(10px) scale(.3); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.tw-result-chart { flex: 1; min-width: 280px; position: relative; }
.tw-result-chart canvas { width: 100%; height: 200px; display: block; }
.tw-chart-legend {
    display: flex; gap: 1.2rem; justify-content: flex-end;
    margin-top: .4rem; font-size: .78rem; color: #888888;
}
.tw-lg-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: .3rem; vertical-align: middle;
}
.tw-lg-wpm { background: var(--tw-gold); }
.tw-lg-raw { background: rgba(138,138,160,.7); }
.tw-lg-err { background: #ff5555; }

.tw-result-meta {
    display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; justify-content: center;
    background: var(--tw-surface); border-radius: 14px;
    padding: 1.1rem 1.5rem; border: 1px solid rgba(0,112,243,.1);
    text-align: center;
}
.tw-result-meta > div { display: flex; flex-direction: column; }
.tw-result-meta label {
    color: #888888; font-size: .76rem;
    text-transform: lowercase; letter-spacing: .03em;
}
.tw-result-meta > div > span {
    font-size: 1.7rem; font-weight: 700; color: var(--tw-gold);
    font-family: var(--tw-code-font); line-height: 1.15;
}
.tw-result-meta > div > span small { font-size: .85rem; }
.tw-result-meta > div > small { color: #666666; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; }

.tw-result-actions { display: flex; gap: .8rem; justify-content: center; }
#tw-result .tw-r-msg { text-align: center; }

/* Grafik hover tooltip */
.tw-chart-tip {
    position: absolute; top: 0; pointer-events: none; z-index: 5;
    background: var(--tw-surface); border: 1px solid rgba(0,112,243,.3);
    border-radius: 8px; padding: .5rem .7rem; font-size: .76rem;
    color: var(--tw-text); box-shadow: 0 6px 18px rgba(0,0,0,.4);
    white-space: nowrap; line-height: 1.55;
}
.tw-chart-tip .tw-tip-sec { color: var(--tw-gold); font-weight: 700; margin-bottom: .15rem; }
.tw-chart-tip b { color: var(--tw-gold); }
.tw-chart-tip .tw-lg-dot { width: 8px; height: 8px; }

/* Yangi rekord — butun fon oltin nur bilan yoritiladi */
body.tw-record {
    background-image: radial-gradient(circle at 50% -10%, rgba(0,112,243,.28), transparent 55%);
    background-attachment: fixed;
    animation: tw-record-glow 1.2s ease;
}
@keyframes tw-record-glow {
    0%   { filter: brightness(1.3) saturate(1.2); }
    100% { filter: brightness(1) saturate(1); }
}

/* ───── Temalar (JS orqali CSS o'zgaruvchilari orqali boshqariladi — typing-settings.js) ───── */
/* FOUC oldini olish uchun Dark standart bo'lib qoladi */

/* ───── Auth ───── */
.tw-auth { max-width: 420px; margin: 2.5rem auto; background: var(--tw-surface);
    padding: 2rem; border-radius: 16px; border-top: 3px solid var(--tw-gold);
    box-shadow: 0 8px 32px rgba(0,0,0,.35); }
.tw-auth .form-control, .tw-auth .form-select {
    background: var(--tw-bg); color: var(--tw-text);
    border-color: rgba(255,255,255,.1); border-radius: 10px;
    font-family: var(--tw-ui-font);
}
.tw-auth .form-control:focus, .tw-auth .form-select:focus { border-color: var(--tw-gold);
    box-shadow: 0 0 0 .15rem rgba(0,112,243,.25); background: var(--tw-bg); color: var(--tw-text); }
.tw-auth-err { min-height: 1.2em; font-size: .9rem; }

/* Global form overrides for tema moslik */
.form-select, .form-control {
    background-color: var(--tw-bg) !important;
    color: var(--tw-text) !important;
    border-color: rgba(255,255,255,.1) !important;
}
.form-select:focus, .form-control:focus {
    border-color: var(--tw-gold) !important;
    box-shadow: 0 0 0 .15rem rgba(0,112,243,.2) !important;
}

/* ───── Leaderboard ───── */
.tw-lb { max-width: 820px; margin: 1.5rem auto; padding: 0 .75rem; }

.tw-lb-head { text-align: center; margin-bottom: 1.25rem; }
.tw-lb-title { display: flex; align-items: center; justify-content: center; gap: .6rem; }
.tw-lb-title i { font-size: 1.9rem;
    background: linear-gradient(135deg, var(--tw-gold), var(--tw-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tw-lb-title h2 { margin: 0; font-weight: 700; letter-spacing: .02em; }
.tw-lb-sub { color: #888888; font-size: .9rem; margin: .15rem 0 0; }

.tw-lb-tabs { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.4rem; }
.tw-tab { display: inline-flex; align-items: center; gap: .4rem;
    background: var(--tw-surface); border: 1px solid #2e2e2e; color: #888888;
    padding: .45rem 1rem; border-radius: 999px; cursor: pointer; font-weight: 600;
    font-size: .9rem; transition: all .15s ease; }
.tw-tab i { font-size: .95rem; }
.tw-tab:hover { color: var(--tw-text); border-color: var(--tw-gold); }
.tw-tab.tw-active { background: linear-gradient(135deg, var(--tw-gold), var(--tw-accent));
    color: #ffffff; border-color: transparent; box-shadow: 0 4px 14px rgba(0,112,243,.3); }

/* Podium (top 3) */
.tw-lb-podium { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: .75rem;
    align-items: end; margin-bottom: 1.6rem; }
.tw-pod { background: var(--tw-surface); border: 1px solid #2e2e2e; border-radius: 16px;
    padding: 1rem .6rem .9rem; text-align: center; position: relative;
    display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.tw-pod-empty { background: transparent; border-style: dashed; border-color: #1f1f1f; min-height: 140px; }
.tw-pod-first { padding-top: 1.6rem; border-color: var(--tw-gold);
    background: linear-gradient(180deg, rgba(0,112,243,.14), var(--tw-surface) 55%);
    box-shadow: 0 6px 22px rgba(0,112,243,.18); }
.tw-pod-second { border-color: #c0c4d0; }
.tw-pod-third { border-color: #cd8b50; }
.tw-pod-rank { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700;
    position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
    background: var(--tw-bg); border: 1px solid #2e2e2e; border-radius: 999px;
    padding: .15rem .55rem; font-size: .85rem; }
.tw-pod-first .tw-pod-rank { color: var(--tw-gold); border-color: var(--tw-gold); }
.tw-pod-second .tw-pod-rank { color: #c0c4d0; border-color: #c0c4d0; }
.tw-pod-third .tw-pod-rank { color: #cd8b50; border-color: #cd8b50; }
.tw-pod-name { font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.tw-pod-region { color: #888888; font-size: .75rem; display: flex; align-items: center; gap: .25rem; }
.tw-pod-region i { font-size: .7rem; }
.tw-pod-wpm { color: var(--tw-gold); font-weight: 800; font-size: 1.5rem; line-height: 1; margin-top: .2rem; }
.tw-pod-wpm small { font-size: .6rem; color: #888888; margin-left: .2rem; font-weight: 600; }
.tw-pod-acc { color: #999999; font-size: .8rem; display: flex; align-items: center; gap: .3rem; }
.tw-pod.tw-me { outline: 2px solid var(--tw-accent); }

/* Avatar */
.tw-av { border-radius: 50%; object-fit: cover; display: inline-flex;
    align-items: center; justify-content: center; flex: none; }
.tw-av-i { background: linear-gradient(135deg, var(--tw-gold), var(--tw-accent));
    color: #ffffff; font-weight: 700; }

/* Ro'yxat (4+) */
.tw-lb-list-head, .tw-lb-row { display: grid;
    grid-template-columns: 48px 1fr 1fr 90px 70px; align-items: center;
    gap: .5rem; padding: .55rem .9rem; }
.tw-lb-list-head { color: #888888; font-size: .72rem; text-transform: uppercase;
    letter-spacing: .04em; }
.tw-lb-list-head .c-acc, .tw-lb-list-head .c-wpm { text-align: right; }
.tw-lb-row { background: var(--tw-surface); border: 1px solid #1f1f1f; border-radius: 12px;
    margin-bottom: .4rem; transition: border-color .15s ease; }
.tw-lb-row:hover { border-color: #444444; }
.tw-lb-row .c-rank { color: #888888; font-weight: 700; }
.tw-lb-row .c-user { display: flex; align-items: center; gap: .55rem; min-width: 0; }
.tw-lb-row .tw-uname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-lb-row .c-region { color: #888888; font-size: .85rem; }
.tw-lb-row .c-acc { text-align: right; color: #999999; }
.tw-lb-row .c-wpm { text-align: right; color: var(--tw-gold); font-weight: 800; font-size: 1.05rem; }
.tw-lb-row.tw-me { border-color: var(--tw-gold);
    background: linear-gradient(90deg, rgba(0,112,243,.14), var(--tw-surface) 60%); }
.tw-you { color: var(--tw-accent); font-size: .8rem; }

.tw-lb-sep { text-align: center; color: #555555; font-size: 1.2rem; padding: .25rem 0; letter-spacing: .3em; }

.tw-lb-loading, .tw-lb-empty { text-align: center; color: #888888; padding: 2.5rem 1rem; }
.tw-lb-empty i { font-size: 2.2rem; display: block; margin-bottom: .5rem; color: var(--tw-gold); }
.tw-lb-err i { color: #e26; }
.tw-spin { display: inline-block; animation: tw-spin 1s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .tw-lb-list-head .c-region, .tw-lb-row .c-region { display: none; }
    .tw-lb-list-head, .tw-lb-row { grid-template-columns: 36px 1fr 70px 60px; }
}

/* ───── Do'stlar xonasi (Rooms sahifa — yangi dizayn) ───── */
.tw-rooms { max-width: 920px; margin: 2.5rem auto; padding: 0 1rem; }

.tw-rooms-hero { text-align: center; margin-bottom: 2.25rem; }
.tw-rooms-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .8rem; font-weight: 600; letter-spacing: .02em;
    color: var(--tw-gold); background: color-mix(in srgb, var(--tw-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tw-gold) 30%, transparent);
    padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.tw-rooms-hero h1 {
    font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 800; letter-spacing: -.03em;
    color: var(--tw-text); margin: 0 0 .6rem;
}
.tw-rooms-hero p { color: var(--tw-muted); max-width: 560px; margin: 0 auto; font-size: 1rem; }

.tw-rooms-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; margin-bottom: 2.25rem;
    align-items: start;
}
@@media (max-width: 720px) { .tw-rooms-grid { grid-template-columns: 1fr; } }

.tw-rcard {
    background: var(--tw-surface); border: 1px solid var(--tw-border);
    border-radius: 16px; padding: 1.75rem;
    display: flex; flex-direction: column; gap: .65rem;
    transition: border-color .2s, transform .2s, box-shadow .2s;
}
.tw-rcard:hover { border-color: var(--tw-border-strong); transform: translateY(-3px);
    box-shadow: 0 12px 34px rgba(0,0,0,.45); }
.tw-rcard-icon {
    width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
    font-size: 1.5rem; margin-bottom: .25rem;
}
.tw-rcard--create .tw-rcard-icon {
    color: var(--tw-gold); background: color-mix(in srgb, var(--tw-gold) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tw-gold) 30%, transparent);
}
.tw-rcard--join .tw-rcard-icon {
    color: var(--tw-accent); background: color-mix(in srgb, var(--tw-accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tw-accent) 30%, transparent);
}
.tw-rcard h2 { font-size: 1.2rem; font-weight: 700; color: var(--tw-text); margin: 0; }
.tw-rcard p { color: var(--tw-muted); font-size: .92rem; margin: 0; flex: 1; }
.tw-rcard-err { color: #ff6b6b; font-size: .85rem; min-height: 1em; }

.tw-rbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    width: 100%; margin-top: .5rem; padding: .75rem 1rem;
    background: var(--tw-gold); color: #fff; border: 1px solid var(--tw-gold);
    border-radius: 10px; font-family: var(--tw-ui-font); font-weight: 600; font-size: .95rem;
    cursor: pointer; transition: filter .2s, transform .1s, opacity .2s;
}
.tw-rbtn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.tw-rbtn:disabled { opacity: .55; cursor: default; transform: none; }
.tw-rbtn--outline {
    background: transparent; color: var(--tw-text); border-color: var(--tw-border-strong);
}
.tw-rbtn--outline:hover { border-color: var(--tw-accent); color: var(--tw-accent); filter: none; }

.tw-join-form { display: flex; flex-direction: column; gap: .65rem; margin-top: .5rem; }
.tw-join-input {
    display: flex; align-items: center; gap: .5rem;
    background: var(--tw-bg); border: 1px solid var(--tw-border-strong);
    border-radius: 10px; padding: 0 .85rem; transition: border-color .2s;
}
.tw-join-input:focus-within { border-color: var(--tw-accent); }
.tw-join-input i { color: var(--tw-muted); font-size: 1.05rem; }
.tw-join-input input {
    flex: 1; background: transparent; border: 0; outline: 0; color: var(--tw-text);
    font-family: var(--tw-code-font); font-size: 1.1rem; font-weight: 700;
    letter-spacing: .28em; text-transform: uppercase; padding: .7rem 0;
}
.tw-join-input input::placeholder { color: var(--tw-words-color); letter-spacing: .28em; font-weight: 500; }

.tw-rules {
    background: var(--tw-surface); border: 1px solid var(--tw-border);
    border-radius: 16px; padding: 1.75rem;
}
.tw-rules h3 {
    display: flex; align-items: center; gap: .55rem;
    font-size: 1.1rem; font-weight: 700; color: var(--tw-text); margin: 0 0 1.25rem;
}
.tw-rules h3 i { color: var(--tw-gold); }
.tw-rules-list { list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem 1.5rem; }
@@media (max-width: 720px) { .tw-rules-list { grid-template-columns: 1fr; } }
.tw-rules-list li { display: flex; gap: .8rem; align-items: flex-start; }
.tw-rules-list li > i {
    flex: none; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
    color: var(--tw-gold); background: color-mix(in srgb, var(--tw-gold) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--tw-gold) 22%, transparent); font-size: 1rem;
}
.tw-rules-list strong { display: block; color: var(--tw-text); font-size: .92rem; margin-bottom: .15rem; }
.tw-rules-list div { color: var(--tw-muted); font-size: .85rem; line-height: 1.45; }

/* Xona yopildi (host chiqdi) overlay */
.tw-room-closed {
    background: var(--tw-surface); border: 1px solid color-mix(in srgb, #ff6b6b 35%, var(--tw-border));
    border-radius: 16px; padding: 2rem; text-align: center; max-width: 480px; margin: 2rem auto;
}
.tw-room-closed i { font-size: 2.4rem; color: #ff6b6b; }
.tw-room-closed h4 { color: var(--tw-text); font-weight: 700; margin: .75rem 0 .35rem; }
.tw-room-closed p { color: var(--tw-muted); margin-bottom: 1.25rem; }

/* Xona yaratish — poyga sozlamalari (karta ichida, chapga tekislangan, ixcham) */
.tw-room-config {
    flex-direction: column; align-items: stretch; gap: .5rem;
    margin: .25rem 0 .35rem; padding: .75rem .85rem; width: 100%;
}
.tw-room-config .tw-config-group { flex-wrap: wrap; gap: .25rem; }
.tw-room-config .tw-config-label { min-width: 58px; }

/* ───── Xona poyga natijalari (barcha o'yinchilar bitta oynada) ───── */
.tw-room-result {
    background: var(--tw-surface); border: 1px solid var(--tw-border);
    border-radius: 16px; padding: 1.5rem; border-top: 3px solid var(--tw-gold);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    animation: tw-slide-in .3s cubic-bezier(.34,1.56,.64,1);
}
.tw-rr-head { text-align: center; margin-bottom: 1.1rem; }
.tw-rr-head i { font-size: 2rem; color: var(--tw-gold); }
.tw-rr-head h4 { color: var(--tw-text); font-weight: 800; margin: .4rem 0 .15rem; }
.tw-rr-head p { color: var(--tw-muted); font-size: .85rem; margin: 0; }

.tw-rr-chart { position: relative; margin-bottom: 1.1rem; }
.tw-rr-chart canvas { width: 100%; height: 220px; display: block; }
.tw-rr-legend {
    display: flex; flex-wrap: wrap; gap: .4rem 1rem; justify-content: center;
    margin-top: .6rem; font-size: .8rem; color: var(--tw-muted);
}
.tw-rr-lg { display: inline-flex; align-items: center; }
.tw-rr-dot {
    display: inline-block; width: 10px; height: 10px; border-radius: 50%;
    margin-right: .4rem; flex: 0 0 auto;
}
.tw-rr-actions { text-align: center; margin-top: 1.2rem; }

.tw-rr-cards { display: flex; flex-direction: column; gap: .6rem; }
.tw-rr-card {
    display: flex; align-items: center; gap: .85rem;
    background: rgba(255,255,255,.025); border: 1px solid var(--tw-border);
    border-radius: 12px; padding: .7rem .9rem;
    transition: border-color .2s, transform .2s;
}
.tw-rr-card.tw-rr-winner {
    border-color: color-mix(in srgb, var(--tw-gold) 50%, transparent);
    background: color-mix(in srgb, var(--tw-gold) 8%, transparent);
}
.tw-rr-card.tw-rr-me { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-accent) 45%, transparent); }
.tw-rr-rank { min-width: 2.2rem; text-align: center; }
.tw-rr-medal { font-size: 1.5rem; }
.tw-rr-place { font-size: 1.1rem; font-weight: 700; color: var(--tw-muted); }
.tw-rr-name { flex: 1; font-weight: 600; color: var(--tw-text); }
.tw-rr-name small { color: var(--tw-muted); font-weight: 500; }
.tw-rr-metrics { display: flex; gap: 1.1rem; }
.tw-rr-m { text-align: center; min-width: 48px; }
.tw-rr-m span { display: block; font-size: 1.25rem; font-weight: 700; color: var(--tw-gold);
    font-family: var(--tw-code-font); line-height: 1; }
.tw-rr-m small { font-size: .7rem; }
.tw-rr-m label { font-size: .62rem; color: var(--tw-muted); text-transform: uppercase; letter-spacing: .05em; }
@media (max-width: 520px) {
    .tw-rr-card { flex-wrap: wrap; }
    .tw-rr-metrics { width: 100%; justify-content: space-around; }
}

.tw-room-page { max-width: 960px; margin: 1.5rem auto; }
.tw-room-code { font-size: 1.6rem; font-weight: 800; color: var(--tw-gold);
    letter-spacing: .25em; font-family: var(--tw-font); }

.tw-players { list-style: none; padding: 0; margin: 0; }
.tw-player { background: var(--tw-surface); border-radius: 10px; padding: .55rem .8rem; margin-bottom: .5rem;
    border: 1px solid rgba(255,255,255,.04); transition: border-color .2s; }
.tw-player.tw-done { border-color: rgba(0,112,243,.4); background: rgba(0,112,243,.06); }
.tw-player-top { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; margin-bottom: .3rem; }
.tw-player-wpm { color: var(--tw-gold); font-weight: 700; font-family: var(--tw-code-font); font-size: .9rem; }
/* Legacy bar (fallback) */
.tw-bar { height: 8px; background: rgba(0,112,243,.08); border-radius: 4px; overflow: hidden; }
.tw-bar-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--tw-gold), var(--tw-accent));
    transition: width .15s ease; }

/* ───── Cheetah Runner Track ───── */
.tw-track {
    position: relative;
    height: 56px;
    background: rgba(0,112,243,.04);
    border: 1px solid rgba(0,112,243,.1);
    border-radius: 10px;
    overflow: hidden;
    margin: .25rem 0;
}
.tw-track::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent 28px,
        rgba(0,112,243,.04) 28px,
        rgba(0,112,243,.04) 29px
    );
    pointer-events: none;
}
.tw-track-finish {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    opacity: .55;
    z-index: 1;
    pointer-events: none;
    line-height: 1;
}
.tw-cheetah-run {
    position: absolute;
    top: 50%;
    left: 2%;
    transform: translateY(-60%);
    transition: left .2s cubic-bezier(.25,.8,.35,1);
    z-index: 2;
    pointer-events: none;
}

/* Cheetah color variants */
.tw-cheetah-gold   { color: #0070f3; }
.tw-cheetah-blue   { color: #5aa0ff; }
.tw-cheetah-green  { color: #40d870; }
.tw-cheetah-purple { color: #c060ff; }
.tw-cheetah-red    { color: #ff5566; }
.tw-cheetah-cyan   { color: #40d8e8; }
.tw-cheetah-pink   { color: #ff5599; }
.tw-cheetah-orange { color: #ff9933; }
.tw-cheetah-teal   { color: #2dd4bf; }
.tw-cheetah-violet { color: #8b5cf6; }
.tw-cheetah-gray   { color: #888888; }

/* The running SVG */
.tw-cheetah-svg {
    width: 64px;
    height: 40px;
    overflow: visible;
    display: block;
    filter: drop-shadow(0 3px 8px rgba(0,0,0,.45));
    animation: tw-gallop .42s ease-in-out infinite;
}

/* Leg animation — transform-box makes origin relative to each element */
.tw-cheetah-svg .tw-leg-bl,
.tw-cheetah-svg .tw-leg-br,
.tw-cheetah-svg .tw-leg-fl,
.tw-cheetah-svg .tw-leg-fr {
    transform-box: fill-box;
    transform-origin: 50% 0%;
}
.tw-cheetah-svg .tw-leg-bl { animation: tw-leg-a .42s ease-in-out infinite alternate; }
.tw-cheetah-svg .tw-leg-br { animation: tw-leg-b .42s ease-in-out infinite alternate; }
.tw-cheetah-svg .tw-leg-fl { animation: tw-leg-b .42s ease-in-out infinite alternate; }
.tw-cheetah-svg .tw-leg-fr { animation: tw-leg-a .42s ease-in-out infinite alternate; }

@keyframes tw-leg-a {
    from { transform: rotate(-30deg); }
    to   { transform: rotate(22deg); }
}
@keyframes tw-leg-b {
    from { transform: rotate(22deg); }
    to   { transform: rotate(-30deg); }
}
@keyframes tw-gallop {
    0%, 100% { transform: translateY(0) rotate(-.5deg); }
    50%       { transform: translateY(-3px) rotate(.5deg); }
}

/* Mushuk faqat yozayotganda yuradi; tezligi WPM ga bog'liq (--tw-gallop-dur).
   Default — turadi (paused). typing-engine .tw-running klassi bilan boshqaradi. */
.tw-cheetah-svg,
.tw-cheetah-svg .tw-leg-bl,
.tw-cheetah-svg .tw-leg-br,
.tw-cheetah-svg .tw-leg-fl,
.tw-cheetah-svg .tw-leg-fr {
    animation-duration: var(--tw-gallop-dur, .42s);
    animation-play-state: paused;
}
.tw-running .tw-cheetah-svg,
.tw-running .tw-leg-bl,
.tw-running .tw-leg-br,
.tw-running .tw-leg-fl,
.tw-running .tw-leg-fr {
    animation-play-state: running;
}

/* Ko'z ochilib-yumiladi — har doim (tirik mushuk hissi) */
.tw-cheetah-svg .tw-eye {
    transform-box: view-box;
    transform-origin: 68px 13px;
    animation: tw-eye-blink 4.2s ease-in-out infinite;
}
@keyframes tw-eye-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    94%           { transform: scaleY(.08); }
}

/* Caps Lock ogohlantirishi */
.tw-caps-warn {
    position: fixed; top: 70px; left: 50%; transform: translateX(-50%);
    background: #ff5555; color: #fff; font-weight: 700; font-size: .9rem;
    padding: .4rem 1rem; border-radius: 8px; z-index: 1080;
    box-shadow: 0 4px 16px rgba(0,0,0,.4); display: none;
}
.tw-caps-warn.tw-show { display: block; animation: tw-slide-in .2s ease; }

/* Joriy so'z belgisi (qaysi so'zga kelgani) */
.tw-letter.tw-cur-word { background: rgba(0,112,243,.16); border-radius: 3px; }

/* Practice page dedicated track */
.tw-practice-track { margin: .75rem 0; }
.tw-practice-track .tw-track { height: 62px; border-radius: 12px; }
.tw-practice-track .tw-cheetah-svg { width: 72px; height: 45px; }

.tw-countdown { text-align: center; font-size: 5rem; font-weight: 800; color: var(--tw-gold);
    padding: 3rem 0; font-family: var(--tw-font); }

.tw-ranks { list-style: none; padding: 0; max-width: 480px; margin: 1rem auto 0; }
.tw-ranks li { display: flex; justify-content: space-between; padding: .6rem .9rem;
    background: var(--tw-bg); border-radius: 8px; margin-bottom: .5rem; }

/* ───── 5x5 Jamoaviy ───── */
.tw-team-page { max-width: 960px; margin: 1.5rem auto; }
.tw-team-scores { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin: 1rem 0 .5rem; }
.tw-team-score { text-align: center; min-width: 110px; padding: .6rem 1rem; border-radius: 12px;
    background: var(--tw-surface); }
.tw-team-score span { display: block; font-size: 2.4rem; font-weight: 800; font-family: var(--tw-font); }
.tw-team-score label { font-size: .75rem; text-transform: uppercase; color: #888888; }
.tw-team-score.tw-side-a { border-bottom: 3px solid var(--tw-gold); }
.tw-team-score.tw-side-a span { color: var(--tw-gold); }
.tw-team-score.tw-side-b { border-bottom: 3px solid #5aa0ff; }
.tw-team-score.tw-side-b span { color: #5aa0ff; }
.tw-vs-mid { font-size: 1.4rem; font-weight: 800; color: #888888; }
.tw-side-a-label { color: var(--tw-gold); }
.tw-side-b-label { color: #5aa0ff; }

/* Jamoa tanlash (Join kartasi) */
.tw-side-pick { display: flex; gap: .5rem; }
.tw-side-btn {
    flex: 1; cursor: pointer; text-align: center; padding: .55rem .4rem;
    border-radius: 10px; border: 1px solid var(--tw-border); background: var(--tw-surface);
    color: var(--tw-muted); font-weight: 600; font-size: .9rem; transition: all .15s; margin: 0;
}
.tw-side-btn i { margin-right: .25rem; }
.tw-side-btn--a i { color: var(--tw-gold); }
.tw-side-btn--b i { color: #5aa0ff; }
.btn-check:checked + .tw-side-btn--a { border-color: var(--tw-gold); color: var(--tw-gold);
    box-shadow: inset 0 0 0 1px var(--tw-gold); }
.btn-check:checked + .tw-side-btn--b { border-color: #5aa0ff; color: #5aa0ff;
    box-shadow: inset 0 0 0 1px #5aa0ff; }

/* Natija — har jamoa uchun alohida grafik */
.tw-team-verdict { font-size: 1.6rem; font-weight: 800; color: var(--tw-muted); margin: .35rem 0 .1rem; }
.tw-team-verdict.tw-win { color: var(--tw-gold); }
.tw-tr-charts {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.2rem;
}
@@media (max-width: 720px) { .tw-tr-charts { grid-template-columns: 1fr; } }
.tw-tr-chartbox {
    background: var(--tw-surface); border: 1px solid var(--tw-border);
    border-radius: 14px; padding: .85rem .9rem;
}
.tw-tr-chartbox.tw-side-a { border-top: 3px solid var(--tw-gold); }
.tw-tr-chartbox.tw-side-b { border-top: 3px solid #5aa0ff; }
.tw-tr-chart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.tw-tr-team-name { font-weight: 700; font-size: .95rem; color: var(--tw-text); }
.tw-side-a .tw-tr-team-name i { color: var(--tw-gold); }
.tw-side-b .tw-tr-team-name i { color: #5aa0ff; }
.tw-tr-team-score { font-family: var(--tw-font); font-size: 1.5rem; font-weight: 800; }
.tw-side-a .tw-tr-team-score { color: var(--tw-gold); }
.tw-side-b .tw-tr-team-score { color: #5aa0ff; }
.tw-tr-chartbox .tw-rr-chart canvas { height: 200px; }

/* ───── Poyga (AI/Ghost/Blind) ───── */
.tw-racepage { max-width: 900px; margin: 1.5rem auto; }
.tw-vs { max-width: 780px; margin: 0 auto 1.5rem; }
.tw-vs-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.tw-vs-name { width: 160px; font-size: .9rem; font-weight: 500; display: flex; align-items: center; gap: .4rem; }
.tw-vs-wpm { width: 60px; text-align: right; color: var(--tw-gold); font-weight: 700; font-family: var(--tw-code-font); }
.tw-vs .tw-track { flex: 1; height: 56px; }
.tw-bar-fill.tw-opp { background: linear-gradient(90deg, #666666, #9a9ab0); }
.tw-blind .tw-letter { color: #666666 !important; }

/* Poyga boshlanganda sozlamalar va "Boshlash" yashiriladi (/Practice kabi) */
#tw-racepage.tw-racing .tw-config,
#tw-racepage.tw-racing #tw-race-startwrap { display: none !important; }

/* Raqib (AI/Ghost) grafik chizig'i — to'q sariq */
.tw-lg-ai { background: #ff7849; }

/* Poyga natija ekrani — verdikt va VS kartalar */
.tw-race-verdict { font-size: 2rem; font-weight: 800; margin-bottom: .5rem; }
.tw-race-verdict.tw-win { color: var(--tw-gold); }
.tw-race-verdict.tw-lose { color: #ff7849; }

.tw-versus {
    display: flex; align-items: stretch; justify-content: center; gap: 1rem; flex-wrap: wrap;
}
.tw-versus-card {
    flex: 1; min-width: 220px; max-width: 360px;
    background: var(--tw-surface); border-radius: 14px; padding: 1rem 1.25rem;
    border: 1px solid rgba(138,138,160,.14); transition: border-color .2s, box-shadow .2s;
}
.tw-versus-card.tw-winner { border-color: var(--tw-gold); box-shadow: 0 0 0 1px var(--tw-gold), 0 8px 24px rgba(0,112,243,.18); }
.tw-versus-name {
    display: flex; align-items: center; gap: .5rem; font-weight: 700;
    font-size: 1.05rem; margin-bottom: .75rem; color: var(--tw-text);
}
.tw-versus-name .bi { color: var(--tw-gold); }
.tw-versus-opp .tw-versus-name .bi { color: #ff7849; }
.tw-versus-stats { display: flex; justify-content: space-between; gap: .75rem; text-align: center; }
.tw-versus-stats > div { display: flex; flex-direction: column; flex: 1; }
.tw-versus-stats label { color: #888888; font-size: .7rem; text-transform: lowercase; letter-spacing: .03em; }
.tw-versus-stats span { font-size: 1.5rem; font-weight: 700; color: var(--tw-gold); font-family: var(--tw-code-font); line-height: 1.15; }
.tw-versus-stats span small { font-size: .8rem; }
.tw-versus-opp .tw-versus-stats span { color: #ff7849; }
.tw-versus-vs { align-self: center; font-size: 1.3rem; font-weight: 800; color: #888888; }

/* ───── Sabotaj (3+ o'yinchi) ───── */
.tw-wordswrap { position: relative; }
.tw-sab-banner { position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    background: rgba(255, 60, 60, .92); color: #fff; font-weight: 700; padding: .35rem .9rem;
    border-radius: 8px; z-index: 5; box-shadow: 0 4px 14px rgba(0, 0, 0, .4); white-space: nowrap; }

.tw-sabotage { margin-top: .9rem; padding: .7rem .85rem; background: var(--tw-surface);
    border-radius: 10px; border-left: 3px solid #ff3c3c; }
.tw-sab-label { display: block; font-size: .85rem; margin-bottom: .5rem; color: #ff7a7a; }
.tw-sab-label small { color: #888888; font-weight: 400; }
.tw-sab-btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.tw-sab-btn { background: var(--tw-bg); color: var(--tw-text); border: 1px solid #2e2e2e;
    border-radius: 6px; padding: .3rem .65rem; font-size: .82rem; cursor: pointer; transition: .15s; }
.tw-sab-btn:hover { border-color: #ff3c3c; color: #ff7a7a; }

.tw-sab-feed { list-style: none; padding: 0; margin: .6rem 0 0; }
.tw-sab-feed li { font-size: .78rem; color: #888888; padding: .15rem 0; }

/* effektlar — vizual, klient qo'llaydi */
.tw-words.sab-active { border-radius: 8px; }
.tw-words.sab-blackout { background: #000; }
.tw-words.sab-blackout .tw-letter { color: #000 !important; }
.tw-words.sab-mirror { transform: scaleX(-1); }
.tw-words.sab-slow { filter: blur(2.6px); opacity: .55; }
.tw-words.sab-shake { animation: sab-shake .25s infinite; }
.tw-words.sab-shuffle .tw-letter { display: inline-block; animation: sab-jitter .45s infinite ease-in-out; }
.tw-words.sab-shuffle .tw-letter:nth-child(3n) { animation-delay: .12s; }
.tw-words.sab-shuffle .tw-letter:nth-child(3n+1) { animation-delay: .26s; }

@keyframes sab-shake {
    0%, 100% { transform: translate(0, 0); }
    25% { transform: translate(-6px, 3px); }
    50% { transform: translate(5px, -4px); }
    75% { transform: translate(-4px, -3px); }
}
@keyframes sab-jitter {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    25% { transform: translate(-3px, -2px) rotate(-7deg); }
    50% { transform: translate(3px, 2px) rotate(6deg); }
    75% { transform: translate(-2px, 3px) rotate(-4deg); }
}

/* ───── Kunlik musobaqa ───── */
.tw-contest { max-width: 1000px; margin: 1.5rem auto; }
.tw-streak { text-align: center; background: var(--tw-surface); border-radius: 10px;
    padding: .6rem 1rem; margin-bottom: 1rem; border-top: 3px solid var(--tw-gold); }
.tw-badge { display: inline-block; margin-left: .4rem; padding: .1rem .55rem; border-radius: 999px;
    background: rgba(232, 160, 32, .18); color: var(--tw-gold); font-weight: 700; font-size: .85rem; }

/* ───── Turnirlar ───── */
.tw-tournament { max-width: 1100px; margin: 1.5rem auto; }
.tw-champion { text-align: center; font-size: 1.2rem; color: var(--tw-gold);
    background: var(--tw-surface); border-radius: 10px; padding: .6rem; margin-bottom: .8rem; }
.tw-tourn-players { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
.tw-tourn-chip { background: var(--tw-surface); border-radius: 999px; padding: .25rem .7rem;
    font-size: .82rem; }

.tw-bracket { display: flex; gap: 1.5rem; overflow-x: auto; padding: 1rem 0; }
.tw-round { display: flex; flex-direction: column; justify-content: space-around; gap: 1rem; min-width: 150px; }
.tw-round-name { text-align: center; color: var(--tw-gold); font-size: .8rem; text-transform: uppercase;
    margin-bottom: .3rem; }
.tw-match { background: var(--tw-surface); border-radius: 8px; overflow: hidden;
    border: 1px solid #2e2e2e; }
.tw-slot { padding: .4rem .7rem; font-size: .88rem; border-bottom: 1px solid #2e2e2e; }
.tw-slot:last-child { border-bottom: none; }
.tw-slot.tw-empty { color: #555; }
.tw-slot.tw-won { color: var(--tw-gold); font-weight: 700; background: rgba(232, 160, 32, .1); }
.tw-slot.tw-lost { color: #666666; text-decoration: line-through; }
.tw-slot.tw-pick { cursor: pointer; }
.tw-slot.tw-pick:hover { background: rgba(232, 160, 32, .15); color: var(--tw-gold); }

/* ───── O'zbekiston xaritasi (kuchli dizayn) ───── */
.tw-map { max-width: 1180px; margin: 1.5rem auto 3rem; padding: 0 .75rem; }

.tw-map-hero { text-align: center; margin-bottom: 1.25rem; }
.tw-map-badge {
    display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .16em;
    color: var(--tw-gold); padding: .3rem .7rem; border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--tw-gold) 40%, transparent);
    background: color-mix(in srgb, var(--tw-gold) 12%, transparent);
    box-shadow: 0 0 22px color-mix(in srgb, var(--tw-gold) 28%, transparent); }
.tw-map-hero h1 { font-weight: 800; letter-spacing: -.03em; margin: .7rem 0 .4rem;
    font-size: clamp(1.5rem, 3.2vw, 2.4rem); }
.tw-map-hero p { color: var(--tw-muted); max-width: 640px; margin: 0 auto; font-size: .95rem; }
.tw-map-hero p b { color: var(--tw-text); }

.tw-map-stage { display: grid; grid-template-columns: 1fr 320px; gap: 1.1rem; align-items: stretch; }
@media (max-width: 900px) { .tw-map-stage { grid-template-columns: 1fr; } }

.tw-uzmap {
    width: 100%; height: auto; border-radius: 18px; overflow: hidden;
    background:
        radial-gradient(80% 60% at 50% 35%, color-mix(in srgb, var(--tw-gold) 7%, transparent), transparent 70%),
        linear-gradient(160deg, #0c0e16, #07080d 70%);
    border: 1px solid var(--tw-border-strong);
    box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--tw-gold) 40%, transparent), inset 0 0 0 1px rgba(255,255,255,.02); }

.tw-region path, .tw-region circle, .tw-region polygon {
    fill: #191c28; stroke: rgba(255,255,255,.22); stroke-width: 1.4;
    cursor: pointer; transition: fill .5s ease, stroke .2s, filter .2s; }
.tw-region:hover path, .tw-region:hover circle, .tw-region:hover polygon {
    stroke: #ffffff; stroke-width: 2; filter: brightness(1.18) drop-shadow(0 0 10px var(--reg-color, var(--tw-gold))); }
.tw-region.tw-reg-active path, .tw-region.tw-reg-active circle, .tw-region.tw-reg-active polygon {
    filter: drop-shadow(0 0 7px color-mix(in srgb, var(--reg-color, var(--tw-gold)) 55%, transparent)); }
.tw-region.tw-reg-sel path, .tw-region.tw-reg-sel circle, .tw-region.tw-reg-sel polygon {
    stroke: #ffffff; stroke-width: 2.4; }
.tw-region.tw-reg-leader path, .tw-region.tw-reg-leader circle {
    animation: twLeaderPulse 2.4s ease-in-out infinite; }
@keyframes twLeaderPulse {
    0%,100% { filter: drop-shadow(0 0 6px var(--reg-color)); }
    50% { filter: drop-shadow(0 0 18px var(--reg-color)) brightness(1.12); } }
.tw-region.tw-reg-flash path, .tw-region.tw-reg-flash circle { animation: twRegFlash 1.1s ease-out; }
@keyframes twRegFlash {
    0% { filter: brightness(2) drop-shadow(0 0 22px #fff); }
    100% { filter: none; } }

.tw-reg-label { pointer-events: auto; cursor: pointer; }
.tw-lbl-name { fill: #eef0f6; font-size: 13px; font-weight: 700; text-anchor: middle;
    font-family: var(--tw-ui-font); paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-width: 3.5px;
    pointer-events: none; }
.tw-lbl-wpm { fill: var(--tw-gold); font-size: 13px; font-weight: 800; text-anchor: middle;
    font-family: var(--tw-code-font); paint-order: stroke; stroke: rgba(0,0,0,.85); stroke-width: 3.5px;
    pointer-events: none; }

#tw-map-sweep { animation: twSweepMove 5.5s linear infinite; mix-blend-mode: screen; }
@keyframes twSweepMove { 0% { transform: translateX(0); } 100% { transform: translateX(1300px); } }

/* Detal kartasi */
.tw-region-detail {
    background: linear-gradient(180deg, color-mix(in srgb, var(--tw-gold) 6%, var(--tw-surface)), var(--tw-surface));
    border: 1px solid var(--tw-border-strong); border-radius: 18px; padding: 1.4rem 1.3rem;
    display: flex; flex-direction: column; min-height: 220px; }
.tw-detail-empty { align-items: center; justify-content: center; text-align: center; }
.tw-detail-hint-ico { font-size: 2.4rem; margin-bottom: .5rem; opacity: .8; }
.tw-detail-hint p { color: var(--tw-muted); font-size: .9rem; max-width: 230px; }
.tw-detail-top { display: flex; align-items: center; gap: .55rem; margin-bottom: .4rem; }
.tw-detail-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
    box-shadow: 0 0 12px currentColor; }
.tw-detail-top h4 { margin: 0; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.tw-detail-best { font-family: var(--tw-code-font); font-weight: 800; font-size: 3.4rem;
    color: var(--tw-gold); line-height: 1; margin: .4rem 0 1rem; letter-spacing: -.03em; }
.tw-detail-best small { display: block; font-size: .72rem; font-weight: 600; color: var(--tw-muted);
    letter-spacing: .04em; margin-top: .35rem; font-family: var(--tw-ui-font); }
.tw-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: auto; }
.tw-detail-cell { background: rgba(255,255,255,.03); border: 1px solid var(--tw-border);
    border-radius: 12px; padding: .7rem .6rem; text-align: center; }
.tw-detail-num { display: block; font-size: 1.6rem; font-weight: 800; color: var(--tw-text);
    font-family: var(--tw-code-font); }
.tw-detail-cap { font-size: .72rem; color: var(--tw-muted); }
.tw-detail-none { color: var(--tw-muted); font-size: .9rem; margin-top: .6rem; }

/* Reyting (graf jadval) */
.tw-map-rank { margin-top: 1.6rem; background: var(--tw-surface);
    border: 1px solid var(--tw-border-strong); border-radius: 18px; padding: 1.2rem 1.3rem; }
.tw-rank-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    margin-bottom: .9rem; flex-wrap: wrap; }
.tw-rank-head h3 { margin: 0; font-size: 1.1rem; font-weight: 700; }
.tw-rank-list { display: flex; flex-direction: column; gap: .35rem; }
.tw-rank-row { display: grid; align-items: center; gap: .7rem; padding: .55rem .6rem; border-radius: 10px;
    grid-template-columns: 26px 12px 130px 1fr 52px 150px; cursor: pointer; transition: background .15s; }
.tw-rank-row:hover { background: rgba(255,255,255,.04); }
.tw-rank-sel { background: color-mix(in srgb, var(--tw-gold) 12%, transparent) !important;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tw-gold) 35%, transparent); }
.tw-rank-no { font-family: var(--tw-code-font); font-weight: 700; color: var(--tw-muted); text-align: center; }
.tw-rank-top .tw-rank-no { color: var(--tw-gold); }
.tw-rank-dot { width: 11px; height: 11px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.tw-rank-name { font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-rank-bar { height: 9px; background: rgba(255,255,255,.05); border-radius: 999px; overflow: hidden; }
.tw-rank-bar i { display: block; height: 100%; border-radius: 999px; transition: width .6s ease;
    box-shadow: 0 0 10px -1px currentColor; }
.tw-rank-wpm { font-family: var(--tw-code-font); font-weight: 800; text-align: right; color: var(--tw-text); }
.tw-rank-meta { font-size: .76rem; color: var(--tw-muted); text-align: right; white-space: nowrap; }
@media (max-width: 620px) {
    .tw-rank-row { grid-template-columns: 22px 10px 1fr 44px; }
    .tw-rank-bar, .tw-rank-meta { display: none; } }

/* ───── Yozish Pasporti (klaviatura heat map) ───── */
.tw-fp { max-width: 900px; margin: 1.5rem auto; }
.tw-keyboard { display: flex; flex-direction: column; gap: .4rem; align-items: center; margin: .5rem 0 1rem; }
.tw-kb-row { display: flex; gap: .4rem; }
.tw-key { width: 46px; height: 46px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; font-weight: 700; text-transform: uppercase; color: #fff;
    border: 1px solid #ffffff; transition: background .3s; }

/* ───── Profil / Admin ───── */
.tw-profile { max-width: 800px; margin: 1.5rem auto; }
.tw-profile-head { background: var(--tw-surface); border-radius: 12px; padding: 1.25rem;
    border-top: 3px solid var(--tw-gold); }
.tw-admin-num { font-size: 2rem; font-weight: 800; color: var(--tw-gold); font-family: var(--tw-font); }

/* ═══════════════════════════════════════════
   SOZLAMALAR SAHIFASI — Settings Page
   ═══════════════════════════════════════════ */
.tw-settings-page { max-width: 860px; margin: 1.5rem auto; }

.tw-settings-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 1.5rem; padding-bottom: .75rem;
    border-bottom: 1px solid rgba(0,112,243,.12);
}
.tw-settings-header h2 {
    color: var(--tw-gold); font-weight: 700; margin: 0;
    display: flex; align-items: center; gap: .5rem;
}
.tw-settings-autosave {
    display: flex; align-items: center; gap: .4rem;
    font-size: .82rem; color: #888888;
}
.tw-settings-autosave i { color: #40cc80; }

/* ── Karta ── */
.tw-settings-card {
    background: var(--tw-surface);
    border-radius: 18px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.1rem;
    border: 1px solid rgba(255,255,255,.04);
    border-top: 2px solid rgba(0,112,243,.3);
    transition: border-color .2s;
}
.tw-settings-card:hover { border-top-color: rgba(0,112,243,.55); }
.tw-settings-card > h4 {
    color: var(--tw-gold); font-weight: 600; margin: 0 0 1.25rem;
    font-size: .95rem; letter-spacing: .02em;
    display: flex; align-items: center; gap: .5rem;
    text-transform: uppercase;
}
.tw-settings-group { margin-bottom: 0; }
.tw-settings-label {
    display: block; font-size: .72rem; font-weight: 700;
    color: #888888; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: .55rem;
}

/* ── Jonli Preview ── */
.tw-preview-card { border-top-color: rgba(100,180,255,.4); }
.tw-preview-words {
    font-size: 18px; font-family: 'JetBrains Mono', monospace;
    color: var(--tw-text); line-height: 1.7;
    padding: 1rem 1.25rem;
    background: var(--tw-bg);
    border-radius: 10px;
    margin-bottom: .65rem;
    transition: font-family .3s, font-size .2s, color .3s;
    user-select: none;
    position: relative;
    overflow: hidden;
}
.tw-preview-words::after {
    content: '|';
    animation: tw-blink 1s steps(1) infinite;
    color: var(--tw-gold);
    font-weight: 300;
}
.tw-preview-meta {
    display: flex; gap: .6rem; flex-wrap: wrap;
}
.tw-preview-meta span {
    background: var(--tw-bg); border-radius: 6px; padding: .2rem .65rem;
    font-size: .75rem; color: #888888;
    font-family: var(--tw-code-font); border: 1px solid rgba(255,255,255,.06);
}

/* ── Tema / Fon grid ── */
.tw-theme-grid, .tw-bg-grid {
    display: flex; flex-wrap: wrap; gap: .7rem;
}
.tw-theme-opt, .tw-bg-opt {
    background: none; border: 2px solid rgba(255,255,255,.07);
    border-radius: 12px; padding: .55rem .65rem; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    transition: border-color .15s, transform .12s, box-shadow .15s;
    min-width: 68px;
}
.tw-theme-opt:hover, .tw-bg-opt:hover {
    border-color: rgba(0,112,243,.45);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.tw-theme-opt.tw-active, .tw-bg-opt.tw-active {
    border-color: var(--tw-gold);
    box-shadow: 0 0 0 3px rgba(0,112,243,.18);
}
.tw-theme-swatch, .tw-bg-swatch {
    width: 54px; height: 36px; border-radius: 8px;
    border: 2px solid transparent; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.tw-bg-swatch { background-color: #000; background-repeat: no-repeat; }
.tw-bg-name { font-size: .7rem; color: var(--tw-text); font-weight: 500; white-space: nowrap; }
.tw-theme-swatch-top {
    position: absolute; top: 0; left: 0; right: 0; height: 48%;
}
.tw-theme-swatch-label {
    position: relative; z-index: 1;
    font-size: .55rem; font-weight: 800;
    font-family: var(--tw-code-font);
}
.tw-theme-name {
    font-size: .7rem; color: var(--tw-text); font-weight: 500;
    white-space: nowrap;
}

/* ── Shrift grid ── */
.tw-font-grid {
    display: flex; flex-wrap: wrap; gap: .55rem;
}
.tw-font-opt {
    background: var(--tw-bg); border: 2px solid rgba(255,255,255,.07);
    border-radius: 10px; padding: .5rem 1rem; cursor: pointer;
    font-size: 1rem; color: var(--tw-text); font-weight: 500;
    transition: border-color .15s, color .15s, transform .1s;
    white-space: nowrap;
}
.tw-font-opt:hover { border-color: rgba(0,112,243,.4); transform: translateY(-1px); }
.tw-font-opt.tw-active {
    border-color: var(--tw-gold); color: var(--tw-gold);
    background: rgba(0,112,243,.08);
}

/* ── Font size range ── */
.tw-range-wrap {
    display: flex; align-items: center; gap: .85rem; margin-top: .4rem;
}
.tw-range-hint { font-size: .75rem; color: #888888; font-family: var(--tw-code-font); }
.tw-range {
    flex: 1; height: 4px; border-radius: 2px;
    accent-color: var(--tw-gold); cursor: pointer;
}
.tw-range::-webkit-slider-thumb { width: 18px; height: 18px; }
.tw-gold-text { color: var(--tw-gold); font-family: var(--tw-code-font); font-weight: 700; }

/* ── Karet grid ── */
.tw-caret-grid {
    display: flex; gap: .55rem; flex-wrap: wrap;
}
.tw-caret-opt {
    background: var(--tw-bg); border: 2px solid rgba(255,255,255,.07);
    border-radius: 10px; padding: .6rem 1.1rem; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: .35rem;
    font-size: .78rem; color: var(--tw-text); font-weight: 500;
    transition: border-color .15s; min-width: 74px;
}
.tw-caret-opt:hover { border-color: rgba(0,112,243,.4); }
.tw-caret-opt.tw-active { border-color: var(--tw-gold); color: var(--tw-gold); background: rgba(0,112,243,.07); }
.tw-caret-preview {
    font-size: 1.4rem; color: var(--tw-gold);
    font-family: var(--tw-code-font); line-height: 1;
    height: 1.4rem; display: flex; align-items: center;
}
/* Karet mini ko'rinishi (settings tugmasida) — 22px balandlik holderda markazda */
.tw-caret-holder {
    display: flex; align-items: center; justify-content: center;
    height: 22px;
}
.tw-caret-shape { display: block; box-sizing: border-box; }
.tw-caret-name { line-height: 1; }

/* ── Tugma guruhi (language, mode, vaqt...) ── */
.tw-btn-group {
    display: inline-flex; flex-wrap: wrap; gap: .3rem;
    background: var(--tw-bg); border-radius: 11px; padding: .22rem;
    border: 1px solid rgba(255,255,255,.05);
}
.tw-sg-btn {
    background: transparent; border: none; border-radius: 8px;
    padding: .36rem .9rem; cursor: pointer; font-size: .875rem;
    color: #888888; font-family: var(--tw-ui-font); font-weight: 500;
    transition: background .15s, color .12s;
}
.tw-sg-btn:hover { color: var(--tw-text); background: rgba(255,255,255,.06); }
.tw-sg-btn.tw-active {
    background: var(--tw-gold); color: #ffffff; font-weight: 700;
}

/* ── Toggle (on/off) ── */
.tw-toggle-list { display: flex; flex-direction: column; gap: 0; }
.tw-toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: .9rem 0;
    border-bottom: 1px solid rgba(255,255,255,.05);
}
.tw-toggle-row:last-child { border-bottom: none; padding-bottom: 0; }
.tw-toggle-row:first-child { padding-top: 0; }
.tw-toggle-info { flex: 1; padding-right: 1.5rem; }
.tw-toggle-title { font-weight: 600; font-size: .9rem; color: var(--tw-text); }
.tw-toggle-desc { font-size: .76rem; color: #888888; margin-top: .15rem; line-height: 1.4; }

.tw-toggle {
    position: relative; display: inline-block;
    width: 46px; height: 26px; flex-shrink: 0;
}
.tw-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.tw-toggle-slider {
    position: absolute; cursor: pointer; inset: 0;
    background: rgba(255,255,255,.1); border-radius: 26px;
    border: 1px solid rgba(255,255,255,.08);
    transition: background .2s;
}
.tw-toggle-slider::before {
    content: '';
    position: absolute; height: 20px; width: 20px;
    left: 2px; top: 2px;
    background: #888888; border-radius: 50%;
    transition: transform .2s, background .2s;
    box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.tw-toggle input:checked + .tw-toggle-slider {
    background: rgba(0,112,243,.25);
    border-color: rgba(0,112,243,.4);
}
.tw-toggle input:checked + .tw-toggle-slider::before {
    transform: translateX(20px);
    background: var(--tw-gold);
}

/* ── Ovoz grid ── */
.tw-sound-hint {
    font-size: .78rem; color: #888888; margin: -.2rem 0 .85rem;
}
.tw-sound-grid {
    display: flex; gap: .7rem; flex-wrap: wrap;
}
.tw-sound-opt span { white-space: nowrap; }
.tw-sound-opt {
    background: var(--tw-bg); border: 2px solid rgba(255,255,255,.07);
    border-radius: 14px; padding: .9rem 1.25rem; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    min-width: 88px; transition: border-color .15s, transform .1s;
}
.tw-sound-opt i { font-size: 1.6rem; color: var(--tw-gold); }
.tw-sound-opt span { font-size: .8rem; color: var(--tw-text); font-weight: 500; }
.tw-sound-opt:hover { border-color: rgba(0,112,243,.4); transform: translateY(-2px); }
.tw-sound-opt.tw-active {
    border-color: var(--tw-gold);
    background: rgba(0,112,243,.08);
    box-shadow: 0 0 0 2px rgba(0,112,243,.15);
}

/* ── Reset karta ── */
.tw-settings-reset-card {
    background: var(--tw-surface);
    border-radius: 14px; padding: .85rem 1.5rem;
    border: 1px solid rgba(255,85,85,.12);
    display: flex; align-items: center; justify-content: space-between;
    margin-top: .5rem;
}
.tw-settings-reset-card span { font-size: .85rem; color: #888888; }
.tw-btn-danger-outline {
    background: transparent; border: 1.5px solid rgba(255,85,85,.35);
    color: #ff8080; border-radius: 10px; padding: .4rem 1.1rem;
    font-size: .86rem; cursor: pointer; font-family: var(--tw-ui-font); font-weight: 600;
    transition: border-color .15s, background .15s, color .15s;
}
.tw-btn-danger-outline:hover {
    background: rgba(255,85,85,.12); border-color: #ff5555; color: #ff5555;
}

/* ── Ajratuvchi ── */
.tw-settings-divider {
    height: 1px; background: rgba(255,255,255,.05);
    margin: 1rem 0;
}

/* ═════════ Bosh sahifa (Home) ═════════ */
.tw-home-hero { position: relative; padding: 2.5rem 0 1rem; overflow: hidden; }
.tw-home-glow {
    position: absolute; inset: -20% 30% auto -10%; height: 480px;
    background: radial-gradient(closest-side, rgba(0,112,243,.22), transparent 70%);
    filter: blur(20px); pointer-events: none; z-index: 0;
}
.tw-home-grid {
    position: relative; z-index: 1;
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: center;
}
@media (max-width: 900px) {
    .tw-home-grid { grid-template-columns: 1fr; text-align: center; }
}

.tw-home-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(0,112,243,.12); color: var(--tw-gold);
    border: 1px solid rgba(0,112,243,.3); border-radius: 999px;
    padding: .35rem .9rem; font-size: .8rem; font-weight: 600;
    margin-bottom: 1rem;
}
.tw-home-title { font-size: clamp(2.6rem, 6vw, 4.6rem); font-weight: 700; color: var(--tw-text);
    line-height: 1.02; margin: 0; letter-spacing: -.04em; }
.tw-home-title .tw-accent {
    background: linear-gradient(120deg, var(--tw-gold), var(--tw-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.tw-home-tagline { font-size: 1.25rem; font-weight: 500; color: var(--tw-text); margin: .6rem 0 .3rem; }
.tw-home-lead { color: var(--tw-muted); max-width: 540px; line-height: 1.6; }
@media (max-width: 900px) { .tw-home-lead { margin-inline: auto; } }

.tw-home-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0; }
@media (max-width: 900px) { .tw-home-cta { justify-content: center; } }
.tw-btn-ghost {
    background: transparent; border: 1px solid var(--tw-border-strong);
    color: var(--tw-text); font-weight: 500; border-radius: var(--tw-radius);
    padding: .5rem 1.25rem; transition: background .15s, transform .1s, border-color .15s;
}
.tw-btn-ghost:hover { background: rgba(255,255,255,.05); color: var(--tw-text);
    border-color: #444; transform: translateY(-1px); }

.tw-home-metrics { display: flex; flex-wrap: wrap; gap: 1.75rem; margin-top: 1.5rem; }
@media (max-width: 900px) { .tw-home-metrics { justify-content: center; } }
.tw-metric { display: flex; flex-direction: column; }
.tw-metric-num { font-size: 1.9rem; font-weight: 800; color: var(--tw-gold); line-height: 1;
    font-family: var(--tw-code-font); }
.tw-metric-lbl { font-size: .78rem; color: #888888; text-transform: uppercase; letter-spacing: .04em; }

/* 3D gepard sahnasi */
.tw-cheetah-stage { position: relative; }
.tw-cheetah-3d {
    position: relative; width: 100%; height: 420px; min-height: 320px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 20px;
    background: radial-gradient(ellipse at 50% 80%, color-mix(in srgb, var(--tw-gold) 14%, transparent), transparent 65%);
}
.tw-cheetah-3d canvas { display: block; border-radius: 20px; }
.tw-cheetah-fallback { max-width: 70%; max-height: 240px; filter: drop-shadow(0 12px 30px rgba(0,0,0,.5)); }

/* ───── /home gepard loader (3D Three.js sahnasi sekin yuklangani uchun) ───── */
.tw-cheetah-loader {
    position: absolute; inset: 0; z-index: 3;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
    border-radius: 20px;
    background: radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--tw-bg) 70%, transparent), transparent 75%);
    backdrop-filter: blur(2px);
    transition: opacity .45s ease, visibility .45s ease;
}
.tw-cheetah-loader.tw-hide { opacity: 0; visibility: hidden; pointer-events: none; }
.tw-cheetah-spinner {
    width: 46px; height: 46px; border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--tw-gold) 22%, transparent);
    border-top-color: var(--tw-gold);
    box-shadow: 0 0 22px color-mix(in srgb, var(--tw-gold) 35%, transparent);
    animation: tw-cheetah-spin .8s linear infinite;
}
.tw-cheetah-loadtxt {
    font-size: .82rem; letter-spacing: .02em;
    color: color-mix(in srgb, var(--tw-text) 75%, transparent);
    display: inline-flex; align-items: center; gap: .35rem;
}
@keyframes tw-cheetah-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tw-cheetah-spinner { animation-duration: 1.6s; } }
.tw-cheetah-caption {
    position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%);
    font-size: .78rem; color: #888888; display: inline-flex; align-items: center; gap: .35rem;
}
@media (max-width: 900px) { .tw-cheetah-3d { height: 340px; } }

/* Bo'limlar */
.tw-home-section { margin: 3rem 0; }
.tw-home-h2 { font-size: 1.6rem; font-weight: 700; color: var(--tw-text); margin-bottom: 1.4rem;
    display: flex; align-items: center; gap: .5rem; }
.tw-home-h2 i { color: var(--tw-gold); }

/* Imkoniyatlar grid */
.tw-feature-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
@media (max-width: 1100px) { .tw-feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tw-feature-grid { grid-template-columns: 1fr; } }
.tw-feature {
    display: block; text-decoration: none; color: var(--tw-text);
    background: var(--tw-surface); border: 1px solid rgba(255,255,255,.05);
    border-radius: 16px; padding: 1.25rem;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.tw-feature:hover {
    transform: translateY(-4px); border-color: rgba(0,112,243,.45);
    box-shadow: 0 12px 30px rgba(0,0,0,.35); color: var(--tw-text);
}
.tw-feature-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(0,112,243,.2), rgba(255,153,0,.1));
    color: var(--tw-gold); font-size: 1.5rem; margin-bottom: .85rem;
}
.tw-feature h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; }
.tw-feature p { font-size: .85rem; color: #888888; margin: 0; line-height: 1.5; }

/* Muallif kartasi */
.tw-author {
    display: flex; gap: 1.5rem; align-items: flex-start;
    background: linear-gradient(135deg, var(--tw-surface), #0c0c0c);
    border: 1px solid rgba(0,112,243,.18); border-radius: 20px; padding: 1.75rem;
}
@media (max-width: 640px) { .tw-author { flex-direction: column; align-items: center; text-align: center; } }
.tw-author-avatar {
    flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--tw-gold), var(--tw-accent));
    color: #ffffff; font-size: 2.5rem;
    box-shadow: 0 6px 20px rgba(0,112,243,.35);
}
.tw-author-tag { display: inline-flex; align-items: center; gap: .4rem; font-size: .78rem;
    font-weight: 600; color: var(--tw-gold); text-transform: uppercase; letter-spacing: .05em; }
.tw-author-name { font-size: 1.5rem; font-weight: 800; margin: .3rem 0 .15rem; color: var(--tw-text); }
.tw-author-role { color: var(--tw-gold); font-weight: 500; margin: 0 0 .6rem; }
.tw-author-bio { color: #888888; line-height: 1.6; max-width: 640px; margin: 0 0 1rem; }
.tw-author-links { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 640px) { .tw-author-links { justify-content: center; } }
.tw-author-link {
    display: inline-flex; align-items: center; gap: .4rem; text-decoration: none;
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
    border-radius: 999px; padding: .4rem .85rem; font-size: .82rem; color: #a1a1a1;
    transition: border-color .15s, color .15s;
}
a.tw-author-link:hover { border-color: rgba(0,112,243,.5); color: var(--tw-gold); }
.tw-author-link i { color: var(--tw-gold); }

/* ───── Kunlik musobaqa (/Contest) ───── */
.tw-contest-page { max-width: 1100px; margin: 0 auto; }
.tw-contest-hero { text-align: center; margin: .5rem 0 1.25rem; }
.tw-contest-badge { display: inline-block; background: var(--tw-surface);
    border: 1px solid rgba(232,160,32,.3); color: var(--tw-gold);
    border-radius: 999px; padding: .3rem .9rem; font-size: .8rem; font-weight: 600; }
.tw-contest-title { font-family: var(--tw-font); font-weight: 800; margin: .6rem 0 .3rem;
    font-size: clamp(1.8rem, 4vw, 2.6rem); }
.tw-contest-title { color: var(--tw-gold); }
.tw-contest-sub { color: #9a9aab; max-width: 640px; margin: 0 auto; font-size: .98rem; }
.tw-contest-date { display: block; margin-top: .35rem; color: var(--tw-gold); font-weight: 600; font-size: .9rem; }
.tw-contest-hero .tw-streak { margin: .9rem auto 0; max-width: 420px; }

.tw-board-card { background: var(--tw-surface); border: 1px solid rgba(255,255,255,.06);
    border-radius: 14px; padding: 1rem 1.1rem; position: sticky; top: 1rem; }
.tw-board-title { color: #cfcfdd; font-weight: 700; margin-bottom: .8rem; }
.tw-board-title i { color: var(--tw-gold); }
.tw-board-title small { color: #888; font-weight: 500; }
.tw-contest-ranks { max-width: 100%; margin: 0; }
.tw-contest-ranks li { font-size: .9rem; }

/* ═══════════════ Turnirlar (playoff) ═══════════════ */
.tw-rbtn--gold { background: var(--tw-gold); border-color: var(--tw-gold); color: #fff; }
.tw-rbtn--sm { width: auto; margin-top: 0; padding: .5rem .85rem; font-size: .85rem; }

/* Yaratish formasi */
.tw-tcreate { display: flex; flex-direction: column; gap: .35rem; width: 100%; }
.tw-tlabel { font-size: .82rem; color: var(--tw-muted); margin-top: .55rem; display: flex; align-items: center; gap: .35rem; }
.tw-tinput {
    background: var(--tw-bg); border: 1px solid var(--tw-border-strong); color: var(--tw-text);
    border-radius: 10px; padding: .6rem .8rem; font-family: var(--tw-ui-font); font-size: .92rem;
}
.tw-tinput:focus { outline: none; border-color: var(--tw-gold); }
.tw-thint { font-size: .78rem; color: var(--tw-muted); margin: .2rem 0 0; }

/* ── Shaxsiy turnir: parol maydoni (yaratish) ── */
.tw-tpw-wrap { display: flex; flex-direction: column; gap: .35rem; margin-top: -.2rem; }
.tw-titem-lock { color: var(--tw-gold); margin-left: .35rem; font-size: .85em; }
.tw-titem--private { position: relative; }
.tw-titem--private .tw-titem-link { border-color: color-mix(in srgb, var(--tw-gold) 35%, var(--tw-border)); }

/* ── Parol so'rov modali (ro'yxatdan kirishda) ── */
.tw-pw-modal {
    position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.62); backdrop-filter: blur(4px); padding: 1rem;
}
.tw-pwm-card {
    width: min(420px, 100%); background: var(--tw-surface, var(--tw-bg)); border: 1px solid var(--tw-border-strong);
    border-radius: 18px; padding: 1.6rem 1.5rem; text-align: center;
    box-shadow: 0 24px 60px rgba(0,0,0,.5); display: flex; flex-direction: column; gap: .7rem;
    animation: champIn .25s ease;
}
.tw-pwm-icon, .tw-locked-icon {
    width: 58px; height: 58px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
    font-size: 1.6rem; color: var(--tw-gold);
    background: color-mix(in srgb, var(--tw-gold) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--tw-gold) 35%, transparent);
}
.tw-pwm-card h3, .tw-locked-card h2 { margin: 0; }
.tw-pwm-card p, .tw-locked-card p { color: var(--tw-muted); font-size: .88rem; margin: 0; }
.tw-pwm-card .tw-tinput, .tw-locked-card .tw-tinput { width: 100%; text-align: center; }
.tw-pwm-err { color: #ff7788; font-size: .82rem; min-height: 1.1em; font-weight: 600; }
.tw-pwm-actions { display: flex; gap: .6rem; justify-content: center; margin-top: .2rem; }

/* ── Qulflangan turnir sahifasi (shaxsiy, ruxsatsiz) ── */
.tw-locked { display: flex; justify-content: center; padding: 2rem 1rem; }
.tw-locked-card {
    width: min(460px, 100%); background: var(--tw-bg); border: 1px solid var(--tw-border-strong);
    border-radius: 20px; padding: 2rem 1.6rem; text-align: center; display: flex; flex-direction: column; gap: .8rem;
    box-shadow: 0 18px 50px rgba(0,0,0,.4);
}
.tw-locked-actions { display: flex; gap: .6rem; justify-content: center; margin-top: .3rem; flex-wrap: wrap; }

/* Turnirlar ro'yxati */
.tw-tlist { list-style: none; padding: 0; margin: .3rem 0 0; display: flex; flex-direction: column; gap: .55rem; }
.tw-tlist-empty { color: var(--tw-muted); font-size: .9rem; padding: .5rem 0; }
.tw-titem-link {
    display: flex; flex-direction: column; gap: .4rem; text-decoration: none; color: var(--tw-text);
    background: var(--tw-bg); border: 1px solid var(--tw-border); border-radius: 12px; padding: .8rem .9rem;
    transition: border-color .2s, transform .1s;
}
.tw-titem-link:hover { border-color: var(--tw-gold); transform: translateY(-1px); }
.tw-titem-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.tw-titem-name { font-weight: 600; }
.tw-titem-meta { display: flex; gap: 1rem; color: var(--tw-muted); font-size: .8rem; }
.tw-tbadge {
    font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
.tw-st-reg { background: color-mix(in srgb, var(--tw-accent) 18%, transparent); color: var(--tw-accent); }
.tw-st-live { background: color-mix(in srgb, #ff5566 20%, transparent); color: #ff7788; }
.tw-st-done { background: color-mix(in srgb, var(--tw-muted) 22%, transparent); color: var(--tw-muted); }

/* Ro'yxat elementi — sig'im bari + harakat tugmasi */
.tw-titem { display: flex; flex-direction: column; gap: .5rem; }
.tw-titem-name i { color: var(--tw-gold); margin-right: .3rem; }
.tw-titem-cap { display: block; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--tw-muted) 22%, transparent); overflow: hidden; }
.tw-titem-cap > span { display: block; height: 100%; background: linear-gradient(90deg, var(--tw-accent), var(--tw-gold)); transition: width .3s; }
.tw-titem-action { display: flex; }
.tw-titem-btn {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .55rem .8rem; border-radius: 10px; font-weight: 700; font-size: .9rem; cursor: pointer;
    border: 1px solid transparent; text-decoration: none; transition: transform .12s, filter .2s, border-color .2s;
}
.tw-titem-btn:hover { transform: translateY(-1px); }
.tw-titem-btn--join { background: var(--tw-gold); color: #fff; }
.tw-titem-btn--join:hover { filter: brightness(1.08); }
.tw-titem-btn--live { background: color-mix(in srgb, #ff5566 16%, transparent); color: #ff7788; border-color: color-mix(in srgb, #ff5566 40%, transparent); }
.tw-titem-btn--watch { background: transparent; color: var(--tw-muted); border-color: var(--tw-border-strong); }
.tw-titem-btn--watch:hover { border-color: var(--tw-gold); color: var(--tw-gold); }
.tw-titem-btn--login { background: transparent; color: var(--tw-muted); border-color: var(--tw-border-strong); }
.tw-titem-btn--login:hover { border-color: var(--tw-gold); color: var(--tw-gold); }

/* Kirish talab qiluvchi blok (turnir yaratish, mehmon) */
.tw-auth-gate {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem;
    padding: 2.2rem 1.4rem; border: 1px dashed var(--tw-border-strong); border-radius: 14px;
    background: color-mix(in srgb, var(--tw-gold) 5%, transparent);
}
.tw-auth-gate > i { font-size: 2rem; color: var(--tw-gold); }
.tw-auth-gate p { margin: 0; color: var(--tw-muted); max-width: 32ch; }
.tw-auth-gate .tw-rbtn { width: auto; padding-inline: 1.6rem; }

/* Turnir sahifasi */
.tw-tourn { max-width: 1150px; margin: 1.5rem auto; padding: 0 1rem; }
.tw-tourn-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin-bottom: 1rem;
}
.tw-tourn-htext h1 { margin: .4rem 0 .2rem; font-size: 1.7rem; }
.tw-tourn-sub { color: var(--tw-muted); font-size: .88rem; margin: 0; }
.tw-tchampion {
    text-align: center; font-size: 1.3rem; color: var(--tw-gold); font-weight: 700;
    background:
        radial-gradient(120% 160% at 50% 0%, color-mix(in srgb, var(--tw-gold) 22%, transparent), transparent 70%),
        color-mix(in srgb, var(--tw-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--tw-gold) 35%, transparent);
    border-radius: 14px; padding: 1.2rem; margin-bottom: 1rem;
    animation: champIn .6s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes champIn { from { opacity: 0; transform: scale(.85) translateY(-10px); } to { opacity: 1; transform: none; } }
.tw-tchampion i { animation: champBounce 1.4s ease-in-out infinite; display: inline-block; }
@keyframes champBounce { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-5px) rotate(6deg); } }

/* Ro'yxat bosqichi */
.tw-treg { background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 16px; padding: 1.2rem; margin-bottom: 1rem; }
.tw-treg-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; }
.tw-treg-players h3 { font-size: 1rem; display: flex; align-items: center; gap: .4rem; }
.tw-treg-count { color: var(--tw-muted); font-weight: 400; font-size: .85rem; }
.tw-seed-list { list-style: none; padding: 0; margin: .5rem 0 0; display: flex; flex-direction: column; gap: .4rem; }
.tw-seed-item {
    display: flex; align-items: center; gap: .6rem; background: var(--tw-bg);
    border: 1px solid var(--tw-border); border-radius: 10px; padding: .5rem .7rem;
}
.tw-seed-no {
    width: 26px; height: 26px; flex: none; display: grid; place-items: center; font-weight: 700; font-size: .8rem;
    background: color-mix(in srgb, var(--tw-gold) 16%, transparent); color: var(--tw-gold); border-radius: 8px;
}
.tw-seed-ava {
    width: 30px; height: 30px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font-size: .72rem; font-weight: 800; color: #fff; background: var(--c, var(--tw-accent));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.tw-seed-name { flex: 1; font-size: .92rem; }
.tw-seed-me { color: var(--tw-muted); }
.tw-seed-ctrl { display: flex; gap: .25rem; }
.tw-seed-ctrl button {
    background: transparent; border: 1px solid var(--tw-border-strong); color: var(--tw-muted);
    border-radius: 7px; width: 28px; height: 28px; cursor: pointer; display: grid; place-items: center;
}
.tw-seed-ctrl button:hover:not(:disabled) { border-color: var(--tw-gold); color: var(--tw-gold); }
.tw-seed-ctrl button:disabled { opacity: .35; cursor: default; }
.tw-seed-drop:hover { border-color: #ff5566 !important; color: #ff5566 !important; background: color-mix(in srgb, #ff5566 12%, transparent) !important; }
.tw-treg-side { display: flex; flex-direction: column; gap: .6rem; }
.tw-treg-ok { display: flex; align-items: center; gap: .4rem; color: #40d870; font-weight: 600; font-size: .9rem; }
.tw-tcd-start { text-align: center; color: var(--tw-gold); font-weight: 700; }

/* Host boshqaruv paneli */
.tw-host-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: color-mix(in srgb, var(--tw-gold) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--tw-gold) 30%, transparent);
    border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1rem;
}
.tw-host-bar-info { display: flex; align-items: center; gap: .5rem; color: var(--tw-gold); font-weight: 600; font-size: .9rem; }

/* Poyga maydoni */
.tw-tstage { background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 16px; padding: 1.2rem; margin-bottom: 1rem; }
.tw-tmatch-head { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .8rem; font-weight: 700; }
.tw-tmatch-me { color: var(--tw-gold); }
.tw-tmatch-vs { color: var(--tw-muted); font-size: .8rem; }
.tw-tmatch-opp { color: var(--tw-accent); }
.tw-tlanes { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.tw-tlane { background: var(--tw-bg); border: 1px solid var(--tw-border); border-radius: 10px; padding: .55rem .7rem; }
.tw-lane-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .3rem; font-size: .88rem; }
.tw-lane-wpm { color: var(--tw-gold); font-weight: 700; }
.tw-twait { text-align: center; color: var(--tw-muted); padding: 2rem 1rem; }
.tw-twait i { font-size: 2rem; color: var(--tw-gold); display: block; margin-bottom: .6rem; }

/* ════════ Playoff bracket (kuchli dizayn) ════════ */
.tw-bracket-wrap {
    background:
        radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--tw-gold) 7%, transparent), transparent 55%),
        var(--tw-surface);
    border: 1px solid var(--tw-border); border-radius: 16px; padding: 1.2rem; margin-bottom: 1rem;
}
.tw-bracket-title { font-size: 1.05rem; display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; }

/* ════════ Playoff markazidagi 3D oltin gepard kubogi ════════ */
.tw-trophy-stage {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    margin: .2rem auto 1.4rem; position: relative;
}
.tw-trophy-3d {
    width: 300px; height: 340px; max-width: 86vw; position: relative;
    filter: drop-shadow(0 14px 40px rgba(232, 160, 32, .35));
}
.tw-trophy-3d canvas { display: block; width: 100% !important; height: 100% !important; }
.tw-trophy-fallback {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    font-size: 5rem; color: #e8a020;
    filter: drop-shadow(0 0 22px rgba(232, 160, 32, .6));
    animation: twTrophySpin 6s linear infinite;
}
@keyframes twTrophySpin { to { transform: rotateY(360deg); } }
.tw-trophy-caption {
    margin-top: -.4rem; font-size: .98rem; color: var(--tw-muted);
    display: flex; align-items: center; gap: .4rem; text-align: center;
}
.tw-trophy-caption i { color: #e8a020; }
.tw-trophy-caption.tw-trophy-won {
    color: #fff; font-size: 1.2rem; font-weight: 800;
    text-shadow: 0 0 18px rgba(232, 160, 32, .7);
    animation: twTrophyWon .8s ease;
}
.tw-trophy-caption.tw-trophy-won b { color: #ffcc55; }
@keyframes twTrophyWon { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.12); } 100% { transform: scale(1); opacity: 1; } }
.tw-trophy-celebrate .tw-trophy-3d { filter: drop-shadow(0 14px 60px rgba(255, 204, 85, .65)); }
.tw-rbtn--danger { background: #2a1414; border-color: #5a2020; color: #ff6b6b; }
.tw-rbtn--danger:hover { background: #3a1a1a; border-color: #ff6b6b; color: #ff8a8a; filter: none; }

.tw-tbracket { display: flex; gap: 2.4rem; overflow-x: auto; padding: .3rem .3rem 1rem; }
.tw-bk-round { display: flex; flex-direction: column; min-width: 230px; }
.tw-bk-rname {
    text-align: center; color: var(--tw-gold); font-size: .72rem; text-transform: uppercase;
    letter-spacing: .08em; font-weight: 800; margin-bottom: .7rem;
    padding: .3rem; border-radius: 8px; background: color-mix(in srgb, var(--tw-gold) 9%, transparent);
}
.tw-bk-round--final .tw-bk-rname { background: color-mix(in srgb, var(--tw-gold) 20%, transparent); color: var(--tw-gold); }
.tw-bk-col { display: flex; flex-direction: column; justify-content: space-around; flex: 1; gap: 1rem; }

/* O'yin kartasi */
.tw-bk-match {
    position: relative; background: var(--tw-bg); border: 1px solid var(--tw-border);
    border-radius: 12px; padding: .55rem; display: flex; flex-direction: column; gap: .4rem;
    transition: border-color .25s, box-shadow .25s, transform .15s;
    animation: bkIn .35s ease both;
}
@keyframes bkIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tw-bk-match:hover { transform: translateY(-2px); }
/* Round'lararo ulagich chiziq */
.tw-bk-round:not(.tw-bk-round--final) .tw-bk-match::after {
    content: ""; position: absolute; top: 50%; right: -1.25rem; width: 1.25rem; height: 2px;
    background: linear-gradient(90deg, var(--tw-border-strong), transparent); pointer-events: none;
}
.tw-bk-match.tw-bk-racing {
    border-color: color-mix(in srgb, #ff5566 55%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, #ff5566 30%, transparent), 0 6px 22px color-mix(in srgb, #ff5566 18%, transparent);
    animation: bkIn .35s ease both, bkRace 1.8s ease-in-out infinite .35s;
}
@keyframes bkRace {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, #ff5566 30%, transparent), 0 6px 22px color-mix(in srgb, #ff5566 14%, transparent); }
    50% { box-shadow: 0 0 0 1px color-mix(in srgb, #ff5566 55%, transparent), 0 8px 30px color-mix(in srgb, #ff5566 30%, transparent); }
}
.tw-bk-match.tw-bk-decided { border-color: color-mix(in srgb, var(--tw-gold) 35%, transparent); }
.tw-bk-match--final {
    border-color: color-mix(in srgb, var(--tw-gold) 50%, transparent);
    background: linear-gradient(180deg, color-mix(in srgb, var(--tw-gold) 8%, transparent), var(--tw-bg));
}
.tw-bk-live {
    position: absolute; top: -.55rem; left: 50%; transform: translateX(-50%); z-index: 3;
    font-size: .56rem; font-weight: 800; letter-spacing: .06em; color: #fff; background: #ff5566;
    padding: .1rem .45rem; border-radius: 999px; box-shadow: 0 2px 8px color-mix(in srgb, #ff5566 50%, transparent);
    animation: bkLive 1.1s ease-in-out infinite;
}
@keyframes bkLive { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.tw-bk-vs { text-align: center; font-size: .58rem; font-weight: 800; color: var(--tw-muted); letter-spacing: .1em; margin: -.15rem 0; }

/* O'yinchi qatori */
.tw-bk-side {
    position: relative; display: flex; align-items: center; gap: .5rem; overflow: hidden;
    padding: .4rem .55rem; font-size: .86rem; border-radius: 8px;
    background: color-mix(in srgb, var(--tw-surface) 60%, transparent); border: 1px solid transparent;
    transition: background .25s, border-color .25s;
}
.tw-bk-ava {
    width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center;
    font-size: .68rem; font-weight: 800; color: #fff; background: var(--c, var(--tw-accent));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
.tw-bk-pname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tw-bk-wpm { font-weight: 800; color: var(--tw-muted); font-size: .8rem; white-space: nowrap; }
.tw-bk-wpm small { font-size: .58rem; font-weight: 600; margin-left: 1px; opacity: .7; }
.tw-bk-wpm.tw-bk-fin { color: #40d870; }
.tw-bk-empty { opacity: .5; }
.tw-bk-empty .tw-bk-ava { background: var(--tw-border-strong); }
.tw-bk-won {
    background: color-mix(in srgb, var(--tw-gold) 16%, transparent);
    border-color: color-mix(in srgb, var(--tw-gold) 45%, transparent);
    color: var(--tw-gold);
    animation: bkWin .5s ease;
}
@keyframes bkWin { 0% { transform: scale(.96); } 60% { transform: scale(1.03); } 100% { transform: scale(1); } }
.tw-bk-won .tw-bk-wpm { color: var(--tw-gold); }
.tw-bk-lost { opacity: .5; }
.tw-bk-lost .tw-bk-pname { text-decoration: line-through; }
.tw-bk-crown { color: var(--tw-gold); font-size: .8rem; }
.tw-bk-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: transparent; }
.tw-bk-bar > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--tw-accent), var(--tw-gold)); transition: width .3s ease; }
.tw-bk-force {
    background: transparent; border: 1px solid var(--tw-border-strong); color: var(--tw-muted);
    border-radius: 6px; width: 26px; height: 26px; cursor: pointer; flex: none; display: grid; place-items: center; font-size: .72rem;
    transition: all .2s;
}
.tw-bk-force:hover { border-color: var(--tw-gold); color: var(--tw-gold); background: color-mix(in srgb, var(--tw-gold) 12%, transparent); }

/* Yakuniy joylar */
.tw-standings { background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 16px; padding: 1.2rem; }
.tw-stand-list { display: flex; flex-direction: column; gap: .45rem; }
.tw-stand-row {
    display: grid; grid-template-columns: 38px 1.6fr 2fr auto auto; align-items: center; gap: .7rem;
    background: var(--tw-bg); border: 1px solid var(--tw-border); border-radius: 10px; padding: .5rem .7rem;
}
.tw-stand-champ { border-color: color-mix(in srgb, var(--tw-gold) 45%, transparent); background: color-mix(in srgb, var(--tw-gold) 8%, transparent); }
.tw-stand-medal { font-size: 1.1rem; text-align: center; }
.tw-stand-rank { font-weight: 700; color: var(--tw-muted); }
.tw-stand-name { display: flex; flex-direction: column; font-weight: 600; font-size: .9rem; }
.tw-stand-name small { color: var(--tw-muted); font-weight: 400; font-size: .74rem; }
.tw-stand-bar { height: 8px; background: var(--tw-surface); border-radius: 999px; overflow: hidden; }
.tw-stand-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--tw-gold), var(--tw-accent)); }
.tw-stand-wpm { font-weight: 700; color: var(--tw-gold); font-size: .95rem; }
.tw-stand-wpm small { color: var(--tw-muted); font-weight: 400; font-size: .68rem; }
.tw-stand-acc { color: var(--tw-muted); font-size: .82rem; }

/* Tushib qolish oynasi */
.tw-elim-overlay {
    position: fixed; inset: 0; z-index: 1050; display: grid; place-items: center; padding: 1rem;
    background: rgba(0, 0, 0, .78); backdrop-filter: blur(4px);
}
.tw-elim-card {
    background: var(--tw-surface); border: 1px solid var(--tw-border-strong); border-radius: 18px;
    padding: 2rem 1.6rem; max-width: 420px; width: 100%; text-align: center;
    animation: twElimPop .35s ease;
}
@keyframes twElimPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tw-elim-icon { font-size: 3rem; color: #ff5566; }
.tw-elim-card h2 { margin: .4rem 0; }
.tw-elim-card > p { color: var(--tw-muted); margin-bottom: 1rem; }
.tw-elim-stats { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.4rem; }
.tw-elim-stat { display: flex; flex-direction: column; }
.tw-elim-stat span { font-size: 1.5rem; font-weight: 800; color: var(--tw-gold); }
.tw-elim-stat label { font-size: .72rem; color: var(--tw-muted); }
.tw-elim-stat.tw-elim-opp span { color: var(--tw-accent); }
.tw-elim-actions { display: flex; flex-direction: column; gap: .5rem; }

/* G'alaba toast */
.tw-advance-toast {
    position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 1040;
    display: flex; align-items: center; gap: .7rem;
    background: var(--tw-surface); border: 1px solid color-mix(in srgb, #40d870 45%, transparent);
    border-radius: 12px; padding: .8rem 1.2rem; box-shadow: 0 8px 30px rgba(0,0,0,.5);
    animation: twToast .35s ease;
}
@keyframes twToast { from { transform: translate(-50%, 20px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.tw-advance-toast > i { font-size: 1.6rem; color: #40d870; }
.tw-advance-toast div { display: flex; flex-direction: column; }
.tw-advance-toast span { color: var(--tw-muted); font-size: .8rem; }

@media (max-width: 720px) {
    .tw-treg-grid { grid-template-columns: 1fr; }
    .tw-stand-row { grid-template-columns: 30px 1fr auto; }
    .tw-stand-bar { display: none; }
}

/* ═══════════════════════════════════════════
   GOOGLE AUTH — Kirish / Profilni to'ldirish
   ═══════════════════════════════════════════ */
.tw-gauth { display: flex; justify-content: center; padding: 3rem 1rem; }
.tw-gauth-card {
    width: 100%; max-width: 420px; background: var(--tw-surface);
    border: 1px solid var(--tw-border); border-radius: 16px;
    padding: 2.4rem 2rem; text-align: center;
    box-shadow: 0 24px 60px -28px rgba(0,0,0,.8);
}
.tw-gauth-card--wide { max-width: 480px; text-align: left; }
.tw-gauth-logo { margin-bottom: .6rem; }
.tw-gauth-title { font-size: 1.7rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.tw-gauth-sub { color: var(--tw-muted); margin: .3rem 0 1.6rem; font-size: .96rem; }
.tw-gauth-err {
    background: rgba(255,80,80,.08); border: 1px solid rgba(255,80,80,.3);
    color: #ff8a8a; border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1.1rem; font-size: .9rem;
}
.tw-google-btn {
    display: flex; align-items: center; justify-content: center; gap: .7rem;
    width: 100%; padding: .85rem 1rem; border-radius: 10px;
    background: #fff; color: #1f1f1f; font-weight: 600; font-size: 1rem;
    text-decoration: none; border: 1px solid #dadce0; transition: filter .15s, transform .15s;
}
.tw-google-btn:hover { filter: brightness(.97); transform: translateY(-1px); color: #1f1f1f; }
.tw-google-ic { display: inline-flex; }
.tw-gauth-hint { color: var(--tw-muted); font-size: .82rem; margin: 1.3rem 0 0; line-height: 1.5; }

.tw-cp-step {
    display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--tw-gold); background: color-mix(in srgb, var(--tw-gold) 14%, transparent);
    border-radius: 999px; padding: .28rem .7rem; margin-bottom: .7rem;
}
.tw-cp-form { display: flex; flex-direction: column; gap: 1.2rem; margin-top: 1.4rem; }
.tw-cp-field { display: flex; flex-direction: column; gap: .4rem; }
.tw-cp-label { font-size: .85rem; font-weight: 600; color: var(--tw-text); }
.tw-cp-input-wrap { position: relative; display: flex; align-items: center; }
.tw-cp-at {
    position: absolute; left: .85rem; color: var(--tw-muted); font-weight: 600; pointer-events: none;
}
.tw-cp-input {
    width: 100%; padding: .8rem .9rem .8rem 1.9rem; background: #0d0d0d;
    border: 1px solid var(--tw-border-strong); border-radius: 10px; color: var(--tw-text);
    font-size: 1rem; font-family: var(--tw-code-font); outline: none; transition: border-color .15s;
}
.tw-cp-input:focus { border-color: var(--tw-gold); }
.tw-cp-status { position: absolute; right: .9rem; font-size: .85rem; font-weight: 700; }
.tw-cp-status--ok { color: #36d27a; }
.tw-cp-status--bad { color: #ff6b6b; }
.tw-cp-status--checking { color: var(--tw-muted); }
.tw-cp-select {
    width: 100%; padding: .8rem .9rem; background: #0d0d0d;
    border: 1px solid var(--tw-border-strong); border-radius: 10px; color: var(--tw-text);
    font-size: 1rem; outline: none; transition: border-color .15s;
}
.tw-cp-select:focus { border-color: var(--tw-gold); }
.tw-cp-help { font-size: .78rem; color: var(--tw-muted); }
.tw-cp-err { color: #ff6b6b; font-size: .88rem; min-height: 1em; }

/* ═══════════════════════════════════════════
   PROFIL 2.0 — /Profile va /share/{username}
   ═══════════════════════════════════════════ */
.tw-profile2 { max-width: 920px; margin: 1.5rem auto 3rem; }
.tw-profile-loading { text-align: center; color: var(--tw-muted); padding: 3rem 0; }
.tw-profile-empty { text-align: center; padding: 3.5rem 1rem; }
.tw-profile-empty-ic { font-size: 3rem; margin-bottom: .5rem; }
.tw-profile-empty h2 { font-weight: 800; }
.tw-profile-empty p { color: var(--tw-muted); margin-bottom: 1.2rem; }

.tw-profile-card {
    position: relative; background: var(--tw-surface); border: 1px solid var(--tw-border);
    border-radius: 16px; overflow: hidden;
}
.tw-profile-banner {
    height: 88px;
    background:
        radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tw-gold) 45%, transparent), transparent 55%),
        radial-gradient(120% 160% at 100% 0%, color-mix(in srgb, var(--tw-accent) 38%, transparent), transparent 60%),
        linear-gradient(120deg, #0b0b14, #0a0a0a);
    border-bottom: 1px solid var(--tw-border);
}
.tw-profile-head2 {
    display: flex; align-items: flex-end; gap: 1.1rem; padding: 0 1.6rem 1.4rem; margin-top: -34px;
    flex-wrap: wrap;
}
.tw-profile-avatar {
    width: 84px; height: 84px; border-radius: 20px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.3rem; font-weight: 800; color: #fff;
    background: linear-gradient(150deg, hsl(var(--h) 70% 52%), hsl(calc(var(--h) + 40) 72% 42%));
    border: 3px solid var(--tw-surface); box-shadow: 0 10px 30px -10px rgba(0,0,0,.7);
}
.tw-profile-id { flex: 1; min-width: 200px; padding-bottom: .2rem; }
.tw-profile-name { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.tw-crown-sm { font-size: 1.1rem; }
.tw-profile-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; color: var(--tw-muted); font-size: .9rem; margin-top: .3rem; }
.tw-profile-meta i { color: var(--tw-gold); margin-right: .25rem; }
.tw-profile-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding-bottom: .2rem; }

.tw-stat-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: .8rem; margin: 1.1rem 0;
}
.tw-stat-card {
    background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 12px;
    padding: 1rem .7rem; text-align: center;
}
.tw-stat-card--accent { border-color: color-mix(in srgb, var(--tw-gold) 45%, var(--tw-border)); }
.tw-stat-ic { color: var(--tw-gold); font-size: 1.1rem; }
.tw-stat-val { font-size: 1.5rem; font-weight: 800; font-family: var(--tw-font); margin-top: .25rem; }
.tw-stat-card--accent .tw-stat-val { color: var(--tw-gold); }
.tw-stat-lbl { color: var(--tw-muted); font-size: .74rem; margin-top: .15rem; }

.tw-profile-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tw-profile-panel {
    background: var(--tw-surface); border: 1px solid var(--tw-border); border-radius: 14px; padding: 1.1rem 1.2rem;
}
.tw-panel-title { font-size: 1rem; font-weight: 700; margin: 0 0 .9rem; }
.tw-panel-title i { color: var(--tw-gold); margin-right: .4rem; }

.tw-pb-table { display: flex; flex-direction: column; }
.tw-pb-row {
    display: grid; grid-template-columns: 1fr auto auto auto; gap: .8rem; align-items: center;
    padding: .55rem .2rem; border-bottom: 1px solid var(--tw-border); font-size: .92rem;
}
.tw-pb-row:last-child { border-bottom: none; }
.tw-pb-head { color: var(--tw-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; }
.tw-pb-row--empty { color: var(--tw-muted); opacity: .5; }
.tw-pb-row--top { background: color-mix(in srgb, var(--tw-gold) 8%, transparent); border-radius: 8px; }
.tw-pb-mode { font-weight: 600; }
.tw-pb-wpm { font-family: var(--tw-font); font-weight: 700; color: var(--tw-gold); }
.tw-pb-wpm small { color: var(--tw-muted); font-weight: 400; }
.tw-pb-acc, .tw-pb-date { color: var(--tw-muted); font-size: .82rem; }
.tw-crown { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--tw-gold) 60%, transparent)); }

.tw-recent-list { list-style: none; padding: 0; margin: 0; }
.tw-recent-row {
    display: grid; grid-template-columns: auto 1fr auto auto; gap: .8rem; align-items: center;
    padding: .5rem .2rem; border-bottom: 1px solid var(--tw-border); font-size: .9rem;
}
.tw-recent-row:last-child { border-bottom: none; }
.tw-recent-mode {
    font-size: .72rem; font-weight: 700; color: var(--tw-muted);
    border: 1px solid var(--tw-border-strong); border-radius: 6px; padding: .12rem .4rem;
}
.tw-recent-wpm { font-family: var(--tw-font); font-weight: 700; }
.tw-recent-wpm small { color: var(--tw-muted); font-weight: 400; }
.tw-recent-acc { color: var(--tw-muted); font-size: .82rem; }
.tw-recent-date { color: var(--tw-muted); font-size: .78rem; }
.tw-recent-empty { display: block; color: var(--tw-muted); text-align: center; padding: 1rem 0; }

.tw-toast {
    position: fixed; left: 50%; bottom: 28px;
    transform: translateX(-50%) translateY(16px);
    background: #fff; color: #111; font-weight: 600; font-size: .88rem;
    padding: .7rem 1.1rem; border-radius: 10px; box-shadow: 0 12px 40px -8px rgba(0,0,0,.6);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999; max-width: 90vw;
}
.tw-toast--show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 820px) {
    .tw-stat-grid { grid-template-columns: repeat(3, 1fr); }
    .tw-profile-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .tw-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .tw-profile-actions { width: 100%; }
}