/* ==========================================================================
   CloudGraft v3.2.11 — Shared Design Token & Transition System
   Served at shared/css/cloudgraft.css across Player Portal & Admin Studio.
   Centralizes obsidian dark-mode custom properties, glassmorphic surfaces,
   GPU-composited Vue 3 transitions, reduced-motion rules, and syntax pills.
   ========================================================================== */

/* Core Obsidian Palette, Typography, Elevation & Motion Custom Properties */
:root {
  --bg-obsidian: #070a12;
  --bg-card: rgba(15, 23, 42, 0.78);
  --accent-cyan: #22d3ee;
  --accent-purple: #a855f7;
  --accent-emerald: #10b981;
  --accent-amber: #f59e0b;
  --accent-rose: #f43f5e;

  --cg-bg-obsidian: #070a12;
  --cg-bg-card: rgba(15, 23, 42, 0.78);
  --cg-bg-elevated: rgba(30, 41, 59, 0.65);
  --cg-border-subtle: rgba(148, 163, 184, 0.14);
  --cg-accent-cyan: #22d3ee;
  --cg-accent-purple: #a855f7;
  --cg-accent-emerald: #10b981;
  --cg-accent-amber: #f59e0b;
  --cg-accent-rose: #f43f5e;
  --cg-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --cg-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --cg-radius-card: 1rem;
  --cg-radius-modal: 1rem;
  --cg-shadow-card: 0 20px 50px rgba(0, 0, 0, 0.45);
  --cg-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Shared Glassmorphism Surfaces */
.glass-panel {
  background: var(--cg-bg-card);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--cg-border-subtle);
}

.glass-card {
  background: rgba(30, 41, 59, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(148, 163, 184, 0.12);
  transition: all 0.22s var(--cg-ease-out);
}

/* Missing Utility Shims for cg-tailwind.min.css */
@keyframes cg-spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: cg-spin 1s linear infinite;
}

.z-\[60\] {
  z-index: 60;
}

.max-w-sm {
  max-width: 24rem;
}

.backdrop-blur-md {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.bg-slate-950\/70 {
  background-color: rgba(2, 6, 23, 0.7);
}

/* Shared Indeterminate Loading Splash Progress Bar */
@keyframes cg-indeterminate {
  0% {
    transform: translateX(-100%) scaleX(0.35);
  }
  50% {
    transform: translateX(15%) scaleX(0.65);
  }
  100% {
    transform: translateX(120%) scaleX(0.35);
  }
}

.cg-splash-progress-bar {
  transform-origin: left center;
  animation: cg-indeterminate 1.45s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Shared Vue 3 <Transition> Keyframes (60fps GPU-composited) */
.cg-page-enter-active,
.cg-page-leave-active {
  transition: opacity 180ms var(--cg-ease-out), transform 180ms var(--cg-ease-out);
  will-change: opacity, transform;
}

.cg-page-enter-from {
  opacity: 0;
  transform: translateY(6px) scale(0.995);
}

.cg-page-leave-to {
  opacity: 0;
  transform: translateY(-4px) scale(0.998);
}

.cg-splash-enter-active {
  transition: opacity 150ms ease-out;
}

.cg-splash-leave-active {
  transition: opacity 240ms cubic-bezier(0.4, 0, 0.2, 1), transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

.cg-splash-enter-from,
.cg-splash-leave-to {
  opacity: 0;
  transform: scale(1.015);
}

.cg-modal-enter-active,
.cg-modal-leave-active {
  transition: opacity 160ms ease-out, transform 160ms var(--cg-ease-out);
}

.cg-modal-enter-from,
.cg-modal-leave-to {
  opacity: 0;
  transform: scale(0.97) translateY(4px);
}

.cg-fade-enter-active,
.cg-fade-leave-active {
  transition: opacity 160ms ease-out;
}

.cg-fade-enter-from,
.cg-fade-leave-to {
  opacity: 0;
}

/* Keyboard Shortcut Keycap Micro-Badges & Streak Glow */
.kbd-keycap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.08rem 0.38rem;
  font-family: var(--cg-font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 1.2;
  color: #cbd5e1;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-bottom-width: 2px;
  border-radius: 0.35rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.streak-combo-glow {
  box-shadow: 0 0 18px rgba(245, 158, 11, 0.28), inset 0 0 10px rgba(245, 158, 11, 0.14);
}

/* Accessibility: Collapse transform motion and slow progress shimmer when requested */
@media (prefers-reduced-motion: reduce) {
  .cg-page-enter-active,
  .cg-page-leave-active,
  .cg-splash-enter-active,
  .cg-splash-leave-active,
  .cg-modal-enter-active,
  .cg-modal-leave-active,
  .cg-fade-enter-active,
  .cg-fade-leave-active {
    transition: opacity 80ms linear !important;
    transform: none !important;
  }

  .cg-splash-progress-bar {
    animation-duration: 3s !important;
  }
}

/* Shared Component Utility Classes (v3.2.11) */
.w-1\/2 { width: 50%; }
.via-sky-400 { --t15: #38bdf800 var(--t9); --t13: var(--t14), #38bdf8 var(--t8), var(--t15); }
.to-emerald-400 { --t15: #34d399 var(--t9); }
.border-emerald-400\/40 { border-color: rgba(52, 211, 153, 0.4); }
.object-contain { object-fit: contain; }
.mb-4 { margin-bottom: 1rem; }
.text-\[10px\] { font-size: 10px; }

/* Proportional inline syntax pills matching parent question and option font size */
.cg-syntax-pill {
  display: inline;
  font-family: var(--cg-font-mono);
  font-size: 0.9em;
  font-weight: 600;
  line-height: inherit;
  padding: 0.08em 0.4em;
  border-radius: 0.35rem;
  vertical-align: baseline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}