/**
 * rinka-home.css — りんかワールド ホーム画面化・下部ナビ・回遊導線（追加のみ）
 *
 * 色の役割（指示書準拠・原色/ソシャゲ発光は使わない）:
 *   ピンク  = りんか・なかよし系   青 = 遠征・情報   緑 = ペット・完了
 *   紫    = ストーリー・シークレット  オレンジ = 受取可能な報酬  赤 = エラーのみ
 * デザイントークンは main.css の --rinka-* を共用（無い環境用のフォールバック付き）。
 */

/* ============ 1. スマホ固定下部ナビ ============ */

.rinka-bottom-nav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 9990;
	display: none; /* JSが body.rinka-has-bottom-nav を付けたモバイルでのみ表示 */
	background: color-mix(in srgb, var(--rinka-surface, #fffdfd) 92%, transparent);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-top: 1px solid var(--rinka-border, #f3dce6);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	box-shadow: 0 -4px 18px rgba(214, 143, 177, 0.12);
}
@supports not (background: color-mix(in srgb, #fff 92%, transparent)) {
	.rinka-bottom-nav { background: rgba(255, 253, 253, 0.94); }
}
body.rinka-has-bottom-nav .rinka-bottom-nav { display: flex; }
@media (min-width: 783px) {
	body.rinka-has-bottom-nav .rinka-bottom-nav { display: none; }
}

.rinka-bottom-nav__item {
	position: relative;
	flex: 1 1 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 2px;
	min-height: 52px; /* 44px以上のタップ領域 */
	padding: 6px 2px 5px;
	text-decoration: none;
	color: var(--rinka-ink-soft, #8a7580);
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1;
	-webkit-tap-highlight-color: transparent;
	transition: color 0.15s ease;
}
.rinka-bottom-nav__item:focus-visible {
	outline: 2px solid var(--rinka-accent, #f5b5cd);
	outline-offset: -2px;
	border-radius: 10px;
}
.rinka-bottom-nav__ico { font-size: 1.28rem; line-height: 1; }
.rinka-bottom-nav__label { letter-spacing: 0.02em; }
.rinka-bottom-nav__item.is-now {
	color: var(--rinka-accent-strong, #d16a97);
}
.rinka-bottom-nav__item.is-now::before {
	content: '';
	position: absolute;
	top: 4px; left: 50%;
	transform: translateX(-50%);
	width: 26px; height: 3px;
	border-radius: 3px;
	background: var(--rinka-accent, #f5b5cd);
}
.rinka-bottom-nav__badge {
	position: absolute;
	top: 5px; right: calc(50% - 17px);
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #f0a35e; /* オレンジ = 受取可能・お楽しみあり */
	border: 1.5px solid var(--rinka-surface, #fffdfd);
}

/* 二重固定ナビ防止: 下部ナビがあるときは Cocoon のモバイルボタンを隠し、本文に余白 */
@media (max-width: 782px) {
	body.rinka-has-bottom-nav { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
	body.rinka-has-bottom-nav .mobile-menu-buttons { display: none !important; }
}

/* ============ 2. メニューシート ============ */

.rinka-nav-sheet { position: fixed; inset: 0; z-index: 9995; }
.rinka-nav-sheet__backdrop {
	position: absolute; inset: 0;
	background: rgba(70, 45, 60, 0.35);
	opacity: 0;
	transition: opacity 0.2s ease;
}
.rinka-nav-sheet__panel {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	max-height: 76vh;
	overflow-y: auto;
	background: var(--rinka-surface, #fffdfd);
	border-radius: 20px 20px 0 0;
	padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px));
	transform: translateY(100%);
	transition: transform 0.22s ease;
	box-shadow: 0 -8px 30px rgba(120, 70, 95, 0.18);
}
.rinka-nav-sheet.is-open .rinka-nav-sheet__backdrop { opacity: 1; }
.rinka-nav-sheet.is-open .rinka-nav-sheet__panel { transform: translateY(0); }
.rinka-nav-sheet__head {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: 6px;
}
.rinka-nav-sheet__title { font-weight: 900; color: var(--rinka-ink, #4a3540); }
.rinka-nav-sheet__close {
	border: none;
	background: var(--rinka-surface-soft, #fdf1f6);
	color: var(--rinka-ink-soft, #8a7580);
	width: 44px; height: 44px;
	border-radius: 50%;
	font-size: 1rem;
	cursor: pointer;
}
.rinka-nav-sheet__group {
	margin: 12px 0 6px;
	font-size: 0.78rem;
	font-weight: 900;
	color: var(--rinka-ink-soft, #8a7580);
}
.rinka-nav-sheet__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.rinka-nav-sheet__item {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	min-height: 60px;
	padding: 9px 2px 7px;
	background: var(--rinka-surface-soft, #fdf1f6);
	border: 1px solid var(--rinka-border, #f3dce6);
	border-radius: 14px;
	text-decoration: none;
	color: var(--rinka-ink, #4a3540);
	font-size: 0.66rem;
	font-weight: 700;
	text-align: center;
	line-height: 1.3;
}
.rinka-nav-sheet__item > span:first-child { font-size: 1.25rem; }
@media (max-width: 359px) {
	.rinka-nav-sheet__grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============ 3. 「つぎはこれであそぼ？」コンパクト回遊ブロック ============ */

.rinka-fs-next {
	margin: 26px 0 8px;
	padding: 16px 16px 12px;
	background: var(--rinka-surface-soft, #fdf1f6);
	border: 1px dashed var(--rinka-border, #f3dce6);
	border-radius: var(--rinka-radius, 16px);
}
.rinka-fs-next__title {
	margin: 0 0 10px;
	font-size: 1rem;
	font-weight: 900;
	color: var(--rinka-ink, #4a3540);
}
.rinka-fs-nav--next {
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	margin: 0;
}
.rinka-fs-nav--next .rinka-fs-nav__card { padding: 13px 8px 11px; }
.rinka-fs-nav--next .rinka-fs-nav__sub { display: none; } /* コンパクト版は説明を省略 */
.rinka-fs-next__all {
	margin: 10px 0 0;
	text-align: right;
	font-size: 0.85rem;
}
.rinka-fs-next__all a {
	color: var(--rinka-accent-strong, #d16a97);
	text-decoration: none;
	font-weight: 700;
}
.rinka-fs-next__all a:hover { text-decoration: underline; }
.rinka-fs-next__all--row {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 4px 8px;
}
.rinka-fs-next__sep {
	color: var(--rinka-accent-strong, #d16a97);
	opacity: 0.45;
	font-weight: 700;
}
@media (max-width: 480px) {
	.rinka-fs-nav--next { grid-template-columns: repeat(3, 1fr); gap: 8px; }
	.rinka-fs-nav--next .rinka-fs-nav__card { padding: 10px 4px 9px; }
	.rinka-fs-nav--next .rinka-fs-nav__title { font-size: 0.72rem; }
}
/* 眠っているコーナーへの日替わり回遊枠（2026-07-16）。「✨きょうのおすすめ」ピル付きで1枠だけ目立たせる */
.rinka-fs-nav__card--spot {
	border: 1.5px solid var(--rinka-accent-strong, #d16a97);
	background: linear-gradient(180deg, #fff 0%, var(--rinka-surface-soft, #fdf1f6) 100%);
	overflow: visible;
}
.rinka-fs-nav__spot {
	position: absolute;
	top: -9px;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 0.62rem;
	font-weight: 900;
	line-height: 1;
	padding: 4px 8px;
	border-radius: 999px;
	color: #fff;
	background: var(--rinka-accent-strong, #d16a97);
	box-shadow: 0 2px 6px rgba(209, 106, 151, 0.35);
}

/* りんかマニア：ゲームごとの解放スロット（2026-07-19・実カード/ミステリータイルを排他表示。display:contentsでgridの直接子扱いのまま維持） */
.rinka-mania-slot { display: contents; }
/* .rinka-fs-nav__card { display:flex } が同じ詳細度でHTML標準の[hidden]（UAスタイルのdisplay:none）に勝ってしまい、
   hidden属性を付けても実カードが消えず「解放済み/未解放タイルが両方出る」不具合の真因だった。明示的に上書きする。 */
.rinka-mania-slot__real[hidden],
.rinka-mania-slot__mystery[hidden] { display: none !important; }

/* りんかマニアのミステリータイル（未解放時の伏せ表示。2026-07-19・rinka-mania-gate.js が表示切替） */
.rinka-fs-nav__card--mystery {
	border: 1px dashed var(--rinka-border-strong, rgba(209, 106, 151, .35));
	background: var(--rinka-surface-soft, #fdf1f6);
	cursor: default;
}
.rinka-fs-nav__card--mystery .rinka-fs-nav__emoji,
.rinka-fs-nav__card--mystery .rinka-fs-nav__title,
.rinka-fs-nav__card--mystery .rinka-fs-nav__desc {
	opacity: .55;
}
.rinka-fs-nav__mysterynote {
	margin: 10px 2px 0;
	font-size: .78rem;
	color: var(--rinka-text-muted, #8a7a83);
	text-align: center;
}

/* ============ 4. ホーム: あいさつ ============ */

.rinka-home-greet {
	margin: 0 0 14px;
	padding: 12px 16px;
	background: linear-gradient(135deg, #fdf1f6, #f4f6fd); /* ピンク→うす青の透明感 */
	border: 1px solid var(--rinka-border, #f3dce6);
	border-radius: var(--rinka-radius, 16px);
}
.rinka-home-greet__main {
	margin: 0;
	font-weight: 800;
	color: var(--rinka-ink, #4a3540);
	line-height: 1.7;
}
.rinka-home-greet__back {
	margin: 6px 0 0;
	font-size: 0.88rem;
	color: var(--rinka-accent-strong, #d16a97); /* ピンク = りんか・なかよし */
	font-weight: 700;
}

/* ============ 5. ホーム: 今日やること ============ */

.rinka-home-tasks { margin: 10px 0 4px; }
.rinka-home-tasks__meter {
	margin: 0 0 8px;
	font-size: 0.9rem;
	color: var(--rinka-ink-soft, #8a7580);
}
.rinka-home-tasks__meter strong {
	color: #4f9e6b; /* 緑 = 完了 */
	font-size: 1.1rem;
}
.rinka-home-tasks__list {
	display: flex; flex-direction: column; gap: 8px;
}
.rinka-home-task {
	display: flex; align-items: center; gap: 10px;
	min-height: 48px;
	padding: 9px 14px;
	background: var(--rinka-surface, #fffdfd);
	border: 1px solid var(--rinka-border, #f3dce6);
	border-radius: 14px;
	text-decoration: none;
	color: var(--rinka-ink, #4a3540);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
a.rinka-home-task:hover {
	transform: translateY(-1px);
	box-shadow: var(--rinka-shadow, 0 4px 14px rgba(214, 143, 177, 0.14));
}
.rinka-home-task.is-done {
	background: #f2faf4; /* 緑 = 完了（やわらかく） */
	border-color: #d4ecdb;
	color: var(--rinka-ink-soft, #8a7580);
}
.rinka-home-task__state { font-size: 1rem; }
.rinka-home-task__emoji { font-size: 1.15rem; }
/* 日課アイコンのSVG化（2026-07-18 追記のみ・🐰は絵文字のまま） */
.rinka-home-task__emoji { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; }
.rinka-home-task__emoji .rds-icon { display: block; color: var(--rinka-accent-strong, #d16a97); }
.rinka-home-task.is-done .rinka-home-task__emoji .rds-icon { color: #4f9e6b; }
.rinka-home-task__title { flex: 1 1 auto; font-weight: 700; font-size: 0.92rem; }
.rinka-home-task__cta {
	font-size: 0.8rem;
	font-weight: 800;
	color: var(--rinka-accent-strong, #d16a97);
	white-space: nowrap;
}
.rinka-home-task.is-done .rinka-home-task__cta { color: #4f9e6b; }

/* ---- 達成演出のふきだし（りんかがひとことしゃべる・rinka-home.js が制御） ---- */
.rinka-home-fanfare {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 12px;
	padding: 10px 16px;
	background: linear-gradient(135deg, #fff4fa 0%, #fdeaf3 100%);
	border: 1px solid var(--rinka-border, #f3dce6);
	border-radius: 16px;
	box-shadow: 0 6px 18px rgba(214, 143, 177, 0.18);
	color: var(--rinka-ink, #4a3540);
	/* 既定は隠す。is-show で下からふわっと出す */
	opacity: 0;
	transform: translateY(6px) scale(0.98);
	max-height: 0;
	overflow: hidden;
	padding-top: 0; padding-bottom: 0;
	margin-bottom: 0;
	transition: opacity 0.28s ease, transform 0.28s ease,
		max-height 0.28s ease, padding 0.28s ease, margin 0.28s ease;
}
.rinka-home-fanfare.is-show {
	opacity: 1;
	transform: translateY(0) scale(1);
	max-height: 160px;
	padding-top: 10px; padding-bottom: 10px;
	margin-bottom: 12px;
}
.rinka-home-fanfare__face { font-size: 1.4rem; flex: 0 0 auto; }
.rinka-home-fanfare__text {
	flex: 1 1 auto;
	font-weight: 800;
	font-size: 0.98rem;
	line-height: 1.5;
}
.rinka-home-fanfare.is-grand {
	background: linear-gradient(135deg, #fff2c8 0%, #ffe1f0 55%, #e7dcff 100%);
	border-color: #f4d38a;
	box-shadow: 0 10px 28px rgba(224, 170, 120, 0.28);
}
.rinka-home-fanfare.is-grand .rinka-home-fanfare__text {
	font-size: 1.06rem;
}
.rinka-home-fanfare__voice-btn {
	flex: 0 0 auto;
	width: 32px; height: 32px;
	border: none; border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 2px 8px rgba(214, 143, 177, 0.28);
	font-size: 1rem; line-height: 1;
	cursor: pointer;
	animation: rinka-home-voicebtn-pulse 1.4s ease-in-out infinite;
}
.rinka-home-fanfare__voice-btn:hover,
.rinka-home-fanfare__voice-btn:focus-visible { background: #fff; }
@keyframes rinka-home-voicebtn-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
	.rinka-home-fanfare__voice-btn { animation: none; }
	.rinka-home-fanfare { transition: opacity 0.2s ease; transform: none; }
	.rinka-home-fanfare.is-show { transform: none; }
}

/* ============ 6. ホーム: 続きから遊ぶ／新しく解放 ============ */

.rinka-home-resume {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
	margin: 12px 0 4px;
}
.rinka-home-resume__item {
	display: flex; align-items: center; gap: 10px;
	min-height: 56px;
	padding: 11px 14px;
	background: var(--rinka-surface, #fffdfd);
	border: 1px solid #dbe4f5; /* 青 = 続き・情報 */
	border-left: 4px solid #9db8e8;
	border-radius: 14px;
	text-decoration: none;
	color: var(--rinka-ink, #4a3540);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rinka-home-resume__item:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(140, 165, 215, 0.18);
}
.rinka-home-resume__emoji { font-size: 1.4rem; }
.rinka-home-resume__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rinka-home-resume__text { font-weight: 700; font-size: 0.88rem; line-height: 1.5; }
.rinka-home-resume__cta { font-size: 0.78rem; font-weight: 800; color: #5f7fc0; }

.rinka-home-new {
	display: flex; flex-direction: column; gap: 8px;
	margin: 12px 0 4px;
}
.rinka-home-new__item {
	display: block;
	padding: 11px 14px;
	background: #f7f3fb; /* 紫 = 新解放・シークレット */
	border: 1px solid #e6dcf2;
	border-left: 4px solid #b79ad6;
	border-radius: 14px;
	text-decoration: none;
	color: var(--rinka-ink, #4a3540);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.6;
}
.rinka-home-new__item:hover { box-shadow: 0 4px 14px rgba(160, 130, 200, 0.16); }

/* ============ 7. ホーム: ヒーローのコンパクト化・応援まとめ ============ */

.rinka-fansite-page .rinka-hero,
.home .rinka-hero {
	padding-top: clamp(18px, 4vw, 30px);
	padding-bottom: clamp(16px, 3.5vw, 26px);
}
.rinka-hero__title { font-size: clamp(1.35rem, 4.6vw, 2rem); }

/* ============ 8. セーブお引っ越し ============ */

.rinka-save__card {
	margin: 20px 0;
	padding: 18px 18px 14px;
	background: var(--rinka-surface, #fffdfd);
	border: 1px solid var(--rinka-border, #f3dce6);
	border-radius: var(--rinka-radius, 16px);
	box-shadow: var(--rinka-shadow, 0 4px 14px rgba(214, 143, 177, 0.1));
}
.rinka-save__title { margin: 0 0 8px; font-size: 1.05rem; color: var(--rinka-ink, #4a3540); }
.rinka-save__lead {
	margin: 0 0 12px;
	font-size: 0.88rem;
	line-height: 1.9;
	color: var(--rinka-ink-soft, #8a7580);
}
.rinka-save__row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; }
.rinka-save__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 4px;
	min-height: 44px;
	padding: 9px 16px;
	background: var(--rinka-surface-soft, #fdf1f6);
	border: 1px solid var(--rinka-border, #f3dce6);
	border-radius: 999px;
	color: var(--rinka-ink, #4a3540);
	font-size: 0.86rem;
	font-weight: 800;
	cursor: pointer;
	text-decoration: none;
}
.rinka-save__btn:hover { border-color: var(--rinka-accent, #f5b5cd); }
.rinka-save__btn--primary {
	background: var(--rinka-accent, #f5b5cd);
	border-color: var(--rinka-accent, #f5b5cd);
	color: #fff;
}
.rinka-save__btn--file { cursor: pointer; }
.rinka-save__btn--danger {
	background: #fdf2f2; /* 赤はエラー・危険操作のみ */
	border-color: #f0c9c9;
	color: #b04a4a;
}
.rinka-save__paste { margin: 4px 0 8px; }
.rinka-save__paste textarea {
	width: 100%;
	border: 1px solid var(--rinka-border, #f3dce6);
	border-radius: 10px;
	padding: 8px 10px;
	font-size: 0.8rem;
	margin-bottom: 6px;
}
.rinka-save__status { margin: 4px 0 8px; font-size: 0.86rem; min-height: 1.4em; color: var(--rinka-ink-soft, #8a7580); }
.rinka-save__status.is-ok { color: #4f9e6b; }
.rinka-save__status.is-err { color: #b04a4a; }
.rinka-save__danger { margin-top: 8px; font-size: 0.84rem; color: var(--rinka-ink-soft, #8a7580); }
.rinka-save__danger summary { cursor: pointer; font-weight: 700; }
.rinka-save__danger p { margin: 8px 0; line-height: 1.8; }

/* ============ 9. モバイル微調整（320〜430px・横スクロール禁止） ============ */

@media (max-width: 430px) {
	.rinka-home-resume { grid-template-columns: 1fr; }
	.rinka-home-task__title { font-size: 0.86rem; }
	.rinka-save__row { flex-direction: column; }
	.rinka-save__btn { width: 100%; }
}

/* ============================================================
 * きずなランク・郵便箱・かけら交換所・おみくじ履歴（rinka-bond.js / fansite.js）
 * 色の役割: ピンク=りんか/きずな・紫=手紙(シークレット系)・オレンジ=交換所(報酬)・赤なし
 * ========================================================== */

/* ---- きずなランク（ピンク） ---- */
.rinka-bond-rank__card {
	background: var(--rinka-surface, #fff);
	border: 1px solid var(--rinka-border, #f3d9e4);
	border-left: 4px solid var(--rinka-pink, #e88aa8);
	border-radius: 14px;
	padding: 16px;
}
.rinka-bond-rank__now {
	margin: 0 0 8px;
	font-size: 1.15rem;
}
.rinka-bond-rank__emoji { font-size: 1.5rem; margin-right: 6px; }
.rinka-bond-steps {
	display: flex;
	gap: 6px;
	margin: 0 0 10px;
}
.rinka-bond-step {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--rinka-bg-soft, #faf4f7);
	border: 1px solid var(--rinka-border, #f3d9e4);
	filter: grayscale(1); opacity: .45;
	font-size: 1rem;
}
.rinka-bond-step.is-on { filter: none; opacity: 1; background: #fdeef4; border-color: var(--rinka-pink, #e88aa8); }
.rinka-bond-bar {
	height: 10px;
	border-radius: 999px;
	background: var(--rinka-bg-soft, #f6e9ef);
	overflow: hidden;
	margin: 4px 0 6px;
}
.rinka-bond-bar__fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #f5b8cd, var(--rinka-pink, #e88aa8));
	transition: width .4s ease;
}
.rinka-bond-rank__next { margin: 0 0 8px; font-size: .9rem; color: var(--rinka-text-soft, #8a6b78); }
.rinka-bond-rank__hint { margin: 0; font-size: .82rem; color: var(--rinka-text-soft, #8a6b78); }

/* トップのあいさつ内チップ */
.rinka-bond-chip {
	margin: 8px 0 0;
	display: inline-block;
	font-size: .85rem;
	background: #fdeef4;
	border: 1px solid var(--rinka-border, #f3d9e4);
	border-radius: 999px;
	padding: 4px 12px;
	color: var(--rinka-text, #5a4450);
}
.rinka-bond-chip__title { color: var(--rinka-pink, #d06a8e); font-weight: 600; }

/* ---- 郵便箱（紫） ---- */
.rinka-mail-lead { margin: 0 0 10px; font-size: .9rem; color: var(--rinka-text-soft, #8a6b78); }
.rinka-mail-badge {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 22px; height: 22px;
	border-radius: 999px;
	background: #ff9d3d;
	color: #fff;
	font-size: .75rem;
	padding: 0 6px;
	vertical-align: middle;
}
.rinka-mail-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 8px;
}
.rinka-mail-item {
	display: flex; align-items: center; gap: 8px;
	min-height: 44px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--rinka-surface, #fff);
	border: 1px solid #e2d4ef;
	border-left: 4px solid #b79ad6;
	font: inherit; font-size: .9rem;
	color: var(--rinka-text, #5a4450);
	text-align: left;
	cursor: pointer;
}
.rinka-mail-item:hover { background: #f8f3fc; }
.rinka-mail-item.is-read { opacity: .75; }
.rinka-mail-item.is-locked {
	cursor: default;
	opacity: .6;
	flex-wrap: wrap;
	border-left-color: #cfc4dc;
	background: var(--rinka-bg-soft, #f8f5fb);
}
.rinka-mail-item__emoji { font-size: 1.2rem; }
.rinka-mail-item__title { flex: 1; }
.rinka-mail-item__new {
	background: #ff9d3d; color: #fff;
	font-size: .68rem; font-weight: 700;
	border-radius: 999px; padding: 2px 8px;
}
.rinka-mail-item__cond { width: 100%; font-size: .75rem; color: var(--rinka-text-soft, #8a6b78); }
.rinka-mail-open { margin-top: 12px; }
.rinka-mail-paper {
	background: #fdfbff;
	border: 1px solid #e2d4ef;
	border-radius: 14px;
	padding: 18px 16px;
	box-shadow: 0 2px 10px rgba(150, 120, 190, .08);
}
.rinka-mail-paper p { margin: 0 0 10px; font-size: .92rem; line-height: 1.9; }
.rinka-mail-paper__title { font-weight: 700; font-size: 1rem; }
.rinka-mail-paper__sign { margin-bottom: 0; text-align: right; color: #9a7fbb; }

/* ---- かけら交換所（オレンジ=報酬） ---- */
.rinka-ex-balance { margin: 0 0 4px; font-size: 1rem; }
.rinka-ex-balance strong { color: #d97b1f; }
.rinka-ex-lead { margin: 0 0 12px; font-size: .82rem; color: var(--rinka-text-soft, #8a6b78); }
.rinka-ex-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 10px;
}
.rinka-ex-item {
	display: flex; flex-direction: column; gap: 6px;
	padding: 14px 12px;
	border-radius: 12px;
	background: var(--rinka-surface, #fff);
	border: 1px solid #f2ddc7;
	border-top: 3px solid #f0a75a;
}
.rinka-ex-item.is-owned { border-top-color: #7cbf8e; }
.rinka-ex-item__emoji { font-size: 1.5rem; }
/* 生成イラストが置かれた交換所アイテム（絵文字の代わりに角丸サムネで表示・2026-07-12） */
.rinka-ex-item__emoji--img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: #fbf1e6;
	border: 1px solid #f2ddc7;
}
.rinka-ex-item__emoji--img img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.rinka-ex-item__name { font-weight: 700; font-size: .92rem; }
.rinka-ex-item__desc { font-size: .78rem; color: var(--rinka-text-soft, #8a6b78); flex: 1; }
.rinka-ex-btn {
	min-height: 44px;
	border-radius: 999px;
	border: 1px solid #f0a75a;
	background: #fff6ec;
	color: #b3641a;
	font: inherit; font-size: .85rem; font-weight: 600;
	cursor: pointer;
	padding: 8px 12px;
}
.rinka-ex-btn:hover:not(:disabled) { background: #ffe9d2; }
.rinka-ex-btn:disabled { opacity: .5; cursor: default; }
.rinka-ex-btn.is-owned { border-color: #cbb5e2; background: #f8f3fc; color: #7a5da0; }
.rinka-ex-btn.is-equipped { border-color: #7cbf8e; background: #eef8f0; color: #3c7a4f; }
.rinka-ex-owned { min-height: 44px; display: inline-flex; align-items: center; font-size: .85rem; color: #3c7a4f; }
.rinka-ex-message {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #fff6ec;
	border: 1px solid #f2ddc7;
	font-size: .9rem;
	line-height: 1.8;
}

/* ---- おみくじ履歴 ---- */
.rinka-fs-omikuji__history {
	max-width: 480px;
	margin: 18px auto 0;
	background: var(--rinka-surface, #fff);
	border: 1px solid var(--rinka-border, #f3d9e4);
	border-radius: 14px;
	padding: 14px 16px;
}
.rinka-fs-omikuji__history-title { margin: 0 0 8px; font-weight: 700; font-size: .92rem; }
.rinka-fs-omikuji__history-list { list-style: none; margin: 0; padding: 0; }
.rinka-fs-omikuji__history-list li {
	display: flex; gap: 10px; align-items: baseline;
	padding: 5px 0;
	border-bottom: 1px dashed var(--rinka-border, #f3d9e4);
	font-size: .88rem;
}
.rinka-fs-omikuji__history-list li:last-child { border-bottom: 0; }
.rinka-fs-omikuji__history-date { color: var(--rinka-text-soft, #8a6b78); font-size: .78rem; }

/* ---- モバイル ---- */
@media (max-width: 430px) {
	.rinka-mail-list, .rinka-ex-grid { grid-template-columns: 1fr 1fr; }
	.rinka-bond-step { width: 30px; height: 30px; }
}
@media (max-width: 340px) {
	.rinka-mail-list, .rinka-ex-grid { grid-template-columns: 1fr; }
}

/* ---- 季節イベントチップ（青=お知らせ/情報） ---- */
.rinka-season-chip {
	margin: 8px 0 0;
	display: inline-block;
	font-size: .85rem;
	background: #eef5fc;
	border: 1px solid #cfe0f2;
	border-radius: 999px;
	padding: 4px 12px;
	color: #3f5b76;
	line-height: 1.7;
}

/* ---- きずなランクアップのお祝いトースト（ピンク・自動で消える） ---- */
.rinka-bond-toast {
	position: fixed;
	left: 50%;
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	transform: translate(-50%, 12px);
	background: #fdeef4;
	border: 1px solid var(--rinka-pink, #e88aa8);
	color: #5a4450;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: .9rem;
	box-shadow: 0 4px 16px rgba(230, 130, 165, .25);
	opacity: 0;
	transition: opacity .35s ease, transform .35s ease;
	z-index: 9999;
	max-width: min(92vw, 480px);
	text-align: center;
}
.rinka-bond-toast.is-show { opacity: 1; transform: translate(-50%, 0); }

/* きずなチップ内のかけら残高（オレンジ=報酬系） */
.rinka-bond-chip__coins {
	margin-left: 8px;
	color: #b3641a;
	font-weight: 600;
}

/* ============================================================
 * トップページ再整理（2026-07）
 * はじめての方カード / 状態チップ / 手紙5行クランプ / 続きから遊ぶ上限
 * ============================================================ */

/* ---- はじめての方カード（旧ヒーローのコンパクト版・✕で閉じられる） ---- */
.rinka-home-welcome__card {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 22px 20px;
	border-radius: 18px;
	background: linear-gradient(135deg, #fdf2f7 0%, #f7f0fc 100%);
	border: 1px solid var(--rinka-border, #f3d9e4);
	text-align: center;
}
.rinka-home-welcome__title {
	margin: 4px 0 8px;
	font-size: 1.25rem;
}
.rinka-home-welcome__lead {
	margin: 0 0 14px;
	font-size: .9rem;
	line-height: 1.9;
	color: var(--rinka-text-soft, #8a6b78);
}
.rinka-home-welcome__buttons {
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.rinka-home-welcome__close {
	position: absolute;
	top: 8px; right: 8px;
	width: 44px; height: 44px;
	border: 0; background: transparent;
	border-radius: 50%;
	font-size: 1rem;
	color: var(--rinka-text-soft, #8a6b78);
	cursor: pointer;
}
.rinka-home-welcome__close:hover { background: rgba(230, 130, 165, .12); }

/* ---- メインゲームカードの状態チップ（文字で区別・色は補助） ---- */
.rinka-fs-nav__card { position: relative; }
.rinka-home-chip {
	position: absolute;
	top: 8px; right: 8px;
	font-size: .68rem;
	font-weight: 700;
	border-radius: 999px;
	padding: 3px 9px;
	line-height: 1.5;
	pointer-events: none;
}
.rinka-home-chip--new  { background: #fdeef4; border: 1px solid #e88aa8; color: #b04a72; }
.rinka-home-chip--wait { background: #eef5fc; border: 1px solid #cfe0f2; color: #3f5b76; }
.rinka-home-chip--done { background: #eef8f0; border: 1px solid #a8d8b5; color: #3c7a4f; }

/* ---- 今日のりんか: 手紙は5行まで（続きは「今日のりんかページ」1本に統一） ---- */
.rinka-daily-hero__letter-text {
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#rinka-daily-letter-more { display: none !important; }

/* ---- 続きから遊ぶ: すべて見るリンク＋スマホは2件まで ---- */
.rinka-home-resume__more {
	display: block;
	text-align: center;
	font-size: .85rem;
	padding: 10px;
	color: var(--rinka-text-soft, #8a6b78);
	text-decoration: none;
}
.rinka-home-resume__more:hover { text-decoration: underline; }
@media (max-width: 600px) {
	.rinka-home-resume .rinka-home-resume__item:nth-child(n+3) { display: none; }
}

/* ---- 動きをひかえめに（OS設定を尊重） ---- */
@media (prefers-reduced-motion: reduce) {
	.rinka-home-welcome__card,
	.rinka-home-chip,
	.rinka-home-resume__item,
	.rinka-bond-toast {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================================
 * 交換所拡張（2026-07）: ホーム背景きせかえ・あいさつ特別版・限定イラスト
 * ========================================================== */

/* ---- ホーム背景きせかえ（交換所 type:'bg' / rinka-bond.js が body に付与） ---- */
body.rinka-home-bg--sakura {
	background: linear-gradient(180deg, #fff5f9 0%, #ffeaf3 40%, #fff 100%) fixed;
}
body.rinka-home-bg--yozora {
	background: linear-gradient(180deg, #edf1fb 0%, #e4e9f7 40%, #fdfdff 100%) fixed;
}

/* ---- あいさつ特別バージョン（交換所 type:'greet'） ---- */
.rinka-greeting-special {
	margin: 6px 0 0;
	padding: 8px 12px;
	border-radius: 12px;
	background: linear-gradient(90deg, #fdeef4, #f5edfc);
	border: 1px solid #f0d3e0;
	font-size: .88rem;
	color: var(--rinka-text, #5a4652);
}

/* ---- 限定イラスト レア枠（うっすら見えるティザー → 交換で開封） ---- */
.rinka-ex-rare {
	margin-top: 18px;
	padding: 14px;
	border-radius: 14px;
	border: 1px solid #e8d3f0;
	background: linear-gradient(180deg, #faf3fd, #fdf6fa);
	text-align: center;
}
.rinka-ex-rare__head {
	margin: 0 0 10px;
	font-weight: 700;
	font-size: .95rem;
	color: var(--rinka-text, #5a4652);
}
.rinka-ex-rare__teaser {
	position: relative;
	display: inline-block;
	max-width: 260px;
	border-radius: 12px;
	overflow: hidden;
	background: #2a2230;
}
.rinka-ex-rare__teaser img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	/* 加工して暗く・うっすら見える程度に（原本はサーバーからは同URL＝交換後にはっきり表示） */
	filter: brightness(.25) blur(5px) saturate(.7);
	transform: scale(1.04); /* blurの縁のにじみを隠す */
}
/* 交換前は本物のイラストをDOMに出さない＝集めるまで絶対に見られない・保存できない（2026-07-12） */
.rinka-ex-rare__teaser--locked {
	width: 200px;
	max-width: 66vw;
	aspect-ratio: 3 / 4;
	background:
		radial-gradient(120% 90% at 50% 18%, rgba(200, 162, 74, .28), transparent 60%),
		linear-gradient(160deg, #3a2f45 0%, #241d2c 55%, #2a2230 100%);
	box-shadow: inset 0 0 40px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(200, 162, 74, .18);
}
.rinka-ex-rare__q {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: rgba(255, 255, 255, .85);
	text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
	pointer-events: none;
}
.rinka-ex-rare__desc {
	margin: 10px auto 12px;
	max-width: 420px;
	font-size: .85rem;
	color: var(--rinka-text-soft, #8a6b78);
}
.rinka-ex-rare__btn { min-width: 180px; }

/* ---- 開封演出: 光って回って、加工前のイラストが登場 ---- */
.rinka-ex-rare-reveal { text-align: center; }
.rinka-ex-rare-reveal__title {
	margin: 0 0 10px;
	font-weight: 700;
	color: var(--rinka-text, #5a4652);
}
.rinka-ex-rare-reveal__img {
	display: inline-block;
	max-width: min(320px, 90%);
	height: auto;
	border-radius: 12px;
	animation: rinka-rare-reveal 1.6s ease-out both;
	box-shadow: 0 0 24px rgba(240, 170, 210, .9), 0 0 60px rgba(200, 150, 240, .5);
}
@keyframes rinka-rare-reveal {
	0%   { transform: rotate(-360deg) scale(.2); opacity: 0; filter: brightness(3); }
	60%  { transform: rotate(0deg) scale(1.06); opacity: 1; filter: brightness(1.6); }
	100% { transform: rotate(0deg) scale(1); opacity: 1; filter: brightness(1); }
}
.rinka-ex-rare-reveal__msg {
	margin: 10px 0 4px;
	font-size: .9rem;
	color: var(--rinka-text, #5a4652);
}
.rinka-ex-rare-reveal__save { margin: 6px 0 0; font-size: .9rem; }

/* ---- てにいれた限定イラスト（自分のコレクション表示） ---- */
.rinka-ex-rare-owns { margin-top: 16px; text-align: center; }
.rinka-ex-rare-owns__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.rinka-ex-rare-own {
	margin: 0;
	max-width: 180px;
}
.rinka-ex-rare-own img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(90, 70, 82, .18);
}
.rinka-ex-rare-own figcaption {
	margin-top: 4px;
	font-size: .78rem;
	color: var(--rinka-text-soft, #8a6b78);
}
/* レア度バッジ（SSR以上・2026-07-12 #34） */
.rinka-ex-rare-own__rar {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 900;
	color: #7a5200;
	background: linear-gradient(135deg, #ffe9a8, #ffd76b);
}

@media (prefers-reduced-motion: reduce) {
	.rinka-ex-rare-reveal__img {
		animation: none !important;
	}
}

/* ============================================================
 * 🔥 明日また来る理由（rinka-revisit.js・トップ最上部フック・2026-07-16 提案 #3/#4/#6）
 *   ・来てすぐ遊べる 1タップガチャ／連続ログイン報酬（SECRETまであとN日）／遠征のソフト誘導
 *   ・RDS トークンにフォールバック付きで寄せつつ、既存 rinka-* 変数も尊重
 * ============================================================ */
.rinka-revisit {
	margin: 0 0 14px;
}
.rinka-revisit__inner {
	border-radius: 16px;
	padding: 14px 16px;
	background: linear-gradient(135deg, #fff4f9 0%, #fdeaf3 55%, #f3e9ff 100%);
	border: 1px solid var(--rinka-line, #f0d6e4);
	box-shadow: 0 4px 18px rgba(150, 90, 120, .12);
}
.rinka-revisit__main {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.rinka-revisit__emoji {
	font-size: 1.7rem;
	line-height: 1;
	flex: 0 0 auto;
}
.rinka-revisit__text {
	flex: 1 1 180px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.rinka-revisit__headline {
	font-size: 1.02rem;
	font-weight: 900;
	color: var(--rinka-text, #5a3d4c);
	line-height: 1.35;
}
.rinka-revisit__sub {
	font-size: .82rem;
	color: var(--rinka-text-soft, #8a6b78);
	line-height: 1.4;
}
.rinka-revisit__cta {
	flex: 0 0 auto;
	appearance: none;
	border: 0;
	cursor: pointer;
	text-decoration: none;
	font-weight: 900;
	font-size: .95rem;
	color: #fff;
	padding: 11px 18px;
	border-radius: 999px;
	background: linear-gradient(135deg, #ff8fbf, #ff6fa6);
	box-shadow: 0 4px 14px rgba(255, 111, 166, .38);
	transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
	white-space: nowrap;
}
.rinka-revisit__cta:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(255, 111, 166, .48);
	filter: brightness(1.03);
}
.rinka-revisit__cta:active {
	transform: translateY(0);
}
.rinka-revisit__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}
.rinka-revisit__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .78rem;
	line-height: 1.3;
	padding: 6px 11px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--rinka-line, #f0d6e4);
	color: var(--rinka-text, #5a3d4c);
	text-decoration: none;
}
.rinka-revisit__chip b {
	color: #d5477e;
	font-weight: 900;
}
.rinka-revisit__chip--exp,
a.rinka-revisit__chip--exp {
	background: rgba(255, 255, 255, .9);
	transition: transform .12s ease, box-shadow .12s ease;
}
.rinka-revisit__chip--exp:hover {
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(150, 90, 120, .18);
}
.rinka-revisit__chip--tomorrow {
	background: linear-gradient(135deg, #fff7dd, #ffeec0);
	border-color: #f4dfa0;
}
@media (max-width: 480px) {
	.rinka-revisit__cta {
		width: 100%;
		text-align: center;
	}
	.rinka-revisit__text {
		flex-basis: 60%;
	}
}

/* ── あつめ→継続の案内（#5・2026-07-16）。芽吹きの緑アクセントで「つづけると増える」を表現 ── */
.rinka-home-nextstep {
	margin: 4px 0 14px;
	padding: 12px 14px 6px;
	background: linear-gradient(180deg, rgba(230, 248, 235, 0.55), rgba(255, 253, 253, 0.9));
	border: 1px solid #cfe9d8;
	border-radius: 16px;
}
.rinka-home-nextstep__lead {
	margin: 0 0 8px;
	font-weight: 800;
	font-size: 0.92rem;
	color: var(--rinka-ink, #3f5c48);
}
.rinka-home-nextstep__items {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.rinka-home-nextstep__item {
	display: flex; align-items: center; gap: 10px;
	min-height: 52px;
	padding: 10px 13px;
	background: var(--rinka-surface, #fffdfd);
	border: 1px solid #cfe9d8;
	border-left: 4px solid #7fc79a; /* 緑 = 成長・つづける */
	border-radius: 13px;
	text-decoration: none;
	color: var(--rinka-ink, #3f4b44);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rinka-home-nextstep__item:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(120, 190, 150, 0.2);
}
.rinka-home-nextstep__emoji { font-size: 1.35rem; }
.rinka-home-nextstep__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rinka-home-nextstep__text { font-weight: 700; font-size: 0.85rem; line-height: 1.5; }
.rinka-home-nextstep__cta { font-size: 0.76rem; font-weight: 800; color: #479169; }
@media (max-width: 480px) {
	.rinka-home-nextstep__items { grid-template-columns: 1fr; }
}

/* ── 💗👑 好感度・人気ランキング導線バナー（2026-07-17・AI診断対応。自前クラスのみ・既存不変更） ──
 * ヒーロー直下の2枚バナー。ピンク=なかよし系 / 金=ランキングの色役割に合わせる。 */
.rinka-feature-nav { margin: 4px 0 10px; }
.rinka-feature-nav__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.rinka-feature-nav__card {
	display: flex; align-items: center; gap: 12px;
	min-height: 64px;
	padding: 13px 16px;
	border-radius: 16px;
	text-decoration: none;
	color: var(--rinka-ink, #4a3540);
	border: 1px solid var(--rinka-border, #f3dce6);
	background: var(--rinka-surface, #fffdfd);
	box-shadow: 0 3px 12px rgba(214, 143, 177, 0.10);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.rinka-feature-nav__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px rgba(214, 143, 177, 0.22);
}
.rinka-feature-nav__card:focus-visible {
	outline: 2px solid var(--rinka-accent, #f5b5cd);
	outline-offset: 2px;
}
.rinka-feature-nav__card--affection {
	background: linear-gradient(135deg, #fff0f6, #ffe3ee);
	border-color: #f7cbdd;
}
.rinka-feature-nav__card--ranking {
	background: linear-gradient(135deg, #fff8e6, #ffefc7);
	border-color: #f1dfa8;
}
.rinka-feature-nav__emoji {
	flex: 0 0 auto;
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.82);
	font-size: 1.45rem;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}
.rinka-feature-nav__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rinka-feature-nav__title { font-weight: 900; font-size: 0.98rem; line-height: 1.3; }
.rinka-feature-nav__card--affection .rinka-feature-nav__title { color: #c2537e; }
.rinka-feature-nav__card--ranking .rinka-feature-nav__title { color: #a5761c; }
.rinka-feature-nav__desc {
	font-size: 0.78rem;
	color: var(--rinka-ink-soft, #8a7580);
	line-height: 1.45;
}
.rinka-feature-nav__arrow {
	margin-left: auto;
	flex: 0 0 auto;
	font-weight: 900;
	color: var(--rinka-accent-strong, #d16a97);
}
.rinka-feature-nav__card--ranking .rinka-feature-nav__arrow { color: #c08a2a; }
@media (max-width: 560px) {
	.rinka-feature-nav__row { grid-template-columns: 1fr; }
	.rinka-feature-nav__card { min-height: 56px; padding: 11px 14px; }
}

/* ── #35 ヒーロー直下CTA（2026-07-18 追記のみ・主役1＋補助2） ── */
.rinka-hero-cta { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px auto 6px; }
/* 🐰 りんかの一言（改善提案①・2026-07-22）: CTAの上の日替わりひとこと吹き出し */
.rinka-hero-cta__voice { margin: 0 0 2px; padding: 7px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.78); border: 1.5px dashed rgba(231, 134, 174, 0.55); color: var(--rinka-accent-strong, #c2568c); font-size: 0.9rem; font-weight: 700; text-align: center; line-height: 1.5; }
.rinka-hero-cta__main { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 14px 30px; border-radius: 999px; background: linear-gradient(135deg, #e786ae, #c2568c); color: #fff; font-weight: 800; font-size: 1.05rem; text-decoration: none; box-shadow: 0 6px 18px rgba(194, 86, 140, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.rinka-hero-cta__main:hover { transform: translateY(-2px); box-shadow: 0 9px 22px rgba(194, 86, 140, 0.45); color: #fff; }
.rinka-hero-cta__icon svg { display: block; }
.rinka-hero-cta__badge { position: absolute; top: -8px; right: -6px; background: #ffd54d; color: #7a4a00; font-size: 0.68rem; font-weight: 900; padding: 2px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); }
.rinka-hero-cta__subs { display: flex; gap: 10px; }
.rinka-hero-cta__sub { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid rgba(194, 86, 140, 0.4); color: var(--rinka-accent-strong, #c2568c); background: rgba(255, 255, 255, 0.7); font-weight: 700; font-size: 0.88rem; text-decoration: none; transition: background 0.15s ease; }
.rinka-hero-cta__sub:hover { background: rgba(231, 134, 174, 0.14); }
.rinka-hero-cta__subicon svg { display: block; }
@media (prefers-reduced-motion: reduce) {
	.rinka-hero-cta__main, .rinka-hero-cta__sub { transition: none; }
	.rinka-hero-cta__main:hover { transform: none; }
}
@media (prefers-color-scheme: dark) {
	.rinka-hero-cta__sub { background: rgba(36, 26, 34, 0.7); color: #e79ec4; border-color: rgba(231, 134, 174, 0.45); }
	.rinka-hero-cta__voice { background: rgba(36, 26, 34, 0.7); color: #e79ec4; border-color: rgba(231, 134, 174, 0.4); }
}