* {
  box-sizing: border-box;
  font-family: "Inter Var";
  font-size: var(--baseFontSize);
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

body {
  background-image: linear-gradient(#aaa 20%, #787878 30%, #787878 100%);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px;
  padding: 0px;
  width: 100vw;
  height: 100svh;
  position: fixed;
  overflow: hidden;
}

.play {
  background-image: url(img/9x9bg.png);
  background-size: 100vw;
  background-position: 17vw -20vw;
  background-repeat: no-repeat;
}

.bgFiller {
  background-image: url(img/9x9bg_filler.png);
  background-size: 10vw;
  background-position: 0px -20vw;
  background-repeat: repeat-x;
  max-height: 100vh;
}

.startScreen {
  background-size: 160vw;
  background-position: -30vw -30vw;
}

.fillZoom {
  background-size: 16vw;
  background-position: 0px -30vw;
}

button {
  font-family: "Inter var";
  font-variation-settings: "wght" var(--boldWeight), "slnt" 0;
  font-size: calc(var(--baseFontSize) * 1.2);
  border-radius: 999px;
  border: none;
  text-decoration: none;
  padding: 7px;
  padding-left: 30px;
  padding-right: 30px;
  background-color: var(--accColor);
  color: white;
}

.fullScreen {
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100dvh;
  max-height: 100dvh;
  position: fixed;
  top: 0px;
  left: 0px;
}

.KI {
  background-color: #000000;
  opacity: 0.8;
  display: none;
}

.statusArea {
  position: fixed;
  width: 30vw;
  top: 20vw;
  left: 5vw;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  color: white;
  background-color: #00000055;
  padding: 10px;
  border-radius: 10px;
  opacity: 0;
}

#cardsRemAll {
  display: none;
  margin-top: 10px;
}

.response {
  width: var(--smCardSize);
  height: var(--smCardSize);
  left: var(--smCardLeft);
  top: var(--smCardTop);
  position: fixed;
  display: flex;
  opacity: 0;
  color: white;
  text-align: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  transform: translate(-50%, -50%);
  transform: translate(0%, 0%);
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.response div {
  min-width: 100%;
}
.huge {
  transform: scale(2) translate(0%, 0%);
  opacity: 1;
}

.invisible {
  opacity: 0;
}

#preview {
  display: none;
}
.copyright {
  width: 100%;
  text-align: center;
  writing-mode: vertical-rl;

  position: fixed;
  bottom: 20px;
  font-size: 0.9em;
  color: #ffffff99;
}

.sideBySide {
  display: flex;
  gap: 10px;
}

.sideBySide .right {
  text-align: right;
}
.sideBySide section {
  min-width: calc(50% - 5px);
  max-width: calc(50% - 5px);
}
/*
#compScore {
  text-align: right;
}
*/

.feedback {
  color: white;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  position: fixed;
  width: 100vw;
  height: 20dvh;
  top: 30vh;
  left: 0px;
  font-size: 12pt;
  font-family: "Courier New", Courier, monospace;
  z-index: -10;
  display: none;
}
.pushCardTxt {
  font-family: "Courier New", Courier, monospace;

  position: fixed;
  color: yellow;

  font-size: 10pt;
  left: 85vw;
  top: 40vh;
  background-color: green;
  z-index: 1000;
  display: none;
}

#gamePreview {
  left: 10vw;
  background-color: red;
}

.cardContainer {
  width: var(--cardSize);
  height: var(--cardSize);
  position: absolute;
  top: var(--pushCardOut); /*var(--pushCardOut);*/
  left: var(--pushCardLeft);
  backface-visibility: visible;
  transform: perspective(1000px) translateZ(10px);
}

.animCard {
  transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
}

.pushCardFront {
  transform: perspective(1000px) translateZ(100px);
}

.pushCard {
  width: 100%;
  height: 100%;
  background-size: cover;
  position: absolute;
  transition-duration: var(--rotZspeed);
  -webkit-transition-duration: var(--rotZspeed);
}

.smCard {
  /*
  width: var(--smCardSize);
  height: var(--smCardSize);
  */
  height: 100%;
  width: 100%;
  position: absolute;
  /*
  left: var(--smCardLeft);
  top: var(--smCardTop);
  transform: translate(-50%, -50%);
  */
  top: 50%;
  left: 50%;
}
.smCard img {
  width: 100%;
  height: 100%;
  /*filter: drop-shadow(1px 1px 2px #00000033);*/
}

#playSheet {
  transform: perspective(0px) translate(-50%, -50%) rotateZ(0deg);
}

.psinside {
  top: 50%;
}
.psoutside {
  top: calc(var(--zoomCardSize) * -2);
}

#rotX {
  transition-duration: var(--rotXspeed);
  -webkit-transition-duration: var(--rotXspeed);
}

.pushCard img {
  size: 100%;
  width: 100%;
}

.testButton {
  position: relative;
  z-index: 1000;
  background-color: green;
}

.pushCardSammler {
  position: fixed;
  width: var(--smCardSize);
  height: var(--smCardSize);
  top: var(--smCardTop);
  left: var(--smCardLeft);
}
/*
.pushCardSammler {
  position: fixed;
  width: var(--smCardSize);
  height: var(--smCardSize);
  top: var(--smCardTop);
  left: var(--smCardLeft);
  transform: translate(-50%, -50%);
}
*/

.anim1 {
  /*
  -webkit-transition-property: width, height, top, left, transform,
    background-size, background-position, translateX, translateY;
  transition-property: width, height, top, left, transform, background-size,
    background-position, translateX, translateY;
    */
  transition-duration: 1s;
}

.zoom {
  width: var(--zoomCardSize);
  height: var(--zoomCardSize);
  top: var(--zoomCardTop);
  left: var(--zoomCardLeft);
}

#restartMenu {
  display: none;
}

.buttonBereich {
  position: fixed;
  left: 50vw;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;

  top: 90dvh;
  z-index: 110;
}

.kleinerButton {
  font-size: calc(var(--baseFontSize) * 0.9);
  flex-grow: 0;
}

.swipe_area {
  z-index: 100;

  width: 100vw;
  height: 100dvh;
  position: fixed;
  bottom: 0px;
  left: 0px;
  background-color: chartreuse;
  opacity: 0;
}

#swipeIndicators {
  top: 0px;
  left: 0px;
  opacity: 0;
  display: block;
}

#swipeTop {
  position: fixed;
  z-index: 20;
  height: calc(var(--swipeAreaH) * 0.35);
  width: 100%;
  left: 0px;
  background-color: yellow;
  top: var(--swipeAreaT);
}

#swipeFlip {
  position: fixed;
  z-index: 50;
  height: calc(var(--swipeAreaH) * 0.3);
  width: 100%;
  left: 0px;
  background-color: red;
  top: calc(var(--swipeAreaT) + var(--swipeAreaH) * 0.35);
}

#swipeBottom {
  position: fixed;
  z-index: 50;
  height: calc(var(--swipeAreaH) * 0.35);
  width: 100%;
  left: 0px;
  background-color: cyan;
  top: calc(var(--swipeAreaT) + var(--swipeAreaH) * 0.65);
}

#swipeMitte {
  position: fixed;
  z-index: 50;
  height: var(--swipeAreaH);
  width: calc(var(--cardSize) * 0.46);
  left: calc(50vw - var(--cardSize) * 0.23);
  top: var(--swipeAreaT);
  background-color: white;
  opacity: 0.8;
}

#swipeLeft {
  position: fixed;
  z-index: 50;
  height: var(--swipeAreaH);
  width: calc(50vw - var(--cardSize) * 0.23);
  left: 0px;
  top: var(--swipeAreaT);
  background-color: green;
  opacity: 0.5;
}

#swipeRight {
  position: fixed;
  z-index: 50;
  height: var(--swipeAreaH);
  width: calc(50vw - var(--cardSize) * 0.23);
  left: calc(50vw + var(--cardSize) * 0.23);
  top: var(--swipeAreaT);
  background-color: orange;
  opacity: 0.5;
}

#swipeHUD {
  position: fixed;
  top: env(safe-area-inset-top);
  z-index: 500;
  width: 100vw;
  height: 60px;
  background-color: #ffffff66;
  padding: 10px;
  display: none;
  flex-direction: row;
  justify-content: center;
  gap: 3px;
}

#3dwrapper {
  transform-style: preserve-3d;
}

.makeRed {
  transform: perspective(1000px) translateY(calc(var(--cardSize) / -5))
    translateZ(200px);
}

.swapZeile {
  display: block;
  width: calc(100%);
}
.swapping {
  width: 2em;
  text-align: center;
  position: relative;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
}

.swLinks {
  left: 0%;
  color: magenta;
}

.swMitte {
  left: calc(50% - 1em);
  color: white;
}

.swRechts {
  left: calc(100% - 2em);
  color: #00bdff;
}

.statusEnde {
  background-color: #00000099;

  width: 90vw;
  left: 5vw;
  top: 90vw;
}

.statusEnde #nochZeile {
  opacity: 0;
}

#performanceZeile {
  display: none;
}

.statusEnde #performanceZeile {
  display: block;
}
#nochZeile section {
  text-align: center;
}

#nochZeile img {
  height: 3em;
  vertical-align: bottom;
  margin-left: 0.5em;
  margin-right: 0.5em;
}

.alarm {
  color: red;
}

#perFlex {
  display: flex;
  height: 3em;
}
#perfBarArea {
  width: calc(15% - 3.5em);
  height: 100%;
  display: block;
}

.normal {
  display: block;
  position: relative;

  width: 100%;
  height: 80%;
  top: 10%;
  border-radius: 999px;
  background-image: linear-gradient(
    90deg,
    cyan 10%,
    lightgreen 25%,
    yellow 50%,
    orange 75%,
    red 100%
  );
  background-position-x: 0%;
  background-size: calc(100% * 100 / 15);
}

.perfect {
  display: block;
  position: relative;

  width: 100%;
  height: 80%;
  top: 10%;
  border-radius: 999px;

  background-image: linear-gradient(
    90deg,
    #fccb00 0%,
    #fffad1 25%,
    #c89516 60%,
    #f1dc8d 87%,
    #fccb00 100%
  );
}
#performanceCounter {
  width: 2.8em;
  display: block;
  text-align: center;
}

#videoFrame {
  position: fixed;
  width: 100dvw;
  height: 100dvh;
  background-color: #000000aa;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4x);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 3000;
}

video {
  height: 100dvh;
  max-width: 100dvw;
  position: relative;
  left: 50dvw;
  top: 50dvh;
  transform: translate(-50%, -50%);
}