*{box-sizing:border-box}
:root{--blue:#08c9ff;--deep:#06153e;--panel:#061b50;--gold:#ffb51b}
html,body{margin:0;min-height:100%;font-family:Inter,Arial,sans-serif;color:#fff}
body{overflow-x:hidden;background:
radial-gradient(circle at 50% 12%,#47d9ff 0,#0c8ddd 28%,#073d91 55%,#030d2b 100%)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:
linear-gradient(120deg,transparent 35%,rgba(255,255,255,.07) 50%,transparent 65%),
radial-gradient(circle at 20% 20%,#fff8 0 2px,transparent 3px),
radial-gradient(circle at 80% 30%,#fff8 0 2px,transparent 3px)}
.bg-glow{position:fixed;width:700px;height:700px;left:50%;top:50%;transform:translate(-50%,-45%);border-radius:50%;background:#00c8ff22;filter:blur(30px);pointer-events:none}
.screen{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:20px 25px 86px}
.lobby{width:min(1180px,100%);display:flex;align-items:center;flex-direction:column;position:relative}
.brand{width:min(650px,90vw);position:relative;z-index:3;filter:drop-shadow(0 22px 25px #0008)}
.brand img{width:100%;display:block;border-radius:24px;mix-blend-mode:screen}
.login-panel{width:min(760px,94vw);margin-top:-5px;padding:28px 42px 26px;position:relative;z-index:4;text-align:center;border:2px solid #18caff;border-radius:34px;background:linear-gradient(145deg,#061c54f5,#020d2df5);box-shadow:0 25px 65px #0009,0 0 45px #00caff33;overflow:hidden}
.shine{position:absolute;width:60%;height:120px;top:-100px;left:20%;background:#fff;filter:blur(45px);opacity:.13}
h1{margin:0;font-size:clamp(22px,3vw,34px);letter-spacing:.5px;text-shadow:0 0 15px #00cfff}
.subtitle{color:#c6dcf7;margin:11px 0 25px;font-size:15px}
.google-login-wrap{height:66px;max-width:590px;margin:auto;display:flex;align-items:center;border-radius:18px;background:#fff;box-shadow:0 8px 0 #9ea6ad,0 0 30px #fff4;transition:.15s;overflow:hidden}
.google-login-wrap:hover{transform:translateY(-2px);box-shadow:0 10px 0 #9ea6ad,0 0 35px #fff5}
.google-logo{width:70px;font-size:30px;font-weight:900;color:#4285f4;display:grid;place-items:center}
.google-login{height:100%;flex:1;border:0;background:transparent;color:#16458e;font-size:18px;font-weight:900;letter-spacing:.4px;cursor:pointer}
.google-login:active{transform:translateY(5px)}
.security{margin-top:23px;color:#8ee7ff;font-size:13px}
.config-hint{min-height:18px;margin:12px 0 0;color:#ffc857;font-size:12px}
.hud-nav{position:fixed;left:20px;top:50%;transform:translateY(-50%);display:grid;gap:13px;z-index:10}
.hud-nav button{width:92px;height:92px;border:2px solid #15caff;border-radius:21px;background:#061b50dd;color:white;box-shadow:0 8px 25px #0006;cursor:pointer;font-size:28px;transition:.15s}
.hud-nav button:hover{transform:translateX(4px);background:#0b2c70}
.hud-nav b{display:block;font-size:11px;margin-top:6px}
.robot{position:absolute;right:2%;top:30%;font-size:78px;filter:drop-shadow(0 12px 10px #0008);animation:float 3s ease-in-out infinite}
.floating-coin,.floating-star{position:absolute;z-index:2;animation:float 3.5s ease-in-out infinite;text-shadow:0 0 16px #ffc400}
.floating-coin{font-size:42px;color:#ffd321;border:4px solid #e89400;background:#ffc21b;border-radius:50%;width:60px;height:60px;text-align:center;line-height:53px;box-shadow:0 7px 20px #0006}
.c1{left:8%;top:30%}.c2{right:8%;top:18%;animation-delay:.7s}
.floating-star{font-size:42px;color:#ffdf20}.st1{left:18%;bottom:25%}.st2{right:15%;bottom:27%;animation-delay:1s}
.user-panel{width:min(760px,94vw);margin-top:0;padding:22px 28px;display:flex;align-items:center;gap:18px;border:2px solid #18caff;border-radius:28px;background:#061b50f5;box-shadow:0 20px 50px #0008;z-index:5}
.user-panel img{width:70px;height:70px;border-radius:50%;border:3px solid #25cfff}
.welcome-small{color:#68ddff;font-size:11px;font-weight:800}.user-panel h2{margin:4px 0;font-size:22px}.user-panel p{margin:0;color:#9bb5d6;font-size:13px}
.coins{margin-left:auto;color:#ffd329}.logout{border:1px solid #ff7c5c;background:#571e2b;color:#fff;border-radius:12px;padding:11px 15px;cursor:pointer;font-weight:800}
footer{position:fixed;bottom:13px;left:25px;right:25px;z-index:20;display:flex;justify-content:space-between;align-items:center;color:#aac3e4;font-size:12px}
footer button{background:none;border:0;color:#b9d7f5;cursor:pointer;margin-left:14px}
.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:50;padding:20px}.modal-box{position:relative;width:min(480px,94vw);padding:30px;border:2px solid #16caff;border-radius:25px;background:#061b50;box-shadow:0 20px 60px #000}.modal-box h2{margin-top:0}.close{position:absolute;right:14px;top:10px;border:0;background:none;color:white;font-size:30px;cursor:pointer}.hidden{display:none!important}
@keyframes float{50%{transform:translateY(-13px) rotate(3deg)}}
@media(max-width:850px){.hud-nav{position:fixed;top:auto;bottom:70px;left:50%;transform:translateX(-50%);display:flex}.hud-nav button{width:74px;height:58px;font-size:20px}.hud-nav b{font-size:9px}.robot{display:none}.login-panel{padding:24px 18px}.google-login{font-size:15px}footer{font-size:9px;bottom:8px}.c1,.c2,.st1,.st2{display:none}.user-panel{flex-wrap:wrap}}


/* ===== FINAL LOGIN LOGO LAYOUT ===== */
.brand{display:none!important}
.login-panel .login-panel-logo{
  display:block;
  width:104px;
  height:104px;
  object-fit:contain;
  margin:0 auto 12px;
  border-radius:20px;
  position:relative;
  z-index:3;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.25));
}
@media(max-width:700px){
  .login-panel .login-panel-logo{width:84px;height:84px}
}