/* The lobby always has one card; explicit layout cancels gameplay grid rules. */
body.game-active #main:has(.online-lobby-screen){display:block!important;overflow:auto!important;min-height:0;overscroll-behavior:contain}
#main>.online-lobby-screen{display:block!important;box-sizing:border-box;width:100%;height:auto!important;min-height:100%;max-height:none!important;overflow:visible;padding:16px 12px 24px;flex:none}
#main .online-lobby-screen>.game-bottom,#main .online-lobby-screen>#online-notice:empty{display:none!important}
#main .online-lobby-screen>#online-notice{margin:10px auto 0;max-width:720px;grid-column:auto;grid-row:auto}
#main .lobby-card{display:flex!important;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:14px;width:100%;max-width:720px;min-width:0;min-height:0;max-height:none;overflow:visible;box-sizing:border-box;margin:0 auto;padding:22px;text-align:left;border:1px solid #544260;border-radius:20px;background:linear-gradient(145deg,#292136,#1d1828);box-shadow:0 12px 32px #0003;flex:none}
#main .lobby-card>*{grid-column:auto!important;grid-row:auto!important;min-width:0;flex-shrink:0}
.lobby-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.lobby-card-heading h1{margin:0;font-size:clamp(20px,3vw,28px);line-height:1.2;overflow-wrap:anywhere}.lobby-count{flex:none;padding:5px 9px;border:1px solid #6b4e86;background:#9d78cd12;color:#cfb8ed;border-radius:8px;font-size:12px;white-space:nowrap}
#main .lobby-code-strip{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;padding:14px;border-radius:12px;background:#17122155;border:1px solid #564262;width:100%}.lobby-code-copy{display:flex;align-items:center;flex:1 1 auto;gap:16px;min-width:0}.lobby-code-copy small{font-size:12px;color:#b9afca}.lobby-code-copy strong{font-size:clamp(19px,3vw,25px);line-height:1.3;letter-spacing:3px;color:#f5f0dc;white-space:nowrap}.lobby-share-actions{display:flex;gap:8px;flex-wrap:wrap}.lobby-card button{touch-action:manipulation;min-height:42px;box-sizing:border-box}.lobby-share-actions button{font-size:13px;padding:9px 12px}.lobby-share-actions [data-online="share"]{background:#dbfa84;color:#1b2411;font-weight:700}.lobby-card .invite-url{width:100%;flex-basis:100%;background:#211b2e}
.lobby-card-settings{display:grid;gap:9px}.lobby-card .lobby-game-menu,.lobby-settings{margin:0;padding:12px;border-radius:11px;border:1px solid #574363;background:#ffffff04;width:100%;box-sizing:border-box}.lobby-card summary{cursor:pointer;min-height:22px;font-size:14px;font-weight:650;line-height:1.5;overflow-wrap:anywhere}.lobby-settings>div{margin-top:12px;display:grid;gap:12px}.lobby-settings select{max-width:100%;min-width:0;font-size:16px}.lobby-card .lobby-game-options{max-height:none;overflow:visible}.lobby-card .lobby-game-options button{min-width:0;overflow-wrap:anywhere}.lobby-card .lobby-config{flex-wrap:wrap}.lobby-card .lobby-config label{flex:1 1 180px}.lobby-selected-game{padding:12px;border:1px solid #574363;border-radius:11px;font-size:14px}
.lobby-player-section{display:grid;gap:10px}.lobby-player-section h2{font-size:17px!important;line-height:1.3;margin:3px 0}.lobby-player-list{display:grid;gap:8px}.lobby-player-row{display:flex;align-items:center;gap:10px;min-width:0;min-height:54px;padding:9px 12px;border:1px solid #574363;border-radius:12px;background:#ffffff04}.lobby-avatar{display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#8350ed;color:white;font-weight:800}.lobby-player-row:nth-child(even) .lobby-avatar{background:#c8e57a;color:#283718}.lobby-player-row>strong{min-width:0;overflow-wrap:anywhere;font-size:15px}.lobby-player-badge{margin-left:auto;max-width:48%;border:1px solid #775697;border-radius:7px;padding:4px 7px;color:#d3b7f4;font-size:11px;text-align:center}.lobby-player-dot{margin-left:auto;flex:0 0 9px;height:9px;border-radius:50%;background:#7bdd93}
.lobby-card-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid #ffffff12;padding-top:14px;flex-wrap:wrap}.lobby-card-actions button{padding:11px 20px;font-size:14px}.lobby-card-actions .lobby-close{color:#ff8395;border:1px solid #af4056;background:#8c233312}.lobby-card-actions .lobby-start{min-width:220px;background:linear-gradient(135deg,#9559ff,#743ce0);font-weight:750}.lobby-card-note,.lobby-wait{font-size:13px;line-height:1.5;color:#b9afca}.lobby-card .lobby-home{align-self:flex-start;font-size:12px;color:#baa0e5;padding:4px 0;min-height:32px}
@media(max-width:520px){#main .lobby-card{padding:16px;gap:12px}.lobby-card-heading{align-items:flex-start}.lobby-count{font-size:11px}.lobby-code-copy{flex-basis:100%;justify-content:space-between}.lobby-share-actions{width:100%}.lobby-share-actions button{flex:1}.lobby-card-actions .lobby-start{min-width:0;flex:1}.lobby-card-actions button{padding:11px 12px}.lobby-card .lobby-game-options{grid-template-columns:repeat(2,minmax(0,1fr))}.lobby-player-row{padding:8px}.lobby-player-badge{max-width:43%}}
@media(orientation:landscape) and (max-height:500px){#main>.online-lobby-screen{padding:8px max(12px,env(safe-area-inset-right)) 16px max(12px,env(safe-area-inset-left))}#main .lobby-card{padding:14px 18px;gap:10px}.lobby-card-heading h1{font-size:21px}.lobby-player-row{min-height:46px}.lobby-code-strip{padding:10px!important}}
#main .lobby-player-section{grid-template-columns:minmax(0,1fr)}#main .lobby-player-section>h2{grid-column:1!important;grid-row:1!important}#main .lobby-player-section>.lobby-player-list{grid-column:1;grid-row:2;min-width:0}
/* Reuse the main-menu artwork, keeping every cover square. */
#main .lobby-card .lobby-game-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
#main .lobby-game-options .lobby-game-tile{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;min-width:0;border:2px solid #574363;border-radius:12px;background:#211b2e;text-align:center;position:relative}
#main .lobby-game-tile .game-cover{display:block;position:relative;width:100%;height:auto;aspect-ratio:1;overflow:hidden;box-sizing:border-box;flex:none}
#main .lobby-game-tile .game-cover img{display:block;width:100%;height:100%;object-fit:contain}
#main .lobby-game-tile .symbols-cover{padding:4%;flex-wrap:nowrap;gap:0;background:radial-gradient(ellipse at 50% 60%,#653384 0,#251331 48%,#14101d 95%)}
#main .lobby-game-tile .memory-cover i,#main .lobby-game-tile .quiz-cover i{font-size:clamp(20px,4vw,40px)}
#main .lobby-game-caption{display:flex;flex-direction:column;gap:4px;padding:9px 5px;min-width:0;line-height:1.25}
#main .lobby-game-caption strong{font-size:13px;overflow-wrap:anywhere}
#main .lobby-game-caption small{font-size:11px;color:#beb2ce}
#main .lobby-game-tile.selected{border-color:#dfff87;background:#49336a;box-shadow:0 0 0 1px #dfff8733}
#main .lobby-game-tile.selected::after{content:'✓';position:absolute;top:7px;right:7px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#dfff87;color:#17210e;font-weight:800;box-shadow:0 2px 8px #0006}
#main .lobby-game-tile:focus-visible{outline:3px solid #dfff87;outline-offset:3px}
#main .lobby-game-tile:disabled .game-cover{filter:grayscale(1)}
@media(max-width:520px){#main .lobby-card .lobby-game-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}