/* =====================================================================
   Fraction64 — 64人格アーキタイプ診断
   スマホ縦持ち最優先 / ダーク基調 / 六芒シジルが署名要素
   ===================================================================== */

.f64-app {
	/* ---- design tokens (sigil theme: 紫紺×月白×微金) ---- */
	--f64-bg: #0e0c18;
	--f64-bg2: #15112a;
	--f64-panel: rgba(255, 255, 255, 0.045);
	--f64-line: rgba(255, 255, 255, 0.09);
	--f64-text: #ece9f4;
	--f64-dim: #9c94bd;
	--f64-acc: #a78bfa;          /* 菫 */
	--f64-acc-soft: rgba(167, 139, 250, 0.16);
	--f64-gold: #e8c98a;         /* 微金 */
	--f64-low: #7dd3fc;          /* Lowポール側 */
	--f64-radius: 18px;
	--f64-font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", serif;
	--f64-font-body: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;

	position: relative;
	max-width: 480px;
	margin: 0 auto;
	padding: 28px 18px 40px;
	border-radius: 22px;
	background:
		radial-gradient(120% 70% at 50% 0%, rgba(167, 139, 250, 0.12), transparent 60%),
		linear-gradient(180deg, var(--f64-bg2), var(--f64-bg) 40%);
	border: 1px solid var(--f64-line);
	color: var(--f64-text);
	font-family: var(--f64-font-body);
	font-size: 15px;
	line-height: 1.85;
	overflow: hidden;
	-webkit-font-smoothing: antialiased;
}

/* ---- cyber theme (青緑×夜霧) ---- */
.f64-theme-cyber {
	--f64-bg: #071318;
	--f64-bg2: #0a1d26;
	--f64-acc: #4be3c8;
	--f64-acc-soft: rgba(75, 227, 200, 0.14);
	--f64-gold: #8be9fd;
	--f64-low: #f6a5c0;
	--f64-dim: #84a8ad;
}

.f64-app * { box-sizing: border-box; }
.f64-app p, .f64-app h2, .f64-app h3, .f64-app ul { margin: 0; padding: 0; }
.f64-app ul { list-style: none; }
.f64-app button { font-family: inherit; cursor: pointer; }
.f64-app button:focus-visible {
	outline: 2px solid var(--f64-acc);
	outline-offset: 3px;
	border-radius: 6px;
}

/* =====================================================================
   起動スピナー
   ===================================================================== */
.f64-boot { display: flex; justify-content: center; padding: 60px 0; }
.f64-boot-ring {
	width: 34px; height: 34px; border-radius: 50%;
	border: 2px solid var(--f64-line);
	border-top-color: var(--f64-acc);
	animation: f64spin 0.9s linear infinite;
}
@keyframes f64spin { to { transform: rotate(360deg); } }

/* =====================================================================
   共通パーツ
   ===================================================================== */
.f64-screen { animation: f64fade 0.45s ease both; }
@keyframes f64fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.f64-eyebrow {
	font-size: 10px;
	letter-spacing: 0.42em;
	color: var(--f64-gold);
	text-transform: uppercase;
	text-align: center;
	margin-bottom: 10px;
}

.f64-btn {
	display: inline-block;
	border: 1px solid var(--f64-line);
	background: var(--f64-panel);
	color: var(--f64-text);
	border-radius: 999px;
	padding: 12px 22px;
	font-size: 14px;
	letter-spacing: 0.08em;
	transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.f64-btn:active { transform: scale(0.97); }

.f64-btn-primary {
	width: 100%;
	border: none;
	padding: 16px 24px;
	font-size: 16px;
	font-weight: 700;
	color: #14101f;
	background: linear-gradient(135deg, var(--f64-acc), var(--f64-gold));
	box-shadow: 0 8px 28px -8px var(--f64-acc);
}
.f64-btn-ghost {
	background: transparent;
	color: var(--f64-dim);
	border-color: transparent;
	font-size: 13px;
}
.f64-btn-ghost:hover { color: var(--f64-text); }

.f64-card {
	background: var(--f64-panel);
	border: 1px solid var(--f64-line);
	border-radius: var(--f64-radius);
	padding: 20px 18px;
	margin-top: 14px;
}

.f64-h3 {
	font-family: var(--f64-font-display);
	font-size: 15px;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--f64-gold);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.f64-h3 i { font-style: normal; color: var(--f64-acc); font-size: 14px; }

.f64-body { color: var(--f64-text); font-size: 14.5px; }
.f64-note { margin-top: 18px; text-align: center; font-size: 11px; color: var(--f64-dim); }

/* =====================================================================
   STEP1: スタート画面
   ===================================================================== */
.f64-start { text-align: center; }
.f64-start-sigil { display: flex; justify-content: center; margin-bottom: 4px; }

.f64-title {
	font-family: var(--f64-font-display);
	font-weight: 800;
	font-size: 34px;
	letter-spacing: 0.14em;
	line-height: 1.25;
	background: linear-gradient(135deg, var(--f64-text) 30%, var(--f64-acc));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.f64-subtitle { margin-top: 10px; color: var(--f64-dim); font-size: 13px; }

.f64-axis-chips {
	display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
	margin: 18px 0 6px;
}
.f64-axis-chips li {
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--f64-acc);
	background: var(--f64-acc-soft);
	border: 1px solid var(--f64-line);
	border-radius: 999px;
	padding: 4px 12px;
}

.f64-meta { margin: 12px 0 20px; font-size: 12px; color: var(--f64-dim); letter-spacing: 0.06em; }
.f64-resume { margin-top: 12px; }

/* =====================================================================
   STEP2: 質問画面
   ===================================================================== */
.f64-progress { margin-bottom: 22px; }
.f64-progress-meta {
	display: flex; justify-content: space-between;
	font-size: 12px; letter-spacing: 0.1em; color: var(--f64-dim);
	margin-bottom: 6px;
}
.f64-progress-meta em { font-style: normal; opacity: 0.6; }
.f64-progress-bar {
	height: 4px; border-radius: 4px; background: var(--f64-line); overflow: hidden;
}
.f64-progress-bar span {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--f64-acc), var(--f64-gold));
	transition: width 0.35s ease;
}

.f64-qcard {
	background: var(--f64-panel);
	border: 1px solid var(--f64-line);
	border-radius: var(--f64-radius);
	padding: 30px 20px 26px;
	min-height: 280px;
	display: flex; flex-direction: column; justify-content: center;
}
.f64-slide-fwd { animation: f64fwd 0.32s ease both; }
.f64-slide-back { animation: f64back 0.32s ease both; }
@keyframes f64fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
@keyframes f64back { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }

.f64-qno {
	font-size: 10px; letter-spacing: 0.4em; color: var(--f64-acc);
	text-align: center; margin-bottom: 14px;
}
.f64-qtext {
	font-family: var(--f64-font-display);
	font-weight: 600;
	font-size: 18px;
	line-height: 2;
	text-align: center;
	min-height: 4em;
	display: flex; align-items: center; justify-content: center;
}

/* 7段階スケール: 両端が大きく中央が小さい砂時計型 */
.f64-scale {
	display: flex; align-items: center; justify-content: space-between;
	margin: 26px 4px 8px;
}
.f64-scale-btn {
	border-radius: 50%;
	border: 2px solid var(--f64-dim);
	background: transparent;
	padding: 0;
	display: flex; align-items: center; justify-content: center;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.f64-scale-btn span { display: block; width: 60%; height: 60%; border-radius: 50%; }
.f64-v1, .f64-v7 { width: 46px; height: 46px; }
.f64-v2, .f64-v6 { width: 38px; height: 38px; }
.f64-v3, .f64-v5 { width: 31px; height: 31px; }
.f64-v4         { width: 26px; height: 26px; }
.f64-v5, .f64-v6, .f64-v7 { border-color: var(--f64-acc); }
.f64-v1, .f64-v2, .f64-v3 { border-color: var(--f64-low); }
.f64-scale-btn:active { transform: scale(0.88); }
.f64-v5.is-on span, .f64-v6.is-on span, .f64-v7.is-on span { background: var(--f64-acc); box-shadow: 0 0 14px var(--f64-acc); }
.f64-v1.is-on span, .f64-v2.is-on span, .f64-v3.is-on span { background: var(--f64-low); box-shadow: 0 0 14px var(--f64-low); }
.f64-v4.is-on span { background: var(--f64-dim); }

.f64-scale-legend {
	display: flex; justify-content: space-between;
	font-size: 10px; color: var(--f64-dim); letter-spacing: 0.04em;
}

.f64-quiz-foot { margin-top: 14px; display: flex; justify-content: flex-start; }

/* =====================================================================
   STEP3: 解析演出
   ===================================================================== */
.f64-analyze { text-align: center; padding: 28px 0 12px; }
.f64-analyze-sigil { display: flex; justify-content: center; }
.f64-analyze-msg {
	margin-top: 6px;
	font-size: 13px; letter-spacing: 0.18em; color: var(--f64-acc);
	min-height: 1.6em;
	animation: f64blink 1.4s ease-in-out infinite;
}
@keyframes f64blink { 50% { opacity: 0.45; } }
.f64-analyze-bar {
	margin: 18px auto 0; max-width: 240px; height: 3px;
	background: var(--f64-line); border-radius: 3px; overflow: hidden;
}
.f64-analyze-bar span {
	display: block; height: 100%; width: 0;
	background: linear-gradient(90deg, var(--f64-acc), var(--f64-gold));
}

/* =====================================================================
   レーダー(六芒シジル)
   ===================================================================== */
.f64-radar { width: min(280px, 78vw); height: auto; }
.f64-radar-ring { fill: none; stroke: var(--f64-line); stroke-width: 1; }
.f64-radar-ring-outer { stroke: rgba(255, 255, 255, 0.18); }
.f64-radar-spoke { stroke: var(--f64-line); stroke-width: 1; }
.f64-radar-shape {
	fill: var(--f64-acc-soft);
	stroke: var(--f64-acc);
	stroke-width: 2;
	stroke-linejoin: round;
	filter: drop-shadow(0 0 10px var(--f64-acc-soft));
}
.f64-radar-label {
	fill: var(--f64-dim);
	font-size: 11px;
	font-family: var(--f64-font-body);
	letter-spacing: 0.1em;
}
.f64-radar-anim .f64-radar-shape {
	transform-origin: 50% 50%;
	animation: f64sigil 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
@keyframes f64sigil {
	from { opacity: 0; transform: scale(0.4) rotate(-18deg); }
	to   { opacity: 1; transform: none; }
}

/* =====================================================================
   STEP4: 結果画面
   ===================================================================== */
.f64-shared-banner {
	text-align: center;
	font-size: 11px;
	letter-spacing: 0.12em;
	color: var(--f64-dim);
	border: 1px dashed var(--f64-line);
	border-radius: 10px;
	padding: 8px;
	margin-bottom: 16px;
}

.f64-result-hero { text-align: center; padding: 6px 0 18px; }
.f64-glyph {
	font-size: 44px;
	line-height: 1;
	margin: 6px 0 10px;
	color: hsl(var(--f64-type-hue, 262), 78%, 74%);
	text-shadow: 0 0 26px hsla(var(--f64-type-hue, 262), 80%, 65%, 0.55);
}
.f64-type-name {
	font-family: var(--f64-font-display);
	font-weight: 800;
	font-size: 30px;
	letter-spacing: 0.08em;
	line-height: 1.4;
}
.f64-type-en {
	margin-top: 4px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.42em;
	text-indent: 0.42em;
	color: hsl(var(--f64-type-hue, 262), 70%, 72%);
}
.f64-type-code {
	margin-top: 14px;
	font-size: 10px;
	letter-spacing: 0.4em;
	text-indent: 0.4em;
	color: var(--f64-muted);
	opacity: 0.75;
}
.f64-scale-now {
	min-height: 1.6em;
	margin-top: 6px;
	text-align: center;
	font-size: 13px;
	font-weight: 700;
	color: hsl(var(--f64-type-hue, 262), 70%, 76%);
}
.f64-error {
	margin: 14px 0 4px;
	padding: 10px 14px;
	border: 1px solid rgba(255, 120, 120, 0.45);
	border-radius: 10px;
	font-size: 13px;
	line-height: 1.7;
	color: #ffb4b4;
	background: rgba(255, 80, 80, 0.08);
}
.f64-type-catch {
	margin-top: 12px;
	font-family: var(--f64-font-display);
	font-size: 14px;
	color: var(--f64-dim);
}

.f64-card-radar { display: flex; justify-content: center; }

/* ---- 軸バー ---- */
.f64-bar { margin-top: 14px; }
.f64-bar:first-of-type { margin-top: 4px; }
.f64-bar-head { display: flex; justify-content: space-between; align-items: baseline; }
.f64-bar-axis { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.f64-bar-axis em { font-style: normal; font-size: 10px; color: var(--f64-dim); letter-spacing: 0.14em; margin-left: 6px; }
.f64-bar-val { font-size: 15px; font-weight: 700; color: var(--f64-gold); font-variant-numeric: tabular-nums; }
.f64-bar-track {
	position: relative;
	margin-top: 5px;
	height: 8px; border-radius: 6px;
	background: var(--f64-line);
	overflow: hidden;
}
.f64-bar-track span {
	display: block; height: 100%;
	background: linear-gradient(90deg, var(--f64-low), var(--f64-acc));
	border-radius: 6px;
}
.f64-bar-mid {
	position: absolute; left: 50%; top: -2px; bottom: -2px;
	width: 1px; background: rgba(255, 255, 255, 0.28);
}
.f64-bar-poles {
	display: flex; justify-content: space-between;
	font-size: 10px; letter-spacing: 0.1em; color: var(--f64-dim);
	margin-top: 3px;
}
.f64-bar-poles .is-on { color: var(--f64-text); font-weight: 700; }

/* ---- チップ ---- */
.f64-chip-label { font-size: 10px; letter-spacing: 0.3em; color: var(--f64-dim); margin: 10px 0 6px; }
.f64-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.f64-chips li {
	font-size: 12px;
	border-radius: 999px;
	padding: 5px 13px;
	border: 1px solid var(--f64-line);
}
.f64-chips-s li { color: var(--f64-acc); background: var(--f64-acc-soft); }
.f64-chips-w li { color: var(--f64-dim); background: rgba(255, 255, 255, 0.03); }

/* ---- 類似アーキタイプ ---- */
.f64-similar li {
	display: flex; align-items: center; gap: 12px;
	padding: 11px 4px;
	border-bottom: 1px solid var(--f64-line);
}
.f64-similar li:last-child { border-bottom: none; }
.f64-similar li.is-first { background: var(--f64-acc-soft); border-radius: 12px; padding: 11px 12px; border-bottom: none; margin-bottom: 4px; }
.f64-sim-glyph { font-size: 20px; color: hsl(var(--f64-type-hue, 262), 75%, 72%); width: 28px; text-align: center; }
.f64-sim-name { flex: 1; font-size: 14px; font-weight: 700; line-height: 1.4; }
.f64-sim-name em { display: block; font-style: normal; font-size: 10px; letter-spacing: 0.3em; color: var(--f64-dim); font-weight: 400; }
.f64-sim-pct { font-size: 18px; font-weight: 800; color: var(--f64-gold); font-variant-numeric: tabular-nums; }

/* ---- 相性 ---- */
.f64-compat { padding: 12px 0; border-bottom: 1px solid var(--f64-line); }
.f64-compat:last-child { border-bottom: none; padding-bottom: 2px; }
.f64-compat-label { font-size: 11px; letter-spacing: 0.22em; color: var(--f64-acc); }
.f64-compat-type {
	margin-top: 4px;
	font-family: var(--f64-font-display);
	font-size: 17px; font-weight: 800;
	display: flex; align-items: baseline; gap: 8px;
}
.f64-compat-type i { font-style: normal; color: hsl(var(--f64-type-hue, 262), 75%, 72%); }
.f64-compat-type em { font-style: normal; font-size: 10px; letter-spacing: 0.28em; color: var(--f64-dim); font-weight: 400; }
.f64-compat-desc { font-size: 12.5px; color: var(--f64-dim); margin-top: 2px; }

/* ---- シェア ---- */
.f64-share { margin-top: 22px; text-align: center; }
.f64-share-lead { font-size: 11px; letter-spacing: 0.3em; color: var(--f64-dim); margin-bottom: 12px; }
.f64-share-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.f64-btn-x { border-color: var(--f64-acc); color: var(--f64-acc); }

.f64-result-foot { margin-top: 26px; }

/* =====================================================================
   アクセシビリティ / 微調整
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
	.f64-app *, .f64-app *::before, .f64-app *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

@media (min-width: 481px) {
	.f64-app { padding: 36px 30px 48px; }
}

/* ===== 相性ずかん ===== */
.f64-matrix .f64-h3 small {
	margin-left: 8px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--f64-muted);
}
.f64-mx-lead {
	margin: 8px 0 14px;
	font-size: 13px;
	line-height: 1.8;
	color: var(--f64-text-soft, #cfcbe6);
}
.f64-mx-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.f64-mx-row {
	padding: 11px 2px 12px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.f64-mx-row:last-child { border-bottom: 0; }
.f64-mx-row.is-self {
	background: linear-gradient(90deg, hsla(var(--f64-type-hue, 262), 70%, 60%, 0.10), transparent);
	border-radius: 8px;
	padding-left: 8px;
	padding-right: 8px;
}
.f64-mx-name {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 14px;
}
.f64-mx-name i {
	font-style: normal;
	color: hsl(var(--f64-type-hue, 262), 75%, 70%);
}
.f64-mx-name b {
	font-family: var(--f64-font-display);
	font-weight: 700;
	letter-spacing: 0.04em;
}
.f64-mx-badge {
	font-size: 10px;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 999px;
	background: hsla(var(--f64-type-hue, 262), 80%, 62%, 0.22);
	color: hsl(var(--f64-type-hue, 262), 85%, 80%);
	white-space: nowrap;
}
.f64-mx-word {
	margin-left: auto;
	font-size: 10px;
	letter-spacing: 0.18em;
	color: #ffd98a;
}
.f64-mx-stars {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	margin-top: 6px;
}
.f64-mx-genre {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
}
.f64-mx-genre em {
	font-style: normal;
	color: var(--f64-muted);
	font-size: 11px;
}
.f64-mx-star { letter-spacing: 0.14em; }
.f64-mx-friend { color: #8fd4ff; }
.f64-mx-work   { color: #b8e986; }
.f64-mx-love   { color: #ff9db8; }
.f64-mx-more {
	display: block;
	width: 100%;
	margin-top: 14px;
}
.f64-mx-note {
	margin: 14px 0 0;
	font-size: 11.5px;
	line-height: 1.9;
	color: var(--f64-muted);
}

.f64-mx-adv {
	margin: 7px 0 0;
	font-size: 12px;
	line-height: 1.75;
	color: var(--f64-text-soft, #cfcbe6);
	opacity: 0.85;
}

/* ===== シェア閲覧者向けインライン誘導 ===== */
.f64-inline-cta {
	margin: 18px 0;
	padding: 18px 16px;
	text-align: center;
	border: 1px solid hsla(var(--p64-type-hue, 262), 60%, 60%, 0.28);
	border-radius: 14px;
	background:
		radial-gradient(120% 140% at 50% 0%, hsla(var(--p64-type-hue, 262), 70%, 55%, 0.12), transparent 70%),
		rgba(255, 255, 255, 0.02);
}
.f64-inline-cta-copy {
	margin: 0 0 12px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--p64-text-soft, #cfcbe6);
}
.f64-inline-cta .f64-btn {
	margin: 0 auto;
	max-width: 320px;
}

/* =============================================================
 * 言語セレクタ(多言語切替)
 * ============================================================= */
.f64-lang {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	margin: 0 0 14px;
}
.f64-lang-label {
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--f64-dim);
	text-transform: uppercase;
}
.f64-lang-sel {
	appearance: none;
	-webkit-appearance: none;
	background: var(--f64-panel);
	color: var(--f64-text);
	border: 1px solid var(--f64-line);
	border-radius: 999px;
	padding: 7px 30px 7px 14px;
	font-family: var(--f64-font-body);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--f64-dim) 50%),
		linear-gradient(135deg, var(--f64-dim) 50%, transparent 50%);
	background-position:
		calc(100% - 16px) center,
		calc(100% - 11px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}
.f64-lang-sel:hover { border-color: var(--f64-acc); }
.f64-lang-sel:focus-visible {
	outline: none;
	border-color: var(--f64-acc);
	box-shadow: 0 0 0 3px var(--f64-acc-soft);
}
.f64-lang-sel option {
	background: var(--f64-bg2);
	color: var(--f64-text);
}
/* 結果画面ヘッダ上に置く場合は上マージンを少し詰める */
.f64-result > .f64-lang { margin-top: -4px; }