/* ============================================================
   Class2Class . CAREERS MINI-GAME KIT
   The shell the three job-post games share: card, header with the
   "optional · 60 seconds" chip, two-segment progress, step body,
   buttons, fields and the closing note.

   Everything is scoped under .cgame so nothing leaks into the host
   page, and every colour reads the page's own tokens first so a
   game always matches the post it sits in.

   A game adds only what is genuinely its own (a drag list, a set of
   budget sliders, a row of swatches) in its own file.
   ============================================================ */

.cgame {
  --cg-paper: var(--paper, #f6f1ea);
  --cg-paper2: var(--paper-2, #efe7f7);
  --cg-ink: var(--c2c-ink, #3d3a40);
  --cg-soft: var(--ink-soft, #5b565f);
  --cg-purple: var(--c2c-purple, #8157d9);
  --cg-deep: var(--c2c-deep-purple, #53389e);
  --cg-lpurple: var(--c2c-light-purple, #f4ebff);
  --cg-cyan: var(--c2c-cyan, #5cb2ff);
  --cg-pink: var(--c2c-pink, #ee46bc);
  --cg-green: var(--c2c-green, #78c142);
  --cg-orange: var(--c2c-orange, #f68d39);
  --cg-success: var(--c2c-success, #12b76a);
  --cg-line: var(--line, #d8cfc2);
  --cg-body: var(--c2c-font, 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif);
  --cg-display: var(--display, 'Open Sans', -apple-system, BlinkMacSystemFont, sans-serif);
  --cg-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));

  position: relative;
  font-family: var(--cg-body);
  color: var(--cg-ink);
  background: var(--cg-paper2);
  border: 1.5px solid var(--cg-line);
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: 0 26px 64px -36px rgba(83, 56, 158, 0.55);
  overflow: hidden;
  line-height: 1.5;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.cgame * {
  box-sizing: border-box;
}
.cgame::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(238, 70, 188, 0.1), transparent 58%),
    radial-gradient(90% 70% at -10% 110%, rgba(92, 178, 255, 0.09), transparent 60%);
}
.cgame > * {
  position: relative;
  z-index: 1;
}

/* screen-reader-only live region */
.cg-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- header ---------- */
.cg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  flex-wrap: wrap;
}
.cg-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cg-deep);
}
.cg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cg-purple);
  flex: none;
  animation: cgPulse 1.9s ease-in-out infinite;
}
@keyframes cgPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.35);
    opacity: 0.55;
  }
}
/* The honest framing every post carries: optional, and a minute long. */
.cg-meta {
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cg-soft);
  border: 1px solid var(--cg-line);
  border-radius: 100px;
  padding: 3px 9px;
  background: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}
.cg-step {
  margin-top: 5px;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--cg-soft);
  width: 100%;
}
.cg-step b {
  color: var(--cg-deep);
  font-weight: 800;
}

/* two-segment progress */
.cg-ticks {
  display: flex;
  gap: 5px;
  margin-top: 9px;
}
.cg-ticks i {
  height: 3px;
  flex: 1 1 0;
  border-radius: 3px;
  background: var(--cg-line);
  transition: background 0.4s var(--cg-ease);
}
.cg-ticks i.on {
  background: linear-gradient(90deg, var(--cg-purple), var(--cg-deep));
}

/* ---------- swappable body ---------- */
.cg-body {
  margin-top: 14px;
}
.cg-in {
  animation: cgIn 0.4s var(--cg-ease) both;
}
@keyframes cgIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- the case card every game opens with ---------- */
.cg-case {
  background: #fff;
  border: 1.5px solid var(--cg-line);
  border-radius: 14px;
  padding: 14px 15px;
}
.cg-case-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cg-success);
}
.cg-case-tag .blip {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cg-success);
  flex: none;
}
.cg-case-title {
  margin: 8px 0 0;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
  color: var(--cg-ink);
}
.cg-case-detail {
  margin: 7px 0 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--cg-soft);
}

.cg-lead {
  margin: 12px 0 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--cg-ink);
}
.cg-lead span {
  display: block;
  font-weight: 400;
  color: var(--cg-soft);
  margin-top: 3px;
}

/* ---------- fields ---------- */
.cg-field {
  margin-top: 11px;
}
.cg-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--cg-ink);
  margin-bottom: 6px;
}
.cg-input,
.cg-textarea,
.cg-select {
  width: 100%;
  font-family: inherit;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--cg-ink);
  background: #fff;
  border: 1.5px solid var(--cg-line);
  border-radius: 11px;
  padding: 9px 11px;
  transition:
    border-color 0.2s var(--cg-ease),
    box-shadow 0.2s var(--cg-ease);
}
.cg-textarea {
  resize: vertical;
  min-height: 68px;
}
.cg-input:focus,
.cg-textarea:focus,
.cg-select:focus {
  outline: none;
  border-color: var(--cg-purple);
  box-shadow: 0 0 0 3px rgba(129, 87, 217, 0.16);
}

/* ---------- buttons ---------- */
.cg-actions {
  display: flex;
  gap: 9px;
  margin-top: 13px;
}
.cg-btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
  background: var(--cg-purple);
  border: none;
  border-radius: 12px;
  padding: 11px 14px;
  cursor: pointer;
  transition:
    background 0.2s var(--cg-ease),
    transform 0.2s var(--cg-ease),
    opacity 0.2s var(--cg-ease);
  -webkit-tap-highlight-color: transparent;
}
.cg-btn:hover:not(:disabled) {
  background: var(--cg-deep);
  transform: translateY(-1px);
}
.cg-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.cg-btn.is-done,
.cg-btn.is-done:disabled {
  background: var(--cg-success);
  opacity: 1;
  cursor: default;
}
.cg-ghost {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--cg-soft);
  background: none;
  border: 1.5px solid var(--cg-line);
  border-radius: 12px;
  padding: 9px 14px;
  cursor: pointer;
  transition:
    color 0.18s ease,
    border-color 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.cg-ghost:hover {
  color: var(--cg-ink);
  border-color: var(--cg-soft);
}
.cg-btn svg,
.cg-ghost svg {
  width: 15px;
  height: 15px;
  flex: none;
}

/* ---------- the closing note ---------- */
.cg-note {
  margin: 12px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--cg-line);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--cg-soft);
}
.cg-note b {
  color: var(--cg-ink);
}

/* a read-back of what the candidate chose, shown while they explain it */
.cg-recap {
  background: #fff;
  border: 1.5px solid var(--cg-line);
  border-radius: 12px;
  padding: 11px 13px;
  font-size: 0.82rem;
  color: var(--cg-ink);
}
.cg-recap ol,
.cg-recap ul {
  margin: 0;
  padding-left: 1.1em;
}
.cg-recap li + li {
  margin-top: 4px;
}
.cg-recap .rk {
  color: var(--cg-soft);
}

@media (max-width: 420px) {
  .cgame {
    padding: 15px 13px 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cg-dot {
    animation: none;
  }
  .cg-in {
    animation: none;
  }
  .cg-btn,
  .cg-ghost {
    transition: none;
  }
  .cg-btn:hover:not(:disabled) {
    transform: none;
  }
}