/* Arcade title layout: vector logo and a separately rendered, animated low-poly cast. */
#cock{display:none!important}
#menu{background:transparent;overflow:hidden}
#menu .card{position:static;width:100%;max-width:none;padding:0;background:none;border:0;border-radius:0;box-shadow:none;clip-path:none;filter:none}
#menu #logo{position:absolute;top:clamp(28px,7vh,90px);left:50%;transform:translateX(-50%);width:min(87vw,1040px);margin:0;line-height:1;animation:title-enter .9s ease-out both}
#menu #logo small{font:italic 900 clamp(16px,2.2vw,29px) 'Exo 2',Arial,sans-serif;letter-spacing:.55em;color:#e7f6ff;text-shadow:0 2px 0 #233b99;margin-bottom:4px}
#menu #logo svg{display:block;width:100%;height:auto;overflow:visible}
#menu .sub,#menu #desc{display:none}
#menu #m0{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 54px);left:0;width:100%;display:flex;justify-content:center;gap:25px}
#menu #m0 button{font:italic 900 clamp(19px,2.3vw,29px) 'Exo 2',Arial,sans-serif;text-shadow:0 2px 0 #111f46;background:rgba(3,9,25,.68);color:#f3fbff;border:1px solid #6d82cc;border-radius:2px;padding:10px 25px;box-shadow:0 3px 0 #20326e;margin:0;transition:color .15s,border-color .15s}
#menu #m0 button:hover,#menu #m0 button:focus-visible{color:#b5ff3f;border-color:#caff64;outline:0}
#menu .arcade-hint{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);left:0;right:0;font:800 12px 'Exo 2',Arial,sans-serif;letter-spacing:.18em;color:#9db1dd;text-align:center;animation:arcade-blink 2.4s ease-in-out infinite}
#menu.network #logo{top:3vh;width:min(70vw,600px)}
#menu.network #m1{position:absolute;top:clamp(145px,27vh,250px);left:50%;transform:translateX(-50%);width:min(90vw,440px);max-height:65vh;overflow-y:auto;padding:20px;background:rgba(6,14,34,.94);border:1px solid #6481cb;border-radius:6px}
#menu.network .arcade-hint{display:none}
@keyframes title-enter{from{opacity:0;translate:0 -20px}to{opacity:1;translate:0 0}}
@keyframes arcade-blink{50%{opacity:.35}}
@media(max-width:699px){#menu #logo{top:calc(env(safe-area-inset-top,0px) + 11vh);width:94vw}#menu #logo small{font-size:17px;letter-spacing:.4em}#menu #m0{bottom:calc(env(safe-area-inset-bottom,0px) + 55px);gap:10px;flex-direction:column;align-items:center}#menu #m0 button{font-size:22px;width:min(78vw,330px);padding:10px 15px}#menu .arcade-hint{font-size:9px;letter-spacing:.14em}#menu.network #logo{top:calc(env(safe-area-inset-top,0px) + 3vh);width:88vw}#menu.network #m1{top:22vh;max-height:70vh}}
@media(max-height:500px) and (min-width:700px){#menu #logo{top:5vh;width:min(70vw,720px)}#menu #m0{bottom:35px}#menu #m0 button{font-size:18px;padding:6px 20px}#menu .arcade-hint{bottom:10px}#menu.network #logo{width:40vw;top:2vh}#menu.network #m1{top:19vh;max-height:76vh;padding:12px}}
@media(prefers-reduced-motion:reduce){#menu #logo,#menu .arcade-hint{animation:none}}

/* Small pitch-control toggle beside the sound button. */
#menu #invert{position:fixed;top:calc(env(safe-area-inset-top,0px) + 11px);right:64px;margin:0;padding:4px 12px;font:700 13px 'Exo 2',Arial,sans-serif;font-style:normal;color:#b9caec;background:rgba(4,12,31,.85);border:1px solid #6377a6;border-radius:4px;box-shadow:none;white-space:nowrap;z-index:3}
#menu #invert[aria-pressed="true"]{color:#caff64;border-color:#a1cb61}
#menu #invert:focus-visible{outline:2px solid #caff64;outline-offset:3px}
@media(max-width:699px){#menu.network #logo{top:calc(env(safe-area-inset-top,0px) + 48px)}}
/* Match the sound control: one compact yellow icon per action. */
#mu,#menu #invert,#menu #helpbtn{width:46px;height:42px;padding:5px;margin:0;top:calc(env(safe-area-inset-top,0px) + 8px);border:4px solid #2b1a5e;border-radius:14px;background:#ffd23f;color:#2b1a5e;box-shadow:0 3px 0 #2b1a5e;display:flex;align-items:center;justify-content:center;font-size:23px}
#menu #invert{right:64px}
#menu #helpbtn{position:fixed;right:118px;z-index:5}
#menu #invert svg,#menu #helpbtn svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
#menu #invert[aria-pressed="true"]{background:#ffb72f;color:#2b1a5e;box-shadow:inset 0 0 0 2px #fff4b6,0 3px 0 #2b1a5e}
#menu #invert[aria-pressed="true"] svg{transform:rotate(180deg)}
#raceMenu,#tutorial{z-index:12;background:rgba(2,5,19,.8);backdrop-filter:blur(4px)}
#raceMenu .card,#tutorial .card{color:#e8fbff;background:#0a1630;border:2px solid #53d6ff;border-radius:12px;box-shadow:0 0 35px #1389cf44;padding:24px;max-height:calc(100dvh - 40px);overflow-y:auto}
#raceMenu .card{width:min(92vw,430px)}
#raceMenu h2,#tutorial h2{color:#ffdf59;font-size:28px;margin-bottom:12px}
#raceMenu button{display:block;width:100%;font-size:20px}
#raceExit{background:#ffb787}
#tutorial .card{max-width:680px;width:95vw;text-align:left;overscroll-behavior:contain;touch-action:pan-y}
#tutorial p,#tutorial li{font:500 16px/1.5 Arial,sans-serif;margin:10px 0;user-select:text}
#tutorial ol{padding-left:23px}#tutorial h3{font-size:20px;color:#88eaff;margin-top:20px}
#tutorial video{display:block;position:static;width:100%;aspect-ratio:16/9;max-height:280px;background:#050a19;border-radius:8px;object-fit:cover;margin:16px 0}
#tutorialClose{display:block;margin:20px auto 0;font-size:19px}

#tutorialDismiss{float:right;position:sticky;top:0;width:34px;height:34px;padding:0;margin:0 0 8px 10px;font:900 25px Arial,sans-serif;z-index:1;border-radius:8px}