.tile {
                position: relative;
                aspect-ratio: 1 / 1;
                border-radius: clamp(4px, 1.2vw, 10px);
                background: rgba(255, 255, 255, 0.04);
                display: grid;
                place-items: center;
                padding: 2px;
                cursor: pointer;
                user-select: none;
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
                contain: layout style paint;
                transition:
                    transform 150ms ease,
                    opacity 150ms ease,
                    background 150ms ease,
                    box-shadow 150ms ease;
            }

            .tile:active {
                transform: scale(0.94);
            }
            .tile.done {
                opacity: 0.2;
                pointer-events: none;
                transform: scale(0.92);
            }

            .tile.correct {
                background: rgba(94, 234, 212, 0.12);
                box-shadow: inset 0 0 0 2px rgba(94, 234, 212, 0.35);
                animation: correctPop 280ms ease;
            }

            .tile.wrong {
                animation: wrongShake 260ms ease;
                background: rgba(252, 165, 165, 0.10);
                box-shadow: inset 0 0 0 2px rgba(252, 165, 165, 0.3);
            }

            .symbol {
                width: 80%;
                height: 80%;
                display: block;
                opacity: 0.88;
            }

            .footer-note {
                color: var(--muted);
                text-align: center;
                font-size: 0.86rem;
                line-height: 1.5;
                padding-bottom: 4px;
            }