/* ================================
   タイピングの秋 - style.css (Figma/Tailwind準拠)
   - HTMLはあなたが用意した index.html 構造そのまま
   - TypeScript/React 依存なし
================================== */

/* Noto Sans JP */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;600;700;900&display=swap');

/* ---- Design Tokens (from TSX) ---- */
:root {
  /* Palette（AutumnDecorations / GameScreen 由来） */
  --c-leaf: #C26E6A;
  /* 赤みの落ち葉 */
  --c-gold: #DCAA5B;
  /* 焼き芋モード基調色(枠色) */
  --c-olive: #5B6857;
  /* 深い緑 */
  --c-text: #1F2937;
  /* gray-800 */
  --c-muted: #6B7280;
  /* gray-500/600 */
  --c-ok: #9CA3AF;
  /* gray-400 (ローマ字OK) */
  --c-ng: #DC2626;
  /* 赤 (ローマ字NG) */
  --c-ng-bg: #FEE2E2;
  /* red-100 */

  --card-radius-xl: 22px;
  --card-radius-lg: 16px;
  --card-radius-md: 12px;

  --container-w: 64rem;
  /* max-w-4xl ＝ 1024px  */

  --c-gray-btn: #6E6E6E;
    --c-gray-btn-hover: #595959;
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

img {
  max-width: 100%;
  display: block;
}

button {
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
}

/* ---- Base ---- */
body {
  font-family: -apple-system, BlinkMacSystemFont, "San Francisco", "SF Pro Text", "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--c-text);
  /* App.tsx / GameScreen.tsx 背景: bg-gradient-to-br from-slate-50 via-orange-50 to-amber-50 */
  background: linear-gradient(135deg, #F8FAFC 0%, #FFF3E0 48%, #FFE0B2 100%);
  min-height: 100vh;
}

.app {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 48px 24px;
  position: relative;
  overflow: hidden;
}

/* ---- 背景デコ（AutumnDecorations.tsx 代替） ---- */
.app::before,
.app::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: normal;
}

.app::before {
  /* top-20 left-10 w-32 h-32 (#C26E6A) */
  width: 8rem;
  height: 8rem;
  left: 2.5rem;
  top: 5rem;
  background: var(--c-leaf);
  opacity: .20;
}

.app::after {
  /* bottom-20 right-10 w-28 h-28 (#C26E6A) */
  width: 7rem;
  height: 7rem;
  right: 2.5rem;
  bottom: 5rem;
  background: var(--c-leaf);
  opacity: .25;
}

/* 追加の柔らかい円 */
.app .decor-a,
.app .decor-b,
.app .decor-c {
  display: none;
}

/* 予備 */

/* ---- Screen/Card ---- */
.screen {
  width: 100%;
  max-width: var(--container-w);
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  /* bg-white/95 */
  border: 2px solid var(--c-gold);
  /* モード色枠 */
  border-radius: var(--card-radius-xl);
  box-shadow:
    0 40px 70px -30px rgba(0, 0, 0, 0.20),
    0 18px 38px -16px rgba(0, 0, 0, 0.12);
  padding: 3rem;
  /* p-12 */
  backdrop-filter: blur(6px);
  /* backdrop-blur-md */
}

/* Card 内の円装飾（GameScreen.tsxの top/right と bottom/left） */
.screen--game::before,
.screen--game::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--c-gold);
  opacity: .12;
  pointer-events: none;
}

.screen--game::before {
  width: 6rem;
  height: 6rem;
  right: 1rem;
  top: 1rem;
}

.screen--game::after {
  width: 4rem;
  height: 4rem;
  left: 1rem;
  bottom: 1rem;
}

.screen--home {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  --home-block-w: clamp(260px, 70vw, 420px);
}

.screen--home .btn--primary {
  border-radius: 12px;
  padding: 0.5rem 1.4rem;  /* 少しだけ厚みを出すなら */
}

.screen--home .actions {
  justify-content: center;
}

/* ベストスコアの箱をその幅に */
.screen--home .bestscore {
  width: var(--home-block-w);
  margin-inline: auto;
  /* 中央寄せ */
}

/* 「プレイする」ボタンも同じ幅に */
.screen--home .actions {
  display: flex;
  justify-content: center;
}

.screen--home .actions .btn--primary {
  width: var(--home-block-w);
  display: block;
}

/* ---- Home ---- */
.home-header h1 {
  margin: 0 0 1rem;
  font-weight: 900;
  font-size: clamp(28px, 5vw, 44px);
  text-align: center;
}

.mode-title {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--c-gold);
}

.mode-title::before {
  content: "🔥";
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--c-gold);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 20px;
}

.mode-desc {
  margin: 0 0 1.25rem;
  color: var(--c-muted);
}

/* 👑 ベストスコア */
.bestscore {
  border: none;
  border-radius: var(--card-radius-lg);
  padding: 24px 16px;
  background: rgba(220, 170, 91, 0.10);
  margin: 14px 0 20px;
  text-align: center;
}

.bestscore__title {
  font-weight: 400;
  color: var(--c-gold);
  margin-bottom: .5rem;
}

.bestscore__value-line {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  color: var(--c-gold);
}

.bestscore__value-line #best-accuracy {
  font-weight: 800;
  font-size: 1.9rem;
  line-height: 1;
}

.bestscore__unit {
  color: var(--c-gold);
  font-weight: 400;
  font-size: 1.05rem;
}

/* Home Actions */
.actions {
  display: flex;
  gap: .75rem;
  align-items: center;
}

.btn {
  border-radius: 999px;
  padding: .9rem 1.4rem;
  font-weight: 400;
  letter-spacing: .02em;
}

.btn--primary {
  color: #fff;
  background: var(--c-gold);
  box-shadow: 0 5px 10px rgba(220, 170, 91, .32);
  transition: transform .15s ease, filter .15s ease;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo",
      -apple-system, BlinkMacSystemFont, "San Francisco", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.btn--primary:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
}

.btn--ghost {
  color: #7C6A4A;
  border: 1px solid rgba(220, 170, 91, .35);
  background: #FFF7EB;
}

.btn--secondary {
  color: #fff;
  background: var(--c-gray-btn);
  box-shadow: 0 5px 10px rgba(55, 65, 81, .18);
  font-size: 12px;
  border-radius: 12px;
  padding: 0.5rem 1.4rem;
  transition: transform .15s ease, filter .15s ease;
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo",
    -apple-system, BlinkMacSystemFont, "San Francisco", "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.btn--secondary:hover {
  transform: translateY(-1px);
  filter: saturate(1.02);
  background: var(--c-gray-btn-hover);
}

/* ホームのアクションを縦積みにして、両ボタンを同幅に */
.screen--home .actions {
  display: flex;
  flex-direction: column;
  /* ← 縦に並べる */
  gap: .6rem;
  justify-content: center;
}

.screen--home .actions .btn {
  /* ← primary/secondary 両方に幅を適用 */
  width: var(--home-block-w);
  display: block;
}

/* ---- Game Header (左:モード、右:タイマー) ---- */
.game-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: -0.25rem 0 2.25rem;
}

.game-mode {
  color: #7C6A4A;
  font-weight: 700;
}

.game-timer {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  font-weight: 900;
  font-size: 1.25rem;
  color: var(--c-gold);
}

.timer-icon {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-gold);
  color: #fff;
  font-size: 1rem;
}

#timer {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---- Game Board ---- */
.game-board {
  position: relative;
  border-radius: var(--card-radius-lg);
  padding: 1.8rem 1.5rem 2.2rem;
  min-height: 20rem;     /* TSX: bg-white/50 + blur + border with mode color 20% */
  background: rgba(255, 255, 255, 0.50);
  backdrop-filter: blur(4px);
}

/* エフェクト用レイヤ */
#typing-effects {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* タイピング演出レイヤー */
.typing-effects-layer {
  position: absolute;
  inset: 0;              /* 親(board)全面 */
  pointer-events: none;  /* クリック等を妨げない */
  overflow: visible;
}

/* 1つの演出アイコン（🔥/💧） */
.typing-effect {
  position: absolute;

  /* ← JSで left/top を都度セットします。初期値はフォールバック用 */
  left: 50%;
  top: 8px;

  /* 原点を中心に。ここから keyframes でさらに動かす */
  /* transform は keyframes 側で上書きするので初期値は不要でもOK */
  font-size: 28px;
  animation: typing-effect var(--dur, 0.9s) ease-out forwards;
  will-change: transform, opacity;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  opacity: 0;

  /* ランダム用のCSS変数（JSで上書き） */
  --jitter-x: 0px;   /* 横ブレ */
  --y0: 0px;         /* 初期Y微調整（+で下から） */
  --rise: 36px;      /* 上昇量 */
  --rot: 0deg;       /* 角度の揺れ */
  --dur: 0.9s;       /* 持続時間 */
}

/* 成功/ミスで微妙に大きさを変えたい場合（任意） */
.typing-effect--success {
  font-size: 30px;
}

.typing-effect--miss {
  font-size: 26px;
}

/* ふわっと上に浮かびながら消える */
@keyframes typing-effect {
  0% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      translateX(var(--jitter-x))
      translateY(var(--y0))
      scale(1)
      rotate(var(--rot));
  }
  50% {
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--jitter-x) * 0.6))
      translateY(calc(var(--y0) - var(--rise) * 0.5))
      scale(1.15)
      rotate(var(--rot));
  }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      translateX(calc(var(--jitter-x) * 1.2))
      translateY(calc(var(--y0) - var(--rise)))
      scale(0.9)
      rotate(var(--rot));
  }
}

/* ローマ字（上段：淡いグレー、成功は薄灰、失敗は赤） */
.romaji-line {
  min-height: 1.8rem;
  display: flex;           /* ← 子要素をフレックス化 */
  flex-wrap: wrap;         /* ← 複数行OK */
  justify-content: center; /* ← 左右中央寄せ */
  letter-spacing: .02em;
  color: #1F2937;
  /* base gray-400~500 */
  font-weight: 600;
  margin: .25rem 0 1rem;
  user-select: none;
  white-space: normal;     /* 改行可能に */
  overflow-wrap: anywhere; /* どこでも折り返しOK */
  word-break: break-word;  /* 単語（まとまり）でも改行可 */
}

.romaji-line span {
  padding: 0 .15ch;
display: inline-block;
}

.romaji-line .ok {
  color: var(--c-ok);
}

.romaji-line .ng {
  color: var(--c-ng);
}

/* かたまりの末尾文字に入れる見た目のスペース */
.romaji-line .wb {
  margin-right: 0.8ch;
}

/* 日本語問題文（大きく・中央） */
.jp-sentence {
  text-align: center;
  font-size: clamp(28px, 5vw, 40px);
  /* TSX: text-4xl */
  line-height: 1.6;
  font-weight: 400;
  color: #394049;
  /* 落ち着いた黒 */
  padding: 1.25rem 1rem;
  margin: 0 auto .75rem;
  border: 1px solid rgba(220, 170, 91, 0.20);
  border-radius: 14px;
  max-width: 880px;
}

/* 焼き芋イラスト置き場（中央下） */
.yakiimo-illustration {
  text-align: center;
  margin-top: .6rem;
  display: grid;
  place-items: center;
}

/* 画像の見た目（Figmaのfilterを再現） */
.yakiimo-illustration img {
  width: clamp(140px, 18vw, 220px);
  /* w-40相当をレスポンシブに */
  height: auto;
  margin: 0 auto;
  filter: contrast(.8) saturate(.7) brightness(.95);
  opacity: .9;
  transition: transform .12s ease, filter .12s ease, opacity .12s ease;
  pointer-events: none;
  user-select: none;
}

/* Start Overlay（スペースキーで開始） */
.start-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 244, 226, .82);
  border-radius: var(--card-radius-lg);
  border: 1px dashed rgba(220, 170, 91, .45);
  text-align: center;
  padding: 24px;
  z-index: 10; /* game-boardよりも上に出すための処置 */
}

.start-overlay__title {
  font-size: clamp(20px, 3.6vw, 28px);
  font-weight: 900;
  color: var(--c-gold);
  margin: 0 0 6px;
}

.start-overlay__sub {
  margin: 0;
  color: #7C6A4A;
  font-weight: 600;
}

/* スタートオーバーレイが表示中は焼き芋画像を非表示に */
.screen--game #start-overlay:not([hidden])~.game-board .yakiimo-illustration {
  visibility: hidden;
  opacity: 0;
}

.screen--game .restart-note {
  position: absolute;
    bottom: 12px;
    right: 14px;
    font-size: .875rem;
    color: #6B7280;
    opacity: .85;
    letter-spacing: .01em;
    z-index: 11;
    pointer-events: none;
}

/* 小さなキーキャップ風の見た目（任意） */
.screen--game .restart-hint kbd,
.screen--game .restart-note kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .85em;
  border: 1px solid rgba(0,0,0,.15);
  border-bottom-width: 2px;
  border-radius: 6px;
  padding: .05em .4em;
  background: #fff;
  color: #374151;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

/* ---- Result Screen ---- */
/* 見出し(h2)をヘッダー内で中央に配置 */
.screen--result .result-header {
  display: flex;
  justify-content: center;
  align-items: center; /* 任意：縦位置も揃える */
}

.screen--result .result-header h2 {
  margin: 0 0 1.4rem;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--mode-color);
  display: inline-flex;
  align-items: center;
  gap: .65rem;
}

.screen--result .result-header h2::before {
  content: "🔥";
  /* 左の丸アイコン（必要に応じて変更OK） */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mode-color);
  color: #fff;
  display: inline-grid;
  place-items: center;
  font-size: 20px;
}

/* カード本体：完成度と時間を左右2カラムに */
.result-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3.5rem;
  row-gap: 1rem;
  justify-items: center;
  align-items: end;
  padding: 1.25rem 1.35rem;
}

/* 2カラム内の各ブロック（縦にラベル→数値） */
.result-row {
  margin: .25rem 0 .9rem;
  padding: 4px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

.result-row--hito {
  grid-column: 1 / -1;
  /* 2カラムをまたいで横いっぱい */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  margin-top: .2rem;
}

/* ラベルをチップ風に */
.result-label,
.result-title-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--mode-color);
  border: 2px solid var(--mode-color);
  border-radius: 8px;      /* ← 角丸8px */
  padding: .25rem .75rem;  /* ← py-1 / px-3 相当 */
  font-weight: 500;        /* ← 太文字ではなく medium */
  font-size: .875rem;      /* ← text-sm 相当 */
  line-height: 1.2;
  letter-spacing: .01em;
}

/* 数値の見た目（左：%を大きく／右：秒も大きく） */
#result-accuracy {
  font-weight: 900;
  font-size: 2.25rem;
  /* 例: 92% */
  color: var(--mode-color);
  line-height: 1;
}

#result-time {
  font-weight: 900;
  font-size: 1.875rem;
  /* 例: 23.0秒 */
  color: var(--mode-color);
  line-height: 1;
}

.result-comment {
  margin: 0;
    color: var(--mode-color);
    font-weight: 400;     /* ← 太字ではなく通常 */
    font-size: 1.125rem;  /* ← text-lg 相当 */
    line-height: 1.6;
}

/* ボタン：左右に「もう一度遊ぶ」「トップへ戻る」 */
.result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .8rem;
  margin-top: 1.1rem;
  margin-bottom: 12px;
}

.result-actions .btn {
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-weight: 800;
}
.screen--result{
  max-height: 88vh;      /* 画面からはみ出し過ぎない安全策（任意） */
}

/* 共有ボタン：その下で横幅いっぱい */
.screen--result .result-share {
  margin-top: .6rem;
}

.screen--result .result-share .btn,
.screen--result .btn--share,
.screen--result [data-action="share-x"] {
  display: block;
  width: 100%;
  padding: 1rem 1.2rem;
  border-radius: 12px;
  font-weight: 800;
  background: #4B6152;  /* 深いオリーブ */
  color: #fff;
  text-align: center;
  box-shadow: 0 8px 18px rgba(75, 97, 82, .25);
}

/* ---- Utilities ---- */
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Screen toggle ---- */
[data-screen][hidden] {
  display: none !important;
}
[hidden] {
  display: none !important;
}

/* Home の中のカード本体 */
.mode-card {
  margin: 28px auto 0;
  max-width: var(--container-w);
  background: rgba(255, 255, 255, .95);
  border: 2px solid var(--c-gold);
  border-radius: var(--card-radius-xl);
  box-shadow:
    0 40px 70px -30px rgba(0, 0, 0, .20),
    0 18px 38px -16px rgba(0, 0, 0, .12);
  padding: 2rem;
  text-align: center;
}

@media (min-width: 1200px) {
  .mode-card {
    padding: 2rem;
  }
}

/* PC少し広め */
@media (min-width:1200px) {
  .screen {
    padding: 3.25rem;
  }

  .game-board {
    min-height: 22rem;
  }
}

.screen--game {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.screen--game .game-board {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* ① カード内だけ白飛び（枠=2pxは残す）— 実DOMレイヤー版 */
.screen { isolation: isolate; }

/* 疑似要素は使わない：クラス .whiteout-layer を実体として重ねる */
.screen--game .whiteout-layer {
  position: absolute;
  inset: 2px;  /* 枠2pxの内側 */
  border-radius: calc(var(--card-radius-xl) - 2px);
  background: #fff;
  opacity: 0;               /* 初期は透明 */
  z-index: 999;             /* カード内最前 */
  pointer-events: none;
  animation: whiteout 1.5s ease-out forwards;
  animation-delay: .2s;
}

/* 装飾円は白飛び中に隠す（任意） */
.screen--game.whiteout::before { opacity: 0 !important; }

/* ② 一時的に結果カードを重ねるためのレイヤークラス（切替の一瞬でカードが消えない） */
.screen.is-layer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: var(--container-w);
  z-index: 1000;            /* ゲームの白レイヤー(z-index:999)より上 */
}

/* ③ “ドン！”：瞬間表示だけ（サイズ変化・フェードなし） */
@keyframes appear {
  from {
    visibility: hidden;
  }

  to {
    visibility: visible;
  }
}

/* 初期は非表示（共有ボタンも対象に含める） */
.screen--result.enter-stagger-seq .result-header,
.screen--result.enter-stagger-seq .result-panel .result-row,
.screen--result.enter-stagger-seq .result-actions .btn,
.screen--result.enter-stagger-seq .result-share .btn {
  visibility: hidden;
}

/* 動き最小設定の配慮 */
@media (prefers-reduced-motion: reduce) {
  .screen--result.enter-stagger-seq .result-header,
  .screen--result.enter-stagger-seq .result-panel .result-row,
  .screen--result.enter-stagger-seq .result-actions .btn,
  .screen--result.enter-stagger-seq .result-share .btn {
    animation-duration: .001s;
    animation-delay: 0s;
    transform: none;
  }
}

@keyframes whiteout {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}