/* socialwin.css — the guild window (js/guild.js, layout "B": assets/gen/nightcamp_pg_guild_b_raw.png) and the
   leaderboard (js/ranks.js, layout "A": assets/gen/nightcamp_pg_rank_a_raw.png). Sizes follow the mockups at the same
   window width (1 mockup px = 1u). The windows' look is css/kui.css. */

/* ================= the guild window ================= */
.gw-wrap, .rk-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }
.gw-win { width: calc(1265 * var(--u)); }
.gw-scene {
  position: relative; height: calc(370 * var(--u)); margin: calc(12 * var(--u)) calc(12 * var(--u)) 0; overflow: hidden;
  border-radius: calc(18 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: #1b1e33; box-shadow: inset 0 0 calc(40 * var(--u)) rgba(10, 8, 30, 0.45);
}
.gw-scene canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.gw-tags { position: absolute; inset: 0; pointer-events: none; }
.gw-tag {
  position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: calc(4 * var(--u)); white-space: nowrap;
  padding: 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: rgba(24, 22, 40, 0.9); border: calc(2.5 * var(--u)) solid rgba(255, 255, 255, 0.32);
  color: #fff; font: 700 calc(17 * var(--u)) / 1.5 'Mitr', sans-serif;
}
.gw-tag img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin: calc(-6 * var(--u)) 0 calc(-4 * var(--u)) calc(-4 * var(--u)); }
.gw-tag.you { border-color: #ffd35c; }
.gw-tag.off { opacity: 0.7; }
.gw-card {
  position: absolute; right: calc(14 * var(--u)); top: calc(14 * var(--u)); bottom: calc(14 * var(--u)); width: calc(270 * var(--u)); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(16 * var(--u));
  border-radius: calc(18 * var(--u)); background: rgba(27, 30, 51, 0.88); border: calc(4 * var(--u)) solid var(--ink); box-shadow: inset 0 0 0 calc(3 * var(--u)) #3a4170;
  color: #eef0ff;
}
.gw-emb, .gw-remb, .gw-gem, .rk-gem { position: relative; display: inline-grid; place-items: center; flex: none; }
.gw-emb { width: calc(128 * var(--u)); height: calc(128 * var(--u)); margin-bottom: calc(2 * var(--u)); }
.gw-emb i, .gw-remb i, .gw-gem i, .rk-gem i { position: absolute; inset: 7%; border-radius: 50%; }
.gw-emb img, .gw-remb img, .gw-gem img, .rk-gem img { position: relative; width: 100%; height: 100%; }
.gw-gname { font: 800 calc(30 * var(--u)) / 1.15 'Mitr', sans-serif; text-align: center; -webkit-text-stroke: calc(5 * var(--u)) var(--ink); paint-order: stroke fill; color: #fff; }
.gw-glv { font: 600 calc(17 * var(--u)) / 1.3 'Mitr', sans-serif; color: #d6d9f2; }
.gw-bar { position: relative; align-self: stretch; height: calc(26 * var(--u)); margin: calc(2 * var(--u)) 0; border-radius: 99px; border: calc(3 * var(--u)) solid var(--ink); background: #2e3350; overflow: hidden; }
.gw-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(#8fd3fb, #3b8fdc); }
.gw-bar b { position: relative; display: block; text-align: center; font: 800 calc(16 * var(--u)) / calc(20 * var(--u)) 'Baloo 2', sans-serif; color: #fff; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
.gw-gmem { align-self: stretch; font: 500 calc(17 * var(--u)) / 1.5 'Mitr', sans-serif; color: #d6d9f2; }
.gw-gmem b { color: #fff; font-weight: 700; }
.gw-coffer {
  align-self: stretch; display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(42 * var(--u)); padding: 0 calc(12 * var(--u));
  border-radius: 99px; background: #fffaf0; border: calc(3 * var(--u)) solid var(--ink); color: var(--ink); font: 600 calc(17 * var(--u)) / 1 'Mitr', sans-serif;
}
.gw-coffer img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.gw-coffer span { white-space: nowrap; }
.gw-coffer b { margin-left: auto; font: 800 calc(20 * var(--u)) / 1 'Baloo 2', sans-serif; }
/* the beta's guild price (js/guild.js COST_BETA): the full price struck through + the "ราคาช่วงเบต้า" tag */
.gw-coffer s { margin-left: auto; font: 700 calc(15 * var(--u)) / 1 'Baloo 2', sans-serif; color: #9a8f9f; }
.gw-coffer s + b { margin-left: calc(4 * var(--u)); color: #c4361e; }
.gw-h2 s { font: 700 calc(15 * var(--u)) / 1 'Baloo 2', sans-serif; color: #9a8f9f; margin-left: calc(4 * var(--u)); }
.gw-betatag {
  display: inline-block; padding: calc(2 * var(--u)) calc(10 * var(--u)); border-radius: 99px; background: #ffd873; border: calc(2 * var(--u)) solid var(--ink);
  color: var(--ink); font: 700 calc(13.5 * var(--u)) / 1.3 'Mitr', sans-serif; white-space: nowrap; vertical-align: middle;
}
.gw-h2 .gw-betatag { margin-left: calc(8 * var(--u)); }
#gw-card > .gw-betatag { align-self: center; margin-top: calc(-4 * var(--u)); }
.gw-betanote { color: #8a4a12; font-weight: 500; }
.gw-tabs { margin-top: calc(10 * var(--u)); }
.gw-tabs .kw-tab { min-width: calc(180 * var(--u)); text-align: center; }
.gw-body { height: calc(390 * var(--u)); }
.gw-mbody { display: grid; grid-template-columns: minmax(0, 1fr) calc(350 * var(--u)); gap: calc(14 * var(--u)); height: 100%; padding: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); box-sizing: border-box; }
.gw-list { min-height: 0; padding-right: calc(6 * var(--u)); }
.gw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.gw-mem {
  display: grid; grid-template-columns: calc(70 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u));
  border-radius: calc(16 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d8c8a4; cursor: pointer;
}
.gw-mem:hover { border-color: #8fc6f1; }
.gw-mem.sel { border-color: #3b8fdc; box-shadow: 0 0 0 calc(3 * var(--u)) #9fd0f6; }
.gw-mem.you { background: #f2f9ff; }
.gw-mem canvas { width: calc(70 * var(--u)); height: calc(70 * var(--u)); border-radius: calc(14 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: radial-gradient(ellipse at 50% 75%, #eaf5ff, #9fd0f6); box-sizing: border-box; }
.gw-mt { min-width: 0; display: flex; flex-direction: column; }
.gw-mt b { font: 700 calc(19 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-mt small { font: 500 calc(14.5 * var(--u)) / 1.35 'Mitr', sans-serif; color: #5d5470; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-mr { display: flex; flex-direction: column; align-items: flex-end; gap: calc(6 * var(--u)); min-width: 0; }
.gw-rank {
  display: inline-flex; align-items: center; gap: calc(4 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--ink);
  font: 700 calc(15 * var(--u)) / 1.6 'Mitr', sans-serif; white-space: nowrap; color: #fff; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill;
}
.gw-rank img { width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin-left: calc(-6 * var(--u)); }
.gw-rank.gold { background: linear-gradient(#ffe384, #f2b632); color: var(--ink); -webkit-text-stroke: 0; }
.gw-rank.blue { background: linear-gradient(#8fd3fb, #3b8fdc); }
.gw-rank.grey { background: linear-gradient(#d6d8e2, #a7abbb); }
.gw-on, .gw-off { display: flex; align-items: center; gap: calc(6 * var(--u)); font: 500 calc(14 * var(--u)) / 1.3 'Mitr', sans-serif; white-space: nowrap; max-width: calc(170 * var(--u)); overflow: hidden; text-overflow: ellipsis; }
.gw-on i, .gw-off i { flex: none; width: calc(13 * var(--u)); height: calc(13 * var(--u)); border-radius: 50%; border: calc(2.5 * var(--u)) solid var(--ink); }
.gw-on i { background: #6ad36a; }
.gw-off { color: #8a8296; }
.gw-off i { background: #a7a3b3; }
.gw-side { display: flex; flex-direction: column; gap: calc(10 * var(--u)); min-height: 0; overflow-y: auto; scrollbar-width: none; }
.gw-sign {
  position: relative; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  background: linear-gradient(#a8714a, #8a5634); box-shadow: inset 0 0 0 calc(3 * var(--u)) #c08a5c;
}
.gw-sign-t { margin-bottom: calc(6 * var(--u)); font: 800 calc(20 * var(--u)) / 1.2 'Mitr', sans-serif; color: #fff3cf; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
.gw-sign-b {
  min-height: calc(52 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(10 * var(--u)); background: #f7e9c8; border: calc(3 * var(--u)) solid #6b4325;
  font: 600 calc(17 * var(--u)) / 1.45 'Mitr', sans-serif; color: #4a3424; white-space: pre-wrap; word-break: break-word;
}
.gw-sign.big .gw-sign-b { min-height: calc(160 * var(--u)); font-size: calc(20 * var(--u)); }
.gw-sign textarea {
  display: block; width: 100%; box-sizing: border-box; height: calc(160 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); resize: none;
  border-radius: calc(10 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #6b4325; font: 600 calc(19 * var(--u)) / 1.45 'Mitr', sans-serif; color: #4a3424;
}
.gw-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(7 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(16 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d8c8a4; }
.gw-btns .kw-btn { height: calc(40 * var(--u)); padding: 0 calc(6 * var(--u)); font-size: calc(16 * var(--u)); }
.gw-btns .gw-wide { grid-column: 1 / -1; }
.gw-btns .gw-bt { grid-column: 1 / -1; font: 700 calc(15 * var(--u)) / 1.3 'Mitr', sans-serif; color: #5d5470; }
.gw-btns .gw-bt ~ .kw-btn[data-g="chat"], .gw-btns [data-g="leave"] { grid-column: span 1; }
.gw-btns [data-g="chat"] { grid-column: 1 / span 2; }
.gw-hint { grid-column: 1 / -1; font: 400 calc(13.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #7d7488; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-inv { margin-bottom: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: #eef7ff; border: calc(3 * var(--u)) solid #8fc6f1; }
.gw-invh { font: 700 calc(16 * var(--u)) / 1.5 'Mitr', sans-serif; }
.gw-invr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: calc(10 * var(--u)); padding: calc(4 * var(--u)) 0; }
.gw-invr b { font: 700 calc(16 * var(--u)) / 1.3 'Mitr', sans-serif; }
.gw-invr small { font: 400 calc(14 * var(--u)) / 1.3 'Mitr', sans-serif; color: #6a6078; }
.gw-invr .kw-btn { height: calc(36 * var(--u)); font-size: calc(15 * var(--u)); }
.gw-empty { padding: calc(16 * var(--u)) calc(8 * var(--u)); text-align: center; font: 400 calc(15 * var(--u)) / 1.5 'Mitr', sans-serif; color: #7d7488; }
.gw-pad { padding: calc(12 * var(--u)) calc(16 * var(--u)); overflow-y: auto; height: 100%; box-sizing: border-box; }
.gw-mbody.none { grid-template-columns: minmax(0, 1fr) calc(380 * var(--u)); padding: 0 calc(14 * var(--u)) 0 0; }
.gw-mbody.none .gw-side { padding-top: calc(12 * var(--u)); }
.gw-note { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); font: 400 calc(14.5 * var(--u)) / 1.5 'Mitr', sans-serif; color: #6a6078; }
.gw-note img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; }
.gw-row { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.gw-h2 { margin: calc(12 * var(--u)) 0 calc(6 * var(--u)); font: 700 calc(19 * var(--u)) / 1.3 'Mitr', sans-serif; }
.gw-h2 small { font-size: calc(15 * var(--u)); color: #8a6a2a; margin-left: calc(6 * var(--u)); }
.gw-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--u)); }
.gw-tile { padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d8c8a4; }
.gw-tile b { display: block; font: 800 calc(24 * var(--u)) / 1.2 'Baloo 2', 'Mitr', sans-serif; }
.gw-tile span { font: 400 calc(14 * var(--u)) / 1.35 'Mitr', sans-serif; color: #6a6078; }
.gw-qrow { display: grid; grid-template-columns: calc(52 * var(--u)) minmax(0, 1fr) auto; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid #d8c8a4; }
.gw-qrow.done { background: #eefbea; border-color: #9fd99a; }
.gw-qrow img { width: calc(52 * var(--u)); height: calc(52 * var(--u)); object-fit: contain; }
.gw-qt b { display: block; font: 700 calc(17 * var(--u)) / 1.35 'Mitr', sans-serif; }
.gw-qt small { display: block; font: 400 calc(14 * var(--u)) / 1.4 'Mitr', sans-serif; color: #6a6078; }
.gw-qbar { height: calc(12 * var(--u)); margin-top: calc(4 * var(--u)); border-radius: 99px; border: calc(2.5 * var(--u)) solid var(--ink); background: #2e3350; overflow: hidden; }
.gw-qbar i { display: block; height: 100%; background: linear-gradient(#ffe384, #f2b632); }
.gw-rank-h { font: 600 calc(16 * var(--u)) / 1.5 'Mitr', sans-serif; color: #5d5470; margin-bottom: calc(6 * var(--u)); }
.gw-ranks { max-height: calc(290 * var(--u)); }
.gw-rrow { display: grid; grid-template-columns: calc(52 * var(--u)) calc(48 * var(--u)) minmax(0, 1fr) calc(80 * var(--u)) calc(110 * var(--u)) calc(170 * var(--u)); align-items: center; gap: calc(8 * var(--u)); padding: calc(4 * var(--u)) calc(10 * var(--u)); border-bottom: calc(2 * var(--u)) solid #ece0c6; font: 500 calc(16 * var(--u)) / 1.3 'Mitr', sans-serif; }
.gw-rrow.me { background: #e4f2ff; border-radius: calc(10 * var(--u)); }
.gw-rrow b { font-weight: 700; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gw-rno { font: 800 calc(20 * var(--u)) / 1 'Baloo 2', sans-serif; }
.gw-remb { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.gw-remb.lg { width: calc(64 * var(--u)); height: calc(64 * var(--u)); }
.gw-rexp { text-align: right; font-weight: 600; }
.gw-mini .gw-rrow { grid-template-columns: calc(40 * var(--u)) calc(36 * var(--u)) minmax(0, 1fr) calc(54 * var(--u)); font-size: calc(14 * var(--u)); background: #f7e9c8; }
.gw-mini .gw-rrow > span:nth-child(5), .gw-mini .gw-rrow > .gw-rexp { display: none; }
.gw-mini .gw-remb { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.gw-mini .gw-rno { font-size: calc(16 * var(--u)); }
.gw-invite { display: flex; align-items: center; flex-wrap: wrap; gap: calc(12 * var(--u)); margin-bottom: calc(6 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: #fff4d6; border: calc(3 * var(--u)) solid #f2b632; font: 500 calc(17 * var(--u)) / 1.4 'Mitr', sans-serif; }
.gw-invite > div { flex: 1; min-width: calc(200 * var(--u)); }
.gw-form { display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
.gw-form input {
  height: calc(46 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #fff;
  font: 600 calc(19 * var(--u)) / 1 'Mitr', sans-serif; color: var(--ink); max-width: calc(420 * var(--u));
}
.gw-colors { display: flex; gap: calc(8 * var(--u)); }
.gw-color { width: calc(38 * var(--u)); height: calc(38 * var(--u)); padding: 0; border-radius: 50%; border: calc(3 * var(--u)) solid var(--ink); cursor: pointer; }
.gw-color.on { box-shadow: 0 0 0 calc(3 * var(--u)) #fff, 0 0 0 calc(6 * var(--u)) #3b8fdc; }
.gw-gems { display: grid; grid-template-columns: repeat(12, calc(58 * var(--u))); gap: calc(6 * var(--u)); }
.gw-gem { width: calc(58 * var(--u)); height: calc(58 * var(--u)); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.gw-gem.on { box-shadow: 0 0 0 calc(3 * var(--u)) #fff, 0 0 0 calc(6 * var(--u)) #3b8fdc; }
.gw-found { align-self: flex-start; }

/* ================= the leaderboard ================= */
.rk-win { width: calc(1105 * var(--u)); }
.rk-season {
  position: absolute; right: calc(66 * var(--u)); top: 50%; transform: translateY(-50%); padding: 0 calc(14 * var(--u)); border-radius: 99px;
  background: #fffaf0; border: calc(3 * var(--u)) solid var(--ink); color: var(--ink); -webkit-text-stroke: 0; font: 600 calc(16 * var(--u)) / 1.75 'Mitr', sans-serif; letter-spacing: 0;
}
.rk-tabs .kw-tab { flex: 1; text-align: center; padding-left: 0; padding-right: 0; }
.rk-filter {
  display: flex; align-items: center; justify-content: center; gap: calc(10 * var(--u)); height: calc(58 * var(--u)); margin: calc(12 * var(--u)) calc(14 * var(--u)) 0;
  border-radius: calc(16 * var(--u)); background: #efe4c9; border: calc(3 * var(--u)) solid #d4c6a6;
}
.rk-fnote { font: 500 calc(16 * var(--u)) / 1 'Mitr', sans-serif; color: #6a6078; }
.rk-job {
  display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(12 * var(--u)) 0 calc(4 * var(--u)); cursor: pointer;
  border-radius: 99px; border: calc(3 * var(--u)) solid var(--ink); background: #fffaf0; font: 600 calc(15 * var(--u)) / 1 'Mitr', sans-serif; color: var(--ink);
}
.rk-job:first-child { padding: 0 calc(14 * var(--u)); }
.rk-job img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.rk-job.on { background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; }
.rk-stage {
  position: relative; height: calc(360 * var(--u)); margin: calc(12 * var(--u)) calc(14 * var(--u)) 0; overflow: hidden; border-radius: calc(18 * var(--u));
  border: calc(4 * var(--u)) solid var(--ink); background: #1b1e33;
}
.rk-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rk-plates { position: absolute; inset: 0; pointer-events: none; }
.rk-plate {
  position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; min-width: calc(150 * var(--u)); max-width: calc(214 * var(--u));
  padding: calc(2 * var(--u)) calc(12 * var(--u)) calc(3 * var(--u)); box-sizing: border-box; border-radius: calc(12 * var(--u)); background: #fffaf0; border: calc(3 * var(--u)) solid var(--ink);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.3); text-align: center;
}
.rk-plate.p1 { min-width: calc(190 * var(--u)); }
.rk-plate b { font: 700 calc(19 * var(--u)) / 1.2 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rk-plate small { font: 600 calc(13.5 * var(--u)) / 1.3 'Mitr', sans-serif; white-space: nowrap; }
.rk-plate i { font: 600 normal calc(13.5 * var(--u)) / 1.35 'Mitr', sans-serif; color: #4a4258; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.rk-plate i:empty { display: none; }
.rk-plate.empty { min-width: calc(100 * var(--u)); color: #9c8e70; font: 600 calc(16 * var(--u)) / 1.6 'Mitr', sans-serif; background: rgba(255, 250, 240, 0.7); }
.rk-list { height: calc(306 * var(--u)); margin: calc(12 * var(--u)) calc(14 * var(--u)) 0; border-radius: calc(16 * var(--u)); border: calc(3 * var(--u)) solid var(--ink); background: #fffaf0; }
.rk-row {
  display: grid; grid-template-columns: calc(70 * var(--u)) calc(44 * var(--u)) minmax(0, 1.2fr) minmax(0, 1fr) calc(200 * var(--u)) calc(210 * var(--u)); align-items: center;
  gap: calc(10 * var(--u)); height: calc(43 * var(--u)); padding: 0 calc(16 * var(--u)); border-bottom: calc(2 * var(--u)) solid #e4d7b9; font: 500 calc(17 * var(--u)) / 1 'Mitr', sans-serif;
}
.rk-row:nth-child(even) { background: #f6eedb; }
.rk-row.me { background: #dff0ff; }
.rk-no { font: 800 calc(21 * var(--u)) / 1 'Baloo 2', sans-serif; text-align: center; }
.rk-row canvas { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.rk-gem { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
.rk-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-guild { color: #6a6078; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-job2 { display: flex; align-items: center; gap: calc(6 * var(--u)); font-weight: 600; white-space: nowrap; overflow: hidden; }
.rk-job2 img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; }
.rk-score { font-weight: 600; white-space: nowrap; text-align: right; }
.rk-empty { padding: calc(40 * var(--u)) 0; text-align: center; font: 400 calc(17 * var(--u)) / 1.5 'Mitr', sans-serif; color: #7d7488; }
.rk-me {
  display: flex; align-items: center; gap: calc(12 * var(--u)); height: calc(58 * var(--u)); margin: calc(12 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); padding: 0 calc(18 * var(--u));
  border-radius: calc(16 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff;
}
.rk-me canvas { width: calc(46 * var(--u)); height: calc(46 * var(--u)); flex: none; }
.rk-me .rk-mejob { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; }
.rk-me b { font: 700 calc(20 * var(--u)) / 1.2 'Mitr', sans-serif; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-me > span { margin-left: auto; font: 600 calc(15 * var(--u)) / 1 'Mitr', sans-serif; -webkit-text-stroke: calc(3 * var(--u)) var(--ink); paint-order: stroke fill; white-space: nowrap; }
.rk-me .rk-gem { width: calc(44 * var(--u)); height: calc(44 * var(--u)); }