/* のぼのぼダイノ：空は パステルの グラデ（canvas は 透明で、うしろの この グラデが 見える） */
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;
}
/* 空の 上・下の 色は 時代で かわる（main.js の skyAt が --sky-top・--sky-bottom を 書く。はじめは 三畳紀） */
body {
  background: linear-gradient(to bottom, var(--sky-top, #f6e2b8) 0%, var(--sky-bottom, #fbefd6) 100%);
}
#stage { position: fixed; inset: 0; }
/* 星（そらの 上の ほう）：main.js が 点を 30こ 作って、高さで opacity を かえる。canvas の うしろ */
#stars { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; }
#stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px rgba(255, 255, 255, 0.8); }
#stars i.big { width: 3px; height: 3px; }
/* よるの そらの 時代で ふやす 星（main.js の moreStarsAt で opacity） */
#stars-more { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; }
#stars-more i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 3px rgba(255, 255, 255, 0.8); }
#stars-more i.big { width: 3px; height: 3px; }
/* 空の 奥の 太陽・月（きょうの やまの 時間帯。main.js が class を 付ける）。向きが 逆の 山は 左右 逆（.flip） */
#orb { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; width: min(90px, 20vw); height: min(90px, 20vw); }
#orb[hidden] { display: none; }
#orb.sunrise { left: 12%; top: 58%; background: radial-gradient(circle, #fff6d8 0%, #ffd9a0 55%, rgba(255, 210, 160, 0) 72%); }
#orb.sunset { right: 10%; top: 54%; width: min(120px, 26vw); height: min(120px, 26vw); background: radial-gradient(circle, #ffe0a0 0%, #ff9a4a 52%, rgba(255, 120, 70, 0) 72%); }
#orb.moon { right: 14%; top: 10%; width: min(60px, 14vw); height: min(60px, 14vw); background: radial-gradient(circle at 40% 40%, #fffbe8 0%, #f3edc8 58%, rgba(243, 237, 200, 0) 72%); box-shadow: 0 0 24px rgba(255, 250, 220, 0.35); }
#orb.sunrise.flip { left: auto; right: 12%; }
#orb.sunset.flip, #orb.moon.flip { right: auto; left: 10%; }
/* はじめの 画面：きょうの やまの 説明の 行は 山の 名前（「きょうは ゆうやけの しだやま」）を 太く */
#mode .yama .daily-sub b { font-weight: 800; }
/* 3D は 画面いっぱい（ボタンは ない）。長押しで iOS の メニュー・選択が 出ない ように */
#cv { display: block; width: 100%; height: 100%; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* いまの 高さ */
#height {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #4a3b2a;
  font-size: 28px;
  font-weight: 800;
  pointer-events: none;
  white-space: nowrap;
}
/* 高さの 横の モードの マーク（小さく） */
#mode-tag { margin-left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 13px; vertical-align: middle; color: #fff; background: #7cc7a0; }
#mode-tag[data-mode="normal"] { background: #e9853a; }
#mode-tag[hidden] { display: none; }
#msg {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  color: #e0703a;
  font-size: 32px;
  font-weight: 800;
  pointer-events: none;
  white-space: nowrap;
}

/* 時代の 帯（画面の 上・高さの 表示の 下）：ぴょんぴょんダイノの 帯と 同じ（クリーム色・上下に オレンジの 線・大きい 文字＋小さく 年代）。
   main.js が #era を 作って .show を 2秒 付ける。はじめと おわりは 0.25秒で ふわっと。さわれない */
#era {
  position: absolute;
  top: calc(max(12px, env(safe-area-inset-top)) + 60px);
  left: 0;
  right: 0;
  padding: 8px 12px 10px;
  background: rgba(255, 250, 240, 0.9);
  border-top: 5px solid #e9853a;
  border-bottom: 5px solid #e9853a;
  color: #4a3b2a;
  text-align: center;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s;
}
#era.show { opacity: 1; }
#era .title { font-size: min(32px, 7vw); }
#era .sub { margin-top: 2px; font-size: min(20px, 4.6vw); }

/* はじめての 帯（画面の 下）：さわれない（その 下の 画面を 押しても 飛べる）。最初の ジャンプで hidden */
#hint {
  position: absolute;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  padding: 10px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #4a3b2a;
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}
#hint[hidden] { display: none; }

/* 「ここから やりなおせるよ」なども 幅 390px に 入る ように */
#msg { font-size: min(32px, 6.2vw); }

/* 進み具合バー（右はし・画面の 高さの 6割・細め）。下から 時代の 色・てっぺんに 旗・巣の 印・自己ベストの 線・恐竜の 顔。さわれない */
#bar {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  top: 22%;
  height: 60%;
  width: 10px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.6);
  pointer-events: none;
}
#bar .era { position: absolute; left: 0; right: 0; }
#bar .era.triassic { background: #f0b27a; border-radius: 0 0 5px 5px; }
#bar .era.jurassic { background: #7cc7a0; }
#bar .era.cretaceous { background: #f08f7a; }
#bar .era.sky { background: #8fd3f4; border-radius: 5px 5px 0 0; }
#bar .flag { position: absolute; bottom: 100%; left: 4px; width: 2px; height: 20px; background: #4a3b2a; }
#bar .flag::after { content: ""; position: absolute; top: 0; left: 2px; border-left: 13px solid #e9853a; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
#bar .cp { position: absolute; left: -4px; width: 14px; height: 14px; margin-bottom: -7px; border-radius: 50%; background: #fff; border: 2px solid #a77b54; box-sizing: border-box; }
#bar .cp.on { background: #ffd84a; }
#bar .best { position: absolute; left: -6px; right: -6px; height: 2px; margin-bottom: -1px; background: #4a3b2a; opacity: 0.6; }
#bar .face {
  position: absolute; left: -11px; width: 32px; height: 32px; margin-bottom: -16px;
  border-radius: 50%; border: 2px solid #fff; box-sizing: border-box;
  background: #fff url(img/dino_067_tyrannosaurus.webp) no-repeat 78% 18% / 230%;
}

/* てっぺんの 画面（たまごが 割れた あと）：まんなかに カード・「もういっかい」だけ 押せる */
/* 重ねて 出す 画面（ゴール・はじめの 画面・ずかん・ひみつ・メニュー）の きまり：枠は 画面の 高さに 収める（上下 8px と セーフエリアを 引く）。
   中身だけ たてに スクロール（タッチ・ホイール）・閉じる／決める ボタンは いつも 見える。枠の 外を 押しても うしろの ゲームは 動かない（main.js の inDebug） */
:root { --fit-h: calc(100vh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
@supports (height: 100dvh) { :root { --fit-h: calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); } }
/* うしろの ゲームが すけない：まわりは 0.7・枠は 白 0.97 */
#goal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 250, 240, 0.7); }
#goal[hidden] { display: none; }
/* はば：スマホは 画面 − 16px・PC は 恐竜の 一覧（6列・絵 120px）が 入る 840px まで */
#goal .card { display: flex; flex-direction: column; box-sizing: border-box; width: min(840px, calc(100vw - 16px)); max-height: var(--fit-h); border-radius: 22px; background: rgba(255, 255, 255, 0.97); color: #4a3b2a; text-align: center; font-weight: 800; overflow: hidden; }
#goal .scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch; padding: 10px 12px 10px; }
/* ボタンの 行：枠の 下に 固定（スクロールしても 動かない）・上に うすい 線と 影。もういっかい と モードを かえる は 横に ならべる */
#goal .actions { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 10px; padding: 10px 10px 12px; border-top: 1px solid rgba(167, 123, 84, 0.25); box-shadow: 0 -6px 10px -6px rgba(74, 59, 42, 0.25); }
/* 上の かたまり（PC でも はば 520px まで・まん中） */
#goal .top { max-width: 520px; margin: 0 auto; }
#goal .head { display: flex; align-items: center; justify-content: center; gap: 8px; }
#goal .title { font-size: 1.8rem; line-height: 1.15; white-space: nowrap; color: #e0703a; }
#goal-mode { flex: none; padding: 2px 8px; border-radius: 999px; background: #449a72; color: #fff; font-size: 13px; line-height: 1.3; white-space: nowrap; }
#goal-mode[data-mode="normal"] { background: #e0703a; }
#goal .who { display: flex; align-items: center; justify-content: center; gap: 4px; margin-top: 2px; font-size: 14px; line-height: 1.2; color: #6a5440; }
#goal .who .dot { color: #c9b39a; }
#goal .born { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
#goal img { display: block; object-fit: contain; }
#goal #goal-baby { flex: none; width: 88px; height: 88px; margin: 0; cursor: pointer; border-radius: 16px; }
#goal-name { min-width: 0; font-size: 17px; line-height: 1.5; text-align: left; }
#goal-name rt { font-size: 10px; }
#goal-name .new { margin: 0 4px 0 0; font-size: 10px; }
/* 記録の ます目（3つ 横に）：上に 小さい 見出し・下に 大きい 数字 */
#goal .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
#goal .stats .cell { position: relative; display: flex; flex-direction: column; align-items: center; padding: 4px 2px 5px; border-radius: 12px; background: #fbf3e4; }
#goal .stats .k { font-size: 11px; line-height: 1.3; color: #8a6a4a; white-space: nowrap; }
#goal .stats b { font-size: 20px; line-height: 1.2; white-space: nowrap; font-variant-numeric: tabular-nums; }
#goal-allrec { margin-top: 3px; font-size: 11px; color: #8a6a4a; }
#goal-allrec[hidden] { display: none; }
#again { flex: 0 1 auto; min-height: 48px; margin: 0; padding: 8px 22px; border: 0; border-radius: 999px; background: #e0703a; color: #fff; font: inherit; font-size: 20px; touch-action: manipulation; }
#change-mode { display: block; flex: 0 1 auto; min-height: 48px; margin: 0; padding: 8px 14px; border: 2px solid #e9853a; border-radius: 999px; background: #fff; color: #e0703a; font: inherit; font-size: 15px; touch-action: manipulation; }
/* きょうの やまへ（はじめて 開いた ときだけ）：「もういっかい」の 上に 1行で 大きく */
#goal-daily { flex: 0 0 100%; max-width: 360px; margin: 0; padding: 12px 20px; border: 0; border-radius: 999px; background: #2f6fb0; color: #fff; font: inherit; font-size: 22px; touch-action: manipulation; box-shadow: 0 3px 0 #1f4e80; }
#goal-daily[hidden] { display: none; }

/* クリアムービー：画面いっぱい（正方形の まま 短い 辺に あわせる）・まわりは 白（最後が 白フェードなので なじむ） */
#clear-movie { position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: #fff; touch-action: manipulation; }
#clear-movie[hidden] { display: none; }
#clear-video { display: block; width: min(100vw, 100vh); height: min(100vw, 100vh); object-fit: contain; background: #fff; }
@supports (height: 100dvh) { #clear-video { width: min(100vw, 100dvh); height: min(100vw, 100dvh); } }
#movie-skip { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); margin: 0; padding: 8px 18px; border: 2px solid #a77b54; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #4a3b2a; font: inherit; font-size: 18px; font-weight: 800; touch-action: manipulation; }
#movie-skip[hidden] { display: none; }

/* 「きょうの やま が でてきた！」：空色 → 白・雲が 左右に われて、山の シルエットが 下から せり上がる（.go で 動く・2.6秒）。
   .short（ムービーを 最後まで 見た あと）は 山は もう 見えていて、文字だけ ふわっと（1.5秒） */
#reveal { position: absolute; inset: 0; z-index: 41; overflow: hidden; background: linear-gradient(to bottom, #9fd3f5 0%, #dff1fb 60%, #fff 100%); color: #2f4a6b; text-align: center; font-weight: 800; pointer-events: auto; touch-action: manipulation; }
#reveal[hidden] { display: none; }
#reveal .peak { position: absolute; left: 50%; bottom: 0; width: min(90vw, 560px); height: 58%; background: linear-gradient(to bottom, #5d7396, #3e5577); clip-path: polygon(0 100%, 22% 52%, 34% 64%, 52% 8%, 68% 48%, 78% 38%, 100% 100%); transform: translate(-50%, 100%); }
#reveal .cloud { position: absolute; top: 18%; width: 62%; height: 64%; border-radius: 50%; background: #fff; box-shadow: 0 0 40px 30px #fff; }
#reveal .cloud.l { left: -6%; }
#reveal .cloud.r { right: -6%; }
#reveal .title { position: absolute; left: 0; right: 0; top: 16%; padding: 0 12px; font-size: min(38px, 8.4vw); line-height: 1.25; color: #e0703a; text-shadow: 0 2px 0 #fff, 0 0 12px #fff; opacity: 0; }
#reveal .sub { position: absolute; left: 0; right: 0; top: calc(16% + min(38px, 8.4vw) * 1.25 + 14px); padding: 0 12px; font-size: min(22px, 5.4vw); text-shadow: 0 0 8px #fff; opacity: 0; }
#reveal.go .cloud.l { animation: revealCloudL 0.9s ease-in 0.2s forwards; }
#reveal.go .cloud.r { animation: revealCloudR 0.9s ease-in 0.2s forwards; }
#reveal.go .peak { animation: revealPeak 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) 0.5s forwards; }
#reveal.go .title { animation: revealText 0.5s ease-out 1.2s forwards; }
#reveal.go .sub { animation: revealText 0.5s ease-out 1.5s forwards; }
#reveal.short .cloud { display: none; }
#reveal.short .peak { transform: translate(-50%, 0); }
#reveal.short.go .peak { animation: none; }
#reveal.short.go .title { animation: revealText 0.35s ease-out 0s forwards; }
#reveal.short.go .sub { animation: revealText 0.35s ease-out 0.2s forwards; }
@keyframes revealCloudL { to { transform: translateX(-75%); opacity: 0.6; } }
@keyframes revealCloudR { to { transform: translateX(75%); opacity: 0.6; } }
@keyframes revealPeak { to { transform: translate(-50%, 0); } }
@keyframes revealText { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }

/* はじめの 画面（モードを えらぶ）：大きい ボタン 2つ・下に 小さく 説明。前に えらんだ 方（.last）は 光る */
#mode { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 250, 240, 0.55); touch-action: manipulation; }
#mode[hidden] { display: none; }
/* 375×548（iPhone SE3 の Safari）で スクロールなしに 収める：枠の 内側 16px・ボタンの 間 8〜12px・押せる ところは 高さ 44px 以上。PC では はば 420px まで（まん中） */
#mode .card { box-sizing: border-box; width: min(420px, calc(100vw - 16px)); padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.95); color: #4a3b2a; text-align: center; font-weight: 800; max-height: var(--fit-h); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
#mode .title { font-size: min(30px, 7.5vw); margin-bottom: 14px; }
#mode .choices { display: flex; gap: 10px; justify-content: center; }
#mode .choice { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 0; }
/* やさしい／ふつう：高さ 60px の 横長（文字は 1.4rem） */
#mode button { box-sizing: border-box; width: 100%; height: 60px; padding: 0; border: 2px solid transparent; border-radius: 16px; color: #fff; font: inherit; font-size: 1.4rem; line-height: 1.2; touch-action: manipulation; }
/* 白い 文字が 読める こさ（背景との コントラスト比 3 以上。scripts/smoke.mjs が 見る） */
#mode button[data-mode="easy"] { background: #449a72; }
#mode button[data-mode="normal"] { background: #e0703a; }
/* ゲームの 名前（ほかの ダイノと 同じ 書体：M PLUS Rounded 1c の 800）：2.1rem で 画面で いちばん 大きい 文字。下の ひとことは 13px・1行 */
#mode .logo { margin: 0; font-family: "M PLUS Rounded 1c", "BIZ UDPGothic", system-ui, sans-serif; font-weight: 800; font-size: 2.1rem; line-height: 1.15; color: #3f7a3a; }
#mode .catch { margin: 2px 0 8px; font-size: 13px; line-height: 1.3; white-space: nowrap; color: #8a6a4a; }
/* 前に えらんだ 方：光る ふちは 細く */
#mode button.last { border-color: #ffd84a; box-shadow: 0 0 0 2px rgba(255, 216, 74, 0.5), 0 0 9px 3px rgba(255, 216, 74, 0.8); }
/* ボタンの 下の 説明：12px・1行 */
#mode .sub { margin-top: 4px; font-size: 12px; line-height: 1.3; white-space: nowrap; }
/* 山を えらぶ（モードの 上）：いつもの やま／きょうの やま（2行目に 日付を 小さく・クリアしたら「クリア！」）。いまの 山（.on）は 色が つく。高さ 56px */
#mode .yama { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
#mode .yama button { position: relative; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; column-gap: 0.25em; width: 100%; height: auto; min-height: 56px; padding: 2px 4px; border: 3px solid #a77b54; border-radius: 16px; background: #fff; color: #4a3b2a; font-size: 16px; line-height: 1.25; }
#mode .yama button.on { background: #a77b54; color: #fff; }
#mode .yama .date { flex-basis: 100%; font-size: 12px; }
#mode .yama .clear { position: absolute; top: -10px; right: -6px; padding: 1px 6px; border-radius: 8px; background: #e0703a; color: #fff; font-size: 11px; transform: rotate(8deg); }
#mode .yama .clear[hidden], #mode .yama .fresh[hidden], #mode .yama .lock[hidden] { display: none; }
/* ロック中の きょうの やま：灰色で 🔒（押すと 説明が 少し ゆれる だけ） */
#mode .yama button.locked { border-color: #b9b2aa; background: #ecebe8; color: #6f6a63; }
#mode .yama button.locked.on { background: #7d776f; color: #fff; }
#mode .yama .lock { position: absolute; top: -10px; right: -6px; font-size: 18px; line-height: 1; }
#mode .yama .sub.locked { color: #7a6f63; }
#mode .yama .sub.shake { animation: lockShake 0.45s ease-in-out; }
@keyframes lockShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
#mode .yama .fresh { position: absolute; top: -10px; right: -6px; padding: 1px 6px; border-radius: 8px; background: #3f7a3a; color: #fff; font-size: 11px; transform: rotate(8deg); }
/* 山の 見出し・説明（モードの「どっちで あそぶ？」と そろえる） */
#mode .yama-title, #mode .mode-title { font-size: 15px; line-height: 1.3; margin-bottom: 6px; }
/* 横に 長くて 低い 画面（スマホ横）：左に 名前・山・主人公・ずかん、右に モード（どこも 画面に 入る） */
@media (max-height: 520px) and (min-aspect-ratio: 4/3) {
  #mode .card { display: grid; grid-template-columns: auto auto; column-gap: 22px; align-items: center; padding: 10px 18px 12px; }
  #mode .card > * { grid-column: 1; }
  #mode .card > .mode-title { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
  #mode .card > .choices { grid-column: 2; grid-row: 3 / span 4; align-self: start; }
  #mode .card { width: auto; max-width: calc(100vw - 16px); }
  #mode .choice { flex: none; width: min(170px, 22vw); }
  #mode .logo { font-size: 1.6rem; }
  #mode .catch { margin-bottom: 4px; }
  #mode .yama { margin-bottom: 4px; }
  #mode .hero { margin-top: 6px; }
  #mode .extras { margin-top: 6px; }
  #mode #langs { margin-top: 6px; }
}
/* ことば（にほんご／English）：はじめの 画面の いちばん 下に 小さく。いまの ことばは みどり。#mode button（白い 文字・はば 100%）を 打ち消す */
#mode #langs { display: flex; gap: 8px; justify-content: center; margin-top: 8px; }
#mode #langs[hidden] { display: none; }
#mode #langs button { width: auto; min-width: 88px; height: 44px; padding: 0 12px; border: 2px solid #a77b54; border-radius: 999px; background: #fff; color: #4a3b2a; font-size: 15px; }
#mode #langs button[aria-pressed="true"] { border-color: #3f7a3a; background: #3f7a3a; color: #fff; }
/* 英語：長い 言葉は ボタンや 帯の 中で 折り返す（はみ出さない） */
html[lang="en"] #mode button, html[lang="en"] #goal button, html[lang="en"] #menu button, html[lang="en"] #msg, html[lang="en"] #hint, html[lang="en"] #era, html[lang="en"] #secret { overflow-wrap: anywhere; }
html[lang="en"] #mode button[data-mode] { padding-left: 6px; padding-right: 6px; }
/* 高さの 横の 山の マーク（⛰️ いつもの・📅 きょうの） */
#yama-tag { margin-left: 4px; font-size: 16px; vertical-align: middle; }
#yama-tag[hidden] { display: none; }
#goal-yama { white-space: nowrap; }

/* 寄り道の たまご：高さの 下に 小さく「たまごの 絵 ◯/9」。取ると 少し はねる */
#eggs { font-size: 15px; line-height: 1.1; text-align: center; transition: transform 0.12s; }
#eggs.bump { transform: scale(1.25); }
.egg-icon, .fly-egg { display: inline-block; width: 11px; height: 14px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #fff; border: 2px solid #c9a070; box-sizing: border-box; vertical-align: -1px; margin-right: 4px; }
.fly-egg { position: absolute; width: 22px; height: 28px; margin: 0; transform: translate(-50%, -50%) scale(1); transition: left 0.6s ease-in, top 0.6s ease-in, transform 0.6s ease-in; pointer-events: none; z-index: 5; }
.fly-egg.triassic { background: radial-gradient(circle at 35% 40%, #b5654a 18%, #fff 20%); }
.fly-egg.jurassic { background: radial-gradient(circle at 35% 40%, #6fae5c 18%, #fff 20%); }
.fly-egg.cretaceous { background: radial-gradient(circle at 35% 40%, #f08a3c 18%, #fff 20%); }
.fly-egg.sky { background: radial-gradient(circle at 35% 40%, #7cc8ee 18%, #fff 20%); }
.fly-egg.gold { background: #f5c542; border-color: #fff3b0; box-shadow: 0 0 10px 4px rgba(255, 216, 74, 0.8); }
/* 右の バーの たまごの 点（取ったら 時代の 色・金） */
#bar .egg-dot { position: absolute; left: 1px; width: 8px; height: 8px; margin-bottom: -4px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); border: 1px solid #c9a070; box-sizing: border-box; }
#bar .egg-dot.on.triassic { background: #b5654a; }
#bar .egg-dot.on.jurassic { background: #3f8a3a; }
#bar .egg-dot.on.cretaceous { background: #e06a1c; }
#bar .egg-dot.on.sky { background: #4fb0e0; }
#bar .egg-dot.on.gold { background: #ffd84a; box-shadow: 0 0 4px 2px rgba(255, 216, 74, 0.9); }
/* 時代の 帯は たまごの 数の 下 */
#era { top: calc(max(12px, env(safe-area-inset-top)) + 78px); }

/* ゴールで かえった 恐竜（名前は ふりがなつき・はじめては NEW・金の たまごは キラキラ） */
/* PC は 6列・スマホ（はば 600px まで）は 3列。タップで えらぶ（.sel は ふちが 光る）。見出し「うまれた なかま 12」 */
#goal-hatch-title { margin-top: 12px; font-size: 15px; color: #6a5440; }
#goal-hatch-title[hidden] { display: none; }
#goal-hatch { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; }
@media (max-width: 600px) { #goal-hatch { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#goal-hatch[hidden] { display: none; }
#goal-hatch li { position: relative; padding: 4px 0 4px; border-radius: 12px; cursor: pointer; touch-action: pan-y; }
/* 恐竜の ます目（ゴールの 一覧・ずかん・主人公を えらぶ 画面）：絵は ます目の はば いっぱい（左右 4px・いちばん 大きくて 120px）・
   名前は 2行ぶんの 高さを とって そろえる（「…」で 切らない。入らない ときは main.js の fitNames が 10px まで 小さく する）。ふりがなは 1文字ずつ（いっしょに 折り返す） */
#goal #goal-hatch img, #zukan-list img { display: block; box-sizing: border-box; width: calc(100% - 8px); max-width: 120px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; object-fit: contain; }
#goal-hatch .name, #zukan-list .name { box-sizing: border-box; height: 50px; padding: 0 3px; overflow: hidden; font-size: 12px; line-height: 1.25; overflow-wrap: anywhere; }
#goal-hatch rt, #zukan-list rt { font-size: 8px; line-height: 1; }
#goal-hatch li.shiny img { filter: brightness(1.15) saturate(1.3) drop-shadow(0 0 6px #ffd84a); }
#goal-hatch li.sel, #goal #goal-baby.sel { box-shadow: 0 0 0 3px #ffd84a inset, 0 0 12px 3px rgba(255, 216, 74, 0.9); background: #fff8d8; }
/* えらんだ 恐竜を 主人公に（一覧の 下に 1つだけ） */
#goal-pick { display: block; margin: 8px auto 0; padding: 8px 18px; border: 2px solid #e9853a; border-radius: 999px; background: #fff; color: #c25a24; font: inherit; font-size: 15px; touch-action: manipulation; }
#goal-pick[hidden] { display: none; }
#goal-pick:disabled { border-color: #ffd84a; background: #ffd84a; color: #4a3b2a; }
#goal-pick rt { font-size: 8px; }
.new { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 6px; background: #e0703a; color: #fff; font-size: 11px; vertical-align: middle; }
/* NEW：絵の 右上の かど（名前に かぶせない） */
#goal-hatch .new { position: absolute; top: 4px; right: 4px; margin: 0; padding: 0 4px; font-size: 10px; line-height: 1.4; }

/* はじめの 画面の「ずかん ◯/◯しゅ」・のぼのぼずかん（かえした 恐竜は 絵・まだは シルエット。中だけ たてに スクロール） */
#zukan-open { display: block; margin: 16px auto 0; padding: 8px 22px; border: 2px solid #a77b54; border-radius: 999px; background: #fff; color: #4a3b2a; font: inherit; font-size: 18px; touch-action: manipulation; }
#zukan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 250, 240, 0.7); }
#zukan[hidden] { display: none; }
#zukan .card { display: flex; flex-direction: column; width: min(840px, calc(100vw - 16px)); max-height: var(--fit-h); padding: 16px 10px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.97); color: #4a3b2a; text-align: center; font-weight: 800; box-sizing: border-box; }
#zukan .title { font-size: min(26px, 6.5vw); margin-bottom: 8px; }
#zukan-count { font-size: 16px; }
#zukan .title, #secrets .title, #zukan-close, #secrets-close { flex: none; }
#zukan-list { flex: 1 1 auto; min-height: 0; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; }
/* PC は 6列（絵 120px）・スマホ（はば 600px まで）は 3列（375px で 絵 90px 以上）。絵と 名前は ゴールの 一覧と 同じ（上の #goal-hatch の ところ） */
@media (max-width: 600px) { #zukan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
#zukan-list li { padding: 4px 0; font-size: 10px; }
#zukan-list li.yet img { filter: brightness(0); opacity: 0.18; }
/* クラベの 枠（しゅじんこうを えらぶ ときだけ・ティラノの となり）：見つける 前は シルエットと「？ どこかの やまに いるよ」 */
#zukan-list li.kurabe { border-radius: 12px; background: #eafaf5; }
#zukan-list li.kurabe.yet .name { font-size: 11px; color: #6a6a6a; }
/* 主人公：ずかんの「しゅじんこうに する」（かえした ものと 最初から いる ティラノ）・いまの 主人公（.hero）は 金の わく */
#zukan-list li.starter img { filter: none; opacity: 1; }
#zukan-list li.hero { border-radius: 12px; box-shadow: 0 0 0 3px #ffd84a inset; background: #fff8d8; }
.hero-pick { display: block; margin: 2px auto 0; padding: 2px 6px; border: 2px solid #e9853a; border-radius: 999px; background: #fff; color: #e0703a; font: inherit; font-size: 10px; touch-action: manipulation; }
.hero-pick:disabled { border-color: #ffd84a; background: #ffd84a; color: #4a3b2a; }
#zukan.pick li.have, #zukan.pick li.starter { cursor: pointer; }
/* はじめの 画面の 主人公の ボタン（高さ 52px）：左に 絵・まん中に 名前（ふりがな つき）・右はしに 小さく「かえる ›」 */
#mode .hero { display: flex; justify-content: center; margin-top: 10px; }
#mode #hero-open { display: flex; align-items: center; gap: 8px; width: 100%; height: 52px; padding: 0 14px 0 6px; border: 2px solid #e9853a; border-radius: 999px; background: #fff; color: #4a3b2a; font-size: 16px; }
#hero-open img { flex: none; width: 40px; height: 40px; object-fit: contain; }
#hero-open .name { flex: 1 1 auto; min-width: 0; }
#hero-open .change { flex: none; font-size: 12px; color: #c25a24; }
#hero-open rt { font-size: 8px; }
/* ゴールの 画面の 主人公（小さく） */
#goal-hero { display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 0; }
#goal #goal-hero img { display: inline-block; flex: none; width: 28px; height: 28px; margin: 0; }
#goal-hero rt { font-size: 8px; }
#zukan-close { margin: 12px auto 0; padding: 10px 32px; border: 0; border-radius: 999px; background: #e0703a; color: #fff; font: inherit; font-size: 20px; touch-action: manipulation; }

/* ひみつ：はじめの 画面の ずかんの となりの ボタン・一覧（見つけた もの＝名前と ひとこと／まだ＝？？？と ヒント） */
#mode .extras { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
#mode .extras #zukan-open { margin: 0; }
/* ずかん・ひみつ の ボタン：#mode button（白い 文字・はば 100%・大きい 字）を 打ち消す。こい 茶色の 文字・ふちの 線・高さ 48px。
   ずかんは 小さい 恐竜の 絵、ひみつは「？」の マーク（::before。文字は main.js が 書きかえる） */
#mode .extras button { display: inline-flex; align-items: center; gap: 8px; width: auto; height: 48px; box-sizing: border-box; padding: 0 16px 0 8px; border: 3px solid #a77b54; border-radius: 16px; background: #fff; color: #4a3b2a; font-size: min(17px, 4.5vw); line-height: 1.2; }
#mode .extras #secrets-open { border-color: #8a6fc0; }
/* 文字は 2行（main.js の paintTwoLines）：上に 名前（ずかん／ひみつ）・下に 数（0/157しゅ）。数は 折り返さない（375px で「0/157し」「ゅ」に 割れない） */
#mode .extras button .two { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; text-align: left; }
#mode .extras button .two .k { font-size: min(15px, 4vw); }
#mode .extras button .two .n { white-space: nowrap; font-size: min(16px, 4.3vw); }
#mode .extras button::before { content: ""; flex: none; width: 34px; height: 34px; }
#mode .extras #zukan-open::before { background: url(img/dino_067_tyrannosaurus.webp) no-repeat center / contain; }
#mode .extras #secrets-open::before { content: "？"; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #8a6fc0; color: #fff; font-size: 21px; font-weight: 800; }
#secrets-open { padding: 8px 22px; border: 2px solid #8a6fc0; border-radius: 999px; background: #fff; color: #4a3b2a; font: inherit; font-size: 18px; touch-action: manipulation; }
#secrets { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 250, 240, 0.7); }
#secrets[hidden] { display: none; }
#secrets .card { display: flex; flex-direction: column; width: min(460px, 92vw); max-height: var(--fit-h); padding: 16px 14px 18px; border-radius: 22px; background: rgba(255, 255, 255, 0.97); color: #4a3b2a; text-align: center; font-weight: 800; box-sizing: border-box; }
#secrets .title { font-size: min(26px, 6.5vw); margin-bottom: 8px; }
#secrets-count { font-size: 16px; }
#secrets-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; text-align: left; }
#secrets-list li { margin: 6px 0; padding: 8px 12px; border-radius: 14px; background: #f3edff; }
#secrets-list li.yet { background: #eee; color: #8a8a8a; }
#secrets-list .name { font-size: 17px; }
#secrets-list .note { margin-top: 2px; font-size: 13px; font-weight: 600; }
#movie-open { flex: none; margin: 10px auto 0; padding: 8px 22px; border: 2px solid #2f6fb0; border-radius: 999px; background: #fff; color: #2f6fb0; font: inherit; font-size: 17px; touch-action: manipulation; }
#movie-open[hidden] { display: none; }
#secrets-close { margin: 12px auto 0; padding: 10px 32px; border: 0; border-radius: 999px; background: #8a6fc0; color: #fff; font: inherit; font-size: 20px; touch-action: manipulation; }
/* ひみつを 見つけた 帯（画面の 上の 小さい 帯・2秒）。さわれない */
#secret { position: absolute; top: calc(max(12px, env(safe-area-inset-top)) + 34px); left: 50%; transform: translateX(-50%); padding: 6px 18px; border-radius: 14px; background: rgba(138, 111, 192, 0.92); color: #fff; text-align: center; font-weight: 800; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.25s; }
#secret.show { opacity: 1; }
#secret .title { font-size: min(20px, 5vw); }
#secret .sub { font-size: min(15px, 3.8vw); }
#secret .sub:empty { display: none; }
/* ねむっている 恐竜の 上の Zzz（ふわふわ） */
#zzz { position: absolute; transform: translate(-50%, -100%); color: #fff; font: 800 20px sans-serif; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); pointer-events: none; animation: zzz 1.6s ease-in-out infinite; }
#zzz[hidden] { display: none; }
@keyframes zzz { 0%, 100% { margin-top: 0; opacity: 0.7; } 50% { margin-top: -8px; opacity: 1; } }
/* ながれぼし（空の 上を 横切る。canvas の うしろ） */
#meteor { position: absolute; width: 70px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); transform: rotate(-18deg); pointer-events: none; box-shadow: 0 0 6px #fff; }
#meteor[hidden] { display: none; }
/* ゴールの ひみつの ひとこと・ノーミスの 金の 旗 */
#goal-secret { margin-top: 6px; color: #b8860b; font-size: 16px; }
#goal-secret[hidden] { display: none; }
#bar .flag.gold { filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.15); }

/* タイムアタック：タイマー（ふつうだけ・高さの 下に 小さく「1:23.4」）。出ている ときは 時代の 帯を 少し 下げる */
#run-time { font-size: 15px; line-height: 1.2; text-align: center; font-variant-numeric: tabular-nums; color: #6a5440; }
#run-time[hidden] { display: none; }
#stage:has(#run-time:not([hidden])) #era { top: calc(max(12px, env(safe-area-inset-top)) + 96px); }
/* 区間の 差（帯「ここから やりなおせるよ」の 下）：速い＝みどり・遅い＝やさしい あか */
#split { position: absolute; top: calc(30% + 64px); left: 50%; transform: translateX(-50%); padding: 4px 16px; border-radius: 12px; background: rgba(255, 255, 255, 0.9); font-size: min(24px, 5.6vw); font-weight: 800; pointer-events: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
#split[hidden] { display: none; }
#split.fast { color: #3f9a4f; }
#split.slow { color: #d9776a; }
/* メニューの ボタン（左下の すみ・≡ の 絵と 小さい 文字）：はば・高さ 44px 以上・画面の ふちから 8px 以上 はなす */
#menu-open { position: absolute; left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 52px; min-height: 52px; box-sizing: border-box; padding: 2px 6px; border: 2px solid #a77b54; border-radius: 14px; background: rgba(255, 255, 255, 0.9); color: #4a3b2a; font: inherit; font-weight: 800; touch-action: manipulation; }
#menu-open[hidden] { display: none; }
#menu-open .icon { font-size: 24px; line-height: 1; }
#menu-open .label { font-size: 10px; line-height: 1.1; }
/* メニュー（つづける／さいしょから／はじめの がめんへ）と「ほんとうに？」（はい／いいえ） */
#menu { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(74, 59, 42, 0.35); touch-action: manipulation; }
#menu[hidden], #menu .main[hidden], #menu .ask[hidden] { display: none; }
#menu .card { box-sizing: border-box; width: min(320px, 90vw); max-height: var(--fit-h); overflow-y: auto; padding: 14px 18px 16px; border-radius: 22px; background: rgba(255, 255, 255, 0.97); color: #4a3b2a; text-align: center; font-weight: 800; }
#menu .title { margin-bottom: 10px; font-size: 20px; line-height: 1.4; }
#menu button { display: block; width: 100%; min-height: 48px; margin: 8px 0 0; padding: 8px 12px; border: 2px solid #a77b54; border-radius: 999px; background: #fff; color: #4a3b2a; font: inherit; font-size: 18px; touch-action: manipulation; }
#menu button.primary { border-color: #e0703a; background: #e0703a; color: #fff; }
#menu .row { display: flex; gap: 10px; }
#menu .row button { margin-top: 4px; }
/* ゴールの 画面：しんきろく！・自己ベストの 行・れんしゅう・区間の 表 */
/* しんきろく！：タイムの ます目の 右上に 小さい 札（ゆれる） */
#goal-new { position: absolute; top: -8px; right: -4px; padding: 1px 6px; border-radius: 8px; background: #e0703a; color: #fff; font-size: 10px; line-height: 1.4; white-space: nowrap; transform: rotate(6deg); animation: newrec 0.8s ease-in-out infinite alternate; }
#goal-new[hidden], #goal-best[hidden], #goal-practice[hidden] { display: none; }
@keyframes newrec { from { transform: rotate(6deg) scale(1); } to { transform: rotate(6deg) scale(1.08); } }
/* 自己ベストとの くらべ（1行） */
#goal-best { margin-top: 4px; font-size: 14px; line-height: 1.4; white-space: nowrap; color: #6a5440; font-variant-numeric: tabular-nums; }
#goal-best.new-line { color: #e0703a; }
#goal-practice { margin-top: 4px; font-size: 13px; color: #8a8a8a; }
/* 区間：4つの ます目を 横 1列（折り返さない） */
#goal-splits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 6px 0 0; font-size: 13px; line-height: 1.3; font-variant-numeric: tabular-nums; }
#goal-splits .cell { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 3px 1px 4px; border-radius: 10px; background: #f6f1ea; white-space: nowrap; }
#goal-splits .label { font-size: 11px; color: #8a6a4a; font-weight: 700; }
#goal-splits .diff { font-size: 10px; }
#goal-splits .fast { color: #3f9a4f; }
#goal-splits .slow { color: #d9776a; }
/* しんきろくの 旗：光る */
#bar .flag.record::after { animation: flagglow 0.7s ease-in-out infinite alternate; }
@keyframes flagglow { from { filter: drop-shadow(0 0 0 #ffd84a); } to { filter: drop-shadow(0 0 6px #ffd84a) brightness(1.3); } }
/* はじめの 画面：モードの 下に 小さく いまの 山の 自己ベスト */
#mode .best { margin-top: 4px; font-size: min(12px, 3.1vw); color: #8a6a4a; font-variant-numeric: tabular-nums; }
#mode .best[hidden] { display: none; }

/* ?debug=1 の ときだけ：手触りの 定数を その場で かえる スライダー */
#debug {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: 8px;
  width: 200px;
  padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  color: #333;
  touch-action: auto;
}
/* ?debug なしでは タブ（›）ごと 出さない */
#debug[hidden] { display: none !important; }
#debug label { display: block; margin: 4px 0; }
#debug input { width: 100%; }
#debug .fps { font-weight: 700; }