/* Base styles */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        margin: 0;
        overflow: hidden;
        background: #111;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    canvas {
        display: block;
        touch-action: none;
        /* Prevents default touch behaviors */
    }

    /* Control panel container */
    .control-panel {
        position: fixed;
        top: 0;
        left: 0;
        padding: 0.75rem;
        background: rgba(0, 0, 0, 0.7);
        backdrop-filter: blur(10px);
        border-radius: 0 0 1rem 0;
        z-index: 10;
        max-width: 100%;
        width: 250px;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    /* File input styling */
    #imgInput {
        width: 100%;
        padding: 0.5rem;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 0.5rem;
        border: none;
        font-size: 1rem;
        color: #333;
    }

    /* Preview canvas styling */
    #preview {
        width: 100%;
        max-width: 128px;
        height: 128px;
        border: 2px solid #888;
        background: white;
        image-rendering: pixelated;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
        border-radius: 0.5rem;
    }

    /* Button styles */
    .btn {
        background-color: rgba(255, 255, 255, 0.9);
        border: none;
        border-radius: 0.5rem;
        padding: 0.75rem 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #333;
        font-size: 1rem;
        width: 100%;
        text-align: center;
        touch-action: manipulation;
    }

    .btn:hover {
        background-color: rgba(255, 255, 255, 1);
        transform: translateY(-1px);
    }

    .btn.disabled {
        background-color: rgba(80, 80, 80, 0.7);
        color: #ffffff;
    }

    .btn.disabled:hover {
        background-color: rgba(100, 100, 100, 0.8);
    }

    /* Home button */
    .home-button {
        position: fixed;
        top: 0.75rem;
        right: 0.75rem;
        z-index: 10;
        width: auto !important;
        min-width: 80px;
        padding: 0.5rem 1rem;
    }

    /* Help button */
    .help-button {
        position: fixed;
        bottom: 0.75rem;
        left: 0.75rem;
        right: auto;
        top: auto;
        z-index: 10;
        width: auto !important;
        min-width: 110px;
        padding: 0.85rem 1.5rem;
        font-size: 1.15rem;
        font-weight: 600;
    }

    /* Helper text */
    .helper-text {
        position: fixed;
        top: 0.75rem;
        left: calc(250px + 0.75rem);
        color: white;
        background-color: rgba(255, 100, 100, 0.9);
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        font-size: 1rem;
        z-index: 11;
        pointer-events: none;
        opacity: 1;
        transition: opacity 0.5s ease;
        white-space: nowrap;
    }

    .helper-text.hidden {
        opacity: 0;
    }

    /* Controls group */
    .controls-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    /* Checkbox and slider styles */
    .control-row {
        display: flex;
        align-items: center;
        gap: 0.5rem;
        color: white;
        flex-wrap: wrap;
    }

    /* Special handling for scale control row */
    .control-row:has(input[type="range"]) {
        flex-wrap: nowrap;
    }

    .control-row:has(input[type="range"]) label {
        flex-shrink: 0;
    }

    input[type="checkbox"] {
        width: 1.2rem;
        height: 1.2rem;
    }

    input[type="range"] {
        flex: 1;
        min-width: 80px;
        height: 1.5rem;
    }

    input[type="number"] {
        width: 3rem;
        padding: 0.25rem;
        border: none;
        border-radius: 0.25rem;
        text-align: center;
        font-size: 0.9rem;
        flex-shrink: 0;
    }

    /* Mobile optimizations */
    @media (max-width: 768px) {
        .control-panel {
            width: 200px;
            padding: 0.5rem;
            gap: 0.5rem;
            font-size: 0.9rem;
            max-height: 100vh;
            overflow-y: auto;
        }

        #imgInput {
            padding: 0.35rem;
            font-size: 0.9rem;
        }

        #preview {
            max-width: 96px;
            height: 96px;
        }

        .control-row {
            gap: 0.35rem;
            font-size: 0.9rem;
        }

        input[type="checkbox"] {
            width: 1rem;
            height: 1rem;
        }

        input[type="range"] {
            height: 1.25rem;
        }

        input[type="number"] {
            width: 1.75rem;
            padding: 0.2rem;
            font-size: 0.8rem;
        }

        .btn {
            padding: 0.2rem 0.5rem;
            font-size: 0.8rem;
        }

        .home-button {
            top: 0.5rem;
            right: 0.5rem;
            padding: 0.35rem 0.75rem;
            font-size: 0.9rem;
        }

        .help-button {
            bottom: 0.5rem;
            left: 0.5rem;
            right: auto;
            top: auto;
            padding: 0.55rem 1.1rem;
            font-size: 1.02rem;
            min-width: 90px;
        }

        .helper-text {
            font-size: 0.85rem;
            padding: 0.35rem 0.5rem;
            left: 210px;
            top: 0.5rem;
            max-width: 140px; /* or adjust as needed */
            white-space: normal;
            overflow-wrap: break-word;
        }
    }

    /* Small mobile optimizations */
    @media (max-width: 480px) {
        .control-panel {
            width: 180px;
        }

        .helper-text {
            left: 190px;
            max-width: 110px; /* even narrower for very small screens */
        }
    }

    /* Loading overlay and spinner styles */
    #loadingOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(20, 20, 20, 0.85);
        z-index: 10000;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        transition: opacity 0.4s;
    }

    #loadingOverlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .spinner {
        width: 56px;
        height: 56px;
        border: 7px solid #eee;
        border-top: 7px solid #3498db;
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .loading-text {
        color: #fff;
        margin-top: 0.5rem;
        font-size: 0.8rem;
        text-align: center;
        letter-spacing: 0.01em;
        opacity: 0.92;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }

    /* Modal overlay for Help popup */
    .modal-overlay {
      position: fixed;
      top: 0; left: 0; width: 100vw; height: 100vh;
      background: rgba(20, 20, 20, 0.85);
      z-index: 20000;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity 0.3s;
    }
    .modal-overlay.hidden {
      opacity: 0;
      pointer-events: none;
    }
    .modal-content {
      background: #222;
      color: #fff;
      border-radius: 1rem;
      padding: 2rem 1.5rem 1.5rem 1.5rem;
      max-width: 420px;
      width: 90vw;
      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      position: relative;
      font-size: 1.05rem;
    }
    .modal-content h2 {
      margin-top: 0;
      margin-bottom: 0.7rem;
      font-size: 1.3rem;
      color: #7ecfff;
    }
    .modal-content ul {
      margin: 0.7em 0 0.7em 1.2em;
      padding: 0;
      font-size: 1em;
    }
    .modal-content li {
      margin-bottom: 0.4em;
    }
    .modal-close {
      position: absolute;
      top: 0.7rem;
      right: 1rem;
      background: none;
      border: none;
      color: #fff;
      font-size: 2rem;
      cursor: pointer;
      line-height: 1;
      padding: 0;
      z-index: 1;
      transition: color 0.2s;
    }
    .modal-close:hover {
      color: #ffb3b3;
    }
    @media (max-width: 600px) {
      .modal-content {
        padding: 1.1rem 0.5rem 0.7rem 0.5rem;
        font-size: 0.98rem;
      }
    }