/* Online multiplayer lobby (DOM overlay on top of the canvas) */
#online_overlay{
    position:fixed; left:0; top:0; width:100%; height:100%;
    display:none; align-items:center; justify-content:center;
    background:rgba(2,10,30,.72);
    z-index:50; font-family:"RoundedMplus1c", Arial, sans-serif; color:#fff;
    -webkit-user-select:none; user-select:none;
}
#online_overlay.visible{ display:flex; }
#online_panel{
    box-sizing:border-box; width:min(560px, 94vw); max-height:94vh; overflow:auto;
    padding:22px 26px 20px;
    background:linear-gradient(180deg,#10306b 0%,#071a40 100%);
    border:3px solid #3f8cff; border-radius:22px;
    box-shadow:0 0 0 3px #04122c, 0 0 36px rgba(63,140,255,.55), inset 0 0 28px rgba(0,0,0,.45);
    text-align:center;
}
#online_panel h1{ margin:0 0 14px; font-size:30px; letter-spacing:2px; text-shadow:0 3px 0 #04122c; }
#online_panel h2{ margin:14px 0 6px; font-size:15px; letter-spacing:1px; color:#9cc4ff; font-weight:normal; }
#online_panel label{ display:block; margin:10px 0 4px; font-size:14px; letter-spacing:1px; color:#9cc4ff; text-align:left; }
#online_panel input[type=text], #online_panel input[type=password]{
    box-sizing:border-box; width:100%; padding:11px 14px; font-size:20px; font-family:inherit;
    color:#fff; background:#04122c; border:2px solid #2b5db0; border-radius:12px; outline:none;
    letter-spacing:1px; text-align:center;
    -webkit-user-select:text; user-select:text;
}
#online_panel input.upper{ text-transform:uppercase; letter-spacing:4px; }
#online_panel input:focus{ border-color:#7db4ff; box-shadow:0 0 10px rgba(125,180,255,.6); }
#online_panel .row{ display:flex; gap:10px; margin-top:12px; }
#online_panel .row > *{ flex:1; }
.online-btn{
    display:block; box-sizing:border-box; width:100%; margin-top:12px; padding:12px 10px;
    font-family:inherit; font-size:20px; letter-spacing:1.5px; color:#fff; cursor:pointer;
    background:linear-gradient(180deg,#3f8cff 0%,#1f56c4 55%,#173f95 100%);
    border:2px solid #04122c; border-radius:14px; box-shadow:0 4px 0 #04122c, inset 0 2px 0 rgba(255,255,255,.35);
    text-shadow:0 2px 0 rgba(0,0,0,.45);
}
.online-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 #04122c, inset 0 2px 0 rgba(255,255,255,.35); }
.online-btn.green{ background:linear-gradient(180deg,#58d96a 0%,#26a43b 55%,#1b7a2c 100%); }
.online-btn.red{ background:linear-gradient(180deg,#ff6a6a 0%,#d12b2b 55%,#9a1b1b 100%); }
.online-btn.grey{ background:linear-gradient(180deg,#8a97ad 0%,#5b667a 55%,#434c5c 100%); }
.online-btn.small{ font-size:15px; padding:8px; margin-top:8px; }
.online-btn[disabled]{ opacity:.45; cursor:not-allowed; filter:grayscale(.6); }
#online_msg{ min-height:22px; margin-top:12px; font-size:15px; color:#ffd36b; letter-spacing:.5px; }
#online_msg.error{ color:#ff8a8a; }
.online-code{
    display:inline-block; margin:2px 0 4px; padding:6px 18px; font-size:44px; letter-spacing:8px;
    background:#04122c; border:2px dashed #7db4ff; border-radius:14px; color:#ffe27a;
    -webkit-user-select:text; user-select:text;
}
#online_players{ margin:12px 0 4px; padding:0; list-style:none; }
#online_players li{
    display:flex; align-items:center; gap:10px; margin:6px 0; padding:9px 12px;
    background:rgba(4,18,44,.8); border:2px solid #234a94; border-radius:12px; font-size:19px; text-align:left;
}
#online_players li.me{ border-color:#7db4ff; }
#online_players li.empty{ opacity:.45; border-style:dashed; justify-content:center; }
#online_players .name{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.badge{ font-size:12px; padding:3px 8px; border-radius:10px; letter-spacing:1px; }
.badge.host{ background:#ffb52b; color:#3a2300; }
.badge.ready{ background:#2fbf46; color:#06220c; }
.badge.wait{ background:#5b667a; color:#fff; }
.badge.off{ background:#d12b2b; color:#fff; }
#online_hint{ margin-top:6px; font-size:14px; color:#9cc4ff; }
#online_status{
    position:fixed; left:50%; top:10px; transform:translateX(-50%); z-index:60; display:none;
    padding:8px 18px; border-radius:20px; font-family:"RoundedMplus1c", Arial, sans-serif; font-size:16px; letter-spacing:1px;
    color:#fff; background:rgba(209,43,43,.92); border:2px solid #04122c; box-shadow:0 0 14px rgba(0,0,0,.5);
    pointer-events:none;
}
#online_status.info{ background:rgba(31,86,196,.92); }
#online_status.visible{ display:block; }
#online_lobby_btn{
    position:fixed; left:50%; bottom:12px; transform:translateX(-50%); z-index:40; display:none; width:auto; padding:8px 22px; margin:0;
}
#online_lobby_btn.visible{ display:block; }
@media (max-height:480px){
    #online_panel{ padding:12px 18px; }
    #online_panel h1{ font-size:22px; margin-bottom:6px; }
    .online-code{ font-size:30px; }
    #online_players li{ padding:5px 10px; font-size:16px; margin:3px 0; }
    .online-btn{ margin-top:7px; padding:8px; font-size:17px; }
}

/* two columns on short (landscape phone) screens so everything fits without scrolling */
@media (max-height:520px){
    #online_panel{ width:min(900px, 96vw); padding:10px 18px 12px; }
    #online_panel .grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px 22px; align-items:start; }
    #online_panel h2{ margin:2px 0 2px; }
    #online_panel label{ margin:2px 0 3px; }
    .online-code{ font-size:34px; padding:3px 14px; letter-spacing:6px; }
    #online_players{ margin:0 0 4px; }
    #online_players li{ padding:4px 10px; font-size:15px; margin:3px 0; }
    #online_msg{ min-height:16px; margin-top:6px; font-size:13px; }
    #online_hint{ margin-top:2px; font-size:12px; }
    #online_panel input[type=text], #online_panel input[type=password]{ padding:7px 10px; font-size:17px; }
    .online-btn{ margin-top:6px; padding:7px 8px; font-size:16px; }
    .online-btn.small{ font-size:13px; padding:6px; margin-top:6px; }
}

/* name / create / join screens */
#online_panel.enter{ animation:onlineIn .22s ease-out; }
@keyframes onlineIn{ from{ opacity:0; transform:translateY(10px) scale(.97); } to{ opacity:1; transform:none; } }
.online-player{ display:inline-block; margin:2px 0 6px; padding:6px 22px; font-size:24px; letter-spacing:1px; color:#ffe27a; background:#04122c; border:2px solid #2b5db0; border-radius:12px; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.online-error{ margin:14px 0 4px; padding:12px; font-size:18px; color:#ff9a9a; background:rgba(209,43,43,.15); border:2px solid #d12b2b; border-radius:12px; }
.options{ display:flex; gap:8px; margin-top:4px; }
.online-opt{
    flex:1; padding:14px 4px; font-family:inherit; font-size:17px; letter-spacing:1px; color:#9cc4ff; cursor:pointer;
    background:#04122c; border:3px solid #234a94; border-radius:14px; transition:transform .1s, background .15s, border-color .15s;
}
.online-opt:hover{ border-color:#5b95ec; }
.online-opt.selected{ color:#fff; border-color:#ffd83b; background:linear-gradient(180deg,#3f8cff 0%,#1f56c4 100%); box-shadow:0 0 14px rgba(255,216,59,.65); transform:scale(1.04); }
.roominfo{ margin-top:10px; }
.roominfo .badge{ display:inline-block; margin:0 3px; font-size:13px; padding:4px 10px; }
.badge.count{ background:#1f56c4; color:#fff; }
.badge.lock{ background:#ffb52b; color:#3a2300; }
.badge.open{ background:#2fbf46; color:#06220c; }
.joininfo{ margin:10px 0 2px; padding:8px; font-size:16px; color:#cfe2ff; background:rgba(4,18,44,.8); border:2px solid #234a94; border-radius:12px; }
@media (max-height:520px){
    .online-opt{ padding:9px 2px; font-size:14px; }
    .online-player{ font-size:18px; padding:3px 14px; margin:0 0 2px; }
    .roominfo{ margin-top:4px; }
}
#online_hint.starting { color: #7CFC00; font-weight: bold; animation: online-pulse 0.8s ease-in-out infinite alternate; }
@keyframes online-pulse { from { opacity: 0.6; } to { opacity: 1; } }