:root{
  --bg: #F4F7F8;
  --card: #FFFFFF;
  --muted: #6B6B6B;
  --navy: #052A4A;
  --teal: #00B4C7;
  --coral: #FF6F61;
  --sun: #FFD66B;
  --violet: #6B5CFF;
  --shadow: 0 10px 26px rgba(10,20,30,0.08);
  --radius: 16px;
  --gap: 14px;
  font-family: "Baloo 2", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--navy)}
.container{max-width:980px;margin:0 auto;padding:16px}

/* Header */
.site-header{padding:12px 0 4px}
.header-inner{display:flex;align-items:center;justify-content:flex-start;gap:12px}
.brand-wrap{display:flex;align-items:center;gap:12px}
.logo-badge{width:56px;height:56px;border-radius:12px;background:linear-gradient(180deg,var(--teal),#00a3ad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px;box-shadow:var(--shadow)}
.brand{margin:0;font-size:20px;line-height:1;color:var(--navy)}
.subtitle{font-size:12px;color:var(--muted);margin-top:4px}
.nav-links{margin-left:auto;display:flex;gap:8px}
.nav-link{display:inline-block;padding:8px 16px;background:var(--violet);color:#fff;text-decoration:none;border-radius:8px;font-size:14px;font-weight:600;transition:transform .2s ease,background .2s ease}
.nav-link:hover{background:#5a4ce6;transform:translateY(-1px)}
.nav-link:active{transform:translateY(0)}

/* Controls */
.controls-row{margin-top:10px;text-align:center}
#search{width:100%;max-width:520px;padding:10px 12px;border-radius:12px;border:1px solid #e9f0ef;background:#fff}

/* Grid & cards */
.letters-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:14px;padding-bottom:12px}
.letter-card{background:var(--card);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:stretch;min-height:150px;transition:transform .12s ease;position:relative;overflow:visible}
.letter-card:active{transform:translateY(2px)}
.letter-card::before{
  content: attr(data-letter);
  position:absolute;
  right:10px;
  top:8px;
  font-size:96px;
  font-weight:900;
  color:rgba(107,92,255,0.06);
  z-index:0;
  pointer-events:none;
  line-height:1;
  transform:translateY(-6px);
}
.card-inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px}
.card-top{display:flex;align-items:center;gap:12px}
.letter-art{display:flex;align-items:center;gap:12px;min-width:78px}
.letter-image{width:78px;height:78px;border-radius:14px;object-fit:cover;border:2px solid rgba(0,0,0,0.03);box-shadow:0 8px 20px rgba(0,0,0,0.06)}
.letter-char{font-size:44px;font-weight:800;color:var(--violet);width:64px;text-align:center;display:flex;align-items:center;justify-content:center}
.example{margin-top:10px;color:var(--navy);font-size:15px;text-transform:capitalize}

/* Play button */
.play-wrap{margin-left:auto;display:flex;flex-direction:column;align-items:center;gap:8px}
.play-btn{width:64px;height:64px;border-radius:50%;border:none;background:linear-gradient(180deg,var(--coral),#ff4d47);color:#fff;font-size:22px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 26px rgba(107,92,255,0.12);transition:transform .14s ease}
.play-btn.playing{animation:play-pulse 1200ms infinite}
@keyframes play-pulse{0%{box-shadow:0 8px 20px rgba(255,111,97,0.3)}50%{box-shadow:0 14px 30px rgba(255,111,97,0.4);transform:scale(1.04)}100%{box-shadow:0 8px 20px rgba(255,111,97,0.3);transform:scale(1)}}
.btn-label{font-size:12px;color:var(--muted);min-height:16px;text-align:center}

/* decorative corner star */
.letter-card .corner-star{
  position:absolute; left:8px; top:6px; width:18px; height:18px; opacity:0.9; z-index:0;
  background: radial-gradient(circle at 30% 25%, #ffd66b 0%, #ffb84d 60%);
  border-radius:50%;
  box-shadow:0 4px 10px rgba(0,0,0,0.06);
  transform:rotate(12deg);
}

/* footer */
.site-footer{padding:14px 0;text-align:center;color:var(--muted);font-size:13px;margin-top:14px}

/* accessibility focus */
.letter-card:focus-within{outline:4px solid rgba(107,92,255,0.12);transform:translateY(-2px)}
.play-btn:focus{outline:4px solid rgba(0,180,199,0.12)}
@media (max-width:520px){
  .letter-image{width:60px;height:60px}
  .letter-char{font-size:36px}
  .play-btn{width:56px;height:56px;font-size:20px}
  .letter-card::before{font-size:64px; right:6px; top:4px}
  .nav-link{font-size:12px;padding:6px 12px}
  .header-inner{flex-wrap:wrap}
}