/* Basic styles for the overlay */
    .NumberConnect-game-over-overlay,
    .NumberConnect-start-overlay { /* Added start overlay class */
      position: fixed; inset: 0; /* Cover screen */
      background-color: rgba(0, 0, 0, 0.6); /* Slightly less opaque */
      display: flex; justify-content: center; align-items: center;
      z-index: 50; padding: 1rem; /* Padding around the content box */
      /* Initial state */
      display: none; /* Hidden by default, managed by JS */
    }

    /* Dark mode overlay background */
    .dark .NumberConnect-game-over-overlay,
    .dark .NumberConnect-start-overlay { /* Added start overlay class */
        background-color: rgba(30, 41, 59, 0.8); /* bg-slate-800 with opacity */
    }

    .NumberConnect-game-over-content,
    .NumberConnect-start-content { /* Added start content class */
      background-color: white; /* Light mode background */
      padding: 1.5rem; /* Adjusted padding */
      border-radius: 0.75rem; /* Slightly larger rounding (rounded-xl) */
      text-align: center;
      width: 100%; /* Full width on small screens */
      max-width: 450px; /* Max width for larger screens */
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
      /* Add transition for smoother appearance */
      transition: background-color 0.3s, color 0.3s;
    }
    /* Dark mode summary box */
    .dark .NumberConnect-game-over-content,
     .dark .NumberConnect-start-content { /* Added start content class */
        background-color: #1f2937; /* bg-gray-800 */
        color: #d1d5db; /* text-gray-300 */
        border: 1px solid #374151; /* Optional border for dark mode */
    }
    .dark .NumberConnect-game-over-content h2,
    .dark .NumberConnect-start-content h2 { /* Added start content class */
        color: #f9fafb; /* text-gray-50 */
    }
     .dark .NumberConnect-game-over-content p, .dark .NumberConnect-game-over-content ul,
     .dark .NumberConnect-start-content p { /* Added start content class */
        color: #d1d5db; /* text-gray-300 */
    }
    /* Style summary list for better readability */
    .NumberConnect-game-over-content ul {
        text-align: left; /* Align list items left */
        list-style-position: inside; /* Bullets inside */
        margin-top: 1rem; /* Space above list */
        margin-bottom: 1.5rem; /* Space below list */
        max-height: 150px; /* Limit height and allow scroll */
        overflow-y: auto; /* Enable vertical scroll if needed */
        padding-left: 0.5rem; /* Indent list slightly */
    }
     .dark .NumberConnect-game-over-content ul {
         color: #cbd5e1; /* Slightly lighter text for list in dark mode */
     }
     .NumberConnect-game-over-content ul li {
        margin-bottom: 0.25rem; /* Space between list items */
     }

    /* Style summary stats paragraph */
     .NumberConnect-game-over-content p#NumberConnect-summary-stats {
        text-align: center; /* Center align stats */
        line-height: 1.6; /* Improve line spacing */
        margin-bottom: 1rem; /* Space below stats */
     }


    .NumberConnect-game-over-button,
    .NumberConnect-start-button { /* Added start button class */
        display: inline-block; background-color: #3b82f6; /* blue-500 */ color: white;
        padding: 0.6rem 1.5rem; /* Slightly larger padding */
        border-radius: 0.5rem; /* rounded-lg */
        margin-top: 1rem; /* Space above button */
        cursor: pointer; transition: background-color 0.2s, transform 0.1s;
        font-weight: 500; /* medium */
        text-transform: uppercase; /* Uppercase text */
        letter-spacing: 0.05em; /* Slight letter spacing */
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
    }
    .NumberConnect-game-over-button:hover,
    .NumberConnect-start-button:hover { /* Added start button class */
        background-color: #2563eb; /* blue-600 */
    }
     .NumberConnect-game-over-button:active,
     .NumberConnect-start-button:active { /* Added start button class */
        transform: scale(0.98); /* Slight shrink on click */
     }
    /* Dark mode summary button */
    .dark .NumberConnect-game-over-button,
    .dark .NumberConnect-start-button { /* Added start button class */
        background-color: #60a5fa; /* bg-blue-400 */
        color: #1f2937; /* text-gray-800 */
    }
     .dark .NumberConnect-game-over-button:hover,
     .dark .NumberConnect-start-button:hover { /* Added start button class */
        background-color: #3b82f6; /* bg-blue-500 */
     }


    /* Game container and circles */
    #NumberConnect-gameContainer {
        min-height: 400px;
        touch-action: none;
        filter: blur(0); /* Default state, no blur */
         transition: filter 0.3s ease-out; /* Smooth transition for blur */
    }

    /* Apply blur when the start overlay is active */
    body:has(.NumberConnect-start-overlay:not([style*="display: none"])) #NumberConnect-gameContainer {
      filter: blur(5px); /* Adjust blur amount as needed */
    }


    .NumberConnect-circle {
        width: 60px; height: 60px; font-size: 1.125rem; font-weight: 600;
        user-select: none;
        transition: background-color 0.2s, color 0.2s, border-color 0.2s;
    }
    .dark .NumberConnect-circle {}
    .NumberConnect-circle.selected {
        background-color: #3b82f6; border-color: #1d4ed8; color: white;
    }
    .dark .NumberConnect-circle.selected {
        background-color: #60a5fa; border-color: #93c5fd; color: #111827;
    }


    /* Line layer */
    #NumberConnect-lineLayer line {
        stroke: #4b5563; stroke-width: 3; stroke-linecap: round;
    }
    .dark #NumberConnect-lineLayer line {
        stroke: #9ca3af;
    }

    /* Audio controls */
    #NumberConnect-audio-controls label {
        display: flex; align-items: center; gap: 0.25rem; cursor: pointer;
    }
    #NumberConnect-audio-controls select {
        padding: 0.25rem 0.5rem; border: 1px solid #d1d5db;
        border-radius: 0.375rem; background-color: white; cursor: pointer;
        min-width: 80px; color: #1f2937;
    }
    .dark #NumberConnect-audio-controls select {
        background-color: #374151; border-color: #4b5563; color: #f3f4f6;
    }
    #NumberConnect-audio-controls button, #NumberConnect-restartBtn, #NumberConnect-themeToggleBtn {
        padding: 0.5rem; border-radius: 0.375rem;
        background-color: #e5e7eb;
        transition: background-color 0.2s; cursor: pointer;
        min-width: 40px; display: flex; justify-content: center; align-items: center;
        color: #374151;
    }
    #NumberConnect-audio-controls button:hover, #NumberConnect-restartBtn:hover, #NumberConnect-themeToggleBtn:hover {
        background-color: #d1d5db;
    }
    .dark #NumberConnect-audio-controls button, .dark #NumberConnect-restartBtn, .dark #NumberConnect-themeToggleBtn {
        background-color: #4b5563; color: #e5e7eb;
    }
     .dark #NumberConnect-audio-controls button:hover, .dark #NumberConnect-restartBtn:hover, .dark #NumberConnect-themeToggleBtn:hover {
        background-color: #374151;
    }
    #NumberConnect-restartBtn {
        background-color: #3b82f6; color: white; padding: 0.5rem 1rem;
    }
     #NumberConnect-restartBtn:hover { background-color: #2563eb; }
     .dark #NumberConnect-restartBtn {
        background-color: #60a5fa; color: #1f2937;
     }
      .dark #NumberConnect-restartBtn:hover { background-color: #3b82f6; }


    /* Volume slider */
    #NumberConnect-volumeSlider {
        cursor: pointer; height: 0.5rem; background-color: #d1d5db;
        border-radius: 9999px; appearance: none; width: 100%; max-width: 100px;
    }
    .dark #NumberConnect-volumeSlider { background-color: #4b5563; }

    #NumberConnect-volumeSlider::-webkit-slider-thumb {
        appearance: none; width: 1rem; height: 1rem;
        background-color: #3b82f6; border-radius: 9999px; cursor: pointer;
    }
    #NumberConnect-volumeSlider::-moz-range-thumb {
        width: 1rem; height: 1rem; background-color: #3b82f6;
        border-radius: 9999px; cursor: pointer; border: none;
    }
     .dark #NumberConnect-volumeSlider::-webkit-slider-thumb { background-color: #60a5fa; }
     .dark #NumberConnect-volumeSlider::-moz-range-thumb { background-color: #60a5fa; }

     /* Icon size */
     .material-symbols-outlined {
        font-size: 1.25rem; vertical-align: middle;
        user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
     }



     /* Styles for the main summary overlay */
     /* These might already exist based on your HTML classes, but ensuring some base styles */
    /* --- General Overlay & Box Styles (Keep similar to before) --- */
    #NumberConnect-session-summary {
      position: fixed; top: 0; left: 0; width: 100%; height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      display: flex; justify-content: center; align-items: center;
      z-index: 1000;
      padding: 20px; box-sizing: border-box;
      /* overflow-y: auto; */
    }

    #NumberConnect-session-summary .NumberConnect-game-over-content {
        background-color: #fff;
        padding: 30px;
        border-radius: 8px;
        max-width: 600px;
        width: 100%;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        text-align: left;
        color: #333;
        max-height: 90vh;
        overflow-y: auto;
        /* Existing Tailwind classes remain */
    }

    /* --- Stats Section Styling (#NumberConnect-summary-stats) --- */
    #NumberConnect-summary-stats {
        /* Keep existing Tailwind classes like mb-4, text-left, etc. */
        margin-bottom: 20px; /* Add space below the stats block */
    }

    /* Style for the generated Description List (DL) */
    .summary-stats-dl {
        margin: 0;
        padding: 0;
        display: grid;
        /* Create two columns: auto for the label (dt), 1fr for the value (dd) */
        grid-template-columns: auto 1fr;
        /* Adjust gap between rows and columns */
        gap: 8px 15px;
        font-size: 1em;
    }

    /* Style for description terms (Labels like "Puzzles Played:") */
    .summary-stats-dl dt {
        font-weight: bold;
        color: #555;
        /* Align labels to the right to line up nicely with values */
        text-align: right;
        padding-right: 10px; /* Space between label and value */
    }

    /* Style for description details (Values like "1", "0", "0.0") */
    .summary-stats-dl dd {
        margin-left: 0; /* Remove default margin */
        text-align: left; /* Align values to the left */
        /* color: #333; */
    }


    /* --- Puzzle Results List Styling (#NumberConnect-summary-list) --- */
    /* Keep existing Tailwind classes like list-disc, list-inside, space-y-1, text-sm, text-gray-600, mb-6, max-h-60, overflow-y-auto */
    #NumberConnect-summary-list {
         margin-bottom: 20px; /* Add space below the list */
    }

    /* Style for individual list items (li) */
    #NumberConnect-summary-list li {
        /* Keep existing Tailwind classes */
        border: 1px solid #eee; /* Light border */
        border-radius: 4px;
        /* Reduced border left width */
        border-left-width: 4px; /* Or 3px, adjust as needed */
        border-left-style: solid; /* Ensure border style is set */
        padding: 10px 15px; /* Padding inside list item */
        margin-bottom: 8px; /* Space between list items */
        background-color: #f9f9f9; /* Light background */

        /* Flexbox for layout of spans */
        display: flex;
        flex-wrap: wrap; /* Allow wrapping */
        justify-content: space-between; /* Distribute space */
        align-items: center; /* Vertically center content */
    }

    /* Optional: Hover effect on list items */
    #NumberConnect-summary-list li:hover {
        background-color: #f0f0f0;
    }

    /* Styling based on puzzle result (uses the new classes added by JS) */
    #NumberConnect-summary-list li.puzzle-win {
        border-color: #28a745; /* Green border color */
        /* color: #333; Ensure text is readable */
    }

    #NumberConnect-summary-list li.puzzle-loss {
        border-color: #dc3545; /* Red border color */
        /* color: #333; Ensure text is readable */
    }

    /* Style for spans within list items (uses the new classes added by JS) */
    #NumberConnect-summary-list li span {
        margin-right: 15px; /* Increased space between spans */
        /* Consider adding flex-basis if you want more control over wrapping on smaller screens */
        /* flex-basis: auto; */
    }

    #NumberConnect-summary-list li span:last-child {
        margin-right: 0; /* No margin on the last span */
    }

    /* Specific span styles */
    .puzzle-number {
        font-weight: bold;
        color: #0056b3; /* Distinct color */
    }

    .puzzle-result {
        font-weight: bold;
        /* Color can be inherited from li.puzzle-win/loss or set here if preferred */
    }

    .puzzle-xp {
        color: #28a745; /* Green for XP */
        font-weight: bold;
    }

    .puzzle-time {
        font-style: italic;
        color: #555;
        white-space: nowrap; /* Prevent time from breaking onto a new line */
    }

    /* --- Restart Button Style --- */
    /* Ensure space above the button */
    #NumberConnect-session-restart-button {
        margin-top: 25px; /* Add space above the button */
        /* Existing .NumberConnect-game-over-button styles will apply */
    }


    /* --- Basic Responsiveness (Adjust breakpoints as needed) --- */
    @media (max-width: 500px) { /* Adjusted breakpoint slightly */
      #NumberConnect-session-summary .NumberConnect-game-over-content {
        padding: 15px; /* Reduce padding on small screens */
      }

      /* Stack stats on smaller screens */
      .summary-stats-dl {
          grid-template-columns: 1fr; /* Stack dt and dd */
          gap: 5px; /* Reduce gap */
      }

      .summary-stats-dl dt {
          text-align: left; /* Align labels left when stacked */
          padding-right: 0;
      }

      /* Stack list item spans vertically on smaller screens */
      #NumberConnect-summary-list li {
          flex-direction: column;
          align-items: flex-start;
      }

      #NumberConnect-summary-list li span {
          margin-right: 0;
          margin-bottom: 4px; /* Add vertical space between stacked spans */
      }
    }