/* Online lobby: host / join, room code, the two player cards, mode + world pickers. --mate is the other player's colour. */

.coop-panel { max-width: 560px; }
.coop-blurb { font-size: clamp(8px, calc(var(--u) * 1.2), 11px); line-height: 2; color: #dcc; margin: 0 0 18px; }
.coop-blurb b { color: var(--gold); font-weight: 400; }
#coop-menu > .btn { width: 100%; }
.coop-or { font-size: 8px; letter-spacing: 3px; color: #a88; margin: 18px 0 10px; }
.coop-join { display: flex; gap: 8px; }
.coop-join input {
    font: inherit; font-size: 22px; letter-spacing: 8px; text-align: center; text-transform: uppercase;
    flex: 1; min-width: 0; background: #000; color: var(--gold); border: 3px solid var(--blood); border-radius: 4px; padding: 10px 6px;
}
.coop-join .btn { flex: none; }
.coop-msg { font-size: 8px; line-height: 1.9; letter-spacing: 1px; color: #7fdc6a; margin-top: 12px; min-height: 1.9em; }
.coop-msg.bad { color: #ff6a6a; }
.coop-code-label { font-size: 8px; letter-spacing: 3px; color: #a88; }
.coop-code { font-size: clamp(34px, 10vw, 56px); letter-spacing: 12px; padding-left: 12px; color: var(--gold); text-shadow: 0 0 18px var(--ember), 3px 3px 0 #000; margin: 8px 0 12px; }
.coop-invite { font-size: 10px; padding: 10px 14px; margin-bottom: 16px; }
.coop-players { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.coop-player { border: 2px solid #4a121a; border-radius: 8px; padding: 12px 8px; background: rgba(20,4,8,.7); min-height: 96px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.coop-player.you { border-color: var(--blood); }
.coop-player.mate { border-color: var(--mate, #5ae8ff); box-shadow: 0 0 14px color-mix(in srgb, var(--mate, #5ae8ff) 30%, transparent); }
.coop-player.empty { border-style: dashed; opacity: .75; }
/* mirror match: your ghost (mirror.js) */
.coop-player.ghost { border-color: #6a8ac0; background: rgba(40,60,100,.25); opacity: .72; animation: ghostDrift 3s ease-in-out infinite; }
.coop-player.ghost .cp-name { color: #cfe8ff; text-shadow: 0 0 10px rgba(150,200,255,.9); }
@keyframes ghostDrift { 50% { transform: translateY(-4px); opacity: .5; } }
.cp-name { font-size: 22px; letter-spacing: 4px; color: var(--gold); }
.coop-player.mate .cp-name { color: var(--mate, #5ae8ff); }
.coop-player.empty .cp-name { color: #6a4a4a; animation: blink 1.1s steps(2) infinite; }
.cp-meta { font-size: 7px; line-height: 1.8; color: #cab; }
.cp-tag { font-size: 7px; letter-spacing: 1px; color: #a88; }
.coop-world { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 6px; }
.coop-world > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.coop-world small { font-size: 7px; letter-spacing: 3px; color: #a88; }
.coop-world em { font-style: normal; font-size: 7px; line-height: 1.7; letter-spacing: 1px; color: #cab; }
#coop-kind span { color: var(--mate, #5ae8ff); }
.coop-world span { font-family: 'Creepster', cursive; font-size: 22px; color: var(--blood); text-shadow: 2px 2px 0 #000; }
#coop-back { margin-top: 16px; min-width: min(320px, 80vw); }
.coop-mvp { font-size: clamp(12px, calc(var(--u) * 1.8), 18px); letter-spacing: 3px; color: var(--gold); text-shadow: 0 0 12px var(--ember); }
/* VS: round pips on the results screen, rival score in pink when they're ahead */
.vs-rounds { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 10px; letter-spacing: 2px; color: var(--gold); margin-bottom: 12px; }
.vs-rounds em { font-style: normal; }
.vs-rounds b { font-weight: 400; color: #a88; margin: 0 6px; }
.vs-rounds i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #5a2a32; }
.vs-rounds i.on.me { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px var(--ember); }
.vs-rounds i.on.rival { background: #ff4fa0; border-color: #ff4fa0; box-shadow: 0 0 10px #ff4fa0; }
#hud-best-box.rival-lead #hud-best { color: #ff4fa0; }
/* no restarting a shared match from the pause menu */
body.online #scr-pause [data-action="restart"] { display: none; }
/* online menu: the Bone Pit button, and the host's public / private switch in a room */
.coop-pit { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.coop-pit small { font-size: 7px; letter-spacing: 1px; color: #ffd0c0; }
.coop-public {
    font: inherit; font-size: 8px; letter-spacing: 1px; padding: 10px 12px; margin: -6px 0 14px; cursor: pointer;
    color: #cab; background: transparent; border: 2px dashed #5a1822; border-radius: 4px;
}
.coop-public.on { color: #7fdc6a; border: 2px solid #3a7a2a; box-shadow: 0 0 10px rgba(127,220,106,.2); }