/* Styles for the top-left menu (copied from index.html) */
      .top-right-menu {
        position: absolute;
        top: 20px; /* Adjust distance from the top */
        right: 20px; /* Adjust distance from the right */
        background-color: #ffffff;
        padding: 15px 20px;
        border: 2px solid #007bff; /* Prominent blue border */
        border-radius: 5px;
        z-index: 1000;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Subtle shadow for better visibility */
      }

      .top-right-menu ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
      }

      .top-right-menu ul li {
        margin-bottom: 8px;
      }

      .top-right-menu ul li:last-child {
        margin-bottom: 0;
      }

      .top-right-menu ul li a {
        text-decoration: none;
        color: #007bff;
        font-weight: bold;
        display: block;
      }

      .top-right-menu ul li a:hover {
        text-decoration: underline;
        color: #0056b3;
      }
      /* Auth Links Styles */
      #auth-container {
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid #eee;
        font-size: 0.9em;
        text-align: center;
      }
      #auth-container a {
        font-weight: normal;
      }
      .user-session span {
        margin-right: 10px;
        font-weight: bold;
      }
      #logout-btn {
        background-color: #dc3545; color: white; border: none;
        padding: 4px 8px; border-radius: 3px; cursor: pointer;
        font-size: 0.9em;
      }
      #logout-btn:hover { background-color: #c82333; }

      /* General body styles (adapted from index.html) */
      body {
        font-family: Arial, sans-serif;
        font-size: 14px;
        color: #333; /* Default text color for content */
        background-color: #fff; /* Default background */
        margin: 0;
        padding: 0;
      }

      .page-container {
        max-width: 900px;
        margin: 20px auto;
        padding: 20px;
        padding-top: 80px; /* Space for the absolute positioned menu */
      }

      .page-container h1 {
        color: #33342D;
        font-size: 250%;
        margin-top: 0;
        text-align: center;
        margin-bottom: 30px;
      }

      .language-switcher {
        text-align: center;
        margin-top: 15px; /* Consistent margin */
        margin-bottom: 20px;
      }
      .language-switcher button {
        background-color: transparent;
        border: none;
        padding: 0;
        margin: 0 5px;
        cursor: pointer;
        border-radius: 5px; /* Rounded corners for the button/outline */
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
        outline: 2px solid transparent; /* For focus and active state */
        outline-offset: 2px;
      }
      .language-switcher button:hover {
        transform: scale(1.1); /* Enlarge on hover */
      }
      .language-switcher button.active {
        outline-color: #007bff; /* Highlight active language */
        box-shadow: 0 0 8px rgba(0, 123, 255, 0.6); /* Add a glow */
      }
      .lang-flag {
        width: 36px; /* Larger flag */
        height: auto;
        border: 1px solid #ddd;
        border-radius: 4px; /* Rounded corners for the flag image */
        display: block; /* Remove extra space below image */
      }
      
      .sport-tags-container {
        text-align: center;
        margin-bottom: 25px;
        padding-top: 10px; /* Add some space if menu is close */
      }
      .sport-tag {
        background-color: #e9ecef;
        color: #495057;
        border: 1px solid #ced4da;
        padding: 8px 15px;
        margin: 0 5px 10px 5px; /* Added bottom margin for wrapping */
        border-radius: 20px; /* More rounded */
        cursor: pointer;
        font-size: 0.9em;
        transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        display: inline-block; /* Allow wrapping */
      }
      .sport-tag:hover, .sport-tag.active {
        background-color: #007bff;
        color: white;
        border-color: #0056b3;
      }

      .data-disclaimer {
        background-color: #fff3cd;
        color: #856404;
        padding: 15px;
        margin-bottom: 30px;
        border: 1px solid #ffeeba;
        border-radius: 5px;
        text-align: center;
      }

      .event-section {
        margin-bottom: 30px;
        background-color: #f9f9f9;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }

      .event-section h2 {
        color: #007bff;
        border-bottom: 2px solid #007bff;
        padding-bottom: 10px;
        margin-top: 0;
        font-size: 180%;
      }

      .event-list {
        list-style-type: none;
        padding-left: 0;
      }

      .event-item {
        background-color: #fff;
        border: 1px solid #eee;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 5px;
      }

      .event-item h3 {
        margin-top: 0;
        color: #33342D;
        font-size: 130%;
      }

      .hot-icon {
        margin-left: 8px;
        font-size: 1em; /* Keep it relative to the parent h3 size */
        vertical-align: baseline;
        cursor: default; /* It's an indicator, not a button */
      }

      .event-item p {
        margin-bottom: 8px;
        line-height: 1.6;
        color: #555;
      }

      .event-item strong {
        color: #333;
      }
       a {
        color: #007bff;
        text-decoration: none;
      }
      a:hover {
        color: #0056b3;
        text-decoration: underline;
      }

      .highlight-percentage {
        font-weight: bold;
        color: #28a745; /* A green color for emphasis (Bootstrap success green) */
      }
      .predictions-container {
        margin-top: 15px;
        padding-left: 10px;
      }
      .vote-container {
        margin-top: 20px;
        padding-top: 15px;
        border-top: 1px solid #eee;
        display: flex;
        align-items: center;
        gap: 10px; /* Space between items */
      }
      .vote-btn {
        background-color: transparent;
        border: 1px solid #ccc;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.2s, transform 0.2s;
      }
      .vote-btn:hover:not(:disabled) {
        background-color: #f0f0f0;
        transform: scale(1.1);
      }
      .vote-btn.voted {
        background-color: #cce5ff; /* A light blue to indicate it has been voted */
        border-color: #007bff;
      }
      .vote-btn:disabled {
        cursor: not-allowed;
        opacity: 0.6;
      }
      .retract-vote-btn {
        background-color: #6c757d; /* A neutral grey */
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 4px;
        cursor: pointer;
        font-size: 0.9em;
        transition: background-color 0.2s;
      }
      .retract-vote-btn:hover {
        background-color: #5a6268;
      }
      .like-count, .dislike-count {
        font-weight: bold;
        font-size: 1.1em;
        min-width: 25px; /* To prevent layout shift when numbers change */
      }
      .countdown-timer {
        font-weight: bold;
        color: #c82333; /* A red color to indicate urgency */
        background-color: #f8f9fa;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: 'Courier New', Courier, monospace;
        margin-left: 5px;
      }
      .site-footer {
        margin-top: 3em;
        margin-bottom: 2em;
        padding: 1em;
        font-size: 0.9em;
        color: #555; /* A mid-dark grey for footer text */
        text-align: center;
      }
      .site-footer a {
        color: #007bff; /* Use the primary link color */
        text-decoration: none;
        margin: 0 10px; /* Space between links */
      }
      .site-footer a:hover {
        text-decoration: underline;
      }

      /* --- Comments Section Styles --- */
      .comments-toggle-btn {
          background-color: #f0f0f0;
          border: 1px solid #ddd;
          padding: 6px 12px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 0.9em;
          margin-left: 15px;
          transition: background-color 0.2s;
      }
      .comments-toggle-btn:hover {
          background-color: #e0e0e0;
      }
      .comments-section {
          display: none; /* Hidden by default */
          margin-top: 20px;
          padding: 15px;
          background-color: #fdfdfd;
          border-top: 1px solid #eee;
      }
      .comments-section h4 {
          margin-top: 0;
          color: #555;
          border-bottom: 1px solid #eee;
          padding-bottom: 8px;
      }
      .comments-list {
          list-style-type: none;
          padding: 0;
          max-height: 300px;
          overflow-y: auto;
          margin-bottom: 20px;
      }
      .comment-item {
          padding: 10px;
          border-bottom: 1px solid #f0f0f0;
      }
      .comment-item:last-child {
          border-bottom: none;
      }
      .comment-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 5px;
      }
      .comment-author {
          font-weight: bold;
          color: #007bff;
      }
      .comment-date {
          font-size: 0.8em;
          color: #888;
      }
      .comment-text {
          color: #444;
          line-height: 1.5;
          word-wrap: break-word;
      }
      .comment-item .delete-comment-btn {
          background: none;
          border: none;
          color: #dc3545;
          cursor: pointer;
          padding: 0;
          margin-left: 5px;
          font-size: 0.8em;
      }
      .comment-item .delete-comment-btn:hover {
          color: #c82333;
      }
      .comment-form textarea {
          width: 100%;
          padding: 10px;
          border: 1px solid #ccc;
          border-radius: 4px;
          box-sizing: border-box;
          min-height: 80px;
          margin-bottom: 10px;
          resize: vertical;
      }
      .comment-form button {
          background-color: #28a745;
          color: white;
          border: none;
          padding: 8px 15px;
          border-radius: 4px;
          cursor: pointer;
          font-weight: bold;
      }
      .comment-form button:hover {
          background-color: #218838;
      }
      .login-prompt-comment {
          text-align: center;
          padding: 15px;
          background-color: #f8f9fa;
          border: 1px solid #dee2e6;
          border-radius: 4px;
          color: #495057;
      }
      .comment-item .comment-actions {
          margin-left: auto;
          display: flex;
          gap: 10px;
      }
      .comment-item .edit-comment-btn {
          background: none;
          border: none;
          color: #007bff;
          cursor: pointer;
          padding: 0;
          font-size: 0.8em;
      }
      .comment-item .edit-comment-btn:hover {
          color: #0056b3;
      }
      .comment-date-container {
          display: flex;
          align-items: center;
          gap: 5px;
      }
      .comment-edited-indicator {
          font-style: italic;
          font-size: 0.9em;
          color: #888;
      }
      .comment-edit-form {
          display: none; /* Hidden by default */
          margin-top: 10px;
      }
      .comment-edit-form textarea {
          width: 100%;
          box-sizing: border-box;
          min-height: 60px;
          margin-bottom: 5px;
          border: 1px solid #ccc;
          border-radius: 4px;
          padding: 8px;
      }
      .comment-edit-form .edit-form-actions button {
          margin-right: 5px;
          padding: 4px 8px;
          font-size: 0.9em;
          border-radius: 3px;
          cursor: pointer;
      }
      /* --- Loader/Spinner Style --- */
      .comments-list .loader {
          border: 4px solid #f3f3f3; /* Light grey */
          border-top: 4px solid #3498db; /* Blue */
          border-radius: 50%;
          width: 30px;
          height: 30px;
          animation: spin 1s linear infinite;
          margin: 20px auto;
      }
      @keyframes spin {
          0% { transform: rotate(0deg); }
          100% { transform: rotate(360deg); }
      }