/* mobile.css — Mobile-specific overrides (max-width: 767px) */

@media (max-width: 767px) {

  /* Stack the arcade section to fill more of the screen */
  #arcade-section {
    padding: 0.25rem;
    align-items: flex-start;
  }

  /* Allow the container to be a bit taller on narrow screens */
  #arcade-container {
    max-width: 100%;
  }

  /* Slightly larger menu buttons on touch screens */
  .menu-btn {
    padding: 0.5em 0.8em;
    font-size: 0.7rem;
  }

  /* -------------------------------------------------------------------
     Mobile choice UI — stand-in until the cabinet-dashboard redesign.
     The desktop design layers two giant half-screen gradient overlays on
     top of the video. On a 393px phone that approach loses:
       - text doesn't fit the narrow halves cleanly
       - the urgent inset white glow can wash out the red completely
       - the hover-resets in @media (hover: none) below were nuking the
         gradient on touch (literal "red doesn't appear" bug)
       - it forces us to exit iOS fullscreen on choice arm, which pauses
         the video, and re-entering fullscreen on linkScene transitions
         renders the next clip in the top-left corner
     So on mobile we use a *pseudo-fullscreen*: a CSS-only fixed-position
     overlay (#screen-video.pseudo-fs) that fills the viewport without
     calling iOS's Fullscreen API. The choice buttons keep working because
     they're positioned within #screen-video — which is now the viewport.
     See _toggleFullscreen() in arcade.js. */

  .choice-button {
    /* Clear the half-screen positioning from the base rule */
    top: auto;
    bottom: 6px;
    width: 47%;
    height: auto;
    padding: 0.7em 0.5em;
    /* Solid cabinet-style chrome instead of half-screen gradient */
    background: rgba(0,0,0,0.72) !important;
    background-image: none !important;
    border: 2px solid;
    border-radius: 2px;
    /* Text size that fits comfortably with side-by-side layout */
    font-size: clamp(0.75rem, 2.6vw, 1.05rem);
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-shadow: 0 1px 2px rgba(0,0,0,0.9);
    /* Kill the soft throb — the buttons are clean & static */
    animation: none !important;
  }

  .choice-button--green {
    left: 2%;
    right: auto;
    border-color: rgba(0,220,0,0.9);
    color: rgba(220,255,220,0.98);
  }
  .choice-button--red {
    left: auto;
    right: 2%;
    border-color: rgba(230,80,80,0.95);
    color: rgba(255,210,210,0.98);
  }

  /* Urgent state: a subtle brightness pulse instead of the urgent inset
     white glow (which would wash out red on a small button). */
  .choice-button.urgent {
    animation: throb-mobile-urgent 0.4s ease-in-out infinite !important;
  }
  @keyframes throb-mobile-urgent {
    0%, 100% { filter: brightness(0.95); }
    50%      { filter: brightness(1.35); }
  }

  /* See pseudo-fullscreen rules below (outside the max-width media
     query, so they apply in landscape on a phone too — landscape phones
     are ~896px wide and would otherwise miss this block). */

  /* Ensure the unfilmed panels stack vertically if the screen is very narrow */
  @media (max-width: 380px) {
    #screen-unfilmed {
      flex-direction: column !important;
    }
    .unfilmed-panel {
      flex: none;
      height: 48%;
    }
  }

  /* In-video controls: keep all of them small & uniform on mobile.
     This must override the @media (hover: none) bump in arcade.css that
     otherwise makes them 14.4px on iPhone while #fullscreen-btn stayed
     at 0.75rem, causing the "fullscreen is small, everything else is huge"
     mismatch. */
  #video-back,
  #fullscreen-btn,
  .skip-btn,
  #btn-pause {
    font-size: 0.75rem;
    padding: 0.3em 0.4em;
  }

  /* Save section: column layout on small screens */
  #save-container p {
    flex-direction: column;
    gap: 0.4rem;
  }

  #load-code-form {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  #load-code-input {
    width: 100%;
    max-width: 280px;
  }

  /* Credits: tighter padding */
  #credits-section {
    padding: 2rem 1rem;
  }

  /* About text: larger on small screens so it fills the arcade screen */
  #about-text {
    font-size: clamp(0.85rem, 3.5vw, 1.2rem);
  }

  /* Mute button: smaller on mobile */
  #btn-mute {
    font-size: 0.6rem;
    padding: 0.3em 0.35em;
  }
}

/* ---------------------------------------------------------------------------
   Pseudo-fullscreen — fires on any touch device (phone portrait, phone
   landscape, iPad). The fullscreen button toggles the .pseudo-fs class
   on #screen-video and .pseudo-fs-active on <body>. CSS-only overlay
   that fills the viewport without invoking the iOS Fullscreen API.
   Scoped to (hover: none) so a narrow desktop window doesn't accidentally
   pick up the touch-device fullscreen behavior.
   --------------------------------------------------------------------------- */

@media (hover: none) {
  #screen-video.pseudo-fs {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;     /* dvh dodges iOS Safari URL-bar jump */
    z-index: 9999 !important;
    background: #000;
    display: flex !important;
    align-items: center;
    justify-content: center;
    /* pan-y lets vertical drag gestures on the overlay pass through to
       the body scroll. We need this because iOS Safari only auto-hides
       its address-bar chrome in response to a real user scroll — JS
       scroll doesn't trigger it. So the user does a small swipe-up on
       the overlay, body scrolls a bit, Safari hides the chrome, and the
       overlay stays fixed in the now-bigger viewport. */
    touch-action: pan-y;
  }

  #screen-video.pseudo-fs #video-main {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* While in pseudo-fs we leave the body unlocked so the user can
     swipe to hide the Safari chrome. Class kept as a hook for any
     future overlay-specific styling. */
  body.pseudo-fs-active {
    /* (intentionally empty — see comment above) */
  }
}

/* ---------------------------------------------------------------------------
   Touch-specific: remove hover effects that don't apply to touch
   --------------------------------------------------------------------------- */

@media (hover: none) {
  /* Strip stuck-hover styling on the menu buttons.
     Earlier this block also reset .choice-button hover state, but on iPad
     that fired after a tap and removed the gradient entirely (the "red
     doesn't appear" bug). The mobile choice rules above now style the
     buttons with solid borders + backgrounds, so a stuck hover is no
     longer visually destructive. */
  .menu-btn:hover {
    box-shadow: none;
    background: initial;
    color: initial;
  }

  .menu-btn:active {
    background: var(--color-lime);
    color: #000;
  }
}