.upg-readiness,
.upg-ability,
.upg-cross {
  --upg-ink: var(--ink, #101316);
  --upg-paper: var(--white, #fffdf8);
  --upg-base: var(--paper, #f3f0e7);
  --upg-line: var(--line, #d8d3c7);
  --upg-cyan: var(--cyan, #52d6df);
  --upg-lime: var(--lime, #d9f257);
  --upg-orange: var(--orange, #ff6b42);
  color: var(--upg-ink);
}

.upg-readiness {
  position: relative;
  overflow: hidden;
  padding: clamp(24px, 4vw, 38px);
  border: 1px solid #a8d9dc;
  border-radius: 26px;
  background:
    radial-gradient(circle at 96% 0, rgba(82, 214, 223, .28), transparent 30%),
    linear-gradient(145deg, #f7ffff, #edf7f0);
  box-shadow: 0 18px 45px rgba(16, 19, 22, .09);
}

.upg-readiness::after {
  content: "READY?";
  position: absolute;
  right: -12px;
  bottom: -26px;
  color: rgba(16, 19, 22, .035);
  font: 900 clamp(5rem, 13vw, 9rem)/1 Georgia, serif;
  pointer-events: none;
}

.upg-head {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 22px;
}

.upg-label {
  color: #17646b;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .15em;
}

.upg-head h2 {
  margin: 6px 0 8px;
}

.upg-head p {
  max-width: 760px;
  margin: 0;
  color: #526064;
}

.upg-ready-score {
  min-width: 98px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--upg-ink);
  color: #fff;
  text-align: center;
}

.upg-ready-score small {
  display: block;
  color: #bac5c6;
  font-size: .67rem;
}

.upg-ready-score b {
  color: var(--upg-lime);
  font: 900 1.8rem/1.2 Georgia, serif;
}

.upg-ready-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.upg-ready-card,
.upg-task-card {
  border: 1px solid var(--upg-line);
  border-radius: 18px;
  background: var(--upg-paper);
}

.upg-ready-card {
  padding: 18px;
}

.upg-ready-card h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  line-height: 1.5;
}

.upg-options {
  display: grid;
  gap: 7px;
}

.upg-option {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--upg-line);
  border-radius: 10px;
  background: #fff;
  color: var(--upg-ink);
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: .82rem;
  font-weight: 760;
  transition: transform .16s, border-color .16s, background .16s;
}

.upg-option:hover,
.upg-option:focus-visible {
  transform: translateY(-1px);
  border-color: #5daeb5;
  outline: none;
}

.upg-option.is-correct {
  border-color: #4b9b78;
  background: #e5f5ec;
}

.upg-option.is-wrong {
  border-color: #e08468;
  background: #fff0eb;
}

.upg-feedback {
  min-height: 0;
  margin-top: 9px;
  padding: 0;
  border-radius: 10px;
  color: #566164;
  font-size: .77rem;
}

.upg-feedback.is-visible {
  min-height: 48px;
  padding: 9px 10px;
  background: #eef4f2;
}

.upg-feedback b {
  color: var(--upg-ink);
}

.upg-ready-summary {
  position: relative;
  z-index: 1;
  display: none;
  margin-top: 15px;
  padding: 14px 16px;
  border-radius: 13px;
  background: var(--upg-ink);
  color: #e6eeee;
}

.upg-ready-summary.is-visible {
  display: block;
}

.upg-ready-summary b {
  color: var(--upg-lime);
}

.story-mode-switch {
  position: relative;
  z-index: 2;
  display: inline-flex;
  gap: 5px;
  margin: 18px 0 0;
  padding: 5px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(255, 255, 255, .065);
}

.story-mode-switch button {
  padding: 7px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #d6dddd;
  cursor: pointer;
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
}

.story-mode-switch button.is-active {
  background: var(--story-accent, #52d6df);
  color: #101316;
}

.story-quick {
  position: relative;
  z-index: 1;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 24px 0 6px;
}

.chapter-story.is-quick .story-scenes {
  display: none;
}

.chapter-story.is-quick .story-quick {
  display: grid;
}

.story-quick-card {
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;
  background: rgba(255, 255, 255, .07);
  color: #dfe5e4;
  font-size: .84rem;
}

.story-quick-card b {
  display: block;
  margin-bottom: 7px;
  color: var(--story-accent, #52d6df);
}

.story-math-bridge {
  position: relative;
  z-index: 1;
  margin: 22px 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 20px;
  background: rgba(255, 255, 255, .055);
}

.story-math-bridge h3 {
  margin: 0 0 5px;
  color: #fff;
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 1.2rem;
}

.story-math-bridge > p {
  margin: 0 0 16px;
  color: #bfc9ca;
  font-size: .82rem;
}

.story-bridge-row {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  gap: 8px;
  align-items: stretch;
  margin-top: 9px;
}

.story-bridge-cell {
  padding: 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .075);
  color: #dfe5e4;
  font-size: .79rem;
}

.story-bridge-cell small {
  display: block;
  margin-bottom: 6px;
  color: var(--story-accent, #52d6df);
  font-weight: 900;
  letter-spacing: .08em;
}

.story-bridge-cell.formula {
  display: grid;
  place-items: center;
  background: #f6f1e6;
  color: #101316;
  font: 800 .9rem/1.45 Georgia, "Times New Roman", serif;
  text-align: center;
}

.story-bridge-arrow {
  display: grid;
  place-items: center;
  color: var(--story-accent-2, #d9f257);
  font-weight: 900;
}

.upg-ability {
  position: relative;
  overflow: hidden;
  padding: clamp(25px, 4vw, 42px);
  border: 1px solid var(--upg-line);
  border-radius: 28px;
  background:
    linear-gradient(rgba(255, 255, 255, .72), rgba(255, 255, 255, .72)),
    repeating-linear-gradient(135deg, #edf3ed 0 12px, #e5ece8 12px 24px);
  box-shadow: 0 22px 55px rgba(16, 19, 22, .11);
}

.upg-ability::after {
  content: "DO";
  position: absolute;
  right: 14px;
  top: -48px;
  color: rgba(16, 19, 22, .035);
  font: 900 10rem/1 Georgia, serif;
  pointer-events: none;
}

.upg-progress {
  display: flex;
  gap: 7px;
  align-items: center;
  min-width: 180px;
}

.upg-progress i {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: #d8deda;
}

.upg-progress i.is-done {
  background: linear-gradient(90deg, #2b9a81, var(--upg-lime));
}

.upg-progress b {
  min-width: 40px;
  font: 900 .9rem Georgia, serif;
}

.upg-task-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.upg-task-card {
  padding: 20px;
}

.upg-task-no {
  color: #49706f;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.upg-task-card h3 {
  margin: 6px 0 7px;
}

.upg-task-card > p {
  margin: 0 0 13px;
  color: #566164;
  font-size: .86rem;
}

.upg-textarea,
.upg-input {
  width: 100%;
  border: 1px solid #bfc9c5;
  border-radius: 11px;
  background: #fff;
  color: var(--upg-ink);
  font: inherit;
}

.upg-textarea {
  min-height: 96px;
  padding: 11px 12px;
  resize: vertical;
}

.upg-input {
  padding: 11px 12px;
}

.upg-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 9px 13px;
  border: 0;
  border-radius: 10px;
  background: var(--upg-ink);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
  font-weight: 900;
}

.upg-action:hover,
.upg-action:focus-visible {
  background: #244b50;
  outline: 3px solid rgba(82, 214, 223, .32);
}

.upg-map-bank,
.upg-map-slots {
  display: grid;
  gap: 8px;
}

.upg-map-bank {
  grid-template-columns: repeat(3, 1fr);
  margin: 12px 0;
}

.upg-map-chip {
  padding: 9px;
  border: 1px solid #85b5b3;
  border-radius: 10px;
  background: #e8f8f7;
  color: #173b3f;
  cursor: grab;
  font: inherit;
  font-size: .76rem;
  font-weight: 900;
}

.upg-map-chip.is-selected {
  outline: 3px solid var(--upg-orange);
}

.upg-map-chip[hidden] {
  display: none;
}

.upg-map-slot {
  min-height: 48px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 10px 11px;
  border: 1px dashed #9faeaa;
  border-radius: 10px;
  background: #f6f8f5;
  font-size: .78rem;
  cursor: pointer;
}

.upg-map-slot b {
  color: #3d5f5e;
}

.upg-map-slot span {
  color: #788381;
  text-align: right;
}

.upg-map-slot.is-filled {
  border-style: solid;
  border-color: #5fa483;
  background: #e8f5ed;
}

.upg-methods {
  display: grid;
  gap: 8px;
}

.upg-methods .upg-option {
  min-height: 44px;
}

.upg-ability-summary {
  position: relative;
  z-index: 1;
  display: none;
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--upg-lime);
  color: var(--upg-ink);
  font-weight: 850;
}

.upg-ability-summary.is-visible {
  display: block;
}

.upg-cross {
  position: relative;
  overflow: hidden;
  padding: clamp(25px, 5vw, 46px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(217, 242, 87, .2), transparent 28%),
    linear-gradient(145deg, #142227, #101316);
  color: #fff;
  box-shadow: 0 24px 62px rgba(16, 19, 22, .18);
}

.upg-cross .upg-label {
  color: var(--upg-lime);
}

.upg-cross .upg-head h2 {
  color: #fff;
}

.upg-cross .upg-head p {
  color: #c4ced0;
}

.upg-cross-steps {
  display: grid;
  gap: 10px;
}

.upg-cross-step {
  padding: 17px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 15px;
  background: rgba(255, 255, 255, .065);
  opacity: .48;
}

.upg-cross-step.is-active,
.upg-cross-step.is-done {
  opacity: 1;
}

.upg-cross-step.is-done {
  border-color: rgba(217, 242, 87, .5);
}

.upg-cross-step h3 {
  margin: 0 0 10px;
  color: #fff;
  font-size: 1rem;
}

.upg-cross-step .upg-option {
  border-color: rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .08);
  color: #fff;
}

.upg-cross-step .upg-option.is-correct {
  background: #315843;
}

.upg-cross-step .upg-option.is-wrong {
  background: #6a3329;
}

.upg-cross-step .upg-feedback {
  color: #c9d1d2;
}

.upg-cross-step .upg-feedback.is-visible {
  background: rgba(255, 255, 255, .07);
}

.upg-cross-step .upg-feedback b {
  color: var(--upg-lime);
}

.upg-cross-finish {
  display: none;
  margin-top: 15px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--upg-lime);
  color: var(--upg-ink);
  font-weight: 900;
}

.upg-cross-finish.is-visible {
  display: block;
}

@media (max-width: 920px) {
  .upg-ready-grid {
    grid-template-columns: 1fr;
  }

  .upg-task-grid {
    grid-template-columns: 1fr;
  }

  .story-quick {
    grid-template-columns: repeat(2, 1fr);
  }

  .story-bridge-row {
    grid-template-columns: 1fr 28px 1fr 28px 1fr;
  }
}

@media (max-width: 680px) {
  .upg-head {
    display: grid;
  }

  .upg-ready-score {
    width: 100%;
  }

  .story-quick {
    grid-template-columns: 1fr;
  }

  .story-bridge-row {
    grid-template-columns: 1fr;
  }

  .story-bridge-arrow {
    transform: rotate(90deg);
  }

  .upg-map-bank {
    grid-template-columns: 1fr;
  }

  .upg-map-slot {
    grid-template-columns: 1fr;
  }

  .upg-map-slot span {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .upg-option,
  .upg-action {
    transition: none;
  }
}