/* KOF'98 IF ファイター診断 — 公式サイト(KOF'98 Infinite Fighting)準拠デザイン
   配色・フォント・装飾は strobo-nights.jp/works/kof98_04 の style.css に合わせている */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
button { outline: none; border: none; background: transparent; cursor: pointer; }
button:focus-visible, a:focus-visible, .select-cell:focus-visible {
  outline: 2px solid #ff8c00;
  outline-offset: 2px;
}

:root {
  --red-dk:     #7a0000;
  --red-bg:     #120000;
  --red-bright: #ff2200;
  --orange:     #ff5500;
  --orange-lt:  #ff8c00;
  --black:      #080000;
  --black2:     #160000;
  --white:      #fff8f0;
  --gray:       #999;
  --ease:       cubic-bezier(0.25,0.46,0.45,0.94);
  --font-en:    'Bebas Neue', sans-serif;
  --font-label: 'Oswald', sans-serif;
  --font-jp:    'Noto Sans JP', sans-serif;
}

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

body {
  /* トップは公式 ABOUT(catch-sec)と同じ「キングの写った背景写真」。
     オーバーレイは公式(.45)よりやや濃い程度に留めてキングを見せる */
  background:
    radial-gradient(ellipse 90% 55% at 50% 118%, rgba(150,25,0,.4) 0%, transparent 60%) fixed,
    linear-gradient(160deg, rgba(26,0,0,.60) 0%, rgba(18,0,0,.66) 55%, rgba(26,0,0,.62) 100%) fixed,
    url('../img/bg/bg_catch.webp') top center / cover no-repeat fixed;
  background-color: var(--black);
  color: var(--white);
  font-family: var(--font-jp);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 公式サイトの .sec-bg-slash と同じ斜線パターンを全面に敷く */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(
    -55deg,
    rgba(255,85,0,.03) 0px, rgba(255,85,0,.03) 1px,
    transparent 1px, transparent 70px
  );
  pointer-events: none;
  z-index: 0;
}

.frame {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 1.5rem 0;
}

/* ===== 炎演出(js/fire.js) ===== */
#fireEmbers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}
#fireBottom {
  position: fixed;
  left: 0; bottom: 0;
  width: 100%;
  height: 176px;
  pointer-events: none;
  z-index: 14;
  opacity: .6;                           /* コンテンツを覆いすぎない強さに */
  filter: blur(1.5px) saturate(1.15);   /* セルのカクつきを馴染ませて炎らしく */
}

/* ===== 出現アニメーション（公式の fade-in / charReveal 相当） ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes charReveal {
  from { opacity: 0; transform: scale(3); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes badgePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,85,0,.4); }
  50%      { box-shadow: 0 0 0 8px rgba(255,85,0,0); }
}
.fade-up   { animation: fadeUp .7s var(--ease) both; }
.fade-up-2 { animation: fadeUp .7s var(--ease) .15s both; }
.fade-up-3 { animation: fadeUp .7s var(--ease) .3s both; }

/* ===== ヘッダー ===== */
header {
  text-align: center;
  padding-top: 28px;
  position: relative;
}
.logo-img {
  width: min(420px, 78vw);
  margin: 0 auto;
  filter: drop-shadow(0 6px 24px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,85,0,.25));
}
header.compact .logo-img { width: min(300px, 60vw); }
.logo-sub {
  margin-top: 14px;
  font-family: var(--font-en);
  font-size: clamp(1.2rem, 2.6vw, 1.7rem);
  letter-spacing: .3em;
  color: var(--orange-lt);
  line-height: 1;
  text-shadow: 0 0 24px rgba(255,85,0,.5);
}
.logo-main {
  position: relative;
  display: inline-block;
  margin-top: .2rem;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(2.4rem, 7vw, 4.4rem);
  letter-spacing: .06em;
  line-height: 1.15;
  padding: 0 .12em .3rem;
  background: linear-gradient(180deg, #ffffff 0%, #ffe6d2 55%, var(--orange-lt) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
/* 公式の .char-name::after と同じ、斜めに流れる下線 */
.logo-main::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--red-bright) 0%, var(--orange) 55%, transparent 100%);
  transform: skewX(-24deg);
  transform-origin: left bottom;
  box-shadow: 0 0 14px rgba(255,85,0,.6);
}
.tagline {
  margin-top: 1.1rem;
  font-size: clamp(.85rem, 1.6vw, 1rem);
  font-weight: 700;
  color: rgba(255,248,240,.75);
  letter-spacing: .05em;
  line-height: 1.8;
}

/* ===== セクション見出し（公式の sec-en / sec-jp） ===== */
.sec-head { margin: 3.5rem 0 1.5rem; }
.sec-en {
  font-family: var(--font-en);
  font-size: clamp(2.6rem, 7vw, 5rem);
  letter-spacing: 0;
  line-height: .85;
  color: var(--orange);
  text-shadow: 0 0 60px rgba(255,85,0,.5), 3px 3px 0 rgba(0,0,0,.6);
  -webkit-text-stroke: 1px rgba(255,140,0,.3);
}
.sec-jp {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  letter-spacing: .06em;
  color: var(--white);
  margin-top: .4rem;
  padding-left: .8rem;
  border-left: 5px solid var(--red-bright);
  line-height: 1.3;
}

/* ===== キャラセレクト（図鑑） ===== */
.select-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .6rem;
  margin-top: 1.25rem;
}
.select-cell {
  position: relative;
  aspect-ratio: 3 / 4;
  background:
    radial-gradient(ellipse 90% 65% at 50% 82%, rgba(204,17,0,.4) 0%, transparent 70%),
    linear-gradient(180deg, rgba(22,0,0,.9), rgba(8,0,0,.95));
  border: 2px solid rgba(255,140,0,.25);
  overflow: hidden;
  transition: border-color .25s, box-shadow .25s, transform .25s var(--ease);
}
.select-cell img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  /* 未出現キャラは黒シルエット。背景の赤いグローで輪郭だけ浮かぶ */
  filter: brightness(0) drop-shadow(0 0 1px rgba(255,85,0,.4));
}
.select-cell .ph {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-en);
  font-size: 1.6rem;
  color: rgba(255,85,0,.35);
}
.select-cell::after {
  content: '?';
  position: absolute;
  right: .35rem; bottom: .1rem;
  font-family: var(--font-en);
  font-size: 1.1rem;
  color: rgba(255,140,0,.7);
  text-shadow: 0 0 8px rgba(255,85,0,.6);
}

/* 診断で出現済み → 絵柄解放。公式の char-thumb.is-active と同じ発光枠 */
.select-cell.unlocked img { filter: none; }
.select-cell.unlocked {
  border-color: var(--orange);
  box-shadow: 0 0 18px rgba(255,85,0,.55);
  cursor: pointer;
}
.select-cell.unlocked:hover {
  transform: translateY(-3px);
  border-color: var(--orange-lt);
  box-shadow: 0 0 26px rgba(255,85,0,.8);
}
.select-cell.unlocked::after { content: ''; }

.found-count {
  margin-top: 1rem;
  text-align: center;
  font-family: var(--font-label);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--orange);
  text-shadow: 0 0 12px rgba(255,85,0,.5);
}

/* ===== ボタン（公式の btn-fire / btn-play-now） ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-family: var(--font-label);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .12em;
  background: linear-gradient(135deg, var(--red-dk), var(--red), var(--orange));
  background-size: 200% 200%;
  background-position: left center;
  color: #fff;
  padding: .85rem 2.2rem;
  border: 2px solid var(--red-bright);
  position: relative;
  overflow: hidden;
  transition: background-position .5s, box-shadow .3s, transform .2s;
  cursor: pointer;
  white-space: nowrap;
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent, rgba(255,255,255,.12), transparent);
  transform: translateX(-100%);
  transition: transform .5s;
}
.btn:hover {
  background-position: right center;
  box-shadow: 0 0 30px rgba(255,85,0,.7), 0 4px 20px rgba(0,0,0,.4);
  transform: translateY(-2px);
}
.btn:hover::before { transform: translateX(100%); }
.btn:active { transform: translateY(0); }

.btn-xl {
  font-size: 1.2rem;
  padding: 1.1rem 3rem;
  letter-spacing: .2em;
}

/* 控えめボタン（NO・シェア・PF送客）: 枠線のみのダーク仕様 */
.btn.sub {
  background: rgba(0,0,0,.45);
  border-color: rgba(255,85,0,.5);
  color: rgba(255,248,240,.85);
}
.btn.sub:hover {
  background: rgba(255,85,0,.15);
  border-color: var(--orange);
  box-shadow: 0 0 20px rgba(255,85,0,.45);
}

/* ===== スタートエリア ===== */
.start-area { text-align: center; margin: 2.5rem 0 1rem; }
.start-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid var(--orange);
  padding: .35rem 1rem;
  margin-bottom: 1.4rem;
  font-family: var(--font-label);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--white);
  animation: badgePulse 2s ease-in-out infinite;
}
.start-badge strong { color: var(--orange-lt); }
.press-start {
  margin-top: 1.1rem;
  font-family: var(--font-label);
  font-size: .68rem;
  letter-spacing: .3em;
  color: rgba(255,248,240,.5);
}

/* ===== 診断画面 ===== */
.hidden { display: none !important; }

#screen-question { max-width: 760px; margin: 0 auto; }

.hud {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3rem;
}
.hud .round {
  font-family: var(--font-en);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--orange);
  white-space: nowrap;
  text-shadow: 0 0 20px rgba(255,85,0,.6);
}
.lifebar {
  flex: 1;
  height: 14px;
  background: rgba(0,0,0,.6);
  border: 1px solid rgba(255,85,0,.4);
  transform: skewX(-24deg);
  overflow: hidden;
}
.lifebar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--red-bright), var(--orange) 60%, var(--orange-lt));
  box-shadow: 0 0 14px rgba(255,85,0,.8);
  transition: width .4s var(--ease);
}

.question-panel {
  margin-top: 1.5rem;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,85,0,.18);
  border-top: 4px solid var(--red);
  padding: 2.4rem 1.8rem 2.2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.question-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(204,17,0,.1), transparent 60%);
  pointer-events: none;
}
.question-no {
  font-family: var(--font-label);
  font-size: .8rem;
  font-weight: 600;
  color: var(--orange);
  letter-spacing: .3em;
}
.question-text {
  margin-top: 1.1rem;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  line-height: 1.8;
  min-height: 3.6em;
  text-shadow: 0 2px 6px rgba(0,0,0,.55);
}
.answers {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.answers .btn { min-width: 160px; }

/* ===== 結果ページ ===== */
.winner {
  margin-top: 3rem;
  text-align: center;
  font-family: var(--font-en);
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: .9;
  color: var(--orange);
  letter-spacing: .06em;
  text-shadow: 0 0 60px rgba(255,85,0,.5), 3px 3px 0 rgba(0,0,0,.6);
  -webkit-text-stroke: 1px rgba(255,140,0,.3);
  animation: charReveal .5s ease-out both;
}

.result-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
  padding: 2rem 0 0;
}
/* キャラ背後に浮かぶ巨大ローマ字（公式ギャラリーの透かし文字と同じ手法） */
.result-hero .backdrop-en {
  position: absolute;
  top: 0; left: 0; right: 0;
  text-align: center;
  font-family: var(--font-en);
  font-size: clamp(4rem, 14vw, 10rem);
  line-height: 1;
  letter-spacing: .05em;
  color: rgba(255,255,255,.05);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  z-index: 0;
}

.result-detail {
  position: relative;
  z-index: 2;
  flex: 1 1 52%;
  min-width: 0;
  animation: fadeUp .7s var(--ease) .15s both;
}
.char-en {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .15rem;
  font-family: var(--font-en);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  letter-spacing: .2em;
  color: var(--orange-lt);
  line-height: 1;
  text-shadow: 0 0 24px rgba(255,85,0,.5);
}
.char-en::before {
  content: '';
  width: clamp(24px, 3vw, 46px);
  height: 2px;
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--red-bright), var(--orange-lt));
  box-shadow: 0 0 10px rgba(255,85,0,.7);
}
.result-name {
  position: relative;
  display: inline-block;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(2rem, 5.5vw, 3.4rem);
  letter-spacing: .06em;
  line-height: 1.15;
  margin: .3rem 0 1rem;
  padding: 0 .12em .35rem 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffe6d2 55%, var(--orange-lt) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.55));
}
.result-name::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, var(--red-bright) 0%, var(--orange) 55%, transparent 100%);
  transform: skewX(-24deg);
  transform-origin: left bottom;
  box-shadow: 0 0 14px rgba(255,85,0,.6);
}
.result-team {
  display: inline-block;
  font-family: var(--font-label);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--orange);
  border: 1px solid rgba(255,85,0,.4);
  padding: .2rem .7rem;
  margin-bottom: 1.1rem;
}
.result-catch {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(1.05rem, 2.4vw, 1.35rem);
  letter-spacing: .04em;
  color: var(--orange-lt);
  text-shadow: 0 0 24px rgba(255,85,0,.45);
  margin-bottom: 1rem;
}
.result-text {
  font-size: clamp(.88rem, 1.6vw, 1rem);
  line-height: 1.9;
  color: rgba(255,248,240,.82);
}
.result-quote {
  margin-top: 1.4rem;
  padding: .8rem 1.1rem;
  border-left: 3px solid var(--orange);
  background: linear-gradient(90deg, rgba(204,17,0,.14), transparent 70%);
  font-weight: 700;
  font-size: clamp(.95rem, 1.8vw, 1.1rem);
  color: var(--white);
  letter-spacing: .04em;
}

.result-visual {
  position: relative;
  z-index: 1;
  flex: 1 1 44%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: charReveal .5s ease-out both;
}
.result-visual img {
  width: 100%;
  max-width: 440px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(255,85,0,.25));
}

/* ===== シェア / 送客 CTA ===== */
.share-area { text-align: center; margin-top: 3.5rem; }
.share-area .label {
  font-family: var(--font-en);
  font-size: 1.5rem;
  letter-spacing: .3em;
  color: var(--orange-lt);
  margin-bottom: 1rem;
  text-shadow: 0 0 20px rgba(255,85,0,.5);
}
.share-buttons {
  display: flex;
  gap: .8rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-area {
  position: relative;
  text-align: center;
  margin-top: 3.5rem;
  padding: 3rem 1.2rem 3.2rem;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(204,17,0,.25) 0%, transparent 70%),
    linear-gradient(160deg, rgba(46,0,0,.78) 0%, rgba(21,0,0,.74) 55%, rgba(32,0,0,.80) 100%),
    url('../img/bg/bg_cta.webp') center 22% / cover no-repeat;
  overflow: hidden;
}
/* 公式の各セクション上端に走る赤いライン */
.cta-area::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, rgba(204,17,0,.6), transparent);
  pointer-events: none;
}
.cta-title {
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(1.7rem, 5vw, 3rem);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 0 60px rgba(255,34,0,.4);
}
.cta-en {
  display: block;
  font-family: var(--font-en);
  font-size: clamp(1rem, 2.8vw, 1.7rem);
  letter-spacing: .25em;
  color: var(--orange-lt);
  margin-top: .3rem;
}
/* 配信プラットフォームの監修済みバナー(公式 .cta-banners と同スタイル) */
.cta-banners {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .9rem;
  max-width: 1000px;
  margin: 1.8rem auto 0;
  width: 100%;
}
.cta-banners li {
  flex: 0 1 180px;
  min-width: 140px;
  max-width: 234px;
}
.cta-banners a {
  display: block;
  border: 1px solid rgba(255,248,240,.25);
  transition: border-color .3s, box-shadow .3s, transform .2s;
}
.cta-banners a:hover {
  border-color: var(--orange);
  box-shadow: 0 0 18px rgba(255,85,0,.45);
  transform: translateY(-2px);
}
.cta-banners img { width: 100%; height: auto; }

.retry-area { text-align: center; margin-top: 2.8rem; }

/* ===== フッター ===== */
footer {
  position: relative;
  z-index: 1;
  margin-top: 4rem;
  padding: 2.2rem 1.5rem 2.5rem;
  text-align: center;
  background: #000;
}
footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, rgba(204,17,0,.6), transparent);
}
footer .note {
  font-size: .72rem;
  color: rgba(255,248,240,.70);
  line-height: 1.8;
  letter-spacing: .04em;
}
footer .copyright {
  margin-top: .8rem;
  font-size: .7rem;
  color: rgba(255,248,240,.70);
  letter-spacing: .04em;
}

/* ===== SP ===== */
@media (max-width: 768px) {
  .frame { padding: 16px .9rem 0; }
  .select-grid { gap: .4rem; }
  .sec-head { margin-top: 2.4rem; }

  .result-hero {
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
  }
  .result-hero .backdrop-en { font-size: clamp(3rem, 17vw, 5rem); top: .4rem; }
  .result-visual { width: 100%; order: 0; }
  .result-visual img { max-width: min(78vw, 360px); max-height: 48vh; }
  .result-detail { width: 100%; order: 1; text-align: center; }
  .char-en { justify-content: center; }
  .result-name { padding-right: 0; }
  .result-text { text-align: left; }
  .result-quote { text-align: left; }

  .answers .btn { flex: 1 1 40%; min-width: 0; }
  .btn-xl { width: 100%; }

  /* SPはバナーを縦一列(公式と同じ) */
  .cta-banners {
    flex-direction: column;
    align-items: center;
    max-width: 260px;
    gap: .7rem;
  }
  .cta-banners li {
    flex: 0 0 auto;
    width: 100%;
    max-width: 260px;
  }

  #fireBottom { height: 150px; }
}