/* ===================================
LIGAME CORE THEME - DARK / LIGHT READY
=================================== */

:root,
[data-theme="dark"]{
    --bg:#08110a;
    --card:#111d13;
    --card-2:#18261a;
    --green:#3DFF8E;
    --green-dark:#27c967;
    --red:#ff5f57;
    --gold:#ffb938;
    --white:#F4FFF7;
    --gray:#93a596;
    --border:rgba(255,255,255,.07);

    --page-gradient:
        radial-gradient(circle at top, rgba(61,255,142,.13), transparent 36%),
        linear-gradient(180deg, #101b12 0%, #08110a 100%);

    --auth-gradient:
        radial-gradient(circle at top, rgba(61,255,142,.16), transparent 36%),
        linear-gradient(180deg,#101b12 0%,#08110a 100%);

    --desktop-bg:
        radial-gradient(circle at top left, rgba(61,255,142,.10), transparent 32%),
        radial-gradient(circle at top right, rgba(255,95,87,.08), transparent 28%),
        #050b06;

    --topbar-bg:rgba(21,46,28,.94);
    --nav-bg:rgba(10,20,12,.92);
    --sidebar-bg:rgba(10,20,12,.94);
    --glass-bg:rgba(255,255,255,.04);
    --input-bg:rgba(255,255,255,.045);
    --card-gradient:linear-gradient(180deg, rgba(24,38,26,.98), rgba(17,29,19,.98));
    --welcome-gradient:linear-gradient(135deg, rgba(61,255,142,.18), rgba(17,29,19,.96));
    --sport-gradient:linear-gradient(145deg,#0f2a1b 0%, #0b1710 100%);
    --culture-gradient:linear-gradient(145deg,#301113 0%, #12090a 100%);
    --leader-gold-gradient:linear-gradient(90deg, rgba(255,185,56,.15), rgba(17,29,19,.95));
    --shadow:rgba(0,0,0,.32);
    --shadow-soft:rgba(0,0,0,.22);
}

[data-theme="light"]{
    --bg:#f4f8f5;
    --card:#ffffff;
    --card-2:#edf4ef;
    --green:#168a43;
    --green-dark:#0f7034;
    --red:#d6453d;
    --gold:#d89116;
    --white:#101b12;
    --gray:#657468;
    --border:rgba(10,35,18,.12);

    --page-gradient:
        radial-gradient(circle at top, rgba(22,138,67,.13), transparent 36%),
        linear-gradient(180deg,#f7fbf8 0%,#eef5f0 100%);

    --auth-gradient:
        radial-gradient(circle at top, rgba(22,138,67,.14), transparent 36%),
        linear-gradient(180deg,#f8fbf8 0%,#edf5ef 100%);

    --desktop-bg:
        radial-gradient(circle at top left, rgba(22,138,67,.12), transparent 32%),
        radial-gradient(circle at top right, rgba(214,69,61,.08), transparent 28%),
        #eef5f0;

    --topbar-bg:rgba(255,255,255,.90);
    --nav-bg:rgba(255,255,255,.92);
    --sidebar-bg:rgba(255,255,255,.94);
    --glass-bg:rgba(10,35,18,.035);
    --input-bg:#ffffff;
    --card-gradient:linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,250,246,.98));
    --welcome-gradient:linear-gradient(135deg, rgba(22,138,67,.13), rgba(255,255,255,.96));
    --sport-gradient:linear-gradient(145deg,#ffffff 0%, #edf8f0 100%);
    --culture-gradient:linear-gradient(145deg,#ffffff 0%, #fff0ef 100%);
    --leader-gold-gradient:linear-gradient(90deg, rgba(216,145,22,.14), rgba(255,255,255,.96));
    --shadow:rgba(16,42,24,.12);
    --shadow-soft:rgba(16,42,24,.10);
}

/* ===================================
RESET
=================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    -webkit-tap-highlight-color:transparent;
}

html,
body{
    width:100%;
    min-height:100%;
    background:var(--bg);
    color:var(--white);
    font-family:'Plus Jakarta Sans', sans-serif;
}

body{
    overflow-x:hidden;
}

/* ===================================
APP CONTAINER
=================================== */

.ligame-app,
.ligame-main{
    min-height:100vh;
}

.ligame-page{
    min-height:100vh;
    padding-bottom:96px;
    background:var(--page-gradient);
}

/* ===================================
TOPBAR FIXED
=================================== */

.ligame-topbar{
    position:fixed;
    top:0;
    
    right:0;
    z-index:999;

    height:74px;
    padding:0 12px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    background:var(--topbar-bg);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid var(--border);
}

.ligame-logo{
    font-family:'Bebas Neue', cursive;
    font-size:27px;
    letter-spacing:2.4px;
    line-height:1;
}

.ligame-topbar-logo{
    height:46px;
    width:auto;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 6px 14px rgba(0,0,0,.25));
}


.logo-light{
    display:none;
}

[data-theme="light"] .logo-dark{
    display:none;
}

[data-theme="light"] .logo-light{
    display:block;
}

[data-theme="dark"] .logo-dark{
    display:block;
}

[data-theme="dark"] .logo-light{
    display:none;
}

.ligame-topbar-logo{
    height:42px;
    width:auto;
    object-fit:contain;
}


.ligame-sidebar-logo{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px 0 20px;
}

.ligame-sidebar-logo-img{
    width:110px;
    height:auto;
    object-fit:contain;
}

.ligame-mobile-menu-brand{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.ligame-mobile-menu-logo{
    width:85px;
    height:auto;
    object-fit:contain;
}

.ligame-mobile-menu-brand small{
    color:var(--gray);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.ligame-icon-btn{
    width:42px;
    height:42px;
    border-radius:50%;

    border:1px solid var(--border);
    background:var(--glass-bg);

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--white);
    text-decoration:none;
    cursor:pointer;

    box-shadow:0 8px 22px var(--shadow-soft);
    transition:.22s;
}

.ligame-icon-btn:hover{
    transform:translateY(-2px);
    border-color:rgba(61,255,142,.25);
}

/* ===================================
CONTENT
=================================== */

.ligame-content{
    padding:92px 14px 14px;
}

/* ===================================
WELCOME / HERO
=================================== */

.ligame-welcome{
    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:20px;
    margin-bottom:16px;

    border-radius:0;

    background:var(--welcome-gradient);

    border:1px solid rgba(61,255,142,.16);

    box-shadow:
        0 16px 38px var(--shadow),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.ligame-welcome span{
    color:var(--gray);
    font-size:12px;
    font-weight:700;
}

.ligame-welcome h1{
    font-family:'Bebas Neue', cursive;
    font-size:32px;
    letter-spacing:1.2px;
    margin:3px 0 0;
    line-height:1;
}

.ligame-badge{
    background:rgba(61,255,142,.12);
    border:1px solid rgba(61,255,142,.25);
    color:var(--green);
    padding:7px 13px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    letter-spacing:.7px;
}

/* ===================================
STATS
=================================== */



.ligame-theme-toggle{
    position:fixed;
    top:30px;
    right:20px;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--glass-bg);
    color:var(--white);
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    box-shadow:0 10px 24px var(--shadow);

    z-index:9999;
    transition:.25s;
}

.ligame-theme-toggle:hover{
    transform:translateY(-2px);
}




.ligame-stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:9px;
    margin-bottom:14px;
}

.ligame-stat-card{
    background:var(--card-gradient);
    border:1px solid var(--border);
    border-radius:10px;
    text-align:center;
    padding:14px 8px;

    box-shadow:
        0 10px 24px var(--shadow-soft),
        inset 0 1px 0 rgba(255,255,255,.035);

    transition:.25s;
}

.ligame-stat-card:hover{
    transform:translateY(-3px);
}

.ligame-stat-card strong{
    display:block;
    font-family:'Bebas Neue', cursive;
    font-size:34px;
    line-height:1;
    color:var(--green);
}

.ligame-stat-card span{
    display:block;
    color:var(--gray);
    font-size:10px;
    margin-top:5px;
    text-transform:uppercase;
    letter-spacing:1.2px;
    font-weight:900;
}

/* ===================================
ROUTE CARDS
=================================== */

.ligame-routes-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
    margin-bottom:14px;
}

.ligame-route-card{
    position:relative;
    overflow:hidden;

    min-height:220px;
    border-radius:10px;
    padding:15px 13px;

    text-decoration:none;
    display:flex;
    flex-direction:column;

    border:1px solid var(--border);

    transition:.25s;
}

.ligame-route-card:hover{
    transform:translateY(-4px);
}

.ligame-route-card::before{
    content:"";
    position:absolute;
    width:110px;
    height:110px;
    right:-36px;
    top:-36px;
    border-radius:50%;
    opacity:.18;
}

.ligame-route-card.sport{
    background:var(--sport-gradient);
    box-shadow:0 0 34px rgba(61,255,142,.08);
}

.ligame-route-card.sport::before{
    background:var(--green);
}

.ligame-route-card.culture{
    background:var(--culture-gradient);
    box-shadow:0 0 34px rgba(255,95,87,.08);
}

.ligame-route-card.culture::before{
    background:var(--red);
}

.route-title{
    font-family:'Bebas Neue', cursive;
    font-size:15px;
    letter-spacing:2px;
    position:relative;
    z-index:1;
}

.sport .route-title{
    color:var(--green);
}

.culture .route-title{
    color:var(--red);
}

.route-icon{
    text-align:center;
    font-size:45px;
    margin:17px 0;
    filter:drop-shadow(0 8px 14px rgba(0,0,0,.22));
    position:relative;
    z-index:1;
}

.ligame-route-card h3{
    color:var(--white);
    font-size:13px;
    margin:0 0 6px;
    line-height:1.35;
    position:relative;
    z-index:1;
}

.ligame-route-card p{
    color:var(--gray);
    font-size:10.5px;
    line-height:1.55;
    margin:0 0 10px;
    position:relative;
    z-index:1;
}

.ligame-route-card span{
    margin-top:auto;
    display:block;
    text-align:center;
    padding:10px;
    border-radius:0;
    font-size:10px;
    font-weight:900;
    letter-spacing:1px;
    position:relative;
    z-index:1;
}

.sport span{
    color:var(--green);
    border:1px solid rgba(61,255,142,.28);
    background:rgba(61,255,142,.09);
}

.culture span{
    color:var(--red);
    border:1px solid rgba(255,95,87,.28);
    background:rgba(255,95,87,.09);
}

/* ===================================
CARDS
=================================== */

.ligame-card,
.ligame-card-2{
    background:var(--card-gradient);
    border:1px solid var(--border);
    border-radius:0;
    padding:16px;

    box-shadow:
        0 10px 25px var(--shadow-soft),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.ligame-card-2{
    background:var(--card-2);
}

.ligame-multiplier{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px;
}

.ligame-multiplier strong{
    font-size:13px;
}

.ligame-multiplier p{
    margin:4px 0 0;
    color:var(--gray);
    font-size:11px;
}

.ligame-multiplier span{
    font-family:'Bebas Neue', cursive;
    font-size:34px;
    color:var(--green);
}

/* ===================================
SECTION HEAD
=================================== */

.ligame-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:11px;
}

.ligame-section-head h2{
    font-family:'Bebas Neue', cursive;
    font-size:21px;
    letter-spacing:1.2px;
    margin:0;
}

.ligame-section-head a{
    color:var(--green);
    text-decoration:none;
    font-size:12px;
    font-weight:900;
}

/* ===================================
LEADERBOARD
=================================== */

.ligame-leaderboard{
    margin-bottom:8px;
}

.ligame-leader-row{
    display:flex;
    align-items:center;
    gap:10px;

    background:var(--card-gradient);
    border:1px solid var(--border);

    border-radius:0;
    padding:12px 13px;
    margin-bottom:8px;

    box-shadow:0 8px 20px var(--shadow-soft);
    transition:.25s;
}

.ligame-leader-row:hover{
    transform:translateX(3px);
}

.ligame-leader-row span{
    width:34px;
    font-family:'Bebas Neue', cursive;
    font-size:19px;
    color:var(--gray);
}

.ligame-leader-row strong{
    flex:1;
    font-size:13px;
}

.ligame-leader-row em{
    font-style:normal;
    font-family:'Bebas Neue', cursive;
    font-size:22px;
    color:var(--green);
}

.ligame-leader-row.gold{
    background:var(--leader-gold-gradient);
    border-color:rgba(255,185,56,.18);
}

.ligame-leader-row.gold span,
.ligame-leader-row.gold em{
    color:var(--gold);
}

.ligame-leader-row.me{
    border-color:rgba(255,185,56,.25);
    background:rgba(255,185,56,.06);
}

/* ===================================
BOTTOM NAV
=================================== */

.ligame-bottom-nav{
    position:fixed;
    bottom:12px;
    left:12px;
    right:12px;
    z-index:999;

    height:66px;

    display:grid;
    grid-template-columns:repeat(5,1fr);

    border-radius:45px;

    background:var(--glass-bg);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    border:1px solid var(--border);

    box-shadow:
        0 14px 38px var(--shadow),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.ligame-bottom-nav{
    transition:
        transform .30s ease,
        height .30s ease,
        left .30s ease,
        right .30s ease,
        box-shadow .30s ease,
        border-radius .30s ease;
        transform:scale(.95);
}

.ligame-bottom-nav.scrolled{
     height:56px;
    left:30px;
    right:30px;
    transform:scale(.90);

    border-radius:45px;

    box-shadow:
        0 18px 40px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.05);

    backdrop-filter:blur(28px);
    -webkit-backdrop-filter:blur(28px);
}

.ligame-bottom-nav.scrolled a{
    transform:scale(.92);
}

.ligame-bottom-nav a{
    transition:.25s;
}


.ligame-bottom-nav a{
    color:var(--gray);
    text-decoration:none;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;

    font-size:18px;
    transition:.22s;
}

.ligame-bottom-nav small{
    font-size:9px;
    font-weight:900;
    letter-spacing:.4px;
}

.ligame-bottom-nav a.active{
    color:var(--green);
    background:rgb(61 255 142 / 6%);
    border-radius:45px;
    margin:7px 4px;
}

/* ===================================
BUTTONS
=================================== */

.btn-ligame{
    width:100%;
    border:none;
    border-radius:14px;
    padding:14px;
    cursor:pointer;
    font-weight:800;
    transition:.22s;
}

.btn-ligame:hover{
    transform:translateY(-2px);
}

.btn-green{
    background:var(--green);
    color:var(--card);
}

.btn-red{
    background:var(--red);
    color:#fff;
}

.btn-outline{
    background:transparent;
    border:1px solid var(--border);
    color:var(--white);
}





/* ===================================
TYPOGRAPHY HELPERS
=================================== */

.ligame-title{
    font-family:'Bebas Neue', cursive;
    letter-spacing:1px;
}

.text-green{
    color:var(--green);
}

.text-red{
    color:var(--red);
}

.text-gold{
    color:var(--gold);
}

.text-gray{
    color:var(--gray);
}

.ligame-popup-language{
    justify-content:center;
    padding:8px 0;
}

.ligame-language-switch{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.ligame-language-switch form{
    margin:0;
}

.ligame-language-switch button{
    position:relative;

    border:none;
    background:none;

    padding:4px 2px;

    color:var(--gray);

    font-size:13px;
    font-weight:800;

    cursor:pointer;

    transition:.25s;
}

.ligame-language-switch button:hover{
    color:var(--red);
}

.ligame-language-switch button.active{
    color:var(--red);
}

.ligame-language-switch button.active::after{

    content:'';

    position:absolute;

    left:2px;
    right:2px;
    bottom:-4px;

    height:2px;

    border-radius:20px;

    background:var(--red);

}

.ligame-language-switch button::after{
    transition:.25s ease;
}



.ligame-topbar-language{
    padding:12px 18px;
    border-top:1px solid var(--border);
    border-bottom:1px solid var(--border);
    display:flex;
    justify-content:center;
}

.ligame-topbar-language .ligame-language-switch{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.ligame-topbar-language .ligame-language-switch form{
    margin:0;
}

.ligame-topbar-language .ligame-language-switch button{
    position:relative;
    border:none;
    background:none;
    padding:4px 2px;
    color:var(--gray);
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:.25s;
}

.ligame-topbar-language .ligame-language-switch button:hover{
    color:var(--red);
}

.ligame-topbar-language .ligame-language-switch button.active{
    color:var(--red);
}

.ligame-topbar-language .ligame-language-switch button.active::after{
    content:'';
    position:absolute;
    left:2px;
    right:2px;
    bottom:-4px;
    height:2px;
    border-radius:20px;
    background:var(--red);
}


/* ===================================
THEME TOGGLE
=================================== */

.ligame-theme-toggle{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--glass-bg);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    text-decoration:none;
    box-shadow:0 8px 22px var(--shadow-soft);
    transition:.22s;
}

.ligame-theme-toggle:hover{
    transform:translateY(-2px);
    border-color:rgba(61,255,142,.25);
}

.ligame-auth-theme-toggle{
    position:fixed;
    top:18px;
    right:18px;
    z-index:1000;
}




/*LOGOUT*/
.ligame-sidebar-logout{
    width:100%;
    height:46px;

    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;

    border:none;
    border-radius:0;

    background:rgba(255,95,87,.12);
    border:1px solid rgba(255,95,87,.18);

    color:var(--red);

    font-size:13px;
    font-weight:900;

    cursor:pointer;
    transition:.25s;
}

.ligame-sidebar-logout:hover{
    background:rgba(255,95,87,.18);
    transform:translateY(-2px);
}
/*LOGOUT*/


.ligame-bottom-nav button{
    border:0;
    background:transparent;
    color:var(--gray);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    font-size:18px;
    cursor:pointer;
}

.ligame-bottom-nav button.active{
    color:var(--green);
    background:rgba(61,255,142,.12);
    border-radius:17px;
    margin:7px 4px;
}


.ligame-profile-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1200;
    opacity:0;
    pointer-events:none;
    transition:.25s;
}

.ligame-profile-popup-overlay.open{
    opacity:1;
    pointer-events:auto;
}

.ligame-profile-popup{
    position:fixed;
    left:12px;
    right:12px;
    bottom:90px;
    z-index:1201;
    padding:14px;
    border-radius:10px;
    background:var(--card);
    border:1px solid var(--border);
    box-shadow:0 20px 50px var(--shadow);
    transform:translateY(24px);
    opacity:0;
    pointer-events:none;
    transition:.25s;
}

.ligame-profile-popup.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
}

.ligame-popup-handle{
    width:42px;
    height:4px;
    border-radius:10px;
    background:var(--border);
    margin:0 auto 14px;
}

.ligame-popup-user{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px;
    border-radius:10px;
    background:var(--card-2);
    margin-bottom:10px;
}

.ligame-popup-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    background:rgba(61,255,142,.12);
    color:var(--green);
    display:flex;
    align-items:center;
    justify-content:center;
}

.ligame-popup-user strong{
    display:block;
    font-size:14px;
}

.ligame-popup-user span{
    display:block;
    margin-top:3px;
    color:var(--gray);
    font-size:11px;
}

.ligame-popup-item{
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    gap:10px;
    padding:0 14px;
    border-radius:10px;
    background:transparent;
    border:0;
    color:var(--white);
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}

.ligame-popup-item:hover{
    background:var(--card-2);
}

.ligame-popup-logout{
    color:var(--red);
}





.ligame-topbar-profile{
    position:fixed;
    top:82px;
    right:12px;

    width:240px;

    background:var(--card);
    border:1px solid var(--border);

    border-radius:10px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    overflow:hidden;

    opacity:0;
    visibility:hidden;
    transform:translateY(-10px);

    transition:.25s;

    z-index:1500;
}

.ligame-topbar-profile.open{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.ligame-topbar-profile-user{
    padding:16px;
    border-bottom:1px solid var(--border);
}

.ligame-topbar-profile-user strong{
    display:block;
    font-size:14px;
}

.ligame-topbar-profile-user small{
    color:var(--gray);
}

.ligame-topbar-profile-item{
    width:100%;

    border:0;
    background:none;

    display:flex;
    align-items:center;

    padding:14px 16px;

    color:var(--white);
    text-decoration:none;

    cursor:pointer;

    transition:.2s;
}

.ligame-topbar-profile-item:hover{
    background:var(--card-2);
}

.ligame-topbar-profile-item.logout{
    color:var(--red);
}




.ligame-splash{
    position:fixed;
    inset:0;
    z-index:99999;
    background:#030604;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    transition:opacity .55s ease, visibility .55s ease;
}

.ligame-splash.hide{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.ligame-splash-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 28% 48%, rgba(61,255,142,.28), transparent 34%),
        radial-gradient(circle at 72% 48%, rgba(255,40,40,.30), transparent 34%),
        linear-gradient(180deg,#020302 0%,#071108 100%);
}

.ligame-splash-light{
    position:absolute;
    width:260px;
    height:520px;
    filter:blur(48px);
    opacity:.45;
    animation:splashLightMove 2.4s ease-in-out infinite alternate;
}

.ligame-splash-light.green{
    left:10%;
    background:rgba(61,255,142,.55);
}

.ligame-splash-light.red{
    right:10%;
    background:rgba(255,40,40,.55);
    animation-delay:.45s;
}

.ligame-splash-content{
    position:relative;
    z-index:2;
    text-align:center;
    animation:splashPulse 1.8s ease-in-out infinite;
}

.ligame-splash-logo{
    width:230px;
    max-width:72vw;
    display:block;
    margin:0 auto 34px;
    filter:drop-shadow(0 18px 38px rgba(0,0,0,.65));
}

.ligame-splash-dots{
    display:flex;
    justify-content:center;
    gap:12px;
    margin-bottom:18px;
}

.ligame-splash-dots span{
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--green);
    animation:splashDot 1.1s ease-in-out infinite;
}

.ligame-splash-dots span:nth-child(2){
    background:#fff;
    animation-delay:.18s;
}

.ligame-splash-dots span:nth-child(3){
    background:var(--red);
    animation-delay:.36s;
}

.ligame-splash-text{
    color:rgba(255,255,255,.88);
    font-size:13px;
    font-weight:900;
    letter-spacing:3px;
}

@keyframes splashLightMove{
    from{
        transform:translateY(-40px) scale(.95);
        opacity:.28;
    }
    to{
        transform:translateY(40px) scale(1.08);
        opacity:.65;
    }
}

@keyframes splashPulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.025);
    }
}

@keyframes splashDot{
    0%,100%{
        transform:translateY(0);
        opacity:.45;
    }
    50%{
        transform:translateY(-8px);
        opacity:1;
    }
}



.ligame-auth-top-actions{
    position:fixed;
    top:18px;
    right:18px;
    z-index:1000;

    display:flex;
    align-items:center;
    gap:8px;
}

.ligame-auth-top-actions .ligame-theme-toggle{
    position:static;
}

.ligame-lang-mini{
    height:42px;
    min-width:48px;
    width: 60px;
    padding:0 12px;
    position: fixed;
    top: 30px;
    border-radius:999px;
    border:1px solid var(--border);

    background:var(--glass-bg);
    color:var(--gray);

    font-size:11px;
    font-weight:900;
    letter-spacing:1px;

    cursor:pointer;

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}


.ligame-auth-logo-img{
    width:170px;
    max-width:70vw;
    display:block;
    margin:0 auto;
    object-fit:contain;
}





.ligame-mobile-menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.72);
    z-index:1800;
    opacity:0;
    pointer-events:none;
    transition:.28s;
}

.ligame-mobile-menu-overlay.open{
    opacity:1;
    pointer-events:auto;
}

.ligame-mobile-menu{
    position:fixed;
    left:12px;
    right:12px;
    top:20px;
    z-index:1801;

    padding:16px;
    border-radius:28px;

    background:
        radial-gradient(circle at top left, rgba(61,255,142,.16), transparent 38%),
        radial-gradient(circle at bottom right, rgba(255,95,87,.14), transparent 36%),
        var(--card);

    border:1px solid var(--border);

    box-shadow:
        0 28px 70px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.05);

    transform:translateY(-30px) scale(.96);
    opacity:0;
    pointer-events:none;

    transition:.32s cubic-bezier(.2,.8,.2,1);
}

.ligame-mobile-menu.open{
    transform:translateY(0) scale(1);
    opacity:1;
    pointer-events:auto;
}

.ligame-mobile-menu-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:14px;
}

.ligame-mobile-menu-head strong{
    font-family:'Bebas Neue', cursive;
    font-size:30px;
    letter-spacing:2px;
    line-height:1;
}

.ligame-mobile-menu-head strong span{
    color:var(--green);
}

.ligame-mobile-menu-head small{
    display:block;
    margin-top:4px;
    color:var(--gray);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.ligame-mobile-menu-head button{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--glass-bg);
    color:var(--white);
    cursor:pointer;
}

.ligame-mobile-user-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px;
    margin-bottom:14px;
    border-radius:0;
    background:rgba(61,255,142,.08);
    border:1px solid rgba(61,255,142,.14);
}

.ligame-mobile-user-avatar{
    width:44px;
    height:44px;
    border-radius:50%;
    background:rgba(61,255,142,.14);
    color:var(--green);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
}

.ligame-mobile-user-card strong{
    display:block;
    font-size:14px;
}

.ligame-mobile-user-card span{
    display:flex;
    margin-top:3px;
    color:var(--gray);
    font-size:11px;
    font-weight:800;
}

.ligame-mobile-menu-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.ligame-mobile-menu-grid a{
    min-height:116px;
    padding:13px;
    border-radius:10px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    text-decoration:none;
    color:var(--white);

    background:linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
    border:1px solid var(--border);

    box-shadow:0 10px 24px var(--shadow-soft);
    transition:.24s;
}

.ligame-mobile-menu-grid a span{
    font-size:28px;
}

.ligame-mobile-menu-grid a strong{
    display:block;
    font-size:13px;
    margin-top:auto;
}

.ligame-mobile-menu-grid a small{
    display:block;
    margin-top:3px;
    color:var(--gray);
    font-size:10px;
    font-weight:800;
}

.ligame-mobile-menu-grid a.active{
    border-color:rgba(61,255,142,.35);
    background:rgba(61,255,142,.10);
}

.ligame-mobile-menu-actions{
    margin-top:12px;
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ligame-mobile-menu-actions a,
.ligame-mobile-menu-actions button{
    width:100%;
    min-height:46px;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--glass-bg);
    color:var(--white);
    display:flex;
    align-items:center;
    padding:0 14px;
    text-decoration:none;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
}

.ligame-mobile-menu-actions form{
    margin:0;
}

.ligame-mobile-menu-actions .logout{
    color:var(--red);
    border-color:rgba(255,95,87,.20);
    background:rgba(255,95,87,.10);
}

@media(min-width:992px){
    .ligame-mobile-menu,
    .ligame-mobile-menu-overlay{
        display:none;
    }
}

/* ===================================
RESPONSIVE FIXED
=================================== */




@media(max-width:480px){
    .ligame-route-card{
        min-height:205px;
        padding:14px 11px;
    }

    .route-icon{
        font-size:40px;
    }

    .ligame-welcome h1{
        font-size:28px;
    }
    
}



/* Desktop sidebar */
.ligame-sidebar{
    display:none;
}

@media(min-width:992px){

    body{
        background:var(--desktop-bg);
    }

    .ligame-page{
        width:100%;
        max-width:1200px;
        margin:0 auto;
        right: 0px;
        padding-bottom:40px;
        background:transparent;
        position:relative;
        border:none;
    }

    .ligame-sidebar{
        display:none;
        flex-direction:column;

        position:fixed;
        top:0;
        bottom:0;
        left:0;

        width:250px;
        padding:22px 16px;
        border-radius:0;

        background:var(--sidebar-bg);
        border:1px solid var(--border);

        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);

        box-shadow:
            0 18px 48px var(--shadow),
            inset 0 1px 0 rgba(255,255,255,.04);

        z-index:1000;
        height: 100%;
    }

    .ligame-sidebar-logo{
        font-family:'Bebas Neue', cursive;
        font-size:34px;
        letter-spacing:3px;
        margin-bottom:28px;
        padding:0 8px;
    }

    .ligame-sidebar-logo span{
        color:var(--green);
    }

    .ligame-sidebar-menu{
        display:flex;
        flex-direction:column;
        gap:8px;
    }

    .ligame-sidebar-menu a{
        display:flex;
        align-items:center;
        gap:12px;

        min-height:48px;
        padding:0 0;
        border-radius:0;

        color:var(--gray);
        text-decoration:none;
        font-size:14px;
        font-weight:800;

        transition:.22s;
    }

    .ligame-sidebar-menu a span{
        font-size:20px;
        width:24px;
        text-align:center;
    }

    .ligame-sidebar-menu a:hover{
        color:var(--white);
        background:var(--glass-bg);
    }

    .ligame-sidebar-menu a.active{
        color:var(--green);
        background:rgba(61,255,142,.12);
        border:1px solid rgba(61,255,142,.18);
    }

    .ligame-sidebar-footer{
        margin-top:auto;
        padding:10px;
        border-radius:0;
        background:rgba(61,255,142,.08);
        border:1px solid rgba(61,255,142,.14);
    }

    .ligame-sidebar-footer strong{
        display:block;
        color:var(--green);
        font-size:13px;
        margin-bottom:4px;
    }

    .ligame-sidebar-footer small{
        color:var(--gray);
        font-size:11px;
    }

    .ligame-topbar{
        right:0;
        top:0;
        width:100%;
        
        transform:none;
        border-radius:0;
        border:1px solid var(--border);
        justify-content: center;
    }

    .ligame-topbar-wrapper{
        width:100%;
        max-width: 1200px;
        transform:none;
        border-radius:0;
        display: flex;
        justify-content: space-between;
    }

    

    .ligame-content{
        padding:110px 0 34px;
    }

    .ligame-welcome{
        min-height:140px;
    }

    .ligame-welcome h1{
        font-size:44px;
    }

    .ligame-routes-grid{
        gap:18px;
    }

    .ligame-route-card{
        min-height:280px;
        padding:24px;
    }

    .route-icon{
        font-size:64px;
        margin:26px 0;
    }

    .ligame-route-card h3{
        font-size:20px;
    }

    .ligame-route-card p{
        font-size:14px;
    }

    .ligame-bottom-nav{
        display:none;
    }
}

/* ===================================
AUTH / LOGIN / REGISTER / VERIFY
=================================== */

.ligame-auth-screen{
    min-height:100vh;
    padding:28px 18px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:var(--auth-gradient);
    color:var(--white);
}

.ligame-auth-header{
    text-align:center;
    margin-bottom:26px;
}

.ligame-auth-logo{
    font-family:'Bebas Neue', cursive;
    font-size:50px;
    letter-spacing:4px;
    line-height:1;
}

.ligame-auth-logo span{
    color:var(--green);
}

.ligame-auth-subtitle{
    margin-top:0;
    color:var(--gray);
    font-size:13px;
    font-weight:700;
}

.ligame-auth-card{
    width:100%;
    max-width:430px;
    margin:0 auto;
    padding:22px 18px;
    border-radius:28px;
    background:var(--card-gradient);
    border:1px solid var(--border);
    box-shadow:0 22px 60px var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
}

.ligame-form-group{
    margin-bottom:15px;
}

.ligame-label{
    display:block;
    margin-bottom:7px;
    color:var(--gray);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.ligame-input{
    width:100%;
    height:50px;
    padding:0 14px;
    border-radius:16px;
    background:var(--input-bg);
    border:1px solid var(--border);
    color:var(--white);
    outline:none;
    font-size:14px;
    font-weight:700;
}

.ligame-input::placeholder{
    color:color-mix(in srgb, var(--gray) 65%, transparent);
}

.ligame-input:focus{
    border-color:rgba(61,255,142,.45);
    box-shadow:0 0 0 4px rgba(61,255,142,.09);
}

.ligame-password-wrapper{
    position:relative;
}

.ligame-password-wrapper .ligame-input{
    padding-right:52px;
}

.ligame-password-toggle{
    position:absolute;
    top:50%;
    right:15px;
    transform:translateY(-50%);
    cursor:pointer;
    font-size:18px;
    opacity:.85;
}

.ligame-login-btn{
    width:100%;
    height:50px;
    border:0;
    border-radius:17px;
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    color:#061008;
    font-size:14px;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 12px 26px rgba(61,255,142,.18);
}

.ligame-login-btn:disabled{
    opacity:.65;
    cursor:not-allowed;
}

.ligame-auth-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin:4px 0 18px;
}

.ligame-auth-link,
.ligame-auth-footer a{
    color:var(--green);
    text-decoration:none;
    font-size:12px;
    font-weight:900;
}

.ligame-remember-switch{
    display:flex;
    align-items:center;
    gap:9px;
    cursor:pointer;
    user-select:none;
}

.ligame-remember-switch input{
    display:none;
}

.ligame-switch-box{
    width:42px;
    height:24px;
    border-radius:99px;
    background:var(--glass-bg);
    border:1px solid var(--border);
    position:relative;
    transition:.2s;
}

.ligame-switch-box::before{
    content:"";
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--gray);
    position:absolute;
    top:2px;
    left:2px;
    transition:.2s;
}

.ligame-remember-switch input:checked + .ligame-switch-box{
    background:var(--green);
    border-color:var(--green);
}

.ligame-remember-switch input:checked + .ligame-switch-box::before{
    transform:translateX(18px);
    background:#061008;
}

.ligame-switch-text{
    color:var(--gray);
    font-size:12px;
    font-weight:800;
}

.ligame-auth-divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:20px 0 14px;
}

.ligame-auth-divider span{
    flex:1;
    height:1px;
    background:var(--border);
}

.ligame-auth-divider p{
    margin:0;
    color:var(--gray);
    font-size:10px;
    font-weight:900;
    letter-spacing:1.5px;
}

.ligame-social-buttons{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.ligame-social-btn{
    height:47px;
    border-radius:16px;
    border:1px solid var(--border);
    background:var(--glass-bg);
    color:var(--white);
    text-decoration:none;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-size:13px;
    font-weight:900;
}

.ligame-auth-footer{
    margin-top:18px;
    text-align:center;
    color:var(--gray);
    font-size:13px;
}

.ligame-language-row{
    margin-top:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.ligame-language-row a{
    color:var(--gray);
    text-decoration:none;
    font-size:11px;
    font-weight:950;
    letter-spacing:1.5px;
}

.ligame-language-row a:first-child{
    color:var(--green);
}

.ligame-language-row span{
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--border);
}

.ligame-auth-errors{
    margin-bottom:14px;
    color:var(--red);
}

.ligame-auth-status{
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.24);
    color:var(--green);
    padding:11px 13px;
    border-radius:15px;
    margin-bottom:14px;
    font-size:13px;
    font-weight:800;
}

.ligame-forgot-text{
    color:var(--gray);
    font-size:13px;
    line-height:1.7;
    margin-bottom:18px;
    text-align:center;
}

.ligame-terms{
    margin:4px 0 16px;
}

.ligame-terms label{
    display:flex;
    align-items:flex-start;
    gap:9px;
    cursor:pointer;
}

.ligame-terms input{
    margin-top:3px;
    accent-color:var(--green);
}

.ligame-terms span{
    color:var(--gray);
    font-size:12px;
    line-height:1.5;
}

.ligame-verify-icon{
    width:64px;
    height:64px;
    margin:0 auto 14px;
    border-radius:50%;
    background:rgba(61,255,142,.12);
    border:1px solid rgba(61,255,142,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.ligame-verify-title{
    font-family:'Bebas Neue', cursive;
    font-size:29px;
    letter-spacing:1.5px;
    text-align:center;
    margin-bottom:10px;
}

.ligame-logout-form{
    margin-top:12px;
}

.ligame-logout-btn{
    width:100%;
    height:46px;
    border-radius:16px;
    border:1px solid var(--border);
    background:transparent;
    color:var(--gray);
    font-weight:900;
    cursor:pointer;
}
 





/* ===============================
   LIGAME | SPOR ROTASI
================================ */






.ligame-sport-header {
    position: sticky;
    top: 90px;
    z-index: 50;

    display: grid;
    grid-template-columns: 42px 1fr 82px;
    align-items: center;
    gap: 10px;

    padding: 12px 14px;

    background:
        linear-gradient(135deg, rgba(46,204,113,.14), transparent 35%),
        linear-gradient(180deg, var(--card), var(--card2));
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 30px rgba(0,0,0,.18);

    backdrop-filter: blur(14px);
}

.ligame-sport-header::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: -1px;
    height: 2px;
    border-radius: 99px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--green),
        var(--gold),
        transparent
    );
    opacity: .75;
}

.ligame-sport-title {
    text-align: center;
    line-height: 1.1;
}

.ligame-sport-title span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 6px 12px;
    border-radius: 999px;

    background: rgba(46,204,113,.10);
    border: 1px solid rgba(46,204,113,.25);

    font-family: 'Bebas Neue', cursive;
    font-size: 18px;
    letter-spacing: 1.8px;
    color: var(--text);
}

.ligame-sport-title span::before {
    content: "⚽";
    font-family: initial;
    font-size: 13px;
}

.ligame-sport-title small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 700;
    color: var(--gray);
    letter-spacing: .4px;
}

.ligame-lock-time {
    text-align: right;
    padding: 7px 9px;
    border-radius: 5px;
    background: rgba(231,76,60,.10);
    border: 1px solid rgba(231,76,60,.25);
}

.ligame-lock-time small {
    display: block;
    margin-bottom: 2px;
    font-size: 9px;
    font-weight: 800;
    color: var(--gray);
    text-transform: uppercase;
    letter-spacing: .8px;
}

.ligame-lock-time strong {
    display: block;
    font-family: 'Bebas Neue', cursive;
    font-size: 19px;
    line-height: 1;
    letter-spacing: 1px;
    color: var(--red);
}

.player {
    position: absolute;
    z-index: 5;
    width: 62px;
    text-align: center;
    cursor: pointer;
    transform: translateX(-50%);

    transition:
        left .35s ease,
        bottom .35s ease,
        transform .35s ease;
}


/* Tablet - mobil app görünümü korunsun */
@media(min-width:768px) and (max-width:991px){
    .ligame-page{
        margin:0 auto;
        border-left:1px solid var(--border);
        border-right:1px solid var(--border);
    }

    .ligame-topbar{
        left:0;
        right:0;
        width:100%;
    }

    .ligame-topbar-wrapper{
        display: flex;
        justify-content: space-between;
        width:100%;
    }

    .ligame-sport-header{
        top: 75px;
    }

    .ligame-bottom-nav{
        left:50%;
        right:auto;
        width:456px;
        transform:translateX(-50%);
    }

    .ligame-bottom-nav.scrolled{
        left: 50%;
        right: auto;
        width: 456px;
        transform: translateX(-50%);
    }

}


.ligame-lock-time {
    transition: .3s ease;
}

.ligame-lock-time.time-safe {
    background: rgba(46,204,113,.10);
    border-color: rgba(46,204,113,.25);
}

.ligame-lock-time.time-safe strong {
    color: #2ecc71;
}

.ligame-lock-time.time-warning {
    background: rgba(243,156,18,.10);
    border-color: rgba(243,156,18,.25);
}

.ligame-lock-time.time-warning strong {
    color: #f39c12;
}

.ligame-lock-time.time-danger {
    background: rgba(231,76,60,.10);
    border-color: rgba(231,76,60,.25);
}

.ligame-lock-time.time-danger strong {
    color: #e74c3c;
    animation: pulseTimer 1s infinite;
}

.ligame-lock-time.locked {
    background: rgba(231,76,60,.15);
    border-color: rgba(231,76,60,.35);
}

.ligame-lock-time.locked strong {
    color: #e74c3c;
}

@keyframes pulseTimer {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .55;
    }

    100% {
        opacity: 1;
    }
}

/* Mobilde daha kompakt */
@media (max-width: 520px) {
    .ligame-topbar{left: 0;}

    .ligame-topbar-wrapper{
        display: flex;
        justify-content: space-between;
        width:100%;
    }

    .ligame-sport-header {
        grid-template-columns: 38px 1fr 76px;
        padding: 10px 12px;
        top: 73px;
    }

    .ligame-sport-title span {
        font-size: 16px;
        padding: 6px 9px;
    }

    .ligame-sport-title small {
        font-size: 9px;
    }

    .ligame-lock-time strong {
        font-size: 17px;
    }
}



.ligame-section-title small {
    color: var(--green);
    font-size: 10px;
    margin-left: 4px;
}

.ligame-sub-player .sub-status {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 4;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--card-2);
    border: 1px solid var(--border);
    color: var(--gray);
    font-size: 13px;
    font-weight: 900;
}

.ligame-sub-player.active .sub-status {
    content: "✓";
    background: var(--green);
    color: #07100a;
    border-color: var(--green);
}

.ligame-sub-player.active .sub-status {
    font-size: 0;
}

.ligame-sub-player.active .sub-status::before {
    content: "✓";
    font-size: 12px;
}

.ligame-sub-player em {
    min-width: 38px;
}

.ligame-remove-sub-btn {
    width: 100%;
    margin-top: 10px;
    padding: 13px;
    border-radius: 14px;
    border: 1px solid rgba(255,95,87,.28);
    background: rgba(255,95,87,.10);
    color: var(--red);
    font-size: 13px;
    font-weight: 900;
    cursor: pointer;
}


.ligame-multiplier-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: var(--card2);
    border: 1px solid var(--border);
    border-radius: 0;
}

.ligame-multiplier-card span {
    font-size: 12px;
    color: var(--gray);
}

.ligame-multiplier-card strong {
    font-family: 'Bebas Neue', cursive;
    font-size: 20px;
    color: var(--green);
}

.ligame-section-title {
    margin: 18px 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--gray);
    text-transform: uppercase;
}

.ligame-formation-list,
.ligame-sub-list {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.ligame-formation-list::-webkit-scrollbar,
.ligame-sub-list::-webkit-scrollbar {
    display: none;
}

.ligame-formation-list button,
.ligame-sub-list button {
    flex: 0 0 auto;
    padding: 9px 15px;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--card);
    color: var(--gray);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.ligame-formation-list button.active,
.ligame-formation-list button:active,
.ligame-sub-list button.active,
.ligame-sub-list button:active {
    background: var(--green2);
    border-color: var(--green2);
    color: var(--white);
}

/* SAHA */

.ligame-field {
    position: relative;
    height: 560px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 24px;
    border: 2px solid rgba(255,255,255,.22);
    background:
        repeating-linear-gradient(
            to bottom,
            #176b2b 0,
            #176b2b 56px,
            #1e7d34 56px,
            #1e7d34 112px
        );
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.16),
        inset 0 0 45px rgba(0,0,0,.25),
        0 18px 40px rgba(0,0,0,.22);
}

/* Dış saha çizgisi */
.ligame-field::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: 1;
    border: 2px solid rgba(255,255,255,.55);
    border-radius: 18px;
    pointer-events: none;
}

/* Orta çizgi */
.ligame-field::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 50%;
    z-index: 1;
    height: 2px;
    background: rgba(255,255,255,.52);
    transform: translateY(-50%);
    pointer-events: none;
}

/* Orta yuvarlak */
.ligame-field-line-center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 112px;
    height: 112px;
    border: 2px solid rgba(255,255,255,.52);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.ligame-field-line-center::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    background: rgba(255,255,255,.65);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* Üst ceza sahası */
.ligame-penalty-top {
    position: absolute;
    left: 50%;
    top: 14px;
    z-index: 1;
    width: 180px;
    height: 86px;
    border: 2px solid rgba(255,255,255,.52);
    border-top: none;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Üst kale alanı */
.ligame-goal-top {
    position: absolute;
    left: 50%;
    top: 14px;
    z-index: 1;
    width: 92px;
    height: 38px;
    border: 2px solid rgba(255,255,255,.52);
    border-top: none;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Üst ceza yayı */
.ligame-arc-top {
    position: absolute;
    left: 50%;
    top: 82px;
    z-index: 1;
    width: 72px;
    height: 36px;
    border: 2px solid rgba(255,255,255,.52);
    border-top: none;
    border-radius: 0 0 72px 72px;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Alt ceza sahası */
.ligame-penalty-bottom {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 1;
    width: 180px;
    height: 86px;
    border: 2px solid rgba(255,255,255,.52);
    border-bottom: none;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Alt kale alanı */
.ligame-goal-bottom {
    position: absolute;
    left: 50%;
    bottom: 14px;
    z-index: 1;
    width: 92px;
    height: 38px;
    border: 2px solid rgba(255,255,255,.52);
    border-bottom: none;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Alt ceza yayı */
.ligame-arc-bottom {
    position: absolute;
    left: 50%;
    bottom: 82px;
    z-index: 1;
    width: 72px;
    height: 36px;
    border: 2px solid rgba(255,255,255,.52);
    border-bottom: none;
    border-radius: 72px 72px 0 0;
    transform: translateX(-50%);
    pointer-events: none;
}

/* Kale çizgileri */
.ligame-net-top,
.ligame-net-bottom {
    position: absolute;
    left: 50%;
    z-index: 1;
    width: 72px;
    height: 8px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.42);
    transform: translateX(-50%);
    pointer-events: none;
}

.ligame-net-top {
    top: 3px;
    border-radius: 0 0 8px 8px;
}

.ligame-net-bottom {
    bottom: 3px;
    border-radius: 8px 8px 0 0;
}

/* Oyuncular çizgilerin üstünde kalsın */
.player,
.ligame-mvp-box {
    z-index: 5;
}




.ligame-formation-panel {
    display: grid;
    grid-template-columns: repeat(5, minmax(92px, 1fr));
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}

.ligame-formation-panel::-webkit-scrollbar {
    display: none;
}

.ligame-formation-card {
    position: relative;
    min-height: 72px;
    padding: 11px 10px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background: linear-gradient(180deg, var(--card), var(--card2));
    color: var(--text);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: .2s ease;
}

.ligame-formation-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(46,204,113,.22), transparent 52%);
    opacity: 0;
    transition: .2s ease;
}

.ligame-formation-card strong,
.ligame-formation-card span {
    position: relative;
    z-index: 2;
    display: block;
}

.ligame-formation-card strong {
    font-family: 'Bebas Neue', cursive;
    font-size: 23px;
    letter-spacing: 1px;
    color: var(--text);
}

.ligame-formation-card span {
    margin-top: 3px;
    font-size: 10px;
    font-weight: 800;
    color: var(--gray);
}

.ligame-formation-card.active {
    border-color: var(--green);
    background:
        linear-gradient(180deg, rgba(46,204,113,.18), var(--card2));
    box-shadow: 0 10px 22px rgba(46,204,113,.12);
}

.ligame-formation-card.active::before {
    opacity: 1;
}

.ligame-formation-card.active::after {
    content: "✓";
    position: absolute;
    right: 9px;
    top: 9px;
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #07100a;
    font-size: 12px;
    font-weight: 900;
    z-index: 10;
}

@media (max-width: 520px) {
    .ligame-formation-panel {
        grid-template-columns: repeat(5, 96px);
    }
}





.ligame-mvp-box {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 5;
    padding: 6px 10px;
    background: var(--card);
    border: 1px solid rgba(243,156,18,.45);
    border-radius: 10px;
}

.ligame-mvp-box small {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--gold);
}

.ligame-mvp-box strong {
    display: block;
    font-family: 'Bebas Neue', cursive;
    font-size: 13px;
    color: var(--white);
}

.player {
    position: absolute;
    z-index: 4;
    width: 62px;
    text-align: center;
    cursor: pointer;
    transform: translateX(-50%);
}

.player .shirt {
    position: relative;
    width: 46px;
    height: 46px;
    margin: 0 auto 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #1a3a1e, #0d2010);
    border: 2px solid rgba(255,255,255,.28);
    font-size: 17px;
}

.player.mvp .shirt {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(243,156,18,.18);
}

.player .shirt span {
    position: absolute;
    right: -7px;
    bottom: -5px;
    min-width: 28px;
    padding: 2px 5px;
    background: var(--card);
    border: 1px solid rgba(255,255,255,.25);
    border-radius: 6px;
    font-family: 'Bebas Neue', cursive;
    font-size: 12px;
    color: var(--white);
}

.player.mvp .shirt span {
    background: var(--gold);
    color: #101510;
}

.player strong {
    display: block;
    max-width: 62px;
    padding: 3px 5px;
    overflow: hidden;
    background: var(--card);
    border-radius: 5px;
    color: var(--white);
    font-size: 8px;
    font-weight: 900;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.player small {
    display: block;
    margin-top: 2px;
    font-size: 8px;
    color: rgba(255,255,255,.55);
}

/* Oyuncu Pozisyonları */
.player.gk { left: 50%; bottom: 18px; }

.player.def.left { left: 12%; bottom: 112px; }
.player.def.mid-left { left: 36%; bottom: 112px; }
.player.def.mid-right { left: 64%; bottom: 112px; }
.player.def.right { left: 88%; bottom: 112px; }

.player.mid.left-mid { left: 38%; bottom: 214px; }
.player.mid.right-mid { left: 62%; bottom: 214px; }

.player.atk.left { left: 14%; bottom: 316px; }
.player.atk.center { left: 50%; bottom: 316px; }
.player.atk.right { left: 86%; bottom: 316px; }

.player.fw { left: 50%; bottom: 420px; }

.ligame-primary-btn {
    width: 100%;
    margin-top: 18px;
    padding: 15px;
    border: none;
    border-radius: 5px;
    background: var(--green);
    color: var(--card);
    font-size: 14px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
}





.ligame-sub-players {
    display: grid;
    grid-template-columns: repeat(4, minmax(76px, 1fr));
    gap: 8px;
    margin-bottom: 4px;
}

.ligame-sub-player {
    position: relative;
    min-height: 104px;
    padding: 12px 8px 10px;
    border-radius: 5px;
    border: 1.5px solid var(--border);
    background:
        linear-gradient(180deg, var(--card), var(--card2));
    color: var(--text);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    transition: .2s ease;
}

.ligame-sub-player::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top, rgba(46,204,113,.18), transparent 55%);
    opacity: 0;
    transition: .2s ease;
}

.ligame-sub-player .sub-icon {
    position: relative;
    z-index: 2;
    width: 38px;
    height: 38px;
    margin: 0 auto 7px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #101510;
    border: 1px solid rgba(255,255,255,.18);
    font-size: 17px;
}

.ligame-sub-player strong {
    position: relative;
    z-index: 2;
    display: block;
    margin-bottom: 2px;
    font-family: 'Bebas Neue', cursive;
    font-size: 15px;
    letter-spacing: .7px;
    color: var(--text);
}

.ligame-sub-player small {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 9px;
    font-weight: 800;
    color: var(--gray);
}

.ligame-sub-player em {
    position: relative;
    z-index: 2;
    display: inline-block;
    margin-top: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: rgba(46,204,113,.10);
    border: 1px solid rgba(46,204,113,.22);
    color: var(--green);
    font-size: 9px;
    font-style: normal;
    font-weight: 900;
}

.ligame-sub-player.active {
    border-color: var(--green);
    background:
        linear-gradient(180deg, rgba(46,204,113,.16), var(--card2));
    box-shadow: 0 10px 22px rgba(46,204,113,.12);
}

.ligame-sub-player.active::before {
    opacity: 1;
}

.ligame-sub-player.active::after {
    content: "✓";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green);
    color: #07100a;
    font-size: 12px;
    font-weight: 900;
}

@media (max-width: 420px) {
    .ligame-sub-players {
        grid-template-columns: repeat(4, 78px);
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }

    .ligame-sub-players::-webkit-scrollbar {
        display: none;
    }
}




.ligame-player-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    background: rgba(0,0,0,.72);
    opacity: 0;
    pointer-events: none;
    transition: .25s ease;
}

.ligame-player-modal.open {
    opacity: 1;
    pointer-events: auto;
}

.ligame-player-sheet {
    position: relative;
    width: 50%;
    padding: 60px 18px 28px;
    border-radius: 10px;
    background: var(--card);
    border-top: 1px solid var(--border);
    transform: translateY(100%);
    transition: .28s ease;
}

.ligame-player-modal.open .ligame-player-sheet {
    transform: translate(50%, -50%);
}

.ligame-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;

    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: rgba(231, 76, 60, .12);
    border: 1px solid rgba(231, 76, 60, .25);

    color: var(--red);

    font-size: 28px;
    font-weight: 700;
    line-height: 1;

    cursor: pointer;

    transition: .2s ease;
}

.ligame-modal-close:hover {
    background: rgba(231, 76, 60, .20);
    transform: scale(1.08);
}

.ligame-modal-close:active {
    transform: scale(.96);
}

.ligame-player-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.ligame-player-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, #1a3a1e, #0d2010);
    border: 2px solid rgba(255,255,255,.25);
    font-size: 24px;
}

.ligame-player-head h3 {
    margin: 0;
    font-family: 'Bebas Neue', cursive;
    font-size: 26px;
    letter-spacing: 1px;
    color: var(--text);
}

.ligame-player-head span {
    font-size: 12px;
    color: var(--gray);
}

.ligame-mvp-btn {
    margin-left: auto;
    padding: 8px 12px;
    border-radius: 10px;
    border: 1px solid rgba(243,156,18,.35);
    background: rgba(243,156,18,.10);
    color: var(--gold);
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

.ligame-mvp-btn.active {
    background: var(--gold);
    color: #111;
}

.ligame-range-card {
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: var(--card2);
    border: 1px solid var(--border);
}

.ligame-range-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.ligame-range-top span {
    font-size: 12px;
    font-weight: 800;
    color: var(--gray);
}

.ligame-range-top strong {
    font-family: 'Bebas Neue', cursive;
    font-size: 34px;
    color: var(--green);
}

.ligame-range-card input {
    width: 100%;
    accent-color: var(--green);
}

.ligame-quick-ratings {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.ligame-quick-ratings button {
    padding: 10px 0;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--card2);
    color: var(--text);
    font-weight: 900;
    cursor: pointer;
}

.ligame-quick-ratings button.active,
.ligame-quick-ratings button:active {
    background: var(--green);
    border-color: var(--green);
    color: var(--card);
}

.player.swap-selected{
    transform:translateX(-50%) scale(1.08)!important;
    z-index:20;
}

.player.swap-selected .shirt{
    border-color:var(--gold);
    box-shadow:0 0 0 4px rgba(255,185,56,.24);
}

.ligame-sub-player.swap-selected{
    border-color:var(--gold);
    box-shadow:0 10px 22px rgba(255,185,56,.18);
}

.sport-match-center{
    margin-bottom:14px;
    padding:18px;
    border:1px solid rgba(61,255,142,.18);
    border-radius:10px;
    background:
        radial-gradient(circle at top right, rgba(61,255,142,.13), transparent 42%),
        var(--card-gradient);
    box-shadow:0 14px 34px var(--shadow-soft);
}

.sport-match-center-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin-bottom:16px;
}

.sport-match-league{
    color:var(--green);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.sport-match-center h1{
    margin:6px 0;
    font-family:'Bebas Neue',cursive;
    font-size:30px;
    line-height:1;
    letter-spacing:1px;
}

.sport-match-center h1 em{
    color:var(--gray);
    font-style:normal;
}

.sport-match-center p{
    color:var(--gray);
    font-size:11px;
}

.sport-prediction-status{
    flex:0 0 auto;
    padding:7px 10px;
    border-radius:999px;
    font-size:9px;
    font-weight:950;
}

.sport-prediction-status.open{
    color:var(--green);
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.22);
}

.sport-prediction-status.locked{
    color:var(--gold);
    background:rgba(255,185,56,.10);
    border:1px solid rgba(255,185,56,.22);
}

.sport-prediction-status.closed,
.sport-prediction-status.completed{
    color:var(--red);
    background:rgba(255,95,87,.10);
    border:1px solid rgba(255,95,87,.22);
}

.sport-readiness-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
}

.sport-readiness-card{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px;
    border-radius:8px;
    background:var(--card-2);
    border:1px solid var(--border);
}

.sport-readiness-card > span{
    font-size:18px;
}

.sport-readiness-card small,
.sport-readiness-card strong{
    display:block;
}

.sport-readiness-card small{
    color:var(--gray);
    font-size:8px;
    text-transform:uppercase;
}

.sport-readiness-card strong{
    margin-top:3px;
    font-size:11px;
}



.sport-trivia-main span{
    color:var(--gold);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.sport-trivia-main > strong{
    display:block;
    margin:5px 0;
    font-family:'Bebas Neue',cursive;
    font-size:36px;
    color:var(--gold);
}

.sport-trivia-main p{
    color:var(--gray);
    font-size:11px;
    line-height:1.5;
}

.sport-trivia-score{
    position:absolute;
    top:18px;
    right:18px;
    width:64px;
    height:64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    border:3px solid var(--gold);
    background:var(--card);
}

.sport-trivia-score strong{
    color:var(--gold);
    font-size:16px;
}

.sport-trivia-score span{
    color:var(--gray);
    font-size:7px;
}

.sport-trivia-details,
.sport-last-result-values{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:14px;
}

.sport-trivia-details span,
.sport-last-result-values span{
    padding:8px;
    border-radius:7px;
    background:var(--card-2);
    color:var(--gray);
    text-align:center;
    font-size:10px;
}

.sport-trivia-details b,
.sport-last-result-values strong{
    display:block;
    margin-top:3px;
    color:var(--white);
    font-size:12px;
}

.sport-trivia-period{
    display:block;
    margin-top:10px;
    color:var(--gray);
    font-size:9px;
}

.sport-trivia-action{
    display:inline-flex;
    margin-top:12px;
    color:var(--green);
    text-decoration:none;
    font-size:11px;
    font-weight:950;
}

.sport-trivia-frozen{
    margin-top:12px;
    color:var(--gray);
    font-size:10px;
    font-weight:800;
}

.sport-trivia-activation{
    margin-bottom:16px;
    padding:15px;
    border-radius:0;
    border:1px dashed rgba(61,255,142,.26);
    background:rgba(61,255,142,.06);
}

.sport-trivia-activation > div{
    display:flex;
    gap:10px;
}

.sport-trivia-activation strong{
    display:block;
    font-size:12px;
}

.sport-trivia-activation p,
.sport-trivia-activation small{
    display:block;
    margin-top:5px;
    color:var(--gray);
    font-size:10px;
    line-height:1.5;
}

.sport-last-result{
    margin-bottom:16px;
    padding:15px;
    border-radius:0;
    background:var(--card-gradient);
    border:1px solid var(--border);
}

.sport-last-result-head{
    display:flex;
    justify-content:space-between;
    gap:12px;
}

.sport-last-result-head span{
    color:var(--gray);
    font-size:9px;
    text-transform:uppercase;
}

.sport-last-result-head strong{
    display:block;
    margin-top:4px;
    font-size:12px;
}

.sport-last-result-head > b{
    color:var(--green);
    font-family:'Bebas Neue',cursive;
    font-size:25px;
}

.ligame-primary-btn.ready{
    box-shadow:0 0 0 4px rgba(61,255,142,.12);
}

.ligame-primary-btn.prediction-saved{
    background:var(--gold);
    color:#171007;
}

.ligame-primary-btn.prediction-closed{
    background:var(--card-2);
    color:var(--gray);
    cursor:not-allowed;
}

.sport-submit-note{
    margin-top:8px;
    color:var(--gray);
    text-align:center;
    font-size:9px;
}

@media(max-width:600px){
    .sport-readiness-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .sport-match-center-top{
        flex-direction:column;
    }

    .sport-trivia-card{
        padding:13px;
    }

    .sport-trivia-head{
        align-items:center;
        gap:10px;
    }

    .sport-trivia-main > strong{
        font-size:31px;
    }

    .sport-trivia-main p{
        max-width:210px;
        font-size:9px;
    }

    .sport-trivia-score{
        width:56px;
        height:56px;
        flex-basis:56px;
    }

    .sport-trivia-score strong{
        font-size:17px;
    }

    .sport-trivia-details{
        margin-top:10px;
    }

    
}




/* ===============================
   LIGAME | KELİME OYUNU
================================ */

.ligame-word-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:22px;
    margin-bottom:16px;
    border-radius:0;
    background:
        radial-gradient(circle at top right, rgba(255,185,56,.18), transparent 40%),
        var(--welcome-gradient);
    border:1px solid rgba(61,255,142,.16);
    box-shadow:0 16px 38px var(--shadow);
}

.ligame-word-hero span{
    color:var(--green);
    font-size:10px;
    font-weight:950;
    letter-spacing:1.8px;
}

.ligame-word-hero h1{
    margin:5px 0;
    font-family:'Bebas Neue', cursive;
    font-size:38px;
    letter-spacing:1.4px;
    line-height:1;
}

.ligame-word-hero p{
    max-width:520px;
    color:var(--gray);
    font-size:12px;
    line-height:1.6;
}

.ligame-word-icon{
    width:72px;
    height:72px;
    flex:0 0 72px;
    border-radius:24px;
    display:grid;
    place-items:center;
    background:rgba(255,185,56,.12);
    border:1px solid rgba(255,185,56,.25);
    font-size:34px;
}

.ligame-word-levels{
    display:grid;
    gap:10px;
    margin-bottom:16px;
}

.word-level{
    width:100%;
    min-height:74px;
    padding:15px;
    border-radius:0;
    background:var(--card-gradient);
    border:1.5px solid var(--border);
    color:var(--white);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    text-align:left;
    cursor:pointer;
    transition:.24s;
}

.word-level:hover{
    transform:translateY(-3px);
}

.word-level strong{
    font-size:14px;
    font-weight:950;
}

.word-level span{
    color:var(--gray);
    font-size:11px;
    font-weight:800;
}

.word-level.easy{
    border-color:rgba(61,255,142,.24);
}

.word-level.medium{
    border-color:rgba(255,185,56,.26);
}

.word-level.hard{
    border-color:rgba(255,95,87,.24);
}

.word-info-card{
    margin-bottom:18px;
}

.word-info-card strong{
    font-size:13px;
}

.word-info-card p{
    margin-top:7px;
    color:var(--gray);
    font-size:12px;
    line-height:1.7;
}

.word-game-top{
    display:grid;
    grid-template-columns:42px 1fr 48px;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.word-game-top button{
    width:42px;
    height:42px;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--glass-bg);
    color:var(--white);
    cursor:pointer;
}

.word-game-top strong{
    text-align:center;
    font-family:'Bebas Neue', cursive;
    font-size:24px;
    letter-spacing:1.8px;
}

.word-game-top span{
    text-align:right;
    font-family:'Bebas Neue', cursive;
    font-size:22px;
    color:var(--gray);
}

.word-progress{
    height:6px;
    margin-bottom:16px;
    overflow:hidden;
    border-radius:999px;
    background:var(--card-2);
}

.word-progress div{
    height:100%;
    width:100%;
    border-radius:999px;
    background:var(--green);
}

.word-question-card{
    text-align:center;
    margin-bottom:14px;
}

.word-question-card span{
    display:inline-flex;
    margin-bottom:12px;
    padding:6px 11px;
    border-radius:999px;
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.20);
    color:var(--green);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.5px;
}

.word-question-card h2{
    margin:0 0 6px;
    font-family:'Bebas Neue', cursive;
    font-size:58px;
    letter-spacing:5px;
    line-height:1;
}

.word-question-card p{
    color:var(--gray);
    font-size:12px;
}

.word-options{
    display:grid;
    gap:9px;
}

.word-option{
    width:100%;
    min-height:54px;
    padding:0 16px;

    border-radius:10px;
    border:1.5px solid var(--border);

    background:var(--card-gradient);
    color:var(--white);

    text-align:left;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:14px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform .22s ease,
        border-color .22s ease,
        background .22s ease,
        color .22s ease;

    -webkit-appearance:none;
    appearance:none;

    outline:none;
    box-shadow:none;

    -webkit-tap-highlight-color:transparent;
}

/* Hover yalnızca gerçek mouse kullanan cihazlarda çalışır */
@media (hover:hover) and (pointer:fine){
    .word-option:hover:not(:disabled){
        transform:translateX(3px);
        border-color:rgba(61,255,142,.28);
    }
}

/* Mobil Safari ve PWA focus border temizliği */
.word-option:focus,
.word-option:focus-visible{
    outline:none;
    box-shadow:none;
}

/* Normal şık focus aldığında varsayılan border korunur */
.word-option:not(.correct):not(.wrong):focus{
    border-color:var(--border);
}

/* Dokunma anında kısa fiziksel geri bildirim */
.word-option:active:not(:disabled){
    transform:scale(.985);
}

.word-option.correct,
.word-option.correct:focus,
.word-option.correct:focus-visible{
    background:rgba(61,255,142,.12);
    border-color:rgba(61,255,142,.48);
    color:var(--green);
}

.word-option.wrong,
.word-option.wrong:focus,
.word-option.wrong:focus-visible{
    background:rgba(255,95,87,.12);
    border-color:rgba(255,95,87,.48);
    color:var(--red);
}

.word-option:disabled{
    cursor:not-allowed;
}

.word-feedback{
    margin-top:12px;
    padding:13px;
    border-radius:16px;
    text-align:center;
    font-size:13px;
    font-weight:950;
}

.word-feedback.success{
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.22);
    color:var(--green);
}

.word-feedback.danger{
    background:rgba(255,95,87,.10);
    border:1px solid rgba(255,95,87,.22);
    color:var(--red);
}

.word-result-card{
    text-align:center;
    margin-bottom:14px;
}

.word-result-card .result-emoji{
    font-size:50px;
    margin-bottom:8px;
}

.word-result-card span{
    color:var(--gray);
    font-size:10px;
    font-weight:950;
    letter-spacing:1.8px;
}

.word-result-card h2{
    margin:6px 0 0;
    font-family:'Bebas Neue', cursive;
    font-size:76px;
    color:var(--green);
    line-height:1;
}

.word-result-card p{
    color:var(--gray);
    font-size:12px;
}

.word-result-area .btn-ligame{
    margin-top:10px;
}


.word-streak-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:12px;
}

.word-streak-card strong{
    font-size:13px;
}

.word-streak-card p{
    margin-top:4px;
    color:var(--gray);
    font-size:11px;
}

.word-streak-card span{
    font-family:'Bebas Neue', cursive;
    font-size:28px;
    color:var(--green);
}

.word-learn-card{
    margin-top:12px;
    text-align:left;
}

.word-learn-card span{
    display:block;
    margin-bottom:7px;
    color:var(--gold);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.5px;
}

.word-learn-card strong{
    display:block;
    font-size:15px;
    color:var(--white);
}

.word-learn-card p{
    margin-top:7px;
    color:var(--gray);
    font-size:12px;
    line-height:1.6;
}




.word-live-timer{
    width:72px;
    height:72px;
    margin:0 auto 14px;
    border-radius:50%;
    display:grid;
    place-items:center;

    background:rgba(61,255,142,.11);
    border:1px solid rgba(61,255,142,.28);
    color:var(--green);

    font-family:'Bebas Neue', cursive;
    font-size:42px;
    line-height:1;

    box-shadow:0 12px 28px var(--shadow-soft);
    transition:.25s;
}

.word-live-timer.warning{
    color:var(--gold);
    border-color:rgba(255,185,56,.35);
    background:rgba(255,185,56,.10);
}

.word-live-timer.danger{
    color:var(--red);
    border-color:rgba(255,95,87,.35);
    background:rgba(255,95,87,.10);
    animation:timerPulse .55s infinite;
}

.word-pop{
    animation:wordPop .42s ease;
}

.answer-success{
    animation:greenFlash .45s ease;
}

.answer-danger{
    animation:redShake .42s ease;
}

.word-success-rate{
    margin-top:10px;
    color:var(--gray);
    font-size:12px;
    font-weight:900;
}

.word-level-badge{
    display:inline-flex;
    margin-top:10px;
    padding:8px 14px;
    border-radius:999px;
    font-size:11px;
    font-weight:950;
    letter-spacing:.8px;
    border:1px solid var(--border);
    color:var(--gray);
    background:var(--glass-bg);
    height: 40px;
}

.word-level-badge.master{
    color:var(--gold);
    border-color:rgba(255,185,56,.36);
    background:rgba(255,185,56,.10);
}

.word-level-badge.strong{
    color:var(--green);
    border-color:rgba(61,255,142,.34);
    background:rgba(61,255,142,.10);
}

.word-level-badge.progress{
    color:var(--white);
    border-color:rgba(255,255,255,.16);
    background:rgba(255,255,255,.06);
}

.word-level-badge.starter{
    color:var(--red);
    border-color:rgba(255,95,87,.28);
    background:rgba(255,95,87,.08);
}


.streak-card{
    position:relative;
    overflow:hidden;
}

.streak-card strong{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
}

.streak-card.legendary{
    border:1px solid rgba(61,255,142,.35);
    background:
        radial-gradient(circle at top,
        rgba(255,185,56,.25),
        transparent 60%),
        var(--card-gradient);
}

.ligame-stat-card #wordStreak{
    position:absolute;

    width:20px;
    height:20px;

    display:flex;
    align-items:end;
    justify-content:center;

    border-radius:50%;

    font-size:11px;
    font-weight:800;

    color:#fff;

    background:linear-gradient(
        135deg,
        #da734e  0%,
        #ff7a18 100%
    );

    border:2px solid rgba(255,255,255,.12);

    box-shadow:
        0 0 0 3px rgba(255,185,56,.08),
        0 6px 14px rgba(255,122,24,.25);

    z-index:2;
}

.streak-card.legendary #wordStreak{
    background:linear-gradient(
        135deg,
        #3dff8e 0%,
        #00c853 100%
    );

    box-shadow:
        0 0 0 3px rgba(61,255,142,.08),
        0 0 14px rgba(61,255,142,.25),
        0 8px 20px rgba(61,255,142,.18);
}

.streak-card.legendary::before{
    content:'';
    position:absolute;
    inset:-40%;
    background:radial-gradient(
        rgba(61,255,142,.12),
        transparent 70%
    );
    animation:fireGlow 3s linear infinite;
}

.streak-card.active{
    border-color:rgba(255,185,56,.35);
}

.streak-card.active strong{
    color:#ffb938;
}

.streak-card.weak{
    opacity:.85;
}

.streak-card.weak strong{
    color:#d89040;
}

.streak-card.dead{
    opacity:.55;
}

.streak-card.dead strong{
    color:#7f8898;
}

@keyframes fireGlow{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

@keyframes wordPop{
    0%{
        transform:scale(.94) translateY(8px);
        opacity:.35;
    }
    100%{
        transform:scale(1) translateY(0);
        opacity:1;
    }
}

@keyframes greenFlash{
    0%{
        box-shadow:none;
    }
    45%{
        box-shadow:0 0 0 6px rgba(61,255,142,.10), 0 0 34px rgba(61,255,142,.22);
    }
    100%{
        box-shadow:none;
    }
}

@keyframes redShake{
    0%,100%{
        transform:translateX(0);
    }
    20%{
        transform:translateX(-7px);
    }
    40%{
        transform:translateX(7px);
    }
    60%{
        transform:translateX(-5px);
    }
    80%{
        transform:translateX(5px);
    }
}

@keyframes timerPulse{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.08);
    }
}




@media(min-width:992px){
    .ligame-word-levels{
        grid-template-columns:repeat(3,1fr);
    }

    .word-level{
        min-height:110px;
        align-items:flex-start;
        flex-direction:column;
    }

    .word-question-card h2{
        font-size:76px;
    }
}

@media(max-width:480px){
    .ligame-word-hero{
        padding:18px;
    }

    .ligame-word-hero h1{
        font-size:32px;
    }

    .ligame-word-icon{
        width:58px;
        height:58px;
        flex-basis:58px;
        font-size:28px;
    }

    .word-question-card h2{
        font-size:48px;
    }
}






.ligame-profile-page-head{
    margin-bottom:22px;
}

.ligame-profile-page-head span{
    display:inline-flex;
    margin-bottom:7px;

    color:var(--green);
    font-size:11px;
    font-weight:950;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.ligame-profile-page-head h1{
    margin:0 0 6px;
    font-family:'Bebas Neue', cursive;
    font-size:34px;
    letter-spacing:1.4px;
    line-height:1;
}

.ligame-profile-page-head p{
    max-width:520px;
    margin:0;
    color:var(--gray);
    font-size:13px;
    line-height:1.6;
}

.ligame-profile-setting-card{
    margin-bottom:18px;
    padding:18px;

    border-radius:24px;

    background:
        radial-gradient(circle at top left, rgba(61,255,142,.10), transparent 35%),
        var(--card-gradient);

    border:1px solid var(--border);

    box-shadow:
        0 16px 38px var(--shadow-soft),
        inset 0 1px 0 rgba(255,255,255,.035);
}

.ligame-profile-setting-head{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:18px;
    padding-bottom:16px;

    border-bottom:1px solid var(--border);
}

.ligame-profile-setting-head > div{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:16px;

    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.18);
}

.ligame-profile-setting-head > div span{
    font-size:21px;
}

.ligame-profile-setting-head h2{
    margin:0 0 5px;

    font-size:15px;
    font-weight:950;
    color:var(--white);
}

.ligame-profile-setting-head p{
    margin:0;

    color:var(--gray);
    font-size:12px;
    line-height:1.55;
}

/* Jetstream/Livewire içeriklerini LigaMe koyu temaya yaklaştırır */
.ligame-profile-setting-card input{
    background:var(--input-bg) !important;
    border:1px solid var(--border) !important;
    color:var(--white) !important;
    border-radius:14px !important;
}

.ligame-profile-setting-card label{
    color:var(--gray) !important;
    font-size:11px !important;
    font-weight:900 !important;
}

.ligame-profile-setting-card button{
    border-radius:14px !important;
}

.ligame-profile-setting-card .bg-gray-100,
.ligame-profile-setting-card .bg-white{
    background:transparent !important;
}

.ligame-profile-setting-card .text-gray-600,
.ligame-profile-setting-card .text-gray-500,
.ligame-profile-setting-card .text-gray-400{
    color:var(--gray) !important;
}

.ligame-profile-setting-card .text-gray-900{
    color:var(--white) !important;
}



.ligame-form-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;

    padding:18px 0 0;
    margin-top:18px;

    background:transparent !important;
    border-top:1px solid var(--border);
}


/* ===============================
   LIGAME | KÜLTÜR ROTASI
   Dark / Light uyumlu temiz sürüm
================================ */

.ligame-culture-hero{
    position:relative;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding:20px;
    margin-bottom:14px;
    border-radius:0;
    overflow:hidden;
    background:
        radial-gradient(circle at top right, rgba(255,95,87,.22), transparent 42%),
        linear-gradient(145deg, rgba(48,17,19,.98), rgba(18,9,10,.98));
    border:1px solid rgba(255,95,87,.18);
    box-shadow:0 16px 38px var(--shadow);
}

[data-theme="light"] .ligame-culture-hero{
    background:
        radial-gradient(circle at top right, rgba(214,69,61,.16), transparent 42%),
        linear-gradient(145deg,#ffffff,#fff0ef);
}

.ligame-culture-hero > div{
    min-width:0;
    flex:1;
}

.ligame-culture-hero span,
.culture-question-card span,
.culture-result-card span,
.culture-sponsor-card span{
    display:block;
    color:var(--red);
    font-size:10px;
    font-weight:950;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:6px;
}

.ligame-culture-hero h1{
    font-family:'Bebas Neue', cursive;
    font-size:36px;
    line-height:1;
    letter-spacing:1.2px;
    margin:0 0 8px;
    color:var(--white);
}

.ligame-culture-hero p{
    color:var(--gray);
    font-size:12px;
    line-height:1.6;
    margin:0;
}

.culture-theme-info-btn{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:50%;
    border:1px solid rgba(255,95,87,.24);
    background:rgba(255,95,87,.10);
    color:var(--red);
    font-size:22px;
    font-weight:950;
    cursor:pointer;
    box-shadow:0 10px 22px var(--shadow-soft);
    transition:.22s;
}

.culture-theme-info-btn:hover{
    transform:translateY(-2px);
    background:rgba(255,95,87,.15);
}

/* ===============================
   HAFTALIK HAK
================================ */

.culture-week-right{
    position:relative;
    display:inline-flex!important;
    align-items:flex-start;
    justify-content:center;
    gap:4px;
    color:var(--green)!important;
}

.culture-week-right em{
    font-style:normal;
    color:var(--gray);
}

.culture-week-right del{
    color:var(--gray);
    text-decoration-thickness:2px;
    opacity:.75;
}

.culture-week-right small{
    position:absolute;
    top:-11px;
    right:-20px;
    min-width:26px;
    height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    background:rgba(255,95,87,.14);
    border:1px solid rgba(255,95,87,.30);
    color:var(--red);
    font-size:10px;
    font-weight:950;
    line-height:1;
}

/* ===============================
   HAFTALIK İLERLEME
================================ */

.culture-progress-card{
    margin-top:14px;
    margin-bottom:14px;
}

.culture-progress-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:12px;
}

.culture-progress-head strong{
    color:var(--white);
    font-size:15px;
    font-weight:950;
}

.culture-progress-head span{
    color:var(--red);
    font-size:13px;
    font-weight:900;
}

.culture-progress-bar{
    width:100%;
    height:10px;
    border-radius:30px;
    overflow:hidden;
    background:var(--card-2);
    border:1px solid var(--border);
}

#cultureProgressFill{
    width:0%;
    height:100%;
    border-radius:30px;
    background:linear-gradient(90deg,var(--red),var(--gold));
    transition:.4s ease;
}

.culture-progress-card small{
    display:block;
    margin-top:10px;
    color:var(--gray);
    line-height:1.6;
    font-size:12px;
}

/* ===============================
   TRIVIA ÇARPANI
================================ */

.culture-multiplier-card{
    margin:18px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:18px;
    border:1px solid rgba(255,95,87,.18);
    background:
        radial-gradient(circle at top right, rgba(255,95,87,.10), transparent 44%),
        var(--card-gradient);
}

[data-theme="light"] .culture-multiplier-card{
    background:
        radial-gradient(circle at top right, rgba(214,69,61,.10), transparent 44%),
        linear-gradient(135deg,#ffffff,#fff6f5);
}

.culture-multiplier-left{
    flex:1;
    min-width:0;
}

.culture-multiplier-left span{
    display:block;
    color:var(--red);
    font-size:11px;
    font-weight:950;
    letter-spacing:1px;
    text-transform:uppercase;
}

.culture-multiplier-left strong{
    display:block;
    margin-top:6px;
    font-family:'Bebas Neue',cursive;
    font-size:34px;
    line-height:1;
    letter-spacing:1px;
    color:var(--red);
}

.culture-multiplier-left p{
    margin-top:7px;
    color:var(--gray);
    font-size:13px;
    line-height:1.6;
}

.culture-multiplier-right{
    flex:0 0 auto;
}

.culture-multiplier-circle{
    width:95px;
    height:95px;
    border-radius:50%;
    border:5px solid var(--red);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:var(--card);
    box-shadow:0 12px 28px var(--shadow-soft);
}

.culture-multiplier-circle strong{
    font-size:22px;
    color:var(--red);
}

.culture-multiplier-circle span{
    color:var(--gray);
    font-size:10px;
    font-weight:900;
}




.culture-trivia-period {
    display: block;
    margin-top: 7px;
    color: var(--gray);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
}

.culture-trivia-details {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 12px;
}

.culture-trivia-details span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    border-radius: 8px;
    background: var(--card-2);
    border: 1px solid var(--border);
    color: var(--gray);
    font-size: 9px;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
}

.culture-trivia-details b {
    color: var(--white);
    font-size: 10px;
}


.sport-trivia-card{
    position:relative;
    margin-bottom:16px;
    padding:16px;

    border-radius:0;
    border:1px solid rgba(255,185,56,.22);

    background:
        radial-gradient(
            circle at top right,
            rgba(255,185,56,.14),
            transparent 42%
        ),
        var(--card-gradient);
}

.sport-trivia-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}

.sport-trivia-main{
    flex:1;
    min-width:0;
}

.sport-trivia-main span{
    display:block;

    color:var(--gold);

    font-size:9px;
    font-weight:950;

    letter-spacing:1.3px;
    text-transform:uppercase;
}

.sport-trivia-main > strong{
    display:block;

    margin:4px 0;

    font-family:'Bebas Neue', cursive;
    font-size:36px;
    line-height:1;

    color:var(--gold);
}

.sport-trivia-main p{
    margin:0;

    color:var(--gray);

    font-size:10px;
    line-height:1.45;
}

.sport-trivia-score{
    position:static;

    width:62px;
    height:62px;

    flex:0 0 62px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    border:3px solid var(--gold);
    background:var(--card);

    box-shadow:
        0 8px 18px var(--shadow-soft),
        inset 0 1px 0 rgba(255,255,255,.06);
}

.sport-trivia-score strong{
    color:var(--gold);

    font-family:'Bebas Neue', cursive;
    font-size:19px;
    line-height:1;
}

.sport-trivia-score span{
    margin-top:3px;

    color:var(--gray);

    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.sport-trivia-details{
    display:grid;
    grid-template-columns:repeat(3, 1fr);

    gap:6px;
    margin-top:12px;
}

.sport-trivia-details span{
    padding:7px 5px;

    border-radius:7px;

    background:var(--card-2);
    border:1px solid var(--border);

    color:var(--gray);

    text-align:center;

    font-size:8px;
    font-weight:800;
}

.sport-trivia-details b{
    display:block;

    margin-top:3px;

    color:var(--white);

    font-size:12px;
}

.sport-trivia-period{
    display:block;

    margin-top:9px;

    color:var(--gray);

    font-size:8px;
    font-weight:700;
    line-height:1.4;
}

.sport-trivia-target{
    width:100%;

    display:flex;
    align-items:center;
    gap:9px;

    margin-top:10px;
    padding:9px 10px;


    color:var(--white);
    text-decoration:none;

    transition:.2s ease;
}



.sport-trivia-target-icon{
    width:30px;
    height:30px;

    flex:0 0 30px;

    display:grid;
    place-items:center;

    border-radius:8px;

    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.18);

    font-size:15px;
}

.sport-trivia-target-text{
    flex:1;
    min-width:0;
}

.sport-trivia-target-text span,
.sport-trivia-target-text strong{
    display:block;
}

.sport-trivia-target-text span{
    color:var(--green);

    font-size:10px;
    font-weight:950;

    letter-spacing:.8px;
    text-transform:uppercase;
}

.sport-trivia-target-text strong{
    margin-top:2px;

    color:var(--white);

    font-size:10px;
    font-weight:850;

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.sport-trivia-target-link{
    flex:0 0 auto;

    display:flex;
    align-items:center;
    gap:4px;

    color:var(--green);

    font-size:9px;
    font-weight:950;
}

.sport-trivia-target-link b{
    font-size:14px;
    transition:.2s ease;
}

.sport-trivia-target:hover .sport-trivia-target-link b{
    transform:translateX(3px);
}

@media(max-width:600px){

    .sport-trivia-target{
        margin-top:8px;
        padding:8px 0 2px;
    }

    .sport-trivia-target-icon{
        width:28px;
        height:28px;
        flex-basis:28px;
    }

    .sport-trivia-target-text strong{
        font-size:10px;
    }

    .sport-trivia-target-link{
        font-size:10px;
    }
}

/* ===============================
   OYUN ALANI
================================ */

.culture-game-area{
    animation:cultureFadeUp .25s ease;
}

.culture-game-top{
    display:grid;
    grid-template-columns:42px 1fr 48px;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}

.culture-game-top strong{
    text-align:center;
    font-family:'Bebas Neue', cursive;
    font-size:20px;
    letter-spacing:1.5px;
    color:var(--red);
}

.culture-game-top span{
    text-align:right;
    color:var(--gray);
    font-size:12px;
    font-weight:900;
}

.culture-live-timer{
    width:64px;
    height:64px;
    margin:0 auto 13px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.22);
    color:var(--green);
    font-family:'Bebas Neue', cursive;
    font-size:35px;
    box-shadow:0 12px 28px var(--shadow-soft);
}

.culture-live-timer.warning{
    color:var(--gold);
    background:rgba(255,185,56,.12);
    border-color:rgba(255,185,56,.24);
}

.culture-live-timer.danger{
    color:var(--red);
    background:rgba(255,95,87,.12);
    border-color:rgba(255,95,87,.24);
    animation:pulseTimer 1s infinite;
}

.culture-progress{
    height:7px;
    border-radius:99px;
    overflow:hidden;
    background:var(--card-2);
    margin-bottom:14px;
    border:1px solid var(--border);
}

.culture-progress div{
    height:100%;
    width:100%;
    border-radius:99px;
    background:linear-gradient(90deg,var(--red),var(--gold));
}

.culture-question-card{
    margin-bottom:12px;
    text-align:left;
}

.culture-question-card h2{
    margin:0;
    color:var(--white);
    font-size:18px;
    line-height:1.55;
}

.culture-question-card.shake{
    animation:cultureShake .36s ease;
}

.culture-options{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.culture-option{
    width:100%;
    min-height:52px;
    padding:13px 15px;

    border-radius:10px;
    border:1.5px solid var(--border);

    background:var(--card-gradient);
    color:var(--white);

    text-align:left;
    font-family:'Plus Jakarta Sans', sans-serif;
    font-size:13px;
    font-weight:900;

    cursor:pointer;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease,
        color .2s ease;

    -webkit-appearance:none;
    appearance:none;

    outline:none;
    box-shadow:none;

    -webkit-tap-highlight-color:transparent;
}

/* Sadece mouse destekleyen cihazlarda hover çalışır */
@media (hover: hover) and (pointer: fine){
    .culture-option:hover:not(:disabled){
        transform:translateY(-2px);
        border-color:rgba(255,95,87,.28);
    }
}

/* Mobil tarayıcıların focus border üretmesini engeller */
.culture-option:focus{
    outline:none;
    box-shadow:none;
}

.culture-option:focus:not(:focus-visible){
    border-color:var(--border);
}

/* Dokunma sırasında kısa basma efekti */
.culture-option:active:not(:disabled){
    transform:scale(.985);
}

.culture-option.correct,
.culture-option.correct:focus{
    border-color:rgba(61,255,142,.55);
    background:rgba(61,255,142,.12);
    color:var(--green);
}

.culture-option.wrong,
.culture-option.wrong:focus{
    border-color:rgba(255,95,87,.55);
    background:rgba(255,95,87,.12);
    color:var(--red);
}

.culture-option:disabled{
    cursor:not-allowed;
}

.culture-feedback{
    margin:12px 0;
    padding:13px;
    border-radius:10px;
    text-align:center;
    font-size:13px;
    font-weight:950;
}

.culture-feedback.success{
    color:var(--green);
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.22);
}

.culture-feedback.danger{
    color:var(--red);
    background:rgba(255,95,87,.10);
    border:1px solid rgba(255,95,87,.22);
}



.culture-exit-overlay{
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,.65);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s;
}

.culture-exit-overlay.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.culture-exit-modal{
    width:100%;
    max-width:360px;
    padding:24px;
    border-radius:10px;
    background:var(--card);
    border:1px solid var(--border);
    text-align:center;
    box-shadow:0 24px 60px var(--shadow);
}

.culture-exit-icon{
    font-size:36px;
    margin-bottom:10px;
}

.culture-exit-modal h3{
    margin:0 0 8px;
    color:var(--white);
}

.culture-exit-modal p{
    margin:0;
    color:var(--gray);
    font-size:13px;
    line-height:1.6;
}

.culture-exit-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
}

.culture-exit-actions button{
    flex:1;
    border:none;
    border-radius:8px;
    padding:12px;
    font-weight:900;
    cursor:pointer;
    background:var(--card-2);
    color:var(--white);
}

.culture-exit-actions .danger{
    background:var(--red);
    color:#fff;
}

/* ===============================
   SONUÇ
================================ */

.culture-result-area{
    animation:cultureFadeUp .25s ease;
}

.culture-result-card{
    text-align:center;
    margin-bottom:14px;
}

.culture-result-card .result-emoji{
    font-size:46px;
    margin-bottom:8px;
}

.culture-result-card h2{
    font-family:'Bebas Neue', cursive;
    font-size:64px;
    line-height:1;
    color:var(--red);
    margin:0;
}

.culture-result-card p{
    color:var(--gray);
    margin:0 0 12px;
}

.culture-success-rate,
.culture-rank-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:950;
    margin:4px;
}

.culture-success-rate{
    color:var(--green);
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.22);
}

.culture-rank-badge{
    color:var(--gold);
    background:rgba(255,185,56,.10);
    border:1px solid rgba(255,185,56,.22);
}

.culture-sponsor-card{
    margin:12px 0;
    padding:14px;
    border-radius:10px;
    background:rgba(255,185,56,.07);
    border:1px dashed rgba(255,185,56,.28);
    text-align:center;
}

.culture-sponsor-card strong{
    display:block;
    color:var(--gray);
    font-size:12px;
    line-height:1.5;
}

.culture-result-area .btn-ligame + .btn-ligame{
    margin-top:9px;
}

/* ===============================
   MODALLAR
================================ */

.culture-rules-overlay,
.culture-theme-info-overlay{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background:rgba(0,0,0,.70);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.25s;
}

.culture-rules-overlay.active,
.culture-theme-info-overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.culture-rules-modal,
.culture-theme-info-modal{
    position:relative;
    width:100%;
    max-width:640px;
    max-height:84vh;
    overflow-y:auto;
    padding:24px;
    border-radius:24px 24px 0 0;
    background:var(--card);
    border:1px solid var(--border);
    box-shadow:0 -20px 55px rgba(0,0,0,.35);
    transform:translateY(100%);
    transition:.3s;
}

.culture-rules-overlay.active .culture-rules-modal,
.culture-theme-info-overlay.active .culture-theme-info-modal{
    transform:translateY(0);
}

.culture-rules-close{
    position:absolute;
    right:18px;
    top:18px;
    width:34px;
    height:34px;
    border:none;
    border-radius:50%;
    background:var(--card-2);
    color:var(--white);
    cursor:pointer;
}

.culture-rules-modal span,
.culture-theme-info-modal span{
    color:var(--red);
    font-size:10px;
    font-weight:950;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.culture-rules-modal h2,
.culture-theme-info-modal h2{
    margin:6px 0 18px;
    font-family:'Bebas Neue',cursive;
    font-size:30px;
    color:var(--white);
}

.culture-theme-info-text{
    color:var(--gray);
    font-size:14px;
    line-height:1.8;
}

.culture-theme-info-text p,
.culture-theme-info-text ul,
.culture-theme-info-text ol{
    margin-bottom:10px;
    text-align: justify;
}

.culture-theme-info-text img,
.culture-theme-info-text table{
    max-width:100%;
}

.culture-rules-table{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:18px;
}

.culture-rule-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 14px;
    border-radius:10px;
    background:var(--card-2);
    border:1px solid var(--border);
}

.culture-rule-row strong{
    color:var(--white);
    font-size:13px;
}

.culture-rule-row b{
    color:var(--green);
}

.culture-rule-row.danger b{
    color:var(--red);
}

.culture-rules-info{
    padding:14px;
    border-radius:10px;
    background:rgba(255,95,87,.08);
    border:1px solid rgba(255,95,87,.18);
}

.culture-rules-info strong{
    display:block;
    margin-bottom:6px;
    color:var(--white);
}

.culture-rules-info p{
    margin:0;
    color:var(--gray);
    font-size:12px;
    line-height:1.6;
}


.culture-wall-entry {
    width: 100%;
    min-height: 66px;
    margin-top: 10px;
    padding: 12px 14px;

    display: flex;
    align-items: center;
    gap: 12px;

    border-radius: 10px;
    border: 1px solid rgba(255, 95, 87, .22);

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 95, 87, .12),
            transparent 42%
        ),
        var(--card-gradient);

    color: var(--white);
    text-decoration: none;

    transition: .22s ease;
}

.culture-wall-entry:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 95, 87, .40);
}

.culture-wall-entry > span {
    width: 42px;
    height: 42px;

    flex: 0 0 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background: rgba(255, 95, 87, .10);
    border: 1px solid rgba(255, 95, 87, .20);

    font-size: 21px;
}

.culture-wall-entry > div {
    flex: 1;
    min-width: 0;
}

.culture-wall-entry strong,
.culture-wall-entry small {
    display: block;
}

.culture-wall-entry strong {
    color: var(--white);
    font-size: 13px;
    font-weight: 950;
}

.culture-wall-entry small {
    margin-top: 4px;

    color: var(--gray);
    font-size: 10px;
    line-height: 1.45;
}

.culture-wall-entry > b {
    color: var(--red);
    font-size: 21px;
}



/* ===============================
   LIGAME | KÜLTÜR DUVARI
================================ */

.culture-wall-page {
    --culture-wall-red: var(--red);
    --culture-wall-gold: var(--gold);
}

.culture-wall-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 14px;
    padding: 22px;

    overflow: hidden;

    border: 1px solid rgba(255, 95, 87, .20);
    border-radius: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 95, 87, .24),
            transparent 42%
        ),
        var(--culture-gradient);

    box-shadow: 0 16px 38px var(--shadow);
}

.culture-wall-hero-content {
    min-width: 0;
}

.culture-wall-hero-content > span {
    display: block;

    color: var(--red);

    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.8px;
}

.culture-wall-hero h1 {
    margin: 5px 0;

    font-family: 'Bebas Neue', cursive;
    font-size: 40px;
    line-height: 1;
    letter-spacing: 1.3px;

    color: var(--white);
}

.culture-wall-hero p {
    margin: 0;

    color: var(--gray);

    font-size: 11px;
    font-weight: 800;
}

.culture-wall-hero-icon {
    width: 72px;
    height: 72px;

    flex: 0 0 72px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 95, 87, .25);
    border-radius: 10px;

    background: rgba(255, 95, 87, .12);

    font-size: 34px;
}

.culture-wall-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;

    margin-bottom: 14px;
}

.culture-wall-stat {
    padding: 14px 8px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--card-gradient);

    text-align: center;

    box-shadow: 0 10px 24px var(--shadow-soft);
}

.culture-wall-stat strong {
    display: block;

    color: var(--red);

    font-family: 'Bebas Neue', cursive;
    font-size: 31px;
    line-height: 1;
}

.culture-wall-stat span {
    display: block;

    margin-top: 6px;

    color: var(--gray);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.culture-wall-my-rank {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;

    margin-bottom: 18px;
    padding: 15px;

    border: 1px solid rgba(255, 185, 56, .25);
    border-radius: 10px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 185, 56, .13),
            transparent 40%
        ),
        var(--card-gradient);

    box-shadow: 0 12px 28px var(--shadow-soft);
}

.culture-wall-my-rank.no-entry {
    border-color: var(--border);
}

.culture-wall-my-rank-number {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    background: rgba(255, 185, 56, .13);
    border: 1px solid rgba(255, 185, 56, .20);

    color: var(--gold);

    font-family: 'Bebas Neue', cursive;
    font-size: 27px;
}

.culture-wall-my-rank-content {
    min-width: 0;
}

.culture-wall-my-rank-content span,
.culture-wall-my-rank-content strong,
.culture-wall-my-rank-content small {
    display: block;
}

.culture-wall-my-rank-content span {
    color: var(--gold);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.2px;
}

.culture-wall-my-rank-content strong {
    margin-top: 4px;

    color: var(--white);

    font-size: 14px;
}

.culture-wall-my-rank-content small {
    margin-top: 4px;

    color: var(--gray);

    font-size: 9px;
    line-height: 1.5;
}

.culture-wall-my-rank-point {
    text-align: right;
}

.culture-wall-my-rank-point strong,
.culture-wall-my-rank-point span {
    display: block;
}

.culture-wall-my-rank-point strong {
    color: var(--gold);

    font-family: 'Bebas Neue', cursive;
    font-size: 29px;
    line-height: 1;
}

.culture-wall-my-rank-point span {
    margin-top: 4px;

    color: var(--gray);

    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
}

.culture-wall-mini-btn {
    min-height: 38px;
    padding: 0 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 8px;

    background: var(--red);

    color: #fff;
    text-decoration: none;

    font-size: 11px;
    font-weight: 950;
}

.culture-wall-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;

    margin: 22px 0 11px;
}

.culture-wall-section-head > div > span {
    display: block;

    margin-bottom: 4px;

    color: var(--red);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.4px;
}

.culture-wall-section-head h2 {
    margin: 0;

    font-family: 'Bebas Neue', cursive;
    font-size: 24px;
    letter-spacing: 1.1px;
}

.culture-wall-section-head > a {
    color: var(--red);

    font-size: 10px;
    font-weight: 950;
    text-decoration: none;
}

.culture-wall-section-head > span {
    color: var(--gray);

    font-size: 9px;
    font-weight: 900;
}

.culture-wall-podium {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    align-items: end;
    gap: 8px;

    margin-bottom: 18px;
    padding-top: 20px;
}

.culture-wall-podium-card {
    position: relative;

    min-width: 0;
    min-height: 160px;
    padding: 14px 9px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--card-gradient);

    text-align: center;

    box-shadow: 0 10px 24px var(--shadow-soft);
}

.culture-wall-podium-card.first {
    min-height: 195px;

    border-color: rgba(255, 185, 56, .45);

    background:
        radial-gradient(
            circle at top,
            rgba(255, 185, 56, .25),
            transparent 50%
        ),
        var(--card-gradient);

    box-shadow:
        0 0 0 1px rgba(255, 185, 56, .08),
        0 14px 30px rgba(255, 185, 56, .12);
}

.culture-wall-podium-card.second {
    border-color: rgba(210, 218, 228, .22);
}

.culture-wall-podium-card.third {
    border-color: rgba(190, 118, 72, .26);
}

.culture-wall-podium-card.is-empty {
    opacity: .45;
}

.culture-wall-crown {
    position: absolute;
    top: -23px;

    font-size: 31px;
}

.culture-wall-medal {
    margin-bottom: 8px;

    font-size: 28px;
}

.culture-wall-avatar {
    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    margin-bottom: 9px;

    border-radius: 50%;

    background: var(--card-2);
    border: 1px solid var(--border);

    color: var(--white);

    font-family: 'Bebas Neue', cursive;
    font-size: 23px;
}

.culture-wall-podium-card.first .culture-wall-avatar {
    width: 58px;
    height: 58px;

    border-color: rgba(255, 185, 56, .34);

    color: var(--gold);

    font-size: 27px;
}

.culture-wall-podium-card strong {
    display: block;

    width: 100%;

    overflow: hidden;

    color: var(--white);

    font-size: 11px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.culture-wall-podium-card span {
    display: block;

    margin-top: 5px;

    color: var(--green);

    font-family: 'Bebas Neue', cursive;
    font-size: 20px;
}

.culture-wall-podium-card.first span {
    color: var(--gold);
    font-size: 25px;
}

.culture-wall-podium-card small {
    display: block;

    margin-top: 4px;

    color: var(--gray);

    font-size: 8px;
}

.culture-wall-stars {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.culture-wall-star-card {
    min-width: 0;
    min-height: 138px;
    padding: 14px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 95, 87, .09),
            transparent 42%
        ),
        var(--card-gradient);

    box-shadow: 0 10px 22px var(--shadow-soft);
}

.culture-wall-star-icon {
    margin-bottom: 12px;

    font-size: 27px;
}

.culture-wall-star-card > span {
    display: block;

    color: var(--red);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.1px;
}

.culture-wall-star-card strong {
    display: block;

    margin-top: 8px;

    overflow: hidden;

    color: var(--white);

    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.culture-wall-star-card small {
    display: block;

    margin-top: 5px;

    overflow: hidden;

    color: var(--gray);

    font-size: 9px;
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ===============================
   KÜLTÜR DUVARI | ROZET SİSTEMİ
================================ */

.culture-badge-summary {
    margin-bottom: 12px;
    padding: 16px;

    border-radius: 10px;

    border: 1px solid rgba(255, 185, 56, .20);

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 185, 56, .12),
            transparent 44%
        ),
        var(--card-gradient);

    box-shadow:
        0 10px 24px
        var(--shadow-soft);
}

.culture-badge-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 12px;
}

.culture-badge-summary-head span,
.culture-badge-summary-head strong {
    display: block;
}

.culture-badge-summary-head span {
    color: var(--gold);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.2px;
}

.culture-badge-summary-head strong {
    margin-top: 4px;

    color: var(--white);

    font-size: 13px;
}

.culture-badge-summary-head b {
    color: var(--gold);

    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    line-height: 1;
}

.culture-badge-summary-bar {
    width: 100%;
    height: 9px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--card-2);
    border: 1px solid var(--border);
}

.culture-badge-summary-bar > div {
    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--green)
        );

    transition: width .4s ease;
}

.culture-badge-summary > small {
    display: block;

    margin-top: 9px;

    color: var(--gray);

    font-size: 9px;
    line-height: 1.5;
}

.culture-wall-badges {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.culture-wall-badge-card {
    position: relative;

    min-width: 0;
    min-height: 210px;
    padding: 16px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border-radius: 10px;

    background: var(--card-gradient);

    box-shadow:
        0 10px 24px
        var(--shadow-soft);

    transition:
        transform .22s ease,
        border-color .22s ease,
        opacity .22s ease;
}

.culture-wall-badge-card:hover {
    transform: translateY(-3px);
}

.culture-wall-badge-card.unlocked {
    border:
        1px solid
        rgba(255, 185, 56, .34);

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 185, 56, .18),
            transparent 46%
        ),
        var(--card-gradient);
}

.culture-wall-badge-card.locked {
    border: 1px solid var(--border);

    opacity: .72;

    filter: grayscale(.55);
}

.culture-wall-badge-status {
    position: absolute;
    top: 10px;
    right: 10px;

    min-height: 24px;
    padding: 0 8px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-size: 7px;
    font-weight: 950;
    letter-spacing: .4px;
}

.culture-wall-badge-card.unlocked
.culture-wall-badge-status {
    color: var(--green);

    background:
        rgba(61, 255, 142, .10);

    border:
        1px solid
        rgba(61, 255, 142, .22);
}

.culture-wall-badge-card.locked
.culture-wall-badge-status {
    color: var(--gray);

    background: var(--card-2);

    border:
        1px solid var(--border);
}

.culture-wall-badge-card-icon {
    width: 58px;
    height: 58px;

    display: grid;
    place-items: center;

    margin-bottom: 14px;

    border-radius: 10px;

    font-size: 28px;
}

.culture-wall-badge-card.unlocked
.culture-wall-badge-card-icon {
    background:
        rgba(255, 185, 56, .12);

    border:
        1px solid
        rgba(255, 185, 56, .24);

    box-shadow:
        0 8px 20px
        rgba(255, 185, 56, .10);
}

.culture-wall-badge-card.locked
.culture-wall-badge-card-icon {
    background: var(--card-2);

    border:
        1px solid var(--border);
}

.culture-wall-badge-card > strong {
    display: block;

    padding-right: 18px;

    color: var(--white);

    font-size: 13px;
}

.culture-wall-badge-card > p {
    margin: 6px 0 12px;

    color: var(--gray);

    font-size: 9px;
    line-height: 1.6;
}

.culture-wall-badge-meta {
    display: inline-flex;

    width: max-content;
    max-width: 100%;

    margin-bottom: 10px;
    padding: 5px 7px;

    border-radius: 7px;

    color: var(--gold);

    background:
        rgba(255, 185, 56, .08);

    border:
        1px solid
        rgba(255, 185, 56, .16);

    font-size: 8px;
    font-weight: 850;
}

.culture-wall-badge-progress-info {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: auto;
    margin-bottom: 7px;
}

.culture-wall-badge-progress-info span {
    color: var(--gray);

    font-size: 8px;
    font-weight: 900;
}

.culture-wall-badge-progress-info b {
    color: var(--white);

    font-size: 8px;
}

.culture-wall-badge-card.unlocked
.culture-wall-badge-progress-info b {
    color: var(--green);
}

.culture-wall-badge-progress {
    width: 100%;
    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: var(--card-2);

    border: 1px solid var(--border);
}

.culture-wall-badge-progress > div {
    height: 100%;

    border-radius: 999px;

    background: var(--gray);

    transition: width .4s ease;
}

.culture-wall-badge-card.unlocked
.culture-wall-badge-progress > div {
    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--green)
        );
}

.culture-wall-badge-card.locked
.culture-wall-badge-progress > div {
    background:
        linear-gradient(
            90deg,
            var(--gray),
            var(--red)
        );
}

@media (min-width: 992px) {
    .culture-wall-badges {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}

/* ===============================
   KÜLTÜR ROZETLERİ | MOBİL SLIDER
================================ */

@media (max-width: 700px) {
    .culture-wall-badges {
        display: flex;
        grid-template-columns: none;

        gap: 10px;

        width: calc(100% + 16px);
        margin-right: -16px;
        padding-right: 16px;
        padding-bottom: 8px;

        overflow-x: auto;
        overflow-y: hidden;

        scroll-snap-type: x mandatory;
        scroll-padding-left: 0;

        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .culture-wall-badges::-webkit-scrollbar {
        display: none;
    }

    .culture-wall-badge-card {
        width: 220px;
        min-width: 220px;
        min-height: 150px;
        height: 130px;
        flex: 0 0 220px;

        padding: 13px;

        scroll-snap-align: start;
    }

    .culture-wall-badge-card-icon {
        width: 46px;
        height: 46px;

        margin-bottom: 10px;

        font-size: 23px;
    }

    .culture-wall-badge-card > strong {
        padding-right: 10px;

        font-size: 12px;
    }

    .culture-wall-badge-card > p {
        margin: 5px 0 9px;

        display: -webkit-box;
        overflow: hidden;

        font-size: 8px;
        line-height: 1.5;

        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .culture-wall-badge-status {
        top: 8px;
        right: 8px;

        min-height: 21px;
        padding: 0 6px;

        font-size: 6px;
    }

    .culture-wall-badge-meta {
        margin-bottom: 7px;
        padding: 4px 6px;

        font-size: 7px;
    }

    .culture-wall-badge-progress-info {
        margin-bottom: 5px;
    }

    .culture-wall-badge-progress {
        height: 6px;
    }
}

@media (max-width: 380px) {
    .culture-wall-badge-card {
        width: 205px;
        min-width: 205px;

        flex-basis: 205px;
    }
}

.culture-badge-swipe-hint {
    display: none;
}

@media (max-width: 700px) {
    .culture-badge-swipe-hint {
        display: block;

        margin-top: 4px;

        color: var(--gray);

        font-size: 8px;
        font-weight: 700;
    }
}

@media (max-width: 700px) {
    .culture-badge-summary {
        padding: 12px;
        margin-bottom: 10px;
    }

    .culture-badge-summary-head {
        margin-bottom: 9px;
    }

    .culture-badge-summary-head span {
        font-size: 7px;
    }

    .culture-badge-summary-head strong {
        font-size: 11px;
    }

    .culture-badge-summary-head b {
        font-size: 25px;
    }

    .culture-badge-summary-bar {
        height: 7px;
    }

    .culture-badge-summary > small {
        margin-top: 7px;

        font-size: 8px;
    }
}

.culture-wall-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.culture-wall-ranking-row {
    display: grid;
    grid-template-columns: 39px 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;

    min-width: 0;
    padding: 11px 13px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--card-gradient);

    box-shadow: 0 8px 20px var(--shadow-soft);
}

.culture-wall-ranking-row.me {
    border-color: rgba(255, 185, 56, .36);

    background:
        linear-gradient(
            90deg,
            rgba(255, 185, 56, .10),
            transparent
        ),
        var(--card-gradient);
}

.culture-wall-ranking-number {
    color: var(--gray);

    font-family: 'Bebas Neue', cursive;
    font-size: 20px;
}

.culture-wall-ranking-row.top .culture-wall-ranking-number {
    color: var(--gold);
}

.culture-wall-ranking-avatar {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--card-2);

    color: var(--white);

    font-family: 'Bebas Neue', cursive;
    font-size: 18px;
}

.culture-wall-ranking-user {
    min-width: 0;
}

.culture-wall-ranking-user strong,
.culture-wall-ranking-user small {
    display: block;
}

.culture-wall-ranking-user strong {
    overflow: hidden;

    color: var(--white);

    font-size: 12px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.culture-wall-ranking-user small {
    margin-top: 4px;

    overflow: hidden;

    color: var(--gray);

    font-size: 8px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.culture-wall-ranking-point {
    text-align: right;
}

.culture-wall-ranking-point strong,
.culture-wall-ranking-point span {
    display: block;
}

.culture-wall-ranking-point strong {
    color: var(--green);

    font-family: 'Bebas Neue', cursive;
    font-size: 21px;
    line-height: 1;
}

.culture-wall-ranking-row.top .culture-wall-ranking-point strong {
    color: var(--gold);
}

.culture-wall-ranking-point span {
    margin-top: 3px;

    color: var(--gray);

    font-size: 7px;
    font-weight: 900;
    text-transform: uppercase;
}

.culture-wall-ranking-link {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 10px;

    border: 1px solid rgba(255, 95, 87, .22);
    border-radius: 10px;

    background: rgba(255, 95, 87, .07);

    color: var(--red);
    text-decoration: none;

    font-size: 11px;
    font-weight: 950;
}

.culture-wall-ranking-link span {
    font-size: 17px;
}

.culture-wall-empty {
    padding: 30px 18px;

    border: 1px dashed var(--border);
    border-radius: 10px;

    background: var(--card-gradient);

    text-align: center;
}

.culture-wall-empty.small {
    padding: 22px 16px;
}

.culture-wall-empty > div {
    font-size: 34px;
}

.culture-wall-empty strong {
    display: block;

    margin-top: 9px;

    color: var(--white);

    font-size: 13px;
}

.culture-wall-empty p {
    max-width: 500px;

    margin: 6px auto 0;

    color: var(--gray);

    font-size: 10px;
    line-height: 1.6;
}

.culture-wall-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;

    margin-top: 18px;
}

.culture-wall-primary-btn,
.culture-wall-secondary-btn {
    min-height: 48px;
    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    text-align: center;
    text-decoration: none;

    font-size: 11px;
    font-weight: 950;

    transition: .2s ease;
}

.culture-wall-primary-btn {
    border: 1px solid var(--red);

    background: linear-gradient(
        135deg,
        var(--red),
        var(--gold)
    );

    color: #fff;
}

.culture-wall-secondary-btn {
    border: 1px solid var(--border);

    background: var(--card-gradient);

    color: var(--white);
}

.culture-wall-primary-btn:hover,
.culture-wall-secondary-btn:hover {
    transform: translateY(-2px);
}

@media (min-width: 992px) {
    .culture-wall-stars {
        grid-template-columns: repeat(3, 1fr);
    }

    .culture-wall-badges {
        grid-template-columns: repeat(3, 1fr);
    }

    .culture-wall-ranking-row {
        padding: 13px 16px;
    }
}

@media (max-width: 700px) {
    .culture-wall-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .culture-wall-stars {
        grid-template-columns: 1fr;
    }

    .culture-wall-badges {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .culture-wall-hero {
        padding: 18px;
    }

    .culture-wall-hero h1 {
        font-size: 33px;
    }

    .culture-wall-hero-icon {
        width: 58px;
        height: 58px;

        flex-basis: 58px;

        font-size: 27px;
    }

    .culture-wall-my-rank {
        grid-template-columns: 50px minmax(0, 1fr) auto;
        gap: 9px;

        padding: 12px;
    }

    .culture-wall-my-rank-number {
        width: 50px;
        height: 50px;

        font-size: 23px;
    }

    .culture-wall-my-rank-point strong {
        font-size: 24px;
    }

    .culture-wall-podium {
        gap: 5px;
    }

    .culture-wall-podium-card {
        min-height: 148px;
        padding: 12px 5px;
    }

    .culture-wall-podium-card.first {
        min-height: 180px;
    }

    .culture-wall-avatar {
        width: 42px;
        height: 42px;

        font-size: 20px;
    }

    .culture-wall-podium-card.first .culture-wall-avatar {
        width: 50px;
        height: 50px;
    }

    .culture-wall-podium-card strong {
        font-size: 9px;
    }

    .culture-wall-podium-card span {
        font-size: 17px;
    }

    .culture-wall-podium-card.first span {
        font-size: 21px;
    }

    .culture-wall-ranking-row {
        grid-template-columns: 33px 36px minmax(0, 1fr) auto;
        gap: 7px;

        padding: 10px;
    }

    .culture-wall-ranking-avatar {
        width: 34px;
        height: 34px;

        font-size: 16px;
    }

    .culture-wall-ranking-user strong {
        font-size: 11px;
    }

    .culture-wall-ranking-user small {
        font-size: 7px;
    }

    .culture-wall-actions {
        grid-template-columns: 1fr;
    }
}



/* ===============================
   BUTONLAR
================================ */

.culture-actions{
    display:flex;
    gap:10px;
    margin-top:14px;
}

.culture-btn{
    flex:1;
    height:48px;
    border:none;
    border-radius:10px;
    font-size:13px;
    font-weight:900;
    cursor:pointer;
    transition:.2s ease;
}

.culture-btn-primary{
    background:linear-gradient(135deg,var(--red),var(--gold));
    color:#fff;
    box-shadow:0 8px 20px rgba(214,69,61,.22);
}

.culture-btn-primary:hover{
    transform:translateY(-1px);
}

.culture-btn-secondary{
    background:var(--card-gradient);
    border:1px solid var(--border);
    color:var(--white);
}

.culture-btn-secondary:hover{
    border-color:rgba(255,95,87,.32);
}

.culture-btn-completed{
    position:relative;
    overflow:hidden;
    background:linear-gradient(135deg,#22c55e,#16a34a);
    color:#fff;
    box-shadow:0 6px 18px rgba(34,197,94,.25);
}

.culture-btn-completed:hover{
    transform:none;
}

.culture-btn-completed::after{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:80px;
    height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent);
    animation:completedShine 3s infinite;
}

/* ===============================
   BOŞ DURUM
================================ */

.culture-empty-card{
    text-align:center;
    padding:28px 18px;
}

.culture-empty-card span{
    display:block;
    color:var(--red);
    font-size:11px;
    font-weight:950;
    letter-spacing:1.4px;
    margin-bottom:8px;
}

.culture-empty-card h2{
    font-family:'Bebas Neue', cursive;
    font-size:30px;
    margin-bottom:10px;
    color:var(--white);
}

.culture-empty-card p{
    color:var(--gray);
    font-size:13px;
    line-height:1.7;
    margin-bottom:18px;
}

/* ===============================
   ANİMASYONLAR
================================ */

@keyframes completedShine{
    100%{ left:150%; }
}

@keyframes cultureFadeUp{
    from{ opacity:0; transform:translateY(8px); }
    to{ opacity:1; transform:translateY(0); }
}

@keyframes cultureShake{
    0%,100%{ transform:translateX(0); }
    20%{ transform:translateX(-8px); }
    40%{ transform:translateX(8px); }
    60%{ transform:translateX(-6px); }
    80%{ transform:translateX(6px); }
}

/* ===============================
   RESPONSIVE
================================ */

@media(min-width:768px){
    .culture-rules-overlay,
    .culture-theme-info-overlay{
        align-items:center;
    }

    .culture-rules-modal,
    .culture-theme-info-modal{
        border-radius:10px;
        transform:translateY(16px) scale(.98);
    }

    .culture-rules-overlay.active .culture-rules-modal,
    .culture-theme-info-overlay.active .culture-theme-info-modal{
        transform:translateY(0) scale(1);
    }
}

@media(min-width:992px){
    .ligame-culture-hero{
        min-height:150px;
        align-items:center;
    }

    .ligame-culture-hero h1{
        font-size:48px;
    }

    .culture-question-card h2{
        font-size:24px;
    }

    .culture-options{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
}

@media(max-width:768px){
    .culture-multiplier-card{
        flex-direction:column;
        text-align:center;
    }

    .culture-actions{
        flex-direction:column;
    }
}

@media(max-width:500px){
    .ligame-culture-hero{
        padding:18px;
    }

    .ligame-culture-hero h1{
        font-size:32px;
        padding-right:44px;
    }

    .culture-theme-info-btn{
        position:absolute;
        right:18px;
        top:18px;
        width:38px;
        height:38px;
        font-size:20px;
    }

    .culture-week-right small{
        right:-16px;
    }
}



/* ===============================
   LIGAME | SIRALAMA
================================ */

.ranking-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:22px;
    margin-bottom:16px;
    border-radius:0;
    background:
        radial-gradient(circle at top right, rgba(255,185,56,.22), transparent 42%),
        var(--welcome-gradient);
    border:1px solid rgba(255,185,56,.18);
    box-shadow:0 16px 38px var(--shadow);
}

.ranking-hero span{
    color:var(--gold);
    font-size:10px;
    font-weight:950;
    letter-spacing:1.8px;
}

.ranking-hero h1{
    margin:5px 0;
    font-family:'Bebas Neue', cursive;
    font-size:38px;
    letter-spacing:1.3px;
    line-height:1;
}

.ranking-hero p{
    color:var(--gray);
    font-size:12px;
    line-height:1.6;
}

.ranking-hero-icon{
    width:72px;
    height:72px;
    flex:0 0 72px;
    display:grid;
    place-items:center;
    border-radius:24px;
    background:rgba(255,185,56,.12);
    border:1px solid rgba(255,185,56,.25);
    font-size:34px;
}

.ranking-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-bottom:6px;
    margin-bottom:14px;
    scrollbar-width:none;
}

.ranking-tabs::-webkit-scrollbar{
    display:none;
}

.ranking-tabs button{
    flex:0 0 auto;
    border:1px solid var(--border);
    background:var(--card-gradient);
    color:var(--gray);
    border-radius:0;
    padding:15px 15px;
    font-size:11px;
    font-weight:900;
    cursor:pointer;
    transition:.22s;
}

.ranking-tabs button.active{
    color:var(--card);
    background:var(--green);
    border-color:var(--green);
}

.ranking-tabs button.culture.active{
    background:var(--red);
    border-color:var(--red);
    color:#fff;
}

.ranking-my-card{
    display:flex;
    align-items:center;
    gap:12px;
    padding:15px;
    margin-bottom:16px;
    border-radius:0;
    background:rgba(255,185,56,.08);
    border:1px solid rgba(255,185,56,.22);
}

.ranking-my-rank{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:16px;
    background:rgba(255,185,56,.14);
    color:var(--gold);
    font-family:'Bebas Neue', cursive;
    font-size:24px;
}

.ranking-my-card strong{
    display:block;
    font-size:14px;
}

.ranking-my-card span{
    display:block;
    margin-top:3px;
    color:var(--gray);
    font-size:11px;
}

.ranking-my-card em{
    margin-left:auto;
    font-style:normal;
    color:var(--green);
    font-weight:900;
}

.ranking-podium{
    display:grid;
    grid-template-columns:1fr 1.12fr 1fr;
    gap:8px;
    align-items:end;
    margin-bottom:18px;
}

.podium-card{
    min-height:118px;
    padding:14px 8px;
    border-radius:10px;
    text-align:center;
    background:var(--card-gradient);
    border:1px solid var(--border);
    box-shadow:0 10px 24px var(--shadow-soft);
}

.podium-card.first{
    min-height:148px;
    position:relative;
    

    border:1px solid rgba(255,185,56,.55);

    background:
        radial-gradient(circle at top center,
            rgba(255,215,0,.28),
            transparent 55%),
        linear-gradient(
            180deg,
            rgba(255,185,56,.22) 0%,
            rgba(255,185,56,.08) 30%,
            rgb(225 213 142) 100%
        );

    box-shadow:
        0 0 0 1px rgba(255,215,0,.15),
        0 12px 30px rgba(255,185,56,.18),
        0 0 24px rgba(255,215,0,.12);
}

.podium-card.first::before{
    content: "👑";
    position: absolute;
    top: -26px;
    right: -19px;
    font-size: 30px;
    opacity: .75;
    transform: rotate(34deg);
}

.podium-medal{
    font-size:30px;
    margin-bottom:8px;
}

.podium-card strong{
    display:block;
    font-size:12px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.podium-card span{
    display:block;
    margin-top:5px;
    color:var(--green);
    font-family:'Bebas Neue', cursive;
    font-size:20px;
}

.podium-card.first span{
    color:#101b12;
    font-size:28px;
    text-shadow:0 0 12px rgba(255,215,0,.35);
}

.podium-card.first .podium-medal{
    font-size:40px;
    margin-bottom:10px;
}

.ranking-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.ranking-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:13px;
    border-radius:0;
    background:var(--card-gradient);
    border:1px solid var(--border);
    box-shadow:0 8px 20px var(--shadow-soft);
}

.ranking-row span{
    width:38px;
    color:var(--gray);
    font-family:'Bebas Neue', cursive;
    font-size:20px;
}

.ranking-row strong{
    flex:1;
    font-size:13px;
}

.ranking-row em{
    font-style:normal;
    color:var(--green);
    font-family:'Bebas Neue', cursive;
    font-size:22px;
}

.ranking-row.top span,
.ranking-row.top em{
    color:var(--gold);
}

.ranking-row.me{
    border-color:rgba(255,185,56,.35);
    background:rgba(255,185,56,.08);
}

.culture-week-right em{
    display:inline;
}


/* ===============================
   RESPONSIVE
================================ */

@media (min-width: 768px) {
    .ligame-field {
        max-width: 520px;
        height: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    .player.gk { bottom: 24px; }

    .player.def.left,
    .player.def.mid-left,
    .player.def.mid-right,
    .player.def.right {
        bottom: 132px;
    }

    .player.mid.left-mid,
    .player.mid.right-mid {
        bottom: 252px;
    }

    .player.atk.left,
    .player.atk.center,
    .player.atk.right {
        bottom: 372px;
    }

    .player.fw {
        bottom: 500px;
    }
}

@media (max-width: 480px){
    .ligame-player-sheet {
    
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.culture-btn{padding: 15px 0;}

.ligame-player-modal.open .ligame-player-sheet {
    transform: translateY(0);
}
}

.word-toast{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) translateY(12px);
    background:#14221a;
    color:#fff;
    padding:12px 16px;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
    z-index:9999;
    opacity:0;
    visibility:hidden;
    transition:.25s ease;
    box-shadow:0 14px 34px rgba(0,0,0,.18);
}

.word-toast.show{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(0);
}

.word-exit-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    z-index:9999;
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
}

.word-exit-modal.show{
    opacity:1;
    visibility:visible;
}

.word-exit-card{
    width:100%;
    max-width:360px;
    background:var(--ligame-card, #fff);
    border-radius:10px;
    padding:24px;
    text-align:center;
    transform:scale(.94);
    transition:.2s ease;
}

.word-exit-modal.show .word-exit-card{
    transform:scale(1);
}

.word-exit-icon{
    font-size:34px;
    margin-bottom:10px;
}

.word-exit-card h3{
    margin:0 0 8px;
    color: black;
}

.word-exit-card p{
    margin:0;
    color:var(--text-muted, #777);
    font-size:13px;
    line-height:1.6;
}

.word-exit-actions{
    display:flex;
    gap:10px;
    margin-top:18px;
}

.word-exit-actions button{
    flex:1;
    border:none;
    border-radius:5px;
    padding:12px;
    font-weight:900;
    cursor:pointer;
    color: black;
}

.word-exit-actions .danger{
    background:#dc3545;
    color:#fff;
}

.word-summary-learn{
    margin-top:16px;
}

.word-summary-head{
    margin-bottom:14px;
}

.word-summary-head span{
    display:block;
    font-size:11px;
    font-weight:900;
    color:var(--ligame-green);
    letter-spacing:1px;
    margin-bottom:4px;
}

.word-summary-head strong{
    font-size:18px;
    font-weight:900;
}

.word-learn-summary-list{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.learn-summary-item{
    display:flex;
    gap:12px;
    padding:12px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.08);
}

.learn-summary-number{
    width:32px;
    height:32px;
    border-radius:50%;
    background:var(--ligame-green);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    flex-shrink:0;
}

.learn-summary-content{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.learn-summary-content strong{
    font-size:16px;
    font-weight:900;
}

.learn-summary-content span{
    color:var(--ligame-green);
    font-size:14px;
    font-weight:800;
}

.learn-summary-content small{
    color:var(--ligame-muted);
    font-size:12px;
    line-height:1.5;
}

.player .shirt img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

.ligame-sub-player .sub-icon img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
}

/* =========================================================
   LIGAME DASHBOARD + REAL MADRID PLAY STYLE DESKTOP SIDEBAR
   ========================================================= */

:root,
[data-theme="dark"] {
    --home-bg: #080b10;
    --home-surface: #11151c;
    --home-surface-2: #171c24;
    --home-border: rgba(255, 255, 255, .11);
    --home-text: #f5f7fa;
    --home-muted: #9da5b2;
    --home-panel-shadow: 0 18px 40px rgba(0, 0, 0, .24);
    --home-route-hover: rgba(255, 255, 255, .045);
    --sidebar-surface: #ffffff;
    --sidebar-text: #1f2329;
    --sidebar-muted: #6f7782;
    --sidebar-active: #111318;
    --sidebar-border: #e7e9ed;
}

[data-theme="light"] {
    --home-bg: #f4f6f8;
    --home-surface: #ffffff;
    --home-surface-2: #f0f2f5;
    --home-border: rgba(18, 27, 38, .12);
    --home-text: #111827;
    --home-muted: #687180;
    --home-panel-shadow: 0 16px 36px rgba(25, 39, 56, .10);
    --home-route-hover: rgba(17, 24, 39, .035);
    --sidebar-surface: #ffffff;
    --sidebar-text: #1f2329;
    --sidebar-muted: #6f7782;
    --sidebar-active: #111318;
    --sidebar-border: #e7e9ed;
}

/* Desktop sidebar tamamen kapanır; kapalıyken yer ayırmaz. */
.ligame-desktop-sidebar-overlay {
    display: none;
}

@media (min-width: 992px) {
    .ligame-sidebar {
        display: flex;
        position: fixed;
        inset: 0 auto 0 0;
        width: 260px;
        height: 100vh;
        padding: 26px 22px 22px;
        flex-direction: column;
        background: var(--sidebar-surface);
        border: 0;
        border-right: 1px solid var(--sidebar-border);
        box-shadow: 12px 0 35px rgba(18, 25, 33, .08);
        transform: translateX(-100%);
        transition: transform .28s ease;
        z-index: 2100;
    }

    .ligame-sidebar-open .ligame-sidebar {
        transform: translateX(0);
    }

    .ligame-desktop-sidebar-overlay {
        position: fixed;
        inset: 0;
        display: block;
        background: rgba(3, 7, 12, .38);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: .25s ease;
        z-index: 2050;
    }

    .ligame-sidebar-open .ligame-desktop-sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .ligame-sidebar-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 54px;
        margin-bottom: 28px;
    }

    .ligame-sidebar-brand img {
        width: 126px;
        height: auto;
        display: block;
        object-fit: contain;
    }

    .ligame-sidebar-close {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: #f1f3f5;
        color: #303640;
        font: 400 24px/1 Arial, sans-serif;
        cursor: pointer;
    }

    .ligame-sidebar-menu {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .ligame-sidebar-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0 4px;
        border: 0;
        border-bottom: 1px solid transparent;
        border-radius: 0;
        background: transparent;
        color: var(--sidebar-muted);
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -.1px;
        text-decoration: none;
        transition: color .18s ease, padding-left .18s ease;
    }

    .ligame-sidebar-menu a:hover {
        padding-left: 8px;
        color: var(--sidebar-text);
        background: transparent;
    }

    .ligame-sidebar-menu a.active {
        color: var(--sidebar-active);
        background: transparent;
        border: 0;
        font-weight: 800;
    }

    .ligame-sidebar-footer {
        margin-top: auto;
        padding: 18px 0 0;
        border: 0;
        border-top: 1px solid var(--sidebar-border);
        border-radius: 0;
        background: transparent;
    }

    .ligame-sidebar-action {
        width: 100%;
        min-height: 42px;
        display: flex;
        align-items: center;
        padding: 0 4px;
        border: 0;
        background: transparent;
        color: var(--sidebar-muted);
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        text-align: left;
    }

    .ligame-sidebar-action:hover {
        color: var(--sidebar-text);
    }

    .ligame-sidebar-action.logout {
        color: #c53b3f;
    }
}

/* Dashboard yalnızca ligame.css tema değişkenleriyle çalışır. */
.ligame-home-page {
    max-width: none !important;
    background: var(--home-bg) !important;
    color: var(--home-text);
    overflow-x: hidden;
}

.ligame-home-page .ligame-content {
    padding: 0 0 34px;
}

.home-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.home-match-slider,
.home-slider-track,
.home-slider-slide {
    min-height: 610px;
}

.home-match-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #090d13;
    
}

.home-slider-track { position: relative; }
.home-slider-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: 58px 78px;
    background-size: cover;
    background-position: center;
    opacity: 0;
    visibility: hidden;
    transform: scale(1.025);
    transition: opacity .7s ease, visibility .7s ease, transform .7s ease;
}
.home-slider-picture{
    position:absolute;
    inset:0;
    z-index:0;
    overflow:hidden;
}

.home-slider-picture source{
    display:none;
}

.home-slider-picture img{
    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    display:block;
}
.home-slider-slide.active { opacity: 1; visibility: visible; transform: scale(1); }
.home-slider-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5,8,13,.98) 0%, rgba(5,8,13,.88) 12%, rgba(5,8,13,.34) 40%, rgba(5,8,13,.10) 100%), linear-gradient(0deg, rgba(5,8,13,.88), transparent 42%);
}
.home-slider-full { width: 100%; display: flex; justify-content: center; }
.home-slider-wrapper { width: 100%; max-width: 1200px; }
.home-slider-content { position: relative; z-index: 2; width: min(520px,100%); color: #fff; }
.home-slider-eyebrow { color: #48df62; font-size: 14px; font-weight: 900; letter-spacing: .7px; }
.home-slider-title { display: grid; grid-template-columns: auto auto; align-items: center; width: max-content; max-width: 100%; margin-top: 15px; }
.home-slider-title strong { display: block; max-width: 440px; font-family: 'Bebas Neue', sans-serif; font-size: 58px; line-height: .95; letter-spacing: 1px; }
.home-slider-title strong:first-child { grid-column: 1; }
.home-slider-title span { grid-column: 2; grid-row: 1; align-self: center; margin-left: 24px; padding: 5px 10px; border-top: 2px solid #38cf51; border-bottom: 2px solid #38cf51; color: #38cf51; font-family: 'Bebas Neue', sans-serif; font-size: 21px; }
.home-slider-title strong:last-child { grid-column: 1; }
.home-slider-title.single { display: block; }
.home-slider-meta { display: flex; flex-wrap: wrap; gap: 25px; margin-top: 25px; color: #e1e4e8; font-size: 13px; font-weight: 700; }
.home-slider-countdown { margin-top: 34px; }
.home-slider-countdown > small { display: block; margin-bottom: 11px; color: #fff; font-size: 12px; font-weight: 700; }
.home-slider-time-boxes { display: flex; gap: 14px; }
.home-slider-time-boxes > div { width: 80px; padding: 12px 8px 10px; border: 1px solid rgba(255,255,255,.13); background: rgba(18,23,31,.82); text-align: center; }
.home-slider-time-boxes strong,.home-slider-time-boxes span { display: block; }
.home-slider-time-boxes strong { color: #5ee85d; font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1; }
.home-slider-time-boxes span { margin-top: 6px; color: #fff; font-size: 10px; text-transform: uppercase; }
.home-slider-primary-btn { width: 278px; min-height: 62px; display: flex; align-items: center; gap: 15px; margin-top: 30px; padding: 0 20px; background: linear-gradient(90deg,#286e36,#bd2128); box-shadow: 0 10px 25px rgba(47,208,66,.20); color: #fff; text-decoration: none; text-transform: uppercase; }
.home-slider-primary-btn strong { flex: 1; font-family: 'Bebas Neue',sans-serif; font-size: 24px; letter-spacing: .5px; }
.home-slider-primary-btn b { font-size: 24px; }
.home-slider-arrow { position: absolute; top: 50%; z-index: 10; width: 50px; height: 50px; border: 0; background: transparent; color: #bfbfbf; font-size: 35px; cursor: pointer; transform: translateY(-50%); }
.home-slider-arrow.prev { left: 22px; }
.home-slider-arrow.next { right: 22px; }
.home-slider-dots { position: absolute; z-index: 10; left: 50%; bottom: 28px; display: flex; gap: 12px; transform: translateX(-50%); }
.home-slider-dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #8b939f; cursor: pointer; }
.home-slider-dots button.active { background: #60df58; }

.home-route-grid,
.home-bottom-grid {
    width: 100%;
    display: flex;
    justify-content: center;
    background: var(--home-bg);
}

.home-route-grid { padding: 28px 20px 14px; }
.home-bottom-grid { padding: 14px 20px 28px; }
.home-route-wrapper,
.home-bottom-wrapper { width: 100%; max-width: 1200px; }
.home-route-wrapper { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.home-route-card {
    min-height: 142px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 22px;
    border: 1px solid var(--home-border);
    border-radius: 0;
    background: linear-gradient(145deg,var(--home-surface),var(--home-surface-2));
    color: var(--home-text);
    text-decoration: none;
    box-shadow: var(--home-panel-shadow);
    transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.home-route-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--green) 45%,var(--home-border)); background: var(--home-route-hover); }
.home-route-card strong,.home-route-card span { display: block; }
.home-route-card strong { font-family: 'Bebas Neue',sans-serif; font-size: 24px; letter-spacing: .5px; }
.home-route-card span { margin-top: 8px; color: var(--home-muted); font-size: 12px; line-height: 1.55; }
.home-route-card > b { align-self: flex-end; color: var(--green); font-size: 24px; }
.route-culture > b { color: var(--red); }
.route-word > b,.route-wall > b { color: var(--gold); }

.home-bottom-wrapper { display: grid; grid-template-columns: 1.15fr .85fr; gap: 14px; }
.home-dark-panel {
    width: auto;
    min-width: 0;
    padding: 20px;
    border: 1px solid var(--home-border);
    border-radius: 0;
    background: linear-gradient(150deg,var(--home-surface),var(--home-surface-2));
    box-shadow: var(--home-panel-shadow);
}
.home-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--home-border); }
.home-panel-heading h2 { display: flex; align-items: center; gap: 10px; color: var(--home-text); font-family: 'Bebas Neue',sans-serif; font-size: 22px; letter-spacing: .5px; }
.home-panel-heading h2 i { width: 3px; height: 20px; background: var(--green); }
.home-panel-heading span,
.home-panel-heading a{
    color:var(--home-muted);
    font-size:10px;
    font-weight:800;
    text-decoration:none;
    transition:.2s ease;
}

.home-panel-heading a:hover{
    color:var(--green);
}
.home-player-track-wrap { position: relative; padding: 18px 14px 0; }
.home-player-track { display: flex; gap: 14px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.home-player-track::-webkit-scrollbar { display: none; }
.home-player-card { min-width: 150px; overflow: hidden; border: 1px solid var(--home-border); border-radius: 0; background: var(--home-surface-2); }
.home-player-image { aspect-ratio: 4/5; display: grid; place-items: center; overflow: hidden; background: color-mix(in srgb,var(--home-surface-2) 80%,#000); }
.home-player-image img { width: 100%; height: 100%; object-fit: cover; }
.home-player-image > span { font-size: 34px; }
.home-player-copy { padding: 12px; }
.home-player-copy strong { display: block; overflow: hidden; color: var(--home-text); font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.home-player-copy small { display: block; margin-top: 5px; color: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.home-player-copy span { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 9px; color: var(--home-muted); font-size: 8px; }
.home-player-copy span b { color: var(--gold); font-size: 12px; }
.home-scroll-arrow { position: absolute; top: 50%; z-index: 2; width: 34px; height: 34px; border: 1px solid var(--home-border); border-radius: 50%; background: var(--home-surface); color: var(--home-text); font-size: 22px; cursor: pointer; transform: translateY(-50%); }
.home-scroll-arrow.left { left: -4px; }
.home-scroll-arrow.right { right: -4px; }
.home-fixture-list { display: grid; }
.home-fixture-row{
    display:grid;
    grid-template-columns:
        minmax(110px,1fr)
        12px
        minmax(110px,1fr)
        110px
        54px
        auto;

    align-items:center;
    gap:9px;

    padding:13px 0;

    border-bottom:1px solid var(--home-border);

    color:inherit;
    text-decoration:none;

    transition:
        background .2s ease,
        padding .2s ease;
}

.home-fixture-status{
    justify-self:end;

    padding:6px 9px;

    border-radius:999px;

    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}

.home-fixture-status.active{
    color:var(--green);
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.20);
}

.home-fixture-status.locked{
    color:var(--gold);
    background:rgba(255,185,56,.10);
    border:1px solid rgba(255,185,56,.20);
}

.home-fixture-status.completed{
    color:#67a9ff;
    background:rgba(103,169,255,.10);
    border:1px solid rgba(103,169,255,.20);
}

.home-fixture-status.draft{
    color:var(--gray);
    background:var(--home-surface-2);
    border:1px solid var(--home-border);
}

.home-fixture-row:hover{
    padding-left:8px;
    padding-right:8px;
    background:var(--home-route-hover);
}
.home-fixture-row:last-child { border-bottom: 0; }
.home-fixture-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.home-fixture-team img { width: 28px; height: 28px; object-fit: contain; border-radius: 50%;border: 1px solid var(--white);}
.home-fixture-team strong { overflow: hidden; color: var(--home-text); font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.home-fixture-row em { color: var(--home-muted); font-style: normal; text-align: center; }
.home-fixture-row > span { color: var(--home-muted); font-size: 9px; text-align: right; }
.home-fixture-row > b { color: var(--green); font-size: 10px; text-align: right; }
.home-empty-state { padding: 28px; color: var(--home-muted); text-align: center; font-size: 10px; }


/* =========================================================
   LIGAME DESKTOP SIDEBAR — MINIMAL / THEME READY
   Bu bloğu ligame.css dosyasının en sonuna ekleyin.
========================================================= */

:root,
[data-theme="dark"] {
    --sidebar-surface: #0b0d10;
    --sidebar-surface-soft: #12151a;
    --sidebar-text: #f3f4f6;
    --sidebar-muted: #808691;
    --sidebar-line: rgba(255, 255, 255, .09);
    --sidebar-hover: rgba(255, 255, 255, .055);
    --sidebar-active: rgba(255, 255, 255, .09);
    --sidebar-accent: #f3f4f6;
    --sidebar-overlay: rgba(0, 0, 0, .42);
}

[data-theme="light"] {
    --sidebar-surface: #ffffff;
    --sidebar-surface-soft: #f5f6f7;
    --sidebar-text: #14161a;
    --sidebar-muted: #737984;
    --sidebar-line: rgba(18, 22, 28, .10);
    --sidebar-hover: rgba(18, 22, 28, .045);
    --sidebar-active: rgba(18, 22, 28, .075);
    --sidebar-accent: #14161a;
    --sidebar-overlay: rgba(18, 22, 28, .20);
}

.ligame-desktop-sidebar-overlay {
    display: none;
}

@media (min-width: 992px) {
    .ligame-sidebar {
        display: flex !important;
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1700;
        width: 286px;
        height: 100vh;
        padding: 0;
        flex-direction: column;
        overflow: hidden;
        background: var(--sidebar-surface);
        color: var(--sidebar-text);
        border: 0;
        border-right: 1px solid var(--sidebar-line);
        border-radius: 0;
        box-shadow: 18px 0 45px rgba(0, 0, 0, .12);
        transform: translateX(-101%);
        visibility: hidden;
        transition: transform .30s cubic-bezier(.22, .8, .22, 1), visibility .30s;
    }

    .ligame-sidebar-open .ligame-sidebar {
        transform: translateX(0);
        visibility: visible;
    }

    .ligame-desktop-sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1690;
        background: var(--sidebar-overlay);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility .25s ease;
        backdrop-filter: blur(2px);
    }

    .ligame-sidebar-open .ligame-desktop-sidebar-overlay {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .ligame-sidebar-head {
        height: 82px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 0 24px;
        border-bottom: 1px solid var(--sidebar-line);
    }

    .ligame-sidebar-brand {
        display: inline-flex;
        align-items: center;
        min-width: 0;
    }

    .ligame-sidebar-brand img {
        display: block;
        width: auto;
        height: 35px;
        object-fit: contain;
        filter: none;
    }

    .ligame-sidebar-close {
        position: relative;
        width: 34px;
        height: 34px;
        flex: 0 0 34px;
        border: 0;
        border-radius: 50%;
        background: transparent;
        color: var(--sidebar-text);
        cursor: pointer;
        transition: background .18s ease;
    }

    .ligame-sidebar-close:hover {
        background: var(--sidebar-hover);
    }

    .ligame-sidebar-close span {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 15px;
        height: 1.5px;
        border-radius: 4px;
        background: currentColor;
    }

    .ligame-sidebar-close span:first-child {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .ligame-sidebar-close span:last-child {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .ligame-sidebar-menu {
        flex: 1;
        display: block;
        overflow-y: auto;
        padding: 24px 14px;
        scrollbar-width: none;
    }

    .ligame-sidebar-menu::-webkit-scrollbar {
        display: none;
    }

    .ligame-sidebar-group + .ligame-sidebar-group {
        
        padding-top: 22px;
        border-top: 1px solid var(--sidebar-line);
    }

    .ligame-sidebar-group > small {
        display: block;
        margin: 0 14px 10px;
        color: var(--sidebar-muted);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 1.5px;
        line-height: 1;
    }

    .ligame-sidebar-menu a,
    .ligame-sidebar-link-button {
        position: relative;
        width: 100%;
        min-height: 45px;
        display: flex;
        align-items: center;
        margin: 1px 0;
        padding: 0 14px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: var(--sidebar-muted);
        text-align: left;
        text-decoration: none;
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        letter-spacing: -.12px;
        cursor: pointer;
        transition: color .16s ease, background .16s ease;
    }

    .ligame-sidebar-menu a:hover,
    .ligame-sidebar-link-button:hover {
        background: var(--sidebar-hover);
        color: var(--sidebar-text);
    }

    .ligame-sidebar-menu a.active {
        background: var(--sidebar-active);
        color: var(--sidebar-accent);
        font-weight: 700;
    }

    .ligame-sidebar-menu a.active::before {
        content: "";
        position: absolute;
        left: 0;
        top: 11px;
        bottom: 11px;
        width: 2px;
        border-radius: 4px;
        background: var(--sidebar-accent);
    }

    .ligame-sidebar-footer {
        margin: 0;
        padding: 18px 24px 22px;
        border: 0;
        border-top: 1px solid var(--sidebar-line);
        border-radius: 0;
        background: var(--sidebar-surface);
    }

    .ligame-sidebar-user {
        min-width: 0;
        margin-bottom: 15px;
    }

    .ligame-sidebar-user strong,
    .ligame-sidebar-user small {
        display: block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .ligame-sidebar-user strong {
        color: var(--sidebar-text);
        font-size: 12px;
        font-weight: 700;
    }

    .ligame-sidebar-user small {
        margin-top: 4px;
        color: var(--sidebar-muted);
        font-size: 10px;
        font-weight: 500;
    }

    .ligame-sidebar-footer form {
        margin: 0;
    }

    .ligame-sidebar-logout-text {
        width: auto;
        min-height: 30px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--red);
        font-family: 'Plus Jakarta Sans', sans-serif;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }

    .ligame-sidebar-logout-text:hover {
        text-decoration: underline;
    }

    .ligame-menu-btn[aria-expanded="true"] .ligame-hamburger-lines i:first-child {
        transform: translateY(5px) rotate(45deg);
    }

    .ligame-menu-btn[aria-expanded="true"] .ligame-hamburger-lines i:nth-child(2) {
        opacity: 0;
    }

    .ligame-menu-btn[aria-expanded="true"] .ligame-hamburger-lines i:last-child {
        transform: translateY(-5px) rotate(-45deg);
    }
}


.ligame-hamburger-lines {
    width: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ligame-hamburger-lines i {
    display: block;
    width: 100%;
    height: 1.5px;
    border-radius: 4px;
    background: currentColor;
    transition: transform .22s ease, opacity .18s ease;
}

/* ===================================
   LIGAME | OYUNCU GALERİSİ
=================================== */



.player-gallery-shell{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.player-gallery-hero{
    position:relative;
    min-height:190px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    overflow:hidden;
    margin-bottom:16px;
    padding:28px;
    border:1px solid rgba(61,255,142,.17);
    border-radius:0;
    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.18),
            transparent 42%
        ),
        var(--card-gradient);
    box-shadow:0 18px 42px var(--shadow-soft);
}



.player-gallery-hero > div{
    position:relative;
    z-index:1;
}

.player-gallery-hero > div:first-child{
    max-width:650px;
}

.player-gallery-hero > div:first-child > span{
    color:var(--green);
    font-size:10px;
    font-weight:950;
    letter-spacing:1.7px;
}

.player-gallery-hero h1{
    margin:7px 0;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:46px;
    line-height:1;
    letter-spacing:1.2px;
}

.player-gallery-hero p{
    margin:0;
    color:var(--gray);
    font-size:12px;
    line-height:1.7;
}

.player-gallery-hero-count{
    width:112px;
    height:112px;
    flex:0 0 112px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(61,255,142,.24);
    border-radius:50%;
    background:rgba(61,255,142,.09);
}

.player-gallery-hero-count strong{
    color:var(--green);
    font-family:'Bebas Neue',cursive;
    font-size:43px;
    line-height:1;
}

.player-gallery-hero-count span{
    margin-top:5px;
    color:var(--gray);
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}

.player-gallery-tools{
    margin-bottom:18px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:0;
    background:var(--card-gradient);
    box-shadow:0 12px 28px var(--shadow-soft);
}

.player-search-box{
    position:relative;
    display:flex;
    align-items:center;
}

.player-search-box > span{
    position:absolute;
    left:15px;
    color:var(--gray);
    font-size:22px;
    pointer-events:none;
}

.player-search-box input{
    width:100%;
    height:52px;
    padding:0 48px 0 48px;
    border:1px solid var(--border);
    border-radius:8px;
    outline:none;
    background:var(--input-bg);
    color:var(--white);
    font-family:inherit;
    font-size:13px;
    font-weight:750;
}

.player-search-box input::placeholder{
    color:var(--gray);
}

.player-search-box input:focus{
    border-color:rgba(61,255,142,.40);
    box-shadow:0 0 0 4px rgba(61,255,142,.07);
}

.player-search-box button{
    position:absolute;
    right:10px;
    width:32px;
    height:32px;
    display:none;
    place-items:center;
    border:0;
    border-radius:50%;
    background:var(--card-2);
    color:var(--gray);
    font-size:20px;
    cursor:pointer;
}

.player-search-box button.visible{
    display:grid;
}

.player-position-filters{
    display:flex;
    gap:8px;
    overflow-x:auto;
    margin-top:12px;
    padding-bottom:2px;
    scrollbar-width:none;
}

.player-position-filters::-webkit-scrollbar{
    display:none;
}

.player-position-filters button{
    min-height:38px;
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--card-2);
    color:var(--gray);
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.player-position-filters button small{
    min-width:20px;
    height:20px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--card);
    color:var(--gray);
    font-size:8px;
}

.player-position-filters button.active{
    border-color:var(--green);
    background:var(--green);
    color:#07110a;
}

.player-position-filters button.active small{
    background:rgba(7,17,10,.12);
    color:#07110a;
}

.player-gallery-content{
    padding:18px;
    border:1px solid var(--border);
    border-radius:0;
    background:var(--card-gradient);
    box-shadow:0 16px 36px var(--shadow-soft);
}

.player-gallery-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:15px;
    margin-bottom:16px;
}

.player-gallery-section-head span{
    color:var(--green);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.4px;
}

.player-gallery-section-head h2{
    margin-top:4px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:25px;
    letter-spacing:.8px;
}

.player-gallery-section-head > strong{
    color:var(--gray);
    font-size:10px;
    font-weight:900;
}

.player-gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:13px;
}

.player-gallery-card{
    min-width:0;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card-2);
    box-shadow:0 10px 24px var(--shadow-soft);
    transition:
        transform .22s ease,
        border-color .22s ease;
}

.player-gallery-card:hover{
    transform:translateY(-4px);
    border-color:rgba(61,255,142,.30);
}

.player-gallery-card[hidden]{
    display:none;
}

.player-gallery-image{
    position:relative;
    aspect-ratio:4 / 5;
    overflow:hidden;
    background:
        radial-gradient(
            circle at top,
            rgba(61,255,142,.14),
            transparent 58%
        ),
        var(--card);
}

.player-gallery-image::after{
    content:"";
    position:absolute;
    left:12%;
    right:12%;
    bottom:0;
    height:2px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--green),
        transparent
    );
}

.player-gallery-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center top;
    transition:transform .3s ease;
}

.player-gallery-card:hover
.player-gallery-image img{
    transform:scale(1.025);
}

.player-gallery-placeholder{
    width:100%;
    height:100%;
    display:grid;
    place-items:center;
}

.player-gallery-placeholder span{
    font-size:42px;
    opacity:.6;
}

.player-gallery-card-copy{
    padding:14px;
}

.player-gallery-card-copy > strong{
    display:block;
    overflow:hidden;
    color:var(--white);
    font-size:13px;
    font-weight:950;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.player-gallery-card-copy > span{
    display:block;
    margin-top:5px;
    color:var(--green);
    font-size:9px;
    font-weight:900;
    text-transform:uppercase;
}

.player-gallery-rating{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:13px;
    padding-top:11px;
    border-top:1px solid var(--border);
}

.player-gallery-rating small{
    color:var(--gray);
    font-size:8px;
    font-weight:800;
}

.player-gallery-rating b{
    color:var(--red);
    font-family:'Bebas Neue',cursive;
    font-size:24px;
    line-height:1;
}

.player-gallery-empty{
    grid-column:1 / -1;
    padding:38px 18px;
    border:1px dashed var(--border);
    border-radius:10px;
    color:var(--gray);
    text-align:center;
}

.player-gallery-empty[hidden]{
    display:none;
}

.player-gallery-empty > span{
    display:block;
    font-size:31px;
}

.player-gallery-empty strong{
    display:block;
    margin-top:8px;
    color:var(--white);
    font-size:13px;
}

.player-gallery-empty p{
    margin-top:5px;
    font-size:10px;
}

@media(max-width:1050px){
    .player-gallery-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .home-route-wrapper { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media(max-width:720px){
    .player-gallery-hero{
        min-height:160px;
        padding:20px;
    }

    .player-gallery-hero h1{
        font-size:37px;
    }

    .player-gallery-hero-count{
        width:82px;
        height:82px;
        flex-basis:82px;
    }

    .player-gallery-hero-count strong{
        font-size:32px;
    }

    .player-gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
    }

    .player-gallery-content{
        padding:12px;
    }

    .player-gallery-card-copy{
        padding:11px;
    }

    .home-fixture-row{
    grid-template-columns:
        minmax(86px,1fr)
        10px
        minmax(86px,1fr);
}



.home-fixture-row > b{
    grid-column:3;
    text-align:right;
}

.home-fixture-status{
    grid-column:1 / -1;
    justify-self:start;
    margin-top:2px;
}

}

@media(max-width:450px){
    .player-gallery-hero-count{
        display:none;
    }

    .player-gallery-tools{
        padding:11px;
    }

    .player-gallery-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .player-gallery-card-copy > strong{
        font-size:11px;
    }

    .player-gallery-rating small{
        max-width:76px;
        font-size:7px;
    }

    .player-gallery-rating b{
        font-size:21px;
    }
}


/* ===================================
   LIGAME | OYUNCU DETAY
=================================== */



.player-detail-shell{
    width:100%;
    max-width:1200px;
    margin:0 auto;
}

.player-detail-back{
    margin-bottom:14px;
}

.player-detail-back a{
    color:var(--gray);
    font-size:11px;
    font-weight:900;
    text-decoration:none;
}

.player-detail-back a:hover{
    color:var(--green);
}

.player-detail-hero{
    display:grid;
    grid-template-columns:minmax(280px,420px) minmax(0,1fr);
    height:320px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:0;
    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.16),
            transparent 42%
        ),
        var(--card-gradient);
    box-shadow:0 20px 48px var(--shadow);
}

.player-detail-image{
    position:relative;
    height:320px;
    overflow:hidden;
    background:
        radial-gradient(
            circle at center,
            rgba(61,255,142,.16),
            transparent 62%
        ),
        var(--card-2);
}

.player-detail-image::after{
    content:"";
    position:absolute;
    left:8%;
    right:8%;
    bottom:0;
    height:3px;
    background:linear-gradient(
        90deg,
        transparent,
        var(--green),
        transparent
    );
}

.player-detail-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center top;
}

.player-detail-placeholder{
    width:100%;
    height:100%;
    min-height:520px;
    display:grid;
    place-items:center;
    font-size:70px;
}

.player-detail-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:44px;
}

.player-detail-copy > span{
    color:var(--green);
    font-size:10px;
    font-weight:950;
    letter-spacing:1.6px;
}

.player-detail-copy h1{
    margin:9px 0 14px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:58px;
    line-height:.95;
    letter-spacing:1px;
}

.player-detail-meta{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}

.player-detail-meta strong,
.player-detail-meta em{
    padding:7px 10px;
    border-radius:999px;
    font-size:10px;
    font-style:normal;
    font-weight:900;
}

.player-detail-meta strong{
    color:var(--green);
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.20);
}

.player-detail-meta em{
    color:var(--gray);
    background:var(--card-2);
    border:1px solid var(--border);
}

.player-detail-stats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:9px;
    margin-top:28px;
}

.player-detail-stats > div{
    min-width:0;
    padding:15px 12px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--card-2);
}

.player-detail-stats small,
.player-detail-stats strong{
    display:block;
}

.player-detail-stats small{
    color:var(--gray);
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.player-detail-stats strong{
    margin-top:7px;
    color:var(--green);
    font-family:'Bebas Neue',cursive;
    font-size:29px;
    line-height:1;
}

.player-detail-results{
    margin-top:16px;
    padding:20px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--card-gradient);
    box-shadow:0 16px 36px var(--shadow-soft);
}

.player-detail-section-head{
    margin-bottom:15px;
}

.player-detail-section-head span{
    color:var(--green);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.4px;
}

.player-detail-section-head h2{
    margin-top:4px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:27px;
}

.player-detail-result-list{
    display:flex;
    flex-direction:column;
}

.player-detail-result-row{
    display:grid;
    grid-template-columns:minmax(0,1fr) 90px 74px;
    align-items:center;
    gap:14px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
}

.player-detail-result-row:last-child{
    border-bottom:0;
}

.player-detail-result-match small,
.player-detail-result-match strong,
.player-detail-result-minute small,
.player-detail-result-minute strong,
.player-detail-result-rating small,
.player-detail-result-rating strong{
    display:block;
}

.player-detail-result-match small,
.player-detail-result-minute small,
.player-detail-result-rating small{
    color:var(--gray);
    font-size:8px;
    font-weight:850;
    text-transform:uppercase;
}

.player-detail-result-match strong{
    margin-top:5px;
    color:var(--white);
    font-size:12px;
}

.player-detail-result-match em{
    color:var(--gray);
    font-style:normal;
}

.player-detail-result-minute{
    text-align:center;
}

.player-detail-result-minute strong{
    margin-top:5px;
    color:var(--white);
    font-size:11px;
}

.player-detail-result-rating{
    text-align:right;
}

.player-detail-result-rating strong{
    margin-top:4px;
    color:var(--gold);
    font-family:'Bebas Neue',cursive;
    font-size:26px;
}

.player-gallery-card{
    color:inherit;
    text-decoration:none;
}

@media(max-width:800px){
    .player-detail-hero{
        grid-template-columns:1fr;
    }

    .player-detail-image{
        min-height:430px;
    }

    .player-detail-copy{
        padding:24px;
    }

    .player-detail-copy h1{
        font-size:45px;
    }
}

@media(max-width:560px){
    .player-detail-hero{min-height: 520px;height: auto;}
    .player-detail-image{
        min-height:340px;
    }

    .player-detail-stats{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .player-detail-results{
        padding:14px;
    }

    .player-detail-result-row{
        grid-template-columns:minmax(0,1fr) 58px;
    }

    .player-detail-result-minute{
        display:none;
    }
}



@media (max-width: 991px) {
    .ligame-home-page .ligame-content { padding-top: 0; }
    .home-match-slider,.home-slider-track,.home-slider-slide { min-height: 600px; }
    .home-slider-slide { align-items: flex-end; padding: 32px 20px 64px; }
    .home-slider-overlay { background: linear-gradient(0deg,rgba(5,8,13,.98) 0%,rgba(5,8,13,.86) 12%,rgba(5,8,13,.24) 60%); }
    .home-slider-arrow { display: none; }
    .home-route-wrapper { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .home-bottom-wrapper { grid-template-columns: 1fr; }
     .home-slider-picture img{
        object-position:center top;
    }
}

@media (max-width: 560px) {
    .home-slider-title strong { font-size: 39px; }
    .home-slider-meta { gap: 10px; font-size: 10px; }
    .home-slider-time-boxes { gap: 6px; }
    .home-slider-time-boxes > div { width: 61px; padding: 9px 5px; }
    .home-slider-time-boxes strong { font-size: 23px; }
    .home-slider-primary-btn { width: 100%; min-height: 56px; }
    .home-route-grid { padding: 18px 12px 8px; }
    .home-route-wrapper { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
    .home-route-card { min-height: 132px; padding: 5px; }
    .home-route-card strong { font-size: 17px; }
    .home-route-card span { font-size: 10px; }
    .home-bottom-grid { padding: 8px 12px 20px; }
    .home-dark-panel { padding: 14px; }
    .home-player-track-wrap { padding: 14px 0 0; }
    .home-player-card { min-width: 132px; }
    .home-scroll-arrow { display: none; }
    .home-fixture-row { grid-template-columns: minmax(86px,1fr) 10px minmax(86px,1fr); gap: 6px; }
    .home-fixture-row > span { grid-column: 1 / 3; text-align: left; }
    .home-fixture-row > b { grid-column: 3; text-align: right; }
}

/* =========================================================
   LIGAME DASHBOARD | TEMİZ ROTA KARTLARI + SLIDER CTA
   Bu bölüm tek kaynak olarak dosyanın sonunda tutulmalıdır.
========================================================= */

.home-route-wrapper{
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.home-route-card.home-route-featured{
    position:relative;
    min-height:280px;
    isolation:isolate;
    overflow:hidden;
    padding:0;
    border:1px solid var(--home-border);
    border-radius:0;
    color:#f5f7fa;
    text-decoration:none;
    box-shadow:0 14px 30px rgba(0,0,0,.18);
    transform:translateZ(0);
    transition:
        transform .24s ease,
        border-color .24s ease,
        box-shadow .24s ease;
}

.home-route-card.home-route-featured:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 36px rgba(0,0,0,.22);
}

/* Kart renkleri: düşük doygunluk, net ayrışma */

.home-route-featured.route-sport{
    background:
        radial-gradient(circle at 82% 25%,rgba(61,255,142,.10),transparent 38%),
        linear-gradient(145deg,#132019 0%,#0c1410 100%);
    border-color:rgba(61,255,142,.15);
}

.home-route-featured.route-culture{
    background:
        radial-gradient(circle at 82% 24%,rgba(255,95,87,.09),transparent 38%),
        linear-gradient(145deg,#241416 0%,#130c0d 100%);
    border-color:rgba(255,95,87,.15);
}

.home-route-featured.route-word{
    background:
        radial-gradient(circle at 82% 24%,rgba(255,185,56,.09),transparent 38%),
        linear-gradient(145deg,#211b10 0%,#12100b 100%);
    border-color:rgba(255,185,56,.15);
}

.home-route-featured.route-wall{
    background:
        radial-gradient(circle at 82% 24%,rgba(166,126,220,.09),transparent 38%),
        linear-gradient(145deg,#1d1925 0%,#100e14 100%);
    border-color:rgba(166,126,220,.14);
}

.route-featured-content{
    position:relative;
    z-index:5;
    width:100%;
    min-height:280px;
    display:flex;
    flex-direction:column;
    padding:25px;
}

.route-featured-label{
    display:inline-flex !important;
    width:max-content;
    margin:0 !important;
    padding:6px 9px !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:5px;
    background:rgba(255,255,255,.045) !important;
    color:rgba(255,255,255,.76) !important;
    box-shadow:none !important;
    font-size:9px !important;
    font-weight:950 !important;
    letter-spacing:1.5px !important;
    text-align:left !important;
}

.route-featured-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin:auto 0;
}

.route-featured-main > div:first-child{
    position:relative;
    z-index:3;
    max-width:390px;
}

.route-featured-main strong{
    display:block;
    color:#fff;
    font-family:'Bebas Neue',sans-serif;
    font-size:30px;
    line-height:.95;
    letter-spacing:.7px;
}

.route-featured-main p{
    max-width:330px;
    margin:11px 0 0;
    color:rgba(255,255,255,.57);
    font-size:11px;
    line-height:1.6;
}

.route-featured-icon{
    width:76px;
    height:76px;
    flex:0 0 76px;
    display:grid;
    place-items:center;
    border-radius:50%;
    box-shadow:none;
    font-size:31px;
    opacity:.90;
    transition:transform .25s ease,opacity .25s ease;
}

.sport-icon{
    color:var(--green);
    background:rgba(61,255,142,.09);
    border:1px solid rgba(61,255,142,.18);
}

.culture-icon{
    color:var(--red);
    background:rgba(255,95,87,.09);
    border:1px solid rgba(255,95,87,.18);
}

.word-icon{
    color:var(--gold);
    background:rgba(255,185,56,.09);
    border:1px solid rgba(255,185,56,.18);
    font-family:'Bebas Neue',sans-serif;
    font-size:39px;
}

.wall-icon{
    color:var(--gold);
    background:rgba(255,185,56,.08);
    border:1px solid rgba(255,185,56,.17);
}

.home-route-featured:hover .route-featured-icon{
    transform:translateY(-2px);
    opacity:1;
}

.route-featured-action{
    position:relative;
    z-index:4;
    min-height:40px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    border:1px solid rgba(255,255,255,.09);
    border-radius:5px;
    background:rgba(255,255,255,.035);
    color:rgba(255,255,255,.84);
    box-shadow:none;
    transition:background .24s ease,border-color .24s ease;
}

.route-featured-action span{
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:inherit !important;
    font-size:10px !important;
    font-weight:950 !important;
    letter-spacing:.9px !important;
    text-align:left !important;
}

.route-featured-action b{
    font-size:19px;
    transition:transform .24s ease;
}

.home-route-featured:hover .route-featured-action b{
    transform:translateX(4px);
}

.route-sport:hover .route-featured-action{
    background:rgba(61,255,142,.065);
    border-color:rgba(61,255,142,.20);
}

.route-culture:hover .route-featured-action{
    background:rgba(255,95,87,.065);
    border-color:rgba(255,95,87,.20);
}

.route-word:hover .route-featured-action{
    background:rgba(255,185,56,.065);
    border-color:rgba(255,185,56,.20);
}

.route-wall:hover .route-featured-action{
    background:rgba(166,126,220,.06);
    border-color:rgba(166,126,220,.18);
}

/* Dekoratif katmanlar */

.route-card-glow{
    position:absolute;
    z-index:0;
    right:-100px;
    bottom:-120px;
    width:260px;
    height:260px;
    border-radius:50%;
    filter:blur(28px);
    opacity:.22;
    pointer-events:none;
}

.route-sport .route-card-glow{background:rgba(61,255,142,.13);}
.route-culture .route-card-glow{background:rgba(255,95,87,.14);}
.route-word .route-card-glow{background:rgba(255,185,56,.14);}
.route-wall .route-card-glow{background:rgba(159,107,255,.14);}

.route-card-shine{
    position:absolute;
    z-index:6;
    top:-30%;
    left:-45%;
    width:32%;
    height:165%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent);
    opacity:0;
    pointer-events:none;
    transform:rotate(18deg);
    transition:left .75s ease,opacity .25s ease;
}

.home-route-featured:hover .route-card-shine{
    left:125%;
    opacity:.42;
}

.sport-field-visual,
.culture-pattern-visual,
.word-pattern-visual,
.wall-pattern-visual{
    position:absolute;
    z-index:1;
    inset:0 0 0 48%;
    overflow:hidden;
    pointer-events:none;
}

.sport-field-visual{opacity:.18;}

.sport-field-visual::before{
    content:"";
    position:absolute;
    inset:22px -40px 22px 0;
    border:2px solid rgba(255,255,255,.26);
    transform:perspective(500px) rotateY(-15deg);
}

.field-center-line{
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:2px;
    background:rgba(255,255,255,.25);
}

.field-center-circle{
    position:absolute;
    left:50%;
    top:50%;
    width:130px;
    height:130px;
    border:2px solid rgba(255,255,255,.25);
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.field-penalty-area{
    position:absolute;
    right:-12px;
    top:50%;
    width:130px;
    height:180px;
    border:2px solid rgba(255,255,255,.24);
    transform:translateY(-50%);
}

.field-ball{
    position:absolute;
    top:31%;
    right:22%;
    font-size:31px;
    filter:grayscale(1);
    transform:rotate(-8deg);
    transition:transform .30s ease;
}

.route-sport:hover .field-ball{
    transform:translate(-5px,3px) rotate(4deg);
}

.culture-ring,
.word-visual-ring{
    position:absolute;
    top:50%;
    right:-30px;
    width:230px;
    height:230px;
    border:1px solid rgba(255,185,56,.16);
    border-radius:50%;
    opacity:.55;
    transform:translateY(-50%);
}

.culture-ring::before,
.culture-ring::after,
.word-visual-ring::before,
.word-visual-ring::after{
    content:"";
    position:absolute;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.08);
}

.culture-ring::before,
.word-visual-ring::before{inset:28px;}

.culture-ring::after,
.word-visual-ring::after{inset:60px;}

.culture-book,
.word-main-icon{
    position:absolute;
    right:42px;
    bottom:34px;
    font-size:66px;
    opacity:.12;
    transform:rotate(-5deg);
    transition:transform .30s ease;
}

.route-culture:hover .culture-book,
.route-word:hover .word-main-icon{
    transform:translateY(-3px) rotate(-2deg);
}

.culture-star,
.word-letter,
.wall-crown,
.wall-spark{
    opacity:.38;
}

.culture-star,
.wall-spark{
    position:absolute;
    color:rgba(255,215,100,.60);
}

.star-one{right:65px;top:40px;font-size:28px;}
.star-two{right:170px;top:95px;font-size:18px;}

.word-letter{
    position:absolute;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,185,56,.12);
    border-radius:8px;
    background:rgba(255,185,56,.045);
    color:rgba(255,216,115,.38);
    font-family:'Bebas Neue',sans-serif;
    font-size:20px;
}

.letter-one{top:35px;right:56px;}
.letter-two{top:84px;right:142px;}
.letter-three{right:175px;bottom:52px;}
.letter-four{right:26px;bottom:124px;}

.wall-stage{
    position:absolute;
    bottom:25px;
    border:1px solid rgba(255,185,56,.18);
    border-bottom:0;
    background:linear-gradient(180deg,rgba(255,185,56,.18),rgba(255,185,56,.04));
    opacity:.52;
}

.stage-one{right:96px;width:73px;height:95px;}
.stage-two{right:170px;width:67px;height:68px;}
.stage-three{right:28px;width:67px;height:52px;}

.wall-trophy{
    position:absolute;
    right:107px;
    bottom:103px;
    font-size:58px;
    opacity:.55;
    transition:transform .30s ease;
}

.route-wall:hover .wall-trophy{transform:translateY(-3px);}

.wall-crown{
    position:absolute;
    right:116px;
    top:28px;
    color:rgba(255,215,100,.65);
    font-size:34px;
    transform:rotate(-8deg);
}

.spark-one{top:69px;right:42px;font-size:25px;}
.spark-two{top:102px;right:208px;font-size:18px;}

/* Açık tema */

[data-theme="light"] .home-route-card.home-route-featured{
    color:#1d232c;
    border-color:rgba(18,27,38,.10);
    box-shadow:0 12px 28px rgba(25,39,56,.08);
}

[data-theme="light"] .home-route-card.home-route-featured:hover{
    box-shadow:0 16px 34px rgba(25,39,56,.11);
}

[data-theme="light"] .home-route-featured.route-sport{
    background:
        radial-gradient(circle at 82% 24%,rgba(22,138,67,.075),transparent 38%),
        linear-gradient(145deg,#f7faf8,#edf3ef);
    border-color:rgba(22,138,67,.14);
}

[data-theme="light"] .home-route-featured.route-culture{
    background:
        radial-gradient(circle at 82% 24%,rgba(214,69,61,.065),transparent 38%),
        linear-gradient(145deg,#fcf8f8,#f5eeee);
    border-color:rgba(214,69,61,.13);
}

[data-theme="light"] .home-route-featured.route-word{
    background:
        radial-gradient(circle at 82% 24%,rgba(216,145,22,.07),transparent 38%),
        linear-gradient(145deg,#fcfaf5,#f4f0e6);
    border-color:rgba(216,145,22,.14);
}

[data-theme="light"] .home-route-featured.route-wall{
    background:
        radial-gradient(circle at 82% 24%,rgba(128,93,178,.06),transparent 38%),
        linear-gradient(145deg,#faf9fc,#f0eef4);
    border-color:rgba(128,93,178,.12);
}

[data-theme="light"] .route-featured-main strong{color:#1d232c;}
[data-theme="light"] .route-featured-main p{color:#69717d;}

[data-theme="light"] .route-featured-label{
    color:#5b6470 !important;
    background:rgba(255,255,255,.48) !important;
    border-color:rgba(18,27,38,.08) !important;
}

[data-theme="light"] .route-featured-action{
    color:#29313c;
    background:rgba(255,255,255,.46);
    border-color:rgba(18,27,38,.09);
}

[data-theme="light"] .route-featured-action span{color:#29313c !important;}

[data-theme="light"] .sport-icon{
    color:#168a43;
    background:rgba(22,138,67,.07);
    border-color:rgba(22,138,67,.14);
}

[data-theme="light"] .culture-icon{
    color:#d6453d;
    background:rgba(214,69,61,.07);
    border-color:rgba(214,69,61,.14);
}

[data-theme="light"] .word-icon{
    color:#b47711;
    background:rgba(216,145,22,.07);
    border-color:rgba(216,145,22,.14);
}

[data-theme="light"] .wall-icon{
    color:#916515;
    background:rgba(216,145,22,.065);
    border-color:rgba(216,145,22,.13);
}

/* Slider: Kadronu Kur butonu */

.home-slider-primary-btn{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.16);
    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease,
        filter .25s ease;
}

.home-slider-primary-btn::after{
    content:"";
    position:absolute;
    z-index:2;
    top:-35%;
    left:-48%;
    width:32%;
    height:170%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
    pointer-events:none;
    transform:rotate(18deg);
    transition:left .70s ease;
}

.home-slider-primary-btn strong,
.home-slider-primary-btn b{
    position:relative;
    z-index:3;
}

.home-slider-primary-btn b{transition:transform .24s ease;}

.home-slider-primary-btn:hover{
    transform:translateY(-3px);
    border-color:rgba(61,255,142,.34);
    box-shadow:0 15px 32px rgba(0,0,0,.30),0 0 22px rgba(61,255,142,.12);
    filter:brightness(1.05);
}

.home-slider-primary-btn:hover::after{left:125%;}
.home-slider-primary-btn:hover b{transform:translateX(5px);}
.home-slider-primary-btn:active{transform:translateY(-1px) scale(.985);}

/* Responsive */

@media(min-width:768px) and (max-width:991px){
    .home-route-card.home-route-featured{min-height:260px;}
    .route-featured-content{min-height:260px;padding:22px;}
    .route-featured-main strong{font-size:34px;}
    .route-featured-icon{
        width:68px;
        height:68px;
        flex-basis:68px;
        font-size:28px;
    }

    .home-route-wrapper{grid-template-columns: repeat(2, minmax(0, 1fr));}
}

@media(max-width:600px){
    .home-route-wrapper{grid-template-columns: repeat(2, minmax(0, 1fr));}

    .home-route-card.home-route-featured{
        min-height:205px;
    }

    .route-featured-content{
        min-height:240px;
        padding:10px;
    }

    .route-featured-main{gap:12px;}
    .route-featured-main strong{font-size:20px;}
    .route-featured-main p{max-width:235px;font-size:9.5px;}

    .route-featured-icon{
        width:54px;
        height:54px;
        flex-basis:54px;
        font-size:23px;
    }

    .word-icon{font-size:31px;}

    .sport-field-visual,
    .culture-pattern-visual,
    .word-pattern-visual,
    .wall-pattern-visual{
        inset:0 0 0 42%;
    }

    .route-card-shine{display:none;}

    .home-route-card.home-route-featured:hover{
        transform:none;
    }

    .home-route-card.home-route-featured:active{
        transform:scale(.988);
    }

    .home-slider-primary-btn:hover{
        transform:none;
        filter:none;
    }

    .home-slider-primary-btn:active{
        transform:scale(.98);
    }
}

@media(prefers-reduced-motion:reduce){
    .home-route-card.home-route-featured,
    .route-featured-icon,
    .route-featured-action b,
    .field-ball,
    .culture-book,
    .word-main-icon,
    .wall-trophy,
    .home-slider-primary-btn,
    .home-slider-primary-btn b{
        transition:none !important;
    }

    .route-card-shine,
    .home-slider-primary-btn::after{
        display:none !important;
    }
}


/* =========================================================
   LIGAME | YENİ GÖREV MERKEZİ
   Mobile First
========================================================= */

.ligame-profile-btn {
    position: relative;
    overflow: visible;
}

.ligame-task-button-icon {
    position: relative;

    width: 21px;
    height: 21px;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ligame-task-button-icon::before,
.ligame-task-button-icon::after,
.ligame-task-button-icon i {
    content: "";

    position: absolute;

    border-radius: 50%;
}

.ligame-task-button-icon::before {
    inset: 0;

    border: 2px solid currentColor;

    opacity: .95;
}

.ligame-task-button-icon::after {
    width: 11px;
    height: 11px;

    border: 2px solid currentColor;

    opacity: .75;
}

.ligame-task-button-icon i {
    width: 4px;
    height: 4px;

    background: currentColor;
}

.ligame-profile-btn.has-mission-alert,
.ligame-profile-btn.all-missions-done {
    color: var(--white);
    border-color: var(--border);
    background: var(--glass-bg);
}

.ligame-profile-btn.has-mission-alert:hover,
.ligame-profile-btn.all-missions-done:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, .16);
    background: var(--card-2);
}

.ligame-task-badge,
.ligame-task-completed-badge {
    position: absolute;

    top: -6px;
    right: -6px;

    min-width: 19px;
    height: 19px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 5px;

    
    border-radius: 999px;

    color: #fff;

    font-size: 9px;
    font-weight: 950;
    line-height: 1;
}

.ligame-task-badge {
    background: var(--red);

    box-shadow:
        0 5px 13px rgba(255, 95, 87, .34);

    animation: taskBadgeBreath 2.1s ease-in-out infinite;
}

.ligame-task-completed-badge {
    background: var(--card-2);
    color: var(--white);
    border-color: var(--border);
    box-shadow: 0 5px 13px var(--shadow-soft);
}

/* Overlay */

.ligame-task-overlay {
    position: fixed;
    inset: 0;

    z-index: 1490;

    background: rgba(0, 0, 0, .68);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .24s ease,
        visibility .24s ease;
}

.ligame-task-overlay.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Ana panel */

.ligame-task-center {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;
    top: auto;

    z-index: 1500;

    width: 100%;
    max-height: 88dvh;

    display: flex;
    flex-direction: column;

    padding:
        8px
        14px
        calc(14px + env(safe-area-inset-bottom));

    overflow: hidden;

    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 10px 10px 0 0;

    background: var(--card);

    box-shadow:
        0 -25px 70px rgba(0, 0, 0, .48);

    opacity: 1;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(105%);

    transition:
        transform .32s cubic-bezier(.22, .8, .22, 1),
        visibility .32s ease;
}

.ligame-task-center.open {
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.ligame-task-center-open {
    overflow: hidden;
}

.ligame-task-drag-line {
    width: 42px;
    height: 4px;

    flex: 0 0 4px;

    margin: 1px auto 14px;

    border-radius: 999px;

    background: rgba(147, 165, 150, .35);
}

/* Başlık */

.ligame-task-center-head {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 58px;
    align-items: center;
    gap: 13px;

    padding: 0 2px 0;

    border-bottom: 1px solid var(--border);
}

.ligame-task-head-copy {
    min-width: 0;
}

.ligame-task-head-copy span,
.ligame-task-head-copy strong,
.ligame-task-head-copy small {
    display: block;
}

.ligame-task-head-copy span {
    color: var(--green);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.5px;
}

.ligame-task-head-copy strong {
    margin-top: 5px;

    color: var(--white);

    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
}

.ligame-task-head-copy small {
    margin-top: 5px;

    color: var(--gray);

    font-size: 10px;
    font-weight: 700;
}

/* Dairesel ilerleme */

.ligame-task-circle-progress {
    position: relative;

    width: 58px;
    height: 58px;
}

.ligame-task-circle-progress svg {
    width: 100%;
    height: 100%;

    display: block;

    transform: rotate(-90deg);
}

.ligame-task-circle-progress circle {
    fill: none;

    stroke-width: 3.5;
}

.ligame-task-circle-bg {
    stroke: var(--card-2);
}

.ligame-task-circle-value {
    stroke: var(--green);

    stroke-linecap: round;

    stroke-dasharray: 106.8;
    stroke-dashoffset: 106.8;

    transition: stroke-dashoffset .5s ease;
}

.ligame-task-circle-progress > span {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: baseline;
    justify-content: center;

    padding-top: 18px;
}

.ligame-task-circle-progress strong {
    color: var(--white);

    font-family: "Bebas Neue", cursive;
    font-size: 20px;
    line-height: 1;
}

.ligame-task-circle-progress small {
    color: var(--gray);

    font-size: 9px;
    font-weight: 800;
}

.ligame-task-close {
    position: absolute;

    top: -38px;
    right: 0;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--card-2);
    color: var(--gray);

    font-size: 21px;
    line-height: 1;

    cursor: pointer;
}

/* Görev listesi */

.ligame-task-list {
    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow-y: auto;

    padding: 5px 0;

    scrollbar-width: none;
    overscroll-behavior: contain;
}

.ligame-task-list::-webkit-scrollbar {
    display: none;
}

.ligame-task-row {
    min-height: 68px;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;

    padding: 11px 2px;

    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;

    background: transparent;

    color: var(--white);
    text-decoration: none;

    transition:
        opacity .2s ease,
        transform .2s ease;
}

a.ligame-task-row:active {
    transform: scale(.985);
}

.ligame-task-row.completed {
    opacity: .66;
}

.ligame-task-row-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 9px;

    background: var(--card-2);

    font-size: 16px;
}

.ligame-task-row.completed
.ligame-task-row-icon {
    color: #08110a;

    background: var(--green);
    border-color: var(--green);

    font-size: 12px;
    font-weight: 950;
}

.ligame-task-row-content {
    min-width: 0;
}

.ligame-task-row-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
}

.ligame-task-row-title strong {
    min-width: 0;

    overflow: hidden;

    color: var(--white);

    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ligame-task-row-title b {
    flex: 0 0 auto;

    color: var(--gold);

    font-size: 8px;
    font-weight: 950;
}

.ligame-task-row-status {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 6px;

    color: var(--gray);

    font-size: 8px;
    font-weight: 800;
}

.ligame-task-row-status .completed {
    color: var(--green);
}

.ligame-task-row-progress {
    width: 100%;
    height: 4px;

    overflow: hidden;

    margin-top: 6px;

    border-radius: 999px;

    background: var(--card-2);
}

.ligame-task-row-progress i {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--green);
}

.ligame-task-row.completed
.ligame-task-row-progress i {
    background: rgba(61, 255, 142, .55);
}

.ligame-task-row-arrow {
    color: var(--gray);

    font-size: 22px;
    font-weight: 300;
}

/* Boş durum */

.ligame-task-empty {
    padding: 32px 12px;

    text-align: center;
}

.ligame-task-empty > div {
    font-size: 29px;
}

.ligame-task-empty strong {
    display: block;

    margin-top: 9px;

    color: var(--white);

    font-size: 12px;
}

.ligame-task-empty small {
    display: block;

    margin-top: 5px;

    color: var(--gray);

    font-size: 9px;
}

/* Tüm görevler */

.ligame-task-all-link {
    min-height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    flex: 0 0 auto;

    padding: 0 4px;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);

    color: var(--white);
    text-decoration: none;

    font-size: 11px;
    font-weight: 850;
}

.ligame-task-all-link b {
    color: var(--green);

    font-size: 18px;
}

/* Hesap alt çubuğu */

.ligame-task-account-bar {
    min-height: 59px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    flex: 0 0 auto;

    padding-top: 11px;
}

.ligame-task-user {
    min-width: 0;

    display: flex;
    align-items: center;
    gap: 9px;
}

.ligame-task-user > span {
    width: 34px;
    height: 34px;

    flex: 0 0 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    background: var(--card-2);
    border: 1px solid var(--border);

    color: var(--green);

    font-size: 12px;
    font-weight: 950;
}

.ligame-task-user > div {
    min-width: 0;
}

.ligame-task-user strong,
.ligame-task-user small {
    display: block;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.ligame-task-user strong {
    color: var(--white);

    font-size: 10px;
}

.ligame-task-user small {
    max-width: 135px;

    margin-top: 3px;

    color: var(--gray);

    font-size: 7px;
}

.ligame-task-account-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.ligame-task-account-actions form {
    margin: 0;
}

.ligame-task-account-actions button {
    width: 35px;
    height: 35px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: transparent;
    color: var(--gray);

    font-family: inherit;
    font-size: 12px;
    font-weight: 900;

    cursor: pointer;
}

.ligame-task-account-actions
button.logout {
    color: var(--red);

    border-color: rgba(255, 95, 87, .18);
}

/* Dil seçimi */

.ligame-task-language-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    transition:
        max-height .22s ease,
        opacity .22s ease,
        margin-top .22s ease;
}

.ligame-task-language-menu.open {
    max-height: 48px;

    margin-top: 7px;

    opacity: 1;
}

.ligame-task-language-menu form {
    margin: 0;
}

.ligame-task-language-menu button {
    width: 100%;
    height: 37px;

    border: 1px solid var(--border);
    border-radius: 7px;

    background: var(--card-2);
    color: var(--gray);

    font-size: 10px;
    font-weight: 900;

    cursor: pointer;
}

.ligame-task-language-menu button.active {
    color: #08110a;

    background: var(--green);
    border-color: var(--green);
}

/* Animasyonlar */

@keyframes taskButtonGlow {
    0% {
        opacity: .7;
        transform: scale(.88);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.24);
    }
}

@keyframes taskBadgeBreath {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* Küçük telefon */

@media (max-width: 380px) {
    .ligame-task-center {
        padding-left: 11px;
        padding-right: 11px;
    }

    .ligame-task-center-head {
        grid-template-columns:
            minmax(0, 1fr) 52px;
    }

    .ligame-task-circle-progress {
        width: 52px;
        height: 52px;
    }

    .ligame-task-head-copy strong {
        font-size: 14px;
    }

    .ligame-task-row {
        grid-template-columns:
            34px minmax(0, 1fr) auto;

        gap: 8px;
    }

    .ligame-task-row-icon {
        width: 34px;
        height: 34px;
    }

    .ligame-task-user small {
        max-width: 105px;
    }
}

/* Tablet ve masaüstü */

@media (min-width: 768px) {
    .ligame-task-center {
        left: auto;
        right: 18px;
        top: 82px;
        bottom: auto;

        width: 380px;
        max-height: calc(100vh - 100px);

        padding: 14px;

        border: 1px solid var(--border);
        border-radius: 10px;

        box-shadow:
            0 24px 65px rgba(0, 0, 0, .34);

        opacity: 0;

        transform:
            translateY(-10px)
            scale(.985);

        transition:
            opacity .22s ease,
            transform .22s ease,
            visibility .22s ease;
    }

    .ligame-task-center.open {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }

    .ligame-task-drag-line {
        display: none;
    }

    .ligame-task-close {
        top: 0;
    }

    .ligame-task-list {
        max-height: 330px;
    }

    .ligame-task-center-open {
        overflow: auto;
    }

    .ligame-task-overlay {
        background: rgba(0, 0, 0, .24);

        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ligame-profile-btn.has-mission-alert::before,
    .ligame-task-badge {
        animation: none;
    }
}

.ligame-task-button-icon {
    color: currentColor;
}

.ligame-profile-btn .ligame-task-button-icon {
    opacity: .92;
}

.ligame-profile-btn:hover .ligame-task-button-icon {
    opacity: 1;
}

/* =========================================================
   LIGAME | GÖREVLER SAYFASI
========================================================= */

.mission-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 14px;
    padding: 18px;

    border: 1px solid var(--border);
    border-radius: 10px;

    background:
        radial-gradient(
            circle at top right,
            rgba(255, 185, 56, .13),
            transparent 45%
        ),
        var(--card-gradient);

    box-shadow:
        0 12px 30px var(--shadow-soft);
}

.mission-page-head > div:first-child {
    min-width: 0;
}

.mission-page-head span {
    display: block;

    color: var(--gold);

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.6px;
}

.mission-page-head h1 {
    margin: 5px 0;

    color: var(--white);

    font-family: "Bebas Neue", cursive;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 1.3px;
}

.mission-page-head p {
    margin: 0;

    color: var(--gray);

    font-size: 11px;
    line-height: 1.6;
}

.mission-page-head-icon {
    width: 62px;
    height: 62px;

    flex: 0 0 62px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(255, 185, 56, .20);
    border-radius: 10px;

    background: rgba(255, 185, 56, .08);

    font-size: 28px;
}

/* Sekmeler */

.mission-tabs {
    display: flex;
    gap: 8px;

    margin-bottom: 16px;
    padding-bottom: 4px;

    overflow-x: auto;

    scrollbar-width: none;
}

.mission-tabs::-webkit-scrollbar {
    display: none;
}

.mission-tabs button {
    min-width: 100px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 10px 14px;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--card-gradient);
    color: var(--gray);

    font-family: inherit;

    cursor: pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.mission-tabs button strong {
    font-size: 10px;
    font-weight: 900;
}

.mission-tabs button small {
    display: grid;
    place-items: center;

    min-width: 22px;
    height: 18px;

    padding: 0 5px;

    border-radius: 999px;

    background: var(--card-2);
    color: var(--gray);

    font-size: 7px;
    font-weight: 900;
}

.mission-tabs button.active {
    color: var(--card);

    background: var(--green);
    border-color: var(--green);
}

.mission-tabs button.active small {
    color: var(--white);
    background: rgba(0, 0, 0, .20);
}

/* Panel */

.mission-period-panel {
    display: none;
}

.mission-period-panel.active {
    display: block;

    animation: missionPanelFade .22s ease;
}

.mission-section-head {
    margin-bottom: 10px;
}

.mission-section-head h2 {
    margin: 0;
}

.mission-section-head > span {
    color: var(--gray);
}

/* Liste */

.mission-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.mission-list-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;

    padding: 14px;

    border: 1px solid var(--border);
    border-radius: 0;

    background: var(--card-gradient);

    box-shadow:
        0 9px 24px var(--shadow-soft);

    transition:
        transform .2s ease,
        border-color .2s ease;
}

.mission-list-item:hover {
    transform: translateY(-2px);
}

.mission-list-item.completed {
    border-color: rgba(61, 255, 142, .22);
}

.mission-list-icon {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 10px;

    background: var(--card-2);

    font-size: 19px;
}

.mission-list-item.completed
.mission-list-icon {
    color: #07130c;

    background: var(--green);
    border-color: var(--green);

    font-size: 14px;
    font-weight: 950;
}

.mission-list-main {
    min-width: 0;
}

.mission-list-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.mission-list-title {
    min-width: 0;
}

.mission-list-title > span {
    display: block;

    color: var(--gray);

    font-size: 7px;
    font-weight: 950;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.mission-list-title h3 {
    margin: 4px 0 0;

    color: var(--white);

    font-size: 13px;
    font-weight: 900;
    line-height: 1.4;
}

.mission-list-xp {
    flex: 0 0 auto;

    padding: 5px 8px;

    border: 1px solid rgba(255, 185, 56, .18);
    border-radius: 7px;

    background: rgba(255, 185, 56, .08);
    color: var(--gold);

    font-size: 9px;
    font-weight: 950;
    white-space: nowrap;
}

.mission-list-description {
    margin: 7px 0 0;

    color: var(--gray);

    font-size: 10px;
    line-height: 1.6;
}

.mission-list-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 11px;

    color: var(--gray);

    font-size: 8px;
    font-weight: 850;
}

.mission-list-progress-head strong {
    color: var(--white);

    font-size: 9px;
}

.mission-list-progress {
    width: 100%;
    height: 5px;

    overflow: hidden;

    margin-top: 6px;

    border-radius: 999px;

    background: var(--card-2);
}

.mission-list-progress > span {
    display: block;

    height: 100%;

    border-radius: inherit;

    background: var(--green);

    transition: width .35s ease;
}

.mission-list-footer {
    min-height: 15px;

    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;

    margin-top: 7px;
}

.mission-list-footer > small {
    color: var(--gray);

    font-size: 7px;
}

.mission-go-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--green);
    text-decoration: none;

    font-size: 9px;
    font-weight: 950;
}

.mission-go-button b {
    font-size: 14px;
}

.mission-status {
    color: var(--gray);

    font-size: 8px;
    font-weight: 850;
}

.mission-status.completed {
    color: var(--green);
}

/* Boş durum */

.mission-empty {
    padding: 38px 18px;

    border: 1px dashed var(--border);
    border-radius: 10px;

    background: var(--card-gradient);

    text-align: center;
}

.mission-empty > div {
    font-size: 32px;
}

.mission-empty strong {
    display: block;

    margin-top: 10px;

    color: var(--white);

    font-size: 13px;
}

.mission-empty p {
    margin: 5px 0 0;

    color: var(--gray);

    font-size: 10px;
    line-height: 1.6;
}

@keyframes missionPanelFade {
    from {
        opacity: 0;
        transform: translateY(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobil */

@media (max-width: 520px) {
    .mission-page-head {
        padding: 15px;
    }

    .mission-page-head h1 {
        font-size: 32px;
    }

    .mission-page-head p {
        max-width: 230px;

        font-size: 10px;
    }

    .mission-page-head-icon {
        width: 52px;
        height: 52px;

        flex-basis: 52px;

        font-size: 24px;
    }

    .mission-tabs button {
        min-width: 92px;

        padding: 9px 12px;
    }

    .mission-list-item {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 10px;

        padding: 12px;
    }

    .mission-list-icon {
        width: 40px;
        height: 40px;

        font-size: 17px;
    }

    .mission-list-title h3 {
        font-size: 11px;
    }

    .mission-list-description {
        font-size: 9px;
    }

    .mission-list-xp {
        padding: 5px 7px;

        font-size: 8px;
    }
}

/* Masaüstü */

@media (min-width: 900px) {
    .mission-list-item {
        grid-template-columns: 52px minmax(0, 1fr);

        padding: 16px;
    }

    .mission-list-icon {
        width: 52px;
        height: 52px;
    }

    .mission-list-title h3 {
        font-size: 14px;
    }

    .mission-list-description {
        font-size: 11px;
    }
}



/* =========================================================
   GÖREV BUTONU İÇİN SEVİYE
========================================================= */

.ligame-task-button-level {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1;
}

.ligame-task-button-level small {
    display: block;
    margin-bottom: 2px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.5px;
    opacity: 0.72;
}

.ligame-task-button-level strong {
    display: block;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.ligame-profile-btn.has-mission-alert .ligame-task-button-level {
    color: inherit;
}

.ligame-profile-btn.all-missions-done .ligame-task-button-level {
    color: inherit;
}

/* =========================================================
   POPUP XP SEVİYE ALANI
========================================================= */

.ligame-task-xp-panel {
    margin: 0;
    padding: 14px 0;
}

.ligame-task-xp-head {
    display: flex;
    align-items: center;
    gap: 10px;
}



.ligame-task-xp-copy {
    flex: 1;
    min-width: 0;
}

.ligame-task-xp-copy strong {
    display: block;
    color: var(--text-color);
    font-size: 14px;
    font-weight: 850;
}


.ligame-task-xp-total {
    flex-shrink: 0;
    color: var(--text-color);
    font-size: 12px;
    font-weight: 800;
}

.ligame-task-xp-progress {
    width: 100%;
    height: 7px;
    margin-top: 12px;
    overflow: hidden;
    border-radius: 10px;
    background: rgba(148, 163, 184, 0.18);
}

.ligame-task-xp-progress i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        #ef4444,
        #f97316
    );
    transition: width 0.35s ease;
}

.ligame-task-xp-detail {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 7px;
}

.ligame-task-xp-detail span,
.ligame-task-xp-detail strong {
    color: var(--muted-color, #94a3b8);
    font-size: 10px;
    font-weight: 700;
}

/* Açık tema */

body.light-theme .ligame-task-xp-panel,
html.light .ligame-task-xp-panel {
    background: rgba(248, 250, 252, 0.95);
    border-color: rgba(15, 23, 42, 0.1);
}

body.light-theme .ligame-task-xp-copy strong,
body.light-theme .ligame-task-xp-total,
html.light .ligame-task-xp-copy strong,
html.light .ligame-task-xp-total {
    color: #111827;
}

body.light-theme .ligame-task-xp-copy small,
body.light-theme .ligame-task-xp-detail span,
body.light-theme .ligame-task-xp-detail strong,
html.light .ligame-task-xp-copy small,
html.light .ligame-task-xp-detail span,
html.light .ligame-task-xp-detail strong {
    color: #64748b;
}

/* Mobil */

@media (max-width: 600px) {
    .ligame-task-button-level small {
        font-size: 7px;
    }

    .ligame-task-button-level strong {
        font-size: 14px;
    }

    .ligame-task-xp-panel {
        margin: 0;
        padding: 12px 0;
    }


    .ligame-task-xp-copy strong {
        font-size: 13px;
    }

    .ligame-task-xp-total {
        font-size: 11px;
    }
}



/* ===================================
   KELİME OYUNU | LEVEL UP
=================================== */

.word-level-up-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 18px;

    background: rgba(0, 0, 0, .78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: .3s ease;
}

.word-level-up-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.word-level-up-card {
    position: relative;

    width: 100%;
    max-width: 390px;

    overflow: hidden;

    padding: 34px 24px 24px;

    border: 1px solid rgba(255, 185, 56, .38);
    border-radius: 10px;

    background:
        radial-gradient(
            circle at top,
            rgba(255, 185, 56, .22),
            transparent 48%
        ),
        var(--card-gradient);

    text-align: center;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, .55),
        0 0 45px rgba(255, 185, 56, .13);

    transform: scale(.82) translateY(28px);

    transition: .35s cubic-bezier(.2, .9, .2, 1);
}

.word-level-up-overlay.show .word-level-up-card {
    transform: scale(1) translateY(0);
}

.word-level-up-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;

    width: 34px;
    height: 34px;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--card-2);
    color: var(--white);

    font-size: 22px;
    cursor: pointer;
}

.word-level-up-label {
    position: relative;
    z-index: 2;

    display: block;

    color: var(--gold);

    font-size: 10px;
    font-weight: 950;
    letter-spacing: 2px;
}

.word-level-up-icon {
    position: relative;
    z-index: 2;

    margin: 15px 0 10px;

    font-size: 54px;

    animation: wordLevelTrophy 1.2s ease infinite alternate;
}

.word-level-up-levels {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin: 10px 0;
}

.word-level-up-levels strong {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(255, 185, 56, .12);
    border: 1px solid rgba(255, 185, 56, .32);

    color: var(--gold);

    font-family: 'Bebas Neue', cursive;
    font-size: 38px;
}

.word-level-up-levels span {
    color: var(--green);
    font-size: 26px;
}

.word-level-up-card h2 {
    position: relative;
    z-index: 2;

    margin: 14px 0 7px;

    color: var(--white);

    font-family: 'Bebas Neue', cursive;
    font-size: 30px;
    letter-spacing: 1px;
}

.word-level-up-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--green);

    font-size: 14px;
    font-weight: 900;
}

.word-level-up-card small {
    position: relative;
    z-index: 2;

    display: block;

    margin-top: 7px;

    color: var(--gray);
    font-size: 11px;
}

.word-level-up-button {
    position: relative;
    z-index: 2;

    width: 100%;
    height: 48px;

    margin-top: 22px;

    border: 0;
    border-radius: 8px;

    background: linear-gradient(135deg, #e5101d, #179145);

    color: var(--white);

    font-weight: 950;
    cursor: pointer;
}

.word-level-confetti {
    position: absolute;
    inset: 0;

    overflow: hidden;
    pointer-events: none;
}

.word-level-confetti i {
    position: absolute;
    top: -24px;

    width: 8px;
    height: 14px;

    background: var(--gold);

    animation: wordConfettiFall 2.4s linear forwards;
}

.word-level-confetti i:nth-child(3n) {
    background: var(--green);
}

.word-level-confetti i:nth-child(3n + 1) {
    background: var(--red);
}

@keyframes wordConfettiFall {
    from {
        transform: translateY(-30px) rotate(0deg);
        opacity: 1;
    }

    to {
        transform: translateY(520px) rotate(720deg);
        opacity: 0;
    }
}

@keyframes wordLevelTrophy {
    from {
        transform: translateY(0) scale(1);
    }

    to {
        transform: translateY(-6px) scale(1.08);
    }
}


.culture-badge-xp-summary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.culture-badge-xp-summary > div {
    padding: 14px 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
}

.culture-badge-xp-summary span {
    display: block;
    margin-bottom: 5px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0.65;
}

.culture-badge-xp-summary strong {
    display: block;
    font-size: 16px;
}

.culture-badge-collection-bonus {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.04);
}

.culture-badge-collection-bonus.completed {
    border-color: rgba(245, 190, 50, 0.45);
    background: rgba(245, 190, 50, 0.09);
}

.culture-badge-collection-bonus.locked {
    opacity: 0.8;
}

.culture-badge-collection-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    font-size: 24px;
    background: rgba(255, 255, 255, 0.07);
}

.culture-badge-collection-bonus span {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    opacity: 0.65;
}

.culture-badge-collection-bonus strong {
    display: block;
    font-size: 14px;
}

.culture-badge-collection-bonus small {
    display: block;
    margin-top: 5px;
    line-height: 1.5;
    opacity: 0.7;
}

.culture-wall-badge-card {
    position: relative;
}

.culture-wall-badge-xp {
    position: absolute;
    top: 40px;
    right: 14px;
    padding: 5px 8px;
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
    border: 1px solid rgba(245, 190, 50, 0.28);
    background: rgba(245, 190, 50, 0.1);
}

.culture-wall-badge-card.locked .culture-wall-badge-xp {
    opacity: 0.55;
}

@media (max-width: 640px) {
    .culture-badge-xp-summary {
        grid-template-columns: 1fr;
    }

    .culture-badge-collection-bonus {
        align-items: flex-start;
    }

    .culture-wall-badge-xp {
        top: 35px;
        right: 12px;
    }
}


.culture-reward-toast {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 76px);
    left: 50%;
    z-index: 99999;
    display: flex;
    align-items: center;
    gap: 12px;
    width: calc(100% - 28px);
    max-width: 410px;
    min-height: 76px;
    padding: 12px 16px;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transform: translate(-50%, -145%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 18px;
    background: rgba(20, 24, 31, 0.94);
    box-shadow:
        0 18px 45px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition:
        transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.culture-reward-toast.show {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, 0);
}

.culture-reward-toast.collection {
    border-color: rgba(245, 190, 50, 0.5);
    background:
        linear-gradient(
            135deg,
            rgba(66, 49, 15, 0.97),
            rgba(25, 28, 35, 0.97)
        );
}

.culture-reward-toast-icon {
    display: grid;
    place-items: center;
    flex: 0 0 50px;
    width: 50px;
    height: 50px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 27px;
    line-height: 1;
}

.culture-reward-toast.collection .culture-reward-toast-icon {
    border-color: rgba(245, 190, 50, 0.34);
    background: rgba(245, 190, 50, 0.13);
}

.culture-reward-toast-content {
    min-width: 0;
    flex: 1;
}

.culture-reward-toast-content span {
    display: block;
    margin-bottom: 2px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    color: rgba(255, 255, 255, 0.58);
    text-transform: uppercase;
}

.culture-reward-toast-content strong {
    display: block;
    overflow: hidden;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
    color: #ffffff;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.culture-reward-toast-content small {
    display: block;
    margin-top: 3px;
    font-size: 12px;
    font-weight: 800;
    color: #f5be32;
}

.culture-reward-toast-line {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
}

.culture-reward-toast-line::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    transform-origin: left;
    transform: scaleX(0);
    background: #f5be32;
}

.culture-reward-toast.show .culture-reward-toast-line::after {
    animation: cultureRewardToastProgress 2.6s linear forwards;
}

@keyframes cultureRewardToastProgress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (max-width: 640px) {
    .culture-reward-toast {
        top: calc(env(safe-area-inset-top, 0px) + 66px);
        width: calc(100% - 20px);
        min-height: 72px;
        padding: 11px 13px;
        border-radius: 16px;
    }

    .culture-reward-toast-icon {
        flex-basis: 46px;
        width: 46px;
        height: 46px;
        border-radius: 13px;
        font-size: 24px;
    }

    .culture-reward-toast-content strong {
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .culture-reward-toast {
        transition: opacity 0.2s ease;
        transform: translate(-50%, 0);
    }

    .culture-reward-toast-line::after {
        animation: none !important;
    }
}

.culture-tour-rewards {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid var(--card);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
}

.culture-tour-rewards-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.culture-tour-rewards-head > div {
    min-width: 0;
}

.culture-tour-rewards-head span {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.09em;
    opacity: 0.62;
}

.culture-tour-rewards-head strong {
    display: block;
    font-size: 18px;
}

.culture-tour-rewards-head > b {
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(245, 190, 50, 0.3);
    border-radius: 10px;
    background: rgba(245, 190, 50, 0.1);
    font-size: 13px;
    color: #f5be32;
}

.culture-tour-badge-list {
    display: grid;
    gap: 10px;
}

.culture-tour-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    background: var(--card);
}

.culture-tour-badge-icon {
    display: grid;
    place-items: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.07);
    font-size: 24px;
}

.culture-tour-badge-info {
    min-width: 0;
    flex: 1;
}

.culture-tour-badge-info span {
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    opacity: 0.55;
}

.culture-tour-badge-info strong {
    display: block;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.culture-tour-badge-item > b {
    flex: 0 0 auto;
    font-size: 12px;
    color: #f5be32;
}

.culture-tour-collection-bonus {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(245, 190, 50, 0.4);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(245, 190, 50, 0.14),
            rgba(245, 190, 50, 0.04)
        );
}

.culture-tour-collection-icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(245, 190, 50, 0.13);
    font-size: 25px;
}

.culture-tour-collection-bonus > div:last-child {
    min-width: 0;
    flex: 1;
}

.culture-tour-collection-bonus span {
    display: block;
    margin-bottom: 3px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.09em;
    color: #f5be32;
}

.culture-tour-collection-bonus strong {
    display: block;
    font-size: 14px;
}

.culture-tour-collection-bonus small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
    color: #f5be32;
}

@media (max-width: 640px) {
    .culture-tour-rewards {
        padding: 14px;
        border-radius: 16px;
    }

    .culture-tour-rewards-head {
        align-items: flex-start;
    }

    .culture-tour-rewards-head strong {
        font-size: 16px;
    }

    .culture-tour-badge-item {
        padding: 10px;
    }

    .culture-tour-badge-icon {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 22px;
    }

    .culture-tour-badge-info strong {
        font-size: 13px;
    }
}


.ligame-sidebar-wallet-group {
    padding-bottom: 18px;
    margin-bottom: 6px;
}

.ligame-sidebar-wallet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    padding: 0 2px;
}

.ligame-sidebar-wallet-row span,
.ligame-sidebar-wallet-row strong {
    font-family: inherit;
    font-size: 14px;
    line-height: 1;
}

.ligame-sidebar-wallet-row span {
    font-weight: 500;
}

.ligame-sidebar-wallet-row strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.ligame-mobile-user-ligamil {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ligame-mobile-user-ligamil b {
    font: inherit;
    font-weight: 700;
}


.ligame-task-wallet-line {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-bottom: 8px;
    font-size: 11px;
    line-height: 1;
}

.ligame-task-wallet-line span {
    opacity: 0.58;
    font-weight: 500;
}

.ligame-task-wallet-line strong {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}


.word-level-up-ligamil {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: fit-content;
    margin: 8px auto 14px;
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 11px;
    line-height: 1;
}

.word-level-up-ligamil span {
    opacity: 0.62;
    font-weight: 500;
}

.word-level-up-ligamil strong {
    font-size: 12px;
    font-weight: 800;
}


/* ===================================
   LIGAME | PROFİL MERKEZİ
=================================== */

.profile-center-page{
    padding-bottom:40px;
}

.profile-center-hero{
    position:relative;
    overflow:hidden;
    padding:26px;
    border:1px solid var(--border);
    background:
        radial-gradient(circle at top right, rgba(61,255,142,.18), transparent 36%),
        var(--card-gradient);
    box-shadow:0 16px 38px var(--shadow-soft);
}

.profile-center-user{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    gap:18px;
}

.profile-center-avatar{
    width:76px;
    height:76px;
    flex:0 0 76px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:3px solid rgba(61,255,142,.32);
    border-radius:50%;
    background:var(--card-2);
    color:var(--green);
    font-size:28px;
    font-weight:900;
}

.profile-center-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-center-user-info{
    min-width:0;
    flex:1;
}

.profile-center-kicker{
    display:block;
    margin-bottom:5px;
    color:var(--green);
    font-size:11px;
    font-weight:900;
    letter-spacing:1.4px;
}

.profile-center-user-info h1{
    margin:0;
    color:var(--white);
    font-size:clamp(24px,4vw,34px);
    line-height:1.05;
}

.profile-center-user-info p{
    margin:8px 0 0;
    color:var(--gray);
    font-size:13px;
}

.profile-level-panel{
    position:relative;
    z-index:1;
    margin-top:24px;
    padding:18px;
    border:1px solid var(--border);
    background:var(--glass-bg);
}

.profile-level-head,
.profile-level-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.profile-level-head strong{
    color:var(--white);
    font-size:16px;
}

.profile-level-head span,
.profile-level-foot span{
    color:var(--gray);
    font-size:12px;
}

.profile-level-bar{
    height:9px;
    margin:13px 0 10px;
    overflow:hidden;
    background:var(--card-2);
}

.profile-level-bar span{
    display:block;
    height:100%;
    background:linear-gradient(90deg,var(--green-dark),var(--green));
}

.profile-level-foot strong{
    color:var(--green);
    font-size:12px;
}

.profile-summary-grid,
.profile-stat-summary-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.profile-summary-grid{
    margin-top:16px;
}

.profile-stat-summary-grid{
    padding:16px;
}

.profile-summary-card{
    padding:16px;
    border:1px solid var(--border);
    background:var(--glass-bg);
}

.profile-summary-card span{
    display:block;
    color:var(--gray);
    font-size:11px;
}

.profile-summary-card strong{
    display:block;
    margin-top:6px;
    color:var(--white);
    font-size:21px;
}

.profile-center-tabs,
.profile-stat-tabs{
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
}

.profile-center-tabs{
    margin:22px 0 16px;
}

.profile-stat-tabs{
    margin-bottom:14px;
}

.profile-center-tabs::-webkit-scrollbar,
.profile-stat-tabs::-webkit-scrollbar{
    display:none;
}

.profile-center-tabs button,
.profile-stat-tabs button{
    flex:0 0 auto;
    padding:11px 15px;
    border:1px solid var(--border);
    background:var(--glass-bg);
    color:var(--gray);
    font:inherit;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
}

.profile-center-tabs button.active,
.profile-stat-tabs button.active{
    border-color:rgba(61,255,142,.38);
    background:rgba(61,255,142,.11);
    color:var(--green);
}

.profile-tab-panel,
.profile-stat-panel{
    display:none;
}

.profile-tab-panel.active,
.profile-stat-panel.active{
    display:block;
}

.profile-menu-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:13px;
}

.profile-menu-card{
    min-height:112px;
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px;
    border:1px solid var(--border);
    background:var(--glass-bg);
    color:inherit;
    text-decoration:none;
    transition:.2s ease;
}

.profile-menu-card:hover{
    transform:translateY(-2px);
    border-color:rgba(61,255,142,.30);
    background:rgba(61,255,142,.06);
}

button.profile-menu-card{
    width:100%;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

.profile-menu-card.disabled{
    cursor:default;
    opacity:.55;
}

.profile-menu-icon{
    width:48px;
    height:48px;
    flex:0 0 48px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    background:var(--card-2);
    font-size:22px;
}

.profile-menu-content{
    min-width:0;
    flex:1;
}

.profile-menu-content strong{
    display:block;
    color:var(--white);
    font-size:14px;
}

.profile-menu-content span{
    display:block;
    margin-top:5px;
    color:var(--gray);
    font-size:11px;
    line-height:1.5;
}

.profile-menu-arrow{
    color:var(--gray);
    font-size:18px;
}

.profile-section-card,
.profile-match-list-card,
.profile-match-detail-card{
    border:1px solid var(--border);
    background:var(--card-gradient);
    box-shadow:0 10px 24px var(--shadow-soft);
}

.profile-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:18px;
    border-bottom:1px solid var(--border);
}

.profile-section-head h2{
    margin:0;
    color:var(--white);
    font-size:16px;
}

.profile-section-head p{
    margin:5px 0 0;
    color:var(--gray);
    font-size:10px;
}

.profile-section-head > span{
    color:var(--gray);
    font-size:11px;
}

.ligamil-history-item{
    display:flex;
    align-items:center;
    gap:13px;
    padding:15px 18px;
    border-bottom:1px solid var(--border);
}

.ligamil-history-item:last-child{
    border-bottom:0;
}

.ligamil-history-icon{
    width:42px;
    height:42px;
    flex:0 0 42px;
    display:grid;
    place-items:center;
    background:var(--card-2);
    font-size:19px;
}

.ligamil-history-main{
    min-width:0;
    flex:1;
}

.ligamil-history-main strong{
    display:block;
    color:var(--white);
    font-size:13px;
}

.ligamil-history-main span,
.ligamil-history-value span{
    display:block;
    margin-top:4px;
    color:var(--gray);
    font-size:10px;
}

.ligamil-history-value{
    text-align:right;
}

.ligamil-history-value strong{
    display:block;
    font-size:14px;
}

.ligamil-history-value .positive{
    color:var(--green);
}

.ligamil-history-value .negative{
    color:var(--red);
}

.profile-empty{
    padding:34px 20px;
    color:var(--gray);
    text-align:center;
}

.profile-empty div{
    margin-bottom:10px;
    font-size:30px;
}

.profile-empty strong{
    display:block;
    color:var(--white);
    font-size:13px;
}

.profile-empty p{
    margin:6px 0 0;
    font-size:11px;
}

.profile-sport-history{
    display:grid;
    grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
    gap:14px;
    margin-top:14px;
}

.profile-match-list{
    max-height:610px;
    overflow-y:auto;
}

.profile-match-row{
    width:100%;
    min-height:102px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 58px auto;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    border:0;
    border-bottom:1px solid var(--border);
    background:transparent;
    color:var(--white);
    text-align:left;
    cursor:pointer;
    transition:.2s ease;
}

.profile-match-row:last-child{
    border-bottom:0;
}

.profile-match-row:hover,
.profile-match-row.active{
    background:rgba(61,255,142,.07);
}

.profile-match-row.active{
    box-shadow:inset 3px 0 0 var(--green);
}

.profile-match-row-main{
    min-width:0;
}

.profile-match-row-main span,
.profile-match-row-main small{
    display:block;
    color:var(--gray);
    font-size:9px;
}

.profile-match-row-main strong{
    display:block;
    margin:5px 0;
    overflow:hidden;
    color:var(--white);
    font-size:12px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.profile-match-row-main em,
.profile-match-detail-head em{
    color:var(--gray);
    font-style:normal;
}

.profile-match-row-score{
    text-align:center;
}

.profile-match-row-score strong,
.profile-match-row-score span{
    display:block;
}

.profile-match-row-score strong{
    color:var(--green);
    font-family:'Bebas Neue',cursive;
    font-size:25px;
    line-height:1;
}

.profile-match-row-score span{
    margin-top:4px;
    color:var(--gray);
    font-size:8px;
}

.profile-match-row-status{
    padding:6px 8px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}

.profile-match-row-status.success,
.profile-mvp-result.success{
    color:var(--green);
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.22);
}

.profile-match-row-status.danger,
.profile-mvp-result.danger{
    color:var(--red);
    background:rgba(255,95,87,.10);
    border:1px solid rgba(255,95,87,.22);
}

.profile-match-detail-card{
    min-width:0;
}

.profile-match-detail{
    display:none;
    position:relative;
    padding:18px;
}

.profile-match-detail.active{
    display:block;
}

.profile-match-detail-close{
    display:none;
}

.profile-match-detail-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}

.profile-match-detail-head > div:first-child > span{
    color:var(--green);
    font-size:9px;
    font-weight:900;
}

.profile-match-detail-head h3{
    margin:6px 0 4px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:28px;
    letter-spacing:.8px;
}

.profile-match-detail-head p{
    margin:0;
    color:var(--gray);
    font-size:10px;
}

.profile-match-total-point{
    flex:0 0 auto;
    text-align:right;
}

.profile-match-total-point strong,
.profile-match-total-point span{
    display:block;
}

.profile-match-total-point strong{
    color:var(--green);
    font-family:'Bebas Neue',cursive;
    font-size:34px;
    line-height:1;
}

.profile-match-total-point span{
    margin-top:4px;
    color:var(--gray);
    font-size:8px;
}

.profile-match-breakdown{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin:14px 0;
}

.profile-match-breakdown > div{
    padding:11px;
    border:1px solid var(--border);
    background:var(--card-2);
}

.profile-match-breakdown span,
.profile-match-breakdown strong{
    display:block;
}

.profile-match-breakdown span{
    color:var(--gray);
    font-size:8px;
}

.profile-match-breakdown strong{
    margin-top:5px;
    color:var(--white);
    font-size:13px;
}

.profile-mvp-compare{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:center;
    gap:10px;
    margin-bottom:14px;
    padding:14px;
    border:1px solid rgba(255,185,56,.20);
    background:rgba(255,185,56,.06);
}

.profile-mvp-compare > div:last-child{
    text-align:right;
}

.profile-mvp-compare span,
.profile-mvp-compare strong{
    display:block;
}

.profile-mvp-compare span{
    color:var(--gray);
    font-size:8px;
}

.profile-mvp-compare strong{
    margin-top:4px;
    color:var(--white);
    font-size:11px;
}

.profile-mvp-result{
    padding:7px 9px;
    border-radius:999px;
    font-size:8px;
    font-weight:900;
    text-align:center;
    white-space:nowrap;
}

.profile-player-table-wrap{
    overflow-x:auto;
}

.profile-player-table{
    width:100%;
    min-width:620px;
    border-collapse:collapse;
}

.profile-player-table th,
.profile-player-table td{
    padding:10px;
    border-bottom:1px solid var(--border);
    color:var(--gray);
    font-size:9px;
    text-align:center;
}

.profile-player-table th{
    color:var(--gray);
    font-size:8px;
    font-weight:900;
    text-transform:uppercase;
}

.profile-player-table th:first-child,
.profile-player-table td:first-child{
    text-align:left;
}

.profile-player-cell{
    display:flex;
    align-items:center;
    gap:8px;
}

.profile-player-mini-avatar{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:50%;
    background:var(--card-2);
}

.profile-player-mini-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.profile-player-cell strong,
.profile-player-cell span{
    display:block;
}

.profile-player-cell strong{
    color:var(--white);
    font-size:10px;
}

.profile-player-cell span{
    margin-top:3px;
    color:var(--gray);
    font-size:8px;
}

.profile-earned-point{
    color:var(--green);
}

.profile-match-mobile-overlay{
    display:none;
}

@media(max-width:820px){
    .profile-center-hero{
        padding:20px 16px;
    }

    .profile-center-user{
        align-items:flex-start;
    }

    .profile-center-avatar{
        width:64px;
        height:64px;
        flex-basis:64px;
    }

    .profile-summary-grid,
    .profile-stat-summary-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .profile-menu-grid{
        grid-template-columns:1fr;
    }

    .profile-menu-card{
        min-height:96px;
    }

    .profile-sport-history{
        display:block;
    }

    .profile-match-list{
        max-height:460px;
    }

    .profile-match-detail-card{
        position:fixed;
        left:10px;
        right:10px;
        bottom:10px;
        z-index:2201;
        max-height:86vh;
        overflow-y:auto;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(105%);
        transition:.28s ease;
    }

    .profile-match-detail-open .profile-match-detail-card{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }

    .profile-match-detail-close{
        position:absolute;
        top:10px;
        right:10px;
        z-index:2;
        width:34px;
        height:34px;
        display:grid;
        place-items:center;
        border:1px solid var(--border);
        border-radius:50%;
        background:var(--card-2);
        color:var(--white);
        font-size:22px;
        cursor:pointer;
    }

    .profile-match-mobile-overlay{
        position:fixed;
        inset:0;
        z-index:2200;
        display:block;
        background:rgba(0,0,0,.68);
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transition:.25s ease;
    }

    .profile-match-mobile-overlay.open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }

    .profile-match-detail-head{
        padding-right:42px;
    }

    .profile-mvp-compare{
        grid-template-columns:1fr;
        text-align:left;
    }

    .profile-mvp-compare > div:last-child{
        text-align:left;
    }
}

@media(max-width:520px){
    .profile-level-head,
    .profile-level-foot{
        align-items:flex-start;
        flex-direction:column;
    }

    .profile-match-row{
        grid-template-columns:minmax(0,1fr) 50px;
    }

    .profile-match-row-status{
        grid-column:1 / -1;
        justify-self:start;
    }

    .profile-match-detail{
        padding:16px 12px;
    }

    .profile-match-detail-head{
        flex-direction:column;
    }

    .profile-match-total-point{
        text-align:left;
    }

    .profile-match-breakdown{
        grid-template-columns:1fr;
    }
}


/* ===================================
   PROFİL MERKEZİ | KÜLTÜR GEÇMİŞİ
=================================== */

.profile-culture-history-layout{
    display:grid;
    grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);
    gap:14px;
    margin-top:14px;
}

.profile-culture-list-card,
.profile-culture-detail-card{
    min-width:0;
    padding:16px;
    border:1px solid var(--border);
    background:var(--card-gradient);
    box-shadow:0 12px 28px var(--shadow-soft);
}

.profile-culture-list{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.profile-culture-row{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:13px;
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--white);
    text-align:left;
    cursor:pointer;
    transition:.2s ease;
}

.profile-culture-row:hover,
.profile-culture-row.active{
    border-color:rgba(255,95,87,.34);
    background:
        linear-gradient(90deg,rgba(255,95,87,.09),transparent),
        var(--card-2);
}

.profile-culture-row span,
.profile-culture-row strong,
.profile-culture-row small{
    display:block;
}

.profile-culture-row > div:first-child{
    min-width:0;
}

.profile-culture-row span{
    color:var(--red);
    font-size:8px;
    font-weight:900;
    letter-spacing:.7px;
}

.profile-culture-row strong{
    margin-top:5px;
    overflow:hidden;
    font-size:12px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.profile-culture-row small{
    margin-top:5px;
    color:var(--gray);
    font-size:9px;
}

.profile-culture-rate{
    text-align:right;
}

.profile-culture-rate strong{
    color:var(--red);
    font-family:'Bebas Neue',cursive;
    font-size:24px;
    line-height:1;
}

.profile-culture-rate span{
    margin-top:4px;
    color:var(--gray);
    font-size:7px;
    text-transform:uppercase;
}

.profile-culture-detail{
    display:none;
}

.profile-culture-detail.active{
    display:block;
}

.profile-culture-detail-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding-bottom:15px;
    border-bottom:1px solid var(--border);
}

.profile-culture-detail-head > div:first-child{
    min-width:0;
}

.profile-culture-detail-head span{
    color:var(--red);
    font-size:8px;
    font-weight:950;
    letter-spacing:1.1px;
}

.profile-culture-detail-head h3{
    margin:6px 0 4px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:26px;
    letter-spacing:.8px;
}

.profile-culture-detail-head p{
    margin:0;
    color:var(--gray);
    font-size:10px;
}

.profile-culture-total-point{
    flex:0 0 auto;
    text-align:right;
}

.profile-culture-total-point strong,
.profile-culture-total-point span{
    display:block;
}

.profile-culture-total-point strong{
    color:var(--red);
    font-family:'Bebas Neue',cursive;
    font-size:34px;
    line-height:1;
}

.profile-culture-total-point span{
    margin-top:4px;
    color:var(--gray);
    font-size:8px;
}

.profile-culture-detail-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:15px;
}

.profile-culture-detail-grid > div{
    padding:12px 8px;
    border:1px solid var(--border);
    background:var(--card-2);
    text-align:center;
}

.profile-culture-detail-grid span,
.profile-culture-detail-grid strong{
    display:block;
}

.profile-culture-detail-grid span{
    color:var(--gray);
    font-size:8px;
    font-weight:850;
    text-transform:uppercase;
}

.profile-culture-detail-grid strong{
    margin-top:6px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:25px;
}

.profile-culture-progress{
    margin-top:16px;
    padding:14px;
    border:1px solid rgba(255,95,87,.18);
    background:rgba(255,95,87,.06);
}

.profile-culture-progress-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:9px;
}

.profile-culture-progress-head span{
    color:var(--gray);
    font-size:10px;
    font-weight:850;
}

.profile-culture-progress-head strong{
    color:var(--red);
    font-size:12px;
}

.profile-culture-progress > div:last-child{
    height:8px;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--card-2);
}

.profile-culture-progress > div:last-child span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--red),var(--gold));
}

@media(max-width:820px){
    .profile-culture-history-layout{
        grid-template-columns:1fr;
    }

    .profile-culture-detail-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:480px){
    .profile-culture-list-card,
    .profile-culture-detail-card{
        padding:12px;
    }

    .profile-culture-detail-head h3{
        font-size:22px;
    }

    .profile-culture-total-point strong{
        font-size:29px;
    }
}


/* ===================================
   PROFİL MERKEZİ | KÜLTÜR BAŞARIMLARI
=================================== */

.profile-achievement-summary{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-bottom:14px;
}

.profile-achievement-summary-card{
    padding:16px;
    border:1px solid var(--border);
    background:var(--card-gradient);
    box-shadow:0 12px 28px var(--shadow-soft);
}

.profile-achievement-summary-card span,
.profile-achievement-summary-card strong,
.profile-achievement-summary-card small{
    display:block;
}

.profile-achievement-summary-card > span{
    color:var(--gray);
    font-size:9px;
    font-weight:900;
    letter-spacing:.5px;
    text-transform:uppercase;
}

.profile-achievement-summary-card > strong{
    margin-top:7px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:32px;
    line-height:1;
}

.profile-achievement-summary-card small{
    margin-top:7px;
    color:var(--gray);
    font-size:9px;
}

.profile-achievement-layout{
    display:grid;
    grid-template-columns:minmax(280px,.82fr) minmax(0,1.18fr);
    gap:14px;
}

.profile-achievement-theme-card,
.profile-achievement-detail-card{
    min-width:0;
    border:1px solid var(--border);
    background:var(--card-gradient);
    box-shadow:0 12px 28px var(--shadow-soft);
}

.profile-achievement-theme-list{
    max-height:690px;
    overflow-y:auto;
    padding:12px;
}

.profile-achievement-theme-row{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:13px;
    padding:13px;
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--white);
    text-align:left;
    cursor:pointer;
    transition:.2s ease;
}

.profile-achievement-theme-row + .profile-achievement-theme-row{
    margin-top:8px;
}

.profile-achievement-theme-row:hover,
.profile-achievement-theme-row.active{
    border-color:rgba(255,190,76,.42);
    background:
        linear-gradient(90deg,rgba(255,190,76,.1),transparent),
        var(--card-2);
}

.profile-achievement-theme-main{
    min-width:0;
}

.profile-achievement-theme-main > span{
    display:block;
    color:var(--gold);
    font-size:8px;
    font-weight:900;
    letter-spacing:.6px;
}

.profile-achievement-theme-main > strong{
    display:block;
    margin-top:5px;
    overflow:hidden;
    color:var(--white);
    font-size:12px;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.profile-achievement-theme-progress{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    margin-top:10px;
}

.profile-achievement-theme-progress > div{
    height:6px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.profile-achievement-theme-progress > div span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--gold),var(--red));
}

.profile-achievement-theme-progress small{
    color:var(--gray);
    font-size:8px;
    font-weight:900;
}

.profile-achievement-theme-state{
    min-width:58px;
    text-align:right;
}

.profile-achievement-theme-state strong,
.profile-achievement-theme-state span{
    display:block;
}

.profile-achievement-theme-state strong{
    color:var(--gold);
    font-family:'Bebas Neue',cursive;
    font-size:23px;
    line-height:1;
}

.profile-achievement-theme-state span{
    margin-top:4px;
    color:var(--gray);
    font-size:7px;
    text-transform:uppercase;
}

.profile-achievement-detail-card{
    padding:16px;
}

.profile-achievement-detail{
    display:none;
}

.profile-achievement-detail.active{
    display:block;
}

.profile-achievement-detail-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    padding-bottom:15px;
    border-bottom:1px solid var(--border);
}

.profile-achievement-detail-head > div:first-child{
    min-width:0;
}

.profile-achievement-detail-head span{
    color:var(--gold);
    font-size:8px;
    font-weight:950;
    letter-spacing:1.1px;
}

.profile-achievement-detail-head h2{
    margin:6px 0 4px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:28px;
    letter-spacing:.8px;
}

.profile-achievement-detail-head p{
    margin:0;
    color:var(--gray);
    font-size:10px;
}

.profile-achievement-detail-score{
    flex:0 0 auto;
    text-align:right;
}

.profile-achievement-detail-score strong,
.profile-achievement-detail-score span{
    display:block;
}

.profile-achievement-detail-score strong{
    color:var(--gold);
    font-family:'Bebas Neue',cursive;
    font-size:35px;
    line-height:1;
}

.profile-achievement-detail-score span{
    margin-top:4px;
    color:var(--gray);
    font-size:8px;
}

.profile-achievement-collection-complete,
.profile-achievement-collection-progress{
    margin-top:14px;
    border:1px solid rgba(255,190,76,.25);
    background:rgba(255,190,76,.07);
}

.profile-achievement-collection-complete{
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px;
}

.profile-achievement-collection-complete > div:first-child{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,190,76,.28);
    background:rgba(255,190,76,.1);
    font-size:20px;
}

.profile-achievement-collection-complete strong,
.profile-achievement-collection-complete span{
    display:block;
}

.profile-achievement-collection-complete strong{
    color:var(--gold);
    font-size:12px;
}

.profile-achievement-collection-complete span{
    margin-top:4px;
    color:var(--gray);
    font-size:9px;
}

.profile-achievement-collection-progress{
    padding:13px;
}

.profile-achievement-collection-progress > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.profile-achievement-collection-progress span{
    color:var(--white);
    font-size:10px;
    font-weight:850;
}

.profile-achievement-collection-progress strong{
    color:var(--gold);
    font-size:11px;
}

.profile-achievement-collection-progress p{
    margin:6px 0 0;
    color:var(--gray);
    font-size:9px;
}

.profile-badge-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
    margin-top:14px;
}

.profile-badge-card{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
    gap:11px;
    padding:12px;
    border:1px solid var(--border);
    background:var(--card-2);
}

.profile-badge-card.unlocked{
    border-color:rgba(255,190,76,.25);
    background:
        radial-gradient(circle at top right,rgba(255,190,76,.09),transparent 45%),
        var(--card-2);
}

.profile-badge-card.locked{
    opacity:.72;
}

.profile-badge-icon{
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    background:rgba(255,255,255,.04);
    font-size:20px;
}

.profile-badge-card.unlocked .profile-badge-icon{
    border-color:rgba(255,190,76,.3);
    background:rgba(255,190,76,.09);
}

.profile-badge-content{
    min-width:0;
}

.profile-badge-title-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
}

.profile-badge-title-row strong{
    color:var(--white);
    font-size:11px;
}

.profile-badge-title-row span{
    flex:0 0 auto;
    color:var(--gold);
    font-size:8px;
    font-weight:900;
}

.profile-badge-content > p{
    min-height:27px;
    margin:5px 0 8px;
    color:var(--gray);
    font-size:9px;
    line-height:1.45;
}

.profile-badge-earned{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}

.profile-badge-earned strong{
    color:#75e48c;
    font-size:8px;
    text-transform:uppercase;
}

.profile-badge-earned span{
    color:var(--gray);
    font-size:8px;
}

.profile-badge-progress{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:8px;
}

.profile-badge-progress > div{
    height:5px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,.07);
}

.profile-badge-progress > div span{
    display:block;
    height:100%;
    border-radius:999px;
    background:linear-gradient(90deg,var(--gold),var(--red));
}

.profile-badge-progress small{
    color:var(--gray);
    font-size:8px;
    font-weight:900;
}

.profile-badge-meta{
    display:block;
    margin-top:5px;
    color:var(--gray);
    font-size:8px;
}

@media(max-width:980px){
    .profile-achievement-summary{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .profile-achievement-layout{
        grid-template-columns:1fr;
    }

    .profile-achievement-theme-list{
        max-height:390px;
    }
}

@media(max-width:620px){
    .profile-achievement-summary{
        gap:8px;
    }

    .profile-achievement-summary-card{
        padding:13px;
    }

    .profile-achievement-summary-card > strong{
        font-size:27px;
    }

    .profile-achievement-detail-card{
        padding:12px;
    }

    .profile-badge-grid{
        grid-template-columns:1fr;
    }

    .profile-achievement-detail-head h2{
        font-size:23px;
    }

    .profile-achievement-detail-score strong{
        font-size:30px;
    }
}


/* ===================================
   LIGAME | PROFİL AYARLARI
=================================== */

.profile-settings-page{
    padding-bottom:40px;
}

.profile-settings-hero{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:18px;
    padding:24px;
    border:1px solid var(--border);
    background:
        radial-gradient(circle at top right,rgba(255,190,76,.10),transparent 34%),
        radial-gradient(circle at bottom left,rgba(45,193,90,.10),transparent 36%),
        var(--card-gradient);
    box-shadow:0 18px 40px var(--shadow-soft);
}

.profile-settings-kicker{
    display:block;
    color:var(--gold);
    font-size:9px;
    font-weight:900;
    letter-spacing:1.2px;
}

.profile-settings-hero h1{
    margin:6px 0 5px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:38px;
    letter-spacing:1px;
}

.profile-settings-hero p{
    margin:0;
    color:var(--gray);
    font-size:11px;
}

.profile-settings-back{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:10px 13px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    color:var(--white);
    font-size:9px;
    font-weight:850;
    text-decoration:none;
    transition:.2s ease;
}

.profile-settings-back:hover{
    border-color:rgba(255,190,76,.35);
    color:var(--gold);
}

.profile-settings-layout{
    display:grid;
    grid-template-columns:270px minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.profile-settings-nav{
    position:sticky;
    top:88px;
    padding:10px;
    border:1px solid var(--border);
    background:var(--card-gradient);
    box-shadow:0 16px 34px var(--shadow-soft);
}

.profile-settings-nav button{
    width:100%;
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:center;
    gap:10px;
    padding:11px;
    border:1px solid transparent;
    background:transparent;
    color:var(--white);
    text-align:left;
    cursor:pointer;
    transition:.2s ease;
}

.profile-settings-nav button + button{
    margin-top:5px;
}

.profile-settings-nav button > span{
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    font-size:17px;
}

.profile-settings-nav button strong,
.profile-settings-nav button small{
    display:block;
}

.profile-settings-nav button strong{
    font-size:10px;
}

.profile-settings-nav button small{
    margin-top:3px;
    color:var(--gray);
    font-size:8px;
    line-height:1.35;
}

.profile-settings-nav button:hover,
.profile-settings-nav button.active{
    border-color:rgba(255,190,76,.28);
    background:linear-gradient(90deg,rgba(255,190,76,.09),transparent);
}

.profile-settings-nav button.active > span{
    border-color:rgba(255,190,76,.34);
    background:rgba(255,190,76,.10);
}

.profile-settings-nav button.danger:hover,
.profile-settings-nav button.danger.active{
    border-color:rgba(255,77,77,.28);
    background:linear-gradient(90deg,rgba(255,77,77,.09),transparent);
}

.profile-settings-content{
    min-width:0;
}

.profile-settings-panel{
    display:none;
}

.profile-settings-panel.active{
    display:block;
}

.profile-settings-content form,
.profile-settings-content > .profile-settings-panel > div{
    border-color:var(--border)!important;
}

.profile-settings-content [class*="bg-white"]{
    background:var(--card-gradient)!important;
}

.profile-settings-content [class*="text-gray-900"],
.profile-settings-content [class*="text-gray-800"]{
    color:var(--white)!important;
}

.profile-settings-content [class*="text-gray-600"],
.profile-settings-content [class*="text-gray-500"]{
    color:var(--gray)!important;
}

.profile-settings-content input{
    border-color:var(--border)!important;
    background:var(--card-2)!important;
    color:var(--white)!important;
    box-shadow:none!important;
}

.profile-settings-content input:focus{
    border-color:rgba(255,190,76,.48)!important;
}

.profile-settings-content label{
    color:var(--white)!important;
    font-size:9px!important;
    font-weight:800!important;
}

.profile-photo-editor{
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}

.profile-photo-preview-wrap{
    display:flex;
    align-items:center;
    gap:18px;
}

.profile-photo-preview{
    flex:0 0 112px;
    width:112px;
    height:112px;
    overflow:hidden;
    border:1px solid rgba(255,190,76,.28);
    background:var(--card-2);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
}

.profile-photo-preview img,
.profile-photo-preview span{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}

.profile-photo-copy{
    min-width:0;
}

.profile-photo-copy strong{
    display:block;
    color:var(--white);
    font-size:12px;
}

.profile-photo-copy p{
    margin:5px 0 10px;
    color:var(--gray);
    font-size:9px;
}

.profile-photo-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.profile-photo-file-name{
    display:block;
    margin-top:8px;
    color:var(--gold);
    font-size:8px;
}

.profile-security-note{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:13px;
    border:1px solid rgba(255,190,76,.20);
    background:rgba(255,190,76,.06);
}

.profile-security-note > div:first-child{
    flex:0 0 38px;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,190,76,.25);
    background:rgba(255,190,76,.08);
    font-size:17px;
}

.profile-security-note strong,
.profile-security-note p{
    display:block;
}

.profile-security-note strong{
    color:var(--white);
    font-size:10px;
}

.profile-security-note p{
    margin:4px 0 0;
    color:var(--gray);
    font-size:9px;
    line-height:1.5;
}

.profile-two-factor-status{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:14px;
    border:1px solid var(--border);
    background:var(--card-2);
}

.profile-two-factor-status.enabled{
    border-color:rgba(62,201,104,.30);
    background:rgba(62,201,104,.06);
}

.profile-two-factor-status.disabled{
    border-color:rgba(255,190,76,.24);
    background:rgba(255,190,76,.05);
}

.profile-two-factor-status-icon{
    flex:0 0 40px;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid currentColor;
    color:var(--gold);
    font-weight:900;
}

.profile-two-factor-status.enabled .profile-two-factor-status-icon{
    color:#68d98b;
}

.profile-two-factor-status strong{
    color:var(--white);
    font-size:11px;
}

.profile-two-factor-status p{
    margin:4px 0 0;
    color:var(--gray);
    font-size:9px;
}

.profile-two-factor-setup{
    display:grid;
    grid-template-columns:220px minmax(0,1fr);
    gap:18px;
    margin-top:14px;
    padding:14px;
    border:1px solid var(--border);
    background:var(--card-2);
}

.profile-two-factor-qr{
    display:grid;
    place-items:center;
    padding:14px;
    background:#fff;
}

.profile-two-factor-qr svg{
    width:100%;
    height:auto;
}

.profile-two-factor-setup-copy strong{
    color:var(--white);
    font-size:11px;
}

.profile-two-factor-setup-copy p{
    margin:5px 0 13px;
    color:var(--gray);
    font-size:9px;
    line-height:1.5;
}

.profile-two-factor-key{
    padding:11px;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
}

.profile-two-factor-key span,
.profile-two-factor-key strong{
    display:block;
}

.profile-two-factor-key span{
    color:var(--gray);
    font-size:8px;
}

.profile-two-factor-key strong{
    margin-top:5px;
    overflow-wrap:anywhere;
    color:var(--gold);
    font-family:monospace;
    font-size:10px;
}

.profile-two-factor-code{
    margin-top:13px;
}

.profile-recovery-codes{
    margin-top:14px;
}

.profile-recovery-code-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:7px;
    margin-top:10px;
}

.profile-recovery-code-grid span{
    padding:9px;
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--white);
    font-family:monospace;
    font-size:9px;
}

.profile-settings-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:16px;
}

.profile-session-list{
    margin-top:14px;
}

.profile-session-item{
    display:grid;
    grid-template-columns:42px minmax(0,1fr) auto;
    align-items:center;
    gap:12px;
    padding:12px;
    border:1px solid var(--border);
    background:var(--card-2);
}

.profile-session-item + .profile-session-item{
    margin-top:7px;
}

.profile-session-icon{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    background:rgba(255,255,255,.03);
    font-size:18px;
}

.profile-session-main strong,
.profile-session-main span,
.profile-session-status strong,
.profile-session-status span{
    display:block;
}

.profile-session-main strong{
    color:var(--white);
    font-size:10px;
}

.profile-session-main span{
    margin-top:4px;
    color:var(--gray);
    font-size:8px;
}

.profile-session-status{
    text-align:right;
}

.profile-session-status strong{
    color:var(--gray);
    font-size:8px;
    text-transform:uppercase;
}

.profile-session-status strong.current{
    color:#68d98b;
}

.profile-session-status span{
    margin-top:4px;
    color:var(--gray);
    font-size:8px;
}

.profile-danger-zone{
    display:flex;
    align-items:flex-start;
    gap:13px;
    padding:15px;
    border:1px solid rgba(255,77,77,.28);
    background:rgba(255,77,77,.06);
}

.profile-danger-zone-icon{
    flex:0 0 42px;
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,77,77,.35);
    color:#ff6464;
    font-size:18px;
    font-weight:900;
}

.profile-danger-zone strong{
    color:#ff7777;
    font-size:11px;
}

.profile-danger-zone p{
    margin:5px 0 0;
    color:var(--gray);
    font-size:9px;
    line-height:1.55;
}

@media(max-width:920px){
    .profile-settings-layout{
        grid-template-columns:1fr;
    }

    .profile-settings-nav{
        position:static;
        display:flex;
        gap:7px;
        overflow-x:auto;
        padding:8px;
    }

    .profile-settings-nav button{
        min-width:210px;
    }
}

@media(max-width:680px){
    .profile-settings-hero{
        align-items:flex-start;
        flex-direction:column;
        padding:18px;
    }

    .profile-settings-hero h1{
        font-size:31px;
    }

    .profile-settings-back{
        width:100%;
        justify-content:center;
    }

    .profile-settings-nav button{
        min-width:185px;
        grid-template-columns:34px minmax(0,1fr);
        padding:9px;
    }

    .profile-settings-nav button > span{
        width:34px;
        height:34px;
    }

    .profile-photo-preview-wrap{
        align-items:flex-start;
        flex-direction:column;
    }

    .profile-photo-preview{
        width:96px;
        height:96px;
        flex-basis:96px;
    }

    .profile-two-factor-setup{
        grid-template-columns:1fr;
    }

    .profile-two-factor-qr{
        max-width:230px;
    }

    .profile-recovery-code-grid{
        grid-template-columns:1fr;
    }

    .profile-session-item{
        grid-template-columns:38px minmax(0,1fr);
    }

    .profile-session-status{
        grid-column:2;
        text-align:left;
    }
}


.culture-tour-mission-section,
.culture-tour-badge-section {
    margin-top: 16px;
}

.culture-tour-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.culture-tour-section-title > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    font-size: 18px;
}

.culture-tour-section-title div {
    min-width: 0;
}

.culture-tour-section-title small {
    display: block;
    margin-bottom: 2px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
    opacity: 0.6;
}

.culture-tour-section-title strong {
    display: block;
    font-size: 14px;
    line-height: 1.25;
}

.culture-tour-mission-list,
.culture-tour-badge-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.culture-tour-mission-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid rgba(46, 204, 113, 0.22);
    border-radius: 14px;
    background:
        linear-gradient(
            135deg,
            rgba(46, 204, 113, 0.12),
            rgba(46, 204, 113, 0.03)
        );
}

.culture-tour-mission-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(46, 204, 113, 0.16);
    color: #2ecc71;
    font-size: 21px;
    font-weight: 900;
}

.culture-tour-mission-info {
    min-width: 0;
    flex: 1;
}

.culture-tour-mission-info span {
    display: block;
    margin-bottom: 3px;
    color: #2ecc71;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.culture-tour-mission-info strong {
    display: block;
    overflow: hidden;
    margin-bottom: 4px;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.culture-tour-mission-info small {
    display: block;
    font-size: 10px;
    opacity: 0.6;
}

.culture-tour-mission-item > b {
    flex: 0 0 auto;
    color: #2ecc71;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .culture-tour-mission-item {
        align-items: flex-start;
        padding: 11px;
    }

    .culture-tour-mission-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
        font-size: 18px;
    }

    .culture-tour-mission-info strong {
        font-size: 12px;
    }

    .culture-tour-mission-item > b {
        padding-top: 3px;
        font-size: 11px;
    }
}


.word-tour-mission-rewards {
    margin-bottom: 18px;
    padding: 16px;
    border: 1px solid rgba(46, 204, 113, 0.24);
    border-radius: 16px;
    background:
        linear-gradient(
            135deg,
            rgba(46, 204, 113, 0.11),
            rgba(46, 204, 113, 0.03)
        );
}

.word-tour-mission-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.word-tour-mission-head > div {
    min-width: 0;
}

.word-tour-mission-head span {
    display: block;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.56);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.2px;
}

.word-tour-mission-head strong {
    display: block;
    font-size: 16px;
    line-height: 1.3;
}

.word-tour-mission-head > b {
    flex: 0 0 auto;
    color: #2ecc71;
    font-size: 15px;
    white-space: nowrap;
}

.word-tour-mission-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.word-tour-mission-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px;
    border: 1px solid rgba(46, 204, 113, 0.18);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
}

.word-tour-mission-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(46, 204, 113, 0.14);
    color: #2ecc71;
    font-size: 21px;
    font-weight: 900;
}

.word-tour-mission-info {
    min-width: 0;
    flex: 1;
}

.word-tour-mission-info span {
    display: block;
    margin-bottom: 3px;
    color: #2ecc71;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1px;
}

.word-tour-mission-info strong {
    display: block;
    margin-bottom: 4px;
    overflow: hidden;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
}

.word-tour-mission-info small {
    display: block;
    color: var(--white);
    font-size: 10px;
}

.word-tour-mission-item > b {
    flex: 0 0 auto;
    color: #2ecc71;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .word-tour-mission-rewards {
        padding: 13px;
    }

    .word-tour-mission-item {
        align-items: flex-start;
        padding: 11px;
    }

    .word-tour-mission-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
        border-radius: 11px;
        font-size: 18px;
    }

    .word-tour-mission-info strong {
        font-size: 12px;
    }

    .word-tour-mission-item > b {
        padding-top: 3px;
        font-size: 11px;
    }
}

/* =========================================================
   KELİME OYUNU | DARK / LIGHT TEMA DÜZELTMELERİ
   Bu blok ligame.css dosyasının en sonunda bulunmalıdır.
========================================================= */

/* ---------------------------------------------------------
   Kelime oyunu için ortak tema değişkenleri
--------------------------------------------------------- */

:root,
[data-theme="dark"] {
    --word-accent: var(--green);
    --word-accent-dark: var(--green-dark);

    --word-surface: var(--card);
    --word-surface-secondary: var(--card-2);
    --word-surface-soft: rgba(255, 255, 255, 0.04);

    --word-text: var(--white);
    --word-muted: var(--gray);
    --word-border: var(--border);

    --word-success-soft: rgba(61, 255, 142, 0.10);
    --word-success-border: rgba(61, 255, 142, 0.24);

    --word-danger-soft: rgba(228, 15, 29, 0.10);
    --word-danger-border: rgba(228, 15, 29, 0.24);

    --word-gold-soft: rgba(255, 185, 56, 0.10);
    --word-gold-border: rgba(255, 185, 56, 0.24);

    --word-overlay: rgba(0, 0, 0, 0.68);

    --word-modal-shadow:
        0 24px 60px rgba(0, 0, 0, 0.42);

    --word-item-shadow:
        0 10px 24px rgba(0, 0, 0, 0.20);
}

[data-theme="light"] {
    --word-accent: var(--green);
    --word-accent-dark: var(--green-dark);

    --word-surface: var(--card);
    --word-surface-secondary: var(--card-2);
    --word-surface-soft: rgba(16, 42, 24, 0.035);

    --word-text: var(--white);
    --word-muted: var(--gray);
    --word-border: var(--border);

    --word-success-soft: rgba(22, 138, 67, 0.09);
    --word-success-border: rgba(22, 138, 67, 0.23);

    --word-danger-soft: rgba(228, 15, 29, 0.07);
    --word-danger-border: rgba(228, 15, 29, 0.20);

    --word-gold-soft: rgba(216, 145, 22, 0.08);
    --word-gold-border: rgba(216, 145, 22, 0.22);

    --word-overlay: rgba(13, 24, 17, 0.48);

    --word-modal-shadow:
        0 24px 60px rgba(16, 42, 24, 0.18);

    --word-item-shadow:
        0 10px 24px rgba(16, 42, 24, 0.09);
}

/* ---------------------------------------------------------
   Sayfa genel renkleri
--------------------------------------------------------- */

#wordIntroArea,
#wordStartArea,
#wordGameArea,
#wordResultArea {
    color: var(--word-text);
}

.word-game-area,
.word-result-area {
    color: var(--word-text);
}

/* ---------------------------------------------------------
   Hero alanı
--------------------------------------------------------- */

.ligame-word-hero {
    color: var(--word-text);

    background:
        radial-gradient(
            circle at top right,
            var(--word-gold-soft),
            transparent 42%
        ),
        var(--welcome-gradient);

    border-color: var(--word-success-border);
}

[data-theme="light"] .ligame-word-hero {
    background:
        radial-gradient(
            circle at top right,
            rgba(216, 145, 22, 0.11),
            transparent 42%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f2f8f4
        );
}

.ligame-word-hero span {
    color: var(--word-accent);
}

.ligame-word-hero h1 {
    color: var(--word-text);
}

.ligame-word-hero p {
    color: var(--word-muted);
}

.ligame-word-icon {
    color: var(--word-text);
    background: var(--word-gold-soft);
    border-color: var(--word-gold-border);
}

/* ---------------------------------------------------------
   Zorluk kartları
--------------------------------------------------------- */

.word-level {
    color: var(--word-text);
    background: var(--card-gradient);
    border-color: var(--word-border);
}

.word-level strong {
    color: var(--word-text);
}

.word-level span {
    color: var(--word-muted);
}

.word-level.easy {
    border-color: var(--word-success-border);
}

.word-level.medium {
    border-color: var(--word-gold-border);
}

.word-level.hard {
    border-color: var(--word-danger-border);
}

@media (hover: hover) and (pointer: fine) {
    .word-level.easy:hover {
        background:
            linear-gradient(
                135deg,
                var(--word-success-soft),
                var(--word-surface)
            );
    }

    .word-level.medium:hover {
        background:
            linear-gradient(
                135deg,
                var(--word-gold-soft),
                var(--word-surface)
            );
    }

    .word-level.hard:hover {
        background:
            linear-gradient(
                135deg,
                var(--word-danger-soft),
                var(--word-surface)
            );
    }
}

/* ---------------------------------------------------------
   Oyun üst alanı
--------------------------------------------------------- */

.word-game-top button {
    color: var(--word-text);
    background: var(--glass-bg);
    border-color: var(--word-border);
}

.word-game-top strong {
    color: var(--word-text);
}

.word-game-top span {
    color: var(--word-muted);
}

.word-progress {
    background: var(--word-surface-secondary);
    border: 1px solid var(--word-border);
}

.word-progress div {
    background:
        linear-gradient(
            90deg,
            var(--word-accent),
            var(--gold)
        );
}

/* ---------------------------------------------------------
   Sayaç
--------------------------------------------------------- */

.word-live-timer {
    color: var(--word-accent);
    background: var(--word-success-soft);
    border-color: var(--word-success-border);
}

.word-live-timer.warning {
    color: var(--gold);
    background: var(--word-gold-soft);
    border-color: var(--word-gold-border);
}

.word-live-timer.danger {
    color: var(--red);
    background: var(--word-danger-soft);
    border-color: var(--word-danger-border);
}

/* ---------------------------------------------------------
   Soru kartı
--------------------------------------------------------- */

.word-question-card {
    color: var(--word-text);
    background: var(--card-gradient);
    border-color: var(--word-border);
}

.word-question-card span {
    color: var(--word-accent);
    background: var(--word-success-soft);
    border-color: var(--word-success-border);
}

.word-question-card h2 {
    color: var(--word-text);
}

.word-question-card p {
    color: var(--word-muted);
}

/* ---------------------------------------------------------
   Cevap seçenekleri
--------------------------------------------------------- */

.word-option {
    color: var(--word-text);
    background: var(--card-gradient);
    border-color: var(--word-border);
}

.word-option:not(.correct):not(.wrong):focus,
.word-option:not(.correct):not(.wrong):focus-visible {
    border-color: var(--word-border);
}

@media (hover: hover) and (pointer: fine) {
    .word-option:hover:not(:disabled) {
        border-color: var(--word-success-border);
        background:
            linear-gradient(
                135deg,
                var(--word-success-soft),
                var(--word-surface)
            );
    }
}

.word-option.correct,
.word-option.correct:focus,
.word-option.correct:focus-visible {
    color: var(--word-accent);
    background: var(--word-success-soft);
    border-color: var(--word-success-border);
}

.word-option.wrong,
.word-option.wrong:focus,
.word-option.wrong:focus-visible {
    color: var(--red);
    background: var(--word-danger-soft);
    border-color: var(--word-danger-border);
}

/* ---------------------------------------------------------
   Doğru / yanlış geri bildirimi
--------------------------------------------------------- */

.word-feedback.success {
    color: var(--word-accent);
    background: var(--word-success-soft);
    border-color: var(--word-success-border);
}

.word-feedback.danger {
    color: var(--red);
    background: var(--word-danger-soft);
    border-color: var(--word-danger-border);
}

/* ---------------------------------------------------------
   Sonuç kartı
--------------------------------------------------------- */

.word-result-card {
    color: var(--word-text);
    background: var(--card-gradient);
    border-color: var(--word-border);
}

.word-result-card > span {
    color: var(--word-muted);
}

.word-result-card h2 {
    color: var(--word-accent);
}

.word-result-card p {
    color: var(--word-muted);
}

.word-success-rate {
    color: var(--word-muted);
}

/* ---------------------------------------------------------
   Başarı rozeti
--------------------------------------------------------- */

.word-level-badge {
    color: var(--word-muted);
    background: var(--glass-bg);
    border-color: var(--word-border);
}

.word-level-badge.master {
    color: var(--gold);
    background: var(--word-gold-soft);
    border-color: var(--word-gold-border);
}

.word-level-badge.strong {
    color: var(--word-accent);
    background: var(--word-success-soft);
    border-color: var(--word-success-border);
}

.word-level-badge.progress {
    color: var(--word-text);
    background: var(--word-surface-secondary);
    border-color: var(--word-border);
}

.word-level-badge.starter {
    color: var(--red);
    background: var(--word-danger-soft);
    border-color: var(--word-danger-border);
}

/* ---------------------------------------------------------
   Tamamlanan görevler alanı
--------------------------------------------------------- */

.word-tour-mission-rewards {
    margin-top: 16px;
    margin-bottom: 18px;
    padding: 16px;

    color: var(--word-text);

    border: 1px solid var(--word-success-border);
    border-radius: 14px;

    background:
        radial-gradient(
            circle at top right,
            var(--word-success-soft),
            transparent 48%
        ),
        var(--card-gradient);

    box-shadow: var(--word-item-shadow);
}

[data-theme="light"] .word-tour-mission-rewards {
    background:
        radial-gradient(
            circle at top right,
            rgba(22, 138, 67, 0.08),
            transparent 48%
        ),
        linear-gradient(
            145deg,
            #ffffff,
            #f3f9f5
        );
}

.word-tour-mission-head {
    border-bottom: 1px solid var(--word-border);
    padding-bottom: 12px;
}

.word-tour-mission-head strong {
    color: var(--word-text);
}

.word-tour-mission-head > b {
    color: var(--word-accent);
}

.word-tour-mission-item {
    color: var(--word-text);

    background: var(--word-surface-soft);
    border-color: var(--word-border);

    box-shadow: none;
}

[data-theme="light"] .word-tour-mission-item {
    background: var(--word-surface-secondary);
}

.word-tour-mission-icon {
    color: var(--word-accent);
    background: var(--word-success-soft);
    border: 1px solid var(--word-success-border);
}

.word-tour-mission-info span {
    color: var(--word-accent);
}

.word-tour-mission-info strong {
    color: var(--word-text);
}

.word-tour-mission-info small {
    color: var(--word-muted);
}

.word-tour-mission-item > b {
    color: var(--word-accent);
}

/* ---------------------------------------------------------
   Öğrenme kartları
--------------------------------------------------------- */

.word-summary-learn {
    color: var(--word-text);
    background: var(--card-gradient);
    border-color: var(--word-border);
}

.word-summary-head span {
    color: var(--word-accent);
}

.word-summary-head strong {
    color: var(--word-text);
}

.learn-summary-item {
    color: var(--word-text);

    background: var(--word-surface-soft);
    border-color: var(--word-border);
}

[data-theme="light"] .learn-summary-item {
    background: var(--word-surface-secondary);
}

.learn-summary-number {
    color: var(--word-surface);
    background: var(--word-accent);
}

[data-theme="light"] .learn-summary-number {
    color: #ffffff;
}

.learn-summary-content strong {
    color: var(--word-text);
}

.learn-summary-content span {
    color: var(--word-accent);
}

.learn-summary-content small {
    color: var(--word-muted);
}

/* ---------------------------------------------------------
   Yanlışlardan tekrar butonu
--------------------------------------------------------- */

#wrongWordsBtn {
    color: var(--word-text);
    background: var(--word-surface);
    border-color: var(--word-border);
}

#wrongWordsBtn:hover {
    color: var(--red);
    background: var(--word-danger-soft);
    border-color: var(--word-danger-border);
}

/* ---------------------------------------------------------
   Oyundan çıkış modalı
--------------------------------------------------------- */

.word-exit-modal {
    background: var(--word-overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.word-exit-card {
    color: var(--word-text);

    background: var(--word-surface);
    border: 1px solid var(--word-border);

    box-shadow: var(--word-modal-shadow);
}

.word-exit-card h3 {
    color: var(--word-text);
}

.word-exit-card p {
    color: var(--word-muted);
}

.word-exit-actions button {
    color: var(--word-text);
    background: var(--word-surface-secondary);
    border: 1px solid var(--word-border);
}

.word-exit-actions button:hover {
    border-color: var(--word-success-border);
}

.word-exit-actions .danger {
    color: #ffffff;
    background: var(--red);
    border-color: var(--red);
}

/* ---------------------------------------------------------
   Toast mesajı
--------------------------------------------------------- */

.word-toast {
    color: var(--word-text);

    background: var(--word-surface);
    border: 1px solid var(--word-border);

    box-shadow: var(--word-modal-shadow);
}

/* ---------------------------------------------------------
   Seviye atlama popup uyumu
--------------------------------------------------------- */

.word-level-up-card {
    color: var(--word-text);
    background: var(--word-surface);
    border-color: var(--word-border);
}

.word-level-up-card h2 {
    color: var(--word-text);
}

.word-level-up-card p,
.word-level-up-card small {
    color: var(--word-muted);
}

.word-level-up-button {
    color: var(--word-surface);
    background: var(--word-accent);
}

[data-theme="light"] .word-level-up-button {
    color: #ffffff;
}

.word-level-up-ligamil {
    color: var(--gold);
    background: var(--word-gold-soft);
    border-color: var(--word-gold-border);
}

/* ---------------------------------------------------------
   Genel butonlar
--------------------------------------------------------- */

.word-result-area .btn-green {
    color: var(--word-surface);
    background: var(--word-accent);
}

[data-theme="light"] .word-result-area .btn-green {
    color: #ffffff;
}

.word-result-area .btn-outline {
    color: var(--word-text);
    background: transparent;
    border-color: var(--word-border);
}

.word-result-area .btn-outline:hover {
    color: var(--word-accent);
    background: var(--word-success-soft);
    border-color: var(--word-success-border);
}

/* ---------------------------------------------------------
   Mobil düzen
--------------------------------------------------------- */

@media (max-width: 480px) {
    .word-tour-mission-rewards {
        padding: 13px;
    }

    .word-tour-mission-item {
        align-items: flex-start;
    }

    .learn-summary-item {
        padding: 11px;
    }

    .word-exit-card {
        padding: 21px 18px;
    }
}



/* =========================================================
   LIGAME | FOOTER
========================================================= */

.ligame-footer {
    position: relative;
    z-index: 2;

    width: 100%;
    padding: 0 14px 100px;
    background: var(--card);
    color: var(--white);
}

.ligame-footer-container {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    border-top: 1px solid var(--border);

    background: transparent;
}

.ligame-footer-main {
    display: grid;
    grid-template-columns: minmax(220px, .75fr) minmax(0, 1.25fr);
    gap: 54px;

    padding: 30px 0 28px;
}

.ligame-footer-brand {
    min-width: 0;
}

.ligame-footer-logo {
    display: inline-flex;

    color: var(--white);

    font-family: 'Bebas Neue', cursive;
    font-size: 36px;
    line-height: 1;
    letter-spacing: 2.5px;

    text-decoration: none;
}

.ligame-footer-logo span {
    color: var(--green);
}

.ligame-footer-brand p {
    max-width: 340px;

    margin: 12px 0 0;

    color: var(--gray);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
}

.ligame-footer-route-colors {
    width: 72px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;

    margin-top: 20px;
}

.ligame-footer-route-colors span {
    height: 3px;
}

.ligame-footer-route-colors .sport {
    background: var(--green);
}

.ligame-footer-route-colors .culture {
    background: var(--red);
}

.ligame-footer-pages {
    min-width: 0;
}

.ligame-footer-section-head {
    margin-bottom: 13px;
}

.ligame-footer-section-head span,
.ligame-footer-section-head strong {
    display: block;
}

.ligame-footer-section-head span {
    color: var(--green);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ligame-footer-section-head strong {
    margin-top: 5px;

    color: var(--white);

    font-size: 13px;
    font-weight: 900;
}

.ligame-footer-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--border);
}

.ligame-footer-links a {
    min-width: 0;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    padding: 0 13px;

    border-bottom: 1px solid var(--border);

    color: var(--gray);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        padding .2s ease;
}

.ligame-footer-links a:nth-child(odd) {
    border-right: 1px solid var(--border);
}

.ligame-footer-links a:hover,
.ligame-footer-links a.active {
    color: var(--white);
    background: var(--glass-bg);
}

.ligame-footer-links a:hover {
    padding-left: 18px;
}

.ligame-footer-links a.active {
    color: var(--green);
}

.ligame-footer-links a span {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.ligame-footer-links a i {
    flex: 0 0 auto;

    color: var(--green);

    font-size: 8px;
}

.ligame-footer-bottom {
    min-height: 62px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}


.ligame-footer-bottom strong {
    color: var(--white);

    font-size: 9px;
    font-weight: 900;
}

.ligame-footer-bottom span {
    color: var(--gray);

    font-size: 9px;
    font-weight: 700;
}

.ligame-footer-home-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--gray);

    font-size: 9px;
    font-weight: 900;

    text-decoration: none;

    transition: color .2s ease;
}

.ligame-footer-home-link:hover {
    color: var(--green);
}

.ligame-footer-home-link i {
    width: 24px;
    height: 24px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--glass-bg);

    font-size: 8px;
}


/* =========================================================
   LIGAME | KURUMSAL BİLGİ SAYFASI
========================================================= */

.ligame-information-page {
    color: var(--white);
}

.ligame-information-shell {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}

.ligame-information-hero {
    position: relative;

    margin-bottom: 16px;
    padding: 22px;

    overflow: hidden;

    border: 1px solid rgba(61, 255, 142, .16);
    border-radius: 0;

    background:
        radial-gradient(
            circle at top right,
            rgba(61, 255, 142, .15),
            transparent 42%
        ),
        var(--card-gradient);

    box-shadow: 0 16px 38px var(--shadow-soft);
}

.ligame-information-hero::after {
    content: "";

    position: absolute;
    right: -72px;
    bottom: -92px;

    width: 190px;
    height: 190px;

    border: 28px solid rgba(61, 255, 142, .045);
    border-radius: 50%;

    pointer-events: none;
}

[data-theme="light"] .ligame-information-hero::after {
    border-color: rgba(22, 138, 67, .05);
}

.ligame-information-hero-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 28px;
}

.ligame-information-back {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border: 1px solid var(--border);
    border-radius: 50%;

    background: var(--glass-bg);
    color: var(--white);

    font-size: 11px;

    text-decoration: none;

    transition:
        transform .2s ease,
        color .2s ease,
        border-color .2s ease;
}

.ligame-information-back:hover {
    transform: translateX(-3px);

    border-color: rgba(61, 255, 142, .28);
    color: var(--green);
}

.ligame-information-hero-top > span {
    color: var(--green);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ligame-information-hero-content {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.ligame-information-hero-content > div:first-child {
    min-width: 0;
    max-width: 760px;
}

.ligame-information-hero-content small {
    display: block;

    color: var(--green);

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.7px;
    text-transform: uppercase;
}

.ligame-information-hero-content h1 {
    margin: 7px 0 8px;

    color: var(--white);

    font-family: 'Bebas Neue', cursive;
    font-size: clamp(36px, 6vw, 54px);
    font-weight: 400;
    line-height: .98;
    letter-spacing: 1px;
}

.ligame-information-hero-content p {
    max-width: 620px;

    margin: 0;

    color: var(--gray);

    font-size: 11px;
    font-weight: 700;
    line-height: 1.7;
}

.ligame-information-icon {
    width: 86px;
    height: 86px;

    flex: 0 0 86px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(61, 255, 142, .20);
    border-radius: 10px;

    background: rgba(61, 255, 142, .08);
    color: var(--green);

    font-size: 31px;
}

.ligame-information-meta {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 18px;

    margin-top: 24px;
    padding-top: 15px;

    border-top: 1px solid var(--border);
}

.ligame-information-meta span {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--gray);

    font-size: 9px;
    font-weight: 700;
}

.ligame-information-meta i {
    color: var(--green);
}

.ligame-information-meta strong {
    color: var(--white);

    font-weight: 900;
}

.ligame-information-layout {
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr);
    gap: 16px;

    align-items: start;
}

.ligame-information-navigation {
    position: sticky;
    top: 94px;

    border: 1px solid var(--border);
    border-radius: 0;

    background: var(--card-gradient);

    box-shadow: 0 12px 28px var(--shadow-soft);
}

.ligame-information-navigation-head {
    padding: 17px 16px;

    border-bottom: 1px solid var(--border);
}

.ligame-information-navigation-head span,
.ligame-information-navigation-head strong {
    display: block;
}

.ligame-information-navigation-head span {
    color: var(--green);

    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.ligame-information-navigation-head strong {
    margin-top: 5px;

    color: var(--white);

    font-size: 12px;
    font-weight: 900;
}

.ligame-information-navigation nav {
    display: flex;
    flex-direction: column;
}

.ligame-information-navigation nav a {
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    padding: 0 15px;

    border-bottom: 1px solid var(--border);

    color: var(--gray);

    font-size: 10px;
    font-weight: 800;

    text-decoration: none;

    transition:
        color .2s ease,
        background .2s ease,
        padding .2s ease;
}

.ligame-information-navigation nav a:last-child {
    border-bottom: 0;
}

.ligame-information-navigation nav a:hover {
    padding-left: 19px;

    color: var(--white);
    background: var(--glass-bg);
}

.ligame-information-navigation nav a.active {
    color: var(--green);
    background: rgba(61, 255, 142, .07);
}

.ligame-information-navigation nav a.active::before {
    content: "";

    width: 2px;
    height: 20px;

    margin-left: -15px;

    background: var(--green);
}

.ligame-information-navigation nav a.active span {
    margin-right: auto;
}

.ligame-information-navigation nav a i {
    color: var(--green);

    font-size: 8px;
}

.ligame-information-main {
    min-width: 0;
}

.ligame-information-content {
    min-height: 460px;

    padding: clamp(22px, 4vw, 38px);

    border: 1px solid var(--border);
    border-radius: 0;

    background: var(--card-gradient);

    box-shadow: 0 14px 32px var(--shadow-soft);

    color: var(--gray);

    font-size: 13px;
    font-weight: 600;
    line-height: 1.9;

    overflow-wrap: anywhere;
}

.ligame-information-content > *:first-child {
    margin-top: 0 !important;
}

.ligame-information-content > *:last-child {
    margin-bottom: 0 !important;
}

.ligame-information-content h1,
.ligame-information-content h2,
.ligame-information-content h3,
.ligame-information-content h4,
.ligame-information-content h5,
.ligame-information-content h6 {
    color: var(--white);
}

.ligame-information-content h2 {
    position: relative;

    margin: 34px 0 14px;
    padding-left: 15px;

    font-size: 20px;
    font-weight: 950;
    line-height: 1.4;
}

.ligame-information-content h2::before {
    content: "";

    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;

    width: 3px;

    background: linear-gradient(
        180deg,
        var(--green),
        var(--red)
    );
}

.ligame-information-content h3 {
    margin: 28px 0 12px;

    font-size: 16px;
    font-weight: 950;
    line-height: 1.45;
}

.ligame-information-content h4 {
    margin: 23px 0 10px;

    font-size: 14px;
    font-weight: 950;
}

.ligame-information-content p {
    margin: 0 0 17px;
}

.ligame-information-content strong {
    color: var(--white);

    font-weight: 950;
}

.ligame-information-content a {
    color: var(--green);

    font-weight: 900;
    text-decoration: none;

    border-bottom: 1px solid rgba(61, 255, 142, .34);
}

.ligame-information-content a:hover {
    border-bottom-color: var(--green);
}

.ligame-information-content ul,
.ligame-information-content ol {
    margin: 0 0 20px;
    padding-left: 21px;
}

.ligame-information-content li {
    margin-bottom: 8px;
    padding-left: 3px;
}

.ligame-information-content li::marker {
    color: var(--green);
}

.ligame-information-content blockquote {
    margin: 22px 0;
    padding: 16px 17px;

    border-left: 3px solid var(--green);

    background: var(--card-2);
    color: var(--white);

    font-weight: 700;
}

.ligame-information-content hr {
    height: 1px;

    margin: 27px 0;

    border: 0;

    background: var(--border);
}

.ligame-information-content img {
    width: auto;
    max-width: 100%;
    height: auto;

    display: block;

    margin: 22px auto;

    border: 1px solid var(--border);
    border-radius: 10px;
}

.ligame-information-content figure {
    margin: 22px 0;
}

.ligame-information-content figcaption {
    margin-top: 8px;

    color: var(--gray);

    font-size: 9px;
    text-align: center;
}

.ligame-information-content table {
    width: 100%;

    margin: 22px 0;

    border-collapse: collapse;

    font-size: 11px;
}

.ligame-information-content th,
.ligame-information-content td {
    padding: 11px 12px;

    border: 1px solid var(--border);

    text-align: left;
    vertical-align: top;
}

.ligame-information-content th {
    background: var(--card-2);
    color: var(--white);

    font-weight: 950;
}

.ligame-information-content td {
    color: var(--gray);
}

.ligame-information-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;

    margin-top: 14px;
}

.ligame-information-primary-action,
.ligame-information-secondary-action {
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 14px;

    border-radius: 0;

    font-size: 10px;
    font-weight: 950;

    text-decoration: none;

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

.ligame-information-primary-action {
    border: 1px solid var(--green);

    background: var(--green);
    color: #07110a;
}

[data-theme="light"] .ligame-information-primary-action {
    color: #ffffff;
}

.ligame-information-secondary-action {
    border: 1px solid var(--border);

    background: var(--card-gradient);
    color: var(--white);
}

.ligame-information-primary-action:hover,
.ligame-information-secondary-action:hover {
    transform: translateY(-2px);
}

.ligame-information-secondary-action:hover {
    border-color: rgba(61, 255, 142, .28);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .ligame-footer-main {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .ligame-footer-brand {
        max-width: 480px;
    }

    .ligame-information-layout {
        grid-template-columns: 1fr;
    }

    .ligame-information-navigation {
        position: static;
    }

    .ligame-information-navigation nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ligame-information-navigation nav a:nth-child(odd) {
        border-right: 1px solid var(--border);
    }

    .ligame-information-navigation nav a.active::before {
        display: none;
    }
}


/* =========================================================
   MOBİL
========================================================= */

@media (max-width: 700px) {

    .ligame-footer {
    
        padding-right: 14px;
        padding-left: 14px;
    }

    .ligame-footer-main {
        padding: 25px 0 22px;
        text-align: center;
    }

    .ligame-footer-logo {
        font-size: 32px;
    }

    .ligame-footer-brand p {
        font-size: 10px;
    }

    .ligame-footer-links {
        grid-template-columns: 1fr;
    }

    .ligame-footer-links a:nth-child(odd) {
        border-right: 0;
    }

    .ligame-footer-links a {
        min-height: 46px;
        padding-right: 5px;
        padding-left: 5px;
        display: flex;
        justify-content: center;
    }

    .ligame-footer-links a:hover {
        padding-left: 11px;
    }
    .ligame-footer-brand p{max-width: 100%;}

    .ligame-footer-bottom {
        min-height: 78px;

        align-items: flex-start;
    
        justify-content: center;
        gap: 10px;
    }


    .ligame-information-hero {
        padding: 17px;
    }

    .ligame-information-hero-top {
        margin-bottom: 24px;
    }

    .ligame-information-hero-content {
        align-items: flex-start;
    }

    .ligame-information-hero-content h1 {
        font-size: clamp(33px, 10vw, 43px);
    }

    .ligame-information-hero-content p {
        font-size: 10px;
    }

    .ligame-information-icon {
        width: 54px;
        height: 54px;

        flex-basis: 54px;

        font-size: 22px;
    }

    .ligame-information-meta {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .ligame-information-navigation nav {
        grid-template-columns: 1fr;
    }

    .ligame-information-navigation nav a:nth-child(odd) {
        border-right: 0;
    }

    .ligame-information-content {
        min-height: 300px;

        padding: 20px 17px;

        font-size: 12px;
        line-height: 1.82;
    }

    .ligame-information-content h2 {
        margin-top: 28px;

        font-size: 18px;
    }

    .ligame-information-content h3 {
        margin-top: 23px;

        font-size: 15px;
    }

    .ligame-information-content table {
        display: block;

        max-width: 100%;

        overflow-x: auto;

        white-space: nowrap;

        scrollbar-width: thin;
    }

    .ligame-information-actions {
        grid-template-columns: 1fr;
    }
}


.ligame-footer-disclaimer {
    padding: 18px 0;

    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.ligame-footer-disclaimer strong {
    display: block;

    margin-bottom: 7px;

    color: var(--white);

    font-size: 9px;
    font-weight: 950;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ligame-footer-disclaimer p {
    max-width: 920px;

    margin: 0;

    color: var(--gray);

    font-size: 9px;
    font-weight: 650;
    line-height: 1.75;
}

@media (max-width: 700px) {
    .ligame-footer-disclaimer {
        padding: 16px 0;
    }

    .ligame-footer-disclaimer strong {
        font-size: 8px;
    }

    .ligame-footer-disclaimer p {
        font-size: 8px;
        line-height: 1.7;
    }
}


.ranking-period-area {
    margin-bottom: 16px;
    padding: 13px;
    border: 1px solid var(--border);
    background: var(--card-gradient);
}

.ranking-period-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.ranking-period-head span,
.ranking-period-head strong {
    display: block;
}

.ranking-period-head span {
    color: var(--gray);
    font-size: 8px;
    font-weight: 950;
    letter-spacing: 1.2px;
}

.ranking-period-head strong {
    margin-top: 4px;
    color: var(--white);
    font-size: 12px;
}

.ranking-period-head > small {
    color: var(--gold);
    font-size: 9px;
    font-weight: 950;
}

.ranking-period-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.ranking-period-button {
    min-width: 0;
    min-height: 56px;
    padding: 9px;

    border: 1px solid var(--border);
    background: var(--card-2);
    color: var(--gray);

    text-align: left;
    cursor: pointer;
}

.ranking-period-button strong,
.ranking-period-button small {
    display: block;
}

.ranking-period-button strong {
    overflow: hidden;
    color: inherit;
    font-size: 9px;
    font-weight: 900;
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ranking-period-button small {
    margin-top: 5px;
    color: var(--gray);
    font-size: 7px;
    font-weight: 800;
}

.ranking-period-button.active {
    border-color: var(--green);
    background: rgba(61, 255, 142, .10);
    color: var(--green);
}

.ranking-tabs button.culture.active
    ~ .ranking-period-area
    .ranking-period-button.active {
    border-color: var(--red);
}

@media (max-width: 520px) {
    .ranking-period-tabs {
        display: flex;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ranking-period-tabs::-webkit-scrollbar {
        display: none;
    }

    .ranking-period-button {
        width: 145px;
        flex: 0 0 145px;
    }
}

/* ===================================
   LIGAME | OYUNCU AVATAR KÜTÜPHANESİ
=================================== */

.profile-avatar-editor{
    position:relative;
    padding-bottom:16px;
    border-bottom:1px solid var(--border);
}

.profile-avatar-preview-wrap{
    display:flex;
    align-items:center;
    gap:18px;
}

.profile-avatar-preview{
    flex:0 0 112px;
    width:112px;
    height:112px;
    overflow:hidden;
    border:1px solid rgba(220,164,34,.35);
    background:var(--card-2);
    box-shadow:0 12px 28px var(--shadow-soft);
}

.profile-avatar-preview img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.profile-avatar-copy{
    min-width:0;
}

.profile-avatar-copy > strong{
    display:block;
    color:var(--white);
    font-size:12px;
}

.profile-avatar-copy > p{
    max-width:520px;
    margin:6px 0 12px;
    color:var(--gray);
    font-size:9px;
    line-height:1.55;
}

.profile-avatar-actions{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.profile-avatar-library-overlay{
    position:fixed;
    inset:0;
    z-index:1400;
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(5px);
}

.profile-avatar-library{
    position:fixed;
    z-index:1401;
    top:50%;
    left:50%;
    width:min(860px,calc(100vw - 28px));
    max-height:min(760px,calc(100vh - 36px));
    overflow:hidden;
    transform:translate(-50%,-50%);
    border:1px solid var(--border);
    background:var(--card-gradient);
    box-shadow:0 28px 80px rgba(0,0,0,.42);
}

.profile-avatar-library-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:18px;
    padding:18px;
    border-bottom:1px solid var(--border);
}

.profile-avatar-library-head span{
    display:block;
    color:var(--gold);
    font-size:8px;
    font-weight:950;
    letter-spacing:1.1px;
}

.profile-avatar-library-head h3{
    margin:5px 0 3px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:28px;
    letter-spacing:.8px;
}

.profile-avatar-library-head p{
    margin:0;
    color:var(--gray);
    font-size:9px;
}

.profile-avatar-library-head > button{
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--white);
    font-size:21px;
    cursor:pointer;
}

.profile-avatar-library-head > button:hover{
    border-color:rgba(220,164,34,.45);
    color:var(--gold);
}

.profile-avatar-search{
    display:grid;
    grid-template-columns:32px minmax(0,1fr);
    align-items:center;
    gap:6px;
    margin:14px 16px 0;
    padding:0 10px;
    border:1px solid var(--border);
    background:var(--card-2);
}

.profile-avatar-search > span{
    color:var(--gray);
    font-size:18px;
    text-align:center;
}

.profile-avatar-search input{
    width:100%;
    height:42px;
    border:0!important;
    outline:0;
    background:transparent!important;
    color:var(--white)!important;
    font-size:10px;
    box-shadow:none!important;
}

.profile-avatar-search input::placeholder{
    color:var(--gray);
}

.profile-avatar-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    max-height:570px;
    overflow-y:auto;
    padding:16px;
}

.profile-avatar-option{
    position:relative;
    min-width:0;
    overflow:hidden;
    padding:0;
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--white);
    text-align:left;
    cursor:pointer;
    transition:.2s ease;
}

.profile-avatar-option:hover{
    transform:translateY(-2px);
    border-color:rgba(220,164,34,.40);
}

.profile-avatar-option.selected{
    border-color:var(--gold);
    box-shadow:0 0 0 2px rgba(220,164,34,.14);
}

.profile-avatar-option-image{
    display:block;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:rgba(255,255,255,.03);
}

.profile-avatar-option-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}

.profile-avatar-option-info{
    display:block;
    min-width:0;
    padding:10px;
}

.profile-avatar-option-info strong,
.profile-avatar-option-info small{
    display:block;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.profile-avatar-option-info strong{
    color:var(--white);
    font-size:10px;
}

.profile-avatar-option-info small{
    margin-top:4px;
    color:var(--gray);
    font-size:8px;
}

.profile-avatar-option-check{
    position:absolute;
    top:8px;
    right:8px;
    width:25px;
    height:25px;
    display:none;
    place-items:center;
    border:1px solid rgba(255,255,255,.32);
    border-radius:50%;
    background:var(--gold);
    color:#19140a;
    font-size:11px;
    font-weight:950;
}

.profile-avatar-option.selected
.profile-avatar-option-check{
    display:grid;
}

.profile-avatar-empty{
    grid-column:1 / -1;
    padding:48px 20px;
    text-align:center;
}

.profile-avatar-empty > div{
    font-size:34px;
}

.profile-avatar-empty strong{
    display:block;
    margin-top:9px;
    color:var(--white);
    font-size:11px;
}

.profile-avatar-empty p{
    max-width:390px;
    margin:6px auto 0;
    color:var(--gray);
    font-size:9px;
    line-height:1.55;
}

@media(max-width:760px){
    .profile-avatar-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}

@media(max-width:560px){
    .profile-avatar-preview-wrap{
        align-items:flex-start;
        flex-direction:column;
    }

    .profile-avatar-preview{
        width:96px;
        height:96px;
        flex-basis:96px;
    }

    .profile-avatar-library{
        top:auto;
        bottom:0;
        left:0;
        width:100%;
        max-height:88vh;
        transform:none;
        border-right:0;
        border-bottom:0;
        border-left:0;
    }

    .profile-avatar-library-head{
        padding:15px;
    }

    .profile-avatar-library-head h3{
        font-size:24px;
    }

    .profile-avatar-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-height:calc(88vh - 150px);
        padding:12px;
    }

    .profile-avatar-search{
        margin:12px 12px 0;
    }
}


/* =========================================================
   LIGAME DASHBOARD | CANLI AÇIK TEMA
   Yalnızca dashboard ana içerik alanını etkiler.
========================================================= */

[data-theme="light"] .ligame-home-page{
    --home-bg:#eef8f1;
    --home-surface:#ffffff;
    --home-surface-2:#f4fbf6;
    --home-border:rgba(19,84,42,.14);
    --home-text:#14231a;
    --home-muted:#607064;
    --home-panel-shadow:0 18px 42px rgba(28,87,48,.12);
    --home-route-hover:rgba(22,138,67,.045);

    background:
        radial-gradient(circle at 8% 18%,rgba(38,196,99,.16),transparent 28%),
        radial-gradient(circle at 92% 40%,rgba(245,92,92,.11),transparent 27%),
        radial-gradient(circle at 74% 82%,rgba(145,102,226,.10),transparent 24%),
        linear-gradient(180deg,#fbfffc 0%,#eef8f1 55%,#f8fcf9 100%) !important;
}

[data-theme="light"] .ligame-home-page .home-route-grid,
[data-theme="light"] .ligame-home-page .home-bottom-grid{
    background:transparent;
}

/* Rota kartları */
[data-theme="light"] .ligame-home-page .home-route-card.home-route-featured{
    border-width:1px;
    box-shadow:
        0 18px 38px rgba(24,73,39,.12),
        inset 0 1px 0 rgba(255,255,255,.90);
}

[data-theme="light"] .ligame-home-page .home-route-card.home-route-featured::after{
    content:"";
    position:absolute;
    z-index:7;
    top:0;
    left:0;
    right:0;
    height:4px;
    pointer-events:none;
}

[data-theme="light"] .ligame-home-page .home-route-featured.route-sport{
    background:
        radial-gradient(circle at 86% 18%,rgba(23,177,78,.25),transparent 34%),
        linear-gradient(145deg,#f5fff8 0%,#d8f8e3 100%);
    border-color:rgba(25,164,70,.42);
}

[data-theme="light"] .ligame-home-page .home-route-featured.route-sport::after{
    background:linear-gradient(90deg,#149447,#43d77d);
}

[data-theme="light"] .ligame-home-page .home-route-featured.route-culture{
    background:
        radial-gradient(circle at 86% 18%,rgba(237,75,78,.23),transparent 34%),
        linear-gradient(145deg,#fffafa 0%,#ffdfe1 100%);
    border-color:rgba(220,58,61,.38);
}

[data-theme="light"] .ligame-home-page .home-route-featured.route-culture::after{
    background:linear-gradient(90deg,#d73f43,#ff7779);
}

[data-theme="light"] .ligame-home-page .home-route-featured.route-word{
    background:
        radial-gradient(circle at 86% 18%,rgba(239,169,33,.26),transparent 34%),
        linear-gradient(145deg,#fffdf7 0%,#ffedbd 100%);
    border-color:rgba(214,145,22,.40);
}

[data-theme="light"] .ligame-home-page .home-route-featured.route-word::after{
    background:linear-gradient(90deg,#d78c0d,#ffc54f);
}

[data-theme="light"] .ligame-home-page .home-route-featured.route-wall{
    background:
        radial-gradient(circle at 86% 18%,rgba(128,82,216,.24),transparent 34%),
        linear-gradient(145deg,#fdfbff 0%,#e7ddff 100%);
    border-color:rgba(124,82,196,.36);
}

[data-theme="light"] .ligame-home-page .home-route-featured.route-wall::after{
    background:linear-gradient(90deg,#7650bd,#ab83ef);
}

[data-theme="light"] .ligame-home-page .home-route-card.home-route-featured:hover{
    transform:translateY(-5px);
    box-shadow:
        0 24px 48px rgba(24,73,39,.17),
        inset 0 1px 0 rgba(255,255,255,.95);
}

[data-theme="light"] .ligame-home-page .route-featured-main strong{
    color:#13231a;
    text-shadow:0 1px 0 rgba(255,255,255,.70);
}

[data-theme="light"] .ligame-home-page .route-featured-main p{
    color:#53645a;
    font-weight:600;
}

[data-theme="light"] .ligame-home-page .route-featured-label{
    color:#334139 !important;
    background:rgba(255,255,255,.72) !important;
    border-color:rgba(25,67,39,.12) !important;
    box-shadow:0 7px 16px rgba(35,81,49,.07) !important;
}

[data-theme="light"] .ligame-home-page .route-sport .route-featured-label{color:#087c35 !important;}
[data-theme="light"] .ligame-home-page .route-culture .route-featured-label{color:#c53034 !important;}
[data-theme="light"] .ligame-home-page .route-word .route-featured-label{color:#9a6200 !important;}
[data-theme="light"] .ligame-home-page .route-wall .route-featured-label{color:#6842aa !important;}

[data-theme="light"] .ligame-home-page .route-featured-icon{
    background:rgba(255,255,255,.76);
    box-shadow:
        0 14px 25px rgba(36,77,48,.13),
        inset 0 1px 0 rgba(255,255,255,.95);
}

[data-theme="light"] .ligame-home-page .sport-icon{
    color:#0b9440;
    border-color:rgba(11,148,64,.30);
}

[data-theme="light"] .ligame-home-page .culture-icon{
    color:#d53f43;
    border-color:rgba(213,63,67,.28);
}

[data-theme="light"] .ligame-home-page .word-icon{
    color:#b06f00;
    border-color:rgba(176,111,0,.28);
}

[data-theme="light"] .ligame-home-page .wall-icon{
    color:#7246ba;
    border-color:rgba(114,70,186,.28);
}

[data-theme="light"] .ligame-home-page .route-featured-action{
    color:#26352c;
    background:rgba(255,255,255,.70);
    border-color:rgba(27,78,43,.13);
    box-shadow:0 8px 18px rgba(32,77,45,.07);
}

[data-theme="light"] .ligame-home-page .route-featured-action span{
    color:inherit !important;
}

[data-theme="light"] .ligame-home-page .route-sport .route-featured-action{
    color:#087c35;
    border-color:rgba(11,148,64,.24);
}

[data-theme="light"] .ligame-home-page .route-culture .route-featured-action{
    color:#c53034;
    border-color:rgba(213,63,67,.22);
}

[data-theme="light"] .ligame-home-page .route-word .route-featured-action{
    color:#976000;
    border-color:rgba(176,111,0,.22);
}

[data-theme="light"] .ligame-home-page .route-wall .route-featured-action{
    color:#6842aa;
    border-color:rgba(114,70,186,.22);
}

/* Kart içi dekorlar açık temada görünür kalır */
[data-theme="light"] .ligame-home-page .route-card-glow{
    opacity:.42;
    filter:blur(24px);
}

[data-theme="light"] .ligame-home-page .route-sport .route-card-glow{background:rgba(31,193,87,.38);}
[data-theme="light"] .ligame-home-page .route-culture .route-card-glow{background:rgba(239,78,82,.34);}
[data-theme="light"] .ligame-home-page .route-word .route-card-glow{background:rgba(240,169,35,.36);}
[data-theme="light"] .ligame-home-page .route-wall .route-card-glow{background:rgba(133,87,218,.34);}

[data-theme="light"] .ligame-home-page .sport-field-visual{
    opacity:.32;
}

[data-theme="light"] .ligame-home-page .sport-field-visual::before,
[data-theme="light"] .ligame-home-page .field-center-circle,
[data-theme="light"] .ligame-home-page .field-penalty-area{
    border-color:rgba(9,122,50,.36);
}

[data-theme="light"] .ligame-home-page .field-center-line{
    background:rgba(9,122,50,.36);
}

[data-theme="light"] .ligame-home-page .field-ball{
    filter:none;
    opacity:.82;
}

[data-theme="light"] .ligame-home-page .culture-ring,
[data-theme="light"] .ligame-home-page .word-visual-ring{
    border-color:rgba(180,112,0,.30);
    opacity:.82;
}

[data-theme="light"] .ligame-home-page .culture-ring::before,
[data-theme="light"] .ligame-home-page .culture-ring::after,
[data-theme="light"] .ligame-home-page .word-visual-ring::before,
[data-theme="light"] .ligame-home-page .word-visual-ring::after{
    border-color:rgba(88,63,25,.13);
}

[data-theme="light"] .ligame-home-page .culture-book,
[data-theme="light"] .ligame-home-page .word-main-icon{
    opacity:.25;
}

[data-theme="light"] .ligame-home-page .culture-star,
[data-theme="light"] .ligame-home-page .word-letter,
[data-theme="light"] .ligame-home-page .wall-crown,
[data-theme="light"] .ligame-home-page .wall-spark{
    opacity:.68;
}

[data-theme="light"] .ligame-home-page .word-letter{
    color:#a86a00;
    background:rgba(255,255,255,.55);
    border-color:rgba(176,111,0,.23);
}

[data-theme="light"] .ligame-home-page .wall-stage{
    border-color:rgba(113,70,184,.25);
    background:linear-gradient(180deg,rgba(139,92,221,.25),rgba(139,92,221,.07));
    opacity:.75;
}

[data-theme="light"] .ligame-home-page .wall-trophy{
    opacity:.72;
}

/* Oyuncu ve fikstür panelleri */
[data-theme="light"] .ligame-home-page .home-dark-panel{
    border-color:rgba(19,84,42,.16);
    background:
        radial-gradient(circle at 92% 8%,rgba(30,185,83,.10),transparent 30%),
        linear-gradient(145deg,#ffffff 0%,#f0faf3 100%);
    box-shadow:
        0 18px 42px rgba(28,87,48,.12),
        inset 0 1px 0 rgba(255,255,255,.95);
}

[data-theme="light"] .ligame-home-page .home-fixture-panel{
    background:
        radial-gradient(circle at 92% 8%,rgba(213,63,67,.09),transparent 30%),
        linear-gradient(145deg,#ffffff 0%,#fff5f5 100%);
}

[data-theme="light"] .ligame-home-page .home-panel-heading{
    border-bottom-color:rgba(19,84,42,.13);
}

[data-theme="light"] .ligame-home-page .home-panel-heading h2{
    color:#173020;
}

[data-theme="light"] .ligame-home-page .home-panel-heading h2 i{
    width:4px;
    background:linear-gradient(180deg,#19a650,#58df88);
    box-shadow:0 0 12px rgba(25,166,80,.26);
}

[data-theme="light"] .ligame-home-page .home-panel-heading a{
    color:#0c8b3e;
}

[data-theme="light"] .ligame-home-page .home-player-card{
    border-color:rgba(19,84,42,.15);
    background:#ffffff;
    box-shadow:0 10px 24px rgba(28,87,48,.09);
    transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}

[data-theme="light"] .ligame-home-page .home-player-card:hover{
    transform:translateY(-3px);
    border-color:rgba(22,138,67,.28);
    box-shadow:0 15px 30px rgba(28,87,48,.13);
}

[data-theme="light"] .ligame-home-page .home-player-image{
    background:
        radial-gradient(circle at 50% 18%,rgba(64,211,113,.17),transparent 38%),
        linear-gradient(180deg,#eef9f1,#dcefe2);
}

[data-theme="light"] .ligame-home-page .home-player-copy strong{
    color:#17241b;
}

[data-theme="light"] .ligame-home-page .home-player-copy small{
    color:#0e9140;
}

[data-theme="light"] .ligame-home-page .home-player-copy span b{
    color:#b87300;
}

[data-theme="light"] .ligame-home-page .home-scroll-arrow{
    background:#ffffff;
    color:#128c41;
    border-color:rgba(18,140,65,.22);
    box-shadow:0 8px 18px rgba(25,91,45,.12);
}

[data-theme="light"] .ligame-home-page .home-fixture-row{
    border-bottom-color:rgba(19,84,42,.11);
}

[data-theme="light"] .ligame-home-page .home-fixture-row:hover{
    background:rgba(31,175,79,.065);
}

[data-theme="light"] .ligame-home-page .home-fixture-team img{
    background:#ffffff;
    border-color:rgba(18,72,35,.18);
    box-shadow:0 5px 12px rgba(29,82,43,.09);
}

[data-theme="light"] .ligame-home-page .home-fixture-team strong{
    color:#1c2b21;
}

[data-theme="light"] .ligame-home-page .home-fixture-row > b{
    color:#0b9140;
}

/* Mobilde canlılığı korurken gölgeyi kontrollü tutar */
@media(max-width:600px){
    [data-theme="light"] .ligame-home-page .home-route-card.home-route-featured{
        box-shadow:
            0 12px 25px rgba(24,73,39,.11),
            inset 0 1px 0 rgba(255,255,255,.92);
    }

    [data-theme="light"] .ligame-home-page .home-route-card.home-route-featured:hover{
        transform:none;
    }

    [data-theme="light"] .ligame-home-page .route-featured-icon{
        box-shadow:0 9px 18px rgba(36,77,48,.11);
    }
}


/* =========================================================
   LIGAME | ONBOARDING
========================================================= */

.onboarding-body{
    min-height:100vh;
    overflow-x:hidden;
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(61,255,142,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(255,95,87,.12),
            transparent 28%
        ),
        var(--bg);
}

.onboarding-page{
    min-height:100vh;
    padding:24px 16px 48px;
}

.onboarding-shell{
    width:100%;
    max-width:1080px;
    margin:0 auto;
}

.onboarding-topbar{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px;
}

.onboarding-logo img,
.onboarding-welcome-logo img{
    display:block;
    width:auto;
    height:36px;
}

.onboarding-language{
    display:flex;
    align-items:center;
    gap:5px;
}

.onboarding-language form{
    margin:0;
}

.onboarding-language button{
    min-width:39px;
    height:35px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--glass-bg);
    color:var(--gray);
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.onboarding-language button.active{
    border-color:rgba(61,255,142,.35);
    background:rgba(61,255,142,.11);
    color:var(--green);
}

.onboarding-progress{
    display:flex;
    align-items:center;
    justify-content:center;
    max-width:720px;
    margin:0 auto 34px;
}

.onboarding-progress > div{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    color:var(--gray);
}

.onboarding-progress > div span{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid var(--border);
    background:var(--card);
    font-size:10px;
    font-weight:900;
}

.onboarding-progress > div strong{
    font-size:8px;
    font-weight:900;
    white-space:nowrap;
}

.onboarding-progress > div.active{
    color:var(--green);
}

.onboarding-progress > div.active span{
    border-color:var(--green);
    background:var(--green);
    color:#07100a;
}

.onboarding-progress > i{
    width:70px;
    height:1px;
    margin:0 10px 20px;
    background:var(--border);
}

.onboarding-heading{
    max-width:700px;
    margin:0 auto 24px;
    text-align:center;
}

.onboarding-heading > span{
    color:var(--green);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.8px;
    text-transform:uppercase;
}

.onboarding-heading h1{
    margin:8px 0 10px;
    font-family:'Bebas Neue',cursive;
    font-size:47px;
    font-weight:400;
    line-height:1;
    letter-spacing:1px;
    color:var(--white);
}

.onboarding-heading p{
    margin:0;
    color:var(--gray);
    font-size:13px;
    line-height:1.7;
}

.onboarding-errors{
    max-width:760px;
    margin:0 auto 16px;
    padding:14px 16px;
    border:1px solid rgba(255,95,87,.25);
    background:rgba(255,95,87,.09);
    color:var(--red);
}

.onboarding-errors strong{
    display:block;
    margin-bottom:7px;
    font-size:12px;
}

.onboarding-errors ul{
    margin:0;
    padding-left:18px;
    font-size:11px;
    line-height:1.7;
}

.onboarding-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.onboarding-card{
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--card-gradient);
    box-shadow:
        0 20px 50px var(--shadow-soft),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.onboarding-card-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:20px;
    border-bottom:1px solid var(--border);
}

.onboarding-card-head > div{
    min-width:0;
}

.onboarding-card-head span{
    display:block;
    color:var(--green);
    font-size:8px;
    font-weight:950;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.onboarding-card-head h2{
    margin:5px 0;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:27px;
    font-weight:400;
    letter-spacing:.7px;
}

.onboarding-card-head p{
    margin:0;
    color:var(--gray);
    font-size:10px;
    line-height:1.6;
}

.onboarding-card-head > strong{
    min-width:42px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--border);
    background:var(--card-2);
    color:var(--green);
    font-size:11px;
}

.onboarding-avatar-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:10px;
    padding:18px;
}

.onboarding-avatar-option{
    position:relative;
    min-width:0;
    overflow:hidden;
    border:1px solid var(--border);
    background:var(--card-2);
    cursor:pointer;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.onboarding-avatar-option:hover{
    transform:translateY(-3px);
    border-color:rgba(61,255,142,.30);
}

.onboarding-avatar-option.selected{
    border-color:var(--green);
    box-shadow:
        0 0 0 2px rgba(61,255,142,.12),
        0 14px 28px var(--shadow-soft);
}

.onboarding-avatar-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.onboarding-avatar-image{
    display:block;
    aspect-ratio:1 / 1;
    overflow:hidden;
    background:
        radial-gradient(
            circle at top,
            rgba(61,255,142,.13),
            transparent 55%
        ),
        var(--card);
}

.onboarding-avatar-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .28s ease;
}

.onboarding-avatar-option:hover
.onboarding-avatar-image img{
    transform:scale(1.035);
}

.onboarding-avatar-name{
    display:block;
    overflow:hidden;
    padding:10px 8px;
    color:var(--white);
    font-size:9px;
    font-weight:900;
    text-align:center;
    white-space:nowrap;
    text-overflow:ellipsis;
}

.onboarding-avatar-check{
    position:absolute;
    top:8px;
    right:8px;
    width:25px;
    height:25px;
    display:none;
    place-items:center;
    border-radius:50%;
    background:var(--green);
    color:#07100a;
    font-size:11px;
    font-weight:950;
}

.onboarding-avatar-option.selected
.onboarding-avatar-check{
    display:grid;
}

.onboarding-empty{
    grid-column:1 / -1;
    padding:45px 20px;
    text-align:center;
}

.onboarding-empty > span{
    font-size:37px;
}

.onboarding-empty strong{
    display:block;
    margin-top:10px;
    color:var(--white);
    font-size:13px;
}

.onboarding-empty p{
    margin:7px 0 0;
    color:var(--gray);
    font-size:10px;
}

.onboarding-fields{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    padding:20px;
}

.onboarding-field.full{
    grid-column:1 / -1;
}

.onboarding-field label{
    display:block;
    margin-bottom:7px;
    color:var(--gray);
    font-size:9px;
    font-weight:900;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.onboarding-field input,
.onboarding-field select{
    width:100%;
    height:51px;
    padding:0 14px;
    border:1px solid var(--border);
    border-radius:0;
    outline:none;
    background:var(--input-bg);
    color:var(--white);
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:12px;
    font-weight:700;
}

.onboarding-field input:focus,
.onboarding-field select:focus{
    border-color:rgba(61,255,142,.45);
    box-shadow:0 0 0 4px rgba(61,255,142,.07);
}

.onboarding-field select option{
    background:var(--card);
    color:var(--white);
}

.onboarding-privacy{
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin:0 20px 20px;
    padding:12px 14px;
    border:1px solid rgba(61,255,142,.16);
    background:rgba(61,255,142,.06);
}

.onboarding-privacy span{
    flex:0 0 auto;
}

.onboarding-privacy p{
    margin:0;
    color:var(--gray);
    font-size:9px;
    line-height:1.6;
}

.onboarding-submit-area{
    position:sticky;
    bottom:12px;
    z-index:20;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:15px;
    border:1px solid var(--border);
    background:color-mix(
        in srgb,
        var(--card) 94%,
        transparent
    );
    box-shadow:0 18px 45px var(--shadow);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.onboarding-submit-area small,
.onboarding-submit-area strong{
    display:block;
}

.onboarding-submit-area small{
    color:var(--gray);
    font-size:8px;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
}

.onboarding-submit-area strong{
    margin-top:4px;
    color:var(--white);
    font-size:11px;
}

.onboarding-primary-button,
.onboarding-welcome-button{
    min-width:230px;
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 18px;
    border:0;
    background:linear-gradient(
        135deg,
        var(--green),
        var(--green-dark)
    );
    color:#07100a;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:12px;
    font-weight:950;
    cursor:pointer;
    transition:.22s ease;
}

.onboarding-primary-button:hover:not(:disabled),
.onboarding-welcome-button:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(61,255,142,.19);
}

.onboarding-primary-button:disabled{
    opacity:.40;
    cursor:not-allowed;
}

.onboarding-primary-button b,
.onboarding-welcome-button b{
    font-size:19px;
}

/* Hoş geldin ekranı */

.onboarding-welcome-page{
    display:flex;
    align-items:center;
    justify-content:center;
}

.onboarding-welcome-shell{
    width:100%;
    max-width:720px;
    padding:34px;
    border:1px solid var(--border);
    background:
        radial-gradient(
            circle at top,
            rgba(61,255,142,.12),
            transparent 35%
        ),
        var(--card-gradient);
    box-shadow:0 26px 70px var(--shadow);
    text-align:center;
}

.onboarding-welcome-logo{
    display:flex;
    justify-content:center;
    margin-bottom:25px;
}

.onboarding-welcome-avatar{
    position:relative;
    width:92px;
    height:92px;
    margin:0 auto 18px;
}

.onboarding-welcome-avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    border-radius:50%;
    border:3px solid var(--green);
    box-shadow:0 12px 28px var(--shadow);
}

.onboarding-welcome-avatar span{
    position:absolute;
    right:1px;
    bottom:1px;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:var(--green);
    color:#07100a;
    font-size:12px;
    font-weight:950;
}

.onboarding-welcome-label{
    display:block;
    color:var(--green);
    font-size:9px;
    font-weight:950;
    letter-spacing:1.7px;
    text-transform:uppercase;
}

.onboarding-welcome-shell h1{
    margin:8px 0 10px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:48px;
    font-weight:400;
    line-height:1;
}

.onboarding-welcome-description{
    max-width:560px;
    margin:0 auto;
    color:var(--gray);
    font-size:12px;
    line-height:1.7;
}

.onboarding-welcome-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
    margin:25px 0;
    text-align:left;
}

.onboarding-welcome-features article{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:13px;
    border:1px solid var(--border);
    background:var(--card-2);
}

.onboarding-welcome-features article > span{
    font-size:22px;
}

.onboarding-welcome-features strong{
    display:block;
    color:var(--white);
    font-size:11px;
}

.onboarding-welcome-features p{
    margin:5px 0 0;
    color:var(--gray);
    font-size:8px;
    line-height:1.5;
}

.onboarding-welcome-button{
    width:100%;
}

.onboarding-welcome-note{
    display:block;
    margin-top:12px;
    color:var(--gray);
    font-size:8px;
}

/* Açık tema */

[data-theme="light"] .onboarding-body{
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(22,138,67,.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(214,69,61,.10),
            transparent 28%
        ),
        #f1f7f3;
}

/* Mobil */

@media(max-width:720px){
    .onboarding-page{
        padding:16px 10px 35px;
    }

    .onboarding-progress > i{
        width:25px;
        margin-left:4px;
        margin-right:4px;
    }

    .onboarding-progress > div strong{
        font-size:6px;
    }

    .onboarding-heading h1{
        font-size:36px;
    }

    .onboarding-heading p{
        font-size:10px;
    }

    .onboarding-avatar-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
        padding:12px;
        gap:7px;
    }

    .onboarding-fields{
        grid-template-columns:1fr;
        padding:15px;
    }

    .onboarding-field.full{
        grid-column:auto;
    }

    .onboarding-submit-area{
        align-items:stretch;
        flex-direction:column;
        bottom:8px;
    }

    .onboarding-primary-button{
        width:100%;
        min-width:0;
    }

    .onboarding-welcome-shell{
        padding:25px 15px;
    }

    .onboarding-welcome-shell h1{
        font-size:38px;
    }

    .onboarding-welcome-features{
        grid-template-columns:1fr;
    }
}

@media(max-width:390px){
    .onboarding-avatar-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   LIGAME | DASHBOARD ONBOARDING SPOTLIGHT
========================================================= */

.home-onboarding-sport-form{
    min-width:0;
    height:100%;
    margin:0;
}

.home-onboarding-sport-form
.home-route-card{
    width:100%;
    height:100%;
    border-style:solid;
    font-family:inherit;
    text-align:left;
    cursor:pointer;
}

.onboarding-spotlight-overlay{
    position:fixed;
    inset:0;
    z-index:10000;

    background:rgba(1,5,3,.86);

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    animation:
        onboardingOverlayIn
        .30s ease both;
}

.onboarding-sport-target{
    position:relative!important;
    z-index:10002!important;

    border-color:var(--green)!important;

    box-shadow:
        0 0 0 4px rgba(61,255,142,.14),
        0 0 0 9px rgba(61,255,142,.06),
        0 24px 70px rgba(0,0,0,.55)!important;

    animation:
        onboardingTargetPulse
        1.8s ease-in-out infinite;
}

.onboarding-sport-target:hover{
    transform:none!important;
}

.onboarding-coach{
    position:fixed;
    z-index:10003;

    max-width:340px;
    padding:18px;

    border:1px solid rgba(61,255,142,.28);

    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.13),
            transparent 42%
        ),
        var(--card);

    color:var(--white);

    box-shadow:
        0 25px 70px rgba(0,0,0,.48),
        inset 0 1px 0 rgba(255,255,255,.05);

    animation:
        onboardingCoachIn
        .36s ease both;
}

.onboarding-coach::after{
    content:"";

    position:absolute;

    width:13px;
    height:13px;

    background:var(--card);

    border-left:
        1px solid rgba(61,255,142,.28);

    border-bottom:
        1px solid rgba(61,255,142,.28);

    transform:rotate(45deg);
}

.onboarding-coach[data-placement="right"]::after{
    left:-7px;
    top:50%;
    transform:
        translateY(-50%)
        rotate(45deg);
}

.onboarding-coach[data-placement="left"]::after{
    right:-7px;
    top:50%;

    transform:
        translateY(-50%)
        rotate(225deg);
}

.onboarding-coach[data-placement="bottom"]::after{
    top:-7px;
    left:50%;

    transform:
        translateX(-50%)
        rotate(135deg);
}

.onboarding-coach[data-placement="top"]::after{
    bottom:-7px;
    left:50%;

    transform:
        translateX(-50%)
        rotate(-45deg);
}

.onboarding-coach > span{
    display:inline-flex;

    padding:5px 8px;

    border:1px solid
        rgba(61,255,142,.20);

    background:
        rgba(61,255,142,.09);

    color:var(--green);

    font-size:8px;
    font-weight:950;
    letter-spacing:1.3px;
}

.onboarding-coach h3{
    margin:10px 0 7px;

    color:var(--white);

    font-family:
        'Bebas Neue',
        cursive;

    font-size:27px;
    font-weight:400;
    letter-spacing:.8px;
    line-height:1;
}

.onboarding-coach p{
    margin:0;

    color:var(--gray);

    font-size:11px;
    line-height:1.65;
}

.onboarding-coach small{
    display:block;

    margin-top:12px;
    padding-top:11px;

    border-top:1px solid var(--border);

    color:var(--green);

    font-size:9px;
    font-weight:850;
    line-height:1.5;
}

/* Spor eğitim bilgi alanı */

.sport-tutorial-banner{
    display:flex;
    align-items:flex-start;
    gap:12px;

    margin-bottom:16px;
    padding:15px;

    border:1px solid
        rgba(61,255,142,.22);

    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.13),
            transparent 45%
        ),
        var(--card-gradient);

    box-shadow:
        0 12px 28px
        var(--shadow-soft);
}

.sport-tutorial-banner > span{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:grid;
    place-items:center;

    border:1px solid
        rgba(61,255,142,.22);

    background:
        rgba(61,255,142,.10);

    font-size:21px;
}

.sport-tutorial-banner small,
.sport-tutorial-banner strong,
.sport-tutorial-banner p{
    display:block;
}

.sport-tutorial-banner small{
    color:var(--green);

    font-size:8px;
    font-weight:950;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.sport-tutorial-banner strong{
    margin-top:5px;

    color:var(--white);

    font-size:12px;
}

.sport-tutorial-banner p{
    margin:5px 0 0;

    color:var(--gray);

    font-size:9px;
    line-height:1.55;
}

.sport-page-tutorial
.ligame-lock-time{
    background:
        rgba(61,255,142,.10);

    border-color:
        rgba(61,255,142,.25);
}

.sport-page-tutorial
.ligame-lock-time strong{
    color:var(--green);

    font-size:14px;
}

@keyframes onboardingOverlayIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

@keyframes onboardingCoachIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes onboardingTargetPulse{
    0%,
    100%{
        box-shadow:
            0 0 0 4px
            rgba(61,255,142,.13),

            0 0 0 9px
            rgba(61,255,142,.05),

            0 24px 70px
            rgba(0,0,0,.55);
    }

    50%{
        box-shadow:
            0 0 0 5px
            rgba(61,255,142,.22),

            0 0 0 13px
            rgba(61,255,142,.08),

            0 24px 70px
            rgba(0,0,0,.55);
    }
}

@media(max-width:600px){
    .onboarding-coach{
        padding:15px;
    }

    .onboarding-coach h3{
        font-size:23px;
    }

    .onboarding-coach p{
        font-size:10px;
    }
}

/* =========================================================
   SPORT TUTORIAL | KEEP BENCH AND STEP PANEL CLEAR
========================================================= */

.sport-page-tutorial .sport-tutorial-keep-clear{
    position: relative;
    z-index: 10002 !important;
    filter: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none;
}

.sport-page-tutorial .sport-tutorial-keep-clear *{
    filter: none !important;
    background: var(--card);
}

/*
| Eğer blur overlay backdrop-filter ile geliyorsa,
| bu bloklar overlay'in üstünde kalacağı için net görünür.
*/
.sport-page-tutorial .sport-substitutes-section.sport-tutorial-keep-clear,
.sport-page-tutorial .sport-tutorial-step-card.sport-tutorial-keep-clear,
.sport-page-tutorial .sport-tutorial-banner.sport-tutorial-keep-clear{
    position: relative;
    z-index: 10002 !important;
}

/*
| Kartların da sönük görünmesini engelle
*/
.sport-page-tutorial .sport-tutorial-keep-clear .sub-card,
.sport-page-tutorial .sport-tutorial-keep-clear .sub-player-card,
.sport-page-tutorial .sport-tutorial-keep-clear .sub-rating,
.sport-page-tutorial .sport-tutorial-keep-clear .rating-pill,
.sport-page-tutorial .sport-tutorial-keep-clear .tutorial-step-box{
    opacity: 1 !important;
    filter: none !important;
}

/*
| Eğer genel blur/dim kuralın varsa bu alanları hariç tut
*/
.sport-page-tutorial .sport-tutorial-dimmed:not(.sport-tutorial-keep-clear){
    filter: blur(5px);
    opacity: .22;
    pointer-events: none;
}
.onboarding-spotlight-overlay{
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(1,5,3,.86);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* =========================================================
   ONBOARDING | SPOR EĞİTİMİ TAMAMLANDI
========================================================= */

body.onboarding-result-open{
    overflow:hidden;
    touch-action:none;
}

.onboarding-result-modal{
    position:fixed;
    inset:0;
    z-index:25000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .30s ease,
        visibility .30s ease;
}

.onboarding-result-modal.is-visible{
    opacity:1;
    visibility:visible;
}

.onboarding-result-modal.is-closing{
    opacity:0;
    visibility:hidden;
}

.onboarding-result-backdrop{
    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(61,255,142,.14),
            transparent 34%
        ),
        rgba(1,6,3,.91);

    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}

.onboarding-result-sheet{
    position:relative;
    z-index:1;

    width:100%;
    max-width:470px;

    overflow:hidden;

    padding:21px;

    border:1px solid rgba(61,255,142,.25);
    border-radius:25px;

    background:
        radial-gradient(
            circle at top,
            rgba(61,255,142,.12),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            #132018 0%,
            #09110c 100%
        );

    box-shadow:
        0 35px 90px rgba(0,0,0,.68),
        inset 0 1px 0 rgba(255,255,255,.06);

    text-align:center;

    transform:translateY(35px) scale(.95);

    transition:
        transform .38s
        cubic-bezier(.22,1,.36,1);
}

.onboarding-result-modal.is-visible
.onboarding-result-sheet{
    transform:translateY(0) scale(1);
}

.onboarding-result-handle{
    display:none;

    width:42px;
    height:4px;

    margin:0 auto 18px;

    border-radius:999px;

    background:rgba(255,255,255,.20);
}

.onboarding-result-brand{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.onboarding-result-brand > span{
    color:var(--green);

    font-size:8px;
    font-weight:950;
    letter-spacing:1.6px;

    text-transform:uppercase;
}

.onboarding-result-brand > strong{
    display:inline-grid;
    place-items:center;

    min-width:43px;
    height:28px;

    padding:0 9px;

    border:1px solid rgba(61,255,142,.20);
    border-radius:999px;

    background:rgba(61,255,142,.08);
    color:var(--green);

    font-size:9px;
    font-weight:950;
}

.onboarding-result-icon{
    position:relative;

    width:96px;
    height:96px;

    display:grid;
    place-items:center;

    margin:25px auto 17px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            var(--green) 0 54%,
            rgba(61,255,142,.16) 55% 69%,
            transparent 70%
        );
}

.onboarding-result-icon > span{
    position:relative;
    z-index:2;

    display:grid;
    place-items:center;

    width:55px;
    height:55px;

    border-radius:50%;

    background:#07110a;
    color:var(--green);

    font-size:29px;
    font-weight:950;

    box-shadow:
        0 9px 25px rgba(0,0,0,.35);
}

.onboarding-result-icon > i{
    position:absolute;

    width:7px;
    height:7px;

    border-radius:50%;

    background:var(--green);

    box-shadow:
        0 0 12px rgba(61,255,142,.8);

    animation:
        onboardingResultSpark
        1.8s ease-in-out infinite;
}

.onboarding-result-icon > i:nth-of-type(1){
    top:5px;
    right:2px;
}

.onboarding-result-icon > i:nth-of-type(2){
    bottom:11px;
    left:0;

    animation-delay:.35s;
}

.onboarding-result-icon > i:nth-of-type(3){
    top:26px;
    left:-10px;

    animation-delay:.7s;
}

.onboarding-result-success{
    display:block;

    color:var(--green);

    font-size:8px;
    font-weight:950;
    letter-spacing:1.7px;

    text-transform:uppercase;
}

.onboarding-result-sheet h2{
    margin:8px 0 9px;

    color:#fff;

    font-family:'Bebas Neue',cursive;
    font-size:40px;
    font-weight:400;
    line-height:1;

    letter-spacing:1px;
}

.onboarding-result-description{
    max-width:370px;

    margin:0 auto;

    color:rgba(255,255,255,.60);

    font-size:11px;
    line-height:1.65;
}

.onboarding-result-progress{
    display:flex;
    align-items:flex-start;
    justify-content:center;

    margin:23px 0 20px;
}

.onboarding-result-progress > span{
    width:52px;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:6px;
}

.onboarding-result-progress > span i{
    width:29px;
    height:29px;

    display:grid;
    place-items:center;

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    background:#101a13;
    color:rgba(255,255,255,.38);

    font-size:9px;
    font-style:normal;
    font-weight:950;
}

.onboarding-result-progress > span small{
    color:rgba(255,255,255,.38);

    font-size:6px;
    font-weight:900;
}

.onboarding-result-progress > span.completed i{
    border-color:var(--green);

    background:var(--green);
    color:#07110a;
}

.onboarding-result-progress > span.completed small{
    color:var(--green);
}

.onboarding-result-progress > b{
    width:32px;
    height:1px;

    margin-top:14px;

    background:rgba(255,255,255,.13);
}

.onboarding-result-progress > b.completed{
    background:var(--green);
}

.onboarding-result-next{
    display:flex;
    align-items:center;
    gap:12px;

    padding:13px;

    border:1px solid rgba(61,255,142,.17);
    border-radius:14px;

    background:rgba(61,255,142,.055);

    text-align:left;
}

.onboarding-result-next-icon{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:grid;
    place-items:center;

    border:1px solid rgba(61,255,142,.20);
    border-radius:12px;

    background:rgba(61,255,142,.09);

    font-size:21px;
}

.onboarding-result-next > div:nth-child(2){
    flex:1;
    min-width:0;
}

.onboarding-result-next small,
.onboarding-result-next strong,
.onboarding-result-next p{
    display:block;
}

.onboarding-result-next small{
    color:var(--green);

    font-size:7px;
    font-weight:950;
    letter-spacing:1px;

    text-transform:uppercase;
}

.onboarding-result-next strong{
    margin-top:3px;

    color:#fff;

    font-size:11px;
    font-weight:950;
}

.onboarding-result-next p{
    margin:4px 0 0;

    color:rgba(255,255,255,.48);

    font-size:8px;
    line-height:1.5;
}

.onboarding-result-next > span{
    color:var(--green);

    font-size:20px;
    font-weight:900;
}

.onboarding-result-button{
    width:100%;
    min-height:54px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;

    margin-top:14px;
    padding:0 18px;

    border:0;
    border-radius:14px;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

    color:#061009;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:11px;
    font-weight:950;

    cursor:pointer;

    box-shadow:
        0 13px 30px rgba(61,255,142,.16);

    transition:
        transform .20s ease,
        box-shadow .20s ease;
}

.onboarding-result-button:hover{
    transform:translateY(-2px);

    box-shadow:
        0 16px 35px rgba(61,255,142,.24);
}

.onboarding-result-button b{
    font-size:19px;
}

.onboarding-result-note{
    display:block;

    margin-top:11px;

    color:rgba(255,255,255,.34);

    font-size:7px;
    line-height:1.5;
}

@keyframes onboardingResultSpark{
    0%,
    100%{
        opacity:.35;
        transform:scale(.75);
    }

    50%{
        opacity:1;
        transform:scale(1.2);
    }
}

@media(max-width:600px){
    .onboarding-result-modal{
        align-items:flex-end;
        padding:0;
    }

    .onboarding-result-sheet{
        max-width:none;

        padding:
            16px
            16px
            calc(20px + env(safe-area-inset-bottom));

        border-right:0;
        border-bottom:0;
        border-left:0;

        border-radius:25px 25px 0 0;
    }

    .onboarding-result-handle{
        display:block;
    }

    .onboarding-result-icon{
        width:84px;
        height:84px;

        margin-top:18px;
    }

    .onboarding-result-icon > span{
        width:49px;
        height:49px;

        font-size:25px;
    }

    .onboarding-result-sheet h2{
        font-size:34px;
    }
}

/* =========================================================
   ONBOARDING | GÖREV MERKEZİ SPOTLIGHT
========================================================= */

.onboarding-task-button-overlay{
    position:fixed;
    inset:0;
    z-index:23990;
    background:rgba(1,6,3,.88);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}

body.onboarding-task-button-active .ligame-topbar{
    z-index:23992!important;
}

body.onboarding-task-button-active #topbarMissionButton{
    position:relative;
    z-index:23994!important;
    pointer-events:auto;
    border-color:var(--green)!important;
    box-shadow:
        0 0 0 4px rgba(61,255,142,.18),
        0 0 0 10px rgba(61,255,142,.07),
        0 16px 38px rgba(0,0,0,.45);
    animation:onboardingTaskButtonPulse 1.7s ease-in-out infinite;
}

.onboarding-task-button-coach{
    position:fixed;
    top:82px;
    right:14px;
    z-index:23995;
    width:min(330px,calc(100vw - 24px));
    padding:17px;
    border:1px solid rgba(61,255,142,.28);
    border-radius:15px;
    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.13),
            transparent 42%
        ),
        var(--card);
    box-shadow:0 24px 65px rgba(0,0,0,.55);
}

.onboarding-task-button-coach::before{
    content:"";
    position:absolute;
    top:-7px;
    right:25px;
    width:13px;
    height:13px;
    border-top:1px solid rgba(61,255,142,.28);
    border-left:1px solid rgba(61,255,142,.28);
    background:var(--card);
    transform:rotate(45deg);
}

.onboarding-task-button-coach > span,
.onboarding-task-mission-coach > span{
    display:block;
    color:var(--green);
    font-size:8px;
    font-weight:950;
    letter-spacing:1.3px;
    text-transform:uppercase;
}

.onboarding-task-button-coach h3,
.onboarding-task-mission-coach h3{
    margin:8px 0 7px;
    color:var(--white);
    font-family:'Bebas Neue',cursive;
    font-size:27px;
    font-weight:400;
    line-height:1;
    letter-spacing:.7px;
}

.onboarding-task-button-coach p,
.onboarding-task-mission-coach p{
    margin:0;
    color:var(--gray);
    font-size:10px;
    line-height:1.65;
}

.onboarding-task-button-coach small,
.onboarding-task-mission-coach small{
    display:block;
    margin-top:10px;
    padding-top:9px;
    border-top:1px solid var(--border);
    color:var(--green);
    font-size:8px;
    font-weight:850;
    line-height:1.5;
}

/* Görev çekmecesi açıldıktan sonraki adım */

body.onboarding-task-mission-active
#topbarProfileOverlay{
    z-index:24000!important;
    background:rgba(1,6,3,.83)!important;
    backdrop-filter:blur(5px);
    -webkit-backdrop-filter:blur(5px);
}

body.onboarding-task-mission-active
#topbarProfileMenu{
    z-index:24010!important;
}

body.onboarding-task-mission-active
#topbarMissionXpPanel,
body.onboarding-task-mission-active
#topbarMissionCenterHead,
body.onboarding-task-mission-active
#topbarMissionAllLink,
body.onboarding-task-mission-active
.ligame-task-account-bar,
body.onboarding-task-mission-active
.ligame-task-row:not(.onboarding-culture-mission-target){
    opacity:.15!important;
    filter:blur(1.5px);
    pointer-events:none!important;
    transition:
        opacity .22s ease,
        filter .22s ease;
}

.onboarding-culture-mission-target{
    position:relative;
    z-index:24016!important;
}

body.onboarding-task-mission-active
.onboarding-culture-mission-target{
    opacity:1!important;
    filter:none!important;
    pointer-events:auto!important;
    border-color:var(--green)!important;
    background:
        radial-gradient(
            circle at right,
            rgba(61,255,142,.13),
            transparent 46%
        ),
        var(--card-2)!important;
    box-shadow:
        0 0 0 3px rgba(61,255,142,.14),
        0 16px 40px rgba(0,0,0,.38);
    animation:onboardingMissionPulse 1.7s ease-in-out infinite;
}

.onboarding-culture-mission-target.is-loading{
    opacity:.62!important;
    pointer-events:none!important;
}

.onboarding-task-mission-coach{
    position:fixed;
    z-index:24020;
    display:none;
    padding:16px;
    border:1px solid rgba(61,255,142,.28);
    border-radius:15px;
    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.13),
            transparent 42%
        ),
        var(--card);
    box-shadow:0 24px 65px rgba(0,0,0,.58);
}

body.onboarding-task-mission-active
.onboarding-task-mission-coach{
    display:block;
    animation:onboardingTaskCoachIn .25s ease both;
}

.onboarding-task-mission-coach::before{
    content:"";
    position:absolute;

    left:var(
        --task-coach-arrow-left,
        50%
    );

    width:13px;
    height:13px;

    background:var(--card);

    transform:
        translateX(-50%)
        rotate(45deg);
}

.onboarding-task-mission-coach[data-placement="bottom"]::before{
    top:-7px;
    border-top:1px solid rgba(61,255,142,.28);
    border-left:1px solid rgba(61,255,142,.28);
}

.onboarding-task-mission-coach[data-placement="top"]::before{
    bottom:-7px;
    border-right:1px solid rgba(61,255,142,.28);
    border-bottom:1px solid rgba(61,255,142,.28);
}

@keyframes onboardingTaskButtonPulse{
    0%,100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.06);
    }
}

@keyframes onboardingMissionPulse{
    0%,100%{
        box-shadow:
            0 0 0 3px rgba(61,255,142,.12),
            0 16px 40px rgba(0,0,0,.38);
    }

    50%{
        box-shadow:
            0 0 0 7px rgba(61,255,142,.18),
            0 18px 46px rgba(0,0,0,.48);
    }
}

@keyframes onboardingTaskCoachIn{
    from{
        opacity:0;
        transform:translateY(7px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:600px){
    .onboarding-task-button-coach{
        top:76px;
        right:10px;
        width:calc(100vw - 20px);
    }

    .onboarding-task-button-coach h3,
    .onboarding-task-mission-coach h3{
        font-size:23px;
    }
}


@media(max-width:600px){

    .onboarding-task-mission-coach{
        width:calc(100vw - 28px) !important;
        max-width:340px;

        padding:15px;

        border-radius:14px;

        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .onboarding-task-mission-coach h3{
        margin-top:7px;
        font-size:22px;
        line-height:1.05;
    }

    .onboarding-task-mission-coach p{
        font-size:10px;
        line-height:1.55;
    }

    .onboarding-task-mission-coach small{
        margin-top:8px;
        padding-top:8px;
    }
}


/* =========================================================
   ONBOARDING | KÜLTÜR DUVARI FİNAL
========================================================= */


@keyframes cultureWallFinalPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.012);
    }
}

/* =========================================================
   ONBOARDING | KÜLTÜR DUVARI
========================================================= */

.culture-wall-onboarding-target{
    position:relative !important;
    z-index:10002 !important;

    opacity:1 !important;
    filter:none !important;

    border-color:
        rgba(61,255,142,.40) !important;

    box-shadow:
        0 0 0 4px rgba(61,255,142,.16),
        0 0 0 9px rgba(61,255,142,.07),
        0 25px 70px rgba(0,0,0,.58) !important;

    animation:
        cultureWallOnboardingPulse
        1.7s ease-in-out infinite;
}


.culture-wall-badges-coach{
    width:min(
        340px,
        calc(100vw - 24px)
    );
}


.culture-wall-onboarding-continue{
    width:100%;

    margin-top:15px;
    padding:13px 14px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:0;
    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

    color:#061008;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    font-size:11px;
    font-weight:950;

    cursor:pointer;

    box-shadow:
        0 12px 28px
        rgba(61,255,142,.16);

    transition:.22s ease;
}


.culture-wall-onboarding-continue:hover{
    transform:translateY(-2px);
}


.culture-wall-onboarding-continue:disabled{
    opacity:.65;
    cursor:not-allowed;
}


.culture-wall-onboarding-continue.is-loading{
    pointer-events:none;
}


.culture-wall-onboarding-continue span{
    color:inherit;
}


.culture-wall-onboarding-continue b{
    font-size:18px;
}


.culture-final-guide-form{
    width:100%;
    margin:0;
}


.culture-final-guide-form
.onboarding-result-button{
    width:100%;
}


@keyframes cultureWallOnboardingPulse{
    0%,
    100%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.012);
    }
}


@media(max-width:600px){

    .culture-wall-badges-coach{
        max-width:
            calc(100vw - 24px);
    }

}


/* =========================================================
   ONBOARDING | FINAL GUIDE
========================================================= */

body.onboarding-final-guide-open{
    overflow:hidden;
}

.onboarding-final-guide{
    position:fixed;
    inset:0;

    z-index:26000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px;

    opacity:0;
    visibility:hidden;

    transition:.25s ease;
}

.onboarding-final-guide.is-visible{
    opacity:1;
    visibility:visible;
}

.onboarding-final-guide.is-closing{
    opacity:0;
}


.onboarding-final-guide-backdrop{
    position:absolute;
    inset:0;

    background:rgba(2,7,4,.88);

    backdrop-filter:blur(9px);
    -webkit-backdrop-filter:blur(9px);
}


.onboarding-final-guide-sheet{
    position:relative;
    z-index:2;

    width:100%;
    max-width:590px;
    max-height:calc(100vh - 36px);

    overflow-y:auto;

    padding:22px;

    border:1px solid var(--border);
    border-radius:18px;

    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.09),
            transparent 34%
        ),
        var(--card);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.65);

    transform:
        translateY(20px)
        scale(.98);

    transition:.3s ease;

    scrollbar-width:none;
}

.onboarding-final-guide-sheet::-webkit-scrollbar{
    display:none;
}

.onboarding-final-guide.is-visible
.onboarding-final-guide-sheet{
    transform:
        translateY(0)
        scale(1);
}


.onboarding-final-guide-handle{
    width:42px;
    height:4px;

    margin:0 auto 18px;

    border-radius:20px;

    background:var(--border);
}


/* HEADER */

.onboarding-final-guide-header{
    margin-bottom:22px;
}

.onboarding-final-guide-header > div:first-child{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.onboarding-final-guide-header span{
    color:var(--green);

    font-size:9px;
    font-weight:950;

    letter-spacing:1.4px;
}

.onboarding-final-guide-header strong{
    color:var(--gray);

    font-size:11px;
}


.onboarding-final-guide-progress{
    display:grid;

    grid-template-columns:
        repeat(5,1fr);

    gap:5px;

    margin-top:11px;
}

.onboarding-final-guide-progress i{
    height:4px;

    border-radius:99px;

    background:var(--card-2);

    transition:.25s;
}

.onboarding-final-guide-progress i.active{
    background:var(--green);
}


/* PANELS */

.onboarding-final-guide-panel{
    display:none;

    animation:
        finalGuideEnter
        .28s ease;
}

.onboarding-final-guide-panel.active{
    display:block;
}


.onboarding-final-guide-icon{
    width:64px;
    height:64px;

    display:grid;
    place-items:center;

    margin-bottom:16px;

    border-radius:18px;

    font-size:29px;
}

.onboarding-final-guide-icon.sport{
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.20);
}

.onboarding-final-guide-icon.culture{
    background:rgba(255,95,87,.10);
    border:1px solid rgba(255,95,87,.20);
}

.onboarding-final-guide-icon.word{
    background:rgba(255,185,56,.10);
    border:1px solid rgba(255,185,56,.20);
}

.onboarding-final-guide-icon.ranking{
    background:rgba(255,185,56,.10);
    border:1px solid rgba(255,185,56,.20);
}

.onboarding-final-guide-icon.store{
    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.20);
}


.onboarding-final-guide-eyebrow{
    display:block;

    margin-bottom:6px;

    color:var(--green);

    font-size:9px;
    font-weight:950;

    letter-spacing:1.5px;
}

.onboarding-final-guide-eyebrow.culture{
    color:var(--red);
}

.onboarding-final-guide-eyebrow.word,
.onboarding-final-guide-eyebrow.ranking{
    color:var(--gold);
}


.onboarding-final-guide-panel h2{
    margin:0;

    color:var(--white);

    font-family:'Bebas Neue',cursive;

    font-size:36px;
    font-weight:400;

    letter-spacing:.8px;
}


.onboarding-final-guide-description{
    margin:8px 0 19px;

    color:var(--gray);

    font-size:12px;
    line-height:1.7;
}


/* INFO CARDS */

.onboarding-final-guide-cards{
    display:grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap:8px;
}

.onboarding-final-guide-cards.three{
    grid-template-columns:
        repeat(3,minmax(0,1fr));
}


.onboarding-final-guide-cards > div{
    min-height:130px;

    padding:14px;

    border:1px solid var(--border);
    border-radius:12px;

    background:var(--card-2);
}

.onboarding-final-guide-cards > div > span{
    display:block;

    margin-bottom:9px;

    font-size:22px;
}

.onboarding-final-guide-cards strong{
    display:block;

    color:var(--white);

    font-size:11px;
}

.onboarding-final-guide-cards p{
    margin-top:6px;

    color:var(--gray);

    font-size:9px;
    line-height:1.55;
}


/* CULTURE SCORE */

.onboarding-final-guide-score-table{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:7px;
}

.onboarding-final-guide-score-table > div{
    padding:11px 8px;

    border:1px solid var(--border);
    border-radius:9px;

    background:var(--card-2);

    text-align:center;
}

.onboarding-final-guide-score-table strong{
    display:block;

    color:var(--gray);

    font-size:9px;
}

.onboarding-final-guide-score-table span{
    display:block;

    margin-top:4px;

    color:var(--green);

    font-family:'Bebas Neue',cursive;

    font-size:23px;
}

.onboarding-final-guide-score-table .danger span{
    color:var(--red);
}


/* INFO */

.onboarding-final-guide-info{
    display:flex;
    align-items:flex-start;

    gap:11px;

    margin-top:13px;
    padding:13px;

    border:1px solid
        rgba(61,255,142,.18);

    border-radius:11px;

    background:
        rgba(61,255,142,.06);
}

.onboarding-final-guide-info > span{
    font-size:23px;
}

.onboarding-final-guide-info strong{
    display:block;

    color:var(--white);

    font-size:11px;
}

.onboarding-final-guide-info p{
    margin-top:5px;

    color:var(--gray);

    font-size:9px;
    line-height:1.6;
}


/* RANKING */

.onboarding-final-guide-ranking{
    display:flex;
    flex-direction:column;

    gap:8px;
}

.onboarding-final-guide-ranking > div{
    display:flex;

    gap:11px;

    padding:13px;

    border:1px solid var(--border);
    border-radius:11px;

    background:var(--card-2);
}

.onboarding-final-guide-ranking > div > span{
    font-size:24px;
}

.onboarding-final-guide-ranking strong{
    display:block;

    color:var(--white);

    font-size:11px;
}

.onboarding-final-guide-ranking p{
    margin-top:4px;

    color:var(--gray);

    font-size:9px;
    line-height:1.55;
}


/* STORE FLOW */

.onboarding-final-guide-reward-flow{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:5px;

    margin:18px 0;
}

.onboarding-final-guide-reward-flow > div{
    flex:1;

    min-width:0;

    padding:11px 4px;

    border:1px solid var(--border);
    border-radius:10px;

    background:var(--card-2);

    text-align:center;
}

.onboarding-final-guide-reward-flow span{
    display:block;

    margin-bottom:4px;

    font-size:21px;
}

.onboarding-final-guide-reward-flow strong{
    color:var(--white);

    font-size:8px;
}

.onboarding-final-guide-reward-flow > b{
    color:var(--green);

    font-size:15px;
}


/* FOOTER */

.onboarding-final-guide-footer{
    margin-top:22px;

    padding-top:16px;

    border-top:1px solid var(--border);
}

.onboarding-final-guide-footer button{
    width:100%;

    padding:14px 16px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border:0;
    border-radius:11px;

    background:
        linear-gradient(
            135deg,
            var(--green),
            var(--green-dark)
        );

    color:#061008;

    font-size:12px;
    font-weight:950;

    cursor:pointer;
}

.onboarding-final-guide-footer button:disabled{
    opacity:.60;
}

.onboarding-final-guide-footer button b{
    font-size:18px;
}


.onboarding-final-guide-footer small{
    display:block;

    margin-top:9px;

    color:var(--gray);

    text-align:center;

    font-size:8px;
}


@keyframes finalGuideEnter{
    from{
        opacity:0;
        transform:translateX(10px);
    }

    to{
        opacity:1;
        transform:translateX(0);
    }
}


@media(max-width:600px){

    .onboarding-final-guide{
        align-items:flex-end;

        padding:0;
    }

    .onboarding-final-guide-sheet{
        max-height:91vh;

        padding:19px 15px 22px;

        border-radius:
            22px 22px 0 0;
    }

    .onboarding-final-guide-panel h2{
        font-size:31px;
    }

    .onboarding-final-guide-cards.three{
        grid-template-columns:1fr;
    }

    .onboarding-final-guide-cards.three > div{
        min-height:auto;
    }

    .onboarding-final-guide-score-table{
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}


/* =========================================================
   LIGAME | BİLDİRİM MERKEZİ
   Mevcut LigaMe tasarım sistemi ile uyumlu
========================================================= */

.ligame-menu-btn{
    position:relative;
}


/* =========================================================
   TOPBAR BİLDİRİM BADGE
========================================================= */

.ligame-notification-topbar-badge{
    position:absolute;
    top:-3px;
    right:-4px;

    min-width:17px;
    height:17px;

    padding:0 4px;

    display:none;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:var(--red);
    color:#fff;

    border:2px solid var(--bg);

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:8px;
    font-weight:950;
    line-height:1;

    box-shadow:0 4px 10px rgba(0,0,0,.22);

    z-index:5;
}

.ligame-notification-topbar-badge.show{
    display:flex;
}


/* =========================================================
   DESKTOP SIDEBAR
========================================================= */

.ligame-sidebar-notification-link{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}

.ligame-sidebar-notification-link > span{
    min-width:0;
    flex:1;

    font-size:inherit!important;
    text-align:left!important;
}

.ligame-sidebar-notification-badge{
    min-width:20px;
    height:20px;

    padding:0 6px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    border-radius:999px;

    background:var(--red);
    color:#fff;

    font-size:8px;
    font-weight:950;
}


/* =========================================================
   MOBİL MENÜ BİLDİRİM SATIRI
========================================================= */

.ligame-mobile-notification-link{
    width:100%;
    min-height:56px;

    display:flex;
    align-items:center;
    gap:11px;

    margin:0 0 14px;
    padding:10px 12px;

    border-radius:0;

    border:1px solid var(--border);
    border-left:2px solid var(--green);

    background:var(--card-gradient);

    color:var(--white);
    text-decoration:none;

    box-shadow:0 8px 20px var(--shadow-soft);

    transition:
        border-color .2s ease,
        background .2s ease;
}

.ligame-mobile-notification-link:active{
    background:var(--card-2);
}

.ligame-mobile-notification-icon{
    width:36px;
    height:36px;

    flex:0 0 36px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.18);

    color:var(--green);

    font-size:15px;
}

.ligame-mobile-notification-link > div{
    flex:1;
    min-width:0;
}

.ligame-mobile-notification-link strong{
    display:block;

    color:var(--white);

    font-size:12px;
    font-weight:900;
}

.ligame-mobile-notification-link small{
    display:block;

    margin-top:3px;

    color:var(--gray);

    font-size:9px;
    font-weight:700;
}

.ligame-mobile-notification-badge{
    min-width:21px;
    height:21px;

    padding:0 6px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    border-radius:999px;

    background:var(--red);
    color:#fff;

    font-size:8px;
    font-weight:950;
}

.ligame-mobile-notification-arrow{
    color:var(--gray);

    font-family:Arial,sans-serif;
    font-size:19px;

    line-height:1;
}


/* =========================================================
   SAYFA
========================================================= */

.ligame-notifications-page{
    background:var(--page-gradient);
}

.ligame-notifications-shell{
    width:100%;
    max-width:1200px;

    margin:0 auto;
}


/* =========================================================
   HERO
========================================================= */

.ligame-notification-hero{
    position:relative;

    min-height:150px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:22px;

    margin-bottom:14px;
    padding:22px;

    overflow:hidden;

    border:1px solid rgba(61,255,142,.17);
    border-radius:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.16),
            transparent 42%
        ),
        var(--card-gradient);

    box-shadow:
        0 16px 38px var(--shadow-soft);
}

.ligame-notification-hero-copy{
    min-width:0;
}

.ligame-notification-hero-copy > span{
    display:block;

    margin-bottom:6px;

    color:var(--green);

    font-size:9px;
    font-weight:950;
    letter-spacing:1.7px;
}

.ligame-notification-hero h1{
    margin:0;

    color:var(--white);

    font-family:'Bebas Neue',cursive;
    font-size:38px;
    line-height:1;
    letter-spacing:1.2px;
}

.ligame-notification-hero p{
    max-width:540px;

    margin:8px 0 0;

    color:var(--gray);

    font-size:11px;
    line-height:1.65;
}

.ligame-notification-hero-icon{
    width:68px;
    height:68px;

    flex:0 0 68px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:rgba(61,255,142,.09);
    border:1px solid rgba(61,255,142,.20);

    color:var(--green);

    font-size:27px;
}


/* =========================================================
   TOOLBAR
========================================================= */

.ligame-notification-toolbar{
    min-height:54px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    margin-bottom:10px;
    padding:0 14px;

    border:1px solid var(--border);
    border-radius:0;

    background:var(--card-gradient);

    box-shadow:0 8px 20px var(--shadow-soft);
}

.ligame-notification-toolbar-info{
    display:flex;
    align-items:center;
    gap:7px;
}

.ligame-notification-toolbar-info span{
    color:var(--gray);

    font-size:9px;
    font-weight:900;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.ligame-notification-toolbar-info strong{
    min-width:22px;
    height:22px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    border-radius:999px;

    background:rgba(61,255,142,.10);
    border:1px solid rgba(61,255,142,.20);

    color:var(--green);

    font-size:9px;
    font-weight:950;
}

.ligame-notification-toolbar form{
    margin:0;
}

.ligame-notification-read-all{
    padding:0;

    border:0;
    background:transparent;

    color:var(--green);

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:10px;
    font-weight:900;

    cursor:pointer;
}

.ligame-notification-read-all:hover{
    text-decoration:underline;
}


/* =========================================================
   BİLDİRİM LİSTESİ
========================================================= */

.ligame-notification-list{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.ligame-notification-row{
    position:relative;

    width:100%;
    min-height:76px;

    display:flex;
    align-items:center;

    gap:12px;

    padding:12px 14px;

    overflow:hidden;

    border:1px solid var(--border);
    border-radius:0;

    background:var(--card-gradient);

    color:var(--white);
    text-decoration:none;

    box-shadow:0 8px 20px var(--shadow-soft);

    transition:
        transform .2s ease,
        border-color .2s ease,
        background .2s ease;
}

@media (hover:hover) and (pointer:fine){

    .ligame-notification-row:hover{
        transform:translateX(3px);

        border-color:
            rgba(61,255,142,.24);
    }

}

.ligame-notification-row.unread{
    border-color:rgba(61,255,142,.22);

    background:
        linear-gradient(
            90deg,
            rgba(61,255,142,.075),
            transparent 42%
        ),
        var(--card-gradient);
}

.ligame-notification-row.unread::before{
    content:"";

    position:absolute;

    left:0;
    top:0;
    bottom:0;

    width:3px;

    background:var(--green);
}


/* =========================================================
   CATEGORY ACCENTS
========================================================= */

.ligame-notification-row.notification-culture.unread::before{
    background:var(--red);
}

.ligame-notification-row.notification-mission.unread::before,
.ligame-notification-row.notification-reward.unread::before{
    background:var(--gold);
}

.ligame-notification-row.notification-culture.unread{
    border-color:rgba(255,95,87,.20);

    background:
        linear-gradient(
            90deg,
            rgba(255,95,87,.065),
            transparent 42%
        ),
        var(--card-gradient);
}

.ligame-notification-row.notification-mission.unread,
.ligame-notification-row.notification-reward.unread{
    border-color:rgba(255,185,56,.20);

    background:
        linear-gradient(
            90deg,
            rgba(255,185,56,.065),
            transparent 42%
        ),
        var(--card-gradient);
}


/* =========================================================
   BİLDİRİM İKONU
========================================================= */

.ligame-notification-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:var(--card-2);
    border:1px solid var(--border);

    font-size:18px;
}


/* =========================================================
   COPY
========================================================= */

.ligame-notification-copy{
    min-width:0;
    flex:1;
}

.ligame-notification-title{
    display:flex;
    align-items:center;
    gap:7px;

    min-width:0;
}

.ligame-notification-title strong{
    min-width:0;

    overflow:hidden;

    color:var(--white);

    font-size:12px;
    font-weight:900;

    white-space:nowrap;
    text-overflow:ellipsis;
}

.ligame-notification-title span{
    flex:0 0 auto;

    padding:3px 6px;

    border-radius:999px;

    background:rgba(61,255,142,.11);
    border:1px solid rgba(61,255,142,.20);

    color:var(--green);

    font-size:7px;
    font-weight:950;
    letter-spacing:.4px;
    text-transform:uppercase;
}

.ligame-notification-copy p{
    margin:5px 0 0;

    color:var(--gray);

    font-size:10px;
    font-weight:650;
    line-height:1.55;
}

.ligame-notification-copy small{
    display:block;

    margin-top:6px;

    color:var(--gray);

    opacity:.72;

    font-size:8px;
    font-weight:700;
}

.ligame-notification-arrow{
    flex:0 0 auto;

    color:var(--gray);

    font-family:Arial,sans-serif;
    font-size:22px;

    line-height:1;
}


/* =========================================================
   EMPTY
========================================================= */

.ligame-notification-empty{
    min-height:230px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    padding:28px;

    border:1px dashed var(--border);
    border-radius:0;

    background:var(--card-gradient);

    text-align:center;
}

.ligame-notification-empty-icon{
    width:54px;
    height:54px;

    display:grid;
    place-items:center;

    margin-bottom:13px;

    border-radius:50%;

    background:rgba(61,255,142,.09);
    border:1px solid rgba(61,255,142,.18);

    color:var(--green);

    font-size:20px;
}

.ligame-notification-empty strong{
    color:var(--white);

    font-size:13px;
    font-weight:950;
}

.ligame-notification-empty p{
    max-width:430px;

    margin:7px auto 0;

    color:var(--gray);

    font-size:10px;
    line-height:1.6;
}


/* =========================================================
   PAGINATION
========================================================= */

.ligame-notification-pagination{
    margin-top:18px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(min-width:992px){

    .ligame-notification-hero{
        min-height:170px;
        padding:28px;
    }

    .ligame-notification-hero h1{
        font-size:46px;
    }

    .ligame-notification-row{
        min-height:82px;

        padding:14px 16px;
    }

    .ligame-notification-title strong{
        font-size:13px;
    }

    .ligame-notification-copy p{
        font-size:11px;
    }

}


@media(max-width:600px){

    .ligame-notification-hero{
        min-height:132px;

        padding:18px;
    }

    .ligame-notification-hero h1{
        font-size:32px;
    }

    .ligame-notification-hero p{
        max-width:250px;

        font-size:9px;
    }

    .ligame-notification-hero-icon{
        width:54px;
        height:54px;

        flex-basis:54px;

        font-size:22px;
    }

    .ligame-notification-toolbar{
        min-height:50px;

        padding:0 11px;
    }

    .ligame-notification-row{
        min-height:72px;

        gap:10px;

        padding:11px;
    }

    .ligame-notification-icon{
        width:38px;
        height:38px;

        flex-basis:38px;

        font-size:16px;
    }

    .ligame-notification-title strong{
        font-size:11px;
    }

    .ligame-notification-copy p{
        font-size:9px;
    }

    .ligame-notification-copy small{
        font-size:7px;
    }

}

/* =========================================================
   LIGAME | PUSH SETTING
========================================================= */

.ligame-push-setting{
    position:relative;

    margin-bottom:10px;
    padding:16px;

    border:1px solid rgba(61,255,142,.18);
    border-radius:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.10),
            transparent 42%
        ),
        var(--card-gradient);

    box-shadow:0 10px 24px var(--shadow-soft);
}

.ligame-push-setting-main{
    display:flex;
    align-items:center;
    gap:12px;
}

.ligame-push-setting-icon{
    width:44px;
    height:44px;

    flex:0 0 44px;

    display:grid;
    place-items:center;

    border-radius:10px;

    background:rgba(61,255,142,.09);
    border:1px solid rgba(61,255,142,.18);

    color:var(--green);

    font-size:18px;
}

.ligame-push-setting-copy{
    min-width:0;
    flex:1;
}

.ligame-push-setting-copy span,
.ligame-push-setting-copy strong{
    display:block;
}

.ligame-push-setting-copy span{
    color:var(--green);

    font-size:9px;
    font-weight:950;
    letter-spacing:1.2px;
    text-transform:uppercase;
}

.ligame-push-setting-copy strong{
    max-width:620px;

    margin-top:5px;

    color:var(--white);

    font-size:11px;
    font-weight:750;
    line-height:1.55;
}


/* ALT ALAN */

.ligame-push-setting-action{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:14px;

    margin-top:15px;
    padding-top:14px;

    border-top:1px solid var(--border);
}

.ligame-push-status small,
.ligame-push-status strong{
    display:block;
}

.ligame-push-status small{
    color:var(--gray);

    font-size:8px;
    font-weight:850;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.ligame-push-status strong{
    margin-top:4px;

    color:var(--gray);

    font-size:11px;
    font-weight:950;
}

.ligame-push-setting.is-active
.ligame-push-status strong{
    color:var(--green);
}

.ligame-push-setting.is-denied
.ligame-push-status strong{
    color:var(--red);
}


/* BUTON */

.ligame-push-enable-btn{
    min-height:40px;

    padding:0 15px;

    border:1px solid var(--green);
    border-radius:5px;

    background:var(--green);
    color:#07110a;

    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:9px;
    font-weight:950;
    letter-spacing:.5px;
    text-transform:uppercase;

    cursor:pointer;

    transition:
        transform .2s ease,
        opacity .2s ease,
        background .2s ease;
}

.ligame-push-enable-btn:hover{
    transform:translateY(-1px);
}

.ligame-push-enable-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
    transform:none;
}


/* AKTİF */

.ligame-push-setting.is-active
.ligame-push-enable-btn{
    display:none;
}


/* DENIED */

.ligame-push-setting.is-denied
.ligame-push-enable-btn{
    display:none;
}

.ligame-push-denied-help{
    margin-top:13px;
    padding:10px 11px;

    border-left:2px solid var(--red);

    background:rgba(255,95,87,.07);

    color:var(--gray);

    font-size:9px;
    font-weight:700;
    line-height:1.6;
}


/* UNSUPPORTED */

.ligame-push-setting.is-unsupported
.ligame-push-enable-btn{
    display:none;
}


/* MOBİL */

@media(max-width:600px){

    .ligame-push-setting{
        padding:13px;
    }

    .ligame-push-setting-icon{
        width:40px;
        height:40px;

        flex-basis:40px;

        font-size:16px;
    }

    .ligame-push-setting-copy strong{
        font-size:10px;
    }

    .ligame-push-setting-action{
        margin-top:12px;
        padding-top:12px;
    }

    .ligame-push-enable-btn{
        min-height:38px;
        padding:0 12px;

        font-size:8px;
    }

}


/* =========================================================
   LIGAME | FOREGROUND PUSH NOTIFICATION
========================================================= */

.ligame-foreground-notification{
    position:fixed;

    top:calc(
        env(safe-area-inset-top, 0px)
        + 84px
    );

    left:50%;

    z-index:100000;

    width:calc(100% - 28px);
    max-width:440px;

    overflow:hidden;

    border:1px solid rgba(61,255,142,.22);
    border-radius:10px;

    background:
        radial-gradient(
            circle at top right,
            rgba(61,255,142,.11),
            transparent 42%
        ),
        var(--card-gradient);

    box-shadow:
        0 20px 48px var(--shadow);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    opacity:0;

    transform:
        translate(-50%, -18px)
        scale(.98);

    pointer-events:none;

    transition:
        opacity .26s ease,
        transform .26s ease;
}


.ligame-foreground-notification.show{
    opacity:1;

    transform:
        translate(-50%, 0)
        scale(1);

    pointer-events:auto;
}


/* ===================================
   MAIN
=================================== */

.ligame-foreground-notification-main{
    width:100%;

    min-height:78px;

    display:flex;
    align-items:center;

    gap:11px;

    padding:12px 42px 12px 12px;

    border:0;

    background:transparent;

    color:var(--white);

    text-align:left;

    font-family:
        'Plus Jakarta Sans',
        sans-serif;

    cursor:pointer;
}


/* ===================================
   ICON
=================================== */

.ligame-foreground-notification-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:10px;

    background:rgba(61,255,142,.10);

    border:
        1px solid
        rgba(61,255,142,.18);

    font-size:18px;
}


/* ===================================
   CONTENT
=================================== */

.ligame-foreground-notification-copy{
    flex:1;
    min-width:0;
}


.ligame-foreground-notification-copy small,
.ligame-foreground-notification-copy strong,
.ligame-foreground-notification-copy span{
    display:block;
}


.ligame-foreground-notification-copy small{
    margin-bottom:3px;

    color:var(--green);

    font-size:7px;
    font-weight:950;

    letter-spacing:1.3px;
}


.ligame-foreground-notification-copy strong{
    overflow:hidden;

    color:var(--white);

    font-size:11px;
    font-weight:950;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.ligame-foreground-notification-copy span{
    margin-top:4px;

    overflow:hidden;

    color:var(--gray);

    font-size:9px;
    font-weight:700;

    line-height:1.5;

    display:-webkit-box;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


/* ===================================
   ARROW
=================================== */

.ligame-foreground-notification-arrow{
    flex:0 0 auto;

    color:var(--gray);

    font-family:Arial,sans-serif;

    font-size:21px;
}


/* ===================================
   CLOSE
=================================== */

.ligame-foreground-notification-close{
    position:absolute;

    top:8px;
    right:8px;

    width:26px;
    height:26px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:0;
    border-radius:50%;

    background:var(--card-2);

    color:var(--gray);

    font-size:17px;
    line-height:1;

    cursor:pointer;
}


/* ===================================
   PROGRESS
=================================== */

.ligame-foreground-notification-progress{
    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:2px;

    background:var(--green);

    transform-origin:left center;

    animation:
        ligameForegroundNotificationProgress
        5s linear forwards;
}


/* ===================================
   CATEGORY
=================================== */

.ligame-foreground-notification.notification-culture{
    border-color:
        rgba(255,95,87,.24);
}


.ligame-foreground-notification.notification-culture
.ligame-foreground-notification-icon{
    background:
        rgba(255,95,87,.10);

    border-color:
        rgba(255,95,87,.20);
}


.ligame-foreground-notification.notification-culture
.ligame-foreground-notification-copy small{
    color:var(--red);
}


.ligame-foreground-notification.notification-culture
.ligame-foreground-notification-progress{
    background:var(--red);
}


.ligame-foreground-notification.notification-mission,
.ligame-foreground-notification.notification-reward{
    border-color:
        rgba(255,185,56,.24);
}


.ligame-foreground-notification.notification-mission
.ligame-foreground-notification-copy small,
.ligame-foreground-notification.notification-reward
.ligame-foreground-notification-copy small{
    color:var(--gold);
}


.ligame-foreground-notification.notification-mission
.ligame-foreground-notification-progress,
.ligame-foreground-notification.notification-reward
.ligame-foreground-notification-progress{
    background:var(--gold);
}


/* ===================================
   ANIMATION
=================================== */

@keyframes ligameForegroundNotificationProgress{

    from{
        transform:scaleX(1);
    }

    to{
        transform:scaleX(0);
    }

}


/* ===================================
   MOBILE
=================================== */

@media(max-width:600px){

    .ligame-foreground-notification{
        top:calc(
            env(safe-area-inset-top, 0px)
            + 80px
        );

        width:calc(100% - 20px);

        max-width:none;
    }


    .ligame-foreground-notification-main{
        min-height:72px;

        padding:
            10px 38px
            10px 10px;
    }


    .ligame-foreground-notification-icon{
        width:38px;
        height:38px;

        flex-basis:38px;

        font-size:16px;
    }

}


/* =====================================
   SPORT RANKING XP REWARD
===================================== */

.sport-ranking-reward-overlay{
    position:fixed;
    inset:0;
    z-index:6500;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    background:rgba(2,8,4,.82);

    backdrop-filter:blur(13px);
    -webkit-backdrop-filter:blur(13px);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.25s ease;
}

.sport-ranking-reward-overlay.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.sport-ranking-reward-popup{
    position:relative;

    width:min(100%,390px);

    overflow:hidden;

    padding:30px 24px 24px;

    border:1px solid rgba(255,185,56,.28);
    border-radius:22px;

    background:
        radial-gradient(
            circle at top,
            rgba(255,185,56,.13),
            transparent 42%
        ),
        var(--card-gradient);

    box-shadow:
        0 30px 80px rgba(0,0,0,.50);

    text-align:center;

    transform:translateY(18px) scale(.97);

    transition:.28s ease;
}

.sport-ranking-reward-overlay.open
.sport-ranking-reward-popup{
    transform:translateY(0) scale(1);
}

.sport-ranking-reward-glow{
    position:absolute;

    width:200px;
    height:200px;

    top:-130px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:rgba(255,185,56,.18);

    filter:blur(35px);

    pointer-events:none;
}

.sport-ranking-reward-icon{
    position:relative;

    width:82px;
    height:82px;

    margin:0 auto 14px;

    display:grid;
    place-items:center;

    border-radius:50%;

    border:1px solid rgba(255,185,56,.36);

    background:rgba(255,185,56,.12);

    font-size:40px;

    box-shadow:
        0 0 35px rgba(255,185,56,.12);
}

.sport-ranking-reward-label{
    display:block;

    color:var(--gold);

    font-size:8px;
    font-weight:950;

    letter-spacing:1.7px;
}

.sport-ranking-reward-popup h2{
    margin:7px 0 7px;

    color:var(--white);

    font-family:'Bebas Neue',cursive;
    font-size:35px;

    letter-spacing:1px;
}

.sport-ranking-reward-popup > p{
    margin:0;

    color:var(--gray);

    font-size:11px;
    line-height:1.6;
}

.sport-ranking-reward-popup > p strong{
    color:var(--gold);
}

.sport-ranking-reward-prize{
    margin-top:20px;
    padding:17px;

    border:1px solid rgba(61,255,142,.18);
    border-radius:14px;

    background:rgba(61,255,142,.06);
}

.sport-ranking-reward-prize small{
    display:block;

    color:var(--gray);

    font-size:7px;
    font-weight:950;

    letter-spacing:1.4px;
}

.sport-ranking-reward-prize strong{
    display:block;

    margin-top:4px;

    color:var(--green);

    font-family:'Bebas Neue',cursive;
    font-size:37px;

    letter-spacing:.5px;
}

.sport-ranking-reward-point{
    margin-top:12px;

    color:var(--gray);

    font-size:9px;
}

.sport-ranking-reward-point strong{
    color:var(--white);
}

#sportRankingRewardConfirm{
    width:100%;

    margin-top:20px;
    padding:13px 18px;

    border:0;
    border-radius:11px;

    background:var(--gold);

    color:#161108;

    font-size:10px;
    font-weight:950;

    letter-spacing:.8px;

    cursor:pointer;
}

#sportRankingRewardConfirm:disabled{
    opacity:.55;
    cursor:wait;
}