/* etiket.css — the labelling line on Zamir Gezegeni.
   Ben's paintings in their frames, and the nameplates that fell off them. The
   palace is the one BRIGHT room in the universe (ink: true), so everything in
   here is drawn in the ink palette: dark text, warm brass, marble under it. */

.et-wall {
  position: relative;
  width: 100%;
  min-height: 46vh;
  margin-top: 1.4em;
  overflow: hidden;
}

/* One wall of four. Rounds swap in place: the finished one slides left, the
   next arrives from the right, so twelve paintings never stand at once. */
.et-room {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2em;
  transition: transform 0.55s ease, opacity 0.55s ease;
}
.et-in { animation: et-arrive 0.55s ease backwards; }
.et-out { transform: translateX(-16%); opacity: 0; }
@keyframes et-arrive {
  from { transform: translateX(16%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.et-frames {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8em, 3vw, 2.2em);
}

/* A painting: the canvas, then the brass plate under it. */
.et-frame { display: flex; flex-direction: column; align-items: center; gap: 0.5em; }

.et-art {
  width: clamp(72px, 15vw, 118px);
  height: clamp(72px, 15vw, 118px);
  display: grid;
  place-items: center;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1;
  /* The frame itself: a gilt edge on a pale canvas, the way everything in this
     palace is a little more expensive than it needs to be. */
  border: 3px solid rgba(184, 138, 74, 0.75);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 6px 18px rgba(90, 60, 40, 0.16);
}
.et-art img { width: 100%; height: 100%; object-fit: contain; }

/* The empty plate under a painting: a slot cut into the wall, waiting. */
.et-slot {
  min-width: clamp(72px, 15vw, 118px);
  min-height: 2em;
  padding: 0.25em 0.6em;
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: clamp(0.72rem, 1.9vw, 0.86rem);
  color: #6B4A24;
  border: 1px dashed rgba(107, 74, 36, 0.45);
  border-radius: 3px;
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* Screwed on. The dashes go, the brass comes up, and it stays. */
.et-slot.et-filled {
  border: 1px solid rgba(184, 138, 74, 0.9);
  border-style: solid;
  background: linear-gradient(180deg, rgba(232, 200, 140, 0.55), rgba(200, 160, 96, 0.4));
  color: #4A3113;
  animation: et-fix 0.45s ease;
}
@keyframes et-fix {
  0%   { transform: scale(0.9) rotate(-2deg); }
  60%  { transform: scale(1.04) rotate(1deg); }
  100% { transform: none; }
}
/* The wrong frame shrugs it off. */
.et-slot.et-wrong { animation: et-shake 0.4s ease; }
@keyframes et-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  45% { transform: translateX(5px); }
  70% { transform: translateX(-3px); }
}

/* The rack of loose plates. */
.et-rack {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6em;
}
.et-plate {
  font-family: var(--serif);
  font-size: clamp(0.76rem, 2vw, 0.9rem);
  color: #4A3113;
  padding: 0.4em 0.95em;
  border: 1px solid rgba(184, 138, 74, 0.85);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(240, 214, 162, 0.8), rgba(210, 174, 110, 0.65));
  box-shadow: 0 2px 6px rgba(90, 60, 40, 0.2);
  cursor: grab;
  touch-action: none;
  transition: opacity 0.3s ease, transform 0.2s ease;
}
.et-plate:hover { transform: translateY(-2px); }
/* Used up: it is on the wall now, so its copy in the rack fades out of the way. */
.et-plate.et-spent { opacity: 0; pointer-events: none; transform: scale(0.8); }
/* Refused by a painting that is not its own. */
.et-plate.et-refused { animation: et-shake 0.4s ease; }
/* Tapped rather than dragged: a small nudge saying this one has to be carried. */
.et-plate.et-nudge { animation: et-nudge 0.35s ease; }
@keyframes et-nudge {
  0%, 100% { transform: none; }
  50% { transform: translateY(-5px); }
}

/* The drag ghost, while a plate is in the air. */
.drag-ghost.et-plate { opacity: 0.9; cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .et-in, .et-slot.et-filled, .et-slot.et-wrong,
  .et-plate.et-refused, .et-plate.et-nudge { animation: none; }
  .et-room { transition: none; }
}