#startScreen #onlineButton{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
#startScreen #onlineButton small{display:block;width:100%;text-align:center}
#mobileModeButton{display:none}
body.mobile-mode #startScreen #gameMode{display:none}
body.mobile-mode #mobileModeButton{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:1;max-width:65%;height:28px;padding:3px 10px;border:1px solid #79dcff;border-radius:10px;background:linear-gradient(#0983b4,#005686);color:white;box-shadow:inset 0 1px #b9eeff55;cursor:pointer;font-size:10px}
#mobileModeButton>span:last-child{font-size:8px;color:#ffe34b;font-weight:700}
#mapDialog{box-sizing:border-box;width:min(1160px,96vw);padding:24px;border:1px solid #7ae1ff;border-radius:24px;background:radial-gradient(ellipse at top,#09688d,#032e4e 80%)}
#mapStyleGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;padding:4px}
#mapDialog .map-style-card{border-radius:16px;background:linear-gradient(155deg,#075c81,#023953);border:1px solid #77cde15c}
#mapDialog .map-style-card:has(input:checked){border-color:#ffe34b;box-shadow:0 0 0 2px #ffe34b,0 6px 20px #00162977}
#mapStyleGrid canvas{height:auto;aspect-ratio:1;object-fit:contain;background:#073957;border-bottom:1px solid #99ddff33}
#mapDialog .map-card-copy{padding:12px;gap:7px}
#mapDialog .map-card-copy strong{font-size:17px;line-height:1.2}
#mapDialog .map-card-copy>span{font-size:11px;line-height:1.5;min-height:84px;color:#c4e8f4}
#mapDialog .map-card-copy small{font-size:8px;letter-spacing:.04em;color:var(--map-accent)}
#mapDialog .map-card-copy b{font-size:8px;color:#ffe98c}
#mapDialog .map-dialog-top p{margin-bottom:16px}
#mapPreviewNote{color:#b5deee;line-height:1.4}
body.mobile-mode #mapDialog,body.mobile-mode #modeHub{width:calc(100vw - 20px);max-width:none;height:calc(100dvh - 20px);max-height:none;padding:12px 16px;border-radius:18px;overflow:hidden}
body.mobile-mode #mapDialog[open],body.mobile-mode #modeHub[open]{display:flex;flex-direction:column;gap:8px}
body.mobile-mode .map-dialog-top,body.mobile-mode .mode-hub-heading{flex-shrink:0;margin:0;gap:12px}
body.mobile-mode #mapDialog .map-dialog-top h2,body.mobile-mode #modeHub h2{font-size:22px;line-height:1.1;margin:3px 0}
body.mobile-mode .map-dialog-top small,body.mobile-mode .mode-hub-heading small{font-size:8px}
body.mobile-mode .map-dialog-top p,body.mobile-mode .mode-hub-heading p{font-size:10px;margin:3px 0 0}
body.mobile-mode #mapStyleGrid,body.mobile-mode #modeHub fieldset{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:180px;gap:12px;flex:1;min-height:0;overflow:auto;padding:4px 4px 8px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#63d5ef #003454;touch-action:pan-x pan-y}
body.mobile-mode #mapDialog .map-style-card,body.mobile-mode #modeHub .mode-hub-card{scroll-snap-align:start;min-height:0;overflow:auto;transform:none}
body.mobile-mode #mapStyleGrid canvas{height:110px;aspect-ratio:auto;object-fit:contain;background:radial-gradient(#0c6984,#032f4c)}
body.mobile-mode #mapDialog .map-card-copy{padding:8px 10px;gap:4px}
body.mobile-mode #mapDialog .map-card-copy strong{font-size:14px}
body.mobile-mode #mapDialog .map-card-copy>span{display:none}
body.mobile-mode #mapDialog .map-card-copy b{padding-top:4px;font-size:7px}
body.mobile-mode #mapDialog .map-dialog-bottom{flex-shrink:0;display:flex;flex-wrap:nowrap;gap:8px;margin:0;align-items:end}
body.mobile-mode #mapDialog .map-dialog-bottom label{flex:1;min-width:0;font-size:8px}
body.mobile-mode #mapDialog .map-dialog-bottom input{margin-top:3px;padding:7px;font-size:10px;height:34px}
body.mobile-mode #mapDialog .map-dialog-bottom button{height:36px;min-width:0;padding:6px 10px;font-size:9px;white-space:nowrap}
body.mobile-mode #mapPreviewNote{font-size:8px;margin:0;flex-shrink:0}
body.mobile-mode #modeHub .mode-hub-card{padding:10px;gap:6px}
body.mobile-mode #modeHub .mode-art{height:54px;flex-shrink:0}
body.mobile-mode #modeHub .mode-hub-card>strong{font-size:22px}
body.mobile-mode #modeHub .mode-description{font-size:10px;min-height:0}
body.mobile-mode #modeHub .mode-capacity{font-size:7px}
body.mobile-mode #modeHub .mode-hub-footer{margin:0;padding-top:6px;flex-wrap:nowrap;gap:10px;flex-shrink:0}
body.mobile-mode #modeHub .mode-hub-footer p{display:none}
body.mobile-mode #modeHub #applyModeHub{width:auto;padding:12px 16px;font-size:10px}
@media(max-width:500px){body.mobile-mode #mapStyleGrid,body.mobile-mode #modeHub fieldset{grid-auto-columns:76%}body.mobile-mode #mapDialog .map-dialog-bottom{flex-wrap:wrap}body.mobile-mode #mapDialog .map-dialog-bottom label{flex-basis:100%}body.mobile-mode #mapStyleGrid canvas{height:150px}}
/* Keep previews visible over the earlier compact-menu rules. */
#mapDialog .map-style-card{display:block}
#mapStyleGrid canvas{display:block;width:100%;flex:none}
#mapDialog .map-card-copy{display:grid;grid-template-columns:1fr;width:auto;align-items:start}
#mapDialog .map-card-copy small,#mapDialog .map-card-copy b{display:block}
#mapDialog .map-style-card input{top:10px;right:10px}
body.mobile-mode #modeHub .mode-description{display:none}
body.mobile-mode #modeHub .mode-hub-card>*{flex-shrink:0}
body.mobile-mode #modeHub .mode-art{height:48px}
body.mobile-mode #modeHub .mode-squad{width:64px;gap:2px}
body.mobile-mode #modeHub .mode-squad svg{width:20px;height:29px}
body.mobile-mode #modeHub .mode-hub-card[data-mode="solo"] .mode-squad svg{width:32px;height:46px}
body.mobile-mode #modeHub .mode-capacity{padding-top:5px}
body.mobile-mode #mapDialog .map-style-card{display:grid;grid-template-rows:minmax(40px,1fr) auto;overflow:hidden}
body.mobile-mode #mapStyleGrid canvas{height:100%;min-height:0;max-height:150px;box-sizing:border-box}
body.mobile-mode #mapDialog .map-card-copy{padding:7px 9px;gap:4px}
body.mobile-mode #mapDialog .map-card-copy small{display:none}
/* Fieldsets otherwise keep their intrinsic width and clip the last cards. */
body.mobile-mode #mapStyleGrid,body.mobile-mode #modeHub fieldset{min-width:0;min-inline-size:0;width:100%;max-width:100%;box-sizing:border-box;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
body.mobile-mode #mapStyleGrid{touch-action:pan-y;cursor:grab;user-select:none}
body.mobile-mode #mapStyleGrid:active{cursor:grabbing}
body.mobile-mode #mapDialog .map-style-card{overflow:clip;touch-action:pan-y}
body.mobile-mode #mapStyleGrid{scroll-snap-type:none!important}