/* ============================================================
   SignTeach — Aurora UI Design System
   Mobile-first, dark theme, 8pt grid
   ============================================================ */

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  /* Colors */
  --bg-base:        #0A0A12;
  --bg-surface:     #11111D;
  --bg-elevated:    #17172A;
  --bg-glass:       rgba(255,255,255,0.04);
  --bg-glass-hover: rgba(255,255,255,0.07);

  --border:         rgba(255,255,255,0.08);
  --border-hover:   rgba(255,255,255,0.16);

  --accent:         #7C6FF7;   /* violet */
  --accent-glow:    rgba(124,111,247,0.35);
  --accent-dim:     rgba(124,111,247,0.15);
  --teal:           #2DD4BF;
  --teal-glow:      rgba(45,212,191,0.30);
  --rose:           #F472B6;

  --success:        #34D399;
  --success-glow:   rgba(52,211,153,0.30);
  --warning:        #FBBF24;
  --error:          #F87171;
  --error-glow:     rgba(248,113,113,0.30);

  --text-1:  #F4F4F9;
  --text-2:  #9392A6;
  --text-3:  #5E5D72;

  /* Typography */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Spacing (8pt grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Radii */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px; --r-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.7);

  /* Animation */
  --ease-out:  cubic-bezier(0.16,1,0.3,1);
  --ease-in:   cubic-bezier(0.7,0,0.84,0);
  --spring:    cubic-bezier(0.34,1.56,0.64,1);
  --dur-fast:  150ms;
  --dur-mid:   280ms;
  --dur-slow:  500ms;
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  min-height: 100%;
  font-family: var(--font-body);
  font-size: clamp(14px,2vw,16px);
  background: var(--bg-base);
  color: var(--text-1);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, canvas { display: block; max-width: 100%; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Aurora background ────────────────────────────────────── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 0%, rgba(124,111,247,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 10%, rgba(45,212,191,0.07) 0%, transparent 50%),
    radial-gradient(ellipse 50% 60% at 50% 100%, rgba(244,114,182,0.05) 0%, transparent 60%);
}

/* ── Screens ──────────────────────────────────────────────── */
.screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; }
.screen.hidden { display: none; }

/* Loading */
.loading-body {
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  padding: var(--s8); text-align: center; max-width: 340px;
}
.logo-glyph { font-size: 56px; line-height: 1; filter: drop-shadow(0 0 24px rgba(124,111,247,0.6)); }
.loading-title { font-family: var(--font-display); font-size: clamp(28px,6vw,36px); font-weight: 700; letter-spacing: -0.02em; }
.loading-sub { color: var(--text-2); font-size: 14px; }
.loading-track {
  width: 240px; height: 4px; background: var(--bg-elevated); border-radius: var(--r-full);
  overflow: hidden; margin-top: var(--s2);
}
.loading-fill {
  height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--teal));
  border-radius: var(--r-full); transition: width 0.4s var(--ease-out);
}
.loading-status { font-size: 13px; color: var(--text-3); }

/* Error */
.error-body {
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  padding: var(--s8) var(--s6); text-align: center; max-width: 360px;
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-xl);
}
.error-icon { font-size: 40px; }
.error-body h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; }
.error-body p { color: var(--text-2); font-size: 14px; line-height: 1.6; }
.error-note { font-size: 12px !important; color: var(--text-3) !important; }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--s3) var(--s6); border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--accent), #5B50E8);
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 14px;
  box-shadow: 0 0 24px var(--accent-glow); transition: transform var(--dur-fast), box-shadow var(--dur-fast);
  letter-spacing: 0.01em;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 32px var(--accent-glow); }
.btn-primary:active { transform: translateY(0); }

/* ── App layout ───────────────────────────────────────────── */
#screen-app {
  position: fixed; inset: 0; display: flex; flex-direction: column;
  overflow: hidden; /* prevent scroll on desktop */
}

/* Header */
.app-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s5); flex-shrink: 0;
  background: rgba(10,10,18,0.8); backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  position: relative; z-index: 2;
}
.header-brand { display: flex; align-items: center; gap: var(--s2); }
.header-glyph { font-size: 22px; }
.header-name { font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: -0.01em; }
.header-stats { display: flex; gap: var(--s2); }
.stat-chip {
  display: flex; align-items: center; gap: var(--s1);
  padding: var(--s1) var(--s3); border-radius: var(--r-full);
  background: var(--bg-glass); border: 1px solid var(--border);
  font-size: 12px; font-weight: 500; color: var(--text-2);
  transition: color var(--dur-fast);
}
#chip-streak svg { color: var(--warning); }
#chip-progress svg { color: var(--success); }

/* Main */
.app-main {
  display: flex; flex: 1; overflow: hidden;
  gap: 0;
}

/* ── Panels ───────────────────────────────────────────────── */
.panel {
  display: flex; flex-direction: column;
  padding: var(--s4); gap: var(--s4);
  overflow-y: auto; overflow-x: hidden;
  /* Custom scrollbar */
  scrollbar-width: thin; scrollbar-color: var(--bg-elevated) transparent;
}
.panel::-webkit-scrollbar { width: 4px; }
.panel::-webkit-scrollbar-thumb { background: var(--bg-elevated); border-radius: 2px; }

.panel-label {
  font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-3);
}

/* Desktop: side by side */
@media (min-width: 768px) {
  .panel-camera { flex: 0 0 42%; border-right: 1px solid var(--border); }
  .panel-ref    { flex: 1; }
}

/* Mobile: stacked, equal */
@media (max-width: 767px) {
  .app-main { flex-direction: column; }
  .panel { padding: var(--s3); gap: var(--s3); flex: 1; }
  .panel-camera { flex: 0 0 auto; }
  .panel-ref    { flex: 1; min-height: 0; }
}

/* ── Camera section ───────────────────────────────────────── */
.camera-wrap {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border);
  aspect-ratio: 4/3;
  box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
@media (max-width: 767px) {
  .camera-wrap { aspect-ratio: 16/9; }
}

#cam-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
#cam-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.cam-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(10,10,18,0.6); backdrop-filter: blur(4px);
  transition: opacity var(--dur-mid);
}
.cam-hint.hidden { opacity: 0; pointer-events: none; }
.cam-hint-inner {
  display: flex; flex-direction: column; align-items: center; gap: var(--s2);
  color: var(--text-2); font-size: 14px;
}
.cam-hint-inner span:first-child { font-size: 32px; animation: wave 1.8s ease-in-out infinite; }
@keyframes wave {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(20deg); }
  75%      { transform: rotate(-10deg); }
}

.quality-dot {
  position: absolute; top: var(--s2); right: var(--s2);
  width: 8px; height: 8px; border-radius: var(--r-full);
  background: var(--text-3); transition: background var(--dur-mid);
}
.quality-dot.good    { background: var(--success); box-shadow: 0 0 8px var(--success-glow); }
.quality-dot.medium  { background: var(--warning); }
.quality-dot.bad     { background: var(--error); }

/* Score */
.score-section { display: flex; flex-direction: column; gap: var(--s2); }
.score-row { display: flex; justify-content: space-between; align-items: center; }
.score-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.score-pct { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--text-2); transition: color var(--dur-mid); }
.score-pct.good { color: var(--success); }
.score-pct.close { color: var(--warning); }

.score-track {
  height: 8px; background: var(--bg-elevated); border-radius: var(--r-full);
  overflow: visible; position: relative;
}
.score-fill {
  height: 100%; width: 0%; border-radius: var(--r-full);
  background: linear-gradient(90deg, var(--accent), var(--teal));
  transition: width 0.12s linear;
  position: relative;
}
.score-fill::after {
  content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 8px rgba(255,255,255,0.5);
}
/* Threshold marker at 80% */
.score-threshold {
  position: absolute; left: 80%; top: -4px; bottom: -4px;
  width: 2px; background: rgba(255,255,255,0.15); border-radius: 1px;
}

.hold-row {
  display: flex; align-items: center; gap: var(--s2);
  color: var(--accent); font-size: 13px; font-weight: 500;
}
.hold-row.hidden { display: none; }
.hold-ring {
  width: 28px; height: 28px; flex-shrink: 0;
}
.hold-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hold-svg circle { stroke: rgba(124,111,247,0.2); }
.hold-arc {
  stroke: var(--accent);
  stroke-dasharray: 100 100;
  stroke-dashoffset: 100;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}

/* Feedback */
.feedback-section { min-height: 60px; }
.finger-grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s1);
  margin-bottom: var(--s2);
}
.finger-chip {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: var(--s1) 2px;
  background: var(--bg-glass); border: 1px solid var(--border); border-radius: var(--r-sm);
  font-size: 10px; color: var(--text-3); transition: all var(--dur-fast);
}
.finger-chip .chip-icon { font-size: 14px; line-height: 1; }
.finger-chip.correct { border-color: rgba(52,211,153,0.4); background: rgba(52,211,153,0.07); color: var(--success); }
.finger-chip.wrong   { border-color: rgba(248,113,113,0.4); background: rgba(248,113,113,0.07); color: var(--error); }
.finger-chip.neutral { opacity: 0.4; }

.feedback-msg {
  font-size: 13px; color: var(--text-2); line-height: 1.5; min-height: 1.5em;
  transition: color var(--dur-mid);
}
.feedback-msg.good { color: var(--success); }

/* ── Reference section ────────────────────────────────────── */
.ref-header {
  display: flex; align-items: center; justify-content: space-between;
}
.target-letter {
  font-family: var(--font-display); font-size: clamp(36px,8vw,52px); font-weight: 700;
  background: linear-gradient(135deg, #fff 0%, var(--accent) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  letter-spacing: -0.03em; line-height: 1;
}

.ref-wrap {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-surface); border: 1px solid var(--border);
  aspect-ratio: 1/1;
  box-shadow: inset 0 0 60px rgba(124,111,247,0.05);
}
@media (max-width: 767px) {
  .ref-wrap { aspect-ratio: 16/9; }
}
#ref-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.success-flash {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--s2);
  background: rgba(52,211,153,0.12); backdrop-filter: blur(6px);
}
.success-flash.hidden { display: none; }
.success-icon { font-size: 48px; animation: pop 0.4s var(--spring); }
.success-text { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--success); }
@keyframes pop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hint-box {
  display: flex; align-items: flex-start; gap: var(--s2);
  padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--bg-glass); border: 1px solid var(--border);
}
.hint-icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.hint-text { font-size: 13px; line-height: 1.6; color: var(--text-2); }

/* ── Lessons ──────────────────────────────────────────────── */
.lessons-wrap { display: flex; flex-direction: column; gap: var(--s3); flex: 1; min-height: 0; }
.lessons-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.lessons-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; }
.lessons-count { font-size: 12px; color: var(--text-3); }

.letter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: var(--s1); overflow-y: auto; padding-bottom: var(--s2);
  scrollbar-width: thin; scrollbar-color: var(--bg-elevated) transparent;
}
.letter-grid::-webkit-scrollbar { width: 4px; }
.letter-grid::-webkit-scrollbar-thumb { background: var(--bg-elevated); }

.letter-btn {
  aspect-ratio: 1/1; border-radius: var(--r-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; position: relative;
  background: var(--bg-glass); border: 1px solid var(--border);
  font-family: var(--font-display); font-weight: 600; font-size: 16px;
  transition: all var(--dur-fast); cursor: pointer; color: var(--text-1);
  user-select: none;
}
.letter-btn:hover { background: var(--bg-glass-hover); border-color: var(--border-hover); transform: translateY(-1px); }
.letter-btn.active {
  background: var(--accent-dim); border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
  color: #fff;
}
.letter-btn.mastered {
  background: rgba(52,211,153,0.08); border-color: rgba(52,211,153,0.35);
  color: var(--success);
}
.letter-btn.mastered::after {
  content: '✓'; position: absolute; top: 2px; right: 4px;
  font-size: 9px; color: var(--success); font-weight: 700;
}
.letter-btn.motion {
  opacity: 0.5;
}
.letter-btn.motion::after {
  content: '↗'; position: absolute; top: 2px; right: 4px;
  font-size: 9px; color: var(--text-3);
}
.letter-btn-sub {
  font-size: 8px; font-weight: 400; color: var(--text-3); font-family: var(--font-body);
  letter-spacing: 0.02em;
}

/* ── Responsive tweaks ────────────────────────────────────── */
@media (max-width: 767px) {
  .app-header { padding: var(--s2) var(--s4); }
  .header-name { font-size: 16px; }
  .app-main { gap: 0; }

  /* On small phones: collapse reference to minimal */
  .ref-header { margin-bottom: -var(--s2); }
  .target-letter { font-size: 32px; }

  /* Tighter grid */
  .letter-grid { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
  .letter-btn { font-size: 14px; }
}

@media (max-width: 380px) {
  .panel { padding: var(--s2); gap: var(--s2); }
  .letter-grid { grid-template-columns: repeat(auto-fill, minmax(30px, 1fr)); }
  .letter-btn { font-size: 12px; border-radius: 6px; }
}

/* ── Landscape phone ──────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .app-main { flex-direction: row; }
  .panel-camera { flex: 0 0 45%; }
  .panel-ref { flex: 1; }
  .camera-wrap { aspect-ratio: 16/9; }
  .ref-wrap { aspect-ratio: 4/3; }
  .lessons-wrap { display: none; }
}

/* ── Finger Guide ─────────────────────────────────────────── */
.fguide {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s1);
}

.fguide-chip {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: var(--s2) 4px;
  border-radius: var(--r-md); border: 1px solid var(--border);
  background: var(--bg-glass);
  transition: border-color var(--dur-fast), background var(--dur-fast);
  position: relative; overflow: hidden;
}
.fguide-chip.correct {
  border-color: rgba(52,211,153,0.50);
  background: rgba(52,211,153,0.05);
}
.fguide-chip.wrong {
  border-color: rgba(248,113,113,0.50);
  background: rgba(248,113,113,0.06);
}
.fguide-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.fguide-name {
  font-size: 9px; font-weight: 700; letter-spacing: 0.10em;
  text-transform: uppercase; color: var(--text-3);
}
.fguide-state {
  font-size: 11px; font-weight: 600; color: var(--text-2);
  text-align: center; line-height: 1.2;
  transition: color var(--dur-fast);
}
.fguide-chip.correct .fguide-state { color: var(--success); }
.fguide-chip.wrong   .fguide-state { color: var(--error); }
.fguide-chip.correct .fguide-name  { color: var(--success); }

/* ── Utility ──────────────────────────────────────────────── */
.hidden { display: none !important; }

/* Focus ring for keyboard nav */
:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}