/* ==========================================================
   MATCHDAY AUTH UI
========================================================== */

.login-btn{
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    padding:0 15px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px;
    background:rgba(255,255,255,.05);
    color:#fff;
    cursor:pointer;
    font-size:.72rem;
    font-weight:800;
    letter-spacing:1.2px;
    transition:.3s ease;
    white-space:nowrap;
}

.login-btn:hover{
    background:#D71920;
    border-color:#D71920;
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(215,25,32,.25);
}

.login-btn img,
.auth-avatar-fallback{
    width:27px;
    height:27px;
    border-radius:50%;
    object-fit:cover;
}

.auth-avatar-fallback{
    display:grid;
    place-items:center;
    background:#D71920;
    color:#fff;
    font-size:.8rem;
}

body.auth-modal-open{ overflow:hidden; }

.auth-modal{
    position:fixed;
    inset:0;
    z-index:10000;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
}

.auth-modal.open{ display:flex; }

.auth-modal-backdrop{
    position:absolute;
    inset:0;
    background:rgba(2,5,10,.78);
    backdrop-filter:blur(8px);
}

.auth-modal-card{
    position:relative;
    width:min(460px,100%);
    padding:34px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:18px;
    background:linear-gradient(145deg,rgba(18,22,30,.98),rgba(8,11,16,.98));
    box-shadow:0 30px 90px rgba(0,0,0,.55);
    color:#fff;
}

.auth-close{
    position:absolute;
    top:12px;
    right:15px;
    border:0;
    background:transparent;
    color:rgba(255,255,255,.65);
    font-size:30px;
    line-height:1;
    cursor:pointer;
}

.auth-heading{ padding-right:25px; }
.auth-heading h2{ margin:8px 0; font-family:var(--font-heading,"Bebas Neue",sans-serif); font-size:2rem; text-transform:uppercase; }
.auth-heading p{ margin:0 0 24px; color:rgba(255,255,255,.6); line-height:1.55; }

.auth-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    margin-bottom:22px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.auth-tab{
    padding:13px;
    border:0;
    border-bottom:2px solid transparent;
    background:transparent;
    color:rgba(255,255,255,.45);
    font-weight:800;
    letter-spacing:1.4px;
    cursor:pointer;
}

.auth-tab.active{ color:#fff; border-bottom-color:#D71920; }

.auth-form{ display:grid; gap:15px; }
.auth-form label{ display:grid; gap:7px; color:rgba(255,255,255,.75); font-size:.78rem; font-weight:700; letter-spacing:.4px; }
.auth-form input{
    width:100%;
    box-sizing:border-box;
    padding:13px 14px;
    border:1px solid rgba(255,255,255,.1);
    border-radius:9px;
    outline:0;
    background:rgba(255,255,255,.05);
    color:#fff;
    font:inherit;
}
.auth-form input:focus{ border-color:rgba(215,25,32,.8); box-shadow:0 0 0 3px rgba(215,25,32,.1); }

.auth-submit{
    margin-top:5px;
    padding:14px;
    border:0;
    border-radius:9px;
    background:#D71920;
    color:#fff;
    font-weight:900;
    letter-spacing:1.5px;
    cursor:pointer;
    transition:.25s ease;
}
.auth-submit:hover{ transform:translateY(-1px); box-shadow:0 10px 30px rgba(215,25,32,.25); }

.auth-status{ min-height:20px; margin-top:14px; font-size:.82rem; line-height:1.4; }
.auth-status.error{ color:#ff7b7b; }
.auth-status.loading{ color:rgba(255,255,255,.65); }
.auth-config-note{ margin:12px 0 0; color:#ffca6b; font-size:.75rem; line-height:1.5; }

@media(max-width:600px){
    .login-btn span:not(.auth-avatar-fallback){ display:none; }
    .login-btn{ width:42px; padding:0; border-radius:50%; }
    .login-btn.logged-in{ width:42px; }
    .auth-modal-card{ padding:28px 20px; }
}

.auth-trigger{
    width:42px;
    height:42px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.05);
    color:#fff;
    cursor:pointer;
}

/* ==========================================================
   MOBILE LOGIN / REG BUTTON
========================================================== */

@media (max-width: 768px) {
    .header-actions { display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; flex-shrink:0 !important; }
    .live-badge { display:none !important; }

    .login-btn {
        width:32px !important; height:42px !important; min-width:32px !important; min-height:42px !important;
        padding:0 !important; margin:0 !important; border:none !important; border-radius:0 !important;
        background:transparent !important; box-shadow:none !important;
        display:flex !important; align-items:center !important; justify-content:center !important;
        position:relative !important; flex-shrink:0 !important; gap:0 !important;
    }
    .login-btn:hover { background:transparent !important; border-color:transparent !important; transform:none !important; box-shadow:none !important; }
    .login-btn span { display:none !important; }
    .login-btn i { display:none !important; }

    .login-btn::before {
        content:"" !important; position:absolute !important; width:9px !important; height:9px !important;
        top:10px !important; left:50% !important; transform:translateX(-50%) !important;
        background:#fff !important; border-radius:50% !important; display:block !important; z-index:5 !important;
    }
    .login-btn::after {
        content:"" !important; position:absolute !important; width:18px !important; height:10px !important;
        bottom:10px !important; left:50% !important; transform:translateX(-50%) !important;
        background:#fff !important; border-radius:10px 10px 5px 5px !important; display:block !important; z-index:5 !important;
    }

    .login-btn.logged-in { width:32px !important; height:42px !important; min-width:32px !important; min-height:42px !important; }
    .login-btn.logged-in::before, .login-btn.logged-in::after { display:none !important; content:none !important; }
    .login-btn.logged-in img, .login-btn.logged-in .auth-avatar-fallback {
        display:block !important; width:27px !important; height:27px !important; position:relative !important; z-index:10 !important;
        border-radius:50% !important; object-fit:cover !important;
    }
}

@media (max-width: 380px) {
    .login-btn, .login-btn.logged-in { width:30px !important; height:40px !important; min-width:30px !important; min-height:40px !important; }
    .login-btn::before { width:8px !important; height:8px !important; top:9px !important; }
    .login-btn::after { width:17px !important; height:9px !important; bottom:9px !important; }
    .login-btn.logged-in img, .login-btn.logged-in .auth-avatar-fallback { width:26px !important; height:26px !important; }
}

/* ==========================================================
   HEADER SPACE FIXES
   Prevent the auth button from entering the logo/tagline area
   on narrow phones such as Galaxy S8.
========================================================== */
@media (max-width: 768px) {
    .header .container {
        gap: 8px !important;
    }

    .logo {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        max-width: calc(100% - 82px) !important;
    }

    .logo-text {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .header-actions {
        flex: 0 0 auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        gap: 4px !important;
    }
}