/* Warning message (error display) */
    #imageLoadWarning {
      background-color: #fce8e8; /* Soft red */
      color: #c0392b; /* Dark red */
      padding: 1.2rem;
      border-radius: 0.75rem; /* More rounded corners */
      margin-bottom: 2rem;
      border: 1px solid #e74c3c; /* Add border */
      font-size: 0.95rem;
      line-height: 1.5;
      display: none;
      box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    }
    
    #imageLoadWarning p:first-child {
        font-size: 1.1rem;
        margin-bottom: 0.75rem;
    }
    #imageLoadWarning pre {
        background-color: #f1c0c3; /* Color matching the warning */
        padding: 0.7rem;
        margin-top: 0.75rem;
        border-radius: 0.5rem;
        overflow-x: auto;
    }
    /* Layout container */
    .yu-gi-oh-container {
      display: flex;
      flex-direction: column;
      gap: 2.5rem; /* Wider gap */
      max-width: 85rem; /* Slightly wider max-width */
      margin: 0 auto;
    }
    @media (min-width: 1024px) {
      .yu-gi-oh-container {
         flex-direction: row;
         align-items: flex-start;
      }
    }

    /* Left panel wrapper (scroll area + fixed button) */
    .left-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    /* Control section (Scrollable Area) */
    .control-section {
      overflow-y: auto;
      padding-right: 10px;
      margin-bottom: 1rem; /* Space between scroll area and download button */
    }
    .section-title {
      font-size: 1.8rem; /* Slightly larger */
      font-weight: 700; /* Bolder */
      margin-bottom: 2rem; /* Wider margin */
      color: #333;
      border-bottom: 2px solid #eee; /* Add underline */
      padding-bottom: 0.75rem;
    }
    .form-group {
      margin-bottom: 0.8rem; /* Wider margin */
    }
    /* Updated for horizontal alignment */
    .form-group.horizontal {
        display: flex;
        align-items: center;
        gap: 1rem; /* Space between label and input */
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
    }
    .form-group.horizontal .form-label {
        margin-bottom: 0; /* Remove bottom margin for horizontal alignment */
        flex-shrink: 0; /* Prevent label from shrinking */
    }
    .form-group.horizontal input,
    .form-group.horizontal select {
        flex-grow: 0; /* Allow input/select to grow */
        width: auto; /* Override default 100% width */
    }

    .form-label {
      display: block;
      color: #444;
      font-size: 0.95rem; /* Slightly larger */
      font-weight: 600; /* Bolder */
      margin-bottom: 0.6rem; /* Wider margin */
    }
    /* Common form elements */
    input, select, textarea {
      display: block;
      width: 100%;
      padding: 0.85rem; /* Increased padding */
      border-radius: 0.5rem; /* More rounded corners */
      background-color: #f8f8f8; /* Light background */
      border: 1px solid #dcdcdc; /* Delicate border */
      color: #333;
      box-sizing: border-box;
      transition: all 0.2s ease-in-out; /* Transition on hover/focus */
      font-size: 1rem;
    }
    input:focus, select:focus, textarea:focus {
      outline: none;
      border-color: #6A11CB; /* Focus color */
      box-shadow: 0 0 0 3px rgba(106, 17, 203, 0.2); /* Focus shadow */
      background-color: #fff;
    }
    /* Light version form (for card name, text) */
    .input-light {
      background-color: #fff;
      color: #333;
    }
    textarea.input-light {
      min-height: 8rem; /* Increased min-height */
      resize: vertical; /* Resizable only vertically */
    }
    /* Download button */
    .download-button {
      width: 100%;
      background: linear-gradient(to right, #2575FC, #6A11CB); /* More vibrant gradient */
      color: white;
      font-weight: bold;
      padding: 1rem; /* Increased padding */
      border-radius: 0.75rem; /* More rounded corners */
      border: none;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 8px 15px rgba(0,0,0,0.1); /* Stronger shadow */
      font-size: 1.1rem;
      letter-spacing: 0.03em;
      margin-top: auto; /* Push to bottom of the panel if needed */
    }
    .download-button:hover {
      opacity: 0.9;
      transform: translateY(-3px); /* Slightly move up */
      box-shadow: 0 12px 20px rgba(0,0,0,0.15);
    }
    .download-button:active {
      transform: translateY(0);
      box-shadow: 0 6px 10px rgba(0,0,0,0.1);
    }
    /* Canvas section */
    .canvas-section {
      flex: 1;
      background-color: #FFFFFF;
      padding: 1.5rem; /* Increased padding */
      border-radius: 1.25rem; /* More rounded corners */
      border: 1px solid #e0e0e0;
      box-shadow: 0 15px 30px -5px rgba(0,0,0,0.08), 0 6px 12px -3px rgba(0,0,0,0.03);
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 600px; /* Set min-height to prevent layout collapse */
    }
    canvas {
      max-width: 100%; /* Adjust width to parent element */
      height: auto; /* Maintain aspect ratio */
      border: 1px solid #ccc;
      border-radius: 0.75rem; /* More rounded corners */
      box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Stronger shadow */
    }

    /* Drag & drop area style */
    .drop-area {
      border: 2px dashed #a0a0a0; /* Dashed border */
      border-radius: 0.75rem;
      padding: 2rem;
      text-align: center;
      cursor: pointer;
      transition: background-color 0.3s ease, border-color 0.3s ease;
      margin-top: 0.5rem;
      background-color: #f0f0f0; /* Light gray background */
      color: #666;
    }
    .drop-area.highlight {
      background-color: #e0e0ff; /* Background color on drag over */
      border-color: #6A11CB; /* Border color on drag over */
    }
    .drop-area p {
      margin: 0.5rem 0;
      font-size: 1.1rem;
      font-weight: 600;
    }
    .drop-area .icon {
      font-size: 2.5rem; /* Icon size */
      margin-bottom: 0.5rem;
      color: #6A11CB; /* Icon color */
    }
    /* File input is hidden */
    #cardImageUpload {
      display: none;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .yu-gi-oh-container {
        gap: 1.5rem;
      }
      .control-section, .canvas-section {
        padding: 1.5rem;
        border-radius: 1rem;
      }
      .control-section {
          max-height: none !important;
          overflow-y: visible;
      }
      .section-title {
        font-size: 1.6rem;
        margin-bottom: 1.5rem;
      }
      .form-group {
        margin-bottom: 1rem;
      }
      /* Ensure horizontal layout adapts */
      .form-group.horizontal {
          flex-direction: column;
          align-items: flex-start;
          gap: 0.5rem;
      }
      .form-group.horizontal input,
      .form-group.horizontal select {
          width: 100%; /* Full width on small screens */
      }
      input, select, textarea {
        padding: 0.75rem;
        font-size: 0.95rem;
      }
      .download-button {
        padding: 0.85rem;
        font-size: 1rem;
      }
      .drop-area p {
        font-size: 1rem;
      }
      .drop-area .icon {
        font-size: 2rem;
      }
    }

    /* Fixed width for ATK and DEF textboxes */
    .form-group.horizontal #atk,
    .form-group.horizontal #def {
        width: 100px; /* Fixed width */
        flex-grow: 0; /* Do not grow */
        flex-shrink: 0; /* Do not shrink */
    }

    /* Style for pendulum scale input */
    .form-group.horizontal #pendulumScale {
        width: 80px; /* Smaller fixed width for 2-digit number */
    }

    /* Link Marker specific styles */
    .link-marker-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        margin-top: 0.5rem;
        width: fit-content; /* Adjust width to content */
    }

    .link-marker-grid label {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        cursor: pointer;
        font-size: 0.9rem;
        user-select: none; /* Prevent text selection on double click */
    }
    .link-marker-grid input[type="checkbox"] {
        width: 1.2rem; /* Make checkbox larger */
        height: 1.2rem; /* Make checkbox larger */
        margin: 0;
        flex-shrink: 0;
    }

    /* New style for horizontal radio buttons */
    .radio-group-horizontal {
        display: flex;
        gap: 2.5rem; /* Adjust spacing between radio buttons */
        flex-wrap: wrap; /* Allow wrapping on small screens */
    }
    .radio-group-horizontal label {
        display: flex;
        align-items: left;
        gap: 0.1rem;
    }