/**
 * @fileoverview Some css duh.
 */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}


/**
 * Load a custom font.
 */
@font-face {
  font-family: Belissa;
  src: url(https://hugbug.io/starve/css/belisa_plumilla.ttf);
}
@font-face {
  font-family: Eroded;
  src: url(https://hugbug.io/locke/css/ErodedPersonalUseRegular-Eaepe.ttf);
}
@font-face {
  font-family: Squad;
  src: url(https://hugbug.io/locke/css/SquadRegular-8Md3z.ttf);
}
@font-face {
  font-family: Runic;
  src: url(https://hugbug.io/moth/css/ModranihtRunic-YVXj.ttf);
}
@font-face {
  font-family: Abolition;
  src: url(https://hugbug.io/locke/css/AbolitionTest-Rough.otf);
}


#snap-3d-canvas {
  width: 1px;
  height: 1px;
  position: fixed;
  left: 0;
  top: 0;
  transform-origin: top left;
  z-index: 100;
}
#snap-3d-canvas.loaded {
  width: 100vw;
  height: 100vh;
}
#snap-3d-canvas.loaded.devicePixelRatio2 {
  width: 200%;
  height: 200%;
  transform-origin: top left;
  transform: scale(.5);
}

body {
  background: black;
  color: black;
  font-size: 40px;
  font-family: Arial !important;
  width: 100vw;
  height: 100vh;
  padding: 0;
  margin: 0;
  transform-origin: center center;
  overflow: hidden;
}


.lp-panel {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 9000;
  pointer-events: none;
  background-color: black;
  background-image: url(../img/lp-title.jpg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: background .5s;
}
.lp-panel.loading {
  background-image: url(../img/lp-loading.jpg);
}
.lp-panel.loaded {
  background: transparent;
}
.lp-start-button {
  width: 250px;
  height: 100px;
  position: absolute;
  right: 13vw;
  top: 55vh;
  margin-top: calc(min(17vw, 24vh));
  pointer-events: all;
  background-image: url(../img/lp-start-button.png);
  background-color: transparent;
  border: none;
  background-size: 100% 100%;
  color: rgba(0,0,0,0);
  transition: opacity .5s, filter .2s;
  transform: rotate(14deg);
}
.lp-start-button:hover {
  filter: drop-shadow(0 0 6px white) brightness(1.1);
  cursor: pointer;
}
.lp-start-button:active {
  filter: drop-shadow(0 0 12px white) brightness(1.5);
}
.lp-start-button.hidden {
  opacity: 0;
  pointer-events: none;  
}
.lp-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*background-image: url(../img/lp-border.png);*/
  background-size: 100% 100%;
  z-index: 300;
  pointer-events: none;
}
.lp-focus-button {
  pointer-events: all;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  z-index: 1000;
  font-size: 40px;
  font-family: Belissa !important; 
  pointer-events: all;
  padding: 40px;
  background: black;
  border: none;
}

/**
 * Hud
 */
.lp-hud {
  width: 160px;
  height: 270px;
  position: absolute;
  top: 20px;
  right: 40px;
  background-image: url(../img/lp-hud.png);
  transform-origin: top right;
  transform: scale(.5);
  opacity: 0;
  transition: opacity .5s;
  
  display: none;
}
.loaded .lp-hud {
  opacity: 1;
}
.lp-hud-health {
  width: 54px;
  height: 54px;
  position: absolute;
  left: 96px;
  bottom: 80px;
  background-image: url(../img/lp-hud-health.png);
  background-repeat: no-repeat;
  background-position: bottom left;
  transition: height .7s ease-out;
}


/**
 * Hotbar
 */
.lp-hotbar {
  width: 50%;
  height: 50%;
  position: absolute;
  top: 100%;
  left: 50%;
  
  background-image: none;
  background-repeat: no-repeat;
  background-size: calc(1350px / 2) calc(1350px / 2);
  background-position: top left;
  opacity: 0;
  transition: opacity .5s, top 1s;
}
.loaded .lp-hotbar {
  opacity: 1;
}
.crosshair .lp-hotbar {
  top: 50%;
}

.lp-hotbar-progress {
  width: 270px;
  height: 160px;
  background-image: url(../img/lp-hotbar-progress.png);
  background-repeat: no-repeat;
  transition: width .7s ease-out;
  display: none;
}
.lp-hotbar.has-gun {
  background-image: url(../img/lp-gun.png);
}
.lp-hotbar.flash {
  filter: brightness(2) hue-rotate(-50deg);
}

.lp-ammo-panel {
  font-family: 'Squad';
  color: #66FF99;
  font-size: 50px;
  text-align: center;
  width: 100px;
  position: absolute;
  letter-spacing: 5px;
  transform: translate(239px, 299px) rotateY(63deg) rotateX(6deg) rotateZ(30deg);
  text-shadow: 0 0 20px #00ffcc;
  opacity: 0;
}
.has-gun .lp-ammo-panel {
  opacity: 1;
}


/**
 * The tumber charm.
 */
.lp-charm {
  width: calc(1838px / 2);
  height: calc(1876px / 2);
  position: absolute;
  top: calc(100% + 424px);
  right: 50%;
  margin-right: calc(-424px / 2);
  margin-top: calc(-516px / 2);
  background-image: url(../img/lp-charm.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top right;
  opacity: 1;
  transition: opacity .5s, top 1s ease, right 1s;
}
.charm .lp-charm {
  top: 50%;
  right: 50%;
}


/**
 * The QR instructions.
 */
.lp-qr-panel {
  position: absolute;
  right: 10px;
  transform: scale(.75);
  top: -51px;
  width: calc(670px / 2);
  height: calc(1300px / 2);
  background-image: url(../img/lp-qr-panel.png);
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: top right;
  /* border: 1px solid red; */
  opacity: 0;
  transition: opacity .5s;
}
.charm .lp-qr-panel {
  opacity: 1;
}
.charm.connected .lp-qr-panel {
  opacity: 0;
}
.lp-qr-panel img {
  display: block;
  width: 170px;
  height: 170px;
  image-rendering: pixelated;
  margin: 28px;
}


/**
 * The runes solution.
 */
.lp-runes-panel {
  position: absolute;
  right: -240px;
  top: 216px;
  width: 400px;
  height: 100px;
  /* border: 1px solid red; */
  opacity: 1;
  transition: opacity .5s;
  font-family: 'Runic';
  font-size: 50px;
  color: rgba(255,255,255,.7);
  text-align: left;
  text-shadow: 0 0 35px lime, 0 0 35px lime, 0 0 35px lime, 0 0 35px lime;
}
.lp-runes-panel span {
  font-family: 'Abolition';
}
.lp-runes-panel.hidden {
  opacity: 0;
}
.lp-runes-panel img {
  width: 100px;
  margin-left: -28px;
  margin-top: 10px;
  vertical-align: middle;
}


/**
 * Logo
 */
.lp-logo {
  width: 402px;
  height: 188px;
  position: absolute;
  top: 24px;
  left: 40px;
  /*background-image: url(../img/lp-logo.png);*/
  background-repeat: no-repeat;
  transform-origin: top left;
  transform: scale(.5);
  opacity: 0;
  transition: opacity .5s;
  xfilter: brightness(.8);
  pointer-events: all;
}
.loaded .lp-logo {
  opacity: 1;
}
.lp-logo a {
  color: rgba(0,0,0,0);
  font-size: 8px;
}


/**
 * Win panel
 */
.lp-win-panel {
  width: 1500px;
  height: 700px;
  position: absolute;
  top: 30%;
  left: 50%;
  background-image: url(../img/lp-win-panel.png);
  background-repeat: no-repeat;
  transform-origin: center;
  transform: translate(-50%,-50%) scale(.5);
  opacity: 1;
  transition: opacity 1s ease-out, transform 1s ease-out;
  pointer-events: none;
}
.lp-win-panel.hidden {
  opacity: 0;
  transform: translate(-50%,-50%) scale(.25);
}

/**
 * Loading bar.
 */
@keyframes breathing {
  0% { transform: rotate(14deg) scale(1); }
  50% { transform: rotate(14deg) scale(1.03,1.3); }
  100% { transform: rotate(14deg) scale(1); }
}
.lp-loading-panel {
  position: absolute;
  top: 41%;
  left: 51%;
  width: 270px;
  margin-left: -70px;
  margin-top: 12vh;
  border: 1px solid white;
  height: 5px;
  border-radius: 120px;
  animation: breathing 2s ease infinite;
  pointer-events: none;
  opacity: 0;
  transform-origin: center center;
  transition: opacity .3s;
  box-shadow: 0 0 12px rgba(0,0,0,.6);
}
.loading .lp-loading-panel {
  opacity: 1;
}
.loaded .lp-loading-panel {
  opacity: 0;
  transform: rotate(14deg) scale(1);
  animation: none;
}
.lp-loading-bar {
  position: absolute;
  top: 0;
  left: 0;
  background: white;
  width: 100%;
  height: 100%;
  transform: scale(0.01, 1);
  transform-origin: top left;
  transition: transform ease-out 3s;
}
.loading .lp-loading-bar {
  transform: scale(0.8, 1);
}



#snap-3d-crosshairs {
  position: absolute;
  z-index: 1000;
  width: 34px;
  height: 4px;
  background: white;
  left: 50%;
  top: 50%;
  margin-left: -17px;
  margin-top: -2px;
  box-shadow: 0 0 2px black;
  opacity: 1;
  z-index: 1000;
  transition: opacity .5s;
}
#snap-3d-crosshairs:before {
  content: '';
  position: absolute;
  z-index: 1001;
  width: 34px;
  height: 4px;
  background: white;
  left: 50%;
  top: 50%;
  margin-left: -17px;
  margin-top: -2px;
  opacity: 1;
}
#snap-3d-crosshairs:after {
  content: '';
  position: absolute;
  z-index: 1000;
  width: 4px;
  height: 34px;
  background: white;
  left: 50%;
  top: 50%;
  margin-top: -17px;
  margin-left: -2px;
  box-shadow: 0 0 2px black;
  opacity: 1;
}
#snap-3d-crosshairs.hidden {
  opacity: 0;
}


/**
 * Intro panel.
 */
.lp-intro-panel {
  position: absolute;
  width: 100vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  outline: 1px solid yellow;
  height: calc(9 / 16 * 100vw);
  overflow: hidden;
}
.lp-slide {
  padding: 40px;
  position: absolute;
  background-color: rgba(0,0,0,.9);
  color: white;
  font-family: 'Orbitron';
  font-weight: 500;
  width: 100vw;
  height: calc(9 / 16 * 100vw);
}

/**
 * Shakes the view.
 */
.shake {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.5s;

  /* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% { transform: translate(2px, 3px) rotate(1deg); }
  10% { transform: translate(0px, -1px) rotate(0deg); }
  20% { transform: translate(-2px, 1px) rotate(-1deg); }
  30% { transform: translate(3px, -1px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-0px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(2px, -3px) rotate(-1deg); }
}