/* ============================================================
 * rinka-unlocks.css — 限定解放（/unlocks/）2026-09-26 作り直し
 * 描画: assets/js/rinka-unlocks.js（#rinka-unlocks-grid.rinka-ul）
 * ・鍵のかかったごほうびの棚（進み具合リング）→ 解放の瞬間の演出 → 解放ずみのアート棚
 * ・rinka-world-2026.css には触らず、クラス ul- で独立。スマホ縦を最優先。
 * ========================================================== */

.rinka-ul {
	--ul-ink: #4a3540;
	--ul-soft: #76606c;
	--ul-line: #f1dbe7;
	--ul-rose: #b83a72;
	--ul-grad: linear-gradient(120deg, #ff8fbf, #c9a2ff 55%, #8fd6ff);
	color: var(--ul-ink);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
	margin: 8px 0 22px;
	min-height: 320px;
}
.rinka-ul > * { min-width: 0; }
.rinka-ul ul, .rinka-ul ol { list-style: none; margin: 0; padding: 0; }
.rinka-ul img { max-width: none; }
.ul-skeleton { display: grid; gap: 12px; }
.ul-skeleton span { display: block; height: 110px; border-radius: 22px; background: linear-gradient(90deg, #fbeef5, #fff, #fbeef5); background-size: 200% 100%; animation: ulSk 1.4s linear infinite; }
@keyframes ulSk { to { background-position: -200% 0; } }

/* ---------- リング ---------- */
.ul-ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ul-ring__bg { fill: none; stroke: #f3e3ec; stroke-width: 8; }
.ul-ring__fg { fill: none; stroke: #ff8fbf; stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 1s cubic-bezier(.22, .8, .24, 1); }
.ul-ring--big .ul-ring__bg, .ul-ring--big .ul-ring__fg { stroke-width: 9; }
.ul-ring--big .ul-ring__fg { stroke: #d879b8; }

/* ---------- ヒーロー ---------- */
.ul-hero {
	display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 16px; align-items: center;
	padding: 18px; border-radius: 28px;
	background:
		radial-gradient(110% 90% at 0% 0%, rgba(255, 170, 210, .3), transparent 55%),
		radial-gradient(90% 90% at 100% 100%, rgba(190, 170, 255, .26), transparent 60%),
		#fff;
	border: 1px solid var(--ul-line);
	box-shadow: 0 14px 34px -14px rgba(184, 58, 114, .28);
}
.ul-hero__ring { position: relative; width: 112px; height: 112px; }
.ul-hero__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.ul-hero__num b { font-size: 2.1rem; font-weight: 900; color: var(--ul-rose); }
.ul-hero__num span { margin-top: 4px; font-size: .8rem; font-weight: 700; color: var(--ul-soft); }
.ul-hero__side { min-width: 0; display: grid; gap: 6px; }
.ul-hero__label { margin: 0; font-size: 1.05rem; font-weight: 900; line-height: 1.35; }
.ul-hero__lead { margin: 0; font-size: .8rem; color: var(--ul-soft); line-height: 1.55; }
.ul-hero__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.ul-hero__stats li { display: flex; align-items: baseline; gap: 6px; padding: 4px 10px; border-radius: 99px; background: #fdf3f8; font-size: .74rem; color: var(--ul-soft); }
.ul-hero__stats b { color: var(--ul-ink); font-size: .92rem; }
.ul-hero__next { grid-column: 1 / -1; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 20px; background: linear-gradient(120deg, #fff4f9, #f7f2ff); border: 1px solid #f3d6e6; }
.ul-hero__next > div { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ul-hero__nextico { width: 44px; height: 44px; flex: none; animation: ulBob 3.2s ease-in-out infinite; }
.ul-hero__nextlab { margin: 0; font-size: .7rem; font-weight: 800; letter-spacing: .06em; color: var(--ul-rose); }
.ul-hero__nextt { margin: 0; font-weight: 900; font-size: .95rem; overflow-wrap: anywhere; }
.ul-hero__nextreq { margin: 0; font-size: .74rem; color: var(--ul-soft); }
@keyframes ulBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-3px) rotate(4deg); } }

/* ---------- 棚 ---------- */
.ul-shelf { padding: 16px; border-radius: 26px; background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 250, 253, .86)); border: 1px solid var(--ul-line); box-shadow: 0 10px 28px -20px rgba(184, 58, 114, .45); }
.ul-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.ul-head__ico { width: 44px; height: 44px; flex: none; }
.rinka-ul .ul-head__h { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 1.1rem; font-weight: 900; color: var(--ul-ink); border: 0; padding: 0; background: none; }
.rinka-ul .ul-head__h::before, .rinka-ul .ul-head__h::after { content: none; }
.ul-head__n { font-size: .8rem; font-weight: 800; color: var(--ul-rose); font-variant-numeric: tabular-nums; }
.ul-head__lead { margin: 3px 0 0; font-size: .8rem; color: var(--ul-soft); line-height: 1.55; }
.ul-empty, .ul-note { margin: 0; font-size: .8rem; color: var(--ul-soft); line-height: 1.6; }
.ul-note { margin-top: 10px; }
.ul-shelf--next { background: linear-gradient(180deg, #fffafd, #fbf6ff); }
.ul-shelf--fresh { background: linear-gradient(160deg, #fffaf0, #fff3fa 55%, #f3f4ff); border-color: #f5ddb0; }
.ul-shelf--inf { background: linear-gradient(160deg, #fbf6ff, #fff4fa 60%, #f1f7ff); border-color: #e3d6fb; }

/* レア度チップ */
.ul-rar { display: inline-grid; place-items: center; min-width: 34px; height: 22px; padding: 0 8px; border-radius: 99px; font-size: .7rem; font-weight: 900; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .25); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 1px 3px rgba(80, 40, 60, .2); }
.ul-rar--n { background: linear-gradient(135deg, #e3a57e, #b8734e 60%, #f0c29f); }
.ul-rar--r { background: linear-gradient(135deg, #b9c1d0, #8d96a9 55%, #e5e9f0); }
.ul-rar--sr { background: linear-gradient(135deg, #f5c84e, #c48a18 55%, #ffe38a); }
.ul-rar--ssr { background: linear-gradient(120deg, #ff8fc4, #ffb86b 30%, #7fdcb0 55%, #7fb8ff 75%, #c49bff); }
.ul-rar--inf { background: linear-gradient(120deg, #b99bff, #ff9ccf); }
.ul-tag { display: inline-block; padding: 1px 9px; border-radius: 99px; background: #ffe3ef; color: var(--ul-rose); font-size: .7rem; font-weight: 800; animation: ulPulse 2.4s ease-in-out infinite; }
@keyframes ulPulse { 50% { box-shadow: 0 0 0 5px rgba(255, 143, 191, .18); } }

/* ---------- 鍵のかかったごほうび（金庫） ---------- */
.ul-vaults { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 10px; }
.ul-vault {
	display: flex; gap: 14px; align-items: flex-start; padding: 14px; border-radius: 22px; min-width: 0;
	background:
		repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0 14px, rgba(247, 232, 242, .55) 14px 28px),
		#fff;
	border: 1px solid var(--ul-line);
	box-shadow: 0 4px 14px -10px rgba(184, 58, 114, .35);
}
.ul-vault.is-near { border-color: #ffb3d1; box-shadow: 0 0 0 3px rgba(255, 143, 191, .16), 0 8px 20px -12px rgba(224, 88, 143, .55); }
.ul-vault--inf { background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0) 0 14px, rgba(236, 228, 255, .6) 14px 28px), #fff; border-color: #e3d6fb; }
.ul-vault__lock { position: relative; flex: none; width: 76px; height: 76px; display: grid; place-items: center; }
.ul-vault__lock .ul-ring { position: absolute; inset: 0; }
.ul-vault--sr .ul-ring__fg { stroke: #e0a92c; }
.ul-vault--r .ul-ring__fg { stroke: #9aa3b6; }
.ul-vault--n .ul-ring__fg { stroke: #cf8e66; }
.ul-vault--ssr .ul-ring__fg, .ul-vault--inf .ul-ring__fg { stroke: #b58cff; }
.ul-vault__lockimg { position: relative; width: 50px; height: 50px; filter: drop-shadow(0 3px 3px rgba(90, 58, 102, .2)); }
.ul-vault.is-near .ul-vault__lockimg { animation: ulJiggle 2.8s ease-in-out infinite; }
@keyframes ulJiggle { 0%, 70%, 100% { transform: rotate(0); } 74% { transform: rotate(-9deg); } 78% { transform: rotate(8deg); } 82% { transform: rotate(-5deg); } 86% { transform: rotate(3deg); } }
.ul-vault__body { flex: 1; min-width: 0; display: grid; gap: 5px; }
.ul-vault__top { display: flex; align-items: center; gap: 6px; }
.rinka-ul .ul-vault__t { margin: 0; font-size: 1rem; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; color: var(--ul-ink); border: 0; padding: 0; background: none; }
.rinka-ul .ul-vault__t::before, .rinka-ul .ul-vault__t::after { content: none; }
.ul-vault__d { margin: 0; font-size: .8rem; color: var(--ul-soft); line-height: 1.55; overflow-wrap: anywhere; }
.ul-req { margin: 2px 0 0; display: flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 800; color: var(--ul-ink); }
.ul-req__ico { width: 22px; height: 22px; flex: none; }
.ul-gauge { display: block; height: 8px; border-radius: 99px; background: #f6e4ee; overflow: hidden; box-shadow: inset 0 1px 2px rgba(120, 60, 90, .12); }
.ul-gauge__bar { display: block; height: 100%; min-width: 4px; border-radius: inherit; background: var(--ul-grad); transition: width .8s cubic-bezier(.22, .8, .24, 1); }
.ul-num { margin: 0; display: flex; align-items: baseline; gap: 4px; font-size: .74rem; color: var(--ul-soft); font-variant-numeric: tabular-nums; }
.ul-num b { color: var(--ul-ink); font-size: .88rem; }
.ul-num em { margin-left: auto; font-style: normal; font-weight: 800; color: var(--ul-rose); }

/* ---------- 解放ずみ（アート棚） ---------- */
.ul-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 200px), 1fr)); gap: 12px; }
.ul-art { min-width: 0; }
.ul-art__fig { margin: 0; height: 100%; display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #fff; border: 2px solid #f4dbe7; box-shadow: 0 8px 20px -14px rgba(184, 58, 114, .55); }
.ul-art--r .ul-art__fig { border-color: #d3d9e4; }
.ul-art--sr .ul-art__fig { border-color: #f1cf6f; box-shadow: 0 8px 22px -12px rgba(200, 150, 30, .55); }
.ul-art--ssr .ul-art__fig, .ul-art--inf .ul-art__fig { border-color: #d8bfff; }
.ul-art__vis { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: linear-gradient(160deg, #fff0f6, #f3efff); }
.ul-art__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ul-art__vis.is-empty { display: grid; place-items: center; }
.ul-art__ph { width: 46%; height: auto; opacity: .9; }
.ul-art--sr .ul-art__vis::after, .ul-art--ssr .ul-art__vis::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 48%, transparent 60%);
	background-size: 260% 100%; animation: ulSheen 6s ease-in-out infinite;
}
@keyframes ulSheen { 0%, 55% { background-position: 160% 0; } 85%, 100% { background-position: -60% 0; } }
.ul-art__cap { padding: 10px 10px 12px; display: grid; gap: 4px; justify-items: start; }
.rinka-ul .ul-art__t { margin: 0; font-size: .9rem; font-weight: 900; line-height: 1.35; overflow-wrap: anywhere; color: var(--ul-ink); border: 0; padding: 0; background: none; }
.rinka-ul .ul-art__t::before, .rinka-ul .ul-art__t::after { content: none; }
.ul-art__r { margin: 0; font-size: .72rem; color: var(--ul-soft); line-height: 1.5; overflow-wrap: anywhere; }

/* ---------- 解放の瞬間（鍵がゆれて外れる → 光る → イラストがあらわれる） ---------- */
.ul-art.is-opening .ul-art__img { animation: ulReveal 1.6s cubic-bezier(.22, .8, .24, 1) calc(0ms - var(--ul-el, 0ms)) both; }
.ul-open { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; background: rgba(252, 240, 248, .92); animation: ulVeil 1.7s ease calc(0ms - var(--ul-el, 0ms)) both; }
.ul-open__lock { position: relative; z-index: 2; width: 42%; height: auto; animation: ulUnlock 1.4s cubic-bezier(.34, 1.56, .64, 1) calc(0ms - var(--ul-el, 0ms)) both; }
.ul-open__glow { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; border-radius: 50%; background: radial-gradient(circle, #fff 0%, rgba(255, 220, 240, .9) 35%, rgba(255, 180, 220, 0) 70%); animation: ulGlow 1.5s ease-out calc(550ms - var(--ul-el, 0ms)) both; }
.ul-open__rays { position: absolute; left: 50%; top: 50%; width: 160%; aspect-ratio: 1; margin: -80% 0 0 -80%; background: repeating-conic-gradient(from 0deg, rgba(255, 214, 120, .55) 0 6deg, transparent 6deg 24deg); border-radius: 50%; mask: radial-gradient(circle, #000 20%, transparent 62%); -webkit-mask: radial-gradient(circle, #000 20%, transparent 62%); animation: ulRays 1.6s ease-out calc(500ms - var(--ul-el, 0ms)) both; }
@keyframes ulUnlock {
	0% { transform: scale(.9) rotate(0); opacity: 1; }
	12% { transform: scale(1) rotate(-12deg); }
	22% { transform: scale(1) rotate(10deg); }
	32% { transform: scale(1) rotate(-8deg); }
	42% { transform: scale(1.05) rotate(0); }
	60% { transform: scale(1.25) translateY(-8%); opacity: 1; }
	100% { transform: scale(.6) translateY(-60%); opacity: 0; }
}
@keyframes ulGlow { 0% { transform: scale(.2); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(6); opacity: 0; } }
@keyframes ulRays { 0% { transform: scale(.3) rotate(0); opacity: 0; } 35% { opacity: 1; } 100% { transform: scale(1.1) rotate(40deg); opacity: 0; } }
@keyframes ulVeil { 0%, 45% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes ulReveal { 0%, 35% { filter: blur(10px) saturate(.4); transform: scale(1.08); } 100% { filter: none; transform: none; } }
.ul-art.is-opening .ul-art__fig { animation: ulPop .7s cubic-bezier(.34, 1.56, .64, 1) calc(1000ms - var(--ul-el, 0ms)) both; }
@keyframes ulPop { 0% { transform: scale(1); } 45% { transform: scale(1.04); box-shadow: 0 0 0 6px rgba(255, 214, 120, .45), 0 14px 30px -12px rgba(200, 150, 30, .6); } 100% { transform: none; } }

/* ---------- ∞ 道のり ---------- */
.ul-road { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; -webkit-overflow-scrolling: touch; counter-reset: none; }
.ul-road__step { flex: 0 0 148px; position: relative; display: grid; gap: 4px; align-content: start; padding: 12px; border-radius: 18px; background: #fff; border: 1px solid #e6dbfa; }
.ul-road__step.is-next { border-color: #c9a2ff; box-shadow: 0 0 0 3px rgba(201, 162, 255, .2); }
.ul-road__lv { font-weight: 900; font-size: .95rem; color: #6b4fb3; }
.ul-road__req { font-size: .74rem; color: var(--ul-soft); line-height: 1.5; }
.ul-road__here { justify-self: start; padding: 1px 9px; border-radius: 99px; background: linear-gradient(120deg, #b99bff, #ff9ccf); color: #fff; font-size: .68rem; font-weight: 900; }
.ul-road__more { display: grid; place-items: center; text-align: center; font-size: .8rem; font-weight: 800; color: #6b4fb3; background: repeating-linear-gradient(135deg, #fbf8ff 0 10px, #f3ecff 10px 20px); border-style: dashed; }

/* ---------- 入手モーダル（既存 .rinka-fs-grant に足すだけ） ---------- */
.ul-grant .rinka-fs-grant__box { text-align: center; }
.ul-grant__icon { display: block; width: 64px; height: 64px; margin: 0 auto 4px; animation: ulBob 3s ease-in-out infinite; }
.ul-grant .rinka-fs-grant__voice-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; }

/* ---------- 画面幅 ---------- */
@media (min-width: 640px) {
	.ul-hero { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.1fr); padding: 22px 24px; }
	.ul-hero__ring { width: 128px; height: 128px; }
	.ul-hero__next { grid-column: auto; }
	.ul-arts { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}
@media (max-width: 360px) {
	.ul-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.ul-hero__stats { justify-content: center; }
	.ul-vault { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
	.rinka-ul *, .rinka-ul *::before, .rinka-ul *::after, .ul-grant * { animation: none !important; transition: none !important; }
	.ul-open { display: none; }
}