/* ============================================================
 * rinka-playstyle.css — 遊び方タイプ診断（/playstyle/）2026-09-26 作り直し
 * テンプレート: templates/fansite-playstyle.php ／ 動き: assets/js/rinka-playstyle.js
 * 旧スタイル（fansite.css の .rinka-fs-playstyle*）とは別名（.rwp-*）。
 * スマホ縦持ち最優先・横持ち／PC でも崩れない。押せる所は 44px 以上。prefers-reduced-motion で動きを止める。
 * ========================================================== */

.rwp, .rwp-modal {
	--rwp-ink: #4a3540;
	--rwp-sub: #76606c;
	--rwp-rose: #d9487f;
	--rwp-rose-ink: #b83a72;
	--rwp-pink: #ff8fbf;
	--rwp-lav: #b9a3ff;
	--rwp-line: #f4d9e6;
	--rwp-soft: #fff5f9;
	--rwp-grad: linear-gradient(120deg, #ff8fbf, #c9a2ff 60%, #9fd0ff);
}
.rwp {
	max-width: 720px;
	margin: 6px auto 30px;
	color: var(--rwp-ink);
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
	-webkit-tap-highlight-color: transparent;
}
.rwp *, .rwp *::before, .rwp *::after, .rwp-modal * { box-sizing: border-box; }
.rwp p, .rwp-modal p { margin: 0; }
.rwp-ico { width: 28px; height: 28px; flex: none; object-fit: contain; vertical-align: middle; }

/* ---------- ボタン ---------- */
.rwp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 50px; padding: 8px 20px;
	border-radius: 999px; border: 2px solid transparent;
	font: inherit; font-weight: 800; font-size: 1rem; line-height: 1.25;
	text-decoration: none; cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.rwp-btn .rwp-ico { width: 26px; height: 26px; }
.rwp-btn:focus-visible { outline: 3px solid #9b7bff; outline-offset: 2px; }
.rwp-btn--main { color: #fff; background: var(--rwp-grad); box-shadow: 0 6px 0 #d777a6, 0 10px 22px -8px rgba(184, 58, 114, .5); text-shadow: 0 1px 1px rgba(160, 40, 100, .35); }
.rwp-btn--main:active { transform: translateY(3px); box-shadow: 0 3px 0 #d777a6; }
.rwp-btn--ghost { color: var(--rwp-rose-ink); background: #fff; border-color: #f6c1d7; box-shadow: 0 4px 0 #f6dbe7; }
.rwp-btn--ghost:active { transform: translateY(2px); box-shadow: 0 2px 0 #f6dbe7; }

/* ---------- はじめ ---------- */
.rwp-intro {
	display: grid; justify-items: center; gap: 16px;
	padding: 22px 18px 24px;
	border-radius: 30px;
	background: linear-gradient(170deg, #fff 0%, #fff5fa 60%, #f5f0ff 100%);
	border: 1px solid var(--rwp-line);
	box-shadow: 0 12px 32px -12px rgba(184, 58, 114, .25);
	text-align: center;
}
.rwp-intro__art { position: relative; width: 190px; height: 170px; }
.rwp-intro__face {
	position: absolute; left: 50%; top: 6px; transform: translateX(-50%);
	width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
	border: 5px solid #fff; box-shadow: 0 10px 26px rgba(184, 58, 114, .25);
}
.rwp-intro__ico { position: absolute; width: 54px; height: 54px; }
.rwp-intro__ico--a { left: -4px; top: 18px; animation: rwp-float 3.2s ease-in-out infinite; }
.rwp-intro__ico--b { right: -6px; top: 4px; animation: rwp-float 3.6s ease-in-out .4s infinite; }
.rwp-intro__ico--c { right: 6px; bottom: -2px; animation: rwp-float 3s ease-in-out .8s infinite; }
@keyframes rwp-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.rwp-intro__lead { max-width: 30em; font-size: .98rem; line-height: 1.85; color: var(--rwp-ink); text-align: left; }
.rwp-intro .rwp-btn--main { min-width: 220px; min-height: 56px; font-size: 1.08rem; }

/* ---------- 結果 ---------- */
.rwp-result.is-reveal .rwp-card { animation: rwp-in .55s cubic-bezier(.34, 1.56, .64, 1) both; }
.rwp-result.is-reveal .rwp-bar__fill { animation: rwp-grow .9s cubic-bezier(.22, .8, .24, 1) .2s both; }
@keyframes rwp-in { from { opacity: 0; scale: .92; translate: 0 16px; } to { opacity: 1; scale: 1; translate: 0 0; } }
@keyframes rwp-grow { from { width: 0; } }

.rwp-result__kicker { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px !important; font-weight: 900; color: var(--rwp-rose-ink); }
.rwp-result__kicker small { font-weight: 700; color: var(--rwp-sub); font-size: .8rem; }

.rwp-card {
	position: relative;
	display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6px 14px;
	padding: 18px;
	border-radius: 30px;
	background: linear-gradient(160deg, #fff 0%, #fff4f9 55%, #f3edff 100%);
	border: 2px solid #f8cfe0;
	box-shadow: 0 16px 36px -14px rgba(184, 58, 114, .35);
	overflow: hidden;
}
.rwp-card::before {
	content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 143, 191, .22), transparent 70%); pointer-events: none;
}
.rwp-card__art { position: relative; width: 112px; height: 112px; }
.rwp-card__face { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; box-shadow: 0 8px 20px rgba(184, 58, 114, .25); display: block; }
.rwp-card__badge { position: absolute; right: -8px; bottom: -6px; width: 52px; height: 52px; filter: drop-shadow(0 3px 6px rgba(90, 58, 102, .25)); }
.rwp-card__txt { min-width: 0; }
.rwp-card__you { font-size: .82rem; font-weight: 800; color: var(--rwp-sub); }
.rwp .rwp-card__name {
	margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
	font-size: clamp(1.5rem, 6.4vw, 2rem) !important; font-weight: 900; line-height: 1.2;
	color: var(--rwp-rose);
	letter-spacing: .02em;
}
.rwp .rwp-card__name::before, .rwp .rwp-card__name::after { display: none !important; }
.rwp-card__catch { margin-top: 4px !important; font-weight: 800; font-size: .95rem; line-height: 1.5; }
.rwp-card__desc { grid-column: 1 / -1; margin-top: 8px !important; font-size: .98rem; line-height: 1.85; }
.rwp-card__meta { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 8px 0 0; }
.rwp-card__meta div { padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .8); border: 1px solid #f6d7e4; }
.rwp-card__meta dt { font-size: .74rem; font-weight: 800; color: var(--rwp-sub); }
.rwp-card__meta dd { margin: 0; font-weight: 900; color: var(--rwp-rose-ink); }

/* 根拠の棒グラフ */
.rwp-why { margin-top: 16px; padding: 16px; border-radius: 24px; background: #fff; border: 1px solid var(--rwp-line); }
.rwp .rwp-why__h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 1rem !important; font-weight: 900; color: var(--rwp-ink); }
.rwp .rwp-why__h::before, .rwp .rwp-why__h::after { display: none !important; }
.rwp-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.rwp-bar { margin: 0; }
.rwp-bar::before { display: none !important; }
.rwp-bar__head { display: flex; align-items: center; gap: 8px; }
.rwp-bar__head .rwp-ico { width: 30px; height: 30px; }
.rwp-bar__name { font-weight: 800; font-size: .95rem; }
.rwp-bar__val { margin-left: auto; font-size: 1.05rem; font-weight: 900; color: var(--rwp-rose-ink); font-variant-numeric: tabular-nums; }
.rwp-bar__track { margin-top: 4px; height: 14px; border-radius: 999px; background: #f7e6ee; overflow: hidden; }
.rwp-bar__fill { display: block; height: 100%; width: var(--v, 0%); min-width: 6px; border-radius: inherit; background: linear-gradient(90deg, #ffb3d1, #c9b3ff); }
.rwp-bar.is-top .rwp-bar__fill { background: linear-gradient(90deg, #ff6fa6, #a98bff); }
.rwp-bar.is-top .rwp-bar__name { color: var(--rwp-rose); }
.rwp-bar__ev { margin-top: 4px !important; font-size: .78rem; color: var(--rwp-sub); line-height: 1.5; }
.rwp-why__note { margin-top: 10px !important; font-size: .8rem; color: var(--rwp-sub); }

.rwp-next { margin-top: 16px; }
.rwp-next__h { display: flex; align-items: center; gap: 6px; font-weight: 900; margin-bottom: 8px !important; }
.rwp-next__links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rwp-go { padding: 8px 10px; font-size: .92rem; }

.rwp-actions { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 18px; }
.rwp-hist { margin-top: 10px !important; text-align: center; font-size: .82rem; color: var(--rwp-sub); }

/* ---------- タイプ図鑑 ---------- */
.rwp-dex { margin-top: 26px; }
.rwp .rwp-dex__h { display: flex; align-items: center; gap: 8px; margin: 0 0 12px !important; padding: 0 !important; border: 0 !important; background: none !important; font-size: 1.1rem !important; font-weight: 900; color: var(--rwp-ink); }
.rwp .rwp-dex__h::before, .rwp .rwp-dex__h::after { display: none !important; }
.rwp-dex__h .rwp-ico { width: 34px; height: 34px; }
.rwp-dex__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 10px; }
.rwp-type {
	display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start;
	margin: 0; padding: 12px 14px;
	border-radius: 20px; background: #fff; border: 1px solid var(--rwp-line);
}
.rwp-type::before { display: none !important; }
.rwp-type__face { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid #fde3ee; }
.rwp-type__txt { min-width: 0; }
.rwp-type__name { display: flex; align-items: center; gap: 6px; font-weight: 900; font-size: 1.02rem; }
.rwp-type__catch { margin-top: 2px !important; font-size: .86rem; font-weight: 700; color: var(--rwp-rose-ink); }
.rwp-type__desc { margin-top: 4px !important; font-size: .86rem; line-height: 1.75; color: var(--rwp-sub); }
.rwp-type__strong { margin-top: 6px !important; display: flex; gap: 6px; align-items: center; font-size: .8rem; font-weight: 800; }
.rwp-type__strong-l { padding: 1px 8px; border-radius: 999px; background: #ffe3ee; color: var(--rwp-rose-ink); }
.rwp-type.is-you { border: 2px solid var(--rwp-pink); background: linear-gradient(160deg, #fff, #fff2f8); box-shadow: 0 8px 20px -10px rgba(217, 72, 127, .5); }
.rwp-type.is-you .rwp-type__name::after {
	content: 'YOU'; margin-left: 4px; padding: 1px 8px; border-radius: 999px;
	background: var(--rwp-rose); color: #fff; font-size: .7rem; letter-spacing: .08em;
}
.rwp-dex__note { margin-top: 12px !important; font-size: .8rem; color: var(--rwp-sub); line-height: 1.7; }
.rwp-noscript { padding: 12px; border-radius: 14px; background: #fff7e3; }

/* ---------- シェア画像のまど ---------- */
.rwp-modal {
	position: fixed; inset: 0; z-index: 2147483000;
	display: flex; align-items: center; justify-content: center;
	padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
	background: rgba(74, 53, 64, .45);
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
}
.rwp-modal__panel { width: 100%; max-width: 420px; max-height: 100%; overflow-y: auto; padding: 14px; border-radius: 26px; background: #fff; display: grid; gap: 10px; }
.rwp-modal__img { width: 100%; height: auto; max-height: 62vh; object-fit: contain; border-radius: 16px; display: block; }
.rwp-modal__hint { text-align: center; font-size: .8rem; color: var(--rwp-sub); }
.rwp-modal__btns { display: grid; grid-template-columns: 1fr; gap: 10px; }

/* ---------- 幅があるとき ---------- */
@media (min-width: 560px) {
	.rwp-card { grid-template-columns: auto 1fr; padding: 24px; }
	.rwp-card__art, .rwp-card__face { width: 140px; height: 140px; }
	.rwp-actions { grid-template-columns: 1fr 1fr; }
	.rwp-dex__list { grid-template-columns: 1fr 1fr; }
	.rwp-modal__btns { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 820px) {
	.rwp-bars { grid-template-columns: 1fr 1fr; column-gap: 20px; }
	.rwp-next__links { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
	.rwp *, .rwp *::before, .rwp *::after { animation: none !important; transition: none !important; }
}

/* hidden 属性を display 指定より優先（2026-09-26） */
.rwt [hidden], .rwt-sheet[hidden], .rwp [hidden], .rwp-modal[hidden] { display: none !important; }