/* ==========================================================================
   PLOP! — BUILD YOUR DAY.

   A large play surface: a tray of six physical objects on the left, a marked-out
   area to drop them into, and the day that comes out of it underneath.

   Each token is a genuinely different object — a wooden disc, a torn blue
   splash, a crayon, a ticket, a round sticker, a card — because six identical
   chips in six colours would be a filter bar wearing a costume. They are all
   <button>s, so all of this is reachable from the keyboard.

   On a phone the tray becomes a sideways-scrolling row with 48px targets and
   the drop area sits under it: dragging still works, tapping always does.
   ========================================================================== */

.build__head { margin-bottom: clamp(1.5rem, 4vw, 3rem); }

.build__surface {
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) 2fr;
  grid-template-areas: 'tray drop' 'day  day';
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
}

/* A grid item's min-width is `auto`, which means it refuses to shrink below its
   content — and the token tray's content is six objects in a row that is meant
   to SCROLL sideways, not to widen the page. Without this the whole surface is
   twice the viewport on a phone. */
.build__tray, .build__drop, .build__day { min-width: 0; }

/* --- the tray ------------------------------------------------------------ */
.build__tray { grid-area: tray; }
.build__tokens {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  align-content: flex-start;
}

/* --- the tokens ---------------------------------------------------------- */
.token {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 6rem;
  min-height: 3.6rem;
  padding: .9rem 1.1rem;
  border: 0;
  background: var(--butter);
  color: var(--ink);
  font-family: var(--display);
  font-size: .82rem;
  letter-spacing: .02em;
  text-align: center;
  cursor: grab;
  box-shadow: var(--lift-card);
  rotate: var(--tilt, 0deg);
  touch-action: manipulation;
  transition: box-shadow var(--t-fast), filter var(--t-fast), opacity var(--t-fast);
}
.token:disabled { opacity: .4; cursor: not-allowed; }
.token.is-picked { filter: saturate(.55) brightness(1.06); }
.token.is-held {
  z-index: 60;
  box-shadow: var(--lift-held);
  cursor: grabbing;
  transition: none;
}
.token__label { pointer-events: none; }

/* six objects, six shapes */
.token--disc    { background: var(--butter);    border-radius: 50%; width: 6.2rem; height: 6.2rem; }
.token--blob    { background: var(--turquoise); color: #fff;
                  clip-path: polygon(18% 6%, 62% 0, 96% 22%, 100% 62%, 74% 96%, 30% 100%, 2% 72%, 6% 28%); }
.token--crayon  { background: var(--tomato);    color: #fff; width: 7.6rem;
                  clip-path: polygon(0 22%, 8% 0, 100% 0, 100% 100%, 8% 100%, 0 78%); }
.token--ticket  { background: var(--pink);
                  -webkit-mask: radial-gradient(circle at left center, transparent 7px, #000 7.5px),
                                radial-gradient(circle at right center, transparent 7px, #000 7.5px);
                  -webkit-mask-composite: source-in;
                  mask: radial-gradient(circle at left center, transparent 7px, #000 7.5px),
                        radial-gradient(circle at right center, transparent 7px, #000 7.5px);
                  mask-composite: intersect; }
.token--sticker { background: var(--grass); color: #fff; border-radius: 999px;
                  border: 3px solid #fff; }
.token--card    { background: var(--turquoise); color: var(--ink);
                  border-radius: 2px; box-shadow: var(--lift-card), 3px 3px 0 rgba(23,23,23,.14); }

/* --- the drop area ------------------------------------------------------- */
.build__drop {
  grid-area: drop;
  position: relative;
  min-height: clamp(14rem, 28vw, 19rem);
  /* an area marked out on the table in crayon, not a container: a thick dashed
     rule in butter yellow, and a hatch you can see the table through */
  border: 4px dashed rgba(245, 200, 66, .85);
  background:
    repeating-linear-gradient(-45deg, rgba(245,200,66,.13) 0 14px, transparent 14px 30px);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 1.2rem;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.build__drop.is-over { border-color: var(--cobalt); background-color: rgba(21, 87, 213, .07); }
.build__drop.is-landed { animation: land 380ms var(--snap); }
@keyframes land {
  0%   { transform: translateY(0); }
  35%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}
.build__droplabel { color: rgba(23, 23, 23, .55); transition: opacity var(--t-mid); }
.build__drophint { font-size: var(--t-small); color: var(--ink-soft); margin-top: .4rem; }
.build.is-built .build__droplabel,
.is-built .build__droplabel { opacity: .25; }

.build__dropped { position: absolute; inset: 0; }
.token--placed {
  position: absolute;
  animation: settle 300ms var(--snap);
}
@keyframes settle {
  0%   { transform: translateY(-10px) scale(1.05); }
  70%  { transform: translateY(2px) scale(1); }
  100% { transform: translateY(0) scale(1); }
}
.token__x {
  position: absolute;
  top: -.4rem; right: -.4rem;
  width: 1.3rem; height: 1.3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  font-size: .8rem;
  line-height: 1;
}

/* --- the day ------------------------------------------------------------- */
.build__day {
  grid-area: day;
  margin-top: clamp(1rem, 3vw, 2rem);
  padding-top: clamp(1rem, 3vw, 2rem);
  border-top: 2px solid rgba(23, 23, 23, .14);
}
.build__daytitle { margin-bottom: .8rem; }
.build__empty { color: var(--ink-soft); }

.build__plan { display: flex; flex-direction: column; gap: .1rem; }
.build__slotline {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px dashed rgba(23, 23, 23, .18);
  animation: slotin 300ms var(--settle) backwards;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes slotin {
  from { opacity: 0; transform: translateX(-10px) rotate(-.6deg); }
  to   { opacity: 1; transform: none; }
}
.build__time { color: var(--cobalt); }

.build__actions {
  display: flex;
  gap: .8rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 1.2rem 0 .8rem;
}
.build__cta { --tilt: -1.5deg; }

@media (max-width: 899px) {
  .build__surface {
    grid-template-columns: 1fr;
    grid-template-areas: 'tray' 'drop' 'day';
  }
  /* a sideways tray, so six objects do not eat half the screen */
  .build__tokens {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    padding: .4rem .2rem 1rem;
    margin-inline: -1rem;
    padding-inline: 1rem;
  }
  .build__tokens > li { flex: 0 0 auto; scroll-snap-align: center; }
  .token { min-height: 3.4rem; }         /* comfortably over the 44px minimum */
  .token--disc { width: 5rem; height: 5rem; }
  .build__drop { min-height: 13rem; }
  .build__slotline { grid-template-columns: 4.4rem 1fr; gap: .6rem; }
}