/* =====================================================================
   Schritt 3.22 – Mobile Ranglistenkarten, Spielplankontrast und
   gespeicherte Designbibliothek
   ===================================================================== */

/* ---------------------------------------------------------------------
   Handy-Hochformat: klare Ranglistenkarten statt verschachtelter Zellen
   --------------------------------------------------------------------- */

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table-wrapper {
  overflow: visible !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  table-layout: auto !important;
  background: transparent !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table thead {
  display: none !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody {
  display: grid !important;
  width: 100% !important;
  gap: 10px !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody tr {
  display: grid !important;
  grid-template-columns:
    42px
    repeat(
      3,
      minmax(0, 1fr)
    ) !important;
  grid-template-areas:
    "position team team points"
    "games wins draws losses"
    "score score difference difference" !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  border:
    1px solid
    color-mix(
      in srgb,
      var(--design-primary) 18%,
      #d7e0e9
    ) !important;
  border-left:
    4px solid
    color-mix(
      in srgb,
      var(--design-primary) 48%,
      #8fa2b6
    ) !important;
  border-radius: 16px !important;
  color: #18324d !important;
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--design-primary) 5%,
        var(--design-surface)
      ),
      var(--design-surface)
    ) !important;
  box-shadow:
    0 10px 24px
    rgba(18, 58, 99, 0.08) !important;
  overflow: hidden !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .large-group-overview:not(.neutral-group-overview)
  .group-card
  tbody
  tr:nth-child(-n + 2) {
  border-left-color:
    var(--design-success) !important;
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--design-success) 9%,
        var(--design-surface)
      ),
      var(--design-surface)
    ) !important;
  box-shadow:
    0 10px 24px
      rgba(18, 58, 99, 0.08) !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .wm-large-group-overview
  .group-card
  tbody
  tr:nth-child(3) {
  border-left-color:
    var(--design-warning) !important;
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--design-warning) 10%,
        var(--design-surface)
      ),
      var(--design-surface)
    ) !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td {
  position: static !important;
  display: flex !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 42px !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  padding:
    8px
    9px !important;
  border: 0 !important;
  border-radius: 10px !important;
  color: #18324d !important;
  background:
    color-mix(
      in srgb,
      var(--design-primary) 5%,
      var(--design-surface)
    ) !important;
  font-size: 0.69rem !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td::before {
  display: block !important;
  flex: 0 1 auto;
  color: #74869a !important;
  content:
    attr(data-short-label) !important;
  font-size: 0.52rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-position {
  grid-area: position;
  display: grid !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  place-items: center !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background:
    linear-gradient(
      145deg,
      var(--design-primary),
      var(--design-secondary)
    ) !important;
  box-shadow:
    0 7px 16px
    color-mix(
      in srgb,
      var(--design-primary) 20%,
      transparent
    );
  font-size: 0.82rem !important;
  font-weight: 950 !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-position::before,
body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-team::before {
  display: none !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-team {
  grid-area: team;
  justify-content: flex-start !important;
  padding-inline: 4px !important;
  color: #18324d !important;
  background: transparent !important;
  font-size: 0.86rem !important;
  font-weight: 950 !important;
  text-overflow: ellipsis;
  overflow: hidden !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-points {
  grid-area: points;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 2px !important;
  color:
    color-mix(
      in srgb,
      var(--design-primary) 84%,
      #18324d
    ) !important;
  font-size: 0.88rem !important;
  font-weight: 950 !important;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-games {
  grid-area: games;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-wins {
  grid-area: wins;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-draws {
  grid-area: draws;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-losses {
  grid-area: losses;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-score-ratio {
  grid-area: score;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-difference {
  grid-area: difference;
}

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  :is(
    .ranking-games,
    .ranking-wins,
    .ranking-draws,
    .ranking-losses,
    .ranking-score-ratio,
    .ranking-difference
  ) {
  color: #18324d !important;
  font-weight: 900 !important;
}

/* Die in Schritt 3.21 ausgeblendeten Spalten werden in der neuen Karte
   wieder als ordentliche Statistikfelder angezeigt. */

body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  :is(
    th:nth-child(4),
    td:nth-child(4),
    th:nth-child(5),
    td:nth-child(5),
    th:nth-child(6),
    td:nth-child(6),
    th:nth-child(7),
    td:nth-child(7),
    th:nth-child(8),
    td:nth-child(8)
  ) {
  display: flex !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody tr {
  color: #eef5ff !important;
  border-color:
    rgba(129, 164, 198, 0.18) !important;
  background:
    linear-gradient(
      145deg,
      #14263a,
      #0f1d2f
    ) !important;
  box-shadow:
    0 13px 28px
    rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .large-group-overview:not(.neutral-group-overview)
  .group-card
  tbody
  tr:nth-child(-n + 2) {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--design-success) 13%,
        #14263a
      ),
      #0f1d2f
    ) !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .wm-large-group-overview
  .group-card
  tbody
  tr:nth-child(3) {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--design-warning) 14%,
        #14263a
      ),
      #0f1d2f
    ) !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td {
  color: #eef5ff !important;
  background:
    rgba(255, 255, 255, 0.055) !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table tbody td::before {
  color: #9db0c6 !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  :is(
    .ranking-team,
    .ranking-points,
    .ranking-games,
    .ranking-wins,
    .ranking-draws,
    .ranking-losses,
    .ranking-score-ratio,
    .ranking-difference
  ) {
  color: #eef5ff !important;
}

html[data-theme="dark"]
  body.is-phone-portrait.premium-site.app-tournament-admin
  .group-card
  .ranking-table
  .ranking-team {
  background: transparent !important;
}

/* ---------------------------------------------------------------------
   Spielplan: eine durchgehend kontrastfeste Oberfläche
   --------------------------------------------------------------------- */

body.premium-site.app-tournament-admin {
  --schedule-surface:
    color-mix(
      in srgb,
      var(--design-surface) 97%,
      #fff
    );
  --schedule-surface-raised:
    color-mix(
      in srgb,
      var(--design-primary) 5%,
      var(--design-surface)
    );
  --schedule-header:
    color-mix(
      in srgb,
      var(--design-primary) 12%,
      var(--design-surface)
    );
  --schedule-text: #18324d;
  --schedule-muted: #60748a;
  --schedule-line:
    color-mix(
      in srgb,
      var(--design-primary) 16%,
      #d5e0ea
    );
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin {
  --schedule-surface: #0d1929;
  --schedule-surface-raised: #14263a;
  --schedule-header: #1a2f46;
  --schedule-text: #eef5ff;
  --schedule-muted: #a5b7cb;
  --schedule-line:
    rgba(129, 164, 198, 0.17);
}

body.premium-site.app-tournament-admin
  .playing-field-schedule-section {
  color:
    var(--schedule-text) !important;
  border-color:
    var(--schedule-line) !important;
  background:
    var(--schedule-surface) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-schedule-section
  > .collapsible-section-content {
  color:
    var(--schedule-text) !important;
  background:
    var(--schedule-surface) !important;
}

body.premium-site.app-tournament-admin
  :is(
    .playing-field-settings,
    .playing-field-select-field,
    .playing-field-statistics > div,
    .playing-field-explanation,
    .playing-field-block,
    .playing-field-grid,
    .playing-field-card,
    .playing-field-free,
    .fixture-card,
    .fixture-empty,
    .qualification-summary-item
  ) {
  color:
    var(--schedule-text) !important;
  border-color:
    var(--schedule-line) !important;
  background:
    var(--schedule-surface-raised) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-settings {
  padding: 12px !important;
  box-shadow: none !important;
}

body.premium-site.app-tournament-admin
  .playing-field-explanation {
  padding:
    13px
    15px !important;
  border:
    1px solid
    var(--schedule-line) !important;
  border-left:
    4px solid
    var(--design-success) !important;
  border-radius: 13px !important;
  color:
    var(--schedule-text) !important;
  line-height: 1.55;
}

body.premium-site.app-tournament-admin
  .playing-field-block-list {
  display: grid;
  gap: 14px;
  padding: 0 !important;
  background: transparent !important;
}

body.premium-site.app-tournament-admin
  .playing-field-block {
  padding: 0 !important;
  border:
    1px solid
    var(--schedule-line) !important;
  border-radius: 17px !important;
  color:
    var(--schedule-text) !important;
  background:
    var(--schedule-surface) !important;
  box-shadow:
    0 12px 28px
    rgba(18, 58, 99, 0.08) !important;
  overflow: hidden;
}

body.premium-site.app-tournament-admin
  .playing-field-block-heading {
  margin: 0 !important;
  padding:
    14px
    16px !important;
  border: 0 !important;
  border-bottom:
    1px solid
    var(--schedule-line) !important;
  color:
    var(--schedule-text) !important;
  background:
    var(--schedule-header) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-block-heading
  :is(
    strong,
    span,
    small
  ) {
  color:
    var(--schedule-text) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-block-heading span,
body.premium-site.app-tournament-admin
  .playing-field-block-heading small {
  opacity: 0.72;
}

body.premium-site.app-tournament-admin
  .playing-field-grid {
  padding: 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background:
    var(--schedule-surface) !important;
  box-shadow: none !important;
}

body.premium-site.app-tournament-admin
  .playing-field-card {
  border:
    1px solid
    var(--schedule-line) !important;
  border-left:
    4px solid
    color-mix(
      in srgb,
      var(--design-primary) 58%,
      #8ca0b5
    ) !important;
  color:
    var(--schedule-text) !important;
  background:
    var(--schedule-surface-raised) !important;
  box-shadow:
    0 10px 23px
    rgba(18, 58, 99, 0.08) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-card
  :is(
    strong,
    small,
    span
  ) {
  color:
    var(--schedule-text);
}

body.premium-site.app-tournament-admin
  .playing-field-free {
  border-left-color:
    #8192a5 !important;
  background:
    color-mix(
      in srgb,
      #8192a5 7%,
      var(--schedule-surface)
    ) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-free > strong {
  color:
    var(--schedule-text) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-free > small {
  color:
    var(--schedule-muted) !important;
}

body.premium-site.app-tournament-admin
  .admin-schedule-meta {
  border-top:
    1px solid
    var(--schedule-line) !important;
  color:
    var(--schedule-muted) !important;
}

body.premium-site.app-tournament-admin
  .admin-schedule-meta > small:first-child {
  color:
    var(--schedule-muted) !important;
}

body.premium-site.app-tournament-admin
  .admin-match-status {
  color:
    var(--schedule-text) !important;
  border:
    1px solid
    var(--schedule-line) !important;
  background:
    color-mix(
      in srgb,
      var(--design-primary) 8%,
      var(--schedule-surface)
    ) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-card.status-running {
  border-left-color:
    var(--design-success) !important;
  background:
    color-mix(
      in srgb,
      var(--design-success) 9%,
      var(--schedule-surface-raised)
    ) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-card.status-paused {
  border-left-color:
    var(--design-warning) !important;
  background:
    color-mix(
      in srgb,
      var(--design-warning) 10%,
      var(--schedule-surface-raised)
    ) !important;
}

body.premium-site.app-tournament-admin
  .playing-field-card.status-completed {
  border-left-color:
    #8192a5 !important;
  opacity: 0.94;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  :is(
    .playing-field-settings,
    .playing-field-select-field,
    .playing-field-statistics > div,
    .playing-field-explanation,
    .playing-field-block,
    .playing-field-grid,
    .playing-field-card,
    .playing-field-free,
    .fixture-card,
    .fixture-empty,
    .qualification-summary-item
  ) {
  color: #eef5ff !important;
  border-color:
    rgba(129, 164, 198, 0.17) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-block {
  background: #0d1929 !important;
  box-shadow:
    0 15px 34px
    rgba(0, 0, 0, 0.23) !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-grid {
  background: #0d1929 !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-card {
  color: #eef5ff !important;
  background: #14263a !important;
}

html[data-theme="dark"]
  body.premium-site.app-tournament-admin
  .playing-field-card
  :is(
    strong,
    small,
    span
  ) {
  color: #eef5ff;
}

/* ---------------------------------------------------------------------
   Design-Studio: Bibliothek für eigene Designs
   --------------------------------------------------------------------- */

.admin-design-tabs {
  grid-template-columns:
    repeat(
      5,
      minmax(0, 1fr)
    ) !important;
}

.admin-design-tab {
  min-width: 0;
  padding-inline: 5px !important;
  font-size: 0.54rem !important;
}

.saved-design-create {
  display: grid;
  gap: 10px;
  padding: 13px;
  border:
    1px solid
    rgba(18, 58, 99, 0.10);
  border-radius: 15px;
  background:
    color-mix(
      in srgb,
      var(--design-background) 72%,
      #fff
    );
}

.saved-design-create label {
  display: grid;
  gap: 6px;
  color: #53667b;
  font-size: 0.63rem;
  font-weight: 900;
}

.saved-design-create input {
  width: 100%;
  min-height: 47px;
  padding-inline: 12px;
  border:
    1px solid
    rgba(18, 58, 99, 0.12);
  border-radius: 12px;
  color: #18324d;
  background:
    color-mix(
      in srgb,
      var(--design-surface) 94%,
      #fff
    );
}

.saved-design-create-actions,
.saved-design-import {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 8px;
}

.saved-design-create-actions button,
.saved-design-import button {
  min-height: 42px;
  padding:
    8px
    10px;
  border:
    1px solid
    rgba(18, 58, 99, 0.11);
  border-radius: 11px;
  color: #53667b;
  background:
    color-mix(
      in srgb,
      var(--design-surface) 94%,
      #fff
    );
  font-size: 0.58rem;
  font-weight: 900;
  cursor: pointer;
}

.saved-design-create-actions
  .saved-design-save-button {
  color: #fff;
  border-color: transparent;
  background:
    linear-gradient(
      125deg,
      var(--design-primary),
      var(--design-secondary)
    );
  box-shadow:
    0 10px 22px
    color-mix(
      in srgb,
      var(--design-primary) 20%,
      transparent
    );
}

.saved-design-import {
  grid-template-columns: 1fr;
}

.saved-design-list {
  display: grid;
  gap: 10px;
}

.saved-design-empty {
  display: grid;
  gap: 7px;
  min-height: 150px;
  place-items: center;
  padding: 22px;
  border:
    1px dashed
    rgba(18, 58, 99, 0.18);
  border-radius: 16px;
  color: #718196;
  background:
    color-mix(
      in srgb,
      var(--design-background) 68%,
      #fff
    );
  text-align: center;
}

.saved-design-empty > span {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 15px;
  color: #fff;
  background:
    linear-gradient(
      145deg,
      var(--design-primary),
      var(--design-secondary)
    );
  font-size: 1.1rem;
}

.saved-design-empty strong {
  color: #18324d;
  font-size: 0.72rem;
}

.saved-design-empty p {
  max-width: 330px;
  margin: 0;
  font-size: 0.59rem;
  line-height: 1.5;
}

.saved-design-card {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr);
  gap: 8px;
  padding: 9px;
  border:
    1px solid
    rgba(18, 58, 99, 0.10);
  border-radius: 16px;
  background:
    color-mix(
      in srgb,
      var(--design-surface) 94%,
      #fff
    );
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.saved-design-card.is-selected {
  border-color:
    var(--design-primary);
  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--design-primary) 12%,
        transparent
      );
}

.saved-design-load {
  display: grid;
  grid-template-columns:
    82px
    minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  width: 100%;
  padding: 7px;
  border: 0;
  border-radius: 12px;
  color: #18324d;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.saved-design-preview {
  display: grid;
  grid-template-columns:
    0.72fr
    1.28fr;
  gap: 5px;
  height: 54px;
  padding: 5px;
  border-radius: 10px;
  background:
    var(--saved-background);
  box-shadow:
    inset 0 0 0 1px
    rgba(18, 58, 99, 0.08);
}

.saved-design-preview::before,
.saved-design-preview::after {
  border-radius: 7px;
  content: "";
}

.saved-design-preview::before {
  background:
    linear-gradient(
      180deg,
      var(--saved-primary),
      var(--saved-secondary)
    );
}

.saved-design-preview::after {
  background:
    linear-gradient(
      180deg,
      var(--saved-surface) 0 32%,
      color-mix(
        in srgb,
        var(--saved-primary) 11%,
        var(--saved-surface)
      ) 32%
    );
}

.saved-design-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.saved-design-copy strong {
  color: #18324d;
  font-size: 0.72rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-design-copy small {
  color: #7a899c;
  font-size: 0.54rem;
}

.saved-design-card-actions {
  display: grid;
  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );
  gap: 6px;
}

.saved-design-card-actions button {
  min-height: 35px;
  padding:
    6px
    7px;
  border:
    1px solid
    rgba(18, 58, 99, 0.10);
  border-radius: 9px;
  color: #52667b;
  background:
    color-mix(
      in srgb,
      var(--design-background) 65%,
      #fff
    );
  font-size: 0.52rem;
  font-weight: 900;
  cursor: pointer;
}

.saved-design-card-actions
  .is-danger {
  color: #b42318;
  background: #fff3f2;
}

html[data-theme="dark"]
  :is(
    .saved-design-create,
    .saved-design-empty,
    .saved-design-card
  ) {
  color: #eef5ff;
  border-color:
    rgba(129, 164, 198, 0.15);
  background: #111f31;
}

html[data-theme="dark"]
  :is(
    .saved-design-create label,
    .saved-design-copy small,
    .saved-design-empty
  ) {
  color: #96a9bf;
}

html[data-theme="dark"]
  :is(
    .saved-design-empty strong,
    .saved-design-copy strong
  ) {
  color: #eef5ff;
}

html[data-theme="dark"]
  .saved-design-create input {
  color: #eef5ff;
  border-color: #30455e;
  background: #0d1929;
}

html[data-theme="dark"]
  :is(
    .saved-design-create-actions button,
    .saved-design-import button,
    .saved-design-card-actions button
  ) {
  color: #dce8f5;
  border-color:
    rgba(129, 164, 198, 0.15);
  background: #172940;
}

html[data-theme="dark"]
  .saved-design-card-actions
  .is-danger {
  color: #ff9b95;
  background: #3c2024;
}

/* ---------------------------------------------------------------------
   Mobil und Querformat
   --------------------------------------------------------------------- */

@media (max-width: 680px) {
  .admin-design-tabs {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    scroll-snap-type:
      x mandatory;
  }

  .admin-design-tab {
    min-width: 98px;
    flex:
      1 0 98px;
    scroll-snap-align: start;
  }

  .saved-design-card-actions {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

  .saved-design-create-actions {
    grid-template-columns: 1fr;
  }
}

body.is-phone-landscape
  .saved-design-list {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

body.is-phone-landscape
  .saved-design-card-actions {
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
}

@media (max-width: 380px) {
  body.is-phone-portrait.premium-site.app-tournament-admin
    .group-card
    .ranking-table tbody tr {
    grid-template-columns:
      38px
      repeat(
        3,
        minmax(0, 1fr)
      ) !important;
    gap: 6px !important;
    padding: 10px !important;
  }

  body.is-phone-portrait.premium-site.app-tournament-admin
    .group-card
    .ranking-table
    .ranking-position {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  body.is-phone-portrait.premium-site.app-tournament-admin
    .group-card
    .ranking-table tbody td {
    min-height: 39px !important;
    padding:
      7px
      7px !important;
  }

  .saved-design-load {
    grid-template-columns:
      68px
      minmax(0, 1fr);
  }

  .saved-design-preview {
    height: 48px;
  }
}