/* The home menu is a game window, with a pixel wordmark and two clear columns. */
#menu{position:fixed;inset:68px auto 36px 50%;transform:translateX(-50%);width:min(880px,calc(100% - 40px));max-height:none;display:flex;flex-direction:column;align-items:center;gap:14px;overflow:auto;padding:8px 8px 4px;scrollbar-width:thin;scrollbar-color:#74858c #18212a;text-shadow:none}
#menu,#menu *{font-family:BedwarsPixel,monospace!important;font-weight:400;letter-spacing:0}
#menu[hidden]{display:none}
#menu .home-heading{width:min(420px,88%);padding:0;flex:none}
#menu h1{margin:0;font-size:inherit;line-height:1}
#menu h1 img{display:block;width:100%;height:auto;image-rendering:pixelated}
#menu .home-play{flex:none;width:100%;max-height:none;overflow:visible;padding:0;background:#1b2530;border:2px solid #91a1a7;box-shadow:5px 5px 0 #0b111b,inset 0 0 0 2px #303e4a}
#menu .home-panel-title{display:flex;min-height:42px;margin:0;padding:8px 22px;border:0;border-bottom:2px solid #111a24;background:#2a3946;box-shadow:inset 0 2px #415461;align-items:center}
#menu .home-panel-title>span{font-size:26px;color:#fff1be;letter-spacing:2px}
#menu .home-panel-title small{font-size:18px;color:#b2c2c8;letter-spacing:1px}
#menu .home-columns{display:grid;grid-template-columns:1fr 1.12fr}
#menu .match-setup,#menu .menu-actions{padding:18px 24px;min-width:0}
#menu .match-setup{border-right:2px solid #3d4c58}
#menu .match-options{display:grid;grid-template-columns:1fr;gap:16px;margin:0}
#menu label,#menu .name-label{font-size:20px;color:#b8cbd2;display:grid;gap:5px;letter-spacing:1px}
#menu select,#menu input{font-size:24px;min-height:44px;padding:8px 12px;color:#fff6dd;background:#111a24;border:2px solid #697e8c;border-radius:0;box-shadow:inset 2px 2px #090e16;text-transform:none;letter-spacing:0;width:100%;touch-action:manipulation}
#menu select{cursor:pointer;padding-right:8px}
#menu option{background:#172431;color:#fff6dd;font:inherit}
#menu select:focus-visible,#menu input:focus-visible{outline:2px solid #f4ca63;outline-offset:2px;border-color:#f4ca63}
#menu #match-description{font-size:19px;line-height:1.15;margin:16px 0 0;min-height:0;color:#b6c7cf}
#menu .match-team-choice{margin:16px 0 0}
#menu .match-team-choice[hidden]{display:none}
#menu .home-tip{display:flex;flex-direction:column;gap:4px;padding-top:14px;margin-top:18px;border-top:2px solid #3d4c58}
#menu .home-tip b{font-size:20px;color:#e9bd66;padding:0;letter-spacing:1px}
#menu .home-tip span{font-size:20px;line-height:1.15;color:#c2cbd0}
#menu .mode-description,#menu .online-heading{display:flex;gap:5px;margin:0 0 12px}
#menu .mode-description strong,#menu .online-heading strong{font-size:23px;color:#f3ebd6;letter-spacing:1px}
#menu .mode-description span,#menu .online-heading span{display:block;font-size:19px;color:#b6c7cf;line-height:1.1}
#menu button{font-size:24px;min-height:46px;border-radius:0;touch-action:manipulation;text-shadow:none;transition:background .1s,transform .1s}
#menu .primary{display:block;background:#e6b84e;color:#191e26;border:2px solid #fff0ad;box-shadow:inset 0 -4px #a77629,3px 3px 0 #090e16;text-align:center;padding:9px 14px;text-transform:uppercase;letter-spacing:1px}
#menu .primary::after{content:none}
#menu .primary:hover{background:#f6ce68}
#menu .secondary{background:#3a4c5b;border:2px solid #8198a6;color:#f6f1df;box-shadow:inset 0 -3px #202f3c,3px 3px 0 #090e16;padding:9px 10px}
#menu .secondary:hover{background:#506a7b;border-color:#becdd3}
#menu button:active{transform:translateY(2px)}
#menu button:disabled{opacity:.5;cursor:wait}
#menu .online-heading{border-top:2px solid #3d4c58;margin-top:22px;padding-top:16px}
#menu .name-label{margin-bottom:5px}
#menu .online-row{display:flex;gap:12px;margin-top:12px}
#menu .online-row button{min-width:0;flex:1}
#menu #menu-status{font-size:18px;line-height:1.1;min-height:20px;margin:0;padding:9px 24px;color:#99b5b8;background:#141e28;border-top:2px solid #3d4c58}
#menu #room-form{position:static;transform:none;width:100%;margin:18px 0 0;padding:16px 0 0;background:none;border:0;border-top:2px solid #3d4c58;box-shadow:none}
#menu #room-form[hidden]{display:none}
#menu #room-code{letter-spacing:4px;text-transform:uppercase}
#menu #room-form .join-row{margin-top:8px}
#menu #cancel-join{font-size:20px;min-height:36px;padding:8px 0 0;border:0;background:none;color:#b8cbd2;box-shadow:none}
.brand-mark{width:28px;height:34px;object-fit:contain;image-rendering:pixelated}
body:not(.playing) #vignette{background:#0c182b75}
body:not(.playing) #island-label,body:not(.playing) #connection,body:not(.playing) #camera-toggle,body:not(.playing) #inventory-toggle{display:none!important}
body:not(.playing) header{top:16px;left:24px;right:24px}
body:not(.playing) header .brand{font-size:23px;font-weight:400}
body:not(.playing) header button{background:#1b2530;border:2px solid #82959f;box-shadow:2px 2px 0 #0c1420;min-height:38px;font-size:20px}
body:not(.playing) #credits{font-size:16px;bottom:9px;left:24px;color:#d4e0e3;text-shadow:1px 1px #101823}
@media(min-height:850px) and (min-width:651px){#menu{justify-content:center}}
@media(max-width:650px){
 #menu{inset:64px auto 34px 50%;width:calc(100% - 24px);gap:12px;padding:4px 4px 12px}
 #menu .home-heading{width:min(380px,95%)}
 #menu .home-columns{grid-template-columns:1fr}
 #menu .match-setup,#menu .menu-actions{padding:18px}
 #menu .match-setup{border:0;border-bottom:2px solid #3d4c58}
 #menu .match-options{grid-template-columns:1fr;gap:12px}
 #menu .match-options select{font-size:20px;padding-left:7px;min-width:0}
 #menu .home-tip{display:none}
 #menu #match-description{font-size:18px;margin-top:12px}
 #menu .home-panel-title{padding:8px 18px}
 #menu #menu-status{padding:9px 18px}
 body:not(.playing) header{left:16px;right:16px;top:12px}
 body:not(.playing) header .brand{font-size:0;gap:0}
 body:not(.playing) header .header-right{gap:8px}
 body:not(.playing) #credits{left:16px;font-size:15px}
}
@media(max-height:550px) and (min-width:651px){
 #menu{inset:62px auto 28px 50%;gap:10px}
 #menu .home-heading{width:300px}
 #menu .match-setup,#menu .menu-actions{padding:16px 20px}
 #menu .home-panel-title{display:flex}
}

/* Leave a dedicated, unobstructed half of the screen for the live map orbit. */
#menu{inset:72px auto 32px 28px;transform:none;width:min(650px,calc(48vw - 28px));align-items:stretch;gap:14px;padding:6px 6px 12px;justify-content:center}
#menu .home-heading{width:min(350px,85%);align-self:flex-start}
#menu .match-setup,#menu .menu-actions{padding:16px 18px}
#menu .home-panel-title{padding:8px 18px}
#menu .home-panel-title small{font-size:16px}
#menu .home-columns{grid-template-columns:1fr 1.08fr}
#menu select,#menu input{font-size:22px;padding:8px}
#menu .mode-description strong,#menu .online-heading strong{font-size:22px}
#menu .online-row{gap:8px}
#menu .online-row button{font-size:22px;padding:9px 5px}
body:not(.playing) #vignette{background:linear-gradient(90deg,#101b2bb3 0%,#101b2b55 43%,#101b2b00 65%)}
@media(max-width:1100px) and (min-width:651px){
 #menu{left:16px;width:calc(48vw - 16px);justify-content:flex-start;gap:12px}
 #menu .home-heading{width:250px;max-width:90%}
 #menu .home-columns{grid-template-columns:1fr}
 #menu .match-setup{border-right:0;border-bottom:2px solid #3d4c58}
 #menu .match-options{grid-template-columns:1fr;gap:10px}
 #menu .match-options label:last-child{grid-column:1/-1}
 #menu .match-team-choice{margin-top:10px}
 #menu #match-description{margin-top:10px}
}
@media(max-width:650px){
 #menu{inset:42% 10px 28px;transform:none;width:auto;justify-content:flex-start;gap:10px;padding:4px 4px 12px}
 #menu .home-heading{width:190px;max-width:65%}
 #menu .home-columns{grid-template-columns:1fr}
 #menu .match-setup{border-right:0;border-bottom:2px solid #3d4c58}
 #menu .match-options{grid-template-columns:1fr;gap:10px}
 #menu .match-options label:last-child{grid-column:1/-1}
 #menu .match-setup,#menu .menu-actions{padding:14px}
 #menu .match-team-choice{margin-top:10px}
 body:not(.playing) #vignette{background:linear-gradient(0deg,#101b2b99 0%,#101b2b33 50%,#101b2b00 75%)}
}
@media(max-height:650px) and (min-width:651px){
 #menu{top:62px;justify-content:flex-start;gap:8px}
 #menu .home-heading{width:200px}
}

#menu .practice-hint{font-size:17px;line-height:1.15;color:#b8cbd2;margin:7px 0 12px}#result .result-progress{color:#d4e5bd;font-size:16px;line-height:1.35;max-width:420px;margin:10px auto}#result .result-progress:empty{display:none}