/* ============================================================
   Play & Improve — components.css
   Reusable .ui-* component layer + shared animations.
   ------------------------------------------------------------
   This is an ADDITIVE namespace: every selector is a new class
   not used by existing markup, so linking this file never alters
   current pages. Opt in element-by-element as pages are refined.
   Depends on tokens from theme.css.
   ============================================================ */

/* ---------- Layout shell ---------- */
.ui-shell {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: clamp(16px, 4vw, 40px);
}
.ui-grid {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}
.ui-divider {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--border-gold), transparent);
  margin-block: clamp(20px, 4vw, 40px);
}

/* ---------- Header / brand ---------- */
.ui-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-block: 14px;
}
.ui-brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ui-brand-emblem {
  width: 46px; height: 46px; flex: 0 0 46px;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background: linear-gradient(150deg, var(--brand-navy-soft), var(--brand-ink));
  border: 1px solid var(--border-gold);
  color: var(--brand-gold-light);
  font-family: var(--font-display);
  font-size: 1.35rem; font-weight: 700;
}
.ui-brand-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  font-weight: 600; letter-spacing: .3px; line-height: 1.05;
  color: var(--text-on-dark);
  margin: 0;
}
.ui-brand-subtitle {
  font-family: var(--font-body);
  font-size: .72rem; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--brand-gold); margin: 2px 0 0;
}

/* ---------- Cards & panels ---------- */
.ui-card {
  position: relative;
  background: var(--surface-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: clamp(16px, 2.4vw, 26px);
  transition: transform var(--duration-normal) var(--ease-premium),
              box-shadow var(--duration-normal) var(--ease-premium),
              border-color var(--duration-normal) var(--ease-premium);
}
.ui-card::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background-image: var(--skin-card-frame);
  background-size: 100% 100%; background-repeat: no-repeat;
}
.ui-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card);
  border-color: var(--border-gold);
}
.ui-card-premium {
  background:
    linear-gradient(150deg, var(--surface-dark-soft), var(--brand-ink));
  border: 1px solid var(--border-gold);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-cinematic);
}
.ui-panel {
  background: var(--surface-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(18px, 3vw, 32px);
}
.ui-panel-dark {
  background: linear-gradient(150deg, var(--surface-dark-soft), var(--surface-dark));
  border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-lg);
  color: var(--text-on-dark);
  box-shadow: var(--shadow-cinematic);
  padding: clamp(18px, 3vw, 32px);
}

/* ---------- Buttons ---------- */
.ui-button {
  --_bg: var(--surface-panel);
  --_fg: var(--text-main);
  --_bd: var(--border-soft);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: .92rem;
  letter-spacing: .2px;
  padding: 12px 22px; min-height: 44px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  cursor: pointer; text-decoration: none;
  transition: transform var(--duration-fast) var(--ease-snap),
              box-shadow var(--duration-normal) var(--ease-premium),
              filter var(--duration-fast) var(--ease-premium);
}
.ui-button:hover { transform: translateY(-2px); filter: brightness(1.03); }
.ui-button:active { transform: translateY(0) scale(.98); }
.ui-button-primary {
  --_bg: linear-gradient(135deg, var(--brand-navy-panel), var(--brand-navy-soft));
  --_fg: var(--text-on-dark); --_bd: transparent;
}
.ui-button-primary:hover { box-shadow: var(--glow-sky); }
.ui-button-gold {
  --_bg: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold));
  --_fg: var(--brand-ink); --_bd: transparent;
  font-weight: 700;
}
.ui-button-gold:hover { box-shadow: var(--glow-gold); }
.ui-button-secondary {
  --_bg: transparent; --_fg: var(--brand-navy-soft);
  --_bd: var(--border-gold-strong);
}
.ui-button-ghost {
  --_bg: transparent; --_fg: var(--text-on-dark-soft);
  --_bd: var(--border-on-dark-hi);
}

/* ---------- Chips ---------- */
.ui-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-body); font-weight: 600;
  font-size: .72rem; letter-spacing: .6px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-soft); background: var(--surface-panel);
  color: var(--text-soft);
}
.ui-chip-gold { border-color: var(--border-gold); background: var(--brand-gold-pale); color: var(--brand-gold-deep); }
.ui-chip-teal { border-color: rgba(42,157,143,.3); background: rgba(42,157,143,.10); color: var(--brand-teal); }

/* ---------- Hero ---------- */
.ui-hero { padding-block: clamp(36px, 7vw, 72px); }
.ui-hero-dark {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 140% at 80% -10%, rgba(79,168,216,.14), transparent 55%),
    linear-gradient(160deg, var(--brand-navy-soft), var(--brand-ink) 70%);
  color: var(--text-on-dark);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 6vw, 64px);
}
.ui-hero-dark::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--skin-bg-main);
  background-size: cover; opacity: .5;
}

/* ---------- Section title ---------- */
.ui-section-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  font-weight: 600; color: var(--text-main); line-height: 1.1;
  margin: 0 0 4px;
}
.ui-section-title--dark { color: var(--text-on-dark); }
.ui-eyebrow {
  font-family: var(--font-body); font-weight: 600;
  font-size: .72rem; letter-spacing: 3px; text-transform: uppercase;
  color: var(--brand-gold);
}

/* ---------- Stat card ---------- */
.ui-stat-card {
  background: var(--surface-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: clamp(16px, 2.4vw, 24px);
}
.ui-stat-card__value {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1;
  color: var(--text-main);
}
.ui-stat-card__label {
  font-family: var(--font-body); font-size: .78rem;
  letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted);
  margin-top: 6px;
}

/* ---------- Progress ---------- */
.ui-progress {
  height: 10px; border-radius: var(--radius-pill);
  background: var(--border-soft); overflow: hidden;
}
.ui-progress__fill {
  height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-gold), var(--brand-gold-light));
  transform-origin: left center;
  animation: ui-progress-fill var(--duration-slow) var(--ease-premium) both;
}

/* ---------- Modal ---------- */
.ui-modal {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center;
  background: rgba(6,14,28,.62);
  padding: 20px;
  animation: ui-fade-in var(--duration-normal) var(--ease-premium) both;
}
.ui-modal__panel {
  width: min(560px, 100%);
  background: var(--surface-panel);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-cinematic);
  padding: clamp(22px, 4vw, 34px);
  animation: ui-pop-in var(--duration-normal) var(--ease-snap) both;
}

/* ---------- Toast ---------- */
.ui-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 1000;
  background: var(--surface-dark-soft); color: var(--text-on-dark);
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-pill);
  padding: 12px 22px; box-shadow: var(--shadow-cinematic);
  animation: ui-pop-in var(--duration-normal) var(--ease-snap) both;
}

/* ---------- Empty state ---------- */
.ui-empty-state {
  text-align: center; padding: clamp(28px, 6vw, 56px);
  color: var(--text-muted);
}
.ui-empty-state__title {
  font-family: var(--font-display); font-size: 1.4rem;
  color: var(--text-soft); margin: 10px 0 4px;
}

/* ---------- Glow utility ---------- */
.ui-glow { box-shadow: var(--glow-gold); }

/* ============================================================
   Shared animation keyframes + interaction helpers
   ============================================================ */
@keyframes ui-fade-in   { from { opacity: 0 } to { opacity: 1 } }
@keyframes ui-rise-in   { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes ui-pop-in    { 0% { opacity: 0; transform: scale(.92) } 100% { opacity: 1; transform: scale(1) } }
@keyframes ui-progress-fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }
@keyframes ui-pulse-correct {
  0% { transform: scale(1) } 40% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(42,157,143,.18) }
  100% { transform: scale(1); box-shadow: 0 0 0 0 transparent }
}
@keyframes ui-shake-wrong {
  0%,100% { transform: translateX(0) } 20% { transform: translateX(-7px) }
  40% { transform: translateX(6px) } 60% { transform: translateX(-4px) } 80% { transform: translateX(3px) }
}
@keyframes ui-sparkle { 0% { opacity: 0; transform: scale(.4) rotate(0) } 50% { opacity: 1 } 100% { opacity: 0; transform: scale(1.4) rotate(45deg) } }

.ui-anim-fade   { animation: ui-fade-in var(--duration-normal) var(--ease-premium) both; }
.ui-anim-rise   { animation: ui-rise-in var(--duration-normal) var(--ease-premium) both; }
.is-correct     { animation: ui-pulse-correct var(--duration-slow) var(--ease-premium); }
.is-wrong       { animation: ui-shake-wrong 420ms var(--ease-inout); }

/* Staggered entrance for card grids: add .ui-stagger to a parent */
.ui-stagger > * { animation: ui-rise-in var(--duration-normal) var(--ease-premium) both; }
.ui-stagger > *:nth-child(1) { animation-delay: .04s }
.ui-stagger > *:nth-child(2) { animation-delay: .08s }
.ui-stagger > *:nth-child(3) { animation-delay: .12s }
.ui-stagger > *:nth-child(4) { animation-delay: .16s }
.ui-stagger > *:nth-child(5) { animation-delay: .20s }
.ui-stagger > *:nth-child(6) { animation-delay: .24s }
.ui-stagger > *:nth-child(7) { animation-delay: .28s }
.ui-stagger > *:nth-child(8) { animation-delay: .32s }