/*
 * 画面はすべて「デザイン幅390pxのSVG」＋「その上に重ねたボタン画像」で構成。
 * --u はデザイン上の1pxを画面幅に合わせて拡縮した単位。
 * ボタン位置は下の「ボタン位置」セクションで Figma の座標（390px基準）をそのまま指定する。
 */

:root {
  --color-bg: #fccf00;
  --color-overlay: #333333;
  --frame-width-pc: 390px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--color-bg);
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;
  color: #000;
  -webkit-text-size-adjust: 100%;
}

.app-frame {
  display: block;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  background: var(--color-bg);
  container-type: inline-size;
}

/* PC：中央にスマホ幅の画面、左右はキャラクター柄の背景 */
@media (min-width: 600px) {
  body {
    background: var(--color-bg) url("assets/pc-bg.jpg") center / cover no-repeat fixed;
  }
  .app-frame {
    max-width: var(--frame-width-pc);
    box-shadow: 0 0 32px rgba(0, 0, 0, 0.18);
  }
}

.screen { display: none; }
.screen.active { display: block; }

.stage {
  --u: calc(100cqw / 390);
  position: relative;
}

.stage-base {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* 画像ボタン（--x, --y, --w, --h をデザイン座標で指定） */
.hotspot {
  --pad: 0;
  position: absolute;
  left: calc((var(--x) - var(--pad)) * var(--u));
  top: calc((var(--y) - var(--pad)) * var(--u));
  width: calc((var(--w) + var(--pad) * 2) * var(--u));
  height: calc((var(--h) + var(--pad) * 2) * var(--u));
  padding: calc(var(--pad) * var(--u));
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* --r: 角丸の半径（ボタンSVGの書き出しで角丸が失われているものをCSSで補う） */
.hotspot img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: calc(var(--r, 0) * var(--u));
  pointer-events: none;
  transition: transform 0.12s ease;
}

.hotspot:active img { transform: scale(0.97); }

.hotspot:focus-visible {
  outline: 3px solid #000;
  outline-offset: 2px;
  border-radius: calc(var(--r, 4) * var(--u));
}

/* 当たり判定が小さいボタンは周囲に余白を足してタップしやすくする */
.hotspot--pad { --pad: 12; }

/* ===== ボタン位置（Figma座標, 390px基準） ===== */

/* TOP */
.top-hero {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(693 * var(--u));
  object-fit: cover;
  pointer-events: none;
  /* 動画と下地SVGの黄色は合成時にわずかに色がずれることがあるため、
     キャラクターが描かれない最下部(688〜693px)だけ下地へぼかして境目を消す */
  -webkit-mask-image: linear-gradient(to bottom, #000 99.2%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 99.2%, transparent 100%);
}
#start-button { --x: 16; --y: 978; --w: 358; --h: 70; --r: 35; }

.diagnosis-count {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(1054 * var(--u));
  margin: 0;
  font-size: calc(11 * var(--u));
  font-weight: 700;
  text-align: center;
}

/* 質問（選択肢は --i 番目ごとに134pxずつ下へ） */
.choice { --x: 16; --y: calc(394 + var(--i) * 134); --w: 358; --h: 120; --r: 13; }
#back-button { --x: 310; --y: 669; --w: 64; --h: 13; }

/* 診断結果（他タイプのカードは --i 番目ごとに214pxずつ下へ） */
.type-card { --x: 16; --y: calc(1583 + var(--i) * 214); --w: 358; --h: 200; --r: 12; }
#note-link { --x: 16; --y: 2807; --w: 358; --h: 70; --r: 35; }

/* モーダル */
#modal-close { --x: 299; --y: 39; --w: 52; --h: 17; --pad: 14; }

/* ===== モーダル ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--color-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-overlay[hidden] { display: none; }

.modal-sheet {
  width: 100%;
  margin: 0 auto;
  container-type: inline-size;
}

@media (min-width: 600px) {
  .modal-sheet { max-width: var(--frame-width-pc); }
}