/* ============================================================
 * rinka-collection.css — りんかコレクション（/cards/）の新しい表示（2026-09-26）
 * rinka-collection-view.js の .rc-* だけに効く。rinka-world-2026.css とぶつかる所はここで上書きする。
 * ========================================================== */

.rc-app {
	--rc-ink: #4a3540;
	--rc-soft: #76606c;
	--rc-rose: #e0588f;
	--rc-rose-ink: #b83a72;
	--rc-line: #f4d9e6;
	color: var(--rc-ink);
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 12px 8px;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
.rc-app *, .rc-app *::before, .rc-app *::after { box-sizing: border-box; }
.rc-ico { width: 24px; height: 24px; object-fit: contain; flex: none; display: inline-block; vertical-align: middle; }
.rc-ico.is-title { width: 30px; height: 30px; }
.rc-ico.is-big { width: 72px; height: 72px; }
.rc-heart { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: -0.12em; flex: none; }

/* ---------- 上：リング＋数字 ---------- */
.rc-top {
	display: flex; align-items: center; gap: 16px;
	background: linear-gradient(135deg, rgba(255,255,255,.94), rgba(247,241,255,.94));
	border: 1px solid var(--rc-line); border-radius: 24px; padding: 14px 16px; margin: 0 0 12px;
	box-shadow: 0 10px 30px -12px rgba(184,58,114,.25);
}
.rc-top__body { flex: 1; min-width: 0; }
.rc-top__title { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 800; font-size: 18px; letter-spacing: .04em; }
.rc-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-stat { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--rc-line); border-radius: 999px; padding: 3px 10px 3px 4px; font-size: 12px; color: var(--rc-soft); }
.rc-stat .rc-ico { width: 22px; height: 22px; }
.rc-stat b { color: var(--rc-ink); font-size: 14px; }
.rc-stat b i { font-style: normal; font-weight: 600; color: var(--rc-soft); font-size: 11px; }
.rc-stat.is-new { background: #fff3f8; border-color: #ffc2da; }
.rc-stat.is-new b { color: var(--rc-rose-ink); }
.rc-top__msg { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-weight: 700; color: var(--rc-rose-ink); font-size: 13px; }
.rc-seenall { appearance: none; margin-top: 8px; border: 1px dashed #f0b3cc; background: transparent; color: var(--rc-rose-ink); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 32px; }

.rc-ring { position: relative; width: 52px; height: 52px; flex: none; }
.rc-ring.is-big { width: 100px; height: 100px; }
.rc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rc-ring__bg { fill: none; stroke: #f3e6ef; stroke-width: 10; }
.rc-ring__fg { fill: none; stroke: var(--rc-rose); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.22,.8,.24,1); }
.rc-ring.is-done .rc-ring__fg { stroke: #e3aa1f; }
.rc-ring__num { position: absolute; inset: 0; display: grid; place-content: center; font-size: 12px; font-weight: 800; color: var(--rc-rose-ink); }
.rc-ring.is-big .rc-ring__num { font-weight: 600; color: var(--rc-soft); }
.rc-ring.is-big .rc-ring__num b { font-size: 28px; color: var(--rc-rose-ink); line-height: 1; font-weight: 800; }

/* ---------- レア度バー（しぼりこみ） ---------- */
.rc-rars { display: flex; gap: 6px; margin: 0 0 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; }
.rc-rar {
	appearance: none; flex: none; display: inline-flex; align-items: baseline; gap: 5px;
	border: 1px solid #efd3e1; background: #fff; color: var(--rc-ink); border-radius: 12px; padding: 7px 11px;
	font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; min-height: 38px;
}
.rc-rar b { font-size: 13px; }
.rc-rar b i { font-style: normal; font-weight: 600; font-size: 10px; color: var(--rc-soft); }
.rc-rar.is-none { opacity: .6; }
.rc-rar.is-on { background: var(--rc-rose); border-color: var(--rc-rose); color: #fff; }
.rc-rar.is-on b i { color: rgba(255,255,255,.85); }
.rc-rar.rar-SR { border-color: #cfd8e8; } .rc-rar.rar-SR.is-on { background: #8b9bb8; border-color: #8b9bb8; }
.rc-rar.rar-SSR { border-color: #f1d58a; } .rc-rar.rar-SSR.is-on { background: #d9a520; border-color: #d9a520; }
.rc-rar.rar-UR { border-color: #9fe0e6; } .rc-rar.rar-UR.is-on { background: #2fb3c0; border-color: #2fb3c0; }
.rc-rar.rar-LEGEND { border-color: #ffc38a; } .rc-rar.rar-LEGEND.is-on { background: #e0772a; border-color: #e0772a; }
.rc-rar.rar-SECRET { border-color: #cdb8ff; } .rc-rar.rar-SECRET.is-on { background: #8a63e6; border-color: #8a63e6; }
.rc-rar.rar-MEDAL { border-color: #b7a3e0; } .rc-rar.rar-MEDAL.is-on { background: #3d2a6b; border-color: #3d2a6b; }
.rc-rar.rar-NOVEL { border-color: #a9dcc9; } .rc-rar.rar-NOVEL.is-on { background: #3fae8c; border-color: #3fae8c; }
.rc-rar.rar-EVENT { border-color: #ffc7a0; } .rc-rar.rar-EVENT.is-on { background: #ef8a4c; border-color: #ef8a4c; }

/* ---------- 道具（検索・並び・持っているか・お気に入り） ---------- */
.rc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.rc-search { flex: 1 1 220px; display: flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #efd3e1; border-radius: 999px; padding: 2px 12px 2px 6px; min-height: 40px; }
.rc-search .rc-ico { width: 22px; height: 22px; }
.rc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--rc-ink); padding: 6px 0; }
.rc-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; }
.rc-ico.is-seg { width: 22px; height: 22px; margin: 0 2px 0 4px; }
.rc-seg__btn { appearance: none; border: 0; background: transparent; color: var(--rc-soft); font: inherit; font-size: 12px; font-weight: 700; padding: 6px 11px; border-radius: 999px; cursor: pointer; white-space: nowrap; min-height: 32px; }
.rc-seg__btn.is-on { background: linear-gradient(120deg, #ff8fbf, #c9a2ff); color: #fff; }
.rc-favbtn { appearance: none; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #efd3e1; background: #fff; color: var(--rc-soft); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; min-height: 38px; }
.rc-favbtn .rc-heart { color: #f3a6c4; font-size: 15px; }
.rc-favbtn.is-on { background: #fff0f6; border-color: var(--rc-rose); color: var(--rc-rose-ink); }
.rc-favbtn.is-on .rc-heart { color: var(--rc-rose); }

/* ---------- シリーズの棚 ---------- */
.rc-shelves { display: flex; flex-direction: column; gap: 18px; margin: 0 0 18px; }
.rc-shelf {
	position: relative; background: linear-gradient(180deg, #fff, #fff8fb);
	border: 1px solid var(--rc-line); border-radius: 22px; padding: 12px 12px 18px;
	box-shadow: 0 8px 24px -16px rgba(184,58,114,.35);
}
.rc-shelf.is-complete { border-color: #f0cf73; background: linear-gradient(180deg, #fffdf3, #fff8e6); }
.rc-shelf__head { display: flex; align-items: center; gap: 10px; margin: 0 2px 12px; }
.rc-shelf__name { min-width: 0; }
.rc-shelf__name h3 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .03em; color: var(--rc-ink); }
.rc-shelf__name p { margin: 2px 0 0; font-size: 12px; color: var(--rc-soft); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rc-shelf__desc { font-size: 11px !important; }
.rc-done { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; color: #a87200; background: #fff1c2; border-radius: 999px; padding: 1px 8px 1px 2px; }
.rc-done .rc-ico { width: 18px; height: 18px; }
.rc-shelf__board { position: absolute; left: 10px; right: 10px; bottom: 8px; height: 6px; border-radius: 999px; background: linear-gradient(180deg, #f3dce7, #e8c7d7); opacity: .7; }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; min-height: 8px; }
.rc-sentinel { display: block; grid-column: 1 / -1; height: 1px; }

/* ---------- カード ---------- */
.rc-card {
	appearance: none; position: relative; display: flex; flex-direction: column; gap: 4px; padding: 0; margin: 0;
	border: 0; background: transparent; cursor: pointer; font: inherit; color: inherit; text-align: left;
	transition: transform .18s cubic-bezier(.34,1.56,.64,1);
}
.rc-card:hover { transform: translateY(-3px); }
.rc-card:active { transform: scale(.97); }
.rc-card:focus-visible { outline: 3px solid rgba(224,88,143,.6); outline-offset: 3px; border-radius: 12px; }
.rc-card__art {
	position: relative; display: block; width: 100%; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden;
	background: linear-gradient(160deg, #f7eef3, #efe6f7);
	box-shadow: 0 0 0 2px #fff, 0 3px 10px rgba(80,30,60,.2);
}
.rc-card__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-card__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255,255,255,.35), rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(255,255,255,.15)); }
.rc-card.is-owned.rar-R .rc-card__art { box-shadow: 0 0 0 2px #f6c0d5, 0 3px 10px rgba(80,30,60,.2); }
.rc-card.is-owned.rar-SR .rc-card__art { box-shadow: 0 0 0 2px #cfd8e8, 0 3px 10px rgba(80,90,120,.3); }
.rc-card.is-owned.rar-SSR .rc-card__art { box-shadow: 0 0 0 2px #f0c85a, 0 3px 12px rgba(200,140,0,.35); }
.rc-card.is-owned.rar-UR .rc-card__art { box-shadow: 0 0 0 2px #7fd6de, 0 3px 12px rgba(47,179,192,.35); }
.rc-card.is-owned.rar-LEGEND .rc-card__art { box-shadow: 0 0 0 2px #ffae6b, 0 3px 14px rgba(224,119,42,.4); }
.rc-card.is-owned.rar-SECRET .rc-card__art { box-shadow: 0 0 0 2px #b89bff, 0 3px 14px rgba(138,99,230,.45); }
.rc-card.is-owned.rar-MEDAL .rc-card__art { box-shadow: 0 0 0 2px #6b4bb8, 0 3px 14px rgba(45,31,85,.5); }
.rc-card.is-owned.rar-NOVEL .rc-card__art { box-shadow: 0 0 0 2px #8fd9bf, 0 3px 12px rgba(63,174,140,.35); }
.rc-card.is-owned.rar-EVENT .rc-card__art { box-shadow: 0 0 0 2px #ffb98a, 0 3px 12px rgba(239,138,76,.35); }

/* 未所持：うっすら（本物の絵は出さない） */
.rc-card.is-missing .rc-card__art { box-shadow: 0 0 0 2px rgba(255,255,255,.8), inset 0 0 0 1px rgba(200,170,190,.4); background: linear-gradient(160deg, #f4ecf1, #ece6f3); }
.rc-sil {
	position: absolute; inset: 0; display: block;
	background:
		radial-gradient(34% 22% at 50% 30%, rgba(190,160,185,.55), transparent 70%),
		radial-gradient(48% 36% at 50% 78%, rgba(190,160,185,.45), transparent 72%);
	filter: blur(6px);
	opacity: .8;
}
.rc-card.is-missing.rar-SECRET .rc-card__art { background: linear-gradient(160deg, #e9e1fb, #ddd3f5); }
.rc-card.is-missing.rar-NOVEL .rc-card__art { background: linear-gradient(160deg, #e6f5ef, #ddeee8); }
img.rc-blur { filter: blur(8px) saturate(.6); transform: scale(1.2); opacity: .55; }
.rc-card.is-missing .rc-card__no { background: rgba(255,255,255,.75); color: var(--rc-soft); }
.rc-card.is-missing .rc-card__title { color: var(--rc-soft); letter-spacing: .2em; }

.rc-card__no { position: absolute; left: 6px; top: 6px; font-size: 10px; font-weight: 800; line-height: 1; padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--rc-ink); }
.rc-card__rar { position: absolute; right: 6px; bottom: 6px; 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; }
.rc-card.rar-R .rc-card__rar { background: #e889ad; }
.rc-card.rar-SR .rc-card__rar { background: linear-gradient(120deg, #9aa7bf, #dfe6f2, #9aa7bf); color: #2e3a52; }
.rc-card.rar-SSR .rc-card__rar { background: linear-gradient(120deg, #e1a91c, #fff0b0, #e1a91c); color: #5b3b00; }
.rc-card.rar-UR .rc-card__rar { background: #2fb3c0; }
.rc-card.rar-LEGEND .rc-card__rar { background: linear-gradient(120deg, #e0772a, #ffd08a, #e0772a); color: #4a2400; }
.rc-card.rar-SECRET .rc-card__rar { background: linear-gradient(120deg, #9a6bff, #ff8fd0, #7cc8ff); }
.rc-card.rar-MEDAL .rc-card__rar { background: linear-gradient(120deg, #2d1f55, #7a4bd1, #2d1f55); }
.rc-card.rar-NOVEL .rc-card__rar { background: #3fae8c; }
.rc-card.rar-EVENT .rc-card__rar { background: #ef8a4c; }
.rc-card__dup { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 900; line-height: 1; padding: 3px 6px; border-radius: 999px; background: rgba(255,255,255,.9); color: var(--rc-rose-ink); }
.rc-card__fav { position: absolute; right: 6px; top: 5px; color: #ff5c9a; font-size: 16px; filter: drop-shadow(0 1px 1px rgba(255,255,255,.95)); }
.rc-card__new {
	position: absolute; left: 50%; top: -7px; transform: translateX(-50%); z-index: 2;
	font-size: 10px; font-weight: 900; letter-spacing: .08em; color: #fff; line-height: 1;
	padding: 3px 8px; border-radius: 999px; background: linear-gradient(120deg, #ff5c9a, #ff9a5c);
	box-shadow: 0 3px 8px -2px rgba(255,92,154,.7); animation: rc-bob 1.8s ease-in-out infinite;
}
@keyframes rc-bob { 50% { transform: translate(-50%, -2px); } }
.rc-card.is-new .rc-card__art { box-shadow: 0 0 0 2px #ff8fbf, 0 0 16px rgba(255,92,154,.45); }
.rc-card__title { font-size: 12px; font-weight: 700; line-height: 1.35; padding: 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ホロ（SR以上・持っているカードだけ） */
.rc-holo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .5; background-size: 250% 250%; }
.rar-SR .rc-holo { 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: rc-sweep 3.6s ease-in-out infinite; }
.rar-SSR .rc-holo, .rar-UR .rc-holo, .rar-LEGEND .rc-holo { 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%); animation: rc-holo 5s ease-in-out infinite; }
.rar-SECRET .rc-holo { opacity: .6; background-image: linear-gradient(125deg, #ff7fbf, #ffd57f, #8affc1, #7fc8ff, #c99bff, #ff7fbf); background-size: 300% 300%; animation: rc-holo 6s linear infinite; }
.rar-MEDAL .rc-holo { mix-blend-mode: screen; opacity: .5; background-image: radial-gradient(circle at 15% 25%, #fff 0 1px, transparent 2px), radial-gradient(circle at 65% 45%, #ffe9a8 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, 260% 260%; animation: rc-holo 7s ease-in-out infinite; }
.rar-NOVEL .rc-holo, .rar-EVENT .rc-holo { mix-blend-mode: soft-light; opacity: .85; background-image: linear-gradient(115deg, transparent 30%, rgba(200,255,235,.95) 48%, transparent 64%); background-size: 300% 100%; animation: rc-sweep 4s ease-in-out infinite; }
@keyframes rc-sweep { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } }
@keyframes rc-holo { 0%, 100% { background-position: 0 0, 0 0, 0% 50%; } 50% { background-position: 0 0, 0 0, 100% 50%; } }

/* ---------- 下のまとまり ---------- */
.rc-box { background: #fff; border: 1px solid var(--rc-line); border-radius: 22px; padding: 14px; margin: 0 0 16px; }
.rc-box h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; font-size: 15px; color: var(--rc-rose-ink); }
.rc-box__lead { margin: 0 0 12px; font-size: 12px; color: var(--rc-soft); }
.rc-ms-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rc-ms { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 14px; background: #faf5f8; border: 1px solid #f3e3ec; font-size: 12px; color: var(--rc-soft); }
.rc-ms .rc-ico { width: 28px; height: 28px; }
.rc-ms__need { font-weight: 800; color: var(--rc-ink); white-space: nowrap; }
.rc-ms__txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rc-ms.is-done { background: #fff6dc; border-color: #f3dc98; color: #8a5d00; }
.rc-ms.is-done .rc-ms__txt { font-weight: 800; }
.rc-teaser { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 18px 14px; border-radius: 22px; margin: 0 0 16px; border: 1px dashed #f0b3cc; background: linear-gradient(135deg, #fff7fb, #f6f1ff); }
.rc-teaser p { margin: 0; color: var(--rc-soft); }
.rc-teaser b { color: var(--rc-rose-ink); }
.rc-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; }
.rc-minicard { margin: 0; }
.rc-minicard__art { position: relative; display: block; aspect-ratio: 5 / 7; border-radius: 10px; overflow: hidden; box-shadow: 0 0 0 2px #f0c85a, 0 3px 10px rgba(80,30,60,.2); }
.rc-minicard.rar-SECRET .rc-minicard__art { box-shadow: 0 0 0 2px #b89bff, 0 3px 12px rgba(138,99,230,.4); }
.rc-minicard.rar-MEDAL .rc-minicard__art { box-shadow: 0 0 0 2px #6b4bb8, 0 3px 12px rgba(45,31,85,.5); }
.rc-minicard.rar-N .rc-minicard__art, .rc-minicard.rar-R .rc-minicard__art { box-shadow: 0 0 0 2px #f6c0d5, 0 3px 10px rgba(80,30,60,.2); }
.rc-minicard__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-minicard figcaption { font-size: 11px; color: var(--rc-soft); margin-top: 6px; display: flex; flex-direction: column; gap: 1px; }
.rc-minicard figcaption b { color: var(--rc-rose-ink); font-size: 10px; letter-spacing: .06em; }
.rc-empty { text-align: center; padding: 22px 14px; background: #fff; border: 1px dashed #f0c6d9; border-radius: 22px; }
.rc-empty p { margin: 8px 0 0; color: var(--rc-soft); }

/* ---------- 詳細（全画面の演出） ---------- */
html.rc-lock, html.rc-lock body { overflow: hidden; }
.rc-detail {
	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: rc-fade .22s ease-out;
}
@keyframes rc-fade { from { opacity: 0; } }
.rc-d__bg { position: absolute; inset: 0; background: radial-gradient(90% 70% at 50% 40%, rgba(90,50,90,.86), rgba(25,12,30,.95)); }
.rc-detail.rar-SSR .rc-d__bg, .rc-detail.rar-LEGEND .rc-d__bg { background: radial-gradient(90% 70% at 50% 40%, rgba(120,85,20,.85), rgba(25,15,5,.95)); }
.rc-detail.rar-SECRET .rc-d__bg, .rc-detail.rar-MEDAL .rc-d__bg { background: radial-gradient(90% 70% at 50% 40%, rgba(80,50,160,.85), rgba(12,8,30,.96)); }
.rc-detail.is-missing .rc-d__bg { background: radial-gradient(90% 70% at 50% 40%, rgba(70,60,80,.88), rgba(20,16,26,.96)); }
.rc-d__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; }
.rc-d__stage { position: relative; z-index: 1; flex: 1; width: 100%; min-height: 0; display: flex; align-items: center; justify-content: center; perspective: 1400px; touch-action: none; }
.rc-d__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: rc-pop .5s cubic-bezier(.34,1.56,.64,1);
}
.rc-d__tilt.is-live { transition: transform .06s linear; }
.rc-d__tilt.is-intro { animation: rc-pop .5s cubic-bezier(.34,1.56,.64,1), rc-wobble 2.4s .5s ease-in-out 1; }
@keyframes rc-pop { from { transform: scale(.7) rotateY(-25deg); opacity: 0; } }
@keyframes rc-wobble { 25% { transform: rotateY(12deg) rotateX(4deg); } 60% { transform: rotateY(-10deg) rotateX(-3deg); } }
.rc-d__flip { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.3,1.3,.5,1); }
.rc-d__flip.is-flipped { transform: rotateY(180deg); }
.rc-d__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); background: linear-gradient(160deg, #efe6ee, #e4dcef); }
.rc-detail.rar-SSR .rc-d__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); }
.rc-detail.rar-SECRET .rc-d__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); }
.rc-d__face.is-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-d__face .rc-holo { mix-blend-mode: soft-light; opacity: calc(.25 + var(--hyp) * .45); background-position: var(--mx) var(--my); animation: none; background-size: 200% 200%; }
.rc-d__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; }
.rc-d__tilt.is-live .rc-d__glare { opacity: .85; }
.rc-d__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; }
.rc-d__new { position: absolute; right: 10px; top: 10px; font-weight: 900; font-size: 12px; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; background: linear-gradient(120deg, #ff5c9a, #ff9a5c); color: #fff; }
.rc-d__face.is-back { transform: rotateY(180deg); background: linear-gradient(160deg, #fff5fa, #f1e8ff); color: #4a3540; }
.rc-d__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; }
.rc-d__rar { margin: 0; font-weight: 900; letter-spacing: .12em; color: #b83a72; font-size: 20px; }
.rc-d__title { margin: 0; font-weight: 800; font-size: 16px; }
.rc-d__quote { margin: 0; font-size: 13px; color: #b83a72; font-weight: 700; }
.rc-d__desc { margin: 0; font-size: 13px; color: #76606c; line-height: 1.6; }
.rc-d__meta { margin: 4px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; text-align: left; }
.rc-d__meta div { background: rgba(255,255,255,.8); border-radius: 10px; padding: 6px 8px; }
.rc-d__meta dt { font-size: 10px; color: #76606c; }
.rc-d__meta dd { margin: 0; font-weight: 800; font-size: 13px; word-break: break-all; }
.rc-d__story { text-align: left; font-size: 12px; color: #76606c; }
.rc-d__story summary { cursor: pointer; font-weight: 800; color: #b83a72; }
.rc-d__tags { margin: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.rc-d__tags span { font-size: 11px; background: #fff; border-radius: 999px; padding: 2px 8px; color: #b83a72; }
.rc-d__bar { position: relative; z-index: 2; display: flex; gap: 10px; align-items: center; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.rc-d__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; text-decoration: none; }
.rc-d__btn.is-wide { width: auto; padding: 0 16px; border-radius: 999px; font-size: 14px; }
.rc-d__btn .rc-ico { width: 26px; height: 26px; }
.rc-d__btn:disabled { opacity: .3; cursor: default; }
.rc-d__btn.is-fav { font-size: 22px; color: rgba(255,255,255,.75); }
.rc-d__btn.is-fav.is-on { color: #ff6fa6; background: rgba(255,255,255,.92); }
.rc-d__btn.is-link { color: #fff; }
.rc-d__hint { position: relative; z-index: 2; margin: 8px 0 0; font-size: 12px; opacity: .8; text-align: center; }
.rc-detail .rc-sil { filter: blur(14px); }

@media (max-width: 420px) {
	.rc-app { padding: 0 8px 8px; }
	.rc-top { padding: 12px; gap: 12px; }
	.rc-ring.is-big { width: 84px; height: 84px; }
	.rc-ring.is-big .rc-ring__num b { font-size: 23px; }
	.rc-shelf { padding: 10px 8px 16px; border-radius: 18px; }
	.rc-card__title { font-size: 11px; }
	.rc-seg__btn { padding: 6px 9px; }
}
@media (min-width: 900px) {
	.rc-grid { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 16px 14px; }
}
@media (max-height: 500px) and (orientation: landscape) {
	.rc-detail { flex-direction: row; gap: 10px; }
	.rc-d__bar { flex-direction: column; margin-top: 0; flex-wrap: nowrap; }
	.rc-d__hint { display: none; }
}

/* rw26 の既定と重なる所の上書き */
body.rw26 .rc-app button { box-shadow: none; }
body.rw26 .rc-app .rc-card:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
	.rc-holo, .rc-card__new, .rc-d__tilt, .rc-detail { animation: none !important; }
	.rc-d__flip, .rc-d__tilt, .rc-card, .rc-ring__fg { transition: none !important; }
}

/* ---------- 2026-09-27 スマホでカードの絵が小さい → 一覧は2列（PCは今までどおり） ----------
 * シリーズの棚（/cards/）・カード詳細の「このシリーズのカード」も .rc-grid なので同じく2列。カードの縦横比（5:7）はそのまま。 */
@media (max-width: 479px) {
	.rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
	.rc-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rc-card__title { font-size: 12px; }
	.rc-card__no, .rc-card__rar, .rc-card__dup { font-size: 11px; }
}
/* スマホ・タブレットは押せる所を44px以上に */
@media (max-width: 767px) {
	.rc-rar, .rc-favbtn, .rc-seg__btn, .rc-seenall, .rc-search { min-height: 44px; }
	.rc-seg__btn { min-width: 44px; }
	.rc-app .rinka-fs-btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* 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-collection-view.js が .rc-cols（切り替え）を出し、えらんだ数を #rinka-collection-app に .rc-cols-N で付ける。
 * どちらも幅640px以下だけ効く＝PCは切り替えを出さず、並びも今までどおり。えらぶ前は今までの並び（せまい画面2列）。 */
.rc-cols { display: none; }
@media (max-width: 640px) {
	.rc-cols { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; padding: 3px; background: #fff; border: 1px solid #efd3e1; border-radius: 999px; width: fit-content; max-width: 100%; }
	.rc-cols__label { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; font-size: 12px; font-weight: 700; color: var(--rc-soft); white-space: nowrap; }
	.rc-cols__ico { width: 18px; height: 18px; flex: none; color: #d07aa3; }
	.rc-cols__btn {
		appearance: none; border: 0; background: transparent; color: var(--rc-soft); font: inherit; font-size: 15px; font-weight: 800;
		min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 999px; cursor: pointer;
	}
	.rc-cols__btn.is-on { background: linear-gradient(120deg, #ff8fbf, #c9a2ff); color: #fff; }
	.rc-cols__btn:active { transform: scale(.95); }
	.rc-cols__btn:focus-visible { outline: 3px solid rgba(224,88,143,.55); outline-offset: 2px; }
	body.rw26 .rc-app .rc-cols__btn { box-shadow: none; }

	.rc-app.rc-cols-2 .rc-shelves .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
	.rc-app.rc-cols-3 .rc-shelves .rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 5px; }
	.rc-app.rc-cols-3 .rc-shelves .rc-card__title { font-size: 11px; }
	.rc-app.rc-cols-3 .rc-shelves .rc-card__no,
	.rc-app.rc-cols-3 .rc-shelves .rc-card__rar,
	.rc-app.rc-cols-3 .rc-shelves .rc-card__dup { font-size: 9px; padding: 2px 5px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-card__title { font-size: 9px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-card__no,
	.rc-app.rc-cols-4 .rc-shelves .rc-card__rar,
	.rc-app.rc-cols-4 .rc-shelves .rc-card__dup { font-size: 8px; padding: 2px 4px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-card__no { left: 3px; top: 3px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-card__rar { right: 3px; bottom: 3px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-card__dup { left: 3px; bottom: 3px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-card__fav { font-size: 12px; right: 3px; top: 3px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-card__new { font-size: 8px; padding: 2px 5px; top: -5px; }
	.rc-app.rc-cols-4 .rc-shelves .rc-card__rar .rinka-rar-badge { width: 12px; height: 12px; }
}