/* ui_clean.css — minimal DOS‑green theme with robust layout */
:root{
  --bg:#000;
  --fg:#28956b;
  --fg-dim:#1a5f46;
  --border:#28956b;
  --w-side:300px;
  --ctl-w:140px;
  --fs:18px;
}
*{box-sizing:border-box}
html,body{overflow-x:auto; margin:0;background:var(--bg);color:var(--fg);font-family:"VT323",monospace;font-size:var(--fs);}
body{overflow-x:hidden;width:100%;}
.top{text-align:center;max-width:min(100%,1200px);margin:0 auto;padding:0 8px}
.logo{max-width:min(100%,1200px);height:auto;display:block;margin:12px auto 4px;}
.subtitle{margin:0 auto 6px;opacity:.9;letter-spacing:1px;font-size:16px;text-align:center;max-width:min(100%,1200px);padding:0 8px}

/* DOS-style progress bar */
.dos-progress{
  margin:4px 8px 8px;
  font-family:"VT323",monospace;
  font-size:14px;
  color:var(--fg);
  letter-spacing:1px;
}
.dos-progress #dosProgressText,
.dos-progress #canvasProgressText{
  margin-right:8px;
}
.dos-fill{
  display:inline-block;
  background:var(--fg);
  color:#000;
  font-weight:bold;
  min-width:20ch;
  text-align:left;
  padding:0 2px;
  margin:0 4px;
}
.dos-progress #dosProgressPercent,
.dos-progress #canvasProgressPercent{
  margin-left:4px;
}
/* Canvas progress bar specific styling */
#canvasProgressBar{
  margin:4px 0 0 0; /* Tighter margins for canvas area */
}

.shell{display:grid;grid-template-columns:var(--w-side) 1fr;gap:6px;padding:0 6px 8px;max-width:min(100%,1200px);margin:0 auto}


.panel{border:1px solid var(--border);padding:4px;display:flex;flex-direction:column;gap:4px;min-width:0}
.block{border:1px solid var(--border);padding:4px}
.block h2{margin:0 0 4px 0;font-size:20px;letter-spacing:1px}

.row{display:grid;grid-template-columns:1fr var(--ctl-w);align-items:center;gap:6px;margin:2px 0}
.ctrl{display:flex;gap:6px;align-items:center;flex-wrap:wrap;max-width:100%;overflow:hidden}
input[type="file"]{font-size:0}
input[type="file"]::file-selector-button{font-size:18px;padding:6px 10px;background:var(--fg);color:#000;border:1px solid var(--border);cursor:pointer}
.meta{opacity:.85;font-size:15px}

select,input[type="number"],input[type="text"],input[type="color"]{width:var(--ctl-w);max-width:var(--ctl-w);background:#000;color:var(--fg);border:1px solid var(--border);padding:3px 5px}
input[type="range"]{width:var(--ctl-w)}

.actions{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.btn{padding:2px 8px;border:1px solid var(--fg);background:var(--fg);color:#000;cursor:pointer;font-size:18px}
.btn.primary{box-shadow:inset 0 0 0 2px #000}
.btn:disabled{opacity:.5;cursor:not-allowed}

.status{margin:2px 0 0 0;font-size:15px}
.badge{border:1px solid var(--border);padding:4px 6px;display:inline-block}

.stage{border:1px solid var(--border);padding:6px;position:relative;min-height:640px;display:flex;flex-direction:column;gap:6px}
.canvasStage{background:#000;border:1px solid var(--border);min-height:600px;position:relative;overflow:auto;flex:1;max-width:min(100%,1200px);margin:0 auto}
.canvasStage canvas{max-width:100%;height:auto}



.overlay{position:absolute;inset:12px;display:grid;place-items:center;background:rgba(0,0,0,.3);}
.overlay[hidden]{display:none}
.overlay .box{display:grid;gap:6px;justify-items:center}
.spinner{width:28px;height:28px;border:1px solid var(--fg-dim);border-top-color:var(--fg);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* === Green theming for sliders and checkboxes === */
input[type="range"]{
  -webkit-appearance: none;
  height: 20px;
  background: #001a14;
  border:1px solid var(--border);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  width: 16px; height: 16px;
  background: var(--fg);
  border: 1px solid #000;
}
input[type="range"]::-moz-range-thumb{
  width: 16px; height: 16px;
  background: var(--fg);
  border: 1px solid #000;
}
input[type="range"]::-moz-range-track{
  background:#001a14;
  height: 16px;
  border:1px solid var(--border);
}

/* Checkboxes */
input[type="checkbox"]{
  appearance:none;
  width: 18px; height: 18px;
  border:1px solid var(--border);
  background:#000;
}
input[type="checkbox"]:checked{
  background: var(--fg);
  border-color: var(--fg);
}

/* Make color inputs and selects outline in green when focused */
select:focus, input[type="number"]:focus, input[type="text"]:focus, input[type="color"]:focus{
  outline: 2px solid var(--fg);
  outline-offset: 1px;
}

/* Source thumbnail under 'Input image' row */
.thumb{ display:none; margin-top:4px; border:1px solid var(--border); max-width:calc(var(--ctl-w) - 12px); max-height:100px; width:auto; height:auto; box-sizing:border-box; }
.thumb[src]:not([src=""]):not([src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="]){ display:block; }

/* ==========================================================================
   MOBILE RESPONSIVE STYLES
   ========================================================================== */
@media (max-width: 768px) {
  :root{
    --w-side:100%;
    --ctl-w:100%;
    --fs:16px;
  }
  
  html,body{
    overflow-x:hidden;
  }
  
  .shell{
    grid-template-columns:1fr;
    gap:4px;
    padding:0 4px 6px;
    max-width:100%;
  }
  
  .panel{
    width:100%;
    padding:4px;
  }
  
  .row{
    grid-template-columns:1fr;
    gap:4px;
    margin:4px 0;
  }
  
  .row label{
    margin-bottom:2px;
    display:block;
  }
  
  select, input[type="number"], input[type="text"], input[type="color"]{
    width:100%;
    max-width:100%;
    font-size:16px; /* Prevent zoom on iOS */
    padding:8px 10px;
  }
  
  input[type="range"]{
    width:100%;
    height:24px;
  }
  
  input[type="range"]::-webkit-slider-thumb{
    width: 24px;
    height: 24px;
  }
  
  input[type="range"]::-moz-range-thumb{
    width: 24px;
    height: 24px;
  }
  
  /* Larger touch targets for checkboxes */
  input[type="checkbox"]{
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
  }
  
  /* Larger buttons for touch */
  .btn{
    padding:8px 16px;
    font-size:18px;
    min-height:44px; /* iOS recommended touch target */
    touch-action:manipulation; /* Prevent double-tap zoom */
  }
  
  .actions{
    flex-direction:column;
    gap:6px;
  }
  
  .actions .btn{
    width:100%;
  }
  
  .stage{
    min-height:400px;
    padding:6px;
  }
  

  
  .canvasStage{
    min-height:350px;
  }
  
  .block h2{
    font-size:18px;
  }
  
  .logo{
    margin:12px 8px 4px;
  }
  
  .subtitle{
    margin:0 8px 8px;
    font-size:14px;
  }
  
  .status{
    font-size:14px;
  }
  
  .meta{
    font-size:13px;
  }
  
  /* Make file input button larger */
  input[type="file"]::file-selector-button{
    padding:10px 14px;
    font-size:18px;
    min-height:44px;
  }
  
  /* Ensure color inputs are touch-friendly */
  input[type="color"]{
    height:44px;
    min-height:44px;
  }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
  :root{
    --fs:14px;
  }
  
  .block{
    padding:4px;
  }
  
  .stage{
    min-height:300px;
  }
  
  .canvasStage{
    min-height:250px;
  }
  
  .block h2{
    font-size:16px;
  }
}