/* ============================================================
 * rinka-binder.css — りんかバインダー（2026-09-26 作り直し）
 * rinka-binder.js の .bd2-* だけに効く。rinka-world-2026.css（body.rw26）とぶつかる所はここで上書きする。
 * 絵文字は使わない（アイコンは assets/img/collection/icons/*.webp）。
 * ========================================================== */

.bd2-app {
	--bd-ink: #4a3540;
	--bd-soft: #76606c;
	--bd-rose: #e0588f;
	--bd-rose-ink: #b83a72;
	--bd-lav: #b9a3ff;
	--bd-cream: #fffaf3;
	--bd-cover: #f7b7cf;
	--bd-cover-2: #d9c4ff;
	--bd-page-w: min(520px, 100%);
	color: var(--bd-ink);
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 12px 8px;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
.bd2-app *, .bd2-app *::before, .bd2-app *::after { box-sizing: border-box; }
.bd2-ico { width: 24px; height: 24px; object-fit: contain; flex: none; display: inline-block; vertical-align: middle; }
.bd2-ico.is-title { width: 30px; height: 30px; }
.bd2-ico.is-big { width: 84px; height: 84px; }
.bd2-heart { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.12em; flex: none; }

/* ---------- 上：コンプリート率のリング＋数字 ---------- */
.bd2-top {
	display: flex; align-items: center; gap: 16px;
	background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,244,250,.92));
	border: 1px solid #f4d9e6;
	border-radius: 24px;
	padding: 14px 16px;
	box-shadow: 0 10px 30px -12px rgba(184,58,114,.25);
	margin: 0 0 12px;
}
.bd2-ring { position: relative; width: 96px; height: 96px; flex: none; }
.bd2-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bd2-ring__bg { fill: none; stroke: #f7e3ee; stroke-width: 10; }
.bd2-ring__fg { fill: none; stroke: var(--bd-rose); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.22,.8,.24,1); }
.bd2-ring__num { position: absolute; inset: 0; display: grid; place-content: center; font-size: 12px; color: var(--bd-soft); text-align: center; }
.bd2-ring__num b { font-size: 26px; color: var(--bd-rose-ink); line-height: 1; font-weight: 800; }
.bd2-top__body { min-width: 0; flex: 1; }
.bd2-top__title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 800; font-size: 18px; letter-spacing: .04em; }
.bd2-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.bd2-stat {
	display: inline-flex; align-items: center; gap: 4px;
	background: #fff; border: 1px solid #f4d9e6; border-radius: 999px;
	padding: 3px 10px 3px 4px; font-size: 12px; color: var(--bd-soft);
}
.bd2-stat .bd2-ico { width: 22px; height: 22px; }
.bd2-stat b { color: var(--bd-ink); font-size: 14px; }
.bd2-stat b i { font-style: normal; font-weight: 600; color: var(--bd-soft); font-size: 11px; }
.bd2-stat.is-new { background: #fff3f8; border-color: #ffc2da; }
.bd2-stat.is-new b { color: var(--bd-rose-ink); }
.bd2-top__msg { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-weight: 700; color: var(--bd-rose-ink); font-size: 13px; }

/* ---------- レア度チップ・並び替え ---------- */
.bd2-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.bd2-chip {
	appearance: none; border: 1px solid #efd3e1; background: #fff; color: var(--bd-ink);
	border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
	min-height: 44px; transition: transform .15s, background .15s, box-shadow .15s;
}
.bd2-chip b { font-weight: 800; margin-left: 2px; }
.bd2-chip:disabled { opacity: .45; cursor: default; }
.bd2-chip.is-on { background: var(--bd-rose); border-color: var(--bd-rose); color: #fff; box-shadow: 0 6px 14px -6px rgba(224,88,143,.7); }
.bd2-chip.r-4 { border-color: #cfd8e8; } .bd2-chip.r-4.is-on { background: #8b9bb8; border-color: #8b9bb8; }
.bd2-chip.r-5 { border-color: #f1d58a; } .bd2-chip.r-5.is-on { background: #d9a520; border-color: #d9a520; }
.bd2-chip.r-6 { border-color: #cdb8ff; } .bd2-chip.r-6.is-on { background: #8a63e6; border-color: #8a63e6; }
.bd2-chip.r-7 { border-color: #b7a3e0; } .bd2-chip.r-7.is-on { background: #3d2a6b; border-color: #3d2a6b; }
.bd2-chip.r-8 { border-color: #ffc7a0; } .bd2-chip.r-8.is-on { background: #ef8a4c; border-color: #ef8a4c; }
.bd2-chip.r-9 { border-color: #a9dcc9; } .bd2-chip.r-9.is-on { background: #3fae8c; border-color: #3fae8c; }
.bd2-chip:not(:disabled):active { transform: scale(.96); }

.bd2-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.bd2-seg {
	display: inline-flex; align-items: center; gap: 2px; padding: 3px;
	background: #fff; border: 1px solid #efd3e1; border-radius: 999px; max-width: 100%; overflow-x: auto;
}
.bd2-ico.is-seg { width: 22px; height: 22px; margin: 0 2px 0 4px; }
.bd2-seg__btn {
	appearance: none; border: 0; background: transparent; color: var(--bd-soft); font: inherit; font-size: 12px; font-weight: 700;
	padding: 6px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 44px;
}
.bd2-seg__btn.is-on { background: linear-gradient(120deg, #ff8fbf, #c9a2ff); color: #fff; }
.bd2-favfilter {
	appearance: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #efd3e1; background: #fff;
	color: var(--bd-soft); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 44px;
}
.bd2-favfilter .bd2-heart { color: #f3a6c4; font-size: 15px; }
.bd2-favfilter.is-on { background: #fff0f6; border-color: var(--bd-rose); color: var(--bd-rose-ink); }
.bd2-favfilter.is-on .bd2-heart { color: var(--bd-rose); }

/* ---------- 本（表紙・ページ・リング） ---------- */
.bd2-book {
	position: relative;
	margin: 0 auto;
	padding: 14px;
	border-radius: 26px;
	background:
		radial-gradient(120% 90% at 10% 0%, rgba(255,255,255,.35), transparent 55%),
		linear-gradient(135deg, var(--bd-cover), var(--bd-cover-2));
	box-shadow: 0 26px 50px -24px rgba(120,50,100,.55), inset 0 0 0 2px rgba(255,255,255,.35);
	width: fit-content;
	max-width: 100%;
	touch-action: pan-y;
	user-select: none; -webkit-user-select: none;
}
.bd2-cover { position: absolute; inset: 6px; border-radius: 21px; border: 2px dashed rgba(255,255,255,.65); pointer-events: none; }
.bd2-view {
	position: relative;
	display: flex; align-items: stretch; justify-content: center; gap: 0;
	transition: transform .2s ease-out;
}
.bd2-book.is-single { width: 100%; max-width: 548px; } /* 2026-09-27 fit-content のままだと中身（％指定のページ）が幅を持たず、スマホ縦で本が細い棒になっていた */
.bd2-book.is-single .bd2-view { width: 100%; max-width: var(--bd-page-w); margin: 0 auto; } /* 2026-09-26 画面幅の決め打ちをやめて外枠に合わせる（iPhoneで6pxはみ出していた） */
.bd2-book.is-spread .bd2-view { --bd-page-w: min(500px, max(300px, calc((100svh - 110px) / 1.5))); }
.bd2-page {
	position: relative;
	width: var(--bd-page-w);
	max-width: 100%;
	background:
		radial-gradient(circle at 1px 1px, rgba(184,58,114,.07) 1px, transparent 1.4px) 0 0 / 14px 14px,
		linear-gradient(180deg, #fffdf9, var(--bd-cream));
	border-radius: 14px;
	padding: 10px 10px 12px;
	box-shadow: inset 0 0 0 1px rgba(214,170,190,.35), 0 2px 0 rgba(255,255,255,.6);
	backface-visibility: hidden;
}
.bd2-book.is-single .bd2-page { width: 100%; }
.bd2-book.is-spread .bd2-page:first-child { border-radius: 14px 4px 4px 14px; box-shadow: inset -18px 0 22px -18px rgba(120,60,90,.35), inset 0 0 0 1px rgba(214,170,190,.35); }
.bd2-book.is-spread .bd2-page:last-of-type { border-radius: 4px 14px 14px 4px; box-shadow: inset 18px 0 22px -18px rgba(120,60,90,.35), inset 0 0 0 1px rgba(214,170,190,.35); }
.bd2-page.is-blank .bd2-grid { opacity: .55; }
.bd2-rings {
	width: 26px; flex: none; display: flex; flex-direction: column; justify-content: space-around; align-items: center;
	background: linear-gradient(90deg, rgba(0,0,0,.08), rgba(255,255,255,.2) 50%, rgba(0,0,0,.08));
}
.bd2-rings i {
	display: block; width: 26px; height: 12px; border-radius: 999px;
	background: linear-gradient(180deg, #fff, #d9d2dc 45%, #a99fae 55%, #efeaf1);
	box-shadow: 0 2px 3px rgba(0,0,0,.25);
}
.bd2-page__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 2px 8px; min-height: 20px; }
.bd2-page__ch { font-size: 12px; font-weight: 800; color: var(--bd-rose-ink); letter-spacing: .03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd2-page__ch.is-first { font-size: 13px; padding: 2px 10px; border-radius: 999px; background: #ffe6f0; }
.bd2-page__no { font-size: 11px; color: var(--bd-soft); flex: none; }
.bd2-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }

/* ポケット（スリーブに入ったカード） */
.bd2-pocket {
	position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; padding: 0; margin: 0;
	border: 0; border-radius: 9px; background: rgba(240,226,233,.55);
	box-shadow: inset 0 1px 3px rgba(120,60,90,.18);
	cursor: pointer; font: inherit; color: inherit; overflow: visible;
	transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.bd2-pocket.is-empty { cursor: default; background: repeating-linear-gradient(135deg, rgba(240,226,233,.55) 0 8px, rgba(248,238,243,.55) 8px 16px); }
.bd2-pocket:not(.is-empty):hover { transform: translateY(-3px) rotate(-.6deg); }
.bd2-pocket:not(.is-empty):active { transform: scale(.97); }
.bd2-pocket:focus-visible { outline: 3px solid rgba(224,88,143,.6); outline-offset: 2px; }
.bd2-card {
	position: absolute; inset: 4px; border-radius: 6px; overflow: hidden; background: #f3e7ee;
	box-shadow: 0 2px 5px rgba(80,30,60,.22);
}
.bd2-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd2-sleeve {
	position: absolute; inset: 0; border-radius: 9px; pointer-events: none;
	border: 1px solid rgba(255,255,255,.85);
	background:
		linear-gradient(112deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 64%, rgba(255,255,255,.2) 78%, rgba(255,255,255,0) 90%),
		linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0) 18%);
	box-shadow: inset 0 0 0 1px rgba(200,170,190,.25);
}
.bd2-no {
	position: absolute; left: 7px; top: 7px; font-size: 10px; font-weight: 800; line-height: 1;
	padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.88); color: var(--bd-ink);
}
.bd2-rar {
	position: absolute; right: 7px; bottom: 7px; font-size: 10px; font-weight: 900; line-height: 1; letter-spacing: .04em;
	padding: 3px 6px; border-radius: 999px; background: rgba(74,53,64,.72); color: #fff;
}
.bd2-pocket.r-3 .bd2-rar { background: #e889ad; }
.bd2-pocket.r-4 .bd2-rar { background: linear-gradient(120deg, #9aa7bf, #dfe6f2, #9aa7bf); color: #2e3a52; }
.bd2-pocket.r-5 .bd2-rar { background: linear-gradient(120deg, #e1a91c, #fff0b0, #e1a91c); color: #5b3b00; }
.bd2-pocket.r-6 .bd2-rar { background: linear-gradient(120deg, #9a6bff, #ff8fd0, #7cc8ff); }
.bd2-pocket.r-7 .bd2-rar { background: linear-gradient(120deg, #2d1f55, #7a4bd1, #2d1f55); }
.bd2-pocket.r-8 .bd2-rar { background: #ef8a4c; }
.bd2-pocket.r-9 .bd2-rar { background: #3fae8c; }
.bd2-favmark { position: absolute; right: 7px; top: 6px; color: #ff5c9a; font-size: 16px; filter: drop-shadow(0 1px 1px rgba(255,255,255,.9)); }
.bd2-new {
	position: absolute; left: 50%; top: -6px; transform: translateX(-50%);
	font-size: 10px; font-weight: 900; letter-spacing: .08em; color: #fff; line-height: 1;
	padding: 3px 7px; border-radius: 999px; background: linear-gradient(120deg, #ff5c9a, #ff9a5c);
	box-shadow: 0 3px 8px -2px rgba(255,92,154,.7);
	animation: bd2-bob 1.8s ease-in-out infinite;
}
@keyframes bd2-bob { 50% { transform: translate(-50%, -2px); } }

/* レア度のふち（台紙の中で目立つように） */
.bd2-pocket.r-4 .bd2-card { box-shadow: 0 0 0 2px #cfd8e8, 0 2px 6px rgba(80,90,120,.3); }
.bd2-pocket.r-5 .bd2-card { box-shadow: 0 0 0 2px #f0c85a, 0 3px 10px rgba(200,140,0,.35); }
.bd2-pocket.r-6 .bd2-card { box-shadow: 0 0 0 2px #b89bff, 0 3px 12px rgba(138,99,230,.45); }
.bd2-pocket.r-7 .bd2-card { box-shadow: 0 0 0 2px #6b4bb8, 0 3px 14px rgba(45,31,85,.55); }
.bd2-pocket.r-8 .bd2-card { box-shadow: 0 0 0 2px #ffb98a, 0 3px 10px rgba(239,138,76,.35); }
.bd2-pocket.r-9 .bd2-card { box-shadow: 0 0 0 2px #8fd9bf, 0 3px 10px rgba(63,174,140,.35); }

/* ---------- ホロ／キラ加工（レア度べつ） ---------- */
.bd2-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55; background-size: 250% 250%; }
.r-4 .bd2-holo { /* SR：銀のひかりが流れる */
	mix-blend-mode: soft-light; opacity: .9;
	background-image: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.95) 45%, rgba(210,225,255,.7) 50%, transparent 62%);
	background-size: 300% 100%;
	animation: bd2-sweep 3.6s ease-in-out infinite;
}
.r-5 .bd2-holo { /* SSR：金のにじ */
	background-image:
		linear-gradient(115deg, transparent 20%, rgba(255,236,160,.9) 38%, rgba(255,170,210,.8) 48%, rgba(160,220,255,.8) 58%, transparent 76%),
		repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 5px);
	animation: bd2-holo 5s ease-in-out infinite;
}
.r-6 .bd2-holo { /* SECRET：プリズムと星くず */
	opacity: .6;
	background-image:
		radial-gradient(circle at 20% 30%, rgba(255,255,255,.9) 0 1px, transparent 2px),
		radial-gradient(circle at 70% 60%, rgba(255,255,255,.8) 0 1px, transparent 2px),
		radial-gradient(circle at 40% 80%, rgba(255,255,255,.8) 0 1px, transparent 2px),
		linear-gradient(125deg, #ff7fbf, #ffd57f, #8affc1, #7fc8ff, #c99bff, #ff7fbf);
	background-size: 38px 38px, 52px 52px, 45px 45px, 300% 300%;
	animation: bd2-holo 6s linear infinite;
}
.r-7 .bd2-holo { /* MYTHIC：夜空 */
	mix-blend-mode: screen; opacity: .55;
	background-image:
		radial-gradient(circle at 15% 25%, #fff 0 1px, transparent 2px),
		radial-gradient(circle at 65% 45%, #ffe9a8 0 1px, transparent 2px),
		radial-gradient(circle at 35% 75%, #fff 0 1px, transparent 2px),
		linear-gradient(140deg, rgba(90,60,200,.55), rgba(255,120,200,.35), rgba(80,200,255,.45));
	background-size: 30px 30px, 44px 44px, 36px 36px, 260% 260%;
	animation: bd2-holo 7s ease-in-out infinite;
}
.r-8 .bd2-holo { /* EVENT：紙ふぶき */
	mix-blend-mode: screen; opacity: .5;
	background-image:
		radial-gradient(circle at 20% 20%, #ffd36b 0 2px, transparent 3px),
		radial-gradient(circle at 70% 40%, #ff9ccf 0 2px, transparent 3px),
		radial-gradient(circle at 45% 75%, #9fe2ff 0 2px, transparent 3px),
		linear-gradient(115deg, transparent 35%, rgba(255,255,255,.6) 50%, transparent 65%);
	background-size: 40px 40px, 48px 48px, 44px 44px, 300% 100%;
	animation: bd2-sweep 4.5s ease-in-out infinite;
}
.r-9 .bd2-holo { /* GAME：ドットのきらめき */
	mix-blend-mode: soft-light; opacity: .85;
	background-image:
		linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
		linear-gradient(0deg, rgba(255,255,255,.18) 1px, transparent 1px),
		linear-gradient(115deg, transparent 30%, rgba(190,255,230,.95) 48%, transparent 64%);
	background-size: 6px 6px, 6px 6px, 300% 100%;
	animation: bd2-sweep 4s ease-in-out infinite;
}
@keyframes bd2-sweep { 0% { background-position: 0 0, 0 0, 0 0, 120% 0; } 100% { background-position: 0 0, 0 0, 0 0, -120% 0; } }
.r-4 .bd2-holo { animation-name: bd2-sweep1; }
@keyframes bd2-sweep1 { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes bd2-holo { 0%, 100% { background-position: 0 0, 0 0, 0 0, 0% 50%; } 50% { background-position: 0 0, 0 0, 0 0, 100% 50%; } }

/* ---------- めくれる紙 ---------- */
.bd2-turn { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.bd2-leaf { position: absolute !important; margin: 0 !important; will-change: transform; box-shadow: 0 10px 30px -10px rgba(80,30,60,.45); }

/* ---------- ページ送り ---------- */
.bd2-nav { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px auto 6px; max-width: 560px; }
.bd2-nav__btn {
	appearance: none; display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; font: inherit; font-weight: 800;
	min-width: 88px; min-height: 44px; justify-content: center; padding: 0 16px; border-radius: 999px;
	background: #fff; color: var(--bd-rose-ink); box-shadow: 0 6px 16px -8px rgba(184,58,114,.5), inset 0 0 0 1px #f4d9e6;
	font-size: 14px;
}
.bd2-nav__btn span[aria-hidden] { font-size: 22px; line-height: 1; }
.bd2-nav__btn:disabled { opacity: .4; cursor: default; }
.bd2-nav__btn:not(:disabled):active { transform: scale(.96); }
.bd2-nav__mid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.bd2-nav__num { font-weight: 800; font-size: 15px; color: var(--bd-ink); }
.bd2-nav__range { width: 100%; max-width: 240px; height: 44px; margin: 0; accent-color: var(--bd-rose); cursor: pointer; }
.bd2-hint { text-align: center; font-size: 12px; color: var(--bd-soft); margin: 4px 0 18px; }

.bd2-empty { text-align: center; padding: 26px 16px; background: #fff; border-radius: 22px; border: 1px dashed #f0c6d9; margin: 0 0 16px; }
.bd2-empty p { margin: 10px 0 14px; color: var(--bd-soft); }
.bd2-empty.is-small { padding: 18px 14px; }
.bd2-empty.is-small p { margin: 6px 0 0; }

/* 勲章のあかし */
.bd2-medals { background: #fff; border-radius: 22px; border: 1px solid #f4d9e6; padding: 14px; margin: 8px 0 16px; }
.bd2-medals h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 12px; font-size: 15px; color: var(--bd-rose-ink); }
.bd2-medals h3 b { margin-left: auto; font-size: 13px; color: var(--bd-soft); }
.bd2-medals__row { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.bd2-medal { margin: 0; text-align: center; }
.bd2-medal__card { position: relative; display: block; aspect-ratio: 5 / 7; border-radius: 9px; overflow: hidden; box-shadow: 0 3px 10px rgba(80,30,60,.2); }
.bd2-medal__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd2-medal.is-gold .bd2-medal__card { box-shadow: 0 0 0 2px #f0c85a, 0 3px 10px rgba(200,140,0,.3); }
.bd2-medal.is-silver .bd2-medal__card { box-shadow: 0 0 0 2px #cfd8e8, 0 3px 10px rgba(80,90,120,.25); }
.bd2-medal.is-rainbow .bd2-medal__card { box-shadow: 0 0 0 2px #b89bff, 0 3px 12px rgba(138,99,230,.4); }
.bd2-medal figcaption { font-size: 11px; color: var(--bd-soft); margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.bd2-medal figcaption b { color: var(--bd-rose-ink); font-size: 11px; }

/* ---------- 全画面ビューア ---------- */
html.bd2-lock, html.bd2-lock body { overflow: hidden; }
.bd2-viewer {
	position: fixed; inset: 0; z-index: 100000;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: calc(env(safe-area-inset-top, 0px) + 10px) 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
	color: #fff;
	animation: bd2-fade .22s ease-out;
}
@keyframes bd2-fade { from { opacity: 0; } }
.bd2-v__bg { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 40%, rgba(90,50,90,.86), rgba(25,12,30,.95)); }
.bd2-viewer.r-5 .bd2-v__bg { background: radial-gradient(90% 70% at 50% 40%, rgba(120,85,20,.85), rgba(25,15,5,.95)); }
.bd2-viewer.r-6 .bd2-v__bg, .bd2-viewer.r-7 .bd2-v__bg { background: radial-gradient(90% 70% at 50% 40%, rgba(80,50,160,.85), rgba(12,8,30,.96)); }
.bd2-v__close {
	position: absolute; right: 12px; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 3;
	width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgba(255,255,255,.16); color: #fff; font-size: 26px; line-height: 1;
}
.bd2-v__stage { position: relative; z-index: 1; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; perspective: 1400px; touch-action: none; min-height: 0; }
.bd2-v__tilt {
	--mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --hyp: 0;
	position: relative; width: 300px; height: 420px;
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transform-style: preserve-3d;
	transition: transform .5s cubic-bezier(.22,.8,.24,1);
	animation: bd2-pop .5s cubic-bezier(.34,1.56,.64,1);
}
.bd2-v__tilt.is-live { transition: transform .06s linear; }
@keyframes bd2-pop { from { transform: scale(.7) rotateY(-25deg); opacity: 0; } }
.bd2-v__tilt.is-intro { animation: bd2-pop .5s cubic-bezier(.34,1.56,.64,1), bd2-wobble 2.4s .5s ease-in-out 1; }
@keyframes bd2-wobble { 25% { transform: rotateY(12deg) rotateX(4deg); } 60% { transform: rotateY(-10deg) rotateX(-3deg); } }
.bd2-v__flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.bd2-v__flip.is-flipped { transform: rotateY(180deg); }
.bd2-v__face {
	position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 3px rgba(255,255,255,.85);
}
.bd2-viewer.r-5 .bd2-v__face { box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 3px #f0c85a, 0 0 40px rgba(255,200,80,.45); }
.bd2-viewer.r-6 .bd2-v__face { box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 3px #c7afff, 0 0 44px rgba(170,130,255,.55); }
.bd2-viewer.r-7 .bd2-v__face { box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 3px #8a6bd8, 0 0 50px rgba(120,90,230,.6); }
.bd2-v__face.is-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bd2-v__face .bd2-holo { mix-blend-mode: soft-light; opacity: calc(.3 + var(--hyp) * .5); background-position: var(--mx) var(--my); animation: none; background-size: 200% 200%; }
.bd2-viewer.r-6 .bd2-v__face .bd2-holo, .bd2-viewer.r-7 .bd2-v__face .bd2-holo { background-size: 38px 38px, 52px 52px, 45px 45px, 220% 220%; background-position: 0 0, 0 0, 0 0, var(--mx) var(--my); }
.bd2-v__glare {
	position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
	background: radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.75), rgba(255,255,255,.12) 30%, rgba(0,0,0,.18) 80%);
	opacity: .5;
}
.bd2-v__tilt.is-live .bd2-v__glare { opacity: .85; }
.bd2-v__tag {
	position: absolute; left: 10px; top: 10px; font-weight: 900; font-size: 12px; letter-spacing: .08em;
	padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.4); color: #fff;
}
.bd2-v__face.is-back { transform: rotateY(180deg); background: linear-gradient(160deg, #fff5fa, #f1e8ff); color: #4a3540; }
.bd2-v__backin {
	position: absolute; inset: 10px; border-radius: 10px; border: 2px dashed rgba(224,88,143,.35);
	padding: 18px 16px; display: flex; flex-direction: column; gap: 8px; overflow: auto; text-align: center;
	background: radial-gradient(circle at 1px 1px, rgba(184,58,114,.08) 1px, transparent 1.4px) 0 0 / 14px 14px;
}
.bd2-v__rar { margin: 0; font-weight: 900; letter-spacing: .12em; color: #b83a72; font-size: 20px; }
.bd2-v__rar span { color: #e0a515; font-size: 14px; letter-spacing: 0; }
.bd2-v__title { margin: 0; font-weight: 800; font-size: 16px; }
.bd2-v__flavor { margin: 0; font-size: 13px; color: #76606c; line-height: 1.6; }
.bd2-v__meta { margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: left; }
.bd2-v__meta div { background: rgba(255,255,255,.8); border-radius: 10px; padding: 6px 8px; }
.bd2-v__meta div:last-child, .bd2-v__meta div.is-wide { grid-column: 1 / -1; }
.bd2-v__meta dt { font-size: 10px; color: #76606c; }
.bd2-v__meta dd { margin: 0; font-weight: 800; font-size: 13px; word-break: break-all; }
.bd2-v__link { margin-top: auto; color: #b83a72; font-weight: 800; font-size: 13px; }
.bd2-v__bar { position: relative; z-index: 2; display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.bd2-v__btn {
	appearance: none; border: 0; cursor: pointer; font: inherit; color: #fff; font-weight: 800;
	width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.16); font-size: 26px; line-height: 1;
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.bd2-v__btn.is-wide { width: auto; padding: 0 18px; border-radius: 999px; font-size: 14px; }
.bd2-v__btn .bd2-ico { width: 26px; height: 26px; }
.bd2-v__btn:disabled { opacity: .3; cursor: default; }
.bd2-v__btn.is-fav { font-size: 22px; color: rgba(255,255,255,.75); }
.bd2-v__btn.is-fav.is-on { color: #ff6fa6; background: rgba(255,255,255,.92); }
.bd2-v__hint { position: relative; z-index: 2; margin: 8px 0 0; font-size: 12px; opacity: .8; text-align: center; }

/* ---------- せまい画面 ---------- */
@media (max-width: 420px) {
	.bd2-app { padding: 0 8px 8px; }
	.bd2-top { padding: 12px; gap: 12px; }
	.bd2-ring { width: 80px; height: 80px; }
	.bd2-ring__num b { font-size: 22px; }
	.bd2-book { padding: 10px; border-radius: 20px; }
	.bd2-book.is-single .bd2-view { width: 100%; }
	.bd2-page { padding: 8px 7px 9px; }
	.bd2-grid { gap: 6px; }
	.bd2-no { font-size: 9px; left: 6px; top: 6px; padding: 2px 5px; }
	.bd2-rar { font-size: 9px; right: 6px; bottom: 6px; padding: 2px 5px; }
	.bd2-nav__btn { min-width: 72px; padding: 0 12px; }
	.bd2-nav__txt { display: none; }
	.bd2-nav__btn { min-width: 52px; }
}
/* 横持ちのスマホ（高さが低い）：見開きを小さめに */
@media (max-height: 500px) and (orientation: landscape) {
	.bd2-book.is-spread .bd2-view { --bd-page-w: min(420px, calc((100vw - 110px) / 2)); }
	.bd2-v__stage { padding: 0; }
	.bd2-viewer { flex-direction: row; gap: 10px; }
	.bd2-v__bar { flex-direction: column; margin-top: 0; }
	.bd2-v__hint { display: none; }
}

/* ---------- 2026-09-27 追加：絵が読めない時・つぎのポケット・🏆カード・同期の知らせ ---------- */
.bd2-card.is-noimg img, .bd2-v__face.is-noimg > img, .bd2-medal__card.is-noimg > img { visibility: hidden; }
.bd2-noimg {
	position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
	padding: 6px 6px 20px; text-align: center; font-size: 10px; line-height: 1.35; font-weight: 700; color: var(--bd-soft, #76606c);
	background: repeating-linear-gradient(135deg, #fbf1f6 0 8px, #f6e8f0 8px 16px);
}
.bd2-noimg__ico { width: 44%; max-width: 72px; height: auto; opacity: .8; }
.bd2-v__face .bd2-noimg { font-size: 14px; gap: 12px; color: #76606c; }
.bd2-pocket.is-next { border: 2px dashed rgba(224,88,143,.45); background: rgba(255,240,247,.7); }
.bd2-next { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px; text-align: center; color: var(--bd-rose-ink); font-size: 10px; line-height: 1.35; font-weight: 700; }
.bd2-next b { font-size: 12px; font-weight: 900; letter-spacing: .04em; }
.bd2-pocket.is-rank .bd2-card { box-shadow: 0 0 0 2px #f0c85a, 0 0 0 4px #fff4c9, 0 4px 14px rgba(200,140,0,.45); }
.bd2-pocket.is-rank .bd2-rar { background: linear-gradient(120deg, #e1a91c, #fff0b0, #e1a91c); color: #5b3b00; }
.bd2-rankmark { position: absolute; right: 4px; top: 3px; line-height: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }
.bd2-rankmark .bd2-ico { width: 26px; height: 26px; }
.bd2-viewer.is-rank .bd2-v__bg { background: radial-gradient(90% 70% at 50% 40%, rgba(120,85,20,.85), rgba(25,15,5,.95)); }
.bd2-viewer.is-rank .bd2-v__face { box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 3px #f0c85a, 0 0 44px rgba(255,200,80,.5); }
.bd2-sync { margin: 8px 0 0; font-size: 12px; color: var(--bd-soft); }
.bd2-sync.is-fail { color: #a0526f; }
.bd2-loading { text-align: center; color: var(--bd-soft, #76606c); padding: 40px 0; margin: 0; }

/* rw26（デザイン刷新CSS）の既定と重なるところの上書き */
body.rw26 .bd2-app button { box-shadow: none; }
body.rw26 .bd2-app .bd2-nav__btn { box-shadow: 0 6px 16px -8px rgba(184,58,114,.5), inset 0 0 0 1px #f4d9e6; }
body.rw26 .bd2-app .bd2-chip.is-on { box-shadow: 0 6px 14px -6px rgba(224,88,143,.7); }

@media (prefers-reduced-motion: reduce) {
	.bd2-holo, .bd2-new, .bd2-v__tilt, .bd2-viewer { animation: none !important; }
	.bd2-v__flip, .bd2-v__tilt, .bd2-pocket, .bd2-ring__fg { transition: none !important; }
}


/* ---------- 2026-09-27 スマホでカードの絵が小さい → せまい1ページ表示は 2列×3段 ----------
 * rinka-binder.js が幅540px未満の1ページ表示のときだけ .bd2-book に .is-2col を付ける（PC・見開きは今までどおり 3×3）。
 * カードの縦横比（5:7）はそのまま。 */
.bd2-book.is-2col { padding: 10px; }
.bd2-book.is-2col .bd2-page { padding: 8px 8px 10px; }
.bd2-book.is-2col .bd2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.bd2-book.is-2col .bd2-no { font-size: 11px; left: 8px; top: 8px; padding: 3px 7px; }
.bd2-book.is-2col .bd2-rar { font-size: 11px; right: 8px; bottom: 8px; padding: 3px 7px; }
.bd2-book.is-2col .bd2-favmark { font-size: 18px; right: 8px; top: 7px; }
.bd2-book.is-2col .bd2-next { font-size: 12px; }
.bd2-book.is-2col .bd2-next b { font-size: 14px; }
.bd2-book.is-2col .bd2-noimg { font-size: 12px; }

/* 2026-09-27 スマホ：カードの一覧が見えている間だけ、浮きボタンを画面の端へよせてカードのバッジ・番号に重ねない
 * （html.rinka-cardlist-inview は rinka-binder.js / rinka-collection-view.js が付ける。ほかのページの浮きボタンは変えない） */
@media (max-width: 767px) {
	/* translate（transform とは別）で動かす＝ふわふわ（rinka-float）の動きはそのまま */
	.rinka-totop, .rinka-fs-xwidget-open, .rinka-fs-bunny, .rinka-mascot__avatar { transition-property: opacity, transform, translate, width, height; transition-duration: .28s; }
	html.rinka-cardlist-inview .rinka-totop.is-show { translate: -62% 0; opacity: .75; }
	html.rinka-cardlist-inview .rinka-fs-xwidget-open { translate: 62% 0; opacity: .75; }
	html.rinka-cardlist-inview .rinka-fs-bunny { translate: 70% 0; }
	html.rinka-cardlist-inview .rinka-mascot__avatar { translate: 40px 0; }
	html.rinka-cardlist-inview .rinka-mascot__bubble.is-open ~ .rinka-mascot__avatar { translate: none; }
}

/* ---------- 2026-09-27 スマホだけ「1列にならべる枚数」をえらべる（2・3・4枚） ----------
 * rinka-binder.js が幅640px以下の1ページ表示のときだけ .bd2-cols を出す（PC・見開きは出さない・今までどおり）。
 * 4枚をえらんだ時は .bd2-book に .is-4col が付く（2枚は既存の .is-2col・3枚は元の3列）。 */
.bd2-cols { display: flex; align-items: center; gap: 4px; margin: -4px 0 12px; padding: 3px; background: #fff; border: 1px solid #efd3e1; border-radius: 999px; width: fit-content; max-width: 100%; }
.bd2-cols__label { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px 0 8px; font-size: 12px; font-weight: 700; color: var(--bd-soft); white-space: nowrap; }
.bd2-cols__ico { width: 18px; height: 18px; flex: none; color: #d07aa3; }
.bd2-cols__btn {
	appearance: none; border: 0; background: transparent; color: var(--bd-soft); font: inherit; font-size: 15px; font-weight: 800;
	min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; cursor: pointer;
}
.bd2-cols__btn.is-on { background: linear-gradient(120deg, #ff8fbf, #c9a2ff); color: #fff; }
.bd2-cols__btn:active { transform: scale(.95); }
.bd2-cols__btn:focus-visible { outline: 3px solid rgba(224,88,143,.55); outline-offset: 2px; }
body.rw26 .bd2-app .bd2-cols__btn { box-shadow: none; }
.bd2-book.is-4col { padding: 8px; }
.bd2-book.is-4col .bd2-page { padding: 7px 6px 8px; }
.bd2-book.is-4col .bd2-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.bd2-book.is-4col .bd2-no { font-size: 8px; left: 3px; top: 3px; padding: 2px 4px; }
.bd2-book.is-4col .bd2-rar { font-size: 8px; right: 3px; bottom: 3px; padding: 2px 4px; }
.bd2-book.is-4col .bd2-favmark { font-size: 12px; right: 3px; top: 3px; }
.bd2-book.is-4col .bd2-new { font-size: 8px; padding: 2px 5px; top: -5px; }
.bd2-book.is-4col .bd2-rankmark .bd2-ico { width: 18px; height: 18px; }
.bd2-book.is-4col .bd2-next { font-size: 8px; padding: 3px; }
.bd2-book.is-4col .bd2-next b { font-size: 10px; }
.bd2-book.is-4col .bd2-noimg { font-size: 8px; padding: 3px 3px 12px; }
@media (min-width: 641px) { .bd2-cols { display: none; } }

/* イベントのカードの裏面（限定感・2026-10-17） */
.bd2-v__evlogo { display: block; width: min(92%, 260px); height: auto; margin: 0 auto -4px; }
.bd2-v__evname { margin: 0; font-weight: 900; letter-spacing: .1em; font-size: 18px; color: #7a3b6e; }
.bd2-v__evlimit { margin: 0; display: inline-block; align-self: center; padding: 3px 12px; border-radius: 999px;
  background: linear-gradient(135deg, #3b2440, #7a3b6e); color: #fff; font-weight: 800; font-size: 13px; letter-spacing: .04em; }
.bd2-v__evspan { margin: 0; font-size: 12px; font-weight: 700; color: #7a3b6e; }
.bd2-viewer.r-8 .bd2-v__tag { background: linear-gradient(135deg, #3b2440, #7a3b6e); color: #fff; }

/* カードのプロフィール（裏面・集める楽しみ・2026-10-17） */
.bd2-v__backin { overflow-y: auto; overscroll-behavior: contain; }
.bd2-v__quote { margin: 0; font-size: 13px; font-weight: 700; color: #b83a72; line-height: 1.5; }
.bd2-v__stats { margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; text-align: center; }
.bd2-v__stats > div { background: rgba(184, 58, 114, .07); border-radius: 8px; padding: 3px 2px; }
.bd2-v__stats dt { font-size: 10px; color: #76606c; }
.bd2-v__stats dd { margin: 0; }
.bd2-v__stars { font-size: 11px; letter-spacing: -.02em; color: #e0a515; white-space: nowrap; }
.bd2-v__lucky { margin: 0; font-size: 11px; color: #76606c; }