/* ================= SPLASH: cyberpunk "Hangman IND" intro shown over the portal ================= */
#splash { --cyan: #00f0ff; --pink: #ff2bd6; --yellow: #f5ff3b;
  position: fixed; inset: 0; z-index: 100; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; cursor: pointer; display: grid; justify-items: center;
  background: radial-gradient(ellipse at 50% 35%, #2a0a4a 0%, #0b0218 60%, #05010c 100%); color: #fff;
  font-family: 'Orbitron', 'Nunito', sans-serif; transition: opacity .6s, transform .6s; }
#splash.out { opacity: 0; transform: scale(1.06); pointer-events: none; }

/* neon perspective grid floor + scanlines */
#splash .floor { position: fixed; left: -50%; right: -50%; bottom: -10%; height: 55%; transform: perspective(300px) rotateX(60deg);
  background-image: linear-gradient(var(--pink) 2px, transparent 2px), linear-gradient(90deg, var(--pink) 2px, transparent 2px);
  background-size: 60px 60px; opacity: .35; animation: floor 1.6s linear infinite; mask-image: linear-gradient(transparent, #000 40%); }
@keyframes floor { to { background-position: 0 60px; } }
#splash::after { content: ''; position: fixed; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 2px, transparent 2px 4px); }

/* centred, but when the Log In / Sign Up box is taller than the screen the splash scrolls, so the button is always reachable */
#splash .center { position: relative; z-index: 1; text-align: center; padding: 16px; margin-block: auto; }
#splash .logo-mark { width: min(220px, 48vw); filter: drop-shadow(0 0 10px var(--cyan)) drop-shadow(0 0 22px var(--pink));
  animation: rise .9s cubic-bezier(.2,1.4,.4,1) both, flicker 4s 1.2s infinite; }
@keyframes rise { from { opacity: 0; transform: translateY(30px) scale(.8); } }
@keyframes flicker { 0%, 92%, 96%, 100% { opacity: 1; } 94% { opacity: .4; } }

/* glitchy title: two coloured copies jitter behind the white text */
#splash .title { position: relative; margin: 18px 0 6px; font-weight: 900; font-size: clamp(26px, 6.2vw, 78px); line-height: 1;
  letter-spacing: .04em; text-shadow: 0 0 8px var(--cyan), 0 0 26px var(--cyan); animation: rise .9s .25s both; }
#splash .title::before, #splash .title::after { content: attr(data-text); position: absolute; inset: 0; mix-blend-mode: screen; }
#splash .title::before { color: var(--pink); animation: glitch 2.6s infinite steps(1); }
#splash .title::after { color: var(--cyan); animation: glitch 2.6s .15s infinite reverse steps(1); }
@keyframes glitch {
  0%, 84%, 100% { transform: none; clip-path: none; opacity: 0; }
  86% { transform: translate(-4px, 2px); clip-path: inset(10% 0 55% 0); opacity: 1; }
  90% { transform: translate(4px, -2px); clip-path: inset(60% 0 8% 0); opacity: 1; }
  94% { transform: translate(-2px, 0); clip-path: inset(35% 0 35% 0); opacity: 1; }
}
#splash .title .ind { color: var(--yellow); text-shadow: 0 0 8px var(--yellow), 0 0 26px var(--pink); }
#splash .sub { letter-spacing: .5em; font-size: clamp(11px, 2.6vw, 15px); color: var(--cyan); opacity: .85; animation: rise .9s .45s both; }
#splash .enter { margin-top: 34px; font: inherit; font-weight: 700; letter-spacing: .3em; font-size: clamp(13px, 3vw, 16px); color: var(--yellow);
  background: transparent; border: 2px solid var(--yellow); padding: 12px 26px; cursor: pointer; box-shadow: 0 0 14px rgba(245,255,59,.5), inset 0 0 14px rgba(245,255,59,.25);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); animation: rise .9s .65s both, pulse 1.4s 1.6s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 26px rgba(245,255,59,.9), inset 0 0 18px rgba(245,255,59,.45); } }
#splash .enter:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) { #splash *, #splash .floor { animation: none !important; } }

/* log in / sign up box on the splash */
#splash .auth { margin: 26px auto 0; width: min(360px, 100%); text-align: left; cursor: default; animation: rise .5s both;
  border: 2px solid var(--cyan); background: rgba(5,1,12,.75); padding: 18px; box-shadow: 0 0 18px rgba(0,240,255,.35), inset 0 0 18px rgba(0,240,255,.12);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
#splash .auth[hidden] { display: none; }
#splash .tabs { display: flex; gap: 8px; margin-bottom: 14px; }
#splash .tabs button { flex: 1; font: inherit; font-size: 13px; letter-spacing: .15em; padding: 9px; cursor: pointer; color: var(--cyan); background: transparent; border: 1px solid rgba(0,240,255,.4); }
#splash .tabs button.on { background: var(--cyan); color: #05010c; }
#splash .auth label { display: block; font-size: 11px; letter-spacing: .2em; color: var(--pink); margin-bottom: 10px; }
#splash .auth input { display: block; width: 100%; margin-top: 5px; font: 600 16px 'Nunito', sans-serif; color: #fff; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,43,214,.5); padding: 10px 12px; outline: none; }
#splash .auth input:focus { border-color: var(--yellow); box-shadow: 0 0 10px rgba(245,255,59,.35); }
#splash .auth .err { color: var(--yellow); min-height: 20px; font-family: 'Nunito', sans-serif; font-size: 14px; }
#splash .auth .enter { width: 100%; margin-top: 8px; animation: none; }
#splash .auth .note { font: 600 12px 'Nunito', sans-serif; color: rgba(255,255,255,.6); margin: 10px 0 0; }
#splash .auth .guest { display: block; margin: 12px auto 0; font: 600 13px 'Nunito', sans-serif; color: rgba(255,255,255,.7); background: none; border: 0; cursor: pointer; text-decoration: underline; }
#splash[hidden], #splash [hidden] { display: none !important; }
#splash .auth label small { letter-spacing: 0; font: 600 11px 'Nunito', sans-serif; color: rgba(255,255,255,.55); }
#splash .auth .forgot { display: block; margin: -4px 0 6px auto; font: 700 13px 'Nunito', sans-serif; color: var(--cyan); background: none; border: 0; cursor: pointer; text-decoration: underline; }
#splash .auth .sent { font: 700 14px/1.45 'Nunito', sans-serif; color: #fff; border: 1px solid var(--cyan); background: rgba(0,240,255,.08); padding: 12px; margin: 6px 0; }
#splash .auth .sent small { display: block; margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.65); }