@font-face {
    font-family: 'Deltarune';
    src: url('/undertale-deltarune-text-font-extended.ttf') format('truetype');
}

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #1a1a1a; /* Dark background */
    overflow: hidden; /* Prevent scrolling */
    position: relative;
}

body.fullscreen-active {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000; /* Black background for letterboxing */
}

canvas {
    background-color: #000; /* Black background for game area */
    border: 2px solid #333; /* Subtle border */
    max-width: 100%;
    max-height: 100%;
    display: block; /* Center block element */
    margin: 0 auto; /* Center horizontally */
    image-rendering: pixelated; /* Sharp pixel art */
}

#mobileControls {
    display: none; /* Hidden by default */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh; /* Increased height for controls */
    pointer-events: none; /* Allow clicks to pass through to canvas below */
    z-index: 50; /* Ensure controls are above canvas but below UI */
}

#joystickArea {
    position: absolute;
    bottom: 30px; /* Increased from 20px */
    left: 30px; /* Increased from 20px */
    width: 150px; /* Increased from 120px */
    height: 150px; /* Increased from 120px */
    pointer-events: auto; /* Enable interaction */
}

#zButton {
    position: absolute;
    bottom: 30px; /* Increased from 20px */
    right: 30px; /* Increased from 20px */
    width: 100px; /* Increased from 60px */
    height: 100px; /* Increased from 60px */
    border-radius: 50%; /* Circular button */
    background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
    color: white;
    font-family: 'Deltarune', sans-serif; /* Deltarune font */
    font-size: 40px; /* Increased font size */
    border: 3px solid white; /* Increased border thickness */
    pointer-events: auto; /* Enable interaction */
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none; /* Prevent text selection on button */
    cursor: pointer; /* Indicate interactivity */
}

#zButton:active {
    background-color: rgba(255, 0, 0, 0.8); /* More opaque when pressed */
    transform: scale(0.95); /* Slightly shrink when pressed */
}

#editorControls {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100; /* Ensure editor is on top */
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack children vertically */
    align-items: flex-end; /* Align items to the right */
}

#toggleEditor {
    background-color: #444;
    color: white;
    border: 2px solid #666;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Deltarune', sans-serif;
    cursor: pointer;
    margin-bottom: 5px; /* Space between toggle and panel */
}

#toggleEditor:hover {
    background-color: #555;
}

#editorHeader {
    width: 300px; /* Match panel width */
    background-color: rgba(0, 0, 0, 0.85);
    border: 1px solid #555;
    border-bottom: none; /* No bottom border */
    padding: 5px 10px;
    color: white;
    font-family: Arial, sans-serif;
    font-size: 14px;
    cursor: pointer; /* Indicate clickable */
    justify-content: space-between; /* Space out header and button */
    align-items: center; /* Vertically align items */
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
#editorHeader h3 {
    margin: 0; /* Remove default margin */
    font-size: 16px; /* Slightly larger font */
    color: #c4a7e7;
}
#collapseEditorPanel {
    background: none;
    border: none;
    color: white;
    font-size: 20px; /* Large caret */
    cursor: pointer;
    padding: 0 5px; /* Add some padding */
    line-height: 1; /* Ensure button doesn't add extra height */
    transition: transform 0.2s ease; /* Smooth rotation */
}
#collapseEditorPanel.collapsed {
    transform: rotate(180deg); /* Rotate caret when collapsed */
}

#editorPanel {
    background-color: rgba(0, 0, 0, 0.85); /* More opaque background */
    border: 1px solid #555;
    border-top: none; /* No top border */
    padding: 10px;
    color: white;
    font-family: Arial, sans-serif;
    max-height: calc(100vh - 80px - 30px); /* Limit height based on viewport, account for toggle button and header */
    overflow-y: auto; /* Enable scrolling if content exceeds height */
    width: 300px; /* Fixed width for the panel */
    box-sizing: border-box; /* Include padding in width */
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

#categoryContainer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.categoryHeader {
    margin: 5px 0;
    padding-bottom: 3px;
    border-bottom: 1px solid #555;
    font-size: 14px;
    color: #c4a7e7; /* Purple accent color */
}

#tileSelector, #objectSelector, #npcSelector, #toolSelector {
    display: flex;
    gap: 5px; /* Increased gap */
    margin-bottom: 10px; /* Increased margin */
    flex-wrap: wrap; /* Allow buttons to wrap */
}

.tileButton {
    background-color: #333;
    color: white;
    border: 1px solid #555;
    padding: 3px; /* Reduced padding, rely on min-width/height */
    cursor: pointer;
    min-width: 60px; /* Maintain minimum clickable area */
    min-height: 60px;
    display: flex;
    flex-direction: column; /* Stack image (implicit) and span */
    align-items: center;
    justify-content: flex-end; /* Align text to bottom */
    background-size: cover; /* Use cover to fill button */
    background-position: center;
    background-repeat: no-repeat;
    position: relative; /* For absolute positioning of span */
    transition: background-color 0.2s, border-color 0.2s;
    flex-grow: 1; /* Make buttons grow to fill space */
    text-align: center;
    font-size: 12px; /* Smaller font */
    white-space: nowrap; /* Prevent text wrapping in buttons */
}
.tileButton:hover {
    background-color: #444;
    border-color: #777;
}

.tileButton span {
    position: static; /* Make span static inside flex column */
    font-size: 9px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background for text */
    padding: 1px 3px;
    margin-top: 2px; /* Space between image area and text */
    width: 100%; /* Ensure span takes full width */
    box-sizing: border-box; /* Include padding in width */
     font-size: 12px; /* Smaller font for text area */
     line-height: 1.4;
}

.tileButton[data-tile="select"] span,
.tileButton[data-tile="delete"] span,
.tileButton[data-tile="trigger"] span,
#toolSelector button#generateTrees span,
#toolSelector button#clearLayer span,
#toolSelector button#copyLayer span,
#toolSelector button#pasteLayer span,
#toolSelector button#moveForward span,
#toolSelector button#moveBackward span,
#toolSelector button#duplicateObject span {
    position: static; /* Override absolute positioning */
    margin-top: 5px;
    background: none; /* No background for icon buttons */
    padding: 0;
    width: auto; /* Allow width to be determined by content */
    font-size: 12px; /* Ensure font size is consistent */
    white-space: normal; /* Allow text to wrap */
    line-height: 1.2; /* Adjust line height for wrapped text */
}

#tileSelector .tileButton span,
#objectSelector .tileButton span,
#npcSelector .tileButton span {
     background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent background for text */
     padding: 1px 3px;
     white-space: nowrap; /* Prevent text wrapping for these */
}

.tileButton.active {
    background-color: #5a4b8c; /* Purple active color */
    border-color: #c4a7e7; /* Lighter purple border */
    box-shadow: 0 0 10px rgba(136, 96, 208, 0.5); /* Purple glow */
}

/* Specific active styles for tool buttons */
.tileButton[data-tile="select"].active {
    background-color: #2c4d65; /* Dark blue/cyan */
    border-color: #4a7090;
    box-shadow: 0 0 5px #7ab; /* Blue glow */
}
.tileButton[data-tile="delete"].active {
    background-color: #652c2c; /* Dark red */
    border-color: #904a4a;
    box-shadow: 0 0 5px #a77b7b; /* Red glow */
}
.tileButton[data-tile="trigger"].active {
    background-color: #2c6565; /* Dark teal */
    border-color: #4a9090;
    box-shadow: 0 0 5px #7bb; /* Teal glow */
}

/* Specific colors for moved tool buttons */
#toolSelector button#generateTrees { background-color: #2c652c; border-color: #3a8a3a; }
#toolSelector button#clearLayer { background-color: #652c2c; border-color: #904a4a; }
#toolSelector button#copyLayer { background-color: #2c4d65; border-color: #4a7090; }
#toolSelector button#pasteLayer { background-color: #2c4d65; border-color: #4a7090; }
#toolSelector button#moveForward { background-color: #333344; border-color: #8860d0; }
#toolSelector button#moveBackward { background-color: #333344; border-color: #8860d0; }
#toolSelector button#duplicateObject { background-color: #333344; border-color: #8860d0; }

/* Hover/Active styles for moved tool buttons */
#toolSelector button:hover { background-color: #444; border-color: #777; } /* Default hover */
#toolSelector button#generateTrees:hover { background-color: #3a8a3a; }
#toolSelector button#clearLayer:hover { background-color: #7a3a3a; }
#toolSelector button#copyLayer:hover, #toolSelector button#pasteLayer:hover { background-color: #3a6080; }
#toolSelector button#moveForward:hover, #toolSelector button#moveBackward:hover, #toolSelector button#duplicateObject:hover { background-color: #444455; }

#toolSelector button:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }

#editorInfo {
    font-size: 11px; /* Slightly smaller font */
    margin-top: 10px;
    color: #c4a7e7;
    background-color: #2d2b40; /* Dark purple background */
    padding: 8px;
    border-radius: 4px;
    line-height: 1.4;
    border: 1px solid #403d52; /* Subtle border */
}

#layerSelector {
    margin-top: 10px;
    margin-bottom: 0; /* Remove bottom margin, it's now at the bottom */
    background-color: #222;
    padding: 8px; /* Increased padding */
    border-radius: 4px;
    border: 1px solid #333;
}

#layerSelector h4 {
    margin: 5px 0;
    font-size: 14px;
    color: #c4a7e7;
}

#layerButtons {
    display: flex;
    gap: 5px; /* Increased gap */
    margin-top: 5px;
    flex-wrap: wrap;
}

.layerButton {
    background-color: #333;
    color: white;
    border: 1px solid #555;
    padding: 5px 0; /* Increased padding */
    cursor: pointer;
    min-width: 35px; /* Slightly wider */
    min-height: 35px; /* Slightly taller */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px; /* Slightly larger font */
    border-radius: 3px; /* Rounded corners */
    transition: background-color 0.2s, border-color 0.2s;
}

.layerButton:hover {
    background-color: #444;
    border-color: #777;
}

.layerButton.active {
    background-color: #5a4b8c;
    border-color: #c4a7e7;
    box-shadow: 0 0 8px rgba(136, 96, 208, 0.5);
}

#generateTrees {
    margin-top: 15px;
    background-color: #2c652c; /* Dark green */
    color: white;
    border: 1px solid #3a8a3a;
    padding: 10px;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-family: 'Deltarune', sans-serif;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

#generateTrees:hover {
    background-color: #3a8a3a; /* Lighter green on hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
#generateTrees:active {
     transform: translateY(0);
     box-shadow: 0 0 1px rgba(0,0,0,0.3);
}

#propertiesPanel {
    margin-top: 10px;
    border-top: 1px solid #555;
    padding-top: 10px;
}

#talkspriteLegend {
    margin-top: 10px;
    border-top: 1px solid #555;
    padding-top: 10px;
}

.legend-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    background-color: #222;
    padding: 5px;
    border-radius: 4px;
    border: 1px solid #333;
    flex-basis: calc(50% - 5px);
    box-sizing: border-box;
}

.legend-item img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    background-color: #444;
    border-radius: 3px;
    padding: 2px;
    image-rendering: pixelated;
}

.legend-item span {
    font-size: 10px;
    font-family: monospace;
    color: #c4a7e7;
    word-break: break-all;
}

#randomDialogueHelp {
    margin-top: 10px;
    border-top: 1px solid #555;
    padding-top: 10px;
    font-size: 12px;
    color: #c4a7e7;
}

#randomDialogueHelp p {
    margin: 0;
    line-height: 1.4;
}

#randomDialogueHelp code {
    font-family: monospace;
    background-color: #333;
    padding: 2px 4px;
    border-radius: 3px;
}

.objectProperties {
    display: none; /* Hidden by default */
    margin-top: 5px;
    background-color: #222; /* Dark background for properties */
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #333;
}
.objectProperties h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 14px;
    color: #c4a7e7;
}

#signProperties textarea, #npcProperties textarea, #triggerProperties textarea {
    width: 95%; /* Allow wider text area */
    min-height: 80px;
    background-color: #333;
    color: white;
    border: 1px solid #555;
    padding: 5px;
    font-family: 'Deltarune', sans-serif; /* Apply game font */
    margin: 0 auto 8px; /* Center and add bottom margin */
    display: block; /* Enable margin auto centering */
    resize: vertical; /* Allow vertical resize */
    box-sizing: border-box; /* Include padding and border in width */
     font-size: 12px; /* Smaller font for text area */
     line-height: 1.4;
}

#npcProperties textarea {
    min-height: 100px; /* Taller for dialogue */
}
#triggerProperties textarea {
    min-height: 80px;
}

#updateSignText, #updateTreeProperties, #updateNpcProperties, #updateTriggerProperties {
    background-color: #2c652c;
    color: white;
    border: 1px solid #3a8a3a;
    padding: 5px 8px;
    border-radius: 3px;
    cursor: pointer;
    width: 100%; /* Full width button */
    font-family: 'Deltarune', sans-serif;
    transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

#updateSignText:hover, #updateTreeProperties:hover, #updateNpcProperties:hover, #updateTriggerProperties:hover {
    background-color: #3a8a3a;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
#updateSignText:active, #updateTreeProperties:active, #updateNpcProperties:active, #updateTriggerProperties:active {
     transform: translateY(0);
     box-shadow: 0 0 1px rgba(0,0,0,0.3);
}

#treeProperties label {
    display: block; /* Label on its own line */
    margin-bottom: 8px;
    font-size: 12px;
}
#treeProperties input[type="range"] {
    width: 100%; /* Make slider full width */
    display: block;
    margin-top: 4px;
}

#npcProperties label {
    display: block; /* Label on its own line */
    margin-bottom: 8px;
    font-size: 12px;
}
#triggerProperties label {
    display: block; /* Label on its own line */
    margin-bottom: 8px;
    font-size: 12px;
}

#npcMovementType, #triggerType {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #444;
}

#npcMovementType h4, #triggerType h4 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 14px;
    color: #c4a7e7;
}

#npcMovementType label, #triggerType label {
    display: inline-block; /* Allow labels side-by-side */
    margin-right: 15px;
    font-size: 12px;
    cursor: pointer;
}

#npcMovementType input[type="radio"], #triggerType input[type="radio"] {
    margin-right: 5px;
    vertical-align: middle;
}

#fullscreenButton {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 100;
}

#toggleFullscreen {
    background-color: rgba(68, 68, 68, 0.7);
    color: white;
    border: 2px solid #666;
    padding: 8px 12px;
    border-radius: 4px;
    font-family: 'Deltarune', sans-serif;
    cursor: pointer;
    transition: background-color 0.2s;
}

#toggleFullscreen:hover {
    background-color: rgba(85, 85, 85, 0.8);
}

@media (max-width: 768px) {
    #mobileControls {
        display: block; /* Show mobile controls on small screens */
    }

    #editorControls {
        /* flex-direction: column-reverse; Reverse stack on mobile? Or maybe hide entirely? */
        /* For now, let's assume we hide the editor on mobile */
        display: none;
    }

    canvas {
         /* Adjust margin for mobile controls */
        margin-bottom: 40vh;
        max-height: 60vh; /* Leave space for controls */
    }
     body.fullscreen-active canvas {
         margin-bottom: 0; /* No margin in fullscreen */
         max-height: 100vh;
     }
}

/* Media query for square screens (aspect ratio close to 1:1) */
@media (aspect-ratio: 1/1) {
    /* Hide game canvas and controls on square screens */
    #gameCanvas, #mobileControls, #editorControls, #fullscreenButton {
        display: none !important;
    }

    /* Force splash screen to be visible and cover the screen */
    #splashScreen {
        opacity: 1 !important;
        display: flex !important;
        justify-content: center;
        align-items: center;
        background-color: black;
        width: 100%;
        height: 100vh;
        z-index: 9999;
    }

    /* Make the splash screen image cover the entire square screen */
    #splashScreen img {
        max-width: 100%;
        max-height: 100%;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Cover the area, might crop */
    }
}

/* Custom scrollbar styling for editor panel */
#editorPanel::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#editorPanel::-webkit-scrollbar-track {
    background: #333;
    border-radius: 0;
    border: 1px solid #444;
}

#editorPanel::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 0;
    border: 1px solid #666;
    image-rendering: pixelated; /* Keep thumb sharp */
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

#editorPanel::-webkit-scrollbar-thumb:hover {
    background: #777;
    border-color: #888;
}

#editorPanel::-webkit-scrollbar-corner {
    background: #333;
}

#layerOpacityControls {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.layerOpacityControl {
    display: flex;
    align-items: center;
    gap: 10px;
}

.layerOpacityControl label {
    min-width: 70px;
    font-size: 12px;
    color: #c4a7e7;
}

.layerOpacityControl input[type="range"] {
    flex-grow: 1;
    background: #333;
    border: none;
    height: 6px; /* Thinner slider track */
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none; /* Remove default style */
    appearance: none; /* Standard property */
    cursor: pointer;
}

.layerOpacityControl input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px; /* Smaller thumb */
    height: 14px;
    background: #8860d0; /* Purple thumb */
    border-radius: 50%;
    cursor: pointer;
    margin-top: -4px; /* Center thumb vertically on track */
    border: 1px solid #c4a7e7;
    box-shadow: 0 0 4px rgba(136, 96, 208, 0.5);
}

.layerOpacityControl input[type="range"]::-moz-range-thumb {
    appearance: none;
    width: 14px;
    height: 14px;
    background: #8860d0;
    border-radius: 50%;
    cursor: pointer;
    border: 1px solid #c4a7e7;
    box-shadow: 0 0 4px rgba(136, 96, 208, 0.5);
}