/* ============================================================
   Level 14 — Тарелки на полке

   Scene only. The plates, their turning and their shadows are
   shared/puzzle.css; this file draws the dresser they hang in.

   Where the spice cupboard had to stay grey because its puzzle
   was read by colour, this one is read by angle. That frees the
   scene to be warm, which is also what keeps two shelf levels
   from looking like the same room twice.
   ============================================================ */

.scene {
  position: fixed;
  inset: 0;
  background-color: #9d7f63;
  background-image:
    /* afternoon light from a window off to the left */
    radial-gradient(ellipse 85% 75% at 16% 10%, rgba(255, 244, 218, 0.55), transparent 62%),
    /* the dresser recess falling away at the edges */
      radial-gradient(ellipse 118% 92% at 50% 48%, transparent 40%, rgba(42, 30, 20, 0.42) 100%),
    /* faint vertical boards on the back panel */
      repeating-linear-gradient(
        90deg,
        rgba(72, 52, 36, 0.09) 0 2px,
        transparent 2px 116px
      ),
    linear-gradient(180deg, #a98a6c 0%, #98795d 56%, #856a52 100%);
}

/* --- the rails ---------------------------------------------- */

/* A plate stands on the rail and leans back against the panel, so
   the rail's top edge is where the bottom of the plate lands: the
   engine centres an object on its place, so that is place.y plus
   half the plate. A few pixels adrift and six plates all look like
   they are floating. */
.rail {
  position: absolute;
  height: 20px;
  border-radius: 3px;
  background: linear-gradient(180deg, #c8a877 0%, #b3945f 46%, #96794c 100%);
  box-shadow: 0 -12px 20px -14px rgba(44, 32, 18, 0.5), 0 2px 0 rgba(108, 86, 52, 0.9),
    0 12px 22px -8px rgba(44, 32, 18, 0.42);
}

/* The lip that keeps a plate from sliding off. It is also what
   makes the rail read as a plate rack rather than a shelf. */
.rail::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 0;
  width: 100%;
  height: 9px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, #d8bb8c 0%, #bd9d68 100%);
  box-shadow: inset 0 1px 0 rgba(255, 240, 210, 0.35);
}

.rail--a {
  top: 334px;
  left: 170px;
  width: 860px;
}

.rail--b {
  top: 624px;
  left: 170px;
  width: 860px;
}

/* Landscape hangs six plates on two rails, so the third must not
   be merely invisible - it must not cast its shadow either. */
.rail--c {
  display: none;
}

/* Portrait is two columns on three rails. */
.stage.is-portrait .rail--a {
  top: 514px;
  left: 140px;
  width: 500px;
}

.stage.is-portrait .rail--b {
  top: 804px;
  left: 140px;
  width: 500px;
}

.stage.is-portrait .rail--c {
  display: block;
  top: 1094px;
  left: 140px;
  width: 500px;
}

/* --- where a plate rests ------------------------------------ */

/* Contact shadow, drawn on the rail rather than under the plate.
   In a level about turning, this matters more than usual: the
   shadow staying perfectly still while the plate revolves is what
   says the plate is rotating in place and not being spun through
   the air. */
.rail-hook {
  display: block;
  width: 92px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(46, 32, 18, 0.38), transparent 74%);
  transform: translateY(76px);
}

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

/* Six sprigs coming to attention at once. The light lifts and the
   plates settle a fraction, which reads as the dresser being put
   right rather than as an animation being played at the player. */
.is-solved .objects {
  animation: plates-settle var(--dur-reward) var(--ease-snap) both;
}

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