.app-footer {
                position: fixed;
                left: 50%;
                bottom: 10px;
                transform: translateX(-50%);
                width: min(100%, 860px);
                text-align: center;
                pointer-events: none;
                z-index: 6;
            }

            .app-footer a {
                pointer-events: auto;
            }

            .app-footer .footer-link {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                margin-top: 8px;
                color: #58a6ff;
                text-decoration: none;
                font-size: 0.9rem;
            }

            .results {
                gap: 14px;
            }

            .stats-screen {
                gap: 14px;
            }

            .results h2 {
                margin: 0;
                font-size: 1.35rem;
            }

            .results-grid {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .results-screen {
                display: grid;
                gap: 14px;
                align-content: start;
            }

            .overlay-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }

            .overlay-head h3 {
                margin: 0;
                font-size: 1rem;
            }

            .overlay-head {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 10px;
            }

            .overlay-head h3 {
                margin: 0;
                font-size: 1rem;
            }

            .muted {
                color: var(--muted);
            }

            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }

            @keyframes wrongPulse {
                0% {
                    transform: scale(1);
                }
                50% {
                    transform: scale(0.96);
                }
                100% {
                    transform: scale(1);
                }
            }

            @keyframes correctPop {
                0% {
                    transform: scale(1);
                }
                45% {
                    transform: scale(1.06);
                }
                100% {
                    transform: scale(1);
                }
            }

            @keyframes wrongShake {
                0%,
                100% {
                    transform: translateX(0);
                }
                20% {
                    transform: translateX(-2px);
                }
                40% {
                    transform: translateX(2px);
                }
                60% {
                    transform: translateX(-1px);
                }
                80% {
                    transform: translateX(1px);
                }
            }

            /* force mobile layout always */