/* ============================================================
   Moss&Bronze — Shared Stylesheet
   Import with:
   <link rel="stylesheet" href="mosswood.css">
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Jost:wght@300;400;500&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Variables ─────────────────────────────────────────────── */

:root {
  --bg:           #FAFAF8;
  --bg-secondary: #F2F0EC;
  --text-primary:   #1C1B18;
  --text-secondary: #6B6860;
  --text-tertiary:  #A09D96;
  --border:       rgba(0,0,0,0.1);
  --border-hover: rgba(0,0,0,0.2);

  /* Card accent colours — override per generator if needed */
  --accent-1: #B4426C; /* trope / wound   */
  --accent-2: #4A6741; /* setting / drive  */
  --accent-3: #7B5E3A; /* conflict / mask  */
  --accent-4: #5A5A9E; /* emotion / shadow */
  --accent-5: #4A3A1A; /* quirk (dashed)   */
}

/* ── Base ───────────────────────────────────────────────────── */

body {
  font-family: 'Jost', sans-serif;
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

/* ── Page wrapper ───────────────────────────────────────────── */

.gen-root, .root {
  max-width: 780px;
  width: 100%;
}

/* ── Header ─────────────────────────────────────────────────── */

.gen-header, .header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.gen-brand, .brand {
  font-family: 'Cormorant Garamond', serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.6rem;
}

.gen-title, .title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.2;
}

.gen-subtitle, .subtitle {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-secondary);
  margin-top: 0.5rem;
  letter-spacing: 0.03em;
}

/* ── Cards grid ─────────────────────────────────────────────── */

.cards-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 1.75rem;
}

/* Variants for different numbers of cards */
.cards-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ── Card ───────────────────────────────────────────────────── */

.card {
  background: #fff;
  border: 0.5px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 0.9rem;
  min-height: 165px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

.card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 12px 12px 0 0;
}

.card-type {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.card-icon {
  font-size: 20px;
  line-height: 1;
  color: var(--text-tertiary);
}

.card-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.3;
  flex: 1;
}

.card-sub {
  font-size: 10px;
  font-weight: 300;
  color: var(--text-tertiary);
  line-height: 1.4;
}

/* Card colour themes — accent 1–5 */
.card-1 .card-accent, .card-trope .card-accent,
.card-wound .card-accent   { background: var(--accent-1); }
.card-1 .card-type, .card-trope .card-type,
.card-wound .card-type     { color: var(--accent-1); }

.card-2 .card-accent, .card-setting .card-accent,
.card-drive .card-accent   { background: var(--accent-2); }
.card-2 .card-type, .card-setting .card-type,
.card-drive .card-type     { color: var(--accent-2); }

.card-3 .card-accent, .card-conflict .card-accent,
.card-mask .card-accent    { background: var(--accent-3); }
.card-3 .card-type, .card-conflict .card-type,
.card-mask .card-type      { color: var(--accent-3); }

.card-4 .card-accent, .card-emotion .card-accent,
.card-shadow .card-accent  { background: var(--accent-4); }
.card-4 .card-type, .card-emotion .card-type,
.card-shadow .card-type    { color: var(--accent-4); }

.card-5 .card-accent, .card-quirk .card-accent  { background: var(--accent-5); }
.card-5 .card-type, .card-quirk .card-type      { color: var(--accent-5); }

/* Dark academia style — left border instead of top accent */
.card-dark {
  border-left: 2px solid var(--accent-1);
  border-radius: 8px;
  background: var(--bg-secondary);
}

/* ── Draw button ────────────────────────────────────────────── */

.btn-draw {
  display: block;
  width: 100%;
  padding: 1rem;
  background: #fff;
  border: 0.5px solid rgba(0,0,0,0.25);
  border-radius: 8px;
  font-family: 'Jost', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-bottom: 1rem;
}

.btn-draw:hover  { background: var(--bg-secondary); }
.btn-draw:active { transform: scale(0.98); }

/* ── Prompt / seed box ──────────────────────────────────────── */

.prompt-box {
  background: var(--bg-secondary);
  border: 0.5px solid var(--border);
  border-radius: 10px;
  padding: 1.2rem 1.4rem;
  display: none;
  margin-bottom: 0.75rem;
}

.prompt-label, .genre-wrap {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 0.6rem;
}

.prompt-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 17px;
  font-style: italic;
  color: var(--text-primary);
  line-height: 1.65;
}

/* ── Deck info / footer note ────────────────────────────────── */

.deck-info {
  text-align: center;
  font-size: 11px;
  color: var(--text-tertiary);
  letter-spacing: 0.06em;
  margin-top: 0.5rem;
}

.deck-info a {
  color: var(--text-tertiary);
  text-decoration: none;
  border-bottom: 0.5px solid var(--border);
}

.deck-info a:hover { color: var(--text-secondary); }

/* ── Card flip animation ────────────────────────────────────── */

.card.animating { animation: flip 0.35s ease; }

@keyframes flip {
  0%   { opacity: 1; transform: rotateY(0); }
  40%  { opacity: 0; transform: rotateY(90deg) translateY(-4px); }
  60%  { opacity: 0; transform: rotateY(-90deg) translateY(-4px); }
  100% { opacity: 1; transform: rotateY(0); }
}

/* Card emerge animation (used in dark academia style) */
.card.emerging { animation: emerge 0.4s ease; }

@keyframes emerge {
  0%   { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(6px); }
  65%  { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 600px) {
  .cards-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gen-title    { font-size: 26px; }
}

@media (max-width: 360px) {
  .cards-grid   { grid-template-columns: 1fr; }
}

/* ── SIGNUP FORM ─────────────────────────────────────────────── */ 
.signup-section {
  border-top: 0.5px solid var(--border, rgba(0,0,0,0.1));
  padding: 2.5rem 0 1rem;
  margin-top: 1rem;
}

.signup-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

.signup-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-tertiary, #A09D96);
  margin-bottom: 0.3rem;
}

.signup-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text-primary, #1C1B18);
  line-height: 1.2;
}

.signup-sub {
  font-size: 13px;
  font-weight: 300;
  color: var(--text-secondary, #6B6860);
  margin-top: 0.3rem;
}

.signup-form {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 420px;
}

.signup-input {
  flex: 1;
  padding: 0.75rem 1rem;
  border: 0.5px solid rgba(0,0,0,0.22);
  border-radius: 7px;
  background: #fff;
  font-family: 'Jost', sans-serif;
  font-size: 13px;
  color: var(--text-primary, #1C1B18);
  outline: none;
  transition: border-color 0.15s;
}

.signup-input:focus {
  border-color: rgba(0,0,0,0.4);
}

.signup-input::placeholder {
  color: var(--text-tertiary, #A09D96);
}

.signup-btn {
  padding: 0.75rem 1.25rem;
  background: var(--text-primary, #1C1B18);
  color: var(--bg, #FAFAF8);
  border: none;
  border-radius: 7px;
  font-family: 'Jost', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s, transform 0.1s;
}

.signup-btn:hover  { opacity: 0.85; }
.signup-btn:active { transform: scale(0.98); }

.signup-note {
  font-size: 11px;
  color: var(--text-tertiary, #A09D96);
  letter-spacing: 0.04em;
}

@media (max-width: 480px) {
  .signup-form {
    flex-direction: column;
  }
  .signup-btn {
    width: 100%;
    padding: 0.85rem;
  }
}

/* ── Kit form overrides ──────────────────────────────────── */
.formkit-form[data-uid="d5bfcb0b4c"] {
  max-width: 460px !important;
  margin: 0 auto !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] [data-style="clean"] {
  padding: 0 !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-fields {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  margin: 0 !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-field {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-input {
  width: 100% !important;
  padding: 0.75rem 1rem !important;
  border: 0.5px solid rgba(0,0,0,0.22) !important;
  border-radius: 7px !important;
  background: #fff !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
  color: #1C1B18 !important;
  outline: none !important;
  transition: border-color 0.15s !important;
  margin: 0 !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-input:focus {
  border-color: rgba(0,0,0,0.4) !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-input::placeholder {
  color: #A09D96 !important;
  opacity: 1 !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-submit {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #1C1B18 !important;
  border: none !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: opacity 0.15s, transform 0.1s !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-submit > span {
  display: block !important;
  padding: 0.75rem 1.25rem !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  color: #FAFAF8 !important;
  white-space: nowrap !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-submit:hover { opacity: 0.85 !important; }
.formkit-form[data-uid="d5bfcb0b4c"] .formkit-submit:active { transform: scale(0.98) !important; }

.formkit-powered-by-convertkit-container { display: none !important; }

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-alert-success {
  background: #EAF3DE !important;
  border-color: #4A6741 !important;
  color: #3B6D11 !important;
  border-radius: 7px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
}

.formkit-form[data-uid="d5bfcb0b4c"] .formkit-alert-error {
  background: #FAECE7 !important;
  border-color: #7B5E3A !important;
  color: #6B3A2A !important;
  border-radius: 7px !important;
  font-family: 'Jost', sans-serif !important;
  font-size: 13px !important;
}

@media (max-width: 480px) {
  .formkit-form[data-uid="d5bfcb0b4c"] .formkit-fields {
    flex-direction: column !important;
  }
}