/* Compact invitation, shared branding; scoped away from the live room. */
#gate{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;min-height:100dvh;padding:24px 20px;background:#090b0e}
#gate::before,#gate::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;width:390px;height:390px;left:50%;top:50%;margin:-195px;background:radial-gradient(circle,#c19a3f15,transparent 67%);animation:invite-glow 8s ease-in-out infinite alternate}
#gate::after{width:260px;height:260px;margin:-130px;background:radial-gradient(circle,#42566c17,transparent 66%);animation-delay:-4s;transform:translate(80px,90px)}
#gate .gate-brand{gap:8px;font-size:18px;margin:0 0 17px}
#gate .gate-brand span{font-size:12px;letter-spacing:3px}
#gate .gate-card{position:relative;isolation:isolate;width:min(100%,302px);max-width:302px;padding:22px 22px 19px;border-radius:19px;border:1px solid #c9af703d;background:linear-gradient(145deg,#242118bb,#111317ed 55%);box-shadow:0 18px 65px #0006,0 0 36px #c0a15c08;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:invite-arrive .65s ease-out both}
#gate .gate-card::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;border:1px solid #e6c66e30;pointer-events:none;animation:invite-border 5s ease-in-out infinite}
#gate .eyebrow{display:block;font-size:8px;line-height:12px;letter-spacing:1.8px;margin:0 0 16px;color:#bda471}
#gate .gate-emblem{position:absolute;right:19px;top:46px;font-size:20px;line-height:1;margin:0;opacity:.8;animation:invite-star 4s ease-in-out infinite}
#gate .gate-card h1{font-size:23px;font-weight:500;line-height:1.5;letter-spacing:1.2px}
#gate .gate-card>p:not(.form-error):not(.local-hint){font-size:11px;line-height:1.8;margin:10px 0 18px;color:#aaa495}
#gate .gate-card label{font-size:10px;line-height:14px;margin-bottom:6px}
#gate .gate-card input{height:44px;padding:10px 12px;font-size:16px;line-height:22px;letter-spacing:.6px;margin-bottom:10px;border-radius:9px;border-color:#aa8d5359;transition:border-color .2s,box-shadow .2s}
#gate .gate-card input:focus{outline:none;border-color:#d4b565;box-shadow:0 0 0 3px #d4b56512}
#gate .gold-button{position:relative;overflow:hidden;isolation:isolate;min-height:44px;height:44px;padding:10px 13px;border-radius:9px;font-size:12px;letter-spacing:.4px;background:linear-gradient(110deg,#e8d39b,#cda851);box-shadow:0 3px 16px #cba64b12;transition:transform .2s,box-shadow .2s}
#gate .gold-button::after{content:"";position:absolute;inset:-50% auto -50% -70%;width:35%;background:linear-gradient(90deg,transparent,#fff8,transparent);transform:skewX(-20deg);pointer-events:none;animation:invite-sheen 6s ease-in-out infinite}
#gate .gold-button:active{transform:scale(.98)}
#gate .gate-rules{margin-top:16px;font-size:9px;line-height:14px;gap:8px;color:#9d927b}
#gate .gate-footer{margin:15px 0 0;font-size:9px;line-height:14px;letter-spacing:1px;color:#77756e}
#gate .form-error{margin:12px 0 0;font-size:11px;line-height:1.5}
#gate .local-hint{margin:12px 0 0;padding-top:10px}
#gate .gate-sparks{position:absolute;inset:0;z-index:-1;pointer-events:none}
#gate .gate-sparks i{position:absolute;width:2px;height:2px;border-radius:50%;background:#e9c76b;box-shadow:0 0 7px #e9c76b88;animation:invite-twinkle 5s ease-in-out infinite}
#gate .gate-sparks i:nth-child(1){left:19%;top:29%;animation-delay:-1s}
#gate .gate-sparks i:nth-child(2){left:80%;top:23%;animation-delay:-3s}
#gate .gate-sparks i:nth-child(3){left:12%;top:65%;animation-delay:-2s}
#gate .gate-sparks i:nth-child(4){left:84%;top:71%;animation-delay:-4s}
#gate .gate-sparks i:nth-child(5){left:33%;top:17%;animation-delay:-.5s}
#gate .gate-sparks i:nth-child(6){left:65%;top:83%;animation-delay:-2.7s}
@keyframes invite-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes invite-glow{from{opacity:.4;transform:translate(-30px,-35px) scale(.9)}to{opacity:1;transform:translate(25px,20px) scale(1.15)}}
@keyframes invite-border{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes invite-star{0%,100%{opacity:.45;transform:scale(.9) rotate(-6deg)}50%{opacity:1;transform:scale(1.1) rotate(6deg)}}
@keyframes invite-twinkle{0%,100%{opacity:.15;transform:translateY(4px) scale(.7)}50%{opacity:.8;transform:translateY(-5px) scale(1.2)}}
@keyframes invite-sheen{0%,68%{left:-70%;opacity:0}73%{opacity:.8}91%,100%{left:145%;opacity:0}}
@media(max-width:360px){#gate{padding:20px}#gate .gate-card{width:100%;max-width:280px;padding:20px 19px 18px}#gate .gate-card h1{font-size:22px}}
@media(max-height:520px){#gate{justify-content:flex-start;padding-block:16px}#gate .gate-brand{margin-bottom:12px}#gate .gate-footer{margin-top:12px}}
@media(prefers-reduced-motion:reduce){#gate *,#gate::before,#gate::after,#gate .gate-card::before,#gate .gold-button::after{animation:none!important;transition:none!important}}