/* Illustrated title screen and animated character selection. */
#welcome.welcome{position:absolute;inset:0;z-index:60;display:block;padding:0;background:#082d34;color:#fff4d1;overflow:auto;isolation:isolate}
.menu-cover{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:66% center;z-index:-3}
#welcome:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#042b36ba 0%,#042b3655 45%,transparent 75%),linear-gradient(0deg,#062d36cc,transparent 40%);z-index:-2;pointer-events:none}
.menu-grain{position:absolute;inset:0;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 48% 48%,#052c3588,transparent 40%)}
.menu-top{position:absolute;left:5.5%;right:3%;top:3.5%;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:2px;font-weight:bold;color:#d6e8d2;z-index:2}
.menu-sound{display:flex;align-items:center;gap:10px;letter-spacing:0;font-weight:normal}
.menu-sound button{border:1px solid #ffe2a155;background:#133c43b0;color:#ffe4a3;border-radius:50%;width:43px;height:43px;font-size:24px;box-shadow:0 3px 20px #071f2d66}
.menu-sound button[data-playing=true]{box-shadow:0 0 0 4px #eac16a18,0 0 20px #ffe29936}
.menu-body{position:relative;width:100%;height:100%;min-height:560px}
#welcome .menu-logo{position:absolute;left:5.5%;top:17%;width:33%;font-family:Georgia,'Times New Roman',serif;font-size:clamp(32px,3.5vw,72px);line-height:.97;letter-spacing:-1.8px;margin:0;font-weight:bold;color:#fff3cf;text-shadow:0 3px 0 #183d3e,0 6px 24px #00182088}
.menu-logo>span{display:block;font-size:1.43em;color:#ffd57d;letter-spacing:-3px;line-height:1.05}
.menu-logo>small{font:italic .34em Georgia,serif;color:#ffd57d;letter-spacing:1px;display:block;margin:0 0 18px}
#welcome .menu-tagline{position:absolute;left:5.5%;top:44%;width:25%;font-size:clamp(12px,1.1vw,19px);color:#cfe1d5;line-height:1.7;margin:0;text-shadow:0 1px 4px #062b39}
.character-selector{position:absolute;left:48%;top:12%;transform:translateX(-50%);width:min(500px,43vw);text-align:center}
.start-costume-label{display:flex;justify-content:center;align-items:center;gap:18px;margin-bottom:0;font-size:11px;font-weight:bold;color:#f5d898;letter-spacing:1.7px;text-transform:uppercase}
#character-count{font-size:10px;letter-spacing:1px;color:#aec9bd;font-weight:normal}
.character-carousel{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:49vh;max-height:630px;min-height:260px}
.character-stage{position:relative;height:100%;width:calc(100% - 90px);padding:0;border:0;border-radius:40%;background:transparent;color:#f8dfac}
.character-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1;pointer-events:none}
#character-fallback{position:absolute;left:25%;top:15%;width:50%;height:72%;object-fit:contain;pointer-events:none}
.character-halo{position:absolute;left:0;right:0;top:22%;bottom:5%;border-radius:50%;background:radial-gradient(ellipse,var(--hero-color,#e0cb7e),transparent 65%);opacity:.2;filter:blur(15px);pointer-events:none}
.character-stage:after{content:'';position:absolute;left:12%;right:12%;bottom:10%;height:8%;border:1px solid #e6c57c88;border-radius:50%;box-shadow:0 0 22px #f7c66f33,inset 0 0 18px #f7c66f22;pointer-events:none}
.character-demo-hint{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);font-size:12px;color:#e4d09a;opacity:.8}
.character-arrow{position:relative;flex:none;width:44px;height:54px;border-radius:14px;border:1px solid #ffe2a188;background:linear-gradient(#38605ce6,#153c42ef);color:#ffe3a6;font-size:23px;box-shadow:0 5px 18px #001f2f77;z-index:2}
.character-arrow:hover{transform:scale(1.08)}
.character-info{margin:-1vh auto 0;width:100%;max-width:390px;min-height:100px;text-shadow:0 2px 7px #001d29}
.character-info h3{font:700 clamp(22px,2.2vw,38px)/1.1 Georgia,serif;color:#ffe3a0;margin:0 0 8px}
.character-info strong{display:block;font-size:11px;color:#f0d593;letter-spacing:1px;text-transform:uppercase}
#welcome .character-info p{color:#e1eade;font-size:13px;line-height:1.55;margin:8px auto 0;max-width:350px}
.character-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.character-dots i{width:5px;height:5px;border-radius:50%;background:#9db7ae77}
.character-dots i.active{width:18px;border-radius:4px;background:#fbd381;box-shadow:0 0 10px #ffcf7655}
.menu-play-row{position:absolute;left:48%;bottom:7%;transform:translateX(-50%);display:flex;justify-content:center}
#welcome .menu-play{display:flex;align-items:center;justify-content:space-between;gap:55px;background:linear-gradient(#ffe5a2,#edb85d);color:#233f40;border:1px solid #ffe8ab;border-bottom:5px solid #a86d28;border-radius:17px;font-size:24px;font-weight:bold;padding:14px 28px;min-width:215px;box-shadow:0 6px 28px #091f2b66;margin:0}
#welcome .menu-play:disabled{opacity:.65;filter:saturate(.55)}
.menu-bottom{position:absolute;bottom:2.8%;left:5.5%;right:3%;display:flex;gap:20px;font-size:10px;color:#b9cec5;align-items:center;flex-wrap:wrap}
.menu-bottom a{color:#deca99;text-underline-offset:3px;margin-left:auto}
.menu-spark{position:absolute;left:80%;top:43%;font-size:18px;color:#ffdc8b;pointer-events:none;animation:menu-spark 5s ease-in-out infinite}
@keyframes menu-spark{0%,100%{opacity:.3;transform:translateY(0) scale(.7)}50%{opacity:1;transform:translateY(-20px) scale(1)}}
@media(min-aspect-ratio:2/1){.character-carousel{height:46vh;min-height:180px}.character-selector{top:10%;width:min(450px,34vw)}.character-info{min-height:80px}.character-info h3{font-size:28px}.menu-play-row{bottom:8%}#welcome .menu-logo{font-size:7vh}.menu-logo>small{font-size:.3em}.menu-top{top:2%}}
@media(max-width:850px){.menu-top{font-size:8px;left:4%}.menu-sound>span{display:none}#welcome .menu-logo{left:4%;font-size:4vw;top:18%;width:31%}.menu-logo>small{font-size:.35em;line-height:1.4}.menu-logo>span{letter-spacing:-1px}#welcome .menu-tagline{left:4%;width:25%;font-size:11px;top:40%}.character-selector{left:49%;width:45vw}.character-carousel{height:46vh}.character-arrow{width:36px;height:46px;font-size:18px}.character-stage{width:calc(100% - 72px)}.character-info h3{font-size:24px}#welcome .character-info p{font-size:11px}.character-info strong{font-size:9px}.start-costume-label{font-size:9px;letter-spacing:1px}.menu-bottom{left:4%;font-size:8px;gap:10px}.menu-play-row{left:49%}#welcome .menu-play{font-size:20px;min-width:180px;padding:11px 22px}}
@media(max-aspect-ratio:1/1){.menu-body{min-height:700px}.menu-cover{height:60%;object-position:75% center}#welcome:before{background:linear-gradient(0deg,#082e38 38%,#082e3877 66%,transparent)}#welcome .menu-logo{top:10%;left:5%;width:45%;font-size:5.7vw}.menu-logo>small{display:none}#welcome .menu-tagline{display:none}.character-selector{top:27%;left:50%;width:min(490px,84vw)}.character-carousel{height:38vh;min-height:250px;max-height:430px}.character-info{min-height:100px}.character-info h3{font-size:27px}#welcome .character-info p{font-size:12px;max-width:300px}.character-info strong{font-size:10px}.menu-play-row{left:50%;bottom:8%}.menu-bottom{bottom:2%;font-size:8px}.menu-bottom span:first-child{display:none}.menu-spark{display:none}.start-costume-label{font-size:11px}}
@media(max-height:540px) and (orientation:landscape){.menu-body{min-height:320px}.menu-top{top:2%;font-size:8px}.menu-sound button{width:32px;height:32px;font-size:19px}#welcome .menu-logo{font-size:6.5vh;top:22%}.menu-logo>small{display:none}#welcome .menu-tagline{top:57%;font-size:10px}.character-selector{top:10%;width:38vw}.character-carousel{min-height:130px;height:44vh}.character-arrow{width:30px;height:38px;font-size:16px}.character-stage{width:calc(100% - 60px)}.character-info{min-height:65px}.character-info h3{font-size:20px;margin-bottom:5px}.character-info strong{font-size:8px}#welcome .character-info p{font-size:10px;margin-top:4px}.character-dots{margin-top:5px}.start-costume-label{font-size:8px}.menu-play-row{bottom:8%}#welcome .menu-play{font-size:16px;min-width:145px;padding:7px 18px;border-bottom-width:3px}.menu-bottom{bottom:2%;font-size:8px}}
@media(prefers-reduced-motion:reduce){.menu-spark{animation:none}.character-arrow{transition:none}}

/* Final composition: large character selector left, family title right. */
#welcome .menu-logo{left:57%;top:12%;width:39%;text-align:center;font-size:clamp(36px,4vw,88px);z-index:1}
#welcome .menu-tagline{left:61%;top:43%;width:31%;text-align:center;font-size:clamp(12px,1.1vw,20px);color:#fff0c9;text-shadow:0 2px 7px #001b24,0 0 24px #001b24}
.character-selector{left:25%;top:8.5%;width:min(650px,46vw)}
.character-carousel{height:60vh;min-height:300px;max-height:none}
.character-stage{width:calc(100% - 108px)}
.character-arrow{width:52px;height:64px;font-size:28px}
.character-stage:after{left:18%;right:18%;bottom:8%;height:5%}
.character-demo-hint{bottom:5%}
.character-info{margin:-1vh auto 0;min-height:84px;max-width:450px}
.character-info h3{font-size:clamp(25px,2.1vw,42px)}
.character-dots{margin-top:8px}
.menu-play-row{left:25%;bottom:6.7%}
.menu-grain{background:radial-gradient(ellipse at 24% 48%,#052c3599,transparent 47%)}
#welcome:before{background:linear-gradient(90deg,#042b36aa, #042b3622 48%,transparent 70%),linear-gradient(0deg,#062d36cc,transparent 35%),linear-gradient(180deg,#042b3655,transparent 39%)}
@media(min-aspect-ratio:2/1){#welcome .menu-logo{font-size:8vh}.character-selector{top:7%}.character-carousel{height:62vh;min-height:180px}.character-info{min-height:70px}.character-info h3{font-size:26px}.character-info p{font-size:11px!important}.menu-play-row{bottom:6%}}
@media(max-width:850px) and (min-aspect-ratio:1/1){#welcome .menu-logo{left:56%;top:16%;width:40%;font-size:4.4vw}#welcome .menu-tagline{left:60%;top:46%;width:33%;font-size:11px}.character-selector{left:25%;width:48vw}.character-carousel{height:62vh;min-height:200px}.character-arrow{width:36px;height:48px;font-size:20px}.character-stage{width:calc(100% - 74px)}.character-info{min-height:75px}.character-info h3{font-size:24px}.menu-play-row{left:25%;bottom:6.5%}}
@media(max-aspect-ratio:1/1){#welcome .menu-logo{left:47%;top:14%;width:49%;font-size:5vw}#welcome .menu-tagline{display:none}.character-selector{left:27%;top:26%;width:54vw}.character-carousel{height:43vh;min-height:265px;max-height:460px}.character-arrow{width:30px;height:44px;font-size:18px}.character-stage{width:calc(100% - 56px)}.character-info h3{font-size:23px}#welcome .character-info p{font-size:11px}.character-info{width:130%;margin-left:-15%;min-height:100px}.menu-play-row{left:27%;bottom:8%}.menu-cover{height:100%;object-position:64% center}#welcome:before{background:linear-gradient(90deg,#042b36cc,transparent),linear-gradient(0deg,#082e38 6%,transparent 58%)}.start-costume-label{font-size:9px;gap:8px}#welcome .menu-play{min-width:155px;font-size:20px;padding:11px 18px}}
@media(max-width:550px) and (orientation:portrait){.menu-body{min-height:720px}.character-selector{left:28%;width:56vw;top:25%}.character-carousel{height:40vh;min-height:285px}.character-arrow{width:25px;height:38px;font-size:16px}.character-stage{width:calc(100% - 46px)}.character-info h3{font-size:20px}.character-info strong{font-size:9px}.character-dots{margin-top:15px}.menu-play-row{left:28%;bottom:8%}.character-info{width:145%;margin-left:-22.5%}.menu-logo>span{letter-spacing:-1px}}
@media(max-height:540px) and (orientation:landscape){.character-selector{top:8%;width:42vw}.character-carousel{height:58vh;min-height:150px}.character-arrow{width:30px;height:40px;font-size:18px}.character-stage{width:calc(100% - 60px)}.character-info{min-height:57px}.character-info h3{font-size:20px}.character-info strong{font-size:8px}#welcome .character-info p{font-size:10px;margin-top:4px}.menu-play-row{bottom:6%}#welcome .menu-logo{top:17%;font-size:7.7vh}.character-dots{margin-top:3px}#welcome .menu-tagline{top:55%;font-size:11px}.character-stage:after{display:none}}
/* Center the game heading more closely to the middle of the family scene. */
.menu-top>span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;text-align:center}
.menu-top{justify-content:flex-end}
#welcome .menu-logo{left:44%;top:24%;width:48%}
#welcome .menu-tagline{left:48%;top:56%;width:40%}
@media(min-aspect-ratio:2/1){#welcome .menu-logo{top:22%}#welcome .menu-tagline{top:59%}}
@media(max-width:850px) and (min-aspect-ratio:1/1){#welcome .menu-logo{left:47%;top:26%;width:49%}#welcome .menu-tagline{left:49%;top:58%;width:46%}.menu-top>span{font-size:8px;letter-spacing:1px}}
@media(max-aspect-ratio:1/1){#welcome .menu-logo{left:45%;top:21%;width:52%}.menu-top>span{font-size:8px;letter-spacing:1px;left:47%}}
@media(max-height:540px) and (orientation:landscape){#welcome .menu-logo{top:25%}#welcome .menu-tagline{top:63%}}

.menu-top{left:0;right:0;padding:0 3%}.menu-top>span{left:50%}