lila/ui/site/css/_coordinate.scss

$mq-col1: $mq-not-medium;
$mq-col2: $mq-medium;
$mq-col3: $mq-x-large;

@import '../../puz/css/font';

%zen {
  .zen & {
    display: none;
  }
}

#friend_box,
.site-title-nav,
.site-buttons {
  @extend %zen;
}

#main-wrap {
  --main-max-width: calc(100vh - #{$site-header-outer-height} - #{$col1-uniboard-controls});

  @include breakpoint($mq-col2) {
    --main-max-width: auto;
  }
}

.coord-trainer {
  grid-area: main;
  display: grid;
  overflow: hidden;

  // coords cause mobile to have horiz scrolling

  &__side {
    @extend %zen;
    grid-area: side;
  }

  &__board {
    grid-area: board;
  }

  &__table {
    grid-area: table;
  }

  &__progress {
    @extend %zen;
    grid-area: progress;
  }

  &__score,
  &__timer {
    @extend %zen;
    font-family: 'storm';
    font-size: 5em;
    margin: $block-gap;
  }

  .hurry {
    color: $c-bad !important;
  }

  grid-template-areas: 'board' 'progress' 'score' 'table' 'side';
  grid-row-gap: $block-gap;

  @include breakpoint($mq-col2) {
    grid-template-columns: $col2-uniboard-width $block-gap $col2-uniboard-table;
    grid-template-rows: fit-content(0);
    grid-template-areas: 'board    . table' 'board    . side' 'progress . .' 'score    . .';
  }

  @include breakpoint($mq-col3) {
    grid-template-areas: 'side . board    . table' '.    . progress . .' '.    . score    . .';
    grid-template-columns: $col3-uniboard-side $block-gap $col3-uniboard-width $block-gap $col3-uniboard-table;
  }

  .box {
    padding: $block-gap;
    margin-top: $block-gap;

    h1 {
      font-size: 1.5em;
      padding: 0 !important;
      text-align: center;
    }

    p {
      margin-top: 1em;
    }

    &.current-status {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }

  form.color {
    margin-top: $block-gap;

    .color i {
      display: block;
      width: 30px;
      height: 30px;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      padding: 0;
    }

    .color_1 i {
      background-image: url(../piece/cburnett/wK.svg);
    }

    .color_2 i {
      background-image: url(../images/wbK.svg);
    }

    .color_3 i {
      background-image: url(../piece/cburnett/bK.svg);
    }
  }

  svg.coords-svg {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;

    .coord {
      @include transition;
      text {
        @include transition;
        font-weight: bold;
        text-shadow: 0 10px 10px #444;
      }

      @mixin coord($fill, $opacity, $font-size, $translate-x, $translate-y) {
        transform: translate($translate-x, $translate-y);

        text {
          fill: $fill;
          opacity: $opacity;
          font-size: $font-size;
        }
      }

      &--resolved {
        @include coord(#fff, 0, 30px, -8px, 60px);
      }

      &--current {
        @include coord(#fff, 0.8, 30px, 22px, 60px);
      }

      &--next {
        @include coord(#eee, 0.7, 12px, 64px, 64px);
      }

      &--new {
        @include coord(#eee, 0, 12px, 76px, 64px);
      }
    }
  }

  .progress_bar {
    @extend %box-radius;

    width: 100%;
    height: 10px;
    background-color: $c-secondary;
  }

  &__table {
    @extend %flex-center;

    justify-content: space-around;

    .explanation li {
      list-style: outside disc;
      margin: 0.5em 0 0.5em 1em;
    }
  }

  &.wrong {
    $c-wrong: $c-bad;

    .progress_bar {
      background-color: $c-wrong;
    }

    .coord-trainer__score {
      color: $c-wrong !important;
    }

    .coord--current text {
      fill: $c-wrong !important;
    }
  }

  &.play .start,
  &.play form.color {
    display: none;
  }

  &.init {
    @include breakpoint($mq-col1) {
      .coord-trainer__score,
      .coord-trainer__progress {
        display: none;
      }

      .explanation {
        order: 2;
        margin-top: 1em;
      }
    }

    .explanation {
      @extend %page-text-shadow !optional;
    }

    .coord-trainer__score,
    .coord-trainer__progress,
    .current-status {
      opacity: 0;
    }

    form.color {
      margin-bottom: $block-gap;
    }
  }
}

#jqstooltip {
  box-sizing: content-box;
}