/* ============================================================
   Level 12 — Баночки специй

   Scene only. Every interactive element is positioned and
   animated by shared/puzzle.css; this file draws the kitchen
   cupboard the jars stand in.
   ============================================================ */

/* A painted cupboard interior. Kept cool and desaturated so seven
   saturated spice colours are the only chromatic event on screen —
   the puzzle is read by colour, so nothing else may compete. */
.scene {
  position: fixed;
  inset: 0;
  background-color: #b9b3a4;
  background-image:
    /* light falling from the open cupboard door, upper left */
    radial-gradient(ellipse 90% 70% at 22% 6%, rgba(255, 250, 236, 0.5), transparent 60%),
    /* the back wall darkening into the corners */
      radial-gradient(ellipse 120% 90% at 50% 46%, transparent 42%, rgba(48, 42, 34, 0.34) 100%),
    linear-gradient(180deg, #c2bcac 0%, #b3ac9c 58%, #a49d8e 100%);
}

/* --- the shelf --------------------------------------------- */

/* Positioned in stage units so it stays locked to the places the
   engine lays out, whatever the orientation. */
/* Top edge sits exactly where a seated jar's foot lands — the
   engine centres an object on its place, so that is place.y plus
   half the jar's height. A plank a few pixels off makes every jar
   look like it is hovering. */
.shelf {
  position: absolute;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(180deg, #d3b483 0%, #c2a071 42%, #ab8a5c 100%);
  box-shadow: 0 -14px 22px -14px rgba(48, 38, 24, 0.45), 0 3px 0 rgba(120, 94, 58, 0.9),
    0 14px 26px -8px rgba(48, 38, 24, 0.4);
}

.shelf--a {
  top: 515px;
  left: 178px;
  width: 844px;
}

/* Landscape holds all seven on one plank, so the second is not
   merely hidden — it must not cast its shadow either. */
.shelf--b {
  display: none;
}

/* The front edge, a shade darker, is what makes the plank read as
   having thickness rather than being a painted stripe. */
.shelf__front {
  position: absolute;
  top: 100%;
  left: -6px;
  width: calc(100% + 12px);
  height: 15px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(180deg, #9c7d51 0%, #8a6d45 100%);
  box-shadow: inset 0 1px 0 rgba(255, 236, 202, 0.28);
}

.stage.is-portrait .shelf--a {
  top: 723px;
  left: 62px;
  width: 656px;
}

.stage.is-portrait .shelf--b {
  display: block;
  top: 1033px;
  left: 142px;
  width: 496px;
}

/* --- where a jar stands ------------------------------------ */

/* Contact shadow, drawn on the shelf rather than under the jar so
   it stays behind when the jar is picked up — a shadow that
   travels with a lifted object is the classic tell of a flat
   sticker being dragged around. */
.shelf-mark {
  display: block;
  width: 104px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(52, 40, 24, 0.32), transparent 72%);
  /* Shifted with a transform, not a margin. The place box is
     centred on its coordinate, so a margin would grow the box and
     move the mark only half as far as asked — which is exactly how
     it ended up hovering above the plank the first time. Half a jar
     down puts it under the foot. */
  transform: translateY(63px);
}

/* --- the solved shelf -------------------------------------- */

/* The reward is the row itself, so the light comes up a little and
   the row settles by a pixel — enough to feel like the cupboard
   was just put right, and not so much that it reads as an effect. */
.is-solved .objects {
  animation: shelf-settle var(--dur-reward) var(--ease-snap) both;
}

@keyframes shelf-settle {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(0);
  }
}