.landscape-gate { display: none; }

@media (orientation: portrait) and (max-width: 1024px) {
  html, body { min-height: 100%; }
  body { overflow: hidden; }
  .landscape-gate {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: #070d1f;
    color: #fff;
    text-align: center;
  }
  .landscape-gate-content { max-width: 320px; }
  .landscape-gate h1 { margin: 24px 0 10px; font-size: 28px; }
  .landscape-gate p { margin: 0 0 24px; color: #c8d7ee; line-height: 1.5; }
  .landscape-gate button {
    min-height: 48px;
    padding: 0 22px;
    border: 0;
    border-radius: 8px;
    background: #f1bf55;
    color: #0b1428;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
  }
  .landscape-gate button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
  .landscape-gate button[hidden] { display: none; }
  .landscape-phone {
    display: block;
    width: 56px;
    height: 94px;
    margin: auto;
    border: 4px solid #f1bf55;
    border-radius: 12px;
    transform: rotate(90deg);
  }
  .landscape-phone span { display: block; margin: 7px; height: calc(100% - 14px); background: #172b4d; border-radius: 4px; }
}