/* Page-specific styles for theater.html. */
/* v0.74: Mobamas theater thumbnail index */
.regular-theater-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:18px
}

.regular-thumb-card {
  min-width:0
}

.regular-thumb-link {
  display:block;
  height:100%;
  text-decoration:none;
  color:inherit;
  background:#fffdf7;
  border:1px solid #d8cfb5;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 7px 18px rgba(42,46,38,.06);
  transition:transform .18s ease,box-shadow .18s ease
}

.regular-thumb-link:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(42,46,38,.10)
}

.regular-thumb-link img {
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  object-position:top;
  background:#f1eadc
}

.regular-thumb-meta {
  padding:11px 12px 12px
}

.regular-thumb-meta h3 {
  font-size:.92rem;
  line-height:1.45;
  margin:0 0 5px
}

.regular-thumb-meta .date {
  font-size:.78rem;
  color:#68745f
}

@media(max-width:900px) {
  .regular-theater-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

}

@media(max-width:650px) {
  .regular-theater-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:11px
  }

  .regular-thumb-meta {
    padding:9px
  }

  .regular-thumb-meta h3 {
    font-size:.84rem
  }

  .regular-thumb-link {
    border-radius:12px
  }

}

/* v0.75: parallel theater modes and exact deep links */
.theater-mode-switch {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin:22px 0 12px
}

.theater-mode-switch__button {
  appearance:none;
  border:1px solid #cfc3af;
  border-radius:18px;
  background:#fffaf1;
  color:#30322f;
  min-height:78px;
  padding:14px 18px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(43,48,39,.05)
}

.theater-mode-switch__button strong,.theater-mode-switch__button span {
  display:block
}

.theater-mode-switch__button strong {
  font-size:1.05rem;
  color:#283b4b;
  margin-bottom:3px
}

.theater-mode-switch__button span {
  font-size:.8rem;
  color:#68745f
}

.theater-mode-switch__button[aria-pressed="true"] {
  border-color:#6f7b61;
  background:linear-gradient(145deg,#fffaf1,#eee6d5);
  box-shadow:0 0 0 2px rgba(111,123,97,.12),0 7px 17px rgba(43,48,39,.07)
}

[data-theater-pane][hidden] {
  display:none!important
}

#regular,#wide,.regular-thumb-card,.wide-work {
  scroll-margin-top:104px
}

.timeline-target-flash {
  animation:targetFlash 1.25s ease-out
}

@keyframes targetFlash {
  0% {
    box-shadow:0 0 0 4px rgba(190,157,73,.45);
    background:rgba(255,248,224,.95)
  }

  100% {
    box-shadow:none;
    background:transparent
  }

}

@media(max-width:650px) {
  .theater-mode-switch {
    gap:8px
  }

  .theater-mode-switch__button {
    min-height:70px;
    padding:11px 12px;
    border-radius:14px
  }

  .theater-mode-switch__button strong {
    font-size:.92rem
  }

  .theater-mode-switch__button span {
    font-size:.74rem
  }

}