html.fcw-hh-reveal-open,
html.fcw-hh-reveal-open body {
    overflow: hidden !important;
}

/*
 * Prevent reveal-eligible pack contents flashing onto screen before
 * reveal.js has had time to create the fullscreen overlay.
 */
#playersblock:has(.fcw-reveal-meta) {
    visibility: hidden !important;
}

.fcw-hh-reveal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    overflow: hidden;
    opacity: 0;
    background: #050301;
    color: #f8dc8d;
    font-family: Georgia, "Times New Roman", serif;
    transition: opacity 0.8s ease;
    user-select: none;
    isolation: isolate;
}

.fcw-hh-reveal.phase-intro {
    opacity: 1;
}

.fcw-hh-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(122, 76, 14, 0.32), transparent 31%),
        radial-gradient(circle at 50% 55%, rgba(255, 184, 44, 0.11), transparent 48%),
        linear-gradient(180deg, #050403 0%, #100a04 56%, #020201 100%);
}

.fcw-hh-backdrop::after {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        repeating-conic-gradient(
            from 0deg at 50% 50%,
            rgba(255, 211, 100, 0.035) 0deg 0.7deg,
            transparent 0.7deg 6deg
        );
    opacity: 0.6;
    animation: fcw-hh-slow-turn 28s linear infinite;
}

.fcw-hh-sand {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.fcw-hh-sand-grain {
    position: absolute;
    left: var(--x);
    top: -4vh;
    width: var(--size);
    height: calc(var(--size) * 2.2);
    border-radius: 999px;
    background: #ffd979;
    box-shadow: 0 0 6px rgba(255, 205, 80, 0.9);
    opacity: 0.75;
    animation: fcw-hh-sand-fall var(--dur) linear var(--delay) infinite;
}

.fcw-hh-clock {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 49%;
    width: min(74vmin, 720px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0.74);
    border: 1px solid rgba(247, 204, 103, 0.45);
    border-radius: 50%;
    opacity: 0;
    filter: drop-shadow(0 0 25px rgba(255, 190, 65, 0.22));
    transition:
        opacity 1.35s ease,
        transform 1.8s cubic-bezier(.2,.8,.2,1),
        filter 0.7s ease;
}

.phase-clock .fcw-hh-clock {
    opacity: 0.72;
    transform: translate(-50%, -50%) scale(1);
}

.fcw-hh-clock::before,
.fcw-hh-clock::after,
.fcw-hh-clock-ring {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.fcw-hh-clock::before {
    inset: 5.5%;
    border: 1px solid rgba(255, 215, 125, 0.25);
    box-shadow:
        inset 0 0 30px rgba(255, 189, 55, 0.1),
        0 0 28px rgba(255, 183, 40, 0.08);
}

.fcw-hh-clock::after {
    inset: 17%;
    border: 1px dashed rgba(255, 226, 152, 0.20);
}

.fcw-hh-clock-ring.ring-1 {
    inset: 11%;
    border: 1px solid rgba(245, 197, 84, 0.30);
}

.fcw-hh-clock-ring.ring-2 {
    inset: 25%;
    border: 1px solid rgba(245, 197, 84, 0.18);
}

.fcw-hh-clock-number {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: clamp(13px, 2.3vmin, 25px);
    letter-spacing: 0.04em;
    color: rgba(255, 221, 137, 0.84);
    text-shadow: 0 0 10px rgba(255, 202, 77, 0.5);
}

.fcw-hh-clock-hand {
    position: absolute;
    left: 50%;
    bottom: 50%;
    width: 2px;
    transform-origin: 50% 100%;
    background: linear-gradient(to top, #b77c1d, #fff0bd);
    box-shadow: 0 0 10px rgba(255, 204, 91, 0.85);
}

.fcw-hh-clock-hand.hand-hour {
    height: 24%;
    animation: fcw-hh-hour-hand 16s linear infinite;
}

.fcw-hh-clock-hand.hand-minute {
    height: 37%;
    width: 1px;
    animation: fcw-hh-minute-hand 7.4s linear infinite;
}

.phase-reverse .fcw-hh-clock-hand.hand-hour,
.phase-reverse .fcw-hh-clock-hand.hand-minute {
    animation-direction: reverse;
    animation-duration: 2.2s;
}

.fcw-hh-clock-center {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 12px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #ffe7a5;
    box-shadow: 0 0 18px rgba(255, 194, 56, 0.95);
}

/* -------------------------------------------------------------------------- */
/* 3D SEALED HAPPY HOUR PACK                                                  */
/* -------------------------------------------------------------------------- */

.fcw-hh-sealed-pack {
    position: absolute;
    left: 50%;
    top: 51%;
    z-index: 4;
    width: min(24vw, 215px);
    aspect-ratio: 0.70;
    transform: translate(-50%, -50%);
    opacity: 0;
    perspective: 900px;
    transition:
        opacity 1.15s ease,
        transform 1.15s ease,
        filter 0.8s ease;
}

.fcw-hh-pack-aura {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: none;
    opacity: 0;
}

.fcw-hh-pack-aura.aura-1 {
    width: 155%;
    height: 125%;
    transform: translate(-50%, -50%) scale(0.82);
    border-radius: 42%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 224, 139, 0.28) 0%,
            rgba(255, 177, 35, 0.18) 30%,
            rgba(255, 137, 14, 0.06) 52%,
            transparent 72%
        );
    filter: blur(15px);
}

.fcw-hh-pack-aura.aura-2 {
    width: 190%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0.75);
    border-radius: 50%;
    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg 8deg,
            rgba(255, 218, 124, 0.16) 8.5deg 9deg,
            transparent 9.5deg 18deg
        );
    filter: blur(2px);
    mix-blend-mode: screen;
}

.phase-clock .fcw-hh-pack-aura.aura-1 {
    opacity: 0.55;
    animation: fcw-hh-pack-aura-pulse 2.8s ease-in-out infinite;
}

.phase-clock .fcw-hh-pack-aura.aura-2 {
    opacity: 0.18;
    animation: fcw-hh-pack-aura-spin 12s linear infinite;
}

.phase-reverse .fcw-hh-pack-aura.aura-1 {
    opacity: 0.78;
}

.phase-reverse .fcw-hh-pack-aura.aura-2 {
    opacity: 0.35;
    animation-duration: 4s;
}

.phase-rip .fcw-hh-pack-aura.aura-1 {
    opacity: 1;
    filter: blur(20px);
}

.phase-rip .fcw-hh-pack-aura.aura-2 {
    opacity: 0.62;
    animation-duration: 1.7s;
}

.phase-intro .fcw-hh-sealed-pack {
    opacity: 1;
}

.fcw-hh-pack-floor-shadow {
    position: absolute;
    left: 50%;
    bottom: -10%;
    width: 122%;
    height: 20%;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(255, 181, 44, 0.22) 0%,
        rgba(0, 0, 0, 0.72) 43%,
        transparent 72%
    );
    filter: blur(10px);
    opacity: 0.9;
}

.fcw-hh-pack-body {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform:
        rotateX(-4deg)
        rotateY(-13deg)
        rotateZ(1deg)
        translateZ(0);
    animation: fcw-hh-pack-float 4.8s ease-in-out infinite;
    filter:
        drop-shadow(18px 22px 22px rgba(0, 0, 0, 0.62))
        drop-shadow(0 0 18px rgba(255, 190, 55, 0.18));
}

.fcw-hh-pack-face {
    position: absolute;
    inset: 0;
    overflow: hidden;

    transform: translateZ(13px);

    border: 1px solid rgba(255, 224, 132, 0.92);
    border-radius: 5px;

    background:
        /* bright HH-style flare toward upper/right side */
        radial-gradient(
            circle at 78% 31%,
            rgba(255, 244, 191, 0.48) 0%,
            rgba(255, 191, 49, 0.32) 9%,
            rgba(210, 120, 7, 0.13) 24%,
            transparent 42%
        ),

        /* warm golden pool */
        radial-gradient(
            circle at 38% 58%,
            rgba(209, 130, 17, 0.34),
            transparent 42%
        ),

        /* diagonal gold light streak */
        linear-gradient(
            118deg,
            transparent 0%,
            transparent 41%,
            rgba(255, 204, 87, 0.08) 43%,
            rgba(255, 233, 158, 0.37) 45%,
            rgba(255, 179, 29, 0.12) 48%,
            transparent 51%,
            transparent 100%
        ),

        /* metallic base */
        linear-gradient(
            135deg,
            #221406 0%,
            #4a2c08 17%,
            #171006 35%,
            #805212 53%,
            #2b1906 69%,
            #090604 84%,
            #3d2609 100%
        );

    box-shadow:
        inset 0 0 0 2px rgba(115, 71, 13, 0.85),
        inset 0 0 35px rgba(255, 202, 74, 0.24),
        inset 14px 0 35px rgba(255, 226, 137, 0.10),
        inset -22px 0 35px rgba(0, 0, 0, 0.48),

        0 0 14px rgba(255, 188, 46, 0.26),
        0 0 34px rgba(255, 160, 21, 0.15);
}

.fcw-hh-pack-face::before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(224, 176, 80, 0.32);
    border-radius: 2px;
    pointer-events: none;
}

.fcw-hh-pack-face::after {
    content: "";
    position: absolute;
    top: -28%;
    left: -55%;
    width: 42%;
    height: 160%;
    transform: rotate(19deg);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 248, 218, 0.03),
        rgba(255, 225, 147, 0.27),
        rgba(255, 248, 218, 0.04),
        transparent
    );
    animation: fcw-hh-pack-sheen 4.7s ease-in-out infinite;
}

.fcw-hh-pack-tear {
    position: absolute;
    left: -17%;
    top: 48%;
    width: 134%;
    height: 18px;
    z-index: 20;

    transform:
        rotate(-7deg)
        scaleX(0);

    transform-origin: left center;

    opacity: 0;
    pointer-events: none;
}

.fcw-hh-pack-tear::before {
    content: "";
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #ffe8ad 9%,
            #fff4ce 38%,
            #ffbd32 70%,
            #fff1bf 91%,
            transparent 100%
        );

    clip-path: polygon(
        0% 45%,
        8% 18%,
        15% 68%,
        23% 29%,
        31% 75%,
        39% 22%,
        48% 67%,
        57% 28%,
        66% 73%,
        76% 19%,
        85% 63%,
        93% 31%,
        100% 48%,
        100% 62%,
        92% 48%,
        84% 79%,
        75% 37%,
        67% 84%,
        57% 43%,
        48% 78%,
        38% 36%,
        30% 82%,
        22% 43%,
        14% 76%,
        7% 36%,
        0% 58%
    );

    box-shadow:
        0 0 7px rgba(255, 243, 196, 1),
        0 0 18px rgba(255, 192, 48, 0.95),
        0 0 38px rgba(255, 152, 18, 0.7);
}

.fcw-hh-pack-tear::after {
    content: "";
    position: absolute;
    left: 4%;
    right: 4%;
    top: 50%;
    height: 7px;

    transform: translateY(-50%);

    background: #ffd566;
    filter: blur(9px);

    opacity: 0.9;
}

.phase-rip .fcw-hh-pack-tear {
    animation:
        fcw-hh-pack-rip 1.05s
        cubic-bezier(.16,.82,.28,1)
        forwards;
}

.phase-rip .fcw-hh-pack-body {
    animation:
        fcw-hh-pack-rip-shudder 1.05s
        cubic-bezier(.22,.7,.25,1)
        forwards;
}

.phase-rip .fcw-hh-pack-floor-shadow {
    filter: blur(15px);
    opacity: 1;
}

.fcw-hh-pack-side {
    position: absolute;
    top: 2px;
    right: -15px;
    width: 28px;
    height: calc(100% - 4px);

    transform-origin: left center;
    transform: rotateY(90deg) translateZ(1px);

    border-radius: 0 3px 3px 0;

    background:
        linear-gradient(
            90deg,
            #a36b17 0%,
            #67400d 22%,
            #291806 58%,
            #080503 100%
        );

    box-shadow:
        inset 3px 0 7px rgba(255, 224, 132, 0.22),
        inset -5px 0 10px rgba(0, 0, 0, 0.55),
        0 0 8px rgba(255, 176, 30, 0.12);
}

.fcw-hh-pack-top {
    position: absolute;
    left: 2px;
    top: -14px;
    width: calc(100% - 4px);
    height: 28px;

    transform-origin: bottom center;
    transform: rotateX(90deg);

    background:
        linear-gradient(
            180deg,
            #d79a2d 0%,
            #865514 30%,
            #372107 68%,
            #0d0803 100%
        );

    box-shadow:
        inset 0 3px 9px rgba(255, 235, 164, 0.27),
        inset 0 -5px 9px rgba(0, 0, 0, 0.46);
}

.fcw-hh-pack-lines {
    position: absolute;
    inset: 0;
    opacity: 0.28;
    background:
        linear-gradient(
            112deg,
            transparent 0 39%,
            rgba(255, 210, 105, 0.24) 39.2% 39.7%,
            transparent 40% 100%
        ),
        linear-gradient(
            72deg,
            transparent 0 59%,
            rgba(255, 198, 65, 0.13) 59.2% 59.6%,
            transparent 59.9% 100%
        );
}

.fcw-hh-pack-emblem {
    position: absolute;
    left: 50%;
    top: 30%;
    width: 76px;
    height: 76px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(255, 221, 132, 0.56);
    background:
        radial-gradient(
            circle,
            rgba(255, 226, 138, 0.25) 0%,
            rgba(188, 112, 14, 0.18) 40%,
            rgba(10, 6, 2, 0.72) 72%
        );
    box-shadow:
        inset 0 0 22px rgba(255, 213, 103, 0.22),
        0 0 15px rgba(255, 213, 103, 0.24),
        0 0 34px rgba(255, 158, 19, 0.18);
}

.fcw-hh-pack-emblem::before,
.fcw-hh-pack-emblem::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    border: 1px solid rgba(255, 215, 119, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.fcw-hh-pack-emblem::before {
    width: 58px;
    height: 58px;
}

.fcw-hh-pack-emblem::after {
    width: 46px;
    height: 46px;
    border-style: dashed;
}

.fcw-hh-hourglass {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 30px;
    height: 42px;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.fcw-hh-hourglass::before,
.fcw-hh-hourglass::after {
    content: "";
    position: absolute;
    left: 1px;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8b5e19, #ffe39a 45%, #9c681d);
    box-shadow: 0 0 5px rgba(255, 203, 92, 0.4);
}

.fcw-hh-hourglass::before {
    top: 0;
}

.fcw-hh-hourglass::after {
    bottom: 0;
}

.fcw-hh-hourglass .sand-top,
.fcw-hh-hourglass .sand-bottom {
    position: absolute;
    left: 5px;
    width: 20px;
    height: 17px;
    background: linear-gradient(180deg, #e3ad43, #7f5114);
    filter: drop-shadow(0 0 4px rgba(255, 194, 57, 0.32));
}

.fcw-hh-hourglass .sand-top {
    top: 5px;
    clip-path: polygon(0 0, 100% 0, 56% 100%, 44% 100%);
}

.fcw-hh-hourglass .sand-bottom {
    bottom: 5px;
    clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}

.fcw-hh-hourglass .sand-top::after {
    content: "";
    position: absolute;
    left: 48%;
    top: 75%;
    width: 1px;
    height: 21px;
    background: rgba(255, 210, 99, 0.72);
    box-shadow: 0 0 3px rgba(255, 194, 58, 0.6);
}

.fcw-hh-pack-title {
    position: absolute;
    left: 50%;
    top: 54%;
    width: 88%;
    transform: translateX(-50%);
    text-align: center;
    color: #ffe09a;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(16px, 1.7vw, 23px);
    font-weight: 700;
    letter-spacing: 0.13em;
    text-shadow:
        0 1px 0 #805015,
        0 2px 0 #2d1a06,
        0 0 8px rgba(255, 229, 155, 0.55),
        0 0 20px rgba(255, 174, 28, 0.38);
}

.fcw-hh-pack-rule {
    position: absolute;
    left: 50%;
    top: 66%;
    width: 58%;
    height: 1px;
    transform: translateX(-50%);
    background:
        linear-gradient(90deg, transparent, rgba(255, 218, 127, 0.76), transparent);
    box-shadow: 0 0 5px rgba(255, 199, 73, 0.35);
}

.phase-clock .fcw-hh-pack-body {
    filter:
        drop-shadow(20px 25px 26px rgba(0, 0, 0, 0.67))
        drop-shadow(0 0 25px rgba(255, 190, 55, 0.22));
}

.phase-fracture .fcw-hh-sealed-pack {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.18);
    filter: blur(8px) brightness(1.65);
}

.fcw-hh-fracture {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: min(120vmin, 1100px);
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(0.2) rotate(12deg);
    opacity: 0;
    background:
        repeating-conic-gradient(
            from 8deg,
            transparent 0deg 8deg,
            rgba(255, 230, 167, 0.86) 8.1deg 8.45deg,
            transparent 8.6deg 17deg
        );
    -webkit-mask-image: radial-gradient(circle, transparent 0 10%, #000 13% 47%, transparent 62%);
    mask-image: radial-gradient(circle, transparent 0 10%, #000 13% 47%, transparent 62%);
    pointer-events: none;
}

.fcw-hh-flash {
    position: absolute;
    inset: 0;
    z-index: 5;
    opacity: 0;
    background:
        radial-gradient(circle at 68% 41%, rgba(255,255,235,0.98), rgba(255,205,80,0.76) 7%, transparent 30%),
        radial-gradient(circle at 50% 50%, rgba(255,195,56,0.55), transparent 48%);
    mix-blend-mode: screen;
    pointer-events: none;
}

.phase-fracture .fcw-hh-fracture {
    animation: fcw-hh-fracture-burst 1.25s cubic-bezier(.1,.7,.2,1) forwards;
}

.phase-fracture .fcw-hh-flash {
    animation: fcw-hh-flash 1.25s ease-out forwards;
}

.phase-fracture .fcw-hh-clock {
    filter: drop-shadow(0 0 46px rgba(255, 200, 75, 0.88)) blur(0.4px);
}

.fcw-hh-card-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10;
    width: min(42vw, 345px);
    transform: translate(-50%, -48%) scale(0.72);
    opacity: 0;
    transition:
        opacity 1.0s ease,
        transform 1.45s cubic-bezier(.16,.86,.24,1);
}

.phase-card .fcw-hh-card-stage {
    opacity: 1;
    transform: translate(-50%, -48%) scale(1);
}

.fcw-hh-card-art {
    display: block;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 16px rgba(255, 203, 89, 0.44));
    transition:
        opacity 0.8s ease,
        filter 0.8s ease;
}

.fcw-hh-card-glow {
    position: absolute;
    inset: 5% 5% 4%;
    border-radius: 45% 45% 40% 40%;
    box-shadow:
        0 0 22px rgba(255, 210, 107, 0.55),
        0 0 70px rgba(255, 176, 37, 0.26);
    opacity: 0;
    pointer-events: none;
    animation: fcw-hh-card-pulse 2.6s ease-in-out infinite;
}

.phase-card .fcw-hh-card-glow {
    opacity: 1;
}

.fcw-hh-stage-value {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    z-index: 3;

    transform: scale(0.88);

    transition:
        opacity 0.46s ease,
        transform 0.52s cubic-bezier(.2,.8,.2,1),
        filter 0.52s ease;

    filter: blur(8px);
}

.fcw-hh-stage-value.is-visible {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.fcw-hh-stage-value.is-changing {
    opacity: 0;
    transform: scale(1.10);
    filter: blur(9px);
}

.fcw-hh-position {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 800;
    font-size: clamp(46px, 7vw, 82px);
    color: #f9e9b5;
    text-shadow:
        0 0 8px rgba(255, 235, 184, 0.8),
        0 0 22px rgba(255, 185, 43, 0.72);
}

.fcw-hh-stage-logo {
    display: block;
    max-width: 112px;
    max-height: 92px;
    width: auto;
    height: auto;
    filter:
        drop-shadow(0 0 5px rgba(255, 244, 208, 0.45))
        drop-shadow(0 0 18px rgba(255, 185, 47, 0.40));
}

.fcw-hh-stage-nation {
    width: min(28vw, 118px);
    max-width: 118px;
}

.fcw-hh-stage-league,
.fcw-hh-stage-club {
    max-height: 108px;
}

.fcw-hh-full-card {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.82);
    filter: blur(8px);
    pointer-events: none;
    transition:
        opacity 0.9s ease,
        transform 1.0s cubic-bezier(.18,.82,.22,1),
        filter 0.8s ease;
}

.fcw-hh-full-card-inner {
    transform: scale(1.28);
    transform-origin: center center;
}

.phase-full-card .fcw-hh-card-art {
    opacity: 0 !important;
    visibility: hidden;
}

.phase-full-card .fcw-hh-stage-value {
    opacity: 0 !important;
    filter: blur(7px);
}

.phase-full-card .fcw-hh-full-card {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
}

.phase-full-card .fcw-hh-card-glow {
    box-shadow:
        0 0 28px rgba(255, 222, 134, 0.78),
        0 0 100px rgba(255, 176, 37, 0.42);
}

.fcw-hh-skip {
    position: fixed !important;

    right: 24px !important;
    bottom: 24px !important;

    left: auto !important;
    top: auto !important;

    transform: none !important;

    z-index: 100 !important;
}

.phase-clock .fcw-hh-skip {
    opacity: 1;
}

.fcw-hh-skip:hover {
    background: rgba(73, 46, 10, 0.72);
}

.phase-exit {
    opacity: 0 !important;
    transition: opacity 0.95s ease !important;
}

@keyframes fcw-hh-sand-fall {
    0% {
        transform: translate3d(0, -6vh, 0);
        opacity: 0;
    }

    10% {
        opacity: 0.78;
    }

    88% {
        opacity: 0.7;
    }

    100% {
        transform: translate3d(var(--drift), 108vh, 0);
        opacity: 0;
    }
}

@keyframes fcw-hh-slow-turn {
    to {
        transform: rotate(360deg);
    }
}

@keyframes fcw-hh-hour-hand {
    from {
        transform: rotate(18deg);
    }

    to {
        transform: rotate(378deg);
    }
}

@keyframes fcw-hh-minute-hand {
    from {
        transform: rotate(142deg);
    }

    to {
        transform: rotate(502deg);
    }
}

@keyframes fcw-hh-fracture-burst {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.14) rotate(0deg);
    }

    24% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.3) rotate(23deg);
    }
}

@keyframes fcw-hh-flash {
    0% {
        opacity: 0;
    }

    14% {
        opacity: 1;
    }

    48% {
        opacity: 0.42;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fcw-hh-card-pulse {
    0%,
    100% {
        opacity: 0.48;
        transform: scale(0.99);
    }

    50% {
        opacity: 1;
        transform: scale(1.025);
    }
}

@keyframes fcw-hh-pack-float {
    0%,
    100% {
        transform:
            rotateX(-4deg)
            rotateY(-13deg)
            rotateZ(1deg)
            translate3d(0, -3px, 0);
    }

    50% {
        transform:
            rotateX(-2deg)
            rotateY(-8deg)
            rotateZ(-0.5deg)
            translate3d(0, 7px, 10px);
    }
}

@keyframes fcw-hh-pack-sheen {
    0%,
    18% {
        left: -55%;
        opacity: 0;
    }

    42% {
        opacity: 0.72;
    }

    62% {
        left: 118%;
        opacity: 0;
    }

    100% {
        left: 118%;
        opacity: 0;
    }
}

@keyframes fcw-hh-pack-aura-pulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(0.86);
        opacity: 0.42;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.08);
        opacity: 0.82;
    }
}

@keyframes fcw-hh-pack-aura-spin {
    from {
        transform: translate(-50%, -50%) scale(0.82) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) scale(0.82) rotate(360deg);
    }
}

@keyframes fcw-hh-pack-rip {
    0% {
        opacity: 0;
        transform: rotate(-7deg) scaleX(0);
    }

    12% {
        opacity: 1;
    }

    72% {
        opacity: 1;
        transform: rotate(-7deg) scaleX(1);
    }

    100% {
        opacity: 0.8;
        transform: rotate(-7deg) scaleX(1.04);
    }
}

@keyframes fcw-hh-pack-rip-shudder {
    0% {
        transform:
            rotateX(-2deg)
            rotateY(-8deg)
            rotateZ(-0.5deg)
            translate3d(0, 0, 0);
    }

    18% {
        transform:
            rotateX(-4deg)
            rotateY(-14deg)
            rotateZ(-2deg)
            translate3d(-5px, 1px, 0);
    }

    36% {
        transform:
            rotateX(-1deg)
            rotateY(1deg)
            rotateZ(2deg)
            translate3d(5px, -2px, 5px);
    }

    54% {
        transform:
            rotateX(-5deg)
            rotateY(-12deg)
            rotateZ(-1deg)
            translate3d(-4px, 2px, 4px);
    }

    72% {
        transform:
            rotateX(-2deg)
            rotateY(-5deg)
            rotateZ(1deg)
            translate3d(3px, -1px, 8px);
    }

    100% {
        transform:
            rotateX(-3deg)
            rotateY(-9deg)
            rotateZ(0deg)
            translate3d(0, 0, 12px)
            scale(1.035);
    }
}

.phase-details .fcw-hh-card-glow {
    opacity: 0 !important;
    animation: none !important;
}

/* ========================================================================== */
/* FW ICON THEME                                                              */
/* ========================================================================== */

/* -------------------------------------------------------------------------- */
/* STATIC STONE ENVIRONMENT                                                   */
/* -------------------------------------------------------------------------- */

.theme-fw-icon .fcw-hh-backdrop {
    background: #210406;
}

/* Remove Happy Hour's rotating backdrop pattern for the Icon theme. */
.theme-fw-icon .fcw-hh-backdrop::after {
    content: none !important;
    display: none !important;
    animation: none !important;
}

.fcw-icon-stone-scene {
    display: none;
}

.theme-fw-icon .fcw-icon-stone-scene {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    perspective: 1350px;
    transform-style: preserve-3d;
    background: #260507;
}

/*
 * The stone texture is a fixed raster image. It never morphs or flows.
 * Only the lighting layer moves, which keeps the material feeling solid.
 */
.theme-fw-icon .fcw-icon-stone-base,
.theme-fw-icon .fcw-icon-white-edge,
.theme-fw-icon .fcw-icon-white-opening,
.theme-fw-icon .fcw-icon-plate {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.theme-fw-icon .fcw-icon-stone-base {
    position: absolute;
    inset: -2%;
    z-index: 0;
    background-image:
        linear-gradient(rgba(21, 2, 5, 0.08), rgba(18, 2, 4, 0.20)),
        url('/pack-simulator/27/reveals/assets/fw-icon-red-marble.webp');
    box-shadow: inset 0 0 130px rgba(9, 0, 2, 0.48);
    transform: scale(1.025);
}

/* Slow polish/light movement, not moving marble. */
.theme-fw-icon .fcw-icon-stone-light {
    position: absolute;
    inset: -12%;
    z-index: 5;
    opacity: 0.24;
    background:
        linear-gradient(
            118deg,
            transparent 19%,
            rgba(255, 229, 210, 0.035) 34%,
            rgba(255, 240, 219, 0.12) 46%,
            rgba(255, 225, 199, 0.025) 58%,
            transparent 74%
        );
    transform: translate3d(-8%, 0, 0);
    animation: fcw-icon-stone-light 18s ease-in-out infinite alternate;
    will-change: transform;
}

/* -------------------------------------------------------------------------- */
/* WHITE MARBLE UNDER THE FRACTURE                                            */
/* -------------------------------------------------------------------------- */
.theme-fw-icon .fcw-icon-white-edge {
    position: absolute;
    inset: -1.4%;
    z-index: 1;
    opacity: 0;
    background:
        linear-gradient(
            90deg,
            rgba(135, 87, 26, 0.96) 0%,
            rgba(238, 208, 128, 0.98) 50%,
            rgba(135, 87, 26, 0.96) 100%
        ),
        radial-gradient(
            circle at 50% 50%,
            rgba(255, 238, 188, 0.28) 0%,
            transparent 68%
        );
    clip-path: polygon(
        42% 0%, 45.8% 9%, 43.2% 18%, 47.2% 27%, 44% 36%,
        48.2% 46%, 44.3% 56%, 47.5% 66%, 43.6% 76%, 46.8% 87%,
        43% 100%, 57% 100%, 53.2% 87%, 56.4% 76%, 52.5% 66%,
        55.7% 56%, 51.8% 46%, 56% 36%, 52.8% 27%, 56.8% 18%,
        54.2% 9%, 58% 0%
    );
    transform: scaleX(0.02) scaleY(1.015);
    transform-origin: 50% 50%;
    filter: blur(0.8px) drop-shadow(0 0 6px rgba(232, 201, 118, 0.65));
    will-change: transform, opacity;
}

.theme-fw-icon .fcw-icon-white-opening {
    position: absolute;
    inset: -1%;
    z-index: 2;
    opacity: 0;
    background-image:
        linear-gradient(rgba(255, 252, 247, 0.04), rgba(209, 178, 161, 0.06)),
        url('/pack-simulator/27/reveals/assets/fw-icon-white-marble.webp');
    clip-path: polygon(
        42.8% 0%, 46.1% 9%, 43.9% 18%, 47.3% 27%, 44.5% 36%,
        48.1% 46%, 44.8% 56%, 47.7% 66%, 44.2% 76%, 47.1% 87%,
        43.8% 100%, 56.2% 100%, 52.9% 87%, 55.8% 76%, 52.3% 66%,
        55.2% 56%, 51.9% 46%, 55.5% 36%, 52.7% 27%, 56.1% 18%,
        53.9% 9%, 57.2% 0%
    );
    transform: scaleX(0.02);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
}

.theme-fw-icon.phase-fracture .fcw-icon-white-edge {
    animation: fcw-icon-opening-edge 4.1s cubic-bezier(.16,.76,.18,1) forwards;
}

.theme-fw-icon.phase-fracture .fcw-icon-white-opening {
    animation: fcw-icon-opening 4.1s cubic-bezier(.16,.76,.18,1) forwards;
}


/* -------------------------------------------------------------------------- */
/* FRACTURE LINE: RECESSED SHADOW -> GOLD -> WHITE CORE                       */
/* -------------------------------------------------------------------------- */

.theme-fw-icon .fcw-icon-crack-svg {
    position: absolute;
    inset: -1%;
    width: 102%;
    height: 102%;
    z-index: 5;
    overflow: visible;
    opacity: 1;
}

.theme-fw-icon .fcw-icon-crack-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1500;
    stroke-dashoffset: 1500;
}

/*
 * Start with a single gold vertical rip, then let it disappear as the
 * white marble opens. No side branches and no chunky gold lines remaining
 * in the middle.
 */
.theme-fw-icon .fcw-icon-crack-shadow {
    stroke: rgba(22, 5, 4, 0.72);
    stroke-width: 7.5;
}

.theme-fw-icon .fcw-icon-crack-gold {
    stroke: rgba(214, 170, 72, 0.98);
    stroke-width: 3.6;
    filter: drop-shadow(0 0 4px rgba(241, 214, 133, 0.45));
}

.theme-fw-icon .fcw-icon-crack-white {
    stroke: rgba(255, 248, 242, 0.82);
    stroke-width: 0.9;
}

.theme-fw-icon.phase-rip .fcw-icon-crack-path.main {
    animation: fcw-icon-draw-crack .92s cubic-bezier(.18,.72,.20,1) forwards;
}

.theme-fw-icon.phase-fracture .fcw-icon-crack-svg {
    animation: fcw-icon-crack-fade .78s .18s ease forwards;
}

/* -------------------------------------------------------------------------- */
/* SIX TEXTURED 3D STONE PLATES                                               */
/* -------------------------------------------------------------------------- */

.theme-fw-icon .fcw-icon-plates {
    position: absolute;
    inset: 0;
    z-index: 3;
    perspective: 1300px;
    transform-style: preserve-3d;
}

.theme-fw-icon .fcw-icon-plate {
    position: absolute;
    inset: -2%;
    opacity: 1;
    background-image:
        linear-gradient(rgba(25, 2, 5, 0.03), rgba(12, 0, 2, 0.15)),
        url('/pack-simulator/27/reveals/assets/fw-icon-red-marble.webp');
    backface-visibility: hidden;
    transform-style: preserve-3d;
    box-shadow: none;
    will-change: transform, opacity;
}

.theme-fw-icon .plate-1 {
    clip-path: polygon(34% 0%, 50.5% 0%, 49.4% 18%, 46.4% 27%, 35% 24%);
    transform-origin: 47% 14%;
    --tx: -15px; --ty: -3px; --tz: 20px; --ry: 3.8deg; --rz: -0.7deg;
    --delay: 0s;
}

.theme-fw-icon .plate-2 {
    clip-path: polygon(49.5% 0%, 66% 0%, 65% 25%, 53.5% 28%, 50.6% 18%);
    transform-origin: 53% 14%;
    --tx: 17px; --ty: -2px; --tz: 22px; --ry: -4.1deg; --rz: 0.6deg;
    --delay: .05s;
}

.theme-fw-icon .plate-3 {
    clip-path: polygon(35% 24%, 46.4% 27%, 50.2% 49%, 46.2% 61%, 34% 57%);
    transform-origin: 46% 44%;
    --tx: -20px; --ty: 0px; --tz: 26px; --ry: 4.7deg; --rz: -0.5deg;
    --delay: .10s;
}

.theme-fw-icon .plate-4 {
    clip-path: polygon(53.5% 28%, 65% 25%, 66% 57%, 53.7% 61%, 49.8% 49%);
    transform-origin: 54% 44%;
    --tx: 22px; --ty: 0px; --tz: 28px; --ry: -5deg; --rz: 0.5deg;
    --delay: .14s;
}

.theme-fw-icon .plate-5 {
    clip-path: polygon(34% 57%, 46.2% 61%, 50.5% 82%, 49.4% 100%, 34% 100%);
    transform-origin: 46% 78%;
    --tx: -17px; --ty: 4px; --tz: 21px; --ry: 3.8deg; --rz: 0.6deg;
    --delay: .19s;
}

.theme-fw-icon .plate-6 {
    clip-path: polygon(53.7% 61%, 66% 57%, 66% 100%, 50.4% 100%, 49.5% 82%);
    transform-origin: 54% 78%;
    --tx: 18px; --ty: 4px; --tz: 22px; --ry: -4.1deg; --rz: -0.6deg;
    --delay: .23s;
}

.theme-fw-icon.phase-fracture .fcw-icon-plate {
    animation: fcw-icon-plate-lift 3.8s var(--delay) cubic-bezier(.16,.78,.18,1) forwards;
}

/* Small gold mineral fragments stay around the exposed centre. */
.theme-fw-icon .fcw-icon-gold-dust {
    position: absolute;
    left: 31%;
    right: 31%;
    top: 4%;
    bottom: 4%;
    z-index: 4;
    opacity: 0;
    background:
        radial-gradient(circle at 12% 20%, #e0b655 0 2px, transparent 3px),
        radial-gradient(circle at 81% 27%, #c8942d 0 2px, transparent 3px),
        radial-gradient(circle at 23% 44%, #edcf79 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 76% 52%, #d4a441 0 2px, transparent 3px),
        radial-gradient(circle at 16% 72%, #c79630 0 2px, transparent 3px),
        radial-gradient(circle at 86% 81%, #e3bd60 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 42% 91%, #cf9f37 0 2px, transparent 3px);
}

.theme-fw-icon.phase-fracture .fcw-icon-gold-dust {
    animation: fcw-icon-gold-dust 2.5s .38s ease-out forwards;
}

/* The old radial fracture burst is replaced by the stone split. */
.theme-fw-icon .fcw-hh-fracture {
    display: none;
}

/* The stone crack itself supplies the impact; avoid a lightning-style flash. */
.theme-fw-icon .fcw-hh-flash {
    display: none;
}

/* Pale particles remain above the stone, below the pack/card. */
.theme-fw-icon .fcw-hh-sand {
    z-index: 3;
}

/* Give the sealed pack crack the same restrained gold mineral edge. */
.theme-fw-icon .fcw-hh-pack-tear::before {
    filter:
        drop-shadow(-1px 0 0 rgba(205, 158, 59, 0.96))
        drop-shadow(1px 0 0 rgba(205, 158, 59, 0.96))
        drop-shadow(0 0 7px rgba(255, 255, 255, 0.72));
}


/*
 * Happy Hour has a literal clock.
 * FW Icon doesn't.
 */

.theme-fw-icon .fcw-hh-clock {
    display: none;
}


/* Pale marble dust instead of gold particles */

.theme-fw-icon .fcw-hh-sand-grain {
    background: #f3ddd2;

    box-shadow:
        0 0 5px rgba(255, 239, 229, 0.90),
        0 0 13px rgba(177, 101, 77, 0.28);
}


/* -------------------------------------------------------------------------- */
/* SEALED PACK                                                                */
/* -------------------------------------------------------------------------- */

.theme-fw-icon .fcw-hh-pack-face {
    border-color: rgba(218, 173, 62, 0.94);

    background-image:
        radial-gradient(
            ellipse at 73% 27%,
            rgba(255, 238, 225, 0.22) 0%,
            rgba(231, 193, 173, 0.10) 27%,
            transparent 52%
        ),
        linear-gradient(
            118deg,
            transparent 0 38%,
            rgba(255, 240, 210, 0.10) 44%,
            transparent 52% 100%
        ),
        url('/pack-simulator/27/reveals/assets/fw-icon-red-marble.webp');

    background-size: auto, auto, cover;
    background-position: center, center, center;

    box-shadow:
        inset 0 0 0 2px rgba(93, 44, 14, 0.84),
        inset 0 0 42px rgba(213, 159, 53, 0.12),
        inset -20px 0 30px rgba(39, 5, 4, 0.34),
        0 0 13px rgba(226, 179, 69, 0.28),
        0 0 34px rgba(111, 27, 18, 0.32);
}


.theme-fw-icon .fcw-hh-pack-side {
    background:
        linear-gradient(
            90deg,
            #b98529 0%,
            #69441b 21%,
            #5d1e16 58%,
            #210705 100%
        );
}


.theme-fw-icon .fcw-hh-pack-top {
    background:
        linear-gradient(
            180deg,
            #d7aa47 0%,
            #936725 29%,
            #63251a 68%,
            #260805 100%
        );
}


.theme-fw-icon .fcw-hh-pack-title {
    color: #f0d797;

    text-shadow:
        0 1px 0 #714815,
        0 2px 0 #321008,
        0 0 11px rgba(244, 213, 136, 0.50),
        0 0 24px rgba(116, 28, 18, 0.38);
}


/* Remove HH hourglass */

.theme-fw-icon .fcw-hh-hourglass {
    display: none;
}


/* Marble medallion */

.theme-fw-icon .fcw-hh-pack-emblem {
    border-color: rgba(220, 177, 77, 0.68);

    background:
        radial-gradient(
            circle at 64% 34%,
            rgba(250, 231, 219, 0.94) 0%,
            rgba(207, 153, 135, 0.78) 31%,
            rgba(106, 37, 29, 0.91) 62%,
            rgba(49, 8, 6, 0.97) 100%
        );

    box-shadow:
        inset 0 0 18px rgba(255, 237, 215, 0.23),
        0 0 18px rgba(212, 166, 60, 0.22);
}


/* -------------------------------------------------------------------------- */
/* AURA                                                                       */
/* -------------------------------------------------------------------------- */

.theme-fw-icon .fcw-hh-pack-aura.aura-1 {
    background:
        radial-gradient(
            ellipse at center,
            rgba(245, 222, 207, 0.29) 0%,
            rgba(151, 68, 53, 0.20) 33%,
            rgba(98, 20, 15, 0.08) 54%,
            transparent 72%
        );
}


.theme-fw-icon .fcw-hh-pack-aura.aura-2 {
    background:
        repeating-conic-gradient(
            from 0deg,
            transparent 0deg 9deg,
            rgba(238, 217, 180, 0.14) 9.3deg 9.8deg,
            transparent 10deg 19deg
        );
}


/* -------------------------------------------------------------------------- */
/* CENTRAL MARBLE CRACK                                                       */
/* -------------------------------------------------------------------------- */

/*
 * Reuse the existing tear element, but make it vertical.
 */

.theme-fw-icon .fcw-hh-pack-tear {
    left: 50%;
    top: -9%;

    width: 18px;
    height: 118%;

    transform:
        translateX(-50%)
        rotate(4deg)
        scaleY(0);

    transform-origin: center top;
}


.theme-fw-icon .fcw-hh-pack-tear::before {
    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            #f8eee8 7%,
            #ffffff 25%,
            #fffaf6 55%,
            #ffffff 78%,
            #ead7cb 94%,
            transparent 100%
        );

    clip-path: polygon(
        44% 0%,
        67% 7%,
        42% 14%,
        72% 22%,
        45% 30%,
        61% 38%,
        37% 47%,
        69% 55%,
        43% 63%,
        64% 72%,
        35% 80%,
        57% 89%,
        45% 100%,

        28% 91%,
        44% 82%,
        24% 74%,
        48% 65%,
        25% 57%,
        47% 49%,
        25% 40%,
        49% 32%,
        23% 23%,
        47% 15%,
        25% 7%
    );

    box-shadow:
        0 0 3px rgba(255, 248, 240, 0.82),
        0 0 8px rgba(210, 161, 55, 0.56);
}


.theme-fw-icon .fcw-hh-pack-tear::after {
    left: 50%;
    right: auto;
    top: 4%;

    width: 5px;
    height: 92%;

    transform: translateX(-50%);

    background: #fffaf6;

    filter: blur(4px);

    opacity: 0.42;
}


.theme-fw-icon.phase-rip .fcw-hh-pack-tear {
    animation:
        fcw-icon-marble-crack
        1.15s
        cubic-bezier(.15,.76,.22,1)
        forwards;
}


/* -------------------------------------------------------------------------- */
/* FRACTURE FLASH                                                             */
/* -------------------------------------------------------------------------- */

/*
 * The SVG supplies the actual crack. This is only a tight impact glow around
 * the centre, deliberately much smaller than the old full-screen white flash.
 */
.theme-fw-icon .fcw-hh-flash {
    background:
        radial-gradient(
            ellipse at 50% 49%,
            rgba(255, 253, 248, 0.72) 0%,
            rgba(226, 190, 103, 0.30) 7%,
            rgba(131, 47, 34, 0.11) 16%,
            transparent 31%
        );
}


/* Pre-reveal card glow */

.theme-fw-icon .fcw-hh-card-glow {
    box-shadow:
        0 0 18px rgba(255, 243, 230, 0.49),
        0 0 46px rgba(199, 144, 70, 0.32),
        0 0 88px rgba(109, 34, 24, 0.22);
}


/* Position reveal */

.theme-fw-icon .fcw-hh-position {
    color: #f8eae1;

    text-shadow:
        0 0 8px rgba(255, 248, 240, 0.89),
        0 0 22px rgba(154, 75, 55, 0.67);
}


/* -------------------------------------------------------------------------- */
/* KEYFRAMES                                                                  */
/* -------------------------------------------------------------------------- */

@keyframes fcw-icon-stone-light {
    from {
        transform: translate3d(-8%, -1%, 0);
        opacity: 0.18;
    }

    to {
        transform: translate3d(8%, 1%, 0);
        opacity: 0.30;
    }
}

@keyframes fcw-icon-draw-crack {
    from { stroke-dashoffset: 1500; }
    to { stroke-dashoffset: 0; }
}

@keyframes fcw-icon-crack-fade {
    0% {
        opacity: 1;
    }

    35% {
        opacity: 0.72;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fcw-icon-opening-edge {
    0% {
        opacity: 0;
        transform: scaleX(0.02) scaleY(1.015);
    }

    10% {
        opacity: 1;
        transform: scaleX(0.035) scaleY(1.02);
    }

    30% {
        opacity: 1;
        transform: scaleX(0.16) scaleY(1.02);
    }

    62% {
        opacity: 1;
        transform: scaleX(0.54) scaleY(1.02);
    }

    100% {
        opacity: 0.92;
        transform: scaleX(1.035) scaleY(1.02);
    }
}

@keyframes fcw-icon-opening {
    0% {
        opacity: 0;
        transform: scaleX(0.02);
    }

    10% {
        opacity: 1;
        transform: scaleX(0.03);
    }

    30% {
        opacity: 1;
        transform: scaleX(0.14);
    }

    62% {
        opacity: 1;
        transform: scaleX(0.50);
    }

    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}
@keyframes fcw-icon-plate-lift {
    0% {
        transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }

    34% {
        transform:
            translate3d(calc(var(--tx) * .18), calc(var(--ty) * .18), calc(var(--tz) * .20))
            rotateX(.2deg)
            rotateY(calc(var(--ry) * .20))
            rotateZ(calc(var(--rz) * .18));
    }

    72% {
        transform:
            translate3d(calc(var(--tx) * .70), calc(var(--ty) * .70), calc(var(--tz) * .72))
            rotateX(.45deg)
            rotateY(calc(var(--ry) * .72))
            rotateZ(calc(var(--rz) * .70));
    }

    100% {
        transform:
            translate3d(var(--tx), var(--ty), var(--tz))
            rotateX(.6deg)
            rotateY(var(--ry))
            rotateZ(var(--rz));
    }
}

@keyframes fcw-icon-gold-dust {
    0% { opacity: 0; }
    40% { opacity: 0.14; }
    100% { opacity: 0.40; }
}

@keyframes fcw-icon-fracture-flash {
    0% { opacity: 0; }
    16% { opacity: 0.22; }
    46% { opacity: 0.08; }
    100% { opacity: 0; }
}

/* Still used by the 3D sealed pack itself. */
@keyframes fcw-icon-marble-crack {
    0% {
        opacity: 0;
        transform: translateX(-50%) rotate(4deg) scaleY(0);
    }

    8% {
        opacity: 1;
    }

    76% {
        opacity: 1;
        transform: translateX(-50%) rotate(4deg) scaleY(1);
    }

    100% {
        opacity: 1;
        transform: translateX(-50%) rotate(4deg) scaleY(1.03);
    }
}

@media (max-width: 700px) {
    .fcw-hh-clock {
        width: 92vmin;
        top: 47%;
    }

    .fcw-hh-sealed-pack {
        width: 35vw;
        min-width: 128px;
    }

    .fcw-hh-card-stage {
        width: min(76vw, 330px);
        top: 48%;
    }

    .fcw-hh-full-card-inner {
        transform: scale(1.08);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fcw-hh-sand-grain,
    .fcw-hh-clock-hand,
    .fcw-hh-backdrop::after,
    .fcw-hh-card-glow,
    .fcw-hh-pack-body,
    .fcw-hh-pack-face::after,
    .fcw-icon-stone-light,
    .fcw-icon-white-edge,
    .fcw-icon-white-opening,
    .fcw-icon-plate,
    .fcw-icon-crack-path,
    .fcw-icon-gold-dust {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* FW Icon cinematic background / sealed pack. Card and stage selectors are untouched.
 * Existing stone and pack provide a fallback until both local textures load.
 */
.theme-fw-icon .fcw-icon-cinema {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.theme-fw-icon.fw-cinema-ready .fcw-icon-stone-scene > :not(.fcw-icon-cinema),
.theme-fw-icon.fw-cinema-ready .fcw-hh-sealed-pack,
.theme-fw-icon.fw-cinema-ready .fcw-hh-sand {
    display: none;
}
.theme-fw-icon.fw-cinema-ready .fcw-icon-cinema { display: block; }


/* FW Hero: background and sealed pack only. Original card/stage rules stay intact. */
.theme-fw-hero .fcw-hh-backdrop {
    background: radial-gradient(ellipse at 50% 50%, #36104f, #08030f 75%);
}
.theme-fw-hero .fcw-hh-backdrop::after,
.theme-fw-hero .fcw-hh-clock,
.theme-fw-hero .fcw-hh-fracture,
.theme-fw-hero .fcw-hh-flash { display: none; }
.theme-fw-hero .fcw-hh-pack-face {
    background: linear-gradient(135deg, #441660, #10051e 60%, #54177a);
    border-color: #f1aa55;
}
.theme-fw-hero .fcw-hero-cinema {
    display: none;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}
.theme-fw-hero.fw-hero-cinema-ready .fcw-hero-cinema { display: block; }
.theme-fw-hero .fcw-hh-sealed-pack,
.theme-fw-hero .fcw-hh-sand { display: none; }


/* Throwback: background and sealed pack only. Original card/stage rules stay intact. */
.theme-throwback .fcw-hh-backdrop {
    background: radial-gradient(ellipse at 50% 50%, #0c5130, #020c08 75%);
}
.theme-throwback .fcw-hh-backdrop::after,
.theme-throwback .fcw-hh-clock,
.theme-throwback .fcw-hh-fracture,
.theme-throwback .fcw-hh-flash { display: none; }
.theme-throwback .fcw-hh-pack-face {
    background: linear-gradient(135deg, #155b30, #03150b 60%, #186c37);
    border-color: #86ffb5;
}
.theme-throwback .fcw-throwback-cinema {
    display: none;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
}
.theme-throwback.fw-throwback-cinema-ready .fcw-throwback-cinema { display: block; }
.theme-throwback .fcw-hh-sealed-pack,
.theme-throwback .fcw-hh-sand { display: none; }

/* Both Goal of the Week variants share this background/pack renderer. */
.theme-gotw-shared .fcw-hh-backdrop { background: #130d1c; }
.theme-gotw-shared .fcw-hh-backdrop::after,
.theme-gotw-shared .fcw-hh-clock,
.theme-gotw-shared .fcw-hh-fracture,
.theme-gotw-shared .fcw-hh-flash,
.theme-gotw-shared .fcw-hh-sealed-pack,
.theme-gotw-shared .fcw-hh-sand { display: none; }
.theme-gotw-shared .fcw-gotw-cinema {
    display: none; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%); z-index: 2; pointer-events: none;
}
.theme-gotw-shared.fw-gotw-cinema-ready .fcw-gotw-cinema { display: block; }