/* FFA LOCKER + GARDEN FIXES v1.0 — b0823c, 2026-08-23. Her iPad test, items 16-33. */


/* HER RULING m0823d: on phone/iPad the ladder never scrolls sideways — the three
   tiers stack: Junior row, Elite row below, Legend row below, each with its own
   line running through the middle of its balls. */
@media (max-width: 1024px) {
  /* the two photo balls sit side by side, garden LEFT, family photo RIGHT */
  .ffm-balls-row {
    display: flex; justify-content: center; align-items: flex-start;
    gap: 38px; margin: 4px auto 40px;
  }
  .ffm-balls-row .kids-door, .ffm-balls-row .ball-avatar {
    position: relative !important; margin: 0 !important;
    left: auto !important; top: auto !important; display: block;
  }
  /* HER ORDER 2026-09-04, real-iPhone test: "The two balls should be centered.
     Right now, they're not."
     CAUSE, MEASURED in real WebKit at 393px: .ball-avatar keeps its desktop
     offset `right:-46px` (locker.html line 926, where the ball is absolutely
     positioned). This reset zeroed `left` but never `right`, and for a
     relatively-positioned box with left:auto the used left is -right - so the
     family-photo ball sat 46px right of where flex put it. The pair's centre
     landed 23px right of the viewport centre and the visual gap read 84px
     against a declared gap of 38px.
     MEASURED after this rule: offset 23px -> 0, gap 84px -> 38px. */
  .ffm-balls-row .ball-avatar { right: auto !important; }
  .ball-avatar { overflow: visible !important; }
  .ffm-avatar-cap {
    position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    margin-top: 8px; white-space: nowrap;
  }
  .ball-avatar-plus { bottom: 0 !important; right: 0 !important; z-index: 4; }
}

/* HER NOMENCLATURE 2026-09-02 (supersedes m0823d): not owned = BUY, owned = YOURS, gold band, white letters */
.ffa-rib.miss { background: #a8842a !important; }
.bundle-chip.is-missing::after { content: "BUY" !important; background: #a8842a !important; color: #fff !important; }

/* Stories Coming Soon door (phone/iPad): the future stays behind one line */
@media (max-width: 1024px) {
  #ffmSoonBox { display: none; }
  #ffmSoonBox.open { display: block; }
  #ffmSoonBtn {
    display: block; margin: 6px auto 22px; padding: 11px 28px;
    background: #fffdf6; color: #24612e; border: 1.5px solid #24612e;
    border-radius: 24px; font-family: Georgia, serif; font-size: 15px;
    font-weight: bold; cursor: pointer;
  }
}


/* 16 — the family-photo ball wears its + proudly, with words */
.ball-avatar-plus, .kd-plus { display: flex !important; }
.ball-avatar { overflow: visible !important; }
.ffm-avatar-cap {
  display: block; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  /* HER ITEM 6, 2026-09-06: the same font and the same green as the label under the left
     circle (.kids-door .kd-cap b, locker.html): 800 12px var(--ui), #2f7a3c, uppercase. */
  text-align: center; font: 800 12px var(--ui, -apple-system, Helvetica, Arial, sans-serif);
  letter-spacing: .05em; text-transform: uppercase; color: #2f7a3c;
  margin-top: 8px; white-space: nowrap; pointer-events: none;
}

/* 19 — the bucket stands out so the white balls read */
.ffa-bucket-wrap.L .ffa-denstack-host {
  /* D8, 2026-09-06 ~19:5x, applied 2026-09-08: beige ground so the white balls read; was #eef3e4 / #cfe0bd. */
  background: #F1E8D2; border: 1.5px solid #D9C9A3; border-radius: 14px; padding: 4px;
}

/* 22 — collection tiles small enough to see everything at once */
@media (max-width: 1024px) {
  .ffa-tiles { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important; gap: 10px !important; }
  .ffa-tile b { font-size: 13px !important; }
  .ffa-tile i { font-size: 11px !important; }
}

/* 23 — Get it / Gift it pills get air between them */
.ffa-tile a { margin: 8px 4px 0 !important; }

/* 23 — owned chips on the hero card wear a PURCHASED band */
.bundle-chip.ffm-owned { position: relative; overflow: hidden; }
.bundle-chip.ffm-owned::after {
  content: "YOURS"; position: absolute; top: 18px; left: -32px; width: 130px; text-align: center;
  transform: rotate(-45deg); background: #2f7a3c; color: #fff;
  font: 800 10px -apple-system, sans-serif; letter-spacing: .1em; line-height: 1; padding: 5px 0;
}

/* 21 — coming-soon cards are inert */
.bundle.ffm-soon .bundle-chip { pointer-events: none !important; opacity: .75; }
.bundle.ffm-soon .share-btn {
  pointer-events: none !important; opacity: .5; cursor: default !important;
}

/* ===== THE WALLED GARDEN (short course) ===== */

/* 33/38 — the Den has no place in the kids' garden */
#denGarden { display: none !important; }

/* 28 — tiles sized so everything owned fits one screen */
@media (max-width: 1024px) {
  .toys { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .toy--reader, .toy[data-fmt="Read-Along"], .toy[data-fmt="Song"],
  .toy[data-fmt="Audiobook"], .toy[data-fmt="Instrumental"] {
    grid-column: auto !important; grid-row: auto !important;
  }
  .lr-mini .art { min-height: 150px !important; }
}

/* 32 — the Instrumental tile stops impersonating the Song tile */
.toy[data-fmt="Instrumental"] .art img { filter: sepia(.45) saturate(.55) hue-rotate(65deg); }
.toy[data-fmt="Instrumental"] .art { position: relative; }
.ffm-inst-badge {
  position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%);
  background: rgba(36,97,46,.92); color: #fdf7e3; border-radius: 12px;
  font: 800 10px -apple-system, sans-serif; letter-spacing: .12em; padding: 4px 12px;
  pointer-events: none;
}

/* 29 — storybooks open FULLSCREEN; only the X brings you back */
.toys.ra-open #raStage {
  position: fixed !important; inset: 0 !important; z-index: 99990 !important;
  background: #1e2a20 !important; border-radius: 0 !important;
  display: flex !important; flex-direction: column !important; margin: 0 !important;
}
.toys.ra-open #raStage iframe { flex: 1 1 auto; width: 100% !important; height: 100% !important; }
.toys.ra-open .ra-x, .toy--reader.big .lr-x {
  position: fixed !important; top: 12px !important; right: 12px !important; z-index: 99999 !important;
  width: 44px; height: 44px; border-radius: 50%; background: #fffdf6; color: #24612e;
  font-size: 26px; border: 2px solid #24612e; cursor: pointer;
}
.toy--reader.big {
  position: fixed !important; inset: 0 !important; z-index: 99990 !important;
  margin: 0 !important; border-radius: 0 !important; background: #fffdf6 !important;
  overflow: hidden !important; display: flex !important; flex-direction: column !important;
}
.toy--reader.big .lr-full { flex: 1 1 auto; display: flex !important; flex-direction: column; }
.toy--reader.big .lr-full iframe { flex: 1 1 auto; height: 100% !important; }
body.ffm-stage-open { overflow: hidden !important; }