/* Welcome instructions: compact on phones, scrollable for short screens or zoom. */
#welcomeOverlay .welcomeFacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
#welcomeOverlay .welcomeFacts>div{display:grid;justify-items:center;align-content:center;gap:5px;padding:11px 6px;border:1px solid #79d4c840;border-radius:9px;background:var(--panel2);text-align:center}
#welcomeOverlay .welcomeFacts b{font-size:25px;line-height:1;color:var(--accent)}
#welcomeOverlay .welcomeFacts span{font-size:12px;line-height:1.3;font-weight:800;color:var(--text)}
#welcomeOverlay .welcomeSteps{display:grid;gap:12px;list-style:none;counter-reset:welcome-step;padding:0;margin:0}
#welcomeOverlay .welcomeSteps li{counter-increment:welcome-step;display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start}
#welcomeOverlay .welcomeSteps li::before{content:counter(welcome-step);display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;background:var(--accent);color:#281b25;font-size:12px;font-weight:950}
#welcomeOverlay .welcomeSteps strong{color:var(--text)}
#welcomeOverlay .welcomeScoreNote{padding:10px 12px;border-left:3px solid var(--accent2);border-radius:0 7px 7px 0;background:var(--panel2)}
#welcomeOverlay .welcomeScoreNote strong{color:var(--accent2);white-space:nowrap}
#welcomeOverlay .welcomeModal{padding:24px!important;max-height:calc(100dvh - 32px)!important;overflow-y:auto!important;overscroll-behavior:contain}
#welcomeOverlay .welcomeQuickStart{gap:14px!important;margin:14px 0 16px!important}
#welcomeOverlay .welcomeCopy p{line-height:1.4!important}
#welcomeOverlay .welcomeTutorialPrompt{margin:12px 0 10px!important}
#welcomeOverlay .welcomeActions{gap:10px!important}
#welcomeOverlay .welcomeRemember{margin:12px 0!important}
@media(max-width:800px){
 #welcomeOverlay{padding:8px 10px!important;align-items:center!important}
 #welcomeOverlay .welcomeModal{padding:14px!important;max-height:calc(100dvh - 16px)!important}
 #welcomeOverlay .welcomeLogo.wordDecksImageLogo{width:min(260px,70vw)!important;margin:0 auto 6px!important}
 #welcomeOverlay .welcomeQuickStart{gap:9px!important;margin:6px 0 8px!important}
 #welcomeOverlay .welcomeFacts{gap:6px}
 #welcomeOverlay .welcomeFacts>div{gap:3px;padding:7px 4px}
 #welcomeOverlay .welcomeFacts b{font-size:23px}
 #welcomeOverlay .welcomeFacts span{font-size:11px;line-height:1.2}
 #welcomeOverlay .welcomeSteps{gap:8px}
 #welcomeOverlay .welcomeCopy p{font-size:14px!important;line-height:1.3!important}
 #welcomeOverlay .welcomeScoreNote{padding:7px 9px}
 #welcomeOverlay .welcomeTutorialPrompt{margin:8px 0!important;padding:7px 9px!important}
 #welcomeOverlay .welcomeTutorialPrompt strong{font-size:11px!important}
 #welcomeOverlay .welcomeTutorialPrompt span{font-size:12px!important;line-height:1.3!important}
 #welcomeOverlay .welcomeRemember{margin:8px 0!important;font-size:12px!important}
 #welcomeOverlay .welcomeActions{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
 #welcomeOverlay .welcomeActions button{min-height:44px!important;padding:7px 8px!important;font-size:12px!important;line-height:1.15!important}
 #welcomeOverlay #welcomeTutorial,#welcomeOverlay #welcomePlay{grid-column:auto!important}
}
@media(max-width:360px), (max-width:800px) and (max-height:640px){
 #welcomeOverlay .welcomeLogo.wordDecksImageLogo{width:min(220px,65vw)!important}
 #welcomeOverlay .welcomeModal{padding:12px!important}
 #welcomeOverlay .welcomeQuickStart{gap:7px!important}
 #welcomeOverlay .welcomeCopy p{font-size:13px!important}
}

/* Keep the final-score rule prominent within the compact welcome layout. */
#welcomeOverlay .welcomeScoreNote{border:1px solid var(--accent2);border-left-width:4px;border-radius:9px;padding:12px 14px}
#welcomeOverlay .welcomeScoreNote strong{display:block;white-space:normal;font-weight:900;color:var(--accent2)}
#welcomeOverlay .welcomeScoreNote span{display:block;margin-top:5px;color:var(--text)}