/* otherscape.css */

:root {
  --dark-color: #030d21;
  --text-main-color: rgb(233, 233, 233);
  --text-tag-color: #0b0643;
  --text-hud-main-color: #d7e5f5; 
  --text-hud-subtitles-color: #b4b9c0;
  --text-status-color: #ecf5f4;
  --outcome-text-color: rgb(245,245,245) ;
  --effects-color1:#84c600;
  --effects-color2:rgb(245,245,245);
  --effects-color3: #d3f265;
  --toBurn-text-color: #03004e;
  --positive-tag-color: #078ababb;
  --positive-tag-borderColor: #89dffff1;
  --negative-tag-color: rgba(235, 153, 70, 0.676);
  --negative-tag-borderColor: rgba(250, 193, 137, 0.841);
  --destroyed-tag-color: rgba(255, 40, 40, 0.825);
  --spectrum-color:#abff00;
  --status-color: rgb(0, 93, 93);
  --storytag-color: #646800;
  --storytag-text-color: whitesmoke;
  --limit-color: #ae295b;
  --divider-roll-color: rgba(255, 255, 255, 0.3);
  --divider-color1: rgba(255, 255, 255, 0.3);
  --roll-shadow-color:#00def6;
  --blur-shadow-color: #00def6;
  --divider-roll-color: #00def6;
  --font-family-main1: Rift;
  --font-family-main2: Averia Serif Libre;
  --font-family-move: SDGlitch;
  --font-family-roll: Bruno Ace;
  --font-family-tags: Roboto Condensed;
  --font-family-outcome: Roboto Condensed;
  --font-family-hud: Roboto Condensed;
  --font-family-effects: Courier New;
  --font-family-npcmoves: Barlow Condensed;
  --hud-background1: url('../ui/os_hud_BG.webp');
  --hud-bg-color: #222f3f50;
  --hud-bg-color2: #27384750;
  --npc-hud-bg-prime: #56779432;
  --marker-positiveTag-color: #96f5ff;
  --marker-negativeTag-color: #ffd4a8;
}

.mh-theme-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between; 
  margin: -3px -0px 1px -0px;
  height: 30px;
  padding: 0 10px;
  background-repeat: no-repeat;
  background-size: cover;
  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: 30px;
  padding: 0 10px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.mh-theme-header.loadout {
  justify-content: flex-end; 
}

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

.mh-theme-header.Noise {
  background-image: url('../ui/header-noise.webp');
  padding-top: 2px;
}

.mh-theme-header.Self {
  background-image: url('../ui/header-self.webp');
  padding-top: 2px;
}

.mh-theme-header.neutral {
  background-image: url('../ui/header-neutral.webp');
  /* justify-content: flex-start; */
  margin-top: 2px;
  /* text-shadow: 1px 1px 2px var(--effects-color1); */
}

.mh-theme-header.Crew {
  background-image: url('../ui/header-crew.webp');
  /* justify-content: flex-start; */
  margin-top: 3px;
  /* text-shadow: 1px 1px 2px var(--effects-color1); */
}

.mh-theme-header.spaced {
  background-image: url('../ui/header-neutral.webp');
  justify-content: space-between;
  margin-top: 2px;
  /* text-shadow: 1px 1px 2px var(--effects-color1); */
}

.theme-type.Mythos {
  color: var(--mythosOS-verylight-color);
  text-shadow: var(--mythosOS-dark-color) 1px 0 3px;
}

.theme-type.Noise {
  color: var(--logos-verylight-color-color);
  text-shadow: var(--noise-dark-color) 1px 0 3px;
}

.theme-type.Self{
  color: var(--mist-verylight-color);
  text-shadow: var(--self-dark-color) 1px 0 3px;
}

.theme-type.Crew{
  color: whitesmoke;
  text-shadow: whitesmoke 1px 0 3px;
}

.mh-theme-name {
  display: flex;
  align-items: center; /* Align text and stars */
  gap: 5px;
  font-family: var(--font-family-move);
  font-size: 1.3em;
  display: block;
  margin: 4px 2px;
  font-style: italic;
}

.mh-theme-name-com-Self {
  color: var(--self-verylight-color);
  font-family: var(--font-family-main1);
  /* text-shadow: var(--self-dark-color) 1px 1px 3px; */
}

.mh-theme-name-com-Mythos {
  color: var(--mythosOS-verylight-color);
  font-family: var(--font-family-move);
  /* text-shadow: var(--mythosOS-dark-color) 1px 1px 3px; */
}

.mh-theme-name-com-Noise {
  color: var(--noise-verylight-color);
  font-family: var(--font-family-move);
  /* text-shadow: var(--noise-dark-color) 1px 1px 3px; */
}

.mh-theme-name-com-Crew,
.mh-theme-name-com-Extra{
  color: rgb(236, 244, 237);
  font-family: var(--font-family-main1);
  /* text-shadow: var(--noise-dark-color) 1px 1px 3px; */
}

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

.mh-theme-icon.Self {
  position: relative;
  right: -10px;
  top: -11px;
  width: 28px;
  height: 24px;
  background-image: url('../ui/icons/self_os_icn.svg');
  filter: drop-shadow(1px 0 4px var(--self-dark-color));
}

.mh-theme-icon.Mythos {
  position: relative;
  right: -6px;
  top: -5px;
  width: 24px;
  height: 24px;
  background-image: url('../ui/icons/mythos_os_icn.svg');
  filter: drop-shadow(1px 0 4px var(--mythosOS-light-color));
}

.mh-theme-icon.Noise {
  position: relative;
  right: -7px;
  top: -9px;
  width: 24px;
  height: 24px;
  background-image: url('../ui/icons/noise_os_icn.svg');
  filter: drop-shadow(1px 0 4px var(--noise-dark-color));
}

.mh-theme-icon.Crew {
  position: relative;
  right: -8px;
  top: -5px;
  width: 24px;
  height: 21px;
  background-image: url('../ui/icons/crew_OS_icn.svg');
  filter: drop-shadow(1px 0 4px var(--effects-color1));
}

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

.mh-theme-icon-notip.storytag {
  position: relative;
  top: -5px;
  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: -5px;
  width: 18px;
  height: 16px;
  background-image: url('../ui/icons/statuses_icn.svg');
  filter: drop-shadow(1px 0 4px rgb(201, 201, 201));
}

.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-power-tag,
.mh-weakness-tag,
.mh-loadout-tag,
.mh-story-tag {
  display: grid;
  flex-direction: row;
  grid-template-columns: 25px auto auto;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  margin: 1px 1px;
  padding: 2px 0px;
  cursor: pointer;
  text-align: left;
  height: fit-content;
  font-family: var(--font-family-main1);
  text-transform: uppercase;
  list-style: none;
  color: whitesmoke;
  font-style: italic;
}

.mh-weakness-tag i {
  padding-left: 12px;
}

.mh-power-tag.Mythos {
color: var(--mythosOS-verylight-color);
}

.mh-power-tag.Noise {
  color: var(--noise-verylight-color);
}

.mh-power-tag.Self {
  color: var(--self-verylight-color);
}

.mh-power-tag.selected {
  align-items: center;
  color: white;
  font-family: var(--font-family-main1);
  text-transform: uppercase;
  background-size: 100% 96%;
  background-repeat: no-repeat;
  background-position: left center;
  height: fit-content;
}

.mh-power-tag.selected.Mythos {
  background-image: url('../ui/select-bar-mythosOS.webp');
  /* filter: drop-shadow(0 0 3px var(--mythosOS-dark-color)); */
}

.mh-power-tag.selected.Noise {
  background-image: url('../ui/select-bar-noise.webp');
  /* filter: drop-shadow(0 0 3px var(--noise-dark-color)); */
}

.mh-power-tag.selected.Self {
  background-image: url('../ui/select-bar-self.webp');
  /* filter: drop-shadow(0 0 3px var(--self-dark-color)); */
}

.mh-power-tag.selected.toBurn.Mythos {
  background-image: url('../ui/select-bar-mythosOS-toburn.webp');
  /* filter: drop-shadow(0 0 3px var(--mythosOS-dark-color)); */
}

.mh-power-tag.selected.toBurn.Noise {
  background-image: url('../ui/select-bar-noise-toburn.webp');
  /* filter: drop-shadow(0 0 3px var(--noise-dark-color)); */
}

.mh-power-tag.selected.toBurn.Self {
  background-image: url('../ui/select-bar-self-toburn.webp');
  /* filter: drop-shadow(0 0 3px var(--self-dark-color)); */
}

.mh-story-tag.selected,
.mh-loadout-tag.selected,
.mh-power-tag.Crew.selected,
.mh-weakness-tag.inverted.selected {
  align-items: center;
  color: white;
  background-image: url('../ui/select-bar-neutral2.webp');
  /* filter: drop-shadow(0 0 2px var(--effects-color1)); */
  font-style: italic;
  font-family: var(--font-family-main1);
  text-transform: uppercase;
  background-size: 100% 95%;
  background-repeat: no-repeat;
  background-position: left center;
  height: fit-content;
}

.mh-story-tag.selected.toBurn,
.mh-loadout-tag.selected.toBurn,
.mh-power-tag.Crew.selected.toBurn {
  background-image: url('../ui/select-bar-neutral2-toburn.webp');
  /* filter: drop-shadow(0 0 2px var(--effects-color1)); */
}

.mh-weakness-tag.selected,
.mh-story-tag.inverted.selected {
  /* display: flex; */
  align-items: center;
  color: white;
  background-image: url('../ui/select-bar-weakness.webp');
  /* filter: drop-shadow(0 0 2px gray); */
  font-style: italic;
  font-family: var(--font-family-main1);
  text-transform: uppercase;
  background-size: 100% 95%;
  background-repeat: no-repeat;
  background-position: left center;
  height: fit-content;
}

.mh-burn-toggle,
.mh-tag-text {
  align-items: center;
}

.mh-tag-text {
  margin-left: 10px;
}


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

.mh-story-toggle i{
  position: relative;
  top: 0;
  right: -1px;
  font-size: 0.90rem;
}

.burn-icon {
  width: 22px;
  height: 16px;
  margin-left: 6px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  align-self: center;
  vertical-align: middle;
}

.burn-icon.burned {
  width: 15px;
  height: 15px;
  margin-left: 13px;
}

.mh-power-tag.Mythos .burn-icon.unburned  {
  background-image: url("../ui/icons/burn_mythosOS_empty.svg");
}

.mh-power-tag.Mythos .burn-icon.toBurn  {
  background-image: url("../ui/icons/burn_mythosOS_toburn.svg");
  filter: drop-shadow(0 0 3px lime);
}

.mh-power-tag.Mythos .burn-icon.burned {
  background-image: url("../ui/icons/burn_mythosOS_burned.svg");
}

.mh-power-tag.Self .burn-icon.unburned  {
  background-image: url("../ui/icons/burn_self_empty.svg");
}

.mh-power-tag.Self .burn-icon.toBurn {
  background-image: url("../ui/icons/burn_self_toburn.svg");
  filter: drop-shadow(0 0 3px lime);
}

.mh-power-tag.Self .burn-icon.burned  {
  background-image: url("../ui/icons/burn_self_burned.svg");
}

.mh-power-tag.Noise .burn-icon.unburned {
  background-image: url("../ui/icons/burn_noise_empty.svg");
}

.mh-power-tag.Noise .burn-icon.toBurn  {
  background-image: url("../ui/icons/burn_noise_toburn.svg");
  filter: drop-shadow(0 0 3px lime);
}

.mh-power-tag.Noise .burn-icon.burned  {
  background-image: url("../ui/icons/burn_noise_burned.svg");
}

.mh-loadout-tag .burn-icon.unburned,
.mh-story-tag .burn-icon.unburned,
.mh-power-tag.Crew .burn-icon.unburned{
  background-image: url("../ui/icons/burn_neutral_empty.svg");
}

.mh-loadout-tag .burn-icon.toBurn,
.mh-story-tag .burn-icon.toBurn,
.mh-power-tag.Crew .burn-icon.toBurn {
  background-image: url("../ui/icons/burn_neutral_toburn.svg");
  filter: drop-shadow(0 0 2px var(--effects-color1));
}

.mh-loadout-tag .burn-icon.burned,
.mh-story-tag .burn-icon.burned,
.mh-power-tag.Crew .burn-icon.burned {
  background-image: url("../ui/icons/burn_neutral_burned.svg");
}

.mh-power-tag.burned,
.mh-story-tag.burned,
.mh-loadout-tag.burned  {
  text-decoration-line: line-through;
  text-decoration-color: rgb(235, 235, 235);
  text-decoration-thickness: 2px;
  color: #b1c7ca;
}



/*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;
}

/* Tracked Effects */

.mh-trackedfx-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  font-family: var(--font-family-tags);
  color: var(--noise-verylight-color);
  text-align: center;
}

.mh-trackedfx-item {
  border: 2px solid #afafaf;
  padding: 5px;
  border-radius: 6px;
  background-color: #0a314b;
}

.mh-trackedfx-name {
  font-weight: 900;
  font-style: oblique;
  /* text-shadow: var(--effects-color1) 0px 0px 5px; */
  font-size: 1.1em;
  text-transform: uppercase;
  color: var(--effects-color1)
}

.mh-trackedfx-description {
  font-weight: 400;
  color: var(--noise-verylight-color);
  font-style: oblique;
  /* text-shadow: var(--effects-color1) 0px 0px 5px; */
  font-size: 1.0em;
  text-transform: uppercase;
}

.mh-trackedfx-tags {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  font-style: italic;
  color: var(--effects-color3);
  width: 100%;
  background-color: #7e98b3a9;
  border-top: 1px solid var(--outcome-text-color);
  border-bottom: 1px solid var(--outcome-text-color);
  height: 40px;
  gap: 0px 2px;
  margin: 5px 0;
  font-family: var(--font-family-effects);
}

.mh-trackedfx-cost {
  text-align: center;
  font-family: var(--font-family-tags);
  font-size: 0.9em;
  padding-top: 3px;
}

.mh-trackedfx-row-break {
  display: none;
}

.mh-trackedfx-container {
  display: flex;
  flex-wrap: wrap;
}

.mh-trackedfx-item {
  width: 100%;
  box-sizing: border-box;
}

.double-ones::after {
  content: "Snake Eyes!";
  display: block; /* Ensures it appears as its own line */
  font-size: 1.1rem;
  width: 100%;
  text-align: center;
  color: whitesmoke;
  font-weight: bold;
  font-family: var(--font-family-main1);
  text-shadow: var(--destroyed-tag-color) 1px 1px 6px;
}

.double-sixes::after {
  content: "Boxcars!";
  display: block;
  font-size: 1.1rem;
  width: 100%;
  text-align: center;
  color: whitesmoke;
  font-weight: bold;
  font-family: var(--font-family-main1);
  text-shadow: var(--effects-color1) 1px 1px 6px;
}

.outcome-fail-double-ones {
  text-shadow: var(--destroyed-tag-color) -3px 3px 15px;
}

.outcome-success-double-sixes {
  text-shadow: var(--effects-color1) -3px 3px 15px;
}

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

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

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

/* General styling for the essence section */
.section.otherscape {
  border-radius: 8px;
  margin: 15px 0;
  color: whitesmoke;
}

.mh-essence-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  font-family: var(--font-family-move);
  font-size: 1.3rem;
  margin: 4px 2px;
  padding: 2px;
  font-style: italic;
  white-space: nowrap;
}

.mh-essence-subheader {
  font-family: var(--font-family-main1);
  font-weight: bold;
  font-size: 0.95rem;
  text-align: center;
}

.mh-essence-subheader span {
  font-weight: normal;
  font-size: 0.85rem;
}

.mh-essence-text {
  font-family: var(--font-family-main1);
  font-size: 0.80rem;
  text-transform: uppercase;
  line-height: 1.2rem;
  text-align: justify;
  font-style: italic;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Essence-specific styles */
.mh-essence-title.nexus {
  color: whitesmoke;
  text-shadow: white 2px 2px 5px;
}

.mh-essence-title.spiritualist {
  color: var(--mythos-dark-color);
  text-shadow: var(--self-dark-color) 1px 1px 7px;
}

.mh-essence-title.cyborg {
  color: var(--self-dark-color);
  text-shadow: var(--noise-dark-color) 1px 1px 7px;
}

.mh-essence-title.transhuman {
  color: var(--noise-dark-color);
  text-shadow: var(--mythosOS-dark-color) 1px 1px 7px;
}

.mh-essence-title.real {
  color: var(--self-dark-color);
  text-shadow: var(--self-dark-color) 2px 2px 6px;
}

.mh-essence-title.avatar-conduit {
  color: var(--mythos-dark-color);
  text-shadow: var(--mythosOS-dark-color) 2px 2px 6px;
}

.mh-essence-title.singularity {
  color: var(--noise-dark-color);
  text-shadow: var(--noise-dark-color) 2px 2px 6px;
}

.mh-essence-title.city-of-mist {
  background-color: #555;
  padding: 4px 2px;
}

.mh-essence-chart{
  float: left;
  width: 75px;
  height: 75px;
  margin: 0 5px 5px 0;
}

.mh-essence-chart img{
  border: none;
}

/*Roll icons*/
.mhr-icon.Self {
  background-image: url('../ui/icons/self_os_icn.svg');
  width: 20px;
  height: 20px;
}

.mhr-icon.Mythos {
  background-image: url('../ui/icons/mythos_os_icn.svg');
  width: 20px;
  height: 20px;
}

.mhr-icon.Noise {
  background-image: url('../ui/icons/noise_os_icn.svg');
  width: 20px;
  height: 20px;
}

.mh-dropshadow-Self{
  filter: drop-shadow(2px 2px  var(--self-dark-color));
}

.mh-dropshadow-Noise{
  filter: drop-shadow(1px 1px var(--noise-dark-color));
}

.mh-dropshadow-Mythos{
  filter: drop-shadow(2px 2px var(--mythosOS-dark-color));
}

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

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

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

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

/* Label under the boxes */
.mh-resource-label {
  font-family: var(--font-family-main1);
  text-transform: uppercase;
  margin-top: 3px;
  font-size: 0.8em;
  text-align: center;
  color: var(--effects-color3);
}

.mh-improvement-marker {
  display: flex;
  align-items: center;
  text-align: right;
  color: whitesmoke;
  font-weight: bold;
  margin-left: 5px; 
  display: inline-block;
}

.mh-improvement-marker i {
  vertical-align: middle;
  align-self: center;
  font-size: 0.70rem;
  line-height: 1; 
  transform: translateY(0px);
}

.mh-improvement-marker.Self i {
  transform: translateY(-3px);
}