/* 実装指示66：診断結果の画面（スポットライト版 52c）
   すべて .result66 の中だけに効かせる（ほかの画面・使い方ガイドの .result-v40-* には触らない） */

/* ---- 外枠（About 58・キャラ紹介 54 と同じ作り） ---- */
#resultScreen:has(.result66){animation:none;width:calc(100% + 32px);margin-inline:-16px}
body:has(.result66){background:#EFEBE4;background-image:none}
@media (min-width:600px){main > #resultScreen:has(.result66){width:min(calc(100% - 32px),480px);margin-inline:auto}}
.result66{position:relative;background:#2E2C2A;--r66-neon:#E3CC8E;--r66-neon-line:rgba(227,204,142,.55);font-family:'M PLUS Rounded 1c',sans-serif;-webkit-font-smoothing:antialiased}

/* グループの色（コードの頭2文字。59・64 と同じ） */
.result66[data-group="VN"]{--r66-neon:#E9A27F;--r66-neon-line:rgba(233,162,127,.55)}
.result66[data-group="VF"]{--r66-neon:#E3B7C3;--r66-neon-line:rgba(227,183,195,.55)}
.result66[data-group="TN"]{--r66-neon:#95C2AE;--r66-neon-line:rgba(149,194,174,.55)}
.result66[data-group="TF"]{--r66-neon:#E3CC8E;--r66-neon-line:rgba(227,204,142,.55)}

/* ---- ヒーロー ---- */
.r66-hero{position:relative;overflow:hidden;padding:24px 18px 26px}
.r66-ticker{position:absolute;left:-10px;top:0;height:200%;pointer-events:none}
.r66-ticker-text{font:400 120px/.84 'Anton',sans-serif;color:transparent;-webkit-text-stroke:1.3px rgba(227,204,142,.11);animation:r66-drift 40s linear infinite}
.r66-head{position:relative}
.r66-kicker{font:800 11px/1 'Outfit',sans-serif;letter-spacing:.3em;color:#E9A27F;text-transform:uppercase}
.r66-title{margin:6px 0 0;font:400 26px/1.2 'Dela Gothic One',sans-serif;color:#fff;text-shadow:3px 3px 0 #B0603F}
.r66-stage{position:relative;margin-top:14px;height:380px}
.r66-code{position:absolute;left:-18px;top:0;margin:0;writing-mode:vertical-rl;font:400 150px/.82 'Anton',sans-serif;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:2px var(--r66-neon-line)}
.r66-beam{position:absolute;right:-18px;top:-40px;width:300px;height:420px;display:block;pointer-events:none;animation:r66-beam 3s ease-in-out infinite}
.r66-image{position:absolute;right:-10px;bottom:0;width:270px;height:350px;object-fit:contain;object-position:right bottom;display:block}
.r66-band{position:absolute;left:0;bottom:14px;transform:skewX(-10deg);background:var(--r66-neon);padding:8px 14px;box-shadow:4px 4px 0 #1A1917}
.r66-name{margin:0;transform:skewX(10deg);font:400 22px/1 'Dela Gothic One',sans-serif;color:#1A1917;white-space:nowrap}
.r66-tags{position:relative;margin-top:16px;display:grid;grid-template-columns:repeat(4,auto);justify-content:center;gap:6px}
.r66-tag{background:#1F1E1C;border:2px solid #86A596;border-radius:999px;padding:7px 11px;font:900 13px/1 'M PLUS Rounded 1c',sans-serif;color:#fff;white-space:nowrap}
.r66-tag:nth-child(2){border-color:#D38E6E}
.r66-tag:nth-child(3){border-color:#C48B9B}
.r66-tag:nth-child(4){border-color:#BE9A48}
.r66-desc{position:relative;margin:16px 0 0;font:700 13.5px/1.9 'M PLUS Rounded 1c',sans-serif;color:#CFC8BE}

/* ---- フレンドコード／マイページコード（renderFriendCode・renderMypageCode の HTML をそのまま使い、見た目だけ変える） ---- */
.r66-codes{padding:0 18px 8px;display:flex;flex-direction:column;gap:12px}
.result66 .mypage-code-card{position:relative;display:flex;align-items:center;gap:12px;margin:0;background:#1F1E1C;border:2px solid #E3CC8E;border-radius:16px;padding:14px 14px 14px 16px;box-shadow:none}
.result66 .friend-code-card{border-color:#95C2AE}
.result66 .mypage-code-content{flex:1;min-width:0}
.result66 .mypage-code-label{font:800 9.5px/1.4 'Outfit',sans-serif;letter-spacing:.2em;color:#E3CC8E;white-space:normal}
.result66 .friend-code-card .mypage-code-label{color:#95C2AE}
.result66 .mypage-code-name{display:block;margin:0;font:900 11px/1.4 'M PLUS Rounded 1c',sans-serif;letter-spacing:0}
.result66 .mypage-code-value{margin-top:6px;font:700 20px/1 'M PLUS 1 Code',monospace;letter-spacing:.04em;color:#fff;word-break:break-all}
.result66 .friend-code-card .mypage-code-value{letter-spacing:.06em}
.result66 .mypage-code-description{margin-top:6px;font:700 11.5px/1.5 'M PLUS Rounded 1c',sans-serif;color:#CFC8BE}
.result66 .friend-code-actions{display:flex;flex:none;flex-direction:column;gap:8px}
.result66 .mypage-code-copy{flex:none;width:72px;height:44px;min-height:0;padding:0;border:2px solid #E3CC8E;border-radius:10px;background:#2A2826;color:#E3CC8E;box-shadow:none;font:900 13px/1 'M PLUS Rounded 1c',sans-serif;cursor:pointer;transform:none}
.result66 .friend-code-actions .mypage-code-copy{height:36px;min-height:0;padding:0;border-color:#95C2AE;color:#95C2AE}
.result66 .friend-code-actions [data-send-friend-code]{background:#95C2AE;color:#1A1917}
.result66 .mypage-code-copy:hover,.result66 .mypage-code-copy:active{transform:none;box-shadow:none}

/* ---- 4軸のカード ---- */
.r66-axes{padding:30px 18px 10px;display:flex;flex-direction:column;gap:44px}
.r66-axis{position:relative;background:#1F1E1C;border:2px solid #4A4744;border-radius:20px;padding:18px 16px;--c1:#4F7365;--c2:#86A596;--c3:#B8CEC0}
.r66-axis:nth-child(2){--c1:#B0603F;--c2:#D38E6E;--c3:#EDBFA6}
.r66-axis:nth-child(3){--c1:#9E5E70;--c2:#C48B9B;--c3:#E3B7C3}
.r66-axis:nth-child(4){--c1:#8E6D22;--c2:#BE9A48;--c3:#E3CC8E}
.r66-axis-no{position:absolute;right:14px;top:12px;font:400 54px/1 'Anton',sans-serif;color:transparent;-webkit-text-stroke:1.5px var(--c3);opacity:.55;pointer-events:none}
.r66-axis-theme{position:relative;display:inline-block;margin:0;background:var(--c1);border-radius:8px;padding:6px 12px;font:900 14px/1 'M PLUS Rounded 1c',sans-serif;color:#fff}
.r66-axis-label{position:relative;margin:14px 0 0;padding-right:78px;font:400 21px/1.3 'Dela Gothic One',sans-serif;color:#fff;text-wrap:pretty}
.r66-axis-ends{margin-top:12px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.r66-axis-end{display:inline-flex;align-items:baseline;gap:4px;white-space:nowrap;font:900 13px/1 'M PLUS Rounded 1c',sans-serif;color:#A8A097}
.r66-axis-end.is-main{gap:5px;font-size:14px;color:#fff}
.r66-axis-pct{display:inline-flex;align-items:baseline;gap:1px}
.r66-axis-pct-num{font:900 34px/1 'M PLUS Rounded 1c',sans-serif;color:#FFF1C9;text-shadow:2.5px 2.5px 0 var(--c1)}
.r66-axis-pct-unit{font:900 14px/1 'M PLUS Rounded 1c',sans-serif;color:#FFF1C9}
.r66-axis-meter{position:relative;height:15px;margin-top:40px}
.r66-axis-track{box-sizing:content-box;display:grid;grid-template-columns:repeat(6,1fr);height:10px;overflow:hidden;border:2.5px solid #FFFBF0;border-radius:999px}
.r66-axis-cell{display:block;background:var(--c1)}
.r66-axis-cell:nth-child(2),.r66-axis-cell:nth-child(5){background:var(--c2)}
.r66-axis-cell:nth-child(3),.r66-axis-cell:nth-child(4){background:var(--c3)}
.r66-axis-cell:not(:last-child){border-right:2px solid #1A1917}
.r66-axis-cell:nth-child(3){border-right-width:2.5px}
.r66-axis-cell:first-child{border-radius:999px 0 0 999px}
.r66-axis-cell:last-child{border-radius:0 999px 999px 0}
.r66-axis-pin-hole{position:absolute;top:50%;width:10px;height:5px;margin:-2px 0 0 -5px;border-radius:50%;background:rgba(0,0,0,.5)}
.r66-axis-pin{position:absolute;bottom:50%;width:26px;height:43px;margin-left:-13px;transform-origin:50% 100%;transform:rotate(24deg)}
.r66-axis-pin svg{display:block;width:26px;height:43px}
.r66-axis-summary{margin:18px 0 0;font:700 13px/1.85 'M PLUS Rounded 1c',sans-serif;color:#CFC8BE}
.r66-axis-bullets{margin:14px 0 0;padding:12px 14px;list-style:none;background:#2A2826;border:1.5px solid #3A3734;border-radius:14px;display:flex;flex-direction:column;gap:8px}
.r66-axis-bullets li{display:flex;gap:9px;font:700 13px/1.6 'M PLUS Rounded 1c',sans-serif;color:#EFEBE4}
.r66-axis-bullets li::before{content:"";flex:none;width:7px;height:7px;margin-top:8px;border-radius:50%;background:var(--c3)}
.r66-axis-bullets li > span{min-width:0}

/* 旧8問の人への案内（デザインにないので、この画面のカードとボタンに合わせる） */
.r66-axis--notice{text-align:center}
.r66-notice-title{margin:0;font:400 19px/1.4 'Dela Gothic One',sans-serif;color:#fff}
.r66-notice-body{margin:8px 0 0;font:700 13px/1.85 'M PLUS Rounded 1c',sans-serif;color:#CFC8BE}
.r66-notice-button{margin-top:14px;width:100%;height:56px;display:flex;align-items:center;justify-content:center;border:2px solid #CFC8BE;border-radius:16px;background:#2A2826;color:#EFEBE4;font:900 16px/1 'M PLUS Rounded 1c',sans-serif;text-decoration:none}

/* ---- ボタン ---- */
.r66-actions{padding:28px 18px 40px;display:flex;flex-direction:column;gap:14px}
.r66-divider{display:block;height:2px;background:rgba(227,204,142,.35)}
.r66-action-mypage{width:100%;height:60px;border:2.5px solid #E3CC8E;border-radius:16px;background:linear-gradient(180deg,#2A2826,#1A1917);color:#E3CC8E;font:400 19px/1 'Dela Gothic One',sans-serif;box-shadow:inset 0 1px 0 rgba(255,241,201,.25),4px 5px 0 #B0603F;cursor:pointer}
.r66-action-share{width:100%;height:56px;border:2px solid #CFC8BE;border-radius:16px;background:#2A2826;color:#EFEBE4;font:900 16px/1 'M PLUS Rounded 1c',sans-serif;cursor:pointer}
.r66-action-share:disabled{cursor:wait;opacity:.65}
.result66 button:focus-visible,.result66 a:focus-visible{outline:3px solid #E3CC8E;outline-offset:3px}

/* ---- 動き ---- */
.result66.is-entering .r66-image{animation:r66-pop .6s cubic-bezier(.3,1.5,.5,1) .15s both}
@keyframes r66-drift{from{transform:translateY(0)}to{transform:translateY(-50%)}}
@keyframes r66-beam{0%,100%{opacity:.5}50%{opacity:.9}}
@keyframes r66-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.05)}100%{transform:none}}

/* 幅が狭いスマホ（320px など）：タグ4つを1行に収める */
@media (max-width:359px){
  .r66-tags{gap:4px}
  .r66-tag{padding:6px 7px;font-size:12px}
}

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