/**
 * CSS for the game.
 */

@font-face {
  font-family: Almendra;
  src: url(AlmendraSC-Regular.ttf);
}
@font-face {
  font-family: BenjaminFranklin;
  src: url(BenjaminFranklin.ttf);
}
@font-face {
  font-family: Lumenharmaa;
  src: url(Lumenharmaa.ttf);
}
@font-face {
  font-family: Vcr;
  src: url(VCR_OSD_MONO_1.001.ttf);
}


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

/**
 * Hide the sim screen in this game.
 */
.cs-panel {
  display: none;
}

#snap-3d-panel {
  background: transparent;
  z-index: 100;
  position: absolute;
  width: 640px;
  height: 480px;
  left: 50%;
  margin: 43px 0 0 -189px;
}
#snap-3d-canvas {
  width: 640px;
  height: 480px;
  position: absolute;
  left: 50%;
  top: 50px;
  margin-left: -190px;
  transform-origin: top left;
  z-index: 0;
  cursor: pointer;
  opacity: 0;
  background: white;
  pointer-events: none;
  transform: scale(1);
}
#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% -200px;
  --tape-blur: 0px;
  pointer-events: all;
}
.rb-panel.blurred {
  --tape-blur: 4px;
}


/**
 * Styles for the floppy disk.
 */
.at-vhs {
  position: absolute;
  --offset: 0px;
  width: 600px;
  height: 340px;
  background-image: url(../img/at-tapes.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 1800px 450px;
  left: 50vw;
  top: 390px;
  transition: transform .5s ease, filter .5s ease, opacity .5s;
  transform: translate(calc(-701px + var(--offset)), -28px) rotateX(92deg) rotateZ(5deg) rotateY(-272deg)
    scale(.82) translateZ(-50px);
  cursor: pointer;
  z-index: 100;
  transform-style: preserve-3d;
  pointer-events: all;
}
.at-vhs.pulled {
  transform: translate(-780px, 30px) rotateX(112deg) rotateZ(9deg) rotateY(-276deg)
    scale(.9) translateZ(-50px);
}
.at-vhs.zoomed {
  transform: translate(-50%, -50%) rotateX(30deg) rotateZ(-11deg) scale(1.2);
  z-index: 210;
}
.at-vhs.lowered {
  transform: translate(-200px, 83px) rotateX(93deg) rotateZ(2deg)
      scale(1.1) translateZ(-130px);
  /*transition: transform 1s ease-in;*/
  /*filter: brightness(.7);*/
  z-index: 210;
}
.at-vhs.inslot {
  transform: translate(-272px, 100px) rotateX(98deg) rotateZ(0deg) scale(.86,.4) translateZ(0px);
  /*filter: brightness(.2);*/
  z-index: 100;
}
.at-vhs.seated {
  transform: translate(-272px, 203px) rotateX(98deg) rotateZ(0deg) scale(.86,.4) translateZ(0px);
  /*filter: brightness(.15);*/
  transition: transform 1s ease-in, filter .2s ease-in, opacity 1s;
  z-index: 50;
}
.at-vhs.hidden {
  transition: transform 1s ease-in, filter .2s ease-in, opacity 1s;
  opacity: 0;
  pointer-events: none;
}

.at-vhs::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 72px;
  top: 340px;
  transform: rotateX(-90deg);
  transform-origin: top left;
  background-image: inherit;
  background-size: inherit;
  background-position: bottom left;
  background-size: 1800px 370px;
  filter: blur(var(--tape-blur));
}
.at-vhs.zoomed::before {
  filter: blur(0);
}

.at-vhs::after {
  content: '';
  position: absolute;
  width: 600px;
  height: 340px;
  top: 0;
  background: rgba(0,0,0,.9);
  transition: opacity .5s ease;
}
.at-vhs.pulled::after {
  opacity: 0;
}

.at-vhs.becky {
  background-position: top right;
  --offset: 151px;
}
.at-vhs.becky::before {
  background-position: bottom right;
}
.at-vhs.deshawn {
  background-position: top center;
  --offset: 75px;
}
.at-vhs.deshawn::before {
  background-position: bottom center;
}

/**
 * Styles for the floppy shadow.
 */
.at-vhs-shadow {
  position: absolute;
  width: 600px;
  height: 340px;
  background-image: url(../img/at-vhs-shadow.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 600px 340px;
  left: 50vw;
  top: 390px;
  transform: translate(-50%, -50%);
  transition: transform .5s ease, filter .5s ease, opacity .5s ease;
  transform: translate(-760px, -6%) rotateX(10deg) rotateZ(177deg) scale(.3,1.4);
  filter: blur(2px);
  z-index: 90;
  opacity: .4;
  pointer-events: none;
}
.at-vhs-shadow.pulled {
  transform: translate(-970px, 20px) rotateX(20deg) rotateZ(187deg) scale(.5,1.4);
  opacity: .6;
}
.at-vhs-shadow.zoomed {
  transform: translate(-80%, -30%) rotateX(0deg) rotateZ(170deg) scale(1.2);
  filter: blur(9px);
  z-index: 200;
}
.at-vhs-shadow.lowered {
  transform: translate(-410px, 263px) rotateX(83deg) rotateZ(180deg) scale(1.1) translateZ(-50px);
    filter: blur(9px);
  opacity: 0;
}
.at-vhs-shadow.inslot {
  transform: translate(-23px, 66px) rotateX(101deg) rotateZ(180deg) scale(.9) translateZ(0px);
  opacity: 0;
}
.at-vhs-shadow.reset {
  transform: translate(-760px, -6%) rotateX(10deg) rotateZ(177deg) scale(.3,1.4);
  opacity: 0;
}


/**
 * The mask layers.
 */
.at-tv-mask {
  position: fixed;
  left: 50vw;
  top: 0;
  width: calc(2118px / 2);
  height: calc(1890px / 2);
  background-image: url(../img/at-tv-mask.png);
  background-size: 100% 100%;
  z-index: 200;
  transform: translate(-559px,-59px);
  pointer-events: none;
  transition: filter .5s ease;
}
.at-tv-mask.blurred {
  filter: blur(5px);
}
.at-button-mask {
  position: fixed;
  left: 50vw;
  top: 800px;
  width: calc(1100px / 2);
  height: 212px; /* calc(326px / 2 + 38px); */
  background-image: url(../img/at-button-mask2.png);
  background-size: 100% 100%;
  z-index: 200;
  transform: translate(-235px,calc(-58px - 19px - 38px - 11px));
  pointer-events: none;
  transition: opacity .5s ease;
  z-index: 60;
  opacity: 0;
}
.at-button-mask.visible {
  opacity: 1;
  z-index: 150;
}


/**
 * The content warning.
 */
.at-warning-panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  transition: opacity .4s, transform .4s ease-in;
  z-index: 9999;
  transform-style: preserve-3d;
  /* transform: rotateX(90deg) translate3d(0px, 30px, 470px) */
  background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 10%, rgba(0,0,0,.8) 100%);
}
.at-warning-panel.hidden {
  transform: rotateX(90deg) translate3d(0px, 30px, 55vh);
  opacity: 1;
  pointer-events: none;
}
.at-warning-tape {
  position: absolute;
  top: 320px;
  left: 50%;
  width: 120vw;
  height: 149px;
  background-image: url(../img/at-warning-tape.jpg);
  background-position: 190px center;
  background-size: calc(2196px / 2);
  transform: translate(-50%,-50%) rotate(-10deg);
  box-shadow: 0px 60px 20px rgba(0,0,0,.4);
  cursor: pointer;
}
.at-warning-message {
  position: absolute;
  top: 320px;
  left: 50%;
  width: 400px;
  height: 350px;
  background-image: url(../img/at-warning-message.jpg);
  background-position: center;
  background-size: 100%;
  transform: translate(-50%,-50%);
  box-shadow: 0px 30px 90px rgba(0,0,0,.4);
  z-index: 10;
  cursor: pointer;
}




/**
 * 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;
  display: none;
}
#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;
  
  /** Hiding for Doll Hospital */
  display: none;
}

#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: 52px;
  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: 40px;
  font-family: BenjaminFranklin, cursive;
  background-image: url(../img/rb-dialog.png);
  background-position: top left;
  background-size: 1312px 1312px;
  z-index: 2500;
  opacity: 1;
  word-spacing: -4px;
  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: -25px;
  left: -25px;
  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: BenjaminFranklin, cursive;
  background-color: black;
  color: white;
  z-index: 200;
  white-space: nowrap;
}

/**
 * Make the mac screen old timey.
 */
.cs-screen, .cs-underlay {
  filter: brightness(.8) sepia(1);
}
.cs-screen.blurred {
   filter: brightness(.8) sepia(1) blur(5px);
}


/**
 * The doodle panel.
 */
.doodle-panel {
  position: absolute;
  top: 120px;
  left: 50vw;
  transform-origin: center center;
  transform: scale(2.05) translate(-15px, 20px);
  z-index: 150;
  outline: 20px solid black;
  pointer-events: none;
  opacity: 1;
  background: black;
  transition: opacity .5s, filter 1s;
}
.doodle-panel.blurred {
  filter: blur(5px);
}

/**
 * The closed caption button.
 */
.at-captions-button {
  position: absolute;
  width: 75px;
  height: 85px;
  background-image: url(../img/at-captions-button.png);
  background-position: top left;
  background-size: 150px 85px;
  left: 50vw;
  top: 503px;
  transform: translate(308px, 165px);
  z-index: 90;
  opacity: 1;
  cursor: pointer;
  pointer-events: all;
  transition: filter 1s;
  pointer-events: all;
}
.at-captions-button.blurred {
  filter: blur(5px);
}
.at-captions-button::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  background-position: top right;
  opacity: 0;
  transition: opacity .2s;
}
.at-captions-button.off::before {
  opacity: 1;
}