/* The public page of the Pass (template/kit/pass.php, 2026-10-18), over the styles of the kit page (static/css/kit.css):
   the ticket of the Pass between two cards of the games in the evening of the hero, its promises in the buy box, and
   the cards of what it opens. Only transforms and opacity move, in boxes of fixed size, so nothing around them moves;
   still for those who ask for less motion. */

/* Japanese never breaks a line before a small kana or the long vowel mark. */
html[lang="ja"] .pass-page {
  line-break: strict;
}

/* ---------- The ticket of the Pass and its two cards (the Pass page of the space, larger) ---------- */
.pass-art {
  position: relative;
  width: min(100%, 420px);
  aspect-ratio: 1 / .86;
  margin: 0 auto;
}

.pass-art__card,
.pass-art__ticket {
  position: absolute;
  box-sizing: border-box;
  border-radius: 22px;
}

.pass-art__card {
  top: 19%;
  display: grid;
  place-items: center;
  width: 38%;
  height: 60%;
  border: 3px solid rgba(255, 255, 255, .85);
  box-shadow: 0 30px 60px rgba(10, 0, 20, .5);
}

.pass-art__card--left {
  left: 5%;
  background: linear-gradient(155deg, #9b8cff, #5132d8);
  transform: rotate(-14deg);
  animation: pass-float-left 9s ease-in-out -3s infinite;
}

.pass-art__card--right {
  right: 5%;
  background: linear-gradient(155deg, #ff7eb3, #c8105a);
  transform: rotate(14deg);
  animation: pass-float-right 10s ease-in-out -5s infinite;
}

.pass-art__ticket {
  top: 5%;
  left: 29%;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 42%;
  height: 76%;
  overflow: hidden;
  background: linear-gradient(160deg, #fff1c9, #ffd98a 55%, #f4b860);
  box-shadow: 0 34px 70px rgba(10, 0, 20, .55), 0 0 0 6px rgba(255, 217, 138, .3);
  color: #3b163f;
  animation: pass-float 7s ease-in-out infinite;
}

/* A light sweeping the ticket, now and then. */
.pass-art__ticket::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: pass-shine 7s ease-in-out 2s infinite;
  pointer-events: none;
}

.pass-art__word {
  margin-right: -.2em;
  font-size: clamp(1.3rem, 3.2vw, 1.85rem);
  font-weight: 950;
  letter-spacing: .2em;
  line-height: 1;
}

.pass-art__brand {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .03em;
  opacity: .72;
}

/* The small one, in the band at the end of the page. */
.pass-art--small {
  width: 100%;
  max-width: 190px;
}

.pass-art--small .pass-art__card {
  border-width: 2px;
  border-radius: 14px;
}

.pass-art--small .pass-art__ticket {
  gap: 6px;
  border-radius: 14px;
  box-shadow: 0 22px 44px rgba(10, 0, 20, .5), 0 0 0 4px rgba(255, 217, 138, .3);
}

.pass-art--small .pass-art__ticket svg {
  width: 18px;
  height: 18px;
}

.pass-art--small .pass-art__word {
  font-size: 1rem;
}

.pass-art--small .pass-art__brand {
  display: none;
}

@keyframes pass-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pass-float-left {
  0%, 100% { transform: rotate(-14deg) translateY(0); }
  50% { transform: rotate(-15.5deg) translateY(-7px); }
}

@keyframes pass-float-right {
  0%, 100% { transform: rotate(14deg) translateY(0); }
  50% { transform: rotate(15.5deg) translateY(-8px); }
}

@keyframes pass-shine {
  0%, 70% { transform: translateX(-160%) skewX(-18deg); }
  100% { transform: translateX(330%) skewX(-18deg); }
}

/* ---------- The buy box: the price, its three promises, the way in ---------- */
/* The launch price (config/pass.php): the regular price struck through before it, and the end of the launch below. */
.kit-price s {
  color: var(--kit-muted);
  font-size: clamp(1.1rem, 2.6vw, 1.35rem);
  font-weight: 800;
  text-decoration-thickness: 2px;
}

.kit-final .kit-price s,
.kit-sticky__info s {
  color: rgba(255, 255, 255, .6);
}

.kit-sticky__info s {
  color: var(--kit-muted);
  font-weight: 700;
}

.pass-launch {
  margin: 8px 0 0;
  color: #c8105a;
  font-size: .93rem;
  font-weight: 850;
  line-height: 1.45;
}

.kit-final .pass-launch {
  color: #ffd98a;
}

.pass-promises {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pass-promises li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--kit-plum);
  font-weight: 750;
  line-height: 1.4;
}

.pass-promises svg {
  flex: none;
  margin-top: 2px;
}

.pass-member {
  margin-top: 8px;
  color: var(--kit-muted);
  font-size: .93rem;
  line-height: 1.5;
}

.pass-member a {
  color: #9d1d53;
  font-weight: 850;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- What the Pass opens, game by game ---------- */
.pass-opens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pass-open {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(42, 20, 45, .09);
  border-radius: 22px;
  background: var(--kit-card);
  box-shadow: 0 15px 38px rgba(72, 22, 64, .08);
}

.pass-open__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(150deg, #6c4dff, #9b3dff);
  box-shadow: 0 10px 22px rgba(108, 77, 255, .26);
}

.pass-open__icon--pink {
  background: linear-gradient(150deg, #e0156f, #d63a28);
  box-shadow: 0 10px 22px rgba(224, 21, 111, .22);
}

.pass-open h3 {
  margin: 0 0 8px;
  color: var(--kit-plum);
  font-size: 1.08rem;
  line-height: 1.2;
}

.pass-open p {
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.pass-open b {
  display: block;
  margin-bottom: 2px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pass-open__pass {
  color: var(--kit-plum);
}

.pass-open__pass b {
  color: #c8105a;
}

.pass-open__free {
  margin-top: 8px !important;
  color: var(--kit-muted);
  font-size: .9rem !important;
}

/* What comes later: a quieter card, its « Bientôt » after the name. */
.pass-open.is-soon {
  border-style: dashed;
  background: rgba(255, 255, 255, .55);
  box-shadow: none;
}

.pass-open.is-soon .pass-open__icon {
  opacity: .55;
}

.pass-open__soon {
  display: inline-block;
  margin-left: 4px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(139, 44, 246, .12);
  color: #6b2bd6;
  font-size: .72rem;
  font-weight: 900;
  vertical-align: middle;
}

@media (max-width: 1040px) {
  .pass-opens {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 860px) {
  .pass-art {
    width: min(100%, 320px);
  }

  .pass-opens {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .pass-open {
    flex-direction: row;
    align-items: flex-start;
    padding: 14px 16px;
  }

  .pass-open__icon {
    width: 38px;
    height: 38px;
  }
}

@media (max-width: 560px) {
  .pass-art {
    width: min(100%, 270px);
  }

  .pass-art--small {
    width: 140px;
    margin: 0 auto;
  }

  .pass-member {
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pass-art__card--left,
  .pass-art__card--right,
  .pass-art__ticket {
    animation: none;
  }

  .pass-art__ticket::after {
    display: none;
  }
}