/*
 * GPA2026「将来のITエンジニア診断」 画面スタイル
 * 設計書 v0.7 / 5章 準拠
 *
 * 基準: 横向き 1180×820 論理px。サイズは vh / vw ベースで両iPadの解像度差を吸収します。
 * タイプカラーは判定時に JS が --type-color / --type-tint を :root へ書き込みます。
 */

/* ── トークン ───────────────────────────────────────────── */
:root {
  --brand: #1E5FBF;              /* アゼットのブランドブルー */
  --brand-deep: #12408A;
  --ink: #2B2440;                /* 本文の濃色。純黒より紫寄りで丸ゴシックになじむ */
  --ink-sub: #6E6680;
  --paper: #FFFFFF;
  --bg: #F7F9FC;                 /* 白地(タペストリー案①)に寄せた極薄ブルーグレー */

  /* 判定前の既定値。結果表示時に JS が上書きする */
  --type-color: var(--brand);
  --type-tint: #E8F0FB;

  --radius: 2.2vh;
  --shadow: 0 1vh 0 rgba(43, 36, 64, .12);
}

/* ── ベース ─────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;              /* 画面ごとに個別スクロールさせる */
  /*
   * ダブルタップ拡大を止める(2026-08-03)。
   * index.html の viewport に user-scalable=no を書いてあるが、
   * **iOS Safari は user-scalable=no を無視する**ため、それだけでは
   * 連打まがいの2回タップで画面が拡大してしまう。キオスク運用では戻し方が分からず詰む。
   * manipulation はスクロールとピンチは許可したまま、ダブルタップ拡大だけを無効にする。
   * touch-action は継承しないが、ヒットした要素と祖先の値を突き合わせて効くため
   * html/body に指定すれば配下のボタンにも効く。
   */
  touch-action: manipulation;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Yu Gothic", "游ゴシック体", "Meiryo", system-ui, sans-serif;
  font-weight: 700;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

/* ルビはこのアプリの前提。行間を確保しないと上の行と衝突する(設計書5.1) */
ruby { ruby-position: over; }
rt {
  font-size: .5em;
  font-weight: 700;
  letter-spacing: .02em;
  user-select: none;
}
.q-text, .type-catch, .type-traits, .aruaru li, .waza-desc,
.panel--flat, .choice-text { line-height: 2.05; }

/* 実際にタップされるのはボタン(選択肢も button)。上の html/body と二重の保険 */
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
img { max-width: 100%; }

/* キーボード操作時のフォーカスを必ず見せる */
:focus-visible { outline: .4vh solid var(--brand); outline-offset: .4vh; }

/* ── 画面共通 ───────────────────────────────────────────── */
#app { height: 100%; }

.screen {
  height: 100%;
  padding: 4vh 5vw;
  display: flex;
  flex-direction: column;
}
.screen[hidden] { display: none; }

.btn {
  border: none;
  border-radius: 999px;
  font-weight: 800;
  /* タップ領域は最小60×60pt(仕様書5章) */
  min-height: 8.4vh;
  padding: 1.6vh 5vw;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:active { transform: translateY(.5vh); }

.btn--primary {
  background: var(--ink);
  color: #FFF9F0;
  font-size: 3.4vh;
  box-shadow: 0 .8vh 0 rgba(43, 36, 64, .28);
}
.btn--ghost {
  background: rgba(255, 255, 255, .9);
  color: var(--ink);
  font-size: 2.8vh;
  box-shadow: var(--shadow);
}
.btn--link {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  font-size: 2.6vh;
  text-decoration: none;
}

/* ══ 1. 待受 ════════════════════════════════════════════ */
.screen--idle {
  position: relative;
  background: var(--paper);
  align-items: center;
  justify-content: center;
  gap: 0;
  overflow: hidden;
}

/* タペストリー案①のリングモチーフ */
.ring {
  position: absolute;
  border-radius: 50%;
  border: 4.5vh solid var(--brand);
  opacity: .13;
  pointer-events: none;
}
.ring--tl { width: 42vh; height: 42vh; top: -16vh; left: -14vh; }
.ring--br { width: 52vh; height: 52vh; bottom: -22vh; right: -16vh; border-color: #4FA3E3; }

.idle-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4vh;
  z-index: 1;
  margin-top: -4vh;
}

.idle-badge {
  margin: 0;
  background: #FFF0D2;
  color: #8A5A00;
  border-radius: 999px;
  padding: 1vh 3vw;
  font-size: 2.6vh;
  font-weight: 800;
}

.idle-hook {
  margin: 0;
  font-size: 8.6vh;
  line-height: 1.28;
  text-align: center;
  text-wrap: balance;
  letter-spacing: .01em;
}
.idle-hook em {
  font-style: normal;
  color: var(--brand);
  background: linear-gradient(transparent 62%, #BFDCFF 62%);
}

.idle-chars { display: flex; gap: 3.2vw; }
.idle-char {
  font-size: 9vh;
  line-height: 1;
  display: inline-flex;
  animation: float 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * .28s);
}
.idle-char .char-img { width: 11vh; height: 11vh; object-fit: contain; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-1.6vh) rotate(2deg); }
}

.btn--start {
  margin-top: 1vh;
  background: linear-gradient(160deg, #3D82E0, var(--brand-deep));
  color: #fff;
  font-size: 4.4vh;
  padding: 2.2vh 12vw;
  box-shadow: 0 1vh 0 rgba(18, 64, 138, .45);
}

/* ブランドブロックは下部に縮小配置(足止め力を診断フックに集中させる) */
.idle-brand {
  position: absolute;
  bottom: 3.4vh;
  display: flex;
  align-items: center;
  gap: 1.6vw;
  z-index: 1;
}
/*
 * ⚠ padding + 同じ幅の負のマージンで **見た目を1pxも変えずにタップ領域だけ広げている**。
 *   ロゴは高さ4.6vh(≒38px)しかなく、ミニゲームの入口である3タップ(js/gameentry.js)を
 *   小さな的に素早く3回当てるのは無理があるため。仕様書5章のタップ領域60×60pt相当を確保する。
 * ⚠ 全体が border-box なので、そのままでは padding のぶん画像が縮む。ここだけ content-box。
 */
.idle-logo {
  height: 4.6vh;
  width: auto;
  box-sizing: content-box;
  padding: 1.6vh;
  margin: -1.6vh;
}
.idle-company {
  font-size: 2.2vh;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .04em;
}
.idle-tagline {
  font-size: 2.2vh;
  color: var(--ink-sub);
  letter-spacing: .1em;
}

/* ══ 1.5 学年をえらぶ ══════════════════════════════════════
   2026-08-04 追加。1タップで選べることを優先し、数字入力は使わない
   (iPadでの入力は小学生には遅く、「回答約45秒」と衝突するため)。 */
.screen--grade {
  gap: 3vh;
  align-items: center;
  justify-content: center;
}
.g-lead { margin: 0; font-size: 4.6vh; font-weight: 800; }
.g-grid {
  /*
   * 2026-08-17: 選択肢が13個→11個になったので **6列**(旧7列)。
   * 上段=小1〜小6 / 下段=中1〜中3・高校生・大人 と学校区分で段が分かれて読みやすく、
   * 1列減ったぶんタップ領域(最小60×60pt)にも余裕が出る。
   * ⚠ grid ではなく **flex + wrap + justify-content:center** にしてある。11個は 6+5 に
   *   割れるので、grid だと下段の右端1マスが空いて**下段だけ左に寄って見える**。
   *   flex なら余った1マスぶんが左右に分かれ、下段が上段の中央にそろう。
   * ⚠ 1マスの幅は列数から計算する。列数を変えるときは --g-cols だけ変えればよい
   *   (縦持ちのメディアクエリも同じ変数を上書きしている)。
   */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  --g-cols: 6;
  --g-gap: 1.4vw;
  gap: 1.6vh var(--g-gap);
  width: min(92vw, 160vh);
}
.g-btn {
  flex: 0 0 calc((100% - (var(--g-cols) - 1) * var(--g-gap)) / var(--g-cols));
  border: none;
  border-radius: 2.4vh;
  background: #fff;
  color: var(--ink);
  font-size: 3vh;
  font-weight: 800;
  min-height: 11vh;
  box-shadow: var(--shadow);
  transition: transform .12s ease;
  /*
   * 🔴 ルビ付き(高校生・大人)とルビ無し(小1〜中3)が同じ列に並ぶので、
   *   **行高でルビを行ボックスの中に収める**。収まらないとブラウザがベース文字を下へ
   *   押し下げるため、**ルビ付きのボタンだけ文字が下にずれる**(2026-08-05 の事業チップと
   *   同じ問題)。⚠ 直し方は「ルビの無い方を動かす」ではない。行高を上げれば11個とも
   *   自動でそろう(ルビの有無で場合分けが要らない)。
   * ⚠ 必要な行高は **2.2以上**。行の上側の余り(行高−1em の半分)がルビの高さを下回ると
   *   押し下げが起きる。ルビは 0.5em 指定だが、**実際に占める高さはフォントの行外寸ぶん
   *   膨らんで約0.58em**あるため、0.5em で計算すると足りない。
   *   実測(横持ち/縦持ち): 1.7 → 2.5px ずれ / 2.05 → 0.5〜1.0px / **2.2 → 0.0px**。
   *   本文(.q-text 等)の 2.05 とは値が違うが、あちらは複数行の行間を決める値で目的が別。
   * ⚠ 画面側の既定 rt は行高を継承するため、rt 側も1に落とす必要がある。
   */
  line-height: 2.2;
}
.g-btn rt { line-height: 1; }
.g-btn:active { transform: translateY(.5vh); }
.g-note { margin: 0; font-size: 2.2vh; color: var(--ink-sub); }

/*
 * 2026-08-05: 待受へ戻る手前の予告(.idle-warn)は削除した。
 * 上長レビュー「TOPページへ戻るボタンを実装し、秒数でTOPへ戻る仕様を消したらどうか」により
 * 無操作タイマー自体を廃止したため(js/main.js の show() のコメント参照)。
 */
.btn--small { min-height: 6.4vh; padding: 1vh 4vw; font-size: 2.4vh; }

@media (max-aspect-ratio: 1/1) {
  /* iPadを縦に持たれた場合の安全網。6列だと狭いので4列に落とす(11個=4+4+3) */
  .g-grid { --g-cols: 4; }
  .g-lead { font-size: 3.6vh; }
}

/* ══ 2. 質問 ════════════════════════════════════════════ */
.screen--quiz { gap: 2.4vh; overflow-y: auto; }

.q-head { display: flex; align-items: center; justify-content: space-between; gap: 2vw; }
/*
 * 進捗表示と「さいしょにもどる」を右側にまとめる(2026-08-05)。
 * ⚠ ボタンを position: fixed で右上に浮かせてはいけない。進捗の「◯もんめ / 5」が
 *   右端にあるので重なる。ヘッダの中に並べれば重ならず、選択肢のタップ範囲からも離れる。
 * ⚠ 左上はスタッフ隠しメニュー(1.5秒以内に3タップ)の領域なので使わない。
 */
.q-head-right { display: flex; align-items: center; gap: 2vw; flex-shrink: 0; }
.q-dots { display: flex; gap: 1.2vw; }
.dot {
  width: 2vh; height: 2vh;
  border-radius: 50%;
  background: rgba(43, 36, 64, .16);
}
.dot.done { background: var(--brand); }
.dot.now  { background: var(--brand); box-shadow: 0 0 0 .8vh rgba(30, 95, 191, .18); }
.q-count { margin: 0; font-size: 2.6vh; color: var(--ink-sub); }

.q-text {
  margin: 0;
  font-size: 4.6vh;
  text-wrap: balance;
}

.q-choices { display: flex; flex-direction: column; gap: 1.4vh; }

.choice {
  display: flex;
  align-items: center;
  gap: 2.4vw;
  width: 100%;
  min-height: 9vh;
  padding: 1.4vh 3vw;
  border: .35vh solid rgba(43, 36, 64, .12);
  border-radius: var(--radius);
  background: var(--paper);
  text-align: left;
  box-shadow: var(--shadow);
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.choice:hover { border-color: rgba(30, 95, 191, .45); }
.choice.picked {
  background: #E8F0FB;
  border-color: var(--brand);
  transform: translateY(.5vh);
}
.choice-icon { font-size: 4vh; line-height: 1; flex-shrink: 0; }
.choice-text { font-size: 2.9vh; }

.btn--back {
  align-self: flex-start;
  background: none;
  color: var(--ink-sub);
  font-size: 2.4vh;
  min-height: 6vh;
  padding: 1vh 2vw;
}

/* ══ 3. 判定演出 ════════════════════════════════════════ */
.screen--reveal {
  align-items: center;
  justify-content: center;
  gap: 4vh;
  background: linear-gradient(160deg, #EAF2FD, #F7F9FC);
}
.reveal-label { margin: 0; font-size: 5vh; letter-spacing: .06em; }
/*
 * スロットは 5体を重ねて置き、.is-on の付け替えだけで切り替える(2026-08-03)。
 * 絵文字のときは font-size で大きさを決めていたが、イラストは箱の大きさで決める。
 * イラストを読み込めなかったときは絵文字(.char-emoji--reveal)に落ちる。
 */
.reveal-slot {
  position: relative;
  width: 40vh;
  height: 40vh;
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.reveal-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  visibility: hidden;
}
.reveal-face.is-on { visibility: visible; }
.reveal-face .char-img { width: 100%; height: 100%; object-fit: contain; }
.char-emoji--reveal { font-size: 24vh; line-height: 1; }
.reveal-slot.stop { transform: scale(1.18); }

/* ══ 4. 結果 ════════════════════════════════════════════ */
.screen--result {
  position: relative;
  background: var(--type-tint);
  overflow-y: auto;
  gap: 2.4vh;
  scroll-behavior: smooth;
}

.result-grid {
  display: grid;
  grid-template-columns: minmax(28vw, 34vw) 1fr;
  gap: 3vw;
  align-items: start;
}

.result-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1vh;
  position: sticky;
  top: 0;
}
.hero-frame {
  width: 32vh; height: 32vh;
  border-radius: 50%;
  background: var(--paper);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.char-emoji--hero { font-size: 19vh; line-height: 1; }
.char-img--hero { width: 26vh; height: 26vh; object-fit: contain; }

.type-lead { margin: 1vh 0 0; font-size: 2.4vh; color: var(--ink-sub); }
.type-name { margin: 0; font-size: 5.4vh; line-height: 1.25; color: var(--type-color); text-wrap: balance; }

/*
 * むいているおしごと(2026-08-04 追加。社内レビュー指摘への対応)。
 *
 * ⚠ 旧 `.type-job` は 2.4vh のグレー文字で、タイプ名(5.4vh・タイプカラー)の
 *   半分以下だった。そのため **適性業種だと気づかれず「人間性の診断?」と読まれていた**。
 *   5タイプがアゼットの事業と対応するのが企画の核なので、
 *     ①タイプカラーで囲んで面にする ②「むいている おしごと」とラベルを付ける
 *     ③職業名を 3.6vh まで上げる ④どんな仕事かとアゼットの事業を続けて書く
 *   の4点で「ここは職業の話」と分かるようにしている。
 */
.jobcard {
  margin-top: 1.6vh;
  padding: 1.6vh 2.2vw;
  border-radius: 2vh;
  background: var(--type-tint, rgba(255, 255, 255, .7));
  border: .3vh solid var(--type-color);
  text-align: left;
}
.jobcard-label {
  display: inline-block;
  margin-bottom: .8vh;
  padding: .3vh 1.6vw;
  border-radius: 999px;
  background: var(--type-color);
  color: #fff;
  font-size: 1.9vh;
  font-weight: 800;
  letter-spacing: .1em;
}
.jobcard-name {
  margin: 0;
  font-size: 3.6vh;
  font-weight: 800;
  line-height: 1.2;
  color: var(--type-color);
}
.jobcard-desc {
  margin: .6vh 0 0;
  font-size: 2.3vh;
  line-height: 1.7;
  /*
   * ⚠ 空白でしか改行させない。既定だと「つく / る おしごと」のように
   *   単語の途中で割れる(実際に出た)。文言は文節ごとに空白を入れて書いてある。
   * ⚠ **下の .jobcard-biz には付けない。** business の文言は
   *   「アゼットでは、会社やお店のホームページをデザインしています。」のように
   *   空白が無いので、keep-all にすると1行扱いになって枠からはみ出す。
   */
  word-break: keep-all;
}
/*
 * アゼットの事業紹介(2026-08-05 社内レビュー「アゼットの事業をはっきり明記したい」)。
 *
 * ⚠ 旧 `.jobcard-biz` は「むいている おしごと」枠の中に破線で区切って置いた
 *   **グレーの小さい1行**だった。枠の見出しは枠の中身ぜんぶに掛かるので、
 *   会社の話が職業の説明の一部に見える。カードでも同じ指摘を受けたので、
 *   **見出し付きの独立した枠**にした(index.html のコメント参照)。
 * ⚠ 色は --ink-sub(グレー)にしない。「引いて見せる」のは指摘と逆方向。
 */
/*
 * ⚠ 左列(.result-hero)ではなく**右列の先頭のパネル**として置いている。
 *   左列は position:sticky で、実測でビューポートの95%を既に使っていたため。
 *   詳しい理由は index.html のコメント。
 * 地はタイプカラーの薄地にして、他のパネル(白の半透明)と区別する。
 */
.panel--biz {
  /* ⚠ 地を tint にしてはいけない。**結果画面の背景そのものがタイプの薄地**なので、
   *   tint 同士で溶けて枠に見えなくなる(実測の画像で確認)。白地にして浮かせる。 */
  background: var(--paper);
  border: .3vh solid var(--type-color);
}
/* 見出しだけは既定の小さいグレーにしない。「はっきり明記」が指摘の主旨なので色を付ける */
.panel--biz .panel-label {
  color: var(--type-color);
  font-weight: 800;
}
/* ⚠ business の文言には空白が無いので keep-all を付けてはいけない(1行扱いで溢れる) */
.bizcard-biz {
  margin: 0;
  font-size: 2.2vh;
  line-height: 1.6;
}
/*
 * 5事業の一覧。自分のタイプの事業だけタイプカラーで塗る。
 * ⚠ 並びは TYPE_ORDER(レーダーの5軸・カードの帯と同じ)。
 */
.bizlist {
  list-style: none;
  margin: 1vh 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .6vh .8vh;
}
/* 5つが1行に収まりやすいよう字と余白を控えめにする。入らなければ折り返す(2行でも成立する) */
/*
 * 🔴 ルビのある事業とない事業が混在するので、**行高でルビを行の中に収める**
 *   (2026-08-05 渡邊さん指摘「ルビのない事業が少し上にずれている」)。
 *   足りないとルビのあるチップだけ背が高くなり、flex で引き伸ばされた
 *   ルビの無いチップは箱の上端に文字が残って上にずれて見える。
 *   ⚠ ここは rt の行高を1に落としてから 1.7 にしている。画面の既定の rt は
 *     行高を継承する(=0.5em × 1.5)ため、そのままだと 1.7 では収まらない。
 */
.bizlist rt { line-height: 1; }
.bizlist li {
  padding: .3vh .9vw;
  border-radius: .8vh;
  background: rgba(255, 255, 255, .9);
  border: .15vh solid rgba(43, 36, 64, .18);
  font-size: 1.7vh;
  line-height: 1.7;
  color: var(--ink-sub);
  white-space: nowrap;
}
.bizlist li.is-mine {
  background: var(--type-color);
  border-color: var(--type-color);
  color: #fff;
  font-weight: 800;
}

.result-body { display: flex; flex-direction: column; gap: 1.8vh; }
.type-catch  { margin: 0; font-size: 3.4vh; }
.type-traits { margin: 0; font-size: 2.7vh; }

.panel {
  display: flex;
  flex-direction: column;
  gap: .6vh;
  background: rgba(255, 255, 255, .78);
  border-radius: var(--radius);
  padding: 1.5vh 2.4vw;
  margin: 0;
}
.panel--flat { display: block; font-size: 2.3vh; line-height: 1.8; background: rgba(255, 255, 255, .78); }
.panel-label { font-size: 2.1vh; color: var(--ink-sub); letter-spacing: .06em; }

/* ひっさつわざはタイプカラーの縁取りで最初の注目点にする */
.panel--waza {
  background: var(--paper);
  border: .5vh solid var(--type-color);
}
.waza-name { font-size: 3.4vh; }
.waza-desc { font-size: 2.2vh; color: var(--ink-sub); }

.aruaru { margin: 0; padding-left: 4vw; display: flex; flex-direction: column; gap: .4vh; }
.aruaru li { font-size: 2.4vh; }

/*
 * エンジニアパワー(2026-08-03 バー+素点表示からレーダーへ変更)
 * カード表面と同じ Radar.svg を使う。得点0のタイプでも軸が目盛り3に立つため
 * 「たすけるヒーロー 0」のような表示が出ない。数値は勝ちタイプの素点%だけを大きく出す。
 */
.power { display: flex; align-items: center; gap: 2.5vw; }
.power-radar { width: 26vh; max-width: 46%; flex-shrink: 0; color: var(--ink-sub); }
.power-radar .radar { width: 100%; height: auto; display: block; }
.power-score { display: flex; flex-direction: column; gap: .4vh; min-width: 0; }
.power-score-name { font-size: 2.4vh; font-weight: 800; color: var(--type-color); }
.power-score-val  { display: flex; align-items: baseline; gap: .3vw; color: var(--type-color); line-height: 1; }
.power-score-val b { font-size: 7.4vh; font-weight: 800; letter-spacing: -.02em; }
.power-score-val i { font-size: 3vh; font-style: normal; font-weight: 800; }
.power-score-cap  { font-size: 2vh; color: var(--ink-sub); line-height: 1.4; }

.meta-row { display: flex; flex-wrap: wrap; gap: 1.4vw; }
.pill {
  background: rgba(255, 255, 255, .9);
  border-radius: 999px;
  padding: 1vh 2.6vw;
  font-size: 2.4vh;
  font-weight: 800;
}
.pill--rare { background: var(--ink); color: #FFE68C; }

/* 2026-08-03: 会社サイトQRのパネル(.panel--web / .qr-slot / .qr / .qr-missing /
   .web-text / .web-url)は結果画面から削除したためスタイルも撤去した。 */

/* おうちのかたへ(保護者向け。子ども向け本文より控えめに置く) */
.panel--parent {
  background: none;
  border: .3vh dashed rgba(43, 36, 64, .28);
  font-size: 2.1vh;
  color: var(--ink-sub);
  line-height: 1.75;
}
.parent-note { font-size: 1.7vh; opacity: .85; line-height: 1.6; }

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2vw;
  justify-content: center;
  align-items: center;
  padding-top: 1vh;
}
.scroll-cue {
  position: sticky;
  bottom: 1vh;
  align-self: center;
  margin: 0;
  background: rgba(43, 36, 64, .85);
  color: #FFF9F0;
  border-radius: 999px;
  padding: .9vh 3.4vw;
  font-size: 2.2vh;
  pointer-events: none;
  transition: opacity .3s ease;
  animation: cuebob 1.6s ease-in-out infinite;
}
@keyframes cuebob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.7vh); }
}

/* 紙吹雪 */
.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti i {
  position: absolute;
  top: -4vh;
  width: 1.1vh; height: 1.8vh;
  animation: fall 2.6s linear forwards;
}
@keyframes fall {
  to { transform: translateY(108vh) rotate(520deg); opacity: 0; }
}

/* ══ 5. 印刷完了 ════════════════════════════════════════ */
.screen--printed { align-items: center; justify-content: center; gap: 2.4vh; text-align: center; }
.printed-emoji { margin: 0; font-size: 16vh; line-height: 1; }
.printed-title { margin: 0; font-size: 6vh; }
.printed-note  { margin: 0; font-size: 2.8vh; color: var(--ink-sub); }

/* ══ トースト(豆知識・予備機能) ═══════════════════════ */
.toast {
  position: fixed;
  left: 50%;
  bottom: 6vh;
  transform: translateX(-50%);
  margin: 0;
  background: var(--ink);
  color: #FFF9F0;
  border-radius: 999px;
  padding: 1.4vh 4vw;
  font-size: 2.4vh;
  z-index: 20;
}
.toast[hidden] { display: none; }

/* ══ スタッフメニュー ═══════════════════════════════════ */
.staff-panel {
  position: fixed;
  inset: 0;
  background: rgba(43, 36, 64, .55);
  display: grid;
  place-items: center;
  z-index: 50;
}
.staff-panel[hidden] { display: none; }
/*
 * 🔴 縦に収まらなくなったらパネルの中をスクロールさせる(2026-08-24)。
 *
 * ⚠ **これが無いと「とじる」が画面外に出て押せなくなる。** .staff-panel は
 *   position:fixed + place-items:center なので、中身が画面より高いと上下に
 *   はみ出したまま**スクロールもできない**(親が固定なのでページも動かない)。
 *   実際、2026-08-24 に「カード裏面を印刷」の行を足したところ iPad 横向き相当
 *   (1180×820)で最下段が切れた。中身はすべて vh 指定なので、画面が小さくても
 *   大きくても同じ割合ではみ出す = 端末を変えても直らない。
 * ⚠ 項目を増やすときは、この max-height を上げるのではなく**スクロールに任せる**こと。
 *   100vh を超えると今度は上端が画面外に出る。
 */
.staff-inner {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 3vh 4vw;
  min-width: 46vw;
  max-height: 94vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
}

/*
 * スクロールするのはここだけ。「とじる」の行はこの外にあるので常に見える(2026-08-24)。
 * ⚠ min-height: 0 が要る。flex の子は既定で min-height:auto = 中身より縮まないため、
 *   これが無いと**スクロールせずに親を押し広げて**画面からはみ出す。
 */
.staff-scroll {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4vh;
}
.staff-title { margin: 0; font-size: 3vh; }
.staff-list { display: flex; flex-direction: column; gap: .4vh; }
.staff-row { display: flex; align-items: center; gap: 1.6vw; font-size: 2.4vh; }
.staff-emoji { width: 4vh; text-align: center; }
.staff-name  { flex: 1; }
.staff-num   { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right; }
.staff-total { border-top: .2vh solid rgba(43, 36, 64, .2); padding-top: .8vh; margin-top: .4vh; }

/* オフライン準備状況(スタッフメニュー内)。当日の起動確認に使う */
.staff-diag {
  margin-top: 1.4vh;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: 1.2vh;
  display: flex;
  flex-direction: column;
  gap: .5vh;
  font-size: 1.9vh;
}
.staff-diag-row { display: flex; justify-content: space-between; gap: 2vw; }
.staff-diag-row span:last-child { text-align: right; }
.staff-diag-row.is-ng { color: #FFD3D3; font-weight: 700; }
.staff-actions { display: flex; flex-wrap: wrap; gap: 1.2vw; margin-top: 1vh; }

/*
 * 最下段(「とじる」を含む行)。.staff-scroll の外にあるので常に見えている(2026-08-24)。
 * ⚠ スクロールに任せるだけだと、**ブースで慌てているスタッフがメニューを閉じられない**。
 *   閉じる手段だけは探させないこと。
 * ⚠ position:sticky でも似たことはできるが、スクロール位置によって
 *   **この行が上の行の上に重なって並び順が入れ替わって見える**ので採らなかった。
 */
.staff-actions--last { flex-shrink: 0; }
.staff-actions button {
  flex: 1;
  min-height: 6.5vh;
  border: .25vh solid rgba(43, 36, 64, .3);
  border-radius: 1.4vh;
  background: #fff;
  font-size: 2.2vh;
}

/*
 * スタッフメニューの補足文(2026-08-24)。ボタンの隣に運用手順を出す。
 * ⚠ alert で出すと印刷ダイアログと二重にモーダルが重なるので、静的な文字にしている。
 */
.staff-hint {
  flex-basis: 100%;
  font-size: 1.8vh;
  line-height: 1.6;
  color: rgba(43, 36, 64, .75);
  font-weight: 400;
}
.staff-hint b { font-weight: 700; }

/* 印刷専用DOMは画面上では隠す(print.css で表示される) */
#print-card,
#print-back { display: none; }

/* ══ カード裏面モードの帯(2026-08-26)══════════════════
   裏面印刷は自動解除しないので、入りっぱなしに必ず気づけるよう画面に出す。
   ⚠ 画面の**下**に置く。上だと左上のスタッフメニュー(3タップ)に重なる。
   ⚠ 印刷には出ない(body直下なので print.css が隠す)。index.html の注記も参照。 */
.back-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;                       /* スタッフパネル(手前)より下、画面より上 */
  display: flex;
  align-items: center;
  gap: 2vw;
  padding: 1.6vh 4vw;
  background: #12408A;               /* ブランドブルー。診断の画面色と明確に違う */
  color: #fff;
  font-size: 2.2vh;
  box-shadow: 0 -.6vh 2vh rgba(0, 0, 0, .25);
}
.back-bar[hidden] { display: none; }  /* ⚠ flex が [hidden] に勝つので明示する */

.back-bar-title {
  font-weight: 800;
  font-size: 2.6vh;
  white-space: nowrap;
}
.back-bar-note {
  flex: 1;
  opacity: .85;
  font-size: 1.9vh;
  line-height: 1.3;
}
.back-bar-btn {
  border: none;
  border-radius: 999px;
  padding: 1.2vh 3vw;
  font-size: 2.1vh;
  font-weight: 800;
  font-family: inherit;
  color: #12408A;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.back-bar-btn--exit {
  color: #fff;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 .3vh rgba(255, 255, 255, .7);
}

/* 2026-08-03: おうち診断モード(body.home-mode)のスタイルは削除した。
   モードごと廃止したため(仕様書7章)。下の狭幅対応は別物なので残している。 */

/* ══ 狭い画面・縦向きへのフォールバック ═════════════════
   本番はiPad横向き固定だが、縦に持たれた場合や画面の小さい端末でも
   内容が破綻しないようにしておく安全網(設計書5.5)。 */
@media (max-width: 820px), (orientation: portrait) {
  .screen { padding: 3vh 5vw; }
  .idle-hook { font-size: 6vh; }
  .idle-chars { flex-wrap: wrap; justify-content: center; gap: 2vh 4vw; }
  .idle-char { font-size: 6.5vh; }
  .q-text { font-size: 3.4vh; }
  .choice-text { font-size: 2.4vh; }
  .result-grid { grid-template-columns: 1fr; gap: 2vh; }
  .result-hero { position: static; }
  .hero-frame { width: 22vh; height: 22vh; }
  .char-emoji--hero { font-size: 13vh; }
  .char-img--hero { width: 18vh; height: 18vh; }
  .reveal-slot { width: 30vh; height: 30vh; }
  .char-emoji--reveal { font-size: 19vh; }
  .type-name { font-size: 4.2vh; }
  .power-radar { width: 22vh; }
  .power-score-val b { font-size: 6vh; }
}

/* ══ 動きを減らす設定を尊重 ═════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}