* { box-sizing: border-box; }
body {
  margin: 0; padding: 20px; background: #EAFDFC; font-family: Arial, sans-serif;
}
.container { max-width: 980px; margin: 0 auto; }
h1 { text-align: center; color: #0b6b6b; }
.cards { display: flex; gap: 36px; justify-content: center; flex-wrap: wrap; margin: 32px 0; }
.card {
  background: #fff; border-radius: 14px; padding: 18px; width: 420px; box-shadow: 0 10px 30px rgba(10,10,10,0.08);
  display:flex; align-items:center; gap:18px; justify-content:flex-start; flex-direction: row;
}
.prefix { font-size: 32px; color:#0b6b6b; font-weight:800; min-width:80px; text-align:center }
.image { font-size: 72px; width: 96px; flex: 0 0 96px; text-align: center; overflow: hidden; }
.slot {
  min-width: 180px; height:60px; border:2px dashed #c0e9e7; margin-left:8px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: #f9fffe; font-weight:700; font-size:1.1rem;
}
.slot.filled { border-style: solid; }
.slot.correct { background: #d4f8d4; border-color: #4ecb4e; }
.slot.incorrect { background: #ffd6d6; border-color: #ff6b6b; }

.pool { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; padding: 18px; margin-top: 18px; }
.pool .syllable { background:#fffbe6; padding:14px 20px; border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,0.08); cursor:grab; font-weight:900; font-size:1.15rem; min-width:72px; text-align:center; }
.pool .syllable.hidden { opacity:0.25; visibility:hidden; }
.pool .syllable.hidden { opacity:0.25; visibility:hidden; }

.controls { display:flex; flex-direction:column; gap:10px; align-items:center; margin-top:18px; }
.controls-row { width:100%; max-width:520px; display:flex; align-items:center; justify-content:center; gap:14px; }
.controls-row .edge, .controls-row .check { flex: 0 0 auto; }
.controls a, .controls button { padding:12px 22px; border-radius:12px; border:none; cursor:pointer; font-weight:800; text-decoration:none; color:#fff; font-size:1rem; }
.controls-row .edge { background: #87CEEB; color: #fff; box-shadow: 0 8px 20px rgba(135,206,235,0.22); margin: 0 6px; }
.controls-row .edge:hover { transform: translateY(-3px); }
.controls-row .check { background: #4ECDC4; color: #013; box-shadow: 0 8px 20px rgba(78,205,196,0.22); margin: 0 6px; }
.controls-row .check:hover { transform: translateY(-3px); }
.bottom-home { display:inline-block; background:#FF6B6B; color:#fff; padding:12px 26px; border-radius:12px; box-shadow: 0 8px 20px rgba(255,107,107,0.22); }
.bottom-home:hover { transform: translateY(-3px); }

@media (max-width:720px) {
  .controls-row { gap:12px; }
  .controls a, .controls button { padding:12px 18px; font-size:0.95rem; }
  .bottom-home { padding:10px 20px; }
}

@media (max-width: 720px) {
  .card { width: 100%; }
  .image { font-size:48px; }
  .prefix { font-size:22px }
}