/* The lobby scrolls as one document; battle layouts retain their own rules. */
html:has(#lobby:not([hidden])),body:has(#lobby:not([hidden])){height:auto;min-height:100%;overflow-y:auto;overflow-x:clip}
.app:has(#lobby:not([hidden])){height:auto;min-height:100svh;overflow:visible;grid-template-rows:auto auto auto;padding-bottom:max(14px,env(safe-area-inset-bottom))}
#lobby:not([hidden]){height:auto;min-height:0;overflow:visible;align-items:start;grid-template-rows:auto auto auto}
#lobby:not([hidden]) .lobby-main,#lobby:not([hidden]) .lobby-side,#lobby:not([hidden]) .sidebar{height:auto;max-height:none;overflow:visible;min-width:0}
#lobby:not([hidden]) .mojumon-scroll{flex:0 0 auto;overflow:visible;height:auto;max-height:none;min-height:0;padding-right:0}
#lobby:not([hidden]) #enterBattle,#lobby:not([hidden]) .lobby-launch{position:static;margin-top:16px}
#lobby .island-banner{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:20px;padding:24px;min-height:240px;background:radial-gradient(ellipse at 85% 50%,#48205d,#0b0816 75%)}
#lobby .island-banner>div{min-width:0}
#lobby .island-banner .island-art{width:100%;height:250px;object-fit:contain;filter:drop-shadow(0 8px 12px #0008);pointer-events:none}
@media(max-width:1100px){#lobby:not([hidden]){grid-template-columns:minmax(0,1fr)}#lobby:not([hidden]) .lobby-main{border-right:0}#lobby .island-banner{padding:20px;gap:12px}#lobby .island-banner .island-art{height:210px}}
@media(max-width:600px){#lobby .island-banner{grid-template-columns:1fr;padding:18px}#lobby .island-banner .island-art{height:190px;grid-row:1}#lobby .island-banner h2{font-size:26px}#lobby .island-banner p{font-size:16px}#lobby:not([hidden]) .tamer-select,#lobby:not([hidden]) .tamers{grid-template-columns:repeat(2,minmax(0,1fr))}.app:has(#lobby:not([hidden])) .topbar{height:auto;min-height:58px;flex-wrap:wrap;padding:12px}}

/* Keep a single document scroller, including wheel input over the center. */
html:has(#lobby:not([hidden])){overflow-y:auto;overflow-x:clip;overscroll-behavior-y:auto}
body:has(#lobby:not([hidden])){height:auto;min-height:100svh;overflow:visible;overscroll-behavior:auto}
body:has(#lobby:not([hidden]))>.app,#lobby:not([hidden]),#lobby:not([hidden]) .lobby-main,#lobby:not([hidden]) .lobby-side,#lobby:not([hidden]) .sidebar,#lobby:not([hidden]) .mojumon-scroll{overflow:visible;overscroll-behavior:auto;touch-action:pan-y}