body {
            margin: 0;
            padding: 0;
            background: #000;
            font-family: Arial, sans-serif;
            overflow: hidden;
        }
        
        #container {
            width: 100vw;
            height: 100vh;
            position: relative;
        }
        
        #info {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            background: rgba(0,0,0,0.7);
            padding: 10px;
            border-radius: 5px;
            z-index: 100;
            max-width: 300px;
        }
        
        #controls {
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: white;
            background: rgba(0,0,0,0.7);
            padding: 10px;
            border-radius: 5px;
            z-index: 100;
        }
        
        .control-item {
            margin: 5px 0;
        }
        
        label {
            display: inline-block;
            width: 120px;
        }
        
        input[type="range"] {
            width: 100px;
        }
        
        #loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 18px;
            z-index: 200;
        }

        #flag-container {
            position: fixed;
            top: 20px;
            right: 20px;
            pointer-events: none;
            z-index: 150;
            display: none;
            background-color: rgba(50, 50, 50, 0.95);
            border-radius: 8px;
            padding: 20px;
            border: 1px solid rgba(55, 90, 128, 0.15);
            box-shadow: 0 8px 24px rgba(55, 90, 128, 0.5);
        }

        #flag-container-content {
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            gap: 15px;
        }

        #flag-container canvas {
            display: block;
            border-radius: 4px;
            width: 180px !important;
            height: 120px !important;
            flex-shrink: 0;
        }

        #flag-info {
            color: #e0e0e0;
            font-family: Arial, sans-serif;
            font-size: 18px;
            line-height: 1.4;
            flex: 1;
        }

        #flag-info .country-name {
            font-size: 26px;
            font-weight: bold;
            margin-bottom: 8px;
            color: #ffffff;
        }

        #flag-info .info-item {
            margin: 4px 0;
        }

        #flag-info .info-label {
            font-weight: bold;
            color: #FF8C00;
        }

        #search-container {
            /* The country search lives inside the settings gear (#settings-panel).
               It starts as markup in #container and is reparented into the panel
               once the globe loads; hidden until then so it doesn't flash in the
               corner during load. The #settings-panel rules below reveal + reframe
               it for the panel flow. */
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 150;
            background-color: transparent;
            border-radius: 8px;
            padding: 20px;
            border: 1px solid rgba(55, 90, 128, 0.15);
            box-shadow: 0 8px 24px rgba(55, 90, 128, 0.5);
            min-width: 300px;
        }

        #search-box {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        #search-icon {
            color: #FF8C00;
            font-size: 20px;
            margin-right: 10px;
        }

        #country-search {
            flex: 1;
            padding: 8px 12px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            background-color: rgba(0, 0, 0, 0.3);
            color: #ffffff;
            font-size: 16px;
            outline: none;
        }

        #country-search::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }

        #country-search:focus {
            border-color: #FF8C00;
        }

        #search-results {
            max-height: 400px;
            overflow-y: auto;
        }

        .search-result-item {
            padding: 8px 12px;
            color: #e0e0e0;
            cursor: pointer;
            border-radius: 4px;
            margin: 4px 0;
            transition: background-color 0.2s;
        }

        .search-result-item:hover {
            background-color: rgba(255, 140, 0, 0.2);
        }

        #search-results::-webkit-scrollbar {
            width: 8px;
        }

        #search-results::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 4px;
        }

        #search-results::-webkit-scrollbar-thumb {
            background: rgba(255, 140, 0, 0.5);
            border-radius: 4px;
        }

        #search-results::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 140, 0, 0.7);
        }

        /* Quiz UI styles */
        #quiz-container {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 150;
            background-color: rgba(0, 0, 0, 0.85);
            border-radius: 8px;
            padding: 20px 20px 0 20px;
            border: 1px solid rgba(255, 140, 0, 0.3);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
            min-width: 300px;
            max-width: 350px;
        }

        /* Flag Quiz Fullscreen Mode */
        body.flag-quiz-active #quiz-container {
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            max-width: none;
            border-radius: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            background: linear-gradient(135deg, rgba(0, 20, 40, 0.95), rgba(0, 40, 80, 0.95));
            padding: 20px 20px 80px 20px;
            overflow-y: auto;
            /* Without border-box, width:100% + 40px padding overflows the viewport
               by 40px, pushing the absolutely-positioned cancel × (right:10px) off
               the right edge. The mobile rule already sets this. */
            box-sizing: border-box;
        }

        /* Hide the globe UI during the fullscreen flag quiz (desktop) — the mobile
           layout already does this. Without it, #zoom-out-btn (top:20/right:20) and
           the other controls sit over the quiz, covering the cancel × at top-right. */
        body.flag-quiz-active #search-container,
        body.flag-quiz-active #zoom-widget,
        body.flag-quiz-active #zoom-out-btn,
        body.flag-quiz-active #take-quiz-btn {
            display: none !important;
        }

        body.flag-quiz-active #quiz-header {
            font-size: 24px;
            margin-bottom: 15px;
            margin-top: 40px;
        }

        body.flag-quiz-active #quiz-score {
            font-size: 18px;
            margin-bottom: 15px;
        }

        body.flag-quiz-active #quiz-question {
            font-size: 20px;
            margin-bottom: 20px;
            max-width: 600px;
        }

        body.flag-quiz-active #quiz-flag-display {
            margin-bottom: 20px;
            padding: 15px;
            /* Match the country info panel's gray so black flags keep contrast. */
            background-color: rgba(50, 50, 50, 0.95);
            border-radius: 12px;
        }

        body.flag-quiz-active #quiz-options {
            max-width: 600px;
            width: 100%;
        }

        body.flag-quiz-active #quiz-next-btn,
        body.flag-quiz-active #quiz-start-btn {
            max-width: 600px;
            width: 100%;
        }

        body.flag-quiz-active #quiz-flag-display canvas {
            max-width: 400px;
            max-height: 40vh;
            width: auto;
            height: auto;
            object-fit: contain;
        }


        #quiz-header {
            color: #FF8C00;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            text-align: center;
        }

        #quiz-score {
            color: #e0e0e0;
            font-size: 14px;
            text-align: center;
            margin-bottom: 10px;
        }

        #quiz-question {
            color: #ffffff;
            font-size: 16px;
            margin-bottom: 15px;
            text-align: center;
            padding: 10px;
            background-color: rgba(255, 140, 0, 0.15);
            border-radius: 4px;
        }

        #quiz-flag-display {
            margin-bottom: 15px;
            text-align: center;
            padding: 10px;
            /* Match the country info panel's gray so black flags keep contrast. */
            background-color: rgba(50, 50, 50, 0.95);
            border-radius: 8px;
        }

        #quiz-flag-display canvas {
            display: block;
            margin: 0 auto;
            border-radius: 4px;
            max-width: 400px;
        }

        .quiz-option {
            width: 100%;
            padding: 12px;
            margin: 8px 0;
            background-color: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            color: #ffffff;
            font-size: 15px;
            cursor: pointer;
            transition: all 0.3s;
            text-align: left;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .quiz-option .correct-label {
            font-size: 11px;
            font-variant: small-caps;
            color: rgba(255, 255, 255, 0.9);
            margin-left: 10px;
        }

        .quiz-option:hover {
            background-color: rgba(255, 140, 0, 0.3);
            border-color: #FF8C00;
            transform: translateX(5px);
        }

        .quiz-option.correct {
            background-color: rgba(0, 255, 0, 0.3);
            border-color: #00ff00;
        }

        .quiz-option.incorrect {
            background-color: rgba(255, 0, 0, 0.3);
            border-color: #ff0000;
        }

        .quiz-option:disabled {
            cursor: not-allowed;
            opacity: 0.6;
        }

        #quiz-start-btn, #quiz-next-btn {
            width: 100%;
            padding: 12px;
            margin-top: 10px;
            background-color: #FF8C00;
            border: none;
            border-radius: 6px;
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        #quiz-start-btn:hover, #quiz-next-btn:hover {
            background-color: #FF6500;
            transform: scale(1.05);
        }

        #quiz-cancel-btn, #click-quiz-cancel-btn {
            width: 28px;
            height: 28px;
            padding: 0;
            margin: 0;
            background-color: rgba(102, 102, 102, 0.8);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            color: #ffffff;
            font-size: 20px;
            font-weight: normal;
            line-height: 1;
            cursor: pointer;
            transition: all 0.2s;
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 200;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        #quiz-cancel-btn:hover, #click-quiz-cancel-btn:hover {
            background-color: rgba(204, 0, 0, 0.9);
            border-color: rgba(255, 255, 255, 0.5);
            transform: scale(1.05);
        }

        #click-quiz-cancel-btn {
            top: 10px;
            right: 10px;
        }

        #quiz-result {
            color: #ffffff;
            font-size: 14px;
            text-align: center;
            margin-top: 10px;
            padding: 10px;
            border-radius: 4px;
            display: none;
        }

        #quiz-result.correct {
            background-color: rgba(0, 255, 0, 0.2);
            border: 1px solid #00ff00;
        }

        #quiz-result.incorrect {
            background-color: rgba(255, 0, 0, 0.2);
            border: 1px solid #ff0000;
        }

        /* Quiz Celebration Overlay */
        #quiz-celebration-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 10000;
            display: flex;
            align-items: flex-start;
            justify-content: center;
            padding-top: 24px;
            pointer-events: none;
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        #quiz-celebration-content {
            text-align: center;
            color: white;
            padding: 16px 24px;
            background: rgba(211, 211, 211, 0.2);
            border-radius: 20px;
            backdrop-filter: blur(10px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            pointer-events: auto;
            animation: bounceIn 0.8s ease-out;
        }

        @keyframes bounceIn {
            0% {
                transform: scale(0.3);
                opacity: 0;
            }
            50% {
                transform: scale(1.05);
            }
            70% {
                transform: scale(0.9);
            }
            100% {
                transform: scale(1);
                opacity: 1;
            }
        }

        #celebration-title {
            font-size: 2rem;
            margin: 0 0 8px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }

        #celebration-message {
            font-size: 1.2rem;
            margin: 0 0 6px;
            font-weight: bold;
        }

        #celebration-score {
            font-size: 1.4rem;
            margin: 8px 0 12px;
            font-weight: bold;
            color: #FFD700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        #celebration-close-btn {
            padding: 8px 24px;
            font-size: 1rem;
            background: linear-gradient(135deg, #FF6B6B, #FF8E53);
            border: none;
            border-radius: 50px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
            transition: all 0.3s ease;
        }

        #celebration-close-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
        }

        @media (max-width: 768px) {
            #celebration-title {
                font-size: 1.6rem;
            }

            #celebration-message {
                font-size: 1.1rem;
            }

            #celebration-score {
                font-size: 1.3rem;
            }

            #celebration-close-btn {
                padding: 8px 22px;
                font-size: 0.95rem;
            }
        }

        /* Quiz Mode Selector Styles */
        #quiz-mode-selector {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }

        #quiz-mode-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
        }

        #quiz-mode-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(10, 20, 35, 0.95);
            border: 2px solid #FF8C00;
            border-radius: 12px;
            padding: 30px;
            max-width: 600px;
            width: 90%;
        }

        #quiz-mode-content h2 {
            color: #FF8C00;
            text-align: center;
            margin-bottom: 25px;
            font-size: 24px;
        }

        #quiz-mode-options {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }

        .quiz-mode-option {
            flex: 1;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 140, 0, 0.3);
            border-radius: 8px;
            color: #ffffff;
            cursor: pointer;
            transition: all 0.3s;
            text-align: center;
        }

        .quiz-mode-option h3 {
            color: #FF8C00;
            margin-bottom: 10px;
            font-size: 18px;
        }

        .quiz-mode-option p {
            color: #cccccc;
            font-size: 14px;
            line-height: 1.5;
        }

        .quiz-mode-option:hover {
            background-color: rgba(255, 140, 0, 0.2);
            border-color: #FF8C00;
            transform: scale(1.05);
        }

        #quiz-mode-close {
            width: 100%;
            padding: 12px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 6px;
            color: #ffffff;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s;
        }

        #quiz-mode-close:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        /* Click Quiz Container Styles */
        #click-quiz-container {
            position: fixed;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 150;
            background-color: rgba(0, 0, 0, 0.85);
            border-radius: 8px;
            padding: 20px 30px;
            border: 2px solid #FF8C00;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
            min-width: 400px;
        }

        #click-quiz-country-name {
            color: #FF8C00;
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 15px;
        }

        #click-quiz-info {
            display: flex;
            justify-content: space-between;
            color: #e0e0e0;
            font-size: 16px;
        }

        #click-quiz-feedback {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0, 0, 0, 0.9);
            border: 3px solid;
            border-radius: 8px;
            padding: 20px 40px;
            font-size: 24px;
            font-weight: bold;
            z-index: 200;
            display: none;
            animation: feedbackPulse 0.5s;
        }

        #click-quiz-feedback.correct {
            color: #00ff00;
            border-color: #00ff00;
        }

        #click-quiz-feedback.wrong {
            color: #ff0000;
            border-color: #ff0000;
        }

        @keyframes feedbackPulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.1); }
        }

        /* Timer Bar Styles */
        #click-quiz-timer-bar-container {
            position: fixed;
            right: 0;
            top: 10%;
            height: 80%;
            width: 15px;
            background-color: rgba(0, 0, 0, 0.5);
            border-left: 2px solid #FF8C00;
            z-index: 140;
        }

        #click-quiz-timer-fill {
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #00ff00, #ffff00, #ff0000);
            transition: height 0.1s linear;
        }

        /* Click Quiz Results Styles */
        #click-quiz-results {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }

        #click-quiz-results-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
        }

        #click-quiz-results-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(10, 20, 35, 0.95);
            border: 3px solid #FF8C00;
            border-radius: 12px;
            padding: 40px;
            text-align: center;
            max-width: 500px;
            width: 90%;
        }

        #click-quiz-results-content h2 {
            color: #FF8C00;
            font-size: 32px;
            margin-bottom: 20px;
        }

        #click-quiz-final-score {
            color: #ffffff;
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 15px;
        }

        #click-quiz-final-time {
            color: #e0e0e0;
            font-size: 18px;
            margin-bottom: 30px;
        }

        #click-quiz-close-btn {
            padding: 15px 40px;
            background-color: #FF8C00;
            border: none;
            border-radius: 6px;
            color: #ffffff;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s;
        }

        #click-quiz-close-btn:hover {
            background-color: #FF6500;
            transform: scale(1.05);
        }

        /* Label Editor Modal Styles */
        #label-editor-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1000;
        }

        #label-editor-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
        }

        #label-editor-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(20, 20, 20, 0.95);
            border: 2px solid #FF8C00;
            border-radius: 12px;
            padding: 25px;
            min-width: 350px;
            max-width: 90%;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.7);
        }

        #label-editor-title {
            color: #FF8C00;
            font-size: 22px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
        }

        .label-editor-section {
            margin-bottom: 20px;
        }

        .label-editor-section label {
            display: block;
            color: #e0e0e0;
            font-size: 14px;
            margin-bottom: 8px;
            font-weight: bold;
        }

        .label-editor-section input[type="range"] {
            width: 70%;
            vertical-align: middle;
        }

        .label-editor-section span {
            display: inline-block;
            width: 60px;
            color: #FF8C00;
            font-weight: bold;
            margin-left: 10px;
            vertical-align: middle;
        }

        .label-editor-buttons {
            display: flex;
            gap: 10px;
            margin-top: 25px;
        }

        .label-editor-buttons button {
            flex: 1;
            padding: 12px;
            font-size: 14px;
            font-weight: bold;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
        }

        #label-reset-btn {
            background-color: #f44336;
            color: white;
        }

        #label-reset-btn:hover {
            background-color: #d32f2f;
            transform: scale(1.05);
        }

        #label-editor-close-btn {
            background-color: #4CAF50;
            color: white;
        }

        #label-editor-close-btn:hover {
            background-color: #45a049;
            transform: scale(1.05);
        }

        /* Zoom Out button - top right */
        #zoom-out-btn {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 150;
            background-color: #2196F3;
            border: none;
            border-radius: 6px;
            color: #ffffff;
            font-size: 14px;
            font-weight: bold;
            padding: 10px 15px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            transition: all 0.3s;
        }

        #zoom-out-btn:hover {
            background-color: #1976D2;
            transform: scale(1.05);
        }

        /* Take Quiz button (mobile only) */
        #take-quiz-btn {
            display: none;
        }

        /* Edit mode buttons - save button hidden by default */
        #edit-mode-btn {
            display: none;
        }

        #save-config-btn {
            display: none;
        }

        #fine-tune-btn {
            display: none;
        }

        #edit-colors-btn {
            display: none;
        }

        #save-colors-btn {
            display: none;
        }

        #edit-zoom-btn {
            display: none;
        }

        #save-zoom-btn {
            display: none;
        }

        /* Level panel: shared rules (positioning lives in media queries below) */
        #level-panel {
            grid-template-columns: repeat(2, 72px);
            gap: 4px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 8px;
            padding: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            z-index: 150;
        }

        .level-btn {
            height: 28px;
            border: 2px solid transparent;
            border-radius: 4px;
            cursor: pointer;
            padding: 0;
            box-sizing: border-box;
            background-color: #444;
            color: #fff;
            font-size: 12px;
            font-weight: bold;
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .level-btn:hover {
            transform: scale(1.08);
        }

        .level-btn.active {
            border-color: #ffffff;
            background-color: #00838F;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
        }

        /* Swatch panel: shared rules (positioning lives in media queries below) */
        #swatch-panel {
            grid-template-columns: repeat(4, 28px);
            gap: 4px;
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 8px;
            padding: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            z-index: 150;
        }

        .swatch {
            width: 28px;
            height: 28px;
            border: 2px solid transparent;
            border-radius: 4px;
            cursor: pointer;
            padding: 0;
            box-sizing: border-box;
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .swatch:hover {
            transform: scale(1.1);
        }

        .swatch.active {
            border-color: #ffffff;
            box-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
        }

        /* Zoom Widget Styles */
        #zoom-widget {
            position: fixed;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 150;
            background-color: rgba(0, 0, 0, 0.7);
            border: 2px solid rgba(255, 140, 0, 0.5);
            border-radius: 8px;
            padding: 15px 10px;
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }

        #zoom-label-top {
            color: #FF8C00;
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 8px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        #zoom-bar-container {
            width: 30px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(255, 140, 0, 0.3);
            border-radius: 4px;
            margin: 0 auto 8px auto;
            position: relative;
            overflow: hidden;
        }

        #zoom-bar-fill {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(to top, #FF8C00, #FFD700);
            border-radius: 3px;
            transition: height 0.2s ease;
        }

        #zoom-value {
            color: #FFD700;
            font-size: 14px;
            font-weight: bold;
            font-family: monospace;
        }

        /* Desktop styles for edit buttons */
        @media (min-width: 769px) {
            #edit-mode-btn {
                display: block;
                position: fixed;
                top: 120px;
                left: 20px;
                z-index: 150;
                background-color: #4CAF50;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #edit-mode-btn.active {
                background-color: #FFA500;
            }

            #edit-mode-btn:hover {
                transform: scale(1.05);
            }

            #save-config-btn {
                position: fixed;
                top: 170px;
                left: 20px;
                z-index: 150;
                background-color: #2196F3;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #save-config-btn:hover {
                background-color: #1976D2;
                transform: scale(1.05);
            }

            #fine-tune-btn {
                position: fixed;
                top: 220px;
                left: 20px;
                z-index: 150;
                background-color: #9C27B0;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #fine-tune-btn:hover {
                background-color: #7B1FA2;
                transform: scale(1.05);
            }

            #edit-colors-btn {
                display: block;
                position: fixed;
                top: 270px;
                left: 20px;
                z-index: 150;
                background-color: #E91E63;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #edit-colors-btn.active {
                background-color: #FFA500;
            }

            #edit-colors-btn:hover {
                transform: scale(1.05);
            }

            #save-colors-btn {
                position: fixed;
                top: 320px;
                left: 20px;
                z-index: 150;
                background-color: #00BCD4;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #save-colors-btn:hover {
                background-color: #0097A7;
                transform: scale(1.05);
            }

            #swatch-panel {
                position: fixed;
                top: 370px;
                left: 20px;
            }

            #edit-zoom-btn {
                display: block;
                position: fixed;
                top: 420px;
                left: 20px;
                z-index: 150;
                background-color: #009688;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #edit-zoom-btn.active {
                background-color: #FFA500;
            }

            #edit-zoom-btn:hover {
                transform: scale(1.05);
            }

            #save-zoom-btn {
                position: fixed;
                top: 470px;
                left: 20px;
                z-index: 150;
                background-color: #00BCD4;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #save-zoom-btn:hover {
                background-color: #0097A7;
                transform: scale(1.05);
            }

            #level-panel {
                position: fixed;
                top: 520px;
                left: 20px;
            }
        }

        /* Mobile styles */
        @media (max-width: 768px) {
            /* Show Take Quiz button on mobile - positioned below search, left aligned */
            #take-quiz-btn {
                display: block;
                position: fixed;
                top: 110px;
                left: 10px;
                z-index: 150;
                background-color: #FF8C00;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #take-quiz-btn:hover {
                background-color: #FF6500;
                transform: scale(1.05);
            }

            /* Edit mode buttons on mobile */
            #edit-mode-btn {
                display: block;
                position: fixed;
                top: 155px;
                left: 10px;
                z-index: 150;
                background-color: #4CAF50;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #edit-mode-btn.active {
                background-color: #FFA500;
            }

            #edit-mode-btn:hover {
                transform: scale(1.05);
            }

            #save-config-btn {
                position: fixed;
                top: 200px;
                left: 10px;
                z-index: 150;
                background-color: #2196F3;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #save-config-btn:hover {
                background-color: #1976D2;
                transform: scale(1.05);
            }

            #fine-tune-btn {
                position: fixed;
                top: 245px;
                left: 10px;
                z-index: 150;
                background-color: #9C27B0;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #fine-tune-btn:hover {
                background-color: #7B1FA2;
                transform: scale(1.05);
            }

            #edit-colors-btn {
                display: block;
                position: fixed;
                top: 290px;
                left: 10px;
                z-index: 150;
                background-color: #E91E63;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #edit-colors-btn.active {
                background-color: #FFA500;
            }

            #edit-colors-btn:hover {
                transform: scale(1.05);
            }

            #save-colors-btn {
                position: fixed;
                top: 335px;
                left: 10px;
                z-index: 150;
                background-color: #00BCD4;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #save-colors-btn:hover {
                background-color: #0097A7;
                transform: scale(1.05);
            }

            #swatch-panel {
                position: fixed;
                top: 385px;
                left: 10px;
            }

            #edit-zoom-btn {
                display: block;
                position: fixed;
                top: 435px;
                left: 10px;
                z-index: 150;
                background-color: #009688;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #edit-zoom-btn.active {
                background-color: #FFA500;
            }

            #edit-zoom-btn:hover {
                transform: scale(1.05);
            }

            #save-zoom-btn {
                position: fixed;
                top: 480px;
                left: 10px;
                z-index: 150;
                background-color: #00BCD4;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }

            #save-zoom-btn:hover {
                background-color: #0097A7;
                transform: scale(1.05);
            }

            #level-panel {
                position: fixed;
                top: 525px;
                left: 10px;
            }

            /* Hide Take Quiz button during quiz */
            body.quiz-active #take-quiz-btn {
                display: none;
            }

            /* Hide edit buttons during quiz */
            body.quiz-active #edit-mode-btn,
            body.quiz-active #save-config-btn,
            body.quiz-active #fine-tune-btn,
            body.quiz-active #edit-colors-btn,
            body.quiz-active #save-colors-btn,
            body.quiz-active #swatch-panel,
            body.quiz-active #edit-zoom-btn,
            body.quiz-active #save-zoom-btn,
            body.quiz-active #level-panel {
                display: none !important;
            }

            /* Zoom widget on mobile - position on right side */
            #zoom-widget {
                right: 10px;
                padding: 10px 8px;
            }

            #zoom-bar-container {
                height: 120px;
                width: 25px;
            }

            #zoom-label-top {
                font-size: 11px;
            }

            #zoom-value {
                font-size: 13px;
            }

            /* Hide quiz container when not active on mobile */
            #quiz-container {
                display: none;
            }

            /* Show quiz container when active */
            body.quiz-active #quiz-container {
                display: block;
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                max-width: none;
                border-radius: 12px 12px 0 0;
                max-height: 50vh;
                overflow-y: auto;
                padding: 15px 15px 0 15px;
            }

            body.quiz-active #quiz-header {
                font-size: 16px;
                margin-bottom: 10px;
            }

            body.quiz-active #quiz-score {
                font-size: 12px;
                margin-bottom: 8px;
            }

            body.quiz-active #quiz-question {
                font-size: 14px;
                margin-bottom: 10px;
                padding: 8px;
            }

            body.quiz-active .quiz-option {
                padding: 10px;
                margin: 6px 0;
                font-size: 14px;
            }

            body.quiz-active #quiz-result {
                font-size: 12px;
                padding: 8px;
                margin-top: 8px;
            }

            body.quiz-active #quiz-start-btn,
            body.quiz-active #quiz-next-btn {
                padding: 10px;
                font-size: 14px;
                margin-top: 8px;
            }

            /* Name the Country quiz (mobile): hide the zoom controls so they don't compete
               with the quiz panel for screen space. */
            body.quiz-active #zoom-out-btn,
            body.quiz-active #zoom-widget {
                display: none !important;
            }

            /* Header + score on one row. The cancel "X" is already absolute top:8/right:8,
               so dropping these two onto a single inline-block row puts all three visually
               on the same row. !important beats the inline display:block set by the quiz JS. */
            body.quiz-active #quiz-header,
            body.quiz-active #quiz-score {
                display: inline-block !important;
                vertical-align: middle;
                margin-right: 12px;
                margin-bottom: 8px;
            }

            /* 2x2 grid of answer options (4 choices per question). */
            body.quiz-active #quiz-options {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 8px;
            }
            body.quiz-active .quiz-option {
                margin: 0;
            }

            /* Flag Quiz Fullscreen on Mobile */
            body.flag-quiz-active #quiz-container {
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                width: 100vw;
                height: 100vh;
                max-width: none;
                max-height: none;
                border-radius: 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start;
                background: linear-gradient(135deg, rgba(0, 20, 40, 0.98), rgba(0, 40, 80, 0.98));
                padding: 15px 12px 100px 12px;
                overflow-y: auto;
                box-sizing: border-box;
            }

            /* Hide other elements during flag quiz on mobile */
            body.flag-quiz-active #search-container,
            body.flag-quiz-active #zoom-widget,
            body.flag-quiz-active #zoom-out-btn,
            body.flag-quiz-active #take-quiz-btn {
                display: none !important;
            }

            body.flag-quiz-active #quiz-header {
                font-size: 18px;
                margin-bottom: 15px;
                margin-top: 40px;
            }

            body.flag-quiz-active #quiz-score {
                font-size: 14px;
                margin-bottom: 10px;
            }

            body.flag-quiz-active #quiz-question {
                font-size: 16px;
                margin-bottom: 12px;
                padding: 8px;
            }

            body.flag-quiz-active #quiz-flag-display {
                margin-bottom: 12px;
                padding: 8px;
                width: 100%;
                max-width: 100%;
            }

            body.flag-quiz-active #quiz-flag-display canvas {
                max-width: 50%;
                max-height: 25vh;
                width: auto;
                height: auto;
                display: block;
                margin: 0 auto;
                object-fit: contain;
            }

            body.flag-quiz-active #quiz-options {
                width: 100%;
                max-width: 100%;
            }

            body.flag-quiz-active .quiz-option {
                padding: 12px;
                margin: 8px 0;
                font-size: 14px;
            }

            body.flag-quiz-active #quiz-next-btn,
            body.flag-quiz-active #quiz-start-btn {
                width: 100%;
                max-width: 100%;
                padding: 12px;
                margin-top: 15px;
                font-size: 16px;
            }

            /* Globe canvas centered on mobile */
            #globe-canvas {
                transform: translateY(0);
            }

            /* Place search container at top on mobile */
            #search-container {
                top: 10px;
                bottom: auto;
                left: 50%;
                transform: translateX(-50%);
                padding: 15px;
                min-width: calc(100% - 20px);
                max-width: calc(100% - 20px);
            }

            /* Hide search container during quiz */
            body.quiz-active #search-container {
                display: none;
            }

            #flag-container {
                position: fixed !important;
                top: auto !important;
                bottom: 0 !important;
                right: auto !important;
                left: 50% !important;
                transform: translateX(-50%) !important;
                width: calc(100% - 20px);
                max-width: 100%;
                padding: 10px;
                border: none;
                box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8);
                background-color: rgba(50, 50, 50, 0.95);
                border-radius: 8px 8px 0 0;
            }

            /* Hide flag container during quiz on mobile */
            body.quiz-active #flag-container {
                display: none !important;
            }

            #flag-container-content {
                flex-direction: row;
                gap: 10px;
                justify-content: flex-start;
                align-items: center;
            }

            #flag-container canvas {
                width: 120px !important;
                height: 80px !important;
                flex-shrink: 0;
            }

            #flag-info {
                font-size: 14px;
                flex: 1;
            }

            #flag-info .country-name {
                font-size: 18px;
                margin-bottom: 3px;
            }

            #flag-info .info-item {
                margin: 2px 0;
            }

            #controls {
                display: none;
            }

            /* Click Quiz Mobile Styles */
            #click-quiz-container {
                top: 10px;
                min-width: calc(100% - 40px);
                padding: 15px 20px;
            }

            #click-quiz-country-name {
                font-size: 24px;
                margin-bottom: 10px;
            }

            #click-quiz-info {
                font-size: 14px;
            }

            #click-quiz-feedback {
                font-size: 20px;
                padding: 15px 30px;
            }

            /* Small cancel buttons on mobile */
            #quiz-cancel-btn, #click-quiz-cancel-btn {
                width: 32px;
                height: 32px;
                font-size: 22px;
                top: 8px;
                right: 8px;
            }

            #click-quiz-cancel-btn {
                top: 8px;
                right: 8px;
            }

            #click-quiz-timer-bar-container {
                width: 8px;
            }

            #quiz-mode-options {
                flex-direction: column;
                gap: 15px;
            }

            .quiz-mode-option {
                padding: 15px;
            }

            .quiz-mode-option h3 {
                font-size: 16px;
            }

            .quiz-mode-option p {
                font-size: 13px;
            }

            #click-quiz-results-content {
                padding: 30px 20px;
            }

            #click-quiz-results-content h2 {
                font-size: 24px;
            }

            #click-quiz-final-score {
                font-size: 36px;
            }

            #click-quiz-final-time {
                font-size: 16px;
            }
        }

        /* SEO Content Overlay */
        #seo-content {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* Soft radial scrim: dark behind the centered text for legibility,
               fading to transparent at the edges so the globe shows through. */
            background: radial-gradient(ellipse at center,
                rgba(0, 17, 34, 0.78) 0%,
                rgba(0, 17, 34, 0.45) 45%,
                rgba(0, 17, 34, 0.0) 80%);
            color: #ffffff;
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            box-sizing: border-box;
            transition: opacity 0.5s ease-out;
        }

        #seo-content.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #seo-text-wrapper {
            max-width: 800px;
            text-align: center;
            padding-bottom: 120px;
        }

        #seo-content h1 {
            font-size: 2.5rem;
            margin-bottom: 20px;
            color: #4FC3F7;
            font-weight: bold;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
        }

        #seo-content h2 {
            font-size: 1.5rem;
            margin: 30px 0 15px;
            color: #81D4FA;
            text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
        }

        #seo-content p {
            font-size: 1.1rem;
            line-height: 1.6;
            margin-bottom: 15px;
            color: #E1F5FE;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
        }

        #seo-content ul {
            text-align: left;
            margin: 15px auto;
            max-width: 600px;
            list-style-position: inside;
        }

        #seo-content li {
            font-size: 1rem;
            line-height: 1.8;
            color: #E1F5FE;
            text-shadow: 0 1px 5px rgba(0, 0, 0, 0.6);
        }

        @media (max-width: 768px) {
            #seo-content {
                align-items: center;
                padding: 20px 15px;
                overflow-y: auto;
            }

            #seo-content h1 {
                font-size: 1.8rem;
                margin-bottom: 15px;
            }

            #seo-content h2 {
                font-size: 1.1rem;
                margin: 20px 0 10px;
            }

            #seo-content p {
                font-size: 0.9rem;
                margin-bottom: 10px;
            }

            #seo-content ul {
                margin: 10px auto;
            }

            #seo-content li {
                font-size: 0.85rem;
                line-height: 1.6;
            }
        }

        /* Loading Progress Bar and Start Button */
        #loading-progress-container {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            max-width: 600px;
        }

        #loading-progress-bar {
            /* Progress bar is intentionally not shown — the SEO intro stays up
               until the globe is ready, then swaps to the #start-hint. */
            display: none;
            position: relative;
            width: 100%;
            height: 40px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 20px;
            overflow: hidden;
            border: 2px solid #4FC3F7;
        }

        #loading-progress-fill {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #4FC3F7, #81D4FA);
            transition: width 0.3s ease;
        }

        #loading-progress-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #ffffff;
            font-size: 16px;
            font-weight: bold;
            z-index: 1;
            text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
        }

        #start-hint {
            width: 100%;
            text-align: center;
            color: #81D4FA;
            font-size: 18px;
            font-weight: bold;
            letter-spacing: 0.5px;
            text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
            animation: start-hint-pulse 2s ease-in-out infinite;
            pointer-events: none;
        }

        @keyframes start-hint-pulse {
            0%, 100% { opacity: 0.55; }
            50% { opacity: 1; }
        }

        @media (max-width: 768px) {
            #loading-progress-container {
                width: 90%;
                bottom: 20px;
            }

            #loading-progress-bar {
                height: 35px;
            }

            #loading-progress-text {
                font-size: 14px;
            }

            #start-hint {
                font-size: 16px;
            }
        }

        /* ============================================================
           Layout overrides — applied last so they win on cascade order.

           - Hide Zoom Out + Zoom Widget always (kept in DOM in place).
           - Show Take Quiz on desktop too, top-left under search.
           - The edit/animation dev buttons are relocated into the settings
             gear (#settings-panel) at runtime; their layout is normalized
             there. Save/fine-tune siblings keep their internal show/hide.
           ============================================================ */

        #zoom-out-btn,
        #zoom-widget {
            display: none !important;
        }

        /* The edit / animation dev buttons live behind the settings gear. They
           start life as direct children of #container (so their IDs/listeners
           are wired up front) and are reparented into #settings-panel once the
           globe finishes loading. Hide them until then so they don't flash in
           the corners during load — the more-specific `#settings-panel #…`
           rules below (display: block !important) reveal them inside the panel. */
        #edit-mode-btn,
        #edit-colors-btn,
        #edit-zoom-btn,
        #bounce-btn,
        #shatter-btn,
        #pinball-btn {
            display: none !important;
        }

        /* The edit / animation dev buttons are relocated into the settings panel
           (#settings-panel) at runtime. Normalize their layout there: drop the
           fixed left-column / top-right positioning the per-breakpoint rules give
           them so they stack neatly inside the panel. */
        #settings-panel #edit-mode-btn,
        #settings-panel #save-config-btn,
        #settings-panel #fine-tune-btn,
        #settings-panel #edit-colors-btn,
        #settings-panel #save-colors-btn,
        #settings-panel #edit-zoom-btn,
        #settings-panel #save-zoom-btn,
        #settings-panel #bounce-btn,
        #settings-panel #shatter-btn,
        #settings-panel #pinball-btn {
            position: static !important;
            top: auto !important;
            left: auto !important;
            right: auto !important;
            bottom: auto !important;
            margin: 0 !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
        /* Mode-toggle + animation buttons are always visible in the panel; their
           save/fine-tune siblings keep their own module-driven inline show/hide. */
        #settings-panel #edit-mode-btn,
        #settings-panel #edit-colors-btn,
        #settings-panel #edit-zoom-btn,
        #settings-panel #bounce-btn,
        #settings-panel #shatter-btn,
        #settings-panel #pinball-btn {
            display: block !important;
        }

        /* Take Quiz pinned to the actual top-left corner. Margin matches
           the search container (top:20px left:20px on desktop, 10px on
           mobile). Wins over the older mobile rule that placed it at
           top:110px. */
        #take-quiz-btn {
            top: 20px !important;
            left: 20px !important;
        }
        @media (min-width: 769px) {
            #take-quiz-btn {
                display: block;
                position: fixed;
                z-index: 150;
                background-color: #FF8C00;
                border: none;
                border-radius: 6px;
                color: #ffffff;
                font-size: 14px;
                font-weight: bold;
                padding: 10px 15px;
                cursor: pointer;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
                transition: all 0.3s;
            }
            #take-quiz-btn:hover {
                background-color: #FF6500;
                transform: scale(1.05);
            }
            body.quiz-active #take-quiz-btn {
                display: none;
            }
        }

        /* Hide all UI chrome (buttons, widgets, search, flag panel, dev tools)
           while the Quiz Complete celebration is showing, so only the globe,
           any active animation, and the celebration card remain visible. */
        body.celebration-active #zoom-out-btn,
        body.celebration-active #take-quiz-btn,
        body.celebration-active #bounce-btn,
        body.celebration-active #shatter-btn,
        body.celebration-active #pinball-btn,
        body.celebration-active #settings-toggle,
        body.celebration-active #settings-panel,
        body.celebration-active #edit-mode-btn,
        body.celebration-active #save-config-btn,
        body.celebration-active #fine-tune-btn,
        body.celebration-active #edit-colors-btn,
        body.celebration-active #save-colors-btn,
        body.celebration-active #swatch-panel,
        body.celebration-active #edit-zoom-btn,
        body.celebration-active #save-zoom-btn,
        body.celebration-active #level-panel,
        body.celebration-active #zoom-widget,
        body.celebration-active #flag-container,
        body.celebration-active #search-container,
        body.celebration-active #seo-content,
        body.celebration-active #controls,
        body.celebration-active #info-area {
            display: none !important;
        }

        /* Bounce + Shatter + Pinball — experimental animation triggers. These
           base rules are the fallback; once relocated into the settings panel
           their layout is normalized by the #settings-panel rules above. */
        #bounce-btn,
        #shatter-btn,
        #pinball-btn {
            position: fixed;
            right: 20px;
            z-index: 150;
            border: none;
            border-radius: 6px;
            color: #ffffff;
            font-size: 14px;
            font-weight: bold;
            padding: 10px 15px;
            cursor: pointer;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
            transition: all 0.3s;
        }
        #bounce-btn  { top: 66px;  background-color: #9C27B0; }
        #shatter-btn { top: 111px; background-color: #FF5722; }
        #pinball-btn { top: 156px; background-color: #4CAF50; }
        #bounce-btn:hover  { background-color: #7B1FA2; transform: scale(1.05); }
        #shatter-btn:hover { background-color: #D84315; transform: scale(1.05); }
        #pinball-btn:hover { background-color: #388E3C; transform: scale(1.05); }

        body.quiz-active #bounce-btn,
        body.quiz-active #shatter-btn,
        body.quiz-active #pinball-btn,
        body.celebration-active #bounce-btn,
        body.celebration-active #shatter-btn,
        body.celebration-active #pinball-btn {
            display: none !important;
        }

        @media (max-width: 768px) {
            #take-quiz-btn {
                top: 10px !important;
                left: 10px !important;
            }
            /* Mobile fallbacks (overridden when stacked inside the settings panel). */
            #bounce-btn  { top: 48px;  right: 10px; }
            #shatter-btn { top: 90px;  right: 10px; }
            #pinball-btn { top: 132px; right: 10px; }
        }

/* ===========================================================================
   Country map view — full-screen 2D MapLibre map of a single country.
   Driven entirely by `body.map-mode`: adding the class shows the map view and
   hides the globe canvas + chrome; removing it returns to the globe. DOM is
   created at runtime by js/features/country-map.js.
   =========================================================================== */
#country-map-view {
    position: fixed;
    inset: 0;
    z-index: 500;
    display: none;
    background: #0a0a12;
}
body.map-mode #country-map-view { display: block; }

/* Hide the globe and its chrome while the 2D map is open. */
body.map-mode #globe-canvas,
body.map-mode #zoom-widget,
body.map-mode #search-container,
body.map-mode #flag-container,
body.map-mode #controls,
body.map-mode #take-quiz-btn,
body.map-mode #settings-toggle,
body.map-mode #settings-panel,
body.map-mode #bounce-btn,
body.map-mode #shatter-btn,
body.map-mode #pinball-btn {
    display: none !important;
}

#country-map-canvas { position: absolute; inset: 0; }

#country-map-back {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 510;
    padding: 9px 14px;
    border: none;
    border-radius: 8px;
    background: rgba(20, 24, 32, 0.92);
    color: #dfe6f0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
#country-map-back:hover { background: rgba(40, 48, 64, 0.95); }

#country-map-title {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 510;
    padding: 8px 16px;
    border-radius: 8px;
    background: rgba(20, 24, 32, 0.85);
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: bold;
    pointer-events: none;
    max-width: calc(100vw - 320px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#country-map-toggles {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 510;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(20, 24, 32, 0.9);
    color: #dfe6f0;
    font-family: Arial, sans-serif;
    font-size: 13px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
}
#country-map-toggles:empty { display: none; }
.cm-toggle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}
.cm-toggle input { cursor: pointer; margin: 0; }

/* "View 2D Map" button appended into the country info panel. The panel itself
   is pointer-events:none (passive display), so the button must opt back in. */
#view-map-btn {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 9px 12px;
    border: none;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto;
}
#view-map-btn:hover { background: #1d4ed8; }

/* Capital city marker (DOM marker, style-independent). The dot is anchored on
   the point; the label is absolutely positioned beside it so it can flip to the
   left side near the right screen edge without moving the dot. */
.cm-capital {
    position: relative;
    width: 11px;
    height: 11px;
    pointer-events: none;
}
.cm-capital-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #e23b3b;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.cm-capital-label {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: Arial, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 1px 2px #000, 0 0 3px #000;
}
/* Near the right edge: label sits to the LEFT of the dot. */
.cm-capital.flip .cm-capital-label {
    left: auto;
    right: 15px;
    text-align: right;
}
/* Quiz "capital of X?" — large "?" in place of the city name. */
.cm-capital-label.cm-capital-q {
    font-size: 30px;
    left: 18px;
}
.cm-capital.flip .cm-capital-label.cm-capital-q { left: auto; right: 18px; }

/* Hide the map title pill when empty (quiz hides the country name). */
#country-map-title:empty { display: none; }

/* Capital-quiz over the 2D map: hide the map's own chrome (the quiz has its own
   cancel/next), and raise the quiz panel above the full-screen map, clear of the
   bottom-right attribution. */
body.map-quiz #country-map-back,
body.map-quiz #country-map-toggles,
body.map-quiz .maplibregl-ctrl-top-right { display: none !important; }
body.map-quiz #quiz-container { z-index: 600; left: 20px; right: auto; }
body.map-quiz #quiz-cancel-btn { z-index: 601; }

/* ===========================================================================
   Settings panel — the ⚙ gear (top-right) and its slide-in panel. Built at
   runtime by js/features/settings-panel.js. Hosts the color-scheme picker,
   border toggle, lighting, auto-rotate, 2D-map defaults, and the relocated
   developer/editing buttons. Replaces the old ✎ dev-edit toggle + light panel.
   =========================================================================== */
#settings-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    z-index: 350;
    background-color: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: background-color 0.2s, transform 0.2s;
}
#settings-toggle:hover { background-color: rgba(0, 0, 0, 0.85); transform: scale(1.06); }
#settings-toggle.active { background-color: rgba(76, 175, 80, 0.85); border-color: #4CAF50; }

#settings-panel {
    position: fixed;
    top: 70px;
    right: 20px;
    width: 300px;
    max-width: calc(100vw - 32px);
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    z-index: 349;
    box-sizing: border-box;
    padding: 14px 16px 18px;
    background: rgba(18, 22, 30, 0.96);
    border: 1px solid rgba(120, 150, 190, 0.35);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6);
    color: #dfe6f0;
    font-family: Arial, sans-serif;
    font-size: 13px;
}
#settings-panel.hidden { display: none; }

.settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
}
.settings-close {
    background: transparent;
    border: none;
    color: #9fb6d4;
    font-size: 16px;
    cursor: pointer;
    padding: 2px 6px;
}
.settings-close:hover { color: #ffffff; }

.settings-section {
    border-top: 1px solid rgba(120, 150, 190, 0.2);
    padding-top: 10px;
    margin-top: 10px;
}
.settings-section h3 {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9fb6d4;
}
.settings-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.settings-label { flex: 0 0 84px; color: #c3cfe0; }
.settings-row input[type="range"] { flex: 1 1 90px; min-width: 80px; }
.settings-value { flex: 0 0 38px; text-align: right; color: #9fb6d4; font-variant-numeric: tabular-nums; }
.settings-note { margin: 0 0 8px; font-size: 11px; color: #8a98ac; }

.settings-check { display: flex; align-items: center; gap: 6px; cursor: pointer; color: #c3cfe0; }
.settings-check input { cursor: pointer; }

.settings-segmented { display: flex; flex-wrap: wrap; gap: 4px; flex: 1 1 100%; }
.settings-seg-btn {
    flex: 1 1 auto;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(120, 150, 190, 0.3);
    border-radius: 6px;
    color: #dfe6f0;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.settings-seg-btn:hover { background: rgba(255, 255, 255, 0.12); }
.settings-seg-btn.active { background: rgba(76, 175, 80, 0.35); border-color: #4CAF50; color: #fff; }

.settings-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.4);
    padding: 0;
    cursor: pointer;
}
.settings-swatch:hover { border-color: #fff; transform: scale(1.1); }

.settings-btn {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(120, 150, 190, 0.3);
    border-radius: 6px;
    color: #dfe6f0;
    font-size: 12px;
    cursor: pointer;
}
.settings-btn:hover { background: rgba(255, 255, 255, 0.16); }

.settings-dev-tools { display: flex; flex-direction: column; gap: 6px; }

/* Country search, relocated to the top of the panel (under the header). Strip
   the standalone fixed-overlay framing so it sits in the panel flow. */
#settings-panel #search-container {
    display: block;
    position: static;
    top: auto;
    left: auto;
    transform: none;
    z-index: auto;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0 0 4px;
    border: none;
    box-shadow: none;
    background: transparent;
}
#settings-panel #search-box { margin-bottom: 8px; }
#settings-panel #country-search { font-size: 14px; }
#settings-panel #search-results { max-height: 240px; }

/* Keep the gear + panel clear of the (sometimes fullscreen) quiz UI. */
body.quiz-active #settings-toggle,
body.quiz-active #settings-panel,
body.flag-quiz-active #settings-toggle,
body.flag-quiz-active #settings-panel {
    display: none !important;
}

/* ============================================================
   Daily Challenge (backend-driven daily quiz + leaderboard)
   Mobile-first: the panel is a bottom sheet; the globe shows
   above it (map questions push the focus up via setViewOffset).
   ============================================================ */

/* Invite: message + launch button, centered under the globe. Fades in after the
   intro overlay is dismissed (.dq-invite-show). The container is click-through
   so dragging the globe over the message still rotates it; only the button is
   interactive (and only while shown). */
#dq-invite {
    position: fixed;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    z-index: 160;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
    max-width: 90vw;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}
#dq-invite.dq-invite-show { opacity: 1; }
#dq-invite.dq-invite-show #dq-launch { pointer-events: auto; }
.dq-invite-msg {
    color: #eaf2ff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    max-width: 22em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

#dq-launch {
    background: linear-gradient(135deg, #6a5cff, #9b4dff);
    color: #fff;
    border: none;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 700;
    padding: 12px 22px;
    cursor: pointer;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
}
#dq-launch:hover { filter: brightness(1.08); }
#dq-launch:disabled { opacity: 0.6; cursor: default; }

/* "Maybe Later": a subtle, secondary text button under the launch button. */
#dq-maybe-later {
    background: none;
    border: none;
    color: #aeb9cc;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 6px;
    cursor: pointer;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
#dq-maybe-later:hover { color: #eaf2ff; }

/* Docked: pinned top-left, directly under the Take Quiz button (top:20px, ~38px
   tall). Message + Maybe Later hide; the launch button shrinks to match Take Quiz. */
#dq-invite.dq-docked {
    left: 20px;
    top: 68px;
    bottom: auto;
    transform: none;
    align-items: flex-start;
    max-width: none;
}
#dq-invite.dq-docked .dq-invite-msg,
#dq-invite.dq-docked #dq-maybe-later { display: none; }
#dq-invite.dq-docked #dq-launch { font-size: 14px; padding: 10px 15px; }

body.dq-active #dq-invite { display: none; }

#dq-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 300;
    background: rgba(14, 23, 38, 0.97);
    color: #e6edf6;
    border-top: 1px solid #25324a;
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.45);
    padding: 10px 14px 18px;
    max-height: 62vh;
    overflow-y: auto;
    font-family: system-ui, sans-serif;
}

.dq-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #25324a;
    margin-bottom: 10px;
}
.dq-counter { color: #9fb0c8; font-size: 13px; }
.dq-score { margin-left: auto; font-weight: 700; font-size: 14px; }
.dq-close {
    background: none;
    border: none;
    color: #9fb0c8;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
}
.dq-close:hover { color: #fff; }

.dq-flag {
    display: block;
    margin: 0 auto 10px;
    max-width: 180px;
    width: 50%;
    border-radius: 4px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.dq-prompt {
    font-size: 17px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
    line-height: 1.3;
}

.dq-grid-wrap { display: flex; flex-direction: column; gap: 10px; }
.dq-grid { display: grid; gap: 8px; }
.dq-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1b2942;
    border: 2px solid transparent;
    border-radius: 8px;
    color: #e6edf6;
    padding: 9px 10px;
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.dq-cell:hover { background: #233354; }
.dq-cell.selected { border-color: #6a8cff; background: #243a63; }
.dq-cell-flag { width: 26px; height: auto; border-radius: 2px; flex: 0 0 auto; }
.dq-cell-label { flex: 1 1 auto; }

.dq-cell.reveal-dim { cursor: default; }
.dq-cell.reveal-right { border-color: #33dd66; background: #18402a; }
.dq-cell.reveal-wrong { border-color: #ff5a5a; background: #41201f; }
.dq-cell.reveal-missed { border-color: #f0b429; background: #3d3415; }

.dq-submit, .dq-next {
    align-self: center;
    background: #6a5cff;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 22px;
    cursor: pointer;
    margin-top: 4px;
}
.dq-submit:disabled { opacity: 0.5; cursor: default; }
.dq-next:hover, .dq-submit:hover:not(:disabled) { filter: brightness(1.1); }

/* Feedback + Next reserve their space up front (height is held whether or not
   they're populated) so revealing the result doesn't shift the panel. */
.dq-feedback {
    text-align: center;
    font-size: 14px;
    line-height: 1.35;
    min-height: 2.7em;      /* ~2 lines — fits "Correct!" and the answer readout */
    margin: 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dq-feedback.correct { color: #45e07a; }
.dq-feedback.wrong { color: #ff8a8a; }
.dq-next-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;       /* reserve the Next/See-results button row */
}
.dq-message { text-align: center; color: #9fb0c8; padding: 8px 0; }

/* Leaderboard */
.dq-lb-heading { font-weight: 700; text-align: center; margin-bottom: 8px; }
.dq-lb-table { width: 100%; border-collapse: collapse; }
.dq-lb-table th, .dq-lb-table td {
    text-align: left;
    padding: 6px 8px;
    border-bottom: 1px solid #25324a;
    font-size: 14px;
}
.dq-lb-table th { color: #9fb0c8; font-weight: 600; }
.dq-lb-you { background: rgba(106, 92, 255, 0.18); font-weight: 700; }
.dq-lb-empty { text-align: center; color: #9fb0c8; }
.dq-lb-yourrow { text-align: center; margin-top: 10px; color: #c7d2e6; font-weight: 600; }

/* Onboarding modal */
.dq-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.dq-modal {
    background: #14223a;
    color: #e6edf6;
    border: 1px solid #25324a;
    border-radius: 12px;
    padding: 22px;
    width: 100%;
    max-width: 360px;
    font-family: system-ui, sans-serif;
}
.dq-modal-title { margin: 0 0 4px; font-size: 20px; }
.dq-modal-sub { margin: 0 0 16px; color: #9fb0c8; font-size: 13px; }
.dq-field { display: block; margin-bottom: 14px; }
.dq-field span { display: block; font-size: 13px; color: #9fb0c8; margin-bottom: 5px; }
.dq-field input, .dq-field select {
    width: 100%;
    box-sizing: border-box;
    background: #0e1726;
    border: 1px solid #25324a;
    border-radius: 7px;
    color: #e6edf6;
    padding: 9px 10px;
    font-size: 15px;
}
.dq-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.dq-btn-primary {
    background: #6a5cff; color: #fff; border: none; border-radius: 7px;
    padding: 9px 18px; font-weight: 700; cursor: pointer;
}
.dq-btn-secondary {
    background: transparent; color: #9fb0c8; border: 1px solid #25324a;
    border-radius: 7px; padding: 9px 16px; cursor: pointer;
}
.dq-modal-err { color: #ff8a8a; font-size: 13px; margin: 8px 0 0; }

/* Desktop: float the panel as a right-hand card rather than a full bottom sheet. */
@media (min-width: 760px) {
    #dq-panel {
        left: auto;
        right: 16px;
        bottom: 16px;
        width: 380px;
        max-height: 82vh;
        border-radius: 14px;
        border: 1px solid #25324a;
    }
}

/* Hide the launch button while any legacy quiz is fullscreen. */
body.flag-quiz-active #dq-invite,
body.quiz-active #dq-invite { display: none; }