/* Red40 Games splash screen. */

/* ---------- Red40 Games splash ---------- */
#splash { position: fixed; inset: 0; z-index: 70; background: radial-gradient(ellipse at center, #1a0204 0%, #000 70%); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity .6s; }
#splash.out { opacity: 0; pointer-events: none; }
#splash.gone { display: none; }
.r40 { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
.r40-drop { width: clamp(80px, 18vmin, 170px); filter: drop-shadow(0 0 24px rgba(255,20,30,.55)); animation: dropFall .75s cubic-bezier(.55,0,1,.45) both, dropSquash .45s .75s ease-out both; transform-origin: 50% 100%; }
.r40-word { font-family: 'Bungee', Impact, sans-serif; font-size: clamp(46px, 14vmin, 150px); line-height: 1; margin-top: 2vmin; letter-spacing: .02em; position: relative; overflow: hidden; animation: wordIn .5s 1s cubic-bezier(.2,1.4,.4,1) both; }
.r40-red { color: #e0141c; text-shadow: 0 0 30px rgba(224,20,28,.6), 0 5px 0 #5a0004; }
.r40-num { color: #fff; text-shadow: 0 0 20px rgba(255,255,255,.35), 0 5px 0 #7a0006; }
.r40-word::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%); transform: translateX(-120%); animation: shine .9s 1.55s ease-in-out forwards; mix-blend-mode: overlay; }
.r40-sub { font-family: 'Bungee', Impact, sans-serif; color: #ff9a9a; font-size: clamp(12px, 3.2vmin, 30px); letter-spacing: .5em; margin-top: 1.5vmin; padding-left: .5em; animation: fadeUp .6s 1.35s ease-out both; }
.r40-ring { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border: 3px solid #e0141c; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; animation: ringOut 1s .78s ease-out both; }
.r40-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); font-size: 9px; letter-spacing: 3px; color: #5a3a3a; animation: fadeUp .5s 1.8s both, blink 1.1s 2.3s steps(2) infinite; }
#splash.wait .r40-skip { color: #ff9a9a; font-size: 11px; text-shadow: 0 0 10px rgba(255,60,60,.7); }
@keyframes dropFall { from { transform: translateY(-70vh) scaleY(1.25); opacity: 0; } 10% { opacity: 1; } }
@keyframes dropSquash { 0% { transform: scale(1.25, .75); } 45% { transform: scale(.92, 1.1); } 75% { transform: scale(1.03, .97); } 100% { transform: none; } }
@keyframes wordIn { from { transform: scale(.4); opacity: 0; letter-spacing: .6em; } }
@keyframes shine { to { transform: translateX(120%); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } }
@keyframes ringOut { 0% { opacity: .9; width: 10px; height: 10px; } 100% { opacity: 0; width: 120vmin; height: 40vmin; border-width: 1px; } }