@import url('https://fonts.googleapis.com/css2?family=Special+Elite&family=Delicious+Handrawn&family=Freckle+Face&family=Jolly+Lodger&family=Loved+by+the+King&family=Manufacturing+Consent&family=New+Tegomin&family=Pirata+One&family=Candal&family=Yuji+Mai&display=swap');

@font-face {
  font-family: 'Ghastly Panic';
  font-weight: 400;
  font-style: normal;
  src:
    local('Ghastly Panic'),
    url('https://fonts.cdnfonts.com/s/3399/Ghastly Panic.woff2') format('woff2'),
    url('https://fonts.cdnfonts.com/s/3399/Ghastly Panic.woff') format('woff');
}

.ui-dialog .tab-content .charsheet .font-ghastly-panic {
  font-family: 'Ghastly Panic', sans-serif;
  font-size: 3rem;
  font-style: normal;
  font-synthesis: none;
  font-weight: 400;
  letter-spacing: 4px;
  line-height: 3rem;
  padding: 5px 3px 5px 8px;
  text-shadow: 0 0 0 #000, 0 0 0 #000;
}

.ui-dialog .tab-content .charsheet .font-jolly-lodger {
  font-family: "Jolly Lodger", system-ui;
  font-size: 2rem;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet .font-manufacturing-consent {
  font-family: "Manufacturing Consent", system-ui;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet .font-new-tegomin {
  font-family: "New Tegomin", serif;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet .font-pirata-one {
  font-family: "Pirata One", system-ui;
  font-size: 1.5rem;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet .font-special-elite {
  font-family: "Special Elite", system-ui;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet .font-yuji-mai {
  font-family: "Yuji Mai", serif;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet .font-loved {
  font-family: "Loved by the King", cursive;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet .font-candal {
  font-family: "Candal", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet .font-freckle-face {
  font-family: "Freckle Face", system-ui;
  font-weight: 400;
  font-style: normal;
}

.ui-dialog .tab-content .charsheet *,
.ui-dialog .tab-content .charsheet *::before,
.ui-dialog .tab-content .charsheet *::after {
  box-sizing: border-box;
}

.ui-dialog .characterviewer {
  padding-inline: 4px;
}

.ui-dialog .tab-content .charsheet {
  padding: 0;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet {
  background-color: #222;
  color: #c1c1c1;
}

.ui-dialog .tab-content .charsheet .wrapper {
  container-type: inline-size;
  max-width: 1280px;
  overflow-x: clip;
  position: relative;
}

.ui-dialog .tab-content .charsheet .wrapper .show-creature:not(:checked) ~ .show-creature {
  display: none;
}

.ui-dialog .tab-content .charsheet .show-creature:checked ~ .show-creature {
  display: grid;
  grid-template-columns: 1fr 2fr;
  outline: 2px solid #000;
  outline-offset: -2px;
  padding-right: 1em;
  width: fit-content;
}

.ui-dialog .tab-content .charsheet .wrapper .show-creature:checked ~ .show-pc {
  display: none;
}

/* set min/max width for show-creature */
@media (max-width: 635px) {
  .ui-dialog .tab-content .charsheet .wrapper:has(.show-creature:checked) {
    min-width: 634px;
  }
}

@media (min-width: 959px) {
  .ui-dialog .tab-content .charsheet .wrapper:has(.show-creature:checked) {
    max-width: 960px;
  }
}

/* collapse sheet for smaller viewports */
@container (max-width: 858px) {
  .ui-dialog .tab-content .charsheet .wrapper .show-creature:not(:checked) ~ .small-nav {
    grid-template-rows: 2.25em;
  }
  .ui-dialog .tab-content .charsheet .wrapper .show-pc {
    grid-template-columns: minmax(442px, 56%) auto;
    overflow-y: visible;
    & .col1 {
      & .col1-a {
        background-color: #eb3143;
        border-top: 3em solid #eb3143;
        min-width: 160px;
      }
      & .col1-a > section {
        z-index: 3;
      }
      & section.name,
        section.nickname,
        section.class {
          max-width: clamp(90%, 19.875vw, 16em);
      }
      & .col1-footer {
        margin-left: 1.5em;
      }
      & .header-left {left:-3em;}
      & .swiftness, .spirit, .vigor, .resilience, .honour {margin-right: -8%;}
      & .honour {left: -6em;}
    }
    & .col1-b {
      min-width: 235px;
      z-index: 1;
      & .logo {transform: scale(.93);}
      & .resilience::after {min-width: 17em;}
    }
    & .col2 {
      background-color: #fff;
      background-image: linear-gradient(to right, #efefef, #fff);
      border-top-width: 3em;
      min-width: 442px;
      padding-top: 3em;
      & .weapons {
        margin-top: -3em;
        & .weapons-grid {
          max-width: 95%;
        }
      }
      & .legal-gutter {
        position: relative;
        top: -3em;
      }
    }
  }

  .sheet-darkmode .ui-dialog .tab-content .charsheet .wrapper .page-view ~ .show-pc {
    & .col1 {
      & .col1-b {
          background-color: #222;
          color: #c1c1c1;
      }
    }
    & .col2,
      .legal-gutter {
        background-color: #222;
        background-image: none;
        color: #c1c1c1;
    }
  }

  /* sheet left */
  .charsheet .wrapper .page-view[value="0"]:checked ~ .show-pc {
    & .col1 {
      z-index: 1;
      & .col1-b {
        background-color: #fff;
        box-shadow: 2px 0 1px 1px #000;
      }
    }
    & .col2 {
      border-color: transparent;
      box-shadow: none;
      margin-left: calc(100% - 442px);
      filter: brightness(0.25) blur(3px);
      outline: 1px solid #333;
      pointer-events: none;
      z-index: 0;
    }
  }

  /* sheet right */
  .charsheet .wrapper .page-view[value="1"]:checked ~ .show-pc {
    & .col1 {
      filter: brightness(0.25) blur(3px);
      outline: 1px solid #333;
      pointer-events: none;
    }
    & .col2 {
      box-shadow: -5px 2px 5px 0 #000;
      margin-left: calc(100% - 442px);
      z-index: 3;
    }
  }
}

@container (max-width: 456px) {
  .ui-dialog .tab-content .charsheet .wrapper .show-pc {
    & .col1 {
      & .col1-b {box-shadow: none;}
    }
    & .col2 {box-shadow: none;}
  }
}

.ui-dialog .tab-content .charsheet .show-pc,
.ui-dialog .tab-content .charsheet .show-creature {
  background-image: linear-gradient(to right, #efefef, #fff);
  display: grid;
  font-size: 1.2rem;
  grid-template-areas: "col1  col2";
  grid-template-columns: 49% auto;
  overflow: clip;
  position: relative;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .show-pc,
.sheet-darkmode .ui-dialog .tab-content .charsheet .show-creature {
  background-color: #363636;
  background-image: none;
  color: #c1c1c1;
}

.ui-dialog .tab-content .charsheet .show-pc .col2::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_header_right.webp');
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 250px 48px;
  content: '';
  height: 4em;
  position: absolute;
  top: -3em;
  width: 100%;
}

.ui-dialog .tab-content .charsheet .show-creature::after {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_header_right.webp');
  background-position: 0 0;
  background-repeat: repeat-x;
  background-size: 250px 78px;
  content: '';
  height: 7em;
  position: absolute;
  top: -3em;
  width: 100%;
}

.ui-dialog .tab-content .charsheet .show-creature .col2::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_logo_small.webp');
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 5em;
  left: 36%;
  position: absolute;
  top: -3em;
  width: 11em;
}

.ui-dialog .tab-content .charsheet .show-creature::after {
  top: 0;
  width: 100%;
  z-index: 1;
}

/* shown at smaller viewport size */
.charsheet .small-nav {
  background-color: #eb3143;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 0em;
  overflow: clip;
  place-items: center;
  position: relative;
  transform-origin: top;
  transform: scale(1);
  transition: grid-template-rows .4s ease-in-out, transform .3s ease-in-out;
  z-index: 4;
}

.ui-dialog .tab-content .charsheet .wrapper .small-nav:hover,
.ui-dialog .tab-content .charsheet .wrapper .small-nav:focus,
.ui-dialog .tab-content .charsheet .wrapper .small-nav:focus-within {
  transform: scale(1.5);
}

.charsheet .small-nav label {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 100%;
}

.charsheet .small-nav label span {
  color: #000;
  font-size: 2.5rem;
  padding: 4px 0px 4px 4px;
}

.charsheet .page-view[value="0"]:checked ~ .small-nav label span::before {
  content: "►";
}

.charsheet .page-view[value="1"]:checked ~ .small-nav label span::before {
  content: "◄";
}

.charsheet .page-view[value="0"]:checked ~ .small-nav label:hover span {
  text-shadow: 2px 0 0px #FFF !important;
}

.charsheet .page-view[value="1"]:checked ~ .small-nav label:hover span {
  text-shadow: -2px 0px 0px #FFF !important;
}

.charsheet .page-view[value="0"] ~ .small-nav label,
.charsheet .page-view[value="1"] ~ .small-nav label {
  display: flex;
}

.charsheet .page-view[value="0"]:checked ~ .small-nav label:has(input:checked),
.charsheet .page-view[value="1"]:checked ~ .small-nav label:has(input:checked) {
  display: none;
}

.charsheet .col1,
.charsheet .col1-a,
.charsheet .col1-b,
.charsheet .col2 {
  align-content: start;
  display: grid;
  height: 100%;
  position: relative;
}

.charsheet .col1 {
  align-items: self-start;
  display: grid;
  grid-area: col1;
  grid-template-areas: "col1-a col1-b";
  grid-template-rows: 100%;
  filter: brightness(1) blur(0px);
  transition: filter 0.5s ease-in-out;
  z-index: 0;
}

.charsheet .show-creature .col1 {
  z-index: 2;
}

.charsheet .col2 {
  border-top: 3em solid #000;
  filter: brightness(1) blur(0px);
  grid-area: col2;
  margin-inline: auto;
  row-gap: 10px;
  transition: filter 0.5s ease-in-out;
  z-index: 0;
  grid-template-areas:
    "weapons      weapons      legal"
    "battle       battle       legal"
    "armour       armour       legal"
    "equipment    equipment    legal"
    "tenets       hp-box       legal"
    "tenets       hp-box2      legal";
}

.charsheet .show-creature .col2 {
  grid-template-areas: "weapons weapons"
    "battle battle"
    "armour hp-box";
  width: 100%;
  z-index: 2;
}

.charsheet .col1-a {
  align-items: self-start;
  border-top: 3em solid #eb3143;
  color: #fff;
  grid-area: col1-a;
  grid-template-rows: min-content min-content min-content min-content min-content min-content 1fr min-content;
  padding: 0 0 0 2em;
  min-width: 210px;
  row-gap: 1em;
  grid-template-areas: "header-left"
    "name"
    "nickname"
    "class"
    "description"
    "features"
    "texts"
    "footer";
}

.charsheet .show-creature .col1-a {
  border-top: 0;
  grid-template-rows: auto;
  padding-top: .75em;
  grid-template-areas:
    "name"
    "description"
    "features";
}

.charsheet .col1-a::before {
  background-color: #eb3143;
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_col_1.webp');
  background-repeat: repeat-y;
  background-size: 200px 600px;
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
  /* z-index: 1; */
}

.charsheet .col1-a > section {
  z-index: 1;
}

.charsheet .col1-b {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_trunk.webp');
  background-position: 0 -110px;
  background-repeat: repeat-y;
  background-size: 104PX 600PX;
  border-top: 3em solid #000;
  grid-area: col1-b;
  justify-items: center;
  grid-template-areas:
    "logo"
    "swiftness"
    "spirit"
    "vigor"
    "resilience"
    "honour";
}

.charsheet .legal-gutter {
  grid-area: legal;
  padding-top: 1em;
}

.charsheet .legal-margin {
  font-size: .9rem;
  text-align: center;
  text-orientation: upright;
  white-space: nowrap;
  writing-mode: sideways-lr;
}

.charsheet .header-left {
  background-color: #eb3143;
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_header_left.webp');
  background-position: top right;
  background-repeat: no-repeat;
  grid-area: header-left;
  height: 5em;
  left: -9px;
  max-width: 286px;
  position: absolute;
  top: -35.5px;
  width: clamp(180px, 22vw, 100%);
  /* z-index: 1; */
}

.charsheet .col1-a .section-header {
  color: #fff;
  text-shadow: 1px 1px 1px #111;
}

.charsheet .name {grid-area: name;}
.charsheet .nickname {grid-area: nickname;}
.charsheet .class {grid-area: class;}

.ui-dialog .tab-content .charsheet section.name,
.ui-dialog .tab-content .charsheet section.nickname,
.ui-dialog .tab-content .charsheet section.class {
  align-items: baseline;
  display: inline-grid;
  grid-template-columns: 1.75em 1fr 1fr;
  justify-content: left;
  line-height: normal;
  margin-inline: auto;
  margin-left: 0;
  max-width: 24em;
  position: relative;
  width: 100%;
}

.ui-dialog .charsheet .col1-a .name input[type="text"],
.ui-dialog .charsheet .col1-a .nickname input[type="text"],
.ui-dialog .charsheet .col1-a .name input[type="text"],
.ui-dialog .charsheet .col1-a .nickname input[type="text"],
.ui-dialog .charsheet .col1-a .class input[type="text"] {
  margin-inline: 0;
}

.ui-dialog .charsheet .name-style {
  transform: scaleY(1.25);
  color: #fff;
  text-shadow: 1px 1px 1px #111;
}

.ui-dialog .charsheet .class-column-one {
  grid-row: 1/3;
  padding: 0;
  position: relative;
  top: 1px;
}

.charsheet .description {
  grid-area: description;
  width: calc(100% + 1em);
  z-index: 1;
}

.charsheet .features {
  grid-area: features;
  width: calc(100% + 1em);
  z-index: 1;
}

.ui-dialog .tab-content .charsheet  .show-creature .name,
.ui-dialog .tab-content .charsheet  .show-creature .description,
.ui-dialog .tab-content .charsheet  .show-creature .features {
  min-width: 95%;
  width: calc(100% - 1em);
}

.ui-dialog .tab-content .charsheet .texts {
    grid-area: texts;
    margin: 1em -5em 0 -2em;
    max-width: 360px;
    min-width: 280px;
    z-index: 2;
}

.ui-dialog .charsheet .kamis-style {
  font-family: "Pirata One";
  font-size: 1.75rem;
  font-weight: normal;
  line-height: 1.75rem;
}

.charsheet .texts > div:first-child {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_texts_top.webp');
  background-repeat: no-repeat;
  background-size: 100% 9em;
  margin: 0;
  padding: 3em 1em 0 2em;
  position: relative;
}

.ui-dialog .tab-content .charsheet .texts .repcontainer[data-groupname="repeating_texts"] .repitem {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_texts_middle.webp');
  background-repeat: round;
  background-size: 100% 100%;
  margin: 0;
  padding: .25em 1.75em .25em 1.75em;
  position: relative;
}

.ui-dialog .tab-content .charsheet .texts .repcontainer[data-groupname="repeating_texts"] + .repcontrol {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_texts_bottom.webp');
  background-repeat: no-repeat;
  background-size: 100% 5em;
  height: 5em;
  margin: 0;
  padding: .5em 2em 0 2em;
  position: relative;
}

.ui-dialog .charsheet .texts-style {
  color: revert;
  display: block;
  font-family: 'Loved by the King';
  font-size: 2.5rem;
  line-height: 4rem;
  padding: 0 2px 0 2px;
  text-shadow: none;
}

.ui-dialog .tab-content .charsheet .texts .section-notes:not(:last-child) {
  color: #111;
}

.ui-dialog .tab-content .charsheet .repcontainer[data-groupname="repeating_texts"] .repitem .flex-row {
  border-top: 1px solid #111;
}

.charsheet .col1-footer {
  align-self: end;
  display: grid;
  grid-area: footer;
  margin-bottom: 10px;
  margin-inline: auto;
  max-width: 95%;
}

.ui-dialog .tab-content .charsheet .col1-footer button[type="roll"]:hover {
  background-color: #111;
  color: #fff;
  outline: 1px solid #111;
}

.charsheet .credits {
  aspect-ratio: 3;
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/mork_borg.webp');
  background-repeat: no-repeat;
  background-size: contain;
  height: 50px;
  margin-top: 2px;
}

.charsheet .virtues {
  bottom: -4px;
  display: grid;
  grid-template-columns: auto auto;
  margin: auto;
  position: relative;
  right: -4em;
}

.ui-dialog .charsheet .virtues .virtues-box {
  position: absolute;
  top: -3em;
  right: -2.5em;
}

.ui-dialog .charsheet .virtues .virtues-box button[type="roll"] {
  background-color: transparent;
  background-image: none;
  border: none;
  box-shadow: none;
  position: relative;
  transform: rotate(30deg);
  z-index: 2;
}

.ui-dialog .charsheet .virtues-style {
  color: #fff;
  font-family: 'Freckle Face';
  font-size: 2rem;
  font-weight: normal;
  line-height: 3rem;
  letter-spacing: 1px;
  text-shadow: 1px 2px 1px #000;
  transform: scaleY(1.75);
}

.ui-dialog .charsheet .die-style {
  font-family: 'Manufacturing Consent';
  font-size: 2rem;
  font-weight: normal;
}

.ui-dialog .charsheet .swiftness {
  grid-area: swiftness;
  z-index: 1;
}

.ui-dialog .charsheet .swiftness > button {
  transform: rotate(6deg);
}

.ui-dialog .charsheet .swiftness .ability-base-mod::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ability_fields_swiftness.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 3.75em;
  position: absolute;
  top: -4px;
  left: -15px;
  width: 6em;
}

.charsheet .spirit {grid-area: spirit;}

.charsheet .spirit > button {
  transform: rotate(4deg);
}

.ui-dialog .charsheet .spirit .ability-base-mod::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ability_fields_spirit.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 4.2em;
  position: absolute;
  top: -6px;
  left: -8px;
  width: 5em;
}

.charsheet .vigor {grid-area: vigor;}

.ui-dialog .charsheet .vigor .ability-base-mod::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ability_fields_vigor.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 4.5em;
  position: absolute;
  top: -6px;
  left: -8px;
  width: 5em;
}

.charsheet .resilience {grid-area: resilience;}

.charsheet .resilience > button {
  transform: rotate(2deg);
}

.ui-dialog .charsheet .resilience .ability-base-mod::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ability_fields_resilience.webp');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: '';
  height: 5em;
  position: absolute;
  top: -6px;
  left: -8px;
  width: 5em;
}

.charsheet .swiftness::after {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_red_branches_swiftness.webp');
  background-repeat: no-repeat;
  background-size: clamp(13.75em, 18vw, 19em) 3em;
  content: '';
  display: inline-flex;
  height: 3em;
  left: 0;
  margin: 1.5em 0 0 4.7em;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.charsheet .spirit::after {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_red_branches_spirit.webp');
  background-repeat: no-repeat;
  background-size: clamp(13.75em, 18vw, 19em) 3em;
  content: '';
  display: inline-flex;
  height: 3em;
  left: 0;
  margin: -.5em 0 0 4em;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.charsheet .vigor::after {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_red_branches_vigor.webp');
  background-repeat: no-repeat;
  background-size: clamp(13.75em, 18vw, 19em) 3em;
  content: '';
  display: inline-flex;
  height: 3em;
  left: 0;
  margin: -.5em 0 0 3.25em;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.charsheet .resilience::after {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_dashed_line.webp');
  background-size: cover;
  content: '';
  display: inline-flex;
  height: 2em;
  left: 0;
  margin: 1em 0 0 4.5em;
  min-width: clamp(14em, calc(100% - 6vw), 15.5em);
  position: absolute;
}

.charsheet .honour {
  display: inline-flex;
  grid-area: honour;
  left: -5em;
  top: 3em;
  position: relative;
  z-index: 1;
}

.charsheet .honour-grid {
  column-gap: clamp(2px, calc(2vw - 18px), 8px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-inline: auto;
  position: relative;
  row-gap: clamp(16px, calc(2vw - 4px), 21px);
  top: 1em;
}

.ui-dialog .tab-content .charsheet .honour .honour-grid label {
  height: 18px;
  margin: auto;
  padding: 0;
  position: relative;
  width: 20px;
  margin-inline: 3px;
}

.ui-dialog .charsheet .honour-style {
  display: flex;
  font-size: 2.25rem;
  margin-inline: auto;
  position: absolute;
  right: -1.15em;
  top: 8px;
  transform: scaleY(1.75);
  width: min-content;
}

.ui-dialog .charsheet .honour::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_kanji.webp');
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  display: inline-flex;
  height: 34px;
  left: 66%;
  position: absolute;
  top: 5px;
  width: 25px;
  z-index: 1;
}

.ui-dialog .charsheet .honour-grid label:first-child,
.ui-dialog .charsheet .honour-grid label:nth-child(10) {
  grid-column: 1/-1;
}

.ui-dialog .tab-content .charsheet .honour .honour-grid label:last-child {
  grid-column: span 2;
  margin-left: 8px;
}

.ui-dialog .charsheet .honour-grid label:first-child::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_1_image.webp');
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 39px;
  left: clamp(21px, calc(2.5vw), 30px);
  position: absolute;
  top: -15px;
  width: 30px;
}

.ui-dialog .charsheet .honour-grid label:nth-child(10)::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_10_image.webp');
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 38px;
  left: clamp(21px, calc(2.5vw), 30px);
  position: absolute;
  top: -12px;
  width: 32px;
}

.ui-dialog .charsheet .honour-grid label:nth-child(20)::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_20_image.webp');
  background-repeat: no-repeat;
  background-size: cover;
  content: '';
  height: 36px;
  left: clamp(17px, calc(2vw), 26px);
  position: absolute;
  top: -7px;
  width: 34px;
}

.sheet-darkmode .charsheet .honour-grid label:first-child::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_1_image_darkmode.webp');
}

.sheet-darkmode .charsheet .honour-grid label:nth-child(10)::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_10_image_darkmode.webp');
}

.sheet-darkmode .charsheet .honour-grid label:nth-child(21)::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_honour_20_image_darkmode.webp');
}

.charsheet .woes {
  align-content: end;
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_woes.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 0;
  bottom: -1px;
  color: #fff;
  grid-area: woes;
  left: 0;
  margin: 0 0 0 2em;
  min-height: 10em;
  padding: 0 0 .5em 1.2em;
  position: absolute;
  width: 20em;
  z-index: 1;
}

.charsheet .weapons {
  grid-area: weapons;
  z-index: 1;
}

.charsheet .weapons-grid {
  display: grid;
  grid-template-columns: minmax(9em, 2fr) minmax(4em, 1fr) minmax(5em, 1fr) 3em minmax(min-content, auto);
  grid-template-rows: 4.5em 2em 2em auto;
  margin-inline: auto;
  max-width: 95%;
  place-items: center;
  position: relative;
}

.charsheet .show-creature .weapons-grid {
  column-gap: 4px;
  grid-template-columns: minmax(12em, 3fr) minmax(4em, 1fr) minmax(5em, 1fr) minmax(4em, 1fr) minmax(7.5em, 1fr);
  grid-template-rows: auto;
  margin-inline: 1em;
  margin-top: 3em;
  min-width: fit-content;
}

.charsheet .weapons-grid .sword-image {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_sword.webp');
  background-repeat: no-repeat;
  background-size: 95% 100%;
  background-position: center;
  height: 2.85em;
  left: 1em;
  max-width: 38em;
  position: relative;
  width: 100%;
}

.ui-dialog .charsheet .dueling-style {
  font-family: "Special Elite";
  font-weight: normal;
  padding-top: 2px;
}

.charsheet .weapons-grid .column-header {
  display: inline-block;
  font-size: 1.5rem;
  font-variant-caps: all-petite-caps;
  font-weight: normal;
}

.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem .weapon-type:not(:checked) + .show-ranged {
  display: none;
}

.ui-dialog .tab-content .charsheet .weapon-type:checked + .show-ranged {
  display: grid;
  grid-template-rows: 2rem;
  left: -2em;
  margin-top: -3px;
  position: relative;
  transform: scale(.85);
  transform-origin: right;
}

.ui-dialog .tab-content .charsheet .show-ranged label {
  align-content: center;
  display: inline-block;
  margin-inline: auto;
  padding-inline: 2px;
  width: min-content;
}

.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer,
.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem,
.ui-dialog .tab-content .charsheet .weapons-grid .repcontainer .repitem .weapons-grid-row {
  display: grid;
  grid-column: 1/-1;
  grid-template-columns: subgrid;
}

.ui-dialog .tab-content .charsheet .weapons-grid .repcontrol {
  grid-column: 1/-1;
  width: 100%;
}

.ui-dialog .tab-content .charsheet .weapons-grid select {
  font-size: 1.2rem;
  font-weight: normal;
}

.charsheet .weapons-grid button span {
  font-size: 1.3rem;
  font-weight: 700;
}

.ui-dialog .charsheet .weapon-notes-style {
  color: #c1c1c1;
  column-gap: 2px;
  display: inline-grid;
  grid-template-columns: repeat(6, min-content);
  justify-content: center;
  margin-inline: auto;
  position: absolute;
  top: -1.65em;
  width: 102%;
}

.ui-dialog .tab-content .charsheet .weapon-notes-style label input[type="checkbox"] {
  display: none;
}

.ui-dialog .tab-content .charsheet .weapon-notes-style label {
  align-items: center;
  display: inline-flex;
  height: 1.85rem;
  justify-content: center;
  z-index: 1;
}

.ui-dialog .tab-content .charsheet .weapon-notes-style label span {
  align-items: center;
  color: #c1c1c1;
  display: inline-flex;
  font-size: 1.2rem;
  font-weight: normal;
  white-space: nowrap;
}

.ui-dialog .tab-content .charsheet .show-creature-style {
  position: absolute;
  right: 4px;
  z-index: 3;
}

.ui-dialog .tab-content .charsheet .wrapper .show-creature-style input[type="checkbox"] {
  display: block;
  height: 1.2em;
  left: -1em;
  margin-inline: 2px;
  opacity: 0;
  position: absolute;
  top: 0;
  width: 8em;
}

.ui-dialog .tab-content .charsheet .show-creature-style label {
  display: inline-flex;
}

.ui-dialog .tab-content .charsheet .show-creature-style label span {
  padding-inline: 1px;
}

.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked) .pc-sheet,
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input) .pc-sheet + span,
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)) .creature-sheet {
  background-color: transparent;
  color: #c1c1c1;
  font-size: 1rem;
  opacity: .5;
  transform: scale(1);
  transition: transform .2s ease-in-out;
}

.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)) .pc-sheet,
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked) .creature-sheet {
  background-color: transparent;
  color: #fff;
  font-size: 1rem;
  opacity: 1;
  padding-inline: 5px;
  transform: scale(1.1);
}

.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:not(:checked)):hover .creature-sheet,
.ui-dialog .tab-content .charsheet .wrapper .show-creature-style label:has(input:checked):hover .pc-sheet {
  background-color: transparent;
  color: #eb3143;
  opacity: 1;
  transform: scale(1.1);
}

.ui-dialog .charsheet .weapon-style {
  bottom: -1rem;
  font-family: 'Jolly Lodger';
  font-size: 3rem;
  font-style: italic;
  font-weight: normal;
  letter-spacing: 2px;
  margin-inline: auto;
  position: relative;
  top: 12%;
  left: 18%;
  transform: rotate(-5deg);
}

.ui-dialog .charsheet .show-creature .weapon-style {
  left: auto;
  top: 0;
  transform: none;
}

.charsheet .weapon-actions {
  column-gap: 2px;
  display: flex;
}

.charsheet .battle {
  display: inline-flex;
  flex-wrap: wrap;
  grid-area: battle;
  line-height: 2;
  margin-inline: auto;
  max-width: 376px;
  padding: 0 10px 5px 10px;
  position: relative;
  text-align: center;
  top: -5px;
  z-index: 1;
}

.ui-dialog .charsheet .defence-style {
  font-family: 'New Tegomin';
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 0 0 3px 0;
}

.charsheet .armour {
  align-items: center;
  column-gap: 5px;
  display: grid;
  grid-area: armour;
  grid-template-columns: min-content minmax(15em, 20em) minmax(1em, 3em) 8em;
  grid-template-rows: 4em 1.2em 1.2em;
  padding-block: 1em;
  position: relative;
}

.charsheet .show-creature .armour {
  grid-template-columns: minmax(10em, min-content) minmax(10em, auto);
  grid-template-rows: 3em 2em 3em;
  margin-inline: auto;
  margin-left: 0;
  padding: 0 2em 0 0;
  width: 100%;
  justify-items: end;
}

.charsheet .show-creature .armour .span-2 {
  align-items: center;
  display: inline-flex;
  margin-inline: auto;
  margin-right: 0;
}

.charsheet .show-creature .armour-tier-grid {
  left: 0;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 15em;
}

.charsheet .armour .section-notes {
  padding-left: 3em;
  white-space: nowrap;
}

.charsheet .show-pc .armour::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_kusarigama.webp');
  background-repeat: no-repeat;
  background-size: 100% 17em;
  content: '';
  display: block;
  height: 17em;
  left: 1em;
  max-width: 49em;
  position: absolute;
  top: -7em;
  width: 97%;
}

.sheet-darkmode .charsheet .armour::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_kusarigama_darkmode.webp');
}

.ui-dialog .charsheet .armour-style {
  font-family: 'Pirata One';
  font-size: 3rem;
  font-weight: normal;
  left: 1em;
  position: relative;
  width: min-content;
}

.ui-dialog .charsheet .show-creature .armour-style {
  left: 0;
}

.ui-dialog .tab-content .charsheet label:has(.damaged-style) {
  display: inline-flex;
  width: 5.5em;
  white-space: nowrap;
  z-index: 1;
}

.ui-dialog .tab-content .charsheet .damaged-style {
  font-family: 'Loved by the King';
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 1px;
  line-height: 1.5rem;
  padding-top: 2px;
}

.charsheet .equipment {
    border: 12px solid transparent;
    border-top: 12px;
    display: grid;
    grid-area: equipment;
    grid-template-columns: minmax(5em, 1fr) minmax(10em, 3fr) min-content;
    grid-template-rows: 1.25em;
    margin: 4.5em 2% auto auto;
    min-height: 19em;
    outline: 7px solid #333;
    outline-offset: -8px;
    width: 90%;
}

.sheet-darkmode .charsheet .equipment {
  outline-color: #000;
}

.charsheet .equipment-notes {
  left: -6em;
  min-width: 15.75em;
  position: relative;
  text-align: right;
  top: -3.5em;
}

.ui-dialog .charsheet .equipment-style {
  -webkit-text-stroke-color: #000;
  -webkit-text-stroke-width: 1px;
  align-self: center;
  color: #fff;
  font-family: 'Candal';
  font-size: 2.5rem;
  letter-spacing: .4rem;
  margin-left: -1rem;
  position: relative;
  right: -1rem;
  text-shadow: 2px 3px 0 #000;
  top: -1.5em;
  transform: scaleY(1.5);
}

.ui-dialog .tab-content .charsheet .ryo {
  background-color: #eb3143;
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_ryo_background.webp');
  background-repeat: no-repeat;
  background-size: contain;
  border-radius: 40%;
  color: #fff;
  height: 6.25em;
  left: -1.4em;
  outline: 1px solid #fff;
  outline-offset: -4px;
  position: relative;
  top: -1.5em;
  transform: rotateZ(7deg);
  width: 4em;
}

.ui-dialog .charsheet .ryo span,
.ui-dialog .charsheet .ryo span.kanji-text {
  color: #fff;
  font-weight: normal;
}

.charsheet .consumables {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  height: 100%;
  justify-content: center;
  margin: 2em auto auto 2px;
  row-gap: 10px;
  width: 4em;
}

.ui-dialog .tab-content .charsheet .consumables > label {
  border-radius: 50%;
  box-shadow: 2px 1px 2px #eb3143;
  height: 3.5em;
  min-width: 3.5em;
  outline: 2px solid #eb3143;
  outline-offset: 2px;
  padding-top: 4px;
  position: relative;
}

.ui-dialog .tab-content .charsheet .consumables label input.input-width-small {
  font-size: 1.85rem;
  height: auto;
  margin-block: -2px;
  max-width: 32px;
  min-width: auto;
  width: 32px;
}

.charsheet .tenets {
  grid-area: tenets;
  left: .5em;
  margin-inline: auto;
  position: relative;
  top: 2em;
  width: calc(100% - 1vw);
}



.ui-dialog .charsheet .haiku-style {
  font-family: 'Special Elite';
  font-size: 2rem;
  line-height: 2rem;
  padding-top: 5px;
}

.ui-dialog .charsheet .chance-style {
  font-family: 'Jolly Lodger';
  font-size: 2rem;
  font-weight: normal;
  letter-spacing: 1px;
  line-height: 2rem;
  padding: 2px;
}

.ui-dialog .tab-content .charsheet .wrapper .tenets-grid input[type="text"] {
  box-shadow: 0px 2px 2px -2px #000;
  border: none;
  max-width: 90%;
}

.charsheet .hp-box {
  display: grid;
  grid-area: hp-box;
  grid-template-columns: min-content min-content 1fr;
  grid-template-areas:
    "resurrection meditation hpCurrMax"
    "resurrection meditation hpCurrMax"
    "resurrection meditation seppuku";
  padding-inline: 2px;
}

.charsheet .show-creature .hp-box {
  grid-template-areas: none;
  margin: 0 0 .5em -1em;
  position: relative;
}

.charsheet .resurrection {grid-area: resurrection;}
.charsheet .meditation {grid-area: meditation;}

.charsheet .hpCurrMax {
  display: grid;
  grid-area: hpCurrMax;
  grid-template-columns: 1fr 2px 1fr;
  grid-template-rows: 3.25rem 1.25rem 4.5rem auto;
  justify-items: center;
  margin: auto auto 5px auto;
  outline: 4px solid #eb3143;
  padding: 0 0 2px 0;
  width: 12em;
}

.charsheet .hpCurrMax .column-header {
  color: #eb3143;
  margin-inline: -5px;
  letter-spacing: 1px;
}

.ui-dialog .charsheet .red-background,
.ui-dialog .charsheet .red-background span {
  background-color: #eb3143;
  color: #fff;
  overflow: hidden;
  display: inline-flex;
  margin-inline: auto;
}

.ui-dialog .charsheet .hit-points-style {
  transform: scaleY(1.5);
  display: inline-block;
  font-size: 2.25rem;
  font-weight: normal;
  font-family: 'Special Elite';
  max-height: 2.25rem;
  overflow: hidden;
  margin: 3px 0 0 0;
}

.ui-dialog .tab-content .charsheet .infected-style {
  display: block;
  font-size: 1.65rem;
  letter-spacing: 3px;
  margin-block: 1px;
}

.ui-dialog .tab-content .charsheet .seppuku .infected-style {
  transform: scaleY(1.5);
}

.charsheet .hpCurrMax .red-background ~ div {
  margin-block: 1px;
}

.charsheet .seppuku {
  display: grid;
  grid-area: seppuku;
  grid-template-rows: 3rem;
}

.charsheet .seppuku label:first-child::before {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_seppuku_image.webp');
  background-position-y: center;
  background-repeat: no-repeat;
  background-size: 100% 12px;
  content: '';
  height: 21px;
  margin-left: -22px;
  position: absolute;
  width: 12em;
  z-index: 0;
}

.charsheet .seppuku-box {
  margin: auto;
  margin-top: 5px;
  max-width: 12em;
  outline: 1px solid #333;
}

.ui-dialog .tab-content .charsheet input,
.ui-dialog .tab-content .charsheet select {
  background-color: #e6e6e6ab;
  color: #000;
  height: 1.75em;
  margin: 2px;
  padding: 0 2px 0 2px;
  vertical-align: middle;
  width: auto;
  z-index: 0;
}

.ui-dialog .tab-content .charsheet button:focus,
.ui-dialog .tab-content .charsheet input:hover,
.ui-dialog .tab-content .charsheet input:focus,
.ui-dialog .tab-content .charsheet input[type="checkbox"]:hover,
.ui-dialog .tab-content .charsheet input[type="checkbox"]:focus,
.ui-dialog .tab-content .charsheet textarea:hover,
.ui-dialog .tab-content .charsheet textarea:focus,
.ui-dialog .tab-content .charsheet select:hover,
.ui-dialog .tab-content .charsheet select:focus {
  background-clip : border-box;
  background-color: lightgoldenrodyellow;
  box-shadow: 0px 0px 4px #fff;
  color: #111;
  outline: 2px solid #555;
}

.ui-dialog .charsheet input[type="text"] {
  display: inline-flex;
  margin-inline: auto;
  min-width: 3em;
}

.ui-dialog .tab-content .charsheet textarea {
  background-color: #e6e6e6ab;
  color: #000;
  height: 9em;
  margin: auto;
  max-height: 32em;
  min-height: 3em;
  resize: vertical;
  scrollbar-width: thin;
  white-space: normal;
}

.ui-dialog .tab-content .charsheet .repcontainer .repitem {
  display: inline-flex;
  width: 100%;
}

.ui-dialog .tab-content .charsheet .flex-row {
  align-items: center;
  display: flex;
  flex: 1 1 0;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ui-dialog .tab-content .charsheet .flex-row > * {
  margin-inline: 2px;
  margin-block: 2px;
}

.ui-dialog .tab-content .charsheet .flex-inline-row {
  align-items: center;
  display: inline-flex;
  gap: 2px;
  margin: auto;
  padding-bottom: 2px;
  position: relative;
  white-space: nowrap;
  z-index: 1;
}

.ui-dialog .tab-content .charsheet .flex-inline-row > * {
  margin-inline: 2px;
  margin-block: 2px;
}

.ui-dialog .tab-content .charsheet label {
  margin: 0;
  padding: 0;
}

.charsheet label:has(input[type="checkbox"]) span {
  font-family: 'Nunito', serif;
  padding: 0 4px 0 4px;
  vertical-align: middle;
}

.ui-dialog .tab-content .charsheet label:has(button):hover,
.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]):hover,
.ui-dialog .tab-content .charsheet label:has(input[type="radio"]):hover {
  cursor: pointer;
}

.ui-dialog .tab-content .charsheet input[type="radio"] {
  padding: inherit;
}

.ui-dialog .tab-content .charsheet .repitem textarea {
  height: 1.75em;
  line-height: 1.25em;
  max-height: 12em;
  min-height: 1.75em;
  padding: 2px 2px 0 2px;
  resize: vertical;
}


.ui-dialog .tab-content .charsheet button[type="roll"] {
  align-items: center;
  display: inline-flex;
  font-size: 1.2rem;
  font-weight: normal;
  justify-content: center;
  margin: auto;
  padding: 0 2px 0 2px;
}

.ui-dialog .tab-content .charsheet button[type="roll"]:before {
  content: "0";
  display: inline-grid;
  font-family: "dicefontd20";
  font-size: 1.75rem;
}

.ui-dialog .tab-content .charsheet button[type="roll"]:empty {
  display: inline-grid;
  font-size: 1em;
  font-weight: normal;
  margin: auto;
  min-width: 2em;
  outline: 1px solid #333;
  padding: 1px;
}

/* hides the dice image */
.ui-dialog .tab-content .charsheet button[type="roll"]:not(:empty):before {
  content: '';
  display: none;
}

.ui-dialog .tab-content .charsheet input[type="checkbox"] {
appearance: none;
  background: white;
  border-left: 1px solid #eb3143;
  box-shadow: 1px -1px 2px 1px #eb3143;
  border-radius: 3px;
  position: relative;
  height: 15px;
  width: 15px;
  margin: auto;
  outline: none;
  vertical-align: middle;

  &:checked::before {
    align-items: center;
    color: #000;
    content: '*';
    display: flex;
    font-family: 'Pictos';
    font-size: 20px;
    inset: 0;
    justify-content: center;
    position: absolute;
    transform: rotate(17deg);
  }
}

.ui-dialog .tab-content .charsheet input[type="radio"] {
  appearance: none;
  background: white;
  border-radius: 2px;
  position: relative;
  height: 10px;
  width: 10px;
  outline: none;

  &:checked::before {
    align-items: center;
    color: #000;
    content: '*';
    display: flex;
    font-family: 'Pictos';
    font-size: 12px;
    inset: 0;
    justify-content: center;
    position: absolute;
    transform: rotate(17deg);
  }
}

.ui-dialog .tab-content .charsheet select.input-width-small,
.ui-dialog .tab-content .charsheet input[type="text"].input-width-small,
.ui-dialog .tab-content .charsheet input[type="number"].input-width-small {
  text-align: center;
  min-width: 0;
  width: 3em;
}

.ui-dialog .tab-content .charsheet select.input-width-smallest,
.ui-dialog .tab-content .charsheet input[type="text"].input-width-smallest,
.ui-dialog .tab-content .charsheet input[type="number"].input-width-smallest {
  text-align: center;
  min-width: 0;
  width: 2em;
}

.ui-dialog .tab-content .charsheet .ability-input {
  background-clip: text;
  border: none;
  font-size: 2rem;
  font-weight: bold;
  max-width: 2em;
  min-width: 2em;
  text-align: center;
  z-index: 1;
}

.ui-dialog .tab-content .charsheet .hpCurrMax .ability-input {
  background-clip: inherit;
}

.ui-dialog .tab-content .charsheet .ability-mod {
  align-self: center;
  font-size: 1.1rem;
  height: 2.25em;
  min-width: 2.25em;
  padding-right: 4px;
  margin-left: 8px;
}

.ui-dialog .tab-content .charsheet input[type="text"].input-width-medium {
  max-width: 43%;
  min-width: 7em;
}

.ui-dialog .tab-content .charsheet .input-width-medium-stretch {
  max-width: 18em;
  min-width: 11.5em;
  width: 40%;
}

.ui-dialog .tab-content .charsheet input[type="text"].input-width-large {
  max-width: 15em;
  min-width: 10em;
  width: 100%;
}

.ui-dialog .tab-content .charsheet .width-full,
.ui-dialog .tab-content .charsheet .input-width-full,
.ui-dialog .tab-content .charsheet textarea.input-width-full {
  width: 100%;
}

.ui-dialog .tab-content .charsheet .vertical-text {
  display: flex;
  margin: auto;
  margin-top: 0;
  padding-block: 4px;
  padding-inline: 2px;
  text-orientation: upright;
  width: min-content;
  writing-mode: vertical-lr;
}

.charsheet .two-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.charsheet .three-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.charsheet .span-all {
  grid-column: 1/-1;
}

.charsheet .span-2 {
  grid-column: span 2;
}

.charsheet .span-3 {
  grid-column: span 3;
}

.charsheet .span-4 {
  grid-column: span 4;
}

.charsheet .span-5 {
  grid-column: span 5;
}

.charsheet .nowrap {
  white-space: nowrap;
}

.ui-dialog .tab-content .charsheet .left {
  text-align: left;
  margin-inline: auto;
  margin-left: 0;
}

.ui-dialog .tab-content .charsheet .center {
  align-content: center;
  text-align: center;
}

.ui-dialog .tab-content .charsheet .right {
  text-align: right;
}

.charsheet .armour-tier-grid {
  align-content: center;
  column-gap: 5px;
  display: grid;
  font-size: 1rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 3em;
  left: -2.5em;
  position: relative;
  width: 12em;
  z-index: 1;
}

.charsheet .woes-grid {
  display: grid;
  font-size: 1rem;
  gap: 3px;
  grid-template-columns: repeat(auto-fill, minmax(20px, 1fr));
  left: -3em;
  top: -3em;
  position: relative;
  z-index: 1;
}

.ui-dialog .tab-content .charsheet .woes-style {
  font-family: 'Pirata One';
  font-size: 3rem;
  font-weight: normal;
  left: -10px;
  letter-spacing: 2px;
  position: relative;
  top: -24px;
}

.ui-dialog .tab-content .charsheet .woes-grid label {
  margin: auto;
  padding: 0;
  position: relative;
  width: 20px;
}

.ui-dialog .tab-content .charsheet .armour-tier-grid label span {
  color: #333;
  display: flex;
  font-family: 'New Tegomin';
  font-size: 1.2rem;
  height: 23px;
  padding: 1px 2px 0 0;
  place-content: space-evenly;
  position: relative;
  width: 26px;
}

.ui-dialog .tab-content .charsheet .honour-grid label span,
.ui-dialog .tab-content .charsheet .woes-grid label span {
  color: #333;
  display: flex;
  font-family: 'New Tegomin';
  font-size: 1.2rem;
  height: 20px;
  place-content: space-evenly;
  position: relative;
  width: 20px;
}

.ui-dialog .tab-content .charsheet .honour-grid label input,
.ui-dialog .tab-content .charsheet .woes-grid label input {
  -webkit-appearance: none;
  border: 1px solid #8a8a8a;
  border-radius: 50%;
  height: 20px;
  margin: 0;
  outline: 1px solid #000;
  outline-offset: 1px;
  position: absolute;
  width: 20px;
}


.ui-dialog .tab-content .charsheet .armour-tier-grid label input {
  -webkit-appearance: none;
  border: 1px solid #8a8a8a;
  border-radius: 50%;
  height: 23px;
  margin: 0;
  outline: 1px solid #000;
  outline-offset: 1px;
  position: absolute;
  width: 26px;
}

.ui-dialog .tab-content .charsheet .honour-grid label:last-child,
.ui-dialog .tab-content .charsheet .woes-grid label:last-child {
  transform: scale(1.5);
  margin: 4px;
  z-index: 1;
}

.ui-dialog .tab-content .charsheet .woes-grid label:last-child {
  border-radius: 50%;
  bottom: -20px;
  left: -15px;
  margin-inline: 6px 0;
  outline: 1px solid #FFF;
  outline-offset: 2px;
}

.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]:checked) span,
.ui-dialog .tab-content .charsheet label:has(input[type="checkbox"]):hover span,
.ui-dialog .tab-content .charsheet button[type="roll"]:hover,
.ui-dialog .charsheet .virtues:hover .virtues-box button[type="roll"] {
  background-color: #eb3143;
  background-image: none;
  border-color: transparent;
  border-radius: 4px;
  box-shadow: none;
  color: #000;
  outline: none;
  text-shadow: none;
}

.ui-dialog .tab-content .charsheet .weapon-notes-style label:has(input[type="checkbox"]:checked) span {
  background-color: #eb3143;
  outline: none;
}

.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:hover,
.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:hover,
.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:hover {
  background-color: #eb3143;
}

.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:hover + span,
.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:hover + span,
.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:hover + span {
  border-radius: 50%;
  color: #fff;
  font-weight: normal;
}

.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']::before,
.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']::before,
.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']::before {
  border-radius: 50%;
  content: '';
  display: block;
  height: 100%;
}

.ui-dialog .tab-content .charsheet .honour-grid label input[type='radio']:checked + span,
.ui-dialog .tab-content .charsheet .woes-grid label input[type='radio']:checked + span,
.ui-dialog .tab-content .charsheet .armour-tier-grid label input[type='checkbox']:checked + span {
  background-color: #eb3143;
  border-radius: 50%;
  color: #fff;
  font-weight: normal;
  min-height: 21px;
  min-width: 21px;
  outline: 1px solid #fff;
}

.ui-dialog .tab-content .charsheet .armour .armour-tier-grid label input[type='checkbox']:checked + span {
  outline: 3px solid #000;
}

.sheet-darkmode .ui-dialog .tab-content .charsheet .armour .armour-tier-grid label input[type='checkbox']:checked + span {
  outline: 2px solid #fff;
}

.ui-dialog .tab-content .charsheet .honour-grid label:has(~ label input:checked) input:before,
.ui-dialog .tab-content .charsheet .woes-grid label:has(~ label input:checked) input:before,
.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) input:before {
  background-color: #555;
}

.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) input:before {
  height: 23px;
  margin-left: -2px;
  margin-top: -1px;
  outline: 2px solid #000;
  width: 25px;
}

.ui-dialog .tab-content .charsheet .honour-grid label:has(~ label input:checked) span,
.ui-dialog .tab-content .charsheet .woes-grid label:has(~ label input:checked) span,
.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(~ label input:checked) span {
  border-radius: 50%;
  color: #cbcbcb;
  font-weight: normal;
}

.ui-dialog .tab-content .charsheet .armour-tier-grid label:has(input[type="checkbox"]):hover span {
  border-radius: 50%;
}

.charsheet .tenets-grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 2rem 3rem;
  margin: 5px 2px 15px 2px;
  outline: 2px solid #333;
  padding: 5px;
  row-gap: 5px;
}

.sheet-darkmode .charsheet .tenets-grid {
  outline-color: #000;
}

.ui-dialog .charsheet .tenets-style {
  font-family: 'Proxima Nova';
  letter-spacing: 10px;
  font-weight: normal;
  width: 100%;
  display: inline-flex;
  justify-content: center;
}

.charsheet .tenets-grid input[type="text"] {
  text-align: center;
}

.ui-dialog .tab-content .charsheet input.lost-broken {
  position: relative;
}

.ui-dialog .tab-content .charsheet label.lost-broken {
  display: none;
}

.ui-dialog .tab-content .charsheet input.lost-broken:checked + label.lost-broken {
  align-items: center;
  background-color: #eb3143;
  color: #fff;
  display: inline-flex;
  font-size: 1.5em;
  height: 100%;
  margin: auto;
  opacity: .85;
  padding-left: 4px;
  place-content: center;
  position: absolute;
  text-align: left;
  width: 100%;
  z-index: 1;
}

.ui-dialog .tab-content .charsheet .repitem:has(input.lost-broken:checked):hover input.lost-broken:checked {
  z-index: 2;
}

.ui-dialog .tab-content .charsheet input.lost-broken:checked:hover + .lost-broken,
.ui-dialog .tab-content .charsheet input.lost-broken:checked + label.lost-broken:hover {
  opacity: 1;
}

.charsheet .broken-pc:checked ~ .broken-pc {
  align-content: center;
  background-color: #555555;
  display: block;
  min-height: 2em;
  min-width: 8em;
  outline: 2px solid #000;
  width: 100%;
}

.charsheet .warning:checked + input {
  background-color: #eb3143;
  border-radius: 0;
  color: #fff;
  outline: 3px solid #eb3143;
}

.ui-dialog .tab-content .charsheet .weapons .normal-view,
.ui-dialog .tab-content .charsheet .weapons .dueling-view {
  display: none;
}

.charsheet .show-duel:not(:checked) ~ div[data-groupname="repeating_weapons"] .normal-view,
.charsheet .show-duel:checked ~ div[data-groupname="repeating_weapons"] .dueling-view {
  display: block;
  max-width: 11em;
  white-space: nowrap;
}

/* Hide spinners in Firefox */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -moz-appearance: none;
  -webkit-appearance: none;
  margin: 0;
}

.charsheet input:hover::-webkit-outer-spin-button,
.charsheet input:hover::-webkit-inner-spin-button,
.charsheet input:focus::-webkit-outer-spin-button,
.charsheet input:focus::-webkit-inner-spin-button {
  appearance: textfield;
  -moz-appearance: auto;
  /* Restore default appearance on focus */
}

.charsheet select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-align: center;
}

/* repeating row controls */
.ui-dialog .tab-content .charsheet .repcontainer .repitem,
.ui-dialog .tab-content .charsheet .repcontainer + .repcontrol {
  background-color: transparent;
  margin: auto;
  min-height: 1em;
  padding-bottom: 2px;
}

.ui-dialog .charsheet .repcontainer .repitem .itemcontrol {
  max-width: -webkit-fill-available;
}

.ui-dialog .tab-content .charsheet .itemcontrol button.repcontrol_del,
.ui-dialog .tab-content .charsheet .itemcontrol a.repcontrol_move {
  border: 2px solid #111;
  border-radius: 3px;
  bottom: -.5em;
  display: block;
  height: 1.5em;
  padding: 0 0 1.5em 0;
  position: relative;
  width: 1.5em;
  z-index: 3;
}

.ui-dialog .tab-content .charsheet .itemcontrol button.repcontrol_del {
  background: red;
  color: #fff;
  outline: none;
  right: 5px;
}

.ui-dialog .tab-content .charsheet .itemcontrol a.repcontrol_move {
  background: #fff;
  color: #000;
  outline: none;
}

.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit {
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 0;
  line-height: 1;
  outline: none;
  padding: 0;
}

.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:before,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:before,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:before,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:before {
  background: none;
  background-color: #fff;
  border: 2px solid #222222d4;
  border-radius: 3px;
  box-shadow: none;
  display: block;
  height: 1.5em;
  line-height: normal;
  outline: none;
  padding: 0;
  width: 1.5em;
}

.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:hover,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:hover,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:hover,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:hover {
  color: #fff;
  outline: none;
}

.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:hover:before,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_del:hover:before,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_move:hover:before,
.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:hover:before {
  background-color: #000;
  font-weight: normal;
  outline: none;
}

.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_add:before {
  content: "&";
  display: block;
  font-family: "Pictos";
  font-size: 12px;
  font-weight: bold;
}

.ui-dialog .tab-content .charsheet .repcontrol button.repcontrol_edit:before {
  content: "(";
  display: block;
  font-family: "Pictos";
  font-size: 12px;
  font-weight: bold;
}

.ui-dialog .tab-content .charsheet .editmode + .repcontrol button.repcontrol_edit:before {
  content: ")";
}

.charsheet .section-header,
.charsheet .section-header-inline {
  font-family: 'Nunito', serif;
  font-size: 1.5rem;
  font-weight: bold;
  margin-inline: 2px;
}

.charsheet .column-header {
  font-family: 'Nunito', serif;
  font-weight: bold;
  font-size: 1.1rem;
}

.charsheet .swiftness,
.charsheet .spirit,
.charsheet .vigor,
.charsheet .resilience {
  display: inline-block;
  margin-bottom: 2em;
  position: static;
  text-align: center;
  width: 100%;
  & span.section-header {
      font-family: 'Ghastly Panic', sans-serif;
      font-size: 3rem;
      font-synthesis: none;
      letter-spacing: 4px;
      line-height: 3rem;
      padding: 5px 3px 5px 8px;
      text-shadow: 0 0 0 #000, 0 0 0 #000;
    }
}

.charsheet .swiftness,
.charsheet .spirit,
.charsheet .vigor,
.charsheet .resilience,
.charsheet .honour {
  margin-inline: auto;
  /* inverts margin-right based on vw
     888px up to 1280px
  */
  margin-right: max(-36px, min(0px, calc(-0.0918 * 100vw + 81.55px)));
}

.charsheet .spirit,
.charsheet .vigor {
  margin-left: -2em;
}

.charsheet .ability-base-mod {
  display: flex;
  margin: -6px auto 2px auto;
  max-width: 5em;
  position: relative;
  vertical-align: middle;
  z-index: 1;
}

.charsheet .section-notes {
  font-size: 1.2rem;
  font-family: 'Times New Roman', Times, serif;
  line-height: 1.25rem;
}

.charsheet .logo {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_logo.webp');
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  grid-area: logo;
  height: 218px;
  left: -4em;
  margin-bottom: -4em;
  margin-right: -5em;
  place-self: center;
  position: relative;
  top: -3em;
  transform-origin: top left;
  transform: scale(1);
  transition: transform .5s ease-in-out;
  width: 330px;
  z-index: 0;
}

.ui-dialog .charsheet .kanji-text {
  font-family: 'Yuji Mai';
  font-size: 1.65rem;
  font-weight: 400;
  text-shadow: 1px 1px 1px #111;
}

/* roll template */

.sheet-rolltemplate-ronin {
  align-content: center;
  color: #111 !important;
  margin-bottom: 5px;
  margin-inline: auto;
  max-inline-size: 360px;
  min-height: 3em;
}

.sheet-rolltemplate-ronin .sheet-heading-row {
  background-color: #000;
  display: grid;  font-family: 'Special Elite';
  grid-template-columns: 1fr 1fr;
  min-height: 2em;
  padding: 5px 2px 2px 2px;
  position: relative;
}

.sheet-rolltemplate-ronin .sheet-template-body {
  align-content: center;
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_template_background.webp');
  background-position: 0 -6px;
  background-repeat: no-repeat;
  background-size: 100%;
  padding-top: 2em;
}

.sheet-rolltemplate-ronin .sheet-template-body::after {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_template_background.webp');
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  bottom: -7px;
  content: '';
  display: block;
  padding-top: 20px;
  position: relative;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-template-body,
.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-template-body::after {
  background-image: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/refs/heads/master/Ronin/images/ronin_template_background_darkmode.webp');
  color: #fff;
}

.sheet-rolltemplate-ronin .sheet-row {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.sheet-rolltemplate-ronin .sheet-span-all {
  grid-column: 1/-1;
  text-align: center;
}

.sheet-rolltemplate-ronin .sheet-key {
  margin-inline: auto;
  margin-right: 2px;
}

.sheet-rolltemplate-ronin .sheet-value {
  margin-inline: auto;
  margin-left: 0;
}

.sheet-rolltemplate-ronin .sheet-heading {
  font-family: 'Special Elite';
  font-size: 1.2em;
}

.sheet-rolltemplate-ronin .sheet-subheading {
  font-family: 'Nunito';
}

.sheet-rolltemplate-ronin .sheet-heading,
.sheet-rolltemplate-ronin .sheet-subheading {
  align-content: center;
  background-color: #000;
  color: #fff;
  padding-block: 2px;
  padding-inline: 5px;
  position: relative;
}

.sheet-rolltemplate-ronin .sheet-duel-label {
  background-color: #eb3143;
  border-radius: 5px;
  box-shadow: 1px 3px 1px 1px #111;
  font-family: serif;
  font-size: 12px;
  padding-inline: 6px;
  pointer-events: none;
  position: absolute;
  right: -1px;
  text-orientation: upright;
  top: 5px;
  transform: rotate(7deg);
  writing-mode: vertical-lr;
}

.sheet-rolltemplate-ronin .sheet-block {
  display: inline-block;
}

.sheet-rolltemplate-ronin .sheet-block:empty {
  display: none;
}

.sheet-rolltemplate-ronin .sheet-description {
  background-color: #e6e6e6ab;
  display: block;
  margin: .25em 1em .5em 1em;
  padding: 5px 5px 10px 5px;
  text-align: left;
  white-space: normal;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-description {
  background-color: #000000b8;
}

.sheet-rolltemplate-ronin .sheet-center {
  text-align: center;
}

.sheet-rolltemplate-ronin hr {
  background-color: #111;
  height: 2px;
  margin-block: 2px;
  width: 70%;
}

.sheet-rolltemplate-ronin .sheet-footnote {
  font-size: .85em;
  padding-inline: 5px;
}

.sheet-rolltemplate-ronin .sheet-success-roll,
.sheet-rolltemplate-ronin .sheet-crit-roll {
  color: #3fb315 !important;
  display: inline-block;
  font-size: 1.25em;
  font-weight: bold;
  padding-block: 2px;
  vertical-align: top;
  width: 100%;
}

.sheet-rolltemplate-ronin .inlinerollresult.fullcrit {
  border: 2px solid #3fb315 !important;
}

.sheet-rolltemplate-ronin .sheet-failed-roll,
.sheet-rolltemplate-ronin .sheet-fumble-roll {
  color: #eb3143 !important;
  display: inline-block;
  font-size: 1.25em;
  font-weight: bold;
  padding-block: 2px;
  vertical-align: top;
  width: 100%;
}

.sheet-rolltemplate-ronin .inlinerollresult.fullfail {
  border: 2px solid #eb3143 !important;
}

.sheet-rolltemplate-ronin span.inlinerollresult {
  background-color: transparent;
  border: 1px solid #666;
  cursor: help;
  display: inline-block;
  font-weight: 600;
  margin: 1px;
  min-width: 1em;
  padding: 0 3px 0 3px;
  text-align: center;
}

.sheet-rolltemplate-ronin span[data-i18n="versus-difficulty-rating"] + .inlinerollresult {
  border-color: transparent;
}

/* d20 dice image */
.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult {
  border-color: transparent;
  display: inline-grid;
  height: 24px;
  line-height: normal;
  margin-inline: 0;
  padding: 0;
  position: relative;
  width: 24px;
}

.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult::before {
  content: '0';
  display: inline-grid;
  font-family: 'dicefontd20';
  font-size: 1.85em;
  line-height: 1em;
  opacity: .85;
  position: absolute;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin .sheet-d20-roll span.inlinerollresult::before {
  opacity: .25;
}

.sheet-rolltemplate-ronin .sheet-dice-roll span.inlinerollresult {
  background-color: #000;
  border: none !important;
  border-radius: 2px;
  color: #fff;
  display: inline-grid;
  font-weight: normal;
  height: 24px;
  line-height: normal;
  margin-inline: 0;
  outline: 1px solid #333;
  outline-offset: -2px;
  padding: 0;
  position: relative;
  width: 24px;
}

.sheet-rolltemplate-ronin span.sheet-roll-detail {
  cursor: help;
  vertical-align: text-top;
  opacity: .5;
}

.sheet-rolltemplate-ronin span.sheet-roll-detail:hover {
  opacity: 1;
}

.sheet-rolltemplate-ronin span.sheet-roll-detail .inlinerollresult {
  background-color: transparent;
  border: none;
  font-size: 1rem;
  font-weight: normal;
  padding: 0 1px 0 1px;
  pointer-events: none;
}

/* hyperlinks */
.sheet-rolltemplate-ronin a {
  background-color: #ffffffa6;
  font-family: system-ui;
  font-weight: bold;
  padding: 0 4px 4px 4px;
  text-decoration: underline;
}

.sheet-rolltemplate-darkmode.sheet-rolltemplate-ronin a {
  background-color: #000000a6;
}

/* removes text and adds dice image */
.sheet-rolltemplate-ronin .sheet-roll-query a::before,
.sheet-rolltemplate-ronin .sheet-roll-query a::after {
  bottom: -1px;
  color: #000;
  content: 'F';
  font-family: 'dicefontd6';
  font-size: 16px;
  opacity: .75;
  position: relative;
}

.sheet-rolltemplate-ronin .sheet-roll-query {
  display: contents;
}

.sheet-rolltemplate-ronin .sheet-roll-query a {
  text-decoration: none;
}

.sheet-rolltemplate-ronin .sheet-roll-query a::before {
  margin-right: -10px;
  top: -3px;
}

.sheet-rolltemplate-ronin .sheet-roll-query:hover a {
  text-decoration: none;
}

.sheet-rolltemplate-ronin .sheet-roll-query:hover a::before {
  color: #eb3143;
  font-size: 17px;
  opacity: 1;
}

.sheet-rolltemplate-ronin .sheet-roll-query:hover a::after {
  color: #eb3143;
  font-size: 17px;
  opacity: 1;
  top: 1px;
}