.problem-codex-page {
  flex: 1 0 100%;
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  background: #f7f8f4;
  color: #172033;
}

.problem-codex-main {
  width: min(1680px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 44px 0 48px;
}

.problem-codex-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 28px;
  align-items: end;
  padding: 18px 0 22px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.12);
}

.problem-codex-hero__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: #44615c;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.problem-codex-hero h1 {
  margin: 0;
  color: #101827;
  font-size: 38px;
  line-height: 1.12;
  letter-spacing: 0;
}

.problem-codex-hero p {
  max-width: none;
  margin: 12px 0 0;
  color: #5c6878;
  font-size: 15px;
  line-height: 1.65;
  white-space: nowrap;
}

.problem-codex-summary {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.problem-codex-metric {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.problem-codex-metric span {
  display: inline;
  color: #7a8493;
  font-size: 12px;
  font-weight: 750;
  text-transform: lowercase;
}

.problem-codex-metric strong {
  display: inline;
  margin-top: 0;
  color: #4d596b;
  font-size: 18px;
  font-weight: 850;
  line-height: 1;
}

.problem-codex-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 26px;
}

.problem-codex-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 11px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #425064;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}

.problem-codex-filter:hover,
.problem-codex-filter.is-active {
  border-color: #376d63;
  color: #173f39;
  background: #eef7f3;
}

.problem-codex-filter em {
  color: #6d7888;
  font-style: normal;
  font-size: 12px;
}

.problem-codex-filter__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #cbd5e1;
}

.problem-codex-filter__dot--all {
  background: linear-gradient(135deg, #376d63, #c99a3e);
}

.problem-codex-groups {
  width: 100%;
}

.problem-codex-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.problem-codex-group__header > div {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
}

.problem-codex-group__swatch {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92);
}

.problem-codex-group__header h2 {
  margin: 0;
  color: #172033;
  font-size: 19px;
  line-height: 1.2;
}

.problem-codex-group__header p {
  margin: 0;
  color: #657183;
  font-size: 13px;
  font-weight: 750;
}

.problem-codex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 260px));
  gap: 14px;
  justify-content: start;
}

.problem-codex-card {
  --problem-card-accent: #94a3b8;
  position: relative;
  display: grid;
  grid-template-rows: auto 230px minmax(116px, 1fr);
  min-height: 381px;
  padding: 12px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}

.problem-codex-card > * {
  position: relative;
  z-index: 1;
}

.problem-codex-card:hover {
  border-color: rgba(55, 109, 99, 0.6);
  box-shadow: 0 14px 32px rgba(23, 32, 51, 0.12);
  transform: translateY(-1px);
}

.problem-codex-card--locked {
  cursor: pointer;
  background:
    repeating-linear-gradient(-45deg, rgba(23, 32, 51, 0.025) 0 8px, transparent 8px 16px),
    #f4f5f1;
}

.problem-codex-card--rarity-preview {
  background: #ffffff;
}

.problem-codex-card--common {
  border-color: rgba(100, 116, 139, 0.16);
  background:
    linear-gradient(135deg, #ffffff 0%, #ffffff 52%, #f5f7f9 100%),
    #ffffff;
}

.problem-codex-card--uncommon {
  border-color: rgba(49, 122, 108, 0.24);
  background:
    linear-gradient(135deg, #f2fbf8 0%, #ffffff 46%, #ffffff 58%, #e6f5ef 100%),
    #ffffff;
}

.problem-codex-card--rare {
  border-color: rgba(54, 103, 180, 0.3);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 0 33%, rgba(255, 255, 255, 0.58) 43%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(135deg, #f2f7ff 0%, #ffffff 42%, #ffffff 56%, #e7f0fb 100%),
    #ffffff;
}

.problem-codex-card--unique {
  border-color: rgba(190, 87, 158, 0.34);
  background:
    radial-gradient(circle at 15% 12%, rgba(219, 39, 119, 0.12), transparent 30%),
    radial-gradient(circle at 92% 88%, rgba(124, 58, 237, 0.08), transparent 34%),
    linear-gradient(135deg, #fff6fb 0%, #ffffff 45%, #fff0f8 100%);
}

.problem-codex-card--legendary {
  border-color: rgba(181, 126, 24, 0.42);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0) 0 31%, rgba(255, 248, 211, 0.72) 42%, rgba(255, 255, 255, 0) 54%),
    radial-gradient(circle at 16% 14%, rgba(245, 158, 11, 0.16), transparent 28%),
    radial-gradient(circle at 92% 90%, rgba(111, 85, 170, 0.1), transparent 34%),
    linear-gradient(135deg, #fffaf0 0%, #ffffff 48%, #fbf3dd 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 235, 163, 0.42);
}

.problem-codex-card--locked:hover {
  border-color: rgba(55, 109, 99, 0.28);
  box-shadow: 0 10px 22px rgba(23, 32, 51, 0.08);
  transform: translateY(-1px);
}

.problem-codex-card--ready {
  border-color: rgba(23, 32, 51, 0.14);
  background:
    repeating-linear-gradient(-45deg, rgba(23, 32, 51, 0.025) 0 8px, transparent 8px 16px),
    #f4f5f1;
  box-shadow: 0 14px 30px rgba(23, 32, 51, 0.08);
  animation: problem-codex-ready-wriggle 2.35s ease-in-out infinite;
}

.problem-codex-card--ready::before,
.problem-codex-card--ready::after {
  content: "";
  position: absolute;
  inset: 8px;
  z-index: 0;
  pointer-events: none;
  border-radius: 7px;
}

.problem-codex-card--ready::before {
  border: 1px solid rgba(23, 32, 51, 0.12);
  box-shadow: 0 0 18px rgba(23, 32, 51, 0.08);
  animation: problem-codex-ready-pulse 1.45s ease-in-out infinite;
}

.problem-codex-card--ready::after {
  background: linear-gradient(105deg, transparent 0 36%, rgba(255, 255, 255, 0.58) 46%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: problem-codex-ready-glint 2.3s ease-in-out infinite;
}

.problem-codex-card__reveal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 28px;
  margin-top: 10px;
  border-radius: 8px;
  background: #172033;
  color: #fff8df;
  font-size: 12px;
  font-weight: 900;
}

@keyframes problem-codex-ready-wriggle {
  0%, 58%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  63% {
    transform: translateY(-1px) rotate(-1deg);
  }
  68% {
    transform: translateY(0) rotate(0.85deg);
  }
  73% {
    transform: translateY(-1px) rotate(-0.6deg);
  }
  78% {
    transform: translateY(0) rotate(0.35deg);
  }
  83% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes problem-codex-ready-pulse {
  0%, 100% {
    opacity: 0.48;
    transform: scale(0.992);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes problem-codex-ready-glint {
  0%, 42% {
    transform: translateX(-120%);
    opacity: 0;
  }
  58% {
    opacity: 0.82;
  }
  76%, 100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

.problem-codex-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.problem-codex-card__number {
  color: #6d7888;
  font-size: 12px;
  font-weight: 850;
}

.problem-codex-card__state {
  min-width: 0;
  max-width: 120px;
  color: #376d63;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.problem-codex-card--locked .problem-codex-card__state {
  color: #7b8089;
}

.problem-codex-card__rarity {
  min-width: 0;
  max-width: 112px;
  padding: 3px 8px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4b5563;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.problem-codex-card__rarity--common {
  border-color: rgba(100, 116, 139, 0.16);
  background: rgba(248, 250, 252, 0.76);
  color: #5d6878;
}

.problem-codex-card__rarity--rare {
  border-color: rgba(54, 103, 180, 0.2);
  background: rgba(236, 245, 255, 0.82);
  color: #3667a8;
}

.problem-codex-card__rarity--uncommon {
  border-color: rgba(55, 109, 99, 0.18);
  background: rgba(236, 253, 245, 0.78);
  color: #28705f;
}

.problem-codex-card__rarity--unique {
  border-color: rgba(190, 87, 158, 0.22);
  background: rgba(255, 241, 248, 0.84);
  color: #a43f7d;
}

.problem-codex-card__rarity--legendary {
  border-color: rgba(181, 126, 24, 0.24);
  background: rgba(255, 248, 226, 0.86);
  color: #936316;
}

.problem-codex-card__portrait {
  position: relative;
  display: grid;
  place-items: center;
  margin: 10px 0 14px;
  border-radius: 8px;
  background: #fdfefe;
  border: 1px solid rgba(23, 32, 51, 0.08);
  overflow: hidden;
}

.problem-codex-card--locked .problem-codex-card__portrait {
  filter: grayscale(1);
  background:
    radial-gradient(circle at 50% 46%, rgba(23, 32, 51, 0.2), transparent 37%),
    linear-gradient(180deg, #ecefed, #dde1df);
}

.problem-codex-card--rarity-preview .problem-codex-card__portrait {
  filter: none;
  background: #ffffff;
}

.problem-codex-card__glyph {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.34), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 72%, #263241), #273f58);
  color: #f8fafc;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 12px 26px rgba(23, 32, 51, 0.18);
}

.problem-codex-card__image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-fit: cover;
  object-position: center center;
  background: transparent;
}

.problem-codex-card--common .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 48%, #8793a2), #526070);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 18px rgba(23, 32, 51, 0.12);
}

.problem-codex-card--uncommon .problem-codex-card__portrait {
  background: #ffffff;
}

.problem-codex-card--uncommon .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 66%, #5f8792), #40566f);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), 0 10px 22px rgba(23, 32, 51, 0.16);
}

.problem-codex-card--rare .problem-codex-card__portrait {
  background: #ffffff;
}

.problem-codex-card--rare .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.4), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 48%, #5ba4e5), #2f5f9f);
}

.problem-codex-card--unique .problem-codex-card__portrait {
  background: #ffffff;
}

.problem-codex-card--unique .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 38%, #ec6caf), #744074);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2), 0 14px 30px rgba(165, 64, 125, 0.22);
}

.problem-codex-card--legendary .problem-codex-card__portrait {
  background: #ffffff;
  border-color: rgba(181, 126, 24, 0.22);
}

.problem-codex-card--legendary .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.46), transparent 28%),
    linear-gradient(145deg, #d39c2b, color-mix(in srgb, var(--problem-card-accent) 44%, #273f58));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24), 0 16px 34px rgba(148, 103, 22, 0.28);
}

.problem-codex-card--resealed {
  border-color: rgba(23, 32, 51, 0.16);
  background:
    repeating-linear-gradient(-45deg, rgba(23, 32, 51, 0.026) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, #f4f5f1, #ecefed);
}

.problem-codex-card--resealed .problem-codex-card__portrait {
  filter: none;
  background:
    radial-gradient(circle at 50% 42%, rgba(23, 32, 51, 0.08), transparent 40%),
    linear-gradient(180deg, #f7f8f5, #e2e6e2);
  border-color: rgba(23, 32, 51, 0.12);
}

.problem-codex-card--resealed .problem-codex-card__image {
  filter: grayscale(0.82) saturate(0.48) brightness(0.86);
  opacity: 0.62;
}

.problem-codex-card--resealed .problem-codex-card__portrait::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 61%;
  z-index: 3;
  width: 64px;
  height: 48px;
  border-radius: 12px 12px 14px 14px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 45%, rgba(251, 252, 248, 0.94) 0 5px, transparent 6px),
    linear-gradient(180deg, #202938 0%, #0c1220 100%);
  border: 2px solid rgba(8, 13, 24, 0.92);
  box-shadow:
    0 0 0 10px rgba(251, 252, 248, 0.2),
    0 16px 30px rgba(23, 32, 51, 0.26),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -8px 16px rgba(0, 0, 0, 0.26);
  opacity: 0.94;
}

.problem-codex-card--resealed .problem-codex-card__portrait::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(61% - 48px);
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 8px solid #050914;
  border-bottom: 0;
  border-radius: 32px 32px 0 0;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow:
    inset 0 0 0 3px rgba(251, 252, 248, 0.16),
    0 -2px 0 rgba(255, 255, 255, 0.08) inset,
    0 4px 8px rgba(23, 32, 51, 0.18);
  opacity: 0.98;
}

.problem-codex-card--ready-evolution .problem-codex-card__portrait {
  box-shadow: 0 0 0 1px rgba(23, 32, 51, 0.1), 0 0 24px rgba(245, 203, 92, 0.2);
}

.problem-codex-card--locked .problem-codex-card__glyph {
  background: #293241;
  color: #aeb6c2;
  font-size: 42px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15);
}

.problem-codex-card--rarity-preview.problem-codex-card--locked .problem-codex-card__glyph {
  color: #f8fafc;
  font-size: 34px;
}

.problem-codex-card--rarity-preview.problem-codex-card--common .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.22), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 48%, #8793a2), #526070);
}

.problem-codex-card--rarity-preview.problem-codex-card--uncommon .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.32), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 66%, #5f8792), #40566f);
}

.problem-codex-card--rarity-preview.problem-codex-card--rare .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.4), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 48%, #5ba4e5), #2f5f9f);
}

.problem-codex-card--rarity-preview.problem-codex-card--unique .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.42), transparent 28%),
    linear-gradient(145deg, color-mix(in srgb, var(--problem-card-accent) 38%, #ec6caf), #744074);
}

.problem-codex-card--rarity-preview.problem-codex-card--legendary .problem-codex-card__glyph {
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.46), transparent 28%),
    linear-gradient(145deg, #d39c2b, color-mix(in srgb, var(--problem-card-accent) 44%, #273f58));
}

.problem-codex-card__body h3 {
  margin: 0;
  color: #172033;
  font-size: 15px;
  line-height: 1.25;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.problem-codex-card--locked .problem-codex-card__body h3 {
  color: #2f3744;
}

.problem-codex-card__body p {
  min-height: 36px;
  margin: 6px 0 10px;
  color: #687486;
  font-size: 12px;
  line-height: 1.45;
}

.problem-codex-card__progress-spacer {
  display: block;
  min-height: 36px;
  margin: 6px 0 10px;
}

.problem-codex-card__routines {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
}

.problem-codex-card__art-btn {
  width: 100%;
  height: 28px;
  margin-top: 10px;
  border: 1px solid rgba(23, 32, 51, 0.11);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.76);
  color: #4d596b;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}

.problem-codex-card__art-btn:hover {
  border-color: rgba(55, 109, 99, 0.34);
  background: #ffffff;
  color: #173f39;
}

.problem-codex-card__art-btn--next {
  margin-top: 6px;
  border-color: rgba(54, 103, 180, 0.18);
  background: rgba(236, 245, 255, 0.72);
  color: #315f9c;
}

.problem-codex-card__art-btn:disabled {
  cursor: wait;
  opacity: 0.7;
}

.problem-codex-routine-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  gap: 5px;
  padding: 4px 7px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #4d596b;
  font-size: 11px;
  font-weight: 750;
}

.problem-codex-routine-badge span {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.problem-codex-loading,
.problem-codex-empty {
  padding: 42px;
  border: 1px dashed rgba(23, 32, 51, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.72);
  color: #5c6878;
}

.problem-codex-empty strong,
.problem-codex-empty span {
  display: block;
}

.problem-codex-empty strong {
  margin-bottom: 8px;
  color: #172033;
}

.problem-codex-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}

.problem-codex-drawer.is-open {
  pointer-events: auto;
}

.problem-codex-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 24, 39, 0.44);
}

.problem-codex-drawer__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1280px, calc(100vw - 96px));
  max-height: min(820px, calc(100vh - 96px));
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: minmax(380px, 0.92fr) minmax(460px, 0.78fr);
  gap: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 10px;
  background: #fbfcf8;
  box-shadow: 0 30px 90px rgba(23, 32, 51, 0.24);
}

.problem-codex-drawer__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 36px;
  background: #ffffff;
  border-right: 1px solid rgba(23, 32, 51, 0.08);
}

.problem-codex-drawer__stage-inner {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.problem-codex-drawer__content {
  min-height: 0;
  max-height: inherit;
  overflow: auto;
  background: #fbfcf8;
}

.problem-codex-drawer__header {
  position: relative;
  top: 0;
  z-index: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 26px 24px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.1);
  background: rgba(251, 252, 248, 0.94);
  backdrop-filter: blur(12px);
}

.problem-codex-drawer__hero {
  display: contents;
}

.problem-codex-drawer__hero > div:last-child {
  min-width: 0;
}

.problem-codex-drawer-art {
  position: relative;
  display: grid;
  place-items: center;
  width: min(100%, 560px);
  height: 100%;
  max-height: 560px;
  min-height: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  overflow: hidden;
}

.problem-codex-drawer-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.problem-codex-drawer-art--resealed img {
  filter: grayscale(0.96) saturate(0.2) brightness(0.58) contrast(0.92);
  opacity: 0.56;
}

.problem-codex-drawer-art__chain {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.62;
  background:
    linear-gradient(32deg, transparent 0 38%, rgba(9, 14, 24, 0.72) 38% 43%, rgba(251, 252, 248, 0.18) 43% 44%, rgba(9, 14, 24, 0.72) 44% 49%, transparent 49% 100%),
    linear-gradient(-28deg, transparent 0 48%, rgba(9, 14, 24, 0.62) 48% 53%, rgba(251, 252, 248, 0.16) 53% 54%, rgba(9, 14, 24, 0.62) 54% 59%, transparent 59% 100%),
    repeating-linear-gradient(32deg, transparent 0 38px, rgba(255, 255, 255, 0.18) 38px 42px, transparent 42px 76px);
  mix-blend-mode: multiply;
}

.problem-codex-drawer-art--resealed::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  z-index: 4;
  width: 230px;
  height: 172px;
  border-radius: 30px 30px 36px 36px;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle at 50% 45%, rgba(251, 252, 248, 0.94) 0 16px, transparent 17px),
    linear-gradient(180deg, #202938 0%, #0c1220 100%);
  border: 5px solid rgba(8, 13, 24, 0.95);
  box-shadow:
    0 0 0 28px rgba(251, 252, 248, 0.2),
    0 32px 70px rgba(23, 32, 51, 0.36),
    inset 0 2px 0 rgba(255, 255, 255, 0.12),
    inset 0 -24px 42px rgba(0, 0, 0, 0.34);
  opacity: 0.97;
}

.problem-codex-drawer-art--resealed::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(62% - 160px);
  z-index: 3;
  width: 150px;
  height: 150px;
  border: 26px solid #050914;
  border-bottom: 0;
  border-radius: 110px 110px 0 0;
  pointer-events: none;
  transform: translateX(-50%);
  box-shadow:
    inset 0 0 0 8px rgba(251, 252, 248, 0.14),
    0 -2px 0 rgba(255, 255, 255, 0.08) inset,
    0 12px 24px rgba(23, 32, 51, 0.26);
  opacity: 0.99;
}

.problem-codex-drawer-art div {
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: #293241;
  color: #aeb6c2;
  font-size: 64px;
  font-weight: 900;
}

.problem-codex-drawer__header span {
  color: #376d63;
  font-size: 12px;
  font-weight: 850;
}

.problem-codex-drawer__header--locked span {
  color: #697486;
}

.problem-codex-drawer__header--resealed span {
  color: #566173;
}

.problem-codex-drawer__header h2 {
  margin: 7px 0 10px;
  color: #101827;
  font-size: 30px;
  line-height: 1.18;
}

.problem-codex-drawer__header p {
  margin: 0;
  color: #697486;
  font-size: 13px;
}

.problem-codex-drawer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background: #ffffff;
  color: #172033;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.problem-codex-drawer__section {
  padding: 22px 24px;
  border-bottom: 1px solid rgba(23, 32, 51, 0.08);
}

.problem-codex-drawer__section h3 {
  margin: 0 0 14px;
  color: #172033;
  font-size: 15px;
  line-height: 1.2;
}

.problem-codex-evolution {
  padding: 0 0 34px;
}

.problem-codex-evolution__track {
  display: grid;
  align-items: center;
  column-gap: 14px;
  width: 100%;
  padding: 0;
}

.problem-codex-evolution__track--2 {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
}

.problem-codex-evolution__track--3 {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}

.problem-codex-evolution-card {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.problem-codex-evolution-card__image {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 148px;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.problem-codex-evolution-card.is-active .problem-codex-evolution-card__image {
  border-color: rgba(55, 109, 99, 0.62);
  box-shadow: 0 0 0 2px rgba(55, 109, 99, 0.12);
}

.problem-codex-evolution-card__image img {
  display: block;
  width: calc(100% - 16px);
  height: calc(100% - 16px);
  object-fit: contain;
}

.problem-codex-evolution--resealed .problem-codex-evolution-card__image {
  background: #eef0ef;
  border-color: rgba(23, 32, 51, 0.16);
}

.problem-codex-evolution--resealed .problem-codex-evolution-card.is-active .problem-codex-evolution-card__image {
  border-color: rgba(23, 32, 51, 0.28);
  box-shadow: 0 0 0 2px rgba(23, 32, 51, 0.08);
}

.problem-codex-evolution--resealed .problem-codex-evolution-card__image img {
  filter: grayscale(1) saturate(0.3) brightness(0.82);
  opacity: 0.58;
}

.problem-codex-evolution-card__lock {
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: 2;
  display: block;
  width: 58px;
  height: 46px;
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgba(14, 21, 34, 0.98), rgba(31, 42, 61, 0.98));
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, 0.08),
    0 12px 28px rgba(14, 21, 34, 0.36);
  transform: translate(-50%, -50%);
}

.problem-codex-evolution-card__lock::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 34px;
  width: 34px;
  height: 32px;
  border: 11px solid rgba(14, 21, 34, 0.98);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  transform: translateX(-50%);
}

.problem-codex-evolution-card__lock i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.95);
  transform: translate(-50%, -35%);
}

.problem-codex-evolution__arrow {
  display: block;
  width: 13px;
  height: 13px;
  border-top: 4px solid rgba(23, 32, 51, 0.16);
  border-right: 4px solid rgba(23, 32, 51, 0.16);
  transform: rotate(45deg);
  margin: 0 3px;
}

.problem-codex-log,
.problem-codex-try {
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.problem-codex-log {
  padding: 12px;
}

.problem-codex-log + .problem-codex-log,
.problem-codex-try + .problem-codex-try {
  margin-top: 10px;
}

.problem-codex-log > div:first-child,
.problem-codex-try header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.problem-codex-log strong,
.problem-codex-try strong {
  color: #172033;
  font-size: 13px;
}

.problem-codex-log span,
.problem-codex-try span,
.problem-codex-try em {
  color: #687486;
  font-size: 12px;
  font-style: normal;
  font-weight: 750;
}

.problem-codex-log p,
.problem-codex-try p {
  margin: 8px 0 0;
  color: #455266;
  font-size: 13px;
  line-height: 1.55;
}

.problem-codex-log small {
  display: block;
  margin-top: 6px;
  color: #376d63;
  font-size: 12px;
  font-weight: 800;
}

.problem-codex-log__routines {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.problem-codex-log__routines span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px;
  border-radius: 999px;
  background: #eef2ef;
  color: #425064;
  font-size: 12px;
  font-weight: 750;
}

.problem-codex-log__routines i {
  display: block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 999px;
}

.problem-codex-try {
  padding: 14px;
}

.problem-codex-try__attempts {
  margin-top: 12px;
}

.problem-codex-life {
  padding: 13px 14px 14px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.78);
}

.problem-codex-life__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.problem-codex-life__header strong {
  color: #172033;
  font-size: 13px;
}

.problem-codex-life__legend {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #697486;
  font-size: 11px;
  font-weight: 800;
}

.problem-codex-life__legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.problem-codex-life__legend i {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}

.problem-codex-life__legend-problem {
  background: #cc4b43;
}

.problem-codex-life__legend-try {
  background: #3f9f74;
}

.problem-codex-life__axis {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
  color: #7a8493;
  font-size: 11px;
  font-weight: 750;
}

.problem-codex-life__buckets {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(7px, 1fr);
  align-items: end;
  gap: 3px;
  height: 88px;
  padding: 9px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, transparent 0 74%, rgba(23, 32, 51, 0.05) 74% 75%, transparent 75%),
    rgba(23, 32, 51, 0.035);
  overflow: hidden;
}

.problem-codex-life-bucket {
  position: relative;
  display: flex;
  align-items: end;
  justify-content: center;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: rgba(23, 32, 51, 0.045);
  cursor: pointer;
}

.problem-codex-life-bucket span {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 5px;
  background: rgba(23, 32, 51, 0.12);
}

.problem-codex-life-bucket--level-1 span {
  background: #f3b4a9;
}

.problem-codex-life-bucket--level-2 span {
  background: #ee8f82;
}

.problem-codex-life-bucket--level-3 span {
  background: #e2695d;
}

.problem-codex-life-bucket--level-4 span {
  background: #c9443e;
}

.problem-codex-life-bucket--level-5 span {
  background: #9f2f32;
}

.problem-codex-life-bucket.has-try::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 3px;
  height: 4px;
  border-radius: 999px;
  background: #3f9f74;
}

.problem-codex-life-bucket.is-active {
  background: rgba(55, 109, 99, 0.12);
  box-shadow: inset 0 0 0 1px rgba(55, 109, 99, 0.38);
}

.problem-codex-floating-tooltip {
  position: fixed;
  z-index: 4000;
  max-width: 320px;
  padding: 5px 9px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.96);
  color: #f8fafc;
  font-size: 12px;
  line-height: 1.1;
  white-space: pre-line;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.22);
  pointer-events: none;
}

.problem-codex-floating-tooltip[hidden] {
  display: none;
}

.problem-codex-floating-tooltip__title {
  color: #f8fafc;
  font-size: 12px;
  font-weight: 850;
  line-height: 1.05;
}

.problem-codex-floating-tooltip__divider {
  height: 1px;
  margin: 5px 0 4px;
  background: rgba(148, 163, 184, 0.22);
}

.problem-codex-floating-tooltip__body {
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.05;
}

.problem-codex-feed-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  color: #7a8493;
  font-size: 12px;
  font-weight: 800;
}

.problem-codex-feed-meta strong {
  color: #4d596b;
  font-size: 12px;
}

.problem-codex-effect {
  display: grid;
  gap: 10px;
}

.problem-codex-effect-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px 64px;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.problem-codex-effect-row::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  border-radius: 8px 0 0 8px;
  background: rgba(23, 32, 51, 0.16);
}

.problem-codex-effect-row--good::before {
  background: #3f9f74;
}

.problem-codex-effect-row--mixed::before {
  background: #c99a3e;
}

.problem-codex-effect-row--weak::before {
  background: #cc4b43;
}

.problem-codex-effect-row__main {
  min-width: 0;
  padding-left: 4px;
}

.problem-codex-effect-row__main span {
  display: block;
  color: #7a8493;
  font-size: 11px;
  font-weight: 850;
}

.problem-codex-effect-row__main strong {
  display: block;
  margin-top: 3px;
  color: #172033;
  font-size: 13px;
  line-height: 1.3;
}

.problem-codex-effect-row__main p {
  margin: 5px 0 0;
  color: #687486;
  font-size: 12px;
  line-height: 1.45;
}

.problem-codex-effect-row__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.problem-codex-effect-row__stats div {
  min-width: 0;
  padding: 8px 6px;
  border-radius: 8px;
  background: rgba(23, 32, 51, 0.045);
  text-align: center;
}

.problem-codex-effect-row__stats strong,
.problem-codex-effect-row__stats span {
  display: block;
}

.problem-codex-effect-row__stats strong {
  color: #4d596b;
  font-size: 13px;
  line-height: 1;
}

.problem-codex-effect-row__stats span {
  margin-top: 4px;
  color: #7a8493;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
}

.problem-codex-effect-row__badge {
  justify-self: end;
  width: 64px;
  max-width: 64px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.055);
  color: #5c6878;
  font-size: clamp(9px, 1.7vw, 11px);
  font-weight: 900;
  line-height: 1.12;
  text-align: center;
  white-space: normal;
  overflow: hidden;
  overflow-wrap: anywhere;
}

.problem-codex-effect-row--good .problem-codex-effect-row__badge {
  background: rgba(63, 159, 116, 0.12);
  color: #28705f;
}

.problem-codex-effect-row--mixed .problem-codex-effect-row__badge {
  background: rgba(201, 154, 62, 0.14);
  color: #8d6624;
}

.problem-codex-effect-row--weak .problem-codex-effect-row__badge {
  background: rgba(204, 75, 67, 0.1);
  color: #a63a35;
}

.problem-codex-effect__note {
  margin: 0;
  color: #7a8493;
  font-size: 12px;
  line-height: 1.45;
}

.problem-codex-insight {
  display: grid;
  gap: 10px;
}

.problem-codex-insight__value {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 12px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 8px;
  background:
    radial-gradient(circle at 88% 18%, rgba(246, 215, 129, 0.22), transparent 28%),
    #ffffff;
  color: #172033;
  text-align: left;
  cursor: help;
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.07);
}

.problem-codex-insight__value span {
  color: #6f7886;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.problem-codex-insight__value strong {
  font-size: 24px;
  line-height: 1;
}

.problem-codex-insight__value em {
  color: #7a8493;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.problem-codex-insight p {
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 8px;
  background: rgba(244, 245, 241, 0.72);
  color: #384253;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
}

.problem-codex-event {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
}

.problem-codex-event + .problem-codex-event {
  margin-top: 12px;
}

.problem-codex-event::before {
  content: "";
  position: absolute;
  top: 28px;
  bottom: -14px;
  left: 83px;
  width: 1px;
  background: rgba(23, 32, 51, 0.1);
}

.problem-codex-event:last-child::before {
  display: none;
}

.problem-codex-event__rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px;
  align-items: start;
  gap: 7px;
  padding-top: 14px;
}

.problem-codex-event__rail span {
  color: #7a8493;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
}

.problem-codex-event__rail i {
  width: 17px;
  height: 17px;
  border: 3px solid #fbfcf8;
  border-radius: 999px;
  background: #cc4b43;
  box-shadow: 0 0 0 1px rgba(23, 32, 51, 0.12);
}

.problem-codex-event--try .problem-codex-event__rail i {
  background: #3f9f74;
}

.problem-codex-event__content {
  padding: 13px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.problem-codex-event__content header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.problem-codex-event__content strong {
  display: block;
  color: #172033;
  font-size: 13px;
  line-height: 1.3;
}

.problem-codex-event__content em {
  display: block;
  margin-top: 3px;
  color: #7a8493;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.problem-codex-event__status {
  flex: 0 0 auto;
  max-width: 130px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.055);
  color: #5c6878;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.problem-codex-event--try .problem-codex-event__status {
  background: rgba(63, 159, 116, 0.12);
  color: #28705f;
}

.problem-codex-event--problem .problem-codex-event__status {
  background: rgba(204, 75, 67, 0.1);
  color: #a63a35;
}

.problem-codex-event__content p {
  margin: 8px 0 0;
  color: #455266;
  font-size: 13px;
  line-height: 1.55;
}

.problem-codex-event__content small {
  display: block;
  margin-top: 7px;
  color: #687486;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.45;
}

.problem-codex-drawer__empty {
  padding: 14px;
  border-radius: 8px;
  background: rgba(23, 32, 51, 0.05);
  color: #697486;
  font-size: 13px;
}

.problem-codex-lock {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(23, 32, 51, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.problem-codex-lock__mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #293241;
  color: #aeb6c2;
  font-size: 30px;
  font-weight: 900;
}

.problem-codex-lock h3 {
  margin: 0 0 5px;
  color: #172033;
  font-size: 15px;
}

.problem-codex-lock p {
  margin: 0;
  color: #687486;
  font-size: 13px;
  line-height: 1.5;
}

.problem-codex-lock-progress {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.problem-codex-lock-progress > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #687486;
  font-size: 12px;
  font-weight: 800;
}

.problem-codex-lock-progress strong {
  color: #4d596b;
  font-size: 12px;
}

.problem-codex-lock-progress__track {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(23, 32, 51, 0.08);
}

.problem-codex-lock-progress__track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #697486;
}

.problem-codex-unlock-list {
  display: grid;
  gap: 8px;
}

.problem-codex-unlock-list span {
  padding: 11px 12px;
  border: 1px dashed rgba(23, 32, 51, 0.18);
  border-radius: 8px;
  color: #697486;
  background: rgba(255, 255, 255, 0.64);
  font-size: 13px;
  font-weight: 800;
}

.problem-codex-lock-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.problem-codex-lock-stats div {
  padding: 12px;
  border-radius: 8px;
  background: rgba(23, 32, 51, 0.05);
}

.problem-codex-lock-stats strong,
.problem-codex-lock-stats span {
  display: block;
}

.problem-codex-lock-stats strong {
  color: #4d596b;
  font-size: 18px;
  line-height: 1;
}

.problem-codex-lock-stats span {
  margin-top: 5px;
  color: #7a8493;
  font-size: 12px;
  font-weight: 750;
}

.problem-codex-reveal {
  position: fixed;
  inset: 0;
  z-index: 1600;
  display: none;
  place-items: center;
  padding: 24px;
}

.problem-codex-reveal.is-open {
  display: grid;
}

.problem-codex-reveal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.72);
  backdrop-filter: blur(10px);
}

.problem-codex-reveal__panel {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 22px;
  width: min(520px, calc(100vw - 36px));
  padding: 34px 24px 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 247, 209, 0.14), transparent 32%),
    linear-gradient(180deg, rgba(22, 31, 49, 0.98), rgba(12, 18, 30, 0.98));
  color: #f8fafc;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.problem-codex-reveal.is-revealed .problem-codex-reveal__panel {
  width: min(620px, calc(100vw - 28px));
  padding: 38px 28px 28px;
}

.problem-codex-reveal__panel::before {
  content: "";
  position: absolute;
  inset: -45% -20%;
  background: conic-gradient(from 90deg, transparent, rgba(255, 236, 173, 0.12), transparent, rgba(111, 169, 255, 0.1), transparent);
  animation: problem-codex-reveal-spin 6s linear infinite;
}

.problem-codex-reveal.is-generating .problem-codex-reveal__panel::before {
  background:
    radial-gradient(circle at 50% 28%, rgba(255, 236, 173, 0.1), transparent 34%),
    radial-gradient(circle at 50% 58%, rgba(125, 211, 252, 0.08), transparent 38%);
  animation: none;
}

.problem-codex-reveal.is-generating .problem-codex-reveal__copy {
  padding-bottom: 18px;
}

.problem-codex-reveal-card,
.problem-codex-reveal__copy,
.problem-codex-reveal__actions,
.problem-codex-reveal-loading-bar {
  position: relative;
  z-index: 1;
}

.problem-codex-reveal-card {
  display: grid;
  place-items: center;
  width: min(340px, 72vw);
  aspect-ratio: 0.72;
  perspective: 1200px;
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card {
  width: min(420px, 78vw);
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card__aura {
  width: 92%;
  border-radius: 18px;
  background:
    radial-gradient(ellipse at 50% 50%, var(--reveal-aura, rgba(255, 236, 173, 0.36)), transparent 66%),
    linear-gradient(135deg, var(--reveal-aura-soft, rgba(255, 236, 173, 0.18)), transparent 42% 58%, var(--reveal-aura-soft, rgba(255, 236, 173, 0.18)));
  filter: blur(18px);
}

.problem-codex-reveal-card__aura {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 236, 173, 0.32), rgba(255, 236, 173, 0.12) 42%, transparent 68%);
  filter: blur(8px);
  animation: problem-codex-reveal-breathe 1.8s ease-in-out infinite;
}

.problem-codex-reveal--common {
  --reveal-aura: rgba(226, 232, 240, 0.54);
  --reveal-aura-soft: rgba(226, 232, 240, 0.18);
  --reveal-signal: rgba(248, 250, 252, 0.74);
  --reveal-signal-warm: rgba(255, 236, 173, 0.44);
  --reveal-spark-opacity: 0.42;
  --reveal-spark-scale: 0.82;
  --reveal-ring-speed: 1.28s;
  --reveal-crack-opacity: 0.14;
}

.problem-codex-reveal--uncommon {
  --reveal-aura: rgba(134, 239, 172, 0.56);
  --reveal-aura-soft: rgba(187, 247, 208, 0.2);
  --reveal-signal: rgba(187, 247, 208, 0.82);
  --reveal-signal-warm: rgba(255, 236, 173, 0.48);
  --reveal-spark-opacity: 0.55;
  --reveal-spark-scale: 0.92;
  --reveal-ring-speed: 1.18s;
  --reveal-crack-opacity: 0.2;
}

.problem-codex-reveal--rare {
  --reveal-aura: rgba(125, 211, 252, 0.68);
  --reveal-aura-soft: rgba(147, 197, 253, 0.26);
  --reveal-aura-mix: rgba(255, 255, 255, 0.16);
  --reveal-aura-secondary: rgba(255, 236, 173, 0.14);
  --reveal-aura-tertiary: rgba(244, 114, 182, 0.1);
  --reveal-signal: rgba(147, 197, 253, 0.88);
  --reveal-signal-warm: rgba(255, 236, 173, 0.56);
  --reveal-spark-opacity: 0.68;
  --reveal-spark-scale: 1.02;
  --reveal-ring-speed: 1.04s;
  --reveal-crack-opacity: 0.28;
  --reveal-halo-final-opacity: 0.42;
  --reveal-halo-final-scale: 1.16;
  --reveal-aura-final-scale: 1.16;
  --reveal-frame-final-glow: rgba(148, 163, 184, 0.28);
}

.problem-codex-reveal--unique {
  --reveal-aura: rgba(244, 114, 182, 0.64);
  --reveal-aura-soft: rgba(216, 180, 254, 0.25);
  --reveal-aura-mix: rgba(125, 211, 252, 0.16);
  --reveal-aura-secondary: rgba(125, 211, 252, 0.14);
  --reveal-aura-tertiary: rgba(255, 236, 173, 0.12);
  --reveal-signal: rgba(244, 114, 182, 0.9);
  --reveal-signal-warm: rgba(255, 236, 173, 0.62);
  --reveal-spark-opacity: 0.82;
  --reveal-spark-scale: 1.14;
  --reveal-ring-speed: 0.92s;
  --reveal-crack-opacity: 0.36;
  --reveal-halo-final-opacity: 0.64;
  --reveal-halo-final-scale: 1.3;
  --reveal-aura-final-scale: 1.26;
  --reveal-frame-final-glow: rgba(148, 163, 184, 0.3);
}

.problem-codex-reveal--legendary {
  --reveal-aura: rgba(251, 191, 36, 0.86);
  --reveal-aura-soft: rgba(255, 236, 173, 0.42);
  --reveal-aura-mix: rgba(125, 211, 252, 0.2);
  --reveal-aura-secondary: rgba(125, 211, 252, 0.18);
  --reveal-aura-tertiary: rgba(244, 114, 182, 0.14);
  --reveal-signal: rgba(251, 191, 36, 0.96);
  --reveal-signal-warm: rgba(255, 255, 255, 0.78);
  --reveal-spark-opacity: 1;
  --reveal-spark-scale: 1.3;
  --reveal-ring-speed: 0.78s;
  --reveal-crack-opacity: 0.48;
  --reveal-halo-final-opacity: 0.96;
  --reveal-halo-final-scale: 1.64;
  --reveal-aura-final-scale: 1.54;
  --reveal-frame-final-glow: rgba(148, 163, 184, 0.34);
}

.problem-codex-reveal--common .problem-codex-reveal-card__aura,
.problem-codex-reveal--uncommon .problem-codex-reveal-card__aura,
.problem-codex-reveal--rare .problem-codex-reveal-card__aura,
.problem-codex-reveal--unique .problem-codex-reveal-card__aura,
.problem-codex-reveal--legendary .problem-codex-reveal-card__aura {
  background:
    radial-gradient(circle, var(--reveal-aura), var(--reveal-aura-soft) 44%, transparent 70%);
}

.problem-codex-reveal-card__face {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 72%;
  height: 88%;
  border: 1px solid rgba(255, 236, 173, 0.28);
  border-radius: 8px;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.04) 0 34%, rgba(255, 248, 214, 0.34) 44%, rgba(255, 255, 255, 0.04) 58%),
    linear-gradient(180deg, #f8fafc, #dfe5ea);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 24px 60px rgba(0, 0, 0, 0.34);
  overflow: hidden;
  transform-style: preserve-3d;
  animation: problem-codex-reveal-card-idle 1.2s ease-in-out infinite;
}

.problem-codex-reveal-card__face::before,
.problem-codex-reveal-card__face::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.problem-codex-reveal-card__face::before {
  inset: 12px;
  border: 1px solid rgba(23, 32, 51, 0.12);
  border-radius: 6px;
}

.problem-codex-reveal-card__face::after {
  inset: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.86) 45%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: problem-codex-reveal-sweep 1.7s ease-in-out infinite;
}

.problem-codex-reveal.is-generating .problem-codex-reveal-card__face {
  animation: problem-codex-reveal-forming-shake 1.25s ease-in-out infinite;
}

.problem-codex-reveal-card__lock {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #172033;
  color: #fff8df;
  font-size: 42px;
  font-weight: 950;
  box-shadow: 0 18px 42px rgba(23, 32, 51, 0.28);
}

.problem-codex-reveal-forming {
  position: absolute;
  inset: 20px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 7px;
  background: transparent;
}

.problem-codex-reveal-forming::before,
.problem-codex-reveal-forming::after {
  position: absolute;
  pointer-events: none;
}

.problem-codex-reveal-forming::before,
.problem-codex-reveal-forming::after {
  content: "";
}

.problem-codex-reveal-forming::before {
  inset: 10px;
  border: 1px solid rgba(23, 32, 51, 0.08);
  border-radius: 6px;
}

.problem-codex-reveal-forming::after {
  inset: 0;
  background: linear-gradient(110deg, transparent 0 34%, rgba(255, 255, 255, 0.56) 45%, transparent 58% 100%);
  transform: translateX(-120%);
  animation: problem-codex-reveal-sweep 1.9s ease-in-out infinite;
}

.problem-codex-reveal-forming__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  margin-top: 22px;
  border-radius: 50%;
  background: #172033;
  color: #fff8df;
  font-size: 42px;
  font-weight: 950;
  box-shadow:
    0 18px 42px rgba(23, 32, 51, 0.24),
    0 0 0 12px rgba(255, 255, 255, 0.28);
  animation: problem-codex-forming-mark 1.2s ease-in-out infinite;
}

.problem-codex-reveal-loading-bar {
  width: min(180px, 46vw);
  height: 7px;
  margin-top: -8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.1),
    0 0 18px rgba(246, 215, 129, 0.08);
}

.problem-codex-reveal-loading-bar span {
  position: relative;
  display: block;
  width: 42%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(246, 215, 129, 0.28), rgba(246, 215, 129, 0.9), rgba(125, 211, 252, 0.38));
  box-shadow: 0 0 16px rgba(246, 215, 129, 0.36);
  animation: problem-codex-forming-bar-slide 1.05s ease-in-out infinite;
}

.problem-codex-reveal-card__face img {
  position: relative;
  z-index: 1;
  display: block;
  width: 92%;
  height: 92%;
  object-fit: contain;
  border-radius: 7px;
  opacity: 0;
  transform: scale(0.88);
  animation: problem-codex-reveal-art-in 0.9s cubic-bezier(.16, 1, .3, 1) forwards;
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card__face img {
  width: 96%;
  height: 96%;
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 74%;
  height: 90%;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--reveal-signal, #f6d781) 72%, white);
  background:
    linear-gradient(135deg, var(--reveal-aura-soft, rgba(246, 215, 129, 0.18)), transparent 42% 58%, var(--reveal-aura-soft, rgba(246, 215, 129, 0.18)));
  opacity: 0.9;
  filter: blur(2px);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--reveal-signal, #f6d781) 36%, transparent),
    0 0 22px var(--reveal-aura, rgba(246, 215, 129, 0.32)),
    0 0 58px var(--reveal-aura-soft, rgba(246, 215, 129, 0.24)),
    0 0 108px var(--reveal-aura-soft, rgba(246, 215, 129, 0.18));
}

.problem-codex-reveal--common.is-revealed .problem-codex-reveal-card::before {
  border-color: rgba(248, 250, 252, 0.72);
  box-shadow:
    0 0 0 2px rgba(248, 250, 252, 0.22),
    0 0 26px rgba(248, 250, 252, 0.32),
    0 0 76px rgba(226, 232, 240, 0.22);
}

.problem-codex-reveal--uncommon.is-revealed .problem-codex-reveal-card::before {
  border-color: rgba(134, 239, 172, 0.84);
  box-shadow:
    0 0 0 2px rgba(134, 239, 172, 0.24),
    0 0 28px rgba(134, 239, 172, 0.42),
    0 0 82px rgba(187, 247, 208, 0.28);
}

.problem-codex-reveal--rare.is-revealed .problem-codex-reveal-card::before {
  box-shadow:
    0 0 0 2px rgba(125, 211, 252, 0.28),
    0 0 30px rgba(125, 211, 252, 0.46),
    0 0 88px rgba(147, 197, 253, 0.32);
}

.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card::before {
  box-shadow:
    0 0 0 2px rgba(244, 114, 182, 0.3),
    0 0 32px rgba(244, 114, 182, 0.48),
    0 0 94px rgba(216, 180, 254, 0.32);
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card::before {
  border-color: rgba(251, 191, 36, 0.95);
  box-shadow:
    0 0 0 2px rgba(251, 191, 36, 0.34),
    0 0 38px rgba(251, 191, 36, 0.58),
    0 0 112px rgba(255, 236, 173, 0.42);
}

.problem-codex-unseal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  place-items: center;
  padding: 24px;
  --unseal-halo: rgba(248, 250, 252, 0.34);
  --unseal-halo-soft: rgba(226, 232, 240, 0.18);
  --unseal-halo-mix: rgba(251, 216, 104, 0.14);
  --unseal-edge: rgba(248, 250, 252, 0.55);
}

.problem-codex-unseal--uncommon {
  --unseal-halo: rgba(74, 222, 128, 0.38);
  --unseal-halo-soft: rgba(187, 247, 208, 0.22);
  --unseal-halo-mix: rgba(251, 216, 104, 0.12);
  --unseal-edge: rgba(134, 239, 172, 0.68);
}

.problem-codex-unseal--rare {
  --unseal-halo: rgba(125, 211, 252, 0.46);
  --unseal-halo-soft: rgba(147, 197, 253, 0.26);
  --unseal-halo-mix: rgba(251, 216, 104, 0.14);
  --unseal-edge: rgba(125, 211, 252, 0.72);
  --reveal-aura-soft: rgba(147, 197, 253, 0.26);
  --reveal-signal: rgba(147, 197, 253, 0.88);
}

.problem-codex-unseal--unique {
  --unseal-halo: rgba(244, 114, 182, 0.48);
  --unseal-halo-soft: rgba(216, 180, 254, 0.28);
  --unseal-halo-mix: rgba(125, 211, 252, 0.16);
  --unseal-edge: rgba(244, 114, 182, 0.74);
  --reveal-aura-soft: rgba(216, 180, 254, 0.25);
  --reveal-signal: rgba(244, 114, 182, 0.9);
}

.problem-codex-unseal--legendary {
  --unseal-halo: rgba(251, 191, 36, 0.6);
  --unseal-halo-soft: rgba(255, 236, 173, 0.34);
  --unseal-halo-mix: rgba(125, 211, 252, 0.18);
  --unseal-edge: rgba(251, 191, 36, 0.9);
  --reveal-aura-soft: rgba(255, 236, 173, 0.42);
  --reveal-signal: rgba(251, 191, 36, 0.96);
}

.problem-codex-unseal.is-open {
  display: grid;
}

.problem-codex-unseal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(12, 18, 30, 0.72);
  backdrop-filter: blur(10px);
}

.problem-codex-unseal__panel {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 26px;
  width: min(520px, 92vw);
  padding: 42px 34px 34px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 50% 35%, rgba(251, 216, 104, 0.12), transparent 34%),
    linear-gradient(145deg, #111827, #172235);
  box-shadow: 0 34px 90px rgba(3, 7, 18, 0.46);
  overflow: hidden;
}

.problem-codex-unseal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 38%, rgba(255, 255, 255, 0.1) 45%, transparent 55% 100%);
  opacity: 0;
  transform: translateX(-60%);
  pointer-events: none;
}

.problem-codex-unseal.is-unsealed .problem-codex-unseal__panel::before {
  animation: problem-codex-unseal-sweep 0.95s ease-out forwards;
}

.problem-codex-unseal-card {
  position: relative;
  width: min(310px, 62vw);
  aspect-ratio: 0.68;
}

.problem-codex-unseal-card::before {
  content: "";
  position: absolute;
  inset: -14%;
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 44%, var(--unseal-halo), transparent 46%),
    radial-gradient(circle at 35% 62%, var(--unseal-halo-mix), transparent 44%),
    radial-gradient(circle at 70% 30%, var(--unseal-halo-soft), transparent 48%);
  filter: blur(24px);
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
}

.problem-codex-unseal.is-unsealed .problem-codex-unseal-card::before {
  animation: problem-codex-unseal-halo 1.1s ease-out forwards;
}

.problem-codex-unseal-card__glow {
  position: absolute;
  inset: 8%;
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 42%, var(--unseal-halo), transparent 38%),
    radial-gradient(circle at 40% 60%, var(--unseal-halo-mix), transparent 42%);
  filter: blur(22px);
  opacity: 0;
  transform: scale(0.8);
}

.problem-codex-unseal.is-unsealing .problem-codex-unseal-card__glow,
.problem-codex-unseal.is-unsealed .problem-codex-unseal-card__glow {
  animation: problem-codex-unseal-glow 1.2s ease-out forwards;
}

.problem-codex-unseal-card__face {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  background: #f9fafb;
  box-shadow: 0 20px 46px rgba(3, 7, 18, 0.34);
  overflow: hidden;
}

.problem-codex-unseal-card__face img {
  display: block;
  width: 94%;
  height: 94%;
  object-fit: contain;
  filter: grayscale(1) saturate(0.2) brightness(0.78);
  opacity: 0.48;
  transition:
    filter 0.9s ease,
    opacity 0.9s ease;
}

.problem-codex-unseal.is-unsealed .problem-codex-unseal-card__face img {
  filter: none;
  opacity: 1;
}

.problem-codex-unseal-card__chain {
  position: absolute;
  left: -18%;
  right: -18%;
  z-index: 3;
  height: 28px;
  background:
    linear-gradient(90deg, rgba(44, 51, 61, 0.94), rgba(133, 140, 150, 0.88), rgba(44, 51, 61, 0.94));
  box-shadow:
    inset 0 7px 0 rgba(255, 255, 255, 0.14),
    inset 0 -7px 0 rgba(3, 7, 18, 0.18),
    0 8px 16px rgba(3, 7, 18, 0.2);
}

.problem-codex-unseal-card__chain--one {
  top: 38%;
  transform: rotate(29deg);
}

.problem-codex-unseal-card__chain--two {
  top: 48%;
  transform: rotate(-31deg);
}

.problem-codex-unseal.is-unsealing .problem-codex-unseal-card__chain--one {
  animation: problem-codex-unseal-chain-one 1.35s 0.72s ease-in forwards;
}

.problem-codex-unseal.is-unsealing .problem-codex-unseal-card__chain--two {
  animation: problem-codex-unseal-chain-two 1.35s 0.72s ease-in forwards;
}

.problem-codex-unseal-card__lock {
  position: absolute;
  left: 50%;
  top: 53%;
  z-index: 4;
  width: 124px;
  height: 98px;
  border-radius: 26px;
  background: linear-gradient(145deg, rgba(8, 13, 24, 0.98), rgba(24, 35, 54, 0.98));
  box-shadow:
    inset 0 0 0 4px rgba(255, 255, 255, 0.08),
    0 24px 42px rgba(3, 7, 18, 0.36);
  transform: translate(-50%, -50%);
}

.problem-codex-unseal-card__lock::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 72px;
  width: 72px;
  height: 70px;
  border: 22px solid rgba(8, 13, 24, 0.98);
  border-bottom: 0;
  border-radius: 56px 56px 0 0;
  transform: translateX(-50%);
  transform-origin: 8px 100%;
}

.problem-codex-unseal-card__lock i {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #f8fafc;
  transform: translate(-50%, -50%);
}

.problem-codex-unseal.is-unsealing .problem-codex-unseal-card__lock::before {
  animation: problem-codex-unseal-shackle 0.82s 0.48s cubic-bezier(0.2, 0.9, 0.2, 1.2) forwards;
}

.problem-codex-unseal.is-unsealing .problem-codex-unseal-card__lock {
  animation: problem-codex-unseal-lock 1.24s 1.12s ease-in forwards;
}

.problem-codex-unseal-card__edge {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 9px;
  box-shadow: inset 0 0 0 0 rgba(252, 211, 77, 0);
  pointer-events: none;
}

.problem-codex-unseal.is-unsealed .problem-codex-unseal-card__edge {
  animation: problem-codex-unseal-edge 0.95s ease-out forwards;
}

.problem-codex-unseal__copy {
  position: relative;
  z-index: 2;
  text-align: center;
}

.problem-codex-unseal__copy span {
  display: block;
  margin-bottom: 8px;
  color: #f7d86b;
  font-size: 13px;
  font-weight: 850;
}

.problem-codex-unseal__copy h2 {
  margin: 0;
  color: #f8fafc;
  font-size: 28px;
  line-height: 1.1;
}

.problem-codex-unseal__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}

.problem-codex-unseal.is-unsealed .problem-codex-unseal__actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 0.34s ease 0.48s,
    transform 0.34s ease 0.48s;
}

@keyframes problem-codex-unseal-shackle {
  0% { transform: translateX(-50%) rotate(0deg) translateY(0); }
  100% { transform: translateX(-62%) rotate(-22deg) translateY(-10px); }
}

@keyframes problem-codex-unseal-lock {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  42% { opacity: 1; transform: translate(-50%, -56%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%, 36%) scale(0.86); }
}

@keyframes problem-codex-unseal-chain-one {
  0% { opacity: 1; transform: rotate(29deg) translateX(0); }
  100% { opacity: 0; transform: rotate(29deg) translateX(-44%); }
}

@keyframes problem-codex-unseal-chain-two {
  0% { opacity: 1; transform: rotate(-31deg) translateX(0); }
  100% { opacity: 0; transform: rotate(-31deg) translateX(44%); }
}

@keyframes problem-codex-unseal-glow {
  0% { opacity: 0; transform: scale(0.8); }
  60% { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0.75; transform: scale(1); }
}

@keyframes problem-codex-unseal-halo {
  0% { opacity: 0; transform: scale(0.82); }
  55% { opacity: 0.92; transform: scale(1.08); }
  100% { opacity: 0.68; transform: scale(1); }
}

@keyframes problem-codex-unseal-edge {
  0% { box-shadow: inset 0 0 0 0 rgba(252, 211, 77, 0); }
  45% { box-shadow: inset 0 0 0 4px var(--unseal-edge), 0 0 34px var(--unseal-halo); }
  100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--unseal-edge) 46%, transparent), 0 0 18px var(--unseal-halo-soft); }
}

@keyframes problem-codex-unseal-sweep {
  0% { opacity: 0; transform: translateX(-70%); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateX(70%); }
}

.problem-codex-reveal-card__foil {
  position: absolute;
  inset: 8px;
  z-index: 3;
  display: none;
  overflow: hidden;
  border-radius: 6px;
  pointer-events: none;
}

.problem-codex-reveal-card__foil-grain,
.problem-codex-reveal-card__foil-sweep,
.problem-codex-reveal-card__foil-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.problem-codex-reveal-card__foil-grain::before,
.problem-codex-reveal-card__foil-grain::after,
.problem-codex-reveal-card__foil-stars::before,
.problem-codex-reveal-card__foil-stars::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card__foil {
  display: block;
}

.problem-codex-unseal--rare.is-unsealed .problem-codex-reveal-card__foil,
.problem-codex-unseal--unique.is-unsealed .problem-codex-reveal-card__foil,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil {
  display: block;
}

.problem-codex-reveal--rare.is-revealed .problem-codex-reveal-card__face,
.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card__face,
.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__face,
.problem-codex-unseal--rare.is-unsealed .problem-codex-unseal-card__face,
.problem-codex-unseal--unique.is-unsealed .problem-codex-unseal-card__face,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-unseal-card__face {
  border-color: color-mix(in srgb, var(--reveal-signal) 72%, white);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 245, 0.98)),
    radial-gradient(circle at 50% 42%, var(--reveal-aura-soft), transparent 56%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.88),
    inset 0 0 0 7px rgba(255, 255, 255, 0.62),
    0 0 0 1px var(--reveal-signal),
    0 28px 78px rgba(0, 0, 0, 0.38),
    0 0 70px var(--reveal-aura-soft);
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__face,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-unseal-card__face {
  border-color: rgba(255, 219, 105, 0.95);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.95),
    inset 0 0 0 6px rgba(255, 248, 220, 0.8),
    inset 0 0 0 10px rgba(251, 191, 36, 0.16),
    0 0 0 1px rgba(251, 191, 36, 0.9),
    0 30px 88px rgba(0, 0, 0, 0.42),
    0 0 92px rgba(251, 191, 36, 0.36);
}

.problem-codex-reveal--rare.is-revealed .problem-codex-reveal-card__foil-grain,
.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card__foil-grain,
.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-grain,
.problem-codex-unseal--rare.is-unsealed .problem-codex-reveal-card__foil-grain,
.problem-codex-unseal--unique.is-unsealed .problem-codex-reveal-card__foil-grain,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-grain {
  opacity: 0.26;
  filter: saturate(1.2);
  background:
    radial-gradient(
      ellipse 150% 72% at 50% 42%,
      transparent 0 28%,
      color-mix(in srgb, var(--reveal-signal) 46%, white) 29% 32%,
      transparent 34% 39%,
      rgba(125, 211, 252, 0.26) 40% 43%,
      transparent 45% 50%,
      rgba(255, 139, 218, 0.2) 51% 54%,
      transparent 56%
    ),
    conic-gradient(from 220deg at 50% 44%, rgba(255, 255, 255, 0.0), rgba(255, 235, 154, 0.22), rgba(117, 212, 255, 0.18), rgba(255, 145, 218, 0.16), rgba(255, 255, 255, 0.0)),
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, 0.55), transparent 17%),
    radial-gradient(circle at 72% 64%, var(--reveal-aura-soft), transparent 22%);
}

.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card__foil-grain,
.problem-codex-unseal--unique.is-unsealed .problem-codex-reveal-card__foil-grain {
  opacity: 0.4;
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-grain,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-grain {
  opacity: 0.54;
  filter: saturate(1.16) contrast(1.02);
  background:
    radial-gradient(
      ellipse 154% 76% at 50% 43%,
      transparent 0 23%,
      rgba(255, 226, 92, 0.34) 24% 26%,
      rgba(255, 255, 255, 0.24) 27% 28%,
      transparent 30% 39%,
      rgba(126, 225, 255, 0.2) 40% 42%,
      transparent 44% 53%,
      rgba(255, 126, 219, 0.17) 54% 56%,
      transparent 58% 66%,
      rgba(255, 226, 92, 0.24) 67% 69%,
      transparent 71%
    ),
    radial-gradient(
      ellipse 112% 48% at 52% 42%,
      transparent 0 35%,
      rgba(111, 219, 255, 0.16) 36% 38%,
      transparent 40% 47%,
      rgba(255, 238, 163, 0.2) 48% 50%,
      transparent 52%
    ),
    conic-gradient(from 238deg at 48% 42%, rgba(255, 248, 200, 0.0), rgba(255, 212, 70, 0.18), rgba(124, 225, 255, 0.12), rgba(255, 127, 221, 0.1), rgba(255, 235, 128, 0.16), rgba(255, 248, 200, 0.0)),
    radial-gradient(circle at 28% 21%, rgba(255, 255, 255, 0.42), transparent 14%),
    radial-gradient(circle at 78% 66%, rgba(251, 191, 36, 0.24), transparent 24%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 32% 68%, rgba(255, 255, 255, 0.1));
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-grain::before,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-grain::before {
  inset: 7% -18%;
  border-radius: 50%;
  border-top: 12px solid rgba(255, 221, 78, 0.32);
  border-bottom: 9px solid rgba(125, 221, 252, 0.18);
  transform: rotate(-18deg);
  filter: blur(0.2px);
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-grain::after,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-grain::after {
  inset: 13% -10% 22%;
  border-radius: 50%;
  border-top: 7px solid rgba(255, 126, 219, 0.18);
  border-bottom: 6px solid rgba(255, 240, 170, 0.22);
  transform: rotate(-18deg) scale(0.82);
}

.problem-codex-reveal--rare.is-revealed .problem-codex-reveal-card__foil-sweep,
.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card__foil-sweep,
.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-sweep,
.problem-codex-unseal--rare.is-unsealed .problem-codex-reveal-card__foil-sweep,
.problem-codex-unseal--unique.is-unsealed .problem-codex-reveal-card__foil-sweep,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-sweep {
  width: 78%;
  inset: -22% auto -22% -56%;
  background:
    linear-gradient(104deg, transparent 0 12%, rgba(255, 255, 255, 0.22) 23%, rgba(255, 245, 190, 0.64) 38%, rgba(137, 218, 255, 0.38) 52%, rgba(255, 137, 219, 0.3) 65%, transparent 84%);
  filter: blur(1px) saturate(1.2);
  transform: skewX(-15deg);
  animation: problem-codex-foil-sweep 2.15s cubic-bezier(.16, 1, .3, 1) 0.12s both;
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-sweep,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-sweep {
  width: 78%;
  background:
    linear-gradient(104deg, transparent 0 10%, rgba(255, 255, 255, 0.26) 20%, rgba(255, 225, 74, 0.54) 34%, rgba(127, 230, 255, 0.24) 50%, rgba(255, 120, 221, 0.18) 63%, rgba(255, 255, 255, 0.18) 75%, transparent 90%);
  filter: blur(0.8px) saturate(1.15);
}

.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card__foil-stars,
.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-stars,
.problem-codex-unseal--unique.is-unsealed .problem-codex-reveal-card__foil-stars,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-stars {
  opacity: 0.8;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 18%, var(--reveal-signal) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 22%, rgba(255, 255, 255, 0.86) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 38%, var(--reveal-signal) 0 1px, transparent 2px),
    radial-gradient(circle at 24% 62%, rgba(255, 255, 255, 0.82) 0 1px, transparent 2px),
    radial-gradient(circle at 59% 72%, var(--reveal-signal) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 78%, rgba(255, 255, 255, 0.88) 0 1px, transparent 2px);
  animation: problem-codex-foil-stars 1.8s ease-out both;
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-stars,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-stars {
  opacity: 0.74;
  background:
    radial-gradient(circle at 13% 20%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 23% 36%, rgba(251, 191, 36, 0.78) 0 1px, transparent 2.5px),
    radial-gradient(circle at 52% 26%, rgba(255, 255, 255, 0.72) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 19%, rgba(251, 191, 36, 0.72) 0 1px, transparent 2.5px),
    radial-gradient(circle at 17% 58%, rgba(255, 255, 255, 0.64) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 76%, rgba(251, 191, 36, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 78%, rgba(255, 255, 255, 0.68) 0 1px, transparent 2px);
}

.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card__foil-stars::before,
.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-stars::before,
.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-stars::after,
.problem-codex-unseal--unique.is-unsealed .problem-codex-reveal-card__foil-stars::before,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-stars::before,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-stars::after {
  width: 54px;
  height: 54px;
  background:
    linear-gradient(90deg, transparent 0 43%, rgba(255, 255, 255, 0.92) 48% 52%, transparent 57%),
    linear-gradient(0deg, transparent 0 43%, rgba(255, 255, 255, 0.92) 48% 52%, transparent 57%),
    radial-gradient(circle, rgba(255, 240, 145, 0.78) 0 8%, transparent 36%);
  filter: drop-shadow(0 0 12px rgba(255, 221, 92, 0.58));
  opacity: 0;
  transform: scale(0.6) rotate(18deg);
  animation: problem-codex-foil-glint 1.8s ease-out 0.18s both;
}

.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card__foil-stars::before,
.problem-codex-unseal--unique.is-unsealed .problem-codex-reveal-card__foil-stars::before {
  right: 16%;
  top: 22%;
  width: 38px;
  height: 38px;
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-stars::before,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-stars::before {
  left: 13%;
  top: 20%;
  width: 42px;
  height: 42px;
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__foil-stars::after,
.problem-codex-unseal--legendary.is-unsealed .problem-codex-reveal-card__foil-stars::after {
  right: 13%;
  bottom: 25%;
  width: 34px;
  height: 34px;
  animation-delay: 0.42s;
}

.problem-codex-reveal.is-charged .problem-codex-reveal-card__face {
  animation: problem-codex-reveal-charged 0.78s ease-in-out infinite;
}

.problem-codex-reveal.is-holding .problem-codex-reveal-card__face {
  animation: problem-codex-reveal-hold-shake 0.22s linear infinite;
}

.problem-codex-reveal--rare.is-holding .problem-codex-reveal-card__face::before,
.problem-codex-reveal--unique.is-holding .problem-codex-reveal-card__face::before,
.problem-codex-reveal--legendary.is-holding .problem-codex-reveal-card__face::before {
  border-color: rgba(226, 232, 240, 0.28);
  background: transparent;
  opacity: 0.72;
  box-shadow:
    inset 0 0 18px rgba(226, 232, 240, 0.12),
    0 0 18px rgba(148, 163, 184, 0.16);
  animation: problem-codex-hold-frame-charge var(--reveal-hold-duration, 1.35s) linear forwards;
}

.problem-codex-reveal--rare.is-holding .problem-codex-reveal-card__aura,
.problem-codex-reveal--unique.is-holding .problem-codex-reveal-card__aura,
.problem-codex-reveal--legendary.is-holding .problem-codex-reveal-card__aura {
  animation: problem-codex-hold-aura-charge var(--reveal-hold-duration, 1.35s) linear forwards;
}

.problem-codex-reveal--rare.is-holding .problem-codex-reveal-card::before,
.problem-codex-reveal--unique.is-holding .problem-codex-reveal-card::before,
.problem-codex-reveal--legendary.is-holding .problem-codex-reveal-card::before {
  content: "";
  position: absolute;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 44% 42%, var(--reveal-aura, rgba(255, 236, 173, 0.54)), var(--reveal-aura-soft, rgba(255, 236, 173, 0.18)) 36%, transparent 66%),
    radial-gradient(circle at 66% 56%, var(--reveal-aura-secondary, rgba(255, 255, 255, 0.14)), transparent 44%),
    radial-gradient(circle at 35% 66%, var(--reveal-aura-tertiary, rgba(255, 255, 255, 0.1)), transparent 40%),
    radial-gradient(circle at 58% 34%, var(--reveal-aura-mix, rgba(255, 255, 255, 0.14)), transparent 46%);
  filter: blur(18px);
  opacity: 0;
  transform: scale(0.72);
  animation: problem-codex-hold-halo-charge var(--reveal-hold-duration, 1.35s) linear forwards;
}

.problem-codex-reveal--legendary.is-holding .problem-codex-reveal-card::after {
  content: "";
  position: absolute;
  width: 110%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg, transparent 0 12%, rgba(251, 191, 36, 0.34) 18%, rgba(255, 255, 255, 0.18) 24%, transparent 32% 42%, rgba(125, 211, 252, 0.18) 48%, transparent 56% 66%, rgba(255, 126, 219, 0.16) 72%, rgba(251, 191, 36, 0.28) 82%, transparent 94%),
    radial-gradient(circle at 44% 42%, rgba(251, 191, 36, 0.28), rgba(255, 236, 173, 0.1) 42%, transparent 68%);
  filter: blur(12px);
  opacity: 0;
  transform: scale(0.7) rotate(0deg);
  animation: problem-codex-legendary-halo-surge var(--reveal-hold-duration, 2.1s) linear forwards;
}

.problem-codex-reveal.is-opening .problem-codex-reveal-card__face {
  animation: problem-codex-reveal-open 0.9s cubic-bezier(.16, 1, .3, 1) forwards;
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card__face {
  background: #ffffff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 1px color-mix(in srgb, var(--reveal-signal, #f6d781) 68%, white),
    0 20px 58px rgba(0, 0, 0, 0.34),
    0 0 24px var(--reveal-aura, rgba(246, 215, 129, 0.28)),
    0 0 68px var(--reveal-aura-soft, rgba(246, 215, 129, 0.18));
  animation: none;
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card__face::before {
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--reveal-signal, #f6d781) 64%, white);
  border-radius: inherit;
  opacity: 0.82;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, 0.74),
    inset 0 0 28px var(--reveal-aura-soft, rgba(246, 215, 129, 0.16)),
    0 0 18px var(--reveal-aura, rgba(246, 215, 129, 0.22)),
    0 0 44px var(--reveal-aura-soft, rgba(246, 215, 129, 0.18));
}

.problem-codex-reveal--rare.is-revealed .problem-codex-reveal-card__face,
.problem-codex-reveal--unique.is-revealed .problem-codex-reveal-card__face,
.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__face {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 253, 245, 0.98)),
    radial-gradient(circle at 50% 42%, var(--reveal-aura-soft), transparent 56%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.9),
    0 0 0 1px color-mix(in srgb, var(--reveal-signal) 74%, white),
    0 22px 64px rgba(0, 0, 0, 0.36),
    0 0 28px var(--reveal-aura),
    0 0 76px var(--reveal-aura-soft);
}

.problem-codex-reveal--legendary.is-revealed .problem-codex-reveal-card__face {
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 240, 170, 0.24), transparent 54%),
    linear-gradient(180deg, #fffef8, #fffaf0);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.96),
    inset 0 0 0 6px rgba(255, 248, 220, 0.52),
    0 0 0 1px rgba(251, 191, 36, 0.92),
    0 24px 72px rgba(0, 0, 0, 0.38),
    0 0 34px rgba(251, 191, 36, 0.48),
    0 0 92px rgba(255, 236, 173, 0.34);
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card__face::after {
  animation: none;
  opacity: 0;
}

.problem-codex-reveal.is-revealed .problem-codex-reveal-card__aura {
  animation: problem-codex-reveal-final-aura 1.2s ease-out forwards;
}

.problem-codex-reveal__copy {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
}

.problem-codex-reveal__rarity {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 92px;
  height: 28px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  font-size: 12px;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
}

.problem-codex-reveal__rarity--common {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(148, 163, 184, 0.2);
  color: #ffffff;
}

.problem-codex-reveal__rarity--uncommon {
  border-color: rgba(134, 239, 172, 0.44);
  background: rgba(22, 101, 52, 0.2);
  color: #86efac;
}

.problem-codex-reveal__rarity--rare {
  border-color: rgba(125, 211, 252, 0.5);
  background: rgba(14, 116, 144, 0.22);
  color: #7dd3fc;
}

.problem-codex-reveal__rarity--unique {
  border-color: rgba(244, 114, 182, 0.52);
  background: rgba(157, 23, 77, 0.2);
  color: #f472b6;
}

.problem-codex-reveal__rarity--legendary {
  border-color: rgba(251, 191, 36, 0.64);
  background: linear-gradient(135deg, rgba(113, 63, 18, 0.5), rgba(251, 191, 36, 0.16));
  color: #fbbf24;
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    0 0 28px rgba(251, 191, 36, 0.22);
}

.problem-codex-reveal__copy span {
  color: #f6d781;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.problem-codex-reveal__copy h2 {
  margin: 0;
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: 0;
}

.problem-codex-reveal__copy p {
  margin: 0;
  color: rgba(248, 250, 252, 0.72);
  font-size: 13px;
  font-weight: 750;
}

.problem-codex-reveal-signal {
  position: relative;
  z-index: 1;
  width: min(220px, 68vw);
  height: 46px;
  pointer-events: none;
}

.problem-codex-reveal-signal::before {
  content: "";
  position: absolute;
  inset: 17px 32px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(246, 215, 129, 0.68), transparent);
  opacity: 0.42;
  filter: blur(4px);
}

.problem-codex-reveal-signal__ring,
.problem-codex-reveal-signal__spark {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
}

.problem-codex-reveal-signal__ring {
  width: 34px;
  height: 10px;
  border: 1px solid rgba(246, 215, 129, 0.68);
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4);
}

.problem-codex-reveal.is-holding .problem-codex-reveal-signal__ring {
  animation: problem-codex-signal-ring 1.04s ease-out infinite;
}

.problem-codex-reveal-signal__ring:nth-child(2) {
  animation-delay: 0.18s;
}

.problem-codex-reveal-signal__ring:nth-child(3) {
  animation-delay: 0.36s;
}

.problem-codex-reveal-signal__spark {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f6d781;
  box-shadow: 0 0 16px rgba(255, 236, 173, 0.54);
  opacity: 0;
}

.problem-codex-reveal-signal__spark:nth-child(4) {
  transform: translate(-88px, -10px);
}

.problem-codex-reveal-signal__spark:nth-child(5) {
  transform: translate(76px, -14px);
}

.problem-codex-reveal-signal__spark:nth-child(6) {
  transform: translate(-52px, 17px);
}

.problem-codex-reveal-signal__spark:nth-child(7) {
  transform: translate(48px, 16px);
}

.problem-codex-reveal.is-holding .problem-codex-reveal-signal__spark {
  animation: problem-codex-signal-spark 0.86s ease-in-out infinite;
}

.problem-codex-reveal.is-holding .problem-codex-reveal-signal__spark:nth-child(5) {
  animation-delay: 0.14s;
}

.problem-codex-reveal.is-holding .problem-codex-reveal-signal__spark:nth-child(6) {
  animation-delay: 0.29s;
}

.problem-codex-reveal.is-holding .problem-codex-reveal-signal__spark:nth-child(7) {
  animation-delay: 0.43s;
}

.problem-codex-reveal--common .problem-codex-reveal-signal__spark:nth-child(n+6),
.problem-codex-reveal--uncommon .problem-codex-reveal-signal__spark:nth-child(7) {
  display: none;
}

.problem-codex-reveal-hold {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: min(260px, 100%);
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(246, 215, 129, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff8df;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.problem-codex-reveal-hold:hover,
.problem-codex-reveal-hold:focus-visible {
  border-color: rgba(246, 215, 129, 0.46);
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 236, 173, 0.14), transparent 58%),
    rgba(255, 255, 255, 0.1);
  color: #fff8df;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 0 24px rgba(255, 236, 173, 0.14);
  outline: none;
}

.problem-codex-reveal-hold:active {
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 236, 173, 0.18), transparent 60%),
    rgba(255, 255, 255, 0.12);
  transform: translateY(1px);
}

.problem-codex-reveal-hold:disabled {
  border-color: rgba(246, 215, 129, 0.42);
  background: rgba(255, 255, 255, 0.1);
  color: #fff8df;
  cursor: default;
}

.problem-codex-reveal-hold__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(246, 215, 129, 0.38), rgba(255, 255, 255, 0.24));
}

.problem-codex-reveal.is-holding .problem-codex-reveal-hold__fill {
  animation: problem-codex-hold-fill var(--reveal-hold-duration, 1.35s) linear forwards;
}

.problem-codex-reveal-hold strong {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 950;
}

.problem-codex-reveal__burst {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.problem-codex-reveal__burst::before {
  content: "";
  position: absolute;
  inset: -84px;
  border-radius: 50%;
  border: 1px solid var(--reveal-signal, rgba(246, 215, 129, 0.8));
  box-shadow:
    0 0 0 18px rgba(255, 255, 255, 0.05),
    0 0 64px var(--reveal-aura, rgba(246, 215, 129, 0.36));
  opacity: 0;
  animation: problem-codex-burst-halo 0.82s cubic-bezier(.16, 1, .3, 1) forwards;
}

.problem-codex-reveal__burst span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, #fff, var(--reveal-signal, #f6d781));
  box-shadow: 0 0 18px var(--reveal-signal-warm, rgba(246, 215, 129, 0.56));
  opacity: 0;
  transform: translate(-50%, -50%) rotate(calc(var(--burst-index) * 30deg)) translateY(0) scaleY(0.3);
  animation: problem-codex-burst-ray 0.78s cubic-bezier(.16, 1, .3, 1) forwards;
}

.problem-codex-reveal__burst span:nth-child(1) { --burst-index: 0; }
.problem-codex-reveal__burst span:nth-child(2) { --burst-index: 1; }
.problem-codex-reveal__burst span:nth-child(3) { --burst-index: 2; }
.problem-codex-reveal__burst span:nth-child(4) { --burst-index: 3; }
.problem-codex-reveal__burst span:nth-child(5) { --burst-index: 4; }
.problem-codex-reveal__burst span:nth-child(6) { --burst-index: 5; }
.problem-codex-reveal__burst span:nth-child(7) { --burst-index: 6; }
.problem-codex-reveal__burst span:nth-child(8) { --burst-index: 7; }
.problem-codex-reveal__burst span:nth-child(9) { --burst-index: 8; }
.problem-codex-reveal__burst span:nth-child(10) { --burst-index: 9; }
.problem-codex-reveal__burst span:nth-child(11) { --burst-index: 10; }
.problem-codex-reveal__burst span:nth-child(12) { --burst-index: 11; }

.problem-codex-reveal--common .problem-codex-reveal__burst span:nth-child(n+7),
.problem-codex-reveal--uncommon .problem-codex-reveal__burst span:nth-child(n+9),
.problem-codex-reveal--rare .problem-codex-reveal__burst span:nth-child(n+11) {
  display: none;
}

.problem-codex-reveal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.problem-codex-reveal__btn {
  height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #f8fafc;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.problem-codex-reveal__btn--primary {
  border-color: rgba(246, 215, 129, 0.4);
  background: #f6d781;
  color: #172033;
}

@keyframes problem-codex-reveal-forming-shake {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  28% {
    transform: translateY(-2px) rotate(-0.45deg) scale(1.006);
  }
  56% {
    transform: translateY(1px) rotate(0.45deg) scale(1.004);
  }
}

@keyframes problem-codex-forming-mark {
  0%, 100% {
    transform: scale(1);
    box-shadow:
      0 18px 42px rgba(23, 32, 51, 0.24),
      0 0 0 10px rgba(255, 255, 255, 0.2);
  }
  50% {
    transform: scale(1.035);
    box-shadow:
      0 20px 46px rgba(23, 32, 51, 0.28),
      0 0 0 14px rgba(246, 215, 129, 0.1);
  }
}

@keyframes problem-codex-forming-bar-slide {
  0% {
    transform: translateX(-115%);
  }
  100% {
    transform: translateX(250%);
  }
}

@keyframes problem-codex-reveal-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes problem-codex-reveal-breathe {
  0%, 100% {
    opacity: 0.64;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes problem-codex-reveal-card-idle {
  0%, 100% {
    transform: translateY(0) rotateY(-2deg);
  }
  50% {
    transform: translateY(-4px) rotateY(2deg);
  }
}

@keyframes problem-codex-reveal-charged {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), 0 24px 60px rgba(0, 0, 0, 0.34);
  }
  50% {
    transform: translateY(-2px) scale(1.015);
    box-shadow: inset 0 0 0 1px rgba(255, 236, 173, 0.72), 0 28px 72px rgba(246, 215, 129, 0.24);
  }
}

@keyframes problem-codex-reveal-hold-shake {
  0%, 100% {
    transform: translateX(0) rotate(0deg) scale(1.02);
  }
  25% {
    transform: translateX(-2px) rotate(-0.65deg) scale(1.025);
  }
  50% {
    transform: translateX(2px) rotate(0.65deg) scale(1.03);
  }
  75% {
    transform: translateX(-1px) rotate(-0.3deg) scale(1.025);
  }
}

@keyframes problem-codex-hold-frame-charge {
  0% {
    opacity: 0.36;
    box-shadow:
      inset 0 0 12px rgba(226, 232, 240, 0.1),
      0 0 8px rgba(255, 236, 173, 0);
  }
  55% {
    opacity: 0.72;
    box-shadow:
      inset 0 0 24px rgba(226, 232, 240, 0.16),
      0 0 24px rgba(148, 163, 184, 0.16);
  }
  100% {
    opacity: 1;
    box-shadow:
      inset 0 0 34px rgba(226, 232, 240, 0.22),
      0 0 42px var(--reveal-frame-final-glow, rgba(148, 163, 184, 0.3));
  }
}

@keyframes problem-codex-hold-aura-charge {
  0% {
    opacity: 0.42;
    transform: scale(0.86);
  }
  55% {
    opacity: 0.82;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(var(--reveal-aura-final-scale, 1.32));
  }
}

@keyframes problem-codex-hold-halo-charge {
  0% {
    opacity: 0;
    transform: scale(0.72);
  }
  45% {
    opacity: 0.32;
    transform: scale(1.02);
  }
  100% {
    opacity: var(--reveal-halo-final-opacity, 0.76);
    transform: scale(var(--reveal-halo-final-scale, 1.34));
  }
}

@keyframes problem-codex-legendary-halo-surge {
  0% {
    opacity: 0;
    transform: scale(0.68) rotate(0deg);
  }
  28% {
    opacity: 0.34;
  }
  58% {
    opacity: 0.76;
    transform: scale(1.28) rotate(132deg);
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0.86;
    transform: scale(1.72) rotate(245deg);
  }
}

@keyframes problem-codex-reveal-sweep {
  0% {
    transform: translateX(-120%);
    opacity: 0;
  }
  40% {
    opacity: 0.92;
  }
  100% {
    transform: translateX(120%);
    opacity: 0;
  }
}

@keyframes problem-codex-reveal-open {
  0% {
    transform: scale(1) rotateY(0deg);
    filter: brightness(1);
  }
  42% {
    transform: scale(1.08) rotateY(84deg);
    filter: brightness(1.8);
  }
  100% {
    transform: scale(1) rotateY(0deg);
    filter: brightness(1);
  }
}

@keyframes problem-codex-signal-ring {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.25);
  }
  18% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(3.8);
  }
}

@keyframes problem-codex-signal-spark {
  0%, 100% {
    opacity: 0;
    filter: blur(0);
  }
  42%, 62% {
    opacity: 0.66;
    filter: blur(1px);
  }
}

@keyframes problem-codex-hold-fill {
  to {
    width: 100%;
  }
}

@keyframes problem-codex-reveal-final-aura {
  0% {
    opacity: 0.2;
    transform: scale(0.72);
  }
  45% {
    opacity: 1;
    transform: scale(1.42);
  }
  100% {
    opacity: 0.76;
    transform: scale(1.08);
  }
}

@keyframes problem-codex-foil-sweep {
  0% {
    opacity: 0;
    transform: translateX(0) skewX(-14deg);
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0.42;
    transform: translateX(250%) skewX(-14deg);
  }
}

@keyframes problem-codex-foil-stars {
  0% {
    opacity: 0;
    transform: scale(0.96);
  }
  32% {
    opacity: 1;
    transform: scale(1.01);
  }
  100% {
    opacity: 0.72;
    transform: scale(1);
  }
}

@keyframes problem-codex-foil-glint {
  0% {
    opacity: 0;
    transform: scale(0.44) rotate(18deg);
  }
  24% {
    opacity: 1;
    transform: scale(1.12) rotate(18deg);
  }
  58% {
    opacity: 0.82;
    transform: scale(0.92) rotate(18deg);
  }
  100% {
    opacity: 0.34;
    transform: scale(0.86) rotate(18deg);
  }
}

@keyframes problem-codex-burst-halo {
  0% {
    opacity: 0;
    transform: scale(0.28);
  }
  38% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.2);
  }
}

@keyframes problem-codex-burst-ray {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--burst-index) * 30deg)) translateY(0) scaleY(0.2);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--burst-index) * 30deg)) translateY(-118px) scaleY(1);
  }
}

@keyframes problem-codex-reveal-art-in {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .problem-codex-card--ready,
  .problem-codex-card--ready::before,
  .problem-codex-card--ready::after,
  .problem-codex-reveal__panel::before,
  .problem-codex-reveal-card::before,
  .problem-codex-reveal-card::after,
  .problem-codex-reveal-card__aura,
  .problem-codex-reveal-card__face,
  .problem-codex-reveal-card__face::before,
  .problem-codex-reveal-card__face::after,
  .problem-codex-reveal-card__face img,
  .problem-codex-reveal-forming,
  .problem-codex-reveal-forming::before,
  .problem-codex-reveal-forming::after,
  .problem-codex-reveal-forming span,
  .problem-codex-reveal-loading-bar span,
  .problem-codex-reveal-signal__ring,
  .problem-codex-reveal-signal__spark,
  .problem-codex-reveal-hold__fill,
  .problem-codex-reveal-card__foil-sweep,
  .problem-codex-reveal-card__foil-stars,
  .problem-codex-reveal-card__foil-stars::before,
  .problem-codex-reveal-card__foil-stars::after,
  .problem-codex-reveal__burst::before,
  .problem-codex-reveal__burst span,
  .problem-codex-reveal__burst {
    animation: none !important;
  }
}

@media (max-width: 980px) {
  .problem-codex-main {
    width: calc(100vw - 28px);
  }

  .problem-codex-hero {
    grid-template-columns: 1fr;
  }

  .problem-codex-hero p {
    white-space: normal;
  }

  .problem-codex-summary {
    justify-content: flex-start;
  }

  .problem-codex-drawer__panel {
    width: min(720px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    grid-template-columns: 1fr;
    grid-template-rows: minmax(340px, 48vh) minmax(0, 1fr);
  }

  .problem-codex-drawer__stage {
    padding: 22px;
    border-right: 0;
    border-bottom: 1px solid rgba(23, 32, 51, 0.08);
  }

  .problem-codex-drawer-art {
    width: min(100%, 460px);
    height: 100%;
  }

  .problem-codex-evolution-card__image {
    max-width: 128px;
  }
}

@media (max-width: 560px) {
  .problem-codex-main {
    padding-top: 78px;
  }

  .problem-codex-hero h1 {
    font-size: 31px;
  }

  .problem-codex-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .problem-codex-card {
    grid-template-rows: auto 184px minmax(104px, 1fr);
    min-height: 340px;
    padding: 10px;
  }

  .problem-codex-card__state {
    max-width: 82px;
  }

  .problem-codex-drawer__header {
    padding: 18px 16px;
  }

  .problem-codex-drawer__panel {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    grid-template-rows: minmax(300px, 44vh) minmax(0, 1fr);
  }

  .problem-codex-drawer__stage {
    padding: 16px;
  }

  .problem-codex-drawer-art {
    width: min(100%, 340px);
    height: 100%;
  }

  .problem-codex-evolution-card__image {
    max-width: 108px;
  }

  .problem-codex-drawer__header h2 {
    font-size: 24px;
  }

  .problem-codex-effect-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .problem-codex-effect-row__badge {
    justify-self: start;
  }
}