/* ============================================================
   もすにゃん恋愛偏差値診断
   世界観: 恋愛 × ゲーム × 鬼教官
   ※このファイルは /love-score/ 配下でのみ読み込まれ、
     既存サイトのCSSには一切影響しません。
   ============================================================ */

:root {
  --ls-red: #D93025;
  --ls-red-dark: #A81C13;
  --ls-orange: #FF7A18;
  --ls-gold: #E9A82C;
  --ls-gold-light: #FFD873;
  --ls-beige: #FFF2DE;
  --ls-cream: #FFF6EC;
  --ls-black: #14070A;
  --ls-black-2: #241009;
  --ls-ink: #2A1710;
  --ls-paper: #FFFBF4;
  --ls-max: 680px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* display を持つ要素にも hidden を効かせる */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  color: var(--ls-cream);
  background: var(--ls-black);
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(255,122,24,0.30), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(217,48,37,0.28), transparent 62%);
  background-attachment: fixed;
  min-height: 100vh;
  line-height: 1.75;
  overflow-x: hidden;
}

.wrap {
  width: 100%;
  max-width: var(--ls-max);
  margin: 0 auto;
  padding: 0 16px 72px;
}

/* ===== 効果線背景 ===== */
.speedlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.16;
  background: repeating-conic-gradient(
    from 0deg at 50% 42%,
    rgba(233,168,44,0.9) 0deg 0.7deg,
    transparent 0.7deg 5deg
  );
  mask-image: radial-gradient(circle at 50% 42%, transparent 26%, #000 78%);
  -webkit-mask-image: radial-gradient(circle at 50% 42%, transparent 26%, #000 78%);
}

.wrap, header, main { position: relative; z-index: 1; }

/* ===== 共通ヘッダー ===== */
.ls-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: var(--ls-max);
  margin: 0 auto;
  padding: 14px 16px;
}
.ls-logo {
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  color: var(--ls-gold);
  text-decoration: none;
  font-weight: 700;
  border-bottom: 1px solid rgba(233,168,44,0.4);
  padding-bottom: 2px;
}
.ls-logo:hover { color: var(--ls-gold-light); }
.ls-tag {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: rgba(255,233,200,0.6);
}

/* ===== ボタン ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 900;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 999px;
  padding: 16px 30px;
  font-size: 1rem;
  letter-spacing: 0.05em;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
  line-height: 1.4;
  text-align: center;
}
.btn:active { transform: translateY(2px) scale(0.99); }

.btn-primary {
  background: linear-gradient(135deg, var(--ls-orange), var(--ls-red));
  color: #fff;
  box-shadow: 0 8px 0 var(--ls-red-dark), 0 14px 30px rgba(217,48,37,0.45);
  border: 2px solid rgba(255,216,115,0.55);
}
.btn-primary:active { box-shadow: 0 4px 0 var(--ls-red-dark), 0 8px 18px rgba(217,48,37,0.4); }

.btn-share {
  background: linear-gradient(135deg, var(--ls-gold-light), var(--ls-gold));
  color: #3A1B04;
  box-shadow: 0 6px 0 #A9761A;
  border: 2px solid rgba(255,255,255,0.4);
}
.btn-share:active { box-shadow: 0 3px 0 #A9761A; }

.btn-x {
  background: #16100E;
  color: #fff;
  border: 2px solid rgba(255,233,200,0.35);
}
.btn-x:hover { border-color: var(--ls-gold); }

.btn-ghost {
  background: rgba(255,246,236,0.06);
  color: var(--ls-cream);
  border: 1.5px solid rgba(255,233,200,0.35);
  font-weight: 700;
  padding: 13px 24px;
  font-size: 0.92rem;
}
.btn-ghost:hover { border-color: var(--ls-gold); color: var(--ls-gold-light); }

.btn-block { width: 100%; }

/* ===== もすにゃん + 吹き出し ===== */
.mos-bubble {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mos-avatar { flex-shrink: 0; line-height: 0; }
.mos-avatar svg, .mos-avatar .mos-img {
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}
/* 画像は縦横比を保ったまま、指定した高さに収める */
.mos-img { height: auto; max-width: 100%; }

.mos-speech {
  position: relative;
  flex: 1;
  background: var(--ls-paper);
  color: var(--ls-ink);
  border: 3px solid var(--ls-black-2);
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 5px 5px 0 rgba(20,7,10,0.45);
  min-width: 0;
}
.mos-speech::before,
.mos-speech::after {
  content: '';
  position: absolute;
  left: -13px;
  top: 26px;
  border-style: solid;
}
.mos-speech::before {
  border-width: 10px 14px 10px 0;
  border-color: transparent var(--ls-black-2) transparent transparent;
}
.mos-speech::after {
  left: -9px;
  border-width: 8px 11px 8px 0;
  border-color: transparent var(--ls-paper) transparent transparent;
}
.mos-speech-text {
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.72;
}
.mos-bubble.is-question .mos-speech-text { font-size: 1.02rem; }

/* ===== TOP ===== */
.top {
  text-align: center;
  padding-top: 8px;
}
.top-badge {
  display: inline-block;
  background: var(--ls-red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  padding: 6px 16px;
  border-radius: 999px;
  border: 2px solid var(--ls-gold);
  margin-bottom: 18px;
}
.top-mos { line-height: 0; margin-bottom: 6px; display: flex; justify-content: center; }
.top-mos svg, .top-mos .mos-img { filter: drop-shadow(0 12px 22px rgba(0,0,0,0.6)); }

.top-title {
  font-size: clamp(1.75rem, 8.5vw, 2.5rem);
  font-weight: 900;
  line-height: 1.28;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  color: #fff;
  text-shadow: 0 3px 0 var(--ls-black-2), 0 0 26px rgba(255,122,24,0.5);
}
.top-title em {
  font-style: normal;
  color: var(--ls-gold-light);
  display: inline-block;
}
.top-sub {
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.85;
  color: var(--ls-beige);
  margin: 18px 0 26px;
}
.top-sub .hl {
  color: var(--ls-gold-light);
  border-bottom: 3px solid var(--ls-red);
  padding-bottom: 1px;
}
.top-cta { display: grid; gap: 12px; margin-bottom: 16px; }
.top-note {
  font-size: 0.8rem;
  color: rgba(255,233,200,0.7);
  letter-spacing: 0.06em;
}

.top-points {
  list-style: none;
  display: grid;
  gap: 10px;
  margin: 30px 0 8px;
  text-align: left;
}
.top-points li {
  background: rgba(255,246,236,0.055);
  border: 1px solid rgba(233,168,44,0.28);
  border-left: 4px solid var(--ls-gold);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ls-beige);
}
.top-points b { color: var(--ls-gold-light); font-weight: 900; }

/* ===== 問題バンク読み込みエラー ===== */
.bank-error {
  margin-top: 18px;
  background: rgba(217,48,37,0.14);
  border: 2px solid var(--ls-red);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}
.bank-error-title { font-size: 1rem; font-weight: 900; color: #fff; margin-bottom: 6px; }
.bank-error-detail {
  font-size: 0.8rem;
  color: rgba(255,233,200,0.8);
  margin-bottom: 14px;
  word-break: break-word;
}

/* ===== 累計人数 ===== */
.top-stats {
  margin-top: 10px;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ls-beige);
  letter-spacing: 0.04em;
}
.top-stats .top-stats-num {
  font-size: 1.28rem;
  font-weight: 900;
  color: var(--ls-gold-light);
  margin: 0 2px;
}

/* ===== 入力画面（ニックネーム＋性別） ===== */
#screen-entry { padding-top: 12px; animation: slideIn 0.28s ease both; }

.field { margin-top: 22px; }
.field-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--ls-gold-light);
  margin-bottom: 8px;
}
.field-input {
  width: 100%;
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--ls-ink);
  background: var(--ls-paper);
  border: 2.5px solid var(--ls-black-2);
  border-radius: 13px;
  padding: 15px 16px;
  box-shadow: 0 5px 0 rgba(20,7,10,0.5);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.field-input::placeholder { color: rgba(42,23,16,0.35); font-weight: 500; }
.field-input:focus {
  border-color: var(--ls-red);
  box-shadow: 0 0 0 3px rgba(233,168,44,0.35), 0 5px 0 rgba(20,7,10,0.5);
}
.field-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-top: 7px;
}
.field-hint { font-size: 0.76rem; color: rgba(255,233,200,0.7); }
.field-hint.is-error { color: #FF9E8E; font-weight: 700; }
.field-count { font-size: 0.76rem; font-weight: 700; color: rgba(255,233,200,0.6); flex-shrink: 0; }
.field-count.is-over { color: #FF6B5B; }

#btn-entry-go { margin-top: 24px; }
#btn-entry-go:disabled {
  filter: grayscale(0.7);
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: 0 8px 0 rgba(120,60,50,0.5);
}
.entry-note {
  margin-top: 12px;
  text-align: center;
  font-size: 0.74rem;
  line-height: 1.8;
  color: rgba(255,233,200,0.6);
}

.gender-grid {
  display: grid;
  gap: 11px;
}
.gender-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  font-family: inherit;
  background: var(--ls-paper);
  color: var(--ls-ink);
  border: 2.5px solid var(--ls-black-2);
  border-radius: 14px;
  padding: 17px 20px;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(20,7,10,0.5);
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-align: left;
}
.gender-btn:hover:not(:disabled) { background: #FFF4E2; border-color: var(--ls-red); }
.gender-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20,7,10,0.5); }
.gender-btn:disabled { cursor: default; }
.gender-btn.is-selected {
  background: linear-gradient(135deg, var(--ls-orange), var(--ls-red));
  color: #fff;
  border-color: var(--ls-gold-light);
  box-shadow: 0 0 0 3px rgba(233,168,44,0.35), 0 5px 0 var(--ls-red-dark);
}
.gender-btn.is-selected .gender-icon { background: #fff; color: var(--ls-red); }

.gender-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--ls-black-2);
  color: var(--ls-gold-light);
  font-size: 1.25rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gender-label { font-size: 1.08rem; font-weight: 900; letter-spacing: 0.04em; }

.gender-note {
  margin-top: 18px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.85;
  color: rgba(255,233,200,0.72);
}
.gender-note strong { color: var(--ls-gold-light); font-weight: 900; }

/* ===== 進捗 ===== */
.progress { margin: 4px 0 18px; }
.progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 7px;
}
.progress-label {
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  font-weight: 700;
  color: rgba(255,233,200,0.85);
  text-transform: uppercase;
}
.progress-label b { color: var(--ls-gold-light); font-size: 1.15rem; font-weight: 900; }
.progress-pct { font-size: 0.76rem; font-weight: 900; color: var(--ls-gold); }
.progress-track {
  height: 9px;
  background: rgba(255,246,236,0.12);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(233,168,44,0.25);
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ls-gold-light), var(--ls-orange), var(--ls-red));
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 設問 ===== */
#quiz-body { animation: none; }
#quiz-body.is-in { animation: slideIn 0.28s ease both; }
@keyframes slideIn {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}

.answers {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}
.answer {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  text-align: left;
  font-family: inherit;
  background: var(--ls-paper);
  color: var(--ls-ink);
  border: 2.5px solid var(--ls-black-2);
  border-radius: 13px;
  padding: 14px 14px 14px 12px;
  cursor: pointer;
  box-shadow: 0 4px 0 rgba(20,7,10,0.5);
  transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease;
  line-height: 1.68;
}
.answer:hover:not(:disabled) {
  background: #FFF4E2;
  border-color: var(--ls-red);
}
.answer:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 rgba(20,7,10,0.5); }
.answer:disabled { cursor: default; }
.answer.is-selected {
  background: linear-gradient(135deg, var(--ls-orange), var(--ls-red));
  color: #fff;
  border-color: var(--ls-gold-light);
  box-shadow: 0 0 0 3px rgba(233,168,44,0.35), 0 4px 0 var(--ls-red-dark);
}
.answer.is-selected .answer-key { background: #fff; color: var(--ls-red); }

.answer-key {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ls-black-2);
  color: var(--ls-gold-light);
  font-size: 0.82rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.answer-text { font-size: 0.9rem; font-weight: 500; }

.quiz-foot {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}
#btn-back,
#btn-gender-back {
  background: none;
  border: none;
  font-family: inherit;
  color: rgba(255,233,200,0.72);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  padding: 10px 16px;
  letter-spacing: 0.04em;
}
#btn-back:hover,
#btn-gender-back:hover { color: var(--ls-gold-light); }

/* ===== 採点演出 ===== */
.scoring {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}
.scoring-mos { line-height: 0; display: flex; justify-content: center; animation: bob 0.9s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-12px) rotate(3deg); } }
.scoring-title {
  font-size: clamp(1.4rem, 6.5vw, 1.9rem);
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 0 var(--ls-black-2);
}
.scoring-dots::after {
  content: '';
  animation: dots 1.1s steps(4, end) infinite;
}
@keyframes dots { 0% { content: ''; } 25% { content: '・'; } 50% { content: '・・'; } 75% { content: '・・・'; } }
.scoring-sub { font-size: 0.98rem; font-weight: 700; color: var(--ls-gold-light); }
.scoring-bar {
  width: min(300px, 80%);
  height: 8px;
  border-radius: 999px;
  background: rgba(255,246,236,0.14);
  overflow: hidden;
  margin-top: 6px;
}
.scoring-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ls-gold-light), var(--ls-red));
  animation: fill 1.8s cubic-bezier(0.35, 0, 0.2, 1) forwards;
}
@keyframes fill { from { width: 0; } to { width: 100%; } }

/* ===== ランキング ===== */
.rank-skeleton, .rank-error {
  padding: 16px 4px;
  text-align: center;
  font-size: 0.86rem;
  color: rgba(255,233,200,0.7);
  line-height: 1.8;
}
.rank-error { color: #FFB3A5; }

/* --- 自分の順位 --- */
.myrank-slot { margin-top: 18px; }
.myrank {
  background: linear-gradient(150deg, rgba(233,168,44,0.18), rgba(217,48,37,0.16));
  border: 2px solid var(--ls-gold);
  border-radius: 16px;
  padding: 16px 14px 14px;
}
.myrank-newbest {
  display: inline-block;
  background: var(--ls-gold-light);
  color: #3A1B04;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  padding: 3px 12px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.myrank-best {
  font-size: 0.74rem;
  color: rgba(255,233,200,0.75);
  margin-bottom: 6px;
}
.myrank-lead { font-size: 0.84rem; font-weight: 700; color: var(--ls-beige); }
.myrank-main {
  font-size: 1.02rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  margin: 2px 0 4px;
}
.myrank-total { font-size: 1.35rem; font-weight: 900; color: var(--ls-gold-light); }
.myrank-pos {
  font-size: 2.5rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 0 var(--ls-black-2);
  margin: 0 2px;
}
.myrank-pct {
  display: inline-block;
  background: var(--ls-red);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 900;
  padding: 5px 18px;
  border-radius: 999px;
  border: 2px solid rgba(255,216,115,0.5);
}

/* --- TOP10 --- */
.panel-ranking { border-color: rgba(233,168,44,0.5); }
.rank-list { list-style: none; display: grid; gap: 7px; }
.rank-row {
  display: grid;
  grid-template-columns: 38px 1fr auto;
  align-items: center;
  gap: 10px;
  background: rgba(255,246,236,0.06);
  border: 1px solid rgba(233,168,44,0.22);
  border-radius: 11px;
  padding: 10px 12px;
}
.rank-pos {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--ls-gold-light);
  text-align: center;
  line-height: 1;
}
.rank-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ls-cream);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-info { display: flex; align-items: baseline; gap: 7px; flex-shrink: 0; }
.rank-dev { font-size: 1.18rem; font-weight: 900; color: var(--ls-gold-light); }
.rank-title { font-size: 0.68rem; color: rgba(255,233,200,0.7); }

.rank-row.is-top1 {
  background: linear-gradient(100deg, rgba(233,168,44,0.32), rgba(255,216,115,0.14));
  border-color: var(--ls-gold-light);
  box-shadow: 0 0 18px rgba(233,168,44,0.28);
}
.rank-row.is-top2 {
  background: linear-gradient(100deg, rgba(210,210,215,0.24), rgba(255,255,255,0.08));
  border-color: rgba(220,220,225,0.6);
}
.rank-row.is-top3 {
  background: linear-gradient(100deg, rgba(190,120,70,0.28), rgba(210,150,100,0.10));
  border-color: rgba(205,140,90,0.65);
}
.rank-row.is-top1 .rank-pos,
.rank-row.is-top2 .rank-pos,
.rank-row.is-top3 .rank-pos { font-size: 1.3rem; }
.rank-row.is-top1 .rank-name { font-size: 1rem; font-weight: 900; color: #fff; }

.rank-row.is-me {
  border-color: var(--ls-red);
  box-shadow: 0 0 0 2px rgba(217,48,37,0.45);
}
.rank-row.is-outside { margin-top: 4px; background: rgba(217,48,37,0.14); }

@media (max-width: 380px) {
  .rank-row { grid-template-columns: 32px 1fr auto; gap: 8px; padding: 9px 10px; }
  .rank-name { font-size: 0.86rem; }
  .rank-title { display: none; }
}

/* ===== 結果 ===== */
.result-hero {
  text-align: center;
  padding: 14px 0 6px;
}
.result-lead {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ls-beige);
  letter-spacing: 0.06em;
}
.result-score { line-height: 1; margin: 2px 0 6px; }
.result-score-num {
  font-size: clamp(5rem, 30vw, 8.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, var(--ls-gold-light) 15%, var(--ls-red) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px var(--ls-black-2);
  paint-order: stroke fill;
  filter: drop-shadow(0 8px 18px rgba(217,48,37,0.5));
}
.result-rank {
  display: inline-block;
  background: linear-gradient(135deg, var(--ls-red), var(--ls-red-dark));
  color: #fff;
  font-size: clamp(1.1rem, 5.2vw, 1.4rem);
  font-weight: 900;
  padding: 9px 26px;
  border-radius: 999px;
  border: 2.5px solid var(--ls-gold);
  box-shadow: 0 6px 20px rgba(217,48,37,0.45);
  letter-spacing: 0.03em;
}

.panel {
  background: rgba(255,246,236,0.05);
  border: 1px solid rgba(233,168,44,0.3);
  border-radius: 16px;
  padding: 20px 16px;
  margin-top: 18px;
  backdrop-filter: blur(2px);
}
.panel-title {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--ls-gold-light);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  padding-left: 11px;
  border-left: 4px solid var(--ls-red);
  line-height: 1.4;
}
.panel-body {
  margin-top: 13px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ls-beige);
  line-height: 1.9;
}

.panel-weak { border-color: rgba(217,48,37,0.6); background: rgba(217,48,37,0.09); }
.weak-eyebrow {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  color: var(--ls-red);
  background: var(--ls-gold-light);
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
}
.weak-title {
  font-size: clamp(1.3rem, 6.2vw, 1.65rem);
  font-weight: 900;
  color: #fff;
  margin: 10px 0 14px;
  text-shadow: 0 3px 0 var(--ls-black-2);
  line-height: 1.35;
}

.mission {
  margin-top: 18px;
  background: var(--ls-black-2);
  border: 2.5px dashed var(--ls-gold);
  border-radius: 13px;
  padding: 15px;
  text-align: center;
}
.mission-eyebrow {
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  color: var(--ls-gold);
  margin-bottom: 6px;
}
.mission-text {
  font-size: 1.04rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.6;
}

/* 5能力バー */
.stats { list-style: none; display: grid; gap: 9px; margin-top: 14px; }
.stat {
  display: grid;
  grid-template-columns: 78px 1fr 34px;
  align-items: center;
  gap: 9px;
}
.stat-name { font-size: 0.8rem; font-weight: 700; color: var(--ls-beige); }
.stat-track {
  height: 10px;
  background: rgba(255,246,236,0.12);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(233,168,44,0.22);
}
.stat-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ls-gold-light), var(--ls-orange));
  border-radius: 999px;
  animation: grow 0.8s cubic-bezier(0.3, 0, 0.2, 1) both;
}
@keyframes grow { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); } }
.stat-val { font-size: 0.86rem; font-weight: 900; color: var(--ls-gold-light); text-align: right; }
.stat.is-weak .stat-fill { background: linear-gradient(90deg, #FF6B5B, var(--ls-red)); }
.stat.is-weak .stat-name { color: #FF9E8E; }
.stat.is-weak .stat-val { color: #FF9E8E; }

.radar-wrap { width: 100%; }
#radar { width: 100%; display: block; }

/* MOST導線 */
.panel-cta {
  text-align: center;
  background: linear-gradient(150deg, rgba(255,122,24,0.2), rgba(217,48,37,0.16));
  border: 2px solid var(--ls-gold);
}
.cta-eyebrow {
  font-size: 1.02rem;
  font-weight: 900;
  color: var(--ls-gold-light);
  margin-bottom: 10px;
}
.cta-body {
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.85;
  margin-bottom: 18px;
}
.panel-cta .btn { width: 100%; }
.cta-note {
  margin-top: 11px;
  font-size: 0.76rem;
  color: rgba(255,233,200,0.68);
}

/* シェア */
.share-preview {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(233,168,44,0.35);
  line-height: 0;
  margin-bottom: 14px;
}
#share-canvas { width: 100%; height: auto; display: block; }
.share-btns { display: grid; gap: 10px; }
.share-btns .btn { width: 100%; }

.result-foot {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}
.result-foot .btn { width: 100%; }

.disclaimer {
  margin-top: 22px;
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,233,200,0.5);
  letter-spacing: 0.04em;
}

/* ===== PC ===== */
@media (min-width: 720px) {
  .wrap { padding: 0 24px 96px; }
  .panel { padding: 26px 24px; }
  .top-cta { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; }
  .share-btns { grid-template-columns: 1fr 1fr; }
  .result-foot { grid-template-columns: 1fr 1fr; }
  .answer-text { font-size: 0.94rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}