/* Location sharing in the chat (2026-10-18, js/chatloc.js): the 📍 chip in a chat line, the 📍 แชร์พิกัด button, the share
   card (a note + the channel) and the card a tap on a chip opens (map, zone, distance, cost, วาร์ปไป). Obsidian gold. */

/* the chip: a tappable plate inside the chat line (the feed lets clicks through, the chip takes them) */
#chat .chat-line .cl-chip {
  pointer-events: auto; padding: 0 calc(5px * var(--u)); border: 1px solid rgba(255, 211, 107, 0.75); border-radius: calc(5px * var(--u));
  background: rgba(46, 33, 10, 0.78); color: #ffe7a8; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8); text-decoration: none;
}
#chat .chat-line .cl-chip:hover, #chat .chat-line .cl-chip:focus-visible { background: rgba(120, 84, 20, 0.9); border-color: #ffe08a; color: #fff6d8; outline: none; }
#chat .chat-line .cl-chip > * { white-space: nowrap; }   /* (a break falls between the parts, never inside "Lv 1–20") */
#chat .chat-line .cl-chip i { font-style: normal; margin-right: 2px; }
#chat .chat-line .cl-chip b { color: #ffd75a; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255, 215, 90, 0.45); text-underline-offset: 2px; }
#chat .chat-line .cl-chip span { color: #ffeec4; }
#chat .chat-line .cl-chip small { padding: 0 3px; border-radius: 3px; background: rgba(255, 211, 107, 0.2); color: #ffd98a; font-size: 0.86em; font-weight: 700; }
#chat .chat-line .cl-chip em { font-style: normal; color: #d9c9a2; font-size: 0.9em; }

/* 📍 แชร์พิกัด beside the chat's own button (it wears .chat-key's plate): both keep one line, the online count moves under
   them when the row is full; 📍 แชร์ on the map screen's pin bar and the world map card */
#chat .chat-foot { flex-wrap: wrap; row-gap: calc(3px * var(--u)); }
#chat .chat-foot .chat-key { flex: none; white-space: nowrap; }
#lmap .lm-pinbar [data-go="share"], #wmap .wm3-cbtns .wm3-share { white-space: nowrap; }

/* the two pop-ups */
.cl-pop {
  position: fixed; z-index: 970; width: 320px; max-width: calc(100vw - 12px); padding: 10px 12px 12px; border-radius: 10px; background: #16141b; color: #f2ead6;
  box-shadow: 0 0 0 1px rgba(217, 164, 67, 0.7), 0 0 0 3px #0b0a0e, 0 12px 28px rgba(0, 0, 0, 0.65); font-family: 'Mali', sans-serif; pointer-events: auto;
}
.cl-pop[hidden] { display: none; }
.cl-pop header { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; margin-bottom: 8px; border-bottom: 1px solid rgba(217, 164, 67, 0.35); }
.cl-pop header b { flex: 1; min-width: 0; font: 700 14.5px 'Mali', sans-serif; color: #f2c66a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cl-pop .cl-x { width: 28px; height: 28px; flex: none; border: 0; border-radius: 6px; background: #24212b; color: #e6d3a3; font: 700 14px sans-serif; cursor: pointer; }
.cl-pop .cl-x:hover { background: #3a2f22; color: #fff; }

/* the share card */
#clpick .cl-where { margin: 0 0 8px; font: 600 13.5px 'Mali', sans-serif; color: #f2ead6; line-height: 1.45; }
#clpick .cl-where b { color: #ffd98a; }
#clpick .cl-where small { display: block; font: 500 12px 'Mali', sans-serif; color: #a89a7c; }
#clpick .cl-note { width: 100%; box-sizing: border-box; margin: 0 0 8px; padding: 7px 10px; border: 1px solid rgba(217, 164, 67, 0.45); border-radius: 7px; background: #0e0d12; color: #fff;
  font: 500 13.5px 'Mali', sans-serif; user-select: text; -webkit-user-select: text; }
#clpick .cl-note:focus { outline: none; border-color: #f2c66a; }
#clpick .cl-chs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
#clpick .cl-chs button { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 44px; padding: 5px 10px; border: 1px solid rgba(217, 164, 67, 0.3); border-radius: 7px;
  background: #24212b; color: #f2ead6; text-align: left; cursor: pointer; }
#clpick .cl-chs button b { font: 700 13.5px 'Mali', sans-serif; }
#clpick .cl-chs button small { font: 500 11px 'Mali', sans-serif; color: #a89a7c; }
#clpick .cl-chs button:hover:not(:disabled), #clpick .cl-chs button:focus-visible { background: #3a2f22; border-color: #f2c66a; outline: none; }
#clpick .cl-chs button.def { border-color: rgba(242, 198, 106, 0.85); box-shadow: inset 0 0 0 1px rgba(242, 198, 106, 0.35); }
#clpick .cl-chs button:disabled { opacity: 0.42; cursor: default; }
#clpick .cl-chs button:last-child:nth-child(odd) { grid-column: 1 / -1; }
#clpick .cl-tip { margin: 8px 0 0; font: 500 11.5px 'Mali', sans-serif; color: #a89a7c; }

/* the card a chip opens */
#clcard .cl-map { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 8px; }
#clcard .cl-map > b { font: 700 17px 'Mali', sans-serif; color: #fff1cc; }
#clcard .cl-chipsx { display: flex; flex-wrap: wrap; gap: 5px; }
#clcard .cl-chipsx i { padding: 1px 7px; border-radius: 5px; font: 700 11.5px 'Mali', sans-serif; font-style: normal; background: rgba(255, 211, 107, 0.16); color: #ffd98a; }
#clcard .cl-chipsx i.st-hard { background: rgba(255, 90, 70, 0.2); color: #ff9c8a; }
#clcard .cl-chipsx i.st-ahead { background: rgba(255, 160, 60, 0.2); color: #ffc27a; }
#clcard .cl-chipsx i.st-rec { background: rgba(120, 220, 120, 0.18); color: #a8eea0; }
#clcard .cl-chipsx i.st-easy { background: rgba(160, 170, 190, 0.16); color: #c4cad8; }
#clcard dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font: 500 13.5px 'Mali', sans-serif; }
#clcard dt { color: #a89a7c; }
#clcard dd { margin: 0; color: #f2ead6; min-width: 0; }
#clcard .cl-ok { color: #a8eea0; }
#clcard .cl-gold { color: #ffd75a; }
#clcard .cl-have { color: #a89a7c; font-size: 12px; }
#clcard .cl-warn { margin: 9px 0 0; padding: 6px 9px; border-radius: 6px; background: rgba(200, 50, 40, 0.18); box-shadow: inset 0 0 0 1px rgba(255, 110, 90, 0.45); color: #ffb3a6; font: 600 13px 'Mali', sans-serif; }
#clcard .cl-warn.soft { background: rgba(200, 130, 30, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 180, 80, 0.4); color: #ffd09a; }
#clcard .cl-btns { display: flex; gap: 7px; margin-top: 11px; }
.cl-pop .cl-btn { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 44px; padding: 3px 10px; border: 0; border-radius: 7px;
  background: #24212b; color: #e6d3a3; font: 700 14px 'Mali', sans-serif; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(217, 164, 67, 0.3); }
.cl-pop .cl-btn small { font: 600 11.5px 'Mali', sans-serif; opacity: 0.85; }
.cl-pop .cl-btn:hover:not(:disabled) { background: #2f2a36; color: #fff; }
.cl-pop .cl-btn.gold { flex: 1.3 1 0; background: linear-gradient(#ffd56a, #d9a443); color: #2c1c08; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); }
.cl-pop .cl-btn.gold:hover:not(:disabled) { filter: brightness(1.08); background: linear-gradient(#ffd56a, #d9a443); color: #2c1c08; }
.cl-pop .cl-btn:disabled { opacity: 0.45; cursor: default; filter: grayscale(0.5); }