* {
            font-family: 'Fredoka', sans-serif;
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        html, body {
            overscroll-behavior: none;
            touch-action: manipulation;
        }

        /* Safe area for notched devices */
        body {
            padding-top: env(safe-area-inset-top);
            padding-bottom: env(safe-area-inset-bottom);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
        }

        .wheel-container {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            touch-action: none;
        }

        /* Lives system */
        .life-used {
            filter: grayscale(100%) opacity(0.4);
        }

        /* Battle Royale - Draw Type Switcher */
        .draw-type-switcher {
            display: flex;
            gap: 4px;
            background: #1e293b;
            padding: 4px;
            border-radius: 12px;
            border: 1px solid #334155;
        }
        .draw-type-btn {
            padding: 6px 14px;
            border-radius: 10px;
            font-size: 0.75rem;
            font-weight: 500;
            transition: all 0.2s;
            color: #94a3b8;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .draw-type-btn.active {
            background: #dc2626;
            color: white;
        }
        .draw-type-btn:not(.active) {
            background: transparent;
        }
        .draw-type-btn:not(.active):hover {
            background: #334155;
        }
        .draw-type-btn.active-direct {
            background: #f97316;
            color: white;
        }

        /* Battle Royale - Eliminated items */
        @keyframes brDeath {
            0% { transform: scale(1); opacity: 1; }
            30% { transform: scale(1.15) rotate(3deg); }
            60% { transform: scale(0.9) rotate(-2deg); opacity: 0.6; }
            100% { transform: scale(0.85); opacity: 1; filter: grayscale(100%); }
        }
        @keyframes brExplosion {
            0% { transform: scale(1); }
            50% { transform: scale(1.3); opacity: 0.5; }
            100% { transform: scale(0); opacity: 0; }
        }
        @keyframes brSkullAppear {
            0% { transform: scale(0) rotate(-180deg); opacity: 0; }
            100% { transform: scale(1) rotate(0deg); opacity: 1; }
        }
        .br-eliminated {
            animation: brDeath 0.6s ease forwards;
            position: relative;
        }
        .br-eliminated::after {
            content: '💀';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0);
            font-size: 1.5rem;
            animation: brSkullAppear 0.4s 0.3s ease forwards;
            z-index: 10;
        }
        .br-eliminated-text {
            text-decoration: line-through;
            color: #64748b !important;
        }

        /* Battle Royale - Wall of Dead */
        .br-wall-of-dead {
            background: #1e293b;
            border: 1px solid #334155;
            border-radius: 16px;
            padding: 12px;
            max-height: 200px;
            overflow-y: auto;
        }
        @keyframes brDeadEntry {
            0% { transform: scale(0) rotate(-10deg); opacity: 0; }
            40% { transform: scale(1.2) rotate(3deg); opacity: 1; }
            60% { transform: scale(0.9) rotate(-2deg); }
            75% { transform: scale(1.05) rotate(1deg); }
            100% { transform: scale(1) rotate(0deg); }
        }
        .br-dead-item {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 4px 10px;
            margin: 3px;
            background: #0f172a;
            border: 1px solid #1e293b;
            border-radius: 20px;
            font-size: 0.7rem;
            color: #64748b;
            text-decoration: line-through;
            animation: brDeadEntry 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
        }
        .br-dead-item .skull {
            font-size: 0.75rem;
        }

        /* Battle Royale - Commentator */
        @keyframes brCommentFade {
            0% { opacity: 0; transform: translateY(6px); }
            15% { opacity: 1; transform: translateY(0); }
            85% { opacity: 1; transform: translateY(0); }
            100% { opacity: 0; transform: translateY(-4px); }
        }
        .br-commentator {
            font-size: 0.72rem;
            font-style: italic;
            color: #94a3b8;
            text-align: center;
            padding: 6px 10px;
            animation: brCommentFade 3.5s ease forwards;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* Battle Royale - Speed indicator */
        .br-speed-indicator {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 0.65rem;
            padding: 2px 8px;
            border-radius: 10px;
            font-weight: 600;
            transition: all 0.3s;
        }
        .br-speed-normal { background: #1e3a2e; color: #4ade80; }
        .br-speed-fast { background: #3b2e1e; color: #fbbf24; }
        .br-speed-extreme { background: #3b1e1e; color: #f87171; }

        @keyframes brSpeedPulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.08); }
        }
        .br-speed-extreme {
            animation: brSpeedPulse 0.8s ease-in-out infinite;
        }

        /* Battle Royale - Survivor celebration */
        @keyframes brSurvivorPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7); }
            50% { transform: scale(1.05); box-shadow: 0 0 30px 10px rgba(249, 115, 22, 0.3); }
        }
        .br-survivor {
            animation: brSurvivorPulse 1s ease-in-out 3;
        }

        /* Battle Royale - Elimination modal */
        .br-elimination-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.6);
            backdrop-filter: blur(4px);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 55;
        }
        .br-elimination-card {
            background: #1e293b;
            border: 2px solid #dc2626;
            border-radius: 20px;
            padding: 24px;
            max-width: 320px;
            width: 90%;
            text-align: center;
            animation: slideUp 0.3s ease;
        }
        .br-counter {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: #dc2626;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
        }

        /* Settings slider icon feedback */
        @keyframes settingsIconBuzz {
            0%, 100% { transform: translateX(0); }
            20% { transform: translateX(-2px) rotate(-5deg); }
            40% { transform: translateX(2px) rotate(5deg); }
            60% { transform: translateX(-1px) rotate(-3deg); }
            80% { transform: translateX(1px) rotate(3deg); }
        }
        .settings-icon-buzz {
            display: inline-block;
            animation: settingsIconBuzz 0.35s ease;
        }

        /* Spinning food emoji */
        @keyframes spinEmoji {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .spinning-emoji {
            display: inline-block;
            animation: spinEmoji var(--spin-duration, 3s) linear infinite;
        }

        .wheel-pointer {
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.5));
        }

        .pointer-fold {
            color: #e2e8f0;
        }

        /* Mobile pointer size adjustment */
        @media (max-width: 640px) {
            .wheel-pointer svg {
                width: 30px;
                height: 38px;
            }
        }

        .spin-button {
            position: absolute;
            z-index: 10;
            transition: all 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .spin-button:hover:not(:disabled) {
            transform: scale(1.05);
        }

        .spin-button:active:not(:disabled) {
            transform: scale(0.92);
        }

        .spin-button:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        /* Mobile bottom sheet styles */
        .result-modal-overlay {
            transition: background-color 0.3s ease;
        }

        .result-card {
            animation: slideUp 0.2s cubic-bezier(0.16, 1, 0.3, 1);
        }

        /* Mobile: bottom sheet style */
        @media (max-width: 640px) {
            .result-modal-overlay {
                align-items: flex-end !important;
                padding: 0 !important;
            }

            .result-card {
                animation: slideUpMobile 0.2s cubic-bezier(0.16, 1, 0.3, 1);
                border-bottom-left-radius: 0 !important;
                border-bottom-right-radius: 0 !important;
                max-width: 100% !important;
                padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)) !important;
            }

            .result-card::before {
                content: '';
                display: block;
                width: 40px;
                height: 4px;
                background: #475569;
                border-radius: 2px;
                margin: 0 auto 1rem;
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes slideUpMobile {
            from {
                opacity: 0;
                transform: translateY(100%);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .pulse-ring {
            animation: pulse-ring 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }

        @keyframes pulse-ring {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 12px rgba(249, 115, 22, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
            }
        }

        .pulse-ring-gray {
            animation: pulse-ring-gray 1.5s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }

        @keyframes pulse-ring-gray {
            0% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(71, 85, 105, 0.7);
            }
            70% {
                transform: scale(1);
                box-shadow: 0 0 0 12px rgba(71, 85, 105, 0);
            }
            100% {
                transform: scale(0.95);
                box-shadow: 0 0 0 0 rgba(71, 85, 105, 0);
            }
        }

        .glow-effect {
            box-shadow: 0 0 50px rgba(71, 85, 105, 0.5);
        }

        @media (max-width: 640px) {
            .glow-effect {
                box-shadow: 0 0 30px rgba(71, 85, 105, 0.45);
            }
        }

        .backdrop-blur-custom {
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
        }

        /* Touch feedback for buttons */
        .touch-btn {
            transition: transform 0.1s ease, background-color 0.15s ease;
        }

        .touch-btn:active {
            transform: scale(0.96);
        }

        /* Install banner styles */
        .install-banner {
            animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .offline-banner {
            animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .offline-banner.hiding {
            animation: slideUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        }

        @keyframes slideUp {
            from {
                opacity: 1;
                transform: translateY(0);
            }
            to {
                opacity: 0;
                transform: translateY(-100%);
            }
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-100%);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* Shimmer effect for loading */
        .shimmer {
            background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }

        @keyframes shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }

        /* Swipe indicator animation */
        .swipe-hint {
            animation: swipeHint 2s ease-in-out infinite;
        }

        @keyframes swipeHint {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
        }

        /* Settings panel styles */
        .settings-panel {
            animation: slideInRight 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            position: relative;
            overflow: hidden;
        }

        /* Bottom fade gradient */
        .settings-panel::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 40px;
            background: linear-gradient(to bottom, transparent, #1e293b);
            pointer-events: none;
            z-index: 2;
            border-radius: 0 0 1rem 1rem;
        }

        @keyframes slideInRight {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @media (max-width: 640px) {
            .settings-panel {
                animation: slideUpMobile 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                border-radius: 1.5rem 1.5rem 0 0 !important;
                max-height: 85vh;
            }
            .settings-panel::after {
                border-radius: 0;
            }
        }

        /* Custom range slider */
        input[type="range"] {
            -webkit-appearance: none;
            appearance: none;
            width: 100%;
            height: 8px;
            border-radius: 4px;
            background: #334155;
            outline: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #f97316;
            cursor: pointer;
            transition: transform 0.15s ease;
        }

        input[type="range"]::-webkit-slider-thumb:hover {
            transform: scale(1.1);
        }

        input[type="range"]::-moz-range-thumb {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #f97316;
            cursor: pointer;
            border: none;
        }

        /* Progress bar animation */
        .countdown-bar {
            height: 6px;
            background: linear-gradient(90deg, #334155 0%, #334155 100%);
            border-radius: 3px;
            overflow: hidden;
            position: relative;
        }

        .countdown-bar-fill {
            height: 100%;
            border-radius: 3px;
            transition: width 0.1s linear;
            background: linear-gradient(90deg, #22c55e, #eab308, #f97316, #ef4444);
            background-size: 300% 100%;
            animation: gradientShift 3s ease infinite;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .countdown-text {
            font-variant-numeric: tabular-nums;
        }

        .mode-transition {
            animation: fadeScaleIn 0.4s ease forwards;
        }

        @keyframes fadeScaleIn {
            from {
                opacity: 0;
                transform: scale(0.96);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Custom scrollbar */
        .custom-scrollbar {
            scrollbar-width: thin;
            scrollbar-color: #f97316 transparent;
        }

        .custom-scrollbar::-webkit-scrollbar {
            width: 6px;
        }

        .custom-scrollbar::-webkit-scrollbar-track {
            background: transparent;
            margin-bottom: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #f97316, #ea580c);
            border-radius: 10px;
        }

        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #fb923c, #f97316);
        }

        #perso-input {
            -webkit-user-select: text;
            user-select: text;
        }

        /* ===== SLOT MACHINE ===== */
        .slot-machine-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .slot-machine {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1rem;
        }

        .slot-frame {
            position: relative;
            background: linear-gradient(145deg, #1e293b, #0f172a);
            border: 3px solid #f97316;
            border-radius: 1.5rem;
            padding: 0.75rem 1rem 1rem;
            box-shadow: 0 0 40px rgba(249, 115, 22, 0.2), inset 0 2px 10px rgba(0,0,0,0.5);
        }

        .slot-header {
            text-align: center;
            margin-bottom: 0.75rem;
        }

        .slot-title {
            font-size: 0.6rem;
            font-weight: 700;
            color: #f97316;
            letter-spacing: 0.15em;
            text-transform: uppercase;
        }

        @media (min-width: 640px) {
            .slot-title {
                font-size: 0.75rem;
            }
        }

        .slot-reels-container {
            display: flex;
            align-items: center;
            gap: 0;
        }

        .slot-reel-wrapper {
            width: 80px;
            height: 100px;
            overflow: hidden;
            position: relative;
            background: #0f172a;
            border-radius: 0.75rem;
            border: 2px solid #334155;
        }

        @media (min-width: 640px) {
            .slot-reel-wrapper {
                width: 100px;
                height: 120px;
            }
        }

        @media (min-width: 768px) {
            .slot-reel-wrapper {
                width: 120px;
                height: 140px;
            }
        }

        .slot-reel-wrapper::before,
        .slot-reel-wrapper::after {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            height: 30%;
            z-index: 2;
            pointer-events: none;
        }

        .slot-reel-wrapper::before {
            top: 0;
            background: linear-gradient(to bottom, #0f172a, transparent);
        }

        .slot-reel-wrapper::after {
            bottom: 0;
            background: linear-gradient(to top, #0f172a, transparent);
        }

        .slot-reel {
            display: flex;
            flex-direction: column;
            align-items: center;
            will-change: transform;
        }

        .slot-reel-item {
            width: 100%;
            height: 100px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            flex-shrink: 0;
        }

        @media (min-width: 640px) {
            .slot-reel-item {
                height: 120px;
            }
        }

        @media (min-width: 768px) {
            .slot-reel-item {
                height: 140px;
            }
        }

        .slot-reel-emoji {
            font-size: 2rem;
            line-height: 1;
        }

        @media (min-width: 640px) {
            .slot-reel-emoji {
                font-size: 2.5rem;
            }
        }

        @media (min-width: 768px) {
            .slot-reel-emoji {
                font-size: 3rem;
            }
        }

        .slot-reel-text {
            font-size: 0.5rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.85);
            text-align: center;
            line-height: 1.1;
            max-width: calc(100% - 6px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 3px;
        }

        @media (min-width: 640px) {
            .slot-reel-text {
                font-size: 0.6rem;
            }
        }

        @media (min-width: 768px) {
            .slot-reel-text {
                font-size: 0.7rem;
            }
        }

        .slot-separator {
            width: 2px;
            height: 80px;
            background: #334155;
            margin: 0 2px;
            flex-shrink: 0;
        }

        @media (min-width: 640px) {
            .slot-separator {
                height: 100px;
                margin: 0 4px;
            }
        }

        .slot-indicator-line {
            position: absolute;
            left: 0.5rem;
            right: 0.5rem;
            top: 50%;
            height: 2px;
            background: #f97316;
            opacity: 0.5;
            pointer-events: none;
            z-index: 3;
            border-radius: 1px;
            box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
        }

        .slot-lever-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: #475569;
            color: white;
            font-weight: 700;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.75rem 2rem;
            border-radius: 9999px;
            border: none;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            cursor: pointer;
        }

        @media (min-width: 640px) {
            .slot-lever-btn {
                font-size: 0.8rem;
                padding: 0.85rem 2.5rem;
            }
        }

        .slot-lever-btn:hover:not(:disabled) {
            background: #334155;
        }

        .slot-lever-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .slot-lever-btn.spinning {
            animation: pulse-ring-gray 1s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
        }

        @keyframes slotWin {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

        .slot-reel-item.winner {
            animation: slotWin 0.4s ease 2;
        }

        /* ===== CAROUSEL ===== */
        .carousel-container {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .carousel-frame {
            position: relative;
            width: 280px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        @media (min-width: 640px) {
            .carousel-frame {
                width: 340px;
            }
        }

        @media (min-width: 768px) {
            .carousel-frame {
                width: 400px;
            }
        }

        .carousel-viewport {
            width: 100%;
            overflow: hidden;
            border-radius: 1.5rem;
            border: 3px solid #334155;
            background: #0f172a;
        }

        .carousel-track {
            display: flex;
            will-change: transform;
        }

        .carousel-card {
            flex-shrink: 0;
            width: 280px;
            height: 180px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            padding: 1rem;
        }

        @media (min-width: 640px) {
            .carousel-card {
                width: 340px;
                height: 210px;
            }
        }

        @media (min-width: 768px) {
            .carousel-card {
                width: 400px;
                height: 240px;
            }
        }

        .carousel-card-name {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            text-align: center;
        }

        @media (min-width: 640px) {
            .carousel-card-name {
                font-size: 1.8rem;
            }
        }

        .carousel-card-emoji {
            font-size: 3rem;
        }

        @media (min-width: 640px) {
            .carousel-card-emoji {
                font-size: 3.5rem;
            }
        }

        .carousel-pointer {
            text-align: center;
            margin-top: -0.25rem;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
        }

        .carousel-spin-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: #475569;
            color: white;
            font-weight: 700;
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.75rem 2rem;
            border-radius: 9999px;
            border: none;
            margin-top: 1rem;
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
            cursor: pointer;
        }

        @media (min-width: 640px) {
            .carousel-spin-btn {
                font-size: 0.8rem;
                padding: 0.85rem 2.5rem;
            }
        }

        .carousel-spin-btn:hover:not(:disabled) {
            background: #334155;
        }

        .carousel-spin-btn:disabled {
            opacity: 0.7;
            cursor: not-allowed;
        }

        .carousel-card.winner-card {
            animation: carouselPop 0.5s ease;
        }

        @keyframes carouselPop {
            0% { transform: scale(1); }
            40% { transform: scale(1.08); }
            100% { transform: scale(1); }
        }

        /* ===== DESIGN SWITCHER ===== */
        .design-switcher {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.375rem;
            background: #1e293b;
            padding: 0.25rem;
            border-radius: 0.75rem;
            border: 1px solid #334155;
        }

        .design-switcher-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.35rem;
            padding: 0.35rem 0.75rem;
            border-radius: 0.5rem;
            font-size: 0.65rem;
            font-weight: 600;
            transition: all 0.2s ease;
            cursor: pointer;
            border: none;
            background: transparent;
            color: #94a3b8;
        }

        .design-switcher-btn:hover {
            color: #e2e8f0;
            background: #334155;
        }

        .design-switcher-btn.active {
            background: #475569;
            color: #f97316;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }

        @media (min-width: 640px) {
            .design-switcher-btn {
                font-size: 0.7rem;
                padding: 0.4rem 1rem;
                gap: 0.4rem;
            }
        }

        /* ===== DISPLAY TRANSITIONS ===== */
        .display-fade-out {
            animation: displayFadeOut 0.2s ease forwards;
        }

        .display-fade-in {
            animation: displayFadeIn 0.3s ease forwards;
        }

        @keyframes displayFadeOut {
            from { opacity: 1; transform: scale(1); }
            to { opacity: 0; transform: scale(0.95); }
        }

        @keyframes displayFadeIn {
            from { opacity: 0; transform: scale(0.95); }
            to { opacity: 1; transform: scale(1); }
        }

        /* ===== HEADER SUBTITLE (greeting → location cross-fade, fixed height) ===== */
        .header-subtitle {
            position: relative;
            height: 1.5rem;        /* fixed — never collapses, never jumps */
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 0.125rem;
            margin-bottom: 0.5rem;
        }

        .greeting-message {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            color: #94a3b8;
            line-height: 1.35;
            text-align: center;
            padding: 0 0.5rem;
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.7s ease, transform 0.6s ease;
        }

        .greeting-message.fade-out {
            opacity: 0;
            transform: translateY(-5px);
            pointer-events: none;
        }

        .location-label {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.3rem;
            font-size: 0.75rem;
            color: #94a3b8;
            opacity: 0;
            transform: translateY(5px);
            transition: opacity 0.7s ease, transform 0.6s ease;
            pointer-events: none;
        }

        .location-label.visible {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        @media (min-width: 640px) {
            .greeting-message  { font-size: 0.85rem; }
            .location-label    { font-size: 0.875rem; }
        }

        @media (min-width: 640px) {
            .greeting-message {
                font-size: 0.85rem;
            }
        }

        /* ===== CHANGELOG ===== */
        .changelog-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            cursor: pointer;
            background: none;
            border: none;
            color: #64748b;
            font-size: 0.7rem;
            font-weight: 500;
            padding: 0.25rem 0.5rem;
            border-radius: 0.5rem;
            transition: color 0.2s ease;
        }

        .changelog-btn:hover {
            color: #f97316;
        }

        .changelog-badge {
            position: absolute;
            top: -4px;
            right: -6px;
            background: #ef4444;
            color: white;
            font-size: 0.45rem;
            font-weight: 700;
            padding: 1px 4px;
            border-radius: 9999px;
            line-height: 1.3;
            letter-spacing: 0.03em;
            animation: badgePulse 2s ease-in-out infinite;
        }

        @keyframes badgePulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

        .changelog-version {
            font-size: 0.85rem;
            font-weight: 700;
            color: #f97316;
            margin-bottom: 0.15rem;
        }

        .changelog-subtitle {
            font-size: 0.7rem;
            color: #94a3b8;
            font-style: italic;
            margin-bottom: 0.75rem;
        }

        .changelog-item {
            font-size: 0.78rem;
            color: #cbd5e1;
            padding: 0.3rem 0;
            line-height: 1.5;
        }

        .changelog-item.highlight {
            background: linear-gradient(90deg, rgba(249, 115, 22, 0.12), transparent);
            border-left: 2px solid #f97316;
            padding-left: 0.5rem;
            margin-left: -0.5rem;
            border-radius: 0 0.25rem 0.25rem 0;
            color: #f1f5f9;
            font-weight: 500;
        }

        .changelog-bug {
            font-size: 0.7rem;
            color: #94a3b8;
            padding: 0.4rem 0.6rem;
            margin-top: 0.5rem;
            background: rgba(100, 116, 139, 0.1);
            border-radius: 0.5rem;
            border: 1px dashed #334155;
            font-style: italic;
            line-height: 1.5;
        }

        .changelog-divider {
            border: none;
            border-top: 1px solid #475569;
            margin: 0.85rem 0;
        }

        /* ===== PHOTO FLIP CARD ===== */
        .winner-photo-flip-scene {
            perspective: 1000px;
        }

        .winner-photo-card {
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .winner-photo-card.flipped {
            transform: rotateY(180deg);
        }

        .winner-photo-face {
            position: absolute;
            inset: 0;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
        }

        .winner-photo-back {
            transform: rotateY(180deg);
        }

        /* ===== SALON — GROUP ROOM ===== */

        /* Safe area top padding for salon overlay header */
        .pt-safe {
            padding-top: max(0.5rem, env(safe-area-inset-top));
        }

        /* 4-digit room code */
        .salon-code-digits {
            font-size: 2.25rem;
            font-weight: 700;
            color: #ffffff;
            letter-spacing: 0.3em;
            font-variant-numeric: tabular-nums;
        }

        /* Member row — base style (no animation here to avoid re-render flash) */
        .salon-member-item {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            background: rgba(51, 65, 85, 0.5);
            border: 1px solid #334155;
            border-radius: 0.75rem;
            padding: 0.5rem 0.75rem;
        }

        /* Applied only once, when the row is first inserted */
        .salon-member-new {
            animation: salonMemberSlide 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
        }

        @keyframes salonMemberSlide {
            from { opacity: 0; transform: translateX(-14px) scale(0.95); }
            to   { opacity: 1; transform: translateX(0)      scale(1);    }
        }

        /* ── Collapsible sections — max-height (grid-rows ne s'anime pas dans tous les navigateurs) ── */
        .salon-collapse-content {
            overflow: hidden;
            max-height: 600px;
            transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .salon-collapse-content.collapsed {
            max-height: 0;
        }
        .salon-collapse-inner { /* kept for semantic clarity, no rules needed */ }
        .salon-chevron {
            transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .salon-chevron.rotated {
            transform: rotate(180deg);
        }

        /* Launch button active state */
        .salon-launch-ready {
            box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6);
            animation: salonLaunchPulse 2s ease-in-out infinite;
        }

        @keyframes salonLaunchPulse {
            0%, 100% { box-shadow: 0 0 0 0   rgba(249, 115, 22, 0.6); }
            50%       { box-shadow: 0 0 0 12px rgba(249, 115, 22, 0);   }
        }

        /* ── Guest vote buttons ── */
        .guest-vote-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.4rem;
            padding: 0.75rem 0.5rem;
            background: #1e293b;
            border: 2px solid #334155;
            border-radius: 1rem;
            color: #f1f5f9;
            transition: border-color 0.2s, background 0.2s, transform 0.15s;
            cursor: pointer;
        }

        .guest-vote-btn:not(:disabled):hover {
            border-color: #f97316;
            background: rgba(249, 115, 22, 0.12);
            transform: translateY(-2px);
        }

        .guest-vote-btn:active:not(:disabled) {
            transform: scale(0.95);
        }

        .guest-vote-selected {
            border-color: #f97316 !important;
            background: rgba(249, 115, 22, 0.2) !important;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
        }

        .guest-vote-dim {
            opacity: 0.35;
        }

        /* ── Salon config buttons (mode & display picker) ── */
        .salon-config-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.3rem;
            padding: 0.9rem 0.5rem;
            background: #1e293b;
            border: 2px solid #334155;
            border-radius: 1rem;
            color: #94a3b8;
            transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
            cursor: pointer;
            width: 100%;
        }

        .salon-config-btn:hover {
            border-color: #f97316;
            background: rgba(249, 115, 22, 0.08);
            color: #f1f5f9;
            transform: translateY(-2px);
        }

        .salon-config-btn:active {
            transform: scale(0.95);
        }

        .salon-config-btn--active {
            border-color: #f97316 !important;
            background: rgba(249, 115, 22, 0.15) !important;
            color: #ffffff !important;
            box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.25);
        }

        /* ── Countdown number ── */
        .salon-countdown-num {
            display: inline-block;
            text-shadow:
                0 0 40px rgba(249, 115, 22, 0.8),
                0 0 80px rgba(249, 115, 22, 0.4);
        }

        @keyframes salonCountdownPop {
            0%   { transform: scale(1.8);  opacity: 0.3; }
            40%  { transform: scale(1.05); opacity: 1;   }
            70%  { transform: scale(0.98); }
            100% { transform: scale(1);    }
        }

        .salon-countdown-pop {
            animation: salonCountdownPop 0.5s cubic-bezier(0.34, 1.4, 0.64, 1) both;
        }

        /* ── Salon btn glow on hover ── */
        #salon-btn:hover {
            color: #f97316;
        }

/* ===============================
   Street Food / Stickers Reskin
   =============================== */
:root {
    --ink: #1F2430;
    --paper: #FFF4E6;
    --tomato: #FF4D3D;
    --mustard: #FFC233;
    --mint: #2ED3B7;
    --blue: #3B6EF6;
    --sticker-shadow: 6px 6px 0 var(--ink);
    --sticker-shadow-pressed: 3px 3px 0 var(--ink);
    --radius-card: 22px 18px 20px 16px;
    --radius-sticker: 14px 10px 16px 12px;
    --ui-speed: 190ms;
}

body.ui-street {
    color: var(--ink) !important;
    background-color: var(--paper) !important;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(255, 194, 51, 0.14) 0, transparent 38%),
        radial-gradient(circle at 78% 12%, rgba(59, 110, 246, 0.11) 0, transparent 34%),
        radial-gradient(circle at 50% 85%, rgba(46, 211, 183, 0.10) 0, transparent 34%),
        repeating-linear-gradient(45deg, rgba(31, 36, 48, 0.02) 0 2px, transparent 2px 8px),
        repeating-linear-gradient(-35deg, rgba(31, 36, 48, 0.015) 0 1px, transparent 1px 7px);
    font-family: 'Inter', 'Fredoka', system-ui, sans-serif;
}

body.ui-street h1,
body.ui-street h2,
body.ui-street h3,
body.ui-street .slot-title,
body.ui-street #winner-name,
body.ui-street .spin-button span,
body.ui-street #app-mode-selector button span {
    font-family: 'Fredoka', 'Baloo 2', 'Inter', sans-serif;
}

body.ui-street header h1 { color: var(--ink) !important; }
body.ui-street header h1 .text-foodie-orange { color: var(--tomato) !important; }

body.ui-street .mode-segmented {
    background: rgba(255,255,255,0.8) !important;
    border: 2px solid var(--ink) !important;
    border-radius: 16px 14px 18px 13px !important;
    box-shadow: var(--sticker-shadow);
    padding: 6px !important;
}

body.ui-street #app-mode-selector button,
body.ui-street .touch-btn,
body.ui-street #spin-btn,
body.ui-street #slot-spin-btn,
body.ui-street #carousel-spin-btn,
body.ui-street #perso-add-btn {
    border: 2px solid var(--ink) !important;
    box-shadow: var(--sticker-shadow) !important;
    border-radius: var(--radius-sticker) !important;
    transition: transform var(--ui-speed) ease, box-shadow var(--ui-speed) ease, background-color var(--ui-speed) ease !important;
}

body.ui-street #app-mode-selector button:hover,
body.ui-street .touch-btn:hover,
body.ui-street #spin-btn:hover:not(:disabled),
body.ui-street #slot-spin-btn:hover:not(:disabled),
body.ui-street #carousel-spin-btn:hover:not(:disabled) {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink) !important;
}

body.ui-street #app-mode-selector button:active,
body.ui-street .touch-btn:active,
body.ui-street #spin-btn:active:not(:disabled),
body.ui-street #slot-spin-btn:active:not(:disabled),
body.ui-street #carousel-spin-btn:active:not(:disabled) {
    transform: translate(2px, 2px) !important;
    box-shadow: var(--sticker-shadow-pressed) !important;
}

body.ui-street #app-mode-selector button[id="app-mode-sortie"],
body.ui-street #app-mode-selector button.bg-foodie-orange,
body.ui-street .draw-type-btn.active,
body.ui-street .draw-type-btn.active-direct {
    background: var(--tomato) !important;
    color: var(--paper) !important;
}

body.ui-street #app-mode-selector button:not(.bg-foodie-orange) {
    background: #fffdf7 !important;
    color: var(--ink) !important;
}

body.ui-street .wheel-container canvas {
    border: 4px solid var(--ink);
    box-shadow: 0 0 0 6px var(--paper), 0 0 0 8px var(--ink), 10px 10px 0 rgba(31, 36, 48, 0.95);
    background: #fffaf2;
}

body.ui-street .wheel-pointer { top: -14px; filter: drop-shadow(6px 6px 0 rgba(31,36,48,.95)); }
body.ui-street .pointer-fold { color: var(--mustard); }

body.ui-street .spin-button { background: var(--mustard) !important; color: var(--ink) !important; }
body.ui-street #slot-spin-btn,
body.ui-street #carousel-spin-btn { background: var(--mint) !important; color: var(--ink) !important; }

body.ui-street #restaurant-count,
body.ui-street .text-slate-600,
body.ui-street .text-slate-500,
body.ui-street .text-slate-400,
body.ui-street .text-slate-300,
body.ui-street .text-white { color: var(--ink) !important; }

body.ui-street .text-foodie-orange { color: var(--tomato) !important; }

body.ui-street #display-wheel,
body.ui-street #display-slot .slot-frame,
body.ui-street #display-carousel .carousel-frame,
body.ui-street #perso-panel > div,
body.ui-street #br-wall-container .br-wall-of-dead,
body.ui-street #result-card {
    background: rgba(255, 255, 255, 0.72) !important;
    border: 2px solid var(--ink) !important;
    border-radius: var(--radius-card) !important;
    box-shadow: 8px 8px 0 rgba(31, 36, 48, 0.95) !important;
}

body.ui-street #settings-btn,
body.ui-street #salon-btn,
body.ui-street #lives-container {
    background: #fffdf7 !important;
    border: 2px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    color: var(--ink) !important;
}

body.ui-street .settings-panel,
body.ui-street #manage-items-modal > div,
body.ui-street #changelog-modal > div,
body.ui-street #history-modal > div,
body.ui-street #result-card,
body.ui-street #salon-overlay #salon-step-config,
body.ui-street #salon-overlay #salon-step-name,
body.ui-street #salon-overlay #salon-step-room,
body.ui-street #salon-overlay #salon-step-join,
body.ui-street #salon-overlay #salon-step-guest,
body.ui-street #salon-overlay #guest-result-phase,
body.ui-street #salon-host-vote {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid var(--ink) !important;
    box-shadow: 8px 8px 0 var(--ink) !important;
    border-radius: var(--radius-card) !important;
}

body.ui-street #salon-overlay { background: var(--paper) !important; }
body.ui-street #salon-overlay .salon-config-btn,
body.ui-street #settings-modal select,
body.ui-street #settings-modal input[type="text"],
body.ui-street #settings-modal input[type="range"] {
    border: 2px solid var(--ink) !important;
}


body.ui-street #settings-modal hr,
body.ui-street #history-modal hr,
body.ui-street #changelog-modal hr,
body.ui-street #manage-items-modal hr { border-color: rgba(31, 36, 48, 0.18) !important; }

body.ui-street #settings-modal .bg-slate-700,
body.ui-street #history-modal .bg-slate-700,
body.ui-street #changelog-modal .bg-slate-700,
body.ui-street #manage-items-modal .bg-slate-700,
body.ui-street #salon-overlay .bg-slate-700,
body.ui-street #salon-overlay .bg-slate-800,
body.ui-street #salon-overlay .bg-slate-800\/70 {
    background: #fff9ef !important;
    border-color: var(--ink) !important;
}

body.ui-street #history-modal .border-slate-700,
body.ui-street #changelog-modal .border-slate-700,
body.ui-street #manage-items-modal .border-slate-700,
body.ui-street #settings-modal .border-slate-700,
body.ui-street #salon-overlay .border-slate-700 { border-color: rgba(31, 36, 48, 0.35) !important; }
body.ui-street .spin-stop-bounce { animation: wheelStopBounce 400ms cubic-bezier(.22,1.26,.35,1) 1; }
@keyframes wheelStopBounce {
    0% { transform: translateY(0) scale(1); }
    40% { transform: translateY(-6px) scale(1.015); }
    100% { transform: translateY(0) scale(1); }
}

body.ui-street :focus-visible {
    outline: 3px solid var(--ink) !important;
    outline-offset: 3px;
}

@media (max-width: 640px) {
    body.ui-street .mode-segmented { box-shadow: 4px 4px 0 var(--ink); }
    body.ui-street #display-wheel,
    body.ui-street #display-slot .slot-frame,
    body.ui-street #display-carousel .carousel-frame { box-shadow: 5px 5px 0 rgba(31, 36, 48, 0.95) !important; }
}



body.ui-street #theme-select {
    background: #fffdf7 !important;
    color: var(--ink) !important;
    border: 2px solid var(--ink) !important;
    box-shadow: 4px 4px 0 var(--ink);
}

body.ui-street #theme-select option {
    background: #fff7ea;
    color: var(--ink);
}

body.ui-street .design-switcher,
body.ui-street .draw-type-switcher {
    background: rgba(255, 255, 255, 0.86) !important;
    border: 2px solid var(--ink) !important;
    border-radius: 14px !important;
    box-shadow: 4px 4px 0 var(--ink);
    padding: 5px !important;
}

body.ui-street .design-switcher-btn,
body.ui-street .draw-type-btn {
    color: var(--ink) !important;
    background: #fffdf7 !important;
    border: 2px solid var(--ink) !important;
    border-radius: 10px !important;
}

body.ui-street .design-switcher-btn.active,
body.ui-street .draw-type-btn.active,
body.ui-street .draw-type-btn.active-direct {
    background: var(--tomato) !important;
    color: var(--paper) !important;
}

body.ui-street .design-switcher-btn:not(.active):hover,
body.ui-street .draw-type-btn:not(.active):hover {
    background: #ffe9cd !important;
}



body.ui-street #display-wheel {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

body.ui-street #spin-btn {
    border-radius: 999px !important;
}

body.ui-street #history-modal,
body.ui-street #history-modal .text-white,
body.ui-street #history-modal .text-slate-300,
body.ui-street #history-modal .text-slate-400,
body.ui-street #history-modal .text-slate-500,
body.ui-street #history-modal .text-slate-600,
body.ui-street #history-modal .history-item-name,
body.ui-street #history-modal .history-item-meta,
body.ui-street #history-modal #history-list,
body.ui-street #history-modal button {
    color: #000 !important;
}

body.ui-street #history-modal .bg-slate-700,
body.ui-street #history-modal .bg-slate-800 {
    background: #fffefb !important;
}


body.ui-street #result-modal #view-link,
body.ui-street #result-modal #retry-btn,
body.ui-street #result-modal #fav-btn,
body.ui-street #result-modal #copy-result-btn {
    background: #fffefb !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
}

body.ui-street #result-modal #maps-link,
body.ui-street #result-modal #refine-btn {
    background: var(--tomato) !important;
    color: var(--paper) !important;
    border-color: var(--ink) !important;
}

body.ui-street #result-modal #order-link,
body.ui-street #result-modal #recipe-link {
    background: #fff0d9 !important;
    color: var(--ink) !important;
    border-color: var(--ink) !important;
}

body.ui-street #result-modal #close-modal-btn {
    color: var(--ink) !important;
}


body.ui-street #winner-distance-info,
body.ui-street #winner-price-info,
body.ui-street #winner-distance-info *,
body.ui-street #winner-price-info * {
    color: #fff !important;
}

body.ui-street #history-modal,
body.ui-street #history-modal * {
    color: #000 !important;
}

/* ===============================
   Neon Arcade Theme
   =============================== */
:root {
    --neon-bg: #070A1A;
    --neon-pink: #FF2DAA;
    --neon-cyan: #00E5FF;
    --neon-purple: #7C3AED;
    --neon-lime: #A3FF12;
    --neon-text: #EAF2FF;
}

body.ui-neon {
    color: var(--neon-text) !important;
    background: radial-gradient(circle at 20% 15%, rgba(124, 58, 237, 0.3), transparent 35%),
        radial-gradient(circle at 78% 18%, rgba(255, 45, 170, 0.22), transparent 32%),
        radial-gradient(circle at 50% 85%, rgba(0, 229, 255, 0.16), transparent 42%),
        linear-gradient(130deg, #070A1A 0%, #0a1030 50%, #070A1A 100%);
    background-size: 130% 130%;
    animation: neonBgShift 26s ease-in-out infinite alternate;
    font-family: 'Inter', system-ui, sans-serif;
}

@keyframes neonBgShift {
    0% { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
}

body.ui-neon header {
    position: relative;
    isolation: isolate;
}

body.ui-neon header::before {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 14px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(234, 242, 255, 0.06) 0,
        rgba(234, 242, 255, 0.06) 1px,
        transparent 1px,
        transparent 4px
    );
    opacity: 0.22;
    pointer-events: none;
    z-index: -1;
}

body.ui-neon header h1 {
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.35), 0 0 18px rgba(255, 45, 170, 0.22);
}

body.ui-neon h1,
body.ui-neon h2,
body.ui-neon h3,
body.ui-neon .slot-title,
body.ui-neon #winner-name,
body.ui-neon .spin-button span,
body.ui-neon #app-mode-selector button span {
    font-family: 'Press Start 2P', 'Orbitron', 'Inter', sans-serif;
    letter-spacing: 0.02em;
}

body.ui-neon .text-white,
body.ui-neon .text-slate-300,
body.ui-neon .text-slate-400,
body.ui-neon .text-slate-500,
body.ui-neon .text-slate-600,
body.ui-neon #restaurant-count,
body.ui-neon .header-subtitle,
body.ui-neon .greeting-message,
body.ui-neon .location-label,
body.ui-neon .text-foodie-orange {
    color: var(--neon-text) !important;
}

body.ui-neon .touch-btn,
body.ui-neon #app-mode-selector button,
body.ui-neon #spin-btn,
body.ui-neon #slot-spin-btn,
body.ui-neon #carousel-spin-btn,
body.ui-neon #perso-add-btn,
body.ui-neon .salon-config-btn {
    border: 1px solid rgba(0, 229, 255, 0.95) !important;
    border-radius: 10px !important;
    background: rgba(11, 16, 43, 0.82) !important;
    color: var(--neon-text) !important;
    box-shadow:
        0 0 0 1px rgba(0, 229, 255, 0.5),
        0 0 8px rgba(0, 229, 255, 0.35),
        0 0 18px rgba(124, 58, 237, 0.3),
        inset 0 0 14px rgba(0, 0, 0, 0.35);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease !important;
}

body.ui-neon .touch-btn:hover,
body.ui-neon #app-mode-selector button:hover,
body.ui-neon #spin-btn:hover:not(:disabled),
body.ui-neon #slot-spin-btn:hover:not(:disabled),
body.ui-neon #carousel-spin-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow:
        0 0 0 1px rgba(255, 45, 170, 0.65),
        0 0 12px rgba(255, 45, 170, 0.5),
        0 0 24px rgba(0, 229, 255, 0.42),
        inset 0 0 14px rgba(124, 58, 237, 0.2);
}

body.ui-neon .touch-btn:active,
body.ui-neon #app-mode-selector button:active {
    transform: translateY(1px) scale(0.99);
}

body.ui-neon .mode-segmented,
body.ui-neon #app-mode-selector {
    background: rgba(8, 12, 33, 0.88) !important;
    border: 1px solid rgba(124, 58, 237, 0.85) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 10px rgba(124, 58, 237, 0.45), inset 0 0 12px rgba(0, 229, 255, 0.12);
}

body.ui-neon #app-mode-selector button.bg-foodie-orange,
body.ui-neon #app-mode-selector button[id="app-mode-sortie"],
body.ui-neon .draw-type-btn.active,
body.ui-neon .draw-type-btn.active-direct {
    color: #001522 !important;
    border-color: var(--neon-cyan) !important;
    background: linear-gradient(135deg, #6af5ff, #00e5ff 55%, #00b7db) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.75), 0 0 26px rgba(0, 229, 255, 0.45) !important;
}

body.ui-neon .wheel-container::before {
    content: 'HUD // SPIN ZONE';
    position: absolute;
    top: -1.2rem;
    left: 0.3rem;
    font-size: 10px;
    letter-spacing: 0.12em;
    color: rgba(163, 255, 18, 0.8);
}

body.ui-neon .wheel-container canvas {
    border: 2px solid var(--neon-cyan) !important;
    background: radial-gradient(circle at 30% 25%, rgba(124, 58, 237, 0.22), rgba(7, 10, 26, 0.95)) !important;
    box-shadow:
        0 0 0 3px rgba(255, 45, 170, 0.5),
        0 0 0 6px rgba(0, 229, 255, 0.35),
        0 0 24px rgba(0, 229, 255, 0.55),
        0 0 42px rgba(124, 58, 237, 0.45) !important;
}

body.ui-neon .wheel-pointer {
    color: var(--neon-pink);
    filter: drop-shadow(0 0 10px rgba(255, 45, 170, 0.8));
}

body.ui-neon .pointer-fold { color: var(--neon-pink); }

body.ui-neon .wheel-pointer.pointer-spark::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: var(--neon-lime);
    box-shadow: 0 0 10px var(--neon-lime), 0 0 22px rgba(163, 255, 18, 0.8);
    animation: pointerSpark 220ms ease-in-out infinite alternate;
}

@keyframes pointerSpark {
    from { opacity: 0.45; transform: translateX(-50%) scale(0.85); }
    to { opacity: 1; transform: translateX(-50%) scale(1.15); }
}

body.ui-neon #spin-btn,
body.ui-neon #slot-spin-btn,
body.ui-neon #carousel-spin-btn {
    background: linear-gradient(140deg, rgba(124, 58, 237, 0.95), rgba(255, 45, 170, 0.95)) !important;
    border-color: var(--neon-cyan) !important;
    color: var(--neon-text) !important;
}

body.ui-neon #display-wheel,
body.ui-neon #display-slot .slot-frame,
body.ui-neon #display-carousel .carousel-frame,
body.ui-neon #perso-panel > div,
body.ui-neon #br-wall-container .br-wall-of-dead,
body.ui-neon #result-card,
body.ui-neon .settings-panel,
body.ui-neon #manage-items-modal > div,
body.ui-neon #changelog-modal > div,
body.ui-neon #history-modal > div,
body.ui-neon #salon-overlay #salon-step-config,
body.ui-neon #salon-overlay #salon-step-name,
body.ui-neon #salon-overlay #salon-step-room,
body.ui-neon #salon-overlay #salon-step-join,
body.ui-neon #salon-overlay #salon-step-guest,
body.ui-neon #salon-overlay #guest-result-phase,
body.ui-neon #salon-host-vote {
    background: linear-gradient(160deg, rgba(12, 16, 42, 0.95), rgba(9, 13, 34, 0.95)) !important;
    border: 1px solid rgba(0, 229, 255, 0.8) !important;
    border-radius: 12px !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.28), 0 0 30px rgba(124, 58, 237, 0.32), inset 0 0 18px rgba(255, 45, 170, 0.08) !important;
}

body.ui-neon #salon-overlay { background: rgba(7, 10, 26, 0.97) !important; }

body.ui-neon #settings-modal .bg-slate-700,
body.ui-neon #settings-modal .bg-slate-800,
body.ui-neon #history-modal .bg-slate-700,
body.ui-neon #changelog-modal .bg-slate-700,
body.ui-neon #manage-items-modal .bg-slate-700,
body.ui-neon #salon-overlay .bg-slate-700,
body.ui-neon #salon-overlay .bg-slate-800,
body.ui-neon #salon-overlay .bg-slate-800\/70 {
    background: rgba(17, 23, 55, 0.92) !important;
    border-color: rgba(124, 58, 237, 0.6) !important;
}

body.ui-neon hr,
body.ui-neon #settings-modal .border-slate-700,
body.ui-neon #history-modal .border-slate-700,
body.ui-neon #changelog-modal .border-slate-700,
body.ui-neon #manage-items-modal .border-slate-700,
body.ui-neon #salon-overlay .border-slate-700 {
    border-color: rgba(0, 229, 255, 0.22) !important;
}

body.ui-neon :focus-visible {
    outline: 2px solid var(--neon-cyan) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.28);
}

@media (max-width: 640px) {
    body.ui-neon .wheel-container::before { font-size: 9px; top: -1rem; }
}

/* ===============================
   Bistro / Chalkboard Theme
   =============================== */
:root {
    --chalkboard: #0E1A14;
    --chalk: #F3F0E8;
    --chalk-muted: rgba(243,240,232,0.72);
    --chalk-red: #B33A3A;
    --chalk-gold: #D7B46A;
}

body.ui-chalk {
    color: var(--chalk) !important;
    background-color: var(--chalkboard) !important;
    background-image:
        radial-gradient(circle at 18% 20%, rgba(215, 180, 106, 0.09), transparent 36%),
        radial-gradient(circle at 80% 75%, rgba(179, 58, 58, 0.08), transparent 34%),
        repeating-linear-gradient(20deg, rgba(243,240,232,0.02) 0 2px, transparent 2px 8px),
        repeating-linear-gradient(-35deg, rgba(243,240,232,0.015) 0 1px, transparent 1px 9px);
    font-family: 'Inter', system-ui, sans-serif;
}

body.ui-chalk::before,
body.ui-chalk::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: 0;
    width: min(360px, 40vw);
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(243,240,232,0.28), transparent);
    opacity: 0.3;
}
body.ui-chalk::before { top: 16%; left: 8%; transform: rotate(-2deg); }
body.ui-chalk::after { bottom: 18%; right: 10%; transform: rotate(1.5deg); }

body.ui-chalk main,
body.ui-chalk header,
body.ui-chalk #settings-modal,
body.ui-chalk #result-modal,
body.ui-chalk #history-modal,
body.ui-chalk #changelog-modal,
body.ui-chalk #manage-items-modal,
body.ui-chalk #salon-overlay { position: relative; z-index: 1; }

body.ui-chalk h1,
body.ui-chalk h2,
body.ui-chalk h3,
body.ui-chalk .slot-title,
body.ui-chalk #winner-name,
body.ui-chalk #app-mode-selector button span {
    font-family: 'Amatic SC', 'Patrick Hand', 'Inter', sans-serif;
    letter-spacing: 0.03em;
}

body.ui-chalk header h1 {
    text-shadow: 0 0 1px rgba(243,240,232,0.9), 0 0 8px rgba(243,240,232,0.15);
}

body.ui-chalk .text-white,
body.ui-chalk .text-slate-300,
body.ui-chalk .text-slate-400,
body.ui-chalk .text-slate-500,
body.ui-chalk .text-slate-600,
body.ui-chalk #restaurant-count,
body.ui-chalk .text-foodie-orange { color: var(--chalk) !important; }

body.ui-chalk .mode-segmented,
body.ui-chalk #app-mode-selector {
    background: rgba(19, 31, 25, 0.8) !important;
    border: 1px solid rgba(243,240,232,0.42) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(243,240,232,0.12), 0 6px 18px rgba(0,0,0,0.3);
}

body.ui-chalk #app-mode-selector button,
body.ui-chalk .touch-btn,
body.ui-chalk #spin-btn,
body.ui-chalk #slot-spin-btn,
body.ui-chalk #carousel-spin-btn,
body.ui-chalk .salon-config-btn {
    border: 1px solid rgba(243,240,232,0.64) !important;
    background: rgba(20, 34, 28, 0.84) !important;
    color: var(--chalk) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 0 1px rgba(243,240,232,0.06), 0 2px 8px rgba(0,0,0,0.24);
    transition: transform 170ms ease, box-shadow 170ms ease, border-color 170ms ease !important;
}

body.ui-chalk #app-mode-selector button:hover,
body.ui-chalk .touch-btn:hover,
body.ui-chalk #spin-btn:hover:not(:disabled),
body.ui-chalk #slot-spin-btn:hover:not(:disabled),
body.ui-chalk #carousel-spin-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(243,240,232,0.92) !important;
    box-shadow: inset 0 0 0 1px rgba(243,240,232,0.24), 0 4px 10px rgba(0,0,0,0.28);
}

body.ui-chalk #app-mode-selector button:active,
body.ui-chalk .touch-btn:active { transform: translateY(1px); }

body.ui-chalk #app-mode-selector button.bg-foodie-orange,
body.ui-chalk #app-mode-selector button[id="app-mode-sortie"],
body.ui-chalk .draw-type-btn.active,
body.ui-chalk .draw-type-btn.active-direct {
    background: linear-gradient(145deg, #c94a4a, var(--chalk-red)) !important;
    border-color: rgba(243,240,232,0.82) !important;
    color: #fffaf2 !important;
}

body.ui-chalk .wheel-container::before {
    content: '✶ du jour';
    position: absolute;
    top: -1.1rem;
    left: 0.3rem;
    color: var(--chalk-gold);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
}

body.ui-chalk .wheel-container canvas {
    border: 4px solid rgba(243,240,232,0.9) !important;
    box-shadow: 0 0 0 2px rgba(14,26,20,0.9), 0 0 0 6px rgba(243,240,232,0.16), 0 10px 20px rgba(0,0,0,0.33) !important;
    background: radial-gradient(circle at 30% 30%, rgba(243,240,232,0.05), rgba(14,26,20,0.95)) !important;
}

body.ui-chalk .wheel-pointer,
body.ui-chalk .pointer-fold {
    color: var(--chalk);
    filter: drop-shadow(0 0 1px rgba(243,240,232,0.8));
}

body.ui-chalk #spin-btn,
body.ui-chalk #slot-spin-btn,
body.ui-chalk #carousel-spin-btn {
    background: linear-gradient(145deg, rgba(215,180,106,0.2), rgba(179,58,58,0.15), rgba(20,34,28,0.95)) !important;
}

body.ui-chalk #display-wheel,
body.ui-chalk #display-slot .slot-frame,
body.ui-chalk #display-carousel .carousel-frame,
body.ui-chalk #perso-panel > div,
body.ui-chalk #br-wall-container .br-wall-of-dead,
body.ui-chalk #result-card,
body.ui-chalk .settings-panel,
body.ui-chalk #manage-items-modal > div,
body.ui-chalk #changelog-modal > div,
body.ui-chalk #history-modal > div,
body.ui-chalk #salon-overlay #salon-step-config,
body.ui-chalk #salon-overlay #salon-step-name,
body.ui-chalk #salon-overlay #salon-step-room,
body.ui-chalk #salon-overlay #salon-step-join,
body.ui-chalk #salon-overlay #salon-step-guest,
body.ui-chalk #salon-overlay #guest-result-phase,
body.ui-chalk #salon-host-vote {
    background: linear-gradient(160deg, rgba(18,30,24,0.96), rgba(15,25,20,0.96)) !important;
    border: 1px solid rgba(243,240,232,0.42) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(243,240,232,0.05), 0 12px 28px rgba(0,0,0,0.35) !important;
}

body.ui-chalk #salon-overlay { background: rgba(14,26,20,0.98) !important; }

body.ui-chalk hr,
body.ui-chalk #settings-modal .border-slate-700,
body.ui-chalk #history-modal .border-slate-700,
body.ui-chalk #changelog-modal .border-slate-700,
body.ui-chalk #manage-items-modal .border-slate-700,
body.ui-chalk #salon-overlay .border-slate-700 {
    border-color: rgba(243,240,232,0.22) !important;
}

body.ui-chalk :focus-visible {
    outline: 2px solid var(--chalk) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 3px rgba(243,240,232,0.12);
}

@media (max-width: 640px) {
    body.ui-chalk .wheel-container::before { font-size: 0.66rem; top: -0.9rem; }
}

/* ===============================
   Food Magazine Premium Theme
   =============================== */
:root {
    --mag-paper: #FAF7F2;
    --mag-ink: #171717;
    --mag-muted: #6B6B6B;
    --mag-accent: #C65A3A;
    --mag-accent-2: #6E7B4E;
    --mag-border: rgba(23,23,23,0.14);
}

body.ui-magazine {
    color: var(--mag-ink) !important;
    background: var(--mag-paper) !important;
    font-family: 'Inter', 'Source Sans 3', system-ui, sans-serif;
}

body.ui-magazine main,
body.ui-magazine header {
    width: 100%;
    max-width: 1040px;
}

body.ui-magazine h1,
body.ui-magazine h2,
body.ui-magazine h3,
body.ui-magazine .slot-title,
body.ui-magazine #winner-name,
body.ui-magazine #app-mode-selector button span {
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    letter-spacing: 0.01em;
}

body.ui-magazine header h1 {
    font-weight: 700;
    line-height: 1.12;
}

body.ui-magazine .header-subtitle,
body.ui-magazine .location-label,
body.ui-magazine .greeting-message,
body.ui-magazine .text-slate-500,
body.ui-magazine .text-slate-600,
body.ui-magazine .text-slate-400,
body.ui-magazine #restaurant-count {
    color: var(--mag-muted) !important;
}

body.ui-magazine .text-white,
body.ui-magazine .text-slate-300,
body.ui-magazine .text-foodie-orange {
    color: var(--mag-ink) !important;
}

body.ui-magazine .mode-segmented,
body.ui-magazine #app-mode-selector {
    border: 1px solid var(--mag-border) !important;
    border-radius: 12px !important;
    background: rgba(250,247,242,0.94) !important;
    box-shadow: none !important;
    padding: 8px !important;
}

body.ui-magazine #app-mode-selector button,
body.ui-magazine .touch-btn,
body.ui-magazine #spin-btn,
body.ui-magazine #slot-spin-btn,
body.ui-magazine #carousel-spin-btn,
body.ui-magazine #perso-add-btn,
body.ui-magazine .salon-config-btn {
    border: 1px solid var(--mag-border) !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.72) !important;
    color: var(--mag-ink) !important;
    box-shadow: none !important;
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease !important;
}

body.ui-magazine #app-mode-selector button:hover,
body.ui-magazine .touch-btn:hover,
body.ui-magazine #spin-btn:hover:not(:disabled),
body.ui-magazine #slot-spin-btn:hover:not(:disabled),
body.ui-magazine #carousel-spin-btn:hover:not(:disabled) {
    background: rgba(198, 90, 58, 0.08) !important;
    border-color: rgba(198, 90, 58, 0.45) !important;
    transform: translateY(-1px);
}

body.ui-magazine #app-mode-selector button:active,
body.ui-magazine .touch-btn:active {
    transform: translateY(1px);
}

body.ui-magazine #app-mode-selector button {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.45rem !important;
}

body.ui-magazine #app-mode-selector button.bg-foodie-orange,
body.ui-magazine #app-mode-selector button[id="app-mode-sortie"],
body.ui-magazine .draw-type-btn.active,
body.ui-magazine .draw-type-btn.active-direct {
    color: var(--mag-accent) !important;
    border-bottom: 2px solid var(--mag-accent) !important;
    background: transparent !important;
}

body.ui-magazine #display-wheel,
body.ui-magazine #display-slot .slot-frame,
body.ui-magazine #display-carousel .carousel-frame,
body.ui-magazine #perso-panel > div,
body.ui-magazine #br-wall-container .br-wall-of-dead,
body.ui-magazine #result-card,
body.ui-magazine .settings-panel,
body.ui-magazine #manage-items-modal > div,
body.ui-magazine #changelog-modal > div,
body.ui-magazine #history-modal > div,
body.ui-magazine #salon-overlay #salon-step-config,
body.ui-magazine #salon-overlay #salon-step-name,
body.ui-magazine #salon-overlay #salon-step-room,
body.ui-magazine #salon-overlay #salon-step-join,
body.ui-magazine #salon-overlay #salon-step-guest,
body.ui-magazine #salon-overlay #guest-result-phase,
body.ui-magazine #salon-host-vote {
    background: #fffdfa !important;
    border: 1px solid var(--mag-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 24px rgba(23, 23, 23, 0.06) !important;
}

body.ui-magazine #salon-overlay {
    background: rgba(250, 247, 242, 0.98) !important;
}

body.ui-magazine #settings-modal .bg-slate-700,
body.ui-magazine #settings-modal .bg-slate-800,
body.ui-magazine #history-modal .bg-slate-700,
body.ui-magazine #changelog-modal .bg-slate-700,
body.ui-magazine #manage-items-modal .bg-slate-700,
body.ui-magazine #salon-overlay .bg-slate-700,
body.ui-magazine #salon-overlay .bg-slate-800,
body.ui-magazine #salon-overlay .bg-slate-800\/70 {
    background: #ffffff !important;
    border-color: var(--mag-border) !important;
}

body.ui-magazine hr,
body.ui-magazine #settings-modal .border-slate-700,
body.ui-magazine #history-modal .border-slate-700,
body.ui-magazine #changelog-modal .border-slate-700,
body.ui-magazine #manage-items-modal .border-slate-700,
body.ui-magazine #salon-overlay .border-slate-700 {
    border-color: var(--mag-border) !important;
}

body.ui-magazine .wheel-container::before {
    content: 'ÉDITION';
    position: absolute;
    top: -1.2rem;
    left: 0.3rem;
    font-size: 0.65rem;
    letter-spacing: 0.16em;
    color: var(--mag-accent-2);
}

body.ui-magazine .wheel-container canvas {
    border: 1px solid rgba(23,23,23,0.35) !important;
    box-shadow: 0 4px 16px rgba(23,23,23,0.08) !important;
    background: #f5f1eb !important;
}

body.ui-magazine .wheel-pointer,
body.ui-magazine .pointer-fold {
    color: var(--mag-ink);
    filter: none;
}

body.ui-magazine #spin-btn,
body.ui-magazine #slot-spin-btn,
body.ui-magazine #carousel-spin-btn {
    background: #fffdfa !important;
    border-color: rgba(23,23,23,0.2) !important;
}

body.ui-magazine :focus-visible {
    outline: 2px solid #171717 !important;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    body.ui-magazine .wheel-container::before { top: -1rem; font-size: 0.6rem; }
    body.ui-magazine main,
    body.ui-magazine header { max-width: 100%; }
}