body {
            background-color: #020203;
            -webkit-tap-highlight-color: transparent;
        }

        .apple-glass {
            background: rgba(10, 10, 14, 0.7);
            backdrop-filter: saturate(180%) blur(24px);
            -webkit-backdrop-filter: saturate(180%) blur(24px);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        .apple-card {
            background: linear-gradient(180deg, rgba(99, 102, 241, 0.04) 0%, rgba(99, 102, 241, 0.01) 100%);
            border: 1px solid rgba(99, 102, 241, 0.05);
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .text-glow-indigo {
            text-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
        }

        .text-glow-gold {
            text-shadow: 0 0 25px rgba(245, 158, 11, 0.5);
        }

        .text-glow-bronze {
            text-shadow: 0 0 25px rgba(184, 115, 51, 0.5);
        }

        .bg-subtle-grid-indigo {
            background-size: 50px 50px;
            background-image:
                linear-gradient(to right, rgba(255, 255, 255, 0.01) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.01) 1px, transparent 1px);
        }

        .custom-scroll::-webkit-scrollbar {
            width: 5px;
        }

        .custom-scroll::-webkit-scrollbar-track {
            background: transparent;
        }

        .custom-scroll::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 9999px;
        }

        /* 3D Cinematic Stage Configuration */
        .stage-viewport {
            perspective: 1500px;
            perspective-origin: 50% 50%;
            touch-action: none;
        }

        .stage-box {
            position: relative;
            width: 100%;
            height: 480px;
            overflow: hidden;
            border-radius: 32px;
            background: radial-gradient(circle at 50% 40%, rgba(99, 102, 241, 0.06) 0%, rgba(0, 0, 0, 0.8) 100%);
            border: 1px solid rgba(255, 255, 255, 0.05);
        }

        /* Highly realistic CSS-based Hand Mechanics */
        .hand-flicker {
            position: absolute;
            bottom: -320px;
            left: 50%;
            transform: translateX(-50%) rotate(0deg);
            width: 240px;
            height: 320px;
            transition: bottom 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s ease-out;
            pointer-events: none;
            z-index: 30;
        }

        .hand-flicker.active {
            bottom: -40px;
        }

        .hand-flicker.flicking {
            transform: translateX(-50%) scaleY(0.95) rotate(-3deg);
        }

        .hand-catcher {
            position: absolute;
            bottom: -320px;
            left: 50%;
            transform: translateX(-50%) rotate(0deg);
            width: 260px;
            height: 320px;
            transition: bottom 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s ease;
            pointer-events: none;
            z-index: 40;
        }

        .hand-catcher.active {
            bottom: -100px;
        }

        .hand-catcher.shaking {
            animation: suspenseShudder 0.3s infinite ease-in-out alternate;
        }

        .hand-cover {
            position: absolute;
            top: -320px;
            left: 50%;
            transform: translateX(-50%) rotate(180deg);
            width: 260px;
            height: 320px;
            transition: top 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), transform 0.3s ease;
            pointer-events: none;
            z-index: 45;
        }

        .hand-cover.active {
            top: 110px;
            /* Aligns to clamp down over catcher */
        }

        .hand-cover.shaking {
            animation: suspenseShudderCover 0.3s infinite ease-in-out alternate;
        }

        @keyframes suspenseShudder {
            0% {
                transform: translateX(-50%) rotate(-1deg) translateY(0px);
            }

            100% {
                transform: translateX(-48%) rotate(1deg) translateY(-2px);
            }
        }

        @keyframes suspenseShudderCover {
            0% {
                transform: translateX(-50%) rotate(179deg) translateY(0px);
            }

            100% {
                transform: translateX(-52%) rotate(181deg) translateY(2px);
            }
        }

        /* Interactive 3D Coin Model */
        .coin-flight-path {
            position: absolute;
            left: 50%;
            bottom: 120px;
            transform: translateX(-50%);
            z-index: 35;
            transform-style: preserve-3d;
            transition: bottom 0.05s linear, transform 0.05s linear;
        }

        .coin-wrapper {
            width: 110px;
            height: 110px;
            transform-style: preserve-3d;
            transition: transform 0.05s linear;
        }

        .coin-side {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow:
                inset 0 4px 10px rgba(255, 255, 255, 0.25),
                inset 0 -4px 10px rgba(0, 0, 0, 0.45),
                0 10px 25px rgba(0, 0, 0, 0.6);
        }

        /* Coin Materials */
        .coin-gold .coin-front {
            background: radial-gradient(circle at 35% 35%, #fde047 5%, #eab308 60%, #854d0e 100%);
            border: 4px double #ca8a04;
        }

        .coin-gold .coin-back {
            background: radial-gradient(circle at 35% 35%, #fef08a 5%, #d97706 60%, #78350f 100%);
            border: 4px double #b45309;
            transform: rotateY(180deg);
        }

        .coin-silver .coin-front {
            background: radial-gradient(circle at 35% 35%, #f9fafb 5%, #9ca3af 60%, #374151 100%);
            border: 4px double #d1d5db;
        }

        .coin-silver .coin-back {
            background: radial-gradient(circle at 35% 35%, #f3f4f6 5%, #6b7280 60%, #1f2937 100%);
            border: 4px double #9ca3af;
            transform: rotateY(180deg);
        }

        .coin-bronze .coin-front {
            background: radial-gradient(circle at 35% 35%, #fba862 5%, #b87333 60%, #5c2c06 100%);
            border: 4px double #9c591c;
        }

        .coin-bronze .coin-back {
            background: radial-gradient(circle at 35% 35%, #fdba74 5%, #a0522d 60%, #451a03 100%);
            border: 4px double #803b12;
            transform: rotateY(180deg);
        }

        /* Advanced Motion Blur and Glow filters */
        .motion-blur {
            filter: blur(4px) saturate(1.2);
        }

        .cinematic-flare {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            width: 250px;
            height: 250px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.4) 0%, rgba(245, 158, 11, 0.05) 50%, transparent 70%);
            border-radius: 50%;
            z-index: 33;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none;
        }

        .cinematic-flare.active {
            transform: translate(-50%, -50%) scale(1.5);
        }

        /* SVG Hand Vector styling */
        .hand-svg {
            fill: #1a1a24;
            stroke: rgba(255, 255, 255, 0.12);
            stroke-width: 1.5;
            filter: drop-shadow(0 15px 30px rgba(0, 0, 0, 0.8));
            transition: all 0.3s ease;
        }

        .shaking .hand-svg {
            fill: #222230;
            stroke: rgba(99, 102, 241, 0.3);
        }

        .thumb-element {
            transform-origin: 65px 210px;
            transition: transform 0.15s cubic-bezier(0.11, 0, 0.5, 0);
        }

        .thumb-flicked {
            transform: rotate(-35deg) translate(-10px, -15px);
        }