* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; font-family: system-ui, sans-serif; background: #0a1428; color: #e8e8ea; }
.fallback { position: fixed; inset: 0; background: radial-gradient(ellipse 1200px 800px at 30% 30%, rgba(212,160,23,.12), transparent 60%), linear-gradient(135deg,#0a1428,#1a0f2e); }
.background { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.vignette { position: fixed; inset: 0; background: radial-gradient(ellipse at center,transparent 35%,rgba(0,0,0,.55) 95%); z-index: 2; pointer-events: none; }
.signin { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); z-index: 3; padding: 14px 38px; background: linear-gradient(135deg,#d4a017,#f4c430); color: #0a1428; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; text-decoration: none; border: 2px solid rgba(255,255,255,.35); border-radius: 6px; box-shadow: 0 6px 24px rgba(212,160,23,.45); }
.signin:hover { filter: brightness(1.1); }
.signin:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.hint { position: absolute; bottom: 3vh; left: 0; right: 0; text-align: center; z-index: 3; font-size: 11px; color: rgba(255,255,255,.65); letter-spacing: 1px; }
@media (prefers-reduced-motion: reduce) { .background { display: none; } }