/* Keep the supplied 1536 × 1024 composition intact; native controls align to it. */
#onlineLobby{padding:0;overflow:hidden;background:#450909 url('assets/play-mode-background-v123.jpeg') center/cover no-repeat;container-type:size}
#onlineLobby .room-artboard{position:relative;width:min(100cqw,150cqh);height:auto;aspect-ratio:3/2;max-width:100%;max-height:100%;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;overflow:visible;background:url('assets/online-room-v124.jpeg') center/100% 100% no-repeat;color:white}
#onlineLobbyTitle{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
#onlineLobby #onlineEntry,#onlineLobby .online-join{display:contents}
#onlineLobby [hidden]{display:none!important}
#onlineLobby #onlineCodeInput{position:absolute;left:58.3%;top:35.8%;width:32%;height:6.2%;min-height:0;margin:0;padding:0 1%;border:0;border-radius:0;background:transparent;color:white;font:700 clamp(12px,2.1cqh,24px) Arial,sans-serif;letter-spacing:.15em;outline:none}
#onlineLobby #onlineCodeInput:placeholder-shown{color:transparent}
#onlineLobby #onlineCodeInput::placeholder{color:transparent}
#onlineLobby #onlineCodeInput:focus,#onlineLobby #onlineCodeInput:not(:placeholder-shown){background:#30242d;border-radius:8px}
#onlineLobby button{touch-action:manipulation}
#onlineLobby #onlineCreate,#onlineLobby #onlineJoin,#onlineLobby #onlineBack,#onlineLobby #onlineLeave{position:absolute;min-height:0;margin:0;padding:0;border:0;border-radius:14px;background:transparent;color:transparent;box-shadow:none;font-size:0;cursor:pointer;transform:skewX(-8deg)}
#onlineLobby #onlineCreate{left:53%;top:44.7%;width:38%;height:9%}
#onlineLobby #onlineJoin{left:51.7%;top:55.8%;width:38.5%;height:8.5%}
#onlineLobby #onlineBack{left:49.9%;top:69.8%;width:18%;height:7.2%}
#onlineLobby #onlineLeave{left:69.6%;top:69.8%;width:20.5%;height:7.2%}
#onlineLobby #onlineCreate:hover,#onlineLobby #onlineJoin:hover,#onlineLobby #onlineBack:hover,#onlineLobby #onlineLeave:hover{box-shadow:0 0 12px #ff6b60,inset 0 0 15px #ffffff30}
#onlineLobby button:focus-visible,#onlineLobby #onlineCodeInput:focus-visible{outline:3px solid #fff;outline-offset:3px}
#onlineLobby #onlineStatus{position:absolute;left:49%;top:79.5%;width:42%;max-height:10%;overflow:auto;margin:0;padding:.4% 1%;font:600 clamp(11px,1.9cqh,19px)/1.3 Arial,sans-serif;color:#fff;text-shadow:0 1px 3px black;overflow-wrap:anywhere}
#onlineLobby #onlineStatus:empty{display:none}
#onlineLobby #onlineConnected{position:absolute;left:51%;top:19%;width:42%;height:48%;padding:1.5% 2%;border:2px solid #bd5862;border-radius:20px;background:linear-gradient(145deg,#390c17,#190e16f5);display:flex;flex-direction:column;justify-content:center;gap:1%;overflow:auto;font:700 clamp(12px,2cqh,22px)/1.25 Arial,sans-serif}
#onlineLobby #onlineConnected p{margin:1% 0}
#onlineLobby #onlineCode{font-size:clamp(20px,4cqh,42px);color:white}
#onlineLobby #onlineConnected button{margin:1% 0;padding:2% 4%;min-height:30px;border:1px solid #ffaaa7;border-radius:10px;background:linear-gradient(#692732,#29151f);color:white;font:italic 900 clamp(12px,2.2cqh,24px)/1.2 Arial,sans-serif;box-shadow:0 2px 7px #0005}
#onlineLobby #onlineConnected .primary{background:linear-gradient(#ff4d41,#b20b13);box-shadow:0 0 10px #ff463e}
#onlineLobby #onlinePeople{min-height:0;overflow-wrap:anywhere}
#onlineLobby #onlineConnected{background:linear-gradient(145deg,#390c17,#190e16)}
#onlineLobby #onlineCourseSummary{color:#ffc9b8;background:transparent;padding:0;align-self:center}
@media(max-aspect-ratio:1/1){#onlineLobby{overflow:auto}#onlineLobby .room-artboard{min-width:600px;max-width:none;justify-self:start}#onlineLobby{justify-items:start}}