/* ==========================================================
   מנועי עיר ההמצאות - עיצוב

   שפה משותפת: מתכת בהירה, ברגים, קווי מתאר עבים ואור נורה.
   העיר צריכה להיראות כמו סדנה שעובדת - נקייה, צבעונית,
   ולא קרה.
   ========================================================== */

/* ---------------------------------------------- 1. צבעים */
/*
  סדנת הצבע: שולחן עץ, אור חלון, והכלי במרכז. הרקע האפור
  השטוח שהיה כאן קודם גרם לכל המסך להיראות כמו הדגמה.
*/
.col-stage {
  position: absolute;
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(118px, 21vmin, 190px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 4vmin, 56px);
  flex-wrap: wrap;
  overflow: hidden;
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    radial-gradient(52% 62% at 50% 34%, rgba(255, 250, 226, .95), transparent 74%),
    repeating-linear-gradient(90deg, rgba(140, 120, 96, .06) 0 2px, transparent 2px 86px),
    linear-gradient(180deg, #f2ece0 0 74%, #ddd2bf 100%);
}
/* שולחן העבודה */
.col-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 16%;
  background:
    repeating-linear-gradient(90deg, rgba(110, 78, 44, .16) 0 3px, transparent 3px 104px),
    linear-gradient(180deg, #c69a68, #9a6f42);
  box-shadow: inset 0 7px 12px rgba(90, 58, 28, .3);
}
.col-tray {
  position: absolute;
  inset-inline: clamp(8px, 1.6vmin, 18px);
  bottom: clamp(8px, 1.6vmin, 18px);
  min-height: clamp(96px, 17vmin, 158px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vmin, 36px);
  padding: clamp(8px, 1.4vmin, 16px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    repeating-linear-gradient(90deg, rgba(120, 110, 96, .09) 0 24px, transparent 24px 50px),
    linear-gradient(180deg, #f6efe2, #ded4c2);
  border: clamp(3px, .6vmin, 6px) solid #b0a48f;
  box-shadow: inset 0 6px 12px rgba(110, 96, 74, .18);
}

.col-opt, .col-thing {
  width: clamp(72px, 13vmin, 132px);
  aspect-ratio: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .14s ease, opacity .3s ease;
  filter: drop-shadow(0 4px 7px rgba(40, 60, 90, .3));
}
.col-opt svg, .col-thing svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.col-opt:active { cursor: grabbing; }
.col-thing { cursor: pointer; width: clamp(84px, 15vmin, 150px); }
.col-opt:active, .col-thing:active { transform: translateY(4px) scale(.96); }
.col-opt.right, .col-thing.right { animation: colPop .5s ease; }
@keyframes colPop {
  0%, 100% { transform: scale(1); }
  45%      { transform: scale(1.18); }
}

/* הכלי, וכפתור הריקון שלידו */
.col-potwrap { position: relative; display: flex; align-items: flex-end; gap: clamp(4px, 1vmin, 12px); }
.col-pot {
  width: clamp(124px, 25vmin, 250px);
  cursor: grab;
  touch-action: none;
}
.col-pot svg { width: 100%; height: auto; display: block; pointer-events: none; }
.col-pot.mixing { animation: colStir .7s ease; }
@keyframes colStir {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-5deg); }
  70%      { transform: rotate(5deg); }
}
/*
  ריקון הכלי. בלי הכפתור הזה ערבוב שגוי היה מבוי סתום, ואי
  אפשר היה להתנסות בחופשיות במעבדה.
*/
.col-spill {
  width: clamp(46px, 8vmin, 84px);
  aspect-ratio: 1;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 3px 0 rgba(90, 97, 107, .35);
  /*
    padding באחוזים נמדד לפי רוחב ההורה ולא לפי הכפתור עצמו -
    כאן זה הגיע ל-32px על כפתור בן 65px ומחק את כל התוכן.
  */
  padding: clamp(6px, 1.1vmin, 12px);
  cursor: pointer;
  opacity: .3;
  transition: opacity .2s ease, transform .14s ease;
}
.col-spill svg { width: 100%; height: 100%; display: block; }
.col-spill.on { opacity: 1; }
.col-spill:active { transform: translateY(3px); }
.col-spill.hint-pulse { animation: ppHint 1.2s ease-in-out infinite; }

/* היעד: "זה הצבע שאני רוצה" - במסגרת, כדי שלא ייקרא כאפשרות */
.col-goal {
  width: clamp(84px, 15vmin, 152px);
  padding: clamp(6px, 1.2vmin, 14px);
  border-radius: 24%;
  background: rgba(255, 255, 255, .8);
  border: clamp(3px, .7vmin, 7px) dashed #b0a48f;
  box-shadow: 0 0 clamp(10px, 2vmin, 22px) rgba(255, 220, 130, .8);
}
.col-goal svg { width: 100%; height: auto; display: block; }

/* האובייקט שנצבע - שלב "צביעה לפי מטרה" */
.col-canvas {
  width: clamp(96px, 18vmin, 190px);
  transition: transform .2s ease;
}
.col-canvas svg { width: 100%; height: auto; display: block; }
.col-canvas.waiting { animation: colWait 1.3s ease-in-out infinite; }
@keyframes colWait {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}
.col-canvas.painted { animation: colPop .6s ease; }
.col-canvas.wrong-shake { animation: colShake .34s ease; }
@keyframes colShake {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-8px); }
  70%      { transform: translateX(8px); }
}

.col-liquid { animation: colWave 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes colWave { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .col-liquid, .col-canvas.waiting, .col-pot.mixing, .col-spill.hint-pulse { animation: none; }
}

/* ---------------------------------------------- 2. צינורות */
.pp-rig {
  display: flex;
  align-items: center;
  gap: clamp(4px, 1vmin, 12px);
}
/* ברז בצד אחד, כלי בשני - הם שמסבירים לאן המים אמורים להגיע */
.pp-tap, .pp-jug {
  width: clamp(30px, 5.4vmin, 58px);
  height: clamp(44px, 8vmin, 86px);
  flex: 0 0 auto;
  background: #8d95a3;
  border: clamp(3px, .6vmin, 6px) solid #5a616b;
}
.pp-tap { border-radius: 10px 4px 4px 10px; box-shadow: inset -6px 0 0 #4fb8e8; }
.pp-jug { border-radius: 4px 10px 10px 4px; box-shadow: inset 6px 0 0 rgba(79, 184, 232, .35); }

.pp-board {
  display: grid;
  gap: 2px;
  padding: clamp(6px, 1.2vmin, 12px);
  border-radius: clamp(10px, 2vmin, 22px);
  background: linear-gradient(180deg, #e4e8ee, #c9ced6);
  border: clamp(5px, 1vmin, 10px) solid #8d95a3;
  box-shadow: 0 8px 22px rgba(40, 60, 90, .25);
  width: min(80vw, calc(100dvh - 260px));
  aspect-ratio: 1 / 1;
  direction: ltr;
}
@media (min-aspect-ratio: 1/1) {
  .pp-board { width: min(calc(100vw - 340px), calc(100dvh - 150px)); }
}
/*
  השקע שמעליו גוררים כרגע. אומר "אפשר להניח כאן" - ולא אם זה
  החלק הנכון. את זה הילד מגלה כשהוא מניח.
*/
.as-hole.aim {
  box-shadow: 0 0 0 clamp(3px, .6vmin, 6px) rgba(255, 226, 150, .9),
              0 0 clamp(10px, 2vmin, 22px) rgba(255, 226, 150, .5);
}

.pp-cell {
  position: relative;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, .5);
  border-radius: 4px;
  cursor: pointer;
  min-width: 0;
  min-height: 0;
}
.pp-cell svg { width: 100%; height: 100%; display: block; }
.pp-cell.empty { background: rgba(141, 149, 163, .16); cursor: default; }
.pp-cell.turning { animation: ppTurn .24s ease; }
@keyframes ppTurn {
  from { transform: rotate(-18deg); }
  to   { transform: rotate(0); }
}
/* מים מופיעים רק בצינורות שכבר מחוברים לברז - משוב חי */
.pp-water { opacity: 0; transition: opacity .2s ease; }
.pp-cell.wet .pp-water { opacity: 1; }
/*
  שני הקצוות. קודם היו רק ריבועים בגוון חיוור - הילד לא ידע
  שזאת ההתחלה ושזה היעד. עכשיו יש איור על כל אחד, והם בולטים.
*/
.pp-cell.pp-src { background: rgba(79, 184, 232, .34); }
.pp-cell.pp-dst {
  background: rgba(255, 215, 106, .34);
  box-shadow: inset 0 0 0 clamp(2px, .4vmin, 4px) rgba(255, 215, 106, .9);
}
.pp-mark {
  position: absolute;
  inset: 16%;
  pointer-events: none;
  z-index: 3;
  opacity: .95;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .4));
}
.pp-mark svg { width: 100%; height: 100%; display: block; }
/* תמת האוויר: הזרימה לבנה ולא כחולה */
.flow-air .pp-water { stroke: #eaf6ff; }
.flow-air .pp-cell.pp-src { background: rgba(234, 246, 255, .3); }
.pp-cell.hint-pulse { animation: ppHint 1.2s ease-in-out infinite; }
@keyframes ppHint {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 163, 60, .7); }
  50%      { box-shadow: 0 0 0 clamp(5px, 1vmin, 10px) rgba(232, 163, 60, 0); }
}
.pp-board.flowing .pp-water { animation: ppFlow .6s linear infinite; }
@keyframes ppFlow {
  0%, 100% { stroke: #4fb8e8; }
  50%      { stroke: #9fe0ff; }
}

/* ---------------------------------------------- 3. הרכב מכונה */
/*
  מוסך, לא לוח בקרה. רצפת בטון, קיר לבנים, ואור עבודה חם מעל
  שולחן העבודה - שלוש שכבות עומק כדי שהמכונה תעמוד *במקום*
  ולא תרחף בקופסה אפורה.
*/
.as-stage {
  position: absolute;
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(118px, 21vmin, 190px);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    radial-gradient(46% 58% at 50% 30%, rgba(255, 244, 206, .85), transparent 72%),
    repeating-linear-gradient(0deg,
      rgba(90, 84, 78, .07) 0 34px, rgba(90, 84, 78, .13) 34px 36px),
    repeating-linear-gradient(90deg,
      rgba(90, 84, 78, .09) 0 2px, transparent 2px 72px),
    linear-gradient(180deg, #d6d3cd 0 72%, #b9b4ad 100%);
}
/* רצפת המוסך */
.as-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 17%;
  background:
    repeating-linear-gradient(90deg, rgba(70, 66, 62, .18) 0 3px, transparent 3px 110px),
    linear-gradient(180deg, #9a958e, #7d7871);
  box-shadow: inset 0 8px 14px rgba(50, 46, 42, .35);
}
.as-machine {
  position: relative;
  width: min(88%, 660px);
  z-index: 1;
  filter: drop-shadow(0 14px 18px rgba(50, 46, 42, .3));
}
.as-body { width: 100%; }
.as-body svg { width: 100%; height: auto; display: block; }

/* המכונה מנסה לעבוד - רעד קטן ומתמשך */
.as-body.trying { animation: asTry .18s linear infinite; }
@keyframes asTry {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(1px, -1px); }
}
/* המכונה נתקעה - טלטלה אחת חזקה ואז שקט */
.as-body.stalled { animation: asStall .5s ease; }
@keyframes asStall {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%      { transform: translateX(-7px) rotate(-1.2deg); }
  55%      { transform: translateX(6px) rotate(1deg); }
  80%      { transform: translateX(-3px); }
}
/* המכונה עובדת */
.as-body.working .as-lamp { fill: #7fe08a; animation: asLamp .6s ease-in-out infinite; }
@keyframes asLamp { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.as-body.working { animation: asShake .3s ease-in-out 8; }
@keyframes asShake {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-3px) rotate(.4deg); }
}

/* --------- השקעים: מציגים תפקיד, לא צורה --------- */
.as-holes { position: absolute; inset: 0; pointer-events: none; }
.as-hole {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(56px, 10.5vmin, 116px);
  aspect-ratio: 1;
  border: clamp(3px, .6vmin, 6px) dashed rgba(74, 84, 96, .7);
  border-radius: 22%;
  background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 3px 8px rgba(50, 60, 72, .2);
  display: grid;
  place-items: center;
  cursor: pointer;
  pointer-events: auto;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
/* סמל הצורך - "מה צריך לקרות כאן" */
.as-need {
  display: block;
  width: 62%;
  opacity: .85;
  animation: asNeed 2.4s ease-in-out infinite;
}
.as-need svg { width: 100%; height: 100%; display: block; }
@keyframes asNeed {
  0%, 100% { opacity: .55; }
  50%      { opacity: .95; }
}
.as-hole.filled {
  border-style: solid;
  border-color: rgba(74, 84, 96, .35);
  background: rgba(255, 255, 255, .28);
  /* אחוזים כאן נמדדים לפי רוחב המכונה ולא לפי השקע */
  padding: clamp(2px, .4vmin, 5px);
}
.as-hole.filled .as-need { display: none; }
.as-hole .as-piece { width: 100%; }
/* שלב שעובד - נדלק ירוק בזה אחר זה בזמן ההפעלה */
.as-hole.on {
  border-color: #4faa54;
  background: rgba(127, 224, 138, .4);
  box-shadow: 0 0 0 clamp(4px, .8vmin, 8px) rgba(127, 224, 138, .35);
}
/* השלב שנתקע - כאן רואים מה לא עובד */
.as-hole.stall {
  border-color: #e0a03c;
  background: rgba(240, 176, 80, .42);
  box-shadow: 0 0 0 clamp(4px, .8vmin, 9px) rgba(240, 160, 60, .4);
  animation: asStallPulse .5s ease-in-out 3;
}
@keyframes asStallPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.09); }
}
.as-hole.hint-pulse { animation: asHoleHint 1.2s ease-in-out infinite; }
@keyframes asHoleHint {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 rgba(232, 163, 60, .8); }
  50%      { transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 0 0 clamp(8px, 1.6vmin, 16px) rgba(232, 163, 60, 0); }
}

/* --------- כפתור ההפעלה --------- */
.as-run {
  position: absolute;
  inset-inline-end: clamp(10px, 2vmin, 22px);
  bottom: clamp(126px, 22.5vmin, 202px);
  width: clamp(62px, 11vmin, 116px);
  aspect-ratio: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  z-index: 6;
  opacity: .42;
  filter: grayscale(.7) drop-shadow(0 5px 8px rgba(40, 60, 90, .35));
  transition: opacity .2s ease, filter .2s ease, transform .14s ease;
}
.as-run svg { width: 100%; height: 100%; display: block; }
/* דלוק רק כשכל השקעים מלאים - "עכשיו אפשר לנסות" */
.as-run.armed {
  opacity: 1;
  filter: grayscale(0) drop-shadow(0 6px 12px rgba(40, 110, 60, .5));
  animation: asRunReady 1.5s ease-in-out infinite;
}
@keyframes asRunReady {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.07); }
}
.as-run:active { transform: scale(.93); }

/* --------- שכבת האפקטים: מה שהמכונה מייצרת --------- */
.as-fx { position: absolute; inset: 0; pointer-events: none; z-index: 4; overflow: visible; }
.as-bubble {
  position: absolute;
  width: clamp(16px, 3vmin, 34px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255, 255, 255, .95), rgba(180, 225, 250, .5) 55%, rgba(140, 200, 240, .2));
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7);
  animation: asBub 2.6s ease-out forwards;
}
@keyframes asBub {
  0%   { transform: translate(-50%, 0) scale(.2); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(calc(-50% + 90px), -190px) scale(var(--sz, 1)); opacity: 0; }
}
.as-note {
  position: absolute;
  width: clamp(20px, 3.6vmin, 40px);
  aspect-ratio: 1;
  background: no-repeat center/contain
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><ellipse cx='14' cy='30' rx='10' ry='7.6' fill='%238a5fc4' stroke='%235d3f8a' stroke-width='3' transform='rotate(-18 14 30)'/><path d='M23 28 L23 6' stroke='%235d3f8a' stroke-width='3.6' stroke-linecap='round'/><path d='M23 6 q 12 4 10 14' fill='none' stroke='%235d3f8a' stroke-width='3.6' stroke-linecap='round'/></svg>");
  animation: asNote 2.4s ease-out forwards;
}
@keyframes asNote {
  0%   { transform: translate(-50%, 0) scale(.3) rotate(-10deg); opacity: 0; }
  18%  { opacity: 1; }
  100% { transform: translate(calc(-50% + 60px), -170px) scale(var(--sz, 1)) rotate(18deg); opacity: 0; }
}
/* המנוף מרים ארגז אמיתי */
.as-crate {
  position: absolute;
  left: 72%;
  top: 46%;
  width: clamp(48px, 9vmin, 96px);
  aspect-ratio: 1;
  animation: asCrate 3s cubic-bezier(.4, 0, .3, 1) forwards;
}
.as-crate svg { width: 100%; height: 100%; display: block; }
@keyframes asCrate {
  0%   { transform: translate(-50%, 30%); }
  55%  { transform: translate(-50%, -68%); }
  100% { transform: translate(-50%, -68%); }
}
/* מכונת הצבע: זרם שנשפך לפחית */
.as-paint {
  position: absolute;
  left: 87%;
  top: 62%;
  width: clamp(10px, 1.8vmin, 20px);
  border-radius: 999px;
  background: linear-gradient(180deg, #7fd0f2, #3f7fd1);
  transform: translateX(-50%);
  height: 0;
  animation: asPaint 2.8s ease-out forwards;
}
@keyframes asPaint {
  0%   { height: 0; opacity: 0; }
  20%  { height: 18%; opacity: 1; }
  70%  { height: 18%; opacity: 1; }
  100% { height: 18%; opacity: 0; }
}
/* ענן העשן של תקיעה */
.as-puff {
  position: absolute;
  left: 50%;
  top: 8%;
  width: clamp(18px, 3.2vmin, 36px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(190, 190, 190, .95), rgba(190, 190, 190, 0) 70%);
  pointer-events: none;
  animation: asPuff .9s ease-out forwards;
}
@keyframes asPuff {
  0%   { transform: translate(-50%, 0) scale(.3); opacity: .9; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), -60px) scale(1.6); opacity: 0; }
}

/* --------- המגש --------- */
.as-tray {
  position: absolute;
  inset-inline: clamp(8px, 1.6vmin, 18px);
  bottom: clamp(8px, 1.6vmin, 18px);
  min-height: clamp(96px, 17vmin, 160px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vmin, 26px);
  flex-wrap: wrap;
  padding: clamp(8px, 1.4vmin, 16px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    repeating-linear-gradient(90deg, rgba(120, 110, 96, .1) 0 26px, transparent 26px 54px),
    linear-gradient(180deg, #e8e2d6, #cdc5b6);
  border: clamp(3px, .6vmin, 6px) solid #a3998a;
  box-shadow: inset 0 6px 12px rgba(90, 84, 74, .2);
}
.as-tray.hint-pulse { box-shadow: 0 0 0 4px #e8a33c88; }
.as-piece {
  width: clamp(58px, 10.5vmin, 116px);
  aspect-ratio: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .16s ease, opacity .3s ease;
  filter: drop-shadow(0 4px 6px rgba(40, 60, 90, .34));
}
.as-piece svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.as-piece:active { cursor: grabbing; }
.as-piece.gone { opacity: 0; transform: scale(.7); pointer-events: none; }
.as-piece.hint-pulse { animation: ppHint 1.2s ease-in-out infinite; }
.as-piece.wobble { animation: asWobFlat .4s ease; }
@keyframes asWobFlat {
  0%, 100% { transform: rotate(0); }
  30%      { transform: rotate(-4deg); }
  70%      { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .as-body.trying, .as-body.stalled, .as-body.working,
  .as-need, .as-run.armed, .as-hole.stall, .as-hole.hint-pulse { animation: none; }
}

/* ---------------------------------------------- 4. מסוע מיון */
/*
  אולם המיון: קיר לבנים, אור עבודה, ורצפת בטון. בלי השכבות
  האלה המסוע נראה כמו פס אפור שמרחף בקופסה.
*/
.bl-stage {
  position: absolute;
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(8px, 1.6vmin, 18px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(14px, 3vmin, 40px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    radial-gradient(56% 46% at 50% 30%, rgba(255, 248, 218, .8), transparent 72%),
    repeating-linear-gradient(0deg,
      rgba(96, 104, 116, .06) 0 32px, rgba(96, 104, 116, .12) 32px 34px),
    repeating-linear-gradient(90deg,
      rgba(96, 104, 116, .08) 0 2px, transparent 2px 68px),
    linear-gradient(180deg, #e6eaf0 0 74%, #ccd3dc 100%);
  overflow: hidden;
}
.bl-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 13%;
  background:
    repeating-linear-gradient(90deg, rgba(70, 78, 90, .16) 0 3px, transparent 3px 108px),
    linear-gradient(180deg, #a9b0bb, #868e9a);
  box-shadow: inset 0 7px 12px rgba(50, 58, 70, .34);
}

/*
  המסוע עצמו - רצועה עם שיניים שנעות בין שני גלגלים, על גבי
  מסגרת מתכת. הגלגלים הם מה שאומר "זה נע", גם כשהוא עוצר.
*/
.bl-lane {
  position: relative;
  height: clamp(96px, 17vmin, 168px);
  margin-inline: clamp(28px, 5vmin, 62px);
  border-radius: clamp(10px, 2vmin, 20px);
  background:
    repeating-linear-gradient(90deg, #8d95a3 0 14px, #7a828e 14px 28px);
  border: clamp(4px, .8vmin, 8px) solid #5a616b;
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, .26),
              inset 0 -6px 10px rgba(255, 255, 255, .14),
              0 10px 20px rgba(40, 60, 90, .26);
}
/* גלגלי הקצה */
.bl-lane::before, .bl-lane::after {
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(34px, 6vmin, 66px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateY(-50%);
  background:
    radial-gradient(circle at 36% 32%, #c2c9d2, #6d7581 62%, #4a5260);
  border: clamp(3px, .6vmin, 6px) solid #414954;
  box-shadow: inset 0 0 0 clamp(4px, .8vmin, 9px) rgba(255, 255, 255, .14);
  z-index: 1;
}
.bl-lane::before { left: calc(-1 * clamp(20px, 3.6vmin, 44px)); }
.bl-lane::after  { right: calc(-1 * clamp(20px, 3.6vmin, 44px)); }
/* המסוע רץ רק כשהוא באמת נע - עצירה נראית כעצירה */
.bl-lane.rolling { animation: blRoll 1.1s linear infinite; }
@keyframes blRoll { to { background-position: 28px 0; } }

/*
  החפץ נגרר, ולכן הוא חייב לקבל אירועי מצביע. קודם היה
  pointer-events: none והמיון נעשה רק בהקשה על פח.
  left ולא inset-inline-start: המסך RTL, ושם ההתקדמות
  הייתה נמדדת מהצד ההפוך.
*/
.bl-item {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(64px, 11vmin, 118px);
  aspect-ratio: 1;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 3;
  filter: drop-shadow(0 5px 8px rgba(40, 60, 90, .4));
}
.bl-item svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.bl-item:active { cursor: grabbing; }
.bl-item.sorted { animation: blDrop .42s ease forwards; }
@keyframes blDrop {
  to { transform: translate(-50%, 90%) scale(.6); opacity: 0; }
}
.bl-item.wobble { animation: asWobFlat .4s ease; }
/* הקשה בלי גרירה - החפץ מתרומם לרגע כדי שרואים אותו */
.bl-item.peek { animation: blPeek .6s ease; }
@keyframes blPeek {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  40%      { transform: translate(-50%, -68%) scale(1.16); }
}

.bl-bins {
  display: flex;
  justify-content: center;
  gap: clamp(12px, 3vmin, 40px);
  padding-bottom: clamp(6px, 1.2vmin, 14px);
}
/*
  הפחים מוצגים לפני שהמסוע זז, ונדלקים אחד-אחד. עד שפח קיבל
  .show הוא שקוף - כך ההצגה נקראת כרצף ולא כהופעה בבת אחת.
*/
.bl-bin {
  position: relative;
  width: clamp(96px, 17vmin, 180px);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: transform .3s cubic-bezier(.3, 1.4, .5, 1), opacity .3s ease;
  filter: drop-shadow(0 5px 9px rgba(40, 60, 90, .3));
}
.bl-bin.show { opacity: 1; transform: translateY(0); }
.bl-bin svg { width: 100%; height: auto; display: block; }
.bl-bin.show:active { transform: translateY(4px); }
/*
  הסימן על הפח - הוא הכלל, בלי מילה כתובה. left ולא
  inset-inline-start: המסך בעברית (RTL), ושם inset-inline-start
  נמדד מימין - הסימן היה נוחת בצד הפח במקום במרכזו.
*/
.bl-bin-mark {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 52%;
  z-index: 2;
}
.bl-bin.got { animation: colPop .4s ease; }
.bl-bin.wobble { animation: asWobFlat .4s ease; }
.bl-bin.hint-pulse { animation: ppHint 1.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .bl-lane.rolling, .bl-item.peek, .as-body.working .as-lamp,
  .col-liquid, .pp-board.flowing .pp-water,
  .pp-cell.hint-pulse, .as-hole.hint-pulse, .as-piece.hint-pulse,
  .bl-bin.hint-pulse { animation: none; }
}

/* ==========================================================
   אנימציות עיר ההמצאות - איורי היצורים והמפה
   ========================================================== */
.ct-spin   { animation: ctSpin 9s linear infinite; }
.ct-spin-r { animation: ctSpin 11s linear infinite reverse; }
@keyframes ctSpin { to { transform: rotate(360deg); } }

/* גלגל שיניים מסתובב סביב מרכזו - ה-transform החיצוני כבר
   מיקם אותו, ולכן הסיבוב נעשה על קבוצה פנימית בלבד. */
.cm-puff { animation: cmPuff 14s ease-in-out infinite; }
.cm-puff.d2 { animation-duration: 18s; animation-delay: -6s; }
@keyframes cmPuff {
  0%, 100% { transform: translateX(0); opacity: .5; }
  50%      { transform: translateX(40px); opacity: .85; }
}
.cm-lamp { animation: cmLamp 4.2s ease-in-out infinite; }
@keyframes cmLamp { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
.cm-hook { animation: cmHook 6s ease-in-out infinite; }
@keyframes cmHook { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }
.cm-spark { animation: cmSpark 7s ease-in-out infinite; }
.cm-spark.s1 { animation-duration: 9s; animation-delay: -3s; }
.cm-spark.s2 { animation-duration: 6s; animation-delay: -5s; }
.cm-spark.s3 { animation-duration: 11s; animation-delay: -8s; }
@keyframes cmSpark {
  0%, 100% { transform: translateY(0); opacity: 0; }
  20%      { opacity: .9; }
  100%     { transform: translateY(-46px); opacity: 0; }
}
.cm-steam { animation: cmSteam 12s ease-in-out infinite; }
.cm-steam.v1 { animation-duration: 16s; animation-delay: -5s; }
@keyframes cmSteam {
  0%, 100% { transform: translateY(0) scale(1); opacity: .2; }
  50%      { transform: translateY(-34px) scale(1.4); opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .ct-spin, .ct-spin-r, .cm-puff, .cm-lamp, .cm-hook,
  .cm-spark, .cm-steam { animation: none; }
}