/* THE BONE PIT (online lobby). Phones: GAMES / PLAYERS / CHAT tabs, one column at a time, filling the
   screen with only the lists scrolling. Big screens: all three side by side. Plus the floating invite card. */

#scr-lobby { overflow: hidden; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); }
#scr-lobby > .lobby-wrap { margin: 0; }
.lobby-wrap { width: 100%; max-width: 1100px; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }

.lobby-head { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; }
.lobby-head .h2 { margin: 0; font-size: clamp(30px, min(8vw, 7vh), 64px); line-height: 1; white-space: nowrap; }
.lobby-back {
    font: inherit; font-size: 14px; width: 44px; height: 44px; cursor: pointer; color: var(--bone);
    background: linear-gradient(180deg, #3a0c12, #1a0508); border: 3px solid #6a1822; border-radius: 4px;
}
.lobby-back:hover, .lobby-back:focus-visible { outline: none; border-color: var(--blood); color: #fff; }
.lobby-count { font-size: 8px; letter-spacing: 1px; color: #7fdc6a; text-align: right; min-width: 44px; line-height: 1.6; }
.lobby-count:not(:empty)::before { content: '● '; animation: blink 1.6s steps(2) infinite; }
.lobby-note { margin: 0; }

.lobby-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lobby-tabs button {
    font: inherit; font-size: clamp(9px, 2.6vw, 11px); letter-spacing: 1px; padding: 12px 4px; cursor: pointer; position: relative;
    color: #cab; background: rgba(20,4,8,.8); border: 2px solid #4a121a; border-radius: 4px;
}
.lobby-tabs button.on { color: #fff; border-color: var(--blood); background: linear-gradient(180deg, #5a0e16, #2a0508); box-shadow: 0 0 12px rgba(255,40,40,.35); }
.lobby-tabs b { font-weight: 400; color: var(--gold); margin-left: 4px; }
.lobby-tabs i {
    position: absolute; top: -7px; right: -4px; font-style: normal; font-size: 8px; min-width: 18px; padding: 4px 5px;
    background: var(--blood); color: #fff; border-radius: 10px; box-shadow: 0 0 10px var(--blood); animation: blink 1.1s steps(2) 3;
}

.lobby-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; }
.lobby-col {
    display: none; flex-direction: column; gap: 10px; min-height: 0; min-width: 0;
    background: rgba(12,3,6,.93); border: 3px solid #4a121a; border-radius: 6px; padding: 12px;
}
.lobby-body[data-tab="games"] .lobby-games, .lobby-body[data-tab="players"] .lobby-players, .lobby-body[data-tab="chat"] .lobby-chat { display: flex; }
.lobby-sec { font-size: 8px; letter-spacing: 3px; color: #a88; text-align: left; }
.lobby-list, .lobby-feed { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; }
.lobby-empty { margin: auto; font-size: 8px; line-height: 2.2; letter-spacing: 1px; color: #866; padding: 20px 0; }
.lobby-games > .btn { width: 100%; flex: none; }

/* open games + players */
.lg-row, .lp-row { display: flex; align-items: center; gap: 10px; padding: 10px; border: 2px solid #3a1016; border-radius: 6px; background: rgba(30,6,10,.6); text-align: left; }
.lg-row.mine { border-style: dashed; }
.lg-info, .lp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lg-top { display: flex; align-items: center; gap: 8px; }
.lg-info b, .lp-info b { font-weight: 400; font-size: 16px; letter-spacing: 3px; }
.lg-info small, .lp-info small { font-size: 7px; line-height: 1.6; letter-spacing: 1px; color: #cab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-kind { font-size: 7px; letter-spacing: 1px; padding: 3px 5px; border-radius: 3px; color: #000; background: #5ae8ff; }
.lg-kind.vs { background: #ff4fa0; }
.lg-join, .lp-invite { flex: none; font-size: 10px; padding: 12px 14px; }
.lp-invite[disabled] { opacity: .45; cursor: default; transform: none; }
.lg-you { flex: none; font-size: 7px; letter-spacing: 1px; color: var(--gold); }
.lp-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 0; background: #7fdc6a; box-shadow: 0 0 6px #7fdc6a; }
.lp-dot.hosting { background: var(--gold); box-shadow: 0 0 6px var(--gold); }
.lp-dot.room, .lp-dot.playing { background: #ff6a6a; box-shadow: 0 0 6px #ff6a6a; }

/* chat */
.lobby-feed { gap: 6px; padding-right: 4px; }
.lc-msg { display: flex; align-items: baseline; gap: 8px; text-align: left; font-size: 10px; line-height: 1.6; color: #eee; }
.lc-msg:first-child { margin-top: auto; }
.lc-msg b { font-weight: 400; flex: none; letter-spacing: 2px; }
.lc-msg.you { color: #fff3c8; }
.lc-emo { font-size: 20px; line-height: 1; }
.lobby-quick { flex: none; max-height: 44%; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; border-top: 2px dashed #3a1016; padding-top: 10px; transition: opacity .2s; }
.lobby-quick.cool { opacity: .4; pointer-events: none; }
.lq-phrases { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 6px; }
.lq-emotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 6px; }
.lq {
    font: inherit; font-size: 8px; letter-spacing: 1px; line-height: 1.5; padding: 10px 6px; min-height: 40px; cursor: pointer;
    color: var(--bone); background: rgba(40,8,14,.9); border: 2px solid #5a1822; border-radius: 6px;
}
.lq.emo { font-size: 20px; padding: 6px 0; }
.lq:hover, .lq:focus-visible { outline: none; border-color: var(--blood); color: #fff; }
.lq:active { transform: translateY(2px); }

/* big screens: everything at once (games + players on the left, chat on the right) */
@media (min-width: 860px) and (min-height: 540px) {
    .lobby-tabs { display: none; }
    .lobby-body { grid-template-columns: 1fr 1.1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "games chat" "players chat"; gap: 12px; }
    .lobby-body .lobby-col { display: flex; }
    .lobby-games { grid-area: games; } .lobby-players { grid-area: players; } .lobby-chat { grid-area: chat; }
    .lobby-quick { max-height: 50%; }
}
/* phones on their side: squeeze the header, and put the chat feed beside the phrase buttons */
@media (max-height: 480px) and (orientation: landscape) {
    .lobby-body[data-tab="chat"] .lobby-chat { display: grid; grid-template-columns: 1fr 1.5fr; grid-template-rows: auto 1fr; }
    .lobby-chat .lobby-sec { grid-column: 1 / -1; }
    .lobby-chat .lobby-quick { max-height: none; min-height: 0; border-top: 0; padding-top: 0; border-left: 2px dashed #3a1016; padding-left: 10px; }
}
@media (max-height: 480px) {
    .lobby-wrap { gap: 6px; }
    .lobby-head .h2 { font-size: 26px; }
    .lobby-back { width: 36px; height: 36px; }
    .lobby-head { grid-template-columns: 36px 1fr auto; }
    .lobby-tabs button { padding: 8px 4px; }
    .lobby-col { padding: 8px; }
    .lobby-quick { max-height: 52%; }
}

/* the invite card */
#lobby-invite {
    position: fixed; z-index: 60; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 24px));
    transform: translate(-50%, 140%); transition: transform .35s cubic-bezier(.2,1.4,.4,1);
    display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; text-align: left;
    background: linear-gradient(180deg, #2a0810, #12030a); border: 3px solid var(--gold); border-radius: 8px; padding: 14px;
    box-shadow: 0 0 30px rgba(255,160,40,.35), 0 8px 0 #000;
}
#lobby-invite.show { transform: translate(-50%, 0); }
.li-icon { font-size: 30px; }
.li-text { font-size: 10px; line-height: 1.9; letter-spacing: 1px; color: #eee; }
.li-text b { font-weight: 400; color: var(--gold); font-size: 14px; letter-spacing: 3px; }
.li-btns { grid-column: 1 / -1; display: flex; gap: 8px; }
.li-btns .btn { flex: 1; font-size: 11px; padding: 12px 8px; }