/* === GLOBAL GLOSSY BUTTON MANIFEST === */
        /* Mimics the .exit-button.btn-danger style but for other colors */

        /* Green / Success */
        .btn-glossy-success {
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.85) 0%, rgba(33, 136, 56, 0.85) 100%) !important;
            border: 2px solid rgba(40, 167, 69, 0.9) !important;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-success:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(40, 167, 69, 1) 0%, rgba(33, 136, 56, 1) 100%) !important;
        }

        .btn-glossy-success::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-success:hover::before {
            left: 100%;
        }

        /* Red / Danger */
        .btn-glossy-danger {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.85) 0%, rgba(200, 35, 51, 0.85) 100%) !important;
            border: 2px solid rgba(220, 53, 69, 0.9) !important;
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-danger:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(220, 53, 69, 1) 0%, rgba(200, 35, 51, 1) 100%) !important;
        }

        /* Reuse the shine effect by not scoping it too tightly if desired, or duplicate ::before logic */
        .btn-glossy-danger::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-danger:hover::before {
            left: 100%;
        }

        /* Blue / Info */
        .btn-glossy-info {
            background: linear-gradient(135deg, rgba(23, 162, 184, 0.85) 0%, rgba(19, 132, 150, 0.85) 100%) !important;
            border: 2px solid rgba(23, 162, 184, 0.9) !important;
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-info:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(23, 162, 184, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(23, 162, 184, 1) 0%, rgba(19, 132, 150, 1) 100%) !important;
        }

        .btn-glossy-info::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-info:hover::before {
            left: 100%;
        }


        /* === GLOBAL GLOSSY BUTTON MANIFEST === */
        /* Mimics the .exit-button.btn-danger style but for other colors */

        /* Green / Success */
        .btn-glossy-success {
            background: linear-gradient(135deg, rgba(40, 167, 69, 0.85) 0%, rgba(33, 136, 56, 0.85) 100%) !important;
            border: 2px solid rgba(40, 167, 69, 0.9) !important;
            box-shadow: 0 4px 12px rgba(40, 167, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-success:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(40, 167, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(40, 167, 69, 1) 0%, rgba(33, 136, 56, 1) 100%) !important;
        }

        .btn-glossy-success::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-success:hover::before {
            left: 100%;
        }

        /* Red / Danger */
        .btn-glossy-danger {
            background: linear-gradient(135deg, rgba(220, 53, 69, 0.85) 0%, rgba(200, 35, 51, 0.85) 100%) !important;
            border: 2px solid rgba(220, 53, 69, 0.9) !important;
            box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-danger:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(220, 53, 69, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(220, 53, 69, 1) 0%, rgba(200, 35, 51, 1) 100%) !important;
        }

        /* Reuse the shine effect by not scoping it too tightly if desired, or duplicate ::before logic */
        .btn-glossy-danger::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-danger:hover::before {
            left: 100%;
        }

        /* Blue / Info */
        .btn-glossy-info {
            background: linear-gradient(135deg, rgba(23, 162, 184, 0.85) 0%, rgba(19, 132, 150, 0.85) 100%) !important;
            border: 2px solid rgba(23, 162, 184, 0.9) !important;
            box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
            color: #fff !important;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
            position: relative;
            overflow: hidden;
            transition: all 0.2s ease !important;
        }

        .btn-glossy-info:hover {
            transform: translateY(-2px) scale(1.02) !important;
            box-shadow: 0 6px 16px rgba(23, 162, 184, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
            background: linear-gradient(135deg, rgba(23, 162, 184, 1) 0%, rgba(19, 132, 150, 1) 100%) !important;
        }

        .btn-glossy-info::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transform: rotate(45deg);
            transition: all 0.5s;
        }

        .btn-glossy-info:hover::before {
            left: 100%;
        }

        .hivemind-exit-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            cursor: pointer;
        }

        .hivemind-exit-text {
            margin-top: 5px;
            font-size: 0.75rem;
            font-weight: 600;
            color: #333;
            text-align: center;
        }

        .hivemind-banner-container {
            margin-top: 10px;
            min-height: 230px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hivemind-banner-img {
            max-width: 60%;
            max-height: 250px;
            width: auto;
            height: auto;
            object-fit: contain;
        }

        /* Reserve heading space early to prevent menu card jump on async welcome text load */
        #menu-page #welcome-message {
            min-height: 2.6rem;
            display: flex;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
        }

        /* === FIXED POSITIONING FOR UI CLUSTERS === */
        #top-right-ui-cluster {
            position: absolute;
            top: 20px;
            right: 25px;
            z-index: 50;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #streak-wheel-main-container {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 50;
        }