/* Shape Rotation */
.ss-target { position: relative; width: 150px; height: 150px; padding: 18px; border-radius: 22px; background: var(--tile-top); box-shadow: var(--lift); margin: 6px 0 22px; }
.ss-target.in { animation: ss-in .3s cubic-bezier(.3, .8, .3, 1.3); }
@keyframes ss-in { from { transform: rotate(-20deg) scale(.8); opacity: 0; } }
.ss-tag { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: linear-gradient(160deg, #5FE0C2, #12866A); }
.ss-shape { width: 100%; height: 100%; fill: #8C9BB8; }
.ss-shape.main { fill: #12A383; }
.ss-pad { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); gap: 12px; width: 100%; max-width: 520px; }
.ss-btn { position: relative; aspect-ratio: 1; padding: 16px; border-radius: 18px; background: var(--tile-top); border: 1px solid var(--glass-edge); box-shadow: var(--lift); cursor: pointer; transition: transform .15s; }
.ss-btn:hover { transform: translateY(-3px) rotate(-2deg); }
.ss-btn .ss-shape { fill: #5A6B8C; }
:root[data-theme="dark"] .ss-btn .ss-shape { fill: #B3C0D8; }
.ss-btn.ok .ss-shape { fill: var(--ok); }
.ss-btn.bad .ss-shape { fill: var(--red); }
@media (max-width: 420px) { .ss-pad { gap: 8px; } .ss-btn { padding: 10px; } }