/*
 * Figma「8_Frame _シェア画面」（440x889）の座標をそのまま使う。
 * 画面幅が 440px 未満の端末では --u（1デザイン px あたりの長さ）を縮めて全体を等倍縮小する。
 */
:root {
  --color-red: #c83037;
  --color-black: #1f1f1f;
  --color-gold: #b6a78c;
  --color-white: #ffffff;
  --u: min(1px, calc(100vw / 440));
  /* 公式サイト（jigoku-kourin.com）と同じく Web フォントは配信せず、端末のフォントを使う */
  --font-gothic: YuGothic, "Yu Gothic", sans-serif;
  --font-noto: "Noto Sans JP", sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  background: var(--color-black);
  color: var(--color-white);
  -webkit-text-size-adjust: 100%;
}

.frame {
  position: relative;
  width: calc(440 * var(--u));
  height: calc(889 * var(--u));
  margin: 0 auto;
  overflow: hidden;
  /* エンブレムはフレームと同じ 440x889 の素材 */
  background: var(--color-red) url("assets/background-emblem.svg") left top / 100% 100% no-repeat;
}

.header-wave {
  position: absolute;
  inset: 0 0 auto;
  height: calc(40 * var(--u));
  background: url("assets/header-wave.svg") center / 100% 100% no-repeat;
}

.card {
  position: absolute;
  top: calc(120 * var(--u));
  left: calc(20 * var(--u));
  width: calc(400 * var(--u));
  height: calc(300 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 calc(12 * var(--u)) calc(23 * var(--u)) rgba(0, 0, 0, 0.25));
}

.card-area:not([data-state="ready"]) .card {
  background: rgba(31, 31, 31, 0.6);
}

.card-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* 長押しで画像を保存できるようにする */
  -webkit-touch-callout: default;
  user-select: auto;
}

.status-message {
  margin: 0;
  padding: 0 calc(32 * var(--u));
  font-family: var(--font-noto);
  font-size: calc(15 * var(--u));
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

.lead {
  position: absolute;
  top: calc(448 * var(--u));
  left: 0;
  width: 100%;
  margin: 0;
  font-family: var(--font-noto);
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

/* 金色の破れ紙（左右 1.43% 内側）の上に黒の破れ紙を重ねる */
.share-button {
  position: absolute;
  top: calc(500 * var(--u));
  left: calc(95 * var(--u));
  width: calc(250 * var(--u));
  height: calc(64 * var(--u));
  padding-top: calc(16 * var(--u));
  font-family: var(--font-gothic);
  font-size: calc(20 * var(--u));
  font-weight: 700;
  line-height: calc(31 * var(--u));
  letter-spacing: 0.12em;
  text-align: center;
  color: var(--color-white);
  text-decoration: none;
  isolation: isolate;
}

.share-button::before,
.share-button::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.share-button::before {
  left: 1.43%;
  right: 1.43%;
  background-image: url("assets/button-gold.svg");
}

.share-button::after {
  left: 0;
  right: 0;
  background-image: url("assets/button-black.svg");
}

.share-button:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 4px;
}

.flame {
  position: absolute;
  top: calc(577 * var(--u));
  left: calc(18 * var(--u));
  width: calc(396 * var(--u));
  height: calc(173 * var(--u));
  background: url("assets/flame.svg") center / 100% 100% no-repeat;
}

.footer {
  position: absolute;
  inset: auto 0 0;
  height: calc(133 * var(--u));
  padding-top: calc(16 * var(--u));
  text-align: center;
  font-family: var(--font-gothic);
  background: var(--color-black) url("assets/footer-wave.svg") center bottom / 100% calc(57 * var(--u)) no-repeat;
}

.footer p {
  margin: 0;
  font-size: calc(12 * var(--u));
  line-height: calc(24 * var(--u));
}

.copyright {
  color: rgba(255, 255, 255, 0.8);
}