/* ============================================================
   Mobil enjamlar üçin uýgunlaşdyrmalar
   Bu faýl iň soňky ýüklenýär — şonuň üçin beýleki düzgünleri üstünden ýazýar.
   ============================================================ */

/* ---------- Umumy: barmak bilen rahat ulanmak ---------- */
@media (hover: none) and (pointer: coarse) {
  /* Basylanda çal gönüburçluk görünmesin */
  a, button, input, select, textarea, .square, .segment__btn {
    -webkit-tap-highlight-color: transparent;
  }
  /* Barmak üçin iň pes ölçeg — 44px (Apple-iň maslahaty) */
  .btn { min-height: 40px; }
  .btn--lg { min-height: 46px; }
  .btn--sm { min-height: 34px; }
  .icon-btn { width: 40px; height: 40px; }
  .icon-btn--sm { width: 34px; height: 34px; }
  .segment__btn { min-height: 36px; }
  .nav__link--drawer { min-height: 44px; }
  .table__actions .icon-btn { width: 36px; height: 36px; }
  .moves__move { min-height: 28px; }
  .puzzle-item { min-height: 48px; }
  /* Üstüne gelmek (hover) effektleri sensor ekranda gerek däl */
  .card--hover:hover { box-shadow: none; border-color: var(--border); }
  .feature:hover { box-shadow: none; }
  .square:hover:not(:disabled) .piece { transform: none; }
}

/* ---------- Planşet we kiçi noutbuklar ---------- */
@media (max-width: 860px) {
  :root { --header-h: 54px; }

  .section { padding-block: var(--space-6); }
  .section-head { margin-bottom: var(--space-4); }

  /* Gapdal panelleriň «ýelmeşmegi» kiçi ekranda päsgel berýär */
  .game-side, .admin-side { position: static; }
}

/* ---------- Telefonlar ---------- */
@media (max-width: 680px) {
  /* iOS Safari 16px-den kiçi meýdana basylanda sahypany ulaldýar.
     Şonuň üçin ähli giriş meýdanlary hut 16px bolmaly. */
  .input, .select, .textarea,
  input[type='text'], input[type='email'], input[type='tel'],
  input[type='number'], input[type='search'], input[type='password'],
  input[type='date'], input[type='time'], select, textarea {
    font-size: 16px;
  }

  .container { padding-inline: var(--space-4); }

  /* Statistika kartlary — telefonda iki sütün (bir sütün gaty uzyn bolýar) */
  .grid--4 { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .stat { padding: var(--space-3); }
  .stat__value { font-size: var(--fs-xl); }
  .stat__hint { display: none; }

  /* Ýokarky zolak — logotip we iki düwme */
  .brand__tagline { display: none; }
  .brand__mark { width: 30px; height: 30px; }
  .brand__name { font-size: var(--fs-base); }

  /* Segmentli saýlaýjylar gysylman, gapdala süýşýär */
  .segment {
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .segment::-webkit-scrollbar { display: none; }
  .segment__btn { flex: 0 0 auto; }

  /* Süzgüç paneli — her element aýry setirde.
     Ünsli: sütünli flex-de `flex-basis` BEÝIKLIGE degişli bolýar,
     şonuň üçin .search-iň `flex: 1 1 240px` düzgüni ýatyrylmaly. */
  .filters { flex-direction: column; align-items: stretch; }
  .filters .search { flex: 0 0 auto; width: 100%; min-width: 0; }
  .select--compact, .select--wide, .input--narrow { max-width: none; }
  .filters .select { width: 100%; }
  .filters__count { text-align: start; }

  /* Oýnuň dolandyryş düwmeleri — iki sütünli tor */
  #game-controls, #puzzle-controls {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  }
  #game-controls .btn, #puzzle-controls .btn { width: 100%; }

  /* Ädimleriň taryhy gaty uzyn bolmasyn */
  .moves { max-height: 180px; }
  .puzzle-list { max-height: 260px; }

  /* Modal — aşakdan açylýan «sheet» görnüşi */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    transform: translateY(100%);
  }
  .modal-overlay.is-open .modal { transform: none; }
  .modal__foot { padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom)); }
  .modal__body { -webkit-overflow-scrolling: touch; }

  /* Habarnamalar ekranyň aşagynda, howpsuz zolagy hasaba alyp */
  .toast-root {
    inset-inline: var(--space-3);
    inset-block-end: calc(var(--space-3) + env(safe-area-inset-bottom));
  }

  /* Tablisalar gapdala süýşýär — ulanyja yşarat berýäris */
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: '→';
    position: absolute; inset-block-start: 6px; inset-inline-end: 8px;
    font-size: var(--fs-xs); color: var(--text-muted); pointer-events: none;
  }

  /* Aşaky bölüm — iki sütün */
  .footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .footer__col--brand { grid-column: 1 / -1; }
  .footer__bottom { padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom)); }

  /* Kertikli telefonlarda gapdal boşluklar */
  .header__inner { padding-inline: max(var(--space-4), env(safe-area-inset-left)); }
}

/* ---------- Senenama: kiçi ekranda nokatly görnüş ---------- */
@media (max-width: 620px) {
  .calendar__day { min-height: 46px; padding: 3px; gap: 2px; align-items: center; }
  .calendar__daynum { font-size: 0.7rem; }
  /* Ýaryşyň ady ýerleşmeýär — onuň ýerine reňkli nokat görkezilýär.
     Güne basylanda şol günüň ýaryşlary penjirede açylýar. */
  .calendar__event {
    width: 6px; height: 6px; padding: 0; border-radius: 50%;
    font-size: 0; line-height: 0; overflow: hidden; text-indent: -999px;
  }
  .calendar__day > .muted { display: none; }
  .calendar__head { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  .calendar__nav { justify-content: space-between; }
  .calendar__dow { padding: var(--space-1); font-size: 0.625rem; }
}

/* ---------- Örän kiçi telefonlar (320–360px) ----------
   Bellik: 375px iň ýaýran iPhone ini — ol bu bölüme DÜŞMEÝÄR,
   şonuň üçin onda düwmeler iki sütünde galýar. */
@media (max-width: 360px) {
  :root { --fs-base: 0.8438rem; }
  .container { padding-inline: var(--space-3); }
  .hero { padding-block: var(--space-6); }
  .hero__stats { grid-template-columns: 1fr 1fr; }
  #game-controls, #puzzle-controls { grid-template-columns: 1fr; }
  .card__body, .panel { padding: var(--space-3); }
  .countdown__unit { min-width: 40px; }
  .player-bar { padding: var(--space-2) var(--space-3); gap: var(--space-2); }
  .clock { font-size: var(--fs-md); padding: 0.2rem 0.5rem; }
  .footer__inner { grid-template-columns: 1fr; }
}

/* ---------- Keseligine (landscape) telefon ---------- */
@media (max-height: 460px) and (orientation: landscape) {
  .header { position: static; }
  .hero { padding-block: var(--space-5); }
  .moves { max-height: 120px; }
}

/* ---------- Dolandyryş paneli (admin.html) ---------- */
@media (max-width: 860px) {
  .admin-shell { grid-template-columns: 1fr; }
  .admin-side {
    position: static; height: auto;
    flex-direction: column; align-items: stretch; gap: var(--space-3);
    border-inline-end: none;
    border-block-end: 2px solid var(--chrome-accent);
  }
  /* Bölümler gapdala süýşýän setir görnüşinde */
  .admin-nav {
    flex-direction: row; flex-wrap: nowrap;
    width: 100%; gap: var(--space-2);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
  }
  .admin-nav::-webkit-scrollbar { display: none; }
  .admin-nav__btn { flex: 0 0 auto; width: auto; min-height: 38px; white-space: nowrap; }
  .admin-side__foot { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .admin-side__foot .admin-user { flex: 1 1 160px; }
  .admin-side__foot .btn { flex: 0 0 auto; width: auto; }
  .admin-main { padding: var(--space-4); }
}

@media (max-width: 680px) {
  .admin-head { flex-direction: column; align-items: stretch; }
  .admin-head .cluster, .admin-head .btn { width: 100%; }
  .admin-toolbar { flex-direction: column; align-items: stretch; }
  .admin-toolbar .search, .admin-toolbar .select { max-width: none; width: 100%; }
  .login-screen { padding: var(--space-4); align-items: flex-start; padding-top: var(--space-7); }
  .login-card { padding: var(--space-4); }
}