/* /Components/Layout/MainLayout.razor.rz.scp.css */

.hero[b-vjhda90r16] {
    position: fixed;
    z-index: 120;
    top: 0;
    left: 0;
    right: 0;
    height: clamp(60px, 8vw, 90px);
    display: flex;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    padding: 7px;
    background-color: rgba(26, 26, 30, 0.3);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-bottom: 1.5px solid rgba(255, 255, 255, 0.05);
}
    .hero h2[b-vjhda90r16] {
        font-size: clamp(1.5rem, 5vw, 2rem);
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: 2px;
        background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
   
.logo-container[b-vjhda90r16]{

    display:flex;
    flex-direction:row;
    align-items:end;

}
    .logo[b-vjhda90r16] {
        display: flex;
        align-self: center;
        object-fit: cover;
        height: clamp(50px, 10vw, 80px);
    }
    .logo-text[b-vjhda90r16] {
        text-align:left;
        font-size: clamp(1rem, 3vw, 1.2rem);
        text-transform: uppercase;
        font-weight: 800;
        background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 80%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
.logo-text span[b-vjhda90r16]{
    text-decoration:line-through;
    font-weight:400
}

.snackbar[b-vjhda90r16] {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1A1A1E;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
    width:clamp(250px, 80vw, 500px);
    padding: 7px 7px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}
    .snackbar.show[b-vjhda90r16] {
        top: clamp(80px, 10vw, 120px);
        opacity: 1;
    }

.sidebar-btn[b-vjhda90r16] {
    background-color: transparent;
    background: none;
    box-shadow: none;
    display:flex;
    align-content:center;
    align-items:center;
    padding: 5px;
    margin:0 5px 0 0;
    border-radius: 8px;
    transition: 0.2s all ease;
}
    .sidebar-btn img[b-vjhda90r16] {
        object-position: center;
        height: clamp(28px, 4vw, 34px);
        width: clamp(28px, 4vw, 34px);
        opacity: 0.6;
        transition: opacity 0.2s;
    }

/* Das Grundgerüst der Sidebar (standardmäßig rechts versteckt) */
.sidebar[b-vjhda90r16] {
    z-index: 200;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: clamp(250px, 25vw, 340px);
    font-size: clamp(0.9rem, 3vw, 1rem);
    color: #f5f5f5;
    background-color: rgba(26, 26, 30, 0.3);
    backdrop-filter: blur(30px) brightness(90%);
    -webkit-backdrop-filter: blur(30px) brightness(90%);
    border-left: 1.5px solid rgba(255, 255, 255, 0.05);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-out
}
.sidebar-show[b-vjhda90r16] {
    transform: translateX(0);
}

.sidebar-header[b-vjhda90r16] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.close-btn[b-vjhda90r16] {
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color:#f5f5f5;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.sidebar-content[b-vjhda90r16] {
    flex: 1;
    padding: 24px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.menu-item[b-vjhda90r16] {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: clamp(0.9rem, 3vw, 1rem);
    padding: 12px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 10px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

    .menu-item .icon[b-vjhda90r16] {
        font-size: 1.2rem;
    }
    .menu-item:hover[b-vjhda90r16] {
        color: #ffffff;
        background: rgba(73, 106, 180, 0.15);
        border-color: rgba(73, 106, 180, 0.25);
        transform: translateX(4px);
    }
    .menu-item.active[b-vjhda90r16] {
        color: #f5f5f5;
        background: linear-gradient(90deg, rgba(73, 106, 180, 0.25) 0%, rgba(73, 106, 180, 0.05) 100%);
        border-color: rgba(73, 106, 180, 0.4);
  
    }

.sidebar-divider[b-vjhda90r16] {
    border: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 16px 0;
}

.menu-item.logout:hover[b-vjhda90r16] {
    background: rgba(220, 53, 69, 0.1);
    border-color: rgba(220, 53, 69, 0.2);
    color: #ff4d5e;
}
.sidebar-footer[b-vjhda90r16] {
    padding: 16px 24px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}


#blazor-error-ui[b-vjhda90r16] {
    color-scheme: light only;
    background: rgba(26, 26, 30, 0.3);
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
    #blazor-error-ui .dismiss[b-vjhda90r16] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

    @keyframes SlideRightIn-b-vjhda90r16{
        0%{
            transform:translateX(100px)
        }
        100%{
            transform:translate(0)
        }
    }
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ezt4u743nm],
.components-reconnect-repeated-attempt-visible[b-ezt4u743nm],
.components-reconnect-failed-visible[b-ezt4u743nm],
.components-pause-visible[b-ezt4u743nm],
.components-resume-failed-visible[b-ezt4u743nm],
.components-rejoining-animation[b-ezt4u743nm] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ezt4u743nm],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ezt4u743nm],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ezt4u743nm],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ezt4u743nm],
#components-reconnect-modal.components-reconnect-retrying[b-ezt4u743nm],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ezt4u743nm],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ezt4u743nm],
#components-reconnect-modal.components-reconnect-failed[b-ezt4u743nm],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ezt4u743nm] {
    display: block;
}


#components-reconnect-modal[b-ezt4u743nm] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ezt4u743nm 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ezt4u743nm 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ezt4u743nm 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ezt4u743nm]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ezt4u743nm 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ezt4u743nm {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ezt4u743nm {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ezt4u743nm {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ezt4u743nm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ezt4u743nm] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ezt4u743nm] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ezt4u743nm] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ezt4u743nm] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ezt4u743nm] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ezt4u743nm] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ezt4u743nm 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ezt4u743nm] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ezt4u743nm {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Minigames/HotBomb.razor.rz.scp.css */
.game-screen[b-fr80erchc6] {
    min-width: 350px;
    min-height: 350px;
    width: 50vw;
    height: 50vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: transparent;
    transition: all ease 0.3s;
    animation: popIn-b-fr80erchc6 0.3s ease-out
}

.game-sett[b-fr80erchc6] {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 20px;
    animation: duelSlideDown 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; /* Fliegt auch geschmeidig mit ein */
}

    .game-sett p[b-fr80erchc6] {
        margin: 5px;
        width: 80vw;
    }

    .game-sett div[b-fr80erchc6] {
        display: flex;
        flex-direction: column;
        align-items: center
    }

.game-timer-box[b-fr80erchc6] {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center
}

    .game-timer-box p[b-fr80erchc6] {
        margin: 30px;
    }

    .game-timer-box h3[b-fr80erchc6] {
        margin: 0
    }

.bomb-btn[b-fr80erchc6] {
    width: clamp(70px, 10vw, 120px);
    height: clamp(70px, 10vw, 120px);
    background: url(/icons/time-bomb.png);

    background-size: 100% 100%;
    box-shadow: none;
    margin: 20px;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition:ease 0.1s
}

    .bomb-btn:active[b-fr80erchc6] {
        transform: scale(0.93) !important;
    }

.timer-txt[b-fr80erchc6] {
    animation: duelVsPulse-b-fr80erchc6 1s linear infinite 1s
}

.game-desc[b-fr80erchc6] {
    width: clamp(350px, 40vw, 800px)
}

@keyframes SlideDown-b-fr80erchc6 {
    from {
        transform: translateY(-40px);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes duelVsPulse-b-fr80erchc6 {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.2));
    }

    50% {
        transform: scale(1.25);
        filter: drop-shadow(0 0 15px #be2121);
    }
}

@keyframes popIn-b-fr80erchc6 {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* /Components/Minigames/PenaltyKick.razor.rz.scp.css */
/* --- Gemeinsame Basis & Animationen --- */
.animate-pop[b-sraz5ulewi] {
    animation: popIn-b-sraz5ulewi 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Intro-Bildschirm (Edler Glassmorphism ohne Gelb) --- */
.game-sett-card[b-sraz5ulewi] {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px 24px;
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.mode-badge[b-sraz5ulewi] {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-title[b-sraz5ulewi] {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}

.desc-box[b-sraz5ulewi] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.desc-icon[b-sraz5ulewi] {
    font-size: 1.5rem;
}

.desc-box p[b-sraz5ulewi] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
}

.countdown-wrapper[b-sraz5ulewi] {
    margin-top: 10px;
}

/* Countdown-Zahl jetzt in cleanem Weiß/Blau-Glow */
.timer-txt[b-sraz5ulewi] {
    font-size: 4.5rem;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: pulseScale-b-sraz5ulewi 1s ease-in-out infinite;
}

.countdown-sub[b-sraz5ulewi] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 5px 0 0 0;
}

/* --- Gameplay-Bildschirm --- */
.game-screen[b-sraz5ulewi] {
    width: clamp(320px, 90vw, 500px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Timer-Karte jetzt einheitlich im kühlen Cyan-Look */
.target-card[b-sraz5ulewi] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.target-label[b-sraz5ulewi] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 4px;
}

.target-time[b-sraz5ulewi] {
    font-size: 2.5rem;
    font-weight: 900;
    color: #00f2fe; /* Cleaneres Neon-Cyan statt Gelb */
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
    margin: 0;
}

    .target-time small[b-sraz5ulewi] {
        font-size: 1.2rem;
        font-weight: 500;
        color: #fff;
    }

.score-badge.press-count[b-sraz5ulewi] {
    margin-top: 16px;
    padding: 8px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.1rem;
    color: #ffffff;
}

    .score-badge.press-count strong[b-sraz5ulewi] {
        color: #00f2fe; /* Passt sich dem Cyan an */
        font-size: 1.3rem;
        margin-left: 5px;
    }

/* --- Der minimalistische Klick-Buzzer-Button --- */
.beer-button-wrapper[b-sraz5ulewi] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
}

.beer-btn-modern[b-sraz5ulewi] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #151515, #252525);
    padding: 6px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0,0,0,0.6), inset 0 2px 3px rgba(255,255,255,0.1);
    outline: none;
    position: relative;
    touch-action: manipulation;
    transition: transform 0.05s ease;
}

    /* Der Button-Body ist jetzt dunkel/anthrazit. Nur das zentrierte Icon bringt die Farbe ins Spiel */
    .beer-btn-modern .btn-inner[b-sraz5ulewi] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: url(/icons/beer.png) no-repeat center center;
        background-size: 55% 55%;
        background-color: #222222; /* Schlichter dunkler Button */
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 -4px 10px rgba(0,0,0,0.5), 0 0 20px rgba(255, 255, 255, 0.05); /* Dezenter weißer Schein */
        position: relative;
        overflow: hidden;
    }

    /* Visuelles Feedback beim Hämmern */
    .beer-btn-modern:active:not(:disabled)[b-sraz5ulewi] {
        transform: scale(0.92);
    }

        .beer-btn-modern:active:not(:disabled) .btn-inner[b-sraz5ulewi] {
            background-color: #1a1a1a;
            box-shadow: inset 0 4px 10px rgba(0,0,0,0.6);
        }

    .beer-btn-modern:disabled[b-sraz5ulewi] {
        cursor: not-allowed;
        filter: grayscale(1);
        opacity: 0.4;
        transform: scale(0.96);
    }


/* --- Neues 3-Button Layout für Elfmeterschiessen --- */
/* --- Interaktives Fußballtor-Layout --- */
.soccer-goal-container[b-sraz5ulewi] {
    width: 100%;
    max-width: 460px;
    margin: 20px auto 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Der Pfosten- und Lattenrahmen */
.soccer-goal-post[b-sraz5ulewi] {
    position: relative;
    width: 100%;
    height: 180px;
    border-top: 6px solid #ffffff;
    border-left: 6px solid #ffffff;
    border-right: 6px solid #ffffff;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1), inset 0 0 15px rgba(0, 0, 0, 0.6);
    background: rgba(255, 255, 255, 0.02);
    display: flex;
    overflow: hidden;
}

/* Weißes, dezentes Liniennetz im Hintergrund */
.goal-net-mesh[b-sraz5ulewi] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    opacity: 0.06;
    background-image: linear-gradient(rgba(255,255,255,1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
    background-size: 16px 16px;
    z-index: 1;
}

/* Die 3 unsichtbaren Klickzonen im Tor */
.goal-zone[b-sraz5ulewi] {
    flex: 1;
    height: 100%;
    position: relative;
    cursor: pointer;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.25s ease;
}

    /* Trennlinien zwischen den Zonen im Tor (angedeutet) */
    .goal-zone:not(:last-of-type)[b-sraz5ulewi] {
        border-right: 1px dashed rgba(255, 255, 255, 0.1);
    }

    /* Feedback beim Drücken auf eine Zone */
    .goal-zone:active:not(.disabled)[b-sraz5ulewi] {
        background: rgba(0, 242, 254, 0.1);
    }

/* Pfeile im Tor, die dezent sichtbar sind */
.zone-indicator[b-sraz5ulewi] {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.15);
    transition: all 0.2s ease;
    pointer-events: none;
    user-select: none;
}

.goal-zone:hover:not(.disabled) .zone-indicator[b-sraz5ulewi] {
    color: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
}

/* --- AKTIVER ZUSTAND: Wenn eine Zone getippt wurde --- */
.goal-zone.active[b-sraz5ulewi] {
    background: linear-gradient(to bottom, rgba(0, 242, 254, 0.2), rgba(0, 242, 254, 0.02));
    box-shadow: inset 0 0 20px rgba(0, 242, 254, 0.2);
}

    .goal-zone.active .zone-indicator[b-sraz5ulewi] {
        color: #00f2fe;
        text-shadow: 0 0 10px rgba(0, 242, 254, 0.8);
        transform: scale(1.2);
    }

/* Wenn das Spiel vorbei ist oder blockiert */
.goal-zone.disabled[b-sraz5ulewi] {
    cursor: not-allowed;
    pointer-events: none;
}

/* Die weiße Torlinie am Boden */
.goal-line[b-sraz5ulewi] {
    width: 106%;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 10px rgba(0,0,0,0.5);
    border-radius: 2px;
}

/* Status-Meldungen */
.selection-status[b-sraz5ulewi] {
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    padding: 6px 16px;
    border-radius: 8px;
    margin-bottom: 15px;
}

    .selection-status.waiting[b-sraz5ulewi] {
        color: rgba(255, 255, 255, 0.4);
    }

    .selection-status.confirmed[b-sraz5ulewi] {
        color: #00f2fe;
        animation: pulseScale-b-sraz5ulewi 1.5s infinite;
    }

    .selection-status.locked[b-sraz5ulewi] {
        color: #ff416c;
    }

/* --- Keyframe Animationen --- */
@keyframes popIn-b-sraz5ulewi {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseScale-b-sraz5ulewi {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}
/* /Components/Minigames/PressTheButton.razor.rz.scp.css */
/* --- Gemeinsame Basis & Animationen --- */
.animate-pop[b-ersciq1k70] {
    animation: popIn-b-ersciq1k70 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Intro-Bildschirm (Edler Glassmorphism ohne Gelb) --- */
.game-sett-card[b-ersciq1k70] {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px 24px;
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.mode-badge[b-ersciq1k70] {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-title[b-ersciq1k70] {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}

.desc-box[b-ersciq1k70] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.desc-icon[b-ersciq1k70] {
    font-size: 1.5rem;
}

.desc-box p[b-ersciq1k70] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
}

.countdown-wrapper[b-ersciq1k70] {
    margin-top: 10px;
}

/* Countdown-Zahl jetzt in cleanem Weiß/Blau-Glow */
.timer-txt[b-ersciq1k70] {
    font-size: 4.5rem;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: pulseScale-b-ersciq1k70 1s ease-in-out infinite;
}

.countdown-sub[b-ersciq1k70] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 5px 0 0 0;
}

/* --- Gameplay-Bildschirm --- */
.game-screen[b-ersciq1k70] {
    width: clamp(320px, 90vw, 500px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Timer-Karte jetzt einheitlich im kühlen Cyan-Look */
.target-card[b-ersciq1k70] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.target-label[b-ersciq1k70] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 4px;
}

.target-time[b-ersciq1k70] {
    font-size: 2.5rem;
    font-weight: 900;
    color: #00f2fe; /* Cleaneres Neon-Cyan statt Gelb */
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
    margin: 0;
}

    .target-time small[b-ersciq1k70] {
        font-size: 1.2rem;
        font-weight: 500;
        color: #fff;
    }

.score-badge.press-count[b-ersciq1k70] {
    margin-top: 16px;
    padding: 8px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1.1rem;
    color: #ffffff;
}

    .score-badge.press-count strong[b-ersciq1k70] {
        color: #00f2fe; /* Passt sich dem Cyan an */
        font-size: 1.3rem;
        margin-left: 5px;
    }

/* --- Der minimalistische Klick-Buzzer-Button --- */
.beer-button-wrapper[b-ersciq1k70] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
}

.beer-btn-modern[b-ersciq1k70] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #151515, #252525);
    padding: 6px;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(0,0,0,0.6), inset 0 2px 3px rgba(255,255,255,0.1);
    outline: none;
    position: relative;
    touch-action: manipulation;
    transition: transform 0.05s ease;
}

    /* Der Button-Body ist jetzt dunkel/anthrazit. Nur das zentrierte Icon bringt die Farbe ins Spiel */
    .beer-btn-modern .btn-inner[b-ersciq1k70] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: url(/icons/beer.png) no-repeat center center;
        background-size: 55% 55%;
        background-color: #222222; /* Schlichter dunkler Button */
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: inset 0 -4px 10px rgba(0,0,0,0.5), 0 0 20px rgba(255, 255, 255, 0.05); /* Dezenter weißer Schein */
        position: relative;
        overflow: hidden;
    }

    /* Visuelles Feedback beim Hämmern */
    .beer-btn-modern:active:not(:disabled)[b-ersciq1k70] {
        transform: scale(0.92);
    }

        .beer-btn-modern:active:not(:disabled) .btn-inner[b-ersciq1k70] {
            background-color: #1a1a1a;
            box-shadow: inset 0 4px 10px rgba(0,0,0,0.6);
        }

    .beer-btn-modern:disabled[b-ersciq1k70] {
        cursor: not-allowed;
        filter: grayscale(1);
        opacity: 0.4;
        transform: scale(0.96);
    }

/* --- Keyframe Animationen --- */
@keyframes popIn-b-ersciq1k70 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseScale-b-ersciq1k70 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}
/* /Components/Minigames/QuizMaster.razor.rz.scp.css */
/* --- Gemeinsame Basis & Animationen --- */
.animate-pop[b-gu4hgpkd50] {
    animation: popIn-b-gu4hgpkd50 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Intro-Bildschirm --- */
.game-sett-card[b-gu4hgpkd50] {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px 24px;
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.game-title[b-gu4hgpkd50] {
    font-size: 2.2rem;
    font-weight: 800;
    margin: 0;
    color: #ffffff;
}

.desc-box[b-gu4hgpkd50] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.desc-icon[b-gu4hgpkd50] {
    font-size: 1.5rem;
}

.desc-box p[b-gu4hgpkd50] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.8);
    text-align: left;
}

.countdown-wrapper[b-gu4hgpkd50] {
    margin-top: 10px;
}

.timer-txt[b-gu4hgpkd50] {
    font-size: 4.5rem;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
    animation: pulseScale-b-gu4hgpkd50 1s ease-in-out infinite;
}

.countdown-sub[b-gu4hgpkd50] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.3);
    margin: 5px 0 0 0;
}

/* --- Gameplay-Bildschirm --- */
.game-screen[b-gu4hgpkd50] {
    width: clamp(320px, 95vw, 550px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

.game-timer-box[b-gu4hgpkd50] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.target-card[b-gu4hgpkd50] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 15px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.target-label[b-gu4hgpkd50] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 4px;
}

.target-time[b-gu4hgpkd50] {
    font-size: 2.2rem;
    font-weight: 900;
    color: #00f2fe;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
    margin: 0;
}

    .target-time small[b-gu4hgpkd50] {
        font-size: 1.1rem;
        font-weight: 500;
        color: #fff;
    }

.score-badge.press-count[b-gu4hgpkd50] {
    margin-top: 12px;
    padding: 6px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 1rem;
    color: #ffffff;
}

    .score-badge.press-count strong[b-gu4hgpkd50] {
        color: #00f2fe;
        font-size: 1.2rem;
        margin-left: 5px;
    }

/* --- Fragentext Anzeige --- */
.question-container[b-gu4hgpkd50] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.question-text[b-gu4hgpkd50] {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.4;
    margin: 0;
}

/* --- Zwei-Spalten-Layout für die Optionen --- */
.options-wrapper[b-gu4hgpkd50] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    width: 100%;
    margin-top: 8px;
}

/* Moderne, klickbare Kacheln */
.option-btn[b-gu4hgpkd50] {
    background: linear-gradient(135deg, #1e1e1e, #2a2a2a);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 24px 16px;
    min-height: 140px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.05);
    outline: none;
    touch-action: manipulation;
    transition: transform 0.1s ease, border-color 0.2s ease;
}

/* A / B Indikator Kreis */
.option-label[b-gu4hgpkd50] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #00f2fe;
    font-weight: 800;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Der eigentliche Antwort-Text */
.option-content[b-gu4hgpkd50] {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.3;
    text-align: center;
}

/* Hover & Active Feedback */
.option-btn:hover:not(:disabled)[b-gu4hgpkd50] {
    border-color: rgba(0, 242, 254, 0.4);
}

.option-btn:active:not(:disabled)[b-gu4hgpkd50] {
    transform: scale(0.95);
    background: linear-gradient(135deg, #151515, #222222);
}

.option-btn:disabled[b-gu4hgpkd50] {
    cursor: not-allowed;
    opacity: 0.3;
    transform: scale(0.98);
}

/* --- Keyframe Animationen --- */
@keyframes popIn-b-gu4hgpkd50 {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseScale-b-gu4hgpkd50 {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.06);
    }
}
/* /Components/Minigames/StopTheTime.razor.rz.scp.css */
/* --- Gemeinsame Basis & Animationen --- */
.animate-pop[b-gzh55f84xn] {
    animation: popIn-b-gzh55f84xn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* --- Intro-Bildschirm (Moderne Glassmorphism Karte) --- */
.game-sett-card[b-gzh55f84xn] {
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px 24px;
    width: 90%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.mode-badge[b-gzh55f84xn] {
    background: linear-gradient(135deg, #ff416c, #ff4b2b);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.game-title[b-gzh55f84xn] {
    font-size: 2rem;
    font-weight: 800;
    margin: 0;
    background: linear-gradient(180deg, #fff, #bbb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.desc-box[b-gzh55f84xn] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.desc-icon[b-gzh55f84xn] {
    font-size: 1.5rem;
}

.desc-box p[b-gzh55f84xn] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.85);
    text-align: left;
}

.countdown-wrapper[b-gzh55f84xn] {
    margin-top: 10px;
}

.timer-txt[b-gzh55f84xn] {
    font-size: 4.5rem;
    font-weight: 900;
    margin: 0;
    line-height: 1;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: pulseScale-b-gzh55f84xn 1s ease-in-out infinite;
}

.countdown-sub[b-gzh55f84xn] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin: 5px 0 0 0;
}

/* --- Gameplay-Bildschirm --- */
.game-screen[b-gzh55f84xn] {
    width: clamp(320px, 90vw, 500px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.target-card[b-gzh55f84xn] {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 20px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.target-label[b-gzh55f84xn] {
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    display: block;
    margin-bottom: 4px;
}

.target-time[b-gzh55f84xn] {
    font-size: 2.5rem;
    font-weight: 900;
    color: #00f2fe;
    text-shadow: 0 0 15px rgba(0, 242, 254, 0.4);
    margin: 0;
}

    .target-time small[b-gzh55f84xn] {
        font-size: 1.2rem;
        font-weight: 500;
        color: #fff;
    }

.score-badge[b-gzh55f84xn] {
    margin-top: 16px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.1);
    font-size: 0.95rem;
    text-align: center;
}

    .score-badge.running[b-gzh55f84xn] {
        background: rgba(255, 193, 7, 0.15);
        color: #ffc107;
        border: 1px solid rgba(255, 193, 7, 0.2);
        animation: blinker-b-gzh55f84xn 1.5s linear infinite;
    }

/* --- Der ultimative Buzzer-Button --- */
.time-button-wrapper[b-gzh55f84xn] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px;
}

.time-btn-modern[b-gzh55f84xn] {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #111, #222);
    padding: 8px;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5), inset 0 2px 3px rgba(255,255,255,0.2);
    outline: none;
    position: relative;
    touch-action: manipulation;
    transition: transform 0.1s ease;
}

    .time-btn-modern .btn-inner[b-gzh55f84xn] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: linear-gradient(135deg, #ff0844, #ffb199);
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: inset 0 -6px 12px rgba(0,0,0,0.3), 0 0 20px rgba(255, 8, 68, 0.4);
        position: relative;
        overflow: hidden;
    }

    .time-btn-modern .btn-text[b-gzh55f84xn] {
        color: white;
        font-size: 1.4rem;
        font-weight: 900;
        letter-spacing: 1px;
        text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        z-index: 2;
    }

    /* Button-Zustände */
    .time-btn-modern:active:not(:disabled)[b-gzh55f84xn] {
        transform: scale(0.92);
    }

        .time-btn-modern:active:not(:disabled) .btn-inner[b-gzh55f84xn] {
            background: linear-gradient(135deg, #d30433, #e6967e);
            box-shadow: inset 0 6px 12px rgba(0,0,0,0.4);
        }

    .time-btn-modern:disabled[b-gzh55f84xn] {
        cursor: not-allowed;
        filter: grayscale(0.8);
        opacity: 0.6;
        transform: scale(0.96);
    }

        .time-btn-modern:disabled .btn-inner[b-gzh55f84xn] {
            box-shadow: none;
        }

/* --- Keyframe Animationen --- */
@keyframes popIn-b-gzh55f84xn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes pulseScale-b-gzh55f84xn {
    0%, 100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

@keyframes blinker-b-gzh55f84xn {
    50% {
        opacity: 0.5;
    }
}
/* /Components/Pages/Duelroom.razor.rz.scp.css */

/* --- GLOBALE STRUKTUR --- */
.content[b-aobl11upyw] {
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #0d0d11;
    background-image: radial-gradient(circle at 50% 30%, rgba(190, 33, 33, 0.15) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vh, 100px);
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: 15vh 20px 20px 20px;

}

.header[b-aobl11upyw] {
    color: #be2121;
    font-weight: 900;
    text-shadow: 0 0 20px rgba(190, 33, 33, 0.7);
    animation: duelSlideDown-b-aobl11upyw 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    letter-spacing: 4px;
    text-align: center;
    margin: 0;
}

/* --- ARENA / SPIELER BEREICH --- */
.player-wrapp[b-aobl11upyw] {
    display: flex;
    gap: clamp(40px, 8vw, 200px);
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 500px;
}

/* Gemeinsame Karten-Basis (Schlanker & Moderner) */
.player-card[b-aobl11upyw], .player-card-p2[b-aobl11upyw] {
    flex: 1;
    max-width: 140px;
    background: rgba(26, 26, 30, 0.75);
    backdrop-filter: blur(10px);
    border: 2px solid #be2121;
    border-radius: 24px;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(190, 33, 33, 0.15);
    transition: transform 0.3s ease;
}
    .player-card:hover[b-aobl11upyw], .player-card-p2:hover[b-aobl11upyw] {
        transform: translateY(-5px);
    }

.player-card[b-aobl11upyw] {
    animation: duelSlideLeft-b-aobl11upyw 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
.player-card-p2[b-aobl11upyw] {
    animation: duelSlideRight-b-aobl11upyw 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.player-avatar-wrapper[b-aobl11upyw] {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 2px solid #be2121;
    padding: 4px;
    box-shadow: 0 0 15px rgba(190, 33, 33, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #121214;
}
    .player-avatar-wrapper img[b-aobl11upyw] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;

    }

.player-name[b-aobl11upyw] {
    margin: 12px 0 0 0 !important;
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- ENDSCREEN POPUP (Echtes App-Feeling) --- */
.popup-overlay[b-aobl11upyw] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    backdrop-filter: blur(12px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.duel-popup[b-aobl11upyw] {
    background: #141418;
    padding: 35px 25px;
    width: 70vw;
    max-width: 360px;
    border-radius: 28px;
    text-align: center;
    border: 2px solid transparent;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    animation: 0.2s ease-out popIn-b-aobl11upyw
}
    .duel-popup h2[b-aobl11upyw] {
        font-size: 2rem;
        font-weight: 900;
        margin: 15px 0 5px 0;
        letter-spacing: 3px;
    }

.popup-icon[b-aobl11upyw] {
    font-size: 4rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}
.popup-desc[b-aobl11upyw] {
    color: #a1a1aa;
    margin: 0 0 30px 0;
    line-height: 1.5;
}

/* --- POPUP THEMES --- */
.duel-popup.is-winner[b-aobl11upyw] {
    display: flex;
    flex-direction: column;
    border-color: #ffd700;
    gap: 10px;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.25), inset 0 0 20px rgba(255, 215, 0, 0.05);
}
    .duel-popup.is-winner h2[b-aobl11upyw] {
        color: #ffd700;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }

.duel-popup.is-loser[b-aobl11upyw] {
    display:flex;
    flex-direction:column;
    border-color: #be2121;
    gap: 10px;
    box-shadow: 0 0 30px rgba(190, 33, 33, 0.35), inset 0 0 20px rgba(190, 33, 33, 0.05);
}
    .duel-popup.is-loser h2[b-aobl11upyw] {
        color: #ff3b3b;
        text-shadow: 0 0 15px rgba(255, 59, 59, 0.6);
    }

/* --- BUTTON STYLING --- */
.popup-close-btn[b-aobl11upyw] {
    background: #1e1e24;
    color: #ffffff;
    border: 1px solid #3f3f46;
    padding: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 16px;
    cursor: pointer;
    width: 100%;
    transition: all 0.15s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
    .popup-close-btn:active[b-aobl11upyw] {
        transform: scale(0.96);
        background: #27272f;
        border-color: #52525b;
    }

.allow-btn[b-aobl11upyw] {
    background: #1e1e24;
    color: #ffffff;
    border: 1px solid #3f3f46;
    padding: 14px 5px 14px 5px;
    font-weight: 800;
    letter-spacing: 1px;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    display: flex;
    cursor: default;
    width: 60%;
    cursor: pointer
}
    .allow-btn:hover[b-aobl11upyw] {
        background: #27272f;
        border-color: #52525b;
    }
.allow-btn-allowed[b-aobl11upyw] {
    background: #ffd700; /* Gold */
    color: #000000; /* Schwarz für besseren Kontrast auf Gelb */
    border: none;
    padding: 14px 5px 14px 5px;
    font-weight: 800; /* Extra fett für den "Check"-Look */
    letter-spacing: 1px;
    border-radius: 16px;
    cursor: default;
    width: 60%;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer
}

/* Container für den mittleren Bereich */
.popup-action-card[b-aobl11upyw] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 8px;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.verification-area[b-aobl11upyw]{
    display:flex;
    align-items:center;
    gap:1px;
    text-align:left
}
.verification-area label[b-aobl11upyw]{
    width:130%
}

.woncoins_txt[b-aobl11upyw] {
    display: flex;
    justify-content: center;
    color: #496ab4;
    gap: 5px;
    margin: 0;
    transition: transform 0.1s ease-in-out;
}
    .woncoins_txt img[b-aobl11upyw] {
        height: clamp(25px, 5vw, 30px);
        width: clamp(25px, 5vw, 30px);
        object-position:center;

    }

.penalty-box[b-aobl11upyw] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.penalty-title[b-aobl11upyw] {
    font-size: clamp(0.8rem, 3vw, 1rem);
    letter-spacing: 1px;

    color: #ff3b3b; 
}
.penalty-amount[b-aobl11upyw] {
    font-size: 2rem;
    font-weight: 900;
    margin: 5px 0 5px 0;
    letter-spacing: 3px;
}

/* Kleiner Animation-Effekt beim Erscheinen der Freigabe */
.animate-pop[b-aobl11upyw] {
    animation: button-pop-b-aobl11upyw 0.3s ease-out;
}


/* --- ANIMATIONEN --- */
.animate-fade-in[b-aobl11upyw] {
    animation: fadeIn-b-aobl11upyw 0.3s ease forwards;
}
.animate-pop-in[b-aobl11upyw] {
    animation: popIn-b-aobl11upyw 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


@keyframes button-pop-b-aobl11upyw {
    0% {
        transform: scale(0.9);
    }

    70% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}
@keyframes duelSlideDown-b-aobl11upyw {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes duelSlideLeft-b-aobl11upyw {
    from {
        opacity: 0;
        transform: translateX(-100px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
@keyframes duelSlideRight-b-aobl11upyw {
    from {
        opacity: 0;
        transform: translateX(100px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
@keyframes fadeIn-b-aobl11upyw {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
@keyframes popIn-b-aobl11upyw {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */

.content[b-yos4426cne] {
    position: fixed;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    background: radial-gradient(circle at 50% 30%, rgba(73, 106, 180, 0.12) 0%, transparent 60%);
    animation: fadeIn 0.25s ease-out;
}
.username-label[b-yos4426cne]{
    display:flex;
    justify-content:space-between
}
.profile-container[b-yos4426cne] {
    display: flex;
    flex-direction: column;
    align-content: first baseline;
    align-items: center;
    margin-bottom: 10px;
}
    .profile-container h3[b-yos4426cne] {
        margin: 6px 0 0 0;
        font-weight: 700;
        color: #ffffff;
    }

.profile-image[b-yos4426cne] {
    width: clamp(80px, 10vw, 100px);
    height: clamp(80px, 10vw, 100px);
    border-radius: 100%;
    border: 2px solid #496ab4;
    padding: 3px;
    box-shadow: 0 8px 24px rgba(73, 106, 180, 0.3);
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
    .profile-image img[b-yos4426cne] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 100%;

    }

.input-container[b-yos4426cne] {
    position: relative;
    top: clamp(120px, 18vh, 500px);
    display: flex;
    flex-direction: column;
    gap: 15px;
    background-color: rgba(26, 26, 30, 0.75);
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 24px 24px;
    backdrop-filter: blur(20px) brightness(95%);
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(73, 106, 180, 0.05);
    border-radius: 10px;
    padding: 25px;
    height: fit-content;
    width: clamp(280px, 35vw, 450px);
}
    .input-container div[b-yos4426cne] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .input-container h1[b-yos4426cne] {
        text-align: left;
        text-transform: uppercase;
    }

.room-input-group[b-yos4426cne] {
    animation: fadeIn 0.25s ease-out;
}

.char-selection[b-yos4426cne] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px; 
    width: 100%;
}
    .char-selection select[b-yos4426cne] {
        flex: 1;
    }
.cam-btn[b-yos4426cne] {
    display: inline-flex;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    outline: none;
    padding: 12px;
    height: clamp(15px, 5vw, 22px);
    width: clamp(15px, 5vw, 22px);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
    .cam-btn:hover[b-yos4426cne] {
        border-color: #496ab4;
        background-color: rgba(255, 255, 255, 0.06);
        box-shadow: 0 0 0 4px rgba(73, 106, 180, 0.15);
    }

/* /Components/Pages/Room.razor.rz.scp.css */
/* Container für die gesamte Lobby-Übersicht */
.pushnot-snackbar[b-vs1pa7eu3g] {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #1A1A1E;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #f5f5f5;
    width: clamp(250px, 80vw, 500px);
    padding: 7px 7px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    z-index: 1000;
    transition: top 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s;
    opacity: 0;

}
    .pushnot-snackbar.show[b-vs1pa7eu3g] {
        top: clamp(80px, 10vw, 120px);
        opacity: 1;
    }
.pushnot-snackbar-acc-btn[b-vs1pa7eu3g] {
    width: 50%;
    text-align: center;
}


.lobby-container[b-vs1pa7eu3g] {
    scroll-behavior: smooth;
    overflow: auto;
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 30%, rgba(73, 106, 180, 0.12) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    gap: clamp(30px, 6vh, 80px);
    justify-content: flex-start;
    align-items: center;
    box-sizing: border-box;
    padding: clamp(70px, 7vw, 100px) 20px 20px 20px;
    padding-bottom: 210px;
}
.lobby-title[b-vs1pa7eu3g] {
    text-align: center;
    font-weight: 700;
    font-size:clamp(1.1rem, 4vw, 1.6rem);
    letter-spacing: 0.5px;
    color: #f5f5f5;
}

.hero[b-vs1pa7eu3g] {
    margin-top: 15px;
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    align-content:center;
    justify-content: space-between
}
.room-qr-cont[b-vs1pa7eu3g]{
    display:flex;
    align-content:center;
    align-items:center
}

.score-txt[b-vs1pa7eu3g] {
    flex: 1;
    display: flex;
    align-items: center;
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: popIn-b-vs1pa7eu3g 0.3s ease;
}
    .score-txt img[b-vs1pa7eu3g] {
        width: clamp(30px, 5vw, 40px);
        height: clamp(30px, 5vw, 40px);
        padding-right: 10px;
        object-position: center;
        opacity: 0.6;
    }

.qr-btn[b-vs1pa7eu3g] {
    background: url(/icons/qr-code.png) no-repeat;
    object-position: center;
    background-size: 100%;
    opacity: 0.6;
    box-shadow: none;
    height: clamp(35px, 2vw, 50px);
    width: clamp(35px, 2vw, 50px);
    background-color: none;
    border-radius: 0;
    animation: popIn-b-vs1pa7eu3g 0.3s ease;
    transition: 0.2s all ease;
}
    .qr-btn:hover[b-vs1pa7eu3g] {
        opacity: 0.8;
    }
.qr-btn-show[b-vs1pa7eu3g] {
    padding: 0;
    background: none;
    box-shadow: none;
    height: clamp(60px, 5vw, 150px);
    width: clamp(60px, 5vw, 150px);
    animation: popIn-b-vs1pa7eu3g 0.3s ease;
}
    .qr-btn-show img[b-vs1pa7eu3g] {
        height: 100%;
        width: 100%;
        border-radius: 10px;
    }

/* --- ADMIN BAR & BUTTONS --- */
.admin-bar[b-vs1pa7eu3g] {
    position: fixed;
    z-index: 100;
    text-align: center;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    padding: 10px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: #1A1A1E;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 7px;
    animation: PopInFixed 0.2s ease
}
    .admin-bar label[b-vs1pa7eu3g] {
        font-size: 0.8rem;
        letter-spacing: 2px
    }
    .admin-bar div[b-vs1pa7eu3g] {
        display: flex;
        gap: 7px;
    }

.duel-btn[b-vs1pa7eu3g], .cancel-btn[b-vs1pa7eu3g], .store-btn[b-vs1pa7eu3g] {
    cursor: pointer;
    border-radius: 14px;
    transition: transform 0.1s ease, filter 0.2s ease, background-color 0.2s ease;
}
    .duel-btn:active[b-vs1pa7eu3g], .cancel-btn:active[b-vs1pa7eu3g], .store-btn:active[b-vs1pa7eu3g] {
        transform: scale(0.94);
    }

.duel-btn[b-vs1pa7eu3g] {
    background: #be2121;
    width: 65px;
    padding: 0;
    height: 65px;
    box-shadow: 0 4px 15px rgba(190, 33, 33, 0.4);
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
    .duel-btn:hover[b-vs1pa7eu3g] {
        filter: brightness(1.1);
    }
    .duel-btn img[b-vs1pa7eu3g] {
        width: clamp(20px, 3vw, 25px);
        height: clamp(20px, 3vw, 25px);
        object-fit: cover;
        object-position: center;
    }

.cancel-btn[b-vs1pa7eu3g] {
    box-shadow: none;
    padding: 0;
    width: 65px;
    height: 65px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: #1A1A1E;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
    .cancel-btn:hover[b-vs1pa7eu3g], .store-btn:hover[b-vs1pa7eu3g] {
        background: #27272a;
        border-color: rgba(255, 255, 255, 0.2);
    }
    .cancel-btn img[b-vs1pa7eu3g], .store-btn img[b-vs1pa7eu3g] {
        width: clamp(20px, 3vw, 25px);
        height: clamp(20px, 3vw, 25px);
        object-position: center;
    }

.store-btn[b-vs1pa7eu3g] {
    box-shadow: none;
    padding: 0;
    width: 65px;
    height: 65px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: #1A1A1E;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* --- PLAYER CARDS --- */
.participants-grid[b-vs1pa7eu3g] {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

.player-card[b-vs1pa7eu3g] {
    width: clamp(70px, 6vw, 100px);
    background-color: #1A1A1E;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    will-change: transform;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
}
    .player-card:hover[b-vs1pa7eu3g] {
        transform: translateY(-4px);
        border-color: #496ab4;
        box-shadow: 0 12px 25px rgba(73, 106, 180, 0.25);
    }

.player-card-selected[b-vs1pa7eu3g] {
    width: clamp(70px, 6vw, 100px);
    background-color: #1A1A1E;
    background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    border: 1.5px solid #496ab4;
    border-radius: 20px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 12px 25px rgba(73, 106, 180, 0.3);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s ease, box-shadow 0.25s ease;
    transform: translateY(-4px) scale(1.05);
    cursor: pointer;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE/Edge */
    user-select: none;
}
.player-avatar-wrapper[b-vs1pa7eu3g] {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    border: 2px solid #496ab4;
    padding: 3px;
    box-shadow: 0 8px 24px rgba(73, 106, 180, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
}
    .player-avatar-wrapper img[b-vs1pa7eu3g] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        background: none;
        background-color: none;
    }

.player-name[b-vs1pa7eu3g] {
    margin: 12px 0 0 0 !important;
    font-weight: 600;
    font-size: 1rem;
    color: #f5f5f5;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.player-name-admin[b-vs1pa7eu3g] {
    margin: 12px 0 0 0 !important;
    font-weight: 600;
    font-size: 1rem;
    color: #496ab4;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.winrate-label[b-vs1pa7eu3g] {
    margin: 0;
    font-weight: 300
}

/* --- ANIMATIONEN & LOADING STATE --- */
.loading-state[b-vs1pa7eu3g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: #929292;
    margin-top: 40px;
}

.spinner[b-vs1pa7eu3g] {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    border-top-color: #496ab4;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}


/* ==========================================
   --- DUEL POPUP (1:1 Penalty-Popup Design) --- 
   ========================================== */
/* --- WICHTIG: DIE POPUP BASICS --- */
.popup-overlay[b-vs1pa7eu3g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    backdrop-filter: blur(12px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.duel-popup[b-vs1pa7eu3g] {
    background: #141418;
    padding: 35px 25px;
    width: 70vw;
    max-width: 360px;
    border-radius: 28px;
    text-align: center;
    border: 2px solid transparent;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
}
    .duel-popup h2[b-vs1pa7eu3g] {
        font-size: 2rem;
        font-weight: 900;
        margin: 15px 0 5px 0;
        letter-spacing: 3px;
    }
.popup-icon[b-vs1pa7eu3g] {
    font-size: 4rem;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}
.popup-desc[b-vs1pa7eu3g] {
    color: #a1a1aa;
    margin: 0 0 30px 0;
    line-height: 1.5;
}

/* --- THEMA: ROTER GLOW (is-loser) --- */
.duel-popup.is-loser[b-vs1pa7eu3g] {
    display: flex;
    flex-direction: column;
    border-color: #be2121;
    gap: 10px;
    box-shadow: 0 0 30px rgba(190, 33, 33, 0.35), inset 0 0 20px rgba(190, 33, 33, 0.05);
}
    .duel-popup.is-loser h2[b-vs1pa7eu3g] {
        color: #ff3b3b;
        text-shadow: 0 0 15px rgba(255, 59, 59, 0.6);
    }

/* --- ACTION CARD & PENALTY BOX --- */
.popup-action-card[b-vs1pa7eu3g] {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 15px;
    margin: 10px 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.penalty-box[b-vs1pa7eu3g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.penalty-title[b-vs1pa7eu3g] {
    font-size: 0.9rem;
    letter-spacing: 1px;
    color: #ff3b3b;
}
.penalty-amount[b-vs1pa7eu3g] {
    font-size: 2rem;
    font-weight: 900;
    margin: 5px 0 5px 0;
    letter-spacing: 3px;
    color: #ffffff;
}

/* --- BUTTONS --- */
.allow-btn-allowed[b-vs1pa7eu3g] {
    background: #ffd700;
    color: #000000;
    border: none;
    padding: 14px 20px;
    font-weight: 900;
    letter-spacing: 1px;
    border-radius: 16px;
    width: 100%;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
}

    .allow-btn-allowed:active[b-vs1pa7eu3g] {
        transform: scale(0.95);
    }

/* --- ANIMATIONEN --- */
.animate-fade-in[b-vs1pa7eu3g] {
    animation: fadeIn-b-vs1pa7eu3g 0.3s ease forwards;
}

.animate-pop-in[b-vs1pa7eu3g] {
    animation: popIn-b-vs1pa7eu3g 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes fadeIn-b-vs1pa7eu3g {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn-b-vs1pa7eu3g {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}
.popup-overlay[b-vs1pa7eu3g] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4); /* Leicht abgedunkelt, damit der Blur besser wirkt */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.popup[b-vs1pa7eu3g] {
    background: #141418;
    padding: 35px 25px;
    width: 70vw;
    max-width: 360px;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #27272a; /* Subtiler Rand passend zum Dark-Mode */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    color: #ffffff;
    animation: 0.2s ease-out popIn-b-vs1pa7eu3g
}
.popup-icon[b-vs1pa7eu3g] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.3));
}
.popup h2[b-vs1pa7eu3g] {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    color: #ef4444; /* Knalliges Rot wie die "Strafe!" Warnung */
}
.popup p[b-vs1pa7eu3g] {
    color: #a1a1aa;
    margin: 0 0 25px 0;
    line-height: 1.5;
}
/* Button Container untereinander */
.popup .popup-buttons[b-vs1pa7eu3g] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 10px;
}
    .duel-popup .popup-buttons button:active[b-vs1pa7eu3g] {
        transform: scale(0.96);
    }

/* Annehmen Button (Primär) */
.btn-accept[b-vs1pa7eu3g] {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
}
/* Ablehnen Button (Sekundär) - Exakt wie .btn-cancel */
.btn-decline[b-vs1pa7eu3g] {
    background: #27272a;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    color: #ffffff;
    border: 1px solid #3f3f46 !important;
    box-shadow: none;
}

/*Spielmodus Popup*/
.duelmode-selection-input-cont[b-vs1pa7eu3g]{
    display:flex;
    flex-direction:column
}
    .duelmode-selection-input-cont label[b-vs1pa7eu3g]{
        text-align:left;
        padding:3px 3px 3px 6px
    }
    .duelmode-selection-input-cont div[b-vs1pa7eu3g]{
        display:flex;
        flex-direction:row;
        justify-content:space-between;
        gap:5px
    }
        .duelmode-selection-input-cont div button[b-vs1pa7eu3g] {
            background: #27272a;
            color: #ffffff;
            display:flex;
            border: 1px solid #3f3f46 !important;
            box-shadow: none;
        }
        .duelmode-selection-input-cont img[b-vs1pa7eu3g]{
            height:15px;
            width:15px;
            object-position:center
        }
    .duelmode-selection-input-cont div input[b-vs1pa7eu3g]{
        width:100%;

    }
/* /Components/Pages/ShopPopUp.razor.rz.scp.css */
.main[b-l0o2v8uzs4] {
    position: fixed;
    z-index: 100;
    text-align: center;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    padding: 10px 30px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background-color: #1A1A1E;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 7px;
    animation: PopInFixed 0.2s ease
}
    .main-item[b-l0o2v8uzs4] {
        box-shadow: none;
        width: 65px;
        height:65px;
        padding:0;
        border: 1.5px solid rgba(255, 255, 255, 0.12);
        background: #1A1A1E;
        display: flex;
        gap:5px;
        flex-direction:column;
        justify-content: center;
        align-content: center;
        align-items: center;

    }
    .main-item p[b-l0o2v8uzs4]{
        padding:0;
        margin:0;
        position:relative;
        bottom:0;
        font-weight:500
        
    }
        .main-item img[b-l0o2v8uzs4] {
            width: clamp(20px, 3vw, 25px);
            height: clamp(20px, 3vw, 25px);
            object-position: center;
        }
.close-btn[b-l0o2v8uzs4] {
    box-shadow: none;
    width: 65px;
    height: 65px;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    background: #1A1A1E;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}
    .close-btn img[b-l0o2v8uzs4] {
        width: clamp(20px, 3vw, 25px);
        height: clamp(20px, 3vw, 25px);
        object-position: center;
    }
/* /Components/PenaltyConfirmPopUp.razor.rz.scp.css */
.overlay[b-f15zyclpq6] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4); /* Leicht abgedunkelt, damit der Blur besser wirkt */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
}
.confirm-text[b-f15zyclpq6] {
    color: #ffd700;
    font-weight:800
}
.popup[b-f15zyclpq6] {
    background: #141418;
    padding: 35px 25px;
    width: 70vw;
    max-width: 360px;
    border-radius: 20px;
    text-align: center;
    border: 2px solid #27272a; /* Subtiler Rand passend zum Dark-Mode */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6);
    color: #ffffff;
    animation: 0.2s ease-out popIn-b-f15zyclpq6
}

.popup-icon[b-f15zyclpq6] {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 15px rgba(251, 191, 36, 0.3)); 
}

.popup h2[b-f15zyclpq6] {
    font-size: 1.6rem;
    font-weight: 900;
    margin: 0 0 10px 0;
    letter-spacing: 2px;
    color: #ef4444; /* Knalliges Rot für die "Strafe!" Warnung */
}

.popup-desc[b-f15zyclpq6] {
    color: #a1a1aa;
    margin: 0 0 25px 0;
    line-height: 1.5;
}


/* Button Container */
.popup-buttons[b-f15zyclpq6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-radius: 10px;
    transition: transform 0.2s ease;
}
        .popup-buttons button:active button:hover[b-f15zyclpq6] {
            transform: scale(0.96); 
        }
    .popup-buttons img[b-f15zyclpq6] {
        height: 25px;
        width: 25px
    }

.btn-accept[b-f15zyclpq6] {
    background: #ef4444;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.6);
}
/* Joker Button (Sekundär) */
.btn-decline[b-f15zyclpq6] {
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    gap:10px;
    background: #27272a;
    color: #ffffff;
    border: 1px solid #3f3f46 !important;
    box-shadow:none
}
@keyframes popIn-b-f15zyclpq6 {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(15px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}