/* Cell rules transcribed from the deployed Dereva Academy board stylesheet. */
.mtb-board-wrap {
  --mtb-grass: #6ea24c;
  --mtb-yellow-line: yellow;
  --mtb-road-line: white;
  --mtb-road-cell: #131f24;
  --mtb-blocked-bg: #222;
  --mtb-blocked: red;
  position: relative;
  width: min(95vw, 510px);
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--mtb-road-cell);
  border: .2px solid gray;
}

.mtb-board-wrap .mtb-board {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  grid-template-rows: repeat(30, 1fr);
  grid-auto-flow: row;
  gap: 0;
}

.mtb-board-wrap .mtb-preview-car {
  position: absolute;
  z-index: 3;
  left: 55%;
  top: 11.6667%;
  width: 24px;
  height: auto;
  transform: translate(-50%, -50%) rotate(270deg);
  pointer-events: none;
}

.mtb-board-wrap .destination {
  opacity: .5;
  pointer-events: none;
  z-index: 2;
  background-color: #ff0;
  border-radius: 1px;
  animation: mtb-destination-blink 1s infinite;
}

@keyframes mtb-destination-blink {
  0% { opacity: .2; }
  50% { opacity: .8; }
  100% { opacity: .2; }
}

.mtb-board-wrap .grass {background-color:var(--mtb-grass);position:relative}
.mtb-board-wrap .grass.rounded {background-color:var(--mtb-grass);border:1px solid var(--mtb-yellow-line);border-radius:50%;width:100%;height:100%}
.mtb-board-wrap .radial-trigger {position:relative}
.mtb-board-wrap .radial-trigger:before {content:"";border:1px dashed var(--mtb-road-line);border-radius:50%;width:450%;height:450%;position:absolute;top:50%;left:-50%;transform:translate(-50%,-50%)}
.mtb-board-wrap .grass.rounded:after {content:"";border:1px dashed var(--mtb-road-line);border-radius:50%;width:1150%;height:1150%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.mtb-board-wrap .grass.rounded:before {content:"";border:1px dashed var(--mtb-road-line);border-radius:50%;width:850%;height:850%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.mtb-board-wrap .diagonal-line-left {color:var(--mtb-road-line);font-weight:medium;text-align:center;justify-content:center;align-items:center;font-size:7px;display:flex;position:relative}
.mtb-board-wrap .diagonal-line-left:after {content:"";background:var(--mtb-road-line);transform-origin:50%;width:100%;height:1px;position:absolute;top:15%;left:50%;transform:translate(-50%,-50%)rotate(-25deg)}
.mtb-board-wrap .blank-cell, .mtb-board-wrap .diagonal-line-right {color:var(--mtb-road-line);font-weight:medium;text-align:center;justify-content:center;align-items:center;font-size:7px;display:flex;position:relative}
.mtb-board-wrap .diagonal-line-right:after {content:"";background:var(--mtb-road-line);transform-origin:50%;width:100%;height:1px;position:absolute;top:15%;right:50%;transform:translate(50%,50%)rotate(25deg)}
.mtb-board-wrap .cell {box-sizing:border-box;border:none;width:100%;height:100%;position:relative}
.mtb-board-wrap .radial-dotted {background:repeating-conic-gradient(var(--mtb-road-line) 0deg 5deg, transparent 5deg 15deg);border-radius:50%;width:100px;height:100px}
.mtb-board-wrap .cell.white-dashed {--dash-color:var(--mtb-road-line);--dash-size:3px;--dash-gap:5px}
.mtb-board-wrap .cell.yellow-dashed {--dash-color:var(--mtb-yellow-line);--dash-size:3px;--dash-gap:5px}
.mtb-board-wrap .cell.gray-dashed {--dash-color:var(--mtb-road-cell);--dash-size:3px;--dash-gap:5px}
.mtb-board-wrap .cell.top-dashed {background-image:repeating-linear-gradient(90deg, var(--dash-color) 0px, var(--dash-color) var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) + var(--dash-gap)));background-position:top;background-repeat:no-repeat;background-size:100% 1px}
.mtb-board-wrap .cell.bottom-dashed {background-image:repeating-linear-gradient(90deg, var(--dash-color) 0px, var(--dash-color) var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) + var(--dash-gap)));background-position:bottom;background-repeat:no-repeat;background-size:100% 1px}
.mtb-board-wrap .cell.right-dashed {background-image:repeating-linear-gradient(180deg, var(--dash-color) 0px, var(--dash-color) var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) + var(--dash-gap)));background-position:100%;background-repeat:no-repeat;background-size:1px 100%}
.mtb-board-wrap .cell.bottom-right-dashed {--dash-color:var(--mtb-road-line);--dash-size:3px;--dash-gap:5px;background-image:repeating-linear-gradient(90deg, var(--dash-color) 0px, var(--dash-color) var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) + var(--dash-gap))), repeating-linear-gradient(180deg, var(--dash-color) 0px, var(--dash-color) var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) + var(--dash-gap)));background-position:100% 100%,100% 100%;background-repeat:no-repeat;background-size:1px 100%,100% 1px}
.mtb-board-wrap .cell.left-dashed {background-image:repeating-linear-gradient(180deg, var(--dash-color) 0px, var(--dash-color) var(--dash-size), transparent var(--dash-size), transparent calc(var(--dash-size) + var(--dash-gap)));background-position:0;background-repeat:no-repeat;background-size:1px 100%}
.mtb-board-wrap .cell.top-solid-white {border-top:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.right-solid-white {border-right:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.bottom-solid-white {border-bottom:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.left-solid-white {border-left:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.left-right-solid-white {border-left:1px solid var(--mtb-road-line);border-right:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.right-top-solid-white {border-top:1px solid var(--mtb-road-line);border-right:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.left-top-solid-white {border-top:1px solid var(--mtb-road-line);border-left:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.right-bottom-solid-white {border-bottom:1px solid var(--mtb-road-line);border-right:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.solid-white {border:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.top-bottom-solid-white {border-top:1px solid var(--mtb-road-line);border-bottom:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.top-right-solid-white {border-top:1px solid var(--mtb-road-line);border-right:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.bottom-right-solid-white {border-bottom:1px solid var(--mtb-road-line);border-right:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.bottom-left-solid-white {border-bottom:1px solid var(--mtb-road-line);border-left:1px solid var(--mtb-road-line)}
.mtb-board-wrap .cell.top-solid-yellow {border-top:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.right-solid-yellow {border-right:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.bottom-solid-yellow {border-bottom:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.left-solid-yellow {border-left:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.left-top-solid-yellow {border-left:1px solid var(--mtb-yellow-line);border-top:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.right-top-solid-yellow {border-right:1px solid var(--mtb-yellow-line);border-top:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.right-bottom-solid-yellow {border-right:1px solid var(--mtb-yellow-line);border-bottom:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.left-bottom-solid-yellow {border-left:1px solid var(--mtb-yellow-line);border-bottom:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.left-right-solid-yellow {border-left:1px solid var(--mtb-yellow-line);border-right:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.top-bottom-solid-yellow {border-top:1px solid var(--mtb-yellow-line);border-bottom:1px solid var(--mtb-yellow-line)}
.mtb-board-wrap .cell.zebra-line {position:relative}
.mtb-board-wrap .cell.zebra-line:before {content:"";background:var(--mtb-road-line);width:2px;position:absolute;top:0;bottom:0;left:35%;transform:translate(-50%)}
.mtb-board-wrap .cell.zebra-line:after {content:"";background:var(--mtb-road-line);width:1px;position:absolute;top:0;bottom:0;left:65%;transform:translate(-50%)}
.mtb-board-wrap .cell-image {object-fit:contain;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}
.mtb-board-wrap .cell-image.up {transform:rotate(0)}
.mtb-board-wrap .cell-image.right {transform:rotate(90deg)}
.mtb-board-wrap .cell-image.down {transform:rotate(180deg)}
.mtb-board-wrap .cell-image.left {transform:rotate(270deg)}
.mtb-board-wrap .cell.blocked {background:var(--mtb-blocked-bg);position:relative}
.mtb-board-wrap .cell.blocked:after {content:"✕";color:var(--mtb-blocked);justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex;position:absolute;inset:0}