/* ==========================================================================
   MANDALA THERAPY
   The chooser, the finish dialog and the tag styles are shared with Feel the
   Art (paint-studio.css). This file is only the board and the tray.
   ========================================================================== */

.how{ display:grid; gap:1rem; grid-template-columns:1fr; margin-top:clamp(2rem,5vw,3.5rem); }
@media (min-width:760px){ .how{ grid-template-columns:repeat(3,1fr); } }
.how__step{
  display:grid; gap:.35rem; padding:1.25rem 1.35rem; border-radius:18px;
  background:#fff; border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
}
.how__n{ font-family:var(--font-display); font-size:1.6rem; line-height:1; color:var(--accent-strong); }
.how__t{ font-weight:600; }
.how__s{ font-size:.9rem; color:var(--ink-muted); }

/* ---- play view ---------------------------------------------------------- */
.mplay{ padding-block:clamp(1.25rem,3vw,2rem) clamp(3rem,7vw,5rem); }
.mplay__bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  margin-bottom:clamp(1rem,3vw,1.75rem);
}
.mplay__title{ margin:0; font-family:var(--font-display); font-size:clamp(1.4rem,2.6vw,2rem); letter-spacing:-.02em; }
.mplay__count{ display:flex; align-items:center; gap:.8rem; font-size:.9rem; color:var(--ink-muted); font-variant-numeric:tabular-nums; }
.mplay__count b{ color:var(--ink); }
.mplay__meter{ width:120px; height:6px; border-radius:6px; overflow:hidden; background:color-mix(in srgb,var(--ink) 10%,transparent); }
.mplay__meter i{
  display:block; height:100%; transform:scaleX(0); transform-origin:left center;
  background:linear-gradient(90deg,var(--brand-aqua),var(--brand-lime),var(--brand-yellow),var(--brand-orange),var(--brand-vermilion),var(--accent));
}

.mplay__grid{ display:grid; gap:clamp(1.25rem,3vw,2rem); grid-template-columns:minmax(0,1fr); align-items:start; }
/* Grid items default to min-width:auto, i.e. "never narrower than my
   content". On a phone the tray is one long sideways row (~1300px), and
   without this it stretched the whole column — and pushed the board off
   the screen. min-width:0 lets the tray scroll inside its own box instead. */
.mplay__grid > *{ min-width:0; }
@media (min-width:960px){ .mplay__grid{ grid-template-columns:minmax(0,1fr) 340px; } }

/* ---- the board: base colour, placed pieces, hints, then the line art ---- */
.board{
  position:relative; width:100%; max-width:min(100%, calc(100svh - 190px)); margin-inline:auto;
  background:#fff; border-radius:22px; overflow:hidden;
  box-shadow:0 30px 60px -36px rgba(0,0,0,.4), 0 0 0 1px color-mix(in srgb,var(--ink) 8%,transparent);
  touch-action:none; user-select:none; -webkit-user-select:none;
  transition:box-shadow .3s var(--ease-out);
}
.board > img, .board__pieces, .board__hints{ position:absolute; inset:0; width:100%; height:100%; }
.board > img{ object-fit:contain; pointer-events:none; }
.board__lines{ z-index:4; }
.board__pieces{ z-index:2; pointer-events:none; }
.board__hints{ z-index:3; pointer-events:none; }
.board__piece, .board__hint{ position:absolute; height:auto; display:block; }
.board__hint{ filter:grayscale(1) brightness(1.05); }
.board__spark{ position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; }
/* a drag is over the board / a tapped piece is waiting for its spot */
.board.is-target{ box-shadow:0 30px 60px -36px rgba(0,0,0,.4), 0 0 0 3px color-mix(in srgb,var(--accent) 45%,transparent); }
.board.is-awaiting{ cursor:crosshair; box-shadow:0 30px 60px -36px rgba(0,0,0,.4), 0 0 0 3px var(--brand-yellow); }

/* ---- the tray ------------------------------------------------------------ */
.tray-wrap{
  border-radius:22px; background:#fff; padding:1.1rem;
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);
}
@media (min-width:960px){ .tray-wrap{ position:sticky; top:96px; } }
.tray-wrap__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; margin-bottom:.75rem; }
.tray-wrap__head h2{ margin:0; font-size:.74rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); }
.tray-wrap__hint{ font-size:.82rem; color:var(--ink-muted); margin:0 0 .9rem; }

.tray{
  display:grid; gap:.6rem; grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  max-height:min(60svh,560px); overflow:auto; padding:.15rem; overscroll-behavior:contain;
}
/* phones: one row the thumb can scroll sideways, under the board */
@media (max-width:959px){
  .tray{ grid-auto-flow:column; grid-template-columns:none; grid-auto-columns:84px; max-height:none; overflow-x:auto; overflow-y:hidden; padding-bottom:.5rem; }
}
.tray__piece{
  position:relative; aspect-ratio:1; display:grid; place-items:center; padding:8px;
  border-radius:14px; cursor:grab; background:var(--paper);
  border:1.5px solid color-mix(in srgb,var(--ink) 10%,transparent);
  /* pan-x: on a phone a sideways swipe still scrolls the tray, while
     dragging a piece up towards the board is a drag */
  touch-action:pan-x; user-select:none; -webkit-user-select:none;
  /* NEVER opacity or transform here: GSAP animates both on these pieces
     (arrive, shuffle, shake, fly home). A CSS transition on the same
     property restarts on every frame GSAP writes, and in Chrome the piece
     can end up stuck almost invisible. */
  transition:border-color .2s var(--ease-out), background .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.tray__piece img{ object-fit:contain; pointer-events:none; filter:drop-shadow(0 4px 6px rgba(0,0,0,.18)); transition:transform .25s var(--ease-out); }
.tray__piece:hover{ border-color:var(--accent); background:#fff; }
.tray__piece:hover img{ transform:scale(1.08) rotate(-3deg); }
.tray__piece:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.tray__piece.is-dragging{ opacity:.25; }
.tray__piece.is-selected{ border-color:var(--brand-yellow); background:color-mix(in srgb,var(--brand-yellow) 16%,#fff); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand-yellow) 40%,transparent); }
.tray__piece:active{ cursor:grabbing; }

/* the copy that follows the cursor or finger */
.mandala-ghost{
  position:fixed; left:0; top:0; z-index:9000; pointer-events:none;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.28));
  will-change:transform;
}

.mplay__tools{ display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-top:1rem; }
.mplay__tools .btn{ justify-content:center; }
.tool-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.7rem .9rem; border-radius:999px; font:inherit; font-size:.88rem; font-weight:500; cursor:pointer;
  background:transparent; color:var(--ink); border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);
  transition:background .2s var(--ease-out), border-color .2s var(--ease-out);
}
.tool-btn:hover{ border-color:var(--ink); background:color-mix(in srgb,var(--ink) 4%,transparent); }
.tool-btn svg{ width:16px; height:16px; }
.mplay__save{ grid-column:1 / -1; }

.finish__canvas{ display:block; width:100%; height:auto; border-radius:12px; }