* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #1e1b4b; color: #f8fafc; min-height: 100vh; display: flex; flex-direction: column; align-items: center; padding: 1rem; }
header h1 { font-size: 2rem; color: #a78bfa; margin-bottom: 1rem; }
.score-board { display: flex; gap: 1.5rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; justify-content: center; }
.score-board span { font-size: 1.1rem; }
.score-board b { color: #a78bfa; }
.score-board button { background: #a78bfa; color: #1e1b4b; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-weight: bold; }
.board { display: grid; gap: 4px; background: #312e81; padding: 8px; border-radius: 8px; }
.gem { width: 50px; height: 50px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; transition: transform 0.15s, box-shadow 0.15s; user-select: none; }
.gem:hover { transform: scale(1.05); }
.gem.selected { box-shadow: 0 0 0 3px #fbbf24; transform: scale(1.1); }
.gem.removing { animation: pop 0.3s forwards; }
@keyframes pop { to { transform: scale(0); opacity: 0; } }
footer { margin-top: 1rem; }
footer a { color: #a78bfa; text-decoration: none; }