/* Accordion Solitaire custom styles */

body {
    background: #228B22;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.game-container {
    flex: 1;
}

#gameCanvas {
    /* Responsive sizing for mobile */
    max-width: 100%;
    height: auto;
    background: url('https://www.transparenttextures.com/patterns/asfalt-light.png') repeat, #228B22;
    border-radius: 12px;
    border: 2px solid #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    margin: 0 auto 32px auto; /* Added bottom margin */
    display: block;
    cursor: pointer; /* Add pointer cursor to indicate interactivity */
}

.accordion-header {
    font-family: 'Press Start 2P', cursive;
    text-align: center;
    font-size: 2rem;
    color: white;
    margin-top: 32px;
    text-shadow: 0 2px 8px #000, 0 0 10px var(--accent-color);
    letter-spacing: 2px;
}

.accordion-controls {
    display: flex;
    justify-content: center;
    margin: 18px 0 10px 0;
    gap: 16px;
}

.accordion-btn {
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(90deg, var(--primary-color), var(--tertiary-color));
    color: #222;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.accordion-btn:hover {
    background: linear-gradient(90deg, var(--accent-color), var(--primary-color));
    transform: translateY(-2px) scale(1.04);
}

.accordion-btn:active {
    transform: scale(0.98);
}

/* Style for disabled undo button */
.accordion-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none; /* Prevent hover/active effects */
    background: #aaa; /* Grey out background */
}

.accordion-stats {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 12px;
    font-family: 'Press Start 2P', cursive;
    font-size: 1rem;
    color: #fff;
    text-shadow: 0 1px 4px #000;
}

.accordion-canvas-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    /* margin-bottom: 32px; */ /* Replaced by margin on canvas */
    position: relative;
}

/* Responsive */
@media (max-width: 768px) {
    .accordion-header { font-size: 1.5rem; }
    .accordion-stats { font-size: 0.8rem; gap: 12px; }
    #gameCanvas { width: 95%; max-width: 600px; height: auto; margin-bottom: 24px; } /* Adjusted width and margin */
}

@media (max-width: 480px) {
    .accordion-header { font-size: 1.2rem; }
    .accordion-btn { padding: 8px 16px; font-size: 0.8rem; }
    .accordion-stats { font-size: 0.7rem; gap: 10px; }
    #gameCanvas { width: 98vw; height: auto; max-width: none; margin-bottom: 16px; } /* Adjusted for very small screens */
}