body {
    font-family: 'Inter', sans-serif;
    overscroll-behavior: none; /* Prevents pull-to-refresh on canvas */
}
.controls-section {
    background-color: #f8fafc;
    border-right: 1px solid #e2e8f0;
}
.control-group {
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #ffffff;
}
.direction-pad {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    width: 150px;
    height: 150px;
}
.direction-pad button {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    line-height: 1;
    border: 1px solid #cbd5e1;
    background-color: white;
    transition: background-color: 0.2s;
}
.direction-pad button:hover {
    background-color: #f1f5f9;
}
.direction-pad .center-btn {
    grid-column: 2;
    grid-row: 2;
    background-color: #e2e8f0;
    font-size: 0.75rem;
    font-weight: 600;
}
canvas {
    cursor: grab;
    touch-action: none; /* Prevents browser gestures on canvas */
}
canvas:active {
    cursor: grabbing;
}
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    /* Align to top with padding for mobile to make space for keyboard */
    align-items: flex-start;
    padding-top: 4rem; /* 64px */
    z-index: 1000;
    overflow-y: auto; /* Allow scrolling if content is still too long */
}
@media (min-width: 768px) {
    .modal-overlay {
        /* Center on desktop screens */
        align-items: center;
        padding-top: 0;
    }
}
.modal-content {
    background: white;
    padding: 2rem;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    width: 90%;
    max-width: 500px;
}
/* New styles for a consistent modal close button */
.modal-close-btn {
    position: absolute;
    top: 0.75rem; /* 12px */
    right: 0.75rem; /* 12px */
    padding: 0.5rem; /* 8px */
    border-radius: 9999px; /* full */
    background-color: #f3f4f6; /* gray-100 */
    color: #4b5563; /* gray-600 */
}
.modal-close-btn:hover {
    background-color: #e5e7eb; /* gray-200 */
    color: #1f2937; /* gray-800 */
}
/* Hide scrollbar for the controls panel but allow scrolling */
.controls-scroller::-webkit-scrollbar {
    display: none;
}
.controls-scroller {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.preview-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f1f5f9;
    z-index: 2000;
    overflow-y: auto;
    padding: 1rem; /* Padding for mobile */
}
/* Simple toggle switch styles */
.toggle-checkbox:checked {
    right: 0;
    border-color: #4f46e5;
}
.toggle-checkbox:checked + .toggle-label {
    background-color: #4f46e5;
}
#summaryBox.collapsed #summaryContent {
    max-height: 0px;
}
#summaryBox:not(.collapsed) #summaryContent {
     max-height: 500px; /* A value larger than the content will ever be */
}
#summaryBox.collapsed #summaryToggleIcon {
    transform: rotate(-180deg);
}