/* O'YIN 1 — telefon portret/albom uchun to'liq ekran fit.
   Faqat #pageOyin1 ga ta'sir qiladi. Desktop/tablet qoidalari o'zgarmaydi. */
@media (max-width: 640px) {
  /* O'yin faol bo'lganda butun sahifa viewportdan oshmasin. */
  #pageOyin1.active:has(#o1-shell.o1-fit-screen) {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
  }

  #o1-shell.o1-fit-screen {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: max(4px, env(safe-area-inset-top)) 6px max(5px, env(safe-area-inset-bottom)) !important;
    overflow: hidden !important;
  }

  #o1-shell.o1-fit-screen .u1-app {
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }

  #o1-screen-game.u1-active {
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    flex-direction: column !important;
  }

  /* Yuqoridagi fixed boshqaruv tugmalari uchun juda kichik xavfsiz joy. */
  #pageOyin1 .o1-game-topbar {
    margin-top: 42px !important;
    margin-bottom: 4px !important;
    gap: 4px !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
  }

  #pageOyin1 .o1-tb-side .u1-icon-btn {
    width: 30px !important;
    height: 30px !important;
    border-radius: 9px !important;
    font-size: 13px !important;
  }

  #pageOyin1 .o1-tb-player {
    padding: 2px 5px !important;
    border-radius: 10px !important;
    gap: 3px !important;
  }

  #pageOyin1 .o1-tb-player-name {
    max-width: 8ch !important;
    font-size: 9px !important;
  }

  #pageOyin1 .o1-tb-player .u1-pill,
  #pageOyin1 .o1-tb-side-right .u1-pill {
    padding: 3px 5px !important;
    font-size: 9px !important;
    border-radius: 8px !important;
  }

  /* Asosiy javob maydoni — qolgan barcha balandlikni oladi. */
  #pageOyin1 .o1-game-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 5px !important;
    overflow: hidden !important;
  }

  #pageOyin1 .o1-game-body .o1-numbers-card {
    flex: 0 0 29% !important;
    max-width: 29% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 5px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #pageOyin1 .o1-num-line {
    font-size: clamp(13px, 4.1vw, 19px) !important;
    line-height: 1.05 !important;
    padding: 1px 0 !important;
  }

  #pageOyin1 .u1-shapes-panel {
    min-height: 0 !important;
    height: 100% !important;
    padding: 5px !important;
    border-radius: 14px !important;
    overflow: hidden !important;
  }

  #pageOyin1 .u1-shapes-title {
    font-size: 9px !important;
    margin-bottom: 2px !important;
    line-height: 1.1 !important;
  }

  #pageOyin1 .u1-shapes-grid {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 0 !important;
    overflow: hidden !important;
  }

  #pageOyin1 .u1-feedback {
    min-height: 16px !important;
    max-height: 20px !important;
    font-size: 9px !important;
    margin-top: 2px !important;
  }

  /* Portret telefon: ikkala ishtirokchi ham bitta viewport ichida.
     Ikki qism teng balandlikda bo'linadi, sahifa pastga ketmaydi. */
  #pageOyin1 .o1-multi-row.u1-active-flex {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  #pageOyin1 .o1-multi-col {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 2px !important;
    gap: 2px !important;
    overflow: hidden !important;
  }

  #pageOyin1 .o1-multi-body {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: hidden !important;
    gap: 5px !important;
  }

  #pageOyin1 .o1-multi-body .o1-numbers-card {
    flex: 0 0 29% !important;
    max-width: 29% !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 4px !important;
  }

  #pageOyin1 .o1-multi-body .u1-shapes-panel {
    min-height: 0 !important;
    height: 100% !important;
  }

  #pageOyin1 .o1-multi-body .u1-shapes-grid {
    min-height: 0 !important;
    height: auto !important;
    flex: 1 1 0 !important;
  }

  #pageOyin1 .o1-multi-divider {
    flex: 0 0 1px !important;
    height: 1px !important;
    margin: 1px 0 !important;
  }

  /* Faol o'yin paytida footer viewportni siqmasin. */
  #o1-shell.o1-fit-screen .o1-footer-nav {
    display: none !important;
  }

  /* Boshlash overlay ham viewport ichida qoladi. */
  #pageOyin1 .o1-play-overlay {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  #pageOyin1 .o1-hero-content {
    max-width: 92% !important;
    gap: 10px !important;
  }

  #pageOyin1 .o1-play-overlay-logo {
    width: clamp(125px, 40vw, 220px) !important;
    margin: 0 auto 8px !important;
  }

  #pageOyin1 .o1-play-overlay-btn {
    padding: 13px 28px !important;
    font-size: clamp(17px, 5vw, 24px) !important;
    gap: 8px !important;
  }
}

/* Juda kichik telefonlar (320–360px). */
@media (max-width: 380px) {
  #pageOyin1 .o1-game-topbar { margin-top: 40px !important; }
  #pageOyin1 .o1-tb-player-name { max-width: 6ch !important; font-size: 8px !important; }
  #pageOyin1 .o1-tb-player .u1-pill,
  #pageOyin1 .o1-tb-side-right .u1-pill { font-size: 8px !important; padding: 2px 4px !important; }
  #pageOyin1 .o1-game-body,
  #pageOyin1 .o1-multi-body { gap: 3px !important; }
  #pageOyin1 .o1-game-body .o1-numbers-card,
  #pageOyin1 .o1-multi-body .o1-numbers-card { flex-basis: 27% !important; max-width: 27% !important; padding: 3px !important; }
  #pageOyin1 .o1-num-line { font-size: 12px !important; }
  #pageOyin1 .u1-shapes-panel { padding: 3px !important; border-radius: 11px !important; }
  #pageOyin1 .u1-shapes-title { font-size: 8px !important; }
}

/* Telefon albom holati: mavjud landscape fit qoidalarini yanada qat'iylashtiradi. */
@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  #pageOyin1.active:has(#o1-shell.o1-fit-screen),
  #o1-shell.o1-fit-screen,
  #o1-shell.o1-fit-screen .u1-app { overflow: hidden !important; }
  #pageOyin1 .o1-game-topbar { margin-top: 40px !important; margin-bottom: 3px !important; }
  #pageOyin1 .o1-game-body { gap: 4px !important; }
  #pageOyin1 .o1-game-body .o1-numbers-card { flex-basis: 28% !important; max-width: 28% !important; }
  #pageOyin1 .u1-shapes-grid { min-height: 0 !important; }
  #pageOyin1 .o1-footer-nav { display:none !important; }
}