/* ══════════════════════════════════════════
   COLORS
══════════════════════════════════════════ */
:root {
  --c-red:    #ed0a3f;
  --c-orange: #ff681f;
  --c-yellow: #fbe870;
  --c-green:  #3aa655;
  --c-blue:   #4997d0;
  --c-purple: #652dc1;

  --p-red:    #fad4dc;
  --p-orange: #fde0ce;
  --p-yellow: #fef8d0;
  --p-green:  #c8edce;
  --p-blue:   #c6e0f5;
  --p-purple: #ddd0f5;
  --p-pink:   #f8d4ec;

  --bg:    #FFFBF0;
  --ink:   #1C1917;
  --border: 3px solid var(--ink);
  --radius-sm: 4px;
  --radius-md: 8px;
}

/* ══════════════════════════════════════════
   BASE — notebook paper
══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Nunito', sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, #f0c0c0 1px, transparent 1px),
    repeating-linear-gradient(
      to bottom,
      transparent, transparent 31px,
      #c5d8f0 31px, #c5d8f0 32px
    );
  background-size: 72px 100%, 100% 32px;
  background-position: 72px 0, 0 0;
  padding: 88px 96px 200px;
  min-height: 100vh;
  cursor: none;
}

/* ══════════════════════════════════════════
   RUG BORDER
══════════════════════════════════════════ */
.rug-strip {
  position: fixed;
  z-index: 650; /* above practice overlay (600), below nav (700) */
  display: flex;
  overflow: hidden;
}
.rug-h { left:0; right:0; height:80px; flex-direction:row; }
.rug-v { top:0; bottom:0; width:80px; flex-direction:column; }
#rug-top    { top:0; }
#rug-bottom { bottom:0; }
#rug-left   { left:0; }
#rug-right  { right:0; }

.rug-tile {
  width:80px; height:80px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border: 3px solid var(--ink);
  font-family:'Fredoka One',cursive; font-size:26px;
  user-select:none;
}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.site-header {
  display:flex; align-items:center; gap:14px;
  padding:0 0 24px;
  border-bottom: var(--border);
  margin-bottom:36px;
}
.header-logo { display:flex; align-items:center; gap:10px; }
.logo-mark { font-size:20px; color:var(--c-orange); }
.logo-word { font-family:'Fredoka One',cursive; font-size:28px; color:var(--c-blue); }
.header-right { display:flex; align-items:center; gap:12px; margin-left:auto; }
.cam-dot { width:10px; height:10px; border-radius:50%; background:#ccc; flex-shrink:0; }
.cam-dot.ready { background:var(--c-green); animation:blink 2.4s infinite; }
.cam-dot.error { background:var(--c-red); }
#cam-label { font-size:13px; font-weight:700; color:#888; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.hand-btn, .dev-btn {
  font-family:'Nunito',sans-serif; font-size:13px; font-weight:800;
  padding:5px 14px;
  border: var(--border); border-radius: var(--radius-sm);
  background:white; cursor:pointer; color:var(--ink);
  display:flex; align-items:center; gap:6px;
}
.hand-btn:hover, .dev-btn:hover { background:var(--ink); color:white; }

/* ══════════════════════════════════════════
   SECTIONS
══════════════════════════════════════════ */
section { max-width:980px; margin:0 auto 48px; }

/* ══════════════════════════════════════════
   PHRASE OUTPUT
══════════════════════════════════════════ */
.phrase-output {
  text-align:center;
  border: var(--border); border-radius: var(--radius-md);
  background:white;
  padding:28px 24px; min-height:120px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin-bottom:28px; transition:border-color .25s;
}
.phrase-output.lit { border-color:var(--c-green); border-width:4px; }
.phrase-main {
  font-family:'Fredoka One',cursive;
  font-size:clamp(38px,7vw,68px);
  color:var(--c-blue); line-height:1;
}
.phrase-sub { font-size:14px; color:#888; margin-top:7px; font-weight:700; }

.mode-pill {
  display:flex; align-items:center; gap:8px; justify-content:center;
  margin-top:16px; font-size:13px; font-weight:700; color:#666;
}
.mode-dot { width:10px; height:10px; border-radius:50%; background:#ccc; transition:background .3s; }
.mode-dot.phrase { background:var(--c-orange); }
.mode-dot.nav    { background:var(--c-blue); }

/* ══════════════════════════════════════════
   GESTURE CAROUSEL — smaller cards
══════════════════════════════════════════ */
.carousel-wrap {
  overflow:hidden;
  border-top: var(--border); border-bottom: var(--border);
  mask-image: linear-gradient(to right,transparent 0%,black 7%,black 93%,transparent 100%);
  -webkit-mask-image: linear-gradient(to right,transparent 0%,black 7%,black 93%,transparent 100%);
}
.carousel-track {
  display:flex; gap:14px; padding:14px 0;
  width:max-content;
  animation:scroll-loop 26s linear infinite;
}
.carousel-wrap:hover .carousel-track { animation-play-state:paused; }
@keyframes scroll-loop { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

.gesture-card {
  width:140px; flex-shrink:0;
  border: var(--border); border-radius: var(--radius-sm);
  background:white; overflow:hidden;
  pointer-events:none; user-select:none;
}
.gesture-card.active-gesture { border-color:var(--c-green); border-width:4px; }
.gesture-img-wrap { width:100%; height:90px; border-bottom: var(--border); overflow:hidden; position:relative; }
.gesture-img-wrap img { width:100%; height:100%; object-fit:cover; display:block; }
.gesture-label { padding:8px 10px 6px; }
.gesture-name { font-family:'Fredoka One',cursive; font-size:16px; margin-bottom:3px; }
.gesture-dir  { font-size:10px; font-weight:700; color:#888; line-height:1.4; }

/* ══════════════════════════════════════════
   CAMERA ZONE — larger
══════════════════════════════════════════ */
.camera-zone {
  display:flex; flex-direction:column; align-items:center;
  margin:0 auto 32px; max-width:980px;
}
#camera-container {
  border: var(--border); border-radius: var(--radius-sm);
  background:#111;
  width:640px; height:480px;   /* larger camera */
  overflow:hidden;
}
#camera-container canvas {
  display:block !important; width:100% !important; height:100% !important;
}
.camera-hint { font-size:13px; font-weight:700; color:#aaa; margin-top:10px; }

/* ══════════════════════════════════════════
   SCROLL NUDGE
══════════════════════════════════════════ */
.scroll-nudge {
  text-align:center; padding:14px;
  font-size:14px; font-weight:800; color:#888;
  max-width:980px; margin:0 auto 28px;
}
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(7px)} }

/* ══════════════════════════════════════════
   LEARN — 5 per row collector cards
══════════════════════════════════════════ */
.learn-heading { font-family:'Fredoka One',cursive; font-size:42px; color:var(--c-blue); text-align:center; margin-bottom:6px; }
.learn-sub { text-align:center; font-size:14px; font-weight:700; color:#888; margin-bottom:28px; }

.card-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:14px;
}
@media(max-width:720px){.card-grid{grid-template-columns:repeat(3,1fr);}}

.collect-card {
  border: var(--border); border-radius: var(--radius-sm);
  background:white; overflow:hidden; cursor:pointer;
  aspect-ratio:2.5/3.5;
  display:flex; flex-direction:column;
  transition:transform .12s; position:relative;
}
.collect-card:hover, .collect-card.hovered { transform:translateY(-4px); }
.collect-card.selected {
  outline:5px solid var(--c-blue); outline-offset:2px;
  transform:translateY(-4px) scale(1.02);
}
.cc-image {
  flex:1; position:relative; border-bottom: var(--border);
  overflow:hidden; display:flex; align-items:center; justify-content:center;
}
.cc-placeholder {
  font-family:'Fredoka One',cursive; font-size:clamp(44px,5vw,68px);
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:1;
}
.cc-hover-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0; transition:opacity .2s; z-index:2;
}
.collect-card:hover .cc-hover-img, .collect-card.hovered .cc-hover-img { opacity:1; }
.cc-footer {
  padding:6px 10px; font-family:'Fredoka One',cursive; font-size:16px;
  display:flex; align-items:center; justify-content:space-between; min-height:34px;
}
.cc-letter { font-size:18px; }
.cc-word   { font-size:10px; font-weight:800; color:#888; text-transform:uppercase; letter-spacing:.06em; }

/* ══════════════════════════════════════════
   PRACTICE OVERLAY

   Rug z-index (650) is above this overlay (600)
══════════════════════════════════════════ */
.practice-overlay {
  position:fixed; inset:0;
  background-color: var(--bg);
  background-image:
    linear-gradient(to right,#f0c0c0 1px,transparent 1px),
    repeating-linear-gradient(to bottom,transparent,transparent 31px,#c5d8f0 31px,#c5d8f0 32px);
  background-size:72px 100%,100% 32px;
  background-position:72px 0,0 0;
  z-index:600;
  overflow-y:auto;
  /* Match body padding so rug strips are never covered */
  padding: 96px 100px 180px;
}
.practice-overlay.hidden { display:none; }

/* 3-column grid */
.practice-layout {
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:24px;
  max-width:960px;
  margin:0 auto;
  align-items:start;
}
@media(max-width:800px){ .practice-layout{ grid-template-columns:1fr 1fr; } }
@media(max-width:540px){ .practice-layout{ grid-template-columns:1fr; } }

/* Column 1 — live camera */
.prac-cam canvas {
  width:100%; border: var(--border); border-radius: var(--radius-sm);
  background:#111; display:block;
}

/* Confidence bar */
.match-bar-wrap {
  display:flex; align-items:center; gap:10px; margin-top:10px;
}
.match-track {
  flex:1; height:14px; border: var(--border); border-radius: var(--radius-sm);
  overflow:hidden; background:white;
}
.match-fill { height:100%; width:0%; background:var(--c-green); transition:width .1s; }
.match-pct { font-family:'Fredoka One',cursive; font-size:18px; min-width:48px; }

/* Buttons sit directly under the confidence bar */
.prac-actions {
  display:flex; gap:10px; margin-top:12px;
}
.btn-action {
  font-family:'Nunito',sans-serif; font-size:14px; font-weight:800;
  padding:10px 0; flex:1; text-align:center;
  border: var(--border); border-radius: var(--radius-sm);
  background:white; cursor:pointer; color:var(--ink);
}
.btn-action:hover { background:var(--ink); color:white; }

/* Column 2 — ALPHABET letter card image */
.prac-letter-card {
  width:100%; aspect-ratio:2.5/3.5;
  border: var(--border); border-radius: var(--radius-sm);
  overflow:hidden; background:#f5f5f0;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.prac-letter-card img { width:100%; height:100%; object-fit:cover; display:block; }
.prac-letter-placeholder {
  font-family:'Fredoka One',cursive; font-size:96px; color:#ddd;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}

/* Column 3 — PRACTICE hand format image */
.prac-hand-card {
  width:100%; aspect-ratio:2.5/3.5;
  border: var(--border); border-radius: var(--radius-sm);
  overflow:hidden; background:#f5f5f0;
  display:flex; align-items:center; justify-content:center; position:relative;
}
.prac-hand-card img { width:100%; height:100%; object-fit:cover; display:block; }
.prac-hand-placeholder {
  font-family:'Fredoka One',cursive; font-size:48px; color:#ccc;
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center; padding:16px;
}

/* Success flash */
.success-flash {
  position:absolute; inset:0; background:var(--c-green);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.success-flash.show { opacity:1; pointer-events:auto; animation:popIn .3s ease; }
@keyframes popIn { 0%{transform:scale(.92)} 60%{transform:scale(1.03)} 100%{transform:scale(1)} }
.sf-letter { font-family:'Fredoka One',cursive; font-size:150px; color:white; line-height:1; }
.sf-word   { font-family:'Fredoka One',cursive; font-size:40px; color:rgba(255,255,255,.92); }

/* ══════════════════════════════════════════
   VOWEL NAV BAR — always on top
══════════════════════════════════════════ */
.vowel-nav {
  position:fixed; bottom:96px; left:50%; transform:translateX(-50%);
  z-index:700;
  background:white; border: var(--border); border-radius:999px;
  padding:7px 22px 9px;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.vn-label { font-size:9px; font-weight:800; color:#aaa; letter-spacing:.09em; text-transform:uppercase; }
.vn-chips { display:flex; gap:8px; }
.vn-chip {
  position:relative; width:52px; height:52px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border-radius:50%;
}
.vn-chip.passive .chip-ring { display:none; }
.chip-letter { font-family:'Fredoka One',cursive; font-size:19px; position:relative; z-index:1; color:var(--ink); transition:color .15s; }
.chip-desc { font-size:8px; font-weight:800; color:#aaa; position:relative; z-index:1; line-height:1; }
.chip-ring { position:absolute; inset:0; width:100%; height:100%; }
.cr-bg { fill:none; stroke:#e5e5e5; stroke-width:3; }
.cr-fg {
  fill:none; stroke:var(--c-blue); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:113.1; stroke-dashoffset:113.1;
  transform:rotate(-90deg); transform-origin:center;
  transition:stroke-dashoffset .06s linear;
}
.vn-chip.charging .chip-letter { color:var(--c-blue); }
.vn-chip.active-passive .chip-letter { color:var(--c-green); }
.vn-chip.fired { animation:chipPop .35s ease; }
@keyframes chipPop { 0%,100%{background:transparent} 45%{background:#dbeafe;border-radius:50%} }

/* ══════════════════════════════════════════
   PEN CURSOR — 96px as set by user
══════════════════════════════════════════ */
.pen-cursor {
  position:fixed; top:0; left:0;
  width:96px; height:96px;
  pointer-events:none; z-index:9000;
  transform:translate(0,0);
  opacity:0; transition:opacity .15s;
}
.pen-cursor.visible { opacity:1; }
.pen-cursor img { width:100%; height:100%; object-fit:contain; display:block; }

/* ══════════════════════════════════════════
   DEV PANEL
══════════════════════════════════════════ */
.dev-panel {
  position:fixed; top:90px; left:90px; width:320px;
  background:#161622; color:#ddd;
  border:2px solid #333; border-radius:var(--radius-md);
  padding:14px; font-family:monospace; font-size:12px;
  z-index:9999; display:none;
}
.dev-head { color:#90caf9; font-weight:bold; display:flex; justify-content:space-between; margin-bottom:10px; }
.dev-head button { background:none; border:none; color:#90caf9; cursor:pointer; }
.dev-info { line-height:2; margin-bottom:10px; color:#ccc; }
.dev-capture { border-top:1px solid #333; padding-top:10px; }
.dev-capture p { font-size:11px; opacity:.65; margin:5px 0 9px; line-height:1.6; }
.dev-row { display:flex; gap:6px; margin-bottom:6px; }
.dev-row input { background:#2a2a3a; border:1px solid #444; color:white; padding:4px 8px; border-radius:4px; width:80px; font-size:12px; }
.dev-row button { background:var(--c-blue); border:none; color:white; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:11px; }
.dev-output { font-size:10px; opacity:.75; word-break:break-all; max-height:80px; overflow-y:auto; margin-top:4px; }

/* ══════════════════════════════════════════
   CONFETTI
══════════════════════════════════════════ */
#confetti { position:fixed; inset:0; pointer-events:none; z-index:999; overflow:hidden; }
.cp { position:absolute; top:-14px; border-radius:2px; animation:cffall linear forwards; }
@keyframes cffall { 0%{transform:translateY(0) rotate(0deg);opacity:1} 85%{opacity:1} 100%{transform:translateY(108vh) rotate(720deg);opacity:0} }