@font-face {
  font-family: 'Ubuntu';
  src: url('/fonts/ubuntu-regular-webfont.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Ubuntu';
  src: url('/fonts/ubuntu-bold-webfont.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

body, html {
  font-family: 'Ubuntu', sans-serif;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-color: #222222;
}

#gameCanvas {
  display: none;
  background-color: #222222; /*355f30*/
  width: 100%;
  height: 100%;
}

:root {
  --poison-cloud-stroke-width: 60;

  --poison-cloud-color-green: #08f86456;
  --poison-cloud-stroke-green: #00722c41;

  --poison-cloud-color-yellow: #f4f70f56;
  --poison-cloud-stroke-yellow: #7c7e0441;

  --poison-cloud-color-blue: #0fa8f756;
  --poison-cloud-stroke-blue: #08507a41;

  --poison-cloud-color-purple: #9d0ff756;
  --poison-cloud-stroke-purple: #60087a41;

  --poison-cloud-color-white: #ffffff56;
  --poison-cloud-stroke-white: #80808041;

  --loot-item-global-scale: 2;
  --loot-item-background-base: 55;
  --loot-item-icon-base: 40;

  --slot-border-ratio: 0.068;
  --slot-radius-ratio: 0.04;
  --item-radius-ratio: 0.04;

  --inventory-slot-size: 75px;
  --inventory-item-icon-size: 50; 
  --inventory-slot-margin: 5px;

  --drag-scale-factor: 1.2;
  --drag-scale-duration: 0.1s;
  --drag-scale-timing-function: cubic-bezier(0.1, 0.9, 0.9, 0.9);

  --trash-scale-duration: 0.1s;
  --trash-timing-function: cubic-bezier(0.455, 0.03, 0.515, 0.955);

  --player-name-offset-x: 0px;
  --player-name-offset-y: 150;
  --player-name-font-size: 24px;
  --player-name-font-family: 'Ubuntu', sans-serif;
  --player-name-font-weight: bold;
  --player-name-font-color: #ffffff;

  --mob-label-font-size: 18px;
  --mob-label-font-family: 'Ubuntu', sans-serif;
  --mob-label-offset-y: 25;

  --chat-width: 350px;
  --chat-messages-max-height: 250px;
  --chat-message-font-size: 16px;
  --chat-input-height: 40px;
  --chat-bg-color: rgba(0, 0, 0, 0.5);
  --chat-radius: 8px;
  --chat-padding: 10px;

  --core-cooldown-overlay-color: rgba(0, 0, 0, 0.712);
  --core-cooldown-overlay-radius-scale: 0.954;
}

/* Shared base class for inventory slot */
.itemSlotBase {
  width: var(--inventory-slot-size);
  height: var(--inventory-slot-size);
  margin: 0 var(--inventory-slot-margin);
  position: relative;
  box-sizing: border-box;
  border: calc(var(--inventory-slot-size) * var(--slot-border-ratio)) solid #c5c5c5;
  border-radius: calc(var(--inventory-slot-size) * var(--slot-radius-ratio));
  background-color: #ececec;
}

/* Rarity classes for inventory/loot colors */
.rarity-common-slot {
  background-color: #7eef6d;
  border-color: #66c258;
}

.rarity-rare-slot {
  background-color: #4d52e3;
  border-color: #3e42b8;
}

.rarity-epic-slot {
  background-color: #861fde;
  border-color: #6d19b4;
}

.rarity-legendary-slot {
  background-color: #ffe65d;
  border-color: #cfba4b;
}

.rarity-mythical-slot {
  background-color: #de1f1f;
  border-color: #b41919;
}

/* Core background base class to control border width, shape, etc. */
.coreBackgroundBase {
  border: 5px solid;
  border-radius: 50%;
}

/* Core background classes for each rarity */
.core-background-common {
  background-color: #7eef6d;
  border-color: #66c258;
}

.core-background-rare {
  background-color: #4d52e3;
  border-color: #3e42b8;
}

.core-background-epic {
  background-color: #861fde;
  border-color: #6d19b4;
}

.core-background-legendary {
  background-color: #ffe65d;
  border-color: #cfba4b;
}

.core-background-mythical { 
  background-color: #de1f1f;
  border-color: #b41919;
}

#mainMenu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #222;
  opacity: 1;
  transition: opacity 250ms ease-in;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

#mainMenuContent {
  text-align: center;
}

#playerNameInput, #playWorldModeButton {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  font-size: 24px;
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  border: 5px solid rgb(32, 32, 32);
  overflow: hidden;
  transform-origin: center;
  margin: 10px;
}

#playWorldModeButton {
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#playWorldModeButton:hover {
  background-color: rgb(120, 228, 165);
  border: 5px solid #264c26ff;
  transform: scale(1.06);
}

body, #gameCanvas, #mainMenu {
  user-select: none;
}

.draggedItem {
  position: absolute;
  pointer-events: none;
  z-index: 1000;
  transform-origin: center center;
  transition: transform var(--drag-scale-duration) var(--drag-scale-timing-function);
}

.draggedItem.scaled {
  transform: scale(var(--drag-scale-factor));
}

.draggedItem.trashing {
  pointer-events: none;
  transition: transform var(--trash-scale-duration) var(--trash-timing-function), opacity var(--trash-scale-duration) var(--trash-timing-function);
  transform: scale(0.5);
  opacity: 0;
}

/* Tooltip */
.tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  z-index: 1000;
  max-width: 300px;
  min-width: 180px;
  word-wrap: break-word;
  text-align: left;
}

.tooltip-skill-name {
  font-family: 'Ubuntu', sans-serif;
  letter-spacing: 0.5px;
  font-weight: bold;
  font-size: 22px;
  margin-top: 5px;
  margin-bottom: 3px;
}

.tooltip-rarity {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 22px;
}

.tooltip-description {
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  margin-bottom: 16px;
}

.tooltip-description2 {
  font-family: 'Ubuntu', sans-serif;
  letter-spacing: 0.4px;
  font-weight: bold;
  font-size: 15px;
  margin-bottom: 10px;
  color: #76cdeb;
}

.rarity-common {
  color: rgb(93, 196, 77);
}

.rarity-rare {
  color: #3e42b8ff;
}

.rarity-epic {
  color: #6d19b4ff;
}

.rarity-legendary {
  color: rgb(204, 182, 70);
}

.rarity-mythical {
  color: #de1f1fff;
}

/* Damage numbers */
.damage-number {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  font-family: Ubuntu, sans-serif;
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  will-change: transform, opacity;
}

.damage-number.mob-damage {
  color: rgb(255, 185, 56);
  -webkit-text-stroke: 0.4px rgb(116, 83, 22);
}

.damage-number.mob-damage-crit {
  color: rgb(255, 63, 63);
  -webkit-text-stroke: 0.4px rgb(65, 13, 13);
}

.damage-number.player-damage {
  color: rgb(252, 252, 59);
  -webkit-text-stroke: 0.4px rgb(82, 82, 18);
}

.damage-number.turret-damage {
  color: rgb(255, 185, 56); /* normal (orange) */
  -webkit-text-stroke: 0.4px rgb(116, 83, 22);
}

.damage-number.turret-damage-crit {
  color: rgb(255, 63, 63); /* crit (red) */
  -webkit-text-stroke: 0.4px rgb(65, 13, 13);
}

/* CHAT STYLING */
#chatContainer {
  position: absolute;
  bottom: 15px;
  left: 15px;
  width: var(--chat-width);
  color: #ffffffbb;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  box-sizing: border-box;
  transition: opacity 0.5s ease;
}

#chatMessages {
  max-height: var(--chat-messages-max-height);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  font-size: var(--chat-message-font-size);
  margin-bottom: 10px;
  transition: opacity 0.5s ease;
}

#chatMessages.fadeOutMessages {
  opacity: 0;
}

.chatMessage {
  word-wrap: break-word;
  white-space: normal;
  margin: 3px 0;
}

#chatInput {
  width: 100%;
  box-sizing: border-box;
  outline: none;
  background: rgba(80, 80, 80, 0.452);
  color: #c0c0c0e5;
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  padding: 12px;
  border-radius: 8px;
  font-size: 18px;
  height: var(--chat-input-height);
  border: 2px solid rgba(0, 0, 0, 0.486);
}

#chatInput::placeholder {
  color: #cccccc6e;
  font-size: 16px;
}

#suggestionBox {
  background: rgba(0,0,0,0.8);
  border-radius: 4px;
  margin-bottom: 5px;
  margin-top: 5px;
  max-height: 150px;
  border-radius: 4px;
  overflow: auto;
}

.suggestionItem {
  padding: 5px;
  cursor: pointer;
}

.suggestionItem.highlighted {
  background: rgba(255, 255, 255, 0.144);
}

/* Cores */
.coreBackgroundBase.core-background-common-active {
  background-color: #44803b; /* Example darker shade for common */
  border-color: #66c258; 
}
.coreBackgroundBase.core-background-rare-active {
  background-color: #282a72; /* Example darker shade for rare */
  border-color: #3e42b8;
}
.coreBackgroundBase.core-background-epic-active {
  background-color: #3b123b; /* Example darker shade for epic */
  border-color: #3e133e;
}
.coreBackgroundBase.core-background-legendary-active {
  background-color: #70662a; /* Example darker shade for legendary */
  border-color: #99912e;
}
.coreBackgroundBase.core-background-mythical-active {
  background-color: rgb(92, 9, 9); /* Example darker shade for mythical */
  border-color: #911;
}

/* Core Tooltip Classes */
.tooltip-skill-name {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  font-size: 22px;
  margin-top: 5px;
  margin-bottom: 3px;
  color: #ffffff;
}

.tooltip-rarity {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 30px;
}

.tooltip-description {
  font-family: 'Ubuntu', sans-serif;
  font-size: 15px;
  font-weight: normal;
  color: #ececec;
  margin-bottom: 10px;
}

/* Buff lines */
.tooltip-buff {
  margin-top: 30px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--core-buff-color, #76cdeb);
  margin-bottom: 10px
}

/* Debuff lines */
.tooltip-debuff {
  margin-top: 30px;
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  font-weight: bold;
  color: var(--core-debuff-color, #ec5757);
  margin-bottom: 10px;
}

/* Spacing between buffs and debuffs */
.tooltip-spacing {
  margin: -25px 0;
}

/* ============================ Summon ============================ */

/* Summon Menu container is hidden by default */
#summonMenu {
  position: fixed; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 34, 34, 0.95);
  z-index: 1001;
  display: none; /* Moved from inline HTML */
  text-align: center;
  color: white;
  /* Add some vertical spacing inside */
  padding-top: 60px;
}

/* Matches the style of the big buttons (PLAY/WORLD) */
#openSummonMenuButton {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  font-size: 24px;
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  border: 5px solid rgb(32, 32, 32);
  overflow: hidden;
  transform-origin: center;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#openSummonMenuButton:hover {
  background-color: rgb(215, 120, 228);
  border: 5px solid rgb(70, 38, 76);
  transform: scale(1.06);
}

/* Back button moved from inline styling */
#summonMenuBackButton {
  position: absolute;
  top: 10px;
  left: 10px;

  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  font-size: 24px;
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  border: 5px solid rgb(32, 32, 32);
  overflow: hidden;
  transform-origin: center;
  margin: 10px; 
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#summonMenuBackButton:hover {
  background-color: rgb(228, 124, 120);
  border: 5px solid rgb(76, 42, 38);
  transform: scale(1.06);
}

/* Summon Action Button now with same big style as #playWorldModeButton */
#summonActionButton {
  font-family: 'Ubuntu', sans-serif;
  font-weight: bold;
  padding: 10px 20px;
  font-size: 24px;
  border-radius: 15px;
  background-color: rgb(255, 255, 255);
  border: 5px solid rgb(32, 32, 32);
  overflow: hidden;
  transform-origin: center;
  margin: 10px;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

#summonActionButton:hover {
  background-color: rgb(120, 228, 165);
  border: 5px solid #264c26ff;
  transform: scale(1.06);
}