/* Maya's Art Studio — the lab look (docs/look-and-feel.md): ink outlines, hard shadows, cream
   paper ground, Chewy + Sniglet, sticker buttons. Full screen, no max-width. Landscape: paper on
   the left, tools in a right column. Portrait / phone: paper on top, tools below.

   The left 68px (--gutter) is deliberately empty in landscape and the tools panel is padded by
   it in portrait: shared/back.js (🏠 top-left), shared/sound.js (🔊 bottom-left) and
   shared/postcard.js (📮 above the 🔊) all live there, they ignore <canvas> as an obstacle, and a
   button that ends up under them is untappable. The header's right padding clears ⛶. */
:root{
  --ink:#3b2a2a; --cream:#f6ead6; --paper:#fff7e6; --paper2:#fbe9c9;
  --pink:#ff5fa2; --yellow:#f2c94c; --green:#7bd94a; --blue:#5bc8ff; --purple:#c77dff; --orange:#ff9a3c; --red:#c2452b;
  --muted:rgba(59,42,42,.55);
  --sh:4px 4px 0 var(--ink); --sh2:3px 3px 0 var(--ink);
  --panelW:clamp(240px,25vw,310px); --gutter:68px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;color:var(--ink);font-family:'Nunito','Trebuchet MS',sans-serif;font-weight:800;overflow:hidden;
  -webkit-text-size-adjust:100%;overscroll-behavior:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  background-color:var(--cream);
  background-image:repeating-linear-gradient(0deg,rgba(194,69,43,.07) 0 2px,transparent 2px 22px),repeating-linear-gradient(90deg,rgba(194,69,43,.07) 0 2px,transparent 2px 22px)}
button{font-family:inherit;color:var(--ink);touch-action:manipulation}
input{font-family:inherit;color:var(--ink)}
.f,.sticker,.name,.tb b,.chip,.h1,.gname,.gwhen,#toast,.tlabel,.sz,.gallEmpty b{font-family:'Chewy','Arial Rounded MT Bold',sans-serif;font-weight:400}
.hide{display:none!important}

/* ════ LAYOUT ════ */
#app{position:fixed;inset:0;display:grid;grid-template-columns:var(--gutter) minmax(0,1fr) var(--panelW);grid-template-rows:auto minmax(0,1fr);
  column-gap:10px;row-gap:4px;padding:0 12px 12px 0}
#top{grid-column:1/-1;grid-row:1;display:flex;align-items:center;gap:10px;padding:10px 74px 6px 68px;min-height:66px;flex-wrap:wrap}
#paperWrap{grid-column:2;grid-row:2;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0;position:relative}
#tools{grid-column:3;grid-row:2;min-height:0;overflow:auto;touch-action:pan-y;display:flex;flex-direction:column;gap:9px;padding:4px 6px 6px 4px}
.row2{display:contents}

/* ── header ── */
.logo{font-size:34px;line-height:1;filter:drop-shadow(3px 3px 0 rgba(59,42,42,.25))}
.name{display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:6px 16px;font-size:clamp(17px,2.2vw,23px);
  box-shadow:var(--sh2);cursor:pointer;min-height:44px;max-width:min(46vw,380px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:rotate(-1deg)}
.name:active{transform:rotate(-1deg) translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.name span{overflow:hidden;text-overflow:ellipsis}
.chip{display:inline-flex;align-items:center;gap:6px;border:3px solid var(--ink);border-radius:999px;padding:4px 12px;font-size:15px;background:#fff;box-shadow:2px 2px 0 var(--ink);white-space:nowrap;line-height:1.1}
.chip.saved{background:#dfffd0}.chip.dirty{background:#fff3c4}.chip.off{background:#eee5d6;color:var(--muted)}
#topBtns{margin-left:auto;display:flex;gap:12px;align-items:center}
#restoreChip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:3px solid var(--ink);border-radius:999px;padding:4px 6px 4px 12px;font-size:15px;box-shadow:2px 2px 0 var(--ink);animation:pop .3s cubic-bezier(.3,1.4,.5,1)}
#restoreChip button{min-height:36px;border:3px solid var(--ink);border-radius:999px;background:var(--yellow);padding:2px 12px;font-size:15px;cursor:pointer;font-family:'Nunito',system-ui,sans-serif;font-weight:800}
#restoreChip .x{background:#fff;min-width:36px}

/* ── the paper ── */
#paper{display:block;background:#fff;border:4px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);touch-action:none;cursor:crosshair;
  background-image:radial-gradient(#fff 0,#fff 100%)}
#paper.bump{animation:pbump .4s cubic-bezier(.2,1.6,.4,1)}
@keyframes pbump{25%{transform:scale(1.015)}60%{transform:scale(.995)}}

/* ── sticker buttons ── */
.sticker{font-size:20px;letter-spacing:.5px;border:4px solid var(--ink);border-radius:16px;padding:8px 16px;box-shadow:var(--sh);cursor:pointer;
  min-height:48px;transform:rotate(-2deg);background:#fff;line-height:1.1;display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap}
.sticker:active{transform:rotate(-2deg) translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.sticker.r{transform:rotate(2deg)}.sticker.r:active{transform:rotate(2deg) translate(3px,3px)}
.sticker.pink{background:var(--pink);color:#fff}.sticker.yellow{background:var(--yellow)}.sticker.green{background:var(--green)}
.sticker.blue{background:var(--blue)}.sticker.purple{background:var(--purple);color:#fff}
.sticker.big{font-size:24px;min-height:56px;padding:10px 20px}
.sticker[disabled]{opacity:.4;pointer-events:none}
.sticker.busy{opacity:.7;pointer-events:none}
.sticker.bump{animation:bump .4s}
@keyframes bump{40%{transform:rotate(-2deg) scale(1.15)}}

/* ── tool grid ── */
.tlabel{font-size:14px;letter-spacing:1px;color:var(--muted);padding-left:2px;margin-bottom:-4px}
#toolRow{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:58px;background:#fff;border:3px solid var(--ink);border-radius:14px;
  box-shadow:var(--sh2);cursor:pointer;padding:4px 2px}
.tb i{font-style:normal;font-size:26px;line-height:1}
.tb b{font-size:13px;letter-spacing:.5px;line-height:1}
.tb:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.tb.on{background:var(--yellow);transform:rotate(-3deg) scale(1.06);box-shadow:var(--sh)}
.tb.on:active{transform:rotate(-3deg) scale(1.06) translate(2px,2px)}

#sizes{display:flex;gap:8px;flex-wrap:wrap}
.sz{width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--ink);box-shadow:var(--sh2);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.sz i{display:block;border-radius:50%;background:var(--ink)}
.sz.on{background:var(--yellow);transform:scale(1.1)}
.sz:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

#colors{display:flex;flex-wrap:wrap;gap:7px}
.cc{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);box-shadow:2px 2px 0 var(--ink);cursor:pointer;flex:0 0 auto;padding:0;position:relative}
.cc.on{outline:3px solid var(--ink);outline-offset:3px;transform:scale(1.08)}
.cc:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}

#stamps{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.st{min-height:48px;font-size:28px;line-height:1;background:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:var(--sh2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.st.on{background:var(--yellow);transform:rotate(-6deg) scale(1.1)}
.st:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}

#actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
#actions .sticker{padding:6px 8px;font-size:24px;min-height:48px;transform:none}
#actions .sticker:active{transform:translate(3px,3px)}
#bigRow{display:grid;grid-template-columns:1fr;gap:12px;margin-top:2px;padding:4px 6px 4px 4px}
#bigRow .sticker{width:100%}

/* ════ OVERLAYS ════ */
.ov{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;background:var(--cream);
  background-image:repeating-linear-gradient(0deg,rgba(194,69,43,.07) 0 2px,transparent 2px 22px),repeating-linear-gradient(90deg,rgba(194,69,43,.07) 0 2px,transparent 2px 22px)}
#gallHead{display:flex;align-items:center;gap:10px;padding:10px 74px 6px 68px;min-height:66px;flex-wrap:wrap}
#gallHead .h1{font-size:clamp(22px,3vw,32px);text-shadow:2px 2px 0 var(--yellow);white-space:nowrap}
#gallHead .cnt{font-size:16px;color:var(--muted)}
#gallScroll{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y;padding:10px 14px 140px 68px}
#gallGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px 20px}
.gcard{background:#fff;border:4px solid var(--ink);border-radius:18px;box-shadow:var(--sh);padding:10px;transform:rotate(-1deg);animation:pop .3s cubic-bezier(.3,1.4,.5,1) backwards}
.gcard:nth-child(even){transform:rotate(1deg)}
.gcard.cur{outline:4px solid var(--yellow);outline-offset:2px}
.gthumb{display:block;width:100%;aspect-ratio:4/3;border:3px solid var(--ink);border-radius:12px;overflow:hidden;background:#fff;padding:0;cursor:pointer;position:relative}
.gthumb img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.gthumb:active{transform:translate(2px,2px)}
.gthumb .go{position:absolute;right:6px;bottom:6px;background:var(--yellow);border:3px solid var(--ink);border-radius:999px;padding:2px 10px;font-size:14px;font-family:'Nunito',system-ui,sans-serif;font-weight:800;box-shadow:2px 2px 0 var(--ink)}
.gname{font-size:20px;margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.gwhen{font-size:14px;color:var(--muted);margin-top:1px}
.gbtns{display:flex;gap:6px;margin-top:8px}
.gbtns button{flex:1;min-height:44px;font-size:20px;background:var(--paper);border:3px solid var(--ink);border-radius:12px;box-shadow:2px 2px 0 var(--ink);cursor:pointer;padding:0}
.gbtns button:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.gbtns button.send{background:#ffd6e7}.gbtns button.del{background:#ffe0d6}
.gallEmpty{text-align:center;padding:40px 20px;font-size:18px;line-height:1.5;color:var(--muted)}
.gallEmpty b{display:block;font-size:30px;color:var(--ink);margin-bottom:8px}
.gallEmpty .em{font-size:80px;filter:drop-shadow(4px 5px 0 rgba(59,42,42,.25));line-height:1.1}

/* sticker card (confirm / rename / send) */
#cardOv{position:fixed;inset:0;z-index:1000;background:rgba(59,42,42,.45);display:flex;align-items:center;justify-content:center;padding:16px;overflow:auto}
.panel{background:#fff;border:5px solid var(--ink);border-radius:24px;padding:22px 20px;max-width:440px;width:100%;text-align:center;box-shadow:8px 8px 0 var(--ink);
  transform:rotate(-1deg);animation:pop .28s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{from{transform:rotate(-1deg) scale(.6);opacity:0}}
.panel .h1{font-size:clamp(26px,5vw,36px);line-height:1.05;text-shadow:3px 3px 0 var(--pink);margin-bottom:8px;letter-spacing:.5px}
.panel p{font-size:17px;line-height:1.4;margin:6px 0 14px}
.panel .thumb{display:block;width:min(100%,300px);aspect-ratio:4/3;object-fit:cover;margin:8px auto 14px;border:4px solid var(--ink);border-radius:14px;box-shadow:var(--sh);background:#fff;transform:rotate(1.5deg)}
.panel .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.panel .btns .sticker{flex:1 1 auto;min-width:120px}
.panel input{width:100%;font-size:22px;padding:10px 14px;border:4px solid var(--ink);border-radius:14px;background:var(--paper);margin:6px 0 16px;text-align:center;box-shadow:inset 3px 3px 0 rgba(59,42,42,.12);font-weight:800}
.panel .status{min-height:24px;font-size:17px;line-height:1.4;margin:6px 0 12px}
.panel .status.ok{color:#2f8f3a}.panel .status.bad{color:var(--red)}
.panel .detail{font-size:13px;color:var(--muted);margin-top:4px}

/* ════ FX ════ */
#fx{position:fixed;inset:0;pointer-events:none;z-index:950;width:100%;height:100%}
#toast{position:fixed;top:78px;left:50%;transform:translateX(-50%) rotate(-1deg) scale(.6);opacity:0;z-index:960;pointer-events:none;background:#fff;border:4px solid var(--ink);
  border-radius:999px;padding:8px 20px;font-size:19px;box-shadow:var(--sh);white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis;transition:transform .25s cubic-bezier(.3,1.4,.5,1),opacity .2s}
#toast.show{transform:translateX(-50%) rotate(-1deg) scale(1);opacity:1}
.popem{position:fixed;pointer-events:none;z-index:955;font-size:64px;line-height:1;transform:translate(-50%,-50%);animation:popem .55s cubic-bezier(.3,1.5,.5,1) forwards;filter:drop-shadow(3px 4px 0 rgba(59,42,42,.25))}
@keyframes popem{0%{transform:translate(-50%,-50%) scale(.2)}50%{transform:translate(-50%,-70%) scale(1.5)}100%{transform:translate(-50%,-90%) scale(1);opacity:0}}
.fly{position:fixed;z-index:957;pointer-events:none;border:4px solid var(--ink);border-radius:12px;box-shadow:var(--sh);background:#fff;
  transition:transform .6s cubic-bezier(.3,.6,.4,1.15),opacity .5s .2s;transform-origin:center}

/* ════ PORTRAIT / PHONE ════ */
@media (orientation:portrait),(max-width:760px){
  #app{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;padding:0 10px 8px 10px;row-gap:6px}
  #top{grid-column:1;grid-row:1;padding:8px 66px 2px 58px;min-height:60px;gap:8px}
  #paperWrap{grid-column:1;grid-row:2}
  #tools{grid-column:1;grid-row:3;padding:2px 2px 2px var(--gutter);overflow:visible;gap:7px}
  .tlabel{display:none}
  #toolRow{grid-template-columns:repeat(6,1fr);gap:6px}
  .tb{min-height:50px;flex-direction:row;gap:5px;border-radius:12px}
  .tb i{font-size:24px}.tb b{font-size:13px}
  .row2{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
  #actions{display:flex;gap:8px;margin-left:auto}
  #actions .sticker{min-width:52px}
  #stamps{display:flex;overflow-x:auto;touch-action:pan-x;padding:2px 2px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  #stamps::-webkit-scrollbar{display:none}
  .st{flex:0 0 52px;min-height:46px}
  .cc{width:44px;height:44px} /* never below the 44px touch floor — wrap instead of shrink */
  #bigRow{grid-template-columns:1fr 1fr;padding:2px 4px 4px 2px}
  #bigRow .sticker{font-size:20px;min-height:50px}
  #gallScroll{padding:8px 12px 140px var(--gutter)}
  .name{max-width:60vw}
}
@media (max-width:480px){
  #top{padding:8px 62px 2px 56px}
  .logo{display:none}
  .name{font-size:17px;padding:4px 12px;max-width:52vw}
  #topBtns{gap:8px}
  #topBtns .sticker{font-size:17px;padding:6px 10px;min-height:44px}
  .tb b{display:none}
  .tb{min-height:46px}
  .cc{width:44px;height:44px;border-width:3px} /* 44px floor holds on phones too */
  #colors{gap:4px}
  #restoreChip .rtxt{display:none}
  #restoreChip{padding-left:6px}
  .sz{width:44px;height:44px} /* 44px floor holds on phones too */
  #actions .sticker{min-width:46px;font-size:20px;padding:4px 6px;min-height:44px}
  #bigRow .sticker{font-size:17px;min-height:46px;padding:6px 8px}
  #gallGrid{grid-template-columns:1fr}
  .panel{padding:18px 14px}
}
@media (max-height:520px) and (orientation:landscape){
  #top{min-height:54px;padding-top:6px}
  .tb{min-height:48px}
}