/**
 * CSS for the game.
 */

@font-face {
  font-family: Almendra;
  src: url(AlmendraSC-Regular.ttf);
}
@font-face {
  font-family: 'pix Chicago';
  font-style: normal;
  font-weight: normal;
  src: local('pix Chicago'), url('pixChicago.woff') format('woff');
}

#snap-3d-panel {
  background: transparent;
}
#snap-3d-canvas {
  width: 660px;
  height: 480px;
  position: absolute;
  left: 0;
  top: 0;
  margin-left: 0;
  transform-origin: top left;
  z-index: 0;
  opacity: 1;
  background: white;
  pointer-events: none;
  transform: scale(2);
}
#snap-3d-panel #snap-3d-canvas {
  opacity: 0;
}
.box-opened #snap-3d-canvas {
  opacity: 0;
  pointer-events: all;
  cursor: pointer;
  filter: brightness(20);
}
.game-started #snap-3d-canvas {
  opacity: 1;
  pointer-events: all;
  filter: brightness(1);
}

:root {
  --evilness: 0px;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  perspective: 2000px;
  perspective-origin: center center;
  
  background-color: black;
  background-image: url(../img/mac-bg2.jpg);
  background-position: center -60px;
  background-repeat: no-repeat;
  background-size: 2300px 1425px;  
}

.rb-background {
  width: 100vw;
  height: 800px;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 10;
  background-color: black;
  background-image: url(../img/mac-bg2.jpg);
  background-position: center -60px;
  background-repeat: no-repeat;
  background-size: 2300px 1425px;
  transition: filter 1s;   
}
.rb-background.blurred {
  filter: blur(5px);
}

.snap-3d-fps-panel {
  display: none;
}

/**
 * Styles for the panel.
 */
.rb-panel {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  transform-style: preserve-3d;
  perspective: 2900px;
  overflow: hidden;
  z-index: 100;
  perspective-origin: 50% 170px;
}


/**
 * Styles for the floppy disk.
 */
.rb-floppy {
  position: absolute;
  width: 360px;
  height: 360px;
  background-image: url(../img/rb-floppy.png);
  background-position: top right;
  background-repeat: no-repeat;
  background-size: 1100px 330px;
  left: 50vw;
  top: 390px;
  transform: translate(-50%, -50%);
  transition: transform .5s ease, filter .5s ease;
  transform: translate(-360px, 70px) rotateX(13deg) rotateZ(3deg) rotateY(-180deg)
      scale(.9) translateZ(-50px);
  cursor: pointer;
  z-index: 100;
}
.rb-floppy.flipped {
  background-image: url(../img/rb-floppy.png);
  background-position: top left;
}
.rb-floppy.tilted {
  /*background-image: url(../img/rb-floppy-tilted.png);*/
  background-position: top center;
}
.rb-floppy.zoomed {
  transform: translate(-50%, -80%) rotateX(0deg) rotateZ(180deg) scale(1.2);
}
.rb-floppy.lowered {
  transform: translate(20px, 83px) rotateX(93deg) rotateZ(180deg)
      scale(1.1) translateZ(-50px);
  /*transition: transform 1s ease-in;*/
  filter: brightness(.7);
}
.rb-floppy.inslot {
  transform: translate(-42px, 63px) rotateX(97deg) rotateZ(180deg) scale(.9) translateZ(0px);
  filter: brightness(.2);
}
.rb-floppy.seated {
  transform: translate(-42px, 68px) rotateX(97deg) rotateZ(180deg) scale(.9) translateZ(0px);
  filter: brightness(.15);
  transition: transform .2s ease-in, filter .2s ease-in;
}


/**
 * Styles for the floppy shadow.
 */
.rb-floppy-shadow {
  position: absolute;
  width: 360px;
  height: 360px;
  background-image: url(../img/rb-floppy-shadow.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 330px 330px;
  left: 50vw;
  top: 390px;
  transform: translate(-50%, -50%);
  transition: transform .5s ease, filter .5s ease, opacity .5s ease;
  transform: translate(-344px, 76px) rotateX(13deg) rotateZ(0deg) rotateY(-180deg) scale(.9) translateZ(-50px);
  filter: blur(2px);
  z-index: 90;
  opacity: .4;
}
.rb-floppy-shadow.zoomed {
  transform: translate(-30%, -10%) rotateX(0deg) rotateZ(180deg) scale(1.2);
  filter: blur(9px);
}
.rb-floppy-shadow.lowered {
  transform: translate(40px, 213px) rotateX(83deg) rotateZ(180deg) scale(1.1) translateZ(-50px);
    filter: blur(9px);
}
.rb-floppy-shadow.inslot {
  transform: translate(-23px, 66px) rotateX(101deg) rotateZ(180deg) scale(.9) translateZ(0px);
  opacity: 0;
}


/**
 * Styles for the keyboard overlay.
 */
.rb-keyboard {
  position: fixed;
  left: 50vw;
  width: 515px;
  height: 50px;
  background-image: url(../img/rb-keyboard.png);
  background-size: 100% 100%;
  z-index: 200;
  transform: translate(-360px,725px);
}
.rb-keyboard.hidden {
  display: none;
}

/**
 * The good/evil track.
 */
.rb-track {
  position: absolute;
  width: 660px;
  height: 38px;
  background-image: url(../img/rb-track.png);
  background-position: top left;
  z-index: 1000;
  transform: scale(2);
  transform-origin: top left;
  background-repeat: no-repeat;
}
#rb-track-gem {
  position: absolute;
  top: 0;
  left: calc(50% + var(--evilness));
  transition: left .5s ease;
  width: 40px;
  height: 38px;
  margin-left: -20px;
  background-image: url(../img/rb-track-gem.png);
  background-repeat: no-repeat;
  z-index: 10;
  transition: left 1s ease-out;
}

#rb-track-gem.blinks {
    filter: invert(1);
    animation: blink .5s;
    animation-iteration-count: 5;
}
@keyframes blink { 50% { filter: invert(0); }  }

.rb-sound {
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-image: url(../img/rb-sound.png);
  z-index: 10;
  background-position: top right;
  background-repeat: no-repeat;
}
.rb-sound.off {
  opacity: 0;
}


/**
 * Dialog
 */
.rb-dialog {
  position: absolute;
  top: 64px;
  left: 50%;
  width: 1000px;
  transform: translate(-50%,0);
  background: white;
  border: 4px solid black;
  box-shadow: 10px 31px 0px -20px black; 
  padding: 38px 50px 38px 58px;
  font-size: 37px;
  line-height: 44px;
  font-family: Almendra, cursive;
  background-image: url(../img/rb-dialog.png);
  background-position: top left;
  background-size: 1312px 1312px;
  z-index: 2500;
  opacity: 1;
  word-spacing: 1px;
  letter-spacing: -1px;
  transition: opacity .5s;
}
.rb-dialog.hidden {
  opacity: 0;
}
.rb-dialog::after {
  content: '';
  position: absolute;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
  right: 0;
  bottom: 0;
  background-image: url(../img/rb-dialog.png);
  background-position: bottom right;
  background-size: 1312px 1312px;
}
.rb-dialog .rb-cap {
  display: inline-block;
  font-size: 50px;
  margin-left: -19px;
}
.rb-name {
  position: absolute;
  top: -24px;
  left: -15px;
  background: white;
  border: 4px solid white;
  box-shadow: -6px 6px 0px black;
  padding: 0 12px;
  xtransform: translate(-50%, 0);
  font-size: 38px;
  line-height: 44px;
  font-family: Almendra, cursive;
  background-color: black;
  color: white;
  z-index: 200;
  white-space: nowrap;
}