:root {
    --primary-color: #EDB458;
    --primary-hover: #D19C4C;
    --hero-gradient-start: rgba(237, 180, 88, 0.40);
    --hero-gradient-end: rgba(237, 180, 88, 0.16);
    --summary-bg-start: rgba(237, 180, 88, 0.30);
    --summary-bg-end: rgba(237, 180, 88, 0.12);
    --mode-shadow: rgba(237, 180, 88, 0.30);
    --btn-shadow: rgba(237, 180, 88, 0.55);
    --section-bg-start: rgba(237, 180, 88, 0.14);
    --section-bg-end: rgba(237, 180, 88, 0.06);
    --primary-shadow: rgba(237, 180, 88, 0.40);
    --feature-shadow: rgba(237, 180, 88, 0.22);
    --focus-shadow: rgba(237, 180, 88, 0.34);
    --accordion-icon-filter: invert(75%) sepia(65%) saturate(900%) hue-rotate(30deg) brightness(105%) contrast(105%);
}

/* Settings Pills Wrapper - Limit width and size of pills */
.settings-pills-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.settings-pills-wrapper .table-pill {
    max-width: 280px;
}

/* Selected state for btn-quick buttons */
.btn-quick.selected {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: white;
    border-color: var(--primary-color);
}

/* Game Stats - Force single row with equal widths */
.game-stats {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 1rem;
}

.game-stats .stat-card {
    flex: 1;
    min-width: 0;
}

/* Canvas Styling */
#gameCanvas {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 8 / 5.5;
    background: transparent;
    border: none;
    border-radius: 0;
    cursor: move;
    touch-action: none;
    display: block;
    margin: 0 auto;
}

/* Two-column game layout */
#activeGame .row {
    align-items: flex-start;
}

/* Game Controls Area */
.game-controls {
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--section-bg-start), var(--section-bg-end));
    border-radius: 0.75rem;
    border: 1px solid rgba(237, 180, 88, 0.2);
    height: 100%;
}

/* Full width button in controls */
.game-controls .btn-submit {
    width: 100%;
}

/* Adjust form labels in sidebar */
.game-controls .form-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Add spacing between control elements */
.game-controls .mb-3 {
    margin-bottom: 2rem !important;
}

/* Add extra space above submit button */
.game-controls .mb-3:has(.btn-submit) {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem !important;
}

/* Add spacing to inputs */
.game-controls input {
    margin-bottom: 0.75rem;
}

/* Angle Input - Monospace font for numbers */
.angle-input {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 600;
    padding: 0.75rem;
}

/* Remove spinner arrows from number inputs */
.angle-input::-webkit-outer-spin-button,
.angle-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.angle-input[type=number] {
    -moz-appearance: textfield;
}

#protractorRotInput {
    background-color: #f8f9fa;
    font-family: 'Courier New', Consolas, monospace;
    text-align: center;
    padding: 0.75rem;
}

/* Protractor Tip */
.protractor-tip {
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
    font-size: 0.85rem;
    color: #666;
    text-align: center;
    font-style: italic;
    line-height: 1.4;
}

/* Feedback Message */
.feedback-message {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

.feedback-message.correct {
    color: #28a745;
    background: rgba(40, 167, 69, 0.1);
    border: 2px solid #28a745;
}

.feedback-message.incorrect {
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
    border: 2px solid #dc3545;
}

.feedback-message.warning {
    color: #ffc107;
    background: rgba(255, 193, 7, 0.1);
    border: 2px solid #ffc107;
}

@keyframes flash-correct {
    0%, 100% {
        background-color: transparent;
        border-color: #ddd;
    }
    50% {
        background-color: rgba(76, 175, 80, 0.2);
        border: 3px solid #4caf50;
    }
}

@keyframes flash-incorrect {
    0%, 100% {
        background-color: transparent;
        border-color: #ddd;
    }
    50% {
        background-color: rgba(244, 67, 54, 0.2);
        border: 3px solid #f44336;
    }
}

.content-card.flash-correct {
    animation: flash-correct 0.6s ease;
}

.content-card.flash-incorrect {
    animation: flash-incorrect 0.6s ease;
}

@media (max-width: 991px) {
    /* On smaller screens, controls go below canvas */
    #activeGame .col-lg-3 {
        margin-top: 1.5rem;
    }
    
    /* Controls box adjusts for full width */
    .game-controls {
        max-width: 600px;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    #gameCanvas {
        width: 100%;
        height: auto;
    }

    .game-controls .row > div {
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 576px) {
    .protractor-tip {
        font-size: 0.8rem;
    }
}