/*
 * ボックス（ブースターボックス）と棚の見た目。ボックスを調整するときは、基本的にこのファイルだけを触ればよい。
 *
 * ボックスは CSS の 3D で組んだ直方体（正面・天面・右側面）。実物の特徴を重ねている：
 *   - 正面：シリーズの紋章・ロゴ・弾名・「10パック入り」。上の方に開封用の切り取り線
 *   - 天面：ロゴ。側面：シリーズ名を縦書き
 *   - シュリンク包装：各面に斜めの光の筋（透明フィルムの映り込み）
 *   - 開けた箱（.is-open）：切り取り線から上が外れ、中にパックの頭が並んで見える
 * 大きさは --w（幅）・--h（高さ）・--d（奥行き）。文字の大きさも --w から決める。
 */

/* ---- 1. 直方体 ---- */
.bp-bbox {
  --w: 150px;
  --h: 100px;
  --d: 86px;
  --box-a: #2f4570; /* 明るい部分 */
  --box-b: #1b2742; /* 地の色 */
  --box-c: #0f1729; /* 影 */
  --box-metal-a: #e3e7ed;
  --box-metal-b: #8f98a8;
  --rx: -16deg;
  --ry: -32deg;
  position: relative;
  display: block;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

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

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

.bp-bbox-face {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  color: #f3efe4;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* シュリンク包装の映り込み（どの面にも）。中身は「1.5 実物らしさ」 */
.bp-bbox-face::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

.bp-bbox-face.is-front {
  width: var(--w);
  height: var(--h);
  transform: translateZ(calc(var(--d) / 2));
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px),
    radial-gradient(ellipse 90% 80% at 30% 45%, var(--box-a), var(--box-b) 70%, var(--box-c));
}

.bp-bbox-face.is-right {
  left: calc((var(--w) - var(--d)) / 2);
  width: var(--d);
  height: var(--h);
  transform: rotateY(90deg) translateZ(calc(var(--w) / 2));
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.15)),
    linear-gradient(160deg, var(--box-b), var(--box-c));
}

.bp-bbox-face.is-top {
  top: calc((var(--h) - var(--d)) / 2);
  width: var(--w);
  height: var(--d);
  transform: rotateX(90deg) translateZ(calc(var(--h) / 2));
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    radial-gradient(ellipse at 40% 60%, var(--box-a), var(--box-b) 80%);
}

/* ---- 1.5 実物らしさ ----
 * 実物の箱は「ピシッとした直方体」ではない。次を重ねて、無機質さを消す：
 *   角と縁：面の角をわずかに丸め、光の当たる縁（上・左）を明るく、反対の縁を暗く（厚紙の面取りと厚み）
 *   紙：ごく細かいざらつき（印刷した厚紙の粒状感）と、面の中央がわずかにふくらんだ陰影
 *   シュリンク包装：角に寄るフィルムのしわ、縁に沿った光の線（.bp-bbox-face::after）
 * 注意：3D の面の中では filter・mix-blend-mode を使わない。Chrome で面の中身が描かれなくなる
 *      （2026-10-10、ロゴの影の filter で、スマホ幅の大きな箱の正面が真っ青になった）。
 * 確認の注意：GPU を切ったヘッドレスの Edge／Chrome で撮ると、スマホ幅の大きな箱だけ描かれないことがある。
 *      実際のブラウザ（GPU あり）では正常に出る（2026-10-10 に実際の Chrome で確認）。見た目の確認は実際のブラウザで。
 */
.bp-bbox-face {
  border-radius: 3px;
}

.bp-bbox-face::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: inherit;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 70% 60% at 45% 45%, rgba(255, 255, 255, 0.06), transparent 70%);
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.35),
    inset -1px -1px 0 rgba(0, 0, 0, 0.45),
    inset 0 0 calc(var(--w) * 0.05) rgba(0, 0, 0, 0.35);
}

/* シュリンク包装：斜めの映り込み＋角に寄るしわ＋縁の光 */
.bp-bbox-face::after {
  background:
    linear-gradient(45deg, transparent 47%, rgba(255, 255, 255, 0.32) 50%, transparent 53%) 0 0 / 16% 28% no-repeat,
    linear-gradient(60deg, transparent 47%, rgba(255, 255, 255, 0.18) 50%, transparent 53%) 2% 0 / 22% 20% no-repeat,
    linear-gradient(-45deg, transparent 47%, rgba(255, 255, 255, 0.26) 50%, transparent 53%) 100% 100% / 14% 26% no-repeat,
    linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.2) 27%, transparent 34%),
    linear-gradient(115deg, transparent 62%, rgba(255, 255, 255, 0.09) 66%, transparent 72%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  z-index: 3;
}

/* 天面：ふたの折り目（前後の2本） */
.bp-bbox-top::before,
.bp-bbox-top::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  height: 1px;
  background: rgba(0, 0, 0, 0.35);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12);
}

.bp-bbox-top::before { top: 14%; }
.bp-bbox-top::after { bottom: 14%; }

/* ---- 2. 印刷 ---- */
/* 正面：左に紋章、右にロゴ・弾名・パック数 */
.bp-bbox-front {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 38% 1fr;
  align-items: center;
  gap: 4%;
  padding: 22% 7% 8%;
}

.bp-bbox-emblem {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    repeating-conic-gradient(rgba(255, 255, 255, 0.16) 0 6deg, transparent 6deg 15deg),
    radial-gradient(circle, rgba(255, 255, 255, 0.16), transparent 70%);
}

.bp-bbox-emblem > span {
  display: grid;
  place-items: center;
  width: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--box-metal-a), var(--box-metal-b));
  box-shadow: 0 0 0 2px var(--box-b), 0 0 0 3px var(--box-metal-a), 0 3px 8px rgba(0, 0, 0, 0.5);
  color: var(--box-c);
  font-family: var(--font-mincho);
  font-size: calc(var(--w) * 0.13);
  font-weight: 800;
  line-height: 1;
}

.bp-bbox-text {
  display: flex;
  flex-direction: column;
  gap: calc(var(--w) * 0.02);
  min-width: 0;
  text-align: left;
}

.bp-bbox-logo {
  font-family: var(--font-mincho);
  font-size: calc(var(--w) * 0.085);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.1;
  background: linear-gradient(180deg, #fff 0%, var(--box-metal-a) 45%, var(--box-metal-b) 55%, var(--box-metal-a) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
}

.bp-bbox-name {
  font-size: calc(var(--w) * 0.06);
  font-weight: 700;
  line-height: 1.35;
}

.bp-bbox-count {
  align-self: flex-start;
  margin-top: calc(var(--w) * 0.015);
  padding: 0.1em 0.6em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--bp-gold-a), var(--bp-gold-b));
  color: #2a1c03;
  font-size: calc(var(--w) * 0.05);
  font-weight: 800;
  white-space: nowrap;
}

/* 開封用の切り取り線（実物の「ここから開けてください」） */
.bp-bbox-tear {
  position: absolute;
  left: 0;
  right: 0;
  top: 15%;
  height: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.55);
}

.bp-bbox-tear::after {
  content: "ここから開ける";
  position: absolute;
  right: 5%;
  top: calc(var(--w) * -0.065);
  font-size: calc(var(--w) * 0.04);
  opacity: 0.7;
}

/* 天面：ロゴ */
.bp-bbox-top {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-mincho);
  font-size: calc(var(--w) * 0.1);
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.55);
}

/* 側面：シリーズ名を縦書き */
.bp-bbox-side {
  position: absolute;
  inset: 8% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--w) * 0.03);
  writing-mode: vertical-rl;
  font-family: var(--font-mincho);
  font-size: calc(var(--w) * 0.06);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.75);
}

.bp-bbox-side small {
  font-family: "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 0.6em;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

/* ---- 2.5 ボックスの絵（実物の箱の「キービジュアル」） ----
 * 絵のあるボックス（.has-art）は、正面・天面・側面に絵を敷く（絵は boxes.js の art。app.js が --art-* で渡す）。
 *   正面：上側いっぱいに絵を見せ、紋章・ロゴ・弾名は下の帯にまとめる（帯の下だけ暗くして文字を読ませる）
 *   天面：絵を暗めに敷いてロゴ。側面：絵の端を暗く敷いて縦書き
 * 縁には細い金の線（印刷の箔押しの枠）。
 */
.bp-bbox.has-art .bp-bbox-face.is-front {
  background:
    linear-gradient(180deg,
      transparent 26%,
      color-mix(in srgb, var(--box-c) 84%, transparent) 56%,
      color-mix(in srgb, var(--box-c) 95%, transparent) 100%),
    var(--art-front) center 35% / cover no-repeat,
    var(--box-b);
  box-shadow: inset 0 0 0 calc(var(--w) * 0.012) color-mix(in srgb, var(--box-metal-a) 70%, transparent);
}

.bp-bbox.has-art:not(.is-open) .bp-bbox-face.is-top {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--box-c) 55%, transparent), color-mix(in srgb, var(--box-c) 75%, transparent)),
    var(--art-top) center / cover no-repeat,
    var(--box-b);
}

.bp-bbox.has-art .bp-bbox-face.is-right {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.35)),
    var(--art-side) 85% 40% / cover no-repeat,
    var(--box-c);
}

/* 紋章・ロゴ・弾名は下の帯に横一列でまとめる */
.bp-bbox.has-art .bp-bbox-front {
  align-items: end;
  grid-template-columns: 24% 1fr;
  gap: 4%;
  padding: 0 6% 5%;
}

.bp-bbox.has-art .bp-bbox-name {
  font-size: calc(var(--w) * 0.055);
}

/* 絵の上の紋章は、影を強めて浮かせる */
.bp-bbox.has-art .bp-bbox-emblem {
  background: radial-gradient(circle, color-mix(in srgb, var(--box-c) 55%, transparent), transparent 70%);
}

.bp-bbox.has-art .bp-bbox-emblem > span {
  box-shadow: 0 0 0 2px var(--box-b), 0 0 0 3px var(--box-metal-a), 0 4px 12px rgba(0, 0, 0, 0.7);
}

.bp-bbox.has-art .bp-bbox-text {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* 金属の文字（背景で切り抜いた文字）は text-shadow だと濁る。filter は 3D の面の中で描画を壊すので使わず、
   下の暗い帯を広げて読ませる */
.bp-bbox.has-art .bp-bbox-logo {
  text-shadow: none;
}

/* ---- 3. 開けた箱：切り取り線から上が外れ、パックの頭が並ぶ ---- */
.bp-bbox-packs {
  position: absolute;
  inset: 0 0 auto;
  height: 15%;
  display: none;
  gap: 2%;
  padding: 0 5%;
  align-items: flex-end;
  background: linear-gradient(180deg, #05070d, #10162a);
}

/* パックの頭は開け口の中に収める（下の余白を % で負にすると、% が幅基準のため正面の中ほどまで伸びてしまう） */
.bp-bbox-packs > i {
  flex: 1;
  height: 85%;
  border-radius: 2px 2px 0 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 1px, rgba(0, 0, 0, 0.2) 1px 3px) 0 0 / 100% 22% no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0.4), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.4)),
    linear-gradient(180deg, var(--box-metal-a) 0 22%, var(--box-a) 22%);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.5);
}

.bp-bbox.is-open .bp-bbox-packs {
  display: flex;
}

.bp-bbox.is-open .bp-bbox-tear {
  border-top-style: solid;
  border-top-color: rgba(0, 0, 0, 0.5);
}

.bp-bbox.is-open .bp-bbox-tear::after {
  content: none;
}

/* 開けた箱の天面は、中が暗く見える */
.bp-bbox.is-open .bp-bbox-face.is-top {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.35) 0 1px, transparent 1px 4px) 0 0 / 100% 18% no-repeat,
    linear-gradient(180deg, #0a0e1a, #141b31);
}

/* ---- 4. 床の影 ---- */
.bp-bbox-scene {
  position: relative;
  display: grid;
  place-items: center;
  perspective: 900px;
}

.bp-bbox-scene::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 90%;
  height: 16%;
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(ellipse 60% 35% at 50% 50%, rgba(0, 0, 0, 0.75), transparent 70%),
    radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 70%);
  z-index: -1;
}

/* ---- 5. 棚 ---- */
.bp-shelf {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(200px, 1fr);
  gap: 8px;
  padding: 8px 4px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

/* 棚板 */
.bp-shelf-wrap {
  position: relative;
  padding-bottom: 6px;
}

.bp-shelf-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 54px;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(180deg, #3a3044, #241d2c 60%, #120e17);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.bp-box-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 16px 8px 0;
  border: none;
  background: none;
  scroll-snap-align: center;
  text-align: center;
}

.bp-box-tile .bp-bbox-scene {
  height: 150px;
  width: 100%;
}

.bp-box-tile:hover:not(:disabled) .bp-bbox,
.bp-box-tile:focus-visible .bp-bbox {
  --ry: -22deg;
  transform: translateY(-4px) rotateX(var(--rx)) rotateY(var(--ry));
}

/* 選んでいる箱は少し持ち上がり、下から光が当たる */
.bp-box-tile.is-selected .bp-bbox {
  transform: translateY(-10px) rotateX(var(--rx)) rotateY(var(--ry));
}

.bp-box-tile.is-selected .bp-bbox-scene::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 120%;
  height: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 100%, rgba(255, 225, 140, 0.28), transparent 70%);
  pointer-events: none;
}

.bp-box-caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 54px;
}

.bp-box-caption-series {
  font-size: 0.72rem;
  color: var(--bp-muted);
  letter-spacing: 0.08em;
}

.bp-box-caption-name {
  font-weight: 700;
  font-size: 0.92rem;
}

.bp-box-caption-meta {
  font-size: 0.75rem;
  color: var(--bp-muted);
  font-variant-numeric: tabular-nums;
}

.bp-box-tile.is-selected .bp-box-caption-name {
  color: var(--bp-gold-a);
}

/* 準備中：色を落とし、シールを貼る */
.bp-box-tile:disabled {
  cursor: not-allowed;
}

.bp-box-tile:disabled .bp-bbox {
  filter: grayscale(0.75) brightness(0.65);
}

.bp-box-soon {
  position: absolute;
  top: 46px;
  left: 50%;
  z-index: 2;
  padding: 2px 12px;
  transform: translateX(-50%) rotate(-6deg);
  border-radius: 4px;
  background: #f2efe6;
  color: #3b3530;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}

/* ---- 6. 選んだボックス（大きく、開けた状態で） ---- */
.bp-box-panel {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 32px;
  align-items: center;
  padding: 24px 20px;
  border-radius: 18px;
  background:
    radial-gradient(ellipse 60% 70% at 25% 50%, rgba(255, 225, 140, 0.07), transparent 70%),
    var(--bp-surface);
  box-shadow: inset 0 0 0 1px var(--bp-line);
}

.bp-box-hero .bp-bbox-scene {
  height: 260px;
}

/* 大きく表示する箱は、棚の箱をそのまま拡大した見た目にする（比率・見下ろす角度は棚と同じ。向きは app.js が棚と同じ値を渡す） */
.bp-box-hero .bp-bbox {
  --w: 250px;
  --h: 167px;
  --d: 143px;
}

.bp-box-info {
  text-align: left;
}

.bp-box-series {
  margin: 0;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--bp-muted);
}

.bp-box-name {
  margin: 2px 0 14px;
  font-family: var(--font-mincho);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.bp-box-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}

.bp-box-progress .bp-meter {
  flex: 1;
  max-width: 260px;
  height: 8px;
}

/* レアリティごとの集まり具合 */
.bp-rarity-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.bp-rarity-list li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px var(--bp-line);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.bp-rarity-list b {
  font-weight: 800;
}

.bp-rarity-list .is-n b { color: #cfc9b8; }
.bp-rarity-list .is-r b { color: #7fb0f2; }
.bp-rarity-list .is-sr b { color: #cfa3f2; }
.bp-rarity-list .is-ssr b { color: #f0c650; }

.bp-stats {
  display: flex;
  gap: 18px;
  margin: 0 0 16px;
  font-size: 0.8rem;
  color: var(--bp-muted);
}

.bp-stat strong {
  margin-left: 4px;
  color: var(--bp-ink);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}

/* 開封のボタンは2つ横並び（スマホで縦に積むと、ボックスの下が長くなる） */
.bp-buy-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 440px;
}

/* 「1箱開ける」の下に、パック数を小さく添える（括弧で続けると、狭い画面で途中で折れる） */
.bp-buy-row .bp-open-btn {
  flex-direction: column;
  gap: 0;
  line-height: 1.25;
}

.bp-buy-row .bp-open-btn small {
  font-size: 0.72em;
  font-weight: 700;
  opacity: 0.8;
}

@media (max-width: 420px) {
  .bp-buy-row .bp-open-btn {
    padding: 10px 12px;
    font-size: 0.9rem;
  }
}

.bp-box-note {
  margin: 10px 0 0;
  font-size: 0.78rem;
  color: var(--bp-muted);
}

@media (min-width: 760px) {
  .bp-box-panel {
    grid-template-columns: 340px 1fr;
    padding: 28px 32px;
  }

  .bp-shelf {
    overflow-x: visible;
  }
}

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