/* Guitar Game Artallis | V3.3 illustrated entrance.
   Exact existing DOM: #welcome > .intro + .loginbox
   Source artwork contains the ONE centered visible Guitar Game logotype.
   ONLY loaded in fictional online-preview Pages bundle, not authenticated Worker. */
html.gg-online-preview.gg-rpg-v2 #welcome.welcome{
  position:relative!important;display:block!important;isolation:isolate;
  width:100%;min-height:clamp(650px,83svh,860px)!important;
  margin:0 auto 23px!important;padding:0!important;
  overflow:hidden!important;border:3px solid #aa864c!important;border-radius:26px!important;
  background:linear-gradient(180deg,#145378 0%,#23677b 49%,#072d40 100%)!important;
  box-shadow:0 7px 0 #b2a179,0 28px 44px #122c4390!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .intro{
  position:absolute!important;inset:0!important;z-index:0!important;
  width:100%!important;height:100%!important;min-height:0!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  overflow:hidden!important;background:transparent!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .intro::before{
  content:"";position:absolute!important;inset:0!important;z-index:-1!important;
  width:100%!important;height:100%!important;
  background-color:#146078!important;
  background-image:url('/guitar-rpg-assets/ggv3-login-hero-classica-1672.webp')!important;
  background-repeat:no-repeat!important;
  background-size:cover!important;background-position:center 48%!important;
  transform:none!important;animation:none!important;filter:none!important;
  opacity:1!important;will-change:auto!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .intro::after{
  content:"";position:absolute!important;inset:0!important;z-index:1!important;
  pointer-events:none!important;
  background:linear-gradient(180deg,transparent 0%,transparent 54%,#072b4033 68%,#061d35d9 100%)!important;
}
/* The painted logo stays legible without duplicating a second visible title. */
html.gg-online-preview.gg-rpg-v2 #welcome .intro>:not(:empty){
  position:absolute!important;inline-size:1px!important;block-size:1px!important;
  padding:0!important;margin:-1px!important;overflow:hidden!important;
  clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox{
  position:absolute!important;z-index:5!important;
  top:auto!important;bottom:22px!important;right:auto!important;left:50%!important;
  transform:translateX(-50%)!important;
  box-sizing:border-box!important;width:min(440px,calc(100% - 34px))!important;
  max-width:440px!important;max-height:calc(100% - 165px)!important;
  margin:0!important;overflow-y:auto!important;
  padding:19px 24px 18px!important;border:2px solid #e9c77d!important;
  border-radius:17px!important;
  background:linear-gradient(135deg,#102d43ec,#0d3a50ed 75%,#154d58ee)!important;
  box-shadow:0 0 0 3px #02273b65,0 6px 0 #b79352,0 18px 43px #051526ba,inset 0 0 0 2px #fbe5ad18!important;
  color:#fff9de!important;backdrop-filter:blur(8px);
  text-align:center!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox::before{
  inset:7px!important;border:1px solid #f7d99b40!important;pointer-events:none!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox::after{
  content:"✦"!important;color:#f3d78d!important;opacity:.95!important;top:6px!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox h2{
  margin:0 0 7px!important;color:#fff1bc!important;
  text-shadow:0 2px 8px #061d34!important;
  font-size:clamp(20px,2.7vw,27px)!important;line-height:1.14!important;
  font-weight:1000!important;letter-spacing:-.025em!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .subtitle{
  margin:0 0 12px!important;color:#dbeee7!important;
  font-size:12px!important;line-height:1.45!important;text-align:center!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .previewButton{
  display:flex!important;align-items:center!important;justify-content:center!important;
  width:100%!important;max-width:none!important;box-sizing:border-box!important;
  margin:0!important;padding:12px 14px!important;
  min-height:52px!important;border:2px solid #684820!important;border-radius:12px!important;
  background:linear-gradient(#ffe7a4,#efb957)!important;
  box-shadow:0 4px 0 #9b743f,0 9px 17px #0a1a2780!important;
  font-size:clamp(13px,1.6vw,17px)!important;font-weight:1000!important;
  color:#412c15!important;letter-spacing:.01em;
  cursor:pointer;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .previewButton:hover{
  filter:brightness(1.075)!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .previewButton:focus-visible{
  outline:3px solid #fff!important;outline-offset:3px!important;
}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .demo-note{
  margin:12px 0 0!important;color:#d9e7db!important;
  font-size:11px!important;line-height:1.36!important;
}
@media(max-width:900px){
  html.gg-online-preview.gg-rpg-v2 #welcome.welcome{
    min-height:clamp(690px,79svh,870px)!important;
    border-radius:20px!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .intro::before{
    background-size:auto clamp(560px,100vw,870px)!important;
    background-position:center top!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .intro::after{
    background:linear-gradient(180deg,transparent 0%,transparent 48%,#123b5266 66%,#071f38 91%,#061c32 100%)!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox{
    bottom:19px!important;max-height:calc(100% - 250px)!important;
    width:min(430px,calc(100% - 30px))!important;
    padding:17px 19px 16px!important;
  }
}
@media(max-width:600px){
  html.gg-online-preview.gg-rpg-v2 #welcome.welcome{
    min-height:clamp(675px,calc(100svh - 105px),800px)!important;
    border-radius:17px!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .intro::before{
    background-size:auto clamp(448px,135vw,615px)!important;
    background-position:center top!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .intro::after{
    background:linear-gradient(180deg,#09223800 0%,#09223800 49%,#0c405050 60%,#0b3447b8 75%,#061c32 100%)!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox{
    width:calc(100% - 22px)!important;
    bottom:13px!important;max-height:calc(100% - 250px)!important;
    padding:14px 13px 14px!important;
    border-radius:13px!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox h2{
    font-size:clamp(20px,5vw,24px)!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .subtitle{
    font-size:11px!important;margin-bottom:9px!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .previewButton{
    min-height:50px!important;font-size:14px!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .demo-note{
    font-size:10px!important;margin-top:8px!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html.gg-online-preview.gg-rpg-v2 #welcome .intro::before{
    animation:none!important;transform:none!important;
  }
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .previewButton{
    transition:none!important;
  }
}

/* Last visual pass: remove repeated demo disclaimer and ornamental collision on narrow iPhones. */
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox::after{display:none!important}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .demo-note{display:none!important}
html.gg-online-preview.gg-rpg-v2 #welcome .loginbox{-webkit-backdrop-filter:blur(8px)}
@media(max-width:360px){
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox h2{font-size:19px!important}
  html.gg-online-preview.gg-rpg-v2 #welcome .loginbox .subtitle{font-size:10.5px!important}
}

/* Screen-state contract: the approved illustrated login MUST disappear on entry.
   V3.3's display:block!important previously overrode the native [hidden] attribute,
   leaving the login hero visible above Home after Explore. Keep all entrance styling
   unchanged while the welcome section is active. */
html.gg-online-preview.gg-rpg-v2 #welcome.welcome[hidden]{
  display:none!important;
}