/* rotate-lock.css — shared "turn your device" fallback.
   The app is locked to landscape via manifest.orientation, but that lock only
   applies to an *installed* PWA. A plain browser tab (not installed) still
   follows the physical device rotation, so a portrait visit would show the
   landscape-designed layout squished. This overlay blocks that case with a
   simple rotate prompt; self-contained colors so it works the same on the
   black flow.html stage as on the warm home/days pages. */

.rotate-overlay { display: none; }

@media (orientation: portrait) {
  .rotate-overlay {
    display: flex;
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; inset: 0;
    z-index: 99999;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #F7F1E6;
    font-family: 'Baloo 2', system-ui, sans-serif;
    text-align: center;
  }
  .rotate-overlay .rotate-icon {
    font-size: 3rem;
    line-height: 1;
    display: block;
    margin: 0 0 14px;
    animation: rotate-hint 1.6s ease-in-out infinite;
  }
  .rotate-overlay p {
    margin: 0;
    max-width: 26ch;
    font-weight: 700;
    font-size: 1.15rem;
    color: #44403C;
  }
  @keyframes rotate-hint {
    0%, 100% { transform: rotate(0deg); }
    50% { transform: rotate(-90deg); }
  }
  /* Escape hatch (rotate-lock.js): some devices never actually flip this
     media query (e.g. OS auto-rotate off + the manifest/JS lock didn't take)
     — without this, the prompt would be a dead end with no way to proceed. */
  .rotate-overlay .rotate-continue {
    margin-top: 20px;
    border: none;
    cursor: pointer;
    border-radius: 16px;
    padding: 10px 22px;
    background: transparent;
    font-family: inherit;
    font-weight: 600;
    font-size: .85rem;
    color: #7C746C;
    text-decoration: underline;
    -webkit-tap-highlight-color: transparent;
  }
}

/* Dismissed for this session (rotate-continue tapped) — always hidden,
   regardless of the orientation media query above. */
.rotate-overlay.is-dismissed { display: none !important; }