/* Friends window (item 62, src/friends-ui.js): modal <dialog> in #game with the HUD's green/gold palette, the list
   scrolls inside, no continuous animation. Plus the request number on the left-menu button "เพื่อน". */
#adventure-navigation .adventure-nav-button[data-section="friends"]{position:relative}
#adventure-navigation [data-friends-badge]{position:absolute;top:-2px;right:2px;min-width:16px;height:16px;padding:0 4px;box-sizing:border-box;border:1px solid #fff3c4;border-radius:9px;background:#c8432f;color:#fffaf0;font:bold 10px/14px Tahoma,"Noto Sans Thai",sans-serif;text-align:center;text-shadow:none;pointer-events:none;box-shadow:0 1px 3px #0008}
#adventure-navigation [data-friends-badge][hidden]{display:none}
#game #friends-dialog{box-sizing:border-box;width:min(440px,calc(100vw - 24px));max-height:min(620px,calc(100dvh - 24px));margin:auto;padding:12px;border:2px solid #c9a75b;border-radius:14px;background:linear-gradient(#24392c,#1b2c22);color:#fff8dc;font:13px Tahoma,"Noto Sans Thai",sans-serif;box-shadow:0 10px 28px #000b;overflow:hidden;display:none;flex-direction:column;gap:8px}
#game #friends-dialog[open]{display:flex}
#game #friends-dialog::backdrop{background:#0007}
#friends-dialog .friends-head{display:flex;align-items:center;gap:8px}
#friends-dialog .friends-head h2{flex:1;margin:0;color:#f4dfa8;font-size:17px;letter-spacing:.5px}
#friends-dialog .friends-count{padding:2px 9px;border:1px solid #c9a75b88;border-radius:10px;background:#0003;color:#e8f6df;font-size:12px;font-variant-numeric:tabular-nums}
#friends-dialog .friends-close{flex:none;width:38px;height:38px;min-height:0;padding:0;border:1px solid #c9a75b99;border-radius:50%;background:#0003;color:#fff8dc;font:bold 20px/1 Tahoma,sans-serif;cursor:pointer}
#friends-dialog .friends-close:hover,#friends-dialog .friends-close:focus-visible{background:#8a3a2b}
#friends-dialog .friends-tabs{display:flex;gap:6px}
#friends-dialog .friends-tab{flex:1;min-height:38px;padding:6px 4px;border:1px solid #8fcf8a66;border-radius:9px;background:#0003;color:#e9ffe2;font:bold 12px Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer;white-space:nowrap}
#friends-dialog .friends-tab.active{border-color:#e2c172;background:#2f6b3a;color:#fff7d6}
#friends-dialog .friends-add{display:flex;gap:6px}
#friends-dialog .friends-name{flex:1;min-width:0;min-height:38px;box-sizing:border-box;padding:6px 9px;border:1px solid #8fcf8a88;border-radius:9px;background:#0b1a12;color:#fff8dc;font:13px Tahoma,"Noto Sans Thai",sans-serif}
#friends-dialog .friends-send{flex:none;min-height:38px;padding:6px 12px;border:1px solid #e2c172;border-radius:9px;background:#2f6b3a;color:#f2ffe9;font:bold 12px Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer}
#friends-dialog .friends-message{min-height:16px;margin:0;color:#cfe8c9;font-size:12px}
#friends-dialog .friends-message[data-kind="error"]{color:#ffb4a2}
#friends-dialog .friends-message[data-kind="ok"]{color:#c9f7b8}
#friends-dialog .friends-rows{flex:1 1 auto;min-height:80px;margin:0;padding:0 2px 0 0;overflow-x:hidden;overflow-y:auto;list-style:none;display:grid;align-content:start;gap:6px}
#friends-dialog .friends-row{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 8px;border:1px solid #8fcf8a33;border-radius:9px;background:#0002}
#friends-dialog .friends-row[data-state="offline"]{opacity:.75}
#friends-dialog .friends-dot{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px #0004}
#friends-dialog .friends-dot-online{background:#5fd35a}
#friends-dialog .friends-dot-afk{background:#e8c13d}
#friends-dialog .friends-dot-offline{background:#8b948d}
#friends-dialog .friends-main{flex:1;min-width:0;display:grid;gap:1px}
#friends-dialog .friends-top{display:flex;align-items:baseline;gap:6px;min-width:0}
#friends-dialog .friends-who{min-width:0;overflow:hidden;font-size:13px;font-weight:bold;text-overflow:ellipsis;white-space:nowrap}
#friends-dialog .friends-level{flex:none;color:#f4dfa8;font-size:11px}
#friends-dialog .friends-status{color:#cfe8c9;font-size:11px}
#friends-dialog .friends-where{overflow:hidden;color:#f4dfa8;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
#friends-dialog .friends-actions{flex:none;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;max-width:58%}
#friends-dialog .friends-actions button{min-width:52px;min-height:38px;padding:4px 8px;border:1px solid #8fcf8a88;border-radius:8px;background:#0004;color:#fff8dc;font:bold 11px Tahoma,"Noto Sans Thai",sans-serif;cursor:pointer;white-space:nowrap}
#friends-dialog .friends-actions button:hover,#friends-dialog .friends-actions button:focus-visible{background:#2f6b3a}
#friends-dialog .friends-actions .friends-accept{border-color:#e2c172;background:#2f6b3a}
#friends-dialog .friends-actions .friends-remove,#friends-dialog .friends-actions .friends-decline,#friends-dialog .friends-actions .friends-cancel{border-color:#ff9a7e88}
#friends-dialog .friends-actions .friends-remove:hover,#friends-dialog .friends-actions .friends-decline:hover,#friends-dialog .friends-actions .friends-cancel:hover{background:#b8452f}
#friends-dialog button:disabled{opacity:.55;cursor:wait}
#friends-dialog .friends-empty{padding:16px 8px;color:#cfe8c9;font-size:12px;text-align:center}
@media(max-width:480px){
 #game #friends-dialog{width:calc(100vw - 16px);padding:10px}
 #friends-dialog .friends-actions{max-width:52%}
 #friends-dialog .friends-actions button{min-width:44px;padding:4px 6px}
}
/* Landscape phones: short screens get the full height. */
@media(max-height:500px){#game #friends-dialog{max-height:calc(100dvh - 12px);padding:8px;gap:5px}#friends-dialog .friends-head h2{font-size:15px}}