/* MAIN */

@font-face {
  font-family: pixel_font;
  src: url('8-Bit_Madness.ttf');
}

@font-face {
  font-family: readable;
  src: url('Ptolemy-GreatPrimer18.ttf');
}

@keyframes shine {
  0% { filter: brightness(1); }
  25% { filter: brightness(1); }
  50% { filter: brightness(1.5); }
  75% { filter: brightness(1); }
  100% { filter: brightness(1); }
}

html {
  font-size: 22px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}  

body {
  background-color: black;
  overflow: hidden;
}

.shining {
  animation-name: shine;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#press-start {
  font-family: pixel_font;
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding: inherit;
  font-size: 8rem;
  background-color: black;
  color: white;
  z-index: 1000;
}

#content {
  font-family: readable;
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  transform-origin: 0 0;
  overflow: hidden;
  border: 1px solid white;
}

.hud {
  z-index: 20;
}

/* DATE AND CALENDAR */

#date {
  position: absolute;
  display: inline-block;
  font-size: 1rem;
  color: black;
  background-color: #dddddd;
  padding: 0;
  border: none;
  width: auto;
  height: auto;
  margin: 1rem;
  transition: width .2s, height .2s;
  filter: drop-shadow(0 0 .15rem black);
  animation-name: shine;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

#date:hover {
  font-size: 1.25rem;
  animation-name: none;
}

table {
  margin: 0;
  border-collapse: collapse;
}

td, th {
  border: none;
  padding: .25rem;
  margin: 0;
}

td:not(:last-child) {
  border-right: 3px solid white;
}

#date > #today {
  display: inline-block;
  text-align: center;
  visibility: visible;
  width: auto;
  height: auto;
  transition: width .2s, height .2s;
}

#date:hover {
  z-index: 21;
}

#date:hover > #today {
  visibility: hidden;
  width: 0;
  height: 0;
}

#date > #week {
  font-size: .9rem;
  display: inline-block;
  visibility: hidden;
  width: 0;
  height: 0;
  transition: width .2s, height .2s;
}

#date:hover > #week {
  visibility: visible;
  width: auto;
  height: auto;
}

th {
  background-color: goldenrod;
  color: white;
}

tr {
  background-color: #ffffff;
}

tr:nth-child(even) {
  background-color: #f2f2f2;
}

tr:hover {
  background-color: white;
}

td.now {
  background-color: green;
  border: 2px solid white;
  color: white;
  font-weight: bolder;
}

td.past {
  color: #aaaaaa;
}

/* INTERACTABLES */

.interactable {
}

.interactable:hover {
  filter: drop-shadow(0 0 .25rem white) brightness(150%);
  cursor: pointer;
}

.selected {
  filter: drop-shadow(0 0 .1rem white) brightness(175%);
}

/* KEY DRAWER */

#key-drawer {
  position: absolute;
  margin: 4px;
  height: 64px;
  padding: 4px;
  width: 888px;
  border: 1px solid white;
  border-radius: .5rem;
  background-color: #00000099;
  right: -868px;
  bottom: 0;
  transition: right .25s, left .25s;
}

#key-drawer:hover {
  right: 0;
}

#key-drawer:hover > .key-tag {
  opacity: 0;
}

#key-drawer.hover {
  right: 0;
}

#key-drawer.hover > .key-tag {
  opacity: 0;
}

.key-tag {
  color: white;
  position: absolute;
  left: -7rem;
  top: -16px;
  font-size: 3.5rem;
  padding: .5rem;
  padding-top: .05rem;
  padding-bottom: .05rem;
  margin: 0;
  opacity: 1;
  border: 1px solid white;
  border-radius: .5rem;
  background-color: #00000099;
  animation-name: shine;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

.key {
  position: absolute;
  width: 64px;
  height: 64px;
  background-color: transparent;
  background-size: cover;
  background-repeat: no-repeat;
  border: none;
  filter: drop-shadow(0 0 0.5px #999999ff);
}

.key.hidden {
  filter: brightness(0);
  opacity: 0.5;
  cursor: not-allowed;
}

.key.k0 { left: 4px; }
.key.k1 { left: 72px; }
.key.k2 { left: 140px; }
.key.k3 { left: 208px; }
.key.k4 { left: 276px; }
.key.k5 { left: 344px; }
.key.k6 { left: 412px; }
.key.k7 { left: 480px; }
.key.k8 { left: 548px; }
.key.k9 { left: 616px; }
.key.k10 { left: 684px; }
.key.k11 { left: 752px; }
.key.k12 { left: 820px; }

.key.selected { top: -10px; }

.key-info-btn {
  position: absolute;
  background-color: transparent;
  border: none;
  margin: 0;
  bottom: 0;
  right: 0;
  text-decoration: none;
  color: white;
  text-shadow: 0 0 1px black;
  font-size: 2rem;
}

.key-info-btn:hover {
  text-decoration: none;
  color: white;
}

/* CONTEXT MENU */

#contextmenu {
  white-space: nowrap;
  display: inline-block;
  position: absolute;
  visibility: hidden;
  z-index: 21;
  border: 1px solid white;
  background-color: #000000bb;
  transition: width .1s, height .1s;
  overflow: hidden;
}


#contextmenu > ul {
  list-style-type: none;
  margin: 0;
  border: 0;
  padding: 0;
}

#contextmenu > ul > li {
  color: white;
  background-color: transparent;
  padding: .15rem;
  font-size: 1.5rem;
  cursor: pointer;
}

#contextmenu > ul > li:hover {
  background-color: #99999999;
}

/* BOTTOM-LEFT CORNER INFOS */

#interacting {
  z-index: 10;
  visibility: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 1rem;
  border: 0;
  background-color: transparent;
  font-size: 2rem;
  text-shadow: 0 0 15px black;
  filter: drop-shadow(0 0 15px black);
  color: white;
}

#current-room-display {
  z-index: 10;
  position: absolute;
  top: 0;
  margin-top: 1rem;
  border: 0;
  background-color: transparent;
  text-align: center;
  font-size: 2rem;
  text-shadow: 0 0 15px black;
  filter: drop-shadow(0 0 15px black);
  color: white;
}

/* GAME ELEMENTS */

.game-obj {
  z-index: 2;
  position: absolute;
  width: 60px;
  height: 60px;
  margin: 0;
  border: 0;
  background-color: transparent;
}

.hideout {
/*  background-color: red; */
}

.goto {
  filter: opacity(85%);
/*  visibility: visible;*/
}

.goto.locked {
  filter: sepia(1) opacity(25%);
  cursor: not-allowed;
}

/* MESSAGE BOX */

#messagebox {
  display: inline-block;
  visibility: hidden;
  color: white;
  z-index: 21;
  position: absolute;
  display: inline-block;
  margin: 10px;
  padding: 20px;
  background-color: #000000cc;
  border: 10px solid white;
  width: 1200px; /* = 1280 - (margin + padding + border) */
  height: 640px; /* = 720 - (margin + padding + border) */
  top: 720px;
  left: 1280px;
  transition: left .3s, top .3s, width .3s, height .3s;
}

#messagebox > h3 {
  margin: .5rem;
  font-size: 2rem;
  text-align: center;
  font-weight: bolder;
}

#messagebox > div.image-holder {
  display: inline-block;
  width: 100%;
  min-height: 128px;
  background-color: transparent;
  filter: drop-shadow(0 0 3px white);
}

#messagebox > div.image-holder > div {
  background-size: cover;
  background-repeat: no-repeat;
  width: 128px;
  height: 128px;
  margin: auto;
}

#messagebox > p {
  font-size: 1.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

#messagebox > p:first-child:last-child {
  margin-top: 0;
  margin-bottom: 0;
}

/* SPRITE */

div.sprite {
  position: absolute;
  display: inline-block;
  background-size: cover;
  background-repeat: no-repeat;
}

div.sprite.animated {

}

/* TOP-RIGHT COMMANDS */

#next-day-state {
  position: absolute;
  display: inline-block;
  top: 0;
  right: 0;
  width: 128px;
  height: 128px;
  background-image: url('img/next_day_state.gif');
  border: 0;
  background-color: transparent;
  filter: drop-shadow(0 0 .15rem black);
}

#next-day-state:hover {
  filter: drop-shadow(0 0 .25rem white) brightness(150%);
  cursor: pointer;
}

#Help {
  position: absolute;
  display: inline-block;
  top: 22px;
  right: 110px;
  width: 90px;
  height: 90px;
  background-image: url('img/guide_qm.gif');
  background-size: cover;
  border: 0;
  background-color: transparent;
  font-size: 5.5rem;
  color: white;
  font-family: pixel_font;
  filter: drop-shadow(0 0 .15rem black);
}

#Help:hover {
  filter: drop-shadow(0 0 .25rem white) brightness(150%);
  cursor: pointer;
}

#keeper-status {
  position: absolute;
  display: inline-block;
  top: 17px;
  left: 266px;
  width: 90px;
  height: 90px;
  background-color: transparent;
  background-size: contain;
  border: 0;
  filter: drop-shadow(0 0 .15rem black);
}
/* old
#keeper-status {
  position: absolute;
  display: inline-block;
  top: 22px;
  right: 266px;
  width: 96px;
  height: 96px;
  background-color: transparent;
  border: 0;
}*/
#keeper-status:hover {
  filter: drop-shadow(0 0 .25rem white) brightness(150%);
}

#map-icon {
  position: absolute;
  display: inline-block;
  right: 138px;
  top: 22px;
  width: 96px;
  height: 96px;
  background-color: transparent;
  border: 0;
}

#map-icon:hover {
  filter: drop-shadow(0 0 .25rem white) brightness(150%);
  cursor: pointer;
}


/* MAIN MENU ACTIONS */

.main-menu-btn {
  color: white;
  cursor: pointer;
  z-index: 15;
  position: absolute;
  display: inline-block;
  text-shadow: 0 0 3px black;
  font-size: 3rem;
  border: 0;
  margin: 1rem;
  bottom: 35%;
  min-width: 175px;
  text-align: center;
  background-color: #00000088;
  border: 10px solid white;
}

.main-menu-btn:hover {
  filter: drop-shadow(0 0 .5rem white) brightness(150%);
  cursor: pointer;
}

#credits-btn {
  right: .5rem;
  bottom: .5rem;
  font-size: 2rem;
}

#tutorial-btn {
  right: 10%;
}

/* END GAME */

#end-game-text {
  z-index: 10;
  position: absolute;
  display: inline-block;
  top: 80px;
  font-size: 7rem;
  width: 100%;
  height: 100%;
  left: 0;
  text-align: center;
  vertical-align: middle;
}

#end-game-text > p {
  font-size: 3rem;
}

/* DEBUG */

#debug-text {
  -webkit-touch-callout: all;
  -webkit-user-select: all;
  -khtml-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

#copy-debug {
  font-family: pixel_font;
  color: white;
  position: fixed;
  display: inline;
  bottom: 0;
  right: 0;
  font-size: 2rem;
  background-color: #00000088;
  border: 10px solid white;
  margin: .5rem;
}

#copy-debug:hover {
  filter: drop-shadow(0 0 .5rem white) brightness(150%);
  cursor: pointer;
}

/* TRANSITION */

#the-next-day-message {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  font-size: 5rem;
  padding-top: 20%;
  text-align: center;
  font-family: pixel_font;
}

span.positive {
  color: green;
}

span.negative {
  color: red;
}

span.special-event {
  font-size: 2rem;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* story scrolling */

#story-scrolling {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  color: white;
  margin: 0;
  border: 0;
  scroll-behavior: auto;
  overflow-y: hidden;
  font-size: 2rem;
}

#story-scrolling > p {
  margin-top: 700px;
  margin-bottom: 700px;
  text-align: center;
  padding-left: 2rem;
  padding-right: 2rem;
}

#today-schedule-container {
  font-family: readable;
  position: absolute;
  display: inline-block;
  z-index: 1500;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 2rem;
  margin: 0;
  background-color: #00000099;
  transition: left .3s, top .3s, width .3s, height .3s;
  overflow: hidden;
}

#today-schedule-container > div {
  font-size: 2rem;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
  transition: left .3s, top .3s, width .3s, height .3s;
}

/* KEY DESCRIPTION DIALOG */

#key-description-box {
  display: inline-block;
  visibility: hidden;
  color: white;
  z-index: 21;
  position: absolute;
  display: inline-block;
  margin: 10px;
  padding: 20px;
  background-color: #000000cc;
  border: 10px solid white;
  width: 1200px; /* = 1280 - (margin + padding + border) */
  height: 192px; /* = 720 - (margin + padding + border) */
  top: 200px;
  left: 0px;
}

#key-description-box > h3 {
  position: absolute;
  left: 168px;
  top: 0;
  margin: .5rem;
  font-size: 2rem;
  text-align: left;
  font-weight: bolder;
}

#key-description-box > div.image-holder {
  position: absolute;
  display: inline-block;
  left: 20px;
  top: 52px;
  width: 128px;
  height: 128px;
  background-color: transparent;
  filter: drop-shadow(0 0 3px white);
  background-size: cover;
  background-repeat: no-repeat;
  margin: auto;
}

#key-description-box > p {
  position: absolute;
  left: 168px;
  top: calc(1rem + 2rem);
  width: calc(100% - 188px);
  font-size: 1.25rem;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 7.4rem;
  margin: 0;
}

#key-description-box.show {
  visibility: visible;
}

.bigger-text {
  width: 100%;
  bottom: 3rem;
  transform: scale(1.75);
  transform-origin: bottom left;
}