:root {
            --bg-dark: #0f1923;
            --bg-panel: #1a242d;
            --bg-input: #0b1219;
            --primary: #ff0055; /* Crash Red */
            --accent: #00ff88;  /* Success Green */
            --gold: #ffd700;    /* Deposit Gold */
            --secondary: #2c3e50;
            --text-main: #ffffff;
            --text-dim: #8b9bb4;
            --neon-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
            --font-main: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

        /* THEME OVERRIDES */
        body.theme-day { --bg-dark: #f0f2f5; --bg-panel: #ffffff; --bg-input: #e4e6eb; --text-main: #050505; --text-dim: #65676b; --secondary: #bcc0c4; --accent: #00c853; }
        body.theme-yellow { --primary: #ff0055; --accent: #ffea00; --neon-shadow: 0 0 10px rgba(255, 234, 0, 0.5); }
        body.theme-green { --bg-dark: #0a1a0a; --bg-panel: #112211; --accent: #00ff00; --primary: #ff3333; }
        body.theme-hacker { --bg-dark: #000000; --bg-panel: #0f0f0f; --accent: #0f0; --text-main: #0f0; --font-main: 'Courier New', monospace; --primary: #f00; }
        body.theme-water { --bg-dark: #001e3c; --bg-panel: #0a2e52; --accent: #00bfff; }
        body.theme-desert { --bg-dark: #2b1d0e; --bg-panel: #3d2b1f; --accent: #ffaa00; --primary: #ff4400; }
        body.theme-winter { --bg-dark: #1a2530; --bg-panel: #2c3e50; --accent: #a8d0e6; }
        body.theme-red { --accent: #ff0055; --primary: #ffffff; }
        body.theme-ocean { --bg-dark: #03263f; --bg-panel: #0a3354; --bg-input: #0e3b60; --secondary: #0e3b60; --accent: #22d3ee; --primary: #ffd400; }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            user-select: none;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-main);
            font-family: var(--font-main);
            overflow: hidden; /* Prevent scroll on mobile game feel */
            height: 100vh;
            height: 100dvh;   /* iOS Safari:减掉工具栏,防 BET 钮被挤到屏外 */
            width: 100vw;
            display: flex;
            flex-direction: column;
            transition: background-color 0.3s, color 0.3s;
        }

        /* * =========================================
         * SPLASH SCREEN
         * =========================================
         */
        .splash-screen {
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: #0f1923;
            z-index: 9999;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s ease;
        }
        .splash-logo {
            font-size: 3rem;
            font-weight: 900;
            background: linear-gradient(45deg, #ff0055, #ffcc00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 20px;
            animation: pulse 2s infinite;
        }
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(255,255,255,0.1);
            border-radius: 50%;
            border-top: 5px solid var(--accent);
            animation: spin 1s linear infinite;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } }

        /* * =========================================
         * LAYOUT STRUCTURE
         * =========================================
         */
        .app-container {
            display: grid;
            grid-template-rows: 60px 1fr auto; /* Header, Game, Controls */
            grid-template-columns: 1fr 300px; /* Game, Sidebar */
            height: 100%;
            width: 100%;
        }

        /* Header */
        .top-bar {
            grid-column: 1 / -1;
            background: var(--bg-panel);
            border-bottom: 1px solid rgba(255,255,255,0.1);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 10px;
            z-index: 10;
        }

        .logo {
            font-size: 1.2rem;
            font-weight: 800;
            background: linear-gradient(45deg, #ff0055, #ffcc00);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .header-controls {
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .icon-btn {
            background: var(--bg-input);
            border: 1px solid rgba(255,255,255,0.1);
            color: var(--text-dim);
            width: 36px;
            height: 36px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            transition: 0.2s;
        }
        .icon-btn:hover { background: var(--bg-panel); color: var(--text-main); }

        .balance-container {
            background: var(--bg-input);
            padding: 5px 12px;
            border-radius: 20px;
            border: 1px solid rgba(255,255,255,0.1);
            font-weight: bold;
            color: var(--accent);
            display: flex;
            gap: 5px;
            align-items: center;
            font-size: 0.9rem;
        }

        .btn-deposit {
            background: var(--gold);
            color: #000;
            border: none;
            border-radius: 50%;
            width: 28px;
            height: 28px;
            font-weight: bold;
            font-size: 1.2rem;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
            transition: transform 0.2s;
        }
        .btn-deposit:hover { transform: scale(1.1); }

        /* Main Game Area (Canvas) */
        .game-area {
            grid-column: 1 / 2;
            grid-row: 2 / 3;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

        .history-bar {
            height: 40px;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 10px;
            overflow-x: auto;
            background: rgba(0,0,0,0.2);
            scrollbar-width: none; /* Firefox */
            z-index: 5;
        }
        .history-bar::-webkit-scrollbar { display: none; }

        .history-pill {
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 0.8rem;
            font-weight: bold;
            color: #fff;
            min-width: 50px;
            text-align: center;
        }
        .pill-low { background: #34495e; color: #bdc3c7; } /* < 2x */
        .pill-med { background: rgba(0, 255, 136, 0.2); color: #00ff88; } /* 2x - 10x */
        .pill-high { background: rgba(255, 204, 0, 0.2); color: #ffcc00; box-shadow: 0 0 5px #ffcc00; } /* > 10x */

        #crashCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }

        .game-status-msg {
            position: absolute;
            top: 30%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.7);
            padding: 10px 20px;
            border-radius: 8px;
            color: #fff;
            font-weight: bold;
            display: none;
            pointer-events: none;
            z-index: 15;
        }

        /* CRASH OVERLAY STYLES */
        .crash-overlay {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 20;
            display: none; /* Hidden by default */
            pointer-events: none;
        }
        .crash-text {
            font-size: 4rem;
            font-weight: 900;
            color: var(--primary);
            text-transform: uppercase;
            text-shadow: 0 0 30px rgba(255, 0, 85, 0.6);
            letter-spacing: 2px;
            animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        .crash-value {
            font-size: 2.5rem;
            color: #fff;
            margin-top: 5px;
            font-weight: bold;
            text-shadow: 0 2px 5px rgba(0,0,0,0.5);
            animation: fadeIn 0.5s ease;
        }

        /* Sidebar (Bets & Chat) */
        .sidebar {
            grid-column: 2 / 3;
            grid-row: 2 / 4; /* Span down to bottom */
            background: var(--bg-panel);
            border-left: 1px solid rgba(255,255,255,0.1);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        .tabs {
            display: flex;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }
        .tab {
            flex: 1;
            padding: 15px;
            text-align: center;
            cursor: pointer;
            color: var(--text-dim);
            font-size: 0.9rem;
            font-weight: 600;
        }
        .tab.active {
            color: var(--text-main);
            border-bottom: 2px solid var(--accent);
            background: rgba(255,255,255,0.02);
        }

        .tab-content {
            flex: 1;
            overflow-y: auto;
            display: none;
        }
        .tab-content.active { display: block; }

        .bets-list { padding: 10px; }
        .bet-row {
            display: flex;
            justify-content: space-between;
            padding: 8px;
            font-size: 0.85rem;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            animation: fadeIn 0.3s ease;
        }
        .bet-user { color: var(--text-dim); max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .bet-amt { color: var(--text-main); }
        .bet-mult { width: 50px; text-align: right; }
        .bet-win { color: var(--accent); }
        .bet-loss { color: var(--primary); }

        /* Chat Styles */
        .chat-container {
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .chat-messages {
            flex: 1;
            overflow-y: auto;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            scroll-behavior: smooth;
        }
        .chat-msg {
            font-size: 0.85rem;
            word-wrap: break-word;
            animation: fadeIn 0.2s;
            line-height: 1.4;
        }
        .chat-user {
            font-weight: bold;
            color: var(--text-dim);
            margin-right: 5px;
        }
        .chat-text { color: var(--text-main); }
        /* Rich/Special Styles */
        .chat-msg.rich .chat-user { color: #ffea00; text-shadow: 0 0 5px rgba(255,234,0,0.5); }
        .chat-msg.rich .chat-text { color: #fffbe6; }
        .chat-msg.poor .chat-text { color: #a0a0a0; font-style: italic; }
        .chat-msg.rude .chat-text { color: #ff9999; }
        .chat-msg.crazy .chat-text { color: #00ff88; font-weight: bold; text-transform: uppercase; }
        
        .chat-input-area {
            padding: 10px;
            border-top: 1px solid rgba(255,255,255,0.1);
            display: flex;
            gap: 5px;
        }
        .chat-input {
            flex: 1;
            background: var(--bg-input);
            border: 1px solid var(--secondary);
            color: var(--text-main);
            padding: 8px;
            border-radius: 4px;
            outline: none;
        }

        /* Bottom Controls Area */
        .controls-area {
            grid-column: 1 / 2;
            grid-row: 3 / 4;
            background: var(--bg-panel);
            padding: 15px;
            display: flex;
            gap: 15px;
            border-top: 1px solid rgba(255,255,255,0.1);
        }

        /* Betting Panel (Component) */
        .bet-control-panel {
            flex: 1;
            background: var(--bg-input);
            border-radius: 8px;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            border: 1px solid rgba(255,255,255,0.05);
            position: relative;
        }
        
        /* Tab indicator for panel */
        .panel-badge {
            position: absolute;
            top: -10px;
            left: 10px;
            background: #2c3e50;
            font-size: 0.7rem;
            padding: 2px 8px;
            border-radius: 4px;
            color: #bdc3c7;
        }

        .input-group {
            display: flex;
            gap: 10px;
        }
        .input-wrapper {
            flex: 1;
            position: relative;
        }
        .input-label {
            position: absolute;
            top: 5px;
            left: 10px;
            font-size: 0.6rem;
            color: var(--text-dim);
        }
        .game-input {
            width: 100%;
            background: #060a0e;
            border: 1px solid #2c3e50;
            color: white;
            padding: 18px 10px 6px 10px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 1rem;
            outline: none;
        }
        .game-input:focus { border-color: var(--accent); }

        .action-btn {
            width: 100%;
            height: 50px;
            border: none;
            border-radius: 6px;
            font-size: 1.1rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            text-transform: uppercase;
            box-shadow: 0 4px 6px rgba(0,0,0,0.2);
        }

        .btn-bet { background: var(--accent); color: #000; }
        .btn-bet:hover { background: #00e676; box-shadow: 0 0 15px rgba(0,255,136,0.4); }
        
        .btn-cashout { background: #ffcc00; color: #000; border: 2px solid #ffcc00; }
        .btn-cashout:hover { background: #ffdb4d; box-shadow: 0 0 15px rgba(255,204,0,0.4); }

        .btn-cancel { background: var(--primary); color: white; }

        .btn-disabled { background: #34495e; color: #7f8c8d; cursor: not-allowed; pointer-events: none; }

        .toggles { display: flex; justify-content: space-between; padding: 0 5px; }
        .toggle-wrap { display: flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--text-dim); cursor: pointer; }
        
        /* Custom Checkbox */
        .toggle-switch { width: 30px; height: 16px; background: #34495e; border-radius: 10px; position: relative; transition: 0.3s; }
        .toggle-switch::after { content: ''; position: absolute; left: 2px; top: 2px; width: 12px; height: 12px; background: white; border-radius: 50%; transition: 0.3s; }
        input[type="checkbox"]:checked + .toggle-switch { background: var(--accent); }
        input[type="checkbox"]:checked + .toggle-switch::after { transform: translateX(14px); }
        input[type="checkbox"] { display: none; }

        /* Modal System */
        .modal {
            display: none;
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background: rgba(0,0,0,0.8);
            z-index: 100;
            align-items: center;
            justify-content: center;
        }
        .modal-content {
            background: var(--bg-panel);
            padding: 20px;
            border-radius: 10px;
            width: 350px;
            max-height: 80vh;
            overflow-y: auto;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
            position: relative;
            color: var(--text-main);
        }
        .modal-close {
            position: absolute;
            top: 10px; right: 15px;
            cursor: pointer;
            font-size: 1.5rem;
            color: var(--text-dim);
        }

        /* Settings Grid (Themes/Skins) */
        .settings-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 15px;
        }
        .grid-item {
            background: var(--bg-input);
            padding: 10px;
            border-radius: 8px;
            cursor: pointer;
            border: 1px solid transparent;
            transition: 0.2s;
        }
        .grid-item:hover { border-color: var(--accent); }
        .grid-item.active { border-color: var(--accent); background: rgba(0,255,136,0.1); }
        .item-icon { font-size: 2rem; display: block; margin-bottom: 5px; }
        .item-name { font-size: 0.9rem; font-weight: bold; color: var(--text-main); }
        .locked { opacity: 0.5; position: relative; }
        .locked::after { content: '🔒'; position: absolute; top: 5px; right: 5px; }

        /* Stats Table */
        .stats-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
        
        /* Ad specific */
        .ad-placeholder {
            width: 100%;
            height: 200px;
            background: #fff;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 15px 0;
            font-weight: bold;
            border: 2px dashed #999;
        }
        .timer-circle {
            width: 60px; height: 60px;
            border-radius: 50%;
            border: 4px solid var(--accent);
            display: flex; align-items: center; justify-content: center;
            font-size: 1.5rem; font-weight: bold;
            margin: 0 auto; color: var(--accent);
        }

        /* Success Modal Styles */
        .success-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.85); z-index: 200; align-items: center; justify-content: center; animation: fadeIn 0.3s; }
        .success-content { background: linear-gradient(135deg, #1a242d, #0f1923); border: 2px solid var(--accent); padding: 40px 30px; border-radius: 20px; text-align: center; box-shadow: 0 0 30px rgba(0, 255, 136, 0.4); position: relative; max-width: 90%; width: 320px; transform: scale(0.9); animation: popIn 0.3s forwards cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .success-icon { font-size: 4rem; margin-bottom: 20px; display: block; animation: bounce 1s infinite; }
        .success-title { color: var(--accent); font-size: 1.8rem; margin-bottom: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
        .success-msg { color: #fff; margin-bottom: 20px; }
        .btn-awesome { background: var(--accent); color: #0f1923; border: none; padding: 15px 40px; border-radius: 30px; font-weight: 800; cursor: pointer; font-size: 1.1rem; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0, 255, 136, 0.4); }

        /* * =========================================
         * RESPONSIVE DESIGN
         * =========================================
         */
        @media (max-width: 768px) {
            .app-container { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }
            .sidebar { display: none; position: fixed; top: 60px; right: 0; width: 80%; height: calc(100% - 60px); z-index: 50; }
            .sidebar.active { display: flex; }
            .game-area { flex: 1; min-height: 220px; }
            .controls-area { flex-direction: column; max-height: 46vh; overflow-y: auto; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
            .mobile-menu-btn { display: block; }
        }
        /* ☰ 现在是设置菜单(声音/皮肤/主题/统计),桌面端也要能点 */
        .mobile-menu-btn { display: block; }

        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes popIn { to { transform: scale(1); } }
        @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
        @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } }
        .shake { animation: shake 0.5s; }

        /* ===== 崩盘随机死亡特效(鱼雷/鲨鱼/触手)===== */
        #deathFx { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:18; }
        #deathFx img { position:absolute; filter:drop-shadow(0 6px 16px rgba(0,0,0,.55)); }
        /* 鱼雷:从右上冲进中心 */
        .d-torpedo { width:44%; left:28%; top:24%; transform:translate(170%,-190%) scale(.8); animation:torpIn .5s cubic-bezier(.5,0,.9,.5) forwards; transition:opacity .12s; }
        @keyframes torpIn { to { transform:translate(0,0) scale(1); } }
        .d-boom { position:absolute; left:50%; top:42%; width:150%; padding-bottom:150%; transform:translate(-50%,-50%) scale(0); border-radius:50%; z-index:19;
            background:radial-gradient(circle,#fff 0%,#ffe08a 14%,#ff9d3c 30%,#ff4d3c 46%,rgba(255,60,40,.35) 60%,transparent 74%); animation:boomPop .55s ease-out forwards; mix-blend-mode:screen; }
        @keyframes boomPop { 0%{transform:translate(-50%,-50%) scale(0);opacity:.2} 35%{transform:translate(-50%,-50%) scale(1);opacity:1} 100%{transform:translate(-50%,-50%) scale(1.5);opacity:0} }
        .d-ring { position:absolute; left:50%; top:42%; width:20%; padding-bottom:20%; transform:translate(-50%,-50%); border:4px solid #ffd27a; border-radius:50%; z-index:19; animation:ringExpand .5s ease-out forwards; opacity:.9; }
        @keyframes ringExpand { to { width:130%; padding-bottom:130%; opacity:0; border-width:1px; } }
        /* 鲨鱼:从右侧扑向中心(素材朝左)→ 咬合抖 → 淡出 */
        .d-shark { width:66%; left:20%; top:20%; transform-origin:35% 55%; transform:translate(155%,12%) scale(.55); animation:sharkLunge 1.15s cubic-bezier(.4,0,.5,1) forwards; }
        @keyframes sharkLunge { 0%{transform:translate(155%,12%) scale(.55);opacity:.85} 40%{transform:translate(6%,0) scale(1.16);opacity:1} 48%{transform:translate(-2%,1%) scale(1.05) rotate(-3deg)} 56%{transform:translate(2%,-1%) scale(1.14) rotate(2deg)} 64%{transform:translate(0,0) scale(1.1) rotate(0)} 100%{transform:translate(-14%,-6%) scale(1.02);opacity:0} }
        /* 触手:从下方升起缠住 → 往深渊拖下 + 淡出 */
        .d-leviathan { width:130%; left:-160%; top:30%; transform:scaleX(-1) rotate(4deg); filter:brightness(.5) saturate(.75) drop-shadow(0 0 26px rgba(6,20,34,.9)); animation:leviSweep 1.35s cubic-bezier(.45,0,.35,1) forwards; }
        @keyframes leviSweep { 0%{ left:-160%; top:34%; } 45%{ left:-12%; top:29%; } 100%{ left:130%; top:22%; } }
        .d-tentacles { width:96%; left:50%; bottom:0; transform-origin:50% 100%; transform:translate(-50%,106%); animation:tentGrab 1.5s cubic-bezier(.3,.7,.3,1) forwards; }
        @keyframes tentGrab { 0%{transform:translate(-50%,106%) scale(1)} 32%{transform:translate(-50%,6%) scale(1.02)} 40%{transform:translate(-50%,2%) scale(1.05)} 52%{transform:translate(-50%,6%) scale(1.03)} 100%{transform:translate(-50%,88%) scale(.9);opacity:0} }