#board { background: linear-gradient(160deg, #e9f6ff, #fff3e6); padding: 28px 40px; display: flex; flex-direction: column; gap: 24px; }
.board-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.board-header h1 { margin: 0; font-size: 2.4rem; flex: 1; text-align: center; }
.board-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; overflow-y: auto;
  padding: 8px 4px 24px; align-content: start;
}
.board-card {
  position: relative; font: inherit; color: var(--ink); border: none; cursor: pointer;
  background: var(--card); border-radius: var(--radius); padding: 24px 20px 20px; min-height: 210px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  box-shadow: var(--shadow); transition: transform 0.12s;
}
.board-card:active { transform: translateY(4px) scale(0.98); }
.board-card.is-new { box-shadow: 0 0 0 4px var(--secondary), var(--shadow); }
.board-icon { width: 72px; height: 72px; object-fit: contain; }
.board-icon.is-emoji { font-size: 3.4rem; }
.board-title { font-size: 1.45rem; font-weight: 700; text-align: center; }
.board-card .stars { font-size: 1.8rem; }
.board-coins { font-size: 1.1rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; }
.board-coins .coin { width: 26px; height: 26px; }
.ribbon {
  position: absolute; top: 14px; right: -6px; background: var(--secondary); color: var(--ink);
  font-weight: 700; padding: 4px 14px; border-radius: 10px 0 0 10px; box-shadow: 0 3px 0 var(--secondary-dark);
}
.ribbon-mastered { background: var(--gold); box-shadow: 0 3px 0 #d9a520; }
.board-card.status-mastered { box-shadow: 0 0 0 4px var(--gold), var(--shadow); }
.mastery { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 80%; font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.mastery-bar { width: 100%; height: 10px; border-radius: 999px; background: #eee9fb; overflow: hidden; }
.mastery-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--mint), var(--right)); border-radius: 999px; transition: width 0.5s ease; }
.board-module { min-height: 240px; }
.board-module .board-icon { width: 96px; height: 96px; }
.board-module .board-icon.is-emoji { font-size: 4.4rem; }
.board-module .board-title { font-size: 1.9rem; }
.board-empty { grid-column: 1 / -1; text-align: center; font-size: 1.4rem; color: var(--muted); }