@import url('./styles-20260902-pre-memory.css');

/* September 2, 2026 — Between Peaks dense memory wall */
#between{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  background:var(--mca-paper,#fbfaf6) !important;
  overflow:visible !important;
}

#between .between-layout{
  position:relative !important;
  display:grid !important;
  grid-template-columns:repeat(14,minmax(0,1fr)) !important;
  grid-template-rows:165px repeat(6,105px) 130px 180px !important;
  gap:3px !important;
  width:min(calc(100% - 10px),1560px) !important;
  min-height:0 !important;
  height:auto !important;
  margin:5px auto 28px !important;
  padding:3px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:#171716 !important;
  box-shadow:none !important;
}

/* Let the existing content become independent collage tiles. */
#between .between-top,
#between .game-shell,
#between .side-rail,
#between .photo-space,
#between .photo-row,
#between .between-drawing-slot{
  display:contents !important;
}
#between h3{display:none !important}

/* Use every supplied MCA image plus the dog/belayer image. */
#between .photo-row .between-photo-real:nth-child(1){content:url('../assets/images/between-peaks/memory-01.webp') !important}
#between .photo-row .between-photo-real:nth-child(2){content:url('../assets/images/between-peaks/memory-02.webp') !important}
#between .photo-row .between-photo-real:nth-child(3){content:url('../assets/images/between-peaks/memory-03.webp') !important}
#between .side-rail:first-child .photo-space .between-photo-real{content:url('../assets/images/between-peaks/memory-04.webp') !important}
#between .between-drawing-slot img{content:url('../assets/images/between-peaks/belay-dog.webp') !important}
#between .between-spacer{
  display:block !important;
  background-image:url('../assets/images/between-peaks/memory-05.webp') !important;
}

/* One poem slot becomes the sixth supplied film photo. */
#between .between-poem-one{
  background-image:url('../assets/images/between-peaks/memory-06.webp') !important;
  background-repeat:no-repeat !important;
  background-position:center 54% !important;
  background-size:cover !important;
}
#between .between-poem-one > *{display:none !important}

/* The two new panoramas use the full board width. */
#between .between-layout::before,
#between .between-layout::after{
  content:"" !important;
  display:block !important;
  position:relative !important;
  inset:auto !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
  background-color:#171716 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:cover !important;
  z-index:1 !important;
}
#between .between-layout::before{
  grid-column:1 / 15 !important;
  grid-row:1 !important;
  background-image:url('../assets/images/between-peaks/memory-07.webp') !important;
}
#between .between-layout::after{
  grid-column:1 / 15 !important;
  grid-row:9 !important;
  background-image:url('../assets/images/between-peaks/memory-08.webp') !important;
}

/* Center table stays completely clear; every other tile fills the remaining perimeter. */
#between .wood-table{
  grid-column:5 / 11 !important;
  grid-row:2 / 9 !important;
}

/* Left side: two tall verticals, then a wide group photo, then poetry. */
#between .between-drawing-slot img{
  grid-column:1 / 3 !important;
  grid-row:2 / 6 !important;
}
#between .photo-row .between-photo-real:nth-child(2){
  grid-column:3 / 5 !important;
  grid-row:2 / 6 !important;
}
#between .photo-row .between-photo-real:nth-child(1){
  grid-column:1 / 5 !important;
  grid-row:6 / 8 !important;
}
#between .between-poem-two{
  grid-column:1 / 5 !important;
  grid-row:8 !important;
}

/* Right side: portrait camp photo plus three landscape memories. */
#between .between-poem-one{
  grid-column:11 / 13 !important;
  grid-row:2 / 6 !important;
}
#between .side-rail:first-child .photo-space .between-photo-real{
  grid-column:13 / 15 !important;
  grid-row:2 / 4 !important;
}
#between .between-spacer{
  grid-column:13 / 15 !important;
  grid-row:4 / 6 !important;
}
#between .photo-row .between-photo-real:nth-child(3){
  grid-column:11 / 15 !important;
  grid-row:6 / 9 !important;
}

/* Photos are unframed: their own edges are the collage. */
#between .between-photo-real,
#between .between-drawing-slot img,
#between .between-spacer,
#between .between-poem-one{
  position:relative !important;
  inset:auto !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
  border:0 !important;
  border-radius:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
  background-color:#171716 !important;
  background-repeat:no-repeat !important;
  background-size:cover !important;
  z-index:2 !important;
}
#between .between-photo-real,
#between .between-drawing-slot img{
  display:block !important;
  object-fit:cover !important;
}

/* The requested dog/belayer crop reads vertically rather than as a landscape strip. */
#between .between-drawing-slot img{
  object-position:46% 52% !important;
}
#between .photo-row .between-photo-real:nth-child(2){object-position:center 50% !important}
#between .photo-row .between-photo-real:nth-child(1){object-position:center 48% !important}
#between .photo-row .between-photo-real:nth-child(3){object-position:center 52% !important}
#between .side-rail:first-child .photo-space .between-photo-real{object-position:center 50% !important}
#between .between-spacer{background-position:center 55% !important}

/* Keep one poetry note in the wall. */
#between .between-poem-two{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  flex-direction:row !important;
  gap:18px !important;
  align-items:center !important;
  justify-content:center !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-width:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:14px 18px !important;
  box-sizing:border-box !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:#f4f0e7 !important;
  box-shadow:none !important;
  transform:none !important;
  color:#17130f !important;
  text-align:left !important;
  z-index:2 !important;
}
#between .between-poem-two .between-poem-text{
  flex:1 1 auto !important;
  font-family:Georgia,'Times New Roman',serif !important;
  font-size:clamp(17px,1.45vw,23px) !important;
  line-height:1.05 !important;
  letter-spacing:-.025em !important;
}
#between .between-poem-two .between-poem-credit{
  flex:0 0 min(36%,180px) !important;
  max-width:180px !important;
  margin:0 !important;
  color:#625b52 !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:9px !important;
  line-height:1.35 !important;
}

/* The table itself keeps its normal game styling, without extra collage framing. */
#between .wood-table{
  position:relative !important;
  inset:auto !important;
  align-self:stretch !important;
  justify-self:stretch !important;
  width:100% !important;
  max-width:none !important;
  height:100% !important;
  min-height:730px !important;
  margin:0 !important;
  padding:18px !important;
  overflow:hidden !important;
  transform:none !important;
  outline:0 !important;
  box-shadow:none !important;
  z-index:5 !important;
}
#between .scoreboard{top:12px !important;right:12px !important;font-size:11px !important}
#between .draw-pile{left:16px !important}
#between .capture-pile.cpu{right:15px !important}
#between .capture-pile.you{right:15px !important}
#between .game-controls{bottom:12px !important}

@media(max-width:980px){
  #between .between-layout{
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:155px repeat(4,190px) 590px repeat(3,190px) 155px !important;
    width:calc(100% - 8px) !important;
    margin-top:4px !important;
    padding:3px !important;
    gap:3px !important;
  }
  #between .between-layout::before{grid-column:1 / -1 !important;grid-row:1 !important}
  #between .between-drawing-slot img{grid-column:1 !important;grid-row:2 / 4 !important}
  #between .photo-row .between-photo-real:nth-child(2){grid-column:2 !important;grid-row:2 / 4 !important}
  #between .photo-row .between-photo-real:nth-child(1){grid-column:1 / -1 !important;grid-row:4 !important}
  #between .between-poem-one{grid-column:1 !important;grid-row:5 !important}
  #between .side-rail:first-child .photo-space .between-photo-real{grid-column:2 !important;grid-row:5 !important}
  #between .wood-table{grid-column:1 / -1 !important;grid-row:6 !important;min-height:590px !important}
  #between .between-spacer{grid-column:1 !important;grid-row:7 !important}
  #between .photo-row .between-photo-real:nth-child(3){grid-column:2 !important;grid-row:7 !important}
  #between .between-poem-two{grid-column:1 / -1 !important;grid-row:8 !important}
  #between .between-layout::after{grid-column:1 / -1 !important;grid-row:9 !important}
}

@media(max-width:560px){
  #between .between-layout{
    display:flex !important;
    flex-direction:column !important;
    width:calc(100% - 6px) !important;
    gap:3px !important;
    padding:3px !important;
  }
  #between .between-layout::before,
  #between .between-layout::after{
    flex:0 0 130px !important;
    height:130px !important;
  }
  #between .between-photo-real,
  #between .between-spacer,
  #between .between-poem-one,
  #between .between-poem-two{
    flex:0 0 185px !important;
    height:185px !important;
  }
  #between .between-drawing-slot img{
    flex:0 0 300px !important;
    height:300px !important;
  }
  #between .wood-table{
    flex:0 0 540px !important;
    height:540px !important;
    min-height:540px !important;
  }
  #between .between-poem-two{
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  #between .between-poem-two .between-poem-credit{
    flex:0 0 auto !important;
    max-width:none !important;
  }
}