/* RPG Home V2 — art fidelity + purposeful motion. LOCAL STAGING ONLY. */
.gg-rpg-v2{--ggv2-navy:#0b2442;--ggv2-parchment:#fff0c6;--ggv2-gold:#e6ac52;}
/* The login becomes one illustrated game scene, with a parchment sign-in. */
.gg-rpg-v2 .header{background:linear-gradient(100deg,#061c36,#12375a 68%,#092643);color:#fff4c8;padding:13px 20px;border:2px solid #254870;border-radius:18px;box-shadow:0 4px 0 #09213d30;}
.gg-rpg-v2 .header .brand strong{color:#ffd06b;text-shadow:0 2px 0 #613a14,0 3px 9px #0004;letter-spacing:.02em;}
.gg-rpg-v2 .header .brand small{color:#bfe5fa;}
.gg-rpg-v2 .header .brand-icon{background:linear-gradient(150deg,#f6cb69,#e89a2a);border:2px solid #fce9a4;color:#172b3f;box-shadow:0 3px 0 #94551e;}
.gg-rpg-v2 #welcome.welcome{position:relative;display:block;min-height:765px;isolation:isolate;margin:0 0 22px;padding:0;border:3px solid #b78343;border-radius:27px;background:#14516c;box-shadow:0 8px 0 #b49b68,0 24px 44px #1834504f;overflow:hidden;}
.gg-rpg-v2 #welcome .intro{position:absolute;inset:0;overflow:hidden;min-height:0;padding:0;border:0;border-radius:0;box-shadow:none;background:linear-gradient(120deg,#0d587c,#17375a);isolation:isolate;display:block;}
.gg-rpg-v2 #welcome .intro::before{content:"";position:absolute;inset:-3%;width:auto;height:auto;top:-3%;right:-3%;bottom:-3%;left:-3%;border:0;border-radius:0;box-shadow:none;background:url('/guitar-rpg-assets/ggv2-hero.webp') center 46% / cover no-repeat;z-index:-1;opacity:1;transform:translate3d(0,0,0) scale(1.045);animation:ggv2-scene-drift 20s ease-in-out infinite alternate;}
.gg-rpg-v2 #welcome .intro::after{content:"";position:absolute;inset:0;z-index:0;right:0;bottom:0;left:0;top:0;background:linear-gradient(90deg,#062b4475 0%,transparent 33%),linear-gradient(0deg,#04253c8a 0%,transparent 35%);font-size:0;pointer-events:none;}
/* Keep text meaningful for screen readers; art already includes the Guitar Game lettering. */
.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;}
.gg-rpg-v2 #welcome .loginbox{position:absolute;z-index:4;left:3.2%;bottom:4.3%;top:auto;right:auto;width:min(388px,42%);max-width:388px;max-height:95%;overflow-y:auto;background:linear-gradient(160deg,#fff8e2 0%,#f4dfaf 95%);border:3px solid #8e6636;border-radius:21px;box-shadow:0 7px 0 #674323,0 22px 45px #08243f77,inset 0 0 0 5px #fff9e1;padding:25px 26px 19px;color:#3b3325;}
.gg-rpg-v2 #welcome .loginbox::before{content:"";position:absolute;inset:8px;border:1px solid #bc996063;border-radius:13px;pointer-events:none;}
.gg-rpg-v2 #welcome .loginbox::after{content:"✦";position:absolute;top:9px;right:18px;pointer-events:none;color:#a47836;font-size:23px;opacity:.65;}
.gg-rpg-v2 #welcome .loginicon{width:48px;height:48px;border:2px solid #bc9852;border-radius:13px;background:linear-gradient(145deg,#f9edce,#eac98d);box-shadow:0 3px 0 #c5a169;color:#46331c;}
.gg-rpg-v2 #welcome .loginbox h2{font-weight:1000;color:#523a20;font-size:25px;letter-spacing:-.04em;text-shadow:0 1px 0 #fff;}
.gg-rpg-v2 #welcome .loginbox .subtitle,.gg-rpg-v2 #welcome .loginbox label,.gg-rpg-v2 #welcome .demo-note{color:#725a39;}
.gg-rpg-v2 #welcome .tabbar{display:flex;gap:5px;}
.gg-rpg-v2 #welcome .tabbar button{border:1px solid #bf9d65;border-bottom:3px solid #bd935a;border-radius:9px;background:#fff7e6;color:#5a4628;padding:9px 7px;font-size:11px;min-height:44px;}
.gg-rpg-v2 #welcome .tabbar button.selected{background:#2a6a55;color:#fff7d9;border-color:#2a6a55;box-shadow:0 3px 0 #1c483c;}
.gg-rpg-v2 #welcome .loginbox input{border:2px solid #cdb387;background:#fffaf0;color:#203a44;border-radius:9px;min-height:46px;box-shadow:inset 0 2px 4px #8d743526;}
.gg-rpg-v2 #welcome .loginbox button.primary{background:linear-gradient(#369366,#136a46);border:2px solid #125f43;color:white;box-shadow:0 4px 0 #0a4c34,0 9px 17px #1a42352a;text-transform:uppercase;letter-spacing:.05em;}
.gg-rpg-v2 #welcome .previewButton{background:#fff1be;color:#18547c;border:2px solid #d3ae63;box-shadow:0 3px 0 #c7a163;font-weight:900;}
.gg-rpg-v2 #welcome .loginbox button:hover{filter:brightness(1.045);}
.gg-rpg-v2 #welcome .loginbox button:active{transform:translateY(2px);box-shadow:none;}
/* Cinematic movement using a composited image layer (the art remains unchanged). */
.gg-rpg-v2 .gg-rpg-intro{background-color:#0d3044;background-image:none;isolation:isolate;}
.gg-rpg-v2 .gg-rpg-intro::before{background:linear-gradient(90deg,#0a263ee8 0%,#0a263eaa 38%,#0a263e35 73%),url('/guitar-rpg-assets/ggv2-hero.webp') right center / cover no-repeat;inset:-3%;z-index:-1;transform:translate3d(var(--parallax-x),var(--parallax-y),0) scale(1.06);animation:ggv2-scene-drift 23s ease-in-out infinite alternate;will-change:transform;pointer-events:none;}
.gg-rpg-v2 .gg-rpg-intro::after{z-index:2;}
.gg-rpg-v2 .gg-rpg-intro-content{animation:ggv2-hero-entrance .75s cubic-bezier(.18,.75,.25,1) both;}
.gg-rpg-v2 .gg-rpg-firefly{animation-duration:5.8s;box-shadow:0 0 9px 4px #fff4be80;}
.gg-rpg-v2 .gg-rpg-intro:not(.ggv2-visible)::before,.gg-rpg-v2 .gg-rpg-intro:not(.ggv2-visible) .gg-rpg-firefly{animation-play-state:paused;}
/* Layered skin illustrations: fade between themes rather than abruptly swapping artwork. */
.gg-rpg-v2 #profileCard .gg-balanced-hero-head{overflow:hidden;}
.gg-rpg-v2 #profileCard .gg-balanced-hero-head::after{background-image:none!important;opacity:0!important;}
.gg-rpg-v2 .ggv2-portrait-layers{position:absolute;inset:0;overflow:hidden;z-index:-1;pointer-events:none;}
.gg-rpg-v2 .ggv2-portrait-layer{position:absolute;inset:0;background-size:auto 135%;background-position:right center;background-repeat:no-repeat;opacity:0;transform:scale(1.05);transition:opacity .42s ease,transform .65s cubic-bezier(.2,.75,.3,1);}
.gg-rpg-v2 .ggv2-portrait-layer[data-theme=medieval]{background-image:linear-gradient(90deg,transparent 0%,#214f3a1a 80%),url('/guitar-rpg-assets/ggv2-portrait-medieval.webp');}
.gg-rpg-v2 .ggv2-portrait-layer[data-theme=cyberpunk]{background-image:url('/guitar-rpg-assets/ggv2-portrait-cyberpunk.webp');}
.gg-rpg-v2 .ggv2-portrait-layer[data-theme=retro]{background-image:url('/guitar-rpg-assets/ggv2-portrait-retro.webp');image-rendering:pixelated;}
.gg-rpg-v2 #profileCard[data-gg-rpg-skin=medieval] .ggv2-portrait-layer[data-theme=medieval],.gg-rpg-v2 #profileCard[data-gg-rpg-skin=cyberpunk] .ggv2-portrait-layer[data-theme=cyberpunk],.gg-rpg-v2 #profileCard[data-gg-rpg-skin=retro] .ggv2-portrait-layer[data-theme=retro]{opacity:.30;transform:scale(1);}
.gg-rpg-v2 #profileCard.ggv2-theme-changed .gg-balanced-hero-head{animation:ggv2-skin-reveal .48s ease-out;}
.gg-rpg-v2 .gg-rpg-skin[aria-pressed=true]{animation:ggv2-card-choice .32s ease-out;}
/* Map comes alive on selection, while preserving its original geometry and labels. */
.gg-rpg-v2 .gg-rpg-map-stage{isolation:isolate;}
.gg-rpg-v2 .gg-rpg-map-landscape{transform:translate3d(var(--ggv2-map-x,0px),var(--ggv2-map-y,0px),0) scale(1.018);transition:transform .7s ease;}
.gg-rpg-v2 .gg-rpg-region[aria-pressed=true] .gg-rpg-marker{animation:ggv2-guardian-breathe 2.7s ease-in-out infinite;}
.gg-rpg-v2 .gg-rpg-region[aria-pressed=true] .gg-rpg-marker::after{content:"✦";position:absolute;top:-20px;right:-10px;color:#fff7b9;text-shadow:0 0 8px #fff,0 0 16px #facb65;animation:ggv2-star-wink 3.5s ease-in-out infinite;font-size:19px;}
.gg-rpg-v2 .gg-rpg-region-preview.ggv2-guardian-flash .gg-rpg-selected-portrait img{animation:ggv2-portrait-reveal .44s cubic-bezier(.2,.7,.2,1) both;}
.gg-rpg-v2 .gg-rpg-region:hover .gg-rpg-marker img{filter:brightness(1.12);}
.gg-rpg-v2 #gg-view-home .gg-rpg-map-viewport.ggv2-visible .gg-rpg-dash-trail{animation-play-state:running;}
.gg-rpg-v2 #gg-view-home .gg-rpg-map-viewport:not(.ggv2-visible) .gg-rpg-dash-trail{animation-play-state:paused;}
.gg-rpg-v2 .gg-rpg-explore,.gg-rpg-v2 .gg-rpg-action,.gg-rpg-v2 .gg-rpg-album-button{transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;}
.gg-rpg-v2 .gg-rpg-explore:focus-visible,.gg-rpg-v2 .gg-rpg-skin:focus-visible,.gg-rpg-v2 .gg-rpg-region:focus-visible{outline:3px solid #ffd66c;outline-offset:3px;}
@keyframes ggv2-scene-drift{from{transform:translate3d(-4px,0,0) scale(1.045)}to{transform:translate3d(7px,-5px,0) scale(1.08)}}
@keyframes ggv2-hero-entrance{from{opacity:0;transform:translate3d(0,16px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes ggv2-skin-reveal{0%{filter:brightness(1.38)}100%{filter:brightness(1)}}
@keyframes ggv2-card-choice{50%{transform:translate3d(0,-4px,0) scale(1.02)}}
@keyframes ggv2-guardian-breathe{0%,100%{box-shadow:0 2px 0 #62442b,0 0 0 1px #fff2b900;transform:translateY(0)}50%{box-shadow:0 2px 0 #62442b,0 0 0 6px #fff2b94a;transform:translateY(-2px)}}
@keyframes ggv2-star-wink{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.14)}}
@keyframes ggv2-portrait-reveal{from{transform:translate3d(0,9px,0) scale(.95);opacity:.45}to{transform:translate3d(0,0,0) scale(1);opacity:1}}
@media(max-width:900px){
 .gg-rpg-v2 #welcome.welcome{display:flex;flex-direction:column;min-height:0;overflow:visible;border:0;background:transparent;box-shadow:none;gap:0;}
 .gg-rpg-v2 #welcome .intro{position:relative;inset:auto;width:100%;flex:none;aspect-ratio:985/632;min-height:245px;background:#0b5877;border:3px solid #ad854d;border-radius:24px 24px 16px 16px;box-shadow:0 5px 0 #dac399;overflow:hidden;}
 .gg-rpg-v2 #welcome .intro::before{background-position:center 46%;background-size:cover;}
 .gg-rpg-v2 #welcome .loginbox{position:relative;inset:auto;max-width:none;width:calc(100% - 38px);max-height:none;overflow:visible;margin:-29px auto 3px;border-radius:18px;padding:23px 21px 17px;}
}
@media(max-width:500px){
 .gg-rpg-v2 .header{padding:10px 12px;margin-bottom:11px;border-radius:13px;}
 .gg-rpg-v2 #welcome .intro{min-height:210px;border-radius:18px;}
 .gg-rpg-v2 #welcome .loginbox{width:calc(100% - 17px);margin-top:-15px;padding:21px 16px 16px;}
 .gg-rpg-v2 #welcome .loginbox h2{font-size:22px;}
 .gg-rpg-v2 #welcome .tabbar{flex-wrap:wrap;}
 .gg-rpg-v2 .gg-rpg-intro::before{background-position:64% center;}
 .gg-rpg-v2 .gg-rpg-intro:not(.ggv2-visible)::before{transform:none;}
 .gg-rpg-v2 .gg-rpg-region[aria-pressed=true] .gg-rpg-marker{animation-duration:3.7s;}
}
@media(max-width:360px){
 /* On very small iPhones the fixed bottom tabs must not obscure Edit Profile. */
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro{min-height:99px;max-height:106px;padding:8px 10px;}
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro::before{background-position:67% center;}
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro .gg-rpg-hero-actions{margin-top:0;}
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro .gg-rpg-explore{min-height:39px;}
}
@media(prefers-reduced-motion:reduce){
 .gg-rpg-v2 #welcome .intro::before,.gg-rpg-v2 .gg-rpg-intro::before,.gg-rpg-v2 .gg-rpg-firefly,.gg-rpg-v2 .gg-rpg-region[aria-pressed=true] .gg-rpg-marker,.gg-rpg-v2 .gg-rpg-region[aria-pressed=true] .gg-rpg-marker::after,.gg-rpg-v2 .gg-rpg-region-preview.ggv2-guardian-flash .gg-rpg-selected-portrait img,.gg-rpg-v2 #profileCard.ggv2-theme-changed .gg-balanced-hero-head,.gg-rpg-v2 .gg-rpg-skin[aria-pressed=true]{animation:none!important;}
 .gg-rpg-v2 .ggv2-portrait-layer,.gg-rpg-v2 .gg-rpg-map-landscape{transition:none!important;}
 .gg-rpg-v2 #welcome .intro::before,.gg-rpg-v2 .gg-rpg-intro::before{transform:none!important;}
}

/* Final art-direction refinement: one readable game logo (already painted in artwork).
   Keep the semantic title in the DOM for assistive technology, not as a duplicate overlay. */
.gg-rpg-v2 #gg-view-home .gg-rpg-intro{min-height:345px;display:block;background-color:#0c3552;}
.gg-rpg-v2 #gg-view-home .gg-rpg-intro::before{background:linear-gradient(0deg,#061e329b 0%,transparent 30%),url('/guitar-rpg-assets/ggv2-hero.webp') center 46% / cover no-repeat;}
.gg-rpg-v2 #gg-view-home .gg-rpg-intro-content{position:absolute;inset:0;width:auto;max-width:none;height:auto;display:flex;align-items:flex-end;justify-content:flex-end;padding:20px 23px;box-sizing:border-box;}
.gg-rpg-v2 #gg-view-home .gg-rpg-intro-content>.gg-rpg-overline,.gg-rpg-v2 #gg-view-home .gg-rpg-intro-content>.gg-rpg-title,.gg-rpg-v2 #gg-view-home .gg-rpg-intro-content>p{position:absolute!important;width:1px!important;height: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;}
.gg-rpg-v2 #gg-view-home .gg-rpg-intro .gg-rpg-hero-actions{margin:0;display:flex;justify-content:flex-end;gap:8px;}
.gg-rpg-v2 #gg-view-home .gg-rpg-intro .gg-rpg-world-facts{display:none;}
.gg-rpg-v2 #gg-view-home .gg-rpg-intro .gg-rpg-explore{font-size:13px;min-height:44px;padding:10px 16px;}
/* Reduced visual noise around the now-illustrated scene. */
.gg-rpg-v2 #gg-view-home .gg-rpg-intro .gg-rpg-intro-glow{opacity:.26;}
@media(max-width:600px){
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro{min-height:212px;max-height:none;}
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro-content{padding:11px 12px;}
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro::before{background-position:center 45%;}
}
@media(max-width:360px){
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro{min-height:100px;max-height:106px;}
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro-content{padding:6px 8px;}
 .gg-rpg-v2 #gg-view-home .gg-rpg-intro .gg-rpg-explore{min-height:35px;padding:6px 9px;font-size:10px;}
}