/* The eval bar on a phone: horizontal, above the board (js/eval-hbar.js).
   Never shown above phone width, where the vertical bar beside the board
   stays exactly as it was; never shown in the iOS app, whose analyzer draws
   its own horizontal bar (css/analyzer-app.css). */
.eval-hbar { display: none; }

@media (max-width: 820px) {
  .eval-hbar {
    position: relative; flex: none; box-sizing: border-box;
    height: 12px; border-radius: 6px; overflow: hidden;
    /* The track is the TOP player's colour and the fill, growing from the
       left, the bottom player's - the vertical bar's convention on its side. */
    background: var(--p2);
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(255, 255, 255, .07);
  }
  .eval-hbar-fill {
    position: absolute; top: 0; bottom: 0; left: 0; width: 50%;
    background: var(--p1);
    /* The vertical bar's own curve, so a change reads as the same movement. */
    transition: width .4s cubic-bezier(.22, .61, .36, 1);
  }
  .eval-hbar.flipped { background: var(--p1); }
  .eval-hbar.flipped .eval-hbar-fill { background: var(--p2); }
  .eval-hbar-mid {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
    transform: translateX(-50%); background: rgba(0, 0, 0, .35); pointer-events: none;
  }
  .eval-hbar::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .14) 100%);
  }

  /* ---- Explore, the analyzer, game review (index.html) -------------------
     Under the move strip, over the opponent's row, the board's width. The
     vertical bar goes, and so does the column the seat rows and the step row
     were shifted by to stay square over the board beside it. */
  body.review-mode:not(.app-analyzer) .board-wrap > .eval-hbar:not(.is-off) {
    display: block; width: var(--board-size); max-width: 100%;
  }
  body.review-mode #eval-bar { display: none !important; }
  body:not(.app-analyzer) .board-wrap { --eval-col: 0px; }
  /* The bar and the wrap's gap under it come out of the board's height, the
     way the strip's own band does (--strip-h, styles.css). */
  body.review-mode:not(.app-analyzer) .board-wrap:has(> .eval-hbar:not(.is-off)) { --strip-h: 112px; }

  /* ---- the opening explorer (openings.html) ------------------------------
     First in the stage, over the top seat row. */
  .op-stage > .eval-hbar:not(.is-off) { display: block; width: var(--opb); max-width: 100%; }
  .op-board-row .eval-bar { display: none !important; }
  body.op-body .op-main { --op-evalcol: 0px; }
}

/* Landscape phones: the move strip stands down there and hands its band back
   (styles.css); the bar keeps only its own. */
@media (max-width: 820px) and (max-height: 500px) {
  body.review-mode:not(.app-analyzer) .board-wrap:has(> .eval-hbar:not(.is-off)) { --strip-h: 20px; }
}

/* The app's analyzer has its own horizontal bar. */
body.app-analyzer .eval-hbar { display: none !important; }