*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pink:#ffb3c6;--pink2:#f7a8d4;--lav:#dbbff5;
  --peach:#ffd6c0;--cream:#fff8f2;
  --brown:#7a5c50;--text:#3d2b22;--muted:#b09080;
  --sh:rgba(120,80,60,0.14);--r:16px;
}
html,body{
  width:100%;height:100%;overflow:hidden;
  background:var(--cream);
  font-family:'Nunito',sans-serif;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
#stage{position:fixed;inset:0;}

/* polka dot bg */
#stage::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle,#ffb3c622 1.5px,transparent 1.5px);
  background-size:28px 28px;
}

/* draw canvas */
#draw-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:2;touch-action:none;cursor:crosshair;
}

/* three.js canvas — sits over draw canvas in view mode */
#three-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:3;display:none;
}
#three-canvas.active{display:block;pointer-events:auto;}

/* draw hint */
#draw-hint{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-60%);
  z-index:4;pointer-events:none;text-align:center;transition:opacity .4s;
}
.dh-emoji{font-size:50px;display:block;animation:floatY 2.5s ease infinite;}
.dh-txt{font-family:'Fredoka',sans-serif;font-size:18px;margin-top:6px;color:var(--muted);}

/* header */
header{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding:10px 16px;
  padding-top:max(10px,env(safe-area-inset-top));
  background:linear-gradient(to bottom,rgba(255,248,242,.97) 55%,transparent 100%);
  display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;gap:8px;}
.logo-blob{
  width:32px;height:32px;
  background:linear-gradient(135deg,var(--pink),var(--lav));
  border-radius:50% 40% 50% 40%/40% 50% 40% 50%;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  animation:blobWobble 4s ease-in-out infinite;
  box-shadow:0 2px 10px rgba(255,150,180,.4);
}
.logo-name{font-family:'Fredoka',sans-serif;font-size:22px;font-weight:700;color:var(--text);}
.logo-name em{font-style:normal;color:#d97ac4;}

/* bottom toolbar */
#toolbar{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  padding:10px 14px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(255,248,242,.97) 65%,transparent 100%);
  display:flex;flex-direction:column;gap:1rem;align-items:center;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
#toolbar.hidden{transform:translateY(100%);}

.colors{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
  overflow-x:auto;
  scrollbar-width:none;
  padding:2px 0;
  width:100%;}
.colors::-webkit-scrollbar{display:none;}
.sw{
  width:28px;height:28px;flex-shrink:0;border-radius:50%;
  border:2.5px solid transparent;cursor:pointer;transition:transform .15s;position:relative;
}
.sw:active{transform:scale(1.15);}
.sw.on{border-color:var(--brown);transform:scale(1.25);}
.sw.on::after{
  content:'✓';position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:rgba(0,0,0,.4);
}

.tool-row{display:flex;gap:6px;align-items:center;justify-content:center;width:100%;}
.tbtn{
  background:rgba(255,255,255,.92);border:2px solid var(--peach);
  border-radius:10px;padding:5px 11px;
  font-family:'Fredoka',sans-serif;font-size:13px;
  color:var(--brown);cursor:pointer;transition:all .15s;
  backdrop-filter:blur(4px);white-space:nowrap;
}
.tbtn:active{transform:scale(.95);}
.tbtn.on{background:var(--pink);border-color:var(--pink2);color:var(--text);}

.sz-row{
  display:flex;align-items:center;gap:8px;
  font-family:'Fredoka',sans-serif;font-size:12px;color:var(--brown);
}
.sz-row input{width:70px;accent-color:#d97ac4;}

/* go button — standalone row */
#go-btn{
  width:max-content;
  padding:13px;
  background:linear-gradient(135deg,#ffb3c6,#d97ac4);
  color:white;border:none;border-radius:var(--r);
  font-family:'Fredoka',sans-serif;font-size:18px;font-weight:600;
  cursor:pointer;letter-spacing:.3px;
  box-shadow:0 4px 16px rgba(217,122,196,.38);
  transition:all .18s;position:relative;overflow:hidden;
}
#go-btn::after{
  content:'';position:absolute;top:-50%;left:-60%;
  width:40%;height:200%;background:rgba(255,255,255,.25);
  transform:skewX(-20deg);transition:left .4s;
}
#go-btn:hover::after{left:120%;}
#go-btn:active{transform:scale(.97);}

/* view controls */
#view-controls{
  position:absolute;bottom:0;left:0;right:0;z-index:10;
  display:none;flex-direction:column;gap:10px;align-items:center;
  padding:12px 14px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  background:linear-gradient(to top,rgba(255,248,242,.97) 65%,transparent 100%);
}
#view-controls.show{display:flex;}

#tex-strip{
  display:flex;gap:8px;align-items:center;justify-content:center;
  overflow-x:auto;scrollbar-width:none;padding:2px 0;
}
#tex-strip::-webkit-scrollbar{display:none;}
.tex-lbl{font-family:'Fredoka',sans-serif;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;}
.tx{
  display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;
  width:50px;height:52px;border-radius:12px;
  border:2px solid var(--peach);background:rgba(255,255,255,.9);
  font-size:20px;cursor:pointer;justify-content:center;
  transition:all .15s;backdrop-filter:blur(4px);
}
.tx span{font-size:9px;font-family:'Fredoka',sans-serif;color:var(--brown);font-weight:600;}
.tx:active{transform:scale(.92);}
.tx.on{background:var(--pink);border-color:var(--pink2);}

.view-row{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;}
#back-btn{
  background:rgba(255,255,255,.92);border:2px solid var(--peach);border-radius:var(--r);
  padding:10px 18px;font-family:'Fredoka',sans-serif;font-size:16px;font-weight:600;
  color:var(--brown);cursor:pointer;backdrop-filter:blur(4px);transition:all .15s;
}
#back-btn:active{transform:scale(.95);}
#drag-hint{
  font-family:'Fredoka',sans-serif;font-size:13px;color:var(--muted);
  background:rgba(255,255,255,.8);border-radius:50px;padding:6px 14px;
  animation:fadePulse 3s ease infinite;
}

/* loading */
#loading{
  position:absolute;inset:0;z-index:50;display:none;
  align-items:center;justify-content:center;flex-direction:column;gap:14px;
  background:rgba(255,248,242,.88);backdrop-filter:blur(12px);
}
#loading.show{display:flex;}
.ld-ball{
  width:70px;height:70px;border-radius:50%;
  background:linear-gradient(135deg,var(--pink),var(--lav));
  animation:ldPulse 1.1s ease infinite;
  display:flex;align-items:center;justify-content:center;font-size:28px;
}
.ld-title{font-family:'Fredoka',sans-serif;font-size:21px;font-weight:600;color:var(--text);}
.ld-sub{font-size:13px;color:var(--muted);animation:fadePulse 2s ease infinite;}
.ld-dots span{display:inline-block;font-size:20px;color:var(--pink);animation:dotBounce 1.1s ease infinite;}
.ld-dots span:nth-child(2){animation-delay:.18s;}
.ld-dots span:nth-child(3){animation-delay:.36s;}

@keyframes blobWobble{
  0%,100%{border-radius:50% 40% 50% 40%/40% 50% 40% 50%;}
  33%{border-radius:40% 50% 40% 50%/50% 40% 60% 40%;}
  66%{border-radius:60% 40% 60% 40%/40% 60% 40% 60%;}
}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-12px);}}
@keyframes ldPulse{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,179,198,.5);}
  70%{transform:scale(1.1);box-shadow:0 0 0 18px rgba(255,179,198,0);}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,179,198,0);}
}
@keyframes fadePulse{0%,100%{opacity:1;}50%{opacity:.4;}}
@keyframes dotBounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

/* capture button */
#capture-btn{
  width:62px;height:62px;border-radius:50%;
  background:white;border:4px solid var(--pink);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;cursor:pointer;flex-shrink:0;
  box-shadow:0 4px 18px rgba(217,122,196,.35);
  transition:all .15s;position:relative;
}
#capture-btn:active{transform:scale(.9);}
#capture-btn.recording{border-color:#ff3b30;animation:recPulse 1s ease infinite;}
#capture-btn .inner{
  width:22px;height:22px;border-radius:50%;
  background:var(--pink);transition:all .2s;
}
#capture-btn.recording .inner{
  border-radius:4px;background:#ff3b30;width:18px;height:18px;
}
#rec-timer{
  position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;
  color:#ff3b30;background:rgba(255,255,255,.9);
  border-radius:20px;padding:2px 8px;white-space:nowrap;
  display:none;
}
#rec-timer.show{display:block;}

.cap-row{display:flex;align-items:center;justify-content:center;gap:16px;position:relative;}
.cap-mode-btn{
  background:rgba(255,255,255,.9);border:2px solid var(--peach);
  border-radius:50px;padding:6px 14px;
  font-family:'Fredoka',sans-serif;font-size:13px;font-weight:600;
  color:var(--muted);cursor:pointer;transition:all .15s;
}
.cap-mode-btn.on{background:var(--pink);border-color:var(--pink2);color:var(--text);}

/* share card overlay */
#share-overlay{
  display:none;position:absolute;inset:0;z-index:60;
  background:rgba(20,10,30,.7);backdrop-filter:blur(10px);
  align-items:center;justify-content:center;padding:20px;
}
#share-overlay.show{display:flex;animation:fadeIn .2s ease;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

#share-card{
  width:100%;max-width:340px;
  border-radius:28px;overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.4);
  animation:cardPop .32s cubic-bezier(.34,1.56,.64,1);
  background:#fff;
}
@keyframes cardPop{from{transform:scale(.78) translateY(20px);opacity:0;}to{transform:scale(1) translateY(0);opacity:1;}}

/* media area — the screenshot in a branded frame */
#share-card-media{
  position:relative;width:100%;overflow:hidden;
  background:linear-gradient(135deg,#2d1b4e 0%,#1a2a4a 100%);
  min-height:180px;
  display:flex;align-items:center;justify-content:center;
}
/* subtle sparkle pattern */
#share-card-media::before{
  content:'';position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(circle,rgba(255,180,210,.15) 1px,transparent 1px),
    radial-gradient(circle,rgba(180,150,255,.1) 1px,transparent 1px);
  background-size:32px 32px, 20px 20px;
  background-position:0 0, 10px 10px;
}
#share-card-img{
  width:100%;max-height:300px;
  object-fit:contain;position:relative;z-index:1;
  display:none;
}
#share-card-img.show{display:block;}
#share-card-vid{
  width:100%;max-height:300px;
  object-fit:contain;position:relative;z-index:1;
  display:none;
}
#share-card-vid.show{display:block;}

/* brand watermark strip */
#share-card-brand{
  position:absolute;bottom:0;left:0;right:0;z-index:2;
  display:flex;align-items:center;gap:6px;padding:20px 14px 10px;
  background:linear-gradient(to top,rgba(0,0,0,.65) 0%,transparent 100%);
}
.brand-dot{
  width:22px;height:22px;border-radius:50%;
  background:linear-gradient(135deg,#ffb3c6,#dbbff5);
  display:flex;align-items:center;justify-content:center;font-size:10px;
  box-shadow:0 2px 6px rgba(0,0,0,.3);
  flex-shrink:0;
}
.brand-name{
  font-family:'Fredoka',sans-serif;font-size:14px;font-weight:700;
  color:rgba(255,255,255,.95);letter-spacing:.3px;
}
.brand-name em{font-style:normal;color:#ffb3c6;}

/* bottom actions */
#share-card-actions{
  background:white;padding:18px 16px 16px;
  display:flex;flex-direction:column;gap:12px;align-items:center;
}
.share-card-title{
  font-family:'Fredoka',sans-serif;font-size:17px;font-weight:600;
  color:var(--text);text-align:center;margin:0;
}
.share-card-btns{display:flex;gap:10px;width:100%;}
.sc-btn{
  flex:1;padding:13px 8px;border:none;border-radius:16px;
  font-family:'Fredoka',sans-serif;font-size:15px;font-weight:600;
  cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px;
}
.sc-btn:active{transform:scale(.95);}
.sc-save{
  background:linear-gradient(135deg,#ffb3c6,#d97ac4);
  color:white;box-shadow:0 4px 14px rgba(217,122,196,.45);
}
.sc-share{
  background:linear-gradient(135deg,#6dd5fa,#2980d4);
  color:white;box-shadow:0 4px 14px rgba(41,128,212,.35);
}
.sc-close{
  background:none;border:none;color:var(--muted);
  font-family:'Fredoka',sans-serif;font-size:13px;
  cursor:pointer;padding:2px 0;letter-spacing:.2px;
}

@keyframes recPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,48,.4);}70%{box-shadow:0 0 0 12px rgba(255,59,48,0);}}