/* chwin.css — ย้ายแชนแนล (js/online/chwin.js), mockup F (assets/gen/nightcamp_chsrv_f_raw.png): the K window with the
   channel list and the cream card, the "CH n" chip under the minimap's ribbon, the moving toast. Sizes in --u, measured
   on the mockup (1536 px wide = 1920u: 1.25u a mockup pixel). */
/* The owner's web K theme on every device: sky blue and cream, never the purple touch theme. */
#chwin, .tr .chw-chip, .chw-toast { --ink: #243746; }
#chwin { z-index: 31; background: rgba(18, 35, 49, 0.38); }
.chw-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.chw-win { width: calc(1122 * var(--u)); height: calc(712 * var(--u)); display: flex; flex-direction: column; }
.chw-win .kw-title { flex: none; height: calc(62 * var(--u)); font-size: calc(42 * var(--u)); }
.chw-win .kw-x { width: calc(44 * var(--u)); height: calc(44 * var(--u)); font-size: calc(22 * var(--u)); }
.chw-tabs { flex: none; padding: calc(14 * var(--u)) calc(27 * var(--u)) 0; gap: calc(12 * var(--u)); }
.chw-tabs .kw-tab { min-width: calc(225 * var(--u)); height: calc(52 * var(--u)); font-size: calc(29 * var(--u)); padding: 0 calc(22 * var(--u)); }
.chw-tabs .kw-tab small { font-size: 0.75em; opacity: 0.85; }
.chw-body {
  flex: 1; min-height: 0; display: flex; gap: calc(23 * var(--u));
  padding: calc(16 * var(--u)) calc(17 * var(--u)) calc(18 * var(--u)) calc(27 * var(--u));
}

/* ---------- the list ---------- */
.chw-list { flex: none; width: calc(694 * var(--u)); display: flex; flex-direction: column; gap: calc(4 * var(--u)); padding-right: calc(8 * var(--u)); }
.chw-row {
  flex: none; position: relative; box-sizing: border-box; display: flex; align-items: center; height: calc(65 * var(--u));
  padding: 0 calc(14 * var(--u)) 0 calc(24 * var(--u)); cursor: pointer; user-select: none;
  background: #fbf6ea; border: calc(3 * var(--u)) solid #cdbf9f; border-radius: calc(16 * var(--u));
  box-shadow: inset 0 calc(-3 * var(--u)) 0 rgba(120, 100, 60, 0.12);
}
.chw-row:hover { background: #fffaf0; border-color: #b9a984; }
.chw-row.sel { background: linear-gradient(#d9effd, #c2e3fb); border: calc(4 * var(--u)) solid #3b8fdc; }
.chw-row.full { background: #e4dfd5; color: #747b7d; }
.chw-n { flex: none; width: calc(80 * var(--u)); font: 800 calc(32 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: var(--ink); white-space: nowrap; }
.chw-row.full .chw-n { color: #747b7d; }
.chw-bar {
  flex: none; position: relative; width: calc(190 * var(--u)); height: calc(22 * var(--u)); box-sizing: border-box; overflow: hidden;
  border-radius: calc(11 * var(--u)); background: #8b969c; border: calc(3 * var(--u)) solid var(--ink);
}
.chw-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: calc(8 * var(--u)); background: linear-gradient(#8ff36a, #3cbf3c); box-shadow: inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.35); }
.chw-row.lv-mid .chw-bar i { background: linear-gradient(#ffd451, #f39a1f); }
.chw-row.lv-busy .chw-bar i { background: linear-gradient(#ff8a8f, #e0414f); }
.chw-row.full .chw-bar i { background: #929b9f; box-shadow: none; }
.chw-cnt { flex: none; width: calc(86 * var(--u)); margin-left: calc(8 * var(--u)); letter-spacing: -0.02em; text-align: center; font: 500 calc(21 * var(--u)) / 1 'Mitr', sans-serif; color: var(--ink); white-space: nowrap; }
.chw-row.full .chw-cnt { color: #6b7478; }
.chw-faces { flex: none; display: flex; gap: 0; min-width: calc(100 * var(--u)); margin-left: calc(2 * var(--u)); }
.chw-faces .chw-face + .chw-face { margin-left: calc(-8 * var(--u)); }
.chw-row.full .chw-faces:empty { min-width: 0; }
.chw-face {
  flex: none; position: relative; display: block; width: calc(50 * var(--u)); height: calc(50 * var(--u));
  border-radius: 50%; overflow: hidden;
}
/* (absolute: a percent size inside an auto grid cell collapsed the big face to a strip) */
.chw-face canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.chw-face.q { display: grid; place-items: center; background: #d9cdb2; border: calc(3 * var(--u)) solid var(--ink); box-sizing: border-box; }
.chw-face.q i { font: 800 calc(22 * var(--u)) / 1 'Baloo 2', sans-serif; font-style: normal; color: #7a6c52; }
.chw-tag {
  flex: 0 1 auto; min-width: 0; display: inline-block; height: calc(40 * var(--u)); padding: 0 calc(16 * var(--u)); margin-left: calc(8 * var(--u));
  border-radius: calc(12 * var(--u)); font: 500 calc(24 * var(--u)) / calc(40 * var(--u)) 'Mitr', sans-serif; white-space: nowrap;
  max-width: calc(210 * var(--u)); overflow: hidden; text-overflow: ellipsis; box-sizing: border-box;
  background: #6b787e; color: #fff;
}
.chw-tag.here { background: #cde8fc; color: #1f6fc0; }
.chw-tag.party { background: linear-gradient(#45a4ef, #2482d6); color: #fff; }
.chw-tag.friend { background: #ffe5ab; color: #784c1c; }
.chw-tag.guild { background: #95e36f; color: #1f5a18; }
.chw-tag.full { background: #4b5c65; color: #fff; }
.chw-tag.busy { background: #ffbb37; color: #7a3d00; }
.chw-tag.empty { background: #6b787e; color: #fff; }
.chw-wait, .chw-off { padding: calc(18 * var(--u)) calc(10 * var(--u)); color: #8a7f68; font-size: calc(20 * var(--u)); }
.chw-off { padding-top: calc(8 * var(--u)); font-size: calc(18 * var(--u)); }

/* the friends tab's rows */
.chw-row.fr { padding-left: calc(12 * var(--u)); gap: calc(10 * var(--u)); }
.chw-row.fr .chw-tag { flex: none; margin-left: 0; height: calc(34 * var(--u)); line-height: calc(34 * var(--u)); font-size: calc(19 * var(--u)); padding: 0 calc(12 * var(--u)); }
.chw-who { flex: none; width: calc(200 * var(--u)); display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.chw-who b { font: 600 calc(22 * var(--u)) / 1.2 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chw-who small { font-size: calc(16 * var(--u)); color: #7b715e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chw-where { flex: 1; min-width: 0; font-size: calc(19 * var(--u)); color: #4a5c65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chw-go.kw-btn { flex: none; height: calc(40 * var(--u)); font-size: calc(19 * var(--u)); padding: 0 calc(12 * var(--u)); }

/* ---------- the cream information card ---------- */
.chw-card {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  padding: calc(26 * var(--u)) calc(25 * var(--u)) calc(22 * var(--u));
  background: #efe4c9; color: var(--ink); box-shadow: inset 0 0 0 calc(3 * var(--u)) #fff5df;
}
.chw-card h2 { margin: 0; font: 700 calc(42 * var(--u)) / 1.15 'Mitr', sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chw-me { font-size: 0.5em; font-weight: 500; color: #1f6fc0; vertical-align: middle; }
.chw-load { margin: calc(6 * var(--u)) 0 0; font: 500 calc(27 * var(--u)) / 1.3 'Mitr', sans-serif; color: var(--ink); }
.chw-load .lv-quiet { color: #286c2c; } .chw-load .lv-empty { color: #616b70; } .chw-load .lv-mid { color: #85500b; }
.chw-load .lv-busy { color: #a13b30; } .chw-load .lv-full { color: #929b9f; }
.chw-card hr { width: 100%; margin: calc(16 * var(--u)) 0; border: 0; border-top: calc(2 * var(--u)) solid #d4c6a6; }
.chw-lbl { margin: 0 0 calc(12 * var(--u)); font: 500 calc(25 * var(--u)) / 1.3 'Mitr', sans-serif; color: var(--ink); }
.chw-one { display: flex; align-items: center; gap: calc(22 * var(--u)); }
.chw-one > div { display: flex; flex-direction: column; min-width: 0; }
.chw-one b { font: 700 calc(34 * var(--u)) / 1.2 'Mitr', sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chw-one small { font-size: calc(18 * var(--u)); color: #6a6254; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chw-kinds { display: flex; gap: calc(6 * var(--u)); margin-top: calc(8 * var(--u)); }
.chw-kinds .chw-tag { flex: none; margin: 0; height: calc(30 * var(--u)); line-height: calc(30 * var(--u)); font-size: calc(17 * var(--u)); padding: 0 calc(12 * var(--u)); }
.chw-face.big { width: calc(129 * var(--u)); height: calc(129 * var(--u)); border-radius: calc(16 * var(--u)); background: linear-gradient(#fbf0dc, #f0dcc0); }
.chw-face.big.q { border-radius: calc(16 * var(--u)); }
.chw-face.big.q i { font-size: calc(48 * var(--u)); }
.chw-few { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.chw-p { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.chw-p .chw-face { width: calc(50 * var(--u)); height: calc(50 * var(--u)); border-radius: calc(12 * var(--u)); background: linear-gradient(#fbf0dc, #f0dcc0); }
.chw-p b { flex: 1; min-width: 0; font: 600 calc(22 * var(--u)) / 1.2 'Mitr', sans-serif; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chw-p .chw-tag { flex: none; height: calc(30 * var(--u)); line-height: calc(30 * var(--u)); font-size: calc(16 * var(--u)); padding: 0 calc(10 * var(--u)); }
.chw-more, .chw-none { color: #6a6254; font-size: calc(19 * var(--u)); margin: 0; }
.chw-acts { margin-top: auto; display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.chw-acts .kw-btn { width: 100%; height: calc(60 * var(--u)); font-size: calc(30 * var(--u)); border-radius: calc(16 * var(--u)); }
.chw-why { margin: 0 0 calc(-4 * var(--u)); color: #85500b; font-size: calc(19 * var(--u)); line-height: 1.35; text-align: center; }

.chw-acts .kw-btn.grey { background: linear-gradient(#f5ecd9, #ddd0b5); color: var(--ink); -webkit-text-stroke: 0; }

/* the rule under the window, on the game */
.chw-rule {
  margin: calc(12 * var(--u)) 0 0; text-align: center; font: 500 calc(22 * var(--u)) / 1.3 'Mitr', sans-serif; color: #fff;
  -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill;
}
.chw-rule b { font-weight: 600; color: #ffe08a; }

/* ---------- the chip under the minimap's ribbon ---------- */
.tr .chw-chip {
  position: relative; z-index: 3; display: flex; align-items: center; justify-content: center; gap: calc(6 * var(--u));
  margin: calc(-34 * var(--u)) auto 0; min-width: calc(90 * var(--u)); height: calc(34 * var(--u)); padding: 0 calc(14 * var(--u));
  cursor: pointer; pointer-events: auto; box-sizing: border-box;
  background: linear-gradient(#7fcaf8, #3b8fdc); border: calc(3 * var(--u)) solid var(--ink); border-radius: calc(12 * var(--u));
  box-shadow: 0 0 0 calc(2.5 * var(--u)) var(--ink), 0 calc(4 * var(--u)) 0 rgba(0, 0, 0, 0.3);
  font: 800 calc(21 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; letter-spacing: 0.02em;
}
.tr .chw-chip[hidden] { display: none; }
.tr .chw-chip:hover, .tr .chw-chip.on { filter: brightness(1.15); }
.chw-chip i {
  width: 0; height: 0; border-left: calc(6 * var(--u)) solid transparent; border-right: calc(6 * var(--u)) solid transparent;
  border-top: calc(7 * var(--u)) solid #ffd451; margin-top: calc(2 * var(--u));
}

/* ---------- moving: the toast ---------- */
.chw-toast {
  position: fixed; left: 50%; top: 38%; transform: translate(-50%, -50%); z-index: 40; pointer-events: none;
  display: flex; align-items: center; gap: calc(16 * var(--u)); padding: calc(18 * var(--u)) calc(34 * var(--u));
  border-radius: calc(20 * var(--u)); background: #f7efdc; border: calc(4 * var(--u)) solid var(--ink);
  box-shadow: inset 0 0 0 calc(3 * var(--u)) #74b6ec, 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, 0.3);
  font: 600 calc(30 * var(--u)) / 1.2 'Mitr', sans-serif; color: var(--ink);
}
.chw-toast[hidden] { display: none; }
.chw-spin { display: none; width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; border: calc(5 * var(--u)) solid #d4c6a6; border-top-color: #3b8fdc; animation: chw-spin 0.8s linear infinite; }
.chw-toast.moving .chw-spin { display: block; }
.chw-toast.ok b { color: #286c2c; }
.chw-toast.bad b { color: #a13b30; }
@keyframes chw-spin { to { transform: rotate(360deg); } }

/* ---------- an upright phone: one column, the card under the list ---------- */
html.mob-port #chwin .chw-wrap { left: 0; top: 0; transform: none; width: 100vw; height: 100%; }
html.mob-port #chwin { --u: calc(100vw / 760); }
html.mob-port .chw-win { width: 100vw; height: auto; max-height: calc(100% - 60 * var(--u)); border-radius: 0; }
html.mob-port .chw-body { flex-direction: column; padding: calc(12 * var(--u)); }
html.mob-port .chw-list { width: auto; max-height: 55vh; }