#titleScreen{position:absolute;inset:0;z-index:100;overflow:hidden;isolation:isolate;color:#f4dfad;background:transparent}
#titleScreen[hidden],#titleScreen [hidden]{display:none!important}
.titleBackdrop{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#142d28f5 0,#193a31dc 24%,#1c3c3266 47%,transparent 70%)}
.titleStage{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:5vh 5vw 7vh;width:58%;pointer-events:none}
.titleBrand{width:100%;transform:rotate(-4deg);transform-origin:left center;margin:0 0 4.5vh;}
.titleKicker{font-size:clamp(10px,1vw,14px);letter-spacing:.16em;color:#c9d6b7;font-weight:700;margin:0 0 15px}
.titleLogo{font-size:clamp(56px,9.6vw,165px);font-weight:900;line-height:.91;margin:0;letter-spacing:-.06em;color:#f4dfad;white-space:nowrap;paint-order:stroke fill;-webkit-text-stroke:clamp(2px,.32vw,5px) #28392d;text-shadow:1px 3px 0 #a97940,3px 6px 0 #a97940,5px 9px 0 #28392d}
.titleLogo span{display:inline-block}
.titleLogo .titleWord{display:block;line-height:.86}
.titleWord:nth-child(2){margin-left:.12em;margin-top:-.06em}
.titleWord span:nth-child(2){rotate:-3deg;translate:0 -.025em}
.titleWord span:nth-child(3){rotate:2deg;translate:0 .025em}
.titleWord span:nth-child(5){rotate:4deg}
.titleWord span:nth-child(4){rotate:-2deg}
.titleSubtitle{font-size:clamp(25px,4vw,67px);font-weight:900;line-height:1.2;letter-spacing:-.015em;color:#ecae51;white-space:nowrap;margin:15px 0 0;paint-order:stroke fill;-webkit-text-stroke:2px #273b2d;text-shadow:2px 3px 0 #7d462c}
.titleTagline{font-size:clamp(11px,1.1vw,16px);font-weight:700;letter-spacing:.035em;color:#d4ddc5;margin:21px 0 0}
.titleNavigation{display:flex;flex-direction:column;align-items:stretch;width:clamp(180px,23vw,330px);gap:12px;pointer-events:auto}
#titleScreen .titleNavigation button{position:relative;text-align:left;min-height:51px;padding:13px 20px 13px 49px;background:#314f40;color:#f4dfad;font-size:clamp(15px,1.5vw,23px);border:2px solid #77947b;border-radius:7px 12px 7px 10px;box-shadow:0 4px 0 #142c25;}
#titleScreen .titleNavigation button:focus,#titleScreen .titleNavigation button:hover{background:#efbd70;color:#263d36;border-color:#f4dfad;box-shadow:0 4px 0 #98673b;outline:0}
#titleScreen .titleNavigation button:focus-visible{outline:3px solid #fff0c8;outline-offset:5px}
.pastaPointer{position:absolute;left:19px;top:50%;height:12px;width:12px;transform:translateY(-50%) rotate(-20deg);border:2px solid currentColor;border-radius:4px 7px 4px 7px;opacity:.4}
.titleNavigation button:focus .pastaPointer,.titleNavigation button:hover .pastaPointer{opacity:1;background:currentColor}
.titleInputHint{position:absolute;bottom:max(15px,env(safe-area-inset-bottom));left:5vw;right:5vw;text-align:left;font-size:11px;font-weight:700;letter-spacing:.025em;text-shadow:0 2px 0 #183329;margin:0;color:#d4ddc5;pointer-events:none}
.titleSceneNote{position:absolute;right:24px;bottom:20px;margin:0;font-size:10px;color:#f4dfad;letter-spacing:.08em;text-shadow:0 2px 0 #263d36}
.titlePanel{position:absolute;inset:0;display:grid;place-items:center;padding:22px;background:#17362bdc;backdrop-filter:blur(7px);overflow:auto}
.titlePanelCard{width:min(530px,100%);padding:30px;background:#29483a;border:2px solid #8e9e7d;box-shadow:0 7px 0 #102c22;border-radius:10px 16px 9px 13px;display:flex;flex-direction:column;gap:12px}
.titleEyebrow{font-size:10px;letter-spacing:.08em;color:#efbd70;font-weight:700;margin:0}
.titlePanelCard h1{font-size:38px;line-height:1.15;margin:0 0 8px;color:#f4dfad}
#titleScreen .titlePanelCard button{min-height:46px;text-align:left;background:#345644;color:#f4dfad;border-color:#7e9779;font-size:13px;padding:12px 15px}
#titleScreen .titlePanelCard button:hover,#titleScreen .titlePanelCard button:focus{background:#efbd70;color:#263d36;border-color:#f4dfad}
#titleScreen .titlePanelCard button:disabled{opacity:.5;cursor:default;outline:0}
#titleControlHelp,.titleRestCard>p:not(.titleEyebrow){font-size:13px;line-height:1.8;color:#d4ddc5;margin:8px 0;white-space:pre-line}
.titlePanelCard .titleBack{margin-top:4px}
.on-title #rotateHint{display:none!important}
.on-title #world{cursor:default;pointer-events:none}
@media(max-aspect-ratio:1/1){.titleStage{width:67%;padding-left:5vw;justify-content:flex-start;padding-top:12vh}.titleLogo{font-size:11vw}.titleSubtitle{font-size:4.5vw}.titleBrand{margin-bottom:6vh}.titleKicker{font-size:10px;letter-spacing:.03em}.titleTagline{font-size:11px;max-width:180px;line-height:1.7}.titleNavigation{width:clamp(165px,32vw,240px)}.titleBackdrop{background:linear-gradient(90deg,#142d28ed,#193a31b8 26%,transparent 85%)}.titleSceneNote{display:none}.titleInputHint{font-size:9px}}
@media(max-height:560px) and (min-aspect-ratio:1/1){.titleStage{padding-top:5vh;padding-bottom:4vh;justify-content:flex-start}.titleBrand{margin-bottom:1.5vh}.titleLogo{font-size:8.5vh}.titleNavigation{gap:6px}#titleScreen .titleNavigation button{min-height:30px;padding:5px 14px 5px 40px;font-size:13px}.titleSubtitle{font-size:6vh;margin-top:8px}.titleKicker{margin-bottom:9px;font-size:9px}.titleTagline{font-size:10px;margin-top:12px}.titleNavigation{gap:8px;width:210px}#titleScreen .titleNavigation button{min-height:38px;font-size:14px;padding:8px 16px 8px 45px}.titlePanelCard{padding:18px;gap:8px}.titlePanelCard h1{font-size:29px}#titleControlHelp{font-size:11px}.titleInputHint{font-size:9px;bottom:8px}}
/* The menu is lettering plus a pasta cursor, as in the original title. */
#game #titleScreen .titleNavigation button{background:transparent;border:0;border-radius:0;box-shadow:none;padding-left:43px;color:#f4dfad;text-shadow:0 2px 0 #163226;min-height:48px;}
#game #titleScreen .titleNavigation button:focus,#game #titleScreen .titleNavigation button:hover{background:transparent;border:0;box-shadow:none;color:#ffd184;outline:0;}
#game #titleScreen .titleNavigation button:focus-visible{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:7px;}
#game #titleScreen .titleNavigation button:active{box-shadow:none;translate:2px 0;}
#titleScreen .pastaPointer{left:2px;top:50%;width:28px;height:11px;border-radius:4px;background:linear-gradient(#ffe8a2 0 28%,#efbd70 30% 67%,#b47738 70%);border:2px solid #e6b05e;box-shadow:0 2px 0 #173125;transform:translateY(-50%) rotate(24deg);opacity:0;}
#titleScreen .pastaPointer:after{content:'';position:absolute;right:-3px;top:-2px;width:8px;height:11px;background:#805b30;border:2px solid #ffe0a0;border-radius:50%;}
#titleScreen .titleNavigation button:focus .pastaPointer,#titleScreen .titleNavigation button:hover .pastaPointer{opacity:1;background:linear-gradient(#ffe8a2 0 28%,#efbd70 30% 67%,#b47738 70%);}
#game #titleScreen .titleLogo,#game #titleScreen .titleLogo span{font-family:var(--gb-logo,'Gameballs Display');}
#titleScreen[data-lettering] .titleLogo span{rotate:0deg;translate:0 0;}
#titleScreen[data-lettering='stamp'] .titleLogo{font-size:clamp(54px,10.3vw,169.2px);letter-spacing:-.015em;}
#titleScreen[data-lettering='dash'] .titleLogo{font-size:clamp(53.3px,9.6vw,161.3px);letter-spacing:-.045em;}
#titleScreen[data-lettering='slab'] .titleLogo{font-size:clamp(50.4px,8.9vw,149.8px);letter-spacing:-.04em;}
@media(max-aspect-ratio:1/1){#titleScreen[data-lettering='stamp'] .titleLogo{font-size:11.2vw}#titleScreen[data-lettering='dash'] .titleLogo{font-size:10.4vw}#titleScreen[data-lettering='slab'] .titleLogo{font-size:9.5vw}}
@media(max-height:560px) and (min-aspect-ratio:1/1){#titleScreen[data-lettering] .titleLogo{font-size:8.5vh}#game #titleScreen .titleNavigation button{min-height:38px}}

/* Heavy, rounded blocks: the character's weight and softness, without literal food. */
#titleScreen:is([data-lettering='boulder'],[data-lettering='softblock'],[data-lettering='squash']) .titleLogo{font-size:clamp(61.2px,9.8vw,165.6px);letter-spacing:-.025em;line-height:.95;}
#titleScreen[data-lettering='squash'] .titleLogo{font-size:clamp(61.2px,8.9vw,154.8px);letter-spacing:-.03em;}
@media(max-aspect-ratio:1/1){#titleScreen:is([data-lettering='boulder'],[data-lettering='softblock']) .titleLogo{font-size:10.4vw}#titleScreen[data-lettering='squash'] .titleLogo{font-size:9.5vw}}
@media(max-height:560px) and (min-aspect-ratio:1/1){#titleScreen:is([data-lettering='boulder'],[data-lettering='softblock']) .titleLogo{font-size:15.8vh}#titleScreen[data-lettering='squash'] .titleLogo{font-size:15.1vh}}