/* /Components/Board/CheckerBoard.razor.rz.scp.css */
/*
    Styles the main Royal Checkers game board.

    This component stylesheet creates the eight-column checker grid,
    decorative wooden frame, royal gold trim, depth effects, and
    responsive mobile presentation.
*/

.checker-board[b-fidm15mrdm] {
    /* Creates the positioning context used by the board overlay. */
    position: relative;

    /* Arranges the checker squares into an eight-column grid. */
    display: grid;
    grid-template-columns: repeat(8, 1fr);

    /*
        Keeps the board responsive while limiting its maximum width.
        The 1:1 aspect ratio keeps the board perfectly square.
    */
    width: min(100%, 680px);
    aspect-ratio: 1;
    margin: 1rem auto;

    /* Creates the dark wooden outer frame. */
    border: 14px solid var(--walnut-dark);
    border-radius: 24px;

    /* Adds the royal gold trim inside the board frame. */
    outline: 6px solid var(--royal-gold);
    outline-offset: -10px;

    /* Prevents board content and effects from extending past the frame. */
    overflow: hidden;

    /* Provides a dark wooden background behind the checker squares. */
    background: var(--walnut-dark);

    /*
        Layers inset and outer shadows to create gold trim,
        wooden depth, and a raised three-dimensional board effect.
    */
    box-shadow:
        inset 0 0 0 4px var(--royal-gold-light),
        inset 0 0 28px rgba(0, 0, 0, 0.75),
        0 10px 0 #24150f,
        0 18px 30px rgba(0, 0, 0, 0.5),
        0 35px 70px rgba(0, 0, 0, 0.65);

    /*
        Adds a slight perspective tilt to make the board appear
        dimensional on larger screens.
    */
    transform: perspective(1100px) rotateX(2deg);
    transform-origin: center;
}

/*
    Adds a decorative lighting and shadow overlay across the board.

    The pseudo-element does not receive pointer events, allowing
    checker squares beneath it to remain clickable.
*/
.checker-board[b-fidm15mrdm]::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;

    /*
        Simulates light falling across the board while adding
        a darker shaded area toward the opposite side.
    */
    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.18),
            transparent 18%,
            transparent 68%,
            rgba(0, 0, 0, 0.24)
        );

    /* Adds additional inner shadow depth around the board. */
    box-shadow:
        inset 0 0 38px rgba(0, 0, 0, 0.38);
}

/*
    Adjusts the board for smaller screens and mobile devices.
*/
@media (max-width: 720px) {
    .checker-board[b-fidm15mrdm] {
        /* Uses more available screen width on smaller devices. */
        width: min(100%, 680px);

        /* Reduces frame and trim dimensions for the smaller board. */
        border-width: 8px;
        border-radius: 16px;
        outline-width: 4px;
        outline-offset: -7px;

        /*
            Removes the perspective tilt to keep the board flat
            and easier to view and interact with on small screens.
        */
        transform: none;
    }
}
/* /Components/Board/CheckerPieceView.razor.rz.scp.css */
/*
    Styles the individual Royal Checkers game pieces.

    This component stylesheet creates the jewel-like red and black
    checker pieces, decorative gold detailing, dimensional lighting,
    hover effects, and animated crown used for king pieces.
*/

.piece[b-5fnleraa4a] {
    /*
        Creates the circular checker piece and establishes the
        positioning context for decorative pseudo-elements.
    */
    position: relative;
    width: 78%;
    height: 78%;
    border-radius: 50%;

    /* Centers the king crown icon inside the checker piece. */
    display: grid;
    place-items: center;

    /*
        Clips decorative lighting effects to the circular
        boundary of the checker piece.
    */
    overflow: hidden;

    /* Adds a thin royal gold edge around every checker piece. */
    border: 3px solid var(--royal-gold-light);

    /*
        Layers highlights, inner shadows, and outer shadows
        to give each checker piece a raised three-dimensional shape.
    */
    box-shadow:
        inset 0 10px 16px rgba(255, 255, 255, 0.34),
        inset 0 -18px 24px rgba(0, 0, 0, 0.6),
        inset 0 0 30px rgba(255, 255, 255, 0.08),
        0 3px 0 #2a170d,
        0 10px 14px rgba(0, 0, 0, 0.45),
        0 20px 32px rgba(0, 0, 0, 0.55);

    /*
        Smoothly animates movement, lighting, and shadow changes
        when the player hovers over a checker piece.
    */
    transition:
        transform 220ms ease,
        filter 220ms ease,
        box-shadow 220ms ease;
}

/*
    Creates a transparent lighting layer over each checker piece.

    Multiple gradients simulate a bright jewel highlight,
    reflected light streak, and subtle faceted reflections.
*/
.piece[b-5fnleraa4a]::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;

    background:
        radial-gradient(
            circle at 24% 20%,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.55) 7%,
            transparent 17%
        ),
        linear-gradient(
            125deg,
            transparent 0%,
            transparent 27%,
            rgba(255, 255, 255, 0.18) 32%,
            transparent 39%,
            transparent 100%
        ),
        conic-gradient(
            from 18deg at 50% 50%,
            rgba(255, 255, 255, 0.12),
            transparent 12%,
            rgba(0, 0, 0, 0.18) 24%,
            transparent 36%,
            rgba(255, 255, 255, 0.1) 48%,
            transparent 60%,
            rgba(0, 0, 0, 0.14) 72%,
            transparent 84%,
            rgba(255, 255, 255, 0.1)
        );

    /*
        Blends the lighting layer with the checker piece color
        to create a brighter glass-like reflection.
    */
    mix-blend-mode: screen;
    opacity: 0.88;

    /*
        Allows mouse and touch interaction to pass through
        the decorative lighting layer.
    */
    pointer-events: none;
}

/*
    Creates the decorative inner gold ring on each checker piece.
*/
.piece[b-5fnleraa4a]::after {
    content: "";
    position: absolute;
    inset: 10%;
    border-radius: 50%;

    border: 2px solid rgba(255, 231, 137, 0.88);

    /*
        Layers inner borders, highlights, and glow to make
        the gold ring appear engraved into the checker piece.
    */
    box-shadow:
        inset 0 0 0 3px rgba(79, 42, 10, 0.5),
        inset 0 0 0 6px rgba(255, 214, 88, 0.15),
        inset 0 0 18px rgba(255, 255, 255, 0.12),
        0 0 10px rgba(212, 175, 55, 0.32);

    /* Keeps the decorative ring from blocking piece interaction. */
    pointer-events: none;
}

/*
    Applies the ruby-inspired color and lighting treatment
    to red checker pieces.
*/
.piece.red[b-5fnleraa4a] {
    background:
        radial-gradient(
            circle at 31% 22%,
            #fff9fb 0%,
            #ffd1dd 5%,
            #ff7e9d 12%,
            #f2325c 24%,
            #c30d3d 43%,
            #8f082c 62%,
            #590719 80%,
            #260208 100%
        ),
        linear-gradient(
            155deg,
            rgba(255, 255, 255, 0.12),
            transparent 38%
        );

    /*
        Adds ruby-colored depth, edge shading, and a soft
        red glow around the checker piece.
    */
    box-shadow:
        inset 0 10px 16px rgba(255, 255, 255, 0.48),
        inset 0 -18px 26px rgba(78, 0, 20, 0.8),
        inset 8px 0 20px rgba(255, 45, 96, 0.2),
        inset -7px 0 18px rgba(77, 0, 18, 0.4),
        0 3px 0 #2a170d,
        0 10px 14px rgba(0, 0, 0, 0.45),
        0 20px 34px rgba(0, 0, 0, 0.52),
        0 0 16px rgba(255, 28, 81, 0.38),
        0 0 34px rgba(179, 18, 45, 0.26);

    /* Strengthens the ruby color and dimensional contrast. */
    filter: saturate(1.35) contrast(1.08);
}

/*
    Applies the dark gemstone-inspired color and lighting
    treatment to black checker pieces.
*/
.piece.black[b-5fnleraa4a] {
    background:
        radial-gradient(
            circle at 31% 22%,
            #f2f4fa 0%,
            #adb5c8 5%,
            #697185 12%,
            #343947 24%,
            #191b23 43%,
            #0d0e13 62%,
            #06070a 80%,
            #000 100%
        ),
        linear-gradient(
            150deg,
            rgba(120, 150, 210, 0.14),
            transparent 42%
        );

    /*
        Adds dark depth, cool-toned reflections, and a subtle
        blue-gray glow around the checker piece.
    */
    box-shadow:
        inset 0 10px 16px rgba(255, 255, 255, 0.28),
        inset 0 -18px 26px rgba(0, 0, 0, 0.9),
        inset 8px 0 20px rgba(104, 133, 190, 0.18),
        inset -7px 0 18px rgba(0, 0, 0, 0.45),
        0 3px 0 #2a170d,
        0 10px 14px rgba(0, 0, 0, 0.5),
        0 20px 34px rgba(0, 0, 0, 0.65),
        0 0 14px rgba(121, 150, 210, 0.22),
        0 0 30px rgba(63, 77, 108, 0.2);

    /* Strengthens contrast while preserving the dark piece color. */
    filter: contrast(1.2) brightness(0.98);
}

/*
    Raises and brightens a checker piece when the pointer
    hovers over it.
*/
.piece:hover[b-5fnleraa4a] {
    transform:
        translateY(-5px)
        scale(1.065)
        rotate(-1.5deg);

    filter:
        brightness(1.16)
        saturate(1.2);

    /*
        Strengthens the piece highlights, depth shadow,
        and royal gold glow during the hover interaction.
    */
    box-shadow:
        inset 0 12px 18px rgba(255, 255, 255, 0.48),
        inset 0 -18px 24px rgba(0, 0, 0, 0.58),
        0 4px 0 #2a170d,
        0 20px 32px rgba(0, 0, 0, 0.62),
        0 0 20px rgba(255, 229, 140, 0.5),
        0 0 38px rgba(212, 175, 55, 0.36);
}

/*
    Styles the crown icon displayed inside king pieces.
*/
.king-icon[b-5fnleraa4a] {
    /*
        Places the crown above the piece's decorative
        pseudo-element layers.
    */
    position: relative;
    z-index: 4;

    color: #ffe786;
    font-size: clamp(1rem, 3vw, 1.75rem);

    /*
        Layers gold highlights, depth, and glow to make
        the crown appear bright and dimensional.
    */
    text-shadow:
        0 1px 0 #fffbd2,
        0 2px 0 #e6b933,
        0 4px 0 #8f6100,
        0 6px 7px rgba(0, 0, 0, 0.72),
        0 0 10px rgba(255, 236, 146, 1),
        0 0 24px rgba(212, 175, 55, 0.72);

    /*
        Runs the crown glow and sparkle animations
        continuously at different timing intervals.
    */
    animation:
        crownGlow-b-5fnleraa4a 2.3s ease-in-out infinite,
        crownSparkle-b-5fnleraa4a 4.5s linear infinite;
}

/*
    Gently enlarges and brightens the king crown to create
    a repeating glowing pulse.
*/
@keyframes crownGlow-b-5fnleraa4a {
    0%,
    100% {
        transform: scale(1);
        filter: brightness(1);
    }

    50% {
        transform: scale(1.08);
        filter: brightness(1.35);
    }
}

/*
    Periodically strengthens the crown's highlight and adds
    an offset sparkle to create a brief shimmering effect.
*/
@keyframes crownSparkle-b-5fnleraa4a {
    0%,
    36%,
    44%,
    100% {
        text-shadow:
            0 1px 0 #fffbd2,
            0 2px 0 #e6b933,
            0 4px 0 #8f6100,
            0 6px 7px rgba(0, 0, 0, 0.72),
            0 0 10px rgba(255, 236, 146, 1),
            0 0 24px rgba(212, 175, 55, 0.72);
    }

    40% {
        text-shadow:
            0 1px 0 #fff,
            0 2px 0 #ffe786,
            0 4px 0 #a46f00,
            0 6px 7px rgba(0, 0, 0, 0.72),
            0 0 16px #fff,
            0 0 34px rgba(255, 229, 120, 1),
            9px -8px 6px rgba(255, 255, 255, 0.95);
    }
}
/* /Components/Board/CheckerSquare.razor.rz.scp.css */
/*
    Styles the individual squares that make up the Royal Checkers board.

    This component stylesheet controls square interaction, checker piece
    alignment, alternating board colors, hover feedback, and the visual
    highlight used when a checker piece is selected.
*/

.square[b-8jjogqaewl] {
    /*
        Removes the browser's default button border so each square
        blends naturally into the checkerboard.
    */
    border: none;

    /* Shows that the checker square can be clicked or selected. */
    cursor: pointer;

    /*
        Uses Flexbox to center the checker piece horizontally
        and vertically inside the square.
    */
    display: flex;
    justify-content: center;
    align-items: center;

    /* Smoothly animates visual changes such as the hover transform. */
    transition: 0.15s;

    /*
        Establishes a positioning context for content or effects
        that may be positioned inside the checker square.
    */
    position: relative;
}

/*
    Slightly enlarges a checker square when the pointer hovers over it,
    providing visual feedback that the board is interactive.
*/
.square:hover[b-8jjogqaewl] {
    transform: scale(1.03);
}

/*
    Applies the light cream color to the board's light squares.
*/
.light[b-8jjogqaewl] {
    background: #f6e8c3;
}

/*
    Applies the walnut brown color to the board's dark squares.
*/
.dark[b-8jjogqaewl] {
    background: #7b4d2a;
}

/*
    Adds a royal gold outline to the square containing
    the currently selected checker piece.
*/
.square.selected[b-8jjogqaewl] {
    outline: 5px solid #d4af37;

    /*
        Moves the outline inward so the selection highlight
        remains inside the square's boundaries.
    */
    outline-offset: -5px;
}
/*
    Highlights a dark square that is available as a legal move destination.
*/
.square.legal[b-8jjogqaewl] {
    box-shadow:
        inset 0 0 0 4px rgba(255, 215, 0, 0.8),
        inset 0 0 18px rgba(255, 215, 0, 0.35);
}

/*
    Displays a gold marker in the center of an empty legal destination.
*/
.legal-indicator[b-8jjogqaewl] {
    width: 24%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.85);
    box-shadow:
        0 0 0 5px rgba(255, 255, 255, 0.2),
        0 0 14px rgba(255, 215, 0, 0.9);
    pointer-events: none;
}

/*
    Makes the legal-move marker slightly larger when the player
    hovers over the destination square.
*/
.square.legal:hover .legal-indicator[b-8jjogqaewl] {
    transform: scale(1.15);
}

/*
    Smoothly animates the legal-move marker.
*/
.legal-indicator[b-8jjogqaewl] {
    transition: transform 0.15s ease;
}
/* /Layout/MainLayout.razor.rz.scp.css */

.royal-checkers-layout[b-3hrra9lb85] {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
/* /Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-hnenjlvy7e] {
    background-color: rgba(255, 255, 255, 0.1);
}

.top-row[b-hnenjlvy7e] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-hnenjlvy7e] {
    font-size: 1.1rem;
}

.bi[b-hnenjlvy7e] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-hnenjlvy7e] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-hnenjlvy7e] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-hnenjlvy7e] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-hnenjlvy7e] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-hnenjlvy7e] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-hnenjlvy7e] {
        padding-bottom: 1rem;
    }

    .nav-item[b-hnenjlvy7e]  a {
        color: #d7d7d7;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
    }

.nav-item[b-hnenjlvy7e]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-hnenjlvy7e]  a:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

@media (min-width: 641px) {
    .navbar-toggler[b-hnenjlvy7e] {
        display: none;
    }

    .collapse[b-hnenjlvy7e] {
        /* Never collapse the sidebar for wide screens */
        display: block;
    }

    .nav-scrollable[b-hnenjlvy7e] {
        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/*
    Styles the main Royal Checkers game page.

    This component stylesheet controls the full-page presentation,
    game heading, status and message areas, board placement, controls,
    responsive layout, and animated Royal Victory celebration.
*/

/*
    Creates the full-page Royal Checkers background and
    establishes the default text color for the game page.
*/
.game-shell[b-5yjnog1k50] {
    min-height: 100vh;
    padding: 2rem;
    color: #f8fafc;

    /*
        Layers colorful radial highlights over the dark
        page background to create the Royal Checkers atmosphere.
    */
    background:
        radial-gradient(
            circle at top left,
            rgba(244, 114, 182, 0.25),
            transparent 35%
        ),
        radial-gradient(
            circle at bottom right,
            rgba(45, 212, 191, 0.22),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #0f172a,
            #111827
        );
}

/*
    Arranges the game introduction and current game status
    across the top of the page.
*/
.hero-panel[b-5yjnog1k50] {
    max-width: 980px;
    margin: 0 auto 1.5rem;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

/*
    Styles the small Royal Checkers label above the main heading.
*/
.eyebrow[b-5yjnog1k50] {
    margin: 0 0 0.35rem;
    color: #fbbf24;

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.18em;
    text-transform: uppercase;
}

/*
    Styles the primary game page heading.
*/
h1[b-5yjnog1k50] {
    margin: 0;

    /*
        Uses responsive font sizing while enforcing
        minimum and maximum heading sizes.
    */
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    line-height: 0.95;
}

/*
    Styles the descriptive text displayed below the page heading.
*/
.subtitle[b-5yjnog1k50] {
    max-width: 580px;
    color: #cbd5e1;
    font-size: 1.05rem;
}

/*
    Displays the current turn or game-over status.
*/
.status-card[b-5yjnog1k50] {
    min-width: 170px;
    padding: 1rem 1.25rem;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 1.25rem;

    background: rgba(255, 255, 255, 0.08);

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25);
}

/*
    Styles the small status description inside the status card.
*/
.status-card span[b-5yjnog1k50] {
    display: block;
    color: #cbd5e1;
    font-size: 0.8rem;
}

/*
    Emphasizes the current player or game status.
*/
.status-card strong[b-5yjnog1k50] {
    display: block;
    margin-top: 0.25rem;
    font-size: 1.4rem;
}

/*
    Displays gameplay instructions, move feedback,
    and game-result messages.
*/
.message[b-5yjnog1k50] {
    max-width: 980px;
    margin: 0 auto 1rem;
    padding: 0.85rem 1rem;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1rem;

    background: rgba(15, 23, 42, 0.75);
}

/*
    Centers the CheckerBoard component on the game page.
*/
.board-wrap[b-5yjnog1k50] {
    display: flex;
    justify-content: center;
}

/*
    Arranges the game control buttons below the checkerboard.
*/
.controls[b-5yjnog1k50] {
    max-width: 980px;
    margin: 1.5rem auto 0;

    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/*
    Styles the New Game and Clear Selection control buttons.
*/
.controls button[b-5yjnog1k50] {
    padding: 0.85rem 1.25rem;

    border: 0;
    border-radius: 999px;

    color: #111827;
    background: #facc15;

    font-weight: 800;
    cursor: pointer;

    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.28);
}

/*
    Slightly raises a control button when the pointer hovers over it.
*/
.controls button:hover[b-5yjnog1k50] {
    transform: translateY(-1px);
}

/*
    Adjusts the main game page for smaller screens and mobile devices.
*/
@media (max-width: 720px) {
    .game-shell[b-5yjnog1k50] {
        padding: 1rem;
    }

    /*
        Stacks the introduction and status card vertically
        when horizontal space is limited.
    */
    .hero-panel[b-5yjnog1k50] {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Allows the status card to use the available mobile width. */
    .status-card[b-5yjnog1k50] {
        width: 100%;
    }
}

/*
    Displays the full-screen victory layer when Royal Checkers
    detects that a player has won the game.
*/
.victory-overlay[b-5yjnog1k50] {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 1.5rem;
    overflow: hidden;

    /*
        Darkens and softly blurs the game behind the
        Royal Victory announcement.
    */
    background:
        radial-gradient(
            circle at center,
            rgba(127, 29, 29, 0.32),
            transparent 42%
        ),
        rgba(2, 6, 23, 0.82);

    backdrop-filter: blur(6px);

    animation:
        victory-overlay-in-b-5yjnog1k50 0.5s ease-out;
}

/*
    Creates the central Royal Victory announcement card.
*/
.victory-card[b-5yjnog1k50] {
    position: relative;
    z-index: 2;

    width: min(90vw, 680px);
    padding: 2.5rem 2rem;

    text-align: center;

    border: 3px solid #facc15;
    border-radius: 2rem;

    /*
        Uses layered gradients to create a dark ruby
        and royal-black celebration background.
    */
    background:
        radial-gradient(
            circle at top,
            rgba(220, 38, 38, 0.3),
            transparent 45%
        ),
        linear-gradient(
            145deg,
            #3f0a14,
            #17070b 55%,
            #020617
        );

    /*
        Adds inner gold light, outer glow, and deep shadow
        to raise the victory card above the game board.
    */
    box-shadow:
        inset 0 0 35px rgba(250, 204, 21, 0.15),
        0 0 25px rgba(250, 204, 21, 0.55),
        0 35px 100px rgba(0, 0, 0, 0.8);

    animation:
        victory-card-in-b-5yjnog1k50 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}

/*
    Styles and animates the large crown displayed
    above the victory announcement.
*/
.victory-crown[b-5yjnog1k50] {
    font-size: clamp(4rem, 12vw, 7rem);
    line-height: 1;

    filter:
        drop-shadow(
            0 0 18px rgba(250, 204, 21, 0.8)
        );

    animation:
        victory-crown-float-b-5yjnog1k50
        1.7s
        ease-in-out
        infinite
        alternate;
}

/*
    Styles the small Royal Victory label above the winner name.
*/
.victory-eyebrow[b-5yjnog1k50] {
    margin: 1rem 0 0.5rem;

    color: #fde68a;

    font-size: 0.8rem;
    font-weight: 900;

    letter-spacing: 0.3em;
    text-transform: uppercase;
}

/*
    Styles the large winning-player announcement.
*/
.victory-title[b-5yjnog1k50] {
    margin: 0;

    font-size: clamp(2.5rem, 8vw, 5.5rem);
    line-height: 0.95;

    text-transform: uppercase;

    /*
        Uses currentColor so the glow automatically matches
        the red or black winner title color.
    */
    text-shadow:
        0 3px 0 rgba(0, 0, 0, 0.7),
        0 0 28px currentColor;
}

/*
    Applies the ruby winner color when Red wins the game.
*/
.victory-title.red[b-5yjnog1k50] {
    color: #fb7185;
}

/*
    Applies the silver winner color when Black wins the game.
*/
.victory-title.black[b-5yjnog1k50] {
    color: #cbd5e1;
}

/*
    Displays the reason the game ended below the winner title.
*/
.victory-reason[b-5yjnog1k50] {
    margin: 1.25rem auto 0;

    color: #f8fafc;

    font-size:
        clamp(1rem, 3vw, 1.35rem);
}

/*
    Styles the Play Again button on the victory card.
*/
.victory-button[b-5yjnog1k50] {
    margin-top: 1.75rem;
    padding: 0.9rem 1.6rem;

    border: 0;
    border-radius: 999px;

    color: #111827;

    /*
        Creates the gold gradient used by the royal action button.
    */
    background:
        linear-gradient(
            135deg,
            #fde68a,
            #facc15,
            #d97706
        );

    font-size: 1rem;
    font-weight: 900;

    cursor: pointer;

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(250, 204, 21, 0.4);
}

/*
    Raises and slightly enlarges the Play Again button on hover.
*/
.victory-button:hover[b-5yjnog1k50] {
    transform:
        translateY(-2px)
        scale(1.03);
}

/*
    Creates the full-screen container that holds falling confetti.

    Pointer events are disabled so the decorative confetti
    never blocks interaction with the Play Again button.
*/
.confetti[b-5yjnog1k50] {
    position: absolute;
    inset: 0;
    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}

/*
    Styles one falling confetti piece.

    Custom properties generated by Home.razor control each
    piece's horizontal position, animation delay, duration,
    and starting rotation.
*/
.confetti-piece[b-5yjnog1k50] {
    position: absolute;

    top: -12vh;
    left: var(--confetti-left);

    width: 11px;
    height: 22px;

    border-radius: 3px;
    opacity: 0.95;

    animation:
        confetti-fall-b-5yjnog1k50
        var(--confetti-duration)
        linear
        var(--confetti-delay)
        infinite;
}

/*
    Cycles five colors through the generated confetti pieces.
*/
.confetti-piece:nth-child(5n + 1)[b-5yjnog1k50] {
    background: #facc15;
}

.confetti-piece:nth-child(5n + 2)[b-5yjnog1k50] {
    background: #dc2626;
}

.confetti-piece:nth-child(5n + 3)[b-5yjnog1k50] {
    background: #f8fafc;
}

.confetti-piece:nth-child(5n + 4)[b-5yjnog1k50] {
    background: #f472b6;
}

.confetti-piece:nth-child(5n + 5)[b-5yjnog1k50] {
    background: #2dd4bf;
}

/*
    Fades the full-screen victory overlay into view.
*/
@keyframes victory-overlay-in-b-5yjnog1k50 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/*
    Raises and enlarges the victory card into its final position.
*/
@keyframes victory-card-in-b-5yjnog1k50 {
    from {
        opacity: 0;

        transform:
            translateY(45px)
            scale(0.72);
    }

    to {
        opacity: 1;

        transform:
            translateY(0)
            scale(1);
    }
}

/*
    Gently moves and rotates the victory crown
    to create a floating royal animation.
*/
@keyframes victory-crown-float-b-5yjnog1k50 {
    from {
        transform:
            translateY(0)
            rotate(-4deg);
    }

    to {
        transform:
            translateY(-12px)
            rotate(4deg);
    }
}

/*
    Moves each confetti piece from above the viewport
    to below the viewport while rotating it.
*/
@keyframes confetti-fall-b-5yjnog1k50 {
    from {
        transform:
            translateY(-10vh)
            rotate(
                var(--confetti-rotation)
            );
    }

    to {
        transform:
            translateY(125vh)
            rotate(
                calc(
                    var(--confetti-rotation)
                    + 900deg
                )
            );
    }
}

/*
    Respects the user's reduced-motion accessibility preference
    by disabling the victory and confetti animations.
*/
@media (prefers-reduced-motion: reduce) {
    .victory-overlay[b-5yjnog1k50],
    .victory-card[b-5yjnog1k50],
    .victory-crown[b-5yjnog1k50],
    .confetti-piece[b-5yjnog1k50] {
        animation: none;
    }
}
.hero-heading[b-5yjnog1k50] {
    display: flex;
    align-items: center;
    gap: 20px;
}

.frog-prince-logo[b-5yjnog1k50] {
    width: 90px;
    height: 90px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .hero-heading[b-5yjnog1k50] {
        gap: 12px;
    }

    .frog-prince-logo[b-5yjnog1k50] {
        width: 60px;
        height: 60px;
    }
}