/* =========================================
   exam.css — だーくま博士の心の星座診断 専用UI
   （診断リニューアル版。styles.css の後に読み込む）
   ========================================= */

.exam-page {
  --sd-glass: rgba(7, 14, 34, .78);
  --sd-glass-soft: rgba(13, 23, 48, .65);
  --sd-line: rgba(56, 189, 248, .28);
  --sd-cyan: #38bdf8;
  --sd-indigo: #818cf8;
  --sd-gold: #facc15;
  --sd-grad: linear-gradient(135deg, #38bdf8 0%, #818cf8 100%);
  --sd-serif: "Noto Serif KR", "Zen Old Mincho", "Noto Serif KR", "Noto Serif JP", serif;
}

/* ===== ステージ（1枚のガラスパネル） ===== */
.sd-stage {
  position: relative;
  max-width: 720px;
  margin: 48px auto 96px;
  padding: clamp(28px, 5vw, 52px);
  background: var(--sd-glass);
  border: 1px solid var(--sd-line);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(255, 255, 255, .03) inset,
    0 0 120px rgba(56, 189, 248, .06) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}

/* パネル上辺の光 */
.sd-stage::before {
  content: "";
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, .8), rgba(250, 204, 21, .6), transparent);
}

/* hidden属性をdisplay指定より優先させる */
.sd-stage [hidden],
.sd-screen[hidden] { display: none !important; }

.sd-screen { animation: sd-fadein .5s ease both; }
@keyframes sd-fadein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* ===== イントロ ===== */
.sd-intro { text-align: center; }

.sd-eyebrow {
  font-family: "Montserrat", sans-serif;
  font-size: .72rem;
  letter-spacing: .42em;
  color: var(--sd-cyan);
  margin: 0 0 14px;
}

.sd-title {
  font-family: var(--sd-serif);
  font-weight: 900;
  font-size: clamp(1.9rem, 5.5vw, 2.8rem);
  letter-spacing: .08em;
  line-height: 1.3;
  margin: 0 0 6px;
  background: linear-gradient(180deg, #fff 55%, #9cc9ef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sd-title-sub {
  font-size: .9rem;
  letter-spacing: .2em;
  color: var(--muted);
  margin: 0 0 26px;
}

.sd-lead {
  font-size: .95rem;
  line-height: 2;
  color: var(--muted);
  margin: 0 auto 24px;
  max-width: 30em;
}

.sd-intro-chara {
  width: clamp(120px, 24vw, 168px);
  height: auto;
  margin: 4px auto 20px;
  display: block;
  filter: drop-shadow(0 14px 30px rgba(56, 189, 248, .25));
  animation: sd-float 4.2s ease-in-out infinite;
}
@keyframes sd-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* イントロ：8星座のだーくまちゃん＋中央の博士（9体ラインナップ）
   中央の博士が最大・最前面。外側へ向かって小さく・奥へ重なる。 */
.sd-intro-lineup {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 4px auto 20px;
  max-width: 760px;
}
.sd-intro-lineup img {
  height: auto;
  display: block;
  position: relative;
  filter: drop-shadow(0 10px 22px rgba(56, 189, 248, .18));
}
.sd-intro-lineup img + img { margin-left: clamp(-26px, -2.4vw, -10px); }
/* 外側→内側の順に大きく・手前に */
.sd-intro-lineup img:nth-child(1), .sd-intro-lineup img:nth-child(9) { width: clamp(42px, 8.5vw, 66px);  z-index: 1; }
.sd-intro-lineup img:nth-child(2), .sd-intro-lineup img:nth-child(8) { width: clamp(48px, 10vw, 78px);   z-index: 2; }
.sd-intro-lineup img:nth-child(3), .sd-intro-lineup img:nth-child(7) { width: clamp(54px, 11.5vw, 90px); z-index: 3; }
.sd-intro-lineup img:nth-child(4), .sd-intro-lineup img:nth-child(6) { width: clamp(60px, 13vw, 102px);  z-index: 4; }
/* 中央の博士：既存の浮遊アニメ・発光を維持しつつ最前面 */
.sd-intro-lineup .sd-intro-chara { margin-top: 0; margin-bottom: 0; z-index: 5; }
/* ペルセウス（6番目）は剣で横に広い素材のため、博士との間隔を詰める */
.sd-intro-lineup img:nth-child(6) { margin-left: clamp(-48px, -4.2vw, -22px); }

/* スマホ：全9体が収まるよう縮小し、重なりを深くする */
@media (max-width: 480px) {
  .sd-intro-lineup img { flex-shrink: 0; }
  .sd-intro-lineup img + img { margin-left: -9px; }
  .sd-intro-lineup img:nth-child(1), .sd-intro-lineup img:nth-child(9) { width: 30px; }
  .sd-intro-lineup img:nth-child(2), .sd-intro-lineup img:nth-child(8) { width: 35px; }
  .sd-intro-lineup img:nth-child(3), .sd-intro-lineup img:nth-child(7) { width: 40px; }
  .sd-intro-lineup img:nth-child(4), .sd-intro-lineup img:nth-child(6) { width: 46px; }
  .sd-intro-lineup .sd-intro-chara { width: 100px; }
  .sd-intro-lineup img:nth-child(6) { margin-left: -16px; }
}

/* 誕生日入力 */
.sd-birth {
  margin: 0 auto 22px;
  max-width: 360px;
}
.sd-birth-label {
  display: block;
  font-size: .8rem;
  letter-spacing: .14em;
  color: var(--muted);
  margin-bottom: 10px;
}
.sd-birth-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.sd-birth-row input {
  width: 5.2em;
  padding: 13px 6px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 1.05rem;
  letter-spacing: .08em;
  color: var(--fg);
  background: rgba(2, 6, 23, .7);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.sd-birth-row input:focus {
  border-color: var(--sd-cyan);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}
.sd-birth-row input#bMonth,
.sd-birth-row input#bDay { width: 3.6em; }
.sd-birth-sep { color: var(--muted); opacity: .6; }
.sd-birth-hint {
  font-size: .72rem;
  color: var(--muted);
  opacity: .75;
  margin-top: 10px;
}
.sd-birth-error {
  font-size: .78rem;
  color: #fda4af;
  margin-top: 10px;
}

/* CTA */
.sd-cta {
  appearance: none;
  border: 0;
  cursor: pointer;
  display: inline-block;
  padding: 16px 54px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #03142a;
  background: var(--sd-grad);
  box-shadow: 0 10px 30px rgba(56, 189, 248, .35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.sd-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(56, 189, 248, .5);
  filter: brightness(1.08);
}
.sd-cta:active { transform: translateY(0) scale(.98); }

.sd-note {
  font-family: "Montserrat", "Noto Sans KR", "Noto Sans JP", sans-serif;
  font-size: .7rem;
  letter-spacing: .22em;
  color: var(--muted);
  opacity: .65;
  margin-top: 16px;
}

/* ===== クイズ画面 ===== */
.sd-progress {
  position: relative;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  overflow: hidden;
  margin-bottom: 10px;
}
.sd-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sd-cyan), var(--sd-gold));
  transition: width .45s cubic-bezier(.6, 0, .2, 1);
}
.sd-qnum {
  display: flex;
  justify-content: space-between;
  font-family: "Montserrat", sans-serif;
  font-size: .72rem;
  letter-spacing: .3em;
  color: var(--muted);
  margin: 0 0 14px;
}
.sd-qnum b { color: var(--sd-cyan); font-weight: 600; }

/* ===== 星座レイヤー（ヘッダー下〜カード上のスカイバンド） ===== */
.sd-constellation {
  position: fixed;
  top: clamp(70px, 9vh, 100px);
  left: 0;
  width: 100%;
  height: clamp(170px, 30vh, 280px);
  z-index: 0;
  pointer-events: none;
}

/* クイズ中はカードを下げ、上空の星座バンドを常に見せる。
   パネルも薄くして星空の上で答えている感覚にする */
body.is-observing .sd-stage {
  margin-top: clamp(200px, 30vh, 290px);
  background: rgba(7, 14, 34, .45);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-color: rgba(56, 189, 248, .14);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

/* 結果画面でも上空を空けて、完成した星座を見せる */
body.is-result .sd-stage {
  margin-top: clamp(210px, 32vh, 320px);
}

/* 灯った星（staff.htmlのカシオペアと同じダイヤモンドグリント様式）
   外側<g>が位置（transformで移動・収束アニメ）、内側<g>が瞬き */
.sd-star {
  transition: transform 1.2s cubic-bezier(.4, 0, .2, 1);
  filter: drop-shadow(0 0 7px rgba(56, 189, 248, .9));
}
.sd-star-inner {
  transform-box: fill-box;
  transform-origin: center;
  animation: sd-star-pop .6s cubic-bezier(.2, 1.6, .4, 1) both;
}
.sd-star--twinkle .sd-star-inner {
  animation: sd-star-pop .6s cubic-bezier(.2, 1.6, .4, 1) both, sd-twinkle 2.9s ease-in-out 1s infinite;
}
@keyframes sd-star-pop {
  from { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.7); opacity: 1; }
  to   { transform: scale(1); opacity: 1; }
}
@keyframes sd-twinkle {
  0%, 100% { opacity: 1; }
  50%      { opacity: .58; }
}
.sd-star-halo {
  fill: none;
  stroke: rgba(180, 230, 255, .55);
  animation: sd-halo 1s ease-out both;
}
@keyframes sd-halo {
  from { stroke-width: 1; opacity: 1; r: 4; }
  to   { stroke-width: 0; opacity: 0; r: 22; }
}

/* 歯車ルート進行中（レベル2〜）：星がわずかに金色を帯びはじめる */
body.sd-glitch-2 .sd-star {
  filter: sepia(.55) saturate(2) brightness(1.05) drop-shadow(0 0 7px rgba(250, 204, 21, .6));
}
/* はぐるま座確定：完全な金色 */
.is-haguruma-result .sd-star {
  filter: sepia(1) saturate(2.6) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 8px rgba(250, 204, 21, .85));
}

/* 質問文 */
.sd-question {
  font-family: var(--sd-serif);
  font-weight: 700;
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  line-height: 1.7;
  letter-spacing: .04em;
  text-align: center;
  min-height: 3.2em;
  margin: 0 0 22px;
}

/* 選択肢 */
.sd-choices {
  display: grid;
  gap: 12px;
}
.sd-choice {
  appearance: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: .95rem;
  line-height: 1.6;
  color: var(--fg);
  padding: 16px 20px 16px 52px;
  position: relative;
  background: var(--sd-glass-soft);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 14px;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.sd-choice::before {
  /* 選択マーカー（星） */
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: rgba(222, 231, 248, .25);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  transition: background .18s, transform .18s;
}
.sd-choice:hover {
  border-color: var(--sd-cyan);
  background: rgba(56, 189, 248, .08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(2, 6, 23, .6);
}
.sd-choice:hover::before {
  background: var(--sd-cyan);
  transform: translateY(-50%) rotate(36deg);
}
.sd-choice.is-selected {
  border-color: var(--sd-gold);
  background: linear-gradient(135deg, rgba(56, 189, 248, .16), rgba(250, 204, 21, .12));
  box-shadow: 0 0 0 3px rgba(250, 204, 21, .15);
}
.sd-choice.is-selected::before {
  background: var(--sd-gold);
  transform: translateY(-50%) scale(1.3) rotate(72deg);
}
.sd-choice:disabled { cursor: default; opacity: .92; }

/* 質問切り替えアニメ */
.sd-quiz-body { transition: opacity .26s ease, transform .26s ease; }
.sd-quiz-body.is-leaving { opacity: 0; transform: translateX(-22px); }
.sd-quiz-body.is-entering { opacity: 0; transform: translateX(22px); transition: none; }

/* ===== 結果画面 ===== */
.sd-result { text-align: center; }

.sd-result-hero {
  position: relative;
  margin: -10px -10px 18px;
  min-height: clamp(230px, 40vw, 310px);
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(56, 189, 248, .16), transparent 65%),
    radial-gradient(ellipse at 85% -10%, rgba(129, 140, 248, .16), transparent 55%),
    rgba(2, 6, 23, .85);
  border: 1px solid rgba(56, 189, 248, .16);
}

/* キャラ背後の光だまり（黒キャラの視認性確保） */
.sd-result-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40px;
  width: 420px;
  height: 320px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center,
      rgba(186, 230, 253, .34) 0%,
      rgba(56, 189, 248, .18) 38%,
      transparent 70%);
  pointer-events: none;
}

/* 星座線 */
.sd-constline {
  fill: none;
  stroke: rgba(125, 211, 252, .85);
  stroke-width: 1.1;
  stroke-linecap: round;
  filter: drop-shadow(0 0 7px rgba(56, 189, 248, .9));
}
.sd-constline.is-drawing {
  animation: sd-draw 2s ease .4s both;
}
@keyframes sd-draw {
  from { stroke-dashoffset: var(--dash, 1400); }
  to   { stroke-dashoffset: 0; }
}

.sd-result-chara {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  width: clamp(190px, 42vw, 270px);
  height: auto;
  /* グローエフェクト（黒いだーくまを浮かび上がらせる） */
  filter:
    drop-shadow(0 0 4px rgba(224, 242, 254, .95))
    drop-shadow(0 0 16px rgba(125, 211, 252, .7))
    drop-shadow(0 0 44px rgba(56, 189, 248, .5));
  animation: sd-chara-in 1s cubic-bezier(.2, 1.2, .3, 1) 1.1s both;
}
@keyframes sd-chara-in {
  from { opacity: 0; transform: translateX(-50%) translateY(46px) scale(.86); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.sd-result-label {
  font-family: "Montserrat", sans-serif;
  font-size: .68rem;
  letter-spacing: .42em;
  color: var(--sd-cyan);
  margin: 20px 0 8px;
  animation: sd-fadein .6s ease 1.5s both;
}

.sd-result-title {
  font-family: var(--sd-serif);
  font-weight: 900;
  font-size: clamp(1.7rem, 5.4vw, 2.5rem);
  letter-spacing: .1em;
  line-height: 1.35;
  margin: 0 0 4px;
  background: linear-gradient(120deg, #fff 30%, var(--sd-gold) 75%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sd-fadein .7s ease 1.65s both;
}

.sd-result-const {
  font-family: var(--sd-serif);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .3em;
  color: var(--muted);
  margin: 0 0 14px;
  animation: sd-fadein .7s ease 1.8s both;
}

.sd-result-catch {
  font-family: var(--sd-serif);
  font-size: 1rem;
  letter-spacing: .12em;
  color: #bae6fd;
  margin: 0 0 18px;
  animation: sd-fadein .7s ease 1.95s both;
}

.sd-badge {
  display: inline-block;
  font-family: "Montserrat", "Noto Sans KR", "Noto Sans JP", sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  color: var(--sd-gold);
  border: 1px solid rgba(250, 204, 21, .4);
  border-radius: 999px;
  padding: 7px 18px;
  margin-bottom: 30px;
  animation: sd-fadein .7s ease 2.1s both;
}

/* 詳細カード群 */
.sd-detail,
.sd-cols,
.sd-partner {
  text-align: left;
  animation: sd-fadein .7s ease 2.25s both;
}
.sd-detail {
  background: var(--sd-glass-soft);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 14px;
}
.sd-h {
  font-family: "Montserrat", "Noto Sans KR", "Noto Sans JP", sans-serif;
  font-size: .7rem;
  letter-spacing: .34em;
  color: var(--sd-cyan);
  margin: 0 0 12px;
}
.sd-detail p {
  font-size: .92rem;
  line-height: 2.05;
  color: var(--muted);
  margin: 0;
}

.sd-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
@media (max-width: 560px) {
  .sd-cols { grid-template-columns: 1fr; }
}
.sd-col {
  background: var(--sd-glass-soft);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  padding: 20px 22px;
}
.sd-col ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sd-col li {
  position: relative;
  font-size: .88rem;
  line-height: 1.7;
  color: var(--muted);
  padding-left: 1.4em;
  margin-bottom: 9px;
}
.sd-col li::before {
  content: "✦";
  position: absolute;
  left: 0;
  color: var(--sd-gold);
  font-size: .8em;
}
.sd-col--caution li::before { color: var(--sd-indigo); }

.sd-partner {
  background: linear-gradient(135deg, rgba(56, 189, 248, .1), rgba(129, 140, 248, .08));
  border: 1px solid rgba(56, 189, 248, .22);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 30px;
}
.sd-partner-name {
  font-family: var(--sd-serif);
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .12em;
  margin: 0 0 6px;
  color: #fff;
}
.sd-partner-note {
  font-size: .85rem;
  line-height: 1.8;
  color: var(--muted);
  margin: 0;
}

/* 「友だちにも観測させる」誘導とスクショ用ウォーターマーク */
.sd-collect {
  font-family: var(--sd-serif);
  font-size: .92rem;
  line-height: 2;
  letter-spacing: .1em;
  color: var(--muted);
  margin: 0 0 26px;
  animation: sd-fadein .7s ease 2.35s both;
}
.sd-watermark {
  font-family: "Montserrat", "Noto Sans KR", "Noto Sans JP", sans-serif;
  font-size: .62rem;
  letter-spacing: .26em;
  color: rgba(222, 231, 248, .45);
  margin: 26px 0 0;
  animation: sd-fadein .7s ease 2.5s both;
}

/* アクション */
.sd-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  animation: sd-fadein .7s ease 2.4s both;
}
.sd-share {
  display: inline-block;
  padding: 14px 38px;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  color: #fff;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .25);
  transition: transform .18s, box-shadow .18s;
}
.sd-share:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .6);
  color: #fff;
}
/* テストプレイモード: share_gate.php がロックを返した時（html.arg-share-locked） */
html.arg-share-locked .sd-share {
  opacity: .35;
  filter: grayscale(1);
  pointer-events: none;
}
.arg-share-locked-note {
  display: none;
}
html.arg-share-locked .arg-share-locked-note {
  display: block;
  margin: 12px 0 0;
  font-size: .78rem;
  letter-spacing: .06em;
  color: rgba(222, 231, 248, .5);
  text-align: center;
  animation: sd-fadein .7s ease 2.4s both;
}
.sd-retry {
  appearance: none;
  cursor: pointer;
  padding: 14px 38px;
  border-radius: 999px;
  font-family: inherit;
  font-size: .92rem;
  letter-spacing: .1em;
  color: var(--fg);
  background: transparent;
  border: 1px solid rgba(222, 231, 248, .35);
  transition: border-color .18s, background .18s, transform .18s;
}
.sd-retry:hover {
  border-color: var(--sd-cyan);
  background: rgba(56, 189, 248, .08);
  transform: translateY(-2px);
}

/* =========================================
   グリッチ演出
   sd-glitch-1/2/3 … 歯車ルート進行中（3/5/7問連続で段階UP）
   is-haguruma-result … 確定時の全面崩壊
   ========================================= */

/* --- レベル1：ごく稀に画面がまたたく --- */
body.sd-glitch-1 .sd-stage {
  animation: sd-flicker-soft 9s steps(1) infinite;
}
@keyframes sd-flicker-soft {
  0%, 96.5%, 98%, 100% { opacity: 1; filter: none; }
  97%   { opacity: .92; filter: hue-rotate(12deg); }
  97.6% { opacity: 1; filter: none; }
  99%   { opacity: .95; }
}

/* --- レベル2：文字に色ズレ・ノイズが薄く走る --- */
body.sd-glitch-2 .sd-question {
  animation: sd-rgb-split 6s steps(1) infinite;
}
@keyframes sd-rgb-split {
  0%, 93%, 100% { text-shadow: none; transform: none; }
  94%  { text-shadow: 2px 0 rgba(239, 68, 68, .8), -2px 0 rgba(56, 189, 248, .8); transform: translateX(1px); }
  95%  { text-shadow: none; transform: none; }
  97%  { text-shadow: -3px 0 rgba(239, 68, 68, .7), 3px 0 rgba(56, 189, 248, .7); transform: skewX(2deg); }
  98%  { text-shadow: none; transform: none; }
}
body.sd-glitch-2 .exam-noise {
  animation: sd-noise-faint 7s steps(2) infinite;
}
@keyframes sd-noise-faint {
  0%, 91%, 96%, 100% { opacity: 0; }
  92%  { opacity: .35; }
  93%  { opacity: 0; }
  94.5% { opacity: .25; }
}

/* --- レベル3：星座線も歪み、頻度が上がる --- */
body.sd-glitch-3 .sd-stage {
  animation: sd-flicker-hard 4.5s steps(1) infinite;
}
@keyframes sd-flicker-hard {
  0%, 88%, 91%, 95%, 100% { opacity: 1; filter: none; transform: none; }
  89%  { opacity: .85; filter: hue-rotate(40deg) contrast(1.3); transform: translateX(-3px); }
  90%  { opacity: 1; transform: translateX(2px) skewX(-1deg); }
  96%  { opacity: .9; filter: saturate(2); }
  97%  { opacity: 1; filter: none; }
}
body.sd-glitch-3 .sd-constellation {
  animation: sd-layer-shift 4.5s steps(1) infinite;
}
@keyframes sd-layer-shift {
  0%, 90%, 94%, 100% { transform: none; filter: none; }
  91%  { transform: translate(4px, -2px); filter: hue-rotate(120deg); }
  92.5% { transform: translate(-3px, 1px); filter: none; }
}
body.sd-glitch-3 .exam-noise {
  animation: sd-noise-faint 3.5s steps(2) infinite;
}

/* --- はぐるま座確定：全面崩壊 ---
   ※操作性維持のため transform は数px・オーバーレイは全て pointer-events:none */

/* 出現直後のバースト（html要素に約2秒だけ付与） */
html.sd-haguruma-burst::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  animation: sd-burst-flash 2s steps(1) 1 both;
}
@keyframes sd-burst-flash {
  0%   { background: rgba(255, 255, 255, .9); }
  4%   { background: rgba(239, 68, 68, .45); }
  8%   { background: transparent; }
  13%  { background: rgba(250, 204, 21, .35); }
  16%  { background: transparent; }
  24%  { background: rgba(255, 255, 255, .6); }
  27%  { background: transparent; }
  38%  { background: rgba(239, 68, 68, .3); }
  41%  { background: transparent; }
  60%  { background: rgba(255, 255, 255, .35); }
  62%  { background: transparent; }
  100% { background: transparent; }
}
html.sd-haguruma-burst .sd-stage {
  animation: sd-burst-shake .14s steps(2) 14;
}
@keyframes sd-burst-shake {
  0%   { transform: translate(-7px, 3px) skewX(-2deg); }
  50%  { transform: translate(6px, -4px) skewX(2deg); }
  100% { transform: translate(-3px, 2px); }
}

/* 常時：カードの明滅・ジッター（強） */
.is-haguruma-result .sd-stage {
  border-color: rgba(250, 204, 21, .4);
  animation: sd-haguruma-jitter 2.2s steps(1) infinite;
}
@keyframes sd-haguruma-jitter {
  0%, 34%, 40%, 66%, 71%, 90%, 100% { transform: none; filter: none; opacity: 1; }
  35%  { transform: translateX(-6px) skewX(-2deg); filter: hue-rotate(40deg) contrast(1.35); }
  37%  { transform: translateX(5px); filter: none; opacity: .85; }
  38.5% { transform: translate(2px, -3px); opacity: 1; }
  67%  { transform: translateY(3px) skewX(2.5deg); filter: saturate(2.2) hue-rotate(-30deg); }
  69%  { transform: none; opacity: .8; }
  91%  { transform: translateX(4px); filter: invert(.12) contrast(1.2); }
  93%  { transform: none; filter: none; }
}

/* 常時：ノイズの嵐（強） */
.is-haguruma-result .exam-noise {
  animation: sd-noise-storm 2.1s steps(3) infinite;
}
@keyframes sd-noise-storm {
  0%, 26%, 52%, 100% { opacity: 0; }
  5%   { opacity: .85; }
  9%   { opacity: .2; }
  12%  { opacity: .6; }
  15%  { opacity: 0; }
  30%  { opacity: .7; }
  35%  { opacity: .15; }
  56%  { opacity: .9; }
  60%  { opacity: .25; }
  64%  { opacity: .5; }
  68%  { opacity: 0; }
  82%  { opacity: .45; }
  86%  { opacity: 0; }
}

/* 常時：横切るグリッチバー（色ズレの帯） */
.is-haguruma-result::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9996;
  pointer-events: none;
  mix-blend-mode: screen;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 64px,
    rgba(239, 68, 68, .14) 64px 68px,
    transparent 68px 150px,
    rgba(56, 189, 248, .12) 150px 153px,
    transparent 153px 230px,
    rgba(250, 204, 21, .1) 230px 236px
  );
  animation: sd-bars-jump 1.3s steps(5) infinite;
}
@keyframes sd-bars-jump {
  0%   { transform: translateY(0); opacity: 0; }
  20%  { transform: translateY(-40px); opacity: 1; }
  40%  { transform: translateY(90px); opacity: 0; }
  60%  { transform: translateY(-130px); opacity: .8; }
  80%  { transform: translateY(40px); opacity: 0; }
  100% { transform: translateY(0); opacity: .5; }
}

/* 常時：走査線（全画面・クリックを妨げない） */
.is-haguruma-result::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9997;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent 0 3px,
    rgba(250, 204, 21, .05) 3px 4px,
    transparent 4px 7px,
    rgba(239, 68, 68, .045) 7px 8px
  );
  animation: sd-scan-drift 5s linear infinite;
}
@keyframes sd-scan-drift {
  from { transform: translateY(0); }
  to   { transform: translateY(8px); }
}

/* 常時：背景の星空ごと色が壊れる */
.is-haguruma-result .bg-stage {
  animation: sd-bg-corrupt 5.5s steps(1) infinite;
}
@keyframes sd-bg-corrupt {
  0%, 86%, 92%, 100% { filter: none; }
  87%  { filter: hue-rotate(160deg) saturate(2.5); }
  89%  { filter: invert(.85); }
  90%  { filter: hue-rotate(-60deg); }
}
.is-haguruma-result .sd-result-hero {
  border-color: rgba(250, 204, 21, .45);
}
.is-haguruma-result .sd-result-hero::before {
  background: radial-gradient(ellipse at center,
      rgba(254, 240, 138, .32) 0%,
      rgba(250, 204, 21, .16) 38%,
      transparent 70%);
}
.is-haguruma-result .sd-result-chara {
  filter:
    drop-shadow(0 0 4px rgba(254, 240, 138, .95))
    drop-shadow(0 0 18px rgba(250, 204, 21, .75))
    drop-shadow(0 0 50px rgba(239, 68, 68, .45));
  animation: sd-chara-in 1s cubic-bezier(.2, 1.2, .3, 1) 1.1s both, sd-chara-glitch 3.4s steps(1) 3s infinite;
}
@keyframes sd-chara-glitch {
  0%, 90%, 94%, 100% { transform: translateX(-50%); filter:
    drop-shadow(0 0 4px rgba(254, 240, 138, .95))
    drop-shadow(0 0 18px rgba(250, 204, 21, .75))
    drop-shadow(0 0 50px rgba(239, 68, 68, .45)); }
  91% { transform: translateX(calc(-50% + 5px)) skewX(3deg); filter:
    drop-shadow(-4px 0 0 rgba(239, 68, 68, .8))
    drop-shadow(4px 0 0 rgba(56, 189, 248, .8)); }
  92.5% { transform: translateX(calc(-50% - 4px)); }
}
.is-haguruma-result .sd-constline {
  stroke: rgba(250, 204, 21, .85);
  filter: drop-shadow(0 0 8px rgba(250, 204, 21, .7));
}
.is-haguruma-result .sd-result-title {
  background: linear-gradient(120deg, var(--sd-gold) 30%, #ef4444 80%);
  -webkit-background-clip: text;
  background-clip: text;
  animation: sd-fadein .7s ease 1.65s both, sd-haguruma-flicker 2.8s steps(1) 2.8s infinite;
}
@keyframes sd-haguruma-flicker {
  0%, 91% { transform: none; opacity: 1; }
  92% { transform: translateX(3px) skewX(5deg); opacity: .6; }
  94% { transform: translateX(-3px); opacity: 1; }
  96% { transform: skewX(-4deg); opacity: .75; }
  98% { transform: none; opacity: 1; }
}
.is-haguruma-result .sd-badge {
  color: #fda4af;
  border-color: rgba(239, 68, 68, .5);
}
.sd-glitch-text {
  white-space: pre-line;
  font-family: "Montserrat", "Noto Sans KR", "Noto Sans JP", monospace;
  font-size: .8rem;
  letter-spacing: .08em;
  line-height: 2;
  color: rgba(250, 204, 21, .75);
  margin: 8px 0 0;
}