/* =========================================================================
   flagbattle.online — DIZAYN TIZIMI
   Estetika: sport turnir arenasi. To'q ko'k tun foni, jamoa ranglari
   (ko'k A / qizil B), oltin aksent (g'olib/turnir). Display shrift —
   Rajdhani (kondensatsiyalangan, sport tablo hissi), body — Inter.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
    /* Ranglar */
    --bg:        #060912;
    --bg-2:      #0a1024;
    --surface:   #0f1830;
    --surface-2: #16203f;
    --line:      rgba(120,160,220,0.14);
    --ink:       #eaf0ff;
    --ink-dim:   #8ea3c8;
    --ink-mute:  #56688c;

    --team-a:    #38bdf8;   /* ko'k */
    --team-a-dk: #0c4a6e;
    --team-b:    #f43f5e;   /* qizil */
    --team-b-dk: #7f1d3a;
    --gold:      #fbbf24;   /* aksent — turnir/g'olib */
    --gold-dk:   #b45309;
    --green:     #4ade80;

    /* O'lchov */
    --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px;
    --max:  1200px;
    --shadow: 0 20px 60px rgba(0,0,0,0.55);
    --glow-a: 0 0 40px rgba(56,189,248,0.35);
    --glow-b: 0 0 40px rgba(244,63,94,0.35);
    --glow-g: 0 0 40px rgba(251,191,36,0.4);
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
    background:
        radial-gradient(1200px 600px at 20% -10%, rgba(56,189,248,0.10), transparent 60%),
        radial-gradient(1200px 600px at 80% -10%, rgba(244,63,94,0.10), transparent 60%),
        var(--bg);
    color:var(--ink);
    font-family:'Inter',system-ui,-apple-system,sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

/* Display shrift utili */
.display{font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:0.01em;line-height:1.02;}
.eyebrow{font-family:'Rajdhani',sans-serif;font-weight:600;letter-spacing:0.22em;text-transform:uppercase;
    font-size:0.82rem;color:var(--ink-mute);}

/* Layout konteyner */
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px;}

/* ---------- Navbar ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);
    background:rgba(6,9,18,0.7);border-bottom:1px solid var(--line);}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:70px;}
.brand{display:flex;align-items:center;gap:12px;font-family:'Rajdhani';font-weight:700;font-size:1.5rem;letter-spacing:0.02em;}
.brand .dot{width:12px;height:12px;border-radius:50%;background:var(--gold);box-shadow:var(--glow-g);
    animation:pulse 1.8s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.5;transform:scale(0.8);}}
.brand .tld{color:var(--ink-mute);font-weight:600;}
.nav-links{display:flex;gap:28px;align-items:center;}
.nav-links a{font-size:0.95rem;color:var(--ink-dim);transition:color 0.2s;}
.nav-links a:hover{color:var(--ink);}

/* ---------- Tugmalar ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
    font-family:'Rajdhani';font-weight:700;font-size:1.05rem;letter-spacing:0.03em;
    padding:15px 34px;border-radius:var(--r-md);transition:transform 0.15s,box-shadow 0.2s,background 0.2s;}
.btn:active{transform:translateY(1px) scale(0.99);}
.btn-primary{background:linear-gradient(135deg,var(--gold),#f59e0b);color:#1a1206;box-shadow:var(--glow-g);}
.btn-primary:hover{box-shadow:0 0 56px rgba(251,191,36,0.55);}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);background:rgba(255,255,255,0.02);}
.btn-ghost:hover{border-color:var(--ink-dim);background:rgba(255,255,255,0.05);}
.btn-lg{padding:19px 46px;font-size:1.25rem;}

/* ---------- Chip / badge ---------- */
.chip{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;
    border:1px solid var(--line);font-size:0.85rem;color:var(--ink-dim);background:rgba(255,255,255,0.03);}
.live-chip{color:#fff;border-color:rgba(244,63,94,0.4);}
.live-chip .live-dot{width:9px;height:9px;border-radius:50%;background:var(--team-b);animation:pulse 1.4s infinite;}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);margin-top:100px;padding:48px 0 60px;color:var(--ink-mute);}
.footer-in{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:center;}
.footer a{color:var(--ink-dim);}
.footer a:hover{color:var(--ink);}

/* ---------- Responsiv ---------- */
@media (max-width:720px){
    .nav-links{display:none;}
    .wrap{padding:0 18px;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important;}
}