#menuZoomControls{position:fixed;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));z-index:310;display:flex;align-items:center;gap:5px;padding:5px 7px;background:#0d202bed;border:1px solid #b59c65;border-radius:9px;box-shadow:0 4px 18px #0006;color:#e4d2a8;font-size:11px}#menuZoomControls[hidden]{display:none}#menuZoomControls button{min-width:40px;min-height:38px;border:1px solid #a68f5c66;border-radius:5px;background:#253a43;color:#f4dfb3;font-size:17px;padding:5px 8px;touch-action:manipulation}#menuZoomControls #menuZoomReset{font-size:12px}#menuZoomControls output{min-width:38px;text-align:center;font-variant-numeric:tabular-nums}#menuZoomControls button:disabled{opacity:.35}body:not(.playing){touch-action:pan-y pinch-zoom}body:not(.playing) #rotateNotice{display:none!important}
#titleScreen{display:block;padding:78px max(18px,env(safe-area-inset-right)) 70px max(18px,env(safe-area-inset-left));overflow-y:auto;overflow-x:hidden;touch-action:pan-y pinch-zoom;-webkit-overflow-scrolling:touch}#titleScreen.hide{display:none}.landingContent{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;width:min(920px,calc(100% / var(--menuZoom,1)));margin:0 auto;min-height:calc((100dvh - 158px) / var(--menuZoom,1))}#titleScreen .landingLogo{margin:0;flex:none}.landingContent .landingLogo h1{font-size:clamp(38px,8vw,104px);margin:18px 0;line-height:1.05}.landingContent .landingLogo p{font-size:12px;line-height:1.8;letter-spacing:2px}.landingContent .landingLogo .eyebrow{font-size:10px;letter-spacing:3px}#titleScreen #beginJourney{margin:0;width:350px;max-width:100%;min-height:48px;flex:none;padding:14px 18px;font-size:14px}#titleScreen #accountBox{position:static!important;inset:auto!important;transform:none!important;z-index:auto;width:min(380px,100%);max-width:100%!important;margin:0;padding:14px 16px;box-sizing:border-box;flex:none;font-size:12px;line-height:1.7;overflow-wrap:anywhere}#googleSignIn{max-width:100%;min-height:44px}#titleScreen:before{position:fixed;z-index:-1}#characterScreen{padding-top:66px;touch-action:pan-y pinch-zoom}#selectionZoomContent{width:calc(100% / var(--menuZoom,1));min-height:calc((100dvh - 66px) / var(--menuZoom,1));margin:0 auto}#characterScreen[hidden]{display:none}
@media(max-width:600px){#menuZoomControls{left:auto;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));gap:4px}#menuZoomControls>span{font-size:10px}#menuZoomControls button{min-height:40px;min-width:40px}.landingContent{gap:20px}.landingContent .landingLogo h1{font-size:44px;letter-spacing:3px}.landingContent .landingLogo h1 em{display:block;margin-top:5px}.landingContent .landingLogo p{font-size:11px;letter-spacing:1px}#titleScreen #accountBox{padding:12px 10px}#titleScreen #beginJourney{font-size:13px;letter-spacing:1px}#selectionZoomContent .selectionHeader{margin:0 14px}#selectionZoomContent .selectionLayout{padding:12px 14px}#selectionZoomContent .selectionDetails{min-width:0;width:100%;max-width:100%}}
@media(orientation:landscape) and (max-height:500px){#titleScreen{padding-top:66px;padding-bottom:54px}.landingContent{gap:12px;min-height:0}.landingContent .landingLogo h1{font-size:40px;margin:6px 0}.landingContent .landingLogo .eyebrow{font-size:8px}.landingContent .landingLogo p{margin:4px 0;font-size:10px}#titleScreen #beginJourney{min-height:44px;padding:10px 16px}#titleScreen #accountBox{padding:10px 14px}#characterScreen{padding-top:62px}}
/* CSS zoom already adjusts the available containing width. Avoid applying the inverse twice. */
.landingContent{width:min(920px,100%)}#selectionZoomContent{width:100%}