/* =========================================================   ROULETTE
   Ultra Premium / Minimal / Smooth
   ========================================================= */

/* =========================================================
   SIDEBAR
   ========================================================= */

.page-roulette .sidebar {
    padding: 1rem 0.85rem;

    display: flex;
    flex-direction: column;

    gap: 0.65rem;

    align-items: stretch;
}

/* Links */

.page-roulette .sidebar a {
    display: inline-flex;
    width: fit-content;

    text-decoration: none;

    color: var(--color-on-background);

    opacity: 0.62;

    transition:
        opacity 0.18s ease,
        transform 0.18s ease;
}

.page-roulette .sidebar a:hover {
    color: var(--color-on-background);

    opacity: 1;

    transform: translateX(3px);
}

/* =========================================================
   CHECKBOXES
   Hide the actual checkmarks completely
   ========================================================= */

.page-roulette .sidebar .check {
    display: flex;

    align-items: center;

    gap: 0;

    padding: 0.55rem 0.7rem;

    border-radius: 0.55rem;

    background: var(--color-background-hover);

    border: 1px solid rgba(255, 255, 255, 0.045);
}

/* Remove checkbox visual */

.page-roulette .sidebar .check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;

    width: 0;
    height: 0;

    margin: 0;
    padding: 0;

    opacity: 0;
    pointer-events: none;
}

/* Remove labels' default checkbox spacing */

.page-roulette .sidebar .check label {
    margin: 0;

    cursor: pointer;
}

/* =========================================================
   FORM
   ========================================================= */

.page-roulette .sidebar form {
    display: flex;

    flex-direction: column;

    gap: 0.55rem;

    align-items: stretch;

    width: 100%;
}

/* =========================================================
   SAVE AREA
   ========================================================= */

.page-roulette .sidebar .save .btns {
    display: flex;

    gap: 0.4rem;

    flex-wrap: wrap;
}

/* =========================================================
   LEVEL CONTAINER
   ========================================================= */

.page-roulette .levels-container {
    grid-row: 1;

    grid-column: 2 / span 2;

    overflow-y: auto;

    padding-right: 0.85rem;
}

/* =========================================================
   LEVEL LIST
   ========================================================= */

.page-roulette .levels {
    display: flex;

    flex-direction: column;

    padding-block: 0.85rem;

    gap: 0.7rem;
}

/* =========================================================
   LEVEL CARD
   ========================================================= */

.page-roulette .levels .level {
    position: relative;

    display: grid;

    grid-template-columns: 10.5rem 1fr;

    grid-auto-rows: max-content;

    overflow: hidden;

    background-color: var(--color-background);

    border: 1px solid rgba(255, 255, 255, 0.055);

    border-radius: 0.8rem;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.025),
        0 8px 22px rgba(0, 0, 0, 0.035);

    transition:
        transform 0.22s cubic-bezier(.2,.8,.2,1),
        border-color 0.22s ease,
        box-shadow 0.22s ease;
}

/* Card hover */

.page-roulette .levels .level:hover {
    transform: translateY(-3px);

    border-color: rgba(255, 255, 255, 0.11);

    box-shadow:
        0 5px 10px rgba(0, 0, 0, 0.04),
        0 14px 32px rgba(0, 0, 0, 0.08);
}

/* =========================================================
   THUMBNAIL
   ========================================================= */

.page-roulette .levels .level .video {
    position: relative;

    min-height: 7.2rem;

    overflow: hidden;

    background: #111;
}

.page-roulette .levels .level .video img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.45s cubic-bezier(.2,.8,.2,1),
        filter 0.45s ease;
}

.page-roulette .levels .level:hover .video img {
    transform: scale(1.035);

    filter: brightness(1.04);
}

/* Thumbnail gradient */

.page-roulette .levels .level .video::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.12),
            transparent 60%
        );

    pointer-events: none;
}

/* =========================================================
   META
   ========================================================= */

.page-roulette .levels .level .meta {
    min-width: 0;

    padding: 0.8rem 0.9rem;

    display: flex;

    flex-direction: column;

    gap: 0.45rem;

    justify-content: center;
}

/* =========================================================
   ACTION BAR
   ========================================================= */

.page-roulette .levels .level .actions {
    grid-column: 1 / span 2;

    display: flex;

    align-items: center;

    gap: 0.45rem;

    margin: 0;

    padding: 0.55rem 0.65rem;

    background:
        linear-gradient(
            135deg,
            #1b314f,
            #182b46
        );

    border-top: 1px solid rgba(255, 255, 255, 0.055);
}

/* =========================================================
   NUMBER INPUT
   ========================================================= */

.page-roulette .levels .level .actions input[type="number"] {
    min-width: 0;

    flex: 1;

    height: 2.25rem;

    box-sizing: border-box;

    padding: 0 0.7rem;

    border: 1px solid rgba(255, 255, 255, 0.07);

    border-radius: 0.5rem;

    outline: none;

    background: rgba(0, 0, 0, 0.13);

    color: white;

    box-shadow:
        inset 0 1px 2px rgba(0, 0, 0, 0.1);

    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}

.page-roulette .levels .level .actions input[type="number"]:hover {
    background: rgba(0, 0, 0, 0.18);

    border-color: rgba(255, 255, 255, 0.11);
}

.page-roulette .levels .level .actions input[type="number"]:focus {
    background: rgba(0, 0, 0, 0.2);

    border-color: rgba(255, 255, 255, 0.2);

    box-shadow:
        0 0 0 3px rgba(255, 255, 255, 0.045);
}

.page-roulette .levels .level .actions input[type="number"]::placeholder {
    color: #8295b4;
}

/* =========================================================
   RESULTS
   ========================================================= */

.page-roulette .levels .results {
    display: flex;

    flex-direction: column;

    gap: 0.5rem;
}

.page-roulette .levels .results h1 {
    margin: 0 0 0.15rem;

    line-height: 1.1;

    letter-spacing: -0.015em;
}

.page-roulette .levels .results .btn {
    margin-top: 0.25rem;
}

/* =========================================================
   TOAST CONTAINER
   ========================================================= */

.page-roulette .toasts-container {
    overflow-y: auto;

    grid-column: 2 / span 2;

    grid-row: 1;

    align-self: start;

    margin-block: 0.85rem;

    margin-right: 0.85rem;
}

.page-roulette .toasts {
    display: flex;

    flex-direction: column;

    gap: 0.45rem;

    overflow-y: auto;
}

/* =========================================================
   TOAST
   ========================================================= */

.page-roulette .toast {
    position: relative;

    display: flex;

    align-items: center;

    min-height: 2.3rem;

    box-sizing: border-box;

    padding: 0.55rem 0.7rem;

    background:
        linear-gradient(
            135deg,
            #d50000,
            #bd0000
        );

    color: white;

    border-radius: 0.6rem;

    border: 1px solid rgba(255, 255, 255, 0.09);

    box-shadow:
        0 5px 18px rgba(0, 0, 0, 0.12);

    font-size: 0.88rem;

    animation:
        roulette-toast-in 0.2s ease both;
}

/* Toast shine */

.page-roulette .toast::before {
    content: "";

    position: absolute;

    top: 0;
    left: 8%;
    right: 8%;

    height: 1px;

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

    border-radius: 999px;
}

/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes roulette-toast-in {
    from {
        opacity: 0;

        transform:
            translateY(-6px)
            scale(0.985);
    }

    to {
        opacity: 1;

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

/* =========================================================
   SCROLLBAR
   ========================================================= */

.page-roulette .levels-container,
.page-roulette .toasts-container {
    scrollbar-width: thin;
}

.page-roulette .levels-container::-webkit-scrollbar,
.page-roulette .toasts-container::-webkit-scrollbar {
    width: 4px;
}

.page-roulette .levels-container::-webkit-scrollbar-track,
.page-roulette .toasts-container::-webkit-scrollbar-track {
    background: transparent;
}

.page-roulette .levels-container::-webkit-scrollbar-thumb,
.page-roulette .toasts-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);

    border-radius: 999px;
}

.page-roulette .levels-container::-webkit-scrollbar-thumb:hover,
.page-roulette .toasts-container::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media screen and (min-width: 1366px) {

    .page-roulette .levels-container {
        grid-column: 2;

        padding-right: 0;
    }

    .page-roulette .toasts-container {
        grid-column: 3;

        margin: 0;

        padding-right: 0.85rem;

        padding-block: 0.85rem;

        align-self: stretch;
    }
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media screen and (min-width: 1600px) {

    .page-roulette .levels {
        gap: 0.8rem;
    }

    .page-roulette .levels .level {
        grid-template-columns: 11.5rem 1fr;
    }
}