/* css/games.css - GameHub Pro Styles */ /* 棋盤類 (井字棋、五子棋) */ .board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; background: var(--bg-input); padding: 10px; border-radius: 16px; margin: 12px auto; width: 100%; max-width: 250px; } .cell { background: var(--bg-card); aspect-ratio: 1; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 26px; font-weight: 800; cursor: pointer; } .cell.X { color: var(--primary); } .cell.O { color: var(--secondary); } .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; } .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-game-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-game-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-game-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-game-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-game-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; } #br-game-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); } .br-table.br-table-breathe { animation: brTableBreathe 4.5s ease-in-out infinite; } .br-table.br-table-pulse { animation: brTablePulse 0.28s cubic-bezier(0.2, 1.4, 0.3, 1) 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,') 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.5s cubic-bezier(0.1, 1.2, 0.3, 1) both; } .shake-critical { animation: shakeAberrationCrit 0.7s cubic-bezier(0.1, 1.5, 0.2, 1) both; } .shake-light { animation: shakeLight 0.3s ease-in-out 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; } .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); } /* 動畫 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); } 10% { transform: translate3d(-18px, 14px, 0); } 30% { transform: translate3d(16px, -12px, 0); } 50% { transform: translate3d(-10px, 10px, 0); } 70% { transform: translate3d(8px, -6px, 0); } } @keyframes shakeAberrationCrit { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 5% { transform: translate3d(-28px, 22px, 0) scale(1.02); } 15% { transform: translate3d(24px, -18px, 0) scale(1.01); } 30% { transform: translate3d(-16px, 16px, 0) scale(1); } 50% { transform: translate3d(12px, -10px, 0); } 70% { transform: translate3d(-6px, 6px, 0); } } 5% { transform: translate(-50px, 40px) scale(1.05); filter: blur(3px) drop-shadow(30px 0 0 red) drop-shadow(-30px 0 0 blue) contrast(150%); } 15% { transform: translate(45px, -35px) scale(1.02); filter: blur(2px) drop-shadow(-20px 0 0 red) drop-shadow(20px 0 0 blue) contrast(120%); } 30% { transform: translate(-30px, 30px) scale(1); filter: blur(1px) drop-shadow(10px 0 0 red) drop-shadow(-10px 0 0 blue); } 50% { transform: translate(20px, -20px); filter: blur(0px); } 70% { transform: translate(-10px, 10px); } } @keyframes shakeLight { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-5px, 5px); } 40% { transform: translate(5px, -5px); } 60% { transform: translate(-2px, 2px); } } @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: translateX(0); } 25% { transform: translateX(-10px) rotate(-5deg); filter: brightness(0.5); } 75% { transform: translateX(10px) rotate(5deg); } } @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); box-shadow: 0 0 6px rgba(255, 80, 40, 0.35); animation: brAshFloat linear infinite; will-change: transform, opacity; } .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 brTableBreathe { 0%, 100% { box-shadow: inset 0 0 50px #000, 0 0 28px rgba(0,0,0,0.8), 0 0 0 rgba(138,3,3,0); } 50% { box-shadow: inset 0 0 55px #000, 0 0 34px rgba(0,0,0,0.85), 0 0 22px rgba(138,3,3,0.35); } } @keyframes brTablePulse { 0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); } 40% { transform: translate(-50%, -50%) scale(1.04); filter: brightness(1.25); } 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(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 game HUDs */ #comg-game-container, #pl-game-container, #bm-game-container, #snake-game-container, #br-game-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; }