/* Tournaments */
.socialShell main:has(> .tourList) > .title {
  margin-block: 0 20px;
  padding: clamp(20px, 4vw, 34px) clamp(18px, 4vw, 32px);
  background: linear-gradient(104deg, #28211c 15%, #28211cf2 62%, #28211cd4), url('/brand/krikumi-ice.webp') center 56% / cover;
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
}

.socialShell main:has(.tournamentDetail) > .title {
  padding: 0;
  border: 0;
  background: none;
}

.socialShell main:has(.tournamentDetail) > .title p {
  display: none;
}

.socialShell main:has(> .tourList) > .title h1 {
  margin: 6px 0 8px;
  color: var(--kk-text);
  font: inherit;
  font-size: clamp(32px, 4vw, 46px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.socialShell main:has(> .tourList) > .title p {
  max-width: 56ch;
  margin: 0;
  color: var(--kk-muted);
}

.socialShell .tourList {
  container-type: inline-size;
  min-width: 0;
}

.socialShell .tournamentHubTabs,
.socialShell .socialTournamentNav,
.socialShell .socialProfileNav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  overflow: visible;
}

.socialShell :is(.tournamentHubTabs, .socialTournamentNav, .socialProfileNav) > :is(button, a) {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--kk-border);
  border-radius: 10px;
  background: var(--kk-surface);
  box-shadow: none;
  color: var(--kk-muted);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  white-space: normal;
}

.socialShell :is(.tournamentHubTabs, .socialTournamentNav, .socialProfileNav) > :is(button, a):hover {
  background: var(--kk-surface-raised);
  color: var(--kk-text);
}

.socialShell :is(.tournamentHubTabs [aria-pressed="true"], .socialProfileNav [aria-current="location"]) {
  border-color: var(--kk-accent);
  background: #423024;
  color: var(--kk-accent);
}

.socialShell .tournamentHubGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.socialShell .tournamentHubCard {
  position: relative;
  min-width: 0;
  padding: clamp(18px, 3vw, 25px);
  gap: 14px;
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  background: var(--kk-surface);
  color: var(--kk-text);
  cursor: pointer;
  overflow-wrap: anywhere;
}

.socialShell .tournamentHubCard:focus-within,
.socialShell .tournamentHubCard:hover {
  transform: none;
  border-color: #a08060;
  background: var(--kk-surface-raised);
}

.socialShell .tournamentHubCardTop {
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--kk-muted);
  font-size: 13px;
}

.socialShell .tournamentHubCard h2 {
  margin: 0;
  font-size: clamp(20px, 2.5vw, 26px);
  letter-spacing: -.027em;
  line-height: 1.2;
}

.socialShell :is(.tournamentHubCard p, .tournamentHubCardStats, .tournamentSeason > p) {
  color: var(--kk-muted);
}

.socialShell .tournamentHubCardStats {
  flex-wrap: wrap;
  gap: 6px 15px;
  margin-top: auto;
  padding-block: 12px 0;
  border-top: 1px solid var(--kk-border);
  font-size: 14px;
}

.socialShell .tournamentHubCardStats b {
  color: var(--kk-text);
  font-variant-numeric: tabular-nums;
}

.socialShell .tournamentHubCard button {
  align-self: flex-start;
  min-height: 44px;
  color: var(--kk-accent);
}

.socialShell .tournamentStatus {
  max-width: 100%;
  min-height: 26px;
  padding: 3px 9px;
  border-radius: 6px;
  background: #483628;
  color: #e8d3bf;
  font-size: 11px;
  letter-spacing: .055em;
  line-height: 1.4;
}

.socialShell .tournamentStatus.planned,
.socialShell .tournamentStatus.done {
  background: #423024;
  color: var(--kk-accent);
}

.socialShell .tournamentStatus.live {
  background: #1b3b35;
  color: #a9e1bd;
}

.socialShell .tournamentStatus.review {
  background: #3b3226;
  color: #f1d39e;
}

.socialShell .tournamentStatus.danger {
  background: #40272d;
  color: #ffb7b3;
}

.socialShell :is(.tournamentHubEmpty, .tournamentHubSubEmpty) {
  padding: clamp(22px, 4vw, 44px);
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  background: var(--kk-surface);
  color: var(--kk-muted);
}

.socialShell .tournamentHubEmpty h2 {
  margin: 0 0 8px;
  color: var(--kk-text);
  font-size: clamp(20px, 3vw, 25px);
  line-height: 1.25;
}

.socialShell .tournamentHubEmpty p {
  max-width: 53ch;
  margin-inline: auto;
}

.socialShell .tournamentHubEmpty button {
  margin: 14px 3px 0;
}

.socialShell .tournamentHubEmpty > span {
  background: #423024;
  color: var(--kk-accent);
}

.socialShell .tournamentDetail {
  gap: 16px;
}

.socialShell .tournamentBack {
  min-height: 44px;
  padding-inline: 4px;
  color: var(--kk-accent);
  font-size: 14px;
}

.socialShell .tournamentDetailHero {
  min-height: auto !important;
  padding: clamp(22px, 4vw, 36px) !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  border: 1px solid var(--kk-border);
  border-radius: var(--kk-radius);
  background: #28211c linear-gradient(97deg, #28211c 0%, #28211cf2 60%, #43302473);
  color: var(--kk-text);
  box-shadow: none;
}

.socialShell .tournamentDetailHero h2 {
  margin: 12px 0 8px;
  color: var(--kk-text);
  font-size: clamp(26px, 4vw, 42px);
  letter-spacing: -.04em;
  line-height: 1.14;
}

.socialShell :is(.tournamentDetailHero p, .tournamentDetailHero .tournamentDetailFacts span) {
  color: var(--kk-muted);
}

.socialShell .tournamentDetailFacts {
  min-width: 0;
  gap: 0;
}

.socialShell .tournamentDetailFacts > div {
  align-items: baseline;
  gap: 8px 14px;
  padding-block: 9px;
  border-color: var(--kk-border);
}

.socialShell .tournamentDetailFacts strong {
  overflow-wrap: anywhere;
}

.socialShell .socialTournamentNav {
  margin: 0;
}

.socialShell .tournamentDetailGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
}

.socialShell .tournamentDetailPanel {
  min-width: 0;
  border-color: var(--kk-border) !important;
  background: var(--kk-surface);
}

.socialShell .tournamentDetailHeading > span {
  color: var(--kk-accent);
}

.socialShell .tournamentDetailHeading h3 {
  font-size: clamp(19px, 2.5vw, 24px);
  line-height: 1.25;
}

.socialShell :is(.tournamentParticipants > div, .socialTournamentTeams, .tournamentCalculationState) {
  background: var(--kk-surface-raised);
  color: var(--kk-text);
}

.socialShell :is(.tournamentParticipants span, .tournamentEvidenceDetails, .tournamentScoreNote, .tournamentSourceNote) {
  color: var(--kk-muted);
  font-size: 13px;
  line-height: 1.55;
}

.socialShell .tournamentSourceConflict {
  border-color: #a48153;
  background: #3b3226;
  color: #f1d39e;
}

.socialShell .tournamentResultTable,
.socialShell .tournamentResults {
  border-color: var(--kk-border);
}

.socialShell :is(.tournamentResultTable table, .tournamentPointsTable table) {
  background: var(--kk-surface);
  color: var(--kk-text);
}

.socialShell :is(.tournamentResultTable thead, .tournamentPointsTable thead, .tournamentResultsHead) {
  background: var(--kk-surface-raised);
  color: var(--kk-muted);
}

.socialShell :is(.tournamentResultTable tbody tr:nth-child(even), .tournamentResultsRow:nth-child(even)) {
  background: #332820;
}

.socialShell :is(.tournamentResultTable th, .tournamentResultTable td, .tournamentPointsTable th, .tournamentPointsTable td, .tournamentResultsRow) {
  border-color: var(--kk-border);
}

.socialShell :is(.tournamentRowState, .tournamentResultsRow > span) {
  color: var(--kk-muted);
  font-size: 13px;
}

.socialShell .tournamentDisqualified .tournamentRowState {
  color: #ffb7b3;
}

.socialShell .tournamentPlace {
  background: #564338;
  color: var(--kk-text);
}

.socialShell .tournamentPlace1 { background: #433624; color: #ffe0a1; }
.socialShell .tournamentPlace2 { background: #4b372a; color: #f1e1d0; }
.socialShell .tournamentPlace3 { background: #433129; color: #facbb5; }

.socialShell .tournamentSeason {
  padding: clamp(16px, 3vw, 24px);
  border-color: var(--kk-border);
  border-radius: var(--kk-radius);
  background: var(--kk-surface);
}

.socialShell :is(.tournamentSeasonSearch label, .tournamentSeasonGrid span, .tournamentSeasonGrid small) {
  color: var(--kk-muted);
}

.socialShell .tournamentSeasonSearch input {
  border-color: var(--kk-border);
  background: var(--kk-bg);
  color: var(--kk-text);
}

.socialShell .socialTournamentTimeline {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 16px 0 0;
  padding: 0;
}

.socialShell .socialTournamentTimeline li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: start;
  justify-items: start;
  gap: 4px 13px;
  padding-bottom: 12px;
  text-align: left;
}

.socialShell .socialTournamentTimeline li:not(:last-child)::before {
  top: 38px;
  right: auto;
  bottom: 0;
  left: 19px;
  width: 2px;
  height: auto;
  background: var(--kk-border);
}

.socialShell .socialStageNumber {
  grid-row: 1 / span 2;
  border-radius: 10px;
  background: var(--kk-surface-raised);
  color: var(--kk-muted);
}

.socialShell .socialTournamentTimeline li[aria-current] .socialStageNumber {
  background: #423024;
  box-shadow: inset 0 0 0 1px var(--kk-accent);
  color: var(--kk-accent);
}

.socialShell .socialTournamentTimeline button {
  min-height: 40px;
  padding: 4px 0;
  background: transparent;
  color: var(--kk-text);
  text-align: left;
}

.socialShell .socialTournamentTimeline p {
  grid-column: 2;
}

.socialShell :is(.socialTournamentTimeline p, .socialTournamentFeed p, .socialTournamentFeed article > span) {
  color: var(--kk-muted);
}

.socialContext .socialTournamentContext {
  background: var(--kk-surface);
  color: var(--kk-text);
}

.socialTournamentContext > p {
  color: var(--kk-muted);
}

.socialTournamentContext .socialTournamentTop {
  background: var(--kk-surface-raised);
  color: var(--kk-text);
}

.socialTournamentContext .socialTournamentTop > div {
  border-color: var(--kk-border);
}

.socialTournamentContext .socialTournamentTop b {
  color: #f1d39e;
}

.socialTournamentContext button {
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
  color: var(--kk-accent);
}

@container (min-width: 660px) {
  .socialShell .tournamentHubGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .socialShell .tournamentDetailHero {
    grid-template-columns: minmax(0, 1.3fr) minmax(180px, .7fr);
    align-items: center;
  }
}

@media (max-width: 767px) {
  .socialShell .tournamentPointsTable tbody tr,
  .socialShell .tournamentResultTable tbody tr {
    border-color: var(--kk-border);
  }

  .socialShell .tournamentPointsTable tbody tr {
    padding-inline: 10px;
  }

  .socialShell .tournamentPointsTable td[data-label]::before {
    color: var(--kk-muted);
  }
}

/* Profiles and verified progress */
.socialShell .profileHero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  min-height: clamp(190px, 25vw, 260px) !important;
  gap: 14px 20px;
  padding: clamp(20px, 4vw, 34px) !important;
  border: 1px solid var(--kk-border) !important;
  border-radius: var(--kk-radius) !important;
  background-color: var(--kk-surface);
  background-position: center !important;
  background-size: cover;
  box-shadow: none;
  color: var(--kk-text);
}

.socialShell .profileHero:not([style*="background-image"]) {
  background-image: linear-gradient(92deg, #2c221bf5, #30251dde 62%, #30251d75), url('/brand/krikumi-ice.webp') !important;
}

.socialShell .profileHero::before {
  content: none;
}

.socialShell .profileHero[style*="background-image"]::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(0deg, #1b1714e6 0%, #1b171454 63%);
  content: "";
}

.socialShell .profileHero > :is(.avatar, .socialProfileAvatar) {
  width: clamp(58px, 8vw, 90px);
  height: clamp(58px, 8vw, 90px);
  flex: 0 0 auto;
  border: 2px solid #e1b388;
  background: #5b402e;
  box-shadow: 0 0 0 4px #362a22a0;
  color: #fff2e3;
  font-size: clamp(21px, 4vw, 32px);
}

.socialShell .profileHero > .avatar {
  display: grid;
  place-items: center;
}

.socialShell .profileHero[data-has-avatar="true"] > .avatar {
  display: none;
}

.socialShell .profileHero > div:not(.socialProfileHeroProgress) {
  min-width: 0;
}

.socialShell .profileHero h1 {
  margin: 3px 0 6px;
  color: var(--kk-text);
  font-family: inherit !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.socialShell .profileHero :is(.eyebrow, p) {
  margin: 0;
  color: #f2e3d3;
}

.socialShell .profileHero .socialProfilePresence {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #ecdbc9;
  font-size: 13px;
}

.socialShell .profileHero .socialProfilePresence[data-state="online"] {
  color: #a9e1bd;
}

.socialShell .socialProfileHeroEdit {
  max-width: 100%;
  min-height: 44px;
  padding: 8px 14px;
  border-color: #c29c7a;
  background: #28211ce8;
  color: var(--kk-text);
}

.socialShell .socialProfileHeroEdit:hover {
  background: var(--kk-surface-raised);
  color: var(--kk-accent);
}

.socialShell .profileLevel {
  margin-left: auto;
  padding: 8px 13px;
  border: 1px solid #e1b38880;
  border-radius: 10px;
  background: #362a22c9;
  color: var(--kk-text);
}

.socialShell .profileLevel small {
  color: #ecdbc9;
}

.socialShell .socialProfileNav {
  margin-block: 16px 20px;
}

.socialShell main:has(> .personalProfileHero):has(> .accountProfilePanel > .primary[data-account-open]) :is(.socialProfileNav,
  .profilePersonal,
  .socialProfilePreferences,
  .socialProfilePresence,
  .socialProfileNotice),
.socialShell:has(.personalProfileHero):has(.accountProfilePanel > .primary[data-account-open]) [data-profile-context] {
  display: none;
}

.socialShell :is(.profilePersonal > .forYouCard, .accountProfilePanel, .socialProfilePhotos, .socialProfilePreferences .panel) {
  min-width: 0;
  border-color: var(--kk-border);
  background: var(--kk-surface);
}

.socialShell .profilePersonal > .forYouCard {
  min-height: 0;
}

.socialShell .profilePersonal .forYouCard :is(h2, p) {
  font-family: inherit;
}

.socialShell .profilePersonal .forYouCard h2 {
  color: var(--kk-text);
  font-size: clamp(21px, 3vw, 27px);
  line-height: 1.25;
}

.socialShell .profilePersonal .forYouCard p {
  color: var(--kk-muted);
  font-size: 15px;
}

.socialShell .profilePersonal :is(.forYouNext, .forYouMetrics > div, .forYouGuestPoints > span),
.socialShell .accountProfilePanel .gameProfileBox {
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
}

.socialShell .profilePersonal :is(.forYouMetrics span, .forYouNext small, .forYouHint) {
  color: var(--kk-muted);
}

.socialShell .profilePersonal :is(.forYouMetrics b, .forYouNext strong, .forYouTop > strong) {
  color: var(--kk-text);
}

.socialShell .profilePersonal :is(.forYouTop > strong small, .forYouHint span, .forYouXp > div:first-child, .forYouGoal > b) {
  color: var(--kk-muted);
}

.socialShell .profilePersonal :is(.forYouXp > div:first-child b, .forYouNext > div:first-child > span) {
  color: var(--kk-accent);
}

.socialShell .profilePersonal :is(.forYouTrack, .forYouMiniTrack) {
  background: var(--kk-border);
}

.socialShell .profilePersonal :is(.forYouTrack, .forYouMiniTrack) i {
  background: var(--kk-accent);
}

.socialShell .socialProfilePreferences {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
  margin-top: 20px;
}

.socialShell .socialProfileEditingGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 14px;
}

.socialShell .socialProfileEditing > summary {
  display: list-item;
  padding: 12px 14px;
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
  color: var(--kk-accent);
}

.socialShell .socialProfilePreferences :is(p, .socialProfileBioTitle, .socialProfileCounters span) {
  color: var(--kk-muted);
}

.socialShell .socialProfileCounters strong {
  color: var(--kk-text);
}

.socialShell .socialProfilePreferences :is(fieldset, .socialProfileFriends li, .socialProfileCounters) {
  border-color: var(--kk-border);
}

.socialShell .socialProfilePreferences :is(input, textarea, select) {
  border-color: var(--kk-border);
  background: var(--kk-bg);
  color: var(--kk-text);
}

.socialShell .socialProfilePreferences input[type="checkbox"] {
  accent-color: var(--kk-accent);
}

.socialShell :is(.socialProfilePreferences, .socialProfilePhotos) button:not(.primary, .secondary) {
  min-height: 44px;
  padding: 8px 13px;
  border: 1px solid var(--kk-border);
  border-radius: 10px;
  background: var(--kk-surface-raised);
  color: var(--kk-text);
}

.socialShell :is(.socialProfilePreferences, .socialProfilePhotos) button:not(.primary, .secondary, :disabled):hover {
  border-color: #a08060;
  color: var(--kk-accent);
}

.socialShell .socialProfilePreferences [data-profile-edit] button[type="submit"] {
  border-color: var(--kk-accent);
  background: var(--kk-accent);
  color: var(--kk-accent-ink);
}

.socialShell .socialProfilePreferences > a {
  color: var(--kk-accent);
}

.socialShell :is(.socialProfileFriendContext, .socialProfileLakeContext) h2 small {
  margin-left: 4px;
  color: var(--kk-muted);
  font-size: 13px;
}

.socialShell :is(.socialProfileFriendContext button, .socialProfileLakeContext button) {
  color: var(--kk-accent);
}

.socialShell .socialProfileFriendContext [data-state="online"] {
  color: #a9e1bd;
}

.socialShell .socialContextAvatar,
.socialShell .socialFavoriteLakeGrid > div {
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
  color: var(--kk-text);
}

.socialShell .socialFavoriteLakeGrid span {
  color: var(--kk-accent);
}

.socialShell .profileStats {
  grid-template-columns: repeat(auto-fit, minmax(min(112px, 100%), 1fr));
  gap: 10px;
}

.socialShell .profileStats .stat {
  min-width: 0;
  border-color: var(--kk-border);
  background: var(--kk-surface);
}

.socialShell .profileStats .stat strong {
  color: var(--kk-text);
}

.socialShell .profileStats .stat span {
  color: var(--kk-muted);
}

:is(.socialShell,
  .accountDialog) :is(.verifiedGameProfileHead,
  .verifiedXpCard,
  .verifiedProgressGrid,
  .verifiedAchievement,
  .verifiedAchievementProgress,
  .accountLinkedLevel,
  .accountLinkedOfficial > div,
  .accountLinkedArchive > div,
  .accountLinkedAchievement,
  .accountLinkedGame,
  .playerLakeFacts,
  .playerLakeFactsGrid article) {
  border-color: var(--kk-border);
  background: var(--kk-surface);
  color: var(--kk-text);
}

:is(.socialShell,
  .accountDialog) :is(.verifiedGameProfileHead p,
  .verifiedXpCard small,
  .verifiedXpTop span,
  .verifiedProgressGrid :is(span, small),
  .verifiedAchievement small,
  .verifiedAchievementHead strong,
  .verifiedAchievementProgress p,
  .accountLinkedHead p,
  .accountLinkedLevel :is(span, small),
  .accountLinkedOfficial :is(span, small),
  .accountLinkedArchive :is(span, small),
  .accountLinkedAchievement small,
  .accountLinkedAchievementsHead small,
  .accountLinkedGame :is(span, small),
  .playerBestCard :is(span, small),
  .playerProgressHead > span,
  .playerLakeFacts :is(span, small)) {
  color: var(--kk-muted);
  font-size: 13px;
  line-height: 1.5;
}

:is(.socialShell, .accountDialog) :is(.verifiedAchievementGrid, .verifiedAchievementProgressGrid, .accountLinkedAchievementList, .playerBestGrid) {
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: 10px;
}

:is(.socialShell, .accountDialog) :is(.verifiedAchievement, .verifiedAchievementProgress, .accountLinkedAchievement) {
  padding: 13px 14px;
  border-radius: 12px;
}

:is(.socialShell,
  .accountDialog) :is(.verifiedAchievement strong,
  .verifiedAchievementProgress strong,
  .accountLinkedAchievement strong,
  .accountLinkedGame strong) {
  color: var(--kk-text);
  font-size: 15px;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

.accountDialog :is(.accountLinkedAchievement small, .accountLinkedOfficial small, .accountLinkedArchive small) {
  white-space: normal;
}

:is(.socialShell, .accountDialog) :is(.verifiedAchievementHead span, .accountLinkedAchievementsHead span) {
  color: var(--kk-text);
  font-size: 16px;
}

:is(.socialShell,
  .accountDialog) :is(.verifiedAchievementProgress span,
  .accountLinkedAchievement > b,
  .accountLinkedGame b,
  .accountLinkedLevelValue b,
  .verifiedXpTop > b) {
  color: var(--kk-accent);
  font-size: 13px;
}

:is(.socialShell, .accountDialog) :is(.verifiedXpTrack, .verifiedMiniTrack, .accountLinkedLevelBar, .accountLinkedAchievementBar) {
  height: 6px;
  background: var(--kk-border);
}

:is(.socialShell, .accountDialog) :is(.verifiedXpTrack, .verifiedMiniTrack, .accountLinkedLevelBar, .accountLinkedAchievementBar) i {
  background: var(--kk-accent);
}

.socialShell .verifiedAchievement > span,
.accountDialog .accountLinkedAchievement.unlocked > div:first-child > span,
.accountDialog .accountLinkedAchievement.unlocked > b {
  color: #a9e1bd;
}

.accountDialog .accountLinkedAchievement.unlocked .accountLinkedAchievementBar i {
  background: #a9e1bd;
}

.accountDialog .accountLinkedAchievement > div:first-child > span {
  color: var(--kk-accent);
}

:is(.socialShell, .accountDialog) :is(.accountLinkedUnavailable, .accountLinkedEmpty, .accountLinkedLoading, .verifiedAchievementEmpty) {
  border-color: var(--kk-border);
  background: var(--kk-surface);
  color: var(--kk-muted);
  font-size: 14px;
}

:is(.socialShell, .accountDialog) :is(.accountLinkedConflict, .playerAchievementGuard) {
  border-color: #6f5740;
  background: #332a24;
  color: #f1d39e;
}

.socialShell .playerAchievementGuard :is(span, strong) {
  color: #f1d39e;
  font-size: 13px;
}

@media (max-width: 767px) {
  .socialShell .profileHero:not([style*="background-image"]) {
    background-image: linear-gradient(92deg, #2c221bf5, #30251dd9), url('/brand/krikumi-ice.webp') !important;
  }

  .socialShell .socialProfileNav {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 3px 3px 8px;
  }

  .socialShell .socialProfileNav > :is(button, a) {
    flex: 0 0 auto;
  }

  .socialShell .socialProfileHeroEdit {
    margin-left: 0;
  }
}

/* Staff workspace */
.socialShell .adminWorkspaceMain {
  width: 100%;
  padding-top: 0;
}

.adminToday {
  gap: 16px;
  color: var(--kk-text);
  overflow-wrap: anywhere;
}

.adminTodayHero {
  align-items: start;
  padding: clamp(20px, 4vw, 32px);
  border-color: var(--kk-border);
  border-radius: var(--kk-radius);
  background: var(--kk-surface);
  box-shadow: inset 3px 0 0 #876247;
  color: var(--kk-text);
}

.adminTodayHero h1 {
  margin: 7px 0 9px;
  color: var(--kk-text);
  font-family: inherit;
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1.1;
}

.adminTodayHero > div:first-child {
  min-width: 0;
}

.adminHeroActions {
  justify-content: flex-start;
}

.adminOverall {
  min-height: 36px;
  font-size: 13px;
}

.adminOverall.good,
.adminCalm {
  border-color: #355b4b;
  background: #1b3b35;
  color: #a9e1bd;
}

.adminOverall.warn,
.adminRoleNotice {
  border-color: #625140;
  background: #3b3226;
  color: #f1d39e;
}

.adminTodayStatus,
.adminTodayGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: 16px;
}

.adminToday :is(.adminStatusCard, .adminPanel) {
  min-width: 0;
  padding: clamp(17px, 3vw, 24px);
  border-color: var(--kk-border);
  border-radius: var(--kk-radius);
  background: var(--kk-surface);
  box-shadow: none;
  color: var(--kk-text);
}

.adminToday .adminStatusCard {
  min-height: 0;
}

.adminStatusCard.good {
  border-color: #355b4b;
}

.adminStatusCard.warn {
  border-color: #625140;
}

.adminToday :is(.adminCardHead, .adminSectionHead) h2 {
  color: var(--kk-text);
  font-size: clamp(20px, 2.8vw, 24px);
  letter-spacing: -.025em;
  line-height: 1.24;
}

.adminToday .adminSectionHead {
  flex-wrap: wrap;
  align-items: center;
}

.adminToday .adminKicker {
  color: var(--kk-accent);
  letter-spacing: .08em;
}

.adminToday :is(.adminTodayHero p,
  .adminStatusCard > p,
  .adminPublicationSummary,
  .adminEmptyState p,
  .adminQuickNote,
  .adminAttentionList small,
  .adminTournamentList small,
  .adminTournamentList em,
  .adminServerNumbers span,
  .adminQuickGrid small,
  .adminTodayFooter) {
  color: var(--kk-muted);
  font-size: 14px;
  line-height: 1.55;
}

.adminToday :is(.adminTextAction, .adminSectionHead > button, .adminTourDate) {
  color: var(--kk-accent);
  font-size: 14px;
}

.adminToday :is(.adminTextAction, .adminSectionHead > button) {
  max-width: 100%;
  min-height: 44px;
  padding: 6px 0;
  text-align: left;
}

.adminToday .adminTextAction:hover,
.adminToday .adminSectionHead > button:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.adminToday .adminServerNumbers {
  margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(min(86px, 100%), 1fr));
}

.adminToday :is(.adminServerNumbers > div, .adminAttentionList > div, .adminTournamentList > div, .adminQuickGrid button) {
  min-width: 0;
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
  color: var(--kk-text);
}

.adminToday .adminServerNumbers strong {
  color: var(--kk-text);
  font-size: clamp(17px, 2.5vw, 22px);
  font-variant-numeric: tabular-nums;
}

.adminToday .adminEmptyState {
  border-color: var(--kk-border);
}

.adminToday .adminEmptyState > span,
.adminToday .adminQuickGrid button > span {
  flex-shrink: 0;
  background: #423024;
  color: var(--kk-accent);
}

.adminToday .adminQuickPanel {
  grid-column: 1 / -1;
}

.adminToday .adminQuickGrid {
  grid-template-columns: repeat(auto-fit, minmax(min(225px, 100%), 1fr));
  gap: 9px;
}

.adminToday .adminQuickGrid button {
  min-height: 66px;
}

.adminToday .adminQuickGrid button:hover {
  border-color: #a08060;
  background: #423124;
}

.adminToday .adminQuickGrid b {
  color: var(--kk-accent);
}

.adminToday :is(.adminCommandGuide, .adminControlReadiness) {
  color: var(--kk-muted);
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
}

.adminToday .adminCommandGuide summary {
  min-height: 38px;
  padding-block: 7px;
  color: var(--kk-accent);
}

/* Account and staff dialogs */
:is(.accountModal,
  .adminTeamBackdrop,
  .gameControlBackdrop,
  .modWarningBackdrop,
  .webSuspensionBackdrop,
  .mediaBackdrop,
  .notificationBackdrop,
  .reportBackdrop,
  .paeBackdrop,
  .taeBackdrop) {
  background: #15110ebd;
  backdrop-filter: blur(5px);
}

:is(.accountDialog,
  .adminTeamDialog,
  .gameControlDialog,
  .modWarningDialog,
  .webSuspensionDialog,
  .mediaDialog,
  .notificationDialog,
  .reportDialog,
  .paeModal,
  .taeModal) {
  min-width: 0;
  border-color: var(--kk-border);
  background: var(--kk-surface);
  box-shadow: 0 18px 52px #15110e73;
  color: var(--kk-text);
  color-scheme: dark;
  overflow-wrap: anywhere;
}

:is(.accountDialog,
  .adminTeamDialog,
  .gameControlDialog,
  .modWarningDialog,
  .webSuspensionDialog,
  .mediaDialog,
  .notificationDialog,
  .reportDialog,
  .paeModal,
  .taeModal) :is(h1, h2, h3, h4, legend) {
  color: var(--kk-text);
  font-family: inherit;
}

:is(.accountDialog,
  .adminTeamDialog,
  .gameControlDialog,
  .modWarningDialog,
  .webSuspensionDialog,
  .mediaDialog,
  .notificationDialog,
  .reportDialog,
  .paeModal,
  .taeModal) :is(label, small,
  .accountEmail,
  .accountHint,
  .mediaTop p,
  .reportTop p,
  .reportList > p,
  .reportReference,
  .paeHint,
  .taeReviewCaution) {
  color: var(--kk-muted);
}

:is(.accountDialog,
  .adminTeamDialog,
  .gameControlDialog,
  .modWarningDialog,
  .webSuspensionDialog,
  .mediaDialog,
  .notificationDialog,
  .reportDialog,
  .paeModal,
  .taeModal) :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  max-width: 100%;
  min-height: 44px;
  border-color: #71543e;
  background: var(--kk-bg);
  color: var(--kk-text);
  font: inherit;
}

:is(.accountDialog,
  .adminTeamDialog,
  .gameControlDialog,
  .modWarningDialog,
  .webSuspensionDialog,
  .mediaDialog,
  .notificationDialog,
  .reportDialog,
  .paeModal,
  .taeModal) :is(input, textarea)::placeholder {
  color: var(--kk-muted);
}

:is(.accountDialog,
  .adminTeamDialog,
  .gameControlDialog,
  .modWarningDialog,
  .webSuspensionDialog,
  .mediaDialog,
  .notificationDialog,
  .reportDialog,
  .paeModal,
  .taeModal) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--kk-accent) !important;
  outline-offset: 2px;
}

:is(.accountClose,
  .gameControlClose,
  .adminTeamDialog header button,
  .modWarningDialog header button,
  .webSuspensionDialog header button,
  .mediaTop > button,
  .notificationDialog header button,
  .reportTop > button,
  .paeHeader > button,
  .taeHeader > button) {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
  color: var(--kk-text);
}

:is(.gameProfileBox,
  .gameControlPreview,
  .adminTeamRow,
  .modWarningRow,
  .webSuspensionItem,
  .mediaItem,
  .notificationItem,
  .reportCreate,
  .reportItem,
  .paeItem,
  .paeGameItem,
  .paePreviewBody,
  .taeItem,
  .taePreviewHero,
  .taePreview section,
  .taeResultEvidence,
  .taeReviewHistory) {
  min-width: 0;
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
  color: var(--kk-text);
}

:is(.accountDialog .gameProfileBox p,
  .accountDialog .gameProfileClaimForm label,
  .gameControlDialog p,
  .adminTeamDialog header p,
  .adminTeamRow small,
  .adminTeamRow > span,
  .adminTeamHistory p,
  .adminTeamReason label,
  .modWarningDialog header p,
  .modWarningRow small,
  .webSuspensionDialog header p,
  .webSuspensionItem small,
  .mediaItem small,
  .mediaItem label,
  .mediaHistory p,
  .notificationDialog header p,
  .notificationItem small,
  .reportItem > p,
  .reportItem > small,
  .reportItem .reportReference,
  .reportHistory p,
  .paeItem p,
  .paeItem em,
  .paeGameItem small,
  .paeGameItem span,
  .paePreviewBody p,
  .taeForm label > span,
  .taeItem small,
  .taeItem em,
  .taePreviewHero p,
  .taePreviewHero div,
  .taePreview section p,
  .taeResultEvidence p,
  .taeResultEvidence small,
  .taeResultEvidence th) {
  color: var(--kk-muted);
}

:is(.accountTabs, .adminTeamReason, .modWarningDialog form, .webSuspensionDialog form, .mediaUpload, .reportHistory, .paePublishNote, .taePublishNote) {
  border-color: var(--kk-border);
  background: var(--kk-bg);
}

:is(.accountTabs button,
  .reportQueueFilters button,
  .adminTeamRow button,
  .modWarningRow button,
  .paeGameActions .secondary,
  .paeFormActions .secondary,
  .paePreviewActions .secondary) {
  min-height: 44px;
  border-color: var(--kk-border);
  background: var(--kk-surface-raised);
  color: var(--kk-muted);
}

:is(.accountTabs button.active, .reportQueueFilters button[aria-pressed="true"]) {
  border-color: var(--kk-accent);
  background: #423024;
  color: var(--kk-accent);
}

:is(.adminTeamMessage, .modWarningMessage, .webSuspensionMessage, .mediaNotice, .notificationNotice, .reportNotice, .paeNotice, .taeNotice) {
  background: #423024;
  color: var(--kk-text);
}

:is(.paeHeader, .taeHeader) {
  border-color: var(--kk-border);
  background: var(--kk-surface);
}

:is(.paeHeader span,
  .paePreviewBody > span,
  .paeBack,
  .taeHeader span,
  .taeEditorTop span,
  .taePreviewHero > span,
  .taePreview section > span,
  .taeItem div > span,
  .taeItem b,
  .taeBack,
  .gameControlKicker) {
  color: var(--kk-accent);
}

:is(.taeModal, .paeModal, .accountDialog) .primary,
:is(.adminCreateTournamentButton, .adminPublicationButton, .gameControlActions button[type="submit"]) {
  min-height: 46px;
  border-color: var(--kk-accent) !important;
  background: var(--kk-accent) !important;
  box-shadow: none;
  color: var(--kk-accent-ink) !important;
}

:is(.taeModal, .paeModal, .accountDialog) .primary:not(:disabled):hover,
:is(.adminCreateTournamentButton, .adminPublicationButton, .gameControlActions button[type="submit"]):not(:disabled):hover {
  background: #ffcc9d !important;
}

:is(.taePublishNote strong, .gameProfileStatus.verified) {
  color: #a9e1bd;
}

:is(.taeResultEvidence th, .taeResultEvidence td, .taeReviewHistory li, .adminTeamHistory, .adminTeamHistory p, .modWarningHistory, .modWarningHistory p) {
  border-color: var(--kk-border);
}

:is(.notificationItem:hover, .paeItem:hover, .taeItem:hover, .paeGameItem:hover, .paeGameItem:focus-visible) {
  border-color: #a08060;
  background: #423124;
}

@media (max-width: 700px) {
  .adminTodayHero {
    gap: 16px;
  }

  .adminToday .adminHeroActions {
    justify-content: flex-start;
  }

  .adminHeroActions .adminOverall {
    flex-basis: 100%;
  }

  :is(.paeModal, .taeModal) {
    max-height: 100dvh;
    height: 100dvh;
  }

  :is(.accountDialog, .adminTeamDialog, .gameControlDialog, .modWarningDialog, .webSuspensionDialog, .mediaDialog, .notificationDialog, .reportDialog) {
    max-height: calc(100dvh - 22px);
  }
}