/* Portrait-phone affordance for the deck (index.html, print.html).
 *
 * The slides are a fixed 1920x1080 canvas that deck-stage scales to fit and
 * letterboxes. In portrait on a phone that leaves a ~430x242 strip — legible
 * enough to recognise, too small to read the Khmer body copy. Rather than
 * rework the deck's geometry, use the black letterbox band above the slide to
 * say so, and offer the PDF for anyone who won't rotate.
 *
 * CSS-only and non-covering: tap-to-navigate on the slide keeps working.
 */
#rotate-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 820px) {
  #rotate-hint {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 14px;
    padding: 14px 18px;
    font-family: 'Suwannaphum', serif;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
    color: rgba(255, 255, 255, .72);
    background: linear-gradient(180deg, rgba(6, 11, 24, .96), rgba(6, 11, 24, 0));
    pointer-events: none; /* only the PDF link takes taps */
  }

  #rotate-hint b {
    font-weight: 400;
    color: rgba(143, 180, 255, .95);
  }

  #rotate-hint a {
    pointer-events: auto;
    padding: 6px 16px;
    border: 1px solid rgba(143, 180, 255, .45);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
  }
}