/* Shared Button Styles and Effects */

/* Shine effect for all buttons */
.shine-button {
     position: relative;
}

.shine-button::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(
          90deg,
          transparent 40%,
          rgba(255, 255, 255, 0.4) 50%,
          transparent 60%
     );
     background-size: 200% 100%;
     transition: background-position 0.5s;
}

.shine-button:hover::before {
     background-position: 100% 0;
}

/* Hint Button */
#hint-button {
     padding: var(--space-sm);
     cursor: pointer;
     background: linear-gradient(to bottom, var(--gold-accent), #e6a400);
     border: var(--border-width-md) solid #e6a400;
     border-radius: 10px;
     color: #630;
     transition: all var(--duration-base) ease;
     box-shadow: var(--shadow-md);
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     width: var(--button-height-xl);
     height: var(--button-height-xl);
}

#hint-button:hover {
     background: linear-gradient(to bottom, #ffe7a0, var(--gold-accent));
     box-shadow: var(--shadow-lg);
}

#hint-button:disabled {
     background: linear-gradient(to bottom, #f0dea0, #e6d59c);
     border-color: #e0d8c0;
     cursor: not-allowed;
     opacity: var(--opacity-70);
     box-shadow: var(--shadow-xs);
}

/* Eye icon for peek button */
.eye-icon {
     width: 30px;
     height: 30px;
}

/* .hidden class for buttons */
.hidden {
     display: none !important;
}