@keyframes bob {
  from,
  to {
    top: -1em;
  }
  50% {
    top: -2em;
  }
}
@keyframes bob-bottom {
  from,
  to {
    bottom: 1em;
  }
  50% {
    bottom: -1em;
  }
}
@keyframes speak {
  from,
  to {
    transform: scale(1.2) rotate(5deg) translateY(0vw);
  }
  50% {
    transform: scale(1.2) rotate(-5deg) translateY(-2vw);
  }
}
@keyframes xp-ascend {
  from {
    bottom: -20vw;
    opacity: 1;
    transform: rotate(5deg) scale(0.9);
  }
  to {
    bottom: 50vh;
    opacity: 0;
    transform: rotate(-5deg) scale(1.2);
  }
}
@keyframes pulse-audition-bg {
  from,
  to {
    background: #111;
  }
  50% {
    background: #5e5e5e;
  }
}
@keyframes setpiece {
  from {
    opacity: 1;
    transform: scale(1.3) rotate(5deg);
  }
  to {
    opacity: 0;
    transform: scale(0.8) rotate(-5deg);
  }
}
@keyframes ability-annotation {
  from,
  to {
    transform: scale(1) rotate(-5deg);
  }
  50% {
    transform: scale(0.8) rotate(5deg);
  }
}
@font-face {
  font-family: 'Rum Raisin';
  font-style: normal;
  font-weight: 400;
  src: local('Rum Raisin'), local('RumRaisin-Regular'), url(fonts/rumraisin.woff) format('woff');
}
@font-face {
  font-family: 'fa';
  font-style: normal;
  font-weight: 900;
  src: url(fonts/fa-solid-900.woff2) format('woff2');
}
@media (max-width: 25em) {
  body {
    font-size: 1em !important;
  }
}
@media (max-width: 25em) and (max-width: 18em) {
  body {
    font-size: 0.8em !important;
  }
}
html {
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}
* {
  padding: 0;
  border: 0;
  margin: 0;
  list-style: none;
  cursor: inherit;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
body,
button {
  font-family: 'Rum Raisin', sans-serif;
}
body {
  background-color: #fdfdfd;
  color: #111;
  letter-spacing: 0.05em;
  letter-spacing: 0;
  font-size: 1.1em;
  cursor: default;
}
a[href] {
  text-shadow: 0.1em 0.1em 0 #fdfdfd;
  text-decoration: none;
  color: #111;
  cursor: pointer;
}
a[href]:hover,
a[href]:focus {
  color: #fdfdfd;
  text-shadow: 0.1em 0.1em 0 #111;
}
.sprite {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.sprite img {
  position: absolute;
  left: 0;
  right: 0;
  height: 100%;
}
.portrait.shiny img,
.sprite.shiny img {
  filter: invert(1);
}
#menu li {
  border-bottom: 1px solid #979797;
}
#menu li:last-child {
  border-bottom: none;
}
#menu li > a,
#menu li > div {
  display: block;
  padding: 1em 1em;
  background-color: #ddd;
  color: rgba(17, 17, 17, 0.5);
}
#menu li > a[href],
#menu li > div[href] {
  background-color: #bbb;
  color: #111;
}
#menu li > a[href]:hover,
#menu li > div[href]:hover,
#menu li > a[href]:focus,
#menu li > div[href]:focus {
  color: #fdfdfd;
}
#menu li.meta > a,
#menu li.meta > div {
  background-color: #ddd;
}
.catalog {
  padding: 0.6em 0 8em;
  text-align: center;
}
.catalog .idol {
  height: 6em;
  max-height: 29vw;
  width: 6em;
  max-width: 29vw;
  position: relative;
  cursor: pointer;
  margin: 0.2em 0.1em 0;
  background-color: rgba(221, 221, 221, 0.5);
  display: inline-block;
  overflow: hidden;
  border-radius: 0.3em;
}
.catalog .idol.affinity-rock {
  background-color: hsla(0, 60%, 60%, 0.9);
}
.catalog .idol.affinity-paper {
  background-color: hsla(240, 60%, 60%, 0.9);
}
.catalog .idol.affinity-scissors {
  background-color: hsla(120, 50%, 55%, 0.9);
}
.catalog .idol .portrait {
  margin-top: -3.5em;
  margin-left: -3.5em;
  height: 200%;
  left: 0;
}
.catalog .idol .portrait .sprite {
  height: 22em;
  width: 100%;
}
.catalog .idol .portrait-stats {
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(17, 17, 17, 0.85);
  border-radius: 0 0 0.5em 0;
  padding: 0 0.3em 0.2em;
  line-height: 1;
}
.catalog .idol .portrait-stats > span {
  display: block;
}
.catalog .idol .portrait-stats > span.positive {
  color: hsl(120, 50%, 55%);
}
.catalog .idol .portrait-stats > span.negative {
  color: hsl(0, 60%, 60%);
}
.catalog .idol .input {
  box-shadow: 0 0.1em 0.3em rgba(17, 17, 17, 0.5);
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.2em;
  background-color: #fdfdfd;
  position: relative;
  margin-top: -0.05em;
  position: absolute;
  bottom: 0.2em;
  right: 0.2em;
}
.catalog .idol .input::after {
  font-size: 0.8em;
  content: '✔️';
  color: rgba(17, 17, 17, 0);
  text-shadow: 0 0 0 rgba(17, 17, 17, 0.1);
  display: inline-block;
  margin: 0.1em 0;
  width: 100%;
  text-align: center;
}
.catalog .idol.active .input {
  background-color: #111;
}
.catalog .idol.active .input::after {
  text-shadow: 0 0 0 #fdfdfd;
}
.catalog .idol.favourite::after {
  color: hsl(60, 80%, 50%);
  text-shadow: 0 0 0.5em hsl(60, 80%, 50%);
  content: '★';
  background-color: rgba(17, 17, 17, 0.85);
  text-shadow: none !important;
  position: absolute;
  display: block;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  border-radius: 0 0 0 0.5em;
  top: 0em;
  right: 0em;
}
#signature {
  position: relative;
  padding: 2em 0 2em;
  bottom: 7em;
  text-align: center;
}
#signature img {
  opacity: 0.4;
  width: 5em;
  height: 5em;
}
#signature img:focus,
#signature img:hover {
  opacity: 0.6;
}
#signature ul {
  margin-top: 0.5em;
}
#signature ul li {
  display: inline-block;
}
#signature ul li::after {
  content: ' ・ ';
}
#signature ul li:last-child::after {
  content: none;
}
#unit {
  height: 7em;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: rgba(17, 17, 17, 0.9);
  color: #fdfdfd;
}
#unit.empty {
  display: none;
}
#unit #show-unit-details {
  color: inherit;
  text-shadow: inherit;
}
#unit #show-unit-details h2 {
  display: block;
  position: absolute;
  left: 0;
  top: -1.75em;
  height: 1.75em;
  box-sizing: border-box;
  padding: 0.3em 0.5em;
  background-color: rgba(17, 17, 17, 0.9);
  font-size: 1.05em;
  border-radius: 0 0.5em 0 0;
}
#unit #show-unit-details h2::after {
  content: '⌃';
  padding-left: 0.3em;
}
#unit ul.unit {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
#unit ul.unit li {
  display: inline-block;
  cursor: pointer;
}
#unit ul.unit li .portrait {
  height: 14em;
  width: 14em;
  margin: -2.33333333em -2.8em;
}
#unit ul.unit li .portrait img {
  height: 22.4em;
}
#unit-detail {
  position: fixed;
  z-index: 50;
  top: 0;
  opacity: 1;
  width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
}
#unit-detail > div {
  background-color: #fdfdfd;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s, top 0.5s;
}
#unit-detail > div #dismiss-unit-details {
  position: absolute;
  left: 0;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
  background-color: #fdfdfd;
  border-radius: 0 0.5em 0.5em 0;
  z-index: 40;
}
#unit-detail > div #dismiss-unit-details h1 {
  font-size: 1.1em;
  margin: 0.2em 0.4em;
}
#unit-detail > div #dismiss-unit-details h1::before {
  content: '⌄';
  padding-right: 0.2em;
}
#unit-detail > div ul li {
  height: 32vh;
  height: calc(var(--vh, 1vh) * 32);
  border-bottom-width: 2vh;
  border-bottom-width: calc(var(--vh, 1vh) * 2);
  border-bottom-style: solid;
  border-bottom-color: #fdfdfd;
  color: #fdfdfd;
  position: relative;
  overflow: hidden;
  text-align: right;
}
#unit-detail > div ul li .meta {
  padding-top: 3vh;
  padding-left: 5vw;
  padding-right: 25vh;
}
#unit-detail > div ul li .meta h2 {
  font-size: 1.4em;
}
#unit-detail > div ul li .meta .bio {
  padding: 0.5em 0;
}
#unit-detail > div ul li .meta blockquote {
  font-size: 1.1em;
}
@media (max-height: 40em) {
  #unit-detail > div ul li .meta .bio {
    display: none;
  }
}
#unit-detail > div ul li.affinity-rock {
  background-color: hsl(0, 60%, 60%);
}
#unit-detail > div ul li.affinity-rock::after {
  transform: rotate(60deg) !important;
}
#unit-detail > div ul li.affinity-paper {
  background-color: hsl(240, 60%, 60%);
}
#unit-detail > div ul li.affinity-scissors {
  background-color: hsl(120, 50%, 55%);
}
#unit-detail > div ul li::after {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  font-family: 'fa';
  line-height: 0;
  top: -0.3em;
  margin-left: 0.1em;
  transform-origin: center;
}
#unit-detail > div ul li.affinity-rock::after {
  content: '\f255';
  color: hsl(0, 60%, 60%);
  transform: rotate(90deg);
}
#unit-detail > div ul li.affinity-paper::after {
  content: '\f256';
  color: hsl(240, 60%, 60%);
}
#unit-detail > div ul li.affinity-scissors::after {
  content: '\f257';
  color: hsl(120, 50%, 55%);
}
#unit-detail > div ul li::after {
  display: block;
  color: #fdfdfd !important;
  font-size: 20vh;
  opacity: 0.5;
  z-index: 10;
  position: absolute;
  right: 0;
  top: 15vh;
  transform: rotate(-30deg);
}
#unit-detail > div ul li .portrait {
  text-align: right;
  width: 30vh;
  height: 40vh;
  position: absolute;
  z-index: 20;
  right: -10vh;
  top: 0;
  transform: rotate(-10deg);
}
#unit-detail > div ul li:nth-child(2n+1) {
  text-align: left;
}
#unit-detail > div ul li:nth-child(2n+1) .meta {
  padding-left: 25vh;
  padding-right: 5vw;
}
#unit-detail > div ul li:nth-child(2n+1)::after {
  right: auto;
  left: -5vh;
}
#unit-detail > div ul li:nth-child(2n+1) .portrait {
  text-align: left;
  right: auto;
  left: 0;
  transform: rotate(10deg);
}
#unit-detail.hidden {
  pointer-events: none;
}
#unit-detail.hidden > div {
  opacity: 0;
  top: 100%;
}
#idol-detail {
  position: fixed;
  top: 0;
  overflow: hidden;
  width: 100%;
  min-height: 100vh;
  min-height: calc(var(--vh, 1vh) * 100);
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
  z-index: 100;
}
#idol-detail[data-affinity="rock"] {
  background-color: hsla(0, 60%, 70%, 0.95);
}
#idol-detail[data-affinity="rock"] a[href] {
  background-color: hsl(0, 60%, 50%);
}
#idol-detail[data-affinity="paper"] {
  background-color: hsla(240, 60%, 70%, 0.95);
}
#idol-detail[data-affinity="paper"] a[href] {
  background-color: hsl(240, 60%, 50%);
}
#idol-detail[data-affinity="scissors"] {
  background-color: hsla(120, 50%, 65%, 0.95);
}
#idol-detail[data-affinity="scissors"] a[href] {
  background-color: hsl(120, 50%, 45%);
}
#idol-detail.shown {
  opacity: 1;
  pointer-events: unset;
}
#idol-detail .portrait {
  width: 150vw;
  height: 150vw;
  text-align: right;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  text-align: center;
}
#idol-detail .portrait .sprite {
  display: inline-block;
  left: 15vw;
  max-height: 150vh;
}
#idol-detail .summary,
#idol-detail .bio {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
}
#idol-detail .bubble {
  margin: 0;
  padding: 0.5em;
  background-color: rgba(253, 253, 253, 0.7);
}
#idol-detail .summary {
  left: 0;
  top: 0;
}
#idol-detail .summary .nametag,
#idol-detail .summary .stats,
#idol-detail .summary .abilities {
  float: left;
  clear: both;
}
#idol-detail .summary .nametag {
  border-radius: 0 0 0.5em 0;
}
#idol-detail .summary .nametag .name::after {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  font-family: 'fa';
  line-height: 0;
  top: -0.3em;
  margin-left: 0.1em;
  transform-origin: center;
}
#idol-detail .summary .nametag .name.affinity-rock::after {
  content: '\f255';
  color: hsl(0, 60%, 60%);
  transform: rotate(90deg);
}
#idol-detail .summary .nametag .name.affinity-paper::after {
  content: '\f256';
  color: hsl(240, 60%, 60%);
}
#idol-detail .summary .nametag .name.affinity-scissors::after {
  content: '\f257';
  color: hsl(120, 50%, 55%);
}
#idol-detail .summary .nametag .name::after {
  font-size: 0.8em;
  margin-left: 0;
}
#idol-detail .summary .nametag .name .favourite {
  font-size: 0.8em;
  margin-right: 0.2em;
  box-shadow: 0 0.1em 0.3em rgba(17, 17, 17, 0.5);
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.2em;
  background-color: #fdfdfd;
  position: relative;
  margin-top: -0.05em;
}
#idol-detail .summary .nametag .name .favourite::after {
  font-size: 0.8em;
  content: '✔️';
  color: rgba(17, 17, 17, 0);
  text-shadow: 0 0 0 rgba(17, 17, 17, 0.1);
  display: inline-block;
  margin: 0.1em 0;
  width: 100%;
  text-align: center;
}
#idol-detail .summary .nametag .name .favourite::after {
  content: '☆';
  font-weight: normal;
  font-size: 0.9em;
  margin-top: 0.05em;
}
#idol-detail .summary .nametag .name .favourite.selected {
  background-color: #111;
}
#idol-detail .summary .nametag .name .favourite.selected::after {
  text-shadow: 0 0 0 #fdfdfd;
}
#idol-detail .summary .nametag .name .favourite.selected::after {
  color: hsl(60, 80%, 50%);
  text-shadow: 0 0 0.5em hsl(60, 80%, 50%);
  content: '★';
}
#idol-detail .summary .nametag .membership .input {
  box-shadow: 0 0.1em 0.3em rgba(17, 17, 17, 0.5);
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.2em;
  background-color: #fdfdfd;
  position: relative;
  margin-top: -0.05em;
  margin-left: 0.15em;
  display: inline-block !important;
}
#idol-detail .summary .nametag .membership .input::after {
  font-size: 0.8em;
  content: '✔️';
  color: rgba(17, 17, 17, 0);
  text-shadow: 0 0 0 rgba(17, 17, 17, 0.1);
  display: inline-block;
  margin: 0.1em 0;
  width: 100%;
  text-align: center;
}
#idol-detail .summary .nametag .membership .input.active {
  background-color: #111;
}
#idol-detail .summary .nametag .membership .input.active::after {
  text-shadow: 0 0 0 #fdfdfd;
}
#idol-detail .summary .nametag .membership span {
  font-size: 1.2em;
  margin-left: 0.3em;
}
#idol-detail .summary .stats,
#idol-detail .summary .abilities {
  margin-top: 0.5em;
  border-radius: 0 0.5em 0.5em 0;
}
#idol-detail .summary .stats .rarity {
  text-align: center;
}
#idol-detail .summary .stats .rarity::before {
  content: '✪';
  padding-right: 0.2em;
}
#idol-detail .summary .stats dl dt {
  font-weight: bold;
  width: 0;
  height: 0;
  clear: both;
}
#idol-detail .summary .stats dl dd {
  width: 5.5em;
  text-align: right;
  float: left;
}
#idol-detail .summary .stats dl::after {
  content: ' ';
  clear: both;
  display: block;
  height: 0;
}
#idol-detail .summary .stats dl dd {
  width: 8.5em !important;
}
#idol-detail .summary .abilities li::after {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  font-family: 'fa';
  line-height: 0;
  top: -0.3em;
  margin-left: 0.1em;
  transform-origin: center;
}
#idol-detail .summary .abilities li.affinity-rock::after {
  content: '\f255';
  color: hsl(0, 60%, 60%);
  transform: rotate(90deg);
}
#idol-detail .summary .abilities li.affinity-paper::after {
  content: '\f256';
  color: hsl(240, 60%, 60%);
}
#idol-detail .summary .abilities li.affinity-scissors::after {
  content: '\f257';
  color: hsl(120, 50%, 55%);
}
#idol-detail .bio {
  border-radius: 0 0.5em 0 0;
  width: 90vw;
  max-width: 30em;
  bottom: 0;
  left: 0;
  padding-bottom: calc(env(safe-area-inset-bottom) + 0.5em);
}
#idol-detail .bio blockquote {
  padding-top: 0.5em;
  font-style: italic;
}
@media (max-width 35em) {
  #idol-detail .bio {
    border-radius: 0;
    width: 100vw;
  }
}
#idol-detail .actions {
  clear: both;
  padding: 0.5em;
}
#idol-detail .actions li {
  margin-bottom: 0.5em;
}
#idol-detail .actions li a {
  display: inline-block;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
  text-shadow: none;
  color: #fdfdfd;
}
#idol-detail .actions li a:hover,
#idol-detail .actions li a:focus {
  background-color: #111 !important;
}
#idol-detail .close {
  top: 0;
  right: 0;
  position: absolute;
  margin: 1em;
  z-index: 3;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
  text-shadow: none;
  color: #fdfdfd;
}
#idol-detail .close:hover,
#idol-detail .close:focus {
  background-color: #111 !important;
}
#barcode-image,
#load-game {
  display: none;
}
#battle {
  display: none;
}
body.in-battle #battle {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background-color: #fdfdfd;
  z-index: 5;
  overflow: hidden;
  box-sizing: border-box;
}
body.in-battle #battle #flee {
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
  margin: 0.5em;
  position: absolute;
  top: 0;
  right: 0;
}
body.in-battle #battle .idol-list {
  color: #fdfdfd;
  background-color: #282828;
  text-align: center;
  width: 100vw;
}
body.in-battle #battle .idol-list::before {
  display: block;
  font-size: 1.5em;
  width: 100%;
  margin-bottom: -0.5em;
}
body.in-battle #battle .idol-list li {
  display: inline-block;
  margin: 0 -2vh;
  position: relative;
  transition: transform 1s;
}
body.in-battle #battle .idol-list li .health-bar {
  overflow: hidden;
  position: absolute;
  box-sizing: border-box;
  border-radius: 0.3vw;
  width: 50%;
  bottom: 2.1em;
  left: 25%;
  box-shadow: 0 0.1em 0.4em #111;
  background-color: rgba(253, 253, 253, 0.4);
  transition: opacity 2s;
  opacity: 1;
  height: 2vw;
  max-height: 2vh !important;
}
body.in-battle #battle .idol-list li .health-bar .health-bar-content,
body.in-battle #battle .idol-list li .health-bar .health-bar-trail {
  border-radius: 0.3vw;
  height: 100%;
}
body.in-battle #battle .idol-list li .health-bar .health-bar-content {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
body.in-battle #battle .idol-list li .health-bar .health-bar-trail {
  transition: width 2s;
  position: relative;
  right: 1px;
  z-index: 1;
  background-color: rgba(153, 0, 0, 0.7);
  box-shadow: 0 0 0.2em #111;
}
body.in-battle #battle .idol-list li .health-bar.affinity-rock .health-bar-content {
  background-color: hsl(0, 60%, 80%);
}
body.in-battle #battle .idol-list li .health-bar.affinity-paper .health-bar-content {
  background-color: hsl(240, 60%, 80%);
}
body.in-battle #battle .idol-list li .health-bar.affinity-scissors .health-bar-content {
  background-color: hsl(120, 50%, 75%);
}
body.in-battle #battle .idol-list li .portrait {
  transition: transform 0.2s;
  display: block;
  height: 30vw;
  max-height: 25vh !important;
  width: 30vw;
  max-width: 25vh !important;
  margin-bottom: 2em;
  transform-origin: 40% 100%;
  overflow: hidden;
  position: relative;
}
body.in-battle #battle .idol-list li .portrait .sprite {
  height: 50vw;
  max-height: 42vh !important;
  width: 100%;
}
body.in-battle #battle .idol-list li .portrait .sprite img {
  position: static;
  text-align: center;
  height: 100%;
  margin: 0 -50%;
}
body.in-battle #battle .idol-list li .portrait::after {
  content: ' ';
  pointer-events: none;
  display: block;
  background: linear-gradient(to bottom, rgba(40, 40, 40, 0), rgba(40, 40, 40, 0) 80%, #282828);
  position: absolute;
  top: 0;
  width: 100%;
  height: 30vw;
  max-height: 25vh !important;
}
body.in-battle #battle .idol-list li .name {
  position: absolute;
  height: 1.5em;
  margin: 0.2em 0;
  bottom: 0;
  left: 0;
  width: 30vw;
  max-width: 25vh !important;
  text-align: center;
  white-space: nowrap;
}
body.in-battle #battle .idol-list li .name::after {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  font-family: 'fa';
  line-height: 0;
  top: -0.3em;
  margin-left: 0.1em;
  transform-origin: center;
}
body.in-battle #battle .idol-list li .name.affinity-rock::after {
  content: '\f255';
  color: hsl(0, 60%, 60%);
  transform: rotate(90deg);
}
body.in-battle #battle .idol-list li .name.affinity-paper::after {
  content: '\f256';
  color: hsl(240, 60%, 60%);
}
body.in-battle #battle .idol-list li .name.affinity-scissors::after {
  content: '\f257';
  color: hsl(120, 50%, 55%);
}
@media (max-width: 35em) {
  body.in-battle #battle .idol-list li .health-bar {
    bottom: 0.3em;
    width: 42%;
  }
  body.in-battle #battle .idol-list li .portrait {
    margin-bottom: 0.2em;
  }
  body.in-battle #battle .idol-list li .name::after {
    position: relative;
    right: 35%;
    font-size: 3vw;
    top: 0.6em;
  }
  body.in-battle #battle .idol-list li .name span {
    display: none;
  }
}
body.in-battle #battle .idol-list li.fighting .portrait,
body.in-battle #battle .idol-list li.focussed .portrait {
  transform: scale(1.3);
}
body.in-battle #battle .idol-list li.focussed::before {
  pointer-events: none;
  color: #111;
  content: '▼';
  font-size: 5vh;
  font-weight: bold;
  position: absolute;
  left: 0;
  width: 100%;
  animation-duration: 2s;
  animation-name: bob;
  animation-iteration-count: infinite;
}
body.in-battle #battle .idol-list li.dead {
  transform: rotate(-90deg) scale(0.5) translateX(-30%);
  opacity: 0.5;
}
body.in-battle #battle .idol-list li.dead .health-bar {
  opacity: 0;
}
body.in-battle #battle #enemy-idols {
  padding-top: 0.5em;
}
body.in-battle #battle #enemy-idols::after {
  content: 'Enemy';
  text-transform: uppercase;
  position: absolute;
  top: -9vw;
  left: -9vw;
  width: 100vw;
  text-align: center;
  font-size: 10vw;
  transform-origin: 50vw 50vw;
  transform: rotate(-45deg);
  color: rgba(253, 253, 253, 0.5);
}
body.in-battle #battle #enemy-idols li label input {
  position: absolute;
  top: -5em;
  width: 90%;
  text-align: center;
}
body.in-battle #battle #enemy-idols li label input::before {
  position: relative;
  top: 5em;
  right: 50%;
  content: ' ';
  border-radius: 50%;
  height: 25vw;
  max-height: 20vh !important;
  width: 25vw;
  max-width: 20vh !important;
  box-sizing: border-box;
  border: 1em solid #fdfdfd;
  text-align: center;
  opacity: 0;
  display: inline-block;
  pointer-events: none;
}
body.in-battle #battle #enemy-idols li label input:checked::before {
  opacity: 0.8 !important;
}
body.in-battle #battle #enemy-idols li.affinity-rock label input::before {
  border-color: hsl(0, 60%, 60%) !important;
}
body.in-battle #battle #enemy-idols li.affinity-paper label input::before {
  border-color: hsl(240, 60%, 60%) !important;
}
body.in-battle #battle #enemy-idols li.affinity-scissors label input::before {
  border-color: hsl(120, 50%, 55%) !important;
}
body.in-battle #battle #enemy-idols li.dead label input {
  display: none;
}
body.in-battle #battle #player-idols {
  position: fixed;
  bottom: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
body.in-battle #battle .portrait .sprite,
body.in-battle #battle .portrait canvas {
  margin: 0 auto;
}
body.in-battle #battle .portrait canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
body.in-battle #battle .portrait::before {
  display: inline-block;
  position: absolute;
  content: none;
  color: #fdfdfd;
  text-shadow: 0 0 0.2em #111;
  font-size: 2em;
  top: 30%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
  transform-origin: center;
  animation-duration: 1s;
  animation-name: ability-annotation;
}
body.in-battle #battle .portrait[data-ability-name]::before {
  content: attr(data-ability-name);
}
body.in-battle #ability-prompt {
  max-width: 20em;
  text-align: center;
  z-index: 10;
  padding: 1em;
  margin: 0 auto;
  position: relative;
  z-index: 20;
}
body.in-battle #ability-prompt ul {
  text-align: left;
  max-width: 15em;
  margin: 0 auto;
  padding: 0.5em;
}
body.in-battle #ability-prompt ul label input {
  margin-right: 0.5em;
}
body.in-battle #ability-prompt ul label::after {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  font-family: 'fa';
  line-height: 0;
  top: -0.3em;
  margin-left: 0.1em;
  transform-origin: center;
}
body.in-battle #ability-prompt ul label.affinity-rock::after {
  content: '\f255';
  color: hsl(0, 60%, 60%);
  transform: rotate(90deg);
}
body.in-battle #ability-prompt ul label.affinity-paper::after {
  content: '\f256';
  color: hsl(240, 60%, 60%);
}
body.in-battle #ability-prompt ul label.affinity-scissors::after {
  content: '\f257';
  color: hsl(120, 50%, 55%);
}
body.in-battle #ability-prompt button {
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
  text-shadow: none;
  color: #fdfdfd;
  margin: 0.5em;
  font-size: 1.5em;
  cursor: pointer;
}
body.in-battle #ability-prompt button:hover,
body.in-battle #ability-prompt button:focus {
  background-color: #111 !important;
}
body.in-battle #ability-prompt button::after {
  color: #fdfdfd;
  padding-left: 0.3em;
}
body.in-battle #ability-prompt button[data-affinity]::after {
  font-family: 'fa';
  display: inline-block;
  transform-origin: center;
}
body.in-battle #ability-prompt button[data-affinity="rock"] {
  background-color: hsl(0, 60%, 60%);
}
body.in-battle #ability-prompt button[data-affinity="rock"]::after {
  content: '\f255';
  transform: rotate(90deg);
  position: relative;
  top: -0.1em;
  left: 0.2em;
}
body.in-battle #ability-prompt button[data-affinity="paper"] {
  background-color: hsl(240, 60%, 60%);
}
body.in-battle #ability-prompt button[data-affinity="paper"]::after {
  content: '\f256';
}
body.in-battle #ability-prompt button[data-affinity="scissors"] {
  background-color: hsl(120, 50%, 55%);
}
body.in-battle #ability-prompt button[data-affinity="scissors"]::after {
  content: '\f257';
}
body.in-battle #deets-space {
  opacity: 0;
  pointer-events: none;
  z-index: 5000;
  position: absolute;
  left: 2vw;
  width: 96vw;
  border-radius: 0.2em;
  box-sizing: border-box;
  padding: 0.7em 1em;
  color: #fdfdfd;
  background-color: #111;
  transition: opacity 0.5s, background-color 0.5s;
}
body.in-battle #deets-space h2 {
  color: rgba(17, 17, 17, 0);
  text-shadow: 0 0 0 #fdfdfd;
}
body.in-battle #deets-space h2::after {
  margin-left: 0.3em;
  font-weight: normal;
}
body.in-battle #deets-space dl,
body.in-battle #deets-space p,
body.in-battle #deets-space blockquote {
  margin-top: 0.5em;
}
body.in-battle #deets-space dl dt {
  clear: both;
  width: 30vw;
  float: left;
}
body.in-battle #deets-space[data-affinity] h2::after {
  font-family: 'fa';
  display: inline-block;
  transform-origin: center;
}
body.in-battle #deets-space[data-affinity="rock"] {
  background-color: hsl(0, 60%, 60%);
}
body.in-battle #deets-space[data-affinity="rock"] h2::after {
  content: '\f255';
  transform: rotate(90deg);
  position: relative;
  top: -0.1em;
  left: 0.2em;
}
body.in-battle #deets-space[data-affinity="paper"] {
  background-color: hsl(240, 60%, 60%);
}
body.in-battle #deets-space[data-affinity="paper"] h2::after {
  content: '\f256';
}
body.in-battle #deets-space[data-affinity="scissors"] {
  background-color: hsl(120, 50%, 55%);
}
body.in-battle #deets-space[data-affinity="scissors"] h2::after {
  content: '\f257';
}
body.in-battle #deets-space.visible {
  opacity: 1;
}
body.in-battle #deets-space.enemy {
  top: auto;
  bottom: 2vw;
}
body.in-battle #deets-space.player {
  top: 2vw;
  bottom: auto;
}
body.in-battle #catalog,
body.in-battle #unit {
  display: none;
}
body.overlay {
  overflow: hidden;
}
#catalog {
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom);
}
body.icon {
  overflow: hidden;
  width: 512px;
  height: 512px;
}
body.icon .icon-container {
  overflow: hidden;
  position: relative;
  width: 512px;
  height: 512px;
}
body.icon .icon-container .portrait {
  width: 1689.6px;
  height: 1689.6px;
}
body.icon .icon-container .portrait .sprite {
  left: -256px;
  top: -256px;
}
body.icon .icon-container::before {
  font-family: 'fa';
  content: '\f621';
  position: absolute;
  height: 1024px;
  top: -153.6px;
  width: 921.6px;
  left: -204.8px;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  font-size: 921.6px;
  z-index: -1;
  transform: rotate(15deg);
}
body.icon .icon-container.affinity-rock {
  color: hsl(0, 60%, 60%);
  background-color: hsla(0, 60%, 60%, 0.5);
}
body.icon .icon-container.affinity-paper {
  color: hsl(240, 60%, 60%);
  background-color: hsla(240, 60%, 60%, 0.5);
}
body.icon .icon-container.affinity-scissors {
  color: hsl(120, 50%, 55%);
  background-color: hsla(120, 50%, 55%, 0.5);
}
body.batch {
  background-color: #282828;
  text-align: center;
}
body.batch > div > div .sprite {
  height: 50vh;
  max-width: 100vw;
  text-align: center;
}
body.batch > div > div .sprite img {
  display: inline-block;
  max-height: 100%;
  max-width: 100%;
  position: static;
}
#agency-meta {
  position: relative;
  height: 3.2em;
  z-index: 1;
}
#agency-meta #agency-summary {
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
  display: block;
  background-color: #ddd;
  position: absolute;
  overflow: hidden;
  left: 0.5em;
  top: 1em;
  z-index: 35;
  box-sizing: border-box;
  transition: border-color 0.5s;
  border: 0.1em solid rgba(17, 17, 17, 0);
  text-shadow: 0.1em 0.1em 0 #fdfdfd;
}
#agency-meta #agency-summary:hover,
#agency-meta #agency-summary:focus {
  text-shadow: 0.1em 0.1em 0 #111;
}
#agency-meta #agency-summary #agency-name {
  position: relative;
  z-index: 2;
  margin-right: 2em;
}
#agency-meta #agency-summary #agency-level {
  position: relative;
  z-index: 2;
  display: inline-block;
  transform-origin: center;
  transform: scale(1.2);
}
#agency-meta #agency-summary #agency-level span {
  font-size: 0.7em;
}
#agency-meta #agency-summary #agency-level strong {
  margin-left: 0.1em;
  font-weight: normal;
}
#agency-meta #agency-summary #agency-level-progress {
  box-shadow: 0 0 1em #fdfdfd;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 1;
  border-radius: 0.2em;
  background-color: rgba(17, 17, 17, 0.2);
}
#agency-meta #sort-button {
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
  position: absolute;
  z-index: 35;
  box-sizing: border-box;
  transition: background-color 0.5s, border-color 0.5s;
  border: 0.1em solid rgba(17, 17, 17, 0);
  right: 0.5em;
  top: 1em;
}
#agency-meta #upgrade-list,
#agency-meta #sort-list {
  box-shadow: 0 0.1em 0.3em rgba(17, 17, 17, 0.5);
  position: absolute;
  top: 0.5em;
  width: 90vw;
  max-width: 20em;
  overflow: hidden;
  z-index: 2;
}
#agency-meta #upgrade-list li,
#agency-meta #sort-list li {
  border-bottom: 1px solid #979797;
}
#agency-meta #upgrade-list li:last-child,
#agency-meta #sort-list li:last-child {
  border-bottom: none;
}
#agency-meta #upgrade-list li > a,
#agency-meta #sort-list li > a,
#agency-meta #upgrade-list li > div,
#agency-meta #sort-list li > div {
  display: block;
  padding: 1em 1em;
  background-color: #ddd;
  color: rgba(17, 17, 17, 0.5);
}
#agency-meta #upgrade-list li > a[href],
#agency-meta #sort-list li > a[href],
#agency-meta #upgrade-list li > div[href],
#agency-meta #sort-list li > div[href] {
  background-color: #bbb;
  color: #111;
}
#agency-meta #upgrade-list li > a[href]:hover,
#agency-meta #sort-list li > a[href]:hover,
#agency-meta #upgrade-list li > div[href]:hover,
#agency-meta #sort-list li > div[href]:hover,
#agency-meta #upgrade-list li > a[href]:focus,
#agency-meta #sort-list li > a[href]:focus,
#agency-meta #upgrade-list li > div[href]:focus,
#agency-meta #sort-list li > div[href]:focus {
  color: #fdfdfd;
}
#agency-meta #upgrade-list li.meta > a,
#agency-meta #sort-list li.meta > a,
#agency-meta #upgrade-list li.meta > div,
#agency-meta #sort-list li.meta > div {
  background-color: #ddd;
}
#agency-meta #sort-list {
  border-radius: 0.5em 0 0 0.5em;
  right: -22em;
  transition: right 0.5s;
}
#agency-meta #upgrade-list {
  border-radius: 0 0.5em 0.5em 0;
  left: -22em;
  transition: left 0.5s;
}
#agency-meta #upgrade-list .points-count {
  text-align: right;
}
#agency-meta #upgrade-list .points-count div {
  color: #111;
}
#agency-meta #upgrade-list .points-count strong {
  font-weight: normal;
}
#agency-meta #upgrade-list li > .upgrade {
  display: table-row;
}
#agency-meta #upgrade-list li > .upgrade .upgrade-meta,
#agency-meta #upgrade-list li > .upgrade .upgrade-status {
  display: table-cell;
  vertical-align: middle;
  padding: 0.5em;
}
#agency-meta #upgrade-list li > .upgrade .upgrade-meta {
  color: #111;
  padding-right: 0 !important;
}
#agency-meta #upgrade-list li > .upgrade .upgrade-meta .upgrade-description {
  font-size: 0.8em;
  text-shadow: none;
}
#agency-meta #upgrade-list li > .upgrade .upgrade-status {
  width: 6em;
}
#agency-meta #upgrade-list li > .upgrade .upgrade-status .current-level {
  display: block;
  float: right;
}
#agency-meta #upgrade-list li > .upgrade .upgrade-status .current-level .upgrade-button {
  opacity: 0;
  transition: opacity 0.5s;
  display: inline-block;
  text-shadow: none;
  color: #fdfdfd;
  padding: 0.1em 0.5em;
  margin: -0.1em 0 -1em;
  background-color: #888888;
  border-radius: 0.2em;
}
#agency-meta #upgrade-list li > .upgrade .upgrade-status .current-level .upgrade-button:hover {
  background-color: #fdfdfd;
  color: #bbb;
}
#agency-meta #upgrade-list li > .upgrade .upgrade-status .current-level .level-counter {
  display: inline-block;
  text-align: right;
  width: 1.5em;
}
#agency-meta.spendable-levels #upgrade-list li .upgrade-status .current-level .upgrade-button {
  opacity: 1;
}
#agency-meta #agency-close,
#agency-meta #sort-close {
  opacity: 0;
  transition: opacity 0.3s;
  position: absolute;
  left: 0.5em;
  z-index: 2;
}
#agency-meta #agency-name,
#agency-meta #sort-name {
  transition: opacity 0.3s;
}
#agency-meta.sort-visible #sort-button,
#agency-meta.upgrade-visible #agency-summary {
  border-color: rgba(17, 17, 17, 0.5);
  background-color: #ddd;
}
#agency-meta.sort-visible #sort-close,
#agency-meta.upgrade-visible #agency-close {
  opacity: 1;
}
#agency-meta.sort-visible #sort-name,
#agency-meta.upgrade-visible #agency-name {
  opacity: 0;
}
#agency-meta.sort-visible #agency-summary,
#agency-meta.sort-visible::after {
  z-index: 1;
}
#agency-meta.sort-visible #sort-list {
  right: 0;
}
#agency-meta.upgrade-visible #sort-button {
  z-index: 1;
}
#agency-meta.upgrade-visible #upgrade-list {
  left: 0;
}
#prompt-backdrop {
  background-color: rgba(253, 253, 253, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 1000;
  text-align: center;
}
#prompt-backdrop #prompt {
  box-shadow: 0 0.1em 0.3em rgba(17, 17, 17, 0.5);
  max-width: 25em;
  border-radius: 0.5em;
  background-color: rgba(253, 253, 253, 0.9);
  display: inline-block;
  margin: 25vh 3vw 0;
  padding: 1em;
}
#prompt-backdrop #prompt p {
  margin-bottom: 1em;
}
#prompt-backdrop #prompt li {
  display: inline-block;
}
#prompt-backdrop #prompt li a {
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
}
body.nothing-scanned {
  background-image: url('img/splash.jpg');
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #00002a;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
body.nothing-scanned #title {
  display: none;
}
body.nothing-scanned #catalog {
  text-align: center;
}
body.nothing-scanned #catalog #menu {
  margin-top: 45vh;
}
body.nothing-scanned #catalog #menu li {
  border-bottom: 3px solid rgba(0, 0, 0, 0);
}
body.nothing-scanned #catalog #menu li:last-child {
  border-bottom: none;
}
body.nothing-scanned #catalog #menu li a {
  background: radial-gradient(circle farthest-corner, rgba(0, 0, 42, 0.5) 6em, rgba(0, 0, 42, 0) 12em) !important;
  text-weight: normal;
  color: #fdfdfd;
  text-shadow: 0.1em 0.1em 0 #111;
}
body.nothing-scanned #catalog #menu li a:hover {
  color: #111;
  text-shadow: 0.1em 0.1em 0 #fdfdfd;
}
body.nothing-scanned #catalog .catalog {
  display: none;
}
body.nothing-scanned #signature {
  position: absolute;
  bottom: 0;
  margin-bottom: env(safe-area-inset-bottom);
  width: 100vw;
  padding: 0.1em 0 0.3em;
  background: radial-gradient(circle farthest-corner, rgba(0, 0, 42, 0.7) 5em, rgba(0, 0, 42, 0) 10em) !important;
  color: #fdfdfd;
}
body.nothing-scanned #signature a {
  color: #fdfdfd;
  text-shadow: 0.1em 0.1em 0 #111;
}
body.nothing-scanned #signature a:hover {
  color: #111;
  text-shadow: 0.1em 0.1em 0 #fdfdfd;
}
body.nothing-scanned #signature ul {
  margin: 0;
}
body.nothing-scanned #signature #vscary-link {
  display: none;
}
body.nothing-scanned #agency-meta {
  display: none;
}
#buffet {
  background-color: #111;
  color: #fdfdfd;
  position: fixed;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  overflow: scroll;
  top: 0;
  left: 0;
  z-index: 500;
}
#buffet h2,
#buffet p,
#buffet dl {
  padding: 1rem 1rem 0;
}
#buffet .catalog {
  clear: both;
}
#buffet .catalog .idol.disabled {
  cursor: default;
  pointer-events: none;
  opacity: 0.3;
}
#buffet dl dt {
  margin-top: 0.5em;
}
#buffet dl dd {
  margin-left: 1em;
}
#buffet dl dd strong {
  display: inline-block;
  vertical-align: -7%;
  font-size: 1.5em;
}
#buffet .diff {
  font-size: 1.2em;
  margin-left: 0.3em;
}
#buffet .diff.positive {
  color: hsl(120, 50%, 55%);
}
#buffet .diff.positive::before {
  content: '+';
}
#buffet .diff.negative {
  color: hsl(0, 60%, 60%);
}
#buffet .cancel {
  float: right;
  margin: 1em;
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
}
#buffet .actions {
  padding: 2em 0 1em;
  text-align: center;
}
#buffet .actions a {
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
}
#stage {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
#stage #skip {
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
  margin: 0.5em;
  position: absolute;
  top: 0;
  right: 0;
}
#stage #backdrop {
  height: 70vh;
  height: calc(var(--vh, 1vh) * 70);
  width: 100%;
  top: 0;
  left: 0;
  background-size: cover;
  background-color: #ddd;
  background-position: center center;
}
#stage #boards {
  position: absolute;
  top: 0;
  left: 0;
  height: 110vh;
  height: calc(var(--vh, 1vh) * 110);
  width: 100vw;
}
#stage #boards .actor {
  margin-left: -20vh;
  position: absolute;
  height: 78vh;
  height: calc(var(--vh, 1vh) * 78);
  bottom: 0;
  transform-origin: 70% bottom;
  transition: left 2s ease-in-out, transform 1s, opacity 1s;
  z-index: 0;
}
#stage #boards .actor.exited {
  opacity: 0;
}
#stage #boards .actor[data-position="middle"] {
  left: 50%;
}
#stage #boards .actor[data-position="left"] {
  left: 20%;
}
#stage #boards .actor[data-position="right"] {
  left: 80%;
}
#stage #boards .actor[data-position="left-offstage"] {
  left: -20%;
}
#stage #boards .actor[data-position="right-offstage"] {
  left: 120%;
}
#stage #boards .actor .sprite {
  height: 50vh;
  height: calc(var(--vh, 1vh) * 50);
  width: 40vh;
  transform-origin: bottom center;
}
#stage #boards .actor .sprite img {
  position: absolute;
  bottom: 0;
  transform-origin: center;
}
#stage #boards .actor[data-rotated] {
  bottom: 25vh;
  margin-left: -10vh;
}
#stage #boards .actor[data-rotated="left"] .sprite {
  transform: rotate(280deg);
}
#stage #boards .actor[data-rotated="right"] .sprite {
  transform: rotate(80deg);
}
#stage #boards .actor[data-actor-name="boss_08_1"],
#stage #boards .actor[data-actor-name="boss_08_2"],
#stage #boards .actor[data-actor-name="boss_08_3"],
#stage #boards .actor[data-actor-name="boss_09_2"] {
  animation-duration: 2s;
  animation-name: bob-bottom;
  animation-iteration-count: infinite;
}
#stage #boards .actor.speaking {
  animation-duration: 1s !important;
  animation-name: speak !important;
  animation-iteration-count: infinite !important;
  z-index: 1;
}
#stage #script {
  min-height: 30vh;
  min-height: calc(var(--vh, 1vh) * 30);
  position: absolute;
  background-color: #fdfdfd;
  bottom: 0;
  left: 0;
  padding: 1em 1em 2em;
  padding-bottom: calc(env(safe-area-inset-bottom) + 2em);
  font-size: 1.5em;
  cursor: pointer;
  box-sizing: border-box;
  width: 100%;
  z-index: 2;
}
#stage #script #invisible-script {
  opacity: 0;
}
#stage #script::after {
  position: absolute;
  bottom: 0;
  bottom: env(safe-area-inset-bottom);
  right: 0;
  margin: 0.8em;
  font-size: 1.5em;
  content: "❯";
  color: #bbb;
}
#stage #script:focus::after,
#stage #script:hover::after {
  color: #111;
}
#stage #setpiece {
  display: none;
}
#stage.setpiece #backdrop {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
#stage.setpiece #setpiece {
  display: block;
  width: 100%;
  position: absolute;
  left: 0;
  top: 30vh;
  font-size: 15vw;
  text-align: center;
  color: #fdfdfd;
  text-shadow: 0 0 0.3em #111;
  opacity: 0;
  transform-origin: center;
  animation-duration: 7s;
  animation-name: setpiece;
}
#stage.setpiece #script {
  display: none;
}
#theatre.em #script {
  text-align: center;
}
#theatre.em #script span {
  font-size: 1.1em;
}
#audition {
  position: fixed;
  text-align: center;
  z-index: 30;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  animation-duration: 2s;
  animation-name: pulse-audition-bg;
  animation-iteration-count: infinite;
}
#audition #sparkle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#audition h2 {
  position: relative;
  display: inline-block;
  margin: 5vh auto 0;
  background-color: rgba(253, 253, 253, 0.8);
  z-index: 200;
  padding: 0.5em;
  border-radius: 0.2em;
}
#audition h2::after {
  display: inline-block;
  width: 1.5em;
  text-align: center;
  font-family: 'fa';
  line-height: 0;
  top: -0.3em;
  margin-left: 0.1em;
  transform-origin: center;
}
#audition h2.affinity-rock::after {
  content: '\f255';
  color: hsl(0, 60%, 60%);
  transform: rotate(90deg);
}
#audition h2.affinity-paper::after {
  content: '\f256';
  color: hsl(240, 60%, 60%);
}
#audition h2.affinity-scissors::after {
  content: '\f257';
  color: hsl(120, 50%, 55%);
}
#audition .portrait {
  width: 100%;
  height: 100%;
}
#audition .portrait img {
  position: absolute;
  top: -10vw;
  left: -15%;
  width: 130%;
  opacity: 0;
  transition: opacity 0.5s;
}
#audition .portrait img.visible {
  opacity: 1;
}
#audition #catch-button-container {
  width: 100%;
  position: absolute;
  bottom: 5vh;
  bottom: calc(env(safe-area-inset-bottom) + 5vh);
}
#audition #catch-button {
  padding: 0.2em 0.5em;
  border-radius: 0.2em;
  background-color: #bbb;
  text-shadow: none;
  color: #fdfdfd;
}
#audition #catch-button:hover,
#audition #catch-button:focus {
  background-color: #111 !important;
}
#audition.affinity-rock #catch-button {
  background-color: hsl(0, 60%, 60%);
}
#audition.affinity-paper #catch-button {
  background-color: hsl(240, 60%, 60%);
}
#audition.affinity-scissors #catch-button {
  background-color: hsl(120, 50%, 55%);
}
#scanner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #111;
  z-index: 4000;
}
#scanner-overlay #scanner-viewfinder {
  pointer-events: none;
}
#scanner-overlay #cancel-scanning {
  position: fixed;
  background-color: #fdfdfd;
  top: 0.5em;
  right: 0.5em;
  padding: 0.2em 0.3em;
  font-size: 1.5em;
  border-radius: 0.2em;
}
#scanner-overlay .drawingBuffer {
  position: absolute;
  top: 0;
  left: 0;
}
#scanner-overlay.hidden {
  display: none;
}
#xp-indicators {
  position: fixed;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 2001;
  pointer-events: none;
}
#xp-indicators .xp-indicator {
  position: absolute;
  width: 100%;
  opacity: 0;
  text-align: center;
  color: #964;
  text-shadow: 0.05em 0.05em 0 #000000;
  font-size: 20vw;
  transform-origin: center;
  animation-duration: 2s;
  animation-name: xp-ascend;
}
#confetti {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  z-index: 2000;
}
#credits {
  pointer-events: none;
  top: 100%;
  opacity: 0;
  transition: opacity 0.5s, top 0.5s;
  text-align: center;
  position: fixed;
  z-index: 35;
  left: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color: #fdfdfd;
  color: #111;
}
#credits h1,
#credits p {
  margin: 0.5em 0;
}
#credits a {
  color: #a43ba4;
}
#credits a:focus,
#credits a:hover {
  color: #bbb;
}
#credits.shown {
  pointer-events: auto;
  top: 0;
  opacity: 1;
}
#credits::after {
  display: block;
  content: 'close';
  position: absolute;
  top: 0.5em;
  right: 1em;
}
#credits #built-at {
  position: absolute;
  opacity: 0.8;
  font-size: 0.8em;
  bottom: 0.5em;
  right: 1em;
}