/* ============================================================ THE BUTTON — big risk button + 14 random "effect" overlays. Logic lives in button.js. No build step; plain CSS. Takeover layers sit above everything (buckVictory=2000, toast=2100), so effects use 2147483600+. ============================================================ */ /* ---- The button itself (~4x the old glow-button) ---- */ .risk-button { display: block; margin: 12px auto 0; padding: 35px 83px; font-size: 2.25rem; font-weight: 900; letter-spacing: 3px; text-transform: uppercase; border-radius: 24px; border: 4px solid #ff2b2b; color: #fff; background: radial-gradient(circle at 50% 30%, #ff6a3d, #d10000 60%, #7a0000); text-shadow: 0 2px 6px rgba(0,0,0,0.55); box-shadow: 0 0 0 6px rgba(255,43,43,0.18), 0 18px 44px rgba(209,0,0,0.55), inset 0 4px 12px rgba(255,255,255,0.35), inset 0 -10px 22px rgba(0,0,0,0.45); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.2s ease, left 0.18s ease, top 0.18s ease; animation: risk-pulse 1.8s ease-in-out infinite; will-change: transform; } .risk-button:hover, .risk-button:focus { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 8px rgba(255,43,43,0.25), 0 26px 60px rgba(209,0,0,0.65), inset 0 4px 12px rgba(255,255,255,0.45), inset 0 -10px 22px rgba(0,0,0,0.5); } .risk-button:active { transform: translateY(0) scale(0.98); } .risk-subtitle { display: block; text-align: center; margin-top: 16px; color: #ff2b2b; font-size: 1rem; font-weight: 700; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255,43,43,0.5); } @keyframes risk-pulse { 0%,100% { box-shadow: 0 0 0 6px rgba(255,43,43,0.18), 0 18px 44px rgba(209,0,0,0.55), inset 0 4px 12px rgba(255,255,255,0.35), inset 0 -10px 22px rgba(0,0,0,0.45); } 50% { box-shadow: 0 0 0 14px rgba(255,43,43,0.05), 0 18px 44px rgba(209,0,0,0.7), inset 0 4px 12px rgba(255,255,255,0.4), inset 0 -10px 22px rgba(0,0,0,0.5); } } /* Button in "dodge" mode jumps to fixed coordinates set by JS. */ .risk-button.dodging { position: fixed; margin: 0; z-index: 2147483646; } /* ---- shared base layer ---- */ .fx-layer { position: fixed; inset: 0; z-index: 2147483600; overflow: hidden; } /* screen shake applied to */ @keyframes fx-shake { 0%,100% { transform: translate(0,0); } 10% { transform: translate(-10px, 6px) rotate(-0.6deg); } 20% { transform: translate(9px, -8px) rotate(0.5deg); } 30% { transform: translate(-12px, 4px); } 40% { transform: translate(11px, 7px) rotate(-0.4deg); } 50% { transform: translate(-8px, -6px); } 60% { transform: translate(7px, 5px) rotate(0.5deg); } 70% { transform: translate(-6px, 4px); } 80% { transform: translate(5px, -4px); } 90% { transform: translate(-3px, 2px); } } html.fx-shaking { animation: fx-shake 0.5s linear infinite; } /* ================================================================= 1) NUKE → fireball grows → wasteland image, hard to escape ================================================================= */ .fx-nuke { z-index: 2147483640; background: transparent; pointer-events: none; } .fx-nuke .fireball { position: absolute; left: var(--cx, 50%); top: var(--cy, 50%); width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; background: radial-gradient(circle at 50% 45%, #fff 0%, #ffe066 12%, #ff8c1a 30%, #ff3b00 52%, #b00000 72%, #3a0a05 90%); filter: blur(1px) contrast(1.2); box-shadow: 0 0 120px 60px rgba(255,120,20,0.6); transform: scale(0.2); opacity: 0.95; animation: fx-nuke-grow 2.1s cubic-bezier(.2,.6,.3,1) forwards; } @keyframes fx-nuke-grow { 0% { transform: scale(0.05); opacity: 1; } 10% { opacity: 1; } 100% { transform: scale(60); opacity: 1; } } /* roiling smoke that lingers, then clears */ .fx-nuke .smoke { position: absolute; inset: -20%; background: radial-gradient(circle at 30% 40%, rgba(80,30,10,0.9), transparent 45%), radial-gradient(circle at 70% 60%, rgba(40,15,8,0.95), transparent 50%), radial-gradient(circle at 50% 50%, rgba(150,40,10,0.7), transparent 60%), rgba(20,8,5,0.96); opacity: 0; animation: fx-nuke-smoke 4.2s ease-in forwards; animation-delay: 1.4s; } @keyframes fx-nuke-smoke { 0% { opacity: 0; } 25% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } /* smoke clears to reveal wasteland beneath */ } /* the wasteland: fullscreen image, nothing else */ .fx-wasteland { position: fixed; inset: 0; z-index: 2147483630; background: #000; background-image: var(--waste-img); background-size: cover; background-position: center; background-repeat: no-repeat; } html.fx-nuked, html.fx-nuked body { overflow: hidden !important; height: 100%; } /* hide the entire normal site once nuked */ html.fx-nuked body > *:not(.fx-wasteland):not(.fx-layer):not(.fx-nuke) { display: none !important; } /* ================================================================= 6) SCAREWARE — fake AV "Critical Error" that respawns on close ================================================================= */ .fx-scare-backdrop { position: fixed; inset: 0; z-index: 2147483610; background: repeating-linear-gradient(45deg, rgba(140,0,0,0.55) 0 24px, rgba(90,0,0,0.55) 24px 48px); backdrop-filter: blur(1px); animation: fx-scare-flash 1.1s steps(2,end) infinite; } @keyframes fx-scare-flash { 0%,100%{background-color:rgba(150,0,0,0.15);} 50%{background-color:rgba(150,0,0,0.0);} } .fx-scare-win { position: absolute; width: min(92vw, 540px); background: #f3f3f3; color: #1a1a1a; border-radius: 8px; border: 1px solid #c00; box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 0 3px rgba(255,0,0,0.25); font-family: "Segoe UI", Tahoma, Arial, sans-serif; overflow: hidden; z-index: 2147483611; } .fx-scare-titlebar { display: flex; align-items: center; gap: 10px; background: linear-gradient(#d00000, #a00000); color: #fff; padding: 10px 14px; font-weight: 700; font-size: 0.95rem; } .fx-scare-titlebar .x { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; background: rgba(255,255,255,0.2); border-radius: 4px; cursor: pointer; font-weight: 900; } .fx-scare-titlebar .x:hover { background: rgba(255,255,255,0.4); } .fx-win-logo { width: 18px; height: 18px; display: inline-grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; transform: skewX(-8deg); } .fx-win-logo i { display:block; } .fx-win-logo i:nth-child(1){ background:#f25022; } .fx-win-logo i:nth-child(2){ background:#7fba00; } .fx-win-logo i:nth-child(3){ background:#00a4ef; } .fx-win-logo i:nth-child(4){ background:#ffb900; } .fx-scare-body { padding: 18px 20px 22px; text-align: center; } .fx-scare-body .warn-icon { font-size: 3rem; line-height: 1; } .fx-scare-body h2 { color: #c00; margin: 8px 0 6px; font-size: 1.5rem; } .fx-scare-body p { margin: 6px 0; font-size: 0.98rem; line-height: 1.4; } .fx-scare-body .sub { color: #444; font-size: 0.86rem; } .fx-scare-body .phone { display: inline-block; margin: 12px 0 4px; background: #c00; color:#fff; padding: 12px 18px; border-radius: 6px; font-size: 1.25rem; font-weight: 800; letter-spacing: 1px; animation: fx-scare-flash 0.9s steps(2,end) infinite; } .fx-scare-body .progress { height: 14px; background:#ddd; border-radius: 7px; overflow:hidden; margin: 14px 0 4px; } .fx-scare-body .progress > i { display:block; height:100%; width:42%; background: repeating-linear-gradient(45deg,#c00 0 12px,#e33 12px 24px); animation: fx-scare-scan 1.4s linear infinite; } @keyframes fx-scare-scan { from{ width:8%; } 50%{ width:88%; } to{ width:8%; } } .fx-scare-btn { margin-top: 12px; background:#0a64c2; color:#fff; border:none; border-radius:6px; padding: 10px 18px; font-weight:700; cursor:pointer; font-size:0.95rem; } /* ================================================================= 8) FAKE WINDOWS UPDATE ================================================================= */ .fx-winupdate { z-index: 2147483620; background: #1f6fd4; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; font-family: "Segoe UI", Tahoma, Arial, sans-serif; text-align: center; gap: 26px; cursor: none; } .fx-winupdate .spinner { width: 70px; height: 70px; border-radius: 50%; border: 7px solid rgba(255,255,255,0.25); border-top-color: #fff; animation: fx-spin 1s linear infinite; } @keyframes fx-spin { to { transform: rotate(360deg); } } .fx-winupdate .pct { font-size: 2.4rem; font-weight: 600; } .fx-winupdate .msg { font-size: 1.5rem; font-weight: 400; max-width: 80vw; } .fx-winupdate .sub { font-size: 1rem; opacity: 0.85; } /* ================================================================= 13) WASTED (GTA style) ================================================================= */ html.fx-grayscale { filter: grayscale(1) contrast(1.1) brightness(0.85); transition: filter 0.6s ease; } .fx-wasted { z-index: 2147483625; background: radial-gradient(circle at center, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.78) 100%); display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; animation: fx-wasted-fade 4.4s ease-in-out forwards; } .fx-wasted span { font-family: "Arial Narrow", Impact, "Franklin Gothic Bold", sans-serif; font-weight: 900; font-size: clamp(4rem, 16vw, 13rem); letter-spacing: 0.04em; color: #d8d8d8; text-shadow: 0 4px 18px rgba(0,0,0,0.9); transform: scale(1.4); animation: fx-wasted-zoom 4.4s ease-out forwards; } @keyframes fx-wasted-fade { 0%{opacity:0;} 18%{opacity:1;} 82%{opacity:1;} 100%{opacity:0;} } @keyframes fx-wasted-zoom { 0%{transform:scale(1.7);} 30%{transform:scale(1);} 100%{transform:scale(1.05);} } /* ================================================================= 11) CURSOR SWARM ================================================================= */ html.fx-nocursor, html.fx-nocursor * { cursor: none !important; } .fx-cursor { position: fixed; top: 0; left: 0; width: 22px; height: 30px; z-index: 2147483645; pointer-events: none; will-change: transform; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.5)); } /* ================================================================= 9) GRAVITY OFF — falling DOM ================================================================= */ .fx-falling { position: fixed !important; margin: 0 !important; z-index: 2147483000; will-change: transform; pointer-events: none; } /* once gravity is on, empty container chrome shouldn't linger */ body.fx-gravity-on { overflow: hidden; } body.fx-gravity-on .section, body.fx-gravity-on .announcement, body.fx-gravity-on .canvas-wrapper, body.fx-gravity-on .uso-block, body.fx-gravity-on .canvas-stage { border-color: transparent !important; background: transparent !important; box-shadow: none !important; } /* ================================================================= 14) BLACK HOLE ================================================================= */ .fx-suck { transition: transform 1.8s cubic-bezier(.55,0,.9,.55), opacity 1.8s ease-in !important; will-change: transform, opacity; pointer-events: none !important; } html.fx-void { background: #000 !important; } html.fx-void body { background: #000 !important; overflow: hidden !important; } .fx-void-button { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(0.5) !important; margin: 0 !important; z-index: 2147483646; animation: fx-void-float 5s ease-in-out infinite; } @keyframes fx-void-float { 0%,100% { transform: translate(-50%, -50%) scale(0.5); } 50% { transform: translate(-50%, calc(-50% - 16px)) scale(0.5) rotate(3deg); } } /* ================================================================= 5) GENERIC POPUP ("Try Again", etc.) ================================================================= */ .fx-modal-backdrop { position: fixed; inset: 0; z-index: 2147483628; background: rgba(0,0,0,0.65); display: flex; align-items: center; justify-content: center; } .fx-modal { background: rgba(15,15,15,0.98); border: 2px solid var(--blue-pop, #2ecbff); border-radius: 16px; color: #d9ffe0; padding: 28px 32px; width: min(90vw, 360px); text-align: center; font-size: 1.3rem; font-weight: 700; box-shadow: 0 20px 60px rgba(0,0,0,0.75); } .fx-modal button { margin-top: 20px; padding: 10px 22px; border-radius: 999px; border: none; background: var(--blue-pop, #2ecbff); color:#000; font-weight: 700; cursor: pointer; font-size: 1rem; }