/*
 * 袋（ブースターパック）の見た目。袋を調整するときは、基本的にこのファイルだけを触ればよい。
 *
 * 実物のパックの特徴を CSS で重ねている（下から順に）：
 *   1. フィルムの地色（シリーズごと）…… --pack-a〜--pack-c
 *   2. ふくらみ …… 中央が明るく、左右の端に向かって暗くなる陰影（枕のような形）
 *   3. 封の近くのシワ …… 上下の封に向かって細かい縦じわ
 *   4. 印刷 …… ロゴ・シリーズ名・紋章・弾名・枚数
 *   5. 光沢 …… 指の位置（--gx, --gy）に合わせて動く映り込み＋縦の反射
 *   6. 上下の封（クリンプ）…… 熱で圧着した細かい縦の筋と、外側だけギザギザに切った端
 *
 * 破り方：封（.bp-pack-seal）のすぐ下が切れ目の線。左端の切り込みから右へ引くと、
 *   引いた分（--peel：0〜1）だけ封が左からめくれ上がり、下からギザギザの破れ口が現れる。動きは app.js の onPack*。
 * 本体（.bp-pack-body）は切れ目の線から下だけ。袋そのもの（.bp-pack）には地の色も影も付けない
 *   （付けると、封を破ったあとに封の高さの「縁」が残って見える）。
 */

.bp-pack {
  --pack-a: #2f4570; /* 明るい部分 */
  --pack-b: #1b2742; /* 地の色 */
  --pack-c: #0f1729; /* 影 */
  --pack-ink: #f3efe4; /* 印刷の文字 */
  --pack-metal-a: #d6dbe3; /* 封・ロゴの金属色 */
  --pack-metal-b: #8f98a8;
  --seal-h: 11%; /* 上の封の高さ */
  --crimp-h: 7%; /* 下の封の高さ */
  --gx: 30%;
  --gy: 25%;
  --peel: 0;
  position: relative;
  display: block;
  width: min(64vw, 220px);
  aspect-ratio: 2 / 3.1;
  padding: 0;
  border: none;
  background: none;
  color: var(--pack-ink);
  cursor: grab;
  touch-action: none;
}

.bp-pack.series-bungo {
  --pack-a: #7a3b2c;
  --pack-b: #4a2018;
  --pack-c: #2a110c;
  --pack-metal-a: #f0d79a;
  --pack-metal-b: #a8813a;
}

.bp-pack.series-travel {
  --pack-a: #2f7180;
  --pack-b: #1b4652;
  --pack-c: #0e2830;
}

.bp-pack:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

/* 床に落ちる影（本体の分だけ） */
.bp-pack::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 2%;
  top: var(--seal-h);
  bottom: 0;
  z-index: -1;
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.5), 0 6px 10px rgba(0, 0, 0, 0.35);
}

/* 1〜3. 地色・ふくらみ・シワ・印刷。上端は破れ口（封の下に4pxもぐらせて、破るまで見えない）。
   左上の V は、破り始めの切り込み */
.bp-pack-body {
  position: absolute;
  top: calc(var(--seal-h) - 4px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  clip-path: polygon(
    0 2px, 3% 0, 7% 3px, 11% 1px, 15% 4px, 20% 1px, 24% 3px, 29% 0, 33% 2px, 38% 1px, 42% 4px,
    47% 1px, 52% 3px, 56% 0, 61% 2px, 65% 4px, 70% 1px, 74% 3px, 79% 0, 83% 3px, 88% 1px, 92% 4px,
    96% 1px, 100% 2px, 100% 100%, 0 100%, 0 16px, 8px 11px, 0 6px
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8% 8% calc(var(--crimp-h) + 5%);
  background:
    /* 地紋：細かい斜めの線（印刷の網目） */
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px),
    /* 中心から広がる光 */
    radial-gradient(ellipse 80% 55% at 50% 42%, var(--pack-a), var(--pack-b) 70%, var(--pack-c));
  text-align: center;
}

/* ふくらみ：左右の端が丸く落ちていく陰影 */
.bp-pack-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.12) 9%,
    rgba(255, 255, 255, 0.06) 30%,
    rgba(255, 255, 255, 0) 55%,
    rgba(0, 0, 0, 0.1) 85%,
    rgba(0, 0, 0, 0.5) 100%);
  pointer-events: none;
}

/* 封の近くのシワ：上下の端に向かって細かい縦じわが寄る */
.bp-pack-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg,
    rgba(255, 255, 255, 0.1) 0 1px,
    rgba(0, 0, 0, 0.16) 1px 4px,
    rgba(255, 255, 255, 0) 4px 9px);
  -webkit-mask: linear-gradient(180deg, #000 0, transparent 10%, transparent calc(100% - var(--crimp-h) - 8%), #000 calc(100% - var(--crimp-h)));
  mask: linear-gradient(180deg, #000 0, transparent 10%, transparent calc(100% - var(--crimp-h) - 8%), #000 calc(100% - var(--crimp-h)));
  pointer-events: none;
}

/* 4. 印刷 */
.bp-pack-logo {
  position: relative;
  z-index: 1;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  /* 金属の箔押し文字 */
  background: linear-gradient(180deg, #fff 0%, var(--pack-metal-a) 45%, var(--pack-metal-b) 55%, var(--pack-metal-a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.6));
}

.bp-pack-series {
  position: relative;
  z-index: 1;
  margin-top: 4px;
  padding: 1px 10px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
}

/* 紋章：放射状の光の上に、二重の輪と一文字 */
.bp-pack-emblem {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54%;
  aspect-ratio: 1;
  margin: auto 0;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.14) 0 6deg, transparent 6deg 15deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.18), transparent 70%);
}

.bp-pack-mark {
  display: grid;
  place-items: center;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--pack-metal-a), var(--pack-metal-b));
  box-shadow:
    0 0 0 3px var(--pack-b),
    0 0 0 4px var(--pack-metal-a),
    0 4px 10px rgba(0, 0, 0, 0.5);
  color: var(--pack-c);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-size: 2rem;
  font-weight: 800;
}

.bp-pack-name {
  position: relative;
  z-index: 1;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.bp-pack-count {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font-size: 0.7rem;
  opacity: 0.9;
}

.bp-pack-count strong {
  font-size: 1rem;
}

.bp-pack-fine {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  font-size: 0.5rem;
  opacity: 0.55;
}

/* 5. 光沢：フィルムに映る光。指の位置で動く大きな映り込みと、ふくらみに沿った縦の反射 */
.bp-pack-gloss {
  position: absolute;
  top: var(--seal-h);
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse 45% 30% at var(--gx) var(--gy), rgba(255, 255, 255, 0.32), transparent 70%),
    linear-gradient(100deg, transparent 18%, rgba(255, 255, 255, 0.2) 24%, transparent 31%),
    linear-gradient(100deg, transparent 62%, rgba(255, 255, 255, 0.08) 66%, transparent 72%);
  mix-blend-mode: screen;
}

/* 6. 上下の封。細かい縦の筋（熱圧着の跡）＋外側の端だけギザギザ */
.bp-pack-seal,
.bp-pack-crimp {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 1.5px, rgba(0, 0, 0, 0.22) 1.5px 3.5px),
    linear-gradient(180deg, var(--pack-metal-a), var(--pack-metal-b) 55%, var(--pack-metal-a));
}

.bp-pack-seal {
  top: 0;
  height: var(--seal-h);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
  /* 上の端だけをギザギザに切る：三角の帯（上 4px）＋その下は全面 */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 4L4 0L8 4Z'/%3E%3C/svg%3E") 0 0 / 8px 4px repeat-x,
    linear-gradient(#000 0 0) 0 4px / 100% calc(100% - 4px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 4L4 0L8 4Z'/%3E%3C/svg%3E") 0 0 / 8px 4px repeat-x,
    linear-gradient(#000 0 0) 0 4px / 100% calc(100% - 4px) no-repeat;
  /* 右下を支点に、引いた分だけ左からめくれ上がる */
  transform-origin: 100% 100%;
  transform: translateY(calc(var(--peel) * -22%)) rotate(calc(var(--peel) * -14deg));
  transition: transform 0.3s ease;
}

/* 引く向きの目印（切れ目の線に沿って右へ） */
.bp-pack-seal::before {
  content: "ここから引く ›››";
  position: absolute;
  left: 10px;
  bottom: 3px;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(30, 34, 44, 0.65);
}

.bp-pack-crimp {
  bottom: 0;
  height: var(--crimp-h);
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.4);
  /* 下の端だけをギザギザに切る */
  -webkit-mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0L4 4L8 0Z'/%3E%3C/svg%3E") 0 100% / 8px 4px repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 4px) no-repeat;
  mask:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath d='M0 0L4 4L8 0Z'/%3E%3C/svg%3E") 0 100% / 8px 4px repeat-x,
    linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 4px) no-repeat;
}

.bp-pack.is-dragging .bp-pack-seal {
  transition: none;
}

.bp-pack.is-torn .bp-pack-seal {
  transform: translate(25%, -160%) rotate(-24deg);
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.3, 0.6, 0.3, 1), opacity 0.4s ease 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .bp-pack-seal {
    transition: none;
  }
}

/* PC：袋も大きく（開封画面を広く使う。style.css の PC の指定と同じ条件） */
@media (min-width: 900px) and (min-height: 640px) {
  .bp-pack {
    width: clamp(220px, 36vh, 340px);
  }
}