/* =========================================================
   社不診断 - stylesheet
   ========================================================= */
:root{
  --bg:#12101f;
  --bg2:#1b1530;
  --ink:#1c1a2b;
  --paper:#f7f6fb;
  --line:#e6e3f0;
  --pur:#8b5cf6;
  --pur2:#a855f7;
  --pur-d:#6d3fe0;

  --opt-a:#f0567a;
  --opt-b:#4d8bf0;
  --opt-c:#f3b528;
  --opt-d:#9a6bf5;

  --radius:20px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --font:"M PLUS Rounded 1c","Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  color:#fff;
  background:
    radial-gradient(1200px 600px at 50% -10%, #2b1f55 0%, transparent 60%),
    linear-gradient(180deg,#12101f 0%,#0d0b17 100%);
  background-attachment:fixed;
  overflow-x:hidden;
}

/* ---- app frame (mobile first / centered on desktop) ---- */
.app{
  position:relative;
  width:100%;
  max-width:430px;
  min-height:100vh;
  min-height:100svh;   /* バーの開閉で高さが動かないように svh を使う */
  margin:0 auto;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
@media (min-width:900px){
  body{padding:24px 0}
  .app{
    min-height:calc(100svh - 48px);
    border-radius:28px;
    box-shadow:0 30px 80px rgba(0,0,0,.6);
    outline:1px solid rgba(255,255,255,.06);
  }
}

/* ---- screens ---- */
.screen{display:none;flex:1;flex-direction:column;position:relative}
/* iOS のセーフエリア（ノッチ / ホームインジケーター）を避ける */
:root{
  --sa-t:env(safe-area-inset-top,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);
}
[tabindex="-1"]:focus{outline:none}
[tabindex="-1"]:focus-visible{outline:2px solid #c4b5fd;outline-offset:4px;border-radius:8px}
.screen.is-active{display:flex;animation:screenIn .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes screenIn{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}

/* キーボード操作のときだけフォーカスリングを出す */
.btn:focus-visible,.opt:focus-visible{outline:3px solid #c4b5fd;outline-offset:3px}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  font-family:inherit;font-weight:700;color:#fff;
  border:0;border-radius:999px;cursor:pointer;
  padding:13px 22px;font-size:15px;line-height:1.2;
  transition:transform .12s ease, filter .12s ease, opacity .12s;
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.35;cursor:default}
.btn--primary{
  background:linear-gradient(135deg,var(--pur-d) 0%,var(--pur) 55%,var(--pur2) 100%);
  box-shadow:0 8px 22px rgba(109,63,224,.45), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn--primary:not(:disabled):hover{filter:brightness(1.08)}
.btn--lg{padding:17px 44px;font-size:18px;letter-spacing:.04em}
.btn--ghost{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  color:#d9d4ee;font-weight:600;
}
.btn--dark{
  background:rgba(12,10,22,.82);
  border:1px solid rgba(255,255,255,.14);
  font-size:14px;padding:14px 10px;
  display:flex;align-items:center;justify-content:center;gap:7px;
}
.btn--dark:hover{background:rgba(12,10,22,.95)}
.xmark{font-weight:900;font-size:15px}

/* =========================================================
   TOP 下の説明（検索エンジンにも読者にも読ませる本文）
   ========================================================= */
.top__scroll{
  margin:26px 0 0;font-size:11.5px;font-weight:700;letter-spacing:.1em;color:#8d85ab;
  animation:scrollHint 2.2s ease-in-out infinite;
}
@keyframes scrollHint{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(4px);opacity:1}}

.lp{position:relative;z-index:1;margin:34px 0 0;text-align:left}
.lp__inner{
  padding:22px 18px 24px;border-radius:20px;
  background:rgba(0,0,0,.38);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(2px);
}
.lp h2{
  font-size:15.5px;font-weight:800;letter-spacing:.03em;color:#fff;
  margin:26px 0 10px;padding-left:11px;border-left:5px solid #a855f7;
}
.lp h2:first-child{margin-top:0}
.lp h3{font-size:13.5px;font-weight:800;color:#fff;margin:0 0 5px}
.lp p{font-size:13px;line-height:1.95;color:#ded8f2;margin:0 0 11px}
.lp p b{color:#fff}
.lp a{color:#c4b5fd;text-underline-offset:3px}

.lp__list{margin:0 0 12px;padding-left:1.15em}
.lp__list li{font-size:13px;line-height:1.9;color:#ded8f2;margin-bottom:5px}
.lp__list b{color:#fff}

.lp__table{width:100%;border-collapse:collapse;margin:0 0 12px;font-size:13px}
.lp__table th,.lp__table td{padding:8px 6px;text-align:left;border-bottom:1px solid rgba(255,255,255,.12)}
.lp__table th{font-size:11px;letter-spacing:.08em;color:#a79ec8;font-weight:700}
.lp__table td{color:#ded8f2}
.lp__table td b{color:#fff}
.lp__table td.n{white-space:nowrap;font-variant-numeric:tabular-nums;color:#b9b0dd}

.lp__details{
  margin:0 0 12px;border-radius:13px;overflow:hidden;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
}
.lp__details summary{
  padding:11px 14px;font-size:12.5px;font-weight:800;color:#e8e2ff;cursor:pointer;
  list-style:none;
}
.lp__details summary::-webkit-details-marker{display:none}
.lp__details summary::after{content:" ▾";color:#a79ec8}
.lp__details[open] summary::after{content:" ▴"}
.lp__q{margin:0;padding:2px 16px 14px 34px}
.lp__q li{font-size:12.5px;line-height:1.85;color:#ded8f2;margin-bottom:4px}

.lp__faq{margin:0 0 14px}
.lp__faq p{margin:0}

.lp__cta{margin:24px 0 0;text-align:center}
.lp__cta a{
  display:inline-block;padding:14px 34px;border-radius:999px;
  background:linear-gradient(135deg,#6d3fe0,#8b5cf6 55%,#a855f7);
  color:#fff;font-weight:800;font-size:15px;text-decoration:none;
  box-shadow:0 10px 26px rgba(109,63,224,.45);
}
.lp__links{margin:16px 0 0;text-align:center;font-size:12px;color:#8d85ab;line-height:2}

@media (prefers-reduced-motion:reduce){.top__scroll{animation:none}}

/* =========================================================
   TOP
   ========================================================= */
.screen--top{justify-content:flex-start;text-align:center;
  padding:calc(36px + var(--sa-t)) calc(22px + var(--sa-r)) calc(30px + var(--sa-b)) calc(22px + var(--sa-l));}
.top__bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* 背景画像（読めたときだけ JS が --bgimg を入れる） */
.screen__photo{
  position:absolute;inset:0;pointer-events:none;
  background:var(--bgimg, none) center/cover no-repeat;
  opacity:0;transition:opacity .6s ease;
}
.screen__photo.is-on{opacity:1}

/* 散らした落書き（暗い画面用の白インク） */
.doodles{
  position:absolute;inset:0;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .8s ease;
  background:
    var(--doodle-l, none) left -8% top 4% / 62% auto no-repeat,
    var(--doodle-l, none) right -14% bottom 6% / 78% auto no-repeat;
}
.doodles.is-on{opacity:.13}
.doodles--result{opacity:0}
.doodles--result.is-on{opacity:.16}
/* 質問画面は白いカードが主役なので、背景はもう少し見せて良い */
#quiz-photo{filter:brightness(1.4) saturate(1.15)}
#quiz-photo::after{
  background:linear-gradient(180deg,rgba(14,11,26,.58) 0,rgba(14,11,26,.20) 42%,rgba(14,11,26,.62) 100%);
}
.screen__photo::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(14,11,26,.82) 0,rgba(14,11,26,.34) 38%,rgba(14,11,26,.72) 100%);
}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.blob--a{width:320px;height:320px;top:-80px;left:-100px;background:#6d28d9}
.blob--b{width:280px;height:280px;bottom:-60px;right:-90px;background:#4c1d95}

/* 下に説明文（.lp）を置いたので、ヒーローだけで1画面ぶんの高さを確保する。
   padding は .screen--top の 36px / 30px ぶんを引く。 */
.top__inner{
  position:relative;z-index:1;flex:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  min-height:calc(100svh - 66px - var(--sa-t) - var(--sa-b));
}
.top__logo{
  display:none;                 /* 画像が読めたら JS が block にする */
  width:min(210px,54vw);aspect-ratio:640/257;margin:0 0 10px;
  background:center/contain no-repeat;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.5));
}
.top__lead{margin:0 0 6px;font-size:14px;color:#cfc6f5;letter-spacing:.06em}
.top__title{
  position:relative;
  margin:0;font-size:clamp(42px,16vw,74px);font-weight:800;letter-spacing:.04em;line-height:1;
  white-space:nowrap;
  -webkit-text-stroke:3px rgba(255,255,255,.34);
  paint-order:stroke fill;
  background:linear-gradient(180deg,#ffffff 0%,#e9dcff 45%,#b18cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 6px 18px rgba(147,97,253,.55));
}
.top__brand{
  margin:14px 0 0;padding:6px 18px;border-radius:999px;font-size:13px;font-weight:700;
  background:linear-gradient(135deg,var(--pur),#c084fc);
  box-shadow:0 6px 18px rgba(139,92,246,.4);
}
.spark{
  position:absolute;top:-2px;font-size:.36em;font-style:normal;color:#e9d5ff;
  text-shadow:0 0 14px rgba(216,180,254,.9);
  -webkit-text-stroke:0;
  animation:twinkle 2.6s ease-in-out infinite;
}
.spark--l{left:-.52em}
.spark--r{right:-.52em;top:auto;bottom:-2px;animation-delay:-1.3s}
@keyframes twinkle{0%,100%{opacity:.5;transform:scale(.85)}50%{opacity:1;transform:scale(1.12)}}
.star{color:#ffd66b;margin-right:5px;text-shadow:0 0 10px rgba(255,214,107,.6)}

.top__spec{margin:16px 0 0;font-size:15px;color:#efeaff;line-height:1.8}
.top__spec span{font-size:13px;color:#b7add8}
/* キャラ絵（assets/img/ に置かれていれば JS が表示する） */
.top__art,.qcard__art,.rcard__art{display:none;background:center/contain no-repeat}
.top__art{
  width:min(400px,96vw);aspect-ratio:1332/760;margin:10px 0 14px;
}
.top__note{margin:14px 0 0;font-size:11px;color:#8d85ab;line-height:1.9}
.top__about{display:inline-block;margin-top:4px;color:#a79ec8;text-decoration:underline;text-underline-offset:3px}
.top__about:hover{color:#c4b5fd}

/* =========================================================
   QUIZ
   ========================================================= */
/* 背景写真より前に中身を出す */
.screen--quiz > *:not(.screen__photo),
.screen--loading > *:not(.screen__photo){position:relative;z-index:1}
#load-photo{filter:brightness(1.15)}
#load-photo::after{background:linear-gradient(180deg,rgba(14,11,26,.74) 0,rgba(14,11,26,.6) 50%,rgba(14,11,26,.82) 100%)}
.screen--quiz{gap:14px;
  padding:calc(16px + var(--sa-t)) calc(16px + var(--sa-r)) calc(20px + var(--sa-b)) calc(16px + var(--sa-l));}
.quizbar{padding:6px 2px 0}
.quizbar__row{display:flex;align-items:center;gap:10px}
.quizbar__logo{flex:none;font-size:19px;font-weight:800;letter-spacing:.06em}
.quizbar__count{flex:none;font-size:12px;color:#cabff2}
.quizbar__count b{font-size:19px;font-weight:800;color:#fff}
.quizbar__count i{font-style:normal;opacity:.7}

.segbar{flex:1;min-width:0;display:flex;gap:2px;align-items:center}
.segbar span{
  flex:1;height:11px;border-radius:2px;background:rgba(255,255,255,.14);
  transition:background .25s ease, box-shadow .25s ease;
}
.segbar span.on{
  background:linear-gradient(135deg,#a855f7,#d8b4fe);
  box-shadow:0 0 10px rgba(168,85,247,.7);
}
.segbar span.now{
  background:linear-gradient(135deg,#d8b4fe,#ffffff);
  animation:segPulse 1.6s ease-in-out infinite;
}
@keyframes segPulse{
  0%,100%{box-shadow:0 0 8px rgba(216,180,254,.7)}
  50%{box-shadow:0 0 18px rgba(216,180,254,1)}
}
.quizbar__count b{display:inline-block}
.quizbar__count b.pop{animation:countPop .34s cubic-bezier(.2,1.7,.4,1)}
@keyframes countPop{0%{transform:translateY(-6px) scale(1.25);opacity:.4}100%{transform:none;opacity:1}}

.qcard{
  position:relative;flex:1;
  background:linear-gradient(180deg,#ffffff 0%,#f4f2fb 100%);
  border-radius:var(--radius);
  box-shadow:0 18px 44px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.7) inset;
  padding:22px 18px 18px;
  color:var(--ink);
  display:flex;flex-direction:column;
  min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
}
.qcard::before{ /* 罫線＋うっすら落書き（ノートの隅の雰囲気） */
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;overflow:hidden;
  background:
    var(--doodle, none) center bottom / 132% auto no-repeat,
    repeating-linear-gradient(180deg,transparent 0 31px,#eceaf6 31px 32px);
  opacity:.5;
  mask-image:linear-gradient(180deg,transparent 0,#000 60px);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60px);
}
.qcard__head{position:relative;display:flex;gap:12px;align-items:flex-start;margin-bottom:18px}
.qbadge{
  position:relative;
  flex:none;display:grid;place-items:center;min-width:50px;height:38px;padding:0 11px;
  border-radius:13px;
  background:linear-gradient(135deg,var(--pur),#a78bfa);
  color:#fff;font-weight:800;font-size:16px;letter-spacing:.02em;
  box-shadow:0 5px 14px rgba(139,92,246,.4);
}
.qbadge::after{   /* 吹き出しのしっぽ */
  content:"";position:absolute;left:11px;bottom:-6px;
  border:7px solid transparent;border-top-color:#9b6ff2;border-bottom:0;
}
.qcard__text{margin:2px 0 0;font-size:18px;font-weight:700;line-height:1.55;letter-spacing:.01em}

.opts{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.opt{
  display:flex;align-items:center;gap:12px;width:100%;
  background:#fbfaff;border:1.5px solid var(--line);border-radius:14px;
  padding:13px 14px;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);
  text-align:left;cursor:pointer;line-height:1.45;
  transition:transform .1s, border-color .15s, background .15s, box-shadow .15s;
}
.opt{animation:optIn .34s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 52ms)}
@keyframes optIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.opt:hover{border-color:#cfc6ee;background:#fff;transform:translateX(2px)}
.opt:active{transform:scale(.985)}

/* 選択済みのチェック */
.opt__check{
  flex:none;margin-left:auto;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:14px;font-weight:900;color:#fff;
  background:var(--pur);opacity:0;transform:scale(.4);
  transition:opacity .18s ease, transform .18s cubic-bezier(.2,1.6,.4,1);
}
.opt.is-selected .opt__check{opacity:1;transform:none}
.opt__key{
  flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:#fff;font-weight:800;font-size:14px;
}
.opt[data-key="A"] .opt__key{background:var(--opt-a)}
.opt[data-key="B"] .opt__key{background:var(--opt-b)}
.opt[data-key="C"] .opt__key{background:var(--opt-c);color:#3b2a00}
.opt[data-key="D"] .opt__key{background:var(--opt-d)}
.opt.is-selected{
  background:linear-gradient(90deg,#f1e8ff 0%,#faf7ff 100%);
  border-color:var(--pur);
  box-shadow:0 0 0 3px rgba(139,92,246,.18), 0 6px 16px rgba(109,63,224,.22);
}
.opt.is-selected .opt__key{transform:scale(1.06)}
.opt__key{transition:transform .18s cubic-bezier(.2,1.6,.4,1)}

/* カード下部：左につぶやき、右にキャラ。余白が足りなければ潰れずに小さくなる */
.qcard__foot{
  position:relative;
  margin-top:auto;display:flex;align-items:flex-end;justify-content:flex-end;gap:4px;
  flex:0 1 auto;min-height:0;padding-top:10px;
  pointer-events:none;
}
.qcard__mutter{
  margin:0 0 66px;max-width:44%;align-self:flex-end;
  font-size:12.5px;font-weight:700;line-height:1.5;
  color:#8f88ac;text-align:right;letter-spacing:.02em;white-space:pre-line;
  transform:rotate(-3deg);
}
.qcard__mutter:empty{display:none}
.qcard__art{
  flex:0 1 auto;min-height:0;
  height:168px;width:auto;aspect-ratio:1/1;
}
.quiznav{display:flex;gap:10px;align-items:center;flex:none}
.quiznav .btn{white-space:nowrap}
@media (max-width:360px){
  .quiznav .btn{padding:13px 12px;font-size:14px}
  .quiznav .btn--ghost{flex:0 0 33%}
}
.quiznav .btn--ghost{flex:0 0 38%}
.quiznav .btn--primary{flex:1}

/* =========================================================
   LOADING
   ========================================================= */
.screen--loading{justify-content:center;align-items:center;text-align:center;
  padding:calc(30px + var(--sa-t)) calc(26px + var(--sa-r)) calc(30px + var(--sa-b)) calc(26px + var(--sa-l));}
.loading__inner{width:100%;max-width:330px}
.loading__title{margin:0 0 22px;font-size:19px;font-weight:700;line-height:1.7;letter-spacing:.03em}
.loadbar{height:14px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden;box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.loadbar{position:relative}
.loadbar span{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,#8b5cf6,#d8b4fe);
  box-shadow:0 0 14px rgba(168,85,247,.8);
  transition:width .45s cubic-bezier(.2,.8,.2,1);
}
.loadbar::after{   /* 光のスイープ */
  content:"";position:absolute;inset:0;border-radius:999px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0,rgba(255,255,255,.55) 50%,transparent 100%);
  transform:translateX(-100%);
  animation:sweep 1.6s ease-in-out infinite;
}
@keyframes sweep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.loadlog{list-style:none;margin:22px 0 0;padding:0;min-height:96px}
.loadlog li{
  font-size:14px;color:#c9c0ea;margin:0 0 9px;opacity:0;
  animation:logIn .35s ease forwards;
}
.loadlog li.done::after{content:" ✔";color:#8ef0b7;font-weight:700}
@keyframes logIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* =========================================================
   RESULT
   ========================================================= */
.screen--result{--lv:#7bd7a1;--lv2:#4bbd82;--lvink:#123a26;background:#0e0c19}
.screen--result[data-level="1"]{--lv:#8fe5b4;--lv2:#4fc88c;--lvink:#0e3b26}
.screen--result[data-level="2"]{--lv:#9ec8ff;--lv2:#4f8ef0;--lvink:#10305e}
.screen--result[data-level="3"]{--lv:#ffce7a;--lv2:#f59f22;--lvink:#4a2d05}
.screen--result[data-level="4"]{--lv:#ff8b8b;--lv2:#e02a2a;--lvink:#4a0808}

.result__scroll{
  flex:1;   /* スクロールはページ全体に任せる（入れ子スクロールにしない） */
  padding:calc(22px + var(--sa-t)) calc(16px + var(--sa-r)) calc(34px + var(--sa-b)) calc(16px + var(--sa-l));
  position:relative;
  background:
    radial-gradient(700px 320px at 50% -8%, color-mix(in srgb, var(--lv) 55%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--lv2) 82%, #000 18%) 0%, #0d0b17 78%);
}
/* LEVEL別の背景画像。下端をフェードさせて地のグラデーションに溶かす。
   画像が読めたときだけ JS が --bgimg を入れる。 */
.result__bg{
  position:absolute;left:0;top:0;width:100%;aspect-ratio:1080/1350;
  background:var(--bgimg, none) center/cover no-repeat;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 52%,transparent 100%);
  pointer-events:none;
}
.result__bg::after{   /* 文字を読ませるための薄い膜 */
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.34) 0,rgba(0,0,0,.14) 55%,rgba(0,0,0,0) 100%);
}
.result__scroll > *:not(.result__bg){position:relative;z-index:1}

/* 結果は上から順に出す */
.screen--result.is-active .reveal{animation:revealUp .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--d,0) * 1ms)}
@keyframes revealUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.rcard{
  position:relative;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--radius);
  backdrop-filter:blur(6px);
  padding:20px 18px;
  text-align:center;
  box-shadow:var(--shadow);
}
/* 「あなたの社不度は…」はマスキングテープ風のラベル */
.rcard__lead{
  position:relative;display:inline-block;margin:0;padding:9px 30px;
  color:#241f38;font-size:12.5px;font-weight:700;
  transform:rotate(-1.2deg);
}
.rcard__lead::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--tape, #fff) center/100% 100% no-repeat;
  border-radius:var(--tape-radius, 999px);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));
}
.rcard__levelrow{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
.rcard__level{
  padding:6px 16px;border-radius:10px;font-size:19px;font-weight:800;letter-spacing:.06em;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.25);
}
.rcard__level b{font-size:26px;margin-left:2px}
.rcard__range{
  padding:5px 13px;border-radius:999px;font-size:12px;font-weight:700;
  background:#fff;color:#2a2440;
}
.rcard__band{
  position:relative;margin:10px -6px 4px;padding:10px 12px;
  transform:rotate(-1.4deg);
}
.rcard__band::before{   /* 筆で引いた白帯（画像が無ければ角丸の白帯） */
  content:"";position:absolute;inset:0;
  background:var(--band, #fff) center/100% 100% no-repeat;
  border-radius:var(--band-radius, 10px);
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.4));
}
.rcard__name{
  position:relative;margin:0;
  font-size:clamp(30px,12vw,50px);font-weight:800;letter-spacing:.04em;line-height:1.15;
  color:var(--lvink, #221c33);
}
.rcard__catch{
  display:block;width:fit-content;max-width:78%;
  margin:12px auto 0 6px;
  font-size:15px;font-weight:700;line-height:1.5;color:#fff;
  text-align:left;transform:rotate(-2.5deg);
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.rcard__art{
  width:min(150px,40vw);aspect-ratio:1/2;margin:10px auto 2px;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.45));
}

.scorebox{display:flex;gap:10px;margin:16px 0 14px}
.scorebox__main,.typebox{
  flex:1;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.16);
  border-radius:14px;padding:12px 8px;display:flex;flex-direction:column;gap:3px;justify-content:center;
}
.scorebox__label,.typebox__label{font-size:11px;color:#d8d2ee;letter-spacing:.12em}
.scorebox__pct{font-size:clamp(26px,9vw,34px);font-weight:800;line-height:1;color:var(--lv)}
.scorebox__raw{font-size:11.5px;color:#b9b2d4}
.typebox__name{font-size:clamp(14px,5vw,19px);font-weight:800;line-height:1.3;color:#fff}

.stats{list-style:none;margin:0 0 16px;padding:14px 14px 10px;border-radius:14px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12)}
.stat{margin-bottom:11px;text-align:left}
.stat:last-child{margin-bottom:4px}
.stat__row{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;color:#e7e2f7}
.stat__row b{font-weight:800;color:var(--lv)}
.stat__bar{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.stat__fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--lv2),var(--lv));
  transition:width .9s cubic-bezier(.2,.8,.2,1);
}
.stat.is-top .stat__row span::after{content:" ★";color:#ffd66b}

.rcard__desc{
  margin:0;padding:14px;border-radius:12px;background:rgba(255,255,255,.92);color:#26213a;
  font-size:13.5px;line-height:1.85;text-align:left;font-weight:500;white-space:pre-line;
}
.rcard__typedesc{
  margin:10px 0 0;font-size:12.5px;line-height:1.8;color:#ded8f2;text-align:left;
}

.stats__note{margin:-8px 0 14px;font-size:11px;color:#ded8f2;text-align:right;letter-spacing:.04em}
.stats__note:empty{display:none}

.actions{display:flex;flex-direction:column;gap:9px;margin:16px 0 0}
.actions__sub{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.btn--share{
  background:#000;border:1px solid rgba(255,255,255,.35);
  font-size:16px;padding:16px 10px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  box-shadow:0 8px 22px rgba(0,0,0,.45);
}
.btn--share:hover{background:#15131f}
.btn--share .xmark{font-size:18px}
/* 画像つき共有（共有シート）に切り替わったときは X 固有の表示をやめる */
.btn--share.is-native .xmark{display:none}
.btn--share.is-native{background:#1c1630;border-color:rgba(255,255,255,.28)}
.btn--share.is-native::before{content:"🖼";font-size:17px}
.btn--wide{width:100%}
/* チャンネル登録の導線 */
/* ── 登録・購入の導線 ───────────────────────────────── */
.funnel{margin:18px 0 0}
.funnel__head{
  display:flex;align-items:center;gap:10px;
  margin:0 0 10px;padding:0;
  font-size:11.5px;font-weight:800;letter-spacing:.14em;color:#a79ec8;
}
.funnel__head::before,.funnel__head::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);
}
.funnel__head span{flex:none}

/* YouTube。いちばん押してほしいので、登録ボタンは1行使い切る */
.yt{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:9px 12px;
  margin:0;padding:14px;
  border-radius:16px;text-decoration:none;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(255,0,51,.18) 0,transparent 58%),
    linear-gradient(135deg,rgba(28,18,40,.94),rgba(14,11,26,.94));
  border:1px solid rgba(255,0,51,.34);
  box-shadow:0 10px 26px rgba(0,0,0,.45);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.yt:hover{transform:translateY(-2px);border-color:rgba(255,0,51,.6);box-shadow:0 14px 32px rgba(0,0,0,.55)}
.yt:active{transform:scale(.985)}
.yt__logo{
  grid-column:1;flex:none;width:84px;aspect-ratio:640/257;
  background:var(--logo, none) center/contain no-repeat;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
}
.yt__logo:not([style*="--logo"]){display:none}
.yt__logo:not([style*="--logo"]) + .yt__body{grid-column:1/-1}
.yt__body{grid-column:2;display:flex;flex-direction:column;min-width:0}
.yt__handle{font-size:15px;font-weight:800;color:#fff;letter-spacing:.02em}
.yt__at{margin-left:6px;font-size:11.5px;font-weight:700;color:#b9b0dd;letter-spacing:.02em}
.yt__lead{font-size:11.5px;color:#a79ec8;margin-top:3px;line-height:1.4}
.yt__btn{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:13px;border-radius:999px;
  background:#ff0033;color:#fff;font-size:15px;font-weight:800;letter-spacing:.04em;
  box-shadow:0 6px 16px rgba(255,0,51,.42);
  animation:ytpulse 2.6s ease-in-out infinite;
}
@keyframes ytpulse{
  0%,100%{box-shadow:0 6px 16px rgba(255,0,51,.42)}
  50%    {box-shadow:0 6px 28px rgba(255,0,51,.78)}
}
.yt:hover .yt__btn{background:#e6002e}
.yt__play{
  width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent #fff;
}

/* グッズ */
.shop{
  display:flex;align-items:center;gap:12px;
  margin:10px 0 0;padding:10px 12px 10px 10px;
  border-radius:16px;text-decoration:none;
  background:linear-gradient(135deg,rgba(24,18,40,.92),rgba(14,11,26,.92));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 22px rgba(0,0,0,.36);
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.shop:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.32);box-shadow:0 12px 28px rgba(0,0,0,.48)}
.shop:active{transform:scale(.985)}
.shop__img{
  /* height 属性を持たせているので、aspect-ratio を効かせるには height:auto が要る */
  flex:none;width:94px;height:auto;aspect-ratio:600/338;object-fit:cover;
  border-radius:11px;background:rgba(255,255,255,.06);display:block;
}
.shop__img:not([src]),.shop__img[src=""]{visibility:hidden}
.shop__body{display:flex;flex-direction:column;min-width:0;flex:1}
.shop__name{font-size:13.5px;font-weight:800;color:#fff;line-height:1.35}
.shop__lead{font-size:11px;color:#a79ec8;margin-top:3px;line-height:1.4;word-break:keep-all}
.shop__btn{
  flex:none;display:flex;align-items:center;gap:2px;
  padding:9px 14px;border-radius:999px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:12.5px;font-weight:800;letter-spacing:.04em;
}
.shop:hover .shop__btn{background:rgba(255,255,255,.2)}
.shop__arrow{font-size:16px;line-height:1;margin-top:-1px}

@media (prefers-reduced-motion:reduce){.yt__btn{animation:none}}
@media (max-width:360px){
  .shop__img{width:70px}
  .shop__btn{padding:9px 11px}
}

/* 広告枠。診断の邪魔をしないよう、シェア導線より下に置く */
.ad{
  display:block;margin:12px 0 0;padding:10px 12px 12px;
  border-radius:16px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12);
}
.ad[hidden]{display:none}
.ad__label{
  display:inline-block;margin-bottom:8px;padding:2px 9px;border-radius:999px;
  background:rgba(255,255,255,.14);color:#c9c1e6;
  font-size:10.5px;font-weight:700;letter-spacing:.12em;
}
.ad__body{display:flex;justify-content:center;min-height:50px}
.ad__body img{max-width:100%;height:auto;border-radius:10px;display:block}
.ad__body ins{display:block;width:100%}

.foot__link{color:#9990ba;text-decoration:underline;text-underline-offset:3px}
.foot__link:hover{color:#c4b5fd}

.agg{margin:12px 0 0;border-radius:14px;background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.12);overflow:hidden}
.agg summary{padding:13px 16px;font-size:13.5px;font-weight:700;cursor:pointer;list-style:none}
.agg summary::-webkit-details-marker{display:none}
.agg summary::after{content:" ▾";opacity:.6}
.agg[open] summary::after{content:" ▴"}
.agg__body{padding:0 16px 16px;font-size:12.5px;color:#ddd7f2;line-height:1.9}
.agg__row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(255,255,255,.14);padding:5px 0}
.agg__row:last-child{border-bottom:0}
.agg__note{margin:10px 0 0;font-size:11px;color:#9a93b8;line-height:1.7}
.result__foot{margin:18px 0 0;text-align:center;font-size:11.5px;color:#9990ba;letter-spacing:.08em}

/* toast */
.toast{
  position:fixed;left:50%;bottom:calc(26px + var(--sa-b));transform:translate(-50%,16px);
  max-width:min(92vw,400px);text-align:center;line-height:1.5;
  background:rgba(20,16,34,.96);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:13px;font-weight:600;padding:11px 20px;border-radius:999px;
  opacity:0;pointer-events:none;transition:opacity .22s, transform .22s;z-index:50;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 質問画面はアプリのように高さを固定し、はみ出す分はカードの中でスクロールさせる。
   こうしないと縦の狭い端末で「つぎへ／結果を見る」が画面外に押し出される。 */
.app:has(#screen-quiz.is-active){height:100svh}
.screen--quiz{min-height:0}

/* 縦の狭い端末では、キャラより設問と操作を優先する */
@media (max-height:700px){
  .qcard__art{display:none!important}
  .qcard{padding:18px 16px 14px}
  .opt{padding:11px 13px;font-size:14.5px}
  .opts{gap:8px}
}

/* 320px級の端末で判定名が2行に割れないように詰める */
@media (max-width:360px){
  .rcard__band{padding:8px 4px;margin-inline:-12px}
  .rcard__name{font-size:34px;letter-spacing:.01em}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s!important;transition-duration:.001s!important}
  .loadbar::after,.segbar span.now{animation:none!important}
  .loadlog li,.opt,.screen--result.is-active .reveal{animation:none!important;opacity:1;transform:none}
}