/* Shared window chrome and dedicated controls for the desktop game client. */
:root {
  --classic-gold: #e8d29d;
  --classic-brass: #8e6d3d;
  --classic-ink: #0b1c31;
  --classic-text: #fff2d1;
  --classic-muted: #b4c8d4;
  --classic-steel: linear-gradient(180deg, #7693a9 0%, #426582 14%, #244461 52%, #18314b 100%);
  --classic-lacquer: linear-gradient(155deg, #304f6d 0%, #172e4b 45%, #101f37 100%);
  --classic-edge: inset 0 0 0 1px #172841, inset 0 0 0 2px #b4c2be33, 0 3px 8px #07172780;
  --classic-face: "Microsoft YaHei", "PingFang SC", "SimSun", sans-serif;
  --classic-serif: "KaiTi", "STKaiti", "SimSun", serif;
}

.pc-client {
  --dock-height: 66px;
  color: var(--classic-text);
  border-color: var(--classic-brass);
  box-shadow: inset 0 0 0 1px var(--classic-gold), 0 12px 50px #060e19b3;
  font-family: var(--classic-face);
}

.pc-client button {
  font-family: var(--classic-face);
}

.pc-client button:focus-visible,
.modal button:focus-visible,
.pc-chat-input input:focus-visible {
  outline: 2px solid #ffebb3;
  outline-offset: 2px;
}

.pc-titlebar {
  height: 32px;
  min-height: 32px;
  gap: 9px;
  padding: 0 8px;
  background: var(--classic-steel);
  border-bottom-color: var(--classic-gold);
  box-shadow: inset 0 1px #d1dddc9c, inset 0 -2px #121f32;
}

.pc-titlebar strong {
  font-family: var(--classic-serif);
  font-size: 18px;
  line-height: 1;
  letter-spacing: .12em;
  color: var(--classic-text);
  text-shadow: 0 1px #2d1c11, 0 0 7px #e8d29d40;
}

.pc-title-mark {
  width: 20px;
  height: 20px;
  color: #ffebb4;
  border: 1px solid #d7bd85;
  background: radial-gradient(ellipse at 40% 15%, #b48a52, #6b4b2c 80%);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #503823, 0 1px 2px #0a152a;
}

.pc-titlebar button {
  min-width: 30px;
  height: 24px;
  border: 1px solid transparent;
  color: #edf1ed;
}

.pc-titlebar button:hover {
  border-color: #aeb5a275;
  background: #dbe7e22a;
}

.pc-statusbar {
  background: linear-gradient(#193550, #0e2137);
  border-top-color: #9d855c;
  color: #bdcdd2;
  text-shadow: 0 1px #091620;
}

.pc-client .scene {
  inset: 0 0 var(--dock-height);
  height: calc(100% - var(--dock-height));
}

.pc-client .scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 14;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #f6df9f66, inset 0 0 0 3px #101d3690, inset 0 0 36px #11213742;
}

.pc-location,
.pc-status,
.pc-tracker,
.pc-command-panel,
.pc-orders {
  background: var(--classic-lacquer);
  border: 1px solid var(--classic-brass);
  outline: 1px solid #101d2d;
  box-shadow: var(--classic-edge);
  border-radius: 5px;
}

.pc-location {
  top: 9px;
  left: 10px;
  width: 216px;
  height: 59px;
  gap: 8px;
  padding: 5px 8px;
}

.pc-time {
  width: 43px;
  height: 43px;
  color: #623e21;
  border-color: #ffdda0;
  background: radial-gradient(circle at 36% 30%, #ffe3a3, #c4975a 62%, #704b29 100%);
  box-shadow: inset 0 0 0 2px #f4d7a56e, inset 0 0 0 4px #7f4e2f4d, 0 2px 4px #071626aa;
}

.pc-time span {
  color: #4e321f;
  text-shadow: 0 1px #fff0b7a0;
  font-size: 9px;
}

.pc-place {
  font-size: 15px;
  color: var(--classic-text);
  text-shadow: 0 1px #121b29;
  white-space: normal;
  line-height: 1.18;
  text-align: left;
}

.pc-coordinates {
  margin-top: 4px;
  color: #d1e2df;
  font: 11px/1.1 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.pc-map-button,
.pc-chat-input button,
.pc-battle-controls button,
.pc-orders button {
  background: var(--classic-steel);
  color: var(--classic-text);
  border: 1px solid var(--classic-brass);
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #b1c4c553, 0 1px 2px #040e1b80;
  text-shadow: 0 1px #102139;
}

.pc-map-button {
  width: 28px;
  height: 31px;
  flex-shrink: 0;
}

.pc-status {
  top: 9px;
  right: 10px;
  width: 301px;
  min-height: 91px;
  grid-template-columns: 48px minmax(0, 1fr) 46px;
  gap: 4px 7px;
  padding: 7px 8px 6px;
}

.pc-head,
.pc-head.pet-head {
  width: 45px;
  height: 51px;
  border: 1px solid var(--classic-gold);
  border-radius: 2px;
  color: var(--classic-text);
  background: radial-gradient(ellipse at 48% 25%, #a6beb8, #526879 72%, #293b51 100%);
  box-shadow: 0 0 0 1px #0b1523, inset 0 0 8px #29455c;
}

.pc-head.hero-head .role-face {
  left: -1px;
}

.pc-head b {
  min-width: 20px;
  line-height: 13px;
  background: #192843f5;
  color: #ffe8a6;
  border-color: #b78f53;
  font: 600 10px/13px Arial, sans-serif;
}

.pc-vitals {
  min-width: 0;
  grid-template-rows: 16px 12px 12px 9px;
  gap: 3px;
}

.pc-role-name {
  color: var(--classic-text);
  font-size: 12px;
  line-height: 15px;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-meter,
.pc-meter.xp {
  height: 100%;
  border-color: #a38b65;
  border-radius: 2px;
  background: #0a1527;
  box-shadow: 0 0 0 1px #0a1527, inset 0 1px 3px #080e1b;
}

.pc-meter i {
  background: linear-gradient(#ec8a72 4%, #e25649 27%, #b22222 72%, #d75240 100%);
}

.pc-meter.mp i {
  background: linear-gradient(#81cef7 4%, #4491d9 26%, #2852af 74%, #4886cb 100%);
}

.pc-meter.xp i {
  background: linear-gradient(#ffeda4 6%, #cda650 35%, #886736 100%);
}

.pc-meter span {
  font: 600 9px/10px Arial, var(--classic-face);
  font-variant-numeric: tabular-nums;
}

.pc-meter.xp span {
  font-family: var(--classic-face);
  font-size: 7px;
  line-height: 7px;
}

.pc-pet-vitals {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 86px) 1fr auto;
  gap: 6px;
  border-top: 1px solid #d6be8e3b;
  padding-top: 5px;
  color: #e9e7ce;
}

.pc-pet-vitals > span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pc-pet-vitals .bar {
  width: 100%;
  height: 7px;
  border-color: #a38b65;
  background: var(--classic-ink);
}

.pc-pet-vitals small {
  color: var(--classic-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pc-party {
  left: 10px;
  top: 217px;
}

.pc-party > button {
  width: max-content;
  min-width: 82px;
  padding: 2px 10px 2px 2px;
  color: #d7f4cc;
  font-size: 11px;
  background: #19354be8;
  border: 1px solid #baa573;
  border-radius: 3px;
  box-shadow: 0 2px 4px #0b1c2c7a, inset 0 0 0 1px #11263e;
}

.pc-party-face {
  width: 27px;
  height: 29px;
  background: radial-gradient(ellipse at 35% 10%, #778f9c, #314a5e);
  border-color: #c4af86;
  border-radius: 2px;
}

.pc-party-face .sprite {
  left: -5px;
}

.pc-tracker {
  right: 10px;
  top: 118px;
  width: 207px;
  max-height: calc(100% - var(--dock-height) - 132px);
  z-index: 15;
  display: flex;
  flex-direction: column;
  background: linear-gradient(150deg, #183651ef, #102339ed);
  overflow: hidden;
}

.pc-window-cap,
.pc-chat-tabs {
  background: var(--classic-steel);
  border-color: #cdb37c;
  box-shadow: inset 0 1px #dce0ce72;
  color: var(--classic-text);
}

.pc-window-cap {
  height: 28px;
  padding: 3px 8px;
  border-width: 0 0 1px;
  border-radius: 0;
  font-weight: 700;
}

.pc-window-cap button {
  width: 24px;
  min-height: 20px;
  color: #ffedb4;
}

.pc-track-tab {
  min-height: 27px;
  padding: 4px 8px;
  color: #dde8eb;
  border-bottom-color: #ac947960;
  background: #1a314986;
  letter-spacing: .08em;
}

.pc-adventure-shortcut {
  gap: 4px;
  padding: 8px 9px;
  border-top-color: #a4bad473;
  border-bottom-color: #846d63;
  background: linear-gradient(110deg, #305574, #403d69);
}

.pc-adventure-shortcut b {
  color: #fff0b9;
  font-size: 12px;
}

.pc-adventure-shortcut span {
  font-size: 11px;
}

.pc-track-body {
  padding: 8px 9px 10px;
  background: transparent;
  line-height: 1.6;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #89754e #152b45;
}

.pc-track-body b {
  color: #c8edac;
  font-weight: 700;
}

.pc-track-body p {
  color: #e4e4cd;
}

.pc-track-body hr {
  border-top-color: #b9a87947;
  margin: 6px 0;
}

.pc-track-link {
  color: #ffe2a0;
  min-height: 21px;
  font-size: 11px;
}

.pc-chat {
  left: 10px;
  bottom: calc(var(--dock-height) + 8px);
  width: min(410px, 41%);
  box-shadow: 0 3px 12px #0b172c75;
}

.pc-chat-tabs {
  height: 25px;
  padding: 0 4px;
  border-radius: 4px 4px 0 0;
}

.pc-chat-tabs button {
  padding-inline: 9px;
  font-size: 11px;
}

.pc-chat-tabs button.active {
  background: linear-gradient(#e6d3a3, #b3945c 45%, #806038);
  color: #221f19;
  text-shadow: 0 1px #fae5b087;
  border-color: #ddc69a;
}

.pc-chat-lines {
  height: 99px;
  padding: 5px 8px;
  background: linear-gradient(95deg, #132b43f2, #142d43d9);
  border-color: #8e805f;
  color: #f8edbb;
  line-height: 1.55;
}

.pc-chat-lines p {
  font-size: 11px;
}

.pc-chat-input {
  height: 26px;
  padding: 2px 3px;
  background: linear-gradient(#355570, #193654);
  border-color: #a68d60;
  border-radius: 0 0 4px 4px;
}

.pc-chat-input input {
  background: #0e2439;
  border-color: #8f9a9c;
  font: 11px/1.2 var(--classic-face);
}

.pc-chat-input button {
  height: 19px;
}

.pc-client .world-encounter-hud,
.pc-client .world-beast-entry,
.pc-client .world-arena-entry,
.pc-client .pc-ride-toggle,
.pc-client .arena-world-sign,
.pc-client .arena-world-open,
.pc-client .arena-world-back {
  background: var(--classic-steel);
  border-color: #c1a775;
  box-shadow: var(--classic-edge);
  color: var(--classic-text);
  border-radius: 4px;
}

.pc-client .world-encounter-hud,
.pc-client .arena-world-sign {
  background: var(--classic-lacquer);
  left: 10px;
}

.pc-client .world-encounter-hud {
  top: 77px;
}

.pc-client .world-beast-entry {
  left: 10px;
  top: 151px;
  height: 30px;
}

.pc-client .world-arena-entry {
  left: 113px;
  top: 151px;
  height: 30px;
  padding: 5px 8px;
}

.pc-client .pc-ride-toggle {
  top: 187px;
  left: 10px;
}

.pc-client .npc-name {
  font-family: var(--classic-face);
  color: #fff1a7;
  text-shadow: 0 1px #18222e, 1px 0 #18222e, -1px 0 #18222e, 0 -1px #18222e, 0 2px 5px #081821;
}

.pc-client .player .player-name {
  font-family: var(--classic-face);
  font-weight: 700;
}

.pc-hotbar {
  height: var(--dock-height);
  padding: 6px 10px;
  gap: 11px;
  border-top-color: var(--classic-gold);
  background: linear-gradient(180deg, #6c8ba7 0%, #355b7c 8%, #213e5e 27%, #142a46 92%, #46607c 100%);
  box-shadow: inset 0 2px #deccb1a0, inset 0 -2px #0f2136;
}

.pc-shortcuts,
.pc-tools {
  gap: 5px;
}

.pc-shortcuts {
  flex-shrink: 0;
}

.pc-tools {
  min-width: 0;
}

.pc-shortcut {
  width: 44px;
  height: 46px;
  border: 1px solid #d8bd86;
  border-radius: 4px;
  background: linear-gradient(155deg, #58708c, #132b44 48%, #0d203a 100%);
  box-shadow: 0 0 0 1px #132843, inset 0 0 0 1px #8d9ca6bb, 0 2px 4px #061624;
}

.pc-shortcut > span,
.pc-shortcut .skill-emblem {
  width: 37px;
  height: 37px;
}

.pc-shortcut small {
  min-width: 14px;
  padding: 1px 2px;
  top: auto;
  right: 2px;
  bottom: 2px;
  border: 1px solid #eadd9f42;
  border-radius: 2px;
  background: #0a182ddc;
  color: #ffedbf;
  text-align: center;
  font: 700 9px/10px Arial, sans-serif;
}

.pc-shortcut[data-id="herb"] > span,
.pc-shortcut[data-id="mana"] > span {
  width: 35px;
  height: 35px;
  border: 1px solid #b59c6eab;
  border-radius: 3px;
}

.pc-shortcut[data-id="herb"] > span {
  background: radial-gradient(ellipse at 35% 14%, #b98b7a, #783b49 62%, #3a243c) !important;
  color: #ffdbb6;
}

.pc-shortcut[data-id="mana"] > span {
  background: radial-gradient(ellipse at 40% 12%, #85b7bc, #365777 64%, #243450) !important;
  color: #cfebfa;
}

.pc-shortcut.unlearned::before {
  padding: 1px 2px;
  background: #131c2d;
  color: #f8df9d;
  border-radius: 2px;
}

.pc-money {
  min-width: 78px;
  padding: 4px 6px 4px 8px;
  gap: 4px;
  border-left: 1px solid #d2b78a7a;
  color: #fff0b1;
  text-shadow: 0 1px #081628;
  font: 600 11px/1.1 Arial, var(--classic-face);
  font-variant-numeric: tabular-nums;
}

.pc-money span:nth-child(2) svg {
  color: #95dab8;
}

.pc-tool {
  --tool-light: #698ca4;
  --tool-mid: #38617f;
  --tool-mark: #ffe4a7;
  width: 43px;
  min-width: 31px;
  height: 47px;
  border: 1px solid #bfa77a;
  border-radius: 4px;
  background: linear-gradient(170deg, var(--tool-light), var(--tool-mid) 26%, #17334f 75%);
  box-shadow: inset 0 0 0 1px #193049, inset 0 0 0 2px #a5bac538, 0 2px 3px #0b1f36;
}

.pc-tool:is(.tool-bag, .tool-scroll, .tool-hammer) {
  --tool-light: #9b9178;
  --tool-mid: #685c4c;
  --tool-mark: #ffdda8;
}

.pc-tool:is(.tool-pet, .tool-run, .tool-team) {
  --tool-light: #6b9e96;
  --tool-mid: #3b666f;
  --tool-mark: #d6f0c6;
}

.pc-tool:is(.tool-lotus, .tool-star) {
  --tool-light: #967b9a;
  --tool-mid: #5b567f;
  --tool-mark: #ffe0eb;
}

.pc-tool svg.icon {
  width: 23px;
  height: 23px;
  margin-top: -8px;
  color: var(--tool-mark);
  stroke-width: 1.9;
  filter: drop-shadow(0 1px 1px #142236);
}

.pc-tool small {
  line-height: 15px;
  font: 600 10px/15px var(--classic-face);
  color: #fff2d0;
  border-top: 1px solid #c9b58550;
  background: #102440c4;
  text-shadow: 0 1px #0a1324;
}

.pc-tool:hover,
.pc-shortcut:hover,
.pc-map-button:hover,
.pc-battle-controls button:hover {
  border-color: #f9dea3;
  box-shadow: inset 0 0 0 1px #f0d59888, 0 0 8px #f0d5983d;
}

.pc-round {
  top: 12px;
  width: 136px;
  padding: 2px 7px 6px;
  border: 1px solid #d0af75;
  border-radius: 6px;
  background: var(--classic-lacquer);
  box-shadow: var(--classic-edge);
  font: 700 12px/1.12 var(--classic-face);
  letter-spacing: 1px;
  color: #fff2cd;
  text-shadow: 0 1px #0b1828;
}

.pc-round::before {
  content: none;
}

.pc-round b {
  font: 700 28px/1.2 Georgia, serif;
  color: #ffe09a;
  text-shadow: 0 2px #634629;
}

.pc-round small {
  width: 52px;
  height: 23px;
  margin: 0 auto;
  border: 1px solid #d6b77e;
  border-radius: 3px;
  background: linear-gradient(#d5b783, #87633a);
  color: #fff7de;
  font: 700 13px/21px var(--classic-face);
  text-shadow: 0 1px #6b472a;
}

.pc-battle-controls {
  top: 78px;
  left: 10px;
}

.pc-battle-controls button {
  min-height: 25px;
  padding: 3px 8px;
}

.pc-command-panel {
  right: 13px;
  bottom: 42px;
  width: 113px;
  padding: 5px 7px 7px;
  border-color: #bf9d62;
}

.pc-command-panel::before {
  content: none;
}

.pc-command-title {
  padding: 4px 0 5px;
  color: var(--classic-text);
  border-bottom-color: #ac906b9c;
  font-weight: 700;
  letter-spacing: .1em;
}

.pc-command-panel > small {
  color: #d7e5e7;
}

.pc-command {
  height: 30px;
  margin-top: 3px;
  gap: 7px;
  background: linear-gradient(#d0af78 0%, #a58151 14%, #725336 76%, #8e6941 100%);
  border-color: #dfc490;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px #655039, 0 1px 2px #0b2037;
  color: #fff5d8;
  font-size: 13px;
  letter-spacing: .1em;
  text-shadow: 0 1px #4a301c;
}

.pc-command.chosen {
  background: linear-gradient(#e1be76, #aa7741 67%, #916036);
  border-color: #ffeaac;
  box-shadow: inset 0 0 0 1px #ffe6a195, 0 0 8px #efc67169;
}

.pc-orders {
  right: 135px;
  bottom: 44px;
  color: #dbe7e5;
}

.pc-client .battle .target-hint {
  background: #142f4ded;
  border-color: #c9a674a8;
  color: #fff1c3;
  box-shadow: inset 0 0 0 1px #18314b;
  font-family: var(--classic-face);
  font-size: 12px;
}

.pc-client .action-banner,
.effects-stage .action-banner {
  background: linear-gradient(90deg, #142b4600, #193751f5 17%, #224765f5 83%, #1a2d4600);
  border-color: #edc988b5;
  color: #ffedc4;
  text-shadow: 0 1px #08243d;
}

.pc-client .action-banner strong,
.effects-stage .action-banner strong {
  font-family: var(--classic-serif);
  font-size: 20px;
}

.modal {
  border-color: #b49c72;
  outline-color: #0f2439;
  background: #eee3c9;
  box-shadow: inset 0 0 0 1px #ffeed0, 0 0 0 1px #162739, 4px 8px 22px #09162b80;
}

.modal-head {
  height: 36px;
  background: var(--classic-steel);
  border-bottom-color: #be9f6a;
  box-shadow: inset 0 1px #d9e1db69;
}

.modal-head h2 {
  font: 700 16px/1.2 var(--classic-serif);
  letter-spacing: .12em;
  color: #fff1cb;
}

.modal-close {
  color: #ffe9c0;
  background: linear-gradient(#9f6855, #743b37);
  border-color: #cdab7f;
  border-radius: 3px;
}

.modal-foot {
  background: #d0c6a9;
  border-top-color: #a59b7d;
  color: #465c5a;
}

.modal .btn:not(.secondary, .danger) {
  border-color: #9e8559;
  background: var(--classic-steel);
  color: var(--classic-text);
  box-shadow: inset 0 0 0 1px #d5d9c262;
}

.modal .btn:disabled {
  opacity: .55;
}

.modal .map-card {
  border: 1px solid #957953;
  border-radius: 4px;
  box-shadow: inset 0 0 0 2px #f4dfad61, inset 0 -42px 40px -30px #081f35;
}

.modal .map-card:not(:disabled):hover {
  border-color: #c19d56;
  outline: 2px solid #e9c681;
  outline-offset: -3px;
  filter: brightness(1.08);
}

.modal .map-card .tag,
.pc-map-pin {
  background: #183751ed;
  border-color: #d1b479;
  color: #fff2bf;
}

.pc-map-canvas {
  border-color: #a28b60;
  box-shadow: 0 0 0 1px #49647b;
}

.pc-map-view {
  border-color: #ffe0a0;
  box-shadow: 0 0 0 1000px #0a26354d, inset 0 0 8px #ffe7ab33;
}

.classic-task-links {
  display: flex;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 4px;
  padding: 5px 7px;
}

.classic-task-links > button {
  flex: 1 0 auto;
  min-height: 25px;
  border: 1px solid #9c8357;
  border-radius: 3px;
  padding: 3px 7px;
  background: var(--classic-steel);
  box-shadow: inset 0 0 0 1px #d6c49242;
  color: var(--classic-text);
  text-shadow: 0 1px #142a43;
  font-size: 11px;
}

.classic-task-links > button:hover {
  border-color: #d6bb80;
  filter: brightness(1.12);
}

.classic-task-page {
  display: grid;
  gap: 13px;
  color: #3d4d53;
}

.classic-task-progress {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(73px, 1fr));
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.classic-task-progress li {
  display: grid;
  place-content: center;
  min-height: 36px;
  padding: 4px 6px;
  text-align: center;
  border: 1px solid #b8a77c;
  border-radius: 3px;
  background: #dcd1b2;
  color: #625c4d;
  font-size: 11px;
  line-height: 1.25;
}

.classic-task-progress li.complete {
  background: #b9ccbb;
  border-color: #8a9c83;
  color: #284d45;
}

.classic-task-progress li.active {
  background: var(--classic-steel);
  border-color: #9c7c49;
  box-shadow: inset 0 0 0 1px #e6cca68a;
  color: var(--classic-text);
  text-shadow: 0 1px #1a3450;
}

.classic-task-heading {
  display: grid;
  gap: 4px;
  padding: 9px 12px;
  border-left: 2px solid #a38552;
  background: linear-gradient(90deg, #d9d3b8, #e4dfc733);
}

.classic-task-heading small {
  color: #5d685d;
  font-size: 11px;
}

.modal .classic-task-heading h3 {
  margin: 0;
  color: #253c52;
  font: 700 21px/1.2 var(--classic-serif);
}

.classic-task-page p {
  margin: 0;
  line-height: 1.8;
}

.classic-task-page .row {
  flex-wrap: wrap;
  gap: 7px;
}

.pets-window .pet-roster,
.pets-window .modal-body {
  scrollbar-width: thin;
  scrollbar-color: #9b8357 #d6ccb0;
}

.pets-window .pet-roster > button.selected {
  background: linear-gradient(90deg, #a9c0bf, #dedbc5);
  box-shadow: inset 3px 0 #526f80;
  color: #233d4a;
}

.pet-growth {
  margin: 12px 0;
  padding: 9px;
  border: 1px solid #a49372;
  border-radius: 4px;
  background: #e6ddc1;
  box-shadow: inset 0 0 0 1px #fff7dc;
  color: #3b514e;
}

.pet-growth header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: #26495b;
}

.pet-growth header > span {
  font: 11px/1.2 var(--classic-face);
  font-variant-numeric: tabular-nums;
  color: #565945;
}

.pet-growth progress {
  display: block;
  width: 100%;
  height: 7px;
  margin: 5px 0 8px;
  overflow: hidden;
  background: #c3b58e;
  border: 1px solid #9a8355;
  border-radius: 2px;
  appearance: none;
}

.pet-growth progress::-webkit-progress-bar {
  background: #c3b58e;
}

.pet-growth progress::-webkit-progress-value {
  background: linear-gradient(#669eab, #2d6782);
}

.pet-growth progress::-moz-progress-bar {
  background: linear-gradient(#669eab, #2d6782);
}

.pets-window .pet-growth .pet-stat-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 7px 0 9px;
}

.pets-window .pet-growth .pet-stat-grid > span {
  display: grid;
  gap: 3px;
  padding: 4px;
  border: 1px solid #b7b18f;
  border-radius: 2px;
  background: #eeecd7;
  text-align: center;
  color: #515f52;
  font-size: 10px;
}

.pet-growth .pet-stat-grid b {
  color: #244b62;
  font: 700 13px/1.2 Arial, sans-serif;
}

.pet-growth h4 {
  margin: 0 0 3px;
  color: #354d5b;
  font: 700 12px/1.2 var(--classic-face);
}

.pet-growth p {
  margin: 0;
  color: #5f6a56;
  font-size: 10px;
  line-height: 1.5;
}

.pet-talent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin-top: 7px;
}

.pet-talent {
  display: grid;
  gap: 3px;
  padding: 5px 6px;
  background: linear-gradient(#ebe7cf, #d7ddcb);
  border: 1px solid #a7a584;
  border-radius: 3px;
  color: #31515b;
  text-align: left;
}

.pet-talent b {
  font-size: 11px;
  line-height: 1.2;
}

.pet-talent span {
  font-size: 10px;
  line-height: 1.35;
  color: #506052;
}

.pet-talent:enabled:hover {
  background: #f6e8bc;
  border-color: #bba16d;
}

.pet-talent:disabled {
  opacity: .68;
}

.pc-client.compact {
  --dock-height: 59px;
}

.pc-client.compact .pc-location {
  width: 190px;
}

.pc-client.compact .pc-status {
  width: 263px;
  grid-template-columns: 46px minmax(0, 1fr) 44px;
}

.pc-client.compact .pc-tracker {
  top: 115px;
  max-height: calc(100% - var(--dock-height) - 129px);
  width: 178px;
}

.pc-client.compact .pc-chat {
  width: 310px;
}

.pc-client.compact .pc-chat-lines {
  height: 89px;
}

.pc-client.compact .pc-hotbar,
.pc-client.compact .pc-tools {
  gap: 4px;
}

.pc-client.compact .pc-tool {
  width: 34px;
  height: 43px;
}

.pc-client.compact .pc-tool small {
  font-size: 9px;
}

.pc-client.compact .pc-shortcut {
  width: 36px;
  height: 40px;
}

.pc-client.compact .pc-shortcut > span,
.pc-client.compact .pc-shortcut .skill-emblem {
  width: 31px;
  height: 32px;
}

.pc-client.compact .pc-command-panel {
  width: 101px;
}

.pc-client.compact .pc-orders {
  right: 121px;
}

@media (prefers-reduced-motion: reduce) {
  .pc-shortcut:hover,
  .pc-shortcut:active {
    translate: none;
  }
}

@media (max-width: 600px) {
  .pets-window .pet-growth .pet-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pet-talent-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pet-growth header {
    flex-wrap: wrap;
  }
}