/* =========================
   MOBIL NÉZET (max 899px)
   ========================= */

@media (max-width: 899px){

  /* MOBIL: TOPBAR – ne legyen 2 sor, de ne csússzon el */
  .topbar{
    padding: calc(10px + var(--safeTop)) 12px 10px;
    gap:10px;
  }

  .brand{min-width:0}
  .brand-title{font-size:15px}
  .brand-sub{ display:none !important; }

  /* Gombsor: egy sor, nincs törés */
  .topbar-actions{
    flex-wrap:nowrap !important;
    gap:10px; /* kicsit nagyobb távolság */
    min-width:0;
  }

  /* ✅ MOBIL: FELSŐ MENÜ GOMBOK (NAGYOBB IKON + NAGYOBB ÉRINTÉSI FELÜLET) */
  .topbar-actions .btn{
    width: 52px;              /* fix, egységes ikon gomb */
    height: 52px;             /* nagyobb gomb */
    padding: 0 !important;    /* ne legyen széthúzva */
    gap: 0;
    flex: 0 0 auto;           /* ne nyúljon szét */
    border-radius: 16px;
    justify-content: center;
    align-items: center;
  }

  .topbar-actions .btn .icon{
    font-size: 22px;          /* nagyobb ikon */
    line-height: 1;
  }

  .topbar-actions .btn .label{
    display:none !important;
  }

  /* MOBIL: MAIN – egy oszlop */
  .main{
    grid-template-columns: 1fr;
    max-width: 100%;
    padding-bottom: calc(var(--mobileNavH) + 14px + var(--safeBot));
  }
  .side-col{display:none}

  /* MOBIL: PÁLYA */
  .canvas-wrap{
    padding: 10px;
  }

  #game{
    max-height: calc(100svh - 260px);
    max-width: 100%;
    width:auto;
    height:auto;
  }
  

  /* MOBIL: stat / next / hold blokk */
  .mobile-stats{display:block}

  .stat-row{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:8px;
  }

  .mobile-stats .stat{
    padding:8px;
    border-radius:14px;
  }
  .mobile-stats .stat-label{font-size:11px}
  .mobile-stats .stat-value{font-size:18px; margin-top:2px}

  .mini-panels{
    margin-top:10px;
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:8px;
  }
  .mini-panel{
    border-radius: var(--r);
    border:1px solid rgba(27,31,63,.85);
    background: linear-gradient(180deg, rgba(15,17,38,.92), rgba(9,10,22,.90));
    box-shadow: 0 14px 36px rgba(0,0,0,.30);
    padding: 10px;
    overflow:hidden;
    min-width:0;
  }
  .mini-title{
    font-weight:900;
    margin-bottom:8px;
    font-size:13px;
  }

  .mini-next{display:flex; gap:8px}
  .mini-next .mini{
    width: 40px;
    max-width: 40px;
    height:auto;
    border-radius:12px;
  }

  .mini.hold{
    width: 40px;
    height: 40px;
  }
  .mini-hint{
    margin-top:6px;
    font-size:11px;
  }

  /* MOBIL: Alsó vezérlők */
  .mobile-controls{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 10px calc(10px + var(--safeBot));
    background: linear-gradient(180deg, rgba(15,17,38,.65), rgba(9,10,22,.92));
    border-top: 1px solid rgba(27,31,63,.75);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap:10px;
    z-index: 900;
    backdrop-filter: blur(10px);
  }

  .mbtn{
    appearance:none;
    border:1px solid rgba(27,31,63,.9);
    background: rgba(7,7,20,.55);
    color:var(--text);
    border-radius: 18px;
    height: 64px;
    font-weight: 900;
    font-size: 18px;
    cursor:pointer;
    user-select:none;
    box-shadow: 0 12px 26px rgba(0,0,0,.30);
  }
  .mbtn:active{transform: translateY(1px)}

  .mbtn-accent{
    border-color: rgba(0,229,255,.35);
    background: linear-gradient(180deg, rgba(0,229,255,.16), rgba(7,7,20,.55));
    box-shadow: 0 14px 30px rgba(0,229,255,.10);
  }

  /* Mobil Szünet gomb elrejtése */
  #mPause{ display:none !important; }

  /* Modal mobilon: 1 oszlop */
  .form-grid{grid-template-columns: 1fr}
  .readme{max-height: 56vh}
}

/* MOBIL: Rangsor (modalScores) – lista görgethető legyen */
@media (max-width: 899px){
  #modalScores{
    align-items: stretch; /* a modal-content tudjon magas lenni */
  }

  #modalScores .modal-content{
    height: auto;
    max-height: 92svh;    /* teljes modál max magassága mobilon */
    overflow: hidden;     /* ne a content scrollozzon */
    display: flex;
    flex-direction: column;
  }

  /* fej rész marad fent, a body legyen görgethető */
  #modalScores .modal-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* maga a lista is görgethető (biztos ami biztos) */
  #scoresList{
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

   /* MOBIL: Beállítások (modalSettings) – görgethető legyen */
@media (max-width: 899px){
  #modalSettings{
    align-items: stretch; /* engedjük, hogy magas legyen */
  }

  #modalSettings .modal-content{
    height: auto;
    max-height: 92svh;     /* teljes modál magasság mobilon */
    overflow: hidden;     /* ne itt scrollozzon */
    display: flex;
    flex-direction: column;
  }

  /* fejléc marad fent, a tartalom görgethető */
  #modalSettings .modal-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}