/* Scope styles to the container so they don't break the rest of your Bubble app */
    #container { 
        text-align: center;
        padding-bottom: 40px; /*unsure*/
    }
body {
  font-family: 'Roboto', sans-serif;
}
    ul { 
        padding: 0; /*unsure*/
        list-style: none; 
        display: block; 
        width: 400px; 
        margin: 0 auto 0px auto; /*unsure*/
        text-align: center; 
        /* Responsive width: 95% of screen, but cap it so it doesn't get huge */
         width: 95%;           
         max-width: 320px;     /* Set this slightly larger than your li max-width */
    }
    .group { 
        border: 1px dashed #aaa; 
        padding: 10px; 
        border-radius: 8px; 
        min-height: 150px;
    }
    .group.locked {
        border: 2px solid #2e7d32; /* Solid green border */
        background-color: #e8f5e9; /* Light green background */
        cursor: default;           /* Change cursor back to normal */
    }
    li { 
        /*min-height: 50px;*/
        width: 90%;
        padding: 10px; 
        border: 1px solid #ccc; 
        margin: 5px auto; 
        background: #f9f9f9; 
        cursor: move; 
        max-width: 300px; 
    }
    .dragging { opacity: 0.5; }
    #action-btn {
        display: block;
        margin: 0px auto;
        text-align: center;
        padding: 15px 30px;
        font-size: 16px;
        cursor: pointer;
        font-family: inherit;
    }
    #action-btn:disabled {
       background-color: #ccc;
        color: #666;
        cursor: not-allowed;
        border: none;
    }
    /* 3. Style when the button is ENABLED (Not disabled) */
#action-btn:not(:disabled) {
    background-color: #e8f5e9 !important; /* Green-ish background */
    color: #2e7d32 !important;            /* Green text */
    border: 2px solid #2e7d32 !important; /* Green border */
}
    .feedback {
        max-width: 300px;
        margin: 0 auto 15px auto; /*Center it*/
        min-height: 20px;
        margin-top: 5px;
        margin-bottom: 15px; /* Added so it doesn't touch the next group */
        font-weight: bold;
        font-size: 14px;
        text-align: center;
        /* Optional: helps ensure the text stays contained */
        word-wrap: break-word; 
        padding: 0 10px;
    }
    #drag-ghost {
    background: #f9f9f9;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 8px;
    /*width: 200px;*/ /* Match your li width (300px total with padding) */
    pointer-events: none;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
        list-style: none;
        text-align: center;
        /* ADD THESE */
    margin: 0 !important;
    box-sizing: border-box !important;
}
#auth-container {
  margin-top: 20px;
  padding: 20px;
  border-top: 1px solid #ccc;
        text-align: center;
}
#auth-container label {
  display: block;
  margin: 0 auto 0 auto; /* auto centers it horizontally */
  font-weight: bold;
  max-width: 300px;         /* Match this to your input width */
  text-align: left;         /* Keeps the label text left-aligned while the label itself is centered */
}
#auth-container input {
  display: block;
  margin: 5px auto 20px auto;  /* auto centers the block horizontally */
  width: 100%;
  max-width: 300px;
  padding: 8px;
}
/* Also center your buttons */
#auth-container button {
  display: block;
  margin: 10px auto;
padding: 10px 20px;  /* Make these match your preferred button size */
  font-size: 16px;
    -webkit-appearance: none; /* Stops iOS from styling the button */
    background-color: #f9f9f9 !important; 
    border: 1px solid #ccc !important;
    /*appearance: none;*/
}
#header-menu {
    margin-top: 20px;
    padding: 20px;
    text-align: center;
}
/* Also center your buttons */
#header-menu button {
  display: block;
  margin: 0 auto;
/*padding: 10px 20px;*/  /* Make these match your preferred button size */
  font-size: 16px;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline; /* Optional: makes it look like a link */
}

#game-info {
    max-width: 500px;    /* Keeps the text from becoming too wide on large screens */
    margin: 0 auto;      /* This centers the section horizontally */
    text-align: left;    /* Keeps the text left-aligned, which is easier to read */
    width: 95%;
}

#game-info h1, #game-info h2 {
    text-align: left;  /* Centers your headings */
}

#game-info .custom-bullet {
    position: relative;
    padding-left: 10px;  /* Space for the bullet */
    margin: 0px;    /* Centers the line */
    /*width: fit-content;*/  /* Ensures the line only takes as much space as the text */
    text-align: left;
}

#game-info .custom-bullet::before {
    content: "•";
    position: absolute;
    left: 0;
    color: black;
}