:root {
    --tedx-red: #e62b1e; /* [cite: 1] */
    --tedx-dark: #333333; /* [cite: 2] */
    --yellow-category: #f9df6d; /* [cite: 2] */
    --green-category: #a0c35a; /* [cite: 2] */
    --blue-category: #718eff; /* [cite: 2] */
    --purple-category: #b48ead; /* [cite: 2] */
    --selected-bg: #e6e6e6; /* [cite: 2] */
    --hover-bg: #f0f0f0; /* [cite: 2] */
}

* {
    box-sizing: border-box; /* [cite: 3] */
    margin: 0; /* [cite: 4] */
    padding: 0; /* [cite: 4] */
    font-family: 'Helvetica Neue', Arial, sans-serif; /* [cite: 4] */
}

body {
    background-color: #000000; /* [cite: 4] */
    color: #ffffff; /* [cite: 5] */
    line-height: 1.6; /* [cite: 5] */
    max-width: 1000px; /* [cite: 5] */
    margin: 0 auto; /* [cite: 5] */
    padding: 20px; /* [cite: 5] */
}

header {
    text-align: center; /* [cite: 6] */
    margin-bottom: 30px; /* [cite: 7] */
    background-color: #000000; /* [cite: 7] */
    padding: 20px; /* [cite: 7] */
    border-radius: 10px; /* [cite: 7] */
}

.header-logo {
    max-width: 100%; /* [cite: 7] */
    height: auto; /* [cite: 8] */
    margin-bottom: 20px; /* [cite: 8] */
}

header h1 {
    color: var(--tedx-red); /* [cite: 8] */
    font-size: 2.5rem; /* [cite: 9] */
    margin-bottom: 10px; /* [cite: 9] */
    display: none; /* Hide the text header since we're using the image */ /* [cite: 9] */
}

header h2 {
    font-size: 1.5rem; /* [cite: 9] */
    font-weight: normal; /* [cite: 10] */
    margin-bottom: 20px; /* [cite: 10] */
    color: #ffffff; /* [cite: 10] */
}

.instructions {
    background-color: #333333; /* [cite: 10] */
    color: #ffffff; /* [cite: 11] */
    padding: 20px; /* [cite: 11] */
    border-radius: 10px; /* [cite: 11] */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); /* [cite: 11] */
    margin-bottom: 30px; /* [cite: 11] */
}

.instructions h3 {
    margin-bottom: 10px; /* [cite: 12] */
    color: var(--tedx-red); /* [cite: 13] */
}

.grid {
    display: grid; /* [cite: 13] */
    grid-template-columns: repeat(4, 1fr); /* [cite: 14] */
    gap: 10px; /* [cite: 14] */
    margin-bottom: 20px; /* [cite: 14] */
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr); /* [cite: 14] */
    }
}

.item {
    background-color: #333333; /* [cite: 15] */
    color: #ffffff; /* [cite: 16] */
    padding: 15px; /* [cite: 16] */
    border-radius: 8px; /* [cite: 16] */
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); /* [cite: 16] */
    text-align: center; /* [cite: 16] */
    cursor: pointer; /* [cite: 16] */
    transition: all 0.3s ease; /* [cite: 16] */
    height: 120px; /* [cite: 17] */
    display: flex; /* [cite: 17] */
    align-items: center; /* [cite: 17] */
    justify-content: center; /* [cite: 17] */
    font-size: 0.9rem; /* [cite: 17] */
}

.item:hover {
    background-color: #444444; /* [cite: 18] */
    transform: translateY(-2px); /* [cite: 19] */
}

.item.selected {
    background-color: #555555; /* [cite: 19] */
    border: 2px solid #ffffff; /* [cite: 20] */
    transform: scale(1.02); /* [cite: 20] */
}

.item.solved {
    cursor: default; /* [cite: 20] */
    transform: none; /* [cite: 21] */
}

.yellow-category { background-color: var(--yellow-category); /* [cite: 21] */ }
.green-category { background-color: var(--green-category); /* [cite: 22] */ }
.blue-category { background-color: var(--blue-category); /* [cite: 23] */ }
.purple-category { background-color: var(--purple-category); /* [cite: 24] */ }

.controls {
    display: flex; /* [cite: 25] */
    justify-content: center; /* [cite: 26] */
    gap: 20px; /* [cite: 26] */
    margin-bottom: 30px; /* [cite: 26] */
}

button { /* submitButton will use this primarily */
    background-color: var(--tedx-red); /* [cite: 26] */
    color: white; /* [cite: 27] */
    border: none; /* [cite: 27] */
    padding: 12px 24px; /* [cite: 27] */
    border-radius: 5px; /* [cite: 27] */
    cursor: pointer; /* [cite: 27] */
    font-size: 1rem; /* [cite: 27] */
    font-weight: bold; /* [cite: 27] */
    transition: background-color 0.2s; /* [cite: 27] */
}

button:hover { /* submitButton hover */
    background-color: #c71f13; /* [cite: 28] */
}

button:disabled { /* For both submitButton and hintButton when disabled */
    background-color: #ccc; /* [cite: 29] */
    cursor: not-allowed; /* [cite: 30] */
    color: #666; /* Ensuring text is visible on light grey */
}

/* Replace your existing #hintButton and #hintButton:hover rules with these: */

#hintButton {
    background-color: var(--yellow-category); /* Gold color */
    color: var(--tedx-dark); /* Dark text for better contrast on gold */
    padding: 14px 28px;       /* Retaining previous padding */
    font-size: 1.1rem;        /* Retaining previous font size */
    font-weight: bold;        /* Retaining previous font weight */
    border-radius: 5px;       /* Retaining previous border radius */
    border: none;             /* Retaining previous border */
    cursor: pointer;          /* Retaining previous cursor */
    transition: background-color 0.2s; /* Retaining previous transition */
}

#hintButton:hover {
    background-color: #e0c65f; /* A slightly darker gold for hover */
    color: var(--tedx-dark);   /* Keep text dark on hover */
}

/* Ensure your general button:disabled style is still present for when hints run out:
button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    color: #666;
}
*/

#feedback {
    text-align: center; /* [cite: 32] */
    margin-bottom: 20px; /* [cite: 33] */
    min-height: 50px; /* [cite: 33] */
    font-size: 1.2rem; /* [cite: 33] */
    font-weight: bold; /* [cite: 33] */
}

.hidden {
    display: none; /* [cite: 33] */
}

.solved-groups { margin-top: 30px; /* [cite: 34] */ }
.group {
    background-color: white; /* [cite: 35] */
    border-radius: 8px; /* [cite: 36] */
    padding: 20px; /* [cite: 36] */
    margin-bottom: 20px; /* [cite: 36] */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* [cite: 36] */
}
.group-header {
    margin-bottom: 15px; /* [cite: 37] */
    display: flex; /* [cite: 38] */
    align-items: center; /* [cite: 38] */
}
.group-color {
    width: 20px; /* [cite: 38] */
    height: 20px; /* [cite: 39] */
    border-radius: 50%; /* [cite: 39] */
    margin-right: 10px; /* [cite: 39] */
}
.group-items {
    display: grid; /* [cite: 39] */
    grid-template-columns: repeat(2, 1fr); /* [cite: 40] */
    gap: 10px; /* [cite: 40] */
}
@media (max-width: 768px) {
    .group-items { grid-template-columns: 1fr; /* [cite: 40] */ }
}
.group-item {
    background-color: #f9f9f9; /* [cite: 41] */
    padding: 10px; /* [cite: 42] */
    border-radius: 5px; /* [cite: 42] */
}

.completion-message {
    background-color: white; /* [cite: 42] */
    border-radius: 10px; /* [cite: 43] */
    padding: 30px; /* [cite: 43] */
    text-align: center; /* [cite: 43] */
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* [cite: 43] */
    margin-top: 30px; /* [cite: 43] */
}
.completion-message h2 {
    color: var(--tedx-red); /* [cite: 44] */
    margin-bottom: 20px; /* [cite: 45] */
}
.completion-message p { margin-bottom: 20px; /* [cite: 45] */ }
.btn-register {
    display: inline-block; /* [cite: 46] */
    background-color: var(--tedx-red); /* [cite: 47] */
    color: white; /* [cite: 47] */
    padding: 15px 30px; /* [cite: 47] */
    border-radius: 5px; /* [cite: 47] */
    text-decoration: none; /* [cite: 47] */
    font-weight: bold; /* [cite: 47] */
    margin-top: 20px; /* [cite: 47] */
    transition: background-color 0.2s; /* [cite: 47] */
}
.btn-register:hover { background-color: #c71f13; /* [cite: 48] */ }
.speaker-link {
    color: var(--tedx-red); /* [cite: 49] */
    text-decoration: none; /* [cite: 50] */
    font-weight: bold; /* [cite: 50] */
}
.speaker-link:hover { text-decoration: underline; /* [cite: 50] */ }

/* Crucial Hint Box Styling from hint styling.txt */
.hint-box {
    background-color: #333333; /* [cite: 52] */
    border: 1px solid #555555; /* [cite: 52] */
    color: #ffffff; /* ENSURES TEXT IS VISIBLE ON DARK BG */ /* [cite: 52] */
    padding: 15px; /* [cite: 52] */
    border-radius: 5px; /* [cite: 52] */
    margin-bottom: 20px; /* [cite: 52] */
}

.hint-box h4 {
    color: #ffc107; /* [cite: 54] */
    margin-bottom: 10px; /* [cite: 54] */
}

.hint-content {
    font-style: italic; /* [cite: 55] */
    color: #ffffff; /* ENSURES TEXT IS VISIBLE ON DARK BG */ /* [cite: 55] */
}

.shake {
    animation: shake 0.5s;
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
    100% { transform: translateX(0); }
}