@import url('/fabraka-final-v2.css?v=330-final2');

/* Top10 mobile setup containment — production r6
   This layer deliberately outranks the dynamically appended modern UI sheets.
   The setup shell must size from the viewport, not from desktop intrinsic grid tracks. */
@media (max-width: 760px) {
  html,
  body.top10-v320 {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  /* The desktop Top10 lockup is wider than a 320–430px phone header. Keep the
     real logo intact and turn secondary controls into fixed touch targets so
     Arabic/Latin letters can never collapse into vertical strips. */
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-nav {
    width: calc(100% - 14px) !important;
    max-width: calc(100% - 14px) !important;
    min-height: 62px !important;
    height: auto !important;
    margin: 7px auto 0 !important;
    padding: 7px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-brand {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 112px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-brand .game-brand-logo {
    display: block !important;
    width: clamp(76px, 27vw, 102px) !important;
    min-width: 76px !important;
    max-width: 102px !important;
    height: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: center !important;
    writing-mode: horizontal-tb !important;
  }

  /* The SVG already contains the Top10 wordmark. Hide the duplicated textual
     lockup in the compact nav; the full Arabic game identity stays visible in
     the page hero and remains available to assistive tech through aria-label. */
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-brand > span {
    display: none !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-nav-actions {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 5px !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-nav-actions .access-badge {
    display: none !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-nav-actions :is(.icon-action,.nav-home) {
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center !important;
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    overflow: hidden !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-nav-actions .nav-home {
    font-size: 0 !important;
    text-decoration: none !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] .t10-nav-actions .nav-home::before {
    content: "⌂" !important;
    display: block !important;
    font-size: 21px !important;
    line-height: 1 !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app.t10-shell {
    width: calc(100vw - 14px) !important;
    inline-size: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    max-inline-size: calc(100vw - 14px) !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app.t10-shell > #setupView.setup-view {
    width: calc(100vw - 14px) !important;
    inline-size: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    max-inline-size: calc(100vw - 14px) !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupView.setup-view > .setup-hero,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupView.setup-view > #setupForm.setup-grid,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupView.setup-view > #setupForm.setup-grid > .setup-card {
    width: calc(100vw - 14px) !important;
    inline-size: calc(100vw - 14px) !important;
    max-width: calc(100vw - 14px) !important;
    max-inline-size: calc(100vw - 14px) !important;
    min-width: 0 !important;
    min-inline-size: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupView.setup-view > .setup-hero,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupView.setup-view > #setupForm.setup-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    overflow-x: clip !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupView .setup-hero > *,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .setup-card > *,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .section-title,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .section-title > div,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .team-name-fields,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .round-options,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .timer-options,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .segmented,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .category-setup-tools,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .categories-grid,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .content-pack-row {
    min-width: 0 !important;
    min-inline-size: 0 !important;
    max-width: 100% !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupView .setup-hero > * {
    width: 100% !important;
    inline-size: 100% !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .section-title {
    width: 100% !important;
    inline-size: 100% !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .round-options {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .round-option,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .timer-options button,
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .segmented button {
    min-width: 0 !important;
    min-inline-size: 0 !important;
  }

  /* Ready-made content packs stay wide enough to read instead of collapsing
     into vertical Arabic letter strips on 320–430px phones. */
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .content-pack-row {
    display: flex !important;
    width: 100% !important;
    inline-size: 100% !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    padding-block: 4px 8px !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .content-pack-chip {
    flex: 0 0 clamp(124px, 43vw, 172px) !important;
    min-width: 124px !important;
    min-inline-size: 124px !important;
    max-width: 172px !important;
    max-inline-size: 172px !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    line-height: 1.35 !important;
    scroll-snap-align: start;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .content-pack-chip b {
    min-width: 0 !important;
    line-height: 1.35 !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .content-pack-chip small {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

@media (max-width: 430px) {
  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .categories-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .final-music-option {
    align-items: flex-start !important;
    gap: 9px !important;
    line-height: 1.45 !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .final-music-option input {
    flex: 0 0 20px !important;
    margin-top: 2px !important;
  }

  :root[data-ui-mode="modern"] body.top10-v320[data-game-brand="top10"] #app #setupForm .final-music-option span {
    min-width: 0 !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}