/*
@font-face {
    font-family: 'eurostile';
    src: url('../font/eurostile-webfont.eot');
    src: url('../font/eurostile-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/eurostile-webfont.woff') format('woff'),
         url('../font/eurostile-webfont.ttf') format('truetype'),
         url('../font/eurostile-webfont.svg#eurostileregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
  font-family: 'Roman';
  src:  url('../font/HelveticaNeueLTPro-Roman.eot');
  src:  url('../font/HelveticaNeueLTPro-Roman.eot?#iefix') format('embedded-opentype'),
        url('../font/HelveticaNeueLTPro-Roman.woff') format('woff'),
        url('../font/HelveticaNeueLTPro-Roman.ttf')  format('truetype'),
        url('../font/HelveticaNeueLTPro-Roman.svg#HelveticaNeueLTPro-Roman') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Md';
  src:  url('../font/HelveticaNeueLTPro-Md.eot');
  src:  url('../font/HelveticaNeueLTPro-Md.eot?#iefix') format('embedded-opentype'),
        url('../font/HelveticaNeueLTPro-Md.woff') format('woff'),
        url('../font/HelveticaNeueLTPro-Md.ttf')  format('truetype'),
        url('../font/HelveticaNeueLTPro-Md.svg#HelveticaNeueLTPro-Md') format('svg');
  font-weight: normal;
  font-style: normal;
}
*/
@font-face {
  font-family: 'Lt';
  src:  url('../font/HelveticaNeueLTPro-Lt.eot');
  src:  url('../font/HelveticaNeueLTPro-Lt.eot?#iefix') format('embedded-opentype'),
        url('../font/HelveticaNeueLTPro-Lt.woff') format('woff'),
        url('../font/HelveticaNeueLTPro-Lt.ttf')  format('truetype'),
        url('../font/HelveticaNeueLTPro-Lt.svg#HelveticaNeueLTPro-Lt') format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'UltLt';
  src:  url('../font/HelveticaNeueLTPro-UltLt.eot');
  src:  url('../font/HelveticaNeueLTPro-UltLt.eot?#iefix') format('embedded-opentype'),
	url('../font/HelveticaNeueLTPro-UltLt.woff') format('woff'),
        url('../font/HelveticaNeueLTPro-UltLt.ttf')  format('truetype'),
        url('../font/HelveticaNeueLTPro-UltLt.svg#HelveticaNeueLTPro-UltLt') format('svg');
  font-weight: normal;
  font-style: normal;
}
html, body, iframe, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td{
  margin: 0;
  padding: 0;
  border: 0;
}
body{
  background-size: cover;
  color: #FFF;
  text-align: center;
	/*background: radial-gradient(#020029, #000);*/
  /*background-image: -webkit-radial-gradient(50% 50%, ellipse cover, #0b5b7d, #000024 100%); /* #10729c , 000030 */
  background: rgb(1,0,24); /*rgb(2,0,34);*/
  font-family: "UltLt", Arial, sans-serif;
  font-size: 18px;
  letter-spacing: 1px;
  touch-action: manipulation; /* Prevents double-tap zoom */
}
body::after {
  content: "";
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  min-width: 100vw;
  pointer-events: none;
  background: radial-gradient(
    circle at 
    var(--dark-light-mode-x, 50%) 
    var(--dark-light-mode-y, 50%),
    rgb(0, 0, 0, 0),
    rgb(0, 11, 28, 0.4) 100%
  );
}
/*
body{
background: radial-gradient(farthest-corner at center, #FFFFFF 0%, #ffb3ff 4%, #ff33ff 12.25%, #800080 31.25%, #b300b3 50%) center right/200% 200%;
  animation: fadeInBG infinite alternate ease-out 4s;
}
@keyframes fadeInBG01 {
  to {
    background-position:center left;
  }
 }
*/

html, body {
  height: 100%;
  overflow: hidden
}

html {
  scrollbar-width: none;
  -ms-overflow-style: none;
  overflow-y: hidden;
}

.line-left {
  position: fixed;
  top: 0;
  left: 0;
  width: 2800px;
  height: 100vh;
  background-image: url('line_l.png');
  background-repeat: repeat;
  background-size: 2800px 128px;
  z-index: 99;
}
.line-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 18px;
  height: 100vh;
  background-image: url('line_r.png');
  background-repeat: repeat;
  background-size: 18px 128px;
  z-index: 99;
}
.line-top {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 1px;
  background-color:rgba(255, 255, 255, 0.6);
  z-index: 99;
}
.line-bottom {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 1px;
  background-color:rgba(255, 255, 255, 0.6);
  z-index: 99;
}
.depth {
  position: fixed;
  top: 63px;
  left: 4px;
  font-size: 11px;
  font-weight: bold;
  padding-left: 10px;
  line-height: 128px;
  white-space: nowrap;
}

#iframe_bg, #iframe_bg2{
  position: absolute;
  left:0;
  top:0;
  height: 100%;
  width:100%;
  overflow: hidden;
  z-index: -1;
}
#c_game {
  z-index:3;
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
}
#c_plasmatic {
  z-index:-1;
  position: fixed;
  top:0;
  left:0;
  width: 100vw;
  height: 100vh;
  opacity:0.4;
}
#c_tentacles{
  z-index:2;
  cursor: pointer;
}

#bgcolor{
  z-index:-1;
  position:absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  min-height: 100vh;
  min-width: 100vw;
  background: radial-gradient(farthest-side,rgba(0,95,104,0.4), transparent) center no-repeat;
  background-position:center left;
  animation:pulse infinite alternate 12s;
}
@keyframes pulse{
  from {
    background-size:40% 40%;
    background-position:center left;
  }
  to {
    background-size:100% 100%;
    background-position:center right;
  }
}


.grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  max-width: 80%;
}

.grid div{
  width: 33%;
  margin: 10%;
}
img {
  max-width: 100%;
  max-height: 100%;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  opacity: 0;
  pointer-events: none;
  transition: opacity 4s ease;
}

#play-again-container, #score, #level, #popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  text-align: center;
  z-index:101;
  pointer-events: none;
  transition: opacity 2s ease, visibility 0s linear 2s;
}

#score {
  opacity: 0.3;
}
#level {
  opacity: 0.9;
}


#score-text, #score-text2, #score, #level {
  font-size: 16px;
  color: #FFF;
  margin-bottom: 20px;
  font-weight: bold;
  text-align: left;
}
#score-text2 {
  margin-top: 50px;
}
#prediction .bar-static{
  font-size: 20px !important;
  font-weight: bold;
  height: auto;
  margin-bottom: auto;
}

#prediction #barTime, #survival{
  font-weight: 900;
  font-family: 'Lt';
}
#prediction{
   margin-bottom: 40px;
}
#score-text2 table td {
   padding-top: 2px;
}
#popup{
  margin-top:21px;
  font-size:20px;
  display: none;
  opacity: 0;
  font-family: 'Lt';
  transition: opacity 0.5s ease-in-out;
}
/*
#play-again-button {
  padding: 15px 30px;
  font-size: 20px;
  background-color: #0fb40d;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#play-again-button:hover {
  background-color: #039801;
}
*/
/*
#play-again-button {
    padding: 15px 30px;
    font-size: 20px;
    background: rgba(15, 180, 13, 0.3); 
    color: white;
    border: 2px solid rgba(15, 180, 13, 0.7); 
    border-radius: 12px; 
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(15, 180, 13, 0.5), 0 0 15px rgba(15, 180, 13, 0.6); 
    backdrop-filter: blur(15px); 
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

#play-again-button::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 12px;
    background: rgba(15, 180, 13, 0.2);
    box-shadow: 0 0 20px rgba(15, 180, 13, 0.7); 
    z-index: -1;
    filter: blur(10px); 
}

#play-again-button:hover {
    background: rgba(15, 180, 13, 0.5);
    box-shadow: 0 6px 20px rgba(15, 180, 13, 0.7), 0 0 25px rgba(15, 180, 13, 0.8); 
}
*/


/* From Uiverse.io by adamgiebl */ 
#play-again-button{
  --duration: 12s;
  --easing: linear;
  --c-color-1: #1f8400;
  --c-color-2: #0fb40d;
  --c-color-3: #27a400;
  --c-color-4: #27a400;
  --c-radial-inner: #27a400;
  --c-radial-outer: rgba(36, 154, 0, .5);
  --c-color: #fff;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  outline: none;
  position: relative;
  cursor: pointer;
  border: none;
  display: table;
  border-radius: 8px;
  padding: 0;
  margin: 0;
  font-size: 20px;
  background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
  box-shadow: 0 0 14px var(--c-shadow);
}
#play-again-button span{
  font-size:20px;
  letter-spacing: 0.02em;
}

#play-again-button:before{
  content: '';
  pointer-events: none;
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: 8px;
  box-shadow: inset 0 3px 12px var(--c-shadow-inset-top), inset 0 -3px 4px var(--c-shadow-inset-bottom);
}
#play-again-button .wrapper:hover {
  background: rgba(15, 180, 13, 0.5);
}
#play-again-button .wrapper {
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  overflow: hidden;
  border-radius: 8px;
  min-width: 150px;
  padding: 15px 0;
}

#play-again-button .wrapper span {
  display: inline-block;
  position: relative;
  z-index: 1;
}

#play-again-button .wrapper .circle {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur, 8px));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}

#play-again-button .wrapper .circle.circle-1,#play-again-button .wrapper .circle.circle-10,#play-again-button .wrapper .circle.circle-9{--background:var(--c-color-4)}#play-again-button .wrapper .circle.circle-3,#play-again-button .wrapper .circle.circle-4{--background:var(--c-color-2);--blur:14px}#play-again-button .wrapper .circle.circle-5,#play-again-button .wrapper .circle.circle-6{--background:var(--c-color-3);--blur:16px}#play-again-button .wrapper .circle.circle-11,#play-again-button .wrapper .circle.circle-12,#play-again-button .wrapper .circle.circle-2,#play-again-button .wrapper .circle.circle-7,#play-again-button .wrapper .circle.circle-8{--background:var(--c-color-1);--blur:12px}#play-again-button .wrapper .circle.circle-1{--x:0;--y:-40px;--animation:circle-1}#play-again-button .wrapper .circle.circle-2{--x:92px;--y:8px;--animation:circle-2}#play-again-button .wrapper .circle.circle-3{--x:-12px;--y:-12px;--animation:circle-3}#play-again-button .wrapper .circle.circle-4{--x:80px;--y:-12px;--animation:circle-4}#play-again-button .wrapper .circle.circle-5{--x:12px;--y:-4px;--animation:circle-5}#play-again-button .wrapper .circle.circle-6{--x:56px;--y:16px;--animation:circle-6}#play-again-button .wrapper .circle.circle-7{--x:8px;--y:28px;--animation:circle-7}#play-again-button .wrapper .circle.circle-8{--x:28px;--y:-4px;--animation:circle-8}#play-again-button .wrapper .circle.circle-9{--x:20px;--y:-12px;--animation:circle-9}#play-again-button .wrapper .circle.circle-10{--x:64px;--y:16px;--animation:circle-10}#play-again-button .wrapper .circle.circle-11{--x:4px;--y:4px;--animation:circle-11}#play-again-button .wrapper .circle.circle-12{--blur:14px;--x:52px;--y:4px;--animation:circle-12}@keyframes circle-1{33%{transform:translate(0,16px) translateZ(0)}66%{transform:translate(12px,64px) translateZ(0)}}@keyframes circle-2{33%{transform:translate(80px,-10px) translateZ(0)}66%{transform:translate(72px,-48px) translateZ(0)}}@keyframes circle-3{33%{transform:translate(20px,12px) translateZ(0)}66%{transform:translate(12px,4px) translateZ(0)}}@keyframes circle-4{33%{transform:translate(76px,-12px) translateZ(0)}66%{transform:translate(112px,-8px) translateZ(0)}}@keyframes circle-5{33%{transform:translate(84px,28px) translateZ(0)}66%{transform:translate(40px,-32px) translateZ(0)}}@keyframes circle-6{33%{transform:translate(28px,-16px) translateZ(0)}66%{transform:translate(76px,-56px) translateZ(0)}}@keyframes circle-7{33%{transform:translate(8px,28px) translateZ(0)}66%{transform:translate(20px,-60px) translateZ(0)}}@keyframes circle-8{33%{transform:translate(32px,-4px) translateZ(0)}66%{transform:translate(56px,-20px) translateZ(0)}}@keyframes circle-9{33%{transform:translate(20px,-12px) translateZ(0)}66%{transform:translate(80px,-8px) translateZ(0)}}@keyframes circle-10{33%{transform:translate(68px,20px) translateZ(0)}66%{transform:translate(100px,28px) translateZ(0)}}@keyframes circle-11{33%{transform:translate(4px,4px) translateZ(0)}66%{transform:translate(68px,20px) translateZ(0)}}@keyframes circle-12{33%{transform:translate(56px,0) translateZ(0)}66%{transform:translate(60px,-32px) translateZ(0)}}

/* Panels */
.panel {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  max-width: 500px;
  height: auto;
  background-color: rgba(73, 0, 79, 0.9);
  color: white;
  padding: 20px;
  border-radius: 10px;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
  text-align: left;
  z-index: 100;
}

/* Aktives Panel wird eingeblendet */
.panel.active {
  opacity: 1;
  visibility: visible;
}
.activebartab{
  background-color: #fff !important;
  color: #000 !important;
}

/* Vertikale Tabs */
.tab, #barTab, #scoTab {
  position: fixed;
  height: 60px;
  background-color: #000;
  color: rgba(255, 255, 255, 0.8);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  writing-mode: vertical-rl;
  text-align: center;
  font-size:14px;
  font-weight: bold;
  border-radius: 8px 0 0 8px;
  transition: background-color 0.3s ease;
  padding:0 4px;
  z-index: 101;
}
.tab{
  right: 0;
  top: 50%;
  display: flex;
  transform: translateY(-50%);
}
#barTab{
  left: 0;
  top: 8px;
  border-radius: 0 8px 8px 0;
  display: none;
  padding:4px 4px 4px 0;
}
#barFPS, #barX, #barY {
   background: linear-gradient(to bottom, transparent 85%, #999 85%);
}
#scoTab{
  top: 8px;
  right: 0;
  border-radius: 8px 0 0 8px;
  display: none;
}
#infoTab {
  top: calc(50% - 31px); /* Damit er genau über DataTab sitzt */
}
#dataTab {
  top: calc(50% + 31px); /* Direkt darunter */
}
.tab:hover, .tab.active, #barTab:hover, #scoTab:hover {
  background-color: #FFF;
  color: #000;
}
.panel h2 {
  margin-top: 0;
  font-size: font-size: 50px;
  color: #FFF;
}
.panel h3 {
  margin-top: 0;
  font-size: font-size: 14px;
  color: #FFF;
}
.panel p {
  font-size: 14px;
  line-height: 1.6;
  color: #fff;
}
.sco-container{
  position: fixed;
  top: 5px;
  right: 10px;
  height:160px;
  font-family: 'Lt';
  font-size: 11px;
  text-align: right;
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  width: 120px;
  display:block;
  z-index: 101;
}
.sco-container h4{
  font-size: 11px;
  font-weight:normal;
}
#sco{
  text-align: right;
  display:inline-block;
  z-index:99;
}
table td:nth-child(2){
   text-align: right;
}
table{
  border-spacing: 0px;
}
table td{
  padding-right: 2px;
}
.bar-container{
  position: fixed;
  width: 150px;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease-in-out;
  font-family: 'Lt';
  cursor: pointer;
  z-index: 100;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.bar{
  transition: width 0.1s linear, background-color 0.1s linear;
  position: relative;
  color: white;
  display: flex;
  font-size: 10px;
  white-space: nowrap;
  align-items: bottom;
  vertical-align: bottom;
  height: 13px;
  line-height: 11px;
}
.bar-static{
  width: 100%;
  height: 11px;
  display: flex;
  align-items: center;
  font-size: 16px;
  white-space: nowrap;
  margin-bottom:8px;
}
#barTime{
  font-weight: bold;
  margin-top:10px;
}
#barScore span, #barAge span{
  /*background-color: #2c0182;*/
  padding:1px 0 0 0;
}
#barScore span{
  /*background-color: #6a0182;*/
}

/* 3-State Toggle */
#toggles{
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 110; display: flex; gap: 8px; font-family: 'Lt'; align-items: center;
}
#toggleLabel, #audioLabel{
  font-size:11px;
  font-family: 'Lt';
  min-width:24px;
  text-align: right;
}
.switch {
  position: relative;
  display: inline-block;
  width: 47px;
  height: 17px;
}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #282828;
  transition: .4s;
  border-radius: 17px;
}
.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: #c8c8c8;
  transition: .4s;
  border-radius: 50%;
}
.audioSwitch {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin-top:-2px;
  width: 20px;
  height: 20px;
  background-color: #282828;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.3s;
}
.audioSwitch.active {
  background-color: transparent;
}
.audioIcon {
  color: #c8c8c8;
  transition: transform 0.3s;
  transform: scale(1.1);
}
.audioSwitch.active .audioIcon {
  transform: scale(1.1);
}

input { display: none; }

.switch[data-state="0"] .slider { background-color: #282828; }
.switch[data-state="1"] .slider { background-color: #7a7a7a; }
.switch[data-state="2"] .slider { background-color: #282828; }

.switch[data-state="0"] .slider:before { transform: translateX(0px); }
.switch[data-state="1"] .slider:before { transform: translateX(15px); }
.switch[data-state="2"] .slider:before { transform: translateX(30px); }