/* =========================================================
   Dinosaur Typing — Switch-safe Unified CSS (Final)
   - JSの .show()/.hide() に完全追従（画面切替）
   - ライトテーマ（ベージュ×グリーン×アンバー）
   - バナーの左右見切れ防止／フォーム整形込み
   ========================================================= */

/* ---------- TOKENS ----------
   テーマ変数：色・影・角丸・フォント・速度などを一元管理
   値をここで変えるだけで全体のトーンを調整可能
--------------------------------*/

@charset "utf-8";
/* CSS Document */

/* CSSファイル内でのスタイルシートの記述 */
@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");

:root {
  --bg: #fffdf8; /* ページの基調色（最背面のグラデ用） */
  --bg-soft: #f6f2e9; /* 下層グラデの終端色（やや濃い背景） */
  --panel: #ffffff; /* カード/フォームなどの面色 */
  --text: #1f2328; /* 主要テキスト色（高コントラスト） */
  --muted: #5b5f66; /* 説明/補助テキスト色 */

  --accent: #156a8a; /* キャレット/リンクの強調色（寒色） */
  --accent-2: #2f8f5b; /* 見出しなどの第二強調（緑系） */
  --amber: #b37a00; /* CTAボタンなどの暖色アクセント */

  --ok: #29a36a; /* ライフゲージの通常（安全）色 */
  --warn: #e6a700; /* 終盤警告の色（黄系） */
  --danger: #d83a3a; /* クリティカル時などで使用想定 */

  --line: rgba(9, 30, 66, 0.12); /* 枠線の薄いライン色 */
  --ring: rgba(21, 106, 138, 0.28); /* フォーカスリング用の外側グロー */
  --shadow: 0 10px 28px rgba(16, 24, 40, 0.08); /* カードなどの標準影 */

  --radius: 14px; /* 標準の角丸 */
  --radius-sm: 10px; /* 小さめ角丸 */
  --radius-lg: 22px; /* 大きめ角丸（バナーなど） */

  --font-sans: "Kosugi Maru", "Inter", "Hiragino Kaku Gothic ProN", "メイリオ",
    Meiryo, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans JP",
    sans-serif; /* 可読性重視の本文フォント集合 */
  --font-mono: "Kosugi Maru", ui-monospace, "SFMono-Regular", "Menlo", Consolas,
    "Liberation Mono", monospace; /* 等幅（スコア表示などに使用） */

  --page-w: 980px; /* レイアウトの最大横幅（中央寄せに使用） */
  --speed: 220ms; /* UI全体の標準トランジション時間 */
}

/* ---------- RESET / BASE ----------
     ブラウザ差を吸収しつつ、読みやすく視認性の高い土台を用意
  -----------------------------------*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* パディング/ボーダー込みでサイズ管理 */
}
html,
body {
  height: 100%;
  min-height: 100vh; /* 背景グラデを全面に敷くための最低高さ */
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: top; /* 画像下の隙間対策 */
}
ul {
  list-style: none; /* デザイン制御のためデフォルト丸を除去 */
}

body {
  font-family: var(--font-sans);
  color: var(--text);
  /* ソフトな粒状の背景：2つのラジアル+1つの線形グラデの重ね */
  background: radial-gradient(
      1200px 800px at 80% -10%,
      rgba(255, 209, 102, 0.06),
      transparent 70%
    ),
    radial-gradient(
      1000px 700px at -10% 110%,
      rgba(26, 119, 86, 0.06),
      transparent 60%
    ),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  background-attachment: fixed; /* スクロール時も固定で“紙感”を演出 */
  letter-spacing: 0.02em; /* 日本語も英字もバランス良く */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ブラウザが一定幅未満の場合の警告 */
#screen-warning {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #ffdf91;
  color: #222;
  text-align: center;
  font-weight: 600;
  padding: 8px;
  z-index: 10000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* ---------- ページ枠（JSの .show() に追従）
     - .pages は初期非表示。JSが inline-style で display:block を付与
     - [style*="display: block"] で“表示時だけ”レイアウトを適用
  -----------------------------------*/
.pages,
#nickName {
  max-width: var(--page-w);
  width: 92%;
  margin: 0 auto; /* センター寄せ */
}
/* 上部の挑戦者の名前 */
#nickName {
  padding-top: 10px;
  text-align: center;
  display: block;
}
#nickName:not(:empty) {
  width: fit-content;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
.pages {
  display: none; /* 初期は非表示（JS制御） */
}
.pages[style*="display: block"] {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  justify-content: center; /* 画面中央に面を寄せる */
}

/* よく使う白カード枠の共通化 */
.niceBorder {
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--panel);
  box-shadow: var(--shadow);
}

/* 浮動要素の回り込み解除（互換用途） */
.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

/* ---------- 固定UI（サウンド/ホーム/ロゴ）
     右下ロゴ、右上のサウンド/ホームは視線動線を阻害しない固定配置
  -----------------------------------*/
#misc #soundButton,
#misc #gotoHome a {
  position: fixed;
  right: 20px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 999px; /* ピル型 */
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel), #f0ede6);
  color: var(--text);
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
  transition: transform var(--speed), box-shadow var(--speed);
}
#misc #soundButton {
  top: 20px;
  cursor: pointer;
}
#misc #gotoHome a {
  top: 75px;
}
#misc #soundButton:hover,
#misc #gotoHome a:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(16, 24, 40, 0.18), 0 0 0 6px var(--ring); /* 仮想フォーカス風リング */
}
#logo {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25)); /* ロゴの視認性UP */
}

/* =========================================================
       START PAGE
       - 最初に表示されるページ。画像の左右切れを防ぎつつ
         軽い立体感と“招き入れる”雰囲気を演出
     ========================================================= */
#gameStart {
  /* デフォ表示は .pages に従う（ここは見た目のみ） */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
}
#gameStart[style*="display: block"] {
  /* 背景はトップページだけ少し強めのグラデに */
  background: radial-gradient(
      900px 600px at 80% -10%,
      rgba(255, 209, 102, 0.06),
      transparent 70%
    ),
    radial-gradient(
      800px 600px at -10% 110%,
      rgba(21, 106, 138, 0.06),
      transparent 60%
    ),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  background-attachment: fixed;
}

/* メインバナー：左右見切れ防止（contain で全体表示） */
#gameStart .titlePicture {
  width: 100%;
  max-width: 550px;
  height: auto;
  margin: 18px auto;
  border-radius: var(--radius-lg);
  overflow: hidden; /* 角丸に合わせて画像もクリップ */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
#gameStart .titlePicture img {
  width: 100%;
  height: auto;
  /* 重要：画像の欠けを防ぐ（全体を見せる） */
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: 0 auto;
}

/* 入力フォーム：中央寄せのカードUI */
#gameStart .formBox {
  max-width: 550px;
  width: 100%;
  padding: 14px;
  margin: 10px auto 0;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
#gameStart .formBox form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px; /* 要素間の均一余白 */
}
#gameStart .formBox label[for="yourname"] {
  color: var(--muted);
  font-weight: 600;
}
#gameStart .formBox input#yourname {
  width: 360px;
  max-width: 90%;
  font-size: 18px;
  color: var(--text);
  background: #fff;
  border: 2px solid rgba(9, 30, 66, 0.15);
  border-radius: 12px;
  outline: none;
  padding: 14px 16px;
  transition: border var(--speed), box-shadow var(--speed);
}
#gameStart .formBox input#yourname:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 6px var(--ring); /* 視認性の高いフォーカスリング */
}
#gameStart .formBox .startButton {
  user-select: none; /* 誤選択防止 */
  color: #fff;
  background: linear-gradient(180deg, #d59a13, #b37a00); /* アンバー系CTA */
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding: 14px 24px;
  white-space: nowrap;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 10px auto;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(212, 149, 0, 0.28);
  transition: transform var(--speed), box-shadow var(--speed),
    filter var(--speed);
}
#gameStart .formBox .startButton:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(212, 149, 0, 0.36),
    0 0 0 6px rgba(212, 149, 0, 0.18); /* 疑似フォーカスでタップ範囲も示唆 */
}
#gameStart .formBox .startButton.is-disabled {
  cursor: not-allowed;
  filter: grayscale(0.3);
}
#gameStart .play-instructions {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
#loadingSpinner {
  display: none;
  justify-content: center;
  margin: 8px 0;
}
#loadingSpinner.is-visible {
  display: flex;
}
#loadingSpinner .spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(21, 106, 138, 0.2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
#gameStart .formBox .alert {
  margin: 3px;
  line-height: 21px;
}
#gameStart .formBox .alert span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fbeec2;
  color: #9c6c00;
  border: 1px solid var(--line);
  font-weight: 700;
}
#gameStart p {
  color: var(--muted);
  font-size: 14px;
  line-height: 21px;
}

/* =========================================================
       COUNTDOWN (overlay shown by myTrans)
     ========================================================= */
#_321page[style*="display: block"] {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
#_321page .countdown-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 248, 0.88);
  backdrop-filter: blur(4px);
}
#_321page.is-active .countdown-overlay {
  background: rgba(255, 253, 248, 0.92);
}
#_321page .number {
  position: relative;
  z-index: 1;
  font-size: clamp(72px, 12vw, 160px);
  font-weight: 900;
  color: var(--accent-2);
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
  text-align: center;
  line-height: 1;
}
#_321page .number.is-pulse {
  animation: countdownPulse 0.45s ease-out;
}
@keyframes countdownPulse {
  0% {
    transform: scale(0.6);
    opacity: 0.3;
  }
  70% {
    transform: scale(1.08);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}

/* =========================================================
       PLAY PAGE
       - 実際のプレイ画面。入力誘導やライフゲージなど
     ========================================================= */
#main {
  /* 初期は .pages 規則に従う */
}
#main[style*="display: block"] {
  position: relative;
  z-index: 1;
}

/* 中身を縦方向の中央に寄せ、順序は維持 */
.mainbox {
  display: flex;
  flex-direction: column; /* 並びはそのまま縦方向 */
  justify-content: center; /* 垂直（上下）中央 */
  align-items: center; /* 必要なら左右も中央。不要なら消してOK */
  gap: 12px; /* 子同士の間隔。お好みで */

  /* どこを基準に“上下中央”にするかで調整 */
  height: 90%; /* 親(#main など)が高さを持っている場合はこちら */
  /* min-height: 100dvh;     画面の中央基準にしたい場合はこっちに変更 */
}

.play-header {
  width: 100%;
  max-width: var(--page-w);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 4px;
}
.mainbox .message {
  text-align: left;
  font-weight: 800;
  font-size: clamp(16px, 2vw, 24px);
  margin: 0;
  color: var(--muted);
  flex: 1 1 200px;
}
.question-progress {
  font-family: var(--font-mono);
  font-size: clamp(18px, 2.5vw, 26px);
  font-weight: 900;
  color: var(--accent);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: var(--shadow);
}
.play-alert {
  width: 100%;
  max-width: var(--page-w);
  min-height: 0;
  margin: 4px 0;
  text-align: center;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--speed), transform var(--speed);
}
.play-alert.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.play-alert span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: #fff3cd;
  color: #7a5a00;
  border: 1px solid #f0d78c;
  font-weight: 700;
  font-size: 14px;
}
.feedback-flash {
  position: fixed;
  top: 18%;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 900;
  font-size: clamp(20px, 3vw, 32px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 12px 32px rgba(16, 24, 40, 0.15);
}
.feedback-flash.is-visible {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
.feedback-flash.is-correct {
  background: #e8f8ef;
  color: var(--ok);
  border: 2px solid var(--ok);
}
.feedback-flash.is-wrong {
  background: #fdecea;
  color: var(--danger);
  border: 2px solid var(--danger);
}
.feedback-flash.is-timeout {
  background: #fff8e6;
  color: var(--warn);
  border: 2px solid var(--warn);
}
.feedback-symbol {
  font-size: 1.2em;
  line-height: 1;
}
#questionWrap {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.input-display {
  width: 100%;
  max-width: 560px;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-mono);
  font-size: clamp(18px, 3vw, 28px);
  font-weight: 700;
  text-align: center;
  background: #fff;
  border: 2px dashed rgba(21, 106, 138, 0.35);
  border-radius: var(--radius-sm);
  color: var(--text);
  letter-spacing: 0.04em;
}
.input-display .input-typed {
  color: var(--accent-2);
}
.input-display .input-placeholder {
  color: rgba(91, 95, 102, 0.35);
  letter-spacing: 0.12em;
}
.mobile-typing-controls {
  display: none;
  margin-top: 10px;
}
.mobile-typing-label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}
.mobile-typing-input {
  width: 100%;
  max-width: 560px;
  padding: 12px 14px;
  font-size: 18px;
  font-family: var(--font-mono);
  border: 2px solid rgba(21, 106, 138, 0.25);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
}
.mobile-typing-input:disabled {
  opacity: 0.6;
}
.typed-highlight {
  font-weight: 900;
  color: var(--amber);
  background: rgba(21, 106, 138, 0.14);
  border-radius: 4px;
  padding: 0 2px;
  text-decoration: underline;
  text-decoration-color: var(--amber);
  text-underline-offset: 3px;
}
.mainbox #showUser {
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(24px, 4.2vw, 44px);
  font-weight: 900;
  letter-spacing: 0.02em;
  margin: 10px auto 18px;
  padding: 14px 18px;
  background: #fff;
  color: #111;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  word-break: break-word; /* 長い語でも崩れない */
  position: relative;
}
/* 入力中の視線誘導キャレット（疑似要素で低コストに実装） */
.mainbox #showUser::after {
  content: "";
  position: absolute;
  right: clamp(10px, 2vw, 14px);
  top: 50%;
  transform: translateY(-48%);
  width: 2px;
  height: 1.2em;
  border-radius: 2px;
  background: var(--accent);
  opacity: 0.85;
  animation: caretBlink 1s steps(1, end) infinite; /* 点滅 */
}
@keyframes caretBlink {
  50% {
    opacity: 0;
  }
}
/* ライフゲージ（残り時間の可視化） */
.mainbox #life_gauge {
  width: 100%;
  max-width: 560px;
  height: 18px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  margin-top: 8px;
}
.mainbox #life_gauge #life {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--ok) 0%, #93d193 100%);
  transition: width 0.1s linear, background 0.3s ease;
}
.mainbox #life_gauge #life.is-warning {
  background: linear-gradient(90deg, var(--warn) 0%, #f5d76e 100%);
}
.mainbox #life_gauge #life.is-danger {
  background: linear-gradient(90deg, var(--danger) 0%, #f08080 100%);
}
.life_gauge_box .lifeText {
  position: absolute;
  bottom: -26px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
}
#timerSeconds {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 900;
}

/* 進捗ボール（設問ごとの達成アイコン群） */
.mainbox #answerBox {
  width: 100%;
  max-width: var(--page-w);
  margin: 24px auto 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.mainbox #answerBox .box {
  width: 58px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.mainbox #answerBox .box img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.18));
  transition: transform 0.18s ease, filter 0.18s ease;
}
.mainbox #answerBox .box .ball-symbol {
  position: absolute;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.9);
}
.mainbox #answerBox .box[data-status="correct"] .ball-symbol {
  color: #1a6b3c;
}
.mainbox #answerBox .box[data-status="timeout"] .ball-symbol {
  color: #a82828;
}
.mainbox #answerBox .box img:hover {
  transform: scale(1.06);
}

/* =========================================================
       RESULT PAGE（成績・応募フォーム・ランキング）
       - クリア後の結果表示や応募フォームを内包
     ========================================================= */
#gameClear {
  /* 初期は .pages 規則に従う */
}
#gameClear[style*="display: block"] {
  position: relative;
  z-index: 2;
  width: 96%;
  padding: 26px 22px;
  margin: 26px auto;
  background: #fffef9; /* わずかに暖色寄りで“達成感” */
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(16, 24, 40, 0.08);
}

/* タイトル（セクション見出し） */
#gameClear .title {
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-2);
  margin: 12px 0 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
#gameClear p,
#gameClear ul li {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}
#gameClear ul {
  margin-left: 1em; /* 疑似矢印と干渉しない余白 */
}
#gameClear ul li::before {
  content: "→ ";
  color: var(--amber); /* 暖色の案内矢印 */
}

/* 成績表・ランキング（同一テーブルスタイルを共用） */
#gameClear table#reportCard,
#gameClear #ranking table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  margin: 10px 0 16px;
}
#gameClear th,
#gameClear td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
#gameClear th {
  text-align: right; /* ラベル側は右寄せ */
  color: #5b5f66;
}
#gameClear td {
  text-align: left; /* 値側は左寄せ */
  color: #222;
}
#gameClear #ranking table tr:hover {
  background: rgba(21, 106, 138, 0.06); /* 行ホバーで可読性UP */
}
#gameClear #ranking table tr.ranking-current {
  background: rgba(255, 86, 86, 0.06);
}
#gameClear #ranking table tr.ranking-self {
  background: rgba(45, 154, 74, 0.08);
}
#gameClear #ranking table tr.ranking-self:hover {
  background: rgba(45, 154, 74, 0.14);
}
#gameClear #ranking table tr.ranking-outside {
  background: rgba(212, 149, 0, 0.08);
}
#gameClear #ranking table tr.ranking-outside:hover {
  background: rgba(212, 149, 0, 0.12);
}
#gameClear #ranking table tr.ranking-outside td {
  text-align: center;
  color: #5b5f66;
  font-size: 14px;
  line-height: 1.6;
  padding: 14px 16px;
}
#gameClear #ranking table tr.ranking-outside strong {
  color: #b37a00;
}
.ranking-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  vertical-align: middle;
}
.ranking-badge-current {
  background: #ff6b6b;
  color: #fff;
}
.ranking-badge-self {
  background: rgba(45, 154, 74, 0.14);
  color: #1d6e33;
}
.result-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}
.summary-card {
  background: linear-gradient(180deg, #fff, #faf7ee);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px 12px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.05);
}
.summary-label {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 6px;
}
.summary-value {
  display: block;
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 900;
  color: var(--accent-2);
}
.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 18px 0 24px;
}
.retry-button,
.retry-submit-button {
  cursor: pointer;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 800;
  border: 0;
  border-radius: 999px;
  transition: transform var(--speed), box-shadow var(--speed);
}
.retry-button {
  color: #fff;
  background: linear-gradient(180deg, #d59a13, #b37a00);
  box-shadow: 0 8px 20px rgba(212, 149, 0, 0.28);
}
.retry-submit-button {
  color: var(--text);
  background: var(--panel);
  border: 2px solid var(--line);
}
.share-button-image {
  color: #fff;
  background: linear-gradient(180deg, #2d9a4a, #1d6e33);
}
.retry-button:hover,
.retry-submit-button:hover {
  transform: translateY(-1px);
}
.ranking-rules {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 10px;
  line-height: 1.7;
}
.ranking-note {
  margin-top: 8px;
  font-size: 0.9em;
  opacity: 0.85;
}
#gameOver {
  text-align: center;
  padding: 20px;
}
#gameOver .game-over-text {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--danger);
}
#misc #soundButton {
  display: flex;
  align-items: center;
  gap: 6px;
}
#misc #soundButton .sound-icon {
  font-size: 16px;
  line-height: 1;
}

/* =========================================================
       ACCESSIBILITY & RESPONSIVE
       - キーボード操作や低モーション設定、モバイル幅の最適化
     ========================================================= */
:focus {
  outline: none; /* デフォの輪郭は消し、:focus-visible で代替 */
}
:focus-visible {
  box-shadow: 0 0 0 6px var(--ring) !important;
  border-color: var(--accent) !important;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
  .feedback-flash.is-visible {
    transform: translateX(-50%) scale(1);
  }
}

@media (max-width: 799px) {
  .mainbox #showUser {
    font-size: clamp(20px, 5.2vw, 32px);
  }
  #gameStart .formBox {
    padding: 20px; /* タップ余白をやや広めに */
  }
  .mobile-typing-controls {
    display: block;
  }
  .result-actions {
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .pages[style*="display: block"] {
    min-height: 100vh; /* モバイルでの縦詰まり防止 */
  }
  .mainbox #showUser {
    font-size: clamp(18px, 6vw, 26px);
    padding: 12px;
  }
  .mobile-typing-input {
    font-size: 16px;
  }
}

/* 切らない版（余白は出るが、枠を自然にする） */
#subjectImageWrap {
  width: 100%;
  max-width: 520px;
  height: 260px;

  background: rgba(255, 255, 255, 0.55); /* 白ベタをやめる */
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden;
}

#subjectImageWrap img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}