/* style-tool-minecraft-skin-editor.css , JVDesignStudio
   Minecraft Skin Editor: paint the 64x64 skin texture, preview on a 3D player.
   Self-contained dark tool theme. No horizontal overflow at 390px. */

.ms-page{
  --ms-bg:#141a12;
  --ms-panel:#1d2419;
  --ms-panel2:#252e20;
  --ms-panel3:#303b29;
  --ms-border:rgba(240,234,214,.12);
  --ms-border2:rgba(240,234,214,.22);
  --ms-text:#f2f0e6;
  --ms-muted:#a7ae9c;
  --ms-grass:#7cb342;
  --ms-grass-dk:#4e7d2a;
  --ms-diamond:#6fe6dc;
  --ms-gold:#e8c34a;
  --ms-rose:#e07a6b;
  min-height:70vh;
  background:
    radial-gradient(circle at 12% -10%, rgba(124,179,66,.20), transparent 42%),
    linear-gradient(180deg,#141a12,#0f130d 70%);
  color:var(--ms-text);
  font-family:'Inter',system-ui,sans-serif;
}
.ms-page *,.ms-page *::before,.ms-page *::after{box-sizing:border-box;}

/* ---------- brief / header ---------- */
.ms-brief{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:12px 16px;border-bottom:1px solid var(--ms-border2);
  background:linear-gradient(135deg,rgba(124,179,66,.24),rgba(15,19,13,.96));
}
.ms-brief-copy{min-width:0;}
.ms-brief h1{font-family:'Fredoka',cursive;font-size:1.3rem;line-height:1.1;color:#fff;margin:0 0 3px;}
.ms-brief p{margin:0;max-width:640px;font-size:.72rem;line-height:1.45;color:rgba(242,240,230,.74);}
.ms-kicker{margin:0 0 4px;text-transform:uppercase;letter-spacing:.14em;font-size:.52rem;font-weight:800;color:var(--ms-diamond);}
.ms-brief-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.ms-help{
  min-height:40px;padding:9px 16px;border-radius:999px;border:1px solid var(--ms-border2);
  background:rgba(255,255,255,.05);color:var(--ms-text);font:inherit;font-weight:700;font-size:.72rem;cursor:pointer;
}
.ms-help:hover{border-color:var(--ms-diamond);color:var(--ms-diamond);}

/* ---------- layout ---------- */
.ms-app{
  display:grid;grid-template-columns:300px minmax(0,1fr);
  gap:14px;padding:14px;align-items:start;
}
.ms-side{
  display:flex;flex-direction:column;gap:12px;min-width:0;
}
.ms-main{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;min-width:0;align-items:start;
}

/* ---------- panels ---------- */
.ms-card{
  background:var(--ms-panel);border:1px solid var(--ms-border);border-radius:14px;padding:12px;min-width:0;
}
.ms-card h2{
  font-family:'Fredoka',cursive;font-size:.9rem;color:var(--ms-grass);margin:0 0 9px;font-weight:600;
}
.ms-ember{
  display:flex;gap:10px;align-items:flex-start;
  background:linear-gradient(135deg,rgba(232,195,74,.14),rgba(232,195,74,.04));
  border:1px solid rgba(232,195,74,.35);
}
.ms-ember img{width:42px;height:42px;flex:0 0 42px;border-radius:50%;object-fit:cover;}
.ms-ember p{margin:0;font-size:.72rem;line-height:1.5;color:rgba(242,240,230,.85);}
.ms-ember strong{color:var(--ms-gold);}

/* ---------- buttons ---------- */
.ms-grid2{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.ms-grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;}
.ms-btn{
  min-height:42px;padding:9px 10px;border-radius:10px;border:1px solid var(--ms-border2);
  background:var(--ms-panel2);color:var(--ms-text);font:inherit;font-weight:600;font-size:.74rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;line-height:1.2;
}
.ms-btn:hover{background:var(--ms-panel3);border-color:var(--ms-diamond);}
.ms-btn:focus-visible{outline:3px solid var(--ms-diamond);outline-offset:2px;}
.ms-btn.on{background:rgba(124,179,66,.22);border-color:var(--ms-grass);color:#fff;}
.ms-btn.primary{background:var(--ms-grass-dk);border-color:var(--ms-grass);color:#fff;}
.ms-btn.primary:hover{background:var(--ms-grass);}
.ms-btn.danger{color:#ffd9d2;border-color:rgba(224,122,107,.5);}
.ms-btn.danger:hover{background:rgba(224,122,107,.16);border-color:var(--ms-rose);}
.ms-btn:disabled{opacity:.45;cursor:not-allowed;}
.ms-btn .ms-emoji{font-size:1rem;}

.ms-row{display:flex;gap:8px;flex-wrap:wrap;}
.ms-fieldlabel{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ms-muted);margin:0 0 6px;font-weight:700;}
.ms-color-row{display:flex;gap:8px;align-items:center;margin-bottom:9px;}
.ms-page input[type="color"]{
  width:56px;height:44px;padding:2px;border:1px solid var(--ms-border2);border-radius:10px;background:var(--ms-panel2);cursor:pointer;
}
.ms-color-val{font-family:ui-monospace,monospace;font-size:.7rem;color:var(--ms-muted);text-transform:uppercase;}

.ms-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;}
.ms-swatch{
  aspect-ratio:1/1;min-height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.4);cursor:pointer;padding:0;
}
.ms-swatch.on{outline:2px solid #fff;outline-offset:1px;}

.ms-hint{font-size:.63rem;line-height:1.55;color:var(--ms-muted);margin:7px 0 0;}

/* ---------- paint stage ---------- */
.ms-paintwrap,.ms-previewwrap{display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;}
.ms-stage-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;width:100%;}
.paint-stage{
  position:relative;width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto;
  border-radius:12px;overflow:hidden;border:1px solid var(--ms-border2);
  background:
    repeating-conic-gradient(#2a3323 0% 25%, #222b1d 0% 50%) 50% / 20px 20px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.paint-stage canvas{
  position:absolute;inset:0;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none;
}
.paint-stage #msOverlay{cursor:crosshair;}
.ms-zoom{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap;}
.ms-zoom button{min-width:44px;}

/* ---------- 3D preview ---------- */
.ms-preview-stage{
  width:100%;max-width:520px;aspect-ratio:1/1;margin:0 auto;border-radius:12px;
  overflow:hidden;border:1px solid var(--ms-border2);
  background:radial-gradient(circle at 50% 30%, #2c3a24, #12170f 72%);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.ms-preview-stage canvas{display:block;width:100%!important;height:100%!important;}
.ms-prev-fallback{
  display:flex;align-items:center;justify-content:center;height:100%;padding:20px;text-align:center;
  font-size:.7rem;color:var(--ms-muted);line-height:1.6;
}
.ms-toggles{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;}
.ms-check{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--ms-text);min-height:40px;cursor:pointer;}
.ms-check input{width:18px;height:18px;accent-color:var(--ms-grass);cursor:pointer;}

/* ---------- toast ---------- */
#msToast{
  position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(12px);
  background:var(--ms-grass-dk);color:#fff;padding:10px 20px;border-radius:999px;
  font-size:.78rem;font-weight:700;box-shadow:0 10px 26px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:9998;
}
#msToast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- help modal ---------- */
.ms-modal{
  position:fixed;inset:0;background:rgba(6,8,5,.72);display:none;align-items:center;justify-content:center;
  padding:18px;z-index:9999;
}
.ms-modal.open{display:flex;}
.ms-modal-box{
  width:min(560px,100%);max-height:86vh;overflow:auto;background:var(--ms-panel);
  border:1px solid var(--ms-border2);border-radius:16px;padding:20px;
}
.ms-modal-box h2{font-family:'Fredoka',cursive;color:var(--ms-grass);margin:0 0 8px;font-size:1.1rem;}
.ms-modal-box p,.ms-modal-box li{font-size:.78rem;line-height:1.6;color:rgba(242,240,230,.86);}
.ms-modal-box ol{margin:10px 0 14px;padding-left:20px;display:grid;gap:7px;}
.ms-modal-box b{color:var(--ms-gold);}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .ms-app{grid-template-columns:minmax(0,1fr);}
  .ms-side{flex-direction:row;flex-wrap:wrap;}
  .ms-side .ms-card{flex:1 1 260px;}
}
@media (max-width:760px){
  .ms-main{grid-template-columns:minmax(0,1fr);}
  .ms-side{flex-direction:column;}
  .ms-side .ms-card{flex:1 1 auto;}
  .ms-brief{padding:11px 12px;}
  .ms-app{padding:10px;gap:10px;}
}
@media (max-width:420px){
  .ms-grid3{grid-template-columns:1fr 1fr;}
  .ms-swatches{grid-template-columns:repeat(6,1fr);}
}