.goal { width:min(480px, 100%); height:10px; border-radius:6px; background:var(--panel); border:1px solid var(--line); overflow:hidden; }
.goal-bar { height:100%; width:0; background:linear-gradient(90deg, #38bdf8, #4ade80); transition:width .3s ease; }
.m3 { display:grid; grid-template-columns:repeat(8, minmax(0, 1fr)); grid-template-rows:repeat(8, minmax(0, 1fr)); gap:3px; width:min(480px, 100%); aspect-ratio:1; padding:6px; border-radius:16px; background:linear-gradient(160deg, #1e293b, #0f172a); border:2px solid var(--line); box-sizing:border-box; touch-action:none; user-select:none; }
.gm { position:relative; display:grid; place-items:center; padding:0; border:0; border-radius:10px; background:rgba(255,255,255,.04); cursor:pointer; min-width:0; transition:transform .12s ease, opacity .2s ease; }
.gm .g { width:74%; aspect-ratio:1; background:var(--c); box-shadow:inset 0 -4px 0 rgba(0,0,0,.25), inset 0 3px 0 rgba(255,255,255,.35); }
.gm.k0 .g { --c:#ef4444; border-radius:50%; } .gm.k1 .g { --c:#3b82f6; border-radius:18%; } .gm.k2 .g { --c:#22c55e; clip-path:polygon(50% 4%, 96% 92%, 4% 92%); box-shadow:none; }
.gm.k3 .g { --c:#facc15; clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow:none; } .gm.k4 .g { --c:#a855f7; clip-path:polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); box-shadow:none; }
.gm.k5 .g { --c:#f97316; clip-path:polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%); box-shadow:none; }
.gm.s1::after, .gm.s2::after { content:''; position:absolute; inset:8%; border-radius:12px; border:3px solid #fff; box-shadow:0 0 10px #fff, inset 0 0 8px rgba(255,255,255,.7); pointer-events:none; }
.gm.s1::before { content:'✚'; position:absolute; color:#fff; font:900 1rem/1 system-ui; text-shadow:0 1px 3px #000; z-index:1; }
.gm.s2::before { content:'✸'; position:absolute; color:#fff; font:900 1.1rem/1 system-ui; text-shadow:0 1px 3px #000; z-index:1; }
.gm.sel { transform:scale(1.12); background:rgba(255,255,255,.2); z-index:2; }
.gm.pop { transform:scale(.2); opacity:0; }
.gm.hint { animation:m3Hint .7s ease 3; } .gm.bad { animation:m3Shake .25s ease; }
.gm:focus-visible { outline:3px solid var(--accent); outline-offset:1px; }
@keyframes m3Hint { 50% { transform:scale(1.18); background:rgba(255,255,255,.28); } } @keyframes m3Shake { 25% { transform:translateX(-4px); } 75% { transform:translateX(4px); } }
.bar button { min-height:44px; }