@import "controls.css";
@import "tabs.css";

/* Layout */

main {
  display: grid;
  gap: 0.5rem;
  width: 98vw;
  height: 98vh;
}

/* Landscape layout */
@media (orientation: landscape) {
  main {
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 1fr 2fr;
    grid-template-areas:
      "board program"
      "board control";
  }
}

/* Portrait layout */
@media (orientation: portrait) {
  main {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "board"
      "program"
      "control";
  }
}

/* Narrow layout */
@media (max-width: 400px) {
  main {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
      "board"
      "program"
      "control";
  }
}

#board { grid-area: board; }
#program { grid-area: program; }
#control { grid-area: control; }

#board {
  padding: 0;
  display: grid;
  gap: 0.1rem;
  grid-template-rows: 2em auto;
  grid-template-areas:
    "level"
    "map";
}

#level { grid-area: level; }
#map { grid-area: map; }

#level {
  margin: auto;
  font-size: 1em;
  display: flex;
  gap: 1em;
}

#map {
  background-color: lightblue;
  width: 100%;
  height: 100%;
  min-height: 60vh;
}

.active {
  --bg: cornflowerblue;
  --border: red;
}

.cell {
  transform-origin: center;
  transform-box: fill-box;
  transition-timing-function: ease-in-out;
}

.wiggle {
  transform-origin: center;
  transform-box: fill-box;
  animation: wiggle 0.2s ease-in-out infinite;
}

@keyframes wiggle {
  0%   { transform: rotate(-5deg);}
  50%  { transform: rotate(5deg);}
  100% { transform: rotate(-5deg);}
}

main > * {
  border: 1px solid grey;
  border-radius: 1em;
  padding: 1em;
  overflow: hidden;
}

#control {
  display: flex;
  flex-direction: column;
}

#remote {
  height: 100%;
  justify-content: center;
  align-content: center;
}

#controls {
  height: 100%;
}

#controls button {
  font-size: 4vmin;
}

#program {
  position: relative;
}

#program .listing {
  font-size: 3.5vmin;
}

#program .highlight {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  border: 1px dotted red;
  border-radius: 2px;
  background-color: #ddf;
  z-index: -1;
}

#program .highlight.active {
  display: block;
}

.wiggle .bot-wiggle {
  animation: wiggle 0.3s ease-in-out infinite;
  transform-origin: 50% 50%;
}

@keyframes wiggle {
  0%   { transform: rotate(-5deg);}
  50%  { transform: rotate(5deg);}
  100% { transform: rotate(-5deg);}
}