/* ==========================================================================
   Dice overlay (dice-overlay.js)
   Full-viewport layer above the page and the chat window: a dark scrim with the CAS logo, the
   3D dice canvas, and the result panel. Closed by default with visibility rather than display so
   the canvas can be sized (and preloaded) before it is seen.
   Bootstrap breakpoints only: 575.98 / 767.98 / 991.98 / 1199.98.
   ========================================================================== */

.dice-overlay {
    position: fixed;
    inset: 0;
    z-index: 10500; /* above the chat window and its image lightbox (10000) */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px));
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.dice-overlay.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.25s ease;
}

/* Preloading builds the canvas while nothing is shown; keep layout, show nothing, catch nothing. */
.dice-overlay.is-preloading {
    visibility: visible;
    opacity: 0;
    pointer-events: none;
}

/* The page behind is blurred as well as dimmed: a page with its own big logo (the home hero)
   otherwise shows through as a second, misaligned cloud behind the overlay's. */
.dice-overlay-backdrop {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(12, 20, 44, 0.82) 0%, rgba(3, 7, 18, 0.93) 70%);
    -webkit-backdrop-filter: blur(14px) saturate(0.7);
    backdrop-filter: blur(14px) saturate(0.7);
}

/* The blue CAS logo the red dice roll over: crisp, the only logo in view. */
.dice-overlay-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/logos/CASLogoBlue.png') center 42% / min(64vw, 440px) auto no-repeat;
    opacity: 0.85;
    filter: drop-shadow(0 0 32px rgba(0, 127, 255, 0.45));
}

/* The tray the dice are thrown into: the whole width of the screen, so the dice roll everywhere
   (over the chat window too) and only the bottom strip, where the result panel sits, is kept
   clear. The library sizes its physics world from this element. */
.dice-overlay-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: max(calc(100vh - 200px), 260px);
}

.dice-overlay-stage canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    outline: none;
}

.dice-overlay-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.7);
    color: #fff;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.dice-overlay-close:hover,
.dice-overlay-close:focus-visible {
    background: rgba(30, 41, 59, 0.95);
    outline: 2px solid #4da6ff;
    outline-offset: 2px;
}

/* ---- Result panel: total, breakdown, label ---------------------------- */

.dice-overlay-result {
    position: relative;
    z-index: 2;
    width: min(100%, 420px);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 16px;
    padding: 14px 18px 12px;
    color: #fff;
    text-align: center;
    box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.dice-overlay-result.is-shown {
    opacity: 1;
    transform: none;
}

.dice-overlay-label {
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #93c5fd;
    margin-bottom: 2px;
}

.dice-overlay-total {
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.05;
    letter-spacing: -1px;
}

.dice-overlay.is-nat20 .dice-overlay-total {
    color: #fbbf24;
    text-shadow: 0 0 18px rgba(251, 191, 36, 0.55);
}

.dice-overlay.is-nat1 .dice-overlay-total {
    color: #cbd5e1;
}

.dice-overlay-breakdown {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 8px 0 4px;
}

.dice-overlay-part {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(185, 28, 28, 0.35);
    border: 1px solid rgba(248, 113, 113, 0.45);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.dice-overlay-part.is-max {
    border-color: #fbbf24;
    box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.6);
}

.dice-overlay-part.is-min {
    opacity: 0.8;
}

.dice-overlay-part.is-dropped {
    opacity: 0.45;
    text-decoration: line-through;
}

.dice-overlay-part-mod {
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(96, 165, 250, 0.5);
}

.dice-overlay-message {
    font-weight: 600;
    color: #fbbf24;
    margin-top: 2px;
}

.dice-overlay.is-nat1 .dice-overlay-message {
    color: #cbd5e1;
}

.dice-overlay-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.55);
    margin-top: 6px;
}

/* ---- Flat fallback: reduced motion, no WebGL, or the library did not load ---- */

.dice-overlay-fallback {
    position: absolute;
    left: 16px;
    right: 16px;
    top: 38%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    z-index: 1;
}

.dice-overlay-fallback[hidden] {
    display: none;
}

.dice-overlay-chip {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    background: linear-gradient(145deg, #dc2626 0%, #991b1b 100%);
    border: 2px solid #fecaca;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: Poppins, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    animation: dice-chip-pop 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}

.dice-overlay-chip.is-dropped {
    opacity: 0.5;
}

.dice-overlay-chip-value {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
}

.dice-overlay-chip-kind {
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 2px;
}

@keyframes dice-chip-pop {
    from {
        transform: scale(0.4) rotate(-20deg);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

/* ---- Small phones: a tighter panel, slightly smaller total ----------- */

@media (max-width: 575.98px) {
    .dice-overlay {
        padding-left: 12px;
        padding-right: 12px;
    }

    .dice-overlay-result {
        padding: 12px 14px 10px;
    }

    .dice-overlay-total {
        font-size: 2.6rem;
    }

    .dice-overlay-chip {
        width: 58px;
        height: 58px;
    }

    .dice-overlay-backdrop::after {
        background-size: 78vw auto;
        background-position: center 34%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dice-overlay,
    .dice-overlay.is-open,
    .dice-overlay-result {
        transition: none;
    }

    .dice-overlay-chip {
        animation: none;
    }
}

/* ---- Several results (6x4d6kh3): totals as the headline, a line of chips per row ---- */

.dice-overlay-total.is-list {
    font-size: 1.7rem;
    letter-spacing: 0;
}

.dice-overlay-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: 2px;
}

.dice-overlay-row-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.35);
    font-size: 0.7rem;
    font-weight: 600;
}

.dice-overlay-part.is-exploded {
    border-color: #f97316;
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.6);
}

/* Flat fallback laid out per set: one line of chips per result. */
.dice-overlay-fallback {
    flex-direction: column;
    align-items: center;
    top: 14%;
    gap: 8px;
}

.dice-overlay-fallback-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.dice-overlay-fallback.is-rows .dice-overlay-chip {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.dice-overlay-fallback.is-rows .dice-overlay-chip-value {
    font-size: 1.1rem;
}

.dice-overlay-fallback.is-rows .dice-overlay-chip-kind {
    display: none;
}