@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
    html, body, div, span, applet, object, iframe,
    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, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font: inherit;
      vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
      display: block;
    }
    body {
      line-height: 1;
    }
    
    blockquote, q {
      quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
      content: '';
      content: none;
    }
    table {
      border-collapse: collapse;
      border-spacing: 0;
    }
  
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

 
  a:link {COLOR: inherit; TEXT-DECORATION: none;}
  a:visited {COLOR: inherit; TEXT-DECORATION: none;}
  a:active {COLOR: inherit; TEXT-DECORATION: none;}
  a:hover {COLOR: inherit; TEXT-DECORATION: none;}





body { 
	font-family: "Poppins", sans-serif;
	font-size: 26px;
	font-weight: 300;
	line-height: 1.5;
	position: relative;
  color: #fff;
  background: #000;
    margin: 0;
    min-height: 100vh;
    height: auto;
    user-select: none;
 }



strong { font-weight: 700 }
.all { overflow: hidden; }

#dotContainer {
  perspective: 3000px;
  position: fixed;
  background: #000;
  width: 100%; 
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* tło na spodzie */
}

.dot {
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: 0 0 0 1px #fff;
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform;
}

canvas {    position: fixed;
  background: #000;
  width: 100%; 
  height: 100vh;
  overflow: hidden;
  z-index: 1; /* tło na spodzie */} 

.no-scroll { overflow: hidden; height: 100%;}
.no-scroll.active { overflow: visible; height: auto; }
.no-break { white-space: nowrap;}
.brush { font-size:120px; color:orange; text-align: center; font-family: "brushtones", sans-serif; line-height: 1; letter-spacing: 5%}

.start { width: 100%; height: 100vh; position: relative; overflow: hidden; z-index: 100; text-align: center; }
.front-center { position: relative; width: 100%; height: 100vh;}
.front-center span { font-size: 18px;  }
.front-center .tytul-dopisek { font-size: 22px; ; }
.front-center .tytul-dopisek span { font-size: 28px; font-weight: 600 }
.start .title { width: 600px; }
.start .title img { width: 100%; display: block; }
.start-logo { width: 100px;margin: auto;}
.start-logo img { width: 100%;}
.front-center > * {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* zapobiega kliknięciom kiedy elementy leżą na sobie */
  width: auto;
  opacity: 0;              /* ukryte na start, GSAP zmieni */
}

.start-logo { width: 160px; }            /* rozmiar logo */
.start-logo img { width: 100%; display: block; }
.prezentuje { font-size: 20px; letter-spacing: 2px; }
.title, .title-inner { height: 410px; display: block;max-height: 40vh; } /* ograniczenie do ekranu */
.title img { height: 100%; display: block;  }
.tytul-dopisek { font-size: 22px; width: 100%; display: block; opacity: 0; margin-top: 3vh }
.tytul-dopisek span { font-size: 28px; font-weight: 600; }
.front-center .title, .front-center .tytul-dopisek { pointer-events: auto;}

.start-astro { width: 360px; position: absolute; bottom: 100px; left: 5%; transform: rotate(-3deg)}
.start-astro img { width: 100%; display: block; }

.start-meteor { width: 200px; position: absolute; top: 15%; right: 10% }
.start-meteor img { width: 100%; display: block; }

.start-scroll-out { position: fixed; bottom: 3vh; right: calc(50% - 20px); opacity: 0 }

.start-scroll { width: 40px; height: 40px; background: transparent; border: 2px solid #fff; border-radius: 30px; z-index: 1000; display: flex; align-items: center; justify-content: flex-end;  overflow: hidden;  
 -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

.scroll-arrow { width: 20px; height: 20px; border-radius: 50%; position: absolute; right: 10px; top: 10px;}
.scroll-arrow img { display: block; width: 20px;  animation: arrow-bounce 1s ease-in-out infinite; position: relative;  top: 7px; }

@keyframes arrow-bounce {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(-3px);  opacity: 1;}
  100% { transform: translateY(0); opacity: 1; }
}
.start-scroll span { position: absolute; right: 40px; top: 10px; width: 0; overflow: hidden; white-space: nowrap; text-align: right; transition: width 0.2s ease-in-out; font-size: 12px;}
.start-scroll.active:hover { width: 260px;  }
.start-scroll.active:hover span { width: 240px; }


.center { width: 900px; margin: auto; text-align: center; }
.txt-big { font-family: "Poppins", sans-serif; font-size: 30px; font-weight: 400 ;}
.wprowadzenie { font-size: 24px; text-align: center; line-height: 1.6; margin-bottom: 250px }
.wprowadzenie1 { margin-bottom: 100px; opacity: 0 }
.wprowadzenie2 { opacity: 0 }

.section-white .txt-big { text-align: center;  }
.section2 { position: relative; z-index: 4; margin-top: 200px;}
.section2 .txt-color{ color: #292929; text-align: center;  font-size: 40px; line-height: 2.2;} 
.txt-color {  hyphens: none;  word-break: normal; overflow-wrap: normal; }
#textSection {   width: 100%; max-width: 100vw;}
#textSection .txt-color { display: inline-block; white-space: normal;}

h2 { font-size: 60px; margin-bottom: 100px; font-weight: 600; line-height: 1.6; font-family: "brushtones", sans-serif; letter-spacing:  5%}

.section2 .txt-color { transform-origin: top center; transform-style: preserve-3d; perspective: 1600px;  perspective-origin: center bottom;}
.color { color: orange }

.instrukcja { position: relative; z-index: 10; }
.section-flex { display: flex; padding: 150px 0; justify-content: space-between;  }
.section-flex .kol { width: 40%; flex: 0 0 40%;  }
.txt { font-size: 20px; line-height: 2 }
h3 { font-size: 36px; letter-spacing: 5%; margin-bottom: 30px; font-family: "brushtones", sans-serif; color: orange;}
.section-flex .kol { text-align: left; }
.section-flex .kol-right { text-align: right; }

.txt-color {
  color: rgba(255,255,255,0.15); /* np. delikatnie przygaszony */
}


.droga { position: absolute; top: 0; left: 0; height: 100%; width: 100%;  }
.droga-mobile, .droga-tablet { display: none; }
.lot { position: absolute; height: 100%; width: 100%;}
.rocket { width: 120px; height: 120px; background: url('../img/rakieta-bez.png') no-repeat center/contain; position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: 50% 20%;}
.rocket span{ width: 120px; height: 120px; background: url('../img/rakieta-ogon.png') no-repeat center/contain; position: absolute; top: 0; left: 0; pointer-events: none; transform-origin: 40% 50%; opacity: 0,}
.rocket.scrolling span { opacity: 1 }

.rocket .flame {
    animation: fireColor .2s infinite alternate ease-in-out,
               fireFlicker 0.22s infinite ease-in-out;
}

@keyframes fireColor {
    0%   { filter: brightness(1.4) saturate(1.5)  }
    50%  { filter: brightness(1.8) saturate(10) hue-rotate(0deg); }
    100%   { filter: brightness(1.4) saturate(1.5)  }
}

@keyframes fireFlicker {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12);}
    100% { transform: scale(1); }
}

.droga {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* opcjonalnie jeśli chcesz pokazać path */
  /* border: 1px dashed red; */
}

.lot svg { width: 100%; height: 100%;  }
.lot svg path { fill: transparent; }
.instrukcja .center { position: relative; padding-bottom: 150px }

.call { padding-bottom: 40vh; }
.btn { display: inline-block; font-family: "brushtones", sans-serif; letter-spacing: 5%;  cursor: pointer; font-weight: 500; background: orange; color: #000; padding: 20px 60px; border-radius: 60px; font-size: 26px; margin-top: 30px; position: relative; 
  -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;}
.btn:hover { background: #fff; color: #000; }
section { position: relative; z-index: 10 }

/*.section-flex:nth-child(2n+1) { background: #141d2c }
.section-flex:nth-child(2n+2) { background: #324c6d }
.lot .droga-mobile { width: 100%; height: 100%; fill: rgba(255, 255, 255, 0.3); stroke: orange; stroke-width: 2;  }*/



html { scrollbar-gutter: stable both-edges; }
/* Fallback dla starszych przeglądarek (opcjonalnie, tylko desktop) */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }
}



  
*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

input {
  border-radius: 0;
}

input{
  -webkit-appearance: none;
}

 
  a:link {COLOR: inherit; TEXT-DECORATION: none;}
  a:visited {COLOR: inherit; TEXT-DECORATION: none;}
  a:active {COLOR: inherit; TEXT-DECORATION: none;}
  a:hover {COLOR: inherit; TEXT-DECORATION: none;}
button { color: #1b1b1b; }

b, strong{ font-weight: bold; }
i, em{ font-style: italic; }





*,
*:before,
*:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box; 
  user-select: none;
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* IE10+ */
}

/* SCORE */
#scoreboardContainer{ display:none; }
.scoreTable{ width:1000px; margin:auto; margin-top:70px; z-index:100; position:relative; display: none;}
.scoreHeader{ font-size:65px; line-height:1.1; text-align:center; margin-top: 30px; margin-bottom:20px; font-family: "brushtones", sans-serif;}
.scoreTxt{ font-size:19px; font-weight: 300; line-height:1.5; margin-bottom:75px; text-align:center; }
.scoreCountHeader{ font-size:50px; line-height:1.2; text-align:center; margin-bottom:10px; font-family: "brushtones", sans-serif; line-height: 1;}
.scoreCount{ font-size:120px; color:orange; text-align: center;  line-height: 1; font-family: "brushtones", sans-serif;}
.scoreTime{ font-size:18px; text-align:center; font-weight:300; }
.countDown{ font-size:18px; text-align:center; margin:30px 0 0px; }
.countDown .countDownInner{ font-weight:bold; }
.scoreBtnFlex{ display:flex; flex-direction:row; justify-content:space-between; margin-top:75px; margin-bottom:100px;  }
.scoreBtn{ width:45%; padding:20px; border:1px solid #ddd; text-align:center; font-size:23px; color:#fff; border-radius: 50px; text-transform: uppercase; font-weight: 300; cursor: pointer; transition: all 0.25s ease; font-family: "brushtones", sans-serif;
font-family: "brushtones", sans-serif; letter-spacing: 1px; line-height: 1.2;
  display: flex; align-items: center; justify-content: center;}
.scoreShowForm, .whiteBtn{ background:orange; border: 1px solid orange; color: #000;}
.scoreBtn:hover, .whiteBtn:hover{ background:#fff; border: 1px solid #fff; color:#000; }


.scoreForm{ display:none; margin:20px auto; width:700px; margin-top:50px; }
.formTxt{ font-size:17px; font-weight:300; margin-bottom:30px; line-height:1.3; }
.inputContainer{ width:100%; margin-bottom:40px; }
.inputContainer .name{ text-transform:uppercase; font-weight:bold; font-size:17px; margin-bottom:12px; letter-spacing: .5px;}
.inputContainer .name .name-inner{ position:relative; display:inline-block; }
.inputContainer .name span{ text-transform:none; font-weight:300; font-size:12px; display: block;}
.inputContainer input[type=text]{ width:100%; border-radius:40px; border:1px solid #ddd; padding:10px 15px; background:#111; font-size:17px; font-family:'poppins'; color:#fff; }
.inputContainer input:focus{ outline:none; }
.inputContainerInner{ position:relative; }

.inputContainerInner.req:after, .inputContainer .name .name-inner.req:after{ content:'*'; display:block; position:absolute; right:-13px; top:0px; color: #FB7373; z-index: 200; font-size: 16px;}

    .custom-checkbox { position: relative; display: block; cursor: pointer; user-select: none; font-size: 14px; padding-left: 40px; padding-top: 3px; line-height: 1.3;}
    .custom-checkbox input{ position: absolute; opacity: 0; cursor: pointer; }
    .custom-checkbox .checkmark{ width: 22px; height: 22px; border: 1px solid #fff; background:#000; border-radius: 6px;  display: block;  margin-right: 5px; transition: all 0.2s ease; position: absolute; left: 0px; top: 2px;}
    .custom-checkbox input:checked + .checkmark { background:#fff; }
    .custom-checkbox .checkmark::after{ content: "";  position: absolute;  display: none; }
    .custom-checkbox input:checked + .checkmark::after{ display: block; }
    .custom-checkbox .checkmark::after{ left: 6px; top: 2px; width: 7px; height: 12px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg);}
    .custom-checkbox.req:after{ content: '*'; color:#FB7373; position: absolute; left:27px; top:2px; }
    .custom-checkbox a{ text-decoration:underline; }

    .saveBtn{ width:450px; margin-top:50px; }
    .scoreOneMoreBottom{ width:450px; margin-top:50px; margin-bottom:100px; align-self: center;}

.input-error{ border: 2px solid #ff3333 !important;}
.errorMsg { color: #ff3333; font-size: 13px; margin-top: 4px; }


.scoreTableFinal{ width:1000px; margin:auto; margin-top:40px; z-index:100; position:relative; display: none;}

.score-header{ 
  font-family: "brushtones", sans-serif;
  font-size: 45px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: orange;
  text-align: center;
  margin-top: 50px; }

.score-header2{ font-size:30px; margin-top:100px; }

.scoreboard {
    width: 100%;
    margin: 40px auto;
    padding: 0;
    list-style: none;
}

.score-row {
      display: flex;
      align-items: center;
      gap: 10px;
      white-space: nowrap;
      margin: 30px 0;
      font-size: 34px;
      opacity: 0;
      border-bottom: 1px dotted #444;
      padding-bottom: 15px;
}

.score-name {
      
      padding-right: 6px;
      overflow: hidden;
/*      max-width: 80%;*/
      font-size: 25px;
      font-family: "brushtones", sans-serif;
      letter-spacing: 1px;
      color: #ddd;
      flex: 1;
}

.score-dots {
    flex: 1;
    height: 20px;
    background-image: linear-gradient(to right, #fff 2px, transparent 2px);
    background-size: 8px 3px;
    background-repeat: repeat-x;
    background-position: 0 75%;
    opacity: 0;
    display: none;

}

.score-points {
  
  padding-left: 6px;
  flex-shrink: 0;
  font-family: "brushtones", sans-serif;
  font-size: 30px;
}

.scoreTableFinal .scoreOneMoreBottom{ background:orange; border-color:#000; color:#000; opacity:0; margin-left:auto; margin-right:auto; }
.scoreTableFinal .scoreOneMoreBottom:hover{ background:#fff; }

.row-active{ color:orange !important; opacity:.5; }
.row-active .score-name, .row-active .score-points{ color:orange; }

/* Fullscreen */
#board {
    position: relative;
    inset: 0;
    background: url('../img/back2.jpg?ver=1.3') bottom right; background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 100vh;
}

/* Właściwy obszar gry — zawsze kwadrat! */
#gameAreaOuter{ position:relative; }
#gameArea {
    width: 97vmin;
    height: 97vmin;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(0, 0, 0, .5);
    z-index: 1;
    
}

/* PLAYER — w procentach względem gameArea */
#player {
    position: absolute;
    top: 50%;
    left: 5%;
    width: 8%;
    height: 13%;
    z-index: 2;
}

#player:after{
    position: absolute;
    content: '';
    display: block;
    left: -15%; top: -15%;
    width: 130%; height: 130%;
    background: url('../img/astronauta.png') center center no-repeat;
    background-size: contain;
    
/*    opacity: .4;*/
}

#player.turn_left{ 
    -webkit-transform: scale(-1, 1);
    -moz-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    transform: scale(-1, 1); }


#player.hit {
    animation: hitFlash 0.40s ease-in-out 1;
}

@keyframes hitFlash {
    0% { opacity:1; }
    25% { opacity:.5; }
    50% { opacity:1; }
    75% { opacity:.5; }
    100% { opacity:1; }
}



.shake {
    animation: shake 0.2s linear;
}

@keyframes shake {
    0% { transform: translate(0, 0); }
    25% { transform: translate(3px, -3px); }
    50% { transform: translate(-3px, 2px); }
    75% { transform: translate(3px, 3px); }
    100% { transform: translate(0, 0); }
}


.lowhp {
    animation: heartbeat 1s infinite;
}

@keyframes heartbeat {
    0% { box-shadow:  0 0 0px rgba(255,0,0,0.0); }
    50% { box-shadow:  0 0 40px rgba(255,0,0,0.55); }
    100% { box-shadow:  0 0 0px rgba(255,0,0,0.0); }
}



/* METEORYT — proporcjonalne elementy */
.meteor {
    position: absolute;
    background: none;
    border-radius: ;
    /*border: 1px solid #ddd;*/
    animation:spin 33s linear infinite;
}
@keyframes spin { 
    100% { 
        -webkit-transform: rotate(360deg); 
        transform:rotate(360deg); 
    } 
}
.meteor:after{
    position: absolute;
    content: '';
    display: block;
    left: -10%; top: -10%;
    width: 120%; height: 120%;
    
}

.meteor1:after{
    background: url('../img/meteor1.png') center center; background-size: contain;
}
.meteor2:after{
    background: url('../img/meteor2.png') center center; background-size: contain;
}
.meteor3:after{
    background: url('../img/meteor3.png') center center; background-size: contain;
}
.meteor4:after{
    background: url('../img/meteor4.png') center center; background-size: contain;
}
/* NUTKI */
.note {
    position: absolute;
    background: url('../img/note.png?ver=1.1') center center no-repeat; background-size: contain;
}






.note.blink{ animation: noteBlink 0.2s ease-in-out 1; }
@keyframes noteBlink {
    0% { transform: scale(1) }
    100% { transform: scale(2.5) }
}

.super {
    background: #ff0 !important;
    box-shadow: 0 0 10px #ff0;
}

/* START BUTTON */
#startBtn {
    font-family: "brushtones", sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    transform: translate(-50%, -50%);
    padding: 20px;
    border:1px solid #ddd; text-align:center; font-size:28px; color:#fff; border-radius: 50px; text-transform: uppercase; font-weight: 300; cursor: pointer; transition: all 0.25s ease; letter-spacing: 2px;
    background: url('../img/enter.svg?ver=1.4') no-repeat; background-position: right 23px center; background-size: 30px;
}
#startBtn:after{ position:absolute; content:''; display:block; bottom:-75px; left:50%; transform:translateX(-50%); width:75px; height:60px; background:url('../img/arrows.svg') no-repeat center center; background-size:contain; opacity: .55}
#startBtn:hover{ background:url('../img/enter.svg?ver=1.4') no-repeat #fff; background-position: right 23px center; background-size: 30px; color:#000; }
#startBtn.mobile:after{ display:none;  }
#startBtn.mobile {  background: none;  }
#startBtn.mobile:hover{ color:#fff; }

/* HUD */
#hud {
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: right;
    width: 100%;
    z-index: 2;
}

#score{ font-size:40px; position:absolute; top:-5px; right:15px; font-family: "brushtones", sans-serif; background: url('../img/note.png') right center no-repeat; background-size: 25px; padding: 5px 40px 5px 0;}
#time{ position:absolute; left:210px; top:22px; font-size:15px; font-family: "brushtones", sans-serif;}

#healthBar {
    width: 180px;
    height: 18px;
    border: 1px solid #fff;
    margin-top: 5px;
    position: absolute;
    background: rgba(255,255,255,0.2);
    border-radius: 4px;
    overflow: hidden;
    left: 15px; top: 15px;
}

#healthFill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #fff, #ddd);
    transition: width 0.2s linear;
}
#healthFill.hp-yellow{ background: #e5ce52; }
#healthFill.hp-red{ background: #e66363; }




.copy{ 
  position: absolute;
  left: -5px;
  bottom: 0px;
  z-index: 2;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  font-size: 11px;
  color: #555; }
.copy a{ color:#666666; }


#joy-base,
#joy-stick {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    touch-action: none;
    user-select: none;
    cursor: default;
}


#joystick {
    width: 100%;
    height: 180px;
    display: flex;
    justify-content: center;
    align-items: center;
    touch-action: none;
    position: fixed; right: 0px; bottom: 25px;
    display: none;
    z-index: 2;
    
}

#joy-base {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(6px);
    position: relative;
}

#joy-stick {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background 0.15s;
}



#touchControls {
    position: absolute;
    bottom: 10%;
    left: 50%;
    width: 300px;
    max-width: 300px;
    min-width: 300px;
    display: none;
    user-select: none;
    touch-action: none;
    transform: translateX(-50%);
}

#touchControls .row {
    display: flex;
    justify-content: center;
}

#touchControls .btn {
    width: 33%;
    height: 50px;
    margin: 5px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    font-size: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
}

#touchControls .btn:active {
    background: rgba(255,255,255,0.35);
}

#touchControls .empty {
    background: transparent;
    border: none;
}



.vertical{ position: fixed; top: 0px; left: 0px; display: none; width: 100%; height: 100%; flex-direction: column; align-items: center; background: #000; height: auto; min-height: 100vh; justify-content: center; padding: 20px 40px 20px; z-index: 9999;}
.name-vertical{ font-size:35px; font-family: "brushtones", sans-serif; margin-bottom: 30px; color: #fff; text-transform: uppercase; text-align: center;  }
.icon-vertical{ width:100px; display:inline-block; }
.icon-vertical img{ width:100%; display:block; }
@media (max-width: 970px) and (orientation: landscape) {
  .vertical {
    display: flex;
  }
}