/* Login page arcade theme */
:root{
  --red1:#b30016; --red2:#5b060a; --gold1:#ffefb3; --gold2:#ffc940; --gold3:#f19b00;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:#fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
    url('backgroundwheel.jpg') center / cover no-repeat fixed;
}
/* top banner "Spin Wheel" */
.banner{
  width:100%; max-width:520px; margin:24px auto 12px; text-align:center; position:relative;
}
.banner .title{
  font-weight:900; line-height:0.85;
  font-size:clamp(44px,12vw,84px);
  letter-spacing:2px; margin:0;
  background:linear-gradient(180deg,#fff 0,#fff2 5%,#ffeaa5 55%,#ffcf4a 80%,#a14b00 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 15px 40px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.45);
}
/* side decorative arcs */
.decor {
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(200px 300px at 5% 40%, #fbd152 10%, #a56200 11%, transparent 12%),
    radial-gradient(200px 300px at 95% 40%, #fbd152 10%, #a56200 11%, transparent 12%),
    radial-gradient(140px 240px at 5% 70%, #fbd152 10%, #a56200 11%, transparent 12%),
    radial-gradient(140px 240px at 95% 70%, #fbd152 10%, #a56200 11%, transparent 12%);
  mask:
    radial-gradient(100% 180% at 0% 50%, transparent 46%, black 47%) left/50% 100% no-repeat,
    radial-gradient(100% 180% at 100% 50%, transparent 46%, black 47%) right/50% 100% no-repeat;
}
.container{max-width:520px; margin:0 auto; padding:0 16px 40px}
.card{background:linear-gradient(180deg,rgba(0,0,0,.25),rgba(0,0,0,.12));
  border:1px solid #d79a2f;border-radius:20px;padding:18px 16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.label{
  display:block; text-align:center; margin:16px 0 8px; font-weight:900; font-size:clamp(18px,4.5vw,26px);
  text-shadow:0 2px 0 rgba(0,0,0,.25); color:#ffe7a1;
}
.input-wrap{
  background:linear-gradient(180deg,#8a1212,#5b0a0a);
  border:2px solid #a85d0a; border-radius:14px; padding:6px; margin:0 auto 14px; max-width:520px;
  box-shadow:0 8px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
.input{
  width:100%; border:0; outline:none; color:#fff; font-weight:800;
  background:linear-gradient(180deg,#de2d2d,#b01616);
  padding:14px 16px; border-radius:10px; text-align:center; letter-spacing:.3px;
}
.input::placeholder{color:#ffe8c2; opacity:.85}
.btn{
  display:block; width:200px; margin:16px auto 0; padding:14px 22px; border-radius:999px; border:0; cursor:pointer;
  font-weight:900; font-size:clamp(18px,5vw,22px); color:#6a2500;
  background:linear-gradient(180deg,var(--gold1),var(--gold2) 58%,var(--gold3));
  box-shadow:0 14px 30px rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.85), inset 0 -2px 0 rgba(0,0,0,.25);
}
.hint{margin:10px 0 0; text-align:center; color:#ffe3a7; opacity:.95}
@media(min-height:780px){
  .banner{margin-top:36px}
}
/* Powered by strip */
.powered{
  margin:18px auto 34px;
  padding:10px 14px;
  max-width:520px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  color:#ffe7a1;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.08));
  border:1px solid rgba(215,154,47,.5);
  border-radius:14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.powered-text{opacity:.9;font-weight:800}
.powered-name{color:#ffd96a;letter-spacing:.3px}
.powered-logo{
  height:26px; width:auto; display:inline-block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
@media (max-width:480px){
  .powered{flex-wrap:wrap; gap:6px; text-align:center}
  .powered-logo{height:22px}
}