@import 'datauri.less';
@import 'color.less';
:root {
  font-size: 1vmax;
  font-family: 'MS PGothic';

  --ui-size: clamp( 100px, 12vw, 140px );

  --border-width: 4px;
  --default-border: var( --border-width ) solid var( --c-oxford-blue );
  --default-outline-offset: calc( -1 * var( --border-width ) );
  --container-offset: 2rem;

  --CO: var( --container-offset );
  --CO2: calc( var( --CO ) * 2 );
  --CO3: calc( var( --CO ) * 3 );
  --CO4: calc( var( --CO ) * 4 );

  --environment-size: var( --ui-size );
  --layout-size: var( --ui-size );
  --layout-button-size: calc( var( --layout-size ) / 3 - var( --border-width ) );
  --layout-button-half: calc( var( --layout-button-size ) / 2 );

  --possession-width: 36vw;
  --log-width: var( --possession-width );
  --log-height: calc( var( --possession-width ) / 3 );
  /* i hate 9, its a weird number, but 36 is divisible by 9 */
  --possession-height: calc( var( --possession-width ) / 9 );
  --portrait-size: var( --possession-height );
  --belt-width: calc( var( --possession-width )
    - var( --portrait-size ) - var( --border-width ) );
  --select-size: 1rem;
  --belt-item-count: 10;
  --belt-item-size: calc( ( var( --belt-width ) - var( --select-size ) )
      / ( var( --belt-item-count ) + 1 ) );

  --border-double: calc( var( --border-width ) * 0.80 * 2 );
  --border-half: calc( var( --border-width ) / 2 );

  --status-height: calc( var( --possession-height ) / 1.5 );

  /* added to support agenda-view, maybe not the best way? */
  /* probably dont need to put " dungeon " in front of everything */
  /* it is no longer relevent*/
  --dungeon-size: var( --possession-width );
  --grid-columns: 11;
  --dungeon-grid-size: calc( var( --dungeon-size ) / var( --grid-columns ) );
  --dungeon-button-size: calc( var( --dungeon-grid-size ) - var( --border-width ) );
  --dungeon-container-width: calc( var( --dungeon-grid-size ) * 9 );
}

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

* {
  scrollbar-width: auto;
  scrollbar-color: var( --c-azure ) transparent;
}

*::-webkit-scrollbar { width: 1rem; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: var( --c-azure );
  border-radius: 1rem;
  border: 0.25rem solid transparent;
  background-clip: content-box;
}

canvas { image-rendering: pixelated; }
table { border-collapse: collapse; }
table td {
  margin: 0;
  padding: 0;
}

[ class *= "fa-" ] {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: bold;
}

.splash {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  vertical-align: middle;
  text-align: center;
  color: var( --c-white );
  background-color: var( --c-black );
  font-family: 'AncientModernTales';
  font-size: 2rem;

  &:before {
    content: '';
    height: 100%;
    display: inline-block;
    vertical-align: middle;
  }
  .clear-cache.button {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
  }
}

body {
  margin: 0;
  background: var( --c-black );
  width: calc( 100vw - 18px );
  overflow: hidden;
  &.blur {
    filter: saturate( 0.75 );
    pointer-events: none;
  }
  &[ mode="build" ] {
    div.ui .container.build { display: block }
  }
  .sky {
    --ring-color: rgba( 133, 116, 140, 0.5 );
    background-image: radial-gradient( var( --sky-color ) 15%,
      var( --ring-color ) 35%,
      rgba( 0, 0, 0, 1 ) 50%,
      rgba( 0, 0, 0, 1 ) 100% ),
    var( --sky-image );
    background-size: contain, 5120px 1280px; /* size of image */
    background-position: 0% 0%;
    width: 300vmax;
    height: 300vmax;
    position: fixed;
    /* top: calc( 50vh - 150vmax ); */
    top: 0;
    left: calc( 50vw - 150vmax );
    z-index: -1;
    &.day {
      --sky-color: rgba( 90, 140, 225, 1 );
      --sky-image: url( '' );
      .celestial { background-image: var( --datauri-sun ); }
    }
    &.moonless{
      --sky-color: rgba( 0, 0, 0, 0 );
      --sky-image: url( "/assets/img/strobe.gif" );
      background-size: 25%;
      opacity: 0.75;
      filter: hue-rotate( -20deg ) blur( 3px );
    }
    &.night {
      --sky-color: rgba( 0, 0, 0, 0 );
      --sky-image: var( --datauri-night-sky );
      .celestial {
        background-image: var( --datauri-moon );
        &.half {
          --mask: linear-gradient( 90deg,
            black 0%,
            black 33%,
              transparent 33%,
              transparent 67%,
            black 67%,
            black 100% );
          -webkit-mask: var( --mask );
          mask: var( --mask );
          -webkit-mask-size: 300% 300%;
          mask-size: 300% 300%;
        }
        &.quarter, &.full, &.empty, &.three {
          --mask: radial-gradient( transparent 0%,
            transparent 23%,
            black 23%,
            black 33% );
          -webkit-mask: var( --mask );
          mask: var( --mask );
          -webkit-mask-size: 300% 300%;
          mask-size: 300% 300%;
        }
        &.empty {
          --position: 50% 50%;
          -webkit-mask-position: var( --position );
          mask-position: var( --position );
        }
        &.start.quarter {
          --position: 75% 50%;
          -webkit-mask-position: var( --position );
          mask-position: var( --position );
        }
        &.start.three {
          --position: 65% 50%;
          -webkit-mask-position: var( --position );
          mask-position: var( --position );
        }
        &.start.half {
          --position: 75% 50%;
          -webkit-mask-position: var( --position );
          mask-position: var( --position );
        }
        &.full {
          --position: 0% 50%;
          -webkit-mask-position: var( --position );
          mask-position: var( --position );
        }
        &.end.half {
          --position: 25% 50%;
          -webkit-mask-position: var( --position );
          mask-position: var( --position );
        }
        &.end.three {
          --position: 35% 50%;
          -webkit-mask-position: var( --position );
          mask-position: var( --position );
        }
        &.end.quarter {
          --position: 25% 50%;
          -webkit-mask-position: var( --position );
          mask-position: var( --position );
        }
      }
    }
    .celestial {
      transition-duration: 1000ms;
      transition-property: top, left;
      width: 5%;
      height: 5%;
      background-size: contain;
      position: absolute;
      top: calc( 50% - 2.5% );
      left: calc( 50% - 2.5% );
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
    }
/*
    background-image: var( --datauri-night-sky );
radial-gradient(
rgba(0, 0, 0, 0) 25%,
rgba(133, 116, 140, 1) 45%,
rgba(0, 0, 0, 1) 50%,
rgba(0, 0, 0, 1) 100%),
var(--datauri-night-sky)
*/
  }
}

div.ui {
  color: var( --c-white );
  position: fixed;
  bottom: 0;
  left: 0;
  color: white;
  text-align: left;
  vertical-align: bottom;

  .info.container {
    > * {
      display: inline-block;
      padding-left: 1rem;
      opacity: 0.2;
      &:hover {
        opacity: 1;
        &:after { content: " - " attr( data-before ); }
      }
    }
  }
  .volume {
    --volume-opacity: 0.01;
    position: fixed;
    top: var( --CO );
    right: var( --CO );
    opacity: var( --volume-opacity );
    transition-property: opacity;
    transition-duration: 1000ms;

    &:before { content: attr( value ); }
    &:hover, &.active {
      transition-duration: 0ms;
      --volume-opacity: 1;
    }
  }
}

@property --orbitD {
  syntax: '<number>'; /* <- defined as type number for the transition to work */
  initial-value: 0;
  inherits: false;
}
@keyframes statusOrbit {
 000%  { --orbitD: 0; }
 100%  { --orbitD: 360; }
}
.container.creature-info {
  position: fixed;
  width: 0;
  height: 0;
  --width: 16rem;
  --height: 1.5; /* defined by sprite size */
  --max-hp: 16;
  --now-hp: 13;
  --max-width: calc( ( var( --max-hp ) / 300 ) * 16rem );
  --now-width: calc( var( --now-hp ) / var( --max-hp ) * 100% );
  --orbitZ: 2rem;
  --duration: 2s;
  --carousel-split: 6;
  --carousel-delay: calc( var( --duration ) / var( --carousel-split ) );
  .status-carousel {
    position: absolute;
    --dynamic-bottom: calc( var( --zoom ) * var( --height ) * 8rem );
    /*
    --XorbitZ: clamp( 0.25rem, calc( var( --zoom ) * var( --orbitZ ) ), 100vmax );
    font-size: calc( var( --zoom ) * 2rem );
    */
    bottom: clamp( 2rem, var( --dynamic-bottom ), 100vmax );
    left: -0.55rem;
    pointer-events: none;
    b {
      position: absolute;
      animation-name: statusOrbit;
      animation-timing-function: linear;
      animation-duration: 2s;
      animation-iteration-count: infinite;
      animation-delay: calc( -1 * var( --index ) * var( --carousel-delay ) );
      transform: rotateX( 15deg ) rotateY( calc( 1deg * var( --orbitD ) ) ) translateZ( var( --orbitZ ) ) rotateY( calc( -1deg * var( --orbitD ) ) );

      &.fa-star:before { color: var( --c-chrome-yellow ); }
      &.fa-fire:before { color: var( --c-chrome-yellow ); }
      &.fa-bolt:before { color: var( --c-chrome-yellow ); }
      &.fa-snowflake:before { color: var( --c-very-light-azure ); }
      &.fa-droplet:before { color: var( --c-red ); }
      &.fa-compress:before { color: var( --c-red ); }
    }
  }
  .full-name, .true-name, .hp {
    width: var( --width );
    margin-left: calc( -0.5 * var( --width ) );
  }
  .true-name {
    color: var( --c-chrome-yellow );
  }
  .full-name, .true-name {
    text-align: center;
    text-shadow: var( --c-black ) 0 0 var( --border-width );
    &:empty { display: none; }
  }
  .hp {
    --width: clamp( 2rem, var( --max-width ), 16rem );
    border: var( --border-width ) solid var( --c-oxford-blue );
    background-image: var( --g-lost-health );
    overflow: hidden;
    pointer-events: none;
    &:before {
      content: "";
      display: block;
      height: calc( var( --border-width ) * 2 );
      width: var( --now-width );
      background-image: var( --g-gain-health );
    }
  }
}

.container.context-menu {
  position: fixed;
  max-width: 30vw;
  max-height: 50vh;
  overflow-y: scroll;
  overflow-x: hidden;
  z-index: 2;
  color: var( --c-black );
  background-color: var( --c-peach-puff );
  border-radius: var( --border-width );
  font-size: clamp( 12px, 1.25rem, 16px );
  font-family: arial;
  padding: 1rem 0 1rem 1rem;
  pointer-events: none;
  opacity: 0;
  &:before {
    content: "";
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var( --c-shadow-black );
  }
  &.active {
    pointer-events: initial;
    opacity: 1;
  }
  select {
    padding: 1em;
    font-size: inherit;
  }
  > * {
    display: block;
    border-width: 0;
    border-bottom: 1px solid var( --c-shadow-black );
    width: 100%;
    padding: 1em;
    background-color: inherit;
  }
  > label[ class *= "fa-" ][ data-type = "number" ] {
    display: inline-block;
    width: 12.5%;
    &:hover {
      background-color: var( --c-azure );
    }
    input {
      position: absolute;
      width: initial;
      right: 0;
      bottom: 0;
      font-size: 1rem;
    }
    &:before {
      position: absolute;
      color: var( --c-black );
      width: 100%;
      left: 0;
      text-align: center;
    }
  }
  div {
    padding: 1em;
    &.button {
      --button-color: var( --c-cornsilk );
      --button-hover-color: var( --c-alice-blue );
      height: initial;
    }
  }
}

.context-menu[ context-of = "waypoint" ] {
  .public-title {
    font-weight: bold;
    font-size: 1.5em;
  }
  .public-detail {
    font-style: italic;
    font-size: 0.75em;
  }
  [ data-before = "Name: " ] {
    font-weight: bold;
    font-size: 1.25em;
  }
  [ data-before = "Notes" ] {
    font-style: italic;
    font-size: 0.75em;
  }
}

// LOG ( TOP CENTER )
.container.log {
  position: absolute;
  bottom: var( --container-offset );
  left: calc( var( --container-offset ) * 1.5 + var( --layout-size ) );
  width: calc( var( --log-width ) / 2 );
  font-size: 16px;
  /*
  pointer-events: none;
  top: var( --container-offset );
  left: calc( 50% - var( --log-width ) / 2 );
  width: var( --log-width );
  font-size: calc( var( --log-height ) / 8 );
  &.active {
    transition-property: opacity;
    transition-duration: 500ms;
    opacity: 0;
  }
  */
  max-height: var( --log-height );
  display: flex;
  justify-content: flex-end;
  flex-direction: column;
  mask-image: linear-gradient( transparent, var( --c-black ) );
  -webkit-mask-image: linear-gradient( transparent, var( --c-black ) );
  opacity: 0.25;
  transition-property: opacity, mask-image, -webkit-mask-image;
  transition-duration: 500ms;
  &:hover {
    opacity: 1;
    mask-image: linear-gradient( var( --c-black ), var( --c-black ) );
    -webkit-mask-image: linear-gradient( var( --c-black ), var( --c-black ) );
  }
}
// LAYOUT ( BOTTOM LEFT )
.container.layout {
  position: fixed;
  left: var( --container-offset );
  bottom: var( --container-offset );
  width: var( --layout-size );
  height: var( --layout-size );
  line-height: var( --layout-size );
  text-align: center;

  &.active-settings {
    top: 5vh;
    left: 5vw;
    z-index: 10;
    width: 90vw;
    height: 90vmin;
    .container.settings {
      width: 100%;
      height: 100%;
      padding: var( --container-offset );
    }
    .button.settings {
      display: none;
    }
  }

  div.container {
    &.settings {
      width: 0;
      height: 0;
      overflow: hidden;
      background: var( --c-frosted-oxford-blue );
      line-height: var( --layout-button-size );
      text-align: left;

      label {
        display: block;
        width: calc( 100% - var( --layout-button-size ) );
        height: var( --layout-button-size );

        input { float: right; }
        &:hover {
          background: var( --c-oxford-blue );
        }
      }
    }
  }
  div.button {
    position: absolute;
    &.wear-head {
      left: calc( 50% - var( --layout-button-half ) );
      top: 0;
    }
    &.wear-back {
      left: calc( 50% - var( --layout-button-half ) );
      top: calc( 50% - var( --layout-button-half ) );
    }
    &.wear-hip {
      left: calc( 50% - var( --layout-button-half ) );
      bottom: 0;
    }
    &.left-hand, &.right-hand {
      transition-property: transform, opacity;
      transition-duration: 250ms;
      top: calc( 50% - var( --layout-button-half ) );
      &[ load = '0' ] { transform: initial; opacity: var( --default-opacity ); z-index: 1; }
      &[ load = '1' ] { transform: translate( 1rem, -1rem ); opacity: 0.25; z-index: 0; }
    }

    &.left-hand { left: 0; }
    &.right-hand { right: 0; }
    &.switch, &.settings {
      bottom: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 75%;
    }
    &.switch {
      right: 0;
      background-image: var( --datauri-switch );
    }
    &.settings {
      left: 0;
      background-image: var( --datauri-settings );
    }
  }
  &.alt-load {
    div.button {
      &.left-hand, &.right-hand {
        &[ load = '0' ] { transform: translate( 1rem, -1rem ); opacity: 0.25; z-index: 0; }
        &[ load = '1' ] { transform: initial; opacity: var( --default-opacity ); z-index: 1; }
      }
    }
  }
}

// POSSESSION ( BOTTOM CENTER )
.container.possession {
  position: fixed;
  width: var( --possession-width );
  max-width: 800px;
  height: var( --possession-height );
  bottom: var( --container-offset );
  left: calc( 50% - var( --possession-width ) / 2 );
}

// POSSESSION: STATUS
.container.status {
  width: var( --belt-width );
  height: var( --status-height );
  line-height: var( --status-height );
  position: absolute;
  bottom: 100%;
  right: 0;
  display: none; /* disabled */

  .hd-area, .action-area {
    display: none;
    float: right;
  }
  .hd-item {
    --size: calc( var( --status-height ) / 2.25 );
    background-image: var( --datauri-gem-full );
    width: var( --size );
    height: calc( var( --size ) * 1.666 );
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: var( --border-width );
    vertical-align: middle;
    cursor: pointer;
    &:hover { filter: brightness( 1.25 ) saturate( 1.25 ); }
    &.active {
      background-image: var( --datauri-gem-empty )
    }
  }
  .flags-area {
    width: 40%;
    height: var( --status-height );
    display: inline-block;
    .flag-item {
      --size: calc( var( --status-height ) / 1.5 );
      font-size: calc( var( --size ) / 2 );
      position: relative;
      width: var( --size );
      height: var( --size );
      margin-left: var( --border-width );
      display: inline-block;
      line-height: var( --size );
      text-align: center;
      font-family: Times;
      vertical-align: middle;
      background-color: var( --c-oxford-blue );
      background-repeat: no-repeat;
      background-position: center;
      &:before { color: var( --c-shadow-white ); }
      &:after {
        content: attr( duration );
        position: absolute;
        line-height: 1rem;
        bottom: 0;
        right: 0;
      }
    }
  }
  .action-area {
    font-size: calc( var( --status-height ) / 3 );
    > div {
      --size: calc( var( --status-height ) / 1.5 );
      width: var( --size );
      height: var( --size );
      outline: var( --default-border );
      outline-offset: calc( -1 * var( --border-width ) );
      margin-left: var( --border-width );
      border-radius: 100vmax;
      display: inline-block;
      line-height: var( --size );
      vertical-align: middle;
      font-weight: bold;
      text-align: center;
      font-family: Times;
      padding: 0;
      cursor: pointer;
      &:nth-child( 1 ) { margin-left: 0; }
      &:hover { filter: brightness( 1.25 ) saturate( 1.25 ); }
      &.active { filter: brightness( 1.5 ) saturate( 1.5 ); }
      &.action-toggle { background-color: hsl( 0, 100%, 12% ); }
      &.bonus-toggle { background-color: hsl( 113, 100%, 13% ); }
      &.movement-toggle { background-color: hsl( 182, 100%, 13% ); }
      &.reaction-toggle { background-color: hsl( 55, 100%, 12% ); }
      &.free-toggle { background-color: hsl( 280, 100%, 13% ); }
      // &.reset.button { filter: brightness( 1.25 ); }
    }
  }
}

// POSSESSION: PROFILE
.container.portrait, .portrait-item {
  height: var( --portrait-size );
  width: var( --portrait-size );
  border-radius: 100vmax;
  background-color: var( --c-american-bronze );
  outline: var( --default-border );
  outline-offset: var( --default-outline-offset );
  object-fit: contain;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: center;

  &:hover {
    cursor: pointer;
    background-color: var( --c-chrome-yellow );
  }
}

.container.portrait {
  position: absolute;
  left: 0;
  bottom: 0;

  &.active {
    background-color: var( --c-chrome-yellow );
    .portrait-item {
      height: var( --portrait-size );
      width: var( --portrait-size );
      margin-top: -1rem;
      overflow: hidden;
    }
  }
  .portrait-menu {
    position: fixed;
    display: flex;
    z-index: -1;
    /* replace by calculating this before .container.possession needs it*/
    bottom: calc( var( --possession-height ) + var( --container-offset ) + var( --status-height ) );
    left: 25%;
    width: 50%;
    height: 0;
    direction: ltr; /* possibly want thsi */
    align-content: baseline;
    flex-wrap: wrap-reverse;
  }
  .portrait-item {
    transition-property: width, height, margin;
    transition-duration: 250ms;
    width: 0;
    height: 0;
    overflow: hidden;
    &:hover { z-index: 0; }
    &:before {
      content: attr( index );
      position: relative;
    }
  }

  .level-info {
    --TS: 1px 1px var( --c-black );
    position: absolute;
    bottom: 0;
    left: 0;
    &, input {
      text-shadow: var( --TS );
      font-family: Times;
      font-size: calc( var( --portrait-size ) / 2.25 );
    }
    &:before{
      content: 'Lv';
      display: inline-block;
    }
  }
}

// POSSESSION: BELT
.container.belt {
  position: absolute;
  right: 0;
  top: 0;
  width: var( --belt-width );
  display: flex;
  display: none;
  justify-content: space-between;

  .belt-select {
    --button-size: calc( var( --belt-item-size ) * 0.3 );
    --info-size: calc( var( --belt-item-size ) * 0.4 );
    width: var( --select-size );
    text-align: center;
  }

  .belt-info {
    height: var( --info-size );
  }

  .button {
    padding: 0;
    height: var( --button-size );
    --button-color: var( --c-american-bronze );
    --button-hover-color: : var( --c-chrome-yellow );
  }

  .belt-item {
    width: var( --belt-item-size );
    height: var( --belt-item-size );
  }
}

// POSSESSION: HEALTH
.container.health {
  --height: calc( var( --possession-height ) / 4 );
  --height: calc( var( --possession-height ) / 3 );
  --inner-height: calc( 100% - var( --border-double ) );
  --font-size: calc( var( --height ) * 1.5 );
  --margin-top: calc( var( --font-size ) / 8 );
  --health-section-num: 11; /* the only real value you need to edit */
  --separator-size: 1px;
  --repeat-width: calc( 100% / var( --health-section-num ) );
  --health-now-index: 9;
  --select-index: 0;
  --c-separator: var( --c-shadow-black );

  position: absolute;
  bottom: 0px;
  right: 0px;

  outline: var( --default-border );
  outline-offset: var( --default-outline-offset );

  background-image: var( --g-lost-health );
  height: var( --height );
  width: var( --belt-width );
  margin-top: var( --margin-top );
  cursor: pointer;

  .health-current {
    pointer-events: none;
    background-image: var( --g-gain-health );
    height: 100%;
    max-width: 100%;
    width: calc( 100% * var( --health-now-index )
      / var( --health-section-num ) );
  }

  .health-info {
    font-size: var( --font-size );
    font-family: Times;
    text-shadow: 1px 1px black;
    position: absolute;
    right: 0;
    bottom: calc( 100% - var( --border-width ) );
    label:nth-child( 1 ) { text-align: right; }
  }

  .health-select {
    transition-property: left;
    transition-duration: 150ms;
    display: none;
    position: absolute;
    top: 0;
    left: calc( var( --select-index ) * var( --repeat-width ) );
    width: var( --repeat-width );
    height: 100%;
    pointer-events: none;
    background-color: var( --c-chrome-yellow );
    border: var( --default-border );
    border-left-width: 0;
    border-right-width: 0;

    &:before {
      content: attr( icon );
      position: absolute;
      bottom: 100%;
      width: 500%;
      left: -200%; /* 100% for itself */
      color: var( --c-chrome-yellow );
      display: inline-block;
      text-align: center;
      font-family: 'AncientModernTales';
      font-size: calc( var( --font-size ) * 1.5 );
      text-shadow: 2px 2px black;
    }
    /* &[ icon = '1 - 0 = 1' ]:before { */
    &[ icon = '1(-0)' ]:before {
      content: '💀';
      font-size: var( --font-size );
      bottom: calc( 100% * 2 );
    }
  }

  .health-division {
    pointer-events: none;
    position: absolute;
    background-image: repeating-linear-gradient( 90deg,
      var( --c-shadow-black ), var( --separator-size ),
      var( --c-shadow-black ), 0,
      transparent calc( var( --repeat-width ) ) );
    width: 100%;
    height: 100%;
  }
}

.creature-score, .creature-user-score {
  position: fixed;
  top: var( --container-offset );
  right: var( --container-offset );
  display: none;
  z-index: 2;
  max-height: 60vh;
  overflow-y: scroll;
  overflow-x: hidden;
  width: calc( var( --dungeon-grid-size ) * 8 );
  padding: var( --container-offset );
  padding-right: calc( var( --container-offset ) - 1rem );
  background-color: var( --c-frosted-oxford-blue );
  font-family: times;
  &.active { display: block }
  [ data-before ]:before {
    text-transform: capitalize;
    display: block;
    opacity: 0.25;
  }
  .score-user-name {}
  .score-notes, .score-user-notes {
    width: 100%;
    min-height: 6rem;
    background: transparent;
    color: var( --c-white );
  }
  .score-relationship-list {
    max-height: 16rem;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .score-delete, .score-stamp {
    float: right;
    cursor: pointer;
  }
  .score-delete {
    &:before { content: 'Delete ❌' }
    &:hover {
      &:before { content: '[ Shift+Click ]  ❌' }
    }
  }
  .score-stamp {
    &:before { content: 'Stamp 📜' }
    &:hover {
      &:before { content: '[ Shift+Click ] 📜' }
    }
  }
  .button[ data-id ] {
    --size: 3rem;
    --font-size: calc( var( --size ) / 4 );
    --button-hover-color: var( --c-mist-spanish-viridian );

    width: var( --size );
    height: var( --size );
    position: relative;
    font-size: var( --font-size );
    font-family: "MS PGothic";

    position: relative;

    &:before, &:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      display: block;
      overflow: hidden;
      pointer-events: none;
    }
    &:before {
      content: attr( data-full-name );
      z-index: 1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &:after {
      z-index: 0;
      height: 200%;
      background-repeat: no-repeat;
      background-position: bottom;
      filter: grayscale( 1 );
    }
    &:hover:after, &.selected:after { filter: grayscale( 0 ); }
    &:hover:before {
      color: var( --c-chrome-yellow );
      font-weight: bold;
    }
  }
}

.container.instrument {
  display: none;
  &.active { display: block; }
  .instrument-select > .button.radio { --button-width: 2; }
  .instrument-player {
      > .button[ data-note ]:before { content: attr( data-note ) " [" attr( data-key ) "]"; }
      > .button.active:after {
          content: "";
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: var( --c-shadow-azure );
        }
      > [ data-position = "U" ] {
        position: absolute;
        margin-top: calc( var( --dungeon-button-size ) * -1 );
        margin-left: calc( var( --dungeon-button-size ) * -0.5 );
      }
      > [ data-position = "D" ] {
        position: relative;
      }
  }
  .instrument-select > .button:before { content: attr( data-instrument-key ); }
}

.container.agenda {
  --DAY-SIZE: 3rem;
  --WEEK-SIZE: calc( 4 * var( --DS ) );
  --YEAR-SIZE: 4rem;
  --DS: var( --DAY-SIZE );
  --WS: var( --WEEK-SIZE );
  --YS: var( --YEAR-SIZE );
  --NAVW: calc( var( --WS ) + var( --YS ) + var( --CO ) );
  --SIW: 8rem;
  --STW: calc( 100% - var( --CO3 ) - var( --NAVW ) );
  --BH: 1.5rem; /* button height */
  --IS: calc( var( --DS ) * 0.35 ); /* indicator base size */
  --IFS: calc( var( --IS ) / 2 ); /* indicator font size */
  --IPS: calc( 0px - 5% ); /* indicator positioning */

  display: none;
  z-index: 1;
  &.active { display: block; }

  .search-input {
    position: absolute;
    left: calc( var( --STW ) - var( --SIW ) + var( --CO ) - 1rem );
    top: calc( var( --CO3 ) );
    padding: 0.25rem;
    border: 1px solid var( --c-white );
    color: var( --c-white );
    width: var( --SIW );
    background-color: var( --c-mist-very-light-azure );
  }

  .story.container {
    position: absolute;
    top: var( --CO3 );
    left: var( --CO );
    height: calc( 100% - var( --CO4 ) );
    width: var( --STW );
    overflow-y: scroll;
    overflow-x: hidden;

    > label {
      --expanding-background: transparent; /* try deleting and see if different */
      --expanding-padding: var( --CO );

      display: block;
      border-top: 1px solid var( --c-frosted-white );

      &:before {
        font-weight: bold;
        font-family: math;
      }

      &[ data-egg ] {
        --expanding-background: var( --c-mist-red );
        &:not(:focus-within) {
          --expanding-padding: calc( var( --CO ) / 2 );
          &:before { font-size: 1rem; }
          &:after { display: none; }
        }
      }
      &[ data-editable = 'false' ] { --expanding-background: var( --c-mist-black ); }
      &[ data-editable = 'true' ]:hover { --story-background: var( --c-mist-violet ); }
    }
  }
  .calendar-navigation.container {
    position: absolute;
    top: var( --CO3 );
    right: var( --CO );
    height: calc(100% - var( --CO4 ) );

    /*[ data-indicator ]:after {*/
    [ data-yr ], [ data-day ] {
      /* counter-reset: indicator var( --indicator ); */
      &:after {
        /* content: attr( data-indicator ); */
        /* content: counter( indicator ); */
        position: absolute;
        z-index: 1;
        bottom: var( --IPS );
        right: var( --IPS );
        text-align: center;
        font-weight: bold;
        font-family: math;
        font-size: var( --IFS );
        width: var( --IS );
        height: var( --IS );
        line-height: var( --IS );
        background-color: var( --c-red );
        border-radius: 100vmax;
      }
    }

    .year-input {
      position: absolute;
      right: 0;
      z-index: 1;
      width: calc( var( --YS ) - 1rem );
      text-align: right;
      outline: dotted 1px var( --c-shadow-white );
      background-color: var( --c-mist-very-light-azure );
      height: var( --BH );
      line-height: var( --BH );
      > input { right: 0; }
    }
    .month-head {
      position: fixed;
      z-index: 2;
      > b { background-color: var( --c-chrome-yellow ); }
    }
    .month-navigation, .year-navigation {
      position: absolute;
      top: 0;
      height: 100%;
      overflow: scroll;
      scroll-behavior: smooth;
    }
    .month-navigation {
      right: var( --YS );
      width: var( --WS );
    }
    .year-navigation {
      top: var( --BH );
      right: 0;
      width: var( --YS );
      height: calc( 100% - var( --BH ) );
      text-align: right;
      > div.button {
        --button-color: transparent;
        position: relative;
        padding: initial;
        width: calc( 100% - 1rem );
        height: var( --BH );
        line-height: var( --BH );
        &:before { content: attr( data-yr ); }
      }

    }
    .month.container, .month-head {
      display: inline-grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      > * {
        position: relative;
        border: 1px solid var( --c-white );
        padding: 0;
        margin: 0 -1px -1px 0;
        text-align: center;
        width: var( --DS );
        line-height: var( --DS );
        height: var( --DS );
      }
    }
    .month.container {
      position: relative;
      &[ data-season-name = "WINTER" ] { --SC: var( --c-mist-azure ); --RC: var( --c-shadow-azure ); --HC: var( --c-azure ); }
      &[ data-season-name = "SPRING" ] { --SC: var( --c-mist-spanish-viridian ); --RC: var( --c-shadow-spanish-viridian ); --HC: var( --c-spanish-viridian ); }
      &[ data-season-name = "SUMMER" ] { --SC: var( --c-mist-red ); --RC: var( --c-shadow-red ); --HC: var( --c-red ); }
      &[ data-season-name = "AUTUMN" ] { --SC: var( --c-mist-chrome-yellow ); --RC: var( --c-shadow-chrome-yellow ); --HC: var( --c-chrome-yellow ); }
      &[ data-start-day = "0" ] { --SD: 0; }
      &[ data-start-day = "1" ] { --SD: 1; }
      &[ data-start-day = "2" ] { --SD: 2; }
      &[ data-start-day = "3" ] { --SD: 3; }
      --EC: calc( 2 + var( --SD ) ); /* end column for first day */
      --ML: calc( var( --DS ) * var( --SD ) + var( --SD ) * -1px ); /* first day margin left */
      &:before {
        content: attr( data-year ) " " attr( data-mos-name );
        width: 100%;
        white-space: nowrap;
        text-overflow: clip;
        grid-area: 1 / 1 / 1 / 5;
        margin: 0.5rem 0;
        font-weight: bold;
        pointer-events: none;
      }
      &[ data-start-day = "0" ] > div.button:nth-child( 4n-0 ),
      &[ data-start-day = "1" ] > div.button:nth-child( 4n-1 ),
      &[ data-start-day = "2" ] > div.button:nth-child( 4n-2 ),
      &[ data-start-day = "3" ] > div.button:nth-child( 4n-3 ) { --button-color: var( --RC ); }
      > [ data-day ] {
        --button-color: var( --SC );
        --button-hover-color: var( --HC );
        /* background-blend-mode: soft-light; */
        background-position: 0 0;
        background-size: 35%;

        &:nth-child( 1 ) {
          grid-area: 2 / 1 / 2 / var( --EC );
          margin-left: var( --ML );
        }
        &:before { content: attr( data-day ); }
      }
    }
    div:nth-child( 1 of .month ) { margin-top: var( --CO ); }
  }
}
// ENVIRONMENT ( BOTTOM RIGHT )
.container.environment {
  position: fixed;
  right: var( --container-offset );
  bottom: var( --container-offset );
  z-index: 1;

  > .menu {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 1;
    width: var( --dungeon-button-size );
    .button { display: none; }
    .eye { background-image: var( --datauri-eye-icon ); }
    .ruler { background-image: var( --datauri-ruler-icon ); }
  }
  &[ mode = "globe" ].enlarged {
    .container.globe { display: inline-block; }
    .nodes { display: block; }
    .button.eye { display: inline-block; }
    .button.ruler { display: inline-block; }
    .container.map > .container.indicators .waypoint { display: none; }
  }
  &[ mode = "chunk" ].enlarged {
    .map-graphic { display: inline-block; }
    .button.eye { display: inline-block; }
  }
  &[ mode = "mini"] {
    .map-graphic { display: inline-block; }
  }
  &[ tool = "explored" ] .waypoint { pointer-events: none; } /* out of the way while drawing !*/

  .container.expandable.exploration {
    position: absolute;
    bottom: 0;

    --width: calc( 0.5 * var( --layout-button-size ) + 1rem );
    --height: var( --width );

    .map.button { background-image: var( --datauri-map-icon ); }
    .globe.button { background-image: var( --datauri-globe-icon ); }
  }

  .container.expandable.personnel {
    position: absolute;
    right: calc( var( --container-offset ) * -1 );
    bottom: 125%;
    z-index: 1;
    &.xhas-instrument .instrument-show.button { display: inline-block; }
    .xinstrument-show.button{ display: none; }

    &:hover { width: calc( var( --width ) * 4 ); }

    .agenda-show.button {
      float: right;
      background-image: var( --datauri-agenda-icon )
    }
    .relationship-show.button {
      background-image: var( --datauri-creature-icon )
    }
    .character-show.button {
      background-image: var( --datauri-possession-icon )
    }
  }

  &.enlarged {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

    .container.time,
    .container.calendar {
      display: none;
    }
    img.weather {
      visibility: hidden;
    }
    .container.map {
      --rotate: 0 !important;

      width: 100%;
      height: 100%;
      border-radius: 0;
      border-width: 0;
    }
    .container.expandable.exploration {
      .disable-expandable();
      bottom: initial;
      right: 1rem;
      top: calc( 1rem + var( --layout-button-size ) );

      .button {
        display: block;
        margin-top: var( --border-width );

        --width: var( --layout-button-size );
        --height: var( --layout-button-size );
      }
    }
    .map-graphic {
      --zoom: 8 !important;
      display: none;
      opacity: 0.95;
      height: 100%;
      width: 100%;
    }
    .container.map > .container.indicators {
      --waypoint-size: 2 !important;
      > div {
        pointer-events: initial;
      }
      .radius { display: none; } /* cant get radius to function correct in a landscape aspect */
    }
  }

  .container.globe {

    --globe-x: 0;
    --globe-y: 0;

    --zoom: 1;

    --background-w: 2000;
    --background-h: 1000;

    --zoom-to: calc( 1 / var( --zoom ) );
    --px-size: calc( var( --zoom-to ) * 1px ); /* the size of a mile pixel */

    --container-w2: calc( var( --container-w ) / 2 );
    --container-h2: calc( var( --container-h ) / 2 );

    --container-w4: calc( var( --container-w ) / 4 );
    --container-h4: calc( var( --container-h ) / 4 );

    --background-origin-w: calc( var( --background-w ) * 1px );
    --background-origin-h: calc( var( --background-h ) * 1px );

    --background-size-w: calc( var( --zoom-to ) * var( --background-origin-w ) );
    --background-size-h: calc( var( --zoom-to ) * var( --background-origin-h ) );

    --canvas-x: calc( var( --globe-x ) * var( --px-size ) );
    --canvas-y: calc( var( --globe-y ) * var( --px-size ) );
    --canvas-pos-x: calc( var( --container-w2 ) - var( --canvas-x ) );
    --canvas-pos-y: calc( var( --container-h2 ) - var( --canvas-y ) );

    --current-location-x: 0;
    --current-location-y: 0;

    --indicator-x: calc( var( --mouse-x ) * var( --px-size ) + var( --canvas-pos-x ) );
    --indicator-y: calc( var( --mouse-y ) * var( --px-size ) + var( --canvas-pos-y ) );

    --minimap-size: 1 / 4;
    --minimap-h: var( --container-h4 );
    --minimap-w: calc( var( --minimap-h ) * 2 );
    --minimap-indicator-w: calc( var( --minimap-w ) * var( --zoom ) );
    --minimap-indicator-h: calc( var( --minimap-h ) * var( --zoom ) );
    --minimap-x: calc( var( --minimap-w ) / var( --background-w ) * var( --globe-x ) );
    --minimap-pos-x: calc( var( --minimap-x ) - var( --minimap-indicator-w ) / 2 );
    --minimap-y: calc( var( --minimap-h ) / var( --background-h ) * var( --globe-y ) );
    --minimap-pos-y: calc( var( --minimap-y ) - var( --minimap-indicator-h ) / 2 );

    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    background-image: var( --background-pop-uri );
    background-size: var( --background-size-w ) var( --background-size-h );
    background-color: var( --c-old-lace );
    background-position-x: calc( var( --canvas-pos-x ) + 0.5 * var( --zoom-to ) );
    background-position-x: var( --canvas-pos-x );
    background-position-y: var( --canvas-pos-y );

    .current-location {
      --x: var( --current-location-x ) !important;
      --y: var( --current-location-y ) !important;
    }
    .large.current-location {
      animation-duration: 500ms;
      animation-name: blink;
      animation-iteration-count: infinite;
      background-color: var( --c-medium-spring-green ) !important;
      z-index: 1;
    }
    .mini.current-location {
      /* reusing waypoint-xy because its convenient, maybe rename */
      --waypoint-x: calc( var( --x ) / var( --background-w ) * 100% );
      --waypoint-y: calc( var( --y ) / var( --background-h ) * 100% );
      height: 100%;
      width: 100%;
      pointer-events: none;
      background-color: transparent;

      &:before, &:after {
        content: "";
        position: absolute;
        background-color: var( --c-mist-medium-spring-green );
      }
      &:before {
        width: 1px;
        height: 100%;
        top: calc( -1 * var( --waypoint-y ) );
      }
      &:after {
        width: 100%;
        height: 1px;
        left: calc( -1 * var( --waypoint-x ) );
      }
    }
    > .waypoints .waypoint, .current-location {
      --base-font-size: calc( var( --zoom-to ) * 1rem );
      &[ zoom = "0" ] { --font-size: calc(  1.00 * var( --base-font-size ) ); }
      &[ zoom = "1" ] { --font-size: calc(  0.75 * var( --base-font-size ) ); }
      &[ zoom = "2" ] { --font-size: calc(  0.50 * var( --base-font-size ) ); }
      &[ zoom = "3" ] { --font-size: calc(  0.25 * var( --base-font-size ) ); }
      &[ zoom = "4" ] { --font-size: calc(  0.125 * var( --base-font-size ) ); }
      --x: 0;
      --y: 0;
      --tx: 0; /* title position */
      --ty: 0;
      --width: calc( var( --font-size ) * 4 );
      --hw: calc( var( --width ) / 2 );
      --h-px: calc( var( --px-size) / 2 );
      --waypoint-x: calc( var( --x ) * var( --px-size ) + var( --canvas-pos-x ) );
      --waypoint-y: calc( var( --y ) * var( --px-size ) + var( --canvas-pos-y ) );

      pointer-events: none;
      display: inline-block;
      width: var( --px-size );
      height: var( --px-size );
      padding: 0;
      position: absolute;
      left: var( --waypoint-x );
      top: var( --waypoint-y );

      background-color: var( --c-white );
    }
    > .waypoints .waypoint {
      &:before {
        content: attr( title );
        position: absolute;
        bottom: 100%;
        left: calc( -1 * var( --hw ) + var( --h-px ) );
        width: var( --width );
        text-align: center;
        opacity: 0.25;
        font-family: 'AncientModernTales';
        font-size: calc( var( --font-size ) * 1 );
        transition-property: font-size;
        transition-duration: 250ms;
      }

      &[ zoom = "3" ], &[ zoom = "4" ] {
        &:before {
          font-size: calc( var( --font-size ) * 0.5 );
        }
      }

      &.hover {
        &:before {
          opacity: 1;
          font-size: calc( var( --font-size ) * 1 );
        }
      }
    }

    > .indicator {
      pointer-events: none;
      position: absolute;
      border: 1px solid var( --c-shadow-white );
      width: var( --px-size );
      height: var( --px-size );
      left: var( --indicator-x );
      top: var( --indicator-y );

      animation-duration: 750ms;
      animation-name: blink;
      animation-iteration-count: infinite;
    }

    > .mini {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      width: var( --minimap-w );
      height: var( --minimap-h );
      opacity: 0.25;
      background-size: cover;
      background-image: var( --background-uri );
      overflow: hidden;
      transition-duration: 150ms;
      transition-property: opacity;

      > .indicator {
        position: absolute;
        top: var( --minimap-pos-y );
        left: var( --minimap-pos-x );
        width: var( --minimap-indicator-w );
        height: var( --minimap-indicator-h );
        border: 1px solid var( --c-white );
        pointer-events: none;
      }

      &:hover {
        opacity: 1;
      }
    }
    .info {
      position: absolute;
      bottom: 0;
      right: 0;
      pointer-events: none;
    }
  }
  .weather {
    transition-property: top, left;
    transition-duration: 250ms;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    &.sun, &.moon {
      animation-duration: 5000ms;
      animation-name: glow;
      animation-iteration-count: infinite;
      animation-timing-function: linear;
    }
  }
}

.calendar {
  --odd-size: 30%;
  position: absolute;
  bottom: calc( 100% + 1rem );
  left: -20%;
  width: 125%;
  font-weight: bold;
  font-family: times;
  font-size: 0.75rem;
  &:hover { opacity: 1; }
  .odd-day, .non-day, .year, .era { display: inline-block; }
  .odd-day, .non-day { vertical-align: middle; }
  .odd-day {
    width: var( --odd-size );
    text-align: center;
  }
  .non-day { width: calc( 100% - var( --odd-size ) ); }
  .holiday { font-size: 1.5rem; }
  .month { width: 100%; }
  .day { font-size: 2.25rem; }
  .era { margin-left: 0.25rem; }
}

.weather.drop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: 1000ms;
  &:before {
    content: '';
    width: 100%;
    height: 100%;
    margin-left: 2rem;
    transform: scaleX( -1 );
    position: fixed;
  }
  &:after {
    content: '';
    width: 100%;
    height: 100%;
    margin-left: 2rem;
    position: fixed;
  }
  &.mute {
    opacity: 0.1 !important;
  }
  &.back {
    filter: blur( 5px );
    transform: scaleX( -1 );
    z-index: -1;
  }
  &.front {
    background-size: 100%;
  }
  &.whiteCloud.rain {
    background-image: url( "/assets/img/rain_0.gif" );
    background-size: 50%;
    filter: saturate( 0.5 );
  }
  &.blackCloud.rain {
    background-image: url( "/assets/img/rain_1.gif" );
  }
  &.whiteCloud.snow {
      background-image: url( "/assets/img/snow_0.gif" );
    background-size: 50%;
    opacity: 0.5;
  }
  &.blackCloud.snow, &.blackCloud.snow:before {
    background-image: url( "/assets/img/snow_1.gif" );
  }
  &.fog {
    --ring-size-s: 15%;
    --ring-size-e: calc( var( --ring-size-s ) + 1rem );
    &.mute {
      --ring-size-s: 17%;
      opacity: 0.75 !important;
    }
    filter: brightness( 5 );
    background-image: radial-gradient( transparent 10%,
      var( --c-fog ) var( --ring-size-s ),
      var( --c-fog ) var( --ring-size-e ),
      var( --c-white ) 100% );
    background-size: 100vmax 100vmax;
    background-position: center;
    background-color: var( --c-shadow-white );
    &:before, &:after {
      width: 100vw;
      height: 100vh;
      position: fixed;
      left: 0;
      top: 0;
      margin: 0;
      background-image: url( "/assets/img/fog_0.png" );
      background-size: 100vmax 100vmax;
      animation: fog1 15s linear 4s infinite, fogmove 15s linear 0s infinite;
    }
    &:after {
      background-image: url( "/assets/img/fog_1.png" );
      animation: fog2 20s linear 0s infinite, fogmove 17s linear 4s infinite;
    }
  }
}

.container.time {
  position: absolute;
  left: 50%;
  top: 50%;

  div[ time ] {
    --size: calc( var( --environment-size ) / 4 );
    --offset: calc( 50% - var( --environment-size ) / 8 );
    /* filter: saturate( 0.25 ); */
    opacity: 0.25;
    position: absolute;
    z-index: -1;
    margin-top: var( --offset );
    margin-left: var( --offset );
    width: var( --size );
    height: var( --size );
    border-radius: 100vmax;
    border: 4px solid var( --c-oxford-blue );
    cursor: pointer;
    &:hover { opacity: 1; filter: brightness( 1.25 ) saturate( 1 ); }
    &.selected { opacity: 0.05; filter: saturate( 1 ); }
  }
  div[ time = 'noon' ] {
    z-index: 2;
  }
  div[ time = 'picker' ] {
    margin: 0;
    bottom: calc( var( --environment-size ) / 2 );
    left: calc( var( --environment-size ) / 2 );
    background-image: linear-gradient( to right bottom, #f40788, #0b9af9 );
  }
  input[ type = 'color' ] {
    visibility: hidden;
  }
}
.container.map {

  --rotate: 0;
  --calc-rotate: calc( var( --rotate ) * -1deg );

  position: relative;
  width: var( --environment-size );
  height: var( --environment-size );
  overflow: hidden;
  border-radius: 100vmax;
  border: 2px solid var( --c-old-moss-green );

  .container.indicators {
    /* Size of Indicators */
    --size-w: calc( 1 / var( --minimap-rdw ) * 100% );
    --size-h: calc( 1 / var( --minimap-rdh ) * 100% );
    --waypoint-size: 0.33;
    --waypoint-fontsize: calc( 60 * var( --waypoint-size ) / var( --minimap-rdw ) * 1rem );
    --minimap-view-dist: 0;
    transform: rotate( var( --calc-rotate ) );
    width: 100%;
    height: 100%;

    > div {
      /* Position relative to the minimap position */
      --pos-rel-x: calc( var( --x ) - var( --minimap-pos-x ) );
      --pos-rel-y: calc( var( --y ) - var( --minimap-pos-y ) );
      /* Position on a map */
      --pos-x: calc( ( var( --pos-rel-x ) - 0.5 ) * var( --size-w ) );
      --pos-y: calc( ( var( --pos-rel-y ) - 0.5 ) * var( --size-h ) );

      position: absolute;
      z-index: var( --y );
      left: var( --pos-x );
      top: var( --pos-y );
      width: var( --size-w );
      height: var( --size-h );
      padding: initial;
      pointer-events: none;

      &:before {
        --title-w: 25vw;
        content: attr( title );
        display: flex;
        left: calc( var( --title-w ) / -2 + 50% );
        bottom: 100%;
        opacity: 0.05;
        position: absolute;

        width: var( --title-w );
        align-items: end;
        justify-content: center;
        text-align: center; /* needed for multiline */
        font-size: var( --waypoint-fontsize );
        font-family: 'AncientModernTales';
        transform: rotate( calc( var( --calc-rotate ) * -1 ) );
        pointer-events: none;
      }
      &.creature {
        --creature-indicator-size: 0.75;
        --creature-offset: calc( var( --creature-indicator-size ) * 0.5 );
        --size-cw: calc( var( --size-w ) * var( --creature-indicator-size ) );
        --size-ch: calc( var( --size-h ) * var( --creature-indicator-size ) );
        --pos-x: calc( ( var( --pos-rel-x ) - var( --creature-offset ) ) * var( --size-w ) );
        --pos-y: calc( ( var( --pos-rel-y ) - var( --creature-offset ) ) * var( --size-h ) );
        background-color: var( --c-frosted-chrome-yellow );
        border-radius: 100vmax;
        width: var( --size-cw );
        height: var( --size-ch );
		  }
      &.radius {
        --radius-block-size: calc( var( --minimap-view-dist ) * 2 + 1 );
        --w: calc( var( --radius-block-size ) * var( --size-w ) );
        --h: calc( var( --radius-block-size ) * var( --size-h ) );
        --ol: calc( var( --w ) * -0.5 ); /* offset left */
        --ot: calc( var( --h ) * -0.5 ); /* offset top */
        animation-duration: 2500ms;
        animation-name: blink;
        animation-iteration-count: infinite;
        border-radius: 100vmax;
        border: 1px solid var( --c-frosted-white );
        width: var( --w );
        height: var( --h );
        margin-left: var( --ol );
        margin-top: var( --ot );
        pointer-events: none !important;
      }
      &.waypoint {
        background-color: var( --c-white );
        &:before{ opacity: 0.25; }
      }
      &.familiar {
        background-color: var( --c-azure );
      }
      &.manual {
        background-color: var( --c-lilac-geode );
      }
      &.possess {
        background-color: var( --c-medium-spring-green );
      }
      &.possess, &.manual {
        animation-duration: 1000ms;
        animation-name: blink;
        animation-iteration-count: infinite;
      }
      &:hover:before { opacity: 1; }
    }
  }
  .map-graphic {
    --zoom: 1;
    --size: calc( var( --environment-size ) * var( --zoom ) );
    position: absolute;
    top: 0;
    left: 0;
    width: var( --size );
    height: var( --size );
    background-color: var( --c-oxford-blue );
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotate( var( --calc-rotate ) );
    /* mix-blend-mode: luminosity; */
    /* filter: brightness( 4 ) saturate( 1 ); */
  }
  .compass-info {
    --width: 3rem;
    --left: calc( 50% - var( --width ) / 2 );
    user-select: none;
    pointer-events: none;
    position: absolute;
    z-index: 5;
    top: 0;
    left: var( --left );
    width: var( --width );
    text-align: center;
    text-shadow: 2px 1px var( --c-chrome-yellow );
    /* text-shadow: 2px 1px var( --c-old-moss-green ); */
    font-size: 1.5rem;
    font-family: garamond;
  }
}


// ANIMATIONS
@keyframes blink {
  from { filter: brightness( 1 ); }
  50% { filter: brightness( 0.5 ); }
  to { filter: brightness( 1 ); }
}
@keyframes glow {
  from {}
  50% {
    filter: saturate( 2 ) hue-rotate( -5deg );
    /* transform: rotate( 3deg ); */
  }
  to {}
}

@keyframes fog1 {
     0% { opacity: 1.0; }
    50% { opacity: .25; }
    100% { opacity: 1.0; }
}


@keyframes fog2 {
    0% { opacity: 0.25; }
    50% { opacity: 1.0; }
    100% { opacity: 0.25; }
}

@keyframes fogmove {
    0% { background-position: 0vmax 0%; }
    100% { background-position: 100vmax 0%; }
}

// GLOBAL
.h3 () {
  font-size: 2rem;
  font-family: times;
}
div.container {
  &.frosted { background-color: var( --c-frosted-oxford-blue ); }
  &.popup {
    --SIZE: calc( 100% - var( --CO2 ) );
    position: fixed;
    top: var( --CO );
    right: var( --CO );
    width: var( --SIZE );
    height: var( --SIZE );
  }
  &.orientation-right {
    --SIZE: calc( 50% - var( --CO2 ) );
    position: fixed;
    top: var( --CO );
    right: var( --CO );
    width: var( --SIZE );
  }
  &.padded {
    padding: var( --container-offset );
  }
  &.expandable {
    overflow: hidden;
    --width: var( --dungeon-button-size );
    --height: var( --dungeon-button-size );
    max-width: var( --width );
    height: var( --height );
    .button {
      width: var( --width );
      height: var( --height );
    }
    &:hover {
      max-width: 100vw;
    }
  }
}
.disable-expandable () {
  --width: initial;
  --height: initial;
  &:hover { max-width: initial; }
}

.hide-scrollbar {
  &::-webkit-scrollbar { width: 0; height: 0; }
}

[ disabled-content = "true" ],
.container.belt {
  pointer-events: none;
  filter: saturate( 0 ) blur( 2px );
  opacity: 0.5;
}

[ contenteditable ] {
  white-space: pre-wrap;
  display: inline-block;
  &:empty:before {
    content: '...'
  }
}

.button {
  --button-width: 1;
  --button-color: var( --c-frosted-oxford-blue );
  --button-select-color: var( --c-violet );
  --button-hover-color: var( --c-medium-spring-green );
  --button-calc-width: calc(
    var( --button-width ) * var( --dungeon-button-size )
    + ( var(--button-width) - 1 ) * var( --border-width )
  );
  display: inline-block;
  cursor: pointer;
  padding: 1rem;
  width: var( --button-calc-width );
  height: var( --dungeon-button-size );
  vertical-align: middle;
  user-select: none;
  background-color: var( --button-color );
  background-repeat: no-repeat;
  background-position: center;
  &.selected, &.selected:hover, &.selected.hover { background-color: var( --button-select-color ); }
  &:hover, &.hover { background-color: var( --button-hover-color ); }

  &.add { background-image: var( --datauri-plus-icon ); }
  &.close {
    display: none;
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: var( --layout-button-size );
    height: var( --layout-button-size );
    background-color: var( --c-american-bronze );
    background-image: var( --datauri-cross-icon );
    &:hover, &.hover { background-color: var( --c-red ) }
  }

  &.remove, &[ title = 'REMOVE' ] {
    background-color: var( --c-american-bronze );
    background-image: var( --datauri-trash-icon );
    &:hover, &.hover {
      background-color: var( --c-red );
      filter: initial !important;
    }
  }
  &[ is = "expanding-input" ], &.input {
    color: var( --c-chrome-yellow );
    &:before, &:after, input {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      min-width: var( --dungeon-button-size );
      line-height: 100%;
      height: 100%;
      color: inherit;
      text-align: center;
      vertical-align: middle;
      font-weight: bold;
      font-size: calc( var( --dungeon-button-size ) / 2 );
      text-shadow: 1px 1px black;
      background-repeat: no-repeat;
      background-position: center;
    }
    &:before {
      opacity: 0.25;
      pointer-events: none;
    }
  }
}
div.toggle {}
.active > .close.button,
.closeable .close.button {
  display: inline-block;
}

input {
  border : none;
  &:focus { outline : none; }
}

.scrollable-no-scrollbar {
  overflow : scroll;
  -ms-overflow-style : none; /* Internet Explorer 10+ */
  scrollbar-width : none; /* Firefox */
  &::-webkit-scrollbar { display : none; } /* Safari and Chrome */
}

[ is = "expanding-input" ] {
  --expanding-padding: 0px; /* need px because calc doesnt like 0*/
  --expanding-input-padding: 0px;
  --expanding-outline: var( --c-shadow-white );
  --expanding-background: transparent;

  --EP: var( --expanding-padding ); /* shortajnnd padding*/
  --EP2: calc( var( --EP ) * 2 ); /* dbl padding*/
  --TAH: calc( 100% - var( --EP2 ) ); /* text area width/height */
  --TAHB: calc( 100% - var( --EP2 ) - 1rem ); /* text area height /w before title */

  padding: var( --expanding-padding );
  display: inline-block;
  vertical-align: top;
  align-items: center;
  position: relative;
  background-color: var( --expanding-background );
  cursor: text;

  &[ textarea ] {
    overflow: hidden;
    white-space: pre-wrap;

    textarea { height: var( --TAH ); }
    &[ data-before ] textarea { height: var( --TAHB ); }

    &:before { display: block; }
  }

  &::after, input, textarea {
    color: inherit;
    font: inherit;
    padding: var( --expanding-input-padding );
    resize: none;
    background: none;
    appearance: none;
    border: none;
    text-align: inherit;
  }
  &:focus-within {
    outline: dotted 1px var( --expanding-outline );
    background-color: var( --expanding-background );
    textarea:focus, input:focus { outline: none; }
  }
  input, textarea {
    position: absolute;
    width: var( --TAH );
    overflow-y: hidden;
  }
  &:before { content: attr( data-before ); }
  &:after { /* used for automatic sizing */
    content: attr( data-space ) " ";
    position: relative;
    width: auto;
    visibility: hidden;
    white-space: pre-wrap;
  }
}