/* 映画館のページ: 館の見出しと公式ページへのリンク・スクリーンの一覧（座席の並びの小さな図つき）。
   見出しの形（.page-head）と行のステッカー（.list .tags）は area.css */

/* 公式ページ: 文の途中で折り返されないよう、自分の行に小さな札として置く */
.ext-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  padding: 4px 13px;
  border-radius: var(--radius-pill);
  background: var(--sky-soft);
  color: var(--sky-ink);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 0.2s var(--ease-pop);
}

.ext-link svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ext-link:hover {
  transform: translateY(-1px);
}

/* ---- スクリーンの一覧: 左に座席の並びの図、名前・大きさ・ステッカー、右に席数 */
#screenList button {
  grid-template-columns: 88px minmax(0, 1fr) auto;
  gap: 2px 14px;
  padding: 12px 4px;
}

#screenList .thumb {
  grid-row: 1 / span 3;
  align-self: center;
  width: 88px;
  height: 54px;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: var(--tint);
  transition: transform 0.25s var(--ease-pop);
}

#screenList button:hover .thumb {
  transform: translateY(-2px) rotate(-1.5deg);
}

#screenList .nm,
#screenList .mt,
#screenList .tags {
  grid-column: 2;
}

#screenList .nm {
  font-size: 15.5px;
}

#screenList .rt {
  grid-row: 1 / span 3;
  grid-column: 3;
}

/* スクリーンの大きさ（幅×高さ） */
#screenList .size {
  color: var(--sub);
  font-size: 12.5px;
  font-weight: 500;
}

#screenList .size small {
  margin-left: 1px;
  font-size: 11px;
}

@media (max-width: 380px) {
  #screenList button {
    grid-template-columns: 72px minmax(0, 1fr) auto;
    gap: 2px 10px;
  }

  #screenList .thumb {
    width: 72px;
    height: 46px;
  }
}