/* Διορθώσεις για μικρές οθόνες (κινητά). Φορτώνεται τελευταίο. */

/* Τα παράθυρα του παιχνιδιού χωράνε πάντα κάτω από το header και κυλάνε μέσα τους */
body .overlay:not(#authOverlay) > .card{max-height:calc(100dvh - 64px - 36px)}

@media (max-width:720px),(orientation:portrait){
  /* Header σε μία γραμμή */
  #pageHeader{gap:6px}
  #pageHeader .brand{display:none}
  #pageHeader .title{flex:1;min-width:0;text-align:left}
  #pageHeader .title h1{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #pageHeader .header-actions{flex:none;gap:5px;display:flex}
  #pageHeader .header-btn{padding:7px 9px;min-width:34px}
  #rrMapBtn .pb-label{display:none}

  /* Παράθυρα: λίγο περιθώριο, χωράνε στο ύψος */
  body .overlay:not(#authOverlay){padding:10px}
  body .overlay:not(#authOverlay) > .card{max-height:calc(100dvh - 56px - 20px);padding:16px 14px}
  .card h2{font-size:clamp(24px,7vw,34px)}

  /* Δικές μου διαδρομές: πλήρης οθόνη */
  .my-routes-dialog[open]{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}
  .my-routes-dialog .mr-head{padding:10px 12px}
  .my-routes-dialog .mr-head h2{font-size:19px}
  .my-routes-dialog .mr-head p{font-size:12px;margin:2px 0}
  .my-routes-dialog #mrClose{padding:8px 10px;min-height:40px;white-space:nowrap}

  /* Λογαριασμός/Premium */
  #authOverlay{padding:10px}
  .auth-card{max-height:calc(100dvh - 20px)}
}
@media (max-width:420px){
  #pageHeader .title h1{font-size:15px}
}
/* Χαμηλές οθόνες: μικρότερη εικόνα στην κάρτα «Μπράβο» */
@media (max-height:760px){
  .result-image{width:150px!important;height:150px!important;font-size:90px!important}
}
@media (max-height:620px){
  .result-image{width:120px!important;height:120px!important;font-size:72px!important}
}