/* =================================================================== social: HUD icons, the chat tabs, the Players window
   client/js/chat.js (the chat panel: Global | Party | System), client/js/social.js (icons, Players / Friends / Party,
   profile cards). Classic style: blue gradient windows, gold for what is selected, M PLUS Rounded text (fonts.css).
   Sizes follow --k on the desktop HUD; with touch every target is >= 44 px (touch.css conventions). */

/* ---------- HUD icons: a column beside the minimap (settings, chat, party, players). Touch: round buttons in .t-sys ---------- */
#hud-icons { display: flex; flex-direction: column; gap: calc(6px * var(--k)); }
.hic { position: relative; width: calc(30px * var(--k)); height: calc(30px * var(--k)); padding: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); line-height: 1; }
.hic .si { --want: calc(30px * var(--k) * 0.72); display: block; }
.hic:hover { border-color: var(--gold); }
.hic.on, .touch-btn.on[data-chat-btn], .touch-btn.on[data-players-btn], .touch-btn.on[data-party-btn] { border-color: var(--gold); box-shadow: 0 0 0 2px #0a0e30, 0 0 10px rgba(255, 227, 106, 0.55); }
html.touch #hud-icons { display: none; }
.touch-btn .si { --want: 54cqmin; display: block; }
/* badges: red = something for you (unread chat, friend requests, a ready check), green = party size, pink = a whisper */
.hbadge { position: absolute; top: -6px; right: -6px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: #e0403a; border: 1.5px solid #fff;
  color: #fff; font: 600 11px/14px var(--num); text-align: center; pointer-events: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6); font-variant-numeric: tabular-nums; }
.hbadge.info { background: #2f8a3a; }
.hbadge.whisper, .cbadge.whisper { background: #d0479a; }
.t-sys .hbadge { top: -3px; right: -3px; }

/* ---------- the chat panel: tabs, panes, ticker ---------- */
#logbox .loghead { display: flex; align-items: center; gap: 4px; height: auto; margin: 1px -4px 3px; justify-content: flex-start; }
.ctabs { display: flex; gap: 3px; flex: 1; min-width: 0; }
.ctab { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 1px calc(10px * var(--k)); border-radius: 6px; border: 1px solid rgba(201, 210, 255, 0.35);
  background: rgba(6, 10, 36, 0.55); color: var(--dim); font: 600 calc(13px * var(--k)) var(--font); cursor: pointer; white-space: nowrap; }
.ctab:hover { color: var(--ink); border-color: rgba(255, 227, 106, 0.7); }
.ctab.on { background: linear-gradient(#ffe88a, #e8b830); color: #141832; border-color: #fff; }
.cbadge { min-width: 16px; height: 15px; padding: 0 4px; border-radius: 8px; background: #e0403a; color: #fff; font-size: 11px; line-height: 15px; text-align: center; font-weight: 600; }
.ctab[data-tab="system"] .cbadge { background: #5a6496; }   /* the game's own messages: a quiet badge */
#log-toggle, #chat-x { flex: none; width: calc(22px * var(--k)); height: calc(18px * var(--k)); padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 5px;
  border: 1px solid rgba(201, 210, 255, 0.35); background: rgba(6, 10, 36, 0.55); color: var(--dim); font: calc(9px * var(--k)) var(--pixel); cursor: pointer; }
#log-toggle .pxi { --want: 8px; transition: transform 0.15s; }
#log-toggle.on .pxi { transform: rotate(180deg); }
#chat-x .pxi { --want: 8px; }
#log-toggle:hover, #chat-x:hover { color: var(--gold); border-color: var(--gold); }
.cpane[hidden] { display: none !important; }
#log .cempty { color: var(--dim); font-style: italic; white-space: normal; font-size: 0.92em; }
#log .chat { cursor: pointer; border-radius: 3px; }
#log .chat.own { cursor: default; }
#log .chat:not(.own):hover { background: rgba(255, 255, 255, 0.07); }
#log .chat[data-ch="whisper"] { background: rgba(208, 71, 154, 0.12); }
/* a line from the game's staff: their GM / MOD badge first (client/js/staffbadge.js, style.css .stfb) */
#log .chat .stfb, .tline .stfb { --want: 1.1em; margin: -0.1em 0.3em 0 0; }
#logbox[data-tab="party"] #chat:focus { border-color: #9be37a; }
/* closed: no window, just the newest lines for a few seconds (tap / click them to open the chat) */
#ticker { display: none; }
#logbox.closed { background: none !important; border-color: transparent !important; box-shadow: none !important; border-image: none !important; padding: 0; pointer-events: none; opacity: 1 !important; }
#logbox.closed > :not(#ticker) { display: none !important; }
#logbox.closed #ticker { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; pointer-events: auto; cursor: pointer; }
#ticker:empty { pointer-events: none; }
.tline { max-width: 100%; padding: 1px 8px; border-radius: 4px; background: rgba(10, 14, 48, 0.74); font-size: calc(14px * var(--k)); line-height: 1.3; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; animation: tickfade 7s forwards; }
.tline[data-pre]::before { content: attr(data-pre) " · "; color: #9be37a; font-size: 0.85em; }
.tline[data-ch="whisper"]::before { color: #ff9ad8; }
@keyframes tickfade { 0% { opacity: 0; transform: translateY(4px); } 5%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* touch: 44 px tabs and buttons, the input shows while the panel is open, the history scrolls with a finger */
html.touch .ctab { min-height: 44px; padding: 0 12px; font-size: 14px; }
html.touch #log-toggle, html.touch #chat-x { width: 44px; height: 44px; font-size: 10px; }
html.touch #log-toggle::after { content: none; }
html.touch #logbox:not(.closed) #log { overflow-y: auto; }
html.touch:not(.chatting) #logbox:not(.closed) #chat { position: static; width: 100%; height: 44px; padding: 4px 10px; margin: 4px 0 0; border: 1px solid rgba(201, 210, 255, 0.35); opacity: 0.85; pointer-events: auto; }
html.form-phone #log-toggle { display: none; }   /* phones: the log scrolls; Menu > Chat & message log makes it tall */
html.form-phone.touch .ctab { padding: 0 10px; }
html.form-phone .tline { font-size: 13px; }
html.form-phone.portrait #logbox.expanded #log { height: min(24vh, calc(380px * var(--k))); }   /* between the top HUD and the controls */

/* ---------- the Players window ---------- */
#social { position: fixed; z-index: 28; right: calc(12px + var(--sar)); top: calc(var(--sat) + 160px * var(--k)); width: min(calc(400px * var(--k)), calc(100vw - 24px - var(--sal) - var(--sar)));
  height: min(calc(560px * var(--k)), calc(var(--vh) - var(--sat) - 160px * var(--k) - var(--abar-h) - 28px - var(--sab))); min-height: min(260px, calc(var(--vh) - 24px));
  display: flex; flex-direction: column; padding: calc(8px * var(--k)) calc(10px * var(--k)); font-size: calc(14px * var(--k)); animation: pop 0.12s ease-out; }
html.touch #social { left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); width: min(calc(560px * var(--k)), calc(100vw - 16px - var(--sal) - var(--sar)));
  height: min(calc(680px * var(--k)), calc(var(--vh) - 16px - var(--sat) - var(--sab))); min-height: 0; animation: popc 0.12s ease-out; }
.sw-head { display: flex; align-items: center; gap: 6px; padding-bottom: 6px; border-bottom: 1px solid rgba(201, 210, 255, 0.3); flex: none; }
.sw-tabs { display: flex; gap: 4px; flex: 1; min-width: 0; }
.sw-tab { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 3px 6px; border-radius: 6px; border: 2px solid var(--slot-line); background: var(--slot);
  color: var(--ink); font: 600 calc(13px * var(--k)) var(--font); cursor: pointer; white-space: nowrap; }
.sw-tab:hover { border-color: var(--gold); }
.sw-tab.on { background: linear-gradient(#ffe88a, #e8b830); border-color: #fff; color: #141832; }
.sw-n { font-size: 0.85em; opacity: 0.8; }
.sw-x { flex: none; width: calc(28px * var(--k)); height: calc(28px * var(--k)); padding: 0; border-radius: 5px; border: 1px solid var(--win-border); background: var(--slot); color: var(--ink); font: calc(9px * var(--k)) var(--pixel); cursor: pointer; }
.sw-x:hover { border-color: var(--gold); color: var(--gold); }
.sw-x .pxi { --want: calc(13px * var(--k)); }   /* the close glyph the size of every window's (windows.css), not the 9 px font's */
.sw-body, .pf { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding-top: 6px; }
#social.carded .sw-body { display: none; }
.sw-ctl { display: flex; flex-direction: column; gap: 6px; flex: none; }
.sw-search, .sw-add input { width: 100%; min-width: 0; padding: 5px 9px; font: calc(14px * var(--k)) var(--font); color: var(--ink); background: rgba(6, 10, 36, 0.6);
  border: 1px solid rgba(201, 210, 255, 0.4); border-radius: 6px; outline: none; }
.sw-search:focus, .sw-add input:focus { border-color: var(--gold); }
.sw-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.sw-chip { display: inline-flex; gap: 5px; align-items: center; padding: 2px 9px; border-radius: 12px; border: 1px solid rgba(201, 210, 255, 0.4); background: rgba(6, 10, 36, 0.55);
  color: var(--ink); font: calc(12px * var(--k)) var(--font); cursor: pointer; }
.sw-chip .num { color: var(--gold); }
.sw-chip:hover { border-color: var(--gold); }
.sw-chip.on { background: linear-gradient(#ffe88a, #e8b830); color: #141832; border-color: #fff; }
.sw-chip.on .num { color: #141832; }
.sw-list, .sw-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; padding-right: 2px; overscroll-behavior: contain; }
.sw-row, .sw-mem { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 6px; background: rgba(6, 10, 36, 0.35); border: 1px solid transparent; min-height: calc(40px * var(--k)); flex: none; }
.sw-row { cursor: pointer; }
.sw-row:hover, .sw-row:focus-visible { border-color: rgba(255, 227, 106, 0.6); background: rgba(255, 255, 255, 0.06); outline: none; }
.sw-row.self, .sw-mem.self { background: rgba(255, 227, 106, 0.08); }
.sw-row.off { opacity: 0.75; }
.sw-mem.down { opacity: 0.55; filter: grayscale(0.8); }
.sw-pw { position: relative; flex: none; }
.sw-pt { width: calc(32px * var(--k)); height: calc(32px * var(--k)); image-rendering: pixelated; border: 2px solid var(--win-border); border-radius: 4px; background: #0c1240; display: block; flex: none; }
.dot { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: #5a628a; border: 2px solid #0a0e30; }
.dot.on { background: #5ae05a; box-shadow: 0 0 5px rgba(90, 224, 90, 0.8); }
.sw-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sw-name { display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; font-size: calc(14px * var(--k)); }
.sw-lv { font-size: calc(12px * var(--k)); }
.sw-sub { font-size: calc(12px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; }
.sw-where { flex: none; max-width: 42%; text-align: right; font-size: calc(12px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sw-name .sw-staff { --want: calc(15px * var(--k)); }   /* the game's staff: GM / MOD before the name (client/js/staffbadge.js) */
.sw-tag { padding: 0 5px; border-radius: 7px; font-size: calc(10px * var(--k)); line-height: 1.5; background: #9be0ff; flex: none; }
.sw-tag.you { background: var(--gold); }
.sw-tag.pty { background: #9be37a; }
.sw-tag.fr { background: none; padding: 0; font-size: calc(13px * var(--k)); }
.sw-tag.req { background: #ff9ad8; }
.sw-tag.sent { background: rgba(255, 255, 255, 0.12); }
.sw-tag.blk { background: rgba(255, 80, 60, 0.25); }
.sw-acts { display: flex; gap: 4px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.sw-acts .sbtn { padding: 2px 8px; font-size: calc(12px * var(--k)); }
.sw-rd { margin-left: auto; }
.sw-mem .stat .num { font-size: calc(11px * var(--k)); min-width: calc(44px * var(--k)); }
.sw-mem .crown { line-height: 1; }
.sw-pager { display: flex; align-items: center; justify-content: center; gap: 10px; padding-top: 2px; flex: none; min-height: calc(24px * var(--k)); }
.sw-pg { min-width: 40px; }
.sw-pg[disabled] { opacity: 0.4; cursor: default; }
.sw-pgt { font-size: calc(12px * var(--k)); }
.sw-empty { padding: 14px 8px; text-align: center; color: var(--dim); line-height: 1.35; }
.sw-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 6px 0 2px; font-size: calc(13px * var(--k)); flex: none; }
.sw-fold { border: 0; background: none; cursor: pointer; padding: 0; width: 100%; text-align: left; font: inherit; color: inherit; }
.sw-add { display: flex; gap: 6px; flex: none; }
.sw-note { font-size: calc(12px * var(--k)); padding: 3px 8px; border-radius: 5px; flex: none; }
.sw-note.ok { background: rgba(90, 224, 90, 0.15); color: #bff5b0; }
.sw-note.bad { background: rgba(255, 90, 60, 0.15); color: #ffc0b0; }
.sbtn.go { background: linear-gradient(#ffe88a, #e8b830); color: #141832; border-color: #fff; }
.sbtn.bad { background: #5a1e2a; border-color: #c86a7a; }
.sbtn[disabled] { opacity: 0.5; cursor: default; }
.sw-btns { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.sw-foot { padding-top: 6px; border-top: 1px solid rgba(201, 210, 255, 0.25); flex: none; }
.sw-party0 { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 18px 10px; line-height: 1.35; }
.sw-party0 .si { --want: 48px; }
.sw-ready { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 227, 106, 0.12); border: 1px solid rgba(255, 227, 106, 0.5); flex: none; }

/* ---------- profile card ---------- */
.pf { gap: 6px; }
.pf-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 8px; padding-right: 2px; }
.pf[hidden] { display: none; }
.pf-top { display: flex; justify-content: space-between; align-items: center; flex: none; }
/* the rank chip: the rank's pixel emblem (pixicons.js rankIcon) and name on a plate in the rank's colour, pixel rims */
.pf-rank { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 3px; border-radius: 0; background: var(--rc, #cfd6e6); font-size: calc(11px * var(--k));
  box-shadow: inset 0 -2px rgba(16, 8, 24, 0.28), 0 0 0 2px #100818; }
.pf-rank .rk-em { --want: calc(16px * var(--k)); }
.pf-head { display: flex; gap: 10px; align-items: center; flex: none; }
.pf-pt { width: calc(64px * var(--k)); height: calc(64px * var(--k)); image-rendering: pixelated; border: 3px solid var(--win-border); border-radius: 6px; background: #0c1240; flex: none; }
.pf-id { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-name { font-size: calc(17px * var(--k)); font-weight: 600; overflow-wrap: anywhere; }
.pf-name .pf-badge { --want: calc(20px * var(--k)); margin: -0.15em 6px 0 0; }
/* the staff's card: who they are, and that staff never ask for a password (crimson and gold for a GM, blue for a MOD) */
.pf-staff { padding: 5px 8px; border-radius: 6px; border: 1px solid rgba(240, 176, 32, 0.6); background: rgba(196, 20, 58, 0.2); font-size: calc(13px * var(--k)); flex: none;
  display: flex; flex-direction: column; gap: 2px; }
.pf-staff.mod { border-color: rgba(54, 180, 238, 0.6); background: rgba(30, 79, 208, 0.22); }
.pf-sub, .pf-where { font-size: calc(13px * var(--k)); }
.pf-where { display: flex; align-items: center; gap: 5px; }
.pf-where .dot { position: static; flex: none; }
.pf-sec { padding: 6px 8px; border-radius: 6px; background: rgba(6, 10, 36, 0.4); display: flex; flex-direction: column; gap: 4px; flex: none; }
.pf-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: calc(13px * var(--k)); }
.pf-line { font-size: calc(14px * var(--k)); }
.bar.pf-bar { flex: none; }   /* the story bar: a blue pixel bar (style.css .bar) */
.pf-small { font-size: calc(11px * var(--k)); color: var(--dim); }
.pf-leg { font-size: calc(12px * var(--k)); }
.pf-mons { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 2px; }
.pf-mon { position: relative; }
.pf-mon img { width: calc(40px * var(--k)); height: calc(40px * var(--k)); image-rendering: pixelated; border: 2px solid var(--win-border); border-radius: 5px; background: #0c1240; display: block; }
.pf-mon.legend img { border-color: #ffd84a; box-shadow: 0 0 8px rgba(255, 216, 74, 0.55); }
.pf-mon .num { position: absolute; left: 0; right: 0; bottom: -3px; text-align: center; font-size: 10px; text-shadow: -1px 0 #000, 1px 0 #000, 0 -1px #000, 0 1px #000; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; flex: none; }
.pf-st { display: flex; flex-direction: column; gap: 1px; padding: 5px 6px; border-radius: 6px; background: rgba(6, 10, 36, 0.4); min-width: 0; }
.pf-st > span { font-size: calc(11px * var(--k)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-st b { font-size: calc(15px * var(--k)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-acts { padding-top: 6px; border-top: 1px solid rgba(201, 210, 255, 0.25); flex: none; }
.pf-self { text-align: center; }

/* touch: 44 px everything; phones: two stats per row, the location under the name */
html.touch .sw-tab, html.touch .sw-x, html.touch .sw-chip, html.touch .sw-pg, html.touch #social .sbtn { min-height: 44px; }
html.touch .sw-x { width: 44px; height: 44px; font-size: 11px; }
html.touch .sw-chip { padding: 0 12px; font-size: 14px; }
html.touch .sw-search, html.touch .sw-add input { min-height: 44px; font-size: 16px; }   /* >= 16 px: no iOS zoom */
html.touch .sw-row, html.touch .sw-mem { min-height: 52px; }
html.touch .sw-acts .sbtn { padding: 4px 12px; font-size: 14px; }
html.touch .sw-tab { font-size: 14px; }
html.form-phone .pf-stats { grid-template-columns: repeat(2, 1fr); }
html.form-phone.landscape .pf-acts { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; overscroll-behavior: contain; }   /* one row: the card keeps its height */
html.form-phone.landscape .pf-acts .sbtn { flex: none; }
html.form-phone .sw-where { display: none; }
html.form-phone.portrait .sw-row:has(.sw-acts) { flex-wrap: wrap; }
html.form-phone.portrait .sw-row .sw-acts { width: 100%; }

/* ---------- touch layouts for the top-right row (touch.js .t-sys): Chat, Party, Players, Squad, Menu ---------- */
/* landscape (phones, tablets): the row sits under the minimap so the zone bar keeps the top centre */
html.touch.landscape .maprow, html.form-tablet.touch .maprow { flex-direction: column-reverse; align-items: flex-end; }
html.touch.landscape .t-sys, html.form-tablet.touch .t-sys { flex-wrap: wrap; justify-content: flex-end; }
/* phones: Chat, Social, Squad, Menu (Party / Players / Pokédex live in the Social pop-over); tablets show every icon */
.t-sys .t-social { display: none; }
html.form-phone .t-sys .t-social { display: flex; }
html.form-phone .t-sys .t-party, html.form-phone .t-sys .t-players, html.form-phone .t-sys .t-dex { display: none !important; }
.t-social .t-more { position: absolute; left: 50%; bottom: 3px; width: 0; height: 0; transform: translateX(-50%); border: 4px solid transparent; border-top: 5px solid #e8eeff; border-bottom: 0; pointer-events: none; }
/* phone portrait: a 2-wide block under the minimap (a column would reach down to the player and the plaza bubbles) */
html.form-phone.portrait .maprow { flex-direction: column-reverse; align-items: flex-end; }
html.form-phone.portrait .t-sys { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; width: 94px; }
/* Settings > Minimap place "Under the buttons" (client/js/minimap.js sets html.mm-under, the default): the buttons keep the
   top-right corner (a row on the desktop), the minimap goes under them; "In the corner" is the layout above. */
html.mm-under .maprow, html.mm-under.touch.landscape .maprow, html.mm-under.form-tablet.touch .maprow, html.mm-under.form-phone.portrait .maprow { flex-direction: column; align-items: flex-end; }
html.mm-under #hud-icons { flex-direction: row; order: -1; }
/* the Players window (desktop) then opens under that row, like the cursor menus (--maprow-h, hud.js) */
html.mm-under:not(.touch) #social { top: calc(var(--sat) + 14px + var(--maprow-h)); height: min(calc(560px * var(--k)), calc(var(--vh) - var(--sat) - 14px - var(--maprow-h) - var(--abar-h) - 28px - var(--sab))); }
/* the Social pop-over */
.t-fan { position: fixed; z-index: 29; display: flex; flex-direction: column; gap: 4px; padding: 6px; min-width: 200px; animation: pop 0.12s ease-out; }
.t-fan-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 12px 4px 8px; border-radius: 8px; border: 2px solid var(--slot-line);
  background: var(--slot); color: var(--ink); font: 15px var(--font); cursor: pointer; text-align: left; touch-action: manipulation; }
.t-fan-row:active, .t-fan-row:hover { border-color: var(--gold); }
.t-fan-row > .pxi { --want: 24px; display: block; }
.t-fan-row .fl { flex: 1; }
.t-fan-row .hbadge { position: static; margin-left: 6px; }
.hbadge.gold { background: #e8b830; color: #141832; }

/* ROM UI (F9): the window frames and font as everywhere else */
body.rom-ui #social { padding: 0 2px; }