/** Add css rules here for your application. */
* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

/** SaveArea. */
:root {
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
}

/* ------------ Online game ------------------- */

.game-container {
  display: flex;
  xgap: 1rem;
  width:100%;
  justify-content: flex-start; /* optional: space-between, center, etc. */
  background: #99c2d0;
}

.player-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 20%;
  box-sizing: border-box;
}

.player-item .plimg {
  width: 50px;
  height: auto;
  display: block;
  position:relative;
}
.player-item .plimg img {
	width:100%;
}
.player-item .plimg div {
	display: block;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 30px;
    text-align:center;
    pointer-events:none;
}
.player-item .plimg div img{
	width:10px;
}

.player-item .plname {
  margin-bottom: 0.5rem;
  margin-top: 0.1rem;
  padding: 0.1rem;
  font-size: 1.3em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 90%;
  background: white;
  border-radius: 8px;
}





@keyframes softSwingRotateOrigin {
  0% { rotate: -6deg; }
  100% { rotate: 5deg; }
}
@keyframes moveWave1 {
  0% { transform: translateX(-10%); }
  100% { transform: translateX(0%); } /* Bewegt sich um 10% der eigenen Breite nach rechts */
}

@keyframes moveWave2 {
  0% { transform: translateX(-8%); }
  100% { transform: translateX(0%); }
}

@keyframes moveWave3 {
  0% { transform: translateX(-12%); }
  100% { transform: translateX(0%); }
}

@keyframes moveWave4 {
  0% { transform: translateX(-15%); }
  100% { transform: translateX(0); }
}

.wackelndesBild {
  animation: wackeln 1.3s ease-in-out infinite alternate;
}
.wackelndesBild2 {
  animation: wackeln 1.5s ease-in-out infinite alternate;
}

@keyframes wackeln {
  0% {
    transform: translateX(0) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(-5deg);
  }
  100% {
    transform: translateX(0) rotate(5deg);
  }
}

@keyframes pulseSize2 {
    0% {
        transform: scale(1);
    }

    70% {
        
        transform: scale(1.5) rotate(-26deg);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes pulseSize {
    0% { transform: rotate(0deg); }
    10% { transform: rotate(-26deg); }
    15% { transform: rotate(5deg); }
    20% { transform: rotate(0deg); }
    60% { transform: rotate(0deg); }
    65% { transform: rotate(-16deg); }
    70% { transform: rotate(-5deg); }
    85% { transform: rotate(2deg); }
    90% { transform: rotate(-16deg); }
    100% { transform: rotate(0deg); }
}
@keyframes pulseSize1 {
    0% {
        right: 30vh;
    }

    50% {
        right: 40vh;
    }

    100% {
    	right: 30vh;
    }
}

@keyframes bgScroll {
  0% {
    background-position : 0px 0px
  }
  100% {
    background-position : -10000px 0px
  }
}

.moving0 {
	position:absolute;
	left: 100%;
	bottom:0;
	transition: 12s all;
	transition-timing-function: linear;
	z-index:4;
	height: 38vh;
}
.moving1 {
	position:absolute;
	left: 100%;
	bottom:0;
	transition: 16s all;
	transition-timing-function: linear;
	z-index:3;
	height: 38vh;
}
.moving2 {
	position:absolute;
	left: 100%;
	bottom:0;
	transition: 8s all;
	transition-timing-function: linear;
	z-index:2;
	height: 38vh;
}
.moving3 {
	position:absolute;
	left: 100%;
	bottom:0;
	transition: 24s all;
	transition-timing-function: linear;
	z-index:1;
	height: 38vh;
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

}

.appcredit {
	margin-top: 1vw;
}
.appcredit a{
	text-decoration: none;
}
.appcredit img{
	width: 10vw;
	height: 10vw;
	vertical-align: top;
	margin-right: 15px;
	float:left;
	border-radius: 1.5vw;
}
.appcredit .apphead{
	font-size: 5vw;
	text-align: left;
	color: #fff;
}
.appcredit .appdesc{
	text-align: left;
	font-size: 2vw;
	height: 5vw;
	color: #ddd;
}

.content-flow{
	width: 80%;
	margin: auto;
	font-family: Sans-Serif;
	text-transform: none;
	font-size: 3vw;
	color: white;
}
.s3{
	clear: both;
	font-size: 3vw;
}
.s2{
	font-size: 2vw;
}
.s4{
	clear: both;
	font-size: 4vw;
}
.s4s{
	font-size: 3vw;
}
.textright{
	text-align: right;
	padding: 0px 8vw;
}

.iw25 img{
	width: 25%;
}
.iw60 img{
	width: 60%;
}

.if8 img{
	width: 8%;
	float:left;
	margin-right: 1%;
}
.ifr img{
	float:right;
	margin-left: 3%;
}

.if10 img{
	width: 10%;
	float:left;
	margin-right: 1%;
}
.ifr10 img{
	width: 10%;
	float:right;
	margin-left: 3%;
}

.textleft{
	text-align: left;
	padding: 0px 8vw;
	clear: both;
}
.textcenter{
	text-align: center;
	padding: 0px 8vw;
	
}
.rulestext{
	padding: 0px 14vw 14px 14vw;
}
.ruleshead{
	padding: 0px 12vw;
}
.rulessubhead{
	padding: 0px 14vw;
}
.textcenter img{
	max-width: 80%;
}

.textleft{
	text-align: left;
	padding: 0px 8vw;
}
.head{
	margin-top: 2vw;
    margin-bottom: 0.5vw;
    font-weight: 800;
    margin-bottom: 0.7em;
}
.game-border{
	padding: 0px;
    ywidth: 100%;
    ywidth: 100vw;
    yheight: 66vw;
    background: #10314a00;
    ymax-height: 100vh;
    ymax-width: 155.78vh;
    margin: auto;
    xmax-height: 66vw;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.game-border  canvas{
	padding: 0px;
    ywidth: 100%;
    ywidth: 100vw;
    yheight: 64.263vw;
    height: 100vh;
    background: #10314a00;
    ymax-height: 100vh;
    xmax-height: 66vw;
    ymax-width: 155.78vh;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    outline: none !important;
}
#vertical{
	position: fixed;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	
	background: url(images/bg.jpg); 
 	background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: left center; 
	-webkit-transition: background-image 0.5s ease-in-out;
	transition: background-image 0.5s ease-in-out;
}

#containMe{
    xposition: absolute;
    xleft: 242px;
    xtop: 216px;
    xright: 242px;
    xbottom: 225px;
    xwidth: 800px;
    xheight: 800px;
	width: 100%;
	animation: pulse 2s 5; 
} 

@keyframes pulse {
  0% {
    background-color: #1c2e2d;
  }
  50% {
    background-color: #4c5e5d;
  }
  100% {
    background-color: #1c2e2d;
  }
}
#all {
	position: relative;
}

#top {
    background-image: url(topn.jpg);
    background-size: 100% 100%;
	height: 550px;
}

#bottom {
background-image: url(bottomn.jpg);
    background-size: 100% 100%;
	position: absolute;
	bottom: 0px;
	height: 550px;
	width: 100%;
}

#center {
background-image: url(center.jpg);
    background-size: 100% 100%;
	position: absolute;
	bottom: 230px;
	top: 230px;
	width: 100%;
}

.base {
	background: none;
    position: fixed;
    left: 0px;
    right: 0px;
    xbottom: 0px;
	opacity: 1;
    xoverflow-y: scroll;
    transition: all 0.3s ease-in;
   	top: 0px;
   	left: 100%;
   	width: 100%;
   	height:100%;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}
.base.visible {
   	left: 0%;
	opacity: 1;
	pointer-events: all;
	visibility: visible;
	
}