/* Translucent menu, kept within the animated court's aspect ratio. */
body[data-screen=main] main{width:min(84vw,128dvh);max-width:1700px;margin-inline:auto;padding:70px 0;min-height:100dvh;grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);gap:clamp(48px,6vw,110px);align-items:center}
body[data-screen=main] .intro{align-self:center}
body[data-screen=main] .intro h1{font-size:clamp(100px,11.5vw,215px);line-height:.9;letter-spacing:-.055em;text-shadow:none;gap:14px}
body[data-screen=main] .intro h1 span{color:#d4ff58;text-shadow:none}
body[data-screen=main] .main-menu{width:100%;max-width:440px;justify-self:center}
body[data-screen=main] #menu-actions{min-height:420px;max-width:none;padding:22px 0;gap:22px;background:transparent;border:0;border-radius:0;box-shadow:none;backdrop-filter:none}
#menu-actions .menu-heading{gap:18px;min-height:22px}
#menu-actions .menu-heading h2{font-size:12px;font-weight:500;text-transform:uppercase;letter-spacing:.19em;color:#c0cccb}
#menu-actions .menu-heading:after{content:'';height:1px;flex:1;background:#dbeee020}
#menu-actions #menu-back{font-size:12px;padding:4px 0;color:#eef4e9}
#menu-actions .menu-profile{gap:9px}
#menu-actions .menu-profile>label{font-size:9px;letter-spacing:.15em;color:#a9b7bb}
#menu-actions .identity-row{gap:0;border-radius:6px;background:#0a151e55;border:1px solid #c9e1d82c;box-shadow:none;align-items:center;padding-right:9px;transition:border-color .18s}
#menu-actions .identity-row:focus-within{border-color:#d4ff58}
#menu-actions #nickname{border:0;background:none;box-shadow:none;border-radius:6px;font-size:16px;padding:16px;height:54px;outline:none;color:#f0f5eb}
#menu-actions .color-button{width:34px;height:34px;border-width:4px;box-shadow:0 0 0 1px #bed2d02b}
#menu-actions .color-button:after{inset:7px}
#menu-actions .menu-pane{display:grid;grid-template-columns:1fr;gap:8px;animation:menu-arrive .16s cubic-bezier(.2,.8,.2,1) both}
#menu-actions .menu-pane[hidden]{display:none}
#menu-actions .menu-option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:57px;padding:15px 19px;border-radius:5px;border:1px solid #c9dfd51e;background:#12212a42;box-shadow:none;color:#eef3ed;font-size:19px;font-weight:500;transition:background .18s,border-color .18s,transform .18s cubic-bezier(.2,.8,.2,1)}
#menu-actions .menu-option:before{display:none}
#menu-actions .menu-option:hover{background:#b9d7c414;border-color:#d0e5d856;transform:translateX(3px);filter:none}
#menu-actions .menu-option:active{transform:translateX(1px);background:#c6e5cc22}
#menu-actions button:focus-visible{outline:2px solid #d4ff58;outline-offset:4px}
#menu-actions #menu-online{min-height:65px;background:#b6e86a12;color:#d4ff58;border-color:#c7f18d4a;font-size:22px}
#menu-actions #menu-online:hover{background:#b6e86a24;border-color:#d4ff5899}
#menu-actions #controls-button{min-height:45px;margin-top:7px;padding:12px 2px 2px;border:0;border-top:1px solid #d0e5d820;border-radius:0;background:none;box-shadow:none;font-size:14px;color:#c1cdca}
#menu-actions #controls-button:hover{color:#fff;transform:none}
#menu-actions #status:empty{display:none}
#menu-actions .menu-mode-choices{gap:10px}
#menu-actions .menu-mode-choices .menu-option{display:flex;flex-direction:column;align-items:flex-start;min-height:112px;justify-content:center;gap:10px}
#menu-actions .menu-mode-choices [aria-pressed=true]{border-color:#d4ff5866;background:#b6e86a15;color:#d4ff58}
#menu-actions .menu-mode-choices small{font-size:12px;color:#bdc9bf}
#menu-actions #host,#menu-actions #join{min-height:59px;border-radius:5px;background:#b6e86a18;color:#d4ff58;border:1px solid #c7f18d55;box-shadow:none;font-size:18px}
#menu-actions #room-input{border-radius:5px;background:#0a151e55;border-color:#c9e1d82c;padding:17px;font-size:18px;letter-spacing:.12em}
body[data-screen=main] .master-volume{border:0;background:none;box-shadow:none;gap:12px;color:#b3c1c4}
body[data-screen=main] .topbar{padding:18px 28px}
#practice-dialog{border-radius:10px;border:1px solid #b8d3c637;background:#0c171ee6;padding:30px;box-shadow:none}
#practice-dialog h2{font-size:28px;letter-spacing:-.03em}
#practice-dialog .practice-choices{gap:8px;margin:26px 0}
#practice-dialog .practice-choices button{border-color:#c9dfd52c;background:#18272d55;border-radius:5px;min-height:54px}
#practice-dialog .practice-choices button[aria-pressed=true]{background:#b6e86a24;color:#d4ff58;border-color:#d4ff5880}
#practice-dialog #practice-begin{border-radius:5px;min-height:56px;background:#b6e86a24;color:#d4ff58;border:1px solid #d4ff5880;box-shadow:none}
@keyframes menu-arrive{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:761px) and (max-height:700px){body[data-screen=main] main{width:84vw;padding:45px 0 25px}body[data-screen=main] #menu-actions{gap:16px;min-height:0;padding:0}body[data-screen=main] .intro h1{font-size:min(12vw,27vh)}}
@media(max-width:760px){body[data-screen=main] main{width:auto;max-width:510px;grid-template-columns:minmax(0,1fr);padding:85px 26px 35px;gap:32px;align-content:center}body[data-screen=main] .intro h1{font-size:clamp(58px,14vw,98px);flex-direction:row;gap:12px;line-height:1}body[data-screen=main] .main-menu{max-width:none}body[data-screen=main] #menu-actions{min-height:0;gap:20px;padding:0}body[data-screen=main] .topbar{padding:12px 22px}#practice-dialog{padding:24px}}
@media(prefers-reduced-motion:reduce){#menu-actions .menu-pane{animation:none}#menu-actions button{transition:none!important}}

.projects-return{display:none;text-decoration:none;margin-right:auto}body[data-screen=main] .projects-return{display:block;position:absolute;left:22px;top:12px;padding:10px;z-index:5}
body[data-screen=main] .projects-return{border:0;border-radius:0;background:transparent;box-shadow:none;color:rgba(238,244,233,.62);font-weight:400;text-decoration:none}
body[data-screen=main] .projects-return:hover,body[data-screen=main] .projects-return:focus-visible{color:#eef4e9;background:transparent;border:0;box-shadow:none}