/* map channels (js/channels.js, design A picked 2026-10-24): a chip under the minimap, its list below it */
#chbtn { position: absolute; z-index: 881; transform: translateX(-50%); padding: 2px 11px 2px 10px; border: 1.5px solid #d9b25e; border-radius: 999px; background: rgba(24, 19, 13, 0.94); color: #ffe7a8; font: 700 13px/1.35 Fredoka, var(--thai, sans-serif); cursor: pointer; pointer-events: auto; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.6); white-space: nowrap; }
#chbtn[hidden] { display: none; }
#chbtn em { font-style: normal; color: #bba679; font-size: 11px; margin-left: 4px; }
#chbtn:hover, #chbtn.on { background: rgba(70, 52, 24, 0.95); }
#chmenu { position: absolute; z-index: 890; transform: translateY(30px); width: 256px; padding: 6px; border: 1.5px solid #d9b25e; border-radius: 12px; background: rgba(24, 19, 13, 0.97); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6); pointer-events: auto; }
#chmenu[hidden] { display: none; }
#chmenu .ch-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 8px; border: 0; border-radius: 8px; background: transparent; color: #f3e6c4; font: 500 13px var(--thai, sans-serif); text-align: left; cursor: pointer; }
#chmenu .ch-row span { white-space: nowrap; }
#chmenu .ch-row + .ch-row { margin-top: 2px; }
#chmenu .ch-row:hover { background: rgba(232, 194, 114, 0.1); }
#chmenu .ch-row b { width: 34px; font: 700 14px Fredoka, sans-serif; color: #ffe7a8; }
#chmenu .ch-row.me { background: rgba(232, 194, 114, 0.16); outline: 1px solid rgba(232, 194, 114, 0.5); cursor: default; }
#chmenu .ch-boss { padding: 0 6px; border-radius: 6px; background: #6b1f1a; color: #ffd2c4; font-size: 11px; }
#chmenu .ch-n { margin-left: auto; color: #bba679; }
#chmenu .ch-row.full .ch-n { color: #ff9a8a; }
#chmenu .ch-note { margin: 6px 4px 2px; color: #9c8a63; font: 400 11px var(--thai, sans-serif); text-align: center; }
@media (pointer: coarse) { #chbtn { padding: 5px 14px; font-size: 15px; } #chmenu .ch-row { padding: 10px; } }