/* Nepali fingerspelling demo — reuses the ampixa 8-bit palette from ../style.css.
   Only the pieces that do not exist in style.css live here. */

.fs-wrap { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: start; }

.fs-stage { position: relative; border: 2px solid var(--ink); background: #000; aspect-ratio: 4 / 3; overflow: hidden; }
.fs-stage video,
.fs-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fs-stage video { object-fit: cover; transform: scaleX(-1); }
.fs-stage canvas { transform: scaleX(-1); }
.fs-stage .fs-placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 16px; color: #ddd; font-size: 14px; line-height: 1.5;
}

.fs-top { list-style: none; margin: 0 0 12px; padding: 0; }
.fs-top li { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.fs-top .fs-dev { font-size: 30px; line-height: 1.1; min-width: 54px; font-family: system-ui, 'Noto Sans Devanagari', sans-serif; }
.fs-top .fs-rom { min-width: 62px; color: var(--muted2); font-size: 14px; }
.fs-top .fs-bar { flex: 1 1 auto; height: 12px; border: 2px solid var(--ink); background: var(--bg); }
.fs-top .fs-bar i { display: block; height: 100%; background: var(--accent); width: 0; }
.fs-top .fs-pct { min-width: 48px; text-align: right; color: var(--muted2); font-size: 13px; }
.fs-top li.fs-dim .fs-dev { color: var(--faint); }
.fs-top li.fs-dim .fs-bar i { background: var(--rule); }

.fs-hold { height: 8px; border: 2px solid var(--ink); background: var(--bg); margin-bottom: 10px; }
.fs-hold i { display: block; height: 100%; width: 0; background: var(--ok); }

.fs-spelled { font-size: 30px; line-height: 1.5; min-height: 58px; font-family: system-ui, 'Noto Sans Devanagari', sans-serif; }
.fs-spelled:empty::before { content: attr(data-empty); color: var(--faint); font-size: 15px; font-family: inherit; }

.fs-note { font-size: 13px; color: var(--faint); margin-top: 10px; }
.fs-err { margin-top: 12px; }

@media (max-width: 860px) {
  .fs-wrap { grid-template-columns: minmax(0, 1fr); }
}