/* -----------------------------------------------------
   INTRO
   ----------------------------------------------------- */

.toyland-intro {
  margin-bottom: 20px;
}


/* -----------------------------------------------------
   COLLECTION SECTIONS
   ----------------------------------------------------- */

.toyland-section {
  margin: 0 0 28px;
}

.toyland-section h2 {
  margin-bottom: 10px;
}

/* =====================================================
   FURBY COLLECTION GROUP PHOTO
   ===================================================== */

.furby-collection-photo {
  width: 90%;
  max-width: 650px;
  margin: 25px auto 30px;
  padding: 10px;

  text-align: center;

background: #f0fdff;
background: linear-gradient(130deg, #f0fdff, #a5f3fc, #e9d5ff);

  border: 1px solid #66513b;

  box-shadow:
    4px 5px 0 rgba(38, 51, 38, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.15);

  transform: rotate(-1deg);
}

.furby-collection-photo img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.furby-collection-photo p {
  margin: 12px 0 0;
  font-size: 0.95em;
  color: #66513b;
}

/* -----------------------------------------------------
   TOY SHELF

   The standard shelf is used for ordinary collection
   entries such as regular Furbies and Petz plushies.

   Two toys sit together on each shelf.
   ----------------------------------------------------- */

.toy-shelf {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 28px 18px;

  margin: 12px 0 29px;

  padding:
    20px 16px 24px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.20),
      transparent 18%,
      rgba(148,163,185,.10) 100%
    ),
    url("../images/vecteezy_pastel-wood-slat-background_8136711.jpg")
      center center / cover no-repeat;

  border:
    1px solid rgba(148,163,185,.45);

  border-radius: 7px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -8px 14px rgba(148,163,185,.20),
    0 5px 8px rgba(148,163,185,.30);
}


/* -----------------------------------------------------
   BOTTOM SHELF EDGE

   A soft blue-grey painted wooden lip along the
   bottom of the whole shelf.
   ----------------------------------------------------- */

.toy-shelf::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;
  bottom: -6px;

  height: 6px;

  background: #94a3b9;

  border:
    1px solid rgba(112,128,150,.32);

  border-top: 0;

  border-radius:
    0 0 6px 6px;

  box-shadow:
    0 2px 4px rgba(148,163,185,.38);
}


/* -----------------------------------------------------
   RECESSED TOY ROW

   Each pair of ordinary toys gets its own softer
   recessed area.
   ----------------------------------------------------- */

.toy-card:nth-child(2n + 1)::after {
  content: "";

  position: absolute;

  top: -10px;
  bottom: -13px;

  left: -9px;

  width:
    calc(200% + 27px);

  z-index: -1;

  background:
    linear-gradient(
      to bottom,
      rgba(127,144,168,.55) 0%,
      rgba(127,144,168,.55) calc(100% - 8px),
      rgba(174,187,201,.58) calc(100% - 8px),
      rgba(174,187,201,.58) 100%
    );

  border-radius: 6px;

  box-shadow:
    inset 0 2px 5px rgba(88,105,128,.22),
    inset 0 -3px 5px rgba(255,255,255,.12),
    0 2px 4px rgba(148,163,185,.22);
}


/* -----------------------------------------------------
   TOY CARD

   Standard collection entry.
   ----------------------------------------------------- */

.toy-card {
  position: relative;

  z-index: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

  min-width: 0;

  padding:
    0 6px 10px;

  background: transparent;

  border: 0;

  border-radius: 0;

  text-align: center;

  transition:
    transform .15s ease;
}


/* -----------------------------------------------------
   TOY CARD HOVER
   ----------------------------------------------------- */

.toy-card:hover {
  background: transparent;
  border: 0;

  transform:
    translateY(-2px);
}


/* -----------------------------------------------------
   TOY PHOTOGRAPH

   Toys retain their natural proportions.
   ----------------------------------------------------- */

.toy-image {
  position: relative;

  z-index: 2;

  display: block;

  width: auto;

  max-width: 100%;

  max-height: 250px;

  height: auto;

  margin:
    0 auto 9px;

  background: transparent;

  border: 0;

  opacity: 1;

  filter:
    drop-shadow(2px 3px 3px rgba(148,163,185,.40))
    drop-shadow(0 6px 5px rgba(148,163,185,.20));

  transition:
    filter .15s ease,
    transform .15s ease;
}


/* -----------------------------------------------------
   LITTLE DISPLAY IMPERFECTIONS
   ----------------------------------------------------- */

.toy-card:nth-child(4n + 1) .toy-image {
  transform:
    rotate(-1.2deg);
}


.toy-card:nth-child(4n + 2) .toy-image {
  transform:
    translateY(12px)
    rotate(.2deg);
}


.toy-card:nth-child(4n + 3) .toy-image {
  transform:
    rotate(-.6deg);
}


.toy-card:nth-child(4n) .toy-image {
  transform:
    rotate(1deg);
}


/* -----------------------------------------------------
   TOY INFORMATION STICKER

   The ordinary toy's name, type and collection
   information now live together inside one sticker.

   The sticker grows naturally according to the amount
   of information inside it, so longer descriptions
   cannot overlap the toy name.
   ----------------------------------------------------- */

.toy-info {
  position: absolute;

  left: 7%;
  right: 7%;

  bottom: 9px;

  z-index: 5;

  box-sizing: border-box;

  padding:
    8px 10px 9px;

  background: #f4efe1;

  border:
    1px solid rgba(115,105,82,.22);

  border-radius: 6px;

  box-shadow:
    2px 3px 4px rgba(148,163,185,.30);

  opacity: 0;

  transform:
    translateY(6px);

  transition:
    opacity .18s ease,
    transform .18s ease;

  pointer-events: none;
}


/* -----------------------------------------------------
   TOY NAME
   ----------------------------------------------------- */

.toy-info h3 {
  position: relative;

  z-index: 6;

  margin:
    0 0 2px;

  padding:
    0;

  background: transparent;

  color: var(--forest);

  font-family:
    "MossyNewt",
    serif;

  font-size: 17px;

  font-weight: normal;

  line-height: 1.2;
}


/* -----------------------------------------------------
   TOY TYPE
   ----------------------------------------------------- */

.toy-info .toy-type {
  position: relative;

  z-index: 6;

  margin: 0;

  padding:
    1px 0 5px;

  background: transparent;

  color: var(--moss);

  font-family:
    "Alagard",
    Verdana,
    Arial,
    Helvetica,
    sans-serif;

  font-size: 10px;

  line-height: 1.3;
}


/* -----------------------------------------------------
   TOY DETAILS

   Collection information remains on its own little
   coloured paper sticker, but now lives inside the
   larger cream information sticker.
   ----------------------------------------------------- */

.toy-info .toy-details {
  position: relative;

  z-index: 6;

  margin:
    5px 0 0;

  padding:
    7px 9px 8px;

  border-radius: 6px;

  color: var(--brown);

  font-family:
    "Rainy Hearts",
    Verdana,
    Arial,
    Helvetica,
    sans-serif;

  font-size: 12px;

  line-height: 1.4;

  box-shadow:
    1px 2px 3px rgba(148,163,185,.24);

  transform:
    rotate(-.7deg);
}


/* -----------------------------------------------------
   DETAIL STICKER COLOUR VARIATIONS
   ----------------------------------------------------- */

.toy-card:nth-child(4n + 1) .toy-details {
  background: #f2dca8;

  transform:
    rotate(-.7deg);
}


.toy-card:nth-child(4n + 2) .toy-details {
  background: #d8e5c7;

  transform:
    rotate(.6deg);
}


.toy-card:nth-child(4n + 3) .toy-details {
  background: #e8d4df;

  transform:
    rotate(-.4deg);
}


.toy-card:nth-child(4n) .toy-details {
  background: #d3e1ea;

  transform:
    rotate(.6deg);
}


.toy-details span {
  color: var(--moss);
}


/* -----------------------------------------------------
   TOY STICKER HOVER
   ----------------------------------------------------- */

.toy-card:hover .toy-info {
  opacity: 1;

  transform:
    translateY(0);
}


/* -----------------------------------------------------
   TOY HOVER / IMAGE HOVER
   ----------------------------------------------------- */

.toy-card:hover .toy-image {
  transform:
    rotate(0deg)
    translateY(-3px);

  filter:
    drop-shadow(3px 4px 4px rgba(148,163,185,.48))
    drop-shadow(0 8px 6px rgba(148,163,185,.24));
}


/* =====================================================
   SPECIAL FURBY SHELVES
   =====================================================

   Special Furbies are treated as individual display
   pieces rather than ordinary collection cards.

   Each .furby-special-shelf is a complete little wooden
   shelf of its own.

   This means another special Furby can simply be added
   as another .furby-special-shelf later.
   ===================================================== */


/* -----------------------------------------------------
   SPECIAL FURBY SHELF

   Individual wooden shelf for one special Furby.
   ----------------------------------------------------- */

.furby-special-shelf {
  position: relative;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 22px;

  margin:
    12px 0 29px;

  padding:
    20px 16px 24px;

  background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.20),
      transparent 18%,
      rgba(148,163,185,.10) 100%
    ),
    url("../images/vecteezy_pastel-wood-slat-background_8136711.jpg")
      center center / cover no-repeat;

  border:
    1px solid rgba(148,163,185,.45);

  border-radius: 7px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -8px 14px rgba(148,163,185,.20),
    0 5px 8px rgba(148,163,185,.30);

  isolation: isolate;
}


/* -----------------------------------------------------
   SPECIAL FURBY SHELF LIP
   ----------------------------------------------------- */

.furby-special-shelf::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: -6px;

  height: 6px;

  background: #94a3b9;

  border:
    1px solid rgba(112,128,150,.32);

  border-top: 0;

  border-radius:
    0 0 6px 6px;

  box-shadow:
    0 2px 4px rgba(148,163,185,.38);
}


/* -----------------------------------------------------
   SPECIAL FURBY

   The actual contents of the dedicated shelf.

   The image occupies the left side while the
   information plaque and lore occupy the right.
   ----------------------------------------------------- */

.furby-special {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  gap: 22px;

  min-width: 0;

  grid-column: 1 / -1;
}


/* -----------------------------------------------------
   SPECIAL FURBY RECESSED DISPLAY

   A single recessed bay sits behind the whole special
   Furby display.
   ----------------------------------------------------- */

.furby-special::before {
  content: "";

  position: absolute;

  top: -10px;
  bottom: -13px;

  left: -9px;
  right: -9px;

  z-index: -1;

  background:
    linear-gradient(
      to bottom,
      rgba(127,144,168,.55) 0%,
      rgba(127,144,168,.55) calc(100% - 8px),
      rgba(174,187,201,.58) calc(100% - 8px),
      rgba(174,187,201,.58) 100%
    );

  border-radius: 6px;

  box-shadow:
    inset 0 2px 5px rgba(88,105,128,.22),
    inset 0 -3px 5px rgba(255,255,255,.12),
    0 2px 4px rgba(148,163,185,.22);
}


/* -----------------------------------------------------
   SPECIAL FURBY IMAGE AREA
   ----------------------------------------------------- */

.furby-special-image {
  position: relative;

  z-index: 1;

  min-width: 0;

  display: flex;

  align-items: flex-start;

  justify-content: center;

  text-align: center;
}


/* -----------------------------------------------------
   SPECIAL FURBY IMAGE
   ----------------------------------------------------- */

.furby-special-image .toy-image {
  position: relative;

  z-index: 2;

  display: block;

  width: auto;

  max-width: 100%;

  max-height: 250px;

  height: auto;

  margin:
    0 auto 9px;

  background: transparent;

  border: 0;

  opacity: 1;

  filter:
    drop-shadow(2px 3px 3px rgba(148,163,185,.40))
    drop-shadow(0 6px 5px rgba(148,163,185,.20));

  transform:
    rotate(-.8deg);

  transition:
    filter .15s ease,
    transform .15s ease;
}


/* -----------------------------------------------------
   SPECIAL FURBY IMAGE HOVER
   ----------------------------------------------------- */

.furby-special-image:hover .toy-image {
  transform:
    rotate(0deg)
    translateY(-3px);

  filter:
    drop-shadow(3px 4px 4px rgba(148,163,185,.48))
    drop-shadow(0 8px 6px rgba(148,163,185,.24));
}


/* -----------------------------------------------------
   SPECIAL FURBY INFORMATION AREA

   Normal document flow is important here so the lore
   can expand without escaping from the display.
   ----------------------------------------------------- */

.furby-special-info {
  position: relative;

  z-index: 2;

  min-width: 0;

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;
}


/* -----------------------------------------------------
   SPECIAL FURBY NAME

   Cream plaque forming the top half of the information
   label.
   ----------------------------------------------------- */

.furby-special-info h3 {
  position: relative;

  z-index: 3;

  width: 86%;

  box-sizing: border-box;

  margin: 0;

  padding:
    8px 10px 2px;

  background: #f4efe1;

  border:
    1px solid rgba(115,105,82,.22);

  border-bottom: 0;

  border-radius:
    5px 5px 0 0;

  box-shadow:
    2px 2px 4px rgba(148,163,185,.22);

  color: var(--forest);

  font-family:
    "MossyNewt",
    serif;

  font-size: 19px;

  font-weight: normal;

  line-height: 1.2;
}


/* -----------------------------------------------------
   SPECIAL FURBY TYPE / RELEASE

   Bottom half of the cream information plaque.
   ----------------------------------------------------- */

.furby-special-info .toy-type {
  position: relative;

  z-index: 3;

  width: 86%;

  box-sizing: border-box;

  margin: 0;

  padding:
    2px 10px 9px;

  background: #f4efe1;

  border:
    1px solid rgba(115,105,82,.22);

  border-top: 0;

  border-radius:
    0 0 5px 5px;

  box-shadow:
    2px 3px 4px rgba(148,163,185,.22);
}


/* -----------------------------------------------------
   SPECIAL FURBY DETAILS

   If a special Furby ever gets a .toy-details block,
   it remains visually quiet rather than becoming one
   of the ordinary coloured stickers.
   ----------------------------------------------------- */

.furby-special-info .toy-details {
  background: transparent;

  box-shadow: none;

  margin-left: 0;
  margin-right: 0;

  padding-left: 0;
  padding-right: 0;
}


/* -----------------------------------------------------
   FURBY POEM / LORE

   The lore is a separate little paper panel beneath
   the information plaque.

   It is deliberately opaque enough for comfortable
   reading against the blue-grey shelf recess.
   ----------------------------------------------------- */

.furby-poem {
  position: relative;

  z-index: 3;

  width: 86%;

  box-sizing: border-box;

  margin:
    12px auto 8px;

  padding:
    12px 14px 13px;

  background:
    rgba(244,239,225,.92);

  border:
    1px dashed rgba(148,163,185,.75);

  border-radius: 5px;

  color: var(--brown);

  font-family:
    "Rainy Hearts",
    Verdana,
    Arial,
    Helvetica,
    sans-serif;

  font-size: 12px;

  line-height: 1.55;

  text-align: center;

  max-height: 190px;

  overflow: hidden;

  transition:
    max-height .35s ease;
}


/* -----------------------------------------------------
   EXPANDED POEM
   ----------------------------------------------------- */

.furby-poem.is-expanded {
  max-height: 2000px;
}


/* -----------------------------------------------------
   POEM TITLE
   ----------------------------------------------------- */

.furby-poem-title {
  display: block;

  margin-bottom: 8px;

  color: var(--forest);

  font-family:
    "MossyNewt",
    serif;

  font-size: 14px;

  font-weight: normal;
}


/* -----------------------------------------------------
   POEM TEXT
   ----------------------------------------------------- */

.furby-poem p {
  margin:
    0 0 12px;
}


.furby-poem p:last-child {
  margin-bottom: 0;
}


.furby-poem em {
  color: #6f829b;
}


/* -----------------------------------------------------
   EXPAND BUTTON
   ----------------------------------------------------- */

.furby-expand {
  display: inline-block;

  margin:
    2px auto 0;

  padding:
    5px 10px;

  background: transparent;

  border:
    1px dotted #94a3b9;

  border-radius: 4px;

  color: #6f829b;

  font-family:
    "Alagard",
    Verdana,
    Arial,
    Helvetica,
    sans-serif;

  font-size: 10px;

  cursor: pointer;
}


.furby-expand:hover {
  background:
    rgba(148,163,185,.12);

  border-color:
    #94a3b9;

  color:
    var(--forest);
}


/* =====================================================
   SHARED FURBY ORIGIN STORIES
   =====================================================

   Regular Furbies and Furby Babies each have their own
   shared origin story.

   The story sits above its corresponding toy shelf,
   rather than being repeated inside every toy card.
   ===================================================== */


/* -----------------------------------------------------
   SHARED ORIGIN STORY

   A larger communal paper panel for a whole Furby
   collection.
   ----------------------------------------------------- */

.furby-origin-story {
  position: relative;

  margin:
    16px auto 28px;

  padding:
    14px 18px 16px;

  max-width: 700px;

  background:
    rgba(244,239,225,.92);

  border:
    1px dashed rgba(148,163,185,.75);

  border-radius: 5px;

  box-shadow:
    2px 3px 5px rgba(148,163,185,.22);

  text-align: center;
}


/* -----------------------------------------------------
   SHARED ORIGIN STORY POEM

   The shared story uses the same paper/lore styling
   as individual Furby poems, but the outer container
   provides the communal display.
   ----------------------------------------------------- */

.furby-origin-story .furby-poem {
  width: 100%;

  margin:
    0 auto 8px;

  padding: 0;

  background: transparent;

  border: 0;

  box-shadow: none;
}


/* -----------------------------------------------------
   SHARED ORIGIN STORY TITLE
   ----------------------------------------------------- */

.furby-origin-story .furby-poem-title {
  margin-bottom: 10px;
}


/* -----------------------------------------------------
   SHARED ORIGIN STORY EXPAND BUTTON
   ----------------------------------------------------- */

.furby-origin-story .furby-expand {
  margin:
    4px auto 0;
}


/* -----------------------------------------------------
   COLLECTION DIVIDER
   ----------------------------------------------------- */

.collection-divider {
  display: block;

  width: 100%;

  margin:
    20px 0 22px;

  color: var(--gold);

  font-size: 12px;

  line-height: 1;

  text-align: center;

  letter-spacing: 3px;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 600px) {

  /* -----------------------------------------------
     SPECIAL FURBY SHELF
     ----------------------------------------------- */

  .furby-special-shelf {
    grid-template-columns: 1fr;

    gap: 12px;

    padding:
      20px 12px 24px;
  }


  /* -----------------------------------------------
     SPECIAL FURBY
     ----------------------------------------------- */

  .furby-special {
    grid-template-columns: 1fr;

    gap: 14px;

    grid-column: 1 / -1;
  }


  .furby-special-info {
    width: 100%;

    text-align: center;
  }


  .furby-special-image {
    align-items: center;
  }


  .furby-special-image .toy-image {
    max-height: 250px;
  }


  .furby-special-info h3,
  .furby-special-info .toy-type,
  .furby-poem {
    width: 90%;
  }


  /* -----------------------------------------------
     SHARED ORIGIN STORY
     ----------------------------------------------- */

  .furby-origin-story {
    width: 94%;

    box-sizing: border-box;

    padding:
      14px 12px 16px;
  }


  /* -----------------------------------------------
     ORDINARY TOY SHELF
     ----------------------------------------------- */

  .toy-card::after {
    display: none;
  }

}


/* =====================================================
   VERY SMALL SCREENS
   ===================================================== */

@media (max-width: 500px) {

  .toy-shelf {
    grid-template-columns: 1fr;
  }

}