/* city-of-mist.css */

:root {
  --dark-color: #161616;
  --text-main-color: #352a1d;
  --text-tag-color: #322924;
  --text-hud-main-color: #d7e5f5; 
  --text-hud-subtitles-color: #ffa900;
  --text-status-color: #ecf5f4;
  --outcome-text-color: #3d2911;
  --effects-color1:#1b190e;
  --effects-color2:rgb(245,245,245);
  --effects-color3: #d3f265;
  --toBurn-text-color: #85662b;
  --positive-tag-color: #8b7e05da;
  --positive-tag-borderColor: #faf2aedb;
  --negative-tag-color: #8b412a;
  --negative-tag-borderColor: #fb7b6d;
  --destroyed-tag-color: rgba(255, 40, 40, 0.825);
  --spectrum-color:#dc9c67;
  --limit-color: #ae295b;
  --status-color: rgb(102 31 131);
  --storytag-color: rgb(63, 81, 161);
  --storytag-text-color: whitesmoke;
  --divider-roll-color: rgba(255, 255, 255, 0.3);
  --divider-color1: rgba(255, 255, 255, 0.3);
  --roll-shadow-color:#d542b7;
  --blur-shadow-color: #d542b7;
  --divider-roll-color: #1b190e;
  --font-family-main1: Rift;
  --font-family-main2: Averia Serif Libre;
  --font-family-move: Rift Bold;
  --font-family-npcmoves: Barlow Condensed;
  --font-family-roll: Averia Serif Libre;
  --font-family-tags: Roboto Condensed;
  --font-family-outcome: Averia Serif Libre;
  --font-family-hud: Roboto Condensed;
  --font-family-effects: Averia Serif Libre;
  --hud-background1: url('../ui/com_hud_BG.webp');
  --hud-bg-color: rgba(0, 0, 0, 0.45);
  --hud-bg-color2: #0708096c;
  --npc-hud-bg-prime: rgba(0, 0, 0, 0.45);
}

.mh-theme-header {
  display: grid;
  grid-template-columns: 20px 3fr auto;
  align-items: flex-start;
  justify-content: flex-start;
  margin: -3px -0px 1px -0px;
  height: fit-content;
  padding: 0 10px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.mh-theme-header.extras {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between; 
  margin: -3px -0px 1px -0px;
  height: 28px;
  padding: 0 10px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
}

.mh-theme-header.Mythos {
  background-image: url('../ui/header-mythos.webp');
}

.mh-theme-header.Logos {
  background-image: url('../ui/header-logos.webp');
}

.mh-theme-header.Mist {
  background-image: url('../ui/header-mist.webp');
}

.mh-theme-header.neutral,
.mh-theme-header.Crew,
.mh-theme-header.Extra {
  background-image: url('../ui/header-neutral-com.webp');
}

.mh-tags ul {
  padding: 3px;
  margin: 10px;
}

.mh-tags li {
  height: 1.4rem;
  /* padding: 5px; */
  color: var(--text-hud-main-color);
}

.mh-tags li:hover {
  opacity: 0.85;
}

.mh-create-story-tag i,
.mh-create-status i {
  position: relative;
  top: 2px;
  right: 6px;
  font-size: 0.85rem;
  color: whitesmoke;
}

.mh-power-tag,
.mh-weakness-tag,
.mh-loadout-tag,
.mh-story-tag {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: 5px;
  padding: 2px 0px;
  cursor: pointer;
  text-align: left;
  background: none;
}

.mh-power-tag span,
.mh-weakness-tag span,
.mh-loadout-tag span,
.mh-story-tag span {
  display: flex;
  align-items: center;
}

.mh-power-tag.Mythos.selected {
  background: url('../ui/select-bar-com-Mythos.webp');
  background-size: 90% 95%;
  background-repeat: no-repeat;
  background-position: center left 14px;
  color: white;
  text-shadow: 0 0 1px #ffe8fc;
}

.mh-power-tag.Logos.selected {
  background: url('../ui/select-bar-com-Logos.webp');
  background-size: 90% 95%;
  background-repeat: no-repeat;
  background-position: center left 14px;
  color: white;
  text-shadow: 0 0 1px #3a1f0e;
}

.mh-power-tag.Mist.selected {
  background: url('../ui/select-bar-com-Mist.webp');
  background-size: 90% 95%;
  background-repeat: no-repeat;
  background-position: center left 14px;
  color: white;
  text-shadow: 0 0 1px #ffe8fc;
}

.mh-power-tag.Crew.selected,
.mh-story-tag.selected,
.mh-loadout-tag.selected,
.mh-weakness-tag.inverted.selected  {
  background: url('../ui/select-bar-com-Crew.webp');
  background-size: 90% 95%;
  background-repeat: no-repeat;
  background-position: center left 14px;
  color: white;
  text-shadow: 0 0 1px #bdbcbc;
}

.mh-weakness-tag.selected,
.mh-story-tag.inverted.selected {
  color: white;
  /* background: linear-gradient(0.25turn, var(--negative-tag-color), rgba(6, 95, 150, 0)); */
  background: url('../ui/select-bar-com-weakness.webp');
  background-size: 90% 95%;
  background-repeat: no-repeat;
  background-position: center left 14px;
  text-shadow: 0 0 1px #fedcd7;
}

/* Burn Toggle Icon */
.mh-burn-toggle,
.mh-weakness-toggle {
  display: inline-block;
  padding-left: 2px;
  padding-right: 0px;
  cursor: pointer;
  margin-right: 4px;
}

/* Mythos Themebook Name Styling */
.mh-themebook-name-com-Mythos, .theme-type.Mythos {
  color: var(--mythosOS-verylight-color);
  text-shadow: var(--mythosOS-dark-color) 1px 0 6px;
}

/* Logos Themebook Name Styling */
.mh-themebook-name-com-Logos, .theme-type.Logos {
  color: var(--logos-verylight-color);
  text-shadow: var(--logos-dark-color) 1px 0 6px;
}

/* Mist Themebook Name Styling */
.mh-themebook-name-com-Mist, .theme-type.Mist {
  color: var(--mist-verylight-color);
  text-shadow: var(--mist-dark-color) 1px 0 6px;
}

/* Specific icons for Mythos, Logos, and Mist themes */
.mh-theme-icon.Mythos {
  position: relative;
  top: -2px;
  align-self: inherit;
  justify-self: center;
  width: 12px;
  height: 17px;
  background-image: url('../ui/icons/mythos_icn.svg');
  filter: drop-shadow(1px 0 6px var(--mythosOS-dark-color));
}

.mh-theme-icon.Logos {
  align-self: inherit;
  justify-self: center;
  width: 18px;
  height: 12px;
  background-image: url('../ui/icons/logos_icn.svg');
  filter: drop-shadow(1px 0 6px var(--logos-dark-color));
}

.mh-theme-icon.Mist {
  position: relative;
  align-self: inherit;
  justify-self: center;
  top: -3px;
  width: 18px;
  height: 18px;
  background-image: url('../ui/icons/mist_icn.svg');
  filter: drop-shadow(1px 0 6px var(--mist-dark-color));
}

.mh-theme-icon.Crew,
.mh-theme-icon.Extra {
  position: relative;
  top: -3px;
  align-self: inherit;
  justify-self: center;
  width: 18px;
  height: 15px;
  background-image: url('../ui/icons/crew_icn.svg');
  filter: drop-shadow(1px 0 6px whitesmoke);
}

.mh-theme-icon-notip.storytag {
  position: relative;
  top: -1px;
  width: 15px;
  height: 18px;
  background-image: url('../ui/icons/storytag_icn.svg');
  transform: scaleX(-1);
  filter: drop-shadow(1px 0 4px rgb(201, 201, 201));
}

.mh-theme-icon-notip.statuses {
  position: relative;
  top: -4px;
  width: 18px;
  height: 16px;
  background-image: url('../ui/icons/statuses_icn.svg');
  filter: drop-shadow(1px 0 4px rgb(201, 201, 201));
}

.mystery-type.Mythos {
  color: var(--mythos-verylight-color);
  text-shadow: var(--mythos-dark-color) 1px 1px 1px;
  padding: 1px 2px;
  border-radius: 2px;
  margin: auto;
}

.mystery-type.Logos {
  color: var(--logos-verylight-color);
  text-shadow: var(--logos-dark-color) 1px 1px 1px;
  padding: 1px 2px;
  border-radius: 2px;
  margin: auto;
}

.mystery-type.Mist {
  color: var(--mist-verylight-color);
  text-shadow: var(--mist-dark-color) 1px 1px 1px;
  padding: 1px 2px;
  border-radius: 2px;
  margin: auto;
}

.mystery-type.crew,
.mystery-type.Extra {
  color: whitesmoke;
  text-shadow: rgb(183, 183, 183) 1px 1px 1px;
  padding: 1px 2px;
  border-radius: 2px;
  margin: auto;
}

/*Chat Card Styles*/

.mist-hud-roll {
  background-image: var(--hud-background1);
  background-repeat: no-repeat;
  background-size: cover;
  border: var(--positive-tag-color) 2px solid;
  width: 96%;
  border-radius: 10px;
}

.mhr-roll-title {
  font-size: 2em;
  text-align: center;
  font-family: var(--font-family-move);
  /* text-shadow: 1px 1px 2px var(--roll-shadow-color); */
  color: var(--outcome-text-color);
  justify-content: center;
  margin-top: 12px;
  line-height: 1em;
  text-transform: uppercase;
  font-style: italic;
}

.mhr-roll-subtitle {
  font-size: 1.8em;
  font-weight: normal;
  margin-bottom: 5px;
  text-align: center;
  font-family: var(--font-family-move);
  /* text-shadow: 1px 1px 1px var(--noise-dark-color); */
  color: var(--noise-verylight-color);
  margin-top: 8px;
  font-style: italic;
}

.mhr-outcome{
  font-family: var(--font-family-outcome);
  font-size: 1.1em;
  font-weight: 700;
  color: var(--outcome-text-color);
  /* text-shadow: 1px 1px 4px var(--blur-shadow-color); */
  text-align: center;
  justify-content: baseline;
  padding: 5px 0px 20px 0px;
}

/*Roll Icons*/
.mhr-icon.Mythos {
  background-image: url('../ui/icons/mythos_icn.svg');
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(5%) sepia(11%) saturate(3432%) hue-rotate(16deg) brightness(93%) contrast(89%);
}

.mhr-icon.Logos {
  background-image: url('../ui/icons/logos_icn.svg');
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(5%) sepia(11%) saturate(3432%) hue-rotate(16deg) brightness(93%) contrast(89%);
}

.mhr-icon.Mist {
  background-image: url('../ui/icons/mist_icn.svg');
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(5%) sepia(11%) saturate(3432%) hue-rotate(16deg) brightness(93%) contrast(89%);
}

.mh-theme-name {
  font-family: var(--font-family-move);
  font-size: 1.2em;
  margin: 4px 2px;
  font-style: italic;
}

/* Mythos Theme Name Styling */
.mh-theme-name-com-Mythos {
  color: var(--mythosOS-verylight-color);
  text-shadow: var(--mythosOS-dark-color) 1px 1px;
}

/* Logos Theme Name Styling */
.mh-theme-name-com-Logos {
  color: var(--logos-verylight-color);
  text-shadow: var(--logos-dark-color) 1px 1px;
}

/* Mist Theme Name Styling */
.mh-theme-name-com-Mist {
  color: var(--mist-verylight-color);
  text-shadow: var(--mist-dark-color) 1px 1px;
}

.mh-theme-name-com-Crew,
.mh-theme-name-com-Extra {
  color: whitesmoke;
  text-shadow: var(--mist-dark-color) 1px 1px;
}

.mh-theme-name-neutral {
  color: whitesmoke;
  text-shadow: rgb(157, 69, 184) 1px 2px 2px;
}

.burn-icon {
  display: inline-block; /* Keep the inline-block for the background image behavior */
  width: 17px;
  height: 15px;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  align-self: center;
  vertical-align: middle;
  margin-right: 3px;
}

/* Unburned state */
.burn-icon.unburned {
  background-image: url("../ui/icons/burn_com_empty_icn.svg");
}

/* To Burn state */
.burn-icon.toBurn {
  background-image: url("../ui/icons/burn_com_active_icn.svg");
}

/* Burned state */
.burn-icon.burned {
  background-image: url("../ui/icons/burn_com_full_icn.svg");
}

.mh-power-tag.burned,
.mh-story-tag.burned,
.mh-loadout-tag.burned  {
  text-decoration: line-through;
  color: #ffa742;
  text-decoration-thickness: 2px;
}

.mh-dropshadow-Mythos{
  filter: drop-shadow(1px 1px 5px var(--mythos-dark-color));
}

.mh-dropshadow-Logos{
  filter: drop-shadow(2px 2px 5px var(--logos-dark-color));
}

/* Hover effect for the entire row in the Screen Status list */
.status-group-container:hover {
  background: rgba(78, 2, 88, 0.204);
  border: #d12ebb 1px solid;
}

/* Layout the resource bars side by side */
.mh-resource-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 3px;
}

.mh-box {
  background-image: url('../ui/icons/track-com-empty.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

.mh-box.attention {
  transform: rotateX(180deg);
}

/* "Filled" or "active" state */
.mh-box.active {
  background-image: url('../ui/icons/track-com-full.svg');
  background-repeat: no-repeat;
  background-size: contain;
}

/* Label under the boxes */
.mh-resource-label {
  margin-top: 4px;
  font-size: 0.55rem;
  text-align: center;
  text-transform: uppercase;
  color: whitesmoke; 
}

.mh-improvement-marker {
  display:table-row;
  justify-content: flex-end;
  text-align: right;
  align-self: center;
  vertical-align: middle;
  color: whitesmoke;
  font-weight: bold;
  margin-left: 5px; 
}

.mh-improvement-marker i {
  align-self: center;
  font-size: 0.70rem;
}

/* MESSAGES HELP/HURT BOTTOM OF HUD */

.mh-help-hurt-messages{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
  color: whitesmoke;
  height: 30px;
  background-color: var(--hud-bg-color);
  /* box-shadow: rgba(160, 22, 137, 0.855) inset 0px 0px 10px; */
}

.relationship-message {
  display: grid;
  grid-template-columns: 30px auto;
  align-items: center;
  font-size: 0.85rem;
  gap: 5px;
  font-family: var(--font-family-tags);
}

.token-image-message {
  width: 25px;
  height: 25px;
  border: none;
}

/* ITEM HELP AND HUD */

.relationship-item {
  display: grid;
  grid-template-columns: 34px 2fr 22px;
  font-size: 0.85rem;
  gap: 5px;
  font-family: var(--font-family-tags);
}

/* Token Image */
.relationship-item .token-image {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 3px;
  vertical-align: middle;
  border: none;
}

.relationship-item .token-image img {
  border: none;
  align-self: center;
}

.relationship-item .item-name {
  font-size: 0.85rem;
  font-family: var(--font-family-tags);
  align-self: center;
}

input[type="checkbox"].help-toggle,
input[type="checkbox"].hurt-toggle {
  width: 17px;
  height: 17px;
}

/* Custom styling for the help/hurt-toggle checkbox */
.help-toggle, .hurt-toggle {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 2px solid whitesmoke;
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
  transition: all 0.2s ease-in-out;
  -webkit-mask: url("../ui/icons/arrow-up-empty.svg") center / contain no-repeat;
  mask: url("../ui/icons/arrow-up-empty.svg") center / contain no-repeat;
  background-color: whitesmoke;
}

/* Rotating the hurt toggle downward */
.hurt-toggle {
  transform: rotate(180deg);
}

/* Style when the help toggle is checked (active help bonus) */
.help-toggle:checked {
  -webkit-mask: url("../ui/icons/arrow-up-filled.svg") center / contain no-repeat;
  mask: url("../ui/icons/arrow-up-filled.svg") center / contain no-repeat;
  /* background-color: var(--positive-color, #4caf50); */
  background: linear-gradient(#89fdc5, #13ab24);
  border-color: var(--positive-color, #94f997);
}

/* Style when the hurt toggle is checked */
.hurt-toggle:checked {
  -webkit-mask: url("../ui/icons/arrow-up-filled.svg") center / contain no-repeat;
  mask: url("../ui/icons/arrow-up-filled.svg") center / contain no-repeat;
  /* background-color: var(--negative-color, #cf2f0b); */
  background: linear-gradient(#ffb298, #cf2b16);
  border-color: var(--negative-color, #cf2f0b);
}

/* Remove the checkmark */
.help-toggle:checked::after, 
.hurt-toggle:checked::after {
  content: none;
}