@font-face {
  src: url('../fonts/Bangers-Regular.ttf');
  font-family: 'Bangers';
}

@font-face {
  src: url('../fonts/Abel-Regular.ttf');
  font-family: 'Abel';
}

:root {
  /* app settings */
  --appFont: 'Abel', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;

  /* hsl colors */
  --appBackground: 0, 0%, 94%;
  --appBackgroundStrong: 0, 0%, 96%;
  --appBackgroundStronger: 0, 0%, 98%;
  --appBackgroundStrongest: 0, 0%, 100%;
  --appBackgroundWeak: 0, 0%, 89%;
  --appBackgroundWeakest: 0, 0%, 80%;
  --appForeground: 0, 0%, 26%;
  --appForegroundStrong: 0, 0%, 10%;
  --appForegroundStrongest: 0, 0%, 0%;
  --appForegroundWeak: 0, 0%, 39%;

  /* app measurements */
  --appMaxHeight: 860px;
  --targetX: 50%;
  --borderRadius: 6px;
  --defaultUnit: 8px;
  --defaultGap: 24px;
  --chromeHeight: 40px;
  --appMaxWidth: 450px;
  --transitionTime: 250ms;
  --transitionEase: ease-in-out;

  /* game dynamic values */
  --pieceSize: 110px;
  --color1: hsl(313, 44%, 25%);
  --color2: hsl(187, 42%, 46%);
  --color3: hsl(64, 60%, 53%);
  --color3contrast: black;
  --darkBlendMode: soft-light;
  --darkBlendOpacity: 1;
  --darkPatternHSL: 0, 0%, 100%;
  --rankHue: 200;
  --rankLum: 40%;

  /* game set values */
  --colorDanger: rgb(184, 20, 20);
  --colorRewards: hsl(180, 100%, 38%);
  --patternOpacity: 0.5;
  --patternHSL: 0, 0%, 100%;

  --shape1: url(./images/Square.svg);
  --shape2: url(./images/Circle.svg);
  --shape3: url(./images/Triangle.svg);
  --shape4: url(./images/Hexagon.svg);
  --infinity: url(./images/Infinity.svg);

  --bgImage1: repeating-linear-gradient(-45deg, hsla(var(--patternHSL), 1) 0px, hsla(var(--patternHSL), 1) 10%, hsla(var(--patternHSL), 0) 10%, hsla(var(--patternHSL), 0) 20%);
  --bgImage2: repeating-linear-gradient(45deg, hsla(var(--patternHSL), 1) 0px, hsla(var(--patternHSL), 1) 1.1%, hsla(var(--patternHSL), 0) 1.1%, hsla(var(--patternHSL), 0) 4.5%);
  --bgImage3: repeating-radial-gradient(circle, hsla(var(--patternHSL), 1) 0px, hsla(var(--patternHSL), 1) 14.7%, hsla(var(--patternHSL), 0) 14.7%, hsla(var(--patternHSL), 0) 29.4%);
  --bgImage4: none;
}

html,
body {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: hsl(var(--appForeground));
  font-family: var(--appFont);
  user-select: none;
  -webkit-user-select: none;
  background: var(--color2);
}

body {
  background: transparent;
  width: 100%;
  height: 100%;
  overflow: visible;
  line-height: 160%;
  user-select: none;
  text-align: center;
  -webkit-user-select: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: default;
  font-size: 1.1em;
}

wallpaper {
  display: block;
  position: absolute;
  translate: -40vw -50vw;
  rotate: 31deg;
  opacity: 0.7;
  background-size: 170px;
  background-color: rgba(0, 0, 0, 0.92);
  width: 300%;
  height: 300%;
}

wallpaper.square {
  background-image: url(../images/Square.svg);
}

wallpaper.circle {
  background-image: url(../images/Circle.svg);
}

wallpaper.triangle {
  background-image: url(../images/Triangle.svg);
}

wallpaper.hexagon {
  background-image: url(../images/Hexagon.svg);
}

[v-cloak] {
  opacity: 0;
  transition: var(--transitionTime) ease-out opacity;
}

.disabled,
:disabled,
.challenge chromebutton {
  opacity: 0.2;
  pointer-events: none;
}

h1,
h2,
h3,
h4,
h5 {
  margin: 0px 0px 0px 0px;
  color: hsl(var(--appForegroundStrong));
  font-weight: normal;
  line-height: 100%;
  letter-spacing: 2px;
  -webkit-tap-highlight-color: transparent;
}

h1 {
  flex-basis: auto;
  margin: 0px 0px 0px 0px;
  font-size: 2.5em;
  font-family: 'Bangers';
}

h2,
h3 {
  margin: 0px 0px 6px 0px;
  font-size: 1.25em;
  letter-spacing: 0px;
}

h3 {
  margin-top: var(--defaultGap);
}

h3 {
  font-size: 1em;
  line-height: 160%;
}

page h1,
tutorial h1 {
  margin: var(--defaultUnit) 0 0 0;
  font-size: 4.2em;
  text-shadow: 0px -1px 0px hsl(var(--appBackground)), 0px 0px 20px hsl(var(--appBackground));
}

modal h1 {
  width: 320px;
}

modal h2 {
  padding-top: var(--defaultGap);
  width: 100%;
  /* border-top: 1px solid hsla(var(--appForeground), .075); */
}

p,
subheader {
  display: block;
  margin: 0;
  padding: 0px 0px 20px;
  width: 100%;
  text-align: center;
}

subheader {
  padding: var(--defaultGap) var(--defaultGap) 0;
  width: calc(100% - (var(--defaultGap) * 2));
  font-style: italic;
}

a,
a:visited,
a:focus,
a:active {
  color: hsl(var(--appForegroundStrong));
  text-decoration: none;
}

divider {
  display: flex;
  opacity: 0.1;
  margin: 0px;
  background-color: hsl(var(--appForegroundStrongest));
  width: 100%;
  height: 1px;
}

app {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-content: center;
  justify-content: start;
  align-items: center;
  box-shadow: 0px 0px 40px hsl(0, 0%, 0%);
  background: none;
  width: 100%;
  max-width: var(--appMaxWidth);
  height: 100%;
  max-height: var(--appMaxHeight);
  overflow: hidden;
}

stage {
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  background: hsl(var(--appBackground));
  width: 100%;
  max-width: var(--appMaxWidth);
  height: 100%;
  max-height: var(--appMaxHeight);
  overflow: hidden;
  touch-action: none;
}

page,
modal,
challenge,
tutorial {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-content: center;
  justify-content: space-between;
  align-items: center;
  transform: translateY(100%);
  z-index: 1000;
  transition: 400ms cubic-bezier(0.4, 0, 0.6, 1) transform, opacity;
  background: hsl(var(--appBackground));
  width: 100%;
  max-width: var(--appMaxWidth);
  height: 100%;
  max-height: var(--appMaxHeight);
  pointer-events: none;

}

modal.semitransparent,
challenge.semitransparent {
  backdrop-filter: blur(5px);
  background: hsla(var(--appBackground), 0.92);
  -webkit-backdrop-filter: blur(5px);
}

modal.semitransparent.preview {
  backdrop-filter: blur(0px);
  background: hsla(var(--appBackground), 0.1);
  -webkit-backdrop-filter: blur(0px);
}

modal.semitransparent.preview content {
  opacity: 0;
}

.stats right {
  display: flex;
  gap: var(--defaultUnit)
}

.stats right icon {
  mask-size: 18px 18px;
  width: 18px;
  -webkit-mask-size: 18px 18px;
}

modal.notransition,
.notransition {
  transition: 0ms none none;
}

tutorial {
  z-index: 10000;
}

challenge {
  justify-content: center;
  align-items: center;
  background: hsl(var(--appBackground));
}

header,
section {
  display: flex;
  flex-basis: auto;
  flex-direction: column;
  align-content: center;
  justify-content: auto;
  align-items: center;
}

modal header,
modal section,
challenge section {
  padding: 1.5em var(--defaultGap);
  width: calc(100% - (var(--defaultGap) * 2));
  max-width: 400px;
}

playarea,
content {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin-top: var(--chromeHeight);
  padding-top: calc(var(--defaultGap));
  padding-bottom: calc(var(--defaultGap));
  width: 100%;
  height: calc(100% - 0px);
  overflow-y: scroll;
}

page content {
  margin-top: 0;
  padding-top: 0;
}

modal content {
  transition: 300ms ease-in-out all;
  margin-top: var(--defaultGap);
}

modal chrome+content {
  margin-top: var(--chromeHeight);
}

content::-webkit-scrollbar {
  display: none;

  -ms-overflow-style: none;
  scroll-behavior: smooth;
  scrollbar-width: none;

  touch-action: auto;
}

page content {
  justify-content: start;
  gap: var(--defaultGap);
  padding-bottom: var(--defaultGap);
  overflow-y: scroll;
}

stage playarea,
tutorial playarea {
  justify-content: center;
  padding-bottom: var(--defaultGap);
  overflow: hidden;
}

modal.pause {
  backdrop-filter: blur(5px);
  margin-top: var(--chromeHeight);
  background: hsla(var(--appBackground), .97);
  height: calc(100% - var(--chromeHeight));
  -webkit-backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.pause.show button.quaternary {
  border: none;
  background: transparent;
  width: 100%;
  height: 54px;
}

modal.pause icon.play {
  mask-size: 48px 48px;
  -webkit-mask-size: 48px 48px;
}

gameinfo {
  display: flex;
  flex-direction: column;
}

quit {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  z-index: 1;
  cursor: pointer;
  padding-right: 20px;
  width: 110px;
  height: 50px;
  color: var(--color1);
  font-size: 1.2em;
  font-family: 'Bangers';
  letter-spacing: 1px;
}

modal {
  justify-content: start;
}

page.show,
modal.show,
tutorial.show,
challenge.show {
  transform: translateY(0px);
  opacity: 1;
  transition: 400ms cubic-bezier(0.165, 0.84, 0.44, 1) transform, opacity;
  pointer-events: all;
}

page.show,
modal.show.notransition {
  transition: none;
}

modal.show.preview.notransition {
  transition: 600ms ease-in-out all;
}

page button.primary,
button,
a.button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-bottom: 8px;
  border: 0px solid var(--color1);
  border-radius: var(--borderRadius);
  background-color: var(--color1);
  padding: 13px 0;
  width: 250px;
  color: white;
  font-size: 1.4em;
  line-height: 100%;
  font-family: 'Bangers';
  letter-spacing: 2px;
  -webkit-tap-highlight-color: transparent;
}

page button.primary {
  font-size: 1.4em;
}

button.hide,
a.hide {
  visibility: hidden;
}

button.isolate,
a.isolate {
  margin: var(--defaultGap);
}

button.primary,
a.button.primary {
  border-color: var(--color1);
  background-color: var(--color1);
  color: white;
}

button.secondary,
a.button.secondary {
  border-color: var(--color2);
  background-color: var(--color2);
  color: white;
}

button.tertiary,
a.button.tertiary {
  box-shadow: none;
  border-color: var(--color3);
  background: var(--color3);
  color: var(--color3contrast);
}

page button,
page a.button {
  background-color: hsla(var(--appForeground), .75);
  font-size: 1em;
  font-family: var(--appFont);
  letter-spacing: 0px;
  text-transform: unset;
}

page button.secondary,
page a.button.secondary {
  background-image: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, .1))
}

page button.on {
  background-color: hsla(var(--appForeground), 1);
}

page button.inline icon,
page a.inline.button icon {
  display: none;
  width: 24px;
}

button.quaternary.pulse {
  animation: pulse 1s var(--transitionEase) 0s infinite;
  -webkit-animation: pulse 1s var(--transitionEase) 0s infinite;
}

.show a.button.quaternary,
a.button.quaternary,
.show a.button:active.quaternary,
a.button:active.quaternary,
.show a.button:focus.quaternary,
a.button:focus.quaternary,
.show button.quaternary,
button.quaternary,
.show button:active.quaternary,
button:active.quaternary,
.show button:focus.quaternary,
button:focus.quaternary {
  margin-bottom: 0px;
  box-shadow: none;
  border-width: 1px;
  border-color: var(--color2);
  background: hsl(var(--appBackgroundStrongest));
  padding: 0px 20px;
  width: auto;
  height: 30px;
  min-height: 0px;
  color: var(--color2);
}

.quaternary icon {
  background-color: var(--color1);
}

.tertiary icon {
  background-color: var(--color3contrast);
}

.show a.button.quaternary:active,
a.button.quaternary:active,
.show button.quaternary:active,
button.quaternary:active {
  box-shadow: none;
}

.show button.inline.small,
.show a.button.inline.small {
  font-size: .8em;
  font-family: var(--appFont);
  letter-spacing: 0px;
  text-transform: uppercase;
}

page.show button.tertiary.inline.small {
  opacity: .8;
  border-color: transparent;
  background: hsla(0, 0%, 50%, .15);
  color: var(--appForeground);
  font-size: .8em;
  text-transform: none;
}

.show button.inline.small icon,
.show a.button.inline.small icon {
  mask-size: 12px 12px;
  background-color: var(--color2);
  -webkit-mask-size: 12px 12px;
  margin-bottom: 2px;
  width: 12px;
  height: 12px;
}

.show button.inline icon.bullhorn,
.show a.button.inline icon.bullhorn {
  mask-size: 23px 23px;
  -webkit-mask-size: 23px 23px;
  width: 23px;
  height: 23px;
}

@keyframes pulse {
  50% {
    transform: scale(1.02);
  }
}

@-webkit-keyframes pulse {
  50% {
    transform: scale(1.02);
  }
}

section.store {
  align-items: start;
  padding-bottom: 0px;
  width: 100%;
  overflow: visible;
  text-align: left;
  /* height: 0px; */
}

header icon {
  mask-size: 80px 80px;
  margin-bottom: var(--defaultUnit);
  height: 80px;
  -webkit-mask-size: 80px 80px;
}

h2.inline {
  display: flex;
  justify-content: center;
  gap: var(--defaultUnit);
}

h2.inline icon {
  display: inline-block;
  width: 24px;
  font-size: 1.2em;
}

section.store h2,
section.store h2:hover {
  justify-content: start;
  gap: 4px;
  margin-bottom: 0px;
  border: none;
  background: none;
  padding-top: calc(.75 * var(--defaultGap));
  padding-bottom: 8px;
  padding-left: calc(.75 * var(--defaultGap));
  color: hsl(var(--appForeground));
  font-size: 1.2em;
  line-height: 100%;
  font-family: 'Bangers';
  letter-spacing: 1px;
}

button.simple,
a.simple,
.show button.quaternary.simple,
a.quaternary.simple {
  box-shadow: none;
  border: none;
  background: none;
  padding: 0;
  width: auto;
  height: auto;
  min-height: unset;
  font-size: 1em;
  font-family: var(--appFont);
  letter-spacing: 0px;
}

button.danger {
  color: var(--colorDanger);
}

button:focus,
button:active,
a.button:focus,
a.button:active {
  transform: translateY(1px);
}

smallbuttons,
controlgroup {
  display: flex;
  column-gap: 8px;
  flex-direction: row;
  justify-content: space-between;
  width: 250px;
  text-align: left;
}

controlgroup {

  column-gap: 6px;
  row-gap: 6px;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--defaultGap) 0;
  width: 100%;
}

smallbuttons button,
a.button {
  background: (--color1);
  overflow: hidden;
}

icon {
  display: block;
  mask-size: 24px 24px;
  -webkit-mask-size: 24px 24px;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  background-color: white;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

h1 icon {
  mask-size: 30px 30px;
  width: 40px;
  height: 40px;
  -webkit-mask-size: 30px 30px;
  background: hsl(var(--appForeground));
}

button.inline,
a.inline {
  display: flex;
  column-gap: 8px;
  align-content: baseline;
  justify-content: center;
  align-items: center;
  justify-items: baseline;
}

button.inline icon,
a.inline icon {
  mask-size: 20px 20px;
  -webkit-mask-size: 20px 20px;
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
  height: 100%;
}

button.quaternary.inline icon,
button.tertiary.inline icon,
a.quaternary.inline icon,
a.tertiary.inline icon {
  width: 20px;
  height: 20px;
}

icon.help {
  mask-image: url(../images/icon_question.svg);
  -webkit-mask-image: url(../images/icon_question.svg);
}

icon.gem {
  mask-image: url(../images/icon_gem.svg);
  -webkit-mask-image: url(../images/icon_gem.svg);
  background-color: var(--colorRewards);
}

icon.spinner,
.show button.inline.small icon.spinner {
  mask-size: 20px 20px;
  margin-top: 2px;
  -webkit-mask-size: 20px 20px;
  mask-image: url(../images/icon_inner_spinner.svg);
  width: 20px;
  height: 20px;
  -webkit-mask-image: url(../images/icon_inner_spinner.svg);
  background: hsl(var(--appForeground));
}

.spin {
  animation: spin 3s linear 0s infinite;
  -webkit-animation: spin 3s linear 0s infinite;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

icon.download {
  mask-image: url(../images/icon_download.svg);
  -webkit-mask-image: url(../images/icon_download.svg);
}

icon.coffee {
  mask-size: 23px;
  -webkit-mask-size: 23px;
  mask-image: url(../images/icon_coffee.svg);
  -webkit-mask-image: url(../images/icon_coffee.svg);
}


icon.bmc {
  mask-image: url(../images/icon_bmc.svg);
  -webkit-mask-image: url(../images/icon_bmc.svg);
}


icon.coffee-hand {
  mask-size: 32px;
  -webkit-mask-size: 32px;
  mask-image: url(../images/icon_coffee_hand.svg);
  -webkit-mask-image: url(../images/icon_coffee_hand.svg);
}

icon.money-hand {
  mask-size: 26px;
  -webkit-mask-size: 26px;
  mask-image: url(../images/icon_money_hand.svg);
  -webkit-mask-image: url(../images/icon_money_hand.svg);
}


icon.coffee-money {
  mask-size: 24px;
  -webkit-mask-size: 24px;
  mask-image: url(../images/icon_coffee_money.svg);
  -webkit-mask-image: url(../images/icon_coffee_money.svg);
}

icon.feedback {
  mask-image: url(../images/icon_feedback.svg);
  -webkit-mask-image: url(../images/icon_feedback.svg);
}

icon.medal {
  mask-image: url(../images/icon_medal.svg);
  -webkit-mask-image: url(../images/icon_medal.svg);
}

icon.settings {
  mask-image: url(../images/icon_settings.svg);
  -webkit-mask-image: url(../images/icon_settings.svg);
}

icon.eye {
  mask-image: url(../images/icon_eye.svg);
  -webkit-mask-image: url(../images/icon_eye.svg);
}

icon.zen {
  mask-image: url(../images/icon_zen.svg);
  -webkit-mask-image: url(../images/icon_zen.svg);
}

icon.copyright {
  mask-image: url(../images/icon_copyright.svg);
  -webkit-mask-image: url(../images/icon_copyright.svg);
}

icon.info {
  mask-image: url(../images/icon_info.svg);
  -webkit-mask-image: url(../images/icon_info.svg);
}

icon.bullhorn {
  mask-size: 28px 28px;
  -webkit-mask-size: 28px 28px;
  mask-image: url(../images/icon_bullhorn.svg);
  -webkit-mask-image: url(../images/icon_bullhorn.svg);
}

icon.play {
  mask-image: url(../images/icon_play.svg);
  -webkit-mask-image: url(../images/icon_play.svg);
}

icon.share {
  mask-image: url(../images/icon_share.svg);
  -webkit-mask-image: url(../images/icon_share.svg);
}

icon.trophy {
  mask-size: 24px;
  -webkit-mask-size: 24px;
  mask-image: url(../images/icon_trophy.svg);
  -webkit-mask-image: url(../images/icon_trophy.svg);
}

icon.trophy2 {
  mask-image: url(../images/icon_trophy2.svg);
  -webkit-mask-image: url(../images/icon_trophy2.svg);
}

icon.rating {
  mask-size: 36px 36px;
  -webkit-mask-size: 36px 36px;
  mask-image: url(../images/icon_rating.svg);
  -webkit-mask-image: url(../images/icon_rating.svg);
}

icon.book {
  mask-image: url(../images/icon_book.svg);
  -webkit-mask-image: url(../images/icon_book.svg);
}

icon.reel {
  mask-image: url(../images/icon_reel.svg);
  -webkit-mask-image: url(../images/icon_reel.svg);
}

.show a.button,
.show a.button.primary,
.show a.button.secondary,
.show a.button.tertiary,
.show button,
.show button.primary,
.show button.secondary,
.show button.tertiary {
  animation: interactable 0.5s forwards;
  -webkit-animation: interactable 0.5s forwards;
}

button.update {
  position: absolute;
  margin-top: 14px;
}

@keyframes interactable {
  0% {
    pointer-events: none;
  }

  50% {
    pointer-events: none;
  }

  100% {
    pointer-events: all;
  }
}

@-webkit-keyframes interactable {
  0% {
    pointer-events: none;
  }

  50% {
    pointer-events: none;
  }

  100% {
    pointer-events: all;
  }
}

header {
  display: flez;
  width: 100%;
}

chrome {
  display: flex;
  position: fixed;
  flex-basis: auto;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  transition: var(--transitionTime) var(--transitionEase) all;
  background: hsl(var(--appBackground));
  background-color: hsl(var(--appBackground));
  padding: 0px;
  width: 100%;
  max-width: var(--appMaxWidth);
  height: var(--chromeHeight);
  overflow: hidden;
  color: hsl(var(--appForeground));
  font-size: 0.9em;
  line-height: 100%;
}

chrome.hide {
  opacity: 0.1;
  transition: none;
}

.show chrome.footer {
  position: fixed;
  right: 2px;
  bottom: 2px;
  background: transparent;
  height: calc(1.5 * var(--chromeHeight));
}

.show chrome button,
chrome button {
  display: flex;
  align-items: center;
  z-index: 1;
  transition: var(--transitionTime) var(--transitionEase) all;
  cursor: pointer;
  margin: 0;
  border: none;
  border-color: hsl(var(--appBackground));
  background: none;
  background-color: hsla(var(--appBackground), 1);
  padding: 0px 20px;
  width: 100px;
  height: var(--chromeHeight);
  min-height: var(--chromeHeight);
  color: var(--color2);
  font-size: 1.1em;
  font-family: var(--appFont);
  letter-spacing: 0px;
  text-transform: capitalize;
}

chrome.footer button {
  transition: none;
}

.show chrome.footer button.quaternary,
.show chrome.footer button:active.quaternary,
.show chrome.footer buttony:focus.quaternar {
  justify-content: end;
  align-items: end;
  background-color: hsla(var(--appBackground), 0);
  padding: 0px;
  height: 100%;
}

.show chrome.footer button icon {
  width: 64px;
}

.show chrome button:last-of-type,
chrome button:last-of-type {
  justify-content: flex-end;
}

modal chrome,
tutorial chrome {
  justify-content: flex-end;
}

tutorial chrome button,
tutorial.show chrome button {
  width: auto;
}

tutorial smallbuttons {
  padding-bottom: var(--defaultGap);
}

tutorial container description {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  transform: translateY(var(--pieceSize));
  opacity: 1;
  z-index: 100;
  transition: var(--transitionTime) var(--transitionEase) opacity;
  padding: 0;
  width: calc(var(--pieceSize));
  height: auto;
  color: hsl(var(--appForegroundStrongest));
  line-height: 100%;
}

tutorial container description {
  opacity: 0;
  transition: var(--transitionTime) var(--transitionEase) all;
}

tutorial container.describe description {
  opacity: 1;
}

tutorial container description b {
  display: block;
  margin: 0 0;
  border-radius: 2px 2px 0px 0px;
  background: hsl(var(--appBackground));
  padding: 2px 3px 0px;
  color: var(--color1);
  font-weight: normal;
  text-align: center;
}

tutorial container description b:after {
  content: ' +';
}

tutorial container description b:last-of-type:after {
  content: '';
}

tutorial container.describe description b:last-of-type {
  border-radius: 2px;
  padding-bottom: 2px;
}

modal img {
  width: 80%;
}

leftright {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px;
  margin-bottom: 4px;
  border-radius: var(--borderRadius);
  background: hsl(var(--appBackgroundStronger));
  padding: 1px 9px;
  width: calc(70%);
  min-width: 260px;
  /* transition: var(--transitionTime) var(--transitionEase) all; */
}

controlgroup leftright,
controlgroup leftright:first-of-type {
  gap: 6px;
  margin: 0;
  background: transparent;
  padding: 0;
  width: 100%;
}

leftright.impress {
  border: 1px solid hsl(var(--appBackgroundStrongest));
  background: hsl(var(--appBackgroundStrongest));
  color: var(--color2);
}

leftright.daily left:after {
  content: '*';
}

leftright.current {
  border-color: hsl(var(--appBackgroundStrongest));
  background: hsl(var(--appBackgroundStrongest));
  color: var(--color2);
}

actionbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0px var(--defaultGap);
  width: calc(100% - 2 * var(--defaultGap));
}

actionitems {
  display: flex;
  gap: 10px;
}

actionitem {
  display: block;
  border-radius: var(--borderRadius);
  /* text-transform: uppercase; */
  padding: 8px 2px 6px;
  width: 50px;
  color: var(--color2);
  font-size: 1em;
  line-height: 120%;
  font-family: 'Abel';
  text-align: center;
  text-wrap: wrap;
}

actionitem icon {
  display: none;
}

actionitem.disabled {
  color: rgba(0, 0, 0, .5);
}

actionitem count {
  display: block;
  padding-bottom: 8px;
  font-size: 1.8em;
}

actionitem namelet {
  display: block;
  font-size: .8em;
  line-height: 1.1em;
  letter-spacing: .5px;
}

rewards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin: var(--defaultGap) 0 0;
  width: 350px;
}

rewardcontainer {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  transition: 250ms ease-out all;
  /* border: 1px solid hsla(var(--appForeground), .2); */
  margin: calc(2 * var(--defaultUnit)) 0 0;
  border-radius: var(--borderRadius);
  width: calc(100% - var(--defaultUnit));
  max-height: 60px;
  overflow: hidden;
}

rewardcontainer.expanded {
  max-height: 130px;
}

rewards:first-of-type {
  margin: 0;
}

rewards h2,
rewards h2+credit {
  margin: 0 0 var(--defaultUnit) 0;
  /* padding: 0 var(--defaultUnit); */
}

reward {
  display: flex;
  justify-content: start;
  align-items: center;
  gap: var(--defaultUnit);
  background: hsl(var(--appBackgroundStrongest));
  width: 100%;
  min-height: 60px;
  overflow: hidden;
}

explanation {
  display: block;
  justify-content: start;
  transition: 250ms ease-out all;
  transition-delay: 0ms;
  margin: 0;
  border-top: 1px solid hsla(var(--appForeground), .1);
  background-color: hsl(var(--appBackgroundStronger));
  padding: 0 calc(1.5 * var(--defaultUnit));
  max-width: 100%;
  max-height: 0px;
  overflow: hidden;
  color: hsl(var(--appForeground));
  font-size: .7em;
  line-height: 1.4em;
  text-align: left;
  text-wrap: wrap;
}

explanation span {
  display: inline-block;
  padding: calc(1 * var(--defaultUnit)) 0 calc(1.5 * var(--defaultUnit));
}

.expanded explanation {
  transition-delay: 0ms;
  /* border-color: hsla(var(--appForeground), .2); */
  max-height: 70px;
}

reward cost {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  background: hsl(var(--appForeground));
  padding: 0 var(--defaultUnit);
  width: 87px;
  height: 60px;
  color: hsl(var(--appBackground));
  font-size: .7em;
  line-height: 100%;
  font-family: var(--appFont);
}

reward cost icon {
  display: block;
  width: 100%;
  height: var(--defaultGap);
}

.show reward button.quaternary,
reward button.quaternary,
.show reward button.quaternary:active,
reward button.quaternary:active,
.show reward button.quaternary:focus,
reward button.quaternary:focus {
  margin: var(--defaultUnit) 0;
  border-radius: 50%;
  padding: 0 0 0 2px;
  width: 40px;
  min-width: 40px;
  height: 40px;
  line-height: 100%;
  font-family: 'Abel';
  /* font-family: -apple-system, Arial, sans-serif; */
  /* text-align: center; */
  /* border: 0; */
}

.show reward button.quaternary:last-of-type,
reward button.quaternary:last-of-type,
.show reward button.quaternary:active:last-of-type,
reward button.quaternary:active:last-of-type,
.show reward button.quaternary:focus:last-of-type,
reward button.quaternary:focus:last-of-type {
  margin-right: var(--defaultUnit);
}

reward info {
  display: flex;
  flex-direction: column;
  justify-content: start;
  margin: var(--defaultUnit) 0;
  padding: 0 calc(.75 * var(--defaultUnit));
  width: calc(100% - 1 * var(--defaultUnit));
  height: auto;
  line-height: 1.1em;
}

reward name {
  justify-content: start;
  font-size: 1em;
}

reward name span {
  font-size: .7em;
}

reward info description {
  justify-content: start;
  margin: 0;
  padding: 0;
  height: auto;
  color: hsla(var(--appForeground), 1);
  font-size: .7em;
  line-height: 1.2em;
  text-align: left;
  text-wrap: wrap;
}

reward info name icon {
  display: inline-block;
  transform: translateY(-2px);
  mask-size: 10px 10px;
  width: 10px;
  height: 10px;
  -webkit-mask-size: 10px 10px;
  margin-left: 5px;
  background-color: var(--color2);
}

reward amount {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px 0;
  width: 55px;
  color: var(--color1);
  font-size: 1.15em;
  letter-spacing: 0px;
}


scorearea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin: 0 0 0 0;
  width: 100%;
  pointer-events: none;
}

scorearea.clickable {
  pointer-events: all;
}

currentscore {
  justify-content: center;
  cursor: pointer;
  padding-top: 2px;
  width: 100%;
  color: hsl(var(--appForegroundStrongest));
  font-size: 3em;
  line-height: 100%;
  font-family: 'Bangers';
  letter-spacing: 2px;
}

labelsmall {
  padding: 1px 0px;
  width: 100%;
  color: var(--color1);
  font-size: 0.7em;
  line-height: 100%;
  text-transform: uppercase;
}

labelsmall span {
  text-transform: lowercase;
}

modal labelsmall {
  color: hsl(var(--appForeground));
}

labelsmall span {
  font-family: var(--appFont);
}

credit {
  font-size: 0.8em;
  line-height: 1.5em;
}

credit span:after {
  content: ', ';
}

credit span:last-of-type:after {
  content: '';
}

header credit,
ranks>credit {
  margin-top: calc(.5 * var(--defaultGap));
  max-width: 300px;
}

page img {
  display: block;
  margin: 0px auto;
  width: 50%;
}

modes {
  display: flex;
  column-gap: 10px;
  margin: 4px 0px 0px;
  font-size: 0.6em;
}

mode {
  display: flex;
  flex-direction: column;
  -webkit-tap-highlight-color: transparent;
  align-items: center;
  min-width: 76px;
}

mode value {
  display: block;
  margin-top: 6px;
  padding: 1px 0px;
  width: 100%;
  line-height: 100%;
  text-transform: uppercase;
}

description {
  display: block;
  margin: 10px 0 0;
  padding: 0px 40px;
  height: 1.5em;
  color: var(--color1);
  font-size: 0.8em;
}

version {
  display: block;
  opacity: 0.9;
  padding: 0;
  width: 100%;
  font-size: 0.7em;
  text-align: center;
}

logo {
  display: block;
  opacity: 0.8;
  cursor: pointer;
  margin-top: 60px;
  background: url(../images/big_tent_logo.svg);
  background-size: cover;
  width: 130px;
  height: 105px;
}

time {
  word-wrap: nowrap;
  display: block;
  padding: 0px 20px;
  color: var(--color1);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}

button.blink.quaternary {
  animation: blink 1.5s linear 0s infinite;
  -webkit-animation: blink 1.5s linear 0s infinite;
}

stage.paused time {
  animation: blink 1.5s linear 0s infinite;
  -webkit-animation: blink 1.5s linear 0s infinite;
}

@keyframes blink {
  50% {
    opacity: 0.2;
  }
}

@-webkit-keyframes blink {
  50% {
    opacity: 0.2;
  }
}

.bigpulse {
  animation: bigpulse 1s var(--transitionEase) 0s infinite;
  color: rgb(211, 0, 0);
  -webkit-animation: bigpulse 1s var(--transitionEase) 0s infinite;
}

@keyframes bigpulse {
  50% {
    transform: scale(1.2);
  }
}

@-webkit-keyframes bigpulse {
  50% {
    transform: scale(1.2);
  }
}

addtime {
  display: block;
  transform: translateY(calc(-2 * var(--pieceSize) - 88px));
  opacity: 0;
  transition: 2000ms var(--transitionEase) all;
  transition-delay: 200ms;
  font-size: 2em;
  font-family: 'Bangers';
  user-select: none;
  -webkit-user-select: none;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 0px;
  overflow: visible;
  pointer-events: none;
  line-height: 0;
  text-align: center;
  text-shadow: 0px -1px 0px hsl(var(--appBackground));
}

addtime.flyaway {
  transform: translateY(calc(-2 * var(--pieceSize) - 28px));
  opacity: 1;
  transition: 0ms linear none;
  pointer-events: none;
}

me {
  display: flex;
  justify-content: center;
}

me:focus-visible {
  outline: -webkit-focus-ring-color auto 1px;
}

board {
  display: flex;
  column-gap: 4px;
  row-gap: 4px;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  align-items: center;
  margin: var(--defaultGap) 10px;
  width: calc(100% - 20px);
}

modal board {
  margin: var(--defaultGap) 0 0;
}

tutorial playarea {
  margin-top: 0;
  padding-top: 0;
}

tutorial board {
  align-content: start;
  opacity: 1;
  transition: 300ms cubic-bezier(0.4, 0, 0.6, 1) all;
  margin-top: 0px;
  margin-bottom: 0px;
  height: calc((var(--pieceSize) + 4px) * 3);
  overflow: hidden;
}

tutorial h1 {
  position: absolute;
  transform: translateY(-240px);
  transition: var(--transitionTime) var(--transitionEase) all;
}

tutorial h1.hide {
  transform: translateY(-340px);
  opacity: 0;
}

tutorial scorearea {
  width: auto;
}

tutorial description {
  margin: 0;
  padding-top: 0;
  padding-bottom: var(--defaultGap);
  max-width: 340px;
  height: 4.4em;
  line-height: 1.5em;
}

tutorial board.unreveal {
  opacity: 0;
  transition: 300ms cubic-bezier(0.165, 0.84, 0.44, 1) all;
  height: 0px;
}

container {
  transform: translateY(-640px);
  transition: 0ms ease-out transform;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

container.dropped,
me container,
page container,
modal modes container,
modal me container {
  transform: translateY(0) scale(1);
  transition: 200ms ease-out;
  transition-property: transform, opacity;
  border-radius: var(--borderRadius);
}

container.include,
container.selected.include {
  animation: include 0.3s var(--transitionEase) 0s infinite;
  -webkit-animation: include 0.3s var(--transitionEase) 0s infinite;
}

@keyframes include {
  25% {
    transform: rotate(3deg);
  }

  50% {
    transform: translateY(-3px) rotate(0deg);
  }

  75% {
    transform: rotate(-3deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@-webkit-keyframes include {
  25% {
    transform: translateY(-2px) rotate(3deg);
  }

  50% {
    transform: translateY(-4px) rotate(0deg);
  }

  75% {
    transform: translateY(-2px) rotate(-3deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

container.exclude,
container.selected.exclude {
  animation: exclude 0.2s linear 0s infinite;
  -webkit-animation: exclude 0.2s linear 0s infinite;
}

@keyframes exclude {
  33% {
    transform: translateX(-4px);
  }

  66% {
    transform: translateX(4px);
  }
}

@-webkit-keyframes exclude {
  33% {
    transform: translateX(-2px);
  }

  66% {
    transform: translateX(2px);
  }
}

tutorial board container {
  transition: var(--transitionEase) var(--transitionTime) all;
}

board.partial container.describe {
  opacity: 0.02;
}

tutorial container.describe:nth-child(1),
tutorial container.describe:nth-child(2),
tutorial container.describe:nth-child(3),
tutorial container.describe:nth-child(4) {
  opacity: 1;
}

stage me,
tutorial me {
  margin: 20px 0px 0px;
  padding: 0px 0px 0px;
}

stage me container,
tutorial me container {
  transform: translateY(0) scale(1.1);
}

modal me container piece gild {
  mask-image: var(--shape1);
  -webkit-mask-image: var(--shape1);
  background-image: var(--bgImage1);
  background-color: var(--color2);
}

.splashboard,
.splashboard container,
.splashboard container button,
.splashboard button {
  cursor: crosshair;
}

.splashboard chrome,
.splashboard challenge,
.splashboard modal,
.splashboard tutorial,
.splashboard page,
.splashboard hint,
.splashboard notification,
.splashboard scorearea,
.splashboard stage me {
  display: none;
}

app.splashboard,
app.splashboard stage {
  box-shadow: none;
  background: none;
  max-width: unset;
  max-height: unset;
}

app.splashboard stage playarea {
  margin-top: 0;
  height: calc(100% - var(--defaultGap));
}

examples {
  display: flex;
  column-gap: 8px;
  flex-direction: row;
}

hint,
notification {
  display: flex;
  position: absolute;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  transform: translateY(-10px);
  opacity: 0;
  z-index: 200;
  transition: var(--transitionTime) var(--transitionEase);
  transition-property: transform, opacity;
  margin: calc(var(--chromeHeight)) var(--defaultGap);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--color2);
  border-width: 6px 0px 0px;
  border-radius: var(--borderRadius);
  background-color: hsl(var(--appForegroundStrong));
  padding: 16px var(--defaultGap);
  width: calc(var(--appMaxWidth) - var(--defaultGap) * 4);
  height: 48px;
  overflow: visible;
  pointer-events: none;
  color: hsl(var(--appBackground));
  font-size: 0.9em;
  line-height: 160%;
  text-align: center;
}

notification {
  z-index: 2000;
}

closebutton {
  display: block;
  float: right;
  margin-top: -12px;
  margin-right: -16px;
}

hint message {
  display: block;
  width: 100%;
  line-height: 140%;
}

checkbox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  border-radius: var(--borderRadius);
  background: hsl(var(--appBackgroundStrongest));
  padding: 9px 6px 9px 14px;
  width: calc(100% - 20px);
  line-height: 140%;
  -webkit-tap-highlight-color: transparent;
}

checkbox toggle {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin: 0px 8px;
  box-shadow: inset 0px 1px 4px hsla(0, 0%, 0%, 0.4);
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.2);
  width: 46px;
  height: 26px;
  overflow: hidden;
}

checkbox:after {
  display: none;
  position: absolute;
  transform: translateX(64px);
  opacity: 0.7;
  content: '(off)';
  font-size: 0.8em;
  text-transform: uppercase;
}

checkbox.on:after {
  opacity: 1;
  content: '(on)';
  color: var(--color2);
}

checkbox toggle:before {
  display: block;
  transition: 100ms var(--transitionEase) transform;
  margin: 2px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  background: hsl(var(--appBackgroundStrongest));
  width: 22px;
  height: 22px;
  content: ' ';
  font-family: 'Bangers';
}

checkbox.on toggle {
  background-color: var(--color2);
}

checkbox.on toggle:before {
  transform: translateX(20px);
}

themes {
  display: flex;
  row-gap: 8px;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  margin-top: 10px;
  width: 100%;
}

theme {
  display: flex;
  row-gap: 0px;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  cursor: pointer;
  border-radius: var(--borderRadius);
  padding: 8px 0px 8px;
  width: 25%;
  font-size: 0.9em;
  -webkit-tap-highlight-color: transparent;
}

theme.selected {
  box-shadow: inset 0px 1px 4px hsla(var(--appForegroundStrongest), 0.5);
  background: hsl(var(--appBackgroundStrongest));
}

colors {
  display: flex;
  flex-direction: column-reverse;
  justify-content: stretch;
  margin: 8px;
  border-radius: 50%;
  width: 60px;
  max-width: 60px;
  height: 60px;
  overflow: hidden;
}

color {
  display: flex;
  width: 100%;
  height: 20px;
}

name {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  text-align: center;
}

hint.show,
notification.show {
  transform: translateY(0px);
  opacity: 1;
  pointer-events: all;
}

container {
  display: block;
  width: var(--pieceSize);
  height: var(--pieceSize);
}

piece,
piece gild {
  display: block;
  mask-position: center;
  mask-size: 100%, 100%;
  mask-repeat: no-repeat;
  mask-origin: fill-box;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  -webkit-mask-size: 100%, 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-origin: fill-box;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  -webkit-tap-highlight-color: transparent;
}

gild {
  opacity: var(--patternOpacity);
}

mode.selected container,
container.selected {
  box-shadow: inset 0px 1px 4px hsla(var(--appForeground), 0.5);
  border-radius: 6px;
  background: hsl(var(--appBackgroundStrongest));
}

mode.selected container,
container.selected {
  animation: selected 0.3s var(--transitionEase) 0s 1;
  -webkit-animation: selected 0.3s var(--transitionEase) 0s 1;
}

@keyframes selected {
  50% {
    scale: 0.96;
  }
}

@-webkit-keyframes selected {
  50% {
    scale: 0.96;
  }
}

container {
  animation: unselected 0.3s var(--transitionEase) 0s 1;
  -webkit-animation: unselected 0.3s var(--transitionEase) 0s 1;
}

@keyframes unselected {
  50% {
    scale: 0.96;
  }
}

@-webkit-keyframes unselected {
  50% {
    scale: 0.96;
  }
}

me container {
  box-shadow: 0px 5px 5px hsla(var(--appForeground), 0.5);
  background: hsl(var(--appBackgroundStrongest));
}

me.pushed container,
me container:focus,
me container:active {
  transform: translateY(2px) scale(1);
  box-shadow: 0px 2px 2px hsla(var(--appForeground), 0.7);
}

stage me container:focus,
stage me container:active,
tutorial me container:focus,
tutorial me container:active {
  transform: translateY(2px) scale(1.1);
}

me.nope container {
  animation: nope 0.15s linear 0s 3;
  -webkit-animation: nope 0.15s linear 0s 3;
}

@keyframes nope {
  33% {
    transform: translate(2px) scale(1.1);
  }

  66% {
    transform: translate(-2px) scale(1.1);
  }
}

@-webkit-keyframes nope {
  33% {
    transform: translate(2px) scale(1.1);
  }

  66% {
    transform: translate(-2px) scale(1.1);
  }
}

clears {
  display: block;
  padding: 0px 20px;
  width: 90px;
  text-align: left;
}

me {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0;
  padding: 0;
}

gameover {
  display: flex;
  position: absolute;
  flex-direction: column;
  align-items: center;
  z-index: 100;
  margin-top: 100px;
  width: 100%;
  max-width: var(--appMaxWidth);
}

#copyme {
  opacity: 0;
  margin: 0px;
  padding: 0px;
  width: 0px;
  height: 0px;
  overflow: hidden;
  line-height: 0px;
}

newhigh {
  display: block;
  cursor: pointer;
  padding: 0;
  color: var(--color2);
}

gameover h2 {
  margin-top: var(--defaultGap);
}

confetti {
  display: block;
  position: fixed;
  top: -20px;
  transform: translate(0px -10px) rotate(0deg);
  opacity: 8;
  z-index: 3000;
  transition-timing-function: ease-in;
  background: black;
  width: 10px;
  height: 10px;
  pointer-events: none;
}

herald {
  display: flex;
  justify-content: center;
  align-items: start;
  box-shadow: inset 0px 0px 6px hsla(0, 0%, 0%, 0.2);
  border-radius: 50%;
  width: 180px;
  height: 180px;
}

@property --glow {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 20%;
}

.hardcore page {
  animation: aura 3s var(--transitionEase) 0s infinite;
  background-image: radial-gradient(circle at center 325px, hsla(var(--rankHue), 100%, 60%, .3), hsla(var(--rankHue), 100%, 60%, 0) var(--glow));
  -webkit-animation: aura 3s var(--transitionEase) 0s infinite;
}

@keyframes aura {
  50% {
    --glow: 35%;
  }
}

@-webkit-keyframes aura {
  50% {
    --glow: 35%;
  }
}

page herald {
  cursor: pointer;
  /* background-image: repeating-radial-gradient(circle, hsla(0, 0%, 0%, 0) 0px, hsla(0, 0%, 0%, 0) 18%, hsla(0, 0%, 0%, .3) 18%, hsla(0, 0%, 0%, .3) 36%); */
  background-image: url(../images/burst.svg), radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .3));
  background-size: cover;
  background-repeat: no-repeat;
}

herald icon {
  background: transparent;
  background-position: top center;
  background-size: 100% 100%;
  background-repeat: none;
  width: 95%;
  height: 99%;
  /* transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backdrop-filter: blur(0);
  -webkit-filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .5));
  filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .5)); */
}

rank herald {
  box-shadow: none;
  border-radius: 0px;
  background-image: none;
  width: 90px;
  height: 50px;
}

rank herald:last-of-type {
  opacity: 0;
}

.hardcore rank herald:last-of-type {
  opacity: 1;
}

rank herald icon {
  background-position: center center;
  background-size: 106% 106%;
  height: 100%;
}

herald.rank0 icon {
  background-image: url(../images/icon_rank0.svg);
}

herald.rank1 icon {
  background-image: url(../images/icon_rank1.svg);
}

herald.rank2 icon {
  background-image: url(../images/icon_rank2.svg);
}

herald.rank3 icon {
  background-image: url(../images/icon_rank3.svg);
}

herald.rank4 icon {
  background-image: url(../images/icon_rank4.svg);
}

herald.rank5 icon {
  background-image: url(../images/icon_rank5.svg);
}

rank herald.rank0 icon {
  background-image: url(../images/icon_rank0_sm.svg);
}

rank herald.rank1 icon {
  background-image: url(../images/icon_rank1_sm.svg);
}

rank herald.rank2 icon {
  background-image: url(../images/icon_rank2_sm.svg);
}

rank herald.rank3 icon {
  background-image: url(../images/icon_rank3_sm.svg);
}

rank herald.rank4 icon {
  background-image: url(../images/icon_rank4_sm.svg);
}

rank herald.rank5 icon {
  background-image: url(../images/icon_rank5_sm.svg);
}

herald.rank6 {
  background-image: linear-gradient(-45deg, hsl(39, 50%, 50%) 20%, hsl(60, 50%, 50%), hsl(120, 70%, 25%), hsl(240, 50%, 50%), hsl(300, 50%, 25%), hsl(0, 50%, 50%) 80%);
}


herald.rank6 {
  background-image: url(../images/burst.svg), radial-gradient(circle, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .3)), linear-gradient(-45deg, hsl(39, 50%, 50%) 20%, hsl(60, 50%, 50%), hsl(120, 70%, 25%), hsl(240, 50%, 50%), hsl(300, 50%, 25%), hsl(0, 50%, 50%) 80%);
}

.hardcore rank herald.rank6,
rank herald.rank6 {
  background-image: none;
}

herald.rank6 icon {
  background-image: url(../images/icon_rank6.svg);
}


rank herald.rank6 icon {
  background-image: url(../images/icon_rank6_sm.svg);
}


.hardcore herald.rank0 icon {
  background-image: url(../images/icon_rank0_hc.svg);
}

.hardcore herald.rank1 icon {
  background-image: url(../images/icon_rank1_hc.svg);
}

.hardcore herald.rank2 icon {
  background-image: url(../images/icon_rank2_hc.svg);
}

.hardcore herald.rank3 icon {
  background-image: url(../images/icon_rank3_hc.svg);
}

.hardcore herald.rank4 icon {
  background-image: url(../images/icon_rank4_hc.svg);
}

.hardcore herald.rank5 icon {
  background-image: url(../images/icon_rank5_hc.svg);
}

.hardcore herald.rank6 icon {
  background-image: url(../images/icon_rank6_hc.svg);
}


.hardcore rank herald.rank0 icon {
  background-image: url(../images/icon_rank0_hc_sm.svg);
}

.hardcore rank herald.rank1 icon {
  background-image: url(../images/icon_rank1_hc_sm.svg);
}

.hardcore rank herald.rank2 icon {
  background-image: url(../images/icon_rank2_hc_sm.svg);
}

.hardcore rank herald.rank3 icon {
  background-image: url(../images/icon_rank3_hc_sm.svg);
}

.hardcore rank herald.rank4 icon {
  background-image: url(../images/icon_rank4_hc_sm.svg);
}

.hardcore rank herald.rank5 icon {
  background-image: url(../images/icon_rank5_hc_sm.svg);
}

.hardcore rank herald.rank6 icon {
  background-image: url(../images/icon_rank6_hc_sm.svg);
}




ranks {
  /* margin-top: var(--defaultGap); */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.ranktext {
  color: hsl(var(--rankHue), 80%, var(--rankLum));
}

rank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-bottom: var(--defaultGap);
  border-radius: var(--borderRadius);
  color: hsl(var(--rankHue), 80%, var(--rankLum));
  line-height: 100%;
  text-shadow: 0px -1px 0px white;
}

span.locked rank {
  color: hsl(var(--appForeground));
}

ranks rank {
  gap: 0px;
  margin-bottom: 0px;
  box-shadow: inset 0px 1px 4px hsla(0, 0%, 0%, 0.4);
  background-image: linear-gradient(-45deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0), rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
  padding: 0px 6px;
  width: 100%;
  max-width: 330px;
  color: hsl(var(--appBackgroundStrong));
  text-shadow: none;
}

page ranks rank {
  box-shadow: inset 0px 1px 4px hsla(0, 0%, 0%, .4);

}


ranks rank name {
  padding: 17px 0px 10px;
}

page ranks {
  margin-top: -92px;
}

page ranks+credit {
  margin-top: 8px;
  margin-bottom: var(--defaultGap);
}

page ranklabel {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-bottom: 0px;
  border-radius: calc(.5 * var(--borderRadius)) calc(.5 * var(--borderRadius)) 0 0;
  background: hsla(var(--appForeground), .6);
  padding: 2px var(--defaultGap) 1px;
  width: calc(100% - 2 * var(--defaultGap));
  height: var(--defaultGap);
  color: hsla(var(--appBackground), 1);
  font-size: .8em;
  letter-spacing: 1px;
  text-transform: uppercase;
}

page ranklabel icon {
  mask-size: 12px 12px;
  margin-bottom: 2px;
  background-size: 12px 12px;
  width: 12px;
  height: 12px;
  -webkit-mask-size: 12px 12px;
}

page ranks rank {
  flex-direction: column;
  gap: 0px;
  padding-top: 0px;
  padding-right: 0px;
  padding-left: 0px;
  width: 280px;
  overflow: hidden;
  /* box-shadow: 0px -2px 4px hsla(0, 0%, 0%, .25); */
}


@keyframes pulseglow {
  50% {
    box-shadow: 0px 0px 30px hsla(var(--rankHue), 100%, 80%, 1);
  }
}

@-webkit-keyframes pulseglow {
  50% {
    box-shadow: 0px 0px 30px hsla(var(--rankHue), 100%, 80%, 1);
  }
}

emoji {
  display: block;
  position: relative;
  font-size: 3.6em;
  line-height: 1.2em;
}

ranks rank.last {
  background-image: linear-gradient(-45deg, hsl(39, 50%, 50%), hsl(60, 50%, 50%), hsl(120, 70%, 25%), hsl(240, 50%, 50%), hsl(300, 50%, 25%), hsl(0, 50%, 50%)), linear-gradient(-45deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, 0), rgba(0, 0, 0, .2), rgba(0, 0, 0, 0));
}

ranks rank span {
  display: inline-block;
  padding-bottom: 4px;
  width: 40px;
  font-size: 2em;
}

ranks rank span:last-of-type,
.hardcore ranks rank.locked span:last-of-type {
  opacity: 0;
}

.hardcore ranks rank span.cleared:last-of-type {
  opacity: 1;
}

ranks rank name {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  color: hsl(var(--appBackgroundStrongest));
  line-height: 100%;
  text-shadow: 0px -1px 0px rgba(0, 0, 0, .3);
}

rank.locked {
  filter: grayscale(1);
  background-color: hsla(0, 0%, 50%, 1);
}

ranks rank.unlocked {
  margin-bottom: var(--defaultGap);
  background-color: hsla(0, 0%, var(--rankLum), 1);
}

ranks rank.unlocked credit {
  line-height: 1.25em;
}

ranks rank.locked name {
  opacity: 1;
}

ranks rank credit {
  line-height: 1.25em;
}

.simpleranks ranks rank {
  padding: 20px 20px 20px;

}

.simpleranks ranks rank name {
  font-size: 1.4em;
}

.simpleranks ranks rank credit {
  display: none;
}


ranks rank name detail {
  font-size: 1.4em;
  font-family: 'Bangers';
  letter-spacing: 1px;
}

page ranks rank name detail {
  font-size: 1.7em;
  font-family: 'Bangers';
  letter-spacing: 1px;
}

confetti.drop {
  opacity: 1;
  transition-property: all;
}


@media only screen and (max-height: 600px) {
  page content {
    padding-top: 0;
    overflow-y: scroll;
  }

  button.update {
    margin-top: -4px;
  }

  tutorial board {
    height: calc((var(--pieceSize) + 4px) * 2);
  }

  tutorial description {
    height: auto;
  }
}

@media only screen and (max-width: 450px) {
  html {
    background: hsl(var(--appBackground));
  }

  body {
    font-size: 1.15em;
  }

  page content {
    margin-top: 0;
    height: calc(100% - var(--defaultGap));
  }

  page content section {
    padding: 0;
  }

  app {
    margin: 0 auto;
    box-shadow: none;
  }

  wallpaper {
    display: none;
  }

  wallpaper.square {
    background-image: none;
  }

  wallpaper.circle {
    background-image: none;
  }

  wallpaper.triangle {
    background-image: none;
  }

  wallpaper.hexagon {
    background-image: none;
  }

  button.danger {
    border-color: hsl(var(--appBackground));
    background: hsl(var(--appBackground));
    background-color: hsl(var(--appBackground));
  }

  smallbuttons,
  controlgroup {
    column-gap: 6px;
  }

  currentscore {
    margin: 0px;
  }

  actionbar {
    padding: 0px calc(.5 * var(--defaultGap));
    width: calc(100% - 1 * var(--defaultGap));
    max-width: 360px;
  }

  actionitem {
    width: 34px;
    font-size: .8em;
  }

  board {
    margin: 4px 10px;
    padding: 0px;
  }

  me {
    margin: 0;
    padding: 0;
  }

  h3,
  p {
    padding: 0;
  }


  hint,
  notification {
    margin: calc(var(--chromeHeight) + var(--defaultGap)) var(--defaultGap);
    padding: 16px var(--defaultGap) 16px;
    width: calc(100% - (var(--defaultGap) * 4));
    height: 36px;
  }

  notification {
    margin: var(--defaultGap);
  }

  challenge {
    margin-top: var(--chromeHeight);
    height: calc(100% - var(--chromeHeight));
  }

  time.alert {
    color: hsl(var(--appBackgroundStrongest));
  }

  tutorial container description b {
    font-size: 0.9em;
  }
}

@media only screen and (max-height: 450px) {
  modal.notransition content {
    margin-top: 0;
    padding-top: calc(2 * var(--defaultGap));
  }

  button {
    margin-bottom: 6px;
    height: 38px;
    min-height: 38px;
    font-size: 1.4em;
  }

  scorearea labelsmall {
    display: none;
  }

  chrome.footer {
    display: none;
    position: fixed;
    right: var(--defaultGap);
    bottom: var(--defaultGap);
  }

  page content section description,
  version {
    display: none;
  }

  scorearea {
    margin-bottom: 0;
  }

  currentscore {
    font-size: 2em;
  }
}