/* 1) General page styling */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background: #f0f0f0;
  }
  
  /* 2) Header styling */
  header {
    background-color: #333;
    color: #fff;
    padding: 20px;
    text-align: center;
  }
  
  /* 3) Main container as a flex layout */
  .container {
    display: flex;             /* flex to split into two columns */
    justify-content: center;   /* center horizontally if narrower than max-width */
    align-items: flex-start;   /* top-align columns */
    gap: 2rem;                 /* space between columns */
    max-width: 1200px;         /* limit width for large screens */
    margin: 0 auto;            /* center in viewport */
    padding: 2rem;
    background: #fff;          /* white background for content area */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }
  
  /* 4) Left column: wheel and inputs */
  .wheel-section {
    flex: 1;                   /* take remaining space */
    display: flex;
    flex-direction: column;    /* stack items vertically (input, wheel, button, etc.) */
    align-items: center;       /* center child elements horizontally */
  }
  
  /* 4a) A small flex container for the input and game list side by side */
  .input-and-list {
    display: flex;
    flex-direction: row;       /* list on the left, input on the right */
    width: 100%;
    gap: 2rem;                 /* space between list and input */
    margin-bottom: 20px;
  }
  
  /* 4b) The game list panel */
  .games-list {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fafafa;
  
    /* Make sure the scrolling happens here */
    max-height: 200px;
    overflow-y: auto;
    position: relative;  /* helps sticky children behave consistently */
  }
  
  .games-list h2 {
    margin-top: 0;
    text-align: center;
  
    /* Sticky heading so it stays put while list scrolls */
    position: sticky;
    top: 0;
    z-index: 10;          /* ensure it's on top of the scrolling text */
    background: #fafafa;  /* same background color as .games-list */
    border-bottom: 1px solid #ccc;
    padding: 0.5rem 0;
  }

  /* The actual list of games */
  .games-list ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }
  
  .games-list li {
    margin: 5px 0;
    font-size: 16px;
  }
  
  /* 4c) The input area */
  .game-input {
    display: flex;
    flex-direction: column; 
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
  }
  
  .game-input input {
    width: 250px;
    padding: 8px;
    font-size: 16px;
    border-radius: 4px;
    border: 1px solid #ccc;
  }
  
  .game-input button {
    padding: 8px 16px;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    background-color: #2196F3;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .game-input button:hover {
    background-color: #1769aa;
  }
  
  /* 5) The wheel container & canvas */
  #wheelContainer {
    margin: 20px auto;
    width: 500px;
    height: 500px;
    position: relative;
  }
  
  #wheelCanvas {
    width: 100%;
    height: 100%;
    border: 2px solid #333;
    border-radius: 50%;
    background: #fafafa;
  }
  
  /* 6) Spin button styling */
  #spinButton {
    margin-top: 20px;
    padding: 12px 24px;
    cursor: pointer;
    background-color: #4CAF50;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 18px;
    transition: background-color 0.3s;
  }
  
  #spinButton:hover {
    background-color: #2e7d32;
  }
  
  /* 7) Right column: history section */
  .history-section {
    width: 300px;
    background: #fafafa;
    /* Remove top padding so the h2 can be flush at the very top */
    padding: 0 1rem 1rem; 
    border-left: 2px solid #ccc;
    box-sizing: border-box;
  
    max-height: 600px;
    overflow-y: auto;
    position: relative; /* allows position: sticky to work properly */
  }
  
  .history-section h2 {
    /* No margin, so it stays flush to the container top */
    margin: 0;
    text-align: center;
  
    /* Sticky heading so it remains visible at the top */
    position: sticky;
    top: 0;
  
    /* Ensure the heading has an opaque background 
       and is on top of scrolling content */
    background: #fafafa;
    z-index: 9999; /* or 10, but 9999 ensures it’s definitely on top */
  
    /* Add your own vertical padding to replace
       the container’s removed top padding */
    padding: 1rem 0;
  
    /* Divider line under heading */
    border-bottom: 1px solid #ccc;
  }  
  
  /* The scrollable list area in the history */
  .winners-history-list {
    margin-top: 10px;
    /* By default, it will share the scroll with .history-section if .history-section overflows. 
       If you want a sub-scroll specifically for winners-history-list, you can do something like:
         max-height: 500px;
         overflow-y: auto;
       But often the simpler approach is to let .history-section scroll entirely. */
  }
  
  /* Each winner line */
  .winners-history-list p {
    margin: 8px 0;
    font-size: 16px;
    padding: 0.25rem;
    border-bottom: 1px dotted #ccc;
  }
  
  /* 8) Additional niceties */
  .wheel-section > * {
    margin-bottom: 10px;
  }
  
  footer {
    background-color: #333; 
    color: #fff; 
    text-align: center; 
    padding: 20px;
    margin-top: 2rem; /* space above the footer */
    position: fixed;
    bottom: 0;
    width: 100%;
  }
  
  footer p {
    margin: 0;
    font-size: 14px;
  }