/* /draw only; everything else comes from ../styles.css. */
/* A square drawing surface (the Playground's wrapper is a circle). */
.draw-wrap{
  position:relative;
  width:min(640px, 100%);
  aspect-ratio:1/1;
  border-radius:12px;
  box-shadow:0 0 0 1px var(--line), 0 24px 60px -20px rgba(0,0,0,0.35);
  overflow:hidden;
}
.draw-wrap canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* Only the drawing canvas takes the pointer; the page still scrolls everywhere else. */
#drawCanvas{ touch-action:none; cursor:crosshair; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#drawCanvas:focus-visible{ outline:3px solid var(--coral-text); outline-offset:-3px; }
#guideCanvas{ pointer-events:none; }
@media (min-width: 861px){
  .stage-pin{ width:min(640px, 100%); }
  .draw-wrap{ width:100%; }
}
.draw-row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.draw-page .bg-preset{ padding:0; }
.draw-page .layout-group .btn[aria-checked="true"]{
  border-color:var(--coral-text);
  background:color-mix(in srgb, var(--coral) 22%, var(--paper-2));
}
.draw-page input[type="color"]{ width:56px; height:36px; padding:2px; border-radius:8px; border:2px solid var(--line); background:var(--paper-2); }

/* Use as emoji: inline name form (no modal) */
.emoji-form, .emoji-done{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.emoji-form[hidden], .emoji-done[hidden]{ display:none; }
.emoji-form canvas{ width:96px; height:96px; align-self:center; background:repeating-conic-gradient(#8884 0 25%, transparent 0 50%) 0 0/16px 16px; border-radius:50%; }
.emoji-form input[type="text"]{ font-size:16px; padding:8px 10px; min-width:0; }
.emoji-form .row, .emoji-done .row{ flex-wrap:wrap; }
.emoji-form .row > *, .emoji-done .row > *{ min-width:max-content; }