/* Chơi cùng nhau (js/ext_netwin.js): chỉ bố cục; nút, ô gõ, thẻ dùng css/kit.css */
.win-net { width: 420px; }
.nw { display: flex; flex-direction: column; gap: 8px; }
.nw-state { font-size: 13px; line-height: 1.5; }
.nw-row { display: flex; align-items: center; gap: 8px; }
.nw-row > span { flex: none; width: 76px; font-family: var(--f-head); font-weight: 700; }
.nw-row > input { flex: 1; min-width: 0; }
.nw-row > button { flex: none; }
.nw-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.nw-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.nw-link { width: 100%; }
.nw-people:empty { display: none; }
.nw-people { display: flex; flex-direction: column; gap: 4px; padding: 6px 8px; border-radius: 10px; background: rgba(42, 36, 53, .06); }
.nw-p { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
.nw-p b { text-shadow: 0 1px 0 #2a2435, 0 -1px 0 #2a2435, 1px 0 0 #2a2435, -1px 0 0 #2a2435; }
.nw-p span { margin-left: auto; opacity: .8; font-size: 12px; }
#mm-panel .nw { padding: 4px 2px; }
.nw .hint { color: #6a5a48; }
@media (max-width: 520px) { .win-net { width: calc(100vw - 32px); } }

/* danh sách người online (js/ext_netview.js): bám dưới khung nhiệm vụ, cùng cỡ với nó */
#net-list { position: fixed; right: 12px; width: 230px; padding: 6px 9px; font-size: 12px; pointer-events: auto; }
#net-list .nl-h { display: flex; justify-content: space-between; gap: 6px; cursor: pointer; font-weight: 700; }
#net-list .nl-p { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
#net-list .nl-p b { flex: none; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
#net-list .nl-p span { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85; font-size: 11px; }

/* tổ đội (js/ext_partywin.js) */
.win-party { width: 560px; }
.pw { display: flex; flex-direction: column; gap: 8px; }
.pw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pw-top b { font-family: var(--f-head); font-size: 15px; }
.pw-top span { font-size: 12px; opacity: .85; }
.pw-mem { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pw-card { display: flex; gap: 8px; align-items: flex-start; min-height: 84px; }
.pw-free { justify-content: center; align-items: center; opacity: .55; font-size: 13px; }
.pw-por { flex: none; width: 64px; height: 72px; image-rendering: pixelated; background: rgba(42, 36, 53, .08); border-radius: 8px; }
.pw-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 13px; }
.pw-info b { text-shadow: 0 1px 0 #2a2435, 0 -1px 0 #2a2435, 1px 0 0 #2a2435, -1px 0 0 #2a2435; }
.pw-info small { font-size: 12px; opacity: .85; }
.pw-lead { font-style: normal; font-size: 11px; color: #a8620c; font-weight: 700; }
.pw-dot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #b8a888; vertical-align: 0; }
.pw-dot.on { background: #4ab06a; }
.pw-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pw-btns .btn, .pw-rule .btn, .pw-p .btn { padding: 2px 8px; font-size: 12px; }
.pw-rules { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.pw-rule { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pw-rule > span { width: 52px; font-family: var(--f-head); font-weight: 700; }
.pw-inv { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.pw-p { display: flex; align-items: center; gap: 8px; }
.pw-p b { text-shadow: 0 1px 0 #2a2435, 0 -1px 0 #2a2435, 1px 0 0 #2a2435, -1px 0 0 #2a2435; }
.pw-p span { flex: 1; font-size: 12px; opacity: .85; }
.pw-log { font-size: 12px; opacity: .85; }
.pw-empty { font-size: 13px; line-height: 1.5; }
.pw .hint { color: #6a5a48; }
#party-ask { position: fixed; top: 96px; left: 50%; transform: translateX(-50%); z-index: 60; min-width: 280px; text-align: center; pointer-events: auto; }
#party-ask .pa-t { font-size: 14px; }
#party-ask small { display: block; margin-top: 2px; font-size: 12px; opacity: .8; }
#party-ask .pa-b { display: flex; justify-content: center; gap: 8px; margin: 8px 0 6px; }
#party-ask .pa-bar { height: 5px; border-radius: 3px; background: rgba(42, 36, 53, .18); overflow: hidden; }
#party-ask .pa-bar i { display: block; height: 100%; background: var(--sky-d, #4a7ae8); }
#party-list { position: fixed; width: 200px; padding: 6px 9px; font-size: 12px; cursor: pointer; pointer-events: auto; }
#party-list .pl-h { font-weight: 700; margin-bottom: 2px; }
#party-list .pl-r { margin-top: 4px; }
#party-list .pl-n { display: flex; align-items: baseline; gap: 5px; }
#party-list .pl-n b { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 1px 0 #000, 0 -1px 0 #000, 1px 0 0 #000, -1px 0 0 #000; }
#party-list .pl-n em { font-style: normal; font-size: 10px; color: #ffd873; }
#party-list .pl-n span { margin-left: auto; font-size: 11px; opacity: .85; }
#party-list .pl-n small { font-size: 10px; color: #ffb070; }
#party-list .pl-hp { height: 4px; margin-top: 2px; border-radius: 2px; background: #3b3346; overflow: hidden; }
#party-list .pl-hp i { display: block; height: 100%; }
@media (max-width: 620px) { .win-party { width: calc(100vw - 32px); } .pw-mem { grid-template-columns: 1fr; } }