.m-main { flex: 1; display: flex; justify-content: center; padding: 16px 16px 32px; }
.m-wrap { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; position: relative; }
.m-board { --gap: 4px; position: relative; width: 100%; aspect-ratio: 1; padding: 8px; border-radius: 22px; background: #1f2430; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); gap: var(--gap); touch-action: none; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 32px rgba(0,0,0,0.12); }
.m-cell { position: relative; border-radius: 10px; background: rgba(255,255,255,0.05); }
.m-gem { position: absolute; inset: 6%; display: flex; align-items: center; justify-content: center; transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; cursor: grab; }
.m-gem svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.35)); }
.m-cell.sel .m-gem { transform: scale(1.12); }
.m-cell.sel::after { content: ""; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85); }
.m-gem.pop { animation: m-pop 0.2s ease-in forwards; }
.m-gem.drop { animation: m-drop 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
.m-gem.nope { animation: m-nope 0.24s ease; }
@keyframes m-pop { to { transform: scale(0.1); opacity: 0; } }
@keyframes m-drop { from { transform: translateY(-60%); opacity: 0.2; } }
@keyframes m-nope { 25% { transform: translateX(-12%); } 75% { transform: translateX(12%); } }
.m-pts { height: 28px; margin-top: 10px; font-size: 17px; font-weight: 600; color: #15803d; letter-spacing: -0.01em; opacity: 0; transition: opacity 0.2s; }
.m-pts.show { opacity: 1; }
.m-hint { font-size: 13px; color: #86868b; text-align: center; margin: 8px 0 0; }
@media (prefers-reduced-motion: reduce) { .m-gem { transition: none; } .m-gem.pop, .m-gem.drop, .m-gem.nope { animation: none; } }