*{box-sizing:border-box}
:root{
  --bg1:#ffe6b3; --bg2:#ffb3b3;
  --fg:#2b2b2b; --brand:#ff6f3c; --line:#e6945e; --card:#fff4ec;
  --dock-h:72px;
}

html,body{height:100%;margin:0;width:100%;overflow-x:hidden}
body{
  font-family:"Comic Sans MS","Baloo 2",system-ui,sans-serif;
  background:linear-gradient(to bottom right,var(--bg1),var(--bg2));
  color:var(--fg); position:relative;
}

/* steluțe */
body::before,body::after{
  content:""; position:fixed; inset:-40% -40%;
  background:radial-gradient(#ffffffa6 1px,transparent 1px);
  background-size:56px 56px; z-index:0; pointer-events:none; opacity:.32;
  animation:stars 40s linear infinite; will-change:transform;
}
body::after{animation-direction:reverse; opacity:.2}
@keyframes stars{from{transform:translate(0,0)}to{transform:translate(-56px,-56px)}}

/* container */
.wrap{width:min(1180px,100%); margin-inline:auto; padding-inline:clamp(12px,3vw,18px); position:relative; z-index:1}
a{color:var(--brand);text-decoration:none}

/* header + nav */
.site-header{background:#ffcf99;border-bottom:3px solid var(--line);position:sticky;top:0;z-index:5}
.site-header .wrap{display:flex;align-items:center;gap:12px;padding:10px 0}
.logo{font-weight:700;color:#d94a00}
.hamburger{display:none;width:40px;height:40px;border:2px solid var(--line);background:#ffd6b5;border-radius:10px;align-items:center;justify-content:center;gap:3px}
.hamburger span{display:block;width:20px;height:2px;background:#d94a00}
.nav{margin-left:auto;display:flex;gap:12px;flex-wrap:wrap}
.nav a{padding:8px 10px;border-radius:8px;color:#d94a00;font-weight:600}
.nav a:hover{background:#ffd6b5}
@media (max-width:760px){
  .hamburger{display:flex}
  .nav{position:absolute; top:56px; right:12px; background:#ffcf99; border:2px solid var(--line); border-radius:10px; padding:8px; display:none; flex-direction:column; gap:6px}
  .nav.show{display:flex}
}

/* hero */
.hero{background:rgba(255,255,255,.4);border-bottom:3px solid var(--line)}
.hero .wrap{text-align:center;padding:24px 0}
h1{color:#d94a00;font-size:clamp(26px,4.2vw,46px)}
.lead{margin:8px 0 0}

/* toolbar desktop */
.bar{position:sticky; top:64px; z-index:4; background:#fff4ec; border-bottom:3px solid var(--line)}
.toolswrap{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;padding:.6rem 0}
.tools{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.nowrap{white-space:nowrap}
.file-btn,.tbtn,.tools button{
  padding:.5rem .8rem;border:2px solid var(--line);background:#ffd6b5;
  color:#2b2b2b;border-radius:.6rem;cursor:pointer;font-weight:600
}
.tbtn.active{background:#ffc299; border-color:#ff9b64}
.tools button:disabled{opacity:.5;cursor:not-allowed}
.status{margin-left:auto;font-size:.9rem;min-width:200px}

/* picker */
.picker-panel{margin:14px auto 8px; display:grid; grid-template-columns:1fr 360px; gap:16px}
.picker-panel .sub{margin:8px 0 6px;color:#d94a00}
.samples-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px}
.sample{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--card); border:2px solid var(--line); border-radius:10px; padding:8px; cursor:pointer}
.sample img{width:100%; height:120px; object-fit:contain; background:#fff; border-radius:6px; display:block}
.sample span{font-weight:600}
.dropzone{background:var(--card); border:3px dashed var(--line); border-radius:12px; min-height:180px; display:grid; place-items:center; text-align:center; padding:14px; cursor:pointer}
.dropzone:hover{background:#ffe6cc}
.dropzone:focus{outline:3px solid #ffb07a; outline-offset:2px}
.dropzone p{margin:0; font-weight:600}
.dropzone span{font-weight:700; color:#d94a00}

/* canvas vizibil */
.canwrap{display:grid;place-items:center;padding:10px 0}
.canvas-shell{width:100%; max-width:1180px}
canvas{
  display:block; width:auto; height:auto; /* raport păstrat */
  max-height:100vh;
  border:3px solid var(--line); border-radius:34px;display: center; background:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.2); touch-action:none; cursor:crosshair;
}

/* text */
.how{padding:10px 0 22px}
.how h2{color:#d94a00;margin:0 0 8px}
.jokes{padding:20px 0;background:#fff4ec;border-top:3px solid var(--line);border-bottom:3px solid var(--line)}
.joke-list{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.joke-list li{background:#ffd6b5;border:2px solid var(--line);padding:10px;border-radius:10px}
.hidden{display:none}
.more-btn{margin-top:10px;padding:.5rem .8rem;border:2px solid var(--line);background:#ffc299;border-radius:10px;cursor:pointer}

/* footer */
.site-footer{padding:18px 0;background:#ffcf99;border-top:3px solid var(--line)}
.site-footer .wrap{display:flex;flex-direction:column;gap:6px}
.site-footer a{color:#d94a00;font-weight:600}

/* responsive */
@media (max-width:900px){ .picker-panel{grid-template-columns:1fr} }
@media (max-width:560px){
  .status{display:none}
  .samples-grid{grid-template-columns:repeat(2,minmax(120px,1fr))}
}

/* MOBILE FOCUSED MODE */
@media (max-width:640px){
  body.mobile-focus .picker-panel{display:none}
  body.mobile-focus .hero{display:none}
  body.mobile-focus .bar{display:none}

  body.mobile-focus .canwrap{padding:0}
  body.mobile-focus .canvas-shell{
    height:calc(100svh - 56px - var(--dock-h));
    display:flex; align-items:center; justify-content:center;
    padding:8px;
  }
  body.mobile-focus canvas{
    width:100%;
    height:auto;
    max-height:100%;
  }

  .tool-dock{
    position:fixed; inset:auto 0 0 0; height:var(--dock-h);
    background:#fff4ec; border-top:3px solid var(--line); z-index:6;
    display:flex; align-items:center; gap:8px; padding:8px 10px;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
  }
  .tool-dock .g{display:flex; align-items:center; gap:6px}
  .tool-dock .tbtn,.tool-dock .file-btn,.tool-dock button{
    padding:.35rem .6rem; border:2px solid var(--line); background:#ffd6b5;
    border-radius:.6rem; font-size:.9rem
  }
  .tool-dock .tbtn.active{background:#ffc299; border-color:#ff9b64}
  .tool-dock input[type="color"]{width:34px; height:34px; padding:0; border:2px solid var(--line); border-radius:8px}
  .tool-dock input[type="range"]{width:110px}
  .tool-dock .mini{font-size:.8rem; min-width:40px; text-align:center}
}