/* darkroot.css — รากต้นไม้มืด (js/darkroot.js, js/darkroot_ui.js): the floor HUD, the lobby (layout A) and the ranking
   (layout B) in the K window look (css/kui.css). Sizes in --u. */
.rt-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: 50% 50%; }

/* ---------------- the floor HUD (top middle) ---------------- */
#rt-hud {
  position: absolute; left: 50%; top: calc(12 * var(--u)); transform: translateX(-50%); width: calc(380 * var(--u)); pointer-events: none; z-index: 6;
  padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(9 * var(--u)); box-sizing: border-box; border-radius: calc(18 * var(--u)); border: calc(4 * var(--u)) solid var(--ink);
  background: linear-gradient(rgba(39, 43, 71, 0.94), rgba(27, 30, 51, 0.94)); box-shadow: inset 0 0 0 calc(3 * var(--u)) #4b3a7a; color: #eef0ff; font-family: 'Mitr', sans-serif;
}
#rt-hud[hidden] { display: none; }
#rt-hud .rt-top { display: flex; align-items: baseline; gap: calc(10 * var(--u)); }
#rt-hud .rt-top b { font: 800 calc(25 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #ffd873; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
#rt-hud .rt-top span { font: 600 calc(16 * var(--u)) / 1.2 'Mitr', sans-serif; color: #d9c4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rt-hud .rt-top i { margin-left: auto; font: 700 normal calc(19 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #fff; }
#rt-hud .rt-goal { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(5 * var(--u)); font: 600 calc(18 * var(--u)) / 1.25 'Mitr', sans-serif; }
#rt-hud .rt-goal img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; }
#rt-hud .rt-goal.done { color: #8ff08a; }
#rt-hud .rt-wind { margin-top: calc(3 * var(--u)); font: 400 calc(13.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #cfaeff; }
#rt-hud .rt-pt { font: 400 calc(13 * var(--u)) / 1.3 'Mitr', sans-serif; color: #aab0d0; }

/* ---------------- the lobby (A) — sizes measured on the mockup (its window 1167 px = 1170 u) ---------------- */
.rt-lobby { width: calc(1170 * var(--u)); }
.rt-body { display: flex; gap: calc(10 * var(--u)); padding: calc(10 * var(--u)) calc(10 * var(--u)) 0; }
.rt-map {
  position: relative; flex: none; width: calc(671 * var(--u)); height: calc(722 * var(--u)); overflow: hidden; border-radius: calc(16 * var(--u));
  border: calc(4 * var(--u)) solid var(--ink); background: #1b1530; box-sizing: border-box;
}
.rt-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-zones { position: absolute; inset: 0; pointer-events: none; }
.rt-zone {
  position: absolute; left: 27.5%; width: calc(168 * var(--u)); transform: translate(-50%, -50%); padding: calc(3 * var(--u)) calc(8 * var(--u)) calc(4 * var(--u)); box-sizing: border-box;
  border-radius: calc(9 * var(--u)); background: rgba(24, 20, 42, 0.88); border: calc(2.5 * var(--u)) solid #4f4775; box-shadow: 0 0 0 calc(1.5 * var(--u)) rgba(10, 6, 20, 0.8); color: #fff; text-align: center;
}
.rt-zone b { display: block; font: 600 calc(16.5 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-zone small { display: block; font: 500 calc(14.5 * var(--u)) / 1.2 'Mitr', sans-serif; color: #f2ecff; white-space: nowrap; }
.rt-side { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* the folder tabs over the floor card */
.rt-mode { display: flex; gap: calc(6 * var(--u)); padding: calc(4 * var(--u)) 0 0; border-bottom: calc(4 * var(--u)) solid var(--ink); }
.rt-mode button {
  flex: 1; height: calc(50 * var(--u)); margin-bottom: calc(-4 * var(--u)); cursor: pointer; border: calc(4 * var(--u)) solid var(--ink); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0;
  background: linear-gradient(#f5ecd9, #ddd0b5); color: var(--ink); font: 700 calc(21 * var(--u)) / 1 'Mitr', sans-serif;
}
.rt-mode button.on { background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
/* the floor card (dark navy) */
.rt-card {
  display: flex; flex-direction: column; gap: calc(9 * var(--u)); height: calc(367 * var(--u)); margin-top: calc(12 * var(--u)); padding: calc(12 * var(--u)) calc(18 * var(--u)) calc(16 * var(--u));
  box-sizing: border-box; border-radius: calc(14 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); color: #eef0ff;
  background: linear-gradient(#272b47, #1b1e33); box-shadow: inset 0 0 0 calc(3 * var(--u)) #3a4170;
}
.rt-ch { display: flex; align-items: baseline; flex-wrap: nowrap; padding-bottom: calc(8 * var(--u)); border-bottom: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.14); white-space: nowrap; overflow: hidden; }
.rt-ch b { font: 700 calc(27 * var(--u)) / 1.1 'Mitr', sans-serif; color: #fff; }
.rt-ch span { margin-left: calc(6 * var(--u)); font: 600 calc(18 * var(--u)) / 1.1 'Mitr', sans-serif; color: #fff; overflow: hidden; text-overflow: ellipsis; }
.rt-goalrow { display: flex; align-items: center; gap: calc(16 * var(--u)); font: 500 calc(18 * var(--u)) / 1.35 'Mitr', sans-serif; }
.rt-gpic {
  flex: none; display: grid; place-items: center; width: calc(84 * var(--u)); height: calc(70 * var(--u)); box-sizing: border-box; border-radius: calc(10 * var(--u));
  background: linear-gradient(#323a63, #262c4c); border: calc(3 * var(--u)) solid #5d6798;
}
.rt-gpic img { max-width: 78%; max-height: 82%; object-fit: contain; }
.rt-gpic canvas { width: calc(62 * var(--u)); height: calc(62 * var(--u)); }
.rt-goalrow b { display: block; color: #ffd873; font-weight: 600; }
.rt-windtag {
  display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(6 * var(--u)) calc(14 * var(--u)); border-radius: calc(10 * var(--u));
  background: linear-gradient(#3c2c6e, #30235a); border: calc(2.5 * var(--u)) solid #7656c8; color: #d9b8ff; font: 500 calc(16.5 * var(--u)) / 1.3 'Mitr', sans-serif;
}
.rt-windtag img { width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: none; object-fit: contain; }
.rt-rw { display: flex; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(4 * var(--u)); font: 500 calc(17.5 * var(--u)) / 1.3 'Mitr', sans-serif; white-space: nowrap; }
.rt-rw .lab { color: #e3e6f8; }
.rt-rw img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); object-fit: contain; flex: none; }
.rt-rw b { color: #fff; font-weight: 600; }
.rt-best { font: 500 calc(17.5 * var(--u)) / 1.3 'Mitr', sans-serif; color: #e3e6f8; }
.rt-best b { color: #fff; font-weight: 600; }
.rt-btns { display: flex; gap: calc(16 * var(--u)); margin-top: auto; }
.rt-btns .kw-btn { flex: 1; height: calc(62 * var(--u)); border-radius: calc(12 * var(--u)); }
.rt-btns .rt-b2 { font: 700 calc(18 * var(--u)) / 1.15 'Mitr', sans-serif; text-align: center; }
.rt-btns .rt-enter { font: 800 calc(28 * var(--u)) / 1 'Mitr', sans-serif; color: #fff; -webkit-text-stroke: calc(5 * var(--u)) var(--ink); paint-order: stroke fill; }
/* the party */
.rt-team {
  flex: 1; display: flex; flex-direction: column; margin-top: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(14 * var(--u)) calc(10 * var(--u));
  border-radius: calc(14 * var(--u)); border: calc(3.5 * var(--u)) solid var(--ink); background: #fffaf0;
}
.rt-th { font: 700 calc(20 * var(--u)) / 1.4 'Mitr', sans-serif; padding-bottom: calc(4 * var(--u)); border-bottom: calc(2 * var(--u)) solid #e2d6bb; }
.rt-slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); margin-top: calc(10 * var(--u)); }
.rt-slot { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 0; border: 0; background: none; font-family: 'Mitr', sans-serif; color: var(--ink); }
.rt-pic {
  position: relative; display: block; width: calc(100 * var(--u)); height: calc(102 * var(--u)); box-sizing: border-box; overflow: hidden; border-radius: calc(12 * var(--u));
  border: calc(3.5 * var(--u)) solid var(--ink); background: #f3e7d1;
}
.rt-pic canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rt-slot b { max-width: 100%; margin-top: calc(4 * var(--u)); font: 600 calc(18 * var(--u)) / 1.2 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-slot small { font: 500 calc(15.5 * var(--u)) / 1.2 'Mitr', sans-serif; color: #5a5268; }
.rt-slot.empty { cursor: pointer; }
.rt-slot.empty .rt-pic { display: grid; place-items: center; background: linear-gradient(#efe8db, #ddd3c2); }
.rt-slot.empty .rt-pic i { width: 76%; height: 76%; display: grid; place-items: center; border-radius: calc(10 * var(--u)); background: #e9e1d2; color: #8a8090; font: 800 normal calc(44 * var(--u)) / 1 'Baloo 2', sans-serif; }
.rt-slot.empty b { color: #6a6078; font-weight: 500; }
.rt-crown { position: absolute; top: calc(2 * var(--u)); right: calc(2 * var(--u)); width: calc(26 * var(--u)); z-index: 1; }
.rt-ok {
  position: absolute; left: 0; right: 0; bottom: calc(3 * var(--u)); z-index: 1; display: flex; align-items: center; justify-content: center; gap: calc(4 * var(--u)); margin: 0 calc(6 * var(--u));
  height: calc(22 * var(--u)); border-radius: 99px; background: linear-gradient(#5fd86f, #2f9e46); border: calc(2.5 * var(--u)) solid var(--ink); color: #fff;
  font: 800 normal calc(12.5 * var(--u)) / 1 'Mitr', sans-serif; -webkit-text-stroke: calc(2.5 * var(--u)) var(--ink); paint-order: stroke fill;
}
.rt-ok em { display: grid; place-items: center; width: calc(18 * var(--u)); height: calc(18 * var(--u)); margin-left: calc(-14 * var(--u)); border-radius: 50%; background: #3fbf57;
  border: calc(2.5 * var(--u)) solid #fff; font-style: normal; font-size: calc(11 * var(--u)); -webkit-text-stroke: 0; box-shadow: 0 0 0 calc(2 * var(--u)) var(--ink); }
.rt-hint { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: auto; padding-top: calc(6 * var(--u)); font: 500 calc(15 * var(--u)) / 1.3 'Mitr', sans-serif; color: #3d3550; }
.rt-hint i { display: grid; place-items: center; width: calc(26 * var(--u)); height: calc(26 * var(--u)); flex: none; border-radius: 50%; background: #2f5fb8; color: #fff; font: 800 normal calc(16 * var(--u)) / 1 'Baloo 2', sans-serif; }
.rt-solo { display: flex; align-items: flex-start; gap: calc(14 * var(--u)); margin-top: calc(10 * var(--u)); }
.rt-solo ul { margin: 0; padding-left: calc(18 * var(--u)); font: 500 calc(15 * var(--u)) / 1.6 'Mitr', sans-serif; color: #3d3550; }
/* the season bar */
.rt-foot {
  display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(55 * var(--u)); margin: calc(8 * var(--u)) calc(10 * var(--u)) calc(12 * var(--u)); padding: 0 calc(8 * var(--u)) 0 calc(14 * var(--u));
  border-radius: calc(12 * var(--u)); border: calc(3.5 * var(--u)) solid var(--ink); background: #fffaf0;
}
.rt-foot > img { width: calc(42 * var(--u)); height: calc(42 * var(--u)); object-fit: contain; }
.rt-foot > b { font: 700 calc(21 * var(--u)) / 1 'Mitr', sans-serif; white-space: nowrap; }
.rt-foot > span { flex: 1; min-width: 0; font: 500 calc(18.5 * var(--u)) / 1.2 'Mitr', sans-serif; color: #2a2435; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-seedbtn { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(4 * var(--u)); cursor: pointer;
  border-radius: 99px; border: calc(3 * var(--u)) solid var(--ink); background: #efe4c9; font: 800 calc(17 * var(--u)) / 1 'Baloo 2', sans-serif; color: var(--ink); }
.rt-seedbtn img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }
.rt-rankbtn { height: calc(44 * var(--u)); min-width: calc(150 * var(--u)); border-radius: calc(12 * var(--u)); font-size: calc(19 * var(--u)); }
.rt-bars { display: inline-flex; align-items: flex-end; gap: calc(2 * var(--u)); height: calc(20 * var(--u)); margin-right: calc(6 * var(--u)); }
.rt-bars s { display: block; width: calc(5 * var(--u)); background: #fff; border: calc(1.5 * var(--u)) solid var(--ink); border-radius: calc(1.5 * var(--u)); }
.rt-bars s:nth-child(1) { height: 55%; } .rt-bars s:nth-child(2) { height: 100%; } .rt-bars s:nth-child(3) { height: 75%; }
.rt-shop {
  position: absolute; right: calc(14 * var(--u)); bottom: calc(80 * var(--u)); z-index: 2; display: flex; flex-direction: column; width: calc(480 * var(--u)); max-height: calc(560 * var(--u));
  border-radius: calc(18 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: #f7efdc; box-shadow: 0 calc(8 * var(--u)) 0 rgba(0, 0, 0, 0.3); overflow: hidden;
}
.rt-shop[hidden] { display: none; }
.rt-shoph { position: relative; display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(52 * var(--u)); padding: 0 calc(60 * var(--u)) 0 calc(14 * var(--u)); flex: none; border-bottom: calc(4 * var(--u)) solid var(--ink); background: linear-gradient(#8a62d6, #5a3a9e); color: #fff; }
.rt-shoph img { width: calc(32 * var(--u)); height: calc(32 * var(--u)); }
.rt-shoph b { font: 700 calc(19 * var(--u)) / 1 'Mitr', sans-serif; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
.rt-shoph span { font: 600 calc(15 * var(--u)) / 1 'Mitr', sans-serif; }
.rt-shopl { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); }
.rt-si {
  display: grid; grid-template-columns: calc(40 * var(--u)) minmax(0, 1fr) auto; column-gap: calc(10 * var(--u)); align-items: center; padding: calc(6 * var(--u)) calc(8 * var(--u));
  border-radius: calc(12 * var(--u)); background: #fffaf0; border: calc(2.5 * var(--u)) solid #d4c6a6;
}
.rt-si > img, .rt-si > .rt-frame { grid-row: 1 / span 2; width: calc(40 * var(--u)); height: calc(40 * var(--u)); object-fit: contain; }
.rt-si b { font: 600 calc(15 * var(--u)) / 1.25 'Mitr', sans-serif; }
.rt-si small { grid-column: 2; font: 400 calc(12 * var(--u)) / 1.3 'Mitr', sans-serif; color: #6a6078; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rt-si .kw-btn { grid-row: 1 / span 2; grid-column: 3; height: calc(40 * var(--u)); font-size: calc(15 * var(--u)); }
.rt-frame { display: block; box-sizing: border-box; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #e4f2ff 0 55%, #b9d6f2 56%); }

/* frames round a face (bought or earned in the roots) */
.f-bark { box-shadow: 0 0 0 calc(3.5 * var(--u)) #7a5a3a, 0 0 0 calc(6 * var(--u)) var(--ink); border-radius: 50%; }
.f-sap { box-shadow: 0 0 0 calc(3.5 * var(--u)) #9b5cff, 0 0 0 calc(6 * var(--u)) var(--ink), 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(170, 110, 255, 0.7); border-radius: 50%; }
.f-star { box-shadow: 0 0 0 calc(3.5 * var(--u)) #ffd35c, 0 0 0 calc(6 * var(--u)) var(--ink), 0 0 calc(10 * var(--u)) calc(3 * var(--u)) rgba(255, 220, 120, 0.8); border-radius: 50%; }
.f-heart { box-shadow: 0 0 0 calc(3.5 * var(--u)) #e04aa6, 0 0 0 calc(6 * var(--u)) var(--ink), 0 0 calc(12 * var(--u)) calc(4 * var(--u)) rgba(200, 90, 255, 0.8); border-radius: 50%; }
.f-crown { box-shadow: 0 0 0 calc(2.5 * var(--u)) #fff3c0, 0 0 0 calc(5 * var(--u)) #f2b632, 0 0 0 calc(7.5 * var(--u)) var(--ink), 0 0 calc(12 * var(--u)) calc(4 * var(--u)) rgba(255, 210, 90, 0.9); border-radius: 50%; }

/* ---------------- the ranking (B) — sizes measured on the mockup (its window 1073 px = 1075 u) ---------------- */
.rt-board { width: calc(1075 * var(--u)); }
.rb-bar { display: flex; align-items: flex-end; gap: calc(12 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) 0; border-bottom: calc(4 * var(--u)) solid var(--ink); }
.rb-tabs { display: flex; gap: calc(8 * var(--u)); }
.rb-tabs button {
  width: calc(175 * var(--u)); height: calc(44 * var(--u)); margin-bottom: calc(-4 * var(--u)); cursor: pointer; border: calc(4 * var(--u)) solid var(--ink);
  border-radius: calc(14 * var(--u)) calc(14 * var(--u)) 0 0; background: linear-gradient(#f5ecd9, #ddd0b5); color: var(--ink); font: 700 calc(20 * var(--u)) / 1 'Mitr', sans-serif;
}
.rb-tabs button.on { background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; }
/* the period chips: one joined pill */
.rb-chips { display: flex; margin-left: auto; margin-bottom: calc(6 * var(--u)); height: calc(40 * var(--u)); border: calc(3.5 * var(--u)) solid var(--ink); border-radius: calc(12 * var(--u)); overflow: hidden; background: #fffaf0; }
.rb-chips button { min-width: calc(110 * var(--u)); padding: 0 calc(10 * var(--u)); cursor: pointer; border: 0; border-left: calc(3 * var(--u)) solid var(--ink); background: none; color: var(--ink); font: 600 calc(16.5 * var(--u)) / 1 'Mitr', sans-serif; }
.rb-chips button:first-child { border-left: 0; }
.rb-chips button.on { background: linear-gradient(#7fcaf8, #3b8fdc); color: #fff; -webkit-text-stroke: calc(3.5 * var(--u)) var(--ink); paint-order: stroke fill; }
.rb-jobw { position: relative; margin-bottom: calc(6 * var(--u)); }
.rb-jobw::after { content: ''; position: absolute; right: calc(14 * var(--u)); top: 50%; margin-top: calc(-5 * var(--u)); border: calc(8 * var(--u)) solid transparent; border-top: calc(10 * var(--u)) solid var(--ink); border-bottom: 0; pointer-events: none; }
.rb-job { appearance: none; -webkit-appearance: none; width: calc(168 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(36 * var(--u)) 0 calc(12 * var(--u)); border-radius: calc(12 * var(--u));
  border: calc(3.5 * var(--u)) solid var(--ink); background: #fffaf0; color: var(--ink); font: 600 calc(17 * var(--u)) / 1 'Mitr', sans-serif; cursor: pointer; }
.rb-body { display: flex; gap: calc(13 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)) calc(14 * var(--u)); }
/* the depth column (the whole height) */
.rb-depth { flex: none; display: flex; flex-direction: column; width: calc(212 * var(--u)); height: calc(697 * var(--u)); box-sizing: border-box; border-radius: calc(14 * var(--u)); border: calc(3.5 * var(--u)) solid #c9b994; background: #efe4c9; overflow: hidden; }
.rb-dh { flex: none; height: calc(34 * var(--u)); display: grid; place-items: center; font: 700 calc(18 * var(--u)) / 1 'Mitr', sans-serif; color: var(--ink); background: #f6eedb; border-bottom: calc(3 * var(--u)) solid #c9b994; }
.rb-depth canvas { flex: 1; width: 100%; min-height: 0; }
.rb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rb-stage { position: relative; height: calc(265 * var(--u)); overflow: hidden; border-radius: calc(14 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: #1b1530; box-sizing: border-box; }
.rb-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rb-plates { position: absolute; inset: 0; pointer-events: none; }
.rb-plate {
  position: absolute; transform: translate(-50%, 0); display: flex; flex-direction: column; align-items: center; justify-content: center; width: calc(165 * var(--u)); min-height: calc(58 * var(--u));
  padding: calc(2 * var(--u)) calc(8 * var(--u)); box-sizing: border-box; border-radius: calc(12 * var(--u)); background: #fffaf0; border: calc(3.5 * var(--u)) solid var(--ink);
  box-shadow: 0 calc(3 * var(--u)) 0 rgba(0, 0, 0, 0.35); text-align: center; color: var(--ink);
}
.rb-plate.p1 { width: calc(208 * var(--u)); }
.rb-plate b { max-width: 100%; font: 700 calc(18.5 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-plate i { font: 700 normal calc(17 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; }
.rb-plate.empty b { color: #9c8e70; }
/* the list: a header row and the rows */
.rb-list { display: flex; flex-direction: column; height: calc(333 * var(--u)); margin-top: calc(12 * var(--u)); box-sizing: border-box; border-radius: calc(12 * var(--u)); border: calc(3.5 * var(--u)) solid #c9b994; background: #fffaf0; overflow: hidden; }
.rb-head, .rb-row { display: grid; align-items: center; gap: calc(8 * var(--u)); padding: 0 calc(12 * var(--u)); grid-template-columns: calc(60 * var(--u)) minmax(0, 1.1fr) minmax(0, 1fr) calc(108 * var(--u)) calc(110 * var(--u)) minmax(0, 1fr); }
.rb-head.party, .rb-row.party { grid-template-columns: calc(60 * var(--u)) minmax(0, 1fr) calc(160 * var(--u)) calc(108 * var(--u)) calc(110 * var(--u)) minmax(0, 1.05fr); }
.rb-head { flex: none; height: calc(31 * var(--u)); border-bottom: calc(2.5 * var(--u)) solid #c9b994; background: #f6eedb; font: 600 calc(14 * var(--u)) / 1 'Mitr', sans-serif; color: #3d3550; }
.rb-head span:nth-child(3), .rb-head span:nth-child(4), .rb-head span:nth-child(5) { text-align: center; }
.rb-rows { flex: 1; min-height: 0; }
.rb-row { height: calc(43 * var(--u)); border-bottom: calc(2 * var(--u)) solid #e4d7b9; font: 500 calc(17 * var(--u)) / 1 'Mitr', sans-serif; color: var(--ink); }
.rb-row.me { background: #dff0ff; }
.rb-no { font: 800 calc(21 * var(--u)) / 1 'Baloo 2', sans-serif; text-align: center; }
.rb-who { display: flex; align-items: center; gap: calc(8 * var(--u)); min-width: 0; }
.rb-face { width: calc(36 * var(--u)); height: calc(36 * var(--u)); flex: none; }
.rb-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-mems { display: flex; justify-content: center; gap: calc(3 * var(--u)); }
.rb-mems canvas { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
.rb-job2 { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 500 calc(15.5 * var(--u)) / 1.2 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; }
.rb-job2 img { width: calc(28 * var(--u)); height: calc(28 * var(--u)); flex: none; }
.rb-floor { font: 800 calc(21 * var(--u)) / 1 'Baloo 2', 'Mitr', sans-serif; color: #ffbe2e; -webkit-text-stroke: calc(4 * var(--u)) var(--ink); paint-order: stroke fill; text-align: center; white-space: nowrap; }
.rb-time { font: 500 calc(16 * var(--u)) / 1 'Mitr', sans-serif; color: var(--ink); text-align: center; white-space: nowrap; }
.rb-guild { color: #3d3550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: calc(15 * var(--u)); }
.rb-empty { padding: calc(40 * var(--u)) 0; text-align: center; font: 400 calc(17 * var(--u)) / 1.5 'Mitr', sans-serif; color: #7d7488; }
.rb-note { margin-top: calc(6 * var(--u)); font: 500 calc(13.5 * var(--u)) / 1.4 'Mitr', sans-serif; color: #3d3550; text-align: center; }
/* my place */
.rb-me {
  display: flex; align-items: center; gap: calc(18 * var(--u)); height: calc(57 * var(--u)); margin-top: calc(7 * var(--u)); padding: 0 calc(18 * var(--u)) 0 calc(44 * var(--u));
  box-sizing: border-box; border-radius: calc(14 * var(--u)); border: calc(4 * var(--u)) solid var(--ink); background: linear-gradient(#5fb2f2, #2f7fd6); color: #fff;
  box-shadow: inset 0 calc(3 * var(--u)) 0 rgba(255, 255, 255, 0.35);
}
.rb-mface { width: calc(50 * var(--u)); height: calc(50 * var(--u)); flex: none; }
.rb-mno { font: 800 calc(22 * var(--u)) / 1 'Baloo 2', sans-serif; -webkit-text-stroke: calc(4.5 * var(--u)) var(--ink); paint-order: stroke fill; min-width: calc(50 * var(--u)); }
.rb-me b { min-width: 0; 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; }

/* ---------------- รากต้นไม้มืด's loot (js/rootloot.js): the shadow-core exchange in the lobby, the bound mark ---------------- */
.rl-btn { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(10 * var(--u)) 0 calc(4 * var(--u)); cursor: pointer;
  border-radius: 99px; border: calc(3 * var(--u)) solid var(--ink); background: #e6dcf6; font: 800 calc(17 * var(--u)) / 1 'Baloo 2', sans-serif; color: var(--ink); }
.rl-btn img { width: calc(30 * var(--u)); height: calc(30 * var(--u)); object-fit: contain; }
.rt-shop.rl-shade { width: calc(720 * var(--u)); max-height: calc(600 * var(--u)); }
.rl-shade .rt-shoph { background: linear-gradient(#5a3a9e, #3b2470); }
.rl-shade .rt-shoph span { margin-left: auto; margin-right: calc(8 * var(--u)); }
.rl-body { display: flex; min-height: 0; height: calc(520 * var(--u)); }
.rl-bosses { flex: none; width: calc(230 * var(--u)); display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(8 * var(--u)); border-right: calc(3 * var(--u)) solid #d4c6a6; background: #efe4c9; }
.rl-boss { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: calc(6 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); cursor: pointer; text-align: left;
  border-radius: calc(10 * var(--u)); border: calc(2.5 * var(--u)) solid var(--ink); background: #fffaf0; font-family: 'Mitr', sans-serif; color: var(--ink); }
.rl-boss.on { background: linear-gradient(#cbb2f5, #a983ea); }
.rl-boss b { font: 600 calc(14.5 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-boss small { grid-column: 1; font: 500 calc(12 * var(--u)) / 1.2 'Mitr', sans-serif; color: #5a5268; }
.rl-boss i { grid-column: 2; grid-row: 1 / span 2; font: 800 normal calc(15 * var(--u)) / 1 'Baloo 2', sans-serif; color: #6a6078; }
.rl-boss i.ok { color: #2f9e46; }
.rl-items { flex: 1; min-width: 0; padding: calc(10 * var(--u)) calc(12 * var(--u)); }
.rl-ih { display: flex; align-items: baseline; gap: calc(10 * var(--u)); margin-bottom: calc(8 * var(--u)); font: 700 calc(18 * var(--u)) / 1.2 'Mitr', sans-serif; }
.rl-ih span { margin-left: auto; font: 500 calc(15 * var(--u)) / 1 'Mitr', sans-serif; }
.rl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(8 * var(--u)); }
.rl-it { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--u)); padding: calc(6 * var(--u)) calc(4 * var(--u)); cursor: pointer; min-width: 0;
  border-radius: calc(12 * var(--u)); border: calc(3 * var(--u)) solid #a86cf2; background: linear-gradient(#f6eeff, #ddc9fa); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--ink); font-family: 'Mitr', sans-serif; color: var(--ink); }
.rl-it:not(:disabled):hover { filter: brightness(1.06); transform: translateY(calc(-2 * var(--u))); }
.rl-it:disabled { cursor: default; filter: grayscale(0.6); opacity: 0.7; }
.rl-it img { width: calc(58 * var(--u)); height: calc(58 * var(--u)); object-fit: contain; }
.rl-it b { max-width: 100%; font: 600 calc(12.5 * var(--u)) / 1.25 'Mitr', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-it small { font: 500 calc(11.5 * var(--u)) / 1 'Mitr', sans-serif; color: #5a5268; }
.rl-none { grid-column: 1 / -1; padding: calc(30 * var(--u)); text-align: center; color: #6a6078; font: 400 calc(15 * var(--u)) / 1.4 'Mitr', sans-serif; }
/* the bound mark: on the item card, in the copies list */
.rl-bound { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(8 * var(--u)); padding: calc(6 * var(--u)) calc(10 * var(--u)); border-radius: calc(10 * var(--u));
  background: rgba(170, 110, 255, 0.12); border-left: calc(5 * var(--u)) solid #9b5cff; font: 400 calc(13.5 * var(--u)) / 1.35 'Mitr', sans-serif; color: #d9dcf2; }
.rl-bound img { width: calc(34 * var(--u)); height: calc(34 * var(--u)); flex: none; object-fit: contain; }
.rl-bound b { display: block; color: #d2b2ff; font-weight: 700; }
.gt-tag.bd { background: #6f4bc4; color: #fff; }

/* the blessings: the lobby's pill and the floor HUD's line */
.rl-bless { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(40 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 99px; border: calc(3 * var(--u)) solid var(--ink);
  background: linear-gradient(#fff2c4, #f6d77a); font: 600 calc(16 * var(--u)) / 1 'Mitr', sans-serif; color: var(--ink); white-space: nowrap; }
.rl-bless b { font: 800 calc(19 * var(--u)) / 1 'Baloo 2', sans-serif; }
#rt-hud .rt-bless { margin-top: calc(3 * var(--u)); font: 600 calc(14 * var(--u)) / 1.3 'Mitr', sans-serif; color: #ffd873; letter-spacing: 0.02em; }
#rt-hud .rt-bless.none { color: #ff9aa4; }
.rt-foot > .rl-bless { flex: none; color: var(--ink); overflow: visible; }
.rl-bless i { font-style: normal; color: #c98a1a; letter-spacing: calc(1 * var(--u)); font-size: calc(14 * var(--u)); }