/* ---- วาดรูป: finger painting, colouring pages, tracing (site/paint.js) ---- */
.scene.paint { background: radial-gradient(circle at 20% 15%, #FFF4E0 0 18%, transparent 19%),
  radial-gradient(circle at 85% 90%, #FFE0EA 0 14%, transparent 15%), var(--bg); }
.paint .tip { pointer-events: none; transition: opacity .8s; }
.paint .tip.paint-tip-off { opacity: 0; }

.paint-main { position: absolute; display: flex; gap: 10px;
  inset: calc(max(10px, env(safe-area-inset-top)) + 66px) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  flex-direction: column; align-items: center; }
@media (orientation: landscape) {
  .paint-main { flex-direction: row; align-items: stretch;
    inset: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) calc(max(10px, env(safe-area-inset-left)) + 66px); }
  .paint-pal { align-content: safe center; }
  .paint-main { gap: 4px; }
}
.paint-paper { position: relative; flex: 1; align-self: stretch; min-width: 0; min-height: 0; background: #fff; border-radius: 3vmin;
  box-shadow: 0 0 0 1vmin #fff, 0 1.4vmin 0 1vmin rgba(107,74,58,.13); overflow: hidden; touch-action: none; }
.paint-canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

/* paint pots */
.paint-pal { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; flex: none; padding: 8px; }
.paint-blob { width: var(--bs, 64px); height: var(--bs, 64px); flex: none; cursor: pointer; position: relative; touch-action: none;
  border-radius: 50% 44% 52% 46% / 46% 54% 44% 52%;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.8) 0 11%, rgba(255,255,255,0) 12%), var(--c, #ccc);
  box-shadow: inset calc(var(--bs, 64px) * -.1) calc(var(--bs, 64px) * -.12) 0 rgba(0,0,0,.14), 0 4px 0 rgba(107,74,58,.15);
  transition: transform .15s; }
.paint-blob.rainbow { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.8) 0 11%, rgba(255,255,255,0) 12%),
  conic-gradient(#FF4B4B, #FF9A2E, #FFD21F, #3FC45A, #3B95FF, #9B62F5, #FF6FB0, #FF4B4B); }
.paint-blob.on { transform: scale(1.12); z-index: 1;
  box-shadow: inset calc(var(--bs, 64px) * -.1) calc(var(--bs, 64px) * -.12) 0 rgba(0,0,0,.14), 0 0 0 5px #fff, 0 0 0 9px rgba(107,74,58,.25); }
.paint-blob.on::after { content: ""; position: absolute; left: 50%; bottom: -14%; width: 18%; height: 22%; transform: translateX(-50%);
  border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%; background: inherit; animation: paintdrip 1.4s ease-in-out infinite; }
.paint-blob.rainbow.on::after { background: #9B62F5; }
@keyframes paintdrip { 50% { transform: translate(-50%, 18%) scaleY(1.2) } }

/* tools (top right): hold = grown-ups, tap = back to the choices */
.paint-tools { position: absolute; z-index: 20; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); display: flex; gap: 10px; }
.paint-tool { position: relative; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.85); display: grid; place-items: center;
  font-size: 26px; cursor: pointer; box-shadow: 0 3px 0 rgba(107,74,58,.12); touch-action: none; }
.paint-tool:active { transform: scale(.94); }
.paint-tool svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.paint-tool circle { fill: none; stroke: #FF8F6B; stroke-width: 5; stroke-dasharray: 160; stroke-dashoffset: 160; }
.paint-tool.on circle { transition: stroke-dashoffset 1s linear; stroke-dashoffset: 0; }
.paint-hint { position: absolute; top: 64px; right: 0; white-space: nowrap; font-size: 13px; color: var(--soft); pointer-events: none;
  background: rgba(255,255,255,.9); padding: 4px 10px; border-radius: 10px; opacity: 0; transition: opacity .3s; }
.paint-hint.show { opacity: 1; }

/* colouring pages + tracing */
.paint-svgpaper { display: grid; place-items: center; }
.paint-page { position: absolute; inset: 3%; display: grid; place-items: center; }
.paint-svg { width: 100%; height: 100%; display: block; }
.paint-page .paint-svg { touch-action: none; }
.paint-reg { cursor: pointer; transition: fill .25s, stroke .25s; }
.paint-lines { pointer-events: none; }
.paint-trace { position: absolute; inset: 3%; width: 94%; height: 94%; touch-action: none; }
.paint-guide { fill: none; stroke: none; }
.paint-solid { fill: none; stroke: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.paint-dot { fill: #E3D6CC; transition: fill .2s, transform .2s; transform-box: fill-box; transform-origin: center; }
.paint-dot.hit { transform: scale(1.35); }
.paint-ink path { fill: none; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: .85; pointer-events: none; }
.paint-start circle { fill: #3FC45A; stroke: #fff; stroke-width: 1.2; animation: paintpulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.paint-start text { animation: paintpoke 1.2s ease-in-out infinite; }
.paint-start { transition: opacity .4s; pointer-events: none; }
.paint-start.gone { opacity: 0; }
@keyframes paintpulse { 50% { transform: scale(1.25) } }
@keyframes paintpoke { 50% { transform: translateY(-2px) } }
.paint-next { position: absolute; right: 3%; bottom: 3%; transform: scale(0); transform-origin: 100% 100%; z-index: 5;
  font: inherit; font-weight: 700; font-size: clamp(20px, 4.5vmin, 34px); color: #fff; background: #FF8F6B; border: 0;
  border-radius: 999px; padding: .35em 1.2em; box-shadow: 0 .8vmin 0 #E06F4E; cursor: pointer; transition: transform .35s cubic-bezier(.3,1.6,.5,1); }
.paint-next.show { transform: scale(1); animation: paintnext 1.6s ease-in-out .5s infinite; }
@keyframes paintnext { 50% { transform: scale(1.07) } }

/* choices for 3-4 year olds */
.paint-cards .paint-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff;
  font-weight: 700; font-size: clamp(14px, 2.6vmin, 22px); text-align: center; line-height: 1.2; }
.paint-card .paint-svg { width: 86%; height: 86%; pointer-events: none; }
.paint-cardpic { font-size: min(11vmin, 80px); line-height: 1.1; }
.paint-card:first-child, .paint-card:nth-child(2) { background: var(--butter); }

/* gallery */
.paint-gal { position: absolute; inset: 0; z-index: 30; background: rgba(255,244,224,.97); display: flex; flex-direction: column;
  padding: max(12px, env(safe-area-inset-top)) 14px 14px; animation: fadein .3s ease; }
.paint-gal-head { display: flex; align-items: center; justify-content: space-between; font-size: clamp(18px, 3.4vmin, 26px); padding: 4px 4px 10px 70px; }
.paint-x { font: inherit; font-size: 24px; width: 56px; height: 56px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); cursor: pointer; }
.paint-gal-grid { flex: 1; overflow-y: auto; touch-action: pan-y; display: grid; gap: 12px; align-content: start;
  grid-template-columns: repeat(auto-fill, minmax(min(40vw, 190px), 1fr)); }
.paint-gal-item { background: #fff; border-radius: 14px; padding: 8px; box-shadow: 0 3px 0 rgba(107,74,58,.12); text-align: center; cursor: pointer; }
.paint-gal-item img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 8px; display: block; }
.paint-gal-item small { color: var(--soft); }
.paint-gal-item.big { position: fixed; inset: 6vmin; z-index: 40; display: flex; flex-direction: column; justify-content: center; }
.paint-gal-item.big img { flex: 1; min-height: 0; aspect-ratio: auto; }
.paint-gal-empty { color: var(--soft); text-align: center; margin-top: 20vh; font-size: 18px; line-height: 1.6; padding: 0 10%; }

/* landscape: the tools stack under the home button, next to the paper */
@media (orientation: landscape) {
  .paint-tools { flex-direction: column; right: auto; left: max(10px, env(safe-area-inset-left)); top: calc(max(10px, env(safe-area-inset-top)) + 66px); }
  .paint-hint { top: 12px; right: auto; left: 64px; }
}