/* The welcome screen has its own layout; quiz and badge styles remain independent. */
body[data-screen=home] { background:#04204b; }
body[data-screen=home] .backdrop { background:linear-gradient(#0423508a,#031835d9),url('./images/home-village.webp') center/cover; }
body[data-screen=home] .backdrop::after { display:none; }
body[data-screen=home] .app-shell { width:100%; max-width:480px; padding:0; min-height:100svh; background:#052858; box-shadow:0 0 70px #00102ab3; }
body[data-screen=home] .topbar, body[data-screen=home] footer { display:none; }
body[data-screen=home] main { padding:0; min-height:0; }
body[data-screen=home] #notice:not(:empty) { padding:8px 12px; }
.welcome-page { container-type:inline-size; min-height:100svh; display:flex; flex-direction:column; background:radial-gradient(ellipse at 50% 55%,#0a3871,#05234f 80%); color:#fff; font-family:'Trebuchet MS',Arial,sans-serif; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.welcome-page *, .welcome-page *::before, .welcome-page *::after { box-sizing:border-box; }
.welcome-page :where(button,a) { -webkit-tap-highlight-color:transparent; font:inherit; color:inherit; cursor:pointer; text-decoration:none; }
.welcome-page button { border:0; }
.welcome-page svg { display:block; flex-shrink:0; width:24px; height:24px; }
.welcome-page :is(button,a):focus-visible { outline:3px solid #fff2a3; outline-offset:3px; }
.welcome-hero { position:relative; isolation:isolate; height:clamp(214px,30svh,286px); flex-shrink:0; display:flex; flex-direction:column; padding-top:env(safe-area-inset-top); overflow:hidden; }
.welcome-landscape { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:64% 57%; }
.welcome-hero::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(#03265222 0%,#03265200 63%,#052858 100%); }
.welcome-top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 16px 0; }
.welcome-greeting { background:#05244a6b; border-radius:12px; padding:5px 9px; margin-left:-5px; min-height:44px; font-weight:700!important; font-size:clamp(14px,4cqw,18px)!important; text-align:left; line-height:1.15; max-width:calc(100% - 52px); overflow-wrap:anywhere; text-shadow:0 1px 4px #03254a; }
.welcome-sound { display:grid; place-items:center; width:44px; height:44px; flex:0 0 44px; border-radius:50%; background:#052858d9; box-shadow:inset 0 1px 1px #ffffff36; }
.welcome-sound svg { width:25px; height:25px; }
.welcome-brand { text-align:center; text-shadow:0 2px 6px #03254ae0; margin-top:-4px; }
.welcome-crest { filter:drop-shadow(0 3px 4px #02224da6); margin:0 auto 6px; width:34px; }
.welcome-crest svg { width:34px; height:38px; }
.welcome-brand h1 { margin:0; font-size:clamp(28px,8.5cqw,41px); font-family:'Trebuchet MS',Arial,sans-serif; font-weight:900; letter-spacing:.012em; line-height:1.12; color:#fff; }
.welcome-brand p { margin:3px 0 8px; font-size:clamp(14px,4.3cqw,20px); line-height:1.2; color:#e4edff; }
.welcome-tricolor { display:block; width:84px; height:3px; margin:auto; background:linear-gradient(90deg,#165fc7 33.33%,#fff 33.33% 66.66%,#ff385a 66.66%); }
.welcome-catalog { margin:auto 8px 9px; text-align:center; color:#e2ebff; text-shadow:0 2px 3px #03224f; font-size:clamp(12px,3.65cqw,16px); line-height:1.4; }
.welcome-content { display:grid; gap:11px; padding:0 max(14px,env(safe-area-inset-right)) 14px max(14px,env(safe-area-inset-left)); }
.welcome-actions { display:grid; gap:10px; }
.welcome-action { position:relative; display:flex; align-items:center; gap:16px; padding:12px 16px; min-height:clamp(75px,10.2svh,92px); border-radius:17px; text-align:left; border:1px solid #45ead4!important; box-shadow:inset 0 1px 2px #c1fff799,0 5px 12px #000e2652; transition:filter .15s,transform .15s; }
.welcome-action:hover { filter:brightness(1.08); }
.welcome-action:active { transform:translateY(1px); }
.welcome-solo { background:linear-gradient(150deg,#13c6b0,#009b8b 60%,#007d71); }
.welcome-duo { background:linear-gradient(155deg,#168aff,#0064e4 65%,#0053c6); border-color:#40afff!important; }
.welcome-action-icon { width:49px; height:49px; display:grid; place-items:center; flex:0 0 49px; filter:drop-shadow(0 3px 3px #00345b60); }
.welcome-solo .welcome-action-icon { border-radius:50%; border-top:2px solid #90fff0; background:linear-gradient(145deg,#31d7c0,#00a99c); box-shadow:0 3px 5px #0052466b; }
.welcome-action-icon svg { width:38px; height:38px; }
.welcome-solo .welcome-action-icon svg { width:29px; height:29px; }
.welcome-action-copy { flex:1; min-width:0; }
.welcome-action-copy strong { display:block; font-weight:800; font-size:clamp(21px,6.05cqw,29px); line-height:1.1; text-shadow:0 1px 1px #03447230; }
.welcome-action-copy span { display:block; margin-top:5px; font-size:clamp(13px,4cqw,18px); line-height:1.2; color:#f1fffc; }
.welcome-action>svg { width:23px; height:30px; stroke-width:3; }
.welcome-resume { padding:7px 9px; min-height:44px; background:#083465; border:1px solid #76c9fc!important; border-radius:11px; font-size:14px!important; }
.welcome-challenges { padding:11px 12px; border:1px solid #426cad; border-radius:16px; background:linear-gradient(125deg,#0b305b,#061d42); box-shadow:inset 0 1px 1px #92caff22,0 3px 10px #00183b40; }
.welcome-section-heading { display:flex; align-items:center; gap:9px; margin-bottom:9px; }
.welcome-section-heading svg { width:21px; height:21px; }
.welcome-section-heading h2 { margin:0; font-size:20px; line-height:1.2; color:#fff; }
.welcome-tabs { display:grid; grid-template-columns:1fr 1fr; border:1px solid #395d8f; border-radius:12px; background:#082247; }
.welcome-tab { min-height:44px; padding:7px 5px; border-radius:11px; background:transparent; font-size:15px!important; font-weight:700!important; color:#c3d3ec!important; line-height:1.2; }
.welcome-tab[aria-selected=true] { color:#fff!important; background:linear-gradient(#238ffe,#0062e4); box-shadow:inset 0 1px 2px #98d9ff,0 2px 4px #000e2640; }
.welcome-mission { display:flex; align-items:center; gap:15px; padding-top:11px; min-height:101px; }
.welcome-mission[hidden] { display:none; }
.welcome-trophy { position:relative; display:grid; place-items:center; flex:0 0 82px; height:82px; overflow:hidden; border-radius:50%; border:2px solid #89cdff; background:radial-gradient(circle at 50% 45%,#d5b85890,transparent 70%),linear-gradient(#0a306322,#07255666),url('./images/home-village.webp') 60% 85%/200% auto; }
.welcome-trophy svg { width:63px; height:70px; filter:drop-shadow(0 2px 2px #603f15); }
.welcome-mission-copy { min-width:0; flex:1; }
.welcome-mission-copy h3 { margin:0 0 4px; font-size:clamp(16px,4.5cqw,20px); line-height:1.15; color:#fff; }
.welcome-mission-copy p { margin:0 0 8px; font-size:clamp(12px,3.5cqw,15px); line-height:1.3; color:#d2e0f7; overflow-wrap:anywhere; }
.welcome-challenge-cta { display:inline-flex; align-items:center; justify-content:space-between; gap:10px; min-height:44px; padding:8px 13px; background:linear-gradient(125deg,#ffd748,#ffe57e 45%,#efb827); color:#30240d!important; font-weight:800!important; font-size:15px!important; border-radius:13px; box-shadow:inset 0 1px 1px #fff4ba,0 3px 0 #ad7d1c; text-align:left; line-height:1.15; }
.welcome-challenge-cta svg { width:18px; height:21px; stroke-width:3; }
.welcome-journey { display:flex; align-items:center; gap:8px; min-height:86px; padding:10px 11px; border:1px solid #3c659c!important; border-radius:15px; background:linear-gradient(120deg,#0b2d56,#051d40); text-align:left; box-shadow:inset 0 1px 1px #c4e6ff1a; }
.welcome-medals { width:47%; height:auto; flex-shrink:0; object-fit:contain; filter:drop-shadow(0 2px 4px #0008); }
.welcome-journey-copy { min-width:0; flex:1; padding-left:8px; border-left:1px solid #426393; }
.welcome-journey-copy strong { display:block; font-size:clamp(15px,4.15cqw,19px); line-height:1.2; }
.welcome-journey-copy span { display:block; margin-top:5px; color:#cadbf5; font-size:clamp(11px,3.2cqw,14px); line-height:1.3; }
.welcome-journey>svg { width:15px; height:24px; stroke-width:3; }
.welcome-nav { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:auto; border-top:1px solid #41699b; background:#041d3ee6; padding:8px max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
.welcome-nav-item { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; min-height:55px; padding:3px 3px 9px; background:transparent; color:#b8cdeb!important; font-size:14px!important; line-height:1.2; }
.welcome-nav-item svg { width:25px; height:25px; }
.welcome-nav-item[aria-current] { color:#fff!important; font-weight:700!important; }
.welcome-nav-item[aria-current] svg { color:#3da7ff; }
.welcome-nav-item[aria-current]::after { content:''; position:absolute; bottom:0; width:44px; height:3px; border-radius:3px; background:#389bff; }
/* Themes retain their original artwork, now without the activity dashboard. */
body[data-screen=themes] .home-title { padding-top:max(70px,calc(env(safe-area-inset-top) + 60px)); padding-bottom:18px; }
body[data-screen=themes] .home-title h1 { width:auto; margin:0 0 7px; font-size:clamp(25px,7.5cqw,35px); line-height:1.15; letter-spacing:0; white-space:normal; filter:none; text-shadow:0 2px 3px #032450; }
body[data-screen=themes] .home-title p { font-size:15px; font-weight:400; }
body[data-screen=themes] .themes-tools { display:flex; gap:8px; padding:8px 0; }
body[data-screen=themes] .themes-tools button { flex:1; font-size:13px; padding:8px 4px; min-height:44px; color:#fff; background:#05274bd9; border:1px solid #a3c8e5; border-radius:9px; }
@media(max-height:740px) {
  .welcome-hero { height:clamp(145px,23svh,170px); }
  .welcome-top { padding-top:5px; }
  .welcome-brand { margin-top:-9px; }
  .welcome-crest { margin-bottom:2px; width:26px; }
  .welcome-crest svg { width:26px; height:29px; }
  .welcome-brand h1 { font-size:clamp(27px,8cqw,38px); }
  .welcome-brand p { margin-bottom:5px; }
  .welcome-catalog { margin-bottom:6px; }
  .welcome-content { gap:8px; padding-bottom:8px; }
  .welcome-actions { gap:6px; }
  .welcome-action { min-height:69px; padding:9px 13px; }
  .welcome-action-icon { width:43px; height:43px; flex-basis:43px; }
  .welcome-challenges { padding:7px 10px; }
  .welcome-section-heading { margin-bottom:4px; }
  .welcome-section-heading h2 { font-size:18px; }
  .welcome-mission { padding-top:6px; min-height:88px; gap:11px; }
  .welcome-mission-copy p { font-size:12px; line-height:1.2; margin-bottom:6px; }
  .welcome-trophy { flex-basis:73px; height:73px; }
  .welcome-trophy svg { width:56px; height:64px; }
  .welcome-journey { min-height:73px; padding:8px 10px; }
  .welcome-nav { padding-top:4px; padding-bottom:max(4px,env(safe-area-inset-bottom)); }
  .welcome-nav-item { min-height:48px; padding-bottom:5px; }
}
@media(max-width:359px) {
  .welcome-content { padding-left:10px; padding-right:10px; }
  .welcome-action { gap:10px; padding-left:11px; padding-right:10px; }
  .welcome-action-copy strong { font-size:21px; }
  .welcome-action-copy span { font-size:12px; }
  .welcome-tab { font-size:13px!important; }
  .welcome-trophy { flex-basis:62px; height:62px; }
  .welcome-trophy svg { width:48px; height:54px; }
  .welcome-challenge-cta { font-size:13px!important; padding-left:10px; padding-right:8px; }
  .welcome-journey { gap:6px; }
  .welcome-journey-copy { padding-left:7px; }
  .welcome-medals { width:45%; }
}