/* ============================================================
   RESPONSIVE STYLES
   Media queries for different screen sizes
   ============================================================ */

/* Reel responsive */
@media (max-width:700px){ .reel{ padding:0 var(--space-8); } }
@media (max-width:700px){ .reel-headline{ font-size:var(--font-size-3xl); } }
@media (max-width:700px){ .reel-index{ left:30px; bottom:calc(var(--real-tab-bar-height, calc(var(--layout-tab-height) + env(safe-area-inset-bottom, 0px))) + var(--space-6)); } }

/* MOBILE FIX: Lower breakpoint for very narrow screens (360-390px) */
@media (max-width:380px) {
  .reel {
    padding:0 var(--space-6);
  }
  .reel-headline {
    font-size:var(--font-size-2xl);
  }
  .reel-index {
    left:24px;
    bottom:calc(var(--real-tab-bar-height, calc(var(--layout-tab-height) + env(safe-area-inset-bottom, 0px))) + var(--space-4));
    font-size:10px;
  }
}

/* Hook reel responsive */
@media (max-width:700px){ .reel.hook .hook-headline{ font-size:var(--font-size-5xl); } }

/* Tap reveal reel responsive */
@media (max-width:700px){ .reel.tap-reveal .tap-headline{ font-size:var(--font-size-4xl); } }

/* Quote reel responsive */
@media (max-width:700px){ .reel.quote .quote-text{ font-size:var(--font-size-3xl); } }

/* Formula breakdown reel responsive */
@media (max-width:700px){ .reel.formula-breakdown .formula-display{ font-size:var(--font-size-2xl); } }

/* Surprise reel responsive */
@media (max-width:700px){ .reel.surprise .surprise-hook{ font-size:var(--font-size-3xl); } }
@media (max-width:700px){ .reel.surprise .surprise-text{ font-size:var(--font-size-4xl); } }

/* Comparison reel responsive */
@media (max-width:600px){ .reel.before-after .comparison-container{ grid-template-columns:1fr; } }
@media (max-width:600px){ .reel.comparison .comparison-split{ grid-template-columns:1fr; } }
@media (max-width:600px){ .reel.comparison .vs-badge{ position:relative; top:auto; left:auto; transform:none; margin:var(--space-2) auto; } }

/* Story reel responsive */
@media (max-width:600px){ .reel.story{ grid-template-columns:1fr; } }

/* Puzzle reel responsive */
@media (max-width:600px){ .reel.puzzle .puzzle-options{ grid-template-columns:1fr; } }

/* Common mistake reel responsive */
@media (max-width:600px){ .reel.common-mistake .mistake-container{ grid-template-columns:1fr; } }

/* This or that reel responsive */
@media (max-width:600px){ .reel.this-or-that .tot-container{ grid-template-columns:1fr; } }

/* General responsive tweaks */
@media (max-width:600px){
  .msg{ max-width:90%; }
  .chat-header{ font-size:var(--font-size-base); padding:var(--space-3) var(--space-4); }
}

/* MOBILE FIX: Prevent sticky hover on touch devices - disable hover-only visual changes */
@media (hover: none) and (pointer: coarse) {
  /* Disable hover-triggered transforms/color changes that only make sense with a mouse */
  *:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  /* Add :active equivalents for interactive elements where hover was providing feedback */
  button:active,
  .btn-primary:active,
  .mode-btn:active,
  .tab-item:active,
  .saved-folder-card:active,
  .difficulty-option:active,
  .quiz-option:active,
  .decision-branch-btn:active,
  .game-choice:active {
    transform: scale(0.98);
    opacity: 0.8;
  }
}

/* MOBILE FIX: Mobile viewport height fallback for iOS/Android address bar bug */
#app {
  height: 100vh;   /* existing fallback - keep */
  height: 100dvh;  /* new: fixes iOS/Android address-bar jump */
}

/* .page height override removed - should use height:100% from layout.css to respect parent's tab bar padding */

#reelsContainer {
  height: 100vh;   /* existing fallback - keep */
  height: 100dvh;  /* new: fixes iOS/Android address-bar jump */
}

.reel {
  height: 100vh;   /* existing fallback - keep */
  height: 100dvh;  /* new: fixes iOS/Android address-bar jump */
  min-height: 100vh;   /* existing fallback - keep */
  min-height: 100dvh;  /* new: fixes iOS/Android address-bar jump */
}