/* 見出しと主操作の共通意匠。本文の書体と各画面の寸法には触れない。 */
:root {
  --heading-caption-font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  --heading-caption-weight: 800;
  --heading-caption-spacing: 0;
}

/* 元の英字で行高を保ち、表示する文字だけを通常の字間へ揃える。 */
.heading-caption {
  position: relative;
  color: transparent !important;
}
.heading-caption::after {
  content: attr(data-heading-caption);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  color: #b7c7bd;
  font-family: var(--heading-caption-font);
  font-weight: var(--heading-caption-weight);
  font-style: normal;
  letter-spacing: var(--heading-caption-spacing);
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  pointer-events: none;
}

.heading-art { position: relative; }
.heading-art.has-heading-art { color: transparent !important; }
.heading-art-graphic {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.heading-art.has-heading-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--heading-art-image) left center / var(--heading-art-size, contain) no-repeat;
  pointer-events: none;
}
:is(.player-match-start-label, .player-primary-action-label) {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
}
/* 対戦開始だけを角ゴシックと軽い傾きで強調する。 */
:is(.player-match-start-label, #playerCommunication .player-primary-action-label) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-size: 22px;
  font-weight: 600;
  font-style: normal;
  line-height: 26px;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: skewX(-6deg);
}
:is(.player-match-start-label, #playerCommunication .player-primary-action-label)::before {
  content: "";
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url("../assets/ui/main_menu/communication.svg?v=app-cache-20261105-3") center / contain no-repeat;
  mask: url("../assets/ui/main_menu/communication.svg?v=app-cache-20261105-3") center / contain no-repeat;
  pointer-events: none;
}
:is(.player-match-start-label, #playerCommunication .player-primary-action-label)::after,
#playerShop .player-primary-action-label::after {
  content: "";
  position: absolute;
  inset-inline-start: -5px;
  top: 50%;
  width: 30px;
  height: 30px;
  border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 50%;
  background: #24162114;
  transform: translateY(-50%);
  pointer-events: none;
}
#playerShop .player-primary-action-label { display: flex; align-items: center; justify-content: center; gap: 8px; }
#playerShop .player-primary-action-label::before {
  content: "";
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("../assets/ui/main_menu/shop.svg") center / contain no-repeat;
  mask: url("../assets/ui/main_menu/shop.svg") center / contain no-repeat;
  pointer-events: none;
}
#playerShop .player-primary-action-label::after { inset-inline-start: -4px; width: 24px; height: 24px; }
@media (min-width: 901px) {
  :is(.player-match-start-label, #playerCommunication .player-primary-action-label) { font-size: 24px; }
}
:is(#playerShop, #playerCommunication) .player-primary-action-label { line-height: 22.4px; }
@media (min-height: 621px) {
  body.mobile-landscape-layout .player-match-start-label:not(:lang(en)) { line-height: 27px; }
}

@media (forced-colors: active), print {
  .heading-caption { color: CanvasText !important; }
  .heading-caption::after { display: none; }
  .heading-art.has-heading-art { color: CanvasText !important; }
  .heading-art.has-heading-art::after { display: none; }
  .heading-art-graphic { display: none; }
}