/* ================= counting scenes: the same basket mechanics, different things ================= */
/* The class on every container is skin-basket | skin-plate | skin-auto (logic/objects.js). */

/* ---- plate: a brass thali ---- */
.basket.skin-plate::before {
  left: -1%; right: -1%; top: 20%; bottom: 14px; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #fff6cf 0%, #f0cd6d 45%, #c99530 100%);
  box-shadow: inset 0 0 0 4px #d6a63c, inset 0 -8px 14px rgba(120, 70, 0, 0.28), 0 5px 0 rgba(0, 0, 0, 0.12);
}
.skin-plate .basket-front { margin-top: -12px; }
.skin-plate .basket-front .rim { display: none; }
.skin-plate .basket-front .weave { height: 20px; clip-path: none; margin: 0 4%; border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #e7b94d, #b9821f); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.14); }
.skin-plate .basket-fruit { padding-top: 6px; }

.basket.closed.skin-plate .lid { height: 76px; border-radius: 50% 50% 8px 8px / 100% 100% 8px 8px;
  background: radial-gradient(ellipse at 38% 22%, rgba(255, 255, 255, 0.6), transparent 55%), linear-gradient(180deg, #f0cd6d, #b9821f); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.14); }
.basket.closed.skin-plate .knob { background: #8a5d12; }

/* ---- auto-rickshaw: green hood, yellow body, black stripe and wheels ---- */
.basket.skin-auto::before {
  left: 1%; right: 1%; border-radius: 34px 34px 6px 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0)), linear-gradient(180deg, #e8f4ee, #cfe6da);
  box-shadow: inset 0 0 0 5px #1d6b3f, inset 0 18px 0 -2px #2e8b57, inset 0 -6px 12px rgba(0, 40, 20, 0.22);
}
.skin-auto .basket-fruit { padding-top: 8px; }
.skin-auto .basket-front { margin-top: -8px; }
.skin-auto .basket-front .rim { height: 8px; border-radius: 4px; background: #232323; box-shadow: none; }
.skin-auto .basket-front .weave { height: 34px; clip-path: none; border-radius: 4px 4px 26px 26px; margin: 0 -2px;
  background:
    radial-gradient(circle at 15% 100%, #232323 0 10px, #8a8a8a 10px 13px, transparent 14px),
    radial-gradient(circle at 85% 100%, #232323 0 10px, #8a8a8a 10px 13px, transparent 14px),
    linear-gradient(180deg, #ffd23f 0 52%, #232323 52% 60%, #ffc531 60%); }

.basket.closed.skin-auto .lid { height: 76px; border-radius: 40% 40% 8px 8px / 90% 90% 8px 8px;
  background: repeating-linear-gradient(90deg, #2e8b57 0 14px, #257547 14px 28px); box-shadow: inset 0 -6px 0 rgba(0, 0, 0, 0.16); }
.basket.closed.skin-auto .knob { background: #232323; }
.basket.closed.skin-auto .basket-front .rim { display: block; }

/* the things themselves keep their own colours; people sit a little lower so heads show */
.skin-auto .mango .ic { filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.18)); }