/*
INDEX:
  DEBUG_ONLY
  THEMES (css variables)
  SHARED_AND_COMMON (map, animation directions, select triangle)
  SHARED_TOUCH_SCREEN
  PARTICLE_ANIMATION (damange numbers)
  UNIT_STAUS (health bar)
  HUD_DIALOG_BASE
  DIALOG_CONVERSATION
  DIALOG_MAIN_COMMON
  DIALOG_TRADE
  DIALOG_PERK_SELECT
  DIALOG_TABBED_MENU
  HUD_CLOCK
  HUD_BOSS
  HUD_PARTY_INFO
  HUD_TARGET_SELECT
  HUD_CONTROL_HELP
  TITLE_SCREEN
*/

/* DEBUG_ONLY */
.fps {
  position: absolute;
  left: 0;
  top: 0;
  color: white;
  font-size: 15px;
  /*text-shadow: 1px 1px black;*/
}
/* END DEBUG_ONLY */


/* THEMES */
:root {
  --box3d-light-border: #eee;  /* Updated in JS */
  --box3d-shadow-border: #888;  /* Updated in JS */
  --menu-background: #bbb; /* Updated in JS */
  --menu-tab: #ddd;  /* Updated in JS */
  --menu-tab-select: #bbb;  /* Updated in JS */
  --menu-background-dark: #444; /* Updated in JS */
  --tile-w: 18px; /* Updated in JS */
  --tile-scale: 1; /* Updated in JS */

  --health-green: #4a4;
  --health-yellow: #fa0;
  --health-red: #f00;
  --action-blue: #113;
  --player-status-bad: #f88;
  --player-status-neutral: #888;

  --dark-text-shadow: 2px 0 0 #222, -2px 0 0 #222, 0 2px 0 #222, 0 -2px 0 #222, 1px 1px #222, -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222;
  --light-text-shadow: 2px 0 0 #ddd, -2px 0 0 #ddd, 0 2px 0 #ddd, 0 -2px 0 #ddd, 1px 1px #ddd, -1px -1px 0 #ddd, 1px -1px 0 #ddd, -1px 1px 0 #ddd;

  --touch-ctrl-bt-radius: 45px; /* Updated in JS */
}
/* END THEME */


/* SHARED_AND_COMMON */
@font-face {
  font-family: RobotoB;
  src: url(third/RobotoMono-Bold.ttf);
}

/* 
.map {
  font-family: RobotoB;
  font-size: 20px;
  line-height: 100%;
}

#map {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  position: absolute;
  background: none;
}
*/

@keyframes updown {
  from {
    top: -6px;
  }
  to {
    top: -10px;
  }
}

@keyframes leftright {
  from {
    left: -10px;
  }
  to {
    left: -15px;
  }
}

@keyframes blink {
  from {
    opacity: 0.2;
    top: -2px;
  }
  too {
    opacity: 1;
    top: 0px;
  }
}

@keyframes fade-in {
  from {
    margin-left: -10px;
    opacity:0;
  }
  to {
    margin-left: 0px;
    opacity:1;
  }
}

@keyframes fade-in-opacity {
  from {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

@keyframes fade-out-opacity {
  from {
    opacity:1;
  }
  to {
    opacity:0;
  }
}


.menu-item.selected::before {
  content: '';
  width: 0; 
  height: 0; 
  position: absolute;
  z-index: 1;

  animation-timing-function: linear;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 7px solid #fff;
  left: 5px;
  top: 50%;
  margin-top: -10px;
  animation-name: leftright;
}


.menu-item.selected .text::before,
.menu-item.selected .text::after {
  position: absolute;
  z-index: 1;
  width: 0;
  height: 0;
  font-family: RobotoB;
}
.menu-item.selected.can-left .text::before {
  left: 4px;
  content: '';
  border-bottom: 10px solid transparent;
  border-right: 5px solid white;
  border-top: 10px solid transparent;
  top: 5px;
}
.menu-item.selected.can-right .text::after {
  right: 5px;
  content: '';
  content: '';
  border-bottom: 10px solid transparent;
  border-left: 5px solid white;
  border-top: 10px solid transparent;
  top: 5px;
}

.select-triangle-top {
  width: 0; 
  height: 0; 
  position: absolute;
  z-index: 1;

  animation-timing-function: linear;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate;

  border-left: calc(var(--tile-scale) * 5px) solid transparent;
  border-right: calc(var(--tile-scale) * 5px) solid transparent;
  border-top: calc(var(--tile-scale) * 3px) solid #fff;
  animation-name: updown;

  left: calc(var(--tile-w)/2 - calc(var(--tile-scale) * 5px)); /* needs to change when tile size changes */
}
/* END SHARED_AND_COMMON */


/* SHARED_TOUCH_SCREEN */
#touchcontrol-arrow {
  position: absolute;
  right: 0;
  bottom: 0;
  /*border: 3px solid red;*/
  width: calc(var(--touch-ctrl-bt-radius) * 5.5);
  height: calc(var(--touch-ctrl-bt-radius) * 5.5);
}

.touchcontrol-button {
  display: none; /* updated via js */

  width: calc(var(--touch-ctrl-bt-radius) * 2);
  height: calc(var(--touch-ctrl-bt-radius) * 2);
  border-radius: var(--touch-ctrl-bt-radius);
  border: 2px solid #88f;
  opacity: 0.3;
  position: absolute;
  z-index: 1000;
}

.touchcontrol-button.u {
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.touchcontrol-button.d {
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.touchcontrol-button.l {
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.touchcontrol-button.r {
  bottom: 0;
  top: 0;
  right: 0;
  margin: auto;
}

#touchcontrol-ab {
  position: absolute;
  left: 0;
  bottom: 0;
  /*border: 3px solid red;*/
  width: calc(var(--touch-ctrl-bt-radius) * 4);
  height: calc(var(--touch-ctrl-bt-radius) * 5.5);
}
.touchcontrol-button.a {
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.touchcontrol-button.b {
  bottom: 0;
  right: 0;
  margin: auto;
}
/* END SHARED_TOUCH_SCREEN */


/* PARTICLE_ANIMATION */
/* This one kinda special */
.env-effect {
  position: absolute;
}

.animation-particle,
.heal-text-particle,
.damage-text-particle,
.info-text-particle,
.projectile-particle,
.down-pointing-arrow-particle,
.projectile-image {
  font-family: RobotoB;
  position: absolute;
  z-index: 100;
  font-size: calc(var(--tile-scale) * 15px);
}

.damage-text-particle,
.info-text-particle,
.heal-text-particle {
  text-shadow: var(--dark-text-shadow);
  
  /** Center text */
  text-align: center;
  margin-left: -50px;
  width: 100px;
}

.damage-text-particle {
  color: #ccc;
}
.damage-text-particle.fire {
  color: #b44;
}

.heal-text-particle {
  color: var(--health-green);
}
.info-text-particle {
  color: #cc4;
}

.projectile-particle {
  width: 10px;
  height: 10px;
  border-radius: 5px;
  margin-left: -5px;
  margin-top: -5px;
  background: white;  
}

.down-pointing-arrow-particle-arrow {
  width: 0; 
  height: 0; 
  position: absolute;

  /* animation-timing-function: linear;
  animation-duration: 0.4s;
  animation-iteration-count: infinite;
  animation-direction: alternate; */

  border-left: calc(var(--tile-scale) * 5px) solid transparent;
  border-right: calc(var(--tile-scale) * 5px) solid transparent;
  border-top: calc(var(--tile-scale) * 5px) solid #f00;
  opacity: 0.5;

  top: calc(var(--tile-scale) * -8px);
  left: calc(var(--tile-w)/2 - calc(var(--tile-scale) * 5px)); /* needs to change when tile size changes */
}

/* END PARTICLE_ANIMATION */


/* UNIT_STAUS */
.unit-healthbar-container {
  width: var(--tile-w);
  box-sizing: border-box;
  height: 4px;
  border: 1px solid;
  position: absolute;
  top: -6px;
}
.unit-healthbar {
  background-color: var(--health-green);
  height:100%; 
}
/* END UNIT_STAUS */

/* HUD_DIALOG_BASE */
#hud {
  font-family: sans-serif;
}

/* the child of this centainer is horizontally and verticalled centered. */
.center-outer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  position: fixed;
}

/* outer container for vertical center bottom */
.center-bottom-outer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: column;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  position: fixed;
}

/* This code can be cleaner with css mixin */
.shadow-border {
  border: 1px solid;
  border-top-color: var(--box3d-light-border);
  border-left-color: var(--box3d-light-border);
  border-bottom-color: var(--box3d-shadow-border);
  border-right-color: var(--box3d-shadow-border);
}


/* END HUD_DIALOG_BASE */

/* DIALOG_CONVERSATION */
.text-dialog-plain {
  background: var(--menu-background);
  height: auto;
  padding: 10px 10px;
}

.text-dialog-note {
  width: 300px;
  height: 200px;
}

.text-dialog-note-top,
.text-dialog-note-bot-left {
  background: #EDA;
}

.text-dialog-note-top {
  width: 100%;
  height: calc(100% - 30px);
}

.text-dialog-note-top div {
  padding: 20px;
  white-space: pre-line;
  font-style: italic;
}

.text-dialog-note-bot {
  height: 30px;
  width: 100%;
}

.text-dialog-note-bot-left {
  height: 100%;
  width: calc(100% - 30px);
  display: inline-block;
}

.text-dialog-note-bot-right {
  display: inline-block;
  border-left: 30px solid #AA8;
  border-bottom: 30px solid transparent;
}

.talk-dialog {
  position: relative;
  background: var(--menu-background-dark);
  color: white;
  min-height: 90px;
  padding: 15px 10px;
  min-width: 50vw;
  max-width: 90vw;
}

.talk-dialog-title {
  font-weight: 800;
  opacity: 0.5;
  margin-top: -8px;
}

.talk-dialog-speaker {
  color: white;
}

.talk-dialog-text {
  color: white;
  margin-bottom: 15px;
  margin-left: 10px;
}

.talk-dialog-menu-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.talk-dialog .menu-item {
  color: #99f;
}

.talk-img-container {
  position: absolute;
  bottom: 101%;
  left: -10px;
}

.talk-img {
  width: 120px;
  display: block;
}

.talk-dialog.game-over-dialog {
  width: 40vw;
   /* hack to darken background with box-shadow*/
  box-shadow: 0 0 100vw 100vh rgba(0,0,0,.5);
  animation: fade-in-opacity 2s;
}

.talk-dialog.fixed-tall {
  min-height: 50vh;
}
/* END DIALOG_CONVERSATION */

/* DIALOG_MAIN_COMMON */
.menu-container {
  background: var(--menu-background);
  position: absolute;
  left: 40px;
  top: 60px;
}

.menu-container {
  left: 10px;
  top: 30px;
}

.menu-container-title {
  font-weight: 600;
  text-transform: uppercase;
  font-size: calc(var(--tile-scale) * 11px);
  color: #222;

  margin-bottom: 5px;
  border-bottom: 1px solid #bbb;
  padding: 5px 10px;
}

.menu-container .menu-item {
  font-size: calc(var(--tile-scale) * 16px);
}

.menu-item {
  padding: 6px 10px;
}

.menu-item .text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;

  display: flex;
  justify-content: space-between;
}

.menu-item .left {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.menu-item.selected {
  color: #ccf;
  background: #446;
  position: relative;
}

.menu-with-scrollbar {
  display: flex;
}

.menu-with-scrollbar-items {
  flex: 1;
  min-width: 0;
}

.menu-with-scrollbar .menu-scrollbar-outer {
  width: 3px;
  background: #ccc;
  position: relative;
}

.menu-with-scrollbar .menu-scrollbar-slider {
  background: #888;
  position: absolute;
  width: 100%;
}
/* END DIALOG_MAIN_COMMON */

/* DIALOG_TRADE */
.trade-menu-container {
  background: var(--menu-background);
}

.desktop .trade-menu-container {
  width: 650px;
  max-width: 90vw;
}

.mobile .trade-menu-container {
  left: 10px;
  right: 10px;
  top: 30px;
  position: absolute;
}

.trader-name {
  font-weight: bold;
  padding: 10px;
}

.trade-menu-main {
  max-height: 70vh;
  display: flex;
}

.trade-menu-center {
  flex: 1;
  padding: 10px 15px 0 10px;
}

.mobile .trade-menu-center {
  order: 3;
  padding: 10px 15px;
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--menu-background);

  border: 1px solid;
  border-top-color: var(--box3d-light-border);
  border-left-color: var(--box3d-light-border);
  border-bottom-color: var(--box3d-shadow-border);
  border-right-color: var(--box3d-shadow-border);
}

.trade-menu-right,
.trade-menu-left {
  width: 180px;
  flex: none;
}

.mobile .trade-menu-right,
.mobile .trade-menu-left {
  width: 50%;
}

.trade-menu-left .menu-with-scrollbar,
.trade-menu-right .menu-with-scrollbar {
  min-height: 240px;
}

.trade-menu-left {
  border-right: 1px solid var(--box3d-light-border);
}
.trade-menu-right {
  border-left: 1px solid var(--box3d-light-border);
}

.trade-capacity {
  font-size: 14px;
  color: #222;
  font-weight: 600;
}

.trade-price-text {
  margin-top: 10px;
  color: #600;
  font-size: 15px;
}

/* END DIALOG_TRADE */

/* DIALOG_PERK_SELECT */
.perk-select-dialog {
  width: 500px;
  height: 350px;
  max-width: 90vw;
  max-height: 90vh;
  
  padding: 10px;
  background: var(--menu-background-dark);
  opacity: 0.95; /* todo it properly, should only apply to background */
  color: white;

  display: flex;
  flex-direction: column;
}

.mobile .perk-select-dialog {
  position: absolute;
  top: 30px;
}

.perk-select-dialog .title {
  font-size: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.perk-select-dialog .points-remain {
  margin-bottom: 20px;
  text-align: center;
}

.perk-select-dialog .perk-options {
  margin-bottom: 20px;
}

.perk-select-dialog .perk-options .menu-item {
  color: #99f;
  text-transform: uppercase;
  display: flex;
}

.perk-select-dialog .perk-options .menu-item .cost {
  text-transform: none;
  font-size: 14px;
  color: #888;
  margin-left: 10px;
}

.perk-select-dialog .perk-options .perk-checkbox {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 10px;
  border: 2px solid white;
  box-sizing: border-box;
}

.perk-select-dialog .perk-options .perk-checkbox.checked div {
  background: white;
  width: 10px;
  height: 10px;
  margin: 2px;
}

.perk-select-dialog .perk-desc {
  margin-left: 10px;
}

.perk-select-dialog .bottom-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.perk-select-dialog .bottom-section .menu-item {
  color: #99f;
}

/* END DIALOG_PERK_SELECT */

/* DIALOG_TABBED_MENU */
.tabbed-menu-container {
  position: absolute;
  margin-top: -20px;
}

.desktop .tabbed-menu-container {
  width: 650px;
  max-width: 90vw;
}

.mobile .tabbed-menu-container {
  left: 10px;
  right: 10px;
  top: 30px;
}

.tabbed-menu-header {
  display: inline-block;
  height: 30px;
  position: relative;
}

.tabbed-menu-header-inner {
  display: inline-flex;
  height: 31px; /* one higher than header */
}

.tab-item {
  padding: 4px 8px;
  background: var(--menu-tab);
  align-self: flex-end;

  border-radius: 3px 3px 0 0;
  margin-right: 1px;
}

.tab-item:not(.selected) {
  border-bottom: 1px solid var(--box3d-light-border);
}

.tab-item.selected {
  padding-bottom: 7px;
  padding-top: 3px;
  z-index: 1;

  background: var(--menu-tab-select);
  border-top: 1px solid var(--box3d-light-border);
  border-left: 1px solid var(--box3d-light-border);
  border-right: 1px solid var(--box3d-light-border);
}

.tabbed-menu-content {
  padding: 2px 0;
  background: var(--menu-background);

  min-height: 250px;
  max-height: 70vh;
 
  display: flex;
  flex-direction: column;
}

.tabbed-menu-main {
  display: flex;
  flex-direction: row;

  flex: 1;
}

.tabbed-menu-subtext {
  font-size: 14px;
  color: #222;
  font-weight: 600;
  margin: 0 0 5px 10px;
}

.tabbed-menu-main-menu {
  width: 250px;
  margin-right: 10px;
  flex: none;
  border-right: 1px solid var(--box3d-light-border);
}

.mobile .tabbed-menu-main-menu {
  width: 100%;
  margin-right: 0;
  border-right: none;
}

.tabbed-menu-detail-content {
  padding: 10px 10px 0 0;
  flex: 1;
}

.mobile .tabbed-menu-detail-content[right-side] {
  position: absolute;
  top: calc(100% + 10px);
  background: var(--menu-background);
  padding: 0;
  width: 100%;
}

.mobile .tabbed-menu-detail-content-wrap {
  padding: 10px;
}

.tabbed-menu-detail-menu {
  position: relative;
  display: inline-block;
}

.tabbed-menu-detail-menu .menu-item {
  padding: 6px 15px;
  font-size: 15px;
  line-height: 1.2;
}

.tabbed-menu-detail-menu .menu-item.selected {
  font-weight: 600;
}

.inv-item-desc {
  padding-bottom: 10px;
}

.tabbed-menu-detail-content[focused] .inv-item-desc {
  border-bottom: 1px solid var(--box3d-light-border);
}

.inv-item-name {
  font-size: 20px;
  margin-bottom: 10px;
}

.inv-item-additional-info {
  margin-top: 10px;
  color: #222;
  font-size: 14px;
  font-weight: 600;
}
.inv-item-additional-info ~ .inv-item-additional-info{
  margin-top: 5px;
}

.tabbed-menu-detail-content .player-info {
  margin-left: 10px;
}

.tabbed-menu-detail-content .player-info-name {
  font-size: 20px;
  margin-bottom: 15px;
}

.tabbed-menu-detail-content .player-info-kvp {
  margin-bottom: 8px;
  display: flex;
}

.tabbed-menu-detail-content .player-info-kvp > span:nth-child(1) {
  color: #444;
  margin-right: 20px;
  min-width: 100px;
  display: inline-block;
}

.tabbed-menu-detail-content .skill-tab-desc {
  font-size: 18px;
}


/* END DIALOG_TABBED_MENU */

/* HUD_CLOCK */
.clock {
  position: relative;
  left: 10px;
  top: 30px;
  background: #ccc;
  border: 1px solid black;
  width: 20px;
  height: 20px;
  border-radius: 10px;
}

.clock-hand-minute,
.clock-hand-second {
  position: absolute;
  left: 1px;
  top: 10px;
  width: 9px;
  height: 1px;
  transform-origin: 9px;
}

.clock-hand-second {
  background: red;
}

.clock-hand-minute {
  background: #000;
  left: 5px;
  width: 5px;
  transform-origin: 5px;
}
/* END HUD_CLOCK */

/* HUD_BOSS */
.boss-hp-hud-area {
  position: absolute;
  left: 10%;
  bottom: 50px;
}

.boss-hp-bar-container {
  width: 80vw;
  height: 10px;
  border: 1px solid white;
  background: var(--health-red);
}

.boss-name {
  font-size: 20px;
  color: #fff;
}

.boss-hp-bar {
  background: var(--health-green);
  height: 100%;
  /** js sets width */
  transition-property: width;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
}
/* END HUD_BOSS */

/* HUD_PARTY_INFO */
.party-status-hud {
  left: 30px;
  top: 30px;
  position: absolute;
  /* text-shadow: var(--light-text-shadow); */
}

.player-status-hud {
  font-size: 13px;
}

.player-status-hud > span ~ span {
  margin-left: 20px;
}

.hud-healthbar-container {
  height: 5px;
  background: var(--health-red);
}

.hud-weapon {
  color: #fff;
}

.hud-healthbar {
  background: green;
  height: 100%;
}

.hud-health-high,
.hud-health-mid,
.hud-health-low {
  text-transform: uppercase;
  font-weight: 600;
}

.hud-health-high {
  color: var(--health-green);
}
.hud-health-mid {
  color: var(--health-yellow);
}
.hud-health-low {
  color: var(--health-red);
}

.player-status-item {
  color: var(--player-status-neutral);
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 12px;
}

.player-status-item.bad {
  color: var(--player-status-bad);
}
/* END HUD_PARTY_INFO */

/* HUD_TARGET_SELECT */
.target-select-dialog {
  background: var(--menu-background);
  color: var(--menu-background-dark);

  opacity: 0.9;
  font-size: calc(var(--tile-scale) * 16px);
}

.target-select-subject-main ~ .target-select-subject-additional {
  margin-top: 8px;
}

.target-selection-subject-main-pic {
  padding: 1px 4px 3px;
  line-height: 1;
  display: flex;
  margin-right: 5px;
  background: #bbb;
  font-family: RobotoB;
  font-size: calc(var(--tile-scale) * 18px);
}

.target-selection-subject-main-pic.dark-background {
  background: #444;
}

.target-select-subject-main .target-select-subject-main-name {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.additional-wrapper .target-select-subject-other-things {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  margin-top: 10px;
}

.additional-wrapper .target-select-subject-additional {
}

.target-select-subjects,
.target-select-action-section {
  padding: 3px 6px; 
}

.target-select-action-section {
  border-top: 1px solid var(--box3d-light-border);
  color: var(--action-blue);
  font-weight: 600;
}

.transition-overlay {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  animation-timing-function: linear;
  animation-duration: 1s; /* overriden in js */
}

.transition-overlay.fade-in-to-black {
  background-color: black;
  animation-name: fade-in-opacity;
  animation-fill-mode: forwards;
  color: white;
}

.transition-overlay.fade-out-from-black {
  background-color: black;
  animation-name: fade-out-opacity;
  animation-fill-mode: forwards;
  color: white;
}

/** Need to match with enums */
.highlight1 {
  background: rgba(255,0,0,0.2);
  box-sizing: border-box;
}

.highlight2 {
  background: rgba(0,255,0,0.2);
  box-sizing: border-box;
}

.highlight3 {
  background: rgba(128, 128, 128, 0.2);
  box-sizing: border-box;
}

/** target select use */
/* left/right/top/bottom */
.hlbl {
  border-left: 1px solid gray;
  box-sizing: border-box;
}
.hlbr {
  border-right: 1px solid gray;
  box-sizing: border-box;
}
.hlbt {
  border-top: 1px solid gray;
  box-sizing: border-box;
}
.hlbb {
  border-bottom: 1px solid gray;
  box-sizing: border-box;
}
/* END HUD_TARGET_SELECT */

/* HUD_CONTROL_HELP */
.control-help-wrapper {
  position: absolute;
  bottom: 5px;
  left: 5px;
  text-shadow: var(--dark-text-shadow);
  font-size: 13px;
  z-index: 1; /* above any menu */
}
.control-help-item-key {
  color: #888;
  margin-right: 2px;
}
.control-help-item-text {
  color: white;
}

/* END HUD_CONTROL_HELP */

/* TITLE_SCREEN */
.control-screen {
  background: #222;
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  justify-content: center;
}

.control-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}
.control-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
}
.control-image-kb {
  max-width: 35vw;
  opacity: 0.5;
}
.control-image-touch {
  margin-top: 10px;
  max-width: 30vw;
  opacity: 0.5;
}

.title-screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #222;
  display: flex;
  color: white;
  flex-direction: column;
}

.title-screen .title {
  margin-top: 30vh;
  font-size: 30px;
  font-family: RobotoB;
  margin-left: 15vw;
  margin-right: auto;
}

.title-screen .title-subtext {
  margin-left: 15vw;
  margin-right: auto;
  font-style: italic;
  font-size: 12px;
}

.title-screen .selection {
  margin-left: 15vw;
  margin-right: auto;
  margin-top: 10vh;
  position: relative;
}

.title-screen .selection .menu-item {
  margin-top: 10px;
  font-weight: 600;
  position: relative;
}

.title-screen .selection .menu-item.selected {
  background: none;
  color: #88f;
}

.title-screen .credits {
  margin-top: auto;
  margin-bottom: 0;
  color: #888;
  font-size: 10px;
}

.title-screen .background-image {
  width: 400px;
  opacity: 0.7;
  position: fixed;
  margin-left: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* END TITLE_SCREEN */

.timer-area {
  font-size: 13px;
  position: absolute;
  top: 0;
  right: 0;
  color: white;
  font-family: RobotoB;
  text-align: right;
}
.timer-area .cur-lvl {
  text-transform: uppercase;
  font-size: 12px;
  color: #888;
  margin-right: 10px;
}