/* ============================================================
 * rinka-lineup.css — ガチャラインナップ（/lineup/）の見た目（2026-09-26 テンプレ内の <style> から移して、ガチャ演出と色をそろえた）
 * 並べ方・隠しレベル（N/R 素通し・SR うすぐらい・SSR 影・SECRET うっすら）は前と同じ。
 * ========================================================== */
/* ══════════ ガチャラインナップ（このページ限定・--rds-* トークン参照） ══════════ */
.rinka-lu{ --lu-gold:#f2ce7c; --lu-gold-deep:#e0a83c; --lu-plum:var(--rds-accent,#c2568c);
	--lu-plum-deep:var(--rds-accent-strong,#a63f75);
	--lu-night-1:#2a1c33; --lu-night-2:#3a2550; --lu-night-3:#1c1224;
	max-width:1120px; margin:0 auto; padding:0 clamp(14px,4vw,28px); }

/* — 導入ストリップ — */
.rinka-lu__intro{ text-align:center; margin:clamp(10px,3vw,22px) auto clamp(16px,4vw,30px); max-width:640px; }
.rinka-lu__date{ font-family:var(--rds-font-latin,Quicksand,sans-serif); letter-spacing:.16em;
	font-weight:600; font-size:var(--rds-text-xs,.75rem); color:var(--lu-plum-deep);
	text-transform:uppercase; }
.rinka-lu__lead{ margin:.5em 0 0; font-size:var(--rds-text-sm,.9rem); line-height:1.85;
	color:var(--rds-ink-soft,#7c6672); }
.rinka-lu__legend{ display:flex; flex-wrap:wrap; gap:.4em .9em; justify-content:center;
	margin:clamp(12px,3vw,18px) auto 0; padding:.7em 1em; max-width:560px;
	background:var(--rds-accent-soft,#f9eef4); border:1px solid var(--rds-accent-line,#ecc7da);
	border-radius:var(--rds-radius-lg,16px); font-size:var(--rds-text-xs,.75rem);
	color:var(--rds-ink,#3b2b34); }
.rinka-lu__legend b{ color:var(--lu-plum-deep); }
.rinka-lu__legend span{ white-space:nowrap; }

/* — 影のショーケース（ここが主役：レアほど闇に沈む） — */
.rinka-lu__case{ position:relative; border-radius:clamp(18px,3vw,26px);
	padding:clamp(16px,3.5vw,30px) clamp(12px,3vw,26px) clamp(20px,4vw,34px);
	background:
		radial-gradient(120% 90% at 50% -10%, rgba(242,206,124,.14), transparent 55%),
		linear-gradient(160deg, var(--lu-night-2), var(--lu-night-1) 55%, var(--lu-night-3));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
		0 24px 60px -28px rgba(28,18,36,.8), 0 2px 0 rgba(255,255,255,.5);
	overflow:hidden; }
.rinka-lu__case::before{ content:""; position:absolute; inset:0;
	background:radial-gradient(80% 60% at 50% 120%, rgba(60,40,82,.55), transparent 70%);
	pointer-events:none; }
.rinka-lu__casehead{ position:relative; text-align:center; margin:0 0 clamp(14px,3vw,22px); }
.rinka-lu__casehead .k{ font-family:var(--rds-font-latin,Quicksand,sans-serif);
	letter-spacing:.22em; font-size:.66rem; font-weight:600; color:var(--lu-gold);
	text-transform:uppercase; opacity:.85; }
.rinka-lu__casehead h2{ margin:.2em 0 0; color:#fff; font-size:clamp(1.15rem,4vw,1.5rem);
	text-shadow:0 2px 18px rgba(242,206,124,.35); }
/* 2つ目の見出し（カード側）は上に余白を入れて、ガチャ側とはっきり分ける */
.rinka-lu__casehead--2{ margin-top:clamp(24px,5vw,44px);
	padding-top:clamp(16px,3.5vw,26px); border-top:1px solid rgba(255,255,255,.12); }

/* — グリッド — */
.rinka-lu__grid{ position:relative; display:grid;
	grid-template-columns:repeat(auto-fill, minmax(126px,1fr)); gap:clamp(10px,2.2vw,16px); }
@media (max-width:420px){ .rinka-lu__grid{ grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); } }

/* — 1枚のカード — */
.rinka-lu__card{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4;
	background:#2b1d36; border:1px solid rgba(255,255,255,.08);
	box-shadow:0 8px 20px -10px rgba(0,0,0,.6); isolation:isolate;
	/* ダブルタップ拡大を無効化：ズームで影ヴェールを飛び越えてレア絵が素で見えるのを防ぐ */
	touch-action:manipulation; }
.rinka-lu__art{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
	font-size:clamp(2rem,7vw,2.8rem); }
/* クリック/タップを画像に通さない：テーマの画像拡大（Lightbox/PhotoSwipe）が
   フィルター無しの素のレア絵を全画面表示してしまうのを止める（ラインナップは拡大不要） */
.rinka-lu__art img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
/* 影のヴェール（レア度でだんだん濃く） */
.rinka-lu__veil{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.rinka-lu__badge{ position:absolute; z-index:4; top:7px; left:7px; padding:.15em .5em;
	border-radius:999px; font-family:var(--rds-font-latin,Quicksand,sans-serif); font-weight:700;
	font-size:.62rem; letter-spacing:.06em; color:#fff; background:rgba(0,0,0,.35);
	backdrop-filter:blur(2px); }
.rinka-lu__name{ position:absolute; z-index:4; left:0; right:0; bottom:0; padding:.5em .6em .55em;
	font-size:.72rem; line-height:1.3; color:#fff; text-align:center;
	background:linear-gradient(0deg, rgba(0,0,0,.62), rgba(0,0,0,0)); }
.rinka-lu__no{ position:absolute; z-index:4; top:7px; right:8px; font-size:.56rem; letter-spacing:.05em;
	color:rgba(255,255,255,.62); font-family:var(--rds-font-latin,Quicksand,sans-serif); }

/* レア度別フレーム発色 */
.rinka-lu__card.n  { border-color:rgba(196,188,193,.5); }
.rinka-lu__card.r  { border-color:rgba(122,195,242,.55); box-shadow:0 8px 22px -10px rgba(90,167,224,.5); }
.rinka-lu__card.sr { border-color:rgba(199,155,240,.6);  box-shadow:0 10px 26px -10px rgba(154,107,216,.55); }
.rinka-lu__card.ssr{ border-color:rgba(242,206,124,.7);  box-shadow:0 12px 30px -8px rgba(224,168,60,.5); }
.rinka-lu__card.secret{ border-color:rgba(157,122,196,.75); box-shadow:0 12px 34px -8px rgba(109,74,158,.65); }
.rinka-lu__card.n .rinka-lu__badge  { background:linear-gradient(135deg,#a8a0a5,#c4bcc1); }
.rinka-lu__card.r .rinka-lu__badge  { background:linear-gradient(135deg,#5aa7e0,#7fc3f2); }
.rinka-lu__card.sr .rinka-lu__badge { background:linear-gradient(135deg,#9a6bd8,#c79bf0); }
.rinka-lu__card.ssr .rinka-lu__badge{ background:linear-gradient(135deg,#e0a83c,#f2ce7c); color:#4a2f00; }
.rinka-lu__card.secret .rinka-lu__badge{ background:linear-gradient(135deg,#3a2a52,#6d4a9e); }

/* ── 隠しレベル：N/R=素通し / SR=少し暗い / SECRET=うっすら / SSR=ほぼ見えない ── */
.rinka-lu__card.n  .rinka-lu__art,
.rinka-lu__card.r  .rinka-lu__art{ filter:none; }
.rinka-lu__card.sr .rinka-lu__art{ filter:brightness(.6) contrast(.92) saturate(.72) blur(.4px); }
.rinka-lu__card.sr .rinka-lu__veil{ background:linear-gradient(180deg, rgba(20,10,30,.28), rgba(20,10,30,.42)); }
.rinka-lu__card.secret .rinka-lu__art{ filter:brightness(.6) saturate(1.15) blur(1.8px); }
.rinka-lu__card.secret .rinka-lu__veil{
	background:radial-gradient(70% 60% at 50% 42%, rgba(157,122,196,.22), transparent 62%),
		linear-gradient(180deg, rgba(14,8,22,.4), rgba(14,8,22,.5)); }
/* SSR は「真っ黒」ではなく“影の奥にうっすら輪郭が見える”程度に（データはそのまま・伏せだけ緩和） */
.rinka-lu__card.ssr .rinka-lu__art{ filter:brightness(.48) saturate(.78) blur(3.6px); }
.rinka-lu__card.ssr .rinka-lu__veil{
	background:radial-gradient(80% 70% at 50% 45%, rgba(242,206,124,.12), transparent 60%),
		linear-gradient(180deg, rgba(8,4,14,.46), rgba(8,4,14,.56)); }

/* 隠し札の「？」 */
.rinka-lu__q{ position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center;
	font-family:var(--rds-font-latin,Quicksand,sans-serif); font-weight:700; letter-spacing:.12em;
	color:rgba(255,255,255,.82); font-size:clamp(1.1rem,3.6vw,1.5rem); text-shadow:0 2px 12px rgba(0,0,0,.6); }
.rinka-lu__card.ssr .rinka-lu__q{ color:rgba(242,206,124,.72); }
.rinka-lu__card.secret .rinka-lu__q{ color:rgba(200,170,240,.8);
	animation:rinka-lu-breathe 3.4s ease-in-out infinite; }

/* お宝の気配：レアにだけ光のスイープ */
.rinka-lu__card.sr::after,
.rinka-lu__card.ssr::after,
.rinka-lu__card.secret::after{ content:""; position:absolute; inset:0; z-index:5; pointer-events:none;
	background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.28) 50%, transparent 62%);
	transform:translateX(-120%); animation:rinka-lu-sweep 4.6s ease-in-out infinite; }
.rinka-lu__card.ssr::after{ background:linear-gradient(115deg, transparent 40%, rgba(242,206,124,.4) 50%, transparent 60%); animation-duration:5.4s; }
.rinka-lu__card.secret::after{ background:linear-gradient(115deg, transparent 42%, rgba(200,170,240,.42) 50%, transparent 58%); animation-duration:6s; }

/* 幻（ミステリー枠：まだ見ぬカード） */
.rinka-lu__card.mystery{ border:1px dashed rgba(255,255,255,.16); background:#241830; }
.rinka-lu__card.mystery .rinka-lu__q{ color:rgba(255,255,255,.5); }
.rinka-lu__mysterylabel{ position:absolute; z-index:4; left:0; right:0; bottom:0; padding:.45em .5em;
	font-size:.6rem; text-align:center; color:rgba(255,255,255,.55);
	background:linear-gradient(0deg, rgba(0,0,0,.5), transparent); }

@keyframes rinka-lu-sweep{ 0%{ transform:translateX(-120%);} 22%,100%{ transform:translateX(120%);} }
@keyframes rinka-lu-breathe{ 0%,100%{ opacity:.55; } 50%{ opacity:.95; } }
@media (prefers-reduced-motion:reduce){
	.rinka-lu__card::after{ animation:none; opacity:0; }
	.rinka-lu__card.secret .rinka-lu__q{ animation:none; }
}

/* — 締めのコピー＋導線 — */
.rinka-lu__foot{ margin:clamp(18px,4vw,30px) auto 0; text-align:center; max-width:600px; }
.rinka-lu__slice{ display:inline-flex; align-items:center; gap:.5em; padding:.5em 1.05em;
	border-radius:999px; background:var(--rds-accent-soft,#f9eef4);
	border:1px solid var(--rds-accent-line,#ecc7da); color:var(--lu-plum-deep);
	font-size:var(--rds-text-xs,.75rem); font-weight:700; }
.rinka-lu__foottext{ margin:.9em 0 0; font-size:var(--rds-text-sm,.9rem); line-height:1.9;
	color:var(--rds-ink-soft,#7c6672); }
.rinka-lu__cta{ display:flex; flex-wrap:wrap; gap:.7em; justify-content:center;
	margin:clamp(14px,3vw,20px) 0 0; }
.rinka-lu__btn{ display:inline-flex; align-items:center; gap:.4em; min-height:var(--rds-tap,44px);
	padding:.6em 1.4em; border-radius:999px; font-weight:700; font-size:var(--rds-text-sm,.9rem);
	text-decoration:none; }
.rinka-lu__btn--go{ color:#4a2f00;
	background:linear-gradient(135deg, var(--lu-gold-deep), var(--lu-gold));
	box-shadow:0 10px 24px -10px rgba(224,168,60,.7); }
.rinka-lu__btn--ghost{ color:var(--lu-plum-deep); background:#fff;
	border:1.5px solid var(--rds-accent-line,#ecc7da); }
.rinka-lu__btn:focus-visible{ outline:3px solid var(--rds-focus,#e8a3c6); outline-offset:2px; }
/* ══════════ 2026-09-26 ガチャ演出（rinka-gacha-fx.css）と見た目をそろえる ══════════ */
.rlu .rinka-lu { --lu-ink: #5a3a66; }
.rlu .rinka-lu__date { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: .3em; padding: .35em 1em; border-radius: 999px; background: #fff; border: 1px solid #ecc7da; letter-spacing: .08em; }
.rlu .rinka-lu__date span:first-child { font-weight: 700; color: var(--lu-ink); }
.rlu .rinka-lu__legend { gap: 6px; background: transparent; border: 0; padding: 0; }
.rlu .rinka-lu__lg { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 999px; background: #fff; border: 1px solid #efd3e1; color: var(--rfd-soft); font-size: .72rem; white-space: nowrap; }
.rlu .rinka-lu__lg b { padding: 2px 8px; border-radius: 999px; font-family: var(--rds-font-latin, Quicksand, sans-serif); font-size: .66rem; letter-spacing: .06em; color: #fff; }
.rlu .rinka-lu__lg--n b { background: linear-gradient(135deg, #e889ad, #f6b6cf); }
.rlu .rinka-lu__lg--sr b { background: linear-gradient(120deg, #9aa7bf, #dfe6f2, #9aa7bf); color: #2e3a52; }
.rlu .rinka-lu__lg--ssr b { background: linear-gradient(120deg, #e1a91c, #fff0b0, #e1a91c); color: #5b3b00; }
.rlu .rinka-lu__lg--secret b { background: linear-gradient(120deg, #9a6bff, #ff8fd0, #7cc8ff); }

/* ショーケース＝ガチャ演出の「闇と虹 → 星空」の地 */
.rlu .rinka-lu__case {
	background:
		radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%),
		radial-gradient(1px 1px at 28% 72%, #fff 50%, transparent 51%),
		radial-gradient(2px 2px at 44% 12%, #fff8d6 50%, transparent 51%),
		radial-gradient(1px 1px at 58% 64%, #fff 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 72% 28%, #d8ccff 50%, transparent 51%),
		radial-gradient(1px 1px at 86% 80%, #fff 50%, transparent 51%),
		radial-gradient(2px 2px at 92% 12%, #fff 50%, transparent 51%),
		radial-gradient(120% 90% at 50% -10%, rgba(242, 206, 124, .16), transparent 55%),
		radial-gradient(circle at 50% 40%, #3b2440 0%, #22152b 70%, #1d1330 100%);
}
.rlu .rinka-lu__casehead h2 { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rlu .rinka-lu__casehead h2 .rfd-ico { width: 34px; height: 34px; }

/* レア度バッジはコレクションの色（rinka-collection.css の .rc-card__rar）にそろえる */
.rlu .rinka-lu__card.n .rinka-lu__badge { background: rgba(74, 53, 64, .72); }
.rlu .rinka-lu__card.r .rinka-lu__badge { background: #e889ad; }
.rlu .rinka-lu__card.sr .rinka-lu__badge { background: linear-gradient(120deg, #9aa7bf, #dfe6f2, #9aa7bf); color: #2e3a52; }
.rlu .rinka-lu__card.ssr .rinka-lu__badge { background: linear-gradient(120deg, #e1a91c, #fff0b0, #e1a91c); color: #5b3b00; }
.rlu .rinka-lu__card.secret .rinka-lu__badge { background: linear-gradient(120deg, #9a6bff, #ff8fd0, #7cc8ff); }
.rlu .rinka-lu__card.r { border-color: rgba(246, 192, 213, .8); }
.rlu .rinka-lu__card.sr { border-color: rgba(207, 216, 232, .85); }
.rlu .rinka-lu__card.ssr { border-color: rgba(240, 200, 90, .85); }
.rlu .rinka-lu__card.secret { border-color: rgba(184, 155, 255, .85); }
.rlu .rinka-lu__card { border-radius: 12px; border-width: 2px; }

.rlu .rinka-lu__slice { gap: .4em; padding: .3em 1em .3em .4em; }
.rlu .rinka-lu__slice .rfd-ico { width: 26px; height: 26px; }
.rlu .rinka-lu__btn { gap: .4em; min-height: 48px; }
.rlu .rinka-lu__btn .rfd-ico { width: 26px; height: 26px; }
.rlu .rinka-lu__btn--go { color: #fff; background: var(--rfd-grad); box-shadow: 0 10px 24px -10px rgba(184, 58, 114, .7); }
body.rw26 .rlu .rinka-lu__btn--go { color: #fff; }