/* V110 — dedicated Career Bridge mobile interaction layout. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden !important; }
  body { min-height: 100dvh !important; }

  #root .app-shell {
    width: calc(100% - 8px) !important;
    margin: 4px auto 14px !important;
  }

  #root .topbar {
    top: 4px !important;
    min-height: 54px !important;
    padding: 6px 7px 6px 54px !important;
    border-radius: 14px !important;
  }
  #root .brand { gap: 7px !important; min-width: 0 !important; }
  #root .brand img { width: 32px !important; height: 32px !important; }
  #root .brand strong { font-size: 13px !important; white-space: nowrap !important; }
  #root .brand span { display: none !important; }
  #root .topnav { gap: 4px !important; }
  #root .topnav button { min-height: 34px !important; height: 34px !important; padding: 0 8px !important; border-radius: 9px !important; }
  #kkLangSwitch { height: 34px !important; padding: 3px !important; gap: 3px !important; border-radius: 9px !important; }
  #kkLangSwitch button { width: 32px !important; min-width: 32px !important; height: 28px !important; padding: 0 6px !important; }
  #kkLangSwitch .flag { width: 17px !important; height: 17px !important; flex-basis: 17px !important; }
  #kkLangSwitch .flag svg { width: 17px !important; height: 17px !important; }
  .portal-home-button { top: 11px !important; left: 10px !important; width: 36px !important; height: 36px !important; padding: 0 !important; justify-content: center !important; border-radius: 11px !important; }
  .portal-home-button span { display: none !important; }

  #root .main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 7px !important;
    margin-top: 7px !important;
  }
  #root .game-card { order: 1 !important; width: 100% !important; min-width: 0 !important; }
  #root .side-stack { order: 2 !important; width: 100% !important; }

  /* Setup intro becomes a concise mobile status header. */
  #root .setup-showcase {
    min-height: 0 !important;
    padding: 11px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
    border-radius: 17px !important;
  }
  #root .setup-showcase__visual { display: none !important; }
  #root .setup-showcase__copy { padding: 0 !important; }
  #root .setup-showcase__copy > span { font-size: 7px !important; }
  #root .setup-showcase__copy > strong { margin-top: 3px !important; font-size: 16px !important; line-height: 1.15 !important; }
  #root .setup-showcase__copy > small { margin-top: 4px !important; font-size: 9px !important; line-height: 1.35 !important; }
  #root .setup-showcase__stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  #root .setup-showcase__stats span { min-height: 42px !important; padding: 6px !important; border-radius: 10px !important; }
  #root .setup-showcase__stats small { font-size: 6px !important; }
  #root .setup-showcase__stats b { font-size: 9px !important; line-height: 1.15 !important; }

  /* All three modes remain visible at once instead of becoming a long vertical list. */
  #root .mode-switch--three {
    position: sticky !important;
    top: 63px !important;
    z-index: 24 !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 5px !important;
    margin: 6px 0 !important;
    padding: 5px !important;
    border-radius: 14px !important;
  }
  #root .mode-switch--three button {
    min-width: 0 !important;
    min-height: 62px !important;
    padding: 6px 4px !important;
    gap: 4px !important;
    flex-direction: column !important;
    justify-content: center !important;
    border-radius: 11px !important;
  }
  #root .mode-switch--three button > span { width: 27px !important; height: 27px !important; border-radius: 8px !important; font-size: 13px !important; }
  #root .mode-switch--three button > div { min-width: 0 !important; text-align: center !important; }
  #root .mode-switch--three button b { display: block !important; font-size: 9px !important; line-height: 1.12 !important; white-space: normal !important; }
  #root .mode-switch--three button small { display: none !important; }

  #root .solo-settings {
    min-height: 0 !important;
    margin: 0 0 6px !important;
    padding: 8px !important;
    gap: 7px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    border-radius: 14px !important;
  }
  #root .solo-settings > div:first-child span { font-size: 7px !important; }
  #root .solo-settings > div:first-child b { font-size: 9px !important; line-height: 1.2 !important; }
  #root .difficulty-tabs { gap: 3px !important; padding: 3px !important; }
  #root .difficulty-tabs button { min-width: 42px !important; height: 32px !important; padding: 0 6px !important; font-size: 9px !important; }

  #root .match-settings {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    margin-bottom: 7px !important;
    padding: 6px !important;
    border-radius: 15px !important;
  }
  #root .match-settings__group {
    min-width: 0 !important;
    min-height: 96px !important;
    padding: 9px 7px !important;
    border-radius: 12px !important;
  }
  #root .match-settings__group::before { display: none !important; }
  #root .match-settings__group > div:first-child { margin: 0 !important; }
  #root .match-settings__group > div:first-child span { font-size: 7px !important; }
  #root .match-settings__group > div:first-child b { display: block !important; min-height: 24px !important; font-size: 9px !important; line-height: 1.2 !important; }
  #root .setting-tabs {
    display: grid !important;
    margin: 5px 0 0 !important;
    padding: 3px !important;
    gap: 3px !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  #root .setting-tabs button { min-width: 0 !important; height: 31px !important; padding: 0 2px !important; font-size: 8px !important; border-radius: 7px !important; }

  /* Team selection uses both screen columns, reducing the old long vertical journey. */
  #root .players-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    min-height: 0 !important;
    padding: 6px !important;
    border-radius: 16px !important;
    overflow: visible !important;
  }
  #root .players-grid > .versus { display: none !important; }
  #root .player-card {
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 7px !important;
    border-radius: 13px !important;
  }
  #root .player-card__head { min-height: 30px !important; margin-bottom: 6px !important; gap: 4px !important; }
  #root .player-label { min-width: 0 !important; font-size: 8px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #root .score-chip { gap: 3px !important; }
  #root .score-chip span { display: none !important; }
  #root .score-chip strong { width: 28px !important; min-width: 28px !important; height: 28px !important; font-size: 13px !important; }
  #root .club-search {
    min-height: 52px !important;
    padding: 5px !important;
    gap: 4px !important;
    grid-template-columns: 34px minmax(0, 1fr) 22px !important;
    border-radius: 11px !important;
  }
  #root .club-search .club-badge { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
  #root .club-search input { min-width: 0 !important; min-height: 40px !important; padding: 0 4px !important; font-size: 10px !important; line-height: 1.15 !important; }
  #root .club-search .search-icon { width: 21px !important; height: 21px !important; font-size: 11px !important; }
  #root .club-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 3px !important;
    margin-top: 5px !important;
  }
  #root .club-summary > div { min-width: 0 !important; min-height: 42px !important; padding: 5px 4px !important; border-radius: 9px !important; }
  #root .club-summary span { font-size: 6px !important; }
  #root .club-summary b { font-size: 7px !important; line-height: 1.15 !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #root .role-card { min-height: 40px !important; margin-top: 5px !important; padding: 6px !important; border-radius: 10px !important; }
  #root .role-card span { font-size: 6px !important; }
  #root .role-card strong { font-size: 8px !important; }
  #root .role-code { width: 27px !important; height: 27px !important; min-width: 27px !important; }
  #root .hidden-selection-note { grid-template-columns: 22px minmax(0, 1fr) !important; padding: 5px !important; gap: 4px !important; }
  #root .hidden-selection-note > span { width: 22px !important; height: 22px !important; }
  #root .hidden-selection-note small { display: none !important; }

  #root .game-actions {
    position: sticky !important;
    bottom: max(4px, env(safe-area-inset-bottom)) !important;
    z-index: 22 !important;
    min-height: 0 !important;
    margin-top: 6px !important;
    padding: 6px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    border-radius: 14px !important;
    background: rgba(239, 247, 242, .96) !important;
    box-shadow: 0 12px 34px rgba(12, 48, 31, .24) !important;
  }
  #root .game-actions .btn { width: auto !important; min-width: 0 !important; min-height: 42px !important; flex: 1 1 30% !important; padding: 0 7px !important; font-size: 9px !important; border-radius: 10px !important; }
  #root .game-actions .btn--large { flex-basis: 40% !important; }

  /* Search results open as an accessible sheet beneath the fixed header. */
  #root .search-menu {
    position: fixed !important;
    z-index: 100000 !important;
    top: 64px !important;
    left: 7px !important;
    right: 7px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-height: none !important;
    overflow: auto !important;
    border-radius: 16px !important;
    padding: 8px !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.36) !important;
  }
  #root .search-menu__caption { position: sticky !important; top: -8px !important; z-index: 2 !important; padding: 9px !important; background: #f7fbf8 !important; }
  #root .search-menu button { min-height: 54px !important; padding: 7px !important; }

  /* Match screen prioritises the answer area; nonessential right rail is removed on phone. */
  #root .app-shell.is-match-started .side-stack { display: none !important; }
  #root .app-shell.is-match-started .main-grid { display: block !important; margin-top: 6px !important; }
  #root .app-shell.is-match-started .round-arena { margin-top: 6px !important; border-radius: 16px !important; }
  #root .app-shell.is-match-started .round-scoreboard {
    min-height: 84px !important;
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr) !important;
    gap: 5px !important;
    padding: 7px !important;
  }
  #root .app-shell.is-match-started .round-team { min-width: 0 !important; min-height: 66px !important; padding: 5px !important; gap: 5px !important; }
  #root .app-shell.is-match-started .round-team .club-badge--lg { width: 38px !important; height: 38px !important; border-radius: 11px !important; }
  #root .app-shell.is-match-started .round-team b { max-width: 100% !important; font-size: 10px !important; line-height: 1.12 !important; }
  #root .app-shell.is-match-started .round-team span { font-size: 6px !important; }
  #root .app-shell.is-match-started .timer-ring { width: 50px !important; height: 50px !important; border-width: 4px !important; }
  #root .app-shell.is-match-started .timer-ring strong { font-size: 18px !important; }
  #root .app-shell.is-match-started .timer-ring span { font-size: 6px !important; }
  #root .app-shell.is-match-started .round-content { padding: 8px !important; }
  #root .app-shell.is-match-started .round-heading-row { margin-bottom: 6px !important; gap: 5px !important; }
  #root .app-shell.is-match-started .round-heading-row h3 { margin-top: 4px !important; font-size: 16px !important; line-height: 1.12 !important; }
  #root .app-shell.is-match-started .round-kicker { padding: 4px 7px !important; font-size: 7px !important; }
  #root .app-shell.is-match-started .round-back-button { min-height: 34px !important; padding: 0 8px !important; font-size: 9px !important; }
  #root .app-shell.is-match-started .opponent-strip { min-height: 44px !important; margin-bottom: 5px !important; padding: 5px 7px !important; }
  #root .app-shell.is-match-started .opponent-strip > span { width: 31px !important; height: 31px !important; }
  #root .app-shell.is-match-started .opponent-strip b { font-size: 9px !important; }
  #root .app-shell.is-match-started .opponent-strip small { font-size: 7px !important; }
  #root .app-shell.is-match-started .round-match-meta { min-height: 43px !important; margin-bottom: 5px !important; padding: 4px 7px !important; }
  #root .app-shell.is-match-started .round-score-player { min-width: 0 !important; }
  #root .app-shell.is-match-started .round-score-player span { max-width: 105px !important; font-size: 8px !important; }
  #root .app-shell.is-match-started .round-score-player strong { width: 28px !important; height: 28px !important; font-size: 13px !important; }
  #root .app-shell.is-match-started .round-target { padding: 4px 8px !important; font-size: 8px !important; }

  #root .app-shell.is-match-started .round-play-grid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 6px !important;
    border-radius: 13px !important;
  }
  #root .app-shell.is-match-started .round-player-choice {
    min-height: 0 !important;
    padding: 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    border-radius: 11px !important;
  }
  #root .app-shell.is-match-started .round-player-choice > span { font-size: 7px !important; }
  #root .app-shell.is-match-started .solo-player-chip { min-height: 30px !important; padding: 0 10px !important; font-size: 9px !important; }
  #root .app-shell.is-match-started .answer-area {
    min-height: 0 !important;
    padding: 7px !important;
    border-radius: 11px !important;
  }
  #root .app-shell.is-match-started .answer-area > label { font-size: 7px !important; }
  #root .app-shell.is-match-started .answer-box {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  #root .app-shell.is-match-started .answer-box input {
    grid-column: 1 / -1 !important;
    min-height: 48px !important;
    padding: 0 11px !important;
    font-size: 14px !important;
  }
  #root .app-shell.is-match-started .answer-box > button {
    grid-column: auto !important;
    min-height: 42px !important;
    padding: 0 5px !important;
    font-size: 9px !important;
  }

  /* Two compact columns expose four-to-six suggestions without excessive scrolling. */
  #root .app-shell.is-match-started .player-suggestions {
    max-height: 250px !important;
    margin-top: 6px !important;
    overflow: auto !important;
    padding-right: 2px !important;
  }
  #root .app-shell.is-match-started .player-suggestions__label { margin-bottom: 4px !important; font-size: 6.5px !important; }
  #root .app-shell.is-match-started .player-suggestions__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 5px !important;
  }
  #root .app-shell.is-match-started .player-suggestions button {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 5px !important;
    grid-template-columns: 26px minmax(0, 1fr) !important;
    gap: 5px !important;
    border-radius: 9px !important;
  }
  #root .app-shell.is-match-started .player-suggestion-flag { width: 26px !important; height: 26px !important; }
  #root .app-shell.is-match-started .player-suggestion-info { min-width: 0 !important; }
  #root .app-shell.is-match-started .player-suggestion-info b { display: block !important; font-size: 8px !important; line-height: 1.12 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  #root .app-shell.is-match-started .player-suggestion-info small { display: block !important; max-height: 19px !important; font-size: 6px !important; line-height: 1.15 !important; overflow: hidden !important; }
  #root .app-shell.is-match-started .round-pass-status { margin-top: 5px !important; gap: 5px !important; }
  #root .app-shell.is-match-started .round-pass-status span { min-height: 28px !important; padding: 0 7px !important; font-size: 7px !important; }
  #root .app-shell.is-match-started .round-feedback-stack { gap: 4px !important; }
  #root .app-shell.is-match-started .feedback { min-height: 28px !important; margin-top: 3px !important; padding: 5px 7px !important; font-size: 7px !important; }
}

@media (max-width: 380px) {
  #root .mode-switch--three button b { font-size: 8px !important; }
  #root .club-search { grid-template-columns: 30px minmax(0, 1fr) 18px !important; }
  #root .club-search .club-badge { width: 30px !important; height: 30px !important; }
  #root .club-search input { font-size: 9px !important; }
  #root .club-summary > div { padding: 4px 2px !important; }
  #root .game-actions .btn { font-size: 8px !important; }
}