/* css/gmes.css - GmeHub Pro Styles */

/* 棋盤類 (井字棋、五子棋) */
.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: var(--bg-input); padding: 8px; border-radius: 16px; margin: 8px auto; width: min(92vw, 320px); max-width: 320px; min-height: 240px; flex: 0 0 auto; }
.cell { background: var(--bg-card); aspect-ratio: 1; min-height: 72px; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 26px; font-weight: 800; cursor: pointer; position: relative; }
.cell.X { color: var(--primary); } .cell.O { color: var(--secondary); }
.board { max-width: 320px; }
#ttt-tray { width: 100%; max-width: 360px; margin: 0 auto 8px; }
.ttt-rule { font-size: 12px; line-height: 1.45; color: var(--text-muted, #9ab); margin-bottom: 8px; text-align: left; }
.ttt-picks { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ttt-pick { min-width: 64px; min-height: 48px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: #eee; font-weight: 800; cursor: pointer; }
.ttt-pick b { display: block; font-size: 12px; font-weight: 700; opacity: .8; }
.ttt-pick.on { border-color: #00ff9d; color: #00ff9d; }
.ttt-piece { position: relative; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 900; color: #041018; box-shadow: inset 0 -6px 10px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.25); }
.ttt-piece.X { background: radial-gradient(circle at 35% 30%, #e8fbff, #3ecbff 55%, #1478c9); }
.ttt-piece.O { background: radial-gradient(circle at 35% 30%, #ffe8e8, #ff6b6b 55%, #c62828); }
.ttt-piece.s1 { width: 46%; height: 46%; font-size: 14px; }
.ttt-piece.s2 { width: 66%; height: 66%; font-size: 18px; }
.ttt-piece.s3 { width: 84%; height: 84%; font-size: 22px; }
.ttt-buried { position: absolute; right: -2px; bottom: -2px; min-width: 14px; height: 14px; border-radius: 99px; background: #111; color: #fff; font-size: 10px; font-style: normal; display: flex; align-items: center; justify-content: center; }

.board-gomoku { display: grid; grid-template-columns: repeat(15, 1fr); gap: 1px; background: #666; padding: 4px; border: 2px solid #555; border-radius: 8px; margin: 12px auto; width: 100%; max-width: 400px; aspect-ratio: 1; }
.cell-gomoku { background: var(--bg-card, #f0f0f0); cursor: pointer; position: relative; display: flex; justify-content: center; align-items: center; }
.cell-gomoku::after { content: ""; display: block; width: 85%; height: 85%; border-radius: 50%; opacity: 0; transition: opacity 0.2s; }
.cell-gomoku.X::after { background: var(--primary); opacity: 1; box-shadow: 0 0 5px var(--primary); }
.cell-gomoku.O::after { background: var(--secondary); opacity: 1; box-shadow: 0 0 5px var(--secondary); }

.optimistic-mask { opacity: 0.5; pointer-events: none; }
.win-highlight { animation: blinkGlow 1s infinite alternate; z-index: 10; border-radius: 50%; }
.last-move-highlight { box-shadow: inset 0 0 8px #fff; border-radius: 50%; }
.crosshair-preview { background-color: rgba(0, 240, 255, 0.25); border: 1px dashed var(--primary); box-sizing: border-box; animation: breathe 1.5s infinite; }
.glass-opportunity { border: 2px solid #00ff00; box-shadow: inset 0 0 10px #00ff00; border-radius: 4px; animation: breathe 1s infinite; z-index: 5;}
.glass-danger { border: 2px solid #ff3b30; box-shadow: inset 0 0 15px #ff3b30; border-radius: 4px; animation: flash 0.5s infinite; z-index: 5;}

/* 道具與幸運按鈕 */
.loadout-slot { flex: 1; aspect-ratio: 1; background: var(--bg-input); border: 2px dashed var(--border-color); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 24px; transition: 0.2s; }
.loadout-slot:hover { border-color: var(--primary); }

.lucky-btn { width: 60px; height: 60px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--primary); font-size: 20px; font-weight: bold; cursor: pointer; transition: 0.2s; color: var(--text-main); }
.lucky-btn.pressed { background: var(--bg-input); border-color: var(--text-muted); color: var(--text-muted); pointer-events: none; }
.lucky-btn:hover { background: var(--primary); color: #000; }
.explode { animation: explodeShake 0.5s; background: #ff3b30 !important; color: #fff !important; border-color: #fff !important; box-shadow: 0 0 20px #ff3b30; }

/* 🧨 炸彈人大逃殺專屬 */
#bm-lobby { background: radial-gradient(circle at top left, #2b003a, #0f0c1b); min-height: 100vh; display: none; padding: 60px 20px 20px 20px; box-sizing: border-box; }
#bm-lobby.active-view { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; justify-items: center; }
#clink-lobby { background: radial-gradient(circle at top left, #3a0024, #12081b); min-height: 100vh; display: none; padding: 60px 20px 20px 20px; box-sizing: border-box; }
#clink-lobby.active-view { display: grid !important; grid-template-columns: 1fr 1fr; gap: 20px; align-items: center; justify-items: center; }
#clink-lobby .fluid-card { border-color: #ff6b9d; box-shadow: 0 0 20px rgba(255, 107, 157, 0.28); }
#clink-lobby .fluid-card:hover { box-shadow: 0 0 40px rgba(255, 107, 157, 0.55); }
.fluid-card { background: rgba(20, 17, 36, 0.8); backdrop-filter: blur(10px); padding: 30px; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; border: 2px solid var(--bm-neon); box-shadow: 0 0 20px rgba(57, 255, 20, 0.3); animation: morph 8s ease-in-out infinite; color: #fff; text-align: center; cursor: pointer; transition: 0.3s; }
.fluid-card:hover { transform: scale(1.05); box-shadow: 0 0 40px rgba(57, 255, 20, 0.6); }

#bm-gme-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 10000; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#bm-canvas { background: #0a0812; box-shadow: 0 0 40px #ff00aa, inset 0 0 20px #00f0ff; border: 2px solid #ff00aa; border-radius: 8px; max-width: 100vw; max-height: 100vh; width: 100%; height: auto; aspect-ratio: 30 / 20; object-fit: contain; flex-shrink: 1; }
#bm-dpad { position: fixed; bottom: 20px; left: 20px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; border: 2px solid var(--primary); z-index: 10002; }
#bm-btn-bomb { position: fixed; bottom: 30px; right: 30px; width: 100px; height: 100px; background: rgba(255,0,170,0.3); border-radius: 50%; border: 4px solid var(--secondary); display: flex; justify-content: center; align-items: center; font-size: 40px; font-weight: bold; color: #fff; cursor: pointer; z-index: 10002; }
#bm-gme-container::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06)); background-size: 100% 2px, 3px 100%; z-index: 10001; pointer-events: none; box-shadow: inset 0 0 100px rgba(0,0,0,0.9); }

/* 🐍 貪吃蛇大亂鬥專屬 */
#snake-gme-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; z-index: 10000; display: flex; justify-content: center; align-items: center; overflow: hidden; }
#snake-canvas { background: #061208; box-shadow: 0 0 40px var(--bm-neon), inset 0 0 20px #008000; border: 2px solid var(--bm-neon); border-radius: 8px; max-width: 100vw; max-height: 100vh; width: 100%; height: auto; aspect-ratio: 40 / 30; object-fit: contain; flex-shrink: 1; }
#snake-dpad { position: fixed; bottom: 20px; left: 20px; width: 150px; height: 150px; background: rgba(255,255,255,0.1); border-radius: 50%; border: 2px solid var(--bm-neon); z-index: 10002; }
#snake-btn-boost { position: fixed; bottom: 30px; right: 30px; width: 100px; height: 100px; background: rgba(57, 255, 20, 0.3); border-radius: 50%; border: 4px solid var(--bm-neon); display: flex; justify-content: center; align-items: center; font-size: 40px; font-weight: bold; color: #fff; cursor: pointer; z-index: 10002; }
#snake-gme-container::after { content: " "; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(0, 255, 0, 0.05), rgba(0, 200, 0, 0.02), rgba(0, 150, 0, 0.05)); background-size: 100% 2px, 3px 100%; z-index: 10001; pointer-events: none; box-shadow: inset 0 0 100px rgba(0,0,0,0.9); }

/* 💀 惡魔輪盤 (Buckshot Roulette) 專屬 */
#br-lobby { background: radial-gradient(circle at center, #2e0808, #0f0000); min-height: 100vh; display: none; padding: 60px 20px 20px 20px; box-sizing: border-box; }
#br-lobby.active-view { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 20px; }
#br-lobby h1 { color: #ff3b30; text-shadow: 0 0 8px rgba(255,59,48,0.55), 0 0 24px rgba(138,3,3,0.45); animation: brTitleGlow 3.2s ease-in-out infinite; letter-spacing: 0.08em; }
.br-card { background: rgba(20, 5, 5, 0.85); backdrop-filter: blur(8px); padding: 25px; border-radius: 12px; border: 2px solid var(--br-blood); box-shadow: 0 0 15px rgba(138, 3, 3, 0.5); color: #fff; text-align: center; cursor: pointer; transition: 0.2s; width: 100%; max-width: 300px; position: relative; overflow: hidden; }
.br-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(138,3,3,0.18) 48%, transparent 56%), radial-gradient(ellipse at 20% 0%, rgba(255,59,48,0.12), transparent 55%); opacity: 0.55; animation: brVeinPulse 4s ease-in-out infinite; }
.br-card:hover { transform: translateY(-5px); box-shadow: 0 0 25px rgba(255, 0, 0, 0.8); border-color: #ff3b30; }
.br-card:hover::before { opacity: 0.9; }
#br-gme-container { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: radial-gradient(circle at center, #1f1a1a, #000000); z-index: 10000; display: none; overflow: hidden; isolation: isolate; }
#br-gme-container.active-view { display: block !important; }
.br-table { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px; border-radius: 50%; background: var(--br-rust); border: 5px solid #2a1515; box-shadow: inset 0 0 50px #000, 0 0 30px rgba(0,0,0,0.8); }
/* breathe used to animate box-shadow forever; that repaints the filtered shotgun every frame */
.br-table.br-table-breathe { animation: none; }
.br-table.br-table-pulse { animation: brTablePulse 0.16s ease-out both; }

.br-shotgun { position: absolute; top: 50%; left: 50%; width: 50px; height: 200px; transform-origin: center 150px; margin-top: -150px; margin-left: -25px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 200"><rect x="16" y="5" width="8" height="90" fill="%23444" rx="2"/><rect x="26" y="5" width="8" height="90" fill="%23444" rx="2"/><rect x="18" y="5" width="2" height="90" fill="%23222"/><rect x="28" y="5" width="2" height="90" fill="%23222"/><rect x="14" y="30" width="22" height="40" fill="%231a1a1a" rx="3"/><line x1="14" y1="35" x2="36" y2="35" stroke="%23000" stroke-width="2"/><line x1="14" y1="45" x2="36" y2="45" stroke="%23000" stroke-width="2"/><line x1="14" y1="55" x2="36" y2="55" stroke="%23000" stroke-width="2"/><line x1="14" y1="65" x2="36" y2="65" stroke="%23000" stroke-width="2"/><path d="M12 95 L38 95 L40 140 L10 140 Z" fill="%232a2a2a"/><rect x="28" y="105" width="6" height="20" fill="%23000" rx="1"/><rect x="20" y="135" width="10" height="15" fill="%23111" rx="2"/><path d="M14 140 L36 140 L42 195 L8 195 Z" fill="%235c3a21"/><rect x="8" y="195" width="34" height="5" fill="%23111" rx="1"/><path d="M16 145 Q 20 170 12 190" stroke="%233b2210" stroke-width="1.5" fill="none"/><path d="M34 145 Q 30 170 38 190" stroke="%233b2210" stroke-width="1.5" fill="none"/></svg>') no-repeat center center; background-size: contain; filter: drop-shadow(0 20px 30px rgba(0,0,0,0.95)) drop-shadow(0 5px 5px rgba(0,0,0,0.5)); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 10; transform-style: preserve-3d; }
.br-shotgun::after { content: ""; position: absolute; top: 0; left: 16px; width: 18px; height: 90px; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%); opacity: 0.3; border-radius: 2px; }
.br-shotgun::before { display: none; }

.br-muzzle-flash-core { position: absolute; bottom: 100%; left: 50%; width: 15px; height: 120px; background: #fff; box-shadow: 0 0 20px #fff, 0 0 40px #ffcc00, 0 0 60px #ff3b30; border-radius: 50% 50% 10% 10%; transform-origin: bottom center; transform: translateX(-50%) scaleY(0); animation: flashJet 0.15s cubic-bezier(0.1, 1, 0.3, 1) forwards; z-index: 100; pointer-events: none; }
.br-muzzle-flash-core.blank { background: #e8fbff; box-shadow: 0 0 18px #fff, 0 0 36px #7ad7ff, 0 0 54px #00f0ff; }
.br-muzzle-flash-side.blank { background: #aef0ff; box-shadow: 0 0 14px #00f0ff; }
.br-muzzle-flash-side { position: absolute; bottom: 95%; left: 50%; width: 8px; height: 60px; background: #ffcc00; box-shadow: 0 0 15px #ff3b30; border-radius: 50%; transform-origin: bottom center; animation: flashSide 0.1s ease-out forwards; z-index: 99; pointer-events: none; }
.br-spark { position: absolute; width: 3px; height: 15px; background: #ffcc00; border-radius: 50%; box-shadow: 0 0 10px #ff3b30, 0 0 5px #fff; pointer-events: none; z-index: 99; transform-origin: bottom center; }
.br-real-smoke { position: absolute; background: #aaa; border-radius: 50%; filter: blur(6px); box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 0 20px rgba(150,150,150,0.4); opacity: 0; pointer-events: none; z-index: 90; }

.shake-hard { animation: shakeAberration 0.18s linear both; }
.shake-critical { animation: shakeAberrationCrit 0.24s linear both; }
.shake-light { animation: shakeLight 0.11s linear both; }
.blood-splatter { position: absolute; pointer-events: none; z-index: 99998; background: rgba(138, 3, 3, 0.75); border-radius: 50% 40% 60% 30%; animation: bloodSplatAnim 1.2s cubic-bezier(0.1, 1, 0.3, 1) forwards; }
.br-handcuffs-overlay { position: absolute; top: -50px; left: 50%; width: 60px; height: 60px; transform: translateX(-50%); font-size: 50px; filter: drop-shadow(0 10px 5px rgba(0,0,0,0.8)); animation: chainDrop 0.6s cubic-bezier(0.5, 0, 0.3, 1) forwards; z-index: 30; pointer-events: none; }
.br-player-slot.handcuffed-shake { animation: lockShake 0.4s 0.6s ease-in-out; }
.br-heal-pulse { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.8); animation: healPulseAnim 1s ease-out forwards; z-index: -1; pointer-events: none; }
.br-heal-cross { position: absolute; color: #4cd964; font-weight: bold; font-size: 20px; text-shadow: 0 0 10px #4cd964; pointer-events: none; }
.br-knife-slash { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; background: transparent; border-radius: 50%; box-shadow: 20px 20px 0 0 #fff, 20px 20px 20px 0 #ff3b30; transform: translate(-50%, -50%) scale(0) rotate(-45deg); animation: brutalSlash 0.3s cubic-bezier(0.1, 1, 0.3, 1) forwards; z-index: 100; pointer-events: none; }
.br-metal-spark { position: absolute; width: 4px; height: 4px; background: #fff; box-shadow: 0 0 8px #00f0ff; border-radius: 50%; z-index: 101; pointer-events: none; }
.br-player-slot { position: absolute; width: 80px; height: 80px; border-radius: 50%; background: #111; border: 2px solid #333; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; font-size: 12px; transition: border-color 0.3s, box-shadow 0.3s; z-index: 20; cursor: pointer; pointer-events: auto; touch-action: manipulation; }
.br-player-slot.alive { border-color: var(--bm-neon); box-shadow: 0 0 15px rgba(57, 255, 20, 0.3); }
.br-player-slot.dead { border-color: #333; opacity: 0.4; filter: grayscale(100%); }
.br-player-slot.current-turn { border-color: #ff3b30; box-shadow: 0 0 20px rgba(255, 59, 48, 0.8); animation: pulse 1s infinite alternate; }
.blood-glitch { animation: bloodGlitch 0.6s ease-in-out forwards; }
.br-inventory-bar { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); display: flex; flex-direction: column; justify-content: center; gap: 12px; background: rgba(0,0,0,0.8); padding: 15px; border-radius: 16px; border: 1px solid var(--br-blood); z-index: 30; max-height: 80vh; overflow-y: auto; }
.br-item-btn { width: 50px; height: 50px; background: #222; border: 1px solid #555; border-radius: 8px; color: #fff; font-size: 24px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: 0.2s; }
.br-item-btn:hover { background: #444; border-color: #fff; transform: translateX(5px) scale(1.1); }
.br-player-slot.selected-target { border-color: #ff3b30 !important; box-shadow: 0 0 25px #ff3b30, inset 0 0 10px #ff3b30 !important; transform: scale(1.1); }
.br-action-panel { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 15px; z-index: 40; }
.br-shoot-btn { background: #ff3b30; color: #fff; border: 2px solid #8a0303; padding: 15px 25px; font-size: 18px; font-weight: bold; border-radius: 12px; cursor: pointer; box-shadow: 0 0 20px rgba(255, 59, 48, 0.5); animation: pulseShoot 1s infinite alternate; transition: 0.2s; }
.br-shoot-btn:hover { background: #ff0000; transform: scale(1.05); }
.br-cancel-btn { background: #333; color: #aaa; border: 1px solid #555; padding: 10px 20px; font-size: 14px; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.br-cancel-btn:hover { background: #555; color: #fff; }
.br-reloading-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(8, 0, 0, 0.82); z-index: 99999; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.28s ease; pointer-events: none; contain: paint; }
.br-reloading-overlay.active { opacity: 1; pointer-events: all; }
.br-bullet-container { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; max-width: 80vw; margin: 30px 0; perspective: 1000px; }
.br-cinematic-bullet { width: 24px; height: 60px; border-radius: 12px 12px 3px 3px; box-shadow: inset -5px -5px 15px rgba(0,0,0,0.7), 0 10px 20px rgba(0,0,0,0.5); animation: dropIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) both; }
.br-cinematic-bullet.live { background: radial-gradient(circle at 30% 20%, #ff6b6b, #aa0000); border: 1px solid #ff3b30; }
.br-cinematic-bullet.blank { background: radial-gradient(circle at 30% 20%, #6be0ff, #0055aa); border: 1px solid #00f0ff; }
.br-shuffle-anim .br-cinematic-bullet { animation: brutalShuffle 0.3s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate; }
.br-hud-text { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); font-size: 18px; color: #fff; text-shadow: 0 0 5px #ff3b30; text-align: center; z-index: 30; background: rgba(0,0,0,0.6); padding: 10px 20px; border-radius: 12px; border: 1px solid #444; box-shadow: 0 5px 15px rgba(0,0,0,0.5); }

.br-hud-text { font-size: 14px; padding: 6px 12px; max-width: min(420px, 70vw); }
.br-bottom-msg { position: absolute; left: calc(min(210px, 40vw) + 24px); right: 24px; bottom: clamp(56px, 9vh, 96px); z-index: 46; pointer-events: none; text-align: center; font-size: clamp(18px, 2.5vw, 24px); line-height: 1.25; font-weight: 700; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 0 2px #000; opacity: 0; transition: opacity 0.35s ease; }
.br-bottom-msg.show { opacity: 1; transition: none; }
.br-inventory-bar { max-height: calc(100vh - 200px); transform: translateY(calc(-50% - 16px)); }
.br-act-log { position: absolute; left: 10px; bottom: 10px; width: min(200px, 38vw); max-height: 18vh; overflow-y: auto; z-index: 36; pointer-events: auto; font-size: 11px; line-height: 1.35; color: rgba(255,255,255,0.84); background: rgba(0,0,0,0.42); border: 1px solid rgba(138,3,3,0.4); border-radius: 8px; padding: 5px 7px; }
.br-act-row { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.br-act-log::-webkit-scrollbar { width: 0; height: 0; }
.br-hit-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(255,59,48,0.9); box-shadow: 0 0 12px rgba(255,40,40,0.7); pointer-events: none; animation: brHitRing 0.5s ease-out forwards; }
.br-hit-ring.critical { border-color: #ff0000; animation-duration: 0.7s; }
.br-glass-lens { position: absolute; left: 50%; top: -18px; transform: translateX(-50%); font-size: 28px; pointer-events: none; z-index: 40; animation: brGlassPop 0.65s ease-out forwards; filter: drop-shadow(0 0 8px #7ad7ff); }
.br-glass-beam { position: absolute; left: 16px; top: -8px; width: 18px; height: 70px; border-radius: 40%; background: linear-gradient(180deg, rgba(180,240,255,0.0), rgba(180,240,255,0.75)); pointer-events: none; animation: brGlassBeam 0.6s ease-out forwards; }
.br-polarity { position: absolute; left: 50%; top: 18px; width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; border: 3px solid #ff3b30; box-shadow: 0 0 12px #00f0ff, inset 0 0 8px #ff3b30; pointer-events: none; animation: brPolarity 0.7s ease-out forwards; }
.br-polarity-flash { position: absolute; inset: 8%; border-radius: 50%; pointer-events: none; background: conic-gradient(from 0deg, rgba(255,59,48,0.35), rgba(0,240,255,0.35), rgba(255,59,48,0.35)); animation: brPolarity 0.7s ease-out forwards; }
.br-poop-fly { position: absolute; left: 0; top: 0; z-index: 60; font-size: 34px; pointer-events: none; filter: drop-shadow(0 6px 4px rgba(0,0,0,0.55)); }
.br-poop-splat { animation: lockShake 0.35s ease-in-out; }
.br-poop-splash { position: absolute; inset: 8px; border-radius: 50%; background: radial-gradient(circle, rgba(120,72,20,0.85), rgba(70,40,10,0.15) 70%, transparent 72%); pointer-events: none; animation: brPoopSplash 0.5s ease-out forwards; }
.br-poop-drop { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #6b4a1e; box-shadow: 0 0 4px rgba(90,50,10,0.8); pointer-events: none; }
.br-burst-core { position: absolute; left: 50%; top: -10px; width: 28px; height: 90px; margin-left: -14px; border-radius: 50%; background: #fff6d0; box-shadow: 0 0 24px #ffcc00, 0 0 48px #ff3b30, 0 0 70px #6b4a1e; pointer-events: none; transform-origin: bottom center; animation: flashJet 0.28s ease-out forwards; }
.br-burst-spark { background: #c47a2a !important; box-shadow: 0 0 8px #ffcc00, 0 0 4px #6b4a1e !important; }
.br-cuffs-break { animation: brCuffBreak 0.5s ease-in forwards; }
.br-cuff-snap { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); font-size: 22px; pointer-events: none; animation: brGlassPop 0.55s ease-out forwards; }
@keyframes brHitRing { 0% { transform: scale(0.6); opacity: 1; } 100% { transform: scale(1.45); opacity: 0; } }
@keyframes brGlassPop { 0% { opacity: 0; transform: translateX(-50%) scale(0.4) rotate(-20deg); } 40% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(8deg); } 100% { opacity: 0; transform: translateX(-50%) scale(1) rotate(0); } }
@keyframes brGlassBeam { 0% { opacity: 0; transform: scaleY(0.2); } 30% { opacity: 0.9; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(1.2); } }
@keyframes brPolarity { 0% { opacity: 0; transform: scale(0.4) rotate(0deg); filter: hue-rotate(0deg); } 40% { opacity: 1; transform: scale(1.2) rotate(120deg); } 100% { opacity: 0; transform: scale(1.6) rotate(260deg); filter: hue-rotate(180deg); } }
@keyframes brPoopSplash { 0% { transform: scale(0.3); opacity: 0.95; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes brCuffBreak { 0% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(1.4) rotate(18deg); } }


/* 動畫 Keyframes 總匯 */
@keyframes blinkGlow { 0% { filter: brightness(1); } 100% { filter: brightness(1.5); box-shadow: 0 0 15px #fff; } }
@keyframes breathe { 0% { opacity: 0.6; } 50% { opacity: 1; } 100% { opacity: 0.6; } }
@keyframes flash { 0% { opacity: 0.3; } 50% { opacity: 1; } 100% { opacity: 0.3; } }
@keyframes explodeShake { 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); } 100% { transform: translate(0, 0) rotate(0); } }
@keyframes morph { 0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } 50% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; } 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; } }
@keyframes flashJet { 0% { transform: translateX(-50%) scaleY(0.1) scaleX(0.5); opacity: 1; } 30% { transform: translateX(-50%) scaleY(1.2) scaleX(1.5); opacity: 1; filter: brightness(2); } 100% { transform: translateX(-50%) scaleY(1.5) scaleX(0); opacity: 0; } }
@keyframes flashSide { 0% { transform: translateX(-50%) rotate(var(--angle)) scaleY(0); opacity: 1; } 50% { transform: translateX(-50%) rotate(var(--angle)) scaleY(1.2); opacity: 0.8; } 100% { transform: translateX(-50%) rotate(var(--angle)) scaleY(1.5) translateY(-20px); opacity: 0; } }
@keyframes shakeAberration {
  0%, 100% { transform: translate3d(0, 0, 0); }
  30% { transform: translate3d(-4px, 2px, 0); }
  60% { transform: translate3d(4px, -2px, 0); }
}
@keyframes shakeAberrationCrit {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-6px, 3px, 0); }
  55% { transform: translate3d(6px, -3px, 0); }
  80% { transform: translate3d(-2px, 1px, 0); }
}
@keyframes shakeLight { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-2px, 1px, 0); } }
@keyframes bloodSplatAnim { 0% { transform: scale(0); opacity: 1; } 20% { transform: scale(1.5) translate(10px, 10px); opacity: 0.9; } 100% { transform: scale(1.6) translate(15px, 25px); opacity: 0; } }
@keyframes chainDrop { 0% { transform: translate(-50%, -100px) scale(2); opacity: 0; } 60% { transform: translate(-50%, 20px) scale(0.9); opacity: 1; } 80% { transform: translate(-50%, 5px) scale(1.1); } 100% { transform: translate(-50%, 15px) scale(1); opacity: 1; } }
@keyframes lockShake { 0%, 100% { transform: translate3d(0, 0, 0); } 25% { transform: translate3d(-6px, 0, 0); } 75% { transform: translate3d(6px, 0, 0); } }
@keyframes healPulseAnim { 0% { box-shadow: 0 0 0 0 rgba(76, 217, 100, 0.8), inset 0 0 20px rgba(76, 217, 100, 0.8); } 100% { box-shadow: 0 0 0 40px rgba(76, 217, 100, 0), inset 0 0 0 rgba(76, 217, 100, 0); } }
@keyframes brutalSlash { 0% { transform: translate(-50%, -50%) scale(0) rotate(-45deg); opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } 50% { transform: translate(-50%, -50%) scale(1.5) rotate(10deg); opacity: 1; filter: brightness(2); } 100% { transform: translate(-50%, -50%) scale(2) rotate(45deg); opacity: 0; clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%); } }
@keyframes bloodGlitch { 0% { transform: scale(1.12) rotate(6deg); box-shadow: 4px 0 0 rgba(255,0,0,0.7), -4px 0 0 rgba(0,180,255,0.7); } 50% { transform: scale(0.92) rotate(-6deg); background: #500; box-shadow: -6px 0 0 rgba(255,0,0,0.55), 6px 0 0 rgba(0,180,255,0.55); } 100% { transform: scale(1) rotate(0); background: #111; box-shadow: none; } }
@keyframes pulseShoot { 0% { transform: scale(1); } 100% { transform: scale(1.02); box-shadow: 0 0 30px rgba(255,59,48,0.8); } }
@keyframes dropIn { 0% { transform: translateY(-100px) rotateX(45deg); opacity: 0; } 100% { transform: translateY(0) rotateX(0); opacity: 1; } }
@keyframes brutalShuffle { 0% { transform: translateX(0) translateY(0) scale(1) rotate(0deg); filter: blur(0px); } 30% { transform: translateX(-40px) translateY(-15px) scale(0.9) rotate(-15deg); filter: blur(2px); } 70% { transform: translateX(40px) translateY(15px) scale(1.1) rotate(15deg); filter: blur(2px); } 100% { transform: translateX(0) translateY(0) scale(1) rotate(0deg); filter: blur(0px); } }
@keyframes loadIntoChamber { 0% { transform: translateY(0) scale(1) rotateX(0deg); opacity: 1; filter: brightness(1); } 30% { transform: translateY(-30px) scale(1.2) rotateX(-20deg); filter: brightness(1.5); } 100% { transform: translateY(150px) scale(0) rotateX(90deg); opacity: 0; filter: brightness(0.2); } }
@keyframes pulse { 0% { transform: scale(1); } 100% { transform: scale(1.1); } }
@keyframes itemDeal { 0% { transform: translate(40vw, 0) scale(0) rotate(-360deg); opacity: 0; } 100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; } }


/* 💀 BR richer scare FX (DOM/CSS only) */
.br-ash-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.br-ash-particle { position: absolute; bottom: -8%; width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 170, 90, 0.55); animation: brAshFloat linear infinite; pointer-events: none; will-change: transform; }
.br-ash-particle:nth-child(odd) { width: 2px; height: 2px; background: rgba(180,180,180,0.4); box-shadow: none; }
.br-screen-flash { position: absolute; inset: 0; pointer-events: none; z-index: 99997; background: rgba(140, 0, 0, 0.42); animation: brScreenFlash 0.4s ease-out forwards; will-change: opacity; }
.br-screen-flash.critical { background: rgba(220, 0, 0, 0.72); animation-duration: 0.65s; }
.br-vignette-hurt { position: absolute; inset: 0; pointer-events: none; z-index: 99996; box-shadow: inset 0 0 0 0 rgba(120,0,0,0.85); animation: brVignetteHurt 0.9s ease-out forwards; }
.br-vignette-hurt.critical { animation: brVignetteHurtCrit 1.15s ease-out forwards; }
.br-heartbeat-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; box-shadow: inset 0 0 80px rgba(80,0,0,0.55); animation: brHeartbeat 1.1s ease-in-out infinite; }
.blood-drip { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #8a0303, #3a0101); pointer-events: none; z-index: 99998; transform-origin: top center; animation: bloodDripFall 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; box-shadow: 0 0 6px rgba(138,3,3,0.6); }
.br-glitch-text { position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%); pointer-events: none; z-index: 99999; font-size: clamp(28px, 8vw, 56px); font-weight: 900; letter-spacing: 0.2em; color: #ff2a2a; text-shadow: 3px 0 #00f0ff, -3px 0 #ff0033, 0 0 18px rgba(255,0,0,0.8); animation: brGlitchText 0.85s steps(2, end) forwards; white-space: nowrap; }
.br-glitch-text.fatal { color: #ff0000; font-size: clamp(34px, 9vw, 64px); animation-duration: 1.05s; }
.br-whisper-text { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); pointer-events: none; z-index: 99999; font-size: clamp(16px, 4.5vw, 28px); letter-spacing: 0.35em; color: rgba(180, 230, 255, 0.85); text-shadow: 0 0 12px rgba(0,240,255,0.55); animation: brWhisperFade 1.2s ease-out forwards; white-space: nowrap; }
.br-shockwave { position: absolute; left: 50%; top: 0; width: 24px; height: 24px; margin-left: -12px; margin-top: -12px; border-radius: 50%; border: 2px solid rgba(170, 235, 255, 0.75); box-shadow: 0 0 12px rgba(0,240,255,0.45); pointer-events: none; z-index: 95; animation: brShockwave 0.55s ease-out forwards; }
.br-demon-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 99997; background: rgba(90, 0, 0, 0.35); animation: brDemonTakeover 0.95s ease-out forwards; }
.br-demon-overlay::before, .br-demon-overlay::after { content: ""; position: absolute; top: 42%; width: 18px; height: 10px; border-radius: 50%; background: radial-gradient(circle, #ff3b30 0%, #8a0303 55%, transparent 70%); box-shadow: 0 0 18px #ff3b30, 0 0 36px #ff0000; animation: brDemonEyes 0.95s ease-out forwards; }
.br-demon-overlay::before { left: calc(50% - 38px); }
.br-demon-overlay::after { left: calc(50% + 20px); }
.br-demon-pentagram { position: absolute; left: 50%; top: 50%; width: 90px; height: 90px; margin: -45px 0 0 -45px; opacity: 0; animation: brPentagramFlicker 0.95s ease-out forwards; background: conic-gradient(from 0deg, transparent 0 10%, rgba(255,40,40,0.55) 10% 12%, transparent 12% 30%, rgba(255,40,40,0.45) 30% 32%, transparent 32% 50%, rgba(255,40,40,0.55) 50% 52%, transparent 52% 70%, rgba(255,40,40,0.45) 70% 72%, transparent 72% 90%, rgba(255,40,40,0.55) 90% 92%, transparent 92% 100%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter: drop-shadow(0 0 8px #ff3b30); }
.br-reload-ember-layer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.br-reload-ember { position: absolute; bottom: 10%; width: 4px; height: 4px; border-radius: 50%; background: #ff6a2a; box-shadow: 0 0 8px #ff3b30; opacity: 0.7; animation: brEmberRise 1.8s ease-out forwards; }
.br-real-smoke.blank-smoke { background: rgba(140, 170, 190, 0.45) !important; filter: blur(10px); }

@keyframes brAshFloat {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0; }
  12% { opacity: 0.55; }
  100% { transform: translate3d(var(--drift, 20px), -110vh, 0) scale(0.6); opacity: 0; }
}
@keyframes brTablePulse {
  0% { transform: translate3d(-50%, -50%, 0) scale(1); }
  40% { transform: translate3d(-50%, -50%, 0) scale(1.03); }
  100% { transform: translate3d(-50%, -50%, 0) scale(1); }
}
@keyframes brScreenFlash {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}
@keyframes brVignetteHurt {
  0% { box-shadow: inset 0 0 120px rgba(140,0,0,0.9); opacity: 1; }
  100% { box-shadow: inset 0 0 40px rgba(80,0,0,0); opacity: 0; }
}
@keyframes brVignetteHurtCrit {
  0% { box-shadow: inset 0 0 160px rgba(180,0,0,0.95); opacity: 1; }
  55% { box-shadow: inset 0 0 100px rgba(120,0,0,0.55); opacity: 0.7; }
  100% { box-shadow: inset 0 0 30px rgba(60,0,0,0); opacity: 0; }
}
@keyframes brHeartbeat {
  0%, 100% { box-shadow: inset 0 0 70px rgba(70,0,0,0.4); opacity: 0.55; }
  15% { box-shadow: inset 0 0 110px rgba(140,0,0,0.75); opacity: 0.9; }
  30% { box-shadow: inset 0 0 80px rgba(90,0,0,0.5); opacity: 0.6; }
  45% { box-shadow: inset 0 0 120px rgba(160,0,0,0.8); opacity: 1; }
  70% { box-shadow: inset 0 0 70px rgba(70,0,0,0.4); opacity: 0.55; }
}
@keyframes bloodDripFall {
  0% { transform: scaleY(0.2); opacity: 0.95; height: 12px; }
  35% { transform: scaleY(1); opacity: 0.9; height: 48px; }
  100% { transform: translateY(45vh) scaleY(1.2); opacity: 0; height: 70px; }
}
@keyframes brGlitchText {
  0% { opacity: 0; transform: translate(-50%, -50%) skewX(0deg) scale(0.7); filter: none; }
  15% { opacity: 1; transform: translate(-48%, -52%) skewX(-8deg) scale(1.05); filter: contrast(1.4); }
  30% { transform: translate(-52%, -48%) skewX(6deg); }
  55% { opacity: 1; transform: translate(-50%, -50%) skewX(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -56%) scale(1.1); }
}
@keyframes brWhisperFade {
  0% { opacity: 0; letter-spacing: 0.15em; filter: blur(2px); }
  25% { opacity: 0.95; filter: blur(0); }
  100% { opacity: 0; letter-spacing: 0.55em; transform: translate(-50%, -60%); }
}
@keyframes brShockwave {
  0% { transform: scale(0.4); opacity: 0.9; }
  100% { transform: scale(6.5); opacity: 0; }
}
@keyframes brDemonTakeover {
  0% { opacity: 0; filter: invert(0); }
  20% { opacity: 1; filter: invert(0.35) hue-rotate(-20deg); }
  55% { opacity: 0.85; }
  100% { opacity: 0; filter: invert(0); }
}
@keyframes brDemonEyes {
  0% { opacity: 0; transform: scale(0.4); }
  25% { opacity: 1; transform: scale(1.2); }
  70% { opacity: 0.9; }
  100% { opacity: 0; transform: scale(0.8); }
}
@keyframes brPentagramFlicker {
  0%, 100% { opacity: 0; transform: rotate(0deg) scale(0.6); }
  18% { opacity: 0.85; transform: rotate(12deg) scale(1); }
  35% { opacity: 0.2; }
  48% { opacity: 0.9; transform: rotate(-8deg) scale(1.05); }
  70% { opacity: 0.35; }
}
@keyframes brEmberRise {
  0% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  100% { transform: translate3d(var(--ex, 0px), -140px, 0) scale(0.3); opacity: 0; }
}
@keyframes brTitleGlow {
  0%, 100% { text-shadow: 0 0 8px rgba(255,59,48,0.45), 0 0 22px rgba(138,3,3,0.35); }
  50% { text-shadow: 0 0 14px rgba(255,59,48,0.85), 0 0 36px rgba(255,0,0,0.45); }
}
@keyframes brVeinPulse {
  0%, 100% { opacity: 0.4; transform: translateX(0); }
  50% { opacity: 0.75; transform: translateX(2%); }
}


/* Block Touch-to-Search / text selection on mobile gme HUDs */
#comg-gme-container,
#pl-gme-container,
#bm-gme-container,
#snake-gme-container,
#br-gme-container {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#comg-debug, #pl-debug-overlay, #comg-scoreboard {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}


/* Action X lobby — independent of COMG hub layout */
#fps_hub, #acx_lobby { position: fixed; inset: 0; z-index: 12000; background: #07090d; color: #e8eef5; }
#fps_hub { display: flex; flex-direction: column; padding: 28px 22px; }
.fps-hub-top { display: flex; justify-content: space-between; align-items: center; }
.fps-hub-title { font-size: 28px; letter-spacing: 0.18em; font-weight: 800; }
.fps-hub-split { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; margin-top: 22px; }
.fps-hub-card { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 220px; cursor: pointer; }
.fps-hub-card b { font-size: 42px; letter-spacing: 0.04em; }
.fps-hub-card span { margin-top: 8px; color: #9aa7b5; font-size: 13px; }
.fps-hub-card.comg { border-color: #0099ff; }
.fps-hub-card.acx { border-color: #e8c56b; }
#acx_lobby { display: block; }
.acx-top, .acx-bottom { position: absolute; z-index: 2; display: flex; gap: 8px; }
.acx-top { top: 14px; left: 14px; right: 14px; justify-content: space-between; }
.acx-top-right, .acx-bottom { display: flex; gap: 8px; }
.acx-bottom { left: 14px; bottom: 16px; }
.acx-chip { border: 1px solid rgba(232,197,107,.45); background: rgba(8,10,14,.72); color: #f3e6c0; border-radius: 10px; padding: 8px 12px; font-size: 13px; font-weight: 700; }
.acx-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.acx-figure { width: 148px; height: 320px; position: relative; }
.acx-figure i { position: absolute; display: block; background: #c8b48a; border-radius: 8px; }
.acx-head { width: 42px; height: 48px; left: 53px; top: 8px; border-radius: 16px; background: #d7c2a2; }
.acx-body { width: 70px; height: 96px; left: 39px; top: 62px; background: #2d3844; }
.acx-arm { width: 22px; height: 84px; top: 68px; background: #3c4a58; }
.acx-arm.l { left: 14px; } .acx-arm.r { right: 14px; }
.acx-leg { width: 24px; height: 110px; top: 158px; background: #24303a; }
.acx-leg.l { left: 46px; } .acx-leg.r { right: 46px; }
.acx-gear-slots { position: absolute; left: 160px; top: 70px; display: flex; flex-direction: column; gap: 6px; }
.acx-gear-slot { font-size: 12px; color: #d7deE6; border: 1px dashed rgba(232,197,107,.4); padding: 4px 8px; border-radius: 8px; white-space: nowrap; }
#acx-boot { position: absolute; inset: 0; z-index: 3; background: #05070a; display: flex; align-items: center; justify-content: center; flex-direction: column; }
#acx-boot b { font-size: 64px; letter-spacing: 0.2em; color: #e8c56b; }
#acx-boot span { color: #8d97a3; margin-top: 8px; }
body.acx-live #circle-login-btn,
body.acx-live #circle-recharge-btn,
body.acx-live #friend-circle-btn,
body.acx-live #hub-sys-toggle,
body.acx-live #hub-sys-panel { display: none !important; }
@media (max-width: 720px) {
  .fps-hub-split { grid-template-columns: 1fr; }
  .fps-hub-card b { font-size: 32px; }
}

.acx-panel { position:absolute; inset:0; z-index:4; background:#0b0e13; display:grid; grid-template-columns: 280px 1fr; }
.acx-panel-side { padding:14px; border-right:1px solid rgba(232,197,107,.25); overflow:auto; }
.acx-panel-side h2 { margin:12px 0; font-size:22px; color:#e8c56b; }
.acx-slot-col { display:flex; flex-direction:column; gap:8px; }
.acx-slot { text-align:left; border:1px solid rgba(232,197,107,.4); background:#121821; color:#f3e6c0; border-radius:12px; padding:10px 12px; }
.acx-slot em { display:block; font-style:normal; color:#8d97a3; font-size:12px; }
.acx-slot strong { font-size:16px; }
.acx-slot.is-large { min-height:72px; }
.acx-panel-main { position:relative; min-width:0; }
.acx-panel-note { padding:10px 12px; color:#9aa7b5; font-size:12px; }
.acx-grid-view { position:absolute; left:12px; right:12px; top:36px; bottom:12px; overflow:auto; border:1px solid rgba(255,255,255,.08); }
.acx-grid-spacer { position:relative; width:100%; }
.acx-grid-row { position:absolute; left:0; right:0; height:58px; display:grid; grid-template-columns:repeat(9, 1fr); gap:4px; padding:4px; }
.acx-cell { border:1px solid rgba(255,255,255,.08); border-radius:8px; font-size:11px; color:#d7dee6; display:flex; align-items:center; justify-content:center; background:#10151c; touch-action:none; }
.acx-cell.has { background:#243044; border-color:#e8c56b; }
.acx-cell.is-drag { outline:2px solid #e8c56b; }
.acx-loadout-stage { display:flex; align-items:center; justify-content:center; }
.acx-gun-tag { position:absolute; left:160px; top:210px; color:#e8c56b; font-size:13px; }
.acx-picker { position:absolute; inset:0; background:rgba(5,7,10,.94); display:flex; flex-direction:column; z-index:5; }
.acx-picker-bar { display:flex; gap:8px; align-items:center; padding:12px; }
.acx-picker-bar button { border:1px solid #e8c56b; background:transparent; color:#f3e6c0; border-radius:8px; padding:6px 10px; }
.acx-picker-list { overflow:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:8px; padding:12px; }
.acx-pick { border:1px solid rgba(232,197,107,.35); background:#141b24; color:#f3e6c0; border-radius:10px; padding:12px; text-align:left; }
.acx-pick span { display:block; color:#8d97a3; font-size:12px; margin-top:4px; }
.acx-action { position:absolute; right:16px; bottom:16px; z-index:6; }
.acx-empty { color:#8d97a3; padding:12px; }
#acx-loadout-figure { transform:scale(1.15); }

.acx-settings { position:absolute; inset:0; z-index:6; background:#07090d; display:grid; grid-template-columns: 148px 1fr; color:#e8eef5; }
.acx-set-nav { overflow:auto; border-right:1px solid rgba(232,197,107,.28); display:flex; flex-direction:column; }
.acx-set-nav button { background:transparent; color:#c9d2dc; border:0; border-bottom:1px solid rgba(255,255,255,.06); text-align:left; padding:14px 12px; font-size:14px; }
.acx-set-nav button.is-on { color:#e8c56b; background:rgba(232,197,107,.08); }
.acx-set-body { position:relative; overflow:auto; padding:12px 16px 72px; }
.acx-set-top { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.acx-set-top button, .acx-set-actions button { border:1px solid #e8c56b; background:transparent; color:#f3e6c0; border-radius:8px; padding:6px 10px; }
.acx-set-actions { display:flex; gap:8px; margin-bottom:12px; }
.acx-set-row { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.06); }
.acx-set-row select, .acx-set-row input[type="range"] { width:46%; }
.acx-set-note { color:#8d97a3; font-size:12px; line-height:1.5; }
.acx-layout-stage { position:fixed; inset:0; z-index:8; background:rgba(5,7,10,.92); }
.acx-pad { position:absolute; width:72px; height:72px; border-radius:50%; border:1px solid #e8c56b; background:rgba(18,24,33,.9); color:#f3e6c0; touch-action:none; font-size:11px; }
.acx-pad.is-on { outline:2px solid #fff; }
.acx-layout-bar { position:absolute; top:10px; left:10px; right:10px; z-index:2; display:flex; gap:8px; align-items:center; }
.acx-layout-bar button, .acx-layout-bar label { border:1px solid #e8c56b; background:#121821; color:#f3e6c0; border-radius:8px; padding:6px 10px; }
.acx-drag-ghost { position:fixed; z-index:30000; pointer-events:none; padding:8px 10px; border-radius:10px; background:#e8c56b; color:#1a1408; font-weight:700; }
.acx-space { margin-top:12px; }
.acx-space-grid { display:grid; gap:4px; }
.acx-space-cell { min-height:42px; border:1px solid rgba(232,197,107,.3); border-radius:8px; font-size:11px; display:flex; align-items:center; justify-content:center; background:#121821; }
.acx-space-cell.is-pending { background:#3a3420; }
.acx-prep { position:absolute; inset:0; z-index:7; background:#07090d; color:#e8eef5; }
.acx-prep-main { display:grid; grid-template-columns:1.1fr .9fr; gap:12px; padding:12px; }
.acx-prep-confirm { position:absolute; right:16px; bottom:64px; background:#17140c; border:1px solid #e8c56b; padding:12px; border-radius:12px; }

.acx-market-detail { padding:12px; }
.acx-market-split { display:grid; grid-template-columns:1.2fr .8fr; gap:16px; }
.acx-bar { display:grid; grid-template-columns:64px 1fr 36px; gap:8px; align-items:center; margin:8px 0; }
.acx-bar i { display:block; height:14px; background:#e8c56b; border-radius:7px; }
.acx-preview-card { height:180px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; }
.acx-pay { background:#1f8a4c; color:#fff; border:0; border-radius:10px; padding:12px 18px; font-size:18px; font-weight:700; }
.acx-select-toggle, .acx-sell-bar { position:absolute; right:16px; bottom:16px; z-index:5; }
.acx-sell-bar { display:flex; gap:8px; bottom:52px; }
.acx-sell-bar button { border:1px solid #e8c56b; background:#121821; color:#f3e6c0; border-radius:8px; padding:8px 10px; }
.acx-cell.is-picked { outline:2px solid #7dffb2; }
.acx-mail { position:absolute; inset:0; z-index:7; background:#07090d; color:#e8eef5; padding:16px; overflow:auto; }
.acx-mail-row { border-bottom:1px solid rgba(255,255,255,.08); padding:10px 0; }

.acx-figure canvas { width:100%; height:100%; }
.acx-bar-head { display:flex; justify-content:space-between; color:#8d97a3; font-size:12px; }

body.acx-live #bg-root, body.acx-live #unsplash-attr { display: none !important; }