*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}

.cc-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  z-index: 500;
  background-image: url(../img/cc-panel.png);
  transform-origin: top left;
  transform: scale(2);
  background-position: 0;
  transition: background-image .5s, opacity .5s;
}
.cc-panel.hidden {
  opacity: 0;
  pointer-events: none;
}
.cc-panel.hud {
  opacity: 1;
  background-image: url(../img/cc-panel-hud.png);
  background-position: 0;
  pointer-events: none;
}

.cc-body {
  position: absolute;
  bottom: -30px;
  left: 0;
  width: 325px;
  height: 275px;
  background-image: url(../img/professions/prof-female-fighter.png);
  transition: left .5s ease, bottom .5s ease;
}

.cc-head {
  display: block;
  position: absolute;
  bottom: 106px;
  left: 2px;
  width: 325px;
  height: 275px;
  background-image: url(../img/heads/head-female-human-0.png);
  transition: left .5s ease, bottom .5s ease;
}
.cc-body.hidden { display: none; }
.cc-head.hidden { display: none; }


.cc-hit-points {
  position: absolute;
  bottom: 0px;
  padding-top: 2px;
  width: 33px;
  height: 24px;
  border: 2px solid white;
  background: black;
  color: white;
  font-family: 'pix Chicago';
  font-size: 8px;
  text-align: center;
  opacity: 1;
  pointer-events: none;
  user-select: none;
  transition: opacity .5s;
}
.cc-hit-points.hidden {
  opacity: 0;
}
#cc-hit-points-left {
  left: 0px;
}
#cc-hit-points-right {
  right: 0px;
}
.cc-hit-points.blinks {
    filter: invert(1);
    animation: blink .4s;
    animation-iteration-count: 3;
}
@keyframes blink { 50% { filter: invert(0); }  }



.hud .cc-head.left {
  left: -48px;
  bottom: -84px;
}
.hud .cc-body.left {
  left: -50px;
  bottom: -220px;
}
.hud .cc-head.right {
  left: 48px;
  bottom: -84px;
}
.hud .cc-body.right {
  left: 50px;
  bottom: -220px;
}
.cc-head::before, .cc-body::before, .cc-head::after, .cc-body::after {
  content: '';
  position: absolute;
  display: block;
  z-index: -1;
  left: 2px;
  top: -1px;
  width: 325px;
  height: 275px;
  background-image: inherit;
  filter: brightness(0) invert(1);
  pointer-events: none;
}
.cc-head::after, .cc-body::after {
  left: -2px;
  top: -2px;
}
.cc-head.right::before, .cc-body.right::before {
  filter: none;
  left: 1px;
  top: -1px;
}
.cc-head.right::after, .cc-body.right::after {
  filter: none;
  left: 0px;
  top: -1px;
  z-index: -2;
}
.cc-body.right, .cc-head.right {
  transform: scale(-1,1);
  transform-origin: 330px 0px;
}



/**
 * Editor bits.
 */
.cc-editor {
  position: absolute;
  left: 50%;
  top: 150px;
  width: 150px;
  transform: translate(-50%,0);
  font-family: 'pix Chicago';
  pointer-events: all;
  transition: opacity .5s;
}
.cc-editor.hidden {
  opacity: 0;
  pointer-events: none;
}
.cc-editor input, .cc-editor selector {
  display: block;
  position: relative;
  font-family: 'pix Chicago';
  text-align: center;
  background: white;
  border: 1px solid black;
  width: 100%;
  font-size: 8px;
  outline: none;
  padding: 4px;
  margin-bottom: 4px;
  text-transform: capitalize;
}
.cc-editor selector {
  user-select: none;
}
.cc-editor input::selection {
  color: white;
  background-color: black;
}
.cc-editor button {
  position: relative;
  width: calc(100% - 8px);
  font-family: 'pix Chicago';
  font-size: 8px;
  height: 28px;
  background-image: url(../img/rb-button.png);
  border: none;
  background-color: transparent;
  cursor: pointer;
}
.cc-editor button:active {
  filter: invert(1);
}
.cc-editor button::after {
  content: '';
  position: absolute;
  width: 8px;
  top: 0;
  right: -8px;
  height: 28px;
  background-image: url(../img/rb-button.png);
  background-position: top right;
  border: none;
  background-color: transparent;
  cursor: pointer; 
}

.cc-editor label {
  position: relative;
  font-family: 'pix Chicago';
  font-size: 8px;
  background: white;
  left: 4px;
  top: 4px;
  padding: 0 2px;
  z-index: 10;
  user-select: none;
}


.cc-editor selector::before, .cc-editor selector::after {
  content: '◀';
  position: absolute;
  left: 0px;
  top: 0px;
  font-family: 'pix Chicago';
  font-size: 15px;
  width: 20px;
  height: 22px;
  cursor: pointer;
  line-height: 17px;
  user-select: none;
}
.cc-editor selector::after {
  content: '▶';
  right: 0;
  left: auto;
}

/**
 * The fader.
 */
.cc-fader {
  position: absolute;
  z-index: 1000;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  background-image: url(../img/cc-panel.png);
  background-position: -100%;
}
.cc-fader.fifty {
  opacity: 1;
}
.cc-fader.full {
  opacity: 1;
  background-position: 0%;
}
.hud .cc-fader {
  display: none;
}


/**
 * The header.
 */
.cc-header {
  position: absolute;
  z-index: 2000;
  width: 50%;
  height: 100%;
  left: 0;
  top: 0;
  opacity: 0;
  pointer-events: none;
  background-image: url(../img/cc-header.png);
  background-position: -100%;
}
.hud .cc-header {
  display: none;
  pointer-events: none;
}
.cc-header.left {
  opacity: 1;
  left: 50%;
  background-position: -330px;
}
.cc-header.right { 
  opacity: 1;
  background-position: 0;
}

/**
 * Panel for action buttons.
 */

.cc-actions-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  font-family: 'pix Chicago';
  pointer-events: none;
  transition: opacity .5s;
}
.cc-actions-panel.hidden {
  opacity: 0;
  pointer-events: none;
}
.cc-talk-button {
  display: block;
  position: absolute;
  bottom: 70px;
  width: 120px;
  padding: 6px;
  font-family: 'pix Chicago';
  font-size: 8px;
  pointer-events: all;
  transition: opacity .5s;
  border: 4px double black;
  box-shadow: 0px 16px 0px -10px black;
  line-height: 14px;
  cursor: pointer;
  background: white;
}
.cc-action-button:active {
  filter: invert(1);
}
.cc-talk-button::hover {
  border: 4px solid black;
}
.cc-talk-button.hidden {
  opacity: 0;
  pointer-events: none;
}
#cc-talk-left {
  left: 10px;
  bottom: 150px;
}
#cc-talk-right2 {
  right: 140px;
}
#cc-talk-right {
  right: 10px;
  bottom: 150px;
}


/**
 * Action buttons.
 */
.cc-action-button {
  position: absolute;
  font-family: 'pix Chicago';
  font-size: 8px;
  height: 28px;
  background-image: url(../img/rb-button.png);
  border: none;
  background-color: transparent;
  cursor: pointer;
  pointer-events: all;
  padding: 0 4px 0 12px;
  min-width: 100px;
  transition: opacity .5s;
}
.cc-action-button:active {
  filter: invert(1);
}
.cc-action-button.hidden {
  opacity: 0;
  pointer-events: none;
}
.cc-action-button::after {
  content: '';
  position: absolute;
  width: 8px;
  top: 0;
  right: -8px;
  height: 28px;
  background-image: url(../img/rb-button.png);
  background-position: top right;
  border: none;
  background-color: transparent;
}
.cc-action-button::before {
  content: '';
  position: absolute;
  width: calc(100% + 1px);
  background-color: transparent;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  top: 3px;
  right: -5px;
  height: 22px;
  background-image: url(../img/rb-button-recharging2.png);
  z-index: 20;
  transition: width 0s linear;
  pointer-events: none;
}
.cc-action-button.recharged::before {
  width: 0;
  transition: none;
  border-left: 1px dotted black;
}
.cc-action-button.recharged-after-1000::before {
  width: 0;
  transition: width 1s linear;
  border-left: 1px dotted black;
}
.cc-action-button.recharged-after-1000::before {
  width: 0;
  transition: width 1s linear;
  border-left: 1px dotted black;
}
.cc-action-button.recharged-after-2000::before {
  width: 0;
  transition: width 2s linear;
  border-left: 1px dotted black;
}
.cc-action-button.recharged-after-3000::before {
  width: 0;
  transition: width 3s linear;
  border-left: 1px dotted black;
}
.cc-action-button.recharged-after-4000::before {
  width: 0;
  transition: width 4s linear;
  border-left: 1px dotted black;
}
.cc-action-button.recharged-after-5000::before {
  width: 0;
  transition: width 5s linear;
  border-left: 1px dotted black;
}


#cc-action-left {
  bottom: 20px;
  left: 150px;
}
#cc-action-right {
  bottom: 20px;
  right: 158px;
}