/* ตะกร้าวาดด้วย CSS · ระยะห่างใช้ --s1..--s5 จาก stage.css เท่านั้น */
.baskets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--s4);
  width: 100%;
  min-width: 0;
  min-height: 0;
}
.basket {
  --basket-fill: #e8c58a;
  --basket-dark: #c4924a;
  --basket-ink: #8a5a28;
  flex: 1 1 38vmin;
  max-width: min(46vw, 300px);
  min-width: min(42vw, 240px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s2);
  border: 4px solid var(--line);
  background: var(--card);
  border-radius: var(--radius);
  font: inherit;
  color: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform .12s ease;
}
.basket:active { transform: scale(.96); }
.basket:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
.basket.correct { border-color: #79c36a; animation: sort-pop .45s ease; }
.basket.wrong { animation: sort-wobble .4s ease; }
.basket.hinted { border-color: var(--ok); animation: sort-glow 1.1s ease infinite; }
.basket[disabled] { cursor: default; }

.basket[data-cat="body"] { --basket-fill: #FF8FAB; --basket-dark: #e56b8c; --basket-ink: #a33d5c; }
.basket[data-cat="home"] { --basket-fill: #7CC6FE; --basket-dark: #4ea6e6; --basket-ink: #2b6ea3; }
.basket[data-cat="food"] { --basket-fill: #9BE08A; --basket-dark: #6cbc5c; --basket-ink: #3d7a34; }
.basket[data-cat="clothes"] { --basket-fill: #FFD166; --basket-dark: #e0b03a; --basket-ink: #a07812; }
.basket[data-cat="toys"] { --basket-fill: #FF9E7A; --basket-dark: #e07a56; --basket-ink: #a34a2e; }
.basket[data-cat="animals"] { --basket-fill: #FFB84D; --basket-dark: #e09228; --basket-ink: #9a5c0e; }
.basket[data-cat="vehicles"] { --basket-fill: #C3A6FF; --basket-dark: #9b78e0; --basket-ink: #6244a8; }
.basket[data-cat="nature"] { --basket-fill: #6FD3C8; --basket-dark: #3fb3a8; --basket-ink: #1f7a72; }

.basket-art {
  position: relative;
  width: clamp(72px, 18vmin, 140px);
  height: clamp(58px, 14vmin, 112px);
  flex: 0 0 auto;
}
.basket-handle {
  position: absolute;
  left: 24%;
  right: 24%;
  top: 0;
  height: 44%;
  border: 5px solid var(--basket-ink);
  border-bottom-color: transparent;
  border-radius: 50% 50% 42% 42%;
  box-sizing: border-box;
}
.basket-body {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 36%;
  bottom: 4%;
  background:
    repeating-linear-gradient(
      90deg,
      var(--basket-fill) 0 8px,
      var(--basket-dark) 8px 10px
    );
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  border-radius: 0 0 22% 22%;
  box-shadow: inset 0 8px 0 rgba(255, 255, 255, .22);
}
.basket-rim {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 30%;
  height: 22%;
  background: var(--basket-ink);
  border-radius: 50%;
  box-shadow:
    inset 0 -3px 0 rgba(255, 255, 255, .18),
    0 3px 0 rgba(31, 61, 52, .12);
}

.basket-samples {
  display: flex;
  gap: var(--s1);
  pointer-events: none;
  min-height: clamp(24px, 7vmin, 48px);
}
.basket-samples img {
  display: block;
  width: clamp(24px, 7vmin, 48px);
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--card);
  border: 2px solid var(--line);
  padding: var(--s1);
}

.basket-label {
  font-size: clamp(15px, 3.2vmin, 24px);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--ink);
}

.stage-prompt.is-waiting { visibility: hidden; }

/* แท็บเล็ตแนวนอน: โจทย์ซ้าย ตะกร้าขวา เพื่อไม่ล้นความสูง 820 */
@media (orientation: landscape) and (min-width: 700px) {
  #play-screen.screen.active .stage {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  #play-screen .stage-prompt,
  #play-screen .baskets {
    flex: 0 1 auto;
  }
  #play-screen .baskets {
    flex-wrap: nowrap;
    width: auto;
  }
  .basket {
    max-width: min(38vw, 280px);
  }
}

@media (max-height: 480px) {
  .basket {
    min-width: min(36vw, 220px);
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s1);
    padding: var(--s1);
  }
  .basket-art {
    width: clamp(56px, 14vmin, 96px);
    height: clamp(44px, 12vmin, 80px);
  }
  .basket-samples img { width: clamp(20px, 5vmin, 32px); }
  .basket-label { font-size: clamp(14px, 3vmin, 20px); }
}

@media (prefers-reduced-motion: reduce) {
  .basket, .basket.correct, .basket.wrong, .basket.hinted { animation: none; transition: none; }
}

@keyframes sort-pop { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.09); } }
@keyframes sort-wobble {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  75% { transform: translateX(7px); }
}
@keyframes sort-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 198, 254, 0); }
  50% { box-shadow: 0 0 0 10px rgba(124, 198, 254, .35); }
}