/* Mobile-only overrides for Emotional Roulette
   - Do NOT edit the desktop stylesheet.
   - Include this file in your HTML with:
     <link rel="stylesheet" href="Games/Game 2/emotional-roulette.mobile.css" media="(max-width:768px)">
   - Or use media attribute (max-width:480px) if you want phone-only.
*/

/* Base mobile breakpoint (tablets + phones) */
@media (max-width:768px) {
  .game-wrapper{ padding:1.5rem !important; }

  .intro-card{ padding:2rem !important; border-radius:14px; }

  .game-title{ font-size:2.2rem !important; }

  .card-container{
    min-height:300px !important;
    margin-top:1.5rem !important;
    border-radius:18px !important;
  }

  .poem-layer{ padding:1.5rem !important; }

  .poem-text{
    font-size:1.1rem !important;
    line-height:1.6 !important;
    text-align:center !important;
  }

  /* Make the scratch canvas fill the card and be touch-friendly */
  .scratch-canvas{
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    border-radius:18px !important;
    cursor:auto !important;
    touch-action:manipulation; /* improve touch response */
  }

  .action-buttons{ gap:1rem !important; }

  .primary-btn{
    padding:.85rem 1.6rem !important;
    font-size:0.98rem !important;
    border-radius:10px !important;
  }

  .secondary-btn{
    padding:.55rem 1rem !important;
    border-radius:10px !important;
  }
}

/* Narrow phone breakpoint */
@media (max-width:480px) {
  .game-wrapper{ padding:1rem !important; }

  .intro-card{ padding:1.25rem !important; }

  .game-title{ font-size:1.8rem !important; }

  .card-container{ min-height:250px !important; margin-top:1rem !important; }

  .poem-layer{ padding:1rem !important; }

  .poem-text{ font-size:.95rem !important; line-height:1.5 !important; }

  .action-buttons{ flex-direction:column !important; gap:.8rem !important; }

  .primary-btn{ padding:.7rem 1.2rem !important; font-size:.95rem !important; }

  /* Larger touch target for interactive controls */
  button, .primary-btn, .secondary-btn{ min-height:40px !important; }
}