/*! Source: public/css/scss/ - compile with `npm run build:css`. Do not edit this file by hand. */
@font-face {
  font-family: "Baloo Paaji";
  src: url("../font/BalooPaaji.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

body.trees {
  background: #133A2B url("../img/trees.png") center 0% repeat-x;
  background-attachment: scroll;
  font-family: "Baloo Paaji";
  color: #ffffff;
}

hr.new {
  background: #52390a;
  box-shadow: -4px 5px 0px #211503;
  border: none;
  border-radius: 8px;
  height: 20px;
  margin-top: 40px;
}

#game_body {
  /*background-color: #133A2B;*/
  background-color: #0b442d;
}

div#loading {
  display: none;
  position: absolute;
  z-index: 100;
  padding-bottom: 20px;
  border-style: none;
  border-radius: 20px;
  text-align: center;
  overflow: hidden;
  background-color: #000;
  font-family: "Baloo Paaji";
  font-size: 100px;
  color: #fff;
  width: 500px;
  height: 150px;
  margin: auto;
}

div#nickname_block {
  position: absolute;
  display: none;
  width: 360px;
}

#nickname_input {
  box-sizing: border-box;
  color: #FFFFFF;
  border: none;
  outline: none;
  border-radius: 8px;
  font-size: 20px;
  text-align: center;
  background-color: transparent;
  font-family: "Baloo Paaji", serif;
  padding: 12px;
  height: 40px;
  width: 100%;
}

#login_block {
  position: absolute;
  display: none;
  box-sizing: border-box;
  width: 440px;
  max-width: calc(100vw - 24px);
  padding: 22px 14px 12px;
  overflow: visible;
  background: repeating-linear-gradient(-12deg, transparent 0 22px, rgba(255, 214, 120, 0.05) 22px 24px), repeating-linear-gradient(8deg, transparent 0 36px, rgba(20, 10, 0, 0.12) 36px 39px), #4a3414;
  border: 8px solid #513810;
  box-shadow: 0 8px 0 #221605;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
  z-index: 50;
  cursor: url(../img/cursor0.png), auto;
}

#login_block:before {
  content: "ACCOUNT";
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 2;
  box-sizing: border-box;
  width: 168px;
  height: 36px;
  padding: 0;
  transform: translateX(-50%);
  background: #5a3d14;
  border: 5px #513810 solid;
  box-shadow: 0 5px 0 #221605;
  border-radius: 14px;
  color: #e8c98a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#login_form {
  display: contents;
}

#login_inner {
  position: relative;
  padding: 16px 16px 12px;
  overflow: visible;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
}

#login_inner.login_shake {
  animation: login_shake 0.3s ease;
}

@keyframes login_shake {
  0%, 100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-8px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(2px);
  }
}
#login_inner:after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 12px;
  background: url("../img/golden-bread.png") repeat;
  background-size: 68px 46px;
  opacity: 0.08;
  pointer-events: none;
}

#login_inner > * {
  position: relative;
  z-index: 1;
}

#login_title {
  font-size: 20px;
  line-height: 1.2;
  margin: 0 4px 2px;
  color: #fff;
}

#login_sub {
  font-size: 15px;
  line-height: 1.2;
  margin: 0 4px 6px;
  color: #e8d5a3;
}

#login_reward {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 58px;
  margin: 2px 0 12px;
  color: #fff;
  font-size: 32px;
  line-height: 1;
  transform: rotate(-7deg);
  text-shadow: 0 3px 0 #160e03, 0 0 20px #edcd00;
}

#login_reward:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 78px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(237, 205, 0, 0.5) 0%, transparent 70%);
  pointer-events: none;
}

#login_reward span,
#login_reward img {
  position: relative;
  z-index: 1;
}

#login_reward img {
  width: 62px;
  height: 42px;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 #160e03);
}

.login_field {
  position: relative;
}

#login_block input[type=text],
#login_block input[type=password] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0 0 8px;
  padding: 4px 14px;
  font: 22px "Baloo Paaji", sans-serif;
  text-align: center;
  color: #fff;
  background: #120c03;
  border: 3px solid #513810;
  border-radius: 12px;
  outline: none;
  box-shadow: inset 0 4px 0 #0a0702;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.login_field_password {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 8px;
}

#login_block .login_field_password #password_input {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

#login_block input[type=text]:focus,
#login_block input[type=password]:focus {
  border-color: #edcd00;
  box-shadow: inset 0 4px 0 #0a0702, 0 0 0 3px rgba(237, 205, 0, 0.22);
}

#login_block input.login_invalid,
#login_block input.login_invalid:focus {
  border-color: #a60f1b;
  box-shadow: inset 0 4px 0 #0a0702, 0 0 0 3px rgba(166, 15, 27, 0.25);
}

#login_block input::placeholder {
  color: #8a7040;
}

#password_toggle {
  -webkit-appearance: none;
  appearance: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  background: #221605;
  border: 3px solid #513810;
  border-radius: 12px;
  box-shadow: inset 0 4px 0 #0a0702;
  color: #c4a56a;
  font: 16px "Baloo Paaji", sans-serif;
  line-height: 1;
  letter-spacing: 1px;
  text-shadow: 0 2px 0 #281806;
  outline: none;
  cursor: url(../img/cursor1.png), pointer;
  user-select: none;
}

#password_toggle:hover {
  border-color: #8a6420;
  color: #edcd00;
}

#login_caps {
  display: none;
  margin: 0 0 6px;
  color: #f0c04a;
  font: 15px "Baloo Paaji", sans-serif;
}

#login_remember {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 10px;
  color: #e8d5a3;
  font: 18px "Baloo Paaji", sans-serif;
  cursor: url(../img/cursor1.png), pointer;
  user-select: none;
}

#remember_checkbox {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 3px solid #c5a300;
  border-radius: 6px;
  background: #120c03;
  box-shadow: inset 0 2px 0 #0a0702;
  cursor: url(../img/cursor1.png), pointer;
}

#remember_checkbox:hover {
  border-color: #edcd00;
}

#remember_checkbox:checked {
  background: #edcd00;
  box-shadow: none;
}

#remember_checkbox:checked:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 6px;
  height: 11px;
  border: 3px solid #120c03;
  border-top: none;
  border-left: none;
  transform: rotate(38deg);
}

#login_error {
  display: none;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 5px 10px;
  background: rgba(166, 15, 27, 0.22);
  border: 2px solid #7a1420;
  border-radius: 10px;
  color: #ffb4a8;
  font: 16px "Baloo Paaji", sans-serif;
  line-height: 1.2;
  text-shadow: 0 2px 0 #281806;
}

/* ---------------- MENU BUTTONS (login / captcha / sessions / profile) -------------
   Same geometry as the in-game buttons: slightly rounded, flat, with a solid lip
   under the box that the button sinks into when pressed. */
.ns_button {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 2px 12px 0;
  border: none;
  border-radius: 10px;
  font-family: "Baloo Paaji", sans-serif;
  font-size: 22px;
  line-height: 1;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  outline: none;
  cursor: url(../img/cursor1.png), pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.ns_button_small {
  height: 40px;
  font-size: 19px;
}

/* Inline size for rows and card footers: hugs its label instead of filling the row. */
.ns_button_compact {
  width: auto;
  height: 34px;
  padding: 2px 14px 0;
  border-radius: 8px;
  font-size: 16px;
}

/* Primary: carved wood with a gold rim, not a neon slab. */
.ns_button_gold {
  background: #8a590e;
  border: 3px solid #c5a300;
  box-shadow: 0 6px 0 #503208;
  color: #ffe9a8;
}

.ns_button_gold:hover {
  background: #a36a13;
  border-color: #e5c31c;
  box-shadow: 0 6px 0 #5f3c09;
  color: #fff4c8;
}

.ns_button_gold:active {
  background: #6e4409;
  border-color: #a58a00;
  box-shadow: none;
}

.ns_button_brown {
  background: #43301a;
  border: 3px solid #6d5330;
  box-shadow: 0 6px 0 #241708;
  color: #e8d5a3;
}

.ns_button_brown:hover {
  background: #54401f;
  border-color: #8a6a3a;
  box-shadow: 0 6px 0 #2d1d0a;
  color: #f4e6bf;
}

.ns_button_brown:active {
  background: #33240e;
  border-color: #5c4526;
  box-shadow: none;
}

.ns_button_red {
  background: #6f1219;
  border: 3px solid #b3262f;
  box-shadow: 0 6px 0 #3d0a0e;
  color: #ffd9d3;
}

.ns_button_red:hover {
  background: #8a1a22;
  border-color: #d13a44;
  box-shadow: 0 6px 0 #4a0d12;
  color: #ffece9;
}

.ns_button_red:active {
  background: #560d13;
  border-color: #8f1c24;
  box-shadow: none;
}

/* One disabled look for every variant: sunk into its lip and drained of colour. */
.ns_button:disabled,
.ns_button_gold:disabled,
.ns_button_brown:disabled,
.ns_button_red:disabled {
  background: #3a2a12;
  border-color: #5c4526;
  box-shadow: none;
  color: #9c8a63;
}

.ns_button_ghost {
  height: 32px;
  background: transparent;
  box-shadow: none;
  color: #c4a56a;
  font-size: 18px;
}

.ns_button_ghost:hover {
  color: #edcd00;
}

.ns_button_ghost:active {
  color: #c37c00;
  transform: none;
}

.ns_button:disabled {
  cursor: url(../img/cursor0.png), auto;
}

#login {
  margin: 4px 0 0;
}

#signup {
  margin: 16px 0 0;
}

#login_back {
  margin: 8px 0 0;
}

#profile_block {
  position: absolute;
  display: none;
  box-sizing: border-box;
  width: 460px;
  max-width: calc(100vw - 24px);
  padding: 22px 14px 12px;
  overflow: visible;
  background: repeating-linear-gradient(-12deg, transparent 0 22px, rgba(255, 214, 120, 0.05) 22px 24px), repeating-linear-gradient(8deg, transparent 0 36px, rgba(20, 10, 0, 0.12) 36px 39px), #4a3414;
  border: 8px solid #513810;
  box-shadow: 0 8px 0 #221605;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
  z-index: 50;
  cursor: url(../img/cursor0.png), auto;
}

#profile_block:before {
  content: "PROFILE";
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 2;
  box-sizing: border-box;
  width: 168px;
  height: 36px;
  transform: translateX(-50%);
  background: #5a3d14;
  border: 5px #513810 solid;
  box-shadow: 0 5px 0 #221605;
  border-radius: 14px;
  color: #e8c98a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#profile_inner {
  position: relative;
  padding: 14px 16px 12px;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
}

#profile_name_label {
  display: block;
  margin: 0 0 4px;
  color: #c4a56a;
  font-size: 15px;
  letter-spacing: 2px;
}

div#account_nickname_block {
  position: static;
  display: block;
  width: 100%;
}

/* Same field as the login panel: dark well, gold ring on focus. */
#profile_block #account_nickname_input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  margin: 0;
  padding: 2px 12px 0;
  background: #120c03;
  border: 3px solid #513810;
  border-radius: 12px;
  box-shadow: inset 0 4px 0 #0a0702;
  outline: none;
  color: #efe4b4;
  font: 22px "Baloo Paaji", sans-serif;
  text-align: center;
  text-shadow: 0 2px 0 #281806;
  cursor: url(../img/cursor1.png), text;
  transition: border-color 0.12s, box-shadow 0.12s;
}

#profile_block #account_nickname_input::placeholder {
  color: #6b5230;
}

#profile_block #account_nickname_input:focus {
  border-color: #edcd00;
  box-shadow: inset 0 4px 0 #0a0702, 0 0 0 3px rgba(237, 205, 0, 0.22);
}

#profile_rename_hint {
  margin: 5px 0 0;
  color: #8a6a3a;
  font-size: 14px;
  line-height: 1.2;
}

/* Level badge and the bar to the next level share one row. */
#profile_head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 10px;
}

#profile_level {
  flex: 0 0 auto;
  padding: 0 10px;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 8px;
  color: #edcd00;
  font-size: 18px;
  line-height: 26px;
}

#profile_xp {
  position: relative;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  height: 26px;
  background: #140d04;
  border: 3px solid #513810;
  border-radius: 13px;
  box-shadow: inset 0 3px 0 #0c0702;
  box-sizing: border-box;
}

#profile_xp_fill {
  height: 100%;
  background: #edcd00;
  border-radius: 9px;
  box-shadow: inset 0 2px 0 #ffe54c, inset 0 -3px 0 #b38200;
  transition: width 0.25s ease;
}

#profile_xp_text {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-family: "Baloo Paaji", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  text-shadow: -1px -1px 0 #160e03, 1px -1px 0 #160e03, -1px 1px 0 #160e03, 1px 1px 0 #160e03, 0 2px 0 #160e03;
}

#profile_chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
}

.profile_chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 8px;
  color: #c4a56a;
  font-size: 15px;
  line-height: 24px;
}

.profile_chip_bread {
  color: #efe4b4;
}

.profile_bread_icon {
  width: 20px;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 0 #160e03);
}

.profile_group {
  margin: 0 0 6px;
  color: #8a6a3a;
  font-size: 14px;
  letter-spacing: 2px;
}

.profile_grid {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
}

.profile_cell {
  flex: 1;
  min-width: 0;
  padding: 6px 4px;
  background: #221605;
  border: 3px solid #513810;
  border-radius: 10px;
  box-shadow: inset 0 3px 0 #160e03;
}

.profile_cell_label {
  color: #8a6a3a;
  font-size: 13px;
  letter-spacing: 1px;
}

.profile_cell_value {
  color: #efe4b4;
  font-size: 22px;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile_cell_value.profile_cell_gold {
  color: #edcd00;
}

#profile_actions {
  display: flex;
  gap: 10px;
  margin: 4px 0 0;
}

#profile_rename,
#profile_logout {
  flex: 1;
  min-width: 0;
  padding: 2px 6px 0;
}

#profile_back {
  margin: 14px 0 0;
}

#rename_block {
  position: absolute;
  display: none;
  box-sizing: border-box;
  width: 420px;
  max-width: calc(100vw - 24px);
  padding: 22px 14px 12px;
  overflow: visible;
  background: repeating-linear-gradient(-12deg, transparent 0 22px, rgba(255, 214, 120, 0.05) 22px 24px), repeating-linear-gradient(8deg, transparent 0 36px, rgba(20, 10, 0, 0.12) 36px 39px), #4a3414;
  border: 8px solid #513810;
  box-shadow: 0 8px 0 #221605;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
  z-index: 51;
  cursor: url(../img/cursor0.png), auto;
}

#rename_block:before {
  content: "RENAME";
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 2;
  box-sizing: border-box;
  width: 168px;
  height: 36px;
  transform: translateX(-50%);
  background: #5a3d14;
  border: 5px #513810 solid;
  box-shadow: 0 5px 0 #221605;
  border-radius: 14px;
  color: #e8c98a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#rename_inner {
  position: relative;
  padding: 14px 16px 14px;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
}

#rename_label {
  margin: 0 0 4px;
  color: #c4a56a;
  font-size: 15px;
  letter-spacing: 2px;
}

#rename_name {
  box-sizing: border-box;
  min-height: 44px;
  padding: 6px 12px;
  background: #120c03;
  border: 3px solid #513810;
  border-radius: 12px;
  box-shadow: inset 0 4px 0 #0a0702;
  color: #efe4b4;
  font-size: 24px;
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#rename_title {
  margin: 12px 0 4px;
  font-size: 20px;
  line-height: 1.2;
}

#rename_cost {
  margin: 0 0 12px;
  color: #c4a56a;
  font-size: 16px;
  line-height: 1.25;
}

#rename_cost.rename_free {
  color: #edcd00;
}

#rename_cost.rename_short {
  color: #ffb4a8;
}

#rename_actions {
  display: flex;
  gap: 10px;
}

#rename_yes,
#rename_no {
  flex: 1;
  min-width: 0;
  padding: 2px 6px 0;
}

/* ---------------- SHOP PANEL ----------------- */
#shop_block {
  position: absolute;
  display: none;
  box-sizing: border-box;
  width: 700px;
  max-width: calc(100vw - 24px);
  max-height: 100%;
  padding: 22px 14px 12px;
  overflow: visible;
  background: repeating-linear-gradient(-12deg, transparent 0 22px, rgba(255, 214, 120, 0.05) 22px 24px), repeating-linear-gradient(8deg, transparent 0 36px, rgba(20, 10, 0, 0.12) 36px 39px), #4a3414;
  border: 8px solid #513810;
  box-shadow: 0 8px 0 #221605;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
  z-index: 50;
  cursor: url(../img/cursor0.png), auto;
}

#shop_block:before {
  content: "SHOP";
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 2;
  box-sizing: border-box;
  width: 168px;
  height: 36px;
  transform: translateX(-50%);
  background: #5a3d14;
  border: 5px #513810 solid;
  box-shadow: 0 5px 0 #221605;
  border-radius: 14px;
  color: #e8c98a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#shop_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 120px);
  padding: 14px 16px 12px;
  overflow: hidden;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
  box-sizing: border-box;
}

#shop_header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px;
  text-align: left;
}

#shop_title {
  color: #fff;
  font-size: 24px;
  line-height: 1.1;
}

#shop_sub {
  color: #c4a56a;
  font-size: 15px;
  line-height: 1.2;
}

/* Balance reads as a value, not a button: label above, number with the bread art. */
#shop_wallet {
  flex: 0 0 auto;
  padding: 4px 12px 6px;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 10px;
  text-align: right;
}

#shop_wallet_label {
  color: #8a6a3a;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.2;
}

#shop_bread_val {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #efe4b4;
  font-size: 26px;
  line-height: 1;
}

#shop_status {
  display: none;
  box-sizing: border-box;
  margin: 0 0 8px;
  padding: 5px 10px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.2;
  text-shadow: 0 2px 0 #281806;
}

#shop_status.shop_status_error {
  display: block;
  background: rgba(166, 15, 27, 0.22);
  border: 2px solid #7a1420;
  color: #ffb4a8;
}

#shop_status.shop_status_ok {
  display: block;
  background: rgba(39, 186, 54, 0.2);
  border: 2px solid #1e8229;
  color: #b4f0be;
}

#shop_status.shop_status_warn {
  display: block;
  background: rgba(237, 205, 0, 0.16);
  border: 2px solid #8a6420;
  color: #f0c04a;
}

#shop_scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;
}

#shop_scroll::-webkit-scrollbar {
  width: 10px;
}

#shop_scroll::-webkit-scrollbar-track {
  background: #120c03;
  border: 2px solid #513810;
  border-radius: 6px;
}

#shop_scroll::-webkit-scrollbar-thumb {
  background: #8a590e;
  border-radius: 6px;
  border: 2px solid #513810;
}

.shop_grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* One wheel tier: name and odds on top, one buy button per prize below. */
.shop_card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 12px;
  background: #221605;
  border: 3px solid #513810;
  border-radius: 10px;
  box-shadow: inset 0 3px 0 #160e03;
  text-align: left;
}

.shop_card_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.shop_card_title {
  color: #edcd00;
  font-size: 20px;
  line-height: 1.15;
}

.shop_card_range {
  color: #c4a56a;
  font-size: 15px;
  line-height: 1.2;
}

.shop_card_odds {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 6px;
}

.shop_odd_entry {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  background: #1a1106;
  border: 2px solid #3d2a0c;
  border-radius: 8px;
  color: #efe4b4;
  font-size: 15px;
  line-height: 24px;
  cursor: url(../img/cursor0.png), auto;
}

.shop_res_icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 0 #160e03);
}

.shop_card_buys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.shop_buy {
  min-width: 0;
}

/* Layout only: the look comes from .ns_button. Prize on the left, price on the right. */
.shop_spin_btn {
  justify-content: space-between;
  gap: 10px;
  padding: 2px 14px 0;
}

.shop_spin_price {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.shop_spin_price .shop_bread_icon {
  width: 22px;
}

.shop_spin_btn:disabled .shop_bread_icon {
  opacity: 0.5;
}

.shop_buy_note {
  min-height: 18px;
  margin-top: 3px;
  color: #8a6a3a;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
}

.shop_buy_note:empty {
  display: none;
}

.shop_bread_icon {
  width: 26px;
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 2px 0 #160e03);
}

#shop_back {
  margin: 14px 0 0;
}

.shop_shake {
  animation: login_shake 0.3s ease;
}

@media (max-width: 520px) {
  .shop_card_buys {
    grid-template-columns: 1fr;
  }
}
/* -------------------------- COSMETICS -------------------------- */
/* Every rarity sets `--rar` (rim) and `--rar-hi` (text). Cells, group
   headers, chips and the preview spotlight all read those two, so a new
   rarity is one line in the map below. */
.cosmetics_rarity_free {
  --rar: #27ba36;
  --rar-hi: #8ce697;
}

.cosmetics_rarity_wood {
  --rar: #d88e23;
  --rar-hi: #f7c788;
}

.cosmetics_rarity_stone {
  --rar: #afac98;
  --rar-hi: #ded9c8;
}

.cosmetics_rarity_gold {
  --rar: #e2cf27;
  --rar-hi: #f5ea89;
}

.cosmetics_rarity_diamond {
  --rar: #25c5d6;
  --rar-hi: #9beaf2;
}

.cosmetics_rarity_amethyst {
  --rar: #d45ce5;
  --rar-hi: #f2aeff;
}

.cosmetics_rarity_reidite {
  --rar: #d33a2a;
  --rar-hi: #f89e94;
}

.cosmetics_rarity_special {
  --rar: #edcd00;
  --rar-hi: #ffe9a8;
}

.cosmetics_rarity_level {
  --rar: #8ce697;
  --rar-hi: #b4f0be;
}

#cosmetics_block {
  position: absolute;
  display: none;
  box-sizing: border-box;
  width: 740px;
  max-width: calc(100vw - 24px);
  height: min(780px, 100vh - 80px);
  max-height: calc(100vh - 80px);
  padding: 24px 16px 12px;
  overflow: visible;
  background: repeating-linear-gradient(-12deg, transparent 0 22px, rgba(255, 214, 120, 0.05) 22px 24px), repeating-linear-gradient(8deg, transparent 0 36px, rgba(20, 10, 0, 0.12) 36px 39px), #4a3414;
  border: 8px solid #513810;
  box-shadow: 0 8px 0 #221605;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
  z-index: 50;
  cursor: url(../img/cursor0.png), auto;
  user-select: none;
}

#cosmetics_block:before {
  content: "COSMETICS";
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 2;
  box-sizing: border-box;
  width: 188px;
  height: 36px;
  transform: translateX(-50%);
  background: #5a3d14;
  border: 5px #513810 solid;
  box-shadow: 0 5px 0 #221605;
  border-radius: 14px;
  color: #e8c98a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#cosmetics_inner {
  /* Fallback rarity; `.cosmetics_rarity_*` on a descendant overrides it. */
  --rar: #8a6420;
  --rar-hi: #efe4b4;
  position: relative;
  padding: 12px 14px 10px;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

/* ---- Category tabs: equipped item art over the label ---- */
#cosmetics_tabs {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 6px;
  flex-shrink: 0;
}

#cosmetics_tabs .ns_button {
  width: 100%;
  min-width: 0;
  height: 62px;
  padding: 4px 4px 2px;
  flex-direction: column;
  gap: 0;
}

.cosmetics_tab_icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  pointer-events: none;
}

.cosmetics_tab_art {
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 0 rgba(20, 10, 0, 0.55));
}

.cosmetics_tab.ns_button_brown .cosmetics_tab_icon {
  opacity: 0.75;
}

.cosmetics_tab_label {
  display: block;
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 1px;
  pointer-events: none;
}

/* ---- Stage: spotlight preview + details ---- */
#cosmetics_stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin-bottom: 12px;
  padding: 10px;
  background: #120c03;
  border: 3px solid #513810;
  border-radius: 14px;
  box-shadow: inset 0 4px 0 #0a0702;
  flex-shrink: 0;
  min-height: 232px;
  overflow: hidden;
}

#cosmetics_preview {
  position: relative;
  z-index: 1;
  flex: 0 0 250px;
  width: 250px;
  min-width: 250px;
  height: 226px;
  min-height: 226px;
  background: #160e03;
  border: 3px solid color-mix(in srgb, var(--rar) 55%, #3d2a0c);
  border-radius: 12px;
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  pointer-events: none;
  transition: border-color 0.25s;
}

#cosmetics_preview_canvas {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

#cosmetics_stage.cosmetics_stage_locked #cosmetics_preview::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 26px;
  height: 34px;
  background: url(../img/lock.png) center/contain no-repeat;
  filter: drop-shadow(0 2px 0 #0a0702);
}

#cosmetics_meta {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 6px 6px 6px 0;
  gap: 2px;
}

#cosmetics_name {
  color: #fff;
  font-size: 34px;
  line-height: 1.1;
  margin: 4px 0 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-shadow: 0 3px 0 #281806;
}

#cosmetics_author {
  color: #c4a56a;
  font-size: 16px;
  line-height: 1.2;
  min-height: 19px;
}

#cosmetics_meta_row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 2px;
}

.cosmetics_chip {
  display: inline-block;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 22px;
  border: 2px solid #513810;
  background: #221605;
  color: #efe4b4;
  text-shadow: 0 1px 0 #0a0702;
}

.cosmetics_chip[class*=cosmetics_rarity_] {
  border-color: var(--rar);
  color: var(--rar-hi);
  background: color-mix(in srgb, var(--rar) 16%, #1a1106);
}

#cosmetics_rarity {
  font-size: 14px;
  letter-spacing: 2px;
  padding: 0 12px;
}

.cosmetics_chip.cosmetics_chip_equipped {
  border-color: #27ba36;
  color: #8ce697;
  background: rgba(39, 186, 54, 0.15);
}

.cosmetics_chip.cosmetics_chip_unlocked {
  border-color: #d88e23;
  color: #f7c788;
}

.cosmetics_chip.cosmetics_chip_locked {
  border-color: #7a1420;
  color: #ffb4a8;
  background: rgba(166, 15, 27, 0.15);
}

#cosmetics_status {
  display: none;
  box-sizing: border-box;
  width: 100%;
  margin: 8px 0 0;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.25;
}

#cosmetics_status.cosmetics_status_error {
  display: block;
  background: rgba(166, 15, 27, 0.22);
  border: 2px solid #7a1420;
  color: #ffb4a8;
}

#cosmetics_status.cosmetics_status_ok {
  display: block;
  background: rgba(39, 186, 54, 0.2);
  border: 2px solid #1e8229;
  color: #b4f0be;
}

#cosmetics_status.cosmetics_status_warn {
  display: block;
  background: rgba(237, 205, 0, 0.16);
  border: 2px solid #8a6420;
  color: #f0c04a;
}

#cosmetics_shop {
  display: none;
  margin-top: 10px;
}

/* ---- Grid ---- */
#cosmetics_scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 2px 8px 4px 2px;
  margin-bottom: 4px;
  contain: layout paint;
  overscroll-behavior: contain;
}

#cosmetics_scroll::-webkit-scrollbar {
  width: 10px;
}

#cosmetics_scroll::-webkit-scrollbar-track {
  background: #140d04;
  border-radius: 6px;
}

#cosmetics_scroll::-webkit-scrollbar-thumb {
  background: #8a590e;
  border-radius: 6px;
  border: 2px solid #513810;
}

.cosmetics_group {
  margin-bottom: 14px;
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}

.cosmetics_group:last-child {
  margin-bottom: 2px;
}

.cosmetics_group_head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2px 2px 8px;
  color: var(--rar-hi, #c4a56a);
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* Rule between the label and the count. */
.cosmetics_group_head::after {
  content: "";
  order: 1;
  flex: 1;
  height: 2px;
  border-radius: 1px;
  background: #2a1c08;
}

.cosmetics_group_count {
  order: 2;
  padding: 0 8px;
  border-radius: 6px;
  background: #221605;
  border: 1px solid #3d2a0c;
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.5px;
  color: #c4a56a;
}

.cosmetics_grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}

.cosmetics_cell {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
  padding: 0;
  background: #221605;
  border: 2px solid color-mix(in srgb, var(--rar, #513810) 45%, #3d2a0c);
  border-radius: 12px;
  box-shadow: inset 0 2px 0 rgba(255, 214, 120, 0.06), 0 3px 0 #0a0702;
  cursor: url(../img/cursor1.png), pointer;
  overflow: hidden;
  contain: layout paint;
}

/* No `filter` on cell art: ~170 filtered layers make the grid scroll jank. */
.cosmetics_cell_art {
  flex: 0 0 auto;
  pointer-events: none;
}

.cosmetics_cell_locked {
  background: #1a1106;
  border-color: #3d2a0c;
}

.cosmetics_cell_locked .cosmetics_cell_art {
  opacity: 0.42;
}

.cosmetics_cell_locked::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 14px;
  height: 18px;
  background: url(../img/lock.png) center/contain no-repeat;
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
}

/* Equipped: green corner tab with a CSS check mark. */
.cosmetics_cell_wear {
  border-color: #27ba36;
}

.cosmetics_cell_wear::after {
  content: "";
  position: absolute;
  right: -2px;
  top: -2px;
  width: 26px;
  height: 24px;
  background: #27ba36;
  border-radius: 0 10px 0 10px;
  box-shadow: 0 2px 0 #145d1c;
  pointer-events: none;
  z-index: 3;
}

.cosmetics_cell_wear::before {
  content: "";
  position: absolute;
  right: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  pointer-events: none;
  z-index: 4;
}

.cosmetics_cell_none {
  color: #8a6a3a;
  font-size: 15px;
  letter-spacing: 1px;
  pointer-events: none;
}

.cosmetics_cell:hover {
  border-color: var(--rar, #8a6420);
}

.cosmetics_cell.cosmetics_cell_wear:hover {
  border-color: #27ba36;
}

/* Inspected cell (clicked, equipped or not). */
.cosmetics_cell.cosmetics_cell_on,
.cosmetics_cell.cosmetics_cell_on:hover {
  border-color: #edcd00;
  box-shadow: inset 0 2px 0 rgba(255, 214, 120, 0.08), 0 3px 0 #0a0702, 0 0 0 3px rgba(237, 205, 0, 0.3);
}

/* ---- Footer: collection progress + back ---- */
#cosmetics_actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 2px solid #2a1c08;
  flex-shrink: 0;
}

#cosmetics_collection {
  flex: 1;
  min-width: 0;
  max-width: 420px;
  display: flex;
  align-items: center;
  gap: 10px;
}

#cosmetics_collection_label {
  color: #c4a56a;
  font-size: 13px;
  letter-spacing: 1.5px;
}

#cosmetics_owned_bar {
  flex: 1;
  min-width: 60px;
  height: 12px;
  background: #120c03;
  border: 2px solid #513810;
  border-radius: 8px;
  box-shadow: inset 0 2px 0 #0a0702;
  overflow: hidden;
}

#cosmetics_owned_fill {
  width: 0;
  height: 100%;
  background: #edcd00;
  border-radius: 6px;
  transition: width 0.3s;
}

#cosmetics_owned {
  color: #efe4b4;
  font-size: 13px;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

#cosmetics_back {
  width: auto;
  padding: 0 20px;
}

@media (max-width: 720px) {
  .cosmetics_grid {
    grid-template-columns: repeat(4, 1fr);
  }
  #cosmetics_preview {
    flex: 0 0 170px;
    width: 170px;
    min-width: 170px;
    height: 170px;
    min-height: 170px;
  }
  #cosmetics_stage {
    min-height: 176px;
  }
  #cosmetics_name {
    font-size: 26px;
  }
  #cosmetics_tabs .ns_button {
    height: 52px;
  }
  #cosmetics_collection_label {
    display: none;
  }
}
@media (max-height: 640px) {
  #cosmetics_block {
    top: 24px !important;
    height: calc(100vh - 36px);
    max-height: calc(100vh - 36px);
    padding: 16px 12px 8px;
  }
  #cosmetics_tabs .ns_button {
    height: 38px;
    flex-direction: row;
    gap: 4px;
  }
  .cosmetics_tab_icon {
    display: none;
  }
  #cosmetics_stage {
    padding: 6px;
    gap: 12px;
    margin-bottom: 8px;
    min-height: 160px;
  }
  #cosmetics_preview {
    flex: 0 0 170px;
    width: 170px;
    min-width: 170px;
    height: 150px;
    min-height: 150px;
  }
  #cosmetics_name {
    font-size: 24px;
  }
}
div#all_rights_reserved {
  display: none;
  position: absolute;
  width: 350px;
  height: 60px;
  font-size: 12px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: url(../img/cursor0.png), auto;
}

div#all_rights_reserved a {
  text-decoration: underline;
}

div#more_io_games {
  background-color: #12ad84;
  display: none;
  position: absolute;
  height: 45px;
  border-radius: 10px 10px 0px 0px;
  font-size: 12px;
  padding: 0px 5px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#more_io_games:hover {
  background-color: #2ec199;
}

div#more_io_games:active {
  background-color: #2ec199;
  margin-top: 5px;
}

div#fullchangelog {
  display: none;
  position: absolute;
  width: 140px;
  height: 60px;
  font-size: 18px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div.dateupdate {
  margin-top: 10px;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: rgba(2, 26, 27, 0.8);
  padding-bottom: 5px;
  padding-right: 5px;
  border: solid 2px #47310f;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#left_side {
  height: 406px;
}

div#share_skins {
  width: 205px;
  box-sizing: border-box;
  border-radius: 10px;
  background-color: rgba(2, 26, 27, 0.8);
  padding-top: 5px;
  padding-bottom: 15px;
  padding-right: 5px;
  border: solid 2px #47310f;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  text-align: center;
  display: none;
  position: absolute;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#twitter_img {
  width: 30px;
}

#twitter_share_skin {
  margin-top: 10px;
  margin-left: 50px;
  margin-bottom: 10px;
  background-color: #1caac9;
  border: solid 2px #1699b5;
  border-radius: 8px;
  box-shadow: 0px 5px #10788f;
  display: inline-block;
  padding: 5px;
  cursor: url(../img/cursor1.png), pointer;
  float: left;
}

#twitter_share_skin:hover {
  background-color: #23bcde;
  border: solid 2px #1dadcc;
  box-shadow: 0px 5px #14869f;
}

#twitter_share_skin:active {
  background-color: #149ab8;
  border: solid 2px #12869f;
  box-shadow: 0px 0px #10788f;
  margin-top: 15px;
  margin-bottom: 5px;
}

div#sidebox {
  width: 245px;
  display: none;
  position: absolute;
  cursor: url(../img/cursor0.png), auto;
}

div#right_side {
  width: 245px;
  display: none;
  position: absolute;
  cursor: url(../img/cursor0.png), auto;
}

.title {
  padding-bottom: 5px;
  padding-top: 15px;
  font-size: 18px;
  color: #ffffff;
  font-family: "Baloo Paaji";
  text-align: center;
  padding-left: 3px;
}

#account_title {
  padding-bottom: 5px;
  padding-top: 0px;
  font-size: 18px;
  color: #ffffff;
  font-family: "Baloo Paaji";
  text-align: center;
  padding-left: 3px;
  margin-top: -8px;
}

#google_placement {
  display: inline-block;
  border-radius: 6px;
  margin-left: 19px;
  border: solid 2px #ffffff;
}

.title_line {
  background-color: #47310f;
  width: 100%;
  height: 3px;
}

#changelof_left_top {
  top: 38px;
  position: absolute;
  width: 65px;
}

#changelof_left_bottom {
  top: 48px;
  position: absolute;
  width: 65px;
}

#changelof_right_top {
  left: 180px;
  top: 38px;
  position: absolute;
  width: 65px;
}

#changelof_right_bottom {
  left: 180px;
  top: 48px;
  position: absolute;
  width: 65px;
}

#commands_left_top {
  top: 105px;
  position: absolute;
  width: 55px;
}

#commands_left_bottom {
  top: 115px;
  position: absolute;
  width: 55px;
}

#commands_right_top {
  left: 190px;
  top: 105px;
  position: absolute;
  width: 55px;
}

#commands_right_bottom {
  left: 190px;
  top: 115px;
  position: absolute;
  width: 55px;
}

#community_left_top {
  top: 282px;
  position: absolute;
  width: 55px;
}

#community_left_bottom {
  top: 292px;
  position: absolute;
  width: 55px;
}

#community_right_top {
  left: 190px;
  top: 282px;
  position: absolute;
  width: 55px;
}

#community_right_bottom {
  left: 190px;
  top: 292px;
  position: absolute;
  width: 55px;
}

#account_left_top {
  top: 398px;
  position: absolute;
  width: 25px;
}

#account_left_bottom {
  top: 408px;
  position: absolute;
  width: 25px;
}

#account_right_top {
  left: 220px;
  top: 398px;
  position: absolute;
  width: 25px;
}

#account_right_bottom {
  left: 220px;
  top: 408px;
  position: absolute;
  width: 25px;
}

#date {
  padding-left: 10px;
  font-size: 14px;
  color: #c9ab17;
  font-family: "Baloo Paaji";
  text-align: center;
}

#news {
  padding-left: 10px;
  font-size: 11px;
  color: #ffffff;
  font-family: "Baloo Paaji";
  line-height: 16px;
}

.newsC {
  padding-left: 10px;
  font-size: 11px;
  color: #ffffff;
  font-family: "Baloo Paaji";
  line-height: 16px;
}

div#news a {
  text-decoration: underline;
  font-size: 12px;
  cursor: url(../img/cursor1.png), pointer;
}

div#creation {
  display: none;
  position: absolute;
  height: 60px;
  font-size: 18px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: url(../img/cursor0.png), auto;
}

div#creation a {
  text-decoration: underline;
  cursor: url(../img/cursor1.png), pointer;
}

a:link {
  text-decoration: none;
  color: white;
  cursor: url(../img/cursor1.png), pointer;
}

a:visited {
  text-decoration: none;
  color: white;
  cursor: url(../img/cursor1.png), pointer;
}

canvas#game_gl {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  image-rendering: auto;
}

canvas#game_canvas {
  position: absolute;
  z-index: 0;
  cursor: url("../img/cursor0.png"), auto;
  image-rendering: auto;
}

canvas#curve {
  position: absolute;
  left: 376px;
  top: 196px;
}

div#chat_block {
  position: absolute;
  display: none;
  width: 300px;
}

#chat_input {
  height: 30px;
  font-size: 20px;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
  border-radius: 10px;
  border: none;
  outline: none;
  opacity: 0.8;
  background-color: #dedede;
  color: #4A4A4A;
  font-family: "Baloo Paaji";
}

#follow_us {
  z-index: 1;
  overflow: hidden;
  cursor: url(../img/cursor1.png), pointer;
}

#youtube {
  display: none;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}

div#walloffame {
  background-color: #261606;
  border: solid 2px #47310f;
  box-shadow: 0px 5px #38260a;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  margin-top: -10px;
  margin-bottom: 20px;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  width: 230px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#walloffame:hover {
  background-color: #46280b;
  border: solid 2px #a35507;
  box-shadow: 0px 5px #854303;
  cursor: url(../img/cursor1.png), pointer;
}

div#walloffame:active {
  background-color: #160c03;
  border: solid 2px #572c02;
  box-shadow: 0px 0px #402001;
  margin-top: 0px;
  margin-bottom: 15px;
}

div#art {
  background-color: #261606;
  border: solid 2px #47310f;
  box-shadow: 0px 5px #38260a;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  margin-top: 5px;
  margin-bottom: 20px;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  width: 230px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#art:hover {
  background-color: #46280b;
  border: solid 2px #a35507;
  box-shadow: 0px 5px #854303;
  cursor: url(../img/cursor1.png), pointer;
}

div#art:active {
  background-color: #160c03;
  border: solid 2px #572c02;
  box-shadow: 0px 0px #402001;
  margin-top: 10px;
  margin-bottom: 15px;
}

div#account_info {
  background-color: #a36913;
  border: solid 3px #47310f;
  box-shadow: 0px 5px #38260a;
  text-align: center;
  line-height: 27px;
  border-radius: 9px;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  width: 180px;
  position: absolute;
  top: 440px;
  left: 25px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none;
}

div#account_info:hover {
  background-color: #bb7b1c;
  border: solid 3px #47310f;
  box-shadow: 0px 5px #38260a;
  cursor: url(../img/cursor1.png), pointer;
}

div#account_info:active {
  background-color: #915c0c;
  border: solid 3px #572c02;
  box-shadow: 0px 0px #38260a;
  margin-top: 10px;
  margin-bottom: 15px;
}

div#patreon {
  background-color: #261606;
  border: solid 2px #be6821;
  box-shadow: 0px 5px #8a4914;
  text-align: center;
  line-height: 15px;
  border-radius: 8px;
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  width: 105px;
  float: right;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#patreon:hover {
  background-color: #46280b;
  border: solid 2px #a35507;
  box-shadow: 0px 5px #854303;
  cursor: url(../img/cursor1.png), pointer;
}

div#patreon:active {
  background-color: #160c03;
  border: solid 2px #572c02;
  box-shadow: 0px 0px #402001;
  margin-top: 10px;
  margin-bottom: 10px;
  cursor: url(../img/cursor1.png), pointer;
}

div#twitch {
  background-color: #261606;
  border: solid 2px #69238e;
  box-shadow: 0px 5px #481463;
  text-align: center;
  line-height: 15px;
  border-radius: 8px;
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  width: 105px;
  float: left;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: url(../img/cursor1.png), pointer;
}

div#twitch:hover {
  background-color: #46280b;
  border: solid 2px #7e34a6;
  box-shadow: 0px 5px #5c1980;
  cursor: url(../img/cursor1.png), pointer;
}

div#twitch:active {
  background-color: #160c03;
  border: solid 2px #50176e;
  box-shadow: 0px 0px #310b45;
  margin-top: 10px;
  margin-bottom: 10px;
}

div#trevda {
  position: absolute;
  display: none;
  border-radius: 10px;
  background-color: rgba(2, 26, 27, 0.8);
  padding: 5px;
  width: 300px;
  height: 550px;
}

div#deeeepio {
  position: absolute;
  display: none;
  width: 300px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: url(../img/cursor1.png), pointer;
}

div#parameter {
  background-color: #35a879;
  text-align: center;
  border-radius: 10px;
  display: none;
  position: absolute;
  padding-left: 5px;
  padding-top: 5px;
  padding-right: 5px;
  height: 35px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div#parameter:hover {
  background-color: #38bdb1;
  cursor: url(../img/cursor1.png), pointer;
}

div#parameter:active {
  background-color: #2d958c;
  cursor: url(../img/cursor1.png), pointer;
}

div#parameter_box {
  background-color: rgba(0, 0, 0, 0.85);
  text-align: center;
  border-radius: 10px;
  width: 400px;
  position: absolute;
  padding-left: 5px;
  padding-top: 5px;
  padding-right: 5px;
  padding-bottom: 15px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  display: none;
}

div#qwerty {
  background-color: #35a879;
  text-align: center;
  border-radius: 7px;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 10px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  display: inline-block;
}

div#qwerty:hover {
  background-color: #38bdb1;
  cursor: url(../img/cursor1.png), pointer;
}

div#azerty {
  background-color: #000;
  text-align: center;
  border-radius: 7px;
  padding-left: 5px;
  padding-right: 5px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  display: inline-block;
}

div#azerty:hover {
  background-color: #38bdb1;
  cursor: url(../img/cursor1.png), pointer;
}

div#close {
  background-color: #35a879;
  width: 30px;
  text-align: center;
  padding-right: 5px;
  padding-left: 5px;
  margin-left: 77px;
  border-radius: 7px;
  line-height: 36px;
  margin-top: 10px;
  font-size: 25px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  display: inline-block;
  position: absolute;
  top: 3px;
  left: 280px;
}

div#close:hover {
  background-color: #38bdb1;
  cursor: url(../img/cursor1.png), pointer;
}

div#close:active {
  background-color: #2d958c;
}

div#team_box {
  background-color: #4c3a15;
  text-align: center;
  border-radius: 15px;
  border-color: #1f773d;
  border-width: 4px;
  border-style: solid;
  width: 250px;
  position: absolute;
  padding: 5px 5px 10px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  display: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#leader {
  font-size: 20px;
}

div.nicknames {
  background-color: #4c3a15;
  text-align: center;
  border-radius: 7px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  margin: 5px 10px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div.nicknames:hover {
  background-color: #3d2d10;
  cursor: url(../img/cursor1.png), pointer;
}

div.eject_member {
  float: right;
  background-color: transparent;
  border-radius: 7px;
  margin-top: 5px;
}

div.eject_member:hover {
  background-color: #2b1f0a;
}

/* Clicks are routed by the target's id: let them land on the div, not the icon. */
div.eject_member img {
  pointer-events: none;
}

div#join {
  background-color: #1f773d;
  box-shadow: 0px 5px #14572a;
  border-radius: 10px;
  text-align: center;
  line-height: 15px;
  font-size: 25px;
  padding: 10px 15px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  text-shadow: 0px 3px rgb(154, 179, 160);
  width: 90px;
}

div#join:hover {
  background-color: #278f4b;
  box-shadow: 0px 5px #186231;
}

div#join:active {
  background-color: #176331;
  box-shadow: 0px 0px #14572a;
  margin-top: 15px;
  margin-bottom: 5px;
}

div#lock_team {
  background-color: #1f773d;
  box-shadow: 0px 5px #14572a;
  border-radius: 10px;
  text-align: center;
  line-height: 15px;
  font-size: 25px;
  padding: 10px 15px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  text-shadow: 0px 3px rgb(154, 179, 160);
  width: 90px;
}

div#lock_team:hover {
  background-color: #278f4b;
  box-shadow: 0px 5px #186231;
}

div#lock_team:active {
  background-color: #176331;
  box-shadow: 0px 0px #14572a;
  margin-top: 15px;
  margin-bottom: 5px;
}

div#leave {
  background-color: #1f773d;
  box-shadow: 0px 5px #14572a;
  border-radius: 10px;
  text-align: center;
  line-height: 15px;
  font-size: 25px;
  padding: 10px 15px;
  margin-bottom: 10px;
  margin-top: 10px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  text-shadow: 0px 3px rgb(154, 179, 160);
  width: 90px;
}

div#leave:hover {
  background-color: #278f4b;
  box-shadow: 0px 5px #186231;
}

div#leave:active {
  background-color: #176331;
  box-shadow: 0px 0px #14572a;
  margin-top: 15px;
  margin-bottom: 5px;
}

div#scoreboard {
  position: absolute;
  background-color: #3a2a0d;
  box-shadow: 0px 8px #2b1e09;
  border-radius: 20px;
  border: solid 4px #513810;
  text-align: center;
  font-size: 25px;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  margin-top: 60px;
  width: 550px;
  display: none;
  cursor: url(../img/cursor0.png), auto;
}

div#whokilled {
  background-color: #5b411b;
  border-radius: 11px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 20px;
  padding-left: 35px;
  padding-right: 35px;
  margin: 40px 15px 10px;
  display: inline-block;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
}

.deco {
  margin-top: 10px;
  background-color: #513810;
  box-shadow: 0px 5px #2b1e09;
  height: 4px;
}

.stats {
  background-color: #443010;
  border-radius: 11px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 25px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 15px;
  margin-right: 15px;
  display: inline-block;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -32px);
}

div#flexDisplay {
  display: flex;
}

div#score {
  background-color: #443112;
  border-radius: 11px;
  border: solid 2px #4f3817;
  text-align: center;
  font-size: 28px;
  padding-left: 35px;
  padding-right: 35px;
  margin-left: 43px;
  margin-right: 15px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -20px);
  padding-top: -3px;
  width: 300px;
}

div#breadWon {
  background-color: #443112;
  border-radius: 11px;
  border: solid 2px #4f3817;
  text-align: left;
  font-size: 28px;
  padding-left: 25px;
  padding-right: 45px;
  margin-left: 15px;
  margin-right: 45px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -20px);
  width: 150px;
}

.social {
  text-align: center;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 20px;
  float: left;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
}

div#tttwitter {
  background-color: #1b95e0;
  border-radius: 7px;
  margin-bottom: 10px;
  box-shadow: 0px 3px #0f689f;
  cursor: url(../img/cursor1.png), pointer;
}

div#twitter:hover {
  background-color: #34a9f1;
  box-shadow: 0px 3px #177bb9;
}

div#twitter:active {
  background-color: #127bbb;
  box-shadow: 0px 0px #0c5683;
  margin-top: 23px;
  margin-bottom: 7px;
}

div#bbback {
  background-color: #854b10;
  border-radius: 8px;
  text-align: center;
  font-size: 20px;
  padding-left: 35px;
  padding-right: 35px;
  margin: 5px 15px 17px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #593109;
  cursor: url(../img/cursor1.png), pointer;
}

div#back:hover {
  background-color: #a35b12;
  box-shadow: 0px 5px #74400b;
}

div#back:active {
  background-color: #6e3d0b;
  box-shadow: 0px 0px #472706;
  margin-top: 10px;
  margin-bottom: 12px;
}

div#tutorial_button {
  background-color: #a7881a;
  border-radius: 8px;
  text-align: center;
  font-size: 35px;
  padding-left: 35px;
  padding-right: 35px;
  margin: 5px 15px 17px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #69540c;
  cursor: url(../img/cursor1.png), pointer;
  position: absolute;
  display: none;
}

div#tutorial_button:hover {
  background-color: #a35b12;
  box-shadow: 0px 5px #74400b;
}

div#tutorial_button:active {
  background-color: #6e3d0b;
  box-shadow: 0px 0px #472706;
  margin-top: 10px;
  margin-bottom: 12px;
}

div#tutorial_box {
  position: absolute;
  background-color: #3a2a0d;
  box-shadow: 0px 8px #2b1e09;
  border-radius: 20px;
  border: solid 4px #513810;
  text-align: center;
  font-size: 25px;
  padding-top: 10px;
  padding-bottom: 20px;
  margin-bottom: 10px;
  margin-top: 60px;
  width: 600px;
}

.arrow {
  background-color: #513810;
  border: solid 4px #604112;
  box-shadow: 0px 5px #2b1e09;
  margin-top: 20px;
  border-radius: 10px;
  margin-bottom: 5px;
  width: 100px;
  float: right;
  margin-left: 20px;
  margin-right: 20px;
  display: inline-block;
  padding-top: 10px;
  padding-bottom: 10px;
  float: left;
}

.arrow:hover {
  background-color: #604213;
  box-shadow: 0px 5px #37260b;
  border: solid 4px #6f4a12;
}

.arrow:active {
  background-color: #452f0d;
  border: solid 4px #4a320d;
  box-shadow: 0px 0px #37260b;
  margin-top: 25px;
  margin-bottom: 0px;
}

.woodbox {
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: -5px 6px 0px #302009;
  border-radius: 14px;
  max-width: 610px;
  font-size: 16px;
  font-weight: normal;
  /* text-shadow: 0px 2px 0px #281806; */
  color: #ffffff;
  line-height: 20px;
  margin: 18px auto 0px auto;
  padding: 8px 0px 6px 16px;
  box-sizing: border-box;
  /* height: 66px; */
}

/* ------------------------------------------- RECIPE BOOK -------------------------------------
   Two panels share one frame: #home_craft picks a category, #recipe_craft lists
   its recipes and shows the picked one (name, description, ingredients,
   stations). The client writes `display` (inline-block) plus left/top on the
   root, so the layout inside is flex and grid, never on the root.
   Width and height stay in step with RECIPE_*_DX / DY in ns-hud craft_list.rs. */
.craft_panel {
  display: none;
  position: absolute;
  z-index: 40;
  box-sizing: border-box;
  padding: 34px 14px 14px;
  background: #3A2A0D;
  border: 6px solid #513810;
  border-radius: 14px;
  box-shadow: 0 8px 0 #221605;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-align: left;
  text-shadow: 0 2px 0 #281806;
  cursor: url(../img/cursor0.png), auto;
  outline: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.craft_tab {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 168px;
  height: 36px;
  padding: 0 8px;
  transform: translate(-50%, -58%);
  background: #443110;
  border: 5px solid #513810;
  border-radius: 14px;
  box-shadow: 0 6px 0 #221605;
  color: #c4a56a;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  pointer-events: none;
}

.craft_card {
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
}

.craft_footer {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.craft_footer .ns_button {
  width: 150px;
}

/* ---- categories */
#home_craft {
  width: 570px;
  height: 340px;
}

#craft_categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 14px;
  height: 228px;
  padding: 14px 16px 18px;
}

.craft_cat {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 0;
  padding: 8px 6px 4px;
  background: #8C6122;
  border: none;
  border-radius: 12px;
  box-shadow: 0 6px 0 #5d3d12;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  font-size: 15px;
  line-height: 1;
  text-shadow: 0 2px 0 #3d2708;
  outline: none;
  cursor: url(../img/cursor1.png), pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Clicks are routed by the target's id: let them land on the button. */
.craft_cat > * {
  pointer-events: none;
}

.craft_cat img {
  width: auto;
  height: 50px;
  max-width: 90%;
  object-fit: contain;
}

.craft_cat:hover {
  background: #a27129;
  box-shadow: 0 6px 0 #6b4715;
}

.craft_cat:active {
  background: #79531a;
  box-shadow: 0 2px 0 #5d3d12;
  transform: translateY(4px);
}

/* ---- recipe list + picked recipe */
#recipe_craft {
  width: 760px;
  height: 490px;
}

#recipe_body {
  display: flex;
  gap: 14px;
  height: 378px;
}

#recipe_book {
  display: flex;
  flex: 1 1 auto;
  padding: 12px 6px 12px 12px;
}

/* The scroll box itself (AGENTS.md: not the whole panel). */
#recipe_scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 8px 6px 2px;
  scrollbar-width: auto;
  scrollbar-color: #ce9f1b #1a1106;
}

#recipe_scroll::-webkit-scrollbar {
  width: 10px;
}

#recipe_scroll::-webkit-scrollbar-track {
  background: #1a1106;
  border-radius: 8px;
}

#recipe_scroll::-webkit-scrollbar-thumb {
  background: #ce9f1b;
  border-radius: 8px;
  border: 2px solid #513810;
}

/* The client builds one <div> per row of eight; the grid lays the icons out
   itself, so the row wrappers step aside. */
#recipe_list {
  display: grid;
  grid-template-columns: repeat(auto-fill, 60px);
  gap: 10px;
  justify-content: start;
}

#recipe_list > div {
  display: contents;
}

#recipe_scroll .img_recipe {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #3b2a0e;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-clip: padding-box;
  border-radius: 10px;
  box-shadow: 0 4px 0 #0e0903;
  font-size: 0;
  outline: none;
  cursor: url(../img/cursor1.png), pointer;
}

#recipe_scroll .img_recipe:hover {
  background-color: #5a4217;
}

#recipe_scroll .img_recipe:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #0e0903;
}

#recipe_scroll .img_recipe.recipe_picked {
  background-color: #6e4c12;
  box-shadow: 0 0 0 3px #edcd00, 0 4px 0 #0e0903;
}

#recipe_side {
  display: flex;
  flex: 0 0 236px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
}

#recipe_hint {
  margin: auto 6px;
  color: #8a6a3a;
  font-size: 16px;
  line-height: 1.25;
  text-align: center;
}

#recipe_info {
  display: none;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ce9f1b #1a1106;
}

#recipe_name {
  color: #e2c340;
  font-size: 20px;
  line-height: 1.15;
}

.recipe_desc_flavor {
  margin-top: 3px;
  color: #efe4b4;
  font-size: 14px;
  line-height: 1.25;
}

.recipe_desc_stat {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.25;
}

/* NEEDS on the left, the stations the recipe needs (fire, workbench, water,
   well) on the right of the same row. */
#recipe_needs {
  display: none;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 34px;
  margin-top: 2px;
}

.recipe_label {
  color: #8a6a3a;
  font-size: 13px;
  letter-spacing: 2px;
}

.recipe {
  display: grid;
  flex: none;
  grid-template-columns: repeat(3, 64px);
  gap: 10px 8px;
}

.recipe_ing {
  position: relative;
  display: none;
  width: 64px;
  height: 64px;
}

/* 64px frame, 4px border: the atlas face fills the 56px inside edge to edge
   (RECIPE_ING_FRAME / RECIPE_ING_BORDER, `recipe_face_css`). Not a button, so
   no lip under it; the backing matches the frame so the art's rounded
   corners blend into it. */
.recipe .inv {
  display: block;
  width: 64px;
  height: 64px;
  margin: 0;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #513810;
  background-repeat: no-repeat;
  background-origin: padding-box;
  background-clip: padding-box;
  border: 4px solid #513810;
  border-radius: 10px;
  outline: none;
}

.recipe .number {
  /* Like the inventory stack count: plain white Baloo, bottom right of
     the art, "x250". No outline. */
  position: absolute;
  right: 9px;
  bottom: 7px;
  max-width: calc(100% - 12px);
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  text-align: right;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
}

#recipe_stations {
  display: flex;
  gap: 5px;
}

#recipe_stations .need {
  display: none;
  width: auto;
  height: 34px;
  padding: 3px;
  box-sizing: border-box;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 8px;
}

/* Legacy quit button: still used by #quit_chronoquest. */
.quit {
  width: 130px;
  margin-right: 70px;
  background: #513810;
  box-shadow: 0px 6px 0px #2f2009;
  border-radius: 10px;
  border: 4px #704e18 solid;
  cursor: url(../img/cursor1.png), pointer;
  font-family: "Baloo Paaji";
  color: white;
  outline: none;
  font-size: 20px;
  float: right;
  margin-bottom: 20px;
  /*  margin-top:75px;*/
  margin-left: 200px;
}

.quit:hover {
  background: #5c3f11;
  border: 4px #79551b solid;
}

.quit:active {
  margin-top: 6px;
  background: #49320e;
  border: 4px #79551b solid;
  box-shadow: 0px 0px 0px #2f2009;
  margin-bottom: 14px;
}

#quit2 {
  position: absolute;
  left: 200px;
  top: 350px;
}

.quit:active #quit2 {
  margin-top: 20px;
  background: #49320e;
  border: 4px #79551b solid;
  box-shadow: 0px 0px 0px #2f2009;
  margin-bottom: 14px;
}

.quit:active #quit {
  margin-top: 20px;
  background: #49320e;
  border: 4px #79551b solid;
  box-shadow: 0px 0px 0px #2f2009;
  margin-bottom: 14px;
}

#reciepebutton {
  position: absolute;
  background: rgba(255, 255, 255, 0.5);
}

#quality {
  margin-left: -178px;
}

#low {
  position: absolute;
  top: 55px;
  left: 275px;
  background-color: #000;
  cursor: url(../img/cursor1.png), pointer;
  border-radius: 7px;
  padding-left: 5px;
  padding-right: 5px;
}

#low:hover {
  background-color: #38bdb1;
  cursor: url(../img/cursor1.png), pointer;
}

#high {
  position: absolute;
  top: 55px;
  left: 190px;
  border-radius: 7px;
  padding-left: 5px;
  padding-right: 5px;
}

#high:hover {
  background-color: #38bdb1;
  cursor: url(../img/cursor1.png), pointer;
}

/*----------------------- SUE DELETE THIS ITEM ??? --------------------------*/
#sure_delete {
  cursor: url(../img/cursor0.png), auto;
  position: absolute;
  width: 470px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: -5px 6px 0px #302009;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 0px 2px 0px #281806;
  text-align: center;
  text-transform: uppercase;
  padding-top: 40px;
  padding-bottom: 30px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none;
}

#sure_delete:before {
  content: "";
  background: url(../img/scoreboard.png) center center no-repeat;
  background-size: 260px;
  width: 400px;
  height: 147px;
  display: block;
  position: absolute;
  top: -105px;
  left: 49%;
  margin-left: -220px;
  outline: none;
}

#one_delete {
  padding: 0px 10px;
  margin-left: 30px;
  margin-top: 10px;
  display: inline-block;
  float: left;
  border-radius: 7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
  border: solid 2px #755219;
  box-shadow: 0px 5px #302009;
  outline: none;
}

div#one_delete:hover {
  background-color: #755219;
}

div#one_delete:active {
  background-color: #b56d18;
}

#yes_delete {
  padding: 0px 10px;
  margin-top: 10px;
  margin-left: 10px;
  display: inline-block;
  float: left;
  border-radius: 7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
  border: solid 2px #755219;
  box-shadow: 0px 5px #302009;
  outline: none;
}

div#yes_delete:hover {
  background-color: #755219;
}

div#yes_delete:active {
  background-color: #b56d18;
}

#recycle_delete {
  margin-left: 10px;
  padding: 0px 10px;
  margin-top: 10px;
  display: inline-block;
  float: left;
  border-radius: 7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
  border: solid 2px #755219;
  box-shadow: 0px 5px #302009;
  outline: none;
}

div#recycle_delete:hover {
  background-color: #755219;
}

div#recycle_delete:active {
  background-color: #b56d18;
}

#no_delete {
  padding: 0px 10px;
  margin-right: 40px;
  margin-top: 10px;
  display: inline-block;
  border-radius: 5px;
  border-radius: 7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
  border: solid 2px #755219;
  box-shadow: 0px 5px #302009;
  outline: none;
}

div#no_delete:hover {
  background-color: #755219;
}

div#no_delete:active {
  background-color: #b56d18;
}

#item_delete {
  margin: auto;
  padding-top: 5px;
  width: 90px;
  height: 92px;
  margin-bottom: 15px;
  background: #3A2A0D;
  border: 4px #513810 solid;
  box-shadow: 0px 6px 0px #302009;
  box-sizing: border-box;
  border-radius: 14px;
  text-align: center;
  outline: none;
}

#item_to_del {
  width: 60px;
  height: 60px;
  display: inline-block;
  object-fit: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
}

#case_agree {
  width: 35px;
  height: 35px;
  margin-left: 30px;
  border-radius: 7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
  border: solid 2px #755219;
  box-shadow: 0px 5px #302009;
  float: left;
  display: inline-block;
  outline: none;
}

#do_not_show {
  font-size: 13px;
  display: inline-block;
  margin-right: 150px;
  margin-top: 8px;
  outline: none;
}

/* ----------------------- RECOVER ITEM ------------------------*/
/*#recover_item {
  cursor: url(../img/cursor0.png), auto;
  position: absolute;
  width:470px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: -5px 6px 0px #302009;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 0px 2px 0px #281806;
  text-align: center;
  text-transform: uppercase;
  padding-top:40px;
  padding-bottom:30px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display:none;

}
#recover_item:before{
  content: "";
    background: url(../img/scoreboard.png) center center no-repeat;
    background-size: 260px;
    width: 400px;
    height: 147px;
    display: block;
    position: absolute;
    top: -105px;
    left: 49%;
    margin-left: -220px;
    outline: none;

}
#small_typo{
      font-size: 15px;
}

#yes_item {
  padding: 0px 10px;
  margin-left:165px;
  margin-top:10px;
  display:inline-block;
  float:left;
  border-radius:7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;;
  border:solid 2px #755219;
  box-shadow: 0px 5px #302009;
  outline: none;
}
div#yes_item:hover{
    background-color: #755219;
}
div#yes_item:active{
    background-color: #b56d18;
}
#no_item {
  padding: 0px 10px;
  margin-top:10px;
  margin-left:10px;
  display:inline-block;
  float:left;
  border-radius:7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;;
  border:solid 2px #755219;
  box-shadow: 0px 5px #302009;
  outline: none;
}
div#no_item:hover{
    background-color: #755219;
}
div#no_item:active{
    background-color: #b56d18;
}*/
/*---------------------- OPTION IN GAME --------------------*/
#delete_alert {
  margin-left: -178px;
  margin-top: 13px;
  outline: none;
}

#yes_alert {
  position: absolute;
  top: 95px;
  left: 278px;
  background-color: #000;
  cursor: url(../img/cursor1.png), pointer;
  border-radius: 7px;
  padding-left: 5px;
  padding-right: 5px;
  outline: none;
}

#yes_alert:hover {
  background-color: #38bdb1;
  cursor: url(../img/cursor1.png), pointer;
  outline: none;
}

#no_alert {
  position: absolute;
  top: 95px;
  left: 198px;
  border-radius: 7px;
  padding-left: 5px;
  padding-right: 5px;
  outline: none;
}

#no_alert:hover {
  background-color: #38bdb1;
  cursor: url(../img/cursor1.png), pointer;
  outline: none;
}

#agree {
  width: 50px;
  margin-top: -10px;
  margin-left: -5px;
  outline: none;
}

#option_in_game {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 30px 12px 12px;
  box-sizing: border-box;
  cursor: url(../img/cursor0.png), auto;
  -webkit-touch-callout: none;
  user-select: none;
}

#option_panel {
  position: relative;
  box-sizing: border-box;
  width: 460px;
  max-width: calc(100vw - 24px);
  max-height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: 42px 18px 18px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: 0 8px 0 #221605;
  border-radius: 14px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
}

#option_tab {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 168px;
  height: 36px;
  padding: 0 8px;
  transform: translate(-50%, -58%);
  background: #443110;
  border: 5px #513810 solid;
  box-shadow: 0 6px 0 #221605;
  border-radius: 14px;
  color: #c4a56a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#option_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 12px;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
  scrollbar-width: auto;
  scrollbar-color: #ce9f1b #1a1106;
}

#option_inner::-webkit-scrollbar {
  width: 10px;
}

#option_inner::-webkit-scrollbar-track {
  background: #1a1106;
  border-radius: 8px;
}

#option_inner::-webkit-scrollbar-thumb {
  background: #ce9f1b;
  border-radius: 8px;
  border: 2px solid #513810;
}

.option_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.option_label {
  flex: 0 0 auto;
  color: #c4a56a;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
}

.option_pair {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 8px;
}

.option_pair .ns_button {
  width: auto;
  flex: 1;
}

.option_toggles {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.option_toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 8px 10px;
  box-sizing: border-box;
  border: 2px solid #513810;
  border-radius: 10px;
  background: #221605;
  color: #efe4b4;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  text-align: left;
  text-shadow: 0 2px 0 #281806;
  cursor: url(../img/cursor1.png), pointer;
}

.option_toggle:hover {
  border-color: #8a6420;
}

.option_toggle > * {
  pointer-events: none;
}

.option_toggle_label {
  min-width: 0;
}

.option_check {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  border: 2px solid #513810;
  border-radius: 8px;
  background: #120c03;
  box-shadow: inset 0 3px 0 #0a0702;
}

.option_check img {
  display: none;
  width: 28px;
  height: 28px;
}

#quit_opt {
  margin-top: 4px;
}

#option_inner [hidden] {
  display: none;
}

@media (max-width: 420px) {
  .option_row {
    flex-direction: column;
    align-items: stretch;
  }
}
/*---------------------------- SURE CANCEL THIS CRAFT ?? ---------------------*/
#cancel_sure_delete {
  cursor: url(../img/cursor0.png), auto;
  position: absolute;
  width: 470px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: -5px 6px 0px #302009;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 0px 2px 0px #281806;
  text-align: center;
  text-transform: uppercase;
  padding-top: 40px;
  padding-bottom: 30px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none;
}

#cancel_sure_delete:before {
  content: "";
  background: url(../img/scoreboard.png) center center no-repeat;
  background-size: 260px;
  width: 400px;
  height: 147px;
  display: block;
  position: absolute;
  top: -105px;
  left: 49%;
  margin-left: -220px;
  outline: none;
}

#cancel_yes_delete {
  margin-top: 10px;
  display: inline-block;
  float: left;
  margin-left: 160px;
  width: 50px;
  border-radius: 7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
  border: solid 2px #755219;
  box-shadow: 0px 5px #302009;
  outline: none;
}

div#cancel_yes_delete:hover {
  background-color: #755219;
}

div#cancel_yes_delete:active {
  background-color: #b56d18;
}

#cancel_no_delete {
  margin-top: 10px;
  display: inline-block;
  margin-right: 120px;
  border-radius: 5px;
  width: 50px;
  border-radius: 7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
  border: solid 2px #755219;
  box-shadow: 0px 5px #302009;
  outline: none;
}

div#cancel_no_delete:hover {
  background-color: #755219;
}

div#cancel_no_delete:active {
  background-color: #b56d18;
}

#cancel_item_delete {
  margin: auto;
  padding-top: 5px;
  width: 90px;
  height: 92px;
  margin-bottom: 15px;
  background: #3A2A0D;
  border: 4px #513810 solid;
  box-shadow: 0px 6px 0px #302009;
  box-sizing: border-box;
  border-radius: 14px;
  text-align: center;
  outline: none;
}

#cancel_case_agree {
  width: 35px;
  height: 35px;
  margin-left: 30px;
  border-radius: 7px;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
  border: solid 2px #755219;
  box-shadow: 0px 5px #302009;
  float: left;
  display: inline-block;
  outline: none;
}

#cancel_do_not_show {
  font-size: 13px;
  display: inline-block;
  margin-right: 150px;
  margin-top: 8px;
  outline: none;
}

/* -------------------- CHRONO QUEST ------------------ */
.chronoquest {
  cursor: url(../img/cursor0.png), auto;
  position: absolute;
  width: 890px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: 0px 6px 0px #221605;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 0px 2px 0px #281806;
  text-align: center;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  padding-top: 50px;
  padding-bottom: 5px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  display: none;
}

.chronoquest:before {
  content: "CHRONO QUESTS";
  background: #443110;
  border: 5px #513810 solid;
  box-shadow: 0px 6px 0px #221605;
  border-radius: 14px;
  color: #745018;
  width: 200px;
  height: 35px;
  display: block;
  position: absolute;
  top: -18px;
  left: 65%;
  margin-left: -220px;
}

#typequest {
  display: inline-block;
  float: left;
  margin-left: 20px;
}

#timeremainingquest {
  display: inline-block;
  float: left;
  margin-left: 250px;
}

#rewardquest {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#constraintquest {
  display: inline-block;
  float: left;
  margin-left: 40px;
}

#claim_rewards {
  display: inline-block;
  float: left;
  margin-left: 60px;
}

#bar_quest {
  font-size: 15px;
  text-align: center;
  background: #5B411B;
  border: 5px #513810 solid;
  box-shadow: 0px 3px 0px #221605;
  border-radius: 8px;
  height: 25px;
  margin-left: 10px;
  margin-right: 10px;
}

.quest_scroll {
  margin-left: 0px;
  margin-top: 5px;
  overflow-y: scroll;
  height: 400px;
}

.quest_scroll::-webkit-scrollbar {
  max-width: 20px;
}

.quest_scroll::-webkit-scrollbar-track {
  background-color: #513810;
  border-radius: 50px;
}

.quest_scroll::-webkit-scrollbar-thumb {
  background-color: #805819;
  border: 5px solid #513810;
  border-radius: 50px;
}

.claim_reward_button {
  background-color: #b56d18;
  border: solid 2px #755219;
  box-shadow: 0px 5px #604212;
  width: 120px;
  border-radius: 7px;
  cursor: url(../img/cursor1.png), pointer;
}

.claim_reward_button:hover {
  background-color: #cf7c1b;
  border: solid 2px #8b611e;
  box-shadow: 0px 5px #7c5517;
}

.claim_reward_button:active {
  background-color: #94560d;
  border: solid 2px #624312;
  box-shadow: 0px 0px #7c5517;
  margin-top: 5px;
}

#quest_1 {
  margin-left: 10px;
  padding-left: 20px;
  font-size: 15px;
  text-align: center;
  background: #30220B;
  border-radius: 8px 8px 0px 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_1:hover {
  background: #5B411B;
}

#killdragon_1 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_0 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_0 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_1 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_0 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_1 {
  display: inline-block;
  float: left;
  margin-left: 35px;
}

#quest_2 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 15px;
  text-align: center;
  background: #30220B;
  border-radius: 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_2:hover {
  background: #5B411B;
}

#amethyst_2 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_1 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_1 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_2 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_1 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_2 {
  display: inline-block;
  float: left;
  margin-left: 35px;
}

#reward_description {
  margin-top: 38px;
  font-size: 15px;
  text-align: center;
  background: #2B1E09;
  border-radius: 8px;
  height: 25px;
  margin-left: 10px;
  margin-right: 10px;
  padding-top: 20px;
  border: 3px #513810 solid;
  padding-bottom: 5px;
}

#reward_description::before {
  content: "REWARD DESCRIPTION";
  background: #443110;
  border: 3px #513810 solid;
  box-shadow: 0px 3px 0px #221605;
  border-radius: 8px;
  color: #745018;
  width: 200px;
  height: 23px;
  display: block;
  position: absolute;
  top: 228px;
  left: 70%;
  margin-left: -220px;
}

#quest_3 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 15px;
  text-align: center;
  background: #30220B;
  border-radius: 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_3:hover {
  background: #5B411B;
}

#survive20min_3 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_2 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_2 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_3 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_2 {
  display: inline-block;
  float: left;
  margin-left: -1px;
}

#reward_3 {
  display: inline-block;
  float: left;
  margin-left: 35px;
}

#quest_4 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 15px;
  text-align: center;
  background: #30220B;
  border-radius: 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_4:hover {
  background: #5B411B;
}

#treasure_chest_4 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_3 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_3 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_4 {
  display: inline-block;
  float: left;
  margin-left: 38px;
  width: 95px;
}

#claim_reward_3 {
  display: inline-block;
  float: left;
  margin-left: 26px;
}

#reward_4 {
  display: inline-block;
  float: left;
  margin-left: 35px;
}

#quest_5 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 15px;
  text-align: center;
  background: #30220B;
  border-radius: 0px 0px 0px 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_5:hover {
  background: #5B411B;
}

#dont_hit_5 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_4 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_4 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_5 {
  display: inline-block;
  float: left;
  margin-left: 58px;
}

#claim_reward_4 {
  display: inline-block;
  float: left;
  margin-left: 38px;
  font-size: 15px;
}

#reward_5 {
  display: inline-block;
  float: left;
  margin-left: 35px;
}

#quest_6 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 13px;
  text-align: center;
  background: #30220B;
  border-radius: 0px 0px 0px 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_6:hover {
  background: #5B411B;
}

#bread_6 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_5 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
  font-size: 15px;
}

#time_finished_5 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_6 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_5 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  font-size: 15px;
}

#reward_6 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#quest_7 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 14px;
  text-align: center;
  background: #30220B;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_7:hover {
  background: #5B411B;
}

#winter_7 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_6 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_6 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_7 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_6 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_7 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#quit_chronoquest {
  margin-top: 20px;
  margin-right: 355px;
  margin-bottom: 10px;
}

#quest_8 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 14px;
  text-align: center;
  background: #30220B;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_8:hover {
  background: #5B411B;
}

#lavadragon_8 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_7 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_7 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_7 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_7 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_8 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#quest_9 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 14px;
  text-align: center;
  background: #30220B;
  border-radius: 0px 0px 0px 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_9:hover {
  background: #5B411B;
}

#reidite_9 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_8 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_8 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_8 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_8 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_9 {
  display: inline-block;
  float: left;
  margin-left: 28px;
}

#quest_10 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 14px;
  text-align: center;
  background: #30220B;
  border-radius: 0px 0px 0px 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_10:hover {
  background: #5B411B;
}

#watermelon_10 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_9 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_9 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_9 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_9 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_9 {
  display: inline-block;
  float: left;
  margin-left: 35px;
}

#quest_11 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 14px;
  text-align: center;
  background: #30220B;
  border-radius: 0px 0px 0px 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_11:hover {
  background: #5B411B;
}

#watermelon_11 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_10 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_10 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_10 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_10 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_10 {
  display: inline-block;
  float: left;
  margin-left: 32px;
}

#quest_12 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 14px;
  text-align: center;
  background: #30220B;
  border-radius: 0px 0px 0px 0px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_12:hover {
  background: #5B411B;
}

#watermelon_12 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 350px;
  text-align: left;
}

#timeremain_11 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_11 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_11 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_11 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_11 {
  display: inline-block;
  float: left;
  margin-left: 31px;
}

#seasons_img {
  width: 111px;
  display: inline-block;
  float: left;
}

#quest_13 {
  padding-top: 5px;
  margin-left: 10px;
  padding-left: 20px;
  font-size: 14px;
  text-align: center;
  background: #30220B;
  border-radius: 0px 0px 8px 8px;
  height: 25px;
  margin-right: 10px;
  padding-bottom: 10px;
}

#quest_13:hover {
  background: #5B411B;
}

#watermelon_13 {
  display: inline-block;
  float: left;
  margin-left: 0px;
  width: 240px;
  text-align: left;
}

#timeremain_12 {
  display: inline-block;
  float: left;
  margin-left: 5px;
  width: 100px;
}

#time_finished_12 {
  color: #debe30;
  font-size: 20px;
  width: 100px;
  float: left;
  border: 1px rgba(0, 0, 0, 0) solid;
  display: none;
}

#contraint_12 {
  display: inline-block;
  float: left;
  margin-left: 30px;
}

#claim_reward_12 {
  display: inline-block;
  float: left;
  margin-left: 0px;
}

#reward_12 {
  display: inline-block;
  float: left;
  margin-left: 31px;
}

/* --------------------------------------- COOKIES ----------------------------------------*/
#cookies_check_box {
  display: none;
  position: absolute;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#cookies_check {
  background: rgba(0, 0, 0, 0.8);
  border-radius: 14px 0px 0px 14px;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 20px;
  border: solid 2px #47310f;
  height: 40px;
  font-size: 14px;
  width: 300px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

#got_it {
  display: inline-block;
  background-color: #8a590e;
  border: solid 2px #47310f;
  text-align: center;
  line-height: 15px;
  border-radius: 0px 14px 14px 0px;
  font-size: 20px;
  cursor: url(../img/cursor1.png), pointer;
  padding: 28px 8px 10px 5px;
  position: absolute;
  width: 60px;
  height: 33px;
  top: 0px;
  left: 300px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div#got_it:hover {
  background-color: #47310f;
  border: solid 3px #8a590e;
}

div#got_it:active {
  background-color: #160c03;
  border: solid 3px #572c02;
}

/* ------------------------------------------- MARKET -------------------------------------*/
#shop_market {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 110;
  align-items: center;
  justify-content: center;
  padding: 36px 12px 12px;
  box-sizing: border-box;
  background: rgba(8, 7, 16, 0.55);
  cursor: url(../img/cursor0.png), auto;
  -webkit-touch-callout: none;
  user-select: none;
}

#market_panel {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: min(760px, 100vw - 24px);
  min-height: 0;
  max-height: 100%;
  padding: 42px 18px 16px;
  overflow: visible;
  background: #3A2A0D;
  border: 6px solid #513810;
  box-shadow: 0 8px 0 #221605;
  border-radius: 14px;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
}

#market_tab {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 168px;
  height: 36px;
  padding: 0 8px;
  transform: translate(-50%, -58%);
  background: #443110;
  border: 5px solid #513810;
  box-shadow: 0 6px 0 #221605;
  border-radius: 14px;
  color: #c4a56a;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  text-shadow: 0 2px 0 #281806;
}

#market_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  padding: 14px 16px 12px;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
}

#market_grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 6px;
  scrollbar-width: auto;
  scrollbar-color: #ce9f1b #1a1106;
}

#market_grid:empty {
  display: none;
}

#market_grid::-webkit-scrollbar {
  width: 10px;
}

#market_grid::-webkit-scrollbar-track {
  background: #1a1106;
  border-radius: 8px;
}

#market_grid::-webkit-scrollbar-thumb {
  background: #ce9f1b;
  border-radius: 8px;
  border: 2px solid #513810;
}

#market_empty {
  display: none;
  margin: 8px 0 0;
  color: #8a6a3a;
  font-size: 16px;
  text-align: center;
}

#market_empty.market_empty_on {
  display: block;
}

.market_group {
  margin: 2px 0 0;
  color: #8a6a3a;
  font-size: 14px;
  letter-spacing: 2px;
  text-align: left;
}

/* Fixed columns so the stepper, price and BUY line up from row to row; the item
   column takes what is left. */
.market_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 150px 72px;
  gap: 8px 12px;
  align-items: center;
  padding: 8px 10px;
  background: #221605;
  border: 3px solid #513810;
  border-radius: 10px;
  box-shadow: inset 0 3px 0 #160e03;
}

.market_get {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.market_art {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: #120c03;
  border: 2px solid #3d2a0c;
  box-shadow: inset 0 3px 0 #0a0702;
}

.market_icon,
.market_currency {
  display: inline-block;
  flex-shrink: 0;
  pointer-events: none;
}

.market_meta {
  min-width: 0;
}

.market_name {
  margin: 0;
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market_rate {
  margin: 2px 0 0;
  overflow: hidden;
  color: #c4a56a;
  font-size: 14px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.market_qty {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

#shop_market input[type=number] {
  box-sizing: border-box;
  width: 64px;
  height: 34px;
  margin: 0;
  padding: 0 4px;
  border: 3px solid #513810;
  border-radius: 8px;
  background: #120c03;
  box-shadow: inset 0 4px 0 #0a0702;
  color: #fff;
  font: inherit;
  font-size: 18px;
  text-align: center;
  text-shadow: 0 2px 0 #281806;
  user-select: text;
  -moz-appearance: textfield;
  appearance: textfield;
}

#shop_market input[type=number]::-webkit-outer-spin-button,
#shop_market input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#shop_market input[type=number]:focus {
  outline: none;
  border-color: #edcd00;
  box-shadow: inset 0 4px 0 #0a0702, 0 0 0 3px rgba(237, 205, 0, 0.22);
}

#shop_market input[type=number]:invalid {
  border-color: #a60f1b;
  box-shadow: inset 0 4px 0 #0a0702, 0 0 0 3px rgba(166, 15, 27, 0.35);
}

.market_pay {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.market_pay_line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  line-height: 1;
}

.market_pay_extra {
  font-size: 16px;
}
.market_pay_extra .market_currency {
  transform: scale(0.85);
}

.market_pay_sub {
  display: flex;
  gap: 4px;
  max-width: 100%;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.market_cost {
  color: #edcd00;
}

.market_cost.market_short,
.market_held.market_short {
  color: #ffb4a8;
}

.market_currency_name {
  overflow: hidden;
  text-overflow: ellipsis;
  color: #c4a56a;
}

.market_held {
  flex: none;
  color: #8a6a3a;
}

.market_held:not(:empty):before {
  content: "·";
  margin-right: 4px;
  color: #8a6a3a;
}

.market_row > .ns_button {
  width: 100%;
}

/* An item with a description: hover or keyboard focus opens #item_tip. */
.market_get_tip {
  border-radius: 8px;
  outline: none;
  cursor: url(../img/cursor1.png), help;
}

.market_get_tip:hover .market_name,
.market_get_tip:focus-visible .market_name {
  color: #edcd00;
}

.market_get_tip:focus-visible {
  box-shadow: 0 0 0 3px rgba(237, 205, 0, 0.35);
}

/* Item description tip for the market and the recipe book. Fixed on <body>,
   so no scrolling list clips it. Colours follow the in-game item box. */
#item_tip {
  display: none;
  position: fixed;
  z-index: 120;
  box-sizing: border-box;
  max-width: 300px;
  padding: 8px 12px 9px;
  background: rgba(26, 17, 6, 0.97);
  border: 3px solid #513810;
  border-radius: 10px;
  box-shadow: 0 5px 0 #221605;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-align: left;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

.item_tip_title {
  color: #e2c340;
  font-size: 18px;
  line-height: 1.2;
}

.item_tip_flavor {
  margin-top: 2px;
  color: #fff;
  font-size: 15px;
  line-height: 1.25;
}

.item_tip_stat {
  margin-top: 1px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  line-height: 1.25;
}

#market_close {
  flex: none;
  margin-top: 12px;
}

@media (max-width: 640px) {
  #market_panel {
    padding: 40px 12px 12px;
  }
  #market_inner {
    padding: 12px;
  }
  .market_row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .market_get {
    grid-column: 1/-1;
  }
}
/*nouveau*/
.margin-top {
  margin-top: 0px;
}

/* nouveau end*/
.inventory_line_vertical {
  position: absolute;
  width: 5px;
  height: 100%;
  left: 320px;
  top: 0px;
  background-color: #513810;
}

/* ---------------------CHANGELOG ------------------------------*/
#changelog_img {
  width: 90%;
  text-align: center;
  margin-left: 15px;
}

/*----------------------------- SKINS -------------------------------*/
#choose_skin {
  background-color: #261606;
  border: solid 2px #47310f;
  box-shadow: 0px 5px #38260a;
  text-align: center;
  line-height: 15px;
  border-radius: 15px;
  font-size: 15px;
  padding: 5px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  width: 100px;
  width: 500px;
  position: absolute;
  display: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

div#choose_skin:hover {
  background-color: #46280b;
  border: solid 2px #865b13;
  box-shadow: 0px 5px #74540c;
  cursor: url(../img/cursor1.png), pointer;
}

div#choose_skin:active {
  background-color: #160c03;
  border: solid 2px #572c02;
  box-shadow: 0px 0px #402001;
  margin-top: 10px;
  margin-bottom: 15px;
}

div#select_skin {
  position: absolute;
  top: 130px;
  left: 160px;
  color: white;
  font-family: "Baloo Paaji";
  padding: 5px 10px;
  background: #8a590e;
  border: solid 2px #47310f;
  padding: 0px 10px;
  box-shadow: 0px 5px #38260a;
  border-radius: 10px;
  cursor: url(../img/cursor1.png), pointer;
}

div#select_skin:hover {
  background-color: #46280b;
  border: solid 2px #865b13;
  box-shadow: 0px 5px #74540c;
}

div#select_skin:active {
  background-color: #160c03;
  border: solid 2px #572c02;
  box-shadow: 0px 0px #402001;
  top: 135px;
}

div#skins_selector {
  width: 400px;
  height: 400px;
  position: absolute;
  display: none;
}

#skin_button_img {
  width: 90px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.image_hover, #arrow_left_img:hover .image_on {
  display: none;
  width: 80px;
}

.image_on, #arrow_left_img:hover .image_hover {
  display: block;
  width: 80px;
}

#skins_left {
  top: 20px;
  left: 0px;
  position: absolute;
  cursor: url(../img/cursor1.png), pointer;
}

#arrow_left_img {
  cursor: url(../img/cursor1.png), pointer;
}

.image_hover, #arrow_up_img:hover .image_on {
  display: none;
  width: 80px;
}

.image_on, #arrow_up_img:hover .image_hover {
  display: block;
  width: 80px;
}

#skins_up {
  left: 0px;
  top: 90px;
  position: absolute;
  cursor: url(../img/cursor1.png), pointer;
}

#arrow_up_img {
  cursor: url(../img/cursor1.png), pointer;
}

#new_skin {
  float: left;
  width: 100px;
  text-align: center;
}

#skin_img {
  width: 90px;
}

#new_accessory {
  position: absolute;
  left: 48px;
  width: 100px;
}

#accessory_img {
  width: 90px;
}

.image_hover, #arrow_down_img:hover .image_on {
  display: none;
  width: 80px;
}

.image_on, #arrow_down_img:hover .image_hover {
  display: block;
  width: 80px;
}

#skins_down {
  top: 90px;
  left: 320px;
  position: absolute;
  cursor: url(../img/cursor1.png), pointer;
}

#arrow_down_img {
  cursor: url(../img/cursor1.png), pointer;
}

#skins_right {
  top: 20px;
  left: 320px;
  position: absolute;
  cursor: url(../img/cursor1.png), pointer;
}

#arrow_right_img {
  cursor: url(../img/cursor1.png), pointer;
}

.image_hover, #arrow_right_img:hover .image_on {
  display: none;
  width: 80px;
}

.image_on, #arrow_right_img:hover .image_hover {
  display: block;
  width: 80px;
}

/*------------------------------PLAY BUTTON --------------------------------*/
#play_button {
  position: absolute;
  display: none;
  z-index: 2;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
  cursor: url(../img/cursor1.png), pointer;
  width: 101px;
  height: 41px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: #EDCD00;
  box-shadow: 0 7px 0 #C5A300;
  font-family: "Baloo Paaji", sans-serif;
  font-size: 22px;
  line-height: 41px;
  color: #fff;
  text-align: center;
  text-shadow: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#play_button:hover {
  background: #EC9A00;
  box-shadow: 0 7px 0 #C37C00;
}

#play_button:active {
  background: #CE6600;
  box-shadow: none;
  transform: translateY(7px);
}

#play_button:disabled {
  background: #CE6600;
  box-shadow: none;
  transform: translateY(7px);
  cursor: url(../img/cursor0.png), auto;
  opacity: 1;
}

/* SELECT CODE */
.md-select {
  position: absolute;
  display: none;
  margin: 10px 0 8px 0;
  padding-bottom: 2px;
  /*  position: relative;*/
  min-width: 250px;
}

.md-select *, .md-select :after, .md-select :before {
  box-sizing: border-box;
}

#selectDisabled {
  background: #281A06;
  color: #5C3F12;
  cursor: default;
}

.md-select [type=button] {
  border-radius: 8px;
  background: #9e4e12;
  border-color: #38260a;
  border-width: 0 0 2px 0;
  color: rgba(255, 255, 255, 0.5);
  cursor: url(../img/cursor1.png), pointer;
  display: block;
  line-height: 30px;
  padding: 8px 0 8px 16px;
  position: relative;
  text-align: left;
  width: 100%;
  max-width: 258px;
  z-index: 1;
  outline: none;
  overflow: hidden;
  font-family: "Baloo Paaji";
  font-size: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.md-select [type=button]:focus, .md-select [type=button]:hover {
  /*background: #be7c24;*/
  background: #d49e26;
  border-width: 0 0 2px 0;
  border-color: #79501b;
}

.md-select [type=button]:after {
  content: "▾";
  float: right;
  padding-right: 16px;
}

.md-select ul[role=listbox] {
  color: white;
  border-radius: 8px;
  background-color: #281a06;
  cursor: url(../img/cursor1.png), pointer;
  list-style: none;
  line-height: 10px;
  overflow: hidden;
  margin: 0;
  max-height: 0;
  position: absolute;
  padding: 0;
  font-family: "Baloo Paaji";
  font-size: 13px;
  border: solid 2px #47310f;
  -webkit-transform: translateY(-80%);
  transform: translateY(-80%);
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.md-select ul[role=listbox] li {
  height: 28px;
  margin: 0;
  padding: 10px 16px;
  outline: none;
  overflow: hidden;
}

.md-select ul[role=listbox] li:focus, .md-select ul[role=listbox] li:hover, .md-select ul[role=listbox] li.active {
  background: #47310f;
  border-width: 0 0 20px 0;
  border-color: #89e0bc;
}

.md-select.active ul {
  overflow: auto;
  padding: 8px 0 16px 0px;
  z-index: 2;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  max-height: 230px;
}

.md-mode {
  position: absolute;
  display: none;
  margin: 10px 0 8px 0;
  padding-bottom: 2px;
  /*  position: relative;*/
  min-width: 100px;
}

.md-mode *, .md-mode :after, .md-mode :before {
  box-sizing: border-box;
}

#selectDisabled {
  background: #281A06;
  color: #5C3F12;
  cursor: default;
}

.md-mode [type=button] {
  border-radius: 8px;
  /*background: #35a879;
  border-color: #89e0bc;*/
  background: #a36a12;
  border-color: #38260a;
  border-width: 0 0 2px 0;
  color: #ffffff;
  cursor: url(../img/cursor1.png), pointer;
  display: block;
  line-height: 30px;
  padding: 2px 0 1px 16px;
  position: relative;
  text-align: left;
  text-shadow: 0px 1px #000000;
  width: 100%;
  z-index: 1;
  outline: none;
  overflow: hidden;
  font-family: "Baloo Paaji";
  font-size: 15px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.md-mode [type=button]:focus, .md-mode [type=button]:hover {
  /*background: #be7c24;*/
  background: #d49e26;
  border-width: 0 0 2px 0;
  border-color: #79501b;
}

.md-mode [type=button]:after {
  content: "▾";
  float: right;
  padding-right: 16px;
}

.md-mode ul[role=listbox] {
  color: white;
  border-radius: 8px;
  background-color: #281a06;
  cursor: url(../img/cursor1.png), pointer;
  list-style: none;
  line-height: 10px;
  overflow: hidden;
  margin: 0;
  max-height: 0;
  position: absolute;
  padding: 0;
  white-space: nowrap;
  font-family: "Baloo Paaji";
  font-size: 13px;
  border: solid 2px #47310f;
  -webkit-transform: translateY(-80%);
  transform: translateY(-80%);
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.md-mode ul[role=listbox] li {
  height: 28px;
  margin: 0;
  padding: 10px 5px;
  text-align: center;
  outline: none;
  overflow: hidden;
}

.md-mode ul[role=listbox] li:focus, .md-mode ul[role=listbox] li:hover, .md-mode ul[role=listbox] li.active {
  background: #47310f;
  border-width: 0 0 20px 0;
  border-color: #89e0bc;
}

.md-mode.active ul {
  overflow: hidden;
  padding: 3px 0 3px 0px;
  z-index: 2;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  max-height: 170px;
}

/* ------------------------------- LANGUAGES --------------------------------*/
.md-languages {
  position: absolute;
  display: none;
  margin: 10px 0 8px 0;
  padding-bottom: 2px;
  /*  position: relative;*/
  min-width: 100px;
}

.md-languages *, .md-languages :after, .md-languages:before {
  box-sizing: border-box;
}

#langDisabled {
  background: rgba(4, 111, 82, 0.85);
  color: #09936d;
  cursor: default;
}

.md-languages [type=button] {
  border-radius: 8px;
  /*background: #35a879;
  border-color: #89e0bc;*/
  background: rgba(18, 173, 131, 0.34);
  border-color: rgba(18, 173, 131, 0.34);
  border-width: 0 0 2px 0;
  color: #ffffff;
  cursor: url(../img/cursor1.png), pointer;
  display: block;
  line-height: 21px;
  padding: 2px 0 1px 16px;
  position: relative;
  text-align: left;
  text-shadow: 0px 1px #000000;
  width: 100%;
  z-index: 1;
  outline: none;
  overflow: hidden;
  font-family: "Baloo Paaji";
  font-size: 13px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.md-languages [type=button]:focus, .md-languages [type=button]:hover {
  /*background: #be7c24;*/
  background: rgba(18, 176, 134, 0.65);
  border-width: 0 0 2px 0;
  border-color: rgba(18, 176, 134, 0.65);
}

.md-languages [type=button]:after {
  content: "▾";
  float: right;
  padding-right: 16px;
}

.md-languages ul[role=listbox] {
  color: white;
  border-radius: 8px;
  background-color: rgba(4, 111, 82, 0.85);
  cursor: url(../img/cursor1.png), pointer;
  list-style: none;
  line-height: 10px;
  overflow: hidden;
  margin: 0;
  max-height: 0;
  position: absolute;
  padding: 0;
  white-space: nowrap;
  font-family: "Baloo Paaji";
  font-size: 13px;
  border: solid 2px rgba(4, 111, 82, 0.85);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  width: 100%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24) !important;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.md-languages ul[role=listbox] li {
  height: 28px;
  margin: 0;
  padding: 10px 5px;
  text-align: center;
  outline: none;
  overflow: hidden;
}

.md-languages ul[role=listbox] li:focus, .md-languages ul[role=listbox] li:hover, .md-languages ul[role=listbox] li.active {
  background: rgba(16, 170, 128, 0.85);
  border-width: 0 0 20px 0;
  border-color: rgba(16, 170, 128, 0.85);
}

.md-languages.active ul {
  overflow: hidden;
  padding: 3px 0 3px 0px;
  z-index: 2;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  max-height: 230px;
}

/* -------------------------- OIBIO BANNER ------------------------ */
#oibio_banner {
  padding-top: 5px;
  width: 285px;
}

/* -------------------------- ACCOUNT BOX -------------------------- */
div#account_box {
  cursor: url(../img/cursor0.png), auto;
  position: absolute;
  height: 520px;
  width: 600px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: 0px 6px 0px #221605;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 0px 2px 0px #281806;
  text-align: center;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  padding-top: 50px;
  padding-bottom: 5px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 10px;
  padding-right: 10px;
  display: none;
  z-index: 10;
}

div#account_box:before {
  content: "ACCOUNT";
  background: #443110;
  border: 5px #513810 solid;
  box-shadow: 0px 6px 0px #221605;
  border-radius: 14px;
  color: #745018;
  width: 200px;
  height: 35px;
  display: block;
  position: absolute;
  top: -18px;
  left: 80%;
  margin-left: -280px;
}

div#nickname_acc {
  display: inline-block;
}

input#nickname_save {
  height: 40px;
  font-size: 20px;
  width: 310px;
  text-align: center;
  box-sizing: border-box;
  border-radius: 8px;
  border: none;
  outline: none;
  background-color: #513810;
  color: #8a590e;
  font-family: "Baloo Paaji";
  float: left;
  display: inline-block;
}

div#button_save_nickname {
  width: 100px;
  background: #513810;
  box-shadow: 0px 6px 0px #2f2009;
  border-radius: 10px;
  border: 4px #704e18 solid;
  cursor: url(../img/cursor1.png), pointer;
  font-family: "Baloo Paaji";
  color: white;
  outline: none;
  font-size: 20px;
  float: right;
  margin-bottom: 20px;
  margin-left: 20px;
}

div#button_save_nickname:hover {
  background: #5c3f11;
  border: 4px #79551b solid;
}

div#button_save_nickname:active {
  margin-top: 11px;
  background: #49320e;
  border: 4px #79551b solid;
  box-shadow: 0px 0px 0px #2f2009;
  margin-bottom: 9px;
}

div#close_acc_box_2 {
  width: 40px;
  position: absolute;
  font-size: 26px;
  top: -1px;
  left: 549px;
  height: 40px;
  background-color: #994025;
  box-shadow: 0px 6px 0px #6b2915;
  border-radius: 0px 10px 0px 10px;
}

div#close_acc_box_2:hover {
  background-color: #c4502c;
  box-shadow: 0px 6px 0px #823219;
}

div#close_acc_box_2:active {
  top: 5px;
  background-color: #782d16;
  box-shadow: 0px 0px 0px #571e0d;
}

div#close_acc_box {
  width: 40px;
  position: absolute;
  font-size: 26px;
  top: -1px;
  left: 549px;
  height: 40px;
  background-color: #994025;
  box-shadow: 0px 6px 0px #6b2915;
  border-radius: 0px 10px 0px 10px;
}

div#close_acc_box:hover {
  background-color: #c4502c;
  box-shadow: 0px 6px 0px #823219;
}

div#close_acc_box:active {
  top: 5px;
  background-color: #782d16;
  box-shadow: 0px 0px 0px #571e0d;
}

div#box_acc_line {
  position: absolute;
  height: 8px;
  box-shadow: 0px 4px #221605;
  left: 0;
  background-color: #513810;
}

div#points_acc {
  background-color: #c9ab17;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #4f3817;
  text-align: center;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
  margin-left: 55px;
  margin-right: 25px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -20px);
  margin-top: 26px;
}

div#buy_skins_acc {
  background-color: #c9ab17;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #4f3817;
  text-align: center;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
  margin-left: 25px;
  margin-right: 55px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -20px);
}

div#buy_skins_acc:hover {
  background-color: #c97d17;
}

div#boxes_stats_mode {
  width: 100%;
  display: inline-block;
  height: 300px;
}

div#box_stats_acc {
  width: 380px;
  float: left;
  background-color: #302009;
  border-radius: 10px 10px 10px 0px;
  border: solid 3px #513810;
}

div#box_stats_line1 {
  height: 8px;
  box-shadow: 0px 4px #221605;
  margin-top: 20px;
  background-color: #513810;
}

div#name_mode_stats {
  display: inline-block;
  float: left;
  background-color: #513810;
  padding: 0px 40px;
  border-radius: 6px;
  margin-left: 85px;
  margin-right: 60px;
  margin-top: -20px;
  box-shadow: 0px 4px #221605;
  width: 140px;
}

div#box_stats_line2 {
  height: 4px;
  box-shadow: 0px 4px #221605;
  margin-top: 30px;
  background-color: #513810;
}

div#acc_score_title {
  display: inline-block;
}

.planet_img {
  width: 25px;
  margin-bottom: 3px;
  margin-top: 3px;
  cursor: url(../img/cursor1.png), pointer;
}

div#best_score_title {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -43px);
  margin-top: 26px;
}

div#best_score_leaderboard {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  margin-right: 20px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -30px);
  margin-top: 26px;
}

div#best_score_leaderboard:hover {
  background-color: #c97d17;
}

div#best_score_leaderboard:active {
  background-color: #c9a817;
}

div#total_score_title {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
  margin-left: 35px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -43px);
}

div#total_score_leaderboard {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -30px);
  margin-top: 26px;
}

div#total_score_leaderboard:hover {
  background-color: #c97d17;
}

div#total_score_leaderboard:active {
  background-color: #c9a817;
}

div#acc_score_stats {
  margin-bottom: 35px;
  margin-top: -48px;
}

div#best_score_stats {
  float: left;
  text-align: left;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div#total_score_stats {
  float: right;
  text-align: right;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div#box_stats_line3 {
  height: 4px;
  box-shadow: 0px 4px #221605;
  margin-top: 30px;
  background-color: #513810;
}

div#acc_time_title {
  display: inline-block;
}

div#best_time_title {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -43px);
  margin-top: 26px;
}

div#best_time_leaderboard {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -30px);
  margin-top: 26px;
}

div#best_time_leaderboard:hover {
  background-color: #c97d17;
}

div#best_time_leaderboard:active {
  background-color: #c9a817;
}

div#total_time_title {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
  margin-left: 65px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -43px);
}

div#total_time_leaderboard {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -30px);
  margin-top: 26px;
}

div#total_time_leaderboard:hover {
  background-color: #c97d17;
}

div#total_time_leaderboard:active {
  background-color: #c9a817;
}

div#acc_time_stats {
  margin-bottom: 35px;
  margin-top: -48px;
}

div#best_time_stats {
  float: left;
  text-align: left;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div#total_time_stats {
  float: right;
  text-align: right;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div#box_stats_line4 {
  height: 4px;
  box-shadow: 0px 4px #221605;
  margin-top: 30px;
  background-color: #513810;
}

div#acc_kill_title {
  display: inline-block;
}

div#best_kill_title {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -43px);
  margin-top: 26px;
}

div#best_kill_leaderboard {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  margin-right: 20px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -30px);
  margin-top: 26px;
}

div#best_kill_leaderboard:hover {
  background-color: #c97d17;
}

div#best_kill_leaderboard:active {
  background-color: #c9a817;
}

div#total_kill_title {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 10px;
  margin-left: 65px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -43px);
}

div#total_kill_leaderboard {
  background-color: #7f5728;
  border-radius: 0px 0px 10px 10px;
  border: solid 3px #513810;
  text-align: center;
  font-size: 15px;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 10px;
  color: #FFFFFF;
  display: inline-block;
  font-family: "Baloo Paaji";
  box-shadow: 0px 5px #2b1e09;
  transform: translate(0px, -30px);
  margin-top: 26px;
}

div#total_kill_leaderboard:hover {
  background-color: #c97d17;
}

div#total_kill_leaderboard:active {
  background-color: #c9a817;
}

div#acc_kill_stats {
  margin-bottom: 35px;
  margin-top: -51px;
}

div#best_kill_stats {
  float: left;
  text-align: left;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div#total_kill_stats {
  float: right;
  text-align: right;
  font-size: 20px;
  padding-left: 15px;
  padding-right: 15px;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
}

div#box_modes_acc {
  background-color: #302009;
  width: 150px;
  height: 274px;
  display: inline-block;
  margin-left: 10px;
  border-radius: 10px;
  border: solid 3px #513810;
}

div#total_dead {
  background-color: #50380f;
  display: inline-block;
  float: left;
  margin-top: 0px;
  padding: 0px 10px;
  font-size: 16px;
  border-radius: 0px 0px 10px 10px;
}

div#total_death_leaderboard {
  background-color: #7f5728;
  border: solid 3px #513810;
  display: inline-block;
  float: left;
  padding: 0px 3px;
  border-radius: 0px 0px 10px 10px;
  margin-top: -4px;
}

div#total_death_leaderboard:hover {
  background-color: #c97d17;
}

div#total_death_leaderboard:active {
  background-color: #c9a817;
}

.modes_acc {
  background-color: #7f5629;
  margin-top: 10px;
  margin-bottom: 10px;
}

.modes_acc:hover {
  cursor: url(../img/cursor1.png), pointer;
  background-color: #ba7325;
  margin-top: 10px;
  margin-bottom: 10px;
}

.modes_acc:active {
  background-color: #47300f;
  margin-top: 10px;
  margin-bottom: 10px;
}

div#mode1_acc {
  margin-top: 60px;
}

/* ------------------ ACCOUNT LEADERBOARD --------------*/
div#account_lead {
  cursor: url(../img/cursor0.png), auto;
  position: absolute;
  height: 510px;
  width: 600px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: 0px 6px 0px #221605;
  box-sizing: border-box;
  border-radius: 14px;
  font-size: 20px;
  font-weight: normal;
  text-shadow: 0px 2px 0px #281806;
  text-align: center;
  color: #FFFFFF;
  font-family: "Baloo Paaji";
  padding-top: 50px;
  padding-bottom: 5px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  padding-left: 10px;
  padding-right: 10px;
  display: none;
  z-index: 10;
}

div#account_lead:before {
  content: "LEADERBOARD";
  background: #443110;
  border: 5px #513810 solid;
  box-shadow: 0px 6px 0px #221605;
  border-radius: 14px;
  color: #745018;
  width: 200px;
  height: 35px;
  display: block;
  position: absolute;
  top: -18px;
  left: 80%;
  margin-left: -280px;
}

div#title_lead {
  display: inline-block;
  background-color: #513810;
  padding: 0px 40px;
  border-radius: 6px;
  margin-left: 85px;
  margin-right: 60px;
  margin-top: 20px;
  box-shadow: 0px 4px #221605;
}

div#content_leaders {
  margin-top: 10px;
  background-color: #302009;
  border-radius: 10px;
  border: solid 3px #513810;
  max-height: 360px;
  overflow-y: scroll;
}

.player {
  display: inline-block;
}

.player:hover {
  background: #cc7821;
}

.position_number {
  float: left;
  width: 70px;
}

.name_player {
  float: left;
  width: 360px;
}

.score_player {
  float: left;
  width: 100px;
}

#arrow_up_img_sign {
  padding-top: 4px;
  padding-right: 5px;
  width: 10px;
}

#arrow_down_img_sign {
  padding-left: 3px;
  padding-top: 4px;
  width: 10px;
}

/* ------------ SERVER ADDRESS INPUT ------------ */
#serverAddressInput {
  font-size: 24px;
  box-sizing: border-box;
  border: none;
  outline: none;
  width: 100%;
  background-color: rgba(206, 159, 27, 0);
  color: #ffffff;
  font-family: "Baloo Paaji";
  border: none;
  padding-left: 15px;
  margin-top: -27px;
}

#serverAddressBlock {
  margin: -4px 15px 0px 15px;
  width: 500px;
  position: absolute;
  top: 322px;
  left: 750px;
  display: none;
}

/* ------------ COMMANDS BOX ---------------- */
#commandMainBox {
  position: absolute;
  box-sizing: border-box;
  width: 680px;
  max-width: calc(100vw - 24px);
  height: 560px;
  max-height: calc(100vh - 24px);
  display: none;
  flex-direction: column;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #4a3414 0%, #3a2a0d 100%);
  border: 8px solid #513810;
  box-shadow: 0 8px 0 #221605;
  font-family: "Baloo Paaji", sans-serif;
  color: #efe4b4;
  font-size: 16px;
  z-index: 40;
}

#commandBoxTitle {
  flex: 0 0 auto;
  background-color: #5a3d14;
  border: 5px solid #513810;
  border-radius: 12px;
  font-size: 22px;
  color: #fff;
  text-shadow: 0 2px 0 #281806;
  padding: 2px 14px 0;
  box-shadow: 0 4px 0 #221605;
}

#commandMainBoxName:not(:empty)::before {
  content: " — ";
  color: #c4a56a;
}

#commandsBox {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 8px;
  overflow-y: auto;
  overflow-x: hidden;
  font-family: "Baloo Paaji", sans-serif;
  color: #ffffff;
  font-size: 15px;
  user-select: text;
  border: 3px solid #513810;
  border-radius: 10px;
  padding: 8px 10px;
  background-color: #120c03;
  box-shadow: inset 0 4px 0 #0a0702;
  scrollbar-width: auto;
  scrollbar-color: #ce9f1b #120c03;
}

#commandsBox::-webkit-scrollbar,
#commandSuggest::-webkit-scrollbar {
  width: 10px;
}

#commandsBox::-webkit-scrollbar-track {
  background: #120c03;
}

#commandsBox::-webkit-scrollbar-thumb {
  background: #ce9f1b;
  border-radius: 8px;
  border: 2px solid #120c03;
}

.commandListTitle {
  font-family: "Baloo Paaji", sans-serif;
  color: #ce9f1b;
  font-size: 16px;
}

#commandTypeBlock {
  flex: 0 0 auto;
  position: relative;
  margin-top: 8px;
}

#commandSuggest {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 4px;
  max-height: 220px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #1a1106;
  border: 3px solid #513810;
  border-radius: 10px;
  box-shadow: 0 6px 0 #221605;
  z-index: 2;
  scrollbar-width: auto;
  scrollbar-color: #ce9f1b #1a1106;
}

#commandSuggest::-webkit-scrollbar-track {
  background: #1a1106;
}

#commandSuggest::-webkit-scrollbar-thumb {
  background: #ce9f1b;
  border-radius: 8px;
  border: 2px solid #1a1106;
}

#commandSuggest:not(:empty) {
  display: block;
}

.commandSuggestList {
  display: flex;
  flex-direction: column;
  padding: 4px;
}

.commandSuggestRow {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: #efe4b4;
  font-family: "Baloo Paaji", sans-serif;
  font-size: 15px;
  padding: 4px 8px;
  cursor: url(../img/cursor1.png), pointer;
}

.commandSuggestRow:hover,
.commandSuggestOn {
  background: rgba(237, 205, 0, 0.16);
  color: #fff;
}

.commandSuggestInsert {
  font-weight: 700;
}

.commandSuggestDetail {
  color: #8a6a3a;
  font-size: 13px;
}

#commandInput {
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  background-color: #120c03;
  color: #efe4b4;
  font-family: "Baloo Paaji", sans-serif;
  border: 3px solid #513810;
  border-radius: 10px;
  box-shadow: inset 0 4px 0 #0a0702;
  padding: 6px 12px;
}

#commandInput:focus {
  border-color: #edcd00;
  box-shadow: inset 0 4px 0 #0a0702, 0 0 0 3px rgba(237, 205, 0, 0.22);
}

#commandListBox {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  padding: 5px;
  font-size: 15px;
}

.commandChip {
  display: inline-block;
  margin: 1px 2px;
  padding: 0 8px;
  border-radius: 6px;
  border: 2px solid #513810;
  background: #221605;
  color: #edcd00;
  font-family: "Baloo Paaji", sans-serif;
  font-size: 14px;
  line-height: 1.45;
  cursor: url(../img/cursor1.png), pointer;
}

.commandChip:hover {
  border-color: #edcd00;
  color: #fff;
}

.commandHelp {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 6px;
}

.commandHelpLead {
  color: #c4a56a;
  margin-bottom: 4px;
}

.commandHelpRow {
  display: grid;
  grid-template-columns: minmax(90px, 120px) minmax(140px, 1.2fr) minmax(80px, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: 2px 0;
}

.commandHelpName {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.commandAlias {
  color: #8a6a3a;
  font-size: 12px;
}

.commandUsage {
  color: #efe4b4;
  font-size: 14px;
}

.commandHint {
  color: #8a6a3a;
  font-size: 13px;
}

.commandLine {
  margin-top: 8px;
}

.commandPrompt {
  color: #ce9f1b;
}

.commandPlayerList {
  margin-top: 4px;
}

.commandPlayerRow {
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.commandPlayerNick {
  color: #fff;
}

.commandPlayerScore {
  color: #8a6a3a;
  margin-left: auto;
}

.commandTitle {
  color: #ce9f1b;
  font-size: 20px;
  box-shadow: 0 -3px 0 #ce9f1b;
  margin-top: 15px;
}

.specialCommandBox {
  background-color: #ce9f1b;
  padding: 10px 0px;
  text-align: center;
  margin-top: 4px;
  margin-bottom: 10px;
}

.infoCommand {
  color: #efe4b4;
}

.commandSynthax {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0px 10px;
  border-radius: 5px;
  font-size: 18px;
  margin: 0px 3px;
  color: white;
}

.commandExample {
  color: #694f05;
  font-size: 15px;
}

.itemCategory {
  color: #ce9f1b;
  font-size: 20px;
  box-shadow: 0 -3px 0 #ce9f1b;
  margin-top: 15px;
  width: 150px;
}

.tableList {
  text-align: center;
  font-family: "Baloo Paaji", sans-serif;
  font-size: 15px;
  color: white;
  padding: 3px 0px;
  width: 100%;
  margin: 5px 0px;
  background-color: rgba(255, 255, 255, 0.1);
}

.commandWritten {
  color: white;
}

.commandValidated {
  color: #50f599;
  letter-spacing: 1px;
  opacity: 0.4;
}

.commandUnknown {
  color: #fb1325;
  letter-spacing: 1px;
  opacity: 0.8;
}

.commandImpossible {
  color: #fbc913;
  font-size: 10px;
  opacity: 0.8;
  letter-spacing: 2px;
  margin-top: -9px;
}

/* ------------ GAME MENU LEADERBOARD ---------------- */
#leaderboard_block {
  position: absolute;
  display: none;
  box-sizing: border-box;
  width: 720px;
  height: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  padding: 22px 14px 12px;
  overflow: visible;
  background: repeating-linear-gradient(-12deg, transparent 0 22px, rgba(255, 214, 120, 0.05) 22px 24px), repeating-linear-gradient(8deg, transparent 0 36px, rgba(20, 10, 0, 0.12) 36px 39px), #4a3414;
  border: 8px solid #513810;
  box-shadow: 0 8px 0 #221605;
  border-radius: 24px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
  z-index: 50;
  cursor: url(../img/cursor0.png), auto;
}

#leaderboard_block:before {
  content: "LEADERBOARD";
  position: absolute;
  left: 50%;
  top: -20px;
  z-index: 2;
  box-sizing: border-box;
  width: 220px;
  height: 36px;
  transform: translateX(-50%);
  background: #5a3d14;
  border: 5px #513810 solid;
  box-shadow: 0 5px 0 #221605;
  border-radius: 14px;
  color: #e8c98a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#leaderboard_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  max-height: calc(100vh - 120px);
  min-height: 0;
  padding: 14px 16px 12px;
  overflow: hidden;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
  box-sizing: border-box;
}

/* Plain caption under the tabs, not a boxed field. */
#leaderboard_clock {
  display: none;
  margin: -2px 0 8px;
  color: #8a6a3a;
  font-size: 15px;
  line-height: 20px;
}

#leaderboard_clock.leaderboard_clock_on {
  display: block;
}

.leaderboard_filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 0 8px;
  flex-shrink: 0;
}

#leaderboard_range.leaderboard_range_off {
  display: none;
}

.leaderboard_line {
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  min-height: 33px;
  margin: 0 0 4px;
  padding: 0 8px;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 8px;
  color: #efe4b4;
  font-size: 16px;
  line-height: 29px;
  text-align: left;
}

.leaderboard_head {
  background: #120c03;
  border-color: #513810;
  color: #c4a56a;
  flex-shrink: 0;
}

.leaderboard_line.leaderboard_top1 .leaderboard_rank {
  color: #edcd00;
}

.leaderboard_line.leaderboard_top2 .leaderboard_rank {
  color: #d9dde0;
}

.leaderboard_line.leaderboard_top3 .leaderboard_rank {
  color: #d08a4a;
}

.leaderboard_line.leaderboard_top1 {
  border-color: #8a6420;
}

.leaderboard_line.leaderboard_me {
  background: #33250a;
  border-color: #edcd00;
}

.leaderboard_rank {
  flex: 0 0 44px;
  overflow: hidden;
}

.leaderboard_name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.leaderboard_lvl,
.leaderboard_kills,
.leaderboard_time,
.leaderboard_score {
  flex: 0 0 72px;
  overflow: hidden;
  text-align: center;
}

.leaderboard_score {
  flex-basis: 88px;
  color: #edcd00;
}

.leaderboard_sort_col {
  appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: inherit;
  text-shadow: inherit;
  cursor: url(../img/cursor1.png), pointer;
}

.leaderboard_sort_col:hover,
.leaderboard_sort_col.leaderboard_col_on {
  color: #edcd00;
}

/* Active sort: a small down triangle after the label (rows are highest first). */
.leaderboard_sort_col.leaderboard_col_on:after {
  content: "";
  display: inline-block;
  margin: 0 0 2px 5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid currentColor;
  vertical-align: middle;
}

.leaderboard_head .leaderboard_score {
  color: #c4a56a;
}

.leaderboard_head .leaderboard_score.leaderboard_col_on {
  color: #edcd00;
}

#leaderboard_rows {
  flex: 0 1 auto;
  min-height: 0;
  max-height: 333px;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0 0 10px;
}

#leaderboard_rows.leaderboard_busy {
  opacity: 0.5;
  transition: opacity 0.15s;
}

#leaderboard_empty {
  padding: 14px 10px 6px;
  color: #8a6a3a;
  font-size: 16px;
  line-height: 1.3;
}

#leaderboard_empty:empty {
  display: none;
}

#leaderboard_empty.leaderboard_empty_error {
  margin: 4px 0 6px;
  padding: 6px 10px;
  background: rgba(166, 15, 27, 0.22);
  border: 2px solid #7a1420;
  border-radius: 10px;
  color: #ffb4a8;
}

#leaderboard_rows::-webkit-scrollbar {
  width: 8px;
}

#leaderboard_rows::-webkit-scrollbar-thumb {
  background: #513810;
  border-radius: 8px;
}

#leaderboard_back {
  flex-shrink: 0;
  margin: 4px auto 0;
}

@media (max-width: 760px) {
  #leaderboard_block {
    left: 12px !important;
    width: auto;
    max-width: calc(100vw - 24px);
    height: auto;
  }
  .leaderboard_line {
    font-size: 14px;
    padding: 0 4px;
  }
  .leaderboard_rank {
    flex-basis: 28px;
  }
  .leaderboard_lvl,
  .leaderboard_kills,
  .leaderboard_time {
    flex-basis: 44px;
  }
  .leaderboard_score {
    flex-basis: 56px;
  }
}
#sessions_alive {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483645;
  align-items: center;
  justify-content: center;
  padding: 30px 12px 12px;
  box-sizing: border-box;
  background: rgba(8, 7, 16, 0.55);
  backdrop-filter: blur(4px);
  cursor: url(../img/cursor0.png), auto;
}

#sessions_panel {
  position: relative;
  box-sizing: border-box;
  width: 560px;
  max-width: calc(100vw - 24px);
  max-height: 100%;
  overflow: visible;
  display: flex;
  flex-direction: column;
  padding: 42px 18px 18px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: 0 6px 0 #221605;
  border-radius: 14px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
}

#sessions_tab {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 180px;
  height: 36px;
  padding: 0 8px;
  transform: translate(-50%, -58%);
  background: #443110;
  border: 5px #513810 solid;
  box-shadow: 0 6px 0 #221605;
  border-radius: 14px;
  color: #c4a56a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#sessions_title {
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 2px;
  color: #fff;
}

#sessions_sub {
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #c4a56a;
}

/* Inner card holding the list: the rows sit on a dark well, not on the wood. */
#sessions_cards {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  min-width: 0;
  min-height: 0;
  flex: 1;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
}

#sessions_cards::-webkit-scrollbar {
  width: 10px;
}

#sessions_cards::-webkit-scrollbar-track {
  background: #221605;
  border-radius: 8px;
}

#sessions_cards::-webkit-scrollbar-thumb {
  background: #8a590e;
  border-radius: 8px;
  border: 2px solid #513810;
}

/* One survivor: name, HP and stats on the left, CONTINUE on the right, bag below. */
.session_alive {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "head  join" "hp    join" "stats join" "items items";
  column-gap: 12px;
  row-gap: 6px;
  align-items: center;
  min-width: 0;
  padding: 10px 12px;
  background: #2a1e08;
  border: 3px solid #3d2a0c;
  border-radius: 10px;
  box-shadow: 0 4px 0 #120c03;
  text-align: left;
  cursor: url(../img/cursor1.png), pointer;
  transition: border-color 0.12s, box-shadow 0.12s, background-color 0.12s;
}

.session_alive:hover {
  border-color: #8a6420;
}

.session_alive.session_selected {
  background: #33250a;
  border-color: #edcd00;
  box-shadow: 0 4px 0 #120c03, 0 0 0 3px rgba(237, 205, 0, 0.22);
}

.session_alive.session_busy {
  opacity: 0.45;
  cursor: url(../img/cursor0.png), auto;
}

.session_head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.session_nickname {
  flex: 0 1 auto;
  min-width: 0;
  font: 21px "Baloo Paaji", sans-serif;
  color: #efe4b4;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session_level {
  flex: 0 0 auto;
  padding: 0 8px;
  background: #443110;
  border: 2px solid #513810;
  border-radius: 8px;
  color: #edcd00;
  font: 14px "Baloo Paaji", sans-serif;
  line-height: 20px;
}

.session_hp {
  grid-area: hp;
  position: relative;
  overflow: hidden;
  height: 16px;
  background: #120c03;
  border: 2px solid #513810;
  border-radius: 8px;
  box-sizing: border-box;
}

.session_hp_fill {
  height: 100%;
  background: #27ba36;
  border-radius: 6px;
}

.session_hp_fill.session_hp_mid {
  background: #edcd00;
}

.session_hp_fill.session_hp_low {
  background: #a60f1b;
}

.session_hp_text {
  position: absolute;
  inset: 0;
  text-align: center;
  color: #fff;
  font: 13px "Baloo Paaji", sans-serif;
  line-height: 13px;
  text-shadow: 0 1px 0 #160e03;
}

.session_stats {
  grid-area: stats;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.session_chip {
  padding: 0 8px;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 8px;
  color: #c4a56a;
  font: 14px "Baloo Paaji", sans-serif;
  line-height: 20px;
  white-space: nowrap;
}

.session_join {
  grid-area: join;
  align-self: center;
}

/* The bag is one strip; the server-side cap and "+N" keep it on a single line. */
.session_items {
  grid-area: items;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
  min-height: 40px;
  padding: 2px 6px;
  background: #1f1606;
  border-radius: 8px;
}

.session_items_empty {
  min-height: 26px;
  color: #8a6a3a;
  font: 14px "Baloo Paaji", sans-serif;
}

.session_item {
  position: relative;
  display: block;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}

.session_item_count {
  position: absolute;
  left: 1px;
  bottom: -2px;
  color: #fff;
  font: 13px "Baloo Paaji", sans-serif;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

.session_more {
  flex: 0 0 auto;
  padding: 0 6px;
  color: #a88850;
  font: 15px "Baloo Paaji", sans-serif;
  line-height: 40px;
}

#sessions_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  flex-shrink: 0;
}

#sessions_keys {
  margin-top: 8px;
  color: #8a6a3a;
  font-size: 14px;
  line-height: 1.2;
  flex-shrink: 0;
}

#sessions_keys b {
  padding: 0 5px;
  margin: 0 2px;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 6px;
  color: #c4a56a;
  font-weight: normal;
}

@media (max-width: 480px) {
  .session_alive {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "hp" "stats" "items" "join";
  }
  .session_join {
    width: 100%;
  }
  #sessions_keys {
    display: none;
  }
}
#captcha_block {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  align-items: center;
  justify-content: center;
  padding: 28px 12px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at center, rgba(8, 7, 16, 0.35) 0%, rgba(8, 7, 16, 0.72) 100%);
  backdrop-filter: blur(4px);
  cursor: url(../img/cursor0.png), auto;
}

#captcha_panel {
  position: relative;
  width: 420px;
  max-width: calc(100vw - 24px);
  padding: 42px 22px 20px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: 0 6px 0 #221605;
  box-sizing: border-box;
  border-radius: 14px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
}

#captcha_tab {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 180px;
  height: 36px;
  padding: 0 8px;
  transform: translate(-50%, -58%);
  background: #443110;
  border: 5px #513810 solid;
  box-shadow: 0 6px 0 #221605;
  border-radius: 14px;
  color: #c4a56a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#captcha_title {
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 2px;
  color: #fff;
}

#captcha_count {
  font-size: 16px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: #c4a56a;
}

#captcha_frame {
  position: relative;
  padding: 8px;
  margin: 0 0 8px;
  background: #2a1e08;
  border: 3px solid #513810;
  border-radius: 10px;
  box-shadow: inset 0 3px 0 #160e03;
}

#captcha_image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

#captcha_panel.captcha_expired #captcha_frame,
#captcha_panel.captcha_expired #captcha_slots {
  opacity: 0.4;
}

#captcha_timer {
  overflow: hidden;
  height: 10px;
  margin: 0 0 12px;
  background: #221605;
  border: 2px solid #513810;
  border-radius: 6px;
  box-sizing: border-box;
}

#captcha_timer_fill {
  width: 100%;
  height: 100%;
  background: #edcd00;
  border-radius: 4px;
  transition: width 0.2s linear, background-color 0.2s;
}

#captcha_timer_fill.captcha_low {
  background: #a60f1b;
}

#captcha_slots {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 0 0 12px;
}

.captcha_slot {
  box-sizing: border-box;
  width: 58px;
  height: 66px;
  background: #221605;
  border: 3px solid #513810;
  border-radius: 10px;
  box-shadow: inset 0 3px 0 #160e03;
  color: #efe4b4;
  font: 36px "Baloo Paaji", sans-serif;
  line-height: 60px;
  text-shadow: 0 2px 0 #160e03;
  transition: border-color 0.12s, box-shadow 0.12s;
}

.captcha_slot.captcha_active {
  border-color: #edcd00;
  box-shadow: inset 0 3px 0 #160e03, 0 0 0 3px rgba(237, 205, 0, 0.22);
}

.captcha_slot.captcha_wrong {
  border-color: #a60f1b;
}

#captcha_slots.captcha_shake {
  animation: login_shake 0.3s ease;
}

#captcha_input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  outline: none;
  color: transparent;
  caret-color: transparent;
  font: 36px "Baloo Paaji", sans-serif;
  text-align: center;
  cursor: url(../img/cursor1.png), pointer;
}

#captcha_input::selection {
  background: transparent;
}

#captcha_attempts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 10px;
  color: #c4a56a;
  font-size: 16px;
}

.captcha_pip {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  background: #edcd00;
  border-radius: 50%;
  box-shadow: inset 0 -3px 0 #a58a00;
}

.captcha_pip.captcha_pip_spent {
  background: #221605;
  box-shadow: inset 0 0 0 2px #4a3414;
}

#captcha_error {
  display: none;
  box-sizing: border-box;
  margin: 0 0 10px;
  padding: 5px 10px;
  background: rgba(166, 15, 27, 0.22);
  border: 2px solid #7a1420;
  border-radius: 10px;
  color: #ffb4a8;
  font-size: 16px;
  line-height: 1.2;
}

#captcha_error.captcha_warn {
  background: rgba(237, 205, 0, 0.16);
  border-color: #8a6420;
  color: #f0c04a;
}

#captcha_join {
  margin: 0;
}

#dossier_block {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  align-items: center;
  justify-content: center;
  padding: 36px 16px 16px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at center, rgba(8, 7, 16, 0.3) 0%, rgba(8, 7, 16, 0.65) 100%);
  backdrop-filter: blur(3px);
  cursor: url(../img/cursor0.png), auto;
}

#dossier_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 960px;
  max-width: 100%;
  max-height: 100%;
  min-height: 0;
  padding: 42px 18px 16px;
  background: #3A2A0D;
  border: 6px solid #513810;
  box-shadow: 0 8px 0 #221605;
  box-sizing: border-box;
  border-radius: 14px;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
}

#dossier_tab {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 168px;
  height: 36px;
  padding: 0 8px;
  transform: translate(-50%, -58%);
  background: #443110;
  border: 5px solid #513810;
  box-shadow: 0 6px 0 #221605;
  border-radius: 14px;
  color: #c4a56a;
  font-size: 20px;
  line-height: 26px;
  text-align: center;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#dossier_top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}

@media (max-width: 720px) {
  #dossier_top {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  #dossier_trust {
    grid-column: 1/-1;
    grid-row: 2;
  }
}
#dossier_head {
  flex: 1;
  min-width: 0;
}

#dossier_close {
  flex: none;
}

.dossier_name {
  font-size: 28px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dossier_sub {
  color: #c4a56a;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#dossier_trust {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #221605;
  border: 2px solid #513810;
  border-radius: 10px;
}

.dossier_trust_value {
  flex: none;
  min-width: 48px;
  font-size: 34px;
  line-height: 1;
  text-align: center;
}

.dossier_trust_side {
  flex: 1;
  min-width: 0;
}

.dossier_trust_label {
  font-size: 14px;
  color: #efe4b4;
}

.dossier_bar {
  height: 10px;
  margin-top: 4px;
  background: #120c03;
  border: 2px solid #513810;
  border-radius: 6px;
  overflow: hidden;
}

.dossier_bar_fill {
  height: 100%;
}

.dossier_trust_good .dossier_trust_value {
  color: #7be07f;
}

.dossier_trust_good .dossier_bar_fill {
  background: #27ba36;
}

.dossier_trust_doubt .dossier_trust_value {
  color: #edcd00;
}

.dossier_trust_doubt .dossier_bar_fill {
  background: #edcd00;
}

.dossier_trust_bad .dossier_trust_value {
  color: #ffb4a8;
}

.dossier_trust_bad .dossier_bar_fill {
  background: #a60f1b;
}

#dossier_body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #ce9f1b #120c03;
  padding: 12px 10px 12px 14px;
  background: #1a1106;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
  border-radius: 12px;
  columns: 2 360px;
  column-gap: 16px;
}

#dossier_body::-webkit-scrollbar {
  width: 12px;
}

#dossier_body::-webkit-scrollbar-track {
  background: #120c03;
  border-radius: 8px;
}

#dossier_body::-webkit-scrollbar-thumb {
  background: #ce9f1b;
  border-radius: 8px;
  border: 2px solid #120c03;
}

#dossier_body::-webkit-scrollbar-thumb:hover {
  background: #edcd00;
}

.dossier_section {
  break-inside: avoid;
  margin-bottom: 14px;
}

.dossier_section_title {
  margin-bottom: 4px;
  color: #c4a56a;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.dossier_row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 10px;
  padding: 4px 8px;
  margin-top: 3px;
  background: #221605;
  border: 1px solid #3d2a0c;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.3;
}

.dossier_label {
  flex: 1 1 auto;
  min-width: 96px;
  color: #efe4b4;
  overflow-wrap: anywhere;
}

.dossier_value {
  flex: 0 1 auto;
  min-width: 0;
  color: #fff;
  text-align: right;
  overflow-wrap: anywhere;
}

.dossier_note {
  flex-basis: 100%;
  color: #8a6a3a;
  font-size: 12px;
}

.dossier_row_good {
  border-color: #2f6b22;
}

.dossier_row_good .dossier_value {
  color: #7be07f;
}

.dossier_row_bad {
  background: rgba(166, 15, 27, 0.22);
  border-color: #7a1420;
}

.dossier_row_bad .dossier_value {
  color: #ffb4a8;
}

/* ------------------------------------------- CONNECTION STATUS -------------------------------------
   In game only. A stalled server gets a warning card; a lost connection also
   dims the game, since nothing the player does counts until it is back. It
   never takes the pointer: the captcha or session overlay may open over it. */
#net_status {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 150;
  justify-content: center;
  align-items: flex-start;
  padding: 96px 12px 12px;
  box-sizing: border-box;
  pointer-events: none;
  transition: background-color 0.2s;
}

#net_status.net_status_blocks {
  background: rgba(8, 7, 16, 0.45);
}

#net_status_card {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: min(420px, 100%);
  padding: 12px 20px 12px 16px;
  box-sizing: border-box;
  background: #3A2A0D;
  border: 6px solid #513810;
  border-radius: 14px;
  box-shadow: 0 8px 0 #221605;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
}

/* Warning: the socket is still open, the server just is not answering. */
#net_status.net_status_warn #net_status_card {
  background: #3d300c;
  border-color: #8a6420;
}

#net_status_spinner {
  flex: none;
  width: 28px;
  height: 28px;
  box-sizing: border-box;
  border: 4px solid #513810;
  border-top-color: #edcd00;
  border-radius: 50%;
  animation: net_status_spin 0.9s linear infinite;
}

#net_status_title {
  color: #fff;
  font-size: 20px;
  line-height: 1.15;
}

#net_status.net_status_warn #net_status_title {
  color: #f0c04a;
}

#net_status_detail {
  margin-top: 2px;
  color: #c4a56a;
  font-size: 15px;
  line-height: 1.2;
}

/* The reconnect itself, under a named cause: "Reconnecting... try 2 of 6". */
#net_status_sub {
  display: none;
  margin-top: 3px;
  color: #8a6a3a;
  font-size: 13px;
  line-height: 1.2;
}

@keyframes net_status_spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #net_status_spinner {
    animation-duration: 3s;
  }
}
/* ------------ CHANGELOG PAGE (changelog.html) ---------------- */
#changelog_page {
  background: #133A2B;
  overflow: hidden;
  cursor: url(../img/cursor0.png), auto;
}

#changelog_block {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 50;
  align-items: center;
  justify-content: center;
  padding: 28px 12px;
  box-sizing: border-box;
  background: radial-gradient(ellipse at center, rgba(8, 7, 16, 0.35) 0%, rgba(8, 7, 16, 0.72) 100%);
  backdrop-filter: blur(4px);
}

#changelog_panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 720px;
  height: 600px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px);
  padding: 42px 22px 20px;
  background: #3A2A0D;
  border: 6px #513810 solid;
  box-shadow: 0 6px 0 #221605;
  box-sizing: border-box;
  border-radius: 14px;
  text-align: center;
  color: #fff;
  font-family: "Baloo Paaji", sans-serif;
  text-shadow: 0 2px 0 #281806;
}

#changelog_tab {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 2;
  box-sizing: border-box;
  width: 200px;
  height: 36px;
  padding: 0 8px;
  transform: translate(-50%, -58%);
  background: #443110;
  border: 5px #513810 solid;
  box-shadow: 0 6px 0 #221605;
  border-radius: 14px;
  color: #c4a56a;
  font-size: 20px;
  line-height: 26px;
  text-shadow: 0 2px 0 #281806;
  pointer-events: none;
}

#changelog_inner {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  padding: 14px 16px 12px;
  overflow: hidden;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
  box-sizing: border-box;
}

#changelog_scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
}

#changelog_scroll::-webkit-scrollbar {
  width: 8px;
}

#changelog_scroll::-webkit-scrollbar-thumb {
  background: #513810;
  border-radius: 8px;
}

.changelog_update {
  margin: 0 0 8px;
}

.changelog_date {
  display: inline-block;
  margin: 0 0 6px;
  padding: 2px 10px;
  background: #221605;
  border: 2px solid #513810;
  border-radius: 10px;
  color: #c4a56a;
  font-size: 16px;
  line-height: 24px;
}

.changelog_title {
  margin: 0 0 12px;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
}

.changelog_feature {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding: 8px 10px;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 10px;
}

.changelog_feature img {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  object-fit: contain;
}

.changelog_feature_name {
  color: #edcd00;
  font-size: 18px;
  line-height: 1.2;
}

.changelog_feature_text {
  color: #efe4b4;
  font-size: 16px;
  line-height: 1.3;
}

.changelog_list {
  margin: 8px 0 0;
  padding: 8px 10px 8px 28px;
  background: #221605;
  border: 2px solid #3d2a0c;
  border-radius: 10px;
  color: #efe4b4;
  font-size: 16px;
  line-height: 1.45;
}

.changelog_list li {
  margin: 0 0 4px;
}

#changelog_back {
  flex-shrink: 0;
  width: auto;
  min-width: 160px;
  margin: 10px auto 0;
  text-decoration: none;
}

@media (max-width: 760px) {
  #changelog_panel {
    width: auto;
    height: min(600px, 100vh - 80px);
  }
  .changelog_feature img {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }
}
#map_editor #editor_zone_fields {
  grid-column: 1/-1;
}

#map_editor #editor_brush_zone label,
#map_editor #editor_zone_fields label {
  display: block;
  min-width: 0;
  margin: 0;
  color: #c4a56a;
  font-size: 13px;
}

#map_editor #editor_zone_name,
#map_editor #editor_brush_name,
#map_editor input[type=text] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  margin-top: 4px;
  padding: 2px 10px;
  font: 18px "Baloo Paaji", sans-serif;
  color: #fff;
  text-align: center;
  background: #120c03;
  border: 3px solid #513810;
  border-radius: 10px;
  outline: none;
  box-shadow: inset 0 4px 0 #0a0702;
}

#map_editor #editor_zone_name:focus,
#map_editor #editor_brush_name:focus,
#map_editor input[type=text]:focus {
  border-color: #edcd00;
  box-shadow: inset 0 4px 0 #0a0702, 0 0 0 3px rgba(237, 205, 0, 0.22);
}

#map_editor #editor_zone_name::placeholder,
#map_editor #editor_brush_name::placeholder {
  color: #8a6a3a;
}

#map_editor .editor_color_row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

#map_editor #editor_zone_fields .editor_color_row {
  grid-column: 1/-1;
}

#map_editor .editor_color {
  box-sizing: border-box;
  height: 28px;
  padding: 0;
  border: 3px solid #513810;
  border-radius: 8px;
  box-shadow: inset 0 3px 0 rgba(0, 0, 0, 0.28);
  cursor: url(../img/cursor1.png), pointer;
}

#map_editor .editor_color:hover {
  border-color: #8a6420;
}

#map_editor .editor_color[data-on=true] {
  border-color: #edcd00;
  box-shadow: 0 0 0 3px rgba(237, 205, 0, 0.22), inset 0 3px 0 rgba(0, 0, 0, 0.28);
}

#admin_inv {
  position: absolute;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  width: 560px;
  max-width: calc(100vw - 24px);
  height: 640px;
  max-height: calc(100vh - 24px);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 28px 14px 12px;
  border-radius: 16px;
  background: linear-gradient(180deg, #4a3414 0%, #3a2a0d 100%);
  border: 8px solid #513810;
  box-shadow: 0 8px 0 #221605;
  font-family: "Baloo Paaji", sans-serif;
  color: #efe4b4;
  z-index: 42;
}

#admin_inv_tab {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -58%);
  padding: 2px 18px 0;
  background: #5a3d14;
  border: 5px solid #513810;
  border-radius: 12px;
  color: #e8c98a;
  font-size: 20px;
  text-shadow: 0 2px 0 #281806;
  box-shadow: 0 4px 0 #221605;
}

#admin_inv_inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 10px;
  border-radius: 16px;
  background: #1a1106;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
}

#admin_inv_search {
  box-sizing: border-box;
  width: 100%;
  height: 38px;
  margin: 0 0 8px;
  padding: 2px 10px;
  font: 18px "Baloo Paaji", sans-serif;
  color: #fff;
  text-align: center;
  background: #120c03;
  border: 3px solid #513810;
  border-radius: 10px;
  outline: none;
  box-shadow: inset 0 4px 0 #0a0702;
}

#admin_inv_search:focus {
  border-color: #edcd00;
  box-shadow: inset 0 4px 0 #0a0702, 0 0 0 3px rgba(237, 205, 0, 0.22);
}

#admin_inv_search::placeholder {
  color: #8a6a3a;
}

#admin_inv_scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px;
  border: 3px solid #513810;
  border-radius: 10px;
  background: #120c03;
  box-shadow: inset 0 4px 0 #0a0702;
  scrollbar-width: auto;
  scrollbar-color: #ce9f1b #120c03;
}

#admin_inv_scroll::-webkit-scrollbar {
  width: 10px;
}

#admin_inv_scroll::-webkit-scrollbar-track {
  background: #120c03;
}

#admin_inv_scroll::-webkit-scrollbar-thumb {
  background: #ce9f1b;
  border-radius: 8px;
  border: 2px solid #120c03;
}

#admin_inv_list {
  display: grid;
  grid-template-columns: repeat(8, 60px);
  justify-content: space-between;
  row-gap: 8px;
  width: 100%;
}

#admin_inv_list .admin_item {
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 10px;
  background: #221605;
  cursor: url(../img/cursor1.png), pointer;
  overflow: hidden;
  font-size: 0;
}

#admin_inv_list .admin_item:hover {
  outline: 3px solid #edcd00;
  outline-offset: -3px;
}

#admin_inv_hint {
  flex: 0 0 auto;
  margin-top: 8px;
  color: #c4a56a;
  font-size: 13px;
  text-align: center;
  text-shadow: 0 2px 0 #281806;
}

/* Plugin panels: wood-gold slots. Buttons use .ns_button; no per-panel button rules. */
#plugin_hud_images {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 25;
}

#plugin_hud_images img {
  position: absolute;
  display: block;
  pointer-events: none;
  user-select: none;
}

#plugin_sidebar,
#plugin_modal_host {
  position: absolute;
  inset: 0;
  display: none;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 40;
  font-family: "Baloo Paaji", sans-serif;
  color: #fff;
  text-shadow: 0 2px 0 #281806;
}

#plugin_sidebar:not([hidden]),
#plugin_modal_host:not([hidden]) {
  display: block;
}

#plugin_sidebar:not([hidden]) {
  pointer-events: none;
}

/* Only the window takes the mouse: the game around it stays playable. */
#plugin_modal_host:not([hidden]) {
  pointer-events: none;
}

.plugin_panel {
  position: absolute;
  box-sizing: border-box;
  margin: 0;
  pointer-events: auto;
  padding: 22px 14px 12px;
  background: repeating-linear-gradient(-12deg, transparent 0 22px, rgba(255, 214, 120, 0.05) 22px 24px), repeating-linear-gradient(8deg, transparent 0 36px, rgba(20, 10, 0, 0.12) 36px 39px), #4a3414;
  border: 8px solid #513810;
  box-shadow: 0 6px 0 #221605;
  border-radius: 24px;
  text-align: center;
  cursor: url(../img/cursor0.png), auto;
}

.plugin_panel[data-api="2"] > .plugin_panel_tab {
  display: none;
}

.plugin_panel_tab {
  position: absolute;
  left: 50%;
  top: -18px;
  z-index: 2;
  box-sizing: border-box;
  min-width: 140px;
  height: 32px;
  padding: 0 12px;
  transform: translateX(-50%);
  background: #5a3d14;
  border: 5px #513810 solid;
  box-shadow: 0 5px 0 #221605;
  border-radius: 14px;
  color: #e8c98a;
  font-size: 16px;
  line-height: 22px;
  pointer-events: none;
}

.plugin_panel_body {
  position: relative;
  padding: 14px 12px 10px;
  background: #1a1106;
  border-radius: 16px;
  box-shadow: inset 0 4px 0 #0e0903, 0 0 0 3px #2a1c08;
}

#plugin_modal_host .plugin_panel {
  text-align: left;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 36px);
}

#plugin_modal_host .plugin_panel_body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #edcd00 #221605;
}

#plugin_modal_host .plugin_panel_body::-webkit-scrollbar {
  width: 10px;
}

#plugin_modal_host .plugin_panel_body::-webkit-scrollbar-track {
  background: #221605;
  border-radius: 8px;
}

#plugin_modal_host .plugin_panel_body::-webkit-scrollbar-thumb {
  background: #edcd00;
  border-radius: 8px;
}

#plugin_modal_host .plugin_panel_body > .plugin_node {
  margin: 0;
  height: auto;
  min-height: 0;
}

#plugin_modal_host .plugin_node {
  margin: 0;
}

#plugin_modal_host .plugin_panel_body > .plugin_node > .plugin_node:first-child {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #1a1106;
  padding: 0 0 10px;
}

#plugin_modal_host .plugin_node[data-node-kind=image-item] {
  position: relative;
  flex: 0 0 auto;
}

.plugin_item_count {
  position: absolute;
  right: 2px;
  bottom: 0;
  color: #fff;
  font-size: 13px;
  line-height: 1;
  text-shadow: 0 1px 0 #000, 0 0 3px #000;
  pointer-events: none;
}

.plugin_panel_title {
  margin: 0 0 8px;
  color: #edcd00;
  font-size: 18px;
}

.plugin_node {
  margin: 8px 0;
}

.plugin_shape_svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.plugin_node_text {
  color: #fff;
  font-size: 16px;
  line-height: 1.3;
  word-break: break-word;
}

.plugin_node_text.muted {
  color: #c4a56a;
}

.plugin_node_text.gold {
  color: #edcd00;
}

.plugin_progress {
  height: 12px;
  margin: 6px 0;
  overflow: hidden;
  background: #221605;
  border: 2px solid #513810;
  border-radius: 8px;
}

.plugin_progress_fill {
  height: 100%;
  background: #edcd00;
}

.plugin_panel_close {
  margin-top: 8px;
}

/* Bottles guide: navigation stays in place; only the selected page scrolls. */
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  width: min(700px, 100% - 24px) !important;
  height: min(740px, 100% - 48px) !important;
  max-height: none;
  padding: 12px;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) .plugin_panel_tab {
  display: none;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) .plugin_panel_body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 20px;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=rules-guide] {
  display: flex !important;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  min-height: 0 !important;
  height: 100% !important;
  flex: 1;
  overflow: hidden;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=rules-header] {
  position: static;
  flex-shrink: 0;
  padding: 0 0 4px;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id^=rules-page-] {
  flex: 1 1 auto;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 2px 8px 2px 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #a88b39 #221605;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id^=rules-page-] > .plugin_node {
  flex-shrink: 0;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=rules-footer-wrap] {
  flex-shrink: 0;
  padding-top: 14px;
  border-top: 1px solid #513810;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) .plugin_node[data-node-kind=button] {
  display: flex;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) .plugin_node[data-node-kind=button] > button {
  width: 100%;
  min-height: 40px;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=exp-columns], #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id^=exp-tier-] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 76px 50px;
  box-sizing: border-box;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=exp-columns] {
  padding: 0 7px 4px;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id^=reward-row-][data-node-id$=-items] {
  grid-template-columns: 40px minmax(0, 1fr) 40px minmax(0, 1fr) !important;
  align-items: center;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) .plugin_node[data-node-kind=image-item] {
  box-sizing: border-box;
}
#plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) .plugin_node[data-node-kind=text] {
  line-height: 1.35;
}

@media (max-width: 600px) {
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) {
    padding: 6px;
    border-width: 5px;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) .plugin_panel_body {
    padding: 12px;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=rules-steps] {
    grid-template-columns: 1fr !important;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id^=reward-row-][data-node-id$=-items] {
    grid-template-columns: 40px minmax(0, 1fr) !important;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=rules-tabs] {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id^=nav-] {
    gap: 6px !important;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=rules-section-heading] {
    display: none !important;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=rules-pagination] {
    flex-wrap: wrap !important;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=page-summary] {
    order: -1;
    width: 100%;
  }
  #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=previous], #plugin_modal_host .plugin_panel:has([data-node-id=rules-guide]) [data-node-id=next] {
    flex: 1;
  }
}