/* Size adaptations. Must stay last: it overrides the files above.
   The player page (Synthèse and Détail) fits one screen without scrolling down to 720 x 480 px, as in the research GUI:
   the controls bar wraps, the metric list narrows, short windows tighten and drop secondary text.
   Below 720 x 480 px (phones) the player page stacks and scrolls. The squads screen keeps its own 1100 px stacking rule. */

@media (max-width: 1560px) {
  .thm button span {
    display: none;
  }
  .thm button {
    padding: 4px 7px;
  }
}
@media (max-width: 1420px) {
  #team .tname {
    font-size: 26px;
  }
}
@media (max-width: 1380px) {
  #team .tstats {
    gap: 22px;
    margin-left: 18px;
  }
}
@media (max-width: 1300px) {
  #player .crumb {
    display: none;
  }
}
@media (max-width: 1220px) {
  #team .tstats {
    display: none;
  }
}

/* player controls bar: on narrower windows it wraps onto two lines instead of pushing the page wider */
@media (max-width: 1240px) {
  #player .cr {
    height: auto;
    min-height: 52px;
    flex-wrap: wrap;
    row-gap: 6px;
    column-gap: 14px;
    padding: 7px 0;
  }
  #player .strip {
    flex: 1 1 100%;
    order: 5;
  }
  #player .basis {
    margin-left: auto;
  }
  #player .cr.sc {
    height: auto;
    min-height: 40px;
  }
  #player .nband.dense {
    height: 34px;
  }
  #team .svgrid {
    grid-auto-rows: 244px;
  }
}
@media (max-width: 900px) {
  .refrow {
    gap: 6px;
  }
  .reflab {
    display: none;
  }
  .globals {
    gap: 12px;
  }
  .topbar {
    gap: 16px;
  }
  .nav {
    gap: 14px;
  }
  .cseg button {
    padding: 4px 7px;
  }
  #player .giv .tag {
    display: none;
  }
}
@media (max-width: 800px) {
  #player .uc {
    display: none;
  }
  #player .cbtn span {
    display: none;
  }
  #player .cbtn {
    padding: 9px;
  }
}

/* player footer: the flagged list keeps two lines at most (full text on hover) */
@media (max-width: 1240px), (max-height: 760px) {
  #player .ro .flag {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* short screens: tighter bands, list rows and night cells */
@media (max-height: 820px) {
  #player .detail .nc {
    padding: 3px 0 4px;
  }
  #player .detail .nc:not(.off) .x {
    font-size: 15px;
  }
  #player .ri {
    min-height: 25px;
  }
  #player .rail .dh {
    margin: 8px 16px 4px;
  }
  #player .detail .nc .x .two {
    font-size: 13.5px;
  }
  #player .detail .nc .x .two small {
    font-size: 11px;
  }
}
@media (max-height: 720px) {
  #player .band {
    min-height: 0;
    padding: 7px 0 8px;
  }
  #player .ava {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
  #player .sur {
    font-size: 25px;
  }
  #player .cbtn {
    padding: 7px 11px;
  }
  #player .cr {
    min-height: 44px;
  }
  #player .tile {
    height: 30px;
  }
  #player .tile .d {
    display: none;
  }
  #player .cr.sc {
    height: 34px;
    min-height: 34px;
  }
  #player .nband {
    height: 30px;
  }
  #player .nband .c .d {
    display: none;
  }
  #player .nband.dense {
    height: 30px;
    padding-top: 11px;
  }
  #player main > .wrap {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  #player .pfoot .ro {
    padding: 6px 0 7px;
    gap: 1px;
  }
  #player .ri {
    min-height: 19px;
  }
  #player .ri .v {
    font-size: 17px;
  }
  #player .rail {
    padding: 4px 0;
  }
  #player .rail .dh {
    margin: 6px 16px 2px;
  }
  #player .detail .nc {
    padding: 2px 0 3px;
  }
}
/* very short windows: drop the night cells and footnotes, the chart and the night strip carry the nights */
@media (min-height: 480px) and (max-height: 620px) {
  #player .detail .nights,
  #player .macro .nt,
  #player .stlg .nt {
    display: none;
  }
  #player .ri {
    min-height: 16px;
  }
  #player .ri .v {
    font-size: 15.5px;
  }
  #player .ri .n {
    font-size: 12.5px;
  }
  #player .rail .dh {
    margin: 5px 16px 1px;
  }
  #player .ro .flag {
    -webkit-line-clamp: 1;
  }
  #player .tile {
    height: 24px;
  }
  #player .tile .n {
    font-size: 13px;
  }
  #player .nband {
    height: 24px;
  }
  #player .nband .c .n {
    font-size: 13px;
  }
  #player .nband.dense {
    height: 26px;
    padding-top: 10px;
  }
  #player .arrow {
    width: 28px;
    height: 28px;
  }
}

/* phones and tiny windows: the player page stacks and scrolls */
@media (max-width: 719px), (max-height: 479px) {
  body {
    overflow: auto;
  }
  #player .app {
    height: auto;
    display: block;
  }
  #player main > .wrap {
    height: auto;
  }
  #player .view.on {
    height: auto;
  }
  #player .focus {
    grid-template-columns: 1fr;
    height: auto;
  }
  #player .detail {
    min-height: 560px;
  }
  #player .cr {
    height: auto;
    flex-wrap: wrap;
    padding: 10px 0;
  }
  #player .strip {
    flex-wrap: wrap;
  }
  #player .scinfo {
    flex-basis: 100%;
    white-space: normal;
  }
  #player .fwrap {
    grid-template-columns: 1fr;
    height: auto;
  }
  #player .macro {
    min-height: 420px;
  }
  #player .crow {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-rows: 180px;
  }
}
@media (max-width: 719px) {
  #player .band {
    flex-wrap: wrap;
  }
  #player .bctl {
    flex-wrap: wrap;
    gap: 12px;
  }
}
@media (max-width: 1100px) {
  #team .bctl {
    flex-wrap: wrap;
    gap: 12px;
  }
  #team .bt {
    flex-wrap: wrap;
  }
  #team .ovgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* phone */
@media (max-width: 640px) {
  #player .wrap,
  #team .wrap {
    padding-inline: 16px;
  }
  .topbar {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 0;
    gap: 8px 12px;
  }
  .reflab {
    display: none;
  }
  .cseg button {
    padding: 4px 7px;
  }
  #player .nav,
  #player .crumb {
    display: none;
  }
  .tsearch {
    flex: 1 1 100%;
    order: 5;
  }
  #player .crow {
    grid-template-columns: 1fr !important;
  }
  #player .strip {
    flex: 1 1 100%;
  }
  #player .tile {
    flex: 0 0 26px;
    max-width: none;
  }
  #player .scope {
    flex-wrap: wrap;
  }
  #player .stab {
    max-width: 140px;
  }
  #player .ro .excl,
  #team .mr .basis {
    white-space: normal;
  }
  #team .search {
    margin-left: 0;
  }
  #team .search input {
    width: 140px;
  }
  #team .rows {
    overflow-x: auto;
  }
  #team .rcol {
    min-width: 620px;
  }
  .pf {
    grid-template-columns: 1fr;
  }
  .sheet .kv {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  #player .chipb,
  #player .macro .seg-arc {
    transition: none;
  }
}