:root {
  --paper: #fbfdff;
  --ink: #101828;
  --navy: #123e82;
  --blue: #2f7be6;
  --cyan: #7bd7ff;
  --pale: #d6e4f8;
  --gold: #f7cf64;
  --gold-dark: #a96d12;
  --silver-1: #ffffff;
  --silver-2: #dfe8f4;
  --silver-3: #9fb3c9;
  --silver-4: #f7fbff;
  --rose: #e95f7c;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background:
    linear-gradient(135deg, #d9e2ef, #f5f7fb 52%, #dfe8f5);
  color: var(--ink);
  font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}

.stage {
  padding: 34px;
  perspective: 1600px;
}

.cover {
  position: relative;
  width: min(72vw, 760px);
  aspect-ratio: 1 / 1.4142;
  overflow: hidden;
  background:
    linear-gradient(155deg, rgba(255,255,255,.98), rgba(237,246,255,.92) 48%, rgba(255,255,255,.98)),
    linear-gradient(88deg, rgba(255,255,255,.2), rgba(159,179,201,.16), rgba(255,255,255,.34)),
    var(--paper);
  box-shadow:
    0 36px 100px rgba(18, 62, 130, .34),
    0 8px 24px rgba(16, 24, 40, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .9);
  transform: rotateX(1deg) rotateY(-1deg);
}

.cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, transparent 0 19%, rgba(255,255,255,.78) 29%, rgba(210,230,255,.3) 35%, transparent 45%),
    linear-gradient(24deg, transparent 0 62%, rgba(255,255,255,.42) 68%, transparent 75%),
    linear-gradient(92deg, rgba(47,123,230,.2), transparent 14%, transparent 86%, rgba(47,123,230,.12)),
    repeating-linear-gradient(135deg, rgba(47,123,230,.055) 0 1px, transparent 1px 18px);
  mix-blend-mode: screen;
}

.cover::after {
  content: "";
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(120, 153, 194, .42);
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.72),
    inset 0 0 0 7px rgba(205,222,244,.28),
    inset 0 0 46px rgba(47,123,230,.1);
  pointer-events: none;
}

.shine-field {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 72% 18%, rgba(123,215,255,.55), transparent 18%),
    radial-gradient(ellipse at 20% 46%, rgba(247,207,100,.26), transparent 22%),
    conic-gradient(from 220deg at 72% 28%, transparent, rgba(255,255,255,.58), transparent 16%);
  opacity: .86;
  filter: blur(.2px);
  pointer-events: none;
}

.foil-stripe {
  position: absolute;
  top: -120px;
  right: 72px;
  width: 184px;
  height: 132%;
  transform: rotate(18deg);
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(205,222,244,.62), rgba(123,215,255,.46), rgba(255,255,255,.82), transparent);
  opacity: .82;
  mix-blend-mode: screen;
  pointer-events: none;
}

.cover-art {
  position: absolute;
  left: 50%;
  bottom: 132px;
  width: 86%;
  transform: translateX(-50%);
  opacity: .96;
  filter:
    saturate(1.18)
    contrast(1.06)
    drop-shadow(0 18px 22px rgba(18, 62, 130, .12));
}

.top-line {
  position: absolute;
  top: 34px;
  left: 54px;
  right: 54px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(18, 62, 130, .26);
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
}

.top-line b {
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: .16em;
  color: rgba(18, 62, 130, .72);
  white-space: nowrap;
}

.title-block {
  position: absolute;
  top: 92px;
  left: 54px;
  right: 54px;
}

.kicker {
  width: fit-content;
  margin: 0 0 16px;
  padding: 10px 16px;
  border: 1px solid rgba(47, 123, 230, .52);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(214,228,248,.76));
  color: var(--blue);
  box-shadow:
    0 10px 24px rgba(47, 123, 230, .1),
    inset 0 1px 0 rgba(255,255,255,.95);
  font-size: 15px;
  font-weight: 900;
}

h1 {
  margin: 0;
  color: var(--navy);
  font-family: "Yu Gothic", "YuGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-weight: 900;
  line-height: .98;
  letter-spacing: 0;
  text-shadow:
    0 2px 0 rgba(255,255,255,.9),
    0 10px 22px rgba(18, 62, 130, .15);
}

h1 span {
  display: block;
}

.title-main {
  position: relative;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(46px, 6.35vw, 66px);
  white-space: nowrap;
}

.title-main::after {
  content: "";
  position: absolute;
  left: 0;
  right: 8px;
  bottom: 7px;
  height: 12px;
  background:
    linear-gradient(
      90deg,
      rgba(214,228,248,.15),
      rgba(255,255,255,.9) 24%,
      rgba(158,185,218,.5) 50%,
      rgba(255,255,255,.82) 72%,
      rgba(123,215,255,.3)
    );
  opacity: .65;
  transform: skewX(-12deg);
  z-index: -1;
}

.title-sub {
  position: relative;
  width: fit-content;
  margin-top: 4px;
  padding-right: 12px;
  font-size: clamp(92px, 12vw, 132px);
  line-height: .86;
  letter-spacing: .01em;
  background:
    linear-gradient(96deg, #123e82 0%, #123e82 42%, #ffffff 50%, #8aa6c8 55%, #123e82 66%, #123e82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: .7px rgba(18, 62, 130, .55);
  filter: drop-shadow(0 14px 18px rgba(18, 62, 130, .16));
}

.reading {
  margin: 15px 0 0 2px;
  color: rgba(18, 62, 130, .72);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
}

.subtitle {
  margin: 16px 0 0;
  width: fit-content;
  max-width: 570px;
  padding: 13px 18px;
  border-radius: 8px;
  border: 1px solid rgba(157, 184, 218, .42);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(214,228,248,.95) 36%, rgba(255,255,255,.98) 55%, rgba(198,218,244,.88));
  color: #101828;
  box-shadow:
    0 14px 32px rgba(18, 62, 130, .12),
    inset 0 1px 0 rgba(255,255,255,.96);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.55;
}

.medal {
  position: absolute;
  top: 126px;
  right: 52px;
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  border-radius: 50%;
  border: 1px solid rgba(118, 138, 164, .6);
  background:
    conic-gradient(from 210deg, #ffffff, #c9d5e4, #f9fcff, #8fa4bd, #ffffff, #d8e2ef, #ffffff),
    linear-gradient(135deg, #ffffff, #dce6f2 36%, #f9fcff 55%, #9fb3c9);
  color: #23415f;
  box-shadow:
    0 18px 30px rgba(35, 65, 95, .2),
    inset 0 2px 0 rgba(255,255,255,.82),
    inset 0 -8px 18px rgba(93, 113, 140, .2);
  transform: rotate(7deg);
  z-index: 2;
}

.medal::before,
.medal::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px dashed rgba(88, 58, 5, .36);
}

.medal::after {
  inset: -6px;
  border: 10px solid rgba(255,255,255,.34);
  border-left-color: rgba(123,215,255,.42);
  border-bottom-color: rgba(255,255,255,.08);
}

.medal span {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
}

.medal strong {
  font-size: 25px;
  line-height: 1.05;
}

.spark {
  position: absolute;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, rgba(255,255,255,.95), rgba(123,215,255,.75), rgba(247,207,100,.88));
  box-shadow:
    0 0 20px rgba(123,215,255,.6),
    0 0 4px rgba(255,255,255,.9);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

.spark-a { top: 286px; left: 72px; }
.spark-b { top: 452px; right: 86px; width: 14px; height: 14px; }
.spark-c { display: none; }

.chips {
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 222px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
}

.chips span {
  padding: 8px 12px;
  border: 1px solid rgba(47, 123, 230, .46);
  border-radius: 999px;
  background:
    linear-gradient(128deg, rgba(255,255,255,.98), rgba(213,226,243,.82) 35%, rgba(255,255,255,.95) 51%, rgba(188,210,238,.78));
  color: var(--navy);
  box-shadow:
    0 8px 18px rgba(18, 62, 130, .1),
    0 0 0 1px rgba(255,255,255,.72) inset,
    inset 0 1px 0 rgba(255,255,255,.9);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.obi {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 48px;
  padding: 21px 54px 20px;
  background:
    linear-gradient(95deg, #0f326f, #1857b4 39%, #2f7be6 64%, #7bd7ff 82%, #eaf8ff);
  color: white;
  box-shadow:
    0 -14px 32px rgba(18, 62, 130, .18),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.obi::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(112deg, transparent 0 24%, rgba(255,255,255,.34) 36%, transparent 54%),
    linear-gradient(0deg, rgba(255,255,255,.12), transparent 45%);
  pointer-events: none;
}

.obi p {
  position: relative;
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.48;
  text-shadow: 0 1px 8px rgba(0,0,0,.18);
}

.footer-line {
  position: absolute;
  left: 54px;
  right: 54px;
  bottom: 20px;
  display: flex;
  justify-content: space-between;
  color: rgba(18, 62, 130, .72);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
}

@media (max-width: 760px) {
  .stage {
    padding: 12px;
  }

  .cover {
    width: calc(100vw - 24px);
  }

  .top-line,
  .title-block,
  .chips,
  .footer-line {
    left: 34px;
    right: 34px;
  }

  .top-line {
    font-size: 10px;
  }

  .medal {
    right: 34px;
    width: 96px;
    height: 96px;
  }

  .subtitle,
  .obi p {
    font-size: 16px;
  }

  .title-main {
    font-size: clamp(35px, 8.7vw, 46px);
  }

  .title-sub {
    font-size: clamp(76px, 18vw, 98px);
  }

  .cover-art {
    bottom: 126px;
  }

  .obi {
    padding-inline: 34px;
  }
}