/* The friends panel and the drawers (client/friends.js, client/drawer.js, client/mail.js): the lobby's (index.html) and the
   game page's (proto/map.html, its เพื่อน button in an online room) share these. The lobby's palette, on whatever holds
   them, so the game page's own colours never leak in. */
.frbtn, .frtoast, dialog.drawer {
  --ink: #1A1320; --yel: #F2C94C; --lime: #9BE15D; --cyan: #5FD3FF; --orange: #FF6B35; --bg: #0E1F3D; --panel: #172A4F; --bar: #0F1D3A;
  --line: #2D4679; --text: #EEF1F6; --muted: #B3C0D8; --head: #F2C94C; --val: #9BE15D; --err: #FF8A80; --off-text: #C3CCDD;
}
/* ---------- เพื่อน (client/friends.js): the header button after เพชร and before ⚙ with its two badges, the panel, the toast of an invite ---------- */
.frbtn { position: relative; }
.frbtn svg { width: 31px; height: 31px; }
.frbadge, .fron { position: absolute; right: -9px; min-width: 22px; height: 22px; padding: 0 5px; font: 900 12px/18px Kanit, Tahoma, sans-serif; text-align: center;
  border: 2px solid var(--ink); border-radius: 11px; pointer-events: none; }
.frbadge { top: -9px; color: #fff; background: var(--orange); }
.fron { bottom: -8px; color: var(--ink); background: var(--lime); }
.frbadge[hidden], .fron[hidden] { display: none; }
.frtoast { position: fixed; right: 24px; top: 92px; z-index: 60; display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 8px 6px 8px 14px;
  color: var(--ink); background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 0 5px 0 var(--ink); font-size: 14px; line-height: 1.35; }
.frtoast[hidden] { display: none; }
.frtoast p { flex: 1 1 auto; min-width: 0; margin: 0; }
.frtoast .btn { flex: none; min-height: 38px; padding: 0 12px; font-size: 14px; }
.frx { flex: none; width: 38px; height: 38px; padding: 0; font: 900 16px Kanit, Tahoma, sans-serif; color: var(--ink); background: none; border: 0; border-radius: 8px; cursor: pointer; }

/* ---------- a drawer (client/drawer.js): a sticker panel from the right, under the header button that opens it and full
   height below it; phones in landscape: full height, 320 px; a narrow portrait: the whole screen. The friends panel's,
   and any sibling's of the header: .drawer-head (a title, a count, ✕), .drawer-body (it scrolls), .drawer-foot (the live
   line), .drawer-tabs (a segmented control) and .drawer-pane, .drawer-gh (a group's heading; .drawer-fold folds it),
   .drawer-list of .drawer-row (48 px), .drawer-menu (a ⋯ menu; .danger, .sure), .drawer-empty, .ibtn (an icon button: .go
   lime, .cy cyan, .yel, .flat, .sm), .switch ---------- */
dialog.drawer { position: fixed; inset: var(--drawer-top, 96px) var(--drawer-right, 16px) 16px auto; width: min(360px, calc(100vw - 32px)); height: auto;
  max-width: none; max-height: none; margin: 0; padding: 0; overflow: hidden; color: var(--text); background: var(--panel);
  border: 3px solid var(--ink); border-radius: 20px; box-shadow: 0 8px 0 var(--ink), 0 18px 40px rgba(0, 0, 0, .35); }
dialog.drawer[open] { display: flex; flex-direction: column; animation: drawer-in .18s ease-out; }
dialog.drawer::backdrop { background: rgba(14, 22, 44, .38); }
@keyframes drawer-in { from { transform: translateX(calc(100% + 32px)); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { dialog.drawer[open] { animation: none; } }
.drawer-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; color: var(--ink); background: var(--yel); border-bottom: 3px solid var(--ink); }
.drawer-head h2 { font-size: 19px; font-weight: 900; line-height: 1.2; }
.drawer-count { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; font-size: 13px; font-weight: 700; line-height: 20px; white-space: nowrap; background: #fff; border: 2px solid var(--ink); border-radius: 999px; }
.drawer-count::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--ink); }
.drawer-count:empty { display: none; }
.drawer-x { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin-left: auto; padding: 0; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 2px 0 var(--ink); cursor: pointer; }
.drawer-x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.drawer-x:active, .ibtn:active { transform: translateY(2px); box-shadow: none; }
.drawer-body { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.drawer-foot { flex: none; margin: 0; padding: 6px 12px; font-size: 13px; line-height: 1.35; background: var(--bar); border-top: 2px solid var(--ink); }
.drawer-foot:empty { display: none; }
.drawer-tabs { position: sticky; top: 0; z-index: 2; flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; padding: 3px; background: var(--bar); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 -10px 0 var(--panel); }
.drawer-tab { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 0; min-height: 32px; padding: 0 8px; font: 900 14px/1 Kanit, Tahoma, sans-serif; white-space: nowrap; color: var(--muted); background: none; border: 0; border-radius: 9px; cursor: pointer; }
.drawer-tab:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.drawer-tab[aria-selected=true] { color: var(--ink); background: var(--yel); box-shadow: inset 0 0 0 2px var(--ink); }
.drawer-badge { min-width: 19px; height: 19px; padding: 0 4px; font: 900 11px/15px Kanit, Tahoma, sans-serif; text-align: center; color: #fff; background: var(--orange); border: 2px solid var(--ink); border-radius: 10px; }
.drawer-badge[hidden] { display: none; }
.drawer-pane { display: grid; gap: 2px; align-content: start; }
.drawer-pane[hidden] { display: none; }
.drawer-gh { display: flex; align-items: center; gap: 6px; margin: 6px 4px 2px; font-size: 12px; font-weight: 900; line-height: 18px; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); }
.drawer-pane > .drawer-gh:first-child { margin-top: 0; }
.drawer-gh.on { color: var(--val); } .drawer-gh.match { color: var(--yel); }
.drawer-fold { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 26px; padding: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: start; color: inherit; background: none; border: 0; cursor: pointer; }
.drawer-fold svg { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s; }
.drawer-fold[aria-expanded=false] svg { transform: rotate(-90deg); }
.drawer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.drawer-list[hidden] { display: none; }
.drawer-row { --row: var(--panel); position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 5px 6px 5px 8px; background: var(--row); border-radius: 10px; }
.drawer-row:hover, .drawer-row:focus-within, .drawer-row.open { --row: #22396A; }
.drawer-row.open { z-index: 3; }
.drawer-empty { display: grid; justify-items: center; gap: 10px; padding: 16px 8px; text-align: center; font-size: 14px; color: var(--muted); }
.drawer-empty .btn { min-height: 36px; padding: 0 14px; font-size: 14px; box-shadow: 0 3px 0 var(--ink); }
.drawer-empty .btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linejoin: round; }
.drawer-menu { position: absolute; z-index: 4; right: 0; top: calc(100% + 4px); display: grid; min-width: 160px; padding: 4px; background: #fff; border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 4px 0 var(--ink); }
.drawer-menu[hidden] { display: none; }
.drawer-menu [role=menuitem] { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; font: 700 14px Kanit, Tahoma, sans-serif; white-space: nowrap; text-align: start; color: var(--ink); background: none; border: 0; border-radius: 7px; cursor: pointer; }
.drawer-menu [role=menuitem]:hover, .drawer-menu [role=menuitem]:focus-visible { background: #EEF1F6; }
.drawer-menu [role=menuitem] svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.drawer-menu .danger { color: #B3261E; } .drawer-menu .danger:hover, .drawer-menu .danger:focus-visible { background: #FDE7E4; }
.drawer-menu .sure, .drawer-menu .sure:hover, .drawer-menu .sure:focus-visible { color: #fff; background: #C0392B; }
.ibtn { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; color: var(--ink); background: #fff; border: 2px solid var(--ink); border-radius: 9px; box-shadow: 0 2px 0 var(--ink); cursor: pointer; }
.ibtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.ibtn:hover { filter: brightness(1.06); }
.ibtn.go, .ibtn.done { background: var(--lime); } .ibtn.cy { background: var(--cyan); } .ibtn.yel { background: var(--yel); }
.ibtn.flat { color: var(--text); background: none; border-color: transparent; box-shadow: none; }
.ibtn.flat:hover, .ibtn.flat[aria-expanded=true] { background: rgba(255, 255, 255, .12); }
.ibtn.flat svg { stroke-width: 3.6; }
.ibtn.sm { width: 28px; height: 28px; border-radius: 8px; } .ibtn.sm svg { width: 15px; height: 15px; }
.switch { position: relative; display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 28px; font-size: 13px; font-weight: 700; line-height: 1.3; cursor: pointer; }
.switch input { position: absolute; left: 0; top: 50%; width: 36px; height: 22px; margin: -11px 0 0; opacity: 0; cursor: pointer; }
.switch-tr { flex: none; position: relative; width: 36px; height: 22px; background: #56617E; border: 2px solid var(--ink); border-radius: 11px; transition: background .15s; }
.switch-tr::after { content: ''; position: absolute; left: 2px; top: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; box-shadow: 0 1px 0 var(--ink); transition: transform .15s; }
.switch input:checked + .switch-tr { background: var(--lime); }
.switch input:checked + .switch-tr::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-tr { outline: 3px solid var(--cyan); outline-offset: 2px; }
/* the friends drawer's own parts (client/friends.js): your ID, the search and its results, a friend's row */
.frme { display: grid; gap: 4px; padding: 0 2px; }
.frid { display: flex; align-items: center; gap: 8px; min-width: 0; }
.frid-l { font-size: 12px; font-weight: 900; letter-spacing: .5px; color: var(--muted); }
.frcode { font: 900 18px/1.2 Kanit, Tahoma, sans-serif; letter-spacing: 1px; white-space: nowrap; color: var(--head); font-variant-numeric: tabular-nums; text-shadow: 1px 1px 0 var(--ink); -webkit-user-select: all; user-select: all; }
.frcopied { font-size: 12px; font-weight: 700; color: var(--val); }
.frcopied:empty { display: none; }
.frfind { display: grid; gap: 4px; }
.frq { position: relative; }
.frq input { width: 100%; min-height: 40px; padding: 0 44px 0 12px; font: 700 15px Kanit, Tahoma, sans-serif; color: var(--text); background: var(--bar); border: 2px solid var(--line); border-radius: 10px; }
.frq input::placeholder { color: #8391AE; }
.frq input:focus-visible { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(95, 211, 255, .3); }
.frq > .ibtn { position: absolute; right: 4px; top: 4px; }
.frmsg { margin: 0; padding: 0 4px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.frmsg.err { color: var(--err); }
.frmsg:empty { display: none; }
.frdrop { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); display: grid; gap: 2px; max-height: min(300px, 55vh); overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--panel); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 0 5px 0 var(--ink), 0 12px 28px rgba(0, 0, 0, .45); }
.frdrop[hidden] { display: none; }
.frava { flex: none; display: grid; place-items: center; width: 32px; height: 32px; overflow: hidden; color: var(--ink); background: var(--c, var(--navy-hi)); border: 2px solid var(--ink); border-radius: 50%; font-size: 14px; font-weight: 900; }
.frava img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.drawer-row.off .frava { filter: saturate(.35) brightness(.85); }
.drawer-row.off .frname { color: var(--off-text); }
.frwho { flex: 1 1 auto; min-width: 0; display: grid; line-height: 1.3; }
.frtop { display: flex; align-items: center; gap: 6px; min-width: 0; }
.frname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.frtop .lv { font-size: 11px; line-height: 14px; padding: 0 4px; border-radius: 6px; }
.frsub, .frst { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
.frdot { display: inline-block; width: 8px; height: 8px; margin-right: 5px; vertical-align: 1px; border-radius: 50%; background: #7C86A0; }
.frst.on { color: var(--val); } .frst.on .frdot { background: var(--lime); box-shadow: 0 0 0 2px rgba(155, 225, 93, .3); }
.frst.match { color: var(--yel); } .frst.match .frdot { background: var(--yel); }
.fract { flex: none; display: flex; align-items: center; gap: 4px; }
.frmore { position: relative; display: flex; }
.fract .btn.frsm { min-height: 30px; padding: 0 10px; font-size: 13px; border-width: 2px; border-radius: 9px; box-shadow: 0 2px 0 var(--ink); }
.fract .btn.go { background: var(--lime); }
.fract .btn.watch { display: inline-flex; align-items: center; gap: 4px; background: var(--cyan); } /* ดู: watch a friend's match (DESIGN.md §8 Spectators) */
.fract .btn.watch svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.frtag { font-size: 12px; font-weight: 700; white-space: nowrap; color: var(--muted); }
.drawer-row.frinv, .drawer-row.frinv:hover, .drawer-row.frinv:focus-within { --row: #FFF6D2; margin-bottom: 4px; color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.drawer-row.frinv .frsub { color: #6B5A2E; }
.frlock { display: grid; gap: 10px; padding: 6px 0 2px; text-align: center; font-size: 13px; font-weight: 500; letter-spacing: -.1px; }
.frlock .btns { justify-content: center; }
.frlock .btn { min-height: 36px; padding: 0 12px; font-size: 14px; box-shadow: 0 3px 0 var(--ink); }
.frwait { padding: 12px 4px; }
/* locked (a guest, the test profile, the server's no): the drawer only as tall as its line (a computer; phones keep it whole) */
@media (min-width: 481px) and (min-height: 501px) { dialog.drawer:has(.frlock) { bottom: auto; max-height: calc(100dvh - var(--drawer-top, 96px) - 16px); } }
/* a mouse: a friend's buttons show on hover and focus, over the end of its status line; touch: always */
@media (hover: hover) and (pointer: fine) {
  .drawer-row.fr .fract { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); padding-left: 22px; background: linear-gradient(to right, transparent, var(--row) 18px); opacity: 0; pointer-events: none; }
  .drawer-row.fr:hover .fract, .drawer-row.fr:focus-within .fract, .drawer-row.fr.open .fract { opacity: 1; pointer-events: auto; }
}
@media (hover: none), (pointer: coarse) { .ibtn { width: 36px; height: 36px; } .ibtn.sm { width: 32px; height: 32px; } .frq input { min-height: 44px; } }
@media (max-height: 500px) {
  dialog.drawer { inset: 0 0 0 auto; width: min(320px, 100vw); padding-right: var(--sa-r, env(safe-area-inset-right)); border-width: 0 0 0 3px; border-radius: 16px 0 0 16px; box-shadow: -6px 0 0 rgba(26, 19, 32, .35); }
  .drawer-body { padding-bottom: max(12px, var(--sa-b, env(safe-area-inset-bottom))); }
}
@media (max-width: 480px) { dialog.drawer { inset: 0; width: auto; padding: var(--sa-t, env(safe-area-inset-top)) 0 var(--sa-b, env(safe-area-inset-bottom)); border: 0; border-radius: 0; box-shadow: none; } }