:root {
  --cursor-color: rgba(255, 255, 255, 0.3);
}

@font-face {
    font-family: AppFont;
    src: url("../fonts/17607.otf") format("opentype");
}

body {
  background: radial-gradient(#305dd1, #19316d);
  user-select: none;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0;
  margin: 0;
  font-family: AppFont;
}

.block {
  background: transparent;
  display: inline-block;
}

.block:hover {
  background: var(--cursor-color);
}

.far {
  margin: 10px;
}

.fas {
  margin: 10px;
}

.fa-active {
  cursor: pointer;
  color: #6c6;
  text-shadow: 0 0 5px #6c6;
}

.fa-disable {
  color: #666;
  text-shadow: 0 0 5px;
}

.fa-click {
  cursor: pointer;
  color: #c3c;
  text-shadow: 0 0 10px #c3c;
}

.fa-click:hover {
  color: #cc3;
  text-shadow: 0 0 10px #cc3;
}

.fa-click:active {
  color: #6c6;
  text-shadow: 0 0 5px #6c6;
}

.block-hint-lock {
  background: rgba(0, 128, 0, 0.5);
  display: inline-block;
}

.block-lock {
  background: rgba(0, 0, 0, 0.5);
}

.server {
  width: 100%;
  height: 100%;
  background-image: url(../server.png);
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
}

.connector {
  width: 100%;
  height: 100%;
  background-size: cover;
}

#score {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 0;
  bottom: 0;
  text-align: right;
}

.turns {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  bottom: 0;
}

.panel-left {
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
}

.panel-right {
  text-align: right;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 0;
  top: 0;
}

.blur {
  filter: blur(8px);
}

.panel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
    background: rgba(0, 0, 0, 0.4);
}

.hide {
  display: none;
}

.pc {
  width: 100%;
  height: 100%;
  background-size: cover;
}

.pc-off {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18C11 15.2386 13.2676 13 16.0649 13H83.9351C86.7324 13 89 15.2386 89 18V58C89 60.7614 86.7324 63 83.9351 63H16.0649C13.2676 63 11 60.7614 11 58V18Z' fill='black'/%3E%3Cpath d='M12 86C12 84.8954 12.8954 84 14 84H86C87.1046 84 88 84.8954 88 86V86C88 87.1046 87.1046 88 86 88H14C12.8954 88 12 87.1046 12 86V86Z' fill='black'/%3E%3Crect x='43' y='62' width='14' height='23' fill='black'/%3E%3Crect x='18' y='20' width='64' height='36' rx='3' fill='%23636363'/%3E%3C/svg%3E%0A");
}

.pc-on {
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18C11 15.2386 13.2676 13 16.0649 13H83.9351C86.7324 13 89 15.2386 89 18V58C89 60.7614 86.7324 63 83.9351 63H16.0649C13.2676 63 11 60.7614 11 58V18Z' fill='black'/%3E%3Cpath d='M12 86C12 84.8954 12.8954 84 14 84H86C87.1046 84 88 84.8954 88 86V86C88 87.1046 87.1046 88 86 88H14C12.8954 88 12 87.1046 12 86V86Z' fill='black'/%3E%3Crect x='43' y='62' width='14' height='23' fill='black'/%3E%3Cmask id='mask0' mask-type='alpha' maskUnits='userSpaceOnUse' x='18' y='20' width='64' height='36'%3E%3Crect x='18' y='20' width='64' height='36' rx='3' fill='%2351B5FD'/%3E%3C/mask%3E%3Cg mask='url(%23mask0)'%3E%3Crect x='18' y='20' width='64' height='36' rx='3' fill='%2351B5FD'/%3E%3Cpath d='M38.5 42C31 49.5 29.3333 56.5 29.5 59H84V15.5H67.5C67.1667 17.1667 66.6484 22.7884 62 25.5C56 29 47.2821 33.2179 38.5 42Z' fill='%23179CFC'/%3E%3C/g%3E%3C/svg%3E%0A");
}

.mode {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.3);
  text-align: center;
  color: #9cf;
  text-shadow: 0 0 10px #000;

}

.mode:hover {
  background: rgba(0, 0, 0, 0.3)
}

.close-select-mode {
  position: fixed;
  right: 0;
  top: 0;
}

.turns-view {
  position: fixed;
  text-shadow: 0 0 10px;
}

.time-view {
  position: fixed;
  color: #cc3;
  text-shadow: 0 0 10px;
}

.contacts-rotate-left {
  transform: rotate(-90deg);
  transition: transform 0.15s linear;
}

.device-rotate-left {
  transform: rotate(90deg);
  transition: transform 0.15s linear;
}

.contacts-rotate-right {
  transform: rotate(90deg);
  transition: transform 0.15s linear;
}

.device-rotate-right {
  transform: rotate(-90deg);
  transition: transform 0.15s linear;
}

.game-over-panel {
  text-align: center;
  cursor: pointer;
}

.game-over-container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateY(-50%) translateX(-50%);
}

.panel-text {
  color: #c3c;
  text-shadow: 0 0 5px;
}

.fix {
    width: 0;
    background: transparent;
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.records-panel {
  cursor: pointer;
  text-align: center;
}

.records-container {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translateY(-50%) translateX(-50%);
}

.record-size {
  display: inline-block;
  width: 20%;
}