:root{
  --bg:#FDF3E7;
  --paper:#FFFBF2;
  --ink:#3E3228;
  --soft:#9A8A78;
  --card:#FFFFFF;
  --shadow:0 6px 18px rgba(140,105,70,.14), 0 1px 2px rgba(140,105,70,.08);
}

*,*::before,*::after{box-sizing:border-box;}

html,body{height:100%;margin:0;}

body{
  font-family:'Fredoka','Trebuchet MS',system-ui,-apple-system,sans-serif;
  color:var(--ink);
  background:var(--bg);
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}

[hidden]{display:none !important;}

/* ---------- soft background ---------- */
.bg-blobs{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.bg-blobs span{position:absolute;border-radius:50%;filter:blur(48px);opacity:.55;}
.bg-blobs span:nth-child(1){width:48vmin;height:48vmin;background:#FFE0B8;top:-14vmin;left:-12vmin;}
.bg-blobs span:nth-child(2){width:42vmin;height:42vmin;background:#FFD3E2;bottom:-16vmin;right:-10vmin;}
.bg-blobs span:nth-child(3){width:34vmin;height:34vmin;background:#CDEFE4;top:36%;right:-16vmin;}

/* ---------- app shell ---------- */
.app{
  position:relative;
  z-index:1;
  height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;
  grid-template-areas:"head" "stage" "dock";
  gap:8px;
  padding:8px;
}
@supports not (height:100dvh){ .app{height:100vh;} }

/* ---------- top bar ---------- */
.topbar{
  grid-area:head;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:46px;
}

.brand{display:flex;align-items:center;gap:8px;min-width:0;}

.brand-mark{
  width:36px;height:36px;flex:0 0 auto;
  border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#FFC93C,#FF8A3D);
  color:#fff;
  box-shadow:0 5px 12px rgba(255,140,60,.38);
}
.brand-mark svg{width:20px;height:20px;}

.brand-text{
  margin:0;
  font-size:19px;
  font-weight:600;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.topbar-actions{display:flex;gap:6px;flex:0 0 auto;}

.icon-btn{
  width:44px;height:44px;
  border-radius:14px;
  border:none;
  background:var(--card);
  color:#6B5A48;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .14s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease;
}
.icon-btn svg{width:22px;height:22px;}
.icon-btn .ico-off{display:none;}
.icon-btn.muted .ico-on{display:none;}
.icon-btn.muted .ico-off{display:block;}
.icon-btn.muted{color:#C3B2A0;}
.icon-btn:active{transform:scale(.9);background:#FFF3E2;}
.icon-btn:focus-visible{outline:3px solid #FFB84D;outline-offset:2px;}

/* ---------- paper ---------- */
.stage{grid-area:stage;min-height:0;display:flex;}

.paper{
  position:relative;
  flex:1;
  min-height:0;
  border-radius:24px;
  overflow:hidden;
  background-color:var(--paper);
  background-image:radial-gradient(circle,#EADFC9 1.5px, transparent 1.6px);
  background-size:24px 24px;
  background-position:center center;
  box-shadow:0 10px 28px rgba(140,105,70,.16), inset 0 0 0 3px #fff;
  touch-action:none;
}

canvas{
  display:block;
  width:100%;
  height:100%;
  touch-action:none;
  cursor:crosshair;
}

.hint{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:0 16px;
  text-align:center;
  color:#BCAB92;
  font-size:16px;
  font-weight:500;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
}
.hint-emoji{font-size:30px;line-height:1;animation:bob 1.8s ease-in-out infinite;}
.hint.gone{opacity:0;transform:translate(-50%,-50%) scale(.92);}

@keyframes bob{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-7px);}
}

/* ---------- dock ---------- */
.dock{grid-area:dock;display:flex;flex-direction:column;gap:8px;}

.row{
  display:flex;
  gap:6px;
  background:var(--card);
  border-radius:20px;
  padding:8px;
  box-shadow:var(--shadow);
}

/* colours */
.colors{justify-content:center;gap:5px;}

.swatch{
  flex:1 1 0;
  min-width:0;
  max-width:52px;
  aspect-ratio:1/1;
  border:none;
  border-radius:50%;
  padding:0;
  cursor:pointer;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.14);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), box-shadow .16s ease;
}
.swatch:active{transform:scale(.93);}
.swatch:focus-visible{outline:3px solid #FFB84D;outline-offset:3px;}
.swatch[aria-pressed="true"]{
  transform:scale(1.12);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14), 0 0 0 3px #fff, 0 0 0 6px var(--c), 0 5px 12px rgba(0,0,0,.2);
}

/* tools */
.tools{justify-content:space-between;}

.tool-btn{
  flex:1 1 0;
  max-width:66px;
  min-height:48px;
  aspect-ratio:1/1;
  border:none;
  border-radius:16px;
  background:#FFF6EA;
  color:#7A6853;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.04);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease, box-shadow .15s ease;
}
.tool-btn svg{width:26px;height:26px;}
.tool-btn:active{transform:scale(.93);}
.tool-btn:focus-visible{outline:3px solid #FFB84D;outline-offset:2px;}
.tool-btn[aria-pressed="true"]{
  background:linear-gradient(135deg,#FFC93C,#FF8A3D);
  color:#fff;
  box-shadow:0 6px 14px rgba(255,140,60,.42);
  transform:translateY(-2px);
}

/* stamps */
.stamps{justify-content:center;}

.stamp-btn{
  flex:1 1 0;
  max-width:56px;
  aspect-ratio:1/1;
  border:none;
  border-radius:16px;
  background:#FFF6EA;
  color:#8A7458;
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.04);
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), background .15s ease, color .15s ease;
}
.stamp-btn svg{width:26px;height:26px;}
.stamp-btn:active{transform:scale(.93);}
.stamp-btn:focus-visible{outline:3px solid #FFB84D;outline-offset:2px;}
.stamp-btn[aria-pressed="true"]{
  background:#FFE8B8;
  color:#E07A14;
  box-shadow:inset 0 0 0 2.5px #FFB84D;
}

/* ---------- save modal ---------- */
.modal{
  position:fixed;
  inset:0;
  z-index:60;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(62,50,40,.45);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

.modal-card{
  width:100%;
  max-width:min(420px,100%);
  max-height:100%;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px;
  border-radius:26px;
  background:#fff;
  color:var(--ink);
  text-align:center;
  box-shadow:0 24px 60px rgba(0,0,0,.3);
  animation:popIn .26s cubic-bezier(.34,1.4,.64,1) both;
}
.modal-card h2{margin:0;font-size:20px;font-weight:600;}

@keyframes popIn{
  from{opacity:0;transform:scale(.94) translateY(10px);}
  to{opacity:1;transform:scale(1) translateY(0);}
}

.save-preview{
  display:flex;
  align-items:center;
  justify-content:center;
  max-height:46vh;
  border-radius:16px;
  overflow:hidden;
  background:var(--paper);
  box-shadow:inset 0 0 0 2px #F0E6D6;
}
.save-preview img{display:block;max-width:100%;max-height:46vh;}

.modal-note{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:var(--soft);
}

.modal-actions{display:flex;gap:8px;}

.btn-primary,.btn-ghost{
  flex:1;
  display:grid;
  place-items:center;
  min-height:50px;
  padding:0 12px;
  border:none;
  border-radius:16px;
  font-family:inherit;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.btn-primary{
  background:linear-gradient(135deg,#FFC93C,#FF8A3D);
  color:#fff;
  box-shadow:0 6px 16px rgba(255,140,60,.4);
}
.btn-ghost{background:#F6EDE1;color:#6B5A48;}
.btn-primary:active,.btn-ghost:active{transform:scale(.97);}
.btn-primary:focus-visible,.btn-ghost:focus-visible{outline:3px solid #FFB84D;outline-offset:2px;}

/* ---------- narrow phones ---------- */
@media (max-width:400px){
  .brand-mark{width:32px;height:32px;border-radius:11px;}
  .brand-mark svg{width:18px;height:18px;}
  .brand-text{font-size:16px;}
  .icon-btn{width:40px;height:40px;border-radius:13px;}
  .icon-btn svg{width:20px;height:20px;}
  .topbar{gap:6px;}
  .topbar-actions{gap:5px;}
  .tool-btn svg{width:23px;height:23px;}
}

/* ---------- short screens: trim vertical chrome ---------- */
@media (max-height:520px) and (max-aspect-ratio:1/1){
  .row{padding:6px;border-radius:16px;}
  .tool-btn{border-radius:13px;}
  .tool-btn svg{width:22px;height:22px;}
  .dock{gap:6px;}
}

/* ---------- landscape / desktop: dock moves to the side ---------- */
@media (min-width:680px) and (min-aspect-ratio:1/1){
  .app{
    grid-template-columns:minmax(0,1fr) 236px;
    grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"head dock" "stage dock";
    gap:10px;
    padding:12px;
    height:100dvh;
  }
  .dock{overflow-y:auto;justify-content:flex-start;padding-right:2px;}
  .topbar{min-height:52px;}
  .colors{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;}
  .swatch{flex:none;width:100%;max-width:none;height:auto;border-radius:50%;}
  .tools{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;}
  .tool-btn{flex:none;width:100%;max-width:none;}
  .stamps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px;}
  .stamp-btn{flex:none;width:100%;max-width:none;}
  .hint{font-size:17px;}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important;}
  .hint-emoji{animation:none;}
}