html,body{
  margin:0;
  min-height:100%;
  background:radial-gradient(circle at top,#5c33bc 0,#1f0736 42%,#090611 100%);
  font-family:"Trebuchet MS","Verdana",sans-serif;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.scene{
  width:100vw;
  height:100vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0;
  box-sizing:border-box;
}

.phone-shell{
  height:62.64vh;
  width:calc(62.64vh * 909.5625 / 1140);
  max-width:100vw;
  border-radius:28px 28px 0 0;
  overflow:hidden;
  position:relative;
  box-shadow:0 -10px 40px rgba(0,0,0,.55);
  background:#13071f;
}

/* WebView / mobile / touch devices: fill entire screen */
@media (max-width:768px),(max-height:600px),(hover:none) and (pointer:coarse){
  .scene{
    align-items:stretch;
  }
  .phone-shell{
    height:100vh;
    height:100dvh;
    width:100vw;
    max-width:100vw;
    border-radius:0;
    box-shadow:none;
  }
}
/* JS-based fullscreen override for WebView */
body.webview-mode .scene{align-items:stretch}
body.webview-mode .phone-shell{
  height:100vh;height:100dvh;width:100vw;max-width:100vw;border-radius:0;box-shadow:none;
}

.slot-root{
  width:100%;
  height:100%;
  position:relative;
}

.slot-root canvas{
  width:100% !important;
  height:100% !important;
  display:block;
}

.loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff4d0;
  letter-spacing:.08em;
  font-weight:700;
  background:
    radial-gradient(circle at 50% 28%,rgba(255,188,67,.22),transparent 24%),
    linear-gradient(180deg,#6620a5,#290441 74%,#15051f);
}
.load-inner{
  width:70%;
  max-width:300px;
  text-align:center;
}
.load-title{
  font-size:1.1em;
  margin-bottom:14px;
  color:#ffd966;
}
.load-bar-track{
  width:100%;
  height:18px;
  border-radius:10px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  overflow:hidden;
}
.load-bar-fill{
  height:100%;
  border-radius:10px;
  background:linear-gradient(90deg,#ff8f3a,#ffc53a);
  transition:width .2s ease;
  box-shadow:0 0 8px rgba(255,197,58,.5);
}
.load-percent{
  margin-top:8px;
  font-size:.85em;
  color:#c9a8f0;
}

.login-overlay{
  position:absolute;
  inset:0;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 50% 30%,rgba(255,188,67,.18),transparent 28%),
    linear-gradient(180deg,#6620a5,#290441 74%,#15051f);
}
.login-overlay.hidden{display:none}

.login-card{
  width:80%;
  max-width:320px;
  text-align:center;
}
.login-card h2{
  margin:0 0 4px;
  color:#ffd966;
  font-size:1.6em;
  letter-spacing:.06em;
}
.login-sub{
  margin:0 0 18px;
  color:#c9a8f0;
  font-size:.85em;
}
.login-card input{
  display:block;
  width:100%;
  box-sizing:border-box;
  margin:0 0 10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:.9em;
  outline:none;
}
.login-card input:focus{border-color:#ffc53a}
.login-card input::placeholder{color:rgba(255,255,255,.4)}

.login-btn{
  width:100%;
  padding:10px 0;
  margin:4px 0 8px;
  border:none;
  border-radius:8px;
  background:linear-gradient(135deg,#ff8f3a,#ff5722);
  color:#fff;
  font-size:1em;
  font-weight:700;
  cursor:pointer;
  letter-spacing:.04em;
}
.login-btn:active{opacity:.85}

.guest-btn{
  width:100%;
  padding:8px 0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:8px;
  background:transparent;
  color:#c9a8f0;
  font-size:.85em;
  cursor:pointer;
}
.guest-btn:hover{border-color:#ffc53a;color:#ffd966}

.login-error{
  margin:10px 0 0;
  color:#ff6b6b;
  font-size:.8em;
  min-height:1.2em;
}

.account-btn{
  position:absolute;
  top:6px;
  right:6px;
  z-index:90;
  padding:3px 10px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(22,3,33,.7);
  color:#c9a8f0;
  font-size:.65em;
  cursor:pointer;
  white-space:nowrap;
  max-width:40%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.account-btn:hover{border-color:#ffc53a;color:#ffd966}
.account-btn.hidden{display:none}