/* V1.28Beta identity-select-polish1: frameless identity selection board and non-distorted chaos confirm art. */
html body:not(.maintenance-mode) {
  --identity-select-chaos-bg-art: url("assets/identity/identity-chaos-avatar-gpt2.png?v=V1.28Beta-identity-select-polish1");
  --identity-select-justice-bg-art: url("assets/identity/identity-chosen-one-gpt2.png?v=V1.28Beta-identity-select-polish1");
  --identity-confirm-chaos-action-art: url("assets/ui/identity-confirm-chaos-action-v1.png?v=V1.28Beta-identity-select-polish1");
}

html body:not(.maintenance-mode) #appRoot.app.identity-select-app .topbar {
  display: none !important;
}

html body:not(.maintenance-mode) #appRoot.app.identity-select-app .arena {
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 0 !important;
  padding: clamp(4px, 0.8vh, 10px) clamp(8px, 1.2vw, 18px) !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase] {
  width: min(1720px, calc(100vw - 48px)) !important;
  height: min(1040px, calc(100dvh - 18px)) !important;
  max-height: calc(100dvh - 18px) !important;
  min-height: 0 !important;
  place-self: start center !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: clamp(10px, 1vw, 16px) !important;
  padding: clamp(12px, 1.2vw, 20px) !important;
  border: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow:
    0 20px 52px rgba(2, 4, 12, 0.5),
    inset 0 0 0 1px rgba(207, 232, 255, 0.12) !important;
  backdrop-filter: none !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase]::before,
html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase]::after {
  display: none !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] {
  background:
    linear-gradient(180deg, rgba(6, 4, 11, 0.18), rgba(6, 4, 11, 0.78)),
    radial-gradient(ellipse at 50% 48%, rgba(116, 58, 196, 0.34), transparent 52%),
    radial-gradient(circle at 18% 82%, rgba(65, 255, 224, 0.12), transparent 24rem),
    radial-gradient(circle at 86% 18%, rgba(191, 77, 255, 0.14), transparent 22rem),
    var(--identity-select-chaos-bg-art) center 46% / cover no-repeat,
    #08060e !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="justice_select"] {
  background:
    linear-gradient(180deg, rgba(244, 251, 255, 0.18), rgba(7, 24, 39, 0.5)),
    radial-gradient(ellipse at 50% 48%, rgba(111, 202, 255, 0.28), transparent 54%),
    radial-gradient(circle at 18% 82%, rgba(255, 239, 168, 0.14), transparent 24rem),
    var(--identity-select-justice-bg-art) center 46% / cover no-repeat,
    #0b1a2c !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-select-head {
  min-height: 0 !important;
  padding: clamp(8px, 0.9vw, 14px) clamp(16px, 2vw, 28px) !important;
  border-radius: 14px !important;
  background:
    linear-gradient(100deg, rgba(245, 249, 255, 0.84), rgba(202, 224, 241, 0.58) 50%, rgba(120, 80, 155, 0.22)),
    rgba(232, 241, 249, 0.58) !important;
  box-shadow:
    0 12px 28px rgba(3, 6, 14, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-select-head strong {
  font-size: clamp(34px, 3.4vw, 62px) !important;
  line-height: 0.98 !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-layout {
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(380px, 0.95fr) minmax(460px, 1.05fr) !important;
  gap: clamp(14px, 1.8vw, 26px) !important;
  align-items: stretch !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-card-display,
html body:not(.maintenance-mode) #identitySelect .identity-action-panel {
  min-height: 0 !important;
  border: 1px solid rgba(203, 232, 255, 0.28) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(7, 10, 18, 0.24), rgba(7, 10, 18, 0.66)),
    radial-gradient(ellipse at 50% 0%, rgba(166, 217, 255, 0.18), transparent 48%),
    rgba(13, 12, 25, 0.74) !important;
  box-shadow:
    0 18px 42px rgba(2, 4, 12, 0.36),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-card-display {
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-card-art {
  position: relative !important;
  min-height: 0 !important;
  height: 100% !important;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.02), rgba(4, 6, 12, 0.24) 78%, rgba(4, 6, 12, 0.42)),
    var(--identity-art, none) center 26% / cover no-repeat,
    rgba(9, 10, 18, 0.92) !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-self-marker {
  position: absolute !important;
  left: clamp(14px, 1.3vw, 24px) !important;
  bottom: clamp(12px, 1.25vw, 22px) !important;
  z-index: 24 !important;
  display: inline-grid !important;
  align-items: center !important;
  min-height: 34px !important;
  padding: 5px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(237, 250, 255, 0.5) !important;
  background:
    linear-gradient(90deg, rgba(4, 7, 16, 0.84), rgba(25, 18, 42, 0.68)),
    rgba(4, 7, 16, 0.78) !important;
  color: #fff8df !important;
  font-size: clamp(13px, 0.95vw, 18px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.88),
    0 0 12px rgba(162, 82, 255, 0.38) !important;
  box-shadow:
    0 8px 18px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

html body:not(.maintenance-mode) #identitySelect #identityOwnCard > .identity-role-badge {
  top: clamp(18px, 2.1vh, 34px) !important;
  right: clamp(34px, 3vw, 62px) !important;
  transform: none !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-card-copy {
  padding: clamp(13px, 1.3vw, 20px) !important;
  gap: 7px !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-card-copy strong {
  font-size: clamp(30px, 3.4vw, 58px) !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-card-copy p {
  font-size: clamp(13px, 1.1vw, 18px) !important;
  line-height: 1.42 !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-action-panel {
  display: grid !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
  gap: clamp(10px, 1.1vw, 16px) !important;
  padding: clamp(18px, 2vw, 32px) !important;
}

html body:not(.maintenance-mode) #identitySelect .identity-option-grid {
  min-height: 0 !important;
  overflow: auto !important;
  align-content: start !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] .identity-confirm {
  width: min(640px, 92%) !important;
  aspect-ratio: 2048 / 400 !important;
  min-height: 0 !important;
  height: auto !important;
  justify-self: center !important;
  align-self: end !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 clamp(28px, 3vw, 54px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--identity-confirm-chaos-action-art) center / contain no-repeat !important;
  box-shadow: none !important;
  color: #fff8df !important;
  -webkit-text-fill-color: #fff8df !important;
  font-size: clamp(15px, 1.35vw, 24px) !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  text-align: center !important;
  text-shadow:
    0 2px 5px rgba(0, 0, 0, 0.96),
    0 0 16px rgba(192, 92, 255, 0.62),
    0 0 2px rgba(255, 255, 255, 0.72) !important;
  filter: none !important;
}

html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] .identity-confirm:disabled {
  opacity: 0.48 !important;
  filter: grayscale(0.35) brightness(0.72) !important;
}

@media (max-width: 900px) {
  html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase] {
    width: calc(100vw - 14px) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 10px !important;
    grid-template-rows: auto auto auto !important;
  }

  html body:not(.maintenance-mode) #identitySelect .identity-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  html body:not(.maintenance-mode) #identitySelect .identity-card-art {
    min-height: clamp(230px, 54vw, 360px) !important;
  }

  html body:not(.maintenance-mode) #identitySelect.identity-select[data-phase="evil_select"] .identity-confirm {
    width: min(390px, 96%) !important;
  }
}