/* ============================================================================
   Custom Junk Achievements wizard — centered modal opened from the wand
   button in the Junk header. Styled to match the My Courses management modal
   (custom-courses.css) so it reads as the same family of dialog.
   ============================================================================ */

/* Header trigger: a filled amber sparkle so it reads as "make your own" and
   stays visually distinct from the gray outline wrench/info icons next to it.
   !important + high specificity to win over the themed .game-options-icon-btn
   color rules (light + dark) that otherwise tint every header icon the same. */
.game-section-header .controls .junk-custom-ach-btn { color: #e0a82e !important; }
.game-section-header .controls .junk-custom-ach-btn:hover { color: #f0b94a !important; }
.junk-custom-ach-btn svg { fill: currentColor; }

.jca-modal-backdrop[hidden],
.jca-modal[hidden] { display: none; }

.jca-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.32);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10080;
}

.jca-modal {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(520px, calc(100vw - 24px));
  max-height: min(82dvh, 760px, calc(100dvh - 32px - var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)) - var(--safe-top-inset, env(safe-area-inset-top, 0px))));
  background: var(--panel);
  border: 2px solid var(--line-soft, rgba(136, 165, 191, 0.3));
  border-radius: 18px;
  box-shadow: 0 22px 48px -16px rgba(8, 24, 48, 0.55);
  z-index: 10081;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.jca-modal-open { overflow: hidden; }

.jca-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft, rgba(136, 165, 191, 0.2));
  flex-shrink: 0;
}

.jca-modal-header h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.jca-modal-subtitle {
  margin-top: 2px;
  color: var(--muted);
}

.jca-modal-close {
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Sign-in gate (account-only feature) ──────────────────────────────── */
.jca-hint {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.jca-hint[hidden] { display: none; }
.jca-hint p { margin: 0; color: var(--muted); }
.jca-signin { font-weight: 700; }

/* ── Create / edit form ───────────────────────────────────────────────── */
.jca-form-wrap { flex-shrink: 0; }
.jca-form-wrap[hidden] { display: none; }

.jca-form {
  display: grid;
  grid-template-columns: 1fr 96px;
  gap: 10px 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line-soft, rgba(136, 165, 191, 0.18));
}

.jca-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.jca-field-emoji { grid-column: 1 / -1; }
.jca-status { grid-column: 1 / -1; }
.jca-form-actions { grid-column: 1 / -1; }

.jca-label {
  font-size: calc(12px + var(--font-size-step));
  font-weight: 600;
  color: var(--ink);
}

.jca-input {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-alt, transparent);
  color: var(--ink);
  font-size: calc(14px + var(--font-size-step));
  font-family: inherit;
}
.jca-input:focus {
  outline: 2px solid #4a9eff;
  outline-offset: -1px;
}

.jca-points-input {
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.jca-points-input::-webkit-inner-spin-button,
.jca-points-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.jca-emoji-input {
  width: 64px;
  text-align: center;
  font-size: 22px;
  line-height: 1;
}

.jca-emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 6px;
  margin-top: 4px;
  max-height: 132px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line-soft, rgba(136, 165, 191, 0.22));
  border-radius: 10px;
  background: var(--panel-alt, transparent);
}

.jca-emoji-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
  padding: 0;
  font-size: 20px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.12s ease, border-color 0.12s ease;
}
.jca-emoji-btn:hover { background: var(--hi-faint, rgba(74, 158, 255, 0.12)); }
.jca-emoji-btn:active { transform: scale(0.92); }
.jca-emoji-btn[data-active="true"] {
  border-color: #4a9eff;
  background: rgba(74, 158, 255, 0.16);
}

.jca-status { min-height: 1.2em; color: var(--muted); }
.jca-status.is-error {
  color: #d9534f;
  background: rgba(220, 53, 69, 0.08);
  border-left: 3px solid #d9534f;
  padding: 6px 10px;
  border-radius: 4px;
}

.jca-form-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}
.jca-form-actions .btn { min-width: 96px; }
.jca-submit {
  background: linear-gradient(180deg, #2384dc, #176dc6);
  border-color: #4a9eff;
  color: #ffffff;
  font-weight: 700;
}
.jca-submit:disabled { opacity: 0.55; cursor: not-allowed; }

/* ── Saved list ───────────────────────────────────────────────────────── */
.jca-list-header {
  padding: 12px 16px 6px;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: calc(10px + var(--font-size-step));
  flex-shrink: 0;
}

.jca-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jca-empty {
  padding: 4px 16px 16px;
  color: var(--muted);
}
.jca-empty[hidden] { display: none; }

.jca-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line-soft, rgba(136, 165, 191, 0.22));
  border-radius: 12px;
  background: var(--panel-alt);
}

.jca-row-emoji {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}

.jca-row-name {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jca-row-pts {
  flex-shrink: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent, #4a9eff);
  min-width: 34px;
  text-align: right;
}

.jca-row-edit,
.jca-row-delete {
  flex: 0 0 auto;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}
.jca-row-edit {
  color: var(--ink);
  border: 1px solid var(--line-soft, rgba(136, 165, 191, 0.3));
}
.jca-row-edit:hover { background: var(--hi-faint, rgba(74, 158, 255, 0.12)); }
.jca-row-delete {
  color: var(--danger, #d44a4a);
  border: 1px solid color-mix(in srgb, var(--danger, #d44a4a) 45%, transparent);
}
.jca-row-delete:hover { background: color-mix(in srgb, var(--danger, #d44a4a) 14%, transparent); }

/* Light theme: white panel to match the other modals. */
:root[data-theme="light"] .jca-modal { background: #ffffff; }

@media (max-width: 480px) {
  .jca-modal {
    width: calc(100vw - 12px);
    max-height: calc(92dvh - var(--safe-bottom-inset, env(safe-area-inset-bottom, 0px)));
    border-radius: 14px;
  }
  .jca-form { grid-template-columns: 1fr 84px; }
}