/* ============================================
   SimonSays - Game Styles
   ============================================ */

/* Background */
.simon-bg {
    background: #1a1a2e;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
}

/* Content wrapper */
.simon-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 30px 20px;
}

/* Phase indicator */
.simon-phase-indicator {
    font-size: 1.2rem;
    font-weight: 600;
    min-height: 32px;
    text-align: center;
    color: #c0c8d0;
}

.simon-showing {
    color: #d4af37;
    animation: simon-pulse-text 1s ease-in-out infinite alternate;
}

.simon-input {
    color: #81c784;
}

.simon-gameover {
    color: #e57373;
}

@keyframes simon-pulse-text {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

/* Simon Board - 2x2 grid */
.simon-board {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    width: 420px;
    height: 420px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4), inset 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Simon buttons */
.simon-btn {
    width: 190px;
    height: 190px;
    border: none;
    cursor: pointer;
    transition: all 0.12s ease;
    position: relative;
    overflow: hidden;
}

/* 3D effect for buttons */
.simon-btn::after {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border-radius: inherit;
    opacity: 0.15;
    background: linear-gradient(135deg, rgba(255,255,255,0.4) 0%, transparent 60%);
    pointer-events: none;
}

/* Button shapes - rounded corners for pie-like layout */
.simon-red    { border-radius: 100% 10px 10px 10px; }  /* top-left */
.simon-blue   { border-radius: 10px 100% 10px 10px; }  /* top-right */
.simon-green  { border-radius: 10px 10px 10px 100%; }  /* bottom-left */
.simon-yellow { border-radius: 10px 10px 100% 10px; }  /* bottom-right */

/* Button colors - normal state */
.simon-red    { background: #e74c3c; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3); }
.simon-blue   { background: #3498db; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3); }
.simon-green  { background: #2ecc71; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3); }
.simon-yellow { background: #f1c40f; box-shadow: inset 0 -4px 8px rgba(0,0,0,0.3); }

/* Button colors - active/flash state */
.simon-red.simon-btn-active {
    background: #ff6b6b;
    box-shadow: 0 0 30px rgba(255, 107, 107, 0.6), 0 0 60px rgba(255, 107, 107, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.simon-blue.simon-btn-active {
    background: #5dade2;
    box-shadow: 0 0 30px rgba(93, 173, 226, 0.6), 0 0 60px rgba(93, 173, 226, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.simon-green.simon-btn-active {
    background: #58d68d;
    box-shadow: 0 0 30px rgba(88, 214, 141, 0.6), 0 0 60px rgba(88, 214, 141, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.2);
}

.simon-yellow.simon-btn-active {
    background: #f9e154;
    box-shadow: 0 0 30px rgba(249, 225, 84, 0.6), 0 0 60px rgba(249, 225, 84, 0.3), inset 0 0 15px rgba(255, 255, 255, 0.2);
}

/* Hover state - only when player input phase */
.simon-btn:not(.simon-btn-disabled):hover {
    filter: brightness(1.15);
    transform: scale(1.02);
}

.simon-btn:not(.simon-btn-disabled):active {
    transform: scale(0.97);
}

/* Disabled state */
.simon-btn-disabled {
    cursor: default;
    opacity: 0.7;
}

/* Responsive */
@media (max-width: 500px) {
    .simon-board {
        width: 320px;
        height: 320px;
        gap: 8px;
        padding: 10px;
    }

    .simon-btn {
        width: 145px;
        height: 145px;
    }
}