/* Illustration and interface are separate: all text and actions are live HTML. */
body{background:#06152e;color:#f5f9ff}header{position:relative;z-index:2;background:#06162d;border-bottom:1px solid #6bd7ff;box-shadow:0 5px 24px #0004}
.hero{display:grid;grid-template-columns:minmax(170px,.8fr) minmax(300px,1.3fr) minmax(240px,.9fr);gap:clamp(14px,2vw,30px);padding:55px 3%;min-height:630px;overflow:visible;background:radial-gradient(ellipse at 22% 15%,#164786,transparent 60%),radial-gradient(ellipse at 85% 65%,#17466a,transparent 55%),#06152e;isolation:isolate}
.hero:after{content:none}.hero .mascot{position:static;align-self:center;width:100%;height:auto;background:none;opacity:1;filter:drop-shadow(0 0 30px #339fe233)}
.hero-content{margin:0;padding:12px;text-align:left;background:none;text-shadow:none;max-width:none}.hero h1{font-size:clamp(34px,3.8vw,65px);line-height:1.1}.hero h1 em{color:#ffdc88;font-style:normal}.hero .actions{display:grid;gap:13px}.hero .button{display:flex;justify-content:center;align-items:center;min-height:60px;text-align:center;box-shadow:inset 0 0 0 3px #ffffff10,0 6px 18px #0004}
.mission-console{padding:24px 20px;border:2px solid #68d5ff;border-radius:26px;background:linear-gradient(145deg,#113c68,#061c36);box-shadow:inset 0 0 0 4px #51bcff12,0 10px 36px #0004;align-self:center}.mission-console h2{color:#ffdf96;font-size:clamp(20px,2vw,29px);margin-top:0}.mission-console>a{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:55px;padding:13px 0;border-bottom:1px solid #5dabce55;text-decoration:none}.mission-console>a:hover{color:#ffdf96}.mission-console>p,.disclaimer{line-height:1.5;color:#d3e7f8}.mission-note{font-size:.85rem}
.tile{border:1px solid #6bd7ff;background:linear-gradient(145deg,#15466f,#081d38);box-shadow:inset 0 0 0 3px #66cfff10}.tile strong{color:#ffe29d}.tile:hover{border-color:#ffdc88}
.login-scene{background:radial-gradient(ellipse at 20% 40%,#164786,transparent 65%),#06152e;min-height:calc(100vh - 110px)}.signin-mascot{float:left;width:min(48%,260px);height:auto;margin:0 22px 15px 0}.login-intro h1{font-size:clamp(32px,4vw,58px)}.login-panel{position:relative}.login-panel h2{color:#ffe29d}.roles{clear:both}
@media(max-width:1100px){.hero{grid-template-columns:minmax(180px,.7fr) minmax(280px,1.3fr)}.mission-console{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:0 24px}.mission-console h2,.mission-console>p{grid-column:1/-1}.hero{min-height:0}}
@media(max-width:650px){.hero{grid-template-columns:1fr;padding:25px 18px;gap:12px}.hero .mascot{width:min(70%,280px);justify-self:center}.hero-content{text-align:center;padding:0}.hero h1{font-size:clamp(32px,8vw,44px);margin-top:10px}.mission-console{grid-template-columns:1fr;width:100%}.hero .actions{width:100%}.signin-mascot{width:110px;margin-right:14px}.login-scene{padding:24px 16px}.login-intro>p{font-size:17px}.login-panel{padding:22px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* Derived clean scenery: forms and navigation remain semantic HTML. */
.mission-console{position:static;transform:none;width:auto}
.login-scene{grid-template-columns:minmax(0,1fr) minmax(320px,520px) minmax(0,1fr);gap:20px 0;padding:40px 3% 65px;align-content:center;background:linear-gradient(#04152b25,#04152b40),url('/assets/dev82-holographic/account-city-derived-v2.png') center/cover no-repeat;min-height:850px}
.login-intro{grid-column:2;text-align:center;background:#041a35eF;border:1px solid #65d8ff;border-radius:18px;padding:16px 20px;box-shadow:0 0 24px #16baff45}
.login-intro .signin-mascot{display:none}.login-intro h1{font-size:clamp(28px,3vw,44px);margin:8px 0}.login-intro>p{font-size:16px;line-height:1.5;margin:8px 0}.login-intro .roles{margin:12px 0 0;justify-content:center;gap:6px}.login-intro .roles span{padding:7px;font-size:12px}
.login-panel{grid-column:2;grid-row:2;max-width:520px;background:linear-gradient(145deg,#082b4ff5,#041429fa);border:2px solid #70dfff;box-shadow:0 0 0 4px #198dcf26,0 0 28px #11baff55;padding:28px}.login-panel h2{font-size:27px;margin:10px 0 20px}.login-panel .submit{background:#0864c9;color:#fff;min-height:54px}.login-panel label{color:#fff}.login-panel input{background:#061b38;color:#fff}.login-panel input::placeholder{color:#b6cadc;opacity:1}
@media(max-width:800px){.login-scene{grid-template-columns:1fr;padding:180px 16px 35px;background-size:auto 620px;background-position:center top;background-color:#06152e;min-height:0}.login-intro,.login-panel{grid-column:1;width:min(100%,520px);justify-self:center}.login-intro{align-self:end}.login-panel{padding:22px}}
body[data-v2-page=welcome] header{display:grid;grid-template-columns:minmax(250px,1fr) minmax(260px,1fr);gap:18px;padding:20px 3% 12px}body[data-v2-page=welcome] header nav{grid-column:1/-1;justify-content:center;border-top:1px solid #367da8;padding-top:12px}body[data-v2-page=welcome] header nav a{flex:1 1 auto;text-align:center;min-height:48px}.area-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;align-items:end;max-width:620px;width:100%;justify-self:end}.area-search label{grid-column:1/-1;font-size:13px;color:#d3e7f8}.area-search button{min-height:49px;border:1px solid #72dfff;border-radius:11px;background:#075ba4;color:#fff;padding:10px 18px;font-weight:700;cursor:pointer}#area-search-status{color:#d3e7f8;min-height:1.5em}#adventure-cards{scroll-margin-top:20px}@media(max-width:650px){body[data-v2-page=welcome] header{grid-template-columns:1fr}.area-search{justify-self:stretch}body[data-v2-page=welcome] header nav{justify-content:start;gap:6px}body[data-v2-page=welcome] header nav a{font-size:13px;padding:10px}}

/* The approved welcome composition includes a real Watch Video control. */
button[data-welcome-video]{font:inherit;cursor:pointer;color:#fff;background:linear-gradient(#087be0,#044985);border:2px solid #70dcff;border-radius:16px;box-shadow:0 5px 0 #032b50,0 0 18px #14bcff66;transition:transform .12s,box-shadow .12s}
button[data-welcome-video]:active{transform:translateY(3px);box-shadow:0 2px 0 #032b50}
button[data-welcome-video]:focus-visible,#welcome-video button:focus-visible{outline:3px solid #ffdf85;outline-offset:4px}
#welcome-video{width:min(900px,94vw);max-height:92vh;overflow:auto;border:2px solid #71dcff;border-radius:20px;padding:20px;background:#061b35;color:#f5f9ff;box-shadow:0 0 45px #18acff66}
#welcome-video::backdrop{background:#000b}.welcome-video-heading{display:flex;gap:16px;align-items:center;justify-content:space-between}.welcome-video-heading h2{font-size:clamp(18px,4vw,28px)}
#welcome-video video{display:block;width:100%;max-height:65vh;background:#000}#welcome-video button{min-height:44px;min-width:70px;font:inherit;padding:8px 14px;background:#0b548b;color:#fff;border:1px solid #77dfff;border-radius:10px;cursor:pointer}#welcome-video p{line-height:1.5;color:#d4e8fa}
@media(prefers-reduced-motion:reduce){button[data-welcome-video]{transition:none}}