/* ============================================================
   Level 15 — Стопка рисунков

   Scene only. The sheets, their snap and their glue are
   shared/puzzle.css; this file draws the room and the assembly
   table they land on.

   The room is a cooler floor wash so the warm plank desk reads as
   furniture rather than as more of the same wood. The desk sits a
   little above true centre: the win card is a bottom sheet, and a
   stack any lower has its papers covered the moment they are earned.
   ============================================================ */

.scene {
  position: fixed;
  inset: 0;
  background-color: #9a8874;
  background-image:
    /* afternoon window light from the upper left */
    radial-gradient(ellipse 82% 70% at 16% 8%, rgba(255, 244, 214, 0.52), transparent 62%),
    /* room falling away at the edges */
    radial-gradient(ellipse 120% 95% at 50% 50%, transparent 40%, rgba(42, 32, 22, 0.42) 100%),
    /* soft floor boards, quieter than the desk so they stay scenery */
    repeating-linear-gradient(
      92deg,
      rgba(62, 46, 30, 0.06) 0 2px,
      transparent 2px 52px
    ),
    linear-gradient(180deg, #a8947c 0%, #96806a 55%, #867056 100%);
}

/* --- desk surface ------------------------------------------ */

/* Real board texture under the stack, with painted seams so the
   planks still read at a glance even when the photo softens. The
   raised shadow is what says "table" against the room wash. */
.desk {
  position: absolute;
  border-radius: 5px;
  pointer-events: none;
  overflow: hidden;
  background-color: #a6865e;
  background-image:
    /* seams between horizontal planks */
    repeating-linear-gradient(
      180deg,
      transparent 0 68px,
      rgba(48, 32, 18, 0.36) 68px 70px,
      rgba(255, 230, 190, 0.1) 70px 71px,
      transparent 71px 136px
    ),
    /* fine grain along each board */
    repeating-linear-gradient(
      91deg,
      rgba(62, 42, 22, 0.11) 0 1px,
      transparent 1px 8px
    ),
    /* two soft grain periods, same trick as the sock drawer */
    repeating-linear-gradient(
      179deg,
      rgba(255, 234, 194, 0.05) 0 1px,
      transparent 1px 17px
    ),
    linear-gradient(180deg, rgba(255, 236, 200, 0.14), rgba(60, 40, 22, 0.2)),
    url("../../assets/wood-table.webp");
  background-size: auto, auto, auto, auto, cover;
  background-position: center;
  box-shadow:
    0 2px 0 rgba(90, 68, 42, 0.85),
    0 22px 40px -14px rgba(40, 28, 16, 0.5),
    inset 0 1px 0 rgba(255, 236, 200, 0.26),
    inset 0 0 0 1px rgba(48, 32, 18, 0.2);
}

.desk::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* a soft well in the middle so the stack mark and papers sit in
     a lit patch rather than on a flat photo */
  background: radial-gradient(
    ellipse 70% 65% at 50% 48%,
    rgba(255, 240, 210, 0.1),
    transparent 70%
  );
  pointer-events: none;
}

.desk::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: var(--noise-coarse);
  background-size: 180px 180px;
  opacity: 0.1;
  mix-blend-mode: multiply;
  pointer-events: none;
}

.desk--main {
  top: 140px;
  left: 160px;
  width: 880px;
  height: 470px;
}

.stage.is-portrait .desk--main {
  top: 300px;
  left: 80px;
  width: 620px;
  height: 860px;
}

/* --- stack mark -------------------------------------------- */

/* Outline of the largest sheet, centred on place 0. Width and
   height are set inline from the play scale in game.js so the
   mark and the bottom sheet can never disagree. */
.stack-mark {
  display: block;
  border: 2px dashed rgba(70, 54, 36, 0.3);
  border-radius: 2px;
  background: rgba(255, 244, 220, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 236, 200, 0.1);
}

/* Once the bottom sheet is glued the mark is redundant, and
   leaving it under the stack would fringe the paper with a
   dashed halo. */
.stage:has(.obj.is-glued[data-obj="draw0"]) .stack-mark {
  opacity: 0;
  transition: opacity var(--dur-snap) var(--ease-soft);
}

/* --- solved desk ------------------------------------------- */

.is-solved .objects {
  animation: stack-settle var(--dur-reward) var(--ease-snap) both;
}

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