magicmaze.css

/**
 *------
 * BGA framework: © Gregory Isabelli <gisabelli@boardgamearena.com> & Emmanuel Colin <ecolin@boardgamearena.com>
 * MagicMaze implementation : © Patrick Xia <patrick.xia@gmail.com>
 *
 * This code has been produced on the BGA studio platform for use on http://boardgamearena.com.
 * See http://en.boardgamearena.com/#!doc/Studio for more information.
 * -----
 */


/* Note: you must not use any @import directive */

@font-face {
  font-family: "SymbolaArrows";
  src: url("data:font/woff2;charset=utf8;base64,d09GMgABAAAAAAMAAA0AAAAABqgAAAKuAAgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbEBwsBmAAgQwKhViENQE2AiQDIAsSAAQgBYFkByAbEAXIBh7+7T7vG/wFWAXEQp4V5n9P4s6u0i2q8PRGaS4YA67JH7cofLCVpUtkYoKWjRKfcGCVls20I28ybvsOVm6EALwBAAkBuCEQgCfe+AJAv+wUpqHUOvVWIht0rYXI1mpLO5FfI0MkMF5Rf4kDKKA61GDgJhog7SJH/BOqJKmyyX1QVwAktsX/EoAEXdNYM/no//+mhIkEMCWIa2vA55AM8ml1HRCPAsgAQDQyot3WE0hDYQ7gjjsSTD42PXJ6x///MPnoXP2y5emnp0cQgMAb0RocSpD+1j0GANMjeUii6R1KyIghx+EGoADgDoA/EAbcAxEB4LKLg/FHsHkr7sCP8Njc8FU8VV/hp3opfoZLGMY2z11iu9fuKgQN7bDC1UqnCCvaoaHqKcaOd957Psg7C/Ofsu291+6PYntBnuqX98wItPra7H6WIMPm7u1hUe1Ww+JrD5SDbH77YJtq9fBxt1ccSklL+ZmS0p+y+NPg80VZ9B9lSv6dWweR6Wsx2iSFn3Eys2Rd6Chef51Jldf1Uv6o1hBrmjWXNbu1XuMLTo725u2Cvt4FC3t7Fk568b6xofvyt8GiwsH+kuL+/qsXHz708n708N0rNulxq2JjZ70F2yxUWIX22m3w7FL1Luc7o0nW2+x3b6u0PQAIwB2+db/UK/1W9LvjDsCj8xtfoqlN1sGJiYSwX6YEwAMpwfQnfOE4eGOwIICSuymdulV1GobpH8fcyxuQ6dG+An6IC7Qip7rFzx9TgoxQPIBWgEkFCq1SCYlOqQzozYpbqhKO7jSFXjafdpqopYM6NOJJoIN2LJiJp54OdOJZSzu1NKEZ4/HktiWdJjpD7MvnZCLa7GxIJzZUrOh0OP7QPOYwl4XMYitbKUBDx0wTHbQTzxJmMYc5yAAwkUAwAAAA") format("woff2");
  font-weight: 400;
  font-style: normal;
}

#mm_timer {
  position: fixed;
  left: 6px;
  top: 5em;
  background: #fff;
  z-index: 10;
  text-align: center;
}

#mm_timer_img {
  width: 30px;
  height: 45px;
  background: url('img/sprites.png') -110px 0px;
}

#mm_area_container {
  position: relative;
  width: 100%;
  height: 1024px;
  overflow:hidden;
}

#mm_area_scrollable, #mm_area_scrollable_oversurface {
  position: absolute;
  top: 205px;
  left: 315px;
}

#mm_area_surface {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: move;
}

#mm_movetop,#mm_moveleft,#mm_moveright,#mm_movedown {
    display: block;
    position: absolute;
    background-image: url('../../../img/common/arrows.png');
    width: 32px;
    height: 32px;
}

#mm_movetop {
    top: 0px;
    left: 50%;
    background-position: 0px 32px;
}
#mm_moveleft {
    top: 50%;
    left: 0px;
    background-position: 32px 0px;
}
#mm_moveright {
    top: 50%;
    right: 0px;
    background-position: 0px 0px;
}
#mm_movedown {
    bottom: 0px;
    left: 50%;
    background-position: 32px 32px;
}

#mm_zoom_controls {
  top: 0px;
  right: 0px;
  position: absolute;
  display: block;
  font-size: x-large;
  color: #000;
  cursor: pointer;
  z-index: 1;
  user-select: none;
}

/* Used to highlight elements for debugging purposes. Don't use as final style. */
.mm_debug {
  background-color: #00b !important;
  opacity: .3 !important;
  border-style: solid;
  border-width: 1px;
}

.mm_preview_tile {
  visibility: hidden;
}

.mm_can_H .mm_preview_tile {
  width: 256px;
  height: 256px;
  visibility: visible;
  background: url('img/t.png') -3072px 0px;
}

.mm_shade_preview {
  width: 256px;
  height: 256px;
  position: absolute;
  left: 0px;
  top: 0px;
  opacity: 0.5;
  background: #7f48a9;
}

/* These aren't prefixed with mm_ for legacy reasons but
   if you fix this, you need to make sure onZoomFit also does
   not break! */
.tile0 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') 0px 0px;
}
.tile1 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -0px -256px;
}
.tile2 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -256px -256px;
}
.tile3 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -512px -256px;
}
.tile4 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -768px -256px;
}
.tile5 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -1024px -256px;
}
.tile6 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -1280px -256px;
}
.tile7 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -1536px -256px;
}
.tile8 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -1792px -256px;
}
.tile9 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -2048px -256px;
}
.tile10 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -2304px -256px;
}
.tile11 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -2560px -256px;
}
.tile12 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -2816px -256px;
}
.tile13 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -3072px -256px;
}
.tile14 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -256px 0px;
}
.tile15 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -512px 0px;
}
.tile16 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -768px 0px;
}
.tile17 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -1024px 0px;
}
.tile18 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -1280px 0px;
}
.tile19 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -1536px 0px;
}
.tile20 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -1792px 0px;
}
.tile21 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -2048px 0px;
}
.tile22 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -2304px 0px;
}
.tile23 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -2560px 0px;
}
.tile24 {
  width: 256px;
  height: 256px;
  background: url('img/t.png') -2816px 0px;
}


#mm_token0 {
  width: 30px;
  height: 30px;
  background: url('img/sprites.png') 0px -55px;
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0px -5px 10px #000);
}

#mm_token1 {
  width: 30px;
  height: 30px;
  background: url('img/sprites.png') -30px -55px;
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0px -5px 10px #000);
}

#mm_token2 {
  width: 30px;
  height: 30px;
  background: url('img/sprites.png') -60px -55px;
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0px -5px 10px #000);
}

#mm_token3 {
  width: 30px;
  height: 30px;
  background: url('img/sprites.png') -90px -55px;
  position: absolute;
  z-index: 1;
  filter: drop-shadow(0px -5px 10px #000);
}

.mm_notify {
  display: inline-block;
  cursor: pointer;
}

.mm_redpawn {
  width: 24px;
  height: 48px;
  background: url('img/sprites.png') -85px 0px;
  display: inline-block;
}

.mm_abilityblock {
  display: block;
}

.mm_ability {
  background-color: #0994dc;
  display: inline-block;
}

.mm_abilityN {
  width: 30px;
  height: 24px;
  background: url('img/dirs.png') 0px 0;
  display: inline-block;
}

.mm_abilityS {
  width: 30px;
  height: 24px;
  background: url('img/dirs.png') -30px 0;
  display: inline-block;
}

.mm_abilityW {
  width: 30px;
  height: 24px;
  background: url('img/dirs.png') -60px 0;
  display: inline-block;
}

.mm_abilityE {
  width: 30px;
  height: 24px;
  background: url('img/dirs.png') -90px 0;
  display: inline-block;
}

.mm_abilityP {
  width: 30px;
  height: 24px;
  background: url('img/dirs.png') -120px 0;
  display: inline-block;
}

.mm_abilityR {
  width: 30px;
  height: 24px;
  background: url('img/dirs.png') -150px 0;
  display: inline-block;
}

.mm_abilityH {
  width: 30px;
  height: 24px;
  background: url('img/dirs.png') -180px 0;
  display: inline-block;
}

.mm_used {
  position: absolute;
  width: 55px;
  height: 55px;
  background: url('img/sprites.png') 0px 0px;
}

.mm_crossout {
  width: 30px;
  height: 24px;
  background: url('img/sprites.png') -55px 0px;
}

@keyframes mm_blink {
  50% {
    opacity: 0;
  }
}

@keyframes mm_inverseblink {
  50% {
    opacity: 0.3;
  }
}

#mm_next_explore_container {
  visibility: hidden;
}

.mm_can_H #mm_next_explore_container {
  position: fixed;
  z-index: 9;
  left: 5px;
  bottom: 105px;
  display: block;
  padding: 0;
  transform: scale(0.9);
  transform-origin: bottom left;
}

.mm_can_H #mm_next_explore {
  filter: opacity(90%);
}

#mm_border {
  /* bgg tries to interfere with this as much as possible. */
  z-index: 100000;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  border: 5px solid red;
  pointer-events: none; 
  visibility: hidden;
}

#mm_talk_border {
  border: 5px dashed #74c936;
  pointer-events: none; 
  z-index: 100001;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  visibility: hidden;
}

.mm_filterwarp {
  background: #111;
  opacity: 0.3;
}

/* TODO: Make these line up with the player guides */
.mm_control {
  position: fixed;
  z-index: 10;
  left: 5px;
}

@media only screen and (max-width: 665px)  {
  .mobile_version .mm_control {
    left: 20%;
  }
}

#mm_control0 {
  background-color: #74c936;
  bottom: 80px;
  user-select: none;
}

#mm_control1 {
  background-color: #f47b1c;
  bottom: 55px;
  user-select: none;
}

#mm_control2 {
  background-color: #fcd112;
  bottom: 30px;
  user-select: none;
}

#mm_control3 {
  background-color: #7f48a9;
  bottom: 5px;
  user-select: none;
}

.mm_action {
  cursor: pointer;
  z-index: 1;
  padding: 5px;
  display: inline-block;
  user-select: none;
  opacity: 0.5; /* also specified in the JS */
}

.mm_action, .mm_zoom {
  font-family: Roboto, Arial, sans-serif, SymbolaArrows;
}

.mm_escalator {
  pointer-events: none;
}

.mm_can_R .mm_escalator {
  pointer-events: auto;
}

.mm_can_R .mm_escalator_nesw {
  cursor: nesw-resize;
}

.mm_can_R .mm_escalator_nwse {
  cursor: nwse-resize;
}

.mm_bold, .mm_action:hover {
  opacity: 1.0;
  font-weight: 900;
}

#mm_objectives_float {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 350px;
  height: 225px;
  margin: -175px 0 0 -112px;
  z-index: 15;
  perspective: 1000px;
}

#mm_objectives_container {
  position: relative;
  width: 350px;
  height: 225px;
  transition: transform 0.7s;
  transform-style: preserve-3d;
}

#mm_objectives_front {
  position: absolute;
  background: url('img/objectives.png');
  width: 100%;
  height: 100%;
  transition: transform 0.8s;
  backface-visibility: hidden;
  z-index: 1;
}

#mm_objectives_back {
  position: absolute;
  background: url('img/objectives.png') 0px -225px;
  width: 100%;
  height: 100%;
  transform: rotateY(180deg);
}

.timeToThink {
  visibility: hidden;
}

#reflexiontime {
  visibility: hidden;
}