/*
 * SpeechGenie — portrait "turn your phone sideways" hint.
 *
 * The UI is authored landscape (1920x1080 reference). Held upright, a
 * landscape-authored UI is squeezed into a tall narrow frame and elements
 * overlap, clip and run off-screen — so landscape is the better experience.
 *
 * This is NOT a text-size fix. With MatchWidthOrHeight 0.5 the CanvasScaler
 * uses the geometric mean of both axes, so portrait and landscape on the same
 * phone give an identical scale factor — rotating changes the layout's shape,
 * not the size of the text. Text size is a separate job.
 *
 * ADVISORY, NOT A GATE. The first version of this was a hard, choiceless cover
 * drawn with body::before/::after, and while iOS 26 landscape input was broken
 * that cover pushed users out of the one orientation that worked and locked
 * them out (SPEC-hold-b1-gate-ship-b2-only.md). It is now a dismissible hint
 * with a "Continue anyway" button, so portrait is always reachable. An
 * interactive button needs real DOM, so the markup is mounted by
 * sg-orientation.js and only styled here.
 *
 * Visibility is guarded twice on purpose:
 *   * the media query below — orientation/viewport, no JS involved;
 *   * the [hidden] attribute, which sg-orientation.js owns — dismissal.
 * Either one alone is enough to keep the hint off the screen, so a stalled or
 * absent script cannot leave a cover over the game.
 *
 * Scoped so nothing here can collide with Unity's TemplateData/style.css.
 * Copied into the build root by Assets/Editor/OrientationPostProcess.cs.
 */

/*
 * Off by default: desktop, landscape, and every viewport wider than the query
 * below never render it, whatever the script does.
 */
.sg-orient {
  display: none;
}

/*
 * Shown only on a small viewport held upright. The max-width guard keeps this
 * away from portrait-ish desktop windows.
 *
 * Note the query resolves against the *iframe's own box* when embedded, not
 * against the device — which is what we want: the /full-demo/ embed is
 * aspect-ratio 16/10, so inside that iframe the viewport is landscape and this
 * never matches.
 */
@media (orientation: portrait) and (max-width: 900px) {
  .sg-orient {
    display: flex;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2147483000; /* above the canvas and the audio-preflight overlay (z 40/50) */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: calc(1.5rem + env(safe-area-inset-top))
             calc(1.5rem + env(safe-area-inset-right))
             calc(1.5rem + env(safe-area-inset-bottom))
             calc(1.5rem + env(safe-area-inset-left));
    background-color: #1e3a5f; /* opaque: the game keeps running underneath, unseen */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-user-select: none;
    user-select: none;
    /*
     * Pointer events are deliberately NOT disabled — while this is up, taps must
     * not reach the canvas and drive a layout the user cannot see. Every tap
     * lands here and dismisses (see sg-orientation.js).
     */
    touch-action: manipulation;
  }
}

/*
 * Dismissed. Declared outside the media query and with !important so it beats
 * the display:flex above: once the user has said "continue", nothing may put
 * this back over the canvas.
 */
.sg-orient[hidden] {
  display: none !important;
}

.sg-orient__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 22rem;
  text-align: center;
}

/* Portrait phone (dimmed) → arrow → landscape phone (gold). */
.sg-orient__icon {
  width: 148px;
  height: 70px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 98 46' fill='none' stroke='%23e9a83a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='2' width='24' height='42' rx='4' stroke='%23f9f6f2' opacity='.35'/%3E%3Cpath d='M36 23h20'/%3E%3Cpolyline points='50 17 56 23 50 29'/%3E%3Crect x='64' y='12' width='30' height='22' rx='4'/%3E%3C/svg%3E");
}

.sg-orient__title {
  margin: 0;
  font-size: clamp(1rem, 4.6vw, 1.375rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #f9f6f2;
}

/* Gold on navy — the brand's primary action pairing. */
.sg-orient__btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  min-height: 44px; /* iOS minimum comfortable tap target */
  padding: 0.75rem 1.5rem;
  border-radius: 12px;
  background: #e9a83a;
  color: #1e3a5f;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  touch-action: manipulation;
  transition: transform 0.06s ease, background-color 0.15s ease;
}

.sg-orient__btn:active {
  transform: scale(0.97);
  background: #d6962c;
}

.sg-orient__btn:focus-visible {
  outline: 2px solid #f9f6f2;
  outline-offset: 3px;
}