/* Tournament lobby — mirrors lobby-rooms-screen styling */



.lobby-viewport--tournaments {

  align-items: stretch;

  justify-content: stretch;

  background: transparent;

  padding: clamp(14px, 2.5vw, 28px);

  box-sizing: border-box;

}



.lobby-viewport--tournaments .online-lobby {

  display: none;

}



.lobby-tournaments-screen {

  --tournament-bg: var(--ui-lobby-bg);

  --tournament-surface: var(--palette-panel-elevated);

  --tournament-surface-light: color-mix(in srgb, var(--palette-panel-elevated) 82%, white 18%);

  display: flex;

  flex-direction: column;

  flex: 1 1 auto;

  width: 100%;

  min-height: 0;

  background: var(--tournament-bg);

  color: var(--palette-on-dark-soft);

  border-radius: 20px;

  overflow: hidden;

  box-shadow: none;

}



.lobby-tournaments-screen[hidden] {

  display: none !important;

}



.lobby-viewport--tournaments .lobby-card {

  display: none;

}



.lobby-tournaments-screen__topbar {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  flex-shrink: 0;

  padding: 18px clamp(20px, 4vw, 40px);

  border-bottom: 1px solid var(--on-dark-12);

  background: var(--tournament-bg);

}



.lobby-tournaments-screen__nav {

  display: flex;

  align-items: center;

  gap: 16px;

  min-width: 0;

}



.lobby-tournaments-screen__back,

.tournament-detail__back {

  border: 1px solid color-mix(in srgb, white 16%, transparent);

  border-radius: 10px;

  background: var(--tournament-surface-light);

  color: var(--palette-on-dark-soft);

  font-size: 0.84rem;

  font-weight: 700;

  padding: 10px 16px;

  cursor: pointer;

  transition:

    background var(--transition-fast),

    border-color var(--transition-fast);

}



.lobby-tournaments-screen__back:hover,

.tournament-detail__back:hover {

  background: color-mix(in srgb, var(--tournament-surface-light) 88%, white 12%);

  border-color: color-mix(in srgb, white 22%, transparent);

}



.lobby-tournaments-screen__title {

  margin: 0;

  font-size: clamp(1.15rem, 2.2vw, 1.55rem);

  font-weight: 800;

  color: var(--palette-on-dark-soft);

  letter-spacing: -0.02em;

}



.lobby-tournaments-screen__body {

  flex: 1 1 auto;

  min-height: 0;

  overflow: auto;

  padding: clamp(20px, 3vw, 36px) clamp(20px, 4vw, 40px) clamp(24px, 4vw, 44px);

  background: var(--tournament-bg);

}



.tournament-layout {

  display: grid;

  grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);

  gap: clamp(16px, 2.5vw, 28px);

  width: 100%;

  max-width: 1320px;

  margin: 0 auto;

  align-items: start;

}



.tournament-sidebar {

  position: sticky;

  top: 0;

  min-width: 0;

}



.tournament-sidebar__panel {

  display: flex;

  flex-direction: column;

  gap: 14px;

  padding: 18px;

  border-radius: 20px;

  border: 1px solid color-mix(in srgb, var(--palette-accent) 24%, transparent);

  background: color-mix(in srgb, var(--palette-accent) 8%, var(--tournament-surface));

}



.tournament-sidebar__title {

  margin: 0;

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--accent-95);

}



.tournament-main {

  display: flex;

  flex-direction: column;

  gap: 16px;

  min-width: 0;

}



.tournament-main__toolbar {

  flex-shrink: 0;

}



.tournament-main__toolbar[hidden] {

  display: none !important;

}



.tournament-list {

  display: flex;

  flex-direction: column;

  gap: clamp(12px, 1.6vw, 16px);

  width: 100%;

}



.tournament-card {

  display: flex;

  flex-direction: column;

  gap: 14px;

  min-height: 0;

  padding: 18px 18px 16px;

  border-radius: 20px;

  border: 1px solid var(--on-dark-14);

  background: var(--tournament-surface);

  color: inherit;

  cursor: pointer;

  text-align: left;

  width: 100%;

  font: inherit;

  transition:

    border-color var(--transition-fast),

    background var(--transition-fast),

    transform 0.12s ease;

}



.tournament-card:hover {

  border-color: color-mix(in srgb, var(--palette-accent) 42%, transparent);

  background: color-mix(in srgb, var(--tournament-surface) 92%, white 8%);

}



.tournament-card:active {

  transform: scale(0.99);

}



.tournament-card__head {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 10px;

}



.tournament-card__name {

  margin: 0;

  font-size: clamp(1.05rem, 2vw, 1.25rem);

  font-weight: 800;

  line-height: 1.2;

  color: var(--palette-on-dark-soft);

}



.tournament-card__status {

  padding: 5px 10px;

  border-radius: 999px;

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  white-space: nowrap;

  background: color-mix(in srgb, var(--palette-accent) 24%, transparent);

  color: var(--accent-95);

}



.tournament-card__status--in_progress {

  background: color-mix(in srgb, #4a78c8 32%, transparent);

  color: color-mix(in srgb, #9ec0ff 92%, white);

}



.tournament-card__status--registration_closed {

  background: color-mix(in srgb, #888 24%, transparent);

  color: var(--on-dark-72);

}



.tournament-card__meta {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 10px 12px;

}



.tournament-card__meta-item {

  display: flex;

  flex-direction: column;

  gap: 3px;

  min-width: 0;

}



.tournament-card__meta-label {

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  color: var(--on-dark-52);

}



.tournament-card__meta-value {

  font-size: 0.84rem;

  font-weight: 600;

  color: color-mix(in srgb, white 82%, var(--on-dark-72));

}



.tournament-detail {

  width: 100%;

}



.tournament-detail[hidden] {

  display: none !important;

}



.tournament-detail__title {

  margin: 0 0 0.65rem;

  font-size: clamp(1.2rem, 2.4vw, 1.6rem);

  font-weight: 800;

  letter-spacing: -0.02em;

}



.tournament-detail__desc {

  margin: 0 0 1.25rem;

  font-size: 0.92rem;

  line-height: 1.55;

  color: var(--on-dark-72);

}



.tournament-detail__rules {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));

  gap: 12px;

  margin: 0 0 1.25rem;

  padding: 16px 18px;

  border-radius: 16px;

  border: 1px solid var(--on-dark-12);

  background: var(--tournament-surface);

}



.tournament-detail__rules dt {

  margin: 0;

  font-size: 0.62rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  color: var(--on-dark-52);

}



.tournament-detail__rules dd {

  margin: 0;

  font-size: 0.9rem;

  font-weight: 700;

  color: var(--palette-on-dark-soft);

}



.tournament-detail__subtitle {

  margin: 1.5rem 0 0.75rem;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;

  color: var(--on-dark-58);

}



.tournament-detail__actions {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 1rem;

}



.tournament-detail__actions .online-lobby__btn {

  width: auto;

  max-width: 360px;

}



.tournament-register {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-bottom: 1rem;

  padding: 16px 18px;

  border-radius: 16px;

  border: 1px solid var(--on-dark-12);

  background: var(--tournament-surface);

}



.tournament-register__pdf {

  color: var(--accent-95);

  font-size: 0.88rem;

  font-weight: 700;

  text-decoration: none;

}



.tournament-register__pdf:hover {

  text-decoration: underline;

}



.tournament-register__hint {

  margin: 0;

  font-size: 0.82rem;

  line-height: 1.45;

  color: var(--on-dark-62);

}



.tournament-register__hint--ready {

  color: var(--accent-95);

}



.lobby-tournaments-screen .online-lobby__btn {

  border: none;

  border-radius: 10px;

  padding: 10px 14px;

  min-height: 42px;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  cursor: pointer;

  color: var(--palette-on-dark-soft);

  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease;

}



.lobby-tournaments-screen .online-lobby__btn--primary {

  background: linear-gradient(180deg, var(--palette-player-red-hover) 0%, var(--palette-player-red) 100%);

  color: var(--palette-on-dark);

  box-shadow: 0 4px 16px color-mix(in srgb, var(--palette-player-red) 32%, transparent);

}



.lobby-tournaments-screen .online-lobby__btn--primary:hover:not(:disabled) {

  background: linear-gradient(180deg, var(--palette-player-red-soft) 0%, var(--palette-player-red-hover) 100%);

}



.lobby-tournaments-screen .online-lobby__btn--primary:disabled {

  opacity: 0.45;

  cursor: default;

  box-shadow: none;

}



.lobby-tournaments-screen .online-lobby__btn--featured {

  border: 1px solid var(--accent-35);

  background: var(--accent-18);

  color: var(--palette-on-dark-soft);

  text-transform: none;

  letter-spacing: 0.03em;

}



.lobby-tournaments-screen .online-lobby__btn--featured:hover:not(:disabled) {

  background: var(--accent-22);

  border-color: var(--accent-42);

}



.tournament-register__accept {

  display: flex;

  gap: 0.65rem;

  align-items: flex-start;

  font-size: 0.88rem;

  line-height: 1.45;

  color: var(--on-dark-82);

}



.tournament-register__accept input {

  margin-top: 0.2rem;

  accent-color: var(--palette-player-red);

}



.tournament-register__status {

  margin: 0 0 0.75rem;

  padding: 12px 14px;

  border-radius: 12px;

  background: color-mix(in srgb, var(--palette-accent) 14%, transparent);

  border: 1px solid color-mix(in srgb, var(--palette-accent) 28%, transparent);

  color: var(--accent-95);

  font-size: 0.88rem;

  font-weight: 600;

}



.tournament-participants {

  list-style: none;

  margin: 0;

  padding: 0;

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));

  gap: 8px;

}



.tournament-participant {

  display: flex;

  align-items: center;

  gap: 10px;

  min-width: 0;

  padding: 10px 12px;

  border-radius: 12px;

  border: 1px solid var(--on-dark-10);

  background: var(--tournament-surface);

  font-size: 0.84rem;

  font-weight: 600;

}



.tournament-participant--empty {

  grid-column: 1 / -1;

  justify-content: center;

  color: var(--on-dark-58);

  font-weight: 500;

}



.tournament-participant__name {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.tournament-name-with-status {

  display: inline-flex;

  align-items: center;

  gap: 4px;

  min-width: 0;

  flex: 1 1 auto;

}



.tournament-rank-pill {

  flex-shrink: 0;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 3px 8px;

  border-radius: 999px;

  font-size: 0.58rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  white-space: nowrap;

  line-height: 1.1;

}



.tournament-rank-pill--gold {

  background: color-mix(in srgb, #f5c842 30%, transparent);

  color: color-mix(in srgb, #ffe566 94%, white);

}



.tournament-rank-pill--silver {

  background: color-mix(in srgb, #aeb8c8 32%, transparent);

  color: color-mix(in srgb, #eef1f6 94%, white);

}



.tournament-rank-pill--bronze {

  background: color-mix(in srgb, #c47a45 32%, transparent);

  color: color-mix(in srgb, #f0b07a 94%, white);

}



.tournament-flag {

  flex-shrink: 0;

}



.user-online-badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

  width: 13px;

  height: 13px;

  border-radius: 50%;

  background: #34d058;

  color: #fff;

  line-height: 0;

}



.user-online-badge svg {

  display: block;

  width: 9px;

  height: 9px;

}



.tournament-bracket {

  list-style: none;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.tournament-bracket__match {

  padding: 12px 14px;

  border-radius: 12px;

  border: 1px solid var(--on-dark-10);

  background: var(--tournament-surface);

  font-size: 0.84rem;

  line-height: 1.45;

}



.tournament-bracket__head {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

  margin-bottom: 8px;

}



.tournament-bracket__round {

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: var(--on-dark-58);

}



.tournament-bracket__status {

  font-style: normal;

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: var(--accent-95);

}



.tournament-bracket__players {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: 8px 10px;

}



.tournament-bracket__player {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

}



.tournament-bracket__player-name {

  min-width: 0;

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.tournament-bracket__vs {

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: var(--on-dark-52);

}



.tournament-bracket__score {

  margin-left: auto;

  font-weight: 700;

  color: var(--palette-on-dark-soft);

}



.tournament-standings {

  width: 100%;

  border-collapse: collapse;

  font-size: 0.84rem;

  border-radius: 16px;

  overflow: hidden;

  border: 1px solid var(--on-dark-12);

  background: var(--tournament-surface);

}



.tournament-standings th,

.tournament-standings td {

  padding: 10px 12px;

  border-bottom: 1px solid var(--on-dark-10);

  text-align: left;

  vertical-align: middle;

}



.tournament-standings th {

  font-size: 0.68rem;

  font-weight: 700;

  letter-spacing: 0.05em;

  text-transform: uppercase;

  color: var(--on-dark-58);

  background: color-mix(in srgb, black 18%, transparent);

}



.tournament-standings__rank {

  width: 2.5rem;

  font-weight: 700;

}



.tournament-standings__player {

  display: flex;

  align-items: center;

  gap: 8px;

  min-width: 0;

}



.tournament-my-matches {

  min-height: 0;

}



.tournament-my__list {

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.tournament-my__card {

  display: flex;

  flex-direction: column;

  gap: 12px;

  padding: 14px;

  border-radius: 14px;

  border: 1px solid var(--on-dark-12);

  background: color-mix(in srgb, var(--tournament-surface) 88%, black 12%);

}



.tournament-my__card-info {

  display: flex;

  flex-direction: column;

  gap: 4px;

  min-width: 0;

}



.tournament-my__tournament {

  font-size: 0.92rem;

  font-weight: 700;

  line-height: 1.3;

  color: var(--palette-on-dark-soft);

  overflow: hidden;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.tournament-my__round {

  font-size: 0.72rem;

  font-weight: 700;

  letter-spacing: 0.04em;

  text-transform: uppercase;

  color: var(--on-dark-58);

}



.tournament-my__join {

  width: 100%;

}



.tournament-my__empty {

  margin: 0;

  padding: 8px 2px;

  font-size: 0.84rem;

  line-height: 1.5;

  color: var(--on-dark-62);

}



.tournament-empty {

  margin: 0;

  padding: 28px 24px;

  border-radius: 20px;

  font-size: 0.95rem;

  line-height: 1.5;

  color: var(--on-dark-62);

  background: var(--tournament-surface);

  border: 1px solid var(--on-dark-12);

  text-align: center;

}



.tournament-empty--inline {

  padding: 16px 18px;

  text-align: left;

}



@media (max-width: 900px) {

  .tournament-layout {

    grid-template-columns: 1fr;

  }



  .tournament-sidebar {

    position: static;

  }

}



@media (max-width: 540px) {

  .lobby-tournaments-screen__topbar {

    flex-direction: column;

    align-items: stretch;

  }



  .lobby-tournaments-screen__nav {

    flex-wrap: wrap;

  }



  .tournament-detail__actions .online-lobby__btn,

  .tournament-my__join {

    max-width: none;

    width: 100%;

  }



  .tournament-participants {

    grid-template-columns: 1fr;

  }

}



/* Admin panel tournament section */

.tournament-admin-form {

  display: grid;

  gap: 0.65rem;

  margin-bottom: 1rem;

  max-width: 520px;

}



.tournament-admin-form textarea {

  min-height: 4rem;

  resize: vertical;

}



.actions-cell {

  white-space: nowrap;

}



.btn--sm {

  padding: 0.25rem 0.5rem;

  font-size: 0.78rem;

}