/* chatlink.css — items linked in the chat (js/chatlink.js, mockup A assets/gen/nightcamp_ilink_a_raw.png): the links in
   the lines, the chips in the chat box, the item card beside the chat window, the bag card's แนบในแชท row. Sizes in --u. */

/* ---------- a link in a line: [icon name] in its rarity's colour (on the chat's dark glass) ---------- */
.cl-link { --lc: #f4efe6; color: var(--lc); cursor: pointer; font-weight: 600; text-decoration: none; white-space: nowrap; border-radius: calc(5 * var(--u)); outline: none; }
.cl-link.r-rare { --lc: #6fb6ff; }
.cl-link.r-epic { --lc: #c792ff; }
.cl-link.r-legend { --lc: #ffc94d; }
.cl-link.r-fashion { --lc: #ff9ad5; }
.cl-link i.b { font-style: normal; margin: 0; color: var(--lc); }
.cl-link img { height: 1.45em; width: 1.45em; object-fit: contain; vertical-align: middle; margin: calc(-6 * var(--u)) calc(3 * var(--u)) calc(-4 * var(--u)) calc(1 * var(--u));
  filter: drop-shadow(0 calc(1 * var(--u)) calc(1 * var(--u)) rgba(0, 0, 0, 0.6)); }
.cl-link span { text-decoration: underline transparent; text-underline-offset: calc(3 * var(--u)); text-decoration-thickness: calc(2 * var(--u)); transition: text-decoration-color 0.12s; }
.cl-link:hover span, .cl-link:focus-visible span { text-decoration-color: var(--lc); }
.cl-link:hover, .cl-link:focus-visible { text-shadow: 0 0 calc(8 * var(--u)) var(--lc), 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.7); }

/* ---------- the chat box: a chip is drawn by the mirror under the box's see-through text ---------- */
.cl-box { position: relative; flex: 1; min-width: 0; display: flex; }
.cl-box input { flex: 1; min-width: 0; }
.cl-mirror {
  display: none; position: absolute; inset: 0; box-sizing: border-box; overflow: hidden; white-space: pre; pointer-events: none;
  padding: 0 calc(10 * var(--u)); border: calc(2 * var(--u)) solid transparent; border-radius: calc(9 * var(--u));
  font: 400 calc(16 * var(--u)) / 1.9 'Mitr', sans-serif; color: #fff;
}
.cl-box.has .cl-mirror { display: block; padding-right: calc(48 * var(--u)); }
.cl-box.has input { color: transparent !important; caret-color: #fff; padding-right: calc(48 * var(--u)); }
.chatwin.typing .cl-mirror { color: #2a2435; }
.chatwin.typing .cl-box.has input { caret-color: #2a2435; }
.cl-ich { --cb: #ece6d8; --ct: #6b5f4a; padding: calc(3 * var(--u)) 0; border-radius: calc(8 * var(--u)); background: var(--cb); color: var(--ct); font-weight: 400;
  box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--ct); }
.cl-ich.r-rare { --cb: #d9ebff; --ct: #1f6fd1; }
.cl-ich.r-epic { --cb: #eadcff; --ct: #7a45c9; }
.cl-ich.r-legend { --cb: #fff0c2; --ct: #a8740c; }
.cl-ich.r-fashion { --cb: #ffe0f1; --ct: #c2408a; }
.cl-ich i { font-style: normal; }
.cl-ich .ic { background: center / 1.15em 1.15em no-repeat; color: transparent; }
.cl-ich .br { color: transparent; }
.cl-count { position: absolute; right: calc(12 * var(--u)); top: 50%; transform: translateY(-50%); pointer-events: none; font: 600 calc(13 * var(--u)) / 1 'Mitr', sans-serif; color: #b3aabd; }
.chatwin.typing .cl-count { color: #8a8295; }

/* ---------- the item card beside the chat (cream, a sky-blue bar, a navy outline: the bag card's look) ---------- */
.cl-card {
  --rc: #b9a57f; --rg: rgba(236, 230, 216, 0.9);
  position: fixed; z-index: 60000; width: calc(372 * var(--u)); box-sizing: border-box; pointer-events: none;
  border-radius: calc(18 * var(--u)); border: calc(4 * var(--u)) solid #2a2435; background: #fffaf0;
  box-shadow: 0 calc(6 * var(--u)) 0 rgba(0, 0, 0, 0.25), 0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(0, 0, 0, 0.45);
  font: 400 calc(15 * var(--u)) / 1.45 'Mitr', sans-serif; color: #2a2435; animation: cl-pop 0.12s ease-out;
}
.cl-card[hidden] { display: none; }
.cl-card.pin { pointer-events: auto; }
.cl-card.r-rare { --rc: #3d95e6; --rg: rgba(140, 196, 246, 0.85); }
.cl-card.r-epic { --rc: #8f6ad6; --rg: rgba(184, 150, 240, 0.85); }
.cl-card.r-legend { --rc: #d29a22; --rg: rgba(243, 196, 87, 0.85); }
.cl-card.r-fashion { --rc: #d455b0; --rg: rgba(255, 154, 213, 0.85); }
@keyframes cl-pop { from { opacity: 0; transform: translateY(calc(4 * var(--u))) scale(0.98); } }
.cl-card.tail::before, .cl-card.tail::after { content: ''; position: absolute; top: var(--ty); border-style: solid; border-color: transparent; transform: translateY(-50%); }
.cl-card.tail::before { left: calc(-17 * var(--u)); border-width: calc(13 * var(--u)) calc(13 * var(--u)) calc(13 * var(--u)) 0; border-right-color: #2a2435; }
.cl-card.tail::after { left: calc(-10 * var(--u)); border-width: calc(9 * var(--u)) calc(9 * var(--u)) calc(9 * var(--u)) 0; border-right-color: #fffaf0; }
.cl-hd { position: relative; height: calc(36 * var(--u)); border-radius: calc(13 * var(--u)) calc(13 * var(--u)) 0 0; background: linear-gradient(#7fcaf8, #3b8fdc);
  border-bottom: calc(3 * var(--u)) solid #2a2435; }
.cl-hd > i { position: absolute; top: 50%; left: calc(13 * var(--u)); width: calc(13 * var(--u)); height: calc(13 * var(--u)); transform: translateY(-50%);
  border-radius: 50%; background: #eaf6ff; border: calc(2.5 * var(--u)) solid #2a2435; box-sizing: border-box; }
.cl-hd > i + i { left: auto; right: calc(13 * var(--u)); }
.cl-card.pin .cl-hd > i + i { display: none; }
.cl-x { display: none; position: absolute; right: calc(8 * var(--u)); top: 50%; transform: translateY(-50%); width: calc(28 * var(--u)); height: calc(28 * var(--u));
  padding: 0; border-radius: 50%; border: calc(2.5 * var(--u)) solid #2a2435; background: #ff5f6d; color: #fff; cursor: pointer;
  font: 700 calc(15 * var(--u)) / 1 'Mitr', sans-serif; }
.cl-card.pin .cl-x { display: block; }
.cl-body { padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(10 * var(--u)); }
/* the compare (js/wcompare.js line) as a strip: green better, red worse */
.cl-vs { margin-bottom: calc(8 * var(--u)); }
.cl-vs .wc-vline { display: flex; align-items: center; gap: calc(8 * var(--u)); margin: 0; padding: calc(4 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)) calc(5 * var(--u));
  border-radius: calc(12 * var(--u)); border: calc(2 * var(--u)) solid #2a2435; background: #9a91a8; color: #fff; font: 600 calc(15 * var(--u)) / 1.35 'Mitr', sans-serif;
  text-shadow: 0 calc(1 * var(--u)) 0 rgba(0, 0, 0, 0.25); }
.cl-vs .wc-vline.up { background: #3fae4f; }
.cl-vs .wc-vline.down { background: #e0524f; }
.cl-vs .wc-vline.cant { background: #e09a2a; }
.cl-vs .wc-vline img { flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); padding: calc(2 * var(--u)); box-sizing: border-box; border-radius: 50%; background: #fff; }
.cl-top { display: flex; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; border: calc(2 * var(--u)) solid #eadfca; }
.cl-pic { flex: none; width: calc(118 * var(--u)); height: calc(118 * var(--u)); display: grid; place-items: center; border-radius: calc(12 * var(--u));
  background: radial-gradient(circle at 50% 55%, var(--rg), rgba(255, 255, 255, 0) 70%); }
.cl-pic canvas, .cl-pic img { width: 100%; height: 100%; object-fit: contain; }
.cl-pic img { width: 76%; height: 76%; }
.cl-side { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: calc(3 * var(--u)); }
.cl-name { font: 700 calc(18 * var(--u)) / 1.25 'Mitr', sans-serif; color: #2a2435; overflow-wrap: anywhere; }
.cl-rib { padding: 0 calc(16 * var(--u)) 0 calc(10 * var(--u)); background: var(--rc); color: #fff; font: 700 calc(13 * var(--u)) / 1.7 'Mitr', sans-serif;
  clip-path: polygon(0 0, 100% 0, calc(100% - 8 * var(--u)) 50%, 100% 100%, 0 100%); border-radius: calc(4 * var(--u)) 0 0 calc(4 * var(--u)); }
.cl-rib.r-common { color: #5a4f3c; }
.cl-type { font-size: calc(14 * var(--u)); color: #4a4256; }
.cl-lv { font: 600 calc(14 * var(--u)) / 1.3 'Mitr', sans-serif; }
.cl-el { display: flex; align-items: center; gap: calc(5 * var(--u)); font-weight: 600; }
.cl-el img { width: calc(20 * var(--u)); height: calc(20 * var(--u)); object-fit: contain; }
.cl-gems { display: flex; align-items: center; margin-top: calc(2 * var(--u)); }
.cl-gems .gt-gems { --gs: calc(24 * var(--u)); gap: calc(3 * var(--u)); }
.cl-tab { width: 100%; margin-top: calc(8 * var(--u)); border-collapse: collapse; }
.cl-tab td { padding: calc(3 * var(--u)) calc(8 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eadfca; }
.cl-tab td:first-child { width: 44%; font-weight: 600; }
.cl-tab small { color: #7d7487; font-size: 0.85em; }
.cl-opts { margin-top: calc(6 * var(--u)); padding: calc(4 * var(--u)) calc(8 * var(--u)) calc(6 * var(--u)); border-bottom: calc(1 * var(--u)) solid #eadfca; }
.cl-opts .r { font: 600 calc(16 * var(--u)) / 1.45 'Mitr', sans-serif; color: #2a2435; }
.cl-opts .r.t1 { color: #1f6fd1; }
.cl-opts .r.t2 { color: #a8740c; }
.cl-opts .r.ts { color: #b0398f; }
.cl-abil { padding: calc(5 * var(--u)) calc(8 * var(--u)) 0; font: 600 calc(15 * var(--u)) / 1.4 'Mitr', sans-serif; color: #e0701e; }
.cl-desc { margin-top: calc(8 * var(--u)); padding: 0 calc(4 * var(--u)); color: #4a4256; font-size: calc(14 * var(--u)); }
.cl-ft { margin-top: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(4 * var(--u)) 0; font-size: calc(13.5 * var(--u)); color: #2a2435; }
.cl-ok { position: relative; padding-left: calc(30 * var(--u)); color: #2e8a2a; font-weight: 600; line-height: calc(24 * var(--u)); }
.cl-ok::before { content: '\2713'; position: absolute; left: 0; top: 0; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #3fae4f;
  border: calc(1.5 * var(--u)) solid #2a2435; color: #fff; font: 700 calc(14 * var(--u)) / calc(21 * var(--u)) 'Mitr', sans-serif; text-align: center; }
.cl-ok.no { color: #b86a12; }
.cl-ok.no::before { content: '!'; background: #e09a2a; }
.cl-ft > div:last-child { padding-left: calc(30 * var(--u)); }

/* ---------- the bag card's แนบในแชท row (above its buttons) ---------- */
.cl-cardrow { display: flex; }
.wc-card .cl-cardrow { flex: none; padding: calc(8 * var(--u)) calc(16 * var(--u)) 0; }
.wc-card .cl-cardrow .iv-btn { height: calc(46 * var(--u)); border-radius: calc(14 * var(--u)); font: 800 calc(19 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; }
.cl-cardrow .iv-btn { flex: 1; }
.cl-linkb i { display: none; }

/* ---------- phones: the card at a readable size in the middle of the screen (the game's --u is tiny there) ---------- */
html.mob .cl-card { --u: calc(min(94vw, 410px) / 372); }