/* Launch intro: T-POT GAMES presents, then the Five Gangs logo */
html:not(.fg-intro-done)::after { content: ""; position: fixed; inset: 0; z-index: 1000; background: #0b0a09; pointer-events: none; animation: fg-cover 0.3s 3s forwards; }
@keyframes fg-cover { to { opacity: 0; visibility: hidden; } }

#fg-intro { position: fixed; inset: 0; z-index: 1001; display: grid; place-items: center; cursor: pointer; transition: opacity 0.3s;
  background: radial-gradient(ellipse at 50% 45%, #241c15, #0b0a09 70%); }
#fg-intro.out { opacity: 0; }
#fg-intro .fg-card { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; animation: 2.5s linear both; }
#fg-intro .fg-tpot { animation-name: fg-a; }
#fg-intro .fg-game { animation-name: fg-b; }
#fg-intro .fg-tpot img { width: min(56vw, 280px); }
#fg-intro .fg-game img { width: min(84vw, 560px); }
#fg-intro p { margin: 0; font: 500 13px/1 "Oswald", "Arial Narrow", sans-serif; letter-spacing: 0.5em; text-transform: uppercase; color: #c9a14a; padding-left: 0.5em; }
#fg-intro small { position: absolute; bottom: calc(18px + env(safe-area-inset-bottom)); font: 400 11px/1 "Oswald", "Arial Narrow", sans-serif; letter-spacing: 0.3em; text-transform: uppercase; color: #6f6453; }
@keyframes fg-a { 0% { opacity: 0; } 14%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes fg-b { 0%, 48% { opacity: 0; transform: scale(1.06); } 64%, 100% { opacity: 1; transform: none; } }