/* Mobile Responsive Styles */
/* Mobile Responsive Styles */
/* NEW MOBILES*/
@media screen and (max-width: 768px) {
  /* ===== BASE LAYOUT ADJUSTMENTS ===== */
  body {
    overflow-x: hidden;
  }

  /* ===== NAVBAR ADJUSTMENTS ===== */
  nav {
    padding: 15px 10px;
    font-size: 16px;
  }

  nav a {
    margin: 0 10px;
    font-size: 18px;
  }

  nav2 {
    padding: 35px;
  }

  /* ===== GRID ADJUSTMENTS ===== */
  #grid-title {
    margin-top: 90px;
    font-size: 26px;
  }

  .grid-container {
    margin-top: 10px;
    width: 100%;
  }

  .grid {
    grid-template-columns: repeat(5, 75px);
    grid-template-rows: repeat(4, 75px);
    gap: 2px;
  }

  .grid-item {
    width: 75px;
    height: 75px;
  }

  /* ===== HEADER IMAGES & TEXT ADJUSTMENTS ===== */
  .rank-image{
    max-width: 90%;
    max-height: 90%;
  }

  .column-image,
  .row-image {
    max-width: 60%;
    max-height: 60%;
  }

  .header-text {
    font-size: 11px;
    margin-top: 1px;
    width: 100%;
    font-weight: bold;
  }

  .grid-header {
    padding: 0px;
  }


  .FF-button-container {
    margin-top: 5px;
  }
  
  #forfeit{
    font-size: 17px;
    padding: 0px;
  }

  #refresh {
    font-size: 17px;
    padding: 0px;
  }


  .FF-button-container button {
    width: 40px;
    height: 40px;
  }

  #submit-answer {
    display: none; /* Hidden on mobile */
  }

  
  #answer-modal .modal-content {
    min-width: auto;
    width: 100%; /* Increase from 60% to 80% */
    max-width: 400px; /* Increase from 300px to 400px */
    transform: scale(0.9); /* Change from 0.55 to 0.8 */
    margin-top: -50px;
  }


  
  /* ===== TOOLTIP ADJUSTMENTS ===== */
  .tooltip {
    max-width: 280px;
    min-width: 200px;
    margin-top: -100px;
  }

  .tooltip-title {
    font-size: 14px;
    padding: 8px 12px;
  }

  .tooltip-image img {
    width: 80px;
    height: 120px;
  }

  .tooltip-text {
    font-size: 12px;
  }

  /* ===== MODAL ADJUSTMENTS ===== */

  .modal,
  #game-over-modal,
  #win-modal,
  #solutions-modal,
  #ff15-modal {
    padding-top: 40px;
    align-items: center;
  }

  /* ===== WELCOME MODAL SPECIFIC ADJUSTMENTS ===== */
  .modal-content {
    min-width: auto;
    width: 60%;
    max-width: 300px;
    padding: 15px;
    transform: scale(0.55);
    margin-top: -100px;
  }

  #welcomeModal {
    margin-top: -150px;
  }

  /* ===== OTHER MODALS ===== */
  .ffmodal-content,
  .ff15modal-content,
  .solutions-modal-content {
    min-width: auto;
    width: 90%;
    max-width: 320px;
    padding: 15px;
    margin-top: -100px;
  }

  #modal-instruction {
    font-size: 20px;
    margin-top: 3px;
  }

  #modal-cats {
    font-size: 12px;
    margin-bottom: 20px;
  }

  /* ===== INPUT ADJUSTMENTS ===== */
  #user-answer {
    width: 100%;
    max-width: 400px;
    font-size: 20px;
    height: 45px;
  }

  /* ===== RESULTS DROPDOWN ADJUSTMENTS ===== */
  .results {
    max-width: 400px;
  }

  .results li {
    padding: 6px 8px;
    font-size: 14px;
  }

  /* ===== BUTTON ADJUSTMENTS ===== */
  button {
    width: 75px;
    height: 45px;
    font-size: 14px;
  }

  /* ===== FF15 MODAL ADJUSTMENTS ===== */
  .ff15modal-content h3 {
    font-size: 20px;
  }

  .ff15modal-content p {
    font-size: 12px;
    max-width: 280px;
  }

  .ff15modal-buttons {
    gap: 15px;
  }

  #ff15-cancel-btn,
  #ff15-confirm-btn {
    font-size: 16px;
    padding: 8px 12px;
  }

  /* ===== GAME OVER / WIN MODAL ADJUSTMENTS ===== */
  .ffmodal-content h3 {
    font-size: 20px;
  }

  .ffmodal-content p {
    font-size: 12px;
  }

  .ffmodal-buttons {
    gap: 15px;
  }

  #continue-btn, 
  #continue-win-btn,
  #reveal-btn {
    height: 50px;
    width: 100px;
    font-size: 14px;
    justify-content: center;
    text-align: center;
    display: flex;
    justify-content: center;

  }

  /* ===== SOLUTIONS MODAL ADJUSTMENTS ===== */
  #solutions-modal-instruction {
    font-size: 20px;
  }

  #solutions-modal-cats {
    font-size: 12px;
    margin-bottom: 20px;
  }

  #solutions-dropdown {
    width: 280px;
    max-height: 300px;
    font-size: 14px;
  }

  #solutions-dropdown li {
    padding: 6px 8px;
  }

  #solutions-dropdown .solution-name {
    font-size: 14px;
    margin-left: 8px;
  }

  /* ===== STATS DISPLAY ADJUSTMENTS ===== */
  #stats-box {
    width: 90%;
    max-width: 320px;
    height: 80px;
    margin: -30px auto 20px;
  }

  .sub-box {
    padding: 10px;
    margin: 0 5px;
  }

  #lives-display {
    font-size: 20px;
  }

  #score {
    font-size: 24px;
  }

  /* ===== SECONDARY GRID STYLING ===== */
  #second-grid-title {
    font-size: 24px;
    margin-top: 90px;
    margin-bottom: -30px;
  }

  #solutions-container {
    font-size: 24px;
    margin-top: 90px;
  }

  #second-grid-container {
    margin-top: 90px;
  }

  /* ===== YOUR CUSTOM MODAL STYLES ===== */
  .modal {
    padding-top: 50px;
  }

  #modal-instruction {
    font-size: 20px;
  }

  .rule-container {
    margin-top: 12px;
    width: 95%;
  }

  .rule-title {
    font-size: 15px;
  }

  .rule-description {
    font-size: 12px;
  }

  .start-button {
    padding: 16px 16px;
    font-size: 30px;
    margin-top: 20px;
    width: 100px;
    height: 60px;
  }
  .countdown {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
    color: #C8AA6E;
}

}


/* Fix for device orientation changes */
@media screen and (orientation: landscape) and (max-height: 500px) {
  .modal,
  #game-over-modal,
  #win-modal,
  #solutions-modal,
  #ff15-modal {
    padding-top: 10px;
    overflow-y: auto;
  }

  #grid-title {
    margin-top: 70px;
  }

  nav {
    padding: 10px;
  }

  nav2 {
    padding: 25px;
  }
  
  .modal-content {
    transform: scale(0.75);
  }
}

/* Ensure original animations are preserved */
@keyframes fadeInZoom {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 0;
    transform: scale(0.7);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes zoomOut {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}