/* Final responsive corrections from the generated phone and tablet screenshots. */

.board-scene {
  overflow: clip;
}

/*
 * The menu demonstrates the real game, so every covered demo card uses the
 * same back rather than implying that position or color carries information.
 */
.demo-board .demo-card .demo-card-back {
  background:
    radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0 2px, transparent 2.6px),
    linear-gradient(145deg, #72d2ff, #198fe4);
  background-size: 13px 13px, auto;
}

/*
 * The original mockup animated two fixed positions forever. The self-playing
 * board now owns every reveal, miss, and persistent match through these state
 * classes, so no card receives a positional animation.
 */
.demo-card:nth-child(2) .demo-card-inner,
.demo-card:nth-child(5) .demo-card-inner {
  animation: none !important;
}

.demo-card.is-flipped .demo-card-inner,
.demo-card.is-matched .demo-card-inner {
  transform: rotateY(180deg);
}

/* The old decorative match stars were removed from the markup. */
.match-pop {
  display: none !important;
}

/* Mid-sized portrait tablets need a little more breathing room above the tray. */
@media (min-width: 600px) and (max-width: 799px) and (orientation: portrait) {
  .demo-board {
    width: min(90%, 590px, calc(100dvh - 425px));
  }
}

/* Keep the smaller landscape tray simple and prevent its status text from crowding the title. */
@media (min-width: 720px) and (max-width: 1100px) and (orientation: landscape) {
  #selection-summary {
    display: none;
  }

  .panel-heading h2 {
    white-space: nowrap;
  }
}

/* On phone landscape, the controls themselves are the heading. */
@media (orientation: landscape) and (max-height: 520px) {
  .panel-heading {
    display: none;
  }

  .control-panel {
    gap: 5px;
    padding: 8px 10px;
  }

  .choice-block legend {
    margin-bottom: 2px;
  }
}